/* Landing de Overlead. Misma paleta que la aplicación para que no parezcan dos
   productos distintos, pero con más aire: aquí se viene a leer, no a trabajar. */
:root{
  --fondo:#0b0d11; --panel:#13161c; --panel2:#1a1e26; --borde:#242a34; --borde2:#2f3641;
  --texto:#e8ebf0; --medio:#a3adbb; --suave:#6f7986;
  --acento:#5b8def; --acento2:#7aa5ff; --verde:#35c88a; --ambar:#e8ae3c;
  --ancho:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{letter-spacing:-.02em;line-height:1.2;margin:0}
p{margin:0 0 14px}
a{color:inherit}
em{font-style:normal;color:var(--acento2)}

.boton{display:inline-block;background:var(--acento);color:#fff;text-decoration:none;
  padding:10px 20px;border-radius:9px;font-size:15px;font-weight:500;
  transition:background .14s,transform .14s;white-space:nowrap}
.boton:hover{background:var(--acento2);transform:translateY(-1px)}
.boton.grande{padding:14px 28px;font-size:16px}
.boton.fantasma{background:transparent;border:1px solid var(--borde2);color:var(--medio)}
.boton.fantasma:hover{border-color:var(--acento);color:var(--texto);background:transparent}

/* --------------------------------------------------------------- cabecera */
.cab{display:flex;align-items:center;gap:28px;max-width:var(--ancho);margin:0 auto;
  padding:20px 24px;position:sticky;top:0;background:rgba(11,13,17,.85);
  backdrop-filter:blur(10px);z-index:10}
.marca{font-weight:650;font-size:18px;text-decoration:none;letter-spacing:-.3px}
.cab nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px}
.cab nav a{color:var(--medio);text-decoration:none}
.cab nav a:hover{color:var(--texto)}

/* ------------------------------------------------------------------ hero */
.hero{max-width:var(--ancho);margin:0 auto;padding:52px 24px 20px;text-align:center}
.hero h1{font-size:clamp(30px,5.2vw,50px);margin-bottom:20px}
.entradilla{max-width:660px;margin:0 auto 30px;color:var(--medio);font-size:17.5px}
.acciones{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.nota{color:var(--suave);font-size:13.5px}
.nota.centro{display:block;text-align:center;margin-top:20px}

/* La captura falsa: enseña el producto sin pedirle a nadie que se registre. */
.demo{max-width:660px;margin:52px auto 0;background:var(--panel);border:1px solid var(--borde);
  border-radius:14px;overflow:hidden;text-align:left;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.demo-cab{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--panel2);
  border-bottom:1px solid var(--borde);font-size:12px;color:var(--suave)}
.demo-cab span{width:9px;height:9px;border-radius:50%;background:var(--borde2)}
.demo-cab span:first-child{background:#e8615e}
.demo-cab span:nth-child(2){background:var(--ambar)}
.demo-cab span:nth-child(3){background:var(--verde)}
.demo-cab{justify-content:flex-start}
.demo-cab::after{content:"";flex:1}
.demo-cuerpo{padding:16px}
.demo-buscar{background:var(--fondo);border:1px solid var(--borde2);border-radius:8px;
  padding:9px 12px;font-size:14px;color:var(--medio);margin-bottom:14px}
.demo-lead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--borde)}
.demo-nombre{font-weight:600}
.demo-sub{color:var(--suave);font-size:13px}
.demo-punt{background:rgba(53,200,138,.15);color:var(--verde);font-weight:650;font-size:13px;
  padding:3px 10px;border-radius:7px}
.demo-gancho{color:var(--medio);font-size:14px;padding:12px 0;line-height:1.55}
.demo-msg{background:var(--panel2);border:1px solid var(--borde);border-radius:9px;
  padding:12px 14px;font-size:14px;color:var(--texto);line-height:1.6}

/* --------------------------------------------------------------- bloques */
.banda{background:var(--panel);border-block:1px solid var(--borde);margin-top:80px;
  padding:66px 24px}
.banda > h2,.seccion > h2,.final h2{font-size:clamp(23px,3.4vw,31px);text-align:center;
  margin-bottom:14px}
.seccion{max-width:var(--ancho);margin:0 auto;padding:76px 24px 0}
.bajo-titulo{text-align:center;color:var(--medio);max-width:620px;margin:0 auto 34px}

.tres,.dos{max-width:var(--ancho);margin:38px auto 0;display:grid;gap:22px}
.tres{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.dos{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.tres h3,.dos h3{font-size:17px;margin-bottom:8px}
.tres p,.dos p{color:var(--medio);font-size:15px;margin:0}
.tarjeta{background:var(--panel2);border:1px solid var(--borde);border-radius:12px;
  padding:22px 24px}

.pasos{list-style:none;padding:0;margin:38px 0 0;display:grid;gap:26px;max-width:760px;
  margin-inline:auto}
.pasos li{display:flex;gap:20px;align-items:flex-start}
.pasos .num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--borde2);display:flex;align-items:center;justify-content:center;
  font-weight:650;color:var(--acento2)}
.pasos h3{font-size:17.5px;margin-bottom:6px}
.pasos p{color:var(--medio);font-size:15.5px;margin:0}

.honesto{max-width:720px}
.honesto p{color:var(--medio);font-size:15.5px}
.honesto strong{color:var(--texto)}

/* --------------------------------------------------------------- precios */
.precios{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  align-items:start}
.plan{background:var(--panel);border:1px solid var(--borde);border-radius:14px;
  padding:26px 22px;position:relative;display:flex;flex-direction:column;gap:14px}
.plan.destacado{border-color:var(--acento);background:var(--panel2)}
.etiqueta{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--acento);color:#fff;font-size:11.5px;font-weight:600;padding:3px 12px;
  border-radius:20px;white-space:nowrap}
.plan-n{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--suave);
  font-weight:600}
.plan-p{font-size:31px;font-weight:650;letter-spacing:-.03em}
.plan-p span{font-size:15px;color:var(--suave);font-weight:400}
.plan ul{list-style:none;padding:0;margin:0;flex:1;display:grid;gap:8px;
  color:var(--medio);font-size:14.5px}
.plan li::before{content:"·";color:var(--acento2);margin-right:8px;font-weight:700}
.plan li.no{color:var(--suave)}
.plan li.no::before{content:"×";color:var(--suave);font-weight:400}
.plan .boton{text-align:center}

/* ------------------------------------------------------------------ faq */
.faq{max-width:740px;margin:34px auto 0;display:grid;gap:10px}
.faq details{background:var(--panel);border:1px solid var(--borde);border-radius:11px;
  padding:16px 20px}
.faq details[open]{border-color:var(--borde2)}
.faq summary{cursor:pointer;font-weight:550;list-style:none;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--suave);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--medio);font-size:15px;margin:12px 0 0}

/* ---------------------------------------------------------------- final */
.final{max-width:660px;margin:90px auto 0;padding:0 24px;text-align:center}
.final p{color:var(--medio);margin:14px 0 28px}

footer{margin-top:90px;border-top:1px solid var(--borde);padding:26px 24px 44px}
.pie{max-width:var(--ancho);margin:0 auto;display:flex;align-items:center;gap:22px;
  flex-wrap:wrap;color:var(--suave);font-size:13.5px}
.pie nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.pie a{color:var(--suave);text-decoration:none}
.pie a:hover{color:var(--texto)}

@media (max-width:720px){
  .cab{gap:14px;padding:16px}
  .cab nav{display:none}
  /* Al esconder el menu, "Entrar" pierde el empuje del nav: se lo devuelvo. */
  .cab > .boton{margin-left:auto}
  .hero{padding-top:34px}
  .banda,.seccion{padding-top:52px}
  .banda{margin-top:52px;padding-bottom:52px}
  .pasos li{gap:14px}
  .final{margin-top:60px}
}

/* Quien prefiera claro, que lo tenga: es una web pública. */
@media (prefers-color-scheme: light){
  :root{
    --fondo:#ffffff; --panel:#f7f8fa; --panel2:#f0f2f5; --borde:#e4e7ec; --borde2:#d3d8e0;
    --texto:#12151b; --medio:#4c5563; --suave:#7b8593;
    --acento:#2f62c9; --acento2:#254e9e; --verde:#1c9c66; --ambar:#b8801a;
  }
  .cab{background:rgba(255,255,255,.85)}
  .demo{box-shadow:0 20px 50px rgba(16,24,40,.12)}
  .boton{color:#fff}
}