/* =====================================================================
   CRISPA — TEMÁTICAS DE TEMPORADA
   Se activan con la clase "season-<id>" en <html> (js/seasons.js).
   Colores de cada temporada: --season, --season-soft, --season-ribbon.
   ===================================================================== */

/* Escenario en celular */
@media (max-width: 768px) {
  .stage { padding-top: 16px; }
  .stage .hero-banner-container { margin-bottom: 0; }
}

/* ---------------------------------------------------------------------
   Detalles comunes a todas las temporadas
   --------------------------------------------------------------------- */
html.season .ticker-wrapper { background: color-mix(in srgb, var(--season) 72%, #000); }
.season-gem { display: inline-block; width: 6px; height: 6px; background: var(--accent-color); transform: rotate(45deg); margin-right: 2px; }
html.season .logo-sub { color: var(--season); opacity: .9; }

/* Adornos que cuelgan sobre el escenario */
.stage-deco { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hang {
  position: absolute; top: 0; left: var(--x); width: 50px; margin-left: -25px;
  transform-origin: 50% 0; animation: hangSwing 4.6s ease-in-out var(--dl, 0s) infinite alternate;
}
.hang::before {
  content: ''; display: block; width: 1px; height: var(--len); margin: 0 auto;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent-color) 30%, transparent), var(--accent-color));
}
.hang-orn { display: block; animation: hangDrop 1.4s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--dl, 0s) + .4s); }
.hang-orn svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .4)); }
.hang-1 { width: 58px; margin-left: -29px; }
.hang-2 { width: 38px; margin-left: -19px; }
.hang-3 { width: 46px; margin-left: -23px; }
@keyframes hangSwing { from { transform: rotate(var(--sw, 3deg)); } to { transform: rotate(calc(var(--sw, 3deg) * -1)); } }
@keyframes hangDrop { from { transform: translateY(-140px); opacity: 0; } }

/* Partículas con CSS (celular, o si no hay 3D) */
.flakes { display: none; position: absolute; inset: 0; overflow: hidden; }
.stage.no-webgl .flakes { display: block; }
.flake {
  position: absolute; top: -10px; left: var(--fx); width: var(--fs); height: var(--fs); border-radius: 50%;
  background: var(--accent-color); opacity: .7;
  animation: flakeFall var(--fd) linear var(--fdl) infinite;
}
@keyframes flakeFall {
  0% { transform: translate(0, 0); }
  50% { transform: translate(14px, 50vh); }
  100% { transform: translate(-6px, 110vh); }
}

/* ---------------------------------------------------------------------
   Franja de temporada con cuenta regresiva
   --------------------------------------------------------------------- */
.season-band {
  position: relative; overflow: hidden; isolation: isolate; margin-bottom: 52px;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px;
  padding: 22px 34px; border-radius: var(--radius-l); color: var(--ivory);
  background:
    radial-gradient(circle at 6% 50%, color-mix(in srgb, var(--accent-color) 30%, transparent) 0, transparent 150px),
    linear-gradient(110deg, color-mix(in srgb, var(--season) 55%, #000), var(--season));
  box-shadow: 0 30px 40px -30px rgba(0, 0, 0, .55);
}
.sb-icon { width: 66px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); animation: hangSwing 4s ease-in-out infinite alternate; transform-origin: 50% 0; }
.sb-icon svg { display: block; width: 100%; height: auto; }
.sb-text h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.08; color: #fff; }
.sb-text p { font-size: .88rem; margin-top: 4px; color: color-mix(in srgb, var(--ivory) 78%, transparent); max-width: 52ch; }
.sb-count {
  display: flex; align-items: center; gap: 12px; padding: 0 26px;
  border-left: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
}
.sb-num { font-family: var(--display); font-size: 3.1rem; line-height: 1; color: var(--accent-color); }
.sb-label { font-size: .74rem; line-height: 1.3; color: color-mix(in srgb, var(--ivory) 82%, transparent); }
.sb-btn {
  background: var(--accent-color); color: var(--ink); position: relative; z-index: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 var(--gold-dark), 0 14px 22px -14px rgba(0,0,0,.6);
}
.sb-btn:hover { background: #fff; }
.sb-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--gold-dark); }
.sb-shine {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent);
  animation: bandShine 7s ease-in-out 1.5s infinite;
}
@keyframes bandShine { 0%, 70% { left: -40%; } 100% { left: 120%; } }

/* ---------------------------------------------------------------------
   Caja de regalo en la Fragancia del mes (Navidad, San Valentín, Madre, Padre)
   --------------------------------------------------------------------- */
.box-bow {
  display: none; position: absolute; left: 50%; top: 50%; width: 112px; height: 66px; margin: -33px 0 0 -56px;
  color: var(--season-ribbon, var(--accent-color));
  transform: translateY(calc(var(--h) / -2 - 26px));
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3));
}
.box-bow-2 { transform: translateY(calc(var(--h) / -2 - 26px)) rotateY(90deg); }
.box-bow svg { display: block; width: 100%; height: 100%; }
html.season-gift .box-bow { display: block; }
html.season-gift .pbox .f-front::before,
html.season-gift .pbox .f-back::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255,255,255,.35) 45% 46%, var(--season-ribbon) 46% 54%, rgba(0,0,0,.18) 54% 55%, transparent 55%),
    linear-gradient(180deg, transparent 36%, rgba(255,255,255,.35) 36% 37%, var(--season-ribbon) 37% 44%, rgba(0,0,0,.18) 44% 45%, transparent 45%);
}
html.season-gift .pbox .f-right::after,
html.season-gift .pbox .f-left::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 36%, var(--season-ribbon) 37% 44%, transparent 45%);
}
html.season-gift .pbox .f-top::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 45%, var(--season-ribbon) 46% 54%, transparent 55%);
}
html.season-gift .pbox .box-lid { display: none; }

/* ---------------------------------------------------------------------
   NAVIDAD
   --------------------------------------------------------------------- */
html.season-navidad .stage {
  background:
    radial-gradient(ellipse 45% 60% at 50% 28%, color-mix(in srgb, var(--accent-color) 20%, var(--wine-dark)) 0%, transparent 72%),
    radial-gradient(ellipse 40% 70% at 0% 100%, rgba(31, 77, 58, .65), transparent 70%),
    radial-gradient(ellipse 40% 70% at 100% 100%, rgba(31, 77, 58, .55), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 20%, var(--wine-dark) 0%, var(--wine-deep) 60%, #0c0205 100%);
}
/* Nieve acumulada en el piso del escenario */
html.season-navidad .stage::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; z-index: 5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V13Q50 3 100 13T200 13T300 13T400 13V26z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x bottom / 400px 26px;
}
html.season-navidad .flake { background: #fff; opacity: .85; }
html.season-navidad .season-band {
  background:
    radial-gradient(1.5px 1.5px at 22% 24%, #fff9 50%, transparent),
    radial-gradient(1px 1px at 46% 70%, #fff8 50%, transparent),
    radial-gradient(1.5px 1.5px at 64% 18%, #fff9 50%, transparent),
    radial-gradient(1px 1px at 88% 76%, #fff7 50%, transparent),
    radial-gradient(circle at 6% 50%, color-mix(in srgb, var(--accent-color) 32%, transparent) 0, transparent 150px),
    linear-gradient(110deg, #10281e, #1f4d3a 55%, #2a5c46);
}
/* Cinta dorada a lo largo del borde superior de la franja */
html.season-navidad .season-band::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--accent-color) 0 18px, #7a1020 18px 36px);
}
/* Nieve sobre el pie de página */
html.season-navidad .site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 22px; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V8Q350 18 300 8T200 8T100 8T0 8z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x top / 400px 22px;
}
html.season-navidad .footer-mark { text-shadow:
    0 -3px 0 #fff,
    0 1px 0 var(--gold-dark), 0 2px 0 var(--gold-dark), 0 3px 0 color-mix(in srgb, var(--gold-dark) 80%, #000),
    0 4px 0 color-mix(in srgb, var(--gold-dark) 70%, #000), 0 5px 0 color-mix(in srgb, var(--gold-dark) 60%, #000),
    0 6px 0 color-mix(in srgb, var(--gold-dark) 50%, #000), 0 7px 0 color-mix(in srgb, var(--gold-dark) 40%, #000),
    0 26px 30px rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------------
   SAN VALENTÍN
   --------------------------------------------------------------------- */
html.season-sanvalentin .stage {
  background:
    radial-gradient(ellipse 45% 60% at 50% 28%, rgba(232, 120, 150, .28) 0%, transparent 72%),
    radial-gradient(ellipse 120% 100% at 50% 20%, var(--wine-dark) 0%, var(--wine-deep) 60%, #12030a 100%);
}
html.season-sanvalentin .flake, html.season-madre .flake { border-radius: 60% 0 60% 0; background: #f2a6b6; }
html.season-sanvalentin .season-band { background: radial-gradient(circle at 6% 50%, rgba(255, 190, 205, .3) 0, transparent 150px), linear-gradient(110deg, #4a0c1c, #8e1f3a 55%, #b8324f); }

/* ---------------------------------------------------------------------
   DÍA DE LA MADRE
   --------------------------------------------------------------------- */
html.season-madre .stage {
  background:
    radial-gradient(ellipse 45% 60% at 50% 28%, rgba(240, 180, 205, .26) 0%, transparent 72%),
    radial-gradient(ellipse 120% 100% at 50% 20%, var(--wine-dark) 0%, var(--wine-deep) 60%, #120309 100%);
}
html.season-madre .flake { background: #f3c3d4; }
html.season-madre .season-band { background: radial-gradient(circle at 6% 50%, rgba(255, 215, 228, .35) 0, transparent 150px), linear-gradient(110deg, #4f1e33, #8a4a66 55%, #a85d7c); }

/* ---------------------------------------------------------------------
   DÍA DEL PADRE
   --------------------------------------------------------------------- */
html.season-padre .stage {
  background:
    radial-gradient(ellipse 45% 60% at 50% 28%, color-mix(in srgb, var(--accent-color) 18%, #1b2c42) 0%, transparent 72%),
    radial-gradient(ellipse 120% 100% at 50% 20%, #1b2c42 0%, #101b2b 60%, #070c14 100%);
}
html.season-padre .season-band { background: radial-gradient(circle at 6% 50%, color-mix(in srgb, var(--accent-color) 30%, transparent) 0, transparent 150px), linear-gradient(110deg, #0f1a2a, #1f3350 55%, #2b4766); }

/* ---------------------------------------------------------------------
   HALLOWEEN
   --------------------------------------------------------------------- */
html.season-halloween .stage {
  background:
    radial-gradient(circle at 86% 18%, rgba(232, 207, 156, .22) 0 40px, transparent 160px),
    radial-gradient(ellipse 45% 60% at 50% 28%, rgba(200, 116, 44, .2) 0%, transparent 72%),
    radial-gradient(ellipse 120% 100% at 50% 20%, #2a0a10 0%, #14070b 60%, #070204 100%);
}
html.season-halloween .flake { background: #f0a050; }
html.season-halloween .season-band { background: radial-gradient(circle at 6% 50%, rgba(240, 160, 80, .35) 0, transparent 150px), linear-gradient(110deg, #14070b, #3a0d16); }
html.season-halloween .badge-sale { background: #c8742c; }

/* ---------------------------------------------------------------------
   BLACK FRIDAY
   --------------------------------------------------------------------- */
html.season-blackfriday .stage {
  background:
    radial-gradient(ellipse 45% 60% at 50% 28%, color-mix(in srgb, var(--accent-color) 22%, #111) 0%, transparent 72%),
    radial-gradient(ellipse 120% 100% at 50% 20%, #1a1a1a 0%, #0b0b0b 60%, #000 100%);
}
html.season-blackfriday .ticker-wrapper { background: #000; }
html.season-blackfriday .season-band { background: radial-gradient(circle at 6% 50%, color-mix(in srgb, var(--accent-color) 30%, transparent) 0, transparent 150px), linear-gradient(110deg, #000, #1c1c1c); border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent); }
html.season-blackfriday .badge-sale { background: #111; color: var(--accent-color); }
html.season-blackfriday .logo-sub { color: var(--ink); }

/* ---------------------------------------------------------------------
   CELULAR
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hang-2, .hang-3 { display: none; }
  .hang { width: 30px; margin-left: -15px; }
  .hang-0 { --x: 4% !important; --len: 34px !important; }
  .hang-1 { --x: 95% !important; --len: 54px !important; width: 34px; margin-left: -17px; }

  .season-band { grid-template-columns: auto 1fr auto; gap: 14px; padding: 16px 18px; margin-bottom: 32px; border-radius: var(--radius-m); }
  .sb-icon { width: 40px; }
  .sb-text h2 { font-size: 1.22rem; }
  .sb-text p { display: none; }
  .sb-count { padding: 0 0 0 14px; border-right: none; gap: 8px; }
  .sb-num { font-size: 2rem; }
  .sb-label { font-size: .62rem; }
  .sb-btn { grid-column: 1 / -1; width: 100%; padding: 11px; font-size: .8rem; }

  .box-bow { width: 48px; height: 28px; margin: -14px 0 0 -24px; transform: translateY(calc(var(--h) / -2 - 11px)); }
  .box-bow-2 { transform: translateY(calc(var(--h) / -2 - 11px)) rotateY(90deg); }
  html.season-navidad .stage::before { height: 16px; background-size: 260px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hang, .hang-orn, .sb-icon, .sb-shine, .flake { animation: none !important; }
  .flakes { display: none !important; }
}

.stage.empty { display: none; }