/* ==========================================================================
   SUSHI PLUS CHICKEN — La entrada y las sedes
   Telón de carga + partidor de sedes (portada), y las piezas que sólo salen
   en las landings de sede: la píldora de la barra, el chip de la portada y la
   tarjeta de «la otra sede» (bloques 10 a 12).

   Dos piezas encadenadas sobre la misma capa:

     1. EL TELÓN. Tapa la página mientras se precargan de verdad las fotos que
        se van a ver enseguida. Termina en «toca para entrar» porque el
        navegador no deja sonar nada sin un gesto del usuario — así que ese
        gesto, en vez de esconderlo, se vuelve el momento de abrir.

     2. EL PARTIDOR. Las dos sedes, una a cada lado de un filo inclinado. El
        cursor mueve el filo; el lado al que te acercas se abre. Al elegir, ese
        lado se come la pantalla y de ahí se navega a su landing.

   La inclinación NO es decorativa ni inventada: es `--diag` (4.6°), el mismo
   corte diagonal que rige toda la página desde la carta impresa. Por eso el
   filo del partidor y las franjas de las secciones son la misma raya.

   Geometría del corte: una diagonal de 4.6° sobre un alto de 100vh se desvía
   tan(4.6°)·100vh = 8.05vh de punta a punta, o sea ±4.03vh respecto al centro.
   Ese número sale en todos los `polygon()` de aquí y es lo que mantiene el
   ángulo exacto sea cual sea el ancho de la ventana.
   ========================================================================== */

:root {
  --entrada-z:    9000;
  --corte-desvio: 4.03vh;   /* la mitad de la desviación de la diagonal */
  --filo-grosor:  1.5px;
}

/* La entrada existe en el HTML para que pinte en el primer cuadro, sin
   parpadeo de la página debajo. Pero sólo se muestra si el JS levantó la
   bandera: sin JS no hay nada que la pueda quitar, y dejar al visitante
   encerrado detrás de un telón muerto es peor que no tener entrada. */
.entrada { display: none; }
.con-entrada .entrada { display: block; }

.con-entrada.entrada-abierta,
.con-entrada.entrada-abierta body { overflow: hidden; }

.entrada {
  position: fixed;
  inset: 0;
  z-index: var(--entrada-z);
  background: var(--nori);
  overflow: hidden;
  /* La página de debajo no se toca mientras la entrada está puesta. */
  touch-action: none;
}

/* Al elegir sede se navega; la capa se va con un fundido corto para que el
   cambio de documento no se vea como un corte seco. */
.entrada--fuera {
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s var(--ease-io);
}


/* --------------------------------------------------------------------------
   1. El partidor — las dos hojas
   -------------------------------------------------------------------------- */
/* `--c` es dónde está el filo (0% = todo norte, 100% = todo sur). Lo mueve el
   JS con inercia; aquí no hay transición porque la suavidad la pone el
   amortiguador del rAF, no el motor de CSS: si además transicionara, el filo
   iría siempre por detrás del cursor y se sentiría pegajoso. */
.partidor {
  position: absolute;
  inset: 0;
  /* El reposo es 46, no 50: la sede norte —la que acaba de abrir— enseña algo
     más. El JS parte de este mismo número (`REPOSO`), o habría un salto en
     cuanto arranca. */
  --c: 46%;
}

.hoja {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: var(--crema);
  /* El recorte es lo único que se mueve al pasar el cursor. La foto de dentro
     está fija a la ventana (abajo), así que el lado no «crece»: se destapa.
     Esa diferencia es la que hace que se sienta un telón y no dos cajas. */
  will-change: clip-path;
}

.hoja--sur {
  clip-path: polygon(
    0 0,
    calc(var(--c) + var(--corte-desvio)) 0,
    calc(var(--c) - var(--corte-desvio)) 100%,
    0 100%);
}

.hoja--norte {
  clip-path: polygon(
    calc(var(--c) + var(--corte-desvio)) 0,
    100% 0,
    100% 100%,
    calc(var(--c) - var(--corte-desvio)) 100%);
}

/* La foto ocupa la ventana entera y no se entera del recorte: por eso al
   abrirse un lado aparece *más foto*, no la misma foto estirada. */
.hoja__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hoja__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Arranca un pelo ampliada y se asienta cuando ese lado gana: el
     movimiento es de la foto, no del recorte, y se leen como capas
     distintas a distinta profundidad. */
  /* 1.04 y no 1.08: el zoom de reposo se come un 3,7 % por cada lado, y por ahí
     se iba la S de «SUSHI», que arranca al 5 % de la foto. El asentamiento se
     sigue notando —es un movimiento, no una distancia— y el rótulo entra entero. */
  transform: scale(1.04);
  transition: transform 1.1s var(--ease), filter .5s var(--ease-suave);
  /* Las dos fachadas se rehicieron en hora azul (24 ago 2026): la luma media
     de la sur cayó de 165 a 83 y la de la norte de 122 a 75. Con las fotos
     viejas, de día, había que bajar el brillo para que el texto se apoyara;
     ahora la foto ya viene oscura de origen y bajarlo otra vez la volvía un
     rectángulo negro con un letrero rojo flotando. Así que el brillo SUBE.
     Por encima de 1.2 la hora azul se lava y se vuelve gris: 1.12 es el
     techo. El texto sigue apoyado en el velo, que no cambió. */
  filter: saturate(1.02) brightness(1.12);
  /* El apaisado de la sur es 16:9 y el letrero vive arriba: en pantallas más
     anchas que altas el recorte vertical se lo comía. Anclado al 14 % el
     rótulo entra siempre; la sobra se la lleva el zócalo, que no dice nada. */
  object-position: 50% 14%;
}

.hoja--norte .hoja__foto img { object-position: 50% 44%; }

.hoja--gana .hoja__foto img { transform: scale(1); filter: saturate(1.12) brightness(1.22); }
.hoja--pierde .hoja__foto img { transform: scale(1.09); filter: saturate(.9) brightness(.86); }

/* Velo: oscurece para que el texto se lea, y nada más.
   Antes cada lado llevaba un tinte de color fuerte —rojo en la sur— para
   distinguirlas. Estaba mal: un tinte plano encima de una foto desaturada
   deja de leerse como luz y empieza a leerse como un negativo mal revelado,
   sobre todo en la fachada de noche. Ahora el color casi no está: las dos
   caen a nori por abajo, y sólo cambia de qué esquina entra el calor —cálido
   en la sur, más frío y alto en la norte—. Lo que de verdad las separa es la
   foto, que ahora se ve. */
.hoja__velo {
  position: absolute;
  inset: 0;
  transition: opacity .5s var(--ease-suave);
}

/* La primera capa es la que sostiene el texto: baja desde el canto exterior
   —que es donde vive— hacia el lomo. Sin ella, el texto de la norte cae justo
   encima de la cartelería del local (el logo y los teléfonos pintados en la
   vidriera) y hay que forzar la vista para leerlo. Con una foto de fachada no
   se puede confiar en que el sitio del texto esté limpio: hay que fabricarlo. */
/* El velo trabaja por franjas, no por manta: fuerte donde de verdad se apoya
   el texto —el canto exterior— y casi nulo en el tercio donde está la fachada.
   La capa de arriba baja poco (.06): ahí es donde vive el rótulo. */
.hoja--sur .hoja__velo {
  background:
    linear-gradient(90deg, rgba(16, 11, 9, .8) 0%, rgba(16, 11, 9, .34) 40%, transparent 64%),
    linear-gradient(180deg, rgba(22, 16, 13, .06) 0%, rgba(22, 16, 13, .3) 58%, rgba(16, 11, 9, .8) 100%),
    radial-gradient(130% 100% at 18% 26%, rgba(240, 144, 30, .14), transparent 62%);
}

.hoja--norte .hoja__velo {
  background:
    linear-gradient(270deg, rgba(12, 9, 8, .8) 0%, rgba(12, 9, 8, .34) 40%, transparent 64%),
    linear-gradient(180deg, rgba(22, 16, 13, .06) 0%, rgba(22, 16, 13, .3) 58%, rgba(12, 9, 8, .82) 100%),
    radial-gradient(120% 90% at 88% 34%, rgba(251, 210, 75, .16), transparent 60%);
}

/* Grano finísimo encima de todo: sin él los degradados sobre foto oscura
   hacen bandas en pantallas de 8 bits. */
.hoja__velo::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   2. El texto de cada hoja
   -------------------------------------------------------------------------- */
/* Va anclado a su mitad, no centrado en la hoja: si se centrara en el área
   recortada, al moverse el filo el texto bailaría de lado a lado. */
.hoja__texto {
  position: absolute;
  top: 50%;
  width: min(46vw, 30rem);
  transform: translateY(-50%);
  padding: 0 clamp(1.2rem, 3vw, 3rem);
  text-align: left;
}

.hoja--sur   .hoja__texto { left: 0;  padding-left: clamp(1.6rem, 6vw, 6.5rem); }
.hoja--norte .hoja__texto { right: 0; padding-right: clamp(1.6rem, 6vw, 6.5rem); text-align: right; }

.hoja__kicker {
  display: inline-block;
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--naranja-cl);
  padding: .5rem .8rem;
  border: 1px solid rgba(247, 183, 51, .38);
  border-radius: 999px;
  margin-bottom: 1.1rem;
}

/* La chapa de la sede nueva. Rellena, no de contorno: es la diferencia entre
   «un dato más» y «esto es la noticia». Late despacio —2,8 s— y sólo el halo,
   que no mueve el texto ni el sitio de nada: un letrero que salta cansa a los
   diez segundos. */
.hoja__kicker--nueva {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--nori);
  background: linear-gradient(120deg, var(--amarillo) 0%, var(--naranja) 100%);
  border: 0;
  padding: .58rem 1rem;
  box-shadow: 0 8px 22px -8px rgba(251, 210, 75, .7);
  animation: chapa-late 2.8s var(--ease-suave) 1.2s infinite;
  position: relative;
  overflow: hidden;
}

@keyframes chapa-late {
  0%, 100% { box-shadow: 0 8px 22px -8px rgba(251, 210, 75, .7), 0 0 0 0 rgba(251, 210, 75, .38); }
  55%      { box-shadow: 0 8px 22px -8px rgba(251, 210, 75, .7), 0 0 0 14px rgba(251, 210, 75, 0); }
}

/* Un brillo que cruza la chapa de vez en cuando, como el reflejo de un cartel
   nuevo. Va por dentro (`overflow: hidden`), así que no ensucia nada. */
.hoja__kicker--nueva::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: chapa-brillo 4.2s var(--ease-io) 2s infinite;
}

@keyframes chapa-brillo {
  0%        { left: -60%; }
  28%, 100% { left: 130%; }
}

.hoja__chispa { display: inline-flex; }
.hoja__chispa svg { width: 13px; height: 13px; display: block; }

/* La estrella gira despacio sobre sí misma: es el único movimiento continuo
   de toda la pantalla y es lo que le da el aire de celebración. */
.hoja__kicker--nueva .hoja__chispa { animation: chispa-gira 6s linear infinite; }

@keyframes chispa-gira {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hoja__titulo {
  font: 600 var(--t-2xl)/.92 var(--display);
  margin: 0 0 .35rem;
  letter-spacing: -.02em;
}

.hoja__titulo em {
  display: block;
  font-style: normal;
  color: var(--amarillo);
}

.hoja__zona {
  font: 400 var(--t-md)/1.3 var(--sans);
  color: rgba(253, 244, 231, .82);
  margin: 0 0 1.2rem;
}

.hoja__datos {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .55rem;
  font: 500 var(--t-sm)/1 var(--sans);
}

.hoja--norte .hoja__datos { justify-content: flex-end; }

.hoja__datos li {
  padding: .48rem .78rem;
  border-radius: 999px;
  background: rgba(253, 244, 231, .10);
  border: 1px solid rgba(253, 244, 231, .16);
  color: rgba(253, 244, 231, .92);
  backdrop-filter: blur(6px);
}

/* La frase con la que se vende cada sede. La de la norte va más fuerte: es la
   que acaba de abrir y es la que hay que empujar. */
.hoja__nota {
  font: 400 var(--t-base)/1.45 var(--display);
  color: rgba(253, 244, 231, .78);
  margin: 0 0 1.2rem;
  max-width: 24ch;
}

.hoja--norte .hoja__nota { margin-left: auto; }

.hoja__nota--fuerte {
  color: var(--crema);
  font-weight: 600;
}

/* Ya no hay botón «Entrar» en cada lado: se entra tocando el lado, y punto.
   Lo que marca que hay algo que tocar es que el lado se abre al acercarse y
   el texto se levanta. */
.hoja { cursor: pointer; }
.hoja__texto { transition: transform .55s var(--ease-suave), opacity .28s var(--ease-io); }
.hoja--gana .hoja__texto { transform: translateY(calc(-50% - 6px)); }

/* El lado que pierde apaga su texto. No es un adorno: al estrecharse a un
   cuarto de pantalla, su bloque de texto —que mide hasta 30 rem— se sale por
   el recorte y se lee «…os · La Castellana», «cabamos de abrir». Cortado a
   media palabra parece un fallo de maquetación. Apagado, se lee como lo que
   es: la opción que ahora mismo no estás mirando. Vuelve sola al separarse. */
.hoja--pierde .hoja__texto { opacity: 0; }

/* La entrada del texto: sube por debajo de su propia máscara cuando el telón
   ya se abrió. Escalonado por `--n` para que no lleguen los cuatro bloques a
   la vez. */
.hoja__texto > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--n, 0) * 70ms + 120ms);
}

.entrada--partido .hoja__texto > * { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   3. El filo
   -------------------------------------------------------------------------- */
/* Es una sola raya inclinada 4.6° siguiendo a `--c`. Se dibuja aparte de las
   hojas porque el borde de un `clip-path` no se puede iluminar. */
.filo {
  position: absolute;
  top: -12vh;
  bottom: -12vh;
  left: var(--c);
  width: var(--filo-grosor);
  margin-left: calc(var(--filo-grosor) / -2);
  transform: rotate(var(--diag));
  transform-origin: center;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(251, 210, 75, .10) 12%,
    rgba(253, 244, 231, .85) 50%,
    rgba(251, 210, 75, .10) 88%,
    transparent 100%);
  box-shadow: 0 0 24px rgba(251, 210, 75, .35);
  pointer-events: none;
}

/* El nudo del filo: el punto donde el cursor «agarra» la raya. Era un maki
   dibujado que rodaba mientras viajaba; desde el 24 ago 2026 es el logo, y el
   logo no rueda —lleva el nombre dentro—. Lo que sí cambia es el tamaño: a los
   54 px del maki el logotipo no se leía, y un sello ilegible es ruido. A 74 px
   se lee el nombre y sigue cabiendo en la raya. */
.filo__nudo {
  position: absolute;
  left: 50%;
  top: var(--nudo, 50%);
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  /* Deshace la inclinación del filo: el logo va derecho aunque la raya no. */
  transform: rotate(calc(var(--diag) * -1));
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .55));
  transition: opacity .4s var(--ease-suave), width .4s var(--ease-suave),
              height .4s var(--ease-suave), margin .4s var(--ease-suave);
}

.filo__nudo img { display: block; width: 100%; height: 100%; }

/* Al inclinarse hacia un lado, el rollo se encoge un pelo: cede sitio a la
   sede que se está abriendo. */
.entrada--sur .filo__nudo,
.entrada--norte .filo__nudo { width: 64px; height: 64px; margin: -32px 0 0 -32px; }


/* --------------------------------------------------------------------------
   4. La marca y el pie de la entrada
   -------------------------------------------------------------------------- */
.entrada__marca {
  position: absolute;
  top: clamp(1.1rem, 3vh, 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-align: center;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .6s var(--ease) .35s;
}

.entrada--partido .entrada__marca { opacity: 1; }

.entrada__marca img { width: clamp(46px, 6vh, 66px); height: auto; }

.entrada__marca span {
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(253, 244, 231, .74);
}

.entrada__marca small {
  font: 400 var(--t-xs)/1 var(--sans);
  letter-spacing: .08em;
  color: rgba(253, 244, 231, .5);
}


/* --------------------------------------------------------------------------
   5. El telón de carga
   -------------------------------------------------------------------------- */
/* Dos mitades con el mismo corte diagonal que el partidor. Se abren hacia
   fuera con `transform`, que va por el compositor: es la única forma de que
   700 ms de telón no compitan con la decodificación de las fotos que acaban
   de llegar. */
.telon {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* En cuanto el telón se abre deja de existir para el ratón. Sin esto, sus dos
   mitades se van pero el contenedor sigue cubriendo la pantalla entera con
   `inset: 0` y se traga TODOS los clics: el filo seguía al cursor —porque los
   `pointermove` burbujean— pero no se podía entrar en ninguna sede. Se
   esconde del todo al acabar la animación. */
.entrada--abriendo .telon { pointer-events: none; }

/* `--sin-telon` la pone el JS cuando la animación de apertura ha terminado de
   verdad (no con `--partido`, que entra a los 300 ms y cortaría el telón por
   la mitad). */
.entrada--sin-telon .telon { visibility: hidden; }

.telon__hoja {
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(90, 14, 17, .55), transparent 60%),
    linear-gradient(180deg, var(--nori-2) 0%, var(--nori) 100%);
  transition: transform 1.05s var(--ease-io);
}

.telon__hoja--izq {
  clip-path: polygon(0 0, calc(50% + var(--corte-desvio)) 0, calc(50% - var(--corte-desvio)) 100%, 0 100%);
}

.telon__hoja--der {
  clip-path: polygon(calc(50% + var(--corte-desvio)) 0, 100% 0, 100% 100%, calc(50% - var(--corte-desvio)) 100%);
}

.entrada--abriendo .telon__hoja--izq { transform: translateX(-102%); }
.entrada--abriendo .entrada__hoja--der,
.entrada--abriendo .telon__hoja--der { transform: translateX(102%); }

.telon__centro {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  text-align: center;
  padding: 2rem;
  transition: opacity .34s var(--ease-io), transform .34s var(--ease-io);
}

.entrada--abriendo .telon__centro {
  opacity: 0;
  transform: scale(.96);
  pointer-events: none;
}

/* El pollito de la marca, respirando mientras carga. */
.telon__marca img {
  width: clamp(76px, 11vh, 122px);
  height: auto;
  animation: telon-respira 2.6s var(--ease-suave) infinite;
}

@keyframes telon-respira {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-9px) rotate(2deg); }
}

.telon__lema {
  font: 400 var(--t-md)/1.35 var(--display);
  color: rgba(253, 244, 231, .8);
  max-width: 22ch;
  margin: 0;
}

/* La barra dice la verdad: avanza con las fotos que de verdad ya llegaron. */
.telon__barra {
  width: min(240px, 56vw);
  height: 2px;
  background: rgba(253, 244, 231, .16);
  border-radius: 2px;
  overflow: hidden;
}

.telon__barra i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--naranja) 0%, var(--amarillo) 100%);
  border-radius: 2px;
  transition: width .35s var(--ease-suave);
}

.telon__estado {
  font: 500 var(--t-xs)/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(253, 244, 231, .5);
  min-height: 1em;
}

/* Ya no hay botón «toca para entrar»: cuando la carga termina, el telón se
   abre solo. Lo único que se apaga antes es la barra de progreso, para que no
   se quede una raya al 100% colgada en mitad de la apertura. */
.entrada--listo .telon__barra,
.entrada--listo .telon__estado {
  opacity: 0;
  transition: opacity .3s var(--ease-io);
}


/* --------------------------------------------------------------------------
   6. La elección
   -------------------------------------------------------------------------- */
/* Al elegir, el lado ganador se come la pantalla. El `--c` lo lleva el JS
   hasta el extremo con su propia curva; aquí sólo se apaga lo que estorba. */
.entrada--eligiendo .filo,
.entrada--eligiendo .hoja__texto > * { opacity: 0; transition: opacity .3s var(--ease-io); }

.entrada--eligiendo .hoja { pointer-events: none; }

/* El pollito sale volando hacia la sede elegida: es el mismo pájaro que en la
   barra de navegación, y aquí hace de puente entre las dos pantallas. */
.entrada--eligiendo .entrada__marca {
  transition: transform .8s var(--ease-io), opacity .8s var(--ease-io);
  transform: translateX(-50%) translateY(-40vh) scale(.7);
  opacity: 0;
}


/* --------------------------------------------------------------------------
   7. Móvil — el corte se acuesta
   -------------------------------------------------------------------------- */
/* Sin cursor no hay «acercarse a un lado»: las dos sedes se apilan y el corte
   pasa a ser horizontal, con la misma inclinación. Se elige tocando, y el
   dedo puede arrastrar el filo igual que el ratón en el escritorio. */
@media (max-width: 860px), (pointer: coarse) {
  :root { --corte-desvio: 4.03vw; }

  .hoja--sur {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(var(--c) - var(--corte-desvio)),
      0 calc(var(--c) + var(--corte-desvio)));
  }

  .hoja--norte {
    clip-path: polygon(
      0 calc(var(--c) + var(--corte-desvio)),
      100% calc(var(--c) - var(--corte-desvio)),
      100% 100%,
      0 100%);
  }

  .telon__hoja--izq {
    clip-path: polygon(0 0, 100% 0, 100% calc(50% - var(--corte-desvio)), 0 calc(50% + var(--corte-desvio)));
  }

  .telon__hoja--der {
    clip-path: polygon(0 calc(50% + var(--corte-desvio)), 100% calc(50% - var(--corte-desvio)), 100% 100%, 0 100%);
  }

  .entrada--abriendo .telon__hoja--izq { transform: translateY(-102%); }
  .entrada--abriendo .telon__hoja--der { transform: translateY(102%); }

  .filo {
    top: var(--c);
    bottom: auto;
    left: -12vw;
    right: -12vw;
    width: auto;
    height: var(--filo-grosor);
    margin: calc(var(--filo-grosor) / -2) 0 0;
    /* Acostada, la raya necesita el giro AL REVES: `rotate(var(--diag))` sobre
       una barra vertical la inclina con la punta de arriba a la derecha, pero
       sobre una horizontal la hace BAJAR hacia la derecha — justo al contrario
       que el corte de las fotos, y las dos quedaban en aspa. La diagonal de la
       casa (`skewY(calc(var(--diag) * -1))`, `.franja--diag`) sube hacia la
       derecha; esta raya tambien. */
    transform: rotate(calc(var(--diag) * -1));
    background: linear-gradient(90deg,
      transparent 0%, rgba(251, 210, 75, .10) 12%,
      rgba(253, 244, 231, .85) 50%,
      rgba(251, 210, 75, .10) 88%, transparent 100%);
  }

  /* Aquí el maki se escondía: sin ratón no había nada que «agarrar» y caía
     justo en la costura tapando foto. El logo se queda, y por lo contrario:
     en un teléfono la costura es lo único que separa las dos sedes, y un sello
     encima la convierte en una decisión en vez de en una raya. Va más pequeño
     que en escritorio, que aquí la pantalla es angosta. */
  .filo__nudo { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .entrada--sur .filo__nudo,
  .entrada--norte .filo__nudo { width: 54px; height: 54px; margin: -27px 0 0 -27px; }

  .hoja__texto {
    width: 100%;
    top: auto;
    transform: none;
    text-align: left;
    padding: 0 clamp(1.3rem, 7vw, 2.4rem);
  }

  /* Acostado el corte, el rótulo de la fachada sur cae en lo alto de su banda
     —es lo único que la identifica en un teléfono— y el texto se le montaba
     encima. Aquí el texto se descuelga hasta rozar el filo: la marca arriba,
     el nombre justo antes del corte. */
  .hoja--sur   .hoja__texto { top: auto; bottom: 60%; padding-left: clamp(1.3rem, 7vw, 2.4rem); }
  .hoja--norte .hoja__texto { bottom: 11vh; top: auto; text-align: left; padding-right: clamp(1.3rem, 7vw, 2.4rem); }
  .hoja--norte .hoja__datos { justify-content: flex-start; }

  .hoja__titulo { font-size: var(--t-xl); }
  .hoja__titulo em { display: inline; margin-left: .3em; }
  .hoja__zona { font-size: var(--t-base); margin-bottom: .5rem; }
  .hoja__nota { font-size: var(--t-sm); margin-bottom: .8rem; max-width: 30ch; }
  .hoja--norte .hoja__nota { margin-left: 0; }
  .hoja__datos { margin-bottom: 0; }

  /* Aquí el texto ya no está centrado con `translateY(-50%)`, así que el
     levantón del lado ganador no aplica: pisaría el posicionamiento. */
  .hoja--gana .hoja__texto { transform: none; }

  /* Acostado, la marca cae justo en la costura… que es donde vive el maki:
     el pollo y el rollo se pisaban. Aquí manda el maki —es el que marca por
     dónde se parte la pantalla— y de la marca sólo queda la instrucción,
     debajo de la raya. El logo ya se vio entero en el telón. */
  .entrada__marca {
    top: 50%;
    transform: translate(-50%, calc(-50% + 22px));
  }

  .entrada--eligiendo .entrada__marca { transform: translate(-50%, calc(-50% + 22px)) scale(.7); }
  .entrada__marca img,
  .entrada__marca span { display: none; }
  .entrada__marca small { font-size: var(--t-xs); color: rgba(253, 244, 231, .72); }
}


/* --------------------------------------------------------------------------
   8. Movimiento reducido
   -------------------------------------------------------------------------- */
/* Quien pidió menos movimiento sigue teniendo que elegir sede — lo que se
   quita es el vuelo, no la decisión. El telón se desvanece en vez de abrirse
   y el filo deja de seguir al cursor. */
@media (prefers-reduced-motion: reduce) {
  .telon__hoja { transition: opacity .3s linear; }
  .entrada--abriendo .telon__hoja--izq,
  .entrada--abriendo .telon__hoja--der { transform: none; opacity: 0; }
  .telon__marca img { animation: none; }
  /* La chapa de «¡Nueva sede!» deja de latir, de brillar y de girar. Sigue
     rellena y en amarillo: la jerarquía se mantiene sin movimiento. */
  .hoja__kicker--nueva,
  .hoja__kicker--nueva::after,
  .hoja__kicker--nueva .hoja__chispa { animation: none; }
  .hoja__kicker--nueva::after { display: none; }
  .hoja--gana .hoja__texto { transform: translateY(-50%); }
  .hoja__foto img { transition: none; transform: scale(1); }
  .hoja--gana .hoja__foto img,
  .hoja--pierde .hoja__foto img { transform: scale(1); }
  .hoja__texto > * { transition-duration: .01ms; }
  .entrada--eligiendo .entrada__marca { transition-duration: .2s; transform: translateX(-50%); }
}


/* --------------------------------------------------------------------------
   9. Foco visible
   -------------------------------------------------------------------------- */
/* Las hojas son enlaces de verdad: se puede llegar con el tabulador y elegir
   con Enter. El foco tiene que verse sobre foto oscura. */
/* Sin botón que enfocar, el foco se marca sobre el bloque de texto de la
   hoja: es lo que hay que ver para saber en cuál de las dos estás parado
   cuando llegas con el tabulador. */
.hoja:focus-visible { outline: none; }

.hoja:focus-visible .hoja__texto {
  outline: 3px solid var(--amarillo);
  outline-offset: 14px;
  border-radius: 6px;
}


/* --------------------------------------------------------------------------
   10. El cambiador de sede en el sitio ya abierto
   -------------------------------------------------------------------------- */
/* En las landings, la barra lleva una píldora partida en dos: la mitad apagada
   dice en qué sede estás y la viva lleva a la otra.

   Antes era un solo enlace que devolvía al partidor, o sea que para cambiarse
   había que volver a elegir entre las dos. Ahora es un toque, y de paso la
   píldora dice las dos cosas a la vez: dónde estás y adónde puedes ir. Es el
   único rastro que queda de la entrada. */
.nav__sedes {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  overflow: hidden;
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Arriba del todo la barra es transparente y debajo hay foto oscura, así que
     la píldora va en crema; al encoger, la barra se pone color arena y todo lo
     de dentro se vuelve rojo. Es el mismo camino que hacen el nombre de la
     marca y los enlaces del menú. */
  border: 1px solid rgba(253, 244, 231, .3);
  background: rgba(22, 16, 13, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--d-medio) var(--ease),
              border-color var(--d-medio) var(--ease);
}

.nav__sedes__aqui,
.nav__sedes__ir {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .5rem .8rem;
  text-decoration: none;
  transition: color var(--d-medio) var(--ease), background var(--d-rapido) var(--ease);
}

/* Dónde estás: es una etiqueta, no un botón. Se ve que no se puede pulsar. */
.nav__sedes__aqui { color: rgba(253, 244, 231, .68); }
.nav__sedes__aqui svg { width: 13px; height: 13px; }

/* La otra sede: esto sí es un enlace. */
.nav__sedes__ir {
  position: relative;
  color: var(--amarillo);
  background: rgba(253, 244, 231, .12);
}

/* La costura entre las dos mitades no es recta: lleva los mismos 4,6° que
   parte la portada, el partidor y las franjas de las secciones. */
.nav__sedes__ir::before {
  content: '';
  position: absolute;
  left: 0;
  top: -30%;
  height: 160%;
  width: 1px;
  background: rgba(253, 244, 231, .3);
  transform: rotate(var(--diag));
}

.nav__sedes__ir:hover { background: rgba(251, 210, 75, .26); }
.nav__sedes__ir svg { width: 14px; height: 14px; transition: transform var(--d-rapido) var(--ease); }
.nav__sedes__ir:hover svg { transform: translateX(3px); }
.nav__sedes__ir:focus-visible { outline: 2px solid var(--amarillo); outline-offset: -3px; }

.nav.encogido .nav__sedes {
  border-color: rgba(176, 30, 36, .22);
  background: rgba(176, 30, 36, .07);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav.encogido .nav__sedes__aqui { color: var(--tinta-2); }
.nav.encogido .nav__sedes__ir { color: var(--rojo); background: rgba(176, 30, 36, .12); }
.nav.encogido .nav__sedes__ir::before { background: rgba(176, 30, 36, .25); }
.nav.encogido .nav__sedes__ir:hover { background: rgba(176, 30, 36, .22); }

/* Cuando aprieta el sitio se cae primero el nombre de la sede en la que ya
   estás —eso lo dice la página entera— y queda el alfiler con el enlace, que
   es lo único accionable. */
@media (max-width: 1080px) { .nav__sedes__aqui b { display: none; } }
@media (max-width: 640px)  { .nav__sedes { display: none; } }

/* Y por debajo de 640 la píldora no cabe en la barra, así que el cambio se
   muda al menú. Sin esto, la única forma de pasarse a la otra sede en un
   teléfono sería bajar hasta el final de «Visítanos». */
.menu-movil a.menu-movil__sede {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.5rem;
  padding: .72rem 1.15rem;
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amarillo);
  border: 1px solid rgba(251, 210, 75, .32);
  background: rgba(251, 210, 75, .1);
  border-radius: 999px;
  /* Entra la última, después de los seis enlaces del menú. */
  transition-delay: .54s;
}

.menu-movil a.menu-movil__sede:hover { color: var(--nori); background: var(--amarillo); }
.menu-movil a.menu-movil__sede svg { width: 15px; height: 15px; }


/* --------------------------------------------------------------------------
   10bis. La llegada — el otro lado del salto
   -------------------------------------------------------------------------- */
/* Entre elegir sede y ver la landing hay un cambio de documento, y ahí el
   navegador pinta su propio blanco. Da igual lo bien que se abra el panel: ese
   fogonazo parte la animación en dos.

   Esto lo cose. La landing abre tapada por LA MISMA FOTO, en el MISMO encuadre
   y con el MISMO velo con que quedó el panel al expandirse —así que el primer
   cuadro de la página nueva es idéntico al último de la anterior—, y desde ahí
   se desvanece. La foto ya está en la caché del navegador: acababa de estar en
   pantalla.

   Sólo aparece si de verdad se viene del partidor (bandera `spc.llegada` en
   `sessionStorage`). Quien llega desde Google Maps directo a la sede no tiene
   ninguna animación que continuar: ver una foto desvanecerse sin motivo sólo
   retrasa la página. */
.llegada { display: none; }
.con-llegada .llegada { display: block; }

.llegada {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
  overflow: hidden;
  background: var(--nori);
}

.llegada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Escala y brillo son exactamente los del panel ganador (`.hoja--gana`): si
     no coincidieran, el empalme daría un salto de encuadre. */
  transform: scale(1);
  /* Clavado a `.hoja--gana`. Si allí cambia el filtro, aquí también, o el
     empalme entre las dos pantallas da un salto de luz. */
  filter: saturate(1.12) brightness(1.22);
  object-position: 50% 14%;
}

/* El mismo velo del panel, para que el empalme no cambie de color. */
.llegada__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 16, 13, .06) 0%, rgba(22, 16, 13, .3) 58%, rgba(16, 11, 9, .8) 100%);
}

/* La salida: la foto se asienta a su tamaño real mientras se va. El
   movimiento continúa el del panel —que venía creciendo— en vez de cortarlo. */
.llegada--fuera {
  opacity: 0;
  transition: opacity .72s var(--ease-io);
}

.llegada--fuera img {
  transform: scale(1.075);
  transition: transform 1s var(--ease);
}

/* Y por debajo, la página entra subiendo un poco: sin esto la landing aparece
   ya colocada y el corte se nota igual, aunque la foto se haya ido. */
.con-llegada main,
.con-llegada .nav { animation: llegada-sube .9s var(--ease) both; }

@keyframes llegada-sube {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .llegada--fuera { transition-duration: .25s; }
  .llegada--fuera img { transition: none; transform: scale(1); }
  .con-llegada main,
  .con-llegada .nav { animation: none; }
}


/* --------------------------------------------------------------------------
   10bis. La salida — el mismo empalme, pero al cambiarse de sede
   -------------------------------------------------------------------------- */
/* Cambiarse de sede desde la barra era el único salto del sitio que se veía en
   blanco: la página se iba, el navegador parpadeaba y la otra aparecía de
   golpe. Ahora sale igual que entró —tapándose con la foto de la sede a la que
   va— y, como esa página abre con ESA MISMA foto, en el mismo encuadre y con el
   mismo filtro, el cambio de documento ocurre detrás de una imagen quieta. Lo
   pinta `_sedes.py`; lo dispara el script que va justo al lado. */
.salida {
  position: fixed;
  inset: 0;
  z-index: 9400;
  pointer-events: none;
  overflow: hidden;
  background: var(--nori);
  opacity: 0;
  visibility: hidden;
}

.salida img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
  filter: saturate(1.12) brightness(1.22);
  /* Entra un pelo ampliada y se asienta: al llegar, `.llegada` arranca justo
     en scale(1), así que las dos mitades del viaje se enganchan. */
  transform: scale(1.06);
}

.salida--dentro {
  visibility: visible;
  opacity: 1;
  transition: opacity .42s var(--ease-io);
}

.salida--dentro img {
  transform: scale(1);
  transition: transform .62s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .salida--dentro { transition-duration: .16s; }
  .salida--dentro img { transition: none; transform: scale(1); }
}


/* --------------------------------------------------------------------------
   11. Chip de sede en la portada de cada landing
   -------------------------------------------------------------------------- */
/* Lo primero que tiene que confirmar quien acaba de elegir —o quien llegó
   directo desde Google Maps— es que está en la sede correcta. Va encima del
   titular, antes que nada. */
.portada__sede {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amarillo);
  background: rgba(22, 16, 13, .38);
  border: 1px solid rgba(251, 210, 75, .34);
  border-radius: 999px;
  padding: .58rem .95rem;
  margin-bottom: 1.1rem;
  backdrop-filter: blur(8px);
}


/* --------------------------------------------------------------------------
   12. La tarjeta de la otra sede
   -------------------------------------------------------------------------- */
/* Cierra «Visítanos» en las landings. No repite horarios ni teléfonos: sólo
   dice que existe y lleva a su página, que es donde esos datos viven. */
.otra-sede {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin-top: var(--gap);
  padding: clamp(.9rem, 2vw, 1.15rem);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--surface);
  box-shadow: var(--sombra-s);
  text-decoration: none;
  color: inherit;
  transition: transform .4s var(--ease-suave), box-shadow .4s var(--ease-suave), border-color .4s;
}

.otra-sede:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-m);
  border-color: rgba(176, 30, 36, .28);
}

.otra-sede__foto {
  display: block;
  width: clamp(78px, 12vw, 124px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-s);
  overflow: hidden;
  /* El mismo corte diagonal de la marca, aquí en pequeño. */
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.otra-sede__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.otra-sede__texto { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }

.otra-sede__kicker {
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rojo);
}

.otra-sede__texto b { font: 600 var(--t-md)/1.2 var(--display); color: var(--tinta); }

.otra-sede__zona {
  font: 400 var(--t-sm)/1.35 var(--sans);
  color: var(--tinta-3);
}

.otra-sede__flecha {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--rojo);
  color: var(--crema);
  transition: transform .4s var(--ease-suave);
}

.otra-sede__flecha svg { width: 18px; height: 18px; }
.otra-sede:hover .otra-sede__flecha { transform: translateX(4px); }

@media (max-width: 560px) {
  .otra-sede { grid-template-columns: auto 1fr; }
  .otra-sede__flecha { display: none; }
}

/* El pie marca en cuál de las dos columnas estás parado. */
.pie h4 small {
  font: 500 var(--t-xs)/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--naranja-cl);
  margin-left: .35rem;
}

.pie h4 a { text-decoration: none; color: inherit; border-bottom: 1px solid rgba(253, 244, 231, .28); }
.pie h4 a:hover { color: var(--amarillo); border-bottom-color: currentColor; }