/*
 * GAD Luz de inspección: hub de ciudad (/region/{ciudad}/). Se encola solo con el hub activo (includes/hubs.php).
 * Listeo fija html{font-size:62.5%}: aquí nunca se usan rem, solo px y em.
 * Los tokens se redefinen en .gad-hub para que no dependan de luz.css (que define los mismos en body.gad-luz).
 * Tokens y botones: design/BRIEF.md.
 */
.gad-hub{
  --piano:#000; --porcelana:#F4F5F3; --blanco:#fff;
  --grafito:#2A2E33; --grafito-2:#5B636B; --linea:#D8DCDC;
  --ceramico:#8FB3C4; --ambar:#FF9500;
  --sobre-negro:#ECEEED; --sobre-negro-2:#A3AAB0;
  --fuente:"Archivo","Helvetica Neue",Arial,sans-serif;
  --r:4px;
  font-family:var(--fuente);color:var(--grafito);font-size:15px;line-height:1.55;
  box-sizing:border-box;text-align:left;
}
.gad-hub *,.gad-hub *::before,.gad-hub *::after{box-sizing:inherit}
.gad-hub ul,.gad-hub ol{list-style:none;margin:0;padding:0}
.gad-hub p{margin:0}
/* Listeo da a los p, li y summary su propio tamaño e interlineado (16px / 29px): aquí se hereda del bloque */
.gad-hub :where(p,li,summary,span,div){font-size:inherit;line-height:inherit}
.gad-hub a{color:inherit}
.gad-hub :focus-visible{outline:3px solid var(--ambar);outline-offset:3px}
.gad-hub h1,.gad-hub h2{font-family:var(--fuente);font-stretch:125%;font-weight:800;letter-spacing:-.015em;text-wrap:balance;margin:0}

/* ---------- bloque superior: franja de negro piano. Reserva su altura para no mover el listado ---------- */
.gad-hub-cabecera{
  background:var(--piano);color:var(--sobre-negro);border-radius:var(--r);
  padding:20px 18px 16px;margin:0 0 24px;min-height:200px;
}
.gad-hub-cabecera .gad-hub-titulo{
  color:var(--blanco);font-size:clamp(24px,5.6vw,32px);line-height:1.12;margin-bottom:10px;
}
.gad-hub-intro{margin-top:10px;margin-bottom:14px;color:var(--sobre-negro);max-width:62ch}
.gad-hub-intro a{color:var(--ceramico)}
.gad-hub-datos{
  display:flex;flex-wrap:wrap;gap:1px;
  margin-top:16px;background:#23272b;border:1px solid #23272b;border-radius:var(--r);overflow:hidden;
}
.gad-hub-datos li{flex:1 1 112px;background:var(--piano);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.gad-hub-cifra{
  font-stretch:125%;font-weight:800;font-size:22px;line-height:1.1;color:var(--blanco);
  font-variant-numeric:tabular-nums;
}
.gad-hub-etiqueta{font-size:12.5px;line-height:1.35;color:var(--sobre-negro-2)}
.gad-hub-subtitulo{margin-top:14px;font-size:13px;font-weight:600;color:var(--sobre-negro-2)}
.gad-hub-servicios ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.gad-hub-servicios li{
  border:1px solid #3a4046;border-radius:999px;padding:3px 11px;font-size:13px;font-weight:600;color:var(--sobre-negro);
}
.gad-hub-servicios li span{color:var(--sobre-negro-2);font-variant-numeric:tabular-nums;font-weight:500;margin-left:2px}
.gad-hub-fuente{margin-top:12px;font-size:12.5px;line-height:1.4;color:var(--sobre-negro-2)}

/* ---------- bloque inferior (después de la paginación) ---------- */
/* Listeo pinta la descripción de la región en una fila con relleno en línea (15px 55px 25px) y márgenes de .row */
body.gad-hub-activo .term-description{padding:0 0 8px!important;margin:0}
.gad-hub-pie{display:block;margin-top:8px}
.gad-hub-bloque{margin:0 0 30px}
.gad-hub-bloque h2{font-size:clamp(20px,4.4vw,24px);line-height:1.2;color:var(--grafito);margin-bottom:12px}
.gad-hub-factores{display:grid;gap:10px}
.gad-hub-factores li{position:relative;padding-left:20px;max-width:72ch}
.gad-hub-factores li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--grafito)}
.gad-hub a:not(.gad-hub-boton){text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ceramico)}

/* FAQ: <details> accesibles; el indicador es un par de rayas que gira, sin JS */
.gad-hub-faq{border-top:1px solid var(--linea)}
.gad-hub-pregunta{border-bottom:1px solid var(--linea)}
.gad-hub-pregunta summary{
  list-style:none;cursor:pointer;position:relative;padding:14px 36px 14px 0;
  font-weight:700;font-stretch:108%;color:var(--grafito);
}
.gad-hub-pregunta summary::-webkit-details-marker{display:none}
.gad-hub-pregunta summary::before,
.gad-hub-pregunta summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:2px;margin-top:-1px;background:var(--grafito);transition:transform .2s}
.gad-hub-pregunta summary::after{transform:rotate(90deg)}
.gad-hub-pregunta[open] summary::after{transform:rotate(0)}
.gad-hub-pregunta summary:hover{color:#000}
.gad-hub-respuesta{padding:0 0 16px;max-width:68ch;color:var(--grafito)}

/* chips: ciudades vecinas y servicios (las píldoras son para etiquetas y chips de filtro) */
.gad-hub-chips{display:flex;flex-wrap:wrap;gap:8px}
.gad-hub-chips a,
.gad-hub-chips a:not(.gad-hub-boton){
  display:inline-flex;align-items:baseline;gap:8px;min-height:40px;align-items:center;
  border:1px solid var(--grafito);border-radius:999px;padding:6px 14px;
  font-weight:600;font-size:14px;text-decoration:none;color:var(--grafito);background:transparent;
}
.gad-hub-chips a span{font-weight:500;font-size:12.5px;color:var(--grafito-2);font-variant-numeric:tabular-nums}
.gad-hub-chips a:hover{background:var(--grafito);color:var(--blanco)}
.gad-hub-chips a:hover span{color:var(--sobre-negro-2)}

/* CTA para detailers: discreto, botón de contorno */
.gad-hub-pro{
  display:flex;flex-direction:column;gap:12px;margin:8px 0 28px;padding:16px 18px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
}
.gad-hub-pro-texto strong{font-weight:700;font-stretch:108%}
.gad-hub-pro-texto span{color:var(--grafito-2)}
.gad-hub-pro-enlaces{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.gad-hub-boton{
  display:inline-flex;align-items:center;min-height:40px;padding:8px 18px;
  border:1px solid var(--grafito);border-radius:var(--r);background:transparent;color:var(--grafito);
  font-weight:600;font-size:14px;text-decoration:none;
}
.gad-hub-boton:hover{background:var(--grafito);color:var(--blanco)}

@media (min-width:600px){
  .gad-hub-cabecera{padding:26px 28px 20px;min-height:220px;margin-inline:15px}
  body.gad-hub-activo .term-description{padding:0 15px 8px!important}
  .gad-hub-cifra{font-size:26px}
  .gad-hub-pro{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:1100px){
  .gad-hub-cabecera .gad-hub-titulo{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .gad-hub-pregunta summary::before,.gad-hub-pregunta summary::after{transition:none}
}

/* ---------- «Key facts»: líneas citables con fecha (hub de ciudad y página ciudad × servicio) ---------- */
.gad-hub-hechos{
  background:var(--porcelana);border:1px solid var(--linea);border-radius:var(--r);padding:16px 18px;
}
.gad-hub-hechos h2{margin-bottom:4px}
.gad-hub-hechos-fecha{font-size:13px;font-weight:600;color:var(--grafito-2);margin-bottom:10px}
.gad-hub-hechos-lista{display:grid;gap:8px}
.gad-hub-hechos-lista li{position:relative;padding-left:20px;max-width:76ch}
.gad-hub-hechos-lista li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--grafito)}
.gad-hub-hechos-lista strong{font-weight:800;font-variant-numeric:tabular-nums}
.gad-hub-hechos-nota{margin-top:10px;font-size:12.5px;line-height:1.4;color:var(--grafito-2)}

/* ---------- página ciudad × servicio: migas dentro de la franja negra ---------- */
.gad-cs-migas{margin:0 0 10px;font-size:13px;line-height:1.4;color:var(--sobre-negro-2)}
.gad-cs-migas ol{display:flex;flex-wrap:wrap;gap:2px 0}
.gad-cs-migas li{display:inline-flex;align-items:center}
.gad-cs-migas li+li::before{content:"›";margin:0 7px;color:var(--sobre-negro-2)}
.gad-cs-migas a,.gad-cs-migas a:not(.gad-hub-boton){color:var(--sobre-negro);text-decoration-color:#3a4046}
.gad-cs-migas [aria-current="page"]{color:var(--blanco);font-weight:600}
.gad-cs-aviso{margin-top:12px;font-size:13px;color:var(--sobre-negro-2)}

/* El botón fijo «Show Filters» de Listeo ocupa ~53 px a la izquierda en escritorio: que no tape el texto del hub. */
@media (min-width:1240px){.gad-hub-bloque{padding-left:56px}.gad-hub-hechos{padding-left:56px}}