/* ============================================================
   XP SISTEMAS — xp-shell.css
   Casca compartilhada por TODAS as páginas: cabeçalho com menu
   de produtos, rodapé e botão flutuante do WhatsApp.
   Classes prefixadas com "xs-" para não colidir com os estilos
   legados (styles.css, campo.css) nem com xp.css.
   ============================================================ */

/* ---------- fontes (servidas pelo próprio site; licença SIL OFL) ----------
   As faces "… Fallback" usam fontes do sistema com métricas ajustadas
   à fonte final, para o texto não "pular" quando ela termina de carregar. */
@font-face{ font-family:'Sora'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/sora-latin.woff2) format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap; src:url(../fonts/inter-latin.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/plexmono-400-latin.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/plexmono-500-latin.woff2) format('woff2'); }
@font-face{ font-family:'Sora Fallback'; src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo'),local('Helvetica'); size-adjust:113.86%; ascent-override:85.19%; descent-override:25.47%; line-gap-override:0%; }
@font-face{ font-family:'Inter Fallback'; src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo'),local('Helvetica'); size-adjust:106.28%; ascent-override:91.15%; descent-override:22.70%; line-gap-override:0%; }
@font-face{ font-family:'Plex Mono Fallback'; src:local('Courier New'),local('CourierNewPSMT'),local('Liberation Mono'),local('Cousine'); size-adjust:99.98%; ascent-override:102.52%; descent-override:27.50%; line-gap-override:0%; }

:root{
  --xs-ink:#0b1220;
  --xs-ink-2:#3b4658;
  --xs-ink-3:#667085;
  --xs-line:#e5e8ef;
  --xs-brand:#1457e6;
  --xs-brand-700:#0f3fb0;
  --xs-night:#060b16;
  --xs-hosp:#0d9488;
  --xs-sp:#15803d;
  --xs-app:#0b62b0;
  --xs-acs:#2563eb;
  --xs-end:#0e8a63;
  --xs-elos:#7c3aed;
  --xs-vem:#0f9f6e;
  --xs-nc:#0e8fa1;
  --xs-suas:#4f46e5;
  --xs-med:#2563eb;
  --xs-mun:#1d4ed8;
  --xs-map:#c2410c;
  --xs-ease:cubic-bezier(.16,1,.3,1);
  --xs-display:'Sora','Sora Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --xs-body:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --xs-mono:'IBM Plex Mono','Plex Mono Fallback',ui-monospace,SFMono-Regular,Menlo,monospace;
}

.xs-header,.xs-header *,.xs-footer,.xs-footer *,.xs-wa,.xs-wa *{ box-sizing:border-box; }

/* ---------- Cabeçalho ---------- */
.xs-header{
  position:sticky; top:0; z-index:100;
  font-family:var(--xs-body); font-size:15px; line-height:1.4;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
/* páginas legadas compensam um cabeçalho fixo de 68px */
.xs-header--fixed{ position:fixed; left:0; right:0; top:0; }
.xs-header--fixed .xs-bar{ height:68px; }
.xs-header--fixed .xs-drawer{ max-height:calc(100vh - 68px); max-height:calc(100dvh - 68px); }
.xs-header.scrolled,.xs-header.is-open{ border-bottom-color:var(--xs-line); box-shadow:0 6px 24px rgba(11,18,32,.06); }
.xs-header a{ color:inherit; text-decoration:none; }
.xs-header ul{ list-style:none; margin:0; padding:0; }

.xs-bar{
  max-width:1240px; margin:0 auto; height:72px;
  padding:0 clamp(16px,4vw,40px);
  display:flex; align-items:center; gap:28px;
}

.xs-brand{ display:inline-flex; align-items:center; gap:10px; flex:none; }
.xs-brand-mark{
  width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center;
  background:var(--xs-ink); color:#fff;
  font:700 13px/1 var(--xs-display); letter-spacing:.02em;
  position:relative; overflow:hidden;
}
.xs-brand-mark::after{
  content:""; position:absolute; right:-6px; bottom:-6px; width:16px; height:16px;
  border-radius:4px; background:var(--xs-brand); transform:rotate(45deg);
}
.xs-brand-mark span{ position:relative; z-index:1; }
.xs-brand-name{ font:600 17px/1 var(--xs-display); color:var(--xs-ink); letter-spacing:-.02em; }

.xs-nav{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.xs-nav > a,.xs-nav-trigger{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 12px; border-radius:8px;
  color:var(--xs-ink-2); font:500 14.5px/1 var(--xs-body);
  background:none; border:0; cursor:pointer;
  transition:color .15s, background .15s;
}
.xs-nav > a:hover,.xs-nav-trigger:hover,.xs-nav-trigger[aria-expanded="true"]{ color:var(--xs-ink); background:#f1f4f9; }
.xs-nav > a[aria-current="page"]{ color:var(--xs-ink); }
.xs-nav-trigger svg{ transition:transform .2s var(--xs-ease); }
.xs-nav-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }

.xs-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.xs-cta{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 18px; border-radius:10px;
  background:var(--xs-ink); color:#fff !important;
  font:600 14px/1 var(--xs-body); white-space:nowrap;
  transition:background .2s, transform .2s var(--xs-ease);
}
.xs-cta:hover{ background:var(--xs-brand); }
.xs-cta svg{ transition:transform .2s var(--xs-ease); }
.xs-cta:hover svg{ transform:translateX(2px); }

.xs-burger{
  display:none; width:42px; height:42px; border-radius:10px;
  border:1px solid var(--xs-line); background:#fff; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.xs-burger span{ display:block; width:18px; height:1.6px; background:var(--xs-ink); border-radius:2px; transition:transform .25s var(--xs-ease), opacity .2s; }
.xs-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
.xs-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.xs-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }

/* ---------- Mega menu de produtos ---------- */
.xs-mega{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-top:1px solid var(--xs-line); border-bottom:1px solid var(--xs-line);
  box-shadow:0 30px 60px rgba(11,18,32,.12);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .25s var(--xs-ease), visibility 0s .25s;
}
.xs-mega.open{ opacity:1; visibility:visible; transform:none; transition:opacity .2s, transform .25s var(--xs-ease); }
.xs-mega-inner{
  max-width:1240px; margin:0 auto; padding:28px clamp(16px,4vw,40px) 24px;
  display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:28px;
}
.xs-mega-col .xs-h{
  margin:0 0 12px; font:500 11px/1 var(--xs-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--xs-ink-3);
}
.xs-mega-col .xs-h a{ color:inherit; }
.xs-mega-col .xs-h a:hover{ color:var(--xs-brand); }
.xs-prod{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px; margin:0 -10px; border-radius:12px;
  transition:background .15s;
}
.xs-prod:hover{ background:#f4f7fb; }
.xs-prod-ico{
  width:36px; height:36px; flex:none; border-radius:10px;
  display:grid; place-items:center; color:#fff; background:var(--c,var(--xs-brand));
}
.xs-prod-ico svg{ width:18px; height:18px; }
.xs-prod b{ display:flex; align-items:center; gap:8px; font:600 14.5px/1.25 var(--xs-display); color:var(--xs-ink); letter-spacing:-.01em; }
.xs-prod small{ display:block; margin-top:3px; font-size:13px; color:var(--xs-ink-3); line-height:1.4; }
.xs-tag{
  font:600 10px/1 var(--xs-mono); letter-spacing:.06em; text-transform:uppercase;
  padding:4px 6px; border-radius:5px; background:#eef3ff; color:var(--xs-brand-700);
}
.xs-tag--new{ background:#e7f6ef; color:#0b6b4d; }
.xs-soon{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.xs-soon span{ font-size:12.5px; color:var(--xs-ink-2); padding:6px 9px; border:1px dashed #cfd6e3; border-radius:7px; }
.xs-mega-foot{
  grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:4px; padding-top:16px; border-top:1px solid var(--xs-line);
  font-size:13.5px; color:var(--xs-ink-3);
}
.xs-mega-foot a{ color:var(--xs-brand); font-weight:600; }
.xs-mega-foot a:hover{ text-decoration:underline; }

/* ---------- Gaveta mobile ---------- */
.xs-drawer{
  display:none; border-top:1px solid var(--xs-line); background:#fff;
  max-height:calc(100vh - 72px); max-height:calc(100dvh - 72px); overflow-y:auto;
  padding:8px 16px 24px;
}
.xs-drawer.open{ display:block; }
.xs-drawer .xs-h{ margin:18px 0 6px; font:500 11px/1 var(--xs-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--xs-ink-3); }
.xs-drawer .xs-prod{ margin:0; padding:9px 4px; }
.xs-drawer-links{ display:grid; gap:2px; margin-top:14px; border-top:1px solid var(--xs-line); padding-top:10px; }
.xs-drawer-links a{ padding:12px 4px; font-weight:500; color:var(--xs-ink); }
.xs-drawer .xs-cta{ width:100%; justify-content:center; margin-top:14px; height:48px; }

@media (max-width:980px){
  .xs-nav,.xs-actions .xs-cta,.xs-mega{ display:none; }
  .xs-burger{ display:inline-flex; }
}
@media (min-width:981px){ .xs-drawer{ display:none !important; } }

/* ---------- Rodapé ---------- */
.xs-footer{
  background:var(--xs-night); color:#9aa6bd;
  font-family:var(--xs-body); font-size:14px; line-height:1.6;
  padding:72px 0 28px; position:relative; overflow:hidden;
}
.xs-footer a{ color:#c9d2e3; text-decoration:none; transition:color .15s; }
.xs-footer a:hover{ color:#fff; }
.xs-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.xs-footer-wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(16px,4vw,40px); position:relative; }
.xs-footer-top{
  display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:36px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08);
}
.xs-footer .xs-brand-name{ color:#fff; }
.xs-footer .xs-brand-mark{ background:#fff; color:var(--xs-ink); }
.xs-footer-about p{ margin:16px 0 18px; max-width:34ch; }
.xs-footer-contact{ display:grid; gap:6px; font-size:13.5px; }
.xs-footer .xs-fh{ margin:0 0 14px; font:500 11px/1 var(--xs-mono); letter-spacing:.12em; text-transform:uppercase; color:#8592ab; }
.xs-footer .xs-tag{ margin-left:6px; background:rgba(20,87,230,.22); color:#b9cdfb; vertical-align:1px; }
.xs-footer .xs-muted{ color:#8592ab; }
.xs-footer-bot{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-top:22px; font:400 12.5px/1.5 var(--xs-mono); color:#8592ab;
}
.xs-footer-tagline{
  font:600 clamp(22px,3vw,30px)/1.2 var(--xs-display); color:#fff; letter-spacing:-.02em;
  margin:0 0 48px; max-width:24ch;
}
.xs-footer-tagline span{ color:#7ea2f5; }
@media (max-width:980px){ .xs-footer-top{ grid-template-columns:1fr 1fr; } .xs-footer-about{ grid-column:1/-1; } }
@media (max-width:520px){ .xs-footer-top{ grid-template-columns:1fr; } }

/* ---------- WhatsApp flutuante ---------- */
.xs-wa{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px 10px 10px; border-radius:999px;
  background:#0b7a43; color:#fff !important; text-decoration:none;
  font:600 14px/1.15 var(--xs-body);
  box-shadow:0 12px 30px rgba(15,157,88,.35), 0 2px 6px rgba(0,0,0,.12);
  transition:transform .25s var(--xs-ease), box-shadow .25s;
}
.xs-wa:hover{ transform:translateY(-2px); box-shadow:0 18px 36px rgba(15,157,88,.42), 0 2px 6px rgba(0,0,0,.12); }
.xs-wa-ico{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; }
.xs-wa small{ display:block; font-weight:400; font-size:12px; opacity:.92; }
@media (max-width:640px){ .xs-wa{ padding:10px; } .xs-wa-txt{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .xs-header *,.xs-mega,.xs-wa{ transition:none !important; }
}

/* ---------- aviso de cookies (LGPD) ---------- */
.xs-cookie{
  position:fixed; left:18px; bottom:18px; z-index:95; box-sizing:border-box;
  width:min(380px, calc(100vw - 36px));
  background:#fff; color:var(--xs-ink-2); border:1px solid var(--xs-line); border-radius:14px;
  box-shadow:0 18px 50px rgba(11,18,32,.16);
  padding:16px 16px 14px; font:400 13.5px/1.5 var(--xs-body);
  transform:translateY(12px); opacity:0; transition:transform .35s var(--xs-ease), opacity .35s;
}
.xs-cookie.show{ transform:none; opacity:1; }
.xs-cookie *{ box-sizing:border-box; }
.xs-cookie p{ margin:0; }
.xs-cookie b{ color:var(--xs-ink); font-weight:600; }
.xs-cookie a{ color:var(--xs-brand); text-decoration:underline; text-underline-offset:2px; }
.xs-cookie-act{ display:flex; gap:8px; margin-top:12px; }
.xs-cookie-act button{
  flex:1; height:38px; border-radius:9px; cursor:pointer; font:600 13px/1 var(--xs-body);
  border:1px solid var(--xs-ink); background:#fff; color:var(--xs-ink); transition:background .15s, color .15s;
}
.xs-cookie-act button:hover{ background:var(--xs-ink); color:#fff; }
.xs-cookie-act button[data-c="all"]{ background:var(--xs-ink); color:#fff; }
.xs-cookie-act button[data-c="all"]:hover{ background:var(--xs-brand); border-color:var(--xs-brand); }
.xs-cookie-link{ background:none; border:0; padding:0; color:#c9d2e3; font:inherit; cursor:pointer; text-decoration:none; }
.xs-cookie-link:hover{ color:#fff; }
@media (max-width:640px){ .xs-cookie{ left:12px; right:12px; bottom:12px; width:auto; } .xs-cookie-open .xs-wa{ transform:translateY(-160px); } }
.xs-wa{ transition:transform .25s var(--xs-ease), box-shadow .25s, bottom .3s var(--xs-ease); }
@media (prefers-reduced-motion:reduce){ .xs-cookie{ transition:none; } }

/* Aviso "Novo no blog" (js/xp-shell.js) — canto inferior esquerdo; o WhatsApp fica à direita */
.xs-news{
  position:fixed; left:20px; bottom:20px; z-index:95; width:min(380px, calc(100vw - 40px));
  display:flex; gap:14px; align-items:flex-start; padding:14px 40px 14px 14px;
  background:#fff; color:var(--xs-ink); border:1px solid var(--xs-line); border-radius:14px;
  box-shadow:0 20px 50px rgba(11,18,32,.16), 0 2px 8px rgba(11,18,32,.06);
  font-family:var(--xs-body); opacity:0; transform:translateY(16px);
  transition:opacity .35s var(--xs-ease), transform .45s var(--xs-ease);
}
.xs-news.show{ opacity:1; transform:none; }
.xs-news-img{ flex:none; width:96px; height:54px; object-fit:cover; object-position:left center; border-radius:8px; background:#eef1f6; }
.xs-news-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.xs-news-k{ font:500 10.5px/1.2 var(--xs-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--xs-brand); }
.xs-news-t{ font:600 14.5px/1.3 var(--xs-display); letter-spacing:-.01em; color:var(--xs-ink); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.xs-news-t:hover{ color:var(--xs-brand); }
.xs-news-go{ margin-top:2px; font:600 13px/1.3 var(--xs-body); color:var(--xs-ink); text-decoration:none; }
.xs-news-go:hover{ color:var(--xs-brand); }
.xs-news-x{ position:absolute; top:6px; right:6px; width:30px; height:30px; border:0; border-radius:8px; background:none;
  font:400 22px/1 var(--xs-body); color:var(--xs-ink-3); cursor:pointer; }
.xs-news-x:hover{ background:#f1f4f9; color:var(--xs-ink); }
.xs-news-x:focus-visible,.xs-news a:focus-visible{ outline:2px solid var(--xs-brand); outline-offset:2px; }
@media (max-width:640px){ .xs-news{ left:12px; right:80px; bottom:14px; width:auto; padding:12px 36px 12px 12px; gap:12px; } .xs-news-img{ width:72px; height:54px; } }
@media (prefers-reduced-motion:reduce){ .xs-news{ transition:none; } }

/* ============================================================
   TEMA C · "Marca forte" (2026-11) — camada sobre a casca
   Fonte Bricolage Grotesque; cabeçalho transparente sobre a
   abertura colorida, ficando branco ao rolar.
   ============================================================ */
@font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:400 800; font-display:swap; src:url(../fonts/bricolage-latin.woff2) format('woff2'); }
@font-face{ font-family:'Bricolage Fallback'; src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo'),local('Helvetica'); size-adjust:105.1%; ascent-override:88.5%; descent-override:25.7%; line-gap-override:0%; }
:root{
  --xs-display:'Bricolage Grotesque','Bricolage Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --xs-body:'Bricolage Grotesque','Bricolage Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --xs-mono:'Bricolage Grotesque','Bricolage Fallback',system-ui,sans-serif;
}
.xs-brand-name{ font-weight:800; font-size:18px; letter-spacing:-.03em; }
.xs-brand-mark{ border-radius:10px; font-weight:800; }
.xs-nav > a,.xs-nav-trigger{ font-weight:500; font-size:15px; border-radius:999px; padding:9px 14px; }
.xs-cta{ border-radius:999px; background:var(--xs-brand); font-weight:700; height:44px; padding:0 20px; }
.xs-cta:hover{ background:var(--xs-brand-700); }
.xs-mega-col .xs-h,.xs-drawer .xs-h{ font-weight:700; letter-spacing:.06em; }
.xs-prod b{ font-weight:700; }

/* cabeçalho sobre a abertura colorida (páginas cuja primeira seção é .hero) */
body:has(main > .hero:first-child) .xs-header:not(.scrolled):not(.is-open){
  background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border-bottom-color:transparent;
}
body:has(main > .hero:first-child) .xs-header:not(.scrolled):not(.is-open) .xs-brand-name{ color:#fff; }
body:has(main > .hero:first-child) .xs-header:not(.scrolled):not(.is-open) .xs-brand-mark{ background:#fff; color:var(--xs-brand); }
body:has(main > .hero:first-child) .xs-header:not(.scrolled):not(.is-open) .xs-nav > a,
body:has(main > .hero:first-child) .xs-header:not(.scrolled):not(.is-open) .xs-nav-trigger{ color:rgba(255,255,255,.9); }
body:has(main > .hero:first-child) .xs-header:not(.scrolled):not(.is-open) .xs-nav > a:hover,
body:has(main > .hero:first-child) .xs-header:not(.scrolled):not(.is-open) .xs-nav-trigger:hover{ color:#fff; background:rgba(255,255,255,.14); }
body:has(main > .hero:first-child) .xs-header:not(.scrolled):not(.is-open) .xs-cta{ background:#fff; color:var(--xs-brand) !important; }
body:has(main > .hero:first-child) .xs-header:not(.scrolled):not(.is-open) .xs-burger{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
body:has(main > .hero:first-child) .xs-header:not(.scrolled):not(.is-open) .xs-burger span{ background:#fff; }
body:has(main > .hero:first-child) main > .hero:first-child{ margin-top:-72px; padding-top:calc(72px + clamp(40px,6vw,88px)); }

/* rodapé */
.xs-footer{ background:#0b1020; }
.xs-footer-tagline{ font-weight:800; letter-spacing:-.035em; }
.xs-footer .xs-fh{ font-weight:700; letter-spacing:.08em; font-size:12px; }
.xs-footer-bot{ font-family:var(--xs-body); }
.xs-nav > a,.xs-nav-trigger{ white-space:nowrap; }
@media (max-width:1240px){ .xs-nav > a,.xs-nav-trigger{ padding:9px 10px; font-size:14.5px; } .xs-bar{ gap:18px; } }
@media (max-width:1120px){ .xs-nav > a[href="index.html#metodo"]{ display:none; } }

/* ============================================================
   MENU DE PRODUTOS — painel em blocos (tema C)
   Grupos em duas colunas, cartões tingidos pela cor de cada
   produto e uma faixa da engenharia sob medida no rodapé.
   A foto da faixa só é baixada quando o menu abre.
   ============================================================ */
.xs-header:has(.xs-mega.open){ background:#fff !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
body:has(main > .hero:first-child) .xs-header:has(.xs-mega.open) .xs-brand-name{ color:var(--xs-ink); }
body:has(main > .hero:first-child) .xs-header:has(.xs-mega.open) .xs-brand-mark{ background:var(--xs-ink); color:#fff; }
body:has(main > .hero:first-child) .xs-header:has(.xs-mega.open) .xs-nav > a,
body:has(main > .hero:first-child) .xs-header:has(.xs-mega.open) .xs-nav-trigger{ color:var(--xs-ink-2); }
body:has(main > .hero:first-child) .xs-header:has(.xs-mega.open) .xs-nav-trigger{ background:#eef2f9; color:var(--xs-ink); }
body:has(main > .hero:first-child) .xs-header:has(.xs-mega.open) .xs-cta{ background:var(--xs-brand); color:#fff !important; }

.xs-mega{ border-top:1px solid var(--xs-line); border-radius:0 0 28px 28px; box-shadow:0 40px 80px -20px rgba(11,16,32,.28); }
.xs-mega-inner{ max-width:1280px; grid-template-columns:1fr 1fr; gap:14px; padding:20px clamp(16px,4vw,40px) 24px; }
.xs-mega-col{ display:flex; flex-direction:column; gap:14px; }
.xs-grp{ background:#f5f7fb; border-radius:20px; padding:14px 14px 14px; }
.xs-grp--fill{ flex:1; }
.xs-grp-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 6px 10px; }
.xs-grp-h b{ font:800 15px/1.2 var(--xs-display); letter-spacing:-.02em; color:var(--xs-ink); }
.xs-grp-h b a:hover{ color:var(--xs-brand); }
.xs-grp-h span{ font-size:12.5px; color:var(--xs-ink-3); text-align:right; }
.xs-grp-cards{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.xs-card{
  display:flex; gap:12px; align-items:center; padding:11px 12px; border-radius:14px;
  background:#fff; border:1px solid transparent; color:var(--xs-ink);
  transition:transform .18s var(--xs-ease), border-color .18s, box-shadow .18s;
}
.xs-card--wide{ grid-column:1/-1; }
.xs-card:hover,.xs-card:focus-visible{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow:0 12px 24px -14px color-mix(in srgb, var(--c) 60%, transparent);
}
.xs-card-ico{
  width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
  color:var(--c); background:color-mix(in srgb, var(--c) 12%, #fff);
  transition:background .18s, color .18s;
}
.xs-card-ico svg{ width:19px; height:19px; }
.xs-card:hover .xs-card-ico,.xs-card:focus-visible .xs-card-ico{ background:var(--c); color:#fff; }
.xs-card b,.xs-side-link b{ display:flex; align-items:center; gap:6px; font:700 15px/1.2 var(--xs-display); letter-spacing:-.015em; color:var(--xs-ink); }
.xs-card small,.xs-side-link small{ display:block; margin-top:3px; font-size:13px; line-height:1.35; color:var(--xs-ink-3); }
.xs-new{ font:700 10px/1 var(--xs-display); font-style:normal; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:999px; background:#e7f6ef; color:#0b6b4d; }
.xs-grp--soon{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:transparent; border:1px dashed #cfd6e3; padding:12px 16px; }
.xs-grp--soon .xs-grp-h{ margin:0; }
.xs-grp--soon .xs-grp-h b{ font-size:14px; color:var(--xs-ink-2); }
.xs-grp--soon .xs-soon{ margin:0; gap:6px; }
.xs-grp--soon .xs-soon span{ padding:5px 11px; border-radius:999px; font-size:12.5px; border:0; background:#eef1f7; }

.xs-mega-strip{ grid-column:1/-1; display:grid; grid-template-columns:1fr 300px; gap:14px; }
.xs-feat{
  position:relative; display:flex; align-items:center; gap:22px;
  padding:18px 24px; border-radius:20px; overflow:hidden; color:#fff;
  background:#0a2f86 center 40%/cover no-repeat;
}
.xs-mega.open .xs-feat{ background-image:url(/img/site/foto-servidores.webp); }
.xs-feat::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, #0b3fb0 0%, rgba(20,87,230,.92) 45%, rgba(10,47,134,.55) 100%); }
.xs-feat > *{ position:relative; }
.xs-feat-k{ flex:none; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.18); font-size:12.5px; font-weight:600; color:#fff; }
.xs-feat b{ flex:1; font:700 16.5px/1.3 var(--xs-display); letter-spacing:-.02em; color:#fff; }
.xs-feat-go{ flex:none; padding:10px 16px; border-radius:999px; background:#fff; color:var(--xs-brand); font-size:14px; font-weight:700; transition:transform .18s; }
.xs-feat:hover .xs-feat-go{ transform:translateX(3px); }
.xs-side-link{ display:flex; gap:12px; align-items:center; padding:12px 16px; border-radius:20px; background:#f5f7fb; color:var(--xs-ink); }
.xs-side-link:hover{ background:#eef2f9; }
.xs-mega-foot{ display:none; }
@media (max-width:1180px){ .xs-feat-k{ display:none; } .xs-mega-strip{ grid-template-columns:1fr 260px; } }