/* =================================================================== */
/* 0. Evitar scroll hnorizontal                                        */
/* =================================================================== */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    margin: 0;
    padding: 0;
}
/* =================================================================== */
/* 1. RESET Y CONFIGURACIONES BASE                                     */
/* =================================================================== */
* {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0 !important;
    font-family: var(--nunito-font);
    line-height: 1.5;
    color: var(--Neutral-30);
}

b, strong {
    font-weight: bolder;
}

i, em {
    font-style: italic;
}

/* Divisores horizontales */
hr {
    border: 0;
    border-top: 1px solid var(--Primario-50);
    opacity: 1;
    margin: 0.5rem 0;
}

/* Focus */
:focus:not(:focus-visible) {
    outline: none !important;
}
:focus-visible {
    outline: 2px solid var(--Complementario-60) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}
.form-control:focus-visible, 
.form-select:focus-visible, 
.form-check-input:focus-visible,
.input-group .btn:focus-visible { 
    outline: none !important; 
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--Complementario-60) !important;
}

/* ------------------------------------------------------------------- */
/* Restablecer estilos SOLO para listas fuera de navbar               */
/* ------------------------------------------------------------------- */
/* La pseudo‑clase :not() no acepta selectores complejos con espacios  */
/* por lo que las reglas originales no se aplicaban correctamente.     */
/* Sustituimos los selectores por clases simples para excluir las      */
/* listas del menú (.navbar, .navbar-nav y .nav).                      */
ul:not(.navbar):not(.navbar-nav):not(.nav),
ol:not(.navbar):not(.navbar-nav):not(.nav) {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------- */
/* Tipografia especifica para elementos de lista en contenido principal */
/* ------------------------------------------------------------------- */
.frame-type-textmedia li,
.frame-type-textpic li,
.frame-type-text li {
    font-family: var(--paragraph-font-family), sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
}

/* ---------------------------------------------------- */
/* Anulando estilos en el menú principal      */
/* ---------------------------------------------------- */

/* Resetear los estilos de las listas dentro de la barra de navegación */
.navbar ul,
.navbar ol,
.navbar-nav,
.nav {
    list-style: none !important;
    /* !important para asegurar que anule cualquier estilo genérico */
}

/* Asegurar que las viñetas personalizadas no se muestren en el menú */
.navbar ul > li::before,
.navbar ul > li > ul > li::before,
.navbar ol > li::before,
.navbar ol > li > ol > li::before,
.navbar-nav > li::before,
.navbar-nav li::before,
.nav > li::before {
    display: none !important;
    content: none !important;
}

/* ---------------------------------------------------- */
/* Estilos de listas ordenadas (hasta 4 niveles)  */
/* ---------------------------------------------------- */

/* Nivel 1: número dentro de círculo azul (Primario‑50) */
.frame-type-textmedia ol,
.frame-type-textpic ol,
.frame-type-text ol {
    counter-reset: level1;
}
.frame-type-textmedia ol > li,
.frame-type-textpic ol > li,
.frame-type-text ol > li {
    position: relative;
    counter-increment: level1;
    padding-left: 31px;
    margin-bottom: 12px;
}
.frame-type-textmedia ol > li::before,
.frame-type-textpic ol > li::before,
.frame-type-text ol > li::before {
    content: counter(level1);
    position: absolute;
    left: 0;
    top: 0.15em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    background-color: var(--Primario-50);
    color: var(--Neutral-100);
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 700;
}

/* Nivel 2: letra minúscula dentro de círculo (Primario‑30) */
.frame-type-textmedia ol > li > ol,
.frame-type-textpic ol > li > ol,
.frame-type-text ol > li > ol {
    counter-reset: level2;
}
.frame-type-textmedia ol > li > ol > li,
.frame-type-textpic ol > li > ol > li,
.frame-type-text ol > li > ol > li {
    position: relative;
    counter-increment: level2;
    padding-left: 29px;
    margin-bottom: 10px;
}
.frame-type-textmedia ol > li > ol > li::before,
.frame-type-textpic ol > li > ol > li::before,
.frame-type-text ol > li > ol > li::before {
    content: counter(level2, lower-alpha);
    position: absolute;
    left: 0;
    top: 0.15em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: var(--Primario-30);
    color: var(--Neutral-100);
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 700;
}

/* Nivel 3: numeración romana mayúscula con punto (Primario‑50) sin círculo */
.frame-type-textmedia ol > li > ol > li > ol,
.frame-type-textpic ol > li > ol > li > ol,
.frame-type-text ol > li > ol > li > ol {
    counter-reset: level3;
}
.frame-type-textmedia ol > li > ol > li > ol > li,
.frame-type-textpic ol > li > ol > li > ol > li,
.frame-type-text ol > li > ol > li > ol > li {
    position: relative;
    counter-increment: level3;
    padding-left: 16px;
    margin-bottom: 8px;
}
.frame-type-textmedia ol > li > ol > li > ol > li::before,
.frame-type-textpic ol > li > ol > li > ol > li::before,
.frame-type-text ol > li > ol > li > ol > li::before {
    content: counter(level3, upper-roman) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--Primario-50);
    font-weight: 700;
    font-size: 1.0em;
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
}

/* Nivel 4: letra minúscula con punto (Secundario‑40) sin círculo */
.frame-type-textmedia ol > li > ol > li > ol > li > ol,
.frame-type-textpic ol > li > ol > li > ol > li > ol,
.frame-type-text ol > li > ol > li > ol > li > ol {
    counter-reset: level4;
}
.frame-type-textmedia ol > li > ol > li > ol > li > ol > li,
.frame-type-textpic ol > li > ol > li > ol > li > ol > li,
.frame-type-text ol > li > ol > li > ol > li > ol > li {
    position: relative;
    counter-increment: level4;
    padding-left: 14px;
    margin-bottom: 6px;
}
.frame-type-textmedia ol > li > ol > li > ol > li > ol > li::before,
.frame-type-textpic ol > li > ol > li > ol > li > ol > li::before,
.frame-type-text ol > li > ol > li > ol > li > ol > li::before {
    content: counter(level4, lower-alpha) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--Secundario-40);
    font-weight: 700;
    font-size: 1.0em;
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
}

/* ---------------------------------------------------- */
/* Estilos de listas no ordenadas (hasta 4 niveles)     */
/* ---------------------------------------------------- */

/* Nivel 1: círculo relleno de 12px en color Primario‑50 */
.frame-type-textmedia ul > li,
.frame-type-textpic ul > li,
.frame-type-text ul > li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
}
.frame-type-textmedia ul > li::before,
.frame-type-textpic ul > li::before,
.frame-type-text ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    top: calc(0.5lh - 6px);
    width: 12px;
    height: 12px;
    border: 2px solid var(--Primario-50);
    background-color: var(--Primario-50);
    border-radius: 50%;
}

/* Nivel 2: círculo con borde Primario‑50 y relleno Primario‑98 */
.frame-type-textmedia ul > li > ul > li,
.frame-type-textpic ul > li > ul > li,
.frame-type-text ul > li > ul > li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
}
.frame-type-textmedia ul > li > ul > li::before,
.frame-type-textpic ul > li > ul > li::before,
.frame-type-text ul > li > ul > li::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 0.35em;
    top: calc(0.5lh - 5px);
    width: 10px;
    height: 10px;
    border: 2px solid var(--Primario-50);
    background-color: var(--Primario-98);
    border-radius: 50%;
}

/* Nivel 3: icono play con borde Secundario‑50 y relleno Primario‑50 */
.frame-type-textmedia ul > li > ul > li > ul > li,
.frame-type-textpic ul > li > ul > li > ul > li,
.frame-type-text ul > li > ul > li > ul > li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
}
.frame-type-textmedia ul > li > ul > li > ul > li::before,
.frame-type-textpic ul > li > ul > li > ul > li::before,
.frame-type-text ul > li > ul > li > ul > li::before {
    content: '▶';
    position: absolute;
    left: 1px;
    top: 0.42em;
    color: var(--Secundario-50);
    font-size: 0.8em;
    line-height: 1;
    width: auto;
    height: auto;
    border: none;
    background: none;
}
.frame-type-textmedia ul > li > ul > li > ul > li::after,
.frame-type-textpic ul > li > ul > li > ul > li::after,
.frame-type-text ul > li > ul > li > ul > li::after {
    display: none;
}

/* Nivel 4: guion con borde Primario‑40 y relleno Secundario‑40 */
.frame-type-textmedia ul > li > ul > li > ul > li > ul > li,
.frame-type-textpic ul > li > ul > li > ul > li > ul > li,
.frame-type-text ul > li > ul > li > ul > li > ul > li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 6px;
}
.frame-type-textmedia ul > li > ul > li > ul > li > ul > li::before,
.frame-type-textpic ul > li > ul > li > ul > li > ul > li::before,
.frame-type-text ul > li > ul > li > ul > li > ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1em;
    width: 10px;
    height: 2px;
    background-color: var(--Primario-40);
    border: none;
    border-radius: 1px;
}

/* ---------------------------------------------------- */
/* Ajustes responsivos (Mobile)                         */
/* ---------------------------------------------------- */

@media (max-width: 767.98px) {
    /* Ordenadas nivel 1 */
    .frame-type-textmedia ol > li,
    .frame-type-textpic ol > li,
    .frame-type-text ol > li {
        padding-left: calc(1em + 8px);
        margin-bottom: 1em;
    }
    .frame-type-textmedia ol > li::before,
    .frame-type-textpic ol > li::before,
    .frame-type-text ol > li::before {
        width: 1em;
        height: 1em;
        font-size: 0.75em;
    }

    /* Ordenadas nivel 2 */
    .frame-type-textmedia ol > li > ol > li,
    .frame-type-textpic ol > li > ol > li,
    .frame-type-text ol > li > ol > li {
        padding-left: calc(0.8em + 8px);
        margin-bottom: 0.8em;
    }
    .frame-type-textmedia ol > li > ol > li::before,
    .frame-type-textpic ol > li > ol > li::before,
    .frame-type-text ol > li > ol > li::before {
        width: 0.8em;
        height: 0.8em;
        font-size: 0.75em;
    }

    /* Ordenadas nivel 3: sin círculo, tamaño automático */
    .frame-type-textmedia ol > li > ol > li > ol > li,
    .frame-type-textpic ol > li > ol > li > ol > li,
    .frame-type-text ol > li > ol > li > ol > li {
        padding-left: calc(0.66em + 8px);
        margin-bottom: 0.66em;
    }
    .frame-type-textmedia ol > li > ol > li > ol > li::before,
    .frame-type-textpic ol > li > ol > li > ol > li::before,
    .frame-type-text ol > li > ol > li > ol > li::before {
        width: auto;
        height: auto;
        font-size: 0.75em;
        background: none;
    }

    /* Ordenadas nivel 4: sin círculo, tamaño automático */
    .frame-type-textmedia ol > li > ol > li > ol > li > ol > li,
    .frame-type-textpic ol > li > ol > li > ol > li > ol > li,
    .frame-type-text ol > li > ol > li > ol > li > ol > li {
        padding-left: calc(0.5em + 8px);
        margin-bottom: 0.5em;
    }
    .frame-type-textmedia ol > li > ol > li > ol > li > ol > li::before,
    .frame-type-textpic ol > li > ol > li > ol > li > ol > li::before,
    .frame-type-text ol > li > ol > li > ol > li > ol > li::before {
        width: auto;
        height: auto;
        font-size: 0.75em;
        background: none;
    }

    /* No ordenadas nivel 1 */
    .frame-type-textmedia ul > li,
    .frame-type-textpic ul > li,
    .frame-type-text ul > li {
        padding-left: calc(1em + 8px);
        margin-bottom: 1em;
    }
    .frame-type-textmedia ul > li::before,
    .frame-type-textpic ul > li::before,
    .frame-type-text ul > li::before {
        width: 1em;
        height: 1em;
    }

    /* No ordenadas nivel 2 */
    .frame-type-textmedia ul > li > ul > li,
    .frame-type-textpic ul > li > ul > li,
    .frame-type-text ul > li > ul > li {
        padding-left: calc(0.8em + 8px);
        margin-bottom: 0.8em;
    }
    .frame-type-textmedia ul > li > ul > li::before,
    .frame-type-textpic ul > li > ul > li::before,
    .frame-type-text ul > li > ul > li::before {
        width: 0.8em;
        height: 0.8em;
    }

    /* No ordenadas nivel 3 */
    .frame-type-textmedia ul > li > ul > li > ul > li,
    .frame-type-textpic ul > li > ul > li > ul > li,
    .frame-type-text ul > li > ul > li > ul > li {
        padding-left: calc(0.66em + 8px);
        margin-bottom: 0.66em;
    }
    .frame-type-textmedia ul > li > ul > li > ul > li::before,
    .frame-type-textpic ul > li > ul > li > ul > li::before,
    .frame-type-text ul > li > ul > li > ul > li::before {
        content: '▶';
        color: var(--Secundario-50);
        font-size: 0.8em;
        line-height: 1;
        width: auto;
        height: auto;
        border: none;
        background: none;
    }
    .frame-type-textmedia ul > li > ul > li > ul > li::after,
    .frame-type-textpic ul > li > ul > li > ul > li::after,
    .frame-type-text ul > li > ul > li > ul > li::after {
        display: none;
    }

    /* No ordenadas nivel 4 */
    .frame-type-textmedia ul > li > ul > li > ul > li > ul > li,
    .frame-type-textpic ul > li > ul > li > ul > li > ul > li,
    .frame-type-text ul > li > ul > li > ul > li > ul > li {
        padding-left: calc(0.5em + 8px);
        margin-bottom: 0.5em;
    }
    .frame-type-textmedia ul > li > ul > li > ul > li > ul > li::before,
    .frame-type-textpic ul > li > ul > li > ul > li > ul > li::before,
    .frame-type-text ul > li > ul > li > ul > li > ul > li::before {
        width: 12px;
        height: 2px;
    }
}

/* =================================================================== */
/* 2. ESTILOS DE TIPOGRAFÍA PRINCIPALES                               */
/* =================================================================== */

/* H1 - Con barra amarilla característica */
h1 {
    font-family: var(--h1-font-family);
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size-large);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    font-style: var(--h1-font-style);
    margin: 0 0 20px 0;
    position: relative;
    display: inline-block
}

/* Barra amarilla para H1 */
h1::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--Alerta-70);
    border-radius: 2px;
}

/* H2 */
h2 {
    font-family: var(--h2-font-family);
    font-weight: var(--h2-font-weight-bold);
    font-size: var(--h2-font-size-large);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    font-style: var(--h2-font-style);
    margin: 0 0 18px 0;
}

h2.semibold { font-weight: var(--h2-font-weight-semibold); }
h2.bold { font-weight: var(--h2-font-weight-bold); }

/* H3 */
h3 {
    font-family: var(--h3-font-family);
    font-weight: var(--h3-font-weight-bold);
    font-size: var(--h3-font-size-large);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    font-style: var(--h3-font-style);
    margin: 0 0 16px 0;
}

h3.semibold { font-weight: var(--h3-font-weight-semibold); }
h3.bold { font-weight: var(--h3-font-weight-bold); }

/* H4 */
h4 {
    font-family: var(--h4-font-family);
    font-weight: var(--h4-font-weight-bold);
    font-size: var(--h4-font-size-large);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    font-style: var(--h4-font-style);
    margin: 0 0 14px 0;
}

h4.bold { font-weight: var(--h4-font-weight-bold); }

/* H5 */
h5 {
    font-family: var(--h5-font-family);
    font-weight: var(--h5-font-weight-bold);
    font-size: var(--h5-font-size-large);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
    font-style: var(--h5-font-style);
    margin: 0 0 12px 0;
}

h5.bold { font-weight: var(--h5-font-weight-bold); }

/* H6 */
h6 {
    font-family: var(--h6-font-family);
    font-weight: var(--h6-font-weight);
    font-size: var(--h6-font-size-large);
    line-height: var(--h6-line-height);
    letter-spacing: var(--h6-letter-spacing);
    font-style: var(--h6-font-style);
    margin: 0 0 10px 0;
}

/* =================================================================== */
/* CLASES DE VARIANTES DE TIPOGRAFÍA PARA HEADERS                     */
/* =================================================================== */

/* H1 Variants */
h1.h1-regular,
.h1-regular {
    font-weight: var(--h1-font-weight) !important;
}

h1.h1-bold,
.h1-bold {
    font-weight: var(--h1-font-weight-bold) !important;
}

h1.h1-black,
.h1-black {
    font-weight: var(--h1-font-weight-black) !important;
}

/* H2 Variants */
h2.h2-regular,
.h2-regular {
    font-weight: var(--h2-font-weight) !important;
}

h2.h2-bold,
.h2-bold {
    font-weight: var(--h2-font-weight-bold) !important;
}

h2.h2-black,
.h2-black {
    font-weight: var(--h2-font-weight-black) !important;
}

/* H3 Variants */
h3.h3-regular,
.h3-regular {
    font-weight: var(--h3-font-weight) !important;
}

h3.h3-bold,
.h3-bold {
    font-weight: var(--h3-font-weight-bold) !important;
}

h3.h3-black,
.h3-black {
    font-weight: var(--h3-font-weight-black) !important;
}

/* H4 Variants */
h4.h4-bold,
.h4-bold {
    font-weight: var(--h4-font-weight-bold) !important;
}

h4.h4-black,
.h4-black {
    font-weight: var(--h4-font-weight-black) !important;
}

/* H5 Variants */
h5.h5-bold,
.h5-bold {
    font-weight: var(--h5-font-weight-bold) !important;
}

h5.h5-black,
.h5-black {
    font-weight: var(--h5-font-weight-black) !important;
}

/* H6 Variant */
h6.h6-black,
.h6-black {
    font-weight: var(--h6-font-weight) !important; /* Ya es 900 */
}

/* Párrafos */
p {
    font-family: var(--paragraph-font-family);
    font-weight: var(--paragraph-font-weight);
    font-size: var(--paragraph-font-size-large);
    line-height: var(--paragraph-line-height);
    letter-spacing: var(--paragraph-letter-spacing);
    font-style: var(--paragraph-font-style);
    margin: 0 0 16px 0;
}

p.paragraph2 {
    font-size: var(--paragraph2-font-size-large); /* 13px */
    font-weight: var(--paragraph2-font-weight); /* 300 - Light */
}

/* Responsive paragraphs */
@media (max-width: 768px) {
    p {
        font-size: var(--paragraph-font-size-medium); /* 14px */
    }
    p.paragraph2 {
        font-size: var(--paragraph2-font-size-small); /* 12px */
    }
}

/* Descripción */
.description {
    font-family: var(--description-font-family);
    font-size: var(--description-font-size-large); /* 18px */
    font-weight: var(--description-font-weight); /* 500 - Medium */
    line-height: var(--paragraph-line-height);
    margin: 0 0 16px 0;
}

@media (max-width: 768px) {
    .description {
        font-size: var(--description-font-size-small);
    }
}

/* Enlaces - excluir componentes Bootstrap y enlaces de noticias */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.accordion-button):not(.mega-l2-link):not(.mega-l4-link):not(.mega-l3-link):not([class*="news-"]):not(.card-link):not(.title-highlight-link) {
    font-family: var(--link-font-family);
    font-weight: var(--link-font-weight-large);
    line-height: var(--link-line-height);
    letter-spacing: var(--link-letter-spacing);
    font-style: var(--link-font-style);
    text-decoration: none;
    transition: var(--transition-hover);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.accordion-button):not([class*="news-"]):not(.card-link):not(.title-highlight-link):hover {
    text-decoration: underline;
}

.frame a[class=""], .frame a:not([class]) {
    color: var(--Primario-40);
}

.frame a[class=""]:hover, .frame a:not([class]):hover {
    color: var(--Primario-40);
}

@media (max-width: 768px) {
    a:not(.btn):not(.nav-link):not(.dropdown-item):not(.accordion-button):not([class*="news-"]):not(.card-link):not(.title-highlight-link) {
        font-size: var(--link-font-size-small); /* 14px */
        font-weight: var(--link-font-weight-small); /* 500 - Medium */
    }
}

/* Captions y texto pequeño */
.caption,
small,
.small {
    font-family: "Verdana" !important; /* Forzar Verdana, sobrescribir Bootstrap */
    font-weight: var(--caption-font-weight);
    font-size: 11px !important; /* Sobrescribir Bootstrap (14px por defecto) */
    line-height: var(--caption-line-height);
    letter-spacing: var(--caption-letter-spacing);
    font-style: var(--caption-font-style);
    color: var(--Neutral-50);
}

.border-primary {
    --bs-border-opacity: 1;
    border-color: var(--Alerta-70) !important;
}

.frame-background-primary
{
    --frame-color: var(--Neutral-100);
    --frame-background: var(--Primario-40);
    --frame-link-color: var(--Neutral-100);
    --frame-link-hover-color: var(--Neutral-100);
}

/* =================================================================== */
/* FRAME BACKGROUND QUATERNARY                                          */
/* Fondo complementario con borde superior naranja para secciones       */
/* de información destacada y contenido RTE con tipografía Verdana      */
/* =================================================================== */
.frame-background-quaternary {
    --frame-color: var(--Neutral-20);
    --frame-background: var(--Complementario-98);
    --frame-link-color: var(--Primario-50);
    --frame-link-hover-color: var(--Primario-50);

    background-color: var(--Complementario-98);
    border-top: 2px solid var(--Complementario-60);
    padding: 16px;
}

/* Encabezados dentro del frame quaternary */
.frame-background-quaternary h1,
.frame-background-quaternary h2,
.frame-background-quaternary h3,
.frame-background-quaternary h4,
.frame-background-quaternary h5,
.frame-background-quaternary h6 {
    color: var(--Neutral-20);
}

/* Tipografía RTE dentro del frame quaternary */
.frame-background-quaternary .ce-bodytext,
.frame-background-quaternary .ce-bodytext p,
.frame-background-quaternary p {
    font-family: "Verdana", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: var(--Neutral-20);
}

/* Enlaces dentro del frame quaternary */
.frame-background-quaternary a,
.frame-background-quaternary .ce-bodytext a {
    color: var(--Primario-50);
    text-decoration: underline;
    text-decoration-color: var(--Primario-50);
}

/* Estados hover y focus para enlaces */
.frame-background-quaternary a:hover,
.frame-background-quaternary a:focus {
    color: var(--Primario-50);
    text-decoration: underline;
    text-decoration-color: var(--Primario-50);
    opacity: 0.85;
}

/* Menu/Navbar - aplicar a enlaces de navegación */
.nav-link,
.menu {
    font-family: var(--menu-font-family);
    font-size: var(--menu-font-size) !important; /* 14px Large */
    font-weight: var(--menu-font-weight-large) !important; /* 500 - Medium */
}

@media (max-width: 768px) {
    .nav-link,
    .menu {
        font-size: var(--menu-font-size-small) !important; /* 16px Small */
        font-weight: var(--menu-font-weight-small) !important; /* 600 - Semibold */
    }
}

/* Searchbar - búsqueda del sitio */
.searchbar,
.search-input,
input[type="search"] {
    font-family: var(--searchbar-font-family);
    font-size: var(--searchbar-font-size); /* 14px Large */
    font-weight: var(--searchbar-font-weight); /* 400 - Regular */
    line-height: var(--searchbar-line-height); /* 1.4 */
}

@media (max-width: 768px) {
    .searchbar,
    .search-input,
    input[type="search"] {
        font-size: var(--searchbar-font-size-small); /* 13px Small */
    }
}

/* Labels */
label {
    font-family: var(--label-font-family);
    font-size: var(--label-font-size); /* 13px Large */
    font-weight: var(--label-font-weight); /* 300 - Light */
    line-height: var(--label-line-height); /* 1.4 */
}

@media (max-width: 768px) {
    label {
        font-size: var(--label-font-size-small); /* 12px Small */
    }
}

/* Botones - Button 1 (Principal) */
.btn,
.button1 {
    font-family: var(--nunito-font) !important;
    font-size: var(--button1-font-size) !important; /* 14px Large */
    font-weight: var(--button1-font-weight) !important; /* 700 - Bold */
}

/* Botones - Button 2 (Secundario) */
.btn-secondary,
.button2 {
    font-family: var(--nunito-font) !important;
    font-size: var(--button2-font-size) !important; /* 12px Large */
    font-weight: var(--button2-font-weight) !important; /* 900 - Black */
}

/* Responsive buttons */
@media (max-width: 768px) {
    .btn,
    .button1 {
        font-size: var(--button1-font-size-small) !important; /* 12px Small */
    }

    .btn-secondary,
    .button2 {
        font-size: var(--button2-font-size-small) !important; /* 11px Small */
        font-weight: var(--button2-font-weight-small) !important; /* 800 - Extrabold */
    }
}


/* =================================================================== */
/* 3. RESPONSIVE DESIGN                                                */
/* =================================================================== */

/* Tablet y pantallas medianas */
@media (max-width: 768px) {
    h1 {
        font-size: var(--h1-font-size-medium);
        padding-bottom: 15px;
    }

    h1::after {
        width: 100%;
        height: 3px;
    }

    h2 {
        font-size: var(--h2-font-size-medium);
    }

    h3 {
        font-size: var(--h3-font-size-medium);
    }

    h4 {
        font-size: var(--h4-font-size-medium);
    }

    h5 {
        font-size: var(--h5-font-size-medium);
    }

    h6 {
        font-size: var(--h6-font-size-medium);
    }

    p {
        font-size: var(--paragraph-font-size-medium);
    }
}

/* Móviles */
@media (max-width: 480px) {
    h1 {
        font-size: 28px;
        padding-bottom: 12px;
    }

    h1::after {
        width: 40px;
        height: 3px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }

    h6 {
        font-size: 14px;
    }

    p {
        font-size: var(--paragraph-font-size-small);
    }
}

/* =================================================================== */
/* 4. CLASES UTILITARIAS                                              */
/* =================================================================== */

/* Clase para texto en negrilla */
.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 900;
}

.font-semibold {
    font-weight: 600;
}

.font-regular {
    font-weight: 400;
}

/* Clases de colores de texto */
.text-primary {
    color: var(--Primario-30) !important;
}

.text-dark {
    color: var(--Secundario-30);
}

.text-accent {
    color: var(--Alerta-70);
}

/* Clase especial para destacar H1 sin la barra (si se necesita) */
.h1-no-bar::after {
    display: none;
}

html {
    margin: 0;
    padding: 0;
}

/* Estilos para la barra superior (topbar) */
.topbar {
    background-color: var(--Header-Gov);
    height: 50px;
    max-height: 50px;
    overflow: hidden;
    color: var(--Neutral-100);
}

/* Tamaño de íconos de 16px */
.material-symbols-outlined.icon-16 {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;
}

/* Tamaño de fuente del selector de idioma */
.language-current {
    font-size: 11px;
    line-height: 1;
}

.topbar .container-fluid {
    /* Bootstrap grid (col-xl-10) maneja el ancho - no se necesita max-width */
}

/* Logo del gobierno */
.logo-gov {
    width: 127px;
    height: 29px;
}

/* Botón de idioma */
.language-btn {
    background: none;
    border: none;
    color: var(--Neutral-100);
    font-family: var(--nunito-font);
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-btn:hover {
    color: var(--Neutral-100);
    opacity: 0.9;
}

.language-icon,
.expand-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}

.language-icon {
    background-image: url('https://c.animaapp.com/y62ZpEyr/img/language.svg');
}

.expand-icon {
    background-image: url('https://c.animaapp.com/y62ZpEyr/img/expand-more.svg');
}

/* Sección principal del header */
.main-header {
    background-color: var(--Neutral-100);
    padding: 16px 0;
}

.main-header .container-fluid {
    /* Bootstrap grid (col-xl-10) maneja el ancho - no se necesita max-width */
}

/* Logo de Migración Colombia */
.logo-migcol {
    width: 143px;
    height: 48px;
}

/* Contenedor del buscador */
.search-container {
    max-width: 340px;
    border: 0.7px solid var(--Primario-30);
    border-radius: 20px;
    padding: 2px 2px 2px 16px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Input del buscador */
.search-input {
    border: none;
    background: transparent;
    flex: 1;
    font-family: var(--nunito-font);
    font-weight: 400;
    font-size: 15px;
    color: var(--Neutral-0);
    outline: none;
}

.search-input::placeholder {
    color: var(--Neutral-0);
    opacity: 1;
}

/* Botón de búsqueda */
.search-btn {
    width: 26px;
    height: 26px;
    background-color: var(--Primario-30);
    border-radius: 13px;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
}

.search-icon {
    position: absolute;
    width: 22px;
    height: 22px;
    top: 2px;
    left: 2px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Botón de menú hamburguesa (solo visible en móvil) */
.menu-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.menu-icon {
    width: 34px;
    height: 34px;
    background-image: url('https://c.animaapp.com/VeqKVsOy/img/menu-1.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Clase para ocultar elementos visualmente pero mantener accesibilidad */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Ajustes responsivos específicos */
@media (max-width: 767.98px) {
    /* En móvil, el buscador toma todo el ancho disponible */
    .search-container {
        max-width: none;
        width: 100%;
    }

    /* Ajuste del tamaño de fuente del botón de idioma en móvil */
    .language-btn {
        font-size: 11px;
    }

    /* Ajuste del input de búsqueda en móvil */
    .search-input {
        font-size: 14px;
    }
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 575.98px) {
    .main-header .row > * {
        margin-bottom: 8px;
    }

    .main-header .row > *:last-child {
        margin-bottom: 0;
    }
}

/* =================================================================== */
/* ESTRUCTURA PRINCIPAL DEL FOOTER                                     */
/* =================================================================== */

/* Contenedor de fondo con el color azul oscuro */
.footer-background {
    background-color: var(--Secundario-30);
    position: relative;
    min-height: 200px;
    width: 100%;
    padding: 0;
    /* Agregar margen superior para separar el footer del contenido principal */
    /* Se suma 60px al margen porque la tarjeta del footer sube -60px */
    margin: calc(3rem + 60px) 0 0;
}

/* Tarjeta principal del contenido del footer */
.footer-content-card {
    background-color: var(--Neutral-100);
    border-radius: var(--border-radius-footer) var(--border-radius-footer) 0 0;
    border: 2px solid var(--Secundario-30);
    border-bottom: none;
    margin: -60px 0 0;
    padding: var(--footer-padding-y) 0 32px;
    /* Use the secondary palette (dark blue) for the footer shadow */
    box-shadow: 0 -4px 6px rgba(var(--Secundario-30-rgb), 0.1);
    position: relative;
    z-index: 2;
}

/* =================================================================== */
/* TIPOGRAFÍA Y TÍTULOS                                               */
/* =================================================================== */

/* Título principal del footer (h4) - 800 ExtraBold, 22px */
.footer-title {
    font-family: var(--nunito-font);
    font-weight: 800;
    font-size: 22px;
    line-height: 24px;
    color: var(--Primario-40);
    margin-bottom: 0;
    letter-spacing: 0;
}

/* Títulos de sección (h5) - 900 Black, 18px */
.footer-section-title {
    font-family: var(--nunito-font);
    font-weight: 900;
    font-size: 18px;
    line-height: 24px;
    color: var(--Primario-40);
    margin-bottom: 12px;
    letter-spacing: 0;
}

/* Subtítulos de sección (h6) - 900 Black, 15px */
.footer-subsection-title {
    font-family: var(--nunito-font);
    font-weight: 900;
    font-size: 15px;
    line-height: 20px;
    color: var(--Primario-40);
    margin-bottom: 10px;
    letter-spacing: 0;
}

/* =================================================================== */
/* INFORMACIÓN DE CONTACTO                                             */
/* =================================================================== */

/* Estilos para la información de contacto */
.contact-info {
    font-family: "Verdana";
    font-size: 13px;
    line-height: 1.3;
    color: var(--Neutral-0);
    margin-bottom: 8px;
}

/* Etiquetas en negrita */
.contact-label {
    font-weight: 700;
}

/* Valores de contacto */
.contact-value {
    font-weight: 400;
}

/* =================================================================== */
/* LOGO Y ELEMENTOS GRÁFICOS                                          */
/* =================================================================== */

/* Logo principal del footer - alineado a la derecha */
.footer-logo {
    width: 160px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* =================================================================== */
/* ENLACES Y NAVEGACIÓN                                               */
/* =================================================================== */

/* Estilos base para todos los enlaces del footer */
.footer-link {
    font-family: var(--nunito-font);
    font-weight: 700;
    font-size: 15px;
    color: var(--Primario-30);
    text-decoration: underline;
    line-height: 1.2;
    letter-spacing: 0;
    transition: opacity var(--transition-hover);
}

/* Estado hover de los enlaces */
.footer-link:hover {
    color: var(--Primario-30);
    opacity: 0.8;
    text-decoration: underline;
}

/* Estado focus para accesibilidad */
.footer-link:focus {
    color: var(--Primario-30);
}

/* =================================================================== */
/* REDES SOCIALES                                                     */
/* =================================================================== */

/* Contenedor de cada enlace Social */
.social-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    text-decoration: none;
    transition: transform var(--transition-hover);
}

/* Efecto hover en enlaces sociales */
.social-link:hover {
    transform: translateX(4px);
    text-decoration: none;
}

/* Iconos circulares de redes sociales */
.social-icon {
    width: 48px;
    height: 48px;
    background-color: var(--Primario-30);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    transition: transform var(--transition-hover);
    flex-shrink: 0;
}

/* Efecto hover en iconos sociales */
.social-icon:hover {
    transform: scale(1.05);
}

/* Imágenes dentro de los iconos sociales */
.social-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

/* Texto de los enlaces sociales */
.social-text {
    font-family: var(--nunito-font);
    font-weight: 700;
    font-size: 15px;
    color: var(--Primario-30);
    text-decoration: underline;
    line-height: 1.2;
    letter-spacing: 0;
}

/* =================================================================== */
/* BARRA INFERIOR DEL GOBIERNO                                        */
/* =================================================================== */

/* Contenedor de la barra inferior */
.footer-bottom {
    background-color: var(--Primario-30);
    min-height: 80px;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevenir desbordamiento horizontal de imágenes grandes */
}

/* Contenedor interno de la barra inferior */
.footer-bottom .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0;
    width: 100%;
}

/* Ajustes específicos para alineación con footer-content-card */
.footer-bottom .d-flex {
    padding-left: var(--footer-padding-x);
}

/* Imágenes en la barra inferior */
.footer-bottom img {
    max-height: 30px;
    max-width: 100%; /* Prevenir desbordamiento en pantallas pequeñas */
    width: auto;
    height: auto;
    object-fit: contain;
}

/* =================================================================== */
/* UTILIDADES Y ACCESIBILIDAD                                         */
/* =================================================================== */

/* Clase para contenido solo para lectores de pantalla */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =================================================================== */
/* RESPONSIVE DESIGN - MOBILE FIRST                                   */
/* =================================================================== */

/* Tablet Portrait - 768px y superior */
@media (min-width: 768px) {
    .footer-content-card {
        padding: var(--footer-padding-y) var(--footer-padding-x) 32px;
    }
}

/* Mobile - hasta 767px */
@media (max-width: 767.98px) {
    /* Ajustes del contenedor principal */
    .footer-content-card {
        margin: 0;
        padding: 20px 16px;
        border-radius: 8px 8px 0 0;
    }

    /* Ajuste de la altura del fondo en móvil */
    .footer-background {
        min-height: 200px;
    }

    /* Ajustes específicos del footer-bottom en móvil */
    .footer-bottom .d-flex {
        padding-left: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-bottom .me-4 {
        margin-right: 0 !important;
        margin-bottom: 8px;
    }

    /* Título principal centrado en móvil */
    .footer-title {
        font-size: 20px;
        text-align: center;
        margin-bottom: 16px;
    }

    /* Logo centrado en móvil */
    .footer-logo {
        display: block;
        margin: 0 auto 16px;
        width: 120px;
        height: auto;
    }

    /* Enlaces sociales en móvil */
    .social-link {
        justify-content: flex-start;
        width: 100%;
        margin-bottom: 12px;
    }

    /* Ajuste de títulos de sección en móvil */
    .footer-section-title {
        font-size: 18px;
        text-align: center;
        margin-bottom: 16px;
    }

    .footer-subsection-title {
        font-size: 16px;
        text-align: center;
        margin-bottom: 12px;
    }

    /* Información de contacto en móvil */
    .contact-info {
        text-align: center;
        margin-bottom: 12px;
    }

    /* Enlaces del footer en móvil */
    .footer-link {
        display: block;
        text-align: center;
        margin-bottom: 8px;
    }
}

/* Mobile Small - hasta 575px */
@media (max-width: 575.98px) {
    .footer-content-card {
        margin: 0;
        padding: 16px 12px;
    }

    .footer-title {
        font-size: 18px;
        line-height: 22px;
    }

    .footer-section-title {
        font-size: 16px;
    }

    .footer-subsection-title {
        font-size: 15px;
    }

    .contact-info {
        font-size: 12px;
    }

    .social-icon {
        width: 40px;
        height: 40px;
    }

    .social-icon img {
        width: 20px;
        height: 20px;
    }

    .social-text {
        font-size: 14px;
    }
}

/* =================================================================== */
/* DARK MODE SUPPORT (OPCIONAL)                                       */
/* =================================================================== */

/* Soporte básico para modo oscuro del sistema */
@media (prefers-color-scheme: dark) {
    .footer-content-card {
        background-color: var(--Neutral-100);
        /* Mantenemos el fondo blanco incluso en modo oscuro para conservar la identidad */
    }
}

/* =================================================================== */
/* PRINT STYLES                                                       */
/* =================================================================== */

/* Estilos para impresión */
@media print {
    .footer-background {
        background-color: var(--Neutral-100) !important;
        color: var(--Neutral-0) !important;
    }

    .footer-content-card {
        border: 1px solid var(--Neutral-0) !important;
        box-shadow: none !important;
    }

    .footer-link,
    .social-text {
        color: var(--Neutral-0) !important;
        text-decoration: underline !important;
    }

    .social-icon {
        background-color: var(--Neutral-0) !important;
    }

    .footer-bottom {
        background-color: var(--Neutral-100) !important;
        border-top: 2px solid var(--Neutral-0) !important;
    }
}

/* =================================================================== */
/* ANIMATION IMPROVEMENTS                                              */
/* =================================================================== */

/* Mejoras sutiles de animación para mejor UX */
.footer-content-card {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación hover suave para iconos */
.social-icon {
    position: relative;
    overflow: hidden;
}

.social-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--Neutral-100-rgb), 0.1), transparent);
    transition: left 0.5s;
}

.social-icon:hover::before {
    left: 100%;
}

/* =================================================================== */
/* HIGH CONTRAST MODE SUPPORT                                         */
/* =================================================================== */

/* Soporte para modo de alto contraste */
@media (prefers-contrast: high) {
    .footer-link,
    .social-text {
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
    }

    .social-icon {
        border: 2px solid var(--Primario-30) !important;
    }

    .footer-content-card {
        border-width: 3px !important;
    }
}

/* =================================================================== */
/* REDUCED MOTION SUPPORT                                             */
/* =================================================================== */

/* Respeto por preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .footer-content-card {
        animation: none !important;
    }
}

/* =================================================================== */
/* HORA LEGAL - Estilos de tipografía para el grid de tabla            */
/* =================================================================== */

/* Etiqueta "Hora Legal de Colombia" */
.hora-legal-label {
    font-family: var(--nunito-font);
    font-weight: 700;
    font-size: 11px;
    line-height: 110%;
    letter-spacing: 0;
    text-align: center;
    color: var(--Neutral-50);
}

/* Hora mostrada - 800 ExtraBold, 28px */
.hora-legal-time {
    font-size: 28px;
    font-weight: 800;
    color: var(--Secundario-30);
    font-family: 'Nunito Sans', monospace;
    letter-spacing: 1px;
    line-height: 110%;
    text-align: center;
}

/* Enlace al INM */
.hora-legal-link {
    display: inline-block;
    font-family: var(--nunito-font);
    font-weight: 900;
    font-size: 10px;
    line-height: 110%;
    letter-spacing: 0;
    color: var(--Primario-40);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hora-legal-link:hover {
    color: var(--Secundario-30);
    text-decoration: underline;
}

/* Responsive: pantallas muy pequeñas */
@media (max-width: 359px) {
    .hora-legal-time {
        font-size: 20px;
    }
}

/* =================================================================== */
/* Contenedor de horarios y hora legal - Grid de tabla                 */
/* =================================================================== */

#footer-attention-hours-and-hour {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    gap: 4px 0;
    align-items: center;
    justify-content: start;
}

/* Columna 1: Link "Todos los horarios" - abarca 2 filas */
#footer-attention-hours-and-hour .footer-hours-link {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    padding-right: 32px;
}

/* Columna 2, Fila 1: Label "Hora Legal" */
#footer-attention-hours-and-hour .hora-legal-label {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding-right: 8px;
}

/* Columna 2, Fila 2: Link "Instituto INM" */
#footer-attention-hours-and-hour .hora-legal-link {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    padding-right: 8px;
}

/* Columna 3: Hora - abarca 2 filas */
#footer-attention-hours-and-hour .hora-legal-time {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
}

/* Responsive: móvil - apilar verticalmente */
@media (max-width: 767.98px) {
    #footer-attention-hours-and-hour {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 12px;
        text-align: center;
    }

    #footer-attention-hours-and-hour .footer-hours-link,
    #footer-attention-hours-and-hour .hora-legal-label,
    #footer-attention-hours-and-hour .hora-legal-link,
    #footer-attention-hours-and-hour .hora-legal-time {
        grid-column: 1;
        grid-row: auto;
        padding-right: 0;
    }
}

/* =================================================================== */
/* FOOTER NAV LINKS - Enlaces del pie con tipografía específica        */
/* =================================================================== */

.footer-nav-link {
    font-family: var(--nunito-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: 0;
    color: var(--Primario-40);
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-nav-link:hover {
    color: var(--Secundario-30);
    opacity: 0.8;
}

/* Estilo específico para "Todos los horarios" en el grid */
#footer-attention-hours-and-hour .footer-hours-link {
    font-family: var(--nunito-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: 0;
    color: var(--Primario-40);
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

#footer-attention-hours-and-hour .footer-hours-link:hover {
    color: var(--Secundario-30);
    opacity: 0.8;
}

.indexed-search-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.search-container {
    position: relative;
}

.search-input-group {
    display: flex;
    background: var(--Neutral-100);
    border: 2px solid var(--Neutral-90);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(var(--Neutral-0-rgb), 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-input-group:focus-within {
    border-color: var(--Complementario-60);
    transform: translateY(-1px);
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 16px 20px;
    font-size: 16px;
    background: transparent;
    color: var(--Neutral-20);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.search-input::placeholder {
    color: var(--Neutral-60);
    opacity: 1;
}

.search-input:focus::placeholder {
    color: var(--Neutral-80);
}

.search-button {
    background: var(--Primario-50);
    border: none;
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 56px;
    position: relative;
    overflow: hidden;
}

.search-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(var(--Neutral-100-rgb), 0.2);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-50%, -50%);
}

.search-button:hover {
    background: var(--Primario-50);
    transform: scale(1.02);
}

.search-button:hover::before {
    width: 120px;
    height: 120px;
}

.search-button:active {
    transform: scale(0.98);
}

.search-icon {
    color: var(--Neutral-100);
    font-size: 24px;
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
    position: relative;
    z-index: 1;
}

/* Responsive design */
@media (max-width: 768px) {
    .indexed-search-form {
        max-width: 100%;
        padding: 0 16px;
    }

    .search-input {
        padding: 14px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .search-button {
        padding: 14px 16px;
        min-width: 50px;
    }

    .search-icon {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .search-input {
        padding: 12px 14px;
    }

    .search-button {
        padding: 12px 14px;
        min-width: 46px;
    }

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    .search-input-group {
        border-width: 3px;
    }

    .search-input-group:focus-within {
        border-color: var(--Neutral-0);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .search-input-group,
    .search-button,
    .search-button::before {
        transition: none;
    }

    .search-button:hover {
        transform: none;
    }
}

.indexed-search-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.search-container {
    position: relative;
}

.search-input-group {
    display: flex;
    background: var(--Neutral-100);
    border: 2px solid var(--Neutral-90);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(var(--Neutral-0-rgb), 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-input-group:focus-within {
    border-color: var(--Complementario-60);
    transform: translateY(-1px);
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 16px 20px;
    font-size: 16px;
    background: transparent;
    color: var(--Neutral-20);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.search-input::placeholder {
    color: var(--Neutral-60);
    opacity: 1;
}

.search-input:focus::placeholder {
    color: var(--Neutral-80);
}

.search-button {
    background: var(--Primario-50);
    border: none;
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 56px;
    position: relative;
    overflow: hidden;
}

.search-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(var(--Neutral-100-rgb), 0.2);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-50%, -50%);
}

.search-button:hover {
    background: var(--Primario-50);
    transform: scale(1.02);
}

.search-button:hover::before {
    width: 120px;
    height: 120px;
}

.search-button:active {
    transform: scale(0.98);
}

.search-icon {
    color: var(--Neutral-100);
    font-size: 24px;
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
    position: relative;
    z-index: 1;
}

/* Responsive design */
@media (max-width: 768px) {
    .indexed-search-form {
        max-width: 100%;
        padding: 0 16px;
    }

    .search-input {
        padding: 14px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .search-button {
        padding: 14px 16px;
        min-width: 50px;
    }

    .search-icon {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .search-input {
        padding: 12px 14px;
    }

    .search-button {
        padding: 12px 14px;
        min-width: 46px;
    }

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    .search-input-group {
        border-width: 3px;
    }

    .search-input-group:focus-within {
        border-color: var(--Neutral-0);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .search-input-group,
    .search-button,
    .search-button::before {
        transition: none;
    }

    .search-button:hover {
        transform: none;
    }
}

/* Language switcher */
.icon-24 { font-size: 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }

/* Toggle: texto e iconos en blanco, fondo transparente para integrarse con el header */
.lang-toggle { color: var(--Neutral-100); background: transparent !important; }

/* Opcional: resalta el idioma activo en el menú */
.dropdown-item.active { font-weight: 600; }

/* Permitir que en el home el primer elemento de contenido se posicione exactamente debajo del header */
body.backendlayout-homepage #main-content .frame:first-child {
    padding-top: 0;
}

/* =============================================
   Estilos para Carrusel de Ancho Completo
   ============================================= */

/* 1. Hacer el contenedor del carrusel de ancho completo */
/* Se apunta al ID específico del elemento de contenido (#c3) */
body.backendlayout-homepage #main-content .frame:first-child .frame-type-carousel {
    width: 100vw; /* Ancho completo de la ventana */
    max-width: 100%; /* Evita desbordamientos */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Ajuste para que el contenido interno no tenga márgenes extraños */
body.backendlayout-homepage #main-content .frame:first-child .frame-type-carousel .frame-inner {
    padding: 0;
    margin: 0;
}

/* =============================================
   Estilos para Flechas de Navegación (Material Symbols)
   ============================================= */

/* 2. Ocultar el ícono SVG por defecto de Bootstrap */
body.backendlayout-homepage #main-content .frame:first-child .carousel-control-prev-icon,
body.backendlayout-homepage #main-content .frame:first-child .carousel-control-next-icon {
    background-image: none; /* Quitamos la flecha SVG original */
    width: 60px;  /* Aumentamos el área del contenedor del ícono */
    height: 60px;

    /* Centramos el nuevo ícono que pondremos con ::before */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. Crear el nuevo ícono usando el pseudo-elemento ::before */
body.backendlayout-homepage #main-content .frame:first-child .carousel-control-prev-icon::before,
body.backendlayout-homepage #main-content .frame:first-child .carousel-control-next-icon::before {
    font-family: 'Material Symbols Local'; /* Usamos la fuente de iconos */
    font-weight: normal;
    font-style: normal;
    font-size: 48px;  /* Tamaño del ícono */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    color: var(--Neutral-100); /* Color del ícono */
    padding: 6px;
    transition: background-color 0.3s ease;
}

/* 4. Asignar el ícono específico para cada flecha */
body.backendlayout-homepage #main-content .frame:first-child .carousel-control-prev-icon::before {
    content: "keyboard_arrow_left";
}

body.backendlayout-homepage #main-content .frame:first-child .carousel-control-next-icon::before {
    content: "keyboard_arrow_right";
}

/* Estilos simplificados para Quote con bordes redondeados */
.frame-type-quote {
    /* Bordes redondeados */
    border-radius: 12px;

    /* Espaciado compacto pero legible */
    padding: 1rem 1.25rem;
    margin: 0;

    /* Eliminar estilos por defecto */
    border: none;
    box-shadow: none;
}

/* Eliminar márgenes innecesarios del texto */
.frame-type-quote p {
    margin-bottom: 0.5rem;
}

.frame-type-quote p:last-child {
    margin-bottom: 0;
}

/* Quote especial cuando el background_color_class = secondary */
.frame-type-quote.frame-background-secondary {
    /* Fondo y color de texto */
    background-color: var(--Primario-50);
    color: var(--Neutral-100);

    /* Redondeado y espaciado como en el diseño */
    border-radius: 24px;
    padding: 0.875rem 1.5rem;

    /* Separación entre quotes apilados */
    margin: 0 0 1rem 0;

    /* Alinear con variables de frame (por si TYPO3 las usa) */
    --frame-background: var(--Primario-50);
    --frame-color: var(--Neutral-100);
    --frame-link-color: var(--Neutral-100);
    --frame-link-hover-color: var(--Neutral-100);
}

.frame-type-quote.frame-background-secondary blockquote {
    margin: 0; /* Sin margen extra del blockquote */
}

.frame-type-quote.frame-background-secondary blockquote footer {
    margin: 0;
}

/* Link dentro del footer: texto + icono a la derecha */
.frame-type-quote.frame-background-secondary blockquote footer a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    font-family: var(--nunito-font);
    font-weight: var(--button2-font-weight);   /* Button 2 */
    font-size: var(--button2-font-size);       /* Button 2 */
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--Neutral-100);
    text-decoration: none;
}

/* Icono Material a la derecha (open in new) */
.frame-type-quote.frame-background-secondary blockquote footer a::after {
    content: "open_in_new";
    font-family: "Material Symbols Local";
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1;
    margin-left: 0.5rem;
}

/* Hover del enlace dentro del quote */
.frame-type-quote.frame-background-secondary blockquote footer a:hover {
    text-decoration: underline;
}

/* Ocultar <p> vacíos dentro del blockquote para evitar espacios raros */
.frame-type-quote.frame-background-secondary blockquote > p:empty {
    display: none;
}

.frame-type-quote.frame-background-secondary blockquote footer::before {
    content: none !important;
    display: none !important;
    margin-right: 0 !important;
}

/* Ajuste responsive del padding en móvil */
@media (max-width: 768px) {
    .frame-type-quote {
        padding: 0.75rem 1rem;
        border-radius: 8px;
    }

    .frame-type-quote.frame-background-secondary {
        padding: 0.75rem 1.25rem;
        border-radius: 16px;
    }
}

.primary-color-text {
    color: var(--Primario-40);
}

.card-title-secondary {
    color: var(--Secundario-30);
}

.btn-outline-primary {
    background-color: var(--Primario-40)!important;
    color: var(--Neutral-100);
}

/* ============================================
   Breadcrumb Styles - Migración Colombia (optimizado)
   ============================================ */

/* Contenedor externo */
.breadcrumb-container {
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    animation: fadeIn 0.3s ease-out;
}

/* Lista de breadcrumb */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.5;
    font-size: 0.875rem;
    background: transparent;
}

/* Elementos individuales: span, a, etc.  */
.breadcrumb > * {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0 2px;
    white-space: nowrap;
}

/* Etiqueta inicial "Está en:" */
.breadcrumb-label {
    color: var(--Secundario-30);
    font-weight: bold;
    margin-right: 0.5rem;
}

/* Base para iconos Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    color: currentColor;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
}

/* Icono de inicio */
.material-symbols-outlined.home-icon {
    color: var(--Primario-50);
    margin-left: 0; /* elimina margen izquierdo extra */
}

/* Icono separador */
.material-symbols-outlined.arrow-icon {
    color: var(--Primario-50);
}

/* Enlaces del breadcrumb */
.breadcrumb-link {
    color: var(--Neutral-20);
    font-weight: normal;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: var(--Primario-50);
    text-decoration: underline;
    outline: 2px solid var(--Primario-50);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Página actual (no enlace) */
.breadcrumb-current {
    color: var(--Neutral-20);
    font-weight: bold;
    font-style: italic;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.8125rem;
        gap: 0.25rem;
    }
    .material-symbols-outlined {
        font-size: 1rem;
    }
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
    .breadcrumb-label,
    .breadcrumb-link,
    .breadcrumb-current {
        color: var(--Neutral-20);
    }
    .material-symbols-outlined.home-icon,
    .material-symbols-outlined.arrow-icon {
        color: var(--Primario-50);
    }
}

/* Animación sutil al cargar */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =============================================================================
   FUNCIONARIO PROFILE CARD - Layout 1
   ============================================================================= */

/* Card container */
.funcionario-profile-card {
    border-radius: 1.25rem;
    border: 1px solid var(--Neutral-90, #E5E5E5);
    background: var(--Neutral-100, #FFFFFF);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* Card body with responsive padding */
.funcionario-profile-card__body {
    padding: clamp(1.5rem, 4vw, 2rem);
}

/* Image column - auto width on desktop */
.funcionario-profile-card__image-col {
    display: flex;
    justify-content: center;
}

/* Image wrapper - square container with overflow effect */
.funcionario-profile-card__image-wrapper {
    width: 240px;
    height: 240px;
    border-radius: 0.875rem;
    overflow: hidden;
    flex-shrink: 0;
}

/* Image styling */
.funcionario-profile-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dummy image styling - for logo placeholder (300x100 aspect ratio) */
.funcionario-profile-card__image--dummy {
    object-fit: contain;
    padding: 1.5rem;
    background-color: var(--Neutral-90, #f8f9fa);
}

/* Information column - text aligned to left */
.funcionario-profile-card__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* Staff member name - aligned left */
.funcionario-profile-card__name {
    font-family: var(--h4-font-family);
    font-weight: var(--h4-font-weight-bold);
    font-size: var(--h4-font-size-medium);
    color: var(--Neutral-20);
    margin-bottom: 0.625rem;
    line-height: 1.3;
    text-align: left;
}

/* Position/title - aligned left */
.funcionario-profile-card__position {
    font-family: var(--description-font-family);
    font-size: var(--description-font-size);
    font-weight: var(--description-font-weight);
    color: var(--Neutral-60);
    margin-bottom: 1.5rem;
    line-height: 1.4;
    text-align: left;
}

/* Contact list */
.funcionario-profile-card__contact-list {
    margin-bottom: 0;
}

/* Contact item */
.funcionario-profile-card__contact-item {
    margin-bottom: 0.75rem;
}

.funcionario-profile-card__contact-item:last-child {
    margin-bottom: 0;
}

/* Contact icon */
.funcionario-profile-card__contact-icon {
    font-size: 1.375rem;
    color: var(--Neutral-60);
    flex-shrink: 0;
    margin-right: 0.5rem;
}

/* Contact text */
.funcionario-profile-card__contact-text {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Neutral-30);
    line-height: 1.5;
}

.funcionario-profile-card__contact-text a {
    color: inherit;
    text-decoration: none;
}

.funcionario-profile-card__contact-text a:hover,
.funcionario-profile-card__contact-text a:focus {
    text-decoration: underline;
}

/* Desktop layout - image with vertical overflow effect */
@media (min-width: 768px) {
    .funcionario-profile-card__image-col {
        align-self: center;
        position: relative;
    }

    /* Image extends beyond text content vertically */
    .funcionario-profile-card__image-wrapper {
        margin-top: -2rem;
        margin-bottom: -2rem;
    }
}

/* Mobile responsive */
@media (max-width: 767px) {
    .funcionario-profile-card__image-wrapper {
        margin: 0 auto;
        max-width: 240px;
    }

    .funcionario-profile-card__name,
    .funcionario-profile-card__position {
        text-align: center;
    }

    .funcionario-profile-card__contact-list {
        text-align: left;
    }
}

/* ========================================================================
   Layout 0: Tarjeta solo texto - siempre 100% del contenedor padre
   El Grid de TYPO3 (row-cols-*) controla las columnas, la tarjeta solo
   necesita llenar su celda.
   ======================================================================== */

.funcionario-card--text-only {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .funcionario-card--text-only {
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 992px) {
    .funcionario-card--text-only {
        margin-bottom: 2rem;
    }
}

/* ========================================================================
   Cards dentro del grid
   ======================================================================== */

/* Asegurar que el card ocupe todo el ancho y alto de su columna */
.funcionario-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Layout 1 (con imagen) - asegurar que funcione en grid */
.funcionario-profile-card {
    width: 100%;
    height: 100%;
}

/* ========================================================================
   Mejoras generales para rows
   ======================================================================== */

/* Asegurar que los rows de Bootstrap tengan gutters consistentes */
.row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0rem;
}

@media (min-width: 768px) {
    .row.g-3 {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0.5rem;
    }
}

@media (min-width: 992px) {
    .row.g-3 {
        --bs-gutter-x: 2rem;
        --bs-gutter-y: 1rem;
    }
}

/* =================================================================== */
/* ESTILOS PARA ACORDEONES (container_elements + Bootstrap 5)         */
/* =================================================================== */

/*
 * Personalización visual de acordeones generados por la extensión
 * buepro/typo3-container-elements para TYPO3 CMS 13.4
 *
 * Implementa:
 * - Colores corporativos del sitio (variables CSS --Primario-*, --Neutral-*)
 * - Iconos Material Symbols Outlined (arrow_drop_down / arrow_drop_up)
 * - Estados colapsado y expandido diferenciados
 * - Responsividad y accesibilidad completa
 */

/* ------------------------------------------------------------------- */
/* 1. ESTILOS BASE DEL ACORDEÓN                                        */
/* ------------------------------------------------------------------- */

/* Override de variables CSS de Bootstrap 5 para acordeones */
.accordion {
    --bs-accordion-border-color: var(--Neutral-90);
    --bs-accordion-border-radius: 0.5rem;
}

/* ------------------------------------------------------------------- */
/* 2. BOTÓN DEL ACORDEÓN - Estilos comunes                             */
/* ------------------------------------------------------------------- */

.accordion-button {
    /* Tipografía */
    font-family: var(--nunito-font);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;

    /* Padding */
    padding: 1rem 1.25rem;

    /* Transiciones suaves */
    transition: background-color 0.2s ease, color 0.2s ease;

    /* Eliminar el icono SVG por defecto de Bootstrap */
    background-image: none !important;

    /* Eliminar sombra de foco por defecto (usaremos la nuestra) */
    box-shadow: none !important;

    /* Flexbox para alinear texto a la izquierda e icono a la derecha */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

/* Reseteo completo del pseudo-elemento ::after de Bootstrap */
.accordion-button::after {
    /* NO establecer content aquí - dejar que SOLO los estados específicos lo definan */
    /* Esto evita conflictos de cascada con !important entre base y estados */

    /* Eliminar completamente el SVG de Bootstrap */
    background-image: none !important;
    background-repeat: initial;
    background-size: initial;

    /* Resetear dimensiones fijas de Bootstrap (era 1.25rem = 20px x 20px) */
    /* Esto permite que el texto de Material Symbols fluya naturalmente */
    width: auto !important;
    height: auto !important;

    /* Mantener comportamiento flexbox para alineación */
    flex-shrink: 0;

    /* Transición para color de texto (no para background-image) */
    transition: color 0.2s ease, transform 0.2s ease !important;
}

/* ------------------------------------------------------------------- */
/* 3. ESTADO COLAPSADO (Cerrado)                                       */
/* ------------------------------------------------------------------- */

.accordion-button.collapsed {
    /* Fondo gris muy claro */
    background-color: var(--Neutral-98);

    /* Texto blanco en negrita */
    color: var(--Neutral-0);
    font-weight: 700;
}

/* Icono Material Symbols para estado cerrado */
.accordion-button.collapsed::after {
    content: 'arrow_drop_down' !important;
    font-family: 'Material Symbols Local';
    font-size: 24px;
    color: var(--Primario-50);

    /* Posicionamiento a la derecha */
    margin-left: auto;
    margin-right: 0;
    padding-left: 0.75rem;

    /* Configuración de Material Symbols */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;

    /* Accesibilidad - decorativo */
    user-select: none;
    pointer-events: none;

    /* Transición suave */
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Hover en estado colapsado */
.accordion-button.collapsed:hover {
    background-color: var(--Neutral-98);
    opacity: 0.95;
}

/* ------------------------------------------------------------------- */
/* 4. ESTADO EXPANDIDO (Abierto)                                       */
/* ------------------------------------------------------------------- */

.accordion-button:not(.collapsed) {
    /* Fondo azul más claro */
    background-color: var(--Primario-50);

    /* Texto blanco en negrita */
    color: var(--Neutral-100);
    font-weight: 700;

    /* Eliminar sombra de Bootstrap */
    box-shadow: none !important;
}

/* Icono Material Symbols para estado abierto */
.accordion-button:not(.collapsed)::after {
    content: 'arrow_drop_up' !important;
    font-family: 'Material Symbols Local';
    font-size: 24px;
    color: var(--Neutral-100);

    /* Posicionamiento a la derecha */
    margin-left: auto;
    margin-right: 0;
    padding-left: 0.75rem;

    /* Configuración de Material Symbols */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;

    /* Accesibilidad - decorativo */
    user-select: none;
    pointer-events: none;

    /* Transición suave */
    transition: color 0.2s ease, transform 0.2s ease;

    /* Resetear transform de Bootstrap que rota el icono -180deg */
    transform: none !important;
}

/* Hover en estado expandido */
.accordion-button:not(.collapsed):hover {
    background-color: var(--Primario-50);
    opacity: 0.95;
}

/* ------------------------------------------------------------------- */
/* 5. ESTADOS DE INTERACCIÓN (Focus, Active)                          */
/* ------------------------------------------------------------------- */

/* Estado active (al hacer clic) */
.accordion-button:active {
    transform: scale(0.995);
}

/* Estado focus - solo z-index para contexto de apilamiento */
/* El outline ahora viene de la regla global :focus-visible con offset negativo */
.accordion-button:focus,
.accordion-button:focus-visible {
    outline: 2px solid var(--Complementario-60) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    z-index: 3;
}

/* Estado focus cuando esta colapsado */
.accordion-button.collapsed:focus,
.accordion-button.collapsed:focus-visible {
    outline: 2px solid var(--Complementario-60) !important;
    outline-offset: -2px !important;
}

/* Estado focus cuando esta expandido */
.accordion-button:not(.collapsed):focus,
.accordion-button:not(.collapsed):focus-visible {
    outline: 2px solid var(--Complementario-60) !important;
    outline-offset: -2px !important;
}

/* ------------------------------------------------------------------- */
/* 6. CONTENIDO DEL ACORDEÓN                                           */
/* ------------------------------------------------------------------- */

/* El contenido interno no debe verse afectado */
.accordion-body {
    padding: 1.25rem;
    background-color: var(--Neutral-100);
}

/* ------------------------------------------------------------------- */
/* 7. ITEM DEL ACORDEÓN                                                */
/* ------------------------------------------------------------------- */

.accordion-item {
    border: 1px solid var(--Neutral-90);
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.accordion-item:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------- */
/* 8. RESPONSIVE DESIGN - Tablets                                      */
/* ------------------------------------------------------------------- */

@media (max-width: 768px) {
    .accordion-button {
        font-size: 0.9375rem;
        padding: 0.875rem 1rem;
    }

    .accordion-button.collapsed::after,
    .accordion-button:not(.collapsed)::after {
        font-size: 22px;
        padding-left: 0.5rem;
    }

    .accordion-body {
        padding: 1rem;
    }
}

/* ------------------------------------------------------------------- */
/* 9. RESPONSIVE DESIGN - Móviles                                      */
/* ------------------------------------------------------------------- */

@media (max-width: 480px) {
    .accordion-button {
        font-size: 0.875rem;
        padding: 0.75rem 0.875rem;
    }

    .accordion-button.collapsed::after,
    .accordion-button:not(.collapsed)::after {
        font-size: 20px;
        padding-left: 0.375rem;
    }

    .accordion-body {
        padding: 0.875rem;
    }
}

/* ------------------------------------------------------------------- */
/* 10. ACCESIBILIDAD - Alto Contraste                                  */
/* ------------------------------------------------------------------- */

@media (prefers-contrast: more) {
    .accordion-button.collapsed {
        border: 2px solid var(--Primario-50);
    }

    .accordion-button:not(.collapsed) {
        border: 2px solid var(--Neutral-100);
    }
}

/* ------------------------------------------------------------------- */
/* 11. ACCESIBILIDAD - Movimiento Reducido                            */
/* ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .accordion-button,
    .accordion-button.collapsed::after,
    .accordion-button:not(.collapsed)::after {
        transition: none;
    }

    .accordion-button:active {
        transform: none;
    }
}

/* ------------------------------------------------------------------- */
/* 12. ESTILOS PARA IMPRESIÓN                                          */
/* ------------------------------------------------------------------- */

@media print {
    .accordion-button.collapsed,
    .accordion-button:not(.collapsed) {
        background-color: transparent !important;
        color: var(--Neutral-0) !important;
        border: 1px solid var(--Neutral-0) !important;
    }

    .accordion-button.collapsed::after,
    .accordion-button:not(.collapsed)::after {
        color: var(--Neutral-0) !important;
    }

    /* Mostrar todo el contenido en impresión */
    .accordion-collapse {
        display: block !important;
        height: auto !important;
    }
}

/* ------------------------------------------------------------------- */
/* 13. FUNCIONARIO CARD - Layout 0 (Default)                          */
/* ------------------------------------------------------------------- */

.funcionario-card {
    background-color: var(--Neutral-100);
    border: 1px solid var(--Neutral-90);
    border-radius: 1.25rem;
    padding: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: var(--transition-hover);
}

/* Nombre del funcionario */
.funcionario-card__name {
    font-family: var(--nunito-font);
    font-size: 18px;
    font-weight: 900;
    line-height: 24px;
    color: var(--Neutral-30);
    margin-bottom: 0.5rem;
    margin-top: 0;
}

/* Cargo/Posición */
.funcionario-card__position {
    font-family: var(--nunito-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    color: var(--Neutral-40);
    margin-bottom: 0.75rem;
    margin-top: 0;
}

/* Lista de contacto */
.funcionario-card__contact-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 0;
}

/* Elemento de contacto */
.funcionario-card__contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.funcionario-card__contact-item:last-child {
    margin-bottom: 0;
}

/* Elemento de grupo (sin icono, con indentación) */
.funcionario-card__contact-item--group {
    padding-left: 2rem;
}

/* Icono de contacto */
.funcionario-card__contact-icon {
    font-size: 24px;
    color: var(--Neutral-60);
    margin-right: 0.5rem;
    flex-shrink: 0;
    line-height: 1;
}

/* Texto de contacto */
.funcionario-card__contact-text {
    font-family: var(--paragraph-font-family);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--Neutral-20);
    word-break: break-word;
    flex: 1; /* Expande para llenar el espacio disponible */
    min-width: 0; /* Permite word-wrap correcto en flexbox */
}

/* Etiqueta del grupo (negrita) */
.funcionario-card__group-label {
    font-weight: 700;
}

/* Enlaces */
.funcionario-card__link {
    font-family: var(--paragraph-font-family);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: var(--transition-hover);
}

/* Enlace de teléfono */
.funcionario-card__link--phone {
    color: var(--Neutral-20);
}

.funcionario-card__link--phone:hover {
    color: var(--Primario-50);
    text-decoration: underline;
}

/* Enlace de email */
.funcionario-card__link--email {
    color: var(--Primario-50);
}

.funcionario-card__link--email:hover {
    text-decoration: underline;
}

/* Hover effect para la tarjeta completa */
.funcionario-card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* ------------------------------------------------------------------- */
/* 14. FUNCIONARIO CARD - Responsive                                  */
/* ------------------------------------------------------------------- */

@media (max-width: 767px) {
    .funcionario-card {
        padding: 1.5rem;
    }

    .funcionario-card__name {
        font-size: 16px;
        line-height: 22px;
    }
}

/* =================================================================== */
/* 15. TAB CONTAINER STYLES (buepro/typo3-container-elements)          */
/* =================================================================== */

/* Asegurar que el contenido del tab esté debajo de la navegación */
.nav-tabs + .tab-content {
    clear: both;
    margin-top: 1rem;
}

/* Ocultar paneles inactivos */
.tab-content > .tab-pane {
    display: none;
}

/* Mostrar solo el panel activo */
.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show {
    display: block;
}

/* Padding interno para contenido */
.tab-pane {
    padding: 1rem 0;
}

/* ------------------------------------------------------------------- */
/* 15.1 TAB NAVIGATION STYLES                                          */
/* ------------------------------------------------------------------- */

/* Contenedor de tabs */
.nav-tabs {
    border-bottom: none;
    gap: 4px;
}

/* Tab activo */
.nav-tabs .nav-link.active {
    background-color: var(--Neutral-100);
    color: var(--government-blue);
    border: none;
    border-bottom: 3px solid var(--government-blue);
    border-radius: 8px 8px 0 0;
    font-family: var(--nunito-font);
    font-weight: 600;
}

/* Tab inactivo */
.nav-tabs .nav-link:not(.active) {
    background-color: var(--Neutral-95);
    color: var(--Neutral-30);
    border: none;
    border-bottom: 3px solid var(--Neutral-30);
    border-radius: 8px 8px 0 0;
    font-family: var(--nunito-font);
    font-weight: 400;
}

/* Hover en tab inactivo */
.nav-tabs .nav-link:not(.active):hover {
    background-color: var(--Neutral-90);
    color: var(--Neutral-20);
    border-bottom-color: var(--Neutral-30);
}

/* ------------------------------------------------------------------- */
/* 15.2 TAB CONTENT SPACING                                            */
/* ------------------------------------------------------------------- */

/* Espaciado vertical entre elementos dentro de tabs (30px desktop) */
.tab-pane > .frame + .frame,
.tab-pane > .ce-bodytext + .ce-bodytext,
.tab-pane > * + * {
    margin-top: 30px;
}

/* Excluir el primer elemento */
.tab-pane > *:first-child {
    margin-top: 0;
}

/* Responsive: reducir espaciado en pantallas menores */
@media (max-width: 991.98px) {
    .tab-pane > .frame + .frame,
    .tab-pane > .ce-bodytext + .ce-bodytext,
    .tab-pane > * + * {
        margin-top: 24px;
    }
}

@media (max-width: 575.98px) {
    .tab-pane > .frame + .frame,
    .tab-pane > .ce-bodytext + .ce-bodytext,
    .tab-pane > * + * {
        margin-top: 20px;
    }
}

/* =================================================================== */
/* 16. FUNCIONARIO CARD - Layout 2 (Imagen circular arriba, Verdana)   */
/* Diseño sin borde, texto alineado izquierda, tipografía Verdana      */
/* =================================================================== */

/* Tarjeta sin borde, fondo transparente */
.funcionario-card--image-top {
    background-color: transparent;
    border: none;
    padding: clamp(1rem, 3vw, 1.5rem);
    text-align: left;
    margin-bottom: 1rem;
}

/* Contenedor de imagen alineado izquierda */
.funcionario-card--image-top .funcionario-card__image-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem;
}

/* Imagen circular */
.funcionario-card__image--circular {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

/* Nombre - Verdana 15px regular */
.funcionario-card--image-top .funcionario-card__name {
    font-family: var(--paragraph-font-family), sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: var(--Neutral-10);
    margin-bottom: 0.25rem;
    margin-top: 0;
    text-align: left;
}

/* Cargo - Verdana 13px bold */
.funcionario-card--image-top .funcionario-card__position {
    font-family: var(--paragraph-font-family), sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    color: var(--Neutral-30);
    margin-bottom: 0.25rem;
    margin-top: 0;
    text-align: left;
}

/* Oficina - Verdana 13px italic */
.funcionario-card--image-top .funcionario-card__office {
    font-family: var(--paragraph-font-family), sans-serif;
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    line-height: 18px;
    color: var(--Neutral-50);
    margin-bottom: 0;
    margin-top: 0;
    text-align: left;
}

/* ------------------------------------------------------------------- */
/* 16.1 FUNCIONARIO CARD - Layout 2 Responsive                         */
/* ------------------------------------------------------------------- */

@media (max-width: 767px) {
    .funcionario-card--image-top {
        padding: 1rem;
    }

    .funcionario-card__image--circular {
        width: 100px;
        height: 100px;
    }
}

/* ====================================================================
   Layout 3: Imagen circular izquierda, texto derecha (Verdana)
   Diseño sin borde, tipografía Verdana
   ==================================================================== */
.funcionario-card--horizontal-compact {
    width: 100%;
    border: none;
    background-color: transparent;
    margin-bottom: 1rem;
}

.funcionario-card--horizontal-compact .funcionario-card__image-wrapper {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

/* Nombre - Verdana 15px regular */
.funcionario-card--horizontal-compact .funcionario-card__name {
    font-family: var(--paragraph-font-family), sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: var(--Neutral-10);
    margin-bottom: 0.125rem;
    margin-top: 0;
    text-align: left;
}

/* Cargo - Verdana 13px bold */
.funcionario-card--horizontal-compact .funcionario-card__position {
    font-family: var(--paragraph-font-family), sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    color: var(--Neutral-30);
    margin-bottom: 0.125rem;
    margin-top: 0;
    text-align: left;
}

/* Oficina - Verdana 13px italic */
.funcionario-card--horizontal-compact .funcionario-card__office {
    font-family: var(--paragraph-font-family), sans-serif;
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    line-height: 18px;
    color: var(--Neutral-50);
    margin-bottom: 0;
    margin-top: 0;
    text-align: left;
}

@media (max-width: 575.98px) {
    .funcionario-card--horizontal-compact .funcionario-card__image-wrapper {
        width: 100px;
        height: 100px;
    }
}

/* ====================================================================
   OFICINA - Estilos para tarjetas de oficina
   Templates/ContentElements/Oficina.html
   ==================================================================== */

/* Contenedor principal de oficina */
.office-wrapper {
    margin-bottom: 1.5rem;
}

/* Layout 1: Tarjeta de oficina con mapa */
.office-card {
    border-radius: 1.25rem;
    border: 1px solid var(--Neutral-90, #E5E5E5);
    background: var(--Neutral-100, #FFFFFF);
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

/* Contenedor del mapa - relación de aspecto 16:9 */
.office-card__map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Iframe del mapa de Google */
.office-card__map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Cuerpo de la tarjeta */
.office-card__body {
    padding: clamp(1.5rem, 4vw, 2rem);
}

/* Título de la oficina */
.office-card__title {
    font-family: var(--h5-font-family);
    font-weight: var(--h5-font-weight-bold);
    font-size: var(--h5-font-size-large);
    color: var(--Neutral-20);
    margin-bottom: 1rem;
    line-height: 1.3;
    margin-top: 0;
}

/* Lista de información de contacto */
.office-card__info {
    margin-bottom: 1.5rem;
}

/* Elemento de información de contacto */
.office-card__info-item {
    margin-bottom: 0.75rem;
}

.office-card__info-item:last-child {
    margin-bottom: 0;
}

/* Icono de información de contacto */
.office-card__icon {
    font-size: 1.25rem;
    color: var(--Neutral-60);
    flex-shrink: 0;
    margin-right: 0.5rem;
}

/* Texto de información de contacto */
.office-card__text {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Neutral-30);
    line-height: 1.5;
}

/* Enlaces de contacto (teléfono, email) */
.office-card__link {
    color: inherit;
    text-decoration: none;
}

.office-card__link:hover,
.office-card__link:focus {
    color: var(--Primario-50);
    text-decoration: underline;
}

/* Layout 0: Iframe del mapa sin borde */
.oficina .map-container iframe {
    border: 0;
}

/* ============================================
   ENLACE CON FLECHA (link-arrow-right)
   Estilo RTE para enlaces con icono keyboard_arrow_right
   Uso: Aplicar desde dropdown de estilos en CKEditor
   ============================================ */
a.link-arrow-right,
.link-arrow-right {
    font-family: 'Nunito Sans', var(--nunito-font), sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: 0;
    color: var(--Primario-40);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: opacity 0.2s ease;
}

a.link-arrow-right::after,
.link-arrow-right::after {
    content: 'keyboard_arrow_right';
    font-family: 'Material Symbols Local';
    font-size: 1.25em;
    font-weight: 400;
}

a.link-arrow-right:hover,
.link-arrow-right:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* =================================================================== */
/* INNER HERO SECTION (Páginas internas con imagen)                    */
/* Basado en om3-hero pero para el sitio principal                     */
/* =================================================================== */
.inner-hero {
    position: relative;
    width: 100%;
    min-height: 350px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    overflow: hidden;
    margin-top: 1.5rem;
}

/* Caja del título posicionada en esquina inferior izquierda */
.inner-hero-title-box {
    position: absolute;
    bottom: 40px;
    left: 0;
    background-color: var(--Neutral-100);
    padding: 1rem 2rem;
    max-width: 60%;
}

.inner-hero-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--Neutral-0);
    line-height: 1.2;
}

/* Caja de metadatos de imagen */
.inner-hero-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(var(--Neutral-0-rgb), 0.85);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 60%;
}

.inner-hero-meta-icon {
    flex-shrink: 0;
}

.inner-hero-meta-icon .material-symbols-outlined {
    font-size: 1.25rem;
    color: var(--Neutral-100);
}

.inner-hero-meta-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inner-hero-meta-description,
.inner-hero-meta-author {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    color: var(--Neutral-100);
    line-height: 16px;
}

.inner-hero-meta-description strong,
.inner-hero-meta-author strong {
    color: var(--Primario-70);
}

/* Responsive: Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .inner-hero-title {
        font-size: 2rem;
    }
}

/* Responsive: Mobile */
@media (max-width: 767.98px) {
    .inner-hero {
        min-height: 250px;
        border-radius: 0;
        margin-top: 0;
    }

    .inner-hero-title-box {
        bottom: 30px;
        padding: 0.75rem 1.25rem;
        max-width: 80%;
    }

    .inner-hero-title {
        font-size: 1.5rem;
    }

    .inner-hero-meta {
        max-width: 90%;
        padding: 0.4rem 0.75rem;
    }

    .inner-hero-meta-description,
    .inner-hero-meta-author {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Menu Pages Content Element (.frame-type-menu_pages)
   Elemento de contenido TYPO3: Menú de páginas seleccionadas
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedor del menú - Layout horizontal con flexbox
   -------------------------------------------------------------------------- */
.frame-type-menu_pages ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* --------------------------------------------------------------------------
   Items del menú - Alineación vertical centrada
   -------------------------------------------------------------------------- */
.frame-type-menu_pages ul li {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Divisor vertical entre items usando pseudo-elemento ::after
   No se muestra antes del primer item ni después del último
   -------------------------------------------------------------------------- */
.frame-type-menu_pages ul li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1.2em;
    background-color: var(--Neutral-70);
    margin: 0 1rem;
}

/* --------------------------------------------------------------------------
   Estilos de enlaces - Estado normal
   - Texto en mayúsculas
   - Color primario (Primario-40)
   - Peso normal (400)
   -------------------------------------------------------------------------- */
.frame-type-menu_pages ul li a {
    text-transform: uppercase;
    color: var(--Primario-40);
    font-family: var(--nunito-font);
    font-weight: 400;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   Estado hover - Cambio sutil de opacidad
   -------------------------------------------------------------------------- */
.frame-type-menu_pages ul li a:hover {
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Estado activo/página actual
   - Peso black (900)
   - Mismo color primario
   - Subrayado de 3px con separación de 6px

   Cubre múltiples posibles clases de estado activo de TYPO3:
   - .active en el <li>
   - .current en el <li>
   - .active en el <a>
   -------------------------------------------------------------------------- */
.frame-type-menu_pages ul li.active a,
.frame-type-menu_pages ul li.current a,
.frame-type-menu_pages ul li a.active {
    font-weight: 900;
    color: var(--Primario-40);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
    text-decoration-color: var(--Primario-40);
}

/* ==========================================================================
   Estilos Responsivos
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet y menor (< 992px) - Centrar elementos
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .frame-type-menu_pages ul {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Móvil (< 576px) - Diseño vertical
   - Apilado vertical de elementos
   - Divisores horizontales en lugar de verticales
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .frame-type-menu_pages ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Ocultar divisor vertical */
    .frame-type-menu_pages ul li:not(:last-child)::after {
        display: none;
    }

    /* Divisor horizontal usando borde inferior */
    .frame-type-menu_pages ul li {
        width: 100%;
        border-bottom: 1px solid var(--Neutral-70);
        padding-bottom: 0.5rem;
    }

    /* Sin borde en el último item */
    .frame-type-menu_pages ul li:last-child {
        border-bottom: none;
    }
}

/* ============================================
   Header con Color Primario
   ============================================
   Cabecera con tipografía Black y color primario
   Usado con: .header-primary-color
   ============================================ */

.header-primary-color {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--Primario-50);
}