/*═══════════════════════════════════════════════════════════════
    Diseminado Comunicación - Dpto. Desarrollo Web
    https://dscomunicacion.es

    Copyright (c) 2026 David Carlos Soler Domínguez.

    dlys v6.0 by Estudio LTV
    ─────────────────────────────────────────────────────────────
    Estilos del Blog -> ../css/componentes/blog.css    
═══════════════════════════════════════════════════════════════*/

.paginacion-blog { text-align: center; margin: var(--espacio-8) 0; font-size: var(--texto-lg); font-weight: 600;} .paginacion-blog > span > .pagina-actual { color: rgb(var(--color-negro)); margin: 0 var(--espacio-2); } .paginacion-blog > a > .enlace-pagina-actual { color: rgb(var(--color-medio)); text-decoration: none; margin: 0 var(--espacio-2); transition: color 0.3s; } .paginacion-blog > span > .pie-pagina-actual {color: rgb(var(--color-oscuro)); }

.main-blog {
    margin-bottom: 0;
    padding-top: var(--espacio-5); 
    padding-bottom: var(--espacio-12); 
    min-height: 80vh;
}

.sobretitulo-blog {
    text-align: center;
    font-size: var(--texto-base); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 700; 
    color: rgb(var(--color-medio));    
}

.titulo-blog {
    text-align: center; 
    margin-bottom: var(--espacio-3); 
    font-size: var(--texto-4xl); 
    font-weight: 800;
}

.subtitulo-blog {
    text-align: center; 
    color: rgb(var(--color-medio)); 
    margin-bottom: var(--espacio-10);
}

.grid-blog {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(1fr)); 
    gap: 30px;
}

.tarjeta-post {
    background: rgb(var(--color-blanco)); 
    border-radius: var(--radio-md); 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    transition: transform var(--trans-base);
}

.tarjeta-post a { display: block; }

.img-articulo {
    width: 100%; 
    height: 220px; 
    object-fit: cover;
}

.contenido-articulo {
    padding: var(--espacio-6); 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}

.contenido-articulo > .categoria-articulo, .contenido-articulo > .categoria-articulo a {
    font-size: var(--texto-base); 
    text-transform: uppercase; 
    font-weight: 700; 
    color: rgb(var(--color-medioscuro)); 
    margin-bottom: var(--espacio-3);
    text-decoration: none;
}

.contenido-articulo .datos-articulo {
    font-size: var(--texto-sm); 
    color: rgb(var(--color-medio)); 
    margin-bottom: var(--espacio-3);
}

.contenido-articulo h2 {
    font-size: var(--texto-xl); 
    font-weight: 700; 
    margin-bottom: var(--espacio-4); 
    line-height: 1.3;
}

.contenido-articulo h2 > a {
    color: rgb(var(--color-negro)); 
    text-decoration: none;
}

.contenido-articulo p {
    color: rgb(var(--color-medio)); 
    font-size: var(--texto-md); 
    line-height: 1.6; 
    margin-bottom: var(--espacio-5); 
    flex-grow: 1;
}

.contenido-articulo > a {
    font-weight: 700; 
    color: rgb(var(--color-negro)); 
    text-decoration: underline; 
    text-underline-offset: var(--espacio-1);
}

.contenido-articulo .autor-articulo {
    display: flex; 
    align-items: center; 
    gap: var(--espacio-2); 
    padding-top: var(--espacio-4); 
    border-top: 2px solid rgb(var(--color-borde));
}

.contenido-articulo .autor-articulo > a {display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;}

.contenido-articulo .autor-articulo .imagen-autor {
    width: 32px; 
    height: 32px; 
    border-radius: var(--radio-full); 
    object-fit: cover;
}

.titulo-autor {display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 15px;}

.img-autor { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }

.contenido-articulo .autor-articulo .nombre-autor {
    font-size: var(--texto-base); 
    font-weight: 600; 
    color: rgb(var(--color-medioscuro));
}

.sin-datos {
    grid-column: 1 / -1; 
    text-align: center; 
    padding: var(--espacio-12);
}

.sin-datos > p {
    font-size: var(--texto-lg); 
    color: rgb(var(--color-medio));
}

.volver-blog {
    display: inline-block; 
    margin-top: var(--espacio-4); 
    background: rgb(var(--color-secundario)); 
    color: rgb(var(--color-blanco)); 
    padding: var(--espacio-3) var(--espacio-5); 
    border-radius: var(--radio-md); 
    text-decoration: none; 
    font-weight: 600;
}

@media (max-width: 768px) { .main-blog > .migas-pan { font-size: var(--texto-xs); } }