/* --- LOGO FIJO (Cambio Radical | ¡SÍ LO HACE!) --- */
.brand-fixed-footer {
    position: fixed; /* Siempre visible al bajar */
    bottom: 40px;    /* Separado del borde inferior */
    right: 40px;     /* Separado del borde derecho */
    z-index: 2000;
}

.brand-fixed-footer img {
    height: 70px; /* Tamaño profesional */
    width: auto;
    background-color: white; 
    padding: 10px 10px;
    border-radius: 5px; /* Forma rectangular limpia */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* --- SECCIÓN HERO INICIO --- */

.hero-inicio {
    min-height: 100vh;
    width: 100%;
    /* Fondo base con los colores oficiales */
    background: linear-gradient(180deg, 
        #F60000 0%,     /* Rojo que conecta con el header */
        #004C9E 50%,    /* Azul central */
        #44603B 80%,    /* Verde bosque */
        #A8B548 100%);  /* Verde amarillento */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 100px;
}

.hero-inicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%; /* Cubre el área de los textos */
    height: 100%;
    /* Degradado de azul sólido a transparente de izquierda a derecha */
    background: linear-gradient(90deg, 
        rgba(0, 76, 158, 0.9) 0%,   /* Azul oficial sólido en el borde */
        rgba(0, 76, 158, 0.4) 70%,  /* Se aclara detrás de las letras */
        rgba(0, 76, 158, 0) 100%);  /* Desaparece antes de tocar a las candidatas */
    z-index: 2; /* Por encima de la foto (1) pero debajo del texto (10) */
    pointer-events: none;
}

.hero-container {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    align-items: center;
}

/* --- BLOQUE DE TEXTO --- */
.hero-text-side {
    flex: 1;
    z-index: 10; /* Siempre al frente de todas las capas */
    color: white;
    /* Sombra sutil para que las letras blancas "salten" del fondo azul */
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.hero-main-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 3.8rem; /* Tamaño impactante */
    line-height: 1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    max-width: 500px;
}

.hero-paragraph {
    font-size: 1.1rem;
    line-height: 1.4;
    max-width: 500px;
    margin-bottom: 40px;
}

/* --- BOTÓN ÚNETE (RECUPERADO) --- */
.hero-btn {
    display: inline-block;
    background-color: white;
    color: #004C9E; /* Azul oficial */
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    
    /* CLAVE: Debe estar por encima del degradado ::before */
    position: relative; 
    z-index: 20; 
    
    transition: all 0.3s ease;
    cursor: pointer;
}


/* --- HOVER DEL BOTÓN --- */
.hero-btn:hover {
    transform: translateY(-5px); /* Elevación suave */
    box-shadow: 0 12px 25px rgba(0,0,0,0.25);
    background-color: #f8f8f8; /* Cambio sutil de blanco para feedback visual */
    color: #00356e; /* El azul se oscurece un poco al pasar el mouse */
}

.hero-footer-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 35px;
}

/* --- IMAGEN PRINCIPAL (ANCHO COMPLETO Y FUSIÓN PERFECTA) --- */
.hero-image-side {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Capa base */
}

.img-principal {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Comportamiento de fondo */
    object-position: right bottom; /* Candidatas pegadas abajo */
    display: block;
}

/* --- REDES SOCIALES (ESTILO ORIGINAL ESCALADO) --- */
.social-sidebar {
    position: absolute;
    right: 40px; /* Aumentado para equilibrio visual */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px; /* Más espacio entre los círculos más grandes */
    z-index: 100;
}

.social-link {
    background-color: white;
    width: 60px; /* Escalado de 45px a 60px */
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Sombra proporcional al tamaño */
    transition: 0.3s;
}

.social-link img { 
    width: 30px; /* Escalado de 22px a 30px para mantener la proporción */
    height: auto;
}

.social-link:hover {
    transform: scale(1.1);
    background-color: #004C9E; /* El círculo cambia a azul, el icono sigue igual */
}

/* --- SEPARADOR (BASE BLANCA RECTA) --- */
.hero-separator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Altura suficiente para que la etiqueta respire */
    background-color: white;
    border-radius: 0; 
    z-index: 15;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* --- ETIQUETA ROJA MÁS GRANDE Y RADICAL --- */
.floating-badge {
    background-color: #F60000; /* Rojo oficial */
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    /* Aumentamos el tamaño de la fuente para que sea más legible */
    font-size: 1.9rem; 
    /* Aumentamos el padding para que la forma sea mucho más imponente */
    padding: 20px 80px; 
    
    /* CURVA ASIMÉTRICA MÁS MARCADA (Aumentamos de 35px a 50px) */
    border-radius: 50px 0 50px 0; 
    
    position: absolute;
    /* Bajamos el top para que al ser más grande siga centrada en el corte */
    top: -45px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Sombra más fuerte para compensar el tamaño */
    white-space: nowrap;
    text-transform: none;
    line-height: 1;
}

/* ==========================================================================
   MEDIA QUERIES - RESPONSIVE HERO (CORRECCIÓN DE POSICIÓN Y COMPACTO)
   ========================================================================== */

@media (max-width: 1024px) {
    .hero-main-title { font-size: 3rem; }
    .hero-inicio::before {
        width: 100%;
        background: linear-gradient(90deg, rgba(0, 76, 158, 0.95) 0%, rgba(0, 76, 158, 0.7) 100%);
    }
}

@media (max-width: 768px) {
    /* --- AJUSTE DEL CONTENEDOR PADRE --- */
    .hero-inicio {
        /* 1. Cambiamos center por flex-start para que el padding funcione */
        display: flex;
        flex-direction: column;
        align-items: flex-start; 
        justify-content: flex-start;
        
        /* 2. Aumentamos drásticamente el padding para empujar el contenido abajo */
        padding-top: 600px; 
        
        text-align: center;
        height: auto;
        min-height: 100vh;
        position: relative;
    }

    .hero-container {
        flex-direction: column;
        width: 100%;
        padding: 0 5%;
        z-index: 10;
        margin-bottom: 0;
        /* Aseguramos que el contenido interno se centre horizontalmente */
        display: flex;
        align-items: center; 
    }

    /* --- IMAGEN DE FONDO (PERSONAS A LA DERECHA) --- */
    .img-principal {
        /* Desplazamos la imagen al 75% a la derecha */
        object-position: 82% bottom !important; 
        object-fit: cover;
    }

    .hero-inicio::before {
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, 
            rgba(0, 76, 158, 0.95) 0%, 
            rgba(0, 76, 158, 0.6) 50%, 
            rgba(0, 76, 158, 0.2) 100%);
    }

    /* --- BLOQUE DE TEXTO COMPACTO --- */
    .hero-text-side {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-main-title { 
        font-size: 2.1rem; 
        margin-bottom: 8px; 
    }
    .hero-subtitle { 
        font-size: 1.2rem; 
        margin-bottom: 12px; 
    }
    .hero-paragraph { 
        font-size: 0.95rem; 
        margin-bottom: 20px; 
        line-height: 1.3;
    }

    /* --- REDES SOCIALES (BAJADAS Y COMPACTAS) --- */
    .social-sidebar {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        width: 100%;
        margin-top: 30px; /* Pegado al contenido anterior */
        margin-bottom: 120px; /* Espacio para el badge */
        z-index: 100;
    }

    .social-link {
        width: 50px;
        height: 50px;
        background-color: white;
        border-radius: 50%;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    /* --- ETIQUETA ROJA (BADGE) --- */
    .floating-badge {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 25px;
        top: auto;
        font-size: 1.1rem;
        padding: 12px 30px;
        width: 85%;
        max-width: 380px;
        border-radius: 35px 0 35px 0;
        z-index: 110;
    }
}

@media (max-width: 480px) {
    .hero-inicio {
        padding-top: 200px; /* Ajuste para móviles pequeños */
    }
    .hero-main-title { font-size: 1.8rem; }
    .social-sidebar { margin-top: 25px; }
}

/* --- SECCIÓN INFORMATIVA PULIDA --- */
.intro-info-section {
    background-color: white;
    padding: 120px 5% 100px 5%; /* Más espacio superior para que la etiqueta roja respire */
}

.info-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 100px; /* Más separación entre texto e imagen para elegancia */
}

/* --- ESTILO DE TEXTOS (MEJORA TIPOGRÁFICA) --- */
.info-text-content {
    flex: 1.3;
}

.info-text-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Un poco menos que 900 para que las letras no se peguen */
    font-size: 2.8rem; /* Tamaño más impactante */
    color: #0b132b; /* Un azul casi negro más profundo y elegante que el #1a1a1a */
    line-height: 1.15;
    margin-bottom: 30px;
    letter-spacing: -1px; /* Letras ligeramente más juntas para estilo moderno */
}

.info-text-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem; /* Tamaño óptimo de lectura */
    line-height: 1.7; /* Interlineado aumentado para que el texto "flote" */
    color: #4a4a4a; /* Gris oscuro suave para no cansar la vista */
    margin-bottom: 25px;
    font-weight: 400;
}

/* El último párrafo resaltado como en la imagen */
.info-text-content p:last-of-type {
    font-weight: 600;
    color: #000;
    margin-bottom: 0;
}

/* --- AJUSTE FINAL IMAGEN PÉTALO --- */
.img-secundaria {
    width: 100%;
    max-width: 480px;
    height: 480px;
    object-fit: cover;
    /* Curva de pétalo más fluida */
    border-radius: 0 180px 0 180px; 
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   MEDIA QUERIES - SECCIÓN INFORMATIVA (INTRO INFO)
   ========================================================================== */

@media (max-width: 1024px) {
    .info-container {
        gap: 50px; /* Reducimos el espacio excesivo en tablets */
    }

    .info-text-content h2 {
        font-size: 2.3rem;
    }
}

@media (max-width: 768px) {
    .intro-info-section {
        padding: 80px 7% 60px 7%; /* Ajuste de aire para móviles */
    }

    .info-container {
        flex-direction: column; /* Apilamos contenido */
        gap: 40px;
        text-align: center; /* Centramos el texto para mejor lectura */
    }

    .info-text-content {
        order: 1; /* Texto primero */
    }

    .info-text-content h2 {
        font-size: 2rem;
        margin-bottom: 20px;
        letter-spacing: -0.5px;
    }

    .info-text-content p {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    /* Ajuste de la Imagen Pétalo en Móvil */
    .info-image-content {
        order: 2; /* Imagen debajo del texto */
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .img-secundaria {
        max-width: 320px; /* Tamaño más cómodo para celular */
        height: 320px;
        border-radius: 0 120px 0 120px; /* Curva proporcional al tamaño */
    }
}

@media (max-width: 480px) {
    .intro-info-section {
        padding: 60px 5% 40px 5%;
    }

    .info-text-content h2 {
        font-size: 1.7rem;
    }

    .info-text-content p {
        font-size: 1rem;
    }

    .img-secundaria {
        max-width: 280px;
        height: 280px;
        border-radius: 0 100px 0 100px;
    }
}

/* --- BLOQUE GRIS DE IMPACTO --- */
.diaspora-highlight-section {
    background-color: #D9D9D9; /* Gris exacto */
    padding: 100px 20px;
    text-align: center;
    width: 100%;
}

.highlight-container {
    /* El contenedor debe ser lo suficientemente ancho para las líneas largas */
    max-width: 1200px; 
    margin: 0 auto;
}

.highlight-main-title {
    font-family: 'Gilroy-Black', sans-serif;
    font-size: 2.8rem;
    color: #000;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-bottom: 30px;
}

.highlight-description {
    font-family: 'Montserrat', sans-serif;
    /* Un tamaño sutilmente menor permite que la frase se alargue sin romperse */
    font-size: 1.2rem; 
    color: #333;
    /* Interlineado amplio para que las dos líneas respiren */
    line-height: 1.6; 
    /* Ancho máximo generoso para que el texto no se comprima al centro */
    max-width: 1000px; 
    margin: 0 auto;
    font-weight: 400;
}

/* ==========================================================================
   MEDIA QUERIES - BLOQUE GRIS DE IMPACTO
   ========================================================================== */

@media (max-width: 1024px) {
    .highlight-main-title {
        font-size: 2.4rem;
        padding: 0 5%;
    }
    
    .highlight-description {
        font-size: 1.15rem;
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .diaspora-highlight-section {
        padding: 70px 25px; /* Reducimos padding para que no ocupe demasiado scroll */
    }

    .highlight-main-title {
        font-size: 1.9rem; /* Tamaño más manejable para móviles */
        line-height: 1.1;
        letter-spacing: -1px; /* Relajamos un poco el tracking */
        margin-bottom: 20px;
    }

    .highlight-description {
        font-size: 1.05rem;
        line-height: 1.5;
        max-width: 100%; /* Aprovechamos todo el ancho disponible */
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .diaspora-highlight-section {
        padding: 60px 15px;
    }

    .highlight-main-title {
        font-size: 1.6rem;
        font-weight: 900; /* Aseguramos que mantenga la fuerza visual */
    }

    .highlight-description {
        font-size: 0.95rem;
        text-align: center; /* Garantizamos balance visual */
    }
}

/* --- SECCIÓN BIOGRAFÍA (CONSERVANDO FORMA Y BOTÓN) --- */
.bio-main-section {
    padding: 80px 5%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

.bio-main-container {
    max-width: 1050px;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* --- FIGURA CUADRADA ASIMÉTRICA CONSERVADA --- */
.bio-image-box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.bio-img-petal {
    width: 100%;
    max-width: 380px; 
    aspect-ratio: 1 / 1; 
    border-radius: 40px 180px 40px 180px; /* Curvatura característica */
    object-fit: cover;
    display: block;
    box-shadow: 0px 15px 35px rgba(0,0,0,0.06);
}

/* --- BLOQUE DE TEXTO E IMPACTO --- */
.bio-content-box {
    flex: 1.2;
}

.bio-main-title {
    font-family: 'Gilroy-Black', sans-serif;
    font-weight: 900; 
    font-size: 2.8rem; 
    line-height: 1.05; 
    color: #000000;
    margin-bottom: 25px;
    letter-spacing: -1.5px; /* Estilo compacto */
}

.bio-paragraphs p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    color: #333333;
    line-height: 1.5;
    margin-bottom: 18px;
    font-weight: 400;
}

/* --- BOTÓN ROJO CONSERVADO --- */
.bio-btn-red {
    display: inline-block;
    background-color: #F60000;
    color: #ffffff !important;
    padding: 18px 50px;
    border-radius: 100px;
    text-decoration: none;
    font-family: 'Gilroy-Black', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    margin-top: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.bio-btn-red:hover {
    background-color: #D50000;
    transform: translateY(-3px);
    box-shadow: 0px 10px 20px rgba(246, 0, 0, 0.2);
}

/* ==========================================================================
   MEDIA QUERIES - SECCIÓN BIOGRAFÍA
   ========================================================================== */

@media (max-width: 1024px) {
    .bio-main-container {
        gap: 40px;
    }

    .bio-main-title {
        font-size: 2.3rem;
    }

    .bio-img-petal {
        max-width: 320px;
        border-radius: 30px 140px 30px 140px; /* Suavizamos un poco la curva */
    }
}

@media (max-width: 768px) {
    .bio-main-section {
        padding: 60px 7%;
    }

    .bio-main-container {
        flex-direction: column; /* Apilado vertical */
        text-align: center;
        gap: 40px;
    }

    .bio-image-box {
        order: 1; /* Imagen arriba */
        width: 100%;
    }

    .bio-img-petal {
        max-width: 280px;
        border-radius: 30px 120px 30px 120px;
    }

    .bio-content-box {
        order: 2; /* Texto abajo */
        width: 100%;
    }

    .bio-main-title {
        font-size: 2rem;
        letter-spacing: -1px;
    }

    .bio-paragraphs p {
        font-size: 1.05rem;
        line-height: 1.6;
    }

    .bio-btn-red {
        width: 100%; /* Botón de ancho completo para mejor ergonomía */
        max-width: 300px;
        padding: 16px 0;
    }
}

@media (max-width: 480px) {
    .bio-main-section {
        padding: 50px 5%;
    }

    .bio-main-title {
        font-size: 1.7rem;
    }

    .bio-img-petal {
        max-width: 240px;
        border-radius: 20px 100px 20px 100px;
    }

    .bio-paragraphs p {
        font-size: 1rem;
    }

    .bio-btn-red {
        font-size: 1rem;
    }
}

/* --- CONTENEDOR PADRE --- */
.top-section {
    display: flex;
    width: 100%;
    min-height: 600px;
    /* Define aquí el único gris que deseas para todo el fondo */
    background-color: #E6E6E6; 
    overflow: visible;
    position: relative;
    align-items: stretch;
}

/* --- LADO IZQUIERDO (SIN CLIP-PATH) --- */
.photo-container-diagonal {
    flex: 0 0 45%;
    position: relative;
    /* Eliminamos el clip-path y el color diferente para que sea uniforme */
    background-color: transparent; 
    z-index: 1;
}

/* --- LA MUJER --- */
.mujer-png {
    position: absolute;
    bottom: 0;
    /* Ajusta la posición según donde quieras que se ubique en el fondo único */
    right: 0; 
    height: 100%;
    width: auto;
    z-index: 10;
    display: block;
    filter: drop-shadow(10px 0px 15px rgba(0,0,0,0.1));
}

/* --- LADO DERECHO --- */
.content-right {
    flex: 1;
    padding: 80px 5% 80px 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Fondo transparente para que herede el del padre (.top-section) */
    background-color: transparent; 
}

.content-right h2 {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1a1a1a;
    margin-bottom: 40px;
}

/* --- LISTA Y CHECKS --- */
.proposal-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.proposal-list li {
    position: relative;
    padding-left: 60px;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    display: flex;
    align-items: center;
}

/* Cuadros de Check blancos */
.proposal-list li::before {
    content: '✓✓';
    position: absolute;
    left: 0;
    background: #FFFFFF;
    border: 2px solid #333;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 10px;
    letter-spacing: -2px;
    font-weight: 900;
    color: #333;
}

/* BOTÓN */
.btn-full-proposal {
    background-color: #004B8D;
    color: white !important;
    padding: 18px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    width: fit-content;
    transition: 0.3s;
}

.btn-full-proposal:hover {
    background-color: #003566;
    transform: scale(1.02);
}

/* ==========================================================================
   MEDIA QUERIES - SECCIÓN PROPUESTAS (TOP SECTION)
   ========================================================================== */

@media (max-width: 1024px) {
    .content-right h2 {
        font-size: 2.2rem;
    }
    
    .photo-container-diagonal {
        flex: 0 0 40%;
    }
}

@media (max-width: 768px) {
    .top-section {
        flex-direction: column; /* Apilamos verticalmente */
        min-height: auto;
        align-items: center;
    }

    /* --- AJUSTE DE LA FOTO --- */
    .photo-container-diagonal {
        width: 100%;
        height: 400px; /* Altura fija para la zona de la imagen */
        flex: none;
        order: 1; /* Imagen arriba */
    }

    .mujer-png {
        right: 50%;
        transform: translateX(50%); /* Centramos la imagen PNG */
        height: 100%;
        width: auto;
    }

    /* --- AJUSTE DEL CONTENIDO --- */
    .content-right {
        width: 100%;
        padding: 40px 8%;
        order: 2; /* Texto abajo */
        text-align: center;
        align-items: center;
    }

    .content-right h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    /* --- AJUSTE DE LA LISTA --- */
    .proposal-list {
        width: 100%;
        max-width: 500px; /* Para que no se estire demasiado en tablets */
        text-align: left; /* Mantenemos el texto a la izquierda para los checks */
    }

    .proposal-list li {
        font-size: 1rem;
        padding-left: 55px;
    }

    /* --- BOTÓN --- */
    .btn-full-proposal {
        width: 100%;
        max-width: 300px;
        text-align: center;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .photo-container-diagonal {
        height: 320px; /* Más pequeña en móviles pequeños */
    }

    .content-right {
        padding: 30px 5% 60px;
    }

    .content-right h2 {
        font-size: 1.6rem;
    }

    .proposal-list li {
        font-size: 0.95rem;
    }
    
    .proposal-list li::before {
        padding: 4px 6px;
    }
}

/* --- SECCIÓN INFERIOR AZUL --- */
.bottom-section {
    background-color: #004b8d; /* El azul de la imagen */
    padding: 60px 10px;
    color: white;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.container-bottom {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Contenedor del logo PNG */
.logo-candidate img {
    max-width: 300px; /* Ajusta el tamaño de tu logo aquí */
    height: auto;
    display: block;
}

/* Estilo del eslogan */
.slogan-container h2 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Botón Blanco */
.btn-join {
    display: inline-block;
    background-color: white;
    color: #004b8d; /* Texto azul */
    text-decoration: none;
    padding: 18px 45px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.1rem;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-join:hover {
    background-color: #f0f0f0;
    transform: translateY(-3px);
}


/* ==========================================================================
   MEDIA QUERIES - SECCIÓN INFERIOR AZUL (CIERRE)
   ========================================================================== */

@media (max-width: 1024px) {
    .container-bottom {
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    .bottom-section {
        padding: 60px 20px; /* Un poco más de aire lateral */
    }

    .container-bottom {
        gap: 25px; /* Compactamos un poco la distancia */
    }

    /* Reducimos el logo para que no domine toda la pantalla inicial */
    .logo-candidate img {
        max-width: 220px;
    }

    /* Ajuste del eslogan para evitar que se corte o sea muy grande */
    .slogan-container h2 {
        font-size: 1.6rem;
        line-height: 1.2;
        padding: 0 10px;
    }

    /* Botón más amigable para el pulgar */
    .btn-join {
        width: 100%;
        max-width: 280px; /* Evitamos que sea gigante en tablets */
        padding: 16px 0;
        font-size: 1rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .bottom-section {
        padding: 50px 15px;
    }

    .logo-candidate img {
        max-width: 180px;
    }

    .slogan-container h2 {
        font-size: 1.4rem;
        letter-spacing: 0;
    }

    .btn-join {
        font-size: 0.95rem;
        box-shadow: 0 6px 20px rgba(0,0,0,0.15); /* Sombra más visible en móvil */
    }
}

.btn-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Esto crea un espacio perfecto entre el sombrero y el texto */
    /* El resto de tus estilos se mantienen igual */
}