/* chk-blog-tipos-20261009.css · /blog/ (índice de entradas, plantilla «Inicio del blog» = twentytwentyfour//home)
   Sistema tipográfico «S5» (aprobado 2026-10-08/09), igual que Inicio y Sobre mí.
   Necesita /wp-content/uploads/chk/fonts/chk-fuentes.css (Big Shoulders, Martian Mono, Beth Ellen).
   Big Shoulders = títulos en MAYÚSCULAS (lima sobre azul) · Martian Mono = fecha y botón «Leer más»
   DM Sans se queda en los resúmenes. Menús sin cambios. Beth Ellen: no se usa aquí (máx. 1 palabra decorativa por página).
   Solo colores de marca. Esquinas 2px. Sin subrayados.
   Se carga DESPUÉS de blog-papel-revista.css (no lo reemplaza ni lo modifica). Solo afecta body.blog. */
:root{--s5-blue:#193cff;--s5-navy:#0b1a7a;--s5-off:#f9f9f9;--s5-coral:#ff8566;--s5-lime:#d6ff3a;
  --s5-title:"Big Shoulders","Arial Narrow",sans-serif;--s5-mono:"Martian Mono",ui-monospace,monospace}

/* ---------- Ritmo de la lista ---------- */
html body.blog .wp-block-query .wp-block-post-template{padding-top:clamp(1.25rem,3vw,2.5rem)}
html body.blog .wp-block-post-template>.wp-block-post{margin-block-start:0;padding-block:0 clamp(1.6rem,3.5vw,2.4rem)}
html body.blog .wp-block-post-template>.wp-block-post+.wp-block-post{padding-top:clamp(2.4rem,5vw,3.6rem);border-top:2px solid var(--s5-navy)}

/* ---------- Imagen = enlace a la entrada (el bloque ya trae isLink:true) ---------- */
/* Quita el velo negro al 60 % (dimRatio:60 de la plantilla): hacía que la foto se viera apagada y «muerta». */
html body.blog .wp-block-post .wp-block-post-featured-image{overflow:hidden;border-radius:2px;background:var(--s5-navy)}
html body.blog .wp-block-post .wp-block-post-featured-image>a{display:block;position:relative;text-decoration:none!important;border:0!important;cursor:pointer;outline:none}
html body.blog .wp-block-post .wp-block-post-featured-image img{display:block;transition:transform .35s ease,filter .35s ease}
html body.blog .wp-block-post .wp-block-post-featured-image .wp-block-post-featured-image__overlay{
  opacity:0!important;background:var(--s5-navy)!important;transition:opacity .25s ease;pointer-events:none}
/* Al pasar el mouse / con teclado: acercamiento suave + marco lima por dentro + velo navy leve. Sin subrayado. */
html body.blog .wp-block-post .wp-block-post-featured-image>a::after{
  content:"";position:absolute;inset:0;border:4px solid var(--s5-lime);border-radius:2px;opacity:0;transition:opacity .2s ease;pointer-events:none}
html body.blog .wp-block-post .wp-block-post-featured-image>a:is(:hover,:focus-visible) img{transform:scale(1.035)}
html body.blog .wp-block-post .wp-block-post-featured-image>a:is(:hover,:focus-visible) .wp-block-post-featured-image__overlay{opacity:.18!important}
html body.blog .wp-block-post .wp-block-post-featured-image>a:is(:hover,:focus-visible)::after{opacity:1}
/* y el título de esa entrada se ilumina a la vez: se lee como una sola tarjeta */
html body.blog .wp-block-post:has(.wp-block-post-featured-image>a:is(:hover,:focus-visible)) .wp-block-post-title a{color:var(--s5-off)!important}

/* ---------- Título (Big Shoulders, lima sobre azul) ---------- */
html body.blog .wp-block-post .wp-block-post-title{
  font-family:var(--s5-title)!important;font-weight:800;font-optical-sizing:auto;text-transform:uppercase;
  font-size:clamp(2rem,2.9vw,2.65rem)!important;line-height:.95!important;letter-spacing:.01em!important;
  margin:.15em 0 0!important;text-wrap:balance}
html body.blog .wp-block-post .wp-block-post-title a,
html body.blog .wp-block-post .wp-block-post-title a:is(:hover,:focus,:visited){
  color:var(--s5-lime)!important;text-decoration:none!important;opacity:1!important}
html body.blog .wp-block-post .wp-block-post-title a:is(:hover,:focus-visible){color:var(--s5-off)!important}
html body.blog .wp-block-post .wp-block-post-title a:focus-visible,
html body.blog .wp-block-post .wp-block-post-excerpt__more-link:focus-visible{outline:2px solid var(--s5-lime);outline-offset:3px;border-radius:2px}

/* ---------- Resumen (DM Sans) ---------- */
html body.blog .wp-block-post .wp-block-post-excerpt{margin-top:.9rem}
html body.blog .wp-block-post .wp-block-post-excerpt__excerpt{color:var(--s5-off);font-size:1.05rem;line-height:1.55;margin:0}

/* ---------- «Leer más» = botón Martian Mono (navy + lima) ---------- */
html body.blog .wp-block-post .wp-block-post-excerpt__more-text{margin:1.1rem 0 0}
html body.blog .wp-block-post .wp-block-post-excerpt__more-link{
  display:inline-flex;align-items:center;gap:.55em;min-height:40px;padding:0 14px;
  background:var(--s5-navy);color:var(--s5-lime)!important;border-radius:2px;
  font-family:var(--s5-mono)!important;font-stretch:87.5%;font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;line-height:1;
  text-decoration:none!important;transition:background-color .15s ease,color .15s ease}
html body.blog .wp-block-post .wp-block-post-excerpt__more-link::after{content:"→";font-family:var(--s5-mono);font-weight:500}
html body.blog .wp-block-post .wp-block-post-excerpt__more-link:is(:hover,:focus-visible){background:var(--s5-lime);color:var(--s5-navy)!important;text-decoration:none!important}

/* ---------- Fecha (Martian Mono, etiqueta) ---------- */
/* antes: coral #ff8566 sobre azul = 2.8:1 a 14px (no llegaba a 4.5:1); ahora blanco roto */
html body.blog .wp-block-post .wp-block-post-date{margin-top:1rem!important;color:var(--s5-off)!important}
html body.blog .wp-block-post .wp-block-post-date time{
  font-family:var(--s5-mono)!important;font-stretch:87.5%;font-weight:500;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--s5-off)!important}

@media (max-width:700px){
  html body.blog .wp-block-post .wp-block-post-title{font-size:clamp(1.85rem,8.6vw,2.2rem)!important;line-height:.96!important}
  html body.blog .wp-block-post .wp-block-post-excerpt__excerpt{font-size:1rem}
  html body.blog .wp-block-post .wp-block-post-excerpt__more-link{min-height:44px;font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
  html body.blog .wp-block-post .wp-block-post-featured-image img{transition:none}
  html body.blog .wp-block-post .wp-block-post-featured-image>a:is(:hover,:focus-visible) img{transform:none}
}