/* Variables para colores (inspirados en Tabasco) */
:root {
    --color-primario: #004d40; /* Verde oscuro (Selva) */
    --color-secundario: #ffab40; /* Naranja/Cálido (Cacao/Tierra) */
    --color-fondo: #f5f5f5; /* Gris claro */
    --color-texto: #333;
}

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

body {
    font-family: sans-serif;
    line-height: 1.6;
    color: var(--color-texto);
    background-color: var(--color-fondo);
}

/* -------------------- HEADER Y NAVEGACIÓN -------------------- */
header {
    background-color: var(--color-primario);
    color: white;
    padding: 1em 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; /* Menú Fijo */
    top: 0;
    z-index: 1000;
}

header h1 {
    font-size: 1.5em;
    font-weight: bold;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 0.5em 1em;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #00695c; /* Tono más claro al pasar el mouse */
    border-radius: 5px;
}

/* -------------------- SECCIÓN INICIO (HERO) -------------------- */
.hero {
    background: url('tabasco.png') no-repeat center center/cover; /* Reemplaza con una imagen de Tabasco */
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
    padding: 2em;
}

.hero::before { /* Sombra/Overlay para mejorar la legibilidad del texto */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); 
}

.hero-content {
    position: relative;
    z-index: 10;
}

.hero h2 {
    font-size: 3em;
    margin-bottom: 0.5em;
}

.btn {
    display: inline-block;
    background-color: var(--color-secundario);
    color: var(--color-primario);
    padding: 0.8em 1.5em;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 1em;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #ffc400;
}

/* -------------------- SECCIONES DE CONTENIDO -------------------- */
.content-section {
    padding: 4em 5%;
    text-align: center;
}

.content-section h2 {
    font-size: 2.5em;
    margin-bottom: 0.3em;
    color: var(--color-primario);
}

.subtitle {
    margin-bottom: 2em;
    font-style: italic;
    color: #666;
}

hr {
    border: none;
    border-top: 1px solid #ccc;
    width: 80%;
    margin: 0 auto;
}

/* Estilos de Tarjetas (Cards) */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 2em;
}

.card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5em;
    width: 300px; /* Ancho fijo para las tarjetas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    text-align: left;
}

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

.card h3 {
    color: var(--color-primario);
    margin-bottom: 0.5em;
}

.pdf-link {
    display: block;
    margin-top: 1em;
    color: var(--color-secundario);
    text-decoration: none;
    font-weight: bold;
    border: 1px solid var(--color-secundario);
    padding: 0.5em;
    border-radius: 4px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

.pdf-link:hover {
    background-color: var(--color-secundario);
    color: white;
}

/* -------------------- FOOTER ACTUALIZADO -------------------- */
footer {
    background-color: var(--color-texto); /* Color gris oscuro */
    color: white;
    padding: 2em 5%; /* Aumentamos el padding para más espacio */
    font-size: 0.9em;
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Distribuye los elementos a los lados */
    align-items: center; /* Centra verticalmente los elementos */
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas pequeñas */
}

.footer-left {
    text-align: left;
    margin-bottom: 1em; /* Espacio para móvil */
}

.footer-left p {
    margin-bottom: 0.5em;
}

.footer-link-institucional {
    color: var(--color-secundario); /* Destacamos el link institucional */
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link-institucional:hover {
    color: white;
}

.footer-center {
    display: flex; /* Para centrar el logo si es necesario */
    justify-content: center;
    align-items: center;
    margin-bottom: 1em; /* Espacio para móvil */
}

.footer-logo {
    max-height: 160px; /* Ajusta el tamaño máximo de los logos */
    width: auto;
    margin: 0 10px; /* Espacio entre logos si hubiera varios en un bloque */
}

.cobatab-logo {
    /* Si el logo de cobatab es largo, ajusta su ancho */
    max-width: 580px; 
}

.plantel-logo {
    /* Logo del plantel 02 es más cuadrado */
    max-width: 180px; 
    border-radius: 8px; /* Si es cuadrado, le damos un poco de redondeo */
}

.social-links {
    text-align: right;
    display: flex;
    flex-direction: column; /* Apila los enlaces */
    align-items: flex-end; /* Alinea los elementos a la derecha */
    gap: 8px; /* Espacio entre los enlaces */
}

.social-links h4 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.1em;
    color: var(--color-secundario); /* Destacamos el título de redes */
}

.social-icon {
    color: white; /* Color del SVG de Facebook */
    text-decoration: none;
    transition: color 0.3s;
    display: flex; /* Para alinear el SVG y el texto si lo hubiera */
    align-items: center;
}

.social-icon:hover {
    color: var(--color-secundario); /* Cambia de color al pasar el mouse */
}

/* Media Query para móvil: apilar el contenido del footer */
@media (max-width: 768px) { /* Ajustamos el breakpoint para que se apile antes */
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-left, .footer-center, .social-links {
        margin-bottom: 1.5em; /* Espacio entre bloques */
        text-align: center;
        align-items: center;
    }
    .social-links {
        order: 3; /* Asegura que los social links vayan al final en móvil */
    }
    .footer-center {
        order: 2; /* El logo de COBATAB en el medio */
    }
    .footer-left {
        order: 1; /* El copyright primero */
    }
}