/* ===========================================================================
   Dirige Tu Club · Landing
   ---------------------------------------------------------------------------
   Mobile first: todo lo de aquí abajo es la versión de móvil, que es como la
   van a abrir los entrenadores. Los @media solo AÑADEN a partir de tablet.

   Paleta: la del logo (azul marino + verde), no la morada de la app. El logo
   es el activo fijo de la marca y es lo primero que se ve; ambos colores están
   muestreados del propio PNG. El morado de la app se conserva como acento de
   apoyo para que las dos pantallas no parezcan de productos distintos.

   Ojo con el fondo del logo horizontal: "Dirige" y "Club" van en azul marino,
   así que ese PNG NO se puede poner sobre una sección marina o desaparece. Por
   eso la cabecera y el pie son claros. Sobre marino se usa el icono cuadrado
   (que ya trae su fondo) más el nombre en texto vivo: ver .brand.
   ======================================================================== */

:root{
  --navy:#08223F;          /* azul del logo */
  --navy-2:#0e3560;        /* mismo azul aclarado, para degradados */
  --navy-3:#061a31;        /* más oscuro, para secciones de contraste */
  --green:#6AC647;         /* verde del logo */
  --green-2:#58b336;       /* verde pulsado */
  --green-ink:#2f6b19;     /* verde legible sobre fondo blanco */
  --purple:#31098c;        /* el de la app (styles.css), como acento */
  --amber:#f6c344;         /* el de las flechas de la pizarra */
  --ink:#181526;
  --muted:#5f6875;
  --muted-light:#b9c6d6;   /* texto secundario sobre marino */
  --line:#e5e2ec;
  --bg:#f6f5f8;
  --white:#fff;
  --radius:14px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font:16px/1.6 'DM Sans',system-ui,sans-serif;
  /* Ninguna sección debe poder desbordar a lo ancho en un móvil estrecho. */
  overflow-x:hidden;
}

h1,h2,h3{font-family:Manrope,'DM Sans',sans-serif;margin:0;line-height:1.18}
p{margin:0}
img{max-width:100%;display:block}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 18px}

/* La cabecera es sticky: sin este margen, saltar a una sección desde el menú
   deja el título justo debajo de la barra y parece que no ha pasado nada. */
#directo,#estadisticas,#funciones{scroll-margin-top:78px}

/* Etiquetas de sección: mismo tratamiento que .eyebrow en la app.
   El verde de marca sobre blanco se queda en 2:1 de contraste, ilegible a 11px,
   así que sobre fondo claro va el verde oscuro y el vivo se reserva para el
   marino, donde sí contrasta de sobra. */
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-ink);margin:0 0 12px
}
.eyebrow.center{text-align:center}
.hero .eyebrow,.live .eyebrow{color:var(--green)}

.section-title{
  font-size:clamp(27px,7vw,40px);font-weight:800;
  text-align:center;margin:0 0 14px;letter-spacing:-.02em
}
.section-lead{color:var(--muted);font-size:16px;margin:0 0 30px}
.section-lead.center{text-align:center;max-width:62ch;margin-left:auto;margin-right:auto}

/* ===== Botones =====
   48px de alto mínimo: es el objetivo táctil que se puede pulsar con el pulgar
   sin apuntar, que es como se usa esto a pie de campo. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:13px 22px;
  border:0;border-radius:10px;
  background:var(--green);color:var(--navy);
  font:700 15px Manrope,'DM Sans',sans-serif;
  text-decoration:none;text-align:center;
  cursor:pointer;transition:background .15s,transform .15s;
}
.btn:hover{background:var(--green-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}

.btn-lg{width:100%;font-size:16px;padding:15px 24px}
.btn-sm{min-height:40px;padding:9px 16px;font-size:13px;flex:none}

/* Secundario sobre el marino. */
.btn-ghost{
  background:transparent;color:var(--white);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32);
}
.btn-ghost:hover{background:rgba(255,255,255,.10)}

/* ===== Cabecera ===== */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:11px 18px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-logo{display:block;flex:0 1 auto;min-width:0;margin-right:auto}
/* El logo pedía presencia: pasa de 28 a 34 px, y a 42 en escritorio. */
.nav-logo img{height:34px;width:auto}
/* Los enlaces de sección no caben en móvil y tampoco hacen falta: ahí se baja
   con el dedo. Aparecen a partir de tablet. */
.nav-links{display:none;gap:22px;margin-right:8px}
.nav-links a{
  color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;
  padding:6px 0;border-bottom:2px solid transparent
}
.nav-links a:hover{color:var(--navy);border-color:var(--green)}

/* ===== Héroe ===== */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 78% 4%,rgba(106,198,71,.22),transparent 62%),
    linear-gradient(165deg,var(--navy),var(--navy-2));
  color:var(--white);
  padding:36px 0 56px;
}
.hero-grid{display:grid;gap:38px}

/* ===== La marca, en grande =====
   El icono ya viene con su fondo marino: se le pone el mismo radio que a los
   botones y un aro tenue para que no parezca un recorte pegado. El nombre va
   en texto para poder llevarlo al tamaño que haga falta sin pixelar y para
   pintar "Tu" en verde, igual que el logo original. */
.brand{display:flex;align-items:center;gap:13px;margin:0 0 22px}
.brand-mark{
  width:54px;height:54px;flex:none;border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 10px 26px rgba(0,0,0,.32);
}
.brand-name{
  font:800 clamp(27px,7.4vw,38px)/1 Manrope,sans-serif;
  letter-spacing:-.025em;color:var(--white);white-space:nowrap;
}
.brand-name em{font-style:normal;color:var(--green)}

.hero h1{margin:0 0 18px;letter-spacing:-.02em}
.hero h1 span{display:block;font-size:clamp(26px,6.8vw,40px);font-weight:800}
.h1-b{color:var(--green)}

.hero .lead{color:var(--muted-light);font-size:16px;margin:0 0 26px;max-width:54ch}

.cta-row{display:grid;gap:10px}

.cta-note{margin:16px 0 0;font-size:13px;color:var(--muted-light)}
.cta-note.light{color:rgba(8,34,63,.72)}

/* ===== El móvil con la pizarra =====
   El marco importa: el mismo campo suelto parecía un dibujo y dentro de un
   teléfono se lee como una captura del producto. */
.hero-art{position:relative;display:flex;justify-content:center;padding:6px 0 34px}
.phone{
  position:relative;width:min(100%,272px);
  background:#0b1421;border:6px solid #0b1421;border-radius:28px;
  box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.09);
}
.phone-screen{background:#101a2b;border-radius:22px;overflow:hidden}
.phone-bar{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  font:700 11.5px Manrope,sans-serif;color:#cddaea;
}
.pb-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.pitch{display:block;width:100%;height:auto}

/* Las fichas del once, con el mismo lenguaje que .player-token de la app:
   círculo morado con aro blanco. El dorsal va centrado por atributos de
   presentación y no con dominant-baseline, que Safari resuelve distinto. */
.once .ficha circle{fill:var(--purple);stroke:#fff;stroke-width:1.5}
.once .ficha text{
  fill:#fff;font:800 5.4px Manrope,sans-serif;
  text-anchor:middle;transform:translateY(1.9px)
}
.once .destacada circle{fill:var(--amber);stroke:#fff}
.once .destacada text{fill:#3a2a00}
.rival circle{fill:#141821;stroke:#ffbd35;stroke-width:1.3;opacity:.92}

/* Avisos flotantes: cuentan que esto no es solo dibujar. */
.chip{
  position:absolute;z-index:4;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.97);color:var(--navy);
  border-radius:12px;padding:9px 13px;
  box-shadow:0 14px 30px rgba(0,0,0,.34);
}
.chip b{display:block;font:800 13px Manrope,sans-serif;line-height:1.2}
.chip small{display:block;font-size:10.5px;color:var(--muted)}
.chip-dot{
  width:9px;height:9px;border-radius:50%;background:#e5484d;flex:none;
  box-shadow:0 0 0 4px rgba(229,72,77,.22)
}
.chip-live{left:0;top:14px}
.chip-stat{right:0;bottom:8px}
.chip-stat b{font-size:17px;color:var(--green-ink)}

/* ===========================================================================
   Franja de eslóganes
   ======================================================================== */
.claims{background:var(--bg);border-bottom:1px solid var(--line);padding:38px 0}
.claims-grid{display:grid;gap:26px}
.claim-ico{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:13px;
  border-radius:12px;background:rgba(106,198,71,.18);font-size:22px;line-height:1
}
.claim h3{font-size:clamp(20px,5vw,25px);font-weight:800;margin:0 0 8px;letter-spacing:-.015em}
.claim p{color:var(--muted);font-size:15px}

/* ===========================================================================
   Partido en directo
   ======================================================================== */
.live{background:var(--navy-3);color:var(--white);padding:54px 0}
.live-grid{display:grid;gap:34px}
.live h2{font-size:clamp(26px,6.6vw,38px);font-weight:800;margin:0 0 14px;letter-spacing:-.02em}
.live .section-lead{color:var(--muted-light);margin-bottom:22px}

.ticks{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
.ticks li{
  position:relative;padding-left:28px;
  color:var(--muted-light);font-size:14.5px;line-height:1.55
}
.ticks li::before{
  content:"";position:absolute;left:0;top:6px;
  width:16px;height:16px;border-radius:50%;
  background:rgba(106,198,71,.2);
  box-shadow:inset 0 0 0 1.5px var(--green)
}
.ticks li::after{
  content:"";position:absolute;left:5px;top:10.5px;
  width:5px;height:8px;border:solid var(--green);border-width:0 2px 2px 0;
  transform:rotate(42deg)
}
.ticks b{color:var(--white);font-weight:700}
.btn-on-dark{background:var(--green);color:var(--navy)}

/* Réplica de la pantalla de registro */
.live-art{display:flex;justify-content:center}
.lm{
  width:min(100%,320px);background:#111926;border-radius:18px;padding:12px;
  box-shadow:0 24px 54px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07);
  display:grid;gap:10px
}
.lm-top{
  display:flex;align-items:center;gap:10px;
  background:#151d2b;border-radius:11px;padding:9px 11px
}
.lm-clock b,.lm-count b{display:block;font:800 16px Manrope,sans-serif;color:#fff;line-height:1.1}
.lm-clock span,.lm-count span{display:block;font-size:9.5px;color:#8fa1b8}
.lm-count{margin-left:auto;text-align:right}
.lm-team{
  background:#1d4ed8;color:#fff;border-radius:7px;padding:6px 9px;
  font:800 9.5px Manrope,sans-serif;letter-spacing:.05em;flex:none
}
.lm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lm-col{display:grid;gap:8px;align-content:start}
.lm-ev{
  display:grid;place-items:center;text-align:center;
  min-height:42px;padding:6px 4px;border-radius:10px;
  font:800 11px Manrope,sans-serif;color:#fff;line-height:1.15;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)
}
.lm-ev.ok{background:#146c43}
.lm-ev.ko{background:#8a2733}
.lm-ev.gol{background:linear-gradient(160deg,#f5b301,#e07a00);color:#221500}
.lm-disc{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:2px}
.lm-d{
  display:grid;place-items:center;min-height:34px;border-radius:9px;
  background:#1a2230;box-shadow:inset 0 0 0 1.5px #3d4b60;font-size:14px;color:#dbe6f3
}
.lm-d.am{box-shadow:inset 0 0 0 1.5px #c8a415;background:#3a3208}
.lm-d.ro{box-shadow:inset 0 0 0 1.5px #b3323f;background:#3d1117}
.lm-corners{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lm-corners span{
  display:grid;place-items:center;min-height:34px;border-radius:9px;
  background:#1a2230;box-shadow:inset 0 0 0 1.5px #3d4b60;
  font:800 10px Manrope,sans-serif;color:#dbe6f3
}

/* ===========================================================================
   Estadísticas: la sección con más peso de la página
   ======================================================================== */
.stats{padding:56px 0 8px;background:
  radial-gradient(700px 320px at 50% 0,rgba(106,198,71,.10),transparent 70%),var(--white)}
.stats-panel{display:grid;gap:16px;margin-top:6px}

.zonas-card,.barras-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 22px rgba(39,19,77,.07)
}
.zonas-card{padding:18px}
.zc-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.zc-eyebrow{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  color:var(--green-ink);margin-bottom:3px
}
.zc-head b{font:800 17px Manrope,sans-serif}
.zc-tag{
  margin-left:auto;flex:none;background:var(--bg);border:1px solid var(--line);
  border-radius:20px;padding:5px 11px;font:700 11px Manrope,sans-serif;color:var(--muted)
}
/* Los nueve cuadrantes, con la misma rampa de verdes del informe. */
.zonas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.z{
  display:grid;place-items:center;gap:1px;
  aspect-ratio:1/.78;border-radius:9px;color:var(--navy)
}
.z b{font:800 20px Manrope,sans-serif;line-height:1}
.z i{font-style:normal;font-size:9px;font-weight:700;opacity:.62;letter-spacing:.04em}
.v1{background:#e9f5e3}.v2{background:#cfeac2}.v3{background:#a7d992}
.v4{background:#79c45e}.v5{background:#4faa32;color:#fff}
.v5 i{opacity:.8}
.zc-escala{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:10px;color:var(--muted)}
.zc-escala i{flex:1;height:7px;border-radius:3px}
.zc-escala .e1{background:#e9f5e3}.zc-escala .e2{background:#cfeac2}
.zc-escala .e3{background:#a7d992}.zc-escala .e4{background:#79c45e}
.zc-escala .e5{background:#4faa32}

.stats-side{display:grid;gap:16px;align-content:start}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi{
  background:var(--navy);color:var(--white);border-radius:12px;padding:15px 14px;
  box-shadow:0 6px 20px rgba(8,34,63,.22)
}
.kpi b{display:block;font:800 27px Manrope,sans-serif;line-height:1;color:var(--green)}
.kpi span{display:block;margin-top:5px;font-size:11.5px;color:var(--muted-light)}

.barras-card{padding:16px 18px 18px}
.bc-title{display:block;font:800 14px Manrope,sans-serif;margin-bottom:12px}
.barras{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.barras li{display:grid;grid-template-columns:82px 1fr 34px;align-items:center;gap:9px}
.barras span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barras i{
  display:block;height:9px;border-radius:5px;background:var(--bg);position:relative
}
.barras i::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--v);
  border-radius:5px;background:linear-gradient(90deg,var(--green),var(--green-2))
}
.barras em{font:800 11.5px Manrope,sans-serif;font-style:normal;text-align:right}

.stats-extras{
  list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px
}
.stats-extras li{border-top:2px solid var(--green);padding-top:12px}
.stats-extras b{display:block;font:800 14px Manrope,sans-serif;margin-bottom:3px}
.stats-extras span{display:block;color:var(--muted);font-size:13.5px}

/* ===========================================================================
   Características
   ======================================================================== */
.features{padding:52px 18px 8px}

.cards{display:grid;gap:14px}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
  box-shadow:0 2px 8px rgba(39,19,77,.05);
}
.card-icon{
  display:grid;place-items:center;
  width:44px;height:44px;margin-bottom:14px;
  border-radius:11px;
  background:rgba(106,198,71,.16);
  color:var(--navy);font-size:21px;line-height:1;
}
.card h3{font-size:19px;font-weight:800;margin:0 0 8px}
.card p{color:var(--muted);font-size:14.5px}

/* Tira secundaria de remate. */
.extras{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;gap:12px;
}
.extras li{border-top:2px solid var(--green);padding-top:12px}
.extras b{display:block;font:800 14px Manrope,sans-serif;margin-bottom:3px}
.extras span{display:block;color:var(--muted);font-size:13.5px}

/* ===== Llamada final ===== */
.final{
  margin-top:52px;
  background:var(--green);
  color:var(--navy);
  padding:46px 0;
}
.final-inner{text-align:center}
.final h2{font-size:clamp(23px,6vw,32px);font-weight:800;margin:0 0 10px}
.final-sub{font-size:15.5px;margin:0 0 24px;color:rgba(8,34,63,.8)}
/* Sobre verde el botón se invierte: marino sólido, que es lo que más contrasta. */
.final .btn{background:var(--navy);color:var(--white)}
.final .btn:hover{background:#0b2c52}
.final .btn:focus-visible{outline-color:var(--navy)}

/* ===== Pie ===== */
.foot{background:var(--bg);border-top:1px solid var(--line);padding:32px 0}
.foot-inner{display:grid;gap:12px;justify-items:center;text-align:center}
.foot-logo{height:34px;width:auto}
.foot p{color:var(--muted);font-size:13px}
/* Los cuatro textos legales. En móvil se parten en varias líneas y por eso el
   gap lleva dos valores: 4px entre filas para que no queden despegadas, 20px
   entre enlaces para que se puedan pulsar sin acertar el de al lado. */
.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px}
.foot-legal a{color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;padding:4px 0}
.foot-legal a:hover{color:var(--ink);text-decoration:underline}

/* ===========================================================================
   Tablet
   ======================================================================== */
@media(min-width:640px){
  .cta-row{grid-template-columns:repeat(2,auto);justify-content:start}
  .btn-lg{width:auto}
  .cards{grid-template-columns:repeat(2,1fr);gap:16px}
  .extras,.stats-extras{grid-template-columns:repeat(3,1fr);gap:20px}
  .claims-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .features{padding-top:64px}
  .nav-links{display:flex}
  .nav-logo img{height:38px}
  .hero{padding:48px 0 70px}
  .brand-mark{width:62px;height:62px}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .claims{padding:46px 0}
  .live{padding:66px 0}
  .stats{padding-top:68px}
}

/* ===========================================================================
   Escritorio: los bloques pasan a dos columnas.
   ======================================================================== */
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.08fr .92fr;align-items:center;gap:48px}
  .hero{padding:64px 0 86px}
  .hero .lead{font-size:17px}
  .phone{width:min(100%,300px)}
  .nav-logo img{height:42px}
  .brand{gap:16px;margin-bottom:26px}
  .brand-mark{width:70px;height:70px;border-radius:18px}

  .live-grid{grid-template-columns:1fr .82fr;align-items:center;gap:52px}
  .live .btn-lg{width:auto}

  /* El mapa manda y los números lo acompañan: 1,25 a 1 en vez de mitad y
     mitad, que dejaba los nueve cuadrantes demasiado pequeños para leerlos. */
  .stats-panel{grid-template-columns:1.25fr 1fr;gap:22px;align-items:start}
  .zonas-card{padding:22px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .section-title{margin-bottom:16px}
  .final{padding:60px 0}
}

@media(min-width:1024px){
  .cards{grid-template-columns:repeat(4,1fr)}
  .card{padding:24px 22px}
}

/* Respeta a quien haya pedido menos animación en el sistema. */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}