/* Wö Kàpi · el sistema (28 de setiembre de 2026).
   Carga después de wo-kapi.webflow.css y antes de las hojas de cada página. El contrato para
   quien construye páginas está en SISTEMA.md: variables, grilla, clases y atributos.

   1. Variables       colores, letras, escala, grilla, espacio, barra
   2. Base            cuerpo, titulares, párrafos, enlaces en el texto, foco
   3. Grilla          .contenedor, .grilla y .col-*, .banda, .medida
   4. Letras          .exhibicion, .titulo-pagina, .titulo-seccion, .titulo-pieza, .bajada, .nota, .dato
   5. Botones         .boton (lleno), .boton--contorno; .cta del export con la misma cara
   6. Barra           <header class="navbar barra"> (aplicar-nav.py + js/nav.js)
   7. Pie             <footer class="pie"> (aplicar-nav.py)
   8. Olas            .ola (images/olas/)
   9. Dibujo          .con-dibujo y .dibujo (images/ilustraciones/)
   10. Utilidades     .visualmente-oculto, salto al contenido, zoom al 200 %
   11. Legado         lo del export que todavía usan las páginas

   Reglas de la marca que este archivo hace cumplir: texto carbón sobre crema, oscuro solo en el
   hero y el pie, verde para el botón lleno y las tarjetas de reseñas; Recoleta Alt Bold para
   titular y Helvetica Neue para leer; solo pesos 400 y 700; radios de 8 px (los arcos son la
   excepción); nada de sombras de adorno, degradados ni píldoras. */

/* ============================================================
   1. Variables
   ============================================================ */
:root {
  /* Paleta de los menús 2026 (MARCA.md). Los nombres viejos (--light, --dark, --green…) siguen
     en wo-kapi.webflow.css y apuntan a los mismos valores. */
  --crema: #f8f9d8;
  --carbon: #2b2b2b;
  --verde: #5c7159;
  --verde-hondo: #536451;          /* el verde con 18 % de carbón: solo para el botón al pasar */
  --cafe: #93542a;
  --cafe-oscuro: #2d190a;
  --tostado: #c49a6c;
  --tinta: var(--carbon);          /* texto sobre crema: 13,2:1 */
  --linea: rgba(43, 43, 43, .2);   /* filetes sobre crema */
  --linea-clara: rgba(248, 249, 216, .24); /* filetes sobre carbón */
  --precio: var(--cafe);           /* 5,5:1 sobre crema; el tostado de la carta impresa da 2,2:1 */

  /* Letras */
  --serif: "Recoletaalt Webfont", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Escala (R5 con el ajuste de ANALISIS.md): pocos tamaños con saltos grandes.
     escritorio 60 · 48 · 30 · 20 · 18 · 16      celular 40 · 32 · 24 · 20 · 17 · 16
     En celular no hay 18 ni 19: la pieza, la bajada y los botones van a 20 y el cuerpo a 17,
     así entre 16 y 20 quedan tres tamaños y no cinco. */
  --t-exhibicion: clamp(40px, 4.6vw + 22px, 60px); /* 40 hasta 390, 60 desde 826 */
  --t-pagina: clamp(32px, 3.1vw + 19.9px, 48px);   /* 32 hasta 390, 48 desde 900 */
  --t-seccion: 30px;
  --t-pieza: 20px;                 /* título de una pieza, bajada y botones (también en celular) */
  --t-cuerpo: 18px;
  --t-nota: 16px;                  /* el mínimo del sitio */
  --i-titulo: 1.1;
  --i-cuerpo: 1.55;

  /* Grilla: un solo contenedor para todo el sitio. El logo, el primer titular de cada página
     y la primera columna del pie arrancan en la misma línea. */
  --ancho: 1200px;                 /* ancho máximo del contenido */
  --margen: clamp(20px, 5vw, 64px);/* margen lateral: 20 a 390, 38 a 768, 64 desde 1280 */
  --canal: clamp(16px, 2.2vw, 32px);/* espacio entre columnas */
  --medida: 38rem;                 /* 608 px: una línea de lectura de unos 68 caracteres */

  /* Espacio (R6) */
  --aire-banda: 120px;             /* entre bandas */
  --aire-seccion: 72px;            /* entre dos secciones seguidas del mismo fondo (R1) */
  --aire-zona: 56px;               /* entre zonas de una sección */
  --aire-bloque: 24px;             /* dentro de una zona */
  --aire-portada: 112px;           /* arriba de la primera banda de una página con portada (más la barra) */
  --aire-lectura: 56px;            /* arriba de una página de lectura o herramienta (más la barra) */

  --radio: 8px;
  --barra-alto: 80px;              /* 64 por debajo de 992 */
}
@media (max-width: 991px) {
  :root {
    --aire-banda: 96px;
    --aire-portada: 88px;
    --barra-alto: 64px;
  }
}
@media (max-width: 767px) {
  :root {
    --t-seccion: 24px;
    --t-cuerpo: 17px;
    --aire-banda: 80px;
    --aire-seccion: 56px;
    --aire-zona: 40px;
    --aire-bloque: 16px;
    --aire-portada: 64px;
    --aire-lectura: 32px;
  }
}

/* ============================================================
   2. Base
   Lo que no lleva clase ya se ve como el sistema. Las hojas de cada página cargan después.
   ============================================================ */
body {
  background-color: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: var(--i-cuerpo);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
h1, h2, h3, h4 {
  margin-top: 0;
  color: inherit;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
h1 { margin-bottom: 24px; font-size: var(--t-pagina); line-height: var(--i-titulo); }
h2 { margin-bottom: 16px; font-size: var(--t-seccion); line-height: 1.15; }
h3 { margin-bottom: 8px; font-size: var(--t-pieza); line-height: 1.25; }
h4 { margin-bottom: 8px; font-size: var(--t-cuerpo); line-height: 1.3; }
p { margin-top: 0; margin-bottom: 16px; }
strong, b { font-weight: 700; }

/* Enlaces dentro del texto corrido: subrayado fino. Los del cromo y los botones llevan clase. */
p a:not([class]), li a:not([class]), dd a:not([class]), figcaption a:not([class]), .enlace, .enlace-tel {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: currentColor;
}
p a:not([class]):hover, li a:not([class]):hover, dd a:not([class]):hover, .enlace:hover, .enlace-tel:hover {
  text-decoration-thickness: 2px;
}
/* Un teléfono en el texto (los artículos: 6284 4605, 7010 5752) no se parte entre renglones. */
.enlace-tel { white-space: nowrap; }

/* Foco visible en todo el sitio. currentColor se adapta al fondo (crema, carbón, verde). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
main#contenido:focus { outline: none; }

/* ============================================================
   3. Grilla
   .contenedor centra y da los márgenes; .grilla reparte 12 columnas (6 en tableta, 1 en
   celular salvo que la columna diga otra cosa); .banda da el aire vertical de una sección.
   ============================================================ */
.contenedor {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margen);
  padding-right: var(--margen);
}
.grilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: var(--aire-zona);
  align-items: start;
}
.grilla > * { grid-column: 1 / -1; min-width: 0; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: 1 / -1; }
.desde-2 { grid-column-start: 2; }
.desde-7 { grid-column-start: 7; }
.desde-8 { grid-column-start: 8; }
@media (max-width: 991px) {
  .col-3, .col-4 { grid-column: span 6; }
  .col-5, .col-6, .col-7, .col-8 { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .col-3, .col-4 { grid-column: 1 / -1; }
}
.banda { padding-top: var(--aire-banda); padding-bottom: var(--aire-banda); }
.banda--crema { background-color: var(--crema); color: var(--tinta); }
.banda--oscura { background-color: var(--carbon); color: var(--crema); }
/* Dos bandas del mismo fondo seguidas no suman dos rellenos: entre las dos quedan 72 px (56 en
   celular), R1. La de arriba pierde el de abajo y la de abajo lleva --aire-seccion. */
.banda--crema:has(+ .banda--crema), .banda--oscura:has(+ .banda--oscura) { padding-bottom: 0; }
.banda--crema + .banda--crema, .banda--oscura + .banda--oscura { padding-top: var(--aire-seccion); }
/* La primera banda de una página arranca debajo de la barra fija, con su aire. */
.banda--portada { padding-top: calc(var(--barra-alto) + var(--aire-portada)); }
.banda--lectura { padding-top: calc(var(--barra-alto) + var(--aire-lectura)); }
.medida { max-width: var(--medida); }
/* Una pila de bloques con el aire de adentro de una zona (16 a 24 px). */
.pila > * { margin-top: 0; margin-bottom: 0; }
/* :not(:first-child) pesa más que las clases de letra (que ponen margin: 0). */
.pila > :not(:first-child) { margin-top: var(--aire-bloque); }
/* Después del pico (exhibición o título de página) va un poco más de aire. */
.pila > .exhibicion + *, .pila > .titulo-pagina + * { margin-top: calc(var(--aire-bloque) + 8px); }
/* Filas separadas por un filete fino (una lista de la carta, datos, una ficha): la estructura la
   dan las líneas, no las cajas. */
.filas { margin: 0; padding: 0; list-style: none; }
.filas > * { margin: 0; padding: var(--aire-bloque) 0; border-top: 1px solid var(--linea); }
.filas > :last-child { border-bottom: 1px solid var(--linea); }
.banda--oscura .filas > * { border-color: var(--linea-clara); }

/* ============================================================
   4. Letras
   Un solo pico por pantalla: .exhibicion (o .titulo-pagina) arriba; después .titulo-seccion.
   ============================================================ */
/* Recoleta grande en mayúscula: el hero y, como máximo, una frase por página. */
.exhibicion {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-exhibicion);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.titulo-pagina {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-pagina);
  font-weight: 700;
  line-height: var(--i-titulo);
  text-wrap: balance;
}
.titulo-seccion {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-seccion);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}
.titulo-pieza {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-pieza);
  font-weight: 700;
  line-height: 1.25;
}
/* La bajada: la frase que sigue al titular. Helvetica, un paso arriba del cuerpo. */
.bajada {
  margin: 0;
  font-size: var(--t-pieza);
  line-height: 1.45;
  text-wrap: pretty;
}
.cuerpo { font-size: var(--t-cuerpo); line-height: var(--i-cuerpo); }
.nota { font-size: var(--t-nota); line-height: 1.45; }
/* Un dato grande (una cita, una cifra, una dirección): Recoleta al tamaño de sección. */
.dato {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-seccion);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
/* Un nombre y su precio en el mismo renglón (una fila de la carta, del portal): el nombre a la
   izquierda, el precio a la derecha, sobre la misma línea de base. */
.renglon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--aire-bloque);
}
.renglon > * { margin: 0; }
.renglon > :first-child { min-width: 0; }
.renglon > .precio { flex: 0 0 auto; }
.precio {
  color: var(--precio);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.banda--oscura .precio { color: var(--tostado); } /* 6,1:1 sobre carbón */

/* ============================================================
   5. Botones (R4): tres y nada más.
   - .boton              lleno: el único pico de la pantalla. Recoleta 20/700, verde, sin sombra.
   - .boton--contorno    el que acompaña a un .boton si hace falta otro camino: la misma caja y
                         la misma letra, sin relleno. En la barra es .barra-reservar.
   - el flotante de WhatsApp (componentes.css y arreglos.css), solo por debajo de 992.
   .cta es el botón del export: se ve igual que .boton y conserva su minúscula hasta que cada
   página pase a .boton con el texto en tipo oración.
   ============================================================ */
.boton, .cta {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  height: auto;
  padding: 12px 28px;
  border: 0;
  border-radius: var(--radio);
  background-color: var(--verde);
  box-shadow: none;
  color: var(--crema);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.boton { display: inline-flex; text-transform: none; }
.boton:hover, .cta:hover {
  background-color: var(--verde-hondo);
  box-shadow: none;
  color: var(--crema);
  transform: none;
}
.boton--contorno {
  border: 1.5px solid currentColor;
  background-color: transparent;
  color: inherit;
}
.boton--contorno:hover { border-color: var(--carbon); background-color: var(--carbon); color: var(--crema); }
.banda--oscura .boton--contorno:hover { border-color: var(--crema); background-color: var(--crema); color: var(--carbon); }
.boton:focus-visible, .cta:focus-visible { outline: 3px solid var(--carbon); outline-offset: 3px; }
.banda--oscura .boton:focus-visible, .banda--oscura .cta:focus-visible,
.light-black .cta:focus-visible { outline-color: var(--crema); }
@media (max-width: 767px) {
  .boton, .cta { min-height: 48px; padding: 12px 24px; }
}

/* ============================================================
   6. Barra
   Carbón, fija, 80 px (64 por debajo de 992). Logo a la izquierda en la línea del contenido;
   a la derecha cuatro enlaces en Helvetica 18/400 y «Reservá» en contorno. Se esconde al
   bajar y vuelve al subir (js/nav.js pone html.barra-oculta); con «reducir movimiento» se
   queda quieta. En la carta no se esconde (css/carta.css).
   ============================================================ */
.barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: block;
  height: var(--barra-alto);
  min-height: 0;
  border: 0;
  background-color: var(--carbon);
  color: var(--crema);
  transition: transform .25s ease;
}
html.barra-oculta .barra { transform: translateY(-100%); }
html.menu-abierto .barra { transform: none !important; }
/* Con el foco del teclado adentro no se esconde. :focus-visible y no :focus-within: después de
   abrir y cerrar el menú con el dedo el botón queda con el foco (Chrome de Android) y la barra no
   se escondía más. Va en su propia regla: un navegador sin :has() la descarta sola. */
.barra:has(:focus-visible) { transform: none !important; }
.barra-contenedor {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 0 var(--margen);
}
.barra-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  color: var(--crema);
}
.barra-logo-imagen { display: block; width: auto; height: 44px; }
.barra-logo:focus-visible { outline-color: var(--crema); }
.barra-menu { display: flex; align-items: center; gap: 40px; }
.barra-enlaces {
  display: flex;
  align-items: center;
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.barra-enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--crema);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}
.barra-enlace:hover, .barra-enlace[aria-current="page"] {
  color: var(--crema);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
.barra-reservar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 20px;
  border: 1.5px solid var(--crema);
  border-radius: var(--radio);
  color: var(--crema);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.barra-reservar:hover { background-color: var(--crema); color: var(--carbon); }
.barra-boton { display: none; }

@media (max-width: 991px) {
  .barra-logo-imagen { height: 32px; }
  /* El botón: dos rayas finas de 24 px en una caja de 44. Abierto, una cruz. */
  .barra-boton {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--radio);
    background: none;
    color: var(--crema);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .barra-boton:focus-visible { outline: 3px solid var(--crema); outline-offset: -3px; }
  .barra-boton-raya {
    display: block;
    width: 24px;
    height: 1.5px;
    background-color: currentColor;
    transition: transform .2s ease;
  }
  html.menu-abierto .barra-boton-raya:first-child { transform: translateY(4.25px) rotate(45deg); }
  html.menu-abierto .barra-boton-raya:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  /* Sin JavaScript no hay panel: las páginas están todas en el pie. */
  html:not(.js) .barra-boton { display: none; }

  /* El panel: crema, debajo de la barra, a pantalla completa. Cerrado no existe (display: none),
     así ninguna medición lo cuenta como algo en pantalla. */
  .barra-menu {
    position: fixed;
    top: var(--barra-alto);
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 32px var(--margen) calc(48px + env(safe-area-inset-bottom, 0px));
    background-color: var(--crema);
    color: var(--carbon);
  }
  html.menu-abierto .barra-menu { display: flex; animation: barra-panel .2s ease both; }
  html.menu-abierto, html.menu-abierto body { overflow: hidden; }
  .barra-enlaces { flex-direction: column; align-items: flex-start; gap: 4px; }
  .barra-menu .barra-enlace {
    min-height: 48px;
    color: var(--carbon);
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 700;
  }
  .barra-menu .barra-enlace:hover, .barra-menu .barra-enlace[aria-current="page"] { color: var(--carbon); text-underline-offset: 6px; }
  .barra-menu .barra-reservar { min-height: 48px; border-color: var(--carbon); color: var(--carbon); font-size: var(--t-pieza); }
  .barra-menu .barra-reservar:hover { background-color: var(--carbon); color: var(--crema); }
  .barra-menu a:focus-visible { outline-color: var(--carbon); }
}
@keyframes barra-panel { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .barra, .barra-boton-raya, .barra-reservar, .boton, .cta { transition: none; }
  html.menu-abierto .barra-menu { animation: none; }
  html.barra-oculta .barra { transform: none; }
}
@media print { .barra { position: static; } }

/* ============================================================
   7. Pie
   Carbón, tres zonas en la grilla de 12: visitanos (4), escribinos (3), páginas y redes (5).
   Sin íconos, sin botones, sin logo. La dirección es el único Recoleta (R4). Enlaces lisos
   de 44 px de alto que se subrayan al pasar.
   ============================================================ */
.pie {
  --pie-aire-arriba: 96px;
  --pie-aire-abajo: 72px;
  margin: 0;
  padding: var(--pie-aire-arriba) 0 calc(var(--pie-aire-abajo) + var(--pie-reserva-abajo, 0px));
  background-color: var(--carbon);
  color: var(--crema);
  font-size: var(--t-cuerpo);
  line-height: 1.45;
}
.pie-contenedor {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 48px;
  align-items: start;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 0 var(--margen);
}
.pie p { margin: 0; }
.pie-visita { grid-column: 1 / span 4; }
.pie-escribinos { grid-column: 5 / span 3; }
.pie-sitio {
  grid-column: 8 / span 5;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: var(--canal);
}
.pie-lista { margin: 0; padding: 0; list-style: none; }
.pie-paginas .pie-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--canal); }
.pie-direccion { font-family: var(--serif); font-size: var(--t-seccion); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.pie-direccion-enlace {
  display: inline-block;
  min-height: 44px;
  padding: 6px 0;
  color: var(--crema);
  text-decoration: none;
}
.pie-direccion-enlace:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.pie .pie-horario { margin-top: 12px; }
.pie .pie-waze { margin-top: 4px; }
.pie-enlace {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--crema);
  font-size: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pie-enlace:hover, .pie-enlace[aria-current="page"] {
  color: var(--crema);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.pie a:focus-visible { outline-color: var(--crema); }
/* Una página con una barra fija abajo (el pedido del portal) reserva su alto. */
html.pan-con-barra { --pie-reserva-abajo: calc(var(--pan-barra-alto, 72px) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 992px) { html.pan-con-barra { --pie-reserva-abajo: 0px; } }

@media (max-width: 1199px) {
  .pie-visita { grid-column: 1 / -1; }
  .pie-escribinos { grid-column: 1 / span 4; }
  .pie-sitio { grid-column: 5 / -1; }
}
@media (max-width: 991px) {
  .pie { --pie-aire-arriba: 72px; --pie-aire-abajo: 56px; }
}
@media (max-width: 767px) {
  .pie { --pie-aire-arriba: 64px; --pie-aire-abajo: 48px; }
  .pie-contenedor { row-gap: 32px; }
  .pie-escribinos, .pie-sitio { grid-column: 1 / -1; }
  .pie-sitio { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .pie-redes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--canal); }
}

/* ============================================================
   8. Olas
   El borde ondulado del sitio original entre dos bandas. Va en el flujo, entre las dos, así
   nunca tapa nada: una franja de 24 a 56 px con el color de arriba de fondo y la ola del
   color de abajo encima (o al revés con .ola--cae). Uno o dos por página.
     <div class="ola" style="--ola-arriba: var(--crema); --ola-abajo: var(--carbon)" aria-hidden="true"></div>
   Formas: .ola (a, la del home), .ola--b (la de nosotros), .ola--c (la del video).
   ============================================================ */
.ola {
  --ola-forma: url("../images/olas/ola-a-sube.svg");
  position: relative;
  display: block;
  height: clamp(24px, 3.4vw, 56px);
  margin: 0 0 -1px;              /* se monta 1 px sobre la banda de abajo: sin filete de luz */
  background-color: var(--ola-arriba, var(--crema));
  pointer-events: none;
}
.ola::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ola-abajo, var(--carbon));
  -webkit-mask: var(--ola-forma) center / 100% 100% no-repeat;
  mask: var(--ola-forma) center / 100% 100% no-repeat;
}
.ola--cae { --ola-forma: url("../images/olas/ola-a-cae.svg"); margin: -1px 0 0; background-color: var(--ola-abajo, var(--crema)); }
.ola--cae::before { background-color: var(--ola-arriba, var(--carbon)); }
.ola--b { --ola-forma: url("../images/olas/ola-b-sube.svg"); }
.ola--b.ola--cae { --ola-forma: url("../images/olas/ola-b-cae.svg"); }
.ola--c { --ola-forma: url("../images/olas/ola-c-sube.svg"); }
.ola--c.ola--cae { --ola-forma: url("../images/olas/ola-c-cae.svg"); }
@media (forced-colors: active) { .ola { display: none; } }

/* ============================================================
   9. Dibujo de sección
   Una ilustración de los menús 2026 junto al título de una sección, que nombra lo que hay en
   ella (MARCA.md §4): una por sección, nunca de fondo ni repetida. 64 a 96 px de alto,
   alt vacío y carga diferida. Con data-deriva se mueve 16 px como máximo al hacer scroll.
     <div class="con-dibujo">
       <h2 class="titulo-seccion">Panadería</h2>
       <img class="dibujo" src="/images/ilustraciones/tostadas.svg" alt="" width="72" height="52" loading="lazy" data-deriva>
     </div>
   ============================================================ */
.con-dibujo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
/* El título ocupa lo que mide y el dibujo va pegado a su final, no en la otra punta de la fila. */
.con-dibujo > :first-child { flex: 0 1 auto; min-width: 0; }
.dibujo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 80px;
  max-width: 40%;
  object-fit: contain;
}
.dibujo--chico { height: 64px; }
.dibujo--grande { height: 96px; }
@media (max-width: 767px) {
  .dibujo, .dibujo--grande { height: 64px; }
}

/* ============================================================
   10. Utilidades
   ============================================================ */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Salto al contenido: fuera de la pantalla hasta que recibe el foco. */
.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 14px 22px;
  background: var(--verde);
  color: var(--crema);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.saltar-al-contenido:focus { left: 12px; top: 12px; outline: 2px solid var(--crema); outline-offset: 2px; }

/* Zoom al 200 % en un celular de 390 (quedan 195 px CSS) y pantallas de 320 o menos: nada se
   sale. Los titulares bajan un paso y las palabras largas se parten. */
@media (max-width: 320px) {
  :root { --t-exhibicion: 30px; --t-pagina: 26px; --t-seccion: 22px; }
  h1 { font-size: 28px !important; line-height: 1.15 !important; }
  h2 { font-size: 22px !important; line-height: 1.2 !important; }
  h3 { font-size: 20px !important; }
  h1, h2, h3, h4, p, li, dt, dd, label, figcaption, blockquote, a, span, button { overflow-wrap: anywhere; }
  .cta, .boton { white-space: normal !important; height: auto !important; }
  a[href^="mailto:"] { white-space: normal !important; }
  input, select, textarea { min-width: 0; max-width: 100%; }
  .w-layout-grid, .inicio-entradas, .inicio-piezas { grid-template-columns: minmax(0, 1fr) !important; }
  .barra-enlace, .barra-reservar { white-space: normal; }
  .pie-paginas .pie-lista, .pie-redes { grid-template-columns: minmax(0, 1fr); }
  /* contacto: nombre, dato, uso y acción uno debajo del otro */
  .contacto-lista .contacto-canal {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nombre" "dato" "uso" "accion";
  }
  .contacto-lista .contacto-canal-accion { justify-self: start; }
  a.pie-dato, .inicio-plato .inicio-plato-precio, p.inicio-nota a { white-space: normal; }
  .fill-move-down { overflow-x: clip; }
  .inicio-platos .inicio-plato { grid-template-columns: minmax(0, 1fr); }
  .inicio-platos .inicio-plato img { grid-row: auto; }
  .inicio-plato .inicio-plato-linea, .inicio-plato .inicio-plato-desc { grid-column: 1; }
  .inicio-plato .inicio-plato-linea { margin-top: 12px; }
}

/* ============================================================
   11. Legado: lo del export que todavía usan las páginas
   ============================================================ */
/* Títulos de las tarjetas del blog y del cuerpo de los artículos (h2 que se ven como sección). */
.tarjeta-titulo, .articulo-titulo {
  margin-top: 22px;
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: var(--t-seccion);
  font-weight: 700;
  line-height: 1.15;
}
.tarjeta-titulo { color: var(--tinta); }
.articulo-titulo { color: inherit; }
/* Cuerpo de los artículos: una medida de lectura. */
.w-richtext p, .w-richtext li { max-width: var(--medida); line-height: 1.6; }
/* El mensaje de éxito del formulario de eventos, legible. */
.tile.success, .tile.success .subtitle { color: var(--carbon); }
/* Formulario de eventos: foco y opciones del select. */
.text-field:focus-visible, .select-field:focus-visible { outline: 2px solid var(--tostado); outline-offset: 1px; }
.select-field.book-page option { color: var(--carbon); background-color: var(--crema); }
.select-field { height: 64px; }
@media (max-width: 767px) { .select-field { margin-bottom: 40px; } }
@media (max-width: 479px) { .select-field { margin-bottom: 32px; } }
/* Grillas de dos del export: en celular, una columna. */
@media (max-width: 991px) { .grid-halves.gap-20px { grid-template-rows: auto; grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .grid-halves.gap-20px { grid-template-rows: auto; grid-template-columns: 1fr; } }