:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --light-gray: #f4f7f6;
    --text-color: #333;
}
html { scroll-behavior: smooth; }
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    line-height: 1.7;
    color: var(--text-color);
    overflow-x: hidden; /* IMPORTANTE: Evita el scroll horizontal en mobile */
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.content-section { padding: 80px 0; }
.bg-light { background-color: var(--light-gray); }
h1, h2, h3 { color: var(--primary-color); font-weight: 700; }
h2 { font-size: 2.5rem; text-align: center; margin-bottom: 3rem; }
.subsection-title { font-size: 2rem; text-align: center; margin-top: 4rem; margin-bottom: 2rem; }
p { margin-bottom: 1rem; }

/* Header y Navegación Centrados */
.main-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 1rem 0; text-align: center; }
.header-title { font-size: 1.8rem; margin: 0 0 0.5rem 0; color: var(--primary-color); }
.nav-menu { list-style: none; margin: 0; padding: 0; display: inline-flex; justify-content: center; gap: 1.5rem; }
.nav-menu a { text-decoration: none; color: var(--primary-color); font-weight: 600; font-size: 0.9rem; position: relative; padding-bottom: 5px; }
.nav-menu a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--secondary-color); transition: width 0.3s ease; }
.nav-menu a:hover::after { width: 100%; }

/* Hero Section */
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; color: white; position: relative; background-size: cover; background-position: center; background-attachment: fixed; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.hero-content { z-index: 1; }
.hero-title { font-size: 4.5rem; font-weight: 700; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); color: white; }

/* Secciones */
.pillars { list-style: none; padding: 0; margin-top: 2rem; }
.pillars li { background: white; padding: 1rem; margin-bottom: 1rem; border-left: 5px solid var(--secondary-color); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.emphasis { font-weight: 600; color: var(--primary-color); text-align: center; font-size: 1.2rem; margin-top: 2rem; }

/* Estilos del Equipo (3 Columnas) */
.team-grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.team-member { background: var(--light-gray); padding: 1.5rem; border-radius: 8px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.team-member h3 { margin: 0 0 0.5rem 0; font-size: 1.2rem; color: var(--primary-color); }
.team-member p { margin: 0; color: #555; font-size: 0.9rem; line-height: 1.5; }

/* Tarjetas de Propuestas - Grid 2x2 */
.proposals-grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.proposal-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; }
.proposal-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.12); }
.proposal-icon { font-size: 2.5rem; color: var(--secondary-color); margin-bottom: 1rem; }
.proposal-card h3 { color: var(--secondary-color); margin-top: 0; }
.proposal-card ul { list-style-type: '✓ '; padding-left: 1.2rem; }

/* Timeline de Plan de Acción */
.timeline { position: relative; max-width: 800px; margin: 0 auto; }
/* La regla .timeline::after ha sido eliminada para ocultar la línea vertical */
.timeline-item { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; box-sizing: border-box; }
.timeline-item:nth-child(odd) { left: 0; }
.timeline-item:nth-child(even) { left: 50%; }
.timeline-item .timeline-dot { content: ''; position: absolute; width: 16px; height: 16px; right: -8px; background-color: white; border: 4px solid var(--secondary-color); top: 25px; border-radius: 50%; z-index: 1; }
.timeline-item:nth-child(even) .timeline-dot { left: -8px; }
.timeline-date { font-weight: 700; color: var(--primary-color); margin-bottom: 10px; }
.timeline-content { padding: 20px 30px; background-color: white; position: relative; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); }
.timeline-content ul { padding-left: 1.2rem; }

/* Formulario */
.suggestion-form { max-width: 700px; margin: 2rem auto 0; }
.form-row { display: flex; gap: 1rem; }
.suggestion-form input, .suggestion-form textarea { width: 100%; padding: 1rem; margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 4px; font-family: 'Poppins', sans-serif; box-sizing: border-box; }
.suggestion-form button { width: 100%; padding: 1rem; background-color: var(--secondary-color); color: white; border: none; border-radius: 4px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s; }
.suggestion-form button:hover { background-color: #2980b9; }
.form-success { text-align: center; background-color: #d4edda; color: #155724; padding: 1rem; border: 1px solid #c3e6cb; border-radius: 4px; }

/* Footer */
.main-footer { background: var(--primary-color); color: white; text-align: center; padding: 2rem 0; }

/* Responsive */
@media screen and (max-width: 992px) {
    .team-grid-3col { grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */ }
    .proposals-grid-2x2 { grid-template-columns: 1fr; /* 1 columna en tablet */ }
}

@media screen and (max-width: 768px) {
    .header-title { font-size: 1.5rem; }
    .nav-menu { gap: 0.5rem; flex-wrap: wrap; }
    .nav-menu li { margin-left: 0; }
    .nav-menu a { font-size: 0.8rem; }
    
    .hero {
        background-attachment: scroll; /* ===== CORRECCIÓN PARA IMAGEN EN MOBILE AQUÍ ===== */
    }
    .hero-title {
        font-size: 2.5rem;
    }
    
    .team-grid-3col { grid-template-columns: 1fr; /* 1 columna en mobile */ }
    
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    .timeline-item:nth-child(even) {
        left: 0%;
    }
    .timeline-item .timeline-dot, .timeline-item:nth-child(even) .timeline-dot {
        left: 22px;
    }
}