/**
 * ======================================================
 * ARCHIVO: hub-season-decoration.css
 * UBICACIÓN: frontend/public/styles/
 * VERSIÓN: 2.5 — Temporada amor_amistad (HU-135)
 * ÚLTIMA ACTUALIZACIÓN: 2026-09-14 11:10
 *
 * 🎯 PROPÓSITO:
 * Estilos decorativos por data-season (mundialista | amor_amistad) en el hub público.
 * Complementa home-hub.css; no modifica panel admin.
 *
 * ======================================================
 * 📋 REGLAS PARA PRODUCCIÓN:
 * ------------------------------------------------------
 * - Console.log marcados con // @strip se eliminan al generar build para cliente
 * - Esta cabecera se elimina al generar versión para cliente (documentación interna)
 *
 * ======================================================
 * 📋 HISTORIAL DE CAMBIOS:
 * ------------------------------------------------------
 * [2.5] - 2026-09-14 11:10
 *    ✅ HU-135: modo amor_amistad (banner rosa, corazones, acentos)
 * [2.4] - 2026-06-28 19:30
 *    ✅ HU-082: franja inferior fija en móvil (evita % alto de sección 1 col)
 * [2.3] - 2026-06-28 18:00
 *    ✅ HU-082: jugadores más pequeños en móvil; sin offsets negativos
 * [2.2] - 2026-06-28 12:00
 *    ✅ Cabecera completa según CABECERA_ESPECIFICACION.md
 * [2.1] - 2026-06-28 10:00
 *    ✅ Hero banher contain; footer fijo césped/copa reducido
 * [2.0] - 2026-06-27 18:00
 *    ✅ Assets IMAGENES MUESTRA CLIENTE; franja tricolor y confeti
 * ======================================================
 */

/* ---------- Tokens modo mundialista ---------- */
html[data-season="mundialista"] {
  --hub-accent: #16a34a;
  --hub-season-green: #16a34a;
  --hub-season-green-dark: #15803d;
  --hub-season-yellow: #fcd116;
  --hub-season-blue: #003893;
  --hub-season-red: #ce1126;
  --hub-season-grass-h: clamp(18px, 3vh, 26px);
  --hub-season-footer-h: clamp(52px, 10vw, 72px);
}

html[data-season="mundialista"] body.soluciones-home {
  --primary: #16a34a;
  padding-bottom: var(--hub-season-footer-h);
}

/* ---------- Franja tricolor: «Hoy juega la Selección» ---------- */
.hub-season-banner {
  background: linear-gradient(
    90deg,
    var(--hub-season-yellow, #fcd116) 0%,
    var(--hub-season-yellow, #fcd116) 33%,
    var(--hub-season-blue, #003893) 33%,
    var(--hub-season-blue, #003893) 66%,
    var(--hub-season-red, #ce1126) 66%,
    var(--hub-season-red, #ce1126) 100%
  );
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  position: relative;
  z-index: 45;
}

.hub-season-banner__inner {
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  padding: 0 8px;
}

/* ---------- Lluvia de confeti (viewport fijo, no bloquea clics) ---------- */
html[data-season="mundialista"] .hub-season-confetti {
  position: fixed;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  overflow: hidden;
}

.hub-season-confetti-piece {
  position: absolute;
  top: -12px;
  border-radius: 1px;
  opacity: 0.72;
  animation-name: hub-season-confetti-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes hub-season-confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.75;
  }
  100% {
    transform: translateY(110vh) rotate(540deg);
    opacity: 0.15;
  }
}

/* ---------- Hero: estadio completo (1710×919) + overlay legible ---------- */
html[data-season="mundialista"] .hub-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, calc(100vw * 919 / 1710), 720px);
  padding: clamp(32px, 5vh, 56px) 56px;
  background-color: #060f1c;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

html[data-season="mundialista"] .hub-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

html[data-season="mundialista"] .hub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/images/seasons/mundialista/banher_fondo.webp') center center / contain no-repeat;
  pointer-events: none;
}

html[data-season="mundialista"] .hub-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.42) 40%,
    rgba(0, 0, 0, 0.2) 65%,
    rgba(0, 0, 0, 0.08) 100%
  );
  pointer-events: none;
}

html[data-season="mundialista"] .hub-hero-title,
html[data-season="mundialista"] .hub-hero-desc,
html[data-season="mundialista"] .hub-hero-teaser {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

html[data-season="mundialista"] .hub-hero .hub-btn-primary {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.45);
  gap: 8px;
}

html[data-season="mundialista"] .hub-hero .hub-btn-primary::before {
  content: '⚽';
  font-size: 1rem;
  line-height: 1;
}

html[data-season="mundialista"] .hub-hero-card {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Props flotantes en hero */
.hub-season-hero-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.hub-season-hero-prop {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

/* Corneta: esquina superior derecha del banner hero */
.hub-season-hero-prop--corneta {
  top: 0;
  right: 0;
  width: clamp(72px, 14vw, 130px);
  height: auto;
  transform: rotate(-14deg);
  transform-origin: top right;
}

/* ---------- Accesos rápidos: jugadores + balón en iconos ---------- */
.hub-season-quicklinks-wrap {
  position: relative;
  overflow: hidden;
}

.hub-season-quicklinks-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hub-season-quicklink-player {
  position: absolute;
  bottom: 0;
  height: auto;
  max-height: 92%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.hub-season-quicklink-player--left {
  left: -2%;
  max-width: min(200px, 28vw);
}

.hub-season-quicklink-player--right {
  right: -2%;
  max-width: min(200px, 28vw);
}

html[data-season="mundialista"] .hub-quicklinks-section {
  padding-top: 20px;
  padding-bottom: 24px;
}

html[data-season="mundialista"] .hub-quicklinks {
  position: relative;
  z-index: 1;
}

html[data-season="mundialista"] .hub-quicklink-dot {
  position: relative;
  background: linear-gradient(145deg, var(--hub-season-green) 0%, var(--hub-season-green-dark) 100%);
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4);
}

html[data-season="mundialista"] .hub-quicklink-dot::after {
  content: '⚽';
  position: absolute;
  right: -5px;
  bottom: -6px;
  font-size: 15px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

html[data-season="mundialista"] .hub-quicklink-label {
  color: var(--hub-season-blue);
}

/* ---------- Footer fijo viewport: césped + copa (no scroll) ---------- */
html[data-season="mundialista"] .hub-season-footer-fixed {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  z-index: 50;
  pointer-events: none;
  height: 0;
  overflow: visible;
}

html[data-season="mundialista"] .hub-season-footer-grass {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  height: var(--hub-season-grass-h);
  max-height: 26px;
  display: block;
  object-fit: cover;
  object-position: top center;
  z-index: 51;
}

html[data-season="mundialista"] .hub-season-footer-copa {
  position: fixed;
  right: clamp(0px, 1vw, 10px);
  bottom: calc(var(--hub-season-grass-h) - 4px);
  width: clamp(56px, 12vw, 88px);
  height: auto;
  max-height: calc(var(--hub-season-footer-h) - var(--hub-season-grass-h));
  object-fit: contain;
  object-position: bottom right;
  z-index: 52;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

/* Legacy: ocultar césped suelto si quedara en DOM */
.hub-season-grass {
  display: none !important;
}

/* ---------- Botones primarios hub (fuera del hero) ---------- */
html[data-season="mundialista"] body.soluciones-home .hub-auth-btn--primary,
html[data-season="mundialista"] body.soluciones-home .btn-primary {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border: 1px solid rgba(21, 128, 61, 0.35);
}

html[data-season="mundialista"] body.soluciones-home .hub-header .nav-main a:hover,
html[data-season="mundialista"] body.soluciones-home .hub-header .nav-main a.active {
  color: var(--hub-season-green-dark);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  html[data-season="mundialista"] .hub-season-footer-copa {
    width: clamp(48px, 16vw, 72px);
    max-height: 56px;
  }
}

/* Grid accesos → 1 columna desde 768px: jugadores solo en franja inferior */
@media (max-width: 768px) {
  html[data-season="mundialista"] .hub-quicklinks-section {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(20px + var(--hub-season-players-h, 76px));
  }

  .hub-season-quicklinks-props {
    inset: auto 0 0 0;
    top: auto;
    height: var(--hub-season-players-h, 76px);
  }

  .hub-season-quicklink-player {
    max-height: calc(var(--hub-season-players-h, 76px) - 8px);
    max-width: clamp(44px, 14vw, 60px);
    bottom: 0;
    opacity: 0.92;
    object-position: bottom center;
  }

  .hub-season-quicklink-player--left {
    left: 4px;
  }

  .hub-season-quicklink-player--right {
    right: 4px;
  }
}

@media (max-width: 640px) {
  .hub-season-banner {
    font-size: 0.8rem;
    padding: 8px 12px;
  }

  html[data-season="mundialista"] .hub-hero {
    min-height: max(380px, calc(100vw * 919 / 1710));
    padding: clamp(28px, 4vh, 40px) 20px;
  }

  .hub-season-hero-prop--corneta {
    width: clamp(56px, 18vw, 88px);
    top: 0;
    right: 0;
  }

  html[data-season="mundialista"] {
    --hub-season-grass-h: clamp(14px, 2.8vh, 20px);
    --hub-season-footer-h: clamp(44px, 14vw, 58px);
    --hub-season-players-h: 68px;
  }

  html[data-season="mundialista"] .hub-season-footer-copa {
    width: clamp(40px, 18vw, 60px);
    max-height: 44px;
    right: 0;
  }

  html[data-season="mundialista"] .hub-quicklinks-section {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: calc(16px + var(--hub-season-players-h, 68px));
  }

  .hub-season-quicklinks-props {
    height: var(--hub-season-players-h, 68px);
  }

  .hub-season-quicklink-player {
    max-height: calc(var(--hub-season-players-h, 68px) - 6px);
    max-width: clamp(36px, 13vw, 48px);
  }

  .hub-season-quicklink-player--left {
    left: 2px;
  }

  .hub-season-quicklink-player--right {
    right: 2px;
  }

  html[data-season="mundialista"] .hub-quicklinks {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-season="mundialista"] .hub-hero {
    background-attachment: scroll;
  }

  html[data-season="mundialista"] .hub-season-confetti,
  html[data-season="amor_amistad"] .hub-season-confetti,
  html[data-season="amor_amistad"] .hub-season-heart-floats,
  .hub-season-confetti-piece {
    display: none !important;
  }
}

/* ============================================================
   Temporada amor y amistad (HU-135)
   Sin jugadores, césped ni copa. Solo banner, corazones y acentos.
   ============================================================ */
html[data-season="amor_amistad"] {
  --hub-accent: #e11d48;
  --hub-season-rose: #e11d48;
  --hub-season-rose-dark: #be123c;
  --hub-season-pink: #fb7185;
  --hub-season-blush: #fff1f2;
  --hub-season-gold: #f9a8d4;
}

html[data-season="amor_amistad"] body.soluciones-home {
  --primary: #e11d48;
}

html[data-season="amor_amistad"] .hub-season-banner {
  background: linear-gradient(
    90deg,
    #9f1239 0%,
    #be123c 28%,
    #e11d48 55%,
    #fb7185 82%,
    #fda4af 100%
  );
  color: #fff;
}

html[data-season="amor_amistad"] .hub-season-banner__inner::before,
html[data-season="amor_amistad"] .hub-season-banner__inner::after {
  content: '♥';
  margin: 0 0.5em;
  font-size: 0.85em;
  opacity: 0.92;
}

html[data-season="amor_amistad"] .hub-season-confetti {
  position: fixed;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  overflow: hidden;
}

html[data-season="amor_amistad"] .hub-season-confetti-piece--heart {
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0;
  line-height: 1;
  opacity: 0.88;
  filter: drop-shadow(0 2px 4px rgba(159, 18, 57, 0.25));
}

html[data-season="amor_amistad"] .hub-season-heart-floats {
  position: fixed;
  inset: 0;
  z-index: 43;
  pointer-events: none;
  overflow: hidden;
}

html[data-season="amor_amistad"] .hub-season-heart-float {
  position: absolute;
  color: #fb7185;
  opacity: 0.38;
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1;
  text-shadow: 0 6px 18px rgba(190, 18, 60, 0.28);
  animation: hub-season-heart-bob 5.2s ease-in-out infinite;
}

html[data-season="amor_amistad"] .hub-season-heart-float--l {
  left: 10px;
  top: 32%;
}

html[data-season="amor_amistad"] .hub-season-heart-float--r {
  right: 14px;
  top: 46%;
  color: #e11d48;
  animation-delay: 1.1s;
}

html[data-season="amor_amistad"] .hub-season-heart-float--tl {
  right: 8%;
  top: 12%;
  font-size: clamp(18px, 3.5vw, 32px);
  color: #fda4af;
  opacity: 0.32;
  animation-delay: 2s;
}

html[data-season="amor_amistad"] .hub-season-heart-float--br {
  left: 7%;
  bottom: 14%;
  font-size: clamp(18px, 3.5vw, 28px);
  color: #f43f5e;
  opacity: 0.28;
  animation-delay: 0.6s;
}

@keyframes hub-season-heart-bob {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.06);
  }
}

html[data-season="amor_amistad"] .hub-hero {
  background: linear-gradient(135deg, #4c0519 0%, #9f1239 42%, #be123c 100%);
}

html[data-season="amor_amistad"] .hub-hero::before {
  background:
    radial-gradient(circle at 16% 82%, rgba(251, 113, 133, 0.42), transparent 46%),
    radial-gradient(circle at 88% 16%, rgba(254, 205, 211, 0.32), transparent 50%);
}

html[data-season="amor_amistad"] .hub-hero-title,
html[data-season="amor_amistad"] .hub-hero-desc,
html[data-season="amor_amistad"] .hub-hero-teaser {
  text-shadow: 0 2px 12px rgba(76, 5, 25, 0.45);
}

html[data-season="amor_amistad"] .hub-hero .hub-btn-primary {
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 55%, #be123c 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(225, 29, 72, 0.42);
  gap: 8px;
}

html[data-season="amor_amistad"] .hub-hero .hub-btn-primary::before {
  content: '♥';
  font-size: 0.95rem;
  line-height: 1;
}

html[data-season="amor_amistad"] .hub-hero-card {
  background: rgba(76, 5, 25, 0.42);
  border-color: rgba(253, 164, 175, 0.35);
}

html[data-season="amor_amistad"] .hub-quicklink-dot {
  background: linear-gradient(145deg, #fb7185 0%, #e11d48 100%);
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.38);
}

html[data-season="amor_amistad"] .hub-quicklink-dot::after {
  content: '♥';
  position: absolute;
  right: -4px;
  bottom: -5px;
  font-size: 13px;
  line-height: 1;
  color: #fda4af;
  filter: drop-shadow(0 1px 2px rgba(76, 5, 25, 0.35));
}

html[data-season="amor_amistad"] .hub-quicklink-label {
  color: var(--hub-season-rose-dark);
}

html[data-season="amor_amistad"] body.soluciones-home .hub-auth-btn--primary,
html[data-season="amor_amistad"] body.soluciones-home .btn-primary {
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
  color: #fff;
  border: 1px solid rgba(190, 18, 60, 0.35);
}

html[data-season="amor_amistad"] body.soluciones-home .hub-header .nav-main a:hover,
html[data-season="amor_amistad"] body.soluciones-home .hub-header .nav-main a.active {
  color: var(--hub-season-rose-dark);
}

@media (max-width: 640px) {
  html[data-season="amor_amistad"] .hub-season-heart-float {
    font-size: 22px;
    opacity: 0.22;
  }

  html[data-season="amor_amistad"] .hub-season-heart-float--tl,
  html[data-season="amor_amistad"] .hub-season-heart-float--br {
    font-size: 16px;
  }
}