/* [EL CSS ES EL MISMO PARA LAS TRES PÁGINAS Y LAS FUTURAS] */
:root {
    --color-granate: #6a2a32;
    --color-granate-oscuro: #4a1d23;
    --color-dorado: #b89758;
    --fondo-web: #f9f8f3;
    --fondo-tarjeta: #ffffff;
    --texto-principal: #333333;
    --texto-secundario: #555555;
    --color-verde-oscuro: #0f4c1c;
    --fondo-cita-verde: #e2e8e4;
    --fondo-footer: #d2c4c8;
    --fuente-titulos: 'Lora', serif;
    --fuente-texto: 'Open Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    /* Ajustes para la nueva imagen de fondo */
    background-color: var(--fondo-web);
    background-image: url('img/fondo2.webp');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed; /* El fondo se queda fijo al hacer scroll */
    
    color: var(--texto-principal);
    font-family: var(--fuente-texto);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* =========================================
BARRA DE REDES SOCIALES Y LEMA SUPERIOR
========================================= */
		/* --- Ajuste de la cabecera (Barra superior) --- */
		.barra-redes {
			background-color: var(--color-granate-oscuro);
			padding: 10px 5%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap; /* Esto permite que los elementos salten de línea si no caben */
			gap: 10px;       /* Espacio entre el lema y las redes si saltan de línea */
		}

		/* Ajuste específico para móviles */
		@media (max-width: 600px) {
			.barra-redes {
				flex-direction: column; /* Cambia a columna en móvil */
				text-align: center;     /* Centra el lema */
				padding: 15px 5%;
			}
			
			.iconos-redes {
				margin-top: 10px;       /* Añade un poco de aire entre el lema y los iconos */
				justify-content: center; /* Asegura que los iconos estén centrados */
			}
		}

		/* Regla a prueba de balas para el enlace del lema */
		a.lema-cabecera, 
		a.lema-cabecera:link, 
		a.lema-cabecera:visited, 
		a.lema-cabecera:hover, 
		a.lema-cabecera:active {
			color: #ffffff !important;
			font-family: var(--fuente-titulos);
			font-size: 1.1rem;
			font-weight: 600;
			letter-spacing: 1.5px;
			font-style: italic;
			
			/* Forzamos quitar el subrayado en absolutamente todos los navegadores */
			text-decoration: none !important; 
			text-decoration-line: none !important;
			-webkit-text-decoration-line: none !important; /* Específico para Safari/iPhone */
			
			/* Evita sombras o bordes que algunos móviles añaden a los links */
			box-shadow: none !important;
			border: none !important;
			outline: none !important;
		}

        .iconos-redes {
            display: flex;
            gap: 20px; 
            align-items: center;
        }

        .iconos-redes a {
            color: var(--fondo-web);
            font-size: 1.2rem;
            text-decoration: none;
            transition: color 0.3s, transform 0.3s;
        }

        .iconos-redes a:hover { color: var(--color-dorado); transform: scale(1.1); }

/* Ahora la imagen de cabecera es un enlace */
.enlace-hero {
    display: block;
    text-decoration: none;
}

.hero {
    width: 100%;
    height: 55vh;
    min-height: 300px;
    background-image: url('img/cabecera.webp'); 
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    cursor: pointer;
}

@media (max-width: 600px) {
    .hero {
		background-image: url('img/cabecera-mobile.webp'); /* Carga la foto recortada */
        background-size: contain; /* Ajusta la imagen para que quepa entera */
        background-repeat: no-repeat; /* Evita que se repita */
        background-position: center center; /* La centra en el hueco */
        height: 20vh; /* Reducimos la altura en móvil para que no quede tanto espacio vacío */
    }
}

.contenedor-menu {
    display: flex;
    justify-content: center;
    background-color: var(--fondo-web);
    margin-top: -1px;
}

.menu-botones {
    background-color: var(--color-granate-oscuro);
    display: flex;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Los botones ahora son enlaces <a> */
.btn-menu {
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--fuente-texto);
    letter-spacing: 1px;
    transition: background-color 0.3s, color 0.3s;
}

.btn-menu:hover { background-color: var(--color-granate); }
.btn-menu.activo { background-color: var(--color-dorado); color: var(--color-granate-oscuro); }

main {
    max-width: 900px;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
    flex-grow: 1;
}

.tarjeta {
    background-color: var(--fondo-tarjeta);
    border-radius: 8px;
    padding: 3rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 2px solid var(--color-dorado);
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 4rem;
}

.tarjeta h2 { font-family: var(--fuente-titulos); color: var(--color-granate); font-size: 1.8rem; margin-bottom: 1rem; font-weight: 700; }
.linea-separadora { height: 1px; background-color: var(--color-dorado); width: 100%; margin-bottom: 1.5rem; }
.texto-intro { font-style: italic; color: var(--texto-secundario); margin-bottom: 2rem; font-size: 1.05rem; }
.lista-programa { list-style: none; }
.lista-programa li { position: relative; padding-left: 25px; margin-bottom: 1.5rem; }
.lista-programa li::before { content: '•'; color: var(--color-dorado); font-size: 1.5rem; position: absolute; left: 0; top: -2px; }
.lista-programa strong { color: var(--color-granate); font-family: var(--fuente-titulos); font-size: 1.1rem; }

/* =========================================
   BLOQUE DE CABECERA DE CANDIDATURA (CENTRADO)
   ========================================= */
.cabecera-candidatura {
    background-color: rgba(249, 248, 243, 0.95); /* Fondo clarito */
    padding: 2rem;
    margin: 1rem auto -1rem auto;
    text-align: center;
    border-radius: 8px;
    max-width: 800px;
    border-bottom: 3px solid var(--color-dorado);
}

.cabecera-candidatura h1 {
    font-family: var(--fuente-titulos);
    color: var(--color-granate);
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.cabecera-candidatura h2 {
    font-family: var(--fuente-titulos);
    color: var(--color-granate);
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.cabecera-candidatura p {
    font-size: 1.1rem;
    color: var(--texto-principal);
    margin: 0;
    font-weight: 600;
}

/* =========================================
   SECCIÓN BIOGRAFÍA Y PRESENTACIÓN
   ========================================= */
.seccion-biografia { 
    max-width: 1250px; /* Lo hacemos más ancho para que quepan los dos bloques */
    margin: 2rem auto 5rem; 
    padding: 2.5rem 2rem; 
    flex-grow: 1; 
    background-color: rgba(249, 248, 243, 0.95); 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Creamos una cuadrícula para alinear los dos bloques */
.grid-biografias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 3rem;
}

.bio-contenedor { 
    display: flex; 
    align-items: flex-start; /* Esto obliga a que la foto y el texto empiecen pegados arriba */
    gap: 2rem; 
}

.bio-imagen { 
    width: 200px; /* Reducimos un poco el ancho para que respire el texto */
    height: 250px; /* Altura fija para que ambas fotos queden exactamente iguales */
    border: 4px solid var(--color-dorado); 
    object-fit: cover; 
    flex-shrink: 0; 
    border-radius: 8px; 
}

.bio-contenido { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
}

.bio-titulo { 
    color: var(--color-granate); 
    font-size: 1.4rem; 
    font-weight: 700; 
    margin-bottom: 1rem; 
    letter-spacing: 0.5px; 
    font-family: var(--fuente-titulos); 
    text-transform: uppercase;
}

.bio-cita { 
    background-color: var(--fondo-tarjeta); 
    border-left: 8px solid var(--color-dorado); 
    padding: 1.5rem 1.5rem; 
    font-style: italic; 
    font-weight: 600; 
    color: var(--color-granate-oscuro); 
    font-size: 1.15rem; 
    line-height: 1.5; 
    margin-bottom: 1.5rem; 
    width: 100%; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

.bio-boton { 
    background-color: var(--color-granate); 
    color: #ffffff; 
    text-decoration: none; 
    padding: 12px 24px; 
    font-weight: 700; 
    font-size: 1.1rem; 
    transition: background-color 0.3s, transform 0.3s; 
    border-radius: 4px; 
	border: none; 
    cursor: pointer;
}

.bio-boton:hover { 
    background-color: var(--color-granate-oscuro); 
    transform: translateY(-2px); 
	cursor: pointer; 
}

.site-footer { background-color: var(--fondo-footer); border-top: 15px solid var(--color-granate); padding: 4rem 1.5rem 2rem; text-align: center; margin-top: auto; }
.footer-texto-principal { color: var(--color-granate); font-weight: 700; font-size: 1.35rem; line-height: 1.4; max-width: 800px; margin: 0 auto 2rem; }
.footer-redes-contenedor { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 3rem; }
.footer-iconos { display: flex; justify-content: center; gap: 12px; }
.footer-iconos a { background-color: #000000; color: var(--fondo-footer); width: 42px; height: 42px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; text-decoration: none; font-size: 1.2rem; transition: transform 0.3s; }
.footer-iconos a:hover { transform: scale(1.1); }
.footer-usuario { color: #000000; font-weight: 600; font-size: 1rem; }
.footer-legales { border-top: 1px solid rgba(106, 42, 50, 0.2); padding-top: 1.5rem; font-size: 0.9rem; }
.footer-legales a { color: var(--color-granate); text-decoration: none; margin: 0 10px; font-weight: 600; transition: color 0.3s; }
.footer-legales a:hover { color: #000; }

@media (max-width: 768px) {
    /* Forzamos a que el grid pase a ser una sola columna */
    .grid-biografias {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .bio-contenedor { 
        flex-direction: column; 
		align-items: center; /* En móvil recuperamos el centrado horizontal */
        text-align: center; 
        gap: 1rem; 
    }
    
    .bio-imagen { 
        width: 100%; 
        max-width: 200px; /* Tamaño controlado para que no se salga */
        height: auto; 
    }
    
    .bio-contenido { 
        align-items: center; 
    }
    
    .bio-cita { 
        text-align: justify; /* Mantenemos el texto justificado también en móvil */
        font-size: 1rem; 
        padding: 1rem; 
    }

    .footer-texto-principal { font-size: 1.1rem; }
	
	.seccion-biografia { 
        padding: 1.5rem 0.5rem !important; /* Reducimos drásticamente los laterales */
        margin: 1rem 0.5rem !important;    /* Ajustamos margen externo */
        border-radius: 0;                  /* Opcional: bordes rectos para aprovechar más espacio */
    }

    #detalle-candidato {
        padding: 1rem 0.5rem !important;   /* Quitamos el padding lateral del detalle */
    }
}
@media (max-width: 600px) {
    .barra-redes { justify-content: center; padding: 12px 5%; }
    .hero { height: 40vh; }
    .menu-botones { width: 100%; }
    .btn-menu { flex: 1; text-align: center; padding: 15px 0; font-size: 0.9rem; }
    .tarjeta { padding: 1.5rem; }
    .tarjeta h2 { font-size: 1.5rem; }
    .footer-legales a { display: block; margin: 10px 0; }
}

/* Títulos de sección con fondo y formato granate */
.titulo-seccion {
    font-family: var(--fuente-titulos);
    color: var(--color-granate);
    font-size: 2rem;
    text-align: center;
    background-color: rgba(249, 248, 243, 0.95);
    padding: 1.5rem;
    margin: 2rem auto;
    max-width: 600px;
    border-radius: 8px;
    border-bottom: 3px solid var(--color-dorado);
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* Estilos para el listado de candidatos */

.grid-candidatos {
    display: grid;
    /* Fuerza exactamente 3 columnas en pantallas grandes */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 20px;
    width: 100%;
}

/* Versión Tablets (Pantallas intermedias: 2 columnas) */
@media (max-width: 1024px) {
    .grid-candidatos {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Versión Móvil (Pantallas pequeñas: 1 columna) */
@media (max-width: 600px) {
    .grid-candidatos {
        grid-template-columns: 1fr;
    }
}
.tarjeta-candidato {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid var(--color-dorado);
    
    /* Flexbox para alinear el botón al final */
    display: flex;
    flex-direction: column;
    height: 100%; 
}

.tarjeta-candidato img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem auto;
	border: 4px solid var(--color-dorado); /* Opcional: le añade el mismo borde dorado elegante */
    cursor: pointer;
}

/* Títulos y párrafos con min-height para reservar espacio si el texto es largo */
.tarjeta-candidato h3 { 
    color: var(--color-granate); 
    margin-bottom: 0.5rem; 
    min-height: 3.5rem; /* Reserva espacio para 2 líneas */
    display: block;
    align-items: center;
    justify-content: center;
}

.tarjeta-candidato p { 
    color: var(--texto-secundario); 
    margin-bottom: 1.5rem; 
    min-height: 2.5rem; /* Reserva espacio para el cargo */
	text-align: center;
}

/* El truco para alinear todos los botones abajo */
.tarjeta-candidato .bio-boton {
    margin-top: auto; 
    display: inline-block;
    background-color: var(--color-granate);
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.3s;
}

.tarjeta-candidato .bio-boton:hover {
    background-color: var(--color-granate-oscuro);
}

/* Estilo para los subtítulos dentro de la tarjeta (igual que en programa.html) */
.titulo-seccion-programa {
    font-family: var(--fuente-titulos);
    color: var(--color-granate);
    font-size: 1.4rem; /* Un poco más pequeño que el título principal */
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Asegurar que los párrafos dentro de tarjeta estén justificados */
.tarjeta p {
    text-align: justify;
    margin-bottom: 1.5rem;
}

/* Asegurar que los párrafos dentro de las tarjetas siempre estén justificados */
.tarjeta li {
    text-align: justify;
    margin-bottom: 1.5rem;
}

#btnVolverArriba {
    display: none; /* Oculto por defecto */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--color-granate);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
}

#btnVolverArriba:hover {
    background-color: var(--color-granate-oscuro);
}

@media (max-width: 600px) {
    #btnVolverArriba {
        bottom: 20px;  /* Un poco más separado de la base */
        right: 20px;   /* Un poco más separado del borde derecho */
        padding: 12px; /* Tamaño un poco más pequeño para no estorbar */
        font-size: 16px;
    }
}

/* Ocultar el botón hamburguesa en escritorio */
.menu-toggle { display: none; }

@media (max-width: 600px) {
	/* Mostramos el botón hamburguesa con texto */
    .menu-toggle {
        display: flex;               /* Alinea icono y texto en fila */
        align-items: center;         /* Centra verticalmente ambos elementos */
        gap: 8px;                    /* Espacio exacto entre el icono y la palabra */
        background: none;
        border: 2px solid var(--color-granate);
        color: var(--color-granate);
        font-family: var(--fuente-texto); /* Usa la fuente limpia de la web */
        font-size: 1.1rem;         
        font-weight: 700;            /* Negrita para que destaque */
        padding: 8px 15px;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 15px;
    }

	/* Efecto al pasar el ratón (opcional, pero profesional) */
	.menu-toggle:hover {
		background-color: var(--color-granate);
		color: white; /* Invierte los colores al tocarlo */
	}

    /* El menú pasa a ser una lista vertical */
    .menu-botones {
        display: none; /* Oculto por defecto en móvil */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px; /* Ajusta según la altura de tu barra */
        left: 0;
        z-index: 1000;
        background-color: var(--color-granate-oscuro);
    }

    /* Clase que añadimos con JS para mostrarlo */
    .menu-botones.abierto {
        display: flex;
		z-index: 9999; /* Asegura que se vea por encima de todo */
    }
    
    .btn-menu {
        text-align: center;
        border-bottom: 1px solid var(--color-granate);
    }
}

/*submenu programa*/

.submenu-programa {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 3rem;
    padding: 1rem;
    background-color: var(--fondo-tarjeta);
    border-radius: 8px;
    border: 1px solid var(--color-dorado);
}

.submenu-programa a {
    padding: 8px 15px;
    background-color: var(--color-granate);
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: background 0.3s;
}

.submenu-programa a:hover {
    background-color: var(--color-dorado);
}

/* Ajuste para móvil: que los botones sean un poco más grandes para poder pulsarlos bien */
@media (max-width: 600px) {
    .submenu-programa { gap: 5px; }
    .submenu-programa a { font-size: 0.8rem; padding: 6px 10px; }
}


/* --- Contenedor del Programa --- */
.programa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 20px;
    width: 100%;
}

/* Ajustes responsivos */
@media (max-width: 1024px) { .programa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .programa-grid { grid-template-columns: 1fr; } }

/* --- Tarjetas del Programa --- */
/* --- Tarjetas del Programa (clases independientes) --- */
#contenido-programa {
    /* Ajusta los px según la altura real de tu cabecera + menú */
    /* Si tu cabecera mide 100px, pon 110px para que tenga un pequeño respiro */
    scroll-margin-top: 150px; 
}

.programa-tarjeta {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid var(--color-dorado); /* Rayita dorada arriba */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Asegura que todas tengan la misma altura */
}

.programa-tarjeta:hover {
    transform: translateY(-5px);
}

.programa-tarjeta img {
    width: 150px;       /* Mismo ancho que los candidatos */
    height: 150px;      /* Misma altura para que sea cuadrado perfecto */
    border-radius: 50%; /* Esto hace que la foto sea un círculo perfecto */
    object-fit: cover;
    margin: 0 auto 1.5rem auto; /* Centra la imagen y le da espacio por debajo */
    border: 4px solid var(--color-dorado); /* Opcional: le añade el mismo borde dorado elegante */
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Efecto opcional para que la foto "lata" o se acerque al pasar el ratón */
.programa-tarjeta img:hover {
    transform: scale(1.05);
}

/* Ajuste específico para móviles */
@media (max-width: 600px) {
    .programa-tarjeta img {
        height: 150px; /* Reducimos la altura en el móvil */
    }
}

.programa-tarjeta h3 {
    color: var(--color-granate);
    font-family: var(--fuente-titulos);
    margin: 0.5rem 0 1.5rem 0; /* Espacio extra antes del botón */
}

/* Reutilizamos tu estilo de botón ya existente en estilos.css */
.programa-tarjeta .bio-boton {
    margin-top: auto; 
    display: inline-block;
    background-color: var(--color-granate);
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.3s;
    text-decoration: none;
    font-size: 0.9rem;
}

.programa-tarjeta .bio-boton:hover {
    background-color: var(--color-granate-oscuro);
}

/* =========================================
   CLASES PARA IMÁGENES FLOTANTES EN APARTADOS DE PROGRAMA
   ========================================= */
.foto-programa-izq {
    float: left;
    width: 35%;
    max-width: 300px;
    margin-right: 2rem;
    margin-bottom: 1.5rem;
    border: 3px solid var(--color-dorado);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.foto-programa-der {
    float: right;
    width: 35%;
    max-width: 300px;
    margin-left: 2rem;
    margin-bottom: 1.5rem;
    border: 3px solid var(--color-dorado);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Limpieza de flotados obligatoria para que el diseño no se rompa */
.limpiar-flotado {
    clear: both;
}

/* Ajuste automático para móviles (Pantallas inferiores a 768px) */
@media (max-width: 768px) {
    .foto-programa-izq, 
    .foto-programa-der {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto 2rem auto !important; /* Centrado horizontal en móvil */
    }
}

/* =========================================
   SUBLISTAS DEL PROGRAMA (Puntos anidados)
   ========================================= */
.lista-programa ul {
    list-style-type: none; /* Quitamos el círculo feo del navegador */
    margin-left: 1.5rem;
    margin-top: 1rem;
    color: var(--texto-secundario); /* Color de texto más suave */
}

.lista-programa ul li {
    position: relative;
    padding-left: 20px !important; /* Damos espacio para que no pise el texto */
    margin-bottom: 0.5rem;
}

/* Cambiamos el punto gordo por un círculo hueco elegante */
.lista-programa ul li::before {
    content: '○'; /* Círculo hueco */
    color: var(--color-dorado);
    font-size: 1rem; /* Un poco más pequeño que el principal */
    position: absolute;
    left: 0;
    top: 2px;
}