/* ============ Jugueticos — capa navideña ============
   Solo agrega decoración encima de la opción 1: no cambia las animaciones ni el comportamiento. */
:root {
  --pino: #0E7C3A;
  --pino-osc: #08582A;
  --rojo-nav: #E3262F;
  --oro: #FFC93C;
  --nieve: #FFFFFF;
  --sombrero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cpath d='M8 40 Q14 12 38 6 Q52 4 55 22 Q49 15 43 17 Q34 22 34 40 Z' fill='%23E3262F' stroke='%231A1033' stroke-width='3' stroke-linejoin='round'/%3E%3Crect x='3' y='35' width='38' height='12' rx='6' fill='%23fff' stroke='%231A1033' stroke-width='3'/%3E%3Ccircle cx='55' cy='23' r='6' fill='%23fff' stroke='%231A1033' stroke-width='3'/%3E%3C/svg%3E");
  --nieve-tapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M2 14 Q2 3 14 3 H86 Q98 3 98 14 Q98 20 92 20 Q88 20 87 26 Q85 30 81 26 Q79 20 70 21 Q62 22 60 18 Q56 14 50 19 Q46 23 44 27 Q42 30 39 26 Q37 21 30 20 Q22 19 18 22 Q12 25 8 21 Q2 20 2 14 Z' fill='%23fff' stroke='%231A1033' stroke-width='3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34'%3E%3Cg fill='%23E3262F' stroke='%231A1033' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M28 19 L17 33 L23 32 L30 21 Z'/%3E%3Cpath d='M32 19 L43 33 L37 32 L30 21 Z'/%3E%3Cpath d='M30 17 Q12 -1 4 9 Q-1 22 30 19 Z'/%3E%3Cpath d='M30 17 Q48 -1 56 9 Q61 22 30 19 Z'/%3E%3Ccircle cx='30' cy='18' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
  --acebo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cg stroke='%231A1033' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M22 18 Q12 4 2 8 Q6 11 3 15 Q8 15 7 20 Q12 17 14 22 Q17 18 22 18 Z' fill='%230E7C3A'/%3E%3Cpath d='M22 18 Q32 4 42 8 Q38 11 41 15 Q36 15 37 20 Q32 17 30 22 Q27 18 22 18 Z' fill='%2312A04B'/%3E%3Ccircle cx='19' cy='17' r='4' fill='%23E3262F'/%3E%3Ccircle cx='25.5' cy='16' r='4' fill='%23E3262F'/%3E%3Ccircle cx='22' cy='22.5' r='4' fill='%23E3262F'/%3E%3C/g%3E%3C/svg%3E");
  --copo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10'/%3E%3Cpath d='M9 4l3 3 3-3M9 20l3-3 3 3M2.6 10.5l4.1-.9-1.2-4M21.4 13.5l-4.1.9 1.2 4M2.6 13.5l4.1.9-1.2 4M21.4 10.5l-4.1-.9 1.2-4'/%3E%3C/g%3E%3C/svg%3E");
  --guirnalda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cpath d='M0 6 Q60 40 120 6' fill='none' stroke='%2308582A' stroke-width='14' stroke-linecap='round'/%3E%3Cpath d='M0 6 Q60 40 120 6' fill='none' stroke='%2312A04B' stroke-width='8' stroke-dasharray='3 5' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='30' r='7' fill='%23E3262F' stroke='%231A1033' stroke-width='2'/%3E%3Ccircle cx='57.5' cy='27.5' r='2' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='24' cy='19' r='5' fill='%23FFC93C' stroke='%231A1033' stroke-width='2'/%3E%3Ccircle cx='96' cy='19' r='5' fill='%23FFC93C' stroke='%231A1033' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- Luces en la barra ---------- */
.barra { position: sticky; }
.luces { position: absolute; left: 0; right: 0; top: 100%; height: 34px; pointer-events: none; z-index: 1; }
.luces svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.luces i {
  --c: var(--rojo-nav);
  position: absolute; width: 10px; height: 15px; margin-left: -5px;
  background: var(--c); border: 1.5px solid var(--tinta); border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%;
  box-shadow: 0 0 10px 3px color-mix(in srgb, var(--c) 70%, transparent);
  transform: rotate(var(--r, 0deg)); transform-origin: 50% -4px;
  animation: brillar 1.8s ease-in-out infinite alternate; animation-delay: var(--d, 0s);
}
.luces i::before { content: ""; position: absolute; left: 1.5px; top: -5px; width: 4px; height: 5px; background: #3a3550; border-radius: 1px; }
@keyframes brillar { from { opacity: 1; filter: brightness(1.15); } to { opacity: .45; box-shadow: none; filter: brightness(.8); } }

/* Botón de nieve */
.btn-icono .copo-off { display: none; }
.btn-icono[aria-pressed="false"] .copo-on { opacity: .35; }

/* ---------- Logo con gorro ---------- */
.logo-cubo { position: relative; }
.logo-cubo::after { content: ""; position: absolute; width: 38px; height: 32px; top: -20px; right: -16px; background: var(--sombrero) no-repeat center / contain; transform: rotate(18deg); }

/* ---------- Hero: nieve en los bloques, gorro en la J ---------- */
.bloque { position: relative; }
.bloque::before {
  content: ""; position: absolute; left: -6%; right: -6%; top: -9%; height: 30%;
  background: var(--nieve-tapa) no-repeat center / 100% 100%; pointer-events: none;
}
.marca-fila:first-child .bloque:first-child::after {
  content: ""; position: absolute; width: 74%; aspect-ratio: 60 / 50; top: -44%; left: -14%;
  background: var(--sombrero) no-repeat center / contain; transform: rotate(-16deg); pointer-events: none;
}
.punto-com { position: relative; }
.punto-com::after { content: ""; position: absolute; width: 36px; height: 25px; top: -16px; right: -14px; background: var(--acebo) no-repeat center / contain; }
.hero::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -2px; height: 58px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 58' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q40 6 90 24 T190 22 T300 20 T400 26 V58 H0 Z' fill='%23fff' stroke='%231A1033' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

/* Cuenta regresiva */
.cuenta-navidad {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 10px 18px 10px 14px; position: relative;
  background: var(--rojo-nav); color: var(--papel); border: var(--borde); border-radius: 16px; box-shadow: var(--sombra);
  transform: rotate(-3deg);
}
.cuenta-navidad::before { content: ""; position: absolute; inset: 5px; border: 2px dashed rgba(255, 255, 255, .6); border-radius: 11px; pointer-events: none; }
.cuenta-navidad::after { content: ""; position: absolute; width: 44px; height: 30px; top: -18px; left: -12px; background: var(--acebo) no-repeat center / contain; transform: rotate(-20deg); }
.cn-num { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; padding-top: 4px; color: var(--sol); -webkit-text-stroke: 2px var(--tinta); paint-order: stroke fill; }
.cn-txt { font-family: var(--f-mano); font-size: 1.35rem; line-height: 1.05; }

/* ---------- Máquina de cápsulas navideña ---------- */
.gacha-tapa::before { content: ""; position: absolute; left: -5%; right: -5%; top: -10px; height: 22px; background: var(--nieve-tapa) no-repeat center / 100% 100%; }
.gacha-tapa::after { content: ""; position: absolute; width: 74px; height: 42px; top: -32px; left: 50%; margin-left: -37px; background: var(--mono) no-repeat center / contain; }
.gacha::after {
  content: ""; position: absolute; z-index: 4; width: 46px; height: 150px; right: -30px; bottom: 16px; transform: rotate(10deg); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 130'%3E%3Cpath d='M14 126 V32 Q14 10 26 10 Q36 10 36 24' fill='none' stroke='%231A1033' stroke-width='15' stroke-linecap='round'/%3E%3Cpath d='M14 126 V32 Q14 10 26 10 Q36 10 36 24' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M14 126 V32 Q14 10 26 10 Q36 10 36 24' fill='none' stroke='%23E3262F' stroke-width='9' stroke-dasharray='7 7'/%3E%3C/svg%3E") no-repeat center / contain;
}
.domo-luces { position: absolute; left: 0; right: auto; top: 36px; width: 100%; height: auto; aspect-ratio: 1; z-index: 4; pointer-events: none; }
.domo-luces i { position: absolute; width: 11px; height: 16px; margin: -8px 0 0 -5.5px; }
.gacha-zona::after {
  content: ""; position: absolute; z-index: 3; width: 150px; height: 92px; left: max(0px, calc(50% - 330px)); bottom: 8px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 92'%3E%3Cg stroke='%231A1033' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='4' y='40' width='62' height='50' rx='5' fill='%2322CC8E'/%3E%3Crect x='30' y='40' width='10' height='50' fill='%23FFC93C'/%3E%3Crect x='4' y='58' width='62' height='9' fill='%23FFC93C'/%3E%3Crect x='70' y='52' width='44' height='38' rx='5' fill='%23FF5FA8'/%3E%3Crect x='87' y='52' width='9' height='38' fill='%23fff'/%3E%3Crect x='96' y='8' width='50' height='42' rx='5' fill='%237B4DFF' transform='rotate(8 121 29)'/%3E%3Cpath d='M118 9 l4 41' stroke='%23E3262F' stroke-width='8'/%3E%3Cpath d='M35 40 Q22 24 18 34 Q16 42 35 40 Q48 24 52 34 Q54 42 35 40Z' fill='%23E3262F'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.premio-carta::before { content: ""; position: absolute; width: 90px; height: 52px; top: -34px; left: 50%; margin-left: -45px; background: var(--mono) no-repeat center / contain; }

/* ---------- Cinta de bastón de caramelo ---------- */
.cinta { position: relative; }
.cinta::before, .cinta::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--rojo-nav) 0 10px, #fff 10px 20px); }
.cinta::before { top: 0; } .cinta::after { bottom: 0; }

/* ---------- Títulos con acebo ---------- */
.titulo::after { content: ""; display: inline-block; width: .9em; height: .62em; margin-left: .18em; vertical-align: .3em; background: var(--acebo) no-repeat center / contain; }

/* ---------- Cajas de mundos convertidas en regalos ---------- */
.caja-frente > * { position: relative; z-index: 1; }
.caja-frente::before, .caja-frente::after { content: ""; position: absolute; background: repeating-linear-gradient(90deg, #fff 0 5px, var(--rojo-nav) 5px 10px); border: 2.5px solid var(--tinta); pointer-events: none; }
.caja-frente::before { top: -3px; bottom: -3px; left: 50%; width: 22px; margin-left: -11px; }
.caja-frente::after { left: -3px; right: -3px; top: 16px; height: 20px; background: repeating-linear-gradient(0deg, #fff 0 5px, var(--rojo-nav) 5px 10px); }
.caja-tapa::after { content: ""; position: absolute; width: 70px; height: 40px; left: 50%; margin-left: -35px; top: -30px; background: var(--mono) no-repeat center / contain; }
.caja-tapa::before { content: ""; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 22px; margin-left: -11px; background: repeating-linear-gradient(90deg, #fff 0 5px, var(--rojo-nav) 5px 10px); border-left: 2.5px solid var(--tinta); border-right: 2.5px solid var(--tinta); }

/* ---------- Álbum con copos ---------- */
.seccion-stickers { position: relative; isolation: isolate; }
.seccion-stickers::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--copo) 0 0 / 46px 46px; opacity: .3; -webkit-mask: linear-gradient(#000, transparent 75%); mask: linear-gradient(#000, transparent 75%); pointer-events: none; }

/* ---------- Banda: el taller de Santa ---------- */
.banda { padding-top: 54px; }
.banda::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; background: var(--guirnalda) repeat-x 0 0 / 120px 44px; z-index: 3; pointer-events: none; }
.paquete::after { content: ""; position: absolute; width: 44px; height: 36px; top: -24px; left: -14px; background: var(--sombrero) no-repeat center / contain; transform: rotate(-22deg); pointer-events: none; }

/* ---------- Pasillo: guirnalda, moños y bolas ---------- */
.catalogo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; background: var(--guirnalda) repeat-x 0 -6px / 120px 44px; pointer-events: none; }
.catalogo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 46px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 46' preserveAspectRatio='none'%3E%3Cpath d='M0 24 Q50 4 100 20 T210 18 T320 22 T400 16 V46 H0 Z' fill='%23fff' stroke='%231A1033' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}
.pestana::after { content: ""; position: absolute; width: 34px; height: 20px; right: 8px; top: 2px; background: var(--mono) no-repeat center / contain; }
.blister:nth-child(3n+2) .gancho::after, .blister:nth-child(5n+4) .gancho::after {
  content: ""; position: absolute; top: 6px; left: 18px; width: 26px; height: 36px; border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 42'%3E%3Cpath d='M15 0 V9' stroke='%23c9cbe0' stroke-width='2'/%3E%3Crect x='10.5' y='8' width='9' height='6' rx='1' fill='%23FFC93C' stroke='%231A1033' stroke-width='2'/%3E%3Ccircle cx='15' cy='27' r='12' fill='%23E3262F' stroke='%231A1033' stroke-width='2.5'/%3E%3Cpath d='M5 25 Q15 30 25 25' stroke='%23FFC93C' stroke-width='2.5' fill='none'/%3E%3Cellipse cx='10.5' cy='22' rx='2.6' ry='3.6' fill='%23fff' opacity='.65'/%3E%3C/svg%3E") no-repeat center / contain;
}
.blister:nth-child(5n+4) .gancho::after { left: auto; right: 18px; filter: hue-rotate(130deg) saturate(1.1); }
.blister:nth-child(7n) .gancho::after {
  content: ""; position: absolute; top: 6px; left: 18px; width: 26px; height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 42'%3E%3Cpath d='M15 0 V9' stroke='%23c9cbe0' stroke-width='2'/%3E%3Crect x='10.5' y='8' width='9' height='6' rx='1' fill='%23E3262F' stroke='%231A1033' stroke-width='2'/%3E%3Ccircle cx='15' cy='27' r='12' fill='%23FFC93C' stroke='%231A1033' stroke-width='2.5'/%3E%3Cpath d='M15 18 l2.5 5.5 6 .5 -4.6 3.9 1.5 5.9 -5.4 -3.2 -5.4 3.2 1.5 -5.9 -4.6 -3.9 6 -.5 Z' fill='%23fff' stroke='%231A1033' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.filtros::after { content: ""; position: absolute; width: 50px; height: 34px; top: -18px; right: 22px; background: var(--acebo) no-repeat center / contain; transform: rotate(12deg); pointer-events: none; }
.filtros { position: sticky; }

/* ---------- Cómo pedir ---------- */
.paso-n::before { content: ""; position: absolute; left: -10%; right: -10%; top: -10px; height: 24px; background: var(--nieve-tapa) no-repeat center / 100% 100%; }

/* ---------- Pie: noche estrellada, pinos y trineo ---------- */
.tren-via::before {
  content: ""; position: absolute; inset: 0 0 20px; pointer-events: none;
  background:
    radial-gradient(circle at 92% 26%, #FFF4CC 0 22px, transparent 23px),
    radial-gradient(circle at 90.6% 22%, var(--tinta) 0 20px, transparent 21px),
    radial-gradient(1.5px 1.5px at 8% 20%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 18% 46%, #fff 99%, transparent),
    radial-gradient(2px 2px at 27% 14%, #FFF4CC 99%, transparent),
    radial-gradient(1.5px 1.5px at 39% 34%, #fff 99%, transparent),
    radial-gradient(2px 2px at 51% 12%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 60% 40%, #FFF4CC 99%, transparent),
    radial-gradient(1.5px 1.5px at 71% 18%, #fff 99%, transparent),
    radial-gradient(2px 2px at 80% 44%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 97% 60%, #fff 99%, transparent);
}
.pinos { position: absolute; left: 0; right: 0; bottom: 6px; height: 74px; z-index: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 74'%3E%3Cg stroke='%23000' stroke-width='2.5' stroke-linejoin='round'%3E%3Crect x='36' y='60' width='8' height='12' fill='%235D4037'/%3E%3Cpath d='M40 6 L62 40 H50 L70 62 H10 L30 40 H18 Z' fill='%230E7C3A'/%3E%3Cpath d='M40 6 L48 18 Q40 22 32 18 Z' fill='%23fff'/%3E%3Crect x='176' y='58' width='7' height='14' fill='%235D4037'/%3E%3Cpath d='M180 20 L196 44 H188 L202 62 H158 L172 44 H164 Z' fill='%2308582A'/%3E%3Cpath d='M180 20 L186 29 Q180 32 174 29 Z' fill='%23fff'/%3E%3C/g%3E%3Cg fill='%23FFC93C'%3E%3Ccircle cx='34' cy='36' r='2.5'/%3E%3Ccircle cx='50' cy='52' r='2.5'/%3E%3Ccircle cx='28' cy='56' r='2.5'/%3E%3Ccircle cx='184' cy='50' r='2.5'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / 260px 74px; }
.tren { z-index: 2; }
.trineo { position: absolute; top: 10px; left: 0; width: 210px; height: 66px; z-index: 1; pointer-events: none; animation: trineo 26s linear infinite; animation-delay: -8s; }
.trineo svg { width: 100%; height: 100%; animation: flotaTrineo 2.4s ease-in-out infinite alternate; }
@keyframes trineo { from { transform: translateX(105vw); } to { transform: translateX(-260px); } }
@keyframes flotaTrineo { from { transform: translateY(-4px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }
.loco em::after { content: ""; position: absolute; width: 30px; height: 25px; top: -27px; left: 4px; background: var(--sombrero) no-repeat center / contain; transform: rotate(-10deg); }
.pie-feliz { margin: 10px 0 0; font-family: var(--f-mano); font-size: 1.45rem; color: var(--sol); }

/* ---------- Bolsa, ficha y aviso ---------- */
.bolsa-asas::after { content: ""; position: absolute; width: 80px; height: 46px; left: 50%; margin-left: -40px; top: 26px; background: var(--mono) no-repeat center / contain; z-index: 2; }
.solapa::after { content: ""; position: absolute; top: 0; bottom: 0; width: 16px; background: var(--rojo-nav); border-left: 2px solid var(--tinta); border-right: 2px solid var(--tinta); }
.solapa-izq::after { right: -2px; } .solapa-der::after { left: -2px; }
.tag-regalo {
  position: relative; display: inline-block; margin: 0 0 10px; padding: 4px 14px 4px 22px; font-family: var(--f-mano); font-size: 1.15rem;
  background: var(--kraft); border: 2.5px solid var(--tinta); border-radius: 4px 12px 12px 4px; transform: rotate(-2deg);
}
.tag-regalo::before { content: ""; position: absolute; left: 7px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--papel); border: 2px solid var(--tinta); }
.aviso { border-color: var(--rojo-nav); }

/* ---------- Nieve que cae ---------- */
.nieve { position: fixed; inset: 0; z-index: 35; pointer-events: none; width: 100%; height: 100%; }

@media (max-width: 700px) {
  .gacha::after { right: -14px; width: 34px; height: 116px; }
  .gacha-zona::after { width: 110px; height: 68px; left: 4px; }
  .hero::after { height: 40px; }
  .cn-num { font-size: 2.1rem; }
  .pestana::after { width: 26px; right: 4px; }
  .blister:nth-child(3n+2) .gancho::after, .blister:nth-child(5n+4) .gancho::after, .blister:nth-child(7n) .gancho::after { width: 20px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .trineo { display: none; }
  .luces i { animation: none; }
}