:root {

            --primary-color: #003d6e;

            --primary-container: #005495;

            --secondary-container: #2fbcfe;

            --on-secondary-container: #004866;

            --surface: #f8f9ff;

            --on-surface: #0d1c2f;

            --on-surface-variant: #414750;

            --surface-container-low: #eff4ff;

            --surface-container-highest: #d5e3fd;

            --outline-variant: #c1c7d2;

            --white: #ffffff;

        }



        body {

            font-family: 'Open Sans', sans-serif;

            background-color: var(--surface);

            color: var(--on-surface);

        }



        h1, h2, h3, h4, .navbar-brand, .nav-link, .btn {

            font-family: 'Montserrat', sans-serif;

        }



        /* Material Symbols helper */

        .material-symbols-outlined {

            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;

            vertical-align: middle;

        }



        /* Navbar Customization */

        .navbar {

            background-color: var(--white);

            box-shadow: 0 1px 3px rgba(0,0,0,0.1);

            padding: 1rem 0;

        }

        .navbar-brand {

            font-weight: 700;

            color: var(--primary-color) !important;

            font-size: 1.5rem;

        }

        .nav-link {

            font-size: 14px;

            font-weight: 600;

            color: var(--on-surface-variant) !important;

            text-transform: none;

            letter-spacing: 0.05em;

            margin: 0 10px;

            transition: color 0.2s;

        }

        .nav-link.active {

            color: var(--primary-color) !important;

            border-bottom: 2px solid var(--primary-color);

        }

        .nav-link:hover {

            color: var(--primary-color) !important;

        }

        .btn-join {

            background-color: var(--primary-color);

            color: var(--white);

            border-radius: 0.125rem;

            padding: 0.5rem 1.5rem;

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 0.05em;

            font-size: 14px;

        }



        /* Hero Section */

        .hero-section {

            position: relative;

            height: 600px;

            display: flex;

            align-items: center;

            overflow: hidden;

        }

        .hero-img {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            object-fit: cover;

            z-index: 0;

        }

        .hero-overlay {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: linear-gradient(to right, rgba(0, 61, 110, 0.9) 0%, rgba(0, 61, 110, 0.4) 100%);

            z-index: 1;

        }

        .hero-content {

            position: relative;

            z-index: 2;

            color: var(--white);

        }

        .hero-title {

            font-size: 3rem;

            font-weight: 700;

            line-height: 1.1;

            margin-bottom: 1.5rem;

        }

        @media (max-width: 768px) {

            .hero-title { font-size: 2rem; }

        }

        .btn-primary-container {

            background-color: var(--secondary-container);

            color: var(--on-secondary-container);

            border: none;

            padding: 1rem 2rem;

            font-weight: 600;

            border-radius: 0.125rem;

        }

        .btn-outline-white {

            border: 2px solid var(--white);

            color: var(--white);

            padding: 1rem 2rem;

            font-weight: 600;

            border-radius: 0.125rem;

        }



        /* About Section */

        .section-padding {

            padding: 80px 0;

        }

        .about-img-container {

            position: relative;

            padding-bottom: 30px;

            padding-right: 30px;

        }

        .about-img {

            border: 8px solid var(--surface-container-low);

            box-shadow: 0 1rem 3rem rgba(0,0,0,0.175);

            width: 100%;

            aspect-ratio: 1/1;

            object-fit: cover;

        }

        .badge-years {

            position: absolute;

            bottom: 0;

            right: 0;

            background-color: var(--primary-color);

            color: var(--white);

            padding: 2rem;

            border-radius: 0.125rem;

            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);

        }

        .badge-years .h3 { margin-bottom: 0; font-weight: 700; }

        .badge-years span { font-size: 14px; opacity: 0.8; text-transform: uppercase; }



        /* News Section */

        .card-news {

            border: none;

            border-radius: 0.5rem;

            overflow: hidden;

            background: var(--white);

            transition: transform 0.3s, box-shadow 0.3s;

            height: 100%;

        }

        .card-news:hover {

            transform: translateY(-5px);

            box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);

        }

        .card-news img {

            transition: transform 0.5s;

        }

        .card-news:hover img {

            transform: scale(1.05);

        }

        .news-tag {

            background-color: var(--surface-container-highest);

            color: var(--primary-color);

            font-size: 10px;

            font-weight: 600;

            text-transform: uppercase;

            padding: 0.25rem 0.5rem;

            border-radius: 0.125rem;

        }

        .news-date {

            font-size: 10px;

            color: var(--on-surface-variant);

        }

        .card-title {

            font-size: 1.25rem;

            font-weight: 600;

            color: var(--on-surface);

            line-height: 1.3;

        }



        /* Newsletter Section */

        .newsletter-section {

            background-color: var(--primary-color);

            position: relative;

            overflow: hidden;

            color: var(--white);

        }

        .newsletter-bg-blob {

            position: absolute;

            width: 400px;

            height: 400px;

            background: rgba(255,255,255,0.1);

            filter: blur(80px);

            border-radius: 50%;

            pointer-events: none;

        }

        .newsletter-input {

            background: rgba(255,255,255,0.1);

            border: 1px solid rgba(255,255,255,0.2);

            color: var(--white);

            padding: 1rem 1.5rem;

        }

        .newsletter-input::placeholder {

            color: rgba(255,255,255,0.6);

        }

        .newsletter-input:focus {

            background: rgba(255,255,255,0.15);

            border-color: var(--secondary-container);

            box-shadow: none;

            color: var(--white);

        }



        /* Footer */

        footer {

            background-color: var(--white);

            border-top: 1px solid var(--outline-variant);

            padding: 80px 0;

        }

        .footer-brand {

            font-weight: 700;

            color: var(--primary-color);

            font-size: 1.5rem;

            margin-bottom: 0.5rem;

            display: block;

        }

        .footer-link {

            color: var(--on-surface-variant);

            text-decoration: underline;

            font-size: 14px;

            font-weight: 600;

            transition: color 0.2s;

        }

        .footer-link:hover {

            color: var(--primary-color);

        }

        .social-icon {

            width: 40px;

            height: 40px;

            background-color: var(--primary-container);

            color: var(--white);

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            transition: opacity 0.2s;

        }

        .social-icon:hover {

            opacity: 0.8;

            color: var(--white);

        }
        /* ==========================================================================
   VISTA DE NOTICIA INDIVIDUAL (SINGLE ARTICLE)
   ========================================================================== */

/* Ajustes de cabecera y metadatos */
.item-page header .badge {
    font-size: 11px;
    letter-spacing: 1px;
}

.item-page .article-info {
    font-size: 0.875rem;
}

.item-page .article-info img {
    width: 44px; 
    height: 44px; 
    object-fit: cover;
}

/* Contenedor de la imagen principal (Hero Image) */
.item-page .hero-image-container {
    height: 500px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin: 0 0 3rem 0;
}

.item-page .hero-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bloque de cita (Quote) dentro del artículo */
.item-page .quote-block {
    background-color: var(--surface-container-low);
    border-left: 4px solid var(--primary-color);
    padding: 2rem 2.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 3rem 0;
}

/* Tipografía interior del artículo */
.item-page .article-body p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--on-surface-variant);
    margin-bottom: 1.5rem;
}

.item-page .article-body h2 {
    color: var(--primary-color);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

/* Botones de compartir en el pie del artículo */
.item-page .btn-outline-custom {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: var(--on-surface-variant);
    transition: all 0.2s;
}

.item-page .btn-outline-custom:hover {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
}

/* ==========================================================================
   ESTILOS DE LA BARRA LATERAL (SIDEBAR)
   ========================================================================== */
.sidebar-card {
    background-color: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.news-card-img {
    height: 160px;
    object-fit: cover;
    border-radius: 0.5rem;
    transition: transform 0.5s ease;
}

.news-card:hover .news-card-img {
    transform: scale(1.05);
}

/* ==========================================================================
   VISTA DE LISTADO DE NOTICIAS (CATEGORY BLOG)
   ========================================================================== */

/* Filtros y Búsqueda */
.filter-btn {
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    background-color: var(--surface-container-low);
    color: var(--on-surface-variant);
    transition: all 0.2s;
}

.filter-btn.active, .filter-btn:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.search-container {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
}

.search-input {
    padding-left: 40px;
    border-radius: 8px;
    border: 1px solid var(--outline-variant);
}

.search-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 61, 110, 0.25);
    border-color: var(--primary-color);
    outline: none;
}

/* Tarjetas de Noticias */
.news-card-main img {
    border-radius: 12px;
    transition: transform 0.5s;
}

.news-card-main:hover img {
    transform: scale(1.05);
}

.object-fit-cover {
    object-fit: cover;
}

.badge-destacado {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 14px;
    z-index: 2;
}

/* Recorte inteligente de texto (evita que las tarjetas se desalineen) */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 .candidate-card {
            background: var(--surface-container-lowest);
            border: 1px solid var(--outline-variant);
            border-radius: 12px;
            padding: 2rem;
            margin-top: -60px;
            position: relative;
            z-index: 2;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        }

        .candidate-img-wrapper {
            border-radius: 8px;
            overflow: hidden;
            aspect-ratio: 4/5;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        }

        .badge-role {
            background-color: var(--secondary-container);
            color: #004866;
            padding: 4px 16px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: inline-block;
            margin-bottom: 1rem;
        }

        .section-title-border {
            border-left: 4px solid var(--secondary);
            padding-left: 1.5rem;
            margin-bottom: 3rem;
        }

        .member-card {
            background: var(--surface-container-lowest);
            border: 1px solid var(--outline-variant);
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s ease;
            height: 100%;
        }

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

        .member-img-container {
            position: relative;
            aspect-ratio: 1/1;
            overflow: hidden;
        }

        .member-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .member-card:hover .member-img-container img {
            transform: scale(1.1);
        }

        .social-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 61, 110, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
        }

        .member-card:hover .social-overlay {
            opacity: 1;
            transform: translateY(0);
        }

        .social-btn {
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            text-decoration: none;
            transition: background 0.2s, color 0.2s;
        }

        .social-btn:hover {
            background: var(--primary);
            color: white;
        }

        .engagement-section {
            background-color: var(--surface-container-high);
            border-radius: 24px;
            padding: 5rem 2rem;
            text-align: center;
            margin-top: 80px;
        }

        .footer {
            background: var(--surface-container-lowest);
            border-top: 1px solid var(--outline-variant);
            padding: 60px 0;
            margin-top: 80px;
        }

        .material-symbols-outlined {
            vertical-align: middle;
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .btn-outline-primary-custom {
            border: 2px solid var(--primary);
            color: var(--primary);
            font-weight: 600;
            padding: 12px 32px;
            border-radius: 8px;
            transition: all 0.3s;
        }

        .btn-outline-primary-custom:hover {
            background: var(--primary);
            color: white;
        }

        .btn-primary-custom {
            background: var(--primary);
            color: white;
            font-weight: 600;
            padding: 16px 40px;
            border-radius: 8px;
            border: none;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .btn-surface-custom {
            background: white;
            color: var(--primary);
            border: 2px solid var(--primary);
            font-weight: 600;
            padding: 16px 40px;
            border-radius: 8px;
        }

        .text-on-surface-variant {
            color: var(--on-surface-variant);
        }
    /* ==========================================================================
   VISTA DE EQUIPO Y CONTACTO
   ========================================================================== */

/* Hero con imagen de fondo */
.hero-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    /* Cambia la URL por la ruta real de tu imagen subida a Joomla */
    background: linear-gradient(rgba(0, 61, 110, 0.8), rgba(0, 61, 110, 0.8)), 
                url('../../../images/fondo-oficina.jpg') center/cover no-repeat;
}

/* Caja gris inferior */
.engagement-section {
    background-color: var(--surface-container-high, #dde9ff);
    border-radius: 24px;
    padding: 4rem 2rem;
}

/* Botones personalizados */
.btn-primary-custom {
    background: var(--primary-color);
    color: var(--white);
    font-weight: 600;
    padding: 16px 40px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, background 0.2s;
}

.btn-primary-custom:hover {
    background: var(--primary-container);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-surface-custom {
    background: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    font-weight: 600;
    padding: 14px 40px; /* Un poco menos de padding compensando el borde */
    border-radius: 8px;
    transition: all 0.3s;
}

.btn-surface-custom:hover {
    background: var(--primary-color);
    color: var(--white);
}