/* Refinamiento común: mantiene la identidad de B Migrants y hace más clara cada acción. */
.portal-header{gap:1.25rem}
.portal-nav{gap:clamp(.7rem,1.15vw,1.15rem)}
.portal-nav .cta{white-space:nowrap}
.portal-nav a:focus-visible,.flow-header a:focus-visible{outline:3px solid #ffd719;outline-offset:3px}

/* Hero de páginas interiores: la acción principal se muestra antes. */
.hero-page{min-height:560px}
.hero-page>div{padding-block:clamp(2.75rem,4.2vw,4.5rem)}
.hero-page h1{max-width:12ch;font-size:clamp(3.1rem,4.7vw,5.7rem);line-height:1.02;letter-spacing:-.055em;margin-bottom:1rem}
.hero-page .lead{margin:.35rem 0 0}
.hero-page figure{min-height:0;position:relative;overflow:hidden}
.hero-page figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-page .actions{margin-top:1.15rem}

/* Cada dato de la franja azul se centra como conjunto, no solo el pictograma. */
body .factbar p.has-ui-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;min-width:0;padding:1.35rem 1rem;text-align:center}
body .factbar p.has-ui-icon .ui-icon-badge{display:grid;place-items:center;margin-bottom:.4rem}
body .factbar p.has-ui-icon .ui-icon-badge .ui-icon{display:block}
body .factbar p.has-ui-icon strong,body .factbar p.has-ui-icon span{display:block;max-width:100%}

/* Las categorías de ofertas dejan de usar amarillo sobre crema. */
.job-card .eyebrow{color:#971d2a;font-size:.86rem;letter-spacing:.08em}

/* Marca y enlaces de los pies interiores. */
.footer-brand{display:inline-flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.footer-brand img{width:40px;height:40px;object-fit:contain;flex:none}
.footer-brand b{color:#f36a75}
.footer .footer-grid>div:first-child p{margin:.8rem 0 0}

/* Flujos de inscripción, acceso y ayuda: cabecera compacta pero coherente. */
.flow-header{position:sticky;top:0;z-index:30;min-height:76px;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid #d6e0e4}
.flow-header .brand{font-size:.95rem;line-height:1.1}
.flow-nav{display:flex;align-items:center;justify-content:flex-end;gap:1.1rem;white-space:nowrap}
.flow-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:750;font-size:.9rem}
.flow-nav a:hover,.flow-nav a[aria-current=page]{color:#c10f1f}
.flow-nav .flow-cta{padding:.55rem .85rem;background:#012f47;color:#fff;border-radius:999px}
.flow-nav .flow-cta:hover{color:#fff;background:#c10f1f}
.flow-header+.breadcrumbs{scroll-margin-top:76px}

/* Evita que el título largo de empleo recorte el ancho de 320 px. */
@media(max-width:360px){
  #employment-title{font-size:2.55rem;overflow-wrap:anywhere;hyphens:auto;line-height:.96}
}
@media(max-width:940px){
  .portal-nav{gap:.25rem}
  .portal-nav a{min-height:44px;display:flex;align-items:center}
  .portal-nav .cta{align-self:flex-start}
  .hero-page figure{min-height:380px}
}
@media(max-width:620px){
  .hero-page{min-height:0}
  .hero-page>div{padding:3rem 20px 3.2rem}
  .hero-page h1{max-width:none;font-size:clamp(2.65rem,11vw,3.15rem);line-height:1.02}
  .hero-page figure{min-height:340px}
  body .factbar p.has-ui-icon{align-items:flex-start;text-align:left;padding:1.1rem 20px}
  .flow-header{min-height:70px;align-items:center}
  .flow-header .brand{min-width:0}
  .flow-header .brand span{font-size:.85rem}
  .flow-nav{gap:.65rem}
  .flow-nav a{font-size:.88rem}
}
@media(max-width:420px){
  .flow-nav .flow-home{display:none}
  .flow-header .brand span{max-width:130px}
}