/* Paletas para comparar la página (16oct2026, dictado §32 punto 153). Cada sección usa SOLO estas variables para sus colores.
   La paleta la pone paletas.js en <html data-paleta="..."> (por la URL ?paleta= o por un mensaje de la página que la contiene).
   Con data-paleta="mezcla" cada sección toma su propio fondo según <html data-seccion="...">.
   --c-fondo        fondo principal de la sección
   --c-tinta        texto sobre --c-fondo
   --c-suave        texto secundario sobre --c-fondo
   --c-acento       títulos destacados y precios (el dorado en casi todas)
   --c-acento2      segundo color (manchas, detalles)
   --c-oscuro       fondo de cajas o bandas oscuras dentro de la sección
   --c-sobre-oscuro texto sobre --c-oscuro
   --c-linea        líneas y bordes finos
   --c-boton / --c-boton-tinta   botón principal
   --c-sobre-acento2  texto que se lee encima de un fondo --c-acento2
   Colores de sección de la carta impresa (30_sistema/ui/carta/v2): --c-sec-cafe, --c-sec-postres, --c-sec-frias,
   --c-sec-desayunos, --c-sec-almuerzo. */
:root, [data-paleta="portada"]{
  --c-sobre-acento2:#1A0F0B;
  --c-fondo:#F1DFC9; --c-tinta:#1A0F0B; --c-suave:#5B4639; --c-acento:#B8963E; --c-acento2:#DC772F;
  --c-oscuro:#1A0F0B; --c-sobre-oscuro:#F1DFC9; --c-linea:rgba(26,15,11,.16); --c-boton:#1A0F0B; --c-boton-tinta:#F1DFC9;
  --c-sec-cafe:#C9A24A; --c-sec-postres:#E68A9B; --c-sec-frias:#8CC4D6; --c-sec-desayunos:#E5A139; --c-sec-almuerzo:#E07B55;
}
/* la carta impresa: negro puro, crema, dorado de precio y el color de cada sección */
[data-paleta="carta"]{
  --c-fondo:#000000; --c-tinta:#F6EFE4; --c-suave:#BDB3A6; --c-acento:#D8B565; --c-acento2:#E07B55;
  --c-oscuro:#121010; --c-sobre-oscuro:#F6EFE4; --c-linea:#2E2925; --c-boton:#D8B565; --c-boton-tinta:#000000;
}
/* el azul del sofá (el del sitio publicado) con el dorado y el crema del logo */
[data-paleta="azul"]{
  --c-fondo:#F6EFE4; --c-tinta:#0E1F35; --c-suave:#4A5B73; --c-acento:#B48F38; --c-acento2:#1E3D68;
  --c-oscuro:#16304F; --c-sobre-oscuro:#F6EFE4; --c-linea:rgba(14,31,53,.16); --c-boton:#16304F; --c-boton-tinta:#F6EFE4; --c-sobre-acento2:#F6EFE4;
}
/* los colores del logo: negro, dorado de las letras y crema */
[data-paleta="logo"]{
  --c-fondo:#F3EADA; --c-tinta:#0D0B09; --c-suave:#5E554B; --c-acento:#A8873A; --c-acento2:#CAAF6A;
  --c-oscuro:#0D0B09; --c-sobre-oscuro:#EADFC8; --c-linea:rgba(13,11,9,.16); --c-boton:#0D0B09; --c-boton-tinta:#E3CF97; --c-sobre-acento2:#0D0B09;
}
/* llamativa: el turquesa de las puertas del local, coral y amarillo */
[data-paleta="llamativa"]{
  --c-fondo:#FFF6E8; --c-tinta:#12322F; --c-suave:#42605C; --c-acento:#D99A1E; --c-acento2:#E07B55;
  --c-oscuro:#1E6F6D; --c-sobre-oscuro:#FFF6E8; --c-linea:rgba(18,50,47,.16); --c-boton:#E07B55; --c-boton-tinta:#12322F;
}
/* mezcla: cada sección con un fondo distinto (la carta en negro como la impresa) */
[data-paleta="mezcla"][data-seccion="cabecera"],[data-paleta="mezcla"][data-seccion="empezar"]{
  --c-fondo:#F1DFC9; --c-tinta:#1A0F0B; --c-suave:#5B4639; --c-acento:#B8963E; --c-acento2:#DC772F;
  --c-oscuro:#1A0F0B; --c-sobre-oscuro:#F1DFC9; --c-linea:rgba(26,15,11,.16); --c-boton:#1A0F0B; --c-boton-tinta:#F1DFC9}
[data-paleta="mezcla"][data-seccion="menu"]{
  --c-fondo:#000000; --c-tinta:#F6EFE4; --c-suave:#BDB3A6; --c-acento:#D8B565; --c-acento2:#E07B55;
  --c-oscuro:#121010; --c-sobre-oscuro:#F6EFE4; --c-linea:#2E2925; --c-boton:#D8B565; --c-boton-tinta:#000000}
[data-paleta="mezcla"][data-seccion="cotoni"]{
  --c-fondo:#16304F; --c-tinta:#F6EFE4; --c-suave:#C9D6E6; --c-acento:#C9A24A; --c-acento2:#1E3D68;
  --c-oscuro:#0E1F35; --c-sobre-oscuro:#F6EFE4; --c-linea:rgba(246,239,228,.18); --c-boton:#C9A24A; --c-boton-tinta:#0E1F35}
[data-paleta="mezcla"][data-seccion="llevar"]{
  --c-fondo:#E07B55; --c-tinta:#1A0F0B; --c-suave:#3B1E12; --c-acento:#5A1E08; --c-acento2:#1A0F0B;
  --c-oscuro:#1A0F0B; --c-sobre-oscuro:#F6EFE4; --c-linea:rgba(26,15,11,.2); --c-boton:#1A0F0B; --c-boton-tinta:#F6EFE4}
[data-paleta="mezcla"][data-seccion="rosso"]{
  --c-fondo:#2A1A12; --c-tinta:#F6EFE4; --c-suave:#CDBBA8; --c-acento:#D8B565; --c-acento2:#B0413E;
  --c-oscuro:#140C08; --c-sobre-oscuro:#F6EFE4; --c-linea:rgba(246,239,228,.16); --c-boton:#D8B565; --c-boton-tinta:#1A0F0B}
[data-paleta="mezcla"][data-seccion="historia"]{
  --c-fondo:#1A0F0B; --c-tinta:#F1DFC9; --c-suave:#C9B8A6; --c-acento:#CAAF6A; --c-acento2:#DC772F;
  --c-oscuro:#0D0705; --c-sobre-oscuro:#F1DFC9; --c-linea:rgba(241,223,201,.16); --c-boton:#CAAF6A; --c-boton-tinta:#1A0F0B}
[data-paleta="mezcla"][data-seccion="reservas"]{
  --c-fondo:#F6EFE4; --c-tinta:#0E1F35; --c-suave:#4A5B73; --c-acento:#B48F38; --c-acento2:#1E3D68;
  --c-oscuro:#16304F; --c-sobre-oscuro:#F6EFE4; --c-linea:rgba(14,31,53,.16); --c-boton:#16304F; --c-boton-tinta:#F6EFE4}
[data-paleta="mezcla"][data-seccion="instagram"]{
  --c-fondo:#1E6F6D; --c-tinta:#FFF6E8; --c-suave:#DDEFEE; --c-acento:#F2CB6B; --c-acento2:#E07B55;
  --c-oscuro:#12322F; --c-sobre-oscuro:#FFF6E8; --c-linea:rgba(255,246,232,.2); --c-boton:#F2CB6B; --c-boton-tinta:#12322F}
[data-paleta="mezcla"][data-seccion="visitanos"]{
  --c-fondo:#F1DFC9; --c-tinta:#1A0F0B; --c-suave:#5B4639; --c-acento:#B8963E; --c-acento2:#DC772F;
  --c-oscuro:#1A0F0B; --c-sobre-oscuro:#F1DFC9; --c-linea:rgba(26,15,11,.16); --c-boton:#1A0F0B; --c-boton-tinta:#F1DFC9}
[data-paleta="mezcla"][data-seccion="pie"]{
  --c-fondo:#0E1F35; --c-tinta:#F6EFE4; --c-suave:#C9D6E6; --c-acento:#C9A24A; --c-acento2:#1E3D68;
  --c-oscuro:#08121F; --c-sobre-oscuro:#F6EFE4; --c-linea:rgba(246,239,228,.16); --c-boton:#C9A24A; --c-boton-tinta:#0E1F35}

/* ===== 17oct2026, dictado §33 punto 155: la que va. Los colores del logo (negro, dorado, crema) con el fondo de la portada
   (#F1DFC9, el del hero, "más oscurito"). El dorado de letra es más hondo que el del logo para que se lea sobre ese fondo. ===== */
[data-paleta="cotoni"],[data-paleta="cotoni2"]{
  --c-fondo:#F1DFC9; --c-tinta:#0D0B09; --c-suave:#5B4A3C; --c-acento:#93752E; --c-acento2:#CAAF6A;
  --c-oscuro:#0D0B09; --c-sobre-oscuro:#EADFC8; --c-linea:rgba(13,11,9,.16); --c-boton:#0D0B09; --c-boton-tinta:#E3CF97; --c-sobre-acento2:#0D0B09;
}
/* cotoni2: la misma, con el menú negro de la carta impresa, la historia en el negro del logo y el azul del sofá solo en
   El Cotoni y en el pie (punto 155: "tal vez en ciertas secciones y no todas") */
[data-paleta="cotoni2"][data-seccion="menu"]{
  --c-fondo:#000000; --c-tinta:#F6EFE4; --c-suave:#BDB3A6; --c-acento:#D8B565; --c-acento2:#E07B55;
  --c-oscuro:#121010; --c-sobre-oscuro:#F6EFE4; --c-linea:#2E2925; --c-boton:#D8B565; --c-boton-tinta:#000000}
[data-paleta="cotoni2"][data-seccion="historia"]{
  --c-fondo:#0D0B09; --c-tinta:#EADFC8; --c-suave:#BFB29C; --c-acento:#CAAF6A; --c-acento2:#93752E;
  --c-oscuro:#1C1814; --c-sobre-oscuro:#EADFC8; --c-linea:rgba(234,223,200,.16); --c-boton:#CAAF6A; --c-boton-tinta:#0D0B09}
[data-paleta="cotoni2"][data-seccion="cotoni"]{
  --c-fondo:#16304F; --c-tinta:#F6EFE4; --c-suave:#C9D6E6; --c-acento:#CAAF6A; --c-acento2:#1E3D68;
  --c-oscuro:#0E1F35; --c-sobre-oscuro:#F6EFE4; --c-linea:rgba(246,239,228,.18); --c-boton:#CAAF6A; --c-boton-tinta:#0E1F35}
[data-paleta="cotoni2"][data-seccion="pie"]{
  --c-fondo:#0E1F35; --c-tinta:#F6EFE4; --c-suave:#C9D6E6; --c-acento:#CAAF6A; --c-acento2:#1E3D68;
  --c-oscuro:#08121F; --c-sobre-oscuro:#F6EFE4; --c-linea:rgba(246,239,228,.16); --c-boton:#CAAF6A; --c-boton-tinta:#0E1F35}

/* ===== 17oct2026, puntos 157 y 159: UNA escala de letra para toda la página (antes cada sección traía la suya y los
   títulos llegaban a 170-270 px). Títulos Tanker, nombres de plato Big Shoulders (como la carta impresa), texto Manrope. ===== */
:root{
  --t-h2: clamp(40px, 4.2vw, 64px);      /* título de sección */
  --t-h3: clamp(24px, 2vw, 30px);        /* subtítulo */
  --t-p: clamp(16px, 1.1vw, 18px);       /* texto */
  --t-chico: 14px;                       /* notas */
  --t-boton: 15px;                       /* botones, Manrope 800 */
  --t-pad: clamp(56px, 6vw, 96px);       /* aire arriba y abajo de cada sección */
}

/* ===== 17oct2026, dictado §34 punto 176: la que va es "cotoni2", con la PORTADA OSCURA como en la carta impresa ("le da
   un aura bien bonita"). <html data-portada="oscura|coral|clara"> (paletas.js, ?portada=): oscura = el negro de la carta con
   la mancha dorada del logo; coral = igual que la carta impresa; clara = la de antes. La cabecera de arriba va igual que la
   portada, para que sus letras se lean sobre ella. ===== */
[data-paleta="cotoni2"]:not([data-portada="clara"])[data-seccion="portada"],
[data-paleta="cotoni2"]:not([data-portada="clara"])[data-seccion="cabecera"]{
  --c-fondo:#000000; --c-tinta:#F6EFE4; --c-suave:#BDB3A6; --c-acento:#D8B565; --c-acento2:#CAAF6A;
  --c-oscuro:#121010; --c-sobre-oscuro:#F6EFE4; --c-linea:#2E2925; --c-boton:#D8B565; --c-boton-tinta:#000000; --c-sobre-acento2:#0D0B09}
[data-paleta="cotoni2"][data-portada="coral"][data-seccion="portada"],
[data-paleta="cotoni2"][data-portada="coral"][data-seccion="cabecera"]{ --c-acento2:#E07B55; --c-sobre-acento2:#1A0F0B }
/* 17oct §34 puntos 178 y 182: separación entre secciones. "Pide para llevar" va sobre la foto del frente del local (oscura)
   e Instagram en el negro del logo: así Reservas, Instagram y Visítanos ya no quedan tres claras seguidas. */
[data-paleta="cotoni2"][data-seccion="llevar"],[data-paleta="cotoni2"][data-seccion="instagram"]{
  --c-fondo:#0D0B09; --c-tinta:#EADFC8; --c-suave:#BFB29C; --c-acento:#CAAF6A; --c-acento2:#93752E;
  --c-oscuro:#1C1814; --c-sobre-oscuro:#EADFC8; --c-linea:rgba(234,223,200,.16); --c-boton:#CAAF6A; --c-boton-tinta:#0D0B09; --c-sobre-acento2:#0D0B09}

/* 17oct (§36): cada sección es un marco del alto de su contenido; adentro nunca hace falta barra de desplazamiento. En
   Windows (Chrome, Edge, Firefox) y en Safari de escritorio una barra fija se comía el ancho de la sección. */
html[data-seccion]:not([data-seccion="cabecera"]){scrollbar-width:none}
html[data-seccion]:not([data-seccion="cabecera"])::-webkit-scrollbar{width:0;height:0;display:none}