/* ============================================================
   WRD — home.css  ·  La tienda (index.html) en «Noche y Día»
   ============================================================
   Construido ENCIMA de css/tienda.css: tokens --t-* y primitivas
   (.t-sticker .t-btn .t-sello .t-titulo .t-chip .t-noche .t-rayos).
   Nada de colores sueltos: si falta uno, se agrega el token allá.

   LA PÁGINA ES EL TRONCO: arriba la Noche (barra, cuenta y hero de
   chocolate que gotea), abajo el Día (blanco hueso con chispitas),
   y en el medio otra franja de noche para el club de rangos.

   Qué vive acá:
     1. Página y envases
     2. Barra superior y marca
     3. Hero: logo, sello, titular, el tronco gigante, precio, CTA
     4. Tira de confianza
     5. Cabeceras de sección
     6. La tarjeta protagonista (promos y catálogo)
     7. Las presentaciones 1u / 3u / 6u
     8. Lo que viene (tarjetas «Pronto»)
     9. Cómo funciona
    10. Subí de rango (la escalera)
    11. Traé a alguien
    12. (el pie y la barra viven en css/gate.css)
    13. Movimiento quieto
    14. Los combos (hamburguesa + troncos): la estrella
    15. La barra de tu pedido (pegada abajo)

   El DOM de las tarjetas lo arma js/render.js; el de la escalera,
   js/gate-ui.js. Los juegos (#juegos) son de css/juegos.css: acá
   solo se les da el lugar.
   ============================================================ */


/* ============================================================
   1 · PÁGINA Y ENVASES
   <main> deja de ser una columna con aire: cada sección trae su
   propio envase, así la noche puede ir de borde a borde.
   ============================================================ */

.tienda main {
  max-width: none;
  padding-inline: 0;
  padding-bottom: 0;
}

.envase {
  width: 100%;
  max-width: 1076px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 56.25em) {
  .envase { padding-inline: 24px; }
}

/* Los juegos son una tarjeta propia (css/juegos.css): acá solo se la
   centra con el mismo aire que el resto. Vacía (sin juegos en modo
   demo, o antes de que llegue js/juegos.js) no ocupa lugar. */
.tienda main > .juegos {
  width: calc(100% - 32px);
  max-width: 1044px;
  margin-inline: auto;
}

.tienda main > .juegos:empty { display: none; }

/* Sin juegos, el botón del hero que lleva a ellos no promete nada. */
body:has(#juegos:empty) .hero-jugar,
body:has(#juegos[hidden]) .hero-jugar {
  display: none;
}


/* 2 · La barra superior vive en css/gate.css (la comparten index y
   premium, igual que la cuenta en fichas). */


/* ============================================================
   3 · HERO  ·  .hero.t-noche
   A 390: logo 176px · titular 34px · el tronco sobre su sol · CTA.
   El botón de pedir cae dentro de la primera pantalla (medido).
   ============================================================ */

/* Las chispitas sobre el chocolate van a media luz (un velo de noche
   encima): de fondo, no compitiendo con el titular. */
.hero.t-noche {
  display: block;
  padding: 6px 0 46px;
  text-align: center;
  background:
    linear-gradient(rgb(30 18 12 / 0.5), rgb(30 18 12 / 0.5)),
    var(--t-chispitas) 0 0 / 160px 160px,
    radial-gradient(90% 55% at 50% 62%, var(--t-noche-2) 0%, rgb(58 36 24 / 0) 70%),
    var(--t-noche);
  z-index: 2;
}

.hero-envase {
  display: grid;
  gap: 14px;
  max-width: 1076px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* La tira de "tu pedido va en camino", sobre el chocolate. Gana a
   los estilos que inyecta js/mis-pedidos.js por especificidad. */
.hero .mp-tira {
  margin: 4px 0 0;
  min-height: 52px;
  padding: 10px 14px;
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--t-choco);
  background: var(--t-papel);
  border: 3px solid var(--t-noche);
  border-radius: var(--t-r-2);
  box-shadow: 4px 4px 0 var(--t-mango);
}

.hero .mp-tira:hover { background: var(--t-crema); border-color: var(--t-noche); }
.hero .mp-tira-texto { color: var(--t-choco); }
.hero .mp-tira-punto { width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--t-choco); }
.hero .mp-tira-ver {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--t-naranja-texto);
}

.hero-texto {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.hero-marca {
  display: grid;
  justify-items: center;
}

.hero .hero-logo {
  width: 184px;
  max-width: 100%;
  height: auto;
}

.hero-sello {
  --giro: -4deg;
  margin-top: -10px;
  font-size: 17px;
}

.hero-titulo {
  max-width: 13ch;
  margin: 2px auto 0;
  font-family: var(--t-font-display);
  font-size: 36px;
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--t-blanco-choco);
  text-shadow: 3px 3px 0 var(--t-naranja-texto);
  text-wrap: balance;
}

.hero-titulo-pinta {
  color: var(--t-mango);
  text-shadow: 3px 3px 0 var(--t-rojo-boton);
}

.hero-bajada {
  max-width: 31ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.4;
  color: var(--t-blanco-choco-2);
}

/* LA ESCENA: el sol de cartel girando despacio, el tronco flotando
   encima y el sticker del precio pegado torcido en la esquina. */
.hero-escena {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 330px;
  height: 200px;
  margin: 0 auto;
}

.hero-rayos {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 196px;
  height: 196px;
  margin: -98px 0 0 -98px;
  box-shadow: 0 0 0 5px var(--t-noche), 0 0 0 9px var(--t-mango);
  animation: t-gira 40s linear infinite;
}

.hero-producto {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 250px;
  height: 200px;
  pointer-events: none;
  animation: t-flota 3.4s ease-in-out infinite;
}

.hero-producto svg {
  width: 250px;
  height: 250px;
  max-width: none;
  transform: rotate(-14deg);
  --t-contorno: 3px;
  --t-contorno-color: var(--t-blanco-choco);
  --t-icono-sombra: drop-shadow(6px 8px 0 rgb(0 0 0 / 0.45));
}

/* La repisa de vitrina de iconos.js (elipse + línea) y las migas del
   piso no van acá: el tronco del hero flota. Todo lo que no es el
   dibujo mismo (el <g> del tronco) se apaga. */
.hero-producto svg > :not(g) { display: none; }

.hero-precio {
  --giro: 10deg;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 2px;
  display: grid;
  place-content: center;
  width: 96px;
  height: 96px;
  margin: 0;
  text-align: center;
  color: #fff;
  background: var(--t-rojo-boton);
  border: 3px solid var(--t-blanco-choco);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--t-mango);
  transform: rotate(var(--giro));
  animation: t-estampa 560ms var(--t-rebote) 250ms both;
}

.hero-precio-desde {
  font-family: var(--t-font-chicle);
  font-size: 18px;
  line-height: 1;
}

.hero-precio-valor {
  font-family: var(--t-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* EL SELLO DE LO NUEVO: pegado torcido abajo a la izquierda del sol,
   salta a los combos. Lo enciende js/render.js (nace [hidden]). */
.hero-combo {
  --giro: -7deg;
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: -8px;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 182px;
  min-height: 60px;
  padding: 3px 12px 4px 2px;
  text-align: left;
  text-decoration: none;
  color: var(--t-choco);
  background: var(--t-mango);
  border: 3px solid var(--t-papel);
  border-radius: var(--t-r-2);
  box-shadow: var(--t-hondo-2) var(--t-rojo-boton);
  transform: rotate(var(--giro));
  animation: t-estampa 560ms var(--t-rebote) 450ms both;
  -webkit-tap-highlight-color: transparent;
}

.hero-combo[hidden] { display: none; }
.hero-combo:active { box-shadow: 1px 1px 0 var(--t-rojo-boton); translate: 3px 3px; }

.hero-combo-dibujo { flex: none; display: grid; place-items: center; width: 54px; height: 54px; }
.hero-combo-dibujo svg { width: 62px; height: 62px; max-width: none; --t-contorno: 0px; }

.hero-combo-texto { display: grid; gap: 1px; min-width: 0; }

.hero-combo-nuevo {
  justify-self: start;
  padding: 0 7px 1px;
  font-family: var(--t-font-chicle);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--t-rojo-boton);
  border-radius: 6px;
}

.hero-combo-que {
  font-family: var(--t-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.02;
}

.hero-combo-precio {
  font-family: var(--t-font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--t-choco-2);
}

.hero-combo-precio:empty { display: none; }

.hero-acciones {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin: 2px auto 0;
}

.hero-pedir {
  min-height: 60px;
  font-size: 23px;
}

.hero-jugar {
  min-height: 54px;
  font-size: 19px;
}

.hero-datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
}

.hero-dato {
  min-height: 36px;
  padding: 4px 12px;
  font-size: 15px;
}

/* ≥ 900: dos columnas — el texto y la acción a la izquierda, el
   tronco gigante a la derecha sobre un sol grande. */
@media (min-width: 56.25em) {
  .hero.t-noche { padding: 18px 0 64px; text-align: left; }

  .hero-envase {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas:
      "tira     tira"
      "texto    escena"
      "acciones escena"
      "datos    escena";
    column-gap: 40px;
    row-gap: 18px;
    align-items: center;
    padding-inline: 24px;
  }

  .hero .mp-tira { grid-area: tira; }
  .hero-texto { grid-area: texto; justify-items: start; }
  .hero-marca { justify-items: start; }
  .hero .hero-logo { width: 240px; }
  .hero-titulo { max-width: 14ch; margin: 6px 0 0; font-size: 60px; text-shadow: 4px 4px 0 var(--t-naranja-texto); }
  .hero-titulo-pinta { text-shadow: 4px 4px 0 var(--t-rojo-boton); }
  .hero-bajada { margin: 0; font-size: 19px; max-width: 34ch; }
  .hero-escena { grid-area: escena; max-width: 460px; height: 440px; }
  .hero-rayos { width: 380px; height: 380px; margin: -190px 0 0 -190px; box-shadow: 0 0 0 7px var(--t-noche), 0 0 0 13px var(--t-mango); }
  .hero-producto { width: 460px; height: 440px; }
  .hero-producto svg { width: 460px; height: 460px; }
  .hero-precio { top: 30px; right: 0; width: 132px; height: 132px; }
  .hero-combo { left: 10px; bottom: 30px; max-width: 220px; }
  .hero-combo-que { font-size: 18px; }
  .hero-precio-desde { font-size: 22px; }
  .hero-precio-valor { font-size: 30px; }
  .hero-acciones { grid-area: acciones; grid-template-columns: 1fr 1fr; max-width: 520px; margin: 0; }
  .hero-datos { grid-area: datos; justify-content: flex-start; }
}


/* ============================================================
   4 · TIRA DE CONFIANZA
   Tres stickers torcidos, lo primero que se ve bajo el goteo. El
   relleno de arriba es el goteo (40px) más aire.
   ============================================================ */

.confianza {
  position: relative;
  padding: 62px 0 0;
}

.confianza-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

.confianza-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 84px;
  padding: 10px 6px 12px;
  text-align: center;
  font-family: var(--t-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  border-radius: var(--t-r-2);
  box-shadow: 4px 4px 0 var(--t-choco);
}

.confianza-item.t-sticker--verde   { box-shadow: 4px 4px 0 var(--t-verde); transform: rotate(-2deg); }
.confianza-item.t-sticker--naranja { box-shadow: 4px 4px 0 var(--t-naranja); transform: rotate(1.5deg); }
.confianza-item.t-sticker--rojo    { box-shadow: 4px 4px 0 var(--t-rojo); transform: rotate(-1deg); }

.confianza-ico {
  font-size: 28px;
  line-height: 1;
}

.confianza-ico svg { width: 40px; height: 40px; margin-block: -6px -4px; }

@media (min-width: 56.25em) {
  .confianza { padding-top: 84px; }
  .confianza-item { flex-direction: row; gap: 10px; min-height: 64px; font-size: 18px; }
}



/* ============================================================
   5 · CABECERAS DE SECCIÓN
   Sello torcido arriba, título en rótulo, bajada corta. Todo al
   centro: es un cartel, no un documento.
   ============================================================ */

.seccion {
  padding-block: var(--t-e7) var(--t-e1);
}

.seccion-cabeza {
  margin-bottom: var(--t-e5);
  text-align: center;
}

.seccion-sello {
  display: block;
  width: fit-content;
  margin: 0 auto var(--t-e3);
}

/* Cabecera de costado (catálogo): el rótulo a la izquierda y el sello
   colgado a su lado, en vez del cartel centrado de siempre. */
.cabeza-lado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--t-e2) var(--t-e3);
  text-align: left;
}

.cabeza-lado .seccion-sello { margin: 0; }
.cabeza-lado .t-bajada { flex-basis: 100%; margin: var(--t-e1) 0 0; }

.seccion-cabeza .t-titulo {
  --giro: -1.5deg;
  font-size: 32px;
}

.seccion-cabeza .t-bajada {
  max-width: 34ch;
  margin: 14px auto 0;
  font-size: 17px;
}

@media (min-width: 56.25em) {
  .seccion { padding-block: var(--t-e8) var(--t-e2); }
  .seccion-cabeza .t-titulo { font-size: 42px; }
  .seccion-cabeza .t-bajada { font-size: 19px; }
}


/* ============================================================
   6 · LA TARJETA PROTAGONISTA  ·  .producto-card
   (render.js: promos y catálogo de lo que SE VENDE)
   Arriba el dibujo sobre su sol, abajo el nombre, las
   presentaciones, el precio grande y el botón gordo.
   ============================================================ */

.promo-grid,
.catalogo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.promo-grid > p,
.catalogo-grid > p,
.pronto-grid > p {
  grid-column: 1 / -1;
  padding: 18px;
  text-align: center;
  font-family: var(--t-font-display);
  font-size: 17px;
  color: var(--t-choco-2);
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: var(--t-r-2);
  box-shadow: var(--t-sombra-chica);
}

.producto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: 26px;
  box-shadow: var(--t-hondo-3) var(--t-naranja);
}

.promo-card { box-shadow: var(--t-hondo-3) var(--t-rojo); }

.producto-card .producto-foto {
  position: relative;
  display: grid;
  place-items: center;
  height: 196px;
  overflow: hidden;
  border-bottom: var(--t-borde);
  border-radius: 23px 23px 0 0;
  background:
    repeating-conic-gradient(from 0deg at 50% 62%, var(--t-mango) 0deg 10deg, var(--t-naranja-2) 10deg 20deg);
}

.producto-card .producto-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producto-card .producto-icono {
  width: 230px;
  max-width: none;
  height: auto;
  transform: rotate(-8deg);
  --t-contorno: 2.2px;
  --t-icono-sombra: drop-shadow(5px 6px 0 rgb(42 26 18 / 0.35));
  transition: transform 260ms var(--t-rebote);
}

.producto-card:hover .producto-icono { transform: rotate(-3deg) scale(1.05); }

/* La repisa de iconos.js (los dos primeros trazos) no va sobre el sol:
   el producto flota. */
.producto-card .producto-icono > :nth-child(-n+2) { display: none; }

.producto-foto.sin-foto {
  font-size: 64px;
}

.producto-cuerpo {
  display: grid;
  gap: 12px;
  padding: 18px 16px 18px;
}

.producto-card .etiqueta {
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 14px;
}

.promo-titulo,
.catalogo-titulo {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: 29px;
  font-weight: 700;
  line-height: 1.02;
  color: var(--t-choco);
}

.promo-desc,
.catalogo-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--t-choco-2);
}

.promo-precio-row,
.catalogo-precio-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.promo-precio,
.catalogo-precio {
  font-family: var(--t-font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--t-choco);
}

.promo-precio-antes,
.catalogo-precio-antes {
  font-family: var(--t-font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--t-choco-3);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--t-rojo);
}

.producto-ahorro {
  --giro: -4deg;
  font-size: 17px;
}

.promo-btn,
.catalogo-btn {
  min-height: 60px;
  font-size: 22px;
}

/* "¡Quedan 3!": escasez real (stock del catálogo vivo), en sello. */
.quedan {
  justify-self: start;
  margin: 0;
  padding: 2px 10px 3px;
  font-family: var(--t-font-chicle);
  font-size: 17px;
  color: #fff;
  background: var(--t-rojo-boton);
  border: var(--t-borde-fino);
  border-radius: var(--t-r-1);
  transform: rotate(-2deg);
}

/* AGOTADO: la tarjeta se queda, sin color y con su sello. */
.producto-card.agotado { box-shadow: var(--t-hondo-3) var(--t-crema-2); }
.producto-card.agotado .producto-foto { filter: grayscale(0.85); }
.producto-card.agotado .catalogo-precio,
.producto-card.agotado .promo-precio { color: var(--t-choco-3); }

.cinta-agotado {
  --giro: -6deg;
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
}

/* Un solo producto a la venta: en escritorio la tarjeta se acuesta
   (dibujo a la izquierda, todo lo demás a la derecha). */
@media (min-width: 56.25em) {
  .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .catalogo-grid > .producto-card:only-child {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .catalogo-grid > .producto-card:only-child .producto-foto {
    flex: 0 0 46%;
    height: auto;
    min-height: 420px;
    border-bottom: 0;
    border-right: var(--t-borde);
    border-radius: 23px 0 0 23px;
  }

  .catalogo-grid > .producto-card:only-child .producto-icono { width: 380px; }
  .catalogo-grid > .producto-card:only-child .producto-cuerpo { flex: 1 1 auto; align-content: center; padding: 30px 32px; gap: 16px; }
  .catalogo-grid > .producto-card:only-child .catalogo-titulo { font-size: 40px; }
  .catalogo-grid > .producto-card:only-child .catalogo-desc { font-size: 18px; }
}


/* ============================================================
   7 · LAS PRESENTACIONES  ·  1u / 3u / 6u
   Fichas gordas en fila. La elegida: mango, levantada y con su ✓
   verde (color + forma + posición, nunca uno solo). El ahorro va en
   un sello verde colgado de la esquina.
   ============================================================ */

.presentaciones {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.presentacion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 84px;
  padding: 10px 4px 8px;
  font-family: var(--t-font-display);
  color: var(--t-choco);
  text-align: center;
  background: var(--t-crema);
  border: var(--t-borde);
  border-radius: var(--t-r-2);
  box-shadow: 3px 3px 0 var(--t-choco);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--t-rebote), box-shadow 120ms ease-out, background-color 120ms ease-out;
}

.presentacion:hover { background: var(--t-papel); }
.presentacion:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--t-choco); }

.presentacion-u {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.presentacion-que {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--t-choco-2);
}

.presentacion-precio {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.presentacion--elegida,
.presentacion--elegida:hover {
  background: var(--t-mango);
  box-shadow: 4px 4px 0 var(--t-naranja);
  transform: translateY(-3px);
}

.presentacion--elegida::before {
  content: '✓';
  position: absolute;
  top: -10px;
  left: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--t-verde-boton);
  border: var(--t-borde-fino);
  border-radius: 50%;
}

.presentacion-ahorro {
  position: absolute;
  top: -13px;
  right: -6px;
  padding: 1px 6px 2px;
  font-family: var(--t-font-chicle);
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  background: var(--t-verde-boton);
  border: var(--t-borde-fino);
  border-radius: 8px;
  transform: rotate(6deg);
}


/* ============================================================
   8 · LO QUE VIENE  ·  .pronto.franja--noche / .pronto-card
   Una franja de noche (festón arriba, goteo abajo) con un carrusel
   que desliza adentro de sí mismo (.t-carrusel): ocho tarjetas en
   fila ya no son 1.800px de página. Se tocan (el dibujo salta y sale
   un aviso) y en .voto-slot js/juegos.js pone el voto.
   ============================================================ */

.pronto.franja--noche { padding-block: var(--t-e6) var(--t-e5); }

.pronto-cabeza { margin-bottom: var(--t-e2); }

/* Esta cabecera no es un rótulo: es un cartel de neón apagado… en
   chocolate. El aviso en pastilla punteada y el título de crema. */
.pronto-kicker {
  display: inline-block;
  padding: 2px 12px 3px;
  font-family: var(--t-font-chicle);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--t-chicle);
  border: 2px dashed var(--t-chicle);
  border-radius: 999px;
  transform: rotate(-2deg);
}

.pronto-titulo-seccion {
  margin: var(--t-e2) 0 0;
  font-family: var(--t-font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--t-blanco-choco);
  text-shadow: 3px 3px 0 var(--t-rojo-boton);
}

.pronto-bajada {
  margin: var(--t-e2) 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--t-blanco-choco-2);
}

.pronto-desliza {
  font-weight: 800;
  color: var(--t-mango);
  white-space: nowrap;
}

.pronto-grid {
  gap: var(--t-e3);
  padding-block: var(--t-e3) var(--t-e4);
}

.pronto-grid > .pronto-card { width: 158px; }

.pronto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 10px 12px;
  background: var(--t-papel);
  border: 3px solid var(--t-noche);
  border-radius: 20px;
  box-shadow: var(--t-hondo-2) var(--t-chicle);
}

.pronto-card:nth-child(4n+2) { box-shadow: var(--t-hondo-2) var(--t-mango); }
.pronto-card:nth-child(4n+3) { box-shadow: var(--t-hondo-2) var(--t-verde); }
.pronto-card:nth-child(4n+4) { box-shadow: var(--t-hondo-2) var(--t-naranja); }

/* Una vitrinita de noche: los dibujos de iconos.js nacieron para el
   chocolate (el bowl blanco desaparece sobre crema). Un sol tenue
   detrás los despega del fondo. */
.pronto-dibujo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 104px;
  margin: 0 0 2px;
  padding: 0;
  background:
    radial-gradient(60% 70% at 50% 58%, rgb(255 201 60 / 0.3), rgb(255 201 60 / 0) 70%),
    var(--t-noche);
  border: var(--t-borde-fino);
  border-radius: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.pronto-dibujo .producto-icono {
  width: 100px;
  height: auto;
  --t-contorno: 1.5px;
  --t-contorno-color: var(--t-blanco-choco);
}

.pronto-dibujo .producto-icono > :nth-child(2) { opacity: 0.5; }

.pronto-dibujo.sin-foto { font-size: 44px; }

.pronto-sello {
  --giro: 7deg;
  position: absolute;
  z-index: 2;
  top: -11px;
  right: -6px;
  font-size: 15px;
  transform: rotate(7deg);
}

.pronto-titulo {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--t-choco);
}

.pronto-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--t-choco-2);
}

.voto-slot { margin-top: auto; padding-top: 4px; }
.voto-slot:empty { display: none; }

@media (min-width: 56.25em) {
  .pronto-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 20px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .pronto-grid::after { content: none; }
  .pronto-grid > .pronto-card { width: auto; }
  .pronto-desliza { display: none; }
  .pronto-titulo-seccion { font-size: 46px; }
  .pronto-dibujo { height: 140px; }
  .pronto-dibujo .producto-icono { width: 128px; }
}



/* ============================================================
   9 · CÓMO FUNCIONA
   Tres pasos en UNA fila, chiquitos: es lo que se lee de pasada, no
   un capítulo. La cabecera es una línea, sin rótulo.
   ============================================================ */

.como { padding-block: var(--t-e5) var(--t-e1); }

.como-cabeza { margin-bottom: var(--t-e4); }

.como-titulo-seccion {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--t-choco);
}

.como-titulo-sub {
  display: block;
  font-family: var(--t-font-cuerpo);
  font-size: 15px;
  font-weight: 700;
  color: var(--t-choco-2);
}

.como-pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

.como-paso {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
  row-gap: 6px;
  padding: 12px 6px 14px;
  text-align: center;
  border-radius: 18px;
}

.como-paso.t-sticker--naranja { box-shadow: var(--t-hondo-2) var(--t-naranja); }
.como-paso.t-sticker--verde   { box-shadow: var(--t-hondo-2) var(--t-verde); transform: rotate(0.8deg); }
.como-paso.t-sticker--rojo    { box-shadow: var(--t-hondo-2) var(--t-rojo); }

.como-num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-family: var(--t-font-chicle);
  font-size: 26px;
  line-height: 1;
  color: var(--t-choco);
  background: var(--t-naranja);
  border: var(--t-borde);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--t-choco);
}

.como-num--verde { color: #fff; background: var(--t-verde-boton); }
.como-num--rojo  { color: #fff; background: var(--t-rojo-boton); }

.como-titulo {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--t-choco);
}

.como-texto {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--t-choco-2);
}

@media (min-width: 56.25em) {
  .como-titulo-sub { display: inline; margin-left: 6px; }
  .como-titulo-sub::before { content: "· "; }
  .como-pasos { gap: 24px; }
  .como-paso { row-gap: 8px; padding: 22px 18px; }
  .como-num { width: 58px; height: 58px; font-size: 34px; }
  .como-titulo { font-size: 22px; }
  .como-texto { font-size: 16px; }
}


/* ============================================================
   10 · SUBÍ DE RANGO  ·  .rangos-seccion.t-noche / .escalera
   Otra franja de noche. Los siete escalones con su kanji en una
   ficha de chocolate blanco; el del socio, encendido en mango con
   su sello. En escritorio es una escalera de verdad: cada escalón
   un poco más arriba que el anterior.
   ============================================================ */

.rangos-seccion {
  margin-top: var(--t-e7);
  padding: var(--t-e6) 0 var(--t-e5);
  background:
    linear-gradient(rgb(30 18 12 / 0.5), rgb(30 18 12 / 0.5)),
    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);
  z-index: 1;
}

.rangos-seccion .seccion-cabeza { margin-bottom: var(--t-e4); }

/* Arriba, el mismo festón de chocolate de la franja de "Lo que viene". */
.rangos-seccion::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;
}

.rangos-bajada { color: var(--t-blanco-choco-2); }

/* En el celular la escalera es una lista apretada (antes cada
   escalón medía el doble): kanji de 40, nombre y umbral en una
   línea, el beneficio corto abajo. */
.escalera {
  display: grid;
  gap: 6px;
  max-width: 620px;
  margin: 0 auto;
  padding: 0;
}

.escalon {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  padding: 6px 12px;
  color: var(--t-blanco-choco);
  background: var(--t-noche-2);
  border: 2px solid var(--t-noche-3);
  border-radius: var(--t-r-2);
}

.escalon-kanji {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--wrd-font-kanji, 'Noto Serif JP', serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--t-noche);
  background: var(--t-blanco-choco);
  border: 2px solid var(--t-noche);
  border-radius: 11px;
  box-shadow: 2px 2px 0 var(--t-naranja);
}

.escalon-nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 0;
  font-family: var(--t-font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--t-blanco-choco);
}

.escalon-umbral {
  font-family: var(--t-font-cuerpo);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--t-mango);
}

.escalon-beneficio {
  margin: 1px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--t-blanco-choco-2);
}

/* Los que el socio ya pasó: la ficha se pinta de naranja. */
.escalon--pasado .escalon-kanji { background: var(--t-naranja); }

/* Donde está el socio: encendido. */
.escalon--tuyo {
  color: var(--t-choco);
  background: var(--t-mango);
  border: 3px solid var(--t-blanco-choco);
  box-shadow: 5px 5px 0 var(--t-naranja);
}

.escalon--tuyo .escalon-nombre { color: var(--t-choco); }
.escalon--tuyo .escalon-umbral { color: var(--t-rojo-boton); }
.escalon--tuyo .escalon-beneficio { color: var(--t-choco-2); }
.escalon--tuyo .escalon-kanji { box-shadow: 3px 3px 0 var(--t-choco); }

.escalon-tuyo {
  --giro: 6deg;
  position: absolute;
  top: -12px;
  right: 10px;
  font-size: 15px;
  transform: rotate(6deg);
}

.escalera-nota {
  max-width: 34ch;
  margin: var(--t-e4) auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  color: var(--t-blanco-choco-2);
}

.escalera-nota:empty { display: none; }

.escalera-cta {
  display: flex;
  width: fit-content;
  margin: 16px auto 0;
}

@media (min-width: 56.25em) {
  .rangos-seccion { padding: 72px 0 40px; }

  .escalera {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
    max-width: none;
    padding-top: 90px;
  }

  .escalon {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    row-gap: 8px;
    min-height: 210px;
    padding: 16px 10px;
    text-align: center;
    /* La escalera: el primer escalón abajo, el séptimo 90px más arriba. */
    transform: translateY(calc((var(--n, 1) - 1) * -15px));
  }

  .escalon-kanji { grid-row: auto; width: 54px; height: 54px; font-size: 30px; border-radius: 14px; box-shadow: 3px 3px 0 var(--t-naranja); }
  .escalon-nombre { font-size: 20px; }
  .escalon-beneficio { font-size: 14px; }
  .escalon-nombre { flex-direction: column; align-items: center; }
}


/* ============================================================
   11 · TRAÉ A ALGUIEN
   ============================================================ */

.invita {
  padding-top: var(--t-e8);
}

.invita-card {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: 30px 18px 20px;
  text-align: center;
  background-color: var(--t-chicle-2);
  background-image: var(--t-chispitas);
  background-size: 160px 160px;
  border-radius: 26px;
  box-shadow: var(--t-hondo-3) var(--t-choco);
}

.invita-pct {
  --giro: 8deg;
  position: absolute;
  top: -24px;
  right: 16px;
  margin: 0;
  padding: 4px 14px 6px;
  font-size: 34px;
  transform: rotate(8deg);
}

.invita-titulo {
  margin: 0 0 10px;
  font-family: var(--t-font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--t-choco);
}

.invita-texto {
  max-width: 32ch;
  margin: 0 auto 18px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--t-choco-2);
}

.invita-btn { max-width: 380px; margin-inline: auto; }


/* 12 · El pie vive en css/gate.css (lo comparten index y premium). */


/* ============================================================
   14 · LOS COMBOS  ·  #promos.franja--crema  (hamburguesa + troncos)
   La estrella de la página: franja de crema con festón, la cabecera
   que dice la regla ("no sale sola"), las tres hamburguesas en
   pestañas para verlas de un vistazo y el carrusel de tarjetas.
   Cada hamburguesa trae su par de colores (--combo-sol-1/2) para el
   sol de su vitrina y su sombra (--combo-acento): verde la sencilla,
   naranja la cheddar, fresa la especial.
   El DOM lo arma js/render.js (crearCombo / pintarPestanas).
   ============================================================ */

.promos.franja--crema {
  padding-block: var(--t-e6) var(--t-e7);
}

.combos-cabeza {
  position: relative;
  margin-bottom: var(--t-e4);
}

.combos-nuevo {
  --giro: -6deg;
  font-size: 18px;
  transform: rotate(-6deg);
}

.combos-titulo {
  margin: var(--t-e2) 0 0;
  font-family: var(--t-font-display);
  font-size: 40px;
  font-weight: 700;
  font-stretch: 110%;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--t-choco);
  text-shadow: 3px 3px 0 var(--t-mango);
}

/* "+ troncos": letras de sticker, relleno de papel y tinta gruesa. */
.combos-titulo-mas {
  display: block;
  margin-top: 2px;
  font-family: var(--t-font-chicle);
  font-size: 46px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--t-papel);
  -webkit-text-stroke: 2.5px var(--t-choco);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--t-naranja);
}

/* La regla del dueño, en un ticket con borde de tijera. */
.combos-regla {
  display: flex;
  align-items: center;
  gap: var(--t-e2);
  margin: var(--t-e3) 0 0;
  padding: var(--t-e2) var(--t-e3);
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--t-choco);
  background: var(--t-papel);
  border: 2px dashed var(--t-choco);
  border-radius: 14px;
}

.combos-regla[hidden] { display: none; }

.combos-regla-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 32px;
}

.combos-regla-ico svg {
  width: 46px;
  height: 46px;
  transform: rotate(-12deg);
}

/* Sin combos la sección es "Promos de la semana": el título vuelve a
   ser una línea y el sello de lo nuevo se va. */
.promos:not(.promos--combos) .combos-nuevo { display: none; }

/* LAS PESTAÑAS: las tres hamburguesas chiquitas, lado a lado. */
.combos-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--t-e2);
  margin-bottom: var(--t-e1);
}

.combos-tabs[hidden] { display: none; }

.combos-tab {
  display: grid;
  justify-items: center;
  gap: 0;
  min-height: 76px;
  padding: var(--t-e1) var(--t-e1) 6px;
  font-family: var(--t-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--t-choco);
  background: var(--t-papel);
  border: var(--t-borde-fino);
  border-radius: var(--t-r-2);
  box-shadow: var(--t-hondo-1) var(--t-choco);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--t-rebote), background-color 140ms ease-out, box-shadow 140ms ease-out;
}

.combos-tab svg {
  width: 56px;
  height: 56px;
  margin-block: -4px -6px;
  --t-contorno: 0px;
}

.combos-tab[aria-current="true"] {
  background: var(--t-mango);
  box-shadow: var(--t-hondo-1) var(--combo-acento, var(--t-naranja));
  transform: translateY(-2px);
}

.combos-tab--sencilla { --combo-acento: var(--t-verde); }
.combos-tab--cheddar  { --combo-acento: var(--t-naranja); }
.combos-tab--especial { --combo-acento: var(--t-rojo); }

/* EL CARRUSEL (≤ 900): .t-carrusel de tienda.css. Arriba deja aire
   para las etiquetas que sobresalen; abajo, para la sombra dura. */
.promo-grid--combos {
  display: flex;
  gap: var(--t-e4);
  padding-block: var(--t-e3) var(--t-e5);
}

.promo-grid--combos > * {
  width: min(84vw, 340px);
}

/* LA TARJETA */
.combo-card {
  --combo-acento: var(--t-naranja);
  --combo-sol-1: var(--t-mango);
  --combo-sol-2: var(--t-naranja-2);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: 26px;
  box-shadow: var(--t-hondo-3) var(--combo-acento);
}

.combo-card--sencilla { --combo-acento: var(--t-verde); --combo-sol-1: var(--t-mango); --combo-sol-2: var(--t-blanco-choco); }
.combo-card--cheddar  { --combo-acento: var(--t-naranja); --combo-sol-1: var(--t-mango); --combo-sol-2: var(--t-naranja-2); }
.combo-card--especial { --combo-acento: var(--t-rojo); --combo-sol-1: var(--t-chicle); --combo-sol-2: var(--t-chicle-2); }

/* La vitrina: un pedacito de la noche con el sol de cartel. */
.combo-vitrina {
  position: relative;
  display: grid;
  place-items: center;
  height: 206px;
  overflow: hidden;
  border-bottom: var(--t-borde);
  border-radius: 23px 23px 0 0;
  background:
    radial-gradient(70% 60% at 50% 55%, var(--t-noche-2) 0%, rgb(58 36 24 / 0) 70%),
    var(--t-noche);
  cursor: pointer;
}

.combo-rayos {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 214px;
  height: 214px;
  margin: -107px 0 0 -107px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--combo-sol-1) 0deg 10deg, var(--combo-sol-2) 10deg 20deg);
  box-shadow: 0 0 0 5px var(--t-noche), 0 0 0 9px var(--combo-sol-1);
  animation: t-gira 50s linear infinite;
}

.combo-dibujo {
  position: relative;
  z-index: 1;
  width: 204px;
  height: 204px;
  max-width: none;
  margin-top: 6px;
  --t-contorno: 2.4px;
  --t-contorno-color: var(--t-blanco-choco);
  --t-icono-sombra: drop-shadow(5px 6px 0 rgb(0 0 0 / 0.45));
  transition: transform 260ms var(--t-rebote);
}

.combo-dibujo--emoji { display: grid; place-items: center; font-size: 96px; }

.combo-card:hover .combo-dibujo { transform: rotate(-3deg) scale(1.04); }

/* "+ 3 troncos": lo que viaja con la hamburguesa, pegado torcido. */
.combo-mas {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: var(--t-e1);
  padding: 2px 10px 3px 4px;
  font-family: var(--t-font-chicle);
  font-size: 17px;
  line-height: 1.1;
  color: var(--t-choco);
  white-space: nowrap;
  background: var(--t-papel);
  border: var(--t-borde-fino);
  border-radius: var(--t-r-1);
  box-shadow: var(--t-hondo-1) var(--combo-sol-1);
  transform: rotate(-5deg);
}

.combo-mas .combo-tronco-dibujos { width: auto; height: 28px; }
.combo-mas .combo-tronco-dibujos svg { width: 30px; height: 30px; margin: -2px -8px -2px 0; }

.combo-etiqueta {
  --giro: -4deg;
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  font-size: 16px;
  transform: rotate(-4deg);
}

.combo-card--cheddar .combo-etiqueta { background: var(--t-naranja); }
.combo-card--especial .combo-etiqueta { background: var(--t-chicle); }

.combo-sin {
  --giro: 6deg;
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  font-size: 16px;
  transform: rotate(6deg);
}

.combo-cuerpo {
  display: grid;
  gap: var(--t-e3);
  padding: var(--t-e4);
}

.combo-titulo {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--t-choco);
}

.combo-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--t-choco-2);
}

/* Lo que trae: una ficha por capa, con la forma y el color de la capa
   (el pan es una cúpula, la carne una medalla, el queso una lámina…). */
.combo-capas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.combo-capa {
  --capa: var(--t-crema-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 10px 3px 6px;
  font-family: var(--t-font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--t-choco);
  background: var(--t-hueso);
  border: var(--t-borde-fino);
  border-radius: 999px;
}

.combo-capa::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--capa);
  border: 2px solid var(--t-choco);
  border-radius: 50%;
}

.combo-capa[data-capa="pan"]        { --capa: var(--t-naranja-2); }
.combo-capa[data-capa="pan"]::before { width: 18px; height: 12px; border-radius: 9px 9px 3px 3px; }
.combo-capa[data-capa="carne"]      { --capa: var(--t-choco-2); }
.combo-capa[data-capa="carne"]::before { width: 18px; height: 10px; border-radius: 6px; }
.combo-capa[data-capa="cheddar"]    { --capa: var(--t-naranja); }
.combo-capa[data-capa="mozzarella"] { --capa: var(--t-blanco-choco); }
.combo-capa[data-capa="cheddar"]::before,
.combo-capa[data-capa="mozzarella"]::before { border-radius: 3px 3px 6px 6px; transform: rotate(-8deg); }
.combo-capa[data-capa="tocineta"]   { --capa: var(--t-rojo-boton); }
.combo-capa[data-capa="tocineta"]::before { width: 18px; height: 8px; border-radius: 4px; transform: rotate(-12deg); }
.combo-capa[data-capa="cebolla"]    { --capa: var(--t-naranja-texto); }
.combo-capa[data-capa="ripio"]      { --capa: var(--t-mango); }
.combo-capa[data-capa="ripio"]::before { width: 16px; height: 6px; border-radius: 3px; transform: rotate(-24deg); }
.combo-capa[data-capa="lechuga"]    { --capa: var(--t-verde); }
.combo-capa[data-capa="tomate"]     { --capa: var(--t-rojo); }

.combo-elige {
  margin: var(--t-e1) 0 0;
  font-family: var(--t-font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--t-choco);
}

/* ¿Con cuántos troncos? Tres fichas gordas con los troncos dibujados.
   La elegida: mango, levantada y con su ✓ (color + forma + posición). */
.combo-troncos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.combo-tronco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  min-width: 0;
  min-height: 98px;
  padding: 6px 4px 8px;
  font-family: var(--t-font-display);
  color: var(--t-choco);
  text-align: center;
  background: var(--t-crema);
  border: var(--t-borde);
  border-radius: var(--t-r-2);
  box-shadow: var(--t-hondo-1) var(--t-choco);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--t-rebote), box-shadow 120ms ease-out, background-color 120ms ease-out;
}

.combo-tronco:hover { background: var(--t-papel); }
.combo-tronco:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--t-choco); }

.combo-tronco--elegido,
.combo-tronco--elegido:hover {
  background: var(--t-mango);
  box-shadow: var(--t-hondo-2) var(--t-naranja);
  transform: translateY(-3px);
}

.combo-tronco--elegido::before {
  content: '✓';
  position: absolute;
  top: -10px;
  left: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--t-verde-boton);
  border: var(--t-borde-fino);
  border-radius: 50%;
}

.combo-tronco[disabled] {
  color: var(--t-choco-3);
  background: var(--t-crema);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.combo-tronco[disabled] .combo-tronco-dibujos { opacity: 0.4; }

/* Los troncos dibujados: 1 grande, 3 en fila, 6 en dos filas. */
.combo-tronco-dibujos {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 72px;
  height: 38px;
}

.combo-tronco-dibujos svg {
  width: 30px;
  height: 30px;
  margin: -6px -5px;
  --t-contorno: 1px;
}

.combo-tronco-dibujos--1 svg { width: 44px; height: 44px; margin: -6px 0; }
.combo-tronco-dibujos--6 svg { width: 26px; height: 26px; margin: -7px -3px; }

.combo-tronco-punto {
  width: 12px;
  height: 8px;
  margin: 1px;
  background: var(--t-choco-2);
  border-radius: 4px;
}

.combo-tronco-n {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--t-choco-2);
}

.combo-tronco[disabled] .combo-tronco-n { color: var(--t-choco-3); }

.combo-tronco-precio {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.combo-tronco-ahorro {
  position: absolute;
  top: -13px;
  right: -6px;
  padding: 1px 6px 2px;
  font-family: var(--t-font-chicle);
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  background: var(--t-verde-boton);
  border: var(--t-borde-fino);
  border-radius: 8px;
  transform: rotate(6deg);
}

.combo-tronco[disabled] .combo-tronco-ahorro { display: none; }

.combo-precio-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 2px;
}

.combo-precio {
  font-family: var(--t-font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--t-choco);
}

.combo-antes {
  font-family: var(--t-font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--t-choco-3);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--t-rojo);
}

.combo-antes[hidden],
.combo-ahorro[hidden] { display: none; }

.combo-ahorro {
  --giro: -4deg;
  font-size: 17px;
}

.combo-btn {
  min-height: 60px;
  font-size: 21px;
}

.combo-nota {
  margin: -2px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--t-choco-2);
}

/* LOS COMBOS PARA DOS: su propio carrusel debajo de las sueltas. La
   vitrina cambia el sol por rayas de chicle y crema (es otra cosa:
   para compartir) y la tarjeta sigue con la sombra de su hamburguesa. */
.promo-grid[hidden],
.combos-par[hidden] { display: none; }

.combos-par { margin-top: var(--t-e5); }

.combos-par-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--t-e2) var(--t-e3);
}

/* El rótulo de chicle, torcido al revés que el de la sección. */
.combos-par-titulo {
  --giro: 1.5deg;
  font-size: 26px;
  transform: rotate(1.5deg);
}

.combos-par-bajada {
  flex-basis: 100%;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--t-choco-2);
}

.combo-card--par { --combo-sol-1: var(--t-chicle); --combo-sol-2: var(--t-blanco-choco); }
.combo-card--par .combo-vitrina { height: 220px; }
.combo-card--par .combo-rayos {
  width: 250px;
  height: 250px;
  margin: -125px 0 0 -125px;
}
.combo-card--par .combo-dibujo { width: 232px; height: 232px; margin-top: 0; --t-contorno: 2px; }
.combo-card--par .combo-etiqueta { background: var(--t-chicle); }

.combo-capa[data-capa="hamburguesa"] { --capa: var(--t-naranja-2); }
.combo-capa[data-capa="hamburguesa"]::before { width: 18px; height: 14px; border-radius: 9px 9px 4px 4px; box-shadow: inset 0 -4px 0 var(--t-choco-2); }
.combo-capa[data-capa="papas"] { --capa: var(--t-mango); }
.combo-capa[data-capa="papas"]::before { width: 8px; height: 18px; border-radius: 3px; transform: rotate(10deg); }
.combo-capa[data-capa="gaseosa"] { --capa: var(--t-noche-2); }
.combo-capa[data-capa="gaseosa"]::before { width: 10px; height: 20px; border-radius: 4px 4px 3px 3px; box-shadow: inset 0 -6px 0 var(--t-rojo-boton); }

.combo-receta {
  margin: -4px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--t-choco-2);
}

/* SIN TRONCOS (o agotada): la tarjeta se queda, apagada y con su
   sello; el botón contesta en vez de abrir el pedido. */
.combo-card--apagado { box-shadow: var(--t-hondo-3) var(--t-crema-2); }
.combo-card--apagado .combo-vitrina > :not(.combo-sin) { filter: grayscale(0.8); }
.combo-card--apagado .combo-precio { color: var(--t-choco-3); }
.combo-card--apagado .combo-nota { color: var(--t-rojo-boton); }

/* ≥ 900: las tres a la vista, en grilla; las pestañas ya no hacen falta. */
@media (min-width: 56.25em) {
  .combos-cabeza { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: var(--t-e6); }
  .combos-nuevo { grid-column: 1; justify-self: start; }
  .combos-titulo { grid-column: 1; font-size: 56px; }
  .combos-titulo-mas { font-size: 62px; }
  .combos-regla { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: start; max-width: 30ch; font-size: 18px; }
  .combos-tabs { display: none; }

  .promo-grid--combos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--t-e5);
    overflow: visible;
    margin-inline: 0;
    padding: var(--t-e4) 0 var(--t-e2);
  }
  .promo-grid--combos::after { content: none; }
  .promo-grid--combos > * { width: auto; }
  .combo-vitrina { height: 236px; }
  .combo-rayos { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .combo-dibujo { width: 228px; height: 228px; }
}


/* ============================================================
   15 · LA BARRA DE TU PEDIDO  ·  #pedido-barra
   Pegada abajo, de chocolate, cuando hay un pedido en curso y el hero
   (donde vive la tira) ya quedó arriba. La pinta js/mis-pedidos.js;
   con el modal o "Mis pedidos" abiertos se aparta.
   ============================================================ */

.pedido-barra {
  position: fixed;
  z-index: 45;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: var(--t-e3);
  max-width: 520px;
  min-height: 58px;
  margin-inline: auto;
  padding: 8px 10px 8px 14px;
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  color: var(--t-blanco-choco);
  background: var(--t-choco);
  border: 3px solid var(--t-choco);
  border-radius: 18px;
  box-shadow: var(--t-hondo-2) var(--t-naranja);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms var(--t-rebote), opacity 160ms ease-out;
}

.pedido-barra[hidden] { display: none; }

.pedido-barra:active { box-shadow: 1px 1px 0 var(--t-naranja); }

.pedido-barra--quieta {
  opacity: 0;
  transform: translateY(160%);
  pointer-events: none;
}

body:has(#modal-root > *) .pedido-barra,
body:has(#mis-pedidos-root > *) .pedido-barra,
body:has(#gate:not([hidden])) .pedido-barra { display: none; }

.pedido-barra-punto {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px var(--t-blanco-choco);
}

.pedido-barra-texto {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pedido-barra-total {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--t-mango);
}

.pedido-barra-ver {
  flex: none;
  padding: 6px 12px;
  font-size: 15px;
  color: var(--t-choco);
  background: var(--t-naranja);
  border: 2px solid var(--t-blanco-choco);
  border-radius: 12px;
}


/* ============================================================
   13 · MOVIMIENTO QUIETO
   Todo lo que se mueve acá tiene su estado final escrito como valor
   estático: con movimiento reducido la página es la misma, quieta.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .hero-rayos,
  .hero-producto,
  .hero-precio,
  .hero-combo,
  .combo-rayos { animation: none !important; }

  .producto-card .producto-icono,
  .presentacion,
  .combo-dibujo,
  .combo-tronco,
  .combos-tab,
  .pedido-barra { transition: none; }

  .producto-card:hover .producto-icono { transform: rotate(-8deg); }
  .combo-card:hover .combo-dibujo { transform: none; }
}