:root{
    --navy:#0F204B;
    --navy-2:#162C69;
    --dark:#041326;
    --cyan:#1BF5FF;
    --blue:#00BCFF;
    --red:#E51D25;
    --white:#ffffff;
    --light:#f7fbff;
    --text:#10224a;
}

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

html{
    scroll-behavior:smooth;
}
html,
body,
button,
input,
textarea,
select{
    font-family:'Montserrat', Arial, Helvetica, sans-serif;
}
body{
    margin:0;
    font-family:'Montserrat',Arial,Helvetica,sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}


/* =============================
   HEADER
============================= */

.header{
    position:absolute;
    z-index:100;
    width:100%;
    top:0;
    left:0;

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

    padding:24px 5%;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
}

.logo-symbol{
    width:55px;
    height:55px;

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

    border:3px solid var(--cyan);
    border-radius:50%;

    font-size:20px;
    font-weight:900;

    box-shadow:
        0 0 25px rgba(27,245,255,.3);
}

.logo-symbol span{
    color:var(--cyan);
}

.logo-text{
    font-size:16px;
    font-weight:900;
    line-height:1;
}

.logo-text b{
    color:var(--cyan);
}


.nav{
    display:flex;
    align-items:center;
    gap:30px;
}

.nav a{
    position:relative;
    color:#fff;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    padding:12px 0;
}

.nav a:after{
    content:"";
    position:absolute;

    width:0;
    height:2px;

    left:0;
    bottom:0;

    background:var(--cyan);

    box-shadow:
        0 0 10px var(--cyan);

    transition:.3s;
}

.nav a:hover:after,
.nav a.active:after{
    width:100%;
}


.mobile-menu-button{
    display:none;
}


/* =============================
   HERO
============================= */

.hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;

    display:flex;
    align-items:center;

    color:#fff;

    background:
        radial-gradient(
            circle at 73% 42%,
            rgba(0,188,255,.22),
            transparent 31%
        ),
        linear-gradient(
            115deg,
            #031226 0%,
            #0F204B 49%,
            #06477d 100%
        );
}


.hero-grid{
    position:absolute;
    inset:0;

    opacity:.12;

    background-image:
        linear-gradient(
            rgba(27,245,255,.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(27,245,255,.18) 1px,
            transparent 1px
        );

    background-size:80px 80px;

    mask-image:
        linear-gradient(
            to right,
            transparent 15%,
            black
        );
}


.hero-glow{
    position:absolute;

    width:720px;
    height:720px;

    right:-220px;
    top:60px;

    transform:rotate(45deg);

    border:
        1px solid rgba(27,245,255,.30);

    box-shadow:
        0 0 100px rgba(0,188,255,.15),
        inset 0 0 80px rgba(0,188,255,.07);
}

.hero-glow:before{
    content:"";

    position:absolute;
    inset:80px;

    border:
        1px solid rgba(27,245,255,.20);
}


.hero-city{
    position:absolute;

    right:0;
    bottom:0;

    width:70%;
    height:60%;

    opacity:.20;

    background:
        linear-gradient(
            to top,
            #041326 3%,
            transparent 80%
        ),
        url("../images/ventanas-bg.webp")
        center / cover no-repeat;
}


.hero-content{
    position:relative;
    z-index:5;

    width:100%;

    padding:
        150px 5%
        160px;
}


.hero-copy{
    width:52%;
    max-width:760px;
}


.eyebrow{
    display:flex;
    align-items:center;
    gap:13px;

    margin-bottom:20px;

    font-size:11px;
    font-weight:800;

    letter-spacing:4px;

    text-transform:uppercase;
}


.eyebrow:before{
    content:"";

    width:38px;
    height:3px;

    background:var(--red);

    box-shadow:
        0 0 10px rgba(229,29,37,.8);
}


.hero h1{
    margin:0;

    font-size:
        clamp(55px,6vw,100px);

    line-height:.88;

    letter-spacing:-5px;

    font-weight:900;

    text-transform:uppercase;
}


.hero h1 span{
    color:var(--blue);

    text-shadow:
        0 0 30px
        rgba(0,188,255,.22);
}


.slogan{
    margin-top:18px;

    font-size:17px;

    letter-spacing:12px;

    text-transform:uppercase;
}


.slogan:after{
    content:"";

    display:inline-block;

    width:50px;
    height:4px;

    margin-left:20px;

    vertical-align:middle;

    background:var(--red);
}


.hero-description{
    max-width:580px;

    margin-top:30px;

    font-size:17px;
    line-height:1.8;

    color:#d9e5f3;
}


.hero-buttons{
    display:flex;
    gap:15px;

    margin-top:35px;
}


.btn{
    padding:18px 27px;

    min-width:200px;

    text-align:center;

    color:#fff;

    font-size:12px;
    font-weight:800;

    text-transform:uppercase;

    transition:.3s;
}


.btn-red{
    background:var(--red);

    box-shadow:
        0 12px 35px
        rgba(229,29,37,.25);
}


.btn-red:hover{
    transform:translateY(-4px);

    box-shadow:
        0 18px 40px
        rgba(229,29,37,.4);
}


.btn-outline{
    border:
        1px solid var(--blue);

    background:
        rgba(0,188,255,.04);
}


.btn-outline:hover{
    background:var(--blue);
    color:var(--navy);
}


/* PERSON */

.hero-person{
    position:absolute;
    z-index:4;

    right:0;
    top:0;
    bottom:0;

    width:55%;
    height:100%;

    overflow:hidden;
    pointer-events:none;

    /* Mezcla progresiva con el fondo del hero */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.15) 5%,
        rgba(0,0,0,.65) 15%,
        #000 28%,
        #000 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.15) 5%,
        rgba(0,0,0,.65) 15%,
        #000 28%,
        #000 100%
    );
}


.hero-person img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center center;

    filter:
        saturate(1.05)
        contrast(1.03);
}


/* VALUES */

.hero-values{
    position:absolute;

    z-index:10;

    left:5%;
    bottom:35px;

    display:flex;
}


.value{
    min-width:160px;

    margin-right:25px;

    padding-right:25px;

    border-right:
        1px solid
        rgba(255,255,255,.16);
}


.value-icon{
    color:var(--cyan);

    font-size:28px;

    margin-bottom:10px;
}


.value strong{
    display:block;

    margin-bottom:6px;

    font-size:11px;

    text-transform:uppercase;
}


.value span{
    font-size:11px;

    color:#aebfd4;
}


.scroll-indicator{
    position:absolute;
    z-index:10;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    color:#fff;
    text-decoration:none;

    font-family:'Montserrat', Arial, sans-serif;
    font-size:8px;
    font-weight:700;
    letter-spacing:1.5px;
}

/* ÓVALO */
.scroll-indicator > span{
    position:relative;
    display:block;

    width:18px;
    height:30px;

    border:1.5px solid rgba(255,255,255,.9);
    border-radius:20px;
}

/* FLECHITA */
.scroll-indicator > span::before{
    content:"";

    position:absolute;
    left:50%;
    top:6px;

    width:5px;
    height:5px;

    border-right:2px solid #1BF5FF;
    border-bottom:2px solid #1BF5FF;

    transform:translateX(-50%) rotate(45deg);

    animation:scrollArrow 1.5s infinite;
}

@keyframes scrollArrow{

    0%{
        top:5px;
        opacity:0;
    }

    30%{
        opacity:1;
    }

    70%{
        opacity:1;
    }

    100%{
        top:16px;
        opacity:0;
    }
}

.scroll-indicator span{
    display:block;

    width:17px;
    height:29px;

    margin:
        0 auto 7px;

    border:
        1px solid rgba(255,255,255,.8);

    border-radius:12px;
}


/* =============================
   ABOUT
============================= */

.about{
    position:relative;

    overflow:hidden;

    padding:
        100px 5%
        120px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(0,188,255,.08),
            transparent 30%
        ),
        #f9fcff;
}


.about:after{
    content:"VENTANAS";

    position:absolute;

    right:-40px;
    bottom:-50px;

    font-size:170px;
    font-weight:900;

    color:
        rgba(15,32,75,.025);
}


.section-grid{
    position:relative;
    z-index:2;

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:80px;

    align-items:center;
}


.section-tag{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:18px;

    color:var(--navy);

    font-size:11px;
    font-weight:800;

    letter-spacing:4px;

    text-transform:uppercase;
}


.section-tag:before{
    content:"";

    width:35px;
    height:3px;

    background:var(--red);
}


.about h2{
    margin:0;

    color:var(--navy);

    font-size:
        clamp(42px,4vw,67px);

    line-height:.95;

    letter-spacing:-2px;

    font-weight:900;

    text-transform:uppercase;
}


.about h2 span{
    color:#009edc;
}


.quote{
    margin:30px 0;

    padding-left:24px;

    border-left:
        4px solid var(--cyan);

    font-size:19px;

    font-style:italic;
    font-weight:600;

    line-height:1.6;

    color:#18315e;
}


.about p{
    max-width:690px;

    margin-bottom:17px;

    color:#43546c;

    font-size:15px;

    line-height:1.85;
}


.signature{
    margin-top:35px;

    color:var(--navy);

    font-family:cursive;

    font-size:31px;
}


.signature small{
    display:block;

    margin-top:7px;

    font-family:'Montserrat',Arial,sans-serif;

    font-size:8px;

    font-weight:bold;

    letter-spacing:5px;
}


/* COLLAGE */

.collage{
    position:relative;

    min-height:580px;
}


.photo-frame{
    overflow:hidden;

    box-shadow:
        0 20px 60px
        rgba(15,32,75,.15);
}


.photo-frame img{
    width:100%;
    height:100%;

    object-fit:cover;
}


.photo-main{
    position:absolute;

    width:62%;
    height:480px;

    left:0;
    top:35px;
}


.photo-small{
    position:absolute;

    width:35%;
    height:215px;

    right:0;
}


.photo-top{
    top:0;
}


.photo-bottom{
    top:235px;
}


.quote-card{
    position:absolute;

    z-index:5;

    left:12%;
    bottom:0;

    width:300px;

    padding:35px;

    background:#fff;

    box-shadow:
        0 20px 50px
        rgba(15,32,75,.17);

    color:var(--navy);

    font-size:19px;
    font-weight:700;

    font-style:italic;

    line-height:1.5;
}


.quote-card span{
    display:block;

    width:4px;
    height:25px;

    margin:
        18px 0 0 auto;

    background:var(--red);
}


.collage-label{
    position:absolute;

    right:0;
    bottom:30px;

    color:#6483a6;

    font-size:9px;

    line-height:1.8;

    letter-spacing:4px;
}


/* =============================
   FEATURES
============================= */

.features{
    padding:30px 5%;

    color:#fff;

    background:
        linear-gradient(
            100deg,
            #06162c,
            #0F204B
        );
}


.feature-wrap{
    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);
}


.feature{
    display:flex;
    align-items:center;

    gap:18px;

    padding:18px 30px;

    border-right:
        1px solid
        rgba(255,255,255,.08);
}


.feature-icon{
    min-width:58px;
    height:58px;

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

    border-radius:10px;

    color:var(--cyan);

    font-size:26px;

    background:
        rgba(0,188,255,.10);

    box-shadow:
        inset 0 0 20px
        rgba(0,188,255,.08);
}


.feature strong{
    display:block;

    font-size:12px;

    text-transform:uppercase;
}


.feature span{
    display:block;

    margin-top:6px;

    color:#b8c7db;

    font-size:12px;
}


/* =============================
   TIMELINE
============================= */

.timeline-section{
    position:relative;

    overflow:hidden;

    padding:
        90px 5%
        120px;

    color:#fff;

    background:#05162c;
}


.timeline-section:after{
    content:"";

    position:absolute;

    width:800px;
    height:500px;

    left:50%;
    bottom:-350px;

    transform:
        translateX(-50%);

    background:
        var(--blue);

    filter:blur(200px);

    opacity:.13;
}


.timeline-header{
    position:relative;
    z-index:2;

    max-width:1450px;

    margin:
        0 auto 75px;

    display:flex;

    justify-content:
        space-between;

    align-items:flex-end;
}


.section-tag.light{
    color:#fff;
}


.timeline-header h2{
    font-size:
        clamp(40px,4vw,60px);

    line-height:.95;

    font-weight:900;

    text-transform:uppercase;
}


.timeline-header h2 span{
    color:var(--cyan);
}


.timeline-header > p{
    max-width:520px;

    color:#b9c7d9;

    line-height:1.7;
}


.timeline{
    position:relative;
    z-index:2;

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(6,1fr);
}


.timeline:before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:6px;

    height:1px;

    background:
        rgba(255,255,255,.32);
}


.timeline-item{
    position:relative;

    padding:
        35px 30px
        0 0;
}


.timeline-dot{
    position:absolute;

    top:0;
    left:0;

    width:13px;
    height:13px;

    border:
        2px solid var(--cyan);

    border-radius:50%;

    background:#05162c;

    box-shadow:
        0 0 15px
        rgba(27,245,255,.5);
}


.timeline-dot.red{
    border-color:var(--red);

    box-shadow:
        0 0 15px
        rgba(229,29,37,.5);
}


.year{
    margin-bottom:12px;

    color:var(--cyan);

    font-size:12px;
    font-weight:800;
}


.red-text{
    color:var(--red);
}


.timeline-item strong{
    display:block;

    margin-bottom:8px;

    font-size:13px;
}


.timeline-item p{
    color:#aebed2;

    font-size:12px;

    line-height:1.6;
}


/* =============================
   MOBILE
============================= */

@media(max-width:1050px){

    .nav{
        display:none;
    }

    .hero-copy{
        width:75%;
    }

    .hero-person{
        opacity:.45;
        right:-15%;
        width:75%;
    }

    .hero-values{
        display:none;
    }

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

    .feature-wrap{
        grid-template-columns:
            1fr 1fr;
    }

    .timeline{
        grid-template-columns:
            1fr 1fr;

        gap:40px;
    }

    .timeline:before{
        display:none;
    }

}


@media(max-width:600px){

    .header{
        padding:
            18px 20px;
    }

    .logo-symbol{
        width:45px;
        height:45px;
    }

    .hero{
        min-height:850px;
    }

    .hero-content{
        padding:
            130px 22px
            80px;
    }

    .hero-copy{
        width:100%;
    }

    .hero h1{
        font-size:52px;
        letter-spacing:-3px;
    }

    .slogan{
        font-size:13px;
        letter-spacing:6px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-person{
        width:115%;
        right:-42%;
        opacity:.25;
    }

    .about{
        padding:
            80px 22px;
    }

    .about h2{
        font-size:43px;
    }

    .collage{
        min-height:480px;
    }

    .photo-main{
        width:78%;
        height:380px;
    }

    .photo-small{
        width:35%;
        height:170px;
    }

    .photo-bottom{
        top:185px;
    }

    .quote-card{
        width:240px;
        padding:25px;
    }

    .feature-wrap{
        grid-template-columns:1fr;
    }

    .feature{
        border-right:0;
        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }

    .timeline-header{
        display:block;
    }

    .timeline-header > p{
        margin-top:25px;
    }

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

}
/* ==================================================
   REFINAMIENTO GLOBAL + SECCIONES NUEVAS
================================================== */
body{font-family:'Montserrat',Arial,Helvetica,sans-serif;font-weight:400;}
button,input,textarea{font:inherit;}
.section-shell{position:relative;z-index:2;max-width:1450px;margin:0 auto;}
.header{transition:background .3s ease,box-shadow .3s ease,padding .3s ease;}
.header.scrolled{position:fixed;padding-top:14px;padding-bottom:14px;background:rgba(4,19,38,.92);backdrop-filter:blur(18px);box-shadow:0 12px 35px rgba(0,0,0,.18);}
.hero h1,.about h2,.timeline-header h2,.commitment h2,.gallery-section h2,.contact-section h2{font-family:'Montserrat',Arial,sans-serif;font-weight:900;}

/* COMPROMISO */
/* =========================================
   COMPROMISO
========================================= */

.commitment{
    position:relative;
    overflow:hidden;

    /* antes 120px */
    padding:65px 5% 85px;

    color:#fff;

    background-image:
        linear-gradient(
            90deg,
            rgba(3,20,48,.96) 0%,
            rgba(5,27,62,.92) 35%,
            rgba(7,38,78,.84) 65%,
            rgba(4,45,77,.78) 100%
        ),
        url("../images/compromiso-bg.webp");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.commitment .section-shell{
    max-width:1450px;
    margin:0 auto;
}

.commitment-heading{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:55px;
    align-items:center;
    margin-bottom:40px;
}

.commitment-heading > div{
    align-self:center;
}
.commitment-glow{position:absolute;width:650px;height:650px;right:-220px;top:-220px;border:1px solid rgba(27,245,255,.18);transform:rotate(45deg);box-shadow:0 0 100px rgba(0,188,255,.08) inset;}
.commitment h2,.gallery-section h2,.contact-section h2{font-size:clamp(42px,4vw,68px);line-height:.95;letter-spacing:-2px;text-transform:uppercase;}
.commitment h2 span,.contact-section h2 span{color:var(--cyan);}
.commitment-heading>p{max-width:520px;color:#b9c7d9;line-height:1.8;font-size:15px;}
.commitment-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);}
.commitment-card{position:relative;min-height:290px;padding:38px 30px;border-right:1px solid rgba(255,255,255,.12);transition:.35s ease;}
.commitment-card:last-child{border-right:0}.commitment-card:hover{background:rgba(0,188,255,.08);transform:translateY(-7px)}
.card-index{position:absolute;right:22px;top:20px;color:rgba(255,255,255,.12);font-size:42px;font-weight:900}.card-icon{font-size:34px;color:var(--cyan);margin-bottom:42px}.commitment-card h3{font-size:18px;text-transform:uppercase;margin-bottom:14px}.commitment-card p{color:#b8c7db;font-size:13px;line-height:1.8}

/* GALERIA */
.gallery-section{padding:120px 5%;background:#f7fbff;overflow:hidden}.gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:55px}.gallery-section h2{color:var(--navy)}.gallery-section h2 span{color:#009edc}.gallery-heading>p{max-width:500px;color:#53647a;line-height:1.8}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:245px;gap:14px}.gallery-item{position:relative;overflow:hidden;background:#0f204b}.gallery-wide{grid-column:span 2}.gallery-tall{grid-row:span 2}.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease,filter .7s ease}.gallery-item:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,19,38,.86),transparent 58%);opacity:.8;transition:.3s}.gallery-item:hover img{transform:scale(1.055)}.gallery-item:hover:after{opacity:1}.gallery-item figcaption{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;color:#fff}.gallery-item figcaption span{display:block;color:var(--cyan);font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:7px}.gallery-item figcaption strong{font-size:15px}.gallery-note{margin-top:18px;color:#718198;font-size:11px}

/* CONTACTO */
.contact-section{position:relative;overflow:hidden;padding:120px 5%;color:#fff;background:linear-gradient(120deg,#031226 0%,#0f204b 55%,#06477d 100%)}.contact-grid-bg{position:absolute;inset:0;opacity:.08;background-image:linear-gradient(rgba(27,245,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(27,245,255,.22) 1px,transparent 1px);background-size:70px 70px}.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center}.contact-copy>p{max-width:520px;margin-top:28px;color:#c3d0df;line-height:1.8}.contact-message{margin-top:45px;padding-left:22px;border-left:3px solid var(--red)}.contact-kicker{display:block;color:var(--cyan);font-size:9px;font-weight:900;letter-spacing:3px;margin-bottom:9px}.contact-message strong{font-size:19px}.contact-panel{padding:42px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.18)}.contact-form label{display:block}.contact-form label>span{display:block;margin-bottom:9px;color:#d9e5f3;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form input,.contact-form textarea{width:100%;margin-bottom:20px;padding:16px 18px;color:#fff;background:rgba(3,18,38,.55);border:1px solid rgba(255,255,255,.16);outline:none;transition:.25s}.contact-form textarea{resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(27,245,255,.07)}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#7f94ad}.contact-submit{border:0;cursor:pointer}.form-alert{margin-bottom:20px;padding:14px 16px;font-size:12px}.form-alert.success{background:rgba(27,245,255,.12);border:1px solid rgba(27,245,255,.3)}.form-alert.error{background:rgba(229,29,37,.13);border:1px solid rgba(229,29,37,.3)}
.site-footer{padding:30px 5%;background:#020d1b;color:#9fb0c4}.footer-inner{max-width:1450px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:11px}.footer-brand{display:flex;align-items:center;gap:12px;color:#fff}.footer-mark{display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--cyan);border-radius:50%;font-weight:900}.footer-brand b{color:var(--cyan)}.back-top{color:#fff;font-weight:800;letter-spacing:1px}

@media(max-width:1050px){.commitment-heading,.contact-layout{grid-template-columns:1fr}.commitment-grid{grid-template-columns:1fr 1fr}.gallery-grid{grid-template-columns:1fr 1fr}.gallery-heading{align-items:start;flex-direction:column}.mobile-menu-button{display:flex;position:relative;z-index:110;width:44px;height:44px;border:0;background:transparent;flex-direction:column;justify-content:center;gap:6px}.mobile-menu-button span{display:block;width:25px;height:2px;background:#fff;transition:.25s}.nav.open{display:flex;position:fixed;inset:0;z-index:105;flex-direction:column;justify-content:center;align-items:center;gap:18px;background:rgba(4,19,38,.98)}.nav.open a{font-size:18px}.mobile-menu-button.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}.mobile-menu-button.open span:nth-child(2){opacity:0}.mobile-menu-button.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}}
@media(max-width:600px){.commitment,.gallery-section,.contact-section{padding:85px 22px}.commitment-heading{gap:25px;margin-bottom:38px}.commitment-grid{grid-template-columns:1fr}.commitment-card{min-height:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.gallery-grid{grid-template-columns:1fr;grid-auto-rows:260px}.gallery-wide,.gallery-tall{grid-column:auto;grid-row:auto}.form-row{grid-template-columns:1fr}.contact-panel{padding:25px 20px}.footer-inner{flex-direction:column;text-align:center}}
/* =========================================
   CORRECCIÓN GALERÍA
   ========================================= */

.gallery-grid{
    display:grid;
    grid-template-columns:1fr 1fr 0.85fr;
    grid-template-rows:260px 260px;
    gap:12px;
}

/* Todas las imágenes */
.gallery-item{
    position:relative;
    overflow:hidden;
    min-height:0;
}

.gallery-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/* FOTO GRANDE: JUNTO A LA COMUNIDAD */
.gallery-item:nth-child(1){
    grid-column:1 / 2;
    grid-row:1 / 2;
}

/* Mostrar mucho más de la fotografía */
.gallery-item:nth-child(1) img{
    object-position:center 42%;
}

/* TRABAJO EN TERRITORIO */
.gallery-item:nth-child(2){
    grid-column:2 / 3;
    grid-row:1 / 2;
}

/* RETRATO VERTICAL */
.gallery-item:nth-child(3){
    grid-column:3 / 4;
    grid-row:1 / 3;
}

/* JUVENTUD */
.gallery-item:nth-child(4){
    grid-column:1 / 2;
    grid-row:2 / 3;
}

/* FOTO GRUPAL */
.gallery-item:nth-child(5){
    grid-column:2 / 3;
    grid-row:2 / 3;
}
/* =========================================================
   RESPONSIVE FINAL
   GEOVANNY VEGA BAUX
   ========================================================= */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* =========================
       HEADER
       ========================= */

    .header {
        padding: 15px 20px;
    }

    .header.scrolled {
        padding: 12px 20px;
    }

    .logo {
        gap: 9px;
        z-index: 111;
    }

    .logo-symbol {
        width: 43px;
        height: 43px;
        font-size: 16px;
    }

    .logo-text {
        font-size: 13px;
    }

    .mobile-menu-button {
        display: flex;
        z-index: 111;
    }

    .nav.open {
        position: fixed;
        inset: 0;

        width: 100%;
        height: 100dvh;

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

        gap: 22px;

        padding: 90px 25px 40px;

        background: rgba(3,18,38,.985);
        backdrop-filter: blur(15px);

        overflow-y: auto;
    }

    .nav.open a {
        font-size: 18px;
        padding: 8px 0;
    }


    /* =========================
       HERO
       ========================= */

    .hero {
        min-height: 100svh;
        height: auto;

        display: flex;
        align-items: center;

        padding: 0;
    }

    .hero-content {
        padding:
            145px 22px
            150px;

        width: 100%;
    }

    .hero-copy {
        width: 100%;
        max-width: 100%;
    }

    .eyebrow {
        font-size: 9px;
        letter-spacing: 3px;
        gap: 10px;
        margin-bottom: 22px;
    }

    .eyebrow:before {
        width: 35px;
    }

    .hero h1 {
        font-size: clamp(46px, 13vw, 62px);
        line-height: .90;
        letter-spacing: -3px;
    }

    .slogan {
        margin-top: 20px;

        font-size: 12px;
        letter-spacing: 7px;
        line-height: 1.5;
    }

    .slogan:after {
        width: 40px;
        margin-left: 12px;
    }

    .hero-description {
        max-width: 350px;

        margin-top: 28px;

        font-size: 14px;
        line-height: 1.9;
    }

    .hero-buttons {
        width: 100%;

        margin-top: 30px;

        display: flex;
        flex-direction: column;

        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        min-width: 0;

        padding: 18px 15px;
    }

    /* Imagen de fondo/persona */

    .hero-person {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: auto;
        opacity: 1;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hero-person::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(
            90deg,
            rgba(5,25,58,.94) 0%,
            rgba(5,25,58,.82) 30%,
            rgba(5,25,58,.38) 62%,
            rgba(5,25,58,.08) 100%
        );
        pointer-events: none;
    }

    .hero-person img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: 66% center;
        opacity: .82;
    }

    .hero-content {
        position: relative;
        z-index: 5;
    }

    .hero-copy {
        position: relative;
        z-index: 6;
    }

    .hero-values {
        display: none;
    }

    .hero-glow {
        width: 420px;
        height: 420px;

        right: -260px;
        top: 150px;
    }

    .hero-grid {
        background-size: 50px 50px;
    }

    .scroll-indicator {
        bottom: 20px;
        font-size: 7px;
    }


    /* =========================
       SOBRE MÍ
       ========================= */

    .about {
        padding: 75px 22px 85px;
    }

    .section-grid {
        display: grid;
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .section-tag {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .about h2 {
        font-size: clamp(39px, 11vw, 52px);
        line-height: .96;
        letter-spacing: -2px;
    }

    .quote {
        margin: 25px 0;

        padding-left: 18px;

        font-size: 16px;
        line-height: 1.65;
    }

    .about p {
        font-size: 14px;
        line-height: 1.8;
    }

    .signature {
        font-size: 27px;
    }


    /* COLLAGE */

    .collage {
        min-height: 520px;
        width: 100%;
    }

    .photo-main {
        width: 78%;
        height: 365px;

        left: 0;
        top: 25px;
    }

    .photo-small {
        width: 38%;
        height: 155px;

        right: 0;
    }

    .photo-top {
        top: 0;
    }

    .photo-bottom {
        top: 170px;
    }

    .quote-card {
        width: 230px;

        left: 8%;
        bottom: 0;

        padding: 23px;

        font-size: 15px;
    }

    .collage-label {
        display: none;
    }


    /* =========================
       PILARES
       ========================= */

    .features {
        padding: 15px 22px;
    }

    .feature-wrap {
        grid-template-columns: 1fr;
    }

    .feature {
        padding: 22px 5px;

        border-right: 0;

        border-bottom:
            1px solid rgba(255,255,255,.08);
    }

    .feature:last-child {
        border-bottom: 0;
    }


    /* =========================
       TRAYECTORIA
       ========================= */

    .timeline-section {
        padding: 75px 22px 85px;
    }

    .timeline-header {
        display: block;
        margin-bottom: 50px;
    }

    .timeline-header h2 {
        font-size: clamp(38px, 11vw, 50px);
        line-height: .96;
    }

    .timeline-header > p {
        margin-top: 25px;

        font-size: 14px;
        line-height: 1.8;
    }

    .timeline {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .timeline:before {
        display: block;

        left: 6px;
        right: auto;
        top: 0;
        bottom: 0;

        width: 1px;
        height: auto;

        background: rgba(255,255,255,.18);
    }

    .timeline-item {
        padding:
            0 0
            42px 38px;
    }

    .timeline-dot {
        left: 0;
        top: 3px;
    }


    /* =========================
       COMPROMISO
       ========================= */

    .commitment {
        padding: 75px 22px 80px;
    }

    .commitment-heading {
        display: block;

        margin-bottom: 40px;
    }

    .commitment-heading .section-tag {
        margin-bottom: 25px;
    }

    .commitment h2 {
        font-size: clamp(38px, 11vw, 52px);

        line-height: .96;
        letter-spacing: -2px;
    }

    .commitment-heading > p {
        margin-top: 27px;

        font-size: 14px;
        line-height: 1.8;
    }

    .commitment-grid {
        grid-template-columns: 1fr;

        border-bottom: 0;
    }

    .commitment-card {
        min-height: 0;

        padding: 32px 8px 32px 30px;

        border-right: 0;

        border-bottom:
            1px solid rgba(255,255,255,.12);
    }

    .commitment-card:last-child {
        border-bottom: 0;
    }

    .card-icon {
        margin-bottom: 24px;
    }

    .card-index {
        right: 10px;
        top: 20px;
    }


    /* =========================
       GALERÍA
       CORRECCIÓN IMPORTANTE
       ========================= */

    .gallery-section {
        padding: 75px 22px 80px;
    }

    .gallery-heading {
        display: block;

        margin-bottom: 38px;
    }

    .gallery-section h2 {
        font-size: clamp(39px, 11vw, 52px);

        line-height: .94;
        letter-spacing: -2px;
    }

    .gallery-heading > p {
        margin-top: 25px;

        font-size: 14px;
        line-height: 1.8;
    }

    /*
     * Anulamos completamente
     * el grid desktop de 3 columnas
     */

    .gallery-grid {
        display: grid;

        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;

        gap: 14px;

        width: 100%;
    }

    /*
     * IMPORTANTÍSIMO:
     * anulamos los nth-child desktop
     */

    .gallery-item,
    .gallery-item:nth-child(1),
    .gallery-item:nth-child(2),
    .gallery-item:nth-child(3),
    .gallery-item:nth-child(4),
    .gallery-item:nth-child(5),
    .gallery-item:nth-child(6) {

        grid-column: 1 / -1 !important;
        grid-row: auto !important;

        width: 100%;
        height: 260px;

        min-height: 260px;
    }

    /*
     * Retrato un poco más alto
     */

    .gallery-item:nth-child(3) {
        height: 390px;
        min-height: 390px;
    }

    .gallery-item img,
    .gallery-item:nth-child(1) img {

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    .gallery-item:nth-child(3) img {
        object-position: center 20%;
    }

    .gallery-item figcaption {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .gallery-item figcaption strong {
        font-size: 14px;
    }

    .gallery-note {
        display: none;
    }


    /* =========================
       CONTACTO
       ========================= */

    .contact-section {
        padding: 75px 22px 80px;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-section h2 {
        font-size: clamp(39px, 11vw, 52px);

        line-height: .95;
        letter-spacing: -2px;
    }

    .contact-copy > p {
        margin-top: 25px;

        font-size: 14px;
        line-height: 1.8;
    }

    .contact-message {
        margin-top: 30px;
    }

    .contact-message strong {
        font-size: 16px;
    }

    .contact-panel {
        width: 100%;

        padding: 25px 18px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
    }

    .contact-submit {
        width: 100%;
        min-width: 0;
    }


    /* =========================
       FOOTER
       ========================= */

    .site-footer {
        padding: 35px 22px;
    }

    .footer-inner {
        flex-direction: column;

        gap: 22px;

        text-align: center;
    }

}


/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 390px) {

    .hero h1 {
        font-size: 44px;
    }

    .slogan {
        letter-spacing: 5px;
    }

    .about h2,
    .timeline-header h2,
    .commitment h2,
    .gallery-section h2,
    .contact-section h2 {
        font-size: 38px;
    }

    .hero-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .about,
    .timeline-section,
    .commitment,
    .gallery-section,
    .contact-section {
        padding-left: 18px;
        padding-right: 18px;
    }
}
/* =========================================================
   HERO MOBILE FINAL
   Mantiene bandera + Geovanny + puente visibles
   ========================================================= */

@media (max-width: 768px) {

    .hero {
        position: relative;
        min-height: 100svh;
        overflow: hidden;
        background: #061a3a;
    }

    /* Imagen completa del hero */
    .hero-person {
        position: absolute;

        top: 0;
        left: 0;
        right: auto;
        bottom: 0;

        width: 100%;
        height: 100%;

        opacity: 1;

        -webkit-mask-image: none;
        mask-image: none;

        overflow: hidden;
        z-index: 1;
    }

    .hero-person img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        /*
         * IMPORTANTE:
         * movemos el encuadre para recuperar a Geovanny
         */
        object-position: 62% center;

        display: block;
    }

    /*
     * Degradado para que el texto siga siendo legible
     * sin ocultar completamente a Geovanny.
     */
    .hero-person::after {
        content: "";

        position: absolute;
        inset: 0;

        background:
            linear-gradient(
                to right,
                rgba(3,18,38,.82) 0%,
                rgba(3,18,38,.62) 35%,
                rgba(3,18,38,.18) 72%,
                rgba(3,18,38,.05) 100%
            ),
            linear-gradient(
                to bottom,
                rgba(3,18,38,.05) 0%,
                rgba(3,18,38,.05) 65%,
                rgba(3,18,38,.38) 100%
            );

        pointer-events: none;
    }

    /* Texto siempre encima */
    .hero-content {
        position: relative;
        z-index: 5;

        width: 100%;

        padding:
            215px 22px
            150px;
    }

    .hero-copy {
        width: 100%;
        max-width: 100%;
    }

    /* El texto no ocupa absolutamente todo el ancho */
    .hero-description {
        max-width: 350px;
    }

    /* Elementos decorativos detrás */
    .hero-grid,
    .hero-glow,
    .hero-city {
        z-index: 0;
    }

    .scroll-indicator {
        z-index: 10;
    }
}


/* iPhone / teléfonos angostos */
@media (max-width: 430px) {

    .hero-person img {
        /*
         * Este es el valor que controla qué parte
         * de la foto vemos.
         *
         * 55% = más hacia la izquierda
         * 65% = más hacia la derecha
         */
        object-position: 58% center;
    }

    .hero-content {
        padding-top: 205px;
    }
}

/* =========================================================
   COMPROMISO CON IMAGEN DE FONDO - AJUSTE FINAL
   ========================================================= */
.commitment::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(circle at 25% 45%, rgba(0,188,255,.10), transparent 38%),
        linear-gradient(180deg, rgba(0,10,30,.08), rgba(0,10,30,.30));
    pointer-events:none;
}

.commitment .section-shell{
    position:relative;
    z-index:2;
}

.commitment-card{
    background:rgba(5,25,58,.42);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}

.commitment-card:hover{
    background:rgba(7,42,86,.72);
}

@media (max-width:768px){
    .commitment{
        background-image:
            linear-gradient(180deg, rgba(3,20,48,.90) 0%, rgba(4,25,58,.91) 45%, rgba(4,31,67,.96) 100%),
            url("../images/compromiso-bg.webp");
        background-size:cover;
        background-position:32% center;
        background-repeat:no-repeat;
    }

    .commitment-card{
        background:rgba(3,20,48,.68);
        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);
    }
}