/* =========================================================
   HOME - INGENIEROS Y ASOCIADOS
========================================================= */


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

.hero-home{
    position:relative;
    min-height:720px;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(7,26,52,.92) 0%,
            rgba(10,38,74,.82) 48%,
            rgba(10,38,74,.48) 100%
        ),
        url('../img/home.png');

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


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

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.10)
        );
}


.hero-contenido{
    position:relative;
    z-index:2;
    color:#fff;
    padding-top:50px;
    padding-bottom:50px;
}


.etiqueta-hero{
    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    border:1px solid rgba(255,255,255,.25);
    border-radius:50px;

    background:rgba(255,255,255,.09);
    backdrop-filter:blur(8px);

    color:#fff;

    font-size:.84rem;
    font-weight:700;
    letter-spacing:.04em;

    margin-bottom:25px;
}


.hero-contenido h1{
    max-width:950px;

    font-size:clamp(2.7rem,5vw,4.5rem);
    line-height:1.04;
    letter-spacing:-.04em;

    margin-bottom:25px;

    font-weight:800;
}


.hero-contenido h1 span{
    color:#dbeaff;
}


.hero-descripcion{
    max-width:760px;

    font-size:1.18rem;
    line-height:1.7;

    color:#e7eff9;

    margin-bottom:35px;
}


.hero-botones{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:15px;
}


.btn-principal,
.btn-secundario{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    min-height:54px;

    padding:0 28px;

    border-radius:50px;

    font-size:.96rem;
    font-weight:700;

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


.btn-principal{
    background:var(--ing-primary);
    color:#fff;
}


.btn-principal:hover{
    background:var(--ing-primary-hover);
    transform:translateY(-2px);
}


.btn-principal span{
    transition:transform .25s ease;
}


.btn-principal:hover span{
    transform:translateX(4px);
}


.btn-secundario{
    border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.08);
    color:#fff;
    backdrop-filter:blur(5px);
}


.btn-secundario:hover{
    background:#fff;
    color:var(--ing-dark);
    transform:translateY(-2px);
}


.hero-especialidades{
    display:flex;
    flex-wrap:wrap;

    gap:12px 28px;

    max-width:850px;

    margin-top:42px;
    padding-top:27px;

    border-top:1px solid rgba(255,255,255,.18);
}


.hero-especialidades span{
    position:relative;

    color:rgba(255,255,255,.86);

    font-size:.88rem;
    font-weight:600;
}


.hero-especialidades span:not(:last-child)::after{
    content:"";

    position:absolute;

    right:-16px;
    top:50%;

    width:4px;
    height:4px;

    border-radius:50%;

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


/* =========================================================
   ELEMENTOS GENERALES
========================================================= */

.etiqueta,
.encabezado-seccion > span{
    display:inline-block;

    color:var(--ing-primary);

    font-size:.82rem;
    font-weight:800;

    letter-spacing:.10em;
    text-transform:uppercase;

    margin-bottom:13px;
}


.encabezado-seccion{
    max-width:760px;

    margin-bottom:50px;
}


.encabezado-seccion h2,
.intro-titulo h2,
.nosotros-texto h2,
.instituciones-texto h2{
    color:var(--ing-dark);

    font-size:clamp(2rem,3vw,2.7rem);
    line-height:1.15;
    letter-spacing:-.025em;

    margin-bottom:18px;
}


.encabezado-seccion p,
.intro-texto p,
.nosotros-texto p,
.instituciones-texto p{
    color:var(--ing-muted);

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


.encabezado-centro{
    margin-left:auto;
    margin-right:auto;

    text-align:center;
}


/* =========================================================
   INTRO
========================================================= */

.intro-home{
    padding:75px 0;

    background:#fff;

    border-bottom:1px solid var(--ing-border);
}


.intro-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}


.intro-titulo h2{
    margin-bottom:0;
}


.intro-texto p{
    margin:0;
}


/* =========================================================
   ÁREAS
========================================================= */

.areas-home{
    padding:105px 0;

    background:#f7f9fc;
}


.grid-areas{
    display:grid;

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

    gap:22px;
}


.card-area{
    position:relative;

    min-height:340px;

    display:flex;
    flex-direction:column;

    background:#fff;

    border:1px solid #e4eaf0;
    border-radius:18px;

    padding:30px 27px;

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


.card-area:hover{
    transform:translateY(-7px);

    border-color:rgba(30,100,185,.35);

    box-shadow:
        0 25px 55px rgba(11,35,71,.10);
}


.icono-area{
    display:flex;
    align-items:center;
    justify-content:center;

    width:54px;
    height:54px;

    border-radius:14px;

    background:var(--ing-light);

    color:var(--ing-primary);

    font-size:.8rem;
    font-weight:800;

    margin-bottom:27px;
}


.card-area-contenido{
    display:flex;
    flex-direction:column;

    flex:1;
}


.card-area h3{
    color:var(--ing-dark);

    font-size:1.28rem;

    margin-bottom:14px;
}


.card-area p{
    color:var(--ing-muted);

    line-height:1.68;

    margin-bottom:22px;

    font-size:.96rem;
}


.link-card{
    display:inline-flex;
    align-items:center;

    gap:8px;

    color:var(--ing-primary);

    font-size:.92rem;
    font-weight:700;

    margin-top:auto;
}


.link-card span{
    transition:transform .25s ease;
}


.card-area:hover .link-card span{
    transform:translateX(4px);
}


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

.nosotros-resumen{
    padding:110px 0;

    background:#fff;
}


.nosotros-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:75px;

    align-items:center;
}


.nosotros-imagen-contenedor{
    position:relative;
}


.nosotros-img{
    min-height:500px;

    border-radius:22px;

    background:
        linear-gradient(
            rgba(11,35,71,.10),
            rgba(11,35,71,.24)
        ),
        url('../img/nosotros.png');

    background-size:cover;
    background-position:center;

    box-shadow:
        0 28px 65px rgba(11,35,71,.15);
}


.nosotros-badge{
    position:absolute;

    right:-25px;
    bottom:35px;

    width:215px;

    background:#fff;

    border:1px solid var(--ing-border);
    border-radius:16px;

    padding:20px;

    box-shadow:
        0 18px 40px rgba(11,35,71,.15);
}


.nosotros-badge strong{
    display:block;

    color:var(--ing-dark);

    font-size:1.15rem;

    margin-bottom:5px;
}


.nosotros-badge span{
    color:var(--ing-muted);

    font-size:.87rem;
}


.nosotros-texto p{
    margin-bottom:18px;
}


.nosotros-puntos{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px 18px;

    margin:30px 0;
}


.nosotros-puntos div{
    display:flex;
    align-items:center;

    gap:10px;

    color:var(--ing-dark);

    font-weight:600;

    font-size:.93rem;
}


.nosotros-puntos div span{
    display:flex;
    align-items:center;
    justify-content:center;

    width:25px;
    height:25px;

    border-radius:50%;

    background:var(--ing-light);

    color:var(--ing-primary);

    font-size:.75rem;
}


.btn-link{
    display:inline-flex;
    align-items:center;

    gap:10px;

    color:var(--ing-primary);

    font-weight:800;

    margin-top:5px;
}


.btn-link span{
    transition:transform .25s ease;
}


.btn-link:hover span{
    transform:translateX(5px);
}


/* =========================================================
   PROCESO
========================================================= */

.proceso-home{
    padding:105px 0;

    background:var(--ing-dark);

    color:#fff;
}


.proceso-home .encabezado-seccion h2{
    color:#fff;
}


.proceso-home .encabezado-seccion p{
    color:#cbd8e7;
}


.proceso-home .encabezado-seccion > span{
    color:#91bdf5;
}


.grid-proceso{
    position:relative;

    display:grid;

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

    gap:35px;
}


.grid-proceso::before{
    content:"";

    position:absolute;

    left:7%;
    right:7%;
    top:27px;

    height:1px;

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


.paso-proceso{
    position:relative;

    z-index:2;
}


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

    width:55px;
    height:55px;

    border-radius:50%;

    background:var(--ing-primary);

    color:#fff;

    font-size:.81rem;
    font-weight:800;

    margin-bottom:25px;

    box-shadow:
        0 0 0 7px var(--ing-dark);
}


.paso-proceso h3{
    color:#fff;

    font-size:1.18rem;

    margin-bottom:12px;
}


.paso-proceso p{
    color:#c5d1df;

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


/* =========================================================
   SERVICIOS
========================================================= */

.servicios-destacados{
    padding:110px 0;

    background:#fff;
}


.servicios-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    gap:30px;
}


.servicios-ver-todos{
    margin-bottom:52px;
}


.servicios-ver-todos a{
    display:flex;
    align-items:center;

    gap:10px;

    color:var(--ing-primary);

    font-weight:700;
}


.servicios-ver-todos span{
    transition:transform .25s ease;
}


.servicios-ver-todos a:hover span{
    transform:translateX(4px);
}


.grid-servicios-home{
    display:grid;

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

    gap:22px;
}


.servicio-home{
    position:relative;

    padding:33px 34px;

    min-height:240px;

    border:1px solid var(--ing-border);
    border-radius:18px;

    background:#fff;

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


.servicio-home:hover{
    transform:translateY(-5px);

    border-color:rgba(30,100,185,.30);

    box-shadow:
        0 20px 45px rgba(11,35,71,.09);
}


.servicio-numero{
    display:block;

    color:var(--ing-primary);

    font-size:.8rem;
    font-weight:800;

    letter-spacing:.07em;

    margin-bottom:22px;
}


.servicio-home h3{
    color:var(--ing-dark);

    font-size:1.35rem;

    margin-bottom:14px;
}


.servicio-home p{
    max-width:520px;

    color:var(--ing-muted);

    font-size:.96rem;
    line-height:1.68;

    margin-bottom:23px;
}


.servicio-home a{
    display:inline-flex;
    align-items:center;

    gap:8px;

    color:var(--ing-primary);

    font-size:.9rem;
    font-weight:700;
}


.servicio-home a span{
    transition:transform .25s ease;
}


.servicio-home:hover a span{
    transform:translateX(4px);
}


/* =========================================================
   INSTITUCIONES
========================================================= */

.instituciones-home{
    padding:100px 0;

    background:#f6f8fb;

    border-top:1px solid #edf1f5;
    border-bottom:1px solid #edf1f5;
}


.instituciones-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}


.instituciones-lista{
    border-top:1px solid var(--ing-border);
}


.institucion-item{
    display:grid;

    grid-template-columns:150px 1fr;

    gap:25px;

    padding:22px 0;

    border-bottom:1px solid var(--ing-border);
}


.institucion-item strong{
    color:var(--ing-dark);
}


.institucion-item span{
    color:var(--ing-muted);

    font-size:.93rem;
}


/* =========================================================
   CLIENTES
========================================================= */

.clientes-home{
    padding:95px 0;

    background:#fff;
}


.clientes-lista{
    display:grid;

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

    gap:14px;
}


.clientes-lista div{
    padding:21px 15px;

    text-align:center;

    border:1px solid var(--ing-border);
    border-radius:12px;

    color:var(--ing-dark);

    font-size:.9rem;
    font-weight:700;

    background:#fff;

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


.clientes-lista div:hover{
    border-color:rgba(30,100,185,.35);

    background:var(--ing-light);
}


/* =========================================================
   CTA PRINCIPAL
========================================================= */

.cta-home{
    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            var(--ing-dark) 0%,
            #123c73 100%
        );

    color:#fff;
}


.cta-home::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    right:-130px;
    top:-170px;

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


.cta-home::after{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    right:-70px;
    top:-110px;

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


.cta-contenido{
    position:relative;
    z-index:2;

    max-width:850px;

    margin:auto;

    text-align:center;
}


.cta-etiqueta{
    display:inline-block;

    color:#a9c8ef;

    font-size:.82rem;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.10em;

    margin-bottom:18px;
}


.cta-contenido h2{
    font-size:clamp(2.1rem,4vw,3.2rem);
    line-height:1.15;
    letter-spacing:-.03em;

    margin-bottom:20px;
}


.cta-contenido p{
    max-width:680px;

    margin:0 auto 32px;

    color:#d1deed;

    font-size:1.05rem;
    line-height:1.7;
}


.cta-botones{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:14px;
}


.btn-cta-principal,
.btn-cta-secundario{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    min-height:54px;

    padding:0 28px;

    border-radius:50px;

    font-weight:700;

    transition:.25s ease;
}


.btn-cta-principal{
    background:#fff;

    color:var(--ing-dark);
}


.btn-cta-principal:hover{
    transform:translateY(-2px);

    background:#f4f7fa;
}


.btn-cta-principal span{
    transition:transform .25s ease;
}


.btn-cta-principal:hover span{
    transform:translateX(4px);
}


.btn-cta-secundario{
    border:1px solid rgba(255,255,255,.28);

    color:#fff;
}


.btn-cta-secundario:hover{
    background:rgba(255,255,255,.08);

    transform:translateY(-2px);
}


/* =========================================================
   CTA FLOTANTE
========================================================= */

.cta-flotante{
    position:fixed;

    right:27px;
    bottom:27px;

    width:335px;

    padding:27px;

    border:1px solid var(--ing-border);
    border-radius:18px;

    background:#fff;

    box-shadow:
        0 25px 65px rgba(11,35,71,.20);

    z-index:900;

    opacity:0;

    transform:translateY(30px);

    pointer-events:none;

    transition:
        opacity .35s ease,
        transform .35s ease;
}


.cta-flotante.activo{
    opacity:1;

    transform:translateY(0);

    pointer-events:auto;
}


.cta-flotante-etiqueta{
    display:block;

    color:var(--ing-primary);

    font-size:.74rem;
    font-weight:800;

    letter-spacing:.08em;
    text-transform:uppercase;

    margin-bottom:9px;
}


.cta-flotante h3{
    color:var(--ing-dark);

    font-size:1.28rem;

    margin-bottom:10px;
}


.cta-flotante p{
    color:var(--ing-muted);

    font-size:.92rem;
    line-height:1.6;

    margin-bottom:19px;
}


.cta-flotante a{
    display:inline-flex;
    align-items:center;

    gap:8px;

    background:var(--ing-primary);

    color:#fff;

    padding:12px 20px;

    border-radius:50px;

    font-size:.9rem;
    font-weight:700;
}


.cta-flotante a:hover{
    background:var(--ing-primary-hover);
}


.cerrar-cta{
    position:absolute;

    top:13px;
    right:13px;

    width:29px;
    height:29px;

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

    border:none;
    border-radius:50%;

    background:#f1f4f7;

    color:var(--ing-dark);

    font-size:1.1rem;

    cursor:pointer;

    transition:.2s ease;
}


.cerrar-cta:hover{
    background:#e7ebef;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media(max-width:1050px){

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


    .nosotros-grid,
    .instituciones-grid{
        grid-template-columns:1fr;

        gap:50px;
    }


    .nosotros-img{
        min-height:460px;
    }


    .nosotros-badge{
        right:25px;
    }


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

        gap:45px 30px;
    }


    .grid-proceso::before{
        display:none;
    }


    .clientes-lista{
        grid-template-columns:repeat(3,1fr);
    }

}


/* =========================================================
   RESPONSIVE - TABLET PEQUEÑA
========================================================= */

@media(max-width:768px){

    .hero-home{
        min-height:670px;

        background-position:60% center;
    }


    .hero-contenido h1{
        max-width:650px;
    }


    .hero-descripcion{
        font-size:1.05rem;
    }


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

        gap:25px;
    }


    .areas-home,
    .nosotros-resumen,
    .proceso-home,
    .servicios-destacados,
    .instituciones-home,
    .clientes-home,
    .cta-home{
        padding:80px 0;
    }


    .grid-servicios-home{
        grid-template-columns:1fr;
    }


    .servicios-top{
        display:block;
    }


    .servicios-ver-todos{
        margin-top:-25px;
        margin-bottom:40px;
    }


    .institucion-item{
        grid-template-columns:120px 1fr;
    }

}


/* =========================================================
   RESPONSIVE - MÓVIL
========================================================= */

@media(max-width:600px){

    .hero-home{
        min-height:680px;

        background-position:62% center;
    }


    .hero-contenido{
        padding-top:55px;
        padding-bottom:55px;
    }


    .etiqueta-hero{
        padding:9px 14px;

        font-size:.75rem;
    }


    .hero-contenido h1{
        font-size:2.45rem;

        line-height:1.08;

        letter-spacing:-.03em;
    }


    .hero-descripcion{
        font-size:.98rem;

        line-height:1.65;
    }


    .hero-botones{
        align-items:stretch;
        flex-direction:column;

        max-width:310px;
    }


    .btn-principal,
    .btn-secundario{
        width:100%;
    }


    .hero-especialidades{
        gap:10px 20px;

        margin-top:34px;
    }


    .hero-especialidades span{
        font-size:.76rem;
    }


    .hero-especialidades span::after{
        display:none;
    }


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


    .card-area{
        min-height:auto;
    }


    .nosotros-img{
        min-height:330px;

        border-radius:17px;
    }


    .nosotros-badge{
        position:relative;

        right:auto;
        bottom:auto;

        width:calc(100% - 30px);

        margin:-35px auto 0;

        border-radius:14px;
    }


    .nosotros-puntos{
        grid-template-columns:1fr;
    }


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

        gap:35px;
    }


    .paso-proceso{
        padding-left:0;
    }


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


    .institucion-item{
        grid-template-columns:1fr;

        gap:7px;
    }


    .cta-contenido h2{
        font-size:2rem;
    }


    .cta-botones{
        flex-direction:column;

        max-width:300px;

        margin:auto;
    }


    .btn-cta-principal,
    .btn-cta-secundario{
        width:100%;
    }


    .cta-flotante{
        width:calc(100% - 30px);

        right:15px;
        bottom:15px;

        padding:24px;
    }

}