/* ==========================================================================
   El Rancho Interiorano — secciones
   ========================================================================== */

/* flow.js (Lenis + GSAP): el scroll-behavior:smooth de base.css pelea con la
   inercia de Lenis y hace que los enlaces de ancla salten dos veces. */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.flujo .hero { overflow: hidden; }
.flujo .hero__fondo { transform-origin: 50% 0; will-change: transform; }

/* ═══════════════════════════════ INTRO ═══════════════════════════════════ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--ox);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.intro[hidden] { display: none; }

.intro__svg,
.intro__chispas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.intro__svg { pointer-events: none; }
.intro__chispas { pointer-events: none; }

.intro__trazo {
  stroke: var(--naranja);
  stroke-width: 5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  filter: url(#glowBrasa);
}

.intro__abanico line {
  stroke: var(--dorado);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0;
}

.intro__saltar {
  position: absolute;
  right: clamp(1rem, 4vw, 2.5rem);
  bottom: clamp(1rem, 4vw, 2.5rem);
  padding: .65rem 1.1rem;
  border: 1px solid rgba(243, 230, 214, .35);
  border-radius: 999px;
  color: var(--crema);
  font-size: .9rem;
  letter-spacing: .06em;
  background: rgba(18, 13, 11, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-medio) var(--ease);
}
.intro__saltar.visible { opacity: 1; pointer-events: auto; }
.intro__saltar:hover { border-color: var(--brasa); color: var(--brasa); }

body.intro-activa { overflow: hidden; }

/* ═══════════════════════════ MARCO ESCALONADO ════════════════════════════
   Device grafico de marca: greca de escalones rectos, misma logica de
   reticula que los bordados de pollera y la greca del arte del estudio. */
.marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.marco path {
  fill: none;
  stroke: var(--naranja);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.marco-foto { position: relative; }
.marco-foto .marco { inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }
.marco-foto .marco path { stroke: var(--mostaza); }

/* fragmento de la misma greca, como ornamento sobre los H2 */
.ornamento { display: block; width: 82px; margin-bottom: .75rem; }
.ornamento svg { width: 82px; height: 15px; }
.ornamento path { fill: none; stroke: var(--naranja); stroke-width: 3; }

/* ═════════════════════════ ICONOS BORDADOS ═══════════════════════════════
   Circulos con motivo de bordado de pollera, trazados sobre reticula como en
   los highlights reales de la cuenta. Se inyecta el SVG desde js/marco.js. */
.bordado {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--terracota-osc);
  flex: none;
  overflow: hidden;
}
.bordado svg { width: 66%; height: 66%; }
.bordado svg path { fill: var(--hueso); }
.bordado--chip { width: 26px; height: 26px; background: rgba(243, 230, 214, .14); }
.bordado--chip svg path { fill: var(--dorado); }

/* ═══════════════════════════════ NAV ═════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: linear-gradient(180deg, rgba(18, 13, 11, .92), rgba(18, 13, 11, .55) 70%, transparent);
  transition: background-color var(--t-medio) var(--ease);
}
.nav.compacta { background: rgba(18, 13, 11, .96); box-shadow: 0 1px 0 rgba(209, 157, 102, .22); }

.nav__caja {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: .6rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav__logo { flex: none; line-height: 0; }
/* REVISIÓN 5: el emblema nuevo es más ancho que alto que el script viejo (1.91:1
   contra 1.61:1), así que va un poco más ancho para conservar la misma altura de
   barra. El doble drop-shadow no es decoración: el trazo de "Interiorano" es
   marrón oscuro y sobre el fondo óxido del nav se pierde — el halo crema tenue
   lo despega del fondo sin teñir el logo (nada de filtros de color encima). */
.nav__logo img {
  width: clamp(128px, 18vw, 182px);
  height: auto;
  filter: drop-shadow(0 0 9px rgba(244, 233, 213, .34))
          drop-shadow(0 2px 5px rgba(18, 13, 11, .85));
}

.nav__hamburguesa {
  margin-left: auto;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background var(--t-rapido) var(--ease);
}
/* REVISIÓN 6: el dueño reportó que la "X" de cerrar el menú móvil "se pierde"
   junto al logo grande — un fondo circular oscuro + la X en naranja (en vez
   de crema, que se confundía con los tonos claros del logo de al lado) le
   dan un tap-target visible de verdad. */
.nav__hamburguesa[aria-expanded="true"] { background: rgba(0, 0, 0, .4); }
.nav__barras { position: relative; }   /* las barras se posicionan contra esta */
.nav__barras,
.nav__barras::before,
.nav__barras::after {
  display: block;
  width: 26px; height: 2.5px;
  background: var(--crema);
  transition: transform var(--t-rapido) var(--ease), opacity var(--t-rapido), background var(--t-rapido);
}
.nav__barras::before, .nav__barras::after { content: ""; position: absolute; }
.nav__barras::before { transform: translateY(-8px); }
.nav__barras::after { transform: translateY(8px); }
.nav__hamburguesa[aria-expanded="true"] .nav__barras { background: transparent; }
.nav__hamburguesa[aria-expanded="true"] .nav__barras::before { transform: rotate(45deg); background: var(--brasa); }
.nav__hamburguesa[aria-expanded="true"] .nav__barras::after { transform: rotate(-45deg); background: var(--brasa); }

/* 31-ago-2026: el menú móvil se abría como una columna metida DENTRO de la fila
   del nav, así que los enlaces quedaban pegados a la derecha y el logo con la X
   flotando al lado — se veía desordenado al lado del de Aguadulce. Ahora es un
   panel propio que baja desde la barra, igual de ordenado que el de la otra
   sede, pero con la tipografía de ESTE sitio (Barlow, no Barlow Condensed —
   Capira nunca cargó la condensada). */
.nav__menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(18, 13, 11, .98);
  border-top: 1px solid rgba(209, 157, 102, .18);
  padding: 1rem var(--gutter) 1.4rem;
  flex-direction: column;
  gap: 1rem;
}
.nav__menu.abierto { display: flex; }

.nav__enlaces { display: flex; flex-direction: column; gap: .25rem; }
.nav__enlaces a {
  color: var(--crema);
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .75rem .25rem;
  border-bottom: 1px solid rgba(209, 157, 102, .18);
}
.nav__enlaces a:hover { color: var(--brasa); }

/* teléfono + WhatsApp juntos: los dos botones de contacto viven en la misma
   fila, en el nav y dentro del menú móvil */
.nav__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .7rem;
  align-self: flex-start;
}
.nav__contacto a { border-bottom: 0 !important; }

@media (min-width: 900px) {
  .nav__hamburguesa { display: none; }
  .nav__menu {
    display: flex !important;
    position: static; background: none; border-top: 0;
    flex-direction: row;
    align-items: center;
    gap: 1.15rem;
    width: auto;
    margin-left: auto;
    padding: 0;
  }
  .nav__enlaces { flex-direction: row; gap: 1.15rem; }
  .nav__enlaces a {
    border-bottom: 0; padding: .35rem 0; font-size: .9rem;
    text-transform: none; letter-spacing: normal; font-weight: 500;
  }
  .nav__contacto { margin-top: 0; gap: .45rem; }
  .nav__tel, .nav__wa { min-height: 44px; padding: .5rem 1.05rem; }
  /* en escritorio el botón de WhatsApp del nav queda solo con el ícono: con
     los 6 enlaces + el selector de idioma + el teléfono, la palabra completa
     empujaba la barra fuera del contenedor de 1200px. El nombre sigue
     disponible para lectores de pantalla por el aria-label. */
  .nav__wa span { display: none; }
  .nav__wa { padding: .5rem .8rem; }
}

/* ═══════════════════════ SELECTOR DE IDIOMA (ES / EN) ════════════════════ */
.idioma {
  display: flex;
  gap: .35rem;
  margin-top: .85rem;
  align-self: flex-start;
}
@media (min-width: 900px) { .idioma { margin-top: 0; } }

/* Variante que vive en la barra del nav, siempre a la vista — no dentro del
   menú de tres rayas (31-ago-2026). Se empuja a la derecha y queda pegada al
   botón de menú, para que el ES/EN sea lo último antes de las tres rayas. */
.idioma--barra {
  margin-top: 0;
  margin-left: auto;
  align-self: center;
  flex: none;
}
.idioma--barra .idioma__btn { min-width: 42px; min-height: 40px; font-size: .8rem; }
.idioma--barra + .nav__hamburguesa { margin-left: .2rem; }
/* En escritorio el ES/EN pasa al final de la barra, después de los enlaces.
   Este bloque tiene que ir DESPUÉS de la regla de arriba: si se declara en el
   media query general del nav (que en este archivo va antes), el
   `margin-left:auto` de `.idioma--barra` lo pisa por orden de cascada. */
@media (min-width: 900px) {
  .idioma--barra { order: 3; margin-left: .4rem; }
}

.idioma__btn {
  min-width: 46px;
  min-height: 44px;
  padding: .35rem .6rem;
  border: 1px solid rgba(209, 157, 102, .4);
  border-radius: 999px;
  color: var(--crema-mute);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  transition: color var(--t-rapido) var(--ease),
              border-color var(--t-rapido) var(--ease),
              background-color var(--t-rapido) var(--ease);
}
.idioma__btn:hover { color: var(--crema); border-color: var(--brasa); }
.idioma__btn--activo,
.idioma__btn--activo:hover {
  background: var(--brasa);
  border-color: var(--brasa);
  color: var(--ox);            /* 6.8:1 */
}

/* ═══════════════════════════════ WHATSAPP ════════════════════════════════
   El +507 6384-9270 es el WhatsApp real del negocio (confirmado por el dueño).
   Va SUMADO al botón de llamar de cada bloque, nunca en su lugar.

   Color: el verde de marca de WhatsApp (#25D366) se usa como borde y como
   tinta, no como relleno de los botones en línea — sobre el óxido da 9.7:1 de
   contraste (AA de sobra) y no compite con el naranja brasa de los botones
   primarios, que sigue siendo la acción principal del sitio. */
.ico-wa {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.boton--wa {
  border: 2px solid #25D366;
  color: #25D366;
  background: rgba(28, 22, 19, .35);
}
.boton--wa:hover {
  background: #25D366;
  color: var(--ox);            /* 9.7:1 */
}

/* enlace de WhatsApp de la línea de datos del hero */
.hero__wa {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.hero__wa .ico-wa { color: #25D366; }
.hero__wa:hover .ico-wa { color: var(--brasa); }

/* ═══════════════════════════════ INSTAGRAM ═══════════════════════════════
   REVISIÓN 3 (30-ago-2026): botón directo al perfil, con glifo (el dueño no
   quería solo el link de texto del pie).

   Color: mismo criterio que WhatsApp — la tinta rosada #F06292 de la familia
   de marca de Instagram da 5.8:1 sobre el óxido (AA), mientras que el rosa
   fuerte #E1306C se queda solo en el borde, donde el mínimo es 3:1 (da 4.0).
   No se usa el degradado de marca como relleno: el naranja brasa sigue siendo
   el único color de acción principal del sitio. */
.ico-ig {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* REVISIÓN 4 (30-ago-2026), punto 9 del brief: el botón estaba en magenta/rosa
   (#E1306C de borde, #F06292 de tinta) y era el ÚNICO elemento de todo el sitio
   fuera de la paleta óxido/naranja/dorado — se veía como un cuerpo extraño.
   Ahora es un .boton--borde más: borde y tinta doradas (7.4:1 sobre óxido). El
   rosa de Instagram sobrevive SOLO dentro del glifo, que es donde tiene sentido
   como marca ajena; como grafismo no textual le basta con 3:1 y da 4.0:1. */
.boton--ig {
  border: 2px solid var(--dorado);
  color: var(--dorado);
  background: rgba(28, 22, 19, .35);
}
.boton--ig:hover { border-color: var(--hueso); color: var(--hueso); }
.boton--ig .ico-ig { color: #E1306C; }
.boton--ig:hover .ico-ig { color: #F06292; }

/* --------------------------------------------------- botón flotante fijo ---
   Esquina inferior DERECHA. La izquierda es del indicador de progreso (la
   pollera que gira): uno en cada esquina para que no se pisen nunca. */
.wa-flotante {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 200;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px -6px rgba(11, 8, 7, .75);
  transition: transform var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease);
}
.wa-flotante:hover {
  transform: scale(1.07);
  color: #fff;
  box-shadow: 0 12px 30px -6px rgba(11, 8, 7, .85);
}
.wa-flotante svg { width: 30px; height: 30px; }

@media (max-width: 700px) {
  .wa-flotante { width: 50px; height: 50px; right: 14px; bottom: 16px; }
  .wa-flotante svg { width: 26px; height: 26px; }
}

/* ══════════ INDICADOR DE SCROLL: EL ANILLO Y LA POLLERA QUE GIRA ══════════
   Pedido del dueño ("una línea que se va llenando, como un bailador y una
   pollera que dan vuelta"). Dos capas: el aro de progreso 0-100 % y, dentro,
   una pollera vista desde arriba —12 paños con el ruedo bordado— que da
   1.5 vueltas de arriba abajo de la página. Lo dibuja js/pollera.js.
   Con prefers-reduced-motion el aro sigue marcando el progreso pero la
   pollera se queda quieta (ver el guard en el JS). */
.pollera {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 200;
  width: 62px; height: 62px;
  padding: 0;
  border: 1px solid rgba(209, 157, 102, .3);
  border-radius: 50%;
  background: rgba(18, 13, 11, .82);
  box-shadow: 0 8px 22px -8px rgba(11, 8, 7, .8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.9);
  transition: opacity var(--t-medio) var(--ease),
              transform var(--t-medio) var(--ease),
              border-color var(--t-rapido) var(--ease),
              visibility var(--t-medio);
}
.pollera--visible { opacity: 1; visibility: visible; transform: none; }
.pollera:hover { border-color: var(--brasa); }
.pollera svg { width: 100%; height: 100%; }

.pollera__pista { fill: none; stroke: rgba(209, 157, 102, .3); stroke-width: 4; }
.pollera__aro   { fill: none; stroke: var(--brasa); stroke-width: 4; stroke-linecap: round; }

.pollera__pano--a { fill: var(--dorado); }
.pollera__pano--b { fill: var(--ladrillo); }
.pollera__ruedo   { fill: var(--hueso); opacity: .8; }
.pollera__cintura { fill: var(--ox); stroke: var(--dorado); stroke-width: 1.6; }
.pollera__motivo path { fill: var(--dorado); }

/* mientras corre la intro no tiene nada que indicar */
body.intro-activa .pollera { opacity: 0 !important; visibility: hidden !important; }

@media (max-width: 700px) {
  .pollera { width: 52px; height: 52px; left: 14px; bottom: 16px; }
}

/* ═══════════════════════════════ HERO ════════════════════════════════════ */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  margin-top: -5.5rem;
  padding: 8rem var(--gutter) 5.5rem;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.hero__fondo { position: absolute; inset: 0; z-index: -2; }
.hero__img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__video { opacity: 0; transition: opacity var(--t-lento) var(--ease); }
.hero__video.lista { opacity: 1; }

/* REVISIÓN 4 (30-ago-2026), punto 1 del brief: "destapar el hero". El velo iba
   de 82 % a 93 % de opacidad y tapaba el rancho real que hay detrás del logo.
   Ahora el degradado sigue siendo fuerte SOLO donde hay texto —arriba, bajo el
   nav; abajo, en la línea de horario y teléfono— y en el centro baja a ~20 %,
   que es donde se ve el vuelo del dron sobre el rancho.
   El contraste no se pierde: lo que antes hacía el velo entero ahora lo hace un
   halo local detrás del bloque del hero (.hero__cuerpo::before, más abajo), que
   oscurece 300 px alrededor del texto en vez de la foto completa. */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(18, 13, 11, .86) 0%,
      rgba(18, 13, 11, .42) 22%,
      rgba(18, 13, 11, .20) 45%,
      rgba(18, 13, 11, .34) 68%,
      rgba(18, 13, 11, .88) 100%),
    radial-gradient(ellipse at 50% 52%, rgba(18, 13, 11, 0) 42%, rgba(18, 13, 11, .45) 100%);
}

.hero__cuerpo {
  position: relative;
  z-index: 1;
  text-align: center;
  /* con place-items:center el hijo se dimensiona a fit-content y en movil se
     salia del viewport: hay que fijarle el ancho */
  width: 100%;
  max-width: 780px;
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.1rem, 5vw, 3.2rem);
  overflow-wrap: break-word;
}
/* Halo local del bloque de texto del hero: reemplaza al velo pesado que se quitó
   arriba. Se desborda 8 % por fuera del bloque para que el borde no se note. */
.hero__cuerpo::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(18, 13, 11, .74) 0%,
    rgba(18, 13, 11, .58) 45%,
    rgba(18, 13, 11, .22) 72%,
    rgba(18, 13, 11, 0) 100%);
}
.marco--hero { inset: 0; }
.marco--hero path { stroke: var(--naranja); stroke-width: 2.5; opacity: .95; }

.hero__h1 { margin: 0 0 1.1rem; }
.hero__h1 img {
  width: clamp(250px, 62vw, 470px);
  margin-inline: auto;
  filter: drop-shadow(0 6px 22px rgba(18, 13, 11, .7));
}

.hero__tagline {
  color: var(--crema);
  font-size: clamp(1.25rem, 4.2vw, 2.05rem);
  margin: 0 0 1.6rem;
  text-shadow: 0 3px 16px rgba(18, 13, 11, .8);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-bottom: 1.5rem;
}

.hero__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem 1.1rem;
  margin: 0;
  font-size: .98rem;
}
.hero__datos a { color: var(--crema); text-decoration: none; font-weight: 600; }
.hero__datos a:hover { color: var(--brasa); }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  width: 56px; height: 40px;
  display: grid;
  place-items: center;
  z-index: 1;
}
.hero__scroll svg { width: 40px; height: 24px; }
.hero__scroll path { stroke: var(--dorado); stroke-width: 2.5; }
.hero__scroll:hover path { stroke: var(--brasa); }
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll { animation: flotar 2.4s var(--ease) infinite; }
}
@keyframes flotar {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

/* ══════════════ TITULARES PALABRA POR PALABRA (REVISIÓN 4) ═══════════════
   Punto 2 del brief. SOLO 4 frases del sitio entran así: "Aquí se cocina a la
   vista", "Las paredes cuentan de dónde venimos", "Párese en el medio del
   rancho" y la tagline del cierre. El resto conserva el fade de .revelar.

   js/site.js parte el texto en <span class="pal"> y le pone --i (el índice de
   la palabra) para escalonar el retraso. Con prefers-reduced-motion no llega a
   partirlo siquiera: el titular se queda tal cual venía en el HTML. */
.palabras .pal {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em) rotate(-2.2deg);
  transition: opacity var(--t-medio) var(--ease),
              transform var(--t-lento) var(--ease);
  transition-delay: calc(var(--i, 0) * 68ms);
}
.palabras.palabras--visible .pal { opacity: 1; transform: none; }

/* ══════════════════════════════ SECCIONES ════════════════════════════════ */
.seccion { padding-block: var(--seccion-y); position: relative; }
.seccion--alt { background: var(--ox-2); }

.seccion__cabeza { max-width: 720px; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.seccion__intro { color: var(--crema-mute); margin: 0; }

/* ════════════ COSTURAS ENTRE SECCIONES (REVISIÓN 4, punto 6) ══════════════
   El mismo fragmento de greca escalonada que ya va sobre cada H2, estirado de
   borde a borde como puntada entre dos secciones. Se usa poco a propósito (dos
   costuras: entrada al menú y salida de la galería), para que siga leyéndose
   como un remate y no como una textura de fondo. Lo dibuja js/marco.js. */
.costura {
  display: block;
  height: 14px;
  line-height: 0;
  overflow: hidden;
  opacity: .5;
}
.costura svg { width: 100%; height: 14px; display: block; }
.costura path { fill: none; stroke: var(--mostaza); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

/* ═════════ 3-bis. EL SANCOCHO DE LA CASA — MODELO 3D (REVISIÓN 4) ════════ */
.sancocho { background: var(--ox-2); }
.sancocho__grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .sancocho__grid { grid-template-columns: 1fr 1.05fr; } }
.sancocho__texto p { color: var(--crema-mute); }
.sancocho__nota {
  border-left: 3px solid var(--dorado);
  padding-left: 1rem;
  font-size: .95rem;
  margin-top: 1.2rem;
}

.sancocho__visor {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid rgba(209, 157, 102, .3);
  /* mismo fondo cálido con el que se probó el modelo, para que el caldo no
     quede recortado sobre negro */
  background:
    radial-gradient(ellipse at 50% 42%, rgba(171, 87, 34, .28), transparent 62%),
    var(--tarjeta);
}
.sancocho__visor model-viewer {
  width: 100%;
  height: 100%;
  display: block;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--brasa);
  --progress-mask: transparent;
}
.sancocho__cargando {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--crema);
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: 1rem;
}
.sancocho__cargando[hidden] { display: none; }

/* ─────────────────────────── 2. SOBRE EL RANCHO ────────────────────────── */
.sobre { background: var(--ox-2); }
.sobre__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) {
  .sobre__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.sobre__texto p { color: var(--crema-mute); }
.sobre__texto p strong { color: var(--crema); }

.datos-rapidos {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 560px) { .datos-rapidos { grid-template-columns: 1fr 1fr; } }
.datos-rapidos li {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: var(--tarjeta);
  border-left: 3px solid var(--naranja);
  padding: .85rem 1rem;
  border-radius: var(--radio);
}
.datos-rapidos .dato { display: block; min-width: 0; }
.datos-rapidos b { display: block; color: var(--crema); font-size: 1rem; line-height: 1.3; }
.datos-rapidos .dato span { display: block; color: var(--crema-mute); font-size: .9rem; line-height: 1.35; }
/* REVISIÓN 4 (punto 8): los números que cuentan hacia arriba al entrar en
   viewport. tabular-nums es obligatorio: sin él la cifra baila de ancho en cada
   cuadro de la cuenta y arrastra el texto de al lado. Los cuenta js/site.js. */
.datos-rapidos .cuenta,
.cuenta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sobre__collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.7rem, 2vw, 1.1rem);
}
/* REVISIÓN 4 (punto 8): micro-parallax del collage. El desplazamiento lo escribe
   js/site.js en la variable --py de cada figura (píxeles), no una transición:
   tiene que seguir al scroll cuadro a cuadro. Con prefers-reduced-motion el JS
   ni siquiera se engancha al scroll y --py se queda en 0. */
.sobre__foto[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }
.sobre__foto { margin: 0; border-radius: var(--radio); overflow: hidden; }
.sobre__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sobre__foto--a { grid-column: 1 / -1; overflow: visible; }
.sobre__foto--a img { aspect-ratio: 16 / 10; border-radius: var(--radio); }
.sobre__foto--d { grid-column: 1 / -1; }
.sobre__foto--d img { aspect-ratio: 16 / 9; object-position: center 34%; }

/* ─────────────────────── 3. FRANJA PARRILLA Y VITRINA ──────────────────── */
.franja {
  position: relative;
  min-height: min(64svh, 560px);
  display: grid;
  align-items: end;
  padding-block: clamp(3rem, 9vw, 6rem);
  isolation: isolate;
  overflow: hidden;
}
.franja__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 44% 88%;
  z-index: -2;
}
.franja__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(18, 13, 11, .5) 0%, rgba(18, 13, 11, .3) 28%, rgba(18, 13, 11, .82) 72%, rgba(18, 13, 11, .97) 100%);
}
/* REVISIÓN 4 (punto 4): chispas de la parrilla. Va encima del velo (-1, mismo
   nivel, pero después en el DOM) y debajo del texto de la franja, que está en
   flujo normal. Lo pinta js/chispas.js. */
.franja__chispas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .franja__chispas { display: none; }
}
@media (max-width: 700px) {
  .franja { min-height: min(56svh, 460px); }
  .franja__img { object-position: 50% 55%; }
}
.franja__cuerpo { max-width: 720px; }
.franja__titulo { color: var(--hueso); margin: 0 0 1rem; text-shadow: 0 4px 20px rgba(18, 13, 11, .85); }
.franja__pie { color: var(--crema); max-width: 46ch; margin: 0; }

/* ────────────────────────────── 4. MENÚ ────────────────────────────────── */
.menu__tabs {
  display: flex;
  gap: .5rem;
  border-bottom: 1px solid rgba(209, 157, 102, .25);
  margin-bottom: 1.6rem;
}
.menu__tab {
  padding: .85rem 1.4rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--crema-mute);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  min-height: 52px;
  transition: color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease);
}
.menu__tab[aria-selected="true"] { color: var(--brasa); border-bottom-color: var(--brasa); }
.menu__tab:hover { color: var(--crema); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 2rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  min-height: 44px;
  border: 1px solid rgba(209, 157, 102, .35);
  border-radius: 999px;
  color: var(--crema);
  font-size: .93rem;
  font-weight: 500;
  text-decoration: none;
  background: rgba(42, 32, 25, .55);
  transition: border-color var(--t-rapido) var(--ease),
              color var(--t-rapido) var(--ease),
              background-color var(--t-rapido) var(--ease);
}
.chip:hover { border-color: var(--brasa); color: var(--brasa); }
.chip--activo { background: var(--ladrillo); border-color: var(--ladrillo); color: var(--crema); }
.chip--activo:hover { color: var(--crema); border-color: var(--brasa); }

.menu__grupo { margin-bottom: clamp(2.2rem, 5vw, 3.2rem); scroll-margin-top: 6.5rem; }
.menu__h3 {
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  color: var(--dorado);
  border-bottom: 1px solid rgba(209, 157, 102, .25);
  padding-bottom: .5rem;
  margin-bottom: 1.1rem;
}
.menu__nota { font-style: normal; font-weight: 400; font-size: .82em; color: var(--crema-mute); }

.carta { display: grid; gap: .15rem; }
@media (min-width: 820px) { .carta { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

.carta li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(243, 230, 214, .07);
}
.carta__nombre { flex: none; max-width: 78%; }
.carta__nombre em { font-style: normal; color: var(--crema-mute); font-size: .9em; }
/* etiqueta de "fijo del día" — dato real confirmado por el dueño vía WhatsApp
   30-ago-2026 (ver CLAUDE.md sección E). Solo en los platos donde el dueño
   confirmó el día; el resto de la carta no lleva esta etiqueta. */
.carta__dia {
  flex: none;
  align-self: center;
  padding: .1em .55em;
  border: 1px solid var(--dorado);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dorado);
  white-space: nowrap;
}
.carta__linea {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  min-width: 1.5rem;
  transform: translateY(-.22em);
  background-image: radial-gradient(circle, rgba(209, 157, 102, .6) 1px, transparent 1.4px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
}
/* REVISIÓN 4 (punto 5): al pasar por la fila, la línea de puntos se DIBUJA de
   izquierda a derecha hacia el precio. Es una segunda capa de puntos, esta vez
   en naranja brasa, que crece de 0 a 100 % del ancho. */
.carta__linea::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background-image: radial-gradient(circle, var(--brasa) 1.1px, transparent 1.5px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  transition: width 420ms var(--ease);
}
/* :active y :focus-within cubren el táctil y el teclado: en móvil el mismo
   acento se enciende al tocar la fila, sin depender de :hover. */
.carta li:hover .carta__linea::after,
.carta li:active .carta__linea::after,
.carta li:focus-within .carta__linea::after { width: 100%; }

.carta__precio {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  color: var(--brasa);
  min-width: 4.6ch;
  text-align: right;
  transition: color var(--t-rapido) var(--ease),
              transform var(--t-medio) var(--ease),
              text-shadow var(--t-medio) var(--ease);
}
.carta__precio::before { content: "$"; opacity: .65; margin-right: .1em; }
.carta li:hover .carta__precio,
.carta li:active .carta__precio,
.carta li:focus-within .carta__precio {
  color: var(--hueso);
  transform: scale(1.09);
  text-shadow: 0 0 14px rgba(240, 130, 42, .55);
}

.carta--heroe {
  position: relative;
  align-items: center;
  gap: .9rem;
  padding: .7rem 0;
}
.carta__foto {
  flex: none;
  width: 66px; height: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--mostaza);
  outline: 3px solid var(--ox);
  outline-offset: -6px;
  transition: transform var(--t-medio) var(--ease),
              border-color var(--t-medio) var(--ease);
}
.carta--heroe:hover .carta__foto,
.carta--heroe:active .carta__foto,
.carta--heroe:focus-within .carta__foto {
  transform: scale(1.09);
  border-color: var(--brasa);
}
/* El filete bordado de los platos héroe: un aro dorado punteado alrededor de la
   foto circular, que aparece y gira lento al pasar por encima. Va como
   pseudo-elemento ABSOLUTO — si estuviera en flujo se volvería un ítem más del
   flex de la fila y correría el texto. */
.carta--heroe::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 76px; height: 76px;
  margin-top: -38px;
  border-radius: 50%;
  border: 1.5px dashed var(--dorado);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-medio) var(--ease);
}
.carta--heroe:hover::before,
.carta--heroe:active::before,
.carta--heroe:focus-within::before { opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .carta--heroe:hover::before,
  .carta--heroe:focus-within::before { animation: fileteGira 16s linear infinite; }
}
@keyframes fileteGira { to { transform: rotate(360deg); } }

.carta--heroe .carta__nombre { font-weight: 600; }

.menu__aviso {
  color: var(--crema-mute);
  font-size: .92rem;
  border-top: 1px solid rgba(209, 157, 102, .2);
  padding-top: 1.1rem;
  margin: 0;
}

/* ═════════════ CINTA DE MARCA / MARQUEE (REVISIÓN 4, punto 3) ═════════════
   Franja delgada entre el menú y las promociones: Permanent Marker crema sobre
   ladrillo, con la tagline y tres platos insignia separados por el motivo
   escalonado en dorado.

   El truco del bucle sin salto: la pista lleva DOS grupos idénticos y se
   desplaza exactamente -50 %; al terminar, el segundo grupo está donde arrancó
   el primero. Por eso el HTML repite el bloque. */
.cinta {
  background: var(--ladrillo);
  border-block: 1px solid rgba(209, 157, 102, .35);
  overflow: hidden;
  padding-block: .55rem;
}
.cinta__pista {
  display: flex;
  width: max-content;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .cinta__pista { animation: cintaCorre 42s linear infinite; }
}
@keyframes cintaCorre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cinta__grupo {
  display: flex;
  align-items: center;
  flex: none;
}
.cinta__frase {
  color: var(--crema);
  /* .marker arranca en clamp(1.6rem, 5.5vw, 3.6rem): demasiado para una cinta.
     Se baja acá, sin bajar de 20px (regla dura de la tipografía). */
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1;
  white-space: nowrap;
  padding-block: .25rem;
}
.ornamento--cinta {
  display: inline-block;
  width: 58px;
  margin: 0 clamp(1rem, 3vw, 2.2rem);
  flex: none;
}
.ornamento--cinta svg { width: 58px; height: 11px; }
.cinta .ornamento path { stroke: var(--dorado); stroke-width: 2.6; }

/* ───────────────────── AVISO DE "PENDIENTE DE CONFIRMAR" ────────────────────
   Marca visible, a proposito fea-pero-clara, para el contenido que todavia no
   aprobo el dueno (promos del punto 4, premios de la ruleta del punto 5).
   Se borra el bloque entero cuando confirme; no hace falta tocar nada mas. */
.pendiente {
  border: 1px dashed var(--mostaza);
  border-radius: var(--radio);
  background: rgba(195, 117, 14, .09);
  padding: .9rem 1.1rem;
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  color: var(--dorado);
  font-size: .92rem;
  line-height: 1.55;
}
.pendiente b {
  display: block;
  margin-bottom: .2rem;
  color: var(--hueso);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ────────────────── 5. PROMOCIONES Y EVENTOS ───────────────────────────── */
.promos { background: var(--ox-2); }

.promos__grid { display: grid; gap: clamp(1.1rem, 3vw, 1.8rem); }
@media (min-width: 760px) { .promos__grid { grid-template-columns: repeat(2, 1fr); } }

.promo {
  display: flex;
  flex-direction: column;
  background: var(--tarjeta);
  border: 1px solid rgba(209, 157, 102, .22);
  border-radius: var(--radio);
  overflow: hidden;
}
.promo__foto { position: relative; }
.promo__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.promo__dia {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  padding: .45rem 1.1rem;
  background: var(--ladrillo);
  color: var(--crema);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.promo__cuerpo { padding: clamp(1.1rem, 3vw, 1.6rem); }
.promo__titulo {
  color: var(--hueso);
  font-size: clamp(1.4rem, 3.4vw, 1.95rem);   /* nunca por debajo de 20px */
  margin: 0 0 .7rem;
}
.promo__cuerpo p { color: var(--crema-mute); margin-bottom: .9rem; }
.promo__lista { margin: 0 0 1rem; }
.promo__lista li {
  padding: .5rem 0 .5rem 1.4rem;
  border-bottom: 1px solid rgba(243, 230, 214, .07);
  color: var(--crema);
  position: relative;
}
.promo__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 8px; height: 8px;
  background: var(--brasa);
}
.promo__pie { font-size: .88rem; margin-bottom: 0 !important; }

/* ────────────────────── 5B. FIJOS DE LA SEMANA ─────────────────────────
   Dato real confirmado por el dueño vía WhatsApp (30-ago-2026, CLAUDE.md
   sección E): un plato fijo por día, lunes a sábado. Fotos generadas con
   Higgsfield — el plato y el día son reales, la foto es ilustrativa (se
   marca así en el copy de la sección, mismo criterio honesto que el resto
   del sitio). */
.fijos__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .fijos__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .fijos__grid { grid-template-columns: repeat(6, 1fr); } }

.fijo {
  background: var(--tarjeta);
  border: 1px solid rgba(209, 157, 102, .22);
  border-radius: var(--radio);
  overflow: hidden;
  text-align: center;
}
.fijo__foto-caja { position: relative; }
.fijo__foto { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.fijo__dia {
  position: absolute; left: 0; top: 0;
  margin: 0;
  padding: .3rem .7rem;
  background: var(--brasa);
  color: var(--ox);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fijo__cuerpo { padding: .8rem .6rem 1rem; }
.fijo__nombre { color: var(--hueso); font-size: .92rem; font-weight: 600; line-height: 1.25; margin: 0 0 .3rem; }
.fijo__nombre em { font-style: normal; color: var(--crema-mute); font-size: .85em; }
.fijo__precio { color: var(--brasa); font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }
.fijos__nota { color: var(--crema-mute); font-size: .82rem; margin-top: 1.4rem; text-align: center; }

/* ───────────────────────── 6. RULETA DEL RANCHO ────────────────────────── */
.ruleta__caja { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); align-items: center; }
@media (min-width: 820px) { .ruleta__caja { grid-template-columns: minmax(0, 340px) 1fr; } }

/* La "escena": rueda + personaje en fila, alineados por el piso. El personaje
   queda AL LADO (nunca encima) para no tapar ningún gajo. */
.ruleta__escena {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.1rem, 1.5vw, .7rem);
}
.ruleta__rueda {
  position: relative;
  flex: 0 1 300px;
  width: auto;
  aspect-ratio: 1 / 1;
}
.ruleta__rueda svg {
  width: 100%; height: 100%;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 8px 26px rgba(18, 13, 11, .65));
}
.ruleta__aguja {
  position: absolute;
  top: -4px; left: 50%;
  z-index: 2;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 26px solid var(--brasa);
  filter: drop-shadow(0 2px 3px rgba(18, 13, 11, .9));
}
.ruleta__gajo { stroke: var(--dorado); stroke-width: 1.5; }
.ruleta__gajo--a { fill: var(--ladrillo); }
.ruleta__gajo--b { fill: var(--tarjeta); }
.ruleta__texto {
  fill: var(--crema);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
}
.ruleta__eje { fill: var(--ox); stroke: var(--dorado); stroke-width: 2; }
.ruleta__bordado path { fill: var(--dorado); }

/* REVISIÓN 3 (30-ago-2026): personaje decorativo parado junto a la rueda
   (camisilla, montuno y sombrero pintao, dibujado en SVG plano). */
.ruleta__personaje {
  flex: 0 0 clamp(70px, 23%, 104px);
  align-self: flex-end;
  margin-bottom: 2%;
  pointer-events: none;
}
.ruleta__personaje svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;             /* el brazo extendido se sale del viewBox */
  filter: drop-shadow(0 6px 14px rgba(18, 13, 11, .55));
}

/* El brazo del lado de la rueda: en reposo cuelga pegado al cuerpo; al girar
   se extiende hacia la rueda y la empuja dos veces. El giro es POSITIVO porque
   en coordenadas SVG (y hacia abajo) eso lleva la mano hacia la izquierda, que
   es donde está la rueda. */
.personaje__brazo {
  transform-origin: 34px 54px;
  transform: rotate(0deg);
  transition: transform .3s var(--ease, ease);
}
/* 1.6 s x 2 = 3.2 s, exactamente lo que dura el giro (GIRO_MS en js/ruleta.js) */
.ruleta__personaje--girando .personaje__brazo {
  animation: personajeEmpuje 1.6s ease-in-out 2;
}
@keyframes personajeEmpuje {
  0%   { transform: rotate(0deg); }
  14%  { transform: rotate(48deg); }
  34%  { transform: rotate(66deg); }
  54%  { transform: rotate(44deg); }
  76%  { transform: rotate(64deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .personaje__brazo,
  .ruleta__personaje--girando .personaje__brazo {
    animation: none !important;
    transition: none !important;
    transform: rotate(0deg) !important;   /* se queda en la pose de reposo */
  }
}

/* REVISIÓN 3 (30-ago-2026): en mobile el botón quedaba muy suelto/aislado
   (queja del dueño viendo el sitio en su celular). Se agrupa el panel en una
   tarjeta (mismo lenguaje que .promo/.pendiente) para que el botón se sienta
   parte de un bloque y no flotando solo sobre el fondo. */
.ruleta__panel {
  background: var(--tarjeta);
  border: 1px solid rgba(209, 157, 102, .22);
  border-radius: var(--radio);
  padding: clamp(1.2rem, 4vw, 1.8rem);
}
/* En móvil ocupa todo el ancho de la tarjeta: así se lee como parte del panel
   y no como un botón suelto en el medio de la pantalla (queja del dueño). */
.ruleta__boton { width: 100%; display: flex; }
@media (min-width: 820px) {
  .ruleta__boton { width: auto; min-width: 16rem; display: inline-flex; }
}
/* ya giro hoy: se apaga sin perder legibilidad (bajarle la opacidad al boton
   naranja dejaba el texto oscuro sobre marrón, ilegible) */
.ruleta__boton[disabled],
.ruleta__boton[disabled]:hover {
  background: transparent;
  border: 2px solid rgba(209, 157, 102, .5);
  color: var(--crema-mute);
  cursor: not-allowed;
  transform: none;
}

.ruleta__resultado {
  /* reserva sitio para que el texto del premio no dé un salto al aparecer,
     pero sin dejar un hueco enorme debajo del botón mientras está vacío */
  min-height: 2.4em;
  margin: .9rem 0 .7rem;
  font-size: 1.05rem;
  color: var(--crema);
}
.ruleta__resultado--gano {
  color: var(--hueso);
  font-weight: 600;
  border-left: 3px solid var(--brasa);
  padding-left: .9rem;
}
.ruleta__pie { color: var(--crema-mute); font-size: .92rem; margin: 0; }

/* ───────────────────────────── 7. GALERÍA ──────────────────────────────── */
.galeria { background: var(--ox-2); }

.mosaico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 150px;
  gap: clamp(.5rem, 1.6vw, .85rem);
}
@media (min-width: 700px) { .mosaico { grid-auto-rows: 190px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

.celda {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--tarjeta);
  display: block;
}
.celda img, .celda video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-lento) var(--ease), filter var(--t-medio) var(--ease);
}
.celda:hover img,
.celda:focus-visible img { transform: scale(1.06); }
.celda--alta { grid-row: span 2; }
.celda--ancha { grid-column: span 2; }
.celda[hidden] { display: none; }

/* ══════════ GALERÍA CON MÁS TACTO (REVISIÓN 4, punto 7) ══════════
   Tres capas al pasar por encima: el zoom suave de arriba, un filete dorado por
   dentro del borde y la leyenda que sube desde el borde inferior. El texto de la
   leyenda NO es una cadena nueva: js/site.js lo copia del data-alt de la celda,
   que ya está escrito y ya está traducido en js/i18n.js. Por eso es
   aria-hidden: para el lector de pantalla ya está en el alt de la foto. */
.celda::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio);
  box-shadow: inset 0 0 0 2px var(--dorado);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-medio) var(--ease);
}
.celda:hover::after,
.celda:focus-visible::after { opacity: .9; }

.celda__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem .7rem .55rem;
  font-size: .82rem;
  line-height: 1.3;
  font-weight: 600;
  text-align: left;
  color: var(--crema);
  background: linear-gradient(transparent, rgba(18, 13, 11, .92));
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-medio) var(--ease), opacity var(--t-medio) var(--ease);
}
.celda:hover .celda__pie,
.celda:focus-visible .celda__pie { transform: none; opacity: 1; }

/* Cambio de filtro: las celdas se apagan un instante y vuelven, en vez del corte
   seco de antes. Los 160 ms del JS coinciden con esta transición. */
.celda { transition: opacity var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease); }
.mosaico--cambio .celda { opacity: .12; transform: scale(.98); }

.celda--viva { grid-row: span 2; }
/* la foto queda debajo como respaldo: si el video no carga (o hay
   prefers-reduced-motion) la celda nunca se ve vacia */
.celda--viva video { position: absolute; inset: 0; }
.celda--viva figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem .8rem .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--crema);
  background: linear-gradient(transparent, rgba(18, 13, 11, .9));
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(11, 8, 7, .96);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(100%, 1400px); max-height: 86svh; object-fit: contain; border-radius: var(--radio); }
.lightbox__cerrar,
.lightbox__nav {
  position: absolute;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--crema);
  background: rgba(42, 32, 25, .8);
  border-radius: 50%;
}
.lightbox__cerrar { top: 1rem; right: 1rem; }
.lightbox__nav--prev { left: .6rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: .6rem; top: 50%; transform: translateY(-50%); }
.lightbox__cerrar:hover, .lightbox__nav:hover { background: var(--ladrillo); }

/* ─────────────── 8. POLLERA Y TAMBORITO (identidad folclorica) ─────────── */
/* REVISIÓN 4 (punto 6): fondo con la textura REAL del estudio de marca
   ("Textura Rancho.png" de assets/marca/fotos-estudio). No se publica entera:
   tools/build-assets.py (tarea "textura") saca un cuadro limpio del lienzo y lo
   espeja en los dos ejes, así que public/img/textura-rancho.webp es un TILE que
   cierra sin costura y pesa una fracción del original.
   background-size escala el tile COMPLETO (640 px) — cualquier valor sirve
   mientras sea el tile entero; recortarlo a la mitad rompería el espejado.
   Va muy tenue y en luminosity: es un fondo, no una foto, y no debe meterle
   color propio a la paleta de la sección. */
.folclor { position: relative; isolation: isolate; }
.folclor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../public/img/textura-rancho.webp") 0 0 repeat;
  background-size: 420px auto;
  opacity: .085;
  mix-blend-mode: luminosity;
}
.folclor__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .folclor__grid { grid-template-columns: 1fr 1fr; }
  /* el cuadro va a la derecha en escritorio: el texto entra primero al leer */
  .folclor__fotos { order: 2; }
}

.folclor__fotos { display: grid; gap: clamp(1.4rem, 3vw, 2rem); }
.folclor__cuadro, .folclor__detalle { margin: 0; }
/* la unica foto con el marco escalonado de marca en esta seccion; el marco
   cuelga 10px por fuera del lienzo (regla .marco-foto), por eso el figure
   necesita ese aire libre y el pie de foto queda fuera del lienzo */
.folclor__lienzo { position: relative; margin: 10px; }
.folclor__lienzo img { width: 100%; border-radius: var(--radio); }
.folclor__detalle img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 42%;
  border-radius: var(--radio);
}
.folclor figcaption { margin-top: .8rem; color: var(--crema-mute); font-size: .9rem; line-height: 1.45; }

.folclor__texto p { color: var(--crema-mute); }
.folclor__texto p strong { color: var(--crema); }
.datos-rapidos--una { grid-template-columns: 1fr !important; }
.datos-rapidos--una li { border-left-color: var(--mostaza); }

.folclor__nota {
  border-left: 3px solid var(--dorado);
  padding-left: 1.1rem;
  color: var(--crema-mute);
  font-size: .95rem;
  margin-top: 1.6rem;
}

/* ──────────────────────────── 9. TOUR 360° ─────────────────────────────── */
.tour__caja {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--tarjeta);
  border: 1px solid rgba(209, 157, 102, .25);
}

/* El visor arranca solo al entrar en viewport (sin boton). Mientras tanto se ve
   la miniatura de la panoramica borroneada, para que la caja nunca este negra. */
.tour__visor {
  position: relative;
  aspect-ratio: 16 / 8;
  min-height: 320px;
  background: var(--negro) url("../public/img/tour360/pano-1-thumb.webp") center / cover no-repeat;
}
.tour__cargando {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--crema);
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(18, 13, 11, .72);
}
.tour__cargando[hidden] { display: none; }
.pano__zoom {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  display: grid;
  gap: .4rem;
  z-index: 2;
}
.pano__zoom button {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--crema);
  background: rgba(18, 13, 11, .72);
  border: 1px solid rgba(209, 157, 102, .45);
  border-radius: var(--radio);
}
.pano__zoom button:hover { background: var(--ladrillo); }
.tour__visor canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.tour__visor canvas:active { cursor: grabbing; }
.tour__visor .pnlm-container { background: var(--negro) !important; }

.tour__fallo { padding: 1.2rem; margin: 0; color: var(--crema-mute); }
.tour__escenas { margin-top: 1.1rem; margin-bottom: 0; }
.tour__escenas[hidden] { display: none; }

/* ────────────────────── 10. UBICACIÓN Y HORARIO ────────────────────────── */
.ubicacion { background: var(--ox-2); }
.ubicacion__grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .ubicacion__grid { grid-template-columns: 1fr 1.1fr; } }

.ubicacion__dir { font-size: 1.12rem; color: var(--crema); margin-bottom: 1.2rem; line-height: 1.55; }
.ubicacion__horario {
  font-size: clamp(1.3rem, 3.4vw, 1.85rem);
  font-weight: 700;
  color: var(--crema);
  line-height: 1.25;
  margin: 1.2rem 0 1.4rem;
}
.ubicacion__horario b { color: var(--dorado); font-size: .62em; letter-spacing: .12em; text-transform: uppercase; }
.ubicacion__acciones { display: flex; flex-wrap: wrap; gap: .7rem; }

.ubicacion__mapa {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid rgba(209, 157, 102, .3);
  aspect-ratio: 4 / 3;
}
.ubicacion__mapa iframe { width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(1.05); }

/* ───────────────────────────── 11. RESEÑAS ─────────────────────────────── */
.resenas { background: var(--ladrillo); }
.resenas .kicker { color: var(--hueso); }
.resenas .titulo { color: var(--crema); }
.resenas .ornamento path { stroke: var(--hueso); }
.resenas__cta { margin: 1rem 0 0; }
/* El botón de reseñas (REVISIÓN 3) es el único botón sobre el ladrillo: ahí el
   dorado de .boton--borde se queda en 4.0:1, por debajo de AA. Con tinta crema
   sube a ~7.8:1 y el borde dorado (elemento no textual, mínimo 3:1) se queda. */
.resenas .boton--borde { color: var(--crema); }
.resenas .boton--borde:hover { color: var(--hueso); }

.resenas__grid { display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .resenas__grid { grid-template-columns: repeat(3, 1fr); } }

.cita {
  margin: 0;
  padding: 1.5rem 1.4rem;
  background: rgba(18, 13, 11, .32);
  border-left: 3px solid var(--hueso);
  border-radius: var(--radio);
}
.cita p { color: var(--crema); font-size: 1.1rem; line-height: 1.45; }
.cita__trad { color: var(--hueso) !important; font-size: .95rem !important; font-style: italic; }
/* Con el sitio en inglés el diccionario deja esta línea vacía (la cita ya está
   en inglés): sin esto quedaría un renglón en blanco desalineando las citas. */
.cita__trad:empty { display: none; }
.cita footer { color: var(--hueso); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
/* REVISIÓN 4: el nombre de quien firma la reseña de Google. Va en versalitas
   como el resto del pie de cita, pero con más peso: es la persona, no la
   plataforma. */
.cita footer b { color: var(--crema); font-weight: 700; }
/* Las citas de Google son bastante más largas que las dos de TripAdvisor: se
   baja medio punto el cuerpo para que las seis tarjetas se vean parejas. */
.cita p { font-size: 1.04rem; }
.cita--dato { display: grid; align-content: center; }
/* especificidad a proposito: si no gana ".cita p" y se queda en 1.1rem */
.cita .cita__estrellas {
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--hueso);
  margin-bottom: .6rem;
}
.cita .cita__estrellas span { opacity: .45; }
.cita--dato strong { color: var(--hueso); }

/* ──────────────────────────── 12. INSTAGRAM ────────────────────────────── */
.ig__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.5rem, 1.5vw, .8rem);
}
@media (min-width: 700px) { .ig__grid { grid-template-columns: repeat(6, 1fr); } }
.ig__grid img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio); width: 100%; }
.ig__cta { margin-top: 1.6rem; }

/* ───────────────────── 12b. PREGUNTAS FRECUENTES (auditoría 13-sep-2026) ── */
.faq__lista { max-width: 780px; margin-inline: auto; display: grid; gap: .7rem; }
.faq__item {
  background: var(--tarjeta, rgba(0,0,0,.18));
  border: 1px solid rgba(217, 161, 59, .22);
  border-radius: var(--radio);
  padding: 0 1.1rem;
}
.faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; font-weight: 600; font-size: 1.05rem; color: var(--crema);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: var(--brasa); border: 1px solid var(--brasa);
  font-weight: 700; transition: transform var(--t-rapido) var(--ease), background-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); background: var(--brasa); color: var(--ox); }
.faq__item[open] summary { color: var(--dorado); }
.faq__item p { margin: 0 0 1.1rem; color: var(--crema-mute, var(--crema)); line-height: 1.6; }
.faq__item p a { color: var(--brasa); }

/* ───────────────────────────── 13. CIERRE ──────────────────────────────── */
.cierre {
  position: relative;
  min-height: min(82svh, 720px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(4rem, 10vw, 7rem) var(--gutter);
  isolation: isolate;
  overflow: hidden;
}
.cierre__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(.9) contrast(1.06);
  z-index: -2;
}
/* REVISIÓN 4 (punto 9): Ken Burns lentísimo sobre la foto de dron del cierre.
   80 s de ida y otros 80 de vuelta (alternate), 6 % de zoom y 1 % de deriva: a
   simple vista no se ve "moverse", se siente que la imagen respira. Va dentro
   de no-preference para no dejar la foto congelada en el fotograma final cuando
   el visitante pide menos movimiento (que es lo que pasaría si solo se
   confiara en el corte global de duración de base.css). */
@media (prefers-reduced-motion: no-preference) {
  .cierre__img { animation: cierreKenBurns 80s ease-in-out infinite alternate; }
}
@keyframes cierreKenBurns {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1%, -1.2%, 0); }
}
.cierre__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 13, 11, .92) 0%, rgba(94, 35, 25, .66) 46%, rgba(18, 13, 11, .96) 100%);
}
.cierre__cuerpo { width: 100%; max-width: 900px; }
.cierre__frase { color: var(--hueso); margin: 0 0 1.8rem; text-shadow: 0 4px 22px rgba(18, 13, 11, .9); }
/* REVISIÓN 5: acá va el emblema COMPLETO (con las dos leyendas), por eso se
   muestra más grande que antes: a 360 px las leyendas quedaban ilegibles. */
.cierre__logo { width: clamp(240px, 54vw, 430px); margin: 0 auto 2rem; filter: drop-shadow(0 6px 20px rgba(18, 13, 11, .8)); }
.cierre__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* ────────────────────────────── PIE ────────────────────────────────────── */
.pie { background: var(--negro); padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.pie__caja { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .pie__caja { grid-template-columns: 1fr 1fr; } }
/* REVISIÓN 5: el nombre del rancho lo pone el logo, no un <strong> en durazno.
   Se quitó la regla `.pie__marca strong { color: var(--durazno) }`: --durazno
   era el color EXCLUSIVO del script viejo y el emblema nuevo trae los suyos. */
.pie__logo { display: block; width: clamp(190px, 40vw, 250px); height: auto; margin-bottom: .8rem; }
.pie__marca b { color: var(--dorado); }
.pie p { color: var(--crema-mute); margin: 0; font-size: .95rem; }
.pie a { color: var(--crema); }
.pie a:hover { color: var(--brasa); }
.pie__legal { grid-column: 1 / -1; border-top: 1px solid rgba(243, 230, 214, .12); padding-top: 1.1rem; font-size: .85rem; }

/* enlace cruzado a la sede de El Roble (pedido del dueño, 30-ago-2026) */
.pie__hermana {
  grid-column: 1 / -1;
  margin: .3rem 0 1.1rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(209, 157, 102, .3);
  border-radius: var(--radio);
  background: rgba(240, 130, 42, .06);
}
.pie__hermana p { color: var(--crema-mute); font-size: .9rem; margin-bottom: .7rem; }