/* =============================================================================
   PLANTILLA BLOG - fondosmutuos.pe (AAFM)
   Version 1.0 · 2026-11-10 · Webtilia
   -----------------------------------------------------------------------------
   QUE ES
   Hoja de estilos que reformula el listado del blog y el post individual,
   alineandolos al sistema visual que ya usa el home, y conteniendo el bug del
   motor de Kava que emite ~140 declaraciones con el literal
   "Variable not found" como valor.

   DONDE VA (elegir UNA opcion, ver 03-plantilla-blog.md)
   A) Child theme: wp-content/themes/kava-child/style.css   <- recomendado (FTP)
   B) Apariencia > Personalizar > CSS adicional             <- sin FTP

   POR QUE HAY !important
   No es descuido. El CSS dinamico de Kava se inyecta en el <head> con la MISMA
   especificidad que estas reglas y con un orden que no controlamos. Sin
   !important el empate lo gana el bloque que cargue ultimo, que es justamente
   el roto. Se usa SOLO donde hay que vencer al motor averiado.

   LO QUE ESTA HOJA NO ARREGLA
   - La causa raiz del bug de Kava (preset huerfano en el Customizer). Esto es
     contencion, no cura. Si alguien repara el preset, revisar los !important.
   - Nada que viva en la base de datos: titulo "New Home", ajustes de Rank Math,
     plantillas de Elementor, categoria con slug sin-categoria.
   - Pesos tipograficos que no estan cargados (ver bloque TIPOGRAFIA).
   ============================================================================= */


/* =============================================================================
   1. TOKENS - extraidos del home real, no inventados
   ============================================================================= */
:root {
  /* --- Marca --- */
  --fm-azul:           #3D386C;  /* primario real: 47+ usos en el home. 10.60:1 sobre blanco */
  --fm-azul-oscuro:    #292647;  /* estado hover / fondos densos */
  --fm-azul-suave:     #F2F2FF;  /* fondo de campos de formulario, ya usado en el sitio */

  /* --- Naranja de accion ---
     #F33A00 es el naranja de marca (42 usos en el home) pero da 3.88:1 sobre
     blanco: NO cumple WCAG AA (pide 4.5:1) y el texto de esos botones mide
     12-16px, asi que no califica como "texto grande".

     --fm-naranja      -> mismo tono (hue 14.3deg, sat 100%), oscurecido a L=42%.
                          4.85:1 sobre blanco. Para TEXTO y FONDOS DE BOTON.
     --fm-naranja-puro -> el original. Solo para elementos NO textuales
                          (bordes, filetes, iconos, subrayados decorativos),
                          donde el contraste de texto no aplica. Asi la marca
                          conserva su naranja sin romper accesibilidad. */
  --fm-naranja:        #D63300;
  --fm-naranja-puro:   #F33A00;
  --fm-naranja-hover:  #B82C00;  /* 6.18:1 */

  /* --- Texto --- */
  --fm-texto:          #1F1D33;  /* cuerpo */
  --fm-texto-meta:     #6B6B6B;  /* fechas, autor, categoria. 5.33:1 - el #999999
                                    que usa hoy el sitio da 2.85:1 y FALLA AA */
  --fm-borde:          #E6E6EF;
  --fm-fondo:          #FFFFFF;
  --fm-fondo-alt:      #F7F7FB;

  /* --- Forma --- */
  --fm-radio:          15px;     /* token de facto del home: 21 ocurrencias */
  --fm-radio-boton:    25px;     /* unifica los 4 radios sueltos (40/25/12/8) */
  --fm-sombra:         0 6px 16px rgba(18, 26, 49, .05);   /* la del home */
  --fm-sombra-hover:   0 12px 28px rgba(18, 26, 49, .10);

  /* --- Tipografia ---
     Montserrat es la unica familia realmente pintada (forzada con !important
     en todo el sitio). Pesos EFECTIVAMENTE cargados: 300, 400, 500, 600.
     NO hay 700/800/900: si se piden, el navegador NO los sintetiza - cae al
     peso mas cercano y la jerarquia se aplana. Por eso esta escala llega
     hasta 600. Si se quiere 700, primero hay que cargarlo. */
  --fm-font:           Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fm-peso-normal:    400;
  --fm-peso-medio:     500;
  --fm-peso-fuerte:    600;

  /* --- Escala tipografica (fluida, sin media queries) --- */
  --fm-h1:             clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);   /* 28 -> 44px */
  --fm-h2:             clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);  /* 22 -> 30px */
  --fm-h3:             clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);   /* 19 -> 24px */
  --fm-h4:             clamp(1.0625rem, 1rem + .3vw, 1.25rem);     /* 17 -> 20px */
  --fm-cuerpo:         1.0625rem;                                   /* 17px */
  --fm-pequeno:        .875rem;                                     /* 14px */
  --fm-interlineado:   1.75;
  --fm-medida:         68ch;    /* ancho de columna comodo para lectura */
}


/* =============================================================================
   2. CONTENCION DEL MOTOR ROTO DE KAVA
   El generador del Customizer emite el literal "Variable not found" como VALOR,
   lo que produce CSS invalido que el navegador descarta. El dano mas grave:
   h1/h2/h3 nativos quedan en font-size: 0px (literalmente invisibles).
   Cada regla de abajo repone una propiedad que el motor dejo sin valor.
   ============================================================================= */

/* 2.1 - Encabezados nativos rescatados del font-size:0 */
h1, .h1-style { font-size: var(--fm-h1) !important; line-height: 1.2  !important; }
h2, .h2-style { font-size: var(--fm-h2) !important; line-height: 1.3  !important; }
h3, .h3-style { font-size: var(--fm-h3) !important; line-height: 1.35 !important; }
h4, .h4-style { font-size: var(--fm-h4) !important; line-height: 1.4  !important; }

h1, h2, h3, h4, h5, h6,
.h1-style, .h2-style, .h3-style, .h4-style {
  font-family: var(--fm-font) !important;
  font-style: normal !important;
  font-weight: var(--fm-peso-fuerte) !important;
  color: var(--fm-azul) !important;
  letter-spacing: -.01em !important;
  margin: 0 0 .6em;
}

/* 2.2 - Cuerpo */
body {
  font-family: var(--fm-font) !important;
  font-style: normal !important;
  font-weight: var(--fm-peso-normal) !important;
  font-size: var(--fm-cuerpo) !important;
  line-height: var(--fm-interlineado) !important;
  color: var(--fm-texto) !important;
}

/* 2.3 - Enlaces (el motor los dejo sin color) */
a { color: var(--fm-azul); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--fm-naranja); }

/* 2.4 - Header y barra superior, que quedaron sin background-color */
.site-header__wrap { background-color: var(--fm-fondo) !important; background-repeat: no-repeat !important; }
.top-panel         { background-color: var(--fm-azul) !important; color: #FFFFFF !important; }
.top-panel a       { color: #FFFFFF !important; }

/* 2.5 - Inputs nativos */
input, textarea, select {
  font-family: var(--fm-font) !important;
  font-style: normal !important;
  font-size: var(--fm-cuerpo);
  color: var(--fm-texto);
  background-color: var(--fm-azul-suave);
  border: 1px solid var(--fm-borde);
  border-radius: 8px;
  padding: .7em .9em;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--fm-naranja);
  outline-offset: 2px;
  border-color: var(--fm-naranja);
}

/* 2.6 - Boton "volver arriba" (quedo sin padding, radio ni fondo) */
#toTop {
  padding: 12px !important;
  border-radius: 50% !important;
  background-color: var(--fm-azul) !important;
  color: #FFFFFF !important;
  box-shadow: var(--fm-sombra);
  transition: background-color .2s ease, transform .2s ease;
}
#toTop:hover { background-color: var(--fm-naranja); transform: translateY(-2px); }

/* 2.7 - Blockquote (quedo sin color) */
blockquote {
  color: var(--fm-texto) !important;
  border-left: 4px solid var(--fm-naranja-puro);
  background: var(--fm-fondo-alt);
  border-radius: 0 var(--fm-radio) var(--fm-radio) 0;
  margin: 2em 0;
  padding: 1.25em 1.5em;
  font-size: 1.0625em;
  font-style: normal;
}
blockquote p:last-child { margin-bottom: 0; }

/* 2.8 - Widgets de sidebar que quedaron sin tipografia/color */
.widget_recent_entries a,
.widget_recent_comments a,
.widget_archive a,
.widget_categories a,
.widget_meta a,
.widget_pages a,
.widget_nav_menu a {
  font-family: var(--fm-font) !important;
  font-style: normal !important;
  font-weight: var(--fm-peso-normal) !important;
  font-size: var(--fm-cuerpo) !important;
  color: var(--fm-azul) !important;
  line-height: 1.5 !important;
}
.widget_recent_entries a:hover,
.widget_categories a:hover { color: var(--fm-naranja) !important; }
.widget_calendar tbody td a { color: var(--fm-naranja) !important; font-weight: var(--fm-peso-fuerte); }

/* 2.9 - Migas de pan */
.breadcrumbs_item_link { color: var(--fm-texto-meta) !important; }
.breadcrumbs_item_link:hover { color: var(--fm-naranja) !important; }
.breadcrumbs_item_target { color: var(--fm-azul); font-weight: var(--fm-peso-medio); }


/* =============================================================================
   2b. ALINEACION CON EL HEADER

   El header es una seccion de Elementor a ancho completo con `padding: 0 5%`
   (95.25px a cada lado en una ventana de 1905px), asi que el logo arranca al
   5% del ancho. El contenido, en cambio, usa el `.container` del tema: topado
   en `max-width: 1200px` y centrado. A 1920px eso dejaba el blog arrancando en
   x=368 contra el logo en x=95 -> 273px de desfase.

   Se iguala llevando el `.container` a ancho completo con ese mismo 5%. Ojo con
   la tentacion de descontarle los 15px del padding de la columna interna: la
   fila (`.row`) tiene `margin: 0 -15px`, que ya los compensa. Medido en vivo:
   con `5%` pelado, la tarjeta cae en 95px y el sidebar termina en 1810px, que
   es exactamente donde empieza y termina el header.

   Solo en escritorio: esa seccion del header es `elementor-hidden-tablet` y
   `elementor-hidden-phone`, o sea que por debajo de 1025px ni siquiera se
   muestra y no hay nada contra que alinear. Ahi se deja el padding de 15px.
   ============================================================================= */
@media (min-width: 1025px) {
  body.blog .site-content .container,
  body.archive .site-content .container,
  body.single-post .site-content .container,
  body.blog .site-breadcrumbs__wrap,
  body.archive .site-breadcrumbs__wrap,
  body.single-post .site-breadcrumbs__wrap {
    max-width: none !important;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
}


/* =============================================================================
   3. LISTADO DEL BLOG - la reformulacion propiamente dicha

   Markup real verificado (NO es JetEngine, es Kava nativo):
     div.posts-list.posts-list--default.list-style-default
       +- article.posts-list__item.default-item
            +- header.entry-header   (h3.entry-title + div.entry-meta)
            +- figure.post-thumbnail > a.post-thumbnail__link > img
            +- div.entry-content     (extracto)
            +- footer.entry-footer
   ============================================================================= */

/* 3.1 - Grilla de 2 columnas (hoy es una lista vertical de 5 items sueltos) */
.posts-list.list-style-default {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;
}

/* 3.2 - La tarjeta.
   `order` reordena visualmente SIN tocar el PHP del tema: hoy el titulo va
   antes de la imagen, que es el orden menos habitual para una card. Con flex
   la imagen pasa arriba. El DOM no cambia -> el orden de lectura para lectores
   de pantalla y para Google sigue siendo titulo > imagen > extracto, que es
   correcto semanticamente. */
.posts-list.list-style-default .posts-list__item {
  display: flex;
  flex-direction: column;
  background: var(--fm-fondo);
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
  overflow: hidden;
  box-shadow: var(--fm-sombra);
  transition: box-shadow .25s ease, transform .25s ease;
  /* !important en los dos: el tema separa los items de una lista vertical con
     `margin-top: 50px` Y `padding-top: 40px` a partir del segundo. Dentro de
     una grilla eso desalinea las columnas (la tarjeta derecha arrancaba 50px
     mas abajo) y mete 40px de blanco sobre su imagen. El `gap` de la grilla ya
     se encarga de la separacion. */
  margin: 0 !important;
  padding: 0 !important;
}
.posts-list.list-style-default .posts-list__item:hover {
  box-shadow: var(--fm-sombra-hover);
  transform: translateY(-4px);
}

.posts-list.list-style-default .post-thumbnail  { order: 1; }
.posts-list.list-style-default .entry-header    { order: 2; }
.posts-list.list-style-default .entry-content   { order: 3; }
.posts-list.list-style-default .entry-footer    { order: 4; margin-top: auto; }

/* 3.3 - Imagen: ratio fijo para que las tarjetas no bailen (evita CLS) */
.posts-list.list-style-default .post-thumbnail {
  margin: 0;
  overflow: hidden;
  background: var(--fm-fondo-alt);
}
.posts-list.list-style-default .post-thumbnail__link {
  display: block;
  aspect-ratio: 16 / 9;
}
.posts-list.list-style-default .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.posts-list.list-style-default .posts-list__item:hover .post-thumbnail img { transform: scale(1.04); }

/* 3.4 - Cabecera de la tarjeta */
.posts-list.list-style-default .entry-header  { padding: 1.5rem 1.5rem 0; }
.posts-list.list-style-default .entry-content { padding: .75rem 1.5rem 0; }
.posts-list.list-style-default .entry-footer  { padding: 1rem 1.5rem 1.5rem; }

.posts-list.list-style-default .entry-title {
  font-size: var(--fm-h3) !important;
  line-height: 1.3 !important;
  margin: 0 0 .65rem;
}
.posts-list.list-style-default .entry-title a {
  color: var(--fm-azul) !important;
  text-decoration: none;
}
.posts-list.list-style-default .entry-title a:hover {
  color: var(--fm-naranja) !important;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* 3.5 - Metadatos: hoy en #999999 (2.85:1, falla AA). Suben a 5.33:1 */
.entry-meta,
.entry-meta a,
.byline, .cat-links, .posted-on, .tags-links, .entry-date, .post-date {
  font-size: var(--fm-pequeno) !important;
  color: var(--fm-texto-meta) !important;
  font-weight: var(--fm-peso-normal) !important;
  line-height: 1.5;
}
.entry-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.entry-meta > span { display: inline-flex; align-items: center; gap: .3rem; }

/* La categoria como pastilla - es el gancho de navegacion del listado */
.cat-links a {
  display: inline-block;
  background: var(--fm-azul-suave);
  color: var(--fm-azul) !important;
  font-weight: var(--fm-peso-medio) !important;
  font-size: .75rem !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .25em .75em;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.cat-links a:hover { background: var(--fm-naranja); color: #FFFFFF !important; }

/* 3.6 - Extracto */
.posts-list.list-style-default .entry-content p {
  font-size: var(--fm-cuerpo);
  line-height: 1.65;
  color: var(--fm-texto);
  margin: 0;
  text-align: left;   /* anula el justify global, ver bloque 5.2 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 3.7 - Pie de la tarjeta.
   Markup real verificado: el footer trae DOS enlaces distintos, no uno.
     <footer class="entry-footer">
       <div class="entry-meta"><div>
         <a class="comments-button"><i class="fa fa-comment"></i> 0</a>
         <a class="btn">Mas detalles</a>
       </div></div>
     </footer>
   Hay que tratarlos distinto: el contador de comentarios es METADATO, el
   "Mas detalles" es el CTA. Pintarlos iguales dejaria texto naranja sobre el
   fondo azul que el CSS adicional ya le pone al .btn - contraste pesimo. */

.posts-list.list-style-default .entry-footer .entry-meta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

/* Contador de comentarios: se queda como metadato discreto */
.posts-list.list-style-default .comments-button {
  color: var(--fm-texto-meta) !important;
  font-size: var(--fm-pequeno) !important;
  font-weight: var(--fm-peso-normal) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.posts-list.list-style-default .comments-button:hover { color: var(--fm-azul) !important; }

/* "Mas detalles" -> CTA en el azul institucional (decision de Rogger,
   2026-11-10; antes estaba en el naranja de marca).
   `#3D386C` sobre blanco da 10.60:1, muy por encima del 4.5:1 que pide
   WCAG AA, asi que por accesibilidad es incluso mejor que el naranja.
   El segundo selector vence al parche `article.type-post .entry-meta .btn`
   del CSS adicional. Aquel no usa !important, asi que este gana limpio. */
.posts-list.list-style-default .entry-footer .btn,
article.type-post .entry-meta .btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--fm-azul) !important;
  color: #FFFFFF !important;
  font-size: var(--fm-pequeno) !important;
  font-weight: var(--fm-peso-fuerte) !important;
  text-decoration: none;
  padding: .6em 1.25em;
  min-height: 40px;
  border-radius: var(--fm-radio-boton) !important;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.posts-list.list-style-default .entry-footer .btn::after {
  content: "\2192";
  transition: transform .2s ease;
}
.posts-list.list-style-default .entry-footer .btn:hover,
article.type-post .entry-meta .btn:hover {
  background: var(--fm-azul-oscuro) !important;
  color: #FFFFFF !important;
}
.posts-list.list-style-default .entry-footer .btn:hover::after { transform: translateX(3px); }


/* =============================================================================
   4. PAGINACION (quedo sin color por el motor roto)
   ============================================================================= */
.posts-list-navigation { margin-top: 3rem; }
.posts-list-navigation .pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.posts-list-navigation .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;      /* area tactil minima accesible */
  min-height: 44px;
  padding: 0 .75rem;
  border: 1px solid var(--fm-borde);
  border-radius: 8px;
  color: var(--fm-azul) !important;
  font-weight: var(--fm-peso-medio);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.posts-list-navigation .pagination .page-numbers:hover {
  background: var(--fm-azul-suave);
  border-color: var(--fm-azul);
}
.posts-list-navigation .pagination .page-numbers.current {
  background: var(--fm-azul);
  border-color: var(--fm-azul);
  color: #FFFFFF !important;
}


/* =============================================================================
   5. POST INDIVIDUAL
   ============================================================================= */

/* 5.1 - Medida de lectura. Sin esto la columna se estira todo lo que de el
   contenedor y la linea se vuelve incomoda de leer en pantallas grandes. */
.single-post .entry-content { max-width: var(--fm-medida); margin-inline: auto; }
.single-post .entry-content > * { max-width: 100%; }

/* 5.2 - Anula el text-align: justify global.
   El sitio fuerza justify en p y article SIN guionado; en columnas angostas
   eso abre "rios" de espacio entre palabras. */
p, article, .entry-content p, .single-post .entry-content p {
  text-align: left !important;
  hyphens: none;
}

.single-post .entry-content p { margin: 0 0 1.4em; font-size: var(--fm-cuerpo); line-height: var(--fm-interlineado); }

/* 5.3 - Jerarquia interna del articulo. Reemplaza los ~15 parches sueltos de
   "CSS adicional" (h1.entry-title{font-size:2em}, etc.) por una escala. */
.single-post .entry-title { font-size: var(--fm-h1) !important; line-height: 1.15 !important; margin-bottom: .5em; }
.single-post .entry-content h2 { font-size: var(--fm-h2) !important; margin: 2em 0 .6em; }
.single-post .entry-content h3 { font-size: var(--fm-h3) !important; margin: 1.75em 0 .5em; }
.single-post .entry-content h4 { font-size: var(--fm-h4) !important; margin: 1.5em 0 .5em; }

/* 5.4 - Imagen destacada y figuras */
.single-post .post-thumbnail img,
.single-post .entry-content img {
  border-radius: var(--fm-radio);
  box-shadow: var(--fm-sombra);
  height: auto;
  max-width: 100%;
}

/* 5.5 - Tablas (la serie mensual publica datos de tasas y commodities;
   hoy no hay ni una tabla, y es justo lo que una IA cita) */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: var(--fm-pequeno);
  display: block;
  overflow-x: auto;      /* no desborda el ancho de la pagina en movil */
}
.entry-content table th {
  background: var(--fm-azul);
  color: #FFFFFF;
  font-weight: var(--fm-peso-fuerte);
  text-align: left;
  padding: .75em 1em;
}
.entry-content table td { padding: .7em 1em; border-bottom: 1px solid var(--fm-borde); }
.entry-content table tr:nth-child(even) td { background: var(--fm-fondo-alt); }

/* 5.6 - Etiquetas al pie */
.tags-links a {
  display: inline-block;
  background: var(--fm-fondo-alt);
  border: 1px solid var(--fm-borde);
  border-radius: 999px;
  padding: .3em .8em;
  margin: 0 .35em .5em 0;
  font-size: .8125rem;
  color: var(--fm-texto-meta) !important;
  text-decoration: none;
}
.tags-links a:hover { border-color: var(--fm-naranja); color: var(--fm-naranja) !important; }


/* =============================================================================
   6. BOTONES - un solo token de radio, naranja con contraste valido
   ============================================================================= */
.elementor-button,
.btn,
input[type="submit"] {
  border-radius: var(--fm-radio-boton) !important;
  font-family: var(--fm-font) !important;
  font-weight: var(--fm-peso-fuerte) !important;
  letter-spacing: .01em;
  min-height: 44px;
  padding: .75em 1.75em;
  transition: background-color .2s ease, transform .2s ease;
}

/* CTA primario - #D63300 da 4.85:1 con texto blanco (el #F33A00 daba 3.88:1) */
.elementor-button-primary,
.btn--primary,
input[type="submit"] {
  background-color: var(--fm-naranja) !important;
  color: #FFFFFF !important;
  border: none;
}
.elementor-button-primary:hover,
.btn--primary:hover,
input[type="submit"]:hover { background-color: var(--fm-naranja-hover) !important; transform: translateY(-2px); }

/* Secundario */
.btn--secondary, .elementor-button-secondary {
  background-color: transparent !important;
  color: var(--fm-azul) !important;
  border: 2px solid var(--fm-azul) !important;
}
.btn--secondary:hover, .elementor-button-secondary:hover {
  background-color: var(--fm-azul) !important;
  color: #FFFFFF !important;
}

/* Reemplaza el parche .archive #secondary .elementor-button{background:#3d386c !important} */
.archive #secondary .elementor-button,
.single-post #secondary .elementor-button {
  background-color: var(--fm-azul) !important;
  color: #FFFFFF !important;
  border-radius: var(--fm-radio-boton) !important;
}


/* =============================================================================
   7. ACCESIBILIDAD
   ============================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.page-numbers:focus-visible {
  outline: 3px solid var(--fm-naranja);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .posts-list__item:hover { transform: none; }
  .posts-list__item:hover .post-thumbnail img { transform: none; }
}


/* =============================================================================
   8. RESPONSIVE
   ============================================================================= */

/* Tablet y abajo: una sola columna */
@media (max-width: 1024px) {
  .posts-list.list-style-default { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 767px) {
  :root { --fm-cuerpo: 1rem; --fm-interlineado: 1.7; }

  .posts-list.list-style-default .entry-header  { padding: 1.25rem 1.25rem 0; }
  .posts-list.list-style-default .entry-content { padding: .6rem 1.25rem 0; }
  .posts-list.list-style-default .entry-footer  { padding: .9rem 1.25rem 1.25rem; }

  .entry-meta { gap: .35rem .6rem; }

  /* El iframe de Brevo tiene hoy height:950px !important fijo en movil: si el
     formulario cambia de alto (error de validacion, campo nuevo) se recorta.
     min-height lo deja crecer. */
  iframe[src*="sibforms.com"] { height: auto !important; min-height: 950px; width: 100%; }
}

@media (max-width: 480px) {
  .posts-list.list-style-default .post-thumbnail__link { aspect-ratio: 3 / 2; }
}

/* Impresion */
@media print {
  #toTop, #secondary, .posts-list-navigation, .site-header, .site-footer { display: none !important; }
  .single-post .entry-content { max-width: none; }
}