/*
 * Sitio público de cada hub.
 *
 * Se muestra en tres lugares: servido por la Federación, dentro del index.php
 * que el hub sube a su hosting, y dentro de un Shadow DOM en sitios ajenos
 * (WordPress, Wix…). Por eso:
 *   - todo cuelga de .fh y usa el prefijo fh-: no pisa ni es pisado;
 *   - medidas en px, no rem: dentro de un sitio ajeno 1rem es lo que ese
 *     sitio decida (hay temas con html{font-size:62.5%});
 *   - el color del hub llega como variable en el propio .fh.
 */

.fh, .fh * { box-sizing: border-box; }
.fh {
  /* Paleta y medidas tomadas de Proveedores de América (sus propias
     variables --pdx-*), para que los dos se vean de la misma familia.
     Lo único que no se copia es el azul: ahí va el color del hub. */
  --fh-c: #0a66c2;
  --fh-c-osc: #004182;
  --fh-c-claro: #EBF4FF;
  --fh-tinta: #1b1f23;
  --fh-texto: #334155;
  --fh-tinta2: #64748b;
  --fh-linea: #e8e6e1;
  --fh-fondo: #edf0f3;
  --fh-radio: 10px;
  --fh-radio-sm: 6px;
  margin: 0;
  color: var(--fh-texto);
  background: #fff;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.fh img { max-width: 100%; height: auto; display: block; border: 0; }
.fh a { color: var(--fh-c); text-decoration: none; }
.fh a:hover { text-decoration: underline; }
.fh h1, .fh h2, .fh h3, .fh h4 { margin: 0; line-height: 1.25; color: var(--fh-tinta); font-weight: 700; letter-spacing: -0.01em;
  font-family: "Plus Jakarta Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.fh p { margin: 0 0 14px; }
.fh ul, .fh ol { margin: 0 0 14px; padding-left: 22px; }
.fh button, .fh input, .fh select, .fh textarea { font: inherit; color: inherit; }

.fh-wrap { width: 100%; max-width: 1128px; margin: 0 auto; padding: 0 16px; }
.fh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Cabecera ───────────────────────────────────────────── */
/* La barra de Proveedores: fondo gris, 53 px, borde fino abajo y sin sombra.
   El menú va SIEMPRE en una sola línea: si no entra, se desplaza de costado.
   Envolverlo era peor — en un hub con todas las secciones encendidas la
   cabecera se comía dos renglones y el sitio arrancaba tres centímetros
   más abajo. */
.fh-cab { background: var(--fh-fondo); border-bottom: 1px solid var(--fh-linea); position: relative; z-index: 5; }
.fh-cab-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 53px; }
.fh-marca { display: flex; align-items: center; gap: 9px; min-width: 0; flex: none; color: var(--fh-tinta) !important; text-decoration: none !important; }
.fh-marca img { width: 34px; height: 34px; object-fit: contain; }
/* La bandera que hace de logo hasta que el hub suba el suyo: redonda y
   recortada, igual que en Proveedores. El aro fino la despega del gris de la
   barra —una bandera con blanco arriba, como la de Costa Rica, si no parece
   cortada. */
.fh-bandera { border-radius: 50%; object-fit: cover !important; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.fh-marca-ini { width: 32px; height: 32px; border-radius: var(--fh-radio-sm); background: var(--fh-c); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.fh-marca-txt { display: flex; flex-direction: column; min-width: 0; }
.fh-marca-nom { font-weight: 700; font-size: 15px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Plus Jakarta Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.fh-marca-red { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fh-tinta2); white-space: nowrap; }

.fh-nav { display: flex; flex-wrap: nowrap; gap: 0; align-items: stretch; min-width: 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none; }
.fh-nav::-webkit-scrollbar { display: none; }
.fh-nav a { display: flex; align-items: center; white-space: nowrap; padding: 4px 11px; font-size: 12.5px; font-weight: 500;
  color: var(--fh-tinta2); text-decoration: none !important; border-bottom: 2px solid transparent; }
.fh-nav a:hover { color: var(--fh-tinta); }
.fh-nav a.fh-activo { color: var(--fh-tinta); font-weight: 600; border-bottom-color: var(--fh-tinta); }
/* El menú desplegable de antes ya no hace falta: la barra se desliza. */
.fh-nav-movil { display: none !important; }
@media (max-width: 640px) {
  .fh-marca-red { display: none; }
  .fh-marca-nom { font-size: 14px; }
  .fh-nav a { padding: 4px 9px; font-size: 12px; }
}

.fh-previa { background: #FEF3C7; color: #78350F; font-size: 13px; font-weight: 600; text-align: center; padding: 8px 16px; border-bottom: 1px solid #F59E0B; }

/* ── Bloques ──────────────────────────────────────────────────────────── */
.fh-main { min-height: 360px; }
.fh-sec { padding: 56px 0; }
.fh-sec-gris { background: var(--fh-fondo); }
.fh-ceja { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fh-c); margin-bottom: 8px; }
.fh-h1 { font-size: 34px; }
.fh-h2 { font-size: 24px; margin-bottom: 8px !important; }
.fh-h3 { font-size: 17px; }
.fh-lede { font-size: 17px; color: var(--fh-tinta2); max-width: 720px; }
.fh-cab-sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.fh-mas { font-weight: 700; font-size: 15px; white-space: nowrap; }
@media (max-width: 640px) { .fh-h1 { font-size: 29px; } .fh-h2 { font-size: 23px; } .fh-sec { padding: 40px 0; } }

/* Sin degradé a pantalla completa: Proveedores no lo usa. Franja clara con
   el texto oscuro, y el color del hub sólo en la ceja y en los botones. */
.fh-heroe { background: var(--fh-fondo); border-bottom: 1px solid var(--fh-linea); padding: 52px 0 48px; }
.fh-heroe .fh-h1, .fh-heroe h1 { max-width: 760px; }
.fh-heroe .fh-lede { margin-top: 14px; }
.fh-heroe-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.fh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; text-decoration: none !important; line-height: 1.2; }
.fh-btn-p { background: var(--fh-c); color: #fff !important; }
.fh-btn-p:hover { background: var(--fh-c-osc); }
.fh-btn-b { background: var(--fh-c); color: #fff !important; }
.fh-btn-b:hover { background: var(--fh-c-osc); }
.fh-btn-g { background: #fff; color: var(--fh-tinta) !important; border-color: var(--fh-linea); }
.fh-btn-g:hover { background: var(--fh-fondo); }
.fh-btn-t { background: transparent; color: var(--fh-c) !important; border-color: var(--fh-c); }
.fh-btn-t:hover { background: var(--fh-c-claro); }

.fh-grid { display: grid; gap: 22px; }
.fh-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fh-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fh-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .fh-g3, .fh-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fh-g2, .fh-g3, .fh-g4 { grid-template-columns: minmax(0, 1fr); } }

.fh-tarj { background: #fff; border: 1px solid var(--fh-linea); border-radius: var(--fh-radio); overflow: hidden; display: flex; flex-direction: column; }
.fh-tarj-cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fh-tarj h3 a { color: var(--fh-tinta); }
/* Un aporte de un Associate Country Analyst: se lee en Proveedores, no acá. La
   tarjeta es la misma para que la lista siga siendo una sola lista; lo único
   que la distingue es la línea de firma al pie, que dice de dónde viene. */
.fh-tarj-aca { position: relative; }
.fh-aca-firma { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--fh-linea);
  font-size: 12px; color: var(--fh-tinta2); }
.fh-aca-firma a { color: var(--fh-c); font-weight: 600; }
.fh-fijado { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--fh-c); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; }
.fh-meta { font-size: 13px; color: var(--fh-tinta2); }
.fh-portada { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--fh-fondo); }
/* Sin imagen no se reserva un bloque 16:9: un rectángulo de color del
   alto de una foto le da a un artículo sin portada más peso visual que a
   uno que sí la tiene. Queda una franja fina y nada más. */
.fh-portada-vacia { height: 5px; background: var(--fh-c); opacity: .75; }

.fh-vacio { padding: 28px; text-align: center; color: var(--fh-tinta2); background: var(--fh-fondo); border-radius: var(--fh-radio); border: 1px dashed var(--fh-linea); }

/* ── Quiénes somos ───────────────────────────────────────────────────── */
.fh-prosa { font-size: 17px; line-height: 1.75; max-width: 760px; }
.fh-prosa h2 { font-size: 24px; margin: 30px 0 10px; }
.fh-prosa h3 { font-size: 20px; margin: 24px 0 8px; }
.fh-prosa blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--fh-c); color: var(--fh-tinta2); font-style: italic; }
.fh-prosa a { text-decoration: underline; }
.fh-prosa hr { border: 0; border-top: 1px solid var(--fh-linea); margin: 28px 0; }
.fh-mv { background: var(--fh-c-claro); border-radius: var(--fh-radio); padding: 22px 24px; }
.fh-mv h3 { color: var(--fh-c-osc); margin-bottom: 6px; }
.fh-red { display: flex; gap: 18px; align-items: center; background: var(--fh-fondo); border-radius: var(--fh-radio); padding: 20px 22px; }
.fh-red img { width: 54px; height: auto; flex: none; }

/* ── Fundadores ──────────────────────────────────────────────────────── */
.fh-persona { text-align: center; padding: 26px 20px; }
.fh-persona-foto { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; background: var(--fh-fondo); }
.fh-persona-ini { width: 116px; height: 116px; border-radius: 50%; margin: 0 auto 14px; background: var(--fh-c-claro); color: var(--fh-c-osc); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; }
.fh-persona-rol { color: var(--fh-c); font-weight: 700; font-size: 14px; }
.fh-persona-bio { font-size: 14.5px; color: var(--fh-tinta2); margin-top: 10px; text-align: left; }

/* ── Artículo ────────────────────────────────────────────────────────── */
.fh-art { max-width: 780px; margin: 0 auto; }
.fh-art-portada { width: 100%; border-radius: var(--fh-radio); margin: 22px 0 28px; aspect-ratio: 16 / 9; object-fit: cover; }
.fh-art-autor { display: flex; gap: 10px; align-items: center; color: var(--fh-tinta2); font-size: 14px; margin-top: 12px; flex-wrap: wrap; }
.fh-compartir { display: flex; gap: 10px; align-items: center; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--fh-linea); font-size: 14px; flex-wrap: wrap; }
.fh-paginas { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }

/* ── Agenda ────────────────────────────────────────────── */
.fh-act { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--fh-linea); border-radius: var(--fh-radio); background: #fff; }
.fh-act + .fh-act { margin-top: 12px; }
.fh-act-cuerpo { flex: 1; min-width: 0; }
.fh-act-fecha { flex: 0 0 62px; text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--fh-c-claro); color: var(--fh-c-osc); }
.fh-act-dia { display: block; font-size: 22px; font-weight: 800; line-height: 1.05; }
.fh-act-mes { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.fh-act-pasada { opacity: .6; }
.fh-act-cancel { text-decoration: line-through; }
.fh-nota { font-size: 14px; font-weight: 600; border-radius: 9px; padding: 10px 13px; margin-top: 10px; background: #FEF3C7; color: #78350F; }
.fh-nota-gris { background: var(--fh-fondo); color: var(--fh-tinta2); }
@media (max-width: 640px) { .fh-act { flex-wrap: wrap; } .fh-act .fh-btn { width: 100%; text-align: center; } }

/* ── Empleos ─────────────────────────────────────────────────────────── */
.fh-empleo { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--fh-linea); border-radius: var(--fh-radio); background: #fff; }
.fh-empleo + .fh-empleo { margin-top: 12px; }
.fh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fh-chip { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--fh-fondo); color: var(--fh-tinta2); }
.fh-chip-c { background: var(--fh-c-claro); color: var(--fh-c-osc); }
@media (max-width: 640px) { .fh-empleo { flex-direction: column; } }

/* ── Proveedores de América ──────────────────────────────────────────── */
.fh-pda { border-radius: 16px; border: 1px solid var(--fh-linea); padding: 26px; background: #fff; }
.fh-pda-marca { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #0B3D2E; }
.fh-num { font-size: 30px; font-weight: 800; color: var(--fh-c); line-height: 1.1; }
.fh-lista-chk { list-style: none; padding: 0 !important; margin: 0 0 14px; }
.fh-lista-chk li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.fh-lista-chk li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--fh-c-claro); }
.fh-lista-chk li::after { content: ""; position: absolute; left: 5px; top: 11px; width: 7px; height: 4px; border-left: 2px solid var(--fh-c); border-bottom: 2px solid var(--fh-c); transform: rotate(-45deg); }

/* ── Patrocinadores ──────────────────────────────────────────────────── */
.fh-patro-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 34px; }
.fh-patro-logos a { display: flex; align-items: center; justify-content: center; }
.fh-patro-logos img { max-height: 58px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(.2); }
.fh-patro-logos img:hover { filter: none; }
.fh-patro-p img { max-height: 84px; max-width: 240px; }
.fh-patro-nombre { font-weight: 700; color: var(--fh-tinta2); }
.fh-banner { display: block; border-radius: var(--fh-radio); overflow: hidden; border: 1px solid var(--fh-linea); }
.fh-banner img { width: 100%; }
.fh-franja { background: var(--fh-fondo); border-top: 1px solid var(--fh-linea); padding: 26px 0; }
.fh-franja-tit { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fh-tinta2); margin-bottom: 14px; }
.fh-nivel { margin-top: 30px; }
.fh-nivel h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--fh-tinta2); margin-bottom: 14px; }

/* ── Formularios ─────────────────────────────────────────────────────── */
.fh-form { display: grid; gap: 14px; }
.fh-campo label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.fh-campo input, .fh-campo select, .fh-campo textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--fh-linea); border-radius: 9px; background: #fff; font-size: 15px; }
.fh-campo input:focus, .fh-campo select:focus, .fh-campo textarea:focus { outline: 2px solid var(--fh-c); outline-offset: 0; border-color: var(--fh-c); }
.fh-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.fh-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fh-tinta2); }
.fh-check input { margin-top: 4px; }
.fh-estado { font-size: 14.5px; font-weight: 600; border-radius: 9px; padding: 11px 14px; display: none; }
.fh-estado.fh-ok { display: block; background: #ECFDF5; color: #065F46; }
.fh-estado.fh-err { display: block; background: #FEF2F2; color: #991B1B; }
.fh-contacto-dato { display: flex; gap: 10px; margin-bottom: 12px; font-size: 15.5px; }
.fh-contacto-dato b { min-width: 92px; color: var(--fh-tinta2); font-weight: 600; }

/* ── Avisos (hub suspendido, revocado, pendiente) ────────────────────── */
.fh-aviso { max-width: 620px; margin: 64px auto; padding: 34px 30px; text-align: center; border: 1px solid var(--fh-linea); border-radius: 16px; background: #fff; }
.fh-aviso h1 { font-size: 24px; margin-bottom: 10px; }
.fh-aviso p { color: var(--fh-tinta2); }
.fh-cargando { padding: 60px 20px; text-align: center; color: #65676B; font: 15px -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.fh-pie { background: #1F2A28; color: rgba(255,255,255,.78); padding: 40px 0 28px; font-size: 14.5px; }
.fh-pie a { color: #fff; }
.fh-pie h4 { color: #fff; font-size: 15px; margin-bottom: 10px; }
.fh-pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 800px) { .fh-pie-grid { grid-template-columns: minmax(0, 1fr); } }
.fh-pie-red { display: flex; gap: 12px; align-items: center; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.6); flex-wrap: wrap; }
.fh-pie-red img { width: 30px; height: auto; }
.fh-redes { display: flex; flex-wrap: wrap; gap: 8px 14px; }

/* ── El portal: hubdecompradores.com ──────────────────────────────────
   La barra que dice qué hub se está viendo, y la pantalla del mapa. Van
   acá y no en hub.css porque el portal sirve el sitio de un hub, no el
   panel: la hoja que ya carga es ésta. */
.fh-portal-barra { background: var(--fh-fondo); border-top: 1px solid var(--fh-linea);
  padding: 12px 20px; text-align: center; font-size: 13.5px; color: var(--fh-tinta2); }
.fh-portal-barra a { color: var(--fh-c); font-weight: 600; white-space: nowrap; }
.fh-portal-mapa { text-align: center; max-width: 620px; }
/* El mapa necesita sus 760: con la columna de texto en 620 el lienzo se
   achicaba y las fichas, que llevan texto en px y no escalan, se pisaban. */
.fh-portal-mapa .fh-mapa { max-width: 760px; width: 760px; margin-left: -70px; margin-right: -70px; }
@media (max-width: 820px) { .fh-portal-mapa .fh-mapa { width: 100%; margin-left: 0; margin-right: 0; } }
.fh-portal-mapa img { margin: 0 auto 14px; }
.fh-portal-svg { margin: 26px auto 10px; max-width: 420px; }
.fh-portal-lista { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); text-align: left; }
.fh-portal-lista a { display: block; padding: 11px 14px; border: 1px solid var(--fh-linea);
  border-radius: var(--fh-radio); background: #fff; font-weight: 600; color: var(--fh-tinta) !important;
  text-decoration: none !important; }
.fh-portal-lista a:hover { border-color: var(--fh-c); }
.fh-portal-lista span { display: block; font-weight: 400; font-size: 13px; color: var(--fh-tinta2); }

/* ── «¿Necesitás cotizar algo?» ──────────────────────────────────────
   El atajo a /requerimiento del sitio de Proveedores del país del hub. */
.fh-cotizar { margin-top: 30px; border: 1px solid var(--fh-linea); border-radius: var(--fh-radio);
  background: var(--fh-fondo); padding: 30px; }
.fh-cotizar-txt { max-width: 760px; }
.fh-pasos { counter-reset: paso; list-style: none; margin: 0 0 22px; padding: 0; }
.fh-pasos li { counter-increment: paso; position: relative; padding-left: 40px; margin-bottom: 12px;
  font-size: 14.5px; line-height: 1.55; color: var(--fh-tinta2); }
.fh-pasos li strong { color: var(--fh-tinta); font-weight: 600; }
.fh-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%; background: var(--fh-c); color: #fff;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { .fh-cotizar { padding: 22px 18px; } }
/* -- El mapa de la red ---------------------------------------------------
   El SVG define el alto del contenedor; las fichas van encima, posicionadas en
   porcentajes del mismo lienzo.

   El texto de las fichas NO escala con el lienzo (son px), asi que el alto que
   el PHP reserva para cada ficha solo cuadra si el lienzo se dibuja cerca de su
   tamano natural. Por eso el contenedor es de 760 y abajo de 700 el mapa se
   esconde y queda la lista. */
.fh-mapa { position: relative; width: 100%; max-width: 760px; margin: 26px auto 10px; }
.fh-mapa-svg { display: block; width: 100%; height: auto; }
.fh-mapa-ficha { position: absolute; background: #fff; border: 1px solid #E3E6EA; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.fh-mapa-ficha a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; text-decoration: none; color: #1b1f23; line-height: 1.2; }
.fh-mapa-ficha a + a { border-top: 1px solid #EEF1F4; }
.fh-mapa-ficha a:hover { background: #F4F8FC; }
.fh-mapa-ficha img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.fh-mapa-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fh-mapa-nom { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-mapa-pais { font-size: 11px; color: #64748b; white-space: nowrap; }
@media (max-width: 699px) { .fh-mapa { display: none; } }