/* Páginas por ocasión (tarjeta-de-halloween/, tarjeta-de-navidad/…): encabezado con el clima de la fecha.
   El resto usa las clases de la portada (portada.css y entrada.css). */
.ocasion-hero { color: #fff; }
.ocasion-etiqueta { display: inline-block; margin-bottom: 1rem; padding: .35rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .14); }
.ocasion-titulo { font-size: clamp(2.8rem, 10vw, 5rem); line-height: .95; text-wrap: balance; }
.ocasion-version { border-radius: 2rem; background: #fff; padding: 2rem; box-shadow: 0 14px 30px rgba(106, 84, 132, .12); }
.ocasion-version h3 { margin-top: .6rem; font-size: 1.5rem; font-weight: 800; }
.ocasion-version p:not(:first-child) { margin-top: .4rem; font-weight: 600; opacity: .8; }

/* Halloween: cielo violeta con luna y estrellas */
.halloween-hero {
  background:
    radial-gradient(circle at 82% 18%, #fff0c2 0 4.5rem, rgba(255, 240, 194, .25) 4.6rem, transparent 11rem),
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 30% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 12%, #fff, transparent), radial-gradient(1px 1px at 70% 70%, #fff, transparent),
    radial-gradient(ellipse 120% 90% at 70% 0%, #4a2170, #12081d 70%);
}
.halloween-titulo { font-family: "Creepster", "Caveat Brush", cursive; color: #ff8a1f; text-shadow: 0 0 22px rgba(255, 138, 31, .55), 0 5px 0 #6b2d00; }

/* Navidad: noche azul con nieve */
.navidad-hero {
  background:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(3px 3px at 25% 70%, #fffd, transparent),
    radial-gradient(2px 2px at 45% 35%, #fff, transparent), radial-gradient(3px 3px at 65% 15%, #fffd, transparent),
    radial-gradient(2px 2px at 85% 55%, #fff, transparent), radial-gradient(2.5px 2.5px at 92% 85%, #fffc, transparent),
    radial-gradient(ellipse 130% 90% at 25% 0%, #1f4a85, #071226 75%);
}
.navidad-titulo { font-family: "Mountains of Christmas", "Caveat Brush", cursive; font-weight: 700; color: #ffdf80; text-shadow: 0 4px 0 #7a4a00, 0 0 24px rgba(255, 223, 128, .4); }
.ocasion-version .boton { display: inline-block; }