/* =========================================================
   PENITENTIA PIZZA · Estilos
   Cuaderno de marca v8:
   - Azul Penitentia #1D2E4A y blanco #FFFFFF
   - Brush Script MT: nombre de marca y frases breves (en SVG, img/)
   - Arial Bold: descriptores y sabores en mayúscula, siempre rectos
   - Arial Regular: ingredientes, sabores y pedidos
   ========================================================= */

:root {
  --azul: #1D2E4A;
  --azul-hondo: #15223A;
  --azul-medio: #2A3F62;
  --azul-70: rgba(29, 46, 74, .78);
  --azul-55: rgba(29, 46, 74, .74);
  --azul-12: rgba(29, 46, 74, .14);
  --azul-06: #F1F3F6;            /* un paso de tono sobre el blanco */
  --azul-08: #E7EAF0;
  --blanco: #FFFFFF;
  --blanco-80: rgba(255, 255, 255, .84);
  --blanco-60: rgba(255, 255, 255, .66);
  --blanco-10: rgba(255, 255, 255, .1);

  --fuente: Arial, Arimo, "Helvetica Neue", Helvetica, sans-serif;

  /* Cinco tamaños: chico, cuerpo, destacado, título, sabor */
  --t-chico: 14px;
  --t-cuerpo: 17px;
  --t-destacado: clamp(19px, 1.6vw, 22px);
  --t-titulo: clamp(24px, 2.4vw, 30px);
  --t-sabor: clamp(24px, 2.2vw, 30px);

  --ancho: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --seccion: clamp(88px, 11vw, 168px);
  --radio-foto: 6px;
  --radio-catalogo: 20px;   /* fotos del catálogo */
  --radio-ficha: 28px;      /* ficha que las contiene (radio de la foto + margen) */
  --barra-alto: 72px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --ease-hoja: cubic-bezier(.32, .72, 0, 1);   /* curva de las hojas de iOS: arranca rápido, frena suave */
  --t-press: 100ms;
  --t-hover: 180ms;
  --t-ui: 320ms;
  --t-reveal: 560ms;
}

/* Arimo (misma métrica que Arial), alojada acá: solo se descarga si el equipo no tiene Arial */
@font-face { font-family: "Arimo"; src: url("../fonts/arimo-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra-alto) + 12px); -webkit-text-size-adjust: 100%; scrollbar-color: var(--azul) var(--azul-06); }
body {
  margin: 0; background: var(--blanco); color: var(--azul);
  font-family: var(--fuente); font-size: var(--t-cuerpo); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; caret-color: var(--azul);
  -webkit-tap-highlight-color: transparent;
}
a, button, input, label { touch-action: manipulation; } /* sin demora de 300 ms al tocar */
::selection { background: var(--azul); color: var(--blanco); }
.preparacion ::selection, .portada ::selection, .pie ::selection { background: var(--blanco); color: var(--azul); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.portada :focus-visible, .preparacion :focus-visible, .barra :focus-visible, .pie :focus-visible, .carrito__cab :focus-visible { outline-color: var(--blanco); }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--blanco); color: var(--azul); padding: 10px 16px; font-weight: 700; }
.saltar:focus { left: 8px; }

/* ---------- Botones (píldora, una sola decisión) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px; border-radius: 999px; border: 0;
  font-weight: 700; font-size: var(--t-cuerpo); text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(.97); }
.btn--blanco { background: var(--blanco); color: var(--azul); }
@media (hover: hover) { .btn--blanco:hover { background: var(--azul-08); } }
.btn--azul { background: var(--azul); color: var(--blanco); }
.btn--azul:hover { background: var(--azul-medio); }
.btn--wa { width: 100%; background: var(--azul); color: var(--blanco); min-height: 56px; }
.btn--wa:hover { background: var(--azul-medio); transform: none; }
.btn--wa:active { transform: scale(.985); }

/* ---------- Barra superior ---------- */
/* La barra está fija y no tiene fondo: el fondo lo lleva .barra__in, que arriba ocupa todo el
   ancho y, al bajar 48 px, se comprime en una píldora centrada del ancho justo de su contenido
   (app.js mide ese ancho con una copia invisible, .barra__fantasma, y lo deja en --pill-ancho). */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 30; color: var(--blanco); pointer-events: none; padding-top: env(safe-area-inset-top); }
:root { --ease-barra: cubic-bezier(.45, 0, .55, 1); --t-barra: 600ms; }
.barra__in {
  pointer-events: auto; position: relative; box-sizing: border-box;
  width: 100%; margin: 0 auto; min-height: var(--barra-alto);
  display: flex; align-items: center; gap: 32px;
  padding: 0 max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)), env(safe-area-inset-right)) 0 max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)), env(safe-area-inset-left));
  border-radius: 0; border: 1px solid transparent;
  background: rgba(29, 46, 74, .88); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); /* taste-skill-ignore: material translúcido estilo Apple, pedido explícito */
  transition: width var(--t-barra) var(--ease-barra), margin-top var(--t-barra) var(--ease-barra), min-height var(--t-barra) var(--ease-barra),
              padding var(--t-barra) var(--ease-barra), gap var(--t-barra) var(--ease-barra), border-radius var(--t-barra) var(--ease-barra),
              background-color var(--t-barra) var(--ease-barra), border-color var(--t-barra) var(--ease-barra), box-shadow var(--t-barra) var(--ease-barra);
}
.barra__in.compacta, .barra__fantasma {
  width: var(--pill-ancho, auto); margin-top: 14px; min-height: 60px; gap: 22px;
  padding: 0 8px 0 20px; border-radius: 999px;
  background: rgba(29, 46, 74, .82); border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 18px 44px -16px rgba(10, 18, 32, .55); /* taste-skill-ignore: la píldora flota sobre el contenido */
}
.barra__fantasma { position: absolute; top: 0; left: 0; width: max-content; visibility: hidden; pointer-events: none; transition: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .barra__in { background: var(--azul); } }
@media (prefers-reduced-transparency: reduce) { .barra__in { background: var(--azul); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.barra__logo img { height: 48px; width: auto; transition: height var(--t-barra) var(--ease-barra); }
.barra__in.compacta .barra__logo img, .barra__fantasma .barra__logo img { height: 38px; }
.barra__nav { display: flex; gap: 30px; margin-left: auto; }
.barra__nav a {
  position: relative; text-decoration: none; font-weight: 700; font-size: 15px; color: var(--blanco-80);
  padding: 8px 0; transition: color var(--t-hover) ease;
}
.barra__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--blanco); transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease-out); }
.barra__nav a:hover { color: var(--blanco); }
.barra__nav a:hover::after { transform: scaleX(1); }
/* Menú del celular (oculto en pantallas grandes) */
.btn-menu {
  display: none; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 12px; margin-left: auto;
  border-radius: 999px; border: 0; background: transparent; color: var(--blanco);
  font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.btn-menu:active { transform: scale(.96); }
.btn-menu svg path { transition: transform var(--t-ui) var(--ease-out), opacity var(--t-hover) ease; transform-origin: 12px 12px; }
.btn-menu[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
.btn-menu[aria-expanded="true"] .l2 { opacity: 0; }
.btn-menu[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }
.menu-movil {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; border-radius: 18px;
  background: rgba(29, 46, 74, .96); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); /* taste-skill-ignore: menú flotante */
  box-shadow: 0 18px 30px rgba(10, 18, 32, .3); /* taste-skill-ignore: menú flotante */
  display: grid; gap: 4px; padding: 6px var(--gutter) 18px;
  transform-origin: top; opacity: 0; transform: translateY(-8px);
  transition: opacity 220ms ease, transform 320ms var(--ease-hoja);
}
.menu-movil.abierto { opacity: 1; transform: none; }
.menu-movil a {
  display: flex; align-items: center; min-height: 52px; padding: 0 18px; border-radius: 16px;
  color: var(--blanco); text-decoration: none; font-weight: 700; font-size: 19px;
  transition: background-color var(--t-hover) ease;
}
.menu-movil a:active { background: var(--blanco-10); }
@media (min-width: 901px) { .menu-movil { display: none !important; } }

.btn-carrito {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 16px;
  border-radius: 999px; border: 0; background: var(--azul-medio); color: var(--blanco);
  font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
@media (hover: hover) { .btn-carrito:hover { background: #34507A; } }
.btn-carrito:active { transform: scale(.96); }
.contador {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--blanco); color: var(--azul);
  display: inline-grid; place-items: center; font-size: var(--t-chico); font-variant-numeric: tabular-nums;
}
.contador.salto { animation: salto .45s var(--ease-out); }
@keyframes salto { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- Portada ---------- */
.portada {
  position: relative; background: var(--azul); color: var(--blanco);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  min-height: min(100svh, 892px); overflow: hidden;
}
.portada__texto {
  padding: calc(var(--barra-alto) + clamp(40px, 6vw, 88px)) var(--gutter) clamp(48px, 7vw, 100px);
  padding-left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2;
}
.portada__firma { display: flex; flex-direction: column; align-items: flex-start; width: min(600px, 100%); }
.portada__firma img { width: 100%; height: auto; margin-left: -2%; }
.portada__firma span { width: 100%; text-align: center; margin-top: 4px; font-weight: 700; font-size: clamp(26px, 3vw, 40px); letter-spacing: .08em; line-height: 1; }
.portada__frase { margin-top: clamp(32px, 4vw, 48px); font-size: var(--t-titulo); font-weight: 700; line-height: 1.2; max-width: 20ch; text-wrap: balance; }
.portada__bajada { margin-top: 14px; max-width: 44ch; color: var(--blanco-80); }
.portada__acciones { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.portada__foto { position: relative; overflow: hidden; }
.portada__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.portada__foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--azul) 0%, rgba(29,46,74,.5) 14%, rgba(29,46,74,0) 38%); /* taste-skill-ignore: velo neutro sobre la foto para fundirla con el azul */
}

/* ---------- Títulos de sección ---------- */
.seccion-titulo { max-width: 680px; margin-bottom: clamp(40px, 5vw, 64px); }
.frase { height: clamp(64px, 8.4vw, 112px); width: auto; max-width: 100%; }
.reparto {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 12px;
  background: var(--azul); color: var(--blanco); border-radius: 999px; padding: 12px 22px 12px 18px;
  font-size: var(--t-cuerpo); line-height: 1.35;
}
.reparto svg { flex: none; }
.seccion-titulo__bajada { margin-top: 18px; font-size: var(--t-destacado); line-height: 1.45; max-width: 46ch; }

/* ---------- Catálogo: cada pizza es su etiqueta ---------- */
.catalogo { padding: var(--seccion) 0; }
.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }

.pizza {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  background: var(--azul-06); border-radius: var(--radio-ficha); overflow: hidden;
  transition: background-color var(--t-hover) ease;
  padding: 10px; gap: 0;
}
@media (hover: hover) { .pizza:hover { background: var(--azul-08); } .pizza:hover .pizza__foto img { transform: scale(1.04); } }
.pizza__foto { position: relative; overflow: hidden; background: var(--azul); min-height: 260px; border-radius: var(--radio-catalogo); isolation: isolate; }
.pizza__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft); }
.pizza__sello {
  position: absolute; left: 0; bottom: 0; background: var(--azul); color: var(--blanco);
  font-weight: 700; font-size: var(--t-chico); padding: 7px 14px 8px; border-radius: 999px; left: 12px; bottom: 12px;
}
.pizza__cuerpo { padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pizza__nombre { font-weight: 700; font-size: var(--t-sabor); line-height: 1.08; text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
.pizza__desc { color: var(--azul-70); }
.pizza__pie { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pizza__precio { flex-basis: 100%; font-weight: 700; font-size: var(--t-destacado); font-variant-numeric: tabular-nums; }
.pizza__agregar { flex: 1 1 auto; }
.pizza__agregar {
  height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--azul); color: var(--blanco);
  font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.pizza__agregar:hover { background: var(--azul-medio); }
.pizza__agregar:active { transform: scale(.95); }
.pizza__consultar { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pizza__precio--consultar { font-size: var(--t-cuerpo); color: var(--azul-70); }
/* Sin foto: bloque azul con la firma, como la etiqueta del freezer */
.pizza__foto--etiqueta { display: grid; place-items: center; background: var(--azul); }
.pizza__foto--etiqueta .pizza__marca { position: static; width: 64%; height: auto; object-fit: contain; }
@media (hover: hover) { .pizza:hover .pizza__foto--etiqueta .pizza__marca { transform: none; } }
.pizza__agregar:disabled { background: var(--azul-12); color: var(--azul-55); cursor: not-allowed; }
.pizza__agregar.listo { background: var(--azul-medio); }

/* Selector de cantidad: relleno, sin contorno */
.cantidad { display: inline-flex; align-items: center; height: 46px; border-radius: 999px; background: var(--blanco); }
.cantidad button {
  width: 42px; height: 100%; border: 0; border-radius: 999px; background: transparent; color: var(--azul); cursor: pointer;
  font-size: 20px; font-weight: 700; line-height: 1; display: grid; place-items: center;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.cantidad button:hover { background: var(--azul-08); }
.cantidad button:active { transform: scale(.88); }
.cantidad button:disabled { color: var(--azul-12); cursor: not-allowed; }
.cantidad output { min-width: 24px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cantidad--chica { height: 38px; background: var(--azul-06); }
.cantidad--chica button { width: 36px; font-size: 18px; }

.aviso { margin-top: 32px; font-size: var(--t-chico); color: var(--azul-55); max-width: 70ch; }

/* ---------- Preparación ---------- */
.preparacion { background: var(--azul); color: var(--blanco); padding: var(--seccion) 0; }
.preparacion__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.preparacion__video { border-radius: var(--radio-foto); overflow: hidden; aspect-ratio: 4 / 5; background: var(--azul-hondo); }
.preparacion__video video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.preparacion .seccion-titulo__bajada { color: var(--blanco-80); }
.pasos { list-style: none; display: grid; gap: 12px; }
.pasos li { background: var(--blanco-10); border-radius: var(--radio-foto); padding: 24px 28px; }
.pasos h3 { font-size: var(--t-titulo); line-height: 1.15; }
.pasos p { margin-top: 8px; color: var(--blanco-80); max-width: 52ch; }

/* Lo que está lejos del primer pantallazo no se dibuja hasta acercarse */
.galeria, .contacto, .pie { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- Galería ---------- */
.galeria { padding: var(--seccion) 0 calc(var(--seccion) * .6); }
.galeria__fotos { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 14px; }
.galeria__fotos figure { border-radius: var(--radio-foto); overflow: hidden; aspect-ratio: 3 / 4; background: var(--azul-06); }
.galeria__fotos .g1 { aspect-ratio: auto; }
.galeria__fotos .g2 { margin-top: clamp(32px, 6vw, 88px); }
.galeria__fotos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-soft); }
@media (hover: hover) { .galeria__fotos figure:hover img { transform: scale(1.03); } }

/* ---------- Contacto ---------- */
.contacto { padding: calc(var(--seccion) * .6) 0 var(--seccion); }
.contacto__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.contacto .seccion-titulo { margin-bottom: 0; }
.canales { list-style: none; display: grid; gap: 12px; }
.canal {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: center;
  padding: 22px 26px; border-radius: var(--radio-foto); background: var(--azul-06); text-decoration: none;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.canal svg { grid-row: 1 / 3; width: 36px; height: 36px; transition: transform var(--t-ui) var(--ease-out); }
.canal__tipo { font-size: var(--t-chico); color: var(--azul-55); transition: color var(--t-hover) ease; }
.canal__dato { font-weight: 700; font-size: var(--t-destacado); overflow-wrap: anywhere; line-height: 1.3; }
@media (hover: hover) {
  .canal:hover { background: var(--azul); color: var(--blanco); }
  .canal:hover .canal__tipo { color: var(--blanco-60); }
  .canal:hover svg { transform: rotate(-8deg) scale(1.08); }
}
.canal:active { transform: scale(.98); background: var(--azul-08); }

/* ---------- Pie: el nombre vuelve a todo lo ancho ---------- */
.pie { background: var(--azul); color: var(--blanco); padding: clamp(64px, 8vw, 120px) 0 36px; }
.pie__in { display: grid; gap: clamp(32px, 4vw, 56px); }
.pie__logo { width: min(820px, 100%); height: auto; margin: 0 auto; }
.pie__datos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--t-chico); color: var(--blanco-60); padding-top: 24px; }

/* ---------- Carrito ---------- */
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(12, 20, 34, .55); opacity: 0; transition: opacity var(--t-ui) ease; }
.velo.visible { opacity: 1; }
.carrito {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(440px, 100%);
  background: var(--blanco); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 460ms var(--ease-hoja);
  box-shadow: -18px 0 40px rgba(10, 18, 32, .2); /* taste-skill-ignore: panel que flota sobre la página */
}
.carrito.abierto { transform: none; }
.carrito.arrastrando { transition: none; }
.carrito__asa { display: none; }
.carrito__cab { background: var(--azul); color: var(--blanco); display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 18px 24px; }
.carrito__cab img { height: 46px; width: auto; }
.cerrar { width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--blanco); cursor: pointer; display: grid; place-items: center; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.cerrar:hover { background: var(--blanco-10); }
.cerrar:active { transform: scale(.9); }
.carrito__cuerpo { flex: 1; overflow-y: auto; padding: 16px 20px 24px; overscroll-behavior: contain; }

.vacio { text-align: center; padding: 48px 8px; display: grid; gap: 8px; justify-items: center; color: var(--azul-70); }
.vacio strong { color: var(--azul); font-size: var(--t-destacado); }
.vacio .btn { margin-top: 16px; }

.items { list-style: none; display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--radio-foto); background: var(--azul-06); }
.item img { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; }
.item__nombre { font-weight: 700; font-size: 15px; text-transform: uppercase; line-height: 1.2; }
.item__unit { font-size: var(--t-chico); color: var(--azul-55); margin-top: 2px; }
.item__der { display: grid; justify-items: end; gap: 6px; }
.item__sub { font-weight: 700; font-variant-numeric: tabular-nums; }
.item__quitar { border: 0; background: none; padding: 4px 0; color: var(--azul-55); font-size: var(--t-chico); cursor: pointer; text-decoration: underline; }
.item__quitar:hover { color: var(--azul); }
.item .cantidad--chica { background: var(--blanco); margin-top: 8px; }

.datos { margin-top: 28px; display: grid; gap: 16px; }
.datos__titulo { font-weight: 700; font-size: var(--t-destacado); }
.datos label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.datos input[type="text"], .datos textarea {
  width: 100%; border: 1.5px solid var(--azul-12); border-radius: 10px; padding: 12px 14px; font-weight: 400; font-size: 16px; background: var(--blanco);
  transition: border-color var(--t-hover) ease;
}
.datos input::placeholder, .datos textarea::placeholder { color: var(--azul-55); }
.datos input[type="text"]:focus, .datos textarea:focus { outline: none; border-color: var(--azul); }
.datos input.invalido { border-color: var(--azul); background: var(--azul-06); }
.datos textarea { resize: vertical; }
.opcional { font-weight: 400; color: var(--azul-55); }
.entrega { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.entrega legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding: 0; }
.datos .opcion {
  display: inline-flex; align-items: center; gap: 8px; font-size: 15px;
  border-radius: 999px; padding: 11px 18px; cursor: pointer; background: var(--azul-06);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.datos .opcion:has(input:checked) { background: var(--azul); color: var(--blanco); }
.opcion input { accent-color: var(--blanco); margin: 0; }
.datos .opcion small { display: block; font-size: var(--t-chico); font-weight: 400; opacity: .8; }
.datos .opcion { border-radius: 16px; align-items: center; }
.subtotales { display: grid; gap: 4px; font-size: 15px; color: var(--azul-70); }
.subtotales p { display: flex; justify-content: space-between; }
.subtotales span:last-child { font-variant-numeric: tabular-nums; }
.error { font-size: 15px; font-weight: 700; }

.carrito__pie { padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 12px; background: var(--azul-06); }
.total { display: flex; align-items: baseline; justify-content: space-between; }
.total span { font-weight: 700; font-size: var(--t-cuerpo); }
.total strong { font-size: var(--t-titulo); font-variant-numeric: tabular-nums; }
.carrito__nota { font-size: var(--t-chico); color: var(--azul-70); text-align: center; }

/* Botón flotante (celular) */
.flotante {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 35;
  height: 58px; border-radius: 999px; border: 0; background: var(--azul); color: var(--blanco);
  display: none; align-items: center; justify-content: space-between; padding: 0 24px;
  font-weight: 700; font-size: var(--t-cuerpo); cursor: pointer;
  box-shadow: 0 10px 30px rgba(10, 18, 32, .35); /* taste-skill-ignore: botón flotante */
  transition: transform var(--t-press) var(--ease-out);
}
.flotante:active { transform: scale(.98); }
.flotante__total { font-variant-numeric: tabular-nums; }

/* Aviso "agregado" */
.aviso-agregado {
  position: fixed; left: 50%; top: calc(var(--barra-alto) + 14px); z-index: 60; transform: translateX(-50%);
  background: var(--azul); color: var(--blanco); padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 30px rgba(10, 18, 32, .3); /* taste-skill-ignore: aviso flotante */
  white-space: nowrap; animation: aparece var(--t-ui) var(--ease-out);
}
@keyframes aparece { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Movimiento (solo con JS; sin JS todo queda visible) ---------- */
/* Firma: se escribe de izquierda a derecha, como trazada a mano */
.js .portada__firma img { animation: firma 800ms var(--ease-out) both; }
.js .portada__firma span { animation: subir 480ms var(--ease-out) 180ms both; }
.js .portada__frase { animation: subir 480ms var(--ease-out) 240ms both; }
.js .portada__bajada { animation: subir 480ms var(--ease-out) 300ms both; }
.js .portada__acciones { animation: subir 480ms var(--ease-out) 360ms both; }
.js .portada__foto img { animation: horno 1600ms var(--ease-soft) both; }
@keyframes firma { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes horno { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Entradas por sección: textos suben, fotos se asientan desde la escala */
.js [data-entra].espera { opacity: 0; transform: translateY(16px); }
.js figure[data-entra].espera, .js .pizza[data-entra].espera { transform: translateY(12px) scale(.98); }
.js [data-entra] { transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: var(--retraso, 0ms); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grilla { grid-template-columns: 1fr; }
  .pizza { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
@media (max-width: 900px) {
  .barra__nav { display: none; }
  .btn-menu { display: inline-flex; }
  .btn-carrito { margin-left: 4px; }
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada__foto { order: -1; height: calc(56vw + var(--barra-alto)); min-height: 300px; max-height: 520px; }
  .portada__foto img { object-position: 62% 100%; }
  .portada__foto::before { background: linear-gradient(0deg, var(--azul) 0%, rgba(29,46,74,.4) 26%, rgba(29,46,74,0) 56%); } /* taste-skill-ignore: velo neutro sobre la foto */
  .portada__texto { padding-top: 4px; }
  .preparacion__in, .contacto__in { grid-template-columns: 1fr; }
  .preparacion__video { aspect-ratio: 16 / 11; }
  .galeria__fotos { grid-template-columns: 1fr 1fr; }
  .galeria__fotos .g1 { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
  .galeria__fotos .g2 { margin-top: 0; }
}
@media (max-width: 600px) {
  :root { --barra-alto: 64px; }
  .barra__in.compacta, .barra__fantasma { margin-top: 10px; min-height: 54px; gap: 10px; padding: 0 6px 0 14px; }
  .barra__in.compacta .barra__logo img, .barra__fantasma .barra__logo img { height: 34px; }
  .pizza__pie { gap: 10px; }
  .pizza__agregar { flex: 1 1 auto; }
  body { font-size: 16px; }
  .barra__logo img { height: 40px; }
  .btn-carrito span:not(.contador) { display: none; }
  .btn-carrito { padding: 0 8px; }
  .portada__acciones .btn { flex: 1 1 100%; }
  .pizza { grid-template-columns: 1fr; }
  .pizza__foto { min-height: 0; aspect-ratio: 16 / 10; }
  .pasos li { padding: 20px 22px; }
  .canal { padding: 18px 20px; column-gap: 16px; }
  .canal__dato { font-size: 16px; }
  .canal svg { width: 32px; height: 32px; }
  .pie__datos { justify-content: center; text-align: center; }
  .flotante:not([hidden]) { display: flex; }

  /* Carrito como hoja que sube desde abajo, se cierra arrastrándola hacia abajo */
  .carrito {
    top: auto; left: 0; right: 0; width: 100%; max-height: calc(100svh - 24px - env(safe-area-inset-top));
    border-radius: 18px 18px 0 0; overflow: hidden; transform: translateY(100%);
    box-shadow: 0 -12px 40px rgba(10, 18, 32, .25); /* taste-skill-ignore: hoja flotante */
  }
  .carrito__cab { position: relative; padding-top: 26px; touch-action: none; cursor: grab; }
  .carrito__asa { display: block; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 99px; background: rgba(255, 255, 255, .45); }
  .carrito__cab img { height: 40px; }
  body.con-flotante .pie { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js [data-entra].espera { opacity: 1; transform: none; }
}

/* =========================================================
   CAPA DE VIDA (21-oct-2026)
   Fondos que respiran, personalidad y detalles estilo Apple.
   Reglas: sólo transform/opacity/clip-path (van por la GPU), sólo
   tonos de la marca (blanco y azul con transparencia), y todo se
   apaga con "movimiento reducido" (ver el @media del final) o cuando
   la sección no está en pantalla (clase .fuera, la pone app.js).
   ========================================================= */
:root { --t-ambiente: 28s; }   /* ritmo de las luces de fondo: lento, casi imperceptible */

/* Grano fino sobre toda la página: rompe lo plano del color pleno sin cambiarlo */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---------- Portada: luces que se mueven detrás del texto, foto que respira ---------- */
.portada__luces { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.portada__luces::before, .portada__luces::after {
  content: ""; position: absolute; border-radius: 50%; will-change: transform;
}
.portada__luces::before {
  width: 60vmax; height: 60vmax; left: -22vmax; top: -24vmax;
  background: radial-gradient(circle, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 60%);
  animation: luz-a var(--t-ambiente) ease-in-out infinite alternate;
}
.portada__luces::after {
  width: 52vmax; height: 52vmax; left: 6vmax; bottom: -34vmax;
  background: radial-gradient(circle, var(--azul-medio) 0%, rgba(42, 63, 98, 0) 62%);
  animation: luz-b calc(var(--t-ambiente) * 1.35) ease-in-out infinite alternate;
}
@keyframes luz-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vmax, 9vmax, 0) scale(1.18); } }
@keyframes luz-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-9vmax, -11vmax, 0) scale(1.12); } }
.portada__foto { z-index: 1; }   /* la foto queda por encima de las luces */
/* La foto entra desde el horno y después respira muy despacio (Ken Burns) */
.js .portada__foto img { animation: horno 1600ms var(--ease-soft) both, respirar 26s ease-in-out 1600ms infinite alternate; }
@keyframes respirar { from { transform: scale(1); } to { transform: scale(1.06); } }
/* "PIZZA" llega con las letras abriéndose hasta su lugar */
.js .portada__firma span { animation: subir 480ms var(--ease-out) 180ms both, abrir-letras 1100ms var(--ease-out) 180ms both; }
@keyframes abrir-letras { from { letter-spacing: .34em; } to { letter-spacing: .08em; } }
/* El texto de la portada se queda un poco atrás al hacer scroll (lo mueve app.js) */
.portada__texto { will-change: transform, opacity; }

/* Sello giratorio al lado del botón */
.sello-giro {
  width: 104px; height: 104px; margin-left: 10px; color: var(--blanco);
  font-weight: 700; font-size: 11.5px; letter-spacing: .12em; fill: currentColor;
  animation: girar 30s linear infinite; will-change: transform;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Cinta de frases ---------- */
.cinta {
  position: relative; overflow: hidden; background: var(--azul-hondo); color: var(--blanco-80);
  padding: 15px 0; font-weight: 700; font-size: var(--t-chico); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cinta--clara { background: var(--azul-06); color: var(--azul-70); }
.cinta__pista { display: inline-flex; width: max-content; animation: cinta 44s linear infinite; will-change: transform; }
.cinta--clara .cinta__pista { animation-duration: 52s; animation-direction: reverse; }
.cinta span { display: inline-flex; align-items: center; gap: 26px; padding: 0 13px; }
.cinta span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
@keyframes cinta { to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) and (pointer: fine) { .cinta:hover .cinta__pista { animation-play-state: paused; } }

/* ---------- Catálogo: luz que se desplaza detrás de las fichas, foco bajo el cursor ---------- */
.catalogo { position: relative; overflow: hidden; isolation: isolate; }
.catalogo::before, .catalogo::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; will-change: transform; }
.catalogo::before {
  width: 72vmax; height: 72vmax; right: -34vmax; top: -22vmax;
  background: radial-gradient(circle, var(--azul-08) 0%, rgba(231, 234, 240, 0) 60%);
  animation: luz-b calc(var(--t-ambiente) * 1.2) ease-in-out infinite alternate;
}
.catalogo::after {
  width: 56vmax; height: 56vmax; left: -28vmax; bottom: -14vmax;
  background: radial-gradient(circle, var(--azul-08) 0%, rgba(231, 234, 240, 0) 60%);
  animation: luz-a calc(var(--t-ambiente) * .9) ease-in-out infinite alternate;
}
/* El punto del chip de reparto late, como un "estamos" */
.reparto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blanco); flex: none; animation: latir 2.6s ease-in-out infinite; }
@keyframes latir { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
/* Frases manuscritas: se escriben de izquierda a derecha al entrar, como la firma */
.js .seccion-titulo .frase { clip-path: inset(-20% 0 -20% 0); transition: clip-path 1000ms var(--ease-out) 120ms; }
.js .seccion-titulo.espera .frase { clip-path: inset(-20% 100% -20% 0); }
/* Ficha: se levanta apenas y un foco blanco sigue al cursor (sólo con mouse) */
.pizza { position: relative; isolation: isolate; transition: background-color var(--t-hover) ease, transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) ease; }
.pizza__foto, .pizza__cuerpo { position: relative; z-index: 1; }
.pizza::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 62%);
  transition: opacity var(--t-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .pizza:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(29, 46, 74, .4); } /* taste-skill-ignore: sombra del mismo azul, la ficha se levanta */
  .pizza:hover::after { opacity: 1; }
}
.pizza__agregar { transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out), color var(--t-hover) ease; }
/* La pizza que vuela hasta el botón del pedido (la crea app.js) */
.vuelo { position: fixed; z-index: 70; pointer-events: none; border-radius: var(--radio-catalogo); overflow: hidden; background: var(--azul); will-change: transform, opacity; }
.vuelo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vuelo .pizza__marca { position: absolute; left: 18%; top: 50%; width: 64%; height: auto; transform: translateY(-50%); }
.vuelo .pizza__sello { display: none; }

/* ---------- Preparación: chispas que suben del horno, números grandes en los pasos ---------- */
.preparacion { position: relative; overflow: hidden; }
.chispas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.chispa {
  position: absolute; bottom: -12px; left: var(--x, 50%); width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%;
  background: var(--blanco); opacity: 0; will-change: transform, opacity;
  animation: chispa var(--d, 11s) linear var(--r, 0s) infinite;
}
@keyframes chispa {
  0%   { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  12%  { opacity: var(--o, .5); }
  70%  { opacity: var(--o, .5); }
  100% { transform: translate3d(var(--dx, 24px), calc(-1 * var(--h, 900px)), 0) scale(1.1); opacity: 0; }
}
.preparacion__in { position: relative; }
.preparacion__video { box-shadow: 0 30px 70px -30px rgba(10, 18, 32, .7); } /* taste-skill-ignore: el video se despega del fondo */
.pasos { counter-reset: paso; }
.pasos li { position: relative; overflow: hidden; counter-increment: paso; transition: background-color var(--t-hover) ease; }
.pasos li::before {
  content: "0" counter(paso); position: absolute; right: 16px; top: -10px; pointer-events: none;
  font-weight: 700; font-size: 84px; line-height: 1; letter-spacing: -.05em; color: rgba(255, 255, 255, .12);
}
@media (hover: hover) and (pointer: fine) { .pasos li:hover { background: rgba(255, 255, 255, .16); } }

/* ---------- Galería: las fotos se desplazan a distinto ritmo con el scroll (si el navegador sabe) ---------- */
@supports (animation-timeline: view()) {
  .js .galeria__fotos .g1 { animation: flotar-1 linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .js .galeria__fotos .g2 { animation: flotar-2 linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .js .galeria__fotos .g3 { animation: flotar-3 linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
@keyframes flotar-1 { from { transform: translate3d(0, 18px, 0); } to { transform: translate3d(0, -18px, 0); } }
@keyframes flotar-2 { from { transform: translate3d(0, 56px, 0); } to { transform: translate3d(0, -56px, 0); } }
@keyframes flotar-3 { from { transform: translate3d(0, 30px, 0); } to { transform: translate3d(0, -30px, 0); } }

/* ---------- Contacto y pie ---------- */
.canal { transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .canal:hover { transform: translateX(6px); } }
.pie { position: relative; overflow: hidden; }
.pie::before {
  content: ""; position: absolute; left: 50%; top: 34%; width: 90vmax; height: 46vmax; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 60%);
  animation: aliento 10s ease-in-out infinite alternate; will-change: transform, opacity;
}
@keyframes aliento { from { transform: translate(-50%, -50%) scale(.92); opacity: .7; } to { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }

/* ---------- Barra: borde de luz arriba, como material ---------- */
.barra__in:not(.compacta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; }

/* Las secciones fuera de pantalla no gastan: app.js les pone .fuera */
.fuera, .fuera *, .fuera::before, .fuera::after { animation-play-state: paused !important; }

/* Celular: menos capas */
@media (max-width: 600px) {
  .sello-giro { display: none; }   /* abajo del botón quedaba solo y lo tapaba el botón flotante del pedido */
  .pasos li::before { font-size: 64px; right: 12px; top: -6px; }
  .cinta { padding: 12px 0; }
}

/* Movimiento reducido: todo lo ambiental se queda quieto, las frases quedan a la vista */
@media (prefers-reduced-motion: reduce) {
  body::after, .portada__luces, .chispas, .pie::before, .catalogo::before, .catalogo::after { display: none; }
  .cinta__pista { animation: none; }
  .js .seccion-titulo .frase { clip-path: none; transition: none; }
  .js .portada__firma span { letter-spacing: .08em; }
}