/* ==========================================================================
   SECCIÓN BLOG
   ========================================================================== */

.blog-listado {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-top: 30px;
}

/* En pantallas móviles se apila verticalmente */
@media (max-width: 768px) {
    .blog-listado {
        flex-direction: column;
    }
}

.contenido-principal {
    flex: 3;
}

.sidebar-area {
    flex: 1;
}

/* Tarjeta del Post - Bloque Neobrutalista Puro */
.post-item {
    background: #ffffff;
    border: 4px solid #000000; /* Borde negro ultra grueso */
    box-shadow: 8px 8px 0px #000000; /* Sombras duras sin difuminar */
    margin-bottom: 40px;
    padding: 0; /* Quitamos el padding-left para controlar los contenedores */
    position: relative;
    transition: transform 0.1s ease, box-shadow 0.1s ease; /* Transiciones rápidas, casi mecánicas */
}

/* Efecto de hundimiento al pasar el mouse (Click effect simulado) */
.post-item:hover {
    transform: translate(3px, 3px);
    box-shadow: 5px 5px 0px #000000;
}

/* Imagen destacada con separación tajante */
.post-imagen {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 4px solid #000000; /* Separación dura */
}

.post-contenido {
    padding: 24px;
}

/* Etiqueta tipo Badge Neobrutalista */
.post-categoria {
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    color: #000000;
    background-color: #a3e635; /* Verde neón llamativo (puedes usar var(--primary)) */
    border: 2px solid #000000;
    padding: 4px 8px;
    font-weight: 900;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.post-titulo {
    font-size: 26px;
    font-weight: 900; /* Tipografía pesada */
    text-transform: uppercase; /* Opcional, le da mucha fuerza */
    margin-bottom: 8px;
    line-height: 1.2;
}

.post-titulo a {
    color: #000000;
    text-decoration: none;
}

.post-titulo a:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px; /* Subrayado grueso al pasar el mouse */
}

.post-fecha {
    font-size: 13px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 15px;
    text-transform: uppercase;
    opacity: 0.7;
}

.post-extracto {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #000000;
    font-weight: 500;
}

/* Botón "Leer Más" con comportamiento de botón físico */
.btn-leer-mas {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f7d200; /* Amarillo brillante de alto contraste */
    color: #000000;
    text-decoration: none;
    border: 3px solid #000000;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 14px;
    box-shadow: 4px 4px 0px #000000;
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.btn-leer-mas:hover {
    background-color: #f7d200; /* Mantiene el color base */
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000000;
}

/* Componente de Paginación */
.paginacion {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
}

.pagina {
    display: inline-block;
    margin: 0 6px;
    padding: 10px 16px;
    background: #ffffff;
    border: 3px solid #000000;
    border-radius: 0px; /* Cero curvas */
    text-decoration: none;
    color: #000000;
    font-weight: 900;
    box-shadow: 3px 3px 0px #000000;
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.pagina:hover {
    background: #e0e7ff; /* Color de acento ligero al flotar */
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px #000000;
}

.pagina.activa {
    background-color: #000000; /* Se invierte el color por completo */
    color: #ffffff;
    box-shadow: none;
    pointer-events: none;
    transform: none;
}


/* ==========================================================================
   ESTILOS ADICIONALES PARA EL DETALLE DEL POST Y LEGAL (CKEDITOR COMPATIBILITY)
   ========================================================================== */
.blog-content {
    background: #ffffff;
    border: 4px solid #000000;
    box-shadow: 8px 8px 0px #000000;
    padding: 30px;
    color: #000000;
    
    /* ⚡ HEREDAR TIPOGRAFÍA GLOBAL ⚡ */
    font-family: inherit; 
}

/* Forzar a todos los elementos internos a usar la misma letra, color y peso neobrutalista */
.blog-content-body,
.blog-content-body p,
.blog-content-body li,
.blog-content-body ul {
    font-family: inherit; /* Hereda la fuente de global.css (Arial, Inter, etc.) */
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    font-weight: 500;
}

/* Encabezados internos creados por CKEditor o las páginas legales */
.blog-content h2, 
.blog-content h3 {
    font-family: inherit;
    font-weight: 900; /* Letra ultra gruesa */
    color: #000000;
    text-transform: uppercase;
    margin-top: 35px;
    margin-bottom: 15px;
    border-bottom: 4px solid #000000; /* Línea de separación dura */
    padding-bottom: 5px;
    letter-spacing: -0.5px;
}

/* Estilo para las listas (Privacidad y Términos) */
.blog-content-body ul {
    margin-bottom: 20px;
    padding-left: 25px;
}

.blog-content-body li {
    margin-bottom: 10px;
    list-style-type: square; /* Viñetas cuadradas, más toscas y afines al estilo */
}

/* Bloques de citas / Tips destacados de apuestas */
.blog-content blockquote {
    font-family: inherit;
    margin: 20px 0;
    padding: 20px;
    background-color: #a3e635; /* Verde Neón */
    border: 3px solid #000000;
    box-shadow: 5px 5px 0px #000000;
    font-weight: 700;
}

/* Enlaces dentro del texto del artículo o páginas legales */
.blog-content a {
    color: #000000;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 3px; /* Subrayado grueso */
}