/* ════════════════════════════════════════════════════════════════
   CAMPAÑA DE HALLOWEEN
   Todo cuelga de body.halloween-on, que pone js/halloween.js mientras la
   campaña esté vigente. Al terminar, la clase deja de añadirse y el sitio
   vuelve a su aspecto normal sin tocar este archivo.
   ════════════════════════════════════════════════════════════════ */

:root {
  --hw-pumpkin:  #F97316;   /* naranja calabaza */
  --hw-pumpkin-d:#EA580C;
  --hw-purple:   #7C3AED;   /* morado bruja */
  --hw-purple-l: #C4B5FD;
  --hw-cream:    #FFF7ED;
  --hw-ink:      #2D3436;   /* mismo carbón de la marca */
}

/* ── Alternancia de textos ──
   Los titulares de temporada conviven en el HTML con los normales: así el
   original nunca se pierde y vuelve solo. */
.hw-only { display: none; }
body.halloween-on .hw-only { display: inline; }
body.halloween-on .hw-hide { display: none !important; }

/* Variantes en bloque (para párrafos y botones) */
.hw-only-block { display: none; }
body.halloween-on .hw-only-block { display: block; }

/* Tarjetas flotantes del hero.
   El display va aquí y NO en el atributo style: un display en línea gana a
   cualquier clase, y eso hacía que estas tarjetas siguieran visibles con la
   campaña apagada, junto a las originales. */
.hw-float { display: none; }
body.halloween-on .hw-float {
  display: flex; align-items: center; justify-content: center;
  width: 130px; height: 130px; border-radius: var(--r-lg);
}

/* ── Fondo de temporada ── */
body.halloween-on .hero,
body.halloween-on .hw-hero {
  background:
    radial-gradient(1100px 520px at 12% -10%, #FFE9D6 0%, rgba(255,233,214,0) 62%),
    radial-gradient(900px 480px at 88% 0%, #EDE4FF 0%, rgba(237,228,255,0) 60%),
    linear-gradient(180deg, var(--hw-cream) 0%, #FDF6FF 100%);
}

/* ── Capa decorativa ──
   Fija al viewport y detrás de todo. No captura clics y está oculta a
   lectores de pantalla: nunca debe tapar un botón ni un campo. */
.hw-deco {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;   /* header=100, nav móvil=200, modales=999 quedan por encima */
}
.hw-deco img { position: absolute; pointer-events: none; user-select: none; }

/* Telarañas en las cuatro esquinas */
.hw-web { width: 190px; height: 190px; opacity: .30; }
.hw-web-tl { top: 0;  left: 0; }
.hw-web-tr { top: 0;  right: 0;  transform: scaleX(-1); }
.hw-web-bl { bottom: 0; left: 0;  transform: scaleY(-1); opacity: .20; }
.hw-web-br { bottom: 0; right: 0; transform: scale(-1);  opacity: .20; }

/* Personajes sueltos */
.hw-art { opacity: .92; }
.hw-bat-1  { top: 15%;  right: 13%; width: 92px;  animation: hw-flotar 7s ease-in-out infinite; }
.hw-bat-2  { top: 44%;  right: 5%;  width: 66px;  animation: hw-flotar 9s ease-in-out infinite .9s; }
.hw-pump-1 { bottom: 5%; left: 0;    width: 88px;  opacity: .8; }
.hw-candy-1{ bottom: 26%; left: 1%; width: 86px; transform: rotate(-14deg); opacity: .8; }
.hw-pot    { bottom: 7%; right: 9%;  width: 110px; }

@keyframes hw-flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(-6deg); }
}

/* El contenido del hero mantiene su propio apilado */
body.halloween-on .hero > .container,
body.halloween-on .hw-hero > .container { position: relative; z-index: 1; }

/* ── Botón principal de la campaña ── */
.hw-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--hw-pumpkin), var(--hw-pumpkin-d));
  color: #fff; font-family: var(--font-title); font-weight: 800; font-size: 1.02rem;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 26px rgba(249,115,22,.34);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hw-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(249,115,22,.42); }
.hw-cta:focus-visible { outline: 3px solid var(--hw-purple); outline-offset: 3px; }

/* ── Pill de Halloween en Explorar ── */
.cat-tab.hw-tab {
  background: linear-gradient(135deg, var(--hw-pumpkin), var(--hw-pumpkin-d));
  color: #fff; border-color: transparent; font-weight: 700;
}
.cat-tab.hw-tab:hover { filter: brightness(1.06); color: #fff; }

/* ── Etiqueta rápida del hero ── */
.hero-tag.hw-tag {
  background: #FFF1E3; border-color: var(--hw-pumpkin);
  color: var(--hw-pumpkin-d); font-weight: 700;
}

/* ── Logo de temporada ──
   El logo normal (nuevo_logo_oficial.png) ocupa sólo ~20% de su lienzo: el
   resto es margen transparente. El de Halloween va recortado al contenido,
   así que a la misma altura CSS se vería unas 5 veces más grande y se saldría
   de la cabecera. Por eso aquí se le fija su propia altura. */
body.halloween-on .logo img { height: 38px; width: auto; }
@media (max-width: 768px) { body.halloween-on .logo img { height: 26px; } }

/* Calabacita junto al logo (respaldo si el archivo no cargara) */
.hw-logo-badge { font-size: 1.15rem; margin-left: 4px; }

/* ── Casilla de Halloween en Publicar ── */
.hw-check {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; margin-top: 4px;
  border: 1.5px solid var(--hw-pumpkin); border-radius: 14px;
  background: #FFF7ED;
}
.hw-check input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--hw-pumpkin); flex-shrink: 0; cursor: pointer; }
.hw-check-txt strong { display: block; font-family: var(--font-title); font-size: .93rem; color: var(--hw-ink); }
.hw-check-txt span   { display: block; font-size: .8rem; color: #8A6B52; margin-top: 2px; line-height: 1.45; }

/* ── Cinta de la página de Halloween ── */
.hw-ribbon {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 999px;
  background: #FFF1E3; border: 1.5px solid var(--hw-pumpkin);
  color: var(--hw-pumpkin-d); font-family: var(--font-title);
  font-weight: 700; font-size: .84rem;
}
.hw-note {
  margin-top: 18px; padding: 13px 18px;
  border: 1.5px dashed var(--hw-purple); border-radius: 14px;
  background: rgba(255,255,255,.65);
  color: var(--hw-purple); font-family: var(--font-title);
  font-weight: 600; font-size: .9rem; line-height: 1.5;
}

/* ── Móvil: la decoración no debe estorbar ni provocar scroll lateral ── */
@media (max-width: 700px) {
  .hw-web { width: 112px; height: 112px; opacity: .22; }
  .hw-bat-2, .hw-candy-1, .hw-pot, .hw-web-bl, .hw-web-br { display: none; }
  .hw-bat-1  { width: 62px; top: 11%; right: 6%; }
  .hw-pump-1 { width: 74px; bottom: 5%; left: 1%; opacity: .8; }
  .hw-cta     { width: 100%; }
}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
  .hw-deco img, .hw-cta { animation: none !important; transition: none !important; }
}