/* ══════════════════════════════════════════════════════════════
   Landing del directo · SDD con IA · appcademy
   Hoja independiente de styles.css: esta página usa un subconjunto
   chico del sistema y es la que recibe el trafico de anuncios, asi
   que no le cargamos el CSS completo del curso.
   Mismos tokens, mismos idiomas: bordes como box-shadow de 1px,
   radio 8px, monocromo + verde terminal.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg-dark:#0A0C11;
  --card-dark:#111318;
  --deep:#0E1116;
  --bg-light:#F4F5F7;
  --ink:#101216;
  --paper:#F2F3F5;
  --txt-soft:#C9CED6;
  --txt-bright:#E8EAED;
  --mono-dim:#7E8794;
  --mono-dim-l:#6B7482;
  --txt-dim:#9AA1AB;
  --txt-dim-l:#4A5260;
  --green:#4ADE80;
  --green-ink:#15803D;
  --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}
h1,h2,p{margin:0}
button{font-family:inherit}
[hidden]{display:none!important}
img{max-width:100%}
::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)}
.dim{color:var(--mono-dim)}

/* ── animaciones ─────────────────────────────────────────────── */
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ctaPulse{0%{outline:0 solid rgba(74,222,128,.55)}70%{outline:12px solid rgba(74,222,128,0)}100%{outline:0 solid rgba(74,222,128,0)}}
@keyframes rvIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

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

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

/* ── botones ─────────────────────────────────────────────────── */
.btn{
  display:inline-block;text-decoration:none;text-align:center;
  font-family:var(--grot);font-size:16.5px;font-weight:700;
  padding:15px 26px;border:0;border-radius:7px;cursor:pointer;
}
.btn-green{background:var(--green);color:var(--bg-dark)}
.btn-pulse{animation:ctaPulse 3s cubic-bezier(.4,0,.2,1) infinite}
.btn-full{display:block;width:100%}

/* ══════════ HERO ══════════ */
.hero{
  background:
    radial-gradient(900px 520px at 75% -10%,rgba(74,222,128,.13),transparent 65%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 56px),
    var(--bg-dark);
  padding:clamp(36px,5vw,56px) 24px clamp(40px,5vw,60px);
}
.hero-in{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:48px}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
  gap:clamp(32px,6vw,90px);align-items:center;
}
.hero-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;
  padding:9px 14px;border-radius:7px;box-shadow:0 0 0 1px rgba(74,222,128,.5);
  color:var(--green);
}
.badge-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);animation:blink 1.4s steps(1) infinite;flex:none;
}

.hero h1{
  font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-.035em;
  font-weight:900;text-wrap:balance;
}
.hero h1 .green{text-shadow:0 0 40px rgba(74,222,128,.5)}
.hero-h1-sub{display:inline-block;margin-top:.32em;font-size:.56em;font-weight:700;line-height:1.32;letter-spacing:-.015em;color:var(--txt-soft)}
.hero-sub{font-size:18px;line-height:1.55;color:var(--txt-dim);max-width:50ch;text-wrap:pretty}

.hero-when{
  align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-family:var(--mono);font-size:13.5px;font-weight:700;letter-spacing:.08em;
  color:var(--paper);padding:14px 0;
  box-shadow:0 -1px 0 var(--line-d),0 1px 0 var(--line-d);
}

/* ── figura del hero ─────────────────────────────────────────── */
.hero-fig{display:flex;flex-direction:column;gap:16px;min-width:0}/* abajo-izquierda{bottom:8px;left:6px;width:min(250px,60%);transform:rotate(3deg)}

/* ══════════ BLOQUE DE ALTA (form + cuándo) ══════════ */
.cta-band{
  display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--bg-light);color:var(--ink);border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px var(--line-d),0 30px 80px rgba(0,0,0,.5);
  scroll-margin-top:24px;
}
.cta-form-side{padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.cta-h{font-weight:800;font-size:clamp(24px,2.6vw,31px);letter-spacing:-.025em;line-height:1.1}
.cta-form,.cta-band .alta-ok{display:flex;flex-direction:column;gap:14px}
.cta-gift{
  align-self:flex-start;font-size:12.5px;font-weight:700;
  color:var(--green-ink);background:rgba(74,222,128,.14);
  padding:7px 11px;border-radius:6px;
}
.cta-band input{
  font-family:var(--mono);font-size:16px;padding:14px 15px;
  background:#fff;color:var(--ink);border:0;border-radius:7px;
  box-shadow:0 0 0 1px rgba(16,18,22,.25);outline:none;width:100%;
}
.cta-band input:focus{box-shadow:0 0 0 2px var(--green-ink)}
.cta-band .btn{font-size:17px;padding:16px;width:100%}
.cta-note{font-family:var(--mono);font-size:12px;color:var(--mono-dim-l)}
.cta-ok-h{font-weight:800;font-size:clamp(24px,2.6vw,31px);letter-spacing:-.025em;color:var(--green-ink)}
.cta-ok-p{font-size:16.5px;color:var(--txt-dim-l);line-height:1.6}
a.cta-ok-tip:hover{box-shadow:0 0 0 1px var(--green-ink);color:var(--green-ink)}

.cta-when{
  background:var(--ink);color:var(--paper);padding:clamp(26px,4vw,36px);
  display:flex;flex-direction:column;gap:14px;justify-content:center;
}
.tz-list{display:flex;flex-direction:column}
.tz-row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:10px 0;
  box-shadow:0 -1px 0 rgba(255,255,255,.08);
}
.tz-pais{font-size:16px;color:var(--txt-bright);font-weight:500;min-width:0}
.tz-tag{font-family:var(--mono);font-size:12.5px;color:var(--green);font-weight:700;flex:none}
.tz-hora{margin-left:auto;font-family:var(--mono);font-size:18px;font-weight:700;color:var(--txt-bright);flex:none}
.tz-row.is-mine .tz-pais,.tz-row.is-mine .tz-hora{color:var(--green);font-weight:800}
.tz-tag:empty{display:none}

.cd-wrap{display:flex;flex-direction:column;gap:3px;box-shadow:0 -1px 0 rgba(255,255,255,.08);padding-top:12px}
.cd-label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mono-dim)}
.cd-val{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--green)}
.cd-caret{display:inline-block;width:10px;height:20px;background:var(--green);animation:blink 1.1s steps(1) infinite;vertical-align:middle}

.cal-row{display:flex;gap:8px}
.cal-btn{
  flex:1;text-decoration:none;text-align:center;cursor:pointer;
  background:transparent;border:0;
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  padding:12px 10px;border-radius:7px;
  box-shadow:0 0 0 1px rgba(255,255,255,.28);color:var(--paper);
}
.cal-btn:hover{box-shadow:0 0 0 1px var(--green);color:var(--green)}
.cal-btn small{color:var(--mono-dim);font-weight:400;font-size:inherit}

/* ══════════ CINTA ══════════ */
.marquee{
  overflow:hidden;background:var(--bg-dark);
  box-shadow:0 -1px 0 rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.12);
  padding:13px 0;
}
.marquee-track{display:flex;width:max-content;animation:marquee 26s linear infinite}
.marquee-track span{
  display:inline-block;white-space:nowrap;font-family:var(--mono);
  font-size:13.5px;font-weight:700;letter-spacing:.12em;color:var(--txt-dim);
}
.marquee .sep{padding:0 22px;color:#3A3F47}

/* ══════════ SECCIONES ══════════ */
.sec{padding:clamp(56px,7vw,84px) 24px;position:relative;overflow:hidden}
.band-dark{background:var(--bg-dark);color:var(--paper)}
.band-light{background:var(--bg-light);color:var(--ink)}
.sec-num{
  position:absolute;top:30px;right:12px;font-family:var(--mono);
  font-size:clamp(90px,12vw,150px);font-weight:700;line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);
  pointer-events:none;user-select:none;
}
.band-light .sec-num{-webkit-text-stroke-color:rgba(16,18,22,.09)}
.wrap{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.sec-head{display:flex;flex-direction:column;gap:14px}
.overline{
  display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mono-dim);
}
.overline::before{content:'';width:18px;height:2px;background:var(--green);flex:0 0 auto}
.band-light .overline{color:var(--mono-dim-l)}
.band-light .overline::before{background:var(--ink)}
.sec h2{font-size:clamp(26px,3.4vw,38px);line-height:1.08;letter-spacing:-.025em;font-weight:800}
.lead{font-size:17.5px;line-height:1.65;color:var(--txt-dim);max-width:62ch;text-wrap:pretty}
.band-light .lead{color:var(--txt-dim-l)}
.inline-code{
  font-family:var(--mono);font-size:15px;background:#fff;
  box-shadow:0 0 0 1px rgba(16,18,22,.18);padding:2px 8px;border-radius:5px;white-space:nowrap;
}

/* ── ledger ──────────────────────────────────────────────────── */
.ledger{display:flex;flex-direction:column;gap:10px}
.ledger-row{
  display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:8px 16px;align-items:baseline;
  background:#fff;border-radius:8px;box-shadow:0 0 0 1px var(--line-l);padding:15px 18px;
}
.ledger-row.head{
  background:none;box-shadow:none;padding:0 18px 4px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--mono-dim-l);
}
.ledger-row.head .ledger-con{color:var(--green-ink)}
.ledger-q{font-weight:700;font-size:17.5px;letter-spacing:-.01em}
.ledger-sin{font-family:var(--mono);font-size:14.5px;color:var(--mono-dim-l)}
.ledger-con{font-family:var(--mono);font-size:14.5px;color:var(--green-ink);font-weight:700}

/* ── agenda ──────────────────────────────────────────────────── */
.agenda{display:flex;flex-direction:column}
.ag-row{
  display:grid;grid-template-columns:92px 1fr;gap:18px;padding:18px 4px;
  box-shadow:0 -1px 0 rgba(255,255,255,.1);align-items:baseline;
}
.ag-t{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--cyan)}
.ag-txt{display:flex;flex-direction:column;gap:5px}
.ag-nm{font-weight:800;font-size:20px;letter-spacing:-.015em}
.ag-d{font-size:16.5px;line-height:1.6;color:var(--txt-dim)}
.ag-chips{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--mono);font-size:13.5px;color:var(--mono-dim)}

/* ── quién lo da ─────────────────────────────────────────────── */
.quien-grid{
  max-width:1000px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,460px);
  gap:clamp(24px,4vw,48px);align-items:center;
}
.terminal{background:var(--ink);color:var(--paper);border-radius:10px;box-shadow:0 0 0 1px rgba(16,18,22,.2);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;box-shadow:0 1px 0 rgba(255,255,255,.1)}
.tdot{width:9px;height:9px;border-radius:50%;background:#3A3F47}
.term-bar .mono{margin-left:8px;font-size:12.5px;color:var(--mono-dim)}
.whoami{padding:18px 18px 6px;display:flex;gap:20px;align-items:flex-start}
/* los comandos se "ejecutan" en cascada cuando la terminal entra en pantalla */
.who-line{opacity:0}
.rv-on .who-line{animation:rvIn .45s var(--ease) both}
.rv-on .who-line:nth-child(1){animation-delay:.08s}
.rv-on .who-line:nth-child(2){animation-delay:.26s}
.rv-on .who-line:nth-child(3){animation-delay:.50s}
.rv-on .who-line:nth-child(4){animation-delay:.68s}
.rv-on .who-line:nth-child(5){animation-delay:.92s}
.rv-on .who-line:nth-child(6){animation-delay:1.10s}
.who-cmd{color:var(--paper)}
.who-cmd .dim{color:var(--mono-dim)}
.who-out{color:var(--txt-dim)}
.who-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 0;opacity:0}
.rv-on .who-chips{animation:rvIn .45s var(--ease) 1.28s both}
.who-chip{font-family:var(--mono);font-size:12px;padding:7px 12px;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.16);color:var(--txt-dim)}
.who-chip b{color:var(--cyan);font-weight:700}
.who-chip.plain b{color:var(--txt-bright)}
.who-photo{
  position:relative;flex:none;width:118px;height:118px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  background:#16181D;font-family:var(--mono);font-size:9px;color:var(--mono-dim);
  text-align:center;line-height:1.4;padding:4px;
}
/* la foto tapa el texto de reserva; si el archivo no está, queda el texto */
.who-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.who-data{flex:1;min-width:0;font-family:var(--mono);font-size:13.5px;line-height:1.9}
.who-data .row-ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── FAQ ─────────────────────────────────────────────────────── */
/* El min() no es adorno: con minmax(420px,1fr) a secas la pista mide 420
   aunque el contenedor mida 342, y las tarjetas se salen por la derecha.
   Con min(420px,100%) la pista nunca supera al contenedor. */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:12px}
.faq-card{
  background:var(--ink);border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.14);
  padding:20px 18px;display:flex;flex-direction:column;gap:8px;
}
.faq-q{font-weight:800;font-size:18px;letter-spacing:-.015em;color:var(--paper)}
.faq-a{font-size:16px;line-height:1.6;color:var(--txt-dim)}

/* ── intro de la comparativa ─────────────────────────────────── */
.ledger-intro{font-family:var(--mono);font-size:14px;font-weight:700}

/* ── pipeline (spec→code→build→tests→device→evidence) ──────────── */
.pipeline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 5px}
.pipe-step{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;
  padding:10px 14px;border-radius:7px;background:#fff;
  box-shadow:0 0 0 1px var(--line-l);
}
.pipe-step.pipe-last{color:var(--green-ink);background:rgba(74,222,128,.09);box-shadow:0 0 0 1px rgba(21,128,61,.4)}
.band-dark .pipe-step{background:transparent;color:var(--paper);box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.band-dark .pipe-step.pipe-last{color:var(--green);background:rgba(74,222,128,.1);box-shadow:0 0 0 1px rgba(74,222,128,.4)}
.pipe-arrow{color:var(--mono-dim-l);font-size:13px}
.band-dark .pipe-arrow{color:var(--mono-dim)}

/* ── callout: una línea que se destaca del resto del copy ───────── */
.callout{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:15px 19px;border-radius:8px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:13.5px;line-height:1.5;
}
.callout b{color:var(--green);font-weight:700}
.callout .dim{color:var(--mono-dim)}
.band-dark .callout{background:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.18)}

/* ── chips reutilizables sobre banda oscura ─────────────────────── */
.mobile-tags{display:flex;flex-wrap:wrap;gap:8px}

/* ── qué te llevas ───────────────────────────────────────────── */
.sec-llevas{background:radial-gradient(700px 380px at 12% -10%,rgba(251,191,36,.07),transparent 60%),var(--bg-light)}
.sec-llevas .wrap{max-width:1280px}
.llevas-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:stretch}
/* minmax(0,1fr) y no 1fr a secas: con "1fr" (minmax(auto,1fr)) el contenido
   más ancho de la tarjeta puede estirar la pista por encima del contenedor
   y desbordar en móvil — encontrado por Matias en la versión anterior. */
@media (max-width:860px){.llevas-grid{grid-template-columns:minmax(0,1fr)}}

.llevas-card{border-radius:10px;padding:24px 26px;display:flex;flex-direction:column;gap:16px}
.llevas-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.1em;padding:7px 11px;border-radius:6px}
.llevas-h{font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.15}
.llevas-p{font-size:16px;line-height:1.6;color:var(--txt-dim-l)}
.llevas-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none;animation:dPulseRing 2.4s ease-out infinite}

/* -- antes del directo: el regalo -- */
.llevas-gift{
  position:relative;overflow:hidden;color:var(--paper);
  background:linear-gradient(140deg,#14100A 0%,var(--bg-dark) 55%);
  box-shadow:0 0 0 1px rgba(251,191,36,.3);
}
.llevas-gift .llevas-p{color:var(--txt-dim)}
.llevas-bar{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;box-shadow:0 1px 0 rgba(255,255,255,.08);font-size:11.5px;color:var(--mono-dim)}
.llevas-bar .amber{color:var(--amber)}
.llevas-tag.amber{color:var(--amber);box-shadow:0 0 0 1px rgba(251,191,36,.4)}
.llevas-body{display:flex;flex:1;gap:28px;align-items:center;flex-wrap:wrap}
.llevas-text{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:12px}
.llevas-tags{display:flex;gap:10px;flex-wrap:wrap;padding-top:14px;box-shadow:0 -1px 0 rgba(255,255,255,.08)}
.llevas-tags span{font-family:var(--mono);font-size:11.5px;color:var(--txt-soft);padding:7px 12px;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.13)}

.gift-file{
  position:relative;flex:none;width:min(246px,100%);border-radius:7px;overflow:hidden;
  background:var(--card-dark);box-shadow:0 0 0 1px rgba(251,191,36,.35),0 22px 50px rgba(0,0,0,.55);
  transform:rotate(2deg);
}
.gift-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;box-shadow:0 1px 0 rgba(255,255,255,.09)}
.gift-bar .mono{margin-left:4px;font-size:11.5px;color:var(--amber)}
.gift-body{padding:13px 15px 16px;font-size:12.5px;line-height:1.9;color:var(--txt-soft)}
.gift-body .dim{color:var(--mono-dim)}
.gift-file::after{
  content:'';position:absolute;top:0;bottom:0;width:44px;
  background:linear-gradient(90deg,transparent,rgba(251,191,36,.24),transparent);
  animation:dShine 3.4s ease-in-out infinite;pointer-events:none;
}

.gift-foot{
  display:flex;align-items:center;gap:10px;border-radius:8px;
  background:var(--card-dark);box-shadow:0 0 0 1px rgba(251,191,36,.25);
  padding:12px 14px;font-size:12px;color:var(--txt-soft);
}
.gift-foot .dim{color:var(--mono-dim)}

/* -- después del directo: el certificado -- */
.llevas-cert{background:var(--bg-dark);color:var(--paper);box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.llevas-cert .llevas-p{color:var(--txt-dim)}
.llevas-tag.cyan{color:var(--cyan);box-shadow:0 0 0 1px rgba(103,232,249,.4)}

.cert-frame{
  position:relative;overflow:hidden;border-radius:8px;background:var(--card-dark);
  box-shadow:0 0 0 1px rgba(255,255,255,.09);padding:18px 22px 16px;
  display:flex;flex-direction:column;gap:16px;
}
.cert-frame::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:48px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.14),transparent);
  animation:cShine 8s ease-in-out infinite;
}
.cert-top{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:1}
.cert-brand{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--cyan)}
.cert-brand i{width:21px;height:21px;border-radius:5px;background:var(--cyan);color:var(--bg-dark);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:700}
.cert-badge{
  font-size:9px;font-weight:700;letter-spacing:.07em;color:var(--cyan);
  padding:5px 10px;border-radius:12px;box-shadow:0 0 0 1px rgba(103,232,249,.55);white-space:nowrap;
  animation:cChip 8s cubic-bezier(.16,1,.3,1) infinite;
}
.cert-mid{position:relative;text-align:center;padding:2px 38px;z-index:1}
.cert-brace{
  position:absolute;top:50%;transform:translateY(-52%);font-family:var(--mono);
  font-size:clamp(70px,9vw,102px);font-weight:400;color:#2B2F37;line-height:1;pointer-events:none;
  animation:cBrace 8s cubic-bezier(.16,1,.3,1) infinite;
}
.cert-brace-l{left:0}
.cert-brace-r{right:0}
.cert-label{font-size:10px;color:var(--mono-dim);letter-spacing:.04em}
.cert-course{font-weight:800;font-size:15.5px;letter-spacing:.01em;margin-top:5px}
.cert-sub{font-size:10.5px;color:var(--txt-dim);margin-top:2px}
.cert-rule{width:40px;height:1px;background:rgba(255,255,255,.18);margin:9px auto}
.cert-to{font-size:9px;letter-spacing:.25em;color:var(--mono-dim)}
.cert-name{font-weight:800;font-size:23px;letter-spacing:-.02em;margin-top:5px}
.cert-name-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:cName 8s steps(10,end) infinite}
.cert-for{font-size:11px;color:var(--txt-dim);margin-top:4px}
.cert-bottom{display:flex;align-items:flex-end;justify-content:space-between;position:relative;z-index:1}
.cert-sign{display:flex;flex-direction:column;gap:1px}
.cert-sign-name{font-weight:700;font-size:12px}
.cert-sign-role{font-family:var(--mono);font-size:9.5px;color:var(--mono-dim)}
.cert-verify{display:inline-flex;align-items:flex-end;gap:8px}
.cert-meta{display:flex;flex-direction:column;gap:1px;text-align:right;font-size:9.5px;color:var(--mono-dim);line-height:1.6}
.cert-qr{
  display:grid;grid-template-columns:repeat(5,4px);grid-auto-rows:4px;gap:1px;
  padding:3px;border-radius:3px;box-shadow:0 0 0 1px rgba(103,232,249,.4);
  animation:cQr 8s linear infinite;
}
.cert-qr i{background:transparent}
.cert-qr i:nth-child(1),.cert-qr i:nth-child(2),.cert-qr i:nth-child(4),.cert-qr i:nth-child(5),
.cert-qr i:nth-child(6),.cert-qr i:nth-child(8),.cert-qr i:nth-child(10),.cert-qr i:nth-child(11),
.cert-qr i:nth-child(12),.cert-qr i:nth-child(13),.cert-qr i:nth-child(15),.cert-qr i:nth-child(17),
.cert-qr i:nth-child(19),.cert-qr i:nth-child(20),.cert-qr i:nth-child(21),.cert-qr i:nth-child(23),
.cert-qr i:nth-child(24){background:var(--cyan)}

.cred-card{
  display:flex;align-items:center;gap:10px;border-radius:8px;background:var(--card-dark);
  box-shadow:0 0 0 1px rgba(255,255,255,.09);padding:12px 14px;
  animation:cRow 8s cubic-bezier(.16,1,.3,1) infinite;
}
.cred-icon{
  flex:none;width:30px;height:30px;border-radius:6px;background:var(--cyan);color:var(--bg-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;
}
.cred-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cred-name{font-weight:700;font-size:12px;line-height:1.3}
.cred-org{font-size:9.5px;color:var(--mono-dim)}
.cred-btn{
  flex:none;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--cyan);
  padding:8px 11px;border-radius:6px;box-shadow:0 0 0 1px rgba(103,232,249,.5);white-space:nowrap;
}

/* ── cierre ──────────────────────────────────────────────────── */
.cierre{
  background:radial-gradient(700px 420px at 50% 120%,rgba(74,222,128,.12),transparent 65%),var(--bg-dark);
  padding:clamp(56px,7vw,90px) 24px;
}
.cierre-in{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
.cierre h2{font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.cierre-meta{font-family:var(--mono);font-size:14px;color:var(--txt-dim)}
.cierre-cta{align-self:center;min-width:min(340px,100%);font-size:17px;padding:17px 34px}
.cierre-ok{
  font-family:var(--mono);font-size:15.5px;padding:14px 18px;border-radius:7px;
  box-shadow:0 0 0 1px rgba(74,222,128,.5);color:var(--green);
}
/* ── footer ──────────────────────────────────────────────────── */
.footer{background:#08090B;color:var(--mono-dim);padding:28px 24px}
.footer-in{
  max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 20px;
  align-items:center;font-family:var(--mono);font-size:12.5px;
}
.footer-in a{text-decoration:none}
.footer-brand{color:var(--txt-soft);font-weight:700}
.footer-in .grow{margin-left:auto}

/* ── barra fija mobile ───────────────────────────────────────── */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,12,14,.92);backdrop-filter:blur(10px);
  box-shadow:0 -1px 0 var(--line-d);
  display:none;
}
@media (max-width:860px){.quien-grid,.cta-band{grid-template-columns:1fr}
  /* En movil el alta va antes que la figura: el teléfono la empujaba muy por
     debajo del fold, y la tabla de horarios es lo que más necesita ver alguien
     que llega de un anuncio. Con display:contents el grid del hero se disuelve
     y sus hijos entran en la columna de .hero-in, que sí los puede reordenar. */
  .hero-grid{display:contents}
  .hero-copy{order:1;gap:14px}
  .cta-band{order:2}
  .hero-fig{order:3}
  .hero-in{gap:20px}
  /* sin el grid en stretch, el vídeo ya no hereda alto del form: en
     columna necesita su propia proporción para no colapsar a 0 */
  .hero-video{flex:none;aspect-ratio:16/9;min-height:0}
  .mobile-bar{display:block}
  body{padding-bottom:76px}
  /* la descripción larga no tiene que verse "antes del scroll": lo que
     importa arriba es el badge, el titular, la fecha y el CTA, así que
     aquí se achica para no empujar el formulario fuera de pantalla. */
  .hero-sub{font-size:15px;line-height:1.5}
  .hero-when{padding:10px 0}
  .cta-form-side{padding:20px}
}
@media (max-width:560px){
  .ledger-row{grid-template-columns:1.1fr .9fr 1fr;padding-left:13px;padding-right:13px}
  .ledger-row>span{font-size:11.5px}
  .ledger-row>span.ledger-q{font-size:13.5px}
  .ledger-row.head{padding-left:13px;padding-right:13px}
  .ag-row{grid-template-columns:64px 1fr;gap:12px}
  .ag-nm{font-size:18px}
  .ag-d{font-size:15.5px}
  .tz-pais{font-size:14.5px}
  .tz-hora{font-size:16px}
  /* En angosto la lista de países wrapea y en flex se descolocaba todo (el
     tag en medio del texto, la hora saltando de línea). Con grid, país y hora
     quedan clavados en la primera línea y el tag baja a la suya. */
  .tz-row{
    display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"pais hora" "tag tag";
    column-gap:10px;row-gap:2px;
  }
  .tz-pais{grid-area:pais}
  .tz-hora{grid-area:hora;margin-left:0}
  .tz-tag{grid-area:tag}
  .cd-val{font-size:22px}
}


/* ── v2 ─────────────────────────────────────────────── */
:root{--amber:#FBBF24;--amber-ink:#92400E;--cyan:#67E8F9}
@keyframes cBrace { 0%, 4% { opacity: 0; transform: translateY(-52%) scale(.82); } 20%, 100% { opacity: 1; transform: translateY(-52%) scale(1); } }
@keyframes cChip  { 0%, 40% { opacity: 0; transform: scale(.7); } 48% { opacity: 1; transform: scale(1.12); } 53%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cName  { 0%, 10% { width: 0; } 34%, 100% { width: 100%; } }
@keyframes cQr    { 0%, 52% { opacity: .15; } 64%, 100% { opacity: 1; } }
@keyframes cRow   { 0%, 62% { opacity: 0; transform: translateY(12px); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes cShine { 0%, 74% { transform: translateX(-140%) skewX(-18deg); } 94%, 100% { transform: translateX(360%) skewX(-18deg); } }
@keyframes dPulseRing { 0% { box-shadow: 0 0 0 0 rgba(251,191,36,.45); } 70% { box-shadow: 0 0 0 14px rgba(251,191,36,0); } 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); } }
@keyframes dShine { 0% { transform: translateX(-250%) skewX(-18deg); } 55%, 100% { transform: translateX(700%) skewX(-18deg); } }
/* cian = tiempo y datos: la HORA, no los separadores de al lado */
.hero-when .green{color:var(--mono-dim)}
#hero-hora,.mq-hora,#cierre-hora{color:var(--cyan)}
.tz-row.is-mine .tz-pais,.tz-row.is-mine .tz-hora,.tz-tag{color:var(--cyan)}
.cd-val{color:var(--cyan)}
.cd-caret{background:var(--cyan)}
.cal-btn:hover{box-shadow:0 0 0 1px var(--cyan);color:var(--cyan)}
/* ambar = lo que te llevas. Hilo: pildora del formulario -> REGALO
   DESBLOQUEADO del alta-ok -> seccion 03. */
.cta-gift{color:var(--amber-ink);background:rgba(251,191,36,.20)}
.hero-video{position:relative;flex:1;min-height:220px;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#1C2027 0%,#0D0F12 100%);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 26px 70px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.hero-video::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 50% 42%,rgba(74,222,128,.12),transparent 70%)}
.hv-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hv-play{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(10,12,17,.08),rgba(10,12,17,.5));
  border:0;padding:0;cursor:pointer;
}
.hv-btn{width:74px;height:74px;border-radius:50%;background:rgba(242,243,245,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.45);font-size:26px;color:var(--bg-dark);padding-left:5px;transition:transform var(--hov)}
.hv-play:hover .hv-btn{transform:scale(1.06)}
.hero-video.is-playing::before{display:none}
/* ─ hero centrado y compacto: titular al medio, form | video, horarios en barra ─ */
.hero-in{gap:28px}
.hero-grid{grid-template-columns:1fr 1.08fr;gap:24px clamp(24px,3vw,40px);align-items:stretch}
.hero-copy{grid-column:1/-1;align-items:center;text-align:center}
.hero h1{max-width:22ch}
.hero-sub{max-width:56ch}
.hero-when{align-self:center;justify-content:center;padding-left:22px;padding-right:22px}
.cta-band{grid-column:1;grid-row:2;grid-template-columns:1fr}
.hero-fig{grid-column:2;grid-row:2;justify-content:center}
.cta-form-side{padding:clamp(24px,3vw,34px)}
/* horarios: panel vertical original, ahora en el cierre */
.cierre-when{
  align-self:stretch;text-align:left;border-radius:12px;
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
  padding:22px 26px;
}

/* ─ alta-ok: confirmación con contenido + entrada animada ─ */
@keyframes okIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes okRing{0%{box-shadow:0 0 0 2px var(--green-ink),0 0 0 2px rgba(74,222,128,.35)}70%{box-shadow:0 0 0 2px var(--green-ink),0 0 0 16px rgba(74,222,128,0)}100%{box-shadow:0 0 0 2px var(--green-ink),0 0 0 0 rgba(74,222,128,0)}}
.alta-ok{animation:okIn .4s cubic-bezier(.16,1,.3,1) both}
/* coreografía: primero «Apuntado» solo y grande en el centro,
   después sube a su lugar y recién ahí entra el resto */
.ok-top{transform-origin:center;animation:okTop 2.2s cubic-bezier(.16,1,.3,1) both}
@keyframes okTop{
  0%{opacity:0;transform:translateY(100px) scale(1.2)}
  12%,55%{opacity:1;transform:translateY(100px) scale(1.2)}
  78%,100%{opacity:1;transform:none}
}
.alta-ok>*:not(.ok-top){animation:okIn .55s cubic-bezier(.16,1,.3,1) both}
.alta-ok>*:nth-child(2){animation-delay:1.6s}
.alta-ok>*:nth-child(3){animation-delay:1.75s}
.alta-ok>*:nth-child(4){animation-delay:1.9s}
.ok-top{display:flex;gap:16px;align-items:center;justify-content:center}
.ok-check{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:var(--green-ink);
  animation:okIn .55s cubic-bezier(.16,1,.3,1) both,okRing 2.4s ease-out .6s infinite;
}
.ok-gift{position:relative;background:var(--bg-dark);color:var(--paper);border-radius:9px;box-shadow:0 0 0 1px rgba(16,18,22,.25);overflow:hidden}
.ok-gift-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;box-shadow:0 1px 0 rgba(255,255,255,.1)}
.ok-gift-bar i{width:8px;height:8px;border-radius:50%;background:#3A3F47}
.ok-gift-name{margin-left:6px;font-family:var(--mono);font-size:12px;color:var(--amber)}
.ok-gift-tag{margin-left:auto;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--bg-dark);background:var(--amber);padding:3px 8px;border-radius:3px}
.ok-gift-body{padding:10px 14px 13px;font-family:var(--mono);font-size:11.5px;line-height:1.95;color:#C9CED6}
.ok-gift-body .dim{color:#7E8794}
.ok-gift::after{content:"";position:absolute;top:0;bottom:0;left:0;width:44px;background:linear-gradient(90deg,transparent,rgba(251,191,36,.2),transparent);animation:dShine 3.4s ease-in-out infinite;pointer-events:none}
.ok-dl{align-self:center;min-width:60%}
.alta-ok .cta-note{align-self:center}


/* ══════════════════════════════════════════════════════════════
   Un solo idioma de hover para toda la pagina.

   La pagina entera habla en terminal, asi que lo que pasa al pasar
   el raton es lo que pasa en una terminal: aparece el prompt « › »,
   el borde toma el color de la seccion y la fila avanza cuatro
   pixeles. Nada de sombras ni de escalas — aqui las cosas no
   flotan, se seleccionan.

   Verde donde algo esta hecho, cian donde hay tiempo o datos.
   ══════════════════════════════════════════════════════════════ */
:root{--hov:180ms cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){
  :root{--hov:1ms}
}

/* ── 01 · el comparador ──────────────────────────────────────── */
/* la columna que gana ahora se ve como columna, no como celdas sueltas */
.ledger-row{align-items:stretch}
.ledger-row>span{display:flex;align-items:center}
.ledger-row:not(.head) .ledger-con{
  background:rgba(74,222,128,.09);
  margin:-15px -18px -15px 0;padding:15px 18px;
  border-radius:0 8px 8px 0;
}
.ledger-row:not(.head){
  position:relative;
  transition:box-shadow var(--hov),transform var(--hov);
}
.ledger-row:not(.head)::before{
  content:'\203a';position:absolute;left:-17px;top:50%;
  transform:translate(-6px,-50%);
  font-family:var(--mono);font-size:17px;font-weight:700;color:var(--green-ink);
  opacity:0;transition:opacity var(--hov),transform var(--hov);
}
.ledger-row:not(.head):hover{
  box-shadow:0 0 0 1px rgba(21,128,61,.5);
  transform:translateX(4px);
}
.ledger-row:not(.head):hover::before{opacity:1;transform:translate(0,-50%)}
/* entrada en cascada al hacer scroll */
[data-reveal].ledger .ledger-row{opacity:0}
.ledger.rv-on .ledger-row{animation:rvIn .5s var(--ease) both}
.ledger.rv-on .ledger-row:nth-child(1){animation-delay:.05s}
.ledger.rv-on .ledger-row:nth-child(2){animation-delay:.15s}
.ledger.rv-on .ledger-row:nth-child(3){animation-delay:.25s}
.ledger.rv-on .ledger-row:nth-child(4){animation-delay:.35s}
.ledger.rv-on .ledger-row:nth-child(5){animation-delay:.45s}
.ledger.rv-on .ledger-row:nth-child(6){animation-delay:.55s}
[data-reveal].ledger .ledger-verdict{opacity:0}
.ledger.rv-on .ledger-verdict{animation:rvIn .5s var(--ease) .7s both}
/* la columna que pierde también se lee como columna */
.ledger-row:not(.head) .ledger-sin{
  background:rgba(16,18,22,.04);
  margin:-15px 0;padding:15px 16px;
}
.ledger-row:not(.head) .ledger-sin::before{content:'';display:none}
/* veredicto al pie */
.ledger-verdict{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-radius:8px;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:13px;
}
.ledger-verdict b{color:var(--green);font-weight:700}
.ledger-verdict .dim{color:var(--mono-dim)}

/* ── 02 · la agenda como linea de tiempo ─────────────────────── */
/* el rail cae en el hueco entre la columna del minuto y la del texto */
.ag-row{position:relative}
.ag-row::before{
  content:'';position:absolute;left:100px;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.12);
}
.ag-row:first-child::before{top:22px}
.ag-row:last-child::before{bottom:auto;height:22px}
.ag-row::after{
  content:'';position:absolute;left:96px;top:22px;width:9px;height:9px;
  border-radius:2px;background:var(--bg-dark);
  box-shadow:0 0 0 1.5px var(--cyan);
  transition:background var(--hov),box-shadow var(--hov);
}
.ag-txt{transition:transform var(--hov)}
.ag-d{transition:color var(--hov)}
.ag-row:hover::after{
  background:var(--cyan);
  box-shadow:0 0 0 1.5px var(--cyan),0 0 14px rgba(103,232,249,.65);
}
.ag-row:hover .ag-txt{transform:translateX(4px)}
.ag-row:hover .ag-d{color:var(--txt-soft)}

/* ── 04 · la tarjeta del instructor ──────────────────────────── */
.terminal{transition:box-shadow var(--hov)}
.band-dark .terminal:hover{box-shadow:0 0 0 1px rgba(74,222,128,.45)}
.tdot{transition:background var(--hov)}
.terminal:hover .tdot:nth-of-type(1){background:#FF5F57}
.terminal:hover .tdot:nth-of-type(2){background:#FEBC2E}
.terminal:hover .tdot:nth-of-type(3){background:#28C840}
.who-photo{width:92px;height:92px}
.who-data a{
  text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--mono-dim);
  transition:box-shadow var(--hov),color var(--hov);
}
.who-data a:hover{color:var(--green);box-shadow:inset 0 -1px 0 var(--green)}
/* la sesion queda abierta, con el cursor esperando */
.who-prompt{
  display:flex;align-items:center;gap:8px;padding:10px 16px 14px;
  font-family:var(--mono);font-size:13.5px;color:var(--mono-dim);
}
.who-prompt i{
  width:8px;height:15px;background:var(--green);
  animation:blink 1.1s steps(1) infinite;
}

/* ── 05 · las preguntas ──────────────────────────────────────── */
.faq-card{
  position:relative;
  transition:box-shadow var(--hov),transform var(--hov);
}
.faq-q{
  display:flex;align-items:baseline;gap:8px;
  transition:transform var(--hov);
}
.faq-q::before{
  content:'\203a';flex:none;width:13px;font-family:var(--mono);color:var(--green);
  opacity:0;transform:translateX(-5px);
  transition:opacity var(--hov),transform var(--hov);
}
.faq-card:hover{
  box-shadow:0 0 0 1px rgba(74,222,128,.5);
  transform:translateY(-3px);
}
.faq-card:hover .faq-q::before{opacity:1;transform:none}
/* el hueco del prompt se reserva siempre, asi nada salta al pasar el
   raton; la respuesta se indenta igual (13 del caret + 8 del gap) para
   que pregunta y respuesta caigan sobre el mismo eje */
.faq-a{padding-left:21px}

/* ── el rail de la agenda, en angosto ────────────────────────── */
@media (max-width:560px){
  .ag-row::before{left:72px}
  .ag-row::after{left:68px}
}