/* =====================================================================
   Deveplus-JV · Sitio informativo
   Paleta de marca: azul marino + degradado cian→azul + blanco
   ===================================================================== */

:root{
  --navy-1:#223a86; --navy-2:#132a6e; --navy-3:#0a1636;
  --cian:#67e8f9; --azul:#3b82f6;
  --ground:#f6f8fc; --surface:#ffffff; --surface-2:#eef2fa;
  --ink:#0f1830; --ink-soft:#4a5673; --ink-faint:#8390ad; --line:#e2e8f4;
  --exito:#16a34a;
  --sombra:0 1px 2px rgba(15,24,48,.04), 0 12px 32px -16px rgba(15,24,48,.22);
  --sombra-lg:0 24px 60px -24px rgba(10,22,54,.35);
  --radio:16px;
  --max:1140px;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --ground:#070c1a; --surface:#0e1528; --surface-2:#151d36;
    --ink:#eaf0ff; --ink-soft:#aab6d6; --ink-faint:#7784a6; --line:#22304f;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -18px rgba(0,0,0,.7);
    --sombra-lg:0 28px 70px -28px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#070c1a; --surface:#0e1528; --surface-2:#151d36;
  --ink:#eaf0ff; --ink-soft:#aab6d6; --ink-faint:#7784a6; --line:#22304f;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -18px rgba(0,0,0,.7);
  --sombra-lg:0 28px 70px -28px rgba(0,0,0,.8);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  background:var(--ground);color:var(--ink);
  font-family:"Manrope",system-ui,sans-serif;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.contenedor{width:100%;max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.contenedor--angosto{max-width:780px}

/* --------------------------- Tipografía --------------------------- */
h1,h2,h3,h4{font-family:"Sora",sans-serif;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.2rem,5.5vw,3.7rem);font-weight:800;text-wrap:balance}
h2{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:700;text-wrap:balance}
h3{font-size:1.18rem;font-weight:700}
.grad{background:linear-gradient(100deg,var(--cian),var(--azul));-webkit-background-clip:text;background-clip:text;color:transparent}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:"Space Mono",monospace;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:1rem;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--exito);box-shadow:0 0 0 4px rgba(22,163,74,.15)}
.eyebrow--c{color:var(--azul)}
.eyebrow--claro{color:var(--cian)}

/* --------------------------- Botones --------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"Sora",sans-serif;font-weight:600;font-size:.95rem;
  padding:.7rem 1.3rem;border-radius:12px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;white-space:nowrap;
}
.btn--sm{padding:.5rem 1rem;font-size:.88rem}
.btn--lg{padding:.9rem 1.7rem;font-size:1.02rem}
.btn--full{width:100%}
.btn--primario{
  background:linear-gradient(135deg,var(--navy-1),var(--navy-2) 55%,var(--navy-3));
  color:#fff;box-shadow:0 10px 24px -12px rgba(10,22,54,.6);
}
.btn--primario:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(10,22,54,.7)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px)}
.seccion--oscura .btn--ghost,.cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.seccion--oscura .btn--ghost:hover,.cta .btn--ghost:hover{border-color:var(--cian);color:var(--cian)}

/* --------------------------- Marca / isotipo --------------------------- */
.marca{display:inline-flex;align-items:center;gap:.6rem;font-family:"Sora",sans-serif;font-weight:800;font-size:1.15rem;color:var(--ink)}
.iso{display:inline-flex;width:40px;height:40px;flex-shrink:0}
.iso svg,.iso use{width:100%;height:100%;display:block}
.marca__jv{color:var(--azul)}
.sr-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --------------------------- Nav --------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .25s ease;padding:.9rem 0}
.nav.is-scroll{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);box-shadow:var(--sombra);padding:.55rem 0}
.nav__in{display:flex;align-items:center;justify-content:space-between}
.nav__links{display:flex;align-items:center;gap:1.9rem}
.nav__links a{font-weight:600;font-size:.95rem;color:var(--ink-soft);transition:color .15s}
.nav__links a:hover{color:var(--azul)}
.nav__links a.btn{color:#fff}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------- Fondo animado --------------------------- */
.hero__fondo{position:absolute;inset:0;overflow:hidden;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:flota 18s ease-in-out infinite}
.blob--a{width:520px;height:520px;background:radial-gradient(circle,#3b82f6,transparent 70%);top:-160px;left:-100px}
.blob--b{width:460px;height:460px;background:radial-gradient(circle,#67e8f9,transparent 70%);top:40px;right:-120px;animation-delay:-6s}
.blob--c{width:400px;height:400px;background:radial-gradient(circle,#1a2c8c,transparent 70%);bottom:-160px;left:35%;animation-delay:-11s}
.rejilla{position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.12) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent)}
@keyframes flota{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(.95)}}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}

/* --------------------------- Hero --------------------------- */
.hero{position:relative;padding:9rem 0 5rem;background:linear-gradient(180deg,var(--navy-3),#0c1a44 60%,var(--navy-2));overflow:hidden}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero__txt h1{color:#fff}
.hero .eyebrow{color:var(--cian)}
.lead{font-size:1.15rem;color:#c3cef0;margin:1.2rem 0 2rem;max-width:33rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.hero .btn--ghost:hover{border-color:var(--cian);color:var(--cian)}
.hero__chips{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:2rem;color:#9fb0d8;font-size:.9rem;font-weight:600}

.tablero{position:relative;animation:subeBaja 6s ease-in-out infinite}
@keyframes subeBaja{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.tablero{animation:none}}
.tablero svg{filter:drop-shadow(0 30px 50px rgba(3,8,25,.55))}
.badge{position:absolute;display:inline-flex;align-items:center;gap:.4rem;font-family:"Sora";font-weight:700;font-size:.8rem;padding:.5rem .8rem;border-radius:999px;backdrop-filter:blur(8px)}
.badge--sri{top:-14px;right:14px;color:#a7f3d0;background:rgba(16,185,129,.16);border:1px solid rgba(16,185,129,.4)}
.badge--moneda{right:-14px;top:44%;width:46px;height:46px;justify-content:center;font-size:1.3rem;color:#fff;border-radius:14px;background:linear-gradient(135deg,rgba(103,232,249,.3),rgba(59,130,246,.28));border:1px solid rgba(255,255,255,.18)}

/* --------------------------- Tira de stats --------------------------- */
.tira{background:var(--surface);border-bottom:1px solid var(--line)}
.tira__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:2.4rem 1.25rem}
.stat{text-align:center}
.stat b{display:block;font-family:"Sora";font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,var(--navy-1),var(--azul));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat span{display:block;margin-top:.4rem;font-size:.82rem;color:var(--ink-faint);max-width:16rem;margin-inline:auto}

/* --------------------------- Secciones --------------------------- */
.seccion{padding:5.5rem 0;position:relative}
.seccion--alt{background:var(--surface)}
.seccion--oscura{background:linear-gradient(180deg,var(--navy-3),var(--navy-2));color:#fff;overflow:hidden}
.cab{text-align:center;max-width:640px;margin:0 auto 3rem}
.cab p{color:var(--ink-soft);font-size:1.08rem;margin-top:.8rem}
.cab--claro h2{color:#fff}

/* Módulos */
.grid-mod{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.mod{background:var(--surface);border:1px solid var(--line);border-radius:var(--radio);padding:1.6rem;box-shadow:var(--sombra);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.mod:hover{transform:translateY(-5px);box-shadow:var(--sombra-lg);border-color:color-mix(in srgb,var(--azul) 40%,var(--line))}
.mod__ic{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;border-radius:14px;background:linear-gradient(135deg,rgba(103,232,249,.16),rgba(59,130,246,.12));margin-bottom:1rem}
.mod h3{margin-bottom:.4rem}
.mod p{color:var(--ink-soft);font-size:.94rem}
.mod--destacado{background:linear-gradient(150deg,var(--navy-1),var(--navy-3));color:#fff;border-color:transparent}
.mod--destacado h3{color:#fff}.mod--destacado p{color:#c3cef0}
.mod--destacado .mod__ic{background:rgba(255,255,255,.12)}

/* Cómo funciona */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative;z-index:1}
.paso{background:rgba(255,255,255,.04);border:1px solid rgba(148,197,255,.16);border-radius:var(--radio);padding:1.8rem;backdrop-filter:blur(4px)}
.paso__n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;font-family:"Sora";font-weight:800;font-size:1.2rem;color:var(--navy-3);background:linear-gradient(135deg,var(--cian),var(--azul));margin-bottom:1rem}
.paso h3{color:#fff;margin-bottom:.4rem}
.paso p{color:#b9c6ea;font-size:.95rem}
.hero__fondo--sub{opacity:.6}

/* Planes */
.toggle{display:flex;justify-content:center;gap:.3rem;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.3rem;width:fit-content;margin:0 auto 2.6rem}
.toggle__b{border:0;background:transparent;cursor:pointer;font-family:"Sora";font-weight:600;font-size:.9rem;color:var(--ink-soft);padding:.55rem 1.3rem;border-radius:999px;transition:.2s;display:inline-flex;align-items:center;gap:.5rem}
.toggle__b.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--sombra)}
.toggle__save{font-family:"Space Mono";font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--exito);background:rgba(22,163,74,.12);padding:.15rem .45rem;border-radius:6px}
.grid-planes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:start}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radio);padding:1.7rem 1.4rem;box-shadow:var(--sombra);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sombra-lg)}
.plan--top{border-color:var(--azul);box-shadow:0 0 0 2px var(--azul),var(--sombra-lg)}
.plan__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-family:"Sora";font-weight:700;font-size:.72rem;color:#fff;background:linear-gradient(135deg,var(--navy-1),var(--azul));padding:.35rem .9rem;border-radius:999px;white-space:nowrap}
.plan__n{font-size:1.25rem}
.plan__desc{color:var(--ink-faint);font-size:.85rem;margin:.25rem 0 1rem;min-height:2.4em}
.plan__precio{display:flex;align-items:baseline;gap:.15rem;margin-bottom:.2rem}
.plan__moneda{font-family:"Sora";font-weight:700;font-size:1.3rem;color:var(--ink);align-self:flex-start;margin-top:.35rem}
.plan__monto{font-family:"Sora";font-weight:800;font-size:2.6rem;color:var(--ink);line-height:1}
.plan__periodo{color:var(--ink-faint);font-weight:600;font-size:.95rem}
.plan__sub{color:var(--ink-soft);font-size:.85rem;font-weight:600;margin-bottom:1.1rem;min-height:2.4em}
.plan__lista{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.5rem;flex:1}
.plan__lista li{position:relative;padding-left:1.5rem;font-size:.9rem;color:var(--ink-soft)}
.plan__lista li::before{content:"✓";position:absolute;left:0;color:var(--exito);font-weight:800}
.planes__nota{text-align:center;color:var(--ink-faint);font-size:.9rem;margin-top:2rem;max-width:640px;margin-inline:auto}

/* Nosotros */
.dos-col{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}
.parrafo{color:var(--ink-soft);font-size:1.03rem;margin-top:1rem}
.valores{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.8rem}
.valor{display:flex;gap:.9rem;align-items:flex-start}
.valor span{font-size:1.5rem;flex-shrink:0}
.valor b{font-family:"Sora";display:block;margin-bottom:.15rem}
.valor p{color:var(--ink-soft);font-size:.92rem}
.porque{background:linear-gradient(150deg,var(--navy-1),var(--navy-3));color:#fff;border-radius:20px;padding:2rem;box-shadow:var(--sombra-lg)}
.porque h3{color:#fff;font-size:1.3rem;margin-bottom:1.2rem}
.check{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.check li{position:relative;padding-left:1.9rem;color:#c9d4f0;font-size:.95rem}
.check li b{color:#fff}
.check li::before{content:"✓";position:absolute;left:0;top:-1px;width:1.3rem;height:1.3rem;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:var(--navy-3);background:linear-gradient(135deg,var(--cian),var(--azul));border-radius:50%}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:.8rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 1.3rem;box-shadow:var(--sombra);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;font-family:"Sora";font-weight:600;font-size:1rem;padding:1.1rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--azul);transition:transform .25s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-soft);font-size:.95rem;padding:0 0 1.1rem;max-width:62ch}

/* CTA */
.cta{position:relative;padding:5.5rem 0;background:linear-gradient(160deg,var(--navy-2),var(--navy-3));color:#fff;overflow:hidden}
.cta__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr .85fr;gap:3rem;align-items:center}
.cta h2{color:#fff}
.cta p{color:#c3cef0;font-size:1.08rem;margin-top:.8rem}
.cta__datos{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}
.cta__mail{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:.6rem 1rem;border-radius:12px;transition:.2s}
.cta__mail:hover{background:rgba(255,255,255,.16);border-color:var(--cian)}
.form{background:var(--surface);border-radius:20px;padding:1.8rem;box-shadow:var(--sombra-lg)}
.form h3{margin-bottom:1.2rem}
.campo{margin-bottom:.9rem}
.campo label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:.35rem}
.campo input,.campo textarea{width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;transition:.15s;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.form__nota{font-size:.78rem;color:var(--ink-faint);text-align:center;margin-top:.7rem}

/* Footer */
.pie{background:var(--navy-3);color:#c3cef0;padding:3.5rem 0 1.5rem}
.pie__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(148,197,255,.14)}
.pie .marca{color:#fff;margin-bottom:.9rem}
.pie__marca p{font-size:.9rem;color:#93a2ca;max-width:26rem}
.pie__col h4{font-family:"Sora";color:#fff;font-size:.95rem;margin-bottom:.9rem}
.pie__col a{display:block;color:#a9b6d8;font-size:.9rem;margin-bottom:.55rem;transition:.15s}
.pie__col a:hover{color:var(--cian)}
.pie__lopdp{display:inline-block;margin-top:.4rem;font-size:.72rem;color:#7f8db2}
.pie__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding-top:1.4rem;font-size:.82rem;color:#7f8db2}

/* --------------------------- WhatsApp --------------------------- */
.wa-flota{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#25d366,#1da851);
  box-shadow:0 10px 26px -6px rgba(37,211,102,.55);
  transition:transform .2s ease, box-shadow .2s ease;
  animation:waPulso 2.6s ease-in-out infinite;
}
.wa-flota:hover{transform:scale(1.08);box-shadow:0 14px 32px -6px rgba(37,211,102,.7)}
@keyframes waPulso{0%,100%{box-shadow:0 10px 26px -6px rgba(37,211,102,.55),0 0 0 0 rgba(37,211,102,.45)}50%{box-shadow:0 10px 26px -6px rgba(37,211,102,.55),0 0 0 12px rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){.wa-flota{animation:none}}
.cta__wa{background:linear-gradient(135deg,#25d366,#1da851);border-color:transparent;color:#fff}
.cta__wa:hover{background:linear-gradient(135deg,#2ee06f,#1eb857);border-color:transparent}

/* --------------------------- Página legal --------------------------- */
.pag-legal{background:var(--ground)}
.legal{padding:8rem 0 4rem}
.legal__volver{display:inline-block;margin-bottom:1.2rem;font-weight:600;font-size:.9rem;color:var(--azul)}
.legal h1{margin-top:.4rem;font-size:clamp(2rem,4.5vw,2.8rem)}
.legal__meta{font-family:"Space Mono",monospace;font-size:.8rem;color:var(--ink-faint);margin:.6rem 0 1.6rem}
.legal__intro{font-size:1.05rem;color:var(--ink-soft);padding:1.2rem 1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sombra)}
.legal__sec{margin-top:2rem}
.legal__sec h2{font-size:1.2rem;margin-bottom:.5rem}
.legal__sec p{color:var(--ink-soft);font-size:.98rem}
.legal__sec a{color:var(--azul);font-weight:600}
.pie__base--solo{border-top:0;padding-top:0}
.pie__base--solo a{color:#a9b6d8}
.pie__base--solo a:hover{color:var(--cian)}

/* --------------------------- Reveal --------------------------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* --------------------------- Responsive --------------------------- */
@media (max-width:900px){
  .hero__in,.dos-col,.cta__in{grid-template-columns:1fr}
  .hero__art{order:-1;max-width:460px;margin:0 auto}
  .grid-mod,.pasos{grid-template-columns:repeat(2,1fr)}
  .grid-planes{grid-template-columns:repeat(2,1fr)}
  .tira__in{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .pie__in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav__links{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;background:var(--surface);padding:5.5rem 1.5rem 2rem;gap:1.2rem;transform:translateY(-120%);transition:transform .3s ease;box-shadow:var(--sombra-lg);align-items:stretch;text-align:center}
  .nav__links.is-open{transform:none}
  .nav__links a{padding:.6rem 0;font-size:1.05rem}
  .nav__burger{display:flex;z-index:60}
  .grid-mod,.pasos,.grid-planes{grid-template-columns:1fr}
  .hero{padding:7rem 0 3.5rem}
  .seccion{padding:4rem 0}
  .pie__in{grid-template-columns:1fr}
}