/* =============================================================
   ESTILOS DEL MENÚ DIGITAL · MALIBU PIZZA
   1. Variables (colores y tipografía de la marca)
   2. Base
   3. Encabezado y pasos
   4. Pantalla 1: Inicio (landing)
   5. Pantalla 2: Platos (carrusel)
   6. Pantalla 3: Personaliza
   7. Pantalla 4: Pedido
   8. Confirmación, avisos y accesibilidad
   9. Ventana emergente de reservas
   ============================================================= */


/* ---------- 1. VARIABLES ---------- */
:root {
  /* Colorimetría de la marca */
  --negro: #0D0D0D;
  --azul: #265DA6;          /* el azul de "PIZZA" en el logo */
  --claro: #F2F2F2;
  --superficie: #171717;    /* tarjetas sobre el fondo negro */

  /* Tipografía: Montserrat es la misma familia geométrica y gruesa del logo.
     DM Sans acompaña en los textos largos porque se lee mejor en tamaños pequeños. */
  --titulos: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --texto: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bg: var(--negro);       /* fondo (cambia según el plato) */
  --ink: var(--claro);      /* texto sobre el fondo */
  --panel: var(--claro);    /* tarjetas de Personaliza y Pedido */
  --panel-ink: var(--negro);
  --muted: #5E5E5E;
  --line: rgba(13, 13, 13, .14);
  --error: #C0392B;            /* mensajes de error (más claro en modo oscuro) */
  --promo: var(--azul);        /* línea del 2x1 en "Tu pedido" (más claro en modo oscuro) */
  --s: min(72vw, 360px, 46vh); /* tamaño del plato en el carrusel */
  --rebote: cubic-bezier(.2, .8, .2, 1);

  /* Margen lateral único de toda la página: unos 20 a 24px en celular y crece hasta 48px en
     pantallas grandes. Todo el contenido (encabezado, pantallas, vitrinas, pie) se alinea a esta línea.
     --lado-izq y --lado-der además respetan las zonas seguras del celular (notch y bordes curvos) */
  --margen: clamp(20px, 6vw, 48px);
  --lado-izq: max(var(--margen), env(safe-area-inset-left, 0px));
  --lado-der: max(var(--margen), env(safe-area-inset-right, 0px));

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --panel: #1A1A1A; --panel-ink: var(--claro); --muted: #A3A3A3; --line: rgba(242, 242, 242, .14); --error: #FF8A7A; --promo: #8FB3E8;
  }
}
:root[data-theme="dark"] {
  --panel: #1A1A1A; --panel-ink: var(--claro); --muted: #A3A3A3; --line: rgba(242, 242, 242, .14); --error: #FF8A7A; --promo: #8FB3E8;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  height: 100%;
  background: var(--bg);
  scroll-padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .7s ease;
}
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .7s ease, color .4s;
}
img { max-width: 100%; display: block; -webkit-user-drag: none; }
button {
  font: inherit; color: inherit; cursor: pointer;
  touch-action: manipulation;                 /* sin zoom por doble toque */
  -webkit-tap-highlight-color: transparent;   /* sin el recuadro gris al tocar */
}
button:disabled { cursor: default; opacity: .35; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 12px; }
.muted { color: var(--muted); }

/* Lo que se sale por los lados (la pizza de la portada, las franjas de la carta) se recorta aquí:
   así el celular nunca deja mover la página de lado ni la muestra alejada */
main { overflow-x: clip; }

/* El ancho máximo es el del contenido (content-box): el margen lateral va por fuera y no lo achica en computador */
.screen {
  display: none; box-sizing: content-box; max-width: 680px; margin: 0 auto;
  padding: 6px var(--lado-der) 48px var(--lado-izq);
}
.screen.on { display: block; }

/* Títulos grandes: en mayúsculas y bien gruesos, como el logo */
.big {
  font-family: var(--titulos);
  font-size: clamp(38px, 10vw, 68px);
  line-height: .95;
  letter-spacing: -.01em;
  font-weight: 900;
  text-transform: uppercase;
  margin: 20px 0 12px;
}
.lead { font-size: 18px; line-height: 1.45; max-width: 34ch; margin: 0 0 26px; opacity: .85; }

.ghost {
  border: 2px solid currentColor; background: transparent;
  border-radius: 999px; padding: 8px 16px;
  font-family: var(--titulos); font-weight: 700; font-size: 14px;
}
.solid {
  border: 0; border-radius: 999px; padding: 15px 28px;
  font-family: var(--titulos); font-weight: 800; font-size: 16px;
  background: var(--ink); color: var(--bg);
  transition: transform .2s, background-color .2s;
}
.solid:active { transform: scale(.97); }
.solid.azul { background: var(--azul); color: #fff; }
@media (hover: hover) { .solid.azul:hover { background: var(--azul); } }

/* Cuando falta una foto se muestra este aviso */
.sin-foto {
  display: grid; place-items: center; text-align: center;
  width: 100%; aspect-ratio: 1; padding: 12px;
  border: 3px dashed currentColor; border-radius: 50%;
  font-size: 12px; font-weight: 700; opacity: .7; word-break: break-all;
}


/* ---------- 3. ENCABEZADO Y PASOS ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--bg); transition: background-color .7s ease; }
.top-in {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-sizing: content-box; max-width: 680px; margin: 0 auto;
  padding: 12px var(--lado-der) 10px var(--lado-izq);
}
.brand { display: block; border: 0; background: none; padding: 0; border-radius: 50%; }
.brand img { width: 46px; height: 46px; }
.cart {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid currentColor; background: transparent; border-radius: 999px;
  padding: 7px 8px 7px 14px;
  font-family: var(--titulos); font-weight: 700; font-size: 14px;
}
.badge {
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  background: var(--ink); color: var(--bg);   /* contrario al fondo: se ve también en las pantallas azules */
  display: grid; place-items: center; font-size: 13px;
  transition: background-color .4s, color .7s;
}
.badge.pop { animation: pop .5s; }
@keyframes pop { 40% { transform: scale(1.35); } }

/* Al agregar algo al pedido (js/app.js, destellarPedido): "Mi pedido" rebota y se pone azul 1.2 s,
   y el número nuevo del contador sube desde abajo */
.cart { transition: background-color .3s, border-color .3s, color .3s; }
.cart.destello { background: #265DA6; border-color: #265DA6; color: #fff; animation: rebote-pedido .4s ease-out; }
.cart.destello .badge { background: #fff; color: #265DA6; }
@keyframes rebote-pedido { 50% { transform: scale(1.12); } }
.badge { overflow: hidden; }
.badge-num { display: block; animation: sube-numero .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes sube-numero { from { transform: translateY(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cart.destello, .badge-num { animation: none; } }

/* Con productos en el pedido, "Mi pedido" palpita como un corazón (dos latidos y una pausa) y una onda
   azul sale de su borde. No palpita en 0, dentro de "Tu pedido" ni durante el destello de recién agregado.
   Solo usa transform y box-shadow: no mueve el logo ni la barra */
.con-productos:not(:has([data-screen="pedido"].on)) .cart:not(.destello) { animation: latido-pedido 1.6s ease-in-out infinite; }
@keyframes latido-pedido {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(38, 93, 166, .6); }
  14%  { transform: scale(1.08); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.08); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(38, 93, 166, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 10px rgba(38, 93, 166, 0); }
}
/* Con "reducir movimiento": no palpita, solo el borde azul fijo mientras haya productos */
@media (prefers-reduced-motion: reduce) {
  .con-productos:not(:has([data-screen="pedido"].on)) .cart:not(.destello) { animation: none; border-color: #265DA6; }
}

.steps {
  display: flex; gap: 8px; list-style: none; margin: 0 auto;
  box-sizing: content-box; max-width: 680px; padding: 0 var(--lado-der) 12px var(--lado-izq);
}
.steps li { flex: 1 1 auto; }   /* cada paso ocupa según su texto, así ninguno se parte en dos líneas */
.steps button {
  width: 100%; border: 0; background: transparent; padding: 0;
  text-align: left; font-size: 13px; font-weight: 600; opacity: .6; white-space: nowrap;
}
.steps button::before {
  content: ''; display: block; height: 5px; border-radius: 3px;
  background: currentColor; opacity: .28; margin-bottom: 6px; transition: opacity .3s;
}
.steps button.done::before { opacity: .75; }
.steps button.on { opacity: 1; }
.steps button.on::before { opacity: 1; }
.steps button:disabled { opacity: .4; }
/* En la landing no se muestran los pasos: allí se explican con la sección "Así de fácil" */
.en-inicio .steps { display: none; }
.en-inicio .top-in { max-width: 1040px; }


/* ---------- 4. PANTALLA 1: INICIO (landing) ---------- */
.screen[data-screen="inicio"] { max-width: 1040px; padding-bottom: 0; }

/* Portada */
.hero { position: relative; display: grid; gap: 8px; padding: 8px 0 40px; }
.hero-txt { position: relative; z-index: 2; }
/* El tamaño sale del ancho que queda dentro del margen, para que "BIENVENIDOS" (la palabra más larga)
   quepa completa sin partirse ni tocar el borde, y del alto para que en un celular acostado
   el título no se coma toda la pantalla */
.hero .big {
  font-size: clamp(28px, 8.8vw, 72px); line-height: 1.05;
  margin-top: 18px; overflow-wrap: normal; hyphens: none;
}
/* Siempre dos renglones: "BIENVENIDOS A" y "MALIBU PIZZA", sin que una palabra se baje sola */
.hero .big > span { display: block; white-space: nowrap; }
.hero .big .blanco { color: #fff; }        /* "MALIBU" en blanco */
.hero .big .azul { color: var(--azul); }   /* "PIZZA" en azul, como en el logo */
.hero .lead { max-width: 30ch; }
/* Los dos pasos debajo del título, con el número en azul */
/* Separación clara del título (20-24px en celular, hasta 32px en computador) y 10px entre los pasos */
.hero-lista { list-style: none; padding: 0; display: grid; gap: 10px; counter-reset: hero; margin-top: clamp(20px, 5vw, 32px); }
.hero-lista li { display: grid; grid-template-columns: 1.4em 1fr; counter-increment: hero; line-height: 1.5; }
.hero-lista li::before { content: counter(hero) '.'; font-family: var(--titulos); font-weight: 800; color: var(--azul); }

/* Botones del hero: "Ver la carta" (azul) y "Nuestra historia" (borde blanco), en una fila centrada.
   20px de aire arriba y abajo para no pegarse a la pizza que gira */
.hero-botones {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 380px; margin: 20px auto 0;
}
.hero-boton {
  /* Mismo ancho los dos, llenando la fila: si no caben juntos, el segundo baja y cada uno queda a todo el ancho */
  flex: 1 1 0; min-width: max-content;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; border-radius: 999px;
  font-family: var(--titulos); font-weight: 700; font-size: 14px; line-height: 1;
  white-space: nowrap; text-decoration: none; color: #F2F2F2;
  background: transparent; border: 1.5px solid #F2F2F2; outline: none;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
  /* Aparecen al cargar, uno después del otro (0.1s), con el mismo fundido del scroll reveal */
  animation: hero-boton-entra .6s var(--rebote) backwards;
}
.hero-boton + .hero-boton { animation-delay: .1s; }
/* Al tocarlos (celular) o pasar el mouse (PC): fondo y borde azules. El :hover solo en equipos con mouse,
   para que en el celular no se quede pegado en azul después de tocarlo */
.hero-boton:active { background: #265DA6; border-color: #265DA6; transform: scale(.96); }
@media (hover: hover) {
  .hero-boton:hover { background: #265DA6; border-color: #265DA6; }
}
/* Con teclado: borde azul */
.hero-boton:focus-visible { border-color: #265DA6; box-shadow: 0 0 0 2px #265DA6; }
@keyframes hero-boton-entra { from { opacity: 0; transform: translateY(20px); } }
@media (prefers-reduced-motion: reduce) { .hero-boton { animation: none; transition: none; } }

/* Flecha que rebota debajo de los botones. Al bajar más de 80px se desvanece (js/app.js) */
.deslizar {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 4px auto 20px; padding: 0;
  border: 0; background: none;
  transition: opacity .3s ease;
}
.deslizar svg {
  width: 24px; height: 24px; fill: none; stroke: var(--azul);
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  animation: rebote-flecha 1.6s ease-in-out infinite;
}
.deslizar.oculto { opacity: 0; pointer-events: none; }
@keyframes rebote-flecha { 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .deslizar svg { animation: none; } }

/* Las pizzas del menú pasan rodando por el anillo blanco del logo, una por una (js/app.js, "Portada").
   Lo que se sale por arriba o por abajo de la portada se recorta; hacia los lados lo recorta la página,
   así los dibujos de fondo de los costados se siguen viendo. */
.hero { overflow-x: visible; overflow-y: clip; }
.hero-lado { justify-self: end; width: min(92vw, 520px); margin: 4px -18vw 0 0; }
.hero-pizza { position: relative; aspect-ratio: 1; }
.hero-rueda { position: absolute; inset: 0; pointer-events: none; }
.hero-toque {
  position: absolute; inset: 7%; z-index: 1;
  border: 0; border-radius: 50%; background: none; padding: 0; cursor: pointer;
}
/* Nombre de la pizza que está en el anillo y botón de pausa */
.hero-nombre {
  position: relative; z-index: 2;   /* queda por encima de la pizza que entra rodando */
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px;
  font-family: var(--titulos); font-weight: 800; font-size: 18px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}
.hero-pausa {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid rgba(242, 242, 242, .6); border-radius: 50%; background: rgba(13, 13, 13, .55);
  font-size: 9px; line-height: 1;
}
.anillo {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--claro);
  box-shadow: 0 0 0 10px var(--negro), 0 0 0 12px rgba(242, 242, 242, .12);
}
/* Todas las fotos están una encima de otra; solo se ve la que tiene "on" */
.hero-img {
  position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6));
  opacity: 0; will-change: transform, opacity;
}
.hero-img.on { opacity: 1; }
.hero-pizza .sello {
  position: absolute; left: 2%; bottom: 6%; z-index: 2;
  background: var(--azul); color: #fff; border-radius: 999px; padding: 10px 16px;
  font-family: var(--titulos); font-weight: 800; font-size: 14px; line-height: 1.15;
  white-space: nowrap;   /* el texto no se parte: el óvalo crece hacia la derecha */
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6);
}
.hero-pizza .sello small { display: block; font-family: var(--texto); font-weight: 500; font-size: 12px; opacity: .85; }

/* Secciones de la landing */
.bloque { padding: 44px 0; border-top: 1px solid rgba(242, 242, 242, .12); }
.bloque h2, .vitrina h2 {
  font-family: var(--titulos); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 7vw, 44px); line-height: 1; letter-spacing: -.005em;
  margin: 0 0 24px;
}

/* Así de fácil: 4 pasos en orden */
.como { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: paso; }
.como li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; counter-increment: paso; }
.como li::before {
  content: counter(paso);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: #fff;
  font-family: var(--titulos); font-weight: 900; font-size: 22px;
  box-shadow: 0 0 0 3px var(--negro), 0 0 0 5px var(--claro);   /* mini anillo del logo */
}
.como b { display: block; font-family: var(--titulos); font-weight: 800; font-size: 18px; margin: 4px 0 4px; }
.como p { margin: 0; font-size: 16px; line-height: 1.4; opacity: .75; max-width: 36ch; }

/* La carta: una vitrina por categoría, con el carrusel de la pantalla 2 (sección 5).
   Es una franja de borde a borde que toma el color del plato visible.
   --vitrina y --vitrina-ink los pone js/app.js; aquí reemplazan a --bg y --ink solo dentro de la franja. */
.vitrina {
  --vitrina: var(--negro);
  --vitrina-ink: var(--claro);
  --bg: var(--vitrina);
  --ink: var(--vitrina-ink);
  margin: 0 calc(50% - 50vw);
  padding: 44px 0;
  background: var(--bg); color: var(--ink);
  transition: background-color .7s ease, color .4s;
}
/* Una sola columna centrada, en celular y en computador: título, carrusel, nombre, descripción, precio y botones */
.vitrina-in {
  box-sizing: content-box; max-width: 1040px; margin: 0 auto;
  padding: 0 var(--lado-der) 0 var(--lado-izq); text-align: center;
}
.vitrina h2 { margin-bottom: 30px; }
.vitrina .info { padding-top: 24px; }
.vitrina .info p { max-width: 40ch; margin-bottom: 4px; }   /* el precio queda pegado a la descripción */
.vitrina .actions { position: static; margin: 20px 0 0; padding: 0; background: none; }

/* Primera vitrina de la carta: empieza con una curva (esquinas de arriba redondeadas) sobre el fondo negro
   de arriba, y el rótulo pequeño "── LA CARTA ──" */
.vitrina-primera { border-radius: 32px 32px 0 0; padding-top: 28px; }
.rotulo-carta {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 22px;
  font-family: var(--titulos); font-weight: 800; font-size: 12px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.rotulo-carta::before, .rotulo-carta::after { content: ''; width: 24px; height: 1px; background: currentColor; }
.rotulo-carta { padding-left: .25em; }   /* el espaciado de letras deja aire a la derecha: así queda centrado */

/* Pestañas Clásicas / Especiales: una cápsula de ancho completo con un indicador blanco que se desliza
   debajo de la activa (data-activa lo pone js/app.js). La activa con letra negra; la otra blanca y tenue.
   Más grandes y redondas que los botones de Personal / Familiar, que van debajo */
.pestanas-carta {
  --n: 2;
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  max-width: 460px; height: 52px; margin: 0 auto 22px; padding: 4px; border-radius: 999px;
  border: 1.5px solid rgba(242, 242, 242, .25);   /* siempre con borde: se ve el contorno sobre azul y sobre negro */
  background: rgba(13, 13, 13, .25);
  transition: background-color .3s ease;
}
/* Sección negra (data-fondo lo pone js/app.js, igual que para los botones de tamaño): un gris muy suave */
.vitrina[data-fondo="negro"] .pestanas-carta { background: rgba(242, 242, 242, .08); }
.pestana-indicador {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n));
  border-radius: 999px; background: #F2F2F2; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pestanas-carta[data-activa="1"] .pestana-indicador { transform: translateX(100%); }
.pestanas-carta[data-activa="2"] .pestana-indicador { transform: translateX(200%); }
.pestanas-carta button {
  position: relative; z-index: 1; min-width: 0; padding: 0 8px; border: 0; border-radius: 999px; background: none;
  font-family: var(--titulos); font-weight: 800; font-size: 15px; line-height: 1; white-space: nowrap;
  color: rgba(255, 255, 255, .75); transition: color .3s;
}
.pestanas-carta [aria-selected="true"] { color: #0D0D0D; }
@media (hover: hover) { .pestanas-carta [aria-selected="false"]:hover { color: #fff; } }
@media (prefers-reduced-motion: reduce) { .pestana-indicador { transition: none; } }
/* "Ármala a tu gusto" queda bajo Clásicas y Especiales, a la vista, sin deslizar el carrusel */
.menu-carta { max-width: 460px; margin: 0 auto 22px; }
.menu-carta .pestanas-carta { max-width: none; margin: 0 0 10px; }
.armala-carta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px dashed rgba(242, 242, 242, .55); background: transparent;
  color: var(--vitrina-ink); font-family: var(--titulos); font-weight: 800;
  font-size: clamp(14px, 3.8vw, 16px); line-height: 1.15; cursor: pointer;
}
@media (hover: hover) { .armala-carta:hover { background: rgba(242, 242, 242, .12); } }

/* Título y subtítulo ("Las de siempre · 5 sabores") */
.vitrina:has(.pestanas-carta) h2 { margin-bottom: 8px; }
.subtitulo-carta { margin: 0 0 22px; font-family: var(--texto); font-size: 15px; color: var(--ink); opacity: .8; }

/* Tarjeta al final de las Clásicas: "¿Ya viste las Especiales? →" con una especial pequeña */
.aviso-especiales {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; padding: 12%; border-radius: 50%;
  border: 3px dashed rgba(242, 242, 242, .55); text-align: center;
}
.aviso-esp-foto { width: 52%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.aviso-especiales p { margin: 0; font-family: var(--titulos); font-weight: 800; font-size: clamp(16px, 4.6vw, 20px); line-height: 1.2; }
.aviso-especiales b { color: var(--vitrina-ink); text-decoration: underline; text-underline-offset: 4px; }
/* Tarjeta al final de Clásicas y Especiales: "Ármala a tu gusto", en dos líneas para que quepa en el círculo */
.aviso-armala {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 100%; padding: 16% 12% 14%; border-radius: 50%; box-sizing: border-box; overflow: hidden;
  border: 3px dashed rgba(242, 242, 242, .55); text-align: center;
}
.aviso-armala-foto { width: 44%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.aviso-armala p {
  margin: 0; max-width: 100%;
  font-family: var(--titulos); font-weight: 800; font-size: clamp(14px, 4vw, 22px); line-height: 1.12;
}
.aviso-armala b { display: block; color: var(--vitrina-ink); text-decoration: underline; text-underline-offset: 3px; }
/* En esas tarjetas no aplica "👆 Toca la pizza y mira sus ingredientes" */
.carousel:has(.slide.active[data-vista="aviso"]) .pista-toque { opacity: 0; }

/* Reservas: una tarjeta por plan (PLANES_RESERVA en js/menu.js). Toda la tarjeta es un botón
   que abre la ventana emergente (sección 9) */
.reservas h2 { margin-bottom: 12px; }
.planes { display: grid; gap: 14px; }
.plan {
  position: relative; overflow: hidden;
  padding: 0; text-align: left;
  background: var(--superficie); color: var(--claro);
  border: 1px solid rgba(242, 242, 242, .1); border-radius: 26px;
  transition: border-color .25s, transform .25s;
}
.plan:active { transform: scale(.98); }
@media (hover: hover) { .plan:hover { border-color: var(--azul); } }
/* La foto va a la izquierda de la tarjeta, a todo lo alto y recortada: sirve para fotos verticales u horizontales */
.plan-foto { width: 100%; object-fit: cover; }
.plan.con-foto { min-height: 190px; padding-left: 38%; }
.plan .plan-foto { position: absolute; left: 0; top: 0; width: 38%; height: 100%; }
.sin-foto.plan-foto { border-radius: 18px; aspect-ratio: auto; }   /* el aviso de "Falta la foto", rectangular */
.plan > div { padding: 16px 18px 18px; }
.plan b { display: block; font-family: var(--titulos); font-weight: 800; font-size: 20px; line-height: 1.1; }
.plan p { margin: 6px 0 12px; font-size: 15px; line-height: 1.35; opacity: .75; }
.plan-precio {
  display: inline-block; background: var(--azul); color: #fff;
  border-radius: 999px; padding: 5px 12px;
  font-family: var(--titulos); font-weight: 700; font-size: 13px;
}
@media (min-width: 760px) { .planes { grid-template-columns: 1fr 1fr; } }

/* Decoración: íconos de líneas blancas (img/iconos-fondo/) detrás del contenido de la portada, "Así de fácil",
   las reservas y el pie. Qué íconos salen, dónde y de qué tamaño se define en ICONOS_FONDO de js/app.js. */
[data-doodles] { position: relative; isolation: isolate; }
.doodles {
  position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;   /* de borde a borde */
  z-index: -1; overflow: hidden; pointer-events: none;
}
/* El ancho lo pone js/app.js; el alto sale de la proporción de cada imagen. "translate" centra el ícono
   en su punto (x, y) y "transform" queda libre para el parallax */
.doodle { position: absolute; translate: -50% -50%; will-change: transform; pointer-events: none; }
/* Antes de aparecer: invisible, un poco girado y tapado por una máscara diagonal (un degradado tres veces
   más grande que el ícono: la parte opaca arriba a la izquierda, la transparente abajo a la derecha) */
.doodle {
  /* ✏️ Grosor extra de las líneas: dos sombras claras pegadas al trazo lo hacen ver más grueso.
     Más alto = líneas más gruesas (desde ~1px se empiezan a ver como manchas) */
  --grosor: .6px;
}
.doodle.detallado { --grosor: .3px; }   /* pizza, aceitunas-plato, tomates-2: la mitad, para que el detalle no se empaste */
/* El engrosado (filter) va en el contenedor y la máscara en la imagen: Safari de iPhone no dibuja bien
   un filter y una máscara juntos en el mismo elemento, y el ícono se quedaba oculto */
.doodle { filter: drop-shadow(0 0 var(--grosor) #F2F2F2) drop-shadow(0 0 var(--grosor) #F2F2F2); }
.doodle img {
  display: block; width: 100%; height: auto;
  opacity: 0; transform: rotate(calc(var(--giro) - 14deg));
  -webkit-mask-image: linear-gradient(135deg, #000 45%, transparent 55%);
  mask-image: linear-gradient(135deg, #000 45%, transparent 55%);
  -webkit-mask-size: 300% 300%; mask-size: 300% 300%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%; mask-position: 100% 100%;
  transition: -webkit-mask-position .9s ease, mask-position .9s ease, opacity .5s ease, transform .9s var(--rebote);
  transition-delay: var(--espera, 0ms);
}
/* Al entrar en pantalla la máscara corre en diagonal y el ícono se va descubriendo, como si se dibujara */
.doodle.visto img {
  opacity: var(--opacidad, .2); transform: rotate(var(--giro));
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
/* Seguro: 2 segundos después de entrar en pantalla el ícono ya no lleva máscara (si el navegador no la
   dibujó, igual queda visible). Y si el navegador no tiene máscaras, solo fundido con un pequeño giro */
.doodle.listo img, .sin-mascara .doodle img { -webkit-mask-image: none; mask-image: none; }
.doodle.listo img { opacity: var(--opacidad, .2); transform: rotate(var(--giro)); }
/* Celular: más claros (con la pantalla pequeña y el brillo bajo se perdían). Su lugar lo calcula js/app.js */
@media (max-width: 599px) {
  .doodle.visto img, .doodle.listo img { opacity: .5; }
}

/* Pie de página */
.pie { padding: 48px 0 56px; border-top: 1px solid rgba(242, 242, 242, .12); text-align: center; }
.pie img { width: 120px; height: 120px; margin: 0 auto 14px; }
.pie p { margin: 0 0 22px; opacity: .7; }
/* Dirección (abre Google Maps) e íconos de redes */
.pie-dir { margin: 30px auto 0; max-width: 30ch; font-style: normal; line-height: 1.45; }
/* "Ver en el mapa", al lado de la dirección: subrayado, con espacio cómodo para tocarlo */
.pie-dir a {
  display: inline-block; margin-left: 6px; padding: 10px 2px; color: inherit; font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242, 242, 242, .5);
}
.pie-dir svg { width: 18px; height: 18px; margin-right: 4px; vertical-align: -3px; }
.pie-dir svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.redes { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.red {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid currentColor; color: var(--claro);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.pie .doodle img { width: 100%; height: auto; margin: 0; }   /* los íconos de fondo tampoco llevan el tamaño del logo */
.red:active { transform: scale(.94); }
@media (hover: hover) { .red[href]:hover { background: var(--azul); border-color: var(--azul); } }
.red.pendiente { opacity: .35; }   /* red sin enlace todavía (js/menu.js) */

/* ----- Marquesina entre la carta y "Quiénes somos": cinta azul inclinada, de borde a borde, con los íconos
   en blanco y "MALIBU PIZZA ✦" pasando solos de derecha a izquierda (35 s por vuelta). La zona recorta lo
   que se sale por los lados (la cinta es 10% más ancha que la pantalla para que no se vean las puntas) ----- */
.marquesina-zona {
  margin: 0 calc(50% - 50vw); padding: 24px 0;
  overflow: hidden; background: #0D0D0D;
}
.marquesina {
  width: 110%; margin-left: -5%; height: 64px; transform: rotate(-2deg);
  display: flex; align-items: center; overflow: hidden;
  background: #265DA6; border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.marquesina-pista {
  display: flex; align-items: center; width: max-content; flex: none;
  animation: marquesina 35s linear infinite; will-change: transform;
}
@keyframes marquesina { to { transform: translateX(-50%); } }   /* la mitad: el contenido va dos veces */
.marquesina:hover .marquesina-pista, .marquesina.pausada .marquesina-pista { animation-play-state: paused; }
/* Cada ícono: el dibujo como máscara y el color blanco de fondo, así queda blanco y nítido.
   Separación con margen (no con gap) para que las dos mitades midan exactamente lo mismo */
/* "MALIBU PIZZA": una rellena en blanco y la siguiente solo con contorno. La estrella entre las dos,
   tenue y con 24px a cada lado (la separación va con margen, no con gap: así las dos mitades miden igual) */
.marq-texto {
  flex: none; white-space: nowrap; color: #F2F2F2; line-height: 1;
  font-family: var(--titulos); font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(22px, 6vw, 34px);
}
/* Letra de contorno: rellena del azul de la cinta y con un borde blanco de 1.5px hecho con sombras alrededor.
   No se usa -webkit-text-stroke porque la Montserrat de Google es una fuente "variable" con piezas
   superpuestas, y ese borde dibuja rayas por dentro de las letras (A, B, P). Las sombras funcionan en
   todos los navegadores, así que no hace falta un plan B */
.marq-contorno {
  color: #265DA6;
  text-shadow:
    1.5px 0 0 #F2F2F2, -1.5px 0 0 #F2F2F2, 0 1.5px 0 #F2F2F2, 0 -1.5px 0 #F2F2F2,
    1.06px 1.06px 0 #F2F2F2, -1.06px 1.06px 0 #F2F2F2, 1.06px -1.06px 0 #F2F2F2, -1.06px -1.06px 0 #F2F2F2,
    1.4px .6px 0 #F2F2F2, -1.4px .6px 0 #F2F2F2, 1.4px -.6px 0 #F2F2F2, -1.4px -.6px 0 #F2F2F2,
    .6px 1.4px 0 #F2F2F2, -.6px 1.4px 0 #F2F2F2, .6px -1.4px 0 #F2F2F2, -.6px -1.4px 0 #F2F2F2;
}
.marq-estrella { flex: none; margin: 0 24px; color: rgba(242, 242, 242, .6); font-size: clamp(16px, 4vw, 22px); line-height: 1; }
@media (min-width: 900px) { .marquesina { height: 80px; } }
@media (prefers-reduced-motion: reduce) { .marquesina-pista { animation: none; } }

/* ----- Quiénes somos: la historia, antes del pie. Fondo negro de borde a borde (la sombra extiende el fondo
   hacia los lados y clip-path la recorta arriba y abajo), texto en una columna cómoda de leer ----- */
.historia {
  background: #0D0D0D; color: #F2F2F2;
  box-shadow: 0 0 0 100vmax #0D0D0D; clip-path: inset(0 -100vmax);
  scroll-margin-top: 70px;   /* el enlace del pie no la deja debajo del encabezado fijo */
}
.historia-in {
  max-width: 620px; margin: 0 auto;
  font-family: var(--texto); font-size: 16px; line-height: 1.7;
}
.historia-in h2 { margin: 0 0 18px; }
.historia-in p { margin: 0 0 20px; }
/* Frases destacadas: más grandes, en Montserrat, como cita con una raya azul a la izquierda */
.historia-cita {
  font-family: var(--titulos); font-weight: 800; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.3;
  color: #F2F2F2; padding-left: 16px; border-left: 4px solid #265DA6;
}
.historia-cita.grande { color: #265DA6; font-weight: 900; font-size: clamp(24px, 6.6vw, 34px); line-height: 1.2; border: 0; padding: 0; }
/* Fotos: ancho completo de la columna, 4:5, recortadas sin deformarse. Sin foto: recuadro gris con el texto */
.historia-foto { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 20px; margin: 6px 0 40px; }
.foto-falta.historia-foto {
  display: grid; place-items: center; padding: 20px; text-align: center;
  background: #2A2A2A; color: rgba(242, 242, 242, .7); font-weight: 700; font-size: 15px;
}
/* ----- Quiénes somos · capítulos. Primero celular, luego PC (min-width: 900px) ----- */
.historia { overflow-x: clip; }   /* las filas del muro llegan al borde de la pantalla sin crear scroll horizontal */

/* Capítulo 1 · Los inicios: pila de polaroids. Marco #F2F2F2 (10px a los lados y arriba, 40px abajo), cada foto
   girada distinto; la de arriba lleva la leyenda en el borde de abajo. 78% de la pantalla, máximo 320px */
.pila { position: relative; width: 78%; max-width: 320px; margin: 32px auto; touch-action: pan-y; }
.pila-fotos { position: relative; display: grid; isolation: isolate; }
/* Resplandor azul debajo de la pila */
.pila-fotos::after {
  content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -14px; height: 44px;
  background: rgba(38, 93, 166, .85); filter: blur(26px); border-radius: 50%;
}
.pol {
  --r: -5deg; --abre: 0deg; --sx: 0px;
  grid-area: 1 / 1; margin: 0; padding: 10px 10px 40px; position: relative; z-index: calc(10 - var(--d, 0));
  background: #F2F2F2; box-shadow: 0 8px 22px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  transform: translate(var(--sx), var(--sy, 0px)) rotate(calc(var(--r) + var(--abre)));
  transition: transform .25s ease; cursor: grab; user-select: none; -webkit-user-select: none;
}
.pol[data-d="0"] { --r: -5deg; }
.pol[data-d="1"] { --r: 4deg; }
.pol[data-d="2"] { --r: -2deg; }
.pol[data-d]:not([data-d="0"]):not([data-d="1"]):not([data-d="2"]) { --r: 0deg; }
.pol.sale { --sx: 115%; --sy: 28px; transition-duration: .25s; }
.pol.entra { transition-duration: .5s; }
.pol.sin-trans { transition: none; }
.pol img, .pol .foto-falta {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  filter: sepia(.25) saturate(.85); pointer-events: none;
}
.pol .foto-falta { display: grid; place-items: center; padding: 20px; text-align: center; background: #2A2A2A; color: rgba(242, 242, 242, .7); font-weight: 700; font-size: 15px; }
.pol figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: grid; place-items: center;
  font-family: var(--texto); font-style: italic; font-size: 14px; color: #333; opacity: 0; transition: opacity .25s;
}
.pol[data-d="0"] figcaption { opacity: 1; }
.pila-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 30px; }
.pila-puntos { display: flex; justify-content: center; gap: 4px; }
/* Flechas ‹ ›: 44px, borde #F2F2F2 de 1.5px, fondo #0D0D0D al 60%; azul un momento al tocarlas */
.pila-flecha {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 3px; flex: none; border-radius: 50%;
  border: 1.5px solid #F2F2F2; background: rgba(13, 13, 13, .6); color: #fff; font-size: 26px; line-height: 1;
  transition: background-color .2s;
}
.pila-flecha:active, .pila-flecha.tocado { background: #265DA6; }
.pila-puntos button { width: 30px; height: 30px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.pila-puntos i { display: block; width: 8px; height: 8px; border-radius: 4px; background: rgba(242, 242, 242, .35); transition: width .3s, background-color .3s; }
.pila-puntos [aria-current="true"] i { width: 24px; background: #F2F2F2; }
.pila.una-foto .pila-nav { display: none; }

/* Capítulo 2 · Hoy: muro en movimiento. En celular, dos filas (m-a arriba hacia la izquierda, m-d abajo hacia la
   derecha) a todo el ancho de la pantalla y el texto en medio; m-b y m-c solo existen en PC */
.hoy-muro { display: flex; flex-direction: column; gap: 28px; width: 100vw; margin: 36px 0 36px calc(50% - 50vw); }
.hoy-lado { display: contents; }
.hoy-muro .m-a { order: 1; }
.hoy-txt { order: 2; padding: 0 20px; }
.hoy-muro .m-d { order: 3; }
.hoy-muro .m-b, .hoy-muro .m-c { display: none; }
.hoy-txt .historia-cita { margin: 0; }
.hoy-blanco { color: #F2F2F2; }
.hoy-azul { color: #265DA6; }
.muro {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.muro-pista { display: flex; width: max-content; animation: muro-x 35s linear infinite; will-change: transform; }
.muro-tanda { display: flex; gap: 12px; padding-right: 12px; }
.muro img, .muro .foto-falta { flex: none; display: block; width: 150px; height: 150px; object-fit: cover; border-radius: 16px; }
.muro .foto-falta { display: grid; place-items: center; background: #2A2A2A; color: rgba(242, 242, 242, .7); font-size: 13px; text-align: center; }
.muro-tanda > :nth-child(5n+1) { width: 150px; }
.muro-tanda > :nth-child(5n+2) { width: 190px; }
.muro-tanda > :nth-child(5n+3) { width: 130px; }
.muro-tanda > :nth-child(5n+4) { width: 170px; }
.muro-tanda > :nth-child(5n+5) { width: 140px; }
.hoy-muro .m-d .muro-pista { animation-direction: reverse; }
/* Malibu lleno es horizontal: recuadro más ancho que las demás fotos */
.muro-tanda > img.ancho { width: 220px; height: 150px; object-position: center; }
@keyframes muro-x { to { transform: translateX(-50%); } }
@keyframes muro-y { to { transform: translateY(-50%); } }
/* Se pausa al tocar o pasar el mouse, y cuando el muro no está en pantalla (app.js pone .fuera) */
.muro:hover .muro-pista, .muro.pausada .muro-pista, .hoy-muro.fuera .muro-pista { animation-play-state: paused; }

@media (min-width: 900px) {
  /* Contenedor centrado de 1100px con 40px a los lados (sale de la columna de texto, siempre centrado en la ventana) */
  .inicios, .hoy-muro {
    box-sizing: border-box; width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0;
    padding-inline: max(40px, calc((100vw - 1020px) / 2));
  }
  .inicios { display: grid; grid-template-columns: 468px minmax(0, 1fr); column-gap: 56px; align-items: center; margin-bottom: 20px; }
  .inicios-a, .inicios-b { min-width: 0; }
  .inicios-a { grid-column: 2; grid-row: 1; align-self: end; }
  .inicios-b { grid-column: 2; grid-row: 2; align-self: start; }
  .pila { grid-column: 1; grid-row: 1 / 3; width: 340px; max-width: none; margin: 32px auto; }
  /* PC: las flechas van a los lados de la pila, centradas en vertical sobre las fotos, a 16px del borde */
  .pila-nav { display: contents; }
  .pila-flecha { position: absolute; top: calc((100% - 60px) / 2); transform: translateY(-50%); }
  .pila-prev { right: calc(100% + 20px); }
  .pila-next { left: calc(100% + 20px); }
  .pila:hover .pol[data-d="1"] { --abre: 7deg; }
  .pila:hover .pol[data-d="2"] { --abre: -8deg; }
  .pila:hover .pol[data-d="0"] { --abre: -2deg; }

  .hoy-muro { display: grid; grid-template-columns: 1fr 1fr 1.8fr 1fr 1fr; gap: 16px; height: 640px; margin-top: 48px; margin-bottom: 48px; }
  .hoy-lado { display: contents; }
  .hoy-muro .m-b, .hoy-muro .m-c { display: block; }
  .hoy-muro .m-a, .hoy-muro .m-d, .hoy-txt { order: 0; }
  .hoy-txt { display: grid; place-items: center; text-align: center; padding: 0; min-width: 0; }
  .hoy-txt .historia-cita {
    font-family: var(--titulos); font-weight: 800; font-size: clamp(22px, 2vw, 32px); line-height: 1.25;
    color: #F2F2F2; border: 0; padding: 0 16px; max-width: 20ch; margin: 0 auto; text-align: center; text-wrap: balance; box-sizing: content-box;
  }
  .muro {
    flex: 1; min-width: 0; height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  }
  .muro-pista { flex-direction: column; width: auto; height: max-content; animation: muro-y 45s linear infinite; }
  .muro-tanda { flex-direction: column; padding: 0 0 12px; }
  .muro img, .muro .foto-falta { width: 100%; max-width: none; margin: 0; height: 280px; }
  .muro-tanda > :nth-child(5n+1) { width: 100%; height: 280px; }
  .muro-tanda > :nth-child(5n+2) { width: 100%; height: 320px; }
  .muro-tanda > :nth-child(5n+3) { width: 100%; height: 240px; }
  .muro-tanda > :nth-child(5n+4) { width: 100%; height: 300px; }
  .muro-tanda > :nth-child(5n+5) { width: 100%; height: 260px; }
  .muro-tanda > img.ancho { width: 100%; max-width: none; height: 180px; }
  /* Las de afuera suben, las de adentro bajan */
  .hoy-muro .m-a .muro-pista, .hoy-muro .m-d .muro-pista { animation-direction: normal; }
  .hoy-muro .m-b .muro-pista, .hoy-muro .m-c .muro-pista { animation-direction: reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .muro-pista { animation: none; }
  .pol { transition: none; }
}
.historia .redes { justify-content: flex-start; margin: -4px 0 28px; }
.historia .red { width: 44px; height: 44px; }
.historia .red.social svg { width: 22px; height: 22px; }
/* Cierre: centrado y grande; "Somos un sueño hecho realidad" en Montserrat 900 azul */
.historia-cierre { text-align: center; font-size: 19px; line-height: 1.5; margin: 8px 0 0 !important; }
.historia-cierre strong {
  display: block; margin: 8px 0; color: #265DA6;
  font-family: var(--titulos); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 8.4vw, 44px); line-height: 1.05; letter-spacing: -.01em;
}
/* "Volver al inicio": círculo de 48px con la flecha que sube y baja, y el texto debajo. Centrado,
   32px debajo del cierre. Al tocarlo, el círculo se pone azul un momento */
.volver-inicio {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 32px auto 0; padding: 4px 12px; border: 0; background: none; color: #F2F2F2;
}
.volver-circulo {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid #F2F2F2; background: transparent; transition: background-color .3s, border-color .3s;
}
.volver-circulo svg {
  width: 22px; height: 22px; fill: none; stroke: #F2F2F2; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  animation: flecha-sube 1.6s ease-in-out infinite;
}
@keyframes flecha-sube { 50% { transform: translateY(-4px); } }
.volver-txt { font-family: var(--texto); font-size: 14px; opacity: .8; }
.volver-inicio.tocado .volver-circulo { background: #265DA6; border-color: #265DA6; }
@media (hover: hover) { .volver-inicio:hover .volver-circulo { background: rgba(38, 93, 166, .35); } }
@media (prefers-reduced-motion: reduce) { .volver-circulo svg { animation: none; } }

/* Entre "Bienvenido a la familia Malibu." y la línea del pie: un margen normal de 48px en todas las pantallas
   (el botón de WhatsApp se esconde mientras el cierre está a la vista, así que no hace falta más) */
.bloque.historia { padding-bottom: 48px; }

/* "Quiénes somos" en el pie: enlace subrayado */
.pie .pie-enlaces { margin: -10px 0 22px; opacity: 1; }
.pie-enlaces a {
  display: inline-block; padding: 10px 4px; color: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242, 242, 242, .5);
}

/* "Síguenos", debajo del logo: título pequeño, los íconos de las redes (RESTAURANTE.redes) y el usuario
   de Instagram. Círculos de 48px con borde blanco fino, como el anillo del logo; al tocarlos, azul */
.siguenos { margin: 0 0 24px; }
.pie .siguenos p { margin: 0; opacity: 1; }
.siguenos-titulo { font-family: var(--titulos); font-weight: 800; font-size: 14px; }
.redes.sociales { gap: 16px; margin-top: 10px; }
.red.social { border-width: 1.5px; }
.red.social svg { width: 24px; height: 24px; display: block; }
.red.social:active { background: var(--azul); border-color: var(--azul); }

/* Confirmación del pedido: "Síguenos en Instagram @malibupizza.co" */
.siguenos-listo { margin: -8px auto 24px; font-size: 15px; opacity: .9; }
.siguenos-listo:empty { display: none; }
.siguenos-listo a { color: inherit; font-weight: 700; text-underline-offset: 3px; }


/* ---------- 5. PANTALLA 2: PLATOS (carrusel) ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.bar > .ghost { flex: none; }

/* Pestañas de categorías: la activa en azul. En celular la fila se desliza de lado */
.pestanas {
  position: relative; flex: 1; min-width: 0;
  display: flex; gap: 6px; overflow-x: auto; padding: 3px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  flex: none; white-space: nowrap;
  border: 2px solid transparent; border-radius: 999px; padding: 7px 14px;
  background: rgba(242, 242, 242, .12); background: color-mix(in srgb, currentColor 13%, transparent);
  font-family: var(--titulos); font-weight: 700; font-size: 14px; opacity: .8;
  transition: background-color .2s, opacity .2s;
}
/* La activa: azul de la marca con borde del color del texto, así se distingue también sobre los fondos azules */
.pestanas [aria-current] { opacity: 1; background: var(--azul); border-color: var(--ink); color: #fff; }

/* Bebidas: un botón por grupo con su precio debajo, arriba del carrusel. Centrados si caben;
   si no, la fila se desliza de lado de borde a borde de la pantalla */
.grupos:empty { display: none; }
.grupos {
  position: relative; display: flex; gap: 8px; overflow-x: auto;
  margin: 12px calc(-1 * var(--lado-der)) 0 calc(-1 * var(--lado-izq));
  padding: 3px var(--lado-der) 3px var(--lado-izq);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.grupos::-webkit-scrollbar { display: none; }
.grupos > :first-child { margin-left: auto; }
.grupos > :last-child { margin-right: auto; }
.grupos button {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  white-space: nowrap; min-height: 44px; padding: 6px 16px; border-radius: 16px;
  border: 2px solid rgba(242, 242, 242, .35); border-color: color-mix(in srgb, currentColor 35%, transparent);
  background: transparent;
  font-family: var(--titulos); font-weight: 700; font-size: 14px; line-height: 1.15;
  transition: background-color .2s, color .2s, border-color .2s;
}
.grupos small { font-family: var(--texto); font-weight: 500; font-size: 12px; opacity: .8; }
/* El elegido: del color del texto, así se distingue sobre el negro y sobre los azules */
.grupos [aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* Bebidas sobre fondo NEGRO: el grupo elegido va en el azul de la marca con letra blanca (como los botones de tamaño);
   sobre azul se queda en blanco con letra azul */
.vitrina[data-fondo="negro"] .grupos:not(.tamanos-carta) [aria-pressed="true"],
:root[data-fondo="negro"] [data-screen="platos"] .grupos:not(.tamanos-carta) [aria-pressed="true"] {
  background: var(--azul); border-color: var(--ink); color: #fff;
}

/* Clásicas y Especiales: los botones de tamaño (Personal / Familiar) usan la misma fila y el mismo estilo,
   pero son dos del mismo ancho, siempre en una sola fila, y el elegido va en el azul de la marca */
.grupos.tamanos-carta { gap: 10px; overflow: visible; margin-left: 0; margin-right: 0; padding: 3px 0; }
/* Cada botón: "Personal" en negrita con "25 cm · 6 porciones" debajo, centrados. Alto 56px y bordes de 16px:
   más compactos que las pestañas de arriba */
.grupos.tamanos-carta > button {
  flex: 1 1 0; min-width: 0; margin: 0; padding: 6px 8px;
  justify-content: center; min-height: 56px; border-radius: 16px; text-align: center;
}
.grupos.tamanos-carta { gap: 8px; }
.tam-txt { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.tam-txt b { font-family: var(--titulos); font-weight: 800; font-size: 15px; line-height: 1.1; }
.tam-txt small { font-size: 12px; line-height: 1.2; white-space: nowrap; }
/* Ármala: sus botones de tamaño también con el texto centrado */
.armar .seg.tamanos .opt { align-items: center; text-align: center; }
.grupos.tamanos-carta [aria-pressed="true"] { background: var(--azul); border-color: var(--ink); color: #fff; }
.grupos.tamanos-carta [aria-pressed="false"] { border-width: 1.5px; border-color: rgba(242, 242, 242, .6); border-color: color-mix(in srgb, currentColor 60%, transparent); }
.vitrina .grupos.tamanos-carta { max-width: 420px; margin: 0 auto 6px; }

/* Botón de tamaño elegido sobre fondo AZUL: negro con borde blanco, para que se note.
   data-fondo lo pone js/app.js al cambiar el color: en cada vitrina de la landing y en <html> en la pantalla 2.
   Sobre fondo negro se queda como arriba (Clásicas y Especiales en azul; Ármala como .armar .opt) */
.grupos.tamanos-carta > button, .armar .seg.tamanos .opt {
  transition: background-color .3s, color .3s, border-color .3s;
}
.vitrina[data-fondo="azul"] .grupos.tamanos-carta [aria-pressed="true"],
:root[data-fondo="azul"] [data-screen="platos"] .grupos.tamanos-carta [aria-pressed="true"],
:root[data-fondo="azul"] [data-screen="platos"] .armar .seg.tamanos .opt[aria-pressed="true"] {
  background: #0D0D0D; border: 2px solid #F2F2F2; color: #F2F2F2;
}

/* ----- Ármala: la masa en el anillo y las piecitas de los ingredientes encima ----- */
/* La sombra va solo en la foto de la masa (no en todo el conjunto): así no se vuelve a dibujar
   en cada cuadro mientras caen las piecitas */
.stage .plato.masa-armala { position: relative; filter: none; }
.masa-armala .masa { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .35)); }
/* La capa mide lo mismo que la masa: las posiciones (--x, --y) y el tamaño (--tam) van en % de su ancho (cqw) */
.piezas { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.pieza {
  position: absolute; left: 0; top: 0; width: calc(var(--tam) * 1cqw); aspect-ratio: 1;
  transform: translate(calc(var(--x) * 1cqw - 50%), calc(var(--y) * 1cqw - 50%)) rotate(var(--giro));
  transition: transform .5s var(--rebote);   /* al cambiar de tamaño se reacomodan suave */
}
.pieza.esperando { opacity: 0; }   /* mientras su copia viene volando desde el botón */
/* Cada piecita es un recorte redondo del centro de la foto del ingrediente, para que parezca un trozo suelto */
.pieza-in { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.pieza-in img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); }
/* Por aquí vuelan las copias de las piecitas, por encima de todo (el carrusel recorta lo que se sale) */
.capa-vuelo { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.pieza-vuelo { position: absolute; left: 0; top: 0; }
.vuelo-y { display: block; width: 100%; height: 100%; }
/* Lo elegido, en pequeño debajo de la pizza: "Champiñones · Pepperoni" */
[data-tipo="armala"] .info p { font-size: 15px; }

/* La pizza del centro se ve más pequeña en Personal (80%) y completa en Familiar. El anillo no cambia
   (es el ::before de .slide). La animación usa la transición de .plato y se apaga con "reducir movimiento" */
[data-tamano-carta="personal"] .slide[data-vista="arriba"] { --escala-plato: .8; }

/* Bebidas: la botella del centro ocupa casi todo el alto del carrusel (no lleva el espacio del anillo de las pizzas) */
[data-tipo="simple"] .carousel { height: calc(var(--s) + 12px + var(--abierto)); }
[data-tipo="simple"] .info p:empty { display: none; }   /* las bebidas no llevan descripción */

/* ----- Granizados (pantalla de Bebidas, debajo del carrusel): banner del 2x1 y tarjetas de sabores ----- */
.granizados {
  margin-top: 36px; text-align: left; scroll-margin-top: 112px;
  /* Siempre sobre una franja AZUL de borde a borde (no sigue el fondo de la bebida): al bajar de Bebidas se nota el cambio */
  padding-top: 32px; background: var(--azul); color: #F2F2F2;
  box-shadow: 0 0 0 100vmax var(--azul); clip-path: inset(0 -100vmax);
}
.granizados .promo-banner { background: #0D0D0D; border: 2px solid #F2F2F2; }   /* el banner 2x1: negro con borde blanco */   /* "Ver granizados" no lo deja debajo del encabezado */
.granizados h2 {
  margin: 0 0 14px; font-family: var(--titulos); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 8vw, 40px); line-height: 1; letter-spacing: -.01em;
}
/* Banner: azul de la marca, texto blanco. En celular el texto arriba y los vasos debajo */
.promo-banner {
  position: relative; display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 22px 18px 14px; border-radius: 26px;
  background: var(--azul); color: #fff;
  border: 2px solid rgba(242, 242, 242, .35);   /* se distingue también sobre los fondos azules */
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .7);
}
.promo-txt p { margin: 0; }
.promo-titulo {
  font-family: var(--titulos); font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 9vw, 52px); line-height: .95; letter-spacing: -.01em;
}
.promo-sub { margin-top: 6px !important; font-family: var(--texto); font-size: 17px; font-weight: 500; }
.promo-regla { margin-top: 4px !important; font-size: 14px; opacity: .85; }
.promo-img { width: min(100%, 250px); aspect-ratio: 6 / 5; height: auto; object-fit: contain; margin-top: 4px; }
/* Sello "HOY" en la esquina, solo los días de la promo */
.sello-hoy {
  position: absolute; top: -10px; right: 14px; z-index: 1;
  padding: 6px 14px; border-radius: 999px; transform: rotate(6deg);
  background: var(--claro); color: var(--azul); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
  font-family: var(--titulos); font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
}
/* Tarjeta "Granizado" (una sola): todo en una columna y centrado. Arriba las dos fotos de muestra juntas,
   un poco superpuestas; luego título, precio, aviso de sabores, − / + y el campo del sabor que prefiere.
   Oscura, para que el texto claro se lea sobre el fondo negro y sobre el azul */
.tarjeta-granizado {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 440px; margin: 14px auto 0; padding: 16px 18px 20px; border-radius: 26px;
  background: var(--superficie); color: #F2F2F2; border: 1px solid rgba(242, 242, 242, .18);
}
.granizado-fotos { display: flex; justify-content: center; }
.granizado-foto { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.granizado-fotos > * + * { margin-left: -28px; }   /* la segunda se monta un poco sobre la primera */
.granizado-fotos .sin-foto { width: 112px; height: 112px; }
.tarjeta-granizado h3 { margin: 8px 0 0; font-family: var(--titulos); font-size: 22px; font-weight: 900; line-height: 1.1; }
.sabor-precio { margin: 2px 0 8px; font-family: var(--titulos); font-weight: 800; font-size: 18px; }
.granizado-aviso {
  display: flex; align-items: flex-start; gap: 6px; max-width: 34ch; margin: 0 0 14px; text-align: left;
  font-family: var(--texto); font-size: 14px; line-height: 1.4; color: rgba(242, 242, 242, .8);
}
.granizado-aviso img { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.tarjeta-granizado .qty { border-color: rgba(242, 242, 242, .25); }
.tarjeta-granizado .qty.sm button { width: 44px; height: 44px; background: rgba(242, 242, 242, .14); color: #F2F2F2; }
.granizado-campo { align-self: stretch; margin: 16px 0 6px; text-align: left; font-size: 14px; font-weight: 700; }
.granizado-campo small { font-weight: 500; opacity: .7; }
.tarjeta-granizado input { border-color: rgba(242, 242, 242, .3); color: #F2F2F2; }
.tarjeta-granizado input::placeholder { color: rgba(242, 242, 242, .45); }
.promo-falta { margin: 12px 0 0; font-weight: 700; font-size: 14px; }
.promo-falta:empty { display: none; }
@media (min-width: 760px) {
  /* Computador: el texto del banner a la izquierda y los vasos a la derecha; las tarjetas lado a lado */
  .promo-banner { grid-template-columns: 1fr auto; justify-items: start; align-items: center; text-align: left; padding: 22px 30px; }
  .promo-img { width: 260px; }
}
/* Celular: espacio abajo para que el botón flotante de WhatsApp (y la barra pegada de "Lo quiero")
   no tapen el − / + ni el campo del sabor al llegar al final */
@media (max-width: 600px) { .granizados { padding-bottom: 96px; } }

/* Aviso del 2x1 en la landing, debajo de "Lo quiero" de la vitrina de Bebidas.
   Tarjeta negra con el anillo del logo; el texto a la izquierda (unos 60%) y los vasos a la derecha (40%),
   asomándose unos 40px por encima del borde. Toda la tarjeta se puede tocar */
.aviso-granizados {
  position: relative; display: grid; cursor: pointer;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas: "texto vasos" "dias dias" "boton boton";
  align-items: start; row-gap: 10px;
  max-width: 440px; min-height: 160px; margin: 64px auto 10px; padding: 16px 18px 18px;
  border-radius: 28px; text-align: left;
  background: var(--negro); color: var(--claro);
  border: 2px solid var(--claro);
  box-shadow: 0 0 0 6px var(--negro), 0 0 0 8px rgba(242, 242, 242, .25);   /* segundo anillo, como el del logo */
}
.aviso-2x1 { grid-area: texto; margin: 0; font-family: var(--titulos); }
/* "2x1" enorme, con una sombra azul detrás para darle volumen */
.aviso-grande {
  display: block; font-weight: 900; font-size: clamp(54px, 17vw, 72px); line-height: .85; letter-spacing: -.02em;
  color: #fff; text-shadow: 3px 4px 0 var(--azul);
}
.aviso-resto { display: block; margin-top: 8px; font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 4.6vw, 18px); line-height: 1.1; }
/* Los vasos: caben en su columna (40%) y sobresalen por arriba de la tarjeta; giran -6° y flotan 6px */
.aviso-vasos {
  grid-area: vasos; justify-self: end; width: 100%; max-width: 190px; aspect-ratio: 6 / 5; height: auto;
  object-fit: contain; margin-top: -58px;   /* 16px del relleno + unos 40px fuera de la tarjeta */
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55));
  transform: rotate(-6deg);
  animation: flotar 3s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-6px); }
}
/* Chips de los días (MAR, JUE). El de hoy, en azul con un punto que late */
.aviso-dias { grid-area: dias; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-dia {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; border: 1.5px solid rgba(242, 242, 242, .7);
  font-family: var(--titulos); font-weight: 800; font-size: 12px; letter-spacing: .04em;
}
.chip-dia.hoy { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip-dia.hoy::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: latir 1.2s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.55); opacity: .5; }
}
.aviso-cuando { margin-left: 4px; font-size: 13px; color: #BDBDBD; }
.aviso-cuando.hoy { font-family: var(--titulos); font-weight: 800; color: #fff; }
/* "Ver granizados": blanco relleno, abajo a la izquierda */
.aviso-boton {
  grid-area: boton; justify-self: start; min-height: 44px; padding: 10px 22px;
  border: 0; border-radius: 999px; background: var(--claro); color: var(--negro);
  font-family: var(--titulos); font-weight: 800; font-size: 15px;
}
@media (hover: hover) { .aviso-granizados:hover .aviso-boton { background: #fff; } }
@media (prefers-reduced-motion: reduce) {
  .aviso-vasos, .chip-dia.hoy::before { animation: none; }   /* quietos */
}

/* Con un solo plato (Ármala, mitad y mitad) no hay flechas ni puntos */
.nav[hidden] { display: none; }
/* Ármala: los ingredientes se ponen con los botones, no con "Ver ingredientes" */
[data-tipo="armala"] [data-car="ing"] { display: none; }

/* Mitad y mitad: flechas ‹ › de cada mitad */
.mitad-nav:empty { display: none; }
.mitad-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.mitad-sel { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.mitad-sel .arrow { flex: none; width: 44px; height: 44px; font-size: 22px; }   /* 44px: cómodo para el dedo */
.mitad-sel span {
  flex: 1; min-width: 0; text-align: center;
  font-family: var(--titulos); font-weight: 800; font-size: 15px; line-height: 1.15;
}
.mitad-sel small { display: block; font-family: var(--texto); font-weight: 500; font-size: 11px; opacity: .75; }
.mitad-sel b { font-weight: inherit; }

/* Mitad y mitad: el título lleva cada mitad en su línea ("½ CAMPESTRE" / "½ MEDITERRÁNEA"), sin partir
   palabras. El bloque reserva siempre el alto de 2 líneas: al cambiar de sabor nada se mueve de lugar.
   El tamaño hace caber "½ MEDITERRÁNEA" o "½ BRISA COSTERA" en una línea, también en 360px */
[data-tipo="mitades"] .info h3 {
  white-space: pre-line; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual;
  font-size: clamp(22px, 7.2vw, 34px); line-height: 1.05; min-height: 2.1em;
}
/* El cambio de mitad: la foto nueva entra girando sobre el centro de la pizza */
.partida.plato { position: relative; }
.slide.exploded .partida.plato { transform: scale(.5); }   /* partida no se inclina, así cada mitad queda de su lado */

/* Ármala: tamaño y botones de ingredientes (sobre el color de la pantalla) */
.armar:empty { display: none; }
.armar { margin-top: 18px; text-align: left; }
.armar .lg { margin: 18px 0 10px; }
.armar .opt { border-color: rgba(242, 242, 242, .35); border-color: color-mix(in srgb, currentColor 35%, transparent); }
.armar .opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }   /* se ve sobre cualquier fondo */
.armar .opt small { color: inherit; opacity: .75; }
.falta, .nota-armar { margin: 10px 0 0; font-weight: 700; font-size: 14px; }
.nota-armar:empty { display: none; }

/* Botón de ingrediente: foto pequeña (si la hay) y nombre */
/* Listas de ingredientes con botones (Ármala, mitades por ingredientes y adicionales de Personaliza):
   2 columnas en celular y 3 desde 600px. minmax(0, 1fr): ninguna columna crece por un nombre largo.
   Todos los botones de una fila con la misma altura (stretch) y el contenido centrado */
.seg.ingredientes, .seg.adicionales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
@media (min-width: 600px) {
  .seg.ingredientes, .seg.adicionales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.opt.ing { flex-direction: row; align-items: center; gap: 6px; min-height: 52px; padding: 6px 10px; min-width: 0; }
.opt.ing img, .opt.ing .sin-foto { width: 36px; height: 36px; flex: none; object-fit: contain; }   /* tamaño fijo: no empuja el texto */
.opt.ing .sin-foto { padding: 0; overflow: hidden; font-size: 7px; }
.opt.adic { justify-content: center; min-width: 0; padding: 10px; }
/* Botones angostos (la lista mide poco: mitades en Personaliza, o 3 columnas en la columna derecha del
   computador): la foto arriba y el nombre debajo, con todo el ancho del botón, para que quepa en 2 líneas.
   Se decide por el ancho de la lista (consulta de contenedor), no por el de la pantalla */
.seg.ingredientes { container-type: inline-size; }
@container (max-width: 300px) {
  .opt.ing { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center; }
  .opt.ing img, .opt.ing .sin-foto { width: 32px; height: 32px; }
}
@media (min-width: 600px) {
  @container (max-width: 520px) {
    .opt.ing { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center; }
    .opt.ing img, .opt.ing .sin-foto { width: 32px; height: 32px; }
  }
}
/* El nombre nunca se sale del recuadro: se parte con guion en español (lang="es") y como mucho ocupa 2 líneas */
.opt.ing span, .opt-nombre {
  min-width: 0; font-size: clamp(13px, 3.6vw, 15px); line-height: 1.15;
  overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* Bebidas sin foto: ícono sencillo */
.icono-bebida { display: grid; place-items: center; }
.icono-bebida svg { width: 46%; height: auto; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }

.carousel {
  /* --abierto: con los ingredientes desplegados el carrusel crece 70px arriba y 70px abajo (la pizza sigue
     en el centro), así los nombres de arriba y de abajo caben adentro y las flechas bajan */
  --abierto: 0px;
  position: relative; height: calc(var(--s) + 70px + var(--abierto));
  transition: height .45s var(--rebote);
  margin: 4px calc(-1 * var(--lado-der)) 0 calc(-1 * var(--lado-izq));   /* ocupa también el margen: se asoman los platos vecinos */
  overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.carousel:focus-visible { outline-offset: -6px; }
.slide {
  position: absolute; left: 50%; top: 50%;
  width: var(--s); height: var(--s);
  transition: transform .75s var(--rebote), opacity .5s;
  cursor: pointer;
}
.slide.active { cursor: zoom-in; }
.slide.active.exploded { cursor: zoom-out; }
/* Anillo blanco del logo detrás de cada pizza vista desde arriba */
.slide[data-vista="arriba"]::before {
  content: ''; position: absolute; inset: -5%; border-radius: 50%;
  border: 3px solid var(--claro); opacity: .9;
  transition: transform .7s var(--rebote), opacity .4s;
}
.slide[data-vista="arriba"].exploded::before { transform: scale(.56); }
.stage { position: relative; width: 100%; height: 100%; transition: transform .9s var(--rebote); }
.stage .plato {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .35));
  transform: scale(var(--escala-plato, 1));   /* --escala-plato: tamaño elegido en Clásicas y Especiales */
  transition: transform .7s var(--rebote);
}

/* Despliegue de ingredientes */
.slide.exploded .plato { transform: scale(calc(.5 * var(--escala-plato, 1))) rotate(-40deg); }
.slide[data-vista="lado"].exploded .plato { transform: scale(.5); }
.burst { position: absolute; inset: 0; pointer-events: none; }
.bi {
  position: absolute; left: 50%; top: 50%;
  width: 100px; margin: -44px 0 0 -50px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: scale(.2); opacity: 0;
  transition: transform .55s cubic-bezier(.2, 1.35, .4, 1), opacity .25s;
}
.slide.exploded .bi {
  transform: translate(var(--x), var(--y)) scale(1);
  opacity: 1; transition-delay: var(--d);
}
.carousel.abierto { --abierto: 140px; }
/* Celular: los ingredientes salen un 15% más cerca (--burst, lo usa js/app.js en --x / --y) y las fotos
   un poco más pequeñas, para que todo quepa en la pantalla sin salirse por los lados */
@media (max-width: 599px) {
  :root { --burst: .85; }
  .carousel.abierto { --abierto: 100px; }   /* 50px arriba y abajo: con los ingredientes más cerca alcanza */
  .bi { width: 80px; margin: -38px 0 0 -40px; }   /* más angosto: los nombres vecinos de abajo no se rozan */
  .bi img { width: 64px !important; height: 64px !important; }
}
/* Nombre largo en computador; el corto (NOMBRES_CORTOS de js/menu.js) en celular */
.bi .nb-corto { display: none; }
@media (max-width: 599px) {
  .bi .nb-largo { display: none; }
  .bi .nb-corto { display: inline; }
}
@media (min-width: 600px) { .bi { width: 140px; margin-left: -70px; } }
.bi img {
  width: 76px; height: 76px; object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4));
}
.bi .sin-foto { width: 64px; }
/* Nombre del ingrediente: DM Sans 600 de 13px, centrado, como mucho 2 líneas (con los nombres cortos en
   celular) y sin partir palabras a la mitad */
.bi > span {
  font-family: var(--texto); font-size: 13px; font-weight: 600; line-height: 1.15; text-align: center;
  overflow-wrap: normal; word-break: normal; hyphens: manual;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
/* Ingredientes de la parte de arriba: el nombre va encima de su foto (no debajo, donde quedaría sobre la pizza).
   Va fuera del flujo para que la foto quede en el mismo lugar que las demás */
.bi.arriba > span { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 2px; }
/* Ingrediente sin foto: solo el nombre, en una píldora que se lee sobre la pizza */
.bi.solo-nombre { margin-top: -16px; }
.bi.solo-nombre > span {
  padding: 7px 11px; border-radius: 999px;
  background: rgba(13, 13, 13, .82); color: #F2F2F2;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
}
/* Ármala y mitad y mitad: el ingrediente que entra sale del centro y el que se quita vuelve a él */
.slide.exploded .bi.guardado { transform: scale(.2); opacity: 0; transition-delay: 0s; }

/* Indicador "Toca la pizza y mira sus ingredientes" (lo pone js/app.js, ver marcarVioIngredientes).
   Solo en Clásicas y Especiales ([data-tipo="pizzas"]), no en Ármala ni en Mitad y mitad.
   La etiqueta va al fondo del carrusel: el carrusel crece 44px y la pizza sube 22px, así no tapa la pizza
   ni las flechas. El aro de la pizza del centro hace un pulso suave */
.pista-toque { display: none; }
[data-tipo="pizzas"] .carousel.con-pista { height: calc(var(--s) + 114px + var(--abierto)); }
[data-tipo="pizzas"] .carousel.con-pista .slide { top: calc(50% - 22px); }
[data-tipo="pizzas"] .pista-toque {
  display: block;
  position: absolute; left: 50%; bottom: 6px; z-index: 20; transform: translateX(-50%);
  margin: 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(13, 13, 13, .55); color: #F2F2F2;
  font-family: var(--texto); font-size: 14px; line-height: 1.2; white-space: nowrap;
  pointer-events: none; transition: opacity .4s;
}
/* El pulso va en la pizza del centro (.active): al cambiar de pizza pasa solo a la nueva */
[data-tipo="pizzas"] .slide.active[data-vista="arriba"]::after {
  content: ''; position: absolute; inset: -5%; border-radius: 50%;
  border: 2px solid #F2F2F2; opacity: 0; pointer-events: none;
  animation: pulso-aro 2.2s ease-out infinite;
}
@keyframes pulso-aro { from { transform: scale(1); opacity: .6; } to { transform: scale(1.08); opacity: 0; } }
/* Con los ingredientes abiertos: sin pulso */
[data-tipo="pizzas"] .slide.active.exploded::after { animation: none; }
/* Ya tocó una pizza: en esta visita se desvanece; en las siguientes ni sale */
.vio-ingredientes [data-tipo="pizzas"] .pista-toque { opacity: 0; }
.vio-ingredientes [data-tipo="pizzas"] .slide.active::after { animation: none; }
.ya-vio-ingredientes [data-tipo="pizzas"] .pista-toque,
.ya-vio-ingredientes [data-tipo="pizzas"] .slide.active::after { display: none; }
.ya-vio-ingredientes [data-tipo="pizzas"] .carousel.con-pista { height: calc(var(--s) + 70px + var(--abierto)); }
.ya-vio-ingredientes [data-tipo="pizzas"] .carousel.con-pista .slide { top: 50%; }
@media (prefers-reduced-motion: reduce) { [data-tipo="pizzas"] .slide.active[data-vista="arriba"]::after { animation: none; } }

.nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.arrow {
  width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid currentColor; background: transparent;
  font-size: 26px; line-height: 1; display: grid; place-items: center; padding-bottom: 3px;
}
.dots { display: flex; gap: 7px; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: currentColor; opacity: .3; transition: all .35s; }
.dots i.on { opacity: 1; width: 24px; }
.hint { text-align: center; font-size: 14px; opacity: .7; margin: 10px 0 0; }

.info { text-align: center; padding: 8px 0 0; }
.info h3 {
  font-family: var(--titulos); text-transform: uppercase;
  font-size: clamp(36px, 9.5vw, 60px); font-weight: 900;
  letter-spacing: -.01em; line-height: .95; margin: 8px 0 10px;
}
.info p { margin: 0 auto 10px; max-width: 36ch; font-size: 17px; line-height: 1.4; opacity: .85; }
.price { font-family: var(--titulos); font-size: 24px; font-weight: 800; }
/* Clásicas y Especiales: con los ingredientes abiertos, la descripción se recoge (se apaga y su alto baja a 0)
   y vuelve al cerrarlos. Sigue en la página, así los lectores de pantalla la leen igual.
   Con "reducir movimiento" cambia sin animación (regla general del final) */
/* La fila de la descripción pasa de su alto real (1fr) a 0 (0fr): así baja parejo, sin saltos */
[data-tipo="pizzas"] .info { display: grid; grid-template-rows: auto 1fr auto; transition: grid-template-rows .3s ease; }
[data-tipo="pizzas"].ing-abiertos .info { grid-template-rows: auto 0fr auto; }
[data-tipo="pizzas"] [data-car="desc"] { min-height: 0; overflow: hidden; transition: opacity .3s ease, margin .3s ease; }
[data-tipo="pizzas"].ing-abiertos [data-car="desc"] { opacity: 0; margin-top: 0; margin-bottom: 0; }
.actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.actions .ghost { padding: 13px 22px; font-size: 16px; }


/* ---------- 6. PANTALLA 3: PERSONALIZA ---------- */
.panel {
  background: var(--panel); color: var(--panel-ink);
  border-radius: 32px; padding: 22px; margin-top: 10px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}
.pz-head { display: flex; gap: 16px; align-items: center; }
.pz-head img, .pz-head .sin-foto { width: 112px; height: 112px; flex: none; object-fit: contain; }
.pz-head h2 { font-family: var(--titulos); font-size: clamp(26px, 6.5vw, 34px); margin: 0 0 4px; font-weight: 900; letter-spacing: -.01em; line-height: 1.05; }
.pz-head p { margin: 0; font-size: 15px; line-height: 1.35; }

fieldset { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
legend, .lg { display: block; font-family: var(--titulos); font-weight: 800; font-size: 16px; margin-bottom: 10px; padding: 0; }
.field { margin-top: 22px; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.opt {
  border: 2px solid var(--line); background: transparent; color: inherit;
  border-radius: 18px; padding: 10px 14px; min-width: 100px;
  font-weight: 700; font-size: 15px; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: background-color .2s, border-color .2s, color .2s;
}
.opt small { font-weight: 500; font-size: 13px; color: var(--muted); }
.opt[aria-pressed="true"] { border-color: var(--azul); background: var(--azul); color: #fff; }
.opt[aria-pressed="true"] small { color: inherit; opacity: .85; }
/* Pizzas para elegir en "Arma tus mitades": agrupadas ("Clásicas", "Especiales") y en una cuadrícula de
   2 columnas en celular, con la foto (48px) arriba y el nombre debajo, para que la lista no se haga tan larga */
.grupo-sabores + .grupo-sabores { margin-top: 12px; }
.sub-sabores {
  margin: 0 0 6px; font-family: var(--titulos); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.seg.sabores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt.sabor {
  min-width: 0; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 6px; text-align: center; font-size: 14px; line-height: 1.15;
}
.opt.sabor img, .opt.sabor .sin-foto { width: 48px; height: 48px; flex: none; object-fit: contain; }
.opt.sabor .sin-foto { padding: 0; overflow: hidden; font-size: 8px; }
.opt.sabor small { font-size: 11px; }   /* "Clásica" o "Especial" */
/* "Dos clásicas: $43.000 · Con una especial: $52.000", debajo de las mitades */
.nota-precio-mitad { margin: 12px 0 0; font-size: 14px; line-height: 1.4; }
@media (min-width: 760px) { .seg.sabores { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }

.qty { display: inline-flex; align-items: center; gap: 12px; border: 2px solid var(--line); border-radius: 999px; padding: 4px; }
.qty button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--line); font-size: 22px; font-weight: 700; line-height: 1; }
.qty output { min-width: 26px; text-align: center; font-family: var(--titulos); font-weight: 800; font-size: 18px; }
.qty.sm { gap: 6px; padding: 2px; }
.qty.sm button { width: 32px; height: 32px; font-size: 18px; }
.qty.sm output { font-size: 15px; min-width: 20px; }

textarea, input, select {
  font: inherit; width: 100%; font-size: 16px;
  border: 2px solid var(--line); background: transparent; color: inherit;
  border-radius: 16px; padding: 12px 14px; resize: vertical;
}
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--azul); }
textarea::placeholder, input::placeholder { color: var(--muted); }

/* Adicionales: en una cuadrícula para que la lista larga se lea ordenada */
.ayuda { margin: -4px 0 10px; font-size: 14px; }
.fijo { margin: 22px 0 0; }

/* Al desplazarse hasta una sección nueva, que no quede debajo del encabezado fijo */
#pz [data-seccion] { scroll-margin-top: 112px; }

/* Tipos de mitad y mitad: una tarjeta por tipo, con el precio a la derecha */
.seg.tipos { display: grid; grid-template-columns: 1fr; }
.opt.tipo { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.opt.tipo span { display: flex; flex-direction: column; gap: 2px; }
.opt.tipo b { flex: none; font-family: var(--titulos); font-weight: 800; font-size: 16px; }

/* Arma tus mitades: Mitad 1 y Mitad 2, una debajo de la otra (lado a lado en computador) */
.armar-mitades { display: grid; gap: 18px; }
.mitad-bloque { border: 2px solid var(--line); border-radius: 22px; padding: 14px; min-width: 0; }
.mitad-bloque .lg { margin: 0 0 10px; }
/* Desde 760px las dos mitades van lado a lado y cada bloque es angosto: ahí sus ingredientes van en 2 columnas */
@media (min-width: 760px) { .mitad-bloque .seg.ingredientes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contador { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--muted); }
@media (min-width: 760px) { .armar-mitades { grid-template-columns: 1fr 1fr; } }
/* Con la Mitad 1 fija (tarjeta) todo va en una columna, también en computador */
@media (min-width: 760px) { .armar-mitades.con-fija { grid-template-columns: 1fr; } }

/* Tarjeta de la Mitad 1 fija: "[foto] Mitad 1: Verano ✓ / Clásica" y "Cambiar". Compacta: menos de 80px de alto */
.mitad-fija {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  border: 2px solid var(--line); border-radius: 18px; padding: 8px 12px;
}
.mitad-fija-foto, .mitad-fija .sin-foto { width: 56px; height: 56px; flex: none; object-fit: contain; }
.mitad-fija .sin-foto { padding: 0; overflow: hidden; font-size: 7px; }
.mitad-fija-txt { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.mitad-fija-txt b { font-size: 15px; overflow-wrap: anywhere; }
.mitad-fija-txt small { font-size: 13px; color: var(--muted); }
/* "Cambiar": un enlace pequeño subrayado, no un botón grande (con área cómoda para el dedo) */
.enlace {
  flex: none; min-height: 44px; padding: 0 4px; border: 0; background: none;
  font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

/* Vista previa: el lado que falta va vacío, con un "?" */
.partida .mitad-vacia {
  position: absolute; top: 6%; bottom: 6%; display: grid; place-items: center;
  border: 2px dashed currentColor; opacity: .45;
  font-family: var(--titulos); font-weight: 900; font-size: 26px;
}
.partida .mitad-vacia.lado-der { left: 50%; right: 6%; border-left: 0; border-radius: 0 999px 999px 0; }
.partida .mitad-vacia.lado-izq { left: 6%; right: 50%; border-right: 0; border-radius: 999px 0 0 999px; }

/* Aviso de que los sabores no se modifican */
.regla { margin: 22px 0 0; font-size: 14px; line-height: 1.4; }

.cta {
  width: 100%; margin-top: 24px; border: 0; border-radius: 22px;
  padding: 18px 20px; font-family: var(--titulos); font-size: 17px; font-weight: 800;
  background: var(--azul); color: #fff;
  display: flex; justify-content: space-between; gap: 12px;
  transition: transform .2s, background-color .2s;
}
@media (hover: hover) { .cta:hover { background: var(--azul); } }
.cta:active { transform: scale(.98); }
.cta.center { justify-content: center; width: auto; margin: 18px auto 0; padding: 16px 28px; }
/* "Agregar al pedido" deshabilitado mientras falta la Mitad 2: en gris, con "Elige el otro sabor" */
.cta:disabled, .cta:disabled:hover { background: var(--muted); color: #fff; opacity: .6; cursor: default; transform: none; }


/* ---------- 7. PANTALLA 4: PEDIDO ---------- */
.item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
  padding: 14px 0; border-bottom: 2px solid var(--line);
}
.item:first-child { padding-top: 2px; }
.item img, .item .sin-foto, .item .icono-bebida { width: 64px; height: 64px; object-fit: contain; }
.item h3 { margin: 0; font-family: var(--titulos); font-size: 17px; font-weight: 800; }
.item p { margin: 2px 0 0; font-size: 14px; line-height: 1.3; color: var(--muted); }
.item .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.item .right b { font-family: var(--titulos); }
/* Formas de pago (Efectivo y Transferencia): mitad y mitad del ancho, también en celular */
.seg.pagos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg.pagos .opt { min-width: 0; align-items: center; text-align: center; }
.nota-pago { margin: 12px 0 0; font-size: 14px; line-height: 1.4; }

/* "¿Agregar algo más?": tres accesos rápidos del mismo ancho en una sola fila (también a 360px).
   El ícono va arriba y el nombre debajo, para que "Granizados" quepa sin partirse */
.agregar-mas { margin-top: 18px; }
.agregar-mas p { margin: 0 0 8px; font-family: var(--titulos); font-weight: 800; font-size: 14px; }
.accesos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ghost.acceso {
  position: relative; min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 8px 4px; border-radius: 18px; color: var(--panel-ink);
  font-size: clamp(12px, 3.4vw, 15px); line-height: 1.1; white-space: nowrap;
}
.ghost.acceso span { font-size: 20px; line-height: 1; }
/* Sin bebidas en el pedido: "Bebidas" en el azul de la marca, para recordar agregarla */
.ghost.acceso.resaltado { background: var(--azul); border-color: var(--azul); color: #fff; }
/* Sello "2x1" en "Granizados" (día de promo y sin granizados en el pedido) */
.sello-2x1 {
  position: absolute; top: -9px; right: -4px;
  padding: 2px 7px; border-radius: 999px; transform: rotate(6deg);
  background: var(--azul); color: #fff; border: 2px solid var(--panel);
  font-family: var(--titulos); font-weight: 900; font-size: 11px;
}
.total { display: flex; justify-content: space-between; font-family: var(--titulos); font-size: 22px; font-weight: 900; margin-top: 22px; }
/* Subtotal y domicilio, encima del total */
.linea { display: flex; justify-content: space-between; margin-top: 22px; font-weight: 700; color: var(--muted); }
.linea + .linea { margin-top: 4px; }
/* 2x1 en granizados: debajo de los productos, en azul (más claro en modo oscuro para que se lea) */
.linea.promo { margin-top: 14px; color: var(--promo); }
.panel .promo-falta { color: var(--promo); }
.linea + .total { margin-top: 8px; }
.err { color: var(--error); font-weight: 700; margin: 10px 0 0; min-height: 1em; }
#err:empty { min-height: 0; margin: 0; }
#err + .cta { margin-top: 14px; }
.empty { text-align: center; padding: 16px 0 6px; }
.empty h2 { margin: 0 0 6px; font-family: var(--titulos); font-size: 24px; }

/* ¿Cómo quieres recibirlo?: dos tarjetas grandes, una al lado de la otra (también en celular).
   La elegida queda en azul con la regla de .opt[aria-pressed="true"] */
.entregas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt.entrega {
  min-width: 0; min-height: 96px; padding: 14px; justify-content: center; gap: 4px; border-radius: 22px;
  font-family: var(--titulos); font-weight: 800; font-size: 16px; line-height: 1.15;
}
.opt.entrega small { font-family: var(--texto); line-height: 1.3; }
/* Scroll reveal (js/app.js, "Scroll reveal"): los bloques de la landing y de Granizados aparecen con un
   fundido subiendo 20px. Solo se ocultan si el JavaScript puso "js-reveal" en <html>; si falla, todo se ve.
   Solo se mueven opacity y transform, para que no se trabe en celulares sencillos ni empuje lo demás */
/* Oculto: 20px más abajo (al bajar) o más arriba (al subir: --desde -20px). Visible: sus estilos normales.
   La transición solo está puesta mientras se anima (.animando): al salir de la pantalla se oculta de una vez */
.js-reveal .reveal:not(.visible) { opacity: 0; transform: translateY(var(--desde, 20px)); }
.js-reveal .reveal.animando {
  transition: opacity .6s var(--rebote), transform .6s var(--rebote);
  transition-delay: var(--retraso, 0ms);   /* escalonado: 80ms entre hermanos */
}
@media (max-width: 599px) {
  .js-reveal .reveal.animando { transition-duration: .45s; }   /* en celular, más corto */
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal:not(.visible) { opacity: 1; transform: none; }   /* todo visible desde el inicio */
}

/* Los campos que aparecen al elegir cómo recibirlo o pagar en efectivo */
.aparece { animation: aparece .35s var(--rebote); }
@keyframes aparece { from { opacity: 0; transform: translateY(-10px); } }
/* Recoger en el punto: dirección y horario del punto de venta */
.punto { margin-top: 22px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 18px; }
.punto b { display: block; font-family: var(--titulos); font-weight: 800; margin-bottom: 4px; }
.punto p { margin: 0 0 4px; line-height: 1.4; }
.punto a { display: inline-block; padding: 8px 0 2px; color: inherit; font-weight: 700; text-underline-offset: 3px; }
.nota-domicilio { margin: 12px 0 0; font-size: 14px; line-height: 1.4; }
.borrar-datos { margin-top: 12px; font-size: 14px; color: var(--muted); }
/* Errores de "Tu pedido": debajo de cada campo, solo cuando hay uno */
#ped :is(.field, fieldset) .err { margin: 6px 0 0; min-height: 0; font-size: 14px; }
#ped :is(.field, fieldset) .err:empty { display: none; }
#ped input[aria-invalid="true"] { border-color: var(--error); }

/* Pizza "mitad y mitad": dos fotos superpuestas, cada una recortada a su mitad.
   Se usa en la cabecera de Personaliza y en la miniatura del pedido. */
.partida { position: relative; flex: none; }
.pz-head .partida { width: 112px; height: 112px; }
.item .partida { width: 64px; height: 64px; }
.partida .izq, .partida .der { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.partida .izq { clip-path: inset(0 50% 0 0); }
.partida .der { clip-path: inset(0 0 0 50%); }
.partida .der.entra { animation: entra-mitad .35s var(--rebote); }
@keyframes entra-mitad { from { transform: translateX(45%); opacity: 0; } }


/* ---------- 8. CONFIRMACIÓN, AVISOS Y ACCESIBILIDAD ---------- */
.done { text-align: center; padding-top: 30px; }
.done .lead { margin: 0 auto 26px; }
.check { width: 120px; height: 120px; }
.check circle { stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw .8s ease forwards; }
.check path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw .5s .6s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Aviso flotante: "✓ Coca-Cola 400 ml agregada  [Ver pedido]". Abajo, centrado, a 16px de los bordes,
   en una sola línea: si el nombre es largo se corta con "…" */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, calc(100% + 60px));
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: calc(100vw - 32px);
  background: #0D0D0D; color: #F2F2F2; border: 1px solid rgba(242, 242, 242, .25);
  padding: 8px 8px 8px 18px; border-radius: 999px; font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
  visibility: hidden;
  transition: transform .45s cubic-bezier(.2, 1.2, .4, 1), visibility 0s .45s; z-index: 50;
}
.toast:not(:has(.toast-btn:not([hidden]))) { padding: 12px 20px; }   /* sin botón (otros avisos) */
.toast.on { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.toast-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-btn {
  flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: #265DA6; color: #fff; font-family: var(--titulos); font-weight: 800; font-size: 14px; white-space: nowrap;
}
.toast-btn[hidden] { display: none; }
@media (hover: hover) { .toast-btn:hover { background: var(--azul); } }
/* Mientras se ve el aviso, el botón de WhatsApp se esconde para que no se tapen */
.con-aviso .wa-flot, .sin-wa .wa-flot { opacity: 0; transform: scale(.8); pointer-events: none; }

/* Botón flotante de WhatsApp: azul de la marca, con el anillo claro del logo para que se vea también
   sobre los fondos azules. Queda fijo abajo a la derecha en todas las pantallas */
.wa-flot {
  position: fixed; z-index: 40;
  right: var(--lado-der); bottom: calc(18px + env(safe-area-inset-bottom, 0px));   /* a la misma distancia del borde que el margen */
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--azul); color: #fff; border: 2px solid var(--claro);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .7);
  transition: background-color .2s, transform .2s, bottom .3s, opacity .2s;
}
.wa-flot img { width: 44px; height: 44px; }
.wa-flot:active { transform: scale(.94); }
@media (hover: hover) { .wa-flot[href]:hover { background: var(--azul); transform: scale(1.06); } }
.wa-flot.pendiente { opacity: .5; }   /* falta el número en js/menu.js */
/* En celular, Platos, Personaliza y Pedido tienen el botón principal pegado abajo:
   el flotante y el aviso suben para no taparlo. En Personaliza y Pedido el flotante se esconde:
   la persona está terminando su pedido (que igual se envía por WhatsApp) y taparía el precio */
@media (max-width: 600px) {
  .wa-flot { width: 54px; height: 54px; }
  body:has(:is([data-screen="platos"], [data-screen="personaliza"], [data-screen="pedido"]).on) :is(.wa-flot, .toast) {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}
/* Mientras se arma el pedido (Plato, Personaliza, Pedido) o está abierto un panel (dialog), el botón se esconde con
   un fundido de 0.2 s: en esas pantallas hay botones y flechas fijos abajo y taparía la pizza. Vuelve al regresar a Inicio.
   El aviso de horario (#avisoHorario) no cuenta: ese botón sigue usable fuera de hora */
body:has(:is([data-screen="platos"], [data-screen="personaliza"], [data-screen="pedido"]).on, dialog[open]:not(#avisoHorario)) .wa-flot {
  opacity: 0; transform: scale(.8); pointer-events: none;
}


/* ---------- 9. VENTANA EMERGENTE DE RESERVAS ---------- */
html.modal-abierto { overflow: hidden; }   /* la página de atrás no hace scroll */
.modal {
  --line: rgba(242, 242, 242, .18);   /* la ventana siempre es oscura */
  --muted: #A3A3A3;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: 28px;
  background: var(--superficie); color: var(--claro); color-scheme: dark;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
.modal[open] { display: flex; flex-direction: column; animation: sube-modal .3s var(--rebote); }
.modal::backdrop { background: rgba(0, 0, 0, .7); }
@keyframes sube-modal { from { opacity: 0; transform: translateY(28px); } }
.modal form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.modal-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--line);
}
.modal-pasos {
  display: flex; flex-wrap: wrap; gap: 2px 8px; list-style: none; margin: 0; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.modal-pasos li + li::before { content: '·'; margin-right: 8px; color: var(--muted); }
.modal-pasos .on { color: var(--claro); }
.modal-x {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--line); font-size: 26px; line-height: 1; padding: 0 0 3px;
}

/* El contenido hace scroll por dentro si es largo; los botones quedan siempre abajo */
.modal-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px 22px; }
.modal-cuerpo h2 { font-family: var(--titulos); font-weight: 900; font-size: 28px; line-height: 1.05; margin: 0 0 6px; }
.modal-cuerpo h2:focus { outline: none; }
.modal-cuerpo h3 { font-family: var(--titulos); font-weight: 800; font-size: 16px; margin: 20px 0 8px; }
.modal-cuerpo p { margin: 0 0 10px; line-height: 1.45; }
.modal-cuerpo ul { margin: 0; padding-left: 20px; line-height: 1.5; }
.modal-cuerpo li + li { margin-top: 4px; }
.modal .plan-foto { aspect-ratio: 1; max-height: 50vh; border-radius: 18px; }   /* cuadrada, sin pasar de media pantalla */
.modal .nota { margin: 8px 0 18px; font-size: 13px; color: var(--muted); }
.modal-precio { font-family: var(--titulos); font-weight: 800; font-size: 20px; }

/* Paso 2: resumen del plan y campos */
.plan-resumen {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(242, 242, 242, .07);
}
.plan-resumen b { display: block; font-family: var(--titulos); font-weight: 800; }
.plan-resumen span { font-size: 14px; color: var(--muted); }
.enlace { border: 0; background: none; padding: 6px 0; font-weight: 700; text-decoration: underline; }
.modal .field { margin-top: 18px; }
.modal .field small { font-family: var(--texto); font-weight: 500; font-size: 13px; color: var(--muted); }
.modal input, .modal select { display: block; min-height: 50px; }
.modal select { background: var(--superficie); }
.modal input[readonly] { opacity: .6; }
.modal [aria-invalid="true"] { border-color: #FF8A7A; }
.modal .err { margin: 6px 0 0; min-height: 0; font-size: 14px; color: #FF8A7A; }   /* rojo claro: se lee sobre el fondo oscuro */
.modal .err:empty { display: none; }

/* Paso 3: resumen de la reserva */
.resumen { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 14px 0 0; }
.resumen dt { color: var(--muted); }
.resumen dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.resumen dd::first-letter { text-transform: uppercase; }
.modal .abono { margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--azul); color: #fff; font-weight: 700; }

.modal-pie {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line);
}
.modal-pie button { padding: 13px 20px; font-size: 15px; }
/* Paso 3: botón "Enviar por WhatsApp" a lo ancho, con su ícono (img/Iconos) y la nota debajo */
.modal-envio { flex: 1; display: grid; gap: 8px; }
.modal-envio button { display: flex; align-items: center; justify-content: center; gap: 4px; }
.modal-envio img { width: 32px; height: 32px; margin: -8px 0; }   /* la imagen trae margen: no debe engordar el botón */
.modal .modal-envio .nota { margin: 0; text-align: center; }

/* Celular: la ventana ocupa toda la pantalla y los botones quedan pegados abajo */
@media (max-width: 600px) {
  .modal {
    width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none;
    margin: 0; border-radius: 0;
  }
  .modal-top { padding-left: var(--lado-izq); padding-right: var(--lado-der); }
  .modal-cuerpo { padding: 18px var(--lado-der) 20px var(--lado-izq); }
  .modal-pie { padding-left: var(--lado-izq); padding-right: var(--lado-der); }
  .modal-pie button { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }
}

/* Aviso de horario: tarjeta corta y centrada, también en el celular. Queda por debajo del botón
   de WhatsApp (z-index 40).
   El cuerpo de las reservas es flex:1 y min-height:0 para que el formulario haga scroll.
   En el iPhone, un dialog con esa columna y height:fit-content calcula el cuerpo en 0:
   el título se corta y "Entendido" queda encima. Aquí cada parte mide su texto. */
.modal.aviso {
  width: min(420px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px));
  border-radius: 28px;
  overflow: visible;
}
.modal.aviso[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 35;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  animation: none;
}
.modal.aviso .modal-top,
.modal.aviso .modal-cuerpo,
.modal.aviso .modal-pie {
  flex: none;
  height: auto;
  min-height: auto;
}
.modal.aviso .modal-top { justify-content: flex-end; border-bottom: 0; padding-bottom: 0; }
.modal.aviso .modal-cuerpo { overflow: visible; padding-top: 4px; }
.modal.aviso .modal-cuerpo h2 { font-size: 22px; font-weight: 800; line-height: 1.25; }
.modal.aviso .modal-pie { border-top: 0; padding-top: 4px; padding-bottom: 18px; }
.modal.aviso .modal-pie button { flex: 1 1 auto; }

@media (min-width: 760px) {
  .big { margin-top: 36px; }
  .como { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .como li { grid-template-columns: 1fr; align-content: start; }   /* los 4 títulos quedan a la misma altura */
}

/* ----- Platos en dos columnas (computador y tablet o celular acostados): el plato a la izquierda y
   el nombre, el precio y los botones a la derecha, para que todo quepa sin bajar ----- */
@media (min-width: 900px), (min-width: 640px) and (max-height: 500px) and (orientation: landscape) {
  .screen[data-screen="platos"] { --s: min(400px, 46vh); max-width: 1040px; }
  .screen[data-screen="platos"].on {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 40px;
    grid-template-rows: auto auto 1fr auto 1fr auto auto auto auto;
    grid-template-areas: "bar bar" "grp ." "car info" "car armar" "car act" "nav ." "mnav ." "hint ." "gran gran";
  }
  [data-screen="platos"] .bar { grid-area: bar; }
  [data-screen="platos"] .grupos { grid-area: grp; margin: 16px 0 0; padding: 3px; }
  [data-screen="platos"] .granizados { grid-area: gran; }
  [data-screen="platos"] .armar { grid-area: armar; }
  [data-screen="platos"] .mitad-nav { grid-area: mnav; }
  /* Los platos vecinos se desvanecen en los bordes de la columna en vez de quedar cortados en seco */
  [data-screen="platos"] .carousel {
    grid-area: car; margin: 4px 0 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
  [data-screen="platos"] .info h3 { font-size: clamp(34px, 4.4vw, 60px); overflow-wrap: anywhere; }
  [data-screen="platos"] .nav { grid-area: nav; }
  [data-screen="platos"] .hint { grid-area: hint; }
  [data-screen="platos"] .info { grid-area: info; align-self: end; padding: 0; text-align: left; }
  [data-screen="platos"] .info p { margin-left: 0; }
  [data-screen="platos"] .actions { grid-area: act; align-self: start; justify-content: flex-start; }
  /* Mitad y mitad: la pizza, sus flechas y la ayuda van juntas en la columna izquierda (siempre a la misma
     distancia de la pizza); a la derecha el título, el precio, los botones y, con una mitad Ármala, sus
     ingredientes. Los ingredientes ocupan una fila elástica al final: por larga que sea la lista, no empuja
     las flechas. align-items: start: cada cosa con su propia altura */
  .screen[data-screen="platos"][data-tipo="mitades"].on {
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas: "bar bar" "car info" "mnav act" "hint armar" ". armar" "gran gran";
    align-items: start;
  }
  [data-screen="platos"][data-tipo="mitades"] .info { align-self: center; }
  [data-screen="platos"][data-tipo="mitades"] .info h3 { font-size: clamp(26px, 2.8vw, 38px); overflow-wrap: normal; }
  [data-screen="platos"][data-tipo="mitades"] .armar { margin-top: 0; }
  /* El encabezado se alinea con el ancho de esta pantalla */
  body:has([data-screen="platos"].on) :is(.top-in, .steps) { max-width: 1040px; }
}

/* ----- Celular acostado: hay muy poco alto, así que el encabezado no se queda fijo ----- */
@media (min-width: 640px) and (max-height: 500px) and (orientation: landscape) {
  .top { position: static; }
  .screen[data-screen="platos"] { --s: 56vh; }
  .hero { padding-bottom: 24px; }
}

/* ----- Pantallas táctiles: botones pequeños con un área cómoda para el dedo ----- */
@media (pointer: coarse) {
  .bar .ghost { min-height: 44px; }
  .hero-pausa { width: 40px; height: 40px; font-size: 11px; }
  .qty.sm button { width: 40px; height: 40px; }
}

/* ----- Computador: portada en dos columnas ----- */
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 1fr; align-items: center; padding: 30px 0 64px; min-height: calc(100vh - 80px); }
  /* "Bienvenidos a" y "Malibu Pizza" en una línea cada uno: la letra se ajusta al ancho de la columna */
  .hero .big { font-size: clamp(32px, min(4.6vw, 17vh), 72px); }
  .hero .big span { white-space: nowrap; }
  .hero-lado { width: 100%; margin: 0; }
  .bloque { padding: 64px 0; }
  .vitrina { padding: 64px 0; }
}

/* ----- Portada en una columna (celular y tablet): la pizza que sale rodando se recorta arriba del anillo,
   para que no pase por detrás del texto y del botón ----- */
@media (max-width: 899px) {
  .hero-rueda { clip-path: inset(-10px -100vw -100vh -100vw); }
}

/* ----- Celulares ----- */
@media (max-width: 600px) {
  /* El plato ocupa menos alto: con la barra del navegador abierta, el nombre alcanza a verse sin bajar */
  :root { --s: min(72vw, 360px, 36vh); }
  .screen { padding-top: 4px; padding-bottom: 40px; }
  .top-in { padding-top: 10px; padding-bottom: 8px; }
  .brand img { width: 42px; height: 42px; }
  .steps { padding-bottom: 10px; gap: 6px; }
  .steps button { font-size: 12px; }

  .hero { padding-bottom: 28px; }
  .hero-lado { width: 84vw; margin: 10px -14vw 0 0; }   /* la pizza un poco más pequeña */
  .hero-pizza .sello { font-size: 13px; padding: 9px 14px; }
  .hero-pizza .sello small { font-size: 11px; }
  .bloque { padding: 36px 0; }
  .vitrina { padding: 36px 0; }
  .vitrina .actions button { flex: 1 1 0; }   /* cada botón ocupa la mitad del ancho */
  /* Pie: el botón a lo ancho del margen, y espacio abajo para que el botón de WhatsApp no tape las redes */
  .pie { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .pie .solid { width: 100%; padding: 17px 20px; }

  /* Platos: los botones quedan siempre a la vista, pegados abajo (la franja va de borde a borde,
     los botones dentro del margen) */
  .carousel { margin-top: 0; }
  .info h3 { margin-top: 4px; }
  .actions {
    position: sticky; bottom: 0; z-index: 20; flex-wrap: nowrap;
    margin: 14px calc(-1 * var(--lado-der)) 0 calc(-1 * var(--lado-izq));
    padding: 10px var(--lado-der) calc(10px + env(safe-area-inset-bottom, 0px)) var(--lado-izq);
    background: var(--bg); transition: background-color .7s ease;
  }
  .actions button { flex: 1 1 auto; white-space: nowrap; padding: 14px 12px; font-size: 15px; }

  /* Personaliza: opciones a lo ancho, sin huecos */
  .panel { padding: 18px; border-radius: 26px; }
  .pz-head { gap: 12px; }
  .pz-head img, .pz-head .sin-foto, .pz-head .partida { width: 88px; height: 88px; }
  .pz-head h2 { font-size: 24px; }
  .opt { flex: 1 1 auto; min-width: 0; padding: 10px 12px; }
  .cta { padding: 17px 18px; font-size: 16px; }
  /* "Agregar al pedido" y "Enviar pedido por WhatsApp" quedan siempre a la vista, pegados abajo,
     sin tener que bajar hasta el final */
  .panel .cta:not(.center) {
    position: sticky; z-index: 5; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 0 0 6px var(--panel), 0 14px 30px -6px rgba(0, 0, 0, .7);
  }
  /* Al escribir en un campo, el navegador lo deja por encima del botón pegado */
  html:has(:is([data-screen="personaliza"], [data-screen="pedido"]).on) { scroll-padding-bottom: 100px; }

  /* Pedido: el nombre ocupa todo el ancho; precio y cantidad van debajo */
  .item { grid-template-columns: 56px 1fr; column-gap: 12px; row-gap: 8px; }
  .item img, .item .sin-foto, .item .partida, .item .icono-bebida { width: 56px; height: 56px; }
  /* Pestañas: con "‹ Inicio" en la misma fila, un poco más compactas */
  .pestanas button { padding: 6px 12px; font-size: 13px; }
  .bar > .ghost { padding: 6px 12px; font-size: 13px; }
  .item .right { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .qty.sm button { width: 38px; height: 38px; }
}
/* Bebidas en celular: la botella crece con el alto de la pantalla, dejando sitio para los grupos, el nombre,
   el precio y "Lo quiero" sin bajar. La ayuda del carrusel no sale (los puntos ya dicen que hay más) */
@media (max-width: 600px) {
  .screen[data-tipo="simple"] { --s: clamp(200px, calc(100vh - 470px), 380px); --s: clamp(200px, calc(100svh - 470px), 380px); }
  [data-tipo="simple"] .hint { display: none; }
  [data-tipo="simple"] .info h3 { font-size: clamp(28px, 8vw, 40px); }
  [data-tipo="simple"] .grupos { margin-top: 8px; }
}
/* Mitad y mitad en celular, en una columna: pizza (80% del ancho), las flechas de cada mitad una debajo
   de la otra ("‹ Mitad izquierda · Campestre ›"), título, precio, ingredientes de Ármala (si aplica) y los
   botones fijos abajo */
@media (max-width: 599px) {
  .screen[data-tipo="mitades"] { --s: min(80vw, 400px); }
  [data-tipo="mitades"] .mitad-nav { grid-template-columns: 1fr; gap: 8px; margin-top: 6px; }
  [data-tipo="mitades"] .mitad-sel span { font-size: 15px; }
  [data-tipo="mitades"] .mitad-sel small { display: inline; font-size: 14px; }
  [data-tipo="mitades"] .mitad-sel b::before { content: ' · '; font-weight: 500; opacity: .75; }
}
/* Celulares de pantalla baja: se quita la ayuda del carrusel para que quepan el nombre y la descripción */
@media (max-width: 600px) and (max-height: 700px) {
  .hint { display: none; }
}
/* En Clásicas y Especiales la fila de tamaños ocupa ese espacio: la ayuda se quita hasta 780px de alto */
@media (max-width: 600px) and (max-height: 780px) {
  [data-tipo="pizzas"] .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}


/* ---------- 10. INTRO: LA PIZZA SE ARMA CON 6 PORCIONES (js/intro.js) ----------
   Solo existe mientras <html> tiene la clase "intro-activa" (la pone js/intro.js). Si el JavaScript
   falla o la intro se salta, este bloque no se ve y la página queda normal.
   Las porciones y los trocitos solo mueven transform, opacity y filter */
/* Dos zonas: la pizza arriba (72% del alto) y el texto abajo (28%). js/intro.js calcula dónde empiezan
   las porciones sueltas para que no se salgan de la zona de arriba ni toquen la de abajo.
   --pz: tamaño de la pizza. 70% del ancho en celular, máximo 420px en PC, y lo que quepa en la zona
   de arriba junto con el aro y "MALIBU PIZZA" debajo */
.intro {
  position: fixed; inset: 0; z-index: 9999;
  height: 100vh; height: 100dvh;
  display: none;
  background: #0D0D0D; color: #F2F2F2;
  overflow: hidden; touch-action: none;
  user-select: none; -webkit-user-select: none;
  transition: opacity .5s ease;
  --pz: min(70vw, 420px, calc(63vh - 98px));
}
@supports (height: 1dvh) { .intro { --pz: min(70vw, 420px, calc(63dvh - 98px)); } }
.intro-activa .intro, .intro.saliendo { display: block; }
.intro.saliendo { opacity: 0; pointer-events: none; }   /* se desvanece encima del hero */
.intro.arrastrando { cursor: grabbing; }
/* Mientras está la intro: la página no se mueve y no se ven el encabezado ni WhatsApp.
   La animación de entrada de los botones del hero espera a que termine la intro */
.intro-activa, .intro-activa body { overflow: hidden; }
.intro-activa .top, .intro-activa .wa-flot { visibility: hidden; }
.intro-activa .hero-boton { animation-play-state: paused; }

/* Zona de la pizza: arriba, 72% del alto, con la pizza armada centrada */
.intro-escena {
  position: absolute; left: 0; right: 0; top: 0; height: 72%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.intro-pizza { position: relative; width: var(--pz); aspect-ratio: 1 / 1; flex: none; }
.intro-porcion {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  border-radius: 50%; will-change: transform, filter, opacity;
}
.intro.cargando .intro-porcion { background: #262626; }   /* mientras carga: porciones grises difuminadas */
/* La foto entera: oculta hasta el 100%, cuando tapa las uniones de las porciones */
.intro-entera { opacity: 0; will-change: auto; }
.intro.cargando .intro-entera { background: none; }
.intro.completa .intro-entera { opacity: 1; }
.intro-trozo {
  position: absolute; left: 50%; top: 50%;
  background-size: 260px; background-repeat: no-repeat;
  will-change: transform, opacity;
}
.intro.cargando .intro-trozo { visibility: hidden; }
/* Encaje final con un pequeño rebote */
.intro.completa .intro-pizza { animation: intro-encaje .45s var(--rebote); }
@keyframes intro-encaje { 50% { transform: scale(1.04); } }
/* El aro blanco del logo se traza alrededor de la pizza */
.intro-aro {
  position: absolute; inset: -7%; width: 114%; height: 114%; max-width: none;
  overflow: visible; pointer-events: none; transform: rotate(-90deg);
}
.intro-aro circle {
  fill: none; stroke: #F2F2F2; stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.intro.completa .intro-aro circle { animation: intro-aro .6s ease-out forwards; }
@keyframes intro-aro { to { stroke-dashoffset: 0; } }
/* "MALIBU PIZZA": MALIBU blanco, PIZZA azul. Va justo debajo del aro, sin mover la pizza del centro */
.intro-marca {
  position: absolute; left: 0; right: 0; top: calc(50% + var(--pz) * .57 + 12px); text-align: center;
  margin: 0; font-family: var(--titulos); font-weight: 900; text-transform: uppercase;
  font-size: clamp(26px, 8vw, 44px); line-height: 1; letter-spacing: .02em; white-space: nowrap;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease .2s, transform .5s var(--rebote) .2s;
}
.intro-marca span:first-child { color: #fff; }
.intro-marca span + span { color: #265DA6; }
.intro.completa .intro-marca { opacity: 1; transform: none; }

/* Zona del texto: abajo, 28% del alto, siempre encima de las porciones. El degradado de abajo hacia
   arriba (negro a transparente) lo deja legible aunque algo pase cerca */
.intro-pie {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(6px, 2vh, 14px);
  padding: 8px 16px max(8px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, #0D0D0D 60%, rgba(13, 13, 13, 0));
  transition: opacity .3s ease;
}
.intro-pie > * { max-width: 340px; }
.intro.completa .intro-pie { opacity: 0; }
.intro-guia {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; min-height: 20px;
  font-family: var(--titulos); font-weight: 800; font-size: 13px; letter-spacing: .15em;
  color: #265DA6; text-align: center; text-wrap: balance;
}
.intro-guia svg {
  width: 18px; height: 18px; flex: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.intro-flecha { animation: intro-flecha 1.4s ease-in-out infinite; }
@keyframes intro-flecha { 50% { transform: translateY(-5px); } }
.intro-rueda { animation: intro-rueda 1.4s ease-in-out infinite; }
@keyframes intro-rueda { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(5px); opacity: 0; } 100% { opacity: 0; } }
.intro-barra { width: 160px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.intro-barra i { display: block; height: 100%; background: #265DA6; transform-origin: left; transform: scaleX(0); }
.intro-saltar {
  min-height: 44px; padding: 0 16px; border: 0; background: none;
  font-family: var(--texto); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(242, 242, 242, .6); transition: color .2s;
}
@media (hover: hover) { .intro-saltar:hover { color: #F2F2F2; } }

/* Foto final de la historia (Malibu lleno): 4:5 en celular, 16:10 y máximo 720px en PC; mismo resplandor azul */
.historia-lleno {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; margin: 32px 0 40px;
  box-shadow: 0 18px 40px -10px rgba(38, 93, 166, .75), 0 0 22px rgba(38, 93, 166, .35);
}
.foto-falta.historia-lleno { display: grid; place-items: center; padding: 20px; text-align: center; background: #2A2A2A; color: rgba(242, 242, 242, .7); font-weight: 700; font-size: 15px; box-shadow: none; }
/* Celular: margen de 24px a los lados para que el resplandor quepa completo; 80px debajo para que el botón de WhatsApp no la tape */
@media (max-width: 899px) {
  .historia-lleno {
    width: calc(100% - 48px); margin: 32px auto 80px;
    box-shadow: 0 14px 30px -8px rgba(38, 93, 166, .75), 0 0 16px rgba(38, 93, 166, .35);
  }
}
@media (min-width: 900px) { .historia-lleno { max-width: 720px; aspect-ratio: 16 / 10; margin-left: auto; margin-right: auto; } }