/*
Theme Name: Red Bioamazonia
Theme URI: 
Author: Daniel
Description: Tema personalizado y optimizado para la plataforma Red Bioamazonia.
Version: 1.0
Text Domain: redbioamazonia
*/

/* ========================================== */
/* 1. VARIABLES GLOBALES (:root)              */
/* ========================================== */
:root {
    /* --- Tipografía --- */
    --rb-font-family: 'Hanken Grotesk', sans-serif;
    --rb-font-dinpro: 'DINPro', sans-serif;
    --rb-font-lato: 'Lato', sans-serif;

    /* --- Paleta Principal (Acentos exactos Figma) --- */
    --rb-accent-orange: #EF5B34; /* Naranja/Rojizo */
    --rb-yellow:        #F2C533; /* Amarillo */
    --rb-green-main:    #00673A; /* Verde Principal Oscuro */
    --rb-green-light:   #81C14B; /* Verde Claro (Subtítulos) */

    /* --- Paleta de Escala Primaria --- */
    --rb-primary-100: #EAF3EF;
    --rb-primary-300: #8CBFA9;
    --rb-primary-500: #006A44;
    --rb-primary-700: #004D31;
    --rb-primary-900: #00301F;

    /* --- Paleta de Países --- */
    --rb-country-brasil:   #10B981;
    --rb-country-colombia: #F5A623;
    --rb-country-ecuador:  #F56A00;
    --rb-country-peru:     #D0021B;
    --rb-country-bolivia:  #8B0000;
    --rb-country-guyanas:  #9013FE;

    /* --- Paleta Neutra --- */
    --rb-neutral-100: #F8F9FA;
    --rb-neutral-200: #E2E8F0;
    --rb-neutral-500: #64748B;
    --rb-neutral-800: #1E293B;
    --rb-neutral-900: #0F172A;
}

/* ========================================== */
/* 2. RESET Y ESTILOS GLOBALES                */
/* ========================================== */
body {
    font-family: var(--rb-font-family);
    color: var(--rb-neutral-800);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--rb-neutral-900);
    font-weight: 700;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

/* --- Clases Tipográficas Base --- */
.font-dinpro { 
    font-family: var(--rb-font-dinpro); 
    letter-spacing: -0.02em;
}

.font-lato { 
    font-family: var(--rb-font-lato); 
}

/* ========================================== */
/* 3. CLASES DE UTILIDAD (Colores y Textos)   */
/* ========================================== */
.text-rb-accent      { color: var(--rb-accent-orange) !important; }
.text-rb-yellow      { color: var(--rb-yellow) !important; }
.text-rb-green-main  { color: var(--rb-green-main) !important; }
.text-rb-green-light { color: var(--rb-green-light) !important; }
.text-rb-dark        { color: #000000 !important; }

/* ========================================== */
/* 4. COMPONENTES: BOTONES                    */
/* ========================================== */
.btn-rb-primary {
    background-color: var(--rb-green-main);
    color: #ffffff;
    border-radius: 32px; /* Figma: 32px */
    padding: 16px 6%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-rb-primary:hover {
    background-color: #004d2b;
    color: #ffffff;
}

.btn-rb-orange {
    background-color: var(--rb-accent-orange);
    color: #ffffff;
    font-family: var(--rb-font-dinpro);
    font-size: 14px;
    font-weight: 500;
    border-radius: 32px;
    padding: 12px 24px;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.btn-rb-orange:hover {
    background-color: #d14622;
    color: #ffffff;
}

/* ========================================== */
/* 5. ESTRUCTURA: HEADER & NAV                */
/* ========================================== */
.rb-navbar {
    background-color: #ffffff;
    padding: 20px 0; 
    position: relative;
    border-bottom: 1px solid #f0f0f0; 
}

.rb-logo-header {
    width: 193px;
    height: 78px;
    object-fit: contain;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px; /* Gap exacto de Figma */
    margin: 0 auto;
}

.rb-nav-link {
    font-family: var(--rb-font-dinpro) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #231F20 !important;
    padding: 0 !important; 
    white-space: nowrap; 
}

.rb-nav-link:hover, 
.rb-nav-link.active {
    color: var(--rb-accent-orange) !important; 
}

.rb-nav-link.dropdown-toggle::after {
    display: none; 
}

.rb-icon-link {
    font-size: 18px;
    color: #231F20;
}

.rb-icon-link:hover {
    opacity: 0.7;
}

/* Selector de Idiomas */
.rb-language-toggle {
    color: var(--rb-green-main) !important; 
    font-family: var(--rb-font-dinpro);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 4px; 
}

.rb-language-toggle::after {
    display: none !important; 
}

.rb-lang-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Franja de Colores 2px (Header) */
.rb-color-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; 
    display: flex;
}

.rb-bar-segment {
    height: 100%;
    flex: 1; 
}

.seg-verde { background-color: #8CC63F; }
.seg-amarillo { background-color: #F5B041; }
.seg-azul { background-color: #3949AB; }
.seg-rojo { background-color: #E53935; }
.seg-verde-osc { background-color: #00796B; }
.seg-cafe { background-color: #5D4037; }

/* Gradiente Legacy por si se usa en otro lado */
.rb-header-border {
    height: 6px;
    background: linear-gradient(to right, #8CC63F 0%, #8CC63F 16.666%, #F5B041 16.666%, #F5B041 33.333%, #3949AB 33.333%, #3949AB 50%, #E53935 50%, #E53935 66.666%, #00796B 66.666%, #00796B 83.333%, #5D4037 83.333%, #5D4037 100%);
}

/* ========================================== */
/* 6. COMPONENTES DEL HOME                    */
/* ========================================== */

/* Hero Colosal */
.hero-title-massive {
    font-family: var(--rb-font-dinpro);
    font-weight: 700;
    font-size: clamp(4rem, 8vw, 7rem); 
    line-height: 0.85; 
    letter-spacing: -2px; /* Figma: -0.02em ajustado a gran escala */
    color: var(--rb-green-main);
    margin-bottom: 1.5rem;
}

.pantera-overlay {
    background: rgba(0, 48, 31, 0.7);
    backdrop-filter: blur(4px);
    border-radius: 12px;
}

/* Banners y Textos Descriptivos */
.banner-subtitle {
    font-family: var(--rb-font-dinpro); 
    font-weight: 400; 
    font-size: 32px; 
    line-height: 1.125; 
    letter-spacing: -0.02em;
    color: var(--rb-green-main);
    margin-bottom: 0.5rem; 
}

.banner-description {
    font-weight: 400;
    font-size: 1.125rem; 
    line-height: 1.6;
    color: var(--rb-neutral-500);
    max-width: 400px; 
    margin-bottom: 2rem;
}

.rb-description {
    font-family: var(--rb-font-dinpro);
    font-weight: 400;
    font-size: 20px; 
    line-height: 1.4; 
    letter-spacing: -0.02em;
    color: #000000; 
    margin-bottom: 2rem; 
}

/* Textos (Figma Specs Generales) */
.rb-welcome { font-size: 32px; font-weight: 500; line-height: 36px; }
.rb-title { font-size: clamp(2.5rem, 5vw, 72px); font-weight: 400; line-height: 80px; }
.rb-subtitle { font-size: 20px; font-weight: 500; line-height: 28px; }
.rb-paragraph { font-size: 20px; font-weight: 400; line-height: 28px; }
.rb-h1-regular { font-size: 49px; font-weight: 400; line-height: 52px; }
.rb-body-regular { font-size: 16px; font-weight: 400; line-height: 22px; }

/* Temas Estratégicos (Tarjetas) */
.tema-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tema-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 106, 68, 0.2);
}

.tema-card img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
}

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

.tema-overlay {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

.tema-content {
    position: relative;
    z-index: 3;
    padding: 2rem 1.5rem;
    width: 100%;
}

.rb-h3-medium {
    font-size: 32px;
    font-weight: 500;
    line-height: 1em;
    color: #FFFFFF; 
}

.rb-link-yellow {
    color: var(--rb-yellow);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: underline;
}

.rb-link-yellow:hover { color: #d1a828; }

/* Noticias y Eventos */
.noticia-card {
    border: 1px solid var(--rb-neutral-200);
    border-radius: 20px;
    background: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.noticia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.rb-news-card {
    background-color: #FFFFFF;
    border: 1px solid var(--rb-green-main); 
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: 100%; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rb-news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 103, 58, 0.15); 
}

.rb-news-img-mask {
    width: 100%;
    height: 162px;
    border-radius: 16px;
    object-fit: cover;
    margin-bottom: 8px; 
}

.rb-news-title {
    font-family: var(--rb-font-dinpro);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: #000000;
    margin-bottom: 4px;
}

.rb-news-date {
    font-family: var(--rb-font-dinpro);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.02em;
    color: var(--rb-green-main);
    margin-bottom: 8px;
}

.rb-news-excerpt {
    font-family: var(--rb-font-lato);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #231F20;
    margin-bottom: auto; 
    display: -webkit-box;
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rb-btn-ver-mas {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: 100%;
    border-radius: 32px;
    font-family: var(--rb-font-dinpro);
    font-size: 14px; 
    font-weight: 500;
    color: #000000;
    text-decoration: underline;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-top: 16px;
}

.rb-btn-ver-mas:hover { color: var(--rb-green-main); }

/* Institutos Miembros (Logos) */
.instituto-logo {
    max-height: 90px; 
    width: auto;
    max-width: 190px; 
    filter: none; 
    opacity: 1; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    object-fit: contain; 
    padding: 10px; 
}

.instituto-logo:hover { transform: scale(1.1); }

.rb-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;  
    height: 100px; 
    padding: 10px;
    transition: transform 0.3s ease;
}

.rb-logo-wrapper:hover { transform: scale(1.1); }

.rb-logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px; 
    padding: 10px;
    transition: transform 0.3s ease;
}

.rb-logo-item:hover { transform: scale(1.1); }

.instituto-logo-fit {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none; 
}

/* ========================================== */
/* 7. FOOTER                                  */
/* ========================================== */
.footer-main {
    background-color: var(--rb-primary-900);
    color: #ffffff;
    position: relative;
    background-image: url('<?php echo esc_url( home_url( '/' ) ); ?>wp-content/uploads/2026/04/bg-footer.jpg'); 
    background-size: cover;
    background-position: center;
    padding-bottom: 4px; /* Deja espacio a la franja de 4px */
}

.footer-main::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 48, 31, 0.90);
    z-index: 1;
}

.footer-main .container { position: relative; z-index: 2; }

/* Títulos de Columnas */
.rb-footer-title {
    font-family: var(--rb-font-dinpro);
    font-weight: 700; 
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.02em;
    color: var(--rb-accent-orange) !important; 
    margin-bottom: 24px;
}

/* Enlaces del Footer */
.footer-link {
    font-family: var(--rb-font-dinpro);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #FFFFFF !important; 
    transition: color 0.3s ease;
}

.footer-link:hover { color: var(--rb-accent-orange) !important; }

/* Franja Footer (4px al fondo absoluto) */
.rb-footer-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px; 
    display: flex;
    z-index: 10;
}

.rb-footer-border div { flex: 1; height: 100%; }
.rb-footer-border .seg-br { background-color: var(--rb-country-brasil); }
.rb-footer-border .seg-co { background-color: var(--rb-country-colombia); }
.rb-footer-border .seg-ec { background-color: var(--rb-country-ecuador); }
.rb-footer-border .seg-pe { background-color: var(--rb-country-peru); }
.rb-footer-border .seg-bo { background-color: var(--rb-country-bolivia); }
.rb-footer-border .seg-gy { background-color: var(--rb-country-guyanas); }

/* Footer Bottom (Privacidad y Redes) */
.footer-bottom {
    background-color: #ffffff;
    /*border-top: 1px solid #f0f0f0; */
}

.footer-bottom .d-flex {
    align-items: baseline !important; 
}

.rb-logo-footer {
    width: 193px;
    height: auto; 
    max-height: 78px;
    display: block;
}

.rb-privacy-text {
    font-family: var(--rb-font-dinpro);
    font-size: 12px;
    font-weight: 500;
    color: #002917;
    margin-bottom: 5px !important; 
}

.social-icon, /* Legacy si se usa */
.rb-social-icon {
    color: #002917 !important; 
    font-size: 18px; 
    transition: opacity 0.3s ease;
}

.social-icon:hover,
.rb-social-icon:hover {
    opacity: 0.7;
}

/* ========================================== */
/* COMPONENTE: ACORDEÓN (Estructura Org)      */
/* ========================================== */
.rb-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid var(--rb-green-light); /* Línea verde delgada entre items */
    background-color: transparent;
    margin-bottom: 0;
}

.rb-accordion .accordion-item:last-child {
    border-bottom: 1px solid var(--rb-green-light); /* En Figma el último también tiene línea */
}

.rb-accordion .accordion-button {
    background-color: transparent !important;
    color: var(--rb-green-main) !important;
    font-family: var(--rb-font-dinpro);
    font-size: 24px;
    font-weight: 500;
    padding: 24px 0; /* Buen espaciado vertical */
    box-shadow: none !important;
}

/* Cambiar la flecha por un símbolo de + que rotará */
.rb-accordion .accordion-button::after {
    content: '\002B'; /* Código Unicode para el símbolo + */
    background-image: none !important; /* Quitamos el SVG de Bootstrap */
    font-size: 28px;
    font-weight: 300;
    color: var(--rb-green-main);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg) !important;
    transition: transform 0.3s ease;
}

/* Al estar abierto, rotamos el + 45 grados para que parezca una 'x' */
.rb-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(45deg) !important;
}

.rb-accordion .accordion-body {
    padding: 0 0 24px 0; /* Quitamos padding lateral, dejamos abajo */
    font-family: var(--rb-font-body); /* Usamos Lato para lectura larga */
    font-size: 14px;
    line-height: 1.6;
    color: var(--rb-black);
}

/* ========================================== */
/* COMPONENTE: CARDS DE OBJETIVOS ESPECÍFICOS */
/* ========================================== */
.rb-objective-card {
    background-color: var(--rb-white);
    border: 1px solid var(--rb-green-light); /* Borde Verde Claro */
    border-radius: 20px;
    padding: 32px 24px; /* Un poco más de aire arriba y abajo */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rb-objective-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(129, 193, 75, 0.15); /* Sombra con el tono verde claro */
}

/* Ajuste sutil para el icono de check */
.rb-objective-icon {
    color: var(--rb-green-light);
    font-size: 28px; /* Tamaño del icono en Figma */
}

/* ========================================== */
/* COMPONENTE: CARDS DE COMITÉ                */
/* ========================================== */
.rb-member-card {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease;
}

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

.rb-member-img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Fuerza a que todas las fotos sean cuadradas perfectas */
    object-fit: cover;
    border-radius: 20px; /* Redondeo igual a las otras tarjetas */
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.rb-member-name {
    font-family: var(--rb-font-dinpro);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--rb-green-main);
    margin-bottom: 4px;
}

.rb-member-role {
    font-family: var(--rb-font-dinpro);
    font-size: 14px;
    font-weight: 500;
    color: var(--rb-black);
    margin-bottom: 2px;
}

.rb-member-institute {
    font-family: var(--rb-font-lato);
    font-size: 14px;
    font-weight: 400;
    color: var(--rb-gray-500);
    margin-bottom: 16px;
}

.rb-member-link {
    font-family: var(--rb-font-dinpro);
    font-size: 14px;
    font-weight: 500;
    color: var(--rb-orange);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto; /* Empuja el enlace siempre hacia abajo */
    transition: color 0.3s ease;
}

.rb-member-link:hover {
    color: var(--rb-green-main);
}

/* ========================================== */
/* COMPONENTE: CARDS DE COMITÉ (Estilo Noticias) */
/* ========================================== */
.rb-member-card {
    background-color: var(--rb-white);
    border: 1px solid var(--rb-green-light); /* Borde verde como en Figma */
    border-radius: 24px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rb-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(129, 193, 75, 0.15); /* Sombra suave */
}

/* La imagen del miembro */
.rb-member-img {
    width: 100%;
    height: 330px; /* Altura fija para que todas las fotos cuadren igual */
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 8px; /* Espaciado extra antes del nombre */
}

/* Nombre (Negro y Bold) */
.rb-member-name {
    font-family: var(--rb-font-dinpro);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rb-black); /* Corregido a negro */
    margin-bottom: 2px;
}

/* Cargo (Verde) */
.rb-member-role {
    font-family: var(--rb-font-dinpro);
    font-size: 14px;
    font-weight: 400;
    color: var(--rb-green-main); /* Corregido a verde */
    margin-bottom: 0;
}

/* Instituto (El texto naranjado) */
.rb-member-institute {
    font-family: var(--rb-font-dinpro);
    font-size: 14px;
    font-weight: 400;
    color: var(--rb-accent-orange); /* El texto naranja extra */
    margin-bottom: auto; /* Esto empuja el botón "Conoce más" hasta el fondo */
}

/* Botón Conoce más (Igual a Ver más de noticias) */
.rb-member-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-family: var(--rb-font-dinpro);
    font-size: 14px;
    font-weight: 700;
    color: var(--rb-black);
    text-decoration: underline;
    margin-top: 16px;
    background: transparent;
    border: none;
    transition: color 0.3s ease;
}

.rb-member-link:hover {
    color: var(--rb-green-main);
}

/* --- 1. Miga de Pan (Breadcrumbs) --- */
.breadcrumb-container {
    padding: 20px 0;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-container a {
    color: #004a2d; /* Verde institucional */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.breadcrumb-container .separator {
    color: #ccc;
}

.breadcrumb-container .current-page {
    font-weight: 600;
    color: #333;
}

/* --- 2. Título y Párrafo de Introducción --- */
.proyectos-intro {
    margin-bottom: 40px;
}

.main-title {
    font-size: 3rem;
    color: #004a2d; /* Verde oscuro del logo */
    font-weight: 800;
    margin-bottom: 15px;
}

.intro-text {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    max-width: 900px;
}

/* --- 3. Grid y Cards de Proyectos --- */
.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas exactas */
    gap: 30px;
    margin-bottom: 50px;
}

.proyecto-card {
    position: relative;
    height: 400px;
    border-radius: 30px; /* Bordes redondeados pronunciados según diseño */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.proyecto-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.proyecto-card .card-content {
    /*background: linear-gradient(to top, rgba(0, 74, 45, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);*/
    padding: 30px;
    width: 100%;
    color: #ffffff;
}

.proyecto-card h3 {
    font-size: 1.6rem;
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.proyecto-card p {
    font-size: 0.95rem;
    margin-bottom: 20px;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-ver-mas {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid #ffffff;
    padding-bottom: 2px;
    transition: opacity 0.3s;
}

.btn-ver-mas:hover {
    opacity: 0.8;
}

/* --- 4. Paginador --- */
.custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
}

.page-number, .page-arrow {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Botones circulares */
    background: #f0f0f0;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.page-number.active {
    background-color: #004a2d;
    color: #fff;
}

.page-number:hover:not(.active), .page-arrow:hover {
    background-color: #e0e0e0;
}

.proyecto-card .btn-ver-mas {
    display: table;
    margin: 0 auto;
}

/* --- 4. Paginador (Estilo Corregido) --- */
.custom-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Separación entre los botones */
    padding: 8px; /* Espacio entre los botones y el borde exterior */
    border: 1px solid #ebebeb; /* Borde tenue del contenedor general */
    border-radius: 12px; /* Bordes redondeados del contenedor exterior */
    background-color: #ffffff;
}

.page-number, .page-arrow {
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px; /* Cuadrados con bordes redondeados */
    background-color: #ffffff;
    border: 1px solid #ebebeb; /* Borde individual de cada botón inactivo */
    color: #518c6e; /* Tono verde más claro para los números/flechas inactivos */
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.page-number.active {
    background-color: #005a36; /* Verde oscuro principal (ajusta a tu variable) */
    color: #ffffff;
    border-color: #005a36; /* El borde adopta el mismo color del fondo */
}

.page-number:hover:not(.active), .page-arrow:hover {
    border-color: #005a36;
    color: #005a36;
    background-color: #f9f9f9;
}

/* --- Barra de Filtros y Búsqueda --- */
.input-icon-wrapper {
    position: relative;
    width: 100%;
}

.rb-input {
    height: 50px;
    border-radius: 8px; /* Borde redondeado suave igual al paginador */
    border: 1px solid #ebebeb;
    background-color: #ffffff;
    color: #666666;
    font-size: 15px;
    box-shadow: none !important; /* Evita el brillo azul por defecto de Bootstrap */
    transition: border-color 0.3s;
}

.rb-input:focus {
    border-color: #005a36; /* Verde corporativo al enfocar */
}

/* Ajuste de padding para que el texto no pise el ícono de búsqueda */
.input-icon-wrapper input[placeholder^="Buscar"] {
    padding-left: 45px;
}

/* Ícono de la izquierda (Lupa) */
.icon-left {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888888;
    font-size: 16px;
    z-index: 4;
}

/* Ícono de la derecha (Calendario) */
.icon-right {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #518c6e; /* Verde del ícono del calendario en el diseño */
    font-size: 16px;
    z-index: 4;
    pointer-events: none; /* Para que no interfiera si hacen clic sobre el ícono */
}

/* Ajuste de la flecha del Select de Bootstrap */
.rb-select {
    color: #cccccc;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23518c6e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 12px 12px;
}

/* Para cambiar el color del texto cuando no es el placeholder (opcional) */
.rb-select option {
    color: #333333;
}

/* --- Tabs (Noticias / Eventos) --- */
.btn-rb-tab {
    padding: 10px 30px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    background-color: transparent;
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-rb-tab.active {
    background-color: #8cc63f; /* Verde brillante (ajusta al código exacto de tu paleta) */
    color: #1a1a1a;
}

.btn-rb-tab:hover:not(.active) {
    background-color: #f0f0f0;
}

/* --- Cards de Noticias (Fondo Blanco, Borde Verde) --- */
.noticia-card {
    border: 1px solid #518c6e; /* Borde verde del diseño */
    border-radius: 20px;
    padding: 16px; /* El padding interno que separa la imagen y el texto del borde */
    background-color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card-img-wrapper img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px; /* La imagen interior tiene un borde menos pronunciado que la tarjeta exterior */
    margin-bottom: 16px;
}

.noticia-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.3;
}

.noticia-date {
    font-size: 0.85rem;
    color: #518c6e; /* Texto verde para la fecha */
    margin-bottom: 12px;
    display: block;
}

.noticia-excerpt {
    font-size: 0.9rem;
    color: #555555;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* --- Botón Ver Más (Oscuro y Centrado) --- */
.btn-ver-mas-dark {
    display: table;
    margin: 0 auto;
    color: #1a1a1a; /* Texto casi negro */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 2px;
    transition: opacity 0.3s ease;
}

.btn-ver-mas-dark:hover {
    opacity: 0.7;
    color: #1a1a1a;
}

/* --- Sección Hero de Contacto --- */
/* --- Sección Hero de Contacto con Gradiente --- */
/* --- Sección Hero de Contacto --- */
.contacto-hero-section {
    position: relative;
    background-size: cover;
    /* CLAVE 1: Forzamos que la imagen se enfoque en la derecha (donde está la mano) */
    background-position: right center; 
    background-repeat: no-repeat;
    /* CLAVE 2: Usamos 100vh para que se adapte a la pantalla y no haga un zoom extremo */
    min-height: 100vh; 
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Oscurecemos un poco la imagen solo en la parte izquierda para que el form resalte */
.contacto-hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 60%);
    z-index: 0;
}

.contacto-hero-section .container {
    z-index: 1;
}

/* --- Texto Gigante de Fondo --- */
.contacto-bg-text {
    position: absolute;
    top: 20px; /* Lo subimos para que quede sobre el formulario */
    left: 15px; /* Alineado con el borde izquierdo del formulario */
    transform: none; /* Quitamos el centrado */
    font-size: clamp(80px, 12vw, 160px); /* Tamaño más controlado */
    font-weight: 700;
    color: #dcedc8; /* El verde claro que usaste en tu Figma */
    z-index: 1; 
    margin: 0;
    letter-spacing: 2px;
    white-space: nowrap;
    opacity: 0.9;
    /* Quitamos el mix-blend-mode para que se vea sólido como en tu diseño */
}

/* --- Contenedor del Formulario --- */
.contacto-form-wrapper {
    background: rgba(0, 62, 35, 0.95); /* Un verde más sólido como en Figma */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 40px;
    /* CLAVE 3: Reducimos el ancho máximo para dejar ver la mano en la derecha */
    max-width: 600px; 
    width: 100%;
    z-index: 2; /* Encima del texto CONTACTO */
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    margin-top: 19%; /* Lo bajamos un poco para no tapar el título */
}

/* ==============================================================
   MODAL DE PERFIL DE MIEMBROS (Figma)
   ============================================================== */
.rb-member-modal-content {
    background: #FFFFFF;
    /* Borde verde del Figma */
    border: 2px solid #81C14B; 
    /* La sombra exacta de tu Figma */
    box-shadow: 0px 87px 35px rgba(0, 0, 0, 0.01), 0px 49px 30px rgba(0, 0, 0, 0.05), 0px 22px 22px rgba(0, 0, 0, 0.09), 0px 5px 12px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
}

.rb-member-modal-img {
    width: 176px;
    height: 152px;
    border-radius: 16px;
    object-fit: cover;
}

.rb-member-modal-content {
    background: #FFFFFF;
    border: 2px solid #81C14B; /* Verde Brasil/500 */
    border-radius: 24px;
    box-shadow: 0px 87px 35px rgba(0, 0, 0, 0.01), 0px 49px 30px rgba(0, 0, 0, 0.05), 0px 22px 22px rgba(0, 0, 0, 0.09), 0px 5px 12px rgba(0, 0, 0, 0.1);
}

/* ====================================================
   ESTILOS DE PAGINACIÓN SWIPER (DOTS) - RED BIOAMAZONIA
   ==================================================== */

/* Contenedor de la paginación para separarlo un poco de las tarjetas */
.swiper-pagination {
    position: relative;
    margin-top: 20px;
}

/* Estado inactivo: bolitas color verde claro semi-transparentes */
.swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background-color: #81C14B !important; /* Verde claro de la marca */
    opacity: 0.3 !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    transition: all 0.3s ease-in-out !important; /* Transición suave */
}

/* Estado activo: Línea alargada verde sólida */
.swiper-pagination-bullet-active {
    width: 35px !important; /* Se alarga para formar la línea */
    background-color: #81C14B !important; 
    opacity: 1 !important;
    border-radius: 10px !important; /* Mantiene los bordes redondeados */
}

/* ====================================================
   TIPOGRAFÍA ESTANDARIZADA (FIGMA)
   ==================================================== */

/* Títulos Principales (Ej: Nuestros temas estratégicos) */
.rb-h1-regular {
    font-family: 'DINPro', sans-serif;
    font-weight: 400;
    font-size: 49px;
    line-height: 52px;
    letter-spacing: -0.02em;
    color: #00673A;
}

/* Títulos Secundarios (Ej: Institutos miembros) */
.rb-h2-regular {
    font-family: 'DINPro', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 45px;
    letter-spacing: -0.02em;
    color: #00673A;
}


.footer-menu li a {
    color: #ffffff !important;
    text-decoration: none;
    display: block;
    margin-bottom: 12px;
    opacity: 0.9;
    transition: opacity 0.3s;
}
.footer-menu li a:hover {
    opacity: 1;
    text-decoration: underline;
}


/* Estilos rápidos para el modal de búsqueda a pantalla completa */
        .rb-search-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco con 95% de opacidad */
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }
        .rb-search-modal.active {
            display: flex;
        }
        .rb-search-close {
            position: absolute;
            top: 30px;
            right: 40px;
            font-size: 2rem;
            color: #00673A;
            cursor: pointer;
            background: none;
            border: none;
        }
        .rb-search-form {
            width: 100%;
            max-width: 800px;
            padding: 0 20px;
        }
        .rb-search-form input[type="text"] {
            border: none;
            border-bottom: 2px solid #81C14B;
            border-radius: 0;
            font-size: 2rem;
            padding: 10px 15px;
            background: transparent;
            color: #003d21;
        }
        .rb-search-form input[type="text"]:focus {
            box-shadow: none;
            border-color: #00673A;
        }
        .rb-search-form .btn-search {
            background: none;
            border: none;
            color: #00673A;
            font-size: 1.8rem;
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Estilos para los botones de etiquetas */
.btn-tag-filter {
    background-color: transparent;
    color: #6c757d;
    border: 1px solid #dee2e6;
    font-size: 0.85rem;
    transition: all 0.2s ease-in-out;
    margin-bottom: 5px;
}

/* Estado Hover: Usamos el verde suave del diseño */
.btn-tag-filter:hover {
    background-color: #e9f5ef; 
    color: #00673A;
    border-color: #81C14B;
}

/* Estado Activo: El verde principal que definiste */
.btn-tag-filter.active {
    background-color: #81C14B !important;
    border-color: #81C14B !important;
    color: #fff !important;
}

/**
 * HEADER & NAVIGATION
 * ----------------------------------------------------------------------------
 */

/* Logo y contenedores base */
.rb-logo-header {
    max-height: 50px;
    width: auto;
}

.rb-nav-link {
    color: #00673A !important;
    font-weight: 500;
    transition: color 0.3s ease;
}

.rb-nav-link:hover {
    color: #81C14B !important;
}

/* Barra de colores superior */
.rb-color-bar {
    display: flex;
    height: 4px;
    width: 100%;
}

.rb-bar-segment { flex: 1; }
.seg-verde { background-color: #00673A; }
.seg-amarillo { background-color: #FEB813; }
.seg-azul { background-color: #0033A0; }
.seg-rojo { background-color: #E4002B; }
.seg-verde-osc { background-color: #004225; }
.seg-cafe { background-color: #63422B; }

/* Ajustes Menú Móvil (Hamburguesa) */
@media (max-width: 1199.98px) {
    .navbar-collapse {
        background-color: #ffffff;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        z-index: 1000;
        border-top: 1px solid #f0f0f0;
    }
    
    .nav-item {
        border-bottom: 1px solid #f8f8f8;
    }
    
    .nav-item:last-child {
        border-bottom: none;
    }

    .rb-nav-link {
        padding: 12px 0 !important;
    }

    /* Alineación de iconos en móvil */
    .header-controls {
        padding-top: 15px;
        justify-content: center;
        border-top: 1px solid #eee;
        margin-top: 10px;
    }
}

/**
 * MODAL DE BÚSQUEDA (AJAX)
 * ----------------------------------------------------------------------------
 */
.rb-search-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 10000;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    overflow-y: auto;
}

.rb-search-modal.active {
    display: flex;
}

.rb-search-close {
    position: fixed;
    top: 30px;
    right: 40px;
    font-size: 2rem;
    color: #00673A;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 10001;
}

.rb-search-form {
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
}

.rb-search-form input[type="text"] {
    border: none;
    border-bottom: 2px solid #81C14B;
    border-radius: 0;
    font-size: 2.2rem;
    padding: 10px 0;
    background: transparent;
    color: #003d21;
    width: 100%;
}

.rb-search-form input[type="text"]:focus {
    box-shadow: none;
    border-color: #00673A;
    outline: none;
}

.rb-search-form .btn-search {
    background: none;
    border: none;
    color: #00673A;
    font-size: 1.8rem;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}


@media (max-width: 1199.98px) {
    /* Forzamos que la lista sea vertical */
    .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Alinea texto a la izquierda */
        width: 100%;
        margin: 0 !important;
        padding-bottom: 15px;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid #f1f1f1;
    }

    .nav-item:last-child {
        border-bottom: none;
    }

    .rb-nav-link {
        padding: 6px 0 !important;
        display: block;
        width: 100%;
        text-align: left;
    }

    /* Ajuste para submenús (dropdowns) en móvil */
    .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        background-color: #fcfcfc;
        border: none;
        box-shadow: none;
        padding-left: 20px; /* Sangría para sub-items */
        display: none; /* Se controla por el click de Bootstrap */
    }

    .dropdown-menu.show {
        display: block;
    }

    /* Controles de búsqueda e idioma al final de la lista */
    .header-controls {
        flex-direction: row; /* Estos sí se mantienen horizontales */
        justify-content: flex-start;
        padding: 20px 0;
        width: 100%;
        border-top: 2px solid #81C14B; /* Separador verde */
        margin-top: 10px;
    }
}
/* --- Ajuste Responsive para Celulares (< 768px) --- */
@media (max-width: 768px) {
    .rb-h1-regular {
        font-size: 32px !important; /* Tamaño amigable para móvil */
        line-height: 38px !important;
    }
    .rb-h2-regular {
        font-size: 28px !important; /* Tamaño amigable para móvil */
        line-height: 34px !important;
    }
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .rb-member-modal-img {
        width: 120px;
        height: 120px;
    }
}

/* Ajuste móvil para la página de Contacto */
@media (max-width: 768px) {
    .contacto-hero-section {
        background-position: center; /* En móvil sí centramos la imagen */
    }
    .contacto-form-wrapper {
        padding: 30px 20px;
        margin-top: 80px;
    }
    .contacto-bg-text {
        top: 0px;
        font-size: 70px;
    }
}

/* --- Texto Gigante de Fondo (Mix Blend Mode) --- */
.contacto-bg-text {
    position: absolute;
    top: -1px; /* Exacto del Figma */
    left: 15px; /* Exacto del Figma */
    transform: none; 
    
    /* Usamos clamp para que sea responsive, pero que llegue a los ~180px de altura de tu Figma en pantallas grandes */
    font-size: clamp(80px, 12vw, 180px); 
    line-height: 1;
    font-weight: 700;
    
    color: #dcedc8; /* El tono verde claro */
    z-index: 1; 
    margin: 0;
    letter-spacing: 2px;
    white-space: nowrap;
    
    /* ¡LA MAGIA DEL DISEÑADOR! */
    mix-blend-mode: screen; 
    opacity: 0.9;
}

/* --- Contenedor del Formulario (Efecto Glassmorphism) --- */
.contacto-form-wrapper {
    /* Propiedades extraídas de Figma (Rectangle 11) */
    background: rgba(0, 62, 35, 0.85);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px); /* Soporte para Safari */
    border-radius: 32px;
    
    /* Estructura general */
    padding: 50px;
    max-width: 847px; /* Ancho máximo de Figma */
    width: 100%;
    z-index: 2; /* Encima del texto gigante */
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    margin-top: 50px; 
}

/* --- Elementos del Formulario (Inputs de Figma) --- */
.rb-form-label {
    display: flex;
    align-items: flex-start;
    color: #ffffff; 
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px; /* Separación sutil hacia el input */
}

.rb-form-input {
    box-sizing: border-box;
    background-color: transparent !important;
    
    /* Propiedades de Figma (Placeholder / Input) */
    border: 1px solid #FFFFFF;
    border-radius: 12px;
    padding: 12px 16px 12px 20px;
    height: 48px; /* Altura definida en Figma */
    
    color: #ffffff !important;
    font-size: 15px;
    transition: all 0.3s ease;
}

/* Ajuste específico para textarea ya que height: 48px lo dañaría */
textarea.rb-form-input {
    height: auto;
    min-height: 120px;
}

.rb-form-input:focus {
    border-color: #f26522; /* Toque naranja al hacer foco para mejor usabilidad */
    background-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none;
}

.rb-form-input::placeholder {
    color: #e0e0e0;
}

/* Ajustes específicos para los <select> en modo oscuro */
.rb-form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0b8a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.rb-form-select option {
    background-color: #0b3a24; /* Fondo del desplegable */
    color: #ffffff;
}

/* --- Checkbox y Texto Legal --- */
.rb-form-checkbox {
    background-color: transparent;
    border: 1px solid #ffffff;
    border-radius: 3px;
    cursor: pointer;
}

.rb-form-checkbox:checked {
    background-color: #f26522; /* Naranja cuando está activo */
    border-color: #f26522;
}

.rb-privacy-text {
    color: #d0d0d0;
    font-size: 10px;
    line-height: 1.6;
}

.rb-privacy-text a {
    color: #ffffff;
    text-decoration: underline;
}

/* --- Mockup del reCAPTCHA --- */
.recaptcha-mockup {
    background: #f9f9f9;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    color: #333;
    font-family: Roboto, sans-serif;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
}

/* --- Botón Naranja (ENVIAR) --- */
.btn-rb-submit {
    background-color: #f26522; /* Naranja brillante del diseño */
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 20px;
    border-radius: 30px; /* Bordes totalmente redondeados (pill shape) */
    border: none;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-rb-submit:hover {
    background-color: #d85417; /* Naranja más oscuro al hover */
    color: #ffffff;
}

.yellow{
    color: #F2C533;
}

/* --- Cards Horizontales de Publicaciones --- */
.publicaciones-list {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Separación vertical entre tarjetas */
}

.publicacion-card {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #518c6e; /* Borde verde del diseño */
    border-radius: 20px;
    padding: 16px 24px 16px 16px; /* Menos padding a la izquierda para acercar la imagen al borde */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.publicacion-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Imagen cuadrada de la izquierda */
.pub-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 14px;
    flex-shrink: 0; /* Evita que la imagen se aplaste si hay mucho texto */
}

/* Contenedor central de textos */
.pub-content {
    flex-grow: 1;
    padding: 0 30px; /* Separación respecto a la imagen y al botón */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pub-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 6px;
    line-height: 1.2;
}

.pub-authors {
    font-size: 0.95rem;
    color: #2b845a; /* Verde específico del texto de autores */
    margin-bottom: 4px;
}

.pub-category {
    font-size: 0.95rem;
    color: #f06c4e; /* Tono coral/salmón de la categoría */
    margin-bottom: 8px;
}

.pub-desc {
    font-size: 0.95rem;
    color: #333333;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Contenedor derecho (Botón Descargar) */
.pub-action {
    min-width: 130px;
    text-align: right;
    flex-shrink: 0;
}

.btn-descargar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: underline;
    text-underline-offset: 4px; /* Separa sutilmente la línea de subrayado del texto */
    transition: opacity 0.3s ease;
}

.btn-descargar:hover {
    opacity: 0.7;
    color: #1a1a1a;
}

.btn-descargar i {
    font-size: 1.1rem;
}

/* --- Cards de Investigadores y Expertos --- */
.investigador-card {
    background-color: #ffffff;
    border: 1px solid #f06c4e; /* Tono coral/naranja extraído del diseño */
    border-radius: 20px;
    padding: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.investigador-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(240, 108, 78, 0.15); /* Sombra sutil con el mismo tono coral */
}

/* Imagen del perfil */
.inv-img {
    width: 100%;
    height: 200px; /* Asegura que todas las fotos mantengan la misma proporción */
    object-fit: cover;
    border-radius: 14px; /* Un poco menos redondeado que el contenedor exterior */
    margin-bottom: 16px;
}

/* Tipografía de la tarjeta */
.inv-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
    line-height: 1.25;
}

.inv-role {
    display: block;
    font-size: 0.9rem;
    color: #518c6e; /* Verde del rol */
    margin-bottom: 4px;
}

.inv-institute {
    display: block;
    font-size: 0.9rem;
    color: #f06c4e; /* Naranja/Coral de la institución */
    margin-bottom: 24px;
}

/* Botón Conoce más */
.btn-conoce-mas {
    display: table;
    margin: 0 auto; /* Centra el botón horizontalmente */
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 2px;
    transition: opacity 0.3s ease;
}

.btn-conoce-mas:hover {
    opacity: 0.7;
    color: #1a1a1a;
}

/* --- Cards de Temas Estratégicos --- */
.tema-estrategico-card {
    position: relative;
    height: 500px; /* Tarjetas más altas tipo póster */
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end; /* Empuja el contenido hacia abajo */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

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

/* Gradiente de fondo (Overlay) */
.tema-overlay {
    width: 100%;
    /* Gradiente que va de negro al 90% abajo a transparente arriba */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
    padding: 40px 30px 30px 30px; /* Mucho padding abajo y a los lados */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Título de la tarjeta */
.tema-title {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 12px;
}

/* Enlace "Conoce más" en Amarillo */
.tema-link {
    color: #f5c04f; /* Amarillo cálido/dorado del diseño */
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px; /* Separa un poco la línea de subrayado */
    align-self: flex-start; /* Asegura que se alinee a la izquierda y no se estire */
    transition: color 0.3s ease, opacity 0.3s ease;
}

.tema-link:hover {
    color: #ffd273; /* Un amarillo un poco más claro al hacer hover */
    opacity: 0.9;
}

/* --- Imagen Hero de la Interna --- */
.single-hero-img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 24px; /* Bordes muy redondeados como en el diseño */
    margin-bottom: 30px;
}

/* --- Título y Contenido --- */
.single-title {
    font-size: clamp(2.5rem, 4vw, 3.5rem); /* Título enorme y adaptable */
    font-weight: 700;
    line-height: 1.1;
}

.single-content p {
    font-size: 1.05rem;
    color: #4a4a4a;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* --- Metadatos (Autor, Fecha, Categoría) --- */
.meta-label {
    font-size: 0.9rem;
    color: #f06c4e; /* Tono coral del diseño */
    font-weight: 500;
}

.meta-value {
    font-size: 1rem;
}

/* Píldora verde de Categoría */
.badge-category {
    background-color: #e8f5e9; /* Verde muy claro (ajusta al código exacto si lo tienes) */
    color: #2b845a; /* Texto verde oscuro */
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
}

/* --- Título del Sidebar --- */
.sidebar-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* --- Iconos de Compartir --- */
.share-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.share-icon:hover {
    background-color: #004a2d;
    color: #fff;
}

/* --- Contenedor de la Tabla de Eventos (Figma Wrapper) --- */
.eventos-table-wrapper {
    background: #00673A; /* Primary/Green/500 */
    border-radius: 24px;
    padding: 35px 40px; /* Espacio interno para separar el contenido del borde */
    width: 100%;
}

/* --- Título de la tabla --- */
.eventos-table-title {
    font-family: 'DINPro', sans-serif; /* Asegura que coincida con tu tipografía cargada */
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: #F2C533; /* Colombia/500 */
    margin-bottom: 25px;
}

/* --- Estilos de la Tabla --- */
.eventos-table {
    width: 100%;
    border-collapse: collapse;
    /* Se eliminó el min-width para quitar el scroll horizontal */
}

/* Bordes blancos globales para celdas y cabeceras */
.eventos-table th, 
.eventos-table td {
    border: 1px solid #FFFFFF !important; 
    padding: 16px 20px;
    background-color: transparent !important;
    color: #FFFFFF !important;
    word-wrap: break-word; /* Ayuda a que el texto largo salte de línea en móviles */
}

/* --- Compartir en: (Text y Contenedor) --- */
.share-title {
    font-family: 'DINPro', sans-serif;
    font-weight: 700;
    font-size: 16px; /* Ajuste visual proporcional al diseño */
    color: #00673A; /* Primary/Green/500 */
    margin: 0;
}

/* --- Íconos de Redes Sociales --- */
.share-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #00673A; /* Todo en verde primario, sin fondos */
    font-size: 22px; /* Un poco mayor a 18px para que la caja del ícono de la fuente se vea del tamaño correcto */
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Efecto hover sutil ya que no hay fondo */
.share-icon:hover {
    color: #00673A;
    opacity: 0.7;
    transform: scale(1.1); /* Pequeño salto al pasar el mouse */
}

/* --- Imagen Hero Tema Estratégico --- */
.tema-hero-img {
    height: 450px;
    object-fit: cover;
    border-radius: 24px; /* Bordes redondeados del sistema de diseño */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra sutil para despegarla del fondo */
}

/* --- Títulos de Secciones Relacionadas --- */
.section-related-title {
    font-size: 2rem;
    font-weight: 700;
}

/* Enlace general de "Ver más" alineado a la derecha */
.link-ver-mas-general {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.3s ease;
}

.link-ver-mas-general:hover {
    color: #1a1a1a;
    opacity: 0.7;
}

/* --- Cards de Investigadores y Expertos (Actualizado Figma) --- */
.investigador-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Empuja el texto hacia abajo */
    align-items: flex-start;
    padding: 24px;
    gap: 12px;
    height: 392px; /* Altura exacta de Figma */
    
    /* Borde y Radio */
    border: 1px solid #EF5B34; /* Primary/Orange/500 */
    border-radius: 24px;
    
    /* Propiedades de fondo para que la imagen se adapte bien */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.investigador-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(239, 91, 52, 0.2); /* Sombra naranja sutil al pasar el mouse */
}

/* Nombre del Investigador */
.investigador-card .inv-name {
    font-family: 'DINPro', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px; /* 133% */
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0; /* Anulamos margen por defecto porque usamos 'gap' en el contenedor */
}

/* Rol e Instituto */
.investigador-card .inv-details {
    font-family: 'Lato', sans-serif; /* Según Figma usa Lato aquí */
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px; /* 138% */
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0;
}

/* --- Redes Sociales (Compartir en) --- */
.share-title {
    font-family: 'DINPro', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #00673A; /* Verde corporativo */
    margin: 0;
}

.share-icon {
    display: inline-flex;
    color: #00673A;
    font-size: 22px;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.share-icon:hover {
    color: #00673A;
    opacity: 0.7;
    transform: scale(1.1);
}

/* --- Botón Ver Más Verde Centrado --- */
.btn-ver-mas-green {
    display: inline-block;
    background-color: #00673A; /* Verde principal */
    color: #FFFFFF !important;
    font-family: 'DINPro', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 45px; /* Botón ancho */
    border-radius: 30px; /* Bordes tipo píldora */
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-ver-mas-green:hover {
    background-color: #004a2d; /* Verde un poco más oscuro al pasar el mouse */
    transform: translateY(-2px);
}

/* ==============================================================
   DROPDOWN MENU (Submenú de WordPress) - Figma Pixel Perfect
   ============================================================== */

/* 1. Posicionamiento del contenedor padre */
.navbar-nav .menu-item-has-children {
    position: relative;
    padding-bottom: 10px; 
    margin-bottom: -10px;
}

/* 2. Modal Sobre la Red (Contenedor Figma) */
.navbar-nav .sub-menu {
    /* Disposición automática Figma */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
    
    /* Posicionamiento y Animación */
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 120%;
    left: 0;
    min-width: 160px; /* Un poco más de los 149px del Figma para dar respiro al texto en diferentes navegadores */
    
    /* Aspecto Visual Figma */
    background: #FFFFFF;
    box-shadow: 0px 20px 8px rgba(0, 0, 0, 0.01), 
                0px 11px 7px rgba(0, 0, 0, 0.05), 
                0px 5px 5px rgba(0, 0, 0, 0.09), 
                0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin: 0;
    list-style: none;
    border: none;
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1050;
}

/* 3. Mostrar el dropdown suavemente al hacer hover */
.navbar-nav .menu-item-has-children:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    top: 100%;
}

/* 4. Estructura de los Items ("Qué hacemos", "Comité") */
.navbar-nav .sub-menu li {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0px;
}

/* 5. Textos de los Enlaces */
/* 5. Textos de los Enlaces (Ajustado para íconos) */
.navbar-nav .sub-menu a {
    display: flex;
    align-items: center;
    gap: 8px; /* Separación exacta del Figma entre ícono y texto */
    width: 100%;
    height: 22px; 
    padding: 0px;
    
    color: #1a1a1a !important; 
    font-family: 'DINPro', sans-serif;
    font-size: 15px; 
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Controlar el tamaño exacto de los íconos SVG dentro del menú */
.navbar-nav .sub-menu a img.menu-svg-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0; /* Evita que el ícono se aplaste si el texto es largo */
}

/* 6. Hover en los enlaces (Texto verde) */
.navbar-nav .sub-menu a:hover,
.navbar-nav .sub-menu .current-menu-item > a {
    color: #00673A !important; /* Primary/Green/500 */
    background-color: transparent;
}

/* 7. (Opcional) Indicador de flecha en el menú padre */
.navbar-nav .menu-item-has-children > a::after {
    content: '\f078'; /* Ícono de FontAwesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 10px;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.3s ease;
    display: inline-block;
}

.navbar-nav .menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* ==============================================
   ESTILOS PERSONALIZADOS PARA SWIPER HERO
   ============================================== */

/* --- 1. Paginación (Línea verde y puntitos) --- */
.swiper-hero {
    padding-bottom: 3rem; /* Da espacio abajo para que no se pegue al slider */
}

.swiper-hero .swiper-pagination {
    bottom: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px; /* Separación entre los puntos */
}

/* El punto inactivo (Gris/Verde clarito) */
.swiper-hero .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: var(--rb-neutral-200, #E0E0E0);
    opacity: 1;
    border-radius: 50%;
    margin: 0 !important; /* Reseteamos margen por defecto de swiper */
    transition: all 0.3s ease-in-out;
}

/* El punto activo (La línea larga verde) */
.swiper-hero .swiper-pagination-bullet-active {
    width: 35px;
    height: 6px;
    background-color: var(--rb-green-light, #7AB841); /* Ajusta al verde de tu paleta */
    border-radius: 4px;
}

/* --- 2. Flechas de Navegación --- */
.swiper-hero .swiper-button-next,
.swiper-hero .swiper-button-prev {
    color: #1A1A1A; /* Negras como en el Figma */
    width: 44px;
    height: 44px;
}

/* Reemplazamos el ícono gordo de Swiper por FontAwesome (que ya tienes cargado) */
.swiper-hero .swiper-button-next::after,
.swiper-hero .swiper-button-prev::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.2rem;
}

/* Iconos específicos: flecha izquierda y derecha */
.swiper-hero .swiper-button-prev::after {
    content: '\f060'; /* fa-arrow-left */
}
.swiper-hero .swiper-button-next::after {
    content: '\f061'; /* fa-arrow-right */
}

/* Posicionamiento para que no se peguen a los bordes de la pantalla */
.swiper-hero .swiper-button-prev {
    left: 20px;
}
.swiper-hero .swiper-button-next {
    right: 20px;
}

/* --- 2. Flechas de Navegación por fuera --- */
.custom-arrow-prev,
.custom-arrow-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    color: #1A1A1A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s;
}

.custom-arrow-prev:hover,
.custom-arrow-next:hover {
    opacity: 0.6;
}

/* Reemplazamos por FontAwesome */
.custom-arrow-prev::after,
.custom-arrow-next::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.5rem; /* Un poco más grandes */
}

.custom-arrow-prev::after { content: '\f060'; } /* Flecha Izquierda */
.custom-arrow-next::after { content: '\f061'; } /* Flecha Derecha */

/* Pegadas a los extremos absolutos */
.custom-arrow-prev { left: -30px; }
.custom-arrow-next { right: -30px; }

/* ==============================================
   ANIMACIONES DEL SLIDER PRINCIPAL (SWIPER)
   ============================================== */

/* 1. ESTADO INICIAL (Oculto y desplazado) */
/* Todos los elementos de texto empiezan invisibles y movidos 30px hacia abajo */
.swiper-slide .banner-subtitle,
.swiper-slide .hero-title-massive,
.swiper-slide .rb-description,
.swiper-slide .btn-rb-primary {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición súper suave */
}

/* La imagen empieza ligeramente más pequeña y transparente */
.swiper-slide img {
    opacity: 0;
    transform: scale(0.95);
    transition: all 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. ESTADO ACTIVO (Cuando el slide entra a la pantalla) */
/* Devuelve los elementos a su posición original y los hace visibles */
.swiper-slide-active .banner-subtitle,
.swiper-slide-active .hero-title-massive,
.swiper-slide-active .rb-description,
.swiper-slide-active .btn-rb-primary {
    opacity: 1;
    transform: translateY(0);
}

.swiper-slide-active img {
    opacity: 1;
    transform: scale(1);
}

/* 3. RETRASOS EN CASCADA (El toque maestro) */
/* Cada elemento entra un poco después que el anterior */
.swiper-slide-active .banner-subtitle {
    transition-delay: 0.1s;
}

.swiper-slide-active .hero-title-massive {
    transition-delay: 0.3s;
}

.swiper-slide-active .rb-description {
    transition-delay: 0.5s;
}

.swiper-slide-active .btn-rb-primary {
    transition-delay: 0.7s;
}

.swiper-slide-active img {
    transition-delay: 0.2s; /* La imagen anima al mismo tiempo que el título */
}

/* ==============================================
   TARJETAS DE PROYECTOS (Basado en Figma)
   ============================================== */
.rb-card-proyecto {
    /* 1. Apariencia y Bordes (Figma) */
    border: 1px solid #EF5B34 !important;
    border-radius: 24px;
    
    /* 2. Disposición interna del contenido (Figma) */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Empuja el contenido hacia abajo */
    align-items: flex-start;
    padding: 24px;
    gap: 12px;
    
    /* 3. Estructura Web Responsiva (Adaptación) */
    position: relative; /* Cambiado de absolute para no romper el grid */
    min-height: 280px; /* Usamos min-height en vez de height fijo para móviles */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* Asegura que el color de fondo no se salga de los bordes redondeados */
    
    /* 4. Animación Hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rb-card-proyecto:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* ==============================================
   OVERLAY OSCURO PARA LA IMAGEN (Figma)
   ============================================== */
/* Como la imagen viene del HTML/PHP (inline style), usamos un ::before 
   para aplicar el gradiente oscuro (rgba 0.4) que marca el Figma */
.rb-card-proyecto::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    border-radius: 23px; /* Un pixel menos que el contenedor para que no tape el borde naranja */
}

/* Elevamos el contenido para que no quede debajo de la capa oscura */
.rb-card-proyecto .card-content {
    position: relative;
    z-index: 2;
    width: 100%;
}
/* Ocultar en móviles para que no estorben */

/* ==============================================
   PAGINACIÓN PERSONALIZADA (Estilo Figma)
   ============================================== */
/* El contenedor principal (la "píldora" con borde que envuelve todo) */
.custom-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #E5E7EB; /* Gris muy suave */
    border-radius: 12px;
    background-color: #ffffff;
}

/* Los botones individuales (números y flechas) */
.custom-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    text-decoration: none;
    color: #5A9B7A; /* El tono verde claro de los números inactivos */
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

/* Efecto Hover para los botones inactivos */
.custom-pagination a.page-numbers:hover {
    border-color: #005c3a; /* Verde oscuro Red Bioamazonia */
    color: #005c3a;
    background-color: #f4f9f7; /* Un fondo verde súper clarito */
}

/* El botón activo (Página actual) */
.custom-pagination .current {
    background-color: #005c3a; /* Verde oscuro */
    color: #ffffff;
    border-color: #005c3a;
}

/* Ajuste sutil para los íconos de las flechas */
.custom-pagination .page-numbers i {
    font-size: 14px;
}

/* ==============================================================
   1. FIJAR EL BOTÓN MIENTRAS ENVÍA (Para que no se vuelva naranja ni desaparezca)
   ============================================================== */
.wpcf7 form.submitting .btn-rb-submit,
.wpcf7 form .btn-rb-submit:disabled {
    background-color: #518c6e !important; /* Mantenemos tu verde */
    color: #ffffff !important;
    opacity: 0.7; /* Lo opacamos un poco para que se note que está cargando */
    cursor: not-allowed;
    border: none !important;
}

/* ==============================================================
   2. EL SPINNER DE CARGA DE CF7 (El icono que da vueltas)
   ============================================================== */
.wpcf7-spinner {
    background-color: #f06c4e; /* Le damos el toque naranja corporativo */
    margin-left: 15px;
}

/* ==============================================================
   3. CAJAS DE RESPUESTA DE CF7 (Éxito o Error)
   ============================================================== */
.wpcf7 form .wpcf7-response-output {
    border-radius: 8px;
    padding: 12px 20px;
    margin-top: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    border: 2px solid transparent;
}

/* Estilo cuando el mensaje se envía correctamente (Verde) */
.wpcf7 form.sent .wpcf7-response-output {
    background-color: #e6f4ea;
    border-color: #518c6e;
    color: #005c3a;
}

/* Estilo cuando hay un error en la validación (Naranja/Rojo) */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    background-color: #fce8e6;
    border-color: #f06c4e;
    color: #d93025;
}

/* Asegurar que el contenedor del botón no colapse */
.wpcf7 form p:last-child {
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .custom-arrow-prev,
    .custom-arrow-next {
        display: none;
    }
}

/* Ocultar flechas en móviles para evitar que tapen la imagen */
@media (max-width: 991px) {
    .swiper-hero .swiper-button-next,
    .swiper-hero .swiper-button-prev {
        display: none;
    }
}

/* Ajustes Responsive */
@media (max-width: 768px) {
    .tema-hero-img {
        height: 250px; /* Hero más pequeño en móviles */
    }
    .section-related-title {
        font-size: 1.5rem;
    }
}

/* --- Ajustes Responsive para Móviles --- */
@media (max-width: 768px) {
    .eventos-table-wrapper {
        padding: 24px 20px; /* Reducimos el padding en pantallas pequeñas */
        border-radius: 16px;
    }
    .eventos-table-title {
        font-size: 20px;
        line-height: 28px;
    }
}

/* --- Adaptación Responsive --- */
@media (max-width: 768px) {
    .tema-estrategico-card {
        height: 400px; /* Un poco más bajas en móviles */
    }
    .tema-title {
        font-size: 1.4rem;
    }
}

/* --- Adaptación Responsive para Móviles --- */
@media (max-width: 768px) {
    .publicacion-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
    }
    
    .pub-img {
        width: 100%;
        height: 200px; /* La imagen toma todo el ancho arriba */
    }
    
    .pub-content {
        padding: 0;
    }
    
    .pub-action {
        width: 100%;
        text-align: left;
    }
}
/* --- Ajustes Responsive --- */
@media (max-width: 768px) {
    .contacto-form-wrapper {
        padding: 30px 20px;
        margin-top: 50px;
    }
    .contacto-bg-text {
        top: 2%;
        font-size: 80px;
    }
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .proyectos-grid {
        grid-template-columns: 1fr;
    }
    .main-title {
        font-size: 2.2rem;
    }
}

/* ====================================================
   AJUSTE RESPONSIVE: TÍTULO COLOSAL HERO (HOME)
   ==================================================== */
@media (max-width: 768px) {
    .hero-title-massive {
        /* El !important es vital aquí para sobrescribir el estilo inline del PHP/ACF */
        font-size: clamp(2.5rem, 11vw, 4rem) !important; 
        line-height: 1 !important;
        letter-spacing: -1px !important;
        word-wrap: break-word; /* Evita que palabras gigantes rompan el diseño */
    }
    
    /* Ajustamos proporcionalmente el subtítulo superior ("La Amazonia es") */
    .swiper-hero .banner-subtitle {
        font-size: 24px !important; 
        line-height: 1.2 !important;
    }
}

/* Estilo para el logo del aliado en el footer */
.footer-logo-aliado {
    height: 70px; /* Tamaño por defecto para Desktop */
    width: auto;
    object-fit: contain;
    transition: height 0.3s ease;
}

.country-selector.weglot-dropdown .wgcurrent {
 border: none !important; 

}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .footer-logo-aliado {
        height: 50px !important; /* Forzamos los 50px solo en móviles */
    }
}

@media (max-width: 768px) {
    .hero-title-massive {
        font-size: clamp(2.5rem, 11vw, 4rem) !important; 
        line-height: 1 !important;
        letter-spacing: -1px !important;
        word-wrap: break-word; 
    }
}

/* ====================================================
   AJUSTE RESPONSIVE: REDUCCIÓN DE ESPACIOS (py-5)
   ==================================================== */
@media (max-width: 768px) {
    /* Reducimos el padding vertical colosal de las secciones a algo más amigable */
    section.py-5, 
    div.py-5, 
    main.py-5 {
        padding-top: 1rem !important; /* Aprox 32px (en vez de 48px) */
        padding-bottom: 1rem !important;
    }

    /* Si en alguna sección usaste solo pt-5 o pb-5, también los atajamos */
    section.pt-5, div.pt-5, main.pt-5 {
        padding-top: 1rem !important;
    }
    section.pb-5, div.pb-5, main.pb-5 {
        padding-bottom: 1rem !important;
    }
    
    /* También ajustamos los márgenes verticales colosales si usaste my-5 */
    section.my-5, div.my-5 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .tema-content h4{
        line-height: 1.1em;
    }
}

/* ====================================================
   AJUSTES FINALES MÓVIL (QA DIRECTORES RED)
   ==================================================== */
@media (max-width: 768px) {
    
    /* 1. FIX: Evita que palabras muy largas (COLABORACIÓN) se partan a la mitad */
    .hero-title-massive {
        font-size: clamp(1.5rem, 8.5vw, 2.5rem) !important; /* Encoge más la letra dinámicamente */
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        line-height: 1.1 !important;
    }

    /* 2. FIX: Logos de los institutos cuadrados o aplastados */
    .rb-logo-item {
        height: auto !important;
        min-height: 80px;
    }
    .instituto-logo-fit {
        width: 100% !important;
        height: auto !important;
        max-height: 70px !important;
        object-fit: contain !important; /* Forza a que respete la proporción original */
    }

    /* 3. FIX: Cabezas cortadas en las tarjetas del comité y expertos */
    .rb-member-img,
    .rb-member-modal-img,
    .inv-img {
        object-position: top center !important; /* Le dice al navegador que siempre ancle el recorte arriba (la cara) */
    }
    /* 4. FIX: Altura de las fotos del comité/investigadores en móvil */
/* 4. FIX: Altura de las fotos del comité/investigadores en móvil */
    .rb-member-img {
        height: auto !important; 
        aspect-ratio: 3 / 4 !important; /* <--- EL TRUCO ESTÁ AQUÍ: 3 de ancho x 4 de alto (Vertical) */
        object-fit: cover !important; 
        object-position: top center !important;
    }
}

@media screen and (max-width: 768px) {
  .contenedor-botones {
    display: flex;
    flex-direction: column; /* Apila los botones verticalmente */
    width: 100%;
    gap: 15px; /* Espaciado entre botones moderno */
  }
  
  .contenedor-botones .btn-naranja {
    width: 100%;
  }

  .d-flex .btn-rb-orange {
        display: block !important; /* Quita el list-item y lo vuelve bloque */
        width: 100% !important;    /* Fuerza el ancho al 100% */
        text-align: center;        /* Centra el texto dentro del botón */
    }
}