/* ─────────────────────────────────────────────────────────────────────────────
   INICIO · PRÓXIMOS EVENTOS (assets/js/home-events.js)
   Contenedores curveados como el resto del inicio (esquina grande asimétrica).
   1. Sección y banda AURA LIVE  2. Escenario del próximo evento  3. También en agenda
   4. Sin eventos: "Próximamente"  5. Cargando  6. Responsive
   ───────────────────────────────────────────────────────────────────────────── */

/* 1. Sección y banda en movimiento */
.home-events{position:relative;overflow:hidden;background:var(--black);padding:100px 0 96px}
/* Negro → blanco → negro: Categorías queda como una tarjeta blanca curva entre Próximos eventos y Top talentos. */
.home-events+.categories-section{border-radius:46px}
.home-events>.container,.home-events>.home-events-marquee{position:relative;z-index:1}
.home-events .heading-side a{display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.home-events-marquee{position:relative;z-index:0;margin:4px 0 22px;overflow:hidden;white-space:nowrap;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.home-events-marquee>div{display:inline-flex;gap:36px;padding-right:36px;animation:home-marquee 38s linear infinite}
/* Outlined words, clean on any background: an SVG filter (#aura-outline in index.html) draws only the outer edge of the
   whole word. A plain text-stroke would trace the font's overlapping inner pieces (lines inside X, A, R). */
.home-events-defs{position:absolute;width:0;height:0}
.home-events-marquee span{font-size:clamp(48px,7vw,104px);font-weight:700;line-height:1.1;letter-spacing:0;color:#ffffff1f}
.home-events-marquee span:nth-of-type(odd){color:#fff;filter:url(#aura-outline)}
.home-events-marquee i{align-self:center;width:3px;height:.62em;font-size:clamp(48px,7vw,104px);background:var(--blue);transform:skewX(-18deg);font-style:normal}
@keyframes home-marquee{to{transform:translateX(-50%)}}
.home-events-box{position:relative;z-index:1}

/* 2. Escenario: fondo con el flyer difuminado, flyer inclinado con esquina curva, cuenta regresiva */
.stage{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:64px;align-items:center;padding:40px;border:1px solid #ffffff17;border-radius:32px 32px 150px 32px;background:#0b0f15;color:#fff}
/* Brand colors whatever the flyer: its blurred copy is shown in black and white, lit with AURAVIRAL blue. */
/* Card background: the event's own flyer with a medium blur (same look as the shared Story image). */
.stage-ambient{display:block;position:absolute;z-index:-2;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(28px);opacity:.75}
.stage:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(100deg,#07090a59 0%,#07090a99 45%,#07090ad9 100%)}
.stage-flyer{position:relative;display:block;height:min(560px,72vh);aspect-ratio:var(--r,.5625);max-width:440px;overflow:hidden;border-radius:22px 22px 90px 22px;background:#111416;box-shadow:0 40px 90px #000c,0 0 0 1px #ffffff1f;transform:rotate(-2.5deg);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.stage-flyer:hover{transform:rotate(0) scale(1.015)}
.stage-flyer-img{display:block;width:100%;height:100%;object-fit:cover}
.stage-fallback{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:26px;font-size:52px;font-weight:600;line-height:.92;letter-spacing:-.06em;color:#fff;background:linear-gradient(0deg,#07090a 12%,#07090a33),url(../img/secciones/proyecto.jpg) center/cover}
.stage-fallback span{color:var(--blue)}
.stage-info{min-width:0;max-width:600px}
.stage-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:26px}
.stage-count{display:inline-flex;align-items:baseline;gap:8px;padding:10px 20px;border-radius:99px 99px 99px 12px;background:var(--blue);color:#fff;box-shadow:0 12px 30px #087cff55}
.stage-count b{font-size:30px;font-weight:700;line-height:1;letter-spacing:-.05em}
.stage-count small{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.stage-count.live{animation:stage-pulse 1.8s ease-in-out infinite}
@keyframes stage-pulse{50%{box-shadow:0 0 0 10px #087cff00,0 12px 30px #087cff88}}
.stage-pill{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid #ffffff38;border-radius:8px;background:#07090a80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#e6e8ea}
.stage-pill.available{border-color:#ffffff59;background:#ffffff14;color:#fff}
.stage-pill.sold-out,.stage-pill.cancelled{border-color:#f0443880;color:#ff8a80}
.stage-pill.sample{border-style:dashed}
.stage-pill.free{border-color:#32d583;background:#07945533;color:#fff}
.stage-actions .icon{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stage-actions .button{gap:12px}
.stage-info h3{margin:0 0 22px;font-size:clamp(34px,4.2vw,64px);font-weight:700;line-height:.98;letter-spacing:-.06em;overflow-wrap:anywhere}
.stage-info h3 a{transition:color .25s}.stage-info h3 a:hover{color:var(--blue-soft)}
.stage-facts{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.stage-facts li{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.5;color:#e6e8ea}
.stage-facts li+li{color:#c4c9d0}
.stage-facts svg{flex-shrink:0;width:36px;height:36px;padding:8px;border-radius:12px 12px 12px 4px;background:#07090a66;fill:none;stroke:var(--blue-soft);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stage-desc{margin:22px 0 0;font-size:15px;line-height:1.75;color:#c4c9d0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stage-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.stage-actions .button{min-height:52px;padding:0 26px}
body .stage-actions .stage-view{background:#07090a59;border-color:#ffffff4d;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body .stage-actions .stage-view:hover{background:var(--blue);border-color:var(--blue)}
.stage:not(.stage-empty) .stage-actions:not(:has(.stage-buy)) .stage-view{background:#fff;border-color:#fff;color:#07090a}

/* 3. También en agenda: tarjetas curvas con miniatura del flyer */
.next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.next-title{grid-column:1/-1;margin:14px 0 2px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a8aaac}
.next-card{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 22px 12px 12px;border:1px solid #ffffff17;border-radius:20px 20px 56px 20px;background:#0f1319;transition:background .25s,border-color .25s,transform .25s}
.next-card:hover{background:#141a22;border-color:#087cff80;transform:translateY(-2px)}
.next-thumb{width:62px;height:82px;overflow:hidden;border-radius:12px 12px 26px 12px;background:#111416}
.next-thumb-img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.next-thumb .stage-fallback{padding:8px;font-size:13px}
.next-date{display:grid;place-items:center;min-width:52px;line-height:1;text-align:center}
.next-date b{font-size:28px;font-weight:700;letter-spacing:-.05em}
.next-date small{margin-top:5px;font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--blue-soft)}
.next-text{min-width:0}
.next-text strong{display:block;overflow:hidden;font-size:17px;font-weight:600;letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap}
.next-text small{display:block;margin-top:5px;overflow:hidden;font-size:13px;color:#a8aaac;text-overflow:ellipsis;white-space:nowrap}
.next-arrow{font-size:20px;color:#a8aaac;transition:transform .25s,color .25s}
.next-card:hover .next-arrow{color:var(--blue-soft);transform:translateX(4px)}

/* 4. Sin eventos: bloque "Próximamente" con foto, texto grande y collage de talento */
.stage-empty{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;min-height:500px;padding:64px}
.stage-photo{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.42}
.stage-empty:after{background:radial-gradient(90% 120% at 0% 0%,#0b2a8a99,transparent 60%),linear-gradient(90deg,#07090af2 0%,#07090acc 55%,#07090a80 100%)}
.stage-live{display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--blue-soft)}
.stage-live:before{content:'';width:40px;height:1px;background:currentColor}
.stage-empty-copy strong{display:block;margin:26px 0 18px;font-size:clamp(38px,4.6vw,68px);font-weight:700;line-height:.98;letter-spacing:-.06em}
.stage-empty-copy strong span{color:var(--blue)}
.stage-empty-copy p{max-width:500px;margin:0;font-size:16px;line-height:1.75;color:#b9bec5}
.stage-collage{position:relative;height:440px}
.stage-collage:before{content:'';position:absolute;inset:12% 10% 6%;border-radius:40% 40% 48% 52%;background:radial-gradient(circle,#087cff59,transparent 70%);filter:blur(30px)}
.collage-card{position:absolute;display:block;width:48%;aspect-ratio:3/4;overflow:hidden;border:1px solid #ffffff2e;background:#111416;box-shadow:0 30px 70px #000c;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.collage-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.collage-card:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(to top,#07090af2,#07090a00)}
.collage-card span{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;display:grid;gap:4px}
.collage-card small{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft)}
.collage-card strong{font-size:17px;font-weight:600;letter-spacing:-.02em;color:#fff}
.collage-card:nth-child(1){left:0;top:14%;border-radius:18px 18px 18px 64px;transform:rotate(-6deg)}
.collage-card:nth-child(2){left:26%;top:0;z-index:2;border-radius:18px 64px 18px 18px;transform:rotate(2deg)}
.collage-card:nth-child(3){right:0;top:22%;z-index:1;border-radius:18px 18px 64px 18px;transform:rotate(7deg)}
.collage-card:hover{z-index:3;box-shadow:0 40px 90px #000,0 0 0 1px #087cff}
.collage-card:hover img{transform:scale(1.05)}
.stage-collage:hover .collage-card:nth-child(1){transform:rotate(-9deg) translateX(-8px)}
.stage-collage:hover .collage-card:nth-child(3){transform:rotate(10deg) translateX(8px)}

/* 5. Cargando */
.home-events-box[aria-busy=true]{min-height:480px;border-radius:32px 32px 150px 32px;background:linear-gradient(90deg,#0f1317 0%,#171c21 40%,#0f1317 80%) 0 0/200% 100%;animation:home-events-load 1.4s ease-in-out infinite}
@keyframes home-events-load{from{background-position:100% 0}to{background-position:-100% 0}}

/* 6. Responsive */
@media(max-width:1100px){.stage{gap:40px;padding:32px}.stage-empty{padding:48px}.stage-collage{height:340px}}
@media(max-width:850px){
  .home-events{padding:72px 0 64px}
  .home-events+.categories-section{border-radius:27px}
  .home-events-marquee{margin-bottom:14px}
  .home-events-marquee>div{gap:20px;padding-right:20px}
  .home-events-marquee span,.home-events-marquee i{font-size:clamp(34px,10vw,46px)}
  .stage{grid-template-columns:1fr;gap:28px;padding:18px 18px 34px;border-radius:26px 26px 90px 26px}
  .stage-flyer{height:auto;width:min(100%,calc(50vh * var(--r,.5625)));max-width:none;margin-inline:auto;transform:none;border-radius:18px 18px 64px 18px}
  .stage-info{padding:0 6px}
  .stage-top{margin-bottom:20px}
  .stage-facts li{font-size:15px}
  .stage-actions .button{flex:1}
  .next-grid{grid-template-columns:1fr}
  .stage-empty{padding:34px 22px 40px;min-height:0}
  .stage-empty .stage-collage{order:-1;height:260px;margin:0 4% 6px}
  .collage-card span{left:12px;right:12px;bottom:12px}.collage-card strong{font-size:14px}.collage-card small{font-size:9px;letter-spacing:.14em}
  .collage-card:nth-child(1) span,.collage-card:nth-child(3) span,.collage-card:nth-child(1):after,.collage-card:nth-child(3):after{display:none}
  .home-events-box[aria-busy=true]{min-height:640px;border-radius:26px 26px 90px 26px}
}
@media(max-width:520px){.next-card{gap:12px;padding-right:16px}.next-date{min-width:40px}.next-date b{font-size:24px}.stage-empty-copy strong{font-size:40px}}
@media(prefers-reduced-motion:reduce){.home-events-marquee>div,.stage-count.live,.home-events-box[aria-busy=true]{animation:none}.stage-flyer,.collage-card,.collage-card img,.next-card{transition:none}}