/* =========================================================
   DETALLE DE VACANTE
   Diseño moderno, colorido y profesional
   Verde predominante + acentos turquesa, azul y dorado
   ========================================================= */

:root{
    --verde-900:#075c3b;
    --verde-800:#087449;
    --verde-700:#0b8755;
    --verde-600:#149866;
    --verde-500:#20ad76;
    --verde-400:#48c892;
    --verde-300:#8de0b8;
    --verde-200:#c9f2dd;
    --verde-100:#eafaf2;

    --turquesa:#159c9c;
    --turquesa-claro:#d9f5f3;

    --azul:#2879b8;
    --azul-claro:#e4f1fb;

    --dorado:#d79a28;
    --dorado-claro:#fff4d8;

    --coral:#d96b58;
    --coral-claro:#fce9e5;

    --texto:#18342a;
    --texto-secundario:#5f7068;
    --texto-suave:#7f8e87;

    --blanco:#ffffff;
    --fondo:#f4f8f6;
    --fondo-verde:#eef9f3;

    --borde:#dceae3;
    --borde-fuerte:#c8ddd3;

    --sombra-suave:0 8px 25px rgba(15,72,50,.08);
    --sombra-media:0 16px 40px rgba(15,72,50,.12);
    --sombra-fuerte:0 22px 55px rgba(15,72,50,.16);

    --radio-sm:10px;
    --radio-md:16px;
    --radio-lg:22px;
    --radio-xl:28px;

    --transicion:.25s ease;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(32,173,118,.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 24%,
            rgba(21,156,156,.06),
            transparent 25%
        ),
        var(--fondo);
    color:var(--texto);
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
}

::selection{
    background:var(--verde-500);
    color:var(--blanco);
}


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

.detalle-header{
    position:relative;
    z-index:20;
    background:
        linear-gradient(
            120deg,
            var(--verde-900) 0%,
            var(--verde-700) 55%,
            var(--turquesa) 100%
        );
    color:var(--blanco);
    box-shadow:0 5px 25px rgba(7,92,59,.18);
}

.detalle-header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:
        linear-gradient(
            90deg,
            var(--verde-300),
            var(--turquesa),
            var(--azul),
            var(--dorado)
        );
}

.navbar{
    width:min(1240px, calc(100% - 40px));
    min-height:76px;
    margin:0 auto;

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

.logo{
    display:flex;
    align-items:center;
    gap:12px;

    color:var(--blanco);
    font-size:1.15rem;
    font-weight:800;
    letter-spacing:-.02em;

    transition:var(--transicion);
}

.logo:hover{
    transform:translateY(-1px);
    opacity:.92;
}

.maletin{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:12px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.25);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 6px 16px rgba(0,0,0,.08);
}

.maletin svg{
    width:24px;
    height:24px;
    color:var(--blanco);
}

.maletin svg path,
.maletin svg rect,
.maletin svg circle{
    stroke:currentColor;
}

.menu{
    display:flex;
    align-items:center;
    gap:8px;
}

.menu a{
    position:relative;

    padding:9px 14px;
    border-radius:10px;

    color:rgba(255,255,255,.9);
    font-size:.94rem;
    font-weight:600;

    transition:var(--transicion);
}

.menu a::after{
    content:"";

    position:absolute;
    left:14px;
    right:14px;
    bottom:5px;

    height:2px;
    border-radius:10px;

    background:var(--verde-300);

    transform:scaleX(0);
    transform-origin:center;

    transition:var(--transicion);
}

.menu a:hover{
    color:var(--blanco);
    background:rgba(255,255,255,.10);
}

.menu a:hover::after{
    transform:scaleX(1);
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.detalle-contenido{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
    padding:42px 0 70px;
}


/* =========================================================
   BOTÓN REGRESAR
   ========================================================= */

.detalle-regreso{
    margin-bottom:22px;
}

.boton-regresar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    padding:9px 14px;

    border:1px solid var(--borde);
    border-radius:11px;

    background:rgba(255,255,255,.86);
    color:var(--verde-800);

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

    box-shadow:0 4px 14px rgba(15,72,50,.05);

    transition:var(--transicion);
}

.boton-regresar:hover{
    color:var(--blanco);
    background:var(--verde-700);
    border-color:var(--verde-700);

    transform:translateX(-3px);

    box-shadow:0 8px 18px rgba(11,135,85,.18);
}


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

.detalle-hero{
    position:relative;
    overflow:hidden;

    margin-bottom:28px;

    border:1px solid rgba(20,152,102,.18);
    border-radius:var(--radio-xl);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fcfa 62%,
            #eefaf5 100%
        );

    box-shadow:var(--sombra-media);
}

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

    position:absolute;

    width:240px;
    height:240px;

    top:-120px;
    right:-80px;

    border-radius:50%;

    background:rgba(21,156,156,.09);

    pointer-events:none;
}

.detalle-hero::after{
    content:"";

    position:absolute;

    width:170px;
    height:170px;

    left:-90px;
    bottom:-110px;

    border-radius:50%;

    background:rgba(32,173,118,.08);

    pointer-events:none;
}

.detalle-hero-contenido{
    position:relative;
    z-index:1;

    padding:38px 42px 40px;

    text-align:center;
}


/* =========================================================
   FECHA DE PUBLICACIÓN
   Se conserva únicamente encima del título
   ========================================================= */

.detalle-fecha{
    display:block;

    margin-bottom:12px;

    color:var(--texto-suave);

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


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

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

    margin:0 auto;

    color:var(--verde-900);

    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.12;

    letter-spacing:-.045em;
    font-weight:850;
}


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

.detalle-descripcion{
    max-width:790px;

    margin:18px auto 0;

    color:var(--texto-secundario);

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

.detalle-descripcion-vacia{
    max-width:680px;

    margin:18px auto 0;
    padding:13px 18px;

    border-radius:12px;

    background:rgba(21,156,156,.07);

    color:#46726e;

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


/* =========================================================
   INFORMACIÓN DE LA VACANTE
   Solo:
   - Ubicación
   - Tipo de jornada
   - Modalidad
   ========================================================= */

.informacion-vacante{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));

    gap:14px;

    margin-bottom:30px;
}

.informacion-item{
    position:relative;

    min-width:0;

    display:flex;
    align-items:center;

    gap:13px;

    padding:17px 18px;

    overflow:hidden;

    border:1px solid var(--borde);
    border-radius:15px;

    background:var(--blanco);

    box-shadow:var(--sombra-suave);

    transition:var(--transicion);
}

.informacion-item::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:var(--verde-500);
}

.informacion-item:nth-child(2)::before{
    background:var(--turquesa);
}

.informacion-item:nth-child(3)::before{
    background:var(--azul);
}

.informacion-item:hover{
    transform:translateY(-3px);

    border-color:var(--borde-fuerte);

    box-shadow:var(--sombra-media);
}


/* =========================================================
   ICONOS DE INFORMACIÓN
   Compatible con SVG e ICONOS <i>
   ========================================================= */

.informacion-icono{
    flex:0 0 42px;

    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:12px;

    background:var(--verde-100);
    color:var(--verde-700);

    line-height:1;
}

.informacion-item:nth-child(2) .informacion-icono{
    background:var(--turquesa-claro);
    color:var(--turquesa);
}

.informacion-item:nth-child(3) .informacion-icono{
    background:var(--azul-claro);
    color:var(--azul);
}

.informacion-icono svg,
.informacion-icono i{
    width:21px;
    height:21px;

    display:block;

    color:currentColor;
}

.informacion-icono svg{
    stroke:currentColor;
}

.informacion-icono i{
    font-size:21px;
    line-height:1;
}


/* =========================================================
   TEXTO DE INFORMACIÓN
   ========================================================= */

.informacion-texto{
    min-width:0;
}

.informacion-item span{
    display:block;

    margin-bottom:2px;

    color:var(--texto-suave);

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

    text-transform:uppercase;
    letter-spacing:.07em;
}

.informacion-item strong{
    display:block;

    overflow:hidden;

    color:var(--texto);

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

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   GRID PRINCIPAL
   ========================================================= */

.detalle-grid{
    display:grid;

    grid-template-columns:minmax(0, 1fr) 330px;

    gap:28px;

    align-items:start;
}

.detalle-principal{
    min-width:0;
}


/* =========================================================
   BLOQUES DE CONTENIDO
   ========================================================= */

.bloque-detalle{
    position:relative;

    margin-bottom:22px;
    padding:29px 32px 31px;

    overflow:hidden;

    border:1px solid var(--borde);
    border-radius:var(--radio-lg);

    background:var(--blanco);

    box-shadow:var(--sombra-suave);
}

.bloque-detalle::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--verde-600),
            var(--turquesa),
            var(--azul)
        );
}

.bloque-detalle:nth-child(2)::before{
    background:
        linear-gradient(
            90deg,
            var(--turquesa),
            var(--azul),
            var(--verde-500)
        );
}

.bloque-detalle:nth-child(3)::before{
    background:
        linear-gradient(
            90deg,
            var(--azul),
            var(--dorado),
            var(--verde-500)
        );
}

.bloque-detalle:hover{
    box-shadow:var(--sombra-media);
}


/* =========================================================
   TÍTULO DE BLOQUE
   ========================================================= */

.titulo-bloque{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:22px;
}


/* =========================================================
   ICONOS DE BLOQUES
   Compatible con SVG e ICONOS <i>
   ========================================================= */

.icono-bloque{
    flex:0 0 46px;

    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:var(--verde-100);
    color:var(--verde-700);

    line-height:1;
}

.bloque-detalle:nth-child(2) .icono-bloque{
    background:var(--turquesa-claro);
    color:var(--turquesa);
}

.bloque-detalle:nth-child(3) .icono-bloque{
    background:var(--azul-claro);
    color:var(--azul);
}

.icono-bloque svg,
.icono-bloque i{
    width:23px;
    height:23px;

    display:block;

    color:currentColor;
}

.icono-bloque svg{
    stroke:currentColor;
}

.icono-bloque i{
    font-size:23px;
    line-height:1;
}


/* =========================================================
   TEXTO DEL TÍTULO DE BLOQUE
   ========================================================= */

.titulo-bloque-texto{
    min-width:0;
}

.titulo-bloque-texto .kicker{
    display:block;

    margin-bottom:2px;

    color:var(--verde-600);

    font-size:.72rem;
    font-weight:850;

    text-transform:uppercase;
    letter-spacing:.09em;
}

.bloque-detalle:nth-child(2) .titulo-bloque-texto .kicker{
    color:var(--turquesa);
}

.bloque-detalle:nth-child(3) .titulo-bloque-texto .kicker{
    color:var(--azul);
}

.titulo-bloque h2{
    margin:0;

    color:var(--verde-900);

    font-size:1.42rem;
    line-height:1.25;

    letter-spacing:-.025em;
}


/* =========================================================
   TEXTO RICH TEXT
   ========================================================= */

.contenido-rich-text{
    color:#40574e;

    font-size:.98rem;
    line-height:1.78;
}

.contenido-rich-text p{
    margin:0 0 14px;
}

.contenido-rich-text p:last-child{
    margin-bottom:0;
}

.contenido-rich-text strong,
.contenido-rich-text b{
    color:var(--verde-800);
    font-weight:800;
}

.contenido-rich-text em,
.contenido-rich-text i{
    color:#496c61;
}

.contenido-rich-text ul,
.contenido-rich-text ol{
    margin:12px 0 16px;
    padding-left:25px;
}

.contenido-rich-text li{
    margin-bottom:8px;
    padding-left:3px;
}

.contenido-rich-text ul li::marker{
    color:var(--verde-500);
}

.contenido-rich-text ol li::marker{
    color:var(--turquesa);
    font-weight:800;
}

.contenido-rich-text a{
    color:var(--azul);

    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

.contenido-rich-text a:hover{
    color:var(--verde-700);
}


/* =========================================================
   BLOQUE SIN CONTENIDO
   ========================================================= */

.bloque-sin-contenido{
    text-align:center;
    padding:40px 25px;
}

.icono-sin-contenido{
    width:54px;
    height:54px;

    margin:0 auto 14px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--dorado-claro);
    color:var(--dorado);
}

.icono-sin-contenido svg,
.icono-sin-contenido i{
    width:25px;
    height:25px;

    display:block;

    color:currentColor;
}

.icono-sin-contenido i{
    font-size:25px;
    line-height:1;
}

.bloque-sin-contenido p{
    margin:0;
    color:var(--texto-secundario);
}


/* =========================================================
   IMAGEN DE LA VACANTE
   ========================================================= */

.bloque-imagen{
    position:relative;

    margin-bottom:24px;
    padding:25px;

    overflow:hidden;

    border:1px solid #cde5dc;
    border-radius:var(--radio-lg);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0faf5
        );

    box-shadow:var(--sombra-suave);
}

.bloque-imagen::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--verde-500),
            var(--turquesa),
            var(--dorado)
        );
}

.bloque-imagen-header{
    display:flex;
    align-items:center;

    gap:13px;

    margin-bottom:19px;
}

.bloque-imagen-header h2{
    margin:0;

    color:var(--verde-900);

    font-size:1.2rem;
    letter-spacing:-.02em;
}

.bloque-imagen-header .icono-bloque{
    width:42px;
    height:42px;

    flex-basis:42px;
}

.imagen-contenedor{
    display:flex;
    justify-content:center;

    padding:12px;

    border-radius:15px;

    background:
        repeating-linear-gradient(
            45deg,
            #f4f8f6,
            #f4f8f6 10px,
            #edf3f0 10px,
            #edf3f0 20px
        );

    border:1px solid var(--borde);
}

.imagen-vacante{
    display:block;

    max-width:100%;
    width:auto;
    height:auto;

    max-height:780px;

    border-radius:10px;

    box-shadow:0 14px 35px rgba(15,72,50,.14);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.detalle-lateral{
    position:sticky;
    top:24px;
}


/* =========================================================
   CARD DE POSTULACIÓN
   ========================================================= */

.card-postulacion{
    position:relative;
    overflow:hidden;

    margin-bottom:20px;
    padding:27px;

    border-radius:var(--radio-lg);

    color:var(--blanco);

    background:
        linear-gradient(
            145deg,
            var(--verde-900) 0%,
            var(--verde-700) 55%,
            var(--turquesa) 100%
        );

    box-shadow:var(--sombra-fuerte);
}

.card-postulacion::before{
    content:"";

    position:absolute;

    width:170px;
    height:170px;

    top:-90px;
    right:-60px;

    border-radius:50%;

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

.card-postulacion::after{
    content:"";

    position:absolute;

    width:120px;
    height:120px;

    left:-65px;
    bottom:-70px;

    border-radius:50%;

    background:rgba(141,224,184,.09);
}

.card-kicker{
    position:relative;
    z-index:1;

    display:inline-block;

    margin-bottom:8px;

    color:var(--verde-300);

    font-size:.72rem;
    font-weight:850;

    text-transform:uppercase;
    letter-spacing:.09em;
}

.card-postulacion h2{
    position:relative;
    z-index:1;

    margin:0 0 9px;

    color:var(--blanco);

    font-size:1.35rem;
    line-height:1.25;
}

.card-postulacion p{
    position:relative;
    z-index:1;

    margin:0 0 20px;

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

    font-size:.9rem;
    line-height:1.6;
}

.boton-postular{
    position:relative;
    z-index:1;

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

    gap:10px;

    width:100%;
    min-height:50px;

    padding:12px 17px;

    border:0;
    border-radius:12px;

    background:var(--blanco);
    color:var(--verde-800);

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

    box-shadow:0 9px 20px rgba(0,0,0,.13);

    transition:var(--transicion);
}

.boton-postular:hover{
    background:#f4fffa;
    color:var(--verde-900);

    transform:translateY(-2px);

    box-shadow:0 13px 26px rgba(0,0,0,.18);
}

.boton-postular-icono{
    display:grid;
    place-items:center;
}

.boton-postular-icono svg,
.boton-postular-icono i{
    width:19px;
    height:19px;

    display:block;

    color:currentColor;
}

.boton-postular-icono i{
    font-size:19px;
    line-height:1;
}

.boton-postular-flecha{
    display:grid;
    place-items:center;

    margin-left:auto;
}

.boton-postular-flecha svg,
.boton-postular-flecha i{
    width:17px;
    height:17px;

    display:block;

    color:currentColor;
}

.boton-postular-flecha i{
    font-size:17px;
    line-height:1;
}

.texto-postulacion{
    display:block;
}


/* =========================================================
   CARD RESUMEN
   Solo información realmente utilizada
   ========================================================= */

.card-resumen{
    overflow:hidden;

    border:1px solid var(--borde);
    border-radius:var(--radio-lg);

    background:var(--blanco);

    box-shadow:var(--sombra-suave);
}

.card-resumen-header{
    padding:19px 21px;

    border-bottom:1px solid var(--borde);

    background:
        linear-gradient(
            90deg,
            var(--verde-100),
            #f8fcfa
        );
}

.card-resumen-header h3{
    margin:0;

    color:var(--verde-900);

    font-size:1rem;
    font-weight:800;
}

.resumen-item{
    display:flex;
    align-items:flex-start;

    gap:12px;

    padding:15px 20px;

    border-bottom:1px solid #edf2ef;
}

.resumen-item:last-child{
    border-bottom:0;
}


/* =========================================================
   ICONOS DEL RESUMEN
   Compatible con SVG e ICONOS <i>
   ========================================================= */

.resumen-item > i,
.resumen-item > svg{
    flex:0 0 34px;

    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    padding:8px;

    border-radius:10px;

    background:var(--verde-100);
    color:var(--verde-700);
}

.resumen-item > svg{
    stroke:currentColor;
}

.resumen-item > i{
    font-size:18px;
    line-height:1;
}

.resumen-item:nth-child(3) > i,
.resumen-item:nth-child(3) > svg{
    background:var(--turquesa-claro);
    color:var(--turquesa);
}

.resumen-item:nth-child(4) > i,
.resumen-item:nth-child(4) > svg{
    background:var(--azul-claro);
    color:var(--azul);
}


/* =========================================================
   TEXTO DEL RESUMEN
   ========================================================= */

.resumen-item-texto{
    min-width:0;
}

.resumen-item span{
    display:block;

    margin-bottom:2px;

    color:var(--texto-suave);

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

    text-transform:uppercase;
    letter-spacing:.06em;
}

.resumen-item strong{
    display:block;

    color:var(--texto);

    font-size:.88rem;
    line-height:1.4;
}


/* =========================================================
   ENLACE REGRESAR
   ========================================================= */

.enlace-regresar{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    margin-top:17px;
    padding:12px;

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

    background:var(--blanco);
    color:var(--verde-700);

    font-size:.87rem;
    font-weight:750;

    transition:var(--transicion);
}

.enlace-regresar:hover{
    border-color:var(--verde-300);

    background:var(--verde-100);
    color:var(--verde-900);
}


/* =========================================================
   ESTADO DE ERROR
   ========================================================= */

.vacante-error{
    max-width:720px;

    margin:50px auto;
    padding:45px 35px;

    text-align:center;

    border:1px solid #cde4da;
    border-radius:var(--radio-xl);

    background:var(--blanco);

    box-shadow:var(--sombra-media);
}

.vacante-error-icono{
    width:70px;
    height:70px;

    margin:0 auto 20px;

    display:grid;
    place-items:center;

    border-radius:20px;

    background:var(--coral-claro);
    color:var(--coral);
}

.vacante-error-icono svg,
.vacante-error-icono i{
    width:32px;
    height:32px;

    display:block;

    color:currentColor;
}

.vacante-error-icono i{
    font-size:32px;
    line-height:1;
}

.vacante-error .kicker{
    margin-bottom:7px;

    color:var(--coral);

    font-size:.72rem;
    font-weight:850;

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

.vacante-error h1{
    margin:0 0 10px;

    color:var(--verde-900);

    font-size:1.8rem;
}

.vacante-error p{
    max-width:540px;

    margin:0 auto 23px;

    color:var(--texto-secundario);
}

.boton-principal{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;

    padding:11px 20px;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            var(--verde-700),
            var(--turquesa)
        );

    color:var(--blanco);

    font-weight:800;

    box-shadow:0 8px 18px rgba(11,135,85,.18);

    transition:var(--transicion);
}

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

    box-shadow:0 12px 25px rgba(11,135,85,.25);
}


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

.footer{
    position:relative;

    margin-top:10px;
    padding:30px 20px;

    overflow:hidden;

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

    background:
        linear-gradient(
            120deg,
            var(--verde-900),
            #075d48 60%,
            #096d78
        );
}

.footer::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--verde-300),
            var(--turquesa),
            var(--azul),
            var(--dorado)
        );
}

.footer-contenido{
    position:relative;
    z-index:1;

    width:min(1180px, 100%);

    margin:0 auto;

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

    gap:20px;
}

.footer strong{
    color:var(--blanco);
    font-weight:800;
}

.footer span{
    color:rgba(255,255,255,.7);
}

.footer a{
    color:var(--verde-300);
    font-weight:700;

    transition:var(--transicion);
}

.footer a:hover{
    color:var(--blanco);
}


/* =========================================================
   FOCUS / ACCESIBILIDAD
   ========================================================= */

a:focus-visible,
button:focus-visible{
    outline:3px solid rgba(21,156,156,.35);
    outline-offset:3px;
}


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

@media (max-width:980px){

    .detalle-grid{
        grid-template-columns:minmax(0, 1fr);
    }

    .detalle-lateral{
        position:static;
    }

    .card-postulacion{
        max-width:none;
    }

    .card-resumen{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .card-resumen-header{
        grid-column:1 / -1;
    }

    .resumen-item{
        border-bottom:1px solid #edf2ef;
    }

    .resumen-item:nth-last-child(-n+2){
        border-bottom:0;
    }
}


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

@media (max-width:760px){

    .navbar{
        width:min(calc(100% - 28px), 1180px);
        min-height:68px;
    }

    .menu{
        gap:2px;
    }

    .menu a{
        padding:8px 9px;
        font-size:.84rem;
    }

    .detalle-contenido{
        width:min(calc(100% - 28px), 1180px);
        padding-top:28px;
    }

    .detalle-hero-contenido{
        padding:31px 25px 33px;
    }

    .informacion-vacante{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .bloque-detalle{
        padding:25px 24px 27px;
    }
}


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

@media (max-width:560px){

    .navbar{
        flex-direction:column;
        justify-content:center;

        gap:7px;

        padding:12px 0 14px;
    }

    .logo{
        font-size:1rem;
    }

    .maletin{
        width:37px;
        height:37px;
    }

    .menu{
        width:100%;
        justify-content:center;
    }

    .menu a{
        padding:7px 11px;
    }

    .detalle-contenido{
        width:calc(100% - 20px);

        padding:20px 0 45px;
    }

    .detalle-regreso{
        margin-bottom:15px;
    }

    .boton-regresar{
        width:100%;
        justify-content:center;
    }

    .detalle-hero{
        border-radius:19px;
    }

    .detalle-hero-contenido{
        padding:27px 18px 29px;
    }

    .detalle-fecha{
        margin-bottom:10px;
        font-size:.78rem;
    }

    .detalle-hero h1{
        font-size:1.9rem;
    }

    .detalle-descripcion{
        font-size:.94rem;
    }

    .informacion-vacante{
        grid-template-columns:1fr;
        gap:10px;
    }

    .informacion-item{
        padding:14px 15px;
    }

    .informacion-item strong{
        white-space:normal;
    }

    .bloque-detalle{
        padding:22px 18px 24px;
        border-radius:17px;
    }

    .titulo-bloque{
        align-items:flex-start;
        gap:11px;
        margin-bottom:18px;
    }

    .icono-bloque{
        flex-basis:40px;
        width:40px;
        height:40px;
        border-radius:11px;
    }

    .icono-bloque svg,
    .icono-bloque i{
        width:20px;
        height:20px;
    }

    .icono-bloque i{
        font-size:20px;
    }

    .titulo-bloque h2{
        font-size:1.2rem;
    }

    .contenido-rich-text{
        font-size:.93rem;
    }

    .bloque-imagen{
        padding:17px;
        border-radius:17px;
    }

    .imagen-contenedor{
        padding:7px;
    }

    .imagen-vacante{
        border-radius:7px;
    }

    .card-postulacion{
        padding:23px 20px;
        border-radius:17px;
    }

    .card-resumen{
        display:block;
        border-radius:17px;
    }

    .card-resumen-header{
        padding:17px 18px;
    }

    .resumen-item{
        padding:13px 17px;
    }

    .resumen-item:nth-last-child(-n+2){
        border-bottom:1px solid #edf2ef;
    }

    .resumen-item:last-child{
        border-bottom:0;
    }

    .footer{
        padding:25px 17px;
    }

    .footer-contenido{
        flex-direction:column;
        text-align:center;
    }
}


/* =========================================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}