@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   COCINA DE MARÍA — Villarrica
   Demo 137 · tanda P4 (la primera) · subida a premium el 09-09-2026

   IDENTIDAD — «TIZA Y PIZARRA»
   El menú del día de una cocinería vive en una pizarra colgada en la
   puerta. La página ES esa pizarra: verde escolar mate de fondo,
   blanco tiza para escribir y madera clara en el marco. Nada más.

   DESLINDE DE VERDES: el fierro del molino (125) es esmalte oscuro
   azulado de maquinaria; el polín (122) es madera tratada; la hoja
   (135) es vegetal cálida; el quirófano (162) es textil clínico;
   el láser (131) es luz. Éste es VERDE DE PIZARRA ESCOLAR — mate,
   frío, sin brillo — y es FONDO, no acento: es el único verde del
   registro que ocupa la página entera.
   La tiza se deslinda del blanco de flanco de la 133: aquél es letra
   GRABADA en goma, dura y permanente; ésta es letra ESCRITA que se
   borra — de ahí la textura irregular y el fondo que se limpia.

   TRÍO TIPOGRÁFICO
   · Display: Shantell Sans — nueva en el registro. Manuscrita de
     verdad pero adulta: escribe como una mano, no como un cuento
     infantil. Es la única manera honesta de hacer tiza sin recurrir
     a una fuente de caricatura.
   · Cuerpo: Nunito — 3 usos, redondeada y amable, del lado de la
     casa y no del restaurante de moda.
   · Dato: Cousine — 6 usos, para los precios de la carta: cifras
     tabulares para que la columna quede alineada sola.

   CABECERA 103ª DEL OFICIO: EL PLATO HONDO — el plato de sopa visto
   de frente (dos círculos concéntricos, el de adentro más hondo) con
   dos hilos de vapor cortos. Deslinde con la olla de la 63ª: aquélla
   era el cacharro de la cocina; éste es el plato SERVIDO en la mesa.

   ESCENA: LA TIZA QUE ESCRIBE Y SE BORRA — un trazo se dibuja de
   corrido bajo el rótulo de la portada y después un paño lo ESFUMA:
   el borrado va con blur creciente y desplazamiento lateral, que es
   como se ve una pizarra recién pasada. Bucle de 16 s, y es el ÚNICO
   bucle infinito de CSS de toda la página: desde que hay clip de
   fondo, el video es el ambiente y todo lo demás se quedó quieto.
   DESLINDE OBLIGATORIO de trazos: el hilván de la 130 avanza a SALTOS
   (costura); la firma de la 167 se traza y se desvanece en fade
   parejo; ésta se BORRA CON PAÑO — el trazo no se apaga: se emborrona
   de un lado al otro. Reduced-motion: trazo quieto, ya escrito.
   La escena vive DENTRO de la columna de texto, sobre la zona donde
   el velo es sólido: si se pone sobre la mitad nítida le pelea al
   clip, que es lo que §4.4 del estándar manda no hacer.

   ESTRUCTURA: D (página-carta). DESLINDE con la 88, 128, 130 y 147,
   que también son D: acá la carta es una PIZARRA DE ALMUERZO y su
   protagonista es la sección EDITABLE del día — el HTML lleva
   instrucciones comentadas para que la casa cambie el menú sin tocar
   código, que es lo que hace que la página siga viva el mes tres.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --pizarra:    #2F4038;  /* verde escolar mate: la base                        */
  --pizarra-h:  #253229;  /* un escalón más oscuro: bandas y pie                */
  --tiza:       #F2F0E9;  /* 9,5:1 sobre pizarra · 11,8:1 sobre pizarra-h       */
  --tiza-s:     #B8C4B8;  /* 6,0:1 sobre pizarra — secundario en oscuro         */
  --madera:     #C9A87C;  /* 4,9:1 sobre pizarra — acento EN OSCURO; nunca      */
                          /* sobre madera-cl, ahí da 1,8:1                      */
  --madera-cl:  #EDE4D4;  /* fondo de las bandas claras                         */
  --blanco:     #FFFFFF;  /* tercer nivel de claridad dentro de las claras      */
  --tinta:      #2A2A24;  /* 11,6:1 sobre madera-cl                             */
  --tinta-s:    #5C5A4E;  /* 5,5:1 sobre madera-cl — medido contra el PANEL,    */
                          /* no contra el fondo de la página                    */
  --madera-h:   #7A5A2E;  /* 5,0:1 sobre madera-cl — acento EN CLARO            */
  --madera-luz: #E3D1B0;  /* la madera SUBIDA DE LUZ, y sólo para el eco de la  */
                          /* banda de cita: ahí el texto va sobre el clip de la */
                          /* pizarra y el --madera daba 4,22:1 MEDIDO — falla   */
                          /* el 4,5:1 del texto chico. Éste da 6,3:1 sobre ese  */
                          /* mismo fondo. No se usa en ningún otro sitio: el    */
                          /* acento de la identidad sigue siendo --madera.      */

  --display: 'Shantell Sans', 'Comic Sans MS', cursive;
  --cuerpo:  'Nunito', system-ui, sans-serif;
  --mono:    'Cousine', ui-monospace, monospace;

  --ancho: 1060px;

  /* Curva expresiva: página oscura, display manuscrita. Expo-out —
     llega rápido y frena largo, que es lo que aguanta una letra
     grande (§4.9 del estándar). */
  --sale:   cubic-bezier(.16, 1, .3, 1);
  --muelle: linear(0, .32 14%, .68 26%, .92 38%, 1.04 50%, 1.01 64%, .99 78%, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* una regla con display pisa el atributo hidden: hay que declararlo */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--pizarra);
  color: var(--tiza);
  font-family: var(--cuerpo);
  font-size: clamp(1rem, .95rem + .3vw, 1.08rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; }
h3 { font-family: var(--display); font-weight: 600; margin: 0; line-height: 1.25; }
p { margin: 0 0 1.05em; text-wrap: pretty; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--madera); outline-offset: 3px; border-radius: 4px;
}

/* ── Botones ──────────────────────────────────────────────────────
   Sólido de madera con letra casi negra: 7,2:1 medido, y el mismo par
   funciona sobre las bandas oscuras y sobre las claras, así que hay un
   solo botón en toda la página. Sombra del color del acento y con
   spread negativo: no se ve un rectángulo gris debajo, se ve el botón
   levantándose. */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.6rem;
  background: var(--madera); color: #2A1F0F;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  text-decoration: none; border-radius: 999px;
  box-shadow: 0 10px 26px -14px rgba(122, 90, 46, .9);
  transition: transform .25s var(--sale), box-shadow .25s ease, filter .25s ease;
}
.boton:hover, .boton:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }

.fantasma {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.6rem;
  text-decoration: none; border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  border: 1px solid var(--madera); color: var(--madera);
  transition: background .25s ease, color .25s ease;
}
.fantasma:hover, .fantasma:focus-visible { background: var(--madera); color: #2A1F0F; }

/* ── Banda de propuesta ───────────────────────────────────────── */
.propuesta {
  background: var(--madera); color: #2A1F0F;
  padding: 1.1rem clamp(1.1rem, 5vw, 3rem);
}
.propuesta__que { font-size: .84rem; margin: 0 0 .25rem; }
.propuesta .propuesta__gancho { font-size: .84rem; margin: 0; max-width: 78ch; color: #3A2B12; }
.propuesta b { font-weight: 600; }

/* ── Cabecera fantasma ────────────────────────────────────────── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 2.5rem);
  padding: .75rem clamp(1.1rem, 5vw, 3rem);
  background: var(--pizarra-h);
  border-bottom: 1px solid #3E5246;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
/* Por defecto sólida: si el JS no corre, la cabecera se lee igual. */
.cab.cab--ghost  { background: rgba(37,50,41,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: transparent; }
.cab.cab--oculta { transform: translateY(-110%); }

.cab__marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; min-height: 44px; }
.cab__nombre { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }

/* EL PLATO HONDO — cabecera 103ª. Dos círculos concéntricos (el ala y
   el hondo) y dos hilos de vapor que salen del borde superior. */
.plato { position: relative; flex: none; width: 26px; height: 22px; }
.plato::before {  /* el plato */
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 26px; height: 13px;
  border: 2px solid var(--tiza);
  border-radius: 0 0 14px 14px;
  border-top: 0;
  box-shadow: inset 0 -4px 0 -3px var(--tiza);
}
.plato::after {   /* los dos hilos de vapor */
  content: ''; position: absolute; left: 7px; top: 0;
  width: 12px; height: 8px;
  background:
    radial-gradient(circle at 2px 8px, transparent 3px, var(--tiza) 3px 4px, transparent 4px),
    radial-gradient(circle at 10px 8px, transparent 3px, var(--tiza) 3px 4px, transparent 4px);
}

.cab__nav { display: none; gap: 1.5rem; margin-left: auto; font-size: .9rem; }
.cab__nav a { text-decoration: none; color: var(--tiza-s); display: inline-flex; align-items: center; min-height: 44px; }
.cab__nav a:hover, .cab__nav a:focus-visible { color: var(--madera); }
@media (min-width: 980px) { .cab__nav { display: flex; } }

.cab__wsp { margin-left: auto; text-align: right; text-decoration: none; line-height: 1.15; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 980px) { .cab__wsp { margin-left: 0; } }
.cab__wsp-rot {
  display: block; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--madera);
}
.cab__wsp-num { display: block; font-weight: 600; font-size: .95rem; }

/* ══════════════ PORTADA ══════════════ */
.portada {
  position: relative; overflow: hidden;
  min-height: min(88svh, 820px);
  display: flex; align-items: flex-end;
  padding: clamp(3rem, 9vw, 6rem) clamp(1.1rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem);
  /* la textura de la pizarra: manchas de tiza vieja que nunca se van */
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(242,240,233,.045), transparent 70%),
    radial-gradient(50% 35% at 75% 60%, rgba(242,240,233,.035), transparent 70%),
    var(--pizarra);
}

/* FONDO — LA TIZA QUE ESCRIBE Y SE BORRA.
   El trazo aparece de izquierda a derecha (width), se queda escrito, y
   después el paño lo emborrona: blur que crece mientras se desplaza.
   Va dentro de la columna de texto para no pelearle al clip. */
.tiza-fondo { height: 14px; margin: 0 0 1.4rem; pointer-events: none; }
.tiza-fondo span {
  display: block; height: 6px; width: 0;
  max-width: min(38vw, 260px);
  border-radius: 3px;
  background: linear-gradient(to right,
    rgba(242,240,233,.30), rgba(242,240,233,.55) 40%, rgba(242,240,233,.22));
  transform: rotate(-2deg);
  animation: escribeYborra 16s ease-in-out infinite;
}
@keyframes escribeYborra {
  0%        { width: 0;    filter: blur(0); opacity: .85; transform: rotate(-2deg) translateX(0); }
  25%       { width: 100%; filter: blur(0); opacity: .85; transform: rotate(-2deg) translateX(0); }
  62%       { width: 100%; filter: blur(0); opacity: .85; transform: rotate(-2deg) translateX(0); }
  /* el paño: se emborrona y arrastra hacia un lado, no se apaga */
  82%       { width: 100%; filter: blur(6px); opacity: .35; transform: rotate(-2deg) translateX(14px) scaleY(1.6); }
  92%, 100% { width: 100%; filter: blur(10px); opacity: 0;  transform: rotate(-2deg) translateX(22px) scaleY(1.8); }
}
@media (prefers-reduced-motion: reduce) {
  .tiza-fondo span { animation: none; width: 100%; opacity: .8; }
}

/* OJO: el max-width en `ch` se calcula con la fuente del CONTENEDOR
   (Nunito 17px), no con la del titular. Con 22ch daban 289px y el h1
   de 80px se partia en cinco lineas en vez de las dos que pide el
   <br>. Va en rem para que mida lo que se ve. */
.portada__texto { position: relative; max-width: min(92vw, 44rem); }
.sitio {
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--madera); margin-bottom: 1.1rem;
}
.portada h1 { font-size: clamp(2.4rem, 7.5vw, 5rem); margin-bottom: 1.2rem; }
.portada .bajada { max-width: 44ch; color: var(--tiza-s); }
.portada__botones { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2rem 0 0; }

/* ══════════════ CIFRAS ══════════════
   Banda clara justo debajo de la portada oscura: rompe el túnel y
   pone la herida en la misma fila que la prueba social. Sólo cuenta
   el 516, que es el único número que costó verificar. */
.cifras {
  background: var(--madera-cl); color: var(--tinta);
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.1rem, 5vw, 3rem);
  border-top: 3px solid var(--madera-h);
}
.cifras__lista {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.cifras__lista li { text-align: center; }
.cifras__lista b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1;
  color: var(--madera-h); font-variant-numeric: tabular-nums;
}
.cifras__lista span {
  display: block; margin-top: .45rem;
  font-size: .82rem; line-height: 1.45; color: var(--tinta-s);
}
@media (max-width: 700px) { .cifras__lista { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } }

/* ══════════════ LA PIZARRA DE HOY ══════════════ */
.pizarra {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(3rem, 9vw, 5.5rem) clamp(1.1rem, 5vw, 3rem);
  background: var(--pizarra-h);
}
/* El marco de madera: es lo que hace que se lea como pizarra colgada
   y no como una sección oscura cualquiera. */
.pizarra__marco {
  max-width: var(--ancho); margin: 0 auto;
  border: 10px solid var(--madera);
  border-radius: 4px;
  padding: clamp(1.6rem, 5vw, 3.2rem);
  background:
    radial-gradient(70% 50% at 30% 20%, rgba(242,240,233,.05), transparent 70%),
    var(--pizarra);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.8);
}
.antetitulo {
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--madera); margin-bottom: .7rem;
}
.pizarra h2 { font-size: clamp(2rem, 6.5vw, 3.6rem); margin-bottom: .6rem; }
.pizarra__entradilla { color: var(--tiza-s); max-width: 62ch; }
.pizarra__fecha {
  font-family: var(--mono); font-size: .92rem;
  color: var(--tiza-s); margin-bottom: 1.4rem;
  font-variant-numeric: tabular-nums;
}

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--madera);
  border-left: 2px solid var(--madera);
  padding-left: .6rem;
}

/* Los platos del día: la línea de puntos es de carta, no de tabla. */
.platos { list-style: none; margin: 1.6rem 0; padding: 0; }
.platos li {
  display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  padding: .5rem 0;
}
.platos li::after {
  content: ''; flex: 1 1 auto;
  border-bottom: 2px dotted rgba(184,196,184,.45);
  transform: translateY(-.3em);
}
.platos__n { white-space: normal; }
.pizarra__p {
  font-family: var(--mono); font-size: .82rem;
  white-space: nowrap; color: var(--madera);
  border-bottom: 1px dashed var(--madera);
}
.pizarra .pizarra__nota { color: var(--tiza-s); font-size: .96rem; max-width: 58ch; margin: 0 0 1.6rem; }
.pizarra__ir { margin: 0 0 1.4rem; }
.pizarra .pizarra__honesta {
  font-family: var(--mono); font-size: .76rem; line-height: 1.6;
  color: var(--tiza-s); max-width: 66ch; margin: 0;
  border-left: 2px dotted var(--madera); padding-left: .9rem;
}

.falta {
  font-family: var(--mono); font-size: .8rem;
  color: var(--madera); border-bottom: 1px dashed var(--madera);
}

/* ══════════════ LA CARTA FIJA ══════════════ */
.carta {
  background: var(--madera-cl); color: var(--tinta);
  padding: clamp(3.5rem, 10vw, 6rem) clamp(1.1rem, 5vw, 3rem);
}
.carta__cabecera { max-width: var(--ancho); margin: 0 auto 2.4rem; }
.antetitulo--oscuro { color: var(--madera-h); }
.carta h2 { font-size: clamp(2rem, 6vw, 3.4rem); margin-bottom: .8rem; }
.carta__cabecera > p { max-width: 54ch; color: var(--tinta-s); }
.marca-ejemplo--oscuro::before { color: var(--madera-h); border-left-color: var(--madera-h); }

.carta__grupos { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 2.4rem; }
@media (min-width: 820px) { .carta__grupos { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.grupo h3 {
  font-size: 1.5rem; margin-bottom: .9rem;
  border-bottom: 2px solid var(--madera-h); padding-bottom: .4rem;
}
.lineas { list-style: none; margin: 0; padding: 0; }
.lineas li {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .5rem 0; font-size: 1rem;
}
.lineas li::after {
  content: ''; flex: 1 1 auto;
  border-bottom: 1px dotted rgba(42,42,36,.3);
  transform: translateY(-.28em);
}
.lineas__q { white-space: normal; }
.lineas__p {
  font-family: var(--mono); font-size: .78rem; white-space: nowrap;
  color: var(--madera-h); border-bottom: 1px dashed var(--madera-h);
}

/* El margin-left calculado pone el borde izquierdo EN EL RIEL (el mismo de
   .carta__cabecera y .carta__grupos) sin renunciar a la medida de 62ch.
   Con `margin: 2.4rem auto` el parrafo se centraba y arrancaba 255 px a la
   derecha del h2: la seccion entera se leia descuadrada. */
.carta .firma {
  margin: 2.4rem auto 0;
  margin-left: max(0px, calc(50% - var(--ancho) / 2));
  font-size: .9rem; color: var(--tinta-s); max-width: min(var(--ancho), 62ch);
}

/* ══════════════ LA CASERA ══════════════ */
.casera {
  background: var(--pizarra);
  padding: clamp(3.5rem, 10vw, 6rem) clamp(1.1rem, 5vw, 3rem);
}
.casera__cuerpo { position: relative; max-width: var(--ancho); margin: 0 auto; }
.casera h2 { font-size: clamp(2rem, 6vw, 3.4rem); margin-bottom: 1.1rem; }
.casera .entrada { max-width: 58ch; color: var(--tiza-s); }

/* ══════════════ RESERVAR ══════════════
   Banda clara con una tarjeta blanco puro adentro: tres niveles de
   claridad, que es lo que la saca de «bloque de color». El <dl> se lee
   como ficha técnica, no como tabla de contacto. */
.reserva {
  background: var(--madera-cl); color: var(--tinta);
  padding: clamp(3.5rem, 9vw, 5.5rem) clamp(1.1rem, 5vw, 3rem);
}
.reserva__cols {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: 2.4rem; align-items: start;
}
@media (min-width: 900px) { .reserva__cols { grid-template-columns: 1fr 1fr; gap: 3.2rem; } }
.reserva h2 { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: .8rem; }
.reserva__intro { color: var(--tinta-s); max-width: 46ch; }

.ficha { margin: 1.8rem 0 0; display: grid; gap: 0; }
.ficha__par {
  display: grid; grid-template-columns: 11rem 1fr; align-items: baseline;
  gap: 1rem; padding: .75rem 0; border-bottom: 1px solid rgba(122,90,46,.28);
}
.ficha__par dt {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-s);
}
.ficha__par dd { margin: 0; }
/* En claro el acento es --madera-h; --madera daría 1,8:1 y sería ilegible. */
.reserva .falta { color: var(--madera-h); border-bottom-color: var(--madera-h); }
@media (max-width: 520px) { .ficha__par { grid-template-columns: 1fr; gap: .2rem; } }

.reserva__caja {
  background: var(--blanco); border-radius: 12px;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  box-shadow: 0 20px 44px -30px rgba(42,42,36,.7);
}
.reserva__caja h3 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: .6rem; }
.reserva__caja > p { color: var(--tinta-s); font-size: .94rem; max-width: 44ch; }
.form { margin-top: 1.4rem; }
.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-s); margin-bottom: .4rem;
}
.campo input {
  width: 100%; min-height: 48px; padding: .75rem .85rem;
  background: var(--madera-cl); color: var(--tinta);
  border: 1px solid rgba(122,90,46,.4); border-radius: 8px;
  font-family: var(--cuerpo); font-size: 1rem;
}
.resumen {
  font-family: var(--mono); font-size: .84rem; line-height: 1.55;
  color: var(--tinta-s);
  border-left: 2px solid var(--madera-h);
  padding: .55rem 0 .55rem .9rem;
  margin: 1.3rem 0;
  white-space: pre-wrap; word-break: break-word;
}
.reserva .reserva__nota { font-size: .86rem; color: var(--tinta-s); margin: 1.2rem 0 0; max-width: 54ch; }

/* ══════════════ PARA LA DUEÑA ══════════════
   La sección más oscura de la página y la última antes del pie: es la
   que cierra la venta, y va sola en su tono para que se lea como una
   nota escrita aparte. */
.dueno {
  background: var(--pizarra-h); color: var(--tiza);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.1rem, 5vw, 3rem);
  border-top: 3px solid var(--madera);
}
.dueno__in { max-width: var(--ancho); margin: 0 auto; }
.dueno h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 2rem; }
.dueno__cols { display: grid; gap: 1.8rem; }
@media (min-width: 820px) { .dueno__cols { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }
.dueno__cols h3 {
  font-family: var(--mono); font-weight: 400; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--madera); margin-bottom: .6rem;
}
.dueno__cols p { font-size: .94rem; color: var(--tiza-s); margin: 0; }
.dueno__cierre { margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.flecha {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-weight: 600; font-size: .96rem;
  color: var(--madera); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: .12rem;
}
.flecha span { transition: transform .25s var(--sale); }
.flecha:hover, .flecha:focus-visible { color: var(--tiza); }
.flecha:hover span { transform: translateX(4px); }

.pie {
  background: var(--pizarra-h);
  padding: 2rem clamp(1.1rem, 5vw, 3rem);
  border-top: 1px solid #3E5246;
}
/* que el botón flotante no tape la última línea del pie */
.pie__in { max-width: 80ch; margin: 0 auto; padding-bottom: 4.5rem; }
.pie p { margin: 0; font-size: .82rem; color: var(--tiza-s); }

/* ══════════════════════════════════════════════════════════════════
   APARICIONES AL SCROLL
   Regla atómica: la opacidad salta corto (.3 s) y el transform dura
   largo (.6 s). Un fundido lento le pelea al movimiento.
   La clase .rev la pone main.js, nunca el HTML: con el JS caído no hay
   ninguna clase que esconda nada.
   ══════════════════════════════════════════════════════════════════ */
.js .rev { opacity: 0; transform: translateY(18px); }
.rev.ok  { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .6s var(--sale); }

/* Cascada de hijos: el CONTENEDOR se neutraliza y animan los hijos.
   Si no se neutraliza, contenedor e hijos bajan a la vez y el grupo
   entero se desplaza 44 px. El --i va por nth-child en el CSS: en un
   style="--i:3" la CSP lo bloquea sin avisar. */
.js .cascada.rev      { opacity: 1; transform: none; transition: none; }
.js .cascada.rev > *  { opacity: 0; transform: translateY(26px); }
.js .cascada.rev.ok > * {
  opacity: 1; transform: none;
  transition: opacity .3s ease-out, transform .6s var(--sale);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.cascada > :nth-child(1) { --i: 0; }
.cascada > :nth-child(2) { --i: 1; }
.cascada > :nth-child(3) { --i: 2; }
.cascada > :nth-child(4) { --i: 3; }
.cascada > :nth-child(5) { --i: 4; }
.cascada > :nth-child(6) { --i: 5; }
.cascada > :nth-child(7) { --i: 6; }
.cascada > :nth-child(8) { --i: 7; }

/* Entrada de la portada: no espera al scroll, ya está en pantalla.
   forwards, nunca both. Techo: la última pieza arranca antes de .4 s. */
.js .portada__texto > * { opacity: 0; transform: translateY(14px); }
.portada__texto.ok > *  { animation: entra .8s var(--muelle) forwards; }
.portada__texto.ok > *:nth-child(2) { animation-delay: .05s; }
.portada__texto.ok > *:nth-child(3) { animation-delay: .14s; }
.portada__texto.ok > *:nth-child(4) { animation-delay: .26s; }
.portada__texto.ok > *:nth-child(5) { animation-delay: .36s; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════════════════════
   LAS IMÁGENES DE RUBRO — ocho tratamientos
   ══════════════════════════════════════════════════════════════════
   La página no puede ser texto sobre fondo plano de arriba abajo. Van
   ocho apariciones distintas, para que el ojo no vea siempre lo mismo:
   portada disuelta con clip, aura de color, tajo a sangre, media
   pantalla, cita con clip, telón, tira de tres y la galería con las
   fotos propias del negocio, más el mosaico.

   LA REGLA: la foto no se ensucia para poder leer encima. Lo que
   sostiene el contraste es un gradiente por zona. La ÚNICA excepción
   permanente es el aura, donde el desenfoque no es un parche sino el
   efecto entero.

   Procedencia de cada archivo: imagenes/FUENTES.txt
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · PORTADA ── */
/* position/isolation acá y no heredadas: hay demos cuya .portada no es
   posicionada, y entonces el .portada__foto absoluto se cuelga del body
   y tapa el titular entero. El z-index del texto va por lo mismo. */
.portada--foto { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { position: relative; z-index: 2; max-width: 40rem; }
.portada__foto { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
/* El video comparte el selector de la foto: misma máscara, mismo
   object-fit y mismo object-position, escritos UNA sola vez. Con
   reglas separadas el clip y la foto se descuadran en cuanto se ajusta
   una de las dos. */
.portada__foto img, .portada__video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 52% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
}
/* El velo se escribe ENTERO en rgba y termina en alfa 0. Con var() en
   los primeros stops habia demos donde el gradiente tapaba la foto de
   punta a punta —paso tres veces— y costaba una captura cada vez
   entenderlo. En rgba puro el degradado es el mismo y no falla.
   PEOR CASO MEDIDO: bajo el 26 % de la izquierda el velo es opaco al
   100 %, así que la tiza (#F2F0E9) sobre el verde de la portada
   (#2F4038) da 9,5:1 PASE LO QUE PASE con la foto o el clip que se
   pongan debajo, incluso un fotograma blanco. */
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(47,64,56,1) 0%, rgba(47,64,56,1) 26%,
              rgba(47,64,56,.70) 42%, rgba(47,64,56,.28) 62%, rgba(47,64,56,.08) 80%,
              rgba(47,64,56,0) 94%);
}
@media (max-width: 860px) {
  .portada--foto { padding-top: 34svh; }
  .portada__foto img, .portada__video {
    object-position: 50% 44%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg, rgba(47,64,56,0) 0%, rgba(47,64,56,.30) 42%, rgba(47,64,56,1) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#hoy { position: relative; isolation: isolate; overflow: hidden; }
.aura { position: absolute; z-index: -1; inset: -12% -8% auto -8%; height: 78%; pointer-events: none; }
.aura img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Acá el desenfoque ES el efecto: la foto deja de leerse y queda la luz. */
  filter: blur(64px) saturate(1.45);
  opacity: .38;
  transform: scale(1.25);
  /* Y se apaga EN LA IMAGEN, no con un velo encima. Un ::after que pinta
     el fondo apaga solo DENTRO del div: en el borde de abajo queda un
     corte recto a media seccion. Con la mascara la imagen misma se
     desvanece y no hay borde que cortar. */
  -webkit-mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
          mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
}

/* ── 3 · TAJO: LA FRANJA A SANGRE ──
   Una franja de foto entre dos secciones, con la frase abajo. El velo
   ARRANCA EN ALFA 0 arriba: los dos tercios de la foto quedan nítidos
   y sólo se cierra donde va el texto. */
/* La clase es .tajo y no .banda ni .franja: hay demos que ya usan esos
   dos nombres para secciones propias, y chocaban. */
.tajo {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--pizarra-h);
}
.tajo img {
  display: block; width: 100%;
  height: clamp(220px, 32vw, 380px);
  object-fit: cover; object-position: 50% 58%;
}
/* MEDIDO EL 09-09-2026 SOBRE LA PÁGINA VIVA: con el reparto anterior
   (0 → .72 en el 52 % → .94) el velo bajo la primera línea sólo llegaba
   a alfa .436, y ahí la foto tiene un puerro blanco: el fondo real
   quedaba en #A0A597 y el blanco del texto daba 2,52:1 — por debajo
   incluso del 3:1 que pide el texto grande, en escritorio y en móvil.
   La rampa se adelanta: alfa .40 en el 18 % y .86 en el 36 %, que es
   donde empieza la primera línea. PEOR CASO (fotograma blanco puro
   debajo): 5,3:1 con el blanco de la letra. Los primeros dos tercios
   de la foto siguen a foco completo — el velo no pasa de .12 hasta el
   8 % de la caja, que en la franja es más de la mitad de la altura. */
.tajo__txt {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.1rem, 5vw, 3rem) 1.6rem;
  background: linear-gradient(180deg, rgba(37,50,41,0) 0%,
              rgba(37,50,41,.12) 8%, rgba(37,50,41,.40) 18%,
              rgba(37,50,41,.86) 36%, rgba(37,50,41,.95) 100%);
}
.tajo__txt p {
  max-width: var(--ancho); margin: 0 auto;
  color: #FFFFFF; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 3.4vw, 2.1rem); line-height: 1.18;
  max-width: min(var(--ancho), 26ch);
}

/* ── 4 · MEDIA PANTALLA ── */
.mitades {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--pizarra-h);
  /* overflow hidden porque las entradas son laterales: mientras el texto
     se desliza y la foto entra a escala, ambos se salen unos píxeles y
     aparece scroll horizontal por un segundo. */
  overflow: hidden;
}
.mitades__foto { position: relative; min-height: min(62svh, 560px); overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mitades__texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--tiza);
}
.mitades__ante {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--madera); margin: 0 0 .9rem;
}
.mitades h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08;
  margin: 0 0 1rem; color: var(--tiza);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--tiza-s); max-width: 34rem;
}
.js .mitades__texto.rev { opacity: 0; transform: translateX(1.6rem); }
.js .mitades__foto.rev  { opacity: 0; transform: scale(1.04); }
.js .mitades__texto.rev.ok,
.js .mitades__foto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s var(--sale);
}
@media (max-width: 780px) {
  .mitades { grid-template-columns: 1fr; }
  .mitades__foto { min-height: min(44svh, 420px); }
}

/* ── 5 · LA CITA A SANGRE ── */
.cita {
  position: relative; isolation: isolate; min-height: min(70svh, 620px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--pizarra); overflow: hidden;
}
.cita__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cita__foto img, .cita__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
/* Velo parejo y fuerte: el texto va CENTRADO y grande, encima de la
   foto entera. Con un gradiente lateral la mitad derecha del texto
   caería sobre alfa .25 y fallaría AA; con texto centrado el velo
   plano es la única opción correcta (§4.1 del estándar). Peor caso:
   fotograma blanco bajo un velo de .82 sobre #2F4038 → la tiza sigue
   dando 6,4:1. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(47,64,56,.72) 0%,
              rgba(47,64,56,.84) 45%, rgba(47,64,56,.90) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--tiza); }
.cita__texto p {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.16;
  margin: 0; color: var(--tiza);
}
/* El eco va en la madera SUBIDA DE LUZ, no en el acento: medido sobre
   la página viva el --madera daba 4,22:1 contra la pizarra veleada del
   clip, y el texto chico pide 4,5:1. Con --madera-luz son 6,3:1. */
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--madera-luz);
}
.js .cita__texto.rev { opacity: 0; transform: translateY(16px); }
.js .cita__texto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity 1s ease, transform 1s var(--sale);
}

/* ── 6 · TELON: la foto detras de una seccion entera ──
   No es el aura. El aura va reventada a 64 px y se lee como mancha de
   color; el telon va NITIDO y bajo de opacidad, y se lee como foto.
   El texto encima se sostiene porque la foto esta al .15, no porque
   este sucia — que es la regla de siempre. Va con mask-image y no con
   un ::after: la seccion se funde con las vecinas y un ::after dejaria
   un corte recto a media pagina. */
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* OPACIDAD .12 Y NO .15 — MEDIDO SOBRE LA PAGINA VIVA el 10-09-2026.
   Al .15 el caldo claro de la olla dejaba el fondo bajo los parrafos en
   rgb(70,84,77) y el gris secundario (#B8C4B8, 17,3 px) daba 4,41:1:
   por debajo del 4,5:1 que pide el texto normal. Al .12 el mismo punto
   queda en rgb(65,80,73) y da 4,7:1. Sigue dentro del rango 0,12-0,30
   del estandar y el telon se ve igual de nitido: lo que baja es la luz,
   no el foco. */
.telon img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%;
  opacity: .12;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}

/* ── 7 · LA TIRA ── */
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--pizarra-h); }
.tira__pieza { margin: 0; overflow: hidden; height: min(34svh, 320px); min-height: 220px; }
.tira__pieza img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--sale);
}
@media (hover: hover) and (pointer: fine) {
  .tira__pieza:hover img { transform: scale(1.05); }
}
@media (max-width: 700px) {
  .tira { grid-template-columns: 1fr 1fr; }
  .tira__pieza:last-child { grid-column: 1 / -1; height: min(28svh, 260px); }
}

/* ══════ 8 · LAS FOTOS ══════
   Grilla dura, igual que el resto de la pagina: dos arriba y una ancha
   abajo. Cada figura llega desde un lado distinto — izquierda, derecha,
   abajo — con un retardo escalonado, para que se lean como tres cosas
   puestas sobre la mesa y no como un bloque que se enciende. */
/* overflow hidden por lo mismo que .mitades: las tres figuras entran
   desde los costados (translateX de 2,4rem) y esta sección no tenía
   nada que las recortara. A 500 px de ancho eso sacaba la figura de la
   derecha 13 px fuera del cuerpo y aparecía barra de scroll horizontal
   —comprobada en la captura— hasta que el observador la destapaba. */
.galeria {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 78rem; margin: 0 auto;
  overflow: hidden;
}
.galeria__titulo {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.05;
  margin: 0 0 .6rem; color: var(--tiza);
}
.galeria__nota {
  max-width: 62ch; margin: 0 0 2.2rem;
  color: var(--tiza-s); font-size: .96rem; line-height: 1.6;
}
.galeria__grilla { display: grid; gap: clamp(.9rem, 2vw, 1.6rem); grid-template-columns: 1fr 1fr; }
.gal { margin: 0; background: var(--pizarra-h); border: 1px solid var(--pizarra-h); padding: .6rem; }
.gal--abajo { grid-column: 1 / -1; }
/* height:auto Y NO height:100%. La figura es celda de grilla y se estira a
   la altura de la fila; con height:100% la IMAGEN se comia tambien el alto
   reservado al figcaption y el pie se salia de la caja: el de la izquierda
   quedaba cortado por la mitad debajo de la figura ancha —medido en la
   captura del 10-09-2026.
   Y el `auto` hay que ESCRIBIRLO: los atributos width/height del <img> son
   pistas de presentacion, asi que al borrar la declaracion de height el
   height="1300" del HTML volvia a mandar, tapaba el aspect-ratio y las
   fotos salian de 1300 px de alto. Comprobado en el mismo volcado. */
.gal img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 3px solid var(--madera);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--mono); font-size: .74rem; line-height: 1.5;
  color: var(--tiza-s); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--mono); font-size: .74rem; color: var(--tiza-s);
  margin: 1.4rem 0 0; padding-left: 1.1rem; position: relative;
}
.galeria__falta::before { content: '·'; position: absolute; left: .3rem; }

.js .gal.rev { opacity: 0; }
.js .gal--izq.rev   { transform: translateX(-2.4rem); }
.js .gal--der.rev   { transform: translateX(2.4rem); }
.js .gal--abajo.rev { transform: translateY(2.4rem) scale(.98); }
.js .gal.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform 1s var(--sale);
}
.js .gal--der.rev.ok   { transition-delay: .12s; }
.js .gal--abajo.rev.ok { transition-delay: .22s; }

@media (max-width: 700px) {
  .galeria__grilla { grid-template-columns: 1fr; }
  .gal--abajo img { aspect-ratio: 3 / 2; }
}

/* ══════ 9 · MOSAICO ══════
   Seis piezas en grilla. Es la unica parte de la pagina donde una
   imagen puede repetirse con otro recorte: a este tamano no se lee
   como repeticion sino como serie. Las celdas 1 y 6 van a span 2:
   rompe la reticula de seis iguales y es gratis. */
/* El mosaico trae su propio fondo: sus colores salen del bloque de
   .mitades y hay demos donde ese fondo es el contrario al del body —
   el titulo quedaba a 1,00:1, invisible. Con fondo propio el contraste
   esta garantizado siempre, y va a sangre con el contenido centrado. */
.mos {
  background: var(--pizarra-h);
  padding: clamp(2.6rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.mos__titulo {
  max-width: 82rem; margin-left: auto; margin-right: auto;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.08;
  margin: 0 0 .5rem; color: var(--tiza);
}
/* Mismo arreglo que en .carta .firma: el riel del mosaico son 82rem
   centradas y la nota se centraba dentro de ellas, arrancando 357 px a la
   derecha del titulo. El margin-left calculado la devuelve al riel. */
.mos__nota {
  max-width: min(82rem, 62ch); margin: 0 auto 1.8rem;
  margin-left: max(0px, calc(50% - 41rem));
  color: var(--tiza-s); font-size: .94rem; line-height: 1.6;
}
/* CUATRO columnas, no tres. Con tres, las celdas 1 y 6 a span 2 suman
   ocho unidades y ocho no cabe en filas de tres: la sexta se iba a una
   tercera fila y dejaba un HUECO VERDE del tamano de una foto abajo a la
   derecha —se ve en la captura completa del 10-09-2026. Con cuatro
   columnas las mismas ocho unidades cierran dos filas exactas y el
   mosaico queda macizo. */
.mos__grilla {
  display: grid; gap: 4px;
  grid-template-columns: repeat(4, 1fr);
  max-width: 82rem; margin: 0 auto;
}
.mos__p { margin: 0; overflow: hidden; height: clamp(140px, 20svh, 220px); background: var(--pizarra-h); }
.mos__p img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9);
  transition: transform 1.1s var(--sale), filter .6s ease;
}
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) {
  .mos__p:hover img { transform: scale(1.05); filter: saturate(1); }
}
/* A dos columnas bajo 900 px: con cuatro, las celdas sueltas bajaban de
   190 px de ancho y las fotos de plato dejaban de leerse. A dos, las
   celdas 1 y 6 ocupan la fila entera y tampoco queda hueco. */
@media (max-width: 900px) {
  .mos__grilla { grid-template-columns: 1fr 1fr; }
  .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════
   VIDEO DE FONDO
   La foto sigue siendo la base y el video se funde encima cuando puede
   reproducirse. Si el visitante pidió menos movimiento o ahorra datos,
   main.js no lo pide y no se descarga ni un byte.
   Presupuesto: portada 1,62 MB (9 s), banda 0,97 MB (6,7 s), 720p a
   1,4 y 1,15 Mbps, sin pista de audio.
   opacity 0 de arranque + fundido de 1,4 s es lo que hace que el clip
   «cobre vida» en vez de aparecer de golpe; pointer-events none evita
   que el <video> se coma los clics.
   ══════════════════════════════════════════════════════════════════ */
.portada__video, .cita__video {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.4s ease; pointer-events: none;
}
.portada__video.video--ver, .cita__video.video--ver { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   EL DIFUMINADO AL SCROLL — la única excepción TEMPORAL al no-blur
   Doce líneas que corren en el compositor y que no existen donde el
   navegador no las soporta. Sobre fondo oscuro el blur va alto y lo
   que hunde la foto en la noche es el brillo, no la opacidad: bajarla
   sobre negro no hace nada visible. El scale(1.06) acompaña siempre,
   si no el desenfoque muestra el filo transparente de la caja. El
   filter va en el CONTENEDOR, nunca en el <video>.
   ══════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
    .portada__foto {
      animation: portada-se-va linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }
    .cita__foto {
      animation: cita-enfoca linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 95%;
    }
  }
}
@keyframes portada-se-va { to { filter: blur(13px) brightness(.8); transform: scale(1.06); } }
@keyframes cita-enfoca   { from { filter: blur(9px); } to { filter: blur(0); } }

/* ── WHATSAPP FLOTANTE ──────────────────────────────────────────────
   Botón fijo abajo a la derecha. 56 px de alto: por encima de los 44
   del mínimo táctil. Verde de WhatsApp a propósito — se reconoce sin
   leerlo, y eso es lo que hace que se toque.

   La dirección del truco importa: el botón se ve SIEMPRE por defecto y
   el JS sólo lo esconde mientras el visitante está en la portada, para
   no tapar el titular. Si el script no arranca, o si rescate.js quita
   la clase .js, el botón queda visible, que es el estado que vende.
   Al revés (oculto por defecto, revelado por JS) un fallo del script
   se lleva el CTA principal. */
.wapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 56px;
  padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  background: #25D366;
  color: #07310F;
  text-decoration: none;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.wapp__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wapp:hover,
.wapp:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .34); }
/* mientras se está arriba del todo, el botón se aparta */
.js .wapp--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }

@media (max-width: 520px) {
  .wapp { width: 56px; padding: 0; justify-content: center; }
  /* el rótulo se va, el icono queda: en un teléfono el círculo verde ya dice qué es */
  .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════
   MENOS MOVIMIENTO
   Se apaga lo intrusivo (bucles, desplazamientos, conteos, autoplay
   del video, que lo corta el JS). Se conservan los fundidos de
   opacidad y los hovers de color: un fundido no es movimiento, y en
   Windows esta preferencia viene puesta de fábrica muy seguido — si se
   apaga todo, la página se ve muerta en media máquina del cliente.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* 1 · la escena queda quieta, escrita y VISIBLE (arriba, en su bloque) */

  /* 2 · la entrada de portada no se escalona: se muestra puesta */
  .js .portada__texto > * { animation: none; opacity: 1; transform: none; }

  /* 3 · los reveals NO se desplazan, pero SÍ siguen fundiendo */
  .js .rev, .js .cascada.rev > * { transform: none; }
  .js .mitades__texto.rev, .js .mitades__foto.rev,
  .js .gal.rev, .js .cita__texto.rev { transform: none; }

  /* 4 · del hover se apaga el desplazamiento, no el hover */
  .boton:hover, .wapp:hover, .wapp:focus-visible { transform: none; }
  .mos__p:hover img, .tira__pieza:hover img { transform: none; }
  .flecha:hover span { transform: none; }
  .js .wapp--arriba { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MÓVIL — lo que cambia de verdad
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .portada__botones .boton, .portada__botones .fantasma { width: 100%; }
  .dueno__cierre { flex-direction: column; gap: .6rem; }
}

/* ── MAPA DE UBICACION ──────────────────────────────────────────────
   Imagen propia con mosaicos de OpenStreetMap pegados: la CSP prohibe
   pedir nada a un tercero, asi que un iframe de Google Maps quedaria en
   blanco SIN dar un solo error. El "Como llegar" si es un enlace, y un
   enlace no lo bloquea nada.
   Los colores salen de currentColor a proposito: asi el bloque se adapta
   a la paleta de cada demo sin conocerla y sin chocar con ella.
   La atribucion a OpenStreetMap la exige su licencia (ODbL). */
.mapa-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.mapa { margin: 1.4rem 0 0; border: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); border-radius: 10px; overflow: hidden; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa { border-color: rgba(128, 128, 128, .35); } }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .75rem .9rem;
  font-size: .86em; line-height: 1.45;
  border-top: 1px solid; border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa__pie { border-top-color: rgba(128, 128, 128, .35); } }
.mapa__pie b { font-weight: 700; }
.mapa__ir { color: inherit; font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__cred { width: 100%; font-size: .84em; opacity: .8; }
.mapa__cred a { color: inherit; }