/* =========================================
   CONTENEDOR TÍTULO + BOTÓN
   ========================================= */
.text-title-buton {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* =========================================
   TARJETA BASE (.card-w-shadow)
   ========================================= */
.card-w-shadow {
    width: 100%;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    /* Fallback para margin-inline en navegadores antiguos */
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Contiene bordes redondeados y contenido desbordado */
    box-sizing: border-box; /* Evita que padding/border afecten el ancho */
}

.card-w-shadow-two {
    max-width: 400px;
}

/* Efecto hover solo en dispositivos con puntero (evita "hover pegajoso" en táctiles) */
@media (hover: hover) {
    .card-w-shadow:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
    }
}

/* Accesibilidad: Foco visible para navegación por teclado */
.card-w-shadow:focus-within,
.card-w-shadow a:focus-visible,
.card-w-shadow button:focus-visible {
    outline: 2px solid #0e2340;
    outline-offset: 2px;
    z-index: 1; /* Asegura que el outline no sea cubierto por sombras */
}

/* =========================================
   IMAGEN DE TARJETA
   ========================================= */
.card-img-top {
    width: 100%;
    /* aspect-ratio: 4 / 3; */
    object-fit: cover;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    /* Compatibilidad: elimina espacio fantasma inferior típico de imágenes inline */
    display: block;
}

/* =========================================
   CUERPO DE TARJETA
   ========================================= */
.card-body {
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
}

/* =========================================
   TÍTULO CON TRUNCAMIENTO (2 LÍNEAS)
   ========================================= */
.p-title-card {
    margin: 0;
    text-align: center;
    color: #0e2340;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 1.15rem;
    /* Truncamiento compatible con Chrome, Safari, Firefox y Edge */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2; /* Propiedad estándar moderna */
    overflow: hidden;
    text-overflow: ellipsis; /* Fallback para navegadores sin line-clamp */
    word-wrap: break-word;
}

/* =========================================
   ALINEACIÓN EN GRID (Desktop ≥992px)
   ========================================= */
/* Lógica para centrar tarjetas sobrantes en la última fila de un grid de 3 columnas */
@media (min-width: 992px) {
    /* Columna 1 de 3 */
    .row > div.col-lg-4:nth-child(3n + 1) .card-w-shadow {
        margin-left: 0;
        margin-right: auto;
    }

    /* Columna 2 de 3 */
    .row > div.col-lg-4:nth-child(3n + 2) .card-w-shadow {
        margin-left: auto;
        margin-right: auto;
    }

    /* Columna 3 de 3 */
    .row > div.col-lg-4:nth-child(3n + 3) .card-w-shadow {
        margin-left: auto;
        margin-right: 0;
    }

    /* Casos especiales: última fila con 1 o 2 elementos */
    .row > div.col-lg-4:last-child:nth-child(3n + 1) .card-w-shadow,
    .row > div.col-lg-4:nth-last-child(2):nth-child(3n + 1) .card-w-shadow,
    .row > div.col-lg-4:last-child:nth-child(3n + 2) .card-w-shadow {
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 992px) {
   /* .text-title-buton {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }*/
    .text-title-buton {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .card-w-shadow {
        max-width: 95%;
        margin-inline: auto;
    }

    .p-title-card {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .card-w-shadow {
        max-width: 90%;
    }
}

/* =========================================
   ACCESIBILIDAD: PREFERENCIAS DE USUARIO
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .card-w-shadow {
        transition: none !important;
    }

    @media (hover: hover) {
        .card-w-shadow:hover {
            transform: none !important;
        }
    }
}