/* ==========================================================
   ESTRUCTURA DE TARJETAS DE PERFIL (profile.css)
   ========================================================== */


/* Contenedor principal que organiza las columnas en escritorio */
.main-content-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas iguales */
    gap: 30px;
    max-width: 1200px;
    margin: 100px auto 30px auto; /* <-- CAMBIAMOS AQUÍ: El primer valor (100px) empuja todo hacia abajo */
    padding: 0 20px;
}
/* Estilo base de cada tarjeta (cuadradas, limpias y elegantes) */
.card-section {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e1e8ed;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card-section:hover {
        box-shadow: 0 6px 25px rgba(0, 102, 204, 0.1);
    }

/* Contenedor interno con scroll opcional si el contenido es largo */
.datos-scroll {
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ==========================================================
   DISEÑO RESPONSIVE PARA MÓVILES
   ========================================================== */
@media (max-width: 768px) {
    .main-content-container {
        grid-template-columns: 1fr; /* Una sola columna en teléfonos */
        gap: 20px;
        margin: 90px auto 15px auto; /* <-- AQUÍ TAMBIÉN: Margen superior para móviles */
        padding: 0 15px;
    }

    .datos-scroll {
        padding: 20px;
    }
}