/*
Theme Name: MiHispano+
Theme URI: https://mihispano.gt
Author: Resolute AdTech Enterprises LLC
Author URI: https://resoluteadtech.com
Description: Molde MiHispano+ (broadsheet moderno) — child de Resolute Base. Config por
  país en wp_options (mh_cc/mh_pais/...), cero hardcode de país en el CSS/PHP.
Template: resolute-base
Version: 2.0.0
License: Proprietary
Text Domain: resolute-mihispano

ORDEN ÚNICA MiHispano+ (GO Hugo, 20-ago-2026): reescritura completa de la carcasa visual.
La capa de datos (CPT mh_link_card, mh_section_cards(), mh_hub_card(), mh_tools()) NO se
toca — este fichero solo re-viste esas mismas clases y añade las nuevas de la anatomía.
*/

/* ============================================================
   TOKENS — literales de la orden, ningún valor de país aquí.
   ============================================================ */
:root{
  --tinta:#0F1226; --velo:#3A3F55; --gris:#787D8E;
  --oro:#C9A017;   --bronce:#9A7610; --rojo:#C1281C;
  --verde:#1B7A4B;
  --papel:#FBFAF8; --hueso:#F3F0EA; --linea:#E3DFD6; --linea2:#CFCABE;

  --f-display:'Fraunces', Georgia, serif;
  --f-text:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:'JetBrains Mono', 'Courier New', monospace;

  /* compat con el padre resolute-base (algunas reglas heredadas los leen) */
  --rs-primary: var(--tinta);
  --rs-accent:  var(--oro);
  --rs-dark:    var(--tinta);
  --rs-text:    var(--tinta);
  --rs-bg:      var(--papel);
  --rs-font:    var(--f-text);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.mh-scope{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--f-text); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mh-scope img{max-width:100%; height:auto; display:block}
.mh-scope a{color:inherit; text-decoration:none}
.mh-scope h1,.mh-scope h2,.mh-scope h3{font-family:var(--f-display); font-weight:700; margin:0; color:var(--tinta)}
.mh-wrap{max-width:1180px; margin:0 auto; padding:0 20px}

/* Nunca texto justificado, nunca capitulares, nunca textura de fondo — literal de la orden. */
.mh-scope p{text-align:left}

/* ============================================================
   1. CINTILLO DE EDICIÓN
   ============================================================ */
.mh-cintillo{background:var(--tinta); color:var(--hueso); font-family:var(--f-mono); font-size:12px; padding:7px 0}
.mh-cintillo .mh-wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.mh-cintillo-edicion{letter-spacing:.04em; opacity:.85}
.mh-cintillo-live{display:flex; align-items:center; gap:6px; color:var(--oro)}
.mh-live-dot{width:7px; height:7px; border-radius:50%; background:var(--rojo); animation:mh-pulse 1.8s ease-in-out infinite}
@keyframes mh-pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(1.3)}}

/* ============================================================
   2. CABECERA centrada
   ============================================================ */
.mh-cabecera{padding:28px 0 18px; text-align:center; border-bottom:1px solid var(--linea)}
.mh-wordmark{
  font-family:var(--f-display); font-optical-sizing:auto; font-variation-settings:'opsz' 144;
  font-weight:700; font-size:clamp(34px,5vw,54px); letter-spacing:-.01em; color:var(--tinta);
  display:inline-flex; align-items:baseline; gap:2px; text-decoration:none;
}
.mh-wordmark .mh-plus{font-family:var(--f-text); font-weight:800; color:var(--oro); font-size:.62em; margin-left:.06em}
.mh-wordmark .mh-cc{font-family:var(--f-text); font-weight:700; color:var(--bronce); font-size:.28em; align-self:flex-start; margin-left:.3em; letter-spacing:.06em}
/* ORDEN 3 MiHispano+ GT, P2: ".mh-scope p{text-align:left}" (línea 53) tiene
   más especificidad (clase+tag) que ".mh-lema" sola (clase), así que ganaba
   el empate pese al orden de cascada -- confirmado por computed style real
   (Playwright): text-align resolvía "left" aunque esta regla decía "center".
   Se sube la especificidad calificando con el padre en vez de tocar la
   regla general (esa sigue aplicando al resto de párrafos del sitio, que es
   la intención literal de la orden original: "nunca texto justificado"). */
.mh-cabecera .mh-lema{font-family:var(--f-text); font-size:14.5px; color:var(--velo); margin-top:8px; text-align:center}

/* P2 -- selector de edición (details/summary nativo, sin JS) */
.mh-ediciones{margin-top:12px; display:inline-block; text-align:left; position:relative}
.mh-ediciones summary{list-style:none; cursor:pointer; font-family:var(--f-mono); font-size:11.5px; color:var(--bronce); letter-spacing:.03em; padding:6px 12px; border:1px solid var(--linea2); border-radius:30px}
.mh-ediciones summary::-webkit-details-marker{display:none}
.mh-ediciones[open] summary{border-color:var(--oro)}
.mh-ediciones-list{margin-top:8px; display:flex; flex-direction:column; gap:2px; background:var(--papel); border:1px solid var(--linea2); border-radius:8px; padding:6px; position:absolute; z-index:5; box-shadow:0 8px 20px rgba(0,0,0,.08)}
.mh-edicion-item{display:block; padding:8px 12px; font-size:13px; border-radius:5px; color:var(--tinta)}
.mh-edicion-item:hover{background:var(--hueso)}
.mh-edicion-item.is-active{font-weight:700; color:var(--oro-oscuro,var(--bronce))}
.mh-edicion-item--pronto{color:var(--gris); cursor:default}
.mh-edicion-item--pronto em{font-style:normal; font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; margin-left:6px; color:var(--linea2)}

/* ============================================================
   3. FRANJA DE DATOS — deslizable, cifras en mono. Un módulo sin
      dato cableado no se imprime (ver mh_render_data_strip() en
      functions.php); si NINGUNO tiene dato, la sección entera no
      se imprime -- nunca una franja vacía ocupando alto.
   ============================================================ */
.mh-datastrip{background:var(--hueso); border-bottom:1px solid var(--linea); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.mh-datastrip::-webkit-scrollbar{display:none}
.mh-datastrip-inner{display:flex; gap:26px; padding:10px 20px; width:max-content; min-width:100%}
.mh-data-item{display:flex; align-items:baseline; gap:6px; font-size:13px; white-space:nowrap}
.mh-data-lbl{color:var(--gris); text-transform:uppercase; letter-spacing:.05em; font-size:11px}
.mh-data-val{font-family:var(--f-mono); font-weight:700; color:var(--tinta)}

/* ============================================================
   4. ÍNDICE DE SECCIONES — deslizable, subrayado activo, degradado
      a la derecha en móvil.
   ============================================================ */
.mh-indice{background:var(--papel); border-bottom:1px solid var(--linea2); position:relative}
.mh-indice-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.mh-indice-scroll::-webkit-scrollbar{display:none}
.mh-indice-list{display:flex; gap:26px; padding:0 20px; width:max-content; min-width:100%}
.mh-indice-list a{
  font-family:var(--f-text); font-weight:600; font-size:14px; color:var(--velo);
  padding:13px 0; border-bottom:2.5px solid transparent; white-space:nowrap; min-height:48px; display:flex; align-items:center;
}
.mh-indice-list a:hover,.mh-indice-list a.is-active{color:var(--tinta); border-bottom-color:var(--oro)}
.mh-indice-fade{position:absolute; top:0; right:0; bottom:0; width:36px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--papel)); display:none}
@media(max-width:900px){ .mh-indice-fade{display:block} }

/* Cabecera compacta al bajar (sticky, desenfoque, tipo de cambio siempre visible) */
.mh-sticky{
  position:fixed; top:0; left:0; right:0; z-index:60; transform:translateY(-100%);
  transition:transform .22s ease; background:rgba(251,250,248,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea2);
}
.mh-sticky.is-visible{transform:translateY(0)}
/* ORDEN 15 MiHispano+ GT, Fase 1 (24-ago-2026): consolidada -- interiores.css
   sumaba gap:10px encima de esta misma regla (pisando el gap:16px de
   aquí). Se incorpora el valor que de verdad se ve hoy, se retira de
   interiores.css. */
.mh-sticky-inner{max-width:1180px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.mh-sticky-brand{font-family:var(--f-display); font-weight:700; font-size:19px; display:flex; align-items:baseline; gap:2px; flex:0 0 auto}
.mh-sticky-brand .mh-plus{font-family:var(--f-text); font-weight:800; color:var(--oro); font-size:.6em}
.mh-sticky-fx{font-family:var(--f-mono); font-size:13px; color:var(--velo); white-space:nowrap; flex:0 0 auto}
/* ORDEN 15 MiHispano+ GT, Fase 1: interiores.css repetía flex:1 1 auto
   con el mismo valor -- puramente redundante, retirado de allí. */
.mh-sticky-nav{display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; padding:0 16px}
.mh-sticky-nav::-webkit-scrollbar{display:none}
.mh-sticky-nav a{font-family:var(--f-text); font-size:13px; font-weight:600; color:var(--velo); white-space:nowrap}
.mh-sticky-nav a:hover{color:var(--bronce)}
@media(max-width:700px){.mh-sticky-nav{display:none}}

/* ============================================================
   5. LA PRIMERA — 3 columnas con filete vertical.
   ============================================================ */
.mh-primera{padding:26px 0}
.mh-primera-grid{display:grid; grid-template-columns:1fr 1.7fr 1fr; gap:0}
/* ORDEN 3 MiHispano+ GT, P0-2: cuando "Lo que hay que saber" no llega al
   mínimo de 3 y no se renderiza, la rejilla pasa a 2 columnas (lead/rail)
   en vez de dejar la 1fr pensada para el digest vacía. */
.mh-primera-grid--nodigest{grid-template-columns:1.7fr 1fr}
/* ORDEN 4 MiHispano+ GT, Fase 2.2 (22-ago-2026): mismo blindaje para cuando
   el rail de vecinos no llega a 2 filas y no se renderiza -- digest/lead se
   reparten las 3 columnas entre las 2 que quedan. Si tampoco hay digest,
   queda solo el lead a ancho completo. */
.mh-primera-grid--norail{grid-template-columns:1fr 1.7fr}
.mh-primera-grid--nodigest.mh-primera-grid--norail{grid-template-columns:1fr}
.mh-entradilla{font-family:var(--f-text); font-size:18.5px; line-height:1.5; color:var(--velo); margin:10px 0 0}
.mh-primera-col{padding:0 26px; position:relative}
.mh-primera-col + .mh-primera-col{border-left:1px solid var(--linea2)}
.mh-primera-col:first-child{padding-left:0}
.mh-primera-col:last-child{padding-right:0}
.mh-digest-title{font-family:var(--f-text); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--bronce); margin-bottom:14px}
.mh-digest-list{list-style:none; margin:0; padding:0; counter-reset:mh-digest}
.mh-digest-list li{counter-increment:mh-digest; display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--linea)}
.mh-digest-list li:last-child{border-bottom:0}
.mh-digest-list li::before{
  content:counter(mh-digest); font-family:var(--f-mono); font-weight:700; color:var(--oro); font-size:13px; flex:0 0 auto; min-width:16px;
}
.mh-digest-list a{font-size:14.5px; line-height:1.35; font-weight:600; color:var(--tinta)}
.mh-digest-list a:hover{color:var(--bronce)}

/* ORDEN 2 MiHispano+ GT, Fase 6.1: antetítulo rojo de sección, encima del
   titular -- distinto del badge blanco que iba sobre la foto (retirado). */
.mh-antetitulo{display:flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--rojo); margin-bottom:8px}
.mh-antetitulo-cuadro{width:9px; height:9px; background:var(--rojo); flex:0 0 auto}
.mh-piedefoto{font-family:var(--f-text); font-size:12px; color:var(--gris); margin:6px 0 0; font-style:italic}
.mh-lead h1{font-size:clamp(26px,3vw,38px); line-height:1.12; margin:14px 0 10px}
.mh-lead h1 a{color:var(--tinta)}
.mh-lead h1 a:hover{color:var(--bronce)}
.mh-lead p{font-family:var(--f-text); font-size:17.5px; color:var(--velo); line-height:1.5; margin:0 0 10px}
.mh-by{font-family:var(--f-text); font-size:12.5px; color:var(--gris); text-transform:uppercase; letter-spacing:.03em}

/* Fase 6.2 -- dos piezas secundarias bajo la foto principal */
.mh-secundarias{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; padding-top:18px; border-top:1px solid var(--linea)}
.mh-secundaria-canal{font-family:var(--f-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--oro); margin-bottom:4px}
.mh-secundaria h3{font-size:15.5px; line-height:1.3; margin:0 0 6px}
.mh-secundaria h3 a{color:var(--tinta)}
.mh-secundaria h3 a:hover{color:var(--bronce)}
.mh-secundaria p{font-family:var(--f-text); font-size:13.5px; color:var(--velo); line-height:1.45; margin:0}
@media(max-width:520px){.mh-secundarias{grid-template-columns:1fr}}

/* Fase 6.4 -- "La región hoy": bandera circular + etiqueta de país en oro */
.mh-vecino{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--linea); align-items:center; min-height:48px}
.mh-vecino:last-of-type{border-bottom:0}
.mh-vecino-flag{width:38px; height:38px; flex:0 0 auto; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--linea2)}
.mh-vecino-flag svg{width:100%; height:100%; display:block}
.mh-vecino-pais{font-family:var(--f-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--oro); margin-bottom:2px}
.mh-vecino h3{font-size:14.5px; line-height:1.3; font-weight:600; color:var(--tinta)}
.mh-vecino:hover h3{color:var(--bronce)}
.mh-empty--vecinos{padding:16px; font-size:13px}
.mh-vecinos-nota{font-family:var(--f-text); font-size:11.5px; color:var(--gris); font-style:italic; margin:10px 0 0}
.mh-dosorillas{background:var(--hueso); border-radius:6px; padding:12px 14px; margin-top:12px; font-size:12.5px; color:var(--velo); line-height:1.45}
.mh-dosorillas strong{color:var(--tinta); font-family:var(--f-display); font-style:italic}

/* ORDEN 15 MiHispano+ GT, Fase 1 (24-ago-2026): consolidada -- vivía
   también en interiores.css con margin:0 en vez de margin-bottom:12px.
   La de interiores.css cargaba después y ganaba siempre (comprobado en
   las 4 instancias reales, las 4 mostraban margin:0) -- este margin-bottom
   estaba muerto al 100%. Se deja el valor que de verdad se ve hoy. */
.mh-rail-title{font-family:var(--f-display); font-style:italic; font-weight:700; font-size:17px; margin:0}
.mh-railitem{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--linea); min-height:48px; align-items:center}
.mh-railitem:last-child{border-bottom:0}
.mh-railitem .mh-imgbox{width:64px; height:64px; flex:0 0 auto; border-radius:4px; overflow:hidden}
.mh-railitem h3{font-size:14.5px; line-height:1.3; font-weight:600}
.mh-railitem:hover h3{color:var(--bronce)}
.mh-eyebrow{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--bronce); margin-bottom:2px}
.mh-meta{font-size:12px; color:var(--gris); margin-top:2px; font-family:var(--f-mono)}

.mh-img.mh-imgbox{position:relative; background:var(--hueso); border-radius:4px; overflow:hidden}
.mh-cover{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10}
.mh-imgbox.mh-ph{aspect-ratio:16/10; background:linear-gradient(135deg,var(--hueso),var(--linea))}
.mh-badge{position:absolute; top:8px; left:8px; background:var(--tinta); color:var(--hueso); font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:2px}

/* ============================================================
   RED DE SEGURIDAD SIN FOTO (ORDEN 2 MiHispano+ GT, Fase 2.3):
   nunca una caja de imagen vacía -- si no hay _mh_source_image /
   thumbnail, la pieza pasa a formato de texto: titular grande sobre
   fondo hueso, sin marco de imagen. El PHP ya no imprime .mh-imgbox
   en absoluto en este caso; estas reglas solo visten el contenedor.
   ============================================================ */
.mh-lead.mh-lead--sinfoto{background:var(--hueso); border-radius:6px; padding:22px 24px}
.mh-lead.mh-lead--sinfoto h1{font-size:clamp(30px,3.6vw,44px)}
.mh-lead.mh-lead--sinfoto .mh-eyebrow{margin-bottom:8px}
.mh-railitem.mh-railitem--sinfoto{padding-left:0}
.mh-railitem.mh-railitem--sinfoto h3{font-size:16px}
.mh-card.mh-card--sinfoto{background:var(--hueso); border-radius:4px; padding:18px}
.mh-card.mh-card--sinfoto h3{font-size:21px; line-height:1.28; margin-top:0}

@media(max-width:900px){
  .mh-primera-grid{grid-template-columns:1fr}
  .mh-primera-col{border-left:0 !important; padding:0 0 22px !important; border-bottom:1px solid var(--linea2); margin-bottom:22px}
  .mh-primera-col:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0 !important}
  /* la pieza principal va PRIMERA en móvil -- se reordena por CSS (mh-primera-col--lead) */
  .mh-primera-col--lead{order:1}
  .mh-primera-col--digest{order:2}
  .mh-primera-col--rail{order:3}
  .mh-primera-grid{display:flex; flex-direction:column}
}

/* ============================================================
   SLOTS (billboard/incontent/sponsor/marcas) — colapso-vacío real:
   sin relleno, mh_ad_slot() no imprime nada, ni caja ni borde
   (ver functions.php). Este wrapper solo aporta el ritmo vertical
   cuando SÍ hay contenido.
   ============================================================ */
.mh-slot-wrap{max-width:1180px; margin:24px auto; padding:0 20px}
.mh-slot-wrap:empty{display:none}
.mh-ad{position:relative}
.mh-ad-debug{position:absolute; top:-18px; left:0; font-family:var(--f-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--bronce); background:var(--hueso); padding:2px 6px; border-radius:3px; opacity:.85}

/* ============================================================
   7. LA TIRA — bloque maquetado, estado vacío honesto.
   ============================================================ */
.mh-tira{background:var(--hueso); border-top:1px solid var(--linea2); border-bottom:1px solid var(--linea2); padding:30px 0}
.mh-tira-inner{max-width:640px; margin:0 auto; text-align:center}
.mh-tira-k{font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--bronce); margin-bottom:10px}
.mh-tira h2{font-size:24px; margin-bottom:8px}
.mh-tira h2 a{color:var(--tinta)}
.mh-tira h2 a:hover{color:var(--rojo)}
.mh-tira p{color:var(--velo); font-size:15px}
.mh-tira-leer{display:inline-block; margin-top:10px; font-family:var(--f-mono); font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--bronce)}
.mh-tira-leer:hover{color:var(--rojo)}

/* ORDEN 5 MiHispano+ GT, Anexo A (22-ago-2026) -- La Tira, teaser con los
   4 personajes definitivos (estilo cerrado, tinta y sepia 1940). Copiado
   tal cual del Anexo A de la orden -- sustituye el CSS de siluetas
   genéricas de ORDEN 3 (.tira-teaser-* con guion, distinto de .tt-* de
   abajo -- no es un rename, es el bloque nuevo completo). */
.tira-teaser{border:1px solid var(--linea2); background:#DCC9A3; padding:0; overflow:hidden; margin-bottom:26px}
.tt-head{padding:22px 26px 16px; text-align:center; background:#D2BC93; border-bottom:2px solid #17140F}
.tt-k{font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#6B5836; margin-bottom:9px}
.tt-head h3{font-family:var(--f-display); font-size:clamp(25px,3.4vw,36px); font-weight:700; letter-spacing:-.03em; color:#17140F; line-height:1.06}
.tt-head h3 em{font-style:italic; color:#8A6A12}
.tt-head p{font-size:13.5px; color:#5C4C31; margin-top:9px; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.55}
.tt-reparto{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.tt-p{border-right:2px solid #17140F; padding:0; text-align:center; background:#DCC9A3}
.tt-p:last-child{border-right:0}
.tt-p svg{display:block; width:100%; height:auto}
.tt-p .nm{font-family:var(--f-display); font-size:19px; font-weight:700; letter-spacing:-.02em; color:#17140F; padding:12px 8px 3px}
.tt-p .rol{font-size:11.5px; color:#6B5836; padding:0 10px 16px; line-height:1.4}
.tt-pie{background:#17140F; color:#DCC9A3; padding:14px 26px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px}
.tt-pie b{color:#C9A017}
@media(max-width:760px){ .tt-reparto{grid-template-columns:1fr 1fr} .tt-p:nth-child(2){border-right:0} .tt-p:nth-child(1),.tt-p:nth-child(2){border-bottom:2px solid #17140F} }

/* ============================================================
   8. EL ALMANAQUE — herramientas + pasatiempos.
   ============================================================ */
.mh-almanaque{padding:30px 0}
.mh-almanaque-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px}
.mh-almanaque-head h2{font-size:24px}
.mh-almanaque-head h2 em{font-style:italic; color:var(--oro)}
.mh-almanaque-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.mh-toolcard{
  display:flex; flex-direction:column; gap:8px; background:var(--papel); border:1px solid var(--linea2);
  border-radius:6px; padding:14px 12px; min-height:48px; transition:border-color .15s, transform .15s;
}
.mh-toolcard:hover{border-color:var(--oro); transform:translateY(-2px)}
/* ORDEN 18 MiHispano+ GT (24-ago-2026): tarjeta sin destino todavía (Memes),
   mismo tratamiento que .mh-pt-card de Pasatiempos -- gris, sin hover de
   enlace porque no es un enlace. */
.mh-toolcard--pronto{cursor:default}
.mh-toolcard--pronto:hover{border-color:var(--linea2); transform:none}
.mh-toolcard--pronto .mh-tc-icon{color:var(--gris)}
/* Fase 6.5 -- iconos de trazo (SVG inline), no más fotos recortadas.
   ORDEN 3 MiHispano+ GT, P0-3: bajado de 30 a 24px (techo pedido por la
   orden, "22-24px, no a 120"). La causa real de que renderizara gigante
   era otra (ver mh_assets() en functions.php -- CSS legado en conflicto,
   ya desenganchado), no este valor, pero se ajusta igual al techo del mock. */
.mh-tc-icon{width:24px; height:24px; flex:0 0 auto; color:var(--bronce)}
.mh-tc-icon svg{width:100%; height:100%; display:block}
.mh-tc-label{font-weight:700; font-size:13.5px; display:block}
.mh-tc-desc{font-size:11.5px; color:var(--gris); display:block; margin-top:2px}
.mh-tc-dato{font-family:var(--f-mono); font-size:12px; font-weight:700; color:var(--oro); display:block; margin-top:6px}
.mh-pasatiempos{margin-top:18px; background:var(--hueso); border:1px dashed var(--linea2); border-radius:6px; padding:18px; text-align:center}
.mh-pasatiempos .mh-k{font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--bronce); margin-bottom:6px}
.mh-pasatiempos-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px}
.mh-pt-card{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--papel); border:1px solid var(--linea2); border-radius:6px; padding:16px 8px}
.mh-pt-card .mh-tc-icon{color:var(--gris)}
.mh-pt-label{font-weight:700; font-size:13px}
.mh-pt-estado{font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--gris)}
/* ORDEN 13 MiHispano+ GT, Fase 3 (24-ago-2026): variante para el único
   juego que ya está vivo (el crucigrama, desde la orden 12) -- el resto
   sigue con el tratamiento gris de "en construcción". */
.mh-pt-card--vivo{border-color:var(--oro); cursor:pointer}
.mh-pt-card--vivo:hover{border-color:var(--rojo)}
.mh-pt-card--vivo .mh-tc-icon{color:var(--rojo)}
.mh-pt-estado--vivo{color:var(--bronce); font-weight:700}
@media(max-width:520px){ .mh-pasatiempos-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:900px){ .mh-almanaque-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .mh-almanaque-grid{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   9. PLANAS DE SECCIÓN — mh-block/mh-sec-head/mh-cards/mh-card ya
      los usan mh_render_section_block()/mh_render_local_section_block();
      solo se re-visten con el molde nuevo, la lógica no se toca.
   ============================================================ */
.mh-block{padding:26px 0}
.mh-sec-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--tinta)}
.mh-sec-head h2{font-size:22px; font-style:italic}
.mh-sec-head h2 em{color:var(--oro); font-style:italic}
.mh-sec-head a{font-family:var(--f-text); font-size:13px; font-weight:700; color:var(--bronce)}
.mh-sec-head a:hover{color:var(--rojo)}
.mh-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.mh-card h3{font-size:17px; line-height:1.3; margin:10px 0 6px}
.mh-card:hover h3{color:var(--bronce)}
.mh-card p{font-size:14px; color:var(--velo); line-height:1.45; margin:0 0 8px}
.mh-empty{background:var(--hueso); border:1px dashed var(--linea2); border-radius:6px; padding:26px; text-align:center}
.mh-empty .mh-k{font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--bronce); margin-bottom:8px}
.mh-empty p{color:var(--velo); font-size:14px}
@media(max-width:900px){ .mh-cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .mh-cards{grid-template-columns:1fr} }

/* ============================================================
   10. BANDA DE MARCAS — fondo tinta, 5 posiciones (slots).
   ============================================================ */
.mh-marcas{background:var(--tinta); padding:22px 0}
.mh-marcas-k{font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--gris); text-align:center; margin-bottom:14px}
.mh-marcas-row{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.mh-marcas-row:empty{display:none}
.mh-marcas-row > *:empty{display:none}
@media(max-width:900px){ .mh-marcas-row{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   11. LO MÁS LEÍDO + PIE DE RED
   ============================================================ */
.mh-masleido{padding:26px 0}
.mh-most-read{display:grid; grid-template-columns:1fr 1fr; gap:0 32px}
.mh-most-read-item{display:flex; gap:12px; align-items:baseline; padding:11px 0; border-top:3px solid var(--tinta); border-bottom:1px solid var(--linea); min-height:48px}
.mh-most-read-item .num{font-family:var(--f-mono); font-weight:700; color:var(--rojo); font-size:15px; flex:0 0 auto}
.mh-most-read-item .head{font-family:var(--f-display); font-size:16px; font-weight:600; line-height:1.3}
.mh-most-read-item .head:hover{color:var(--bronce)}
@media(max-width:700px){ .mh-most-read{grid-template-columns:1fr} }

.mh-footer{background:var(--tinta); color:var(--hueso); padding:34px 0 18px; margin-top:10px}
.mh-fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:28px}
.mh-fbrand .mh-wm{font-family:var(--f-display); font-weight:700; font-size:22px; color:var(--papel); display:flex; align-items:baseline; gap:2px}
.mh-fbrand .mh-wm .mh-plus{font-family:var(--f-text); font-weight:800; color:var(--oro); font-size:.62em}
.mh-fbrand p{font-size:13px; color:var(--gris); margin-top:10px; line-height:1.5; max-width:320px}
.mh-fcol h5{font-family:var(--f-text); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--gris); margin-bottom:12px}
.mh-fcol a{display:block; font-size:13.5px; color:var(--hueso); opacity:.85; padding:6px 0; min-height:32px}
.mh-fcol a:hover{opacity:1; color:var(--oro)}
.mh-fbot{border-top:1px solid var(--velo); margin-top:26px; padding-top:16px; font-size:12px; color:var(--gris); text-align:center}
@media(max-width:900px){ .mh-fgrid{grid-template-columns:1fr 1fr; gap:22px} }
@media(max-width:520px){ .mh-fgrid{grid-template-columns:1fr} }

/* ============================================================
   CABECERA (header) — buscador, wordmark viejo del <a class="mh-brand">
   se retira (lo sustituye .mh-cabecera); se deja el selector por si
   algo residual del padre lo referencia, sin estilos que pinten nada.
   ============================================================ */
.mh-brand{display:none}

/* ============================================================
   MÓVIL — reglas obligatorias de la orden (380/390px)
   ============================================================ */
@media(max-width:600px){
  .mh-lead h1{font-size:34px}
  .mh-lead p{font-size:17.5px}
  .mh-sec-head h2{font-size:19px}
  .mh-card h3{font-size:16px}
  .mh-most-read-item .head, .mh-digest-list a, .mh-railitem h3{font-size:13.5px}
  .mh-wrap{padding:0 16px}
  /* Areas de toque de 48px, literal de la orden (movil) */
  .mh-indice-list a, .mh-railitem, .mh-most-read-item, .mh-toolcard{min-height:48px}
}

/* ============================================================
   ORDEN 18 MiHispano+ GT (24-ago-2026) — /astros/ como herramienta.
   ============================================================ */
.mh-astros-hero{padding:34px 0 18px; text-align:center}
.mh-astros-hero h1{font-size:28px; margin:6px 0}
.mh-astros-hero p{color:var(--gris); font-size:14px}
.mh-astros-signos{padding:10px 0 30px}
.mh-astros-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px}
.mh-astros-card{background:var(--papel); border:1px solid var(--linea2); border-radius:6px; overflow:hidden}
.mh-astros-card summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 12px; font-weight:700; -webkit-tap-highlight-color:transparent}
.mh-astros-card summary::-webkit-details-marker{display:none}
.mh-astros-card[open] summary{border-bottom:1px solid var(--linea2)}
.mh-astros-glifo{font-size:20px; color:var(--oro)}
.mh-astros-nombre{font-size:13.5px}
.mh-astros-lectura{padding:14px}
.mh-astros-lectura h3{font-size:14.5px; margin:0 0 8px}
.mh-astros-lectura p{font-size:13px; color:var(--velo); line-height:1.5; margin:0 0 8px}
.mh-astros-fecha{font-family:var(--f-mono); font-size:10.5px; color:var(--gris); text-transform:uppercase; letter-spacing:.04em}
.mh-astros-sin-datos{color:var(--gris); text-align:center; padding:20px 0}
.mh-astros-pagination{margin-top:18px}
@media(max-width:900px){ .mh-astros-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .mh-astros-grid{grid-template-columns:1fr} }