/* Laymon — sitio principal
   Tokens alineados con el menú de Justo (mismas fuentes y colores). */

@font-face {
  font-family: "Brick-Laymon";
  src: url("../fonts/brick-laymon.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Chelsea Market";
  src: url("../fonts/chelsea-market.woff2") format("woff2");
  font-display: swap;
}

:root {
  --red: #EA1D3B;
  --ink: #0C0B0B;
  --paper: #FFFDFA;
  --label: #5f5752;
  --line: rgba(12, 11, 11, .14);

  --font-display: "Brick-Laymon", "Chelsea Market", sans-serif;
  --font-body: "Chelsea Market", sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --promo-h: 0px; /* sin barra de envío gratis (Luis, 9 oct) */
  --wa: #25D366;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 0; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.4 var(--font-body);
}
html, body { overflow-x: hidden; overflow-x: clip; }
/* Grano de papel: textura física sin peso de imagen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  padding: 8px 14px; background: var(--ink); color: var(--paper); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Tipografía ---------- */
.display {
  margin: 0;
  font: 400 clamp(40px, 6vw, 76px)/.95 var(--font-display);
  color: var(--red);
  letter-spacing: .01em;
}
.eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 2px solid var(--red); border-radius: 999px;
  font: inherit; font-size: 17px; text-decoration: none; white-space: nowrap;
  transition: transform var(--fast) var(--ease), background-color var(--fast), color var(--fast);
}
.btn:active { transform: scale(.97); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--ink); border-color: var(--ink); }
.btn--ghost { color: var(--red); background: transparent; }
.btn--ghost:hover { background: var(--red); color: #fff; }
.btn--white { background: #fff; border-color: #fff; color: var(--red); }
.btn--white:hover { color: var(--ink); }
.btn--sm { min-height: 40px; padding: 0 20px; font-size: 15px; }

.link-arrow { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.link-arrow::after { content: " →"; color: var(--red); }

/* Logo con el glitch del CSS maestro de Justo (el manual prohíbe efectos solo en usos estáticos) */
.logo { display: block; height: 100px; width: auto; aspect-ratio: 1759 / 1001; color: #fff; animation: laymon-logo-glitch 9s ease-in-out infinite; }
.logo-lmn { display: none; }
@keyframes laymon-logo-glitch {
  0%, 45.9%, 46.6%, 88.4%, 92%, 100% { transform: translate(0, 0) skew(0deg); filter: none; }
  46%, 46.5% { transform: translate(-1px, 0); filter: drop-shadow(-3px 0 0 #00F0FF) drop-shadow(3px 0 0 #FFE600); }
  88.5%, 89.1% { transform: translate(-3px, 0) skew(-8deg); filter: drop-shadow(-5px 0 0 #00F0FF) drop-shadow(5px 0 0 #FFE600); }
  89.2%, 89.8% { transform: translate(3px, 1px) skew(0deg); filter: drop-shadow(6px 0 0 #00F0FF) drop-shadow(-4px 1px 0 #FF2BD6) brightness(1.15); }
  89.9%, 90.5% { transform: translate(-2px, 0) skew(5deg); filter: drop-shadow(-7px 0 0 #00F0FF) drop-shadow(4px 0 0 #FFE600) drop-shadow(0 2px 0 #FF2BD6); }
  90.6%, 91.2% { transform: translate(2px, 0) skew(0deg); filter: drop-shadow(4px 0 0 #FFE600) drop-shadow(-3px 0 0 #00F0FF) contrast(1.3); }
  91.3%, 91.9% { transform: translate(-1px, 0) skew(0deg); filter: drop-shadow(-2px 0 0 #00F0FF) drop-shadow(2px 0 0 #FFE600); }
}

/* Botón "Pedir ahora": copia exacta del de Justo */
.pedir {
  font-family: var(--font-display); font-size: 22px; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 7px 15px; border-radius: 999px;
  background: #fff; color: var(--red); text-decoration: none; white-space: nowrap;
  animation: laymon-pedir-bounce 1.8s ease-in-out infinite;
}
.pedir:is(:hover, :focus-visible) { animation-play-state: paused; }
.pedir:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.pedir__icon { width: .8em; height: .8em; margin-right: .3em; flex: none; }
.pedir--red { background: var(--red); color: #fff; }
@media (min-width: 1024px) { .pedir { font-size: 25px; } }
@keyframes laymon-pedir-bounce {
  0%, 45%, 100% { transform: translateY(0) scale(1); }
  53% { transform: translateY(-14px) scale(1.04); }
  61% { transform: translateY(0) scale(1); }
  69% { transform: translateY(-7px) scale(1.02); }
  77% { transform: translateY(0) scale(1); }
  84% { transform: translateY(-3px) scale(1.01); }
  91% { transform: translateY(0) scale(1); }
}

/* ---------- Hero ---------- */
/* Fondo difuminado tomado de la referencia de Luis, pasado a rojos; solo en el hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 900px);
  padding: calc(var(--promo-h) + env(safe-area-inset-top)) 0 clamp(72px, 10vh, 120px) max(var(--gutter), (100% - var(--max)) / 2);
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0;
  background: var(--ink); color: #fff;
}
/* Capas: fondo de papel negro, llamas a la izquierda y abajo, pizza a sangre a la derecha */
.hero__layers { position: absolute; inset: 0; z-index: 0; }
.hero__fondo, .hero__llamas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left bottom; }
.hero__llamas { transform-origin: 0 100%; animation: llamas 3.2s ease-in-out infinite alternate; }
@keyframes llamas {
  0% { transform: scale(1, 1) skewX(0deg); }
  50% { transform: scale(1.01, 1.035) skewX(-.6deg); }
  100% { transform: scale(1, 1.015) skewX(.5deg); }
}
.hero__pizza {
  position: absolute; top: -9%; left: 34%;
  /* En ventanas bajas y anchas la pizza crece con el ancho para llegar siempre al borde derecho */
  height: max(118%, 54vw); aspect-ratio: 1404 / 1100;
  animation: pizza-entra 1.3s cubic-bezier(.2, .8, .2, 1) var(--intro-wait) both;
}
.hero__pizza-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
/* Tablet: más pizza, anclada abajo y fundida hacia arriba como en el celular */
@media (min-width: 821px) and (max-width: 1100px) {
  .hero__pizza {
    top: auto; bottom: 0; left: 14%; height: max(78%, 70vw);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%);
    mask-image: linear-gradient(to bottom, transparent, #000 24%);
  }
  .hero__main { align-self: start; padding-top: clamp(40px, 8vh, 96px); }
}
@keyframes pizza-entra {
  0% { transform: translateX(40%) rotate(25deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
/* Hueco de humo oscuro en las llamas detrás del gafete, para que el rojo de la tarjeta no se pierda */
.hero__side::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 280%; height: 165%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(12, 11, 11, .97), rgba(12, 11, 11, .9) 50%, rgba(12, 11, 11, .55) 75%, rgba(12, 11, 11, 0));
}
.hero__side { --pass-w: clamp(min(220px, 30vh), min(18vw, 34vh), 276px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; position: relative; z-index: 2; }
/* Pase de backstage: foto del gafete (cordón rojo, mosquetón metálico, tarjeta) cortada por el borde de arriba.
   El contenido va encima de la tarjeta, que ocupa del 36.8 % al final de la foto. Baja y se mece con el viento al cargar */
.hero__tag {
  position: relative; display: block; width: var(--pass-w); color: #fff; text-decoration: none;
  transform-origin: 50% 0;
  filter: drop-shadow(0 18px 22px rgba(12, 11, 11, .18));
  animation: tag-viento 2.8s ease-out var(--intro-wait) both;
}
.pass__photo { display: block; width: 100%; height: auto; }
.pass__card {
  position: absolute; left: .7%; right: .7%; top: 36.8%; bottom: .2%;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 20%; border-radius: 5px; overflow: hidden;
}
.pass__label { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; opacity: .85; }
.hero__tag .logo { display: block; width: 80%; height: auto; margin: auto 0; position: relative; left: calc(2% - 3px); top: -4%; }
@keyframes tag-viento {
  0% { transform: translateY(-105%) rotate(0deg); }
  22% { transform: translateY(0) rotate(5deg); }
  38% { transform: rotate(-4deg); }
  54% { transform: rotate(2.6deg); }
  70% { transform: rotate(-1.4deg); }
  85% { transform: rotate(.6deg); }
  100% { transform: none; }
}
/* Mismo ancho que el gafete */
.hero__pedir { margin-top: 10px; width: var(--pass-w); box-sizing: border-box; }
.hero__main {
  position: relative; z-index: 3; align-self: center;
  padding: 0 var(--gutter) 0 clamp(16px, 3vw, 56px);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero__titulo { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 24px); margin: 0; }
/* Solo "Best fuck'n pizzas", al tamaño que tenía "Spicy Honey" (vectorizado para que no se pixele) */
.hero__best { width: clamp(220px, 25vw, 380px); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.hero__titulo img { animation: titulo-entra .6s cubic-bezier(.3, 1.4, .5, 1) calc(var(--intro-wait) + .5s) both; }
@keyframes titulo-entra {
  0% { transform: scale(.6) rotate(-6deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* Fantasma skater: cuadros del mismo sprite que el intro del menú de Justo */
.ghost {
  position: relative; display: block; width: 100%; aspect-ratio: 220 / 260;
  padding: 0; border: 0; background: none; cursor: pointer;
  animation: float 3.6s ease-in-out infinite;
}
.ghost__frame { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.ghost__frame.is-on { visibility: visible; }
.ghost__shadow {
  position: absolute; left: 22%; right: 22%; bottom: -2%; height: 5%;
  border-radius: 50%; background: var(--ink); opacity: .12;
  animation: shadow 3.6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes shadow {
  0%, 100% { transform: scaleX(1); opacity: .12; }
  50% { transform: scaleX(.8); opacity: .07; }
}

/* ---------- Carta: tarjetas y categorías como en la tienda ---------- */

/* ---------- Pizzas: tarjetas en cascada diagonal + concepto napolitano ---------- */
/* La coreografía (posiciones, escalas, tiempos) vive en main.js; aquí solo el aspecto */
.pizzas {
  position: relative; overflow: hidden;
  min-height: clamp(640px, 56vw, 820px);
  background: var(--paper);
}
.pizzas__escena { position: absolute; inset: 0; }
.pizzas__lista { list-style: none; margin: 0; padding: 0; }
.pizzas__lista li {
  position: absolute; left: 0; top: 0; height: 58%; aspect-ratio: 3 / 4;
  transform-origin: 50% 50%; will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-duration: var(--dur, 700ms);
  transition-timing-function: var(--curva, cubic-bezier(.7, 0, .25, 1));
}
.pz {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  border-radius: 22px; background: var(--red); color: #fff; text-decoration: none;
  box-shadow: 0 2px 4px rgba(12, 11, 11, .12), 0 18px 36px -12px rgba(12, 11, 11, .35);
}
.pz__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pz--sinfoto .pz__icon { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; translate: -50% -50%; }
/* El nombre va en la pastilla blanca de abajo a la derecha (Luis, 12 oct) */
.pz__nombre {
  position: absolute; right: 7%; bottom: 6%; z-index: 2; max-width: 86%;
  padding: 7px 16px; border-radius: 999px; background: #fff; color: var(--ink);
  font-size: clamp(13px, 1.15vw, 17px); line-height: 1.15; text-align: center;
  box-shadow: 0 2px 8px rgba(12, 11, 11, .18);
}
.pz:hover .pz__nombre, .pz:focus-visible .pz__nombre { background: var(--red); color: #fff; }
.pizzas__concepto {
  position: absolute; left: var(--gutter); bottom: clamp(32px, 4vw, 56px); z-index: 60;
  max-width: 34ch; font-size: clamp(15px, 1.2vw, 18px);
}
.pizzas__concepto p { margin: 0 0 .7em; }
.pizzas__title { margin: 0 0 .35em; font: 400 clamp(34px, 3.6vw, 56px)/.95 var(--font-display); color: var(--red); }
.pizzas__menu { color: var(--red); }
@media (max-width: 820px) {
  .pizzas { min-height: 0; padding-top: 460px; }
  .pizzas__escena { bottom: auto; height: 460px; }
  .pizzas__concepto { position: relative; left: auto; bottom: auto; padding: 0 var(--gutter) 48px; }
}
@media (min-width: 821px) and (max-width: 1100px) { .pizzas__concepto { max-width: 28ch; } }
/* Sin movimiento: fila quieta que se recorre con el dedo o el scroll */
@media (prefers-reduced-motion: reduce) {
  .pizzas { min-height: 0; padding-top: 0; }
  .pizzas__escena { position: static; height: auto; overflow-x: auto; padding: 32px var(--gutter) 24px; }
  .pizzas__lista { display: flex; gap: 16px; width: max-content; }
  .pizzas__lista li { position: static; height: auto; width: 200px; transition: none; }
  .pizzas__concepto { position: static; padding: 0 var(--gutter) 48px; }
}

/* ---------- Manifiesto ---------- */
.manifesto { position: relative; background: var(--red); color: #fff; }
.manifesto__inner {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(48px, 6vw, 88px);
}
.manifesto__title { margin: 0; font: 400 clamp(48px, 9vw, 132px)/.9 var(--font-display); }
.manifesto__title span { display: block; }
.manifesto__title span:nth-child(2) { padding-left: 8%; color: var(--ink); }
.manifesto__title span:nth-child(3) { padding-left: 16%; }
.manifesto__row { display: flex; align-items: center; gap: 24px; margin-top: clamp(28px, 4vw, 48px); }
.manifesto__ghostwrap { flex: 1; display: flex; justify-content: center; }
.manifesto__ghost { display: block; width: clamp(170px, 17vw, 250px); height: auto; }
.manifesto__text { flex: none; max-width: 30ch; margin: 0; text-align: right; font-size: clamp(18px, 1.6vw, 22px); }
/* Foto a la izquierda, a sangre; se funde con el rojo por la derecha, arriba y abajo */
.manifesto { --photo-w: min(40vw, 600px); }
.manifesto__photo {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--photo-w); height: 100%;
  object-fit: cover; object-position: 50% 45%;
  -webkit-mask-image: linear-gradient(to right, #000 72%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 72%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
  mask-composite: intersect;
}
@media (min-width: 821px) {
  /* La fila arranca en el borde de la foto: el fantasma queda centrado entre foto y frase */
  .manifesto__inner { max-width: none; padding-left: calc(var(--photo-w) + 2vw); }
  .manifesto__title { font-size: clamp(48px, 6.6vw, 104px); }
  .manifesto__row { margin-left: calc(-2vw - var(--photo-w) * .25); }
}
/* Tablet: foto más chica y completa, centrada en vertical, para que el rojo la rodee */
@media (min-width: 821px) and (max-width: 1100px) {
  .manifesto { --photo-w: 32vw; }
  .manifesto__photo { top: 50%; bottom: auto; height: auto; translate: 0 -50%; }
}

/* ---------- Visítanos ---------- */
.visit {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.25fr; grid-template-areas: "titulo ruta" "datos ruta";
  column-gap: clamp(32px, 5vw, 80px); align-items: start;
}
.visit__title { grid-area: titulo; margin: 0; align-self: end; }
.visit__body { grid-area: datos; }
.visit__lead { margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.3; }
.visit__texto p { margin: 16px 0 0; color: var(--label); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; max-width: 46ch; }
.visit__reserva { display: inline-block; margin-top: 22px; color: var(--ink); font-size: 18px; text-decoration-color: var(--red); text-underline-offset: 5px; }
.visit__reserva:hover { color: var(--red); }
.horario { display: grid; gap: 0; margin: 24px 0 0; max-width: 26em; border-top: 1px solid #EAE5DD; }
.horario div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #EAE5DD; }
.horario dt, .horario dd { margin: 0; }
.horario dd { color: var(--label); }
.horario .es-hoy dt::after { content: "Hoy"; margin-left: 10px; padding: 2px 9px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; vertical-align: 2px; }
.horario .es-hoy dd { color: var(--ink); }

/* Mapa con la ruta a Laymon */
.ruta { grid-area: ruta; }
.ruta__mapa {
  height: clamp(420px, 40vw, 560px); border-radius: 22px; overflow: hidden;
  border: 2px solid var(--ink); background: #f2efe9; z-index: 0; font-family: var(--font-body);
}
.ruta--sinmapa .ruta__mapa, .ruta--sinmapa .ruta__panel { display: none; }
/* Calles de OSM en gris papel para que manden el rojo de la ruta y el logo */
.ruta__mapa .leaflet-tile-pane { filter: grayscale(1) sepia(.12) contrast(.92) brightness(1.04); }
.ruta__panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.ruta__btn, .ruta__enviar {
  padding: 12px 22px; border-radius: 999px; font: inherit; font-size: 17px; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.ruta__btn { border: 2px solid var(--red); background: var(--red); color: #fff; }
@media (hover: hover) { .ruta__btn:hover { background: var(--ink); border-color: var(--ink); } }
.ruta__enviar { border: 2px solid var(--ink); background: transparent; color: var(--ink); }
@media (hover: hover) { .ruta__enviar:hover { background: var(--ink); color: #fff; } }
.ruta__btn:focus-visible, .ruta__enviar:focus-visible, .ruta__apps a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.ruta__msg { flex: 1 1 100%; margin: 0; color: var(--label); font-size: 15px; }
.ruta__ir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.ruta__apps { font-size: 16px; }
.ruta__apps a { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 4px; }
.ruta__apps a:hover { color: var(--red); }
/* Pin de Laymon: logo blanco en círculo rojo */
.ruta__pin { background: none; border: 0; }
.ruta__logo {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--red); color: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(12, 11, 11, .35);
}
.ruta__logo svg { width: 50px; height: auto; }
/* El fantasma que recorre la ruta: rebota un poco y mira hacia donde va */
.ruta__rider { background: none; border: 0; transition: opacity .35s var(--ease); }
.ruta__rider.llego { opacity: 0; }
.ruta__bote { display: block; animation: ruta-bote .5s ease-in-out infinite alternate; }
.ruta__bote img { display: block; width: 58px; height: auto; filter: drop-shadow(0 3px 4px rgba(12, 11, 11, .35)); transition: transform .2s; }
/* el dibujo mira a la derecha: hacia el oeste se voltea */
/* La pose "paseo" mira a la izquierda: se voltea cuando va al este */
.ruta__rider.va-este .ruta__bote img { transform: scaleX(-1); }
@keyframes ruta-bote { to { transform: translateY(-3px) rotate(-3deg); } }
.ruta__base { stroke: var(--ink); stroke-opacity: .85; fill: none; }
.ruta__luz { stroke: var(--red); fill: none; stroke-dasharray: 1000; filter: drop-shadow(0 0 4px rgba(234, 29, 59, .9)) drop-shadow(0 0 10px rgba(234, 29, 59, .55)); }
.ruta__flechas { stroke: #fff; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Latido: al buscarte el mapa se hunde un poco; con la ruta lista late y se queda con glow rojo */
.ruta__mapa { transition: transform .35s var(--ease), box-shadow .6s var(--ease); }
.ruta__mapa.pensando { transform: scale(.985); box-shadow: inset 0 0 0 1px var(--red); }
.ruta__mapa.lista {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(234, 29, 59, .6), 0 0 18px rgba(234, 29, 59, .45), 0 0 46px rgba(234, 29, 59, .25);
}
.ruta__mapa.late { animation: ruta-late .9s var(--ease) 1; }
@keyframes ruta-late {
  0% { transform: scale(.985); }
  22% { transform: scale(1.012); }
  40% { transform: scale(.975); }
  62% { transform: scale(1.006); }
  100% { transform: scale(1); }
}
.ruta__yo { stroke: #fff; stroke-width: 3; fill: var(--ink); fill-opacity: 1; }
.leaflet-container a.leaflet-control-zoom-in, .leaflet-container a.leaflet-control-zoom-out { color: var(--ink); }
.leaflet-control-attribution { font-size: 10px; }
/* Tablet: la columna de datos queda angosta junto al mapa; se apilan como en celular */
@media (min-width: 821px) and (max-width: 1100px) {
  .visit { grid-template-columns: 1fr; grid-template-areas: "titulo" "ruta" "datos"; }
  .ruta { margin: 28px 0 12px; }
  .ruta__mapa { height: 480px; }
}
.rows { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; border-top: 2px solid var(--ink); }
.rows > li { border-bottom: 1px solid var(--line); }
.row {
  width: 100%; display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 16px;
  padding: 20px 0; min-height: 64px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.row__label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.row__value { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.25; }
.row__arrow { color: var(--red); font-size: 24px; transition: transform var(--fast) var(--ease); }
.row:hover .row__value { color: var(--red); }
.row:hover .row__arrow { transform: translateX(6px); }
.row[aria-expanded="true"] .row__arrow { transform: rotate(45deg); }
.playlist { padding: 0 0 20px; }
.playlist iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }

/* ---------- Cold Wave: título al centro, líneas de pulso (homenaje a Unknown Pleasures) y un sintonizador de radio.
   Cada estación es una Cold Wave: su nombre sale en rojo entre las líneas y medio vaso se asoma por el borde derecho ---------- */
.cold { background: var(--ink); color: var(--paper); overflow-x: clip; }
.cold__in { display: flex; flex-direction: column; align-items: center; max-width: 860px; margin: 0 auto; padding: clamp(56px, 7vw, 104px) clamp(20px, 4vw, 48px); text-align: center; }
.cold__kicker { margin: 0 0 4px; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.cold__titulo { margin: 0; color: var(--red); font: 400 clamp(64px, 9vw, 132px)/.85 var(--font-display); }
.cold__intro { margin: 16px auto 0; font-size: 18px; line-height: 1.5; max-width: 34em; }
/* Las líneas: las de arriba van detrás del nombre y las de abajo enfrente, así el nombre sale entre ellas */
.cold__mesa { position: relative; width: 100%; aspect-ratio: 2 / 1; margin-top: clamp(28px, 4vw, 48px); }
.cold__ondas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; transition: opacity .4s; }
.cold.is-on .cold__ondas { opacity: 1; }
.cold__ondas .tapa { fill: var(--ink); }
.cold__ondas .raya { fill: none; stroke: var(--paper); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cold__nombre {
  position: absolute; left: 0; right: 0; top: 50%; margin: 0; translate: 0 -62%; white-space: nowrap;
  color: var(--red); font: 400 clamp(30px, 8vw, 92px)/1 var(--font-display); opacity: 0; transition: opacity .2s;
}
.cold.is-on .cold__nombre { opacity: 1; }
/* Medio vaso asomado por el borde derecho de la pantalla (left: centro de la mesa + media pantalla = borde) */
.cold__vaso { position: absolute; top: -30%; bottom: -8%; left: calc(50% + 50vw); }
.cold__vaso img {
  position: absolute; left: 0; top: 0; height: 90%; width: auto; max-width: none; translate: calc(var(--cx, 50%) * -1) 0;
  opacity: 0; transition: opacity .15s;
}
.cold__vaso img.is-on { opacity: 1; }
.cold__vaso img.cold__otra { left: -100vw; }
.cold__ingredientes { position: absolute; right: clamp(16px, 4vw, 48px); bottom: 0; width: max-content; max-width: min(240px, 40vw); margin: 0; text-align: right; font-size: 16px; line-height: 1.35; opacity: 0; transition: opacity .2s; }
.cold.is-on .cold__ingredientes { opacity: 1; }
/* Glitch al sintonizar: el vaso y el nombre llegan en rebanadas corridas con fantasmas rojo y papel */
.cold__vaso img.is-glitch { animation: cold-glitch .6s steps(1) both; }
.cold__nombre.is-glitch { animation: cold-glitch-txt .5s steps(1) both; }
@keyframes cold-glitch {
  0% { transform: translateX(18px); clip-path: inset(12% 0 62% 0); filter: drop-shadow(-6px 0 #EA1D3B) drop-shadow(6px 0 #FFFDFA); }
  10% { transform: translateX(-12px); clip-path: inset(48% 0 22% 0); }
  20% { transform: translateX(8px); clip-path: inset(0 0 78% 0); }
  30% { transform: translateX(-5px); clip-path: inset(30% 0 38% 0); }
  42% { transform: none; clip-path: inset(0); filter: drop-shadow(-3px 0 #EA1D3B) drop-shadow(3px 0 #FFFDFA); }
  56% { transform: translateX(4px); clip-path: inset(64% 0 6% 0); }
  70%, 100% { transform: none; clip-path: inset(0); filter: none; }
}
@keyframes cold-glitch-txt {
  0% { transform: translateX(-10px); clip-path: inset(0 0 55% 0); text-shadow: 5px 0 var(--paper); }
  15% { transform: translateX(8px); clip-path: inset(45% 0 0 0); text-shadow: -5px 0 var(--paper); }
  30% { transform: translateX(-4px); clip-path: inset(20% 0 30% 0); }
  50% { transform: none; clip-path: inset(0); text-shadow: 2px 0 var(--paper); }
  70%, 100% { transform: none; clip-path: inset(0); text-shadow: none; }
}
/* Sintonizador: escala de radio FM con una aguja roja */
.cold__radio { width: 100%; max-width: 720px; margin-top: clamp(24px, 3vw, 36px); }
.cold__radio-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; font-size: 15px; }
.cold__radio-top label { opacity: .75; text-align: left; }
.cold__frecuencia { color: var(--red); font-size: 18px; letter-spacing: .06em; white-space: nowrap; }
.cold__dial {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 52px; margin: 0; cursor: ew-resize; border-radius: 4px;
  background:
    linear-gradient(rgba(255, 253, 250, .55), rgba(255, 253, 250, .55)) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(to right, rgba(255, 253, 250, .7) 0 1px, transparent 1px 20%) left bottom / calc(100% + 1px) 26px no-repeat,
    repeating-linear-gradient(to right, rgba(255, 253, 250, .45) 0 1px, transparent 1px 5%) left bottom / calc(100% + 1px) 16px no-repeat,
    repeating-linear-gradient(to right, rgba(255, 253, 250, .25) 0 1px, transparent 1px 1%) left bottom / calc(100% + 1px) 9px no-repeat;
}
.cold__dial::-webkit-slider-runnable-track { height: 52px; background: transparent; }
.cold__dial::-moz-range-track { height: 52px; background: transparent; }
.cold__dial::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 52px; border: 0; border-radius: 2px; background: var(--red); box-shadow: 0 0 14px rgba(234, 29, 59, .8); }
.cold__dial::-moz-range-thumb { width: 4px; height: 52px; border: 0; border-radius: 2px; background: var(--red); box-shadow: 0 0 14px rgba(234, 29, 59, .8); }
.cold__dial:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
.cold__radio { position: relative; }
/* Pista “Desliza”: sigue a la aguja hasta que la persona mueve el dial */
.cold__pista {
  position: absolute; top: calc(var(--pista-top, 32px) + 6px); left: calc(var(--pos, .14) * (100% - 4px) + 16px);
  padding: 4px 12px; border-radius: 999px; background: var(--red); color: #fff; font-size: 14px; line-height: 1.2; white-space: nowrap;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.cold__radio.pista-izq .cold__pista { left: auto; right: calc((1 - var(--pos, .14)) * (100% - 4px) + 16px); }
.cold__pista span { display: inline-block; animation: cold-pista 1s ease-in-out infinite; }
.cold__pista span:last-child { animation-direction: reverse; }
.cold__radio.con-pista .cold__pista { opacity: 1; }
@keyframes cold-pista { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
.cold__escala { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; opacity: .6; }
.cold__pedir { margin-top: clamp(28px, 4vw, 40px); display: inline-block; background: var(--red); color: #fff; text-decoration: none; font-size: 18px; border-radius: 999px; padding: 13px 26px; }
@media (hover: hover) { .cold__pedir:hover { background: var(--paper); color: var(--ink); } }
.cold__pedir:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cold__vaso img.is-glitch, .cold__nombre.is-glitch, .cold__pista span { animation: none; }
  .cold__ondas, .cold__vaso img, .cold__nombre, .cold__ingredientes { transition: none; }
}
/* Sin espacio a la derecha: el vaso se asoma sobre el borde de las líneas y los ingredientes bajan, centrados, debajo de ellas */
@media (max-width: 1199px) {
  .cold__mesa { margin-bottom: 2.6em; }
  .cold__vaso { position: static; }
  .cold__vaso img { left: calc(50% + 50vw); top: 4%; height: 92%; }
  .cold__vaso img.cold__otra { left: calc(50% - 50vw); }
  .cold__ingredientes { left: 0; right: 0; bottom: -2.4em; width: auto; max-width: none; text-align: center; }
}
@media (max-width: 820px) {
  .cold__mesa { aspect-ratio: 4 / 3; margin-bottom: 3.6em; }
  .cold__ingredientes { bottom: -3.4em; }
}

/* ---------- Puntos de Fuego (resumen en el inicio; la página completa es /puntos/) ---------- */
.fuego { background: var(--paper); }
.fuego__in {
  max-width: var(--max); margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; gap: clamp(24px, 5vw, 80px);
}
.fuego__fantasma { justify-self: center; width: min(100%, 240px); height: auto; filter: drop-shadow(0 18px 18px rgba(12, 11, 11, .14)); }
.fuego__kicker { margin: 0 0 6px; color: var(--label); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.fuego__sube { display: flex; align-items: baseline; gap: .18em; margin: 10px 0 0; color: var(--red); font: 400 clamp(72px, 10vw, 148px)/.85 var(--font-display); }
.fuego__sube s { color: rgba(12, 11, 11, .45); font-family: var(--font-body); font-size: .36em; text-decoration-thickness: .08em; text-decoration-color: var(--ink); }
/* El % de Brick parece ":/", así que va en Chelsea */
.fuego__pct { font-family: var(--font-body); font-size: .5em; margin-left: .04em; }
.fuego__sube s .fuego__pct { font-size: 1em; margin-left: 0; }
.fuego__flecha { font-family: var(--font-body); font-size: .35em; color: var(--ink); }
.fuego__lead { margin: 14px 0 0; max-width: 30em; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; }
.fuego__datos { list-style: none; margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fuego__datos li { padding: 16px 18px; background: #fff; border: 1px solid #EAE5DD; border-radius: 14px; box-shadow: 0 6px 20px rgba(12, 11, 11, .06); font-size: 15px; line-height: 1.4; color: var(--label); }
.fuego__datos strong { display: block; margin-bottom: 4px; color: var(--red); font-weight: 400; font-size: 17px; }
.fuego__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(24px, 3vw, 34px); }
.fuego__btn { display: inline-block; padding: 13px 26px; border-radius: 999px; background: var(--red); color: #fff; text-decoration: none; font-size: 18px; transition: background .2s; }
.fuego__btn:is(:hover, :focus-visible) { background: var(--ink); }
.fuego__wallet { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 5px; }
.fuego__wallet:hover { color: var(--red); }
@media (max-width: 1100px) { .fuego__datos { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .fuego__in { grid-template-columns: 1fr; }
  .fuego__fantasma { order: 2; width: 150px; }
}

/* ---------- Ensaladas: una carta por poeta (referencia de Luis: carrusel de perfiles) ---------- */
/* Estilo póster: papel limpio, poeta ilustrado en sticker rosa, ensalada al centro. */
.ensaladas {
  position: relative; overflow: hidden; isolation: isolate; color: var(--paper);
  background: var(--ink) url(../img/ensaladas/papel-negro.webp) center / cover; /* papel negro arrugado (ref. de Luis) */
  padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 64px);
}

.ensaladas__titulo { max-width: 1100px; margin: 0 auto; padding: 0 24px; text-align: center; color: var(--paper); font: 400 clamp(20px, 2.2vw, 30px)/1.2 var(--font-body); }
.ensaladas__titulo span { display: block; color: var(--red); font: 400 clamp(56px, 8vw, 120px)/.9 var(--font-display); }
.ensaladas__escena { position: relative; height: clamp(660px, 55vw, 800px); perspective: 1600px; outline: none; touch-action: pan-y; user-select: none; }
.ensaladas__escena:focus-visible { outline: 3px solid currentColor; outline-offset: -6px; }

/* Giro 360 de verdad: todo (carta, nombre, plato, fichas, emojis) vive en .es__giro y gira completo.
   La que se va se ve hasta los 90°; la que llega entra volteada y se endereza a los 270° (main.js). Sin opacity aquí: aplana el 3D. */
.es__giro { position: absolute; inset: 0; transform-style: preserve-3d; }
.es {
  position: absolute; left: 50%; top: 50%; width: clamp(480px, 42vw, 640px); aspect-ratio: 16 / 9; margin-top: -75px;
  translate: -50% -50%; transform-style: preserve-3d; visibility: hidden;
}
.es[data-pos="0"] { visibility: visible; }
.es__poeta { position: absolute; left: 90%; bottom: -26%; height: 104%; aspect-ratio: var(--ar); transform: translateZ(20px); transform-style: preserve-3d; }
.es__poeta img { display: block; width: 100%; height: 100%; }
/* Por qué la ensalada es así (texto de Luis): texto suelto y ancho bajo la ensalada; el CTA va bajo el nombre */
.es__desc {
  position: absolute; left: 50%; top: 138%; width: 190%; translate: -50% 0; margin: 0; padding: 0; box-sizing: border-box;
  color: var(--paper); text-align: center; font-size: 20px; line-height: 1.5; transform: translateZ(110px);
}
.es__desc p { margin: 0; }
.es__desc .es__lema { margin-bottom: 6px; color: var(--red); font-size: 1.2em; }
.ensaladas { --rosa: #E24586; }
.es__plato {
  position: absolute; left: 46%; top: 54%; width: 100%; height: auto; translate: -50% -50%;
  transform: translateZ(70px); filter: drop-shadow(0 26px 24px rgba(12, 11, 11, .5));
}
/* El nombre es una ficha más: calcomanía montada sobre la esquina de la carta */
.es__nombre {
  position: absolute; left: -42%; top: -22%; margin: 0; color: var(--rosa); white-space: nowrap;
  font: 400 clamp(96px, 10vw, 156px)/.85 var(--font-display); transform: translateZ(140px); filter: drop-shadow(0 6px 0 var(--ink));
}
.es__nombre > span { display: block; margin-left: .1em; color: var(--paper); font-size: .32em; }
.es__chip, .es__ing { position: absolute; }
.es__chip {
  margin: 0; padding: 10px 14px; border-radius: 16px; background: #fff; color: var(--ink);
  font-size: 15px; line-height: 1.35; box-shadow: 0 12px 28px rgba(12, 11, 11, .25); transform: translateZ(150px);
}
.es__pedir { display: table; margin-top: 18px; font-family: var(--font-body); line-height: 1.2; white-space: nowrap; background: var(--red); color: #fff; text-decoration: none; font-size: 18px; border-radius: 999px; padding: 13px 24px; }
@media (hover: hover) { .es__pedir:hover { background: var(--paper); color: var(--ink); } }
.es__pedir:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.es__ings { position: absolute; inset: 0; transform-style: preserve-3d; }
.es__ing {
  --t: calc(var(--s) * 1.3);
  left: var(--x); top: var(--y); width: var(--t); height: auto; margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  transform: translateZ(calc(var(--z) + 50px)); rotate: calc(var(--r) * 2.2); filter: drop-shadow(0 10px 12px rgba(12, 11, 11, .35));
  animation: es-flota calc(2.6s + var(--i) * .23s) ease-in-out infinite alternate;
}
@keyframes es-flota { to { translate: 0 -10px; } }
/* Emojis al frente de la ensalada, en anillo sobre su borde (% de .es); el hueco arriba-izquierda es del nombre */
.es__ing:nth-child(1) { --x: 40%; --y: -12%; }
.es__ing:nth-child(2) { --x: 66%; --y: -16%; }
.es__ing:nth-child(3) { --x: 92%; --y: -6%; }
.es__ing:nth-child(4) { --x: 118%; --y: 4%; }
.es__ing:nth-child(5) { --x: 84%; --y: 38%; }
.es__ing:nth-child(6) { --x: 78%; --y: 100%; }
.es__ing:nth-child(7) { --x: 60%; --y: 122%; }
.es__ing:nth-child(8) { --x: 34%; --y: 124%; }
.es__ing:nth-child(9) { --x: 8%; --y: 100%; }
.es__ing:nth-child(10) { --x: -22%; --y: 74%; }
.es__ing:nth-child(11) { --x: -38%; --y: 104%; }
.es__ing:nth-child(12) { --x: -12%; --y: 118%; }
.es__ing:nth-child(13) { --x: 10%; --y: 58%; }

.ensaladas__puntos { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.ensaladas__puntos button {
  width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; opacity: .6; cursor: pointer;
}
.ensaladas__puntos button[aria-selected="true"] { background: currentColor; opacity: 1; }
.ensaladas__puntos button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (min-width: 821px) and (max-width: 1100px) {
  .es { width: 440px; }
  .es__poeta { left: 82%; bottom: -4%; height: 92%; }
  .es__nombre { left: -28%; font-size: 84px; }
  .ensaladas__escena { height: 640px; }
  .es { margin-top: -90px; }
  .es__desc { width: 160%; top: 124%; font-size: 18px; }
  .es__plato { left: 50%; width: 78%; }
  .es__ing:nth-child(1) { --x: 44%; --y: -6%; }
  .es__ing:nth-child(2) { --x: 64%; --y: -10%; }
  .es__ing:nth-child(3) { --x: 86%; --y: -2%; }
  .es__ing:nth-child(4) { --x: 104%; --y: 4%; }
  .es__ing:nth-child(5) { --x: 76%; --y: 30%; }
  .es__ing:nth-child(6) { --x: 74%; --y: 86%; }
  .es__ing:nth-child(7) { --x: 58%; --y: 108%; }
  .es__ing:nth-child(8) { --x: 38%; --y: 110%; }
  .es__ing:nth-child(9) { --x: 20%; --y: 92%; }
  .es__ing:nth-child(10) { --x: -6%; --y: 76%; }
  .es__ing:nth-child(11) { --x: -22%; --y: 100%; }
  .es__ing:nth-child(12) { --x: 14%; --y: 70%; }
  .es__ing:nth-child(13) { --x: 28%; --y: -14%; }
}
/* Celular: carta vertical */
@media (max-width: 820px) {
  .ensaladas__escena { height: 1060px; }
  .es { width: 240px; aspect-ratio: 2 / 3; margin-top: -10px; }
  .es__poeta { left: 56%; bottom: auto; top: -76%; width: 104%; height: auto; translate: -50% 0; }
  .es__plato { left: 50%; top: 77%; width: 138%; }
  .es__nombre { left: -14%; top: 16%; font-size: 64px; }
  .es__chip { font-size: 13px; padding: 8px 11px; }
  .es__pedir { font-size: 16px; margin-top: 12px; }
  .es__desc { width: 136%; top: 121%; font-size: 16px; }
  .es__ing { --t: calc(var(--s) * .9); }
  .es__ing:nth-child(1) { --x: 0%; --y: 0%; }
  .es__ing:nth-child(2) { --x: 0%; --y: 0%; }
  .es__ing:nth-child(3) { --x: 108%; --y: 22%; }
  .es__ing:nth-child(4) { --x: 102%; --y: 46%; }
  .es__ing:nth-child(5) { --x: 108%; --y: 72%; }
  .es__ing:nth-child(6) { --x: 96%; --y: 98%; }
  .es__ing:nth-child(7) { --x: 0%; --y: 0%; }
  .es__ing:nth-child(8) { --x: 66%; --y: 108%; }
  .es__ing:nth-child(9) { --x: 18%; --y: 106%; }
  .es__ing:nth-child(10) { --x: -10%; --y: 98%; }
  .es__ing:nth-child(11) { --x: 0%; --y: 0%; }
  .es__ing:nth-child(12) { --x: -14%; --y: 70%; }
  .es__ing:nth-child(13) { --x: -12%; --y: 50%; }
  .es__ing:nth-child(1), .es__ing:nth-child(2), .es__ing:nth-child(7), .es__ing:nth-child(11), .es__ing:nth-child(13) { display: none; }
}

/* ---------- Footer ---------- */
.footer { background: var(--red); color: #fff; overflow: hidden; }
.footer__top {
  max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
}
.footer__social { display: flex; gap: 24px; }
.footer__social a { text-decoration: none; }
.footer__social a:hover { color: var(--ink); }
.footer__legal { margin: 0; color: rgba(255, 255, 255, .8); font-size: 14px; }
.footer__info { display: grid; gap: 10px; }
.footer__dir { margin: 0; font-size: 15px; }
.footer__dir a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.footer__horario { margin: 0; font-size: 15px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }
.footer__nav a { text-decoration: none; }
.footer__nav a:hover, .footer__dir a:hover { color: var(--ink); }
.footer__legal { align-self: end; }
/* Supergráfico (manual v07, p. 20): logo grande recortado por abajo, dentro del 65 % permitido */
.footer__mark {
  display: block; width: min(96%, 1200px); height: auto; aspect-ratio: 1759 / 1001;
  margin: clamp(24px, 4vw, 48px) auto -9%; color: #fff;
}

/* ---------- Flotantes, igual que en la tienda ---------- */
.wa-float {
  position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--wa);
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
  animation: wa-pulse 2.6s ease-out infinite;
}
.wa-float svg { width: 28px; height: 28px; fill: #fff; }
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}
/* "Pide ahora" baja a la esquina inferior derecha cuando el header se esconde */
.order-float {
  position: fixed; z-index: 60;
  right: clamp(16px, 3vw, 40px); bottom: calc(20px + env(safe-area-inset-bottom));
  border: 2px solid var(--red);
  box-shadow: 0 6px 18px rgba(12, 11, 11, .18);
  translate: 0 calc(100% + 40px);
  transition: translate 260ms var(--ease);
}
.order-float.is-on { translate: 0 0; }
.order-float:not(.is-on) { animation: none; }

/* ---------- Móvil ---------- */
@media (max-width: 820px) {
  .logo { height: 76px; }
  /* Celular: logo al centro; "Pide ahora" vive abajo a la derecha desde el inicio */
  .order-float, .order-float:not(.is-on) { translate: 0 0; animation: laymon-pedir-bounce 1.8s ease-in-out infinite; }

  .hero { grid-template-columns: 1fr; min-height: 0; gap: 8px; padding: calc(var(--promo-h) + env(safe-area-inset-top)) var(--gutter) 72px; }
  .hero__side { align-items: center; text-align: center; }
  .hero__side { --pass-w: 180px; }
  /* Celular: gafete arriba; abajo el título sobre las llamas y la pizza asomando por la derecha */
  .hero { padding-bottom: 0; }
  .hero__main { align-self: start; min-height: 480px; padding: 16px 0 0; }
  .hero__titulo { justify-content: flex-start; }
  .hero__best { width: 190px; }
  .hero__pizza {
    top: auto; bottom: 0; left: 6%; height: 560px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
    mask-image: linear-gradient(to bottom, transparent, #000 22%);
  }
  .eyebrow { font-size: 12px; letter-spacing: .08em; }

  .section-head { flex-direction: column; align-items: start; }

  /* Celular: foto más chica, a sangre por la izquierda y fundida por los otros tres lados */
  .manifesto__photo { position: relative; width: 78%; height: auto; }
  .manifesto__inner { padding-top: 8px; }
  .manifesto__title span:nth-child(n) { padding-left: 0; }
  .manifesto__row { flex-direction: column-reverse; align-items: stretch; }
  .manifesto__text { text-align: left; }
  .manifesto__ghost { width: 180px; }

  .visit { grid-template-columns: 1fr; grid-template-areas: "titulo" "ruta" "datos"; }
  .ruta { margin: 24px 0 8px; }
  .ruta__mapa { height: 420px; }
  .row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .row__label { grid-column: 1; }
  .row__value { grid-column: 1; }
  .row__arrow { grid-column: 2; grid-row: 1 / 3; }

  .footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

}

/* Mientras se ve el Pide ahora del hero, no hay botón flotante */
body.en-hero .order-float.order-float { translate: 0 calc(100% + 40px); animation: none; }

/* ---------- Intro skater (bloque del CSS maestro de Justo, 5.2 s, una vez por carga) ---------- */
:root { --intro-time: 5.2s; --intro-wait: 3.8s; }  /* el pase baja cuando la ola ya destapó la página */
.intro { position: fixed; inset: 0; z-index: 2147483600; overflow: hidden; pointer-events: none;
  --intro-width: clamp(160px, 22vw, 210px); --intro-height: calc(var(--intro-width) * 1.181818); --intro-jump: clamp(64px, 12vh, 96px); }
.intro > span { position: fixed; display: block; }
.intro__paper { inset: -300px -4px -500px; background: #F7F2F0; animation: lm-intro-paper var(--intro-time) linear 1 both; }
.intro__skater {
  left: 50%; top: 44%; width: var(--intro-width); height: var(--intro-height);
  margin-left: calc(var(--intro-width) / -2); margin-top: calc(var(--intro-height) / -2);
  background: url("../img/intro/skater-sprite.svg") 0 0 / 600% 100% no-repeat;
  transform-origin: 50% 84%;
  animation: lm-intro-move var(--intro-time) linear 1 both, lm-intro-poses var(--intro-time) steps(1, end) 1 both, lm-intro-character-hide var(--intro-time) steps(1, end) 1 both;
}
.intro__burst {
  left: 50%; top: 50%; width: 160vmax; height: 160vmax; border-radius: 50%; background: var(--red);
  transform: translate(-50%, -50%) scale(0);
  animation: lm-intro-burst var(--intro-time) linear 1 both;
}
.intro__water {
  top: 0; left: -2%; width: 104%; height: calc(100vh + 160px); height: calc(100dvh + 160px);
  background: url("../img/intro/agua.svg") center / 100% 100% no-repeat;
  opacity: 0; transform: translateY(-160px);
  animation: lm-intro-water var(--intro-time) linear 1 both;
}
@keyframes lm-intro-poses {
  0% { background-position: 0% 0%; }
  18% { background-position: 20% 0%; }
  25% { background-position: 40% 0%; }
  34% { background-position: 60% 0%; }
  41% { background-position: 80% 0%; }
  48% { background-position: 100% 0%; }
  55%, 100% { background-position: 0% 0%; }
}
@keyframes lm-intro-move {
  0% { transform: translate(calc(-50vw - 240px), 0); animation-timing-function: cubic-bezier(.15, .5, .2, 1); }
  18% { transform: translate(-15px, 0); animation-timing-function: ease-out; }
  23% { transform: translate(-10px, 7px) scale(1.02, .96); animation-timing-function: cubic-bezier(.16, .64, .32, 1); }
  34% { transform: translate(4px, calc(var(--intro-jump) * -.92)); animation-timing-function: ease-out; }
  40% { transform: translate(8px, calc(var(--intro-jump) * -1)); animation-timing-function: ease-in; }
  48% { transform: translate(14px, -8px); animation-timing-function: ease-out; }
  51% { transform: translate(17px, 5px) scale(1.04, .94); }
  55% { transform: translate(20px, 0); }
  64%, 100% { transform: translate(22px, 0); }
}
@keyframes lm-intro-character-hide {
  0% { visibility: visible; opacity: 1; }
  70%, 100% { visibility: hidden; opacity: 0; }
}
@keyframes lm-intro-paper {
  0%, 71% { opacity: 1; visibility: visible; }
  72%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes lm-intro-burst {
  0%, 61% { transform: translate(-50%, -50%) scale(0); opacity: 1; visibility: visible; }
  72%, 74% { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
  75%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; visibility: hidden; }
}
@keyframes lm-intro-water {
  0%, 70% { opacity: 0; visibility: visible; transform: translateY(-160px); }
  71%, 76% { opacity: 1; visibility: visible; transform: translateY(-160px); animation-timing-function: cubic-bezier(.42, 0, .76, .6); }
  99.9% { opacity: 1; visibility: visible; transform: translateY(calc(100vh + 160px)); }
  100% { opacity: 0; visibility: hidden; transform: translateY(calc(100vh + 160px)); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --intro-wait: 0s; }
  .intro { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Transiciones entre secciones: los bloques suben y aparecen al entrar en pantalla ---------- */
.revela { opacity: 0; translate: 0 32px; transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--r-delay, 0ms), translate .9s cubic-bezier(.2, .7, .2, 1) var(--r-delay, 0ms); }
.revela.is-visto { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; translate: none; } }