/* ============================================================
   MiHispano+ GT — interiores.css
   ORDEN 5 (GO Hugo, 22-ago-2026). Encolado DESPUÉS de style.css
   (dependencia explícita en functions.php::mh_assets()).
   Tokens de color/tipografía (--tinta, --rojo, --papel, --hueso,
   --linea, --linea2, --bronce, --oro, --f-display/--f-text/--f-mono)
   YA EXISTEN en :root de style.css con los mismos valores del mock —
   no se redefinen aquí (regla del Anexo B: no duplicar tokens).
   Piezas reutilizadas de portada (no se reescriben, solo se usan):
   .mh-antetitulo, .mh-piedefoto, .mh-by, .mh-entradilla, .mh-vecino,
   .mh-most-read-item, .mh-imgbox/.mh-cover/.mh-ph, .mh-wrap.
   Cero !important (regla de la orden: "nada de !important para
   ganarle al padre" — todo por especificidad bajo .mh-scope).
   ============================================================ */

/* ── mark: nunca amarillo de navegador (Fase 2, la regla que cierra
   el agujero). Tratamiento tipográfico propio: subrayado fino en oro,
   sin fondo -- se lee como énfasis editorial, no como highlighter. ── */
.mh-scope mark{background:none; color:inherit; box-shadow:inset 0 -3px 0 var(--oro)}
/* Dentro de .inf-dato-cifra el mark ya vive sobre texto grande en
   Fraunces -- el subrayado se aligera para no competir con la propia
   tipografía del dato. */
.inf-dato-cifra mark{box-shadow:inset 0 -2px 0 rgba(154,118,16,.55)}

/* ── migas de pan ── */
.mh-migas{font-size:11.5px; font-weight:600; color:var(--gris); padding:16px 0 0; display:flex; gap:7px; align-items:center; flex-wrap:wrap; font-family:var(--f-text)}
.mh-migas a{color:var(--gris)}
.mh-migas a:hover{color:var(--tinta)}
.mh-migas-sep{color:var(--linea2)}
.mh-migas-act{color:var(--rojo)}

/* ── variante oro del antetítulo (Buenas Noticias, igual que portada) ── */
.mh-antetitulo--oro{color:var(--bronce)}
.mh-antetitulo--oro .mh-antetitulo-cuadro{background:var(--oro)}

/* ============================================================
   ARTÍCULO — el papel, no la tarjeta (Fase 1)
   ============================================================ */
.mh-art-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:46px; padding:0 0 40px; align-items:start}
.mh-articulo{padding-top:0}

.mh-nota-head{padding:20px 0 0; max-width:780px}
.mh-nota-title{font-size:clamp(30px,4.3vw,46px); line-height:1.04; letter-spacing:-.028em; text-wrap:balance; color:var(--tinta)}
.mh-bajada{font-size:19px; max-width:680px}
.mh-firma{margin-top:18px; padding-top:13px; border-top:1px solid var(--linea); font-family:var(--f-mono); font-size:11px; font-weight:500; color:var(--bronce); letter-spacing:.01em}
.mh-firma-l1{display:flex; flex-wrap:wrap; align-items:center; gap:0}
.mh-firma-l1 span{padding-right:11px; margin-right:11px; border-right:1px solid var(--linea2)}
.mh-firma-l1 span:last-child{border-right:0; margin-right:0; padding-right:0}
.mh-firma-fte{display:block; color:var(--gris); margin-top:6px; text-transform:none; letter-spacing:0}
/* La fuente enlazada tiene que PARECER un enlace (VPS3, 7-sep-2026). El <a>
   heredaba el color de la firma y quedaba idéntico al texto de al lado: era
   clicable y no lo parecía, o sea inútil para comprobar nada. Subrayado
   discreto, y el color del cuerpo al pasar por encima. */
.mh-firma-fte-src{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color:var(--linea2)}
.mh-firma-fte-src:hover,.mh-firma-fte-src:focus-visible{color:var(--tinta); text-decoration-color:currentColor}

.mh-nota-figura{margin:24px 0 0; max-width:840px}
.mh-nota-figura .mh-imgbox{aspect-ratio:16/9}
.mh-pie-cred{font-family:var(--f-mono); font-size:10px; letter-spacing:.03em; color:var(--bronce); text-transform:uppercase; display:block; margin-top:4px; font-style:normal}

/* cuerpo: la medida manda -- 680px, no 788px de Inter a 17px */
.mh-cuerpo{max-width:680px; margin-top:26px; font-size:18px; line-height:1.7; color:var(--tinta); font-family:var(--f-text)}
.mh-cuerpo > * + *{margin-top:22px}
.mh-cuerpo p{font-size:18px; line-height:1.7; margin:0}
.mh-cuerpo a{color:var(--rojo); box-shadow:inset 0 -1px 0 rgba(193,40,28,.35)}
.mh-cuerpo a:hover{box-shadow:inset 0 -2px 0 var(--rojo)}
.mh-cuerpo h2{font-size:25px; line-height:1.18; margin-top:36px; padding-top:16px; border-top:1px solid var(--linea); letter-spacing:-.025em; color:var(--tinta)}
.mh-cuerpo h3{font-size:19px; line-height:1.25; margin-top:28px; color:var(--tinta)}
.mh-cuerpo h5{font-size:11px} /* fallback base; .blk h5 de abajo lo trata como antetítulo real */
.mh-cuerpo ul, .mh-cuerpo ol{padding-left:0; list-style:none; margin:0}
.mh-cuerpo li{position:relative; padding-left:19px; margin-top:11px; line-height:1.62}
.mh-cuerpo ul li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--oro)}
.mh-cuerpo ol{counter-reset:mh-n}
.mh-cuerpo ol li{counter-increment:mh-n}
.mh-cuerpo ol li::before{content:counter(mh-n); position:absolute; left:0; top:.05em; font-family:var(--f-mono); font-size:11px; font-weight:700; color:var(--rojo)}
.mh-cuerpo blockquote{border-left:3px solid var(--oro); padding:2px 0 2px 20px; font-family:var(--f-display); font-size:23px; line-height:1.3; font-style:italic; color:var(--tinta); margin:0}
.mh-cuerpo strong{color:var(--tinta)}

/* separador-compra (mamas.gt/mascota.gt) -- no está en el Anexo B, es
   vocabulario nuevo encontrado en la Fase 0 (ver DIAG_INTERIORES_GT.md).
   Un <hr> simple con el tratamiento tipográfico del sitio en vez del
   gris de navegador por defecto. */
.mh-cuerpo hr.separador-compra{border:0; border-top:1px solid var(--linea2); margin:30px 0 0}

/* ── el vocabulario de informate.gt, ya vestido (Fase 2) — selectores
   adaptados a los nombres REALES del HTML (ver DIAG_INTERIORES_GT.md,
   tabla de desajustes con el Anexo B): .inf-dato-label en vez de .rot
   anidado, .inf-dato-cifra es un <div> no un <span>, .inf-dato-contexto
   en vez de .ctx, el rótulo de .blk es un <h5> real no un <span>, y
   .inf-fuentes trae "Título — Medio" en un solo <a> (no se puede aislar
   "Medio" en su propio <span> sin reescribir el HTML del vertical --
   se estiliza el enlace completo). ── */
.inf-dato{background:var(--hueso); border-left:3px solid var(--rojo); padding:18px 22px 19px}
.inf-dato-label{font-family:var(--f-mono); font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--bronce); display:block; margin-bottom:9px}
.inf-dato-cifra{font-family:var(--f-display); font-size:27px; line-height:1.15; font-weight:700; letter-spacing:-.025em; margin-bottom:7px; text-wrap:balance; color:var(--tinta)}
.inf-dato-contexto{font-size:15.5px; line-height:1.55; color:var(--velo); margin:0}
.blk{padding-top:6px}
.blk h5{font-family:var(--f-mono); font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--bronce); margin:0 0 9px}
.blk ul, .blk p{margin-top:0}
.inf-sigue{border-top:1px solid var(--tinta); border-bottom:1px solid var(--linea); padding:14px 0; font-size:16px; line-height:1.5; font-weight:500; display:block}
.inf-sigue b{font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--rojo); margin-right:9px; display:inline}
.inf-fuentes{margin-top:34px; padding-top:15px; border-top:1px solid var(--linea)}
.inf-fuentes h5{margin-bottom:10px}
.inf-fuentes ul{margin-top:10px}
.inf-fuentes li{padding-left:0; margin-top:9px; font-size:13.5px; line-height:1.5; color:var(--velo)}
.inf-fuentes li::before{display:none}
.inf-fuentes li a{color:var(--velo); box-shadow:none; font-size:13.5px}
.inf-fuentes li a:hover{color:var(--rojo)}

/* ── notas sin clases (6 de 10 verticales -- sucesos.gt, horoscopo.gt,
   futbol.gt, farandula.gt, musica.com.gt, gaming.gt, recetas.gt): mismo
   aire que las estructuradas. h2 con filete fino, ul con topo cuadrado
   en oro -- ya cubierto arriba por las reglas generales de .mh-cuerpo
   h2/ul/li, que no dependen de ninguna clase del vertical. ── */

/* ── cierre de la nota ── */
.mh-nota-cierre{max-width:680px; margin-top:34px; border-top:1px solid var(--linea2); padding-top:16px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.mh-nota-cierre-met{font-size:11.5px; line-height:1.55; color:var(--gris); flex:1; min-width:220px; font-family:var(--f-text)}
.mh-comp{display:flex; gap:7px}
.mh-comp a{border:1px solid var(--linea2); border-radius:99px; padding:6px 13px; font-size:11.5px; font-weight:600; color:var(--velo); font-family:var(--f-text)}
.mh-comp a:hover{border-color:var(--tinta); color:var(--tinta)}
.mh-comp a.mh-comp-wa{border-color:var(--oro); color:var(--bronce)}

/* ============================================================
   RAIL (compartido artículo + plana)
   ============================================================ */
.mh-rail{display:flex; flex-direction:column; gap:30px}
.mh-rail-barra{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:11px; margin-bottom:15px; border-bottom:1px solid var(--tinta)}
.mh-rail-vertodo{font-size:11.5px; font-weight:600; color:var(--gris); white-space:nowrap; font-family:var(--f-text)}
.mh-rail-vertodo:hover{color:var(--rojo)}
.mh-rk-item{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--linea); align-items:flex-start}
.mh-rk-item:last-child{border-bottom:0}
.mh-rk-n{font-family:var(--f-mono); font-size:12px; font-weight:700; color:var(--rojo); flex-shrink:0; width:19px}
.mh-rk-t{font-family:var(--f-display); font-size:14.5px; line-height:1.24; font-weight:600; color:var(--tinta)}
.mh-rk-item:hover .mh-rk-t{color:var(--rojo)}

/* ── sigue leyendo ── */
.mh-sigue{border-top:2px solid var(--tinta); padding-top:20px; margin:40px 0}
.mh-sigue-barra{border-bottom:0; margin-bottom:0; padding-bottom:0}
.mh-sigue-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:16px}
.mh-sg .mh-sg-foto{aspect-ratio:16/10; margin-bottom:11px}
.mh-sg h3{font-size:17.5px; line-height:1.2; margin-top:11px; text-wrap:balance; color:var(--tinta)}
.mh-sg .mh-antetitulo{margin-top:11px; margin-bottom:6px}
.mh-sg--sinfoto .mh-antetitulo{margin-top:0}
.mh-sg-dt{font-family:var(--f-mono); font-size:10px; color:var(--gris); margin-top:7px; letter-spacing:.03em}
.mh-sg:hover h3{color:var(--rojo)}
@media(max-width:820px){
  .mh-sigue-grid{grid-template-columns:1fr}
  .mh-sg{display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:start; border-bottom:1px solid var(--linea); padding-bottom:16px}
  .mh-sg .mh-sg-foto{margin-bottom:0}
  .mh-sg h3{margin-top:0; font-size:16px}
}

/* ============================================================
   PLANA DE SECCIÓN (Fase 3)
   ============================================================ */
.mh-plana-head{padding:24px 0 18px; border-bottom:2px solid var(--tinta); display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
.mh-plana-title{font-size:clamp(32px,4.6vw,50px); letter-spacing:-.035em; line-height:1; color:var(--tinta); margin-top:6px}
.mh-plana-cont{font-family:var(--f-mono); font-size:11px; color:var(--bronce); white-space:nowrap; padding-bottom:5px}

.mh-apertura{display:grid; grid-template-columns:1.35fr 1fr; gap:34px; padding:26px 0; border-bottom:1px solid var(--linea2); align-items:start}
.mh-apertura h2{font-size:clamp(26px,3.4vw,36px); line-height:1.06; letter-spacing:-.03em; text-wrap:balance; color:var(--tinta); margin-top:6px}
.mh-apertura-bj{font-size:16.5px; line-height:1.55; color:var(--velo); margin-top:14px; font-family:var(--f-text)}
.mh-apertura-fm{font-family:var(--f-mono); font-size:10.5px; color:var(--gris); margin-top:14px; letter-spacing:.03em}
.mh-apertura:hover h2{color:var(--rojo)}
.mh-apertura .mh-imgbox{aspect-ratio:16/9}
.mh-apertura--sinfoto{grid-template-columns:1fr}

.mh-plana-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:46px; padding:0 0 34px; align-items:start}
.mh-plana-lista{display:grid; grid-template-columns:1fr 1fr; column-gap:0}
.mh-plana-lista > .mh-li:nth-child(odd){padding-right:30px}
.mh-plana-lista > .mh-li:nth-child(even){padding-left:30px; border-left:1px solid var(--linea)}
.mh-li{padding:20px 0; border-bottom:1px solid var(--linea); display:grid; grid-template-columns:1fr 104px; gap:16px; align-items:start}
.mh-li h3{font-size:18px; line-height:1.18; text-wrap:balance; color:var(--tinta)}
.mh-li-bj{font-size:14px; line-height:1.5; color:var(--gris); margin-top:8px; font-family:var(--f-text)}
.mh-li-fm{font-family:var(--f-mono); font-size:10px; color:var(--bronce); margin-top:9px; letter-spacing:.03em}
.mh-li-foto{aspect-ratio:1/1}
.mh-li:hover h3{color:var(--rojo)}
.mh-li--notxt{grid-template-columns:1fr}

.mh-pag{display:flex; gap:6px; align-items:center; justify-content:center; padding:28px 0 8px; flex-wrap:wrap}
.mh-pag .page-numbers{min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:12px; font-weight:700; color:var(--velo); border:1px solid var(--linea2); padding:0 9px}
.mh-pag .page-numbers.current{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}
.mh-pag .page-numbers:hover:not(.current){border-color:var(--tinta); color:var(--tinta)}
.mh-pag .page-numbers.dots{border:0}

/* ORDEN 15 MiHispano+ GT, Fase 1 (24-ago-2026): renombrada de .mh-empty
   a .mh-empty-seccion -- vivía con el mismo nombre que la de style.css
   (usada por front-page.php) y las dos se mezclaban propiedad por
   propiedad en pantalla, nunca diseñadas juntas a propósito. Esta regla
   consolidada es la UNIÓN exacta de lo que hoy se ve de verdad en
   archive.php (comprobado en el navegador en /humor/, categoría real
   vacía): fondo y borde punteado los ponía style.css sin querer,
   espaciado/color/ancho los ponía esta hoja -- el resultado en pantalla
   no cambia ni un píxel, solo deja de depender de un accidente de
   cascada entre dos hojas. */
.mh-empty-seccion{background:var(--hueso); border:1px dashed var(--linea2); border-radius:6px; max-width:680px; margin:30px auto; text-align:center; color:var(--gris); font-family:var(--f-text); padding:40px 0}

@media(max-width:1080px){
  .mh-art-grid, .mh-plana-grid{grid-template-columns:1fr; gap:34px}
  .mh-rail{flex-direction:row; flex-wrap:wrap; gap:30px}
  .mh-rail > *{flex:1; min-width:250px}
}
@media(max-width:820px){
  .mh-apertura{grid-template-columns:1fr; gap:18px}
  .mh-plana-lista{grid-template-columns:1fr}
  .mh-plana-lista > .mh-li:nth-child(odd), .mh-plana-lista > .mh-li:nth-child(even){padding-left:0; padding-right:0; border-left:0}
}
@media(max-width:560px){
  .mh-cuerpo, .mh-cuerpo p{font-size:17px}
  .mh-bajada{font-size:17px}
  .mh-li{grid-template-columns:1fr 80px}
  .mh-plana-head{align-items:flex-start}
  .mh-firma{font-size:10px}
  .mh-rail{flex-direction:column}
}

/* ============================================================
   SLOTS reetiquetados con nombres del hub (mismos slots reales,
   solo el contenedor visual dentro del papel -- no se toca AdSense)
   ============================================================ */
.mh-art-billboard.resolute-ad, .mh-plana-billboard.resolute-ad{margin:30px 0}

/* ============================================================
   STICKY ampliado (Fase 4) — los 11 enlaces + selector de edición.
   Base (.mh-sticky, .mh-sticky-inner, .mh-sticky-brand, .mh-sticky-nav)
   ya vive en style.css desde ORDEN 2; aquí solo lo que es nuevo.
   ============================================================ */
/* Fase 4: por debajo de 900px el nav se colapsa en la hamburguesa (antes
   desaparecía entero a los 700px sin alternativa) -- el selector de
   edición NUNCA se colapsa, se queda siempre visible.
   IMPORTANTE de orden en cascada: la regla base de .mh-sticky-burger va
   ANTES de la media query que la oculta en escritorio -- misma
   especificidad (0,1,0) en ambas, así que si la base fuera la última en
   el archivo ganaría el empate y el botón nunca se ocultaría a 1440px
   (bug real, detectado por render con Playwright, corregido antes de
   cerrar la fase). */
.mh-sticky-burger{display:inline-flex; flex-direction:column; gap:3.5px; background:none; border:0; cursor:pointer; padding:6px; flex:0 0 auto}
.mh-sticky-burger span{width:17px; height:1.7px; background:var(--tinta); display:block}
@media(min-width:901px){
  .mh-sticky-burger{display:none}
}
@media(max-width:900px){
  .mh-sticky-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--papel); border-bottom:1px solid var(--linea2);
    flex-direction:column; gap:0; padding:6px 20px 14px; overflow:visible;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
  }
  .mh-sticky-nav a{padding:10px 0; border-bottom:1px solid var(--linea); width:100%}
  .mh-sticky.is-menu-open .mh-sticky-nav{display:flex}
  .mh-sticky-burger{order:3}
}
.mh-ediciones--mini{margin-top:0; flex:0 0 auto; order:2}
.mh-ediciones--mini summary{font-size:11px; padding:5px 11px; display:inline-flex; align-items:center; gap:6px}
.mh-ediciones-mini-cc{font-family:var(--f-mono); font-size:9.5px; font-weight:700; color:var(--rojo)}

/* ============================================================
   ORDEN 13 MiHispano+ GT, Fase 2 (24-ago-2026) — gramática común que
   vivía duplicada en futbol.css Y secciones.css (misma regla, dos
   sitios): la barra de bloque con subtítulo/patrocinio (.bb) y los
   huecos de pauta reservados (.slot). Se mueve aquí, a la hoja que
   carga en TODO el sitio, y se retira de las dos hojas de sección —
   así la próxima sección que necesite una barra de bloque o un slot
   los hereda sin copiar nada. Unión de las dos versiones: futbol.css
   tenía `.bb .mas` y `.slot.footer`/`.slot.infeed` que secciones.css no
   tenía; secciones.css tenía la regla base `.slot{...}` (border/fondo)
   que a futbol.css le faltaba por completo — un bug latente invisible
   hasta hoy porque el `.resolute-ad` del padre compartido colapsa a
   transparente cualquier slot vacío (ver theme.css del padre, con
   !important, no tocado). Consolidado: nunca más ambas cosas a la vez.
   ============================================================ */
.bb{display:flex; align-items:baseline; gap:11px; padding-bottom:11px; margin:30px 0 15px; border-bottom:1px solid var(--tinta); flex-wrap:wrap}
.bb h2{font-size:17px; font-weight:700; letter-spacing:-.025em; line-height:1.15; color:var(--tinta)}
.bb .sub{font-family:var(--f-mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--rojo)}
.bb .mas{margin-left:auto; font-size:11.5px; font-weight:600; color:var(--gris); white-space:nowrap; font-family:var(--f-text)}
.bb .mas:hover{color:var(--rojo)}
.bb .patro{font-family:var(--f-mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); margin-left:auto; white-space:nowrap; border:1px dashed var(--linea2); padding:4px 9px}
.bb .patro b{color:var(--bronce)}
body.pauta .bb .patro{border-color:var(--rojo); border-style:solid; color:var(--rojo)}
body.pauta .bb .patro b{color:var(--rojo)}

.slot{border:1px solid var(--linea); background:var(--hueso); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--gris); position:relative; text-align:center}
.slot.roba{height:250px}
.slot.box{width:300px; height:250px; flex-shrink:0}
/* ORDEN PLANTILLA RECETA (25-ago-2026): el colapso-vacio del padre
   (.resolute-ad:not(:has(iframe)):not(:has(ins)), theme.css) solo pone a
   0 min-height/margin/padding/border -- nunca width/height. Un slot con
   clase .slot.box (usada por mh_secciones_ad_slot en las planas, ej.
   /cocina/) fija height:250px arriba y esa regla no la tocaba, asi que
   un slot vacio seguia ocupando 300x250 real: eso era el hueco blanco
   entre la entradilla y la primera fila de tarjetas. Especificidad mas
   alta que la regla de arriba (dos clases + dos :not), gana sin !important. */
.resolute-ad.slot.box:not(:has(iframe)):not(:has(ins)){width:0; height:0}
.slot.box .fmt{font-family:var(--f-mono); font-size:9px; letter-spacing:.09em; color:var(--linea2); text-transform:none; text-align:center; line-height:1.5}
.slot.billboard{height:110px; margin:26px 0}
.slot.halfpage{height:600px}
.slot.footer{height:110px; margin:8px 0 26px}
.slot.infeed{height:0; border:0; margin:0}