:root {
    /* Ajusta estos valores según los colores oficiales de tu logo */
    --color-primario: #6C0308;   /* El guinda oscuro */
    --color-secundario: #D4AF37; /* Dorado institucional */
    --fondo-pagina: #f8f9fa;
    --texto: #333;
}
/* Base */
body { font-family: 'Inter', sans-serif; background: var(--fondo); margin: 0; padding: 0; }

/* Contenedor principal responsive */
.container {
    display: flex;
    flex-wrap: wrap; /* Esto permite que los elementos salten de línea */
    justify-content: center;
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tarjetas */
.card {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
    width: 100%; /* Por defecto, en móviles ocupan todo el ancho */
    max-width: 350px;
}

/* --- RESPONSIVE DESIGN --- */

/* Para pantallas medianas (tablets) */
@media (min-width: 600px) {
    .card {
        width: 45%; /* Dos columnas en tablets */
    }
}

/* Para pantallas grandes (escritorio) */
@media (min-width: 1024px) {
    .card {
        width: 30%; /* Tres columnas en escritorio */
    }
}

/* Esto asegura que sea automático y profesional */
@media (min-width: 768px) {
    .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    .card {
        width: 300px; /* Tamaño fijo para que se vean uniformes en escritorio */
    }
}

/* Títulos con color institucional */
h1, h3 {
    color: var(--color-primario);
}

/* Botones institucionales */
.btn {
    background-color: var(--color-secundario);
    color: var(--color-primario); /* Guinda sobre dorado se ve muy elegante */
    font-weight: bold;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.btn:hover {
    background-color: var(--color-primario);
    color: white;
}

/* Tarjetas con un toque institucional */
.card {
    border-top: 5px solid var(--color-primario); /* Línea superior decorativa */
}

header {
    background-color: var(--color-primario);
    color: white;
    padding: 40px 20px;
    text-align: center;
}

header h1 {
    color: white; /* Blanco para que contraste con el fondo guinda */
    margin: 0;
}