/* 
 * CONTENT-SECTIONS.CSS - Estilos para secciones de contenido común
 * Contiene:
 * - Estilos para secciones "Quiénes Somos"
 * - Cards MVV (Misión, Visión, Valores)
 * - Estilos generales de títulos y párrafos
 * - Responsive para todas las pantallas
 */

/* Estilos para secciones de contenido */
#quienes, #mvv, #servicios, #contacto {
    scroll-margin-top: 80px; /* Compensa el menú fijo */
}

/* Cards MVV */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.card {
    background: var(--blanco);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card h3 {
    /*color: var(--color-secundario);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);*/
    color: var(--color-primario);
    margin-top: 0;
}

/* Modificaciones para las cards en móviles/tablets */
@media (max-width: 992px) {
    .cards {
        grid-template-columns: 1fr;
    }
    
    /* Ocultar estas tarjetas y mostrar solo Misión, Visión y Valores */
    .card:nth-child(3),
    .card:nth-child(4),
    .card:nth-child(5) {
        display: none;
    }
    
    /* Reordenar */
    .card:nth-child(1) { order: 1; }
    .card:nth-child(2) { order: 2; }
    .card:nth-child(6) { order: 3; }
}

@media (max-width: 576px) {
    .card {
        padding: 20px;
    }
    
    .card h3 {
        font-size: 1.3rem;
    }
}