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

/* -------------------------------
   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-color: #f7f4f0 !important; /* El crema de tu encabezado */
  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;
  display: none;
}

/* -------------------------------
   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. CABECERA EDITORIAL: LIMPIEZA TOTAL Y RESPONSIVE
   ============================================================ */
/* --- 1. RESET RADICAL (Para matar el fondo negro y azul) --- */

.site-header-global, 
.site-header-global *,
.main-navigation,
.main-navigation ul {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Fuerza el título: Mayúsculas y Verde */
.site-title a {
    text-transform: uppercase !important;
    color: #1a3c34 !important;
    font-weight: 900 !important;
    font-size: 2.4rem !important;
    display: inline-block !important;
}

/* --- 2. DISEÑO ESCRITORIO (PC) --- */
@media (min-width: 769px) {
    .site-header-global {
        background-color: #f7f4f0 !important; /* El color crema de fondo */
        padding: 30px 0 !important;
        min-height: 140px;
    }

    .contenedor-cabecera-flex {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .site-title {
        position: relative;
        padding-left: 5.5em;
        display: flex;
        align-items: center;
        min-height: 95px;
    }

    .site-title::before {
        content: "";
        position: absolute;
        left: 0; top: 50%; transform: translateY(-50%);
        width: 4.5em; height: 4.5em;
        background: url('https://www.escoladeferrado.es/wp-content/uploads/2026/03/EdF-LOGO.png') no-repeat center/contain;
    }

    /* Escondemos el botón de menú en PC */
    .menu-toggle, button.menu-toggle {
        display: none !important;
    }
}

/* --- 3. DISEÑO MÓVIL Y TABLET --- */
@media (max-width: 768px) {

	.site-header-global {
        background-color: #f7f4f0 !important;
        padding: 30px 20px !important;
    }

    .contenedor-cabecera-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

/* Título: Reducido para que no rompa el diseño */

    .site-title {
        padding-top: 90px !important;
        padding-left: 0 !important;
        text-align: center !important;
    }

    .site-title a {
        font-size: 1.4rem !important; /* Ajuste para que quepa bien */
        line-height: 1.2 !important;
    }

/* Logo centrado arriba */
    .site-title::before {
        content: "";
        position: absolute;
        top: 0; left: 50%; transform: translateX(-50%);
        width: 80px; height: 80px;
        background: url('http://escolasinferrado.local/wp-content/uploads/2026/02/EdF-LOGO.png') no-repeat center/contain;
        display: block !important;
    }

/* EL BOTÓN (Forzamos que no sea un bloque negro gigante) */
    button.menu-toggle, 
    .menu-toggle {
        display: block !important;
        background-color: transparent !important; /* Tu Verde */
        color: #ffffff !important;
        width: auto !important; /* IMPORTANTE: Para que no ocupe todo el ancho */
        min-width: 120px;
        margin: 20px auto !important;
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        border-radius: 4px !important;
    }

/* Menú desplegable */
    .main-navigation ul.menu-principal {
        display: none !important;
    }

    .main-navigation.toggled ul.menu-principal {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background-color: #ffffff !important;
        width: 100% !important;
        padding: 20px 0 !important;
        border: 1px solid #ddd !important;
    }
}

/* --- 4. ESTILO FINAL DE ENLACES DEL MENÚ --- */
.menu-principal {
    list-style: none !important;
    padding: 0;
}

.menu-principal a {
    color: #333 !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.menu-principal li.lang-item {
    display: inline-block !important;
    margin: 10px 5px 0 5px !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;
  }
}

/* ------------------------------------------
   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;
}

/* -----------------------------------------------------
   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;
}

/* DALLE A VER QUE PASA--- 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: transparent !important;
        padding: 0;
        margin: 0;
        width: 100%;
        border-top: 1px solid #eee;
    }

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

    /* 3. La franja blanca donde vive la hamburguesa */
    .menu-toggle {
        display: flex !important;
        background-color: transparent !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;
    }
}

/* --- ESTILO PARA EL MENÚ DESPLEGADO (LOCAL) --- */
@media (max-width: 768px) {
    /* Por defecto ocultamos el menú móvil */
    .menu-principal {
        display: none; 
    }

    /* Cuando el JS añade la clase .show, lo mostramos */
    .menu-principal.show {
        display: block !important;
        background-color: #ffffff !important;
        position: absolute !important;
        top: 60px; /* Ajusta esto según el alto de tu cabecera */
        left: 0;
        width: 100% !important;
        z-index: 9999;
        border-bottom: 1px solid #ddd;
    }

    .menu-principal.show li {
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .menu-principal.show li a {
        padding: 15px;
        display: block;
        color: #333;
    }
}

/* --- ESTO HACE QUE EL MENÚ SE VEA CUANDO PULSAS --- */
@media (max-width: 768px) {
    /* Escondemos el menú por defecto */
    .main-navigation ul.menu-principal {
        display: none !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Cuando el JS añade la clase 'show', el menú APARECE */
    .main-navigation ul.menu-principal.show {
        display: block !important;
        opacity: 1 !important;
        background: #ffffff !important;
        position: absolute !important;
        top: 100%; /* Se despliega justo debajo de la cabecera */
        left: 0;
        width: 100% !important;
        z-index: 99999 !important;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: 20px 0 !important;
    }

    /* Estilo de los enlaces dentro del menú abierto */
    .menu-principal.show li {
        display: block !important;
        width: 100%;
        text-align: center;
    }

    .menu-principal.show li a {
        display: block;
        padding: 15px;
        color: #000 !important;
        border-bottom: 1px solid #eee;
    }
}

/* --- AJUSTE TAMAÑO TÍTULOS ARTÍCULOS INFERIORES --- */
.ultimos-articulos-editorial .titulo-articulo {
    font-size: 1.2rem !important; /* Ajusta este número (1.1, 1.2, 1.3) hasta que te guste */
    line-height: 1.3;
    margin-top: 10px;
    font-weight: 700; /* Para que mantenga el estilo editorial pero más pequeño */
}

/* Si usas la clase titulo-principal que añadimos antes */
.ultimos-articulos-editorial .titulo-principal {
    font-size: 1.2rem !important;
    display: block;
}

/* Opcional: Reducir un poco el espacio entre artículos en móvil */
@media (max-width: 768px) {
    .grid-editorial {
        gap: 15px !important;
    }
}


/* Ajuste para que las filigranas blancas se sigan viendo */
.filigrana img, .filigrana-final img {
    opacity: 0.8; /* Les da un toque sutil sobre el fondo crema */
}