/* =====================================================================
   Horizon Open · aniversario ProPadel — «Todo en un día» (21-oct-2026)
   La sección se queda fija y, al bajar, pasa el día: el cielo va de la mañana
   a la noche, el sol cruza y se pone, sale la luna, el reloj avanza y al
   anochecer se enciende el letrero de ProPadel. Variables las pone torneo-dia.js.
   Sin JavaScript o con «reducir movimiento» se ve como una lista normal.
   ===================================================================== */
html body section#horario.dia { position: relative; padding: 0 !important; background: #050810; }
.dia-intro { text-align: center; padding-top: clamp(4.5rem, 9vw, 7rem); padding-bottom: clamp(2rem, 5vw, 3rem); }
.dia-title { margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(3.4rem, 10vw, 7rem); line-height: 0.86; color: #fff; }
.dia-sub { margin: 0.8rem auto 0; max-width: 52ch; color: #b9c8e2; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.55; }
.dia-nums { list-style: none; margin: clamp(1.6rem, 4vw, 2.4rem) auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 860px; }
.dia-nums li { padding: 14px 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); }
.dia-nums b { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 0.9; color: #fff; }
.dia-nums span { display: block; margin-top: 4px; color: #9fb3d1; font-size: 0.9rem; }
.dia-note { margin: 0 auto; padding: 1.4rem 16px clamp(3rem, 6vw, 4.5rem); text-align: center; color: #7d8ba6; font-size: 0.88rem; }

/* ---------- escenario: la fachada real de ProPadel pasa del día a la noche ---------- */
.dia-track { position: relative; }
.dia-stage {
  --bri: .3; --sat: .8; --sunset: 0; --night: .85; --lights: 1; --party: 1; --premios: 0;
  position: relative; overflow: hidden; min-height: 620px; isolation: isolate; background: #050810;
}
.dia-scene { position: absolute; inset: 0; z-index: 0; }
.dia-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.dia-photo img { filter: brightness(var(--bri)) saturate(var(--sat)) contrast(1.06); }
.dia-tint { position: absolute; inset: 0; pointer-events: none; }
.dia-tint--sunset { opacity: var(--sunset); background: linear-gradient(180deg, #ff7a3d 0%, #ff9a55 45%, #ffb36b 100%); mix-blend-mode: soft-light; }
.dia-tint--sunset2 { opacity: calc(var(--sunset) * .45); background: linear-gradient(180deg, rgba(255, 110, 60, .55), rgba(120, 40, 90, .35)); mix-blend-mode: multiply; }
.dia-tint--night { opacity: var(--night); background: linear-gradient(180deg, #0b1240 0%, #070a26 60%, #05061a 100%); mix-blend-mode: multiply; }
/* estrellas solo en el cielo (arriba) */
.dia-stars {
  position: absolute; inset: 0 0 55% 0; opacity: var(--night); pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 62% 14%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 72% 30%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 84% 10%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 92% 34%, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 78% 52%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 96% 62%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 55% 6%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 88% 76%, #fff 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 68% 70%, #fff 50%, transparent 52%), radial-gradient(1.1px 1.1px at 99% 18%, #fff 50%, transparent 52%);
  animation: diaTwinkle 3.5s ease-in-out infinite alternate;
}
@keyframes diaTwinkle { to { filter: brightness(1.6); } }
/* el letrero se enciende */
.dia-letras img { opacity: var(--lights); mix-blend-mode: screen; filter: drop-shadow(0 0 6px rgba(255, 244, 200, .95)) drop-shadow(0 0 22px rgba(255, 222, 120, .7)) drop-shadow(0 0 60px rgba(255, 200, 90, .45)); }

/* ---------- entrega de premios: dos focos blancos y purpurina dorada ---------- */
.dia-premios { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--premios); }
.dia-spot { position: absolute; top: -8%; width: 30vw; max-width: 460px; height: 115%; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 246, 220, .12) 70%, transparent); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); filter: blur(6px); mix-blend-mode: screen; }
.dia-spot:nth-child(1) { left: 14%; transform: rotate(-14deg); animation: diaSpotL 5s ease-in-out infinite alternate; }
.dia-spot:nth-child(2) { right: 14%; transform: rotate(14deg); animation: diaSpotR 5s ease-in-out infinite alternate; }
@keyframes diaSpotL { from { transform: rotate(-20deg); } to { transform: rotate(-8deg); } }
@keyframes diaSpotR { from { transform: rotate(20deg); } to { transform: rotate(8deg); } }
.dia-oro { position: absolute; inset: 0; mix-blend-mode: screen;
  background-image: radial-gradient(2px 2px at 20% 30%, #ffe08a 50%, transparent 52%), radial-gradient(1.6px 1.6px at 70% 60%, #fff3c4 50%, transparent 52%), radial-gradient(2.4px 2.4px at 45% 80%, #ffcf5a 50%, transparent 52%), radial-gradient(1.4px 1.4px at 85% 15%, #fff 50%, transparent 52%);
  background-size: 190px 230px, 250px 270px, 310px 290px, 160px 200px; animation: diaOro 7s linear infinite; }
@keyframes diaOro { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 230px, 0 270px, 0 290px, 0 200px; } }

/* ---------- la fiesta: focos, humo, público dando palmas, confeti y ecualizador ---------- */
.dia-party { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--party); }
.dia-beam { position: absolute; bottom: -6%; width: 26vw; max-width: 420px; height: 140%; transform-origin: 50% 100%; background: linear-gradient(0deg, rgba(255, 210, 140, .6), rgba(255, 140, 60, 0) 85%); clip-path: polygon(48% 100%, 52% 100%, 100% 0, 0 0); filter: blur(5px); mix-blend-mode: screen; animation: diaBeam 6s ease-in-out infinite alternate; }
.dia-beam:nth-child(1) { left: 6%; animation-delay: -1s; }
.dia-beam:nth-child(2) { left: 30%; background: linear-gradient(0deg, rgba(255, 90, 60, .5), rgba(255, 60, 40, 0) 80%); animation-delay: -3s; animation-duration: 7s; }
.dia-beam:nth-child(3) { right: 30%; background: linear-gradient(0deg, rgba(217, 224, 33, .45), rgba(217, 224, 33, 0) 80%); animation-delay: -2s; animation-duration: 5.5s; }
.dia-beam:nth-child(4) { right: 6%; animation-delay: -4s; }
@keyframes diaBeam { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
/* palmas: destello a contraluz detrás del público (lo marca torneo-dia.js al compás) */
.dia-clap { position: absolute; inset: 0; opacity: 0; background: radial-gradient(70% 45% at 50% 100%, rgba(255, 214, 160, .55), rgba(255, 150, 80, .18) 45%, transparent 75%); mix-blend-mode: screen; }
/* humo del escenario iluminado por los focos */
.dia-haze { position: absolute; left: -10%; right: -10%; bottom: -5%; height: 60%; mix-blend-mode: screen; opacity: .75; filter: blur(28px);
  background: radial-gradient(35% 55% at 22% 80%, rgba(255, 120, 90, .45), transparent 70%), radial-gradient(30% 50% at 55% 85%, rgba(255, 196, 120, .5), transparent 70%), radial-gradient(35% 55% at 85% 78%, rgba(120, 150, 255, .4), transparent 70%);
  animation: diaHaze 14s ease-in-out infinite alternate; }
@keyframes diaHaze { from { transform: translateX(-4%) scaleY(.95); } to { transform: translateX(4%) scaleY(1.08); } }
/* el público (canvas): fila de atrás nítida, fila de delante desenfocada como en una foto */
.dia-crowd { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dia-crowd--front { filter: blur(1.6px); }
.dia-eq { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 17vh, 180px); display: flex; align-items: flex-end; gap: 4px; padding: 0 4px; opacity: .45; -webkit-mask: linear-gradient(180deg, transparent, #000 55%); mask: linear-gradient(180deg, transparent, #000 55%); }
.dia-eq i { flex: 1 1 0; min-width: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #ffd27a, #ff5a2e); transform-origin: bottom; height: var(--h, 50%); animation: anivEq var(--d, 1s) ease-in-out infinite alternate; animation-delay: var(--w, 0s); }

/* ---------- reloj y fases (lista normal sin JS) ---------- */
.dia-hud { position: relative; z-index: 4; max-width: 1180px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) clamp(16px, 5vw, 48px); }
.dia-clock, .dia-dia { display: none; }
.dia.is-live .dia-dia { display: block; margin: 0 0 .4rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.3rem); letter-spacing: .22em; text-transform: uppercase; color: #ffd27a; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.dia-phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 560px; }
.dia-phases li { color: #fff; }
.dia-phases b { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 0.95; }
.dia-phases span { display: block; margin-top: 4px; color: #d6e1f3; line-height: 1.5; }
.dia-bar { display: none; }

/* ---------- modo «el día pasa» (lo activa torneo-dia.js) ---------- */
.dia.is-live .dia-track { height: 560vh; }
.dia.is-live .dia-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
/* el reloj abajo a la izquierda, sobre la pared (el letrero queda libre) */
.dia.is-live .dia-stage::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 65% at 100% 0%, rgba(5, 8, 16, .8) 0%, rgba(5, 8, 16, .42) 45%, transparent 75%), linear-gradient(0deg, rgba(5, 8, 16, .88) 0%, rgba(5, 8, 16, .6) 20%, transparent 40%); }
.dia.is-live .dia-hud { position: absolute; right: 0; top: 0; margin: 0; width: min(520px, 42vw); max-width: none; padding: clamp(84px, 12vh, 130px) clamp(18px, 5vw, 70px) 0 0; text-align: right; }
.dia.is-live .dia-clock {
  display: block; margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400; line-height: 0.82;
  font-size: clamp(5.5rem, 15vw, 13rem); letter-spacing: 0.01em; color: #fff;
  text-shadow: 0 10px 50px rgba(0, 0, 0, 0.55); font-variant-numeric: tabular-nums;
}
.dia.is-live .dia-phases { position: relative; display: grid; margin-top: 0.5rem; }
.dia.is-live .dia-phases li { grid-area: 1 / 1; max-width: 520px; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.dia.is-live .dia-phases li.is-on { opacity: 1; transform: none; }
.dia.is-live .dia-phases b { font-size: clamp(2.2rem, 5vw, 3.8rem); text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); }
.dia.is-live .dia-phases span { font-size: clamp(1rem, 1.6vw, 1.12rem); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.dia.is-live .dia-phases li:last-child b { color: #ffb15c; }
.dia-next, .dia-plan { display: none; }
.dia.is-live .dia-next { display: block; margin: .9rem 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffd27a; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
/* el programa completo, siempre a la vista: la hora actual encendida y las pasadas marcadas */
.dia.is-live .dia-plan { display: block; position: absolute; z-index: 5; left: clamp(28px, 6vw, 90px); right: clamp(28px, 6vw, 90px); bottom: clamp(88px, 12vh, 112px); height: 0; }
.dia.is-live .dia-bar { display: block; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.dia.is-live .dia-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fd0ff, #2b86ff, #ff9a4a, #d9e021); box-shadow: 0 0 12px rgba(255, 190, 110, .6); }
.dia-plan-list { list-style: none; margin: 0; padding: 0; }
.dia-plan-list li { position: absolute; bottom: -9px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); color: rgba(255, 255, 255, .62); white-space: nowrap; text-shadow: 0 2px 10px rgba(0, 0, 0, .85); transition: color .4s ease; }
.dia-plan-list li:nth-child(1) { left: 0; } .dia-plan-list li:nth-child(2) { left: 20%; } .dia-plan-list li:nth-child(3) { left: 40%; }
.dia-plan-list li:nth-child(4) { left: 60%; } .dia-plan-list li:nth-child(5) { left: 80%; } .dia-plan-list li:nth-child(6) { left: 100%; }
/* el primero y el último, pegados a los extremos de la línea para que no se corten */
.dia-plan-list li:nth-child(1) { transform: none; align-items: flex-start; } .dia-plan-list li:nth-child(6) { transform: translateX(-100%); align-items: flex-end; }
.dia-plan-list time i { font-style: normal; }
.dia-plan-list time { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1; letter-spacing: .03em; }
.dia-plan-list span { margin-top: 2px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.dia-plan-list li::after { content: ''; width: 14px; height: 14px; margin-top: 8px; border-radius: 50%; background: #0b1020; border: 2px solid rgba(255, 255, 255, .45); transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.dia-plan-list li.is-past { color: rgba(255, 255, 255, .78); }
.dia-plan-list li.is-past::after { background: #8fd0ff; border-color: #8fd0ff; }
.dia-plan-list li.is-on { color: #fff; }
.dia-plan-list li.is-on span { color: #ffd27a; }
.dia-plan-list li.is-on::after { background: #ffd27a; border-color: #fff; transform: scale(1.3); box-shadow: 0 0 0 6px rgba(255, 210, 122, .22), 0 0 20px rgba(255, 210, 122, .95); }

@media (max-width: 700px) {
  .dia-nums { grid-template-columns: 1fr 1fr; }
  .dia.is-live .dia-track { height: 480vh; }
  .dia.is-live .dia-stage::after { background: linear-gradient(180deg, rgba(5, 8, 16, .78) 0%, rgba(5, 8, 16, .35) 38%, transparent 60%), linear-gradient(0deg, rgba(5, 8, 16, .82) 0%, rgba(5, 8, 16, .45) 16%, transparent 30%); }
  .dia.is-live .dia-hud { left: 0; right: auto; width: auto; padding: 12vh 18px 0; text-align: left; }
  .dia.is-live .dia-clock { font-size: 28vw; }
  .dia-beam { width: 40vw; }
  .dia-spot { width: 60vw; }
  .dia.is-live .dia-plan { left: 26px; right: 26px; bottom: 92px; }
  .dia-plan-list span { display: none; }
  .dia-plan-list time i { display: none; }
  .dia-plan-list time { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .dia-stars, .dia-beam, .dia-haze, .dia-eq i, .dia-spot, .dia-oro { animation: none; } }

/* la regla general content-visibility:auto (styles.css) la trataría como 900px fuera de pantalla: aquí no */
html body section#horizon-dia, html body section#horario.dia { content-visibility: visible; contain-intrinsic-size: none; contain: none; }
/* overflow-x:hidden en html y body convierte el body en contenedor de scroll y rompe position:sticky.
   clip recorta igual (sin scroll lateral) y deja funcionar el fijado */
html, html body { overflow-x: clip !important; overflow-y: visible !important; }

/* =====================================================================
   QUÉ TE LLEVAS como mosaico
   ===================================================================== */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); gap: 12px; max-width: 1100px; margin: clamp(1.6rem, 4vw, 2.4rem) auto 0; }
.bento-t { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 22px; border: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); display: flex; flex-direction: column; justify-content: flex-end; }
.bento-t h3 { margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 0.95; color: #fff; }
.bento-t p { margin: 6px 0 0; color: #c3d0e6; font-size: 0.95rem; line-height: 1.45; }
.bento-t svg { width: 46px; height: 46px; margin-bottom: auto; }
.bento-big { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; line-height: 0.8; font-size: clamp(5rem, 9vw, 8rem); color: #fff; }
.bento-t > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.bento-t > img + .bento-c::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 8, 16, 0.05) 20%, rgba(5, 8, 16, 0.88) 100%); }
.bento-t--pistas { grid-column: span 2; grid-row: span 2; min-height: 400px; }
.bento-t--pistas .bento-big { color: #d9e021; }
.bento-t--shirt { background: linear-gradient(160deg, #1b4fd6, #0a2a7a); border-color: rgba(109, 180, 255, 0.4); }
.bento-t--shirt svg { color: #cfe0ff; }
.bento-t--tres { background: linear-gradient(160deg, #10204a, #0a1430); }
.bento-t--tres .bento-big { background: linear-gradient(180deg, #fff, #6db4ff); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: auto; }
.bento-t--fiesta { background: radial-gradient(100% 90% at 100% 0%, rgba(255, 140, 56, 0.45), transparent 60%), linear-gradient(160deg, #3a0f14, #1a0a14); border-color: rgba(255, 140, 56, 0.5); }
.bento-t--premios { background: radial-gradient(100% 90% at 100% 0%, rgba(255, 210, 90, 0.35), transparent 60%), linear-gradient(160deg, #3a2a08, #1a1406); border-color: rgba(255, 210, 90, 0.45); }
.bento-t--premios svg { color: #ffd65a; }
.bento-t--comunidad { grid-column: span 4; min-height: 230px; justify-content: center; }
.bento-t--comunidad > img { left: auto; width: 46%; object-position: center 30%; }
.bento-t--comunidad > img + .bento-c::before { background: linear-gradient(90deg, #0a1430 0%, #0a1430 50%, rgba(10, 20, 48, 0.6) 64%, transparent 85%); }
.bento-t--comunidad .bento-c { max-width: 52%; }
.bento-eq { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-bottom: auto; }
.bento-eq i { width: 7px; border-radius: 3px; background: linear-gradient(180deg, #ffd27a, #ff5a2e); height: 100%; transform-origin: bottom; animation: anivEq 0.9s ease-in-out infinite alternate; }
.bento-eq i:nth-child(2) { animation-delay: -.3s; } .bento-eq i:nth-child(3) { animation-delay: -.6s; } .bento-eq i:nth-child(4) { animation-delay: -.15s; }
.bento-eq i:nth-child(5) { animation-delay: -.45s; } .bento-eq i:nth-child(6) { animation-delay: -.75s; } .bento-eq i:nth-child(7) { animation-delay: -.2s; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(170px, auto); }
  .bento-t--pistas { grid-column: span 2; grid-row: auto; min-height: 300px; }
  .bento-t--comunidad { grid-column: span 2; min-height: 320px; justify-content: flex-end; }
  .bento-t--comunidad > img { width: 100%; }
  .bento-t--comunidad > img + .bento-c::before { background: linear-gradient(180deg, transparent 30%, rgba(5, 8, 16, 0.9) 85%); }
  .bento-t--comunidad .bento-c { max-width: none; }
}
@media (max-width: 400px) { .bento-t { padding: 16px; } .bento-t h3 { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .bento-eq i { animation: none; } }