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

body{
    font-family:'Montserrat',sans-serif;
    background:#f4f7fa;
    color:#1b1b1b;
}

/* NAVBAR */

.navbar{
    width:100%;
    padding:22px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:fixed;
    top:0;
    background:white;
    z-index:1000;
    border-bottom:1px solid rgba(0,0,0,0.05);
}

/* NAVBAR */
.navbar {
    width: 100%;
    padding: 14px 40px;
    background: #002060;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* LOGO */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 100px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05);
}

/* LINKS */
.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s ease;
    position: relative;
}

.nav-links a:hover {
    color: #f59e0b;
}

/* Línea animada */
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 2px;
    background: #f59e0b;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links{

    display:flex;
    gap:30px;
}

.nav-links a{

    text-decoration:none;
    color:#ededed;
    font-weight:500;
    transition:0.3s;
}

.nav-links a:hover{

    color:#ff7a00;
}
.nav-links a.active{
    color:#ff8c00;
}

.nav-links a.active::after{
    width:100%;
}

/* TITULOS */

.section-title{

    text-align:center;
    margin-bottom:60px;
}

.section-title h2{

    color:#0b3b66;
    font-size:2.8rem;
}

.section-title h2::after{

    content:"";
    display:block;
    width:80px;
    height:4px;
    background:#ff7a00;
    margin:18px auto 0;
    border-radius:10px;
}

/* HERO */

.hero{

    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:0 8%;
}

.hero-video{

    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
}

.hero-overlay{

    position:absolute;
    inset:0;
    background:
    linear-gradient(
    rgba(5,20,35,0.8),
    rgba(5,20,35,0.6));

    z-index:-1;
}

.hero::after{

    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:180px;
    background:
    linear-gradient(
    to bottom,
    rgba(7,21,33,0),
    #071521);

    z-index:-1;
}

.hero-content{

    max-width:700px;
}

.hero-subtitle{

    color:white;
    letter-spacing:2px;
}

.hero-content h1{

    color:white;

    font-size:6rem;

    margin:20px 0;
}

.hero-content p{

    color:rgba(255,255,255,0.82);

    line-height:1.8;

    margin-bottom:40px;
}

.hero-buttons{

    display:flex;

    gap:20px;
}

.hero-btn{

    background:#ff7a00;

    color:white;

    text-decoration:none;

    padding:16px 34px;

    border-radius:6px;

    transition:0.3s;
}

.hero-btn:hover{

    background:#e96f00;

    transform:translateY(-3px);
}

.secondary-btn{

    background:transparent;

    border:1px solid rgba(255,255,255,0.3);
}

/* EXPERIENCIA */

.experiencia{

    padding:140px 8%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    background:
    linear-gradient(
    135deg,
    #071521,
    #0b3b66);

    color:white;

    position:relative;

    overflow:hidden;
}

.experiencia::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(255,255,255,0.03);

    border-radius:50%;

    top:-200px;

    right:-150px;
}

.experiencia-left{

    position:relative;

    z-index:2;
}

.experiencia-left span{

    color:#7eb6e6;

    letter-spacing:3px;

    font-size:0.9rem;

    font-weight:600;
}

.experiencia-left h2{

    font-size:4rem;

    margin-top:25px;

    line-height:1.1;

    font-weight:800;
}

.experiencia-number{

    font-size:7rem;

    font-weight:800;

    color:rgba(255,122,0,0.12);

    position:absolute;

    top:-40px;

    left:-10px;

    z-index:-1;
}

.experiencia-right{

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(8px);

    padding:50px;

    border-radius:24px;
}

.experiencia-right p{

    line-height:2;

    color:rgba(255,255,255,0.82);

    margin-bottom:25px;

    font-size:1.05rem;
}

/* PRODUCTOS */

.productos{

    padding:140px 8%;

    background:#eef2f7;
}

.productos-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:35px;
}

.producto-card{

    position:relative;

    height:420px;

    border-radius:24px;

    overflow:hidden;

    background:white;

    cursor:pointer;

    transition:0.6s;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.08);
}

.producto-card:hover{

    box-shadow:
    0 20px 50px rgba(255,122,0,0.22);

    transform:
    translateY(-12px)
    rotateY(4deg);
}

.producto-card img{

    width:75%;

    height:auto;

    object-fit:contain;

    transition:0.6s;
}

.producto-card:hover img{

    transform:
    scale(0.85)
    translateY(-40px);

    opacity:0.18;
}

.producto-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(7,21,33,0.96),
    rgba(11,59,102,0.96));

    display:flex;

    flex-direction:column;

    justify-content:end;

    padding:35px;

    opacity:0;

    transition:0.6s;

    color:white;
}

.producto-card:hover .producto-overlay{

    opacity:1;
}

.producto-overlay h3{

    font-size:1.5rem;

    margin-bottom:18px;

    transform:translateY(30px);

    transition:0.6s;
}

.producto-overlay p{

    line-height:1.7;

    color:rgba(255,255,255,0.88);

    font-size:0.95rem;

    margin-bottom:20px;

    transform:translateY(30px);

    transition:0.7s;
}

.producto-aplicacion{

    color:#7eb6e6;

    font-size:0.85rem;

    font-weight:600;

    letter-spacing:1px;

    transform:translateY(30px);

    transition:0.8s;
}

.producto-card:hover h3,
.producto-card:hover p,
.producto-card:hover .producto-aplicacion{

    transform:translateY(0);
}

.producto1 img,
.producto2 img,
.producto3 img,
.producto4 img{

    filter:
    drop-shadow(0 15px 25px rgba(0,0,0,0.15));
}

/* REDES */

.redes{

    position:relative;

    padding:100px 8% 120px;

    background:
    linear-gradient(
    180deg,
    #eef2f7,
    #dfe7ef);

    overflow:hidden;
}

.redes::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(11,59,102,0.08),
    transparent 70%);

    top:-250px;

    left:-150px;
}

.redes::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
    rgba(255,255,255,0.4) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(255,255,255,0.4) 1px,
    transparent 1px);

    background-size:60px 60px;

    opacity:0.25;

    pointer-events:none;
}

.redes .section-title,
.redes-text,
.sucursales-container,
.redes-buttons{

    position:relative;

    z-index:2;
}

.redes-text{

    max-width:700px;

    margin:0 auto 70px;

    text-align:center;

    color:#4f5d6b;

    line-height:1.9;
}

.sucursales-container{

    display:flex;

    flex-direction:column;

    gap:35px;
}

.sucursal-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    align-items:center;
}

.sucursal-info{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;
}

.info-card{

    background:white;

    padding:30px;

    border-radius:24px;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.06);

    transition:0.4s;
}

.info-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 20px 45px rgba(255,122,0,0.15);
}

.info-card i{

    font-size:2.2rem;

    color:#ff7a00;

    margin-bottom:16px;
}

.info-card h3{

    color:#0b3b66;

    margin-bottom:10px;

    font-size:1rem;
}

.info-card p{

    color:#5b6570;

    line-height:1.7;

    font-size:0.92rem;
}

.ubicacion-card{

    position:relative;

    height:220px;

    border-radius:28px;

    overflow:hidden;

    text-decoration:none;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.1);

    transition:0.45s;
}

.ubicacion-card:hover{

    transform:
    translateY(-8px)
    scale(1.01);
}

.ubicacion-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:0.5s;
}

.ubicacion-card:hover img{

    transform:scale(1.08);
}

.ubicacion-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(7,21,33,0.92),
    rgba(7,21,33,0.2));

    display:flex;

    flex-direction:column;

    justify-content:end;

    padding:24px;

    color:white;
}

.ubicacion-overlay i{

    font-size:2.5rem;

    color:#ff7a00;

    margin-bottom:12px;
}

.ubicacion-overlay h3{

    font-size:1.2rem;

    margin-bottom:10px;
}

.ubicacion-overlay p{

    font-size:0.88rem;

    line-height:1.6;

    color:rgba(255,255,255,0.82);
}

.redes-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:70px;
}

.redes-buttons a{

    width:85px;

    height:85px;

    border-radius:24px;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    transition:0.45s;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.08);
}

.redes-buttons a:hover{

    background:#0b3b66;

    transform:
    translateY(-10px)
    scale(1.06);
}

.redes-buttons i{

    font-size:2.2rem;

    color:#0b3b66;

    transition:0.45s;
}

.redes-buttons a:hover i{

    color:#ff7a00;
}

/* FOOTER */

.footer{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #071521,
    #0b3b66);

    color:white;

    padding:100px 8% 40px;
}

.footer::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(255,122,0,0.12),
    transparent 70%);

    top:-200px;

    right:-150px;
}

.footer::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
    rgba(255,255,255,0.03) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 1px,
    transparent 1px);

    background-size:70px 70px;

    pointer-events:none;
}

.footer-container{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:60px;

    margin-bottom:60px;

    position:relative;

    z-index:2;
}

.footer-brand h2{

    font-size:2.5rem;

    margin-bottom:20px;
}

.footer-brand p{

    line-height:1.9;

    color:rgba(255,255,255,0.75);
}

.footer-links{

    display:flex;

    flex-direction:column;
}

.footer-links h3,
.footer-contacto h3{

    margin-bottom:25px;

    font-size:1.2rem;
}

.footer-links a{

    color:rgba(255,255,255,0.75);

    text-decoration:none;

    margin-bottom:14px;

    transition:0.3s;
}

.footer-links a:hover{

    color:#7eb6e6;

    transform:translateX(5px);
}

.footer-contacto p{

    color:rgba(255,255,255,0.75);

    margin-bottom:14px;

    line-height:1.7;
}

.footer-bottom{

    border-top:
    1px solid rgba(255,255,255,0.08);

    padding-top:30px;

    text-align:center;

    position:relative;

    z-index:2;
}

.footer-bottom p{

    color:rgba(255,255,255,0.6);
}

/* =========================================
   WHATSAPP
========================================= */

.whatsapp{
    position:fixed;

    right:25px;
    bottom:25px;

    width:65px;
    height:65px;

    border-radius:50%;

    background:#25d366;

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

    color:white;

    font-size:2rem;

    text-decoration:none;

    box-shadow:0 5px 15px rgba(0,0,0,0.25);

    z-index:999;
}

/* =========================================
                NOSOTROS
========================================= */

.nosotros{
    width: 100%;
    background: #ffffff;
    color: #0b1c2c;
    overflow: hidden;
}


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

.nosotros-hero{
    width: 100%;
    padding: 150px 8% 120px;
    background:
    linear-gradient(
        135deg,
        #071726 0%,
        #0b2238 60%,
        #102d46 100%
    );

    position: relative;
    overflow: hidden;
}

.nosotros-hero::before{
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(
        circle,
        rgba(255,122,0,.18) 0%,
        transparent 70%
    );

    top: -300px;
    right: -200px;
}

.nosotros-hero span{
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.nosotros-hero h1{
    font-size: 78px;
    line-height: 1.05;
    max-width: 950px;
    color: white;
    margin-top: 25px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.nosotros-hero p{
    max-width: 720px;
    color: rgba(255,255,255,.78);
    line-height: 1.9;
    font-size: 18px;
    position: relative;
    z-index: 2;
}


/* =========================================
                    MAPA
========================================= */

.mapa-section{
    width: 100%;
    padding: 140px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;
    flex-wrap: wrap;
    background: white;
}

.mapa-left{
    flex: 1;
    min-width: 380px;
    position: relative;
}

.mapa-img{
    width: 100%;
    max-width: 520px;
}

/* POINTS */

.point{
    width: 18px;
    height: 18px;
    background: #ff7a00;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255,122,0,.5);
    transition: .3s;
}

.point:hover{
    transform: scale(1.35);
}

/* POSICIONES */

.point-edomex{
    top: 52%;
    left: 56%;
}

.point-cdmx{
    top: 56%;
    left: 54%;
}

.point-jalisco{
    top: 49%;
    left: 35%;
}

.point-queretaro{
    top: 46%;
    left: 50%;
}


/* TOOLTIP */

.tooltip{
    position: absolute;
    background: #071726;
    width: 240px;
    padding: 18px;
    border-radius: 16px;
    top: -20px;
    left: 30px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 10;
}

.point:hover .tooltip{
    opacity: 1;
    visibility: visible;
}

.tooltip h4{
    color: #ff7a00;
    margin-bottom: 10px;
    font-size: 17px;
}

.tooltip p{
    color: rgba(255,255,255,.8);
    font-size: 14px;
    line-height: 1.7;
}


/* MAPA INFO */

.mapa-right{
    flex: 1;
    min-width: 320px;
}

.section-tag{
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
}

.mapa-right h2{
    font-size: 58px;
    line-height: 1.12;
    color: #071726;
    margin-top: 20px;
    margin-bottom: 30px;
}

.mapa-right p{
    color: #5d6b78;
    line-height: 1.9;
    font-size: 17px;
    margin-bottom: 20px;
}


/* NUMBERS */

.numbers{
    display: flex;
    gap: 60px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.numbers h3{
    font-size: 60px;
    color: #0b2238;
}

.numbers p{
    color: #6d7984;
    font-size: 14px;
    margin-top: 8px;
}


/* =========================================
                TITLES
========================================= */

.section-title{
    margin-bottom: 70px;
}

.section-title span{
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
}

.section-title h2{
    font-size: 58px;
    line-height: 1.12;
    margin-top: 20px;
    max-width: 850px;
}


/* =========================================
                CONSTRUCTORAS
========================================= */

.constructoras{
    padding: 140px 8%;
    background: #f5f7fa;
}

.constructoras-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: 35px;
}

.constructora-item{
    background: white;
    padding: 50px;
    border-radius: 18px;
    border: 1px solid rgba(7,23,38,.08);
    transition: .35s;
}

.constructora-item:hover{
    transform: translateY(-10px);
    border-color: rgba(255,122,0,.4);
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
}

.constructora-item h3{
    font-size: 38px;
    color: #071726;
    margin-bottom: 20px;
}

.constructora-item p{
    color: #66727d;
    line-height: 1.8;
}


/* =========================================
            RECONOCIMIENTOS
========================================= */

.reconocimientos{
    padding: 140px 8%;
    background: white;
}

.reconocimiento-item{
    display: flex;
    align-items: center;
    gap: 90px;
    margin-top: 100px;
    flex-wrap: wrap;
}

.reconocimiento-item.reverse{
    flex-direction: row-reverse;
}

.reconocimiento-img{
    flex: 1;
    min-width: 320px;
}

.reconocimiento-img img{
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
}

.reconocimiento-content{
    flex: 1;
    min-width: 320px;
}

.reconocimiento-content span{
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
}

.reconocimiento-content h3{
    font-size: 50px;
    color: #071726;
    margin-top: 20px;
    margin-bottom: 25px;
    line-height: 1.15;
}

.reconocimiento-content p{
    color: #66727d;
    line-height: 1.9;
    font-size: 17px;
}


/* =========================================
                    HISTORIA
========================================= */

.historia{
    padding: 150px 8%;
    background:
    linear-gradient(
        135deg,
        #071726 0%,
        #0c2238 100%
    );

    color: white;
}

.historia span{
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
}

.historia h2{
    font-size: 64px;
    line-height: 1.1;
    max-width: 950px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.historia p{
    max-width: 850px;
    color: rgba(255,255,255,.75);
    line-height: 1.95;
    margin-bottom: 25px;
    font-size: 17px;
}


/* =========================================
                RESPONSIVE
========================================= */

@media(max-width:991px){

    .nosotros-hero h1{
        font-size: 50px;
    }

    .mapa-right h2,
    .section-title h2,
    .historia h2{
        font-size: 40px;
    }

    .reconocimiento-content h3{
        font-size: 34px;
    }

    .mapa-section{
        flex-direction: column;
    }

    .reconocimiento-item,
    .reconocimiento-item.reverse{
        flex-direction: column;
    }

}

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

.contacto-global{
    width: 100%;
    padding: 140px 8%;
    background:
    linear-gradient(
        135deg,
        #071726 0%,
        #0c2238 100%
    );

    text-align: center;
    position: relative;
    overflow: hidden;
}

.contacto-global::before{
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;

    background: radial-gradient(
        circle,
        rgba(255,122,0,.18) 0%,
        transparent 70%
    );

    top: -300px;
    right: -250px;
}

.contacto-global span{
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.contacto-global h2{
    font-size: 68px;
    color: white;
    margin-top: 25px;
    margin-bottom: 25px;
    line-height: 1.1;
    position: relative;
    z-index: 2;
}

.contacto-global p{
    max-width: 700px;
    margin: auto;
    color: rgba(255,255,255,.75);
    line-height: 1.9;
    font-size: 17px;
    position: relative;
    z-index: 2;
}

.contacto-botones{
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.contacto-botones a{
    padding: 18px 38px;
    border-radius: 50px;
    text-decoration: none;
    transition: .3s;
    font-weight: 600;
}

/* BOTON NARANJA */

.contacto-botones a:first-child{
    background: #ff7a00;
    color: white;
}

.contacto-botones a:first-child:hover{
    transform: translateY(-5px);
    background: #ff8f26;
}

/* BOTON TRANSPARENTE */

.contacto-botones a:last-child{
    border: 1px solid rgba(255,255,255,.15);
    color: white;
    backdrop-filter: blur(10px);
}

.contacto-botones a:last-child:hover{
    background: rgba(255,255,255,.06);
}


/* RESPONSIVE */

@media(max-width:991px){

    .contacto-global h2{
        font-size: 42px;
    }

}


/* =====================================================
        NAVBAR — EFECTO SCROLL Y MENÚ MÓVIL
   =====================================================

   Todo lo de abajo es nuevo. No modifica ningún estilo
   que ya existía arriba, solo agrega comportamiento extra.
   
   ¿POR QUÉ VA AL FINAL?
   En CSS, los estilos se aplican en orden de arriba a abajo.
   Al poner esto al final, si hay algún conflicto con lo de
   arriba, estos estilos "ganan" (tienen más prioridad).
   Es como escribir encima de algo con marcador.
*/


/* ----- TRANSICIÓN SUAVE AL NAVBAR ----- */

/*
    Le decimos al navbar que anime cualquier cambio
    en padding o box-shadow (para el efecto de scroll).
    "transition: 0.3s" significa que el cambio tarda
    0.3 segundos en completarse en lugar de ser instantáneo.
*/
.navbar{
    transition: padding 0.3s, box-shadow 0.3s;
}

/*
    Esta clase la agrega el JavaScript cuando el usuario
    baja más de 50px en la página.
    El navbar se compacta un poco y aparece una sombra
    más pronunciada para dar sensación de profundidad.
*/
.navbar.scrolled{
    padding: 14px 8%;
    box-shadow: 0 4px 24px rgba(0,0,0,0.13);
}


/* ----- LINK ACTIVO EN EL NAVBAR ----- */

/*
    La clase "active" marca en qué página estás.
    Cada página le pone esta clase a su propio link
    en el navbar (ej: en nosotros.html, el link
    "Nosotros" tiene class="active").
*/
.nav-links a.active{
    color: #ff7a00;
    font-weight: 600;
}


/* ----- BOTÓN HAMBURGUESA ----- */

/*
    El botón de menú para móvil (las tres líneas ☰).
    Por defecto está OCULTO en desktop con display:none.
    Solo aparece en pantallas pequeñas (ver @media abajo).
*/
.menu-btn{
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #0b3b66;
    line-height: 1;
    padding: 4px;
}

.menu-btn:focus{
    outline: none;
}


/* ----- MENÚ MÓVIL (el que se despliega) ----- */

/*
    Este es el menú que aparece al tocar la hamburguesa.
    Por defecto está OCULTO (display:none).
    El JavaScript le agrega la clase "active" para mostrarlo.
*/
.mobile-menu{
    display: none;
    flex-direction: column;
    background: white;
    padding: 10px 8% 20px;
    gap: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);

    /*
        position:fixed y top hace que el menú aparezca
        justo debajo del navbar.
        El navbar mide aprox 70px de alto, por eso top:70px.
        Si cambias el tamaño del navbar, ajusta este valor.
    */
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    z-index: 999;
}

/*
    Cuando el JS agrega la clase "active",
    el menú cambia de display:none a display:flex
    y aparece con una animación suave hacia abajo.
*/
.mobile-menu.active{
    display: flex;
}

/* Cada link dentro del menú móvil */
.mobile-menu a{
    text-decoration: none;
    color: #1b1b1b;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: color 0.3s;
}

.mobile-menu a:last-child{
    border-bottom: none;
}

.mobile-menu a:hover,
.mobile-menu a.active{
    color: #ff7a00;
}


/* ----- RESPONSIVE: cuándo activar el menú móvil ----- */

/*
    @media es una "regla condicional": los estilos dentro
    solo se aplican cuando la pantalla es del tamaño indicado.
    
    max-width: 768px significa "pantallas de 768px o menos",
    que cubre la mayoría de los celulares.
    
    En desktop (más de 768px) el navbar normal se ve.
    En móvil (768px o menos) el navbar se oculta y
    aparece el botón hamburguesa.
*/
@media(max-width: 768px){

    /* Ocultar el menú de links normal */
    .nav-links{
        display: none;
    }

    /* Mostrar el botón hamburguesa */
    .menu-btn{
        display: block;
    }

    /* El navbar en móvil no necesita tanto padding lateral */
    .navbar{
        padding: 18px 5%;
    }

    .navbar.scrolled{
        padding: 13px 5%;
    }

}

/* =========================================
        SERVICIOS — SECCIÓN COMPLETA
========================================= */

/* Intro con imagen de fondo */
.servicios-intro{
    position: relative;
    padding: 120px 8% 100px;
    background: #071726;
    overflow: hidden;
}

.servicios-intro-bg{
    position: absolute;
    inset: 0;
    background-image: url('../IMG/servicios-hero.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.12;
}

.servicios-intro-content{
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.servicios-intro-content span{
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
}

.servicios-intro-content h2{
    font-size: 62px;
    color: white;
    line-height: 1.1;
    margin: 20px 0 25px;
}

.servicios-intro-content p{
    color: rgba(255,255,255,.72);
    font-size: 17px;
    line-height: 1.9;
}

/* Grid de tarjetas */
.servicios-grid-section{
    padding: 100px 8%;
    background: #f5f7fa;
}

.servicios-cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.servicio-card{
    background: white;
    border-radius: 20px;
    padding: 45px 38px;
    border: 1px solid rgba(7,23,38,.07);
    transition: .4s;
    position: relative;
    overflow: hidden;
}

.servicio-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ff7a00, #ffb347);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.servicio-card:hover::before{
    transform: scaleX(1);
}

.servicio-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 25px 55px rgba(0,0,0,.09);
    border-color: rgba(255,122,0,.2);
}

.servicio-num{
    font-size: 11px;
    letter-spacing: 3px;
    color: #ff7a00;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.servicio-icon{
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255,122,0,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    transition: .4s;
}

.servicio-card:hover .servicio-icon{
    background: #ff7a00;
}

.servicio-icon i{
    font-size: 1.8rem;
    color: #ff7a00;
    transition: .4s;
}

.servicio-card:hover .servicio-icon i{
    color: white;
}

.servicio-card h3{
    font-size: 22px;
    color: #071726;
    margin-bottom: 14px;
    font-weight: 700;
}

.servicio-card > p{
    color: #66727d;
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 28px;
}

.servicio-lista{
    list-style: none;
    border-top: 1px solid rgba(7,23,38,.07);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.servicio-lista li{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #4f5d6b;
}

.servicio-lista li::before{
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff7a00;
    flex-shrink: 0;
}

/* Banner CTA */
.servicios-cta{
    padding: 70px 8%;
    background: linear-gradient(135deg, #071726 0%, #0b2238 100%);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.06);
}

.servicios-cta::before{
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,122,0,.1) 0%, transparent 70%);
    top: -150px;
    right: 100px;
    pointer-events: none;
}

.servicios-cta-text{
    position: relative;
    z-index: 2;
}

.servicios-cta-text span{
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
    font-weight: 700;
}

.servicios-cta-text h3{
    font-size: 36px;
    color: white;
    margin: 12px 0 10px;
    line-height: 1.2;
}

.servicios-cta-text p{
    color: rgba(255,255,255,.60);
    font-size: 15px;
    line-height: 1.75;
    max-width: 520px;
}

.servicios-cta-btns{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.servicios-cta-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ff7a00;
    color: white;
    text-decoration: none;
    padding: 15px 36px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: .3s;
    border: 2px solid transparent;
}

.servicios-cta-btn:hover{
    background: #e96f00;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255,122,0,.3);
}

.servicios-cta-btn.wa{
    background: transparent;
    border: 2px solid #25d366;
    color: #25d366;
}

.servicios-cta-btn.wa i{
    font-size: 1.1rem;
}

.servicios-cta-btn.wa:hover{
    background: #25d366;
    color: white;
    box-shadow: 0 10px 25px rgba(37,211,102,.25);
}

/* Franja entre CTA y footer */
.servicios-stats{
    background: #f5f7fa;
    padding: 55px 8%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    border-top: 3px solid #ff7a00;
}

.stat-item{
    text-align: center;
}

.stat-item h4{
    font-size: 46px;
    font-weight: 800;
    color: #0b3b66;
    line-height: 1;
}

.stat-item h4 span{
    color: #ff7a00;
}

.stat-item p{
    color: #66727d;
    font-size: 14px;
    margin-top: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media(max-width: 991px){
    .servicios-cta{
        grid-template-columns: 1fr;
        text-align: center;
    }
    .servicios-cta-btns{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .servicios-cta-text h3{
        font-size: 28px;
    }
}

@media(max-width: 768px){
    .servicios-cta-btns{
        flex-direction: column;
        align-items: center;
    }
    .servicios-stats{
        grid-template-columns: 1fr 1fr;
    }
}
/* =========================================
        CARRUSEL DE FOTOS
========================================= */

.carrusel{
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
    background: #071726;
}

.carrusel-track{
    display: flex;
    width: 100%;
    height: 100%;
    transition: opacity .8s ease;
}

.carrusel-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.carrusel-slide.activo{
    opacity: 1;
}


.carrusel-slide:nth-child(1){ background-image: url('../img/carrusel-1.jpg'); background-size: cover; background-position: center; }
.carrusel-slide:nth-child(2){ background-image: url('../img/carrusel-2.jpg'); background-size: cover; background-position: center; }
.carrusel-slide:nth-child(3){ background-image: url('../img/carrusel-3.jpg'); background-size: cover; background-position: center; }
.carrusel-slide:nth-child(4){ background-image: url('../img/carrusel-4.jpg'); background-size: cover; background-position: center; }
.carrusel-slide:nth-child(5){ background-image: url('../img/carrusel-5.jpg'); background-size: cover; background-position: center; }

.carrusel-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(7,23,38,0.25) 0%,
        rgba(7,23,38,0.55) 100%
    );
    z-index: 1;
}

.carrusel-contenido{
    position: absolute;
    bottom: 55px;
    left: 8%;
    z-index: 2;
    color: white;
}

.carrusel-contenido span{
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
    font-weight: 700;
}

.carrusel-contenido h3{
    font-size: 36px;
    font-weight: 700;
    margin-top: 10px;
    line-height: 1.2;
    max-width: 600px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease .3s, transform .6s ease .3s;
}

.carrusel-slide.activo .carrusel-contenido h3{
    opacity: 1;
    transform: translateY(0);
}

/* Puntos indicadores */
.carrusel-dots{
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.carrusel-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    transition: .4s;
    cursor: default;
}

.carrusel-dot.activo{
    background: #ff7a00;
    width: 28px;
    border-radius: 4px;
}

/* Barra de progreso */
.carrusel-progreso{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #ff7a00;
    width: 0%;
    z-index: 3;
    transition: width 5s linear;
}

.carrusel-progreso.corriendo{
    width: 100%;
}

@media(max-width: 768px){
    .carrusel{
        height: 380px;
    }
    .carrusel-contenido h3{
        font-size: 24px;
    }
}
/* =========================================
   MAPA — REEMPLAZA TODO LO DE .mapa-section
   en tu styles.css (borra el bloque viejo y
   pega esto en su lugar)
========================================= */

.mapa-section {
    width: 100%;
    padding: 120px 6% 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: linear-gradient(135deg, #071726 0%, #0c2238 100%);
}

/* Encabezado centrado arriba del mapa */
.mapa-header {
    text-align: center;
    margin-bottom: 60px;
}

.mapa-header .section-tag {
    color: #ff7a00;
}

.mapa-header h2 {
    font-size: 54px;
    line-height: 1.1;
    color: white;
    margin-top: 16px;
    max-width: 800px;
}

/* Mapa ocupa todo el ancho */
.mapa-left {
    width: 100%;
    min-width: unset;
    flex: unset;
    position: relative;
}

#mapa-wrapper {
    position: relative;
    width: 100%;
}

#mapa-container {
    width: 100%;
}

#mapa-container svg {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    filter: drop-shadow(0 20px 60px rgba(0,0,0,0.4));
}

/* Tooltip fondo oscuro */
#mapa-tooltip {
    display: none;
    position: absolute;
    background: #071726;
    border: 1px solid #ff7a00;
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    pointer-events: none;
    z-index: 20;
    min-width: 130px;
    line-height: 1.5;
}

#mapa-tooltip strong {
    display: block;
    font-weight: 600;
    color: #ff7a00;
    font-size: 14px;
}

#mapa-tooltip .tooltip-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.65);
    margin-top: 3px;
}

/* Leyenda centrada bajo el mapa */
.mapa-leyenda {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

.leyenda-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.leyenda-dot {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    flex-shrink: 0;
}

.leyenda-inactivo {
    background: rgba(255,255,255,0.15);
    border: 0.5px solid rgba(255,255,255,0.25);
}

.leyenda-activo {
    background: #ff7a00;
}

/* Franja de números debajo */
.mapa-right {
    width: 100%;
    flex: unset;
    min-width: unset;
    margin-top: 70px;
    padding-top: 50px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.mapa-right .section-tag {
    color: #ff7a00;
}

.mapa-right h2 {
    display: none; /* ya está arriba en .mapa-header */
}

.mapa-right p {
    color: rgba(255,255,255,0.65);
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 16px;
}

.numbers {
    display: flex;
    flex-direction: row;
    gap: 50px;
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.numbers > div {
    text-align: center;
}

.numbers h3 {
    font-size: 58px;
    color: #ff7a00;
    line-height: 1;
}

.numbers p {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 8px;
}

/* Responsive */
@media(max-width: 991px) {
    .mapa-header h2 {
        font-size: 36px;
    }
    .mapa-right {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    .numbers {
        justify-content: center;
        gap: 30px;
    }
    .numbers h3 {
        font-size: 42px;
    }
}

@media(max-width: 600px) {
    .mapa-section {
        padding: 80px 5% 70px;
    }
    .mapa-header h2 {
        font-size: 28px;
    }
}

/* =========================================
   RECONOCIMIENTOS — REDISEÑO EDITORIAL
   (pegar al final de styles.css)
========================================= */

.reconocimientos {
    padding: 120px 8%;
    background: #0a0a0a;
    position: relative;
    overflow: hidden;
}

/* Grain de fondo sutil */
.reconocimientos::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,162,39,0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Título de sección */
.reconocimientos .section-title {
    position: relative;
    z-index: 2;
    margin-bottom: 80px;
}

.reconocimientos .section-title span {
    color: #c9a227;
    letter-spacing: 4px;
    font-size: 12px;
}

.reconocimientos .section-title h2 {
    color: white;
    font-size: 52px;
    line-height: 1.1;
    max-width: 700px;
    margin-top: 18px;
}

/* Quitar el underline naranja del section-title genérico */
.reconocimientos .section-title h2::after {
    background: #c9a227;
    width: 60px;
    height: 3px;
    margin: 16px 0 0;
}

/* ---- CARD ---- */
.reconocimiento-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 60px;
    border: 1px solid rgba(201,162,39,0.18);
    border-radius: 4px;
    overflow: hidden;
    background: #111111;
    position: relative;
    transition: border-color 0.4s;
    flex-wrap: unset; /* reset */
    align-items: unset;
}

.reconocimiento-item:hover {
    border-color: rgba(201,162,39,0.5);
}

/* Número decorativo de fondo */
.reconocimiento-item::before {
    counter-increment: reconocimiento-counter;
    content: "0" counter(reconocimiento-counter);
    position: absolute;
    font-size: 200px;
    font-weight: 800;
    color: rgba(201,162,39,0.04);
    line-height: 1;
    right: 5%;
    bottom: -20px;
    pointer-events: none;
    z-index: 0;
}

.reconocimientos {
    counter-reset: reconocimiento-counter;
}

/* --- IMAGEN --- */
.reconocimiento-img {
    flex: unset;
    min-width: unset;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.reconocimiento-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0) 60%
    );
    pointer-events: none;
}

/* Línea dorada decorativa en el borde de la imagen */
.reconocimiento-item:not(.reverse) .reconocimiento-img {
    border-right: 2px solid rgba(201,162,39,0.3);
}
.reconocimiento-item.reverse .reconocimiento-img {
    border-left: 2px solid rgba(201,162,39,0.3);
}

.reconocimiento-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.7s ease;
    filter: brightness(0.92);
}

.reconocimiento-item:hover .reconocimiento-img img {
    transform: scale(1.04);
    filter: brightness(1);
}

/* --- CONTENIDO --- */
.reconocimiento-content {
    flex: unset;
    min-width: unset;
    padding: 55px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.reconocimiento-item.reverse {
    flex-direction: unset; /* usar grid, no flex */
}

/* Grid columnas invertidas para .reverse */
.reconocimiento-item.reverse {
    direction: rtl;
}
.reconocimiento-item.reverse > * {
    direction: ltr;
}

.reconocimiento-content span {
    color: #c9a227;
    letter-spacing: 4px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Línea separadora dorada bajo el tag */
.reconocimiento-content span::after {
    content: "";
    display: block;
    width: 30px;
    height: 1px;
    background: rgba(201,162,39,0.4);
    margin-top: 14px;
    margin-bottom: 18px;
}

.reconocimiento-content h3 {
    font-size: 32px;
    color: white;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.reconocimiento-content p {
    color: rgba(255,255,255,0.55);
    line-height: 1.85;
    font-size: 15px;
}

/* ---- RESPONSIVE ---- */
@media(max-width: 900px) {
    .reconocimiento-item,
    .reconocimiento-item.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .reconocimiento-item::before {
        font-size: 120px;
    }

    .reconocimiento-img {
        aspect-ratio: 16/9;
        border-right: none !important;
        border-left: none !important;
        border-bottom: 2px solid rgba(201,162,39,0.3);
    }

    .reconocimiento-content {
        padding: 40px 35px;
    }

    .reconocimiento-content h3 {
        font-size: 26px;
    }

    .reconocimientos .section-title h2 {
        font-size: 36px;
    }
}


/* =========================================
   MAPA — AJUSTE DE ESCALA (más compacto)
========================================= */

.mapa-section {
    padding: 90px 6% 75px;
}

.mapa-header {
    margin-bottom: 45px;
}

.mapa-header h2 {
    font-size: 42px;
}

.mapa-right {
    margin-top: 50px;
    padding-top: 40px;
    gap: 40px;
}

.numbers h3 {
    font-size: 48px;
}

@media(max-width: 991px) {
    .mapa-header h2 {
        font-size: 30px;
    }
    .numbers h3 {
        font-size: 36px;
    }
}

* /* ===== RESPONSIVE: TÍTULOS GRANDES ===== */
.hero-content h1{
    font-size: clamp(2.4rem, 9vw, 6rem);
}

.experiencia-left h2{
    font-size: clamp(2rem, 6vw, 4rem);
}

.mapa-header h2,
.contacto-global h2{
    font-size: clamp(1.8rem, 6vw, 3.5rem);
}

/* Red de seguridad: si algo se desborda igual, no rompe el layout */
html, body{
    overflow-x: hidden;
}

*{
    overflow-wrap: break-word;
}
 /* 3. Tarjetas de teléfono/correo por sucursal */
    .sucursal-row{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sucursal-info{
        grid-template-columns: 1fr;
        gap: 15px;
    }

/* Red de seguridad general: si algo más se desborda,
   no genera scroll horizontal en todo el sitio */
html, body{
    overflow-x: hidden
    }
    /* =========================================
   RESPONSIVE MOBILE — FIX SCROLL HORIZONTAL
   (título servicios, experiencia, sucursales)
========================================= */

@media(max-width: 768px){

    /* 1. Título "Soluciones integrales..." en servicios.html */
    .servicios-intro-content h2{
        font-size: clamp(1.8rem, 8vw, 62px);
    }

    /* 2. Sección "Más de medio siglo..." (experiencia) */
    .experiencia{
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 80px 6%;
    }

    .experiencia-left h2{
        font-size: clamp(2rem, 9vw, 4rem);
    }

    /* 3. Tarjetas de teléfono/correo por sucursal */
    .sucursal-row{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sucursal-info{
        grid-template-columns: 1fr;
        gap: 15px;
    }

}

/* Red de seguridad general: si algo más se desborda,
   no genera scroll horizontal en todo el sitio */
html, body{
    overflow-x: hidden;
    }