@charset "UTF-8";
/* =============================================================
   JALEO GASTROBAR — Cádiz
   Hoja de estilos única. Móvil primero.

   Índice
   1. Tokens
   2. Reset y base
   3. Utilidades
   4. Tipografía
   5. Componentes (botones, patrón, enlaces)
   6. Navegación
   7. Hero con vídeo
   8. Cinta
   9. La casa
  10. El nombre
  11. Carta
  12. Horario
  13. Contacto
  13b. El local en 3D
  14. Pie
  15. Barra fija de móvil
  15b. Aviso de reserva
  16. Efectos y animaciones
  17. Reducción de movimiento
   ============================================================= */


/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Paleta de marca */
  --corinto:        #841814;
  --corinto-claro:  #9E3A32;
  --corinto-hondo:  #5E100D;
  --crema:          #F8F3E6;
  --crema-puro:     #FBF8F1;
  --rosa:           #E6C8C2;
  --tinta:          #26211F;
  --gris:           #60423C;
  --kraft:          #C6B69E;
  --dorado:         #AE902A;   /* solo el filete del antetítulo */

  /* Derivados de uso interno */
  --kraft-fondo:    #DED2BC;               /* kraft aclarado: fondo de la carta */
  --linea-tinta:    rgba(38, 33, 31, .14);
  --linea-kraft:    rgba(96, 66, 60, .30);
  --linea-crema:    rgba(248, 243, 230, .22);

  /* Tipografías */
  --display: "Archivo", "Archivo Black", Impact, "Arial Narrow Bold", sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Curvas y duraciones */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, .46, .45, .94);
  --dur-rapida: 150ms;
  --dur-base:   260ms;
  --dur-lenta:  480ms;

  /* Medidas */
  --nav-h:      74px;
  --nav-h-min:  58px;
  --gutter:     clamp(1.25rem, 5vw, 3rem);
  --ancho:      1180px;
  --seccion-y:  clamp(4.5rem, 11vw, 9rem);
  --barra-h:    0px;                        /* lo sube la barra fija en móvil */
  --cinta-h:    clamp(52px, 6.5vh, 74px);   /* fija, para poder restarla al hero */

  /* Escala tipográfica */
  --t-xs:   .75rem;
  --t-sm:   .875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   clamp(1.375rem, 1rem + 1.6vw, 1.75rem);
  --t-2xl:  clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  --t-3xl:  clamp(2.75rem, 1.4rem + 6vw, 5.5rem);
  --t-4xl:  clamp(3.25rem, 1.2rem + 9.5vw, 7.5rem);

  /* Radios y sombras: una sola escalera, una sola fuente de luz */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --s-1: 0 1px 2px rgba(38, 33, 31, .07);
  --s-2: 0 6px 18px rgba(38, 33, 31, .10);
  --s-3: 0 22px 50px rgba(38, 33, 31, .18);
}


/* =============================================================
   2. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Los anclajes dejan hueco para la barra superior fija. */
[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

body {
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.62;
  /* clip y no hidden: hidden rompería position:sticky de la barra */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-abierto { overflow: hidden; }

img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; }

input, button, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--corinto); color: var(--crema); }


/* =============================================================
   3. Utilidades
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; left: 1rem; top: -100%;
  z-index: 200;
  background: var(--tinta); color: var(--crema);
  padding: .75rem 1.1rem; border-radius: var(--r-md);
  font-weight: 600; text-decoration: none;
  transition: top var(--dur-rapida) var(--ease-out);
}
.skip-link:focus-visible { top: 1rem; }


/* =============================================================
   4. Tipografía
   ============================================================= */
.h2, .hero-title, .cinta b {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 84;
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h2 { font-size: var(--t-2xl); }

.kicker {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--corinto);
}
.kicker::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  flex: none;
}

.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head .h2 { margin-top: .9rem; }
.sec-lead {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: var(--t-lg);
  color: var(--gris);
}

.prosa p { max-width: 54ch; }
.prosa p + p { margin-top: 1.15rem; }


/* =============================================================
   5. Componentes
   ============================================================= */

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .9rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-out),
              background var(--dur-rapida) var(--ease-out),
              color var(--dur-rapida) var(--ease-out),
              border-color var(--dur-rapida) var(--ease-out),
              box-shadow var(--dur-rapida) var(--ease-out);
}
.btn-sm { min-height: 42px; padding: .5rem 1.15rem; font-size: var(--t-xs); }

/* El foco general usa currentColor, que funciona en casi todo menos aquí:
   el botón principal lleva texto crema, así que sobre el fondo crema de la
   página el aro salía crema sobre crema, es decir, invisible para quien
   navega con el tabulador. Y no vale con fijar un color: el mismo botón
   aparece sobre el vídeo oscuro del hero y sobre la crema del pie.
   La solución son dos aros concéntricos de colores opuestos: siempre hay
   uno de los dos que contrasta, sea cual sea el fondo. */
.btn:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--crema-puro);
}

.btn-primary { background: var(--corinto); color: var(--crema); border-color: var(--corinto); }
.btn-primary:hover { background: var(--corinto-claro); border-color: var(--corinto-claro); transform: translateY(-2px); box-shadow: var(--s-2); }

.btn-ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn-ghost:hover { background: var(--crema); color: var(--corinto); border-color: var(--crema); transform: translateY(-2px); }

/* El hundido al pulsar es lo que hace que un botón se sienta físico. */
.btn:active { transform: translateY(0) scale(.98); transition-duration: 60ms; }

/* --- Enlace con flecha --- */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--corinto);
  text-decoration: none;
  min-height: 44px;
}
.enlace-flecha::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-out);
}
.enlace-flecha:hover::after { transform: translateX(6px); }

/* --- Patrón de fondo para las bandas corinto --- */
.patron {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(248, 243, 230, .05) 0 2px,
    transparent 2px 11px
  );
}


/* =============================================================
   6. Navegación
   ============================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--crema);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--nav-h);
  transition: min-height var(--dur-base) var(--ease-out);
}

.nav-logo {
  flex: none;
  display: block;
  width: 108px;
  margin-right: auto;
  transition: width var(--dur-base) var(--ease-out);
}
.nav-logo svg { width: 100%; height: auto; }

.nav-links { display: none; }

/* Estado compacto: al bajar, fondo crema y texto tinta. */
.nav.is-compacta {
  background: rgba(248, 243, 230, .94);
  color: var(--tinta);
  box-shadow: 0 1px 0 var(--linea-tinta), var(--s-1);
}
@supports (backdrop-filter: blur(10px)) {
  .nav.is-compacta { background: rgba(248, 243, 230, .82); backdrop-filter: blur(12px) saturate(1.2); }
}
.nav.is-compacta .nav-inner { min-height: var(--nav-h-min); }
.nav.is-compacta .nav-logo { width: 92px; }

/* --- Botón hamburguesa --- */
.burger {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.burger-box {
  position: relative;
  display: block;
  width: 24px; height: 14px;
}
.burger-box span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-rapida) var(--ease-out);
}
.burger-box span:first-child { top: 0; }
.burger-box span:last-child  { bottom: 0; }

[aria-expanded="true"] .burger-box span:first-child { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .burger-box span:last-child  { transform: translateY(-6px) rotate(-45deg); }

/* Fondo de marca: el logotipo repetido.
   La clave para que parezca un monograma y no una marca de agua es el
   tamaño: el logotipo va pequeño (64 px de ancho) y con paso corto, en
   filas desplazadas media pieza. En dorado y a baja opacidad, para que
   sea textura y no compita con los enlaces.
   Es un SVG en línea: ninguna petición extra y nítido a cualquier
   densidad de pantalla. */
.patron-logo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='96' viewBox='0 0 128 96'%3E%3Cdefs%3E%3Cg id='w' fill='%23C9A227'%3E%3Cpath d='M38 0h24v70c0 18-13 30-31 30S0 88 0 70V58h24v12c0 6 3 8 7 8s7-2 7-8Z'/%3E%3Cpath fill-rule='evenodd' d='M89 0h20l21 100h-25l-3.5-20h-5L93 100H68Zm10 24 5 40H94Z'/%3E%3Cpath d='M136 0h24v76h34v24h-58Z'/%3E%3Cpath d='M258 0h-58v22h34v17h-26v22h26v17h-34v22h58Z'/%3E%3Cpath fill-rule='evenodd' d='M290 0h10a26 26 0 0 1 26 26v48a26 26 0 0 1-26 26h-10a26 26 0 0 1-26-26V26A26 26 0 0 1 290 0Zm5 24a7 7 0 0 1 7 7v38a7 7 0 0 1-7 7 7 7 0 0 1-7-7V31a7 7 0 0 1 7-7Z'/%3E%3C/g%3E%3C/defs%3E%3Cg opacity='.15'%3E%3Cuse href='%23w' transform='translate(8 20) scale(0.19632)'/%3E%3Cuse href='%23w' transform='translate(72 68) scale(0.19632)'/%3E%3Cuse href='%23w' transform='translate(-56 68) scale(0.19632)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px 96px;
  background-repeat: repeat;
}

/* --- Panel móvil ---
   Se despliega desde la barra y mide lo que mide su contenido: no se
   come la pantalla. El resto de la página se oscurece por detrás. */
.menu-movil {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: -1;
  padding: calc(var(--nav-h) + .25rem) var(--gutter) 1.5rem;
  background: var(--corinto);
  color: var(--crema);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--s-3);
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.menu-movil.is-abierto {
  transform: none;
  visibility: visible;
}
.menu-movil .patron-logo { z-index: -1; }

/* La página de detrás se atenúa. Va en el body y no dentro del panel:
   un elemento fijo dentro de algo transformado se mueve con él. */
body.menu-abierto::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 10, 9, .55);
  animation: entrar var(--dur-base) var(--ease-out) both;
}

.menu-nav { display: flex; flex-direction: column; }
.menu-nav a {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding-block: .85rem;
  border-top: 1px solid var(--linea-crema);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
}
.menu-nav a:hover,
.menu-nav a:focus-visible { color: var(--rosa); padding-left: .4rem; }

/* El número es guía visual, no contenido: el lector de pantalla ya
   anuncia la lista de enlaces. */
.menu-nav i {
  flex: none;
  width: 2ch;
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--rosa);
  opacity: .75;
}
.menu-nav span {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 84;
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.menu-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea-crema);
}
.menu-dir {
  font-size: var(--t-xs);
  line-height: 1.5;
  color: rgba(248, 243, 230, .7);
}
.menu-ig {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--rosa);
}
.menu-ig:hover { color: var(--crema); }

/* Los enlaces entran escalonados al desplegarse. */
.menu-movil.is-abierto .menu-nav a { animation: entrar .4s var(--ease-out) both; }
.menu-movil.is-abierto .menu-nav a:nth-child(1) { animation-delay: .08s; }
.menu-movil.is-abierto .menu-nav a:nth-child(2) { animation-delay: .13s; }
.menu-movil.is-abierto .menu-nav a:nth-child(3) { animation-delay: .18s; }
.menu-movil.is-abierto .menu-nav a:nth-child(4) { animation-delay: .23s; }
.menu-movil.is-abierto .menu-pie { animation: entrar .4s var(--ease-out) .28s both; }

/* Cuando la barra ya tiene fondo, el panel abierto no debe verse
   por debajo del logo. */
.nav:has(.menu-movil.is-abierto) { color: var(--crema); background: transparent; box-shadow: none; }


/* =============================================================
   7. Hero con vídeo
   ============================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* Menos el alto de la cinta: así hero + cinta llenan justo la
     pantalla y la cinta se ve nada más abrir, sin scrollear. */
  min-height: calc(100svh - var(--cinta-h));
  padding: calc(var(--nav-h) + 2rem) var(--gutter) clamp(2rem, 6vw, 3.5rem);
  background: var(--corinto);
  color: var(--crema);
  overflow: hidden;
}

/* Móvil: el vídeo es el fondo, a sangre. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* El cartel va aquí, de fondo: mientras el vídeo no está listo hace de
   foto fija, y al estar en CSS cada tamaño de pantalla carga el suyo. */
.hero-video {
  background: var(--corinto) url("assets/video/risotto-poster.jpg") center 46% / cover no-repeat;
}
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(30, 12, 10, .74) 0%,
      rgba(30, 12, 10, .28) 26%,
      rgba(30, 12, 10, .42) 55%,
      rgba(94, 16, 13, .93) 100%);
}

.hero-inner {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
}

.kicker-hero { color: var(--rosa); }
.kicker-hero::before { background: var(--rosa); }

/* Marca de abierto / cerrado */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem;
  border: 1px solid var(--linea-crema);
  border-radius: 999px;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--crema);
}
.estado::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rosa);
}
.estado.is-abierto::before {
  background: #7BD389;
  box-shadow: 0 0 0 0 rgba(123, 211, 137, .7);
  animation: latido 2.4s var(--ease-soft) infinite;
}

.hero-title {
  margin-top: 1.4rem;
  font-size: var(--t-4xl);
  letter-spacing: -.035em;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line-in { display: block; }
.hero-title .line-acento {
  color: transparent;
  -webkit-text-stroke: 2px var(--crema);
  paint-order: stroke fill;
}

.hero-sub {
  margin-top: 1.5rem;
  max-width: 34ch;
  font-size: var(--t-lg);
  color: rgba(248, 243, 230, .9);
}

/* La E volteada del logo. Es solo un giro visual: para un lector de
   pantalla y para Google la palabra sigue siendo "jaleo". */
.e-vuelta {
  display: inline-block;
  transform: scaleX(-1);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.hero-scroll { display: none; }


/* =============================================================
   8. Cinta
   ============================================================= */
.cinta {
  display: flex;
  align-items: center;
  /* Alto fijo y conocido: es lo que permite restárselo al hero para
     que la cinta asome sin tener que hacer scroll. */
  height: var(--cinta-h);
  overflow: hidden;
  background: var(--corinto-hondo);
  color: var(--crema);
  border-block: 1px solid rgba(248, 243, 230, .16);
}
.cinta-pista {
  display: flex;
  width: max-content;
  animation: cinta 42s linear infinite;
}
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-grupo {
  display: flex;
  align-items: center;
  flex: none;
}
.cinta b {
  font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  padding-inline: .8rem;
  white-space: nowrap;
}
.cinta i {
  font-style: normal;
  color: var(--rosa);
  opacity: .7;
}


/* =============================================================
    9. La casa
   ============================================================= */
.casa { padding-block: var(--seccion-y); }

.casa-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.casa-txt .h2 { margin-block: .9rem 1.75rem; }

/* Mosaico de la columna derecha: todo el material en cuadrados del
   mismo tamaño. Ninguna pieza manda sobre las demás, y así se pueden
   añadir o quitar recursos sin rehacer la composición. */
.casa-mosaico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.5rem, 1.4vw, .85rem);
}
.mos {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--kraft-fondo);
}
.mos img,
.mos video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-out);
}
.mos:hover img,
.mos:hover video { transform: scale(1.05); }


/* =============================================================
   10. El porqué de la E
   Sección tipográfica: sin fotos, sin iconos, sin sombras. Es una
   pausa dentro del scroll, así que respira mucho arriba y abajo.
   ============================================================= */
.porque {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 14vw, 11rem);
  background: var(--corinto);
  color: var(--crema);
}
.porque .patron { z-index: -1; }

.porque-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- Antetítulo ---
   Más largo que un antetítulo corriente, así que el tracking baja a
   .2em para que no se coma el ancho en móvil. Si cae a dos líneas, el
   filete se mantiene alineado con la primera. */
.porque-ante {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  max-width: 100%;
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 92;
  font-size: var(--t-xs);
  letter-spacing: .2em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: left;
}
.porque-ante::before {
  content: "";
  flex: none;
  width: 32px; height: 2px;
  background: var(--dorado);
  /* Alineado con la primera línea del texto, no con su centro. */
  transform: translateY(-.35em);
}

/* --- La pregunta ---
   Es el h2 de la sección. Se lee como una pregunta lanzada en voz
   alta: sin destacados, sin subrayados, sin otra tinta. */
.porque-pregunta {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 900px;
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 84;
  font-size: clamp(30px, 5.2vw, 62px);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-transform: uppercase;
  /* Reparte las líneas para que ninguna quede con una palabra suelta. */
  text-wrap: balance;
}

/* --- La palabra ---
   perspective en el contenedor para que el giro de la E sea en 3D.
   El letter-spacing va aquí y se compensa el sobrante del final para
   que la palabra quede centrada de verdad. */
.jaleo {
  --sep: .06em;
  /* La E tiene los flancos asimétricos: 16,8 px a la izquierda contra
     9,4 a la derecha al cuerpo de referencia. Al espejarla, esos 7,4
     se pasan de lado, el hueco L–E se cierra a 26,5 y el E–O se abre a
     39,6. Este desplazamiento los iguala a 33,1 y deja las cuatro
     separaciones en 31,1–33,1. Se calcula sobre el estado final, con
     la E ya girada, que es como se ve casi todo el tiempo. */
  --giro-e: .030em;

  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  perspective: 900px;
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 84;
  font-size: clamp(72px, 17vw, 240px);
  line-height: .85;
  letter-spacing: var(--sep);
  margin-right: calc(var(--sep) * -1);   /* el hueco que sobra tras la O */
  text-transform: uppercase;
  color: var(--crema);
  /* Sin kerning ni ligaduras: es lo que pegaba la L a la E. */
  font-kerning: none;
  font-variant-ligatures: none;
}
.jl {
  display: inline-block;
  transform-style: preserve-3d;
}

/* Estado de reposo, y también el de por defecto: sin JS o con
   movimiento reducido, la E ya está girada y no pasa nada más. */
.jl-e { transform: translateX(var(--giro-e)) rotateY(180deg); }

/* --- La respuesta --- */
.porque-respuesta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 620px;
  font-size: var(--t-lg);
  line-height: 1.6;
  opacity: .85;
}


/* =============================================================
   10b. El porqué — animación de la E
   Manda una regla sobre todas: la E descansa siempre girada, como en
   el logo. El giro es un gesto puntual, nunca un estado.
   El estado inicial solo se pinta cuando el JS marca la sección, así
   que sin JS se ve directamente el estado final.
   ============================================================= */
.porque.is-animable .jl-e {
  transform: translateX(var(--giro-e)) rotateY(0deg);
  transition: transform .55s cubic-bezier(.68, -.35, .27, 1.35);
}
/* Entrada: una sola vez, de recta a girada. */
.porque.is-animable.is-entrada .jl-e {
  transform: translateX(var(--giro-e)) rotateY(180deg);
}

/* Bucle: vuelta entera cada 7 s. Al ser 360º completos termina otra
   vez en la posición del logo, así que el reinicio es invisible y la E
   nunca reposa del revés. El giro ocupa 550 ms —el 7,85 % del ciclo— y
   el resto está quieta: esa pausa larga es lo que lo convierte en un
   gesto y no en un parpadeo de banner. */
@keyframes giroE {
  0% {
    transform: translateX(var(--giro-e)) rotateY(180deg);
    animation-timing-function: cubic-bezier(.68, -.35, .27, 1.35);
  }
  7.85% { transform: translateX(var(--giro-e)) rotateY(540deg); }
  100%  { transform: translateX(var(--giro-e)) rotateY(540deg); }
}
.porque.is-animable.is-bucle .jl-e {
  transition: none;
  animation: giroE 7s linear infinite;
}
/* Fuera de pantalla no se anima nada. */
.porque.is-animable.is-bucle.is-fuera .jl-e { animation-play-state: paused; }


/* =============================================================
   11. Carta
   ============================================================= */
.carta {
  position: relative;
  isolation: isolate;
  padding-block: var(--seccion-y);
  background: var(--kraft-fondo);
  color: var(--tinta);
}

/* Grano de papel de estraza. */
.carta-grano {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* --- La tarjeta ---
   Reproduce la carta impresa del bar: marco negro grueso, tipografía
   monoespaciada en versales y los alérgenos entre paréntesis.
   La mono es la del sistema: se ve como una máquina de escribir en
   todas las plataformas y no cuesta ninguna descarga. */
.menu {
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Roboto Mono", "DejaVu Sans Mono", monospace;
  --tinta-menu: #14110F;

  background: #FCFAF4;
  color: var(--tinta-menu);
  border: clamp(9px, 1.1vw, 15px) solid var(--tinta-menu);
  padding: clamp(1.4rem, 4vw, 3.25rem);
  font-family: var(--mono);
  box-shadow: var(--s-3);
}

.menu-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.menu-tit {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 5.5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.menu-logo {
  flex: none;
  display: block;
  width: clamp(96px, 21vw, 200px);
  color: var(--tinta-menu);
}
.menu-logo svg { width: 100%; height: auto; }

.menu-cols {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.menu-bloque + .menu-bloque { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* El subrayado ondulado de la carta física, dibujado con un SVG
   que se repite: escala sin pixelarse y no cuesta una petición. */
.menu-h {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(1.1rem, 3vw, 1.55rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 1.15rem;
  padding-bottom: .6rem;
  padding-right: .6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='7' viewBox='0 0 18 7'%3E%3Cpath d='M0 4.2 Q 4.5 0.6 9 4.2 T 18 4.2' fill='none' stroke='%2314110F' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 18px 7px;
}

.menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .9rem;
  padding-block: .32rem;
  font-size: clamp(.78rem, 1.75vw, .9rem);
  line-height: 1.5;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.mn { min-width: 0; }
.ma { white-space: nowrap; }
.mp {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* En la carta del bar la denominación del vino va en la línea de abajo. */
.menu-lista-vinos li { padding-block: .45rem; }
.mdo { display: block; }

.menu-aviso {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  font-size: clamp(.72rem, 1.6vw, .82rem);
  line-height: 1.7;
  letter-spacing: .04em;
  text-transform: uppercase;
  max-width: 42ch;
}

/* El aviso de IVA es un requisito legal, no un adorno: va discreto pero
   legible, sin bajar del contraste mínimo. */
.menu-iva {
  margin-top: .85rem;
  font-size: clamp(.68rem, 1.5vw, .78rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}

/* --- Leyenda de alérgenos --- */
.menu-alerg { margin-top: clamp(1.5rem, 3vw, 2rem); }
.alerg-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: .55rem .8rem;
}
.alerg-lista li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.alerg-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--corinto);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Colores de la carta física, apagados para que convivan con el corinto. */
.alerg-n[data-a="1"]  { background: #B4732C; }
.alerg-n[data-a="2"]  { background: #2E7CA6; }
.alerg-n[data-a="3"]  { background: #C8892E; }
.alerg-n[data-a="4"]  { background: #24405E; }
.alerg-n[data-a="5"]  { background: #9C5A2B; }
.alerg-n[data-a="6"]  { background: #4C7A3A; }
.alerg-n[data-a="7"]  { background: #6B4426; }
.alerg-n[data-a="8"]  { background: #8C3B2A; }
.alerg-n[data-a="9"]  { background: #5C8A45; }
.alerg-n[data-a="10"] { background: #C08A2E; }
.alerg-n[data-a="11"] { background: #8A7038; }
.alerg-n[data-a="12"] { background: #3E8FA3; }
.alerg-n[data-a="13"] { background: #C9A227; color: #14110F; }
.alerg-n[data-a="14"] { background: #7B3550; }


/* =============================================================
   12. Horario
   Vive dentro de Contacto, sobre fondo claro. Se reserva llamando,
   así que el horario es la información que más se consulta aquí.
   ============================================================= */
.horario-lista { margin: .35rem 0 0; }
.horario-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .15rem 1rem;
  padding-block: .5rem;
  border-top: 1px solid var(--linea-tinta);
  font-size: var(--t-sm);
}
.horario-fila:first-child { border-top: 0; padding-top: 0; }
.horario-fila dt { font-weight: 600; }
.horario-fila dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--gris);
}
.horario-fila.is-hoy {
  margin-inline: -.6rem;
  padding-inline: .6rem;
  border-radius: var(--r-sm);
  background: rgba(132, 24, 20, .07);
}
.horario-fila.is-hoy dt::after {
  content: "hoy";
  margin-left: .5rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--corinto);
  color: var(--crema);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: 2px;
}
/* Dentro de la lista de datos el horario no repite el estilo grande. */
.dato dd .horario-lista dt,
.dato dd .horario-lista dd { font-size: var(--t-sm); }


/* =============================================================
   13. Contacto
  13b. El local en 3D
   ============================================================= */
/* La tira de fotos del local ya no está, así que la sección necesita
   su propio aire por arriba. */
.contacto {
  padding-block: var(--seccion-y);
  background: var(--crema-puro);
}

.contacto-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.contacto-info .h2 { margin-block: .9rem 2rem; }

.datos { margin: 0; }
.dato {
  padding-block: 1.1rem;
  border-top: 1px solid var(--linea-tinta);
}
.dato dt {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--corinto);
  margin-bottom: .35rem;
}
.dato dd { margin: 0; font-size: var(--t-lg); }
.dato > dd > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.dato a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease-out);
}
.dato a:hover { background-size: 100% 1px; }

.contacto-mapa {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--linea-tinta);
  min-height: 320px;
}
.contacto-mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  filter: grayscale(.35) contrast(1.05);
}

/* Estado previo: la dirección y el botón, sin conectar con Google. */
.mapa-aviso {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  min-height: 320px;
  height: 100%;
  padding: var(--gutter);
  text-align: center;
  background: var(--crema);
}
.mapa-dir {
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--tinta);
}
.mapa-nota {
  max-width: 34ch;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--gris);
}
.contacto-mapa.is-cargado .mapa-aviso { display: none; }


/* =============================================================
   13b. El local en 3D — bloque dentro de La casa
   ============================================================= */
.local { margin-top: var(--seccion-y); }

.local-cab { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.local-h {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 84;
  font-size: var(--t-2xl);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-block: .9rem 0;
}
.local-cab .sec-lead { margin-top: .9rem; }

.visor {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--corinto);
  aspect-ratio: 4 / 3;
  box-shadow: var(--s-2);
  isolation: isolate;
}
.visor .patron-logo { z-index: 0; }

/* Mientras baja el modelo se ve el monograma y este aviso. */
.visor-cargando {
  position: absolute;
  inset: auto 0 1.25rem 0;
  z-index: 1;
  text-align: center;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(248, 243, 230, .8);
}
.visor.is-cargado .visor-cargando { display: none; }

/* Solo aparece si no conviene descargar solo: datos limitados o
   conexión lenta. Entonces manda el visitante. */
.visor-capa {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .9rem;
  padding: var(--gutter);
  text-align: center;
}
.visor-capa[hidden] { display: none; }
.visor-peso {
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(248, 243, 230, .8);
}

.visor model-viewer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  background: transparent;
  --poster-color: transparent;
  opacity: 0;
  transition: opacity var(--dur-lenta) var(--ease-out);
}
.visor.is-cargado model-viewer { opacity: 1; }

.visor-barra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  height: 4px;
  background: rgba(248, 243, 230, .2);
}
.visor-barra span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--crema);
  transition: width 160ms linear;
}
.visor.is-cargado .visor-barra { display: none; }

@media (min-width: 48em) {
  .visor { aspect-ratio: 16 / 9; }
}


/* =============================================================
   14. Pie
   ============================================================= */
.pie {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  /* Deja hueco a la barra fija de móvil para no tapar los legales. */
  padding-bottom: calc(2rem + var(--barra-h));
  background: var(--tinta);
  color: var(--crema);
}
.pie .patron { z-index: -1; opacity: .35; }

.pie-grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linea-crema);
}
.pie-logo { display: block; width: 132px; color: var(--crema); }
.pie-logo svg { width: 100%; height: auto; }
.pie-dir { margin-top: 1rem; font-size: var(--t-sm); color: rgba(248, 243, 230, .7); }

.pie-nav, .pie-extra { display: flex; flex-direction: column; gap: .15rem; }
.pie-nav a, .pie-extra a {
  display: flex;
  align-items: center;
  /* 44 px de alto: es el mínimo para tocar con el dedo sin fallar. */
  min-height: 44px;
  text-decoration: none;
  font-size: var(--t-sm);
  letter-spacing: .04em;
  color: rgba(248, 243, 230, .8);
  transition: color var(--dur-rapida) var(--ease-out);
  width: fit-content;
}
.pie-nav a:hover, .pie-extra a:hover { color: var(--crema); }

.pie-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-top: 1.75rem;
  font-size: var(--t-xs);
  color: rgba(248, 243, 230, .6);
}
.pie-legal nav { display: flex; gap: 1.25rem; }
.pie-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.pie-legal a:hover { color: var(--crema); }


/* =============================================================
   15. Barra fija de móvil
  15b. Aviso de reserva
   ============================================================= */
.barra-movil {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: grid;
  gap: .5rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(248, 243, 230, .95);
  border-top: 1px solid var(--linea-tinta);
  transform: translateY(105%);
  transition: transform var(--dur-base) var(--ease-out);
}
@supports (backdrop-filter: blur(10px)) {
  .barra-movil { background: rgba(248, 243, 230, .86); backdrop-filter: blur(14px) saturate(1.2); }
}
.barra-movil.is-visible { transform: none; }
/* Se aparta mientras se desplaza la página y vuelve al parar. */
.barra-movil.is-visible.is-oculta { transform: translateY(105%); }

.barra-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 50px;
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-rapida) var(--ease-out);
}
.barra-btn:active { transform: scale(.97); }
.barra-tel { background: var(--corinto); color: var(--crema); }


/* =============================================================
   15b. Aviso de reserva
   <dialog> nativo: el atrapado de foco, la tecla Escape y la capa
   superior vienen de serie, sin JavaScript que los imite mal.
   ============================================================= */
.reserva {
  width: min(30rem, calc(100vw - 2rem));
  /* El reset de arriba pone margin:0 a todo, y eso pisa el margin:auto
     con el que el navegador centra los <dialog>. Hay que devolverlo. */
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--corinto);
  color: var(--crema);
  box-shadow: var(--s-3);
  /* allow-discrete hace que también se anime al cerrarse. */
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              overlay var(--dur-base) allow-discrete,
              display var(--dur-base) allow-discrete;
}
.reserva[open] { opacity: 1; transform: none; }
@starting-style {
  .reserva[open] { opacity: 0; transform: translateY(10px) scale(.98); }
}
.reserva::backdrop {
  background: rgba(20, 10, 9, .62);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out),
              overlay var(--dur-base) allow-discrete,
              display var(--dur-base) allow-discrete;
}
.reserva[open]::backdrop { opacity: 1; }
@starting-style { .reserva[open]::backdrop { opacity: 0; } }

.reserva-caja {
  position: relative;
  padding: clamp(1.75rem, 5vw, 2.5rem);
}
.reserva-caja .kicker { color: var(--rosa); }

.reserva-x {
  position: absolute;
  top: .75rem; right: .75rem;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--crema);
  cursor: pointer;
  transition: background var(--dur-rapida) var(--ease-out);
}
.reserva-x:hover { background: rgba(248, 243, 230, .14); }

.reserva-h {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 84;
  font-size: var(--t-2xl);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: .8rem 0 .9rem;
}
.reserva-p {
  max-width: 34ch;
  color: rgba(248, 243, 230, .88);
}

.reserva-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  margin-top: 1.25rem;
  padding: .75rem .9rem;
  border: 1px solid var(--linea-crema);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
}
.reserva-estado b {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
}
.reserva-estado b::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rosa);
}
.reserva-estado.is-abierto b::before { background: #7BD389; }
.reserva-estado span {
  color: rgba(248, 243, 230, .8);
  font-variant-numeric: tabular-nums;
}

.reserva-tel {
  width: 100%;
  margin-top: 1.35rem;
  background: var(--crema);
  color: var(--corinto);
  border-color: var(--crema);
}
.reserva-tel:hover { background: #fff; border-color: #fff; }

.reserva-no {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: .5rem;
  border: 0;
  background: transparent;
  color: rgba(248, 243, 230, .75);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: color var(--dur-rapida) var(--ease-out);
}
.reserva-no:hover { color: var(--crema); }


/* =============================================================
   16. Efectos y animaciones
   ============================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
  transition-delay: var(--retraso, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cinta {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(123, 211, 137, .65); }
  70%  { box-shadow: 0 0 0 7px rgba(123, 211, 137, 0); }
  100% { box-shadow: 0 0 0 0 rgba(123, 211, 137, 0); }
}

/* Entrada del hero: los titulares suben desde detrás de su propia línea. */
@keyframes subir-linea {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}
.js .hero-title .line-in { transform: translateY(105%); }
.js.is-listo .hero-title .line-in {
  animation: subir-linea .95s var(--ease-out) both;
}
.js.is-listo .hero-title .line:nth-child(1) .line-in { animation-delay: .06s; }
.js.is-listo .hero-title .line:nth-child(2) .line-in { animation-delay: .14s; }
.js.is-listo .hero-title .line:nth-child(3) .line-in { animation-delay: .22s; }

.js .kicker-hero,
.js .hero-sub,
.js .hero-actions { opacity: 0; }
.js.is-listo .kicker-hero,
.js.is-listo .hero-sub,
.js.is-listo .hero-actions {
  animation: entrar .8s var(--ease-out) both;
}
.js.is-listo .kicker-hero  { animation-delay: .02s; }
.js.is-listo .hero-sub     { animation-delay: .34s; }
.js.is-listo .hero-actions { animation-delay: .42s; }

/* El vídeo entra con un fundido cuando ya puede reproducirse, para que
   no se vea el salto entre el cartel y el primer fotograma. */
.hero-video video { opacity: 0; transition: opacity .7s var(--ease-out); }
.hero-video video.is-listo { opacity: 1; }


/* =============================================================
   18. Responsive
   ============================================================= */

/* --- A partir de 600px --- */
@media (min-width: 37.5em) {
  .pie-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* --- A partir de 768px --- */
@media (min-width: 48em) {
  /* La barra fija del teléfono: de tablet en adelante sobra, porque
     el teléfono ya está a la vista en Contacto y en el pie. */
  .barra-movil { display: none; }

  .casa-grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .contacto-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  /* La carta impresa va a dos columnas, como la del bar. */
  .menu-cols { grid-template-columns: 1.12fr .88fr; }
}

/* --- A partir de 960px: barra completa y hero partido --- */
@media (min-width: 60em) {
  .burger { display: none; }
  .menu-movil { display: none; }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-right: 1.5rem;
  }
  .nav-links a {
    position: relative;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: .05em;
    text-decoration: none;
    padding-block: .35rem;
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .nav-links a:hover::after,
  .nav-links a.is-actual::after { transform: scaleX(1); transform-origin: left; }

  /* El vídeo sigue a sangre también en escritorio: aquí entra la
     versión apaisada, recortada del original, para no estirar el
     vertical y perder nitidez. */
  .hero {
    padding-block: calc(var(--nav-h) + 3rem) clamp(3rem, 6vw, 5rem);
  }
  .hero-video {
    background-image: url("assets/video/risotto-ancho-poster.jpg");
    background-position: center;
  }
  .hero-video video { object-position: center; }

  .hero-inner { max-width: var(--ancho); }
  .hero-title { font-size: var(--t-3xl); }
  .hero-sub { max-width: 40ch; }

  .hero-scroll {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -13px;
    bottom: 2rem;
    width: 26px; height: 42px;
    border: 1px solid var(--linea-crema);
    border-radius: 999px;
  }
  .hero-scroll span {
    position: absolute;
    left: 50%; top: 9px;
    width: 3px; height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--crema);
    animation: rueda 2s var(--ease-soft) infinite;
  }
  @keyframes rueda {
    0%   { transform: translateY(0); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: translateY(15px); opacity: 0; }
  }

}

/* --- Pantallas muy anchas --- */
@media (min-width: 90em) {
  /* El texto del hero no se pega al borde de un monitor grande. */
  .hero-inner { padding-inline: 0; }
}


/* =============================================================
   19. Reducción de movimiento
   Se quita el desplazamiento, no el fundido: dejar la interfaz
   completamente estática la hace parecer rota.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal { transform: none; transition-duration: .3s; }
  .js .hero-title .line-in { transform: none; animation: none; }
  .js .kicker-hero,
  .js .hero-sub,
  .js .hero-actions { opacity: 1; animation: none; }

  .cinta-pista { animation: none; }
  .estado.is-abierto::before { animation: none; }
  .hero-scroll span { animation: none; opacity: 1; }

  /* El menú aparece de golpe, sin escalonado. */
  .menu-movil.is-abierto .menu-nav a,
  .menu-movil.is-abierto .menu-pie { animation: none; }
  .menu-nav a:hover { padding-left: 0; }

  /* El porqué: la E ya girada, sin entrada ni bucle. */
  .porque.is-animable .jl-e,
  .porque.is-animable.is-entrada .jl-e,
  .porque.is-animable.is-bucle .jl-e {
    transform: translateX(var(--giro-e)) rotateY(180deg);
    transition: none;
    animation: none;
  }
  .mos:hover img,
  .mos:hover video { transform: none; }



  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}