/* ==========================================================================
   SITE BRAND — Urbanist en todo el sitio (cargado el ÚLTIMO en cada página)
   - Self-hosted (sin Google Fonts) para no tocar el CSP ni la velocidad.
   - Los nombres antiguos (Space Grotesk, Inter, Guminert) se redirigen a
     Urbanist, así cualquier estilo inline o heredado usa la fuente nueva.
   - font-size-adjust compensa que Urbanist tiene la x-height más baja que
     Inter: el texto mantiene el tamaño visual de antes.
   ========================================================================== */
@font-face{font-family:"Urbanist";font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/urbanist-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/urbanist-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/urbanist-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/urbanist-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/urbanist-latin-700-normal.woff2) format("woff2")}

/* aliases: old family names -> Urbanist files */
@font-face{font-family:"Space Grotesk";font-weight:300;font-display:swap;src:url(/fonts/urbanist-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:400;font-display:swap;src:url(/fonts/urbanist-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(/fonts/urbanist-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:600;font-display:swap;src:url(/fonts/urbanist-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700 900;font-display:swap;src:url(/fonts/urbanist-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:300;font-display:swap;src:url(/fonts/urbanist-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/fonts/urbanist-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(/fonts/urbanist-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/fonts/urbanist-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700 900;font-display:swap;src:url(/fonts/urbanist-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Guminert";font-weight:100 900;font-display:swap;src:url(/fonts/urbanist-latin-600-normal.woff2) format("woff2")}

:root{
  --font-display:"Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-sans:"Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html body{font-family:"Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size-adjust:.546}
html body :is(button,input,select,textarea){font-family:inherit}

/* headings: Urbanist 600 everywhere; h2/h3/h4 one step larger than before */
:root{
  --fs-h2:clamp(32px,calc(16px + 2.3vw),52px);
  --fs-h3:clamp(19px,calc(14px + .65vw),25px);
  --fs-h4:clamp(17px,calc(13.5px + .4vw),20px);
}
html body :is(h1,h2,h3,h4,h5,h6,.display){font-size-adjust:none}
html body h1:not(footer *){font-family:"Urbanist",sans-serif !important;font-weight:600 !important;letter-spacing:-.03em !important;line-height:1.06 !important}
html body h2:not(footer *):not(.wm-statement){font-family:"Urbanist",sans-serif !important;font-weight:600 !important;font-size:var(--fs-h2) !important;letter-spacing:-.025em !important;line-height:1.1 !important}
html body h3:not(footer *):not(.incl h3){font-family:"Urbanist",sans-serif !important;font-weight:600 !important;font-size:var(--fs-h3) !important;letter-spacing:-.012em !important;line-height:1.25 !important}
html body h4:not(footer *){font-family:"Urbanist",sans-serif !important;font-weight:600 !important;font-size:var(--fs-h4) !important;line-height:1.3 !important}
html body :is(h1,h2,h3,h4) :is(em,strong,b){font-weight:inherit}
html body footer :is(h2,h3){font-family:"Urbanist",sans-serif !important}
/* breathing room so bigger titles never touch what follows */
html body :is(h2,h3):not(footer *){overflow-wrap:break-word}

/* buttons / nav read a touch bolder with Urbanist */
html body :is(.btn,.as-footer-btn,.nav-links a){font-family:"Urbanist",sans-serif;font-weight:600;letter-spacing:0}

/* mono stays mono */
html body :is(code,pre,kbd,samp,.mono){font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);font-size-adjust:none}

/* Argentina landing has its own type scale */
html body main.arx,html body main.arx *{font-size-adjust:none !important}

/* ==========================================================================
   Full-width layout everywhere (as the original homepage): content spans the
   whole viewport minus the side padding var(--pad). Same for every page,
   the footer and the Argentina landing.
   ========================================================================== */
html body :is(.wrap,main.arx .w){
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  margin-inline:auto !important;
  padding-inline:var(--pad,clamp(1.25rem,5vw,9rem)) !important;
}

/* long translated words (DE/NL) must never push a card past the screen */
@media (max-width:760px){
  html body :is(.evidence,.proof-copy,.proof,.card,.vf-card,.svc){min-width:0;max-width:100%;overflow-wrap:anywhere}
}

/* long compound words (DE/NL) in bigger headings: hyphenate instead of overflowing */
html[lang^="de"] body :is(h1,h2,h3,h4),html[lang^="nl"] body :is(h1,h2,h3,h4){hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
html body :is(h1,h2,h3,h4){overflow-wrap:break-word;min-width:0}
/* highlighted phrases inside titles may wrap: with 600 weight some no longer fit on one line */
html body :is(h1,h2,h3) :is(em,span,b,strong,mark){white-space:normal !important}
/* pricing tiers: 4 columns only when they fit; 2 columns on laptops/tablets */
html body .tiers > *{min-width:0}
@media (min-width:761px) and (max-width:1199px){html body .tiers-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
html body :is(.cats,.flow-track,.grid-svc,.vf-grid,.vf-related) > *{min-width:0}
@media (min-width:1101px){html body .flow-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:1.5rem !important}}
html body .fstep{position:relative;width:100% !important}
html body .fstep .f-arrow{position:absolute !important;right:-1.7rem;top:50%;transform:translateY(-50%);z-index:2}
@media (max-width:1100px){html body .flow-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){html body .flow-track{grid-template-columns:1fr}}
/* industry cards: aspect-ratio + min-height made them wider than their column on laptops */
html body .cats > .cat{width:100%;max-width:100%}
/* bigger 600 titles need a bit more air before their text */
html body h3:not(footer *) + p:not([class]){margin-top:.45rem}
html body h3:not(footer *) + p.med-sub,html body .tier h3 + p.sub{margin-top:.5rem !important}
/* larger section titles get proportionally wider heading blocks (no orphan words) */
html body .sec-head{max-width:54rem}
html body .money-intro{max-width:58rem}
@media (max-width:760px){html body :is(.sec-head,.money-intro){max-width:none}}
@media (max-width:1100px){html body .cats > .cat{aspect-ratio:auto;min-height:19rem}}
/* hero titles that sat right on top of their intro text */
html body h1:not(footer *) + p.lead.fade-up,html body h1:not(footer *) + p.aia-subhead{margin-top:clamp(1.25rem,2vw,1.75rem)}
/* mobile hero: the status panel used to cover the whole photo; stack it under the image instead */
@media (max-width:760px){
  html body .ag-visual{aspect-ratio:auto !important;max-height:none !important;height:auto !important;overflow:hidden;display:flex;flex-direction:column}
  html body .ag-visual picture{position:relative !important;inset:auto !important;height:19rem !important;flex:none}
  html body .ag-visual picture img{position:absolute !important;inset:0 !important;width:100%;height:100%;object-fit:cover}
  html body .ag-visual .ag-panel{position:relative !important;inset:auto !important;left:auto !important;right:auto !important;bottom:auto !important;top:auto !important;width:auto !important;margin:0 !important;border-radius:0 !important;box-shadow:none !important}
}

/* ==========================================================================
   Buttons never stretch to the container width (desktop or mobile)
   ========================================================================== */
html body :is(.btn,a.btn,button.btn,.as-footer-btn,.cform-submit,.pill){
  width:fit-content !important;max-width:100% !important;flex:0 0 auto !important;
  justify-self:start;align-self:flex-start;white-space:nowrap
}
html body :is(.btn,.pill){justify-content:center}
@media (max-width:760px){html body :is(.btn,a.btn,button.btn,.as-footer-btn,.cform-submit,.pill){white-space:normal;text-align:left}}
/* containers that center their content keep centered buttons */
html body :is(.cta-band,.final-cta,.cta,.arx-cta,[style*="text-align:center"],.center,.tc) :is(.btn,.pill){justify-self:center;align-self:center;margin-inline:auto}
html body .as-footer-actions{display:flex !important;flex-wrap:wrap;gap:.6rem;align-items:center}
/* Mobile: long CTAs wrap but never span the full column */
@media (max-width:760px){html body :is(.btn,a.btn,button.btn,.as-footer-btn,.cform-submit,.pill){max-width:min(100%,19.5rem) !important;line-height:1.3;padding-block:.85rem}}
@media (max-width:760px){html body :is(.btn,.pill,.as-footer-btn,.local-note a){text-wrap:balance}}
