/* --- ESTILOS GENERALES PARA LA PÁGINA DEL BLOG (body.blog) --- */

/* Mantenemos tu fondo original con el efecto 'fixed' y el color de texto */
body.blog {
    background-image: url('https://myhabla.com/wp-content/uploads/2026/03/takata.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Arial, sans-serif; /* O la tipografía de tu tema */
    color: #333;
}

/* Ajuste del padding superior para que el contenido no quede debajo del menú fixed */
body.blog .site-content {
    padding-top: 100px; /* Ajusta según la altura real de tu menú */
    padding-bottom: 50px;
}

/* Contenedor principal para centrar la cuadrícula y el banner */
body.blog #primary {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- NUEVO: ESTILOS PARA EL BANNER DE CABECERA (LA IMAGEN bibliotechr-bot.png) --- */

/* Contenedor principal del banner con la imagen de fondo de bibliotechr-bot.png */
body.blog .blog-header-banner {
    /* IMPORTANTE: En tu WP, reemplaza la siguiente URL por la URL real de 'bibliotechr-bot.png' */
    background-image: url('https://myhabla.com/wp-content/uploads/2026/03/blog2.png');
    background-size: cover; /* Ajusta la imagen para cubrir el espacio */
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 20px; /* Bordes redondeados según el diseño */
    margin-bottom: 50px; /* Espacio antes de la cuadrícula de posts */
    width: 100%;
    /* Mínima altura para asegurar que se vea bien en desktop */
    min-height: 400px; 
    position: relative;
    overflow: hidden;
    /* Efecto de sombra para dar relieve, similar a los bloques */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Capa de texto sobre el banner, alineada a la derecha */
body.blog .blog-header-content {
    position: absolute;
    right: 5%; /* Separación del borde derecho */
    top: 50%; /* Centrado vertical */
    transform: translateY(-50%); /* Ajuste de centrado */
    max-width: 40%; /* Ancho del bloque de texto */
    color: #000; /* Texto negro según el diseño */
    text-align: right;
    padding: 20px;
    z-index: 2;
}

/* Título del banner: "Hacks, IA y mucha paz mental." */
body.blog .blog-header-title {
    font-size: 32px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Texto del banner: "Bienvenido al rincón..." */
body.blog .blog-header-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Flecha de enlace "Saber más" */
body.blog .blog-header-arrow {
    display: inline-block;
    font-size: 30px;
    color: #000;
    text-decoration: none;
    transition: transform 0.3s ease;
}

/* Efecto hover en la flecha */
body.blog .blog-header-arrow:hover {
    transform: translateX(5px);
}

/* --- ESTILOS PARA EL TÍTULO DE LA SECCIÓN "BLOGS RECIENTES" --- */

/* Título de la sección de posts, ajustado */
body.blog .page-title {
    font-size: 28px;
    font-weight: bold;
    color: #000;
    margin-top: 30px; /* Espacio después del banner */
    margin-bottom: 40px;
    text-align: left;
}

/* --- ESTILOS PARA LA CUADRÍCULA DE POSTS (Grid) --- */

/* Contenedor que envuelve todos los artículos */
body.blog #main {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 30px; /* Espacio entre los bloques */
    list-style: none;
    padding: 0;
}

/* Estilos para cada bloque individual de post (el "artículo") */
body.blog #main article {
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #e0e0e0; /* Borde gris suave */
    border-radius: 20px; /* Bordes muy redondeados según el diseño */
    padding: 25px;
    display: flex;
    flex-direction: column; /* Organiza los elementos en vertical */
    box-sizing: border-box;
    overflow: hidden; /* Asegura que nada se salga del borde redondeado */
    
    /* Efecto de transición suave para el hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    
    /* Cursor de puntero para indicar que es clickeable */
    cursor: pointer;
}

/* --- EL EFECTO DE RESALTADO (HOVER) --- */

/* Cuando el ratón pasa por encima del bloque entero... */
body.blog #main article:hover {
    /* Efecto de sombra para dar relieve */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); 
    /* El bloque se eleva ligeramente */
    transform: translateY(-5px); 
    /* El borde se vuelve azul (mismo azul que los botones/robot) */
    border-color: #3b82f6; 
}

/* --- ESTILOS PARA EL CONTENIDO DENTRO DEL BLOQUE (SIN IMÁGENES) --- */

/* Título del post: "5 Mitos de la IA" */
body.blog #main article .entry-title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-top: 0;
    margin-bottom: 15px;
}

body.blog #main article .entry-title a {
    text-decoration: none;
    color: inherit; /* Hereda el color negro */
}

body.blog #main article .entry-title a:hover {
    color: #3b82f6; /* El título se vuelve azul al pasar el ratón */
}

/* Extracto o resumen del post (el texto "lorem ipsum") */
body.blog #main article .entry-summary {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
    /* Para limitar las líneas de texto si el resumen es largo */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Número de líneas visibles */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- ESTILOS PARA EL PIE DE PÁGINA DEL POST (Autor, Fecha) --- */

/* Contenedor del meta (autor y fecha) */
body.blog #main article .entry-footer,
body.blog #main article .entry-meta {
    display: flex;
    align-items: center; /* Alinea icono y texto verticalmente */
    justify-content: flex-start; /* Alinea a la izquierda */
    gap: 15px; /* Espacio entre autor y fecha */
    font-size: 13px;
    color: #888;
    margin-top: auto; /* Empuja el meta al fondo del bloque */
    border-top: 1px solid #f0f0f0; /* Línea divisoria sutil */
    padding-top: 15px;
}

/* Icono del autor (el logo pequeño) */
body.blog #main article .author-avatar img,
body.blog #main article .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%; /* Icono circular */
    object-fit: cover;
}

/* Texto del autor y fecha */
body.blog #main article .author-name,
body.blog #main article .entry-date {
    display: flex;
    align-items: center;
    gap: 5px; /* Espacio entre el punto y el texto */
}

/* Estilo para el punto separador (•) si se usa texto */
body.blog #main article .author-name::after {
    content: "•";
    color: #3b82f6; /* El punto es azul */
    margin-left: 5px;
    font-weight: bold;
}