/* ==========================================================================
   Blog: listado de noticias y paginador
   Colores de marca: #ff3366 (rosa) / #213e54 (azul) / #212d3e (titulos)
   ========================================================================== */

.blog-listado {
    padding-bottom: 60px;
}

.blog-titulo {
    margin: 0 0 35px;
    font-size: 42px;
    font-weight: 400;
    color: #212d3e;
}

.blog-titulo span {
    color: #ff3366;
}

@media screen and (max-width: 600px) {
    .blog-titulo { font-size: 30px; margin-bottom: 25px; }
}

/* --- Grilla de tarjetas --------------------------------------------------- */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

@media screen and (max-width: 991px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
}

@media screen and (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; gap: 20px; }
}

.blog-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(33, 62, 84, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;

    /* Entrada escalonada: en /blog el wow.js del layout no carga, se resuelve con CSS */
    opacity: 0;
    animation: blogCardIn .5s ease forwards;
}

.blog-card:nth-child(1)  { animation-delay: .02s; }
.blog-card:nth-child(2)  { animation-delay: .06s; }
.blog-card:nth-child(3)  { animation-delay: .10s; }
.blog-card:nth-child(4)  { animation-delay: .14s; }
.blog-card:nth-child(5)  { animation-delay: .18s; }
.blog-card:nth-child(6)  { animation-delay: .22s; }
.blog-card:nth-child(7)  { animation-delay: .26s; }
.blog-card:nth-child(8)  { animation-delay: .30s; }
.blog-card:nth-child(9)  { animation-delay: .34s; }
.blog-card:nth-child(10) { animation-delay: .38s; }
.blog-card:nth-child(11) { animation-delay: .42s; }
.blog-card:nth-child(12) { animation-delay: .46s; }

@keyframes blogCardIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card { opacity: 1; animation: none; }
}

.blog-card:hover {
    transform: translateY(-6px);
    border-color: #ffccd8;
    box-shadow: 0 14px 30px rgba(33, 62, 84, .14);
}

/* --- Imagen de portada ---------------------------------------------------- */

.blog-card-img {
    display: block;
    position: relative;
    overflow: hidden;
    border-bottom: 5px solid #ff3366;
    background-color: #213e54;
}

/* Gana a la regla global .noticias img { height: 340px } */
.noticias .blog-card-img img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    transition: transform .45s ease;
}

.blog-card:hover .blog-card-img img {
    transform: scale(1.06);
}

/* Cuando la noticia no trae foto en el origen */
.blog-card-sinfoto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: linear-gradient(135deg, #213e54 0%, #2f5a79 100%);
    color: rgba(255, 255, 255, .35);
    font-size: 46px;
}

/* --- Cuerpo de la tarjeta ------------------------------------------------- */

.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}

.blog-card-fecha {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: #fff0f4;
    color: #ff3366;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.blog-card-titulo {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

.blog-card-titulo a {
    color: #212d3e;
    text-decoration: none;
    transition: color .2s ease;
}

.blog-card-titulo a:hover,
.blog-card-titulo a:focus {
    color: #ff3366;
    text-decoration: none;
}

.blog-card-breve {
    flex: 1 1 auto;
    margin: 0 0 16px;
    color: #64748b;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
}

.blog-card-link {
    align-self: flex-start;
    color: #ff3366;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.blog-card-link i {
    margin-left: 6px;
    transition: transform .2s ease;
    display: inline-block;
}

.blog-card-link:hover,
.blog-card-link:focus {
    color: #d81b4a;
    text-decoration: none;
}

.blog-card-link:hover i {
    transform: translateX(5px);
}

/* --- Paginador ------------------------------------------------------------ */

.paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 20px;
}

.paginador a,
.paginador span {
    text-decoration: none;
    user-select: none;
}

.paginador-num,
.paginador-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background-color: #fff;
    color: #213e54;
    font-size: 14px;
    font-weight: 600;
    transition: all .2s ease;
}

.paginador-num:hover,
.paginador-flecha:hover {
    border-color: #ff3366;
    color: #ff3366;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(255, 51, 102, .18);
}

.paginador-num.activo {
    border-color: #ff3366;
    background-color: #ff3366;
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 51, 102, .32);
    cursor: default;
}

.paginador-num.activo:hover {
    transform: none;
    color: #fff;
}

.paginador-flecha.disabled {
    opacity: .4;
    cursor: not-allowed;
}

.paginador-flecha.disabled:hover {
    border-color: #e2e8f0;
    color: #213e54;
    transform: none;
    box-shadow: none;
}

.paginador-puntos {
    padding: 0 4px;
    color: #94a3b8;
    font-weight: 600;
}

.paginador-numeros {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* El contador reemplaza a los números en pantallas chicas */
.paginador-contador {
    display: none;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

@media screen and (max-width: 600px) {
    .paginador-numeros { display: none; }
    .paginador-contador { display: inline-flex; }
    .paginador-flecha-txt { display: none; }
    .paginador-flecha { min-width: 44px; padding: 0; }
}