/*  Landing de PanDaaS.
    El celeste es el color con el que el producto ya figura en la landing de
    Tempesta (.product--pandaas), así que la marca es la misma de los dos lados. */

:root{
  --fondo:#ffffff; --fondo2:#f5f8fb; --borde:#e3e8ee; --texto:#111a24; --suave:#5b6675;
  --acento:#0284c7; --acento2:#38bdf8; --acento-suave:#e0f2fe;
  --codigo:#0f172a; --codigo-texto:#dbe6f3;
}
@media (prefers-color-scheme:dark){
  :root{
    --fondo:#0b1017; --fondo2:#111926; --borde:#22303f; --texto:#e8eef5; --suave:#9aa7b6;
    --acento:#38bdf8; --acento2:#7dd3fc; --acento-suave:#0c2a3d;
    --codigo:#080d14; --codigo-texto:#d7e3f0;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);
     font:17px/1.7 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
     background:var(--acento-suave);color:var(--acento);padding:.12em .4em;border-radius:4px}

.contenedor{max-width:1080px;margin:0 auto;padding:0 24px}
.bloque{padding:64px 24px}
.bloque h2{font-size:1.9rem;margin:0 0 12px}

/* ---- barra ---- */
.barra{display:flex;align-items:center;justify-content:space-between;gap:20px;
       padding:16px 30px;border-bottom:1px solid var(--borde);
       position:sticky;top:0;background:var(--fondo);z-index:10;flex-wrap:wrap}
.barra .logo img{height:32px;display:block}
.barra nav{display:flex;align-items:center;gap:22px;font-size:.95rem;flex-wrap:wrap}
.barra nav a{color:var(--suave)}
.barra nav a:hover{color:var(--texto);text-decoration:none}

.boton{display:inline-block;padding:11px 20px;border-radius:9px;border:1px solid var(--borde);
       font-size:.95rem;font-weight:500;color:var(--texto)}
.boton:hover{background:var(--fondo2);text-decoration:none}
.boton.primario{background:var(--acento);border-color:var(--acento);color:#fff}
.boton.primario:hover{opacity:.92;background:var(--acento)}
.barra .boton{padding:8px 16px}

/* ---- hero ---- */
.hero{padding:86px 0 66px;background:linear-gradient(180deg,var(--acento-suave),var(--fondo))}
.hero .ojo{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:600;
           color:var(--acento);margin:0 0 14px}
.hero h1{font-size:3rem;margin:0 0 20px;letter-spacing:-.02em}
.hero .bajada{font-size:1.18rem;color:var(--suave);max-width:660px;margin:0 0 30px}
.acciones{display:flex;gap:12px;flex-wrap:wrap}

/* ---- números ---- */
.numeros{border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
         background:var(--fondo2);padding:34px 0}
.grilla-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;text-align:center}
.numero strong{display:block;font-size:2.3rem;line-height:1.1;color:var(--acento)}
.numero span{font-size:.9rem;color:var(--suave)}

/* ---- tarjetas de dataset ---- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-top:28px}
.tarjeta{border:1px solid var(--borde);border-radius:14px;padding:26px 28px;background:var(--fondo2)}
.tarjeta h3{font-size:1.3rem;margin:0 0 10px;color:var(--acento)}
.tarjeta p{color:var(--suave);margin:0 0 14px}
.tarjeta ul{margin:0 0 16px;padding-left:20px;color:var(--suave);font-size:.96rem}
.tarjeta li{margin-bottom:5px}
.para-quien{font-size:.86rem;border-top:1px solid var(--borde);padding-top:13px;margin:0}

/* ---- código ---- */
.bajada-chica{color:var(--suave);max-width:680px;margin:0 0 26px}
.codigo-par{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px}
.rotulo{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);
        margin:0 0 8px;font-weight:600}
pre{background:var(--codigo);color:var(--codigo-texto);padding:18px 20px;border-radius:12px;
    overflow-x:auto;margin:0;font-size:.82rem;line-height:1.6}
pre code{background:none;color:inherit;padding:0}

.destacado{margin-top:34px;border-left:3px solid var(--acento2);padding:4px 0 4px 22px}
.destacado h3{font-size:1.15rem;margin:0 0 8px}
.destacado p{color:var(--suave);margin:0;max-width:720px}

/* ---- cierre ---- */
.cierre{background:var(--fondo2);border:1px solid var(--borde);border-radius:16px;
        padding:44px 38px;text-align:center}
.cierre h2{margin-top:0}
.cierre p{color:var(--suave);max-width:620px;margin:0 auto 24px}
.cierre .acciones{justify-content:center}

footer{border-top:1px solid var(--borde);padding:34px 0;text-align:center;color:var(--suave);font-size:.92rem}
footer p{margin:0 0 6px}
footer .chico{font-size:.86rem}

@media(max-width:700px){
  .hero{padding:56px 0 44px}
  .hero h1{font-size:2.1rem}
  .bloque{padding:48px 20px}
  .cierre{padding:32px 22px}
}