/* ─────────────────────────────────────────────────────────────────────
   sponsor-scrolly.css — Experiencia Sponsor (mismo stack que Contacto).
   Escenas a pantalla completa con fondo de color + capa three.js de
   fotos scroll-driven. Scopeado a .spo2-*.
   ───────────────────────────────────────────────────────────────────── */
body.spo2-active { background: #0A0A0A; }
body.spo2-active .topbar { position: fixed; top: 0; left: 0; right: 0; background: rgba(10,10,10,0.5); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,0.10); }
body.spo2-active .topbar-title small { color: rgba(255,255,255,0.62); }
body.spo2-active .topbar-nav a { color: rgba(255,255,255,0.82); }
body.spo2-active .topbar-nav a:hover { background: rgba(255,255,255,0.10); color: #fff; }
body.spo2-active .topbar-nav a.is-active { background: #fff; color: #0A0A0A; }
body.spo2-active .app { background: transparent; }
body.spo2-active .site-footer { position: relative; z-index: 6; }

.spo2 { position: relative; }
.spo2 a { color: inherit; }
.spo2 a:hover { color: inherit; }
.spo2-bg { position: fixed; inset: 0; z-index: 0; background: #0A0A0A; transition: background-color 0.7s ease; will-change: background-color; }
.spo2-canvas { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100vh; display: block; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
.spo2.is-3d .spo2-canvas { opacity: 1; }
.spo2-scenes { position: relative; z-index: 2; }
.spo2-grain { position: fixed; inset: -50%; z-index: 3; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.spo2-flash { position: fixed; inset: 0; z-index: 45; pointer-events: none; background: var(--red); transform: scaleY(0); transform-origin: top; will-change: transform; }

.spo2-scene { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: clamp(96px, 14vh, 150px) clamp(24px, 6vw, 120px) clamp(64px, 9vh, 110px); color: #fff; }
.spo2-scene[data-theme="light"] { color: var(--ink); }
.spo2-wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; }
.spo2-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.spo2-display { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.01em; margin: 0; }
.spo2-eyebrow { font-family: var(--body); font-weight: 600; font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.spo2-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--red); }
.spo2-scene[data-theme="red"] .spo2-eyebrow { color: #fff; }
.spo2-scene[data-theme="red"] .spo2-eyebrow::before { background: rgba(255,255,255,0.7); }
.spo2-title { font-size: clamp(44px, 7.4vw, 132px); }
.spo2-title-xl { font-size: clamp(54px, 10.5vw, 190px); }
.spo2-lead { margin-top: 28px; max-width: 560px; font-size: clamp(17px, 1.6vw, 22px); font-weight: 300; line-height: 1.5; color: rgba(255,255,255,0.8); }
.spo2-scene[data-theme="light"] .spo2-lead { color: var(--muted); }
.spo2-cue { position: absolute; left: clamp(24px, 6vw, 120px); bottom: clamp(30px, 6vh, 60px); font-family: var(--body); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 12px; }
.spo2-cue::before { content: ""; width: 1px; height: 40px; background: rgba(255,255,255,0.28); }

.spo2.is-anim .spo2-up { opacity: 0; transform: translateY(38px); }
.spo2:not(.is-anim) .spo2-up { opacity: 1; transform: none; }

.spo2-intro .spo2-scrim { background: radial-gradient(90% 80% at 20% 76%, rgba(10,10,10,0.8), transparent 62%); }

/* Beneficios — filas numeradas */
.spo2-benef .spo2-wrap { max-width: 1180px; }
.spo2-list { margin-top: 44px; display: flex; flex-direction: column; }
.spo2-row { display: grid; grid-template-columns: 56px minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: baseline; gap: clamp(16px, 3vw, 46px); padding: clamp(20px, 2.6vh, 30px) 4px; border-top: 1px solid rgba(10,10,10,0.14); }
.spo2-row:last-child { border-bottom: 1px solid rgba(10,10,10,0.14); }
.spo2-idx { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; color: var(--red); }
.spo2-row-title { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.05; }
.spo2-row-desc { font-family: var(--body); font-weight: 300; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: var(--muted); }

/* Cierre */
.spo2-cierre .spo2-scrim { background: linear-gradient(180deg, rgba(140,2,12,0.4), rgba(140,2,12,0.15)); }
.spo2-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.spo2-chip { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.55); background: transparent; font-family: var(--body); font-weight: 600; font-size: 15px; color: inherit; text-decoration: none; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease; }
.spo2-chip:hover { background: #fff; border-color: #fff; color: var(--red); }
.spo2-chip:active { transform: scale(0.97); }
.spo2-chip.solid { background: #fff; border-color: #fff; color: var(--red); }
.spo2-chip.solid:hover { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }

@media (max-width: 900px) { body.spo2-active .topbar-nav { display: none; } }
@media (max-width: 760px) {
  .spo2-scene { padding: clamp(88px, 13vh, 120px) 22px 64px; min-height: 100svh; }
  .spo2-row { grid-template-columns: 34px 1fr; gap: 10px 14px; }
  .spo2-row-desc { grid-column: 2 / 3; }
}
@media (prefers-reduced-motion: reduce) { .spo2-canvas { display: none; } }


/* Escena "Nuestros sponsors" */
.spo2-marcas-grid {
  margin-top: clamp(34px, 5vh, 64px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 64px); align-items: stretch;
}
.spo2-marca {
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  gap: clamp(16px, 2vw, 26px); padding: clamp(28px, 4vw, 54px) clamp(20px, 3vw, 40px);
  border: 1px solid rgba(0,0,0,0.10); border-radius: 28px; background: #fff;
}
.spo2-marcas .spo2-title { line-height: 0.95; }
.spo2-marca img { width: auto; min-height: clamp(112px, 14vw, 184px); max-width: clamp(180px, 22vw, 300px); max-height: clamp(56px, 7vw, 96px); object-fit: contain; }
.spo2-marca.is-square img { max-height: clamp(112px, 14vw, 184px); max-width: clamp(112px, 14vw, 184px); margin: -14px 0; }
.spo2-marca-rol {
  font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: rgba(0,0,0,0.45);
}
@media (max-width: 720px) { .spo2-marcas-grid { grid-template-columns: 1fr; } }

/* Menú móvil sobre fondo oscuro */
body.spo2-active .topbar-burger span { background: #fff; }
body.spo2-active .nav-sheet { background: rgba(10,10,10,0.98); }
body.spo2-active .nav-sheet-list a { color: #fff; border-bottom-color: rgba(255,255,255,0.12); }
body.spo2-active .nav-sheet-list a.is-active { color: var(--red); }

@media (max-width: 720px) {
  .spo2-marca { padding: 30px 22px; }
  .spo2-marca img { min-height: clamp(84px, 24vw, 120px); }
  .spo2-marca.is-square img { max-height: clamp(84px, 24vw, 120px); max-width: clamp(84px, 24vw, 120px); }
  .spo2-actions { flex-direction: column; align-items: stretch; }
  .spo2-chip { justify-content: center; min-height: 48px; }
}