/* Un solo aspecto (claro) a propósito: es una landing de marca. Layout: papel claro, serif grande con una palabra en cursiva, etiquetas en monoespaciada y cifras como prueba.
   Referencia: Halyard (halyard.site) y Frontend Supply (frontend.supply), adaptado a la marca (azul marino y dorado). */
:root{
  --paper:#FFFFFF; --paper-2:#EFE8FB; --card:#FFFFFF;
  --ink:#0A1D43; --ink-2:#44507A; --rule:#D9DDF0;
  --accent:#FFA500; --gold:#FFA500; --bar:#063563; --bar-soft:#9FB3E0;
  --btn:#37C660; --btn-ink:#FFFFFF; --btn-hover:#2FB255; --focus:#063563;
  --display:'Poppins',Arial,sans-serif; --text:'Poppins',Arial,sans-serif; --mono:'Poppins',Arial,sans-serif;
  --r:12px; --max:1480px; color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.65 var(--text);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 16px}
b{font-weight:600}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.mono{font:500 .78rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.012em;line-height:1.02;margin:0;text-wrap:balance;color:var(--ink)}
h1 em,h2 em{font-style:italic;color:var(--accent)}
h2{font-size:clamp(2.4rem,5.2vw,4rem);margin-bottom:28px;max-width:15em}
h2.wide{max-width:none}
h3{font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.1}
.sub{font-size:1.15rem;color:var(--ink-2);max-width:36em;margin-bottom:8px}
.sub b{color:var(--ink)}
.muted-ink{color:var(--ink-2)}

/* superficies: todo claro; las bandas se separan con una línea fina */
.sec{padding:clamp(64px,8.5vw,108px) 0;position:relative;border-top:1px solid var(--rule)}
.tone-navy,.tone-white{background:var(--paper)}
.tone-bone{background:var(--paper-2)}
.hero{border-top:0}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;border-radius:var(--r);font:600 1rem/1 var(--text);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-gold,.btn-ink{background:var(--btn);color:var(--btn-ink)}
.btn-gold:hover,.btn-ink:hover{background:var(--btn-hover)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-sm{min-height:42px;padding:10px 18px;font-size:.92rem}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* cabecera */
.top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
.hbar{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:600 1.02rem/1 var(--text)}
.brand img{border-radius:6px;background:#141836}

/* hero */
.hero{padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(56px,7vw,96px)}
.eyebrow{font:500 .78rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 clamp(18px,3vw,28px)}
.hero h1{font-size:clamp(3.2rem,9vw,7.6rem);line-height:.96;margin-bottom:clamp(32px,4.5vw,56px);max-width:none}
.hero-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:end}
.lead{font-size:clamp(1.12rem,1.6vw,1.28rem);color:var(--ink-2);max-width:31em;margin-bottom:30px}
.lead b{color:var(--ink)}
.hero-card{display:grid;gap:10px;background:var(--card);border:1px solid var(--ink);border-radius:var(--r);padding:clamp(20px,3vw,30px);text-decoration:none;color:var(--ink);transition:transform .15s}
.hero-card:hover{transform:translateY(-2px)}
.hc-goal{font-size:1rem;color:var(--ink-2)}
.hc-big{font:400 clamp(3rem,6vw,4.6rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hc-big small{font:400 1rem/1.3 var(--text);letter-spacing:0;color:var(--ink-2);margin-left:6px}
.hc-note{font-size:.98rem;line-height:1.5;color:var(--ink-2);border-left:2px solid var(--ink);padding-left:14px}
.hc-link{font:500 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* ¿te suena? */
.says{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,72px)}
.says li{font:400 clamp(1.5rem,2.5vw,2.05rem)/1.14 var(--display);color:var(--ink);padding:20px 0 28px;border-top:1px solid var(--ink);text-wrap:balance}
.says .mono{display:block;margin-bottom:10px}
.closer{font:italic 400 clamp(1.4rem,2.2vw,1.8rem)/1.3 var(--display);color:var(--ink-2);margin:clamp(28px,4vw,44px) 0 0;max-width:28em}

/* la pregunta */
.question{padding-top:clamp(80px,11vw,140px);padding-bottom:clamp(80px,11vw,136px)}
.week{display:flex;gap:6px;margin-bottom:clamp(28px,4vw,48px)}
.week span{width:clamp(34px,5vw,48px);height:clamp(34px,5vw,48px);border:1px solid var(--ink);border-radius:var(--r);display:grid;place-items:center;font:500 .85rem/1 var(--mono);color:var(--ink);transition:background .5s,color .5s,border-color .5s}
.week.in span{background:var(--paper-2);color:var(--ink-2);border-color:var(--rule)}
.week.in span:nth-child(2){transition-delay:.15s}.week.in span:nth-child(3){transition-delay:.3s}.week.in span:nth-child(4){transition-delay:.45s}.week.in span:nth-child(5){transition-delay:.6s}.week.in span:nth-child(6){transition-delay:.75s}.week.in span:nth-child(7){transition-delay:.9s}
.question h2{font-size:clamp(2.8rem,7vw,5.6rem);line-height:1;max-width:12em;margin-bottom:clamp(24px,4vw,40px)}
.big-p{font-size:clamp(1.15rem,1.9vw,1.4rem);color:var(--ink-2);max-width:31em}

/* ¿es para ti? */
.fit-sec{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)}
.fit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:8px}
.fit>div{padding:28px 30px 30px;border-radius:var(--r)}
.fit h3{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:12px}
.fit p{margin:0;font-size:1.05rem;max-width:27em}
.fit-yes{background:var(--card);border:1px solid var(--ink)}
.fit-no{border:1px dashed var(--ink-2)}

/* plan */
.steps{list-style:none;margin:clamp(32px,5vw,52px) 0 0;padding:0}
.steps li{display:grid;grid-template-columns:clamp(64px,10vw,120px) minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:center;padding:20px 0;border-top:1px solid var(--rule)}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.n{font:400 clamp(3.4rem,8vw,6rem)/.85 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.steps p{margin:0;font-size:clamp(1.08rem,1.6vw,1.25rem);max-width:36em}
.example{margin-top:clamp(44px,6vw,76px);background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(24px,4vw,42px)}
.example-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.example h3{font-size:clamp(1.7rem,3vw,2.3rem)}
.tag{font:500 .74rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.bars{margin:26px 0 10px;display:grid;gap:16px}
.rbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:20px;align-items:center}
.rbar .lab{font-size:.98rem;color:var(--ink-2);line-height:1.35}
.track{display:block;height:24px;background:var(--rule);border-radius:var(--r)}
.rbar .fill{display:block;height:100%;width:var(--w);background:var(--bar-soft);border-radius:var(--r);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.rbar.best .fill{background:var(--gold)}
.rbar.best .lab{color:var(--ink);font-weight:600}
.rbar .val{font:400 1.6rem/1.1 var(--display);white-space:nowrap;font-variant-numeric:tabular-nums}
.rbar .val small{font:400 .9rem var(--text);color:var(--ink-2)}
.js .bars:not(.in) .fill{width:0}
.verdict{margin:22px 0 0;font-size:1.15rem;max-width:34em}

/* selector de informe de ejemplo */
.tabs{display:none;gap:10px;flex-wrap:wrap;margin-top:clamp(20px,3vw,32px)}
.tab{font:500 .78rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:var(--r);padding:13px 18px;min-height:44px;cursor:pointer;transition:background .15s,color .15s}
.tab:hover{background:var(--paper-2)}
.tab.on{background:var(--ink);color:var(--paper)}
.tabs + .doc{margin-top:16px}
.doc[hidden]{display:none}

/* informe de ejemplo */
.doc{margin-top:clamp(28px,4vw,44px);background:var(--card);border:1px solid var(--ink);border-radius:var(--r);overflow:hidden}
.doc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;border-bottom:1px solid var(--ink);padding:20px clamp(18px,3vw,32px)}
.doc-head h3{font-size:clamp(1.5rem,2.6vw,2rem);max-width:20em}
.doc-head p{margin:6px 0 0;color:var(--ink-2)}
.doc-part{padding:clamp(20px,3vw,30px) clamp(18px,3vw,32px);border-top:1px solid var(--rule)}
.doc-part:first-of-type{border-top:0}
.doc-part h4{font:400 clamp(1.4rem,2.2vw,1.75rem)/1.1 var(--display);color:var(--ink);margin:0 0 10px}
.doc-part p{margin:0 0 12px;max-width:40em}
.doc-part p:last-child{margin-bottom:0}
.gap{display:flex;height:44px;margin:14px 0 18px;max-width:640px;border-radius:var(--r);overflow:hidden;font:500 .92rem/44px var(--mono);font-variant-numeric:tabular-nums}
.gap .have{flex:0 0 var(--w);background:var(--bar);color:var(--paper);padding-left:14px;white-space:nowrap}
.gap .miss{flex:1 1 0;min-width:0;background:var(--gold);color:#0E1129;padding:0 12px;white-space:nowrap;overflow:hidden}
.hero-card .gap{margin:4px 0 2px}
.hc-legend{font:500 .74rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.point{border-left:2px solid var(--ink);padding-left:16px}
.step dl{margin:6px 0 0;display:grid;gap:0}
.step dl>div{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:6px 24px;padding:14px 0;border-top:1px solid var(--rule)}
.step dl>div:first-child{border-top:0;padding-top:4px}
.step dt{font:500 .78rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.step dd{margin:0;color:var(--ink-2)}
.step blockquote{margin:0 0 12px;padding:14px 16px;background:var(--paper-2);border-left:2px solid var(--ink);color:var(--ink);font-style:italic}
.copy{font:500 .78rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:var(--r);padding:12px 18px;min-height:44px;cursor:pointer;transition:background .15s,color .15s}
.copy:hover,.copy.ok{background:var(--ink);color:var(--paper)}

/* comparación */
.cmp{width:100%;border-collapse:collapse;margin-top:clamp(24px,4vw,40px)}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--rule)}
.cmp thead th{font:400 clamp(1.3rem,2vw,1.6rem)/1.1 var(--display);color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:12px}
.cmp thead th:nth-child(2){background:var(--ink);color:var(--paper)}
.cmp tbody th{font:500 .8rem/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);width:19%}
.cmp td{width:27%;color:var(--ink-2);font-size:.98rem;line-height:1.5}
.cmp td:nth-child(2){background:var(--paper-2);color:var(--ink);font-weight:500}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* por dentro */
.dentro .sub{color:var(--ink-2)}
.brains{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.brain{border-top:1px solid var(--ink);padding-top:18px}
.brain h3{font-size:clamp(1.4rem,2vw,1.7rem);margin-bottom:10px}
.brain p{margin:0;font-size:.98rem;color:var(--ink-2);line-height:1.55}
.brain.ai{grid-column:1/-1;background:var(--card);border:1px solid var(--ink);border-radius:var(--r);padding:22px clamp(18px,3vw,30px)}
.brain.ai p{max-width:48em}
.mentor-note{margin-top:clamp(20px,3vw,32px);padding:22px clamp(18px,3vw,30px);border:1px dashed var(--ink-2);border-radius:var(--r)}
.mentor-note h3{margin-bottom:8px}
.mentor-note p{margin:0;max-width:46em;color:var(--ink-2)}
.flow-title{margin:clamp(44px,6vw,72px) 0 18px;font-size:clamp(1.8rem,3vw,2.4rem)}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.flow li{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:20px 22px 22px}
.flow li:not(:last-child)::after{content:"";position:absolute;right:-26px;top:50%;width:16px;height:16px;margin-top:-8px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg)}
.flow b{display:block;font:400 1.5rem/1.15 var(--display);color:var(--ink);margin-bottom:8px}
.flow span{display:block;color:var(--ink-2);font-size:.98rem;line-height:1.5}
.flow-note{margin:22px 0 0;max-width:46em;color:var(--ink-2)}

/* cómo se usa */
.usage{margin-top:clamp(24px,4vw,40px);background:var(--card);border:1px solid var(--ink);border-radius:var(--r);padding:clamp(20px,3.4vw,36px)}
.usage header{display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;margin-bottom:24px}
.usage header h3{font-size:clamp(1.6rem,2.6vw,2.1rem);max-width:20em}
.usage-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.usage h4{font:500 .8rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;color:var(--ink)}
.days{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;max-width:460px}
.days i{display:block;aspect-ratio:1;border-radius:2px;background:var(--rule)}
.days i.on,.legend i.on{background:var(--bar)}
.legend{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:.92rem;color:var(--ink-2)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:2px;background:var(--rule)}
.legend i+ i{margin-left:10px}
.modes{display:grid;gap:12px}
.modes div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 22px;gap:12px;align-items:center;font-size:.98rem}
.modes span{color:var(--ink)}
.modes i{display:block;height:18px;width:var(--w);background:var(--bar);border-radius:2px}
.modes b{font:500 1rem/1 var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.usage-note{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--rule);max-width:44em;color:var(--ink-2)}

/* dos columnas */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.two h2{margin-bottom:20px}
.pull{font:400 clamp(1.7rem,2.8vw,2.3rem)/1.12 var(--display);color:var(--ink);max-width:14em;margin:0}
.col-text p{font-size:1.1rem;max-width:34em}

/* ciclo semanal */
.loop{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.loop li{border-top:1px solid var(--ink);padding-top:18px}
.loop .n{display:block;font-size:clamp(3rem,6vw,4.4rem);margin-bottom:12px}
.loop p{margin:0;font-size:1.05rem;color:var(--ink-2)}
.loop b{color:var(--ink)}
.loop-back{height:22px;margin-top:34px;border:1px solid var(--ink-2);border-top:0;border-radius:0 0 var(--r) var(--r)}
.loop-note{margin:12px 0 36px;font:500 .78rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.lead2{font-size:1.15rem;color:var(--ink-2);max-width:36em}
.lead2 b{color:var(--ink)}
.mentor{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end;margin-top:clamp(48px,7vw,88px)}
.mentor img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 30%;border-radius:var(--r)}
.mentor-role{margin:0 0 6px;font:500 .78rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.mentor h3{font-size:clamp(2.8rem,6vw,4.6rem);line-height:.95;margin-bottom:14px}
.mentor div p:last-child{margin:0;font-size:1.1rem;color:var(--ink-2);max-width:22em}

/* hace / no hace */
.does{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px)}
.does>div{border-radius:var(--r);padding:30px 32px 32px}
.does h3{font-size:clamp(2rem,3.4vw,2.7rem);margin-bottom:12px}
.does p{margin:0;font-size:1.08rem;max-width:24em}
.does .yes{background:var(--card);border:1px solid var(--ink)}
.does .no{border:1px dashed var(--ink-2)}
.needs{margin:28px 0 0;font-size:1.08rem;color:var(--ink-2);max-width:40em}

/* conversación */
.chat{display:grid;gap:14px}
.m{max-width:90%;padding:16px 22px 18px;border-radius:var(--r);font-size:1.02rem;line-height:1.55}
.m small{display:block;font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;opacity:.8}
.m.sys{background:var(--paper-2);color:var(--ink);border:1px solid var(--rule)}
.m.usr{background:var(--ink);color:var(--paper);margin-left:auto}

/* relatos */
.stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,72px);margin-top:28px}
.stories article{padding:20px 0 26px;border-top:1px solid var(--rule);font-size:1.02rem;color:var(--ink-2)}
.stories article b{display:block;font:400 clamp(1.5rem,2.3vw,1.9rem)/1.1 var(--display);color:var(--ink);margin-bottom:8px}
.note-ink{margin:32px 0 0;font:italic 400 1.4rem/1.35 var(--display);color:var(--ink-2);max-width:30em}

/* preguntas y respuestas */
details{border-top:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;font:400 clamp(1.4rem,2.2vw,1.8rem)/1.2 var(--display)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 1.6rem/1 var(--mono);flex:none;color:var(--accent)}
details[open] summary::after{content:"–"}
details p{max-width:40em;padding-bottom:14px;font-size:1.02rem;color:var(--ink-2)}
.qa details:last-child{border-bottom:1px solid var(--rule)}
.think h2{margin-bottom:0}

/* precio y garantía */
.offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,32px);margin-top:clamp(24px,4vw,40px)}
.offer-card{border-radius:var(--r);padding:clamp(22px,3.5vw,38px);min-width:0;background:var(--card)}
.offer-card h3{font:500 .8rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
.offer-card .amount{font:400 clamp(2.4rem,4.4vw,3.6rem)/1.04 var(--display);margin:0 0 14px;text-wrap:balance;color:var(--ink)}
.offer-card .amount small{font:400 1rem/1.2 var(--text);letter-spacing:0;color:var(--ink-2)}
.offer-card p{margin:0 0 10px;color:var(--ink-2)}
.offer-card p:last-child{margin-bottom:0}
.offer-card.price{border:1px solid var(--ink)}
.offer-card.guarantee{border:1px dashed var(--ink-2)}

/* cierre */
.close-h{font-size:clamp(3.2rem,8.4vw,6.8rem);line-height:.96;max-width:none;margin-bottom:22px}
.close-p{font-size:clamp(1.15rem,1.9vw,1.4rem);color:var(--ink-2);margin-bottom:30px;max-width:26em}
.terms{margin:34px 0 0;max-width:40em;font-size:.95rem;color:var(--ink-2)}
.faq{margin-top:clamp(52px,7vw,88px);max-width:760px}
.faq h3{font-size:clamp(2rem,3.2vw,2.6rem);margin-bottom:16px}
.faq summary{font-size:1.4rem;padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}

footer{background:var(--paper-2);border-top:1px solid var(--rule);color:var(--ink-2);padding:34px 0;font-size:.92rem}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a{color:var(--ink-2)}

/* flotante y cookies */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:45;display:none;box-shadow:0 10px 30px rgba(14,17,41,.25)}
#ck{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--card);color:var(--ink);border:1px solid var(--ink);border-radius:var(--r);padding:16px 18px;display:none;gap:14px;align-items:center;flex-wrap:wrap;max-width:720px;margin:0 auto;font:.92rem/1.45 var(--text)}
#ck a{color:var(--accent)}
.ck-b{display:flex;gap:10px;margin-left:auto}
#ck button{border:1px solid var(--ink);border-radius:var(--r);padding:10px 18px;font:600 .92rem/1 var(--text);cursor:pointer;min-height:42px}
#ck .ok{background:var(--btn);color:var(--btn-ink)}
#ck .no{background:transparent;color:var(--ink)}

@media(max-width:900px){
  .brains{grid-template-columns:repeat(2,minmax(0,1fr))}
  .usage-grid{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:minmax(0,1fr);gap:30px}
  .flow li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-24px;margin:0 0 0 -8px;transform:rotate(135deg)}
  .hero-row,.two,.fit,.does,.offer{grid-template-columns:minmax(0,1fr)}
  .hero-row{align-items:start}
  .says,.stories{grid-template-columns:minmax(0,1fr)}
  .loop{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .loop-back{display:none}
  .loop-note{margin-top:28px}
  .mentor{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
  .rbar{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}
  .rbar .track{grid-column:1/-1;order:3}
  .think h2{margin-bottom:24px}
}
@media(max-width:760px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp tr{padding:18px 0;border-bottom:1px solid var(--rule)}
  .cmp tbody th{width:auto;padding:0 0 8px;border:0}
  .cmp td{padding:8px 0 8px 14px;border:0;background:none!important;border-left:2px solid var(--rule);margin:6px 0}
  .cmp td:nth-child(2){border-left-color:var(--gold)}
  .cmp td::before{content:attr(data-l);display:block;font:500 .74rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:2px}
}
@media(max-width:640px){
  body{font-size:17px}
  .brains{grid-template-columns:minmax(0,1fr)}
  .modes div{grid-template-columns:minmax(0,130px) minmax(0,1fr) 22px}
  .wa-float{display:inline-flex}
  .cta-row .btn{width:100%}
  .rbar{grid-template-columns:minmax(0,1fr)}
  .rbar .lab{order:1}.rbar .val{order:2}.rbar .track{order:3}
  .step dl>div{grid-template-columns:minmax(0,1fr)}
  .loop{grid-template-columns:minmax(0,1fr)}
  .mentor{grid-template-columns:minmax(0,1fr)}
  .mentor img{max-width:240px}
  .steps li{grid-template-columns:56px minmax(0,1fr)}
  .fit>div,.does>div{padding:24px 22px 26px}
  footer{padding-bottom:84px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .js .bars .fill{width:var(--w)}
}


/* ======== v7: imágenes de acompañamiento ======== */
:root{--navy:#0A1D43;--navy-2:#12285F;--line-d:#2E4595;--text-d:#E6E8F6;--mute-d:#C7D0F5}
.panel{background:var(--navy);color:var(--text-d);border-radius:6px;margin:0;padding:clamp(20px,3vw,34px)}
.panel figcaption{margin-top:14px;color:var(--mute-d)}
/* la semana del dueño: todas las barras son ruido salvo una */
.semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.6vw,18px)}
.semana .col{display:flex;flex-direction:column;gap:7px}
.semana i{display:block;height:9px;width:var(--w);background:#444C9C;border-radius:2px;transform-origin:left center;animation:entra .5s cubic-bezier(.2,.8,.2,1) var(--d) both}
.semana i.pick{background:var(--gold);animation:entra .5s cubic-bezier(.2,.8,.2,1) var(--d) both,enciende .9s ease var(--d) both}
.semana b{margin-top:6px;font:700 .95rem/1 var(--display);font-stretch:80%;color:var(--mute-d);letter-spacing:.04em}
@keyframes entra{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
@keyframes enciende{from{background:#444C9C;box-shadow:0 0 0 0 rgba(210,173,54,0)}to{background:var(--gold);box-shadow:0 0 0 5px rgba(210,173,54,.22)}}


.semana-panel .semana{max-width:none}
.semana-panel .semana b{color:var(--mute-d)}

/* cabecera: collage */
.hero-row{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
.collage{position:relative;aspect-ratio:1/1.04;container-type:inline-size;width:100%;max-width:560px;margin-left:auto}
.c-block{position:absolute;right:0;top:6%;width:60%;height:88%;background:var(--gold);border-radius:999px 999px 6px 6px}
.c-photo{position:absolute;right:6%;top:0;width:60%;height:88%;border-radius:999px 999px 6px 6px;overflow:hidden;background:var(--navy)}
.c-photo img{width:100%;height:100%;object-fit:cover;object-position:46% 22%}
.c-card{position:absolute;background:var(--card);border:1px solid var(--ink);border-radius:4px;padding:2.4cqw 2.8cqw;font-size:clamp(11px,2.5cqw,14px);line-height:1.35;color:var(--ink);text-decoration:none;box-shadow:0 12px 28px rgba(20,24,54,.16)}
.c-card .mono{display:block;font-size:max(9px,1.9cqw);margin-bottom:1.2cqw}
.c-chat{left:0;top:8%;width:46%}
.c-chat .b{margin:0 0 1cqw;padding:1.2cqw 1.8cqw;border-radius:3px;font-size:inherit}
.c-chat .sys{background:var(--paper-2);color:var(--ink)}
.c-chat .usr{background:var(--navy);color:#fff;margin:0 0 0 auto;width:88%}
.c-report{left:2%;bottom:7%;width:52%}
.c-big{display:block;font:400 clamp(26px,7.4cqw,44px)/1 var(--display);letter-spacing:-.02em}
.c-report .gap{height:2.6cqw;min-height:10px;margin:1.4cqw 0 1cqw;line-height:1;border-radius:2px}
.c-small{display:block;font-size:max(10px,2.1cqw);color:var(--ink-2)}
.c-week{right:0;bottom:0;width:44%}
.c-week ul{list-style:none;margin:0;padding:0;display:grid;gap:.9cqw}
.c-week li{position:relative;padding-left:3.4cqw}
.c-week li::before{content:"";position:absolute;left:0;top:.35em;width:2.2cqw;height:2.2cqw;min-width:9px;min-height:9px;border:1.5px solid var(--ink-2);border-radius:2px}
.c-week li.ok::before{background:var(--ink);border-color:var(--ink)}
.c-week li.ok{color:var(--ink-2);text-decoration:line-through}

/* ¿te suena? con iconos */
.says li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-items:start}
.says .ico{grid-row:1/3;width:52px;height:52px;border-radius:6px;background:var(--navy);display:grid;place-items:center}
.says .ico svg{width:30px;height:30px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.says .mono{grid-column:2;margin:0 0 8px}
.says li>:not(.ico):not(.mono){grid-column:2}

/* la pregunta */
.q-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.q-grid h2{font-size:clamp(2.6rem,6vw,4.8rem)}

/* plan */
.plan-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(32px,5vw,52px)}
.plan-grid .steps{margin:0}
.plan-grid .steps li{grid-template-columns:clamp(48px,6vw,80px) minmax(0,1fr)}
.plan-grid .n{font-size:clamp(2.6rem,5vw,4.2rem)}
.path{position:sticky;top:96px}
.path svg{width:100%;height:auto;display:block}

/* cinco cerebros */
.dentro-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center}
.brain-map svg{width:100%;height:auto;display:block}

/* mentor */
.wide-photo{margin:clamp(36px,5vw,64px) 0 0;position:relative}
.wide-photo img{width:100%;max-height:520px;object-fit:cover;object-position:50% 30%;border-radius:6px}
.wide-photo figcaption{margin-top:10px}
.mentor img{border-radius:999px 999px 6px 6px;aspect-ratio:4/5}

/* ventana de conversación */
.win{border:1px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--card)}
.win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--navy);color:var(--mute-d);font:500 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#444C9C;display:block}
.win-bar span{margin-left:8px}
.win .chat{padding:20px}

/* cierre con teléfono */
.close-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,5vw,64px);align-items:center}
.phone{margin:0;width:100%;max-width:300px;justify-self:center;border:10px solid var(--navy);border-radius:34px;background:var(--paper-2);overflow:hidden;box-shadow:0 18px 40px rgba(20,24,54,.18)}
.ph-top{display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;padding:14px 16px;font-size:.95rem}
.ph-dot{width:30px;height:30px;border-radius:50%;background:var(--gold);display:block}
.ph-body{padding:26px 16px 22px;display:grid;gap:12px;min-height:200px;align-content:end}
.ph-msg{margin:0;margin-left:auto;max-width:88%;background:var(--navy);color:#fff;padding:11px 14px;border-radius:12px 12px 2px 12px;font-size:.98rem;line-height:1.4}
.ph-body .mono{text-align:right}

@media(max-width:900px){
  .q-grid,.plan-grid,.dentro-head,.close-grid{grid-template-columns:minmax(0,1fr)}
  .path{position:static}
  .collage{margin:8px auto 0}
  .phone{justify-self:start}
}
@media(max-width:640px){
  .collage{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:none}
  .c-block{display:none}
  .c-photo{position:relative;right:auto;width:100%;height:auto;aspect-ratio:4/5;grid-column:1/-1;max-width:260px;justify-self:center;border-radius:999px 999px 6px 6px}
  .c-card{position:static;width:auto;font-size:.88rem;padding:12px 14px}
  .c-card .mono{font-size:.68rem;margin-bottom:6px}
  .c-chat{grid-column:1/-1}
  .c-chat .b{padding:7px 10px;margin-bottom:6px}
  .c-big{font-size:2rem}
  .c-report .gap{height:12px;margin:8px 0}
  .c-small{font-size:.8rem}
  .c-week{grid-column:auto}
  .c-week li{padding-left:18px}
  .c-week li::before{width:11px;height:11px}
  .says li{grid-template-columns:44px minmax(0,1fr);column-gap:14px}
  .says .ico{width:44px;height:44px}
}


/* ======== v0: estilo de la landing actual (Poppins, azul marino, botones verdes, imagen circular, textos centrados) aplicado al contenido nuevo ======== */
body{font-weight:400}
h1,h2,h3{font-weight:700;letter-spacing:-.01em;line-height:1.15}
h1 em,h2 em{font-style:normal;color:var(--accent)}
.mono,.eyebrow,.tag{text-transform:none;letter-spacing:0;font-family:var(--text);font-weight:600}
.btn{border-radius:999px;font-weight:700}
.btn-gold,.btn-ink{background:var(--btn);color:#fff}
.hero,.tone-navy{background:linear-gradient(180deg,#0A1D43,#001F66);color:#fff;--ink:#fff;--ink-2:#C7D0F5;--rule:#2E4595;--card:#12285F;--paper-2:#12285F;--accent:#FFA500;--btn:#37C660;--btn-ink:#fff;--bar-soft:#3A4170}
.tone-bone{background:#EFE8FB}
.btn-line{border-color:#fff;color:#fff}
.btn-line:hover{background:#fff;color:#0A1D43}
.top{background:#0A1D43;border-bottom:0}
.top .brand{color:#fff}
.hero{padding-top:clamp(36px,5vw,64px)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);margin-bottom:clamp(20px,3vw,32px);max-width:14em}
.hero-row{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center}
.lead{color:#E6E8F6}.lead b{color:#fff}
.circle{position:relative;width:min(100%,440px);aspect-ratio:1;margin-left:auto}
.circle img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:0}
.bub{position:absolute;border-radius:50%;display:block}
.b1{width:20%;height:20%;background:#37C660;right:-2%;top:12%}
.b2{width:11%;height:11%;background:#8713FB;right:-6%;top:40%}
.b3{width:15%;height:15%;background:#8713FB;left:-6%;bottom:6%}
h2{text-align:center;margin-left:auto;margin-right:auto}
.sub,.big-p,.close-p,.needs,.note-ink,.terms,.closer{margin-left:auto;margin-right:auto;text-align:center}
.q-grid h2,.q-grid .big-p{text-align:left;margin-left:0}
.says li{border-top:0;background:#fff;border-radius:12px;padding:20px;box-shadow:0 8px 24px rgba(10,29,67,.08);font-weight:600;font-size:1.05rem;line-height:1.4}
.says .ico{background:#0A1D43}
.says .ico svg{stroke:#FFA500}
.n{color:#FFA500;font-weight:700}
.sec{border-top:0}
.top .btn-gold{background:#37C660}

/* laptop con tablero */
.laptop{margin:clamp(40px,6vw,72px) auto 0;width:min(100%,1040px);container-type:inline-size;position:relative}
.lt-screen{border:1px solid #2A2F4A;border-radius:20px 20px 6px 6px;background:#0A0C15;padding:1.1cqw;box-shadow:0 0 0 .6cqw #11131F,0 40px 120px rgba(210,173,54,.20)}
.lt-base{height:2cqw;width:106%;margin-left:-3%;background:linear-gradient(#1B1E30,#0B0D17);border-radius:0 0 18px 18px}
.laptop figcaption{margin-top:18px;color:var(--ink-2);text-align:center}
.db{display:grid;gap:1.4cqw;padding:1.6cqw;font-size:clamp(8px,1.32cqw,14px);line-height:1.35;color:var(--ink);text-align:left;background:linear-gradient(180deg,#0E1120,#0A0C15);border-radius:12px}
.db .mono{font-size:.78em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.db-top{display:flex;align-items:center;justify-content:space-between;gap:1.4cqw;padding-bottom:1.2cqw;border-bottom:1px solid var(--rule)}
.db-logo{display:flex;align-items:center;gap:.8cqw;font-weight:600}
.db-logo i{width:1.8cqw;height:1.8cqw;border-radius:30%;background:var(--gold);display:block}
.db-top nav{display:flex;gap:.6cqw;background:#11131F;border-radius:999px;padding:.4cqw}
.db-top nav b{font-weight:500;padding:.5cqw 1.3cqw;border-radius:999px;color:var(--ink-2)}
.db-top nav b.on{background:#1E2236;color:var(--ink)}
.db-user{color:var(--ink-2)}
.db-head{display:flex;align-items:baseline;justify-content:space-between;gap:1cqw;flex-wrap:wrap}
.db-head h3{font-size:2.2em;font-weight:300;letter-spacing:-.03em;margin:0}
.db-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2cqw}
.m{background:#11131F;border:1px solid var(--rule);border-radius:10px;padding:1.4cqw 1.6cqw;display:grid;gap:.5cqw;align-content:start}
.m strong{font-size:2.9em;font-weight:300;letter-spacing:-.03em;line-height:1}
.m small{color:var(--ink-2);font-size:.85em}
.spark{width:100%;height:auto;max-height:3.4cqw;display:block}
.mbar{display:block;height:.9cqw;min-height:5px;background:#252A40;border-radius:99px;overflow:hidden}
.mbar i{display:block;height:100%;width:var(--w);background:var(--gold);border-radius:99px}
.dots{display:flex;gap:.5cqw}
.dots i{flex:1;height:.9cqw;min-height:5px;background:#252A40;border-radius:99px;display:block}
.dots i.on{background:var(--gold)}
.db-main{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1.2cqw}
.db-chart,.db-side{background:#11131F;border:1px solid var(--rule);border-radius:10px;padding:1.4cqw 1.6cqw;min-width:0}
.db-chart svg{width:100%;height:auto;display:block;margin-top:.8cqw}
.db-side{display:grid;gap:.9cqw;align-content:start}
.db-side ul{list-style:none;margin:0 0 .6cqw;padding:0;display:grid;gap:.7cqw}
.db-side li{position:relative;padding-left:2.2cqw}
.db-side li::before{content:"";position:absolute;left:0;top:.25em;width:1.2cqw;height:1.2cqw;min-width:8px;min-height:8px;border:1.5px solid var(--ink-2);border-radius:3px}
.db-side li.ok{color:var(--ink-2);text-decoration:line-through}
.db-side li.ok::before{background:var(--gold);border-color:var(--gold)}
.db-side p{margin:0;color:var(--ink)}
@media(max-width:700px){
  .db{font-size:11.5px;gap:10px;padding:12px}
  .db-top nav,.db-user{display:none}
  .db-cards{grid-template-columns:minmax(0,1fr)}
  .db-main{grid-template-columns:minmax(0,1fr)}
  .db-logo i{width:14px;height:14px}
  .m{padding:12px 14px;gap:6px}.db-chart,.db-side{padding:12px 14px}
  .db-head h3{font-size:1.9em}
  .m strong{font-size:2.4em}
  .spark{max-height:30px}
  .lt-screen{padding:6px;border-radius:14px 14px 4px 4px}
  .lt-base{height:10px}
}


/* ======== v9 ======== */
.wrap{max-width:var(--max);padding-left:max(clamp(20px,4vw,72px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,4vw,72px),env(safe-area-inset-right,0px))}
.sec{padding:clamp(56px,7vw,110px) 0}
/* cabecera: problema y solución, tablero a la derecha */
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);gap:clamp(28px,4vw,72px);align-items:center}
.hero h1{font-size:clamp(2.4rem,5.2vw,5rem);max-width:none;margin-bottom:clamp(16px,2vw,26px)}
.solution{font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:600;line-height:1.35;color:#fff;margin:0 0 20px;max-width:30em}
.solution .arrow{color:var(--accent);font-weight:700;margin-right:.3em}
.hl{background:linear-gradient(transparent 62%,rgba(255,165,0,.55) 62%) no-repeat left/100% 100%;padding:0 .12em;transition:background-size .9s cubic-bezier(.2,.8,.2,1)}
.js .hl:not(.in){background-size:0 100%}
.hero-visual{position:relative;min-width:0}
.hero-visual .laptop{margin:0;width:100%}
.hero-visual .laptop figcaption{display:none}
.hero-visual .bub{z-index:0}
.hero-visual .b1{width:9%;height:0;padding-bottom:9%;background:#37C660;right:-2%;top:-4%}
.hero-visual .b2{width:5%;padding-bottom:5%;height:0;background:#8713FB;right:-3%;top:38%}
.hero-visual .b3{width:8%;padding-bottom:8%;height:0;background:#8713FB;left:-3%;bottom:-3%}
.hero-visual .lt-screen{position:relative;z-index:1}
.hero .lead{max-width:34em}
/* escalera: chips y ganchos */
.chip{display:inline-flex;align-items:center;gap:.6em;margin:0 0 16px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,165,0,.14);color:var(--accent);font-weight:600;font-size:.92rem}
.chip b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#0A1D43;font-weight:700}
.tone-bone .chip{background:rgba(10,29,67,.08);color:#0A1D43}
.tone-bone .chip b{background:#0A1D43;color:#fff}
h2{text-align:left;margin-left:0}
.sub,.close-p,.needs,.note-ink,.terms,.closer{text-align:left;margin-left:0}
.hook{display:flex;align-items:center;gap:14px;margin:clamp(28px,4vw,48px) 0 0;padding:18px 22px;border-radius:14px;background:linear-gradient(90deg,rgba(255,165,0,.18),rgba(255,165,0,.04));border:1px solid rgba(255,165,0,.35);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.35rem)}
.hook span{flex:1}
.hook i{font-style:normal;color:var(--accent);font-size:1.6em;line-height:1;animation:bob 1.6s ease-in-out infinite}
.tone-bone .hook{color:#0A1D43}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.js .hook:not(.in){opacity:0;transform:translateY(14px)}
.hook{transition:opacity .6s,transform .6s}
/* lo que te cuesta / lo que quieres */
.cost-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(24px,3vw,40px)}
.cost-grid article{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:clamp(18px,2vw,28px)}
.cost-grid h3{font-size:clamp(1.15rem,1.6vw,1.45rem);margin:12px 0 8px}
.cost-grid p{margin:0;color:var(--ink-2);font-size:.98rem}
.ci{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(255,165,0,.16);color:var(--accent);font-style:normal;font-size:1.4rem}
.want-list{list-style:none;margin:28px 0 0;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.want-list li{padding:14px 22px;border-radius:999px;background:#fff;box-shadow:0 8px 22px rgba(10,29,67,.10);font-weight:600}
/* tablero */
.tab-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(20px,3vw,40px)}
.callouts{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.callouts li{padding-left:18px;border-left:3px solid var(--accent);font-size:1.05rem;color:var(--ink-2)}
.callouts b{color:#fff}
.callouts li.note{border-left-color:var(--rule);font-size:.92rem}
.tablero .laptop{margin:0}
.db-main2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.2cqw}
.db-card{background:#11131F;border:1px solid var(--rule);border-radius:10px;padding:1.4cqw 1.6cqw;min-width:0;display:grid;gap:.9cqw;align-content:start}
.steps8{list-style:none;margin:0;padding:0;display:grid;gap:.8cqw}
.steps8 li{position:relative;padding-left:2.4cqw}
.steps8 li::before{content:"";position:absolute;left:0;top:.25em;width:1.3cqw;height:1.3cqw;min-width:8px;min-height:8px;border:1.5px solid var(--ink-2);border-radius:3px}
.steps8 li.ok{color:var(--ink-2);text-decoration:line-through}
.steps8 li.ok::before{background:var(--accent);border-color:var(--accent)}
.days2{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.5cqw}
.days2 i{display:block;aspect-ratio:1;border-radius:2px;background:#252A40}
.days2 i.on{background:var(--accent)}
.db .mt{margin-top:.6cqw}
.modes2{display:grid;gap:.7cqw}
.modes2 div{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr) 2cqw;gap:.8cqw;align-items:center}
.modes2 i{display:block;height:1cqw;min-height:5px;width:var(--w);background:var(--accent);border-radius:99px}
.modes2 b{text-align:right;font-weight:500}
@media(max-width:1000px){
  .hero-grid,.tab-grid{grid-template-columns:minmax(0,1fr)}
  .cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .cost-grid{grid-template-columns:minmax(0,1fr)}
  .db-main2{grid-template-columns:minmax(0,1fr)}
  .hook{padding:14px 16px}
}

/* ======== variante sobria: base azul y blanco, un solo acento (naranja), sin morado ni lila ======== */
h1,h2,h3{font-weight:600}
.hero,.tone-navy{background:#0B1B3F}
.tone-bone{background:#F4F6FA}
.hero-visual .bub{display:none}
.says li,.want-list li{box-shadow:none;border:1px solid #D9DDF0}
.chip{background:transparent;border:1px solid rgba(255,165,0,.5)}
.tone-bone .chip{border-color:#C9CFE3;background:transparent}
.hook{background:transparent;border-color:rgba(255,255,255,.18)}
.hl{background:linear-gradient(transparent 88%,#FFA500 88%) no-repeat left/100% 100%}
.cost-grid article{border-radius:10px}
.lt-screen{box-shadow:0 0 0 .6cqw #11131F,0 30px 80px rgba(0,0,0,.35)}

/* v10 · cabecera: el producto en una frase + IADE */
.hero h1 .nm{display:block;font-size:.5em;letter-spacing:.2px;color:var(--ink-2);margin-bottom:.35em}
.hero-visual .hv-stack{display:grid;gap:12px;max-width:560px;margin-left:auto}
.hv-in{background:#12285F;border:1px solid #2E4595;border-radius:16px;padding:16px 18px;color:#fff}
.hv-in .mono{display:block;margin-bottom:10px;opacity:.75}
.hv-in .chips{display:flex;flex-wrap:wrap;gap:8px}.hv-in .chips span{border:1px dashed #5A70B8;border-radius:10px;padding:6px 11px;font-size:.88rem;color:#D5DCF2}
.hv-arrow{text-align:center;color:#FFA500;font-weight:700;letter-spacing:.3px}
.hv-doc{background:#fff;color:#0B1B3F;border-radius:18px;padding:20px;display:grid;gap:14px}
.hv-head{display:flex;justify-content:space-between;align-items:center}.hv-head .mono{font-size:.72rem;opacity:.6}
.hv-gap .meta{display:flex;justify-content:space-between;font-size:.82rem;color:#5B6794;margin-bottom:6px}
.hv-gap .bar{height:10px;border-radius:9px;background:#E6EAF5;overflow:hidden}.hv-gap .bar i{display:block;height:100%;width:60%;background:linear-gradient(90deg,#FFA500,#FFC24D)}
.hv-gap p{font-size:.8rem;color:#5B6794;margin:6px 0 0}
.hv-tasks{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.95rem}.hv-tasks li{display:flex;gap:10px;align-items:center}
.tg{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:.75rem;font-weight:700;color:#fff;flex:none}
.tg.a{background:#37C660}.tg.b{background:#FFA500}.tg.c{background:#9AA3C4}
.hv-ready{border-top:1px solid #E6EAF5;padding-top:12px}.hv-ready .mono{display:block;font-size:.72rem;opacity:.6;margin-bottom:8px}
.hv-ready .docs{display:flex;flex-wrap:wrap;gap:8px}.hv-ready .docs span{background:#FFF4DE;border-radius:8px;padding:6px 11px;font-size:.82rem;font-weight:600}
@media(max-width:900px){.hero-visual .hv-stack{margin:0 auto}}
.hv-head .mono,.hv-ready .mono{color:#5B6794;opacity:1}

.hero .eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:14px;color:#FFA500;font-weight:700}
.hero .micro{margin-top:14px;font-size:.9rem;opacity:.8;max-width:34em}
.hv-miss{background:#FFF4DE;border-radius:10px;padding:10px 12px;font-size:.86rem;color:#0B1B3F}
/* v12 · titular largo: tamaño menor y columna de texto más ancha */
.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.hero h1{font-size:clamp(2.1rem,3.9vw,3.8rem);line-height:1.06}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}

/* v13 · esquema entra → se ordena → sale */
.flow3{max-width:560px;margin-left:auto;display:grid;gap:0}
.fx{border-radius:18px;padding:16px 18px}
.fx-tag{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.fx-tag b{width:22px;height:22px;border-radius:50%;background:#FFA500;color:#0B1B3F;display:inline-grid;place-items:center;font-size:.8rem;flex:none;align-self:center}
.fx-tag span{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;color:#FFA500}
.fx-tag em{font-style:normal;font-size:.82rem;opacity:.75}
.fx-tag.out span{color:#B06A00}.fx-tag.out em{color:#5B6794;opacity:1}
.fx-in{background:#12285F;border:1px solid #2E4595;color:#fff}
.fx-in .chips{display:flex;flex-wrap:wrap;gap:7px}.fx-in .chips span{border:1px dashed #5A70B8;border-radius:9px;padding:5px 10px;font-size:.84rem;color:#D5DCF2}
.fx-arrows{width:100%;height:auto;display:block;margin:2px 0}
.fx-sys{background:linear-gradient(160deg,#1A3680,#12275A);border:2px solid #4A6BD0;color:#fff}
.sys-box{display:flex;gap:14px;align-items:center}.sys-box img{border-radius:12px;background:#0B1B3F}
.sys-box strong{font-size:1.1rem}.sys-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.sys-tags span{background:#0B1B3F;border-radius:999px;padding:4px 10px;font-size:.78rem;color:#D5DCF2}
.fx-out{background:#fff;color:#0B1B3F;display:grid;gap:14px}
@media(max-width:900px){.flow3{margin:0 auto}}

/* v15 · escala tipográfica única y esquema compacto */
h2,.question h2,.q-grid h2{font-size:clamp(1.8rem,2.8vw,2.55rem);line-height:1.1;margin-bottom:22px}
.close-h{font-size:clamp(2rem,3.3vw,3rem);line-height:1.08}
h3,.fit h3,.does h3,.flow-title,.example h3,.usage header h3,.doc-head h3,.brain h3{font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.15}
.mentor h3{font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1.05}
.doc-part h4{font-size:clamp(1.15rem,1.6vw,1.35rem)}
.pull,.says li,.stories article b,.closer{font-size:clamp(1.2rem,1.9vw,1.5rem)}
.n{font-size:clamp(2.4rem,4.2vw,3.4rem)}
.loop .n{font-size:clamp(2rem,3.4vw,2.7rem)}
.hc-big{font-size:clamp(2.4rem,4.4vw,3.4rem)}
.sub,.lead2,.big-p{font-size:1.1rem}
.steps p{font-size:clamp(1.02rem,1.3vw,1.15rem)}
.mono{font-size:12px}
.hero{padding-top:clamp(28px,3.5vw,48px);padding-bottom:clamp(36px,4vw,56px)}
.hero-grid{gap:clamp(24px,3vw,48px)}
/* esquema compacto */
.flow3{max-width:500px}
.fx{padding:11px 14px;border-radius:14px}
.fx-tag{margin-bottom:8px;gap:8px}
.fx-tag b{width:19px;height:19px;font-size:.72rem}
.fx-tag span{font-size:.72rem}.fx-tag em{font-size:.76rem}
.fx-in .chips{gap:5px}.fx-in .chips span{padding:3px 8px;font-size:.76rem;border-radius:8px}
.fx-arrows{margin:0}
.sys-box{gap:12px}.sys-box img{width:44px;height:44px}.sys-box strong{font-size:1rem}
.sys-tags{margin-top:5px}.sys-tags span{font-size:.72rem;padding:3px 9px}
.fx-out{gap:9px}
.fx-out .hv-gap .meta{font-size:.76rem;margin-bottom:4px}.fx-out .hv-gap p{font-size:.74rem;margin-top:4px}
.fx-out .hv-tasks{gap:5px;font-size:.84rem}.fx-out .tg{width:19px;height:19px;font-size:.68rem}
.fx-out .hv-ready{padding-top:8px}.fx-out .hv-ready .mono{font-size:.68rem;margin-bottom:5px}
.fx-out .hv-ready .docs span{padding:4px 9px;font-size:.76rem}
.sec{padding:clamp(44px,5.5vw,76px) 0}
.question{padding-top:clamp(52px,6vw,84px);padding-bottom:clamp(52px,6vw,84px)}
.fit-sec{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}

/* v16 · etiquetas de sección más destacadas, ilustraciones, esquema aún más compacto */
.chip{font-size:1.05rem;padding:8px 20px 8px 8px;gap:.7em;margin-bottom:20px;font-weight:700}
.chip b{width:32px;height:32px;font-size:1rem}
.owner-panel{padding:0;background:none;border:0}.owner-panel svg{width:100%;height:auto;display:block;border-radius:18px}
.owner-panel figcaption{margin-top:10px}
.want-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.want-card{background:#fff;border:1px solid #D9DDF0;border-radius:18px;padding:20px 20px 22px}
.want-card svg{width:100%;height:auto;display:block;margin-bottom:14px}
.want-card h3{margin:0 0 6px}.want-card p{margin:0;font-size:1rem}
.fit-ill{margin:0 0 12px}.fit-ill svg{width:100%;max-width:260px;height:auto;display:block}
.hero .micro{margin-top:12px}
.flow3{max-width:430px}
.fx{padding:9px 12px}
.fx-tag{margin-bottom:6px}
.fx-in .chips{gap:4px}.fx-in .chips span{padding:2px 7px;font-size:.7rem}
.sys-box img{width:38px;height:38px}.sys-box strong{font-size:.92rem}
.sys-tags span{font-size:.68rem;padding:2px 8px}
.fx-out{gap:7px}.fx-out .hv-tasks{font-size:.78rem;gap:4px}.fx-out .tg{width:17px;height:17px}
.fx-out .hv-ready .docs span{font-size:.7rem;padding:3px 8px}
.fx-arrows{max-height:22px}
@media(max-width:900px){.want-cards{grid-template-columns:minmax(0,1fr)}}

/* v17 · ejemplo del plan con números */
.fit-yes .abs{color:#E08A00;letter-spacing:.02em}
.ex2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(18px,2.4vw,32px);margin-top:10px}
.ex2-col{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:18px 20px}
.ex2-k{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-weight:700;font-size:1.02rem}
.ex2-k b{width:26px;height:26px;border-radius:50%;background:#FFA500;color:#0A1D43;display:grid;place-items:center;font-size:.85rem;flex:none}
.ex2-s{margin:0 0 14px;font-size:.92rem;color:var(--ink-2)}
.wf{display:grid;gap:10px}.wf-row{display:grid;grid-template-columns:1fr;gap:3px;font-size:.88rem}
.wf-row span{color:var(--ink-2)}.wf-row i{display:block;height:12px;border-radius:6px;width:var(--w);background:#0A1D43}
.wf-row.neg i{background:#9AA3C4}.wf-row.res i{background:#37C660}.wf-row b{font-size:.95rem}
.gapbox{background:#F4F6FA;border-radius:12px;padding:14px}
.gb-nums{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--ink-2)}.gb-nums span{display:grid;gap:2px}.gb-nums b{font-size:1.02rem;color:var(--ink)}
.gb-nums .gb-miss b{color:#C77300}
.gb-bar{height:12px;background:#E1E6F4;border-radius:7px;margin-top:12px;overflow:hidden}.gb-bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#FFA500,#FFC24D)}
.ex2-note{font-size:.9rem;margin:14px 0 0}
.tasks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.tasks li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:#FBFCFE}
.tasks small{display:block;font-size:.78rem;color:var(--ink-2);margin-top:2px}
.tasks em{display:block;font-style:normal;font-size:.82rem;color:#2C7A46;margin-top:4px}
.tasks strong{font-size:1rem;white-space:nowrap}
.pr{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem}.pr.p1{background:#37C660}.pr.p2{background:#FFA500}
.ex2-sum{margin-top:22px}.sumbar{display:flex;height:34px;border-radius:10px;overflow:hidden;font-size:.8rem;font-weight:700;color:#fff}
.sumbar i{display:grid;place-items:center;font-style:normal;width:var(--w)}.sumbar .s1{background:#37C660}.sumbar .s2{background:#FFA500;color:#0A1D43}.sumbar .s3{background:#0A1D43}
.ex2-sum p{margin:12px 0 0}.ex2-foot{font-size:.8rem;color:var(--ink-2)}
@media(max-width:1000px){.ex2-grid{grid-template-columns:minmax(0,1fr)}}
.wf-row{grid-template-columns:minmax(0,1fr) auto;row-gap:5px}.wf-row i{grid-column:1/-1;order:3}
.gb-nums b{font-size:.92rem}.gb-nums{gap:4px}.gapbox{padding:12px}
.ex2-col:nth-child(1),.ex2-col:nth-child(2){align-self:start}

/* v18 · pestañas, tablero de resumen, diferencias, imágenes y llamados a la acción */
.tabs{gap:8px}.tab{font-size:.82rem}
.dash{margin:0;background:#fff;color:#0A1D43;border-radius:18px;padding:16px 18px;display:grid;gap:12px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid #E1E6F4;padding-bottom:10px;font-size:.8rem}
.dash-top .db-logo{display:flex;align-items:center;gap:7px;font-weight:700}.dash-top .db-logo i{width:11px;height:11px;border-radius:3px;background:#FFA500;display:block}
.dash-top nav{display:flex;gap:6px;flex-wrap:wrap}.dash-top nav b{font-weight:600;padding:4px 10px;border-radius:999px;color:#5B6794}.dash-top nav b.on{background:#0A1D43;color:#fff}
.dash-user{color:#5B6794}
.dash-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}.dash-head h3{font-size:1.15rem;margin:0}.dash-head .mono{color:#5B6794;font-size:.72rem}
.dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dash .k{background:#F4F6FA;border-radius:12px;padding:10px 12px;display:grid;gap:3px;align-content:start}.dash .k>span{font-size:.72rem;color:#5B6794;line-height:1.25}
.dash .k strong{font-size:1.45rem;line-height:1.1}.dash .k strong.ok{color:#1F9A47}.dash .k small{font-size:.7rem;color:#5B6794}
.dash .k.warn{background:#FFF1E0}.dash .k.warn strong{color:#C77300}
.dash .k svg{width:100%;height:30px}
.dash .dots{display:flex;gap:4px;margin-top:4px}.dash .dots i{width:12px;height:12px;border-radius:50%;background:#D8DDEE}.dash .dots i.on{background:#37C660}
.dash-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dcard{background:#fff;border:1px solid #E1E6F4;border-radius:12px;padding:12px}.dcard h4{font-size:.8rem;margin:0 0 8px;color:#0A1D43;line-height:1.25}
.sem{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.8rem}.sem li{display:flex;justify-content:space-between;align-items:center}
.dash b.grn,.dash b.amb,.dash b.red,.dash b.gry{font-size:.72rem;padding:2px 9px;border-radius:999px;color:#fff}
.dash b.grn{background:#37C660}.dash b.amb{background:#FFA500;color:#0A1D43}.dash b.red{background:#E5484D}.dash b.gry{background:#9AA3C4}
.hb{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.78rem}.hb li{display:grid;grid-template-columns:74px 1fr 14px;gap:8px;align-items:center}
.hb i{display:block;height:8px;border-radius:5px;background:#0A1D43;width:var(--w)}.hb b{font-size:.78rem}
.mv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:.74rem}
.mv li{display:grid;gap:0;padding:6px 8px;border-radius:9px;background:#F4F6FA}.mv li b{font-size:1.1rem;padding:0;background:none;border-radius:0}
.mv li.grn b{color:#1F9A47}.mv li.amb b{color:#C77300}.mv li.red b{color:#E5484D}.mv li.gry b{color:#5B6794}
.pl{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:.82rem}
.pl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center}.pl em{font-style:normal;font-size:.72rem;color:#5B6794}
.pl .pr{width:22px;height:22px;font-size:.75rem}
.diff-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:26px 0 24px}
.diff-cards article{background:#F4F6FA;border:1px solid #D9DDF0;border-radius:16px;padding:18px}
.diff-cards .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#0A1D43;margin-bottom:12px}
.diff-cards .ico svg{width:28px;height:28px;fill:none;stroke:#FFA500;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.diff-cards h3{margin:0 0 6px}.diff-cards p{margin:0;font-size:.95rem}
.stories article{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start}
.sic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#0A1D43}
.sic svg{width:26px;height:26px;fill:none;stroke:#FFA500;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tl{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0 6px;padding:18px 20px;border:1px solid #2E4595;border-radius:16px;background:rgba(255,255,255,.04)}
.tl .mono{display:block;margin-bottom:8px;color:#C7D0F5;font-size:.72rem}
.tl-dots{display:flex;gap:6px}.tl-dots i{font-style:normal;width:34px;height:34px;border-radius:50%;background:#FFA500;color:#0A1D43;display:grid;place-items:center;font-size:.72rem;font-weight:700}
.tl-m .tl-dots i{background:transparent;border:2px solid #FFA500;color:#FFA500}
.tl-arrow{color:#FFA500;font-size:1.6rem}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-top:34px;padding:16px 22px;border-radius:16px;background:#fff;border:1px solid #D9DDF0}
.cta-band p{margin:0;font-weight:600;font-size:1.05rem;color:#0A1D43}
.tone-navy .cta-band{background:rgba(255,255,255,.07);border-color:#2E4595}.tone-navy .cta-band p{color:#fff}
@media(max-width:1000px){.dash-kpis,.diff-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-row{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.dash-kpis,.diff-cards{grid-template-columns:minmax(0,1fr)}.pl li{grid-template-columns:auto minmax(0,1fr)}.pl em,.pl b{grid-column:2}}

/* v19 · esquema más pequeño, primera caja blanca y botón principal grande */
.flow3{max-width:380px}
.fx{padding:8px 11px;border-radius:12px}
.fx-tag{margin-bottom:5px;gap:7px}
.fx-tag b{width:17px;height:17px;font-size:.66rem}.fx-tag span{font-size:.66rem}.fx-tag em{font-size:.7rem}
.fx-in{background:#fff;border:1px solid #D9DDF0;color:#0A1D43}
.fx-in .fx-tag span{color:#B06A00}.fx-in .fx-tag em{color:#5B6794;opacity:1}
.fx-in .chips span{border:1px dashed #9AA3C4;color:#0A1D43;background:#F4F6FA;font-size:.65rem;padding:2px 6px}
.fx-sys{border:2px solid #FFA500;box-shadow:0 0 0 4px rgba(255,165,0,.18)}
.sys-box img{width:34px;height:34px}.sys-box strong{font-size:.88rem}
.sys-tags span{font-size:.64rem;padding:2px 7px}
.fx-out{gap:6px}.fx-out .hv-gap .meta{font-size:.7rem}.fx-out .hv-gap p{font-size:.68rem}
.fx-out .hv-tasks{font-size:.72rem;gap:3px}.fx-out .tg{width:15px;height:15px;font-size:.6rem}
.fx-out .hv-ready .docs span{font-size:.64rem;padding:2px 7px}.fx-out .hv-ready .mono{font-size:.62rem}
.fx-arrows{max-height:18px}
.btn-xl{font-size:1.2rem;padding:18px 34px;box-shadow:0 10px 26px rgba(55,198,96,.35)}
@media(max-width:600px){.btn-xl{font-size:1.05rem;padding:16px 24px;width:100%;text-align:center}}
.hero .btn-xl{font-size:1.12rem;padding:16px 26px}
.hero .cta-row{align-items:center;gap:12px 14px}
.hero .cta-row .btn-line{font-size:.92rem;padding:11px 18px}

/* v20 · la cabecera completa (titular, bajada, botón y esquema) cabe en una ventana de ~600 px de alto */
.hero{padding-top:clamp(16px,2.2vw,28px);padding-bottom:clamp(28px,3vw,44px)}
.hero-grid{align-items:start}
.hero h1{font-size:clamp(2rem,3.7vw,3.5rem);line-height:1.05;margin-bottom:14px}
.hero h1 .nm{margin-bottom:.25em}
.hero .lead{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.5;margin-bottom:18px}
.hero .cta-row{margin-top:0}
.hero .micro{margin-top:10px;font-size:.82rem}
.hero-visual{padding-top:4px}
@media (max-height:760px) and (min-width:901px){
  .flow3{max-width:360px}
  .fx{padding:6px 10px}
  .fx-tag{margin-bottom:4px}
  .fx-in .chips{gap:3px}.fx-in .chips span{font-size:.6rem;padding:1px 5px}
  .sys-box img{width:28px;height:28px}.sys-box strong{font-size:.8rem}.sys-box{gap:9px}
  .sys-tags{margin-top:3px;gap:4px}.sys-tags span{font-size:.58rem;padding:1px 6px}
  .fx-out{gap:4px}.fx-out .hv-gap p{display:none}.fx-out .hv-gap .meta{font-size:.64rem}
  .fx-out .hv-tasks{font-size:.66rem;gap:2px}.fx-out .tg{width:13px;height:13px;font-size:.54rem}
  .fx-out .hv-ready{padding-top:5px}.fx-out .hv-ready .mono{display:none}
  .fx-arrows{max-height:12px}
  .hero .btn-xl{padding:13px 22px;font-size:1.02rem}
}

/* v21 · ejemplo simple, sección «Cómo lo hace» y IADE de ejemplo compacto */
.ex3{padding:clamp(18px,2.6vw,28px)}
.ex3-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin:8px 0 16px}
.n3 span{display:block;font-size:.78rem;color:var(--ink-2)}.n3 b{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.1}.n3.goal{text-align:right}
.ex3-bar{position:relative;height:16px;background:#E1E6F4;border-radius:9px}.ex3-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:9px;background:linear-gradient(90deg,#FFA500,#FFC24D)}
.ex3-bar em{position:absolute;left:0;right:0;top:22px;text-align:center;font-style:normal;font-size:.8rem;color:#C77300;font-weight:700}
.ex3-tasks{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ex3-tasks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:12px 14px}
.ex3-tasks b{font-size:.95rem;line-height:1.25}.ex3-tasks strong{grid-column:2;font-size:1.2rem;color:#1F9A47}
.ex3-sum{margin:16px 0 0;font-size:1.02rem}
.como .how-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.como .how-cards article{background:#12285F;border:1px solid #2E4595;border-radius:18px;padding:22px}
.hi{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:#FFA500;margin-bottom:14px}
.hi svg{width:30px;height:30px;fill:none;stroke:#0A1D43;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.how-cards h3{color:#fff;margin:0 0 8px}.how-cards p{color:#C7D0F5;margin:0 0 14px;font-size:.98rem}
.hchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.hchips li{border:1px solid #4A6BD0;border-radius:999px;padding:3px 10px;font-size:.78rem;color:#fff}
.how-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:26px 0 0}
.how-flow span{background:#fff;color:#0A1D43;border-radius:12px;padding:10px 16px;font-weight:600;font-size:.92rem}.how-flow span.res{background:#FFA500}
.how-flow i{font-style:normal;color:#FFA500;font-size:1.4rem;font-weight:700}
.tabs{margin-top:20px}
.doc2 .d2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.doc2 .d2{padding:18px 22px;border-top:1px solid var(--rule);display:grid;gap:6px;align-content:start;grid-template-columns:44px minmax(0,1fr)}
.doc2 .d2:nth-child(odd){border-right:1px solid var(--rule)}
.doc2 .d2i{grid-row:1/span 4;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#0A1D43}
.doc2 .d2i svg{width:24px;height:24px;fill:none;stroke:#FFA500;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.doc2 h4{margin:0;font-size:.95rem}.doc2 p{margin:0;font-size:.95rem;grid-column:2}.doc2 .gap{grid-column:2;margin:4px 0 0}
.doc2 .d2-big{font-weight:600}.doc2 .d2-who{font-size:.88rem;color:var(--ink-2)}
.doc2 .d2-plan{background:#FFF8EA}
@media(max-width:1000px){.ex3-tasks,.como .how-cards{grid-template-columns:minmax(0,1fr)}.ex3-top{grid-template-columns:minmax(0,1fr)}.n3.goal{text-align:left}.doc2 .d2-grid{grid-template-columns:minmax(0,1fr)}.doc2 .d2:nth-child(odd){border-right:0}}

/* v23 · sección 1 («Síntoma») más compacta */
.says li{font-size:1.02rem;line-height:1.3;padding:12px 16px 14px;gap:4px 12px}
.says .ico{width:38px;height:38px}.says .ico svg{width:22px;height:22px}
.says .mono{font-size:.72rem}
.says{margin-top:14px;row-gap:0}
.closer{font-size:1.05rem;margin-top:18px}

/* v24 · escala tipográfica única, tomando como referencia la sección 2 (texto de apoyo ≈17 px, títulos de tarjeta 22–24 px) */
main :where(p,li,dd,td){font-size:1.06rem;line-height:1.55}
.says li{font-size:1.22rem;line-height:1.3;padding:16px 18px 18px}
.says .ico{width:44px;height:44px}.says .ico svg{width:25px;height:25px}.says .mono{font-size:.78rem}
.closer{font-size:1.25rem}
.cost-grid article h3,.want-card h3,.diff-cards h3,.how-cards h3{font-size:1.4rem}
.cost-grid article p,.want-card p,.diff-cards p,.how-cards p{font-size:1.04rem;line-height:1.55}
.fit h3{font-size:1.5rem}.fit p{font-size:1.1rem;max-width:30em}.fit-ill svg{max-width:320px}
.sub,.lead2,.big-p{font-size:1.15rem}
.steps p{font-size:clamp(1.12rem,1.5vw,1.3rem)}
.n3 span{font-size:.9rem}.n3 b{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.ex3-tasks b{font-size:1.08rem}.ex3-tasks strong{font-size:1.4rem}.ex3-sum{font-size:1.12rem}
.ex3 .example-head h3{font-size:1.5rem}.ex2-foot{font-size:.85rem}
.hchips li{font-size:.88rem}.how-flow span{font-size:1rem}
.doc2 .doc-head h3{font-size:1.5rem}.doc2 h4{font-size:1.1rem}.doc2 p{font-size:1.06rem}.doc2 .d2-who{font-size:1rem}
.tab{font-size:.9rem}
.note-ink{font-size:1.3rem}
.callouts li{font-size:1.1rem}
.tab-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr)}
.dash{zoom:1.15}
.diff-cards p{font-size:1.02rem}.cmp td{font-size:1.04rem}
.brain h3{font-size:1.35rem}.brain p{font-size:1rem}.brain.ai p,.mentor-note p{font-size:1.06rem}
.usage p{font-size:1.02rem}.pull{font-size:clamp(1.5rem,2.3vw,1.9rem)}
.loop p{font-size:1.12rem}.mentor p{font-size:1.1rem}.tl .mono{font-size:.8rem}.tl-dots i{width:38px;height:38px;font-size:.78rem}
.does p{font-size:1.12rem}.does h3{font-size:1.5rem}
.stories article p,.stories article div{font-size:1.05rem}.stories article b{font-size:1.3rem}
.think p{font-size:1.08rem}
.cta-band p{font-size:1.15rem}
/* v24 · correcciones: tablero y barra de brecha conservan su tamaño interno */
.dash li,.dash p{font-size:inherit;line-height:1.3}
.dash{zoom:1.08}
.doc2 .gap{display:flex}.doc2 .gap .have{flex:0 1 var(--w);min-width:0;white-space:nowrap;overflow:hidden}.doc2 .gap .miss{flex:1 0 auto;white-space:nowrap;padding:0 12px}

/* v25 · laptops realistas con los tableros dentro */
.lap{position:relative;max-width:100%;margin:0 auto;filter:drop-shadow(0 28px 34px rgba(0,0,0,.38))}
.lap-screen{position:relative;background:linear-gradient(180deg,#1d2230,#0e121c);border:2px solid #323a4e;border-radius:16px 16px 5px 5px;padding:16px 12px 12px}
.lap-screen::before{content:"";position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3a4560;box-shadow:0 0 0 2px #151a27}
.lap-screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 38%)}
.lap-in{border-radius:6px;overflow:hidden;background:#fff}
.lap-base{height:15px;margin:0 -5%;border-radius:0 0 22px 22px;background:linear-gradient(180deg,#d9dde6 0%,#a9afbd 70%,#8d93a2 100%);position:relative;box-shadow:0 2px 0 #6e7484}
.lap-base::before{content:"";position:absolute;left:50%;top:0;width:17%;height:6px;margin-left:-8.5%;border-radius:0 0 9px 9px;background:#8b91a1}
.tilt-l{transform:perspective(1400px) rotateY(7deg)}.tilt-r{transform:perspective(1400px) rotateY(-5deg)}
.lap .dash{box-shadow:none;border-radius:0;margin:0}
.dash-lap{min-width:0}
.path-lap{margin:0}.path-lap figcaption{text-align:center;margin-top:10px}
.lap-chart{background:#0A1D43}.lap-chart svg{width:100%;height:auto;display:block}
.lap .win{border:0;border-radius:0;box-shadow:none;margin:0}
.chat-lap{max-width:640px}
.uso-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,4vw,56px);align-items:center;margin-bottom:8px}
.uso-foto{margin:0}.uso-foto img{width:100%;height:auto;display:block;border-radius:20px;box-shadow:0 20px 44px rgba(10,29,67,.25)}
.uso-foto figcaption{margin-top:8px;text-align:right;font-size:.72rem;color:var(--ink-2)}
@media(max-width:900px){.uso-intro{grid-template-columns:minmax(0,1fr)}.tilt-l,.tilt-r{transform:none}}
.dash-lap{padding:0 4% 0 1%}.chat-lap{margin-left:auto}

/* v26 · ajustes de Gonzalo (29-oct): cabecera futurista, textos 1 punto más chicos, secciones más armónicas */
.hero .lead{font-size:clamp(.9rem,1.1vw,1.03rem);line-height:1.45;margin-bottom:14px}
.hero .lead .ord{font-weight:800;color:#FFA500;font-size:1.06em}
.fx-in{background:linear-gradient(160deg,#10265F,#0A1A47);border:1px solid #3358B8;color:#fff;box-shadow:0 0 22px rgba(55,150,255,.18)}
.fx-in .fx-tag span{color:#FFA500}.fx-in .fx-tag em{color:#B9C6F2}
.fx-in .chips span{background:rgba(255,255,255,.07);border:1px solid #4A6BD0;color:#E5ECFF}
.fx-sys{background:linear-gradient(160deg,#1A3680,#0E2150);border:2px solid #FFA500;box-shadow:0 0 0 4px rgba(255,165,0,.16),0 0 28px rgba(255,165,0,.25)}
.sys-box img{width:84px;height:84px;border-radius:16px;box-shadow:0 0 18px rgba(255,165,0,.35)}
.sys-box{gap:14px}
.sys-lbl{display:block;font:700 .72rem/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#FFA500;margin-bottom:4px}
.sys-box strong{font-size:1.05rem}
.fx-out.hv-dash{background:transparent;padding:0;border:0;gap:6px}
.hv-dash .fx-tag{margin-bottom:2px}.hv-dash .fx-tag span{color:#FFA500}.hv-dash .fx-tag em{color:#B9C6F2;opacity:1}
.hv-dash svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 16px rgba(55,150,255,.35))}
@media (max-height:760px) and (min-width:901px){
  .sys-box img{width:62px;height:62px}.sys-lbl{font-size:.6rem}.sys-box strong{font-size:.86rem}
  .hv-dash svg{max-height:150px}
}
/* sección 1 */
.says li{font-size:1.14rem;padding:14px 16px 16px}.says .mono{font-size:.74rem}
/* sección 2: foto */
.owner-photo{margin:0;padding:0;overflow:hidden;border-radius:18px;max-width:380px;margin-left:auto}
.owner-photo img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;object-position:60% 30%}
.owner-photo figcaption{padding:10px 14px;font-size:.7rem}
/* impacto: CTA en banda oscura */
.cta-band.cta-dark{margin-top:26px}
/* ejemplo */
.ex3-ctx,.ex3-lead{margin:6px 0 4px;font-size:1.02rem}.ex3-lead{margin-top:20px;font-weight:600}
.n3 small{display:block;font-size:.8rem;color:var(--ink-2)}
.ex3-bar em{top:24px}
/* secciones 7 en adelante: más compactas para ver «el todo» */
#como,#informe,#tablero,#diferencia,#por-dentro,#uso,#semana,#cambia,#precio,#empezar{padding-top:clamp(32px,4vw,52px);padding-bottom:clamp(32px,4vw,52px)}
#como h2,#informe h2,#tablero h2,#diferencia h2,#por-dentro h2,#uso h2,#semana h2,#cambia h2,#precio h2,#empezar h2{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:12px}
#como .how-cards{gap:12px;margin-top:14px}
#como .how-cards article{padding:14px 16px}
#como .hi{width:40px;height:40px;margin-bottom:8px}#como .hi svg{width:22px;height:22px}
#como .how-cards h3{font-size:1.15rem}#como .how-cards p{font-size:.92rem;margin-bottom:8px}
#como .hchips li{font-size:.78rem}
#como .how-flow{margin-top:14px;gap:8px}#como .how-flow span{font-size:.88rem;padding:7px 12px}
#informe .sub{font-size:1.02rem;margin-bottom:4px}
#informe .tabs{margin-top:10px}
#informe .doc2 .d2{padding:10px 16px;gap:3px}
#informe .doc2 h4{font-size:.98rem}#informe .doc2 p,#informe .doc2 .d2-who{font-size:.93rem;line-height:1.4}
#informe .doc2 .doc-head h3{font-size:1.2rem}
#informe .note-ink{font-size:1.02rem;margin:10px 0}
#tablero .tab-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:20px}
#tablero .callouts li{font-size:.98rem;line-height:1.4}
.dash{zoom:.9}
.dash-lap{padding:0 2%}
#diferencia .diff-cards{gap:10px}#diferencia .diff-cards h3{font-size:1.1rem}#diferencia .diff-cards p{font-size:.92rem}
#diferencia .cmp td,#diferencia .cmp th{font-size:.9rem;padding:8px 10px}
#por-dentro .brain h3{font-size:1.1rem}#por-dentro .brain p{font-size:.9rem}
#uso .usage p,#uso .sub{font-size:.98rem}
#semana .loop p,#semana .mentor p{font-size:.98rem}
#cambia .stories article p,#cambia .stories article div{font-size:.95rem}#cambia .stories article b{font-size:1.1rem}
.cta-band{padding:14px 18px;margin-top:18px}.cta-band p{font-size:1.02rem}
.wants,.costs,.fit-sec,#plan,#pregunta{padding-top:clamp(36px,4.5vw,60px);padding-bottom:clamp(36px,4.5vw,60px)}
.cost-grid article h3{font-size:1.25rem}.cost-grid article p{font-size:.98rem}
.want-card h3{font-size:1.25rem}.want-card p{font-size:.98rem}

/* v27 · sección 1 más chica */
.says li{font-size:.96rem;line-height:1.35;padding:11px 14px 13px;gap:2px 12px}
.says .ico{width:34px;height:34px}.says .ico svg{width:20px;height:20px}.says .mono{font-size:.68rem;margin-bottom:4px}
.says{margin-top:10px}.closer{font-size:1.05rem}

/* v27 · de la sección 8 hacia abajo: todo más chico y armónico para ver «el todo» */
main>section:nth-of-type(n+9)>.wrap{zoom:.9}
main>section:nth-of-type(n+9){padding-top:clamp(26px,3vw,40px);padding-bottom:clamp(26px,3vw,40px)}
#informe .note-ink{font-size:.95rem;margin:6px 0}#informe .ex2-foot{margin:6px 0 0}
#informe .doc2 .d2{padding:8px 14px}
#tablero .dash{zoom:.82}
#tablero .tab-grid{align-items:center}
#diferencia .cmp td,#diferencia .cmp th{padding:6px 10px;font-size:.86rem}
#diferencia .diff-cards article{padding:12px 14px}
#diferencia .sub{margin:10px 0 6px}
#por-dentro .dentro-head svg{max-height:300px}
#por-dentro .brain{padding-top:10px}
#por-dentro .mentor-note{padding:12px 16px}
#por-dentro .flow li{padding:12px 14px}
#uso .uso-foto img{max-height:230px;object-fit:cover}
#uso .usage{margin-top:8px}
#semana .loop,#semana .tl{margin-top:12px}
/* v27b · sección 1: letra normal (no negrita) y más chica */
.says li{font-size:.9rem;font-weight:500;line-height:1.35;padding:9px 14px 11px;align-items:center}
.says .mono{font-size:.66rem}.says .ico{width:30px;height:30px}.says .ico svg{width:18px;height:18px}
.says li>:not(.ico):not(.mono){font-size:.9rem}
.closer{font-size:.98rem;margin-top:12px}
#pregunta ~ .x{}
.sec:nth-of-type(2) .hook{margin-top:14px;padding:12px 18px}.sec:nth-of-type(2) .hook span{font-size:1rem}
/* v27c · secciones 4 y 6 más compactas */
.want-card svg{max-height:110px;width:100%}
.want-card{padding:14px 16px}
.plan-grid .steps li{padding:12px 0}
#plan .sub{margin-bottom:0}
.ex3{margin-top:22px}

/* v28 · ajustes 29-oct (tarde): camino y ejemplo más chicos, cerebros parejos, esquema de uso, FAQ unificada */
.sub,.big-p,.lead2,.closer,.needs,.terms,.faq p,.doc2 p,.cost-grid p,.want-card p,.fit p{text-wrap:pretty}
/* camino */
#plan .steps p{font-size:1rem;line-height:1.45}
#plan .plan-grid .steps li{padding:9px 0}
#plan .steps .n{font-size:clamp(1.9rem,3.2vw,2.6rem)}
#plan .plan-grid{gap:clamp(16px,3vw,36px)}
#plan .path-lap{max-width:430px;margin-left:auto}
#plan h2{margin-bottom:8px}
/* ejemplo: cabe en una sola vista */
.ex3{padding:14px 20px;margin-top:16px}
.ex3 .example-head h3{font-size:1.2rem}
.ex3-ctx{font-size:.98rem;margin:2px 0}
.ex3-top{margin:4px 0 10px;gap:12px}
.n3 b{font-size:clamp(1.3rem,2.1vw,1.7rem)}.n3 span,.n3 small{font-size:.8rem}
.ex3-bar em{font-size:.76rem;top:20px}
.ex3-lead{margin:14px 0 6px;font-size:.92rem}
.ex3-tasks{margin:0;gap:10px}
.ex3-tasks li{padding:8px 12px}.ex3-tasks b{font-size:.92rem}.ex3-tasks strong{font-size:1.15rem}
.ex3-sum{margin:8px 0 0;font-size:.98rem}.ex2-foot{margin:2px 0 0;font-size:.76rem}
/* lo que nos diferencia: 5 cuadros */
#diferencia .diff-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
#diferencia .diff-cards article:first-child{border-color:#FFA500;box-shadow:0 0 0 2px rgba(255,165,0,.25)}
@media(max-width:1100px){#diferencia .diff-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#diferencia .diff-cards{grid-template-columns:minmax(0,1fr)}}
/* por qué podemos lograrlo: 5 cerebros parejos */
.dentro .chip{margin-bottom:6px}
.dentro .brains{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:18px}
.dentro .brain{background:#12285F;border:1px solid #2E4595;border-radius:14px;padding:14px 14px 16px;min-height:190px}
.dentro .brain h3{font-size:1.02rem;line-height:1.2;min-height:2.5em;margin-bottom:8px}
.dentro .brain p{font-size:.88rem;line-height:1.45;color:#C7D0F5}
.dentro .brain:last-child{border-color:#FFA500}
@media(max-width:1100px){.dentro .brains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.dentro .brains{grid-template-columns:minmax(0,1fr)}}
.dentro .mentor-note{margin-top:14px}
/* cómo se usa: esquema */
.uso{background:var(--bone,#F4F6FA)}
.arq{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.1fr) auto minmax(0,1fr);gap:8px;align-items:center;margin-top:18px}
.arq-box{background:#fff;border:1px solid #C9CFE3;border-radius:14px;padding:12px 14px;display:grid;gap:3px}
.arq-box small{font:700 .66rem/1.2 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:#B06A00}
.arq-box b{font-size:.98rem;line-height:1.2;color:#0A1D43}.arq-box span{font-size:.84rem;color:#5B6794;line-height:1.35}
.arq-s{border:2px solid #FFA500;background:#FFF8EA}
.arq-r{background:#0A1D43}.arq-r small{color:#FFA500}.arq-r b{color:#fff}.arq-r span.ok{color:#7FE3A0;font-weight:700}
.arq-ar{font-style:normal;color:#FFA500;font-size:1.5rem;font-weight:700}
.arq-stack{display:grid;gap:6px}
.arq-stack span{background:#fff;border:1px solid #C9CFE3;border-radius:10px;padding:7px 10px;font-size:.86rem;font-weight:600;color:#0A1D43;line-height:1.25}
.arq-stack em{display:block;font-style:normal;font-weight:400;font-size:.74rem;color:#5B6794}
.arq-note{margin:14px 0 0;font-size:.95rem;color:#5B6794;text-align:left}
@media(max-width:1000px){.arq{grid-template-columns:minmax(0,1fr)}.arq-ar{transform:rotate(90deg);justify-self:center}}
/* FAQ */
.faq-sub{margin:-4px 0 10px;font-size:1.05rem;color:var(--ink-2)}
.faq p{line-height:1.5}
.mentor img{width:150px;height:150px;object-fit:cover;object-position:50% 20%;border-radius:50%}
.mentor{gap:20px;align-items:center}

/* v30 · botón bajo las preguntas frecuentes */
.faq-cta{margin-top:22px;text-align:left}
.faq-cta .btn{font-size:1.05rem;padding:14px 26px}
@media(max-width:600px){.faq-cta .btn{width:100%;text-align:center}}

/* v31 · hero: marca más grande, título 1 pt menor; nota en una línea */
.hero h1{font-size:clamp(calc(2rem - 1.33px),calc(3.7vw - 1.33px),calc(3.5rem - 1.33px))}
.hero h1 .nm{font-size:.95em;margin-bottom:.2em}
@media(min-width:900px){#informe .note-ink{max-width:none;white-space:nowrap}}