/*
Theme Name: escola26
Author: Guillermo
Description: Tema editorial personalizado con tipografía elegante y portada destacada.
Version: 1.0
*/

/* -------------------------------
   1. Tipografía editorial
-------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Playfair+Display:wght@400;700;900&family=Lato:wght@400;700&family=Open+Sans:wght@400;700&display=swap');


body {
  font-family: 'Merriweather', serif;
  font-size: 18px;
  line-height: 1.6;
  background: #fdfdfd;
  color: #333;
  margin: 0;
  padding: 0;
}

h1, h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

h3, h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 0.5em;
}

p, li {
  font-family: 'Merriweather', serif;
  font-size: 18px;
  line-height: 1.6;
}

.meta, .fecha, .autor {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  color: #777;
  letter-spacing: 0.5px;
}

button, nav, .cta {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #333;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  cursor: pointer;
}

/* -------------------------------
   2. Contenedor general
-------------------------------- */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5em 2em 2em 2em; /* menos aire arriba, pero mantiene los laterales */
}

.site-main {
  padding-top: 0.5em;
}

/* -------------------------------
   3. Menú, español - galego
-------------------------------- */
.idioma-selector {
	margin-left: 2em !important;
	gap: 3em !important;
}

/* -------------------------------
   4. Primer post destacado
-------------------------------- */
.post-destacado-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: center;
  background-color: #fff;
  padding: 1em;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.post-destacado-img {
  flex: 2 1 60%;
}

.post-destacado-img img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}


.post-destacado-texto {
  flex: 1 1 35%;
  max-width: 35%;
}


.post-destacado-texto h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-style: italic;
  font-size: 2.75rem;
  line-height: 1.1;
  color: #111;
  -webkit-font-smoothing: antialiased;
}


.post-destacado-texto h2 a {
  font-weight: 900;
  text-decoration: none;
  color: inherit; /* opcional, para que herede el color del h2 */
}



.post-destacado-texto p {
  font-size: 0.95rem;
  color: #666;
  font-family: 'Merriweather', serif;
  line-height: 1.5;
}


@media (max-width: 768px) {
  .post-destacado-horizontal {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .post-destacado-img,
  .post-destacado-texto {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .post-destacado-texto h2 {
    font-size: 1.75rem;
  }
}
/* ------------------------------------------
   5. Single Post - DISEÑO EDITORIAL FINAL (CONTENIDO RECOGIDO)
-------------------------------------------- */

/* Contenedor de la cabecera: Alineado con la foto */
.cabecera-post-single {
    width: 100% !important;
    max-width: 1100px !important; 
    margin: 0 auto 1rem auto !important; /* Espacio mínimo arriba */
    padding: 0 20px !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* El contenedor del título: Forzamos que sea más estrecho que la foto (850px) */
.titulo-con-fondo {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    max-width: 850px !important; /* EL CANDADO: Aquí es donde forzamos el límite */
    margin: 0 auto !important;
    text-align: center;
    word-wrap: break-word;
}

/* Título principal: Tamaño optimizado para evitar desbordes */
.single-post h1,
.titulo-post-single,
.single-post .titulo-principal {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    font-size: 2.6rem !important; /* Un poco más pequeño para ganar control */
    line-height: 1.2 !important;
    margin: 0 auto 0.5rem auto !important;
    color: #000000 !important;
    display: block !important;
    width: 100% !important;
}

/* Subtítulo del post */
.single-post .subtitulo-post {
    display: block !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 500 !important;
    font-style: italic !important;
    color: #555555 !important;
    margin: 10px auto 0 auto !important;
    text-align: center !important;
    max-width: 750px; /* Recogemos también el subtítulo */
}

/* Rayita decorativa */
.titulo-con-fondo::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: #000;
    margin: 20px auto 0 auto;
}

/* --- La imagen destacada: Ahora igualada al contenedor padre --- */
.single-post-img {
    width: 100% !important;
    max-width: 1100px !important; 
    margin: 0 auto 2.5rem auto !important; 
    padding: 0 !important;
    display: block;
    overflow: hidden;
}

.single-post-img img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

/* Cuerpo del artículo: Ancho de lectura de 750px */
.single-post-content {
    width: 90%;
    max-width: 750px; 
    margin: 0 auto;
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333333;
}

/* Ocultar elementos antiguos */
.filigrana, .single-post .titulo-con-fondo .border-white {
    display: none !important;
}


/* -------------------------------
   6. Cuadrícula de posts secundarios
-------------------------------- */

.grid-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2em;
  margin-top: 2em;
}

.post-normal {
  border: 1px solid #eee;
  padding: 1em;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.post-normal-img {
  width: 100%;
  margin-bottom: 1em;
}

.post-normal-img img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.post-normal h3 {
  font-size: 1.5rem;
  font-style: italic;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
}

.post-normal h3 a {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.5rem;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.post-normal h3 a:hover {
  color: #555;
  }

.post-normal p {
  font-size: 0.95rem;
  color: #666;
  font-family: 'Merriweather', serif;
  margin-top: 0.25em; /* o incluso 0 */
}

.post-normal p:last-child {
  margin-bottom: 0;
}





/* -------------------------------
   6bis. Efectos al pasar el ratón sobre los post en el inicio
-------------------------------- */

.post-normal img {
  filter: grayscale(100%);
  transition: filter 0.4s ease, transform 0.3s ease;
}

.post-normal:hover img {
  filter: grayscale(0%);
  transform: scale(1.015);
}

.post-normal:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

/* Efecto para el post destacado */
.post-destacado-img img {
  filter: grayscale(100%);
  transition: filter 0.4s ease, transform 0.3s ease;
}

.post-destacado-horizontal:hover .post-destacado-img img {
  filter: grayscale(0%);
  transform: scale(1.015);
}

.post-destacado-horizontal:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.post-normal {
  background-color: #fff;
  transition: background-color 0.3s ease;
}

.post-normal:hover {
  background-color: #FCFCF2; /* sepia al pasar el ratón */
}

.post-destacado-horizontal {
  background-color: #fff;
  transition: background-color 0.3s ease;
}

.post-destacado-horizontal:hover {
  background-color: #FCFCF2; /* sepia al pasar el ratón */
}




/* -------------------------------
   7. Navegación y pie de página
-------------------------------- */

nav {
  display: flex;
  gap: 1em;
  margin-bottom: 2em;
}

footer {
  text-align: center;
  font-size: 0.875rem;
  color: #999;
  padding: 2em 0;
  border-top: 1px solid #ddd;
}

/* -------------------------------
   8. Responsive refinado
-------------------------------- */

@media (max-width: 768px) {
  .post-destacado-horizontal {
    flex-direction: column;
  }

  .post-destacado-img,
  .post-destacado-texto {
    flex: 1 1 100%;
  }

  .grid-posts {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------
   9.Menú principal horizontal 
--------------------------------*/
.main-navigation {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em;
  padding: 0.5em 1em;
}

.menu-principal {
  display: flex;
  gap: 2em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-principal li {
  margin: 0;
}

.menu-principal a {
  color: #fff;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.menu-principal a:hover {
  color: #ccc;
}

/* 10.1 Selector de idioma */
.idioma-selector {
  display: flex;
  align-items: center;
  gap: 1em;
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  color: #fff;
  text-transform: uppercase;
}

.idioma-selector span {
  font-weight: 600;
}

/* 10.2 Estilo para enlaces de idioma generados por Polylang */
.idioma-selector li a,
.lang-item a {
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.idioma-selector li a:hover,
.lang-item a:hover {
  color: #ccc;
}

.idioma-selector a:hover {
  color: #ccc;
}

/* --- 6. Responsive: Menú Móvil (DISEÑO Y COMPORTAMIENTO) --- */
@media (max-width: 768px) {
    
    /* 1. El menú oculto por defecto */
    .menu-principal {
        display: none !important; 
        flex-direction: column;
        background-color: #ffffff !important;
        padding: 0;
        margin: 0;
        width: 100%;
        border-top: 1px solid #eee;
    }

    /* 2. Mostrar cuando se pulsa */
    .menu-principal.show {
        display: flex !important;
    }

    /* 3. La franja blanca donde vive la hamburguesa */
    .menu-toggle {
        display: flex !important;
        background-color: #ffffff !important;
        padding: 20px;
        border: none;
        width: 100%;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        min-height: 60px;
    }

    /* 4. EL DIBUJO DE LAS 3 RAYAS (Ahora en Negro) */
    .hamburguesa {
        position: relative;
        width: 25px;
        height: 18px;
        display: block;
        margin: 0 auto;
    }

    .hamburguesa::before,
    .hamburguesa::after,
    .hamburguesa span {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #000000 !important; /* <--- RAYAS NEGRAS */
        transition: all 0.3s ease;
    }

    .hamburguesa::before { top: 0; }
    .hamburguesa span { top: 8px; }
    .hamburguesa::after { top: 16px; }

    /* 5. Estilo de los enlaces del menú */
    .menu-principal li a {
        color: #000000 !important;
        display: block;
        padding: 15px;
        text-align: center;
        border-bottom: 1px solid #f9f9f9;
        font-family: 'Lato', sans-serif;
        text-transform: uppercase;
        font-size: 0.9rem;
    }
}
/* -------------------------------
   10.4 Submenús desplegables (IDIOMA)
-------------------------------- */

.menu-principal li.menu-item-has-children {
  position: relative;
}

.menu-principal li.menu-item-has-children > a::after {
  content: " ▼";
  font-size: 0.7em;
}

.menu-principal .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #000;
  padding: 0.5em 0;
  display: none;
  flex-direction: column;
  min-width: 150px;
  z-index: 10;
}

.menu-principal li.menu-item-has-children:hover .sub-menu {
  display: flex;
}

.menu-principal .sub-menu li {
  padding: 0.5em 1em;
  text-align: left;
}

.menu-principal .sub-menu a {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.menu-principal .sub-menu a:hover {
  color: #ccc;
}

/* ------------------------------------------
   11. Imágenes en blanco y negro para portada
-------------------------------------------- */

.post-destacado-img img,
.post-normal-img img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.post-destacado-img img:hover,
.post-normal-img img:hover {
  filter: grayscale(0%) brightness(1.05);
}

/* ------------------------------------------
   12. Paginación (UNIFICADA: Home y Categorías)
-------------------------------------------- */

.pagination, 
.pagination-editorial { /* <-- Añadimos la clase de categorías */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 3em auto 2em auto;
  font-family: 'Lato', sans-serif;
  max-width: 100%;
  background-color: transparent !important; /* Aseguramos que no haya fondo */
}

.pagination a,
.pagination span,
.pagination-editorial a,
.pagination-editorial span,
.pagination-editorial .page-numbers { /* <-- Añadimos los selectores de categorías */
  display: inline-block;
  padding: 0.5em 0.75em;
  border: 1px solid #000 !important;   /* Perfil negro fino */
  border-radius: 4px !important;       /* ¡El redondeado que buscabas! */
  font-size: 0.95rem;
  color: #000 !important;
  background-color: #fff !important;    /* Fondo blanco */
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination a:hover,
.pagination-editorial a:hover {
  background-color: #000 !important;
  color: #fff !important;
}

/* Página activa: Fondo negro como en la Home */
.pagination .current,
.pagination-editorial .current,
.pagination-editorial .page-numbers.current {
  background-color: #000 !important; 
  color: #fff !important;
  border-color: #000 !important;
  border-radius: 4px !important;
}


/* -----------------------------------------------------
   11. Estilo para las leyendas de las imágenes del post
------------------------------------------------------- */

.wp-element-caption {
  font-family: 'Playfair Display', serif; /* o la serif que uses */
  font-style: italic;
  font-size: 0.95rem;
  color: #555;
  text-align: center;
  margin-top: 0.5em;
}

/* -----------------------------------------------------
   12. Estilos para citas editoriales
------------------------------------------------------- */

/* -----------------------------------------------------
   12.1 Cita izquierda
------------------------------------------------------- */


.cita-izquierda {
  background: #fdf6f0; 
  float: left;
  background-image: linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  width: 40%;
  margin: 0em 1em 0em 0em;
  font-style: italic;
  line-height: 1.6;
  border-left: 6px solid #999;
  border-right: 6px solid #999;
  padding-left: 1em;
  padding-right: 0.3em;
  font-family: 'Playfair Display', serif;
  color: #ab2a3e;
}

.quote-decoration img {
  width: 24px;
  height: auto;
  opacity: 1;
  display: block;
}

@media (max-width: 768px) {
  .cita-izquierda {
    float: none;
    width: 90%;
    margin: 2em auto;
  }
}

.cita-izquierda blockquote {
  margin: 0;
 font-size: clamp(1.0em, 2.5vw, 1.3em);
	font-weight: bold;
}

/* -----------------------------------------------------
   12.2 Cita completa horizontal
------------------------------------------------------- */
.cita-completa-horizontal {
  background: #fdf6f0;
  background-image: linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  padding-top: 0.6em;
  padding-bottom: 1.2em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  margin: 1.2em auto; /* centrado horizontal */
  border-left: 6px solid #999;
  border-right: 6px solid #999;
  max-width: 800px;
  display: block;
}

.cita-contenido {
  display: flex;
  align-items: center;
  gap: 1.2em;
}

.bloque-autor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.foto-autor-horizontal {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.4em;
  margin-top: 0.2em;
}

.nombre-autor-horizontal {
  font-weight: bold;
  font-size: 0.8em;
  color: #444;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 0.1em;
  margin-top: 0em;
}

.bloque-cita blockquote {
  margin-top: -0.3em;
  margin-right: 0.3em;
  padding: 0;
  font-size: 2em;
  font-style: italic;
  color: #444;
  line-height: 1.4;
  margin-bottom: 0.3em;
}

.bloque-cita {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  margin-top: -0.2em; /* nuevo */
}

/* -----------------------------------------------------
   13. Post-single-Ultimos articulos
------------------------------------------------------- */
.ultimos-articulos-editorial {
  background: #fdf6f0;;
  padding: 0 1.5em;
  margin-top: 1em;
}

.titulo-seccion {
  font-size: 1.4em;
  font-weight: bold;
  text-transform: none !important;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
  color: #333;
  text-align: center;
}

.grid-editorial {
  display: flex;
  gap: 2em;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.articulo-editorial {
  flex: 1 1 30%;
  max-width: 30%;
  background: #fdfdfd;
  padding: 1em;
  box-shadow: 0 0 0 rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.articulo-editorial .imagen-articulo {
  margin-bottom: 0.2em;
}

.imagen-articulo img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.titulo-articulo {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 0.5em;
  color: #222;
}

.articulo-editorial .titulo-articulo {
  margin-top: 0;
  font-size: 1.1em;
  line-height: 1.3;
}

/* Título sin subrayado + línea decorativa */
.articulo-editorial .titulo-articulo a {
  text-decoration: none !important;
  font-weight: 700;
  color: #333;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.articulo-editorial .titulo-articulo a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3em;
  width: 40%;
  height: 2px;
  background-color: #999;
}

/* -----------------------------------------------------
   14. Filigrana Final
------------------------------------------------------- */
.filigrana-final {
  text-align: center;
  margin: 2em 0;
}

.filigrana-final img {
  max-width: 400px;
  width: auto;
  height: auto;
  display: inline-block;
  opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
  .grid-editorial {
    flex-wrap: wrap;
  }

  .articulo-editorial {
    max-width: 100%;
    margin-bottom: 1.5em;
  }
}


/* -----------------------------------------------------
   15. Sección Comentarios
------------------------------------------------------- */
.comentario-invitacion {
  text-align: center;
  margin: 2em 0;
}

.boton-comentario {
  background-color: transparent;
  border: 1px solid #999;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-style: italic;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
}

.boton-comentario:hover {
  background-color: #f5f5f5;
  border-color: #666;
  letter-spacing: 0.5px;
}

.boton-comentario.comentario-activado {
  background-color: #eaeaea;
  border-color: #444;
  color: #222;
}

.comentarios-ocultos {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.comentarios-ocultos.visible {
  display: block;
  opacity: 1;
}

.comentarios-titulo {
  text-align: center;
  font-size: 1.4em;
  font-weight: normal;
  font-style: italic;
  margin: 2em 0 1em;
  color: #444;
}

.comment-form-comment label {
  display: block;
  margin-bottom: 0.4em;
  font-weight: normal;
  font-style: italic;
  color: #444;
  font-size: 1em;
}

.comment-form-comment textarea {
  width: 100%;
  max-width: 600px;
  padding: 0.8em;
  font-size: 1em;
  line-height: 1.5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.comentario-minimo {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  margin: 1.5em 0;
}

.comentario-numero {
  min-width: 2em;
  text-align: right;
  font-weight: bold;
  color: #999;
  font-family: 'Georgia', serif;
  font-size: 1em;
  line-height: 1.5;
}

.comentario-contenido p {
  margin: 0;
  font-size: 1em;
  line-height: 1.6;
  color: #333;
}

.comentario-contenido strong {
  color: #555;
}


/* -----------------------------------------------------
   16. Cabecera
------------------------------------------------------- */
/* ============================================================
   NUEVA CABECERA MINIMALISTA (Sustituye al bloque 16)
   ============================================================ */

.cabecera-blog {
    background-image: none !important; /* Borra la foto sepia */
    background-color: #ffffff !important;
    height: auto !important; /* Quita la altura fija de 250px */
    padding: 1.5rem 0 1.0rem 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenedor-cabecera {
    max-width: 1000px;
    margin: 0 auto;
}

.site-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem !important; /* Tamaño más equilibrado */
    font-weight: 900;
    color: #000000 !important;
    text-transform: uppercase;
    margin: 0 !important;
    letter-spacing: -1px;
}

/* --- MENÚ ESTILO LÍNEA FINA --- */
.main-navigation {
    background-color: #ffffff !important;
    border-top: 1px solid #000000;    /* Línea negra superior */
    border-bottom: 1px solid #e0e0e0; /* Línea gris suave inferior */
    padding: 0 !important;
    margin-top: 10px !important;
}

.main-navigation ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li a {
    color: #000000 !important;
    font-family: 'Lato', sans-serif;
    font-size: 0.75rem !important;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 10px 20px !important;
    display: block;
}


/* -----------------------------------------------------
   17. Estilos para el título y subtítulo
------------------------------------------------------- */
/* ============================================================
   CONTROL DE TÍTULOS EN FRONT-PAGE (REJILLA Y DESTACADO)
   ============================================================ */

/* --- A. POST DESTACADO (El horizontal grande) --- */
.post-destacado-texto h2 a {
    text-decoration: none !important;
    display: block;
}

.post-destacado-texto .titulo-principal {
    display: block !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 2.2rem !important; /* Tamaño del título destacado */
    font-weight: 900 !important;
    color: #000 !important;
    line-height: 1.1;
}

.post-destacado-texto .subtitulo-post {
    display: block !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 1.4rem !important; /* Tamaño del subtítulo destacado */
    font-weight: 500 !important;
    font-style: italic !important;
    color: #555 !important;
    text-transform: none !important;
    margin-top: 0.8rem;
}

/* --- B. REJILLA DE POSTS (Los 9 de abajo) --- */
.post-normal h3 a {
    text-decoration: none !important;
    display: block;
}

.post-normal .titulo-principal {
    display: block !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.5rem !important;  /* Ajusta este valor para la rejilla */
    font-weight: 800 !important;
    color: #1a1a1a !important;
    line-height: 1.2;
}

.post-normal .subtitulo-post {
    display: block !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 1.1rem !important;  /* Ajusta este valor para la rejilla */
    font-weight: 600 !important;
    font-style: italic !important;
    color: #000 !important;
    text-transform: none !important;
    margin-top: 4px;
}



/* -----------------------------------------------------
   18. ESTRUCTURA HOME: CONTENIDO + SIDEBAR
------------------------------------------------------- */

/* Contenedor principal */
.home-main-layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-top: 40px; /* Espacio respecto al post destacado */
}

/* Columna de posts (75%) */
.home-content-area {
    flex: 3; 
}

/* Rejilla de posts: Forzamos el inicio a ras de contenedor */
.grid-posts {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 45px 35px;
    margin-top: 0 !important;
}

/* Sidebar: Ajuste de alineación con el primer post */
.sidebar-editorial {
    flex: 1;
    min-width: 220px;
    border-left: 1px solid #eaeaea;
    padding-left: 35px;
    /* Este padding-top hace que el Buscador baje para alinearse con el post */
    padding-top: 10px; 
    margin-top: 0 !important;
}

/* --- AJUSTE RESPONSIVE: HOME (MÓVIL) --- */
@media (max-width: 768px) {
    /* 1. La estructura principal deja de estar de lado a lado */
    .home-main-layout {
        flex-direction: column;
        gap: 30px;
    }

    /* 2. La rejilla de posts pasa a 1 sola columna */
    .grid-posts {
        grid-template-columns: 1fr !important; /* Una sola columna */
        gap: 40px;
    }

    /* 3. El Sidebar se va al final de la página */
    .sidebar-editorial {
        width: 100% !important;
        border-left: none !important; /* Quitamos la línea vertical */
        border-top: 1px solid #eaeaea; /* Ponemos una línea horizontal de separación */
        padding-left: 0 !important;
        padding-top: 30px !important;
        margin-top: 20px !important;
    }
}

/* --- ESTÉTICA DE WIDGETS --- */

.widget-home {
    margin-bottom: 50px;
}

/* Forzamos que el primer widget no tenga margen extra arriba */
.widget-home:first-child {
    margin-top: 0 !important;
}

.widget-title {
    font-family: 'Lato', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #333;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    margin-bottom: 20px;
    margin-top: 0 !important; /* Alineación limpia */
}

/* Estilo para la lista de categorías */
.widget-home ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-home ul li {
    margin-bottom: 10px;
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
}

.widget-home ul li a {
    text-decoration: none;
    color: #666;
    transition: color 0.3s;
}

.widget-home ul li a:hover {
    color: #000;
}

/* --- ESTILO EDITORIAL PARA CATEGORÍAS (TEMA NUEVO) --- */

/* Contenedor de la rejilla */
.grid-posts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* Tarjeta de Post Individual */
.post-normal {
    display: flex;
    flex-direction: column;
}

/* Títulos con Lato 900 */
.post-normal h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.4rem;
    margin: 15px 0 10px 0;
}

.post-normal h3 a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-normal h3 a:hover {
    color: #666;
}

/* Subtítulo (el que sale tras el | ) */
.archive-subtitle {
    display: block;
    font-size: 0.75em;
    font-weight: 400;
    color: #888;
    margin-top: 5px;
    letter-spacing: 1px;
}

/* Imágenes en Blanco y Negro */
.post-normal-img img {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.post-normal:hover .post-normal-img img {
    filter: grayscale(0%);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .home-flex-container {
        flex-direction: column;
    }

    .grid-posts {
        grid-template-columns: 1fr; /* Una columna en móvil */
    }

    .home-sidebar {
        width: 100% !important;
        margin-top: 50px;
        border-top: 1px solid #eee;
        padding-top: 30px;
    }
}


/* Sidebar Editorial - Estilo Maestro */
.sidebar-editorial {
    flex: 0 0 280px;
    border-left: 1px solid #eee;
    padding-left: 35px;
}

.sidebar-editorial .widget-title {
    font-family: 'Lato', sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    font-size: 0.6em;
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.sidebar-editorial ul li {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 0.6em;
    margin-bottom: 10px;
    list-style: none;
}

.sidebar-editorial ul li a {
    text-decoration: none;
    color: #333;
}

/* Efecto hover en imágenes de categoría */
.post-normal:hover .post-normal-img img {
    filter: grayscale(0%) !important;
}

/* --- EFECTO SUTIL EN LISTA DE CATEGORÍAS --- */

.sidebar-editorial ul li {
    transition: transform 0.3s ease; /* Hace que el movimiento sea fluido */
}

.sidebar-editorial ul li a {
    display: inline-block; /* Necesario para que el movimiento funcione bien */
    transition: color 0.3s ease;
}

.sidebar-editorial ul li:hover {
    transform: translateX(8px); /* Desplaza la categoría 8 píxeles a la derecha */
}

.sidebar-editorial ul li:hover a {
    color: #000 !important; /* Oscurece el texto al moverlo */
    font-weight: 700; /* Opcional: le da un pelín más de peso al posar el ratón */
}



/* --- FORZAR MINÚSCULAS EN TODAS LAS REJILLAS --- */

/* 1. Para la rejilla de Categorías que acabamos de hacer */
.entry-title-editorial, 
.entry-title-editorial a {
    text-transform: none !important;
}

/* 2. Para la rejilla de la Home (si usa post-normal) */
.post-normal h3, 
.post-normal h3 a {
    text-transform: none !important;
}

/* 3. Para el bloque específico que me has pasado (por si acaso) */
.titulo-articulo, 
.titulo-articulo a {
    text-transform: none !important;
}