/* ═══════════════════════════════════════════════════════════════
   LANDING-CLUBS.CSS — Landing del Sistema de Gestión de Clubes
   Estilo: dark arena + acento magenta + tipografía fantasma
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:        #14172a;
  --bg-2:      #1b1f36;
  --bg-3:      #232742;
  --panel:     rgba(255, 255, 255, 0.04);
  --panel-2:   rgba(255, 255, 255, 0.07);
  --line:      rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);

  --pink:      #ff2d6f;
  --pink-2:    #ff5c8a;
  --pink-deep: #d81b58;
  --purple:    #7b3fe4;
  --cyan:      #48bfe3;
  --amber:     #ffc857;
  --green:     #32cd87;

  --text:      #ffffff;
  --muted:     #9ea3bb;
  --dim:       #6b7192;

  --radius:    18px;
  --radius-sm: 12px;
  --maxw:      1200px;
}

@media (min-width: 1024px) {
  :root {
    /* 75vw como quería el diseño, pero con tope para que en 2K/4K
       las rejillas no se estiren a 2000px de ancho */
    --maxw: min(75vw, 1500px);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Contención horizontal.
   `clip` en vez de `hidden`: hidden convierte al body en contenedor de scroll
   y rompe el `position: sticky` de la barra de navegación. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .wrap {
    width: 100%;
    max-width: var(--maxw);
  }
  .hero .wrap {
    width: 90vw;
    max-width: 1600px;
  }
}

/* ── TIPOGRAFÍA FANTASMA (marca de agua de fondo) ── */
.ghost {
  position: absolute;
  font-size: clamp(7rem, 20vw, 18rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.028);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  text-transform: uppercase;
}
.ghost-l { left: -2%; }
.ghost-r { right: -2%; }
.ghost-c { left: 50%; transform: translateX(-50%); }

/* ── ORBES DE LUZ ── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.orb-pink   { background: radial-gradient(circle, var(--pink) 0%, transparent 70%); }
.orb-purple { background: radial-gradient(circle, var(--purple) 0%, transparent 70%); }
.orb-cyan   { background: radial-gradient(circle, var(--cyan) 0%, transparent 70%); }

/* ── ETIQUETAS Y TÍTULOS ── */
.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.eyebrow-pink { color: var(--pink-2); }

.h-xl {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.h-lg {
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.h-md {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.lead {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 46ch;
}
.micro {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.7;
  max-width: 40ch;
}

/* ── BOTONES ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.25s, background 0.25s, border-color 0.25s;
  font-family: inherit;
  white-space: nowrap;
}
.btn-fill {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 10px 30px rgba(255, 45, 111, 0.32);
}
.btn-fill:hover { background: var(--pink-deep); transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255, 45, 111, 0.45); }
.btn-ghost {
  background: #20263f;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.btn-ghost:hover {
  background: #2e375b;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ── HUECOS DE IMAGEN (placeholder con emoji) ── */
.img-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 320px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 45, 111, 0.16) 0%, transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px dashed rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.img-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(123, 63, 228, 0.22) 0%, transparent 60%);
  pointer-events: none;
}
.img-slot .emoji {
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 1;
  filter: drop-shadow(0 12px 30px rgba(255, 45, 111, 0.45));
  position: relative;
  z-index: 1;
}
.img-slot .slot-note {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.img-slot-tall { min-height: 440px; }
.img-slot-wide { min-height: 260px; }

/* ── NAV ── */
.topbar {
  background: #0e1120;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.6rem 1.5rem;
  text-align: center;
  transition: background 0.25s ease;
}
.topbar a {
  transition: color 0.2s ease;
}
.topbar:hover {
  background: #14182e;
}
.topbar:hover strong {
  color: var(--pink-2);
}
.topbar strong { color: #fff; font-weight: 600; transition: color 0.2s ease; }
.topbar .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); margin-right: 0.5rem; vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(20, 23, 42, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  /* La barra es un elemento de ancho completo: no la atamos al 75vw del
     contenido, porque con 7 enlaces + widget + botón no cabe y se desborda. */
  .nav-inner {
    width: min(92vw, 1500px);
    max-width: min(92vw, 1500px);
  }
}
.nav-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nav-brand img { height: 30px; width: auto; }
.nav-brand-txt { line-height: 1.15; }
.nav-brand-txt b { display: block; font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; }
.nav-brand-txt span { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-2); font-weight: 600; }
.nav-links { display: flex; gap: 1.9rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 0.8rem; }

/* Widget "marcador" adaptado a métrica del panel */
.nav-widget {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #0e1120; border: 1px solid var(--line);
  border-radius: 6px; padding: 0.4rem 0.8rem;
}
.nav-widget .lbl { font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-2); font-weight: 700; }
.nav-widget .val { font-size: 0.8rem; font-weight: 700; }
.nav-widget .sub { font-size: 0.55rem; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; }
.nav-burger { display: none; background: none; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 0 0.3rem; line-height: 1; }

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6rem 0 7rem;
  overflow: hidden;
  background: #0b0e1a;
}
.hero .orb-1 { width: 620px; height: 620px; top: -18%; right: -12%; }
.hero .orb-2 { width: 460px; height: 460px; bottom: -22%; left: -14%; opacity: 0.35; }
.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  position: relative;
  z-index: 2;
}
.hero-copy { max-width: 100%; width: 100%; }
.hero-copy .h-xl { margin-bottom: 1.2rem; font-size: clamp(2.6rem, 5.5vw, 4.8rem); max-width: 900px; }
.hero-copy .lead { margin-bottom: 1.6rem; max-width: 65ch; font-size: 1.1rem; }
.hero-copy .micro { margin-bottom: 2.2rem; max-width: 75ch; }

/* ── HERO FULLSCREEN BACKGROUND VIDEO ── */
.hero-bg-video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0.42;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 75% 30%,
    rgba(27, 31, 54, 0.4) 0%,
    rgba(14, 17, 32, 0.82) 55%,
    rgba(11, 14, 26, 0.97) 100%
  );
  backdrop-filter: blur(1px);
}

.hero-mock {
  background: rgba(13, 16, 32, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 45, 111, 0.15);
}

/* Fila de insignias del hero (badge · deportista · próximos cobros) */
.hero-strip {
  display: grid;
  grid-template-columns: auto 1px auto 1px minmax(320px, 480px);
  gap: 2.5rem;
  align-items: center;
  margin: 2.8rem 0;
  width: 100%;
  max-width: 100%;
}
.strip-div {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}
.strip-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  max-width: none;
}
.badge-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--pink), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255, 45, 111, 0.35);
  flex-shrink: 0;
}
.badge-circle svg { display: block; }
.strip-badge .txt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  max-width: 150px;
}
.strip-person {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  text-align: left;
  max-width: none;
}
.person-photo {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  border: 1px dashed rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.person-photo svg { display: block; }
.strip-person .txt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--muted);
  max-width: 120px;
}

.strip-list {
  min-width: 0;
  background: rgba(14, 17, 34, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.85rem 1.3rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.strip-list .hd {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.65rem;
}
.mini-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
}
.mini-row:last-child { margin-bottom: 0; }
.mini-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #20263f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mini-av svg { display: block; }
.mini-row .nm { color: #ffffff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-row .amt { font-weight: 800; color: #ffffff; margin-left: auto; margin-right: 0.35rem; white-space: nowrap; }
.pill { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 4px; white-space: nowrap; color: #ffffff; }
.pill-ok   { background: #059669; }
.pill-warn { background: #d97706; }
.pill-bad  { background: #e11d48; }

/* Distintivos de confianza */
.trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.8rem;
  margin-top: 2.8rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line-soft);
  width: 100%;
}
.trust li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}
.trust .ck { color: var(--green); font-weight: 700; flex-shrink: 0; }
@media (min-width: 1024px) {
  .trust {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 3rem;
    width: 100%;
  }
  .trust li {
    font-size: 0.88rem;
    white-space: nowrap;
  }
}

/* ── SECCIÓN ALTERNADA ── */
.alt { position: relative; padding: 5.5rem 0; overflow: hidden; }
.alt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.alt-rev .alt-media { order: -1; }
.alt-copy .h-lg { margin-bottom: 1rem; }
.alt-copy .lead { margin-bottom: 1.6rem; }
.feat-list { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 2rem; }
.feat-list li { display: flex; gap: 0.7rem; font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.feat-list .ck { color: var(--pink-2); font-weight: 700; flex-shrink: 0; }
.feat-list strong { color: #fff; font-weight: 600; }

.alt-1 { background: linear-gradient(180deg, #14172a, #191d33); }
.alt-2 { background: linear-gradient(180deg, #191d33, #1d1a33); }
.alt-3 { background: linear-gradient(180deg, #1d1a33, #171a2c); }
.alt-4 { background: linear-gradient(180deg, #171a2c, #1a1e35); }

/* ── PANEL / MOCKUP ── */
.mock {
  background: #0d1020; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.mock-real-screenshot {
  background: #080a14;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 45, 117, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.mock-real-screenshot:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255, 45, 117, 0.35);
  box-shadow: 0 32px 80px -10px rgba(0, 0, 0, 0.85), 0 0 40px rgba(255, 45, 117, 0.18);
}
.mock-screen-wrap {
  position: relative;
  overflow: hidden;
  line-height: 0;
  background: #070913;
}
.mock-screen-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}
/* Estándar unificado para imágenes de módulos (640px max) */
.module-showcase-wrap {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.module-showcase-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 55px rgba(0, 0, 0, 0.65));
  transition: transform 0.3s ease;
}
.mock-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line-soft); background: #101324; }
.mock-bar .d { width: 9px; height: 9px; border-radius: 50%; }
.mock-bar .d1 { background: #ff5f57; } .mock-bar .d2 { background: #febc2e; } .mock-bar .d3 { background: #28c840; }
.mock-bar .ttl { font-size: 0.65rem; color: var(--dim); margin-left: 0.5rem; font-family: ui-monospace, monospace; }
.mock-bar .tag { margin-left: auto; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; background: #059669; padding: 0.22rem 0.6rem; border-radius: 4px; box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35); }
.mock-body { padding: 1.25rem; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1.1rem; }
.kpi { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 0.85rem; }
.kpi .k-l { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.kpi .k-v { font-size: 1.3rem; font-weight: 800; margin: 0.25rem 0 0.1rem; letter-spacing: -0.02em; }
.kpi .k-s { font-size: 0.6rem; color: var(--dim); }
.k-green { color: var(--green); } .k-amber { color: var(--amber); } .k-pink { color: var(--pink-2); }

.mock-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.mock-table th { text-align: left; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-weight: 600; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line-soft); }
.mock-table td { padding: 0.65rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--muted); }
.mock-table td.nm { color: #fff; font-weight: 600; }
.mock-table td.amt { font-weight: 700; color: #fff; }
.mock-table tr:last-child td { border-bottom: 0; }
.mock-scroll { overflow-x: auto; }

/* ── TARJETAS DE PROBLEMA ── */
.pain { position: relative; padding: 5rem 0; background: #12152605; overflow: hidden; }
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.sec-head .lead { margin: 0 auto; }
.pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.pain-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 2.2rem 1.75rem 2rem; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 220px;
}
.pain-card:hover { 
  border-color: rgba(255, 45, 111, 0.4); 
  transform: translateY(-4px); 
  box-shadow: 0 20px 45px rgba(0,0,0,0.45);
}
.pain-watermark {
  position: absolute;
  right: -25px;
  bottom: -25px;
  width: 190px;
  height: 190px;
  color: var(--pink-2);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
  z-index: 1;
}
.pain-card:hover .pain-watermark {
  opacity: 0.16;
  transform: scale(1.08) rotate(-4deg);
  color: #ff3b77;
}
.pain-card h4 { position: relative; z-index: 2; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.35; color: #fff; }
.pain-card p { position: relative; z-index: 2; font-size: 0.84rem; color: var(--muted); line-height: 1.65; }

/* ── TARJETAS DE DEPORTE (Estilo Pop-Out con atletas) ── */
.sports { position: relative; padding: 5.5rem 0 6rem; overflow: visible; background: linear-gradient(180deg, #1a1e35, #14172a); }
.sports-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 2.2rem; 
  max-width: 100%; 
  margin: 5rem auto 0; 
  align-items: stretch;
}
.sport-card {
  position: relative; 
  border-radius: 26px; 
  overflow: visible;
  background: linear-gradient(175deg, #e61952 0%, #ce1244 55%, #a80b33 100%);
  text-align: center;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: flex-end;
  box-shadow: 0 25px 55px -10px rgba(230, 25, 82, 0.45), 0 0 35px rgba(230, 25, 82, 0.2);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  min-height: 440px;
}
.sport-card:hover { 
  transform: translateY(-8px); 
  box-shadow: 0 35px 70px -10px rgba(230, 25, 82, 0.6), 0 0 45px rgba(230, 25, 82, 0.3); 
}
.sport-img-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.sport-player-img {
  position: absolute;
  bottom: 0;
  height: 125%;
  max-height: 520px;
  width: auto;
  max-width: 125%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 15px 22px rgba(0, 0, 0, 0.45));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sport-card:hover .sport-player-img {
  transform: scale(1.05) translateY(-4px);
}
/* Degradado del mismo color de la tarjeta debajo de las letras pero encima de la imagen */
.sport-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(to top, #a80b33 0%, #ce1244 35%, rgba(206, 18, 68, 0.82) 65%, rgba(230, 25, 82, 0) 100%);
  pointer-events: none;
  z-index: 2;
}
.sport-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sport-content h4 {
  font-size: 1.5rem; 
  font-weight: 900; 
  text-transform: uppercase; 
  letter-spacing: 0.03em; 
  line-height: 1.12; 
  color: #ffffff;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.sport-content .sport-sub {
  font-size: 0.72rem; 
  font-weight: 700;
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  color: rgba(255, 255, 255, 0.95); 
  line-height: 1.45;
  margin-bottom: 1.3rem;
  max-width: 260px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.sport-content .btn { 
  background: #0d1020; 
  color: #fff; 
  padding: 0.65rem 1.6rem; 
  font-size: 0.7rem; 
  font-weight: 800;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 1px solid rgba(255,255,255,0.18);
  transition: background 0.3s, transform 0.3s, color 0.3s;
}
.sport-content .btn:hover { 
  background: #ffffff; 
  color: #e61952;
  transform: scale(1.05);
}

.dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2.5rem; }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.dots span.on { background: var(--pink); width: 22px; border-radius: 4px; }

/* ── RAZONES ── */
.why { position: relative; padding: 5.5rem 0; overflow: hidden; background: #14172a; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.why-item { display: flex; gap: 1rem; padding: 1.4rem; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); transition: border-color 0.3s; }
.why-item:hover { border-color: rgba(255, 45, 111, 0.3); }
.why-n {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  background: linear-gradient(140deg, var(--pink), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
}
.why-item h4 { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.35rem; }
.why-item p { font-size: 0.81rem; color: var(--muted); line-height: 1.65; }
.why-wide { grid-column: 1 / -1; }

/* ── TRANSPARENCIA ── */
.honest { padding: 4rem 0; background: #101324; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.honest-box { max-width: 100%; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; }
.honest-box h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.65rem; }
.honest-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: #ff2d6f; color: #ffffff; flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(255, 45, 111, 0.35);
}
.honest-icon svg { display: block; }
.honest-box > p { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.3rem; }
.honest-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.honest-list li { display: flex; gap: 0.6rem; font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
.honest-list .bl { color: var(--pink-2); font-weight: 700; }
.honest-list strong { color: #fff; font-weight: 600; }

/* ── PRECIOS Y PLANES ESCALABLES ── */
.price { position: relative; padding: 5.5rem 0; overflow: hidden; background: linear-gradient(180deg, #14172a 0%, #171b30 50%, #14172a 100%); }
.price .sec-head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }

/* Banner Apertura / Clubes Fundadores */
.promo-banner {
  background: linear-gradient(135deg, rgba(255, 45, 111, 0.15), rgba(123, 63, 228, 0.18));
  border: 1px solid rgba(255, 45, 111, 0.35);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 20px 50px rgba(255, 45, 111, 0.12);
  position: relative;
  overflow: hidden;
}
.promo-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,45,111,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #ff2d6f, #e01a4f);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.promo-info h3 { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 0.3rem; }
.promo-info p { font-size: 0.85rem; color: var(--muted); margin: 0; line-height: 1.5; }
.promo-slots {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffffff;
  background: #059669;
  border: 1px solid #10b981;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.45);
}
.dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  animation: pulseWhite 2s infinite;
}
@keyframes pulseWhite {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); }
  70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Switchers y Controles */
.pricing-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 3rem;
}
.pricing-tabs {
  display: flex;
  background: #141829;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.35rem;
  border-radius: 999px;
  gap: 0.4rem;
}
.pricing-tab-btn {
  background: #20263f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.pricing-tab-btn:hover:not(.active) {
  background: #2c3558;
  color: #ffffff;
}
.pricing-tab-btn.active {
  background: linear-gradient(135deg, var(--pink), #e01a4f);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(255, 45, 111, 0.45);
}
.billing-toggle {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.billing-toggle span.active { color: #fff; }
.toggle-pill {
  position: relative;
  width: 48px;
  height: 26px;
  background: #1c2138;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s;
}
.toggle-pill::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}
.toggle-pill.annual {
  background: var(--pink);
  border-color: var(--pink);
}
.toggle-pill.annual::after {
  transform: translateX(22px);
}
.annual-save-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #ffffff;
  background: #059669;
  border: 1px solid #10b981;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}

/* Grid de Tarjetas de Precio */
.pricing-tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.tier-card {
  background: linear-gradient(170deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 2.2rem 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tier-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 45, 111, 0.35);
  box-shadow: 0 20px 45px rgba(0,0,0,0.5);
}
.tier-card.featured {
  background: linear-gradient(170deg, rgba(255, 45, 111, 0.12), rgba(123, 63, 228, 0.08));
  border: 1px solid rgba(255, 45, 111, 0.45);
  box-shadow: 0 22px 55px rgba(255, 45, 111, 0.18);
  transform: scale(1.02);
}
.tier-card.featured:hover {
  transform: scale(1.02) translateY(-5px);
  border-color: var(--pink);
}
.tier-featured-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--pink), #e01a4f);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(255, 45, 111, 0.4);
}
.tier-name { font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 0.2rem; }
.tier-scope { font-size: 0.75rem; color: var(--muted); font-weight: 600; margin-bottom: 1.3rem; }
.tier-price-box { margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line-soft); }
.tier-price { font-size: 2.8rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.03em; }
.tier-price sup { font-size: 1.25rem; font-weight: 700; vertical-align: super; }
.tier-price-sub { font-size: 0.72rem; color: var(--dim); margin-top: 0.35rem; }
.tier-price-was { font-size: 0.72rem; color: rgba(255,255,255,0.4); text-decoration: line-through; margin-right: 0.4rem; }
.tier-setup-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.6rem;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.tier-setup-free { background: #059669; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35); }
.tier-setup-discount { background: #d97706; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35); }
.tier-setup-regular { background: #334155; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }

.tier-features { list-style: none; padding: 0; margin: 0 0 1.8rem; display: flex; flex-direction: column; gap: 0.65rem; flex-grow: 1; }
.tier-features li { font-size: 0.78rem; color: var(--muted); display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.45; }
.tier-features li .ck { color: var(--green); font-weight: 700; flex-shrink: 0; }
.tier-btn { width: 100%; padding: 0.75rem 1rem; font-size: 0.75rem; text-align: center; border-radius: 999px; }

/* Tarjeta de más de 250 */
.tier-corp-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.6rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.tier-corp-info h4 { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 0.3rem; }
.tier-corp-info p { font-size: 0.82rem; color: var(--muted); margin: 0; }
.tier-corp-price { text-align: right; white-space: nowrap; }
.tier-corp-price .lbl { font-size: 0.7rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.tier-corp-price .val { font-size: 1.4rem; font-weight: 800; color: #fff; }

/* Acordeón de Tablas Comparativas Oficiales */
.pricing-tables-accordion {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1.5rem;
}
.pricing-tables-accordion summary {
  padding: 1.2rem 1.6rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.pricing-tables-accordion summary::-webkit-details-marker { display: none; }
.pricing-tables-accordion[open] summary { border-bottom: 1px solid var(--line-soft); }
.pricing-tables-body { padding: 1.8rem; overflow-x: auto; }
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-bottom: 2rem;
}
.pricing-table:last-child { margin-bottom: 0; }
.pricing-table caption {
  text-align: left;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  padding-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.pricing-table th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--dim);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.pricing-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
.pricing-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.pricing-table td.strong { color: #fff; font-weight: 700; }
.pricing-table td.highlight { color: var(--green); font-weight: 700; }

@media (max-width: 1100px) {
  .pricing-tier-grid { grid-template-columns: repeat(2, 1fr); }
  .promo-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
  .pricing-tier-grid { grid-template-columns: 1fr; }
  .tier-corp-card { flex-direction: column; align-items: flex-start; }
}

/* ── FAQ ── */
.faq { padding: 5.5rem 0; background: #14172a; position: relative; overflow: hidden; }
.faq-list { max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 0.8rem; }
.faq-item { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.3s; }
.faq-item[open] { border-color: rgba(255, 45, 111, 0.32); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.15rem 1.4rem;
  font-size: 0.92rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { color: var(--pink-2); transition: transform 0.25s; flex-shrink: 0; font-size: 0.8rem; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .ans { padding: 0 1.4rem 1.3rem; font-size: 0.85rem; color: var(--muted); line-height: 1.75; }
.faq-item .ans strong { color: #fff; }

/* ── CTA FINAL ── */
.cta { position: relative; padding: 6rem 0; text-align: center; overflow: hidden; background: linear-gradient(160deg, #1d1a33, #14172a 60%, #24132b); }
.cta .orb-1 { width: 560px; height: 560px; top: -30%; left: 50%; transform: translateX(-50%); opacity: 0.35; }
.cta .h-lg { margin-bottom: 1rem; }
.cta .lead { margin: 0 auto 2.2rem; text-align: center; max-width: 52ch; }
.cta .btn-row { justify-content: center; }
.cta-note { margin-top: 1.6rem; font-size: 0.72rem; color: var(--dim); letter-spacing: 0.06em; }

/* ── FOOTER ── */
.foot { background: #0d1020; border-top: 1px solid var(--line-soft); padding: 3.5rem 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.foot-brand img { height: 40px; margin-bottom: 1rem; }
.foot-brand p { font-size: 0.8rem; color: var(--muted); line-height: 1.7; max-width: 28ch; }
.foot-col h5 { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-2); margin-bottom: 1rem; }
.foot-col li { margin-bottom: 0.6rem; }
.foot-col a, .foot-col span { font-size: 0.82rem; color: var(--muted); transition: color 0.2s; }
.foot-col a:hover { color: #fff; }
.foot-social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.foot-social a {
  width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.foot-social a svg { display: block; }
.foot-social a:hover { background: var(--pink); color: #ffffff; transform: translateY(-3px); }

.foot-legal { border-top: 1px solid var(--line-soft); padding: 1.5rem 0 2rem; font-size: 0.72rem; color: var(--dim); line-height: 1.85; text-align: center; }
.foot-legal strong { color: var(--muted); font-weight: 600; }
.foot-legal a { color: var(--dim); }
.foot-legal a:hover { color: var(--muted); }
.legal-item { display: inline-block; white-space: nowrap; }
.legal-sep { display: inline-block; margin: 0 0.45rem; opacity: 0.4; }

/* ── BOTÓN FLOTANTE WHATSAPP ── */
.wa-float {
  position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

/* ═══════════ RESPONSIVE & MOBILE OPTIMIZATION ═══════════ */
@media (max-width: 1024px) {
  .hero .wrap { width: 92vw; max-width: 100%; }
  .hero-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .strip-div { display: none; }
  .strip-list { grid-column: 1 / -1; max-width: none; }
  .pricing-tier-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .sports-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

@media (max-width: 1100px) {
  .nav-links, .nav-widget { display: none; }
  .nav-burger { display: block; }
}

@media (max-width: 980px) {
  .alt-rev .alt-media { order: 0; }
  .hero-copy { max-width: none; }
  .why-wide { grid-column: auto; }
}

/* ── MOCKUP ASESOR IA (Definición global de componentes) ── */
.ai-chat { display: flex; flex-direction: column; gap: 0.9rem; }
.ai-msg { display: flex; gap: 0.75rem; align-items: flex-start; }
.ai-msg-user { justify-content: flex-end; }
.ai-avatar { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.ai-avatar-bot { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; box-shadow: 0 4px 14px rgba(255, 45, 111, 0.3); }
.ai-avatar-user { background: var(--panel-2); color: var(--muted); }
.ai-bubble { max-width: 86%; border-radius: 12px; padding: 0.85rem 1.1rem; font-size: 0.8rem; line-height: 1.6; }
.ai-bubble-bot { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft); color: #e2e8f0; border-top-left-radius: 3px; }
.ai-bubble-bot strong { color: #fff; font-weight: 600; }
.ai-bubble-user { background: rgba(255, 45, 111, 0.16); border: 1px solid rgba(255, 45, 111, 0.3); color: #fff; border-bottom-right-radius: 3px; }
.ai-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; border-radius: 4px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; background: #7c3aed; color: #ffffff; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35); }
.ai-note { font-size: 0.68rem; color: var(--dim); margin-top: 0.7rem; display: flex; align-items: center; gap: 0.4rem; }

/* ── OPTIMIZACIÓN CELULAR (< 768px) ── */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 3.5rem 0 4rem;
  }
  .hero .wrap {
    width: 92vw;
    max-width: 100%;
  }
  .hero-copy .h-xl {
    font-size: clamp(2.3rem, 8.5vw, 3.2rem);
    line-height: 1.08;
    margin-bottom: 1rem;
  }
  .hero-copy .lead {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
  }
  .hero-copy .micro {
    font-size: 0.72rem;
    line-height: 1.5;
    margin-bottom: 1.8rem;
  }

  /* Franja del Hero adaptada a móvil */
  .hero-strip {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.8rem 0 2.2rem;
  }
  .strip-div { display: none; }
  .strip-badge, .strip-person {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    background: rgba(14, 17, 34, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    max-width: 100%;
  }
  .badge-circle {
    width: 48px;
    height: 48px;
  }
  .person-photo {
    width: 48px;
    height: 48px;
  }
  .strip-badge .txt, .strip-person .txt {
    max-width: none;
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: left;
  }
  .strip-list {
    max-width: 100%;
    border-radius: 14px;
    padding: 1rem 1.1rem;
  }
  .mini-row {
    font-size: 0.76rem;
  }

  /* Botones principales de acción */
  .btn-row {
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
  }
  .btn-row .btn {
    width: 100%;
    min-height: 48px;
    padding: 0.95rem 1.4rem;
    font-size: 0.82rem;
    text-align: center;
    justify-content: center;
  }

  /* Garantías de confianza */
  .trust {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 2rem;
    padding-top: 1.6rem;
  }
  .trust li {
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: normal;
  }

  /* Secciones alternadas (Módulos 01 a 05) */
  .alt, .why, .price, .faq, .sports, .pain {
    padding: 3.5rem 0;
  }
  .alt-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .alt-copy {
    order: 1;
    width: 100%;
  }
  .alt-media {
    order: 2;
    width: 100%;
  }
  .alt-copy .h-lg {
    font-size: clamp(1.6rem, 6.5vw, 2.3rem);
    margin-bottom: 0.8rem;
  }
  .alt-copy .lead {
    font-size: 0.95rem;
    margin-bottom: 1.3rem;
  }
  .feat-list {
    gap: 0.75rem;
    margin-bottom: 1.6rem;
  }
  .feat-list li {
    font-size: 0.84rem;
    line-height: 1.55;
  }
  .module-showcase-wrap {
    max-width: 100%;
  }
  .mock-real-screenshot {
    border-radius: 12px;
  }

  /* Problemas */
  .pain-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .pain-card {
    padding: 1.6rem 1.4rem;
    min-height: auto;
  }
  .pain-watermark {
    width: 140px;
    height: 140px;
    right: -15px;
    bottom: -15px;
    opacity: 0.12;
  }

  /* Deportes */
  .sports-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    margin-top: 3.5rem;
  }
  .sport-card {
    min-height: 380px;
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }
  .sport-player-img {
    height: 118%;
    max-height: 420px;
  }

  /* Razones */
  .why-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .why-item {
    gap: 1rem;
  }

  /* Transparencia */
  .honest {
    padding: 3rem 0;
  }
  .honest-box {
    padding: 1.5rem 1.2rem;
    border-radius: 14px;
  }
  .honest-box h4 {
    font-size: 0.98rem;
    line-height: 1.35;
  }
  .honest-list {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .honest-list li {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  /* Precios en móvil */
  .promo-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    padding: 1.5rem 1.2rem;
  }
  .promo-slots {
    align-self: flex-start;
    font-size: 0.72rem;
    padding: 0.5rem 0.9rem;
    white-space: normal;
  }
  .pricing-controls {
    width: 100%;
    margin-bottom: 2rem;
    gap: 1.2rem;
  }
  .pricing-tabs {
    width: 100%;
    flex-direction: column;
    border-radius: 14px;
    padding: 0.4rem;
    gap: 0.4rem;
  }
  .pricing-tab-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
  }
  .billing-toggle {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1rem;
  }
  .annual-save-badge {
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 0.2rem;
  }
  .pricing-tier-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .tier-card {
    padding: 2rem 1.4rem 1.6rem;
  }
  .tier-card.featured {
    transform: none;
  }
  .tier-card.featured:hover {
    transform: translateY(-4px);
  }
  .tier-corp-card {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 1.4rem;
    padding: 1.5rem 1.2rem;
  }
  .tier-corp-price {
    text-align: left;
  }
  .tier-corp-card .btn {
    width: 100%;
  }
  .pricing-tables-accordion summary {
    padding: 1rem 1.2rem;
    font-size: 0.8rem;
    line-height: 1.35;
  }
  .pricing-tables-body {
    padding: 1rem 0.8rem;
  }
  .pricing-table th, .pricing-table td {
    padding: 0.6rem 0.65rem;
    font-size: 0.72rem;
  }

  /* FAQ */
  .faq-item summary {
    padding: 1.1rem 1.2rem;
    font-size: 0.85rem;
    line-height: 1.4;
  }
  .faq-item .ans {
    padding: 0 1.2rem 1.2rem;
    font-size: 0.82rem;
    line-height: 1.65;
  }

  /* CTA & Footer */
  .cta {
    padding: 4rem 0;
    text-align: center;
  }
  .cta .btn-row {
    flex-direction: column;
  }
  .cta .btn {
    width: 100%;
  }
  .foot {
    padding: 3rem 0 0;
  }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
  }
  .foot-brand p {
    max-width: none;
  }
  .foot-legal {
    padding: 1.5rem 0 2rem;
    font-size: 0.72rem;
    line-height: 1.7;
  }
  .legal-item {
    display: block;
    margin-bottom: 0.3rem;
  }
  .legal-sep {
    display: none;
  }
  .wa-float {
    bottom: 1rem;
    right: 1rem;
    width: 50px;
    height: 50px;
  }
  .wa-float svg {
    width: 26px;
    height: 26px;
  }
  .ghost {
    font-size: clamp(3.5rem, 22vw, 7rem);
  }
}

/* ── PANTALLAS EXTRA PEQUEÑAS (< 480px) ── */
@media (max-width: 480px) {
  .topbar {
    font-size: 0.65rem;
    padding: 0.45rem 0.8rem;
  }
  .nav-inner {
    padding: 0.7rem 0.9rem;
  }
  .nav-brand img {
    height: 28px;
  }
  .nav-brand-txt b {
    font-size: 0.85rem;
  }
  .nav-brand-txt span {
    font-size: 0.55rem;
  }
  .nav-actions .btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.7rem;
  }
  .hero-copy .h-xl {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .tier-price {
    font-size: 2.3rem;
  }
  .sport-card {
    min-height: 350px;
    border-radius: 20px;
  }
  .sport-overlay {
    border-radius: 0 0 20px 20px;
  }
  .sport-content h4 {
    font-size: 1.35rem;
  }
}

/* Menú móvil desplegable */
.nav-mobile {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: rgba(16, 19, 36, 0.98);
  backdrop-filter: blur(16px);
  padding: 0.8rem 1.5rem 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: flex;
  align-items: center;
  padding: 0.85rem 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.2s, padding-left 0.2s;
}
.nav-mobile a:hover, .nav-mobile a:active {
  color: var(--pink-2);
  padding-left: 0.5rem;
}
.nav-mobile a:last-child {
  border-bottom: 0;
  color: var(--pink-2);
  margin-top: 0.5rem;
}

@media (min-width: 1101px) { .nav-mobile { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   AJUSTES RESPONSIVE — rangos intermedios y correcciones
   Va al final para ganar en especificidad de orden.
   ═══════════════════════════════════════════════════════════════ */

/* ── Barra de navegación: apretar antes de pasar a hamburguesa ── */
@media (max-width: 1320px) and (min-width: 1101px) {
  .nav-links { gap: 1.2rem; }
}
@media (max-width: 1200px) and (min-width: 1101px) {
  .nav-widget { display: none; }
}

/* ── Hero: la franja de insignias no cabe a 5 columnas por debajo
      de ~1200px (se desbordaba lateralmente entre 1025 y 1150) ── */
@media (max-width: 1200px) {
  .hero-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 2.2rem 0;
  }
  .strip-div { display: none; }
  .strip-list { grid-column: 1 / -1; max-width: none; }
}

/* ── Portátiles y tablets en horizontal (769–1023px) ──
      Con límite inferior: por debajo de 769px mandan las reglas de móvil,
      que van antes en el archivo y si no quedarían pisadas. */
@media (min-width: 769px) and (max-width: 1023px) {
  /* 4 columnas de "problemas" a 900px daban tarjetas de 180px */
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  /* Los distintivos con nowrap se salían del ancho de columna */
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust li { white-space: normal; }
}
.pricing-tabs { flex-wrap: wrap; justify-content: center; }

/* ── Las 4 tarjetas de "problemas" necesitan ~250px cada una para que el
      texto no se parta en 8 líneas. Con el contenedor al 75vw eso no ocurre
      hasta ~1400px de viewport: hasta ahí, 2 columnas. ── */
@media (min-width: 769px) and (max-width: 1399px) {
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) and (max-width: 1099px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
/* Las tarjetas de deporte se estrechan a 245px en portátiles pequeños */
@media (min-width: 901px) and (max-width: 1199px) {
  .sports-grid { gap: 1.4rem; }
  .sport-content { padding: 0 1rem 1.6rem; }
  .sport-content h4 { font-size: 1.25rem; }
  .sport-content .sport-sub { font-size: 0.68rem; margin-bottom: 1rem; }
}

/* Los 4 distintivos en fila sólo cuando de verdad caben */
@media (min-width: 1024px) and (max-width: 1399px) {
  .trust { grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; }
  .trust li { white-space: normal; }
}

/* ── Tablets en vertical (769–900px): apilar lo que aún iba a 2 columnas ── */
@media (min-width: 769px) and (max-width: 900px) {
  .alt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .alt-rev .alt-media { order: 0; }
  .why-grid { grid-template-columns: 1fr; }
  .why-wide { grid-column: auto; }
  .honest-list { grid-template-columns: 1fr; }
  /* Las tarjetas de deporte necesitan ancho para el recorte del atleta */
  .sports-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 3.5rem;
  }
  .sport-card { max-width: 380px; margin: 0 auto; width: 100%; }
}

/* ── Móvil: contener el recorte del atleta, que sobresale un 125% ── */
@media (max-width: 768px) {
  .sport-player-img { max-width: 108%; }
  .hero-strip { grid-template-columns: 1fr; }
}

/* ── La sección de deportes necesita overflow visible para que los recortes
      de atletas sobresalgan por arriba, pero eso dejaba escapar la tipografía
      fantasma por el lateral (10px de scroll horizontal en móvil).
      clip en X + visible en Y es una combinación válida y resuelve ambas. ── */
.sports { overflow: hidden; }
@supports (overflow: clip) {
  .sports { overflow-x: clip; overflow-y: visible; }
}

/* ── Hero a pantalla completa: alto real del viewport en móvil ──
      100vh no descuenta la barra del navegador y recorta el contenido. */
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
}

/* Móvil en horizontal: un hero de pantalla completa no deja ver nada */
@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 3rem 0 3.5rem;
  }
  .hero-copy .h-xl { font-size: clamp(1.9rem, 5vw, 2.6rem); }
  .wa-float { bottom: 0.7rem; right: 0.7rem; }
}

/* ── Barra de navegación en móvil ──
      Marca + botón "Pedir demo" + hamburguesa no caben por debajo de ~600px
      (se desbordaba 62px a 360px). El CTA del nav es redundante: el botón
      flotante de WhatsApp está siempre visible y el menú lo repite. */
@media (max-width: 600px) {
  .nav-inner { gap: 0.75rem; }
  .nav-brand { min-width: 0; }
  .nav-brand-txt { min-width: 0; overflow: hidden; }
  .nav-brand-txt b,
  .nav-brand-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .nav-actions { gap: 0; flex-shrink: 0; }
  .nav-actions .btn-fill { display: none; }
  .nav-burger { font-size: 1.6rem; padding: 0 0.2rem; }
}

/* ── Pantallas muy estrechas (≤380px) ── */
@media (max-width: 380px) {
  .wrap { padding: 0 1rem; }
  .hero-copy .h-xl { font-size: 1.85rem; }
  .hero-copy .lead { font-size: 0.92rem; }
  .strip-badge, .strip-person { padding: 0.7rem 0.85rem; gap: 0.75rem; }
  .badge-circle, .person-photo { width: 42px; height: 42px; }
  .strip-badge .txt, .strip-person .txt { font-size: 0.68rem; }
  .mini-row { font-size: 0.7rem; gap: 0.5rem; }
  .pill { font-size: 0.52rem; padding: 0.15rem 0.4rem; }
  .tier-price { font-size: 2rem; }
  .sport-content h4 { font-size: 1.2rem; }
  .honest-box { padding: 1.2rem 1rem; }
  .faq-item summary { font-size: 0.8rem; padding: 1rem; }
  .faq-item .ans { padding: 0 1rem 1rem; font-size: 0.79rem; }
}

/* ── Áreas táctiles mínimas en dispositivos sin puntero fino ── */
@media (hover: none) and (pointer: coarse) {
  .nav-mobile a { min-height: 46px; }
  .faq-item summary { min-height: 48px; }
  .pricing-tab-btn { min-height: 44px; }
  .foot-col a { display: inline-block; padding: 0.15rem 0; }
  /* Sin hover real, los efectos de elevación se quedan pegados al tocar */
  .pain-card:hover,
  .tier-card:hover,
  .sport-card:hover,
  .mock-real-screenshot:hover { transform: none; }
}