/* ══════════════════════════════════════════════════════════════
   Curso Mobile IA · appcademy
   Monocromo estricto + verde terminal. Radio 8px (0 en botones).
   Bordes como box-shadow de 1px. Sombra sólida 8px en destacados.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg-dark:#0B0C0E;
  --card-dark:#111318;
  --deep:#0F1114;
  --phone-body:#16181D;
  --bg-light:#F4F5F7;
  --ink:#101216;
  --paper:#F2F3F5;
  --txt-dim:#9AA1AB;
  --txt-dim-l:#4A5260;
  --mono-dim:#7E8794;
  --mono-dim-l:#6B7482;
  --txt-soft:#C9CED6;
  --txt-soft-l:#343942;
  --green:#4ADE80;
  --green-soft:#86EFAC;
  --cyan:#67E8F9;
  --red:#F87171;
  --line-d:rgba(255,255,255,.16);
  --line-l:rgba(16,18,22,.16);
  --grot:'Archivo',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-dark);
  color:var(--paper);
  font-family:var(--grot);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
a:hover{opacity:.85}
h1,h2,p{margin:0}
button{font-family:inherit;background:none;border:0;color:inherit;cursor:pointer;text-align:left;padding:0}
[hidden]{display:none!important}
::selection{background:var(--paper);color:var(--bg-dark)}
.band-light ::selection{background:var(--ink);color:var(--paper)}

.mono{font-family:var(--mono)}
.green{color:var(--green)}
.cyan{color:var(--cyan)}
.red{color:var(--red)}
.dim{color:var(--mono-dim)}
.dim-l{color:var(--mono-dim-l)}
.grow{flex:1}
.strong{color:var(--ink);font-weight:700}
.strong-light{color:var(--paper)}
.sm{font-size:11.5px!important}
.w70{width:70%!important}

/* ── animaciones ─────────────────────────────────────────────── */
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes dashmove{to{stroke-dashoffset:-28}}
@keyframes fillbar{from{width:4%}to{width:96%}}
@keyframes typew{from{width:0}}
@keyframes lineIn{from{opacity:0;transform:translateY(5px)}}
@keyframes screenIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes popIn{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes tapring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes wfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-on{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}

/* ── bandas y layout ─────────────────────────────────────────── */
.band-dark{background:var(--bg-dark);color:var(--paper)}
.band-light{background:var(--bg-light);color:var(--ink)}
.sec{padding:clamp(72px,10vw,120px) 24px}
.sec-line-top{box-shadow:0 -1px 0 rgba(255,255,255,.08)}
.sec-rule{padding-top:0}
.sec-rule .wrap{box-shadow:0 -1px 0 rgba(16,18,22,.14);padding-top:clamp(72px,10vw,120px)}
.wrap{max-width:1120px;margin:0 auto}
.wrap.wide{max-width:1180px}
.wrap.narrow{max-width:880px}

.sec-head{display:flex;flex-direction:column;gap:18px;max-width:720px;margin-bottom:44px}
.overline{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
h2{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.lead{font-size:17.5px;line-height:1.65;color:var(--txt-dim-l);text-wrap:pretty}
.band-dark .lead,.dim-lead{color:var(--txt-dim)}

/* ── botones ─────────────────────────────────────────────────── */
.btn{
  display:inline-block;
  font-family:var(--grot);
  font-weight:700;font-size:15.5px;
  padding:15px 26px;
  border-radius:0;
  text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  cursor:pointer;border:none;
}
.btn-light{background:var(--paper);color:var(--bg-dark)}
.btn-light:hover{opacity:1;transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(255,255,255,.28)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{opacity:1;transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(16,18,22,.35)}
.btn-big{font-size:16.5px;padding:17px 34px;align-self:flex-start}
.btn-full{display:block;text-align:center}

/* ── nav ─────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(11,12,14,.96);
  box-shadow:0 1px 0 rgba(255,255,255,.12);
  transform:translateY(-110%);
  transition:transform .45s var(--ease);
}
.nav.is-on{transform:none}
.nav-in{max-width:1120px;margin:0 auto;padding:0 24px;height:58px;display:flex;align-items:center;gap:28px}
.nav-brand{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:-.01em;text-decoration:none}
.nav-brand span{opacity:.45}
.nav-gap{flex:1}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500}
.nav-links a{text-decoration:none}
.nav-cta{
  text-decoration:none;background:var(--paper);color:var(--bg-dark);
  font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:0;white-space:nowrap;
}
.nav-cta:hover{opacity:1;background:#FFFFFF}

/* ── hero ────────────────────────────────────────────────────── */
.hero{padding:clamp(64px,9vh,110px) 24px 72px}
.hero-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(30px,4vw,60px);align-items:center;
}
.hero-copy{display:flex;flex-direction:column;gap:34px;min-width:0}
.badge{
  display:inline-flex;align-self:flex-start;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  padding:9px 14px;border-radius:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
  color:var(--txt-soft);
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--paper);flex:none}
.hero-head{display:flex;flex-direction:column;gap:14px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mono-dim)}
.hero h1{
  font-size:clamp(34px,4.4vw,60px);
  line-height:1.04;letter-spacing:-.03em;font-weight:800;
  max-width:15ch;text-wrap:balance;
}
.hero-sub{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--txt-dim);max-width:640px;text-wrap:pretty}

.cta-block{display:flex;flex-direction:column;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:12.5px;color:var(--txt-soft)}
.chip{padding:7px 12px;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.mail-form{display:flex;flex-wrap:wrap;gap:10px;max-width:560px}
.mail-form input{
  flex:1 1 240px;min-width:0;
  font-family:var(--mono);font-size:15px;
  padding:15px 16px;background:transparent;color:inherit;
  border:none;border-radius:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.3);outline:none;
}
.band-light .mail-form input,.card .mail-form input{box-shadow:0 0 0 1px rgba(16,18,22,.35);color:var(--ink);font-size:14.5px;padding:14px 15px;flex-basis:180px}
.mail-form input:focus{box-shadow:0 0 0 2px var(--green)}
.card .mail-form input:focus{box-shadow:0 0 0 2px var(--ink)}
.mail-ok{
  font-family:var(--mono);font-size:15px;
  padding:15px 18px;border-radius:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.3);max-width:520px;
}
.card .mail-ok{box-shadow:0 0 0 1px rgba(16,18,22,.3);font-size:14px;padding:14px 16px}
.mail-note{font-family:var(--mono);font-size:12.5px;color:var(--mono-dim)}

.hero-stacks{display:flex;flex-direction:column;gap:16px;padding-top:18px}
.platforms{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;color:var(--txt-soft)}
.pf{display:flex;align-items:center;gap:10px}
.pf svg{flex:none}
.pf span:last-child{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;opacity:.72}
.hero-credit{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  box-shadow:0 -1px 0 rgba(255,255,255,.1);padding-top:26px;
  font-size:13px;font-family:var(--mono);
}
.hero-credit .strong-light strong{color:var(--paper)}
.hero-credit .dim{font-size:13px}
.hero-credit .mono{font-size:13px;color:var(--txt-soft)}

/* composición de artefactos del hero */
.hero-fig{min-width:0}
.stage-grid{
  position:relative;
  display:grid;grid-template-columns:minmax(180px,218px) auto minmax(180px,218px);
  justify-content:center;align-items:center;gap:16px;
}
.stage-glow{position:absolute;inset:-60px -20px;background:radial-gradient(520px 420px at 60% 45%,rgba(74,222,128,.10),transparent 70%);pointer-events:none}
.stage-col{display:flex;flex-direction:column;justify-content:space-between;gap:14px;height:452px;position:relative;z-index:2}
.art{background:var(--card-dark);border-radius:8px;box-shadow:0 0 0 1px var(--line-d);padding:13px 14px}
.art-hl{box-shadow:0 0 0 1px rgba(74,222,128,.45),0 0 0 4px rgba(74,222,128,.06)}
.art-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mono-dim);margin-bottom:8px}
.art-label.row{display:flex;justify-content:space-between;align-items:center}
.art-idea{font-size:14.5px;line-height:1.4;font-style:italic}
.art-mono{font-family:var(--mono);font-size:11.5px;line-height:1.85;color:var(--txt-soft)}
.art-score{font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.03em}
.art-score .green{font-size:16px}
.art-cyan{font-family:var(--mono);font-size:11.5px;color:var(--cyan);margin-top:6px}
.tag-sdd{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--bg-dark);background:var(--green);padding:2px 6px;border-radius:3px}
.tag-merged{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--bg-dark);background:var(--green);padding:3px 9px;border-radius:4px;margin-top:6px}

.hero-phone{
  width:212px;border-radius:42px;background:var(--phone-body);padding:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 26px 90px rgba(74,222,128,.14);
  position:relative;z-index:3;justify-self:center;
}
.hero-phone-screen{border-radius:32px;background:var(--deep);height:428px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 0;font-family:var(--mono);font-size:10px;color:var(--mono-dim)}
.ph-island{width:52px;height:15px;border-radius:8px;background:var(--phone-body);position:absolute;left:0;right:0;top:8px;margin:0 auto}
.ph-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px}
.ph-check{width:66px;height:66px;border-radius:50%;box-shadow:0 0 0 2.5px var(--green);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:32px}
.ph-check.big{width:72px;height:72px;font-size:34px;animation:popIn .6s var(--ease) both}
.ph-title{font-weight:700;font-size:18px}
.ph-meta{font-family:var(--mono);font-size:11px;color:var(--green);text-align:center;line-height:1.7}

.stamp{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(-3deg);z-index:4;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-align:center;line-height:1.35;
  background:var(--bg-dark);padding:9px 14px;
  box-shadow:0 0 0 1.5px var(--green);
}
.fig-caption{
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;
  margin-top:22px;font-family:var(--mono);font-size:11.5px;color:var(--mono-dim);
  box-shadow:0 -1px 0 rgba(255,255,255,.12);padding-top:14px;
}

/* ── cards genéricas ─────────────────────────────────────────── */
.card{background:#FFFFFF;border-radius:8px;box-shadow:0 0 0 1px var(--line-l);overflow:hidden}
.card.pad{padding:26px 24px;display:flex;flex-direction:column;gap:16px}
.card.sello{box-shadow:0 0 0 1px var(--ink),8px 8px 0 var(--ink)}
.card-head{padding:14px 18px;font-size:12.5px;letter-spacing:.06em;box-shadow:0 1px 0 rgba(16,18,22,.12)}
.card-tag{font-size:12.5px;letter-spacing:.06em}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:28px;align-items:start}

/* problema: chat comparado */
.chat{padding:20px 18px;display:flex;flex-direction:column;gap:14px}
.msg{padding:11px 15px;border-radius:8px;font-size:15px}
.msg.me{align-self:flex-end;max-width:85%;background:var(--ink);color:var(--paper)}
.msg.them{align-self:flex-start;max-width:92%;box-shadow:0 0 0 1px rgba(16,18,22,.14);color:var(--txt-soft-l)}
.chat-log{
  font-family:var(--mono);font-size:13px;line-height:2;
  padding:14px 16px;background:var(--bg-light);border-radius:8px;overflow-x:auto;
}
.chat-log div{white-space:nowrap}
.chat-log.bad{color:var(--txt-dim-l)}
.chat-log.good{color:var(--ink)}
.chat-log .hl{font-weight:700;color:var(--ink)}

/* ── workflow ────────────────────────────────────────────────── */
.wf-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:stretch;margin-bottom:36px}
.wf-rail{display:flex;flex-direction:column;gap:6px}
.wf-stage{
  display:flex;align-items:center;gap:13px;width:100%;
  border-radius:8px;padding:13px 14px;
  color:var(--txt-dim);
  box-shadow:0 0 0 1px transparent;
  transition:background .25s,box-shadow .25s,color .25s;
  min-height:44px;
}
.wf-stage:hover{background:#14171C}
.wf-stage.is-active{background:var(--card-dark);box-shadow:0 0 0 1px rgba(74,222,128,.4);color:var(--paper)}
.wf-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#3A3F47}
.wf-stage.is-done .wf-dot,.wf-stage.is-active .wf-dot{background:var(--green)}
.wf-n{font-family:var(--mono);font-size:12px;color:var(--mono-dim)}
.wf-stage.is-active .wf-n{color:var(--green)}
.wf-nm{flex:1;font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.wf-art{font-family:var(--mono);font-size:10.5px;color:var(--mono-dim)}

.wf-viewer{
  background:var(--card-dark);border-radius:10px;
  box-shadow:0 0 0 1px var(--line-d);
  overflow:hidden;display:flex;flex-direction:column;min-height:380px;
}
.wf-head{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;
  padding:13px 18px;box-shadow:0 1px 0 rgba(255,255,255,.1);
  font-size:11.5px;letter-spacing:.06em;
}
.wf-live{display:flex;align-items:center;gap:7px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.4s steps(1) infinite}
.wf-body{padding:22px;flex:1;display:flex;flex-direction:column}
.wf-panel{display:none;flex:1;flex-direction:column;gap:16px}
.wf-panel.is-active{display:flex;animation:wfIn .35s var(--ease)}
.wf-cap{margin-top:auto;display:flex;gap:12px;align-items:baseline;color:var(--txt-dim);font-size:14px}
.wf-cap .mono{font-size:12px;white-space:nowrap}

.term-doc{
  background:var(--deep);border-radius:8px;
  box-shadow:0 0 0 1px var(--line-d);
  padding:16px 18px;font-size:13px;line-height:1.95;color:var(--txt-soft);overflow-x:auto;
}
.term-doc.ring-red{box-shadow:0 0 0 1px rgba(248,113,113,.35);padding:14px 16px}
.cause-label{font-size:10.5px;letter-spacing:.1em;margin-bottom:6px}
.cause-txt{color:var(--txt-soft);font-family:var(--grot)}
.branch{display:inline-block;align-self:flex-start;font-size:11px;color:var(--txt-soft);padding:5px 10px;border-radius:6px;box-shadow:0 0 0 1px var(--line-d)}
.variants{display:flex;gap:12px;flex-wrap:wrap}
.variant{flex:1 1 150px;background:var(--deep);border-radius:8px;box-shadow:0 0 0 1px var(--line-d);padding:14px}
.variant.chosen{box-shadow:0 0 0 1px rgba(74,222,128,.5)}
.variant-head{display:flex;justify-content:space-between;font-size:11px;color:var(--mono-dim);margin-bottom:12px}
.vb{height:8px;border-radius:4px;background:#22262D;margin:6px 0}
.vb.strong{background:#3A3F47}
.vbox{height:34px;border-radius:6px;background:#191C22;margin-top:8px}
.vcta{height:16px;width:60%;border-radius:4px;background:var(--green);margin-top:10px}
.score-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.score{font-size:34px;font-weight:700;letter-spacing:-.03em}
.pill{display:inline-block;font-size:11px;color:var(--txt-soft);padding:5px 10px;border-radius:6px;box-shadow:0 0 0 1px var(--line-d)}
.pill.cyan{color:var(--cyan)}
.rev-meta{font-size:11px;margin-bottom:5px}
.rev-txt{color:var(--txt-soft);font-family:var(--grot)}
.rev-state{font-size:11px;font-weight:700;margin-top:6px}
.release{display:flex;align-items:center;gap:14px;background:var(--deep);border-radius:8px;box-shadow:0 0 0 1px var(--line-d);padding:16px}
.release-ph{width:34px;height:52px;border-radius:7px;box-shadow:0 0 0 1.5px var(--green);flex:none}
.release-t{font-weight:700}
.release-s{font-size:11px;margin-top:3px}
.chips-row{display:flex;gap:10px;flex-wrap:wrap}
.chips-row .tag-merged{margin-top:0;padding:5px 9px}
.wf-foot{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:11.5px}

/* ── qué vas a construir: terminal + teléfono ────────────────── */
.build-demo{
  display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,52px);
  align-items:center;justify-content:center;position:relative;
}
.demo-glow{position:absolute;inset:-70px -30px;background:radial-gradient(580px 440px at 70% 50%,rgba(74,222,128,.09),transparent 70%);pointer-events:none}
.terminal{
  position:relative;flex:1 1 520px;min-width:0;
  background:var(--card-dark);border-radius:8px;
  box-shadow:0 0 0 1px var(--line-d);overflow:hidden;
}
.terminal.on-light{background:var(--card-dark);color:var(--paper);flex:none;width:100%}
.terminal.on-light.sello{box-shadow:0 0 0 1px var(--ink),8px 8px 0 var(--ink)}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;box-shadow:0 1px 0 rgba(255,255,255,.1)}
.term-bar .mono{margin-left:10px;font-size:12px}
.tdot{width:11px;height:11px;border-radius:50%;background:#3A3F47}
.term-scroll{padding:18px;overflow-x:auto}
.term-lines{min-width:480px;min-height:440px;font-size:14px;line-height:2}
.term-lines .tl{white-space:pre}
.term-lines .tl span{display:inline-block;overflow:hidden;white-space:pre;vertical-align:bottom;max-width:100%}
.term-cursor{display:inline-block;width:8px;height:16px;background:var(--green);animation:blink 1.1s steps(1) infinite;vertical-align:middle}
.connector{flex:none}
.connector line{animation:dashmove 1.2s linear infinite}

.phone{
  position:relative;flex:none;width:344px;max-width:calc(100vw - 64px);
  border-radius:48px;background:var(--phone-body);padding:15px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),14px 14px 0 rgba(255,255,255,.08);
  transition:box-shadow .9s var(--ease);
}
.phone.is-glow{box-shadow:0 0 0 1px rgba(255,255,255,.22),14px 14px 0 rgba(255,255,255,.08),0 30px 110px rgba(74,222,128,.16)}
.phone-screen{border-radius:34px;background:var(--deep);height:655px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.phone .ph-status{padding:10px 18px 0;font-size:10.5px}
.phone .ph-island{width:56px;height:16px}
.ph-view{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--txt-dim);font-family:var(--mono);font-size:12.5px;animation:screenIn .5s var(--ease) both}
.ph-view[hidden]{display:none}
.idle-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 1.6s steps(1) infinite}
.ph-idle-txt{text-align:center;line-height:2;color:#4A5260}
.bar{width:180px;height:5px;border-radius:3px;background:#22262D;overflow:hidden}
.bar-fill{height:100%;width:4%;background:var(--green)}
.bar-fill.run{animation:fillbar 2.5s cubic-bezier(.4,.2,.3,1) forwards}
.app-icon{width:44px;height:44px;border-radius:10px;background:var(--paper);color:var(--bg-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--grot)}
.ph-view.ph-app{align-items:stretch;justify-content:flex-start;padding:34px 22px 22px;gap:18px;font-family:var(--grot);font-size:inherit;color:inherit}
.app-title{font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--paper)}
.app-rows{display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--txt-dim)}
.app-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;box-shadow:0 0 0 1px #262B33}
.app-row.total{box-shadow:none;font-weight:700;font-size:15px;color:var(--paper)}
.app-badge{width:30px;height:30px;border-radius:8px;background:#2F81F7;display:inline-flex;align-items:center;justify-content:center;color:#FFFFFF;font-weight:700;font-family:var(--grot);font-size:13px}
.pay-wrap{margin-top:auto;position:relative}
.pay-btn{background:#2F81F7;color:#FFFFFF;text-align:center;font-weight:700;font-size:16.5px;padding:17px;border-radius:12px;font-family:var(--grot)}
.tap-ring{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;box-shadow:0 0 0 2px var(--paper);animation:tapring 1s ease-out infinite}

.steps{
  display:flex;flex-wrap:wrap;align-items:center;row-gap:12px;justify-content:center;
  font-size:12.5px;margin-top:44px;
}
.step-wrap{display:flex;align-items:center}
.step{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:8px;
  box-shadow:0 0 0 1px var(--line-d);color:var(--mono-dim);opacity:.55;
  transition:color .5s,box-shadow .5s,background .5s,opacity .5s;
}
.step .mark{font-weight:700}
.step.is-act{color:var(--paper);box-shadow:0 0 0 1px rgba(255,255,255,.55);background:rgba(255,255,255,.06);opacity:1}
.step.is-done{color:var(--green);box-shadow:0 0 0 1px rgba(74,222,128,.5);opacity:1}
.step-line{display:inline-block;width:28px;height:1px;background:rgba(255,255,255,.14);transition:background .5s}
.step-line.is-done{background:rgba(74,222,128,.5)}

/* ── stacks ──────────────────────────────────────────────────── */
.stacks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.card.stack{padding:22px 18px;display:flex;flex-direction:column;gap:14px}
.stack-t{font-weight:800;font-size:17px;letter-spacing:-.01em}
.stack-lang{font-size:12px}
.stack-tools{font-size:12.5px;line-height:2;color:var(--txt-soft-l);box-shadow:0 -1px 0 rgba(16,18,22,.12);padding-top:12px}

/* ── temario ─────────────────────────────────────────────────── */
.mods{display:flex;flex-direction:column;gap:10px}
.mod{border-radius:8px;box-shadow:0 0 0 1px var(--line-d);background:var(--ink);overflow:hidden}
.mod-head{display:flex;align-items:baseline;gap:18px;padding:20px 22px;cursor:pointer;width:100%;transition:background .2s}
.mod-head:hover{background:#14171C}
.mod-n{font-size:13px}
.mod-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mod-t{font-weight:700;font-size:18px;letter-spacing:-.01em}
.mod-s{font-size:14.5px;color:var(--txt-dim)}
.mod-chev{font-size:16px}
.mod-body{overflow:hidden;max-height:0;transition:max-height .45s var(--ease)}
.mod-in{padding:4px 22px 24px;display:flex;flex-direction:column;gap:16px}
.mod-in p{font-size:15.5px;line-height:1.65;color:var(--txt-soft);max-width:640px}
.mod-bullets{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 20px}
.mod-bullets div{font-size:14.5px;color:var(--txt-dim);display:flex;gap:9px}
.mod-bullets span:first-child{color:var(--paper)}
.mod-deliver{font-size:13px;color:var(--paper);padding:12px 15px;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.22);align-self:flex-start}

/* ── semana / empresas cards ─────────────────────────────────── */
.week{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;align-items:stretch}
.week.three{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card.wk{padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.card.wk .mono{font-size:12px}
.card.wk.sello .mono{font-weight:700}
.wk-t{font-weight:700;font-size:17px}
.wk-d{font-size:14.5px;color:var(--txt-dim-l);line-height:1.6}
.wk-d strong{color:var(--ink)}
.empresa-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}
.empresa-cta .btn{font-size:15.5px;padding:15px 28px}
.empresa-cta .mono{font-size:12.5px}

/* ── para quién / checks ─────────────────────────────────────── */
.checks{display:flex;flex-direction:column;gap:13px;font-size:15.5px;line-height:1.55;color:var(--txt-soft-l)}
.checks > div{display:flex;gap:11px}
.checks .mono{flex:none}

/* ── preflight ───────────────────────────────────────────────── */
.preflight{min-width:520px;font-size:13.5px;line-height:2.1}
.preflight .soft{color:var(--txt-dim)}
.pf-ok{color:var(--paper);font-weight:700;margin-top:8px}

/* ── instructor ──────────────────────────────────────────────── */
.whoami{padding:26px 22px;display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start}
.who-photo{
  flex:none;width:168px;height:168px;border-radius:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
  background:repeating-linear-gradient(45deg,#14171C 0 6px,var(--deep) 6px 14px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  filter:grayscale(1) contrast(1.08);
}
.who-photo .mono{font-size:11px}
.who-data{flex:1 1 320px;min-width:0;font-size:14px;line-height:2.2}
.who-data a{color:var(--paper)}
.testis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:32px}
.testi{
  border-radius:8px;border:1.5px dashed rgba(255,255,255,.28);
  padding:22px 18px;min-height:96px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:12.5px;
}

/* ── precio ──────────────────────────────────────────────────── */
.precio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;align-items:start}
.precio-col{display:flex;flex-direction:column;gap:20px}
.card.pad.sello{padding:30px 28px;gap:18px}
.precio-claim{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.precio-p{font-size:15px;line-height:1.6;color:var(--txt-dim-l)}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price{font-size:64px;font-weight:700;letter-spacing:-.04em;line-height:1}
.price-sm{font-size:54px}
.price-claim{font-size:15.5px;font-weight:700}
.card .mono.dim-l{font-size:12.5px}
.dark-chip{font-size:13px;font-weight:700;padding:10px 14px;border-radius:8px;box-shadow:0 0 0 1px rgba(16,18,22,.3);align-self:flex-start;color:var(--ink)}
.precio-note{font-size:12.5px;color:var(--txt-soft-l);text-align:center}
.precio-foot{font-size:12.5px;box-shadow:0 -1px 0 rgba(16,18,22,.14);padding-top:14px}
.precio-foot.trust{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:11.5px}
.precio-c{display:flex;flex-direction:column;gap:20px}
.closed-card{position:relative;gap:12px}
.closed-stamp{position:absolute;top:22px;right:22px;font-size:11.5px;font-weight:700;letter-spacing:.08em;padding:6px 10px;box-shadow:0 0 0 1px var(--ink);transform:rotate(3deg)}
.closed-t{font-size:19px;font-weight:800;letter-spacing:-.01em}
.offer{gap:10px;padding:20px 22px}
.offer-q{font-size:15.5px;line-height:1.6;color:var(--txt-soft-l)}

/* ── garantía ────────────────────────────────────────────────── */
.card.garantia{padding:clamp(28px,4vw,46px);display:flex;flex-direction:column;gap:18px}
.garantia-t{font-size:clamp(22px,2.8vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.card.garantia .lead{max-width:620px;font-size:16.5px}
.card.garantia .mono{font-size:13px}

/* ── faq ─────────────────────────────────────────────────────── */
.faqs{display:flex;flex-direction:column;gap:8px}
.faq{border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.14);background:var(--ink);overflow:hidden}
.faq-head{display:flex;align-items:baseline;gap:14px;padding:17px 20px;cursor:pointer;width:100%;transition:background .2s}
.faq-head:hover{background:#14171C}
.faq-head > span:first-child{flex:1;font-weight:600;font-size:16.5px;letter-spacing:-.01em}
.faq-chev{font-size:15px}
.faq-body{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.faq-body p{padding:0 20px 20px;font-size:15.5px;line-height:1.7;color:var(--txt-soft);max-width:660px}

/* ── cierre / footer ─────────────────────────────────────────── */
.cierre{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.sec-line-top-in{box-shadow:0 -1px 0 rgba(255,255,255,.12);padding-top:clamp(72px,10vw,120px)}
.cierre h2{font-size:clamp(34px,5vw,62px);line-height:1.03;text-wrap:balance}
.cierre-fecha{font-size:14px;color:var(--txt-dim)}
.cierre-note{font-size:12.5px}
.footer{background:#08090B;color:var(--mono-dim);padding:36px 24px}
.footer.pad-bar{padding-bottom:110px}
.footer-in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;font-size:12.5px}
.footer-in a{text-decoration:none}
.footer-brand{color:var(--txt-soft);font-weight:700}

/* ── barra fija mobile ───────────────────────────────────────── */
.mobile-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:70;
  background:rgba(11,12,14,.97);
  box-shadow:0 -1px 0 var(--line-d);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
}
.mobile-bar .btn{font-size:16px;padding:15px}
.mobile-bar[hidden]{display:none}

/* anclas con nav fija */
#temario,#precio,#faq{scroll-margin-top:64px}

/* ══════════════ responsive ══════════════ */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .wf-grid{grid-template-columns:1fr}
}
@media (max-width:780px){
  .nav-links{display:none}
  .terminal{flex-basis:100%}
  .connector{display:none}
}
@media (max-width:640px){
  .stage-grid{grid-template-columns:1fr}
  .stage-col{height:auto;justify-self:stretch}
  .hero-phone{justify-self:center}
  .stamp{position:static;transform:rotate(-3deg);margin:10px auto 0;display:inline-block;align-self:center}
  .stage-grid{justify-items:center}
  .stage-col{width:100%;max-width:420px}
  .price{font-size:52px}
  .term-lines{min-width:420px;min-height:380px;font-size:12.5px}
  .preflight{min-width:0;font-size:12px}
  .preflight div{white-space:nowrap}
}