/* ==========================================================================
   SUSHI PLUS CHICKEN
   Sistema de diseño — cálido, familiar, sobrediseñado con intención.

   Motivo rector: "el corte diagonal" tomado de la carta impresa, donde las
   fotos entran en franjas inclinadas. Toda la página revela su contenido con
   esa misma diagonal, y los precios reutilizan la píldora ovalada de la carta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --rojo:        #B01E24;
  --rojo-osc:    #7E1418;
  --rojo-prof:   #5A0E11;
  --naranja:     #F0901E;
  --naranja-cl:  #F7B733;
  --amarillo:    #FBD24B;

  /* Neutros cálidos */
  --crema:       #FDF4E7;
  --crema-2:     #F7E6D0;
  --crema-3:     #EFD7BA;
  --arena:       #A9907C;
  --tinta:       #2A1D18;
  --tinta-2:     #5B4740;
  --tinta-3:     #8A7167;
  --nori:        #16100D;
  --nori-2:      #241A15;

  /* Superficies */
  --bg:          var(--crema);
  --surface:     #FFFBF4;
  --linea:       rgba(42, 29, 24, .13);
  --linea-sutil: rgba(42, 29, 24, .07);

  /* Tipografía */
  --display: 'Fraunces', 'Georgia', serif;
  --sans:    'Outfit', 'Segoe UI', system-ui, sans-serif;
  --script:  'Caveat', cursive;

  /* Escala fluida */
  --t-xs:   clamp(.72rem, .70rem + .10vw, .80rem);
  --t-sm:   clamp(.84rem, .81rem + .14vw, .94rem);
  --t-base: clamp(.98rem, .94rem + .20vw, 1.10rem);
  --t-md:   clamp(1.12rem, 1.05rem + .34vw, 1.34rem);
  --t-lg:   clamp(1.42rem, 1.25rem + .82vw, 2.05rem);
  --t-xl:   clamp(1.95rem, 1.55rem + 1.95vw, 3.35rem);
  --t-2xl:  clamp(2.55rem, 1.75rem + 3.85vw, 5.40rem);
  --t-3xl:  clamp(3.10rem, 1.90rem + 5.80vw, 7.60rem);

  /* Ritmo */
  --gap:    clamp(1rem, .7rem + 1.5vw, 1.9rem);
  --pad-x:  clamp(1.15rem, .4rem + 3.2vw, 4.5rem);
  --sec-y:  clamp(4.5rem, 2.5rem + 8vw, 10rem);
  --max:    1340px;
  --max-txt: 62ch;

  /* Movimiento — una sola familia de curvas para toda la página */
  --ease:      cubic-bezier(.22, 1, .36, 1);      /* entradas */
  --ease-io:   cubic-bezier(.65, 0, .35, 1);      /* morfos */
  --ease-suave:cubic-bezier(.33, 1, .68, 1);      /* hovers */
  --d-rapido:  .32s;
  --d-medio:   .62s;
  --d-lento:   1.05s;
  --d-epico:   1.5s;

  /* Diagonal del motivo (misma inclinación en toda la página) */
  --diag: 4.6deg;

  --sombra-s:  0 2px 10px rgba(42, 29, 24, .07);
  --sombra-m:  0 14px 38px -14px rgba(42, 29, 24, .26);
  --sombra-l:  0 34px 80px -28px rgba(42, 29, 24, .42);
  --radio:     18px;
  --radio-s:   11px;

  --nav-h: 74px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2.5px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* Barra de desplazamiento cálida */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--crema-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--rojo), var(--rojo-osc));
  border-radius: 99px;
  border: 3px solid var(--crema-2);
}

/* --------------------------------------------------------------------------
   3. Tipografía base
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.022em;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  text-wrap: balance;
}

.display    { font-size: var(--t-3xl); font-weight: 700; }
.titulo     { font-size: var(--t-2xl); }
.titulo-sec { font-size: var(--t-xl); }
.subtitulo  { font-size: var(--t-lg); }

p { text-wrap: pretty; }

/* Etiqueta con la diagonal de la marca */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .62em;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--rojo);
}
.kicker::before {
  content: '';
  width: 34px;
  height: 2px;
  background: currentColor;
  transform: skewY(calc(var(--diag) * -1));
  transform-origin: left;
}
.kicker--claro { color: var(--naranja-cl); }
.kicker--centro { justify-content: center; }
.kicker--centro::after {
  content: '';
  width: 34px;
  height: 2px;
  background: currentColor;
  transform: skewY(calc(var(--diag) * -1));
}

/* Acento manuscrito */
.script {
  font-family: var(--script);
  font-weight: 600;
  color: var(--rojo);
  font-size: 1.42em;
  line-height: .9;
}

.resalte { color: var(--rojo); }
.resalte-naranja { color: var(--naranja); }

/* Subrayado que se dibuja con la diagonal del motivo */
.subrayado {
  position: relative;
  display: inline-block;
}
.subrayado::after {
  content: '';
  position: absolute;
  left: -.06em;
  right: -.06em;
  bottom: .04em;
  height: .30em;
  background: linear-gradient(100deg, var(--naranja-cl), var(--naranja));
  opacity: .42;
  border-radius: 3px;
  transform: skewX(-14deg) scaleX(0);
  transform-origin: left;
  transition: transform var(--d-lento) var(--ease) .18s;
  z-index: -1;
}
.rv.visible .subrayado::after,
.visible .subrayado::after { transform: skewX(-14deg) scaleX(1); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.envoltura {
  width: min(100% - (var(--pad-x) * 2), var(--max));
  margin-inline: auto;
}
.envoltura--ancho { width: min(100% - (var(--pad-x) * 2), 1600px); margin-inline: auto; }
.seccion { padding-block: var(--sec-y); position: relative; }
.seccion--compacta { padding-block: clamp(3rem, 1.8rem + 5vw, 6rem); }

.cabecera-seccion {
  display: grid;
  gap: .95rem;
  margin-bottom: clamp(2.2rem, 1.2rem + 3vw, 4rem);
  max-width: 58ch;
}
.cabecera-seccion--centro { margin-inline: auto; text-align: center; justify-items: center; }
.cabecera-seccion p { color: var(--tinta-2); font-size: var(--t-md); }

/* Textura de papel cálido, muy sutil */
.textura::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(176, 30, 36, .05), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(240, 144, 30, .06), transparent 46%);
}

/* --------------------------------------------------------------------------
   5. Motivo diagonal reutilizable
   -------------------------------------------------------------------------- */
/* Franja inclinada como las fotos de la carta impresa */
.franja {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.franja--diag { clip-path: polygon(0 var(--corte, 4%), 100% 0, 100% calc(100% - var(--corte, 4%)), 0 100%); }

/* Separador diagonal entre bloques */
.corte {
  position: relative;
  height: clamp(48px, 6vw, 96px);
  background: inherit;
  margin-top: calc(clamp(48px, 6vw, 96px) * -1);
  z-index: 2;
  pointer-events: none;
}
.corte--abajo { clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); }
.corte--arriba { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); }

/* --------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--rojo);
  --btn-fg: var(--crema);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .62em;
  padding: .92em 1.9em;
  border-radius: 99px;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: .012em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: transform var(--d-rapido) var(--ease-suave),
              box-shadow var(--d-rapido) var(--ease-suave),
              color var(--d-rapido) var(--ease-suave);
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--btn-bg) 82%, transparent);
}
/* El relleno entra en diagonal, igual que las franjas de la carta */
.btn::before {
  content: '';
  position: absolute;
  inset: -2px -20%;
  background: var(--btn-hover, var(--rojo-osc));
  transform: skewX(-16deg) scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-medio) var(--ease);
  z-index: -1;
}
.btn:hover { transform: translateY(-2.5px); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--btn-bg) 78%, transparent); }
.btn:hover::before { transform: skewX(-16deg) scaleX(1.4); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--naranja { --btn-bg: var(--naranja); --btn-hover: #D97A0C; color: #2A1D18; }
.btn--fantasma {
  --btn-bg: transparent;
  --btn-hover: var(--crema);
  color: var(--crema);
  border: 1.5px solid rgba(253, 244, 231, .45);
  box-shadow: none;
}
.btn--fantasma:hover { color: var(--tinta); border-color: var(--crema); box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }
.btn--oscuro { --btn-bg: var(--tinta); --btn-hover: var(--nori); }
.btn--claro  { --btn-bg: var(--crema); --btn-hover: #fff; color: var(--tinta); }

.btn__icono { width: 1.12em; height: 1.12em; flex: none; }

/* Enlace con flecha animada */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--rojo);
  position: relative;
}
.enlace-flecha svg { width: 1.05em; height: 1.05em; transition: transform var(--d-rapido) var(--ease); }
.enlace-flecha::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  height: 1.5px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-medio) var(--ease);
}
.enlace-flecha:hover svg { transform: translateX(5px); }
.enlace-flecha:hover::after { transform: scaleX(1); transform-origin: left; }

/* Píldora de precio — tomada literalmente de la carta impresa */
.precio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .40em 1.05em;
  border-radius: 99px;
  background: var(--arena);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: var(--sombra-s);
}
.precio--rojo { background: linear-gradient(140deg, var(--rojo), var(--rojo-osc)); }
.precio--naranja { background: linear-gradient(140deg, var(--naranja-cl), var(--naranja)); color: var(--tinta); }

/* --------------------------------------------------------------------------
   7. Navegación
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--d-medio) var(--ease),
              box-shadow var(--d-medio) var(--ease),
              backdrop-filter var(--d-medio) var(--ease);
}
.nav__interior {
  width: min(100% - (var(--pad-x) * 2), 1600px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.nav.encogido {
  background: rgba(253, 244, 231, .90);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 1px 0 var(--linea), 0 12px 32px -22px rgba(42, 29, 24, .5);
}

/* Tres columnas: la marca en la esquina izquierda, el menú centrado en la
   página y el WhatsApp cerrando la derecha.

   Los dos costados llevan `flex: 1 1 0`: parten de cero y crecen lo mismo, así
   que el menú del medio queda centrado de verdad, sin depender de que la marca
   y el botón midan igual. Con el menú centrado el pollo tiene bastante menos
   trecho que volar hasta la primera opción. */
.nav__marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: 1 1 0;                    /* costado izquierdo */
}

/* Derecha: el WhatsApp cerrando la esquina */
.nav__derecha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(.8rem, .4rem + 1.6vw, 2.2rem);
  flex: 1 1 0;                    /* costado derecho, del mismo peso */
}
.nav__nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, .78rem + .82vw, 1.72rem);
  line-height: 1.02;
  letter-spacing: -.026em;
  color: var(--crema);
  text-align: left;
  white-space: nowrap;            /* nunca se parte: es lo que fija el ancho
                                     mínimo del costado izquierdo */
  transition: color var(--d-medio) var(--ease);
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.nav__nombre small {
  display: block;
  font-family: var(--sans);
  font-size: .40em;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .82;
  margin-top: 4px;
}
.nav.encogido .nav__nombre { color: var(--tinta); text-shadow: none; }

.nav__menu { display: flex; align-items: center; flex: none; gap: clamp(.3rem, 1.1vw, 1.5rem); }
.nav__enlace {
  position: relative;
  padding: .5rem .2rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--crema);
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
  transition: color var(--d-rapido) var(--ease);
}
.nav.encogido .nav__enlace { color: var(--tinta-2); text-shadow: none; }
.nav__enlace::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 2px;
  background: var(--naranja);
  transform: skewX(-16deg) scaleX(0);
  transform-origin: left;
  transition: transform var(--d-medio) var(--ease);
}
.nav__enlace:hover::after,
.nav__enlace.activo::after { transform: skewX(-16deg) scaleX(1); }
.nav.encogido .nav__enlace:hover,
.nav.encogido .nav__enlace.activo { color: var(--rojo); }

/* Pollo volador — el único de la página, y a la vez el logo de la marca.
   Descansa en su nido, junto al título de la esquina izquierda, y vuela hasta
   la opción que elijas: cualquiera de los seis enlaces o el botón de WhatsApp,
   todos a su derecha.

   En reposo mira hacia la izquierda, como el logo oficial. Como ahora el nido
   está a la izquierda de todo, casi siempre vuela hacia la derecha, así que
   antes de despegar se voltea para ir de frente y no de espaldas.

   Va en cuatro capas porque cada una lleva su propio movimiento y mezclarlas
   daría transformaciones que se pelean:
     .nav__pollo        → el viaje (x, y) de nido a percha
     .nav__pollo__giro  → hacia qué lado mira
     .nav__pollo__ave   → el arco del vuelo, los aletazos y el aterrizaje
     img                → sólo la imagen

   El volteo va en una capa POR ENCIMA del ave, no en la imagen: así el espejo
   invierte solo el sentido de las inclinaciones del vuelo y los signos de la
   animación siguen valiendo para los dos lados. */
/* Un solo sitio define el tamaño del pollo: lo heredan el nido y el ave */
.nav__interior { position: relative; --pollo-w: 34px; }

/* Hueco que reserva el sitio del pollo al lado del título */
.nav__nido {
  display: block;
  flex: none;
  width: var(--pollo-w);
  aspect-ratio: 480 / 523;
}

.nav__pollo {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--pollo-w);
  aspect-ratio: 480 / 523;         /* alto conocido antes de que cargue la imagen */
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}
/* Se voltea al despegar, mientras el ave se agacha: para cuando sale del nido
   ya va mirando a donde vuela. Con perspectiva el giro tiene volumen y no es
   un simple aplastado. */
.nav__pollo__giro {
  display: block;
  transform: perspective(340px) rotateY(0deg);
  transition: transform .3s var(--ease);
}
.nav__pollo__giro--espejo { transform: perspective(340px) rotateY(180deg); }

.nav__pollo__ave {
  display: block;
  transform-origin: 50% 100%;      /* pivota sobre las patas */
  will-change: transform;
}
.nav__pollo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5));
}
.nav.encogido .nav__pollo img { filter: drop-shadow(0 4px 9px rgba(42, 29, 24, .3)); }

/* Plumas que suelta en el aire. Se crean al vuelo y se borran al terminar. */
.pluma {
  position: absolute;
  width: 9px;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
  filter: drop-shadow(0 1px 2px rgba(42, 29, 24, .28));
}
.pluma svg { display: block; width: 100%; height: auto; }

/* La barra crece sólo donde el menú existe, para darle carril al vuelo:
   en móvil no hay menú (se usa el panel) y no hace falta el aire. */
@media (min-width: 941px) {
  :root { --nav-h: 116px; }
  .nav__interior { padding-top: 30px; }
}
/* En móvil el WhatsApp de la barra se queda —desde que se quitó el verde
   flotante es el único botón de pedido siempre a la vista— pero encogido a un
   botón redondo con sólo el ícono: el texto no cabe entre el nombre del
   restaurante y la hamburguesa. */
@media (max-width: 940px) {
  .nav__derecha { flex: none; }
  .nav__wa__texto { display: none; }
  .nav__wa {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }
  .nav__wa .btn__icono { width: 21px; height: 21px; }
}

/* Teléfonos angostos: el nombre no se parte nunca, así que el que cede es el
   botón. */
@media (max-width: 400px) {
  .nav__interior { gap: .6rem; }
  .nav__wa { width: 40px; height: 40px; }
  .nav__wa .btn__icono { width: 19px; height: 19px; }
}

/* Botón hamburguesa */
.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(253, 244, 231, .16);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(253, 244, 231, .3);
  transition: background var(--d-rapido) var(--ease);
}
.nav.encogido .nav__toggle { background: rgba(42, 29, 24, .07); border-color: var(--linea); }
.nav__toggle span {
  display: block;
  width: 19px; height: 1.9px;
  background: var(--crema);
  border-radius: 2px;
  transition: transform var(--d-medio) var(--ease), opacity var(--d-rapido) var(--ease);
}
.nav.encogido .nav__toggle span { background: var(--tinta); }
/* 1.9px de barra + 5px de hueco ⇒ los extremos viajan 6.9px hasta el centro */
.nav__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.9px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.9px) rotate(-45deg); }

/* Panel móvil */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: linear-gradient(165deg, var(--rojo-osc), var(--nori) 78%);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: .3rem;
  padding: var(--nav-h) var(--pad-x) 3rem;
  clip-path: circle(0% at calc(100% - 44px) 38px);
  transition: clip-path .82s var(--ease-io);
  visibility: hidden;
  overflow-y: auto;
}
.menu-movil.abierto { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; }
.menu-movil a {
  font-family: var(--display);
  font-size: clamp(1.7rem, 7.5vw, 2.7rem);
  font-weight: 600;
  color: var(--crema);
  padding: .16em 0;
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.menu-movil.abierto a { opacity: 1; transform: none; }
.menu-movil.abierto a:nth-child(1) { transition-delay: .18s; }
.menu-movil.abierto a:nth-child(2) { transition-delay: .24s; }
.menu-movil.abierto a:nth-child(3) { transition-delay: .30s; }
.menu-movil.abierto a:nth-child(4) { transition-delay: .36s; }
.menu-movil.abierto a:nth-child(5) { transition-delay: .42s; }
.menu-movil.abierto a:nth-child(6) { transition-delay: .48s; }
.menu-movil a:hover { color: var(--naranja-cl); }
.menu-movil__pie {
  margin-top: 2rem;
  color: rgba(253, 244, 231, .72);
  font-size: var(--t-sm);
  opacity: 0;
  transition: opacity .5s var(--ease) .56s;
}
.menu-movil.abierto .menu-movil__pie { opacity: 1; }

/* Barra de progreso de lectura */
.progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--rojo), var(--naranja), var(--amarillo));
  z-index: 101;
}

/* --------------------------------------------------------------------------
   8. Portada
   -------------------------------------------------------------------------- */
.portada {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: var(--nori);
  /* El aire de la barra va aquí, no en el contenido: si el contenido no cabe
     en la pantalla, crece hacia abajo y este relleno queda intacto. Puesto en
     el contenido, el ajuste al fondo se lo comía y la barra —que es opaca—
     volvía a cortarle la cresta al pollo en pantallas bajas. */
  padding-top: var(--nav-h);
}
.portada__fondo {
  position: absolute;
  inset: -6% 0 0;
  height: 112%;
  z-index: -2;
}
.portada__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.03);
  animation: kenburns 24s var(--ease-suave) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.1%, -1.4%, 0); }
}
.portada__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Sombra lateral del lado del texto: el video queda vivo a la derecha
       y el titular no pierde contraste cuando pasa un cuadro claro. */
    linear-gradient(100deg, rgba(22, 16, 13, .70) 0%, rgba(22, 16, 13, .34) 44%, rgba(22, 16, 13, 0) 76%),
    linear-gradient(to top, rgba(22, 16, 13, .96) 4%, rgba(22, 16, 13, .68) 34%, rgba(22, 16, 13, .28) 62%, rgba(22, 16, 13, .55) 100%),
    radial-gradient(ellipse 70% 55% at 22% 78%, rgba(176, 30, 36, .30), transparent 68%);
}

/* --------------------------------------------------------------------------
   8 bis. Video de fondo a sangre completa
   La foto de siempre queda debajo como primer cuadro: se ve al instante,
   sostiene el encuadre mientras el video carga y es lo que queda si el
   navegador no reproduce o si se pidió menos movimiento.
   -------------------------------------------------------------------------- */
.video-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.06);          /* mismo margen de seguridad que las fotos */
  filter: saturate(1.07) contrast(1.03);
  opacity: 0;
  transition: opacity 1.4s var(--ease-suave);
  pointer-events: none;
}
/* Sólo aparece cuando ya hay imagen que mostrar — nunca un salto en negro */
.video-fondo.listo { opacity: 1; }

/* En la portada la foto hace ken burns; el video ya trae su propio movimiento */
.portada__fondo .video-fondo { transform: scale(1.02); }

.portada__contenido {
  position: relative;
  width: min(100% - (var(--pad-x) * 2), var(--max));
  margin-inline: auto;
  padding-block: clamp(.9rem, 2.4vh, 2rem) clamp(2.4rem, 5.5vh, 4.5rem);
  display: grid;
  gap: clamp(.85rem, .55rem + .8vw, 1.35rem);
  justify-items: start;
  max-width: 1100px;
}


.portada h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.6rem);
  font-weight: 700;
  color: var(--crema);
  line-height: .96;
  letter-spacing: -.035em;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .5);
}
.portada h1 em {
  font-style: normal;
  display: block;
  color: var(--naranja-cl);
}

/* Revelado por líneas con máscara — el gesto base de toda la página */
.linea-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.linea-mask > span {
  display: block;
  transform: translateY(105%) skewY(3.4deg);
  opacity: 0;
  animation: lineaSube 1.15s var(--ease) forwards;
}
@keyframes lineaSube { to { transform: none; opacity: 1; } }
.linea-mask:nth-of-type(1) > span { animation-delay: .48s; }
.linea-mask:nth-of-type(2) > span { animation-delay: .60s; }
.linea-mask:nth-of-type(3) > span { animation-delay: .72s; }

.portada__lema {
  font-family: var(--script);
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.6rem);
  color: var(--crema-2);
  line-height: 1.1;
  opacity: 0;
  animation: subeSuave 1.1s var(--ease) .92s forwards;
}
.portada__texto {
  max-width: 50ch;
  color: rgba(253, 244, 231, .84);
  font-size: var(--t-md);
  opacity: 0;
  animation: subeSuave 1.1s var(--ease) 1.02s forwards;
}
@keyframes subeSuave { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: .55rem;
  opacity: 0;
  animation: subeSuave 1.1s var(--ease) 1.16s forwards;
}


/* Indicador de scroll */
.portada__scroll {
  position: absolute;
  bottom: 1.6rem;
  right: var(--pad-x);
  display: grid;
  justify-items: center;
  gap: .6rem;
  color: rgba(253, 244, 231, .66);
  font-size: var(--t-xs);
  letter-spacing: .19em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: 0;
  animation: subeSuave 1s var(--ease) 1.6s forwards;
}
.portada__scroll i {
  width: 1px; height: 52px;
  background: linear-gradient(rgba(253, 244, 231, .1), rgba(253, 244, 231, .75));
  position: relative;
  overflow: hidden;
}
.portada__scroll i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--naranja-cl);
  animation: gotea 2.1s var(--ease-io) infinite;
}
@keyframes gotea {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* --------------------------------------------------------------------------
   9. Marquesina
   -------------------------------------------------------------------------- */
.marquesina {
  background: var(--rojo);
  color: var(--crema);
  padding: .85rem 0;
  overflow: hidden;
  position: relative;
  border-block: 1px solid rgba(0,0,0,.12);
}
.marquesina__pista {
  display: flex;
  width: max-content;
  animation: desliza 34s linear infinite;
}
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
@keyframes desliza { to { transform: translateX(-50%); } }
.marquesina__grupo { display: flex; align-items: center; flex: none; }
.marquesina span {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 1.5rem;
  font-family: var(--display);
  font-size: clamp(1rem, .85rem + .6vw, 1.42rem);
  font-weight: 600;
  letter-spacing: -.012em;
  white-space: nowrap;
}
.marquesina span::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--naranja-cl);
  flex: none;
}

/* --------------------------------------------------------------------------
   10. Barra de confianza
   -------------------------------------------------------------------------- */
.confianza { background: var(--surface); border-bottom: 1px solid var(--linea-sutil); }
.confianza__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.4rem, 3vw, 3rem);
  padding-block: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem);
}
.dato { display: grid; gap: .3rem; position: relative; }
.dato + .dato::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.4rem, 3vw, 3rem) / -2);
  top: 8%; bottom: 8%;
  width: 1px;
  background: var(--linea);
  transform: skewX(calc(var(--diag) * -1));
}
.dato__valor {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.dato__etiqueta {
  font-size: var(--t-sm);
  color: var(--tinta-2);
  font-weight: 500;
}
.dato__nota { font-size: var(--t-xs); color: var(--tinta-3); }

/* --------------------------------------------------------------------------
   11. Bloque partido (historia)
   -------------------------------------------------------------------------- */
.partido {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.partido--invertido .partido__media { order: 2; }

.partido__media {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-l);
  aspect-ratio: 4 / 3.35;
}
.partido__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.10);
  transition: transform 1.6s var(--ease);
}
.partido__media.visible img { transform: scale(1); }

/* Sello circular al estilo de la insignia de la marca */
.sello {
  position: absolute;
  right: clamp(-14px, -1vw, -8px);
  bottom: clamp(-14px, -1vw, -8px);
  width: clamp(104px, 13vw, 144px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--rojo), var(--rojo-prof));
  color: var(--crema);
  box-shadow: var(--sombra-m), 0 0 0 8px var(--crema);
  font-family: var(--display);
  line-height: 1.06;
  padding: .7rem;
  transform: scale(0) rotate(-40deg);
  transition: transform 1s var(--ease) .5s;
}
.visible .sello { transform: scale(1) rotate(-9deg); }
.sello b { display: block; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; }
.sello small { font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; font-family: var(--sans); opacity: .85; }

.partido__texto { display: grid; gap: 1.15rem; align-content: center; }
.partido__texto p { color: var(--tinta-2); max-width: var(--max-txt); }

/* Lista de valores */
.valores { display: grid; gap: 1rem; margin-top: .45rem; }
.valor { display: flex; gap: .95rem; align-items: flex-start; }
.valor__icono {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--crema-2);
  color: var(--rojo);
  transform: rotate(-4deg);
  transition: transform var(--d-medio) var(--ease), background var(--d-medio) var(--ease);
}
.valor:hover .valor__icono { transform: rotate(5deg) scale(1.08); background: var(--naranja-cl); }
.valor__icono svg { width: 20px; height: 20px; }
.valor h4 { font-size: var(--t-base); font-weight: 600; margin-bottom: .1rem; }
.valor p { font-size: var(--t-sm); color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   12. Cortinas a sangre completa
   -------------------------------------------------------------------------- */
.cortina {
  position: relative;
  min-height: clamp(440px, 78vh, 760px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--nori);
}
.cortina--alta { min-height: clamp(520px, 92vh, 900px); }

.cortina__fondo {
  position: absolute;
  inset: -12% 0;
  height: 124%;
  z-index: -2;
  will-change: transform;
}
.cortina__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
.cortina__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(22, 16, 13, .90) 0%, rgba(22, 16, 13, .70) 42%, rgba(22, 16, 13, .28) 100%);
}
.cortina__velo--centro {
  background: radial-gradient(ellipse 78% 82% at 50% 50%, rgba(22, 16, 13, .60), rgba(22, 16, 13, .90));
}
.cortina__velo--rojo {
  background: linear-gradient(115deg, rgba(90, 14, 17, .93) 0%, rgba(22, 16, 13, .74) 48%, rgba(22, 16, 13, .34) 100%);
}
.cortina__velo--abajo {
  background:
    radial-gradient(ellipse 74% 62% at 50% 52%, rgba(22, 16, 13, .78), transparent 76%),
    linear-gradient(to top, rgba(22, 16, 13, .95) 8%, rgba(22, 16, 13, .62) 48%, rgba(22, 16, 13, .48) 100%);
}

.cortina__contenido {
  position: relative;
  width: min(100% - (var(--pad-x) * 2), var(--max));
  margin-inline: auto;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  max-width: 900px;
  color: var(--crema);
}
.cortina__contenido--centro { justify-items: center; text-align: center; margin-inline: auto; max-width: 820px; }
.cortina__contenido--derecha { margin-left: auto; margin-right: 0; justify-items: start; }

.cortina h2 {
  font-size: var(--t-2xl);
  color: var(--crema);
  letter-spacing: -.032em;
  line-height: .99;
  text-shadow: 0 5px 34px rgba(0, 0, 0, .45);
}
.cortina h2 em { font-style: normal; color: var(--naranja-cl); display: block; }
.cortina p {
  color: rgba(253, 244, 231, .84);
  font-size: var(--t-md);
  max-width: 54ch;
}
/* La condición de servicio de una franja (hoy: el bar, solo en la sede sur).
   Sobre foto y a sangre completa el texto compite con el fondo, así que va en
   pastilla propia con velo oscuro: lo mismo que hace el `text-shadow` del h2,
   pero para una línea pequeña que tiene que leerse sí o sí. */
.cortina__nota {
  display: inline-block;
  margin-top: -.2rem;
  padding: .45rem .9rem;
  border-radius: 99px;
  background: rgba(24, 12, 10, .5);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(253, 244, 231, .22);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--crema);
}

.cortina__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

/* Cifra gigante decorativa */
.cortina__cifra {
  position: absolute;
  right: -.04em;
  bottom: -.22em;
  font-family: var(--display);
  font-size: clamp(9rem, 26vw, 24rem);
  font-weight: 700;
  line-height: .72;
  color: rgba(253, 244, 231, .045);
  pointer-events: none;
  user-select: none;
  z-index: -1;
  letter-spacing: -.05em;
}

/* --------------------------------------------------------------------------
   13. Tarjetas de platos
   -------------------------------------------------------------------------- */
.platos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 296px), 1fr));
  gap: clamp(1.1rem, .6rem + 1.6vw, 2rem);
}

.plato {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sombra-s);
  transition: transform var(--d-medio) var(--ease),
              box-shadow var(--d-medio) var(--ease);
  isolation: isolate;
}
.plato:hover { transform: translateY(-8px); box-shadow: var(--sombra-l); }

.plato__media {
  position: relative;
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
  background: var(--crema-3);
}
.plato__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.15s var(--ease), filter var(--d-medio) var(--ease);
}
.plato:hover .plato__media img { transform: scale(1.09); filter: saturate(1.1); }

/* Barrido diagonal de luz al pasar el cursor */
.plato__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .30) 50%, transparent 66%);
  transform: translateX(-115%);
  transition: transform .95s var(--ease);
  pointer-events: none;
}
.plato:hover .plato__media::after { transform: translateX(115%); }

.plato__etiqueta {
  position: absolute;
  top: .8rem; left: .8rem;
  padding: .34em .82em;
  border-radius: 99px;
  background: rgba(22, 16, 13, .62);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: var(--crema);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.plato__precio {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  transform: scale(.55) translateY(10px);
  opacity: 0;
  transition: transform .55s var(--ease) .1s, opacity .4s var(--ease) .1s;
}
.plato.visible .plato__precio { transform: none; opacity: 1; }

.plato__cuerpo { padding: 1.25rem 1.35rem 1.5rem; display: grid; gap: .5rem; align-content: start; }
.plato__cuerpo h3 { font-size: var(--t-md); letter-spacing: -.018em; }
.plato__cuerpo p { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.58; }

/* --------------------------------------------------------------------------
   14. Promociones
   -------------------------------------------------------------------------- */
.promos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 276px), 1fr));
  gap: clamp(1rem, .6rem + 1.3vw, 1.6rem);
}
.promo {
  position: relative;
  display: grid;
  gap: .68rem;
  align-content: start;
  padding: 1.7rem 1.5rem 1.6rem;
  border-radius: var(--radio);
  background: var(--surface);
  border: 1px solid var(--linea-sutil);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-medio) var(--ease),
              box-shadow var(--d-medio) var(--ease),
              border-color var(--d-medio) var(--ease);
}
/* Relleno diagonal que sube al hacer hover */
.promo::before {
  content: '';
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 180%;
  background: linear-gradient(160deg, var(--crema-2), var(--crema-3));
  transform: skewY(calc(var(--diag) * -1)) translateY(88%);
  transition: transform .78s var(--ease);
  z-index: -1;
}
.promo:hover {
  transform: translateY(-7px);
  box-shadow: var(--sombra-m);
  border-color: transparent;
}
.promo:hover::before { transform: skewY(calc(var(--diag) * -1)) translateY(28%); }

.promo__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.promo h3 { font-size: var(--t-md); letter-spacing: -.02em; max-width: 15ch; }
.promo p { font-size: var(--t-sm); color: var(--tinta-2); }
.promo__bocados {
  display: inline-flex;
  align-items: center;
  gap: .38em;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rojo);
}
.promo__bocados::before {
  content: '';
  width: 16px; height: 2px;
  background: currentColor;
  transform: skewY(calc(var(--diag) * -1));
}

/* --------------------------------------------------------------------------
   15. Carta con pestañas
   -------------------------------------------------------------------------- */
.carta { background: var(--surface); }

.carta__pestanas {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  display: flex;
  gap: .38rem;
  padding: .55rem 0;
  margin-bottom: clamp(1.8rem, 1rem + 2vw, 3rem);
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(var(--surface) 76%, transparent);
  -ms-overflow-style: none;
}
.carta__pestanas::-webkit-scrollbar { display: none; }

.pestana {
  position: relative;
  flex: none;
  padding: .62em 1.25em;
  border-radius: 99px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tinta-2);
  white-space: nowrap;
  transition: color var(--d-rapido) var(--ease);
  isolation: isolate;
}
.pestana::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--crema-2);
  transform: scale(.82);
  opacity: 0;
  transition: transform var(--d-rapido) var(--ease), opacity var(--d-rapido) var(--ease);
  z-index: -1;
}
.pestana:hover::before { transform: scale(1); opacity: 1; }
.pestana.activa { color: var(--crema); }
.pestana.activa::before {
  background: linear-gradient(140deg, var(--rojo), var(--rojo-osc));
  transform: scale(1);
  opacity: 1;
}

/* --- El libro ------------------------------------------------------------
   La carta se lee como se lee un libro: un pliego de dos páginas, un lomo en
   medio, y hojas que se pasan. Nada de bajar y bajar — **el libro cabe entero
   en la pantalla** y el JS reparte los platos para que cada página se llene
   justo hasta el borde.

   El tamaño lo pone el JS en `--pw`/`--ph`, y con ellos `--esc`: la tipografía
   de dentro va en píxeles multiplicados por esa escala, así que el libro crece
   y encoge como un objeto y no como una página web. Por eso las páginas se
   miden con la misma escala con la que se pintan (`.pagina--probeta`): medir
   de otra forma sería medir otra cosa.

   Lo que gira es `.giro`, una hoja con el eje en el lomo que recorre los 180°
   de un lado al otro. Va partida en tiras (`.giro__tira`) encajadas una dentro
   de otra: cada una hereda el giro de la anterior y añade el suyo, y de esa
   suma sale la comba del papel. Aquí está la escenografía; los ángulos y las
   sombras los pone el JS, porque la comba hay que sumarla tira por tira. */
#panelesCarta {
  position: relative;               /* la probeta con la que se mide cuelga de aquí */
  display: flex;
  justify-content: center;
  touch-action: pan-y;              /* el arrastre horizontal es nuestro; el vertical, de la página */
  -webkit-tap-highlight-color: transparent;
}
#panelesCarta:focus-visible { outline: none; }

.libro {
  position: relative;
  perspective: calc(var(--ph, 700px) * 2.1);
  perspective-origin: 50% 45%;
  /* Al combarse, la hoja se sale del libro por los lados —la barriga del papel
     con la perspectiva encima llega a asomar unos 35 px—. El relleno le deja
     ese sitio, y el recorte evita que en una sola página barra media sección al
     irse. Va aquí y no en `.libro__mesa` a propósito: la mesa lleva el 3D, y un
     `overflow` sobre `preserve-3d` aplanaría el volumen de la hoja. */
  padding: 0 clamp(10px, 2.4vw, 44px);
  overflow: hidden;
}

.libro__mesa {
  position: relative;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  transform-style: preserve-3d;
  cursor: pointer;
}
.libro--suelto .libro__mesa { width: var(--pw); }

.libro__hueco {
  position: absolute;
  top: 0;
  width: var(--pw);
  height: var(--ph);
}
.libro__hueco--izq { left: 0; }
.libro__hueco--der { left: var(--pw); }
.libro--suelto .libro__hueco--der { left: 0; }

/* El lomo: la sombra del pliegue encuadernado. Es lo que hace que dos páginas
   se lean como un libro y no como dos hojas puestas al lado. */
.libro__lomo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pw) - 44px);
  width: 88px;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(90deg,
      rgba(42, 29, 24, 0)    0%,
      rgba(42, 29, 24, .055) 34%,
      rgba(42, 29, 24, .16)  49%,
      rgba(90, 62, 50, .05)  50%,
      rgba(42, 29, 24, .16)  51%,
      rgba(42, 29, 24, .055) 66%,
      rgba(42, 29, 24, 0)    100%);
}
.libro--suelto .libro__lomo { display: none; }

/* Lo que la hoja levantada proyecta sobre la página de debajo. La opacidad la
   lleva el JS: crece al despegar del lado que deja y otra vez al llegar al que
   va a ocupar. */
.libro__sombra {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--pw);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.libro__sombra--izq {
  left: 0;
  background: linear-gradient(270deg, rgba(42, 29, 24, .85), rgba(42, 29, 24, .12) 42%, transparent 72%);
}
.libro__sombra--der {
  left: var(--pw);
  background: linear-gradient(90deg, rgba(42, 29, 24, .85), rgba(42, 29, 24, .12) 42%, transparent 72%);
}
.libro--suelto .libro__sombra--der { left: 0; }
.libro--suelto .libro__sombra--izq { display: none; }

/* --- La página ---------------------------------------------------------- */
.pagina {
  /* Toda la tipografía del libro sale de aquí: píxeles por la escala. `--esc`
     baja heredada del `.libro` —o la pone a mano la probeta al medir—, así que
     aquí no se declara: declararla la pisaría y el libro saldría siempre al
     mismo tamaño. */
  --p-xs:   calc(11px   * var(--esc));
  --p-sm:   calc(13px   * var(--esc));
  --p-base: calc(15.5px * var(--esc));
  --p-lg:   calc(21px   * var(--esc));
  --p-xl:   calc(31px   * var(--esc));
  --p-pad:  calc(38px   * var(--esc));

  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: var(--pw, auto);
  height: var(--ph, auto);
  padding: var(--p-pad) calc(var(--p-pad) * .92) calc(var(--p-pad) * 1.25);
  overflow: hidden;
  font-size: var(--p-base);
  /* Papel: crema con un poco de grano de fibra y el canto tostado. */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #FFFCF6, #FBF2E3);
  color: var(--tinta);
  backface-visibility: hidden;
}

/* El papel se oscurece hacia el pliegue, y cada página lleva ese tostado por
   el lado que da al lomo: la izquierda por la derecha y la derecha por la
   izquierda. Va en la propia página y no en el libro a propósito, porque las
   caras de la hoja que gira son páginas también —la cara es una página derecha
   y el dorso una izquierda— y así el lomo viaja con el papel en vez de quedarse
   pintado en el sitio. */
.libro__hueco--der .pagina,
.giro__cara .pagina {
  background-image:
    linear-gradient(90deg, rgba(169, 144, 124, .20), transparent 16%),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #FFFCF6, #FBF2E3);
}
.libro__hueco--izq .pagina,
.giro__dorso .pagina {
  background-image:
    linear-gradient(270deg, rgba(169, 144, 124, .20), transparent 16%),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #FFFCF6, #FBF2E3);
}

.pagina--vacia { background: linear-gradient(180deg, #FDF7EC, #F7EDDC); }

/* El folio cierra la página por abajo: el aire que sobra al final se lee
   entonces como margen y no como un corte. Va fuera del flujo para que no le
   quite sitio a los platos —el hueco lo reserva el relleno de la página. */
.pagina__folio {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--p-pad) * .48);
  text-align: center;
  font-family: var(--display);
  font-size: var(--p-sm);
  font-variant-numeric: tabular-nums;
  color: var(--arena);
}

/* La copia con la que se mide: fuera de la vista, con el ancho y la escala de
   una página de verdad y las mismas tipografías. El alto lo pone el contenido
   —es justo lo que se quiere saber—, así que aquí `inset` va antes que `left`
   y `top`: al revés los anularía. */
.pagina--probeta {
  position: absolute;
  inset: auto;
  left: 0;
  top: 0;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  overflow: visible;
  background: none;
}

/* --- Portada y cierre ---------------------------------------------------- */
.pagina--portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--esc));
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(240, 144, 30, .12), transparent 62%),
    linear-gradient(180deg, #FFFCF6, #F6E9D4);
}
.portada__marca {
  width: calc(96px * var(--esc));
  height: auto;
  margin-bottom: calc(6px * var(--esc));
}
.portada__kicker {
  font-family: var(--sans);
  font-size: var(--p-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--arena);
}
.portada__titulo {
  font-family: var(--display);
  font-size: calc(var(--p-xl) * 1.5);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--rojo-osc);
}
.portada__pie {
  font-family: var(--script);
  font-size: calc(var(--p-lg) * 1.05);
  line-height: 1.25;
  color: var(--tinta-2);
}

.pagina--cierre {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(18px * var(--esc));
}
.cierre__foto {
  margin: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: calc(14px * var(--esc));
  box-shadow: var(--sombra-m);
}
.cierre__foto img { width: 100%; height: 100%; object-fit: cover; }
.cierre__pie {
  text-align: center;
  font-family: var(--script);
  font-size: var(--p-lg);
  line-height: 1.3;
  color: var(--tinta-2);
}

/* --- La hoja que gira ----------------------------------------------------
   Va en 3D de verdad (preserve-3d) para que la perspectiva del contenedor
   alcance a todas las tiras; por eso nada de opacidad ni de filtros aquí
   dentro salvo en los velos, que son las hojas del árbol: en cualquier punto
   intermedio aplanarían el volumen. */
.giro {
  position: absolute;
  top: 0;
  left: var(--pw);
  width: var(--pw);
  height: var(--ph);
  transform-origin: left center;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 6;
}
.libro--suelto .giro { left: 0; }

.giro__tira {
  position: absolute;
  top: 0;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
}

/* Cada cara es una ventana con la página entera corrida por debajo, para que
   asome justo la franja que le toca. Entre tiras se pisan un pelo para que la
   curva no enseñe las juntas. */
.giro__cara,
.giro__dorso {
  position: absolute;
  top: 0;
  left: 0;
  right: -1px;          /* las tiras se pisan un pelo: sin él, la curva enseña las juntas */
  bottom: 0;
  overflow: hidden;
  backface-visibility: hidden;
}
.giro__dorso { transform: rotateY(180deg); }

.giro__lienzo {
  position: absolute;
  top: 0;
  height: var(--ph);
}

/* --- La luz de la hoja ---------------------------------------------------
   **Dos velos por cara, no uno.** Uno pegado al lomo y otro al canto, cada uno
   desvaneciéndose hacia el contrario, y el JS le pone a cada uno la luz que le
   toca a *su borde*. Así el valor con el que termina una tira es exactamente
   el que estrena la siguiente y la sombra sale continua de punta a punta.

   Con un solo velo por tira —un valor plano para toda su anchura— cada junta
   era un escalón de luz, y las seis juntas seguidas se leían como arrugas
   verticales: la hoja parecía un acordeón. */
.giro__velo {
  position: absolute;
  inset: 0;
  opacity: 0;
}
/* En la cara, el lomo queda a la izquierda y el canto a la derecha */
.giro__cara  > .giro__velo--dentro { background: linear-gradient(to right, rgb(42, 29, 24), rgba(42, 29, 24, 0)); }
.giro__cara  > .giro__velo--fuera  { background: linear-gradient(to left,  rgb(42, 29, 24), rgba(42, 29, 24, 0)); }
/* El dorso va volteado: lo que allí se escribe a la izquierda sale a la
   derecha, así que los dos degradados van al revés. */
.giro__dorso > .giro__velo--dentro { background: linear-gradient(to left,  rgb(42, 29, 24), rgba(42, 29, 24, 0)); }
.giro__dorso > .giro__velo--fuera  { background: linear-gradient(to right, rgb(42, 29, 24), rgba(42, 29, 24, 0)); }

/* Mientras pasa una hoja, las páginas quietas no responden al ratón: el hover
   de un precio a medio tapar delata que debajo hay otra cosa. */
.escena--girando .pagina { pointer-events: none; }

/* --- Pasapáginas --------------------------------------------------------- */
.carta__paso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: clamp(1.1rem, .8rem + .9vw, 1.7rem);
}
.carta__flecha {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--linea);
  border-radius: 99px;
  color: var(--tinta);
  transition: background var(--d-rapido) var(--ease),
              color var(--d-rapido) var(--ease),
              border-color var(--d-rapido) var(--ease),
              transform var(--d-rapido) var(--ease-suave),
              opacity var(--d-rapido) var(--ease);
}
.carta__flecha svg { width: 17px; height: 17px; }
.carta__flecha:hover:not(:disabled) {
  background: linear-gradient(140deg, var(--rojo), var(--rojo-osc));
  border-color: transparent;
  color: var(--crema);
}
.carta__flecha[data-paso="-1"]:hover:not(:disabled) { transform: translateX(-3px); }
.carta__flecha[data-paso="1"]:hover:not(:disabled)  { transform: translateX(3px); }
.carta__flecha:disabled { opacity: .28; cursor: default; }

.carta__folio {
  min-width: 17ch;
  text-align: center;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

/* --- Lo que va impreso en la página -------------------------------------- */
.carta__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(8px * var(--esc));
  padding-bottom: calc(11px * var(--esc));
  margin-bottom: calc(15px * var(--esc));
  border-bottom: 1.5px solid var(--linea);
}
.carta__encabezado h3 {
  font-size: var(--p-xl);
  letter-spacing: -.03em;
  line-height: 1.05;
}
.carta__encabezado span {
  font-family: var(--script);
  font-size: calc(var(--p-lg) * .95);
  line-height: 1.1;
  color: var(--arena);
}

/* La primera cabecera de la página abre; las de las categorías que entran
   después necesitan aire por arriba. */
.pagina > .carta__encabezado:not(:first-child) { margin-top: calc(26px * var(--esc)); }

/* La cabecera repetida cuando una categoría parte de página: la misma, más
   callada, para que se vea que es la de antes y no una nueva. */
.carta__encabezado--sigue {
  padding-bottom: calc(8px * var(--esc));
  margin-bottom: calc(11px * var(--esc));
  border-bottom-width: 1px;
  border-bottom-style: dashed;
}
.carta__encabezado--sigue h3 { font-size: var(--p-lg); color: var(--tinta-2); }
.carta__encabezado--sigue span { font-size: calc(var(--p-base) * 1.1); }

/* La nota de una categoría —hoy sólo el bar, que va únicamente en la sede sur.
   Ocupa la fila entera (`flex-basis: 100%`) debajo del título y el kicker, que
   van uno a cada lado; sin eso se metería como una tercera columna del flex y
   partiría la cabecera. Va en rojo de marca y en versalitas: es una condición
   de servicio, no un adorno, y tiene que leerse antes que los precios. */
.carta__nota {
  flex: 1 0 100%;
  margin-top: calc(6px * var(--esc));
  font-family: var(--sans);
  font-size: calc(var(--p-xs) * 1.05);
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.35;
  color: var(--rojo);
}
/* En la cabecera repetida se dice más corto y más bajito: ya se leyó entera
   en la primera hoja de la categoría, aquí sólo hace de recordatorio. */
.carta__encabezado--sigue .carta__nota {
  margin-top: calc(3px * var(--esc));
  font-weight: 500;
  opacity: .8;
}

.linea-plato {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(4px * var(--esc)) calc(10px * var(--esc));
  align-items: baseline;
  padding-block: calc(11px * var(--esc));
  border-bottom: 1px dashed var(--linea-sutil);
  transition: background var(--d-rapido) var(--ease);
}
.linea-plato:hover { background: linear-gradient(90deg, rgba(253, 244, 231, .9), transparent); }
.linea-plato__nombre {
  font-family: var(--display);
  font-size: var(--p-base);
  font-weight: 600;
  letter-spacing: -.014em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(6px * var(--esc));
}
.linea-plato__extra {
  font-family: var(--sans);
  font-size: var(--p-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crema);
  background: var(--arena);
  padding: .18em .6em;
  border-radius: 99px;
}
.linea-plato__desc {
  grid-column: 1 / -1;
  font-size: var(--p-sm);
  color: var(--tinta-2);
  line-height: 1.5;
  max-width: 52ch;
}

/* --- El precio de la carta ------------------------------------------------
   Es lo que la gente viene a mirar, así que aquí no es la pastilla apagada del
   resto de la página: papel crema con filo rojo, la cifra en la tipografía de
   los títulos y un brillo que la cruza una sola vez al posarse la hoja. La
   pastilla de las otras secciones (portada, promos, destacados) no se toca. */
.precio--carta {
  padding: .34em .95em;
  background: linear-gradient(150deg, #FFFDF8, var(--crema-2));
  color: var(--rojo-osc);
  font-family: var(--display);
  font-size: var(--p-base);
  font-weight: 600;
  letter-spacing: -.01em;
  border: 1px solid rgba(176, 30, 36, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85),
              0 3px 10px -6px rgba(42, 29, 24, .5);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--d-rapido) var(--ease),
              border-color var(--d-rapido) var(--ease),
              transform var(--d-rapido) var(--ease-suave),
              box-shadow var(--d-rapido) var(--ease);
}

/* El fondo rojo del hover vive en una capa aparte: así entra por opacidad sin
   arrastrar el degradado del papel ni el brillo. */
.precio--carta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(140deg, var(--rojo), var(--rojo-osc));
  opacity: 0;
  transition: opacity var(--d-rapido) var(--ease);
}
.linea-plato:hover .precio--carta {
  color: var(--crema);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(176, 30, 36, .75);
}
.linea-plato:hover .precio--carta::before { opacity: 1; }

/* El destello: una franja de luz que cruza la pastilla. Va en ::after para que
   el `overflow: hidden` de la pastilla la recorte y no se salga por los lados. */
.precio--carta::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -45%;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent);
  transform: translateX(-260%) rotate(8deg);
  opacity: 0;
}

/* Al posarse la hoja, un brillo recorre los precios escalonados —`--n` es el
   sitio del plato en su página, lo pone el JS—. Sólo el brillo: el precio no
   aparece ni desaparece, siempre está puesto. Tope a los catorce para que el
   último no llegue tarde. */
@keyframes precio-brillo {
  from { opacity: 0; transform: translateX(-260%) rotate(8deg); }
  25%  { opacity: 1; }
  to   { opacity: 0; transform: translateX(360%) rotate(8deg); }
}
.pagina.entrando .precio--carta::after {
  animation: precio-brillo .85s var(--ease-io) backwards;
  animation-delay: calc(min(var(--n, 0), 14) * 34ms);
}

/* En la hoja que gira no: ahí el papel ya está pasando y el brillo se pisaría
   con el movimiento. Los precios de la hoja van quietos. */
.giro .precio--carta::after { animation: none; }
.giro .linea-plato { transition: none; }

/* --------------------------------------------------------------------------
   16. Galería
   -------------------------------------------------------------------------- */
/* Mosaico: rejilla densa con alturas alternadas — ritmo irregular controlado */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr));
  grid-auto-rows: clamp(84px, 8.4vw, 132px);
  grid-auto-flow: dense;
  gap: clamp(.7rem, .4rem + .9vw, 1.15rem);
}
.galeria__item { grid-row: span 2; }
.galeria__item:nth-child(7n + 1) { grid-row: span 3; }
.galeria__item:nth-child(7n + 5) { grid-row: span 3; }
.galeria__item:nth-child(11n + 4) { grid-column: span 2; grid-row: span 2; }

.galeria__item {
  border-radius: var(--radio-s);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  background: var(--crema-3);
  display: block;
  width: 100%;
  box-shadow: var(--sombra-s);
}
.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.05s var(--ease), filter var(--d-medio) var(--ease);
}
.galeria__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(90, 14, 17, .58), transparent 52%);
  opacity: 0;
  transition: opacity var(--d-medio) var(--ease);
}
.galeria__item:hover img { transform: scale(1.07); filter: saturate(1.12); }
.galeria__item:hover::after { opacity: 1; }
.galeria__lupa {
  position: absolute;
  right: .7rem; bottom: .7rem;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(253, 244, 231, .94);
  color: var(--rojo);
  opacity: 0;
  transform: scale(.6) rotate(-30deg);
  transition: opacity var(--d-medio) var(--ease), transform var(--d-medio) var(--ease);
}
.galeria__item:hover .galeria__lupa { opacity: 1; transform: none; }
.galeria__lupa svg { width: 17px; height: 17px; }

/* Visor */
.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 8, 6, .93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-medio) var(--ease), visibility var(--d-medio);
}
.visor.abierto { opacity: 1; visibility: visible; }
.visor img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  border-radius: var(--radio-s);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
  transform: scale(.92);
  transition: transform var(--d-medio) var(--ease);
}
.visor.abierto img { transform: none; }
.visor__cerrar,
.visor__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(253, 244, 231, .12);
  border: 1px solid rgba(253, 244, 231, .24);
  color: var(--crema);
  transition: background var(--d-rapido) var(--ease), transform var(--d-rapido) var(--ease);
}
.visor__cerrar:hover, .visor__nav:hover { background: var(--rojo); transform: scale(1.09); }
.visor__cerrar { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.visor__nav--prev { left: clamp(.6rem, 2.4vw, 2rem); top: 50%; translate: 0 -50%; }
.visor__nav--next { right: clamp(.6rem, 2.4vw, 2rem); top: 50%; translate: 0 -50%; }
.visor__cerrar svg, .visor__nav svg { width: 21px; height: 21px; }
.visor__contador {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  translate: -50% 0;
  color: rgba(253, 244, 231, .7);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   17. Reseñas
   -------------------------------------------------------------------------- */
/* Dos cintas que corren en sentidos contrarios. La rejilla anterior mostraba
   ocho reseñas quietas y se leía como un formulario; con doscientas nueve
   detrás, lo que hay que transmitir es *cantidad*, y para eso el material
   tiene que pasar. Van en sentidos opuestos a propósito: dos filas hacia el
   mismo lado se leen como una sola cosa deslizándose y el ojo se despega. */
.resenas {
  background: var(--crema-2);
  /* Las cintas corren de borde a borde; sin esto aparece barra horizontal en
     toda la página. */
  overflow: hidden;
}

.resenas__marco {
  position: relative;
  margin-top: clamp(1.8rem, 1.1rem + 2.2vw, 3rem);
  padding: clamp(1.2rem, .8rem + 1.6vw, 2.2rem) 0;
}

/* Los dos bordes se disuelven contra el fondo de la sección. Es un degradado
   plano y no una máscara: el fondo es un color liso, así que sale igual y no
   obliga al navegador a componer una capa más por cada cuadro. */
.resenas__marco::before,
.resenas__marco::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(38px, 9vw, 150px);
  z-index: 2;
  pointer-events: none;
}
.resenas__marco::before { left: 0;  background: linear-gradient(90deg, var(--crema-2) 12%, transparent); }
.resenas__marco::after  { right: 0; background: linear-gradient(270deg, var(--crema-2) 12%, transparent); }

.resenas__cintas {
  --tira-hueco: clamp(.85rem, .6rem + .9vw, 1.35rem);
  display: grid;
  gap: var(--tira-hueco);
  /* Rectas y a lo ancho de la pantalla: van alineadas con el resto de la
     página. Llevaban una inclinación de -1,3° y Denisse la pidió quitar
     (2026-08-13) — se veía torcido contra las demás secciones. */
  width: 100%;
}

.tira { overflow: hidden; }

.tira__cinta {
  display: flex;
  width: max-content;
  /* Dos grupos idénticos, así que un desplazamiento del 50 % deja el segundo
     exactamente donde estaba el primero y la costura no existe. El hueco va
     como `margin-right` de cada tarjeta —y no como `gap` de la cinta— justo
     por eso: con `gap` el 50 % cae medio hueco corrido y da un tirón por vuelta. */
  animation: tira-correr var(--vuelta, 68s) linear infinite;
  will-change: transform;
}
.tira--b .tira__cinta { animation-direction: reverse; --vuelta: 84s; }

.tira__grupo { display: flex; align-items: stretch; }

@keyframes tira-correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* No se para nunca, ni al pasar el cursor por encima ni al pulsar: lo pidió
   así Denisse (2026-08-13). Antes se pausaba en :hover / :focus-within. */

.resena {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  width: clamp(250px, 23vw, 330px);
  margin-right: var(--tira-hueco);
  padding: 1.6rem 1.5rem 1.35rem;
  border-radius: var(--radio);
  background: var(--surface);
  box-shadow: var(--sombra-s);
  transition: transform var(--d-medio) var(--ease), box-shadow var(--d-medio) var(--ease);
}
/* El filo de color dice de qué sede habla sin gastar una línea de texto:
   rojo la sur, naranja la norte — el mismo par que el pie y las insignias. */
.resena::after {
  content: '';
  position: absolute;
  left: 1.5rem; right: 1.5rem; top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--rojo);
}
.resena--norte::after { background: var(--naranja); }
/* La tarjeta NO reacciona al cursor (2026-08-13). Llevaba
   `translateY(-5px) rotate(-.4deg)`, que iba de la mano con la pausa al pasar
   por encima: parabas la cinta y la tarjeta se levantaba un poco. Quitada la
   pausa, la cinta sigue corriendo y ese efecto se convierte en tarjetas que se
   alzan y se inclinan una tras otra según van pasando bajo el cursor — que es
   justo lo que Denisse veía como «torcido, como si estuvieran subiendo».
   Con la cinta en marcha, lo correcto es que la tarjeta no se mueva. */
.resena::before {
  content: '\201C';
  position: absolute;
  top: -.1em; right: .28em;
  font-family: var(--display);
  font-size: 5.4rem;
  line-height: 1;
  color: var(--crema-3);
  opacity: .75;
  pointer-events: none;
}
.resena__estrellas { display: flex; gap: 2px; color: var(--naranja); }
.resena__estrellas svg { width: 15px; height: 15px; }
.resena p {
  font-size: var(--t-sm);
  color: var(--tinta-2);
  line-height: 1.6;
  position: relative;
  flex: 1;
}
.resena__autor {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--linea);
}
.resena__inicial {
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--rojo), var(--rojo-osc));
  color: var(--crema);
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
}
.resena--norte .resena__inicial { background: linear-gradient(145deg, var(--naranja), var(--rojo)); }
.resena__autor > div { min-width: 0; }
.resena__autor b {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resena__autor span { font-size: var(--t-xs); color: var(--tinta-3); }
/* La G de Google, con sus cuatro colores. Va aquí y no un «Reseña en Google»
   escrito porque el logo se reconoce sin leerlo, y en una tarjeta que pasa
   moviéndose no hay tiempo de leer nada que no sea la reseña. */
.resena__g { width: 17px; height: 17px; flex: none; margin-left: auto; opacity: .95; }

.resenas__pie {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.8rem, 1.1rem + 2vw, 3rem);
}

@media (max-width: 700px) {
  .tira__cinta { --vuelta: 54s; }
  .tira--b .tira__cinta { --vuelta: 66s; }
  .resena { width: min(74vw, 290px); padding: 1.35rem 1.25rem 1.15rem; gap: .7rem; }
  .resena::before { font-size: 4.4rem; }
}

/* Sin movimiento las cintas se quedan quietas y se recorren con el dedo o con
   la rueda: la información sigue estando toda, sólo que no viene sola. */
@media (prefers-reduced-motion: reduce) {
  .tira {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: .4rem;
  }
  .tira__cinta { animation: none; }
  .tira__grupo + .tira__grupo { display: none; }
  .resena { scroll-snap-align: center; }
}

/* --------------------------------------------------------------------------
   18. Visítanos
   -------------------------------------------------------------------------- */
/* Las dos sedes van una debajo de otra, cada una con su foto, su dirección y
   su horario. No se ponen lado a lado a propósito: son dos direcciones
   distintas con horarios distintos, y en dos columnas estrechas la gente
   mezcla los datos de una con los de la otra. */
.sedes { display: grid; gap: clamp(2.8rem, 1.8rem + 4.5vw, 5rem); }
.sedes .visita__grid { margin-top: clamp(1.2rem, .9rem + 1.4vw, 2rem); }

.sede__cabecera {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .55rem .9rem;
  padding-bottom: .7rem;
  border-bottom: 1.5px solid var(--linea);
}
.sede__titulo {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
/* La pastilla que nombra la sede. Cada una lleva su color de marca —la sur el
   rojo, la norte el naranja— y ese mismo par se repite en el pie: es lo que
   permite reconocer de qué sede habla un dato sin volver a leer la dirección. */
.sede__insignia {
  flex: none;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crema);
  background: var(--rojo);
  padding: .34em .85em;
  border-radius: 99px;
}
.sede--norte .sede__insignia { background: var(--naranja); color: #4A2D06; }

/* Un dato que condiciona el servicio de esa sede (hoy: el bar, que sólo está
   en la sur). Va pegado a la fila de la dirección, con filo del color de su
   sede, para que se lea como una propiedad del local y no como una promoción. */
.info__aviso {
  margin-top: .6rem;
  padding: .55rem .8rem;
  border-left: 3px solid var(--rojo);
  border-radius: 0 10px 10px 0;
  background: var(--crema-2);
  font-size: var(--t-sm);
  color: var(--tinta-2);
}
.info__aviso b { font-weight: 600; color: var(--tinta); }
.sede--norte .info__aviso { border-left-color: var(--naranja); }

.visita__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(1.6rem, 1rem + 3vw, 3.6rem);
  align-items: start;
}

/* En pantalla ancha la segunda sede invierte foto e información, para que las
   dos fichas no se lean como la misma plantilla repetida. Sólo cuando la
   rejilla va de verdad en dos columnas: al colapsar a una, `order` mandaría la
   foto debajo de los datos y la sede norte abriría con un muro de texto. */
@media (min-width: 880px) {
  .sede:nth-of-type(even) .visita__media { order: 2; }
}
.visita__media {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-l);
  aspect-ratio: 4 / 3.4;
  position: relative;
}
.visita__media img { width: 100%; height: 100%; object-fit: cover; }

/* El Instagram va suelto bajo las dos fichas, no dentro de ninguna: es de la
   marca, no de un local. Con el ancho de una columna para que no quede una
   línea de texto cruzando la página entera. */
.visita__redes {
  margin-top: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  padding-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  border-top: 1px solid var(--linea-sutil);
  max-width: 46ch;
}

.info { display: grid; gap: 1.35rem; }
.info__fila { display: flex; gap: 1rem; align-items: flex-start; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linea-sutil); }
.info__fila:last-of-type { border-bottom: 0; padding-bottom: 0; }
.info__icono {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--crema-2);
  color: var(--rojo);
  transform: rotate(-4deg);
  transition: transform var(--d-medio) var(--ease), background var(--d-medio) var(--ease), color var(--d-medio) var(--ease);
}
.info__fila:hover .info__icono { transform: rotate(6deg) scale(1.07); background: var(--rojo); color: var(--crema); }
.info__icono svg { width: 20px; height: 20px; }
.info__texto h4 { font-size: var(--t-base); font-weight: 600; margin-bottom: .18rem; }
.info__texto p, .info__texto a { font-size: var(--t-sm); color: var(--tinta-2); }
.info__texto a:hover { color: var(--rojo); }
.info__horario { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); color: var(--tinta-2); }
.info__horario + .info__horario { margin-top: .3rem; }
.info__horario b { font-weight: 500; color: var(--tinta); }

.abierto-ahora {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3em .8em;
  border-radius: 99px;
  background: rgba(46, 133, 76, .12);
  color: #2E854C;
}
.abierto-ahora.cerrado { background: rgba(176, 30, 36, .1); color: var(--rojo); }
.abierto-ahora i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulso 2.1s var(--ease-io) infinite;
}
@keyframes pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.75); }
}

/* --------------------------------------------------------------------------
   19. Pie
   -------------------------------------------------------------------------- */
.pie {
  position: relative;
  background: var(--nori);
  color: rgba(253, 244, 231, .74);
  padding-block: clamp(3.2rem, 2rem + 4vw, 5.5rem) 2rem;
  overflow: hidden;
}
.pie::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 12% 0%, rgba(176, 30, 36, .30), transparent 62%);
  pointer-events: none;
}
.pie__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(1.8rem, 1rem + 3vw, 3.5rem);
  padding-bottom: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem);
}
.pie__marca { display: grid; gap: 1rem; justify-items: start; }
.pie__marca img { width: 104px; }
.pie__marca p { font-family: var(--script); font-size: 1.42rem; color: var(--crema-2); line-height: 1.15; max-width: 20ch; }
.pie h4 {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--naranja-cl);
  margin-bottom: 1rem;
}
.pie li + li { margin-top: .55rem; }
/* La salvedad del bar en el índice de la carta: se lee, pero no compite con el
   nombre de la categoría. */
.pie small { font-size: .82em; opacity: .62; }
.pie a { font-size: var(--t-sm); transition: color var(--d-rapido) var(--ease), padding-left var(--d-rapido) var(--ease); }
.pie a:hover { color: var(--crema); padding-left: 5px; }
.pie__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.7rem;
  border-top: 1px solid rgba(253, 244, 231, .13);
  font-size: var(--t-xs);
  color: rgba(253, 244, 231, .5);
}
.pie__redes { display: flex; gap: .6rem; }
.pie__redes a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(253, 244, 231, .09);
  color: var(--crema);
  transition: background var(--d-rapido) var(--ease), transform var(--d-rapido) var(--ease);
}
.pie__redes a:hover { background: var(--rojo); transform: translateY(-3px) scale(1.08); padding-left: 0; }
.pie__redes svg { width: 18px; height: 18px; }

/* Los tres enlaces de redes del final de «Visítanos». Píldoras y no palabras
   subrayadas: es lo último que se ve antes del pie, y es donde alguien que hoy
   no va a pedir se lleva algo. */
.redes { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }

.redes__enlace {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border: 1px solid var(--linea-sutil);
  border-radius: 999px;
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: .04em;
  color: var(--crema);
  text-decoration: none;
  transition: background var(--d-rapido) var(--ease), border-color var(--d-rapido) var(--ease),
              transform var(--d-rapido) var(--ease);
}

.redes__enlace svg { width: 16px; height: 16px; flex: none; }

.redes__enlace:hover {
  background: rgba(253, 244, 231, .08);
  border-color: rgba(253, 244, 231, .34);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .redes__enlace:hover { transform: none; }
}

/* Aquí vivía el botón verde flotante de WhatsApp (esquina inferior derecha).
   Se quitó a petición de Denisse: hacía exactamente lo mismo que el naranja de
   la barra, que ahora sale también en móvil. */

/* --------------------------------------------------------------------------
   20. Sistema de revelado — una misma gramática para toda la página
   -------------------------------------------------------------------------- */
.rv {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--d-lento) var(--ease), transform var(--d-lento) var(--ease);
  will-change: opacity, transform;
}
.rv.visible { opacity: 1; transform: none; will-change: auto; }

/* Corte diagonal: el gesto característico de la marca.
   Se resuelve con una cortina que se retira en diagonal — nunca recortando el
   propio elemento, porque un recorte a área cero impide que IntersectionObserver
   lo detecte y el revelado no llegaría a dispararse nunca. */
.rv-corte { position: relative; overflow: hidden; }
.rv-corte::after {
  content: '';
  position: absolute;
  inset: -2px -14%;
  z-index: 4;
  background: var(--crema);
  transform: skewX(-9deg) scaleX(1);
  transform-origin: right center;
  transition: transform 1.25s var(--ease);
  pointer-events: none;
}
.rv-corte.visible::after { transform: skewX(-9deg) scaleX(0); }
.rv-corte > * {
  transform: scale(1.08);
  transition: transform 1.6s var(--ease);
}
.rv-corte.visible > * { transform: none; }

/* Escala suave para medios */
.rv-zoom {
  opacity: 0;
  transform: scale(.94);
  transition: opacity var(--d-lento) var(--ease), transform var(--d-epico) var(--ease);
}
.rv-zoom.visible { opacity: 1; transform: none; }

/* Texto por líneas al entrar en pantalla */
.rv-lineas .linea-mask > span {
  transform: translateY(105%) skewY(3.4deg);
  opacity: 0;
  animation: none;
  transition: transform 1.05s var(--ease), opacity .75s var(--ease);
}
.rv-lineas.visible .linea-mask > span { transform: none; opacity: 1; }
.rv-lineas.visible .linea-mask:nth-of-type(2) > span { transition-delay: .10s; }
.rv-lineas.visible .linea-mask:nth-of-type(3) > span { transition-delay: .20s; }

/* Escalonado en abanico para rejillas */
.rv-abanico > * {
  opacity: 0;
  transform: translateY(40px) rotate(-1.1deg);
  transition: opacity .85s var(--ease), transform .95s var(--ease);
}
.rv-abanico.visible > * { opacity: 1; transform: none; }
.rv-abanico.visible > *:nth-child(1) { transition-delay: .04s; }
.rv-abanico.visible > *:nth-child(2) { transition-delay: .12s; }
.rv-abanico.visible > *:nth-child(3) { transition-delay: .20s; }
.rv-abanico.visible > *:nth-child(4) { transition-delay: .28s; }
.rv-abanico.visible > *:nth-child(5) { transition-delay: .36s; }
.rv-abanico.visible > *:nth-child(6) { transition-delay: .44s; }
.rv-abanico.visible > *:nth-child(7) { transition-delay: .52s; }
.rv-abanico.visible > *:nth-child(8) { transition-delay: .60s; }

.rv-tarde { transition-delay: .14s; }

/* --------------------------------------------------------------------------
   21. Adaptación
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  .nav__menu { display: none; }
  .nav__toggle { display: flex; }
  .partido--invertido .partido__media { order: 0; }
  .galeria {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    grid-auto-rows: clamp(74px, 17vw, 108px);
  }
  .galeria__item:nth-child(11n + 4) { grid-column: span 1; }
}

/* Portátiles de poca altura: la portada se aprieta para que el titular y los
   botones entren completos sin que nada se recorte. El segundo nivel es para
   los 1366×768 de toda la vida, que dejan unos 660 px útiles. */
@media (min-width: 941px) and (max-height: 860px) {
  .portada h1 { font-size: clamp(2.2rem, 1rem + 3.3vw, 4rem); }
  .portada__lema { font-size: clamp(1.2rem, .9rem + 1.3vw, 1.85rem); }
  .portada__texto { font-size: var(--t-base); max-width: 46ch; }
  .portada__contenido { gap: clamp(.5rem, .35rem + .45vw, .9rem); }
}

@media (min-width: 941px) and (max-height: 730px) {
  .portada h1 { font-size: clamp(1.95rem, .9rem + 2.6vw, 3.1rem); }
  .portada__lema { font-size: clamp(1.05rem, .85rem + .9vw, 1.5rem); }
  .portada__texto { font-size: var(--t-sm); max-width: 54ch; }
  .portada__contenido { gap: clamp(.38rem, .3rem + .28vw, .68rem); }
}

/* El libro en pantalla de mano. Con la página estrecha la cabecera en línea no
   entra —el «Para abrir el apetito» se salía por el borde—, así que el kicker
   baja a su propio renglón. Los tamaños siguen saliendo de `--esc`: aquí sólo
   cambia la disposición, nunca la escala, o el libro dejaría de medir lo que
   el JS creyó que medía al repartir los platos. */
@media (max-width: 700px) {
  .carta__encabezado {
    display: block;
    padding-bottom: calc(8px * var(--esc));
    margin-bottom: calc(12px * var(--esc));
  }
  .carta__encabezado span {
    display: block;
    margin-top: calc(1px * var(--esc));
  }
  .pagina > .carta__encabezado:not(:first-child) { margin-top: calc(21px * var(--esc)); }

  .linea-plato__extra { letter-spacing: .06em; }
  .carta__paso { gap: .8rem; }
  .libro { padding: 0 8px; }
}

@media (max-width: 620px) {
  :root { --nav-h: 66px; }
  .portada { min-height: 92svh; }
  .portada__scroll { display: none; }
  .dato + .dato::before { display: none; }
  .confianza__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .cortina__contenido--derecha { margin-left: 0; }
  .resena::before { font-size: 4.5rem; }
}

/* --------------------------------------------------------------------------
   22. Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rv, .rv-corte, .rv-zoom, .rv-abanico > *, .rv-corte > *,
  .rv-lineas .linea-mask > span, .linea-mask > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .rv-corte::after { display: none; }
  .portada__lema, .portada__texto,
  .portada__acciones, .portada__scroll { opacity: 1; }
  /* Sin video: queda la foto, que es el primer cuadro de cada fondo */
  .video-fondo { display: none !important; }
}

/* --------------------------------------------------------------------------
   23. Impresión
   -------------------------------------------------------------------------- */
@media print {
  .nav, .progreso, .portada__scroll, .visor, .video-fondo { display: none !important; }
  .rv-corte::after { display: none !important; }
  body { background: #fff; }
  .rv, .rv-corte, .rv-zoom, .rv-abanico > *, .rv-corte > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}