/* =========================================================
   La Botana Tía Cleme — Estilo scrapbook / hand-drawn
   Paleta inspirada en el logo: papel kraft, naranja churrito,
   amarillo papa, rojo etiqueta y crema de bolsa de papel.
   ========================================================= */

:root {
  --cream:        #FBF3E2;
  --cream-soft:   #F6E9CB;
  --paper:        #FFFCF3;
  --kraft:        #C8956A;
  --kraft-dark:   #8B6F47;
  --orange:       #F0944A;
  --orange-deep:  #E0732A;
  --orange-glow:  #FFB36B;
  --yellow:       #F5D547;
  --yellow-soft:  #FBE89A;
  --red:          #D63B36;
  --red-dark:     #A52A26;
  --ink:          #2A1E16;
  --ink-soft:     #4A3528;
  --tape:         rgba(217, 184, 132, 0.55);
  --shadow-soft:  0 12px 28px -12px rgba(80, 55, 30, 0.35);
  --shadow-deep:  0 30px 60px -20px rgba(80, 55, 30, 0.45);
  --easing:       cubic-bezier(0.65, 0.05, 0.36, 1);

  /* === Cartulina kraft muy clara (para todos los cards de papel) === */
  --card-paper:        #F6F1E0;
  --card-paper-soft:   #FAF6E8;
  --card-fiber:        rgba(70, 55, 35, 0.07);
  --card-fiber-soft:   rgba(70, 55, 35, 0.035);
  --card-border:       rgba(120, 105, 75, 0.22);

  /* Textura de arrugas/manchitas aleatorias (SVG turbulence inline) */
  --card-wrinkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.014' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.27 0 0 0 0 0.21 0 0 0 0 0.13 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Lenis maneja el smooth scroll — no usamos scroll-behavior nativo (chocan) */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

html, body { background: var(--cream); }

body {
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  font-size: 17px;
  letter-spacing: 0.01em;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--orange); color: var(--paper); }

/* === Paper grain overlay (estático, sin blend) === */
.paper-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.18;
  background-image:
    radial-gradient(rgba(120, 80, 40, 0.5) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* === Background canvas (3D snacks) === */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* =================== NAV =================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 48px;
  background: rgba(251, 243, 226, 0.92);
  border-bottom: 1px dashed rgba(139, 111, 71, 0.25);
  transition: padding 0.3s var(--easing);
}
.nav.scrolled { padding: 12px 48px; box-shadow: 0 6px 20px -10px rgba(80, 55, 30, 0.25); }

.nav-logo {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Caveat', cursive;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}
.nav-logo img {
  width: 48px; height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(80,40,15,0.18));
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 8px;
  align-items: center;
}
.nav-links a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  transition: background 0.25s, color 0.25s;
  position: relative;
}
.nav-links a:not(.nav-cta):hover { background: rgba(217, 184, 132, 0.35); }

.nav-cta {
  background: var(--ink);
  color: var(--paper) !important;
  font-weight: 600;
  padding: 10px 20px !important;
  transition: transform 0.25s var(--easing), background 0.25s;
}
.nav-cta:hover { background: var(--red); transform: translateY(-2px) rotate(-1deg); }

@media (max-width: 720px) {
  .nav { padding: 14px 20px; }
  .nav-logo span { display: none; }
  .nav-links { gap: 0; }
  .nav-links li:not(:last-child) { display: none; }
}

/* =================== HERO =================== */
.hero {
  position: relative;
  z-index: 10;       /* > marquee (3) y productos (2) — para que el snack pineado
                        que viaja desde aquí pueda pasar encima de esos elementos */
  min-height: 100vh;
  padding: 140px 48px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* OJO: sin `perspective` aquí — crearía un containing block que clipea
     position:fixed (lo necesario para el pin del cluster). La perspectiva
     vive en .hero-snack-cluster. */
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
  max-width: 1400px;
  width: 100%;
  position: relative;
  z-index: 5;
}

.hero-text { position: relative; z-index: 6; }

/* === Capas parallax del hero (mouse-driven) === */
.px-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
}

/* Blobs sin filter:blur (carísimo al scroll). Usamos radial-gradient con bordes suaves. */
.hero-blob {
  position: absolute;
  border-radius: 50%;
}
.blob-orange {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--orange-glow) 0%, rgba(255,179,107,0.5) 30%, rgba(255,179,107,0) 65%);
  top: -180px; right: -160px;
  opacity: 0.85;
}
.blob-yellow {
  width: 460px; height: 460px;
  background: radial-gradient(circle, var(--yellow) 0%, rgba(245,213,71,0.45) 30%, rgba(245,213,71,0) 65%);
  bottom: -130px; left: -120px;
  opacity: 0.7;
}

.hero-doodle {
  position: absolute;
  font-family: 'Caveat', cursive;
  color: var(--red);
  opacity: 0.7;
  font-size: 32px;
}
.doodle-1 { top: 18%; left: 8%; font-size: 42px; color: var(--orange-deep); }
.doodle-2 { top: 70%; left: 12%; font-size: 28px; color: var(--red); }
.doodle-3 { top: 25%; right: 6%; font-size: 36px; color: var(--kraft-dark); }

.hero-eyebrow {
  font-family: 'Kalam', cursive;
  color: var(--kraft-dark);
  font-size: 18px;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  transform: rotate(-2deg);
  display: inline-block;
}

.hero-title {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(56px, 9vw, 130px);
  line-height: 0.92;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}
.hero-title .word {
  display: inline-block;
  margin-right: 0.18em;
  position: relative;
}
.hero-title .handwritten {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--kraft-dark);
  transform: rotate(-3deg);
  font-size: 0.85em;
  margin: 0 0.1em;
}

.hero-title .red-stamp {
  position: relative;
  color: var(--paper);
  padding: 0.05em 0.2em;
  z-index: 1;
  transform: rotate(-2deg);
}
.hero-title .red-stamp .stamp-bg {
  position: absolute;
  inset: 0.05em -0.08em;
  background: var(--red);
  border-radius: 8px;
  z-index: -1;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.12),
    0 6px 0 var(--red-dark);
  transform: skew(-3deg, -1deg);
}

.hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-soft);
  max-width: 460px;
  margin-bottom: 36px;
  line-height: 1.65;
}
.hero-sub strong { color: var(--red); font-weight: 700; }

.hero-ctas {
  display: flex; gap: 14px;
  flex-wrap: wrap;
}

.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: transform 0.3s var(--easing), box-shadow 0.3s, background 0.25s;
  position: relative;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 6px 0 #000, 0 14px 24px -10px rgba(0,0,0,0.4);
}
.btn-primary:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 9px 0 #000, 0 22px 32px -12px rgba(0,0,0,0.45);
  background: var(--red);
}
.btn-primary:active { transform: translateY(2px); box-shadow: 0 3px 0 #000; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px dashed var(--kraft);
}
.btn-ghost:hover {
  background: var(--cream-soft);
  transform: rotate(1deg);
}

/* === Hero logo stage: parallax 3D real con perspectiva === */
.hero-logo-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  justify-self: end;
  aspect-ratio: 1 / 1;
  /* OJO: sin perspective ni transform-style preserve-3d aquí — crearían un
     containing block para fixed, rompiendo el pin del .travel-snacks. */
  z-index: 5;
}

/* === Travel snacks (hero) y pin snacks (productos) — centrados clásicos === */
.travel-snacks, .pin-snacks {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Cuando .travel-snacks está pineada y viaja, debe ir encima de marquee, etc. */
.travel-snacks {
  z-index: 60;
  pointer-events: none; /* decorativo: no bloquea clicks debajo */
}
.travel-snack, .pin-snack {
  position: absolute;
  inset: 0;
  margin: auto;            /* centrado clásico, sin transforms */
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter:
    drop-shadow(0 24px 30px rgba(80, 40, 15, 0.35))
    drop-shadow(0 8px 12px rgba(80, 40, 15, 0.20));
  opacity: 0;
  will-change: opacity;
}
.travel-snack[data-i="0"], .pin-snack[data-i="0"] { opacity: 1; }

/* Tape corners */
.tape {
  position: absolute;
  width: 80px; height: 22px;
  background: var(--tape);
  border: 1px solid rgba(160, 120, 70, 0.25);
  z-index: 4;
}
.tape::before, .tape::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 6px;
  background-image:
    linear-gradient(45deg, transparent 33%, rgba(0,0,0,0.05) 33% 66%, transparent 66%);
  background-size: 6px 6px;
}
.tape::before { left: 0; }
.tape::after { right: 0; }
.tape-tl { top: -10px; left: -20px; transform: rotate(-32deg); }
.tape-tr { top: -10px; right: -20px; transform: rotate(34deg); }
.tape-bl { bottom: -10px; left: -20px; transform: rotate(32deg); }
.tape-br { bottom: -10px; right: -20px; transform: rotate(-32deg); }

/* Cintas interactivas (click para despegar) */
.tape-clickable {
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.25s var(--easing), filter 0.25s;
}
.tape-clickable:hover {
  filter: brightness(1.08);
}
.tape-clickable.tape-tl:hover,
.tape-clickable.tape-bl:hover { transform: rotate(-28deg) scale(1.06); }
.tape-clickable.tape-tr:hover,
.tape-clickable.tape-br:hover { transform: rotate(30deg) scale(1.06); }
.tape-clickable:focus-visible {
  outline: 2px dashed var(--red);
  outline-offset: 3px;
}
.tape-clickable.peeled { pointer-events: none; cursor: default; }

.sticky-note {
  position: absolute;
  background: var(--yellow-soft);
  padding: 16px 22px;
  font-family: 'Patrick Hand', cursive;
  font-size: 18px;
  text-align: center;
  box-shadow:
    6px 10px 22px -4px rgba(80, 55, 30, 0.45),
    0 30px 60px -20px rgba(80, 55, 30, 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
  z-index: 5;
  will-change: transform;
}
.sticky-note span { color: var(--ink-soft); font-size: 15px; }
.sticky-note strong { color: var(--ink); font-size: 20px; font-weight: 400; font-family: 'Patrick Hand', cursive; }
.hero-note-1 {
  top: -34px; right: 30px;
  background: var(--yellow);
  transform: rotate(6deg) translateZ(120px);
}
.hero-note-2 {
  bottom: 24px; left: -42px;
  transform: rotate(-8deg) translateZ(150px);
}

/* Floating washi tapes */
.washi-tape {
  position: absolute;
  background: var(--orange-glow);
  opacity: 0.6;
  height: 36px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 8px,
      rgba(255, 255, 255, 0.25) 8px 14px
    );
}
.washi-1 { width: 360px; top: 130px; left: -50px; transform: rotate(-10deg); }
.washi-2 { width: 280px; bottom: 80px; right: -40px; transform: rotate(8deg); background: var(--red); opacity: 0.4; }

.scroll-cue {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'Caveat', cursive;
  color: var(--kraft-dark);
  font-size: 18px;
}
.scroll-line {
  width: 2px; height: 40px;
  background: var(--kraft);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  animation: scroll-bounce 2s var(--easing) infinite;
}
@keyframes scroll-bounce {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-logo-stage { max-width: 560px; }
}

@media (max-width: 920px) {
  .hero { padding: 120px 24px 60px; }
  .hero-inner { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .hero-eyebrow, .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-logo-stage { justify-self: center; max-width: 440px; }
}

/* =================== MARQUEE =================== */
.marquee {
  position: relative;
  z-index: 3;
  background: var(--ink);
  color: var(--paper);
  padding: 22px 0;
  overflow: hidden;
  border-top: 4px solid var(--orange);
  border-bottom: 4px solid var(--orange);
  transform: rotate(-1.5deg);
  margin: 60px -2vw;
  box-shadow: var(--shadow-deep);
}
.marquee-track {
  display: inline-flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  font-family: 'Fredoka', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.marquee-track span:nth-child(odd) { color: var(--yellow); }
.marquee-track span:nth-child(even) { color: var(--orange-glow); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* =================== SHARED SECTION HEAD =================== */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 80px;
  position: relative;
  z-index: 2;
}
.kicker {
  font-family: 'Caveat', cursive;
  color: var(--orange-deep);
  font-size: 24px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.section-head h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.section-head h2 em {
  font-style: italic;
  font-family: 'Caveat', cursive;
  color: var(--red);
  font-weight: 700;
  font-size: 1.05em;
}
.lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto;
}

/* =================== PRODUCTOS · SCROLL PIN PARALLAX =================== */
.products-pin {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
}
.pin-stage {
  position: relative;
  height: 100vh;
  min-height: 700px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* === Capas parallax (cada una se mueve a velocidad distinta con scroll) === */
.pin-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.pin-blob {
  position: absolute;
  border-radius: 50%;
}
.blob-a {
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(255,179,107,0.55) 0%, rgba(255,179,107,0) 65%);
  top: -180px; left: -160px;
}
.blob-b {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(245,213,71,0.5) 0%, rgba(245,213,71,0) 65%);
  bottom: -180px; right: -120px;
}
.blob-c {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(214,59,54,0.18) 0%, rgba(214,59,54,0) 65%);
  top: 30%; right: 20%;
}

.pin-doodles { z-index: 5; }
.px-doodle {
  position: absolute;
  font-family: 'Caveat', cursive;
  color: var(--orange-deep);
  opacity: 0.55;
  font-weight: 700;
  will-change: transform;
}
.d1 { top: 18%;  left: 8%;  font-size: 38px; color: var(--red); }
.d2 { top: 32%;  left: 4%;  font-size: 22px; color: var(--ink); }
.d3 { top: 70%;  left: 14%; font-size: 44px; color: var(--orange-deep); }
.d4 { top: 22%;  right: 6%; font-size: 26px; color: var(--kraft-dark); }
.d5 { top: 60%;  right: 4%; font-size: 36px; color: var(--red); }
.d6 { top: 80%;  right: 18%; font-size: 24px; color: var(--ink); }

/* === Header del bloque === */
.pin-head {
  position: relative;
  z-index: 6;
  padding: 110px 48px 0;
  text-align: center;
}
.pin-head .kicker { color: var(--orange-deep); }
.pin-head h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.pin-head h2 em {
  font-style: normal;
  font-family: 'Caveat', cursive;
  color: var(--red);
}

/* === Contenido principal: bolsa + info === */
.pin-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 20px 80px 60px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 4;
}

/* Wrap solo para alinear: las botanas flotan libres */
.pin-bag-wrap {
  position: relative;
  width: 100%;
  height: 70vh;
  max-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* Stage de las botanas */
.pin-snacks {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pin-snack {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88%;
  max-width: 540px;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(80,40,15,0.4));
  will-change: transform, opacity;
}

/* === Panel de info === */
.pin-info-stack {
  position: relative;
  height: 470px;
  display: flex;
  align-items: center;
}
.catalog-empty {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 36px 28px;
  background: rgba(255, 248, 234, 0.85);
  border: 2px dashed var(--orange-deep);
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  margin: 30px auto;
  box-sizing: border-box;
  animation: catalog-empty-pop 0.5s var(--easing) both;
}
.catalog-empty[hidden] { display: none !important; }
.catalog-empty-logo {
  width: 140px;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(240,148,74,0.25));
  animation: catalog-empty-bob 2.4s ease-in-out infinite;
}
.catalog-empty h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 28px;
  color: var(--red);
  margin: 0;
}
.catalog-empty .catalog-empty-msg {
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  color: var(--ink);
  margin: 0;
}
.catalog-empty .catalog-empty-hint {
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 360px;
}
@keyframes catalog-empty-pop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes catalog-empty-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
.pin-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  will-change: transform, opacity;
  pointer-events: none;
}
.pin-info.is-active { pointer-events: auto; }
.info-num {
  font-family: 'Caveat', cursive;
  color: var(--orange-deep);
  font-size: 26px;
  letter-spacing: 0.05em;
}
.pin-info h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.pin-info p {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 460px;
}
.info-foot {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 2px dashed rgba(139, 111, 71, 0.4);
  max-width: 360px;
}
.info-foot .price {
  font-family: 'Fredoka', sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
}
.info-foot .weight {
  font-family: 'Patrick Hand', cursive;
  font-size: 18px;
  color: var(--ink-soft);
}

/* === Indicador de progreso === */
.pin-progress {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 7;
}
.progress-dot {
  width: 36px; height: 6px;
  border-radius: 3px;
  background: rgba(139, 111, 71, 0.3);
  transition: background 0.4s var(--easing), width 0.4s var(--easing);
}
.progress-dot.active {
  background: var(--red);
  width: 60px;
}

@media (max-width: 920px) {
  .pin-content {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 24px 60px;
  }
  .pin-bag-wrap { height: 36vh; max-height: 360px; }
  .pin-info-stack { height: 280px; }
  .pin-info { gap: 8px; justify-content: flex-start; padding-top: 4px; }
  .pin-info h3 { font-size: clamp(32px, 8vw, 50px); }
  .pin-info p { font-size: 14px; max-width: none; line-height: 1.45; }
  .pin-info .info-num { font-size: 20px; }
  .info-foot { margin-top: 4px; padding-top: 12px; gap: 16px; max-width: none; align-items: center; }
  .info-foot .price { font-size: 36px; }
  .info-foot .weight { font-size: 16px; }
  .pin-info .btn-add {
    margin-top: 10px;
    padding: 10px 18px;
    font-size: 14px;
    align-self: stretch;
    justify-content: center;
  }
  .pin-head { padding: 80px 24px 0; }
}


/* =================== HISTORIA =================== */
.story {
  position: relative;
  z-index: 2;
  padding: 140px 48px;
  background:
    radial-gradient(ellipse at top, rgba(245, 213, 71, 0.15), transparent 60%),
    var(--cream);
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.floating-shape {
  position: absolute;
  border-radius: 50%;
}
.shape-a {
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--orange-glow) 0%, rgba(255,179,107,0) 65%);
  top: 5%; left: -140px;
  opacity: 0.6;
}
.shape-b {
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--yellow) 0%, rgba(245,213,71,0) 65%);
  bottom: 10%; right: -100px;
  opacity: 0.55;
}
.shape-c {
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--red) 0%, rgba(214,59,54,0) 65%);
  top: 40%; left: 40%;
  opacity: 0.25;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.story-text .kicker { color: var(--orange-deep); }
.story-text h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.story-text h2 em {
  font-style: normal;
  font-family: 'Caveat', cursive;
  color: var(--red);
  font-weight: 700;
}
.story-text p {
  color: var(--ink-soft);
  margin-bottom: 18px;
  line-height: 1.75;
}

.story-points {
  list-style: none;
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.story-points li {
  background: var(--paper);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-soft);
}
.story-points li span {
  width: 22px; height: 22px;
  background: var(--orange);
  color: var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}

/* Polaroids */
.story-visual {
  position: relative;
  height: 500px;
  perspective: 1000px;
}
.polaroid {
  position: absolute;
  background: var(--paper);
  padding: 14px 14px 38px;
  box-shadow: var(--shadow-deep);
  border-radius: 4px;
  width: 220px;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--easing), z-index 0s;
  cursor: pointer;
}
.polaroid:hover { z-index: 10; }
.polaroid-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  font-size: 80px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.polaroid-img.p1 { background: linear-gradient(135deg, #F0C28A, var(--kraft)); }
.polaroid-img.p2 { background: linear-gradient(135deg, var(--orange-glow), var(--red)); }
.polaroid-img.p3 { background: linear-gradient(135deg, #FF9477, var(--red-dark)); }
.polaroid p {
  font-family: 'Caveat', cursive;
  text-align: center;
  font-size: 22px;
  color: var(--ink);
}
.polaroid-1 { top: 0; left: 30%; transform: rotate(-8deg); z-index: 3; }
.polaroid-2 { top: 50px; left: 0; transform: rotate(6deg); z-index: 2; }
.polaroid-3 { bottom: 0; right: 0; transform: rotate(-4deg); z-index: 4; }

@media (max-width: 880px) {
  .story-grid { grid-template-columns: 1fr; gap: 60px; }
  .story-visual { height: 600px; }
  .polaroid-1 { left: 10%; }
  .polaroid-2 { left: 35%; }
  .polaroid-3 { right: 10%; }
}

/* =================== CÓMO PEDIR =================== */
.howto {
  position: relative;
  z-index: 2;
  padding: 120px 48px;
}
.steps {
  display: flex;
  align-items: stretch;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.step {
  flex: 1 1 240px;
  background: var(--paper);
  padding: 36px 28px;
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: transform 0.3s var(--easing), box-shadow 0.3s;
  border-top: 6px solid var(--orange);
}
.step:nth-child(1) { transform: rotate(-1.5deg); }
.step:nth-child(3) { border-top-color: var(--yellow); transform: rotate(1deg); }
.step:nth-child(5) { border-top-color: var(--red); transform: rotate(-0.5deg); }
.step:hover { transform: translateY(-8px) rotate(0); box-shadow: var(--shadow-deep); }

.step-num {
  font-family: 'Fredoka', sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--cream-soft);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}
.step h3 {
  font-size: 22px;
  margin-bottom: 8px;
  font-weight: 600;
}
.step p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}
.step p strong { color: var(--red); }

.step-arrow {
  font-family: 'Caveat', cursive;
  font-size: 60px;
  color: var(--kraft);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transform: rotate(-8deg);
}
@media (max-width: 880px) {
  .step-arrow { transform: rotate(82deg); }
}

/* =================== CONTACTO =================== */
.contact {
  position: relative;
  z-index: 2;
  padding: 120px 48px;
  background:
    radial-gradient(ellipse at center, rgba(240, 148, 74, 0.18), transparent 70%);
}
.contact-card {
  max-width: 720px;
  margin: 0 auto;
  /* Cartulina kraft con textura de fibra + arrugas + borde roto aleatorio */
  background-color: var(--card-paper);
  background-image:
    var(--card-wrinkle),
    radial-gradient(var(--card-fiber) 1px, transparent 1.5px),
    radial-gradient(var(--card-fiber-soft) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 35%);
  background-size: 380px 380px, 7px 7px, 11px 11px, 100% 100%;
  background-position: 0 0, 0 0, 3px 4px, 0 0;
  padding: 64px 48px;
  border-radius: 8px;
  border: 1px dashed var(--card-border);
  box-shadow:
    var(--shadow-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(60, 45, 25, 0.06);
  text-align: center;
  position: relative;
  transform: rotate(-0.5deg);
  transform-style: preserve-3d;
}
.contact-card .kicker { color: var(--orange-deep); }
.contact-card h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  margin-bottom: 36px;
  font-weight: 700;
}
.contact-card h2 em {
  font-style: normal;
  font-family: 'Caveat', cursive;
  color: var(--red);
  font-weight: 700;
}

.phone-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 24px;
  margin-bottom: 32px;
  /* Cartulina ligeramente más cálida + arrugas */
  background-color: #ECE4CC;
  background-image:
    var(--card-wrinkle),
    radial-gradient(rgba(70, 55, 35, 0.08) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
  background-size: 280px 280px, 6px 6px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  border-radius: 8px;
  border: 2px dashed var(--kraft-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(60, 45, 25, 0.08);
  transform: translateZ(20px);
  transition: transform 0.3s var(--easing);
}
.phone-display:hover { transform: translateZ(20px) scale(1.02) rotate(-0.5deg); }
.phone-label {
  font-family: 'Caveat', cursive;
  color: var(--kraft-dark);
  font-size: 22px;
}
.phone-number {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.contact-options {
  display: flex; gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.contact-note {
  font-family: 'Patrick Hand', cursive;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.7;
}
.contact-note small { font-size: 14px; opacity: 0.85; }

/* === Info de contacto: horario y dirección estilo "cuaderno" === */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 28px 0 18px;
  text-align: left;
}
.info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px dashed var(--card-border);
}
.info-row:last-child { border-bottom: none; }

.info-icon { font-size: 32px; flex-shrink: 0; opacity: 0.95; }
.info-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.info-label {
  font-family: 'Caveat', cursive;
  color: var(--orange-deep);
  font-size: 24px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.info-value {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-top: 6px;
  line-height: 1.25;
}
.info-sub {
  font-family: 'Patrick Hand', cursive;
  color: var(--ink-soft);
  font-size: 18px;
  margin-top: 3px;
  line-height: 1.2;
}
.info-cta {
  flex-shrink: 0;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--red);
  padding: 10px 18px;
  border: 1.5px dashed var(--red);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.info-cta:hover { background: var(--red); color: var(--paper); }

@media (max-width: 480px) {
  .info-row { flex-wrap: wrap; }
  .info-cta { margin-top: 4px; }
}

/* === Mapa estilo "croquis pegado al card" === */
.contact-map {
  position: relative;
  margin-top: 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 4px solid var(--paper);
  outline: 1px dashed var(--kraft-dark);
  outline-offset: -4px;
  box-shadow:
    0 18px 36px -12px rgba(80, 40, 15, 0.5),
    0 6px 14px -4px rgba(80, 40, 15, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  background: var(--card-paper);
  isolation: isolate;
  transform: rotate(-0.4deg);
  transition: transform 0.4s var(--easing);
}
.contact-map:hover { transform: rotate(0deg) scale(1.005); }

/* Cintas decorativas que sostienen el mapa al card */
.contact-map-tape {
  position: absolute;
  width: 70px;
  height: 22px;
  border: 1px solid rgba(160, 120, 70, 0.3);
  z-index: 6;
  opacity: 0.9;
  background-image: repeating-linear-gradient(45deg,
    transparent 0 8px, rgba(255,255,255,0.3) 8px 14px);
}
.contact-map-tape-l { top: -10px; left: 16%; transform: rotate(-6deg); background-color: var(--yellow); }
.contact-map-tape-r { top: -10px; right: 16%; transform: rotate(6deg);  background-color: var(--orange-glow); }
.contact-map iframe {
  display: block;
  /* Sepia ligero + saturación alta + contraste = colores cálidos vivos */
  filter:
    sepia(0.18)
    saturate(1.15)
    contrast(1.1)
    brightness(1.04);
}
/* Capa muy sutil de fibra de papel encima del mapa */
.contact-map::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(180, 130, 70, 0.12) 1px, transparent 1.5px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
  z-index: 2;
}
/* Tinte cálido sutil — solo une el mapa con el resto */
.contact-map::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(240, 148, 74, 0.08);
  mix-blend-mode: overlay;
  z-index: 3;
}

/* =================== FOOTER =================== */
.footer {
  position: relative;
  z-index: 2;
  background: var(--ink);
  color: var(--cream);
  padding: 60px 48px 32px;
  text-align: center;
}
.footer-logo {
  width: 90px; height: 90px;
  margin: 0 auto 18px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4));
}
.footer-name {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  margin-bottom: 6px;
  color: var(--paper);
}
.footer-tag {
  font-family: 'Patrick Hand', cursive;
  color: var(--kraft);
  margin-bottom: 36px;
}
.footer-copy {
  font-size: 13px;
  color: rgba(251, 243, 226, 0.5);
  border-top: 1px dashed rgba(251, 243, 226, 0.15);
  padding-top: 24px;
  max-width: 600px;
  margin: 0 auto;
}

/* =================== REVEAL ANIMATIONS =================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
}
[data-word] {
  opacity: 0;
  transform: translateY(60px) rotate(8deg);
  display: inline-block;
}

/* =================== CARRITO =================== */
/* Botón "Agregar" en cada producto */
.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  background: var(--orange);
  color: var(--paper);
  border: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--orange-deep), 0 12px 22px -10px rgba(80,40,15,0.45);
  transition: transform 0.25s var(--easing), box-shadow 0.25s, background 0.25s;
  align-self: flex-start;
}
.btn-add:hover {
  transform: translateY(-3px) rotate(-1deg);
  background: var(--red);
  box-shadow: 0 8px 0 var(--red-dark), 0 18px 28px -12px rgba(80,40,15,0.5);
}
.btn-add:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--orange-deep); }
.btn-add svg { transition: transform 0.3s var(--easing); }
.btn-add:hover svg { transform: rotate(90deg); }

/* FAB */
.cart-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 0 #000, 0 18px 30px -10px rgba(0,0,0,0.45);
  transition: transform 0.3s var(--easing), background 0.25s, box-shadow 0.3s;
}
.cart-fab:hover {
  transform: translateY(-3px) rotate(-4deg);
  background: var(--red);
  box-shadow: 0 11px 0 var(--red-dark), 0 22px 34px -12px rgba(80,40,15,0.5);
}
.cart-fab:active { transform: translateY(2px); box-shadow: 0 4px 0 #000; }
.cart-fab-count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 26px; height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.cart-fab.bump { animation: cart-bump 0.5s var(--easing); }
@keyframes cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18) rotate(-6deg); }
  100% { transform: scale(1); }
}

/* Overlay */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 30, 22, 0.45);
  backdrop-filter: blur(2px);
  z-index: 300;
  opacity: 0;
  transition: opacity 0.3s var(--easing);
}
.cart-overlay.open { opacity: 1; }

/* Drawer */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 400;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.45s var(--easing);
  box-shadow: -20px 0 50px -20px rgba(80,55,30,0.4);
  background-image:
    radial-gradient(rgba(120,80,40,0.08) 1px, transparent 1px);
  background-size: 4px 4px;
}
.cart-drawer.open { transform: translateX(0); }

.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 28px 18px;
  border-bottom: 2px dashed rgba(139,111,71,0.3);
}
.cart-head .kicker { font-size: 18px; margin-bottom: 2px; }
.cart-head h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cart-close {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.25s var(--easing), background 0.25s, color 0.25s;
}
.cart-close:hover {
  background: var(--ink);
  color: var(--paper);
  transform: rotate(90deg);
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 28px;
}

.cart-empty {
  text-align: center;
  padding: 40px 12px;
  color: var(--ink-soft);
  font-family: 'Patrick Hand', cursive;
}
.cart-empty-art {
  display: block;
  margin: 0 auto 12px;
  filter: drop-shadow(0 6px 10px rgba(80,40,15,0.2));
  transform: rotate(-4deg);
}
.cart-empty p { font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.cart-empty span { font-size: 16px; }
.cart-empty.hidden { display: none; }

.cart-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  /* Cartulina kraft grisácea + arrugas */
  background-color: var(--card-paper);
  background-image:
    var(--card-wrinkle),
    radial-gradient(var(--card-fiber) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
  background-size: 220px 220px, 6px 6px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  border-radius: 8px;
  border: 1px dashed var(--card-border);
  box-shadow:
    0 3px 8px -2px rgba(60, 45, 25, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(60, 45, 25, 0.06);
  position: relative;
  transition: transform 0.3s var(--easing), opacity 0.3s, box-shadow 0.3s;
}
.cart-item:hover {
  box-shadow:
    0 6px 14px -3px rgba(60, 45, 25, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.cart-item.removing { opacity: 0; transform: translateX(40px); }
.cart-item img {
  width: 64px; height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(80,40,15,0.25));
}
.cart-item-info h4 {
  font-family: 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.cart-item-info .unit-price {
  font-family: 'Patrick Hand', cursive;
  color: var(--ink-soft);
  font-size: 15px;
}
.cart-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.cart-item-total {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  color: var(--red);
  font-size: 18px;
}
.qty-ctrl {
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  border: 1.5px solid var(--kraft);
  border-radius: 999px;
  overflow: hidden;
}
.qty-ctrl button {
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
}
.qty-ctrl button:hover { background: var(--orange); color: var(--paper); }
.qty-ctrl .qty {
  min-width: 28px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 15px;
}

.cart-foot {
  padding: 22px 28px 28px;
  border-top: 2px dashed rgba(139,111,71,0.3);
  background: var(--cream-soft);
}

/* Cupón en el carrito */
.cart-coupon {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--card-paper-soft);
  border: 1px dashed var(--card-border);
  border-radius: 8px;
}
.cart-coupon summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  outline: none;
}
.cart-coupon summary::-webkit-details-marker { display: none; }
.cart-coupon summary::after {
  content: '+';
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  color: var(--red);
  transition: transform 0.25s var(--easing);
  width: 22px; text-align: center;
}
.cart-coupon[open] summary::after { transform: rotate(45deg); }
.cart-coupon-hint {
  font-size: 13px;
  color: var(--ink-soft);
  font-family: inherit;
}
.cart-coupon-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.cart-coupon-row input {
  flex: 1;
  padding: 10px 12px;
  border: 2px dashed var(--kraft);
  border-radius: 8px;
  background: var(--paper);
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.cart-coupon-row input:focus {
  border-color: var(--red);
  background: var(--cream);
}
.cart-coupon-apply {
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 8px;
}
.cart-coupon-msg {
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  margin-top: 8px;
  min-height: 1em;
}
.cart-coupon-msg.ok    { color: #1F7A3A; }
.cart-coupon-msg.error { color: var(--red); }

.cart-strike {
  text-decoration: line-through;
  color: var(--ink-soft);
  font-size: 18px;
  margin-right: 8px;
  font-weight: 500;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  font-family: 'Fredoka', sans-serif;
}
.cart-total-row span {
  font-size: 18px;
  color: var(--ink-soft);
}
.cart-total-row strong {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cart-checkout {
  width: 100%;
  justify-content: center;
  background: #25D366;
  color: var(--paper);
  box-shadow: 0 6px 0 #128C7E, 0 14px 24px -10px rgba(0,0,0,0.4);
}
.cart-checkout:hover {
  background: #1ebe57;
  box-shadow: 0 9px 0 #128C7E, 0 22px 32px -12px rgba(0,0,0,0.45);
}
.cart-checkout:disabled {
  background: var(--kraft);
  box-shadow: 0 4px 0 var(--kraft-dark);
  cursor: not-allowed;
  opacity: 0.7;
}
.cart-checkout:disabled:hover { transform: none; }
.cart-note {
  margin-top: 12px;
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 110px;
  right: 24px;
  z-index: 250;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'Patrick Hand', cursive;
  font-size: 17px;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.45);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.35s var(--easing), opacity 0.35s;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }
  .cart-fab { width: 56px; height: 56px; bottom: 16px; right: 16px; }
  .cart-head, .cart-body, .cart-foot { padding-left: 20px; padding-right: 20px; }
  .toast { right: 16px; bottom: 90px; }
}

/* =================== MARCA / LOGO SECTION =================== */
.brand {
  position: relative;
  z-index: 2;
  padding: 120px 48px;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(245, 213, 71, 0.18), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(255, 179, 107, 0.20), transparent 65%),
    var(--cream);
  overflow: hidden;
}

.brand-decor { position: absolute; inset: 0; pointer-events: none; }
.brand-blob {
  position: absolute;
  border-radius: 50%;
}
.brand-blob-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(214, 59, 54, 0.18) 0%, rgba(214, 59, 54, 0) 65%);
  top: -120px; left: -120px;
}
.brand-blob-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(245, 213, 71, 0.4) 0%, rgba(245, 213, 71, 0) 65%);
  bottom: -100px; right: -80px;
}
.brand-doodle {
  position: absolute;
  font-family: 'Caveat', cursive;
  color: var(--orange-deep);
  opacity: 0.6;
  font-weight: 700;
}
.bd1 { top: 12%; left: 6%; font-size: 38px; color: var(--red); }
.bd2 { top: 70%; left: 4%; font-size: 32px; color: var(--orange-deep); }
.bd3 { top: 22%; right: 10%; font-size: 28px; color: var(--ink); }
.bd4 { top: 78%; right: 6%; font-size: 36px; color: var(--kraft-dark); }

.brand-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.brand-text { position: relative; }
.brand-text .kicker { color: var(--orange-deep); }
.brand-text h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 24px;
  color: var(--ink);
}
.brand-text h2 em {
  font-style: normal;
  font-family: 'Caveat', cursive;
  color: var(--red);
  font-weight: 700;
  font-size: 1.1em;
}
.brand-lede {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 480px;
}
.brand-lede strong { color: var(--red); font-weight: 700; }

.brand-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}
.brand-points li {
  /* Cartulina kraft grisácea */
  background-color: var(--card-paper-soft);
  background-image:
    radial-gradient(var(--card-fiber) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
  background-size: 5px 5px, 100% 100%;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--card-border);
  box-shadow:
    0 3px 8px -2px rgba(60, 45, 25, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.brand-points li span {
  width: 22px; height: 22px;
  background: var(--orange);
  color: var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}

.brand-cta { font-size: 16px; }

/* === Logo wrap: papel con washi tape (estilo polaroid) === */
.brand-logo-wrap {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
}
.brand-paper {
  position: absolute;
  inset: 0;
  /* Cartulina kraft + textura + arrugas + borde roto */
  background-color: var(--card-paper);
  background-image:
    var(--card-wrinkle),
    radial-gradient(var(--card-fiber) 1px, transparent 1.5px),
    radial-gradient(var(--card-fiber-soft) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 35%);
  background-size: 360px 360px, 7px 7px, 11px 11px, 100% 100%;
  background-position: 0 0, 0 0, 3px 4px, 0 0;
  border-radius: 8px;
  padding: 36px;
  border: 1px dashed var(--card-border);
  box-shadow:
    0 30px 60px -20px rgba(60, 45, 25, 0.45),
    0 60px 120px -40px rgba(60, 45, 25, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: rotate(-3deg);
  display: grid;
  place-items: center;
  transition: transform 0.5s var(--easing);
}
.brand-paper::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(139, 111, 71, 0.25);
  border-radius: 4px;
  pointer-events: none;
}
.brand-paper:hover { transform: rotate(-1deg) scale(1.02); }

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(80, 40, 15, 0.18));
}

/* Washi tapes en las esquinas del papel */
.brand-tape {
  position: absolute;
  width: 90px;
  height: 28px;
  background: var(--orange-glow);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,0.3) 10px 16px);
  opacity: 0.85;
  z-index: 3;
  border: 1px solid rgba(160, 120, 70, 0.2);
}
.brand-tape-tl { top: -12px; left: -10px; transform: rotate(-32deg); background: var(--yellow); }
.brand-tape-tr { top: -12px; right: -10px; transform: rotate(32deg); background: var(--orange-glow); }
.brand-tape-bl { bottom: -12px; left: -10px; transform: rotate(28deg); background: var(--orange-glow); }
.brand-tape-br { bottom: -12px; right: -10px; transform: rotate(-28deg); background: var(--red); opacity: 0.6; }

/* Estampa "desde la cocina de la Tía" */
.brand-stamp {
  position: absolute;
  bottom: -28px;
  right: -36px;
  width: 130px;
  height: 130px;
  background: var(--red);
  color: var(--paper);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Patrick Hand', cursive;
  transform: rotate(14deg);
  box-shadow:
    0 6px 14px -2px rgba(80, 40, 15, 0.4),
    inset 0 0 0 3px rgba(255, 255, 255, 0.35),
    inset 0 0 0 4px var(--red);
  z-index: 4;
  padding: 8px;
}
.stamp-line { font-size: 13px; opacity: 0.9; line-height: 1.1; }
.stamp-year {
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 2px 0;
  letter-spacing: 0.02em;
}

@media (max-width: 920px) {
  .brand { padding: 90px 32px; }
  .brand-inner { grid-template-columns: 1fr; gap: 56px; }
  .brand-text { text-align: center; }
  .brand-text .kicker { display: block; }
  .brand-lede { margin-left: auto; margin-right: auto; }
  .brand-points { justify-content: center; }
  .brand-logo-wrap { max-width: 360px; }
  .brand-stamp { width: 110px; height: 110px; right: -20px; bottom: -20px; }
}
@media (max-width: 480px) {
  .brand { padding: 70px 18px; }
  .brand-text h2 { font-size: clamp(32px, 9vw, 44px); }
  .brand-paper { padding: 24px; }
  .brand-stamp { width: 90px; height: 90px; right: -10px; bottom: -10px; padding: 6px; }
  .stamp-line { font-size: 11px; }
  .stamp-year { font-size: 15px; }
}

/* =================== QTY MODAL (paquetes de tiros) =================== */
.qty-modal .qty-sub {
  color: var(--ink-soft);
  font-size: 14px;
  margin: -8px 0 16px;
}
.qty-modal .qty-sub strong { color: var(--red); }

.qty-packs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0 14px;
}
.qty-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 6px 12px;
  background: var(--card-paper-soft);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.2s var(--easing), border-color 0.2s, background 0.2s;
}
.qty-pack:hover { transform: translateY(-2px); background: var(--card-paper); }
.qty-pack.selected {
  border-color: var(--red);
  background: var(--card-paper);
  box-shadow: 0 0 0 3px rgba(214,59,54,0.15);
}
.qty-pack .pk-num {
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.qty-pack .pk-price {
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: var(--red);
}
.qty-pack.popular::before {
  content: 'popular';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--orange-deep);
  color: var(--paper);
  font-family: 'Patrick Hand', cursive;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
}

.qty-custom { margin: 8px 0 16px; }
.qty-custom label {
  display: block;
  font-family: 'Patrick Hand', cursive;
  color: var(--ink-soft);
  font-size: 14px;
  margin-bottom: 6px;
}
.qty-custom-row {
  display: inline-flex;
  align-items: stretch;
  border: 2px dashed var(--kraft);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-paper-soft);
}
.qty-step {
  width: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  color: var(--ink);
  font-weight: 600;
  transition: background 0.2s;
}
.qty-step:hover { background: rgba(255,255,255,0.5); }
.qty-custom-row input {
  width: 60px;
  border: none;
  border-left: 1px dashed var(--kraft);
  border-right: 1px dashed var(--kraft);
  background: var(--paper);
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  -moz-appearance: textfield;
}
.qty-custom-row input::-webkit-outer-spin-button,
.qty-custom-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qty-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 18px;
  background: var(--card-paper);
  border: 1px dashed var(--card-border);
  border-radius: 8px;
  margin-bottom: 18px;
  font-family: 'Patrick Hand', cursive;
  font-size: 17px;
}
.qty-summary strong {
  font-family: 'Fredoka', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--red);
}

@media (max-width: 480px) {
  .qty-packs { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .qty-pack { padding: 16px 6px; }
  .qty-pack .pk-num { font-size: 24px; }
}

/* =================== RESPONSIVE GLOBAL =================== */

/* Tablet: ≤ 1024px */
@media (max-width: 1024px) {
  .hero { padding: 120px 32px 60px; }
  .products { padding: 100px 32px; }
  .story { padding: 100px 32px; }
  .howto { padding: 100px 32px; }
  .contact { padding: 100px 32px; }
  .footer { padding: 60px 32px 32px; }
  .pin-content { padding: 16px 40px 60px; gap: 32px; }
  .pin-head { padding: 100px 32px 0; }
  .marquee-track { font-size: 22px; gap: 36px; }
}

/* Tablet pequeña: ≤ 880px */
@media (max-width: 880px) {
  .pin-content {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 4px 24px 80px;
  }
  .pin-bag-wrap {
    height: 38vh;
    max-height: 360px;
  }
  .pin-info-stack {
    height: auto;
    min-height: 280px;
  }
  .pin-info {
    text-align: center;
    align-items: center;
  }
  .pin-info h3 { font-size: clamp(32px, 8vw, 50px); }
  .info-foot { justify-content: center; max-width: 100%; }
  .pin-head {
    padding: 80px 24px 0;
  }
  .pin-head h2 { font-size: clamp(28px, 6.5vw, 44px); }
  .pin-progress { bottom: 18px; gap: 10px; }
  .progress-dot { width: 28px; }
  .progress-dot.active { width: 44px; }
  /* Marquee: contener overflow para que no sangre lateral */
  .marquee { margin: 40px 0; transform: rotate(-1deg); }
  .marquee-track { font-size: 20px; gap: 28px; }
}

/* Móvil grande: ≤ 640px */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 110px 20px 40px; min-height: auto; }
  .hero-inner { gap: 32px; }
  .hero-title { font-size: clamp(48px, 12vw, 72px); }
  .hero-sub { font-size: 15px; }
  .hero-eyebrow { font-size: 16px; }
  .hero-logo-stage { max-width: 320px; }

  .products-pin .pin-stage { min-height: 100vh; }
  .pin-bag-wrap { height: 32vh; max-height: 280px; }
  .pin-info h3 { font-size: 36px; }
  .pin-info p { font-size: 14px; }
  .info-foot .price { font-size: 36px; }
  .info-foot .weight { font-size: 14px; }
  .btn-add { font-size: 14px; padding: 12px 20px; }

  .marquee { padding: 14px 0; }
  .marquee-track { font-size: 18px; gap: 22px; }

  .story, .products, .howto, .contact { padding: 70px 20px; }
  .footer { padding: 40px 20px 24px; }

  .section-head { margin-bottom: 50px; }
  .section-head h2 { font-size: clamp(32px, 8vw, 48px); }

  .contact-card { padding: 40px 24px; }
  .contact-card h2 { font-size: clamp(28px, 7vw, 38px); }
  .phone-number { font-size: clamp(32px, 8vw, 44px); }
  .phone-display { padding: 28px 18px; }

  .btn-primary, .btn-ghost { padding: 14px 22px; font-size: 15px; }

  /* Doodles más pequeños en móvil */
  .px-doodle { font-size: 22px !important; }

  /* Blobs no queremos tan grandes */
  .blob-orange, .blob-yellow { width: 360px; height: 360px; }
}

/* Móvil pequeño: ≤ 480px */
@media (max-width: 480px) {
  .nav { padding: 12px 16px; }
  .nav-logo img { width: 40px; height: 40px; }
  .nav-cta { padding: 8px 14px !important; font-size: 14px; }

  .cart-drawer { width: 100vw; }
  .cart-fab { width: 56px; height: 56px; bottom: 16px; right: 16px; }
  .cart-head, .cart-body, .cart-foot { padding-left: 20px; padding-right: 20px; }
  .toast { right: 16px; bottom: 90px; }

  .hero { padding: 100px 16px 32px; }
  .hero-title { font-size: clamp(42px, 13vw, 62px); }
  .hero-logo-stage { max-width: 260px; }

  .pin-info h3 { font-size: 32px; }
  .info-foot { gap: 12px; padding-top: 16px; }
  .info-foot .price { font-size: 32px; }

  .pin-head { padding: 70px 16px 0; }
  .pin-head h2 { font-size: 26px; }
  .pin-content { padding: 4px 16px 70px; }

  .contact-card { padding: 32px 18px; }
  .phone-number { font-size: 28px; letter-spacing: 0.01em; }
  .contact-options { flex-direction: column; }
  .contact-options .btn-primary, .contact-options .btn-ghost { width: 100%; justify-content: center; }

  .marquee-track { font-size: 16px; gap: 18px; }

  .story, .products, .howto, .contact { padding: 56px 16px; }
}

/* Touch: desactiva idle floats y mouse parallax (no aplican) */
@media (hover: none) {
  .nav-links a:not(.nav-cta):hover { background: transparent; }
}

/* =================== PROMOS · JUEGOS =================== */
.promos {
  position: relative;
  z-index: 2;
  padding: 130px 48px 100px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(245, 213, 71, 0.18), transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(214, 59, 54, 0.12), transparent 60%),
    var(--cream);
}

.promos-bg { position: absolute; inset: 0; pointer-events: none; }
.promo-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.blob-p1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255,179,107,0.45) 0%, rgba(255,179,107,0) 65%);
  top: -180px; right: -120px;
}
.blob-p2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(245,213,71,0.4) 0%, rgba(245,213,71,0) 65%);
  bottom: -140px; left: -120px;
}
.promos .px-doodle {
  position: absolute;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  opacity: 0.5;
}
.promos .pd1 { top: 12%; left: 6%; font-size: 36px; color: var(--red); }
.promos .pd2 { top: 70%; right: 8%; font-size: 42px; color: var(--orange-deep); }
.promos .pd3 { top: 30%; right: 15%; font-size: 26px; color: var(--kraft-dark); }

.promos-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 2;
}
.promos-head .kicker { color: var(--orange-deep); font-size: 24px; }
.promos-head h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 16px;
}
.promos-head h2 em {
  font-style: normal;
  font-family: 'Caveat', cursive;
  color: var(--red);
}
.promos-head .lede {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}

.promos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.promo-card {
  position: relative;
  /* Cartulina kraft + textura + arrugas + borde roto */
  background-color: var(--card-paper);
  background-image:
    var(--card-wrinkle),
    radial-gradient(var(--card-fiber) 1px, transparent 1.5px),
    radial-gradient(var(--card-fiber-soft) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 35%);
  background-size: 320px 320px, 7px 7px, 11px 11px, 100% 100%;
  background-position: 0 0, 0 0, 3px 4px, 0 0;
  border-radius: 10px;
  padding: 40px 36px 36px;
  border: 1px dashed var(--card-border);
  box-shadow:
    var(--shadow-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: rotate(-0.5deg);
  transition: transform 0.4s var(--easing);
}
.promo-card:nth-child(2) { transform: rotate(0.6deg); }
.promo-card:hover { transform: rotate(0); }

.promo-num {
  font-family: 'Caveat', cursive;
  color: var(--orange-deep);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.promo-card h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.promo-desc {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  max-width: 380px;
}
.promo-desc strong { color: var(--red); }
.promo-hint {
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
  color: var(--ink-soft);
}
.promo-btn { margin-top: 6px; }
.promo-btn:disabled {
  background: var(--kraft);
  cursor: not-allowed;
  box-shadow: 0 4px 0 var(--kraft-dark), 0 8px 14px -8px rgba(80,40,15,0.3);
  opacity: 0.7;
}
.promo-btn:disabled:hover { transform: none; background: var(--kraft); }

/* ============== RULETA ============== */
.wheel-stage {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 12px auto 6px;
}
.wheel-pointer {
  position: absolute;
  top: -6px; left: 50%;
  width: 0; height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 26px solid var(--ink);
  transform: translateX(-50%);
  z-index: 4;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25));
}
.wheel-pointer::after {
  content: '';
  position: absolute;
  top: -28px; left: -8px;
  width: 16px; height: 16px;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.wheel {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 5px solid var(--ink);
  box-shadow:
    0 0 0 6px var(--cream-soft),
    0 0 0 8px var(--ink),
    0 18px 30px -10px rgba(80,40,15,0.5);
  transition: transform 5s cubic-bezier(0.18, 0.85, 0.25, 1);
  background: conic-gradient(
    var(--yellow)      0deg  45deg,
    var(--orange)     45deg  90deg,
    var(--cream-soft) 90deg 135deg,
    var(--red)       135deg 180deg,
    var(--orange-glow) 180deg 225deg,
    var(--cream-soft) 225deg 270deg,
    var(--orange-deep) 270deg 315deg,
    var(--yellow-soft) 315deg 360deg
  );
  overflow: hidden;
}
.wheel-labels {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0; padding: 0;
}
.wheel-labels li {
  position: absolute;
  top: 50%; left: 50%;
  width: 50%;
  transform-origin: 0 50%;
  text-align: center;
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
}
.wheel-labels li.win {
  color: var(--paper);
  text-shadow: 1px 1px 0 var(--red-dark);
  font-size: 14px;
}
.wheel-cap {
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  transform: translate(-50%, -50%);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
.wheel-cap img {
  width: 70%; height: 70%;
  object-fit: contain;
}

/* ============== CRONÓMETRO ============== */
.timer-display-wrap {
  margin: 12px auto 4px;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 14px;
  padding: 28px 36px 18px;
  min-width: 280px;
  box-shadow:
    inset 0 4px 0 rgba(0,0,0,0.3),
    0 12px 22px -10px rgba(0,0,0,0.4);
  border: 3px solid var(--ink);
  position: relative;
}
.timer-display {
  font-family: 'Fredoka', sans-serif;
  font-size: 56px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  color: var(--yellow);
  text-shadow: 0 0 18px rgba(245,213,71,0.45);
}
.timer-display.running .timer-num {
  animation: timer-glow 0.4s linear infinite alternate;
}
.timer-display.win {
  color: var(--orange-glow);
  animation: timer-pop 0.6s var(--easing);
}
@keyframes timer-glow {
  to { text-shadow: 0 0 28px rgba(245,213,71,0.85); }
}
@keyframes timer-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) rotate(-2deg); }
  100% { transform: scale(1); }
}
.timer-display .timer-unit {
  font-size: 24px;
  color: var(--orange-glow);
  font-weight: 600;
}
.timer-display.jump .timer-num {
  display: inline-block;
  animation: timer-jump 0.12s ease-out;
}
@keyframes timer-jump {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px) rotate(-2deg); }
  100% { transform: translateY(0); }
}
.timer-target {
  margin-top: 10px;
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: var(--cream-soft);
  text-align: center;
}
.timer-target strong { color: var(--paper); font-size: 18px; }
.timer-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============== MODAL DE PREMIO ============== */
.prize-overlay {
  position: fixed; inset: 0;
  background: rgba(42,30,22,0.6);
  backdrop-filter: blur(3px);
  z-index: 500;
  opacity: 0;
  transition: opacity 0.3s var(--easing);
}
.prize-overlay.open { opacity: 1; }

.prize-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -45%) rotate(-1deg) scale(0.92);
  z-index: 600;
  width: min(440px, calc(100vw - 32px));
  /* Cartulina kraft + textura + arrugas + borde roto */
  background-color: var(--card-paper);
  background-image:
    var(--card-wrinkle),
    radial-gradient(var(--card-fiber) 1px, transparent 1.5px),
    radial-gradient(var(--card-fiber-soft) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 35%);
  background-size: 320px 320px, 7px 7px, 11px 11px, 100% 100%;
  background-position: 0 0, 0 0, 3px 4px, 0 0;
  padding: 48px 36px 32px;
  border-radius: 10px;
  border: 1px dashed var(--card-border);
  box-shadow:
    0 30px 60px -15px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--easing), transform 0.5s var(--easing);
}
.prize-modal.open {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-1deg) scale(1);
  pointer-events: auto;
}
.prize-modal.lose .prize-stamp {
  background: var(--kraft-dark);
  color: var(--paper);
}
.prize-stamp {
  display: inline-block;
  background: var(--red);
  color: var(--paper);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 18px;
  padding: 8px 22px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  transform: rotate(-3deg);
  margin-bottom: 16px;
  box-shadow: 0 4px 0 var(--red-dark);
}
.prize-modal h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}
.prize-modal p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 22px;
}
.prize-code {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.18em;
  color: var(--ink);
  background: var(--cream-soft);
  border: 2px dashed var(--kraft);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 auto 24px;
  max-width: 280px;
  user-select: all;
}
.prize-modal.lose .prize-code { display: none; }
.prize-modal.lose .prize-actions a { display: none; }
.prize-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.prize-close-x {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  transition: background 0.2s, transform 0.25s var(--easing);
}
.prize-close-x:hover {
  background: var(--cream-soft);
  transform: rotate(90deg);
}

/* ============== EXTRA ATTEMPTS BLOCK ============== */
.extra-block {
  margin-top: 14px;
  width: 100%;
  border-top: 2px dashed rgba(139,111,71,0.3);
  padding-top: 16px;
}
.extra-block summary {
  cursor: pointer;
  font-family: 'Patrick Hand', cursive;
  font-size: 17px;
  color: var(--ink);
  padding: 6px 14px;
  display: inline-block;
  background: var(--cream-soft);
  border-radius: 999px;
  border: 1.5px dashed var(--kraft);
  list-style: none;
  user-select: none;
  transition: background 0.2s;
}
.extra-block summary::-webkit-details-marker { display: none; }
.extra-block summary:hover { background: var(--yellow-soft); }
.extra-block summary strong { color: var(--red); }
.extra-block[open] summary { background: var(--yellow); }
.extra-help {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 14px 0 10px;
  line-height: 1.5;
}
.extra-buy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
}
.extra-redeem {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.extra-redeem input {
  flex: 1 1 140px;
  padding: 10px 14px;
  border: 2px dashed var(--kraft);
  border-radius: 8px;
  background: var(--paper);
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.extra-redeem input:focus {
  border-color: var(--red);
  background: var(--cream);
}
.extra-redeem button {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 4px 0 #000, 0 8px 14px -8px rgba(0,0,0,0.4);
}
.extra-feedback {
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  margin-top: 4px;
  min-height: 18px;
}
.extra-feedback.ok    { color: #2a8a2a; }
.extra-feedback.error { color: var(--red); }

/* ============== ADMIN PANEL ============== */
.admin-panel {
  grid-column: 1 / -1;
  background: var(--ink);
  color: var(--paper);
  padding: 24px 28px;
  border-radius: 10px;
  text-align: center;
  margin-top: 20px;
  border: 3px dashed var(--yellow);
  overflow-x: hidden;
}
@media (max-width: 600px) {
  .admin-panel { padding: 18px 14px; }
  .admin-panel .btn-primary, .admin-panel .btn-ghost {
    width: 100%;
    margin: 4px 0 !important;
    justify-content: center;
  }
  .admin-panel .extra-redeem {
    flex-direction: column;
  }
  .admin-panel .extra-redeem input,
  .admin-panel .extra-redeem button { width: 100%; }
  .admin-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-card strong { font-size: 18px !important; }
  .stat-card span { font-size: 10px !important; }
  .admin-header { flex-direction: column; align-items: stretch; }
  .admin-session { justify-content: space-between; }
  .admin-pay-row { flex-direction: column; align-items: stretch; }
  .admin-pay-row button { width: 100%; margin-left: 0 !important; }
  .block-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .block-row button { width: 100%; }
  .log-row { grid-template-columns: 1fr; gap: 2px; }
  .log-time { font-size: 10px; }
  .coupon-details .cd-row { flex-direction: column; gap: 2px; }
  .cd-actions .btn-primary { width: 100%; }
}
.admin-panel h4 {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  color: var(--yellow);
  margin-bottom: 10px;
}
.admin-panel p {
  color: var(--cream-soft);
  font-size: 14px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.admin-panel p strong { color: var(--orange-glow); }
.admin-panel .btn-primary {
  margin: 0 6px 8px;
  padding: 10px 18px;
  font-size: 14px;
  background: var(--orange);
  box-shadow: 0 4px 0 var(--orange-deep);
}
.admin-panel .btn-primary:hover {
  background: var(--red);
  box-shadow: 0 6px 0 var(--red-dark);
}
.admin-result {
  margin-top: 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--yellow);
  min-height: 32px;
  user-select: all;
}
.admin-section { text-align: left; }
.admin-section p { font-size: 14px; color: var(--cream-soft); margin-bottom: 12px; }
.admin-pays-list {
  margin-top: 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  color: var(--paper);
  text-align: left;
}
.admin-pay-row {
  background: rgba(255,255,255,0.05);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.admin-pay-row strong { color: var(--yellow); }
.admin-pay-row button {
  margin-left: auto;
  padding: 6px 14px;
  font-size: 13px;
  background: var(--orange);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.admin-pay-row button:hover { background: var(--red); }
.admin-pay-row .codes {
  width: 100%;
  font-size: 14px;
  color: var(--orange-glow);
  letter-spacing: 0.1em;
  padding-top: 4px;
  user-select: all;
}

/* Detalles del cupón en admin */
.coupon-details {
  margin-top: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(245,213,71,0.4);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: left;
  font-family: 'Fredoka', sans-serif;
}
.cd-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--cream-soft);
  padding: 6px 0;
  border-bottom: 1px dashed rgba(245,213,71,0.15);
}
.cd-row:last-of-type { border-bottom: none; }
.cd-row strong {
  color: var(--paper);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cd-row strong.phone-big {
  font-size: 18px;
  color: var(--yellow);
  letter-spacing: 0.06em;
}
.cd-status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  font-size: 14px;
}
.cd-status.ok      { background: rgba(42,138,42,0.25); color: #8be08b; border: 1px solid #4caf50; }
.cd-status.warn    { background: rgba(214,59,54,0.2); color: #ff9b96; border: 1px solid var(--red); }
.cd-status.expired { background: rgba(139,111,71,0.3); color: var(--cream-soft); border: 1px dashed var(--kraft); }
.cd-actions {
  margin-top: 14px;
  text-align: center;
}
.cd-actions .btn-primary {
  background: #25D366;
  box-shadow: 0 4px 0 #128C7E;
}
.cd-actions .btn-primary:hover { background: #1ebe57; }
.cd-warn {
  font-size: 13px !important;
  color: var(--orange-glow) !important;
  margin-bottom: 10px !important;
  font-style: italic;
}

.pay-qr {
  display: block;
  margin: 16px auto;
  width: 200px;
  height: 200px;
  background: var(--cream-soft);
  border: 2px dashed var(--kraft);
  border-radius: 8px;
  object-fit: contain;
}
.pay-modal h3 { font-size: 24px; }

/* Gate de teléfono */
.phone-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-soft);
  border: 2px dashed var(--kraft);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 18px auto 6px;
  max-width: 320px;
}
.phone-prefix {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--kraft-dark);
}
.phone-input-row input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Fredoka', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* Banner del cupón guardado */
.coupon-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(120deg, var(--yellow), var(--orange-glow));
  border: 3px dashed var(--ink);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-deep);
  position: relative;
  transform: rotate(-0.4deg);
}
.coupon-banner-icon { font-size: 38px; }
.coupon-banner-text { flex: 1; min-width: 0; }
.coupon-banner .cb-label {
  font-family: 'Caveat', cursive;
  color: var(--ink);
  font-size: 18px;
  margin-bottom: 2px;
  font-weight: 700;
}
.coupon-banner .cb-code {
  font-family: 'Fredoka', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
  user-select: all;
  word-break: break-all;
}
.coupon-banner .btn-primary { white-space: nowrap; padding: 12px 18px; font-size: 14px; }
.cb-clear {
  position: absolute;
  top: 8px; right: 10px;
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  opacity: 0.6;
  border-radius: 50%;
  transition: opacity 0.2s, background 0.2s;
}
.cb-clear:hover { opacity: 1; background: rgba(0,0,0,0.1); }

/* Card pública de verificar cupón (estilo más light que el admin) */
.verify-card {
  grid-column: 1 / -1;
  background: var(--paper);
  text-align: center;
  border: 2px dashed var(--kraft);
}
.verify-card .promo-num { color: var(--orange-deep); }
.verify-card h3 { color: var(--ink); }
.public-coupon {
  background: var(--cream-soft);
  border: 1px dashed var(--kraft);
}
.public-coupon .cd-row {
  color: var(--ink-soft);
  border-bottom-color: rgba(139,111,71,0.2);
}
.public-coupon .cd-row strong { color: var(--ink); }
.public-coupon .cd-status.ok      { background: rgba(42,138,42,0.12); color: #2a8a2a; border: 1px solid rgba(42,138,42,0.35); }
.public-coupon .cd-status.warn    { background: rgba(214,59,54,0.12); color: var(--red); border: 1px solid rgba(214,59,54,0.35); }
.public-coupon .cd-status.expired { background: rgba(139,111,71,0.15); color: var(--kraft-dark); border: 1px dashed var(--kraft); }
.public-coupon .cd-actions .btn-primary { background: #25D366; box-shadow: 0 4px 0 #128C7E; color: var(--paper); }
.public-coupon .cd-actions .btn-primary:hover { background: #1ebe57; }

@media (max-width: 600px) {
  .coupon-banner { flex-wrap: wrap; padding: 16px 20px; }
  .coupon-banner .btn-primary { width: 100%; justify-content: center; }
  .coupon-banner .cb-code { font-size: 22px; letter-spacing: 0.12em; }
}

/* Banner mensaje del día */
/* =================== DAY PILL (banner del día convertido a píldora flotante) =================== */
.day-pill {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 70;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 38px 10px 14px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,0.45), 0 3px 0 var(--orange-deep);
  border: 2px solid var(--ink);
  max-width: 320px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  line-height: 1.3;
  animation: flash-pop 0.4s var(--easing) backwards;
}
.day-pill[hidden] { display: none; }
.day-pill .day-banner-icon { font-size: 20px; flex-shrink: 0; }
.day-pill .day-banner-text {
  flex: 1; min-width: 0;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.day-pill .day-banner-close {
  position: absolute;
  top: 6px; right: 8px;
  background: transparent;
  border: none;
  color: var(--paper);
  opacity: 0.6;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}
.day-pill .day-banner-close:hover { opacity: 1; background: rgba(255,255,255,0.1); }
@media (max-width: 600px) {
  .day-pill { left: 12px; bottom: 12px; max-width: calc(100vw - 24px); font-size: 12px; }
}

/* Legacy day-banner (full-width arriba) — desactivado, se usa .day-pill */
.day-banner { display: none !important; }

/* Verificación de pago */
.payment-status-check {
  margin-top: 14px;
  border-top: 1px dashed rgba(139,111,71,0.3);
  padding-top: 12px;
}
.payment-status-check summary {
  cursor: pointer;
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  color: var(--ink-soft);
  list-style: none;
}
.payment-status-check summary::-webkit-details-marker { display: none; }
.payment-status-check summary:hover { color: var(--ink); }
.payment-status-result {
  background: var(--cream-soft);
  border: 1px dashed var(--kraft);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
  font-size: 13px;
  text-align: left;
}
.payment-status-result.pending  { border-color: var(--orange-deep); background: rgba(245,213,71,0.2); }
.payment-status-result.approved { border-color: #2a8a2a; background: rgba(42,138,42,0.1); }
.payment-status-result strong { display: block; font-size: 16px; margin-bottom: 6px; }
.payment-status-result .codes-out {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--paper);
  border-radius: 6px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 14px;
  user-select: all;
  word-break: break-all;
}

/* Config admin: full-row */
.admin-config-grid label.full-row { grid-column: 1 / -1; }

/* Reto del día */
.challenge-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: linear-gradient(120deg, var(--cream-soft), var(--paper));
  border: 2px dashed var(--orange-deep);
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 1100px;
  margin: 0 auto 32px;
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: 2;
  transform: rotate(-0.3deg);
}
/* OJO: el atributo HTML `hidden` debe ganarle al display: flex */
.challenge-card[hidden],
.promos-stats[hidden] { display: none !important; }
.challenge-icon { font-size: 42px; flex-shrink: 0; }
.challenge-body { flex: 1; }
.challenge-label {
  font-family: 'Caveat', cursive;
  color: var(--orange-deep);
  font-size: 22px;
  margin-bottom: 4px;
  font-weight: 700;
}
.challenge-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 4px;
}
.challenge-reward {
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: var(--red);
}

/* =================== HERO PILLS (status + festive + paused) =================== */
.hero-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}
.hero-pills:empty { display: none; }
.hero-pills > *[hidden] { display: none !important; }

/* Estado abierto/cerrado — pill verdecito como estaba antes */
.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px dashed var(--kraft);
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.nav-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kraft);
  flex-shrink: 0;
}
.nav-status.open {
  color: #1f6e1f;
  border-color: #4caf50;
  background: #f0fff0;
}
.nav-status.open::before {
  background: #4caf50;
  box-shadow: 0 0 0 3px rgba(76,175,80,0.18);
  animation: status-pulse 2s ease-in-out infinite;
}
.nav-status.closed {
  color: var(--red-dark);
  border-color: var(--red);
  background: #fff5f4;
}
.nav-status.closed::before { background: var(--red); }
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(76,175,80,0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(76,175,80,0.05); }
}

/* Festive badge — pill al lado del status */
.festive-badge {
  display: inline-block;
  background: var(--red);
  color: var(--paper);
  font-family: 'Caveat', cursive;
  font-size: 17px;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--red-dark);
  transform: rotate(-3deg);
  letter-spacing: 0.02em;
}

/* Alerta prominente de tienda en pausa */
.paused-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: var(--paper);
  padding: 14px 22px;
  border-radius: 14px;
  margin-bottom: 22px;
  max-width: 480px;
  box-shadow:
    0 6px 0 var(--red-dark),
    0 16px 28px -8px rgba(214, 59, 54, 0.45);
  border: 2px solid var(--ink);
  position: relative;
  transform: rotate(-1deg);
  animation: paused-alert-pulse 2.4s ease-in-out infinite;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      rgba(255,255,255,0.08) 14px 22px
    ),
    linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
}
.paused-alert[hidden] { display: none; }
.paused-alert .paused-alert-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  animation: paused-icon-pulse 1.6s ease-in-out infinite;
}
.paused-alert .paused-alert-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.paused-alert .paused-alert-body strong {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.paused-alert .paused-alert-body span {
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
}
@keyframes paused-alert-pulse {
  0%, 100% { transform: rotate(-1deg) scale(1); box-shadow: 0 6px 0 var(--red-dark), 0 16px 28px -8px rgba(214, 59, 54, 0.45); }
  50%      { transform: rotate(-0.5deg) scale(1.015); box-shadow: 0 8px 0 var(--red-dark), 0 22px 38px -10px rgba(214, 59, 54, 0.6); }
}
@keyframes paused-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@media (max-width: 720px) {
  .paused-alert { padding: 12px 16px; gap: 10px; margin-bottom: 18px; max-width: 100%; }
  .paused-alert .paused-alert-icon { font-size: 24px; }
  .paused-alert .paused-alert-body strong { font-size: 15px; }
  .paused-alert .paused-alert-body span { font-size: 14px; }
}

@media (max-width: 720px) {
  .nav-status { font-size: 13px; padding: 4px 10px; }
  .festive-badge { font-size: 15px; padding: 3px 12px; }
  .paused-pill { font-size: 11px; padding: 4px 10px; }
  .hero-pills { gap: 6px; margin-bottom: 14px; justify-content: center; }
}

/* Lista de bloqueos */
.blocks-list {
  margin-top: 12px;
  max-height: 200px;
  overflow-y: auto;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
}
.block-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.06);
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
  gap: 10px;
}
.block-row strong { color: var(--yellow); letter-spacing: 0.04em; }
.block-row .block-reason { color: var(--cream-soft); flex: 1; font-style: italic; font-size: 12px; }
.block-row button {
  padding: 4px 10px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--cream-soft);
  color: var(--paper);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.block-row button:hover { background: var(--red); border-color: var(--red); }

/* Lista de logs */
.logs-list {
  margin-top: 12px;
  max-height: 280px;
  overflow-y: auto;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  background: rgba(0,0,0,0.2);
  padding: 8px;
  border-radius: 6px;
}
.log-row {
  padding: 6px 8px;
  border-bottom: 1px dashed rgba(245,213,71,0.1);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  align-items: baseline;
}
.log-row:last-child { border-bottom: none; }
.log-time { color: var(--cream-soft); font-size: 11px; }
.log-action { color: var(--orange-glow); font-weight: 600; font-size: 12px; }
.log-meta { color: var(--cream); font-size: 11px; opacity: 0.8; }
.log-row.win .log-action  { color: #8be08b; }
.log-row.fail .log-action { color: #ff9b96; }

/* Admin header con logout */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-session {
  display: flex; gap: 10px; align-items: center;
  font-family: 'Patrick Hand', cursive;
  font-size: 13px;
  color: var(--cream-soft);
}
.admin-session .btn-ghost {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--paper);
  border-color: var(--cream-soft);
}
.admin-session .btn-ghost:hover { background: rgba(255,255,255,0.1); }

/* Login admin: input password */
.admin-login-modal h3 { color: var(--ink); }
.admin-login-modal .phone-input-row input {
  font-family: monospace;
  letter-spacing: 0.04em;
  font-size: 14px;
  width: 100%;
}
.admin-login-modal .phone-input-row { padding: 10px 14px; }
@media (max-width: 600px) {
  .admin-login-modal { padding: 36px 20px 24px; }
  .admin-login-modal h3 { font-size: 22px; }
}

/* Stats arriba de promos */
.promos-stats {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 16px; flex-wrap: wrap;
}
.stat-pill {
  background: var(--paper);
  border: 1.5px dashed var(--kraft);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: var(--ink-soft);
}
.stat-pill strong { color: var(--red); font-weight: 600; }

/* Píldoras de pin-head (bestseller + próxima horneada) */
.pin-head-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pin-head-pills:empty { display: none; }

.bestseller-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 0 var(--ink);
  transform: rotate(-2deg);
}
.nextbatch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange-deep);
  color: var(--paper);
  border: 2px solid var(--ink);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 0 var(--ink);
  transform: rotate(2deg);
}
.bestseller-pill[hidden],
.nextbatch-pill[hidden] { display: none; }

/* Stock badge — sticker absoluto en cada pin-info, top-right */
.pin-info-stock-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 7;
  pointer-events: none;
  transform: rotate(6deg);
  border: 2px solid var(--ink);
  white-space: nowrap;
}
.pin-info-stock-badge.low {
  background: var(--red);
  color: var(--paper);
  box-shadow: 0 4px 0 var(--ink);
}
.pin-info-stock-badge.agotado {
  background: var(--red-dark);
  color: var(--paper);
  box-shadow: 0 4px 0 var(--ink);
}
@media (max-width: 920px) {
  .pin-info-stock-badge {
    top: -4px; right: 0;
    font-size: 11px;
    padding: 5px 11px;
  }
}
/* Old container — vacío ya no estorba */
.product-badges { display: none; }

/* =================== SCHEDULE WEEK (en contact card) =================== */
.schedule-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}
.schedule-week .sw-cell {
  background: var(--cream-soft);
  border: 1.5px dashed var(--kraft);
  border-radius: 12px;
  padding: 10px 4px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.25s var(--easing), background 0.2s;
}
.schedule-week .sw-day {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--kraft-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.schedule-week .sw-hrs {
  font-family: 'Patrick Hand', cursive;
  font-size: 13px;
  line-height: 1.15;
  color: var(--ink);
}
.schedule-week .sw-cell.today {
  background: var(--yellow);
  border-color: var(--orange-deep);
  border-style: solid;
  border-width: 2px;
  transform: rotate(-1.5deg) scale(1.05);
  box-shadow: 0 4px 0 var(--orange-deep);
  z-index: 1;
}
.schedule-week .sw-cell.today .sw-day { color: var(--ink); }
.schedule-week .sw-cell.closed {
  background: rgba(0,0,0,0.04);
  opacity: 0.6;
}
.schedule-week .sw-cell.closed .sw-hrs {
  font-style: italic;
  color: var(--ink-soft);
}
.info-row-schedule { align-items: flex-start; }
@media (max-width: 600px) {
  .schedule-week { gap: 4px; }
  .schedule-week .sw-cell { padding: 7px 2px 5px; gap: 2px; }
  .schedule-week .sw-day { font-size: 11px; letter-spacing: 0.03em; }
  .schedule-week .sw-hrs { font-size: 10.5px; line-height: 1.1; }
}

/* Combos */
.combos {
  position: relative; z-index: 2;
  padding: 100px 48px;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(245,213,71,0.12), transparent 60%),
    var(--cream);
}
.combos-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.combos-inner h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  margin: 8px 0 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.combos-inner h2 em { font-style: normal; font-family: 'Caveat', cursive; color: var(--red); }
.combos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.combo-card {
  /* Cartulina kraft con arrugas — igual que las otras cards (promo, contact, etc) */
  background-color: var(--card-paper);
  background-image:
    var(--card-wrinkle),
    radial-gradient(var(--card-fiber) 1px, transparent 1.5px),
    radial-gradient(var(--card-fiber-soft) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 35%);
  background-size: 320px 320px, 7px 7px, 11px 11px, 100% 100%;
  background-position: 0 0, 0 0, 3px 4px, 0 0;
  padding: 28px 24px;
  border-radius: 12px;
  border: 1px dashed var(--card-border);
  box-shadow:
    var(--shadow-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  text-align: left;
  transform: rotate(-0.5deg);
  transition: transform 0.3s var(--easing);
  border-top: 6px solid var(--orange);
}
.combo-card:nth-child(2n) { transform: rotate(0.6deg); border-top-color: var(--yellow); }
.combo-card:nth-child(3n) { border-top-color: var(--red); }
.combo-card:hover { transform: rotate(0); }
.combo-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.combo-desc { font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; line-height: 1.5; }
.combo-parts {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 8px 12px;
  background: rgba(245,213,71,0.18);
  border-left: 3px solid var(--orange-deep);
  border-radius: 0 6px 6px 0;
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  color: var(--ink);
}
.combo-parts li { padding: 2px 0; }
.combo-parts li strong { font-family: 'Fredoka', sans-serif; color: var(--red); margin-right: 4px; }
.combo-price-row {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px;
}
.combo-price-row .now { font-family: 'Fredoka', sans-serif; font-size: 36px; font-weight: 700; color: var(--red); }
.combo-price-row .was { text-decoration: line-through; color: var(--ink-soft); font-size: 16px; }
.combo-card .btn-add { width: 100%; justify-content: center; margin-top: 4px; }
.combo-card.combo-out-of-stock {
  opacity: 0.65;
  position: relative;
}
.combo-card.combo-out-of-stock::after {
  content: 'Sin stock';
  position: absolute;
  top: 12px; right: -8px;
  transform: rotate(8deg);
  background: var(--red);
  color: var(--paper);
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  text-transform: uppercase;
}
.combo-card .btn-add.btn-disabled {
  background: var(--cream-soft, #f4e8d0);
  color: var(--ink-soft);
  cursor: not-allowed;
  border: 1.5px dashed var(--ink-soft);
}
.combo-card .btn-add.btn-disabled:hover { transform: none; }

/* Dashboard admin */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.stat-card {
  background: rgba(255,255,255,0.06);
  padding: 12px 14px;
  border-radius: 8px;
  text-align: center;
}
.stat-card span {
  display: block;
  font-size: 11px;
  color: var(--cream-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stat-card strong {
  font-family: 'Fredoka', sans-serif;
  font-size: 24px;
  color: var(--yellow);
  font-weight: 700;
}

/* Admin config */
.admin-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .admin-config-grid { grid-template-columns: 1fr; }
}
.admin-config-grid label { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.admin-config-grid label span { font-size: 12px; color: var(--cream-soft); }
.admin-config-grid input,
.admin-config-grid select {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: var(--paper);
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  outline: none;
}
.admin-config-grid input:focus,
.admin-config-grid select:focus { border-color: var(--yellow); }

/* Editor dinámico de combos / botanas extras */
.admin-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.admin-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 80px 80px 32px;
  gap: 6px;
  align-items: center;
  padding: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 6px;
}
.admin-row input {
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--paper);
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  outline: none;
  min-width: 0;
}
.admin-row input:focus { border-color: var(--yellow); }
.admin-row .r-del {
  width: 32px; height: 32px;
  background: rgba(214, 59, 54, 0.2);
  border: 1px solid var(--red);
  color: var(--paper);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Fredoka', sans-serif;
  line-height: 1;
  transition: background 0.2s;
}
.admin-row .r-del:hover { background: var(--red); }
@media (max-width: 720px) {
  .admin-row { grid-template-columns: 1fr 1fr; }
  .admin-row .r-del { grid-column: 1 / -1; width: auto; height: auto; padding: 6px; }
}

/* Countdown próximo intento */
.countdown-pill {
  display: inline-block;
  background: var(--cream-soft);
  border: 1.5px dashed var(--kraft);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
  color: var(--ink);
  margin-top: 8px;
}
.countdown-pill strong { color: var(--red); }

/* Botón repetir último pedido */
.repeat-order-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px;
  margin-bottom: 14px;
  background: transparent;
  border: 2px dashed var(--kraft);
  border-radius: 10px;
  color: var(--ink);
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.repeat-order-btn:hover { background: var(--cream-soft); }

/* Confetti */
.confetti {
  position: fixed;
  pointer-events: none;
  z-index: 700;
  width: 10px; height: 14px;
  top: -20px;
  border-radius: 2px;
  will-change: transform, opacity;
}
.confetti.confetti-emoji {
  background: transparent !important;
  width: auto; height: auto;
  font-size: 22px;
  line-height: 1;
}
.prize-starburst {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 701;
  font-size: 120px;
  pointer-events: none;
  animation: prize-starburst-pop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 0 20px rgba(255, 215, 70, 0.8));
}
@keyframes prize-starburst-pop {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.4) rotate(180deg); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1.0) rotate(360deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.5) rotate(540deg); opacity: 0; }
}

/* ==== Loader global tipo Tía Cleme ==== */
.tc-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(245, 230, 195, 0.85);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.tc-loader-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.tc-loader-bag {
  width: 110px;
  height: 110px;
  background: var(--paper, #fffaf0);
  border: 3px dashed var(--orange-deep, #f0944a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  animation: tc-loader-bob 1.2s ease-in-out infinite;
  box-shadow: 0 6px 0 rgba(139, 111, 71, 0.2);
}
.tc-loader-bag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: tc-loader-spin 3s linear infinite;
}
.tc-loader-msg {
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #3a2618);
  text-align: center;
  padding: 0 20px;
}
.tc-loader-dots::after {
  content: '';
  display: inline-block;
  animation: tc-loader-dots 1.4s steps(4, end) infinite;
}
@keyframes tc-loader-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(5deg); }
}
@keyframes tc-loader-spin {
  to { transform: rotate(360deg); }
}
@keyframes tc-loader-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}
/* tcAlert / tcConfirm modal */
.tc-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(58, 38, 24, 0.4);
  z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tc-modal-overlay.show { opacity: 1; }
.tc-modal {
  background: var(--paper, #fffaf0);
  border: 2.5px dashed var(--orange-deep, #f0944a);
  border-radius: 18px;
  padding: 28px 28px 22px;
  text-align: center;
  max-width: 420px; width: 100%;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.4);
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tc-modal-overlay.show .tc-modal { transform: scale(1); }
.tc-modal-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
  animation: tc-loader-bob 1.6s ease-in-out infinite;
}
.tc-modal-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px; font-weight: 700;
  color: var(--ink, #3a2618);
  margin: 4px 0 8px;
}
.tc-modal-msg {
  font-family: 'Patrick Hand', cursive;
  font-size: 17px;
  color: var(--ink-soft, #6b5345);
  margin: 0 0 20px;
  line-height: 1.45;
}
.tc-modal-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.tc-modal-btn {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600; font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 110px;
}
.tc-modal-btn-primary {
  background: var(--ink, #3a2618); color: var(--paper, #fffaf0);
  box-shadow: 0 4px 0 rgba(0,0,0,0.25);
}
.tc-modal-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.25); }
.tc-modal-btn-danger { background: var(--red, #d63b36); }
.tc-modal-btn-ghost {
  background: transparent;
  color: var(--ink, #3a2618);
  border: 1.5px dashed var(--kraft, #c8956a);
}
.tc-modal-btn-ghost:hover { background: var(--cream-soft, #f4e8d0); }

@media (max-width: 880px) {
  .promos { padding: 90px 24px 80px; }
  .promos-grid { grid-template-columns: 1fr; gap: 28px; }
  .promo-card { padding: 32px 24px 28px; }
  .wheel-stage { width: 240px; height: 240px; }
  .timer-display { font-size: 44px; }
  .timer-display-wrap { padding: 22px 24px 14px; min-width: 0; width: 100%; max-width: 320px; }
}

/* === Banner "ya ganaste hoy" === */
.won-today-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px auto 0;
  max-width: 640px;
  background: linear-gradient(135deg, #2a8a2a 0%, #4caf50 100%);
  color: var(--paper);
  padding: 14px 20px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  box-shadow: 0 6px 0 #1f6e1f, 0 18px 30px -10px rgba(42,138,42,0.5);
  position: relative;
  z-index: 5;
  font-family: 'Fredoka', sans-serif;
  text-align: left;
  animation: wt-pop 0.5s var(--easing) backwards;
}
/* Variante: cupón pendiente sin reclamar (más urgente, naranja) */
.won-today-banner.wt-pending {
  background: linear-gradient(135deg, var(--orange-deep) 0%, var(--red) 100%);
  box-shadow: 0 6px 0 var(--red-dark), 0 18px 30px -10px rgba(214, 59, 54, 0.5);
}
/* Variante: ya canjeado — verde tranquilo (ya viene como default) */
.won-today-banner[hidden] { display: none; }
@keyframes wt-pop {
  from { opacity: 0; transform: translateY(-10px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}
.won-today-banner .wt-icon {
  font-size: 32px; flex-shrink: 0;
  animation: wt-bounce 1.6s ease-in-out infinite;
}
@keyframes wt-bounce {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg) scale(1.1); }
}
.won-today-banner .wt-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.won-today-banner .wt-body strong { font-size: 16px; font-weight: 700; }
.won-today-banner .wt-body span { font-size: 13px; opacity: 0.95; font-family: 'Patrick Hand', cursive; }
.won-today-banner .wt-cta {
  background: var(--paper);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
}
.won-today-banner .wt-cta:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }

/* Card bloqueada (después de ganar hoy) */
.promo-card.won-locked {
  opacity: 0.6;
  filter: grayscale(0.4);
  position: relative;
  pointer-events: none;
}
.promo-card.won-locked::after {
  content: '🎉 Ya ganaste hoy · vuelve mañana';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: var(--ink);
  color: var(--paper);
  padding: 8px 20px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  z-index: 8;
}

@media (max-width: 600px) {
  .won-today-banner { flex-direction: column; gap: 10px; padding: 14px 16px; text-align: center; }
  .won-today-banner .wt-body { text-align: center; }
}

/* =================== REFLEJOS =================== */
.reflex-stage {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 200px;
  background: var(--cream-soft);
  border: 2px dashed var(--kraft);
  border-radius: 14px;
  margin: 14px auto 6px;
  overflow: hidden;
}
.reflex-target {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--orange-glow), var(--red));
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(214,59,54,0.5), inset 0 -3px 0 rgba(0,0,0,0.2);
  animation: reflex-pop 0.18s var(--easing) backwards;
  transition: transform 0.08s;
}
.reflex-target[hidden] { display: none; }
.reflex-target:hover  { transform: scale(1.1); }
.reflex-target:active { transform: scale(0.85); }
@keyframes reflex-pop {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.reflex-status {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Patrick Hand', cursive;
  color: var(--ink-soft);
  font-size: 16px;
  pointer-events: none;
  text-align: center;
}
.reflex-times {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  pointer-events: none;
}
.reflex-time-pill {
  background: var(--paper);
  border: 1.5px dashed var(--kraft);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink);
}
.reflex-time-pill.good { border-color: #2a8a2a; color: #2a8a2a; background: #f0fff0; }
.reflex-time-pill.bad  { border-color: var(--red); color: var(--red); background: #fff5f4; }

/* =================== TRAGAMONEDAS =================== */
.slots-stage {
  margin: 14px auto 8px;
  text-align: center;
}
.slots-machine {
  display: inline-flex;
  gap: 8px;
  background: var(--ink);
  border: 4px solid var(--orange-deep);
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: 0 8px 0 var(--red-dark), inset 0 4px 0 rgba(255,255,255,0.06);
}
.slot-reel {
  width: 70px; height: 80px;
  background: var(--paper);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);
}
.slot-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.slot-sym {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  flex-shrink: 0;
}
.slot-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)) drop-shadow(0 0 8px rgba(245, 213, 71, 0.5));
  animation: slot-logo-glow 2s ease-in-out infinite;
}
@keyframes slot-logo-glow {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)) drop-shadow(0 0 6px rgba(245,213,71,0.45)); }
  50%      { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)) drop-shadow(0 0 14px rgba(245,213,71,0.85)); }
}
/* Glow festivo del logo cuando hay tema activo */
body[class*="theme-"] .slot-logo {
  animation: slot-logo-glow-festive 2s ease-in-out infinite;
}
@keyframes slot-logo-glow-festive {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)) drop-shadow(0 0 8px var(--festive-color, var(--orange-glow))); }
  50%      { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)) drop-shadow(0 0 18px var(--festive-color, var(--orange-glow))); }
}
.slots-status {
  margin-top: 12px;
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
  color: var(--ink-soft);
}

/* =================== DADOS =================== */
.dice-stage {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 14px 0 8px;
}
.die {
  width: 72px; height: 72px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink-soft), inset 0 -3px 0 rgba(0,0,0,0.06);
  transform: rotate(-3deg);
  transition: transform 0.2s var(--easing);
}
.die:nth-child(2) { transform: rotate(4deg); }
.die.rolling { animation: die-roll 0.4s ease-in-out infinite; }
@keyframes die-roll {
  0%   { transform: rotate(-15deg) translateY(-3px) scale(1.05); }
  50%  { transform: rotate(20deg)  translateY(2px)  scale(0.96); }
  100% { transform: rotate(-15deg) translateY(-3px) scale(1.05); }
}
.dice-status {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  margin: 6px 0 14px;
  color: var(--ink);
  min-height: 22px;
}

/* =================== PAUSE BANNER (legacy — ya no se renderiza arriba) =================== */
.pause-banner { display: none !important; }

/* =================== FLASH DEAL · píldora flotante =================== */
.flash-pill {
  position: fixed;
  right: 18px;
  bottom: 96px; /* deja espacio para el FAB del carrito */
  z-index: 70;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px 10px 12px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,0.45), 0 3px 0 var(--red-dark);
  border: 2px solid var(--ink);
  max-width: 280px;
  animation: flash-pop 0.4s var(--easing) backwards;
}
.flash-pill[hidden] { display: none; }
.flash-pill .flash-bolt {
  font-size: 22px;
  animation: flash-zoom 1.5s ease-in-out infinite;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px var(--yellow));
}
.flash-pill .flash-content {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.flash-pill .flash-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flash-pill .flash-countdown {
  font-family: 'Patrick Hand', cursive;
  font-size: 12px;
  color: var(--paper);
  opacity: 0.9;
  margin-top: 1px;
}
@keyframes flash-zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18) rotate(-8deg); }
}
@keyframes flash-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
  .flash-pill { right: 12px; bottom: 88px; max-width: calc(100vw - 90px); }
  .flash-pill .flash-title { font-size: 12px; }
  .flash-pill .flash-countdown { font-size: 11px; }
}

/* =================== SHARE BUTTON =================== */
.share-btn {
  background: transparent;
  border: 1.5px dashed var(--kraft);
  color: var(--ink);
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.share-btn:hover {
  background: var(--cream-soft);
  transform: translateY(-1px);
}

/* =================== SHARE MODAL =================== */
.share-modal h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  margin-top: 14px;
  line-height: 1.2;
}
.share-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 22px 0 16px;
}
.share-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--paper);
  border: 1.5px dashed var(--kraft);
  border-radius: 12px;
  padding: 14px 12px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.2s var(--easing), background 0.2s, box-shadow 0.2s;
  text-decoration: none;
  min-height: 56px;
}
.share-opt:hover {
  transform: translateY(-2px) rotate(-0.5deg);
  background: var(--cream-soft);
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
}
.share-opt:active { transform: translateY(0); }
.share-opt .share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px; height: 28px;
}
.share-opt.copy .share-icon { color: var(--ink); }
.share-opt.copy:hover { background: var(--yellow-soft); border-color: var(--orange-deep); }
.share-url {
  font-family: monospace;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--cream-soft);
  border: 1px dashed var(--kraft);
  padding: 8px 12px;
  border-radius: 8px;
  word-break: break-all;
  text-align: center;
  margin-top: 4px;
}
@media (max-width: 480px) {
  .share-options { grid-template-columns: 1fr 1fr; gap: 8px; }
  .share-opt { font-size: 13px; padding: 12px 8px; min-height: 50px; }
  .share-opt .share-icon { width: 24px; height: 24px; }
}

/* Festive themes — usan --festive-color cuando es 'custom' */
body.theme-custom .red-stamp .stamp-bg { background: var(--festive-color, var(--red)) !important; }
body.theme-custom .marquee { border-top-color: var(--festive-color, var(--orange)) !important; border-bottom-color: var(--festive-color, var(--orange)) !important; }
body.theme-custom .btn-primary:hover { background: var(--festive-color, var(--red)) !important; }
body.theme-custom .blob-orange { background: radial-gradient(circle, var(--festive-color, var(--orange-glow)) 0%, transparent 65%) !important; opacity: 0.4; }

/* ===== Tema festivo: aplica de forma SUTIL a varios elementos ===== */
/* Cada tema define --festive-color (color principal) y --festive-color-2 (acento)
   y la página se baña sutilmente con esos tonos sin perder identidad. */

body.theme-custom { --festive-color: var(--festive-color, var(--red)); }
body.theme-navidad { --festive-color: #2a8a2a; --festive-color-2: #d63b36; }
body.theme-muertos { --festive-color: #b366d9; --festive-color-2: #ff8a3c; }
body.theme-patria  { --festive-color: #2a8a2a; --festive-color-2: #d63b36; }
body.theme-mama    { --festive-color: #e91e63; --festive-color-2: #ff8fab; }
body.theme-papa    { --festive-color: #1976d2; --festive-color-2: #64b5f6; }
body.theme-amor    { --festive-color: #e91e63; --festive-color-2: #ff8fab; }

/* Pintar la festive-badge con el color del tema */
body.theme-navidad .festive-badge { background: #2a8a2a; box-shadow: 0 3px 0 #1f6e1f; }
body.theme-mama    .festive-badge,
body.theme-amor    .festive-badge { background: #e91e63; box-shadow: 0 3px 0 #ad1457; }
body.theme-papa    .festive-badge { background: #1976d2; box-shadow: 0 3px 0 #0d47a1; }
body.theme-muertos .festive-badge { background: #b366d9; box-shadow: 0 3px 0 #7d2da4; }
body.theme-patria  .festive-badge { background: #2a8a2a; box-shadow: 0 3px 0 #1f6e1f; }

/* Aplicaciones SUTILES del color festivo a la página: */
body[class*="theme-"] .blob-yellow {
  background: radial-gradient(circle,
    color-mix(in srgb, var(--festive-color) 55%, var(--yellow)) 0%,
    transparent 65%) !important;
  opacity: 0.55;
}
body[class*="theme-"] .blob-orange {
  background: radial-gradient(circle,
    color-mix(in srgb, var(--festive-color) 35%, var(--orange-glow)) 0%,
    transparent 65%) !important;
  opacity: 0.5;
}
body[class*="theme-"] .marquee {
  border-top-color:    color-mix(in srgb, var(--festive-color) 70%, var(--orange)) !important;
  border-bottom-color: color-mix(in srgb, var(--festive-color) 70%, var(--orange)) !important;
}
body[class*="theme-"] .scroll-cue { color: var(--festive-color); }
body[class*="theme-"] .info-num,
body[class*="theme-"] .kicker      { color: color-mix(in srgb, var(--festive-color) 65%, var(--orange-deep)); }
body[class*="theme-"] .doodle-1,
body[class*="theme-"] .doodle-2,
body[class*="theme-"] .doodle-3,
body[class*="theme-"] .px-doodle   { color: color-mix(in srgb, var(--festive-color) 55%, var(--red)); }
body[class*="theme-"] .pin-doodles .px-doodle { color: var(--festive-color); }
body[class*="theme-"] .red-stamp .stamp-bg { background: var(--festive-color) !important; }
body[class*="theme-"] .info-foot   { border-top-color: color-mix(in srgb, var(--festive-color) 30%, rgba(139, 111, 71, 0.4)) !important; }
body[class*="theme-"] .hero-eyebrow { color: color-mix(in srgb, var(--festive-color) 50%, var(--kraft-dark)); }

/* === FESTIVE DECOR — sutil y específico por tema === */
.festive-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
  display: none;
}
.festive-decor.on { display: block; }

/* Confeti (símbolo flotante) — sutil */
.fd-confetti {
  position: absolute;
  color: var(--festive-color, var(--red));
  opacity: 0.32;
  pointer-events: none;
  animation: fd-float ease-in-out infinite;
  user-select: none;
}
@keyframes fd-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(15deg); }
}

/* Nieve cayendo (solo navidad) */
.fd-snow {
  position: absolute;
  top: -30px;
  color: #cfeaff;
  opacity: 0.55;
  text-shadow: 0 0 6px rgba(207, 234, 255, 0.8);
  animation: fd-snowfall linear infinite;
  user-select: none;
}
@keyframes fd-snowfall {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { transform: translateY(110vh) rotate(180deg); opacity: 0; }
}

/* Baubles colgantes (esferas con cuerda) — solo si las usa el tema */
.fd-bauble-wrap {
  position: absolute;
  top: 0;
  width: 24px;
  height: var(--drop, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.7;
}
.fd-bauble-string {
  width: 1px;
  flex: 1;
  background: rgba(0,0,0,0.25);
}
.fd-bauble {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
    color-mix(in srgb, var(--festive-color, var(--red)) 50%, #fff) 0%,
    var(--festive-color, var(--red)) 60%,
    color-mix(in srgb, var(--festive-color, var(--red)) 70%, #000) 100%);
  box-shadow: 0 6px 10px -3px rgba(0,0,0,0.3), inset 0 -2px 0 rgba(0,0,0,0.15);
  position: relative;
  animation: fd-bauble-swing 4s ease-in-out infinite;
  transform-origin: center -30px;
}
.fd-bauble::before {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  margin-left: -3px;
  width: 6px; height: 6px;
  background: linear-gradient(180deg, #d4a96a, #8b6f47);
  border-radius: 2px;
}
@keyframes fd-bauble-swing {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* Variantes por tema — color del confeti */
body.theme-navidad .fd-confetti { color: color-mix(in srgb, #2a8a2a 60%, var(--red)); }
body.theme-navidad .fd-confetti:nth-child(3n) { color: var(--red); }
body.theme-muertos .fd-confetti { color: #ff8a3c; }
body.theme-muertos .fd-confetti:nth-child(3n) { color: #b366d9; }
body.theme-patria  .fd-confetti { color: #2a8a2a; }
body.theme-patria  .fd-confetti:nth-child(3n) { color: var(--red); }
body.theme-patria  .fd-confetti:nth-child(5n) { color: #999; }
body.theme-mama    .fd-confetti { color: #ff8fab; }
body.theme-mama    .fd-confetti:nth-child(3n) { color: #e91e63; }
body.theme-amor    .fd-confetti { color: #e91e63; }
body.theme-amor    .fd-confetti:nth-child(3n) { color: #ff8fab; }
body.theme-papa    .fd-confetti { color: #1976d2; }
body.theme-papa    .fd-confetti:nth-child(3n) { color: #64b5f6; }
body.theme-custom  .fd-confetti { color: var(--festive-color, var(--red)); }

@media (prefers-reduced-motion: reduce) {
  .festive-decor { display: none !important; }
}

/* === SUTIL: cards también se tiñen con el tema festivo === */
body[class*="theme-"] .combo-card { border-top-color: var(--festive-color) !important; }
body[class*="theme-"] .combo-card:nth-child(2n) {
  border-top-color: color-mix(in srgb, var(--festive-color) 60%, var(--yellow)) !important;
}
body[class*="theme-"] .combo-card:nth-child(3n) {
  border-top-color: color-mix(in srgb, var(--festive-color) 75%, var(--red)) !important;
}
body[class*="theme-"] .combo-card .now {
  color: var(--festive-color);
}
body[class*="theme-"] .combo-name {
  color: color-mix(in srgb, var(--festive-color) 50%, var(--ink));
}

body[class*="theme-"] .promo-card {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--festive-color) 25%, transparent),
    var(--shadow-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body[class*="theme-"] .promo-num { color: var(--festive-color); }
body[class*="theme-"] .promo-card h3 em,
body[class*="theme-"] .promos-head h2 em,
body[class*="theme-"] .pin-head h2 em,
body[class*="theme-"] .combos-inner h2 em {
  color: var(--festive-color) !important;
}

body[class*="theme-"] .contact-card {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--festive-color) 20%, transparent),
    var(--shadow-deep),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
body[class*="theme-"] .contact-card h2 em,
body[class*="theme-"] .info-label,
body[class*="theme-"] .phone-number {
  color: var(--festive-color) !important;
}
body[class*="theme-"] .info-cta {
  color: var(--festive-color) !important;
  border-color: var(--festive-color) !important;
}
body[class*="theme-"] .info-cta:hover {
  background: var(--festive-color) !important;
  color: var(--paper) !important;
}

body[class*="theme-"] .challenge-card {
  border-color: color-mix(in srgb, var(--festive-color) 40%, transparent);
}
body[class*="theme-"] .challenge-label,
body[class*="theme-"] .challenge-reward {
  color: var(--festive-color) !important;
}

/* Calendario de horario: hoy se tiñe del color festivo */
body[class*="theme-"] .schedule-week .sw-cell.today {
  border-color: var(--festive-color) !important;
  box-shadow: 0 4px 0 var(--festive-color);
}

/* Stickers/floating pills */
body[class*="theme-"] .day-pill {
  box-shadow:
    0 8px 22px -6px rgba(0,0,0,0.45),
    0 3px 0 var(--festive-color);
}
body[class*="theme-"] .nextbatch-pill { background: var(--festive-color); }
body[class*="theme-"] .flash-pill { box-shadow: 0 8px 22px -6px rgba(0,0,0,0.45), 0 3px 0 var(--festive-color); }
body[class*="theme-"] .flash-pill .flash-title { color: color-mix(in srgb, var(--festive-color) 55%, var(--yellow)); }

/* Botones primarios: hover con color festivo */
body[class*="theme-"] .btn-primary:hover { background: var(--festive-color) !important; }

/* Stamp del hero (Tía Cleme) */
body[class*="theme-"] .red-stamp .stamp-bg {
  background: var(--festive-color) !important;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.12),
    0 6px 0 color-mix(in srgb, var(--festive-color) 60%, #000) !important;
}

/* === Iconos/elementos de los juegos toman el color del tema === */
/* Reflejos: el círculo target */
body[class*="theme-"] .reflex-target {
  background: radial-gradient(circle at 30% 30%,
    color-mix(in srgb, var(--festive-color) 35%, #fff) 0%,
    var(--festive-color) 70%) !important;
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--festive-color) 50%, rgba(0,0,0,0.2)),
    inset 0 -3px 0 rgba(0,0,0,0.2);
}
body[class*="theme-"] .reflex-stage { border-color: color-mix(in srgb, var(--festive-color) 50%, var(--kraft)); }

/* Dados: bordes y números */
body[class*="theme-"] .die {
  border-color: var(--festive-color);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--festive-color) 60%, #000),
              inset 0 -3px 0 rgba(0,0,0,0.06);
}
body[class*="theme-"] .die span,
body[class*="theme-"] .die {
  color: color-mix(in srgb, var(--festive-color) 70%, var(--ink));
}

/* Tragamonedas: marco de la máquina */
body[class*="theme-"] .slots-machine {
  border-color: var(--festive-color);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--festive-color) 60%, #000),
              inset 0 4px 0 rgba(255,255,255,0.06);
}

/* Ruleta: pointer y cap */
body[class*="theme-"] .wheel-pointer {
  border-bottom-color: var(--festive-color) !important;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--festive-color) 50%, rgba(0,0,0,0.3)));
}
body[class*="theme-"] .wheel-cap {
  border-color: var(--festive-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--festive-color) 30%, transparent),
              0 4px 10px rgba(0,0,0,0.3);
}

/* Cronómetro: borde sutil del display */
body[class*="theme-"] .timer-display-wrap {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--festive-color) 25%, transparent),
              var(--shadow-deep);
}
body[class*="theme-"] .timer-target strong { color: var(--festive-color); }

/* Tapes (cintas de las cards) */
body[class*="theme-"] .promo-card .tape {
  background: color-mix(in srgb, var(--festive-color) 25%, var(--tape));
}

/* Píldoras de pin-head */
body[class*="theme-"] .bestseller-pill {
  background: color-mix(in srgb, var(--festive-color) 35%, var(--yellow));
}

/* Stock badge low (rojo→festivo) — mantener agotado siempre rojo crítico */
body[class*="theme-"] .pin-info-stock-badge.low {
  background: var(--festive-color);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--festive-color) 50%, var(--ink));
}

/* Theme-specific extras */
body.theme-navidad .blob-orange { background: radial-gradient(circle, #ff6b6b 0%, rgba(255,107,107,0) 65%) !important; }

/* =================== REDUCED MOTION =================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-word] { opacity: 1; transform: none; }
  #bg-canvas { display: none; }
}