/* =========================
   CONFIGURACIÓN GENERAL
========================= */

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

html {
    scroll-behavior: smooth;
}

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

    background:
        radial-gradient(
            circle at left center,
            rgba(0, 181, 216, 0.14),
            transparent 30%
        ),

        radial-gradient(
            circle at right center,
            rgba(0, 155, 182, 0.12),
            transparent 35%
        ),

        linear-gradient(
            120deg,
            #020d18,
            #031B33 45%,
            #04172a
        );

    color: white;

    min-height: 100vh;

    overflow-x: hidden;
}


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

.header {
    height: 95px;

    padding: 0 6%;

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

    position: relative;
    z-index: 20;

    border-bottom: 1px solid rgba(0, 181, 216, 0.16);

    background: rgba(2, 13, 24, 0.88);

    backdrop-filter: blur(12px);
}


/* LOGO NAV */

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

.logo-nav img {
    width: 60px;
    height: 60px;

    object-fit: contain;
}

.logo-nav span {
    font-size: 15px;

    letter-spacing: 4px;

    color: #f4f7fa;
}


/* MENÚ */

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

.nav a {
    color: #e8eef2;

    text-decoration: none;

    font-size: 14px;

    padding: 15px 0;

    position: relative;

    transition: 0.3s;
}

.nav a:hover {
    color: #00B5D8;
}

.nav a.activo {
    color: #00B5D8;
}

.nav a.activo::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 5px;

    width: 35px;
    height: 2px;

    background: #00B5D8;
}


/* =========================
   MENÚ DESPLEGABLE SERVICIOS
========================= */

.dropdown {
    position: relative;

    display: flex;

    align-items: center;
}

.dropdown-boton {
    display: flex;

    align-items: center;

    gap: 6px;
}

.flecha {
    font-size: 12px;

    transition: transform 0.3s ease;
}

.dropdown-menu {
    position: absolute;

    top: 45px;
    left: 50%;

    transform:
        translateX(-50%)
        translateY(10px);

    width: 200px;

    padding: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 27, 51, 0.98),
            rgba(2, 13, 24, 0.98)
        );

    border:
        1px solid
        rgba(0, 181, 216, 0.25);

    border-radius: 12px;

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

    backdrop-filter: blur(15px);

    opacity: 0;

    visibility: hidden;

    transition: 0.25s ease;

    z-index: 100;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;

    visibility: visible;

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

.dropdown:hover .flecha {
    transform: rotate(180deg);
}

.dropdown-menu a {
    display: block;

    width: 100%;

    padding: 13px 15px;

    border-radius: 8px;

    color: #dce8ee;

    text-decoration: none;

    font-size: 14px;

    transition: 0.25s;
}

.dropdown-menu a:hover {
    color: #00B5D8;

    background:
        rgba(0, 181, 216, 0.08);
}


/* DERECHA NAV */

.nav-derecha {
    display: flex;

    align-items: center;

    gap: 20px;
}

.btn-contacto {
    text-decoration: none;

    color: #00B5D8;

    font-size: 13px;

    border:
        1px solid
        #00B5D8;

    padding: 14px 30px;

    border-radius: 50px;

    transition: 0.3s;
}

.btn-contacto:hover {
    background: #00B5D8;

    color: #031B33;

    box-shadow:
        0 0 25px
        rgba(0, 181, 216, 0.4);
}


/* =========================
   PAÍS / IDIOMA
========================= */

.pais-dropdown {
    position: relative;
}

.pais {
    border:
        1px solid
        rgba(0, 181, 216, 0.25);

    padding: 13px 20px;

    border-radius: 30px;

    font-size: 13px;

    color: #e6edf3;

    background: transparent;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 7px;

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

    transition: 0.3s;
}

.pais:hover {
    border-color: #00B5D8;

    color: #00B5D8;
}

.pais-menu {
    width: 190px;

    top: 55px;

    left: auto;

    right: 0;

    transform:
        translateY(10px);
}

.pais-dropdown:hover .pais-menu {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


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

.hero {
    min-height: 720px;

    padding:
        80px 9%
        60px;

    display: grid;

    grid-template-columns:
        42% 58%;

    align-items: center;

    position: relative;
}


/* GLOWS LATERALES */

.glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}

.glow-left {
    width: 260px;

    height: 520px;

    left: -190px;

    bottom: -40px;

    background:
        rgba(0, 181, 216, 0.35);
}

.glow-right {
    width: 380px;

    height: 380px;

    right: -220px;

    top: 100px;

    background:
        rgba(0, 155, 182, 0.18);
}


/* =========================
   TEXTO
========================= */

.hero-texto {
    position: relative;

    z-index: 5;
}

.hero-texto h1 {
    font-size:
        clamp(42px, 4vw, 64px);

    font-weight: 300;

    line-height: 1.15;

    letter-spacing: -1px;

    color: #f4f7fa;

    margin-bottom: 30px;
}

.hero-texto h1 span {
    color: #00B5D8;
}

.linea {
    width: 58px;

    height: 4px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #00B5D8,
            #009BB6
        );

    margin-bottom: 28px;
}

.hero-texto p {
    max-width: 560px;

    font-size: 17px;

    line-height: 1.75;

    color: #c9d4dd;

    margin-bottom: 35px;
}


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

.botones {
    display: flex;

    gap: 18px;

    flex-wrap: wrap;
}

.btn {
    text-decoration: none;

    padding: 17px 28px;

    border-radius: 40px;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 0.4px;

    display: flex;

    align-items: center;

    gap: 18px;

    transition: 0.3s;
}

.btn-principal {
    color: #001820;

    background:
        linear-gradient(
            135deg,
            #00B5D8,
            #19d6d0
        );
}

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

    box-shadow:
        0 10px 35px
        rgba(0, 181, 216, 0.35);
}

.btn-secundario {
    border:
        1px solid
        #00B5D8;

    color: #00B5D8;
}

.btn-secundario:hover {
    background:
        rgba(0, 181, 216, 0.1);

    transform:
        translateY(-3px);
}


/* =========================
   LADO DERECHO
========================= */

.hero-imagen {
    height: 620px;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    z-index: 3;
}


/* LOGO GRANDE */

.logo-principal {
    width: 520px;

    height: 520px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 10;
}

.logo-principal::before {
    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 181, 216, 0.18),
            transparent 65%
        );

    filter: blur(25px);
}

.logo-principal img {
    width: 100%;

    max-height: 520px;

    object-fit: contain;

    position: relative;

    z-index: 2;

    filter:
        drop-shadow(
            0 20px 30px
            rgba(0, 0, 0, 0.4)
        )
        drop-shadow(
            0 0 30px
            rgba(0, 181, 216, 0.18)
        );
}


/* =========================
   ONDAS DECORATIVAS
========================= */

.ondas {
    position: absolute;

    width: 620px;

    height: 320px;

    border:
        1px solid
        rgba(0, 181, 216, 0.55);

    border-radius:
        50% 50% 60% 40% /
        55% 40% 60% 45%;

    transform:
        rotate(-12deg);
}

.ondas-1 {
    width: 650px;

    height: 300px;

    opacity: 0.9;
}

.ondas-2 {
    width: 680px;

    height: 335px;

    opacity: 0.7;

    border-color:
        rgba(0, 181, 216, 0.45);
}

.ondas-3 {
    width: 720px;

    height: 370px;

    opacity: 0.5;

    border-color:
        rgba(0, 155, 182, 0.4);
}

.ondas-4 {
    width: 760px;

    height: 410px;

    opacity: 0.35;

    border-color:
        rgba(21, 72, 117, 0.8);
}

.ondas-5 {
    width: 820px;

    height: 450px;

    opacity: 0.25;

    border-color:
        rgba(0, 181, 216, 0.45);
}


/* =========================
   BENEFICIOS
========================= */

.beneficios {
    min-height: 150px;

    padding: 30px 9%;

    display: grid;

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

    border-top:
        1px solid
        rgba(0, 181, 216, 0.18);

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.7),
            rgba(2, 13, 24, 0.95)
        );
}

.beneficio {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 15px 30px;

    border-right:
        1px solid
        rgba(0, 181, 216, 0.18);
}

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

.icono {
    color: #00B5D8;

    font-size: 42px;

    line-height: 1;
}

.beneficio h3 {
    color: #00B5D8;

    font-size: 15px;

    margin-bottom: 10px;
}

.beneficio p {
    color: #becbd5;

    line-height: 1.6;

    font-size: 14px;
}


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

@media (max-width: 1100px) {

    .nav {
        gap: 20px;
    }

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

        padding-left: 5%;

        padding-right: 5%;
    }

    .hero-texto h1 {
        font-size: 42px;
    }

    .logo-principal {
        width: 420px;

        height: 420px;
    }

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


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

@media (max-width: 800px) {

    .header {
        height: auto;

        padding: 20px;

        flex-wrap: wrap;

        gap: 20px;
    }

    .nav {
        display: none;
    }

    .nav-derecha {
        display: none;
    }

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

        padding:
            70px 25px
            40px;
    }

    .hero-texto {
        text-align: left;
    }

    .hero-texto h1 {
        font-size: 39px;
    }

    .hero-imagen {
        height: 460px;
    }

    .logo-principal {
        width: 360px;

        height: 360px;
    }

    .ondas {
        width: 430px;
    }

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

    .beneficio {
        border-right: none;

        border-bottom:
            1px solid
            rgba(0, 181, 216, 0.18);
    }
}


/* =========================
   PÁGINA DE CONTACTO
========================= */

.contacto {
    min-height:
        calc(100vh - 95px);

    padding: 90px 9%;

    display: grid;

    grid-template-columns:
        42% 58%;

    gap: 80px;

    align-items: start;

    position: relative;

    overflow: hidden;
}


/* BRILLOS */

.contacto-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}

.contacto-glow-izq {
    width: 350px;

    height: 500px;

    left: -250px;

    top: 120px;

    background:
        rgba(0, 181, 216, 0.25);
}

.contacto-glow-der {
    width: 400px;

    height: 400px;

    right: -250px;

    bottom: 100px;

    background:
        rgba(0, 155, 182, 0.18);
}


/* =========================
   INFORMACIÓN IZQUIERDA
========================= */

.contacto-info {
    position: relative;

    z-index: 2;

    padding-top: 25px;
}

.contacto-etiqueta {
    color: #00B5D8;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 4px;
}

.contacto-info h1 {
    max-width: 520px;

    margin-top: 18px;

    margin-bottom: 28px;

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

    line-height: 1.08;

    font-weight: 300;

    color: #f4f7fa;
}

.contacto-info h1 span {
    color: #00B5D8;
}

.contacto-info > p {
    max-width: 540px;

    color: #b9c8d3;

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 18px;
}

.contacto-intro {
    color:
        #e5edf2 !important;

    font-size:
        18px !important;
}


/* PUNTOS */

.contacto-puntos {
    margin-top: 50px;

    display: flex;

    flex-direction: column;

    gap: 25px;
}

.contacto-punto {
    display: flex;

    align-items: flex-start;

    gap: 20px;

    padding-bottom: 25px;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);
}

.contacto-punto > span {
    min-width: 48px;

    height: 48px;

    display: flex;

    justify-content: center;

    align-items: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.5);

    border-radius: 50%;

    color: #00B5D8;

    font-size: 13px;
}

.contacto-punto h3 {
    color: #f2f6f8;

    font-size: 16px;

    margin-bottom: 7px;
}

.contacto-punto p {
    max-width: 380px;

    color: #93a9b8;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================
   FORMULARIO
========================= */

.contacto-formulario {
    position: relative;

    z-index: 2;

    padding: 40px;

    border:
        1px solid
        rgba(0, 181, 216, 0.18);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 46, 80, 0.52),
            rgba(2, 13, 24, 0.85)
        );

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.30);

    backdrop-filter:
        blur(16px);
}


/* ENCABEZADO */

.formulario-encabezado {
    margin-bottom: 35px;
}

.formulario-encabezado > span {
    color: #00B5D8;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 3px;
}

.formulario-encabezado h2 {
    margin-top: 10px;

    margin-bottom: 8px;

    font-size: 30px;

    font-weight: 400;

    color: #f3f7fa;
}

.formulario-encabezado p {
    color: #889eac;

    font-size: 13px;
}


/* FILAS */

.form-fila {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}


/* CAMPOS */

.form-grupo {
    display: flex;

    flex-direction: column;

    margin-bottom: 22px;
}

.form-grupo label {
    margin-bottom: 9px;

    color: #d7e1e7;

    font-size: 13px;

    font-weight: 600;
}

.opcional {
    color: #718995;

    font-weight: normal;

    font-size: 11px;
}


/* INPUTS */

.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    width: 100%;

    padding: 15px 16px;

    border:
        1px solid
        rgba(0, 181, 216, 0.20);

    border-radius: 10px;

    outline: none;

    background:
        rgba(3, 27, 51, 0.65);

    color: white;

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

    font-size: 14px;

    transition: 0.3s;
}

.form-grupo input::placeholder,
.form-grupo textarea::placeholder {
    color: #6f8795;
}


/* FOCUS */

.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    border-color: #00B5D8;

    background:
        rgba(3, 27, 51, 0.90);

    box-shadow:
        0 0 0 3px
        rgba(0, 181, 216, 0.08);
}

.form-grupo textarea {
    resize: vertical;

    min-height: 170px;
}

.form-grupo select {
    cursor: pointer;
}


/* SELECT OPTIONS */

.form-grupo select option {
    background: #031B33;

    color: white;
}


/* =========================
   PRIVACIDAD
========================= */

.form-check {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 5px;

    margin-bottom: 28px;
}

.form-check input {
    margin-top: 3px;

    accent-color: #00B5D8;

    cursor: pointer;
}

.form-check label {
    color: #aebdc7;

    font-size: 12px;

    line-height: 1.6;
}

.form-check a {
    color: #00B5D8;

    text-decoration: none;
}

.form-check a:hover {
    text-decoration: underline;
}


/* =========================
   BOTÓN ENVIAR
========================= */

.btn-enviar {
    border: none;

    padding: 17px 30px;

    border-radius: 40px;

    background:
        linear-gradient(
            135deg,
            #00B5D8,
            #19d6d0
        );

    color: #001820;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 0.5px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 30px;

    transition: 0.3s;
}

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

    box-shadow:
        0 12px 35px
        rgba(0, 181, 216, 0.30);
}


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

@media (max-width: 1000px) {

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

        gap: 50px;

        padding-left: 6%;

        padding-right: 6%;
    }

    .contacto-info {
        max-width: 700px;
    }
}


@media (max-width: 650px) {

    .contacto {
        padding:
            60px 20px;
    }

    .contacto-info h1 {
        font-size: 42px;
    }

    .contacto-formulario {
        padding: 25px;
    }

    .form-fila {
        grid-template-columns:
            1fr;

        gap: 0;
    }

    .btn-enviar {
        width: 100%;

        justify-content: center;
    }
}

/* =========================
   BOLSA DE TRABAJO
========================= */

.bolsa-hero {
    min-height: 690px;

    padding: 90px 9%;

    display: grid;

    grid-template-columns:
        52% 48%;

    align-items: center;

    position: relative;

    overflow: hidden;
}


/* BRILLOS */

.bolsa-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}

.bolsa-glow-izq {
    width: 400px;
    height: 500px;

    left: -300px;
    top: 100px;

    background:
        rgba(0, 181, 216, 0.22);
}

.bolsa-glow-der {
    width: 500px;
    height: 500px;

    right: -260px;
    top: 80px;

    background:
        rgba(0, 155, 182, 0.18);
}


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

.bolsa-hero-contenido {
    position: relative;

    z-index: 3;

    max-width: 680px;
}

.bolsa-etiqueta {
    color: #00B5D8;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 4px;
}

.bolsa-hero-contenido h1 {
    margin-top: 18px;

    margin-bottom: 18px;

    max-width: 650px;

    font-size:
        clamp(48px, 5vw, 76px);

    font-weight: 300;

    line-height: 1.05;

    color: #f4f7fa;
}

.bolsa-hero-contenido h1 span {
    color: #00B5D8;
}

.bolsa-subtitulo {
    margin-bottom: 22px;

    color: #e4edf2;

    font-size: 22px;

    font-weight: 500;
}

.bolsa-descripcion {
    max-width: 620px;

    margin-bottom: 17px;

    color: #aebfca;

    font-size: 16px;

    line-height: 1.8;
}


/* BOTÓN */

.btn-bolsa {
    display: inline-flex;

    align-items: center;

    gap: 25px;

    margin-top: 20px;

    padding: 17px 28px;

    border-radius: 40px;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #00B5D8,
            #19d6d0
        );

    color: #001820;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 0.4px;

    transition: 0.3s;
}

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

    box-shadow:
        0 12px 35px
        rgba(0, 181, 216, 0.30);
}


/* =========================
   VISUAL DERECHO
========================= */

.bolsa-hero-visual {
    height: 480px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}

.bolsa-mensaje {
    width: 330px;
    height: 330px;

    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.25);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 181, 216, 0.13),
            rgba(3, 27, 51, 0.72) 60%,
            rgba(2, 13, 24, 0.85)
        );

    box-shadow:
        0 0 60px
        rgba(0, 181, 216, 0.10);

    backdrop-filter:
        blur(10px);
}

.bolsa-mensaje > span {
    margin-bottom: 14px;

    color: #00B5D8;

    font-family: Georgia, serif;

    font-size: 65px;
}

.bolsa-mensaje h2 {
    max-width: 240px;

    color: #eef5f8;

    font-size: 26px;

    font-weight: 300;

    line-height: 1.25;
}

.bolsa-mensaje p {
    margin-top: 12px;

    color: #7f99a7;

    font-size: 14px;
}


/* CÍRCULOS DECORATIVOS */

.bolsa-circulo {
    position: absolute;

    border:
        1px solid
        rgba(0, 181, 216, 0.25);

    border-radius: 50%;
}

.bolsa-circulo-1 {
    width: 420px;
    height: 420px;
}

.bolsa-circulo-2 {
    width: 490px;
    height: 350px;

    transform: rotate(25deg);

    border-color:
        rgba(21, 72, 117, 0.55);
}

.bolsa-circulo-3 {
    width: 540px;
    height: 280px;

    transform: rotate(-22deg);

    border-color:
        rgba(0, 155, 182, 0.35);
}


/* =========================
   SECCIÓN FORMULARIO
========================= */

.bolsa-registro {
    padding:
        90px 9%
        110px;

    position: relative;

    border-top:
        1px solid
        rgba(0, 181, 216, 0.12);

    background:
        linear-gradient(
            180deg,
            rgba(2, 13, 24, 0.35),
            rgba(3, 27, 51, 0.50)
        );
}


/* FORMULARIO */

.bolsa-formulario {
    width: min(850px, 100%);

    margin: 0 auto;

    padding: 45px;

    border:
        1px solid
        rgba(0, 181, 216, 0.18);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 46, 80, 0.54),
            rgba(2, 13, 24, 0.90)
        );

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.28);

    backdrop-filter:
        blur(16px);
}

.bolsa-form-encabezado {
    margin-bottom: 38px;
}

.bolsa-form-encabezado > span {
    color: #00B5D8;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 3px;
}

.bolsa-form-encabezado h2 {
    margin-top: 10px;

    margin-bottom: 8px;

    color: #f3f7fa;

    font-size: 34px;

    font-weight: 400;
}

.bolsa-form-encabezado p {
    color: #8299a7;

    font-size: 13px;
}


/* =========================
   PREGUNTA CV
========================= */

.cv-pregunta {
    margin-bottom: 25px;

    padding: 22px;

    border:
        1px solid
        rgba(0, 181, 216, 0.16);

    border-radius: 12px;

    background:
        rgba(0, 181, 216, 0.035);
}

.cv-pregunta > p {
    margin-bottom: 15px;

    color: #d7e1e7;

    font-size: 14px;

    font-weight: 600;
}

.cv-opciones {
    display: flex;

    gap: 15px;
}

.radio-opcion {
    min-width: 110px;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(0, 181, 216, 0.22);

    border-radius: 30px;

    color: #cbd8df;

    cursor: pointer;

    transition: 0.25s;
}

.radio-opcion:hover {
    border-color: #00B5D8;

    background:
        rgba(0, 181, 216, 0.06);
}

.radio-opcion input {
    accent-color: #00B5D8;

    cursor: pointer;
}


/* =========================
   SECCIONES CONDICIONALES
========================= */

.seccion-condicional {
    display: none;

    margin-bottom: 25px;
}

.seccion-condicional.mostrar {
    display: block;

    animation:
        aparecerBolsa
        0.35s ease;
}

@keyframes aparecerBolsa {

    from {
        opacity: 0;
        transform:
            translateY(-8px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


/* =========================
   SUBIR PDF
========================= */

.subir-pdf {
    min-height: 115px;

    position: relative;

    display: flex;

    align-items: center;

    border:
        1px dashed
        rgba(0, 181, 216, 0.48);

    border-radius: 12px;

    background:
        rgba(0, 181, 216, 0.035);

    transition: 0.3s;
}

.subir-pdf:hover {
    border-color: #00B5D8;

    background:
        rgba(0, 181, 216, 0.07);
}

.subir-pdf input {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}

.subir-pdf-contenido {
    width: 100%;

    padding: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    pointer-events: none;
}

.pdf-icono {
    width: 50px;
    height: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.40);

    border-radius: 10px;

    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;
}

.subir-pdf-contenido strong {
    display: block;

    margin-bottom: 5px;

    color: #00B5D8;

    font-size: 14px;
}

.subir-pdf-contenido span {
    display: block;

    color: #788f9c;

    font-size: 12px;
}

.archivo-error {
    margin-top: 8px;

    color: #ff7474;

    font-size: 12px;
}


/* =========================
   SIN CV
========================= */

.sin-cv-encabezado {
    margin-bottom: 25px;

    padding:
        18px 20px;

    border-left:
        3px solid
        #00B5D8;

    background:
        rgba(0, 181, 216, 0.035);
}

.sin-cv-encabezado span {
    display: block;

    margin-bottom: 5px;

    color: #00B5D8;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 2px;
}

.sin-cv-encabezado p {
    color: #91a6b2;

    font-size: 13px;

    line-height: 1.6;
}


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

@media (max-width: 1000px) {

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

        gap: 40px;
    }

    .bolsa-hero-contenido {
        max-width: 750px;
    }

    .bolsa-hero-visual {
        height: 430px;
    }
}


@media (max-width: 650px) {

    .bolsa-hero {
        padding:
            65px 20px;
    }

    .bolsa-hero-contenido h1 {
        font-size: 45px;
    }

    .bolsa-subtitulo {
        font-size: 19px;
    }

    .bolsa-hero-visual {
        height: 360px;
    }

    .bolsa-mensaje {
        width: 270px;
        height: 270px;
    }

    .bolsa-circulo-1 {
        width: 320px;
        height: 320px;
    }

    .bolsa-circulo-2 {
        width: 350px;
        height: 280px;
    }

    .bolsa-circulo-3 {
        width: 380px;
        height: 230px;
    }

    .bolsa-registro {
        padding:
            65px 20px;
    }

    .bolsa-formulario {
        padding: 25px;
    }

    .cv-opciones {
        flex-direction: column;
    }

    .radio-opcion {
        width: 100%;
    }
}

/* =====================================================
   PÁGINA NOSOTROS
===================================================== */


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

.nosotros-hero {
    min-height: 650px;

    padding: 90px 9%;

    display: grid;

    grid-template-columns: 58% 42%;

    align-items: center;

    position: relative;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);
}


.nosotros-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}


.glow-nosotros-1 {
    width: 400px;
    height: 500px;

    left: -280px;
    bottom: -100px;

    background:
        rgba(0, 181, 216, 0.22);
}


.glow-nosotros-2 {
    width: 500px;
    height: 500px;

    right: -220px;
    top: 20px;

    background:
        rgba(0, 155, 182, 0.16);
}


/* TEXTO */

.nosotros-hero-texto {
    position: relative;

    z-index: 4;

    max-width: 800px;
}


.nosotros-etiqueta {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.nosotros-hero-texto h1 {
    margin-top: 20px;

    margin-bottom: 30px;

    font-size:
        clamp(48px, 5vw, 78px);

    line-height: 1.05;

    font-weight: 300;

    color: #f3f7fa;
}


.nosotros-hero-texto h1 span {
    display: block;

    color: #00B5D8;
}


.nosotros-hero-texto p {
    max-width: 680px;

    color: #aebfc9;

    font-size: 18px;

    line-height: 1.8;
}


.nosotros-linea {
    width: 75px;

    height: 3px;

    margin-top: 35px;

    background:
        linear-gradient(
            90deg,
            #00B5D8,
            #009BB6
        );
}


/* LOGO HERO */

.nosotros-hero-logo {
    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 3;
}


.nosotros-hero-logo::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 181, 216, 0.17),
            transparent 68%
        );

    filter: blur(25px);
}


.nosotros-hero-logo img {
    width: min(440px, 90%);

    position: relative;

    z-index: 2;

    filter:
        drop-shadow(
            0 20px 35px
            rgba(0, 0, 0, 0.4)
        )
        drop-shadow(
            0 0 35px
            rgba(0, 181, 216, 0.18)
        );
}


/* =====================================================
   SECCIONES QUIENES SOMOS
===================================================== */

.nosotros-seccion {
    min-height: 720px;

    padding: 110px 9%;

    display: grid;

    grid-template-columns: 50% 50%;

    gap: 90px;

    align-items: center;

    position: relative;
}


.nosotros-invertida {
    background:
        linear-gradient(
            180deg,
            rgba(10, 46, 80, 0.18),
            rgba(2, 13, 24, 0.15)
        );
}


/* =========================
   IMÁGENES
========================= */

.nosotros-imagen {
    position: relative;

    height: 540px;

    overflow: hidden;

    border-radius: 22px;

    transform:
        translateY(
            var(--movimiento-y, 0px)
        );

    transition:
        transform 0.08s linear;

    will-change: transform;
}


.nosotros-imagen img {
    width: 100%;
    height: 115%;

    position: absolute;

    left: 0;
    top: -7%;

    object-fit: cover;

    transition:
        transform 0.7s ease;

    filter:
        saturate(0.9)
        contrast(1.04);
}


.nosotros-imagen:hover img {
    transform: scale(1.035);
}


.nosotros-imagen::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            145deg,
            rgba(0, 181, 216, 0.07),
            transparent 45%,
            rgba(3, 27, 51, 0.24)
        );

    pointer-events: none;
}


.marco-imagen {
    position: absolute;

    width: 85%;
    height: 85%;

    left: -25px;
    bottom: -25px;

    border:
        1px solid
        rgba(0, 181, 216, 0.30);

    border-radius: 22px;

    z-index: -1;
}


/* =========================
   TEXTO DE SECCIONES
========================= */

.nosotros-contenido {
    position: relative;
}


.numero-seccion {
    position: absolute;

    right: 0;
    top: -70px;

    font-size: 100px;

    font-weight: bold;

    color:
        rgba(0, 181, 216, 0.045);

    line-height: 1;
}


.mini-titulo {
    display: block;

    margin-bottom: 17px;

    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.nosotros-contenido h2 {
    max-width: 620px;

    margin-bottom: 30px;

    color: #f1f5f7;

    font-size:
        clamp(37px, 4vw, 58px);

    font-weight: 300;

    line-height: 1.12;
}


.nosotros-contenido h2 span {
    color: #00B5D8;
}


.nosotros-contenido > p {
    max-width: 620px;

    margin-bottom: 18px;

    color: #9fb3bf;

    font-size: 16px;

    line-height: 1.8;
}


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

.proceso-lista {
    margin-top: 35px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.proceso-lista div {
    padding: 10px 14px;

    border:
        1px solid
        rgba(0, 181, 216, 0.17);

    border-radius: 30px;

    color: #b8c7cf;

    font-size: 12px;

    background:
        rgba(0, 181, 216, 0.025);
}


.proceso-lista span {
    margin-right: 7px;

    color: #00B5D8;

    font-size: 10px;
}



/* =====================================================
   PROPUESTA DE VALOR
===================================================== */

.propuesta {
    padding: 120px 9%;

    border-top:
        1px solid
        rgba(0, 181, 216, 0.10);

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.10);

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.34),
            rgba(2, 13, 24, 0.72)
        );
}


.titulo-central {
    max-width: 800px;

    margin: 0 auto 70px;

    text-align: center;
}


.titulo-central > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.titulo-central h2 {
    margin-top: 15px;

    color: #f3f7fa;

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

    font-weight: 300;

    line-height: 1.15;
}


.titulo-central h2 strong {
    color: #00B5D8;

    font-weight: 300;
}


.titulo-central p {
    max-width: 650px;

    margin: 20px auto 0;

    color: #91a7b4;

    font-size: 16px;

    line-height: 1.75;
}


/* CARDS */

.propuesta-grid {
    display: grid;

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

    gap: 18px;
}


.valor-card {
    min-height: 300px;

    padding: 35px 28px;

    position: relative;

    border:
        1px solid
        rgba(0, 181, 216, 0.14);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 46, 80, 0.36),
            rgba(2, 13, 24, 0.74)
        );

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


.valor-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(0, 181, 216, 0.42);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.22);
}


.valor-numero {
    position: absolute;

    top: 25px;
    right: 25px;

    color:
        rgba(0, 181, 216, 0.25);

    font-size: 12px;
}


.valor-icono {
    width: 55px;
    height: 55px;

    margin-bottom: 28px;

    display: flex;

    justify-content: center;

    align-items: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.3);

    border-radius: 50%;

    color: #00B5D8;

    font-size: 25px;
}


.valor-card h3 {
    margin-bottom: 14px;

    color: #f1f6f8;

    font-size: 22px;

    font-weight: 400;
}


.valor-card p {
    color: #8fa5b2;

    font-size: 14px;

    line-height: 1.75;
}



/* =====================================================
   POR QUÉ JK
===================================================== */

.porque-jk {
    padding: 120px 9%;
}


.porque-jk-titulo {
    max-width: 800px;

    margin-bottom: 75px;
}


.porque-jk-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.porque-jk-titulo h2 {
    margin-top: 15px;

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

    font-weight: 300;

    color: #f2f7f9;

    line-height: 1.15;
}


.porque-jk-titulo strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.porque-grid {
    display: grid;

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

    gap: 0;
}


.porque-item {
    min-height: 270px;

    padding: 30px;

    border-left:
        1px solid
        rgba(0, 181, 216, 0.15);
}


.porque-item:last-child {
    border-right:
        1px solid
        rgba(0, 181, 216, 0.15);
}


.porque-item > span {
    color: #00B5D8;

    font-size: 12px;

    letter-spacing: 2px;
}


.porque-item h3 {
    margin:
        28px 0
        15px;

    color: #f1f6f8;

    font-size: 23px;

    font-weight: 400;
}


.porque-item p {
    color: #8ea4b1;

    font-size: 14px;

    line-height: 1.75;
}



/* =====================================================
   MISIÓN / VISIÓN
===================================================== */

.mision-vision {
    padding: 100px 9%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.38),
            rgba(2, 13, 24, 0.65)
        );
}


.mv-card {
    min-height: 420px;

    padding: 55px;

    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(0, 181, 216, 0.18);

    border-radius: 22px;

    background:
        linear-gradient(
            140deg,
            rgba(10, 46, 80, 0.48),
            rgba(2, 13, 24, 0.82)
        );
}


.mv-numero {
    position: absolute;

    right: 30px;
    bottom: -30px;

    color:
        rgba(0, 181, 216, 0.045);

    font-size: 190px;

    font-weight: bold;

    line-height: 1;
}


.mv-etiqueta {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.mv-card h2 {
    max-width: 480px;

    margin:
        25px 0
        25px;

    color: #f3f7fa;

    font-size: 38px;

    font-weight: 300;

    line-height: 1.2;
}


.mv-card p {
    max-width: 540px;

    position: relative;

    z-index: 2;

    color: #a0b2bd;

    font-size: 16px;

    line-height: 1.85;
}



/* =====================================================
   FILOSOFÍA
===================================================== */

.filosofia {
    min-height: 580px;

    padding: 110px 9%;

    display: grid;

    grid-template-columns:
        35% 65%;

    align-items: center;

    position: relative;

    overflow: hidden;
}


.filosofia-logo {
    display: flex;

    justify-content: center;
}


.filosofia-logo img {
    width: 350px;

    opacity: 0.10;

    filter:
        grayscale(0.25);
}


.filosofia-contenido {
    max-width: 800px;
}


.filosofia-contenido > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.filosofia-contenido h2 {
    margin:
        18px 0
        28px;

    color: #eef5f8;

    font-size:
        clamp(38px, 4vw, 57px);

    font-weight: 300;

    line-height: 1.15;
}


.filosofia-contenido strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.filosofia-contenido p {
    max-width: 700px;

    color: #9aafbb;

    font-size: 17px;

    line-height: 1.85;
}



/* =====================================================
   CIERRE
===================================================== */

.nosotros-cierre {
    min-height: 540px;

    padding: 100px 9%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    position: relative;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 181, 216, 0.10),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.45),
            rgba(2, 13, 24, 0.88)
        );

    border-top:
        1px solid
        rgba(0, 181, 216, 0.12);
}


.nosotros-cierre > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.nosotros-cierre h2 {
    max-width: 930px;

    margin:
        25px 0
        35px;

    color: #f3f7fa;

    font-size:
        clamp(39px, 4vw, 60px);

    font-weight: 300;

    line-height: 1.15;
}


.nosotros-cierre h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}



/* =====================================================
   ANIMACIONES AL APARECER
===================================================== */

.revelar {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.revelar.visible {
    opacity: 1;

    transform:
        translateY(0);
}



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

@media (max-width: 1100px) {

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


    .nosotros-seccion {
        gap: 50px;

        padding-left: 6%;

        padding-right: 6%;
    }


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


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


    .porque-item {
        border:
            1px solid
            rgba(0, 181, 216, 0.12);
    }

}



@media (max-width: 800px) {

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

        padding:
            70px 25px;
    }


    .nosotros-hero-logo {
        margin-top: 50px;
    }


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

        padding:
            80px 25px;

        gap: 50px;
    }


    .nosotros-invertida
    .nosotros-contenido {
        order: 2;
    }


    .nosotros-invertida
    .nosotros-imagen {
        order: 1;
    }


    .nosotros-imagen {
        height: 430px;
    }


    .propuesta {
        padding:
            80px 25px;
    }


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


    .porque-jk {
        padding:
            80px 25px;
    }


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


    .mision-vision {
        padding:
            70px 25px;

        grid-template-columns:
            1fr;
    }


    .mv-card {
        padding: 35px;

        min-height: auto;
    }


    .filosofia {
        padding:
            80px 25px;

        grid-template-columns:
            1fr;
    }


    .filosofia-logo {
        margin-bottom: 30px;
    }


    .filosofia-logo img {
        width: 230px;
    }


    .nosotros-cierre {
        padding:
            80px 25px;
    }

}

/* =====================================================
   ATRACCIÓN, SELECCIÓN Y HEADHUNTING
   SERVICIO UNIFICADO
===================================================== */


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

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

    padding: 95px 9%;

    display: grid;

    grid-template-columns:
        56% 44%;

    align-items: center;

    position: relative;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);
}


.atraccion-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}


.atraccion-glow-1 {
    width: 430px;
    height: 500px;

    left: -300px;
    bottom: -100px;

    background:
        rgba(0, 181, 216, 0.23);
}


.atraccion-glow-2 {
    width: 500px;
    height: 500px;

    right: -260px;
    top: 0;

    background:
        rgba(0, 155, 182, 0.15);
}


/* TEXTO HERO */

.atraccion-hero-texto {
    max-width: 760px;

    position: relative;

    z-index: 4;
}


.atraccion-etiqueta {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.atraccion-hero-texto h1 {
    margin:
        20px 0
        30px;

    color: #f3f7fa;

    font-size:
        clamp(50px, 5vw, 78px);

    font-weight: 300;

    line-height: 1.05;
}


.atraccion-hero-texto h1 span {
    display: block;

    color: #00B5D8;
}


.atraccion-hero-texto p {
    max-width: 650px;

    margin-bottom: 17px;

    color: #a8bbc6;

    font-size: 17px;

    line-height: 1.8;
}


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

.atraccion-visual {
    min-height: 470px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}


.atraccion-centro {
    width: 310px;
    height: 310px;

    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.30);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 181, 216, 0.15),
            rgba(3, 27, 51, 0.72) 60%,
            rgba(2, 13, 24, 0.88)
        );

    box-shadow:
        0 0 70px
        rgba(0, 181, 216, 0.10);
}


.atraccion-centro .centro-small {
    margin-bottom: 5px;

    color: #91b9c7;

    font-size: 10px;

    letter-spacing: 4px;
}


.atraccion-centro strong {
    color: #00B5D8;

    font-family:
        Georgia,
        serif;

    font-size: 80px;

    font-weight: 400;
}


.atraccion-centro p {
    max-width: 210px;

    color: #a6bac4;

    font-size: 13px;

    line-height: 1.6;
}


.atraccion-orbita {
    position: absolute;

    border:
        1px solid
        rgba(0, 181, 216, 0.25);

    border-radius: 50%;
}


.orbita-1 {
    width: 400px;
    height: 400px;
}


.orbita-2 {
    width: 470px;
    height: 320px;

    transform:
        rotate(28deg);

    border-color:
        rgba(21, 72, 117, 0.60);
}


.orbita-3 {
    width: 510px;
    height: 270px;

    transform:
        rotate(-24deg);

    border-color:
        rgba(0, 155, 182, 0.30);
}


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

.servicio-unificado {
    padding:
        120px 9%;

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.28),
            rgba(2, 13, 24, 0.72)
        );

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.10);
}


.servicio-unificado-titulo {
    max-width: 900px;

    margin-bottom: 70px;
}


.servicio-unificado-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.servicio-unificado-titulo h2 {
    margin:
        15px 0
        22px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 59px);

    font-weight: 300;

    line-height: 1.15;
}


.servicio-unificado-titulo h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.servicio-unificado-titulo p {
    max-width: 650px;

    color: #91a7b3;

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
   3 BENEFICIOS
===================================================== */

.servicio-unificado-grid {
    display: grid;

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

    gap: 18px;
}


.servicio-mini-card {
    min-height: 260px;

    padding: 32px;

    border:
        1px solid
        rgba(0, 181, 216, 0.14);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 46, 80, 0.35),
            rgba(2, 13, 24, 0.82)
        );

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


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

    border-color:
        rgba(0, 181, 216, 0.42);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.22);
}


.servicio-mini-card > span {
    color: #00B5D8;

    font-size: 11px;
}


.servicio-mini-card h3 {
    margin:
        35px 0
        14px;

    color: #f3f7fa;

    font-size: 24px;

    font-weight: 300;
}


.servicio-mini-card p {
    color: #8fa5b1;

    font-size: 14px;

    line-height: 1.75;
}


/* =====================================================
   HEADHUNTING TI COMPACTO
===================================================== */

.headhunting-compacto {
    padding:
        120px 9%;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.10);
}


.headhunting-compacto-titulo {
    max-width: 900px;

    margin-bottom: 70px;
}


.headhunting-compacto-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.headhunting-compacto-titulo h2 {
    margin:
        15px 0
        20px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 59px);

    font-weight: 300;

    line-height: 1.15;
}


.headhunting-compacto-titulo h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.headhunting-compacto-titulo p {
    max-width: 650px;

    color: #91a7b3;

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
   PERFILES TI COMPACTOS
===================================================== */

.perfiles-compactos {
    display: grid;

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

    border-top:
        1px solid
        rgba(0, 181, 216, 0.15);
}


.perfil-compacto {
    min-height: 150px;

    padding:
        28px 25px;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.13);

    transition:
        background 0.3s ease,
        padding-left 0.3s ease;
}


.perfil-compacto:nth-child(odd) {
    border-right:
        1px solid
        rgba(0, 181, 216, 0.13);
}


.perfil-compacto:hover {
    padding-left: 35px;

    background:
        rgba(0, 181, 216, 0.04);
}


.perfil-compacto > span {
    color: #00B5D8;

    font-size: 10px;
}


.perfil-compacto h3 {
    margin:
        13px 0
        7px;

    color: #f2f7f9;

    font-size: 22px;

    font-weight: 300;
}


.perfil-compacto small {
    color: #78909c;

    font-size: 11px;

    letter-spacing: 0.5px;
}


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

.proceso-seleccion {
    padding:
        125px 9%;

    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.18),
            rgba(2, 13, 24, 0.55)
        );
}


.proceso-encabezado {
    max-width: 820px;

    margin-bottom: 80px;
}


.proceso-encabezado > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.proceso-encabezado h2 {
    margin-top: 15px;

    color: #f2f7f9;

    font-size:
        clamp(40px, 4vw, 58px);

    font-weight: 300;

    line-height: 1.15;
}


.proceso-encabezado h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.proceso-timeline {
    max-width: 1050px;

    margin: 0 auto;
}


.proceso-paso {
    display: grid;

    grid-template-columns:
        90px 1px 1fr;

    gap: 35px;

    min-height: 190px;
}


.paso-numero {
    width: 65px;
    height: 65px;

    display: flex;

    justify-content: center;

    align-items: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.35);

    border-radius: 50%;

    color: #00B5D8;

    background:
        rgba(0, 181, 216, 0.035);

    font-size: 13px;
}


.paso-linea {
    width: 1px;

    height: 100%;

    background:
        linear-gradient(
            #00B5D8,
            rgba(0, 181, 216, 0.05)
        );
}


.paso-contenido {
    padding-bottom: 50px;
}


.paso-contenido > span {
    color: #00B5D8;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 3px;
}


.paso-contenido h3 {
    margin:
        10px 0
        12px;

    color: #f2f6f8;

    font-size: 25px;

    font-weight: 400;
}


.paso-contenido p {
    max-width: 650px;

    color: #8fa5b1;

    font-size: 14px;

    line-height: 1.8;
}


/* =====================================================
   CIERRE
===================================================== */

.atraccion-cierre {
    min-height: 550px;

    padding:
        100px 9%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    border-top:
        1px solid
        rgba(0, 181, 216, 0.12);

    background:
        radial-gradient(
            circle at center,
            rgba(0, 181, 216, 0.10),
            transparent 48%
        ),

        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.42),
            rgba(2, 13, 24, 0.90)
        );
}


.atraccion-cierre > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.atraccion-cierre h2 {
    max-width: 850px;

    margin:
        25px auto
        20px;

    color: #f2f7f9;

    font-size:
        clamp(40px, 4vw, 60px);

    font-weight: 300;

    line-height: 1.15;
}


.atraccion-cierre h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.atraccion-cierre p {
    max-width: 650px;

    margin-bottom: 20px;

    color: #98adb8;

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
   ANIMACIONES
===================================================== */

.revelar-atraccion {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}


.revelar-atraccion.visible-atraccion {
    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 1050px) {

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


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

}


@media (max-width: 800px) {

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

        padding:
            70px 25px;
    }


    .atraccion-visual {
        margin-top: 45px;

        min-height: 400px;
    }


    .servicio-unificado {
        padding:
            80px 25px;
    }


    .servicio-unificado-grid {
        grid-template-columns:
            1fr;
    }


    .headhunting-compacto {
        padding:
            80px 25px;
    }


    .perfiles-compactos {
        grid-template-columns:
            1fr;
    }


    .perfil-compacto:nth-child(odd) {
        border-right: none;
    }


    .proceso-seleccion {
        padding:
            80px 25px;
    }


    .proceso-paso {
        grid-template-columns:
            60px 1fr;

        gap: 20px;
    }


    .paso-linea {
        display: none;
    }


    .atraccion-cierre {
        padding:
            80px 25px;
    }

}

/* =====================================================
   RECLUTAMIENTO OPERATIVO
===================================================== */


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

.operativo-hero {
    min-height: 700px;

    padding: 100px 9%;

    display: grid;

    grid-template-columns:
        55% 45%;

    align-items: center;

    position: relative;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);
}


.operativo-luz {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}


.operativo-luz-1 {
    width: 450px;
    height: 550px;

    left: -320px;
    bottom: -150px;

    background:
        rgba(0, 181, 216, 0.24);
}


.operativo-luz-2 {
    width: 520px;
    height: 520px;

    right: -280px;
    top: 30px;

    background:
        rgba(0, 115, 140, 0.20);
}


/* TEXTO HERO */

.operativo-hero-texto {
    max-width: 760px;

    position: relative;

    z-index: 4;
}


.operativo-etiqueta {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.operativo-hero-texto h1 {
    margin:
        20px 0
        30px;

    color: #f3f7fa;

    font-size:
        clamp(52px, 5vw, 80px);

    font-weight: 300;

    line-height: 1.02;
}


.operativo-hero-texto h1 span {
    display: block;

    color: #00B5D8;
}


.operativo-hero-texto p {
    max-width: 650px;

    margin-bottom: 28px;

    color: #a8bbc6;

    font-size: 17px;

    line-height: 1.85;
}



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

.operativo-panel {
    min-height: 500px;

    position: relative;

    display: grid;

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

    align-items: end;

    gap: 15px;
}


.operativo-panel-linea {
    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 181, 216, 0.4),
            transparent
        );
}


.operativo-panel-dato {
    min-height: 145px;

    padding: 20px;

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    border:
        1px solid
        rgba(0, 181, 216, 0.15);

    border-radius: 15px;

    background:
        rgba(3, 27, 51, 0.40);
}


.operativo-panel-dato > span {
    margin-bottom: 16px;

    color: #00B5D8;

    font-size: 10px;
}


.operativo-panel-dato strong {
    color: #f3f7fa;

    font-size: 24px;

    font-weight: 400;
}


.operativo-panel-dato small {
    margin-top: 5px;

    color: #78909d;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 2px;
}


.operativo-panel-centro {
    width: 250px;
    height: 250px;

    position: absolute;

    top: 20px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.32);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 181, 216, 0.14),
            rgba(3, 27, 51, 0.77) 62%,
            rgba(2, 13, 24, 0.92)
        );

    box-shadow:
        0 0 60px
        rgba(0, 181, 216, 0.10);
}


.operativo-panel-centro span {
    color: #00B5D8;

    font-family: Georgia, serif;

    font-size: 65px;
}


.operativo-panel-centro p {
    max-width: 150px;

    margin-top: 10px;

    color: #9cb0bb;

    font-size: 13px;

    line-height: 1.5;
}



/* =====================================================
   SECTORES
===================================================== */

.operativo-sectores {
    padding:
        125px 9%;

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.25),
            rgba(2, 13, 24, 0.74)
        );
}


.operativo-sectores-titulo {
    max-width: 900px;

    margin-bottom: 80px;
}


.operativo-sectores-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.operativo-sectores-titulo h2 {
    margin-top: 15px;

    color: #f2f7f9;

    font-size:
        clamp(40px, 4vw, 60px);

    font-weight: 300;

    line-height: 1.14;
}


.operativo-sectores-titulo strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


/* =========================
   FILAS SECTORES
========================= */

.operativo-lista {
    border-top:
        1px solid
        rgba(0, 181, 216, 0.16);
}


.operativo-fila {
    min-height: 240px;

    padding:
        45px 15px;

    display: grid;

    grid-template-columns:
        10% 38% 52%;

    align-items: center;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.14);

    transition:
        background 0.35s ease,
        padding 0.35s ease;
}


.operativo-fila:hover {
    padding-left: 28px;

    background:
        linear-gradient(
            90deg,
            rgba(0, 181, 216, 0.055),
            transparent
        );
}


.operativo-fila-numero {
    color:
        rgba(0, 181, 216, 0.45);

    font-size: 17px;
}


.operativo-fila-titulo > span {
    color: #00B5D8;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 3px;
}


.operativo-fila-titulo h3 {
    max-width: 420px;

    margin-top: 10px;

    color: #eff5f8;

    font-size: 31px;

    font-weight: 300;

    line-height: 1.15;
}


.operativo-fila-info {
    padding-left: 40px;

    border-left:
        1px solid
        rgba(0, 181, 216, 0.14);
}


.operativo-fila-info > p {
    max-width: 560px;

    color: #8fa5b1;

    font-size: 14px;

    line-height: 1.75;
}


.operativo-tags {
    margin-top: 20px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.operativo-tags span {
    padding:
        8px 13px;

    border:
        1px solid
        rgba(0, 181, 216, 0.18);

    border-radius: 30px;

    color: #a8bdc7;

    font-size: 11px;

    background:
        rgba(0, 181, 216, 0.025);
}



/* =====================================================
   COBERTURA
===================================================== */

.operativo-cobertura {
    min-height: 650px;

    padding:
        110px 9%;

    display: grid;

    grid-template-columns:
        45% 55%;

    align-items: center;

    gap: 80px;

    border-top:
        1px solid
        rgba(0, 181, 216, 0.10);
}


.cobertura-texto > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.cobertura-texto h2 {
    margin:
        18px 0
        25px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 58px);

    font-weight: 300;

    line-height: 1.15;
}


.cobertura-texto h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.cobertura-texto p {
    max-width: 570px;

    color: #95aab5;

    font-size: 16px;

    line-height: 1.85;
}


/* VISUAL */

.cobertura-visual {
    height: 450px;

    position: relative;

    border:
        1px solid
        rgba(0, 181, 216, 0.12);

    border-radius: 22px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 181, 216, 0.09),
            transparent 55%
        );
}


.cobertura-centro {
    position: absolute;

    left: 50%;
    top: 50%;

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

    text-align: center;
}


.cobertura-centro strong {
    display: block;

    color: #00B5D8;

    font-size: 48px;

    font-weight: 300;

    letter-spacing: 8px;
}


.cobertura-centro span {
    display: block;

    margin-top: 8px;

    color: #73909e;

    font-size: 10px;

    letter-spacing: 3px;
}


/* PUNTOS */

.cobertura-punto {
    width: 14px;
    height: 14px;

    position: absolute;

    border:
        2px solid
        #00B5D8;

    border-radius: 50%;

    box-shadow:
        0 0 20px
        rgba(0, 181, 216, 0.50);
}


.cobertura-punto::before {
    content: "";

    position: absolute;

    inset: -8px;

    border:
        1px solid
        rgba(0, 181, 216, 0.24);

    border-radius: 50%;
}


.punto-1 {
    left: 15%;
    top: 25%;
}


.punto-2 {
    right: 17%;
    top: 20%;
}


.punto-3 {
    left: 23%;
    bottom: 20%;
}


.punto-4 {
    right: 20%;
    bottom: 24%;
}


/* RUTAS */

.cobertura-ruta {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 181, 216, 0.45),
            transparent
        );

    transform-origin: left center;
}


.ruta-1 {
    width: 52%;

    left: 16%;
    top: 27%;

    transform:
        rotate(20deg);
}


.ruta-2 {
    width: 55%;

    left: 22%;
    bottom: 26%;

    transform:
        rotate(-15deg);
}


.ruta-3 {
    width: 58%;

    left: 20%;
    top: 50%;

    transform:
        rotate(4deg);
}



/* =====================================================
   QUÉ RECIBE EL CLIENTE
===================================================== */

.cliente-recibe {
    padding:
        120px 9%;

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.38),
            rgba(2, 13, 24, 0.80)
        );
}


.cliente-recibe-titulo {
    max-width: 820px;

    margin-bottom: 70px;
}


.cliente-recibe-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.cliente-recibe-titulo h2 {
    margin-top: 15px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 58px);

    font-weight: 300;

    line-height: 1.15;
}


.cliente-recibe-titulo strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.cliente-recibe-grid {
    display: grid;

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

    gap: 20px;
}


.recibe-card {
    min-height: 320px;

    padding: 38px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    border:
        1px solid
        rgba(0, 181, 216, 0.14);

    border-radius: 20px;

    background:
        rgba(3, 27, 51, 0.35);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}


.recibe-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(0, 181, 216, 0.40);
}


.recibe-destacada {
    background:
        linear-gradient(
            145deg,
            rgba(0, 181, 216, 0.12),
            rgba(3, 27, 51, 0.54)
        );
}


.recibe-numero {
    margin-bottom: auto;

    color: #00B5D8;

    font-size: 12px;
}


.recibe-card h3 {
    margin-bottom: 15px;

    color: #f2f7f9;

    font-size: 29px;

    font-weight: 300;
}


.recibe-card p {
    color: #90a6b2;

    font-size: 14px;

    line-height: 1.8;
}



/* =====================================================
   MODALIDAD
===================================================== */

.operativo-modalidad {
    min-height: 600px;

    padding:
        110px 9%;

    display: grid;

    grid-template-columns:
        55% 45%;

    align-items: center;

    gap: 70px;

    position: relative;
}


.modalidad-linea {
    position: absolute;

    left: 9%;
    right: 9%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 181, 216, 0.28),
            transparent
        );
}


.modalidad-contenido > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.modalidad-contenido h2 {
    margin:
        18px 0
        28px;

    color: #f2f7f9;

    font-size:
        clamp(40px, 4vw, 58px);

    font-weight: 300;

    line-height: 1.15;
}


.modalidad-contenido strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.modalidad-contenido p {
    max-width: 660px;

    color: #95aab6;

    font-size: 16px;

    line-height: 1.85;
}


.modalidad-datos {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.modalidad-datos > div {
    padding:
        22px 25px;

    display: flex;

    align-items: center;

    gap: 25px;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.15);
}


.modalidad-datos span {
    min-width: 80px;

    color: #00B5D8;

    font-size: 42px;

    font-weight: 300;
}


.modalidad-datos p {
    color: #a2b5bf;

    font-size: 14px;
}



/* =====================================================
   CIERRE
===================================================== */

.operativo-cierre {
    min-height: 570px;

    padding:
        100px 9%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    border-top:
        1px solid
        rgba(0, 181, 216, 0.12);

    background:
        radial-gradient(
            circle at center,
            rgba(0, 181, 216, 0.10),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.44),
            rgba(2, 13, 24, 0.90)
        );
}


.operativo-cierre > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.operativo-cierre h2 {
    max-width: 920px;

    margin:
        24px 0
        22px;

    color: #f3f7fa;

    font-size:
        clamp(41px, 4vw, 61px);

    font-weight: 300;

    line-height: 1.15;
}


.operativo-cierre strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.operativo-cierre p {
    max-width: 650px;

    margin-bottom: 22px;

    color: #97abb6;

    font-size: 16px;

    line-height: 1.8;
}



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

.revelar-operativo {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}


.revelar-operativo.visible-operativo {
    opacity: 1;

    transform:
        translateY(0);
}



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

@media (max-width: 1000px) {

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


    .operativo-panel {
        margin-top: 60px;
    }


    .operativo-fila {
        grid-template-columns:
            10% 40% 50%;
    }


    .operativo-cobertura {
        grid-template-columns:
            1fr;
    }


    .cliente-recibe-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .operativo-modalidad {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 700px) {

    .operativo-hero {
        padding:
            70px 25px;
    }


    .operativo-panel {
        grid-template-columns:
            1fr;

        padding-top: 270px;
    }


    .operativo-panel-centro {
        top: 0;
    }


    .operativo-sectores {
        padding:
            80px 25px;
    }


    .operativo-fila {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .operativo-fila-info {
        padding-left: 0;

        border-left: none;
    }


    .operativo-fila:hover {
        padding-left: 15px;
    }


    .operativo-cobertura {
        padding:
            80px 25px;
    }


    .cobertura-visual {
        height: 360px;
    }


    .cliente-recibe {
        padding:
            80px 25px;
    }


    .cliente-recibe-grid {
        grid-template-columns:
            1fr;
    }


    .operativo-modalidad {
        padding:
            80px 25px;
    }


    .operativo-cierre {
        padding:
            80px 25px;
    }

}

/* =====================================================
   RECLUTAMIENTO ADMINISTRATIVO
===================================================== */


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

.admin-hero {
    min-height: 700px;

    padding:
        100px 9%;

    position: relative;

    display: grid;

    grid-template-columns:
        55% 45%;

    align-items: center;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);
}


.admin-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}


.admin-glow-1 {
    width: 480px;
    height: 520px;

    left: -330px;
    bottom: -160px;

    background:
        rgba(0, 181, 216, 0.22);
}


.admin-glow-2 {
    width: 520px;
    height: 520px;

    right: -300px;
    top: 0;

    background:
        rgba(21, 72, 117, 0.25);
}



/* TEXTO HERO */

.admin-hero-texto {
    position: relative;

    z-index: 5;

    max-width: 760px;
}


.admin-etiqueta {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.admin-hero-texto h1 {
    margin:
        20px 0
        28px;

    color: #f3f7fa;

    font-size:
        clamp(50px, 5vw, 78px);

    font-weight: 300;

    line-height: 1.04;
}


.admin-hero-texto h1 span {
    display: block;

    color: #00B5D8;
}


.admin-hero-texto p {
    max-width: 640px;

    margin-bottom: 16px;

    color: #a6bac5;

    font-size: 17px;

    line-height: 1.8;
}



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

.admin-hero-visual {
    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


.admin-centro {
    width: 275px;
    height: 275px;

    z-index: 5;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.35);

    border-radius: 50%;

    text-align: center;

    background:
        radial-gradient(
            circle,
            rgba(0, 181, 216, 0.15),
            rgba(3, 27, 51, 0.78) 58%,
            rgba(2, 13, 24, 0.92)
        );

    box-shadow:
        0 0 70px
        rgba(0, 181, 216, 0.12);
}


.admin-centro > span {
    color: #00B5D8;

    font-family:
        Georgia,
        serif;

    font-size: 70px;

    line-height: 1;
}


.admin-centro strong {
    margin-top: 13px;

    color: #f2f7f9;

    font-size: 11px;

    letter-spacing: 5px;
}


.admin-centro p {
    margin-top: 7px;

    color: #8fa6b2;

    font-size: 13px;
}



/* ORBITAS */

.admin-orbita {
    position: absolute;

    border:
        1px solid
        rgba(0, 181, 216, 0.20);

    border-radius: 50%;
}


.admin-orbita-1 {
    width: 390px;
    height: 390px;
}


.admin-orbita-2 {
    width: 480px;
    height: 310px;

    transform:
        rotate(30deg);

    border-color:
        rgba(21, 72, 117, 0.50);
}


.admin-orbita-3 {
    width: 510px;
    height: 280px;

    transform:
        rotate(-27deg);

    border-color:
        rgba(0, 155, 182, 0.28);
}



/* MINI CARDS */

.admin-mini-card {
    position: absolute;

    z-index: 7;

    padding:
        10px 16px;

    border:
        1px solid
        rgba(0, 181, 216, 0.25);

    border-radius: 30px;

    color: #9dd4df;

    background:
        rgba(3, 27, 51, 0.88);

    font-size: 9px;

    letter-spacing: 2px;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.20);
}


.admin-mini-1 {
    left: 2%;
    top: 27%;
}


.admin-mini-2 {
    right: 2%;
    top: 34%;
}


.admin-mini-3 {
    right: 16%;
    bottom: 13%;
}



/* =====================================================
   PERFILES
===================================================== */

.admin-perfiles {
    padding:
        125px 9%
        140px;

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.30),
            rgba(2, 13, 24, 0.77)
        );
}


.admin-perfiles-titulo {
    max-width: 850px;

    margin:
        0 auto
        85px;

    text-align: center;
}


.admin-perfiles-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.admin-perfiles-titulo h2 {
    margin-top: 16px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 59px);

    font-weight: 300;

    line-height: 1.15;
}


.admin-perfiles-titulo h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.admin-perfiles-titulo p {
    max-width: 650px;

    margin:
        20px auto
        0;

    color: #91a7b3;

    font-size: 16px;

    line-height: 1.8;
}



/* =====================================================
   UNIVERSO DE PERFILES
===================================================== */

.admin-universo {
    max-width: 1200px;

    height: 600px;

    margin: auto;

    position: relative;

    border:
        1px solid
        rgba(0, 181, 216, 0.10);

    border-radius: 30px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 181, 216, 0.10),
            transparent 42%
        );
}


.admin-universo::before {
    content: "";

    width: 430px;
    height: 430px;

    position: absolute;

    left: 50%;
    top: 50%;

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

    border:
        1px dashed
        rgba(0, 181, 216, 0.15);

    border-radius: 50%;
}


.admin-universo::after {
    content: "";

    width: 600px;
    height: 360px;

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-15deg);

    border:
        1px solid
        rgba(21, 72, 117, 0.23);

    border-radius: 50%;
}



/* CENTRO */

.admin-universo-centro {
    width: 220px;
    height: 220px;

    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.32);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(10, 46, 80, 0.95),
            rgba(2, 13, 24, 0.96)
        );

    box-shadow:
        0 0 60px
        rgba(0, 181, 216, 0.14);
}


.admin-universo-centro > span {
    color: #00B5D8;

    font-family:
        Georgia,
        serif;

    font-size: 60px;
}


.admin-universo-centro strong {
    color: #f3f7fa;

    font-size: 10px;

    letter-spacing: 4px;
}


.admin-universo-centro small {
    margin-top: 6px;

    color: #78919e;

    font-size: 9px;

    letter-spacing: 3px;
}



/* PERFILES FLOTANTES */

.perfil-flotante {
    position: absolute;

    z-index: 6;

    padding:
        11px 17px;

    border:
        1px solid
        rgba(0, 181, 216, 0.20);

    border-radius: 30px;

    color: #b2c5ce;

    background:
        rgba(3, 27, 51, 0.90);

    font-size: 12px;

    white-space: nowrap;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.18);

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


.perfil-flotante:hover {
    transform:
        translateY(-5px)
        scale(1.04);

    color: #ffffff;

    border-color:
        rgba(0, 181, 216, 0.65);

    background:
        rgba(0, 181, 216, 0.12);
}


/* POSICIONES */

.perfil-admin-1 {
    left: 8%;
    top: 15%;
}


.perfil-admin-2 {
    left: 35%;
    top: 9%;
}


.perfil-admin-3 {
    right: 11%;
    top: 17%;
}


.perfil-admin-4 {
    right: 5%;
    top: 42%;
}


.perfil-admin-5 {
    right: 13%;
    bottom: 15%;
}


.perfil-admin-6 {
    left: 52%;
    bottom: 8%;
}


.perfil-admin-7 {
    left: 26%;
    bottom: 10%;
}


.perfil-admin-8 {
    left: 5%;
    bottom: 22%;
}


.perfil-admin-9 {
    left: 7%;
    top: 46%;
}


.perfil-admin-10 {
    left: 27%;
    top: 33%;
}


.perfil-admin-11 {
    right: 25%;
    top: 32%;
}



/* =====================================================
   MODALIDADES
===================================================== */

.admin-modalidades {
    padding:
        125px 9%;

    border-top:
        1px solid
        rgba(0, 181, 216, 0.10);
}


.admin-modalidades-titulo {
    max-width: 850px;

    margin-bottom: 70px;
}


.admin-modalidades-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.admin-modalidades-titulo h2 {
    margin-top: 15px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 59px);

    font-weight: 300;

    line-height: 1.15;
}


.admin-modalidades-titulo strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.admin-modalidades-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;
}


.admin-modalidad-card {
    min-height: 510px;

    padding:
        42px;

    position: relative;

    display: flex;

    flex-direction: column;

    border:
        1px solid
        rgba(0, 181, 216, 0.16);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 46, 80, 0.34),
            rgba(2, 13, 24, 0.88)
        );

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}


.admin-modalidad-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(0, 181, 216, 0.45);
}


.admin-modalidad-destacada {
    background:
        linear-gradient(
            145deg,
            rgba(0, 181, 216, 0.13),
            rgba(3, 27, 51, 0.76)
        );
}


.admin-modalidad-numero {
    position: absolute;

    right: 35px;
    top: 35px;

    color:
        rgba(0, 181, 216, 0.30);

    font-size: 58px;

    font-weight: 300;
}


.admin-modalidad-tag {
    width: fit-content;

    padding:
        8px 12px;

    margin-bottom: 55px;

    border:
        1px solid
        rgba(0, 181, 216, 0.22);

    border-radius: 30px;

    color: #00B5D8;

    font-size: 9px;

    letter-spacing: 2px;
}


.admin-modalidad-card h3 {
    max-width: 470px;

    margin-bottom: 25px;

    color: #f2f7f9;

    font-size: 39px;

    font-weight: 300;

    line-height: 1.1;
}


.admin-modalidad-card p {
    max-width: 560px;

    margin-bottom: 15px;

    color: #91a7b3;

    font-size: 15px;

    line-height: 1.8;
}


.admin-modalidad-ideal {
    margin-top: auto;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(0, 181, 216, 0.14);
}


.admin-modalidad-ideal span {
    display: block;

    margin-bottom: 8px;

    color: #00B5D8;

    font-size: 9px;

    letter-spacing: 3px;
}


.admin-modalidad-ideal strong {
    color: #c0cfd6;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.6;
}



/* =====================================================
   SECTORES
===================================================== */

.admin-sectores {
    padding:
        120px 9%;

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.35),
            rgba(2, 13, 24, 0.78)
        );

    border-top:
        1px solid
        rgba(0, 181, 216, 0.10);
}


.admin-sectores-contenido {
    max-width: 850px;

    margin-bottom: 65px;
}


.admin-sectores-contenido > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.admin-sectores-contenido h2 {
    margin:
        15px 0
        20px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 58px);

    font-weight: 300;

    line-height: 1.15;
}


.admin-sectores-contenido h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.admin-sectores-contenido p {
    max-width: 650px;

    color: #91a7b3;

    font-size: 16px;

    line-height: 1.8;
}



/* LISTA */

.admin-sector-lista {
    border-top:
        1px solid
        rgba(0, 181, 216, 0.14);
}


.admin-sector-lista > span {
    min-height: 100px;

    padding:
        0 5px;

    display: flex;

    align-items: center;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);

    color:
        rgba(239, 247, 250, 0.72);

    font-size:
        clamp(24px, 3vw, 42px);

    font-weight: 300;

    letter-spacing: 2px;

    transition:
        padding-left 0.35s ease,
        color 0.35s ease,
        background 0.35s ease;
}


.admin-sector-lista > span:hover {
    padding-left: 30px;

    color: #00B5D8;

    background:
        linear-gradient(
            90deg,
            rgba(0, 181, 216, 0.06),
            transparent
        );
}



/* =====================================================
   BENEFICIOS
===================================================== */

.admin-beneficios {
    padding:
        125px 9%;
}


.admin-beneficios-titulo {
    max-width: 850px;

    margin-bottom: 75px;
}


.admin-beneficios-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.admin-beneficios-titulo h2 {
    margin-top: 15px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 58px);

    font-weight: 300;

    line-height: 1.15;
}


.admin-beneficios-titulo strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.admin-beneficios-grid {
    display: grid;

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

    gap: 0;
}


.admin-beneficio {
    min-height: 300px;

    padding:
        35px;

    border-left:
        1px solid
        rgba(0, 181, 216, 0.14);

    transition:
        background 0.35s ease;
}


.admin-beneficio:last-child {
    border-right:
        1px solid
        rgba(0, 181, 216, 0.14);
}


.admin-beneficio:hover {
    background:
        rgba(0, 181, 216, 0.035);
}


.admin-beneficio-numero {
    color: #00B5D8;

    font-size: 11px;

    letter-spacing: 2px;
}


.admin-beneficio h3 {
    margin:
        42px 0
        15px;

    color: #f3f7fa;

    font-size: 27px;

    font-weight: 300;
}


.admin-beneficio p {
    max-width: 340px;

    color: #8fa5b1;

    font-size: 14px;

    line-height: 1.8;
}



/* =====================================================
   CIERRE
===================================================== */

.admin-cierre {
    min-height: 570px;

    padding:
        110px 9%;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 181, 216, 0.11),
            transparent 46%
        ),

        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.45),
            rgba(2, 13, 24, 0.92)
        );
}


.admin-cierre-linea {
    width: 1px;
    height: 80px;

    position: absolute;

    top: 0;

    background:
        linear-gradient(
            #00B5D8,
            transparent
        );
}


.admin-cierre > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.admin-cierre h2 {
    max-width: 920px;

    margin:
        25px 0
        22px;

    color: #f3f7fa;

    font-size:
        clamp(41px, 4vw, 62px);

    font-weight: 300;

    line-height: 1.15;
}


.admin-cierre h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.admin-cierre p {
    max-width: 650px;

    margin-bottom: 22px;

    color: #97abb6;

    font-size: 16px;

    line-height: 1.8;
}



/* =====================================================
   ANIMACIONES
===================================================== */

.revelar-admin {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.revelar-admin.visible-admin {
    opacity: 1;

    transform:
        translateY(0);
}



/* =====================================================
   ANIMACIÓN FLOTANTE
===================================================== */

.perfil-flotante {
    animation:
        perfilFlotante
        6s ease-in-out
        infinite;
}


.perfil-admin-2,
.perfil-admin-5,
.perfil-admin-8,
.perfil-admin-11 {
    animation-delay:
        -2s;
}


.perfil-admin-3,
.perfil-admin-6,
.perfil-admin-9 {
    animation-delay:
        -4s;
}


@keyframes perfilFlotante {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -9px;
    }

}



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

@media (max-width: 1050px) {

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


    .admin-modalidades-grid {
        grid-template-columns:
            1fr;
    }


    .admin-beneficios-grid {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 800px) {

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

        padding:
            70px 25px;
    }


    .admin-hero-visual {
        margin-top: 40px;

        min-height: 430px;
    }


    .admin-perfiles {
        padding:
            80px 25px;
    }


    .admin-universo {
        height: auto;

        min-height: 730px;

        padding:
            280px 20px
            30px;

        display: flex;

        flex-wrap: wrap;

        align-content: flex-end;

        justify-content: center;

        gap: 10px;
    }


    .admin-universo::before,
    .admin-universo::after {
        width: 300px;
        height: 300px;

        top: 180px;
    }


    .admin-universo-centro {
        top: 180px;
    }


    .perfil-flotante {
        position: static;
    }


    .admin-modalidades {
        padding:
            80px 25px;
    }


    .admin-sectores {
        padding:
            80px 25px;
    }


    .admin-beneficios {
        padding:
            80px 25px;
    }


    .admin-beneficios-grid {
        grid-template-columns:
            1fr;
    }


    .admin-beneficio {
        border:
            1px solid
            rgba(0, 181, 216, 0.12);
    }


    .admin-cierre {
        padding:
            90px 25px;
    }

}

/* =====================================================
   RECLUTAMIENTO MASIVO Y A VOLUMEN
===================================================== */


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

.masivo-hero {
    min-height: 720px;

    padding: 100px 9%;

    position: relative;

    display: grid;

    grid-template-columns:
        55% 45%;

    align-items: center;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);
}


.masivo-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}


.masivo-glow-1 {
    width: 500px;
    height: 550px;

    left: -340px;
    bottom: -190px;

    background:
        rgba(0, 181, 216, 0.24);
}


.masivo-glow-2 {
    width: 520px;
    height: 520px;

    right: -290px;
    top: -70px;

    background:
        rgba(21, 72, 117, 0.25);
}



/* TEXTO HERO */

.masivo-hero-texto {
    max-width: 780px;

    position: relative;

    z-index: 5;
}


.masivo-etiqueta {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.masivo-hero-texto h1 {
    margin:
        20px 0
        30px;

    color: #f3f7fa;

    font-size:
        clamp(52px, 5vw, 82px);

    font-weight: 300;

    line-height: 1.02;
}


.masivo-hero-texto h1 span {
    display: block;

    color: #00B5D8;
}


.masivo-hero-texto p {
    max-width: 660px;

    margin-bottom: 28px;

    color: #a5bac5;

    font-size: 17px;

    line-height: 1.85;
}



/* =====================================================
   DASHBOARD
===================================================== */

.masivo-dashboard {
    min-height: 510px;

    position: relative;
}


.dashboard-central {
    width: 270px;
    height: 270px;

    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.38);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 181, 216, 0.17),
            rgba(3, 27, 51, 0.85) 65%,
            rgba(2, 13, 24, 0.96)
        );

    box-shadow:
        0 0 75px
        rgba(0, 181, 216, 0.14);
}


.dashboard-central small {
    color: #7798a6;

    font-size: 8px;

    letter-spacing: 3px;
}


.dashboard-central strong {
    margin:
        15px 0
        5px;

    color: #00B5D8;

    font-size: 37px;

    font-weight: 300;

    letter-spacing: 4px;
}


.dashboard-central span {
    color: #d9e7ec;

    font-size: 10px;

    letter-spacing: 4px;
}



/* DATOS */

.dashboard-dato {
    width: 145px;
    min-height: 120px;

    padding: 17px;

    position: absolute;

    z-index: 7;

    display: flex;

    flex-direction: column;

    border:
        1px solid
        rgba(0, 181, 216, 0.16);

    border-radius: 15px;

    background:
        rgba(3, 27, 51, 0.90);

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


.dashboard-dato > span {
    margin-bottom: auto;

    color: #00B5D8;

    font-size: 14px;
}


.dashboard-dato strong {
    color: #eff7f9;

    font-size: 16px;

    font-weight: 400;
}


.dashboard-dato small {
    margin-top: 4px;

    color: #72909d;

    font-size: 9px;
}


.dashboard-dato-1 {
    left: 0;
    top: 10%;
}


.dashboard-dato-2 {
    right: 0;
    top: 14%;
}


.dashboard-dato-3 {
    left: 4%;
    bottom: 9%;
}


.dashboard-dato-4 {
    right: 3%;
    bottom: 8%;
}



/* LÍNEAS */

.masivo-dashboard-linea {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 85%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 181, 216, 0.30),
            transparent
        );
}


.linea-dashboard-1 {
    transform:
        translate(-50%, -50%)
        rotate(25deg);
}


.linea-dashboard-2 {
    transform:
        translate(-50%, -50%)
        rotate(-27deg);
}



/* =====================================================
   DEFINICIÓN
===================================================== */

.masivo-definicion {
    padding:
        115px 9%;

    display: grid;

    grid-template-columns:
        10% 45% 45%;

    align-items: start;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.25),
            rgba(2, 13, 24, 0.70)
        );
}


.masivo-definicion-numero {
    color:
        rgba(0, 181, 216, 0.35);

    font-size: 20px;
}


.masivo-definicion-texto {
    padding-right: 45px;
}


.masivo-definicion-texto > span {
    color: #00B5D8;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 3px;
}


.masivo-definicion-texto h2 {
    margin-top: 15px;

    color: #f3f7fa;

    font-size:
        clamp(39px, 4vw, 58px);

    font-weight: 300;

    line-height: 1.15;
}


.masivo-definicion-texto strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.masivo-definicion-info {
    padding-left: 45px;

    border-left:
        1px solid
        rgba(0, 181, 216, 0.15);
}


.masivo-definicion-info p {
    margin-bottom: 20px;

    color: #95aab5;

    font-size: 15px;

    line-height: 1.85;
}



/* =====================================================
   CUÁNDO SE NECESITA
===================================================== */

.masivo-cuando {
    padding:
        125px 9%;
}


.masivo-cuando-titulo {
    max-width: 900px;

    margin-bottom: 80px;
}


.masivo-cuando-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.masivo-cuando-titulo h2 {
    margin-top: 16px;

    color: #f2f7f9;

    font-size:
        clamp(40px, 4vw, 60px);

    font-weight: 300;

    line-height: 1.15;
}


.masivo-cuando-titulo strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}



/* ESCENARIOS */

.masivo-escenarios {
    border-top:
        1px solid
        rgba(0, 181, 216, 0.15);
}


.escenario-masivo {
    min-height: 160px;

    padding:
        30px 10px;

    display: grid;

    grid-template-columns:
        110px 1fr;

    align-items: center;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);

    transition:
        padding-left 0.35s ease,
        background 0.35s ease;
}


.escenario-masivo:hover {
    padding-left: 28px;

    background:
        linear-gradient(
            90deg,
            rgba(0, 181, 216, 0.05),
            transparent
        );
}


.escenario-numero {
    color: #00B5D8;

    font-size: 12px;

    letter-spacing: 2px;
}


.escenario-masivo h3 {
    margin-bottom: 8px;

    color: #f2f7f9;

    font-size: 28px;

    font-weight: 300;
}


.escenario-masivo p {
    max-width: 800px;

    color: #8ea4b0;

    font-size: 14px;

    line-height: 1.75;
}



/* =====================================================
   PERFILES
===================================================== */

.masivo-perfiles {
    padding:
        120px 9%;

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.36),
            rgba(2, 13, 24, 0.80)
        );
}


.masivo-perfiles-titulo {
    max-width: 900px;

    margin-bottom: 75px;
}


.masivo-perfiles-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.masivo-perfiles-titulo h2 {
    margin-top: 15px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 59px);

    font-weight: 300;

    line-height: 1.15;
}


.masivo-perfiles-titulo strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}



/* GRID */

.masivo-perfiles-grid {
    display: grid;

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

    gap: 14px;
}


.perfil-masivo {
    min-height: 230px;

    padding:
        28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border:
        1px solid
        rgba(0, 181, 216, 0.14);

    border-radius: 16px;

    background:
        rgba(3, 27, 51, 0.42);

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


.perfil-masivo:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(0, 181, 216, 0.45);

    background:
        rgba(0, 181, 216, 0.06);
}


.perfil-masivo > span {
    color: #00B5D8;

    font-size: 11px;
}


.perfil-masivo h3 {
    color: #f0f6f8;

    font-size: 23px;

    font-weight: 300;

    line-height: 1.2;
}


.perfil-masivo-destacado {
    background:
        linear-gradient(
            145deg,
            rgba(0, 181, 216, 0.14),
            rgba(3, 27, 51, 0.50)
        );
}



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

.masivo-proceso {
    padding:
        125px 9%;
}


.masivo-proceso-titulo {
    max-width: 850px;

    margin-bottom: 85px;
}


.masivo-proceso-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.masivo-proceso-titulo h2 {
    margin-top: 15px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 59px);

    font-weight: 300;

    line-height: 1.15;
}


.masivo-proceso-titulo h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.masivo-proceso-titulo p {
    max-width: 650px;

    margin-top: 20px;

    color: #91a7b3;

    font-size: 15px;

    line-height: 1.8;
}



/* PASOS */

.masivo-proceso-linea {
    max-width: 1100px;

    margin:
        0 auto;

    position: relative;
}


.masivo-proceso-linea::before {
    content: "";

    position: absolute;

    left: 34px;
    top: 0;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            #00B5D8,
            rgba(0, 181, 216, 0.05)
        );
}


.masivo-paso {
    min-height: 190px;

    position: relative;

    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 40px;
}


.masivo-paso-numero {
    width: 68px;
    height: 68px;

    z-index: 3;

    display: flex;

    justify-content: center;

    align-items: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.38);

    border-radius: 50%;

    color: #00B5D8;

    background: #031B33;

    font-size: 11px;
}


.masivo-paso-contenido {
    padding:
        0 0
        55px;
}


.masivo-paso-contenido > span {
    color: #00B5D8;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 3px;
}


.masivo-paso-contenido h3 {
    margin:
        9px 0
        12px;

    color: #f2f7f9;

    font-size: 26px;

    font-weight: 300;
}


.masivo-paso-contenido p {
    max-width: 650px;

    color: #8da3af;

    font-size: 14px;

    line-height: 1.75;
}



/* =====================================================
   BENEFICIOS
===================================================== */

.masivo-beneficios {
    padding:
        120px 9%;

    background:
        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.38),
            rgba(2, 13, 24, 0.82)
        );
}


.masivo-beneficios-titulo {
    max-width: 850px;

    margin-bottom: 75px;
}


.masivo-beneficios-titulo > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}


.masivo-beneficios-titulo h2 {
    margin-top: 15px;

    color: #f3f7fa;

    font-size:
        clamp(40px, 4vw, 59px);

    font-weight: 300;

    line-height: 1.15;
}


.masivo-beneficios-titulo strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.masivo-beneficios-grid {
    display: grid;

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

    gap: 16px;
}


.beneficio-masivo {
    min-height: 300px;

    padding:
        34px;

    border:
        1px solid
        rgba(0, 181, 216, 0.14);

    border-radius: 17px;

    background:
        rgba(3, 27, 51, 0.36);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}


.beneficio-masivo:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(0, 181, 216, 0.42);
}


.beneficio-masivo > span {
    color: #00B5D8;

    font-size: 11px;
}


.beneficio-masivo h3 {
    margin:
        45px 0
        15px;

    color: #f3f7fa;

    font-size: 27px;

    font-weight: 300;
}


.beneficio-masivo p {
    color: #8ea5b1;

    font-size: 14px;

    line-height: 1.8;
}


.beneficio-masivo-destacado {
    background:
        linear-gradient(
            145deg,
            rgba(0, 181, 216, 0.12),
            rgba(3, 27, 51, 0.50)
        );
}



/* =====================================================
   IMPACTO
===================================================== */

.masivo-impacto {
    min-height: 500px;

    padding:
        100px 9%;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;
}


.masivo-impacto-numero {
    position: absolute;

    left: 50%;
    top: 50%;

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

    color:
        rgba(0, 181, 216, 0.035);

    font-size:
        clamp(300px, 35vw, 600px);

    font-weight: bold;

    line-height: 1;

    pointer-events: none;
}


.masivo-impacto > div:last-child {
    max-width: 950px;

    position: relative;

    z-index: 3;
}


.masivo-impacto span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.masivo-impacto h2 {
    margin-top: 20px;

    color: #f3f7fa;

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

    font-weight: 300;

    line-height: 1.15;
}


.masivo-impacto strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}



/* =====================================================
   CIERRE
===================================================== */

.masivo-cierre {
    min-height: 570px;

    padding:
        100px 9%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    border-top:
        1px solid
        rgba(0, 181, 216, 0.12);

    background:
        radial-gradient(
            circle at center,
            rgba(0, 181, 216, 0.10),
            transparent 46%
        ),

        linear-gradient(
            180deg,
            rgba(3, 27, 51, 0.46),
            rgba(2, 13, 24, 0.94)
        );
}


.masivo-cierre > span {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.masivo-cierre h2 {
    max-width: 900px;

    margin:
        24px 0
        20px;

    color: #f3f7fa;

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

    font-weight: 300;

    line-height: 1.15;
}


.masivo-cierre h2 strong {
    display: block;

    color: #00B5D8;

    font-weight: 300;
}


.masivo-cierre p {
    max-width: 650px;

    margin-bottom: 22px;

    color: #97abb6;

    font-size: 16px;

    line-height: 1.8;
}



/* =====================================================
   ANIMACIONES
===================================================== */

.revelar-masivo {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.revelar-masivo.visible-masivo {
    opacity: 1;

    transform:
        translateY(0);
}



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

@media (max-width: 1050px) {

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


    .masivo-dashboard {
        margin-top: 60px;

        min-height: 500px;
    }


    .masivo-definicion {
        grid-template-columns:
            10% 90%;
    }


    .masivo-definicion-info {
        grid-column:
            2;

        margin-top: 35px;

        padding:
            0;

        border-left:
            none;
    }


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


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

}


@media (max-width: 700px) {

    .masivo-hero {
        padding:
            70px 25px;
    }


    .masivo-dashboard {
        min-height: 680px;
    }


    .dashboard-central {
        top: 210px;
    }


    .dashboard-dato {
        width:
            calc(50% - 10px);
    }


    .dashboard-dato-1 {
        left: 0;
        top: 420px;
    }


    .dashboard-dato-2 {
        right: 0;
        top: 420px;
    }


    .dashboard-dato-3 {
        left: 0;
        bottom: 0;
    }


    .dashboard-dato-4 {
        right: 0;
        bottom: 0;
    }


    .masivo-definicion {
        padding:
            80px 25px;

        grid-template-columns:
            1fr;
    }


    .masivo-definicion-numero {
        margin-bottom:
            25px;
    }


    .masivo-definicion-info {
        grid-column:
            auto;
    }


    .masivo-cuando {
        padding:
            80px 25px;
    }


    .escenario-masivo {
        grid-template-columns:
            50px 1fr;
    }


    .masivo-perfiles {
        padding:
            80px 25px;
    }


    .masivo-perfiles-grid {
        grid-template-columns:
            1fr;
    }


    .masivo-proceso {
        padding:
            80px 25px;
    }


    .masivo-beneficios {
        padding:
            80px 25px;
    }


    .masivo-beneficios-grid {
        grid-template-columns:
            1fr;
    }


    .masivo-impacto {
        padding:
            80px 25px;
    }


    .masivo-cierre {
        padding:
            80px 25px;
    }

}

/* =====================================================
   DETALLES INDEX
===================================================== */

.hero-etiqueta {
    display: inline-block;

    margin-bottom: 18px;

    color: #00B5D8;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;
}


.hero-secundario {
    margin-top: 10px;

    color: #829aa7 !important;

    font-size: 14px !important;
}


.hero-confianza {
    margin-top: 35px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    color: #6f8996;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;
}


.punto-confianza {
    width: 4px;
    height: 4px;

    display: inline-block;

    border-radius: 50%;

    background: #00B5D8;

    box-shadow:
        0 0 10px
        rgba(0, 181, 216, 0.8);
}


@media (max-width: 700px) {

    .hero-confianza {
        gap: 8px;

        font-size: 8px;
    }

}

/* =====================================================
   CARRUSEL HEADHUNTING TI
===================================================== */

.ti-carrusel {
    max-width: 1150px;

    margin:
        0 auto;

    position: relative;
}


/* =====================================================
   ESCENA
===================================================== */

.ti-carrusel-escena {
    min-height: 560px;

    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(0, 181, 216, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 46, 80, 0.32),
            rgba(2, 13, 24, 0.90)
        );

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.22);
}


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

.ti-slide {
    width: 100%;
    height: 100%;

    min-height: 560px;

    position: absolute;

    inset: 0;

    display: grid;

    grid-template-columns:
        55% 45%;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(100px)
        scale(0.94)
        rotate(1deg);

    transition:
        transform 0.62s cubic-bezier(.22, .61, .36, 1),
        opacity 0.50s ease;

    will-change:
        transform,
        opacity;
}


.ti-slide.activo {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(0)
        scale(1)
        rotate(0);
}


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

.ti-slide-imagen {
    min-height: 560px;

    position: relative;

    overflow: hidden;
}


.ti-slide-imagen::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 48%,
            rgba(2, 13, 24, 0.15) 72%,
            rgba(2, 13, 24, 0.72) 100%
        );

    pointer-events: none;
}


.ti-slide-imagen img {
    width: 100%;
    height: 100%;

    position: absolute;

    inset: 0;

    object-fit: cover;

    transition:
        transform 0.8s ease,
        filter 0.8s ease;

    filter:
        saturate(0.88)
        contrast(1.04);
}


.ti-slide.activo .ti-slide-imagen img {
    transform:
        scale(1.03);
}


/* NÚMERO GRANDE */

.ti-slide-numero {
    position: absolute;

    left: 30px;
    top: 28px;

    z-index: 3;

    width: 68px;
    height: 68px;

    display: flex;

    justify-content: center;

    align-items: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.50);

    border-radius: 50%;

    color: #00B5D8;

    background:
        rgba(2, 13, 24, 0.78);

    backdrop-filter:
        blur(10px);

    font-size: 14px;

    letter-spacing: 2px;
}


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

.ti-slide-contenido {
    padding:
        65px 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

    z-index: 4;
}


.ti-slide-etiqueta {
    margin-bottom: 20px;

    color: #00B5D8;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 3px;
}


.ti-slide-contenido h3 {
    max-width: 450px;

    margin-bottom: 22px;

    color: #f3f7fa;

    font-size:
        clamp(36px, 4vw, 55px);

    font-weight: 300;

    line-height: 1.08;
}


.ti-slide-contenido p {
    max-width: 420px;

    color: #91a7b3;

    font-size: 15px;

    line-height: 1.8;
}


/* DECORACIÓN INTERNA */

.ti-slide-contenido::before {
    content: "";

    width: 1px;
    height: 70px;

    position: absolute;

    right: 35px;
    top: 35px;

    background:
        linear-gradient(
            #00B5D8,
            transparent
        );
}


/* =====================================================
   EFECTOS DE SALIDA / ENTRADA
===================================================== */

/* SALE HACIA IZQUIERDA */

.ti-slide.salir-izquierda {
    opacity: 0;

    visibility: visible;

    transform:
        translateX(-130px)
        scale(0.93)
        rotate(-2deg);
}


/* PREPARAR TARJETA NUEVA DESDE DERECHA */

.ti-slide.preparar-derecha {
    opacity: 0;

    visibility: visible;

    transform:
        translateX(150px)
        scale(0.93)
        rotate(2deg);
}


/* ENTRA DESDE DERECHA */

.ti-slide.entrar-derecha {
    visibility: visible;

    animation:
        entrarTarjetaDerecha
        0.62s cubic-bezier(.22, .61, .36, 1);
}


@keyframes entrarTarjetaDerecha {

    from {
        opacity: 0;

        transform:
            translateX(150px)
            scale(0.93)
            rotate(2deg);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1)
            rotate(0);
    }

}


/* SALE HACIA DERECHA */

.ti-slide.salir-derecha {
    opacity: 0;

    visibility: visible;

    transform:
        translateX(130px)
        scale(0.93)
        rotate(2deg);
}


/* PREPARAR TARJETA DESDE IZQUIERDA */

.ti-slide.preparar-izquierda {
    opacity: 0;

    visibility: visible;

    transform:
        translateX(-150px)
        scale(0.93)
        rotate(-2deg);
}


/* ENTRA DESDE IZQUIERDA */

.ti-slide.entrar-izquierda {
    visibility: visible;

    animation:
        entrarTarjetaIzquierda
        0.62s cubic-bezier(.22, .61, .36, 1);
}


@keyframes entrarTarjetaIzquierda {

    from {
        opacity: 0;

        transform:
            translateX(-150px)
            scale(0.93)
            rotate(-2deg);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1)
            rotate(0);
    }

}


/* =====================================================
   CONTROLES
===================================================== */

.ti-carrusel-controles {
    margin-top: 28px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 25px;
}


/* BOTONES */

.ti-btn {
    width: fit-content;

    border: none;

    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding:
        13px 0;

    color: #8da5b1;

    background: transparent;

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

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;

    cursor: pointer;

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


.ti-btn span {
    color: #00B5D8;

    font-size: 22px;

    font-weight: 300;
}


.ti-btn:hover {
    color: #ffffff;
}


.ti-anterior:hover {
    transform:
        translateX(-6px);
}


.ti-siguiente {
    justify-self: end;
}


.ti-siguiente:hover {
    transform:
        translateX(6px);
}


/* =====================================================
   CONTADOR
===================================================== */

.ti-contador {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #6f8996;

    font-size: 11px;

    letter-spacing: 2px;
}


#tiActual {
    color: #00B5D8;

    font-size: 15px;
}


.ti-contador-linea {
    width: 45px;
    height: 1px;

    background:
        rgba(0, 181, 216, 0.30);
}


/* =====================================================
   BARRA DE PROGRESO
===================================================== */

.ti-progreso {
    width: 100%;
    height: 2px;

    margin-top: 22px;

    position: relative;

    overflow: hidden;

    background:
        rgba(0, 181, 216, 0.10);
}


.ti-progreso-activo {
    width: 10%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #00738C,
            #00B5D8,
            #19d6d0
        );

    box-shadow:
        0 0 15px
        rgba(0, 181, 216, 0.40);

    transition:
        width 0.5s ease;
}


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

.ti-carrusel-escena:hover
.ti-slide.activo
.ti-slide-imagen img {
    transform:
        scale(1.07);
}


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

@media (max-width: 900px) {

    .ti-carrusel-escena {
        min-height: 700px;
    }


    .ti-slide {
        min-height: 700px;

        grid-template-columns:
            1fr;
    }


    .ti-slide-imagen {
        min-height: 390px;
    }


    .ti-slide-contenido {
        padding:
            38px 35px;
    }


    .ti-slide-contenido h3 {
        font-size:
            38px;
    }

}


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

@media (max-width: 600px) {

    .ti-carrusel-escena {
        min-height: 610px;

        border-radius: 18px;
    }


    .ti-slide {
        min-height: 610px;
    }


    .ti-slide-imagen {
        min-height: 310px;
    }


    .ti-slide-numero {
        width: 55px;
        height: 55px;

        left: 18px;
        top: 18px;
    }


    .ti-slide-contenido {
        padding:
            30px 22px;
    }


    .ti-slide-contenido h3 {
        font-size:
            31px;
    }


    .ti-slide-contenido p {
        font-size:
            13px;
    }


    .ti-carrusel-controles {
        grid-template-columns:
            1fr 1fr;

        gap: 15px;
    }


    .ti-contador {
        grid-column:
            1 / -1;

        grid-row:
            1;

        justify-content: center;
    }


    .ti-anterior {
        grid-column:
            1;

        grid-row:
            2;
    }


    .ti-siguiente {
        grid-column:
            2;

        grid-row:
            2;
    }

}

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

.footer-jk {
    min-height: 110px;

    padding:
        0 6%;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 30px;

    border-top:
        1px solid
        rgba(0, 181, 216, 0.14);

    background:
        rgba(2, 13, 24, 0.96);
}


/* LOGO */

.footer-logo {
    display: flex;

    align-items: center;
}


.footer-logo img {
    width: 58px;
    height: 58px;

    object-fit: contain;

    opacity: 0.92;
}


/* CENTRO */

.footer-centro {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #8299a7;

    font-size: 12px;

    letter-spacing: 0.4px;
}


.footer-centro a {
    color: #a8bbc5;

    text-decoration: none;

    transition: 0.3s;
}


.footer-centro a:hover {
    color: #00B5D8;
}


.footer-separador {
    color:
        rgba(0, 181, 216, 0.55);
}


/* REDES */

.footer-redes {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 10px;
}


.footer-redes a {
    width: 38px;
    height: 38px;

    display: flex;

    justify-content: center;

    align-items: center;

    border:
        1px solid
        rgba(0, 181, 216, 0.25);

    border-radius: 50%;

    color: #b9c9d1;

    text-decoration: none;

    font-size: 14px;

    font-weight: bold;

    transition:
        0.3s;
}


.footer-redes a:hover {
    color: #001820;

    background: #00B5D8;

    border-color: #00B5D8;

    transform:
        translateY(-3px);

    box-shadow:
        0 0 18px
        rgba(0, 181, 216, 0.30);
}


/* RESPONSIVE */

@media (max-width: 750px) {

    .footer-jk {
        padding:
            30px 20px;

        grid-template-columns:
            1fr;

        justify-items: center;

        gap: 20px;
    }


    .footer-redes {
        justify-content: center;
    }


    .footer-centro {
        flex-wrap: wrap;

        text-align: center;
    }

}

/* =====================================================
   AVISO DE PRIVACIDAD
===================================================== */

.privacidad-hero {
    min-height: 480px;

    padding:
        90px 9%;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);
}


.privacidad-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}


.privacidad-glow-1 {
    width: 430px;
    height: 430px;

    left: -280px;
    bottom: -150px;

    background:
        rgba(0, 181, 216, 0.23);
}


.privacidad-glow-2 {
    width: 480px;
    height: 480px;

    right: -300px;
    top: -180px;

    background:
        rgba(21, 72, 117, 0.20);
}


.privacidad-hero-contenido {
    max-width: 900px;

    position: relative;

    z-index: 3;
}


.privacidad-etiqueta {
    color: #00B5D8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}


.privacidad-hero h1 {
    margin:
        18px 0
        25px;

    color: #f3f7fa;

    font-size:
        clamp(52px, 5vw, 78px);

    font-weight: 300;

    line-height: 1.05;
}


.privacidad-hero h1 span {
    color: #00B5D8;
}


.privacidad-hero p {
    max-width: 720px;

    color: #a6bac5;

    font-size: 17px;

    line-height: 1.8;
}



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

.privacidad-contenido {
    width:
        min(1100px, 82%);

    margin:
        0 auto;

    padding:
        100px 0
        120px;
}


.privacidad-bloque {
    padding:
        48px 0;

    display: grid;

    grid-template-columns:
        90px 1fr;

    gap: 35px;

    border-bottom:
        1px solid
        rgba(0, 181, 216, 0.12);
}


.privacidad-numero {
    color:
        rgba(0, 181, 216, 0.55);

    font-size: 12px;

    letter-spacing: 2px;
}


.privacidad-bloque h2 {
    margin-bottom: 22px;

    color: #f1f6f8;

    font-size:
        clamp(26px, 3vw, 38px);

    font-weight: 300;

    line-height: 1.2;
}


.privacidad-bloque p {
    max-width: 850px;

    margin-bottom: 16px;

    color: #9aafb9;

    font-size: 15px;

    line-height: 1.9;
}


.privacidad-bloque p strong {
    color: #d8e6eb;
}


.privacidad-bloque ul {
    max-width: 820px;

    margin:
        25px 0
        10px;

    padding-left: 22px;
}


.privacidad-bloque li {
    margin-bottom: 12px;

    padding-left: 5px;

    color: #9aafb9;

    font-size: 15px;

    line-height: 1.7;
}


.privacidad-bloque li::marker {
    color: #00B5D8;
}



/* DESTACADO */

.privacidad-destacado {
    margin:
        25px 0;

    padding:
        50px 35px;

    border:
        1px solid
        rgba(0, 181, 216, 0.17);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(0, 181, 216, 0.06),
            rgba(3, 27, 51, 0.25)
        );
}



/* CAMPOS A COMPLETAR */

.privacidad-dato-pendiente {
    width: fit-content;

    padding:
        11px 16px;

    border:
        1px dashed
        rgba(0, 181, 216, 0.35);

    border-radius: 8px;

    color:
        #00B5D8 !important;

    background:
        rgba(0, 181, 216, 0.04);

    font-size:
        13px !important;
}



/* ACTUALIZACIÓN */

.privacidad-actualizacion {
    margin-top: 30px;

    color:
        #718995 !important;

    font-size:
        13px !important;
}



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

@media (max-width: 750px) {

    .privacidad-hero {
        min-height: 420px;

        padding:
            70px 25px;
    }


    .privacidad-contenido {
        width:
            calc(100% - 40px);

        padding:
            70px 0
            90px;
    }


    .privacidad-bloque {
        grid-template-columns:
            1fr;

        gap: 15px;

        padding:
            38px 0;
    }


    .privacidad-destacado {
        padding:
            35px 25px;
    }

}

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

.whatsapp-flotante {
    position: fixed;

    right: 28px;
    bottom: 28px;

    z-index: 500;

    height: 55px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #25D366,
            #1ebe5d
        );

    color: white;

    text-decoration: none;

    font-size: 13px;

    font-weight: bold;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.30);

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


.whatsapp-flotante:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(37, 211, 102, 0.28);
}


/* ICONO */

.whatsapp-icono {
    font-size: 24px;

    line-height: 1;
}


/* TEXTO */

.whatsapp-texto {
    letter-spacing: 0.3px;
}


/* =====================================================
   CUANDO EL FOOTER ESTÁ VISIBLE
===================================================== */

.whatsapp-flotante.sobre-footer {
    bottom: 125px;
}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 600px) {

    .whatsapp-flotante {
        width: 54px;
        height: 54px;

        right: 18px;
        bottom: 18px;

        padding: 0;

        justify-content: center;
    }


    .whatsapp-flotante.sobre-footer {
        bottom: 115px;
    }


    .whatsapp-texto {
        display: none;
    }

}

/* =====================================================
   AJUSTES RESPONSIVE INDEX
===================================================== */

@media (max-width: 650px) {

    body {
        overflow-x: hidden;
    }


    .hero {
        min-height: auto;

        padding:
            55px 22px
            45px;

        display: block;
    }


    .hero-texto {
        width: 100%;

        max-width: 100%;
    }


    .hero-texto h1 {
        width: 100%;

        max-width: 100%;

        font-size: 38px;

        line-height: 1.08;

        overflow-wrap: break-word;
    }


    .hero-texto p {
        width: 100%;

        max-width: 100%;

        font-size: 15px;

        line-height: 1.7;
    }


    .hero-etiqueta {
        max-width: 100%;

        font-size: 10px;

        letter-spacing: 2px;

        white-space: normal;

        line-height: 1.6;
    }


    .botones {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }


    .btn {
        width: 100%;

        justify-content: center;
    }


    .hero-imagen {
        width: 100%;

        height: 340px;

        margin-top: 35px;

        overflow: hidden;
    }


    .logo-principal {
        width: 280px;
        height: 280px;

        max-width: 100%;
    }


    .logo-principal img {
        max-width: 100%;

        height: auto;
    }


    .ondas {
        max-width: 95%;
    }

}

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

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border:
        1px solid
        rgba(0, 181, 216, 0.25);

    border-radius: 10px;

    background:
        rgba(3, 27, 51, 0.55);

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    position: relative;

    z-index: 1001;
}


.menu-toggle span {
    width: 20px;
    height: 2px;

    display: block;

    border-radius: 5px;

    background: #00B5D8;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* TRANSFORMACIÓN A X */

.menu-toggle.activo span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.menu-toggle.activo span:nth-child(2) {
    opacity: 0;
}


.menu-toggle.activo span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* ELEMENTOS SOLO MÓVIL */

.menu-contacto-movil,
.menu-pais-movil {
    display: none;
}


/* =====================================================
   HEADER MÓVIL
===================================================== */

@media (max-width: 800px) {

    .header {
        min-height: 92px;

        padding:
            14px 20px;

        display: flex;

        flex-wrap: nowrap;

        justify-content: space-between;

        align-items: center;

        position: relative;
    }


    .logo-nav {
        gap: 10px;
    }


    .logo-nav img {
        width: 52px;
        height: 52px;
    }


    .logo-nav span {
        font-size: 12px;

        letter-spacing: 3px;
    }


    .menu-toggle {
        display: flex;
    }


    .nav-derecha {
        display: none;
    }


    /* MENÚ */

    .nav {
        width: 100%;

        max-height: 0;

        padding:
            0 22px;

        position: absolute;

        top: 100%;
        left: 0;

        z-index: 1000;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        overflow: hidden;

        opacity: 0;

        visibility: hidden;

        background:
            linear-gradient(
                180deg,
                rgba(2, 13, 24, 0.99),
                rgba(3, 27, 51, 0.99)
            );

        border-bottom:
            1px solid
            rgba(0, 181, 216, 0.18);

        box-shadow:
            0 25px 45px
            rgba(0, 0, 0, 0.35);

        transition:
            max-height 0.45s ease,
            opacity 0.3s ease,
            visibility 0.3s ease,
            padding 0.45s ease;
    }


    .nav.menu-abierto {
        max-height: 720px;

        padding:
            18px 22px
            26px;

        opacity: 1;

        visibility: visible;
    }


    .nav > a,
    .nav .dropdown {
        width: 100%;
    }


    .nav > a,
    .nav .dropdown-boton {
        min-height: 52px;

        padding:
            15px 0;

        display: flex;

        justify-content: space-between;

        align-items: center;

        border-bottom:
            1px solid
            rgba(0, 181, 216, 0.10);

        color: #dce8ee;

        font-size: 14px;
    }


    .nav a.activo::after {
        display: none;
    }


    /* DROPDOWNS EN MÓVIL */

    .nav .dropdown {
        display: block;
    }


    .nav .dropdown-menu {
        width: 100%;

        padding: 0;

        position: static;

        display: none;

        transform: none;

        opacity: 1;

        visibility: visible;

        border: none;

        border-radius: 0;

        box-shadow: none;

        background:
            rgba(0, 181, 216, 0.035);
    }


    .nav .dropdown.dropdown-movil-abierto
    .dropdown-menu {
        display: block;
    }


    .nav .dropdown-menu a {
        padding:
            13px 18px;

        border-bottom:
            1px solid
            rgba(0, 181, 216, 0.06);

        font-size: 13px;
    }


    .nav .dropdown:hover .dropdown-menu {
        transform: none;
    }


    .nav .dropdown.dropdown-movil-abierto
    .flecha {
        transform: rotate(180deg);
    }


    /* BOTÓN CONTACTO MÓVIL */

    .menu-contacto-movil {
        margin-top: 18px;

        min-height: auto !important;

        padding:
            14px 20px !important;

        display: flex !important;

        justify-content: center !important;

        border:
            1px solid
            #00B5D8 !important;

        border-radius: 40px;

        color:
            #00B5D8 !important;
    }


    /* PAÍS MÓVIL */

    .menu-pais-movil {
        margin-top: 15px;

        padding:
            12px 0;

        display: flex;

        justify-content: center;

        color: #8fa6b2;

        font-size: 12px;
    }

}


/* =====================================================
   CELULAR PEQUEÑO
===================================================== */

@media (max-width: 420px) {

    .header {
        padding:
            12px 16px;
    }


    .logo-nav img {
        width: 48px;
        height: 48px;
    }


    .logo-nav span {
        font-size: 11px;

        letter-spacing: 2.4px;
    }


    .menu-toggle {
        width: 42px;
        height: 42px;
    }

}

/* =====================================================
   RESPONSIVE FINAL - HERO INICIO
===================================================== */

@media (max-width: 800px) {

    .hero {
        min-height: auto;

        padding:
            55px 22px
            35px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 15px;
    }


    /* TEXTO */

    .hero-texto {
        width: 100%;

        max-width: 100%;
    }


    .hero-etiqueta {
        display: block;

        max-width: 100%;

        margin-bottom: 20px;

        color: #00B5D8;

        font-size: 10px;

        font-weight: bold;

        letter-spacing: 2px;

        line-height: 1.6;
    }


    .hero-texto h1 {
        max-width: 100%;

        margin-bottom: 22px;

        font-size: 39px;

        line-height: 1.08;

        letter-spacing: -0.5px;
    }


    .linea {
        margin-bottom: 22px;
    }


    .hero-texto p {
        max-width: 100%;

        margin-bottom: 18px;

        font-size: 15px;

        line-height: 1.7;
    }


    .hero-secundario {
        margin-bottom: 28px !important;
    }


    /* BOTONES */

    .botones {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 12px;
    }


    .botones .btn {
        width: 100%;

        justify-content: space-between;
    }


    /* MENSAJE DE CONFIANZA */

    .hero-confianza {
        margin-top: 28px;

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        gap: 8px 10px;

        font-size: 9px;

        letter-spacing: 1px;
    }


    /* =================================================
       LOGO / VISUAL
    ================================================= */

    .hero-imagen {
        width: 100%;

        height: 330px;

        margin-top: 5px;

        overflow: hidden;
    }


    .logo-principal {
        width: 275px;
        height: 275px;

        max-width: 80vw;
    }


    .logo-principal::before {
        width: 270px;
        height: 270px;
    }


    .logo-principal img {
        width: 100%;

        max-height: 275px;
    }


    /* ONDAS MÁS PEQUEÑAS */

    .ondas-1 {
        width: 330px;
        height: 160px;
    }


    .ondas-2 {
        width: 350px;
        height: 185px;
    }


    .ondas-3 {
        width: 370px;
        height: 205px;
    }


    .ondas-4 {
        width: 390px;
        height: 225px;
    }


    .ondas-5 {
        width: 410px;
        height: 245px;
    }


    /* =================================================
       BENEFICIOS
    ================================================= */

    .beneficios {
        padding:
            15px 22px
            30px;

        grid-template-columns: 1fr;
    }


    .beneficio {
        padding:
            22px 5px;

        border-right: none;

        border-bottom:
            1px solid
            rgba(0, 181, 216, 0.14);
    }


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

}


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

@media (max-width: 420px) {

    .hero {
        padding:
            45px 18px
            25px;
    }


    .hero-etiqueta {
        font-size: 9px;

        letter-spacing: 1.5px;
    }


    .hero-texto h1 {
        font-size: 35px;
    }


    .hero-texto p {
        font-size: 14px;
    }


    .hero-imagen {
        height: 290px;
    }


    .logo-principal {
        width: 240px;
        height: 240px;
    }


    .logo-principal::before {
        width: 235px;
        height: 235px;
    }


    .logo-principal img {
        max-height: 240px;
    }


    .ondas-1 {
        width: 290px;
    }


    .ondas-2 {
        width: 310px;
    }


    .ondas-3 {
        width: 330px;
    }


    .ondas-4 {
        width: 350px;
    }


    .ondas-5 {
        width: 370px;
    }

}
/* =====================================================
   AJUSTE EXTRA VISUAL HERO INICIO - MÓVIL
===================================================== */

@media (max-width: 800px) {

    .hero-imagen {
        height: 270px;

        margin-top: -5px;
    }


    .logo-principal {
        width: 230px;
        height: 230px;
    }


    .logo-principal::before {
        width: 225px;
        height: 225px;
    }


    .logo-principal img {
        max-height: 230px;
    }


    .ondas-1 {
        width: 300px;
        height: 145px;
    }

    .ondas-2 {
        width: 320px;
        height: 165px;
    }

    .ondas-3 {
        width: 340px;
        height: 185px;
    }

    .ondas-4 {
        width: 360px;
        height: 205px;
    }

    .ondas-5 {
        width: 380px;
        height: 225px;
    }

}
/* =========================================
   SELECTOR DE IDIOMA
========================================= */

.pais-menu {
    overflow: hidden;
}

.pais-menu form {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.pais-menu form button {
    all: unset;

    display: block;
    box-sizing: border-box;

    width: 100%;

    padding: 13px 15px;

    border-radius: 8px;

    color: #dce8ee;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}

.pais-menu form button:hover {
    color: #00B5D8;

    background:
        rgba(0, 181, 216, 0.08);
}