:root{

    --navy:#0a2540;
    --navy-800:#0d2f52;
    --azul:#0b3b78;
    --azul-claro:#135fc1;
    --verde:#2f9e44;
    --verde-claro:#51cf66;
    --verde-hover:#28893c;

    --bg:#f5f7fa;
    --blanco:#ffffff;
    --tarjeta:#ffffff;
    --borde:#dde4ec;
    --hairline:#e3e9f0;

    --texto:#3b4a5a;
    --texto-suave:#5c6b7a;
    --titulo:#12283e;
    --verde-fondo:#edf7ee;

    --fila-alt:#f7fafc;
    --fila-hover:#eef5fc;

    --sombra:0 1px 2px rgba(10,37,64,.06), 0 10px 30px rgba(10,37,64,.09);
    --sombra-fuerte:0 12px 40px rgba(4,16,30,.35);

    --nav-fondo:rgba(255,255,255,.94);

    --radio-lg:20px;
    --radio-md:14px;

    --fuente-titulos:"Sora", "Segoe UI", Arial, sans-serif;
    --fuente-cuerpo:"Inter", -apple-system, "Segoe UI", Arial, sans-serif;
}

html[data-theme="dark"]{
    --navy:#0a1929;
    --navy-800:#0e2238;

    --bg:#0b1626;
    --blanco:#13233a;
    --tarjeta:#13233a;
    --borde:#27405e;
    --hairline:#20334c;

    --texto:#c3cfdd;
    --texto-suave:#8fa1b5;
    --titulo:#e8eef6;
    --verde-fondo:#12301c;

    --fila-alt:#16273e;
    --fila-hover:#1c3049;

    --sombra:0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.3);
    --sombra-fuerte:0 12px 40px rgba(0,0,0,.55);

    --nav-fondo:rgba(11,22,38,.94);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:var(--fuente-cuerpo);
    background:var(--blanco);
    color:var(--texto);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    transition:background .3s, color .3s;
}

h1,h2,h3,h4{
    font-family:var(--fuente-titulos);
    color:var(--titulo);
    line-height:1.2;
    letter-spacing:-.015em;
    text-wrap:balance;
}

img{
    max-width:100%;
    display:block;
}

strong{ color:inherit; font-weight:600; }

html{
    scroll-behavior:smooth;
    scroll-padding-top:96px;
}

.container{
    max-width:1140px;
    margin-inline:auto;
    padding-inline:24px;
}

.container-angosto{ max-width:860px; }

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:12px 28px;

    border:none;
    border-radius:999px;

    font-family:var(--fuente-cuerpo);
    font-size:.95rem;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;

    transition:transform .25s, box-shadow .25s, background .25s, border-color .25s, color .25s;
}

.btn-lg{ padding:15px 34px; font-size:1rem; }

.btn-pill{ border-radius:999px; }

.btn-primary{
    background:var(--verde);
    color:#fff;
}
.btn-primary:hover{
    background:var(--verde-hover);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(47,158,68,.35);
}

.btn-ghost{
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.45);
}
.btn-ghost:hover{
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.75);
    transform:translateY(-2px);
}

.btn-outline-light{
    background:transparent;
    color:#fff;
    border:2px solid rgba(255,255,255,.6);
}
.btn-outline-light:hover{
    background:rgba(255,255,255,.12);
    border-color:#fff;
    transform:translateY(-2px);
}

.btn-nav{ padding:10px 22px; }

.eyebrow{
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--verde);
    margin-bottom:14px;
}

.eyebrow-light,
.eyebrow-verde{
    color:var(--verde-claro);
}

.reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible{
    opacity:1;
    transform:none;
}
.delay-1{ transition-delay:.08s; }
.delay-2{ transition-delay:.16s; }
.delay-3{ transition-delay:.24s; }
.delay-4{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

.navbar{
    position:sticky;
    top:0;
    z-index:100;

    background:var(--nav-fondo);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border-bottom:1px solid var(--hairline);
    transition:box-shadow .3s, background .3s;
}

.navbar.con-scroll{
    box-shadow:0 4px 20px rgba(10,37,64,.08);
}

.navbar-inner{
    display:flex;
    align-items:center;
    gap:20px;
    min-height:72px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;

    font-family:var(--fuente-titulos);
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:-.02em;

    color:var(--titulo);
    text-decoration:none;
}

.brand img{
    width:36px;
    height:36px;
    object-fit:contain;
    background:var(--tarjeta);
    border-radius:50%;
    padding:3px;
    box-shadow:inset 0 0 0 1px var(--hairline);
}

.brand em{
    font-style:normal;
    color:var(--verde);
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:22px;
    margin-left:auto;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:2px;
    list-style:none;
}

.nav-links a{
    display:block;
    padding:9px 13px;
    border-radius:999px;

    color:var(--texto-suave);
    font-size:.93rem;
    font-weight:500;
    text-decoration:none;

    transition:color .2s, background .2s;
}

.nav-links a:hover{
    color:var(--azul-claro);
    background:var(--fila-hover);
}

html[data-theme="dark"] .nav-links a:hover{
    color:#8ab6ff;
}

.btn-tema{
    width:40px;
    height:40px;
    flex-shrink:0;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--borde);
    border-radius:50%;

    background:transparent;
    color:var(--titulo);
    cursor:pointer;

    transition:border-color .25s, transform .25s;
}

.btn-tema:hover{
    border-color:var(--verde);
    transform:rotate(18deg);
}

.btn-tema svg{
    width:17px;
    height:17px;
}

.nav-toggle{
    display:none;
    margin-left:auto;

    width:42px;
    height:42px;

    border:none;
    border-radius:8px;

    background:transparent;
    cursor:pointer;

    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.nav-toggle-bar{
    width:20px;
    height:2px;
    border-radius:2px;
    background:var(--titulo);
    transition:transform .3s, opacity .3s;
}

body.menu-abierto .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-abierto .nav-toggle-bar:nth-child(2){ opacity:0; }
body.menu-abierto .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.hero-banner{
    position:relative;
    isolation:isolate;

    display:flex;
    flex-direction:column;

    min-height:min(92vh, 880px);
}

.hero-banner::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    background:
        linear-gradient(100deg, rgba(6,24,43,.94) 0%, rgba(9,38,72,.82) 52%, rgba(10,59,120,.55) 100%),
        url("fondo.png") center / cover no-repeat;
}

.hero-banner::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:140px;
    z-index:-1;

    background:linear-gradient(180deg, transparent, rgba(4,14,26,.35));
    pointer-events:none;
}

.hero-inner{
    width:100%;
    padding-block:clamp(90px, 12vh, 150px) clamp(60px, 9vh, 110px);
}

.hero-banner h1{
    max-width:16ch;

    color:#fff;
    font-size:clamp(2.3rem, 5vw, 3.6rem);
    font-weight:700;

    margin-bottom:22px;
}

.texto-destacado{
    color:var(--verde-claro);
}

.hero-banner .lead{
    max-width:56ch;

    color:rgba(233,240,247,.88);
    font-size:clamp(1rem, 1.6vw, 1.15rem);
    line-height:1.75;

    margin-bottom:36px;
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.hero-confianza{
    margin-top:auto;

    padding-block:28px;

    background:rgba(5,20,36,.62);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.12);
}

.trust-chips{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:clamp(28px, 5vw, 72px);

    text-align:center;
}

.chip dt{
    font-family:var(--fuente-titulos);

    color:#fff;
    font-size:1.45rem;
    font-weight:700;
    letter-spacing:-.02em;
}

.chip dt span{
    font-size:.88rem;
    font-weight:500;
    color:var(--verde-claro);
}

.chip dd{
    margin-top:3px;

    color:rgba(214,226,238,.72);
    font-size:.84rem;
}

.seccion{
    padding-block:clamp(72px, 9vw, 112px);

    background:var(--blanco);
}

.banda{
    background:var(--bg);
}

html[data-theme="dark"] .banda{
    background:#0b1626;
}

.seccion-cabecera{
    max-width:720px;
    margin-bottom:clamp(38px, 5vw, 56px);
}

.seccion-cabecera h2{
    font-size:clamp(1.7rem, 3.2vw, 2.35rem);
    margin-bottom:12px;
}

.centrada{
    margin-inline:auto;
    text-align:center;
}

.seccion-descripcion{
    color:var(--texto-suave);
    max-width:62ch;
}

.centro{ margin-inline:auto; }

.nota-seccion{
    margin-top:20px;

    background:var(--verde-fondo);
    border-left:3px solid var(--verde);
    padding:16px 20px;
    border-radius:0 10px 10px 0;

    font-size:.95rem;
    line-height:1.7;
}

.zigzag{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px, 6vw, 84px);
    align-items:center;
}

.zigzag-texto p + p{ margin-top:16px; }

.zigzag-media{ margin:0; }

.zigzag-media img{
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:var(--radio-lg);
    box-shadow:var(--sombra);
}

@media (min-width:901px){
    .zigzag-invertido .zigzag-texto{ order:2; }
    .zigzag-invertido .zigzag-media,
    .zigzag-invertido .escala-panel{ order:1; }
}

.como-funciona{
    margin-top:clamp(56px, 8vw, 88px);
}

.como-funciona > h3{
    text-align:center;

    font-size:1.02rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--texto-suave);

    margin-bottom:30px;
}

.pasos-grid{
    list-style:none;
    counter-reset:paso;

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
}

.paso-card{
    background:var(--tarjeta);
    border:1px solid var(--hairline);
    border-radius:var(--radio-md);

    padding:28px 24px;

    transition:transform .3s, box-shadow .3s;
}

.paso-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--sombra);
}

.paso-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;
    margin-bottom:16px;

    border-radius:50%;

    background:var(--verde-fondo);
    color:var(--verde);

    font-family:var(--fuente-titulos);
    font-size:.95rem;
    font-weight:700;
}

.paso-card h4{
    font-size:1rem;
    margin-bottom:6px;
}

.paso-card p{
    font-size:.9rem;
    color:var(--texto-suave);
    line-height:1.65;
}

.equipo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:22px;
}

.tarjeta-equipo{
    background:var(--tarjeta);
    border:1px solid var(--hairline);
    border-radius:var(--radio-lg);

    padding:34px 26px;
    text-align:center;

    box-shadow:0 1px 2px rgba(10,37,64,.04);

    transition:transform .3s, box-shadow .3s;
}

.tarjeta-equipo:hover{
    transform:translateY(-6px);
    box-shadow:var(--sombra);
}

.avatar{
    width:76px;
    height:76px;

    margin:0 auto 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg, var(--azul), var(--azul-claro));
    color:#fff;

    font-family:var(--fuente-titulos);
    font-size:1.3rem;
    font-weight:700;

    box-shadow:0 8px 20px rgba(11,59,120,.25);
    overflow:hidden;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.tarjeta-equipo h3{
    font-size:1.05rem;
    margin-bottom:6px;
}

.tarjeta-equipo .rol{
    display:block;

    font-size:.76rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:var(--verde);

    margin-bottom:12px;
}

.tarjeta-equipo p{
    font-size:.9rem;
    color:var(--texto-suave);
    line-height:1.6;
}

.banner-cta{
    position:relative;
    isolation:isolate;

    display:flex;
    align-items:center;

    min-height:440px;

    text-align:center;
    color:rgba(233,240,247,.9);
}

.banner-cta::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    background:
        linear-gradient(180deg, rgba(6,22,39,.82), rgba(8,30,54,.86)),
        url("img/seccion-datos.jpg") center / cover no-repeat;
    background-attachment:fixed;
}

@media (hover:none){
    .banner-cta::before{ background-attachment:scroll; }
}

.banner-cta-inner{
    padding-block:clamp(70px, 9vw, 110px);
}

.banner-cta h2{
    max-width:24ch;
    margin:0 auto 18px;

    color:#fff;
    font-size:clamp(1.8rem, 3.6vw, 2.6rem);
}

.banner-cta p{
    max-width:62ch;
    margin:0 auto 34px;

    font-size:1.02rem;
    line-height:1.75;
}

.beneficios-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}

.tarjeta-beneficio{
    display:flex;
    flex-direction:column;
    gap:14px;

    background:var(--tarjeta);
    border:1px solid var(--hairline);
    border-radius:var(--radio-lg);

    padding:32px 28px;

    transition:transform .3s, box-shadow .3s, border-color .3s;
}

.tarjeta-beneficio:hover{
    transform:translateY(-6px);
    box-shadow:var(--sombra);
    border-color:rgba(47,158,68,.35);
}

.beneficio-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border-radius:50%;

    background:var(--verde-fondo);
    color:var(--verde);

    font-family:var(--fuente-titulos);
    font-size:.95rem;
    font-weight:700;
}

.tarjeta-beneficio h3{
    font-size:1.12rem;
}

.tarjeta-beneficio p{
    font-size:.92rem;
    color:var(--texto-suave);
    line-height:1.7;
}

.escala-panel{
    background:var(--tarjeta);
    border:1px solid var(--hairline);
    border-radius:var(--radio-lg);

    padding:clamp(26px, 3vw, 38px);

    box-shadow:var(--sombra);
}

.escala{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.nivel{
    display:flex;
    align-items:center;
    gap:12px;
}

.letra{
    min-width:58px;
    padding:7px 0;

    text-align:center;
    color:#fff;
    font-weight:700;
    font-size:.85rem;

    border-radius:5px;
}

.barra{
    height:28px;
    border-radius:5px;
}

.l-a3{ background:#14591d; }  .b-a3{ width:95%; background:#14591d; }
.l-a2{ background:#1e7a2c; }  .b-a2{ width:85%; background:#1e7a2c; }
.l-a1{ background:#2f9e44; }  .b-a1{ width:75%; background:#2f9e44; }
.l-a { background:#57ad33; }  .b-a { width:65%; background:#57ad33; }
.l-b { background:#9a8f19; }  .b-b { width:55%; background:#9a8f19; }
.l-c { background:#e07b00; }  .b-c { width:45%; background:#e07b00; }
.l-d { background:#cc3333; }  .b-d { width:35%; background:#cc3333; }

.texto-nivel{
    font-size:.82rem;
    font-weight:600;
    color:var(--texto-suave);
    white-space:nowrap;
}

.glosario-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:22px;
}

.termino-card{
    background:var(--tarjeta);
    border:1px solid var(--hairline);
    border-radius:var(--radio-md);

    padding:26px 24px;

    transition:transform .3s, box-shadow .3s, border-color .3s;
}

.termino-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--sombra);
    border-color:rgba(47,158,68,.35);
}

.termino-card dt{
    font-family:var(--fuente-titulos);
    font-weight:600;
    font-size:1rem;
    color:var(--titulo);

    margin-bottom:8px;

    padding-left:14px;
    border-left:3px solid var(--verde);
}

.termino-card dd{
    font-size:.9rem;
    color:var(--texto-suave);
    line-height:1.7;
}

.faq-item{
    background:var(--tarjeta);
    border:1px solid var(--hairline);
    border-radius:var(--radio-md);

    margin-bottom:16px;

    overflow:hidden;

    transition:box-shadow .3s, border-color .3s;
}

.faq-item:hover,
.faq-item[open]{
    border-color:rgba(47,158,68,.4);
    box-shadow:var(--sombra);
}

.faq-item summary{
    position:relative;

    padding:20px 56px 20px 22px;

    cursor:pointer;
    list-style:none;

    font-family:var(--fuente-titulos);
    font-size:1.02rem;
    font-weight:600;
    color:var(--titulo);

    transition:color .2s;
}

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary:hover{ color:var(--azul-claro); }

.faq-item summary::after{
    content:"+";
    position:absolute;
    right:18px;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;
    border-radius:50%;

    background:var(--verde-fondo);

    font-family:var(--fuente-cuerpo);
    font-size:1.3rem;
    font-weight:500;
    line-height:1;
    color:var(--verde);

    transition:transform .3s, background .3s, color .3s;
}

.faq-item[open] summary::after{
    content:"−";
    transform:translateY(-50%);
}

.faq-item[open] summary{ color:var(--azul-claro); }

.faq-item p{
    padding:2px 56px 24px 22px;
    line-height:1.75;
    color:var(--texto-suave);
}

.fuentes-grid{
    list-style:none;

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.fuente-card{
    display:flex;
    flex-direction:column;

    background:var(--tarjeta);
    border:1px solid var(--hairline);
    border-radius:var(--radio-md);

    padding:28px 26px;

    transition:transform .3s, box-shadow .3s;
}

.fuente-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--sombra);
}

.fuente-card h3{
    font-size:1.02rem;
    margin-bottom:8px;
}

.fuente-card p{
    font-size:.9rem;
    color:var(--texto-suave);
    line-height:1.65;

    margin-bottom:20px;
}

.fuente-card a{
    margin-top:auto;

    align-self:flex-start;

    font-size:.88rem;
    font-weight:600;
    color:var(--verde);
    text-decoration:none;
}

.fuente-card a:hover{ text-decoration:underline; }

.fuente-cta{
    background:
        linear-gradient(135deg, rgba(47,158,68,.12), rgba(19,95,193,.10)),
        var(--tarjeta);
    border-color:rgba(47,158,68,.4);
}

.contacto{
    position:relative;
    isolation:isolate;

    background:
        linear-gradient(160deg, #081c31 0%, #0b2a4d 100%);
    color:rgba(233,240,247,.85);
}

html[data-theme="dark"] .contacto{
    background:
        linear-gradient(160deg, #061523 0%, #0a1f38 100%);
}

.contacto::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    background:url("img/seccion-contacto.jpg") center / cover no-repeat;
    opacity:.14;
    mix-blend-mode:luminosity;
}

.contacto h2{
    color:#fff;
    font-size:clamp(1.65rem, 3.2vw, 2.2rem);
    margin-bottom:16px;
}

.contacto-grid{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:clamp(48px, 7vw, 96px);
    align-items:start;
}

.contacto-info > p{
    max-width:48ch;
    margin-bottom:34px;
}

.contacto-datos{
    list-style:none;
}

.contacto-datos li{
    display:flex;
    flex-direction:column;
    gap:2px;

    padding-block:14px;
    border-top:1px solid rgba(255,255,255,.14);
}

.contacto-datos li:last-child{
    border-bottom:1px solid rgba(255,255,255,.14);
}

.dato-titulo{
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--verde-claro);
}

.form-contacto{
    display:grid;
    gap:26px;
}

.campo label{
    display:block;

    font-size:.76rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;

    color:rgba(233,240,247,.7);

    margin-bottom:6px;
}

.campo input,
.campo textarea{
    width:100%;

    padding:10px 2px;

    background:transparent;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.3);
    border-radius:0;

    color:#fff;
    font-family:var(--fuente-cuerpo);
    font-size:1rem;

    transition:border-color .25s;
}

.campo textarea{
    resize:vertical;
    min-height:96px;
}

.campo input::placeholder,
.campo textarea::placeholder{
    color:rgba(233,240,247,.4);
}

.campo input:focus,
.campo textarea:focus{
    outline:none;
    border-bottom-color:var(--verde-claro);
}

.form-contacto .btn{
    justify-self:start;
    margin-top:4px;
}

.mensaje-exito{
    padding:14px 18px;

    background:rgba(81,207,102,.14);
    border-left:3px solid var(--verde-claro);
    border-radius:0 8px 8px 0;

    font-weight:500;
    color:#dfffe6;
}

.footer{
    background:
        linear-gradient(180deg, #081c31, #061523);
    color:rgba(214,226,238,.75);
}

.footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:clamp(32px, 5vw, 64px);

    padding-block:64px 48px;
}

.brand-footer{
    color:#fff;
    margin-bottom:16px;
}

.footer-marca p{
    font-size:.92rem;
    max-width:34ch;
}

.footer-col h3{
    color:#fff;

    font-size:.78rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;

    margin-bottom:16px;
}

.footer-col ul{
    list-style:none;
    display:grid;
    gap:10px;
}

.footer-col a{
    color:rgba(214,226,238,.75);
    text-decoration:none;
    font-size:.92rem;

    transition:color .2s;
}

.footer-col a:hover{ color:var(--verde-claro); }

.footer-base{
    border-top:1px solid rgba(255,255,255,.1);
}

.footer-base-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;

    padding-block:20px;

    font-size:.83rem;
    color:rgba(214,226,238,.5);
}

.page-header{
    position:relative;
    isolation:isolate;
    color:#fff;
}

.page-header::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    background:
        linear-gradient(100deg, rgba(6,24,43,.94) 0%, rgba(9,38,72,.84) 55%, rgba(10,59,120,.62) 100%),
        url("img/seccion-datos.jpg") center / cover no-repeat;
}

.page-header-inner{
    padding-block:clamp(72px, 9vw, 110px);
    max-width:820px;
}

.page-header .eyebrow{
    color:var(--verde-claro);
}

.page-header h1{
    color:#fff;
    font-size:clamp(1.9rem, 4vw, 2.8rem);
    margin-bottom:14px;
}

.page-header p{
    color:rgba(233,240,247,.85);
    max-width:58ch;
}

.zona-trabajo{
    background:var(--bg);
    padding-block:clamp(48px, 6vw, 80px);
}

html[data-theme="dark"] .zona-trabajo{
    background:#0b1626;
}

.trabajo-grid{
    display:grid;
    grid-template-columns:minmax(320px, 420px) 1fr;
    gap:28px;
    align-items:start;
}

.panel{
    background:var(--tarjeta);
    border:1px solid var(--hairline);
    border-radius:var(--radio-lg);
    padding:32px;

    box-shadow:0 1px 2px rgba(10,37,64,.04);
}

.panel h2{
    font-size:1.2rem;
    margin-bottom:20px;
}

.panel-secundario{
    border-top:3px solid var(--verde);
}

.formulario{ position:sticky; top:96px; }

.formulario label{
    display:block;

    font-size:.8rem;
    font-weight:600;
    letter-spacing:.04em;

    color:var(--titulo);

    margin:16px 0 6px;
}

.formulario label:first-of-type{ margin-top:0; }

.formulario input,
.formulario select{
    width:100%;

    padding:12px 14px;

    border:1px solid var(--borde);
    border-radius:10px;

    background:var(--bg);
    color:var(--texto);

    font-family:var(--fuente-cuerpo);
    font-size:.95rem;

    transition:border-color .25s, box-shadow .25s;
}

.formulario input:focus,
.formulario select:focus{
    outline:none;
    border-color:var(--verde);
    box-shadow:0 0 0 3px rgba(47,158,68,.15);
}

.formulario button{
    width:100%;
    margin-top:22px;

    border:none;
    border-radius:999px;

    background:var(--verde);
    color:#fff;

    font-family:var(--fuente-cuerpo);
    font-weight:600;
    font-size:.98rem;

    padding:14px;
    cursor:pointer;

    transition:background .25s, transform .25s, box-shadow .25s;
}

.formulario button:hover{
    background:var(--verde-hover);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(47,158,68,.3);
}

.hint{
    margin-top:10px;

    font-size:.83rem;
    color:var(--texto-suave);
    line-height:1.5;
}

html[data-theme="dark"] .hint{ color:#8ab6ff; }

.tabla-scroll{
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    font-size:.92rem;
}

thead th{
    padding:12px 14px;

    background:var(--navy);
    color:#fff;

    font-family:var(--fuente-titulos);
    font-weight:600;
    font-size:.82rem;
    letter-spacing:.04em;

    text-align:left;
    white-space:nowrap;
}

thead th:first-child{ border-radius:8px 0 0 0; }
thead th:last-child{ border-radius:0 8px 0 0; }

tbody td{
    padding:13px 14px;
    border-bottom:1px solid var(--hairline);
    white-space:nowrap;
}

tbody tr:nth-child(even){ background:var(--fila-alt); }
tbody tr:hover{ background:var(--fila-hover); }

.fila-vacia td{
    text-align:center;
    color:var(--texto-suave);
    padding:32px;
    white-space:normal;
}

.btn-eliminar{
    padding:6px 12px;

    border:none;
    border-radius:6px;

    background:transparent;
    color:#cc3333;

    font-size:.95rem;
    font-weight:600;
    cursor:pointer;

    transition:background .2s;
}

.btn-eliminar:hover{ background:rgba(204,51,51,.12); }

.totales{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;

    margin-top:22px;
    padding-top:20px;
    border-top:1px solid var(--hairline);
}

.totales h3{
    font-size:1.15rem;
    color:var(--titulo);
}

.totales h3 span{
    color:var(--verde);
}

.btn-texto{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:18px;

    padding:10px 20px;

    border:1px solid var(--borde);
    border-radius:999px;

    background:transparent;
    color:var(--titulo);

    font-family:var(--fuente-cuerpo);
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;

    transition:border-color .25s, background .25s;
}

.btn-texto:hover{
    border-color:var(--verde);
    background:var(--verde-fondo);
}

.graficos-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:28px;

    margin-top:28px;
}

#graficoConsumo,
#graficoTorta{
    max-height:360px;
}

.comparador{
    margin-bottom:26px;
}

.comparador-barra{
    position:relative;
    height:26px;
    background:var(--hairline);
    border-radius:999px;
    overflow:visible;
}

.comparador-fill{
    height:100%;
    width:0%;

    border-radius:999px;

    background:var(--verde);

    transition:width .6s ease, background .4s;
}

.comparador-fill.moderado{ background:#e0a800; }
.comparador-fill.alto{ background:#cc3333; }

.marca-promedio{
    position:absolute;
    left:66%;
    top:-6px;
    bottom:-6px;
    width:3px;
    background:#cc3333;
    border-radius:2px;
}

.comparador-labels{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;

    margin-top:10px;
    font-size:.88rem;
    color:var(--texto-suave);
}

#tuConsumoLabel{
    font-weight:700;
    color:var(--titulo);
}

.co2-box{
    background:var(--navy);
    border-radius:var(--radio-md);
    padding:24px 26px;
    color:rgba(233,240,247,.88);
    line-height:1.7;
}

.co2-box strong{ color:var(--verde-claro); }

.co2-box .co2-titulo{
    display:block;

    font-family:var(--fuente-titulos);
    font-weight:600;
    color:#fff;

    margin-bottom:8px;
}

#recomendacion{
    padding:18px 20px;

    background:var(--verde-fondo);
    border-left:3px solid var(--verde);
    border-radius:0 10px 10px 0;

    font-weight:500;
    line-height:1.7;
}

.ia-box{
    margin-top:22px;
    padding:22px 24px;

    background:
        linear-gradient(135deg, var(--navy) 0%, #103c6b 70%, #14591d 130%);
    border-radius:var(--radio-md);

    color:rgba(233,240,247,.9);
}

.ia-header{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;

    font-family:var(--fuente-titulos);
    font-weight:600;
    font-size:1rem;

    margin-bottom:12px;
}

.ia-tag{
    margin-left:auto;

    font-family:var(--fuente-cuerpo);
    font-size:.7rem;
    font-weight:400;
    letter-spacing:.03em;

    background:rgba(255,255,255,.12);
    padding:4px 10px;
    border-radius:20px;
}

.ia-texto p{
    margin-bottom:8px;
    font-size:.92rem;
    line-height:1.65;
}

.ia-texto strong{ color:var(--verde-claro); }

.wm{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.wm::after{
    content:"";
    position:absolute;
    right:-70px;
    bottom:-70px;
    z-index:-1;

    width:300px;
    height:300px;
    border-radius:50%;

    background:var(--wm-img) center/cover no-repeat;

    opacity:.09;
    filter:blur(4px);
    pointer-events:none;
}

.wm-datos{ --wm-img:url("img/seccion-datos.jpg"); }
.wm-verde{ --wm-img:url("img/seccion-verde.jpg"); }
.wm-consejos{ --wm-img:url("img/seccion-consejos.jpg"); }
@media(max-width:1020px){

    .trabajo-grid{ grid-template-columns:1fr; }
    .formulario{ position:static; }

    .graficos-grid{ grid-template-columns:1fr; }

    .pasos-grid{ grid-template-columns:repeat(2, 1fr); }

    .beneficios-grid,
    .fuentes-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media(max-width:900px){

    .nav-toggle{ display:flex; }

    .btn-tema{ order:3; }
    .nav-toggle{ order:2; }

    .nav-menu{
        order:4;

        position:absolute;
        top:100%;
        left:0;
        right:0;

        flex-direction:column;
        align-items:stretch;
        gap:6px;

        padding:18px 24px 24px;

        background:var(--nav-fondo);
        backdrop-filter:blur(12px);
        border-bottom:1px solid var(--hairline);
        box-shadow:0 16px 32px rgba(10,37,64,.12);

        display:none;
    }

    body.menu-abierto .nav-menu{ display:flex; }

    .nav-links{
        flex-direction:column;
        align-items:stretch;
        gap:2px;
    }

    .nav-links a{ padding:12px 14px; border-radius:8px; }

    .btn-nav{ justify-content:center; }

    .hero-banner{ min-height:auto; }

    .zigzag,
    .contacto-grid{ grid-template-columns:1fr; gap:32px; }

    @media (min-width:901px){
        .zigzag-invertido .zigzag-texto{ order:2; }
    }
}

@media(max-width:600px){

    .container{ padding-inline:18px; }

    .panel{ padding:24px 18px; }

    .pasos-grid,
    .beneficios-grid,
    .fuentes-grid{ grid-template-columns:1fr; }

    .footer-grid{ grid-template-columns:1fr; gap:32px; padding-block:48px 36px; }

    .trust-chips{
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    .nivel .texto-nivel{ display:none; }

    .faq-item p{ padding-right:22px; }

    .totales{ flex-direction:column; align-items:flex-start; }
}

@media print{

    body{
        background:#fff;
        color:#000;
    }

    .navbar,
    .nav-menu,
    .btn-tema,
    .page-header,
    .formulario,
    .btn-texto,
    .btn-eliminar,
    footer,
    .banner-cta{ display:none !important; }

    .zona-trabajo{
        background:#fff;
        padding-block:20px;
    }

    .panel{
        box-shadow:none;
        border:1px solid #ccc;
        break-inside:avoid;
    }

    thead{
        background:#0b3b78 !important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }
}