/* ============================================================
   STRATEGO — Landing pública · CSS puro para WordPress
   Todo va scopeado bajo .stratego-lp para no colisionar
   con los estilos del tema. Sin JavaScript.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800&family=Archivo:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap');

.stratego-lp{
  /* Tokens de marca (Stratego · marca v2) */
  --navy-950:#0C1828; --navy-900:#122537; --navy-800:#182E45; --navy-700:#1F3855; --navy-600:#2B4A6A;
  --teal-600:#0E4C64; --teal-400:#2E7796;
  --stone-400:#A9ABA7; --stone-300:#C5C7C4; --stone-200:#D8DAD7; --stone-100:#E9EAE8;
  --ink-800:#283A44; --ink-700:#3A4854; --ink-600:#54616D; --ink-200:#D4D9DE;
  --white:#FFFFFF;
  --line-dark:rgba(197,199,196,.18);
  --font-display:'Saira Condensed','Archivo',Arial,sans-serif;
  --font-sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-serif:'Newsreader',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  background:var(--stone-100); color:var(--ink-800);
  font-family:var(--font-sans); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}

.stratego-lp *,
.stratego-lp *::before,
.stratego-lp *::after{box-sizing:border-box;}
.stratego-lp h1,
.stratego-lp h2,
.stratego-lp h3{margin:0; padding:0; font-weight:700; letter-spacing:-.015em; font-family:var(--font-display); text-transform:none;}
.stratego-lp p{margin:0;}
.stratego-lp ul{margin:0; padding:0; list-style:none;}
.stratego-lp li{margin:0;}
.stratego-lp img{display:block; max-width:100%; height:auto;}
.stratego-lp a{color:var(--navy-700); text-decoration:none; box-shadow:none;}
.stratego-lp a:hover,
.stratego-lp a:focus{color:var(--navy-900); text-decoration:none;}
.stratego-lp section{padding:0; margin:0;}

.stratego-lp .wrap{max-width:1240px; margin:0 auto; padding:clamp(64px,12vh,152px) clamp(20px,6vw,88px);}
.stratego-lp .dark{background:var(--navy-900); color:var(--stone-100);}
.stratego-lp .light{background:var(--white);}
.stratego-lp .rule-top{border-top:1px solid var(--ink-200);}
.stratego-lp .eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:var(--teal-600);}
.stratego-lp .dark .eyebrow{color:var(--stone-300);}
.stratego-lp .sec-head{display:flex; flex-direction:column; gap:14px;}
.stratego-lp .sec-head h2{font-size:clamp(26px,4.4vw,40px); line-height:1.08; color:var(--navy-900);}
.stratego-lp .dark .sec-head h2{color:var(--stone-100);}
.stratego-lp .gold-rule{width:44px; height:2px; margin:0; background:var(--teal-600); border:0;}
.stratego-lp .dark .gold-rule{background:var(--stone-300);}
.stratego-lp .head--narrow{max-width:30ch;}
.stratego-lp .head--pad{padding-bottom:clamp(40px,7vh,80px);}
.stratego-lp .head--fit{max-width:26ch; padding-bottom:clamp(40px,7vh,84px);}

/* Botón */
.stratego-lp .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 28px; border:1px solid transparent; border-radius:8px;
  font-family:var(--font-display); font-weight:600; font-size:1.125rem; line-height:1;
  letter-spacing:-.01em; background:var(--stone-300); color:var(--navy-950);
  transition:background .15s cubic-bezier(.2,0,0,1), transform .15s cubic-bezier(.2,0,0,1);
}
.stratego-lp .btn:hover,
.stratego-lp .btn:focus{background:var(--stone-200); color:var(--navy-950);}
.stratego-lp .btn:active{background:var(--stone-400); transform:translateY(1px);}
.stratego-lp .btn:focus-visible{outline:2px solid var(--stone-300); outline-offset:3px;}

/* 01 Hero */
.stratego-lp .hero{position:relative; background:var(--navy-900); color:var(--stone-100);}
.stratego-lp .hero-inner{
  max-width:1240px; margin:0 auto;
  padding:clamp(22px,4vw,34px) clamp(20px,6vw,88px) clamp(72px,12vh,132px);
  min-height:min(94vh,900px); display:flex; flex-direction:column;
}
.stratego-lp .hero-inner > header{padding-bottom:clamp(56px,14vh,140px);}
.stratego-lp .hero-inner > header img{height:clamp(20px,3.4vw,27px); width:auto;}
.stratego-lp .hero-body{flex:1; display:flex; flex-direction:column; justify-content:center; gap:clamp(34px,5vh,54px);}
.stratego-lp .hero-body h1{
  font-size:clamp(40px,9.2vw,88px); line-height:1.02; letter-spacing:-.025em;
  font-weight:800; max-width:19ch; color:var(--stone-100); text-wrap:balance;
}
.stratego-lp .values{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px,2.4vw,22px);
  font-family:var(--font-mono); font-size:clamp(11px,2vw,14px);
  letter-spacing:.22em; text-transform:uppercase; color:var(--stone-300);
}
.stratego-lp .values .dash{width:clamp(16px,4vw,44px); height:1px; background:rgba(197,199,196,.5);}
.stratego-lp .hero-cta{display:flex; padding-top:clamp(6px,2vh,18px);}
.stratego-lp .lattice{
  position:absolute; inset:auto 0 0 0; height:clamp(48px,9vh,96px); pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(197,199,196,.13) 0 1px, transparent 1px clamp(28px,7vw,72px)),
    repeating-linear-gradient(0deg, rgba(197,199,196,.13) 0 1px, transparent 1px clamp(28px,7vw,72px));
}

/* 02 Qué es Stratego */
.stratego-lp .split{display:grid; gap:clamp(28px,5vw,72px); grid-template-columns:1fr;}
.stratego-lp .prose{
  display:flex; flex-direction:column; gap:clamp(20px,3vh,30px); max-width:62ch;
  font-family:var(--font-serif); font-size:clamp(17px,2.2vw,21px); line-height:1.62; color:var(--ink-700);
}
.stratego-lp .prose .lead{font-size:clamp(20px,3vw,28px); line-height:1.4; color:var(--navy-900);}
.stratego-lp .prose .kicker{padding-top:clamp(6px,1.5vh,14px); border-top:1px solid var(--ink-200); color:var(--navy-900);}

/* 03 Club · Criterio · Claridad */
.stratego-lp .threes{display:grid; gap:clamp(32px,4vw,56px); grid-template-columns:1fr;}
.stratego-lp .pillar{display:flex; flex-direction:column; gap:clamp(16px,2.4vw,22px); padding-top:22px; border-top:1px solid var(--navy-900);}
.stratego-lp .pillar h3{font-size:clamp(21px,3vw,27px); color:var(--navy-900);}
.stratego-lp .pillar p{font-size:clamp(15px,2vw,16.5px); line-height:1.6; color:var(--ink-700); max-width:34ch;}
.stratego-lp .mark{width:22px; height:22px; flex:none;}
.stratego-lp .mark--club{display:grid; grid-template-columns:1fr 1fr; gap:2px;}
.stratego-lp .mark--club i:nth-child(1),
.stratego-lp .mark--club i:nth-child(4){background:var(--navy-900);}
.stratego-lp .mark--club i:nth-child(2),
.stratego-lp .mark--club i:nth-child(3){border:1px solid var(--teal-600);}
.stratego-lp .mark--criterio{border:1px solid var(--teal-600); display:flex; align-items:center; justify-content:center;}
.stratego-lp .mark--criterio i{width:8px; height:8px; background:var(--navy-900);}
.stratego-lp .mark--claridad{border:1px solid var(--teal-600); display:flex; flex-direction:column; justify-content:flex-end;}
.stratego-lp .mark--claridad i{height:10px; background:var(--navy-900);}

/* 04 Un ecosistema, no un fondo */
.stratego-lp .eco-intro{
  font-family:var(--font-serif); font-size:clamp(17px,2.2vw,20px); line-height:1.6;
  color:rgba(197,199,196,.78); max-width:58ch; padding:clamp(22px,4vh,34px) 0 clamp(40px,7vh,76px);
}
.stratego-lp .layer{
  display:grid; gap:clamp(8px,2vw,40px); grid-template-columns:1fr; align-items:baseline;
  padding:clamp(22px,3.5vh,34px) 0; border-top:1px solid var(--line-dark);
}
.stratego-lp .layer:last-of-type{border-bottom:1px solid var(--line-dark);}
.stratego-lp .layer-name{display:flex; align-items:baseline; gap:14px;}
.stratego-lp .layer-name span{font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; color:var(--stone-300);}
.stratego-lp .layer h3{font-size:clamp(20px,2.8vw,26px); color:var(--stone-100);}
.stratego-lp .layer p{font-size:clamp(15px,2vw,16.5px); line-height:1.6; color:rgba(197,199,196,.78); max-width:36ch;}
.stratego-lp .bar{position:relative; height:6px; width:100%; background:rgba(197,199,196,.08); align-self:center;}
.stratego-lp .bar i{position:absolute; top:0; bottom:0; left:0;}
.stratego-lp .bar--1 i{width:100%; background:rgba(197,199,196,.55);}
.stratego-lp .bar--2 i{width:62%; background:var(--teal-400);}
.stratego-lp .bar--3 i{width:30%; background:rgba(197,199,196,.5);}
.stratego-lp .eco-close{
  font-family:var(--font-serif); font-style:italic; font-size:clamp(17px,2.4vw,22px); line-height:1.55;
  color:rgba(197,199,196,.86); max-width:52ch; padding-top:clamp(40px,7vh,76px);
}

/* 05 Para quién es — y para quién no */
.stratego-lp .fit{display:grid; gap:clamp(40px,5vw,0px); grid-template-columns:1fr;}
.stratego-lp .fit-col{display:flex; flex-direction:column; gap:clamp(18px,3vh,26px);}
.stratego-lp .fit-col h3{font-size:clamp(20px,2.8vw,25px);}
.stratego-lp .fit-col li{
  font-family:var(--font-serif); font-size:clamp(16px,2.1vw,19px); line-height:1.5;
  padding:clamp(13px,2vh,18px) 0; border-top:1px solid var(--ink-200);
}
.stratego-lp .fit-col li:last-child{border-bottom:1px solid var(--ink-200);}
.stratego-lp .fit--yes h3,
.stratego-lp .fit--yes li{color:var(--navy-900);}
.stratego-lp .fit--no h3{font-weight:600; color:var(--ink-600);}
.stratego-lp .fit--no li{color:var(--ink-600);}
.stratego-lp .fit-close{
  font-family:var(--font-display); font-weight:600; font-size:clamp(22px,3.6vw,34px);
  line-height:1.2; letter-spacing:-.015em; color:var(--navy-900); max-width:26ch;
  padding-top:clamp(48px,9vh,110px);
}

/* 06 CTA final */
.stratego-lp .cta .wrap{
  padding-top:clamp(80px,16vh,190px); padding-bottom:clamp(80px,16vh,190px);
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(32px,5vh,52px);
}
.stratego-lp .cta h2{font-size:clamp(30px,6vw,60px); line-height:1.06; letter-spacing:-.022em; font-weight:800; max-width:24ch; color:var(--stone-100);}

/* Footer */
.stratego-lp .lp-footer{background:var(--navy-900); border-top:1px solid var(--line-dark); color:rgba(197,199,196,.6);}
.stratego-lp .lp-footer .wrap{
  padding-top:clamp(32px,5vh,48px); padding-bottom:clamp(32px,5vh,48px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.stratego-lp .lp-footer img{height:18px; width:auto; opacity:.8;}
.stratego-lp .lp-footer nav{
  display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,32px);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.stratego-lp .lp-footer nav a{color:rgba(197,199,196,.6);}
.stratego-lp .lp-footer nav a:hover{color:var(--stone-300);}

@media (min-width:640px){
  .stratego-lp .threes{grid-template-columns:repeat(3,1fr);}
  .stratego-lp .fit{grid-template-columns:1fr 1fr;}
  .stratego-lp .fit--yes{padding-right:clamp(0px,4vw,56px);}
  .stratego-lp .fit--no{padding-left:clamp(0px,4vw,56px); border-left:1px solid var(--ink-200);}
}
@media (min-width:900px){
  .stratego-lp .split{grid-template-columns:1fr 2fr;}
  .stratego-lp .layer{grid-template-columns:1.1fr 1.2fr .9fr;}
}
@media (prefers-reduced-motion:reduce){
  .stratego-lp *{transition:none !important;}
}