/* Sitio público de Strategio FAST! (no lo usan el portal ni el admin). */
:root{
  --ink:#0C1B16; --ink-soft:#13261F;
  --paper:#F1F4F2; --surface:#FFFFFF;
  --green:#0E6E52; --green-deep:#0A5540; --mint:#16C98D; --amber:#F2B705;
  --text:#13231D; --muted:#5B6B64; --line:#E4E1D7; --line-dark:#24382F;
  --red:#C0392B;
  --radius:16px; --maxw:1140px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Bricolage Grotesque",var(--sans);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
a{color:inherit; text-decoration:none}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px; border-radius:6px}
h1,h2,h3{font-family:var(--disp); font-weight:700; letter-spacing:-0.02em; line-height:1.08; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.wrap.narrow{max-width:820px}
.skip{position:absolute; left:-9999px; top:8px; background:var(--ink); color:#fff; padding:8px 14px; border-radius:8px; z-index:100}
.skip:focus{left:12px}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans);
  font-weight:600; font-size:16px; padding:13px 22px; border-radius:11px; line-height:1.2;
  border:1.5px solid transparent; cursor:pointer; transition:transform .12s ease, background .15s ease, border-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 6px 18px rgba(14,110,82,.26)}
.btn-primary:hover{background:var(--green-deep)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green); color:var(--green)}
.btn-onlight{background:var(--mint); color:#06241A}
.btn-onlight:hover{background:#13b47e}
.btn-outline-d{background:transparent; color:#D7E7DF; border-color:var(--line-dark)}
.btn-outline-d:hover{border-color:var(--mint); color:#fff}
.btn-lg{padding:16px 28px; font-size:17px}

/* Marca */
.brand{font-family:var(--disp); font-weight:800; font-size:23px; letter-spacing:-0.03em; color:var(--ink); display:inline-flex; align-items:center}
.brand .fast{background:var(--amber); color:#3A2D00; font-family:var(--sans); font-size:11.5px; font-weight:800; letter-spacing:.04em;
  padding:3px 7px; border-radius:6px; margin-left:8px}

/* Navegación */
.nav{position:sticky; top:0; z-index:50; background:rgba(241,244,242,.86);
  backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--line)}
.nav .row{display:flex; align-items:center; gap:28px; height:68px}
.nav .links{display:flex; gap:24px; margin-left:8px}
.nav .links a{font-size:15px; color:var(--muted); font-weight:500}
.nav .links a:hover, .nav .links a[aria-current="page"]{color:var(--ink)}
.nav .links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--amber)}
.nav .sp{flex:1}
.nav .end{display:flex; gap:14px; align-items:center}
.nav .signin{font-size:15px; font-weight:600; color:var(--ink)}
.nav .btn{padding:10px 18px; font-size:15px}

/* Hero */
.hero{background:
    radial-gradient(1100px 520px at 88% -8%, rgba(22,201,141,.16), transparent 60%),
    radial-gradient(760px 420px at 6% 110%, rgba(242,183,5,.10), transparent 55%),
    var(--ink);
  color:#EAF2EE; overflow:hidden; border-bottom:1px solid var(--line-dark)}
.hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:78px 0 86px}
.kicker{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600;
  color:#9FE6CC; background:rgba(22,201,141,.12); border:1px solid rgba(22,201,141,.28);
  padding:6px 13px; border-radius:999px; margin:0 0 22px}
.kicker b{width:7px; height:7px; border-radius:50%; background:var(--mint)}
.hero h1{font-size:clamp(38px,5.2vw,62px); color:#fff; margin-bottom:20px}
.hero h1 .u{background:linear-gradient(transparent 62%, rgba(242,183,5,.85) 62%); padding:0 2px}
.hero-lede{font-size:20px; color:#B9CEC5; max-width:34ch; margin:0 0 32px}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap}
.hero .trust{margin:26px 0 0; font-size:14px; color:#8FA89D; display:flex; gap:10px; align-items:center}
.hero .trust svg{flex:none}

.panel{background:linear-gradient(180deg,#0F241C,#0C1B16); border:1px solid var(--line-dark);
  border-radius:20px; padding:20px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.panel .ph{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.panel .ph .t{font-family:var(--disp); font-weight:700; color:#fff; font-size:16px}
.panel .ph .clock{font-size:13px; color:var(--mint); font-weight:600}
.kpi{background:rgba(22,201,141,.07); border:1px solid rgba(22,201,141,.18); border-radius:14px; padding:15px 16px; margin-bottom:14px}
.kpi .lab{font-size:12.5px; color:#8FA89D; font-weight:600}
.kpi .val{font-family:var(--disp); font-weight:800; color:#fff; font-size:30px; line-height:1.1; margin-top:4px}
.kpi .val .up, .kpi .val .down{font-size:16px; font-weight:700; margin-left:8px}
.kpi .val .up{color:var(--mint)}
.kpi .val .down{color:#FF8A7A}
.spark{display:block; width:100%; height:48px; margin-top:8px}
.spark .area{fill:url(#sg)}
.spark .ln{fill:none; stroke:var(--mint); stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round}
.chains-sync{display:flex; flex-direction:column; gap:9px}
.csrow{display:flex; align-items:center; gap:11px; font-size:14px; color:#CFE0D8; opacity:0; transform:translateY(5px); animation:pop .5s ease forwards}
.csrow:nth-child(1){animation-delay:.5s}
.csrow:nth-child(2){animation-delay:.9s}
.csrow:nth-child(3){animation-delay:1.3s}
.csrow:nth-child(4){animation-delay:1.7s}
.csrow .ck{width:20px; height:20px; border-radius:6px; background:var(--mint); color:#06241A; display:grid; place-items:center; font-size:12px; font-weight:800; flex:none}
.csrow .nm{flex:1}
.csrow .tg{font-size:12px; color:#7FA595}
@keyframes pop{to{opacity:1; transform:none}}

/* Bandas y encabezados */
.band{padding:84px 0}
.band-tight{padding:40px 0 84px}
.band-white{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.eyebrow{font-size:14px; font-weight:600; color:var(--green); margin:0 0 12px}
.h2{font-size:clamp(28px,3.6vw,42px); max-width:22ch}
.h3{font-size:22px}
.sub{color:var(--muted); font-size:18px; max-width:56ch; margin:14px 0 0}
.lede{color:var(--muted); font-size:19px; line-height:1.55; max-width:60ch; margin:16px 0 0}
.more{margin:34px 0 0; font-weight:600}
.more a{color:var(--green); border-bottom:2px solid rgba(14,110,82,.25)}
.more a:hover{border-color:var(--green)}

.pagehead{padding:64px 0 44px; border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(34px,4.6vw,54px); max-width:20ch}
.crumb{font-size:14px; color:var(--muted); margin:0 0 18px}
.crumb a{color:var(--green)}
.fineprint{font-size:13.5px; color:var(--muted); margin:14px 0 0}

/* Franja de cadenas */
.cover{background:var(--ink-soft); color:#CFE0D8; padding:34px 0}
.cover .in{display:flex; align-items:center; gap:14px 30px; flex-wrap:wrap; justify-content:center}
.cover .lab{font-family:var(--sans); font-size:14px; color:#8FA89D; font-weight:600; letter-spacing:0; width:100%; text-align:center; margin:0 0 4px}
.cover .chip{font-family:var(--disp); font-weight:600; font-size:17px; color:#E7F1EC; opacity:.86}
.cover .chip-link{color:var(--mint); opacity:1; border-bottom:1.5px solid rgba(22,201,141,.4)}

/* Hoy vs. con Strategio FAST! */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px}
.col{border-radius:var(--radius); padding:30px}
.col.before{background:#fff; border:1px solid var(--line)}
.col.after{background:var(--ink); color:#E7F1EC; border:1px solid var(--ink)}
.col h3{font-size:21px; margin-bottom:6px}
.col.after h3{color:#fff}
.col .note{font-size:14px; color:var(--muted); margin:0 0 20px}
.col.after .note{color:#8FA89D}
.col ul, .plan ul, .checklist{list-style:none; padding:0; margin:0}
.col ul{display:flex; flex-direction:column; gap:14px}
.col li{display:flex; gap:12px; font-size:15.5px; line-height:1.45}
.col li .ic{flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-weight:800; font-size:13px; margin-top:1px}
.before li .ic{background:#FBE4E2; color:var(--red)}
.after li .ic{background:rgba(22,201,141,.16); color:var(--mint)}

/* Pasos (secuencia real) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin:48px 0 0; padding:0; list-style:none}
.steps-4{grid-template-columns:repeat(4,1fr); margin-top:0}
.step{position:relative; padding-top:14px}
.step .n{display:block; font-family:var(--disp); font-weight:800; font-size:52px; color:var(--green); line-height:1}
.step h2, .step h3{font-size:20px; margin:14px 0 8px}
.step p{color:var(--muted); font-size:15.5px; margin:0}
.step::after{content:""; position:absolute; top:34px; left:52px; right:-18px; height:2px; background:linear-gradient(90deg,var(--line),transparent)}
.step:last-child::after{display:none}

/* Lo que recibes */
.feat{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; margin-top:48px}
.assistant{background:linear-gradient(155deg,var(--ink),#123528); color:#E7F1EC; border-radius:20px; padding:34px; display:flex; flex-direction:column; justify-content:space-between}
.assistant h3{color:#fff; font-size:25px; max-width:16ch}
.assistant .chatq{background:rgba(255,255,255,.06); border:1px solid var(--line-dark); border-radius:12px; padding:13px 15px; font-size:15px; color:#CFE0D8; margin:18px 0 0}
.assistant .chata{border-left:3px solid var(--mint); padding:4px 0 4px 14px; margin:16px 0 0; font-size:15.5px; color:#EAF2EE}
.assistant-foot{color:#8FA89D; font-size:14px; margin:22px 0 0}
.assistant-foot a{color:var(--mint); font-weight:600}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.fgrid-3{grid-template-columns:repeat(3,1fr); margin-top:36px}
.fcard{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px}
.band-white .fcard{background:var(--paper); border-color:transparent}
.fcard h3{font-size:17px; margin:0 0 6px}
.fcard p{color:var(--muted); font-size:14.5px; margin:0; line-height:1.5}

/* Bloques partidos y listas */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.checklist{display:flex; flex-direction:column; gap:16px}
.checklist li{padding-left:30px; position:relative; color:var(--muted); font-size:16px}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--green); font-weight:800}
.checklist strong{color:var(--ink)}

/* Cadenas */
.chains{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.chain{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.chain h2{font-size:18px}
.chain p{margin:4px 0 0; font-size:14px; color:var(--muted)}
.askbox{background:var(--paper); border-radius:var(--radius); padding:28px}
.askbox p{color:var(--muted); margin:8px 0 20px}

/* Precios */
.toggle{display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:4px; margin-top:26px}
.toggle button{font-family:var(--sans); border:none; background:transparent; font-size:14.5px; font-weight:600; color:var(--muted); padding:8px 18px; border-radius:999px; cursor:pointer}
.toggle button.on{background:var(--ink); color:#fff}
.toggle button.on .save{color:var(--amber)}
.toggle .save{color:var(--green); font-weight:700}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; align-items:start}
.plan{background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 28px; position:relative}
.plan.feat{border:1.5px solid var(--amber); box-shadow:0 22px 50px -24px rgba(242,183,5,.5); transform:translateY(-8px)}
.plan .tag{position:absolute; top:-13px; left:28px; background:var(--amber); color:#3A2D00; font-size:12.5px; font-weight:800; padding:5px 12px; border-radius:999px}
.plan .pn{font-size:22px}
.plan .pd{color:var(--muted); font-size:14.5px; margin:6px 0 20px; min-height:44px}
.plan .price{display:flex; align-items:baseline; gap:4px}
.plan .price .cur{font-size:19px; font-weight:700; color:var(--muted)}
.plan .price .amt{font-family:var(--disp); font-size:48px; font-weight:800; color:var(--ink); line-height:1}
.plan .price .amt-text{font-size:38px}
.plan .price .per{font-size:15px; color:var(--muted)}
.plan .bill{font-size:13px; color:var(--muted); margin-top:7px; min-height:18px}
.plan .pcta{margin:22px 0; display:flex; width:100%}
.plan ul{display:flex; flex-direction:column; gap:11px}
.plan li{display:flex; gap:10px; font-size:14.5px; align-items:flex-start}
.plan li .ic{color:var(--green); font-weight:800; flex:none}
.plan.feat li .ic{color:#B88A00}

.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.compare-t{width:100%; border-collapse:collapse; margin-top:32px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-width:560px}
.compare-t th, .compare-t td{padding:13px 16px; text-align:center; border-bottom:1px solid var(--line); font-size:15px}
.compare-t thead th{font-family:var(--disp); font-size:17px; background:var(--paper)}
.compare-t tbody th{text-align:left; font-weight:500; color:var(--muted)}
.compare-t tr:last-child th, .compare-t tr:last-child td{border-bottom:none}
.compare-t td:nth-child(3), .compare-t th:nth-child(3){background:rgba(242,183,5,.07)}

/* Preguntas */
.faq{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 48px; margin-top:44px}
.qa h3{font-size:18px; margin:0 0 7px}
.qa p{color:var(--muted); font-size:15px; margin:0; line-height:1.55}
.faq-item{border-bottom:1px solid var(--line); padding:6px 0}
.faq-item summary{cursor:pointer; list-style:none; padding:18px 36px 18px 0; position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; position:absolute; right:4px; top:14px; font-size:26px; color:var(--green); font-weight:500}
.faq-item[open] summary::after{content:"−"}
.faq-item summary h2{font-size:20px; display:inline}
.faq-item p{color:var(--muted); margin:0 0 20px; max-width:64ch}

/* Cierre */
.close{background:radial-gradient(700px 360px at 80% -20%, rgba(22,201,141,.18), transparent 60%), var(--ink); color:#fff; text-align:center; padding:84px 0}
.close h2{font-size:clamp(30px,4vw,48px); max-width:18ch; margin:0 auto 18px}
.close p{color:#B9CEC5; font-size:19px; max-width:52ch; margin:0 auto 30px}
.close-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* Pie */
.foot{background:var(--ink-soft); color:#8FA89D; padding:48px 0 28px; font-size:14px}
.foot-row{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; align-items:start}
.foot .brand{color:#fff; font-size:20px}
.foot p{margin:10px 0 0; max-width:40ch}
.foot nav{display:flex; flex-direction:column; gap:8px}
.foot nav a:hover, .foot-wa:hover{color:#fff}
.foot-wa{color:var(--mint); font-weight:600}
.foot .copy{margin-top:32px; padding-top:20px; border-top:1px solid var(--line-dark); max-width:none}

/* Botón flotante de WhatsApp */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:60; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,0,0,.25); transition:transform .15s ease}
.wa-float:hover{transform:scale(1.06)}

/* Piloto: panel de demostración */
.app{background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:0 30px 70px -40px rgba(12,27,22,.35)}
.app-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:2px 4px 18px; border-bottom:1px solid var(--line); margin-bottom:20px}
.app-title{font-family:var(--disp); font-weight:800; font-size:20px; color:var(--ink)}
.app-status{font-size:13.5px; color:var(--green); font-weight:600}
.morning{background:var(--ink); color:#EAF2EE; border-radius:16px; padding:20px 24px; margin-bottom:18px; border-left:5px solid var(--amber)}
.morning h2{font-size:17px; color:#fff; margin-bottom:10px}
.morning ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.morning li{font-size:15px; color:#CFE0D8}
.d-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.d-kpi{border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.d-kpi.primary{background:linear-gradient(150deg,var(--green-deep),var(--green)); border-color:transparent; color:#fff}
.d-kpi .lab{font-size:13px; font-weight:600; color:var(--muted)}
.d-kpi .val{font-family:var(--disp); font-size:28px; font-weight:800; color:var(--ink); margin:6px 0 2px; line-height:1.1}
.d-kpi .sub{font-size:13px; color:var(--muted)}
.d-kpi.primary .lab, .d-kpi.primary .sub{color:#BFE8D6}
.d-kpi.primary .val{color:#fff}
.d-card{border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:18px; min-width:0}
.d-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.d-head h2{font-size:17px}
.d-head .hint{font-size:12.5px; color:var(--muted)}
.d-foot{font-size:13px; color:var(--muted); margin:12px 0 0}
.d-two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.d-two .d-card{margin-bottom:18px}
.legend{display:flex; gap:6px; flex-wrap:wrap}
.lg{font-family:var(--sans); font-size:13px; font-weight:600; color:var(--muted); background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:5px 11px; display:inline-flex; align-items:center; gap:7px; cursor:pointer}
.lg i{width:10px; height:10px; border-radius:3px; display:inline-block}
.lg.on{color:var(--ink); background:#fff}
.lg:not(.on){opacity:.55; text-decoration:line-through}
.chart{display:block; width:100%; height:240px}
.chart polyline{vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round}
.chart .gridl{stroke:#EEF0EC; stroke-width:1; vector-effect:non-scaling-stroke}
.chart .off{display:none}
.xlab{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); padding:4px 4px 0}
.d-table{width:100%; border-collapse:collapse; font-size:14px}
.d-table th{text-align:left; font-size:12px; color:var(--muted); font-weight:600; padding:0 10px 8px 0; border-bottom:1px solid var(--line)}
.d-table td{padding:10px 10px 10px 0; border-bottom:1px solid #F0F1EE; vertical-align:top}
.d-table tr:last-child td{border-bottom:none}
.d-table .muted{display:block; font-size:12px; color:var(--muted)}
.pill{display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap}
.pill.crit{background:#FBE4E2; color:var(--red)}
.pill.warn{background:#FFF4CC; color:#8A6400}
.up{color:var(--green); font-weight:700}
.down{color:var(--red); font-weight:700}
.bars{display:flex; flex-direction:column; gap:12px}
.bar-row{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center}
.bar-row .bname{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-row .bval{font-size:14px; font-weight:700; text-align:right; white-space:nowrap}
.bar-row .bval span{font-size:12.5px; margin-left:6px}
.bar-row .btrack{grid-column:1 / -1; height:7px; border-radius:99px; background:#EEF1EE; overflow:hidden}
.bar-row .bfill{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--mint))}
.d-assistant{background:var(--paper); border-color:transparent; margin-bottom:0}
.ask-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.ask{font-family:var(--sans); font-size:14px; font-weight:500; text-align:left; background:#fff; border:1px solid var(--line);
  color:var(--ink); border-radius:12px; padding:9px 14px; cursor:pointer}
.ask:hover{border-color:var(--green)}
.ask.on{background:var(--ink); border-color:var(--ink); color:#fff}
.answer{background:#fff; border-radius:14px; padding:18px 20px}
.answer .aq{margin:0 0 10px; font-size:14px; color:var(--muted)}
.answer .aa{margin:0; padding-left:14px; border-left:3px solid var(--mint); font-size:16px; color:var(--ink)}

@media (max-width:980px){
  .nav .links{display:none}
  .d-kpis{grid-template-columns:repeat(2,1fr)}
  .steps-4{grid-template-columns:repeat(2,1fr)}
  .steps-4 .step::after{display:none}
}
@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr; gap:40px; padding:54px 0 60px}
  .hero-lede{max-width:none}
  .compare,.steps,.feat,.fgrid,.fgrid-3,.plans,.faq,.split,.d-two,.foot-row{grid-template-columns:1fr}
  .plan.feat{transform:none}
  .step::after{display:none}
  .band{padding:64px 0}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .nav .signin{display:none}
  .d-kpis,.steps-4{grid-template-columns:1fr}
  .app{padding:14px}
  .chart{height:180px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .csrow{opacity:1; transform:none; animation:none}
  .btn:hover, .wa-float:hover{transform:none}
}