/* ==========================================================================
   Landing pública de Konsta. Misma paleta del logo y de la app (navy + cian),
   para que quien llega desde aquí reconozca la app al instalarla.
   Hoja aparte de konsta.css: el panel es una herramienta, esto es una portada,
   y mezclarlas obligaría a pelear estilos en los dos sitios.
   ========================================================================== */

:root {
    --navy-900:#0A1124;
    --navy-800:#111a36;
    --navy-700:#181848;
    --blue-700:#1860A8;
    --blue-500:#3078D8;
    --cyan:#38C8DC;
    --green:#43DE7C;

    --ink:#111a2e;
    --ink-soft:#39435c;
    --muted:#697386;
    --line:#e3e7f0;
    --bg-gris:#f4f6fb;
}

* { box-sizing:border-box; }

body {
    margin:0;
    font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    color:var(--ink);
    background:#fff;
    -webkit-font-smoothing:antialiased;
}

img { max-width:100%; }
a { color:var(--blue-700); }

.wrap { width:min(1080px, 100%); margin:0 auto; padding:0 22px; }
.wrap.angosto { width:min(760px, 100%); }

/* ── Navegación ─────────────────────────────────────────────────────────── */
.nav {
    position:sticky; top:0; z-index:10;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:12px 22px;
    background:rgba(10,17,36,.92);
    backdrop-filter:blur(8px);
}
.nav .marca { display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none; font-weight:800; font-size:18px; }
.nav .marca img { width:28px; height:28px; border-radius:7px; }
.nav nav { display:flex; gap:20px; align-items:center; }
.nav nav a { color:#c6d0e8; text-decoration:none; font-size:14.5px; }
.nav nav a:hover { color:#fff; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
    background:
        radial-gradient(900px 420px at 50% -5%, rgba(56,200,220,.22), transparent 65%),
        linear-gradient(180deg, var(--navy-900), var(--navy-700));
    color:#fff;
    padding:76px 0 84px;
    text-align:center;
}
/* Dos columnas: el texto vende, la ilustración explica de un vistazo. */
.hero-cols { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; text-align:left; }
.hero-texto { min-width:0; }
.hero-arte { min-width:0; }
.hero-arte img { width:100%; height:auto; display:block; filter:drop-shadow(0 24px 50px rgba(3,8,24,.55)); }

.hero .pill {
    display:inline-block; padding:5px 14px; border-radius:99px;
    background:rgba(56,200,220,.14); color:var(--cyan);
    font-size:13px; font-weight:600; letter-spacing:.3px;
}
.hero h1 {
    font-size:clamp(30px, 5.2vw, 52px); line-height:1.12; letter-spacing:-1px;
    margin:18px 0 0; font-weight:800;
}
.hero h1 em { color:var(--cyan); font-style:normal; }
.hero .lead {
    max-width:640px; margin:18px 0 0;
    font-size:clamp(16px, 2.2vw, 19px); color:#c6d0e8;
}
.hero .lead b { color:#fff; }
.hero .nota { margin-top:16px; font-size:13.5px; color:#8fa0c4; }
.hero .nota .sep { opacity:.5; margin:0 4px; }

.acciones { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.cierre .acciones { justify-content:center; }
.btn {
    display:inline-block; padding:13px 24px; border-radius:11px;
    text-decoration:none; font-weight:700; font-size:15.5px; white-space:nowrap;
}
.btn-primario { background:var(--cyan); color:var(--navy-900); }
.btn-primario:hover { background:#5ad8e8; }
.btn-fantasma { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.22); }
.btn-fantasma:hover { background:rgba(255,255,255,.15); }

/* ── Sello de marca («que te konste») ───────────────────────────────────── */
.sello {
    position:relative; overflow:hidden;
    background:var(--navy-800); color:#fff;
    padding:56px 0; text-align:center;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.sello h2 { font-size:clamp(23px, 3.6vw, 34px); margin:0; letter-spacing:-.6px; }
.sello h2 em { color:var(--green); font-style:normal; }
.sello p { color:#c6d0e8; margin:14px auto 0; max-width:600px; }
.sello p b { color:#fff; }
/* Sello de «visto bueno» de fondo: guiño visual, sin robar protagonismo. */
.sello .marca-agua {
    position:absolute; right:-10px; top:50%; transform:translateY(-50%) rotate(-14deg);
    border:4px solid rgba(67,222,124,.16); color:rgba(67,222,124,.16);
    border-radius:12px; padding:10px 22px;
    font-size:clamp(30px, 6vw, 58px); font-weight:800; letter-spacing:2px;
    pointer-events:none; user-select:none; white-space:nowrap;
}

/* ── Secciones ──────────────────────────────────────────────────────────── */
.seccion { padding:68px 0; }
.seccion.gris { background:var(--bg-gris); }
.seccion h2 {
    font-size:clamp(24px, 3.4vw, 33px); letter-spacing:-.6px; margin:0; text-align:center;
}
.seccion .sub { text-align:center; color:var(--muted); margin:10px auto 0; max-width:620px; }

/* Pasos */
.pasos { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:22px; margin-top:38px; }
/* Marco de celular para las capturas REALES de la app. El marco lo dibuja el
   CSS (no viene en la imagen), así las capturas se pueden reemplazar por otras
   sin volver a montar nada. */
.marco-celular {
    width:min(230px, 100%); margin:0 auto 18px;
    border:8px solid #0A1124; border-radius:26px;
    background:#0A1124; overflow:hidden;
    box-shadow:0 18px 40px -18px rgba(10,17,36,.65), 0 0 0 1px rgba(56,200,220,.35);
}
.marco-celular img { width:100%; height:auto; display:block; }
.paso .num {
    display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
    background:var(--navy-900); color:var(--cyan); font-weight:800;
}
.paso h3 { margin:14px 0 6px; font-size:18px; }
.paso p { margin:0; color:var(--ink-soft); }

/* Tarjetas */
.rejilla { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-top:38px; }
.tarjeta { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.tarjeta h3 { margin:0 0 6px; font-size:17px; }
.tarjeta p { margin:0; color:var(--ink-soft); font-size:15px; }

/* Planes */
.planes { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px; margin-top:38px; }
.plan { border:1px solid var(--line); border-radius:16px; padding:24px; position:relative; background:#fff; }
.plan.destacado { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(56,200,220,.18); }
.plan .etiqueta {
    position:absolute; top:-11px; left:24px; padding:3px 11px; border-radius:99px;
    background:var(--cyan); color:var(--navy-900); font-size:12px; font-weight:700;
}
.plan h3 { margin:0; font-size:19px; }
.plan .precio { margin:10px 0 16px; }
.plan .precio b { font-size:34px; letter-spacing:-1px; }
.plan .precio span { color:var(--muted); font-size:15px; }
.plan ul { margin:0; padding-left:20px; color:var(--ink-soft); }
.plan ul li { margin-bottom:7px; }
.plan .ahorro {
    display:inline-block; margin-left:6px; padding:1px 8px; border-radius:99px;
    background:#e6f7ee; color:#127a45; font-size:12.5px; font-weight:700;
}

/* Privacidad */
.arte-privacidad { display:block; margin:26px auto 0; width:min(300px, 100%); height:auto; border-radius:16px; }
.privacidad { margin-top:28px; }
.privacidad p { color:var(--ink-soft); border-left:3px solid var(--cyan); padding-left:16px; }
.privacidad p b { color:var(--ink); }
.privacidad .mas { border:0; padding-left:0; margin-top:20px; }

/* FAQ */
details {
    border-bottom:1px solid var(--line); padding:16px 0;
}
details summary {
    cursor:pointer; font-weight:600; font-size:16.5px; list-style:none;
    display:flex; justify-content:space-between; gap:14px; align-items:center;
}
details summary::-webkit-details-marker { display:none; }
details summary::after { content:'+'; color:var(--cyan); font-size:22px; font-weight:700; line-height:1; }
details[open] summary::after { content:'−'; }
details p { color:var(--ink-soft); margin:10px 0 0; }
.seccion .wrap.angosto > details:first-of-type { margin-top:30px; }

/* Cierre */
.cierre {
    background:linear-gradient(180deg, var(--navy-800), var(--navy-900));
    color:#fff; text-align:center; padding:70px 0;
}
.cierre h2 { font-size:clamp(24px, 3.4vw, 33px); margin:0; letter-spacing:-.6px; }
.cierre p { color:#c6d0e8; margin:12px auto 0; max-width:520px; }

/* Pie */
footer { background:var(--navy-900); color:#8fa0c4; padding:32px 0 40px; font-size:14px; }
footer p { margin:0 0 10px; }
footer .enlaces { display:flex; gap:18px; flex-wrap:wrap; }
footer .enlaces a { color:#c6d0e8; text-decoration:none; }
footer .enlaces a:hover { text-decoration:underline; }
footer .legal { margin-top:14px; font-size:12.5px; color:#6d7ba0; max-width:640px; }

@media (max-width: 900px) {
    /* La ilustración pasa DEBAJO del texto: en el celular lo primero tiene que
       ser la promesa y el botón, no el dibujo. */
    .hero-cols { grid-template-columns:1fr; gap:30px; text-align:center; }
    .hero .lead { margin-left:auto; margin-right:auto; }
    .hero .acciones { justify-content:center; }
    .hero-arte { max-width:460px; margin:0 auto; }
}

@media (max-width: 640px) {
    .hero { padding:56px 0 62px; }
    .seccion { padding:52px 0; }
    .nav nav { gap:14px; }
    .btn { width:100%; text-align:center; }
}