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

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

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;

    color: #0b2f67;
    background: #ffffff;

    overflow-x: hidden;
}

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

/* ==========================================
   SCROLL SUAVE
========================================== */

html {
    scroll-behavior: smooth;
}

/* Evita que el navbar tape el formulario */
#formulario-empresas,
#formulario-candidatos {
    scroll-margin-top: 100px;
}

/* =========================
   NAVBAR
========================= */

.header {
    width: 100%;
    background: #ffffff;
    position: fixed;
    z-index: 1000;
}

.navbar {
    width: 100%;
    min-height: 80px;

    padding: 0 clamp(25px, 6vw, 120px);

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

.logo {
    display: flex;
    align-items: center;
    display: block;
}

.logo img {
    width: 200px;
    height: auto;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    align-items: center;

    gap: clamp(20px, 2.5vw, 40px);

    list-style: none;
}

.nav-menu a {
    position: relative;

    color: #0b2f67;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: color 0.3s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: #6548f4;
}

.nav-menu a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -12px;

    height: 3px;

    background: #6548f4;

    border-radius: 10px;
}


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

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

    display: grid;

    /* Texto izquierda / imagen derecha */
    grid-template-columns: 47% 53%;

    background: #0b3270;

    position: relative;

    overflow: hidden;
}


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

.hero-content {
    position: relative;

    /*
       IMPORTANTE:
       El contenido está por encima
       y tiene fondo azul sólido.
       El degradado NO tapa las letras.
    */

    z-index: 5;

    min-width: 0;

    padding:
        clamp(50px, 6vw, 100px)
        clamp(30px, 6vw, 120px);

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

    background: #0b3270;
}


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

.hero h1 {
    position: relative;

    z-index: 6;

    max-width: 700px;

    color: #ffffff;

    font-size: clamp(36px, 3.5vw, 60px);

    line-height: 1.05;

    margin-bottom: 25px;
}

.hero h1 span {
    color: #13c5c4;
}


/* =========================
   DESCRIPCIÓN HERO
========================= */

.hero p {
    position: relative;

    z-index: 6;

    max-width: 620px;

    color: #ffffff;

    font-size: clamp(14px, 1.1vw, 18px);

    line-height: 1.6;

    opacity: 0.9;
}


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

.hero-buttons {
    position: relative;

    z-index: 6;

    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 30px;
}

.btn {
    min-width: 170px;

    padding: 15px 25px;

    border-radius: 6px;

    text-decoration: none;
    text-align: center;

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

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
}


/* BOTÓN EMPRESAS */

.btn-primary {
    color: #ffffff;

    background: #7047ef;
}

.btn-primary:hover {
    background: #6037e4;
}


/* BOTÓN CANDIDATOS */

.btn-outline {
    color: #ffffff;

    border: 2px solid #ffffff;

    background: transparent;
}

.btn-outline:hover {
    color: #0b3270;

    background: #ffffff;
}


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

.hero-image {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 520px;

    overflow: hidden;
}

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

    object-fit: cover;

    /*
       Puedes cambiar center por:
       55% center
       60% center
       etc. si quieres mover la foto.
    */

    object-position: center center;

    display: block;
}


/* ==========================================
   DIFUMINADO ENTRE AZUL E IMAGEN
========================================== */

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

    position: absolute;

    top: 0;
    bottom: 0;

    /*
       Empieza EXACTAMENTE donde
       comienza la fotografía.
    */

    left: 0;

    /*
       El degradado ocupa solamente
       una parte de la fotografía.
    */

    width: 38%;

    z-index: 2;

    pointer-events: none;

    background: linear-gradient(
        to right,

        #0b3270 0%,

        rgba(11, 50, 112, 0.98) 8%,

        rgba(11, 50, 112, 0.90) 20%,

        rgba(11, 50, 112, 0.70) 38%,

        rgba(11, 50, 112, 0.45) 56%,

        rgba(11, 50, 112, 0.22) 72%,

        rgba(11, 50, 112, 0.08) 86%,

        rgba(11, 50, 112, 0) 100%
    );
}


/* ==========================================
   HERO RESPONSIVE - LAPTOP Y MONITOR
   MISMA COMPOSICIÓN EN ESCRITORIO
========================================== */

@media (min-width: 1025px) {

    .hero {
        width: 100%;

        /* Mantiene una altura similar en laptop y monitor */
        min-height: 580px;
        height: clamp(580px, 38vw, 720px);

        display: grid;

        /* Proporción de la captura de referencia */
        grid-template-columns: 52% 48%;

        position: relative;

        background: #0b3270;

        overflow: hidden;
    }


    /* =========================
       CONTENIDO IZQUIERDO
    ========================= */

    .hero-content {
        position: relative;

        z-index: 5;

        width: 100%;
        min-width: 0;
        height: 100%;

        box-sizing: border-box;

        padding:
            clamp(45px, 3.5vw, 70px)
            clamp(60px, 5vw, 100px);

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

        background: #0b3270;
    }


    /* =========================
       TÍTULO
    ========================= */

    .hero h1 {
        position: relative;

        z-index: 6;

        width: 100%;
        max-width: 650px;

        margin: 0 0 28px 0;

        color: #ffffff;

        font-size: clamp(48px, 3.2vw, 62px);

        line-height: 1.06;
    }


    .hero h1 span {
        color: #13c5c4;
    }


    /* =========================
       DESCRIPCIÓN
    ========================= */

    .hero p {
        position: relative;

        z-index: 6;

        width: 100%;
        max-width: 620px;

        margin: 0;

        color: #ffffff;

        font-size: clamp(15px, 1vw, 18px);

        line-height: 1.6;

        opacity: 0.9;
    }


    /* =========================
       BOTONES
    ========================= */

    .hero-buttons {
        position: relative;

        z-index: 6;

        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        align-items: center;

        width: 100%;

        max-width: 570px;

        gap: clamp(12px, 1vw, 20px);

        /*
           Posición similar a tu primera captura
        */
        margin-top: 30px;
    }


    .hero-buttons .btn {
        flex: 1 1 0;

        min-width: 0;

        padding: 16px 14px;

        font-size: clamp(13px, 0.85vw, 15px);

        white-space: nowrap;

        text-align: center;
    }


    .hero-buttons .btn:nth-child(3) {
        margin: 0;
    }


    /* =========================
       IMAGEN DERECHA
    ========================= */

    .hero-image {
        position: relative;

        width: 100%;

        height: 100%;

        min-height: 580px;

        overflow: hidden;
    }


    .hero-image img {
        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center center;
    }


    /* =========================
       DEGRADADO
    ========================= */

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

        position: absolute;

        top: 0;

        bottom: 0;

        left: 0;

        width: 42%;

        z-index: 2;

        pointer-events: none;

        background: linear-gradient(
            to right,

            #0b3270 0%,

            rgba(11, 50, 112, 0.98) 8%,

            rgba(11, 50, 112, 0.90) 20%,

            rgba(11, 50, 112, 0.70) 38%,

            rgba(11, 50, 112, 0.45) 56%,

            rgba(11, 50, 112, 0.22) 72%,

            rgba(11, 50, 112, 0.08) 86%,

            rgba(11, 50, 112, 0) 100%
        );
    }
}


/* ==========================================
   LAPTOPS MÁS PEQUEÑAS
========================================== */

@media (min-width: 1025px) and (max-width: 1400px) {

    .hero {
        min-height: 570px;
        height: 570px;

        grid-template-columns: 52% 48%;
    }


    .hero-content {
        padding-left: clamp(55px, 5vw, 75px);

        padding-right: 40px;
    }


    .hero h1 {
        max-width: 590px;

        font-size: clamp(45px, 4vw, 56px);
    }


    .hero p {
        max-width: 580px;

        font-size: 15px;
    }


    .hero-buttons {
        max-width: 550px;

        margin-top: 28px;
    }


    .hero-image {
        min-height: 570px;
    }
}


/* ==========================================
   MONITORES GRANDES
========================================== */

@media (min-width: 1800px) {

    .hero {
        height: 650px;

        min-height: 650px;

        grid-template-columns: 52% 48%;
    }


    .hero-content {
        padding-left: 100px;

        padding-right: 70px;
    }


    .hero h1 {
        max-width: 650px;

        font-size: 62px;
    }


    .hero p {
        max-width: 620px;

        font-size: 18px;
    }


    .hero-buttons {
        max-width: 570px;

        margin-top: 30px;
    }


    .hero-image {
        min-height: 650px;
    }
}


/* ==========================================
   AJUSTE PARA MONITORES GRANDES
========================================== */

@media (min-width: 1800px) {

    .hero {
        grid-template-columns: 52% 48%;
    }

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

    .hero h1 {
        max-width: 650px;
        font-size: 62px;
    }

    .hero p {
        max-width: 620px;
        font-size: 18px;
    }

    .hero-buttons {
        max-width: 570px;
    }

    .hero-buttons .btn {
        font-size: 15px;
    }
}


/* =========================
   MÉTRICAS
========================= */

.metrics {
    width: 100%;

    padding:
        40px
        clamp(40px, 6vw, 120px);

    display: grid;

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

    align-items: center;

    gap: clamp(30px, 4vw, 70px);

    background: #ffffff;
}


/* =========================
   CADA MÉTRICA
========================= */

.metric {
    display: flex;

    align-items: center;

    gap: 18px;

    min-width: 0;
}


/* =========================
   ICONOS DE LAS MÉTRICAS
========================= */

.metric-icon {
    width: 65px;
    min-width: 65px;

    height: 65px;

    flex-shrink: 0;

    display: flex;

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

    color: #0bbbbb;

    font-size: 48px;

    line-height: 1;
}


/*
   Los <i> de Font Awesome
   ocuparán correctamente
   el espacio del icono.
*/

.metric-icon i {
    display: block;

    color: #0bbbbb;

    font-size: inherit;

    line-height: 1;
}


/* =========================
   INFORMACIÓN DE MÉTRICA
========================= */

.metric-info {
    min-width: 0;
}


/* NÚMERO */

.metric-info strong,
.metric strong {
    display: block;

    color: #0b2f67;

    font-size: clamp(23px, 2vw, 30px);

    font-weight: 700;

    line-height: 1;
}


/* TEXTO */

.metric-info p,
.metric p {
    margin-top: 5px;

    color: #63799b;

    font-size: 14px;

    line-height: 1.2;
}


/* ==================================================
   ¿POR QUÉ ELEGIR TALENTUM?
   NUEVA SECCIÓN
================================================== */

.why-talentum {
    width: 100%;

    padding:
        55px
        clamp(40px, 6vw, 120px)
        65px;

    background: #ffffff;
}


/* =========================
   CABECERA DE LA SECCIÓN
========================= */

.why-header {
    width: 100%;

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

    gap: 50px;

    margin-bottom: 28px;
}


/* =========================
   TÍTULO
========================= */

.why-title {
    flex: 1;

    min-width: 0;
}

.why-label {
    display: block;

    margin-bottom: 10px;

    color: #00a9ad;

    /* AUMENTADO */
    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;
}

.why-title h2 {
    color: #0b2f67;

    /* AUMENTADO */
    font-size: clamp(38px, 3vw, 52px);

    font-weight: 700;

    line-height: 1.05;
}

.why-title h2 span {
    color: #6548f4;
}


/* =========================
   DESCRIPCIÓN DERECHA
========================= */

.why-description {
    width: 100%;

    /* Un poco más de espacio para el texto grande */
    max-width: 520px;

    padding-bottom: 5px;
}

.why-description p {
    color: #63799b;

    /* AUMENTADO */
    font-size: 19px;

    line-height: 1.5;
}


/* =========================
   CONTENEDOR DE TARJETAS
========================= */

.why-cards {
    width: 100%;

    display: grid;

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

    gap: 12px;
}


/* =========================
   TARJETA
========================= */

.why-card {
    width: 100%;

    /* Aumentamos un poco para las letras grandes */
    min-height: 165px;

    padding: 22px 18px;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    border-radius: 12px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* EFECTO AL PASAR EL MOUSE */

.why-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 12px 28px
        rgba(11, 47, 103, 0.10);
}


/* =========================
   COLORES DE LAS TARJETAS
========================= */

.why-card-purple {
    background: #f1edff;
}

.why-card-blue {
    background: #eef7ff;
}

.why-card-green {
    background: #eaf9f6;
}

.why-card-pink {
    background: #fff0f3;
}


/* =========================
   ICONOS DE LAS TARJETAS
========================= */

.why-icon {
    width: 55px;
    min-width: 55px;

    height: 55px;

    flex-shrink: 0;

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

    color: #526f9c;
}


/*
   Los SVG que colocamos directamente
   en el HTML tomarán este color.
*/

.why-icon svg {
    display: block;

    width: 100%;
    height: 100%;

    color: #526f9c;
}


/* =========================
   TEXTO DE LAS TARJETAS
========================= */

.why-card-content {
    min-width: 0;

    padding-top: 2px;
}

.why-card-content h3 {
    margin-bottom: 10px;

    color: #0b2f67;

    /* AUMENTADO */
    font-size: 21px;

    font-weight: 700;

    line-height: 1.2;
}

.why-card-content p {
    color: #7184a1;

    /* AUMENTADO */
    font-size: 17px;

    line-height: 1.4;
}


/* ==========================================
   PANTALLAS GRANDES
   1440px EN ADELANTE
========================================== */

@media (min-width: 1440px) {

    .hero {
        min-height: 540px;

        grid-template-columns: 46% 54%;
    }

    .hero-image {
        min-height: 540px;
    }

    .hero h1 {
        font-size: clamp(48px, 3.2vw, 64px);
    }

    /*
       En pantallas grandes hacemos
       la transición un poco más amplia.
    */

    .hero-image::before {
        width: 40%;
    }


    /* MÉTRICAS */

    .metrics {
        padding-left: clamp(70px, 7vw, 140px);
        padding-right: clamp(70px, 7vw, 140px);
    }

    .metric-icon {
        width: 70px;
        min-width: 70px;

        font-size: 52px;
    }


    /* ¿POR QUÉ ELEGIR TALENTUM? */

    .why-talentum {
        padding-left: clamp(70px, 7vw, 140px);
        padding-right: clamp(70px, 7vw, 140px);
    }

    .why-card {
        min-height: 175px;
    }

    .why-icon {
        width: 60px;
        min-width: 60px;

        height: 60px;
    }

    .why-label {
        font-size: 16px;
    }

    .why-title h2 {
        font-size: 52px;
    }

    .why-description p {
        font-size: 19px;
    }

    .why-card-content h3 {
        font-size: 22px;
    }

    .why-card-content p {
        font-size: 17px;
    }
}


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1200px) {

    .navbar {
        padding-left: 45px;
        padding-right: 45px;
    }

    .hero {
        grid-template-columns: 48% 52%;
    }

    .hero-content {
        padding: 55px 45px;
    }

    .hero h1 {
        font-size: clamp(36px, 4vw, 50px);
    }

    .hero-image::before {
        width: 35%;
    }


    /* MÉTRICAS */

    .metrics {
        padding-left: 45px;
        padding-right: 45px;

        gap: 30px;
    }

    .metric {
        gap: 15px;
    }

    .metric-icon {
        width: 55px;
        min-width: 55px;

        height: 55px;

        font-size: 43px;
    }


    /* ¿POR QUÉ ELEGIR TALENTUM? */

    .why-talentum {
        padding-left: 45px;
        padding-right: 45px;
    }

    .why-header {
        gap: 35px;
    }

    .why-card {
        min-height: 160px;

        padding: 20px 15px;

        gap: 11px;
    }

    .why-icon {
        width: 48px;
        min-width: 48px;

        height: 48px;
    }

    .why-label {
        font-size: 15px;
    }

    .why-title h2 {
        font-size: 40px;
    }

    .why-description p {
        font-size: 17px;
    }

    .why-card-content h3 {
        font-size: 19px;
    }

    .why-card-content p {
        font-size: 16px;
    }
}

/* ==========================================
   MENÚ HAMBURGUESA
========================================== */

.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #0b2f67;
    font-size: 28px;
    cursor: pointer;
    padding: 8px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

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

    .navbar {
        padding: 0 30px;
        position: relative;
    }


    /* MOSTRAR BOTÓN HAMBURGUESA */

    .menu-toggle {
        display: block;
        margin-left: auto;

        background: transparent;
        border: none;

        color: #0b2f67;
        font-size: 28px;

        cursor: pointer;
    }


    /* MENÚ DESPLEGABLE */

    .nav-menu {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        background: #ffffff;

        padding: 0;

        max-height: 0;
        overflow: hidden;

        opacity: 0;
        visibility: hidden;

        z-index: 1000;

        box-shadow: 0 12px 25px rgba(11, 47, 103, 0.15);

        transition:
            max-height 0.35s ease,
            opacity 0.25s ease,
            visibility 0.25s ease;
    }


    /* CUANDO ABRAMOS EL MENÚ */

    .nav-menu.active {
        max-height: 500px;

        opacity: 1;
        visibility: visible;

        padding: 12px 0;
    }


    .nav-menu li {
        width: 100%;
    }


    .nav-menu a {
        display: block;

        width: 100%;

        padding: 15px 30px;

        color: #0b2f67;

        font-size: 16px;

        text-align: left;
    }


    /* QUITAMOS LA LÍNEA MORADA EN MÓVIL */

    .nav-menu a.active::after {
        display: none;
    }


    /* EFECTO AL PASAR / TOCAR */

    .nav-menu a:hover {
        color: #6548f4;
        background: #f5f7ff;
    }



    /* HERO */

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

        min-height: auto;
    }

    .hero-content {
        padding: 60px 40px;
    }

    .hero h1 {
        max-width: 650px;

        font-size: 46px;
    }

    .hero p {
        max-width: 600px;
    }

    .hero-image {
        width: 100%;

        height: 430px;

        min-height: 430px;
    }

    .hero-image img {
        object-position: center center;
    }

    /*
       Como la imagen ahora está debajo
       del texto, quitamos el degradado
       lateral.
    */

    .hero-image::before {
        display: none;
    }


    /* MÉTRICAS */

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

        padding: 40px;

        gap: 35px;
    }

    .metric {
        gap: 16px;
    }

    .metric-icon {
        width: 60px;
        min-width: 60px;

        height: 60px;

        font-size: 45px;
    }


    /* ¿POR QUÉ ELEGIR TALENTUM? */

    .why-talentum {
        padding: 50px 40px;
    }

    .why-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;

        margin-bottom: 28px;
    }

    .why-description {
        max-width: 600px;
    }

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

        gap: 15px;
    }

    .why-card {
        min-height: 160px;

        padding: 22px 20px;
    }

    .why-icon {
        width: 55px;
        min-width: 55px;

        height: 55px;
    }

    .why-label {
        font-size: 14px;
    }

    .why-title h2 {
        font-size: 38px;
    }

    .why-description p {
        font-size: 17px;
    }

    .why-card-content h3 {
        font-size: 20px;
    }

    .why-card-content p {
        font-size: 16px;
    }
}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 550px) {

    /* NAVBAR */

    .navbar {
        min-height: 65px;

        padding: 0 20px;
    }

    .logo img {
        width: 120px;
    }


    /* HERO */

    .hero {
    width: 100%;
    min-height: auto;
    grid-template-columns: 1fr;
    }

    .hero-content {
    padding: 110px 22px 45px;
     }

    .hero h1 {
        font-size: 37px;

        line-height: 1.08;

        margin-bottom: 20px;
    }

    .hero p {
        font-size: 14px;

        line-height: 1.6;
    }

    .hero-buttons {
        width: 100%;

        flex-direction: column;

        gap: 12px;

        margin-top: 25px;
    }

    .btn {
        width: 100%;
    }

    .hero-image {
        width: 100%;

        height: 300px;

        min-height: 300px;
    }

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

        object-fit: cover;

        object-position: center;
    }

    .hero-image::before {
        display: none;
    }


    /* MÉTRICAS */

    .metrics {
    display: grid;

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

    padding: 35px 20px;

    gap: 30px 18px;

    width: 100%;
}

.metric {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 12px;
}

.metric-icon {
    width: 48px;
    min-width: 48px;

    height: 48px;

    font-size: 34px;
}

.metric-info strong,
.metric strong {
    font-size: 24px;
    line-height: 1;
}

.metric-info p,
.metric p {
    font-size: 13px;
    line-height: 1.25;
    margin-top: 5px;
}


    /* ¿POR QUÉ ELEGIR TALENTUM? */

    .why-talentum {
        padding: 45px 22px;
    }

    .why-header {
        margin-bottom: 25px;
    }

    .why-label {
        font-size: 13px;
    }

    .why-title h2 {
        font-size: 34px;

        line-height: 1.08;
    }

    .why-description p {
        font-size: 16px;
    }

    .why-cards {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .why-card {
        min-height: auto;

        padding: 22px;

        gap: 18px;
    }

    .why-icon {
        width: 55px;
        min-width: 55px;

        height: 55px;
    }

    .why-card-content h3 {
        font-size: 19px;
    }

    .why-card-content p {
        font-size: 15px;
    }
}


/* ==========================================
   CELULARES PEQUEÑOS
========================================== */

@media (max-width: 380px) {

    .hero-content {
        padding: 40px 18px;
    }

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

    .hero-image {
        height: 260px;

        min-height: 260px;
    }


    /* MÉTRICAS */

    .metrics {
        padding: 30px 20px;
    }

    .metric-icon {
        width: 50px;
        min-width: 50px;

        height: 50px;

        font-size: 37px;
    }


    /* ¿POR QUÉ ELEGIR TALENTUM? */

    .why-talentum {
        padding: 40px 18px;
    }

    .why-label {
        font-size: 12px;
    }

    .why-title h2 {
        font-size: 30px;
    }

    .why-description p {
        font-size: 15px;
    }

    .why-card {
        padding: 20px 16px;

        gap: 14px;
    }

    .why-icon {
        width: 48px;
        min-width: 48px;

        height: 48px;
    }

    .why-card-content h3 {
        font-size: 18px;
    }

    .why-card-content p {
        font-size: 14px;
    }
}

/* ==================================================
   SOLUCIONES PARA EMPRESAS / SERVICIOS
================================================== */

.solutions {
    width: 100%;
    padding: 60px clamp(40px, 6vw, 120px) 75px;
    background: #ffffff;
}

/* CABECERA */
.solutions-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 45px;
}

.solutions-title {
    flex: 1;
    min-width: 0;
}

.solutions-label {
    display: block;
    margin-bottom: 10px;
    color: #00a9ad;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.solutions-title h2 {
    color: #0b2f67;
    font-size: clamp(34px, 3vw, 48px);
    font-weight: 700;
    line-height: 1.1;
}

.solutions-title h2 span {
    color: #6548f4;
}

.solutions-description {
    width: 100%;
    max-width: 500px;
    padding-bottom: 5px;
}

.solutions-description p {
    color: #63799b;
    font-size: 18px;
    line-height: 1.5;
}

/* CONTENEDOR DE TARJETAS (DISPOSICIÓN HORIZONTAL EN ESCRITORIO) */
.solutions-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    align-items: stretch;
}

/* TARJETA DE SERVICIO */
.solution-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 5px 20px rgba(11, 47, 103, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.solution-card:hover {
    box-shadow: 0 12px 30px rgba(11, 47, 103, 0.12);
    border-color: #cbd5e1;
}

.solution-card-main {
    display: flex;
    flex-direction: column;
}

/* IMAGEN DE TARJETA */
.solution-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.solution-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.solution-card:hover .solution-image img {
    transform: scale(1.04);
}

/* CONTENIDO SUPERIOR DE LA TARJETA */
.solution-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.solution-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

/* ÍCONOS DE TIPO DE SERVICIO */
.solution-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.icon-teal {
    background-color: #00a9ad;
    color: #ffffff;
}

.icon-purple {
    background-color: #6548f4;
    color: #ffffff;
}

.icon-blue {
    background-color: #0284c7;
    color: #ffffff;
}

.solution-header-info h3 {
    color: #0b2f67;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.solution-summary {
    color: #63799b;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* BOTÓN DESPLEGABLE "CONOCE MÁS" */
.btn-toggle-details {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 50px;
    border: 1px solid #00a9ad;
    background: transparent;
    color: #00a9ad;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-toggle-details:hover {
    background: #00a9ad;
    color: #ffffff;
}

.btn-toggle-details .icon-arrow {
    transition: transform 0.3s ease;
}

/* ESTADO ACTIVO DEL BOTÓN CUANDO EL DESPLEGABLE ESTÁ ABIERTO */
.solution-card.active .btn-toggle-details {
    background-color: #0b2f67;
    border-color: #0b2f67;
    color: #ffffff;
}

.solution-card.active .btn-toggle-details .icon-arrow {
    transform: rotate(90deg);
}

/* ==================================================
   Estilos de la información del modal
================================================== */
.solution-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    background-color: #f8fafc;
    border-top: 1px solid transparent;
}

.solution-card.active .solution-details {
    max-height: 1000px; /* Tamaño suficiente para revelar el contenido */
    transition: max-height 0.5s ease-in-out;
    border-top-color: #e2e8f0;
}

.details-inner {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.details-section h4 {
    color: #0b2f67;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* LISTAS INTERNAS DE SERVICIOS */
.details-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.details-list li {
    font-size: 14px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 10px;
}

.details-list li i {
    color: #00a9ad;
    font-size: 13px;
    width: 16px;
}

/* TAGS MODALIDAD RPO */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-item {
    background-color: #e0e7ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
}

/* DESTACADO DE TECNOLOGÍA */
.tech-highlight {
    background-color: #f0f9ff;
    border-left: 3px solid #0284c7;
    padding: 12px;
    border-radius: 0 8px 8px 0;
}

.tech-highlight h4 {
    color: #0369a1;
    font-size: 15px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tech-highlight p {
    font-size: 13px;
    color: #334155;
    margin: 0;
}

/* PIE DE TARJETA / BOTÓN ACCIÓN */
.details-footer {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px dashed #cbd5e1;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background-color: #6548f4;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.btn-action:hover {
    background-color: #5032e6;
}

.modal-close-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #64748b;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    z-index: 10;
}

/* ==================================================
   RESPONSIVO (ADAPTACIÓN A TABLET Y MÓVIL)
================================================== */
@media (max-width: 992px) {
    .solutions-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .solutions-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media (max-width: 640px) {
    .solutions-cards {
        grid-template-columns: 1fr;
    }
}

/* ==================================================
   SOLUCIONES - PANTALLAS GRANDES
================================================== */

@media (min-width: 1440px) {

    .solutions {
        padding-left: clamp(70px, 7vw, 140px);
        padding-right: clamp(70px, 7vw, 140px);
    }

    .solutions-label {
        font-size: 16px;
    }

    .solutions-title h2 {
        font-size: 52px;
    }

    .solutions-description p {
        font-size: 19px;
    }

    .solution-image {
        height: 230px;
    }

    .solution-content {
        padding: 24px 22px 28px;
    }

    .solution-content h3 {
        font-size: 22px;
    }

    .solution-content p {
        font-size: 17px;
    }
}


/* ==================================================
   SOLUCIONES - LAPTOP
================================================== */

@media (max-width: 1200px) {

    .solutions {
        padding-left: 45px;
        padding-right: 45px;
    }

    .solutions-header {
        gap: 35px;
    }

    .solutions-title h2 {
        font-size: 40px;
    }

    .solutions-description p {
        font-size: 17px;
    }

    .solutions-cards {
        gap: 14px;
    }

    .solution-image {
        height: 190px;
    }

    .solution-content {
        padding: 20px 17px 23px;
    }

    .solution-content h3 {
        font-size: 19px;
    }

    .solution-content p {
        font-size: 16px;
    }
}


/* ==================================================
   SOLUCIONES - TABLET
================================================== */

@media (max-width: 900px) {

    .solutions {
        padding:
            50px
            40px
            60px;
    }

    .solutions-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        margin-bottom: 30px;
    }

    .solutions-description {
        max-width: 600px;
    }

    .solutions-title h2 {
        font-size: 38px;
    }

    .solutions-description p {
        font-size: 17px;
    }

    /*
       2 tarjetas por fila
    */
    .solutions-cards {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

    .solution-image {
        height: 220px;
    }

    .solution-content h3 {
        font-size: 20px;
    }

    .solution-content p {
        font-size: 16px;
    }
}


/* ==================================================
   SOLUCIONES - CELULAR
================================================== */

@media (max-width: 550px) {

    .solutions {
        padding:
            45px
            22px
            55px;
    }

    .solutions-header {
        margin-bottom: 25px;
    }

    .solutions-label {
        font-size: 13px;
    }

    .solutions-title h2 {
        font-size: 34px;

        line-height: 1.08;
    }

    .solutions-description p {
        font-size: 16px;
    }

    /*
       Una tarjeta por fila
    */
    .solutions-cards {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .solution-image {
        height: 230px;
    }

    .solution-content {
        padding: 22px;
    }

    .solution-content h3 {
        font-size: 20px;

        margin-bottom: 10px;
    }

    .solution-content p {
        font-size: 15px;
    }
}


/* ==================================================
   SOLUCIONES - CELULARES PEQUEÑOS
================================================== */

@media (max-width: 380px) {

    .solutions {
        padding:
            40px
            18px
            50px;
    }

    .solutions-label {
        font-size: 12px;
    }

    .solutions-title h2 {
        font-size: 30px;
    }

    .solutions-description p {
        font-size: 15px;
    }

    .solution-image {
        height: 200px;
    }

    .solution-content {
        padding: 20px 16px;
    }

    .solution-content h3 {
        font-size: 18px;
    }

    .solution-content p {
        font-size: 14px;
    }
}

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

.proceso { 
    width: 100%; 
    padding: 35px clamp(25px, 6vw, 120px) 55px; 
    background: #ffffff; 
    text-align: center; 
} 


/* NUESTRO PROCESO - TURQUESA */ 
.proceso .section-tag { 
    color: #13c5c4; 
    font-size: 16px;
    font-weight: 700; 
} 


/* TÍTULO PRINCIPAL - AZUL */ 
.proceso .section-title { 
    color: #0b2f67; 
    font-size: 38px;
    line-height: 1.15;
    font-weight: 700; 
} 


/* ÚLTIMA PARTE DEL TÍTULO - MORADO */ 
.proceso {
    width: 100%;
    padding: 60px 20px;
    background-color: #ffffff;
    text-align: center;
}

/* Tag superior */
.proceso .section-tag {
    color: #13c5c4;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 8px;
}

/* Título principal */
.proceso .section-title {
    color: #0b2f67;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.proceso .section-title span {
    color: #6548f4;
}

/* Subtítulo */
.proceso .section-subtitle {
    color: #6c757d;
    font-size: 16px;
    margin-bottom: 50px;
}

/* =========================
   CONTENEDOR HORIZONTAL
========================= */
.stepper-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 0;
    overflow-x: auto; /* Permite scroll horizontal en pantallas muy pequeñas sin romper el diseño */
}

/* Línea conectora trasera */
.stepper-line {
    position: absolute;
    top: 28px;
    left: 40px;
    right: 40px;
    height: 2px;
    background-color: #b0d3f2;
    z-index: 1;
}

.stepper {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-width: 950px; /* Asegura el layout horizontal en todo momento */
}

/* Cadena de cada paso */
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 145px;
}

/* Números superiores */
.step-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 0 0 4px #ffffff;
}

/* Círculos con ícono */
.step-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #0b2f67;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.step:hover .step-icon {
    transform: translateY(-5px);
}

/* Texto debajo del ícono */
.step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    color: #0b2f67;
    line-height: 1.35;
    text-align: center;
}

.step-content strong {
    font-weight: 700;
    font-size: 16px;
}

.step-content span {
    font-weight: 400;
    font-size: 15px;
    color: #4a5568;
}

/*Flechas*/
.step-arrow {
    color: #cbd5e1;
    font-size: 12px;
    margin-top: 55px;
}


/*Colores de circulos*/
/* Paso 1: Celeste / Turquesa claro */
.step-1 .step-number { background-color: #38bdf8; }
.step-1 .step-icon { background-color: #e0f2fe; }

/* Paso 2: Turquesa */
.step-2 .step-number { background-color: #14b8a6; }
.step-2 .step-icon { background-color: #ccfbf1; }

/* Paso 3: Morado suave */
.step-3 .step-number { background-color: #a855f7; }
.step-3 .step-icon { background-color: #f3e8ff; }

/* Paso 4: Azul */
.step-4 .step-number { background-color: #3b82f6; }
.step-4 .step-icon { background-color: #dbeafe; }

/* Paso 5: Turquesa verdoso */
.step-5 .step-number { background-color: #06b6d4; }
.step-5 .step-icon { background-color: #cffaff; }

/* Paso 6: Azul rey / Violeta */
.step-6 .step-number { background-color: #6366f1; }
.step-6 .step-icon { background-color: #e0e7ff; }

/* Paso 7: Azul cielo */
.step-7 .step-number { background-color: #0ea5e9; }
.step-7 .step-icon { background-color: #e0f2fe; }

/*Responsive Sección Proceso*/
@media (max-width: 900px) {

    .proceso {
        padding: 50px 40px;
    }

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

    .stepper-line {
        display: none;
    }

    .stepper-wrapper {
        overflow-x: visible;
        padding: 0;
    }

    /* Cambio del flujo horizontal a columna vertical */
    .stepper {
        flex-direction: column;
        min-width: 100%;
        gap: 12px;
    }

    /* Formato de tarjeta limpia en vertical */
    .step {
        width: 100%;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 16px;
        padding: 16px 22px;
        border-radius: 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    .step-number {
        margin-bottom: 0;
        font-size: 14px;
        padding: 6px 10px;
        flex-shrink: 0;
    }

    .step-icon {
        margin-bottom: 0;
        font-size: 22px;
        flex-shrink: 0;
    }

    .step-content {
        align-items: flex-start;
    }

    .step-content strong {
        font-size: 16px;
    }

    .step-content span {
        font-size: 14px;
    }

    /* Rotación de flechas hacia abajo */
    .step-arrow {
        transform: rotate(90deg);
        margin: 2px 0;
        font-size: 14px;
    }
}


/* =========================
    CELULAR (550px)
========================= */

@media (max-width: 550px) {

    .proceso {
        padding: 45px 22px;
    }

    .proceso .section-tag {
        font-size: 12px;
    }

    .proceso .section-title {
        font-size: 31px;
        line-height: 1.08;
    }

    .proceso .section-subtitle {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .stepper {
        gap: 10px;
    }

    .step {
        padding: 14px 18px;
        gap: 14px;
        border-radius: 12px;
    }

    .step-number {
        font-size: 13px;
    }

    .step-icon {
        font-size: 20px;
    }

    .step-content strong {
        font-size: 15px;
    }

    .step-content span {
        font-size: 13px;
    }

    .step-arrow {
        font-size: 13px;
        margin: 0;
    }
}

/* =========================
   DESAFÍOS DEL MERCADO
========================= */

.desafios {
    width: 100%;

    padding: 60px clamp(25px, 6vw, 120px);

    display: grid;
    grid-template-columns: 55% 45%;

    gap: 40px;

    align-items: center;

    background: #ffffff;
}


/* =========================
   ETIQUETA SUPERIOR
   DESAFÍOS DEL MERCADO
========================= */

.desafios .section-tag,
.problemas-tag {
    display: block;
    color: #13b8b8;

    font-size: 15px; /* ANTES 14px */
    font-weight: 700;

    text-transform: uppercase;
    margin-bottom: 14px; /* ANTES 10px */
}


/* =========================
   TÍTULO PRINCIPAL
========================= */

.desafios .section-title,
.problemas-title {
    color: #0b2f67;

    font-size: clamp(38px, 3.2vw, 52px); /* ANTES 32px, 3vw, 46px */
    font-weight: 700;

    line-height: 1.05;
    margin-bottom: 22px; /* ANTES 18px */
}



/* PARTE MORADA DEL TÍTULO */

.desafios .section-title span,
.problemas-title span {
    color: #6548f4;
}


/* =========================
   DESCRIPCIÓN
========================= */

.desafios-desc,
.problemas-description {
    color: #63799b;

    font-size: 18px; /* ANTES 16px */
    font-weight: 500;
    line-height: 1.5;

    margin-bottom: 40px; /* ANTES 35px */
    max-width: 700px; /* ANTES 650px */
}


/* =========================
   GRID DE PROBLEMAS
========================= */

.problems-grid {
    display: grid;

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

    gap: 25px 30px;
}


/* =========================
   PROBLEMA INDIVIDUAL
========================= */

.problem-card {
    display: flex;

    align-items: flex-start;

    gap: 16px;
}


/* =========================
   ICONOS
========================= */

.problem-icon {
    min-width: 45px; /* ANTES 42px */

    color: #0b2f67;

    font-size: 36px; /* ANTES 32px */

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


/* =========================
   TÍTULO DEL PROBLEMA
========================= */

.problem-info h3 {
    color: #0b2f67;

    font-size: 18px; /* ANTES 16px */
    font-weight: 700;

    margin-bottom: 6px;
}

/* =========================
   DESCRIPCIÓN DEL PROBLEMA
========================= */

.problem-info p {
    color: #63799b;

    font-size: 18px; /* ANTES 14px */

    line-height: 1.4;
}

/* =========================
   IMAGEN LATERAL
========================= */

.desafios-image {
    position: relative;

    width: 100%;

    height: 420px;

    border-radius: 8px;

    overflow: hidden;
}

.desafios-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================
   DEGRADADO DE LA IMAGEN
========================= */

.desafios-banner-text {
    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(11, 47, 103, 0.92) 10%,
        rgba(11, 47, 103, 0.2) 70%
    );

    padding: 35px 30px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


/* =========================
   TEXTO SOBRE LA IMAGEN
========================= */

.desafios-banner-text h3 {
    color: #ffffff;

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

    line-height: 1.25;

    margin-bottom: 15px;

    max-width: 320px;
}


/* =========================
   LÍNEA TURQUESA
========================= */

.banner-line {
    width: 65px;

    height: 4px;

    background: #13c5c4;

    border-radius: 2px;
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

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

        padding: 50px 40px;

        gap: 40px;
    }

    .desafios .section-title,
    .problemas-title {
        font-size: 36px;
    }

    .desafios-image {
        height: 380px;
    }
}


/* =========================
   CELULAR
========================= */

@media (max-width: 550px) {

    .desafios {
        padding: 45px 22px;
    }

    .desafios .section-tag,
    .problemas-tag {
        font-size: 12px;
    }

    .desafios .section-title,
    .problemas-title {
        font-size: 31px;

        line-height: 1.08;
    }

    .desafios-desc,
    .problemas-description {
        font-size: 15px;
    }

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

        gap: 25px;
    }

    .problem-icon {
        min-width: 38px;

        font-size: 29px;
    }

    .problem-info h3 {
        font-size: 16px;
    }

    .problem-info p {
        font-size: 14px;
    }

    .desafios-image {
        height: 320px;
    }

    .desafios-banner-text {
        padding: 25px 22px;
    }

    .desafios-banner-text h3 {
        font-size: 23px;
    }
}

/* =========================
   EMPRESAS ASOCIADAS
========================= */

.empresas {
    width: 100%;
    max-width: 100%;
    padding: 50px clamp(20px, 4vw, 70px);
    background: #ffffff;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

/* EMPRESAS QUE CONFÍAN EN NOSOTROS */
.empresas .section-tag {
    display: block;
    color: #13b8b8;
    font-size: clamp(14px, 1.3vw, 20px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

/* TÍTULO */
.empresas .section-title {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 15px;
    padding: 0 10px;

    color: #0b2f67;
    font-size: clamp(30px, 3.2vw, 52px);
    font-weight: 700;
    line-height: 1.1;

    text-align: center;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* =========================
   CARRUSEL
========================= */

.carousel-wrapper {
    position: relative;

    width: 100%;
    max-width: 1500px;

    margin: 35px auto 0;

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

    box-sizing: border-box;
}

/* Flechas ocupan su propio espacio */
.carousel-arrow {
    flex: 0 0 45px;

    width: 45px;
    height: 45px;

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

    background: transparent;
    border: none;

    color: #13c5c4;
    font-size: 22px;

    cursor: pointer;
    z-index: 10;

    padding: 0;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.carousel-arrow:hover {
    transform: scale(1.2);
    color: #0b2f67;
}

/* Área visible */
.carousel-container {
    flex: 1;
    min-width: 0;

    height: 300px;

    overflow: hidden;
    position: relative;
}

/* Fila de logos */
.carousel-track {
    display: flex;
    align-items: center;

    height: 100%;

    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

/* 4 logos en escritorio */
.carousel-slide {
    flex: 0 0 25%;

    height: 100%;

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

    padding: 20px clamp(15px, 2vw, 35px);

    box-sizing: border-box;
}

/* Imágenes */
.carousel-slide img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 260px;
    max-height: 230px;

    object-fit: contain;

    transition: transform 0.3s ease;
}

.carousel-slide img:hover {
    transform: scale(1.06);
}


/* =========================
   MONITORES GRANDES
========================= */

@media (min-width: 1600px) {

    .empresas {
        padding-left: 60px;
        padding-right: 60px;
    }

    .carousel-wrapper {
        max-width: 1600px;
    }

    .carousel-container {
        height: 320px;
    }

    .carousel-slide img {
        max-width: 280px;
        max-height: 250px;
    }
}


/* =========================
   TABLET / LAPTOP PEQUEÑA
========================= */

@media (max-width: 900px) {

    .empresas {
        padding: 45px 25px;
    }

    .empresas .section-title {
        font-size: clamp(30px, 5vw, 42px);
    }

    .carousel-container {
        height: 240px;
    }

    /* 3 logos visibles */
    .carousel-slide {
        flex: 0 0 33.333333%;
        padding: 15px 20px;
    }

    .carousel-slide img {
        max-width: 210px;
        max-height: 190px;
    }

    .carousel-arrow {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 19px;
    }
}


/* =========================
   CELULAR
========================= */

@media (max-width: 600px) {

    .empresas {
        padding: 35px 12px 30px;
    }

    .empresas .section-tag {
        font-size: 13px;
        line-height: 1.3;
        padding: 0 10px;
    }

    .empresas .section-title {
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.12;

        padding: 0 8px;
        margin-bottom: 10px;
    }

    .carousel-wrapper {
        margin-top: 20px;
        width: 100%;
    }

    .carousel-container {
        height: 170px;
    }

    /* 2 logos visibles */
    .carousel-slide {
        flex: 0 0 50%;
        height: 170px;

        padding: 15px 10px;
    }

    .carousel-slide img {
        width: 100%;
        height: 100%;

        max-width: 145px;
        max-height: 125px;
    }

    .carousel-arrow {
        flex: 0 0 30px;

        width: 30px;
        height: 35px;

        font-size: 17px;
    }
}


/* =========================
   CELULARES PEQUEÑOS
========================= */

@media (max-width: 380px) {

    .empresas {
        padding-left: 8px;
        padding-right: 8px;
    }

    .empresas .section-title {
        font-size: 26px;
    }

    .carousel-container {
        height: 150px;
    }

    .carousel-slide {
        height: 150px;
        padding: 10px 7px;
    }

    .carousel-slide img {
        max-width: 120px;
        max-height: 110px;
    }

    .carousel-arrow {
        flex-basis: 26px;
        width: 26px;
        padding: 0;
    }
}

/* =========================
   TESTIMONIOS
========================= */

.testimonios {
    width: 100%;
    padding: 60px clamp(25px, 6vw, 120px);
    background: #f1f8fc;
}

.testimonios .section-title {
    color: #0b2f67;
    font-size: clamp(36px, 3vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
}

.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 25px;
}

.testimonio-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(11, 47, 103, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonio-card .quote {
    color: #63799b;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.testimonial-author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-author strong {
    display: block;
    color: #0b2f67;
    font-size: 20px;
    font-weight: 700;
}

.testimonial-author p {
    color: #63799b;
    font-size: 15px;
    margin-top: 4px;
}

.testimonial-author span {
    color: #9cb0ce;
    font-size: 14px;
}

/* ==========================================
   CARRUSEL DE TESTIMONIOS
========================================== */

.testimonios-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 25px;
}


/* CONTENEDOR QUE SE MOVERÁ */

.testimonios-track {
    display: flex;
    gap: 30px;

    transition: transform 0.5s ease-in-out;
    will-change: transform;
}


/* MOSTRAR 2 TESTIMONIOS */

.testimonios-track .testimonio-card {
    flex: 0 0 calc(50% - 15px);
    min-width: calc(50% - 15px);
}


/* ==========================================
   FLECHAS ABAJO Y CENTRADAS
========================================== */

.testimonial-controls {
    width: 100%;

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

    gap: 18px;
    margin-top: 28px;
}


/* BOTÓN DE FLECHA */

.testimonial-arrow {
    width: 46px;
    height: 46px;

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

    border: 2px solid #13c5c4;
    border-radius: 50%;

    background: #ffffff;
    color: #13c5c4;

    font-size: 18px;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}


/* EFECTO AL PASAR EL MOUSE */

.testimonial-arrow:hover {
    background: #13c5c4;
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow: 0 8px 18px rgba(19, 197, 196, 0.25);
}


/* EFECTO AL HACER CLICK */

.testimonial-arrow:active {
    transform: scale(0.92);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    .testimonios-track {
        gap: 20px;
    }

    .testimonios-track .testimonio-card {
        flex: 0 0 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }

}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 600px) {

    .testimonios {
        padding: 45px 22px;
    }

    .testimonios-track {
        gap: 0;
    }

    /* EN CELULAR SOLO 1 TESTIMONIO */

    .testimonios-track .testimonio-card {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .testimonial-controls {
        margin-top: 22px;
        gap: 14px;
    }

    .testimonial-arrow {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

}

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

@media (max-width: 900px) {
    .desafios {
        grid-template-columns: 1fr;
    }

    .desafios-image {
        height: 350px;
    }

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

@media (max-width: 650px) {

    /* ==========================================
       PORTADA / HERO - CELULAR
    ========================================== */

    .hero {
        min-height: auto;
    }

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

     .hero-text {
      margin-top: 0;
     }

     .hero-text h1 {
       margin-top: 0;
      margin-bottom: 22px;
     }

     .hero-buttons {
        margin-top: 15px !important;
        margin-bottom: 20px !important;
    }

    .nav-services {
        width: 100%;
        position: relative;
    }

    /* Por defecto NO ocupa espacio */
    .nav-services .services-dropdown {
        display: none !important;

        position: static !important;
        width: 100% !important;

        margin: 8px 0 0 !important;
        padding: 8px 15px !important;

        background: #f7f8ff !important;
        border-radius: 10px !important;
        box-shadow: none !important;

        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Al tocar/pasar por Servicios aparecen las opciones */
    .nav-services:hover .services-dropdown,
    .nav-services:focus-within .services-dropdown {
        display: block !important;
    }

    /* Cada opción */
    .nav-services .dropdown-service {
        display: flex !important;
        align-items: center;
        gap: 12px;

        width: 100%;
        padding: 12px 8px !important;
        margin: 0 !important;

        font-size: 14px;
    }

    /* Separación entre opciones */
    .nav-services .dropdown-service + .dropdown-service {
        margin-top: 4px !important;
    }

    

    /* ==========================================
   NUESTRO PROCESO - CELULAR
   DISTRIBUCIÓN 3 + 3 + 1
========================================== */

.proceso .stepper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    width: 100%;
    min-width: 0;
    max-width: 100%;

    margin-top: 35px;

    column-gap: 8px;
    row-gap: 25px;

    align-items: start;
}


/* ==========================================
   QUITAMOS LA LÍNEA DE ESCRITORIO
========================================== */

.proceso .stepper-line {
    display: none;
}


/* ==========================================
   CADA PASO
========================================== */

.proceso .step {
    /* Cada paso ocupa 2 columnas:
       3 pasos por fila */
    grid-column: span 2;

    width: 100%;
    min-width: 0;

    padding: 5px 2px;
    margin: 0;

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

    text-align: center;

    background: transparent;
    box-shadow: none;
    border: none;
}


/* ==========================================
   ÚLTIMO PASO 07 CENTRADO
========================================== */

.proceso .step:last-of-type {
    grid-column: 3 / 5;
}


/* ==========================================
   NÚMEROS 01 - 07
========================================== */

.proceso .step-number {
    position: static;

    width: 38px;
    height: 38px;

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

    margin: 0 auto 14px;

    font-size: 13px;
    font-weight: 700;
}


/* ==========================================
   CÍRCULO DE LOS ICONOS
========================================== */

.proceso .step-icon {
    position: static;

    width: 70px;
    height: 70px;

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

    margin: 0 auto 12px;

    transform: none;
}


/* ICONO INTERIOR */

.proceso .step-icon i {
    font-size: 28px;
}


/* ==========================================
   TEXTO DE CADA PASO
========================================== */

.proceso .step-content {
    width: 100%;

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

    text-align: center;

    margin: 0;
}


/* TÍTULO */

.proceso .step-content strong {
    display: block;

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

    line-height: 1.2;

    margin-bottom: 3px;
}


/* SUBTÍTULO */

.proceso .step-content span {
    display: block;

    font-size: 11px;

    line-height: 1.25;
}


/* ==========================================
   QUITAMOS LAS FLECHAS EN CELULAR
========================================== */

.proceso .step-arrow {
    display: none;
}


    /* ==========================================
       ESTO YA LO TENÍAS - NO LO QUITAMOS
    ========================================== */

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

    .logos-grid {
        justify-content: flex-start;
    }
}

/* =========================
   SECCIÓN FORMULARIOS
========================= */

.formularios-section {
    width: 100%;
    padding: 70px clamp(25px, 6vw, 120px);
    background: #ffffff;
}

.main-contact-title {
    max-width: 900px;
    margin: 0 auto 50px auto;
}

.forms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
}

.form-card {
    border-radius: 20px;
    padding: 40px 35px;
    display: flex;
    flex-direction: column;
}

/* Colores de fondo de los cards */
.card-empresas {
    background-color: #e8f7fa;
}

.card-candidatos {
    background-color: #f3ebff;
}

/* Tags superiores */
.card-tag {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.tag-teal {
    color: #13c5c4;
}

.tag-purple {
    color: #7047ef;
}

/* Títulos internos de los formularios */
.card-title {
    color: #0b2f67;
    font-family: Georgia, 'Times New Roman', Times, serif; /* Tipografía Serif elegante del Figma */
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.card-subtitle {
    color: #63799b;
    font-size: 14px;
    margin-bottom: 25px;
}

/* Estructura del Formulario */
.custom-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
}

.form-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

.form-row.full-width input {
    width: 100%;
}

.form-row.flex-70-30 input:first-child {
    flex: 2;
}

.form-row.flex-70-30 input:last-child {
    flex: 1;
}

.form-row.flex-equal > * {
    flex: 1;
}

/* Inputs styling */
.custom-form input {
    width: 100%;
    height: 48px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    font-size: 13px;
    color: #0b2f67;
    outline: none;
}

.custom-form input::placeholder {
    color: #9cb0ce;
}

/* Campo Select personalizado */
.select-wrapper select {
    position: relative;
    width: 100%;
}

.select-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #0b2f67;
    font-size: 12px;
    pointer-events: none;
}

/* Campo Cargar CV personalizado */
.file-wrapper {
    height: 48px;
    padding: 0 18px;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.file-placeholder {
    font-size: 13px;
    color: #9cb0ce;
}

.upload-icon {
    color: #0b2f67;
    font-size: 14px;
}

/* Botones de formulario */
.form-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.form-btn:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

.btn-dark-blue {
    background-color: #0b3270;
}

.btn-purple {
    background-color: #6548f4;
}

/*=Efectos añadidos=*/
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 47, 103, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 35px 30px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-20px) scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-card {
    transform: translateY(0) scale(1);
}

.modal-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px auto;
    font-size: 28px;
}

.modal-icon.success {
    background-color: #e8f8f5;
    color: #2ecc71;
}

.modal-icon.error {
    background-color: #fdedec;
    color: #e74c3c;
}

.modal-icon.warning {
    background-color: #fef9e7;
    color: #f39c12;
}

.modal-title {
    color: #0b2f67;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}

.modal-message {
    color: #63799b;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.modal-btn {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 10px;
    background-color: #0b3270;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.modal-btn:hover {
    background-color: #6548f4;
    transform: translateY(-1px);
}

.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper select.custom-select {
    width: 100%;
    height: 48px;
    padding: 0 40px 0 18px;
    border: 1px solid #e1dbec;
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 13px;
    color: #0b2f67; /* Texto seleccionado */
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
}

.select-wrapper select.custom-select:focus {
    border-color: #7047ef;
    box-shadow: 0 0 0 3px rgba(112, 71, 239, 0.1);
}

.select-wrapper select.custom-select:invalid {
    color: #9cb0ce;
}

.select-wrapper .select-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #7047ef; /* Color morado de tu marca */
    font-size: 12px;
    pointer-events: none; /* Permite hacer clic en el select a través de la flecha */
}

.select-wrapper select.custom-select option {
    background-color: #ffffff;
    color: #0b2f67;
    font-size: 13px;
    padding: 12px 18px; /* Espaciado entre opciones */
}

.select-wrapper select.custom-select option:checked {
    background-color: #f3ebff !important;
    color: #7047ef !important;
    font-weight: 600;
}

.select-wrapper select.custom-select option[value=""][disabled] {
    color: #9cb0ce;
}

/* ==================================================
   PROMO CONEXA DENTRO DEL MODAL
================================================== */
.modal-conexa-promo {
    margin: 20px 0 10px 0;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    text-align: center;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.modal-conexa-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #6548f4, #00a9ad);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.modal-conexa-promo h4 {
    color: #0b2f67;
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 6px 0;
}

.modal-conexa-promo h4 span {
    color: #6548f4;
}

.modal-conexa-promo p {
    color: #63799b;
    font-size: 12.5px;
    line-height: 1.4;
    margin: 0 0 14px 0;
}

/* BOTÓN ESTÁTICO DE CONEXA EN MODAL */
.btn-modal-conexa-static {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 50px;
    color: #0b2f67;
    font-size: 12.5px;
    font-weight: 700;
    cursor: default;
    user-select: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.badge-modal-soon {
    background-color: #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ==========================================
   ADAPTACIONES RESPONSIVE FORMULARIOS
========================================== */

@media (max-width: 550px) {

    /* ==========================================
       FORMULARIOS UNO DEBAJO DEL OTRO
    ========================================== */

    .forms-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 30px;
        width: 100%;
    }

    .card-empresas {
        width: 100%;
    }

    .card-candidatos {
        width: 100%;
    }


    /* LO QUE YA TENÍAMOS */

    .formularios-section {
        padding: 45px 18px;
    }

    .form-card {
        width: 100%;
        padding: 30px 20px;
        border-radius: 20px;
    }

    .card-title {
        font-size: 24px;
        line-height: 1.15;
    }

    .card-subtitle {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 22px;
    }

    .custom-form {
        width: 100%;
        gap: 15px;
    }

    .form-row,
    .form-row.flex-70-30,
    .form-row.flex-equal {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .form-row > *,
    .form-row.flex-70-30 > *,
    .form-row.flex-equal > * {
        width: 100%;
        flex: none;
    }

    .custom-form input {
        width: 100%;
        height: 50px;
        min-height: 50px;
        flex: none;
        padding: 0 18px;
        font-size: 14px;
        border-radius: 9px;
        box-sizing: border-box;
    }

    .select-wrapper {
        width: 100%;
        height: 50px;
        min-height: 50px;
        flex: none;
    }

    .file-wrapper {
        width: 100%;
        height: 50px;
        min-height: 50px;
        flex: none;
        padding: 0 18px;
        box-sizing: border-box;
    }

    .file-placeholder {
        font-size: 14px;
    }

    .form-btn {
        width: 100%;
        height: 52px;
        min-height: 52px;
        margin-top: 10px;
        font-size: 15px;
        flex: none;
    }
}

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

.footer {
    width: 100%;
    background: #232f3e; /* Tono oscuro exacto del diseño Figma */
    color: #ffffff;
    padding-top: 60px;
}

.footer-container {
    width: 100%;
    padding: 0 clamp(25px, 6vw, 120px);
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1.5fr;
    gap: clamp(30px, 4vw, 60px);
    margin-bottom: 50px;
}

/* Columna 1 */
.footer-logo img {
    width: 160px;
    height: auto;
    margin-bottom: 20px;
}

.footer-about p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    line-height: 1.6;
    max-width: 320px;
}

/* Títulos de columnas */
.footer-col h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 22px;
}

/* Listas y enlaces */
.footer-links,
.footer-contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links a,
.footer-contact a,
.footer-contact li {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: #13c5c4;
}

/* Barra inferior */
.footer-bottom {
    width: 100%;
    padding: 25px clamp(25px, 6vw, 120px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: #ffffff;
}

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

@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 550px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* =========================================
   DROPDOWN DE SERVICIOS
========================================= */

.nav-services {
    position: relative;
}

/* Caja desplegable */
.services-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);

    width: 390px;
    padding: 18px;

    background: #ffffff;
    border-radius: 14px;

    box-shadow: 0 15px 40px rgba(0, 35, 90, 0.18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

    z-index: 2000;
}

/* Evita que se cierre al mover el mouse
   desde "Servicios" hacia la caja */
.services-dropdown::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

/* Mostrar dropdown */
.nav-services:hover .services-dropdown,
.nav-services:focus-within .services-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(-50%) translateY(0);
}

/* Cada servicio */
.services-dropdown .dropdown-service {
    display: flex;
    align-items: center;
    gap: 16px;

    width: 100%;
    padding: 14px 12px;

    color: #07336f;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;

    text-decoration: none;
    border-radius: 10px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.services-dropdown .dropdown-service:hover {
    background: #f5f7ff;
    transform: translateX(4px);
}

/* Íconos */

.dropdown-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

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

    border-radius: 50%;

    color: white;
    font-size: 18px;
}

.icon-masivos {
    background: #08b9bd;
}

.icon-rpo {
    background: #6545f6;
}

.icon-busqueda {
    background: #079bd3;
}

/* =========================
   BOTÓN CONEXA
========================= */

.btn-conexa {
    background: #00c2c7;
    color: #ffffff;
    border: 2px solid #00c2c7;

    padding: 14px 28px;
    border-radius: 6px;

    font-weight: 700;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    transition: all 0.3s ease;
}

.btn-conexa:hover {
    background: #ffffff;
    color: #0d3b78;
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================
   IGUALAR SUBTÍTULOS DE TODAS LAS SECCIONES
========================================== */

.solutions-label,
.section-tag,
.challenges-label,
.clients-label {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
}

/* ==========================================
   ANIMACIÓN AL HACER SCROLL
========================================== */

.reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Tarjetas escalonadas */
.solution-card.reveal:nth-child(1) {
    transition-delay: 0.1s;
}

.solution-card.reveal:nth-child(2) {
    transition-delay: 0.3s;
}

.solution-card.reveal:nth-child(3) {
    transition-delay: 0.5s;
}

/* ==========================================
   ANIMACIÓN PORTADA
========================================== */

.hero-content.reveal {
    transform: translateY(35px);
    transition-delay: 0.1s;
}

.hero-buttons.reveal {
    transform: translateY(25px);
    transition-delay: 0.3s;
}


/* ==========================================
   INDICADORES DE LA PORTADA
   aparecen uno por uno
========================================== */

.stat-item.reveal:nth-child(1) {
    transition-delay: 0.1s;
}

.stat-item.reveal:nth-child(2) {
    transition-delay: 0.25s;
}

.stat-item.reveal:nth-child(3) {
    transition-delay: 0.4s;
}

.stat-item.reveal:nth-child(4) {
    transition-delay: 0.55s;
}

/* ==========================================
   FOOTER RESPONSIVE - CELULAR
========================================== */

@media (max-width: 768px) {

    /* Footer general */
    footer,
    .footer {
        width: 100%;
        padding: 35px 22px 0;
        box-sizing: border-box;
    }

    /* Contenedor principal */
    .footer-container,
    .footer-content {
        width: 100%;
        max-width: 100%;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 25px;

        margin: 0 auto;
        padding: 0;
    }

    /* La parte del logo ocupa las 2 columnas */
    .footer-brand,
    .footer-info {
        grid-column: 1 / -1;
    }

    /* Logo */
    .footer-logo,
    .footer-brand img {
        width: 155px;
        max-width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    /* Descripción */
    .footer-brand p,
    .footer-info p {
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
        max-width: 420px;
    }

    /* Títulos */
    .footer h3,
    .footer h4 {
        font-size: 17px;
        margin: 0 0 14px;
    }

    /* Listas */
    .footer ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .footer li {
        margin-bottom: 10px;
    }

    /* Links */
    .footer a {
        font-size: 13px;
        line-height: 1.4;
    }

    /* Contacto */
    .footer-contact p {
        font-size: 13px;
        margin-bottom: 10px;
        word-break: break-word;
    }

    /* Parte inferior */
    .footer-bottom {
        margin-top: 30px;
        padding: 20px 10px;

        text-align: center;
        font-size: 12px;
        line-height: 1.6;
    }

    .footer-bottom p {
        margin: 4px 0;
    }
}

.footer-brand p,
.footer-info p {
    font-size: 15px;
    line-height: 1.55;
}

.footer li {
    margin-bottom: 7px;
}

.footer-container,
.footer-content {
    gap: 25px 22px;
}

/* ==========================================
   CURSOR PERSONALIZADO MORADO - PC
========================================== */

.cursor-purple {
    position: fixed;
    top: 0;
    left: 0;

    width: 24px;
    height: 24px;

    /* Normal: círculo vacío */
    background: transparent;
    border: 1.5px solid #6c45ff;
    border-radius: 50%;

    pointer-events: none;
    z-index: 999999;

    transform: translate(-50%, -50%);

    transition:
        width 0.18s ease,
        height 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;

    /* Importante para que no bloquee clicks */
    user-select: none;
}


/* Cuando pasa por enlaces, botones, etc. */
.cursor-purple.hover {
    width: 32px;
    height: 32px;

    background: rgba(108, 69, 255, 0.28);
    border-color: rgba(108, 69, 255, 0.45);
}


/* Ocultarlo cuando el mouse sale de la página */
.cursor-purple.hidden {
    opacity: 0;
}


/* NO mostrar en celulares */
@media (hover: none), (pointer: coarse) {

    .cursor-purple {
        display: none !important;
    }

}

/* ==========================================
   MODAL SERVICIOS - SOLO CELULAR
========================================== */

@media (max-width: 640px) {

    /* OVERLAY */
    #modal-servicio-detalle {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 16px !important;

        box-sizing: border-box !important;

        /* CENTRAR LA CAJA */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        /* CERRADO */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        overflow: hidden !important;

        z-index: 2147483647 !important;

        transform: none !important;
    }


    /* MODAL ABIERTO */
    #modal-servicio-detalle.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        top: 0 !important;
        left: 0 !important;

        transform: none !important;
    }


    /* CAJA BLANCA */
    #modal-servicio-detalle .modal-card {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        max-width: 400px !important;

        max-height: calc(100dvh - 32px) !important;

        margin: 0 !important;
        padding: 24px 20px 20px !important;

        box-sizing: border-box !important;

        transform: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        border-radius: 20px !important;

        -webkit-overflow-scrolling: touch;
    }


    /* QUITAR CUALQUIER ANIMACIÓN DE PC */
    #modal-servicio-detalle.active .modal-card {
        transform: none !important;
        top: auto !important;
    }


    /* TÍTULO */
    #modal-servicio-titulo {
        font-size: 21px !important;
        line-height: 1.15 !important;

        text-align: center !important;

        margin: 8px 35px 10px !important;
    }


    /* CONTENIDO */
    #modal-servicio-contenido {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }


    #modal-servicio-contenido .details-section {
        margin-bottom: 10px !important;
    }


    #modal-servicio-contenido .details-section h4 {
        margin-top: 5px !important;
        margin-bottom: 8px !important;
    }


    #modal-servicio-contenido .details-list {
        gap: 5px !important;
        margin-bottom: 8px !important;
    }


    #modal-servicio-contenido .details-list li {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }


    /* BOTÓN X */
    #btn-cerrar-modal-servicio {
        position: absolute !important;

        top: 12px !important;
        right: 12px !important;

        z-index: 10 !important;
    }


    /* BOTÓN SOLICITAR PROPUESTA */
    #modal-servicio-contacto {
        width: 100% !important;
        margin-top: 10px !important;
    }
}