/* ==========================================================================
   Setores: índice (/setores) e página do setor (/setores/<slug>). Classes .sx-*.
   Carregado em todas as páginas pelo layout: tudo aqui usa o prefixo .sx-.
   Tom do setor: .sx-tone-<amber|violet|blue|teal|rose> no hero define as variáveis --sx-*.
   ========================================================================== */

.sx-tone-amber  { --sx-bg: #FFF1D6; --sx-fg: #B7791F; --sx-glow: rgba(245, 170, 60, .34); --sx-shadow: rgba(183, 121, 31, .42); --sx-wash: rgba(255, 233, 196, .55); }
.sx-tone-violet { --sx-bg: #EEE8FF; --sx-fg: #6D4AFF; --sx-glow: rgba(124, 92, 255, .30); --sx-shadow: rgba(109, 74, 255, .45); --sx-wash: rgba(232, 224, 255, .6); }
.sx-tone-blue   { --sx-bg: #E3ECFF; --sx-fg: #1D52E5; --sx-glow: rgba(29, 82, 229, .24); --sx-shadow: rgba(29, 82, 229, .40); --sx-wash: rgba(220, 231, 255, .65); }
.sx-tone-teal   { --sx-bg: #DDF7F2; --sx-fg: #0F9F8E; --sx-glow: rgba(15, 159, 142, .26); --sx-shadow: rgba(15, 159, 142, .40); --sx-wash: rgba(214, 245, 238, .6); }
.sx-tone-rose   { --sx-bg: #FFE6F2; --sx-fg: #DB2777; --sx-glow: rgba(219, 39, 119, .20); --sx-shadow: rgba(219, 39, 119, .36); --sx-wash: rgba(255, 228, 241, .62); }

/* ------------------------------------------------------------ hero (índice e setor) */
.sx-hero { padding: 48px var(--pad-x) 48px; overflow: hidden; }
.sx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 40px; align-items: center; }
.sx-copy .breadcrumbs { margin-bottom: 22px; }
.sx-hero h1 { font-size: 54px; line-height: 1.05; letter-spacing: -0.035em; margin: 0; max-width: 600px; }
.sx-hero h1 .grad { padding-bottom: .06em; }
.sx-hero .lead { margin: 20px 0 0; max-width: 530px; }
.sx-ctas { margin-top: 30px; }
.sx-down { transform: rotate(90deg); transition: transform .3s var(--ease); }
.btn:hover .sx-down { transform: rotate(90deg) translateX(3px); }

/* visual comum: brilho + órbitas */
.sx-visual { position: relative; height: 470px; }
.sx-glow { position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(167, 139, 250, .42), rgba(91, 140, 255, .14) 62%, transparent); filter: blur(18px); pointer-events: none; }
.sx-orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sx-orbits ellipse { stroke: rgba(124, 92, 255, .2); stroke-width: 1; }
.sx-orbits ellipse + ellipse { stroke: rgba(124, 92, 255, .16); stroke-dasharray: 3 7; }

/* índice: símbolo 3D da Oneby no centro e os setores em órbita */
.sx-mark { position: absolute; left: 50%; top: 50%; width: 236px; height: auto; margin: -118px 0 0 -118px; z-index: 1; filter: drop-shadow(0 34px 44px rgba(109, 74, 255, .26)); animation: floaty 9s ease-in-out infinite; }
.sx-node { position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%); border-radius: 18px; animation: floaty 8s ease-in-out var(--d, 0s) infinite; }
.sx-node .ico {
  width: 54px; height: 54px; border-radius: 17px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .78), inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 30px -16px rgba(76, 62, 170, .55);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sx-node .ico .icon { width: 22px; height: 22px; }
.sx-node::after {
  content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 4px);
  padding: 6px 11px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-size: 12.5px; font-weight: 600; line-height: 1.2; color: #fff; background: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(11, 16, 32, .6); opacity: 0; transition: opacity .2s, transform .25s var(--ease);
}
.sx-node:hover, .sx-node.is-hot { z-index: 4; }
.sx-node:hover .ico, .sx-node.is-hot .ico { transform: scale(1.12); box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(124, 92, 255, .22), 0 22px 34px -16px rgba(76, 62, 170, .6); }
.sx-node:hover::after, .sx-node.is-hot::after { opacity: 1; transform: translate(-50%, 0); }
.sx-fc { display: grid; justify-items: start; gap: 0; padding: 13px 18px 14px; transform: translate(-50%, -50%); }
.sx-fc small { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.sx-fc .sx-num { font-size: 34px; line-height: 1.05; letter-spacing: -0.045em; margin-top: 4px; }
/* posições 2 e 8 da órbita (60° e 240° a partir do topo), deixadas livres pelos setores */
.sx-hero:not(.sx-sector) .sx-fc-a { left: 88.97%; top: 28.5%; }
.sx-hero:not(.sx-sector) .sx-fc-b { left: 11.03%; top: 71.5%; }

/* ------------------------------------------------------------ hero do setor: emblema na cor do setor */
.sx-sector { background: radial-gradient(52% 78% at 80% 46%, var(--sx-wash), transparent 72%), var(--glass-panel); }
.sx-sector h1 { font-size: 54px; max-width: 600px; hyphens: manual; }
/* H1 do setor: nome do setor (palavra-chave) em tinta + headline menor em gradiente, como nome + cargo da referência */
.sx-h1-name { display: block; text-wrap: balance; }
.sx-sector h1 .sx-h1-sub { margin-top: .2em; font-size: .64em; line-height: 1.14; letter-spacing: -0.03em; text-wrap: balance; }
.sx-pill {
  display: inline-flex; align-items: center; gap: 9px; min-height: 36px; margin: 0 0 22px; padding: 4px 15px 4px 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--inset), 0 10px 24px -18px rgba(76, 62, 170, .5), 0 0 0 1px rgba(31, 36, 55, .04);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.sx-pill .ico { border-radius: 50%; }
.sx-who { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.sx-who-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle-text); }
.sx-who .chip { cursor: default; }

.sx-sector .sx-glow { width: 58%; background: radial-gradient(closest-side, var(--sx-glow), rgba(167, 139, 250, .14) 62%, transparent); }
.sx-emblem {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 212px; height: 212px; margin: -106px 0 0 -106px;
  display: grid; place-items: center; border-radius: 60px; color: var(--sx-fg);
  background: linear-gradient(152deg, #fff 6%, rgba(255, 255, 255, .78) 36%, rgba(255, 255, 255, 0) 74%), var(--sx-bg);
  border: 1.5px solid rgba(255, 255, 255, .96);
  box-shadow: inset 0 2px 0 #fff, inset 0 -34px 54px -26px var(--sx-glow), inset -10px -10px 30px -18px var(--sx-shadow), 0 0 0 12px rgba(255, 255, 255, .34), 0 54px 80px -40px var(--sx-shadow);
  transform: rotate(-8deg);
  animation: floaty 9s ease-in-out infinite;
}
.sx-emblem::before { content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 46%; border-radius: 52px 52px 40px 40px; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); pointer-events: none; }
.sx-emblem .icon { position: relative; width: 96px; height: 96px; stroke-width: 1.3; filter: drop-shadow(0 10px 14px var(--sx-glow)); }
.sx-orb { position: absolute; z-index: 1; width: 150px; height: auto; left: calc(50% - 176px); top: calc(50% - 186px); opacity: .95; filter: saturate(.85) brightness(1.04) drop-shadow(0 26px 34px rgba(109, 74, 255, .18)); pointer-events: none; }
.sx-star { left: calc(50% + 112px); top: calc(50% + 34px); }
.sx-sat { position: absolute; z-index: 2; transform: translate(-50%, -50%); }
.sx-sat .ico { box-shadow: 0 0 0 4px rgba(255, 255, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 26px -14px rgba(76, 62, 170, .55); }
.sx-sat-1 { left: 6%; top: 50%; }
.sx-sat-2 { left: 94%; top: 50%; }
.sx-sat-3 { left: 72%; top: 86%; }
.sx-sector .sx-fc-a { left: 79%; top: 15%; }
.sx-sector .sx-fc-b { left: 21%; top: 84%; }
.sx-fc-note { font-size: 12.5px !important; font-weight: 600 !important; color: var(--muted); margin-top: 2px; }
.sx-fc-case { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; color: inherit; }
.sx-fc-case img { width: 76px; height: 50px; border-radius: 10px; object-fit: cover; flex: none; background: linear-gradient(135deg, #ECE8FF, #E3ECFF); }
.sx-fc-case > span:not(.ico) { display: grid; line-height: 1.25; }
.sx-fc-case > .ico { width: 50px; height: 50px; border-radius: 13px; flex: none; }
.sx-fc-case small { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #0B7366; }
.sx-fc-case strong { font-size: 14.5px; letter-spacing: -0.01em; margin: 2px 0 0; white-space: nowrap; }
.sx-fc-checks { display: grid; gap: 6px; padding: 12px 16px; }
.sx-fc-checks span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #0B7366; }

/* ------------------------------------------------------------ índice: cartões de setor */
.sx-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sx-card { padding: 20px 20px 18px; min-height: 248px; }
.sx-card h3 { margin: 18px 0 8px; font-size: 16px; line-height: 1.25; min-height: 2.5em; text-wrap: balance; }
.sx-card > p:not(.sx-card-meta) { font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.sx-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: auto 0 0 !important; padding: 16px 40px 0 0; font-size: 12.5px !important; font-weight: 500; color: var(--subtle-text) !important; line-height: 1.35 !important; }
.sx-live { display: inline-flex; align-items: center; gap: 6px; color: #0B7366; font-weight: 600; }
.sx-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(16, 185, 129, .16); }
.sx-card .card-arrow { right: 14px; bottom: 14px; }
.sx-origin { position: absolute; top: 22px; right: 18px; }
.sx-card.is-hot { transform: translateY(-4px); box-shadow: var(--inset), var(--shadow-hover); background: rgba(255, 255, 255, .94); }
.sx-card.is-hot .card-arrow { background: var(--ink); color: #fff; }
.sx-note { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 12px 16px 12px 12px; border-radius: 18px; font-size: 14.5px; color: var(--muted); background: rgba(255, 255, 255, .45); border: 1px dashed rgba(124, 92, 255, .3); }
.sx-note .link-arrow { margin-left: 4px; color: var(--violet-strong); }

/* índice: "o mesmo cuidado" */
.sx-way-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sx-way-item { padding: 20px 20px 22px; border-radius: var(--r-card); background: var(--glass-card); border: 1px solid #fff; box-shadow: var(--inset), var(--shadow-card); }
.sx-way-item h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 6px; font-size: 16px; }
.sx-way-item p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.sx-way .section-head { margin-bottom: 28px; }

/* ------------------------------------------------------------ setor: dores + abordagem */
.sx-row > .panel h2 { font-size: 30px; margin: 0; }
.sx-pains { display: flex; flex-direction: column; }
.sx-pains-link { align-self: flex-start; margin-top: auto; }
.sx-pain-list { display: grid; gap: 10px; margin: 24px 0 28px; }
/* os dois painéis da linha têm a mesma altura: a sobra do mais curto vai para o espaçamento da lista
   (dores ou etapas), não para um vão antes do botão */
.sx-pains .sx-pain-list, .sx-how .sx-mini-steps { flex-grow: 1; align-content: space-evenly; }
.sx-pain {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 18px 12px 12px; border-radius: 16px;
  background: var(--glass-card); border: 1px solid #fff; box-shadow: var(--inset), 0 12px 26px -20px rgba(76, 62, 170, .45);
}
.sx-pain .ico { width: 34px; height: 34px; border-radius: 10px; }
.sx-pain .ico .icon { width: 16px; height: 16px; }
.sx-pain-txt { font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.4; text-wrap: pretty; }
.sx-how { display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(255, 255, 255, .64), rgba(238, 232, 255, .56)); }
.sx-about { margin-top: 14px; font-size: 15.5px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.sx-about p { margin: 0 0 .8em; }
.sx-about p:last-child { margin: 0; }
.sx-about a { color: var(--violet-strong); text-decoration: underline; text-underline-offset: 3px; }
.sx-mini-steps { display: grid; gap: 12px; margin: 24px 0 28px; }
.sx-mini-steps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.sx-mini-steps strong { color: var(--ink); font-weight: 600; }
.sx-how-cta { margin-top: auto; align-self: flex-start; }

/* ------------------------------------------------------------ setor: soluções por área */
.sx-cats { display: grid; }
.sx-cat { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 30px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.sx-cat:first-child { border-top: 0; padding-top: 0; }
.sx-cat:last-child { padding-bottom: 0; }
.sx-cat-head { display: flex; align-items: flex-start; gap: 14px; padding-top: 8px; }
.sx-cat-head h3 { margin: 1px 0 4px; font-size: 16.5px; }
.sx-cat-head p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.sx-svc-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sx-svc-list > li { grid-column: span 2; }
/* 3 por linha; 2 sobrando dividem a linha e 4 = 2 x 2. Um item sozinho fica com meia linha (nunca a linha toda,
   que esticaria a pílula com texto curto) */
@media (min-width: 1081px) {
  .sx-svc-list > li:only-child { grid-column: span 3; }
  .sx-svc-list > li:nth-last-child(2):nth-child(3n+1), .sx-svc-list > li:nth-last-child(2):nth-child(3n+1) ~ li,
  .sx-svc-list > li:nth-last-child(4):nth-child(3n+1), .sx-svc-list > li:nth-last-child(4):nth-child(3n+1) ~ li { grid-column: span 3; }
}
.sx-svc {
  position: relative; display: flex; align-items: center; gap: 12px; height: 100%; min-height: 70px; padding: 12px 46px 12px 12px; border-radius: 16px; color: inherit;
  background: var(--glass-card); border: 1px solid #fff; box-shadow: var(--inset), 0 12px 26px -20px rgba(76, 62, 170, .45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s;
}
.sx-svc-txt { display: grid; min-width: 0; line-height: 1.3; }
.sx-svc-txt strong { font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; text-wrap: pretty; hyphens: manual; }
.sx-svc-txt small { margin-top: 3px; font-size: 12.5px; color: var(--subtle-text); }
.sx-svc-txt small b { color: var(--ink); font-weight: 600; }
.sx-svc-arrow, .sx-mini-arrow {
  position: absolute; right: 12px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, .9); box-shadow: var(--inset), 0 6px 16px -10px rgba(76, 62, 170, .45), 0 0 0 1px rgba(31, 36, 55, .06);
  transition: background-color .25s, color .25s;
}
.sx-svc-arrow .icon, .sx-mini-arrow .icon { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.sx-svc:hover, .sx-mini:hover { background: #fff; box-shadow: var(--inset), 0 18px 34px -22px rgba(76, 62, 170, .55), 0 0 0 1px rgba(124, 92, 255, .14); }
.sx-svc:hover .sx-svc-arrow, .sx-mini:hover .sx-mini-arrow { background: var(--ink); color: #fff; }
.sx-svc:hover .sx-svc-arrow .icon, .sx-mini:hover .sx-mini-arrow .icon { transform: rotate(45deg); }

/* poucos serviços: grade de cartões com a área como sobretítulo */
.sx-svc-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
.sx-svc-card { padding: 22px 22px 20px; min-height: 236px; }
.sx-svc-card .card-icon { margin-bottom: 16px; }
.sx-svc-card .sx-svc-kicker { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--violet-strong); }
.sx-svc-card h3 { font-size: 17px; margin: 0 0 6px; hyphens: manual; text-wrap: balance; }
.sx-svc-card > p:not(.sx-svc-kicker) { font-size: 14px; line-height: 1.5; text-wrap: pretty; }

/* ------------------------------------------------------------ setor: projetos (case em destaque + demais) */
.sx-case {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 10px;
  border-radius: 24px; background: var(--glass-card); border: 1px solid #fff; box-shadow: var(--inset), var(--shadow-card);
}
.sx-case-media .mockup, .sx-case-media .work-media { border-radius: 16px; }
.sx-case-media .mockup { padding: 26px 26px 0; }
.sx-case-body { padding: 16px 30px 16px 0; }
.sx-case-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--subtle-text); }
.sx-case-kicker .badge .icon { width: 12px; height: 12px; fill: currentColor; }
.sx-case-body h3 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; }
.sx-case-body h3 a:hover { color: var(--violet-strong); }
.sx-case-sum { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.sx-case-body .tag-row { margin-top: 18px; }
.sx-case-actions { margin-top: 26px; }
.sx-case-actions .btn-glass span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sx-rest { margin-top: 20px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.sx-rest .work-body h3 { font-size: 15.5px; }

/* um só projeto além do destaque: cartão horizontal, texto à esquerda e mockup menor (~40%) à direita */
.sx-case.is-secondary { margin-top: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); }
.sx-case.is-secondary .sx-case-body { padding: 16px 0 16px 30px; }
.sx-case.is-secondary .sx-case-body h3 { font-size: 22px; }
.sx-case.is-secondary .sx-case-sum { font-size: 15px; }
.sx-case.is-secondary .sx-case-actions { margin-top: 22px; align-items: center; gap: 18px; }
.sx-case.is-secondary .sx-case-media .mockup { padding: 22px 22px 0; }
.sx-case.is-secondary .phone { right: 16px; bottom: -20px; }
.sx-case.is-secondary .sx-live { font-size: 13px; }
.sx-case-site { color: var(--muted); font-size: 14px; }
.sx-case-site .icon { width: 15px; height: 15px; }

/* case com mockup fraco (ex.: só a tela de login): logo do cliente sobre o gradiente pastel, com vidro 3D */
.sx-brand {
  position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 90% at 80% 14%, var(--sx-wash, rgba(232, 224, 255, .6)), transparent 70%), radial-gradient(60% 70% at 18% 90%, rgba(220, 231, 255, .9), transparent 70%), linear-gradient(135deg, #EEE9FF 0%, #E3ECFF 55%, #F6E8FF 100%);
}
.sx-brand-orb { position: absolute; z-index: -1; width: 30%; height: auto; left: 5%; bottom: 5%; filter: saturate(.9) drop-shadow(0 26px 34px rgba(109, 74, 255, .2)); pointer-events: none; }
.sx-brand-star { position: absolute; z-index: -1; width: 74px; height: auto; right: 10%; top: 13%; transform: rotate(12deg); pointer-events: none; }
.sx-brand-plate {
  display: grid; justify-items: center; gap: 18px; padding: 38px 48px 28px; border-radius: 24px;
  background: rgba(255, 255, 255, .58); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--inset), 0 30px 60px -34px rgba(76, 62, 170, .45);
  transition: transform .5s var(--ease);
}
.sx-brand-logo { width: 250px; max-width: 100%; height: auto; filter: brightness(.38); }
.sx-brand-name { font-size: 30px; letter-spacing: -0.03em; color: var(--ink); }
.sx-brand-url { padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(31, 36, 55, .05); font-size: 13px; }
.sx-case:hover .sx-brand-plate { transform: translateY(-3px); }

/* outros projetos (setor cujo único case tem mockup fraco) */
.sx-more-label { display: flex; align-items: center; gap: 14px; margin: 32px 0 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle-text); }
.sx-more-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sx-more-label + .sx-rest { margin-top: 0; }

/* ------------------------------------------------------------ setor: outros setores */
.sx-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sx-mini-grid > li { min-width: 0; }
.sx-mini {
  position: relative; display: flex; align-items: center; gap: 14px; height: 100%; min-height: 78px; padding: 14px 54px 14px 14px; border-radius: 18px; color: inherit;
  background: var(--glass-card); border: 1px solid #fff; box-shadow: var(--inset), 0 12px 26px -20px rgba(76, 62, 170, .45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s;
}
.sx-mini .ico { width: 42px; height: 42px; border-radius: 12px; }
.sx-mini-txt { display: grid; min-width: 0; line-height: 1.3; }
.sx-mini-txt strong { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.sx-mini-txt small { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-wrap: pretty; }

@media (hover: hover) and (pointer: fine) {
  .sx-svc:hover, .sx-mini:hover { transform: translateY(-2px); }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1220px) {
  .sx-hero h1 { font-size: 48px; }
  .sx-sector h1 { font-size: 44px; }
  .sx-visual { height: 440px; }
  .sx-mark { width: 210px; margin: -105px 0 0 -105px; }
  .sx-node .ico { width: 48px; height: 48px; border-radius: 15px; }
  .sx-fc .sx-num { font-size: 30px; }
  .sx-emblem { width: 188px; height: 188px; margin: -94px 0 0 -94px; border-radius: 54px; }
  .sx-emblem .icon { width: 84px; height: 84px; }
  .sx-orb { width: 134px; left: calc(50% - 158px); top: calc(50% - 168px); }
  .sx-star { left: calc(50% + 98px); }
  .sx-card { padding: 18px 16px 16px; }
  .sx-cat { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; }
  .sx-case-body { padding-right: 20px; }
}
@media (max-width: 1080px) {
  .sx-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; }
  .sx-hero h1 { font-size: 42px; }
  .sx-sector h1 { font-size: 40px; }
  .sx-visual { height: 400px; }
  .sx-mark { width: 180px; margin: -90px 0 0 -90px; }
  .sx-node .ico { width: 42px; height: 42px; border-radius: 13px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .78), 0 14px 24px -14px rgba(76, 62, 170, .55); }
  .sx-node .ico .icon { width: 19px; height: 19px; }
  .sx-fc { padding: 10px 14px 11px; }
  .sx-fc .sx-num { font-size: 26px; }
  .sx-sector .sx-fc-b { left: 0; transform: translate(0, -50%); }
  .sx-sat-3 { display: none; }
  .sx-emblem { width: 164px; height: 164px; margin: -82px 0 0 -82px; border-radius: 46px; }
  .sx-emblem .icon { width: 72px; height: 72px; }
  .sx-orb { width: 116px; left: calc(50% - 138px); top: calc(50% - 146px); }
  .sx-star { left: calc(50% + 86px); top: calc(50% + 24px); width: 60px; height: 60px; }
  .sx-fc-case img { width: 60px; height: 40px; }
  /* índice: 2 colunas de cartões em linha (ícone à esquerda) */
  .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sx-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-content: start; min-height: 0; padding: 16px 54px 16px 16px; }
  .sx-card > .card-icon { grid-row: span 4; margin: 0; }
  .sx-card > :not(.card-icon, .card-arrow) { grid-column: 2; }
  .sx-card h3 { min-height: 0; margin: 0 0 4px; }
  .sx-card .sx-origin { position: static; justify-self: start; margin-bottom: 6px; }
  .sx-card-meta { padding: 10px 0 0; }
  .sx-card .card-arrow { top: 16px; bottom: auto; right: 14px; width: 32px; height: 32px; }
  .sx-way-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-svc-grid[style*="--cols:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-rest[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-svc-list > li { grid-column: auto; }
}
@media (max-width: 860px) {
  .sx-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .sx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sx-visual { max-width: 560px; width: 100%; margin: 0 auto; }
  .sx-cat { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sx-cat-head { padding-top: 0; }
  .sx-case, .sx-case.is-secondary { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sx-case-body, .sx-case.is-secondary .sx-case-body { padding: 14px 14px 16px; }
  .sx-case.is-secondary .sx-case-media { order: -1; }
}
@media (max-width: 720px) {
  .sx-hero { padding: 26px var(--pad-x) 24px; }
  .sx-copy .breadcrumbs { margin-bottom: 16px; }
  .sx-hero h1, .sx-sector h1 { font-size: 35px; line-height: 1.07; }
  .sx-hero .lead { font-size: 16px; margin-top: 14px; }
  .sx-ctas { margin-top: 22px; gap: 10px; }
  .sx-ctas .btn { width: 100%; --h: 52px; }
  .sx-pill { margin-bottom: 16px; font-size: 13px; }
  .sx-who { margin-top: 24px; padding-top: 18px; gap: 10px; }
  .sx-who .chip-row { gap: 6px; }

  .sx-visual { height: 330px; margin-top: 12px; }
  .sx-hero:not(.sx-sector) .sx-visual { height: 410px; }
  .sx-mark { width: 150px; margin: -75px 0 0 -75px; }
  /* celular: 10 posições uniformes numa elipse mais baixa; os cartões flutuantes ficam nos cantos livres (em cima à direita, embaixo à esquerda) */
  .sx-node { left: var(--mx); top: calc(50% + (var(--my) - 50%) * .78); }
  .sx-hero:not(.sx-sector) .sx-orbits { transform: scaleY(.78); }
  .sx-node .ico { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 12px 20px -12px rgba(76, 62, 170, .55); }
  .sx-node .ico .icon { width: 17px; height: 17px; }
  .sx-node::after { display: none; }
  .sx-visual .float-card { background: rgba(255, 255, 255, .86); }
  .sx-fc { padding: 8px 12px 9px; border-radius: 16px; transform: none; }
  .sx-fc small { font-size: 12px; }
  .sx-fc .sx-num { font-size: 22px; margin-top: 2px; }
  .sx-hero:not(.sx-sector) .sx-fc-a { left: auto; right: 0; top: 0; }
  .sx-hero:not(.sx-sector) .sx-fc-b { left: 0; top: auto; bottom: 0; }

  .sx-emblem { width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 38px; box-shadow: inset 0 2px 0 #fff, inset 0 -16px 30px -14px var(--sx-glow), 0 0 0 8px rgba(255, 255, 255, .32), 0 34px 50px -28px var(--sx-shadow); }
  .sx-emblem::before { border-radius: 32px 32px 24px 24px; }
  .sx-emblem .icon { width: 58px; height: 58px; }
  .sx-orb { width: 94px; left: calc(50% - 110px); top: calc(50% - 118px); }
  .sx-star { width: 48px; height: 48px; left: calc(50% + 66px); top: calc(50% + 18px); }
  .sx-sat .ico { width: 32px; height: 32px; border-radius: 10px; }
  .sx-sat .ico .icon { width: 15px; height: 15px; }
  .sx-sat-1 { left: 6%; top: 50%; }
  .sx-sat-2 { left: 94%; top: 50%; }
  .sx-sector .sx-fc-a { left: auto; right: 0; top: 0; }
  .sx-sector .sx-fc-b { left: 0; top: auto; bottom: 0; transform: none; }
  .sx-fc-case { padding: 6px 12px 6px 6px; gap: 9px; }
  .sx-fc-case img { width: 52px; height: 35px; border-radius: 8px; }
  .sx-fc-case > .ico { width: 38px; height: 38px; border-radius: 11px; }
  .sx-fc-case small { font-size: 11px; }
  .sx-fc-case strong { font-size: 13px; }

  .sx-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sx-card { padding: 14px 52px 14px 14px; }
  .sx-card > .card-icon { width: 40px; height: 40px; }
  .sx-card h3 { font-size: 15.5px; }
  .sx-card > p:not(.sx-card-meta) { font-size: 14px; }
  .sx-card-meta { padding-top: 8px; }
  .sx-card .card-arrow { top: 14px; right: 12px; }
  .sx-note { align-items: flex-start; font-size: 14px; padding: 10px 12px 10px 10px; }
  .sx-note .ico { width: 32px; height: 32px; }
  .sx-way-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sx-way-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 14px 16px 14px 14px; }
  .sx-way-item > .ico { grid-row: span 2; }
  .sx-way-item h3 { margin: 2px 0 2px; font-size: 15.5px; }
  .sx-way-item p { font-size: 14px; }

  .sx-row > .panel h2 { font-size: 25px; }
  .sx-pain-list { margin: 18px 0 22px; gap: 8px; }
  .sx-pain { min-height: 54px; padding: 10px 14px 10px 10px; gap: 12px; }
  .sx-pain-txt { font-size: 15px; }
  .sx-about { font-size: 15px; }
  .sx-mini-steps { margin: 18px 0 22px; }
  .sx-mini-steps li { font-size: 14px; align-items: flex-start; }
  .sx-how-cta, .sx-pains-link { align-self: stretch; }

  .sx-cat { padding: 18px 0; gap: 12px; }
  .sx-cat-head .ico { width: 40px; height: 40px; }
  .sx-cat-head { align-items: center; }
  .sx-cat-head h3 { font-size: 16px; margin: 0; }
  .sx-cat-head p { display: none; }
  .sx-svc-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sx-svc-grid, .sx-svc-grid[style] { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sx-svc-card { min-height: 0; }
  .sx-svc-card .sx-svc-kicker { margin-bottom: 2px; font-size: 12px; }
  .sx-svc-card > p:not(.sx-svc-kicker) { display: none; }
  .sx-svc { min-height: 62px; padding: 10px 48px 10px 10px; }

  .sx-case { padding: 8px; border-radius: 20px; }
  .sx-case-media .mockup { padding: 16px 16px 0; }
  .sx-case-media .phone { right: 12px; padding: 4px; border-radius: 16px; bottom: -14px; min-width: 70px; }
  .sx-case-media .phone img { border-radius: 12px; }
  .sx-case-body { padding: 12px 8px 10px; }
  .sx-case-body h3 { font-size: 22px; }
  .sx-case-sum { font-size: 15px; }
  .sx-case-actions .btn { flex: 1 1 auto; }
  .sx-case.is-secondary { margin-top: 12px; }
  .sx-case.is-secondary .sx-case-body { padding: 12px 8px 10px; }
  .sx-case.is-secondary .sx-case-body h3 { font-size: 20px; }
  .sx-case.is-secondary .sx-case-media .mockup { padding: 16px 16px 0; }
  .sx-case.is-secondary .sx-case-actions { gap: 14px; }
  .sx-brand-plate { gap: 14px; padding: 24px 26px 18px; border-radius: 20px; }
  .sx-brand-logo { width: 180px; }
  .sx-brand-star { width: 44px; right: 6%; top: 7%; }
  .sx-more-label { margin: 24px 0 10px; }
  .sx-rest { margin-top: 14px; }

  .sx-mini-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sx-mini { min-height: 64px; padding: 10px 50px 10px 10px; }
  .sx-mini .ico { width: 38px; height: 38px; }
}
@media (max-width: 380px) {
  .sx-hero h1, .sx-sector h1 { font-size: 31px; }
  .sx-visual { height: 300px; }
  .sx-star { display: none; }
}
/* celular / toque: sem animação contínua no visual (o vidro é refeito a cada quadro) */
@media (max-width: 720px), (pointer: coarse) {
  .sx-mark, .sx-node, .sx-emblem { animation: none; }
}
@media (hover: none) {
  .sx-node:hover .ico { transform: none; }
}