/* ============================================================
   WRD — tienda.css  ·  «Noche y Día»: el sistema visual de la tienda
   ============================================================
   LA IDEA
     La página ES el tronco: arriba chocolate negro (la Noche) que
     gotea sobre blanco hueso (el Día), con chispitas de colores de
     dulcería, stickers de borde grueso y sombra dura, y sellos
     torcidos que gritan lo importante. Es la forma de trabajar que
     eligió el dueño (papel claro + tinta gruesa + color saturado +
     juego), con identidad propia de dulcería: tinta CHOCOLATE en vez
     de negro, Fredoka + Chewy, chispitas, goteo y festón en vez de
     damero.

   DÓNDE APLICA
     Solo las páginas públicas (index.html, premium.html). Se carga
     DESPUÉS de base.css y reescribe sus tokens para el día. El
     Sistema de control (/sistema/) NO carga este archivo y sigue
     oscuro: adentro manda la calma, afuera la venta (POL-001).

   REGLAS
     · Colores: SOLO los tokens de abajo. Nada de azul, morado ni
       neón (prohibición vigente de la casa).
     · Texto sobre naranja: chocolate, nunca blanco (no pasa AA).
       Texto blanco solo sobre --t-verde-boton, --t-rojo-boton y
       --t-choco.
     · Toda superficie que se toca es un sticker: borde 3px
       chocolate + sombra dura sin desenfoque. Nada de sombras
       difusas grises: se ven de app genérica.
     · Movimiento con gusto y siempre con su versión quieta
       (prefers-reduced-motion al final).

   Contenido
     1. Tokens del día (y el remapeo de los de base.css)
     2. Página: fondo con chispitas, tipografía
     3. Primitivas: .t-sticker .t-btn .t-sello .t-titulo .t-chip
     4. Motivos: .t-noche (panel chocolate) .t-goteo .t-rayos
        .t-rayas .t-confeti
     5. Movimiento
   ============================================================ */


/* ============================================================
   1 · TOKENS
   ============================================================ */

:root {
  /* --- Tipografía --- */
  --t-font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;   /* titulares, precios, botones */
  --t-font-chicle: 'Chewy', 'Fredoka', system-ui, sans-serif;     /* sellos y gritos cortos: ¡GRATIS! */
  --t-font-cuerpo: 'Nunito', system-ui, 'Segoe UI', Arial, sans-serif;

  /* --- El día: superficies --- */
  --t-hueso: #FFF7EA;        /* fondo de página (blanco hueso) */
  --t-papel: #FFFDF7;        /* tarjetas y hojas */
  --t-crema: #FCE9CF;        /* bandas alternas, campos */
  --t-crema-2: #F6DAB4;      /* borde suave, separadores */

  /* --- La noche: el chocolate --- */
  --t-choco: #2A1A12;        /* tinta: texto, bordes, sombras duras */
  --t-choco-2: #5B3A29;      /* texto secundario (9.5:1 sobre hueso) */
  --t-choco-3: #8A6A58;      /* apoyo, mínimo legible (4.6:1) */
  --t-noche: #1E120C;        /* el panel de chocolate negro del hero */
  --t-noche-2: #3A2418;      /* brillo del chocolate */
  --t-blanco-choco: #FFF1D6; /* chocolate blanco: texto sobre la noche */

  /* --- Dulcería: los colores vivos que pidió el dueño --- */
  --t-naranja: #FF6A00;      /* la marca. Botón principal (texto chocolate) */
  --t-naranja-2: #FF8A2B;
  --t-naranja-texto: #C24E00;/* naranja legible como TEXTO sobre hueso (4.4:1, solo >= 17px bold) */
  --t-verde: #1F9D55;        /* hoja de los árboles del logo */
  --t-verde-boton: #17803F;  /* verde con texto blanco (5:1) */
  --t-menta: #BDEBC8;
  --t-rojo: #E8364A;         /* fresa */
  --t-rojo-boton: #C8243A;   /* rojo con texto blanco (5.6:1) */
  --t-mango: #FFC93C;        /* amarillo: sellos, destacados */
  --t-chicle: #FF8FB6;       /* rosa chicle: juegos y premios */
  --t-chicle-2: #FFD3E2;

  /* --- Forma --- */
  --t-borde: 3px solid var(--t-choco);
  --t-borde-fino: 2px solid var(--t-choco);
  --t-r-1: 10px;             /* sellos, chips */
  --t-r-2: 16px;             /* botones, campos */
  --t-r-3: 22px;             /* tarjetas, hojas */
  --t-sombra: 5px 5px 0 var(--t-choco);
  --t-sombra-chica: 3px 3px 0 var(--t-choco);
  --t-sombra-naranja: 5px 5px 0 var(--t-naranja);
  --t-sombra-verde: 5px 5px 0 var(--t-verde);
  --t-sombra-rojo: 5px 5px 0 var(--t-rojo);
  --t-sombra-chicle: 5px 5px 0 var(--t-chicle);
  --t-sombra-mango: 5px 5px 0 var(--t-mango);

  /* --- Movimiento --- */
  --t-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-suave: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* --- Chispitas: el fondo de dulcería (tile SVG, 160px) --- */
  --t-chispitas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg stroke-linecap='round' stroke-width='5' opacity='.55'%3E%3Cpath d='M18 22l10 6' stroke='%23FF6A00'/%3E%3Cpath d='M70 14l-4 11' stroke='%231F9D55'/%3E%3Cpath d='M128 30l11-3' stroke='%23E8364A'/%3E%3Cpath d='M40 70l3 11' stroke='%23FFC93C'/%3E%3Cpath d='M100 64l10 7' stroke='%23FF8FB6'/%3E%3Cpath d='M146 88l-9 7' stroke='%23FF6A00'/%3E%3Cpath d='M12 118l11-2' stroke='%23FF8FB6'/%3E%3Cpath d='M62 128l-6 10' stroke='%23E8364A'/%3E%3Cpath d='M112 122l10 5' stroke='%231F9D55'/%3E%3Cpath d='M84 100l-3 -10' stroke='%23FFC93C'/%3E%3C/g%3E%3C/svg%3E");

  /* --- Goteo de chocolate (borde inferior de .t-noche) --- */
  --t-goteo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath fill='%231E120C' d='M0 0h240v10c-8 0-10 4-12 12-2 9-9 9-10 0-1-7-6-9-14-9-10 0-12 18-20 18s-8-15-17-15c-8 0-8 7-15 7-6 0-6-6-13-6-9 0-10 22-19 22s-9-19-18-19c-7 0-8 5-15 5-8 0-9-11-18-11-8 0-8 14-16 14S34 13 26 13C16 13 15 24 8 24 3 24 2 16 0 12z'/%3E%3C/svg%3E");

  /* ---- REMAPEO de los tokens de base.css para el día ----
     Los módulos que ya existen (gate-ui, pedido-modal, mis-pedidos,
     render) escriben estilos en línea con estos nombres. Remapeados
     acá, lo que pintan sale en la paleta del día sin tocarles una
     línea. El Sistema no carga este archivo: ahí siguen siendo noche. */
  --noche: var(--t-hueso);
  --vitrina: var(--t-papel);
  --apagado: #EFE3D2;
  --riel: var(--t-crema);
  --riel-linea: var(--t-crema-2);
  --filo-luz: rgb(42 26 18 / 0.35);
  --filo-frio: var(--t-crema-2);
  --borde-obj: 2px solid var(--t-choco);
  --luz-nucleo: var(--t-choco);
  --luz-halo: var(--t-naranja);
  --sombra-proy: var(--t-sombra);
  --glow-sello: 0 0 0 2px var(--t-mango);
  --rejilla: transparent;
  --alerta: var(--t-rojo-boton);

  --wrd-font-display: var(--t-font-display);
  --wrd-font-cuerpo: var(--t-font-cuerpo);

  --wrd-fondo: var(--t-hueso);
  --wrd-superficie: var(--t-papel);
  --wrd-superficie-alta: var(--t-crema);
  --wrd-borde: var(--t-crema-2);
  --wrd-borde-fuerte: var(--t-choco);

  --wrd-texto: var(--t-choco);
  --wrd-texto-suave: var(--t-choco-2);
  --wrd-texto-tenue: var(--t-choco-3);
  --wrd-texto-off: var(--t-choco-3);
  --wrd-sobre-naranja: var(--t-choco);
  --wrd-verde: var(--t-verde);
  --wrd-ambar: var(--t-mango);
  --wrd-texto-rgb: 42 26 18;
  --wrd-fondo-rgb: 255 247 234;
  --wrd-verde-rgb: 31 157 85;
  --wrd-naranja-tinte: rgb(255 106 0 / 0.12);
  --wrd-ambar-tinte: rgb(255 201 60 / 0.22);
  --wrd-verde-tinte: rgb(31 157 85 / 0.12);

  --radio-1: var(--t-r-1);
  --radio-2: var(--t-r-2);
  --radio-3: var(--t-r-3);

  --wrd-sombra-1: var(--t-sombra-chica);
  --wrd-sombra-2: var(--t-sombra);
  --wrd-sombra-3: var(--t-sombra);
  --wrd-glow-naranja: var(--t-sombra-naranja);
  --wrd-glow-naranja-fuerte: var(--t-sombra-naranja);
  --wrd-glow-ambar: var(--t-sombra-mango);

  color-scheme: light;
}


/* ============================================================
   2 · PÁGINA
   ============================================================ */

html {
  background: var(--t-hueso);
}

body {
  background-color: var(--t-hueso);
  background-image: var(--t-chispitas);
  background-size: 160px 160px;
  color: var(--t-choco);
  font-family: var(--t-font-cuerpo);
}

::selection {
  background: var(--t-mango);
  color: var(--t-choco);
}

:focus-visible {
  outline: 3px solid var(--t-naranja);
  outline-offset: 3px;
}


/* ============================================================
   3 · PRIMITIVAS
   ============================================================ */

/* Sticker: toda superficie que se toca o que importa. */
.t-sticker {
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: var(--t-r-3);
  box-shadow: var(--t-sombra);
}
.t-sticker--naranja { box-shadow: var(--t-sombra-naranja); }
.t-sticker--verde   { box-shadow: var(--t-sombra-verde); }
.t-sticker--rojo    { box-shadow: var(--t-sombra-rojo); }
.t-sticker--chicle  { box-shadow: var(--t-sombra-chicle); }
.t-sticker--mango   { box-shadow: var(--t-sombra-mango); }

/* Botón gordo: se aprieta de verdad (la sombra se achica). */
.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 10px 22px;
  font-family: var(--t-font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--t-choco);
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: var(--t-r-2);
  box-shadow: 4px 4px 0 var(--t-choco);
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.t-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--t-choco); }
.t-btn--naranja { background: var(--t-naranja); color: var(--t-choco); }
.t-btn--verde   { background: var(--t-verde-boton); color: #fff; }
.t-btn--rojo    { background: var(--t-rojo-boton); color: #fff; }
.t-btn--mango   { background: var(--t-mango); color: var(--t-choco); }
.t-btn--chicle  { background: var(--t-chicle); color: var(--t-choco); }
.t-btn--choco   { background: var(--t-choco); color: var(--t-blanco-choco); box-shadow: 4px 4px 0 var(--t-naranja); }
.t-btn--ancho   { display: flex; width: 100%; }
.t-btn--chico   { min-height: 42px; padding: 6px 14px; font-size: 16px; }
.t-btn[disabled],
.t-btn[aria-disabled="true"] {
  background: var(--t-crema);
  color: var(--t-choco-3);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Sello: el grito torcido. ¡GRATIS!, ¡NUEVO!, PRONTO. */
.t-sello {
  display: inline-block;
  padding: 3px 12px 5px;
  font-family: var(--t-font-chicle);
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--t-choco);
  background: var(--t-mango);
  border: var(--t-borde-fino);
  border-radius: var(--t-r-1);
  box-shadow: var(--t-sombra-chica);
  transform: rotate(-3deg);
  white-space: nowrap;
}
.t-sello--naranja { background: var(--t-naranja); }
.t-sello--verde   { background: var(--t-verde-boton); color: #fff; }
.t-sello--rojo    { background: var(--t-rojo-boton); color: #fff; }
.t-sello--chicle  { background: var(--t-chicle); }
.t-sello--derecha { transform: rotate(3deg); }

/* Título de sección: la palabra en un rótulo torcido con sombra de color. */
.t-titulo {
  display: inline-block;
  margin: 0;
  padding: 4px 16px 6px;
  font-family: var(--t-font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--t-choco);
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: 14px;
  box-shadow: var(--t-sombra-naranja);
  transform: rotate(-1.5deg);
}
.t-titulo--mango  { background: var(--t-mango); box-shadow: var(--t-sombra); }
.t-titulo--chicle { background: var(--t-chicle); box-shadow: var(--t-sombra); }
.t-titulo--verde  { background: var(--t-menta); box-shadow: var(--t-sombra-verde); }

.t-bajada {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--t-choco-2);
}

/* Chip de pastilla: presentaciones, filtros, datos cortos. */
.t-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--t-choco);
  background: var(--t-papel);
  border: var(--t-borde-fino);
  border-radius: 999px;
}
.t-chip[aria-pressed="true"] { background: var(--t-mango); box-shadow: var(--t-sombra-chica); }

/* Cifra de plata grande. */
.t-precio {
  font-family: var(--t-font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--t-choco);
  letter-spacing: -0.01em;
}


/* ============================================================
   4 · MOTIVOS
   ============================================================ */

/* La noche: el panel de chocolate negro que gotea (hero, bandas). */
.t-noche {
  position: relative;
  color: var(--t-blanco-choco);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--t-noche-2) 0%, rgb(58 36 24 / 0) 60%),
    var(--t-noche);
}
.t-noche::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  height: 40px;
  background: var(--t-goteo) repeat-x;
  background-size: 240px 40px;
  pointer-events: none;
  z-index: 1;
}

/* Rayos de sol detrás del producto (el halo de cartel). */
.t-rayos {
  background: repeating-conic-gradient(from 0deg, var(--t-mango) 0deg 10deg, var(--t-naranja-2) 10deg 20deg);
  border-radius: 50%;
}

/* Rayas de papel de caramelo (bandas de promo). */
.t-rayas {
  background: repeating-linear-gradient(-45deg, var(--t-naranja) 0 14px, var(--t-mango) 14px 28px);
}

/* Borde de cinta de caramelo: una tira fina arriba de una sección. */
.t-cinta {
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--t-choco) 0 14px, var(--t-naranja) 14px 28px, var(--t-verde) 28px 42px, var(--t-rojo) 42px 56px);
}


/* ============================================================
   5 · MOVIMIENTO
   ============================================================ */

@keyframes t-pop {
  0%   { transform: scale(0.6) rotate(-6deg); opacity: 0; }
  70%  { transform: scale(1.06) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

@keyframes t-flota {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

@keyframes t-latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes t-gira {
  to { transform: rotate(360deg); }
}

.t-pop    { animation: t-pop 520ms var(--t-rebote) both; }
.t-flota  { animation: t-flota 3.2s ease-in-out infinite; }
.t-latido { animation: t-latido 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .t-pop, .t-flota, .t-latido { animation: none !important; }
  .t-btn { transition: none; }
}


/* ============================================================
   6 · AGREGADOS DE LA TIENDA (builder B, ola «Noche y Día»)
   ============================================================
   Nada de lo de arriba cambió de valor: esto solo SUMA. Tres cosas:
     6a. Dos tokens nuevos para escribir sobre la noche.
     6b. Los dibujos del catálogo (assets/iconos.js) vuelven a ver su
         paleta de noche aunque la página esté remapeada al día.
     6c. El puente: las clases de siempre (.btn, .btn-naranja,
         .btn-borde, .btn-enviar, campos, .etiqueta) hablan el idioma
         nuevo, porque las usan módulos que no son de esta hoja
         (pedido-modal, mis-pedidos, el perfil de gate-ui).
   ============================================================ */

/* --- 6a · Tokens nuevos --- */
:root {
  --t-blanco-choco-2: #E9D4B6; /* texto secundario sobre la noche (10:1 sobre --t-noche) */
  --t-noche-3: #4A2E20;        /* filos y separadores sobre la noche */
  --t-sombra-crema: 5px 5px 0 var(--t-blanco-choco);
}

/* --- 6b · Los dibujos del catálogo, con su paleta de noche ---
   iconos.js pinta con var(--noche), var(--luz-nucleo), var(--wrd-texto)…
   y la tienda remapea esos tokens al día (§1): sin esto el chocolate
   negro del tronco saldría color hueso y el blanco saldría chocolate.
   Se reponen SOLO dentro del <svg>, con los tokens t-*.

   EL CONTORNO DE TINTA. Los dibujos nacieron para el fondo oscuro y
   de día se ven lavados (el chocolate blanco se pierde en el papel).
   Cuatro drop-shadow sin desenfoque, uno por lado, les dibujan el
   borde chocolate de sticker. --t-contorno mide el trazo (más grueso
   en los dibujos grandes), --t-contorno-color lo cambia (crema sobre la
   noche: queda troquelado) y --t-icono-sombra suma, si hace falta, la
   sombra dura de cada lugar (hero, tarjeta) sin pisar el contorno. */
svg.producto-icono {
  --noche: var(--t-noche);
  --wrd-texto: var(--t-blanco-choco);
  --luz-nucleo: var(--t-blanco-choco);
  --luz-halo: var(--t-naranja-2);
  --wrd-naranja: var(--t-naranja);
  --wrd-naranja-hondo: var(--t-naranja-texto);
  --wrd-ambar: var(--t-mango);
  --wrd-verde: var(--t-verde);
  --alerta: var(--t-rojo);
  --riel-linea: var(--t-choco);
  --t-contorno: 1.5px;
  filter:
    drop-shadow(var(--t-contorno) 0 0 var(--t-contorno-color, var(--t-choco)))
    drop-shadow(calc(var(--t-contorno) * -1) 0 0 var(--t-contorno-color, var(--t-choco)))
    drop-shadow(0 var(--t-contorno) 0 var(--t-contorno-color, var(--t-choco)))
    drop-shadow(0 calc(var(--t-contorno) * -1) 0 var(--t-contorno-color, var(--t-choco)))
    var(--t-icono-sombra, drop-shadow(0 0 0 transparent));
}

/* De día los dibujos son stickers troquelados: la repisa de vitrina
   de iconos.js (elipse + línea, los dos primeros trazos) se apaga —
   con el contorno de tinta se volvía una barra pesada debajo. */
svg.producto-icono > :nth-child(-n+2) { display: none; }

/* El tronco trae además un resplandor propio (un trazo ancho casi
   transparente, pensado para la noche) y dos migas en el piso: bajo
   el contorno de tinta el resplandor se ve como una mancha. Fuera. */
svg.producto-icono[data-icono='tronco'] > :not(g),
svg.producto-icono[data-icono='tronco'] > g > :first-child { display: none; }

/* --- 6c · El puente --- */

/* La lámpara de base.css (el cono naranja que respira) es de la noche:
   de día no hay lámpara. Y las chispitas se mueven con la página. */
body::before { display: none; }
body { background-attachment: scroll; }

.btn,
.btn-enviar,
.btn-domicilio {
  min-height: 52px;
  padding: 10px 20px;
  font-family: var(--t-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--t-choco);
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: var(--t-r-2);
  box-shadow: 4px 4px 0 var(--t-choco);
  animation: none;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 120ms ease-out;
}
.btn:active,
.btn-enviar:active,
.btn-domicilio:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--t-choco);
}
.btn-naranja,
.btn-enviar,
.btn-domicilio,
.btn-naranja:hover,
.btn-enviar:hover,
.btn-domicilio:hover {
  color: var(--t-choco);
  background: var(--t-naranja);
  box-shadow: 4px 4px 0 var(--t-choco);
}
.btn-borde,
.btn-borde:hover {
  color: var(--t-choco);
  background: var(--t-papel);
  border-color: var(--t-choco);
  box-shadow: 4px 4px 0 var(--t-choco);
}
.btn-naranja:hover,
.btn-enviar:hover { background-color: var(--t-naranja-2); }
.btn-borde:hover { background-color: var(--t-crema); }
.btn:disabled,
.btn-enviar:disabled {
  opacity: 1;
  color: var(--t-choco-3);
  background: var(--t-crema);
  box-shadow: none;
  transform: none;
}

/* Campos: hoja de papel con tinta gruesa. 16px siempre (iOS no hace
   zoom) y 52px de alto: el dedo no falla. */
input[type='text'],
input[type='tel'],
input[type='url'],
input[type='email'],
input[type='number'],
input[type='search'],
input[type='password'],
textarea,
select,
.campo {
  min-height: 52px;
  font-size: 16px;
  color: var(--t-choco);
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: 14px;
  box-shadow: none;
}
input:hover,
textarea:hover,
select:hover,
.campo:hover { border-color: var(--t-choco); }
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.campo:focus-visible {
  outline: none;
  border-color: var(--t-choco);
  box-shadow: 4px 4px 0 var(--t-naranja);
}
input::placeholder,
textarea::placeholder { color: var(--t-choco-3); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--t-choco);
  caret-color: var(--t-choco);
  box-shadow: 0 0 0 100rem var(--t-papel) inset;
}
input[aria-invalid='true'],
textarea[aria-invalid='true'],
.campo[aria-invalid='true'] {
  border-color: var(--t-rojo-boton);
  box-shadow: 4px 4px 0 var(--t-rojo);
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232A1A12' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

form label {
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-choco);
}
.opcional {
  font-family: var(--t-font-cuerpo);
  font-size: 14px;
  font-weight: 600;
  color: var(--t-choco-3);
}

/* La etiquetita de siempre ("2x1", "nuevo") pasa a ser un sello. */
.etiqueta {
  font-family: var(--t-font-chicle);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--t-choco);
  padding: 3px 10px 4px;
  background: var(--t-mango);
  border: var(--t-borde-fino);
  border-radius: var(--t-r-1);
  box-shadow: var(--t-sombra-chica);
  transform: rotate(-3deg);
}
.etiqueta-verde { color: #fff; background: var(--t-verde-boton); }

/* Sobre la noche, los botones gordos proyectan su sombra dura en
   crema o mango: la de chocolate no se vería. */
.t-noche .t-btn { border-color: var(--t-noche); box-shadow: 4px 4px 0 var(--t-mango); }
.t-noche .t-btn:active { box-shadow: 1px 1px 0 var(--t-mango); }
.t-noche .t-btn--chicle { box-shadow: 4px 4px 0 var(--t-blanco-choco); }
.t-noche .t-btn--chicle:active { box-shadow: 1px 1px 0 var(--t-blanco-choco); }
.t-noche .t-chip { border-color: var(--t-noche); }
.t-noche .t-titulo { border-color: var(--t-noche); }
.t-noche .t-bajada { color: var(--t-blanco-choco-2); }

/* La estampa: el pop de .t-pop, pero que TERMINA torcido. .t-pop
   acaba en rotate(0) y le borra la inclinación a un sello; esta
   respeta la de cada uno (--giro, -3deg si no dice nada). */
@keyframes t-estampa {
  0%   { transform: scale(0.5) rotate(calc(var(--giro, -3deg) - 12deg)); opacity: 0; }
  70%  { transform: scale(1.08) rotate(calc(var(--giro, -3deg) + 3deg)); opacity: 1; }
  100% { transform: scale(1) rotate(var(--giro, -3deg)); opacity: 1; }
}
.t-estampa { animation: t-estampa 560ms var(--t-rebote) both; }
/* Lo que va a estamparse al entrar en pantalla espera escondido (la
   clase la pone el JS justo antes de observarlo: sin JS no existe). */
.t-espera { opacity: 0; }
.t-sello--derecha { --giro: 3deg; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-enviar, .btn-domicilio { transition: none; }
  .t-estampa { animation: none !important; }
  .t-espera { opacity: 1; }
}


/* ============================================================
   7 · RITMO, PROFUNDIDAD Y FRANJAS (ola de los combos)
   ============================================================
   Tres cosas que antes cada sección inventaba por su cuenta:
     7a. UNA escala de espacios (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64).
     7b. TRES profundidades de sticker: ficha (3px), tarjeta chica y
         botón (4px), tarjeta grande (6px). El color lo pone cada uno:
         box-shadow: var(--t-hondo-3) var(--t-naranja).
     7c. Las franjas: secciones de borde a borde que alternan el fondo
         (crema con festón de pastelería · noche con goteo) para que
         la página no sea una sola tira de blanco.
   ============================================================ */

:root {
  --t-e1: 4px;
  --t-e2: 8px;
  --t-e3: 12px;
  --t-e4: 16px;
  --t-e5: 24px;
  --t-e6: 32px;
  --t-e7: 48px;
  --t-e8: 64px;

  --t-hondo-1: 3px 3px 0;
  --t-hondo-2: 4px 4px 0;
  --t-hondo-3: 6px 6px 0;
}

.franja {
  position: relative;
  padding-block: var(--t-e7);
}

/* El festón: medias lunas con su filo de tinta, como el borde de un
   capacillo. Arriba suben, abajo cuelgan (el mismo dibujo, espejado). */
.franja--crema {
  margin-block: var(--t-e6);
  background: var(--t-crema);
}
.franja--crema::before,
.franja--crema::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background:
    radial-gradient(circle at 50% 100%, var(--t-crema) 0 8px, var(--t-choco) 8.6px 10.4px, transparent 11px)
    0 0 / 22px 12px repeat-x;
  pointer-events: none;
}
.franja--crema::before { top: -11px; }
.franja--crema::after  { bottom: -11px; transform: scaleY(-1); }

/* La noche: arriba el festón de chocolate, abajo el goteo de siempre. */
.franja--noche {
  margin-block: var(--t-e7) var(--t-e8);
  color: var(--t-blanco-choco);
  background:
    linear-gradient(rgb(30 18 12 / 0.55), rgb(30 18 12 / 0.55)),
    var(--t-chispitas) 0 0 / 160px 160px,
    radial-gradient(120% 70% at 50% 0%, var(--t-noche-2) 0%, rgb(58 36 24 / 0) 60%),
    var(--t-noche);
}
.franja--noche::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  height: 12px;
  background: radial-gradient(circle at 50% 100%, var(--t-noche) 0 10.4px, transparent 11px) 0 0 / 22px 12px repeat-x;
  pointer-events: none;
}
.franja--noche::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  height: 40px;
  background: var(--t-goteo) repeat-x;
  background-size: 240px 40px;
  pointer-events: none;
  z-index: 1;
}

/* Los carruseles: deslizan ADENTRO de sí mismos (la página nunca
   scrollea de costado), de borde a borde, con imán en cada tarjeta. */
.t-carrusel {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  margin-inline: -16px;
  padding-inline: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.t-carrusel::-webkit-scrollbar { display: none; }
.t-carrusel > * { flex: none; scroll-snap-align: start; }
/* El aire del final: sin esto la última tarjeta queda pegada al borde. */
.t-carrusel::after { content: ""; flex: 0 0 1px; }