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

.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;
  background: linear-gradient(180deg, rgba(23, 16, 11, .92), rgba(23, 16, 11, .5) 70%, transparent);
  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; }
}

/* 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. */
.hero__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 55%, transparent 38%, rgba(23,16,11,.42) 100%),
    linear-gradient(180deg, rgba(23,16,11,.62) 0%, rgba(23,16,11,.14) 42%, rgba(23,16,11,.30) 66%, rgba(23,16,11,.88) 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; }
.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) ═══════════
   SOLO en los 4 titulares marcados con data-palabras en el HTML (la franja de
   bienvenida, el título de la carta, el del tour y la frase del cierre). El
   resto del sitio conserva el fade de .revelar — si lo hicieran todos dejaría
   de leerse como un remate. Las palabras las parte js/site.js.
   Con prefers-reduced-motion el JS ni siquiera parte el titular. */
.palabras .pal {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em) rotate(-2deg);
  transition: opacity var(--t-medio) var(--ease),
              transform var(--t-lento) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.palabras.palabras--visible .pal { opacity: 1; 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 ═══════════════════════ */
.sobre__grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 900px) { .sobre__grid { grid-template-columns: 1.05fr .95fr; align-items: center; } }
.sobre__texto p { color: var(--crema-mute); }
/* filas en auto (no 1fr): que sean las dos fotos de la derecha (4/5, altura
   intrínseca) las que definan la altura de cada fila, y la foto alta de la
   izquierda (sin aspect-ratio propio) se estire con height:100% a ocupar
   exactamente esas dos filas + el gap — así no queda corta ni larga (brief
   Fable sec.7 punto 14: antes el aspect-ratio 4/9 fijo no cuadraba con la
   suma real de las dos columnas de la derecha). */
.sobre__collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.sobre__collage img { border-radius: var(--radio); width: 100%; height: 100%; object-fit: cover; display: block; }
.sobre__collage picture:first-child { grid-row: span 2; }
.sobre__collage picture:not(:first-child) img { aspect-ratio: 4 / 5; }

/* 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);
  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 ═════════════════════════════════ */
.mosaico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 130px;
  gap: .5rem;
}
@media (min-width: 700px) { .mosaico { grid-auto-rows: 160px; } }
.celda { position: relative; overflow: hidden; border-radius: var(--radio); cursor: pointer; background: var(--tarjeta); }
.celda img, .celda video { width: 100%; height: 100%; object-fit: cover; 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--alta { grid-row: span 2; }
.celda--ancha { grid-column: span 2; }

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

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