/* ==================================================================
   SPORTFIT2PRO — BRAND OVERRIDE PARA LANDING PÚBLICA
   ------------------------------------------------------------------
   Se carga SOLO en landing.html vía {% block extra_css %}.
   Todo está escopeado bajo body.landing-page para no tocar el resto
   de la app (dashboard/sidebar/tablas siguen usando custom.css con
   la paleta --sport-primary/--sport-secondary actual).

   Paleta fuente: Manual de marca Sportfit2pro — "Paleta corporativa"
     Profesionalismo          #000000
     Prosperidad y equilibrio #013E2C
     Crecimiento               #007459
     Vitalidad y bienestar     #03FE94
     Perfección                #FFFFFF

   NOTA ESTRATÉGICA: custom.css define --sport-primary:#1e3a8a y
   --sport-secondary:#059669 (azul/verde), que no coinciden con el
   manual. Ese es un problema de consistencia de marca a nivel de
   toda la plataforma (sidebar, botones, badges), fuera del alcance
   de este archivo. Ver recomendación al final de este comentario.

   Migración sugerida a futuro para alinear custom.css completo:
     --sport-primary   (#1e3a8a) -> #013E2C (--sf-deep)
     --sport-secondary (#059669) -> #007459 (--sf-forest)
     acento activo/CTA            -> #03FE94 (--sf-mint)
   ================================================================== */

:root{
  --sf-black:#000000;
  --sf-deep:#013E2C;
  --sf-forest:#007459;
  --sf-mint:#03FE94;
  --sf-white:#FFFFFF;
  --sf-mist:#F3F8F6;
  --sf-slate:#5B6D66;
  --sf-slate-2:#9DB0AA;
  --sf-line-dark:rgba(255,255,255,.14);
  --sf-line-light:rgba(1,62,44,.12);

  --sf-font-logo:'Bungee', system-ui, sans-serif;
  --sf-font-display:'Big Shoulders Display', system-ui, sans-serif;
  --sf-font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

body.landing-page{
  background:var(--sf-black);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
}

body.landing-page h1,
body.landing-page h2,
body.landing-page h3{
  font-family:var(--sf-font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
}

body.landing-page :focus-visible{ outline:2px solid var(--sf-mint); outline-offset:3px; }

/* ------------------------------------------------------------
   NAVBAR — override solo en landing (base.html sin tocar markup)
   ------------------------------------------------------------ */
body.landing-page .navbar{
  background:rgba(0,0,0,.86) !important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sf-line-dark);
  box-shadow:none;
  padding:.85rem 0;
}
body.landing-page .navbar-brand img{
  /* Stopgap si el isotipo exportado es monocromo oscuro: lo vuelve blanco
     para que se lea sobre navbar oscura. Ideal: pedir al equipo de diseño
     una variante clara (blanca/mint) del isotipo y retirar este filtro. */
  filter:brightness(0) invert(1);
}
body.landing-page .navbar-toggler-icon{ filter:brightness(0) invert(1); }
body.landing-page .nav-link{ color:rgba(255,255,255,.82) !important; font-weight:600; }
body.landing-page .nav-link:hover{ color:var(--sf-mint) !important; background:rgba(3,254,148,.08); }
body.landing-page .nav-link::after{ background:var(--sf-mint) !important; }

body.landing-page .btn-sport{
  background:var(--sf-mint) !important;
  color:var(--sf-black) !important;
  font-weight:700;
  border:2px solid var(--sf-mint) !important;
}
body.landing-page .btn-sport:hover{ background:#28ffa8 !important; border-color:#28ffa8 !important; }

body.landing-page .btn-outline-primary{
  border-color:var(--sf-line-dark) !important;
  color:#fff !important;
  background:transparent !important;
}
body.landing-page .btn-outline-primary:hover{
  border-color:var(--sf-mint) !important;
  color:var(--sf-mint) !important;
  background:rgba(3,254,148,.08) !important;
}

/* ------------------------------------------------------------
   Secciones — ritmo oscuro/claro (Profesionalismo/Perfección)
   ------------------------------------------------------------ */
body.landing-page section{ position:relative; padding:88px 0 96px; }
body.landing-page .sf-dark{ background:var(--sf-black); color:#fff; }
body.landing-page .sf-deep{ background:var(--sf-deep); color:#fff; }
body.landing-page .sf-light{ background:var(--sf-mist); color:var(--sf-deep); }
body.landing-page .sf-white{ background:var(--sf-white); color:var(--sf-deep); }

/* Corte diagonal — elemento firma que traduce el rayo del isotipo
   (potencia + avance/dinamismo) a un recurso estructural repetido. */
body.landing-page .sf-cut{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 3.2%), 0 100%);
}
body.landing-page .sf-seam{ height:0; position:relative; z-index:5; }
body.landing-page .sf-seam span{
  position:absolute; right:6%; bottom:-2px; width:min(220px,22%); height:3px;
  background:linear-gradient(90deg, transparent, var(--sf-mint) 60%, var(--sf-mint));
  transform:rotate(-6deg); transform-origin:right bottom;
  box-shadow:0 0 16px 1px rgba(3,254,148,.55);
}

body.landing-page .eyebrow{
  font-family:var(--sf-font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sf-mint);
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:14px;
}
body.landing-page .sf-light .eyebrow,
body.landing-page .sf-white .eyebrow{ color:var(--sf-forest); }
body.landing-page .eyebrow::before{ content:''; width:18px; height:2px; background:var(--sf-mint); display:inline-block; }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
body.landing-page .hero-section{
  background:
    radial-gradient(ellipse 90% 70% at 78% 8%, rgba(3,254,148,.16), transparent 60%),
    linear-gradient(180deg, #000000 0%, #010f0a 60%, #01180f 100%) !important;
  padding:96px 0 80px;
}
body.landing-page .hero-section h1{
  font-size:clamp(2.3rem, 5vw, 3.9rem);
  color:#fff;
}
body.landing-page .hero-section h1 .accent{ color:var(--sf-mint); }
body.landing-page .hero-section .lead{
  color:var(--sf-slate-2) !important;
  font-family:'Inter', sans-serif;
  font-size:1.08rem;
}
body.landing-page .hero-bolt{ position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0; }
body.landing-page .hero-section .container{ position:relative; z-index:1; }

body.landing-page .value-card{
  background:rgba(255,255,255,.06) !important;
  backdrop-filter:blur(8px);
  border:1px solid var(--sf-line-dark);
  box-shadow:none;
}
body.landing-page .value-card:hover{
  background:rgba(255,255,255,.09) !important;
  box-shadow:0 20px 40px -22px rgba(3,254,148,.25);
}
body.landing-page .value-card::before{ background:var(--sf-mint) !important; }
body.landing-page .value-icon{ background:var(--sf-black) !important; border:1px solid var(--sf-mint); }
body.landing-page .value-icon i{ color:var(--sf-mint) !important; }
body.landing-page .value-title{
  -webkit-text-fill-color:#fff; background:none; color:#fff;
  font-family:var(--sf-font-display); text-transform:uppercase; letter-spacing:.02em;
}
body.landing-page .value-description{ color:var(--sf-slate-2); }

/* ------------------------------------------------------------
   PILARES (nuevo) — diagrama de círculos del manual, pág. "Pilares"
   ------------------------------------------------------------ */
body.landing-page .sf-venn{
  --sf-venn-size:clamp(120px, 16vw, 220px);
  --sf-venn-overlap:11%;
  display:flex; align-items:center; justify-content:center; flex-wrap:nowrap;
  max-width:100%; margin:0 auto; padding:0 14px 8px;
  overflow-x:auto; overflow-y:visible;
}
body.landing-page .sf-venn-circle{
  width:var(--sf-venn-size); flex:0 0 var(--sf-venn-size);
  aspect-ratio:1/1; border:1.5px solid rgba(3,254,148,.55); border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  margin-left:calc(var(--sf-venn-size) * -1 * var(--sf-venn-overlap));
}
body.landing-page .sf-venn-circle:first-child{ margin-left:0; }
body.landing-page .sf-venn-circle span{
  font-family:var(--sf-font-mono); font-size:.82rem; letter-spacing:.03em; color:#fff; padding:0 8%;
}
@media (max-width:900px){
  body.landing-page .sf-venn{
    --sf-venn-size:clamp(110px, 24vw, 150px);
    justify-content:flex-start;
  }
}

/* ------------------------------------------------------------
   TEXT GRADIENT / TÍTULOS DE SECCIÓN
   ------------------------------------------------------------ */
body.landing-page .text-gradient{
  background:linear-gradient(135deg, var(--sf-deep) 0%, var(--sf-forest) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body.landing-page .sf-dark .text-gradient,
body.landing-page .sf-deep .text-gradient{
  background:linear-gradient(135deg, #ffffff 0%, var(--sf-mint) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ------------------------------------------------------------
   CARDS — Características / Cómo funciona
   ------------------------------------------------------------ */
body.landing-page .card{
  border-radius:2px;
  clip-path:polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);
}
body.landing-page .card::before{ background:var(--sf-mint) !important; height:3px; }
body.landing-page .card:hover{ box-shadow:0 18px 34px -20px rgba(1,62,44,.35) !important; }
body.landing-page .sport-icon{ color:var(--sf-forest); }
body.landing-page .sf-dark .card,
body.landing-page .sf-deep .card{ background:rgba(255,255,255,.04); }
body.landing-page .sf-dark .card .text-muted,
body.landing-page .sf-deep .card .text-muted{ color:var(--sf-slate-2) !important; }
body.landing-page .sf-dark .card h3,
body.landing-page .sf-deep .card h3{ color:#fff; }

body.landing-page .stat-number{
  font-family:var(--sf-font-display);
  background:none; -webkit-text-fill-color:var(--sf-mint); color:var(--sf-mint);
  text-shadow:0 0 24px rgba(3,254,148,.35);
}
body.landing-page .stat-label{ color:var(--sf-slate-2); }

/* ------------------------------------------------------------
   PARA QUIÉN — info-card
   ------------------------------------------------------------ */
body.landing-page .info-card{ background:rgba(255,255,255,.04); border:1px solid var(--sf-line-dark); }
body.landing-page .info-card .text-muted{ color:var(--sf-slate-2) !important; }
body.landing-page .info-card h3{ color:#fff; }
body.landing-page .info-icon{ background:var(--sf-mint); color:var(--sf-black); }

/* ------------------------------------------------------------
   SEGURIDAD — benefit-item
   ------------------------------------------------------------ */
body.landing-page .benefit-item{ background:var(--sf-white); border:1px solid var(--sf-line-light); }
body.landing-page .benefit-icon{ background:var(--sf-deep); }

/* ------------------------------------------------------------
   FAQ — accordion (Bootstrap, sin estilos propios en custom.css)
   ------------------------------------------------------------ */
body.landing-page .accordion-item{ border:1px solid var(--sf-line-light); border-radius:2px; margin-bottom:10px; overflow:hidden; }
body.landing-page .accordion-button{
  color:var(--sf-deep); font-weight:700; background:var(--sf-white);
}
body.landing-page .accordion-button:not(.collapsed){
  background:var(--sf-mist); color:var(--sf-deep); box-shadow:inset 0 -1px 0 var(--sf-line-light);
}
body.landing-page .accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(3,254,148,.25); }
body.landing-page .accordion-button::after{ filter:none; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
body.landing-page footer.gradient-sport{
  background:var(--sf-black) !important;
  border-top:1px solid var(--sf-line-dark);
}
body.landing-page footer .text-white-50{ color:var(--sf-slate-2) !important; }
body.landing-page footer a.text-white:hover{ color:var(--sf-mint) !important; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width:768px){
  body.landing-page section{ padding:64px 0 72px; }
}
@media (prefers-reduced-motion: reduce){
  body.landing-page *{ transition:none !important; animation:none !important; }
}