/*
Theme Name: FIEA Ecuador Moderno
Description: Nuevo diseño UI/UX para la página de inicio de FIEA
Author: Ian Andre Vera Perez 2026
Template: astra
Version: 1.0.1
*/

:root {
    --fiea-blue: #0a3d6b;
    --fiea-accent: #2e8b57;
    --text-dark: #333333;
    --bg-light: #f8f9fa;
    --transition: all 0.3s ease;
}

/* Base */
.custom-fiea-home,
.custom-fiea-about,
.custom-fiea-axes,
.custom-fiea-fields,
.custom-fiea-warmi,
.custom-fiea-projects,
.custom-fiea-news {
    font-family: "Inter", sans-serif;
}

.custom-fiea-home .container,
.custom-fiea-about .container,
.custom-fiea-axes .container,
.custom-fiea-fields .container,
.custom-fiea-warmi .container,
.custom-fiea-projects .container,
.custom-fiea-news .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-right: 20px;
    padding-left: 20px;
}

.custom-fiea-home section,
.custom-fiea-about section,
.custom-fiea-axes section {
    padding: 80px 0;
}

.fade-in-section {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Encabezado transparente */
header#masthead,
.elementor-location-header {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    background: transparent !important;
}

.site-content,
.ast-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero general */
.hero-section {
    margin-top: 0;
    padding-top: 180px !important;
    padding-bottom: 120px !important;
    color: #ffffff;
    text-align: center;
    background:
        linear-gradient(rgba(10, 61, 107, 0.8), rgba(10, 61, 107, 0.8)),
        url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1920&q=80") center / cover;
}

.hero-section h1 {
    margin-bottom: 20px;
    color: #ffffff;
    font-size: clamp(2.5rem, 5vw, 4rem);
}

.hero-section p {
    max-width: 600px;
    margin: 0 auto 40px;
    font-size: 1.2rem;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Botones */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    border: 2px solid var(--fiea-accent);
    color: #ffffff;
    background: var(--fiea-accent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    border-color: var(--fiea-accent);
    color: var(--fiea-accent);
    background: #ffffff;
}

.btn-outline {
    border: 2px solid #ffffff;
    color: #ffffff;
    background: transparent;
}

.btn-outline:hover,
.btn-outline:focus-visible {
    color: var(--fiea-blue);
    background: #ffffff;
}

.btn:disabled,
.btn-admin-edit:disabled,
.btn-admin-delete:disabled {
    cursor: wait;
    opacity: 0.65;
}

/* Inicio */
.custom-fiea-home h2 {
    margin-bottom: 50px;
    color: var(--fiea-blue);
    font-size: 2.5rem;
    text-align: center;
}

.programs-grid,
.involved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.card {
    padding: 30px;
    overflow: hidden;
    border-top: 4px solid var(--fiea-accent);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.card h3 {
    margin-bottom: 15px;
    color: var(--fiea-blue);
    font-size: 1.3rem;
}

.card-link {
    display: inline-block;
    margin-top: 15px;
    color: var(--fiea-accent);
    font-weight: 700;
    text-decoration: none;
}

.impact-section {
    color: #ffffff;
    background: var(--fiea-blue);
}

.impact-section h2 {
    color: #ffffff;
}

.impact-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 30px;
    text-align: center;
}

.impact-stat .counter {
    display: block;
    color: var(--fiea-accent);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.impact-stat p {
    margin-top: 10px;
    font-size: 1.2rem;
}

.involved-section {
    background: var(--bg-light);
}

.involved-card {
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    background: var(--fiea-blue);
}

.involved-card h3 {
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 2rem;
}

/* About us */
.hero-about {
    padding-top: 240px !important;
    padding-bottom: 120px !important;
    text-align: center;
    background:
        linear-gradient(rgba(10, 61, 107, 0.85), rgba(10, 61, 107, 0.85)),
        url("https://images.unsplash.com/photo-1528605248644-14dd04022da1?auto=format&fit=crop&w=1920&q=80") center / cover !important;
}

.hero-about h1,
.hero-axes h1,
.hero-fields h1,
.hero-warmi h1,
.hero-projects h1,
.hero-news h1 {
    margin-bottom: 15px;
    color: #ffffff !important;
    font-size: clamp(2.5rem, 5vw, 4rem);
}

.hero-about p,
.hero-axes p,
.hero-fields p,
.hero-warmi p,
.hero-projects p,
.hero-news p {
    max-width: 800px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.3rem;
}

.custom-fiea-about .about-grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: -100px;
}

.custom-fiea-about .card {
    padding: 40px;
    border-top: 4px solid var(--fiea-accent);
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.custom-fiea-about .card h3 {
    margin-bottom: 15px;
    color: var(--fiea-blue);
    font-size: 1.5rem;
}

.history-section {
    text-align: center;
    background: #ffffff;
}

.history-content {
    max-width: 800px;
    margin: 0 auto;
}

.history-content h2 {
    margin-bottom: 30px;
    color: var(--fiea-blue);
    font-size: 2.5rem;
}

.history-content p {
    margin-bottom: 20px;
    color: #444444;
    font-size: 1.15rem;
    line-height: 1.8;
}

/* Axes of action */
.hero-axes {
    padding-top: 240px !important;
    padding-bottom: 120px !important;
    text-align: center;
    background:
        linear-gradient(rgba(10, 61, 107, 0.85), rgba(10, 61, 107, 0.85)),
        url("https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&w=1920&q=80") center / cover !important;
}

.custom-fiea-axes .axes-grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: -100px;
}

/* Fields of action */
.custom-fiea-fields .fields-content-section {
    padding: 80px 0;
    background: var(--bg-light);
}

.hero-fields {
    padding-top: 240px !important;
    padding-bottom: 120px !important;
    text-align: center;
    background:
        linear-gradient(rgba(10, 61, 107, 0.85), rgba(10, 61, 107, 0.85)),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1920&q=80") center / cover !important;
}

.field-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 50px;
    padding: 50px;
    border-left: 6px solid var(--fiea-accent);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.field-row.reverse {
    flex-direction: row-reverse;
    border-right: 6px solid var(--fiea-accent);
    border-left: 0;
}

.field-text,
.field-visual {
    flex: 1;
}

.field-text h2 {
    margin-bottom: 5px;
    color: var(--fiea-blue);
    font-size: 2.5rem;
    text-align: left;
}

.field-text h3 {
    margin-bottom: 20px;
    color: var(--fiea-accent);
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.field-text p {
    margin-bottom: 30px;
    color: #444444;
    font-size: 1.15rem;
    line-height: 1.7;
}

.field-impact {
    display: inline-flex;
    flex-direction: column;
    padding: 20px 40px;
    border-radius: 12px;
    color: #ffffff;
    text-align: center;
    background: var(--fiea-blue);
    box-shadow: 0 10px 20px rgba(10, 61, 107, 0.2);
}

.field-impact .counter {
    margin-bottom: 5px;
    color: var(--fiea-accent);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.field-impact span:not(.counter) {
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.field-visual {
    text-align: center;
}

.field-visual .svg-map {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.field-visual .svg-map:hover {
    transform: scale(1.05);
}

.field-visual .map-description {
    padding: 0 20px;
    color: #777777;
    font-size: 0.95rem;
    font-style: italic;
    text-align: center;
}

/* Warmi Yakukamak */
.hero-warmi {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    margin-top: -140px !important;
    padding-top: 260px !important;
    padding-bottom: 120px !important;
    border-radius: 0 !important;
    text-align: center;
    transform: translateX(-50%);
    background:
        linear-gradient(rgba(10, 61, 107, 0.85), rgba(10, 61, 107, 0.85)),
        url("https://images.unsplash.com/photo-1531206715517-5c0ba140b2b8?auto=format&fit=crop&w=1920&q=80") center / cover !important;
}

.warmi-stats-section {
    padding: 0;
    background: transparent !important;
}

.custom-fiea-warmi .stats-grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: -80px;
}

.custom-fiea-warmi .stat-card,
.compact-stats .stat-card {
    padding: 40px 20px;
    border: 0;
    border-bottom: 5px solid var(--fiea-accent);
    border-radius: 12px;
    color: #ffffff;
    text-align: center;
    background: var(--fiea-blue);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.custom-fiea-warmi .stat-card:hover,
.compact-stats .stat-card:hover {
    transform: translateY(-10px);
}

.custom-fiea-warmi .stat-number,
.compact-stats .stat-card .stat-number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 10px;
    color: var(--fiea-accent);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.custom-fiea-warmi .prefix,
.compact-stats .stat-card .prefix {
    margin-right: 5px;
    color: #ffffff;
    font-size: 2rem;
}

.custom-fiea-warmi .stat-card p,
.compact-stats .stat-card p {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.communities-list {
    margin-top: 20px;
    padding: 20px;
    border-left: 4px solid var(--fiea-accent);
    border-radius: 8px;
    background: var(--bg-light);
}

.communities-list h4 {
    margin-bottom: 10px;
    color: var(--fiea-blue);
    font-size: 1.1rem;
}

.communities-list ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.communities-list ul li {
    position: relative;
    padding-left: 20px;
    color: #444444;
    font-weight: 500;
}

.communities-list ul li::before {
    content: "•";
    position: absolute;
    top: -5px;
    left: 0;
    color: var(--fiea-accent);
    font-size: 1.5rem;
}

.custom-fiea-warmi .field-row {
    margin-top: 30px;
    border-top: 6px solid var(--fiea-accent);
    border-left: 6px solid var(--fiea-accent);
    border-top-left-radius: 16px;
}

.custom-fiea-warmi .field-row.reverse {
    border-right: 6px solid var(--fiea-accent);
    border-left: 0;
    border-top-right-radius: 16px;
    border-top-left-radius: 0;
}

/* Projects */
.hero-projects {
    position: relative;
    left: 50%;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: -140px !important;
    padding-top: 260px !important;
    padding-bottom: 140px !important;
    border-radius: 0 !important;
    text-align: center;
    transform: translateX(-50%);
    background:
        linear-gradient(rgba(10, 61, 107, 0.85), rgba(10, 61, 107, 0.85)),
        url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1920&q=80") center / cover !important;
}

.project-showcase {
    padding: 80px 0;
    background: #ffffff;
}

.project-showcase.alt-bg {
    border-top: 1px solid #eaeaea;
    background: var(--bg-light);
}

.project-header {
    margin-bottom: 40px;
    text-align: center;
}

.project-header h2 {
    margin-bottom: 10px;
    color: var(--fiea-blue);
    font-size: 2.8rem;
}

.location-tag {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    background: var(--fiea-accent);
}

.compact-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.compact-stats .stat-card {
    min-width: 250px;
}

.compact-stats .stat-card.alert-stat {
    border-bottom-color: var(--fiea-accent);
}

.compact-stats .stat-card.alert-stat .stat-number {
    color: var(--fiea-accent);
}

.infrastructure-list {
    margin-top: 25px;
    padding: 25px;
    border-left: 5px solid var(--fiea-blue);
    border-radius: 8px;
    background: var(--bg-light);
}

.infrastructure-list h4 {
    margin-bottom: 15px;
    color: var(--fiea-blue);
}

.infrastructure-list ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.infrastructure-list ul li {
    position: relative;
    padding-left: 25px;
    color: #444444;
}

.infrastructure-list ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--fiea-accent);
    font-weight: 700;
}

/* News */
.hero-news,
.custom-fiea-news .hero-news {
    position: relative;
    left: 50%;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: -140px !important;
    padding-top: 260px !important;
    padding-bottom: 120px !important;
    border-radius: 0 !important;
    text-align: center;
    transform: translateX(-50%);
    background:
        linear-gradient(rgba(10, 61, 107, 0.85), rgba(10, 61, 107, 0.85)),
        url("https://images.unsplash.com/photo-1577563908411-5077b6dc7624?auto=format&fit=crop&w=1920&q=80") center / cover !important;
}

.custom-fiea-news .news-content-section {
    padding: 80px 0;
    background: var(--bg-light);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px;
}

.news-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-top: 0;
}

.news-card:hover {
    transform: translateY(-10px);
}

.news-image {
    height: 220px;
    background-position: center;
    background-size: cover;
    transition: transform 0.5s ease;
}

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

.news-content {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    padding: 30px;
    background: #ffffff;
}

.news-date {
    display: block;
    margin-bottom: 10px;
    color: var(--fiea-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.news-content h3 {
    margin-bottom: 15px;
    color: var(--fiea-blue);
    font-size: 1.4rem;
}

.news-card.is-removing {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.no-news-message {
    grid-column: 1 / -1;
    text-align: center;
}

/* Controles del administrador */
.admin-news-controls {
    position: relative;
    z-index: 20;
    margin-top: -30px;
    margin-bottom: 40px;
    text-align: right;
}

.admin-btn {
    box-shadow: 0 10px 20px rgba(46, 139, 87, 0.3);
}

.admin-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eeeeee;
}

.btn-admin-edit,
.btn-admin-delete {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 0;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.btn-admin-edit {
    color: var(--fiea-blue);
    background: #f0f0f0;
}

.btn-admin-edit:hover,
.btn-admin-edit:focus-visible {
    color: var(--fiea-accent);
    background: #e0e0e0;
}

.btn-admin-delete {
    color: #e74c3c;
    background: #ffebee;
}

.btn-admin-delete:hover,
.btn-admin-delete:focus-visible {
    color: #c0392b;
    background: #ffcdd2;
}

/* Modal nativo */
dialog.news-modal-native {
    width: min(90%, 600px);
    max-width: 600px;
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 12px;
    background: transparent;
}

dialog.news-modal-native:not([open]) {
    display: none;
}

dialog.news-modal-native::backdrop {
    background: rgba(10, 61, 107, 0.95);
    backdrop-filter: blur(5px);
}

.news-modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    padding: 40px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.form-close-native {
    margin: 0;
}

.close-modal {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 2;
    padding: 0 6px;
    border: 0;
    color: #777777;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    transition: color 0.3s ease;
}

.close-modal:hover,
.close-modal:focus-visible {
    color: #e74c3c;
}

.news-modal-content h2 {
    margin-bottom: 20px;
    padding-right: 30px;
    color: var(--fiea-blue);
}

.news-modal-content label {
    display: block;
    margin-top: 15px;
    color: #444444;
    font-weight: 700;
}

.news-modal-content input[type="text"],
.news-modal-content textarea,
.news-modal-content input[type="file"] {
    width: 100%;
    margin-top: 5px;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    font: inherit;
    background: #ffffff;
}

.news-modal-content input[type="text"]:focus,
.news-modal-content textarea:focus,
.news-modal-content input[type="file"]:focus {
    border-color: var(--fiea-accent);
    outline: 3px solid rgba(46, 139, 87, 0.15);
}

.field-help {
    display: block;
    margin-top: 6px;
    color: #666666;
    font-size: 0.85rem;
}

.btn-save-article {
    width: 100%;
    margin-top: 20px;
}

/* Responsive */
@media (max-width: 900px) {
    .field-row,
    .field-row.reverse,
    .custom-fiea-warmi .field-row,
    .custom-fiea-warmi .field-row.reverse {
        flex-direction: column;
        padding: 30px;
        border-right: 0;
        border-left: 0;
        text-align: center;
    }

/* -----------------------------------------
       MENÚ DESPLEGABLE DE ELEMENTOR (Premium Override)
       ----------------------------------------- */
    /* 1. Ocultamos y preparamos el menú nativo de Elementor */
    .elementor-nav-menu--dropdown {
        display: block !important; 
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        
        /* Fondo Premium: Azul corporativo con desenfoque */
        background-color: rgba(10, 61, 107, 0.95) !important; 
        backdrop-filter: blur(10px); 
        -webkit-backdrop-filter: blur(10px);
        
        /* Estado inicial: Oculto y elevado */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        z-index: 9999;
    }

    /* 2. El disparo: Cuando JS pasa el aria-expanded a true */
    body.fiea-mobile-menu-active .elementor-nav-menu--dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* 3. Estilo para los enlaces de Elementor */
    .elementor-nav-menu--dropdown a {
        color: #ffffff !important;
        padding: 16px 25px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        font-size: 1.15rem;
        transition: padding-left 0.3s ease;
    }

    /* Detalle UX al presionar en el celular */
    .elementor-nav-menu--dropdown a:active {
        background-color: rgba(255, 255, 255, 0.1) !important;
        padding-left: 30px !important;
    }

    .field-text h2 {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .hero-buttons,
    .admin-actions {
        flex-direction: column;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .admin-news-controls {
        text-align: center;
    }

    .communities-list ul {
        grid-template-columns: 1fr;
    }

    dialog.news-modal-native {
        width: calc(100% - 24px);
    }

    .news-modal-content {
        padding: 32px 20px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =======================================================
   NEWS OPTIMIZADO: PEGAR AL FINAL DE STYLE.CSS
   ======================================================= */

.custom-fiea-news .news-content-section {
    padding: 80px 0;
    background: var(--bg-light, #f8f9fa);
}

.custom-fiea-news .news-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(300px, 1fr)
    );
    gap: 32px;
}

.custom-fiea-news .news-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-top: 0;
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}

.custom-fiea-news .news-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #e9ecef;
}

.custom-fiea-news .news-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

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

.custom-fiea-news .news-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 30px;
    background: #ffffff;
}

.custom-fiea-news .card-link {
    margin-top: auto;
    padding-top: 15px;
}

.custom-fiea-news .admin-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eeeeee;
}

.custom-fiea-news .news-card.is-removing {
    opacity: 0;
    transform: scale(0.94);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* Previsualización de múltiples imágenes */

.news-image-preview {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(82px, 1fr)
    );
    gap: 10px;
    max-height: 230px;
    margin-top: 12px;
    overflow-y: auto;
}

.news-preview-item {
    position: relative;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    aspect-ratio: 1;
    background: #f1f5f9;
}

.news-preview-item:first-child {
    border-color: var(
        --fiea-accent,
        #2e8b57
    );
}

.news-preview-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-preview-item span {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 6px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(
        10,
        61,
        107,
        0.88
    );
}

.news-preview-item:first-child span {
    background: var(
        --fiea-accent,
        #2e8b57
    );
}

.field-help {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.4;
}

.btn-save-article {
    width: 100%;
    margin-top: 20px;
}

/* Modal con desplazamiento interno */

dialog.news-modal-native {
    width: min(92%, 640px);
    max-width: 640px;
    max-height: 92vh;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: transparent;
}

dialog.news-modal-native::backdrop {
    background: rgba(
        10,
        61,
        107,
        0.92
    );
    backdrop-filter: blur(4px);
}

dialog.news-modal-native .news-modal-content {
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    padding: 36px;
    overflow-y: auto;
    border-radius: 12px;
    background: #ffffff;
}

dialog.news-modal-native input[type="text"],
dialog.news-modal-native textarea,
dialog.news-modal-native input[type="file"] {
    width: 100%;
    box-sizing: border-box;
}

/* Paginación */

.news-pagination {
    margin-top: 50px;
}

.news-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-pagination a,
.news-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px 13px;
    border-radius: 8px;
    color: var(
        --fiea-blue,
        #0a3d6b
    );
    font-weight: 700;
    text-decoration: none;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(
        0,
        0,
        0,
        0.08
    );
}

.news-pagination .current,
.news-pagination a:hover {
    color: #ffffff;
    background: var(
        --fiea-accent,
        #2e8b57
    );
}

@media (max-width: 640px) {
    .custom-fiea-news .news-grid {
        grid-template-columns: 1fr;
    }

    dialog.news-modal-native .news-modal-content {
        padding: 32px 20px 24px;
    }

    .news-image-preview {
        grid-template-columns:
            repeat(3, 1fr);
    }
}

/* =======================================================
   ESTILOS: VISTA INDIVIDUAL DE NOTICIA (SINGLE POST)
   ======================================================= */

/* Hero Dinámico - Ancho Completo */
.custom-fiea-single .hero-single {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -140px !important; 
    padding-top: 260px !important; 
    padding-bottom: 220px !important; /* Espacio extra abajo para que la tarjeta se superponga */
    border-radius: 0 !important; 
    text-align: center;
}

.custom-fiea-single .hero-single h1 {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    color: white !important;
    margin-bottom: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
}

/* Etiqueta de Fecha en el Hero */
.custom-fiea-single .single-date {
    display: inline-block;
    background: var(--fiea-accent, #2E8B57);
    color: white;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.95rem;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(46,139,87,0.4);
}

/* 
  Contenedor Principal: 
  Lo hacemos más estrecho (800px) porque las líneas largas cansan la vista, 
  y le damos un margin-top negativo para montarlo sobre la imagen azul. 
*/
.custom-fiea-single .single-container {
    max-width: 850px; 
    margin: 0 auto;
    padding: 0 20px;
    margin-top: -120px; /* ¡La magia del Overlap! */
    position: relative;
    z-index: 10;
    margin-bottom: 80px;
}

.custom-fiea-single .single-card {
    background: white;
    padding: 60px;
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    border-top: 6px solid var(--fiea-accent, #2E8B57);
}

/* Tipografía optimizada para lectura de blogs/noticias */
.custom-fiea-single .post-content {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
}

.custom-fiea-single .post-content h2, 
.custom-fiea-single .post-content h3 {
    color: var(--fiea-blue, #0A3D6B);
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Si suben imágenes dentro del texto de la noticia */
.custom-fiea-single .post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* Área del botón final */
.custom-fiea-single .single-footer {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    text-align: center;
}

.custom-fiea-single .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: bold;
}

/* =======================================================
   ESTILOS: PÁGINA GET INVOLVED (ÚNETE A NOSOTROS)
   ======================================================= */

/* Reutilizamos el concepto del Hero a ancho completo */
.custom-fiea-join .hero-single {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -140px !important; 
    padding-top: 260px !important; 
    padding-bottom: 220px !important; 
    border-radius: 0 !important; 
    text-align: center;
}

.custom-fiea-join .hero-single h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: white !important;
    margin-bottom: 10px;
}

.custom-fiea-join .hero-single p {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Efecto Overlap de la tarjeta blanca */
.custom-fiea-join .single-container {
    max-width: 850px; 
    margin: 0 auto;
    padding: 0 20px;
    margin-top: -120px; 
    position: relative;
    z-index: 10;
    margin-bottom: 80px;
}

.custom-fiea-join .single-card {
    background: white;
    padding: 60px 40px;
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    border-top: 6px solid var(--fiea-accent, #2E8B57);
    text-align: center; 
}

/* Tipografía de la invitación */
.custom-fiea-join .join-icon {
    font-size: 3.5rem;
    color: var(--fiea-accent, #2E8B57);
    margin-bottom: 20px;
}

.custom-fiea-join .join-title {
    color: var(--fiea-blue, #0A3D6B);
    font-size: 2.2rem;
    margin-bottom: 30px;
}

.custom-fiea-join .join-text-content {
    max-width: 700px;
    margin: 0 auto;
}

.custom-fiea-join .join-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.custom-fiea-join .highlight-text {
    font-weight: bold;
    color: var(--fiea-blue, #0A3D6B);
}

/* Botón gigante hacia Linktree */
.custom-fiea-join .join-cta-wrapper {
    margin: 50px 0 30px 0;
}

.custom-fiea-join .btn-join {
    font-size: 1.2rem;
    padding: 16px 40px;
    border-radius: 50px;
    background-color: var(--fiea-accent, #2E8B57);
    color: white;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(46,139,87,0.3);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.custom-fiea-join .btn-join:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(46,139,87,0.5);
    background-color: #246e45; /* Un tono un poco más oscuro al pasar el mouse */
    color: white;
}

.custom-fiea-join .cta-hint {
    margin-top: 15px;
    color: #999;
}

/* Separador y pie de tarjeta */
.custom-fiea-join .join-divider {
    border: 0;
    height: 1px;
    background: #eaeaea;
    margin: 40px auto;
    width: 50%;
}

.custom-fiea-join .join-footer-info p {
    font-size: 1rem;
    color: #777;
    margin: 5px 0;
}

.custom-fiea-join .join-footer-info strong {
    color: var(--fiea-blue, #0A3D6B);
}

/* =======================================================
   CORRECCIONES FINALES PARA NEWS
   ======================================================= */

/*
 * Evita el zoom tanto sobre el contenedor como
 * sobre la propia imagen.
 */
/*.custom-fiea-news .news-card:hover .news-image,
.custom-fiea-news .news-card:hover .news-image img {
    transform: none !important;
}*/

/*
 * Elimina cualquier transición de escala heredada
 * del CSS anterior.
 */
.custom-fiea-news .news-image,
.custom-fiea-news .news-image img {
    transform: none !important;
    transition: none !important;
}

.custom-fiea-news .news-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #e9ecef;
}

.custom-fiea-news .news-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*
 * Campo del contenido completo.
 */
#news-full-content {
    min-height: 190px;
    resize: vertical;
    line-height: 1.6;
}

/*
 * El modal tiene desplazamiento interno para que
 * el nuevo campo no lo haga más alto que la pantalla.
 */
dialog.news-modal-native {
    width: min(92%, 660px);
    max-width: 660px;
    max-height: 92vh;
    overflow: hidden;
}

dialog.news-modal-native .news-modal-content {
    width: 100%;
    max-width: 660px;
    max-height: 92vh;
    padding: 36px;
    overflow-y: auto;
    box-sizing: border-box;
}

/*
 * Todos los campos respetan el ancho del modal.
 */
dialog.news-modal-native input[type="text"],
dialog.news-modal-native input[type="file"],
dialog.news-modal-native textarea {
    width: 100%;
    box-sizing: border-box;
}

/*
 * Vista previa de múltiples fotografías.
 */
.news-image-preview {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(82px, 1fr)
    );
    gap: 10px;
    max-height: 220px;
    margin-top: 12px;
    overflow-y: auto;
}

.news-preview-item {
    position: relative;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    aspect-ratio: 1;
    background: #f1f5f9;
}

.news-preview-item:first-child {
    border-color: var(
        --fiea-accent,
        #2e8b57
    );
}

.news-preview-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none !important;
}

.news-preview-item span {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 6px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(
        10,
        61,
        107,
        0.88
    );
}

.news-preview-item:first-child span {
    background: var(
        --fiea-accent,
        #2e8b57
    );
}

@media (max-width: 640px) {
    dialog.news-modal-native .news-modal-content {
        padding: 32px 20px 24px;
    }

    .news-image-preview {
        grid-template-columns:
            repeat(3, 1fr);
    }
}

/* =======================================================
   ESTILOS: PÁGINA CONTACTO (UI/UX RENOVADA)
   ======================================================= */

/* Reseteamos el padding de la tarjeta para usar áreas de color completas */
.custom-fiea-contact .contact-card {
    padding: 0 !important; 
    overflow: hidden; /* Mantiene los bordes redondeados protegiendo el mapa y el fondo azul */
    display: flex;
    flex-direction: column;
}

/* La Cuadrícula Principal (Desktop) */
.custom-fiea-contact .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr; /* El form toma un poco más de espacio */
}

/* ================= COLUMNA IZQUIERDA (Info) ================= */
.custom-fiea-contact .contact-info-wrapper {
    background-color: var(--fiea-blue, #0A3D6B);
    color: white;
    padding: 50px 40px;
}

.custom-fiea-contact .contact-info-wrapper h2 {
    color: white !important;
    font-size: 2rem;
    margin-bottom: 10px;
}

.custom-fiea-contact .contact-subtitle {
    color: rgba(255,255,255,0.8);
    margin-bottom: 40px;
    font-size: 1rem;
}

.custom-fiea-contact .contact-details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.custom-fiea-contact .contact-details-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}

.custom-fiea-contact .contact-details-list i {
    font-size: 1.4rem;
    color: var(--fiea-accent, #2E8B57);
    margin-top: 5px;
}

.custom-fiea-contact .contact-details-list strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: white;
}

.custom-fiea-contact .contact-details-list span {
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Redes Sociales */
.custom-fiea-contact .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.custom-fiea-contact .social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.custom-fiea-contact .social-icons a:hover {
    background: var(--fiea-accent, #2E8B57);
    transform: translateY(-3px);
}

/* ================= COLUMNA DERECHA (Formulario) ================= */
.custom-fiea-contact .contact-form-wrapper {
    padding: 50px 40px;
    background: white;
}

.custom-fiea-contact .contact-form-wrapper h2 {
    color: var(--fiea-blue, #0A3D6B);
    font-size: 2rem;
    margin-bottom: 30px;
}

/* Inputs de Alta Accesibilidad */
.custom-fiea-contact .form-group {
    margin-bottom: 22px;
}

.custom-fiea-contact .form-group label {
    display: block;
    font-weight: bold;
    color: #444;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.custom-fiea-contact .form-group input,
.custom-fiea-contact .form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #ddd; /* Borde claro y definido */
    border-radius: 8px; /* Redondeado moderno */
    font-family: inherit;
    font-size: 1rem;
    background: #fdfdfd;
    color: #333;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Estado Focus (Imprescindible para buena UX) */
.custom-fiea-contact .form-group input:focus,
.custom-fiea-contact .form-group textarea:focus {
    outline: none;
    border-color: var(--fiea-accent, #2E8B57);
    box-shadow: 0 0 0 3px rgba(46,139,87,0.15);
}

.custom-fiea-contact .btn-submit-contact {
    width: 100%;
    font-size: 1.1rem;
    padding: 16px;
    border-radius: 8px;
    background-color: var(--fiea-accent, #2E8B57);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.custom-fiea-contact .btn-submit-contact:hover {
    background-color: #246e45;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(46,139,87,0.2);
}

/* ================= SECCIÓN DEL MAPA (Integrado abajo) ================= */
.custom-fiea-contact .contact-map-wrapper {
    width: 100%;
    height: 380px; /* Altura perfecta, ni muy grande ni muy pequeña */
    border-top: 1px solid #eee; /* Línea divisoria sutil */
    line-height: 0; 
}

.custom-fiea-contact .contact-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(15%); /* Ligera desaturación para que luzca corporativo */
    transition: filter 0.4s ease;
}

.custom-fiea-contact .contact-map-wrapper iframe:hover {
    filter: grayscale(0%); /* Vuelve a sus colores al poner el mouse */
}

/* ================= RESPONSIVE (Móviles y Tablets) ================= */
@media (max-width: 900px) {
    .custom-fiea-contact .contact-grid {
        grid-template-columns: 1fr; /* Una columna apilada */
    }
    
    .custom-fiea-contact .single-container {
        margin-top: -60px; /* Menos overlap en móviles */
    }
}


/* =======================================================
   PARCHE UI/UX DEFINITIVO: NAVBAR Y VISTA DE LECTURA
   ======================================================= */

/* -------------------------------------------------------
   1. REPARACIÓN DEL NAVBAR (Menú de Navegación)
   Forzamos color blanco por defecto y azul en hover
------------------------------------------------------- */
.site-header .main-header-menu .menu-link,
.site-header .main-header-menu .menu-item > a {
    color: #ffffff !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.site-header .main-header-menu .menu-link:hover,
.site-header .main-header-menu .menu-item > a:hover {
    color: var(--fiea-blue, #0A3D6B) !important;
}

/* Aseguramos que el fondo del header sea 100% transparente sobre el Hero */
.ast-theme-transparent-header .site-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Línea sutil elegante */
}


/* -------------------------------------------------------
   2. REPARACIÓN DEL DESBORDAMIENTO DE TEXTO (Word-Wrap)
   Evita que palabras sin espacios o URLs largas rompan la tarjeta
------------------------------------------------------- */
.custom-fiea-single .single-card {
    padding: 60px 50px !important; /* Blindamos el padding interno */
    max-width: 100%;
    
    /* LA MAGIA: Obliga al navegador a cortar textos imposibles */
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    -webkit-hyphens: auto;
    hyphens: auto;
    
    /* Contiene elementos flotantes y márgenes negativos */
    overflow: hidden; 
}


/* -------------------------------------------------------
   3. REPARACIÓN DE IMÁGENES Y GALERÍAS (Bloques de WP)
   Evita que las fotos se estiren o se peguen a los bordes
------------------------------------------------------- */
.custom-fiea-single .post-content {
    max-width: 100%;
}

.custom-fiea-single .post-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    display: block; /* Elimina márgenes extraños abajo de la imagen */
    margin: 20px auto;
}

/* Neutralizamos los márgenes negativos de las galerías de WordPress */
.custom-fiea-single .post-content .wp-block-gallery,
.custom-fiea-single .post-content .gallery {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}


/* -------------------------------------------------------
   4. LIMPIEZA DE "BASURA" DEL TEMA PADRE
   Astra inyecta clases residuales de títulos, las ocultamos.
------------------------------------------------------- */
.custom-fiea-single header.entry-header.ast-header-without-markup,
.custom-fiea-single .ast-single-post-order {
    display: none !important;
}


/* -------------------------------------------------------
   5. RESPONSIVE OPTIMIZADO (Para vista móvil)
------------------------------------------------------- */
@media (max-width: 768px) {
    .custom-fiea-single .single-card {
        padding: 40px 25px !important; /* Padding más amigable en celulares */
    }
    
    /* Mantenemos legibilidad del menú en móvil (hamburguesa) */
    .ast-builder-menu-mobile .main-header-menu .menu-item > a {
        color: var(--fiea-blue, #0A3D6B) !important; /* En móvil sí necesitamos que sea oscuro */
    }
}

/* =======================================================
   ESTILOS: SECCIÓN DE VIDEO CINEMÁTICO (HOME)
   ======================================================= */

.programs-video-section {
    padding: 80px 0; /* Espaciado arriba y abajo */
    background-color: var(--bg-light, #F8F9FA);
    display: flex;
    justify-content: center; /* Centra el video horizontalmente */
    align-items: center;     /* Centra el video verticalmente */
}

/* El "Marco" del video gigante */
.video-wrapper {
    width: 95%; /* Toma casi todo el ancho de la pantalla */
    max-width: 1600px; /* Evita que sea exageradamente gigante en monitores ultrawide */
    height: 75vh; /* Altura dinámica: 75% del alto de la pantalla del usuario */
    min-height: 500px; /* Para que no se aplaste en pantallas muy pequeñas */
    
    border-radius: 20px; /* Bordes redondeados elegantes */
    overflow: hidden; 
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.25); /* Sombra dramática profunda */
    border: 4px solid white; /* Marco muy fino y sofisticado */
    background-color: #000; 
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Pequeña animación de levitación al pasar el mouse por el video */
.video-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 45px 85px rgba(0, 0, 0, 0.35);
}

/* El reproductor forzado a llenar todo el cuadro sin deformarse */
.fiea-promo-video {
    width: 100%;
    height: 100%; /* Obliga al video a respetar los 75vh de altura */
    display: block; 
    object-fit: cover; /* Esencial: Recorta el video inteligentemente para que llene el contenedor entero, igual que un "background-size: cover" */
    pointer-events: none; /* Desactiva clics derecho o controles para que parezca una película de fondo */
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .video-wrapper {
        width: 95%;
        height: 45vh; /* En celulares es mejor que no ocupe toda la pantalla para poder hacer scroll */
        min-height: 250px;
        border-width: 3px;
        border-radius: 12px;
    }
}

/* =======================================================
   ESTILOS: SECCIÓN DE VIDEO (FULL BLEED / BORDE A BORDE)
   ======================================================= */

/* Evitamos el scroll horizontal en toda la página (Buenas prácticas UX para Full Bleed) */
body {
    overflow-x: hidden;
}

/* Rompemos el contenedor usando calc() para evitar el choque con la animación */
.programs-video-section {
    padding: 0 !important; 
    width: 100vw !important;
    max-width: 100vw !important;
    
    /* LA MAGIA: Calculamos el margen exacto para tocar los bordes sin usar transform */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    
    background-color: #000;
    line-height: 0; 
}

/* El "Marco" a pantalla completa */
.video-wrapper {
    width: 100%; 
    max-width: 100%;
    height: 85vh; /* Ocupa el 85% de la altura de tu monitor */
    min-height: 500px;
    
    border-radius: 0; 
    border: none; 
    box-shadow: none; 
    overflow: hidden; 
    position: relative;
}

/* El reproductor nativo */
.fiea-promo-video {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    
    object-fit: cover; /* Mantiene la inmersión sin bordes negros */
    
    display: block; 
    pointer-events: none; 
}

/* Responsivo para móviles */
@media (max-width: 900px) {
    .video-wrapper {
        height: 60vh; 
        min-height: 350px;
    }
}

/* =======================================================
   ESTILOS: ÚLTIMAS 3 NOTICIAS EN EL HOME
   ======================================================= */

.latest-news-section {
    padding: 80px 0;
    background-color: #ffffff; /* Contraste limpio contra las otras secciones */
}

/* Sistema de Grid ultra responsivo (3 columnas en PC, 1 en móvil) */
.home-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
}

/* Tarjeta individual */
.home-news-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra suave */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    border-top: 4px solid var(--fiea-accent, #2E8B57); /* Detalle verde corporativo arriba */
}

.home-news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* Sombra más fuerte al pasar el mouse */
}

/* Imagen de la tarjeta */
.home-news-img {
    height: 220px;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.home-news-card:hover .home-news-img {
    transform: scale(1.05); /* Efecto zoom fotográfico */
}

/* Cuerpo de la tarjeta */
.home-news-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: white;
    position: relative;
    z-index: 2;
}

.home-news-date {
    font-size: 0.85rem;
    color: var(--fiea-accent, #2E8B57);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.home-news-title {
    font-size: 1.35rem;
    color: var(--fiea-blue, #0A3D6B);
    margin-bottom: 15px;
    line-height: 1.4;
}

.home-news-excerpt {
    color: #555;
    margin-bottom: 25px;
    flex-grow: 1;
    line-height: 1.6;
}

/* Botón Central: "View All News" */
.btn-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: bold;
    padding: 16px 45px;
    border-radius: 50px;
    background-color: var(--fiea-blue, #0A3D6B); /* Tu azul corporativo */
    color: white !important;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(10, 61, 107, 0.25);
    transition: all 0.3s ease;
}

.btn-view-all:hover {
    background-color: #072b4c; /* Azul más oscuro al hover */
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(10, 61, 107, 0.4);
}

/* =======================================================
   ESTILOS: SECCIÓN OUR IMPACT
   ======================================================= */

.impact-section {
    padding: 100px 0;
    background-color: var(--fiea-blue, #0A3D6B); /* Fondo azul corporativo */
    color: white;
}

.impact-section .impact-main-title {
    color: white !important;
    font-size: 2.8rem;
    margin-bottom: 70px;
}

/* Cuadrícula de 3 columnas */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    align-items: center;
}

/* Contenedor de cada estadística */
.impact-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.impact-stat:hover {
    transform: translateY(-5px); /* Pequeña flotación al pasar el mouse */
}

/* Los logos (Mismo tono verde que los números) */
.impact-icon {
    font-size: 4rem; /* Tamaño gigante para que destaquen */
    color: var(--fiea-accent, #2E8B57); /* Verde corporativo de FIEA */
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); /* Pequeña sombra para darles volumen */
}

/* Animación de los números */
.impact-stat .counter {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--fiea-accent, #2E8B57); /* Verde corporativo de FIEA */
    line-height: 1;
    margin-bottom: 10px;
    font-family: inherit;
}

/* El texto descriptivo (Current Projects, etc) */
.impact-stat p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95); /* Blanco ligeramente suavizado */
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .impact-section {
        padding: 60px 0;
    }
    
    .impact-icon {
        font-size: 3.5rem;
    }

    .impact-stat .counter {
        font-size: 3.5rem;
    }
}

/* =======================================================
   REPARACIÓN UI/UX: RESPONSIVE DEL HEADER Y HERO
   ======================================================= */

/* -------------------------------------------------------
   1. REPARACIÓN DEL MENÚ HAMBURGUESA (ASTRA)
   Forzamos el ícono a blanco absoluto para que se vea
------------------------------------------------------- */
.ast-button-wrap .menu-toggle,
.ast-mobile-menu-buttons .menu-toggle {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Un borde sutil para que parezca un botón */
    border-radius: 6px !important;
    background: transparent !important;
}

/* Color de las 3 rayitas (SVG) de Astra */
.ast-button-wrap .menu-toggle .ast-mobile-svg,
.ast-mobile-menu-buttons .menu-toggle .ast-mobile-svg {
    fill: #ffffff !important;
}

/* -------------------------------------------------------
   2. REPARACIÓN DEL TEXTO DEL HERO (TIPOGRAFÍA FLUIDA)
------------------------------------------------------- */
.hero-section h1 {
    /* clamp(Mínimo en celular, Tamaño fluido, Máximo en PC) */
    font-size: clamp(2.2rem, 8vw, 4.5rem) !important;
    line-height: 1.2 !important;
    white-space: normal !important; /* Prohíbe que el texto se aplaste en una sola línea */
    word-wrap: break-word !important;
    margin-bottom: 20px !important;
}

.hero-section p {
    font-size: clamp(1rem, 4.5vw, 1.4rem) !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding: 0 15px; /* Evita que el texto toque los bordes del celular */
}

/* -------------------------------------------------------
   3. ADAPTACIÓN EXCLUSIVA PARA MÓVILES / TABLETS (max 921px)
------------------------------------------------------- */
@media (max-width: 921px) {
    /* Damos más espacio arriba para que el header no tape el título */
    .hero-section {
        padding-top: 140px !important;
        padding-bottom: 80px !important;
    }
    
    /* Apilamos los botones uno sobre otro en celular */
    .hero-section .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        margin-top: 30px;
    }
    
    .hero-section .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Fondo del menú desplegable cuando se abre en celular */
    .ast-builder-menu-mobile .main-navigation {
        background-color: var(--fiea-blue, #0A3D6B) !important;
    }
    
    /* Enlaces del menú desplegable en celular */
    .ast-builder-menu-mobile .main-navigation .menu-item > a {
        color: #ffffff !important;
    }
}

/* -------------------------------------------------------
   3. ADAPTACIÓN EXCLUSIVA PARA MÓVILES (Menú Secuestrado)
------------------------------------------------------- */
@media (max-width: 921px) {
    /* Ajustes del Hero para que no choque con el menú */
    .hero-section {
        padding-top: 140px !important;
        padding-bottom: 80px !important;
    }
    
    .hero-section .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        margin-top: 30px;
    }
    
    .hero-section .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    /* -----------------------------------------
       LA MAGIA DEL NUEVO NAVBAR
       ----------------------------------------- */
    /* 1. Elevamos todo el header para que NADA lo tape */
    .site-header, #masthead {
        z-index: 999999 !important;
        position: relative;
    }

    /* 2. Preparamos el contenedor del menú (Invisible por defecto) */
    .ast-builder-menu-mobile .main-navigation {
        display: block !important; /* Forzamos display para poder animarlo */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        
        /* Fondo Premium: Azul corporativo semitransparente con desenfoque */
        background-color: rgba(10, 61, 107, 0.95) !important; 
        backdrop-filter: blur(10px); 
        -webkit-backdrop-filter: blur(10px);
        
        /* Estado inicial: Oculto y ligeramente movido hacia arriba */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    /* 3. El disparo: Cuando JS añade nuestra clase, el menú cae suavemente */
    body.fiea-mobile-menu-active .ast-builder-menu-mobile .main-navigation {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* 4. Estilo elegante para los enlaces dentro del menú */
    .ast-builder-menu-mobile .main-navigation .menu-item > a {
        color: #ffffff !important;
        padding: 16px 25px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Línea divisoria muy fina */
        font-size: 1.15rem;
        transition: padding-left 0.3s ease;
    }

    /* Pequeño detalle de UX al tocar un enlace en el móvil */
    .ast-builder-menu-mobile .main-navigation .menu-item > a:active {
        background-color: rgba(255, 255, 255, 0.1);
        padding-left: 30px !important;
    }
}

/* =======================================================
   ESTILOS: SECCIÓN OUR PURPOSE (BENTO BOX LAYOUT)
   ======================================================= */

.purpose-section {
    padding: 100px 0;
    background-color: #ffffff;
}

/* La Cuadrícula Principal */
.purpose-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* La columna derecha es un poquito más ancha */
    gap: 30px;
    align-items: stretch; /* Obliga a que ambas columnas tengan la misma altura */
}

.purpose-left-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Estilo Base de las Tarjetas */
.purpose-card {
    border-radius: 20px; /* Curvas amplias modernas */
    padding: 45px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

.purpose-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

.purpose-card i {
    font-size: 2.8rem;
    margin-bottom: 20px;
    display: block;
}

.purpose-card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.purpose-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 0;
}

/* -------------------------------------
   TARJETA MISSION (Azul Corporativo)
------------------------------------- */
.mission-card {
    background-color: var(--fiea-blue, #0A3D6B);
    color: white;
    flex-grow: 1; /* Rellena el espacio uniformemente */
}
.mission-card i { color: var(--fiea-accent, #2E8B57); } /* Ícono verde */
.mission-card h3 { color: white !important; }
.mission-card p { color: rgba(255,255,255,0.9); }

/* -------------------------------------
   TARJETA VISION (Verde Corporativo)
------------------------------------- */
.vision-card {
    background-color: var(--fiea-accent, #2E8B57);
    color: white;
    flex-grow: 1;
}
.vision-card i { color: #ffffff; }
.vision-card h3 { color: white !important; }
.vision-card p { color: rgba(255,255,255,0.95); }

/* -------------------------------------
   TARJETA PILLARS & SVG (Fondo Blanco)
------------------------------------- */
.pillars-card {
    background-color: #f9fbfd; /* Blanco con un tono levísimo de azul */
    color: #333;
    justify-content: space-between;
    border-top: 6px solid var(--fiea-blue, #0A3D6B); /* Detalle corporativo arriba */
}

.pillars-card h3 {
    color: var(--fiea-blue, #0A3D6B) !important;
}

.pillars-card p {
    color: #555;
    margin-bottom: 20px;
}

/* Contenedor que abraza y dimensiona al SVG */
.sdg-svg-wrapper {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-grow: 1;
}

.sdg-svg-wrapper img {
    width: 100%;
    max-width: 450px; /* Limita el SVG para que no se vea desproporcionado */
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.08)); /* Le da vida al SVG plano */
}

/* Responsivo: Si la pantalla es móvil o tablet, apila todo */
@media (max-width: 950px) {
    .purpose-grid {
        grid-template-columns: 1fr;
    }
    .purpose-card {
        padding: 35px 25px;
    }
    .sdg-svg-wrapper img {
        max-width: 320px;
    }
}

/* =======================================================
   ESTILOS: SECCIÓN BOARD MEMBERS (ABOUT US)
   ======================================================= */

.board-section {
    padding: 80px 0 100px 0;
    background-color: #f8f9fa; /* Fondo un poco gris para que las tarjetas blancas resalten */
}

/* Cuadrícula responsiva automática */
.board-grid {
    display: grid;
    /* Crea tantas columnas de 300px como entren, ideal para PC y móvil */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Tarjeta individual */
.board-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid transparent;
}

.board-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* El Avatar Tipográfico (El reemplazo inteligente de la foto) */
.board-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px auto;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: #ffffff;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* Variaciones corporativas para los avatares */
.avatar-blue {
    background-color: var(--fiea-blue, #0A3D6B);
}

.avatar-green {
    background-color: var(--fiea-accent, #2E8B57);
}

/* Enlazamos sutilmente el color del borde superior al avatar */
.board-card:has(.avatar-blue):hover { border-top-color: var(--fiea-blue, #0A3D6B); }
.board-card:has(.avatar-green):hover { border-top-color: var(--fiea-accent, #2E8B57); }

/* Tipografía de la tarjeta */
.board-name {
    font-size: 1.35rem;
    color: var(--fiea-blue, #0A3D6B);
    margin-bottom: 15px;
    font-weight: 700;
}

.board-bio {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
}

/* =======================================================
   OUR TEAM
   ======================================================= */

.team-section {
    padding: 90px 0 110px;
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(46, 139, 87, 0.06),
            transparent 28%
        ),
        #ffffff;
    scroll-margin-top: 110px;
}

.team-section .container {
    width: min(100% - 40px, 1200px);
    margin-inline: auto;
}

.team-section-header {
    max-width: 720px;
    margin: 0 auto 70px;
    text-align: center;
}

.team-section-eyebrow,
.bio-eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--fiea-accent, #2E8B57);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.team-section-header h2 {
    margin: 0 0 16px;
    color: var(--fiea-blue, #0A3D6B);
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    line-height: 1.1;
}

.team-section-header p {
    margin: 0;
    color: #667085;
    font-size: 1.08rem;
    line-height: 1.7;
}

.team-category-block {
    margin-bottom: 85px;
}

.team-category-block:last-child {
    margin-bottom: 0;
}

.team-category-badge {
    display: block;
    width: auto;
    max-width: min(410px, 100%);
    max-height: 90px;
    margin: 0 0 38px;
    object-fit: contain;
    object-position: left center;
}

.team-category-badge-fallback {
    display: inline-flex;
    align-items: center;
    min-height: 64px;
    margin: 0 0 38px;
    padding: 14px 28px;
    color: #ffffff !important;
    background: var(--fiea-blue, #0A3D6B);
    border-radius: 12px 40px 40px 12px;
    font-size: clamp(1.15rem, 2.5vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.team-grid {
    display: grid;
    gap: 30px;
}

.team-grid--management {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-grid--technical,
.team-grid--social {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.team-card {
    display: flex;
    min-width: 0;
    min-height: 355px;
    padding: 34px 22px 28px;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-align: center;
    text-decoration: none !important;
    background: #ffffff;
    border: 1px solid #e8edf2;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(10, 61, 107, 0.07);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.team-card:hover,
.team-card:focus-visible {
    color: inherit;
    border-color: rgba(46, 139, 87, 0.5);
    box-shadow: 0 22px 48px rgba(10, 61, 107, 0.14);
    transform: translateY(-7px);
}

.team-card:focus-visible {
    outline: 3px solid rgba(46, 139, 87, 0.35);
    outline-offset: 4px;
}

.team-photo {
    position: relative;
    width: 170px;
    height: 170px;
    margin: 0 auto 25px;
    flex: 0 0 auto;
    overflow: hidden;
    background: #ffffff;
    border: 5px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 0 3px var(--fiea-blue, #0A3D6B),
        0 14px 30px rgba(10, 61, 107, 0.17);
}

.team-photo-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    background: #ffffff;
}

/*
 * No existe scale() sobre la foto.
 * La fotografía no se agranda al pasar el mouse.
 */
.team-card:hover .team-photo-image {
    transform: none;
}

.team-photo-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--fiea-blue, #0A3D6B),
            #17669d
        );
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.team-card-content {
    display: flex;
    width: 100%;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

.team-name {
    margin: 0 0 10px;
    color: var(--fiea-blue, #0A3D6B) !important;
    font-size: 1.3rem;
    font-weight: 750;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.team-card:hover .team-name {
    color: var(--fiea-accent, #2E8B57) !important;
}

.team-role {
    margin: 0;
    color: #77808c;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.team-profile-link {
    display: inline-flex;
    margin-top: auto;
    padding-top: 22px;
    align-items: center;
    gap: 7px;
    color: var(--fiea-accent, #2E8B57);
    font-size: 0.88rem;
    font-weight: 750;
}


/* =======================================================
   TEAM MEMBER BIOGRAPHY
   ======================================================= */

.custom-fiea-bio {
    min-height: 75vh;
    padding: 180px 0 110px;
    background:
        radial-gradient(
            circle at 15% 35%,
            rgba(46, 139, 87, 0.07),
            transparent 32%
        ),
        #ffffff;
}

.bio-container {
    width: min(100% - 40px, 1120px);
    margin-inline: auto;
}

.bio-back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--fiea-blue, #0A3D6B);
    font-weight: 750;
    text-decoration: none !important;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.bio-back-link:hover {
    color: var(--fiea-accent, #2E8B57);
}

.bio-back-link-top {
    margin-bottom: 42px;
}

.bio-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.4fr);
    gap: clamp(45px, 7vw, 90px);
    align-items: center;
}

.bio-photo-column {
    display: flex;
    justify-content: center;
}

.bio-photo-frame {
    position: relative;
    width: min(360px, 100%);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #ffffff;
    border: 8px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 0 4px rgba(10, 61, 107, 0.12),
        0 28px 60px rgba(10, 61, 107, 0.18);
}

.bio-photo-frame::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.bio-large-photo {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    background: #ffffff;
}

.bio-photo-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--fiea-blue, #0A3D6B),
            #17669d
        );
    font-size: 6rem;
    font-weight: 800;
}

.bio-content {
    min-width: 0;
}

.bio-title {
    margin: 0 0 28px;
    color: var(--fiea-blue, #0A3D6B) !important;
    font-size: clamp(2.5rem, 6vw, 4.2rem) !important;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.bio-text {
    color: #4b5563;
    font-size: 1.12rem;
    line-height: 1.9;
}

.bio-text p {
    margin: 0 0 1.35em;
}

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

.bio-back-button {
    margin-top: 38px;
    padding: 13px 24px;
    color: var(--fiea-blue, #0A3D6B);
    border: 2px solid var(--fiea-blue, #0A3D6B);
    border-radius: 999px;
}

.bio-back-button:hover {
    color: #ffffff;
    background: var(--fiea-blue, #0A3D6B);
    transform: translateX(-3px);
}


/* =======================================================
   RESPONSIVE
   ======================================================= */

@media (max-width: 1100px) {
    .team-grid--management,
    .team-grid--technical,
    .team-grid--social {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .custom-fiea-bio {
        padding-top: 150px;
    }

    .bio-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .bio-photo-frame {
        width: min(300px, 82vw);
    }

    .bio-eyebrow {
        text-align: center;
    }

    .bio-back-button {
        justify-content: center;
    }
}

@media (max-width: 680px) {
    .team-section {
        padding: 70px 0 85px;
    }

    .team-section .container,
    .bio-container {
        width: min(100% - 28px, 1200px);
    }

    .team-section-header {
        margin-bottom: 52px;
    }

    .team-category-block {
        margin-bottom: 65px;
    }

    .team-category-badge {
        margin-inline: auto;
        margin-bottom: 30px;
    }

    .team-category-badge-fallback {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
        border-radius: 14px;
    }

    .team-grid--management,
    .team-grid--technical,
    .team-grid--social {
        grid-template-columns: 1fr;
    }

    .team-card {
        min-height: 330px;
    }

    .team-photo {
        width: 150px;
        height: 150px;
    }

    .custom-fiea-bio {
        padding: 135px 0 80px;
    }

    .bio-back-link-top {
        margin-bottom: 34px;
    }

    .bio-grid {
        gap: 42px;
    }

    .bio-title {
        font-size: 2.5rem !important;
    }

    .bio-text {
        font-size: 1.04rem;
        line-height: 1.8;
    }
}

/* =======================================================
   ESTILOS: PÁGINA AXES OF ACTION
   ======================================================= */

/* 1. HERO Y OVERLAP */
.custom-fiea-axes .hero-single {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -140px !important; 
    padding-top: 260px !important; 
    padding-bottom: 220px !important; 
    border-radius: 0 !important; 
}

.custom-fiea-axes .single-container {
    max-width: 900px; 
    margin: 0 auto;
    margin-top: -120px; /* Superposición sobre el Hero */
    position: relative;
    z-index: 10;
    margin-bottom: 80px;
}

.custom-fiea-axes .single-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
    border-top: 6px solid var(--fiea-accent, #2E8B57);
}

/* Espacio para el SVG de Introducción */
/* Espacio Gigante para el SVG / Imagen de Introducción */
.axes-main-svg {
    width: 100%; /* Permite que ocupe el ancho disponible */
    max-width: 380px; /* Tamaño máximo espectacular sin romper la tarjeta */
    height: auto; /* Altura dinámica para que no se aplaste ni deforme */
    margin: 0 auto 40px auto; /* Más espacio en la parte inferior para que respire con el texto */
}

.axes-main-svg img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.12)); /* Sombra difuminada para darle volumen 3D */
    transition: transform 0.5s ease; /* Transición súper suave */
}

/* Interacción Premium al pasar el cursor */
.axes-main-svg:hover img {
    transform: scale(1.06); /* Ligero efecto de acercamiento (Zoom in) */
}

/* Ajuste Responsivo para Móviles */
@media (max-width: 768px) {
    .axes-main-svg {
        max-width: 260px; /* Un poco más pequeño en celulares para no ocupar toda la pantalla */
        margin-bottom: 30px;
    }
}

.axes-intro-text .highlight-p {
    font-size: 1.35rem;
    color: var(--fiea-blue, #0A3D6B);
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 25px;
}

.axes-intro-text p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.8;
}

/* 2. LAS 3 TARJETAS DE EJES (Diseño Feature Card) */
.axes-cards-section {
    padding: 20px 0 100px 0;
    background: #ffffff;
}

.axes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

/* La tarjeta ahora es un contenedor estructurado */
.axis-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden; /* Corta las esquinas del fondo de la diapo para que respete el borde */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

.axis-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

/* El Espacio Gigante para la Diapositiva */
.axis-card-cover {
    width: 100%;
    height: 240px; /* Altura ideal para diapositivas rectangulares */
    background-color: #f8f9fa; /* Fondo neutro gris claro */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-bottom: 3px solid var(--fiea-accent, #2E8B57); /* Línea verde corporativa separadora */
}

.axis-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Asegura que tu SVG se vea completo sin recortarse */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05)); /* Le da un poco de relieve a la diapo */
}

/* El cuerpo del texto */
.axis-card-body {
    padding: 35px 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.axis-card-body h3 {
    color: var(--fiea-blue, #0A3D6B);
    font-size: 1.7rem;
    margin-bottom: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.axis-subtitle {
    color: var(--fiea-accent, #2E8B57);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Sistema de Etiquetas (Pills) */
.axis-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.axis-tags span {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-blue {
    background-color: rgba(10, 61, 107, 0.1);
    color: var(--fiea-blue, #0A3D6B);
}

.tag-green {
    background-color: rgba(46, 139, 87, 0.12);
    color: var(--fiea-accent, #2E8B57);
}

.axis-subtags {
    font-size: 0.85rem;
    color: #888;
    font-weight: 600;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.axis-card-body p {
    color: #555;
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* =======================================================
   BIOGRAFÍA INDIVIDUAL DEL EQUIPO FIEA
   ======================================================= */

.fiea-profile-page {
    min-height: 100vh;
    padding: 190px 24px 110px !important;
    background:
        linear-gradient(
            180deg,
            #0A3D6B 0,
            #0A3D6B 350px,
            #F4F7FA 350px,
            #F4F7FA 100%
        ) !important;
}

.fiea-profile-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.fiea-profile-card {
    position: relative;
    padding: clamp(32px, 5vw, 68px);
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid rgba(10, 61, 107, 0.10);
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(10, 61, 107, 0.16);
}

.fiea-profile-grid {
    display: grid;
    grid-template-columns:
        minmax(280px, 390px)
        minmax(0, 1fr);
    gap: clamp(42px, 7vw, 86px);
    align-items: center;
}

.fiea-profile-photo-column {
    display: flex;
    justify-content: center;
}

.fiea-profile-photo-frame {
    display: grid;
    width: min(100%, 380px);
    aspect-ratio: 1 / 1;
    place-items: center;
    overflow: hidden;
    background: #FFFFFF;
    border: 6px solid #0A3D6B;
    border-radius: 50%;
    box-shadow:
        0 24px 48px rgba(10, 61, 107, 0.18);
}

.fiea-profile-photo {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    background: #FFFFFF;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.fiea-profile-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background:
        linear-gradient(
            145deg,
            #0A3D6B,
            #17649A
        );
    color: #FFFFFF;
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.fiea-profile-content {
    min-width: 0;
}

.fiea-profile-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #2E8B57;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.fiea-profile-title {
    margin: 0 0 12px !important;
    color: #0A3D6B !important;
    font-family: inherit !important;
    font-size:
        clamp(2.5rem, 5vw, 4.5rem) !important;
    font-style: normal !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.02 !important;
    text-transform: none !important;
}

.fiea-profile-role {
    margin: 0 0 30px !important;
    color: #627083;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-transform: uppercase;
}

.fiea-profile-biography {
    max-width: 700px;
    color: #3F4B59;
    font-size: 1.08rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
    word-break: normal;
}

.fiea-profile-biography > :first-child {
    margin-top: 0;
}

.fiea-profile-biography > :last-child {
    margin-bottom: 0;
}

.fiea-profile-biography p,
.fiea-profile-biography li,
.fiea-profile-biography a {
    overflow-wrap: anywhere;
}

.fiea-profile-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0A3D6B !important;
    font-weight: 800;
    text-decoration: none !important;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.fiea-profile-back:hover {
    color: #2E8B57 !important;
    transform: translateX(-3px);
}

.fiea-profile-back--top {
    margin-bottom: 36px;
}

.fiea-profile-back--bottom {
    margin-top: 36px;
    padding: 12px 22px;
    border: 2px solid #0A3D6B;
    border-radius: 999px;
}

.fiea-profile-back--bottom:hover {
    border-color: #2E8B57;
}

@media (max-width: 900px) {
    .fiea-profile-page {
        padding: 150px 18px 70px !important;
        background:
            linear-gradient(
                180deg,
                #0A3D6B 0,
                #0A3D6B 290px,
                #F4F7FA 290px,
                #F4F7FA 100%
            ) !important;
    }

    .fiea-profile-card {
        padding: 30px 22px 38px;
        border-radius: 22px;
    }

    .fiea-profile-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .fiea-profile-photo-frame {
        width: min(100%, 300px);
    }

    .fiea-profile-content {
        text-align: center;
    }

    .fiea-profile-biography {
        text-align: left;
    }

    .fiea-profile-back--top {
        margin-bottom: 28px;
    }
}

@media (max-width: 480px) {
    .fiea-profile-page {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    .fiea-profile-card {
        padding: 24px 16px 30px;
    }

    .fiea-profile-photo-frame {
        width: min(100%, 250px);
        border-width: 4px;
    }

    .fiea-profile-biography {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* =======================================================
   ESTILOS: FIELDS OF ACTION (MODERNO)
   ======================================================= */

/* Hero Section (Fondo de impacto) */
.hero-fields {
    padding: 160px 0 100px 0;
    background: linear-gradient(rgba(10,61,107,0.85), rgba(10,61,107,0.85)), url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&w=1920&q=80') center/cover !important;
    text-align: center;
    color: white;
}

.hero-fields h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: white !important;
}

.hero-fields p {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.9);
}

/* Sección de Contenido */
.fields-content-section {
    padding: 80px 0;
    background-color: #f4f6f8;
}

/* Tarjetas (Filas) */
.field-row {
    display: flex;
    align-items: center;
    gap: 60px;
    background: #ffffff;
    border-radius: 16px;
    padding: 60px;
    margin-bottom: 50px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    border-left: 8px solid var(--fiea-accent, #2E8B57); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.field-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.field-row.reverse {
    flex-direction: row-reverse;
    border-left: none;
    border-right: 8px solid var(--fiea-accent, #2E8B57);
}

/* Textos y Jerarquía */
.field-text {
    flex: 1.2;
}

.field-text h2 {
    font-size: 2.8rem;
    color: var(--fiea-blue, #0A3D6B);
    margin-bottom: 5px;
    font-weight: 700;
}

.field-text h3 {
    font-size: 1.1rem;
    color: var(--fiea-accent, #2E8B57);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    font-weight: 600;
}

.field-text p {
    font-size: 1.15rem;
    color: #444;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* Área Visual (Mapas/SVGs) */
.field-visual {
    flex: 1;
    text-align: center;
}

.svg-map {
    width: 100%;
    max-width: 350px;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.08));
}

.map-description {
    font-size: 0.9rem !important; /* Sobrescribe el p de .field-text */
    color: #888 !important;
    font-style: italic;
    line-height: 1.5 !important;
    max-width: 400px;
    margin: 0 auto !important;
}

/* Etiquetas de Provincias */
.b-provinces {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eaeaea;
}

.b-provinces h4 {
    font-size: 0.9rem;
    color: var(--fiea-blue, #0A3D6B);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    font-weight: 700;
}

.province-tags-small {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.p-tag-small {
    background: rgba(46, 139, 87, 0.08);
    color: var(--fiea-accent, #2E8B57);
    border: 1px solid rgba(46, 139, 87, 0.2);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: default;
}

.p-tag-small:hover {
    background: var(--fiea-accent, #2E8B57);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(46, 139, 87, 0.2);
}

.p-tag-small.zonal-tag {
    background: rgba(10, 61, 107, 0.08);
    color: var(--fiea-blue, #0A3D6B);
    border-color: rgba(10, 61, 107, 0.2);
}

.p-tag-small.zonal-tag:hover {
    background: var(--fiea-blue, #0A3D6B);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(10, 61, 107, 0.2);
}

/* Caja de Impacto (Contadores) */
.field-impact {
    background: var(--fiea-blue, #0A3D6B);
    border-radius: 12px;
    padding: 30px 50px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 15px 30px rgba(10,61,107,0.25);
}

.field-impact .counter {
    font-size: 4rem;
    color: var(--fiea-accent, #2E8B57);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    font-family: inherit;
}

.field-impact span:last-child {
    color: #ffffff;
    letter-spacing: 2.5px;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Responsivo */
@media (max-width: 950px) {
    .field-row, 
    .field-row.reverse {
        flex-direction: column;
        padding: 40px 25px;
        border-left: none;
        border-right: none;
        border-top: 8px solid var(--fiea-accent, #2E8B57);
        text-align: center;
    }
    
    .field-text h2 {
        font-size: 2.3rem;
    }
    
    .b-provinces h4 {
        text-align: center;
    }
    
    .province-tags-small {
        justify-content: center;
    }
    
    .field-impact {
        width: 100%;
    }
}

/* =======================================================
   ESTILOS: PROGRAMA WARMI YAKUKAMAK
   ======================================================= */

/* 1. Hero Adaptado al Diseño de la Captura */
.hero-warmi {
    padding: 200px 0 160px 0 !important;
}

.hero-warmi-content {
    display: flex;
    justify-content: flex-end; /* Mueve el texto a la derecha como en tu diseño */
}

.hero-text-right {
    max-width: 650px;
    text-align: right;
}

/* 2. Tarjetas de Estadísticas Superpuestas (Overlap) */
.warmi-stats-section {
    margin-top: -100px; /* Superpone las cajas sobre el Hero */
    position: relative;
    z-index: 10;
    margin-bottom: 60px;
}

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

.stat-card {
    background-color: var(--fiea-blue, #0A3D6B); /* Azul Corporativo */
    border-radius: 16px;
    padding: 45px 30px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    border-bottom: 6px solid var(--fiea-accent, #2E8B57); /* Línea verde debajo como en tu foto */
    transition: transform 0.4s ease;
}

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

.stat-number {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.stat-card .counter, .stat-card .prefix {
    color: var(--fiea-accent, #2E8B57); /* Verde Brillante */
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
}

.stat-card .prefix {
    font-size: 3rem; /* El signo $ un poco más pequeño */
    margin-right: 5px;
    margin-top: -15px;
}

.stat-card p {
    color: #ffffff;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    font-weight: 600;
}

/* 3. Estilos de Texto Zig-Zag */
.field-row {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 40px 0;
}

.field-row:hover {
    transform: none;
    box-shadow: none;
}

.communities-list {
    margin-top: 30px;
    background: rgba(46, 139, 87, 0.05);
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid var(--fiea-accent, #2E8B57);
}

.communities-list h4 {
    color: var(--fiea-blue, #0A3D6B);
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.communities-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.communities-list li {
    color: #555;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.communities-list li i {
    color: var(--fiea-accent, #2E8B57);
}

/* =======================================================
   4. LA MAGIA: FORMAS ORGÁNICAS (BLOBS)
   ======================================================= */
.organic-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.organic-blob {
    width: 100%;
    max-width: 500px;
    height: auto;
    
    /* MAGIA 1: drop-shadow crea sombra sobre la silueta de la imagen, no sobre un cuadro */
    filter: drop-shadow(0 25px 35px rgba(0,0,0,0.15)); 
    
    /* MAGIA 2: Animación de flotación suave */
    animation: floatOrganic 7s ease-in-out infinite; 
}

/* Animación que hace que el Blob respire y flote suavemente */
@keyframes floatOrganic {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(1.5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Responsivo Móvil */
@media (max-width: 900px) {
    .hero-warmi {
        padding: 160px 0 120px 0 !important;
        background: linear-gradient(rgba(10,61,107,0.8), rgba(10,61,107,0.8)), url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&w=1920&q=80') center/cover !important;
    }
    .hero-text-right {
        text-align: center;
    }
    .communities-list ul {
        grid-template-columns: 1fr;
    }
    .organic-blob {
        max-width: 350px;
        margin-top: 30px;
    }
}

/* =======================================================
   CORRECCIÓN FINAL DEL HERO WARMI
   SIN DEGRADADO Y CON TEXTO CENTRADO
   ======================================================= */

.custom-fiea-warmi .hero-warmi {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;

    width: 100vw !important;
    max-width: 100vw !important;

    left: 50%;
    margin-top: -140px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    /*
     * Conserva el hero a ancho completo.
     * No utiliza animación.
     */
    transform: translateX(-50%) !important;
    animation: none !important;
    transition: none !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: scroll !important;

    text-align: center !important;
}

/*
 * Capa azul completamente uniforme.
 * No tiene degradado de ningún tipo.
 */
.custom-fiea-warmi .hero-warmi-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(10, 61, 107, 0.55);

    pointer-events: none;
}

/*
 * Contenedor centrado horizontal y verticalmente.
 */
.custom-fiea-warmi .hero-warmi-content {
    position: relative;
    z-index: 2;

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

    min-height: 720px;
    padding-top: 190px;
    padding-bottom: 150px;

    text-align: center !important;
}

/*
 * Bloque completo del texto centrado.
 */
.custom-fiea-warmi .hero-text-right {
    width: 100%;
    max-width: 950px;

    margin-right: auto !important;
    margin-left: auto !important;

    text-align: center !important;
}

/*
 * Título centrado.
 */
.custom-fiea-warmi .hero-text-right h1 {
    max-width: 100%;
    margin: 0 auto 25px !important;

    color: #ffffff !important;

    font-size: clamp(2.7rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.08;
    text-align: center !important;
    text-transform: uppercase;

    text-shadow:
        0 3px 16px rgba(0, 0, 0, 0.28);
}

/*
 * Párrafo centrado.
 */
.custom-fiea-warmi .hero-text-right p {
    width: 100%;
    max-width: 850px;

    margin: 0 auto !important;

    color: rgba(255, 255, 255, 0.95) !important;

    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.7;
    text-align: center !important;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.30);
}

/*
 * Evita que cualquier clase visible mueva el hero.
 */
.custom-fiea-warmi .hero-warmi.is-visible {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
}

/* Tablets */
@media (max-width: 900px) {
    .custom-fiea-warmi .hero-warmi-content {
        min-height: 650px;
        padding-top: 170px;
        padding-right: 24px;
        padding-bottom: 130px;
        padding-left: 24px;
    }

    .custom-fiea-warmi .hero-text-right {
        max-width: 720px;
        text-align: center !important;
    }

    .custom-fiea-warmi .hero-text-right h1,
    .custom-fiea-warmi .hero-text-right p {
        text-align: center !important;
    }
}

/* Móviles */
@media (max-width: 600px) {
    .custom-fiea-warmi .hero-warmi-content {
        min-height: 600px;
        padding-top: 150px;
        padding-right: 18px;
        padding-bottom: 110px;
        padding-left: 18px;
    }

    .custom-fiea-warmi .hero-text-right h1 {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
    }

    .custom-fiea-warmi .hero-text-right p {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* =======================================================
   DISEÑO NATURAL WARMI: IMÁGENES, TEXTO Y ESQUINAS
   ======================================================= */

.custom-fiea-warmi .warmi-content-section,
.custom-fiea-warmi .fields-content-section {
    padding: 80px 0 110px;
    background:
        linear-gradient(
            180deg,
            #F8FAFC 0%,
            #FFFFFF 50%,
            #F8FAFC 100%
        );
}

/* =======================================================
   TARJETA PRINCIPAL
   ======================================================= */

.custom-fiea-warmi .field-row {
    position: relative;
    z-index: 1;

    display: grid !important;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.95fr);

    align-items: center;
    gap: clamp(40px, 6vw, 80px);

    width: 100%;
    margin: 0 0 70px;
    padding: clamp(42px, 5vw, 70px);

    overflow: hidden;

    border: 1px solid rgba(10, 61, 107, 0.08) !important;
    border-radius: 30px !important;

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #FBFCFD 100%
        ) !important;

    box-shadow:
        0 22px 55px rgba(10, 61, 107, 0.09) !important;

    transform: none !important;
    transition:
        box-shadow 0.3s ease,
        border-color 0.3s ease !important;
}

/*
 * Hover muy suave.
 * La imagen no se mueve.
 */
.custom-fiea-warmi .field-row:hover {
    border-color:
        rgba(46, 139, 87, 0.20) !important;

    box-shadow:
        0 28px 65px
        rgba(10, 61, 107, 0.13) !important;

    transform: none !important;
}

/* =======================================================
   ESQUINAS VERDES
   Ya no se dibuja un borde verde completo.
   ======================================================= */

.custom-fiea-warmi .field-row::before,
.custom-fiea-warmi .field-row::after {
    content: "";
    position: absolute;
    z-index: 3;

    width: 150px;
    height: 85px;

    pointer-events: none;
}

/*
 * Esquina superior izquierda.
 */
.custom-fiea-warmi .field-row::before {
    top: 0;
    left: 0;

    border-top:
        7px solid
        var(--fiea-accent, #2E8B57);

    border-left:
        7px solid
        var(--fiea-accent, #2E8B57);

    border-radius: 30px 0 0 0;
}

/*
 * Esquina inferior derecha.
 */
.custom-fiea-warmi .field-row::after {
    right: 0;
    bottom: 0;

    border-right:
        7px solid
        rgba(46, 139, 87, 0.65);

    border-bottom:
        7px solid
        rgba(46, 139, 87, 0.65);

    border-radius: 0 0 30px 0;
}

/*
 * En la fila invertida, las esquinas cambian
 * de orientación para acompañar a la imagen.
 */
.custom-fiea-warmi .field-row.reverse::before {
    right: 0;
    left: auto;

    border-top:
        7px solid
        var(--fiea-accent, #2E8B57);

    border-right:
        7px solid
        var(--fiea-accent, #2E8B57);

    border-left: 0;

    border-radius: 0 30px 0 0;
}

.custom-fiea-warmi .field-row.reverse::after {
    right: auto;
    left: 0;

    border-right: 0;

    border-bottom:
        7px solid
        rgba(46, 139, 87, 0.65);

    border-left:
        7px solid
        rgba(46, 139, 87, 0.65);

    border-radius: 0 0 0 30px;
}

/* =======================================================
   POSICIÓN DEL TEXTO Y LA IMAGEN
   ======================================================= */

/*
 * Filas normales:
 * texto a la izquierda, imagen a la derecha.
 */
.custom-fiea-warmi
.field-row:not(.reverse)
.field-text {
    grid-column: 1;
    grid-row: 1;
}

.custom-fiea-warmi
.field-row:not(.reverse)
.organic-visual {
    grid-column: 2;
    grid-row: 1;
}

/*
 * Fila invertida:
 * imagen a la izquierda, texto a la derecha.
 */
.custom-fiea-warmi
.field-row.reverse
.organic-visual {
    grid-column: 1;
    grid-row: 1;
}

.custom-fiea-warmi
.field-row.reverse
.field-text {
    grid-column: 2;
    grid-row: 1;
}

/* =======================================================
   TEXTOS
   ======================================================= */

.custom-fiea-warmi .field-text {
    position: relative;
    z-index: 2;

    min-width: 0;
    max-width: 660px;

    text-align: left;
}

/*
 * La fila con imagen a la izquierda conserva
 * el texto alineado hacia su imagen.
 */
.custom-fiea-warmi
.field-row.reverse
.field-text {
    margin-left: auto;
}

.custom-fiea-warmi .field-text h2 {
    max-width: 100%;
    margin: 0 0 12px;

    color:
        var(--fiea-blue, #0A3D6B) !important;

    font-size:
        clamp(2.4rem, 4vw, 3.6rem);

    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-align: left !important;
}

.custom-fiea-warmi .field-text h3 {
    margin: 0 0 28px;

    color:
        var(--fiea-accent, #2E8B57);

    font-size:
        clamp(0.9rem, 1.6vw, 1.08rem);

    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.custom-fiea-warmi .field-text p {
    max-width: 62ch;
    margin: 0 0 18px;

    color: #46515E;

    font-size:
        clamp(1rem, 1.5vw, 1.12rem);

    line-height: 1.8;
}

/* =======================================================
   CONTENEDOR DE LAS IMÁGENES
   ======================================================= */

.custom-fiea-warmi .organic-visual {
    position: relative;
    z-index: 2;

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

    width: 100%;
    min-width: 0;
    min-height: 390px;

    padding: 0 !important;
    overflow: visible;
}

/*
 * Fondo natural y tenue alrededor de la imagen.
 */
.custom-fiea-warmi .organic-visual::before {
    content: "";
    position: absolute;
    z-index: -1;

    width: 82%;
    aspect-ratio: 1 / 1;

    border-radius:
        45% 55% 61% 39% /
        43% 39% 61% 57%;

    background:
        radial-gradient(
            circle,
            rgba(46, 139, 87, 0.10) 0%,
            rgba(46, 139, 87, 0.04) 52%,
            transparent 72%
        );
}

/*
 * Las imágenes se mantienen estáticas.
 */
.custom-fiea-warmi .organic-blob {
    position: relative;

    display: block;

    width: 100%;
    max-width: 540px;
    max-height: 480px;

    margin: 0 auto;

    object-fit: contain;
    object-position: center;

    animation: none !important;
    transition: none !important;
    transform: none !important;

    filter:
        drop-shadow(
            0 22px 25px
            rgba(10, 61, 107, 0.18)
        );
}

/*
 * Mantiene la imagen inmóvil durante hover.
 */
.custom-fiea-warmi
.field-row:hover
.organic-blob,
.custom-fiea-warmi
.organic-visual:hover
.organic-blob {
    animation: none !important;
    transform: none !important;
}

/* =======================================================
   AJUSTES POR CADA IMAGEN
   ======================================================= */

/*
 * Project Context:
 * texto izquierdo e imagen derecha.
 */
.custom-fiea-warmi
.field-row--context
.organic-blob {
    max-width: 550px;
}

/*
 * The Approach:
 * imagen más grande a la izquierda.
 */
.custom-fiea-warmi
.field-row--approach
.organic-blob {
    max-width: 570px;
}

/*
 * Long-Term Impact:
 * la imagen original aparece más pequeña,
 * por eso aumentamos su escala de forma estática.
 */
.custom-fiea-warmi
.field-row--impact
.organic-blob {
    width: 110%;
    max-width: 620px;

    transform: scale(1.12) !important;
}

.custom-fiea-warmi
.field-row--impact:hover
.organic-blob {
    transform: scale(1.12) !important;
}

/* =======================================================
   LISTA DE COMUNIDADES
   ======================================================= */

.custom-fiea-warmi .communities-list {
    width: 100%;
    max-width: 630px;

    margin-top: 30px;
    padding: 25px 28px;

    border: 0;
    border-left:
        4px solid
        var(--fiea-accent, #2E8B57);

    border-radius: 14px;

    background:
        rgba(46, 139, 87, 0.07);

    box-shadow:
        inset 0 0 0 1px
        rgba(46, 139, 87, 0.06);
}

.custom-fiea-warmi .communities-list h4 {
    margin: 0 0 18px;

    color:
        var(--fiea-blue, #0A3D6B);

    font-size: 1.15rem;
    font-weight: 700;
}

.custom-fiea-warmi .communities-list ul {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px 24px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.custom-fiea-warmi .communities-list li {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0;
    padding: 0;

    color: #46515E;
    font-size: 1rem;
}

.custom-fiea-warmi .communities-list li::before {
    display: none;
}

.custom-fiea-warmi .communities-list li i {
    flex: 0 0 auto;

    color:
        var(--fiea-accent, #2E8B57);
}

/* =======================================================
   TABLETS
   ======================================================= */

@media (max-width: 1000px) {
    .custom-fiea-warmi .field-row {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.9fr);

        gap: 40px;

        padding: 45px 36px;
    }

    .custom-fiea-warmi .organic-visual {
        min-height: 330px;
    }

    .custom-fiea-warmi .field-text h2 {
        font-size:
            clamp(2.2rem, 5vw, 3rem);
    }
}

/* =======================================================
   MÓVILES
   ======================================================= */

@media (max-width: 760px) {
    .custom-fiea-warmi .field-row,
    .custom-fiea-warmi .field-row.reverse {
        display: grid !important;
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 45px;
        padding: 34px 22px 38px;

        border-radius: 22px !important;
    }

    /*
     * En móvil la imagen aparece primero
     * y el texto después.
     */
    .custom-fiea-warmi
    .field-row
    .organic-visual,
    .custom-fiea-warmi
    .field-row.reverse
    .organic-visual {
        grid-column: 1;
        grid-row: 1;

        min-height: 250px;
    }

    .custom-fiea-warmi
    .field-row
    .field-text,
    .custom-fiea-warmi
    .field-row.reverse
    .field-text {
        grid-column: 1;
        grid-row: 2;

        max-width: 100%;
        margin: 0;

        text-align: center;
    }

    .custom-fiea-warmi .field-text h2,
    .custom-fiea-warmi .field-text h3 {
        text-align: center !important;
    }

    .custom-fiea-warmi .field-text p {
        max-width: 100%;
        text-align: left;
    }

    .custom-fiea-warmi .organic-blob,
    .custom-fiea-warmi
    .field-row--context
    .organic-blob,
    .custom-fiea-warmi
    .field-row--approach
    .organic-blob {
        width: 100%;
        max-width: 420px;

        transform: none !important;
    }

    .custom-fiea-warmi
    .field-row--impact
    .organic-blob,
    .custom-fiea-warmi
    .field-row--impact:hover
    .organic-blob {
        width: 105%;
        max-width: 450px;

        transform: scale(1.05) !important;
    }

    .custom-fiea-warmi .communities-list {
        padding: 22px 18px;
        text-align: left;
    }

    .custom-fiea-warmi .communities-list ul {
        grid-template-columns: 1fr;
    }

    .custom-fiea-warmi .field-row::before,
    .custom-fiea-warmi .field-row::after {
        width: 90px;
        height: 60px;
    }
}

/* =======================================================
   HEADER BLANCO EN NOTICIAS INDIVIDUALES
   ======================================================= */

/*
 * Header transparente y encima del hero.
 */
body.fiea-single-news header#masthead,
body.fiea-single-news .site-header,
body.fiea-single-news .elementor-location-header {
    position: absolute !important;
    top: 0;
    right: 0;
    left: 0;

    width: 100%;

    z-index: 999999 !important;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * Elimina posibles fondos blancos colocados
 * por las filas internas de Astra.
 */
body.fiea-single-news #masthead .ast-primary-header-bar,
body.fiea-single-news #masthead .ast-builder-grid-row-container,
body.fiea-single-news #masthead .site-primary-header-wrap,
body.fiea-single-news #masthead .main-header-bar {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * Enlaces principales del navbar.
 */
body.fiea-single-news
#masthead
.main-header-menu
> .menu-item
> .menu-link,
body.fiea-single-news
#masthead
.main-header-menu
> .menu-item
> a,
body.fiea-single-news
#masthead
.ast-builder-menu
.main-navigation
> ul
> li
> a {
    color: #FFFFFF !important;

    font-weight: 700;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.3);

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

/*
 * Elemento activo y efecto hover.
 */
body.fiea-single-news
#masthead
.main-header-menu
> .menu-item
> .menu-link:hover,
body.fiea-single-news
#masthead
.main-header-menu
> .current-menu-item
> .menu-link,
body.fiea-single-news
#masthead
.main-header-menu
> .current_page_item
> .menu-link {
    color: #BCE2CB !important;
}

/*
 * Si el nombre del sitio es texto y no una imagen.
 */
body.fiea-single-news
#masthead
.site-title a,
body.fiea-single-news
#masthead
.site-description {
    color: #FFFFFF !important;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.3);
}

/*
 * Icono del menú hamburguesa.
 */
body.fiea-single-news
#masthead
.menu-toggle,
body.fiea-single-news
#masthead
.main-header-menu-toggle,
body.fiea-single-news
#masthead
.ast-mobile-menu-trigger-minimal {
    color: #FFFFFF !important;

    border-color:
        rgba(255, 255, 255, 0.5) !important;

    background: transparent !important;
}

body.fiea-single-news
#masthead
.mobile-menu-toggle-icon svg,
body.fiea-single-news
#masthead
.ast-mobile-svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/*
 * Submenús desplegables:
 * fondo blanco y texto azul para mantener legibilidad.
 */
body.fiea-single-news
#masthead
.main-header-menu
.sub-menu {
    border-radius: 10px;

    background: #FFFFFF !important;

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.16);
}

body.fiea-single-news
#masthead
.main-header-menu
.sub-menu
.menu-link {
    color: #0A3D6B !important;
    text-shadow: none !important;
}

body.fiea-single-news
#masthead
.main-header-menu
.sub-menu
.menu-link:hover {
    color: #2E8B57 !important;
    background: #F4F8F6 !important;
}

/* =======================================================
   LOGO BLANCO
   Esta opción convierte todo el logo a blanco.
   ======================================================= */

body.fiea-single-news
#masthead
.site-logo-img
img,
body.fiea-single-news
#masthead
img.custom-logo {
    filter:
        brightness(0)
        invert(1) !important;

    opacity: 1 !important;
}

/* =======================================================
   LOGO ALTERNATIVO PARA EL HEADER TRANSPARENTE
   ======================================================= */

body.fiea-single-news
#masthead
.site-logo-img
img,
body.fiea-single-news
#masthead
img.custom-logo {
    content:
        url('PEGA_AQUI_LA_URL_DEL_LOGO_CON_TEXTO_BLANCO') !important;

    filter: none !important;
    opacity: 1 !important;
}


/* =======================================================
   HEADER TRANSPARENTE BLANCO EN SINGLE POST
   ======================================================= */

/*
 * Sobrescribe las variables de Astra únicamente
 * dentro del header de las noticias.
 */
body.single-post #masthead {
    --ast-global-color-0: #FFFFFF;
    --ast-global-color-1: #FFFFFF;
    --ast-global-color-2: #FFFFFF;
    --ast-global-color-3: #FFFFFF;
    --ast-global-color-4: #FFFFFF;

    position: absolute !important;

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

    width: 100%;

    z-index: 999999 !important;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * Elimina los fondos internos de Astra.
 */
body.single-post
#masthead
.ast-primary-header-bar,

body.single-post
#masthead
.main-header-bar,

body.single-post
#masthead
.site-primary-header-wrap,

body.single-post
#masthead
.ast-builder-grid-row-container {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =======================================================
   ENLACES DEL NAVBAR
   ======================================================= */

body.single-post
#masthead
.main-header-menu
> .menu-item
> .menu-link,

body.single-post
#masthead
.main-header-menu
> .menu-item
> .menu-link
.menu-text,

body.single-post
#masthead
.ast-builder-menu-1
.main-header-menu
> .menu-item
> .menu-link,

body.single-post
#masthead
.ast-builder-menu-1
.main-header-menu
> .menu-item
> .menu-link
.menu-text {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    opacity: 1 !important;

    font-weight: 700 !important;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

/*
 * Elemento activo y hover.
 */
body.single-post
#masthead
.main-header-menu
> .menu-item
> .menu-link:hover,

body.single-post
#masthead
.main-header-menu
> .current-menu-item
> .menu-link,

body.single-post
#masthead
.main-header-menu
> .current-menu-parent
> .menu-link {
    color: #BCE2CB !important;
    -webkit-text-fill-color: #BCE2CB !important;
}

/* =======================================================
   FLECHAS DEL MENÚ
   ======================================================= */

body.single-post
#masthead
.main-header-menu
> .menu-item
> .menu-link
svg,

body.single-post
#masthead
.main-header-menu
> .menu-item
> .menu-link
svg
path {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* =======================================================
   LOGO
   Utiliza exactamente el mismo logo.
   Los píxeles visibles se transforman a blanco.
   ======================================================= */

body.single-post
#masthead
.custom-logo-link,

body.single-post
#masthead
.site-logo-img {
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

body.single-post
#masthead
.custom-logo-link
img,

body.single-post
#masthead
.site-logo-img
img,

body.single-post
#masthead
img.custom-logo {
    opacity: 1 !important;

    filter:
        brightness(0)
        saturate(100%)
        invert(100%) !important;

    mix-blend-mode: normal !important;
}

/* =======================================================
   MENÚ HAMBURGUESA
   ======================================================= */

body.single-post
#masthead
.menu-toggle,

body.single-post
#masthead
.main-header-menu-toggle,

body.single-post
#masthead
.ast-mobile-menu-trigger-minimal {
    color: #FFFFFF !important;

    border-color:
        rgba(255, 255, 255, 0.55) !important;

    background: transparent !important;
}

body.single-post
#masthead
.mobile-menu-toggle-icon
svg,

body.single-post
#masthead
.mobile-menu-toggle-icon
svg
path,

body.single-post
#masthead
.ast-mobile-svg,

body.single-post
#masthead
.ast-mobile-svg
path {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* =======================================================
   SUBMENÚS
   ======================================================= */

body.single-post
#masthead
.main-header-menu
.sub-menu {
    overflow: hidden;

    border-radius: 10px;

    background: #FFFFFF !important;

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.18) !important;
}

body.single-post
#masthead
.main-header-menu
.sub-menu
.menu-link,

body.single-post
#masthead
.main-header-menu
.sub-menu
.menu-link
.menu-text {
    color: #0A3D6B !important;
    -webkit-text-fill-color: #0A3D6B !important;

    background: #FFFFFF !important;

    text-shadow: none !important;
}

body.single-post
#masthead
.main-header-menu
.sub-menu
.menu-link:hover {
    color: #2E8B57 !important;
    -webkit-text-fill-color: #2E8B57 !important;

    background: #F1F7F4 !important;
}

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

body.single-post
.custom-fiea-single
.hero-single
h1 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    text-shadow:
        0 3px 16px rgba(0, 0, 0, 0.35) !important;
}

body.single-post
.custom-fiea-single
.hero-single
.single-date,

body.single-post
.custom-fiea-single
.hero-single
.single-date
i {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}