/* ENVELKIT — hoja de estilos · paleta e identidad oficiales */
:root{
  --azul:#1663D9; --azul-osc:#124A9F; --azul-claro:#4985E1;
  --marino:#2A3140; --gris:#5A6272; --losa:#8B93A0;
  --perla:#D6DBE2; --tinte:#EAF0FB; --soporte:#EFF2F6; --blanco:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',Arial,Helvetica,sans-serif;color:var(--marino);background:var(--blanco);line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--azul);text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--perla)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav .brand img{height:40px;width:auto}
.nav ul{display:flex;gap:28px;list-style:none;align-items:center}
.nav a{color:var(--marino);font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--azul)}
.nav a.activa{color:var(--azul);font-weight:700}
.nav .cta{background:var(--azul);color:#fff;padding:10px 20px;border-radius:8px;font-weight:600}
.nav .cta:hover{background:var(--azul-osc);color:#fff}
.nav .menu-btn{display:none;background:none;border:none;font-size:1.6rem;color:var(--marino);cursor:pointer}

/* Hero */
.hero{position:relative;color:#fff;background:var(--marino)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.35}
.hero .container{position:relative;padding:110px 24px 120px;max-width:1140px}
.hero h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:700;line-height:1.15;max-width:760px}
.hero h1 .az{color:var(--azul-claro)}
.hero p{margin-top:18px;font-size:1.15rem;color:var(--perla);max-width:640px}
.hero .acciones{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:8px;font-weight:600}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-osc);color:#fff}
.btn-borde{border:2px solid var(--perla);color:#fff}
.btn-borde:hover{border-color:#fff}
.btn-borde-osc{border:2px solid var(--azul);color:var(--azul)}

/* Secciones */
section{padding:72px 0}
.s-alt{background:var(--soporte)}
.kicker{color:var(--azul);font-weight:700;letter-spacing:.14em;font-size:.8rem;text-transform:uppercase}
h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;margin:8px 0 14px}
.sub{color:var(--gris);max-width:760px;margin-bottom:36px}

/* Tarjetas */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--perla);border-radius:14px;padding:26px}
.s-alt .card{border:none}
.card h3{font-size:1.05rem;margin:12px 0 8px}
.card p{color:var(--gris);font-size:.93rem}
.card .num{font-size:1.9rem;font-weight:700;color:var(--azul)}
.icono{width:46px;height:46px;border-radius:50%;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.card-tinte{background:var(--tinte);border:none}

/* Franja destacada */
.franja{background:var(--marino);color:#fff;border-radius:14px;padding:34px 38px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.franja .dato{font-size:2rem;font-weight:700;color:var(--azul-claro)}
.franja p{color:var(--perla);max-width:640px}

/* Listas */
.checks{list-style:none}
.checks li{padding-left:30px;position:relative;margin-bottom:12px;color:var(--gris)}
.checks li::before{content:"■";color:var(--azul);position:absolute;left:0;font-size:.8rem;top:2px}
.checks li b{color:var(--marino)}

/* Tabla comparativa */
.tabla-comp{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 4px rgba(42,49,64,.08)}
.tabla-comp th{background:var(--azul);color:#fff;padding:14px 16px;text-align:left;font-size:.92rem}
.tabla-comp th:not(:first-child),.tabla-comp td:not(:first-child){text-align:center}
.tabla-comp td{padding:13px 16px;border-top:1px solid var(--perla);font-size:.93rem;color:var(--gris)}
.tabla-comp td:first-child{color:var(--marino);font-weight:500}
.si{color:#1E9E4B;font-weight:700}
.no{color:#C63636;font-weight:700}

/* Dos columnas con imagen */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.split .marco{background:var(--soporte);border-radius:14px;padding:28px}

/* Formulario */
form .campo{margin-bottom:16px}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
input,textarea,select{width:100%;padding:12px 14px;border:1px solid var(--perla);border-radius:8px;font-family:inherit;font-size:.95rem;color:var(--marino);background:#fff}
input:focus,textarea:focus{outline:2px solid var(--azul-claro);border-color:transparent}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--gris)}
.consent input{width:auto;margin-top:3px}

/* Footer */
footer{background:var(--marino);color:var(--perla);padding:52px 0 28px;font-size:.9rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;margin-bottom:36px}
footer img{height:44px;width:auto;margin-bottom:14px}
footer h4{color:#fff;font-size:.95rem;margin-bottom:12px}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a{color:var(--perla)}
footer a:hover{color:#fff}
.legal{border-top:1px solid #3A4252;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--losa);font-size:.8rem}

/* Página interior: cabecera */
.cabecera{background:var(--marino);color:#fff;padding:64px 0 56px}
.cabecera h1{font-size:clamp(1.7rem,3.5vw,2.6rem)}
.cabecera p{color:var(--perla);margin-top:10px;max-width:700px}

.aviso-cert{font-size:.8rem;color:var(--losa);margin-top:26px}
.prose{max-width:820px}
.prose h2{font-size:1.25rem;margin-top:28px}
.prose p,.prose li{color:var(--gris);font-size:.95rem;margin-bottom:12px}

@media (max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .nav ul{position:fixed;inset:72px 0 auto 0;background:#fff;flex-direction:column;padding:20px;border-bottom:1px solid var(--perla);display:none}
  .nav ul.abierta{display:flex}
  .nav .menu-btn{display:block}
}
@media (max-width:560px){
  .g3,.g4{grid-template-columns:1fr}
  section{padding:52px 0}
}

/* ====== Rediseño pro: animaciones e interacción ====== */
header{transition:box-shadow .25s ease}
header.scrolled{box-shadow:0 4px 18px rgba(42,49,64,.10)}

/* Entrada del hero */
@keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.hero .bg{animation:aparecer 1.4s ease both}
.hero h1{animation:subir .8s .15s ease both}
.hero p{animation:subir .8s .35s ease both}
.hero .acciones{animation:subir .8s .55s ease both}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(42,49,64,.55) 38%,rgba(42,49,64,0) 75%);pointer-events:none}
.hero .container{z-index:2}

/* Indicador de scroll */
.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:24px;height:38px;border:2px solid rgba(255,255,255,.55);border-radius:14px;z-index:2}
.cue::before{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:rueda 1.6s ease-in-out infinite}
@keyframes rueda{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(12px)}100%{opacity:0}}

/* Aparición al hacer scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visto{opacity:1;transform:none}

/* Micro-interacciones */
.card{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(22,99,217,.12);border-color:var(--azul-claro)}
.icono{transition:transform .3s ease}
.card:hover .icono{transform:scale(1.12) rotate(-4deg)}
.btn{transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-azul:hover{box-shadow:0 8px 20px rgba(22,99,217,.35)}
.marco img{transition:transform .5s ease}
.marco:hover img{transform:scale(1.035)}
.marco{overflow:hidden}
.tabla-comp tr{transition:background .2s ease}
.tabla-comp tr:hover td{background:var(--tinte)}

/* Cifras grandes animadas */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stats .st{padding:26px 10px}
.stats .valor{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:700;color:var(--azul)}
.stats .etiqueta{color:var(--gris);font-size:.9rem;margin-top:6px}

/* Botón subir */
#subir{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--azul);color:#fff;border:none;font-size:1.15rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:60;box-shadow:0 6px 18px rgba(22,99,217,.35)}
#subir.visible{opacity:1;pointer-events:auto}
#subir:hover{transform:translateY(-3px)}

/* Cabeceras interiores animadas */
.cabecera h1{animation:subir .7s .1s ease both}
.cabecera p{animation:subir .7s .28s ease both}

@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
}