/* 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; }

/* ==========================================================================
   El Rancho Interiorano — sede El Roble, Aguadulce — secciones
   Sitio EN CONSTRUCCION (30-ago-2026): solo lleva las secciones que no
   dependen de datos que todavia no existen (menu con precios, telefono,
   Instagram, reseñas, direccion exacta). Ver CLAUDE.md de este proyecto.
   ========================================================================== */

/* ═══════════════════════════ INTRO "EL VAPOR DEL SANCOCHO" ════════════════
   Intro animado propio de esta sede (pedido del dueño, 30-ago-2026). NO es
   el mismo intro de Capira ("El trazo de la brasa") — no se toca ese. */
.intro {
  position: fixed; inset: 0; z-index: 900;
  background: var(--negro);
  display: grid; place-items: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 420ms var(--ease);
}
.intro[hidden] { display: none; }
.intro--saliendo { opacity: 0; pointer-events: none; }
body.intro-activa { overflow: hidden; }
/* Ronda 27: poster del hero de fondo (tenue) + viñeta oscura encima; la
   cenefa, la olla, el vapor y la marca quedan por encima de ambos. */
/* inset 10px a propósito: Chrome excluye del LCP las imágenes que cubren el
   viewport ENTERO (las toma por fondo); con el marco, el poster cuenta como
   LCP desde el primer pintado y de paso queda enmarcado en madera. */
.intro__fondo { position: absolute; inset: 10px; width: auto; height: auto; object-fit: cover; opacity: .42; filter: saturate(.85); z-index: 0; }
.intro::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 55%, rgba(23, 16, 11, .2), rgba(23, 16, 11, .8) 75%); }
.intro__svg { z-index: 1; }
.intro__saltar { z-index: 2; }

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

.intro__cenefa {
  fill: none; stroke: var(--teja); stroke-width: 5;
  filter: drop-shadow(0 0 6px rgba(232, 163, 61, .5));
  transition: stroke-dashoffset 700ms var(--ease);
}
.intro--fase1 .intro__cenefa { stroke-dashoffset: 0; }

.intro__olla { fill: none; stroke: var(--dorado); stroke-width: 3; opacity: 0; transition: opacity 500ms var(--ease); }
.intro--fase1 .intro__olla { opacity: .8; }
.intro--fase3 .intro__olla { opacity: 0; transition-delay: 100ms; }

.intro__vapor-linea {
  fill: none; stroke: var(--dorado); stroke-width: 3; stroke-linecap: round;
  opacity: 0; transform: translateY(24px);
  transition: opacity 550ms ease, transform 950ms ease;
}
.intro--fase2 .intro__vapor-linea { opacity: .6; transform: translateY(0); }
.intro--fase3 .intro__vapor-linea { opacity: 0; transform: translateY(-36px); transition-delay: 150ms; }

.intro__marca { position: relative; z-index: 1; text-align: center; opacity: 0; transition: opacity 550ms var(--ease); }
.intro--fase3 .intro__marca { opacity: 1; }
.intro__marca img { width: min(48vw, 240px); margin-inline: auto; display: block; }
.intro__marca p {
  font-family: var(--sans-cond); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dorado); font-size: .8rem; font-weight: 700; margin-top: .9rem;
}

.intro__saltar {
  position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vw, 2.5rem);
  z-index: 2;
  padding: .65rem 1.1rem; border: 1px solid rgba(243, 230, 214, .35); border-radius: 999px;
  color: var(--crema); font-size: .9rem; letter-spacing: .04em;
  background: rgba(23, 16, 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); }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
}

/* ═══════════════════════════════ NAV ═════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 500;
  /* Ronda 28: barra sólida siempre (antes degradaba a transparente sobre el
     hero y el logo/menú se veían "flotando" sobre la foto) */
  background: rgba(23, 16, 11, .94);
  box-shadow: 0 1px 0 rgba(217, 168, 103, .16);
  transition: background-color var(--t-medio) var(--ease);
}
.nav.compacta { background: rgba(23, 16, 11, .96); box-shadow: 0 1px 0 rgba(217, 168, 103, .22); }

.nav__caja {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: .7rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* logo real (llegó 30-ago-2026): el archivo tal cual, nunca redibujado ni
   usado como fuente para otro texto — mismo criterio que Capira. Antes esto
   era texto en Permanent Marker; con el logo real ya no hace falta. */
.nav__logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; line-height: 1; }
.nav__logo img { width: clamp(88px, 13vw, 130px); height: auto; }
.nav__logo span { font-family: var(--sans-cond); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dorado); font-weight: 700; }

/* Menú con ícono de tres rayas (pedido del dueño, 30-ago-2026: antes era una
   fila de chips siempre visible — "todo junto" — ahora se esconde detrás del
   botón, mismo patrón que la sede Capira). */
.nav__hamburguesa {
  margin-left: auto; flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: background var(--t-rapido) var(--ease);
}
/* Ronda 10: la "X" de cerrar el menú se perdía junto al logo — mismo fix ya
   aplicado en Capira: fondo circular oscuro + X en naranja al abrir. */
.nav__hamburguesa[aria-expanded="true"] { background: rgba(0, 0, 0, .4); }
.nav__barras { position: relative; }
.nav__barras, .nav__barras::before, .nav__barras::after {
  display: block; width: 24px; height: 2.5px; background: var(--crema);
  transition: transform var(--t-rapido) var(--ease), opacity var(--t-rapido) var(--ease), background var(--t-rapido);
}
.nav__barras::before, .nav__barras::after { content: ""; position: absolute; }
.nav__barras::before { transform: translateY(-7px); }
.nav__barras::after { transform: translateY(7px); }
.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); }

.nav__menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(23, 16, 11, .98);
  border-top: 1px solid rgba(217, 168, 103, .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; font-family: var(--sans-cond); text-transform: uppercase; letter-spacing: .06em;
  padding: .7rem .25rem; border-bottom: 1px solid rgba(217, 168, 103, .15);
}
.nav__enlaces a:hover { color: var(--brasa); }

/* Ronda 16: teléfono/WhatsApp en el nav, mismo criterio que Capira */
.nav__contacto { display: flex; flex-wrap: wrap; gap: .5rem; }
.nav__contacto a { border-bottom: 0 !important; }

@media (min-width: 760px) {
  .nav__hamburguesa { display: none; }
  .nav__menu {
    display: flex !important;
    position: static; background: none; border-top: 0; padding: 0;
    flex-direction: row; align-items: center; gap: 1.6rem;
    margin-left: auto;
  }
  .nav__enlaces { flex-direction: row; gap: 1.2rem; }
  .nav__enlaces a { padding: 0; border: 0; font-size: .88rem; letter-spacing: .04em; }
  .nav__tel, .nav__wa { min-height: 44px; padding: .5rem 1.05rem; }
  /* mismo motivo que Capira: con 8 enlaces + idioma + teléfono, la palabra
     completa de WhatsApp empujaba la barra fuera del contenedor */
  .nav__wa span { display: none; }
  .nav__wa { padding: .5rem .8rem; }
  /* Ronda 23: con 8 enlaces + teléfono la barra se partía en dos líneas entre
     760 y ~1180px — nada se envuelve, y el teléfono solo aparece con espacio */
  .nav__caja, .nav__menu, .nav__enlaces, .nav__contacto { flex-wrap: nowrap; }
  .nav__enlaces a, .nav__logo span { white-space: nowrap; }
  .nav__menu { gap: 1.1rem; }
  .nav__enlaces { gap: .9rem; }
  .nav__tel { display: none; }
}
@media (min-width: 1180px) {
  .nav__tel { display: inline-flex; }
  .nav__menu { gap: 1.4rem; }
  .nav__enlaces { gap: 1.1rem; }
}

/* selector ES / EN (pedido del dueño, 30-ago-2026) */
.idioma { display: flex; gap: .35rem; }
/* 31-ago-2026: vive en la barra del nav, siempre a la vista — antes estaba
   dentro del panel de tres rayas y no se notaba que el sitio es bilingüe.
   En móvil se empuja a la derecha y queda justo antes del botón de menú; en
   escritorio pasa al final, después de los enlaces. */
.idioma--barra { margin-left: auto; align-self: center; flex: none; }
.idioma--barra + .nav__hamburguesa { margin-left: .2rem; }
@media (min-width: 760px) { .idioma--barra { order: 3; margin-left: .4rem; } }
.idioma__btn {
  min-width: 42px; min-height: 36px; padding: .3rem .55rem;
  border: 1px solid rgba(217, 168, 103, .4); border-radius: 999px;
  color: var(--crema-mute); font-family: var(--sans-cond); font-size: .78rem;
  font-weight: 700; letter-spacing: .06em;
  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(--negro);
}

/* ═══════════════════════════════ HERO ═════════════════════════════════════ */
.hero {
  position: relative;
  min-height: min(92svh, 820px);
  display: grid;
  place-items: center;
  overflow: hidden;
  /* deja espacio para que el contenido centrado no choque con .hero__scroll
     (que está anclado abajo del todo, position:absolute) */
  padding-bottom: clamp(2.6rem, 6vw, 4rem);
}
.hero__fondo { position: absolute; inset: 0; z-index: 0; }
.hero__fondo img, .hero__fondo video { width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity var(--t-lento) var(--ease); position: absolute; inset: 0; }
.hero__video.lista { opacity: 1; }
/* Ronda 8: se destapa el hero. El velo parejo de antes (.55/.35/.85) tapaba el
   comedor real detrás del logo. Ahora el centro queda casi limpio (.14) y el
   peso se concentra arriba —donde va el nav— y abajo —donde va el texto—, que
   es lo único que necesita contraste. La segunda capa es una viñeta suave para
   que las esquinas no se laven con el sol de la foto. */
/* Ronda 28 (15-sep-2026): el hero nocturno (gente + letrero amarillo) es mucho
   más "ruidoso" que la foto de día para la que se calibró el velo de la
   Ronda 8; el dueño lo vio "muy ocupado / transparente". Se sube el velo
   general y se pone un halo oscuro detrás del bloque de texto. */
.hero__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 55%, rgba(23,16,11,.18) 30%, rgba(23,16,11,.55) 100%),
    linear-gradient(180deg, rgba(23,16,11,.78) 0%, rgba(23,16,11,.32) 40%, rgba(23,16,11,.42) 66%, rgba(23,16,11,.92) 100%);
}
/* la caja de texto se apoya en su propia sombra, no en el velo de toda la foto */
.hero__cuerpo .hero__kicker,
.hero__cuerpo .hero__sub { text-shadow: 0 2px 14px rgba(15, 10, 7, .85); }
.hero__cuerpo { position: relative; z-index: 2; text-align: center; padding-block: 6rem 3rem; isolation: isolate; }
.hero__cuerpo::before {
  content: ""; position: absolute; z-index: -1;
  inset: 1rem -8rem 0;
  background: radial-gradient(ellipse 60% 62% at 50% 46%, rgba(15, 10, 7, .78), rgba(15, 10, 7, .42) 55%, transparent 78%);
  pointer-events: none;
}
.hero__kicker { color: var(--dorado); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: .85rem; margin-bottom: 1rem; }
.hero__h1 { margin: 0 0 .5rem; filter: drop-shadow(0 6px 20px rgba(0,0,0,.4)); }
.hero__h1 img { width: min(90vw, 560px); height: auto; margin-inline: auto; }
.hero__sub { color: var(--crema); font-size: clamp(1.05rem, 2.6vw, 1.3rem); max-width: 640px; margin-inline: auto; margin-bottom: 1.6rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; }
.hero__datos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.1rem; margin: 1.1rem 0 0; font-size: .92rem; }

.hero__scroll {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  z-index: 2; color: var(--crema-mute); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: .4rem; text-decoration: none;
}
.hero__scroll::after { content: ""; width: 1px; height: 28px; background: linear-gradient(var(--brasa), transparent); }

/* ═════════ TITULARES QUE SE ARMAN PALABRA POR PALABRA (Ronda 8 → 25) ═══════
   Ronda 25 (14-sep-2026): ahora en TODOS los h2 (data-palabras) y con máscara:
   cada palabra es una ventana recortada (.pal) y el texto (.pal__in) sube
   desde fuera de ella — el "Text Reveal (Mask)" de 21st.dev en CSS puro. El
   padding/margen negativo de .pal deja sitio a los descendentes (g, p, y) para
   que el recorte no los corte. Las palabras las parte js/site.js.
   Con prefers-reduced-motion el JS ni siquiera parte el titular. */
.palabras .pal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .06em .05em .14em;
  margin: -.06em -.05em -.14em;
}
.palabras .pal__in {
  display: inline-block;
  transform: translateY(118%) rotate(3deg);
  transform-origin: 0 100%;
  transition: transform var(--t-lento) var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
  will-change: transform;
}
.palabras.palabras--visible .pal__in { transform: none; }

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

/* "La cenefa de teja y luces" — device de marca de esta sede (brief Fable
   sec.3), reemplaza el corte recto entre secciones por el perfil ondulado
   real del alero (las luces colgantes SÍ son reales, se ven en las fotos de
   la fachada). Solo 3 apariciones llevan bombillos encendidos
   (data-cenefa-luces): la franja de bienvenida, la ruleta y el cierre — si
   estuviera en todos lados dejaría de sentirse especial. */
.cenefa-top {
  position: absolute; top: 0; left: 0; width: 100%; height: 22px;
  transform: translateY(-1px);
  z-index: 3;   /* por encima de fondos absolutos (franja__img, cierre__img) y del velo */
}
.cenefa-top path { fill: none; stroke: var(--teja); stroke-width: 3; }
.cenefa-top .cenefa__hilo { stroke: var(--dorado); stroke-width: 1; opacity: .8; }
.cenefa-top .cenefa__bombillo { fill: var(--brasa); filter: drop-shadow(0 0 4px rgba(232, 163, 61, .7)); }
/* Ronda 8 — el equivalente propio de las "chispas de la parrilla" de Capira:
   acá no hay parrilla a la vista en ninguna foto, pero SÍ hay bombillos
   colgados de verdad en el alero (se ven en franja-fachada.webp y en g16), y ya
   son el device gráfico de esta sede. Así que en vez de inventar chispas, las
   luces de la cenefa respiran: cada bombillo con su propio desfase, muy lento y
   sin llegar a apagarse, para que se lea como una guirnalda encendida y no como
   un letrero parpadeando. Solo donde hay bombillos (3 cenefas), nunca en las
   cenefas lisas. Es CSS puro: no agrega canvas ni un archivo JS nuevo. */
@media (prefers-reduced-motion: no-preference) {
  .cenefa-top .cenefa__bombillo { animation: bombilloRespira 4.6s ease-in-out infinite; }
  .cenefa-top .cenefa__bombillo:nth-of-type(2n)  { animation-duration: 5.8s; animation-delay: -1.7s; }
  .cenefa-top .cenefa__bombillo:nth-of-type(3n)  { animation-duration: 6.7s; animation-delay: -3.1s; }
  .cenefa-top .cenefa__bombillo:nth-of-type(5n)  { animation-duration: 5.2s; animation-delay: -.8s; }
}
@keyframes bombilloRespira {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}
.seccion__cabeza { max-width: 720px; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.seccion__intro { color: var(--crema-mute); margin: 0; }

.ornamento { display: block; width: 82px; margin-bottom: .75rem; }
.ornamento svg { width: 82px; height: 15px; }
.ornamento path { fill: none; stroke: var(--brasa); stroke-width: 3; }

/* iconos bordados (motivo de pollera, ver 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); }

/* ═════════════════════════ SOBRE EL RANCHO / AMBIENTE ═══════════════════════
   Ronda 26 (14-sep-2026): layout EDITORIAL. En escritorio la foto grande ocupa
   las columnas 5-12 de una rejilla de 12 y se sale por la derecha hasta el
   borde de la pantalla (el margen negativo = lo que hay entre el contenedor y
   el viewport, o el gutter si la pantalla es más angosta que --ancho); la
   tarjeta de texto (col. 1-7) se monta encima con fondo de madera que se
   funde, y las dos polaroids giradas van debajo a la izquierda. La sección
   lleva overflow hidden para que el sangrado no cree scroll horizontal. */
.sobre { overflow: hidden; }
.sobre__grid { display: grid; gap: clamp(1.4rem, 4vw, 2.6rem); }
.sobre__texto p { color: var(--crema-mute); }
.sobre__foto { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sobre__sello {
  position: absolute; right: 1.2rem; bottom: 1.1rem;
  padding: .3rem .9rem .35rem;
  transform: rotate(-3deg);
  background: var(--dorado); color: var(--negro);
  font-size: 1.15rem; line-height: 1.2;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.sobre__polaroids { display: flex; gap: clamp(.8rem, 3vw, 1.6rem); align-items: flex-start; padding-top: .6rem; }
.polaroid {
  position: relative; margin: 0; flex: 1 1 0; max-width: 250px;
  padding: .55rem .55rem 2.5rem;
  background: var(--hueso);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
  transform: rotate(-3.5deg);
  transition: transform var(--t-lento) var(--ease);
}
.polaroid--b { transform: rotate(2.5deg) translateY(1.4rem); }
.polaroid:hover { transform: rotate(0) scale(1.04); z-index: 1; }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 60%; display: block; }
.polaroid figcaption {
  position: absolute; left: .6rem; right: .6rem; bottom: .55rem;
  color: var(--negro); font-size: 1rem; line-height: 1.2; text-align: center;
}
@media (min-width: 900px) {
  .sobre__grid { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; align-items: start; column-gap: 0; row-gap: 0; }
  .sobre__foto {
    grid-column: 5 / 13; grid-row: 1 / 3;
    margin: 0 calc(-1 * max(var(--gutter), (100vw - var(--ancho)) / 2 + var(--gutter))) 0 0;
    min-height: 100%;
  }
  .sobre__texto {
    grid-column: 1 / 8; grid-row: 1; z-index: 1;
    margin-top: clamp(2.5rem, 6vw, 5rem);
    padding: 2rem 2.6rem 2.2rem 0;
    background: linear-gradient(90deg, var(--ox) 72%, rgba(42, 26, 18, .94));
    box-shadow: 30px 0 70px rgba(42, 26, 18, .6);
  }
  .sobre__polaroids { grid-column: 1 / 6; grid-row: 2; margin-top: 2rem; padding-left: 1rem; }
}

/* chips con icono de rombo de terracota (motivo secundario, brief Fable
   sec.3.4 / sec.7 punto 11) — antes eran texto plano sin jerarquía visual */
.datos { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.datos__item {
  display: flex; align-items: center; gap: .7rem;
  background: var(--tarjeta); border: 1px solid rgba(217, 168, 103, .2);
  border-radius: var(--radio); padding: .7rem 1rem;
}
.datos__item svg { flex: none; width: 18px; height: 18px; }
.datos__item svg path { fill: var(--terracota-piso); stroke: var(--dorado); stroke-width: 1.2; }
.datos__item b { display: block; color: var(--hueso); font-size: .98rem; }
.datos__item span { display: block; color: var(--crema-mute); font-size: .85rem; }
/* Ronda 8: las dos cifras duras cuentan hacia arriba al entrar en pantalla
   (js/site.js). Tabular para que el ancho no baile mientras sube el número, y
   en dorado para que se lean como el dato y no como el resto de la etiqueta. */
.datos__item b .cuenta,
.cuenta {
  color: var(--dorado);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ═══════════════════════════ FRANJA PARRANDA (ancha) ═══════════════════════ */
.franja { position: relative; min-height: min(70svh, 620px); display: grid; place-items: center; }
.franja__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* velo subido arriba (brief Fable sec.7 punto 13: la foto real es de día,
   el cielo claro arriba bajaba el contraste del texto crema) */
.franja__velo { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,16,11,.9) 5%, rgba(23,16,11,.35) 55%); }
.franja__cuerpo { position: relative; z-index: 1; text-align: center; padding-inline: var(--gutter); }
/* --pared en vez de --dorado: el naranja quemado de la pared real de la
   cocina/barra (brief Fable sec.1/sec.7 punto 5), más fiel a la foto de
   fondo de esta franja. */
.franja__pre { color: var(--pared); letter-spacing: .18em; text-transform: uppercase; font-size: .82rem; font-weight: 700; margin-bottom: .8rem; }
.franja__titulo { font-family: var(--marker); color: var(--hueso); font-size: clamp(2rem, 6vw, 3.6rem); max-width: 780px; margin-inline: auto; }
.franja__pie { color: var(--crema); max-width: 560px; margin: 1rem auto 0; }

/* ══════════════════════════ MENÚ — "LA CARTA VIVA" (Ronda 8) ══════════════
   Mismo criterio de lectura que la carta de Capira (pestañas Desayuno/Almuerzo,
   nombre → línea de puntos → precio a la derecha), pero con la paleta y las
   tipografías YA calibradas de ESTA sede: ámbar/brasa del logo real sobre
   madera oscura, y Barlow Condensed en las etiquetas de día y en los chips.
   No se copió ni un hex de Capira. */
.menu__tabs {
  display: flex;
  gap: .5rem;
  border-bottom: 1px solid rgba(217, 168, 103, .25);
  margin-bottom: 1.6rem;
}
.menu__tab {
  padding: .85rem 1.4rem;
  min-height: 52px;
  font-family: var(--sans-cond);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--crema-mute);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  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 ya existía para las escenas del tour; acá solo se generaliza el
   contenedor y se le da hover al chip (antes no tenía, porque los del tour son
   botones que solo cambian de estado). */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.menu .chips { margin-bottom: 2rem; }
.chip { min-height: 44px; text-decoration: none; transition: border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), background-color var(--t-rapido) var(--ease); }
a.chip:hover { border-color: var(--brasa); color: var(--brasa); }
.chip__rombo { width: 12px; height: 12px; flex: none; }
.chip__rombo path { fill: var(--terracota-piso); stroke: var(--dorado); stroke-width: 1.6; }

.menu__grupo { margin-bottom: clamp(2.2rem, 5vw, 3.2rem); scroll-margin-top: 6.5rem; }
.menu__h3 {
  font-family: var(--sans-cond);
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dorado);
  border-bottom: 1px solid rgba(217, 168, 103, .25);
  padding-bottom: .5rem;
  margin-bottom: 1.1rem;
}
.menu__nota { font-style: normal; font-weight: 400; font-size: .8em; letter-spacing: 0; text-transform: none; 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: 76%; }
.carta__nombre em { font-style: normal; color: var(--crema-mute); font-size: .9em; }

/* Etiqueta de día. En esta sede va en UN solo plato: la sopa de pata de los
   domingos, el único día confirmado por los dueños para El Roble. La rotación
   semanal completa que tiene Capira NO se copia acá. */
.carta__dia {
  flex: none;
  align-self: center;
  padding: .1em .55em;
  border: 1px solid var(--dorado);
  border-radius: 999px;
  font-family: var(--sans-cond);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  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(217, 168, 103, .55) 1px, transparent 1.4px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
}
/* Al pasar por la fila, una segunda capa de puntos —esta vez en brasa— se
   DIBUJA de izquierda a derecha hasta el precio. :active y :focus-within cubren
   el táctil y el teclado: en celular el mismo acento se enciende al tocar. */
.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);
}
.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-texto); /* Ronda 27: contraste 4.5+ (Lighthouse) */
  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: .6; margin-right: .1em; }
.carta li:hover .carta__precio,
.carta li:active .carta__precio,
.carta li:focus-within .carta__precio {
  color: var(--dorado);
  transform: scale(1.08);
  text-shadow: 0 0 14px rgba(240, 176, 64, .5);
}

/* El especial de la sede: la sopa de pata de los domingos. Fondo ladrillo con
   el mismo patrón de rombos del piso real que ya usa "Cómo llegar", para que se
   lea como parte del rancho y no como un banner pegado. */
.menu__especial {
  margin-top: 1.6rem;
  padding: clamp(1.2rem, 4vw, 1.8rem);
  border: 1px solid rgba(217, 168, 103, .35);
  border-left: 4px solid var(--brasa);
  border-radius: var(--radio);
  background-color: var(--ladrillo);
  background-image:
    repeating-linear-gradient(45deg, rgba(240, 176, 64, .06) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(-45deg, rgba(240, 176, 64, .06) 0 2px, transparent 2px 30px);
}
.menu__especial .ornamento { margin-bottom: .6rem; }
.menu__especial-kicker {
  font-family: var(--sans-cond);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dorado);
  margin: 0 0 .35em;
}
.menu__especial-titulo {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--hueso);
  margin: 0 0 .45em;
}
.menu__especial-texto { color: var(--crema); max-width: 52ch; margin: 0 0 .9rem; }
.menu__especial-precio {
  margin: 0;
  font-family: var(--sans-cond);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--crema-mute); font-size: .9rem;
}
.menu__especial-precio b {
  font-family: var(--sans);
  letter-spacing: 0;
  color: var(--dorado);
  font-size: 1.25rem;
  margin-left: .35rem;
  font-variant-numeric: tabular-nums;
}

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

/* ═══════════════════ CINTA DE MARCA / MARQUEE (Ronda 8) ═══════════════════
   Franja delgada entre la carta y la ruleta. El bucle sin salto: la pista lleva
   DOS grupos idénticos y se desplaza exactamente -50 %; al terminar, el segundo
   grupo está justo donde arrancó el primero. Por eso el HTML repite el bloque. */
.cinta {
  background: var(--ladrillo);
  border-block: 1px solid rgba(217, 168, 103, .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 46s 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 del brief). */
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1;
  white-space: nowrap;
  padding-block: .25rem;
}
/* el separador es la onda de teja de esta sede, no el zigzag de Capira */
.ornamento--cinta {
  display: inline-block;
  width: 58px;
  margin: 0 clamp(1rem, 3vw, 2.2rem);
  margin-bottom: 0;
  flex: none;
}
.ornamento--cinta svg { width: 58px; height: 11px; }
.cinta .ornamento path { stroke: var(--dorado); stroke-width: 2.6; }

/* ═══════════════════════════════ GALERÍA ═════════════════════════════════ */
/* Ronda 23 (14-sep-2026): cuadrícula PAREJA — todas las celdas 4:3 del mismo
   tamaño, en capítulos con título (.mosaico__cap ocupa la fila completa). Antes
   era un mosaico de 3 tamaños que el dueño sintió "desorganizado". */
/* Ronda 25 (14-sep-2026) · CAPÍTULOS EXPANDIBLES — el "Hover Expand Gallery"
   de 21st.dev rehecho en CSS: cuatro paneles a lo ancho con etiqueta vertical;
   el abierto (.capitulo--activo, que js/estetica.js mueve con el mouse o con
   el toque) absorbe el espacio y muestra su foto a color con su pie. Los demás
   quedan como rieles oscurecidos. Debajo de 640px pasa a acordeón vertical.
   Sin librería: solo transiciona flex-grow (o height en celular). */
.capitulos {
  display: flex;
  gap: .5rem;
  height: clamp(250px, 36vw, 420px);
  margin: 0 0 1.5rem;
}
.capitulo {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radio);
  border: 1px solid rgba(240, 176, 64, .16);
  background: var(--tarjeta);
  color: var(--crema);
  text-decoration: none;
  transition: flex-grow .7s var(--ease);
}
.capitulo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 60%;
  filter: saturate(.3) brightness(.5);
  transform: scale(1.1);
  transition: filter .7s var(--ease), transform .9s var(--ease);
}
.capitulo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 10, 7, .9), rgba(15, 10, 7, 0) 58%);
  pointer-events: none;
}
.capitulo__num {
  position: absolute; top: .9rem; left: 0; right: 0; z-index: 1;
  text-align: center;
  font-family: var(--sans-cond); font-weight: 700; font-size: .78rem; letter-spacing: .22em;
  color: var(--dorado);
}
.capitulo__rail {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--sans-cond); font-weight: 700; font-size: .95rem;
  letter-spacing: .24em; text-transform: uppercase;
  transition: opacity .3s var(--ease);
}
.capitulo__pie {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1;
  display: grid; gap: .15rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .55s var(--ease);
}
.capitulo__pie b { font-family: var(--sans); font-weight: 700; font-size: clamp(1.15rem, 2.3vw, 1.7rem); letter-spacing: -.01em; line-height: 1.1; }
.capitulo__pie span { font-family: var(--sans-cond); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dorado); }
.capitulo--activo, .capitulo:focus-visible { flex-grow: 3.4; }
.capitulo--activo img, .capitulo:focus-visible img { filter: none; transform: none; }
.capitulo--activo .capitulo__rail, .capitulo:focus-visible .capitulo__rail { opacity: 0; }
.capitulo--activo .capitulo__pie, .capitulo:focus-visible .capitulo__pie { opacity: 1; transform: none; transition-delay: .18s; }
.capitulo:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
@media (max-width: 639px) {
  .capitulos { flex-direction: column; height: auto; gap: .45rem; }
  .capitulo, .capitulo--activo, .capitulo:focus-visible { flex: none; height: 58px; transition: height .55s var(--ease); }
  .capitulo--activo, .capitulo:focus-visible { height: 230px; }
  .capitulo__num { top: 50%; left: 1rem; right: auto; transform: translateY(-50%); }
  .capitulo__rail { left: 3.4rem; top: 50%; transform: translateY(-50%); writing-mode: horizontal-tb; }
  .capitulo--activo .capitulo__num, .capitulo:focus-visible .capitulo__num { top: 1rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .capitulo, .capitulo img, .capitulo__pie, .capitulo__rail { transition: none; }
}

.mosaico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
@media (min-width: 640px) { .mosaico { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .mosaico { grid-template-columns: repeat(4, 1fr); gap: .8rem; } }
.mosaico__cap {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .8rem;
  margin: 1.1rem 0 .15rem;
  color: var(--dorado); font-family: var(--sans-cond); font-weight: 700;
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
}
.mosaico__cap:first-child { margin-top: 0; }
.mosaico__cap::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(240, 176, 64, .55), transparent); }
.celda {
  position: relative; overflow: hidden; border-radius: var(--radio); cursor: pointer;
  background: var(--tarjeta); aspect-ratio: 4 / 3;
  border: 1px solid rgba(240, 176, 64, .16);
}
.celda img, .celda video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-medio) var(--ease); }
.celda:hover img, .celda:hover video,
.celda:focus-visible img, .celda:focus-visible video { transform: scale(1.06); }
.celda--ancha { grid-column: span 2; }
/* las fotos verticales (celular) se recortan a 4:3: el plato o la mesa suelen
   estar en la mitad baja del encuadre, así que el recorte se baja un poco */
.celda img[height="2133"], .celda img[height="2648"] { object-position: 50% 62%; }
.celda--viva::before {
  content: "▶"; position: absolute; top: .6rem; left: .6rem; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: .7rem; color: var(--ox); background: var(--dorado); opacity: .9;
}

/* ══════════ Ronda 8 · la galería con más tacto ══════════
   Tres capas al pasar por encima (o al enfocar con teclado): el zoom suave que
   ya existía, 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 va aria-hidden: para el lector de pantalla
   ese mismo texto ya viene 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: .8rem;
  line-height: 1.3;
  font-weight: 600;
  text-align: left;
  color: var(--crema);
  background: linear-gradient(transparent, rgba(15, 10, 7, .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; }

.lightbox { position: fixed; inset: 0; z-index: 800; background: rgba(15, 10, 7, .94); display: grid; place-items: center; padding: 2rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 84vh; border-radius: var(--radio); }
.lightbox__cerrar { position: absolute; top: 1rem; right: 1.2rem; font-size: 2.2rem; color: var(--crema); line-height: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.4rem; color: var(--crema); padding: .5rem 1rem; }
.lightbox__nav--prev { left: .5rem; }
.lightbox__nav--next { right: .5rem; }
.lightbox__contador {
  position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  font-family: var(--sans-cond); font-weight: 700; letter-spacing: .08em;
  color: var(--crema-mute); font-size: .9rem;
}

/* ═══════════════════════════ RULETA DE LA PARRANDA ═══════════════════════
   Mismo mecanismo y mismo cuidado de layout que la sede Capira: el panel va
   en tarjeta (no un botón suelto sobre el fondo) desde el primer intento —
   en Capira eso se corrigió después por una queja del dueño en mobile, acá
   se aplica directo. */
.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; } }

.ruleta__rueda { position: relative; width: min(100%, 340px); aspect-ratio: 1 / 1; margin-inline: auto; }
.ruleta__rueda svg { width: 100%; height: 100%; transform-origin: 50% 50%; filter: drop-shadow(0 8px 26px rgba(15, 10, 7, .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(--fiesta);
  filter: drop-shadow(0 2px 3px rgba(15, 10, 7, .9));
}
/* la rueda ES la pollera vista desde arriba (brief Fable sec.4): gajos
   alternando crema/fiesta, filete punteado dorado tipo trencilla bordada. */
.ruleta__gajo { stroke: var(--dorado); stroke-width: 1.5; stroke-dasharray: 2 2; }
.ruleta__gajo--a { fill: var(--fiesta); }
.ruleta__gajo--b { fill: var(--crema); }
.ruleta__texto { font-family: var(--sans-cond); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.ruleta__texto--a { fill: var(--hueso); }
.ruleta__texto--b { fill: var(--negro); }
.ruleta__eje { fill: var(--teja); stroke: var(--dorado); stroke-width: 2; }
.ruleta__rombo { fill: var(--dorado); }

.ruleta__panel {
  background: var(--tarjeta);
  border: 1px solid rgba(217, 168, 103, .22);
  border-radius: var(--radio);
  padding: clamp(1.2rem, 4vw, 1.8rem);
}
.ruleta__boton { width: 100%; max-width: 320px; display: block; margin-inline: auto; }
@media (min-width: 820px) { .ruleta__boton { margin-inline: 0; } }
.ruleta__boton[disabled], .ruleta__boton[disabled]:hover {
  background: transparent; border: 2px solid rgba(217, 168, 103, .5);
  color: var(--crema-mute); cursor: not-allowed; transform: none;
}
.ruleta__resultado { min-height: 3.4em; margin: 1.1rem 0 .8rem; font-size: 1.05rem; color: var(--crema); }
.ruleta__resultado--gano { color: var(--hueso); font-weight: 600; border-left: 3px solid var(--fiesta); padding-left: .9rem; }
.ruleta__pie { color: var(--crema-mute); font-size: .92rem; margin: 0; }

/* la empollerada junto a la rueda (brief Fable sec.4) */
.ruleta__personaje { position: absolute; right: -6%; bottom: -2%; width: 30%; pointer-events: none; z-index: 1; }
.ruleta__personaje svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(15, 10, 7, .55)); }

.personaje__falda { transform-origin: 50px 69px; transform: rotate(0deg); transition: transform .35s ease; }
.personaje__brazo { transform-origin: 35px 52px; transform: rotate(0deg); transition: transform .35s ease; }
.ruleta__personaje--girando .personaje__falda { animation: faldaVuelta .6s ease-in-out 2; }
.ruleta__personaje--girando .personaje__brazo { animation: brazoFaldeo .6s ease-in-out 2; }
@keyframes faldaVuelta {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
@keyframes brazoFaldeo {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(-28deg); }
}
@media (prefers-reduced-motion: reduce) {
  .personaje__falda, .personaje__brazo,
  .ruleta__personaje--girando .personaje__falda,
  .ruleta__personaje--girando .personaje__brazo {
    animation: none !important; transition: none !important; transform: rotate(0deg) !important;
  }
}
.pendiente {
  margin-top: 1rem; padding: .9rem 1rem;
  border: 1px dashed rgba(217, 168, 103, .4);
  border-radius: var(--radio);
  font-size: .85rem; color: var(--crema-mute);
}
.pendiente b { display: block; color: var(--dorado); margin-bottom: .3em; }

/* ═══════════════════ PROMOCIONES Y EVENTOS (Ronda 10) ══════════════════════
   Mismas clases ya verificadas en Capira (RanchoInteriorano/css/site.css),
   con los tokens de color de esta sede. */
.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(3, 1fr); } }
.promo {
  display: flex; flex-direction: column;
  background: var(--tarjeta);
  border: 1px solid rgba(240, 176, 64, .22);
  border-radius: var(--radio);
  overflow: hidden;
}
.promo__foto { position: relative; }
.promo__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.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.5rem); }
.promo__titulo { color: var(--hueso); font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 0 0 .6rem; }
.promo__cuerpo p { color: var(--crema-mute); margin-bottom: .8rem; }
.promo__lista { margin: 0 0 .9rem; }
.promo__lista li {
  padding: .45rem 0 .45rem 1.3rem;
  border-bottom: 1px solid rgba(246, 228, 200, .08);
  color: var(--crema); position: relative; font-size: .95rem;
}
.promo__lista li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 7px; height: 7px; background: var(--brasa);
}
.promo__pie { font-size: .85rem; margin-bottom: 0 !important; }
.promo--destacado { border-color: rgba(211, 102, 2, .5); }
.promo--destacado .promo__dia { background: var(--brasa); color: var(--ox); }
.promos__evento {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px dashed rgba(240, 176, 64, .35);
  border-radius: var(--radio);
  background: rgba(0, 0, 0, .15);
}
.promos__evento-titulo { color: var(--hueso); font-size: clamp(1.15rem, 2.8vw, 1.4rem); margin: .2rem 0 .6rem; }
.promos__evento p:not(.pendiente):not(.pendiente *) { color: var(--crema-mute); margin: 0; }
.promos__evento .pendiente { margin-top: .9rem; }

/* Ronda 15: glifo de Instagram, mismo tamaño que Capira */
.ico-ig { width: 1.25em; height: 1.25em; flex: none; }

/* Ronda 16: glifo y enlace de WhatsApp, mismo criterio que Capira */
.ico-wa { width: 1.25em; height: 1.25em; flex: none; }
.hero__wa { display: inline-flex; align-items: center; gap: .4rem; }
.hero__wa .ico-wa { color: #25D366; }
.hero__wa:hover .ico-wa { color: var(--brasa); }

/* botón flotante fijo, esquina inferior derecha */
.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; }
}

/* Ronda 15: sección Instagram — mosaico de 6 fotos + botón al perfil real */
.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; }

/* 9b. Preguntas frecuentes (auditoría de lanzamiento, 13-sep-2026) */
.faq__lista { max-width: 780px; margin-inline: auto; display: grid; gap: .7rem; }
.faq__item {
  background: var(--tarjeta);
  border: 1px solid rgba(240, 176, 64, .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); line-height: 1.6; }
.faq__item p a { color: var(--brasa); }

/* 8b. Reseñas reales de Google (Ronda 21, 13-sep-2026) — mismo patrón que
   Capira, sobre la teja de esta sede en vez del ladrillo de la otra. */
.resenas { background: var(--teja); }
.resenas .kicker { color: var(--hueso); }
.resenas .titulo { color: var(--crema); }
.resenas .ornamento path { stroke: var(--hueso); }
.resenas__cta { margin: 1rem 0 0; }
.resenas .boton--borde { color: var(--crema); }
.resenas .boton--borde:hover { color: var(--hueso); }
/* Ronda 25 (14-sep-2026) · MARQUESINA — el "Testimonials Marquee" de 21st.dev
   en CSS: dos filas que corren en direcciones opuestas, se detienen al pasar
   el mouse y se desvanecen en los bordes. js/estetica.js rellena cada fila
   hasta cubrir el ancho y la duplica: por eso el keyframe va a -50% exacto.
   Con prefers-reduced-motion no hay clones y las tarjetas se apilan quietas. */
.resenas__marquesinas { display: grid; gap: 1rem; margin-top: .6rem; }
.marquesina {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquesina__pista { display: flex; width: max-content; animation: marquesina var(--dur, 45s) linear infinite; }
.marquesina--reversa .marquesina__pista { animation-direction: reverse; }
.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }
.marquesina__grupo { display: flex; gap: 1rem; padding-right: 1rem; align-items: stretch; }
.marquesina .cita { width: min(21rem, 78vw); flex: none; }
@keyframes marquesina { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquesina { -webkit-mask-image: none; mask-image: none; }
  .marquesina__pista { animation: none; width: auto; }
  .marquesina__grupo { flex-wrap: wrap; padding-right: 0; }
}
.resenas__dato { margin-top: 1.4rem; text-align: center; border-left: 0; border-top: 3px solid var(--hueso); }
.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.04rem; line-height: 1.45; }
.cita__trad { color: var(--hueso) !important; font-size: .95rem !important; font-style: italic; }
.cita__trad:empty { display: none; }
.cita footer { color: var(--hueso); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.cita footer b { color: var(--crema); font-weight: 700; }
.cita--dato { display: grid; align-content: center; }
.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); }

/* ═══════════ remates de entrega (js/estetica.js, 14-sep-2026) ═══════════ */
/* barra fija de acción en celular: aparece al pasar el hero, reemplaza al
   botón flotante de WhatsApp en pantallas chicas para no duplicarlo */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem;
  padding: .6rem max(.75rem, env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(23, 16, 11, .96); border-top: 1px solid rgba(240, 176, 64, .28);
  transform: translateY(110%); transition: transform var(--t-medio) var(--ease);
}
.barra-movil .boton { min-height: 46px; padding: .55rem .4rem; font-size: .92rem; gap: .35rem; }
.barra-visible:not(.barra-oculta) .barra-movil { transform: translateY(0); }
.barra-visible:not(.barra-oculta) .wa-flotante { opacity: 0; pointer-events: none; }
@media (min-width: 760px) { .barra-movil { display: none; } }
@media (prefers-reduced-motion: reduce) { .barra-movil { transition: none; } }

/* chip encendido por scroll-spy (misma cara que el chip activo del tour) */
.menu .chip.chip--activo { background: var(--brasa); color: var(--ox); border-color: var(--brasa); }
.menu .chip.chip--activo .chip__rombo { fill: var(--ox); }

/* lienzo del confeti de la ruleta */
.confeti { position: fixed; inset: 0; z-index: 900; pointer-events: none; }

/* ═══════════ Ronda 27 (15-sep-2026) · scroll pro ═══════════ */
/* barra de progreso de lectura (js/estetica.js §7) */
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 520; pointer-events: none; }
.progreso__barra {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--brasa), var(--dorado));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
/* la nav se esconde al bajar y vuelve al subir (solo con el menú cerrado) */
.nav { transition: transform .38s var(--ease), background var(--t-medio) var(--ease); }
.nav.nav--oculta { transform: translateY(-100%); }
/* volver arriba: ancla a #inicio, aparece pasada pantalla y media */
.arriba {
  position: fixed; left: 18px; bottom: 24px; z-index: 200;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--negro); background: var(--dorado);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity var(--t-medio) var(--ease), transform var(--t-medio) var(--ease), background var(--t-rapido) var(--ease);
}
.arriba svg { width: 20px; height: 20px; }
.arriba:hover { background: var(--hueso); color: var(--negro); }
.arriba--visible { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 759px) {
  .arriba { bottom: calc(78px + env(safe-area-inset-bottom)); width: 40px; height: 40px; }
  html.barra-oculta .arriba { opacity: 0; pointer-events: none; }
}
/* la foto grande de "Sobre el rancho" se mueve con profundidad (§9): recortar */
.sobre__foto { overflow: hidden; }

/* ═══════════ NOCHE ESPECIAL — tira horizontal (Ronda 27) ═══════════
   Base (celular y sin GSAP): tira nativa con scroll-snap. Con html.flujo y
   ≥900px la pista deja de desplazarse sola, se hace tan ancha como su
   contenido y GSAP la mueve en X mientras la sección está pineada. */
.noche { position: relative; background: var(--negro); overflow: hidden; }
.noche__pin { padding-block: clamp(2.6rem, 6vw, 4.2rem) 2.2rem; }
.noche__cabeza { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.noche__intro { color: var(--crema-mute); max-width: 580px; }
.noche__hint { font-family: var(--sans-cond); color: var(--dorado); letter-spacing: .18em; text-transform: uppercase; font-size: .75rem; margin: .3rem 0 0; }
.noche__hint--esc { display: none; }
.noche__pista {
  display: flex; gap: clamp(.7rem, 2vw, 1.4rem);
  padding: 1.6rem var(--gutter) .4rem;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; will-change: transform;
}
.noche__pista::-webkit-scrollbar { display: none; }
.noche__panel {
  position: relative; flex: none; width: min(82vw, 520px); margin: 0;
  border-radius: var(--radio); overflow: hidden; scroll-snap-align: start;
  background: var(--tarjeta); border: 1px solid rgba(240, 176, 64, .16);
}
.noche__panel img, .noche__panel video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.noche__panel figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.8rem 1rem .8rem; display: flex; gap: .7rem; align-items: baseline;
  background: linear-gradient(transparent, rgba(15, 10, 7, .92));
  color: var(--crema); font-weight: 600; font-size: 1rem;
}
.noche__num { font-family: var(--sans-cond); color: var(--dorado); letter-spacing: .22em; font-size: .78rem; }
@media (min-width: 900px) {
  html.flujo .noche__hint--esc { display: inline; }
  html.flujo .noche__hint--mov { display: none; }
  /* Ronda 28: ya no se pinea (altura natural); la pista se desliza al pasar */
  html.flujo .noche__pista { overflow: visible; scroll-snap-type: none; width: max-content; }
  html.flujo .noche__panel { width: 46vw; max-width: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  .noche__pin { min-height: 0; }
}

/* Ronda 14: recap real de la noche con Jhonathan Chávez, foto + texto */
.promos__evento-grid { display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 700px) { .promos__evento-grid { grid-template-columns: 1fr 1.4fr; gap: 1.8rem; } }
.promos__evento-foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%;
  border-radius: calc(var(--radio) - 6px); display: block;
  border: 1px solid rgba(240, 176, 64, .3);
}
.promos__evento-texto > *:first-child { margin-top: 0; }

/* ══════════════════════ UBICACIÓN (sin dirección exacta todavía) ═══════════
   Fondo con el patrón de rombos del piso real, muy sutil (brief Fable
   sec.6): "es la sección del piso del rancho, literal". */
#ubicacion {
  background-color: var(--ox-2);
  background-image: repeating-linear-gradient(45deg, rgba(156, 95, 69, .08) 0 2px, transparent 2px 34px),
                     repeating-linear-gradient(-45deg, rgba(156, 95, 69, .08) 0 2px, transparent 2px 34px);
}
.ubicacion__caja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.4rem; background: var(--tarjeta); border: 1px solid rgba(217, 168, 103, .22);
  border-radius: var(--radio); padding: clamp(1.4rem, 4vw, 2.2rem);
}
.ubicacion__texto p { color: var(--crema-mute); margin: 0 0 .6rem; max-width: 46ch; }
.ubicacion__texto p:last-child { margin-bottom: 0; }
.ubicacion__nota { font-size: .85rem; opacity: .8; }
/* Ronda 10: horario real, mismo patrón ya verificado en Capira — sobrescribe
   el estilo genérico de párrafo de arriba a propósito (más grande, sin
   max-width, color propio). */
.ubicacion__texto .ubicacion__horario {
  font-size: clamp(1.2rem, 3.2vw, 1.65rem);
  font-weight: 700;
  color: var(--crema);
  line-height: 1.25;
  max-width: none;
  margin: .3rem 0 1rem;
}
.ubicacion__horario b { color: var(--dorado); font-size: .62em; letter-spacing: .12em; text-transform: uppercase; }
.ubicacion__acciones { display: flex; flex-wrap: wrap; gap: .7rem; }

.boton--mapa {
  background: var(--tarjeta); border: 2px solid var(--dorado); color: var(--dorado);
  font-family: var(--sans-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.boton--mapa:hover { border-color: var(--hueso); color: var(--hueso); }
.boton--mapa svg { width: 1.1em; height: 1.1em; flex: none; }
.boton--mapa svg path { fill: currentColor; }

/* ══════════════════════════════ TOUR 360° ════════════════════════════════ */
.tour__caja { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: var(--tarjeta); }
.tour__visor { position: absolute; inset: 0; }
.tour__cargando, .tour__fallo { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--crema-mute); background: rgba(23, 16, 11, .55); }
.tour__cargando[hidden], .tour__fallo[hidden] { display: none; }
.tour__escenas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }

/* ═══════════════════════════ FRITURAS 3D ══════════════════════════════════ */
.frituras3d__caja { max-width: 560px; margin-inline: auto; text-align: center; }
.frituras3d__visor {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid rgba(211, 102, 2, .3);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(211, 102, 2, .22), transparent 62%),
    var(--tarjeta);
}
.frituras3d__visor model-viewer {
  width: 100%; height: 100%; display: block;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--brasa);
  --progress-mask: transparent;
}
.frituras3d__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;
}
.frituras3d__cargando[hidden] { display: none; }
.frituras3d__nota { margin-top: .9rem; color: var(--crema); opacity: .75; font-size: .9rem; }
.tour__escenas[hidden] { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid rgba(217, 168, 103, .35);
  color: var(--crema-mute); font-size: .9rem; font-weight: 600;
  background: rgba(23, 16, 11, .4);
}
.chip--activo { background: var(--brasa); border-color: var(--brasa); color: var(--negro); }

/* ══════════════════════════════ CIERRE + FOOTER ══════════════════════════ */
.cierre { position: relative; min-height: min(76svh, 680px); display: grid; place-items: center; text-align: center; }
.cierre__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cierre__velo { position: absolute; inset: 0; background: linear-gradient(0deg, var(--negro) 0%, rgba(23,16,11,.35) 55%, rgba(23,16,11,.65) 100%); }
.cierre__cuerpo { position: relative; z-index: 1; }
.cierre__frase { font-family: var(--marker); color: var(--hueso); text-shadow: 0 4px 20px rgba(0,0,0,.5); }
.cierre__logo { width: min(70vw, 320px); height: auto; margin: 1.2rem auto 0; filter: drop-shadow(0 6px 16px rgba(0,0,0,.4)); }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; }

.pie { background: var(--negro); padding-block: 2.6rem; }
.pie__caja { text-align: center; }
.pie__marca { color: var(--hueso); font-size: 1.1rem; margin-bottom: .6rem; }
.pie__datos { color: var(--crema-mute); font-size: .92rem; }
.pie__legal { color: var(--crema-mute); font-size: .8rem; margin-top: 1.4rem; opacity: .75; }

/* enlace cruzado a la otra sede — pedido del dueño 30-ago-2026. Lleva foto
   real de la fachada de Capira (misma marca, mismo dueño) para que se sienta
   como una tarjeta con identidad propia y no un bloque de texto suelto. */
.pie__hermana {
  margin: 1.6rem auto 0;
  max-width: 420px;
  overflow: hidden;
  border: 1px solid rgba(217, 168, 103, .3);
  border-radius: var(--radio);
  background: rgba(232, 163, 61, .06);
  text-align: left;
}
.pie__hermana-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pie__hermana-texto { padding: 1.1rem 1.3rem; text-align: center; }
.pie__hermana p { color: var(--crema-mute); font-size: .9rem; margin-bottom: .7rem; }

/* Aviso de sitio en construccion: visible a proposito mientras faltan datos,
   pero sin gritar más que el hero (brief Fable sec.7 punto 8: antes era un
   banner --fiesta a ancho completo compitiendo con la primera impresión). */
@media (prefers-reduced-motion: reduce) {
  .celda:hover img, .celda:hover video { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RONDA 29 (27-oct-2026) · "trabajo brutal de estética": tipografía más
   grande, capítulos numerados, bordes de teja entre secciones, sección de
   videos cortos, carta con foto, microinteracciones y ritmo de scroll.
   Todo lo nuevo de esta ronda vive de aquí para abajo + js/vivo.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. tipografía: titulares más grandes y con más carácter ─────────────── */
.titulo { font-size: clamp(1.75rem, 4.6vw, 3.1rem); letter-spacing: 0; line-height: 1.05; text-wrap: balance; }
.seccion__cabeza { max-width: 760px; }
.seccion__intro { font-size: clamp(1.02rem, 1.4vw, 1.15rem); max-width: 60ch; }
/* el kicker lleva una rayita de brasa delante, como etiqueta de pizarra */
.kicker { display: inline-flex; align-items: center; gap: .6rem; }
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--brasa); flex: none; }
.hero__kicker::before { display: none; }
.hero__kicker { display: block; }
.franja__titulo { font-size: clamp(2.3rem, 7vw, 4.4rem); }
.cierre__frase { font-size: clamp(2rem, 6.5vw, 4.2rem); }

/* ─── 2. capítulos numerados: un numeral fantasma detrás de cada cabecera ──── */
main { counter-reset: capitulo; }
/* isolation: el numeral va con z-index -1; sin un contexto propio se iría
   detrás del fondo de la sección y no se vería */
.seccion__cabeza, .sobre__texto, .noche__cabeza { counter-increment: capitulo; position: relative; isolation: isolate; }
.seccion__cabeza::before, .sobre__texto::before, .noche__cabeza::before {
  content: counter(capitulo, decimal-leading-zero);
  position: absolute; left: -.06em; top: -.42em; z-index: -1;
  font-family: var(--display); font-weight: 400; line-height: 1;
  font-size: clamp(5rem, 13vw, 9.5rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(240, 176, 64, .22);
  transform: translateY(var(--ny, 0px));
  pointer-events: none; user-select: none;
  letter-spacing: -.02em;
}
.sobre__texto::before { left: 0; top: -.95em; }
.noche__cabeza::before { left: var(--gutter); }
.resenas .seccion__cabeza::before { -webkit-text-stroke-color: rgba(246, 228, 200, .22); }
.seccion__cabeza > .kicker, .sobre__texto > .kicker { position: relative; }
@media (min-width: 900px) {
  .seccion__cabeza::before { left: -.35em; top: -.5em; }
}

/* ─── 3. bordes de teja entre secciones ───────────────────────────────────────
   El color de la sección anterior "cuelga" en semicírculos sobre la siguiente,
   como la fila de teja en S del alero real. Cada sección dice de qué color
   son sus tejas con --teja-fondo (el fondo de la que está arriba). */
.borde-teja { position: relative; }
.borde-teja::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 18px; z-index: 3;
  background:
    radial-gradient(circle at 50% 0, var(--teja-fondo, var(--ox)) 0 7.5px, transparent 8.5px) 0 0 / 26px 18px repeat-x,
    radial-gradient(circle at 50% 0, rgba(0, 0, 0, .35) 0 8.5px, transparent 9.5px) 0 2px / 26px 18px repeat-x;
  pointer-events: none;
}
.promos { --teja-fondo: var(--ladrillo); }
.frituras3d { --teja-fondo: var(--ox-2); }
.tour { --teja-fondo: var(--negro); }
.resenas { --teja-fondo: var(--ox-2); }
.instagram { --teja-fondo: var(--teja); }
.faq { background: var(--ox-2); --teja-fondo: var(--ox); }
.videos { --teja-fondo: var(--ox); }
/* la cenefa de teja existente, un pelo más presente */
.cenefa-top { height: 26px; }
.cenefa-top path { stroke-width: 3.4; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }

/* ─── 4. hero: la foto respira antes de que llegue el video, halo tras el logo ─ */
@media (prefers-reduced-motion: no-preference) {
  .hero__fondo img { animation: heroRespira 14s ease-in-out infinite alternate; transform-origin: 50% 40%; }
}
@keyframes heroRespira { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero__h1 { position: relative; }
.hero__h1::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(120vw, 820px); height: 70%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(240, 176, 64, .28), rgba(211, 102, 2, .12) 40%, transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__h1::before { animation: haloRespira 5.5s ease-in-out infinite; }
  .hero__scroll::after { animation: hiloBaja 1.8s ease-in-out infinite; }
}
@keyframes haloRespira { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes hiloBaja { 0% { transform: scaleY(.2); transform-origin: top; opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); transform-origin: top; opacity: 0; } }
.hero__scroll { transition: color var(--t-rapido) var(--ease); }
.hero__scroll:hover { color: var(--brasa); }

/* ─── 5. nav: enlace de la sección a la vista + subrayado que crece ─────────── */
.nav__enlaces a { position: relative; transition: color var(--t-rapido) var(--ease); }
@media (min-width: 760px) {
  .nav__enlaces a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: var(--brasa); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--t-medio) var(--ease);
  }
  .nav__enlaces a:hover::after, .nav__enlaces a.activo::after { transform: scaleX(1); }
}
.nav__enlaces a.activo { color: var(--dorado); }

/* ─── 6. "Mira cómo se vive": videos cortos tipo reel ─────────────────────────
   Tira horizontal con scroll-snap (celular y escritorio), tarjetas 9:16 con
   poster, autoplay mudo cuando la tarjeta está a la vista (js/vivo.js), botón
   de sonido y barra de progreso. En escritorio hay flechas y se puede
   arrastrar con el mouse. */
.videos { background: var(--negro); overflow: hidden; }
.videos__caja { position: relative; }
.videos__pista {
  display: flex; gap: clamp(.8rem, 2vw, 1.3rem);
  padding: .6rem var(--gutter) 1.4rem;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-padding-inline: var(--gutter);
  cursor: grab;
}
.videos__pista::-webkit-scrollbar { display: none; }
.videos__pista.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.videos__pista:focus-visible { outline: 2px solid var(--dorado); outline-offset: -2px; }
@media (min-width: 1200px) {
  .videos__pista { padding-left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); }
}
.reel {
  position: relative; flex: none; margin: 0;
  width: min(68vw, 300px); aspect-ratio: 9 / 16;
  border-radius: 14px; overflow: hidden; scroll-snap-align: start;
  background: var(--tarjeta); border: 1px solid rgba(240, 176, 64, .18);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
  transform: translateY(var(--ry, 0px));
  transition: border-color var(--t-medio) var(--ease), box-shadow var(--t-medio) var(--ease);
}
@media (min-width: 900px) { .reel { width: 290px; } }
.reel:hover, .reel.reel--sonando { border-color: rgba(240, 176, 64, .5); box-shadow: 0 22px 48px -16px rgba(211, 102, 2, .45); }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--negro); }
.reel figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2.6rem .95rem .95rem; display: flex; gap: .6rem; align-items: baseline;
  background: linear-gradient(transparent, rgba(15, 10, 7, .9));
  color: var(--hueso); font-weight: 700; font-size: 1.02rem; line-height: 1.15;
  pointer-events: none;
}
.reel__num { font-family: var(--sans-cond); color: var(--dorado); letter-spacing: .22em; font-size: .75rem; }
.reel__sonido {
  position: absolute; top: .7rem; right: .7rem; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(23, 16, 11, .72); color: var(--hueso);
  border: 1px solid rgba(246, 228, 200, .3);
  backdrop-filter: blur(4px);
  transition: background var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
.reel__sonido:hover { background: var(--brasa); color: var(--negro); transform: scale(1.06); }
.reel__sonido svg { width: 20px; height: 20px; }
.reel__sonido .ico-on { display: none; }
.reel__sonido[aria-pressed="true"] { background: var(--brasa); color: var(--negro); border-color: var(--brasa); }
.reel__sonido[aria-pressed="true"] .ico-on { display: block; }
.reel__sonido[aria-pressed="true"] .ico-off { display: none; }
.reel__play {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(23, 16, 11, .62); color: var(--hueso);
  border: 1px solid rgba(246, 228, 200, .35);
  opacity: 0; pointer-events: none; transition: opacity var(--t-medio) var(--ease);
}
.reel__play svg { width: 26px; height: 26px; margin-left: 3px; }
.reel.reel--pausado .reel__play { opacity: 1; pointer-events: auto; }
.reel__progreso {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px;
  background: rgba(246, 228, 200, .18);
}
.reel__progreso::after {
  content: ""; position: absolute; inset: 0; width: 100%;
  background: linear-gradient(90deg, var(--brasa), var(--dorado));
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
}
.videos__flechas { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .videos__flechas {
    display: flex; gap: .5rem; justify-content: flex-end;
    max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter) .4rem;
  }
}
.videos__flecha {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(240, 176, 64, .45); color: var(--dorado);
  display: grid; place-items: center; background: rgba(23, 16, 11, .5);
  transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
.videos__flecha:hover { background: var(--brasa); color: var(--negro); border-color: var(--brasa); transform: translateY(-2px); }
.videos__flecha svg { width: 20px; height: 20px; }
.videos__cta { margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.videos__nota { color: var(--crema-mute); font-size: .9rem; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .reel { transform: none; }
}

/* ─── 7. la carta con foto: miniatura en la fila y foto grande que sigue al
   cursor en escritorio (solo los platos con foto real de la casa) ──────────── */
.carta li { position: relative; border-radius: 6px; padding-inline: .35rem; margin-inline: -.35rem; transition: background-color var(--t-rapido) var(--ease); }
.carta li:hover, .carta li:focus-within { background: rgba(240, 176, 64, .07); }
.carta li[data-foto] { align-items: center; }
.carta__mini {
  flex: none; width: 46px; height: 46px; border-radius: 8px; object-fit: cover;
  border: 1px solid rgba(240, 176, 64, .35); box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  transition: transform var(--t-medio) var(--ease);
}
.carta li:hover .carta__mini { transform: scale(1.12) rotate(-3deg); }
.carta li[data-foto] .carta__nombre { max-width: 62%; }
/* en celular la fila con miniatura + etiqueta de día no cabe en una línea:
   la etiqueta ("Domingos") baja a su propia línea, debajo del nombre */
@media (max-width: 599px) {
  .carta li[data-foto] { flex-wrap: wrap; }
  .carta li[data-foto] .carta__nombre { max-width: 58%; }
  .carta li[data-foto] .carta__dia { order: 10; flex-basis: 100%; width: max-content; margin-left: calc(46px + .5rem); margin-top: .15rem; }
}
/* el @handle de Instagram es una sola palabra larga: tamaño propio para que
   no se salga de la pantalla en celular con el titular más grande */
.instagram .titulo { font-size: clamp(1.1rem, 5vw, 2.6rem); overflow-wrap: anywhere; }
.carta__flotante {
  position: fixed; left: 0; top: 0; z-index: 650;
  width: 230px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--dorado); box-shadow: 0 24px 50px -14px rgba(0, 0, 0, .85);
  pointer-events: none; opacity: 0;
  transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, -4deg)) scale(.85);
  transition: opacity var(--t-medio) var(--ease), transform var(--t-medio) var(--ease);
  background: var(--tarjeta);
}
.carta__flotante img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carta__flotante.visible { opacity: 1; transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, -4deg)) scale(1); }
.carta__flotante figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem .7rem .5rem;
  background: linear-gradient(transparent, rgba(15, 10, 7, .9));
  color: var(--hueso); font-family: var(--marker); font-size: 1rem; line-height: 1.1;
}
@media (hover: none), (max-width: 899px) { .carta__flotante { display: none; } }

/* ─── 8. microinteracciones varias ───────────────────────────────────────────── */
/* tarjetas de promos: se levantan, la foto hace zoom y se inclinan hacia el mouse */
.promo { transition: transform var(--t-medio) var(--ease), box-shadow var(--t-medio) var(--ease), border-color var(--t-medio) var(--ease); }
.promo__foto { overflow: hidden; }
.promo__foto img { transition: transform .9s var(--ease); }
.promo:hover { transform: translateY(-6px) perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .8); border-color: rgba(240, 176, 64, .5); }
.promo:hover .promo__foto img { transform: scale(1.06); }
.promo__dia { transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); }
.promo:hover .promo__dia { background: var(--brasa); color: var(--negro); }
/* datos de "Sobre el rancho": el rombo gira y la tarjeta se enciende */
.datos__item { transition: transform var(--t-medio) var(--ease), border-color var(--t-medio) var(--ease), background var(--t-medio) var(--ease); }
.datos__item svg { transition: transform var(--t-lento) var(--ease); }
.datos__item:hover { transform: translateY(-3px); border-color: rgba(240, 176, 64, .55); background: #43291B; }
.datos__item:hover svg { transform: rotate(90deg) scale(1.15); }
/* preguntas frecuentes: la respuesta entra deslizando */
.faq__item { transition: border-color var(--t-medio) var(--ease), background var(--t-medio) var(--ease); }
.faq__item:hover { border-color: rgba(240, 176, 64, .5); }
.faq__item[open] { background: #43291B; border-color: rgba(240, 176, 64, .55); }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] > p { animation: faqEntra .42s var(--ease) both; }
}
@keyframes faqEntra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* la foto ampliada entra con un pequeño zoom */
@media (prefers-reduced-motion: no-preference) {
  .lightbox:not([hidden]) img { animation: lbEntra .35s var(--ease) both; }
}
@keyframes lbEntra { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
/* chips de la carta y del tour: toque de relieve */
.chip { transition: border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), background-color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease); }
.chip:hover { transform: translateY(-2px); }
/* la pestaña de la carta activa lleva brillo abajo */
.menu__tab[aria-selected="true"] { text-shadow: 0 0 18px rgba(211, 102, 2, .5); }
/* fotos de Instagram: marco dorado y levantada */
.ig__grid img { transition: transform var(--t-medio) var(--ease), box-shadow var(--t-medio) var(--ease); border: 1px solid transparent; }
.ig__grid img:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .8); border-color: var(--dorado); }
/* botones de mapa con pin que salta */
.boton--mapa svg { transition: transform var(--t-medio) var(--ease); }
.boton--mapa:hover svg { transform: translateY(-3px) scale(1.15); }
/* sello de "Sobre el rancho" se endereza al pasar */
.sobre__sello { transition: transform var(--t-medio) var(--ease); }
.sobre__foto:hover .sobre__sello { transform: rotate(0) scale(1.06); }

/* ─── 9. "Cómo llegar": el rancho desde el aire, de día ──────────────────────── */
.ubicacion__aereo {
  position: relative; margin: 0; flex: 1 1 280px; max-width: 420px;
  border-radius: var(--radio); overflow: hidden;
  border: 1px solid rgba(240, 176, 64, .35); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
  aspect-ratio: 4 / 3; background: var(--negro);
}
.ubicacion__aereo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ubicacion__aereo figcaption {
  position: absolute; left: .8rem; bottom: .7rem; padding: .3rem .7rem;
  background: var(--dorado); color: var(--negro); font-family: var(--marker); font-size: .95rem; line-height: 1.2;
  transform: rotate(-2deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}
.ubicacion__texto { flex: 1 1 300px; }
@media (min-width: 900px) {
  .ubicacion__caja { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .ubicacion__aereo { grid-column: 2; grid-row: 1; max-width: none; justify-self: end; width: 100%; }
  .ubicacion__texto { grid-column: 1; grid-row: 1; }
  .ubicacion__acciones { grid-column: 1 / -1; }
}

/* ─── 10. ritmo de scroll (escritorio, con GSAP): ver js/vivo.js ─────────────── */
.franja__cuerpo { transform-origin: 50% 60%; will-change: transform; }