/* ============================================================
   SOS Mi Gente: mg-home.css — solo la maquetacion de la portada.
   Los tokens, la tipografia y los botones viven en mg-brand.css,
   que se carga antes. Aqui solo van las secciones del index.
   Movil primero.
   ============================================================ */

/* ---------------- 1 · portada sobre foto ---------------- */
.h-portada { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: min(88vh, 780px); isolation: isolate; }
.h-portada-foto { position: absolute; inset: 0; z-index: -1; }
.h-portada-foto .velo { background:
    linear-gradient(to top, rgba(8,11,10,.93) 4%, rgba(8,11,10,.55) 42%, rgba(8,11,10,.42) 72%, rgba(8,11,10,.60) 100%),
    linear-gradient(to right, rgba(8,11,10,.55), transparent 62%); }
.h-portada-cuerpo {
    padding-top: calc(76px + clamp(40px, 7vw, 88px)); padding-bottom: clamp(28px, 4vw, 48px);
    color: #fff; display: grid; gap: 18px; justify-items: start;
}
.h-portada-cuerpo h1 { max-width: 16ch; text-shadow: 0 2px 30px rgba(0,0,0,.28); }
.h-portada-cuerpo h1 em { font-style: normal; color: var(--sos-2); }
.h-portada-lede { margin: 0; max-width: min(56ch, 100%); font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.6; color: rgba(255,255,255,.88); }
.h-portada-lede b { color: #fff; font-weight: 700; }
.h-portada-btns { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 2px; }
.h-portada-ayuda { display: inline-flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,.82); font-size: 14.5px; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 3px; }
.h-portada-ayuda:hover { color: #fff; border-color: #fff; text-decoration: none; }

/* La frase del heroe.
   No compite con el titular: mas pequeña, sin negrita, y con una barra al
   costado que la separa de todo lo anterior. Un manifiesto en el tamaño de un
   titular se lee como publicidad; en este tamaño se lee como algo que alguien
   piensa de verdad. */
.h-manifiesto { margin: 6px 0 0; max-width: min(46ch, 100%);
    padding-left: 16px; border-left: 3px solid var(--sos-2, #F0402A);
    font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55;
    font-style: italic; color: rgba(255,255,255,.9);
    text-shadow: 0 2px 22px rgba(0,0,0,.32); text-wrap: balance; }

/* tira de cifras reales, sobre vidrio oscuro */
.h-cifras { border-top: 1px solid rgba(255,255,255,.16); background: rgba(8,11,10,.34);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.h-cifras-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
    padding: 22px 0; list-style: none; margin: 0; }
/* Centradas en su columna: alineadas a la izquierda dejaban un hueco creciente
   a la derecha de cada celda y la tira se veia descuadrada. */
.h-cifra { display: grid; gap: 3px; color: #fff; justify-items: center; text-align: center; }
.h-cifra b { font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.h-cifra.acento b { color: var(--sos-2); }
.h-cifra small { font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.35; }
.h-envivo { display: flex; align-items: center; gap: 8px; padding-top: 18px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.62); }

/* ---------------- 2 · ciudades en tarjeta con foto ---------------- */
.h-ciudades { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.h-ciudad { position: relative; display: block; aspect-ratio: 4/5; border-radius: var(--r-lg);
    overflow: hidden; color: #fff; text-align: left; border: 0; padding: 0; font: inherit;
    cursor: pointer; box-shadow: var(--sh-1);
    transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s; }
.h-ciudad:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.h-ciudad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.8,.25,1); }
.h-ciudad:hover img { transform: scale(1.07); }
.h-ciudad .velo { position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,11,10,.90) 12%, rgba(8,11,10,.30) 52%, rgba(8,11,10,.10) 100%); }
.h-ciudad.activa { outline: 3px solid var(--sos); outline-offset: -3px; }
.h-ciudad-estado { position: absolute; top: 14px; left: 14px; padding: 6px 12px;
    border-radius: var(--r-full); font-size: 11.5px; font-weight: 700;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.h-ciudad-estado.activa { background: rgba(240,64,42,.92); color: #fff; }
.h-ciudad-estado.quieta { background: rgba(255,255,255,.90); color: var(--verde-ink); }
.h-ciudad-cuerpo { position: absolute; inset: auto 0 0 0; display: grid; gap: 8px; padding: 18px; }
.h-ciudad-cuerpo h3 { font-size: 23px; color: #fff; }
.h-ciudad-dep { font-size: 12.5px; color: rgba(255,255,255,.68); }
.h-ciudad-datos { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.82); }
.h-ciudad-datos b { color: #fff; }
.h-ciudad-nota { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

/* ---------------- 3 · roles, en tarjeta con foto ---------------- */
.h-roles { display: grid; gap: 16px; }
.h-rol { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 320px; border-radius: var(--r-lg); overflow: hidden; color: #fff;
    box-shadow: var(--sh-1); transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s; }
.h-rol:hover { transform: translateY(-5px); box-shadow: var(--sh-2); text-decoration: none; }
.h-rol .foto { position: absolute; inset: 0; }
.h-rol img { transition: transform .6s cubic-bezier(.2,.8,.25,1); }
.h-rol:hover img { transform: scale(1.06); }
.h-rol-cuerpo { position: relative; display: grid; gap: 11px; padding: 26px; max-width: 52ch; }
.h-rol-ico { width: 46px; height: 46px; display: grid; place-items: center; font-size: 22px;
    border-radius: var(--r-sm); background: rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.h-rol h3 { color: #fff; }
.h-rol p { margin: 0; color: rgba(255,255,255,.80); font-size: 14.5px; line-height: 1.6; }
.h-rol-ir { margin-top: 4px; font-size: 14.5px; font-weight: 700; }
.h-rol-oscuro { background: var(--ink); min-height: 0; }
.h-rol-oscuro .h-rol-ico { background: rgba(47,95,224,.24); color: #93B0FF; }
.h-rol-oscuro p { color: rgba(255,255,255,.72); }

/* ---------------- 5 · maqueta del panel ---------------- */
.h-maqueta { margin-top: 38px; border-radius: var(--r-lg); overflow: hidden;
    background: var(--ink); box-shadow: 0 40px 90px rgba(14,18,17,.28); }
.h-maq-barra { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #1B211E; }
.h-maq-barra i { width: 10px; height: 10px; border-radius: 50%; background: #3A4340; }
.h-maq-barra span { margin-left: 12px; color: #6E766F; font-size: 11.5px; }
.h-maq-cuerpo { display: grid; grid-template-columns: 1fr; background: #F4F2EE; }
.h-maq-lat { padding: 16px 12px; background: var(--ink); color: #fff; display: none; gap: 12px; align-content: start; }
.h-maq-marca { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.h-maq-marca i { width: 22px; height: 22px; border-radius: 7px; background: var(--sos); flex: 0 0 22px; }
.h-maq-lat ul { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0; }
.h-maq-lat li { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; align-items: center;
    gap: 9px; padding: 8px 9px; border-radius: 7px; color: #A7AEA8; font-size: 11.5px; font-weight: 600; }
.h-maq-lat li i { width: 14px; height: 14px; border-radius: 4px; background: rgba(255,255,255,.16); }
.h-maq-lat li.on { background: var(--sos); color: #fff; }
.h-maq-lat li.on i { background: rgba(255,255,255,.4); }
.h-maq-lat li em { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px;
    border-radius: var(--r-full); background: rgba(255,255,255,.16); }
.h-maq-lat li.on em { background: #fff; color: var(--sos); }
.h-maq-trabajo { padding: 18px; display: grid; gap: 12px; align-content: start; }
.h-maq-bandeja { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-md);
    background: var(--ink); color: #fff; }
.h-maq-bandeja > b { font-size: 13.5px; letter-spacing: -.02em; }
.h-maq-fila { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center;
    gap: 11px; padding: 10px 11px; border-radius: 9px; background: rgba(255,255,255,.06); }
.h-maq-fila > i { width: 26px; height: 26px; border-radius: 7px; }
.h-maq-fila > i.rojo { background: rgba(240,64,42,.32); }
.h-maq-fila > i.ambar { background: rgba(255,178,60,.30); }
.h-maq-fila > i.azul { background: rgba(47,95,224,.32); }
.h-maq-fila b { display: block; font-size: 11.5px; }
.h-maq-fila small { display: block; margin-top: 2px; color: #8F978F; font-size: 10.5px; }
.h-maq-fila em { padding: 5px 11px; border-radius: var(--r-full); background: var(--sos);
    color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; }
.h-maq-cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.h-maq-cifras div { padding: 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--paper); }
.h-maq-cifras small { display: block; color: var(--ink-3); font-size: 10.5px; }
.h-maq-cifras b { display: block; margin-top: 4px; font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px; font-weight: 800; letter-spacing: -.03em; }

/* ---------------- 6 · rastro (seccion oscura) ---------------- */
.h-rastro { background: var(--ink); color: #fff; padding-block: clamp(42px, 4.8vw, 76px); }
.h-rastro-caja { display: grid; gap: clamp(28px, 4vw, 60px); align-items: center; }
.h-rastro-texto { display: grid; gap: 20px; justify-items: start; }
.h-rastro-texto h2 em { font-style: italic; color: var(--sos-2); }
/* body.home .lede (0,2,1) le gana a .h-rastro-texto .lede (0,2,0) y dejaba
   texto gris oscuro sobre fondo negro: hay que subir la especificidad. */
body.home .h-rastro .lede { color: rgba(255,255,255,.72); max-width: min(52ch, 100%); }
.h-linea { display: grid; width: 100%; max-width: 460px; list-style: none; margin: 0; padding: 0; }
.h-linea li { position: relative; display: grid; gap: 2px; padding: 0 0 22px 30px; }
.h-linea li:last-child { padding-bottom: 0; }
.h-linea li > i { position: absolute; left: 0; top: 5px; width: 13px; height: 13px; border-radius: 50%;
    background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.42); }
.h-linea li::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: 2px;
    width: 2px; background: rgba(255,255,255,.16); }
.h-linea li:last-child::after { display: none; }
.h-linea li.ahora > i { background: var(--sos); border-color: var(--sos); box-shadow: 0 0 0 5px rgba(240,64,42,.22); }
.h-linea b { font-size: 14.5px; }
.h-linea small { color: rgba(255,255,255,.55); font-size: 12.5px; }
.h-rastro-foto { aspect-ratio: 16/10; border-radius: var(--r-xl); overflow: hidden; }

/* ---------------- 7b · transporte solidario (banda oscura) ----------------
   Segunda banda oscura de la portada. No repite el negro plano del rastro:
   lleva un degradado tibio para que al hacer scroll las dos no se lean como
   la misma seccion.
   Va centrada, como el cierre: son dos piezas de campana simetricas, y
   alineadas a la izquierda dejaban el bloque cojo dentro de los 1240. */
.h-transp { color: #fff; padding-block: clamp(42px, 4.8vw, 76px);
    background: linear-gradient(158deg, #16201C 0%, #0E1211 52%, #1C1310 100%); }

/* Centrado con margin-inline y no con justify-items, que es lo que hace el
   cierre: justify-items: center encoge cada hijo a su ancho de contenido, y
   en movil el parrafo se salia de la pantalla por los dos lados. */
.h-transp .h-in { display: grid; }
.h-transp .h-cab { justify-self: center; max-width: min(62ch, 100%);
    margin-bottom: 28px; text-align: center; }
.h-transp .h-cab .eti { justify-self: center; }
.h-transp .h-cab h2 em { font-style: italic; color: var(--sos-2); }
/* body.home .lede (0,2,1) le gana a .h-transp .lede (0,2,0) y dejaba texto
   gris oscuro sobre negro: la misma trampa que en el rastro. */
body.home .h-transp .lede { color: rgba(255,255,255,.72); }

.h-transp-tarjetas { display: grid; gap: 16px; width: min(880px, 100%); margin-inline: auto; }

/* Las dos maneras de llegar al formulario, una al lado de la otra: el codigo
   para quien tiene el celular en la mano y el boton para quien ya esta en la
   pagina. Un QR en la pantalla desde la que se navega no sirve de nada, asi
   que el boton no es un extra: es la via normal en movil. */
.h-transp-tarjeta { display: grid; gap: 16px; justify-items: center; text-align: center;
    padding: 22px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-lg);
    background: rgba(255,255,255,.045); }
.h-transp-lado { display: grid; gap: 10px; justify-items: center; }

/* La "o" con su filete: en movil parte la tarjeta de lado a lado, en
   escritorio se pone de pie y separa las dos columnas. */
.h-transp-o { display: flex; align-items: center; gap: 12px; width: 100%;
    font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.55); }
.h-transp-o::before, .h-transp-o::after { content: ""; flex: 1; height: 1px;
    background: rgba(255,255,255,.15); }

/* La pieza del aliado se deja entera y sin recortar: circula impresa y por
   WhatsApp, y retocarla aqui la volveria dos piezas distintas. El marco
   blanco la separa del fondo, que es igual de oscuro que ella. */
.h-transp-qr { display: block; width: min(272px, 100%); padding: 6px;
    border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-2);
    transition: transform .25s ease, box-shadow .25s ease; }
.h-transp-qr img { display: block; width: 100%; height: auto; border-radius: 14px; }
.h-transp-qr:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }

.h-transp-cuerpo { display: flex; flex-direction: column; align-items: center;
    gap: 10px; width: 100%; }
.h-transp-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: var(--r-sm); background: rgba(255,255,255,.1); }
.h-transp-cuerpo p { margin: 0; max-width: min(42ch, 100%); font-size: 14.5px;
    line-height: 1.6; color: rgba(255,255,255,.7); }
.h-transp-cuerpo .btn { margin-top: 4px; }
.h-transp-pie { font-size: 12.5px; color: rgba(255,255,255,.42); }
.h-transp-nota { justify-self: center; margin: 22px 0 0; max-width: min(62ch, 100%); text-align: center;
    font-size: 13px; color: rgba(255,255,255,.45); }

/* ---------------- 7 · pasos ---------------- */
.h-pasos { display: grid; gap: 14px; counter-reset: paso; }
.h-paso { display: grid; gap: 8px; padding: 24px; border: 1px solid var(--hairline);
    border-radius: var(--r-lg); background: var(--paper); }
.h-paso::before { counter-increment: paso; content: counter(paso);
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--sos); }
.h-paso b { font-size: 17.5px; letter-spacing: -.02em; }
.h-paso span { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

/* ---------------- 8b · aliados (marquesina) ----------------
   Fondo hueso con las fichas en blanco: uno de los logos trae fondo blanco
   opaco de fabrica, asi que la ficha blanca lo absorbe y los tres se leen
   como piezas iguales. Sobre la banda hueso no funcionaria.
   El filete de arriba separa esta seccion de "como funciona", que comparte
   el mismo fondo. */
.h-aliados { padding-block: clamp(38px, 4.4vw, 68px); border-top: 1px solid var(--hairline); }
.h-aliados-cab { justify-self: center; max-width: min(58ch, 100%);
    margin-inline: auto; margin-bottom: 30px; text-align: center; }
.h-aliados-cab .eti { justify-self: center; }

/* La marquesina se sale de .h-in a proposito: a ancho completo el desfile
   no tiene principio ni final visibles. Las mascaras difuminan los bordes
   para que los logos no aparezcan y desaparezcan de golpe. */
.h-marquesina { --paso: 18px; display: flex; gap: var(--paso); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.h-marquesina-tira { flex: none; display: flex; gap: var(--paso);
    margin: 0; padding: 0; list-style: none;
    animation: h-desfile 38s linear infinite; }
/* Las dos tiras se mueven a la vez el ancho exacto de una: al terminar, la
   segunda esta donde empezo la primera y el salto no se nota. */
@keyframes h-desfile { to { transform: translateX(calc(-100% - var(--paso))); } }
.h-marquesina:hover .h-marquesina-tira { animation-play-state: paused; }

.h-aliado { flex: none; width: 194px; height: 92px; display: grid; place-items: center;
    padding: 16px 20px; border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: var(--paper); box-shadow: var(--sh-1); }
.h-aliado img { max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; display: block; }

/* ---------------- 8 · cierre ---------------- */
.h-cierre { padding-block: clamp(46px, 5.4vw, 84px); text-align: center;
    background: linear-gradient(180deg, var(--page), #FFF3F0); border-top: 1px solid var(--hairline); }
.h-cierre .h-in { display: grid; justify-items: center; gap: 22px; }
.h-cierre .eti { justify-self: center; }
.h-cierre-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }
.h-cierre-nota { color: var(--ink-3); font-size: 13.5px; }

/* ---------------- vacios y pie ---------------- */
.h-vacio { padding: 32px; border: 1px dashed var(--hairline); border-radius: var(--r-lg);
    text-align: center; color: var(--ink-3); font-size: 14.5px; }
.h-cargando { color: var(--ink-3); font-size: 14.5px; }
body.home .site-foot { background: var(--ink); color: #9AA29D; border-top: 0; padding: 34px 16px; }
body.home .site-foot a { color: inherit; text-decoration: underline;
    text-underline-offset: 3px; }
body.home .site-foot a:hover { color: #fff; }

/* ---------------- escritorio ---------------- */
@media (min-width: 700px) {
    .h-cifras-lista { grid-template-columns: repeat(4, 1fr); }
    .h-roles { grid-template-columns: 1fr 1fr; }
    .h-rol-ancho { grid-column: span 2; min-height: 380px; }
    .h-rol-oscuro { grid-column: span 2; }
    .h-pasos { grid-template-columns: repeat(2, 1fr); }
    /* Ya hay sitio para poner el codigo y el boton uno al lado del otro. */
    /* Pista fija y no auto: con auto el navegador mide el ancho intrinseco de
       la imagen del QR (720px) y se come la columna del texto. */
    .h-transp-tarjeta { grid-template-columns: 208px auto minmax(0, 1fr);
        align-items: center; gap: 22px; padding: 24px 26px; text-align: left; }
    .h-transp-lado, .h-transp-qr { width: 100%; }
    .h-transp-o { flex-direction: column; width: auto; align-self: stretch; }
    .h-transp-o::before, .h-transp-o::after { width: 1px; height: auto; }
    .h-transp-cuerpo { align-items: start; }
    .h-transp-cuerpo p { text-align: left; }
    .h-marquesina { --paso: 22px; }
    .h-maq-cuerpo { grid-template-columns: 180px minmax(0,1fr); }
    .h-maq-lat { display: grid; }
    .h-maq-cifras { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
    .h-pasos { grid-template-columns: repeat(4, 1fr); }
    .h-rastro-caja { grid-template-columns: minmax(0,1fr) minmax(0,.82fr); }
    .h-rastro-foto { aspect-ratio: 1/1; }
    .h-maq-cuerpo { grid-template-columns: 212px minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .h-ciudad, .h-rol, .h-nec, .h-transp-qr, body.home .btn { transition: none; }
    .h-ciudad:hover, .h-rol:hover, .h-transp-qr:hover, body.home .btn:hover { transform: none; }
    /* El desfile se detiene: los logos quedan quietos y siguen leyendose. */
    .h-marquesina-tira { animation: none; }
    .h-ciudad:hover img, .h-rol:hover img { transform: none; }
}

/* ============================================================
   Iconos: SVG de linea en vez de emoji. Los emoji cambian de
   forma en cada sistema, no heredan el color y pesan visualmente.
   ============================================================ */

/* ============================================================
   Grafico: cantidad pendiente por categoria
   Barras horizontales, un solo tono (el trabajo es comparar
   magnitud, no distinguir identidades). Sin leyenda: una sola
   serie. Sin rejilla: el valor va al final de cada barra.
   ============================================================ */
.h-grafico { position: relative; display: grid; gap: 18px; padding: 22px; margin-bottom: 28px;
    border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); }
.h-grafico-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.h-grafico-cab b { font-size: 15px; letter-spacing: -.015em; }
.h-grafico-cab small { font-size: 12.5px; color: var(--ink-3); }
.h-barras { display: grid; gap: 10px; }
/* La tercera columna va a ancho fijo: cada fila es su propio grid, asi que con
   'auto' el rotulo mas largo encogia su riel y las barras del 100% terminaban
   en sitios distintos. */
.h-barra { display: grid; grid-template-columns: minmax(88px, 24%) minmax(0, 1fr) 132px;
    align-items: center; gap: 12px; padding: 5px 8px; margin-inline: -8px;
    border-radius: 10px; border: 0; background: none; font: inherit; color: inherit;
    text-align: left; width: calc(100% + 16px);
    transition: background .16s; cursor: pointer; }
.h-barra:hover, .h-barra:focus-visible, .h-barra.activa { background: var(--dato-suave); outline: none; }
.h-barra:focus-visible { box-shadow: 0 0 0 2px var(--dato); }
/* al apuntar una barra las demas se apagan: la comparacion se lee sola */
.h-barras.apuntando .h-barra-valor { opacity: .32; }
/* la clase la pone el guion: :hover solo no cubre teclado ni tactil */
.h-barras.apuntando .h-barra.activa .h-barra-valor { opacity: 1; background: var(--dato-alto); }
.h-barra.activa .h-barra-rotulo, .h-barra.activa .h-barra-cifra { color: var(--ink); }
.h-barra-rotulo { font-size: 13px; color: var(--ink-2); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-barra-riel { position: relative; height: 18px; }
.h-barra-valor {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--dato); border-radius: 0 4px 4px 0;   /* extremo redondeado, base cuadrada */
    min-width: 3px;
    transition: width .8s cubic-bezier(.2,.8,.25,1), background .16s, opacity .16s;
}
.h-barra-cifra { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.h-barra-cifra small { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-3); }

/* ============================================================
   Necesidades: fichas compactas en rejilla.
   Antes eran seis tarjetas anchas apiladas, casi mil pixeles de
   alto: habia que rodar para saber que falta. En rejilla de tres
   caben las seis en dos filas y se leen de un vistazo.
   ============================================================ */
.h-necs { display: grid; gap: 12px; grid-template-columns: 1fr; }
.h-nec {
    position: relative; display: grid; gap: 9px; align-content: start;
    padding: 16px 16px 16px 19px; overflow: hidden;
    border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: var(--paper); color: inherit;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.h-nec:hover { border-color: var(--ink); transform: translateY(-3px);
    box-shadow: var(--sh-2); text-decoration: none; }
/* riel de urgencia: el color acompaña a la etiqueta escrita, nunca va solo */
.h-nec::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--hairline); }
.h-nec.u-critica::before, .h-nec.u-alta::before { background: var(--dato); }
.h-nec.u-media::before { background: #E9A23B; }
.h-nec.u-baja::before  { background: #9AA6A0; }

.h-nec-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.h-nec-cuando { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.h-nec-tit { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em;
    line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-nec-zona { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* la cifra es lo primero que se lee: lo que falta, en grande */
.h-nec-falta { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.h-nec-falta b { font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--dato); }
.h-nec-falta span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.h-nec-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.h-nec-pct { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
body.home .h-nec .progress { height: 6px; }

/* ============================================================
   Centros: directorio compacto, no tarjetas.
   Con 5 puntos las tarjetas ya ocupaban media pantalla; con 100
   seria imposible. Cada centro es una linea densa: nombre arriba,
   direccion y horario en una sola linea de apoyo.
   ============================================================ */
.h-centros-top { display: grid; gap: 12px; margin-bottom: 16px; }
.h-busca { display: flex; align-items: center; gap: 11px; height: 50px; padding: 0 18px;
    border: 1px solid var(--hairline); border-radius: var(--r-full); background: var(--paper);
    transition: border-color .18s, box-shadow .18s; }
.h-busca:focus-within { border-color: var(--ink); box-shadow: var(--sh-1); }
.h-busca .ico { width: 19px; height: 19px; color: var(--ink-3); }
.h-busca input { width: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; }
.h-centros-cuenta { font-size: 13.5px; color: var(--ink-3); }
.h-centros-cuenta b { color: var(--ink); }

.h-centros { display: grid; grid-template-columns: 1fr; gap: 0;
    border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: var(--paper); overflow: hidden; }
.h-centro { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 13px;
    align-items: start; padding: 14px 16px; border-top: 1px solid var(--line-2);
    transition: background .14s; }
.h-centro:nth-child(-n+2) { border-top: 0; }        /* la primera fila de cada columna */
.h-centro:hover { background: var(--page); }
.h-centro-pin { display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 9px; background: var(--sos-soft); color: var(--sos); }
.h-centro-pin .ico { width: 16px; height: 16px; }
.h-centro > span { display: block; min-width: 0; }
.h-centro b { display: block; font-size: 15px; letter-spacing: -.015em; line-height: 1.3;
    color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* el nombre heredaba el gris del span contenedor: se pinta explicitamente */
.h-centro b + span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2);
    line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-centro-mas { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 14px; border-top: 1px solid var(--line-2);
    background: var(--page); font: inherit; font-size: 14px; font-weight: 700;
    color: var(--ink); text-decoration: none; }
.h-centro-mas:hover { background: var(--sos-soft); color: var(--sos-ink); text-decoration: none; }
.h-centro-mas .ico { width: 17px; height: 17px; }
.h-centros .h-vacio { grid-column: 1 / -1; border: 0; }
/* celda vacia que cierra la rejilla cuando el numero de centros es impar */
.h-centro-relleno { pointer-events: none; }
.h-centro-relleno:hover { background: none; }

/* ============================================================
   Pasos: tarjetas interactivas. Al pasar el cursor se ilumina el
   borde, sube el numero y aparece un resplandor del color de marca.
   ============================================================ */
.h-paso { position: relative; overflow: hidden; isolation: isolate;
    transition: transform .28s cubic-bezier(.2,.8,.25,1), box-shadow .28s, border-color .28s; }
.h-paso::before { content: none; }           /* el numero pasa a ser un elemento propio */
.h-paso::after {                              /* resplandor que sigue al cursor */
    content: ""; position: absolute; inset: -1px; z-index: -1; opacity: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
                rgba(240,64,42,.16), transparent 62%);
    transition: opacity .28s;
}
.h-paso:hover { transform: translateY(-5px); border-color: var(--sos);
    box-shadow: 0 18px 40px rgba(240,64,42,.14); }
.h-paso:hover::after { opacity: 1; }
.h-paso-num { display: flex; align-items: center; gap: 10px; }
.h-paso-num i { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 11px; background: var(--sos-soft); color: var(--sos);
    font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-style: normal;
    font-size: 14px; font-weight: 800;
    transition: background .28s, color .28s, transform .28s; }
.h-paso:hover .h-paso-num i { background: var(--sos); color: #fff; transform: scale(1.08); }
.h-paso-num .ico { width: 19px; height: 19px; color: var(--ink-3); margin-left: auto;
    transition: color .28s, transform .28s; }
.h-paso:hover .h-paso-num .ico { color: var(--sos); transform: translateX(3px); }


@media (prefers-reduced-motion: reduce) {
    .h-paso, .h-paso-num i, .h-barra-valor, .h-centro { transition: none; }
    .h-paso:hover { transform: none; }
    body.home .revela { opacity: 1 !important; transform: none !important; }
}


/* En pantalla angosta las tres columnas del grafico no caben (88 + 132 + gaps
   supera el ancho util): la barra pasa a ocupar su propia linea. */
@media (max-width: 560px) {
    .h-grafico { padding: 16px; }
    .h-grafico-cab { flex-direction: column; align-items: flex-start; gap: 3px; }
    .h-barra {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "rotulo cifra" "riel riel";
        gap: 5px 10px; padding: 6px 0;
    }
    .h-barra-rotulo { grid-area: rotulo; white-space: normal; }
    .h-barra-cifra  { grid-area: cifra; text-align: right; }
    .h-barra-cifra small { display: inline; margin-left: 5px; }
    .h-barra-riel   { grid-area: riel; height: 14px; }
}

/* ============================================================
   Columnas de necesidades y centros.
   Van al final a proposito: comparten especificidad con las
   definiciones de arriba, asi que tienen que ir despues.
   ============================================================ */
@media (min-width: 640px) {
    .h-necs { grid-template-columns: repeat(2, 1fr); }
    .h-centros { grid-template-columns: 1fr 1fr; }
    .h-centro:nth-child(2n) { border-left: 1px solid var(--line-2); }
}
@media (min-width: 1040px) {
    .h-necs { grid-template-columns: repeat(3, 1fr); }
}

/* globo del grafico: el valor manda, la categoria acompana */
.h-globo {
    position: absolute; z-index: 5; pointer-events: none;
    padding: 9px 12px; border-radius: 12px;
    background: var(--ink); color: #fff; box-shadow: var(--sh-2);
    font-size: 12.5px; line-height: 1.35; white-space: nowrap;
    opacity: 0; transform: translate(-50%, -108%) translateY(4px);
    transition: opacity .14s, transform .14s;
}
.h-globo.visible { opacity: 1; transform: translate(-50%, -108%); }
.h-globo b { display: block; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.h-globo span { color: rgba(255,255,255,.72); }
.h-globo i { display: inline-block; width: 14px; height: 3px; border-radius: 2px;
    background: var(--dato); margin-right: 6px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .h-globo { transition: none; } }