:root{
  --tl-primary:#2c3e6b; --tl-primary-dark:#1a2744; --tl-primary-light:#3d5a9e;
  --tl-accent:#00c618; --tl-accent-dark:#00a514;
  --tl-wa:#25d366;
  --tl-text-dark:#333333; --tl-text-medium:#465069; --tl-text-light:#6b7280;
  --tl-white:#ffffff; --tl-gray-50:#f9fafb; --tl-gray-100:#f3f4f6;
  --tl-gray-200:#e5e7eb; --tl-gray-300:#d1d5db;
  --tl-sh-sm:0 1px 3px rgba(0,0,0,.1);
  --tl-sh-md:0 4px 12px rgba(0,0,0,.1);
  --tl-sh-lg:0 10px 30px rgba(0,0,0,.15);
  --tl-r:8px; --tl-r-lg:12px;
  --tl-shell:1200px; --tl-pad:20px; --tl-band:80px;
  --tl-hdr:116px;

  /* The 2026 banner's palette, from the demo the client approved. */
  --tl-navy:#071c49; --tl-blue:#1264db; --tl-blue-2:#0876ef;
  --tl-green-2:#24b52b; --tl-red:#f01616; --tl-red-2:#e70e0e;
  --tl-hair:#d7e4f3;

  /* One track list, read by the page's grid AND by the banner's own row, so the
     copy column and the picture cannot drift apart. The two content tracks add
     up to 1160px — the same content line every band below already uses. */
  --tl-cols:
    [full-start] minmax(var(--tl-pad),1fr)
    [copy-start] minmax(0,620px) [copy-end]
    34px
    [vis-start] minmax(0,506px) [vis-end]
    minmax(var(--tl-pad),1fr) [full-end];
}
/* Below the shell's own width a nested `gap-5` row (-24px gutters) reaches past
   a 20px edge. Four more pixels, declared here so the header's, the page's and
   the footer's sheets all agree — whichever the browser reads last. */
@media (max-width:1239.98px){:root{--tl-pad:24px}}
@font-face{
  /* Relative to THIS file (web/partials/site.css), not to the page. */
  font-family:'TecnolavSans';
  src:url('../views/assets/fonts/inter/inter-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

body{font-family:'TecnolavSans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--tl-navy)}