/* developers.heysteff.com: portada para el comprador técnico. Usa los tokens
   de docs.v3.css (tema día/noche) y agrega lo propio de una página que vende:
   una franja terracota, el recorrido de un mensaje y la comparación. */
:root{
  --band:oklch(0.5 0.15 37);--band-ink:oklch(0.985 0.008 70);--band-soft:oklch(0.9 0.04 50);
  --band-line:oklch(0.62 0.13 40);
}
:root[data-theme="dark"]{--band:oklch(0.42 0.12 37);--band-line:oklch(0.55 0.12 40)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--band:oklch(0.42 0.12 37);--band-line:oklch(0.55 0.12 40)}}

.lp{flex:1;width:100%}
.lp-in{max-width:1180px;margin:0 auto;padding:0 32px}
.lp section{scroll-margin-top:72px}
.kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}

/* Hero */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px)}
.hero .lp-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-weight:750;font-size:clamp(34px,4.3vw,56px);line-height:1.04;letter-spacing:-.035em;margin-bottom:22px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;color:var(--ink-2);max-width:56ch;margin-bottom:30px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cta-row .btn{min-height:46px;padding:12px 22px;font-size:15px}
.hero .fine{margin-top:18px;font-size:14px;color:var(--muted);max-width:52ch}
.hero .fine code{font-size:.9em}
.hero-code .tabs{margin:0;box-shadow:0 24px 60px -32px oklch(0.3 0.06 40 / .35)}
.hero-code .code pre{font-size:13px;min-height:250px}
.hero-code .cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--muted)}

/* Hechos rápidos */
.specs{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-2)}
.specs ul{list-style:none;display:flex;flex-wrap:wrap;gap:0;max-width:1180px;margin:0 auto;padding:0 32px}
.specs li{flex:1 1 180px;padding:18px 20px 18px 0;display:flex;flex-direction:column;gap:3px}
.specs b{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.specs span{font-family:var(--mono);font-size:13.5px;color:var(--ink)}

/* Secciones */
.blk{padding:clamp(64px,8vw,112px) 0}
.blk h2{font-weight:720;font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;max-width:24ch;text-wrap:balance}
.blk .intro{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:62ch;margin-bottom:40px}
.blk p{color:var(--ink-2)}
.blk a:not(.btn){color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-border);text-underline-offset:3px;text-decoration-thickness:1.5px}
.blk a:not(.btn):hover{color:var(--accent);text-decoration-color:var(--accent)}

/* Recorrido de un mensaje (trae tu propia IA) */
.relay{list-style:none;counter-reset:r;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--ink);margin-top:8px}
.relay li{counter-increment:r;position:relative;padding:22px 22px 0 0}
.relay li::before{content:counter(r,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:12px}
.relay li::after{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--ink)}
.relay li:last-child::after{background:var(--accent);border-color:var(--accent)}
.relay h3{font-size:18px;font-weight:680;letter-spacing:-.015em;margin-bottom:8px}
.relay p{font-size:15px;line-height:1.55;margin-bottom:10px}
.relay code{font-size:.82em}
.relay-note{margin-top:36px;font-size:15px;color:var(--muted);max-width:70ch}

/* Franja terracota: lo que no tienes que construir */
.band{background:var(--band);color:var(--band-ink)}
.band .kicker{color:var(--band-soft)}
.band h2{color:var(--band-ink)}
.band .intro{color:var(--band-soft)}
.skip-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;list-style:none}
.skip-list li{display:grid;grid-template-columns:minmax(0,13ch) minmax(0,1fr);gap:20px;padding:22px 0;border-top:1px solid var(--band-line)}
.skip-list b{font-size:17px;font-weight:680;letter-spacing:-.01em;color:var(--band-ink)}
.skip-list span{font-size:15.5px;line-height:1.55;color:var(--band-soft)}
.band code{background:oklch(0.98 0.01 70 / .14);color:var(--band-ink)}

/* Herramientas: lista asimétrica, una fila por herramienta */
.tools{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--border)}
.tool{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--border)}
.tool h3{font-size:22px;font-weight:720;letter-spacing:-.025em}
.tool p{font-size:15.5px;line-height:1.55;margin:0}
.tool .cmd{font-family:var(--mono);font-size:13px;color:var(--code-ink);background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:10px 14px;overflow-x:auto;white-space:nowrap}
.tool .more{grid-column:2;font-size:14px}

/* Comparación */
.cmp-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--border)}
.cmp thead th{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--bg-2)}
.cmp thead th:last-child{color:var(--accent)}
.cmp tbody th{font-size:15px;font-weight:620;letter-spacing:-.01em;text-transform:none;color:var(--ink);background:transparent;width:24%}
.cmp td{color:var(--ink-2)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp-foot{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:76ch}

/* Precios */
.start{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end;padding:40px;border-radius:20px;background:var(--bg-2);border:1px solid var(--border)}
.start h2{margin-bottom:12px}
.start p{max-width:56ch;margin:0}
.start .cta-row{justify-content:flex-end}

/* FAQ */
.faq{border-top:1px solid var(--border);max-width:860px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:17.5px;font-weight:640;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--accent);font-size:22px;line-height:1;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;max-width:70ch}
.faq .a p{margin-bottom:10px;line-height:1.6}

/* Cierre */
.closing{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--border)}
.closing h2{font-weight:740;font-size:clamp(30px,4vw,50px);line-height:1.05;letter-spacing:-.035em;max-width:20ch;margin-bottom:24px}

/* Responsive */
@media (max-width:960px){
  .lp-in,.specs ul{padding:0 16px}
  .hero .lp-in{grid-template-columns:minmax(0,1fr)}
  .relay{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .skip-list{grid-template-columns:minmax(0,1fr)}
  .tool{grid-template-columns:minmax(0,1fr);gap:10px}
  .tool .more{grid-column:1}
  .start{grid-template-columns:minmax(0,1fr);padding:28px 22px}
  .start .cta-row{justify-content:flex-start}
}
@media (max-width:560px){
  .relay{grid-template-columns:minmax(0,1fr)}
  .skip-list li{grid-template-columns:minmax(0,1fr);gap:6px}
  .hero-code .code pre{min-height:0;font-size:12.5px}
  .cta-row .btn{flex:1 1 auto}
  .specs li{flex:1 1 45%;padding:14px 12px 14px 0}
  .specs span{font-size:12.5px}
  .hero-code .cap{flex-direction:column;gap:2px}
}