/* ═══════════════════════════════════════════════════════════════════
   INVICTO.VIP — Pantalla de bienvenida (visitantes sin sesión)
   Siempre oscura, en los dos temas: es identidad de marca, no
   contenido (mismo criterio que .bottom-nav y la barra superior).
   Tamaños de los elementos decorativos en px/vw/% — nunca rem — para
   que no se descuadren si el usuario agranda la fuente del sistema;
   el texto sí va en rem.
   ═══════════════════════════════════════════════════════════════════ */

html.bv-abierta, html.bv-abierta body { overflow: hidden; }

.bv {
  position: fixed;
  inset: 0;
  z-index: 2000;               /* por encima de la nav (1030) y de la bottom-nav */
  display: flex;
  flex-direction: column;
  background: #020617;
  color: #f1f5f9;
  font-family: 'Inter', system-ui, sans-serif;
  opacity: 0;
  transition: opacity .35s ease;
  overscroll-behavior: contain;
}
.bv.on { opacity: 1; }

/* Fondo: focos de estadio + niebla cian al pie */
.bv-fondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 36% at 4% 4%, rgba(0,245,212,.30), transparent 72%),
    radial-gradient(60% 36% at 96% 8%, rgba(0,170,255,.24), transparent 72%),
    radial-gradient(90% 46% at 50% 104%, rgba(0,245,212,.12), transparent 70%),
    linear-gradient(180deg, #04102a 0%, #020617 58%);
}
.bv-fondo::before,
.bv-fondo::after {
  content: "";
  position: absolute;
  top: 0;
  width: 46%;
  height: 22%;
  background: radial-gradient(circle, #fff 0 1.4px, rgba(150,240,255,.55) 2px, transparent 4px) 0 0 / 15px 15px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.bv-fondo::before { left: -6%;  transform: rotate(14deg);  transform-origin: top left; }
.bv-fondo::after  { right: -6%; transform: rotate(-14deg); transform-origin: top right; }

/* Saltar */
.bv-saltar {
  position: absolute;
  z-index: 5;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(2,6,23,.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #cbd5e1;
  font: 600 .78rem 'Inter', sans-serif;
  cursor: pointer;
}
.bv-saltar:hover { color: #fff; border-color: rgba(0,245,212,.5); }

/* Pista horizontal con scroll-snap (swipe nativo, sin librerías) */
.bv-track {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bv-track::-webkit-scrollbar { display: none; }
.bv-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
  scrollbar-width: none;
}
.bv-slide::-webkit-scrollbar { display: none; }
.bv-in {
  position: relative;
  max-width: 440px;
  min-height: 100%;
  margin: 0 auto;
  padding: calc(54px + env(safe-area-inset-top, 0px)) 22px 62px;
  display: flex;
  flex-direction: column;
}

/* ── Paso 1 ───────────────────────────────────────────────────────── */
.bv-logo {
  display: block;
  width: min(62vw, 240px);
  max-height: 27vh;
  object-fit: contain;
  margin: 0 auto;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(72% 72% at 50% 50%, #000 62%, transparent 100%);
  animation: bvLogo .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bvLogo { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

.bv-jugador {
  position: absolute;
  right: -22px;
  top: 36%;
  width: 62%;
  max-width: 300px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(78% 78% at 62% 42%, #000 46%, transparent 100%);
          mask-image: radial-gradient(78% 78% at 62% 42%, #000 46%, transparent 100%);
  opacity: .95;
}
.bv-txt { position: relative; margin-top: 4px; max-width: 62%; }
.bv-pre { font-size: 1.5rem; font-weight: 700; line-height: 1.1; margin: 0; }
.bv-tit {
  font-size: clamp(2.6rem, 13.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  margin: 0 0 .5rem;
}
.bv-tit span { color: #00f5d4; }
.bv-lema { font-size: 1.02rem; line-height: 1.35; color: #cbd5e1; margin: 0; }

.bv-pilares {
  position: relative;
  list-style: none;
  margin: auto 0 1.1rem;
  padding: 1.4rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bv-pilar { text-align: center; padding: 0 4px; }
.bv-pilar + .bv-pilar { border-left: 1px solid rgba(255,255,255,.1); }
.bv-ico {
  width: 54px; height: 54px;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(0,245,212,.55);
  background: #07132b;
  color: #f5b73b;
  font-size: 22px;
  box-shadow: 0 0 18px rgba(0,245,212,.18);
}
.bv-pilar strong { display: block; font-size: .78rem; font-weight: 700; line-height: 1.15; }
.bv-pilar small { display: block; margin-top: 3px; font-size: .68rem; line-height: 1.25; color: #94a3b8; }

/* ── Botones ──────────────────────────────────────────────────────── */
.bv-ctas { position: relative; display: flex; flex-direction: column; gap: 10px; }
.bv-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: 'Teko', sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, filter .15s, box-shadow .15s;
}
.bv-btn:active { transform: scale(.98); }
.bv-btn-1 {
  color: #021a17;
  background: linear-gradient(180deg, #2bffe3, #00d9bd);
  box-shadow: 0 0 0 1px rgba(0,245,212,.5), 0 8px 26px rgba(0,245,212,.35);
}
.bv-btn-1:hover { filter: brightness(1.06); }
.bv-btn-2 {
  color: #f1f5f9;
  background: rgba(8,18,40,.85);
  border-color: rgba(255,255,255,.16);
}
.bv-btn-2:hover { border-color: rgba(0,245,212,.55); }
.bv-link {
  align-self: center;
  padding: 8px 10px;
  border: none;
  background: none;
  color: #00f5d4;
  font: 600 .9rem 'Inter', sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.bv-link:hover { text-decoration: underline; }
.bv-link span { color: #94a3b8; font-weight: 500; }

/* ── Pasos 2-4 ────────────────────────────────────────────────────── */
.bv-h { font-size: clamp(1.7rem, 8vw, 2.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -.5px; margin: 1.6rem 0 .5rem; }
.bv-p { font-size: .98rem; line-height: 1.4; color: #cbd5e1; margin: 0 0 1.3rem; max-width: 34ch; }
.bv-lista { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.bv-modo, .bv-enlace {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  color: inherit;
  font-family: inherit;
  background: rgba(8,18,40,.78);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
}
.bv-enlace { cursor: pointer; transition: border-color .15s, background .15s; }
.bv-enlace:hover { border-color: rgba(0,245,212,.5); background: rgba(0,245,212,.07); }
.bv-modo .bv-ico, .bv-enlace .bv-ico { width: 46px; height: 46px; margin: 0; font-size: 19px; flex-shrink: 0; }
.bv-modo strong, .bv-enlace strong { display: block; font-size: .98rem; font-weight: 700; }
.bv-modo small, .bv-enlace small { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.3; color: #94a3b8; }
.bv-enlace > i.fa-chevron-right { margin-left: auto; font-size: .75rem; color: #00f5d4; }

.bv-paso { display: flex; align-items: flex-start; gap: 14px; padding: 4px 0 14px; position: relative; }
.bv-paso:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 0; width: 2px;
  background: linear-gradient(180deg, rgba(0,245,212,.5), rgba(0,245,212,.08));
}
.bv-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #00f5d4;
  color: #021a17;
  font: 700 1.3rem 'Teko', sans-serif;
}
.bv-paso strong { display: block; font-size: .98rem; font-weight: 700; margin-top: 1px; }
.bv-paso small { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.35; color: #94a3b8; }
.bv-nota {
  margin: 0 0 1.1rem;
  padding: .7rem .9rem;
  border-radius: 12px;
  border: 1px dashed rgba(245,183,59,.45);
  color: #f5d48a;
  font-size: .82rem;
  line-height: 1.35;
}
.bv-fin { margin-top: auto; }

/* ── Puntos ───────────────────────────────────────────────────────── */
.bv-dots {
  position: absolute;
  z-index: 4;
  left: 0; right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; gap: 8px;
  pointer-events: none;
}
.bv-dot {
  pointer-events: auto;
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.bv-dot.on { width: 24px; background: #00f5d4; box-shadow: 0 0 10px rgba(0,245,212,.6); }
.bv-dot:focus-visible, .bv-btn:focus-visible, .bv-link:focus-visible,
.bv-saltar:focus-visible, .bv-enlace:focus-visible { outline: 2px solid #00f5d4; outline-offset: 3px; }

/* Pantallas bajas (iPhone SE, móvil apaisado): se compacta el paso 1 */
@media (max-height: 700px) {
  .bv-logo { max-height: 21vh; }
  .bv-in { padding-top: calc(46px + env(safe-area-inset-top, 0px)); }
  .bv-pilares { padding-top: .8rem; margin-bottom: .7rem; }
  .bv-ico { width: 46px; height: 46px; font-size: 18px; }
  .bv-btn { min-height: 46px; font-size: 1.3rem; }
  .bv-h { margin-top: 1rem; }
}
@media (min-width: 768px) {
  .bv-in { max-width: 480px; }
  .bv-jugador { right: -60px; }
}
@media (prefers-reduced-motion: reduce) {
  .bv, .bv-dot, .bv-btn, .bv-enlace { transition: none; }
  .bv-logo { animation: none; }
}