/* Decoración de temporada (Navidad, Halloween, Día de la Madre…). Solo actúa con <html data-temporada="…">,
   que pone temporadas.js. Los colores vienen en --tem-principal, --tem-acento, --tem-suave y --tem-brillo. */

/* ——— Cinta con el mensaje de la temporada ——— */
.cinta-temporada { position: relative; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); color: #fff; font-weight: 600; font-size: 14.5px; line-height: 1.35; text-align: center; overflow: hidden;
  background: linear-gradient(100deg, var(--tem-principal), color-mix(in oklab, var(--tem-principal) 78%, var(--tem-acento)) 60%, var(--tem-principal)); }
.cinta-temporada::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-100%); animation: brilloCinta 5.5s ease-in-out infinite; pointer-events: none; }
.ct-adorno { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--tem-brillo); flex: none; }
.ct-adorno svg { width: 22px; height: 22px; animation: balanceo 3.2s ease-in-out infinite; }
.ct-adorno:last-child svg { animation-delay: -1.6s; }
.ct-texto b { font-weight: 800; }
@keyframes brilloCinta { 55%, 100% { transform: translateX(100%); } }
@keyframes balanceo { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(10deg) scale(1.08); } }

/* ——— Menú: los acentos de la marca toman los colores de la temporada ——— */
html[data-temporada] { --rosa-osc: var(--tem-principal); }
html[data-temporada] body { background:
  radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--tem-acento) 16%, transparent), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.4), transparent 280px),
  var(--tem-suave); }
html[data-temporada] .hero-fondo::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--tem-principal) 38%, transparent), transparent 55%, color-mix(in oklab, var(--tem-acento) 26%, transparent)); mix-blend-mode: multiply; }
html[data-temporada] .hero-sello { background: var(--tem-principal); color: #fff; box-shadow: 0 6px 18px color-mix(in oklab, var(--tem-principal) 40%, transparent); }
html[data-temporada] .boton-primario { background: var(--tem-principal); }
html[data-temporada] .burbuja { background: var(--tem-acento); color: #1d1210; }
html[data-temporada] .barra { box-shadow: inset 0 -3px 0 var(--tem-principal), 0 6px 18px rgba(43, 33, 32, .08); }

/* ——— Adornos que caen o flotan (detrás del contenido, sin bloquear toques) ——— */
.lluvia-temporada { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lluvia-temporada i { position: absolute; top: -40px; display: block; opacity: .55; animation-name: caer; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
.lluvia-temporada svg { width: 100%; height: 100%; }
.lluvia-flotar i, .lluvia-brillo i { top: auto; bottom: -40px; animation-name: subir; }
.lluvia-murcielagos i { animation-name: revolotear; opacity: .5; }
.lluvia-confeti i { opacity: .7; animation-name: caerGirando; }
.lluvia-petalos i { animation-name: caerMeciendo; }
.lluvia-brillo i { opacity: .35; }
@keyframes caer { to { transform: translate3d(30px, 112vh, 0) rotate(220deg); } }
@keyframes caerGirando { to { transform: translate3d(-40px, 112vh, 0) rotate(720deg); } }
@keyframes caerMeciendo { 0% { transform: translate3d(0, 0, 0) rotate(0); } 25% { transform: translate3d(36px, 28vh, 0) rotate(60deg); } 50% { transform: translate3d(-24px, 56vh, 0) rotate(130deg); } 75% { transform: translate3d(30px, 84vh, 0) rotate(200deg); } 100% { transform: translate3d(0, 112vh, 0) rotate(260deg); } }
@keyframes subir { 0% { transform: translate3d(0, 0, 0) scale(.9); opacity: 0; } 15% { opacity: .55; } 100% { transform: translate3d(-30px, -112vh, 0) scale(1.1); opacity: 0; } }
@keyframes revolotear { 0% { transform: translate3d(0, 0, 0) scaleX(1); } 25% { transform: translate3d(40px, 30vh, 0) scaleX(.6); } 50% { transform: translate3d(-30px, 58vh, 0) scaleX(1); } 75% { transform: translate3d(36px, 86vh, 0) scaleX(.6); } 100% { transform: translate3d(0, 112vh, 0) scaleX(1); } }
/* El contenido queda siempre por encima de los adornos. */
html[data-temporada] main, html[data-temporada] .hero-contenido, html[data-temporada] footer { position: relative; z-index: 2; }

/* ——— Panel de la dueña ——— */
.cinta-admin { font-size: 13.5px; }
html[data-temporada] .cabeza { box-shadow: inset 0 -3px 0 var(--tem-principal); }
html[data-temporada] .pestanas button.on { color: var(--tem-principal); }
html[data-temporada] .pestanas button.on::before { background: var(--tem-principal); }
.muestra-temporada { width: 46px; height: 46px; border-radius: 14px; display: inline-grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--c) 70%, transparent); }
.muestra-temporada svg { width: 24px; height: 24px; }
.temporadas-lista { display: grid; gap: 10px; margin: 6px 0 4px; }
.temporada-opcion { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 2px solid var(--linea, #E8DDD2); background: #fff; cursor: pointer; text-align: left; }
.temporada-opcion b { display: block; font-size: 15px; }
.temporada-opcion small { display: block; color: var(--gris, #6E625F); font-size: 12.5px; }
.temporada-opcion[aria-pressed="true"] { border-color: var(--a); box-shadow: 0 0 0 4px color-mix(in oklab, var(--a) 18%, transparent); }
.temporada-opcion .marca-hoy { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--a); color: #fff; }
.modos-temporada { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.modos-temporada button { min-height: 48px; border-radius: 14px; border: 2px solid var(--linea, #E8DDD2); background: #fff; font-weight: 700; font-size: 13.5px; }
.modos-temporada button[aria-pressed="true"] { border-color: var(--cafe-osc, #4B3533); background: var(--cafe-osc, #4B3533); color: #fff; }
.tarjeta-temporada { display: flex; align-items: center; gap: 14px; }
.tarjeta-temporada > div { flex: 1; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .cinta-temporada::after, .ct-adorno svg { animation: none; }
  .lluvia-temporada { display: none; }
}