/* =========================================================
   ESTILOS PERSONALIZADOS - INP INVESTIGACIÓN
   Archivo: css/styles.css
   Última actualización: Agosto 2026
   ========================================================= */

/* =========================================
   1. VARIABLES DE COLOR INSTITUCIONAL INP
   ========================================= */
:root {
    --inp-dark: #13322e;
    --inp-primary: #611232;
    --inp-secondary: #9b2247;
    --inp-gold: #BC955C;
    --inp-gold-dark: #a57f2c;
    --inp-gray: #98989A;
    --inp-bg-light: #f9f9f9;
    --inp-white: #FFFFFF;
    --inp-text: #545454;
}

/* =========================================
   2. BASE Y TIPOGRAFÍA GENERAL
   ========================================= */
.main-content {
    color: var(--inp-text);
    font-size: 1.5rem;
    line-height: 1.6;
}

.page-title {
    color: var(--inp-secondary);
    font-weight: 700;
    font-size: 3.6rem;
    margin-bottom: 25px;
    border-bottom: 3px solid var(--inp-gold);
    padding-bottom: 10px;
}

.section-title {
    color: var(--inp-primary);
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 10px;
}

.inp-link {
    color: var(--inp-primary);
    font-weight: 600;
    font-size: 1.5rem;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

.inp-link:hover {
    color: var(--inp-gold-dark);
    text-decoration: underline;
}

/* =========================================
   3. NAVBAR PERSONALIZADO INP
   ========================================= */
.inp-subnavbar {
    background-color: var(--inp-secondary) !important;
    border-bottom: 2px solid var(--inp-gold) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    padding: 0 !important;
    z-index: 1030 !important;
    top: 85px !important;
    width: 100% !important;
}

.inp-nav-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.inp-navbar-toggler {
    display: none !important;
    background: transparent !important;
    border: 2px solid var(--inp-primary) !important;
    border-radius: 6px !important;
    padding: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 1040 !important;
}

.inp-navbar-toggler:hover { background-color: var(--inp-primary) !important; }

.inp-navbar-toggler:hover .inp-hamburger-icon,
.inp-navbar-toggler:hover .inp-hamburger-icon::before,
.inp-navbar-toggler:hover .inp-hamburger-icon::after {
    background-color: var(--inp-white) !important;
}

.inp-hamburger-icon {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background-color: var(--inp-white) !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.inp-hamburger-icon::before,
.inp-hamburger-icon::after {
    content: "" !important;
    position: absolute !important;
    width: 24px !important;
    height: 2px !important;
    background-color: var(--inp-white) !important;
    left: 0 !important;
    transition: all 0.3s ease !important;
}

.inp-hamburger-icon::before { top: -7px !important; }
.inp-hamburger-icon::after { top: 7px !important; }

.inp-navbar-toggler.active .inp-hamburger-icon { background-color: transparent !important; }
.inp-navbar-toggler.active .inp-hamburger-icon::before { top: 0 !important; transform: rotate(45deg) !important; }
.inp-navbar-toggler.active .inp-hamburger-icon::after { top: 0 !important; transform: rotate(-45deg) !important; }

.inp-navbar-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.inp-nav-item {
    position: relative !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.inp-nav-link {
    display: block !important;
    padding: 12px 14px !important;
    color: var(--inp-white) !important;
    text-decoration: none !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    border-bottom: 3px solid transparent !important;
}

.inp-nav-link:hover {
    color: var(--inp-primary) !important;
    background-color: rgba(157, 36, 73, 0.05) !important;
    border-bottom-color: var(--inp-gold) !important;
}

.inp-nav-link.inp-active {
    color: var(--inp-primary) !important;
    border-bottom-color: var(--inp-primary) !important;
    font-weight: 700 !important;
}

.inp-caret {
    font-size: 1rem !important;
    margin-left: 3px !important;
    color: var(--inp-gray) !important;
}

.inp-dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: var(--inp-white) !important;
    min-width: 250px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border-radius: 0 0 8px 8px !important;
    border-top: 3px solid var(--inp-primary) !important;
    list-style: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    z-index: 1050 !important;
}

.inp-nav-item.dropdown:hover .inp-dropdown-menu,
.inp-nav-item.dropdown.open .inp-dropdown-menu { display: block !important; }

.inp-dropdown-item {
    display: block !important;
    padding: 10px 20px !important;
    color: var(--inp-text) !important;
    text-decoration: none !important;
    font-size: 1.2rem !important;
    transition: all 0.2s ease !important;
}

.inp-dropdown-item:hover {
    background-color: var(--inp-bg-light) !important;
    color: var(--inp-primary) !important;
    padding-left: 25px !important;
}

.inp-dropdown-divider {
    height: 1px !important;
    background-color: #e0e0e0 !important;
    margin: 8px 0 !important;
}

/* =========================================
   4. DIRECTORIO (Página principal)
   ========================================= */
.director-card {
    text-align: center;
    padding: 25px 15px;
    background: var(--inp-white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.director-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(97, 18, 50, 0.15);
}

.director-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--inp-gold);
    margin-bottom: 15px;
}

.director-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--inp-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.director-role {
    font-size: 1.25rem;
    color: var(--inp-text);
    margin: 0;
    font-weight: 500;
}

/* =========================================
   5. SLIDER DE IMÁGENES (Página principal)
   ========================================= */
.inp-slider-container {
    max-width: 100%;
    position: relative;
    margin: auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: var(--inp-bg-light);
}

.inp-slide { display: none; }

.inp-slide img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.inp-slide a:hover img { transform: scale(1.02); }

.fade {
    animation-name: fade;
    animation-duration: 5s;
}

@keyframes fade {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

.slider-dots {
    text-align: center;
    padding: 15px 0;
    background: var(--inp-white);
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 4px;
    background-color: var(--inp-gray);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.dot.active,
.dot:hover { background-color: var(--inp-primary); }

/* =========================================
   6. METADATOS INSTITUCIONALES
   ========================================= */
.metadata-box {
    background-color: var(--inp-bg-light);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--inp-gold);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.metadata-box dt {
    font-weight: 700;
    color: var(--inp-dark);
    margin-top: 10px;
}

.metadata-box dd {
    color: var(--inp-text);
    margin-left: 0;
    margin-bottom: 10px;
}

/* =========================================
   7. ORGANIGRAMA JERÁRQUICO (Página principal)
   ========================================= */
.org-hierarchy {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    position: relative;
}

.org-hierarchy::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 15px;
    background-color: var(--inp-gold);
}

.org-level-3::after { display: none; }

.org-box {
    border-radius: 8px;
    padding: 15px 25px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
    margin: 0;
}

.org-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}

.org-box h3,
.org-box h4 {
    margin: 0;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--inp-white);
}

.org-level-1 .org-box {
    max-width: 500px;
    width: 100%;
}

.org-level-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 800px;
    margin: 20px auto;
}

.org-level-2 .org-box { background-color: var(--inp-primary); }

.org-level-3 {
    max-width: 600px;
    margin: 20px auto;
}

.org-level-3 .org-box { background-color: var(--inp-gold-dark); }

.organigrama-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.org-column {
    background: var(--inp-white);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    border-top: 4px solid var(--inp-primary);
}

.org-list-title {
    color: var(--inp-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid var(--inp-gold);
    padding-bottom: 10px;
}

.org-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.org-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    font-size: 1.4rem;
    font-weight: 500;
}

.org-list li::before {
    content: "•";
    color: var(--inp-gold-dark);
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.4rem;
    line-height: 1rem;
    top: 2px;
}

.org-list a {
    color: var(--inp-text);
    text-decoration: none;
    transition: color 0.2s;
}

.org-list a:hover {
    color: var(--inp-primary);
    text-decoration: underline;
}

.org-sublist {
    list-style: none;
    padding-left: 20px;
    margin-top: 8px;
}

.org-sublist li::before {
    content: "◦";
    color: var(--inp-gray);
}

/* =========================================
   8. LIGAS DE INTERÉS (Página principal)
   ========================================= */
.interest-card {
    display: block;
    background: var(--inp-white);
    padding: 25px;
    border-radius: 8px;
    border-left: 5px solid var(--inp-gold);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    height: 100%;
}

.interest-card:hover {
    background: #fdfbf7;
    transform: translateX(5px);
    border-left-color: var(--inp-primary);
    box-shadow: 0 4px 12px rgba(157, 36, 73, 0.15);
}

.interest-card h4 {
    color: var(--inp-primary);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 0;
}

.interest-card p {
    color: var(--inp-text);
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* =========================================
   9. PÁGINAS INTERNAS DEL ORGANIGRAMA
   ========================================= */

/* ----- 9.1 Misión y Visión en 2 columnas ----- */
.inp-mv-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
    margin-top: 20px !important;
}

.inp-mv-card {
    background: var(--inp-white) !important;
    padding: 30px 25px !important;
    border-radius: 10px !important;
    border-top: 5px solid var(--inp-primary) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
}

.inp-mv-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 18px rgba(97, 18, 50, 0.12) !important;
}

.inp-mv-icon {
    font-size: 2.5rem !important;
    margin-bottom: 10px !important;
    line-height: 1 !important;
}

.inp-mv-title {
    color: var(--inp-primary) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--inp-gold) !important;
}

.inp-mv-text {
    color: var(--inp-text) !important;
    font-size: 1.4rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: justify !important;
}

.inp-mv-vision { border-top-color: var(--inp-gold-dark) !important; }

/* ----- 9.2 Líneas en 2 columnas ----- */
/* Usar solo cuando líneas y sublíneas tengan cantidades similares.
   Para cantidades desbalanceadas, usar 9.5 Pestañas (Tabs). */
.inp-research-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
    margin-top: 20px !important;
}

.inp-research-column {
    background: var(--inp-white) !important;
    padding: 25px !important;
    border-radius: 10px !important;
    border: 1px solid #e0e0e0 !important;
    border-left: 4px solid var(--inp-primary) !important;
}

.inp-research-subtitle {
    color: var(--inp-primary) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--inp-gold) !important;
}

/* ----- 9.3 Listas de investigación ----- */
.inp-research-list {
    padding-left: 25px !important;
    margin: 0 !important;
}

.inp-research-list li {
    margin-bottom: 12px !important;
    color: var(--inp-text) !important;
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
}

.inp-research-list li strong { color: var(--inp-primary) !important; }

.inp-research-list-alt {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.inp-research-list-alt li {
    padding: 10px 15px 10px 35px !important;
    margin-bottom: 8px !important;
    background: var(--inp-bg-light) !important;
    border-radius: 6px !important;
    position: relative !important;
    color: var(--inp-text) !important;
    font-size: 1.4rem !important;
    transition: all 0.2s ease !important;
}

.inp-research-list-alt li::before {
    content: "▸" !important;
    position: absolute !important;
    left: 15px !important;
    color: var(--inp-gold-dark) !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
}

.inp-research-list-alt li:hover {
    background: #f0e8d8 !important;
    transform: translateX(3px) !important;
}

/* ----- 9.4 Tarjeta unificada de Contacto ----- */
.inp-area-contact-card {
    background: var(--inp-white) !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08) !important;
    overflow: hidden !important;
    border: 1px solid #e0e0e0 !important;
}

.inp-area-contact-header {
    padding: 25px !important;
    background: linear-gradient(135deg, var(--inp-secondary) 0%, var(--inp-primary) 100%) !important;
    color: var(--inp-white) !important;
}

.inp-area-contact-info { width: 100% !important; }

.inp-area-contact-name {
    color: var(--inp-white) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 5px 0 !important;
}

.inp-area-contact-role {
    color: var(--inp-gold) !important;
    font-size: 1.4rem !important;
    margin: 0 0 15px 0 !important;
    font-weight: 500 !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

.inp-area-contact-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

.inp-area-contact-item {
    color: var(--inp-white) !important;
    text-decoration: none !important;
    font-size: 1.4rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: color 0.2s, background 0.2s !important;
    padding: 8px 12px !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 6px !important;
    border-left: 3px solid var(--inp-gold) !important;
}

a.inp-area-contact-item:hover {
    color: var(--inp-gold) !important;
    background: rgba(255,255,255,0.15) !important;
    text-decoration: none !important;
}

.inp-contact-icon {
    width: 22px !important;
    height: 22px !important;
    color: var(--inp-gold) !important;
    flex-shrink: 0 !important;
}

.inp-area-contact-phone { cursor: pointer !important; }

.inp-phone-text {
    display: inline !important;
    line-height: 1.4 !important;
}

.inp-phone-text strong {
    display: inline !important;
    font-weight: 700 !important;
    color: var(--inp-gold) !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
}

.inp-area-contact-location {
    padding: 20px 25px !important;
    background: var(--inp-bg-light) !important;
    border-top: 3px solid var(--inp-gold) !important;
}

.inp-area-contact-location h5 {
    color: var(--inp-primary) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.inp-area-contact-location p {
    color: var(--inp-text) !important;
    font-size: 1.4rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding-left: 32px !important;
}

/* ----- 9.5 Imagen del área ----- */
.inp-area-image-container {
    background: var(--inp-white) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08) !important;
    border: 1px solid #e0e0e0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

.inp-area-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.inp-area-image-caption {
    padding: 10px 15px !important;
    background: var(--inp-secondary) !important;
    color: var(--inp-white) !important;
    text-align: center !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

.inp-area-image-caption strong {
    display: block !important;
    font-size: 1.1rem !important;
    margin-bottom: 3px !important;
}

.inp-area-image-caption span {
    color: var(--inp-gold) !important;
    font-size: 0.95rem !important;
}

/* ----- 9.6 Pestañas (Tabs) para Líneas de Investigación ----- */
.inp-tabs-container {
    background: var(--inp-white) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06) !important;
    border: 1px solid #e0e0e0 !important;
}

.inp-tabs-header {
    display: flex !important;
    background: var(--inp-bg-light) !important;
    border-bottom: 2px solid #e0e0e0 !important;
}

.inp-tab-btn {
    flex: 1 !important;
    padding: 15px 20px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--inp-text) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: relative !important;
}

.inp-tab-btn:hover {
    background: rgba(157, 36, 73, 0.05) !important;
    color: var(--inp-primary) !important;
}

.inp-tab-btn.active {
    color: var(--inp-primary) !important;
    border-bottom-color: var(--inp-primary) !important;
    background: var(--inp-white) !important;
}

.inp-tab-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    background: var(--inp-gray) !important;
    color: var(--inp-white) !important;
    border-radius: 14px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    transition: background 0.3s ease !important;
}

.inp-tab-btn.active .inp-tab-count { background: var(--inp-primary) !important; }

.inp-tabs-content {
    padding: 25px !important;
    min-height: 200px !important;
}

.inp-tab-pane {
    display: none !important;
    animation: inpFadeIn 0.3s ease !important;
}

.inp-tab-pane.active { display: block !important; }

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

/* =========================================
   9.7 FUNCIONES ADMINISTRATIVAS
   ========================================= */
.inp-admin-card {
    background: var(--inp-white) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06) !important;
    border: 1px solid #e0e0e0 !important;
    border-top: 5px solid var(--inp-primary) !important;
}

.inp-admin-header {
    padding: 20px 25px !important;
    background: var(--inp-bg-light) !important;
    border-bottom: 2px solid #e0e0e0 !important;
}

.inp-admin-title {
    color: var(--inp-primary) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.inp-admin-icon {
    width: 28px !important;
    height: 28px !important;
    color: var(--inp-gold-dark) !important;
    flex-shrink: 0 !important;
}

.inp-admin-list {
    counter-reset: admin-counter !important;
    list-style: none !important;
    padding: 25px !important;
    margin: 0 !important;
}

.inp-admin-list li {
    counter-increment: admin-counter !important;
    position: relative !important;
    padding: 15px 20px 15px 70px !important;
    margin-bottom: 10px !important;
    background: var(--inp-bg-light) !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--inp-gold) !important;
    color: var(--inp-text) !important;
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
}

.inp-admin-list li::before {
    content: counter(admin-counter) !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    background: var(--inp-primary) !important;
    color: var(--inp-white) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    box-shadow: 0 2px 4px rgba(97, 18, 50, 0.2) !important;
}

.inp-admin-list li:hover {
    background: #f0e8d8 !important;
    border-left-color: var(--inp-primary) !important;
    transform: translateX(3px) !important;
}

.inp-admin-list li:hover::before { background: var(--inp-gold-dark) !important; }

/* =========================================
   10. COMITÉS INSTITUCIONALES - Landing
   ========================================= */

main.comites-landing {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.comites-landing {
    --cei-color: #C8102E;
    --cei-soft: #FDECEA;
    --cb-color: #0066A2;
    --cb-soft: #E6F1F8;
    --cicual-color: #F2B705;
    --cicual-soft: #FFF8E1;
    --text-dark: #2C3E50;
    --text-muted: #545454;
    --bg-soft: #F7F9FC;
    --border: #E5EAF0;
    font-family: 'Open Sans', Arial, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    font-size: 15px;
}

.comites-hero {
    background: linear-gradient(135deg, var(--inp-primary) 0%, var(--inp-secondary) 100%);
    color: #fff;
    padding: 3rem 1.5rem 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 0 !important;
}

.comites-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06) 0%, transparent 40%);
    pointer-events: none;
}

.comites-hero__inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.comites-hero__title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 1.2rem;
    letter-spacing: -0.02em;
    color: #fff;
}

.comites-hero__subtitle {
    font-size: 15px;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.95;
    line-height: 1.6;
}

.comites-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    position: relative;
    z-index: 2;
}

.comites-grid__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.comites-grid__header .section-title {
    color: var(--inp-primary) !important;
    border-bottom: 3px solid var(--inp-gold) !important;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.comites-grid__subtitle {
    color: var(--text-muted);
    font-size: 15px;
    margin: 0;
}

.comites-grid__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.comite-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.comite-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.comite-card__icon {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    transition: background 0.3s ease;
}

.comite-card__icon svg {
    width: 96px;
    height: 96px;
    transition: transform 0.3s ease;
}

.comite-card:hover .comite-card__icon svg { transform: scale(1.1); }

.comite-card--cei .comite-card__icon { background: var(--cei-soft); color: var(--cei-color); }
.comite-card--cei:hover { border-color: var(--cei-color); }
.comite-card--cb .comite-card__icon { background: var(--cb-soft); color: var(--cb-color); }
.comite-card--cb:hover { border-color: var(--cb-color); }
.comite-card--cicual .comite-card__icon { background: var(--cicual-soft); color: var(--cicual-color); }
.comite-card--cicual:hover { border-color: var(--cicual-color); }

.comite-card__body {
    padding: 1.5rem 1.75rem 1.75rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.comite-card__tag {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.comite-card--cei .comite-card__tag { background: var(--cei-soft); color: var(--cei-color); }
.comite-card--cb .comite-card__tag { background: var(--cb-soft); color: var(--cb-color); }
.comite-card--cicual .comite-card__tag { background: var(--cicual-soft); color: #8A6A00; }

.comite-card__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--inp-primary);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}

.comite-card__desc {
    color: var(--text-muted);
    font-size: 15px;
    margin: 0 0 1.5rem;
    flex-grow: 1;
    line-height: 1.6;
}

.comite-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.comite-card__btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.comite-card--cei .comite-card__btn { color: var(--cei-color); }
.comite-card--cb .comite-card__btn { color: var(--cb-color); }
.comite-card--cicual .comite-card__btn { color: #8A6A00; }

.comite-card__btn:hover { gap: 0.8rem; }
.comite-card__btn:hover svg { transform: translateX(4px); }

.comites-guia {
    background: var(--bg-soft);
    padding: 4rem 1.5rem;
}

.comites-guia__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.comites-guia__header .section-title {
    color: var(--inp-primary) !important;
    border-bottom: 3px solid var(--inp-gold) !important;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.comites-guia__items {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.comites-guia__item {
    background: #fff;
    padding: 2rem 1.75rem;
    border-radius: 12px;
    border-left: 5px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comites-guia__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.comites-guia__item--cei { border-left-color: var(--cei-color); }
.comites-guia__item--cb { border-left-color: var(--cb-color); }
.comites-guia__item--cicual { border-left-color: var(--cicual-color); }

.comites-guia__num {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.75rem;
    opacity: 0.15;
}

.comites-guia__item--cei .comites-guia__num { color: var(--cei-color); }
.comites-guia__item--cb .comites-guia__num { color: var(--cb-color); }
.comites-guia__item--cicual .comites-guia__num { color: var(--cicual-color); }

.comites-guia__item h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
    color: var(--inp-primary);
    font-weight: 700;
}

.comites-guia__item p {
    color: var(--text-muted);
    font-size: 15px;
    margin: 0;
    line-height: 1.6;
}

/* ---------- CTA FINAL ---------- */
.comites-cta {
    padding: 4rem 1.5rem;
    text-align: center;
}

.comites-cta__inner {
    max-width: 1000px;
    margin: 30px auto;
    background: linear-gradient(135deg, #fff 0%, var(--bg-soft) 100%);
    padding: 3rem 2rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    border-top: 5px solid var(--inp-gold);
}

.comites-cta__inner h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    margin: 0 0 1rem;
    color: var(--inp-primary);
    font-weight: 700;
}

.comites-cta__inner p {
    color: var(--text-muted);
    font-size: 15px;
    margin: 0 auto 2rem;
    line-height: 1.6;
    max-width: 600px;
}

.comites-cta__docs-block {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: stretch;
}

.doc-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-align: left;
}

.doc-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.doc-item__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-item__content {
    flex: 1;
    min-width: 0;
}

.doc-item__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--inp-primary);
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}

.doc-item__desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0 0 0.6rem 0;
}

.doc-item__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.doc-item__link:hover { gap: 0.6rem; }
.doc-item__link svg { transition: transform 0.2s ease; }
.doc-item__link:hover svg { transform: translate(2px, -2px); }

.doc-item--primary {
    background: linear-gradient(135deg, rgba(188, 149, 92, 0.08) 0%, rgba(188, 149, 92, 0.15) 100%);
    border-color: var(--inp-gold);
    padding: 1.5rem;
}

.doc-item--primary .doc-item__icon {
    width: 56px;
    height: 56px;
    background: var(--inp-gold);
    color: #fff;
}

.doc-item--primary .doc-item__title { font-size: 1.5rem; }
.doc-item--primary .doc-item__desc { font-size: 1.5rem; }
.doc-item--primary .doc-item__link { color: var(--inp-primary); font-size: 1.4rem; }
.doc-item--primary .doc-item__link:hover { color: var(--inp-gold-dark); }

.doc-item__badge {
    display: inline-block;
    background: var(--inp-gold-dark);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.doc-item--secondary .doc-item__icon {
    background: rgba(0, 102, 162, 0.1);
    color: #0066A2;
}

.doc-item--secondary .doc-item__link { color: #0066A2; }
.doc-item--secondary .doc-item__link:hover { color: #004C7A; }

.doc-item--tertiary .doc-item__icon {
    background: rgba(97, 18, 50, 0.08);
    color: var(--inp-primary);
}

.doc-item--tertiary .doc-item__link { color: var(--inp-primary); }
.doc-item--tertiary .doc-item__link:hover { color: var(--inp-gold-dark); }

.comites-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.comites-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.8rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

.comites-cta__btn--primary {
    background: var(--inp-primary);
    color: #fff !important;
    border: 2px solid var(--inp-primary);
}

.comites-cta__btn--primary:hover {
    background: var(--inp-secondary);
    border-color: var(--inp-secondary);
    transform: translateY(-2px);
}

.comites-cta__btn--secondary {
    background: transparent;
    color: var(--inp-primary) !important;
    border: 2px solid var(--inp-primary);
}

.comites-cta__btn--secondary:hover {
    background: var(--inp-primary);
    color: #fff !important;
    transform: translateY(-2px);
}

.comites-cta__btn--tertiary {
    background: transparent;
    color: var(--text-muted) !important;
    border: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 0.9rem 1rem;
}

.comites-cta__btn--tertiary:hover {
    color: var(--inp-primary) !important;
    transform: translateY(-2px);
}

/* =========================================
   11. PÁGINAS INDIVIDUALES DE COMITÉS
   ========================================= */

.comite-page {
    font-family: 'Open Sans', Arial, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    font-size: 15px;
}

.comite-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.comite-hero {
    color: #fff;
    padding: 3rem 1.5rem 5rem;
    text-align: center;
    position: relative;
}

.comite-page--cei .comite-hero { background: linear-gradient(135deg, #C8102E 0%, #8B0A1F 100%); }
.comite-page--cb .comite-hero { background: linear-gradient(135deg, #0066A2 0%, #004C7A 100%); }
.comite-page--cicual .comite-hero { background: linear-gradient(135deg, #F2B705 0%, #d49e00 100%); }

.comite-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 15px;
    margin-bottom: 1.5rem;
    transition: color 0.3s ease;
}

.comite-hero__back:hover { color: #fff; }

.comite-hero__title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 1rem;
}

.comite-hero__subtitle {
    font-size: 15px;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.95;
}

/* --- SECCIÓN 1: INFORMACIÓN RELEVANTE --- */
.comite-info {
    padding: 4rem 0;
    background: #fff;
}

.comite-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.comite-info__card {
    background: var(--bg-soft);
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--inp-gold);
}

.comite-info__card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    color: var(--inp-primary);
    margin: 0 0 0.75rem;
    font-weight: 700;
}

.comite-info__card p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

/* --- SECCIÓN 2: FORMATOS Y NORMATIVA (BASE) --- */
.comite-formatos {
    padding: 4rem 0;
    background: #fff;
}

.comite-formatos__subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin-top: -1rem;
    margin-bottom: 2.5rem;
}

/* Estilos comunes para ambos diseños (columnas y horizontal) */
.formato-item__icon--pdf { background: #FEE2E2; color: #DC2626; }
.formato-item__icon--word { background: #DBEAFE; color: #2563EB; }
.formato-item__icon--excel { background: #DCFCE7; color: #15803D; }
.formato-item__icon--link,
.formato-item__icon--web { background: #E0E7FF; color: #4F46E5; }

/* ----- 2A. DISEÑO EN COLUMNAS (CEI y CICUAL) ----- */
.formatos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.formatos-group {
    background: var(--bg-soft);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
}

.formatos-group__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--inp-primary);
    margin: 0 0 1.2rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--inp-gold);
}

.formatos-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.formato-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.formato-item:hover {
    border-color: var(--inp-gold);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.formato-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.formato-item__info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.formato-item__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--inp-primary);
    line-height: 1.3;
}

.formato-item__desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ----- 2B. DISEÑO HORIZONTAL (Solo CB) ----- */
.formatos-bloque {
    margin-bottom: 2.5rem;
}

.formatos-bloque:last-child { margin-bottom: 0; }

.formatos-bloque__titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--inp-primary);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--inp-gold);
}

.formatos-grid-horizontal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.formato-h-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.2s ease;
    height: 100%;
    box-sizing: border-box;
}

.formato-h-item:hover {
    border-color: var(--inp-gold);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.formato-h-item__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.formato-h-item__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.formato-h-item__name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--inp-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.formato-h-item__desc {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.formato-h-item--destacado {
    background: linear-gradient(135deg, rgba(188, 149, 92, 0.06) 0%, rgba(188, 149, 92, 0.12) 100%);
    border-color: var(--inp-gold);
    padding: 1.1rem 1.25rem;
}

.formato-h-item--destacado .formato-h-item__icon {
    width: 44px;
    height: 44px;
}

.formato-h-item--destacado .formato-h-item__name { font-size: 1.2rem; }

.formato-h-item--destacado .formato-h-item__desc {
    font-size: 1rem;
    -webkit-line-clamp: 3;
}

.formatos-grid--single {
    grid-template-columns: 1fr;
    max-width: 600px;
}

/* --- SECCIÓN 3: INTEGRANTES --- */
.comite-integrantes {
    padding: 4rem 0;
    background: var(--bg-soft);
}

.comite-integrantes__subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin-top: -1rem;
    margin-bottom: 2.5rem;
}

.integrantes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem;
}

.integrante-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #E5EAF0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.integrante-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.integrante-card__img-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 3px solid var(--inp-gold);
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.integrante-card__img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.integrante-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--inp-primary);
    background: #f0f0f0;
}

.integrante-card__info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.integrante-card__role {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.role-presidente { background: #FEF5E7; color: #8B6914; border: 1px solid #D4AF37; }
.role-secretario { background: #EEF0F2; color: #4A5568; border: 1px solid #B8C0CC; }
.role-vocal { background: #F7F9FC; color: #546E7A; border: 1px solid #B0BEC5; }

.comite-page--cei .role-vocal { background: #FDECEA; color: #C8102E; border-color: #C8102E; }
.comite-page--cb .role-vocal { background: #E6F1F8; color: #0066A2; border-color: #0066A2; }
.comite-page--cicual .role-vocal { background: #FFF8E1; color: #8A6A00; border-color: #F2B705; }

.integrante-card__name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 1rem;
}

.integrante-card__bio {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
    text-align: left;
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 0 1rem;
}

.integrante-card:hover .integrante-card__bio {
    max-height: 500px;
    opacity: 1;
    padding: 1rem;
    margin-top: 0.5rem;
}

/* --- SECCIÓN 4: ESTADÍSTICAS --- */
.comite-stats {
    padding: 4rem 0;
    background: #fff;
}

.comite-stats__subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin-top: -1rem;
    margin-bottom: 2.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background: #fff;
    border: 1px solid #E5EAF0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.stat-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--inp-primary);
    margin: 0 0 1rem;
    text-align: center;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--inp-gold);
}

.chart-wrapper {
    position: relative;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-wrapper canvas {
    max-width: 100%;
    max-height: 100%;
}

/* =========================================
   12. TRANSICIÓN DE PÁGINA (FADE)
   ========================================= */
body {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

body.page-loaded { opacity: 1; }
body.page-fading { opacity: 0; }

/* =========================================
   13. RESPONSIVE - TABLETS Y LAPTOPS (≤1200px)
   ========================================= */
@media (max-width: 1200px) {
    .inp-nav-link {
        padding: 10px !important;
        font-size: 1.4rem !important;
    }
}

/* =========================================
   14. RESPONSIVE - MÓVILES Y TABLETS (≤991px)
   ========================================= */
@media (max-width: 991px) {
    .inp-navbar-toggler { display: block !important; }

    .inp-nav-collapse {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--inp-white) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        z-index: 1035 !important;
    }

    .inp-nav-collapse.show { display: block !important; }

    .inp-navbar-nav {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        padding: 10px 0 !important;
    }

    .inp-nav-item { width: 100% !important; }

    .inp-nav-link {
        padding: 12px 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 1.4rem !important;
        color: var(--inp-text) !important;
    }

    .inp-dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        border-top: none !important;
        background-color: var(--inp-bg-light) !important;
        display: none !important;
        min-width: 100% !important;
    }

    .inp-nav-item.dropdown.open .inp-dropdown-menu { display: block !important; }

    .inp-caret {
        float: right !important;
        margin-top: 2px !important;
    }

    .inp-mv-grid,
    .inp-research-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .inp-area-contact-header { text-align: center !important; }
    .inp-area-contact-name { font-size: 1.5rem !important; }
    .inp-area-contact-item {
        justify-content: center !important;
        font-size: 1.2rem !important;
    }
    .inp-contact-icon {
        width: 20px !important;
        height: 20px !important;
    }
    .inp-area-contact-location h5 { justify-content: center !important; }
    .inp-area-contact-location p {
        padding-left: 0 !important;
        text-align: center !important;
    }
    .inp-area-image-container {
        margin: 0 auto 20px auto !important;
        max-width: 400px !important;
    }

    .comites-cta__docs-block { grid-template-columns: 1fr 1fr; }
    .doc-item--primary { grid-column: 1 / -1; }

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

/* =========================================
   15. RESPONSIVE - MÓVILES PEQUEÑOS (≤768px)
   ========================================= */
@media (max-width: 768px) {
    .organigrama-grid,
    .org-level-2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .org-hierarchy::after { display: none; }

    .org-level-1 .org-box,
    .org-level-3 .org-box { max-width: 100%; }

    .page-title { font-size: 2.6rem; }
    .section-title { font-size: 2.5rem; }

    .inp-tabs-header { flex-direction: column !important; }
    .inp-tab-btn {
        border-bottom: 1px solid #e0e0e0 !important;
        border-left: 3px solid transparent !important;
    }
    .inp-tab-btn.active {
        border-left-color: var(--inp-primary) !important;
        border-bottom-color: #e0e0e0 !important;
    }
    .inp-tabs-content { padding: 20px 15px !important; }

    .inp-admin-list li {
        font-size: 1.05rem !important;
        padding: 12px 15px 12px 60px !important;
    }
    .inp-admin-list li::before {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.95rem !important;
        left: 15px !important;
    }
    .inp-admin-title { font-size: 1.3rem !important; }
    .inp-admin-icon {
        width: 24px !important;
        height: 24px !important;
    }
}

/* =========================================
   16. RESPONSIVE - MÓVILES MUY PEQUEÑOS (≤640px)
   ========================================= */
@media (max-width: 640px) {
    .comites-hero { padding: 3rem 1.25rem 4rem; }
    .comites-grid {
        margin-top: 0;
        padding: 0 1rem 3rem;
    }
    .comites-grid__cards { grid-template-columns: 1fr; }
    .comites-guia__items { grid-template-columns: 1fr; }

    .comites-cta__buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .comites-cta__btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .comites-cta__docs-block { grid-template-columns: 1fr; }
    .doc-item--primary { grid-column: auto; }
    .doc-item { padding: 1rem; }

    .formatos-grid { grid-template-columns: 1fr; }
    .formatos-grid-horizontal { grid-template-columns: 1fr; }
    .formatos-grid--single { max-width: 100%; }

    .stats-grid { grid-template-columns: 1fr; }
    .chart-wrapper { height: 260px; }
}