/* --- Estilos para las Tarjetas de Centros (Profesional y Uniforme) --- */

/* Contenedor principal de la tarjeta */
.center-card {
    background-color: #ffffff;
    /* Fondo blanco */
    border-radius: 0.75rem;
    /* Bordes ligeramente redondeados */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* Sombra elegante */
    display: flex;
    /* Usar flexbox para organizar contenido */
    flex-direction: column;
    /* Contenido en columna */
    overflow: hidden;
    /* Asegura que nada se salga del borde */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Transición suave al pasar el ratón */
    height: 100%;
    /* Asegura que todas las tarjetas tengan la misma altura si están en una cuadrícula */
}

.center-card:hover {
    transform: translateY(-5px);
    /* Pequeño levantamiento al pasar el ratón */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    /* Sombra más pronunciada */
}

/* Contenedor del logo para asegurar un tamaño fijo y centrado */
.logo-container {
    height: 120px;
    /* Altura fija para todos los contenedores de logo */
    display: flex;
    /* Usar flexbox para centrar la imagen */
    justify-content: center;
    /* Centrar horizontalmente */
    align-items: center;
    /* Centrar verticalmente */
    padding: 1.5rem;
    /* Espaciado interno */
    border-bottom: 1px solid #f0f0f0;
    /* Separador sutil */
    background-color: #f9f9f9;
    /* Fondo ligeramente gris para el área del logo */
}

/* Estilos de la imagen del logo dentro de su contenedor */
.logo-container img {
    max-height: 100%;
    /* La imagen no excederá la altura del contenedor */
    max-width: 100%;
    /* La imagen no excederá el ancho del contenedor */
    object-fit: contain;
    /* Ajusta la imagen sin recortarla, manteniendo su proporción */
    filter: grayscale(10%);
    /* Ligero efecto de escala de grises para uniformar, opcional */
    opacity: 0.9;
    /* Ligera transparencia, opcional */
}

/* Contenido de texto y botón */
.center-card .p-6 {
    padding: 1.5rem;
    /* Asegura un padding consistente */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Permite que este div ocupe el espacio restante */
}

.center-card h3 {
    font-size: 1.5rem;
    /* Tamaño de título más prominente */
    font-weight: 700;
    /* Negrita */
    color: #1a202c;
    /* Color de texto oscuro para contraste */
    margin-bottom: 0.75rem;
    /* Espacio debajo del título */
    text-align: center;
    /* Centrar el título */
}

.center-card p {
    font-size: 1rem;
    color: #4a5568;
    /* Color de texto gris medio */
    line-height: 1.6;
    /* Mejor legibilidad */
    flex-grow: 1;
    /* Permite que la descripción ocupe el espacio restante */
    margin-bottom: 1.5rem;
    /* Espacio antes del botón */
    text-align: center;
    /* Centrar el texto de la descripción */
}

.center-card .mt-6 {
    margin-top: auto;
    /* Empuja el botón al final de la tarjeta */
    text-align: center;
    /* Centrar el botón */
}

.center-card a.inline-block {
    background-color: #0056b3;
    /* Un azul profesional (ajusta a tu primary) */
    color: #ffffff;
    padding: 0.75rem 1.75rem;
    /* Padding generoso */
    border-radius: 9999px;
    /* Botón completamente redondeado */
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra sutil en el botón */
}

.center-card a.inline-block:hover {
    background-color: #004494;
    /* Azul más oscuro al pasar el ratón */
    transform: translateY(-2px);
    /* Pequeño levantamiento del botón */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Ajustes para la cuadrícula para asegurar que las tarjetas se alineen bien */
.grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* 1 columna por defecto */
    gap: 2rem;
    /* Espacio entre tarjetas */
}

@media (min-width: 640px) {

    /* sm breakpoint */
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 2 columnas en pantallas pequeñas */
    }
}

@media (min-width: 1024px) {

    /* lg breakpoint */
    .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* 3 columnas en pantallas grandes */
    }
}