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


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

.hero-servicios{
    position:relative;

    min-height:570px;

    display:flex;
    align-items:center;

    overflow:hidden;

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

    background-size:cover;

    background-position:center;
}


.hero-servicios-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03),
            rgba(0,0,0,.13)
        );
}


.hero-servicios-contenido{
    position:relative;

    z-index:2;

    color:#fff;
}


.etiqueta-hero{
    display:inline-flex;

    align-items:center;

    padding:9px 17px;

    margin-bottom:24px;

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

    border-radius:50px;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.04em;
}


.hero-servicios h1{
    max-width:900px;

    font-size:clamp(2.7rem,5vw,4.3rem);

    line-height:1.05;

    letter-spacing:-.04em;

    margin-bottom:24px;

    font-weight:800;
}


.hero-servicios h1 span{
    color:#d9eaff;
}


.hero-servicios p{
    max-width:760px;

    color:#e1eaf5;

    font-size:1.1rem;

    line-height:1.72;
}


.hero-servicios-badges{
    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:35px;
}


.hero-servicios-badges div{
    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 15px;

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

    border-radius:50px;

    background:rgba(255,255,255,.07);

    color:#fff;

    font-size:.82rem;

    backdrop-filter:blur(5px);
}


.hero-servicios-badges i{
    color:#8fdcf0;
}


/* =========================================================
   GENERAL
========================================================= */

.etiqueta{
    display:inline-block;

    color:var(--ing-primary);

    font-size:.8rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.1em;

    margin-bottom:14px;
}


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

.intro-servicios{
    padding:90px 0 65px;

    background:#fff;
}


.intro-box{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}


.intro-texto h2{
    color:var(--ing-dark);

    font-size:clamp(2rem,3vw,2.7rem);

    line-height:1.17;

    letter-spacing:-.025em;
}


.intro-info{
    border-left:2px solid var(--ing-primary);

    padding-left:30px;
}


.intro-info p{
    color:var(--ing-muted);

    font-size:1rem;

    line-height:1.75;

    margin-bottom:13px;
}


.intro-info p:last-child{
    margin-bottom:0;
}


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

.servicios-principales{
    padding:35px 0 105px;

    background:#fff;
}


.grid-servicios{
    display:grid;

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

    gap:28px;
}


.card-servicio{
    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border:1px solid #e1e8ef;

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 12px 35px rgba(11,35,71,.06);

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


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

    border-color:rgba(18,99,188,.30);

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


/* IMAGEN */

.servicio-imagen{
    position:relative;

    height:235px;

    overflow:hidden;

    background:#eef3f8;
}


.servicio-imagen img{
    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .55s ease;
}


.card-servicio:hover .servicio-imagen img{
    transform:scale(1.045);
}


.servicio-imagen-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(6,30,57,.55) 100%
        );
}


.icono-servicio{
    position:absolute;

    left:25px;

    bottom:20px;

    width:54px;
    height:54px;

    display:flex;

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

    border-radius:14px;

    background:#fff;

    color:var(--ing-primary);

    font-size:1.25rem;

    box-shadow:
        0 12px 28px rgba(5,28,55,.18);
}


/* CONTENIDO */

.servicio-contenido{
    display:flex;

    flex-direction:column;

    flex:1;

    padding:29px 30px 32px;
}


.badge-servicio{
    display:inline-block;

    align-self:flex-start;

    margin-bottom:14px;

    color:var(--ing-primary);

    font-size:.76rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.08em;
}


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

    font-size:1.48rem;

    line-height:1.25;

    margin-bottom:14px;
}


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

    font-size:.95rem;

    line-height:1.7;

    margin-bottom:23px;
}


.card-servicio ul{
    list-style:none;

    margin:0 0 27px;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:11px;
}


.card-servicio li{
    display:flex;

    align-items:center;

    gap:11px;

    color:#3c4b5c;

    font-size:.9rem;

    font-weight:600;
}


.card-servicio li i{
    width:21px;
    height:21px;

    flex-shrink:0;

    display:flex;

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

    border-radius:50%;

    background:var(--ing-light);

    color:var(--ing-primary);

    font-size:.58rem;
}


.servicio-link{
    display:inline-flex;

    align-items:center;

    gap:8px;

    align-self:flex-start;

    margin-top:auto;

    color:var(--ing-primary);

    font-size:.9rem;

    font-weight:800;
}


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


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


/* =========================================================
   CAPACIDADES
========================================================= */

.capacidades{
    padding:38px 0;

    background:var(--ing-dark);

    color:#fff;
}


.capacidades-contenido{
    display:grid;

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

    gap:0;
}


.capacidad{
    display:flex;

    align-items:center;

    gap:15px;

    padding:10px 28px;

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


.capacidad:last-child{
    border-right:none;
}


.capacidad > i{
    width:43px;
    height:43px;

    flex-shrink:0;

    display:flex;

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

    border-radius:12px;

    background:rgba(255,255,255,.08);

    color:#85d5e9;

    font-size:1rem;
}


.capacidad div{
    display:flex;

    flex-direction:column;

    gap:4px;
}


.capacidad strong{
    color:#fff;

    font-size:.9rem;
}


.capacidad span{
    color:#b8c8da;

    font-size:.75rem;
}


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

.proceso-servicios{
    padding:105px 0;

    background:#f6f8fb;
}


.section-header{
    max-width:720px;

    margin:0 auto 60px;

    text-align:center;
}


.section-header h2{
    color:var(--ing-dark);

    font-size:clamp(2rem,3vw,2.7rem);

    line-height:1.2;

    margin-bottom:16px;
}


.section-header p{
    color:var(--ing-muted);

    line-height:1.7;
}


.timeline{
    display:grid;

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

    gap:20px;
}


.timeline-item{
    position:relative;

    padding:31px 27px;

    border:1px solid #dfe6ed;

    border-radius:16px;

    background:#fff;

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


.timeline-item:hover{
    transform:translateY(-5px);

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


.numero{
    position:absolute;

    right:20px;

    top:18px;

    color:#b5c4d5;

    font-size:.8rem;

    font-weight:800;
}


.timeline-icono{
    width:48px;
    height:48px;

    display:flex;

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

    margin-bottom:23px;

    border-radius:13px;

    background:var(--ing-light);

    color:var(--ing-primary);

    font-size:1rem;
}


.timeline-item h3{
    color:var(--ing-dark);

    font-size:1.12rem;

    margin-bottom:11px;
}


.timeline-item p{
    color:var(--ing-muted);

    font-size:.88rem;

    line-height:1.65;
}


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

.cta-servicios{
    position:relative;

    padding:78px 0;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #092c56,
            var(--ing-primary)
        );

    color:#fff;
}


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

    position:absolute;

    width:330px;
    height:330px;

    right:-120px;
    top:-170px;

    border-radius:50%;

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


.cta-servicios-contenido{
    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;
}


.cta-servicios-contenido > div{
    max-width:690px;
}


.cta-servicios-contenido > div > span{
    display:block;

    color:#9cd9e9;

    font-size:.78rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.1em;

    margin-bottom:11px;
}


.cta-servicios h2{
    font-size:clamp(1.8rem,3vw,2.5rem);

    line-height:1.2;

    margin-bottom:13px;
}


.cta-servicios p{
    color:#d4e3f0;

    line-height:1.65;
}


.cta-servicios-contenido > a{
    flex-shrink:0;

    display:flex;

    align-items:center;

    gap:11px;

    padding:14px 24px;

    border-radius:50px;

    background:#fff;

    color:var(--ing-dark);

    font-weight:800;

    transition:.25s ease;
}


.cta-servicios-contenido > a:hover{
    transform:translateY(-2px);

    background:#eef5fa;
}


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

@media(max-width:1000px){

    .intro-box{
        gap:45px;
    }


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


    .capacidad{
        border-right:none;

        padding:15px 20px;
    }


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

}


@media(max-width:800px){

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

        gap:25px;
    }


    .intro-info{
        border-left:none;

        border-top:2px solid var(--ing-primary);

        padding-left:0;

        padding-top:23px;
    }


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


    .servicio-imagen{
        height:260px;
    }


    .cta-servicios-contenido{
        flex-direction:column;

        align-items:flex-start;
    }

}


@media(max-width:600px){

    .hero-servicios{
        min-height:530px;

        background-position:62% center;
    }


    .hero-servicios h1{
        font-size:2.35rem;
    }


    .hero-servicios p{
        font-size:.96rem;
    }


    .hero-servicios-badges{
        gap:8px;
    }


    .hero-servicios-badges div{
        font-size:.72rem;

        padding:8px 11px;
    }


    .intro-servicios,
    .proceso-servicios{
        padding:75px 0;
    }


    .servicios-principales{
        padding-bottom:75px;
    }


    .servicio-imagen{
        height:205px;
    }


    .servicio-contenido{
        padding:25px 23px 28px;
    }


    .card-servicio h3{
        font-size:1.3rem;
    }


    .capacidades{
        padding:25px 0;
    }


    .capacidades-contenido{
        grid-template-columns:1fr;
    }


    .capacidad{
        padding:13px 0;

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


    .capacidad:last-child{
        border-bottom:none;
    }


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


    .cta-servicios{
        padding:60px 0;
    }


    .cta-servicios-contenido > a{
        width:100%;

        justify-content:center;
    }

}