/* =========================================================
   VISTA RECLUTAMIENTO
   Consultancy Servicios Contables
========================================================= */

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

.reclutamiento-page {

    width:100%;

    background:#f8f9fb;

    color:#111827;

}


.reclutamiento-container {

    width:calc(100% - 40px);

    max-width:1300px;

    margin:0 auto;

}


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

.reclutamiento-hero {

    width:100%;

    min-height:520px;

    background:#f8f9fb;

    border-top:1px solid #f0f1f4;

    border-bottom:1px solid #f0f1f4;

    position:relative;

    overflow:hidden;

}


.reclutamiento-hero .reclutamiento-container {

    min-height:520px;

    display:grid;

    grid-template-columns:1fr 1.1fr;

    align-items:center;

    gap:20px;

}


.reclutamiento-hero-content {

    width:100%;

    max-width:500px;

    padding:50px 0;

    z-index:2;

}


.reclutamiento-label {

    display:block;

    margin-bottom:12px;

    color:#0527a5;

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

}


.reclutamiento-title {

    margin:0 0 18px;

    color:#111827;

    font-size:52px;

    font-weight:800;

    line-height:1.05;

    letter-spacing:-1.5px;

}


.reclutamiento-title span {

    display:block;

    color:#8327d8;

}


.reclutamiento-description {

    max-width:470px;

    margin:0 0 24px;

    color:#596273;

    font-size:20px;

    line-height:1.55;

}


/* =========================================================
   CONTENEDOR E IMAGEN CON ELEMENTOS FLOTANTES
========================================================= */

.reclutamiento-hero-image-wrapper {

    position:relative;

    width:100%;

    height:100%;

    min-height:560px;

    display:flex;

    align-items:flex-end;

    justify-content:center;

}


.reclutamiento-hero-image {

    width:100%;

    height:100%;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    position:relative;

    z-index:2;

}


.reclutamiento-hero-image img {

    width:100%;

    max-width:680px;

    height:auto;

    max-height:520px;

    display:block;

    object-fit:contain;

    object-position:center bottom;

}


/* --- Imágen de Anotación (Texto + Subrayado PNG) --- */

.hero-annotation {

    position:absolute;

    top:30px;

    right:20px;

    z-index:3;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    pointer-events:none;

}


.hero-annotation-text-img {

    width:100%;

    max-width:180px;

    height:auto;

    display:block;

}


.hero-annotation-underline-img {

    width:100%;

    max-width:65px;

    height:auto;

    display:block;

    margin-top:-6px;

    margin-right:15px;

}


/* --- Badge Flotante "Grandes profesionales..." --- */

.hero-badge {

    position:absolute;

    bottom:80px;

    right:40px;

    z-index:4;

    background:#ffffff;

    padding:12px 18px;

    border-radius:16px;

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

    display:flex;

    align-items:center;

    gap:12px;

    border:1px solid #f0f0f5;

}


.hero-badge-icon {

    width:40px;

    height:40px;

    background:#6336f1;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    flex-shrink:0;

}


.hero-badge-text {

    display:flex;

    flex-direction:column;

    font-size:11px;

    line-height:1.25;

    color:#333333;

}


.hero-badge-text strong {

    font-weight:700;

    color:#111827;

}


.hero-badge-arrow {

    margin-left:10px;

    color:#888888;

    font-size:16px;

}


/* --- Círculo Morado --- */

.hero-purple-circle {

    position:absolute;

    right:25px;

    bottom:135px;

    width:22px;

    height:22px;

    background-color:#8327d8;

    border-radius:50%;

    z-index:3;

}


/* --- Cuadrícula de Puntos (Dotted Grid) --- */

.hero-dots-grid {

    position:absolute;

    right:20px;

    bottom:20px;

    z-index:1;

    display:grid;

    grid-template-columns:repeat(6, 6px);

    gap:8px;

}


.hero-dots-grid span {

    width:6px;

    height:6px;

    background-color:#b192e2;

    border-radius:50%;

    opacity:.7;

}


/* =========================================================
   CORREO CORPORATIVO
========================================================= */

.reclutamiento-email {

    width:100%;

    max-width:318px;

    min-height:64px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 12px;

    margin-bottom:20px;

    background:#f5f7ff;

    border:1px solid #cfd5ff;

    border-radius:8px;

    text-decoration:none;

}


.reclutamiento-email-icon {

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:7px;

    background:#eae8fe;

    color:#942ad1;

    font-size:17px;

}


.reclutamiento-email-content {

    display:flex;

    flex-direction:column;

    gap:2px;

}


.reclutamiento-email-content strong {

    color:#202638;

    font-size:13px;

    font-weight:700;

}


.reclutamiento-email-content span {

    color:#942ad1;

    font-size:12px;

}


/* =========================================================
   ENLACES EXTERNOS DEL HERO
========================================================= */

.reclutamiento-external {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:4px;

    margin:0;

    color:#737b8c;

    font-size:12px;

}


.reclutamiento-external > i {

    margin-right:5px;

    color:#8b93a3;

}


.reclutamiento-external a {

    color:#942ad1;

    font-weight:600;

    text-decoration:none;

}


.reclutamiento-external a:hover {

    text-decoration:underline;

}


/* =========================================================
   SECCIÓN DE VACANTES (GRID Y TARJETAS VERTICALES)
========================================================= */

.reclutamiento-vacantes {

    padding:70px 0 80px;

    background:#ffffff;

}


/* Header de la Sección */

.vacantes-header {

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:40px;

    gap:20px;

}


.vacantes-subtitle {

    font-size:11px;

    font-weight:800;

    color:#9333ea;

    letter-spacing:0.1em;

    position:relative;

    padding-left:54px;

    display:inline-block;

}


.vacantes-subtitle::before {

    content:'';

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:44px;

    height:3px;

    background-color:#9333ea;

    border-radius:2px;

}


.vacantes-title {

    font-size:34px;

    font-weight:800;

    color:#111827;

    margin:6px 0 0;

    letter-spacing:-0.5px;

}


.vacantes-title span {

    color:#9333ea;

}


.vacantes-header-right p {

    max-width:380px;

    font-size:13px;

    color:#2563eb;

    line-height:1.5;

    margin:0;

    font-weight:500;

}


/* Grilla de Tarjetas */

.vacantes-grid {

    display:grid;

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

    gap:24px;

    margin-bottom:50px;

}


/* Tarjeta de Vacante */

.vacante-card {

    background:#ffffff;

    border-radius:24px;

    padding:28px 24px 24px;

    min-height:500px;

    position:relative;

    box-shadow:0 10px 30px rgba(0, 0, 0, 0.04);

    border:1px solid #f1f5f9;

    display:flex;

    flex-direction:column;

}


/* Badges superiores */

.vacante-badge {

    position:absolute;

    top:20px;

    right:20px;

    padding:4px 12px;

    border-radius:20px;

    font-size:11px;

    font-weight:600;

}


.badge-tecnologia {

    background:#e0f2fe;

    color:#0284c7;

}


.badge-finanzas {

    background:#f3e8ff;

    color:#9333ea;

}


.badge-marketing {

    background:#ffe4e6;

    color:#e11d48;

}


/* Imagen Ilustrativa dentro de la card */

.vacante-card-image {

    width:100%;

    height:180px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

}


.vacante-card-image img {

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}

.vacante-image-it {
    position: relative;
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.vacante-image-it .vacante-main-icon {
    width: 100%;
    max-width: 170px;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 10px 15px rgba(15, 23, 42, 0.08));
}

.vacante-image-it .vacante-decor-ball {
    position: absolute;
    top: 28px;
    left: 18%;
    width: 14px;
    height: 14px;
    z-index: 1;
}

.vacante-image-finanzas {
    position: relative;
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.vacante-image-finanzas .vacante-main-graph {
    width: 100%;
    max-width: 130px;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.06));
}

.vacante-image-finanzas .vacante-decor-grey-ball {
    position: absolute;
    top: 25px;
    left: 20%;
    width: 18px;
    height: 18px;
    z-index: 1;
}

.vacante-image-finanzas .vacante-decor-coin {
    position: absolute;
    bottom: 10px;
    right: 25%;
    width: 38px;
    height: 38px;
    z-index: 3;
    filter: drop-shadow(0 4px 10px rgba(234, 179, 8, 0.25));
}

.vacante-image-marketing {
    position: relative;
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.vacante-image-marketing .mkt-purple-circle {
    position: absolute;
    width: 140px;
    height: 102px;
    z-index: 1;
}

.vacante-image-marketing .mkt-pink-ball {
    position: absolute;
    padding-right: 10px;
    top: 50px;
    left: 17%;
    width: 26px;
    height: 15px;
    z-index: 2;
}

.vacante-image-marketing .mkt-body-mega {
    position: absolute;
    width: 105px;
    height: auto;
    z-index: 3;
    transform: translate(9px, 2px);
}

.vacante-image-marketing .mkt-speaker-mega {
    position: absolute;
    width: 42px;
    height: auto;
    z-index: 4;
    transform: translate(32px, -11px);
}

.vacante-image-marketing .mkt-hand {
    position: absolute;
    width: 18px;
    height: auto;
    z-index: 2;
    transform: translate(-5px, 28px);
}

.vacante-image-marketing .mkt-line-upper {
    position: absolute;
    width: 18px;
    height: auto;
    z-index: 3;
    transform: translate(58px, -35px);
}

.vacante-image-marketing .mkt-line-middle {
    position: absolute;
    width: 22px;
    height: auto;
    z-index: 3;
    transform: translate(65px, -18px);
}

.vacante-image-marketing .mkt-line-bottom {
    position: absolute;
    width: 22px;
    height: auto;
    z-index: 3;
    transform: translate(67px, -1px);
}

/* Cuerpo de la Card */

.vacante-card-body {

    display:flex;

    flex-direction:column;

    flex:1;

}


.vacante-card-body h3 {

    font-size:18px;

    font-weight:800;

    color:#111827;

    margin:0 0 10px;

    line-height:1.3;

}


.vacante-desc {

    font-size:15px;

    color:#64748b;

    line-height:1.5;

    margin-bottom:20px;

    min-height:36px;

}


.vacante-details {

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:35px;

}


.vacante-details span {

    display:flex;

    align-items:center;

    gap:8px;

    font-size:12px;

    color:#64748b;

    font-weight:500;

}


.vacante-details svg {

    color:#9333ea;

}


/* Botón Postularse */

.btn-postularse {

    width:100%;

    padding:10px 0;

    background:#9333ea;

    color:#ffffff;

    border-radius:25px;

    text-align:center;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

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

    display:block;

    margin-top:auto;

    box-shadow:0 4px 12px rgba(147, 51, 234, 0.25);

}


.btn-postularse:hover {

    background:#7e22ce;

    transform:translateY(-1px);

}


/* Banner Píldora de Beneficios */

.beneficios-banner {

    background:#f0f5ff;

    border-radius:50px;

    padding:30px 40px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    margin-bottom:50px;

    border:1px solid #e0ebff;

    box-shadow:0 10px 28px rgba(0, 0, 0, 0.22);
}


.beneficio-item {

    display:flex;

    align-items:center;

    gap:14px;

}


.beneficio-item span {

    font-size:13px;

    color:#1e293b;

    line-height:1.25;

    font-weight:700;

}


.beneficio-item strong {

    color:#0f172a;

    font-weight:700;

}


.beneficio-divider {

    width:1px;

    height:30px;

    background-color:#dbeafe;

}


/* Enlaces Inferiores */

.vacantes-footer-links {

    text-align:center;

}


.vacantes-footer-links p {

    font-size:13px;

    color:#64748b;

    margin-bottom:16px;

    font-weight:500;

}


.vacantes-footer-buttons {

    display:flex;

    justify-content:center;

    gap:16px;

}


.btn-external {

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 24px;

    border:1.5px solid #0527a5;

    border-radius:25px;

    color:#0527a5;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

    transition:all 0.2s ease;

    background:#ffffff;

}


.btn-external:hover {

    background:#2563eb;

    color:#ffffff;

}


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

@media (max-width:991px) {

    .reclutamiento-hero .reclutamiento-container {

        grid-template-columns:1fr;

    }


    .reclutamiento-hero-content {

        max-width:620px;

        margin:0 auto;

        padding-bottom:20px;

    }


    .reclutamiento-hero-image-wrapper {

        min-height:350px;

        height:350px;

    }


    .reclutamiento-hero-image img {

        max-height:340px;

    }


    .hero-annotation {

        top:10px;

        right:10px;

    }


    .hero-annotation-text-img {

        max-width:140px;

    }


    .hero-annotation-underline-img {

        max-width:50px;

        margin-right:10px;

    }


    .hero-badge {

        bottom:40px;

        right:20px;

        padding:8px 14px;

    }


    .vacantes-grid {

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

    }


    .beneficios-banner {

        border-radius:24px;

        flex-direction:column;

        gap:16px;

        align-items:flex-start;

        padding:24px;

    }


    .beneficio-divider {

        display:none;

    }

}


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

@media (max-width:767px) {

    .reclutamiento-container {

        width:calc(100% - 32px);

    }


    .reclutamiento-hero {

        min-height:auto;

    }


    .reclutamiento-hero .reclutamiento-container {

        min-height:auto;

    }


    .reclutamiento-hero-content {

        padding:45px 0 20px;

    }


    .reclutamiento-title {

        font-size:40px;

        letter-spacing:-1px;

    }


    .reclutamiento-description {

        font-size:15px;

    }


    .reclutamiento-email {

        max-width:100%;

    }


    .reclutamiento-hero-image-wrapper {

        min-height:300px;

        height:300px;

    }


    .reclutamiento-hero-image img {

        max-height:290px;

    }


    .vacantes-header {

        flex-direction:column;

        align-items:flex-start;

    }


    .vacantes-grid {

        grid-template-columns:1fr;

    }


    .vacantes-footer-buttons {

        flex-direction:column;

    }

}


/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width:576px) {

    .hero-annotation {

        display:none;

    }


    .hero-dots-grid {

        display:none;

    }

}


@media (max-width:480px) {

    .reclutamiento-title {

        font-size:34px;

    }


    .reclutamiento-label {

        font-size:10px;

    }


    .reclutamiento-description {

        font-size:14px;

    }

}

/* =========================================================
   VACANTES SIN ILUSTRACIÓN PROPIA (ícono en círculo)
   Colores desde el :root de layout.css
========================================================= */

.badge-area {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.vacante-image-icono {
    position: relative;
}

.vacante-image-icono .vacante-decor-ball {
    position: absolute;
    top: 28px;
    left: 18%;
    width: 14px;
    height: 14px;
}

.vacante-icono-circulo {
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, var(--bg-site-light) 0%, transparent 60%),
        rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
    font-size: 3.2rem;
    box-shadow: var(--shadow-card);
}