/* ============================================================
   Hacktitud Summit 2026 — Patrocinios y Alianzas
   Usa los tokens de /_astro/BaseLayout.*.css (:root).
   Prefijos: .sp-* página · .sb-* SponsorBubbleShowcase
   ============================================================ */

.sp-wrap{width:min(100% - 2rem,1180px);margin-inline:auto}
@media (min-width:600px){.sp-wrap{width:min(100% - 3rem,1180px)}}

.sp-skip{position:absolute;left:1rem;top:-4rem;z-index:200;padding:.6rem 1rem;background:var(--warm);color:var(--deep-purple);font-weight:700;border-radius:4px}
.sp-skip:focus{top:.6rem;color:var(--deep-purple)}

.sp-btn:focus-visible,.sp-copy:focus-visible,.sb-bubble:focus-visible .sb-orb,.sb-empty-link:focus-visible,.sp-mail-link:focus-visible,.sp-fact a:focus-visible,.kicker--glow{color:var(--pp-glow)}

/* ---------- Cabeceras de sección ---------- */
.sp-head{text-align:center;max-width:62ch;margin:0 auto clamp(2.5rem,6vw,3.5rem)}
.sp-head h2{font-size:clamp(1.8rem,4vw,3rem);margin:.7rem 0 .8rem;text-wrap:balance}
.sp-head-lead{color:var(--fg-dim);margin:0}
.sp-head--dark h2{color:var(--light)}

/* ---------- Fondo continuo ----------
   Las secciones 2–5 van dentro de .sp-flow, que tiene un solo degradado;
   empieza en el mismo tono con que termina la foto del hero. */
.sp-main{color:var(--light);background:#1b1036}
.sp-main section{position:relative}
.sp-flow{background:linear-gradient(180deg,#1b1036 0%,#2b1047 10%,#3a1a5e 24%,#4b2a7a 38%,#3a1a5e 52%,#46246f 66%,#2b1047 84%,#1a0a30 100%)}

/* ---------- 1. Presentación sobre FondoWebSponsors ----------
   La foto cubre la sección detrás del texto, anclada arriba a la derecha
   para que los logos se vean; se oscurece a la izquierda para leer el texto
   y abajo se funde con .sp-flow. En móvil va a todo lo ancho sin recortar. */
.sp-hero{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:clamp(6rem,13vh,8rem) 0 clamp(3.5rem,8vh,5.5rem);overflow:hidden}
.sp-hero-bg{position:absolute;inset:0;pointer-events:none}
.sp-hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:right top}
.sp-hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,#1b103659 0%,transparent 14%,transparent 66%,#1b1036 100%),
    linear-gradient(90deg,#1b1036f2 0%,#1b1036d9 36%,#1b10368c 54%,#1b103626 72%,transparent 88%)}
.sp-hero-inner{position:relative;z-index:1}
.sp-hero-inner>:not(.sp-facts){max-width:44rem}
@media (max-width:700px){
  .sp-hero{min-height:0;padding-top:calc(3.4rem + 56.25vw * .62)}
  .sp-hero-bg{inset:3.4rem 0 auto}
  .sp-hero-bg img{height:auto;object-fit:initial}
  .sp-hero-bg::after{background:linear-gradient(180deg,transparent 0%,transparent 40%,#1b1036cc 72%,#1b1036 100%)}
}

.sp-term{font-family:"Cascadia Code",ui-monospace,monospace;color:var(--teal);filter:brightness(1.6);font-size:clamp(.85rem,.8rem + .4vw,1.05rem);letter-spacing:.08em;margin:0 0 1rem;display:inline-flex;align-items:center;gap:.35em;flex-wrap:wrap}
.sp-term-slash{opacity:.45}
.sp-term-cursor{display:inline-block;width:.55em;height:1em;background:currentColor;border-radius:1px;animation:sp-blink 1.1s step-end infinite}
@keyframes sp-blink{50%{opacity:0}}

.sp-hero-title{font-family:var(--font-title);color:var(--light);font-size:clamp(2.2rem,5.2vw,4.3rem);line-height:1.04;letter-spacing:-.025em;max-width:15ch;margin:0 0 1.3rem;text-shadow:0 2px 30px #0e0420,0 0 70px #b97cff40;text-wrap:balance}
.sp-hero-lead{color:#e4daf2;max-width:52ch;font-size:clamp(1.02rem,.98rem + .35vw,1.25rem);line-height:1.6;margin:0 0 2rem;text-shadow:0 1px 16px #0e0420}

.sp-facts{list-style:none;margin:0 0 2.2rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:.7rem}
.sp-fact{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem .95rem;border-radius:14px;background:#170828b8;border:1px solid #b97cff33;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.92rem;line-height:1.4;color:var(--light);transition:border-color .25s,transform .25s}
.sp-fact:hover{border-color:#b97cff80;transform:translateY(-2px)}
.sp-fact svg{flex:0 0 22px;width:22px;height:22px;margin-top:.1rem;fill:none;stroke:var(--warm);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sp-fact img{flex:0 0 auto;filter:drop-shadow(0 0 8px #b97cff80)}
.sp-fact span{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.sp-fact small{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#a99bc4;font-weight:700}
.sp-fact a{color:var(--light);text-decoration:underline;text-decoration-color:#ffb76f80;text-underline-offset:3px}
.sp-fact a:hover{color:var(--warm)}
.sp-fact--brand{background:linear-gradient(135deg,#6b3fa8cc,#3d3a9ccc 60%,#1d5a8acc);border-color:#b97cff59}
.sp-fact--brand strong{font-family:var(--font-display);font-size:1.02rem}
.sp-fact--brand small{color:#ffc98a;letter-spacing:.08em;text-transform:none}

.sp-actions{display:flex;flex-wrap:wrap;gap:1rem}
.sp-actions--center{justify-content:center}
.sp-btn{text-align:center}
.sp-btn--ghost{color:var(--light)}
.sp-btn--ghost:hover{color:var(--warm)}
.sp-btn:active{transform:translateY(0) scale(.98)}

/* ---------- 2. Beneficios ---------- */
.sp-benefits{overflow:hidden;padding:clamp(4.5rem,10vh,7rem) 0;
  background:
    radial-gradient(40rem 26rem at 15% 25%,color-mix(in srgb,var(--pp-glow) 22%,transparent),transparent 70%),
    radial-gradient(34rem 24rem at 88% 78%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
.sp-benefits::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(color-mix(in srgb,var(--pp-soft) 30%,transparent) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(180deg,transparent,#000 25%,#000 60%,transparent);opacity:.25}
.sp-benefits .sp-wrap{position:relative}
.sp-benefits .kicker{color:var(--warm)}
.sp-benefits .sp-head h2{color:var(--light)}
.sp-benefits .sp-head-lead{color:#d9cdeb}
.sp-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1.1rem}
@media (min-width:640px){.sp-cards{grid-template-columns:repeat(2,1fr)}.sp-card:last-child{grid-column:1/-1}}
/* Escritorio: 3 + 2 centradas */
@media (min-width:1000px){.sp-cards{grid-template-columns:repeat(6,1fr)}.sp-card{grid-column:span 2}.sp-card:nth-child(4){grid-column:2/4}.sp-card:last-child{grid-column:4/6}}
.sp-card{position:relative;padding:1.7rem 1.5rem 1.6rem;background:#ffffff0d;border:1px solid #b97cff40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:18px;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.sp-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--warm),var(--pp-glow));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.sp-card:hover{transform:translateY(-5px);border-color:#b97cffa6;background:#ffffff14;box-shadow:0 22px 44px -24px #000000a6,0 0 40px -18px #b97cff}
.sp-card:hover::before{transform:scaleX(1)}
.sp-card-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:1.1rem;background:linear-gradient(145deg,#6b3fa8,#2b1047);border:1px solid #b97cff59;box-shadow:0 10px 24px -12px #000,0 0 20px -8px #b97cff}
.sp-card-ico svg{width:24px;height:24px;fill:none;stroke:var(--warm);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sp-card h3{color:var(--light);font-size:1.15rem;margin:0 0 .5rem;letter-spacing:-.01em}
.sp-card p{color:#cbbde0;font-size:.95rem;line-height:1.6;margin:0}

/* ---------- 3. SponsorBubbleShowcase ---------- */
.sp-showcase{padding:clamp(3rem,7vh,5rem) 0 clamp(4.5rem,10vh,7rem)}

.sb-stage{--sb-size:clamp(84px,10vw,124px);position:relative;overflow:hidden;min-height:20rem;padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,3rem) clamp(2.5rem,5vw,4rem);border-radius:28px;border:1px solid #b97cff40;
  background:
    radial-gradient(60% 70% at 50% 40%,#b97cff26,transparent 70%),
    radial-gradient(color-mix(in srgb,var(--pp-soft) 18%,transparent) 1px,transparent 1px) 0 0/22px 22px,
    #12032299;
  box-shadow:inset 0 0 80px -30px #000,0 30px 80px -50px #000}
.sb-stage::before{content:"";position:absolute;inset:12px;border:1px dashed #b97cff26;border-radius:20px;pointer-events:none}

.sb-list{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(1.6rem,3.5vw,2.6rem) clamp(1.4rem,4vw,3.2rem)}
.sb-stage:not(.has-sponsors) .sb-list{display:none}

/* Cada item deriva unos px (amplitud < gap) → sin colisiones ni salidas */
.sb-item{margin-top:var(--dy,0);animation:sb-drift var(--dur,14s) ease-in-out var(--delay,0s) infinite;will-change:transform}
.sb-stage.is-paused .sb-item,.sb-item:hover,.sb-item:focus-within{animation-play-state:paused}
@keyframes sb-drift{
  0%,100%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(var(--ax),calc(var(--ay) * -1),0)}
  50%{transform:translate3d(calc(var(--ax) * -.6),calc(var(--ay) * -.3),0)}
  75%{transform:translate3d(calc(var(--ax) * -.9),var(--ay),0)}
}

.sb-bubble{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-decoration:none;color:inherit;width:max(calc(var(--sb-size) * var(--s,1) + 1.5rem),8.5rem)}
.sb-orb{position:relative;display:grid;place-items:center;width:calc(var(--sb-size) * var(--s,1));aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--sb-bg,radial-gradient(circle at 32% 28%,#fff 0%,#f4f0fa 60%,#e4dcf0 100%));
  box-shadow:0 0 0 5px color-mix(in srgb,var(--sb-accent,#fff) 22%,transparent),0 0 40px -8px color-mix(in srgb,var(--sb-accent,var(--pp-glow)) 65%,transparent),0 18px 36px -18px #000;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.sb-orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 22%,#ffffffb3,transparent 38%);pointer-events:none}
/* Caja que cabe en el círculo: aprovecha el ancho en logos horizontales */
.sb-orb img{position:relative;z-index:1;width:76%;height:58%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.sb-orb--custom::after{opacity:.35}
.sb-mono{font-family:var(--font-title);font-weight:700;font-size:calc(var(--sb-size) * var(--s,1) * .3);color:var(--deep-purple);letter-spacing:.02em}
.sb-item:hover .sb-orb,.sb-bubble:focus-visible .sb-orb{transform:scale(1.1);box-shadow:0 0 0 6px color-mix(in srgb,var(--sb-accent,var(--warm)) 45%,transparent),0 0 60px -6px color-mix(in srgb,var(--sb-accent,var(--pp-glow)) 85%,transparent),0 22px 40px -18px #000}
.sb-item:hover,.sb-item:focus-within{position:relative;z-index:2}

.sb-name{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.1rem;font-size:.82rem;font-weight:600;line-height:1.3;color:var(--light);transition:color .25s}
/* Línea de marca bajo el nombre */
.sb-name::after{content:"";width:1.4rem;height:2px;margin-top:.35rem;border-radius:2px;background:var(--sb-accent,var(--pp-glow));opacity:.8;transition:width .3s}
.sb-item:hover .sb-name::after,.sb-bubble:focus-visible .sb-name::after{width:2.4rem;opacity:1}
.sb-name small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#a99bc4;font-weight:700}
a.sb-bubble:hover .sb-name,a.sb-bubble:focus-visible .sb-name{color:color-mix(in srgb,var(--sb-accent,var(--warm)) 55%,#fff)}
.sb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Estado vacío */
.sb-empty{display:none;position:relative;flex-direction:column;align-items:center;text-align:center;max-width:46ch;margin:0 auto;padding-top:9.5rem}
.sb-stage.is-empty .sb-empty{display:flex}
.sb-empty-orbs{position:absolute;top:0;left:50%;width:220px;height:140px;transform:translateX(-50%)}
.sb-empty-orbs i{position:absolute;border-radius:50%;border:1.5px dashed #d9b3ff73;background:radial-gradient(circle at 32% 28%,#b97cff33,#b97cff0a 70%);animation:sb-drift 13s ease-in-out infinite;--ax:6px;--ay:8px}
.sb-empty-orbs i:nth-child(1){width:96px;height:96px;left:62px;top:16px}
.sb-empty-orbs i:nth-child(2){width:58px;height:58px;left:0;top:64px;animation-duration:16s;animation-delay:-5s}
.sb-empty-orbs i:nth-child(3){width:46px;height:46px;right:4px;top:6px;animation-duration:11s;animation-delay:-8s}
.sb-empty-orbs i:nth-child(1)::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:var(--warm);font-size:2.2rem;font-weight:300}
.sb-empty-title{font-family:var(--font-display);color:var(--light);font-size:clamp(1.2rem,2.4vw,1.55rem);font-weight:700;margin:0 0 .6rem;text-wrap:balance}
.sb-empty-text{color:var(--pp-soft);font-size:.98rem;margin:0 0 1.4rem}
.sb-empty-link{color:var(--warm);font-weight:700;letter-spacing:.04em;border-bottom:1px solid #ffb76f66;padding-bottom:.15rem;transition:color .2s,border-color .2s}
.sb-empty-link span{display:inline-block;transition:transform .25s}
.sb-empty-link:hover{color:#fff;border-color:#fff}
.sb-empty-link:hover span{transform:translateX(4px)}

/* ---------- 4. Alianzas ---------- */
.sp-alliances{overflow:hidden;padding:clamp(4.5rem,10vh,7rem) 0;scroll-margin-top:3.4rem;
  background:
    radial-gradient(38rem 28rem at 85% 30%,color-mix(in srgb,var(--pp-glow) 22%,transparent),transparent 70%),
    radial-gradient(30rem 24rem at 10% 80%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
.sp-alliances::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(color-mix(in srgb,var(--pp-soft) 30%,transparent) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(60% 60% at 70% 50%,#000,transparent);opacity:.25}
.sp-alliances-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.sp-alliances .kicker{color:var(--warm)}
.sp-alliances-copy h2{color:var(--light);font-size:clamp(1.8rem,3.8vw,2.9rem);margin:.7rem 0 1rem;text-wrap:balance}
.sp-alliances-copy p{color:#d9cdeb;max-width:52ch}
.sp-alliances-copy .sp-alliances-close{color:#fff;font-weight:600;border-left:3px solid var(--warm);padding-left:1rem;margin:1.6rem 0 2rem}
.sp-modes{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.sp-mode{display:flex;gap:1.1rem;align-items:flex-start;padding:1.1rem 1.25rem;border-radius:16px;background:#ffffff0d;border:1px solid #b97cff40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s,box-shadow .3s}
.sp-mode:hover{transform:translateX(6px);border-color:#b97cffa6;background:#ffffff14;box-shadow:0 14px 34px -22px #000,0 0 36px -18px #b97cff}
.sp-mode-n{flex:0 0 auto;font-family:"Cascadia Code",ui-monospace,monospace;font-size:.8rem;font-weight:700;color:var(--pp-soft);padding-top:.2rem}
.sp-mode h3{color:var(--light);font-size:1.05rem;margin:0 0 .25rem;letter-spacing:-.01em}
.sp-mode p{margin:0;color:#cbbde0;font-size:.92rem;line-height:1.55}

/* ---------- 5. Contacto ---------- */
.sp-contact{overflow:hidden;padding:clamp(5rem,12vh,8rem) 0;scroll-margin-top:3.4rem}
.sp-contact::before{content:"";position:absolute;width:44rem;height:44rem;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#b97cff2e,transparent 65%);pointer-events:none}
.sp-contact-inner{position:relative;text-align:center;max-width:760px}
.sp-contact-shield{filter:drop-shadow(0 0 18px #b97cffa6);margin-bottom:1.2rem}
.sp-contact h2{color:var(--light);font-size:clamp(1.9rem,4.4vw,3.2rem);margin:0 0 1rem;text-wrap:balance}
.sp-contact-lead{color:#d9cdeb;font-size:clamp(1rem,.96rem + .3vw,1.18rem);max-width:54ch;margin:0 auto 2.2rem}
.sp-mail{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem 1rem;margin-bottom:.4rem}
.sp-mail-link{font-family:var(--font-display);font-weight:800;font-size:clamp(1.25rem,1rem + 2.4vw,2.2rem);color:var(--warm);letter-spacing:.01em;overflow-wrap:anywhere;transition:color .2s,letter-spacing .3s}
.sp-mail-link:hover{color:#fff;letter-spacing:.04em}
.sp-copy{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;font:600 .78rem/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--light);background:#ffffff0f;border:1px solid #b97cff59;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.sp-copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.sp-copy:hover{background:#ffffff1f;border-color:var(--warm)}
.sp-copy.is-done{color:var(--deep-green);background:#7fe0c7;border-color:#7fe0c7}
.sp-copy-status{min-height:1.4em;font-size:.85rem;color:#7fe0c7;margin:0 0 .8rem}
.sp-contact-hint{color:var(--pp-soft);font-size:.92rem;max-width:52ch;margin:0 auto 2.2rem}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .sp-alliances-grid{grid-template-columns:1fr}
  .sp-mode:hover{transform:none}
}
@media (max-width:560px){
  .sp-actions .sp-btn{flex:1 1 100%}
  .sb-stage{--sb-size:clamp(72px,22vw,96px);border-radius:22px}
  .sb-list{gap:1.5rem 1rem}
  .sb-name{font-size:.76rem}
}

/* ---------- Movimiento reducido ----------
   BaseLayout fuerza animation-duration:.001ms, que con "infinite" haría
   saltar las burbujas cada frame: aquí se desactivan por completo. */
@media (prefers-reduced-motion:reduce){
  .sb-item,.sb-empty-orbs i,.sp-term-cursor{animation:none!important}
  .sb-item{will-change:auto}
  .sp-card:hover,.sp-fact:hover,.sb-item:hover .sb-orb,.sb-bubble:focus-visible .sb-orb{transform:none}
}