/* Temas de temporada: solo cambian colores. Se activan con data-temporada en <html> (lo pone el panel,
   sección Sitio → Tema de temporada) y se apagan solos después de data-temporada-hasta.
   Sin data-temporada, la web usa el tema normal "atardecer" de estilos.css. */

/* ---------- Halloween (colores del anuncio "Anuncio IG - Halloween", paleta Calabaza) ---------- */
[data-theme="atardecer"][data-temporada="halloween"] {
  --hw1: #ffb547; --hw2: #ff7a1a; --hw3: #8b4dff; --hw4: #9be15d;
  --color-bg: #0c0812; --color-surface: #1a1024; --color-text: #f3ecf6;
  --color-accent: var(--hw2); --color-accent-2: var(--hw3);
  --glow: #24123a; --color-amber: var(--hw1); --color-pink: var(--hw3);
  --grad: linear-gradient(90deg, var(--hw1) 0%, var(--hw2) 50%, var(--hw3) 100%); --grad-ink: #140a1c;
}
[data-temporada="halloween"] .marca-games { background-image: linear-gradient(90deg, #ffb547 0%, #ff7a1a 50%, #8b4dff 100%); }
[data-temporada="halloween"] #kg-grad stop:nth-child(1) { stop-color: #ffb547; }
[data-temporada="halloween"] #kg-grad stop:nth-child(2) { stop-color: #ff7a1a; }
[data-temporada="halloween"] #kg-grad stop:nth-child(3) { stop-color: #8b4dff; }
/* "Ahorras…" en verde, como los descuentos del anuncio. */
[data-temporada="halloween"] .promo-ahorro {
  color: var(--hw4); background: color-mix(in oklab, var(--hw4) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hw4) 40%, transparent);
}
/* Barra de desplazamiento */
[data-temporada="halloween"]::-webkit-scrollbar-thumb, [data-temporada="halloween"] ::-webkit-scrollbar-thumb { background-image: linear-gradient(180deg, #ffb547 0%, #ff7a1a 50%, #8b4dff 100%); }
[data-temporada="halloween"]::-webkit-scrollbar-button:single-button:vertical:decrement, [data-temporada="halloween"] ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2 9 8H1Z' fill='%23ffb547'/%3E%3C/svg%3E"); }
[data-temporada="halloween"]::-webkit-scrollbar-button:single-button:vertical:increment, [data-temporada="halloween"] ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 8 1 2h8Z' fill='%238b4dff'/%3E%3C/svg%3E"); }
[data-temporada="halloween"]::-webkit-scrollbar-button:single-button:horizontal:decrement, [data-temporada="halloween"] ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5 8 1v8Z' fill='%23ffb547'/%3E%3C/svg%3E"); }
[data-temporada="halloween"]::-webkit-scrollbar-button:single-button:horizontal:increment, [data-temporada="halloween"] ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8 5 2 9V1Z' fill='%238b4dff'/%3E%3C/svg%3E"); }
@supports (-moz-appearance: none) { [data-temporada="halloween"], [data-temporada="halloween"] * { scrollbar-color: #ff7a1a transparent; } }

/* Decoración (del anuncio de Halloween): telaraña arriba a la izquierda y abajo a la derecha (sin araña colgando).
   Detrás del contenido y sin capturar clics. */
[data-temporada="halloween"] .pagina { position: relative; isolation: isolate; }
[data-temporada="halloween"] .pagina::before, [data-temporada="halloween"] .pagina::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; background: no-repeat center / contain;
}
[data-temporada="halloween"] .pagina::before { top: 0; left: 0; width: clamp(150px, 22vw, 300px); aspect-ratio: 1; background-image: url("../img/halloween/telarana.svg"); opacity: .3; }
[data-temporada="halloween"] .pagina::after { position: fixed; bottom: 0; right: 0; width: clamp(120px, 17vw, 230px); aspect-ratio: 1; background-image: url("../img/halloween/telarana.svg"); opacity: .2; transform: scale(-1, -1); }
/* En celular la telaraña de abajo queda al final de la página (fija taparía el resumen y los botones). */
@media (max-width: 759.98px) { [data-temporada="halloween"] .pagina::after { position: absolute; } }

/* ---------- Navidad: invierno con detalles rojos (propuesta elegida, variante 1) ---------- */
[data-theme="atardecer"][data-temporada="navidad"] {
  --nv1: #e8f4ff; --nv2: #7cc4ff; --nv3: #b9a8ff; --nv-rojo: #e5383b;
  --color-bg: #0b0d14; --color-surface: #161a26; --color-text: #eef3fa;
  --color-accent: var(--nv2); --color-accent-2: var(--nv3);
  --glow: #1c2440; --color-amber: var(--nv1); --color-pink: var(--nv3);
  --grad: linear-gradient(90deg, var(--nv1) 0%, var(--nv2) 50%, var(--nv3) 100%); --grad-ink: #0b0d14;
}
[data-temporada="navidad"] .pagina {
  background: radial-gradient(900px 520px at 85% -10%, color-mix(in oklab, #7cc4ff 22%, transparent), transparent 70%),
    radial-gradient(800px 480px at -10% 30%, color-mix(in oklab, #b9a8ff 14%, transparent), transparent 70%), var(--color-bg);
}
[data-temporada="navidad"] .marca-games { background-image: linear-gradient(90deg, #e8f4ff 0%, #7cc4ff 50%, #b9a8ff 100%); }
[data-temporada="navidad"] #kg-grad stop:nth-child(1) { stop-color: #e8f4ff; }
[data-temporada="navidad"] #kg-grad stop:nth-child(2) { stop-color: #7cc4ff; }
[data-temporada="navidad"] #kg-grad stop:nth-child(3) { stop-color: #b9a8ff; }
[data-temporada="navidad"] .promo-ahorro {
  color: #a8d8ff; background: color-mix(in oklab, #7cc4ff 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, #7cc4ff 40%, transparent);
}
/* El rojo: "Mejor valor" (con estrella en vez de llama) y el borde de la promo destacada. */
[data-temporada="navidad"] .promo.destacada {
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, #e5383b 18%, var(--color-surface)), var(--color-surface) 60%) padding-box,
    linear-gradient(#e5383b, #e5383b) border-box;
  box-shadow: 0 18px 50px -20px color-mix(in oklab, #e5383b 45%, transparent);
}
[data-temporada="navidad"] .promo.destacada .insignia { background: #e5383b; color: #fff; box-shadow: 0 6px 18px -6px color-mix(in oklab, #e5383b 60%, transparent); }
[data-temporada="navidad"] .promo.destacada .insignia svg { display: none; }
[data-temporada="navidad"] .promo.destacada .insignia::before { content: "★"; font-size: 11px; }
/* Barra de desplazamiento */
[data-temporada="navidad"]::-webkit-scrollbar-thumb, [data-temporada="navidad"] ::-webkit-scrollbar-thumb { background-image: linear-gradient(180deg, #e8f4ff 0%, #7cc4ff 50%, #b9a8ff 100%); }
[data-temporada="navidad"]::-webkit-scrollbar-button:single-button:vertical:decrement, [data-temporada="navidad"] ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2 9 8H1Z' fill='%23e8f4ff'/%3E%3C/svg%3E"); }
[data-temporada="navidad"]::-webkit-scrollbar-button:single-button:vertical:increment, [data-temporada="navidad"] ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 8 1 2h8Z' fill='%23b9a8ff'/%3E%3C/svg%3E"); }
@supports (-moz-appearance: none) { [data-temporada="navidad"], [data-temporada="navidad"] * { scrollbar-color: #7cc4ff transparent; } }
/* Decoración: guirnalda de luces bajo la cabecera y nieve cayendo detrás del contenido (sin capturar clics). */
[data-temporada="navidad"] .pagina { position: relative; isolation: isolate; }
[data-temporada="navidad"] .pagina::before, [data-temporada="navidad"] .pagina::after, [data-temporada="navidad"] .pagina > main::before {
  content: ""; pointer-events: none; z-index: -1;
}
[data-temporada="navidad"] .pagina > main::before {
  position: absolute; top: 72px; left: 0; right: 0; height: 40px; z-index: -1;
  background: url("../img/navidad/guirnalda.svg") repeat-x left top / 240px 40px; opacity: .9;
}
[data-temporada="navidad"] .pagina::before, [data-temporada="navidad"] .pagina::after {
  position: fixed; left: 0; right: 0; top: -100vh; height: 200vh; will-change: transform;
}
[data-temporada="navidad"] .pagina::before { background: url("../img/navidad/nieve.svg") repeat 0 0 / 300px 300px; opacity: .5; animation: kg-nieve 40s linear infinite; }
[data-temporada="navidad"] .pagina::after { background: url("../img/navidad/nieve-grande.svg") repeat 120px 40px / 420px 420px; opacity: .35; animation: kg-nieve-grande 26s linear infinite; }
@keyframes kg-nieve { to { transform: translateY(300px); } }
@keyframes kg-nieve-grande { to { transform: translateY(420px); } }
@media (max-width: 759.98px) {
  [data-temporada="navidad"] .pagina > main::before { top: 58px; background-size: 150px 25px; height: 25px; opacity: .75; }
  [data-temporada="navidad"] .pagina::after { display: none; }   /* en celular, una sola capa de nieve */
}
@media (prefers-reduced-motion: reduce) { [data-temporada="navidad"] .pagina::before, [data-temporada="navidad"] .pagina::after { animation: none; } }

/* Fondo vivo (como la nieve de Navidad): brasas naranjas, ámbar y moradas que suben lento, detrás del contenido. */
[data-temporada="halloween"] .pagina > main::after, [data-temporada="halloween"] .pie::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 200vh; z-index: -1; pointer-events: none; will-change: transform;
}
[data-temporada="halloween"] .pagina > main::after { background: url("../img/halloween/brasas.svg") repeat 0 0 / 300px 300px; opacity: .45; animation: kg-brasas 45s linear infinite; }
[data-temporada="halloween"] .pie::before { background: url("../img/halloween/brasas-grandes.svg") repeat 90px 30px / 420px 420px; opacity: .35; animation: kg-brasas-grandes 30s linear infinite; }
@keyframes kg-brasas { to { transform: translateY(-300px); } }
@keyframes kg-brasas-grandes { to { transform: translateY(-420px); } }
@media (max-width: 759.98px) { [data-temporada="halloween"] .pie::before { display: none; } }
@media (prefers-reduced-motion: reduce) { [data-temporada="halloween"] .pagina > main::after, [data-temporada="halloween"] .pie::before { animation: none; } }

/* ---------- Banner del Especial Terror (index.html → terror.html): solo con el tema de Halloween ---------- */
.banner-terror-caja { display: none; }
[data-temporada="halloween"] .banner-terror-caja { display: block; position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; box-sizing: border-box; padding: var(--space-4) var(--gutter) 0; }
.banner-terror { position: relative; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); padding: 16px clamp(16px, 3vw, 24px);
  border-radius: 16px; border: 1.5px solid transparent; color: #f3ecf6; text-decoration: none;
  background: radial-gradient(120% 220% at 100% 0%, #2a1640, #0c0812 70%) padding-box, linear-gradient(90deg, #ffb547 0%, #ff7a1a 50%, #8b4dff 100%) border-box;
  box-shadow: 0 18px 50px -24px rgba(255, 122, 26, .6); transition: transform .15s ease, box-shadow .15s ease; }
.banner-terror:hover { color: #f3ecf6; transform: translateY(-1px); box-shadow: 0 22px 60px -22px rgba(255, 122, 26, .75); }
.banner-terror:focus-visible { outline: 2px solid #ffb547; outline-offset: 3px; }
.banner-terror-textos { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 300px; }
.banner-terror-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9be15d; white-space: nowrap; }
.banner-terror-titulo { font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.terror-texto-grad { background: linear-gradient(90deg, #ffb547, #ff7a1a, #8b4dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.banner-terror-precios { display: flex; flex-wrap: wrap; gap: 8px; }
.banner-terror-precios > span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 122, 26, .12); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .4); font-size: 13px; white-space: nowrap; }
.banner-terror-precios > span.morado { background: rgba(139, 77, 255, .18); box-shadow: inset 0 0 0 1px rgba(139, 77, 255, .55); }
.banner-terror-precios b { font-weight: 600; }
.bt-moneda { margin-left: 3px; font-size: .72em; font-weight: 600; opacity: .75; }
.banner-terror-boton { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(90deg, #ffb547, #ff7a1a, #8b4dff);
  color: #140a1c; font-size: 14px; font-weight: 700; white-space: nowrap; }
/* Escritorio: todo en una sola fila; entre 760 y 1100 px, textos arriba y packs + botón en la fila de abajo.
   Precios cortos (Chile, US$): píldoras de una línea. Precios aproximados largos (≈ $151.000 COP; clase
   .precios-largos, la pone app.js según el país): mini tarjetas con el nombre arriba y el precio abajo, para que quepan. */
@media (min-width: 760px) {
  .banner-terror-textos { flex-basis: 100%; }
  .banner-terror-precios { flex-wrap: nowrap; }
  .banner-terror-boton { margin-left: auto; }
  .banner-terror-kicker { letter-spacing: .1em; }
  .banner-terror-precios > span { padding: 6px 11px; }
  .precios-largos .banner-terror-precios > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px; border-radius: 12px; line-height: 1.2; }
  .precios-largos .bt-que { font-size: 11.5px; color: #e6dbec; }
  .precios-largos .bt-sep { display: none; }
  .precios-largos .banner-terror-precios b { font-size: 14px; font-weight: 700; color: #f3ecf6; }
}
/* Pantallas angostas (760–880 px): ni las píldoras cortas caben junto al botón; mini tarjetas para todos. */
@media (min-width: 760px) and (max-width: 879.98px) {
  .banner-terror-precios > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px; border-radius: 12px; line-height: 1.2; }
  .bt-que { font-size: 11.5px; color: #e6dbec; }
  .bt-sep { display: none; }
  .banner-terror-precios b { font-size: 14px; font-weight: 700; color: #f3ecf6; }
}
/* Una sola fila desde donde caben: píldoras 1180 px; mini tarjetas (más angostas) 1100 px. */
@media (min-width: 1180px) {
  .banner-terror { flex-wrap: nowrap; }
  .banner-terror-textos { flex: 1 0 auto; }
}
@media (min-width: 1100px) {
  .banner-terror.precios-largos { flex-wrap: nowrap; }
  .precios-largos .banner-terror-textos { flex: 1 0 auto; }
}
/* Celular: todo centrado; los tres packs como mini tarjetas en una fila (nombre arriba, precio abajo). */
@media (max-width: 759.98px) {
  .banner-terror { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 14px 14px; text-align: center;
    background: radial-gradient(140% 120% at 50% 0%, #2a1640, #0c0812 75%) padding-box, linear-gradient(90deg, #ffb547 0%, #ff7a1a 50%, #8b4dff 100%) border-box; }
  .banner-terror-textos { flex: none; align-items: center; gap: 6px; }
  .banner-terror-kicker { display: block; white-space: normal; font-size: 10.5px; letter-spacing: .12em; line-height: 1.5; }
  .banner-terror-kicker svg { display: inline; vertical-align: -2px; margin-right: 5px; }
  .banner-terror-titulo { font-size: 24px; }
  .banner-terror-precios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .banner-terror-precios > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 8px 4px; border-radius: 12px; white-space: normal; line-height: 1.2; }
  .bt-que { font-size: 11.5px; color: #e6dbec; }
  .bt-sep { display: none; }
  .banner-terror-precios b { font-size: 15px; font-weight: 700; color: #f3ecf6; white-space: nowrap; }
  /* Precios aproximados (≈ $152.000 COP): monto un poco más chico y el código de moneda en su propia línea, igual en las tres. */
  .precios-largos .banner-terror-precios b { font-size: 14px; }
  .precios-largos .bt-moneda { display: block; margin: 1px 0 0; font-size: 10px; letter-spacing: .06em; }
  @media (max-width: 359.98px) { .precios-largos .banner-terror-precios b { font-size: 12.5px; } }   /* ≈ ₲ 276.000 en teléfonos de 320 px */
  .banner-terror-boton { justify-content: center; padding: 11px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .banner-terror { transition: none; } }