/* ═══════════════════════════════════════════════════════════════
   FUNDACIÓN PRODE · blog y artículo

   Este archivo está escrito para WordPress. Los selectores usan los
   nombres de clase que WordPress ya genera (entry-title, entry-meta,
   entry-content, post-thumbnail, wp-block-*), así que cuando el
   contenido lo produzca el loop en vez del HTML de ejemplo, se ve
   exactamente igual sin tocar una línea.

   La sección `.entry-content` cubre TODO lo que un editor puede
   insertar desde el panel de Gutenberg sin saber nada de código:
   títulos, listas, citas, imágenes, tablas, separadores, botones.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────── Cabecera del archivo ─────────────────── */
.archivo-cab{
  padding-top:calc(var(--header-h) + clamp(48px,8vw,96px));
  padding-bottom:clamp(32px,5vw,56px);
}
.miga{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:var(--cuerpo);
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris-suave);margin-bottom:26px;
}
.miga a{color:var(--gris-suave);text-decoration:none}
.miga a:hover{color:var(--naranja-texto)}
.miga svg{width:11px;height:11px}

/* ─────────────────── Filtro de categorías ─────────────────── */
.filtros{
  position:sticky;top:var(--header-h);z-index:30;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-block:1px solid var(--linea);
}
.filtro-lista{
  display:flex;gap:6px;list-style:none;
  overflow-x:auto;scrollbar-width:none;padding-block:12px;
}
.filtro-lista::-webkit-scrollbar{display:none}
.filtro{
  display:inline-block;white-space:nowrap;text-decoration:none;
  font-size:14.5px;font-weight:550;color:var(--gris);
  padding:8px 16px;border-radius:var(--radio-s);
  transition:background-color var(--t-ui) var(--sal),color var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .filtro:hover{background:var(--tinte);color:var(--tinta)}
}
.filtro[aria-current="page"]{background:var(--naranja);color:var(--tinta)}

/* ─────────────────────── Tarjeta de entrada ─────────────────────── */
.lista-posts{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(28px,3.4vw,48px);
  margin-top:clamp(36px,5vw,64px);
}
.post{display:flex;flex-direction:column;gap:16px}
.post[hidden]{display:none}

/* `color:inherit` no es adorno: el <a> hereda el azul del navegador y hoy
   no se nota porque cada hijo fija el suyo. El día que alguien ponga un
   texto suelto ahí, sale azul. */
.post-thumbnail{display:block;text-decoration:none;color:inherit;overflow:hidden;border-radius:var(--radio)}
.post-thumbnail .marco{border-radius:var(--radio);margin:0}
.post-thumbnail img{
  transition:transform 620ms var(--sal);
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .post:hover .post-thumbnail img{transform:scale(1.035)}
}
@media (prefers-reduced-motion:reduce){
  .post-thumbnail img{transition:none}
  .post:hover .post-thumbnail img{transform:none}
}

.post-cuerpo{display:flex;flex-direction:column;gap:10px}

.cat-etiqueta{
  align-self:flex-start;
  font-family:var(--cuerpo);
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--naranja-texto);
}
.cat-etiqueta a{color:inherit;text-decoration:none}

.entry-title{
  font-size:clamp(20px,1.7vw,25px);
  font-weight:650;line-height:1.24;letter-spacing:-.018em;
}
.entry-title a{
  color:var(--tinta);text-decoration:none;
  background-image:linear-gradient(var(--naranja),var(--naranja));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size 320ms var(--sal);
  padding-bottom:2px;
}
@media (hover:hover) and (pointer:fine){
  .entry-title a:hover{background-size:100% 1.5px}
}
@media (prefers-reduced-motion:reduce){ .entry-title a{transition:none} }

.entry-summary{font-size:16px;line-height:1.6;color:var(--gris);text-wrap:pretty}

.entry-meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:var(--cuerpo);
  font-size:11px;letter-spacing:.07em;color:var(--gris-suave);
  margin-top:2px;
}
.entry-meta .sep{opacity:.5}
.entry-meta a{color:inherit;text-decoration:none}

/* ── Entrada destacada ── */
.post.destacada{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);align-items:center;
  padding-bottom:clamp(32px,4vw,52px);
  border-bottom:1px solid var(--linea);
}
.post.destacada .entry-title{font-size:clamp(26px,3.2vw,42px);line-height:1.12;letter-spacing:-.025em}
.post.destacada .entry-summary{font-size:17.5px}
@media (max-width:820px){
  .post.destacada{grid-template-columns:1fr;gap:20px}
}

.sin-posts{
  margin-top:56px;padding:44px;text-align:center;
  border:1px dashed var(--linea-fuerte);border-radius:var(--radio);
  color:var(--gris-suave);font-size:16px;
}

.paginacion{margin-top:clamp(44px,6vw,72px);display:flex;justify-content:center;gap:10px}
/* Estilos para la paginación real de WordPress */
.paginacion .page-numbers{
  display:inline-grid;place-content:center;min-width:42px;height:42px;padding-inline:12px;
  border:1.5px solid var(--linea);border-radius:var(--radio-chico);
  text-decoration:none;color:var(--tinta);font-weight:600;font-size:15px;
  transition:border-color var(--t-ui) var(--sal);
}
.paginacion .page-numbers.current{background:var(--naranja);border-color:var(--naranja)}
@media (hover:hover) and (pointer:fine){
  .paginacion .page-numbers:hover{border-color:var(--tinta)}
}

/* ─────────────────────── Newsletter ─────────────────────── */
.suscribir{display:flex;flex-wrap:wrap;gap:10px}
.suscribir input{
  flex:1 1 240px;min-width:0;
  font-family:inherit;font-size:16px;color:var(--blanco);
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.28);border-radius:var(--radio-chico);
  padding:13px 16px;
  transition:border-color var(--t-ui) var(--sal),background-color var(--t-ui) var(--sal);
}
.suscribir input::placeholder{color:var(--sobre-navy-2)}
.suscribir input:focus{border-color:var(--naranja);background:rgba(255,255,255,.11);outline:none}
.suscribir input:focus-visible{outline:2.5px solid var(--naranja);outline-offset:2px}

/* ═══════════════════ ARTÍCULO ═══════════════════ */
.articulo-cab{
  padding-top:calc(var(--header-h) + clamp(44px,7vw,84px));
  padding-bottom:clamp(28px,4vw,44px);
}
.articulo-cab .env{max-width:820px}
.articulo-cab .entry-title{
  font-size:clamp(30px,4.4vw,60px);line-height:1.08;letter-spacing:-.028em;
  font-weight:700;margin-block:14px 18px;
}
.articulo-cab .entry-summary{font-size:clamp(17.5px,1.5vw,21px);line-height:1.55;color:var(--gris)}
.articulo-cab .entry-meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--linea);font-size:11.5px}

.articulo-imagen{margin-bottom:clamp(32px,5vw,56px)}
.articulo-imagen .env{max-width:1060px}
.articulo-imagen figcaption,
.wp-caption-text,
.wp-element-caption{
  margin-top:11px;font-family:var(--cuerpo);
  font-size:11px;letter-spacing:.06em;color:var(--gris-suave);line-height:1.65;
}

/* ── El cuerpo del artículo ──
   Todo lo que sigue existe para que el editor arme la nota desde el
   panel de WordPress —títulos, listas, citas, imágenes, tablas— y
   quede bien sin que nadie escriba una clase a mano.               */
.entry-content{
  max-width:68ch;margin-inline:auto;
  font-size:18px;line-height:1.72;color:var(--gris);
}
.entry-content > * + *{margin-top:1.35em}

.entry-content p{text-wrap:pretty}
.entry-content strong,.entry-content b{color:var(--tinta);font-weight:650}
.entry-content em{font-style:italic}

.entry-content h2{
  font-size:clamp(24px,2.5vw,33px);line-height:1.2;letter-spacing:-.022em;
  font-weight:700;color:var(--tinta);
  margin-top:2.1em;margin-bottom:.55em;
}
.entry-content h3{
  font-size:clamp(19px,1.8vw,23px);line-height:1.3;letter-spacing:-.015em;
  font-weight:650;color:var(--tinta);
  margin-top:1.9em;margin-bottom:.45em;
}
.entry-content h4{font-size:18px;font-weight:650;color:var(--tinta);margin-top:1.7em;margin-bottom:.4em}
/* Más aire arriba de un título que abajo: agrupa el título con su texto */
.entry-content h2 + *,.entry-content h3 + *,.entry-content h4 + *{margin-top:0}

.entry-content a:not(.btn){
  color:var(--tinta);font-weight:550;
  text-decoration:underline;text-decoration-color:var(--naranja);
  text-decoration-thickness:1.5px;text-underline-offset:3.5px;
  transition:color var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .entry-content a:not(.btn):hover{color:var(--naranja-texto)}
}

.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li{margin-block:.5em}
.entry-content li::marker{color:var(--naranja)}
.entry-content ul ul,.entry-content ol ol{margin-top:.5em}

.entry-content blockquote,
.entry-content .wp-block-quote{
  border-left:2px solid var(--naranja);
  padding-left:clamp(18px,2.4vw,30px);
  margin-block:2em;
  font-size:clamp(19px,1.8vw,24px);line-height:1.45;
  color:var(--tinta);font-weight:500;
}
.entry-content blockquote cite,
.entry-content .wp-block-quote cite{
  display:block;margin-top:14px;
  font-family:var(--cuerpo);
  font-size:11.5px;letter-spacing:.09em;color:var(--gris-suave);font-style:normal;font-weight:400;
}

.entry-content figure,
.entry-content .wp-block-image{margin-block:2em}
.entry-content img{border-radius:var(--radio);width:100%}

.entry-content hr,
.entry-content .wp-block-separator{
  border:0;height:1px;background:var(--linea);margin-block:2.6em;
}

/* Tablas: con desborde propio, para que la página nunca scrollee de lado */
.entry-content .wp-block-table,
.entry-content figure.tabla{overflow-x:auto;margin-block:2em}
.entry-content table{
  width:100%;border-collapse:collapse;font-size:15.5px;
  font-variant-numeric:tabular-nums;
}
.entry-content th,.entry-content td{
  padding:12px 14px;text-align:left;border-bottom:1px solid var(--linea);
}
.entry-content th{
  font-weight:650;color:var(--tinta);
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  font-family:var(--cuerpo);
}

.entry-content code{
  font-family:var(--cuerpo);font-size:.88em;
  background:var(--tinte);padding:.16em .4em;border-radius:var(--radio-xs);color:var(--tinta);
}
.entry-content pre{
  background:var(--tinte);border:1px solid var(--linea);border-radius:var(--radio-chico);
  padding:18px;overflow-x:auto;font-size:14px;line-height:1.6;
}
.entry-content pre code{background:none;padding:0}

/* Bloques de WordPress que el editor puede insertar sin saberlo */
.entry-content .wp-block-button__link{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--naranja);color:var(--tinta);
  font-weight:650;font-size:15px;text-decoration:none;
  padding:13px 24px;border-radius:var(--radio-chico);
  transition:background-color var(--t-toque) var(--sal),transform var(--t-toque) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .entry-content .wp-block-button__link:hover{background:var(--naranja-hover);transform:translateY(-2px)}
}
.entry-content .wp-block-pullquote{
  border-block:2px solid var(--naranja);padding-block:1.4em;margin-block:2.4em;text-align:center;
}
.entry-content .wp-block-embed,
.entry-content .wp-block-embed__wrapper{margin-block:2em}
.entry-content .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radio)}
.entry-content .alignwide{max-width:min(1060px,92vw);margin-inline:auto}
.entry-content .alignfull{max-width:none;width:100vw;margin-inline:calc(50% - 50vw)}
.entry-content .alignleft{float:left;margin:.4em 1.6em 1em 0;max-width:44%}
.entry-content .alignright{float:right;margin:.4em 0 1em 1.6em;max-width:44%}
.entry-content .aligncenter{margin-inline:auto}
@media (max-width:640px){
  .entry-content .alignleft,.entry-content .alignright{float:none;max-width:100%;margin-inline:0}
}

/* ── Pie del artículo ── */
.articulo-pie{max-width:68ch;margin:clamp(48px,6vw,80px) auto 0;padding-top:32px;border-top:1px solid var(--linea)}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.etiquetas a{
  display:inline-block;text-decoration:none;
  font-family:var(--cuerpo);
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);
  border:1px solid var(--linea);border-radius:var(--radio-s);padding:6px 13px;
  transition:border-color var(--t-ui) var(--sal),color var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .etiquetas a:hover{border-color:var(--naranja);color:var(--naranja-texto)}
}

/* Navegación entre entradas — WP: the_post_navigation() */
.post-navigation{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--linea);border-block:1px solid var(--linea);
  margin-top:clamp(48px,6vw,80px);
}
.post-navigation .nav-previous a,
.post-navigation .nav-next a{
  display:flex;flex-direction:column;gap:7px;height:100%;
  background:var(--blanco);padding:26px clamp(20px,2.4vw,30px);
  text-decoration:none;color:var(--tinta);
  transition:background-color var(--t-ui) var(--sal);
}
.post-navigation .nav-next a{text-align:right;align-items:flex-end}
@media (hover:hover) and (pointer:fine){
  .post-navigation a:hover{background:var(--tinte)}
}
.post-navigation .dir{
  font-family:var(--cuerpo);
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--naranja-texto);
}
.post-navigation .tit{font-size:17px;font-weight:600;line-height:1.32;letter-spacing:-.012em}

/* ── Piso legible en celular ──
   Los rótulos del blog van entre 10 y 11.5 px: en un monitor son un
   detalle tipográfico, en un teléfono no se leen. 12.5 es el piso
   donde una versalita con entreletra abierta todavía se distingue. */
@media (max-width:900px){
  .miga,.eyebrow,.tarjeta .meta,.entry-meta,.pie-nota,
  .articulo-cab .entry-meta,.chip,.autor,.lectura,.sep,.etiqueta,
  .cat-etiqueta,.nota-pie,.cred,
  .etiquetas a,.post-navigation .dir{
    font-size:12.5px;
  }
  /* Las etiquetas son enlaces: además de leerse, hay que poder
     tocarlas sin acertarle a la de al lado. */
  .etiquetas{gap:10px}
  .etiquetas a{padding-block:9px}
  .miga a{display:inline-block;padding-block:9px}
}


/* ── La cabecera del blog sobre navy ──
   Desde que todas las páginas abren con una banda navy, las clases
   del blog —que están escritas para fondo blanco— quedaban en gris
   sobre azul. El sitio ya tiene una familia `.s-navy` para esto;
   acá se le suman los nombres que usa WordPress. */
.s-navy .entry-summary,
.s-navy .archive-description{color:var(--sobre-navy)}
.s-navy .entry-title,
.s-navy .archive-title{color:var(--blanco)}
.s-navy .cat-etiqueta{color:var(--naranja-claro)}   /* 5.1:1 sobre navy */
.s-navy .entry-meta,
.s-navy .entry-meta a,
.s-navy .entry-date{color:var(--navy-claro)}        /* 6.1:1 sobre navy */
.s-navy .entry-meta::before,
.s-navy .articulo-cab .entry-meta{border-top-color:rgba(255,255,255,.18)}
.s-navy .miga,.s-navy .miga a{color:var(--navy-claro)}