/* ════════════════════════════════════════════════════════════════════════
   Páginas de SEGMENTO — folha única
   ────────────────────────────────────────────────────────────────────────
   As páginas de segmento são landings comerciais curtas: três telas —
   desejo, como a FOOZ transforma a operação, prova e conversão. Elas NÃO
   repetem a Home nem as páginas de Soluções; quando o visitante quer
   aprofundar, o link leva para lá.

   A primeira metade deste arquivo é o casco compartilhado com as demais
   páginas do site (tokens, base, cabeçalho, rodapé). A segunda metade são
   os componentes próprios da landing de segmento.
   ════════════════════════════════════════════════════════════════════════ */

  :root {
    --navy-950:#050d24; --navy-900:#0a1736; --navy-800:#0f2050; --navy-700:#163080;
    --blue-600:#1f4ed8; --blue-500:#2867ff; --blue-400:#3b82f6;
    --cyan-500:#06b6f0; --cyan-400:#38bdf8; --cyan-300:#7dd3fc;
    --ice-100:#e8f1ff; --ice-50:#f4f8ff; --white:#fff;
    --gray-900:#0f172a; --gray-700:#334155; --gray-500:#64748b; --gray-300:#cbd5e1; --gray-200:#e2e8f0; --gray-100:#f1f5f9;
    --grad: linear-gradient(135deg, var(--cyan-400) 0%, var(--blue-500) 50%, var(--navy-700) 100%);
    --amber:#f3b41c; --green:#19b981;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { font-family:"Inter",system-ui,sans-serif; color:var(--gray-900); background:var(--white); -webkit-font-smoothing:antialiased; line-height:1.55; text-wrap:pretty; }
  h1,h2,h3,h4 { font-family:"Sora","Inter",sans-serif; letter-spacing:-0.02em; margin:0; }
  p { margin:0; }
  a { color:inherit; text-decoration:none; }
  .wrap { max-width:1160px; margin:0 auto; padding:0 28px; }
  .eyebrow { font-family:"Sora",sans-serif; font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--blue-500); }
  .eyebrow.on-dark { color:var(--cyan-400); }
  em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

  /* ─── NAV · igual à landing principal ─── */
  .nav { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(255,255,255,0.78); border-bottom:1px solid rgba(15,23,42,0.06); }
  .nav-inner { display:flex; align-items:center; gap:36px; height:76px; max-width:1200px; margin:0 auto; padding:0 24px; }
  .logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .logo img { display:block; height:54px; width:auto; }
  .nav-links { display:flex; gap:28px; flex:1; justify-content:center; align-items:center; }
  .nav-links > a, .nav-links > .nav-item > a { font-size:14px; font-weight:500; color:var(--gray-700); transition:color .2s; text-decoration:none; }
  .nav-links > a:hover, .nav-links > .nav-item > a:hover { color:var(--blue-500); }
  .nav-item { position:relative; }
  .nav-item > a { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
  .nav-item > a .chev { transition:transform .2s; }
  .nav-item:hover > a .chev, .nav-item.is-open > a .chev { transform:rotate(180deg); }
  .nav-dropdown { position:absolute; top:100%; left:50%; transform:translate(-50%,0); margin-top:14px; min-width:320px; background:white; border:1px solid rgba(0,29,130,0.10); border-radius:16px; padding:10px; box-shadow:0 28px 60px -20px rgba(0,15,90,.30), 0 8px 24px -10px rgba(0,29,130,.16), inset 0 1px 0 rgba(255,255,255,.95); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s, transform .25s, visibility .22s; z-index:60; }
  .nav-item:hover .nav-dropdown, .nav-item.is-open .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity:1; visibility:visible; pointer-events:auto; }
  .nav-dropdown::after { content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
  .nav-dropdown::before { content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:white; border-left:1px solid rgba(0,29,130,0.10); border-top:1px solid rgba(0,29,130,0.10); }
  .nav-dropdown a { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:10px; color:var(--gray-700); font-size:14px; font-weight:500; transition:background .18s, color .18s; text-decoration:none; }
  .nav-dropdown a:hover { background:linear-gradient(135deg, rgba(0,176,251,.10), rgba(13,14,255,.06)); color:#0D0EFF; }
  .nav-dropdown a:hover .nd-ttl { color:#001D82; }
  .nav-dropdown .nd-ico { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg, var(--cyan-400), var(--blue-500), var(--navy-700)); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 6px 14px -6px rgba(13,14,255,0.45); transition:transform .25s; }
  .nav-dropdown a:hover .nd-ico { transform:scale(1.05); }
  .nav-dropdown .nd-body { display:flex; flex-direction:column; gap:2px; padding-top:2px; }
  .nav-dropdown .nd-ttl { font-size:13px; font-weight:600; color:var(--navy-900); }
  .nav-dropdown .nd-sub { font-size:11.5px; color:var(--gray-500); font-weight:400; line-height:1.35; }
  /* A descricao de cada item ocupa UMA linha: o dropdown cresce ate caber
     (menu-site-fooz.md). Teto para nao estourar em telas de 1025-1180px. */
  .nav-dropdown { width: max-content; max-width: min(480px, 92vw); }
  .nav-dropdown .nd-sub { white-space: nowrap; }

  .nav-dropdown .nd-star { color:#F3B41C; margin-left:6px; font-size:11px; }
  .nav-dropdown a.nd-all { align-items:center; justify-content:space-between; margin-top:4px; padding-top:12px; border-top:1px solid var(--gray-200); font-size:13px; font-weight:700; color:#0D0EFF; }
  .nav-dropdown a.nd-all:hover { background:rgba(13,14,255,0.06); color:#0D0EFF; }
  .nav-cta { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, var(--cyan-400), var(--blue-500), var(--navy-700)); color:#fff; padding:12px 22px; border-radius:999px; font-size:14px; font-weight:500; transition:transform .2s, box-shadow .2s; box-shadow:0 10px 28px -10px rgba(13,14,255,0.45); text-decoration:none; }
  .nav-cta:hover { transform:translateY(-1px); box-shadow:0 14px 36px -10px rgba(13,14,255,0.55); }
  .nav-cta-secondary { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--navy-900); padding:11px 18px; border-radius:999px; border:1.5px solid var(--navy-900); font-size:13px; font-weight:600; transition:background .2s, color .2s, transform .2s; margin-right:12px; flex-shrink:0; text-decoration:none; }
  .nav-cta-secondary:hover { background:var(--cyan-400); border-color:var(--cyan-400); transform:translateY(-1px); }
  .nav-cta-group { display:inline-flex; align-items:center; flex-shrink:0; }
  @media (max-width:1100px){ .nav-links{ display:none; } }
  @media (max-width:900px){ .nav-cta-secondary{ display:none; } }

  /* SECTIONS */
  .section { padding:84px 0; }
  .section.alt { background:var(--ice-50); border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100); }
  .sec-head { max-width:720px; margin-bottom:40px; }
  .sec-head h2 { font-size:clamp(26px,3.2vw,38px); font-weight:800; margin-top:10px; line-height:1.1; }
  .sec-head p { margin-top:14px; color:var(--gray-500); font-size:16px; }

  /* CTA */
  .cta-band { background:var(--grad); border-radius:26px; padding:54px; text-align:center; color:#fff; }
  .cta-band h2 { font-size:clamp(26px,3.2vw,36px); font-weight:800; }
  .cta-band p { margin-top:12px; color:rgba(255,255,255,.85); font-size:16px; }
  .cta-btn { display:inline-flex; align-items:center; gap:10px; margin-top:24px; background:#fff; color:var(--navy-900); padding:15px 30px; border-radius:999px; font-weight:700; font-size:15px; transition:transform .2s; }
  .cta-btn:hover { transform:translateY(-2px); }

  /* FOOTER */
  .footer { background:var(--navy-950); color:rgba(255,255,255,.6); padding:34px 0; }
  .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .footer img { height:30px; filter:brightness(0) invert(1); }

  @media (max-width:880px){
    .green-grid{ grid-template-columns:1fr; }
    /* no celular o texto cobre a largura toda: entra o recorte fechado nas
       torres e o véu passa a ser vertical, para o texto não disputar com a
       foto */
    .hero { min-height:0; padding:52px 0 60px;
      background-image:
        linear-gradient(180deg, rgba(4,11,32,.94) 0%, rgba(4,11,32,.88) 42%, rgba(4,11,32,.62) 70%, rgba(4,11,32,.80) 100%),
        radial-gradient(700px 420px at 10% 20%, rgba(40,103,255,.18), transparent 60%),
        url("../assets/segmentos/condominios/hero-condominio-mob.webp");
      background-size:auto, auto, cover;
      background-position:center, center, center bottom; }
    .hero::before { mask:linear-gradient(180deg,#000 0%,#000 40%,transparent 72%); }
    .hero-grid{ max-width:none; }
    .frentes,.stack{ grid-template-columns:1fr; }
    .dash,.cap-grid,.benef-grid{ grid-template-columns:1fr 1fr; }
    .ato-marker{ flex-wrap:wrap; gap:10px; }
    .ato-line{ display:none; }
  }
  @media (max-width:560px){ .dash,.cap-grid,.benef-grid{ grid-template-columns:1fr; } }

  /* ─── correção do menu: "FOOZ APP" quebrava em duas linhas e empurrava
         a marca. Trava a quebra e dá folga na largura. ─── */
  .nav-inner { max-width:1280px; gap:24px; }
  .nav-links { gap:22px; }
  .nav-links > a, .nav-links > .nav-item > a { white-space:nowrap; }
  .logo { flex-shrink:0; }
  .nav-cta, .nav-cta-secondary { white-space:nowrap; }
  @media (max-width:1240px){ .nav-links { gap:16px; } .nav-links > a, .nav-links > .nav-item > a { font-size:13.5px; } }

  /* Área do cliente — separada do CTA comercial, como pede o padrão do menu */
  .nav-cliente { display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    font-size:13.5px; font-weight:600; color:var(--gray-700); margin-right:14px;
    padding:9px 14px; border-radius:999px; transition:color .2s, background .2s; }
  .nav-cliente:hover { color:var(--blue-600); background:rgba(40,103,255,.07); }
  @media (max-width:900px){ .nav-cliente { display:none; } }

  /* ═══ MENU PRINCIPAL · versão final ══════════════════════════════════
     Sete itens de topo, um único dropdown (Sobre a FOOZ) e os dois CTAs.
     Economizar, FOOZ App e Individualizar têm o mesmo peso e nenhuma seta. */
  /* Estados de interação: só cor e uma linha que nasce do centro. Nada de
     tooltip, balão ou dropdown em item de destino único. O item não se
     move nem muda de tamanho — a largura do menu fica estável. */
  .nav-links > a, .nav-links > .nav-item > a { position: relative; }
  .nav-links > a::after, .nav-links > .nav-item > a::after {
    content: ''; position: absolute; left: 50%; right: 50%; bottom: -8px; height: 2px;
    border-radius: 999px; background: var(--blue-500);
    transition: left 180ms ease, right 180ms ease;
  }
  .nav-links > a:hover, .nav-links > .nav-item > a:hover,
  .nav-links > a.is-active, .nav-links > .nav-item.is-active > a,
  .nav-links > .nav-item.is-open > a { color: var(--blue-500); }
  .nav-links > a:hover::after, .nav-links > .nav-item > a:hover::after,
  .nav-links > a.is-active::after, .nav-links > .nav-item.is-active > a::after,
  .nav-links > a:focus-visible::after, .nav-links > .nav-item > a:focus-visible::after {
    left: 0; right: 0;
  }
  .nav-links > a:focus-visible, .nav-links > .nav-item > a:focus-visible,
  .nav-dropdown a:focus-visible, .nav-burger:focus-visible,
  .nm-acc-btn:focus-visible, .nav-mobile nav > a:focus-visible {
    outline: 2px solid var(--blue-500); outline-offset: 6px; border-radius: 4px;
  }
  /* o item ativo também se marca por forma, não só por cor */
  .nav-links > a.is-active, .nav-links > .nav-item.is-active > a { font-weight: 700; }
  .nav-mobile nav > a.is-active { border-left: 3px solid var(--blue-500); padding-left: 10px; }
  @media (prefers-reduced-motion: reduce) {
    .nav-links > a, .nav-links > .nav-item > a,
    .nav-links > a::after, .nav-links > .nav-item > a::after { transition: none; }
  }

  /* botão do menu no celular */
  .nav-burger { display: none; width: 44px; height: 44px; flex-shrink: 0;
    align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    background: none; border: 0; cursor: pointer; padding: 0; }
  .nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px;
    background: var(--navy-900); transition: transform .22s, opacity .18s; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* painel do celular */
  .nav-mobile { position: fixed; inset: 64px 0 0; z-index: 90; overflow-y: auto;
    background: #fff; padding: 18px 20px 34px;
    display: flex; flex-direction: column; gap: 4px; }
  .nav-mobile[hidden] { display: none; }
  .nav-mobile nav { display: flex; flex-direction: column; }
  .nav-mobile nav > a, .nm-acc-btn {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; padding: 6px 2px; font-size: 17px; font-weight: 600;
    color: var(--navy-900); text-decoration: none;
    border-bottom: 1px solid var(--gray-100);
    background: none; border-left: 0; border-right: 0; border-top: 0;
    width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  }
  .nav-mobile nav > a.is-active { color: var(--blue-500); }
  .nm-acc-btn .chev { transition: transform .22s; }
  .nm-acc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .nm-acc-corpo { display: flex; flex-direction: column; padding: 4px 0 8px 12px; }
  .nm-acc-corpo[hidden] { display: none; }
  .nm-acc-corpo a { min-height: 44px; display: flex; align-items: center;
    font-size: 15px; color: var(--gray-500); text-decoration: none; }
  .nm-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
  .nm-cta, .nm-cta-sec, .nm-cliente {
    min-height: 48px; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none;
  }
  .nm-cta { background: var(--grad-cta, linear-gradient(120deg,#2867ff,#38bdf8)); color: #fff; }
  .nm-cta-sec { border: 1px solid var(--gray-200); color: var(--navy-900); }
  .nm-cliente { font-size: 13px; color: var(--gray-500); }
  body.nav-aberto { overflow: hidden; }

  /* O cabeçalho vai cedendo peso conforme a tela estreita, sempre
     preservando o CTA principal. Sem overflow de 320px a 1920px. */
  @media (max-width: 1760px) { .nav-links { gap: 22px; } }
  /* notebook: o CTA secundário sai — "Rede de franquias" cobre em Sobre a FOOZ */
  @media (max-width: 1660px) {
    .nav-cta-secondary { display: none; }
    .nav-links { gap: 14px; }
    .nav-links > a, .nav-links > .nav-item > a { font-size: 13.5px; }
    .logo img { height: 46px !important; }
    .nav-cta { padding: 12px 20px; font-size: 13.5px; }
  }
  @media (max-width: 1180px) {
    .nav-links { gap: 11px; }
    .nav-cliente { display: none; }
  }
  @media (max-width: 1024px) {
    .nav-links { display: none; }
    .nav-cliente { display: none; }
    .nav-burger { display: flex; }
    .nav-cta { padding: 11px 17px; font-size: 13px; }
    .nav-cta svg { display: none; }
  }
  /* celular estreito: o CTA principal passa a abrir o painel, onde ele é
     o primeiro elemento — nada de rótulo cortado nem barra estourada */
  @media (max-width: 560px) {
    .nav-cta { display: none; }
    .logo img { height: 40px !important; }
  }
  @media (min-width: 1025px) { .nav-mobile { display: none !important; } }


/* ══════════════════ COMPONENTES DA LANDING DE SEGMENTO ══════════════════ */

/* ─── TELA 01 · HERO ──────────────────────────────────────────────────── */
/* PADRÃO DE ALTURA · a faixa escura de todos os segmentos tem a mesma
   altura da hero das páginas de Soluções (Economizar é a referência):
   mesmo padding e mesmo min-height de conteúdo. */
.sg-hero { position:relative; isolation:isolate; overflow:hidden; color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.2rem,4vw,3.4rem) 0 clamp(2.6rem,4.4vw,4rem);
  background-color:var(--navy-950);
  background-image:
    radial-gradient(900px 520px at 78% 16%, rgba(56,189,248,.20), transparent 62%),
    radial-gradient(760px 480px at 4% 74%, rgba(40,103,255,.22), transparent 60%),
    linear-gradient(165deg,#050d24 0%,#0a1736 52%,#0f2050 100%); }
.sg-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(125,211,252,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,211,252,.05) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(circle at 70% 40%,#000 0%,transparent 74%);
          mask-image:radial-gradient(circle at 70% 40%,#000 0%,transparent 74%); }
/* quando o segmento tem fotografia real, ela entra por baixo do véu */
.sg-hero.tem-foto { background-blend-mode:normal; background-size:auto,auto,auto; }

/* ─── hero com fotografia em fundo cheio ──────────────────────────────
   Alguns segmentos (Condomínios, Administradoras) trocam a tela pequena da
   direita por uma foto que ocupa a hero inteira. O véu é assimétrico: bem
   fechado à esquerda, onde mora o texto, e aberto à direita, onde a imagem
   precisa respirar. */
/* a variante com fotografia usa exatamente o mesmo padrão de altura */
.sg-hero--fundo { }
/* o "margin:0 auto" da .wrap, dentro de um flex column, faz o item encolher
   até o conteúdo: o width:100% devolve a largura útil de 1160px das demais heros. */

.sg-hero-fundo { position:absolute; inset:0; z-index:0; overflow:hidden; }
.sg-hero-fundo img { display:block; width:100%; height:100%;
  object-fit:cover; object-position:var(--foco,62% 50%); }
/* --veu reforça o lado aberto do véu quando a fotografia é clara (corredor
   de hospital, por exemplo) e o azul-marinho não seguraria o contraste. */
.sg-hero-fundo::after { content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,13,36,.97) 0%, rgba(5,13,36,.93) 30%,
                           rgba(5,13,36,calc(.72 + var(--veu,0))) 54%,
                           rgba(5,13,36,calc(.34 + var(--veu,0))) 78%,
                           rgba(5,13,36,calc(.24 + var(--veu,0))) 100%),
    linear-gradient(180deg, rgba(5,13,36,.62) 0%, rgba(5,13,36,calc(.10 + var(--veu,0))) 34%,
                            rgba(5,13,36,calc(.20 + var(--veu,0))) 66%, rgba(5,13,36,.78) 100%); }
.sg-hero--fundo .sg-hero-grid { grid-template-columns:minmax(0,1fr); }
.sg-hero--fundo .sg-hero-grid > div:first-child { max-width:min(660px,64%); }
.sg-hero--fundo .sg-lead { max-width:44ch; }
/* a prova sai do canto da figura e vira um selo dentro da hero */
.sg-hero--fundo .sg-prova { position:static; display:inline-flex; align-items:baseline;
  gap:10px; margin-top:26px; padding:12px 18px;
  justify-self:start; width:max-content; max-width:100%; }
.sg-hero--fundo .sg-prova span { display:inline; }
.sg-hero--fundo .sg-prova b { display:inline; font-size:26px; }
.sg-hero--fundo .sg-prova i { display:inline; }

@media (max-width:900px){
  .sg-hero--fundo .sg-hero-grid > div:first-child { max-width:none; }
  .sg-hero-fundo::after { background:
    linear-gradient(180deg, rgba(5,13,36,.86) 0%, rgba(5,13,36,.80) 46%,
                            rgba(5,13,36,.88) 100%); }
}

.sg-hero > .wrap { width:100%; }
.sg-hero-grid { min-height:clamp(619px,60vh,668px); align-content:center;
  position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,57fr) minmax(0,43fr);
  gap:clamp(1.6rem,3.4vw,3.2rem); align-items:center; }

.sg-migalha { display:flex; align-items:center; gap:8px; font-size:12px;
  color:rgba(255,255,255,.55); margin-bottom:20px; }
.sg-migalha a { color:var(--cyan-300); }

.sg-hero h1 { margin-top:14px; font-size:clamp(2.1rem,3.4vw,3.3rem);
  line-height:1.06; font-weight:800; letter-spacing:-0.03em; color:#fff; }
.sg-hero h1 em { font-style:normal;
  background:linear-gradient(120deg,#7dd3fc 0%,#38bdf8 40%,#2867ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.sg-lead { margin-top:18px; max-width:48ch; font-size:clamp(16px,1.35vw,18px);
  line-height:1.55; color:rgba(226,238,255,.84); }
.sg-lead strong { color:#fff; font-weight:600; }

.sg-ind { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px; margin-top:28px; }
.sg-ind > div { padding:14px 16px; border-radius:16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(125,211,252,.20); }
.sg-ind b { display:block; font-family:"Sora",sans-serif;
  font-size:clamp(15px,1.5vw,19px); font-weight:800; line-height:1.15;
  letter-spacing:-0.02em;
  background:linear-gradient(120deg,var(--cyan-300),var(--blue-400));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.sg-ind span { display:block; margin-top:4px; font-size:11.5px; line-height:1.4;
  color:rgba(255,255,255,.66); }

.sg-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.sg-btn { display:inline-flex; align-items:center; gap:9px; padding:15px 28px;
  border-radius:999px; font-size:15px; font-weight:700; white-space:nowrap;
  transition:transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.sg-btn-1 { background:#fff; color:var(--navy-900);
  box-shadow:0 16px 40px -16px rgba(0,0,0,.55); }
.sg-btn-1:hover { transform:translateY(-2px); }
.sg-btn-2 { background:rgba(255,255,255,.07); color:#fff;
  border:1px solid rgba(255,255,255,.28); }
.sg-btn-2:hover { background:rgba(255,255,255,.14); border-color:rgba(125,211,252,.6); }
.sg-btn svg { transition:transform .22s; }
.sg-btn:hover svg { transform:translateX(3px); }
.sg-btn-2:hover svg { transform:translateY(3px); }

/* composição da direita: a tela real da plataforma e o resultado do setor */
.sg-comp { position:relative; }
.sg-tela { margin:0; border-radius:16px; overflow:hidden;
  border:1px solid rgba(125,211,252,.22);
  box-shadow:0 40px 80px -34px rgba(2,8,26,.85); }
.sg-tela img { display:block; width:100%; height:auto; }
/* variante fotográfica da tela da hero: quando o segmento traz uma foto real
   de campo/operação no lugar do print da plataforma. Sombra mais funda e
   proporção travada, para a foto não virar um bloco chapado. */
.sg-tela-foto { border-radius:20px;
  box-shadow:0 46px 90px -34px rgba(2,8,26,.9), 0 0 0 1px rgba(255,255,255,.10); }
.sg-tela-foto img { aspect-ratio:16/10; object-fit:cover; object-position:58% 50%; }

.sg-prova { position:absolute; left:-7%; bottom:-8%; z-index:2;
  padding:16px 20px; border-radius:16px; background:rgba(255,255,255,.97);
  border:1px solid rgba(15,32,80,.07);
  box-shadow:0 26px 52px -22px rgba(4,11,32,.8); }
.sg-prova span { display:block; font-family:"Sora",sans-serif; font-size:10px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-500); }
.sg-prova b { display:block; margin-top:3px; font-family:"Sora",sans-serif;
  font-size:30px; font-weight:800; letter-spacing:-0.03em; color:var(--navy-900); }
.sg-prova i { display:block; font-style:normal; margin-top:1px; font-size:12px;
  color:var(--gray-500); }

/* ─── TELA 02 · O QUE A FOOZ TRANSFORMA ───────────────────────────────── */
.sg-pilares-sec { padding:clamp(3rem,5.5vw,4.6rem) 0; background:var(--ice-50);
  border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100); }
.sg-head { max-width:720px; margin-bottom:32px; }
.sg-head h2 { margin-top:10px; font-size:clamp(25px,3.1vw,38px); font-weight:800;
  line-height:1.1; color:var(--navy-900); }
.sg-pilares { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.sg-pilar { position:relative; overflow:hidden; padding:28px 26px 26px;
  border:1px solid var(--gray-200); border-radius:20px; background:var(--white); }
.sg-pilar::before { content:""; position:absolute; left:0; right:0; top:0;
  height:4px; background:var(--grad); }
.sg-pilar-tag { font-family:"Sora",sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue-500); }
.sg-pilar h3 { margin-top:8px; font-size:20px; font-weight:800; line-height:1.2;
  color:var(--navy-900); }
.sg-pilar p { margin-top:10px; font-size:14.5px; line-height:1.6; color:var(--gray-700); }
.sg-pilar a { display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-size:13.5px; font-weight:700; color:var(--blue-500); }
.sg-pilar a:hover { color:var(--navy-700); }

/* faixa do diferencial, entre a segunda e a terceira tela */
.sg-dif { display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  margin-top:30px; padding:24px 28px; border-radius:20px;
  background:linear-gradient(120deg,rgba(0,176,251,.10),rgba(13,14,255,.07) 60%,rgba(0,29,130,.06));
  border:1px solid rgba(0,29,130,.08); }
.sg-dif h3 { font-size:clamp(18px,2.1vw,25px); font-weight:800; line-height:1.2;
  color:var(--navy-900); }
.sg-dif h3 em { font-style:normal; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.sg-dif p { flex:1 1 320px; font-size:14.5px; line-height:1.6; color:var(--gray-700); }

/* ─── TELA 03 · PROVA + CONVERSÃO ─────────────────────────────────────── */
.sg-fecho { padding:clamp(3rem,5.5vw,4.6rem) 0; }
.sg-caso { display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:26px; align-items:center; padding:26px 30px; border-radius:22px;
  border:1px solid var(--gray-200); background:var(--white);
  box-shadow:0 20px 50px -30px rgba(14,20,38,.30); margin-bottom:30px; }
.sg-caso-n { font-family:"Sora",sans-serif; font-size:clamp(38px,5vw,60px);
  font-weight:800; letter-spacing:-0.04em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; }
.sg-caso-tag { font-family:"Sora",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); }
.sg-caso h3 { margin-top:5px; font-size:19px; font-weight:800; color:var(--navy-900); }
.sg-caso p { margin-top:6px; font-size:14.5px; line-height:1.6; color:var(--gray-700); }
.sg-caso-link { display:inline-flex; align-items:center; gap:8px; padding:13px 22px;
  border-radius:999px; border:1px solid var(--gray-200); background:var(--white);
  font-size:13.5px; font-weight:700; color:var(--navy-900); white-space:nowrap;
  transition:border-color .2s,color .2s; }
.sg-caso-link:hover { border-color:rgba(40,103,255,.45); color:var(--blue-600); }

.sg-cta { position:relative; overflow:hidden; text-align:center; color:#fff;
  padding:clamp(2.6rem,4.6vw,3.8rem) clamp(1.4rem,4vw,3rem); border-radius:26px;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-800) 55%,var(--navy-700)); }
.sg-cta::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 340px at 70% 0%,rgba(56,189,248,.22),transparent 62%); }
.sg-cta > * { position:relative; }
.sg-cta h2 { font-size:clamp(25px,3.3vw,40px); font-weight:800; line-height:1.1;
  max-width:22ch; margin:0 auto; color:#fff; }
.sg-cta p { max-width:62ch; margin:16px auto 0; font-size:15.5px; line-height:1.65;
  color:rgba(255,255,255,.78); }
.sg-cta .sg-ctas { justify-content:center; margin-top:26px; }

/* ─── responsivo ──────────────────────────────────────────────────────── */
@media (max-width:1080px) {
  .sg-hero-grid { grid-template-columns:minmax(0,54fr) minmax(0,46fr); }
  .sg-pilares { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .sg-pilar { padding:24px 20px; }
}
@media (max-width:900px) {
  .sg-hero-grid { grid-template-columns:minmax(0,1fr); gap:34px; }
  .sg-lead { max-width:none; }
  .sg-comp { max-width:520px; margin-inline:auto; width:100%; }
  .sg-prova { left:auto; right:-4%; bottom:-6%; }
  .sg-pilares { grid-template-columns:minmax(0,1fr); }
  .sg-caso { grid-template-columns:minmax(0,1fr); text-align:left; gap:14px; }
  .sg-caso-link { justify-self:start; }
}
@media (max-width:560px) {
  .sg-ind { grid-template-columns:1fr 1fr; }
  .sg-ind > div:last-child { grid-column:1 / -1; }
  .sg-ctas .sg-btn { flex:1 1 auto; justify-content:center; }
  .sg-prova { right:0; bottom:-5%; padding:13px 16px; }
  .sg-prova b { font-size:25px; }
}

/* ═══════════════ BLOCOS DE SEGMENTO APROFUNDADO ═══════════════════════
   Estrutura-base das páginas de segmento com mais fôlego (Condomínios é a
   primeira): soluções do nicho em blocos largos, o bloco de individualização
   com as duas experiências, o mapa do "ambiente inteligente" e a faixa de
   sustentabilidade. O conteúdo muda por segmento; a estrutura, não. */

/* ─── soluções do nicho ─── */
.cd-solucoes { display:grid; gap:18px; margin-top:30px; }
.cd-sol { position:relative; overflow:hidden; padding:30px 30px 28px;
  border-radius:22px; background:#fff; border:1px solid var(--gray-200);
  box-shadow:0 26px 56px -34px rgba(10,23,54,.30); }
.cd-sol::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--grad); }
.cd-sol-tag { display:inline-flex; align-items:center; gap:8px;
  font-family:"Sora",sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); }
.cd-sol-tag i { font-style:normal; color:var(--gray-300); }
.cd-sol h3 { margin-top:10px; font-size:clamp(19px,2.2vw,25px); font-weight:800;
  line-height:1.2; color:var(--navy-900); }
.cd-sol > p { margin-top:10px; max-width:70ch; font-size:14.5px; line-height:1.65;
  color:var(--gray-700); }
.cd-sol-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.2rem,2.6vw,2.4rem); align-items:start; margin-top:20px; }
.cd-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.cd-chips span { font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:999px;
  background:var(--ice-50); border:1px solid var(--gray-200); color:var(--gray-700); }
.cd-lista { list-style:none; margin:16px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; }
.cd-lista li { display:flex; gap:9px; font-size:13.5px; line-height:1.45; color:var(--gray-700); }
.cd-lista svg { flex:0 0 auto; margin-top:3px; color:var(--blue-500); }
.cd-num { padding:20px 22px; border-radius:18px; background:var(--navy-900); color:#fff;
  background-image:radial-gradient(420px 240px at 88% 6%, rgba(56,189,248,.28), transparent 62%); }
.cd-num b { display:block; font-family:"Sora",sans-serif; font-size:clamp(30px,4vw,44px);
  font-weight:800; letter-spacing:-.035em; line-height:1;
  background:linear-gradient(120deg,#7dd3fc,#38bdf8 45%,#2867ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.cd-num span { display:block; margin-top:8px; font-size:12.5px; line-height:1.45;
  color:rgba(226,240,255,.76); }
.cd-metodo { list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:5px 4px; margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--gray-100); }
.cd-metodo li { font-family:"Sora",sans-serif; font-size:9.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); white-space:nowrap; }
.cd-metodo li + li::before { content:"→"; margin:0 5px 0 2px; color:var(--gray-300); }
.cd-metodo li:last-child { color:var(--blue-500); }
.cd-recursos { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.cd-recursos span { padding:12px 10px; border-radius:13px; text-align:center;
  background:var(--ice-50); border:1px solid var(--gray-200);
  font-family:"Sora",sans-serif; font-size:12.5px; font-weight:700; color:var(--navy-900); }
.cd-frase { margin-top:18px; padding:16px 20px; border-radius:16px;
  background:var(--ice-50); border-left:3px solid var(--blue-500);
  font-size:14.5px; line-height:1.6; color:var(--navy-900); font-weight:600; }
.cd-sol-link { display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:"Sora",sans-serif; font-size:14px; font-weight:700; color:var(--blue-500); }
.cd-sol-link:hover { color:var(--navy-700); }
.cd-duplas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.cd-duplas .cd-sol { padding:26px 24px 24px; }
.cd-duplas .cd-lista { grid-template-columns:minmax(0,1fr); }

/* ─── individualização: as duas experiências ─── */
.cd-indiv { position:relative; overflow:hidden; color:#fff;
  padding:clamp(3rem,5.5vw,4.6rem) 0;
  background-color:var(--navy-950);
  background-image:
    radial-gradient(880px 500px at 82% 10%, rgba(56,189,248,.20), transparent 62%),
    radial-gradient(720px 460px at 2% 78%, rgba(40,103,255,.22), transparent 60%),
    linear-gradient(165deg,#050d24 0%,#0a1736 55%,#0f2050 100%); }
.cd-indiv .sg-head { max-width:760px; }
.cd-indiv .sg-head h2 { color:#fff; }
.cd-indiv .sg-head > p { margin-top:14px; font-size:15.5px; line-height:1.65;
  color:rgba(226,240,255,.76); max-width:66ch; }
.cd-lados { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem); margin-top:8px; }
.cd-lado { padding:24px 24px 26px; border-radius:22px;
  background:rgba(255,255,255,.055); border:1px solid rgba(125,211,252,.20); }
.cd-lado-tag { display:inline-flex; align-items:center; gap:8px;
  font-family:"Sora",sans-serif; font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-400); }
.cd-lado h3 { margin-top:9px; font-size:20px; font-weight:800; color:#fff; }
.cd-lado figure { margin:18px 0 0; border-radius:16px; overflow:hidden;
  background:rgba(5,13,36,.5); box-shadow:0 30px 60px -30px rgba(2,8,26,.9); }
.cd-lado figure img { display:block; width:100%; height:200px; object-fit:cover;
  object-position:center top; }
.cd-lado figure.e-app img { height:200px; object-fit:contain; object-position:center top;
  padding:10px 0 0; }
.cd-lado ul { list-style:none; margin:18px 0 0; padding:0; display:flex;
  flex-direction:column; gap:8px; }
.cd-lado li { display:flex; gap:9px; font-size:13.5px; line-height:1.45;
  color:rgba(226,240,255,.82); }
.cd-lado li svg { flex:0 0 auto; margin-top:3px; color:var(--cyan-400); }
.cd-indiv-fecho { display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;
  margin-top:26px; padding-top:24px; border-top:1px solid rgba(125,211,252,.20); }
.cd-indiv-fecho h3 { flex:1 1 420px; font-size:clamp(18px,2.2vw,25px); font-weight:800;
  line-height:1.25; color:#fff; }
.cd-indiv-fecho h3 em { font-style:normal;
  background:linear-gradient(120deg,#7dd3fc,#38bdf8 45%,#2867ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ─── mapa do ambiente inteligente ─── */
.cd-mapa-sec { padding:clamp(3rem,5.5vw,4.6rem) 0; background:var(--ice-50);
  border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); }
.cd-nucleo { display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px;
  padding:26px 30px; border-radius:22px; margin-top:6px;
  background:var(--navy-900); color:#fff;
  background-image:radial-gradient(600px 300px at 88% 0%, rgba(56,189,248,.26), transparent 64%); }
.cd-nucleo b { font-family:"Sora",sans-serif; font-size:clamp(19px,2.4vw,27px);
  font-weight:800; letter-spacing:-.02em; }
.cd-nucleo p { flex:1 1 380px; font-size:14.5px; line-height:1.65; color:rgba(226,240,255,.78); }
.cd-pecas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.cd-peca { padding:18px 18px 16px; border-radius:16px; background:#fff;
  border:1px solid var(--gray-200); }
.cd-peca b { display:block; font-family:"Sora",sans-serif; font-size:14.5px;
  font-weight:700; color:var(--navy-900); }
.cd-peca span { display:block; margin-top:5px; font-size:12.5px; line-height:1.45;
  color:var(--gray-500); }
.cd-citacao { margin-top:22px; padding:22px 26px; border-radius:18px;
  background:#fff; border:1px solid var(--gray-200);
  font-family:"Sora",sans-serif; font-size:clamp(15px,1.9vw,20px); font-weight:700;
  line-height:1.35; color:var(--navy-900); }
.cd-citacao em { font-style:normal; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ─── sustentabilidade e green marketing ─── */
.cd-verde { padding:clamp(3rem,5.5vw,4.6rem) 0; }
.cd-verde-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.4rem,3vw,2.6rem); align-items:start; }
.cd-ind-amb { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; }
.cd-ind-amb span { padding:14px 16px; border-radius:14px; background:var(--ice-50);
  border:1px solid var(--gray-200); font-size:13px; font-weight:600; color:var(--navy-900); }
.cd-selo { padding:26px 26px 24px; border-radius:22px; color:#fff;
  background:linear-gradient(150deg,#0a1736,#0f2050 60%,#163080); }
.cd-selo-tag { font-family:"Sora",sans-serif; font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-400); }
.cd-selo q { display:block; margin-top:12px; font-family:"Sora",sans-serif;
  font-size:clamp(15px,1.8vw,19px); font-weight:700; line-height:1.35; color:#fff; }
.cd-fluxo { list-style:none; display:flex; flex-wrap:wrap; gap:5px 4px;
  margin:20px 0 0; padding:16px 0 0; border-top:1px solid rgba(125,211,252,.22); }
.cd-fluxo li { font-family:"Sora",sans-serif; font-size:10px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(226,240,255,.7); }
.cd-fluxo li + li::before { content:"→"; margin:0 6px 0 2px; color:rgba(125,211,252,.45); }
.cd-fluxo li:last-child { color:var(--cyan-400); }

@media (max-width:980px){
  .cd-sol-grid, .cd-duplas, .cd-lados, .cd-verde-grid { grid-template-columns:minmax(0,1fr); }
  .cd-pecas { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cd-recursos { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .cd-lista, .cd-ind-amb { grid-template-columns:minmax(0,1fr); }
  .cd-pecas { grid-template-columns:minmax(0,1fr); }
  .cd-sol { padding:24px 20px 22px; }
}

/* CTAs com rótulo longo ("Descobrir o potencial do meu condomínio") estouravam
   a tela em aparelhos de 390px: o botão é inline-flex e não quebrava. */
@media (max-width:560px){
  .sg-btn { max-width:100%; padding:14px 20px; text-align:left; }
  .sg-ctas { width:100%; }
  .sg-ctas .sg-btn { flex:1 1 100%; justify-content:center; text-align:center; }
}

/* ─── comparação de higiene (Vortex × arejador comum) ─── */
.cd-hig { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1rem,2.2vw,1.8rem); margin-top:22px; align-items:stretch; }
.cd-hig-col { display:flex; flex-direction:column; gap:10px; }
.cd-hig-rot { display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:"Sora",sans-serif; font-size:11px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; padding:6px 13px; border-radius:999px; }
.cd-hig-rot.e-bom { background:rgba(25,185,129,.12); color:var(--green); }
.cd-hig-rot.e-ruim { background:rgba(243,180,28,.14); color:#a8760a; }
.cd-hig figure { margin:0; border-radius:18px; overflow:hidden; background:var(--gray-100);
  border:1px solid var(--gray-200); }
.cd-hig figure img { display:block; width:100%; height:100%; object-fit:cover; }
.cd-hig-col > figure { flex:1 1 auto; min-height:0; }
.cd-hig-vortex img { height:100%; min-height:300px; }
.cd-hig-fotos { display:flex; flex-direction:column; gap:10px; }
.cd-hig-fotos figure { display:grid; grid-template-rows:auto auto; }
.cd-hig-fotos img { aspect-ratio:16/6.4; }
.cd-hig-fotos figcaption { padding:9px 14px; background:#fff;
  font-family:"Sora",sans-serif; font-size:12.5px; font-weight:700; color:#a8760a;
  text-align:center; }
.cd-apoios { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:20px; }
.cd-apoio { padding:18px 18px 16px; border-radius:16px; background:var(--ice-50);
  border:1px solid var(--gray-200); }
.cd-apoio b { display:block; font-family:"Sora",sans-serif; font-size:15px;
  font-weight:800; color:var(--navy-900); letter-spacing:-.015em; }
.cd-apoio span { display:block; margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--gray-500); }

/* ─── ponte: do físico ao digital ─── */
.cd-ponte { position:relative; overflow:hidden; color:#fff;
  padding:clamp(2.4rem,4.4vw,3.6rem) 0;
  background-color:var(--navy-950);
  background-image:
    radial-gradient(760px 420px at 86% 12%, rgba(56,189,248,.22), transparent 62%),
    radial-gradient(680px 400px at 4% 82%, rgba(40,103,255,.22), transparent 60%),
    linear-gradient(165deg,#050d24,#0a1736 58%,#0f2050); }
.cd-ponte h2 { font-size:clamp(24px,3.1vw,38px); font-weight:800; line-height:1.1;
  color:#fff; max-width:20ch; }
.cd-ponte h2 em { font-style:normal;
  background:linear-gradient(120deg,#7dd3fc,#38bdf8 45%,#2867ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.cd-ponte > .wrap > p { margin-top:14px; max-width:62ch; font-size:15.5px; line-height:1.65;
  color:rgba(226,240,255,.76); }
.cd-ponte-eixo { display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:24px; padding-top:22px; border-top:1px solid rgba(125,211,252,.20); }
.cd-ponte-eixo span { font-family:"Sora",sans-serif; font-size:clamp(13px,1.6vw,16px);
  font-weight:800; letter-spacing:.02em; padding:11px 20px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(125,211,252,.24); color:#eaf4ff; }
.cd-ponte-eixo i { font-style:normal; color:var(--cyan-400); font-size:18px; }

/* ─── mockup grande com informação em volta ─── */
.cd-mock { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.4rem,3vw,2.6rem); align-items:center; margin-top:26px; }
.cd-mock figure { margin:0; border-radius:18px; overflow:hidden;
  border:1px solid var(--gray-200); background:var(--navy-900);
  box-shadow:0 34px 70px -34px rgba(10,23,54,.55); }
.cd-mock figure img { display:block; width:100%; height:auto; }
.cd-mock-bloco + .cd-mock-bloco { margin-top:20px; padding-top:18px;
  border-top:1px solid var(--gray-100); }
.cd-mock-bloco b { display:block; font-family:"Sora",sans-serif; font-size:17px;
  font-weight:800; color:var(--navy-900); }
.cd-mock-bloco > span { display:block; margin-top:6px; font-size:13.5px; line-height:1.6;
  color:var(--gray-500); }
.cd-mock-bloco .cd-chips { margin-top:12px; }

/* ─── rede: visão geral + mapa operacional ─── */
/* Uma coluna só: estes blocos mostram Visão Geral e Mapa Operacional, e em
   duas colunas o print cai para ~0,5x — o ranking e os alertas somem. Em
   coluna única a tela renderiza perto de 1:1 e fica de fato legível. */
.cd-rede { display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(1.2rem,2.6vw,2rem); margin-top:26px; }
.cd-rede article { padding:22px 22px 24px; border-radius:22px;
  background:rgba(255,255,255,.055); border:1px solid rgba(125,211,252,.20); }
.cd-rede figure { margin:16px 0 0; border-radius:14px; overflow:hidden;
  box-shadow:0 26px 54px -28px rgba(2,8,26,.9); }
.cd-rede figure img { display:block; width:100%; height:auto; }
/* a lista volta a duas colunas, já que o card agora é largo */
.cd-rede article > ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 20px; }
@media (max-width:700px){ .cd-rede article > ul { grid-template-columns:minmax(0,1fr); } }

/* variante de três colunas (morador · síndico · administradora) */
.cd-rede--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cd-rede--3 article > ul { grid-template-columns:minmax(0,1fr); }
@media (max-width:980px){ .cd-rede--3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .cd-rede--3 { grid-template-columns:minmax(0,1fr); } }

/* ─── alertas ─── */
.cd-alertas { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.cd-alertas span { font-size:12.5px; font-weight:600; padding:9px 15px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(125,211,252,.22); color:#eaf4ff; }

/* ─── green marketing: adesivo, selo e troféu ─── */
.cd-green { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:26px; }
.cd-green article { display:flex; flex-direction:column; padding:20px 20px 22px;
  border-radius:20px; background:#fff; border:1px solid var(--gray-200);
  box-shadow:0 24px 50px -34px rgba(10,23,54,.30); }
.cd-green figure { margin:0 0 16px; border-radius:14px; overflow:hidden;
  background:var(--ice-50); border:1px solid var(--gray-100); }
.cd-green figure img { display:block; width:100%; height:168px; object-fit:contain;
  padding:14px; }
.cd-green b { font-family:"Sora",sans-serif; font-size:16px; font-weight:800; color:var(--navy-900); }
.cd-green p { margin-top:7px; font-size:13.5px; line-height:1.55; color:var(--gray-500); }
.cd-fluxo.e-claro { border-top-color:var(--gray-200); }
.cd-fluxo.e-claro li { color:var(--gray-500); }
.cd-fluxo.e-claro li + li::before { color:var(--gray-300); }
.cd-fluxo.e-claro li:last-child { color:var(--blue-500); }

/* ─── faixa-resumo do segmento ─── */
.cd-resumo { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:26px; }
.cd-resumo div { position:relative; padding:20px 16px 18px; border-radius:16px;
  background:#fff; border:1px solid var(--gray-200); }
.cd-resumo div::before { content:""; position:absolute; left:16px; right:16px; top:0;
  height:3px; border-radius:0 0 3px 3px; background:var(--grad); }
.cd-resumo b { display:block; font-family:"Sora",sans-serif; font-size:12.5px;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-500); }
.cd-resumo span { display:block; margin-top:8px; font-size:12.5px; line-height:1.45; color:var(--gray-700); }

@media (max-width:980px){
  .cd-hig, .cd-mock, .cd-rede { grid-template-columns:minmax(0,1fr); }
  .cd-apoios { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cd-green { grid-template-columns:minmax(0,1fr); }
  .cd-resumo { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .cd-apoios, .cd-resumo { grid-template-columns:minmax(0,1fr); }
}

/* ─── hero com foto de fundo E mockup em primeiro plano ────────────────
   Administradoras: a foto contextualiza, mas quem precisa ficar nítido e
   legível é a tela real da plataforma. Duas colunas em vez de uma. */
.sg-hero--fundo.e-duplo .sg-hero-grid { grid-template-columns:minmax(0,52fr) minmax(0,48fr); align-items:center; }
.sg-hero--fundo.e-duplo .sg-hero-grid > div:first-child { max-width:none; }
.sg-hero--fundo.e-duplo .sg-lead { max-width:46ch; }
/* o véu fecha à esquerda e abre só o suficiente à direita: o mockup entra
   por cima com moldura própria, então a foto ali pode ficar mais calma */
/* o lado direito abre mais: a fotografia precisa aparecer atrás do mockup.
   --veu continua ajustando por página (positivo escurece, negativo clareia). */
.sg-hero--fundo.e-duplo .sg-hero-fundo::after { background:
  linear-gradient(90deg, rgba(5,13,36,.96) 0%, rgba(5,13,36,.90) 32%,
                         rgba(5,13,36,calc(.70 + var(--veu,0))) 58%,
                         rgba(5,13,36,calc(.52 + var(--veu,0))) 100%),
  linear-gradient(180deg, rgba(5,13,36,.50) 0%, rgba(5,13,36,.16) 42%, rgba(5,13,36,.74) 100%); }

.ad-destaque { display:block; margin-top:14px; font-family:"Sora",sans-serif;
  font-size:clamp(14px,1.6vw,17px); font-weight:700; line-height:1.35; color:#fff; }
.ad-destaque em { font-style:normal;
  background:linear-gradient(120deg,#7dd3fc,#38bdf8 45%,#2867ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

.ad-palco { position:relative; }
.ad-mapa { margin:0; border-radius:16px; overflow:hidden;
  border:1px solid rgba(125,211,252,.32);
  box-shadow:0 46px 90px -30px rgba(2,8,26,.95), 0 0 0 1px rgba(255,255,255,.08);
  background:#fff; }
.ad-mapa img { display:block; width:100%; height:auto; }
.ad-cards { position:absolute; inset:0; pointer-events:none; }
.ad-card { position:absolute; display:flex; gap:10px; align-items:flex-start;
  padding:11px 14px; border-radius:14px; background:rgba(255,255,255,.97);
  border:1px solid rgba(15,32,80,.07); box-shadow:0 22px 44px -20px rgba(2,8,26,.75);
  max-width:210px; }
.ad-card b { display:block; font-family:"Sora",sans-serif; font-size:12.5px;
  font-weight:700; line-height:1.25; color:var(--navy-900); }
.ad-card span { display:block; margin-top:3px; font-size:11px; line-height:1.35; color:var(--gray-500); }
.ad-card i { flex:0 0 auto; width:22px; height:22px; border-radius:7px; display:grid;
  place-items:center; margin-top:1px; }
.ad-card i.e-ok   { background:rgba(25,185,129,.14); color:var(--green); }
.ad-card i.e-aten { background:rgba(243,180,28,.18); color:#a8760a; }
.ad-card i.e-risco{ background:rgba(232,32,62,.12); color:#e8203e; }
.ad-c1 { left:-9%; top:6%; }
.ad-c2 { right:-8%; top:33%; }
.ad-c3 { left:-6%; bottom:16%; }
.ad-c4 { right:-6%; bottom:-4%; }
@media (max-width:1180px){ .ad-c1{left:-4%} .ad-c2{right:-3%} .ad-c3{left:-2%} .ad-c4{right:-2%} }
@media (max-width:900px){
  .sg-hero--fundo.e-duplo .sg-hero-grid { grid-template-columns:minmax(0,1fr); }
  .ad-palco { margin-top:28px; }
  .ad-cards { display:none; }
}

/* ─── bloco de diferencial em gradiente ─── */
.cd-gradiente { position:relative; overflow:hidden; color:#fff;
  padding:clamp(2.6rem,5vw,4rem) 0;
  background:linear-gradient(135deg,#38bdf8 0%,#2867ff 42%,#163080 78%,#0a1736 100%); }
.cd-gradiente h2 { font-size:clamp(25px,3.3vw,40px); font-weight:800; line-height:1.08;
  color:#fff; max-width:22ch; }
.cd-gradiente > .wrap > p { margin-top:14px; max-width:62ch; font-size:15.5px;
  line-height:1.65; color:rgba(255,255,255,.88); }
.cd-gradiente .cd-chips span { background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.30); color:#fff; }
.cd-gradiente-frase { margin-top:26px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.26);
  font-family:"Sora",sans-serif; font-size:clamp(16px,2.1vw,24px); font-weight:800;
  line-height:1.3; color:#fff; }

/* ─── ecossistema: administradora no centro ─── */
.cd-eco { margin-top:26px; padding:26px 28px; border-radius:22px;
  background:#fff; border:1px solid var(--gray-200); }
.cd-eco-topo { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.cd-eco-nucleo { font-family:"Sora",sans-serif; font-size:clamp(15px,1.9vw,20px);
  font-weight:800; letter-spacing:-.01em; color:#fff; padding:13px 22px; border-radius:14px;
  background:var(--grad); }
.cd-eco-unid { display:flex; flex-wrap:wrap; gap:8px; flex:1 1 320px; }
.cd-eco-unid span { font-size:12px; font-weight:600; padding:8px 14px; border-radius:999px;
  background:var(--ice-50); border:1px solid var(--gray-200); color:var(--gray-700); }
.cd-eco-rec { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:18px;
  border-top:1px solid var(--gray-100); }
.cd-eco-rec span { font-family:"Sora",sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:8px 14px; border-radius:999px;
  background:rgba(40,103,255,.07); color:var(--blue-600); }
.cd-eco-base { margin-top:18px; padding-top:16px; border-top:1px solid var(--gray-100);
  font-family:"Sora",sans-serif; font-size:15px; font-weight:700; color:var(--navy-900); }
.cd-eco-base em { font-style:normal; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* O MD pede a tela do Mapa Operacional nítida, legível e completa. Dentro da
   coluna de 48% ela renderiza a ~0,5x e o texto da interface some. No desktop
   o palco sangra até a margem da página (sempre com 40px de folga), o que
   devolve a escala quase 1:1 do mockup. */
@media (min-width:1181px){
  .sg-hero--fundo.e-duplo .ad-palco { margin-right:calc((1160px - 100vw) / 2 + 12px); }
  .sg-hero--fundo.e-duplo .ad-c2 { right:2%; }
  .sg-hero--fundo.e-duplo .ad-c4 { right:4%; }
}

/* ─── ODS / selos de referência ─── */
.cd-ods { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.cd-ods span { display:inline-flex; align-items:baseline; gap:7px; padding:9px 15px;
  border-radius:999px; background:var(--ice-50); border:1px solid var(--gray-200);
  font-size:12.5px; color:var(--gray-700); }
.cd-ods b { font-family:"Sora",sans-serif; font-size:12px; font-weight:800;
  letter-spacing:.04em; color:var(--blue-600); }

/* três colunas (pilares E · S · G) com quebra própria */
.cd-duplas--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px){ .cd-duplas--3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px){ .cd-duplas--3 { grid-template-columns:minmax(0,1fr); } }

/* ─── KPIs de eficiência (rótulos de indicador, não valores) ─── */
.cd-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px; }
.cd-kpi { position:relative; padding:20px 18px 18px; border-radius:16px; background:#fff;
  border:1px solid var(--gray-200); }
.cd-kpi::before { content:""; position:absolute; left:18px; right:18px; top:0; height:3px;
  border-radius:0 0 3px 3px; background:var(--grad); }
.cd-kpi b { display:block; font-family:"Sora",sans-serif; font-size:clamp(17px,2vw,22px);
  font-weight:800; letter-spacing:-.02em; line-height:1.1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cd-kpi span { display:block; margin-top:7px; font-size:12.5px; line-height:1.45; color:var(--gray-500); }
@media (max-width:900px){ .cd-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .cd-kpis { grid-template-columns:minmax(0,1fr); } }

/* ─── fotografia real de campo dentro do conteúdo ─── */
.cd-foto-campo { border-radius:20px; overflow:hidden; background:var(--gray-100);
  border:1px solid var(--gray-200); box-shadow:0 32px 68px -34px rgba(10,23,54,.45); }
.cd-foto-campo img { display:block; width:100%; height:clamp(230px,34vw,420px); object-fit:cover; }
.cd-foto-campo figcaption { padding:14px 20px 16px; background:#fff;
  font-size:13px; line-height:1.55; color:var(--gray-500); }

/* PADRÃO DE ALTURA DA FAIXA · no desktop a mídia da hero não pode empurrar a
   faixa para além do padrão: ela se ajusta ao mesmo miolo de conteúdo. */
@media (min-width:901px){
  .sg-hero-grid > .ad-palco,
  .sg-hero-grid > .sg-comp { max-height:clamp(540px,60vh,668px); }
  .ad-mapa, .sg-comp .sg-tela { max-height:100%; }
  .ad-mapa img, .sg-comp .sg-tela img { max-height:clamp(540px,60vh,668px);
    width:100%; height:auto; object-fit:contain; }
  /* a coluna de texto da hero dupla ganha um pouco mais de espaço para os
     dois CTAs caberem na mesma linha e a faixa não crescer */
  .sg-hero--fundo.e-duplo .sg-hero-grid { grid-template-columns:minmax(0,56fr) minmax(0,44fr); }
}


/* Encaixe fino no padrão: nas heros com mais copy, o miolo respira um pouco
   menos para a faixa não estourar a altura de referência. */
@media (min-width:901px){
  .sg-hero h1 { font-size:clamp(2rem,3.05vw,2.95rem); }
  .sg-lead { margin-top:14px; }
  .ad-destaque { margin-top:11px; }
  .sg-ind { margin-top:22px; }
  .sg-ctas { margin-top:22px; }
}

/* ─── prova em destaque na hero (o número é o protagonista) ─── */
.op-prova { position:relative; display:flex; flex-direction:column; gap:6px;
  padding:28px 28px 26px; border-radius:22px; margin:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(125,211,252,.24);
  box-shadow:0 40px 84px -34px rgba(2,8,26,.9); }
.op-prova .op-prova-n { font-family:"Sora",sans-serif; font-size:clamp(58px,8vw,104px);
  font-weight:800; letter-spacing:-.05em; line-height:.9;
  background:linear-gradient(120deg,#7dd3fc,#38bdf8 45%,#2867ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.op-prova b { font-family:"Sora",sans-serif; font-size:clamp(15px,1.9vw,20px);
  font-weight:800; line-height:1.2; color:#fff; }
.op-prova span:not(.op-prova-n):not(.op-prova-tag) { font-size:12.5px; line-height:1.45; color:rgba(226,240,255,.68); }
.op-prova .op-prova-tag { display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:"Sora",sans-serif; font-size:10px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan-400); margin-bottom:4px; }
.op-mini { display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(125,211,252,.22); }
.op-mini figure { margin:0; flex:0 0 96px; border-radius:10px; overflow:hidden;
  border:1px solid rgba(125,211,252,.22); }
.op-mini figure img { display:block; width:100%; height:64px; object-fit:cover; object-position:left top; }
.op-mini p { margin:0; font-size:12px; line-height:1.45; color:rgba(226,240,255,.70); }

/* ─── duas fases (obra → entrega) ─── */
.cn-fases { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:28px; }
.cn-fase { position:relative; overflow:hidden; padding:26px 26px 24px; border-radius:22px;
  border:1px solid var(--gray-200); background:#fff;
  box-shadow:0 26px 56px -34px rgba(10,23,54,.30); }
.cn-fase::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad); }
.cn-fase-n { font-family:"Sora",sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); }
.cn-fase h3 { margin-top:9px; font-size:clamp(18px,2.1vw,23px); font-weight:800;
  line-height:1.2; color:var(--navy-900); }
.cn-fase > p { margin-top:10px; font-size:14.5px; line-height:1.6; color:var(--gray-700); }
.cn-bench { display:grid; gap:10px; margin-top:16px; }
.cn-obra { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:12px; }
.cn-obra b { font-family:"Sora",sans-serif; font-size:12.5px; font-weight:700; color:var(--navy-900); }
.cn-obra i { display:block; height:13px; border-radius:999px; background:var(--gray-100); overflow:hidden; }
.cn-obra i em { display:block; height:100%; border-radius:999px; background:var(--grad); }
.cn-obra.e-alto i em { background:linear-gradient(90deg,#f3b41c,#e8203e); }
.cn-seta { display:grid; place-items:center; font-family:"Sora",sans-serif; font-size:12px;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); }
@media (max-width:900px){ .cn-fases { grid-template-columns:minmax(0,1fr); } }

/* REDE DE SEGURANÇA RESPONSIVA · algumas grades recebem grid-template-columns
   por style inline nas páginas, o que anula as media queries. Aqui o !important
   garante a quebra em telas estreitas independentemente do inline. */
@media (max-width:980px){
  .cd-recursos, .cd-apoios, .cd-ind-amb, .ap-passos, .ods-chips-big, .cd-green, .cd-kpis
    { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:620px){
  .cd-recursos, .cd-apoios, .cd-ind-amb, .ap-passos, .ods-chips-big, .cd-green,
  .cd-kpis, .cd-pecas, .cd-lista, .cd-duplas, .cd-rede, .cd-rede--3, .cn-fases
    { grid-template-columns:minmax(0,1fr) !important; }
}

/* ─── seletor de cenário (residencial | comercial) ─── */
.cd-abas { display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:var(--gray-100); border:1px solid var(--gray-200); margin-top:6px; }
.cd-aba { appearance:none; border:0; cursor:pointer; padding:9px 20px; border-radius:999px;
  font-family:"Sora",sans-serif; font-size:13px; font-weight:700; color:var(--gray-500);
  background:transparent; transition:.2s; }
.cd-aba[aria-selected="true"] { background:#fff; color:var(--navy-900);
  box-shadow:0 6px 16px -8px rgba(10,23,54,.35); }
.cd-painel[hidden] { display:none; }
.cd-dores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 22px; margin-top:20px; }
.cd-dores li { display:flex; gap:10px; font-size:14px; line-height:1.5; color:var(--gray-700); list-style:none; }
.cd-dores svg { flex:0 0 auto; margin-top:4px; color:#e8203e; }
.cd-amb { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.cd-amb span { font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px;
  background:var(--ice-50); border:1px solid var(--gray-200); color:var(--gray-700); }

/* ─── matriz de cenários ─── */
.cd-matriz { margin-top:24px; border:1px solid var(--gray-200); border-radius:20px; overflow:hidden; background:#fff; }
.cd-linha { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.15fr);
  gap:16px; padding:16px 20px; border-top:1px solid var(--gray-100); align-items:start; }
.cd-linha:first-child { border-top:0; background:var(--ice-50); }
.cd-linha b { font-family:"Sora",sans-serif; font-size:13.5px; font-weight:700; color:var(--navy-900); }
.cd-linha span { font-size:13px; line-height:1.5; color:var(--gray-700); }
.cd-linha.e-cab span, .cd-linha.e-cab b { font-family:"Sora",sans-serif; font-size:11px;
  font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-500); }
@media (max-width:820px){
  .cd-linha { grid-template-columns:minmax(0,1fr); gap:6px; }
  .cd-linha.e-cab { display:none; }
  .cd-linha span:last-child { color:var(--blue-600); font-weight:600; }
}

/* ─── benefícios por público ─── */
.cd-publicos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; }
.cd-publico { padding:20px 18px; border-radius:16px; background:#fff; border:1px solid var(--gray-200); }
.cd-publico b { display:block; font-family:"Sora",sans-serif; font-size:14.5px; font-weight:700; color:var(--navy-900); }
.cd-publico span { display:block; margin-top:7px; font-size:13px; line-height:1.55; color:var(--gray-500); }
@media (max-width:900px){ .cd-publicos { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .cd-publicos { grid-template-columns:minmax(0,1fr); } }

/* ─── FAQ ─── */
/* FAQ centralizada na página, com o cabeçalho no mesmo eixo. */
.cd-faq { margin:24px auto 0; max-width:900px; border:1px solid var(--gray-200);
  border-radius:20px; overflow:hidden; background:#fff; }
.cd-faq-cab { text-align:center; max-width:70ch; margin-inline:auto; }
.cd-faq summary, .cd-faq details > p { text-align:left; }
.cd-faq details { border-top:1px solid var(--gray-100); }
.cd-faq details:first-child { border-top:0; }
.cd-faq summary { list-style:none; cursor:pointer; padding:18px 22px; display:flex;
  align-items:center; justify-content:space-between; gap:16px;
  font-family:"Sora",sans-serif; font-size:15px; font-weight:700; color:var(--navy-900); }
.cd-faq summary::-webkit-details-marker { display:none; }
.cd-faq summary::after { content:"+"; font-size:20px; font-weight:700; color:var(--blue-500); flex:0 0 auto; }
.cd-faq details[open] summary::after { content:"−"; }
.cd-faq details > p { margin:0; padding:0 22px 20px; font-size:14px; line-height:1.65; color:var(--gray-700); max-width:80ch; }

/* ─── faixa de impacto do setor público (+10 milhões) ─── */
.op-impacto { position:relative; overflow:hidden; color:#fff;
  padding:clamp(2.8rem,5vw,4.2rem) 0;
  background-color:var(--navy-950);
  background-image:
    radial-gradient(900px 480px at 84% 8%, rgba(56,189,248,.22), transparent 62%),
    linear-gradient(165deg,#050d24,#0a1736 58%,#0f2050); }
.op-impacto-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.6rem); align-items:center; }
.op-big { font-family:"Sora",sans-serif; font-weight:800; letter-spacing:-.045em;
  line-height:.92; font-size:clamp(52px,7.4vw,96px);
  background:linear-gradient(120deg,#7dd3fc,#38bdf8 42%,#2867ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.op-big-sub { display:block; font-family:"Sora",sans-serif; font-size:clamp(18px,2.4vw,28px);
  font-weight:800; letter-spacing:-.02em; color:#fff; margin-top:4px; }
.op-impacto p { margin-top:16px; font-size:15.5px; line-height:1.65; color:rgba(226,240,255,.78); max-width:52ch; }
.op-cards { display:grid; gap:10px; }
.op-card { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-radius:16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(125,211,252,.24);
  transition:transform .2s, background .2s; }
.op-card:hover { transform:translateY(-2px); background:rgba(255,255,255,.10); }
.op-card i { flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid;
  place-items:center; background:rgba(56,189,248,.16); color:var(--cyan-400); }
.op-card b { display:block; font-family:"Sora",sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(226,240,255,.72); }
.op-card strong { display:block; margin-top:4px; font-family:"Sora",sans-serif;
  font-size:16px; font-weight:800; color:var(--cyan-400); }
.op-card span { display:block; margin-top:3px; font-size:12.5px; line-height:1.45; color:rgba(226,240,255,.72); }
@media (max-width:900px){ .op-impacto-grid { grid-template-columns:minmax(0,1fr); } }

/* ─── leve para o seu município ─── */
.op-leve { position:relative; overflow:hidden; border-radius:26px; margin-top:36px;
  min-height:clamp(300px,32vw,420px); display:flex; align-items:flex-end; }
.op-leve img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.op-leve::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,13,36,.20) 0%, rgba(5,13,36,.62) 52%, rgba(5,13,36,.94) 100%); }
.op-leve-txt { position:relative; z-index:1; padding:clamp(22px,3vw,38px); color:#fff; }
.op-leve-txt h2 { font-size:clamp(24px,3.2vw,38px); font-weight:800; line-height:1.1; max-width:20ch; }
.op-leve-txt h2 em { font-style:normal;
  background:linear-gradient(120deg,#7dd3fc,#38bdf8 45%,#2867ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.op-leve-txt p { margin-top:12px; font-size:15px; line-height:1.6; color:rgba(226,240,255,.86); max-width:56ch; }

/* ─── faixa de case com fotografia ao fundo ─── */
.cd-gradiente.e-foto { background:var(--navy-950); }
.cd-gradiente-fundo { position:absolute; inset:0; z-index:0; overflow:hidden; }
.cd-gradiente-fundo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.cd-gradiente-fundo::after { content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(22,48,128,.96) 0%, rgba(22,48,128,.90) 42%,
                           rgba(10,23,54,.72) 70%, rgba(10,23,54,.58) 100%),
    linear-gradient(180deg, rgba(10,23,54,.42), rgba(10,23,54,.18) 40%, rgba(10,23,54,.70)); }
.cd-gradiente.e-foto > .wrap { position:relative; z-index:1; }

/* números do case, um por linha e legíveis */
.cd-numeros { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.28); }
.cd-numeros div b { display:block; font-family:"Sora",sans-serif;
  font-size:clamp(22px,2.8vw,32px); font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff; }
.cd-numeros div span { display:block; margin-top:7px; font-size:12px; line-height:1.4; color:rgba(255,255,255,.78); }
@media (max-width:720px){ .cd-numeros { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ─── escala do impacto de rede (1 → 10 → 100) ─── */
.fr-escala { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:22px; align-items:stretch; }
.fr-escala div { padding:20px 18px; border-radius:16px; background:#fff; border:1px solid var(--gray-200); }
.fr-escala div:last-child { background:var(--grad); border-color:transparent; color:#fff; }
.fr-escala b { display:block; font-family:"Sora",sans-serif; font-size:clamp(20px,2.6vw,30px);
  font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--navy-900); }
.fr-escala div:last-child b { color:#fff; }
.fr-escala span { display:block; margin-top:8px; font-size:12.5px; line-height:1.45; color:var(--gray-500); }
.fr-escala div:last-child span { color:rgba(255,255,255,.88); }
@media (max-width:760px){ .fr-escala { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ─── jornada do franqueado ─── */
.fr-jornada { list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px; margin:22px 0 0; padding:0; }
.fr-jornada li { position:relative; padding:18px 16px; border-radius:14px; background:var(--ice-50);
  border:1px solid var(--gray-200); }
.fr-jornada b { display:block; font-family:"Sora",sans-serif; font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue-500); }
.fr-jornada span { display:block; margin-top:7px; font-family:"Sora",sans-serif; font-size:14.5px;
  font-weight:700; color:var(--navy-900); }
@media (max-width:900px){ .fr-jornada { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .fr-jornada { grid-template-columns:minmax(0,1fr); } }

/* ─── desenho da parceria (duas frentes) ─── */
.fr-parceria { margin-top:26px; padding:26px 28px; border-radius:24px; background:#fff;
  border:1px solid var(--gray-200); box-shadow:0 26px 56px -34px rgba(10,23,54,.30); }
.fr-topo { display:flex; justify-content:center; }
.fr-nucleo { font-family:"Sora",sans-serif; font-size:clamp(16px,2.1vw,22px); font-weight:800;
  letter-spacing:-.015em; color:#fff; padding:14px 26px; border-radius:16px; background:var(--grad); }
.fr-frentes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
.fr-frente { padding:22px 22px 20px; border-radius:18px; background:var(--ice-50);
  border:1px solid var(--gray-200); }
.fr-frente b { display:block; font-family:"Sora",sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); }
.fr-frente h3 { margin-top:9px; font-size:19px; font-weight:800; line-height:1.2; color:var(--navy-900); }
.fr-frente p { margin-top:9px; font-size:14px; line-height:1.6; color:var(--gray-700); }
.fr-desce { display:grid; place-items:center; gap:10px; margin-top:18px; }
.fr-desce span { font-family:"Sora",sans-serif; font-size:12.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gray-500); }
.fr-desce em { font-style:normal; font-family:"Sora",sans-serif; font-size:clamp(17px,2.3vw,24px);
  font-weight:800; letter-spacing:-.02em; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-align:center; }
@media (max-width:760px){ .fr-frentes { grid-template-columns:minmax(0,1fr); } }

/* ─── os três ganhos ─── */
.fr-ganhos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:24px; }
.fr-ganho { padding:24px 22px; border-radius:20px; color:#fff;
  background:linear-gradient(155deg,#0a1736,#0f2050 65%,#163080); }
.fr-ganho:nth-child(2) { background:linear-gradient(155deg,#123a86,#1f4ed8 70%,#2867ff); }
.fr-ganho:nth-child(3) { background:linear-gradient(155deg,#0b3b63,#0e6ea8 65%,#38bdf8); }
.fr-ganho b { display:block; font-family:"Sora",sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(226,240,255,.78); }
.fr-ganho strong { display:block; margin-top:10px; font-family:"Sora",sans-serif;
  font-size:clamp(16px,2vw,20px); font-weight:800; line-height:1.25; color:#fff; }
.fr-ganho span { display:block; margin-top:9px; font-size:13px; line-height:1.55; color:rgba(226,240,255,.80); }
@media (max-width:900px){ .fr-ganhos { grid-template-columns:minmax(0,1fr); } }

/* ─── indicadores que a marca pode comunicar ─── */
.fr-comunica { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:20px; }
.fr-comunica div { padding:16px 14px; border-radius:14px; background:#fff; border:1px dashed var(--gray-300); }
.fr-comunica b { display:block; font-family:"Sora",sans-serif; font-size:20px; font-weight:800;
  color:var(--gray-300); line-height:1; }
.fr-comunica span { display:block; margin-top:8px; font-size:12px; line-height:1.4; color:var(--gray-700); }
@media (max-width:900px){ .fr-comunica { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .fr-comunica { grid-template-columns:minmax(0,1fr); } }

/* unidade do número protagonista (mi, %, m³…) */
.op-prova .op-prova-n i { font-style:normal; font-size:.38em; font-weight:800;
  letter-spacing:-.02em; margin-left:.12em; }
/* prova secundária dentro do card do herói */
.op-mini-prova { display:flex; align-items:baseline; gap:12px; }
.op-mini-prova b { flex:0 0 auto; font-family:"Sora",sans-serif; font-size:clamp(26px,3.4vw,38px);
  font-weight:800; letter-spacing:-.035em; line-height:1; color:var(--cyan-400); }
.op-mini-prova span { font-size:12.5px; line-height:1.45; color:rgba(226,240,255,.72); }

/* ─── tabela de dores → consequência → como a FOOZ ajuda ─── */
.sp-dores { margin-top:24px; border:1px solid var(--gray-200); border-radius:20px;
  overflow:hidden; background:#fff; }
.sp-linha { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.1fr);
  gap:16px; padding:16px 20px; border-top:1px solid var(--gray-100); align-items:start; }
.sp-linha:first-child { border-top:0; background:var(--ice-50); }
.sp-linha b { font-family:"Sora",sans-serif; font-size:13.5px; font-weight:700; color:var(--navy-900); }
.sp-linha span { font-size:13px; line-height:1.5; color:var(--gray-700); }
.sp-linha span.e-fooz { color:var(--blue-600); font-weight:600; }
.sp-linha.e-cab b, .sp-linha.e-cab span { font-family:"Sora",sans-serif; font-size:11px;
  font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-500); }
@media (max-width:860px){
  .sp-linha { grid-template-columns:minmax(0,1fr); gap:5px; }
  .sp-linha.e-cab { display:none; }
}

/* ─── ecossistema em cards compactos ─── */
.sp-eco { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:26px; }
.sp-card { display:flex; flex-direction:column; gap:7px; padding:20px 18px; border-radius:16px;
  background:#fff; border:1px solid var(--gray-200); color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s; }
a.sp-card:hover { transform:translateY(-3px); border-color:var(--blue-400);
  box-shadow:0 22px 44px -26px rgba(40,103,255,.45); }
.sp-card i { width:36px; height:36px; border-radius:10px; background:var(--ice-100);
  color:var(--blue-600); display:grid; place-items:center; }
.sp-card b { font-family:"Sora",sans-serif; font-size:14.5px; font-weight:700; color:var(--navy-900); }
.sp-card span { font-size:12.5px; line-height:1.45; color:var(--gray-500); flex:1; }
.sp-card .ap-ver { margin-top:4px; }
/* Na primeira dobra larga a composição nunca ultrapassa a altura da faixa:
   a tela da Plataforma absorve a sobra em vez de empurrar o hero. */
@media (min-width:981px){
  .sg-hero .sg-comp{ min-height:0; }
  .hc{ height:100%; }
  .hc-tela{ min-height:0; }
}

@media (max-width:1080px){ .sp-eco { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .sp-eco { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .sp-eco { grid-template-columns:minmax(0,1fr); } }

/* ─── perfis de operação ─── */
.sp-perfis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:24px; }
.sp-perfil { padding:24px 22px; border-radius:20px; background:#fff; border:1px solid var(--gray-200); }
.sp-perfil b { display:block; font-family:"Sora",sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); }
.sp-perfil h3 { margin-top:9px; font-size:19px; font-weight:800; color:var(--navy-900); }
@media (max-width:900px){ .sp-perfis { grid-template-columns:minmax(0,1fr); } }

/* estado do mapa, sem depender só de cor */
.sp-estados { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.sp-estado { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(125,211,252,.24);
  font-size:12.5px; color:#eaf4ff; }
.sp-estado i { font-style:normal; font-weight:800; font-size:11px; letter-spacing:.06em; }
.sp-estado.e-ok i { color:#5be49b; } .sp-estado.e-aten i { color:#f3b41c; }
.sp-estado.e-crit i { color:#ff7676; } .sp-estado.e-mudo i { color:#94a3b8; }

/* ═══════════════ ASSINATURA "DO FÍSICO AO DIGITAL" ═══════════════════
   Padrão mestre das heros de segmento: muda a fotografia e muda o que é
   físico em cada operação, mas a lógica Físico → Digital → Resultado é
   sempre a mesma. É o que impede o Vortex de parecer um produto separado
   da Plataforma. */
.sg-fd { position:relative; z-index:1; margin:0 0 18px; padding:14px 16px 13px;
  border-radius:16px; background:rgba(255,255,255,.055);
  border:1px solid rgba(125,211,252,.22); }
.sg-fd-selo { display:inline-flex; align-items:center; gap:8px;
  font-family:"Sora",sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan-400); }
.sg-fd-selo::before { content:""; width:14px; height:1.5px; background:var(--cyan-400); border-radius:2px; }
.sg-fd-eixo { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:10px; margin-top:10px; }
.sg-fd-lado b { display:block; font-family:"Sora",sans-serif; font-size:10.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.sg-fd-lado i { display:block; margin-top:3px; font-style:normal; font-size:11.5px;
  line-height:1.35; color:rgba(226,240,255,.68); }
.sg-fd-seta { font-family:"Sora",sans-serif; font-size:15px; color:var(--cyan-400); }
.sg-fd-fluxo { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  margin:11px 0 0; padding:10px 0 0; border-top:1px solid rgba(125,211,252,.18); }
.sg-fd-fluxo li { font-family:"Sora",sans-serif; font-size:9.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(226,240,255,.62); white-space:nowrap; }
.sg-fd-fluxo li + li::before { content:"→"; margin:0 5px 0 1px; color:rgba(125,211,252,.45); }
.sg-fd-fluxo li:last-child { color:var(--cyan-400); }
/* nas heros de coluna única a assinatura fecha o bloco de texto */
.sg-fd.e-fim { margin:26px 0 0; max-width:min(560px,100%); }
@media (max-width:520px){
  .sg-fd-eixo { grid-template-columns:minmax(0,1fr); gap:8px; }
  .sg-fd-seta { display:none; }
}

/* variante com a prova física: a medição de vazão real acima do eixo.
   Usada nos segmentos em que a economia acontece no ponto de uso. */
.sg-fd--vazao .sg-fd-prova { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:12px; align-items:stretch; margin-top:11px; }
.sg-fd--vazao figure { margin:0; border-radius:12px; overflow:hidden;
  border:1px solid rgba(125,211,252,.20); }
.sg-fd--vazao figure img { display:block; width:100%; height:100%; min-height:96px; object-fit:cover; object-position:58% 45%; }
.sg-fd-barras { display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:12px; background:rgba(5,13,36,.42);
  border:1px solid rgba(125,211,252,.18); }
.sg-fd-barra { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:9px; }
.sg-fd-barra span { font-family:"Sora",sans-serif; font-size:9.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(226,240,255,.62); }
.sg-fd-barra i { display:block; height:9px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
.sg-fd-barra i em { display:block; height:100%; border-radius:999px; background:rgba(255,255,255,.42); }
.sg-fd-barra.e-depois span { color:#fff; }
.sg-fd-barra.e-depois i em { background:linear-gradient(90deg,#7dd3fc,#38bdf8 55%,#2867ff); }
.sg-fd-legenda { margin-top:8px; font-size:10.5px; line-height:1.4; color:rgba(226,240,255,.55); }
@media (max-width:520px){ .sg-fd--vazao .sg-fd-prova { grid-template-columns:minmax(0,1fr); } }

/* ═══════════════════════════════════════════════════════════════════
   HERO — PADRÃO GLOBAL DOS SEGMENTOS
   Promessa + prova visual. A composição conta a história em três
   camadas: economia física (saco de vazão + até 80%), inteligência
   digital (tela real da Plataforma) e o resultado sustentável que
   nasce da soma das duas. O peso de cada camada muda por segmento.
   ═══════════════════════════════════════════════════════════════════ */
.hc{ position:relative; z-index:1; display:grid; gap:11px; align-content:center;
  grid-template-rows:auto minmax(0,1fr) auto; }

/* 01 — ECONOMIA ---------------------------------------------------- */
.hc-eco{ display:grid; gap:11px; padding:13px;
  border-radius:18px;
  background:linear-gradient(152deg, rgba(56,189,248,.14), rgba(255,255,255,.04) 62%);
  border:1px solid rgba(125,211,252,.26);
  box-shadow:0 20px 44px -30px rgba(2,8,23,.9); }
.hc-eco-topo{ display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:12px; align-items:center; }
.hc-foto{ margin:0; border-radius:13px; overflow:hidden; aspect-ratio:4/3.2;
  border:1px solid rgba(255,255,255,.15); background:#08132e; }
.hc-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.hc-num b{ display:block; color:#fff; letter-spacing:-.03em;
  font:800 clamp(30px,3.2vw,42px)/.9 'Sora',system-ui,sans-serif; }
.hc-num b i{ display:block; font-style:normal; letter-spacing:.13em; text-transform:uppercase;
  font:700 10.5px/1 'Sora',system-ui,sans-serif; color:var(--cyan-400,#38bdf8); margin:0 0 5px; }
.hc-num span{ display:block; margin:6px 0 0; font-size:11.5px; line-height:1.36;
  color:rgba(226,240,255,.76); }
.hc-barras{ display:grid; gap:6px; }
.hc-barra{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:9px; align-items:center;
  font:700 9.5px/1 'Sora',system-ui,sans-serif; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(226,240,255,.68); }
.hc-barra i{ display:block; height:9px; border-radius:99px;
  background:rgba(255,255,255,.11); overflow:hidden; }
.hc-barra em{ display:block; height:100%; border-radius:99px; background:rgba(255,255,255,.4); }
.hc-barra.e-depois{ color:var(--cyan-400,#38bdf8); }
.hc-barra.e-depois em{ background:linear-gradient(90deg,#22d3ee,#38bdf8);
  box-shadow:0 0 16px rgba(56,189,248,.55); }
.hc-legenda{ margin:1px 0 0; font-size:10.5px; line-height:1.4; color:rgba(226,240,255,.58); }

/* O elo entre o físico e o digital: a economia medida no ponto sobe
   para a Plataforma. Traço discreto, nunca um fluxograma. */
.hc-eco::after{ content:""; position:absolute; left:50%; bottom:-11px; width:1px; height:11px;
  background:linear-gradient(180deg, rgba(56,189,248,.75), rgba(56,189,248,0)); }
.hc-eco{ position:relative; }
.hc-tela::before{ content:""; position:absolute; left:50%; top:0; z-index:2;
  width:34px; height:2px; transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(56,189,248,0), #38bdf8, rgba(56,189,248,0)); }

/* 02 — INTELIGÊNCIA ------------------------------------------------ */
.hc-tela{ position:relative; margin:0; border-radius:16px; overflow:hidden;
  border:1px solid rgba(125,211,252,.3); background:#050d24;
  box-shadow:0 26px 50px -28px rgba(2,8,23,.95); aspect-ratio:16/9.6; }
.hc-tela img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.hc-tela figcaption{ position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px;
  font:700 9.5px/1.3 'Sora',system-ui,sans-serif; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(226,240,255,.82);
  background:linear-gradient(180deg, rgba(5,13,36,0), rgba(5,13,36,.9)); }

/* 03 — RESULTADO / assinatura -------------------------------------- */
.hc-rodape{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.hc-ass{ margin:0; display:flex; align-items:center; gap:8px;
  font:700 10px/1.2 'Sora',system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan-400,#38bdf8); }
.hc-ass::before{ content:""; width:18px; height:1px; background:currentColor; opacity:.8; }
.hc-rodape .sg-prova{ margin:0; display:inline-flex; align-items:baseline; gap:8px;
  padding:6px 12px; border-radius:99px; }
.hc-rodape .sg-prova span,
.hc-rodape .sg-prova b,
.hc-rodape .sg-prova i{ display:inline; margin:0; }
.hc-rodape .sg-prova b{ font-size:16px; line-height:1; }
.hc-rodape .sg-prova span,
.hc-rodape .sg-prova i{ font-size:10px; }

/* Pesos por segmento ----------------------------------------------- */
/* economia física em primeiro plano */
.hc.e-fisico .hc-tela{ aspect-ratio:16/8.2; }
/* economia + plataforma equilibradas */
.hc.e-equilibrio .hc-eco-topo{ grid-template-columns:minmax(0,.64fr) minmax(0,1.36fr); }
.hc.e-equilibrio .hc-foto{ aspect-ratio:4/3.4; }
.hc.e-equilibrio .hc-tela{ aspect-ratio:16/9; }
/* rede / multiunidades: a visão geral é a protagonista */
.hc.e-rede .hc-eco{ padding:11px 12px; }
.hc.e-rede .hc-eco-topo{ grid-template-columns:minmax(0,74px) minmax(0,1fr) minmax(0,1.05fr); }
.hc.e-rede .hc-foto{ aspect-ratio:1/1; }
.hc.e-rede .hc-num b{ font-size:clamp(26px,2.4vw,32px); }
.hc.e-rede .hc-num span{ font-size:11px; }
.hc.e-rede .hc-tela{ aspect-ratio:16/11; }
.hc.e-rede .hc-legenda{ display:none; }

/* Na primeira dobra larga a composição nunca ultrapassa a altura da faixa:
   a tela da Plataforma absorve a sobra em vez de empurrar o hero. */
@media (min-width:981px){
  .sg-hero .sg-comp{ min-height:0; }
  .hc{ height:100%; }
  .hc-tela{ min-height:0; }
}

@media (max-width:1080px){
  .hc.e-rede .hc-eco-topo{ grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); }
  .hc.e-rede .hc-foto{ aspect-ratio:4/3.2; }
}
@media (max-width:620px){
  .hc-eco-topo, .hc.e-rede .hc-eco-topo{ grid-template-columns:minmax(0,1fr) !important; }
  .hc-foto, .hc.e-rede .hc-foto, .hc.e-equilibrio .hc-foto{ aspect-ratio:16/9; }
  .hc-tela, .hc.e-fisico .hc-tela, .hc.e-equilibrio .hc-tela, .hc.e-rede .hc-tela{ aspect-ratio:16/10.5; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO DE MARCA — padrão definitivo
   Uma hero = uma ideia. Frase de impacto, uma linha de apoio, uma ação
   e uma imagem protagonista. Tudo o que explicava a solução desceu para
   os blocos seguintes; nada foi apagado, só reposicionado.
   ═══════════════════════════════════════════════════════════════════ */
.sg-hero--marca .sg-hero-grid { align-items:center; }
.sg-hero--marca h1 { margin:8px 0 0; max-width:15ch; }
.sg-hero--marca .sg-lead { margin:16px 0 0; max-width:40ch;
  font-size:clamp(15px,1.2vw,17.5px); line-height:1.5; }
.sg-hero--marca .sg-ctas { margin-top:clamp(22px,2.6vw,30px); }

/* a foto ocupa a faixa inteira: imersiva, sem card, sem moldura */
.sg-hero--marca.e-foto .sg-hero-grid { grid-template-columns:minmax(0,1fr); }
.sg-hero--marca.e-foto .sg-hero-txt { max-width:min(600px,100%); }
/* Hero só de frase, centralizada: a manchete no meio, uma linha de apoio
   e a ação embaixo. A imagem grande da Plataforma vem logo depois. */
/* precisa vencer o .sg-hero--fundo .sg-hero-grid > div:first-child (660px),
   que existe para a hero de texto à esquerda. */
.sg-hero--marca.e-largo .sg-hero-grid > .sg-hero-txt { max-width:min(940px,100%);
  margin-inline:auto; text-align:center; }
.sg-hero--marca.e-largo .sg-migalha { justify-content:center; }
.sg-hero--marca.e-largo h1 { max-width:none; margin-inline:auto;
  font-size:clamp(2rem,3.6vw,3.15rem); line-height:1.06; }
.sg-hero--marca.e-largo .sg-lead { max-width:56ch; margin-inline:auto;
  font-size:clamp(16px,1.35vw,19px); }
.sg-hero--marca.e-largo .sg-ctas { justify-content:center; }
@media (max-width:560px){
  .sg-hero--marca.e-largo .sg-hero-txt { text-align:left; }
  .sg-hero--marca.e-largo .sg-migalha, .sg-hero--marca.e-largo .sg-ctas { justify-content:flex-start; }
}

/* quando a protagonista é a tela real da Plataforma */
.sg-palco { position:relative; z-index:1; margin:0; }
.sg-palco img { display:block; width:100%; height:auto; border-radius:18px;
  border:1px solid rgba(125,211,252,.3); background:#050d24;
  box-shadow:0 40px 80px -34px rgba(2,8,23,.95); }
.sg-palco figcaption { margin:12px 0 0; font:700 10px/1.3 'Sora',system-ui,sans-serif;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(198,214,244,.62); }

/* um único número de prova — usado só onde a narrativa pede (setor público) */
.sg-numerao { position:relative; z-index:1; margin:26px 0 0; }
.sg-numerao b { display:block; font:800 clamp(44px,5.4vw,74px)/.88 'Sora',system-ui,sans-serif;
  letter-spacing:-.04em; color:#fff; }
.sg-numerao span { display:block; margin:10px 0 0; max-width:34ch; font-size:13.5px;
  line-height:1.45; color:rgba(226,240,255,.76); }

/* ── AVISO TEMPORÁRIO DE IMAGEM PENDENTE (não vai para produção) ──── */
.sg-falta { position:relative; z-index:1; display:grid; gap:12px; padding:30px 26px;
  border-radius:20px; text-align:center; aspect-ratio:16/10.5; align-content:center;
  border:2px dashed rgba(125,211,252,.45); background:rgba(56,189,248,.06); }
.sg-falta b { font:800 11px/1.3 'Sora',system-ui,sans-serif; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cyan-400,#38bdf8); }
.sg-falta i { font-style:normal; font:700 13px/1.3 'Sora',system-ui,sans-serif;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.sg-falta p { margin:0; font-size:13.5px; line-height:1.5; color:rgba(226,240,255,.8); }
.sg-falta small { font-size:11.5px; line-height:1.45; color:rgba(198,214,244,.58); }

/* ═══════════════════════════════════════════════════════════════════
   PROVA FOOZ — o saco de vazão sai da hero e vira prova do método.
   Componente reutilizável, sempre logo abaixo da primeira dobra.
   ═══════════════════════════════════════════════════════════════════ */
/* Fundo claro: o saco de vazão foi fotografado em branco e é nesse fundo
   que ele fica perfeito. A faixa também dá respiro logo depois da hero. */
.prova-fooz { position:relative; padding:clamp(48px,6vw,80px) 0;
  background:linear-gradient(180deg,#ffffff,#f4f8ff 62%,#eef4ff); color:var(--navy-900,#0a1736); }
.prova-fooz .wrap { position:relative; z-index:1; }
.prova-grade { display:grid; align-items:center; gap:clamp(26px,4vw,54px);
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
.prova-passos { list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 4px; margin:0 0 16px; padding:0; }
.prova-passos li { font:800 10.5px/1 'Sora',system-ui,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-500,#64748b); white-space:nowrap; }
.prova-passos li + li::before { content:"\2192"; margin:0 8px 0 3px; color:#a9bdd8; }
.prova-passos li:last-child { color:var(--blue-500,#2867ff); }
.prova-fooz h2 { margin:0; font:800 clamp(26px,3.1vw,40px)/1.08 'Sora',system-ui,sans-serif;
  letter-spacing:-.025em; color:var(--navy-900,#0a1736); }
.prova-fooz h2 em { font-style:normal; color:var(--blue-500,#2867ff); }
.prova-fooz p { margin:14px 0 0; max-width:44ch; font-size:15.5px; line-height:1.6;
  color:var(--gray-500,#64748b); }
.prova-medida { display:flex; flex-wrap:wrap; gap:10px 26px; margin:22px 0 0;
  padding:18px 0 0; border-top:1px solid var(--gray-100,#eef2f7); }
.prova-medida div b { display:block; font:800 clamp(22px,2.4vw,30px)/1 'Sora',system-ui,sans-serif;
  letter-spacing:-.02em; color:var(--navy-900,#0a1736); }
.prova-medida div.e-depois b { color:var(--blue-500,#2867ff); }
.prova-medida div span { display:block; margin-top:5px; font:700 10px/1.2 'Sora',system-ui,sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500,#64748b); }
.prova-medida .prova-seta { align-self:center; color:#a9bdd8; font-size:20px; }
.prova-foto { margin:0; }
.prova-foto img { display:block; width:100%; height:auto; }
.prova-nota { margin:16px 0 0; font-size:12px; line-height:1.5; color:#94a3b8; }
@media (max-width:900px){
  .prova-grade { grid-template-columns:minmax(0,1fr); }
  .prova-foto { max-width:440px; margin-inline:auto; width:100%; order:-1; }
}

/* ═══════════════════════════════════════════════════════════════════
   NÚMERO DE IMPACTO NA HERO — mesmo padrão da página Economizar.
   O número é a segunda metade da composição: economia primeiro, e as
   duas leituras (ponto e conta) logo abaixo, em corpo pequeno.
   ═══════════════════════════════════════════════════════════════════ */
.sg-num { position:relative; z-index:1; text-align:center; align-self:center; }
.sg-num-rot { display:block; margin:0; font-family:'Sora',system-ui,sans-serif; font-weight:800;
  font-size:clamp(12px,1.2vw,16px); letter-spacing:.34em; text-transform:uppercase;
  color:var(--cyan-400,#38bdf8); padding-left:.34em;
  text-shadow:0 1px 2px rgba(2,8,23,.9), 0 2px 16px rgba(2,8,23,.8); }
.sg-num-big { display:block; margin:2px 0 0; font-family:'Sora',system-ui,sans-serif;
  font-weight:800; font-size:clamp(88px,13.5vw,212px); line-height:.84; letter-spacing:-.055em;
  white-space:nowrap;
  background:linear-gradient(160deg,#ffffff 26%,#7dd3fc 62%,#38bdf8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 30px rgba(2,8,23,.55)); }
.sg-num-pe { margin:16px auto 0; max-width:27ch; display:grid; gap:9px; }
.sg-num-pe span { font-size:13px; line-height:1.4; color:#eaf4ff;
  text-shadow:0 1px 2px rgba(2,8,23,.96), 0 2px 16px rgba(2,8,23,.9); }
.sg-num-pe span strong { color:#fff; font-weight:700; }
.sg-num-pe span + span { padding-top:9px; border-top:1px solid rgba(255,255,255,.22); }
@media (max-width:900px){
  .sg-num { text-align:left; }
  .sg-num-pe { margin-inline:0; }
}

/* ═══════════════════════════════════════════════════════════════════
   ODS DA ONU — mesmo bloco da página principal, reaproveitado nos
   segmentos com pauta ESG. Declaração de alinhamento, não selo.
   ═══════════════════════════════════════════════════════════════════ */
  /* ═══════ CONEXÃO COM OS ODS DA ONU · versão compacta ═══════════════
     A versão completa vive na página do Selo FOOZ. Aqui fica a leitura
     rápida: a ODS 6 como conexão principal e as complementares em faixa.
     Importante: é declaração de alinhamento aos objetivos, não selo,
     certificação nem chancela da ONU. */
  .home-ods { padding:56px 0 64px; background:var(--ice-50, #F7F9FC);
    border-top:1px solid rgba(15,23,42,.06); border-bottom:1px solid rgba(15,23,42,.06); }
  .home-ods .ho-cab { max-width:70ch; }
  .home-ods .ho-eyebrow { font-family:"Sora",sans-serif; font-size:11.5px; font-weight:800;
    letter-spacing:.16em; text-transform:uppercase; color:#2867ff; }
  .home-ods h2 { margin-top:10px; font-family:"Sora","Geologica",sans-serif;
    font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-.025em;
    line-height:1.1; color:#0a1736; }
  .home-ods h2 em { font-style:normal;
    background:linear-gradient(120deg,#38bdf8,#2867ff 60%,#0D0EFF);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .home-ods > .wrap > p { margin-top:12px; max-width:74ch; font-size:14.5px;
    line-height:1.65; color:#64748b; }
  .ho-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr);
    gap:16px; margin-top:24px; align-items:stretch; }
  .ho-principal { display:flex; gap:18px; align-items:flex-start; padding:22px;
    border-radius:20px; background:#fff; border:1px solid rgba(15,23,42,.08);
    box-shadow:0 20px 44px -30px rgba(15,23,42,.45); }
  .ho-selo { flex:0 0 auto; width:96px; border-radius:14px; background:#26BDE2; color:#fff;
    padding:16px 14px; }
  .ho-selo .n { display:block; font-family:"Sora",sans-serif; font-size:34px; font-weight:900;
    line-height:1; letter-spacing:-.04em; }
  .ho-selo .t { display:block; margin-top:8px; font-family:"Sora",sans-serif; font-size:11px;
    font-weight:800; line-height:1.25; }
  .ho-principal b { display:block; font-family:"Sora",sans-serif; font-size:16px;
    font-weight:800; color:#0a1736; line-height:1.25; }
  .ho-principal p { margin-top:8px; font-size:13px; line-height:1.6; color:#64748b; }
  .ho-fluxo { margin-top:12px; font-family:"Sora",sans-serif; font-size:12.5px; color:#64748b; }
  .ho-fluxo b { display:inline; font-size:12.5px; color:#0a1736; }
  .ho-outros { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .ho-ods { display:flex; flex-direction:column; padding:16px 14px; border-radius:16px; color:#fff; }
  .ho-ods .n { font-family:"Sora",sans-serif; font-size:22px; font-weight:900; line-height:1; letter-spacing:-.03em; }
  .ho-ods b { display:block; margin-top:8px; font-family:"Sora",sans-serif; font-size:12px;
    font-weight:800; line-height:1.3; }
  .ho-ods span { display:block; margin-top:auto; padding-top:10px; font-size:10.5px;
    line-height:1.4; color:rgba(255,255,255,.82); }
  /* ODS 7 é #FCC30B no manual da ONU, claro demais para texto branco. O
     site já resolve isso no ODS 12 (oficial #CF8D2A, aqui #BF8B2E):
     mesma escurecida, para o card ficar legível e reconhecível. */
  .ho-ods.o07 { background:#C79A0C; }
  .ho-ods.o11 { background:#FD9D24; } .ho-ods.o12 { background:#BF8B2E; }
  .ho-ods.o13 { background:#3F7E44; } .ho-ods.o17 { background:#19486A; }
  .ho-nota { margin-top:16px; font-size:12px; line-height:1.55; color:#94a3b8; max-width:80ch; }
  .ho-nota a { color:#2867ff; font-weight:600; }
  @media (max-width:900px){ .ho-grid { grid-template-columns:minmax(0,1fr); }
    .ho-outros { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:520px){ .ho-outros { grid-template-columns:minmax(0,1fr); } }

/* ═══════════════════════════════════════════════════════════════════
   HERO COM A PLATAFORMA EM PRIMEIRO PLANO
   A tela real ganha peso e avança até a borda da tela; logo abaixo da
   hero vem uma imagem grande da Plataforma, sem moldura de navegador,
   sem sombra e sem inclinação.
   ═══════════════════════════════════════════════════════════════════ */
.sg-hero--marca.e-palco .sg-hero-grid { grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  column-gap:clamp(1.2rem,2.4vw,2.2rem); }
.sg-hero--marca.e-palco .sg-hero-txt h1 { max-width:14ch;
  font-size:clamp(1.9rem,2.75vw,2.5rem); line-height:1.05; }
@media (max-width:980px){
  .sg-hero--marca.e-palco .sg-hero-grid { grid-template-columns:minmax(0,1fr); }
}

/* imagem grande da Plataforma logo depois da hero */
.sg-plataforma { position:relative; padding:clamp(40px,4.6vw,64px) 0 clamp(46px,5.4vw,76px);
  background:linear-gradient(180deg,#050d24,#07142f 60%,#050d24); color:#eaf4ff; }
.sg-plataforma-cab { max-width:62ch; margin:0 0 clamp(22px,2.8vw,32px); }
.sg-plataforma-cab .eyebrow { color:var(--cyan-400,#38bdf8); }
.sg-plataforma-cab h2 { margin:9px 0 0; color:#fff; letter-spacing:-.026em;
  font:800 clamp(24px,2.9vw,38px)/1.09 'Sora',system-ui,sans-serif; }
.sg-plataforma-cab h2 em { font-style:normal; color:var(--cyan-400,#38bdf8); }
.sg-plataforma-cab p { margin:13px 0 0; max-width:56ch; font-size:15px; line-height:1.6;
  color:rgba(226,240,255,.76); }
.sg-plataforma-foto { margin:0; }
.sg-plataforma-foto img { display:block; width:100%; height:auto; }
.sg-plataforma-itens { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px 24px; margin:clamp(22px,2.6vw,30px) 0 0; padding:clamp(18px,2.2vw,24px) 0 0;
  border-top:1px solid rgba(125,211,252,.2); }
.sg-plataforma-itens li b { display:block; font:800 12.5px/1.25 'Sora',system-ui,sans-serif;
  letter-spacing:.05em; text-transform:uppercase; color:#fff; }
.sg-plataforma-itens li span { display:block; margin-top:5px; font-size:12.5px; line-height:1.45;
  color:rgba(226,240,255,.7); }
/* Variante clara: a hero é azul, então a faixa logo abaixo é branca.
   As seções seguem alternando azul e branco pela página inteira. */
.sg-plataforma.e-claro { background:linear-gradient(180deg,#ffffff,#f6f9ff 60%,#eef4ff);
  color:var(--navy-900,#0a1736); }
.sg-plataforma.e-claro .sg-plataforma-cab .eyebrow { color:var(--blue-500,#2867ff); }
.sg-plataforma.e-claro .sg-plataforma-cab h2 { color:var(--navy-900,#0a1736); }
.sg-plataforma.e-claro .sg-plataforma-cab h2 em { color:var(--blue-500,#2867ff); }
.sg-plataforma.e-claro .sg-plataforma-cab p { color:var(--gray-500,#64748b); }
.sg-plataforma.e-claro .sg-plataforma-itens { border-top-color:var(--gray-200,#e2e8f0); }
.sg-plataforma.e-claro .sg-plataforma-itens li b { color:var(--navy-900,#0a1736); }
.sg-plataforma.e-claro .sg-plataforma-itens li span { color:var(--gray-500,#64748b); }
.sg-plataforma.e-claro .sg-plataforma-foto img { border-radius:20px;
  border:1px solid rgba(15,32,80,.08); box-shadow:0 34px 70px -34px rgba(2,8,26,.45); }
/* a imagem da Plataforma é recortada (fundo transparente): moldura e sombra
   de card desenhariam um retângulo em volta do vazio. */
.sg-plataforma.e-so-imagem .sg-plataforma-foto img { border:0; border-radius:0;
  box-shadow:none; filter:drop-shadow(0 30px 44px rgba(15,23,42,.20)); }
.sg-plataforma-lista { list-style:none; margin:9px 0 0; padding:0; display:grid; gap:6px; }
.sg-plataforma-lista li { position:relative; padding-left:16px; font-size:12.5px; line-height:1.45;
  color:var(--gray-500,#64748b); }
.sg-plataforma-lista li::before { content:""; position:absolute; left:0; top:.5em; width:6px; height:6px;
  border-radius:50%; background:var(--blue-500,#2867ff); }
.sg-plataforma-link { display:inline-flex; align-items:center; gap:7px; margin-top:clamp(20px,2.4vw,26px);
  font:800 13px/1 'Sora',system-ui,sans-serif; color:var(--blue-500,#2867ff); text-decoration:none; }
.sg-plataforma-link:hover { text-decoration:underline; }

@media (max-width:980px){ .sg-plataforma-itens { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .sg-plataforma-itens { grid-template-columns:minmax(0,1fr); } }

/* ═══════════════════════════════════════════════════════════════════
   HERO CENTRALIZADA SOBRE FOTO
   O véu padrão escurece só o lado esquerdo, porque o texto ficava lá.
   Com a frase no centro, ele passa a ser radial: mais fechado atrás do
   texto e mais aberto nas pontas, deixando a foto respirar.
   ═══════════════════════════════════════════════════════════════════ */
.sg-hero--marca.e-largo.sg-hero--fundo .sg-hero-fundo::after {
  background:
    radial-gradient(118% 92% at 50% 46%,
      rgba(5,13,36,calc(.88 + var(--veu,0))) 0%,
      rgba(5,13,36,calc(.78 + var(--veu,0))) 38%,
      rgba(5,13,36,calc(.60 + var(--veu,0))) 70%,
      rgba(5,13,36,calc(.46 + var(--veu,0))) 100%),
    linear-gradient(180deg, rgba(5,13,36,.30) 0%, rgba(5,13,36,.10) 42%, rgba(5,13,36,.42) 100%);
}

/* faixa temporária de imagem pendente, quando o segmento ainda não tem foto */
.sg-falta-faixa { background:#fff; padding:clamp(20px,2.4vw,30px) 0 0; }
.sg-falta-faixa .sg-falta { aspect-ratio:auto; padding:22px 24px; text-align:center; }

/* ═══════════════════════════════════════════════════════════════════
   BENEFÍCIOS POR PÚBLICO — componente padrão dos segmentos
   Três cards com bem mais contraste que o fundo, cada um com ícone,
   categoria, promessa, benefícios e — o que faltava — o RESULTADO.
   Depois dos cards, o produto grande: painel e aplicativo.
   Muda o conteúdo por segmento; a estrutura é sempre a mesma.
   ═══════════════════════════════════════════════════════════════════ */
.bn { position:relative; padding:clamp(52px,6vw,88px) 0;
  background:linear-gradient(180deg,#050d24,#08152f 46%,#050d24); color:#eaf4ff; }
.bn .wrap { position:relative; z-index:1; }

/* ── cabeçalho: promessa à esquerda, ganhos à direita ─────────────── */
.bn-cab { display:grid; gap:clamp(24px,3.4vw,48px); align-items:start;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  padding-bottom:clamp(28px,3.4vw,42px); }
.bn-cab h2 { margin:9px 0 0; color:#fff; letter-spacing:-.028em;
  font:800 clamp(27px,3.3vw,43px)/1.07 'Sora',system-ui,sans-serif; }
.bn-cab h2 em { font-style:normal; color:var(--cyan-400,#38bdf8); }
.bn-cab > div:first-child > p { margin:15px 0 0; max-width:52ch; font-size:15.5px;
  line-height:1.62; color:rgba(226,240,255,.78); }
.bn-lado { display:grid; gap:16px; padding-left:clamp(0px,2vw,28px);
  border-left:1px solid rgba(125,211,252,.2); }
.bn-ganhos { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.bn-ganhos li { display:grid; gap:9px; }
.bn-ganhos svg { color:var(--cyan-400,#38bdf8); }
.bn-ganhos b { display:block; font:800 13px/1.25 'Sora',system-ui,sans-serif; color:#fff; }
.bn-ganhos span { display:block; font-size:12.5px; line-height:1.3; color:rgba(226,240,255,.72); }
.bn-frase { display:flex; align-items:center; gap:13px; margin:0; padding:15px 17px;
  border-radius:16px; background:rgba(56,189,248,.1); border:1px solid rgba(125,211,252,.26); }
.bn-frase svg { flex:none; color:var(--cyan-400,#38bdf8); }
.bn-frase b { display:block; font:800 14px/1.3 'Sora',system-ui,sans-serif; color:#fff; }
.bn-frase span { display:block; margin-top:3px; font-size:13.5px; line-height:1.35;
  color:rgba(226,240,255,.8); }

/* ── os três cards ────────────────────────────────────────────────── */
.bn-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px); align-items:stretch; }
.bn-card { position:relative; display:flex; flex-direction:column;
  padding:clamp(24px,2.6vw,32px) clamp(22px,2.4vw,30px) clamp(22px,2.4vw,28px);
  border-radius:22px; overflow:hidden;
  background:linear-gradient(168deg, rgba(255,255,255,.10), rgba(255,255,255,.035) 58%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 70px -40px rgba(2,8,23,.95); }
.bn-card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--bn-cor,#38bdf8); opacity:.85; }
.bn-ico { width:56px; height:56px; display:grid; place-items:center; border-radius:17px;
  margin:0 0 18px; color:var(--bn-cor,#38bdf8);
  background:color-mix(in srgb, var(--bn-cor,#38bdf8) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--bn-cor,#38bdf8) 42%, transparent); }
.bn-cat { display:block; font:800 10.5px/1 'Sora',system-ui,sans-serif; letter-spacing:.17em;
  text-transform:uppercase; color:var(--bn-cor,#38bdf8); }
.bn-card h3 { margin:11px 0 0; color:#fff; letter-spacing:-.02em;
  font:800 clamp(19px,1.9vw,23px)/1.18 'Sora',system-ui,sans-serif; }
.bn-forte { margin:12px 0 0; padding:11px 14px; border-radius:13px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  font:700 13.5px/1.35 'Sora',system-ui,sans-serif; color:#fff; }
.bn-itens { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:13px; }
.bn-itens li { display:grid; grid-template-columns:22px minmax(0,1fr); gap:11px;
  align-items:start; font-size:13.5px; line-height:1.45; color:rgba(226,240,255,.84); }
.bn-itens li b { color:#fff; font-weight:700; }
.bn-tick { width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  margin-top:1px; color:#050d24;
  background:var(--bn-cor,#38bdf8); }
.bn-res { margin:auto 0 0; padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.14); }
.bn-res span { display:block; font:800 9.5px/1 'Sora',system-ui,sans-serif; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(198,214,244,.6); }
.bn-res b { display:block; margin-top:8px; font:800 14.5px/1.34 'Sora',system-ui,sans-serif;
  color:#fff; letter-spacing:-.01em; }
/* o card do público principal ganha peso */
.bn-card.e-destaque { background:linear-gradient(168deg, rgba(56,189,248,.20), rgba(40,103,255,.10) 62%);
  border-color:rgba(125,211,252,.44);
  box-shadow:0 40px 84px -38px rgba(2,8,23,.95), 0 0 0 1px rgba(125,211,252,.16); }
.bn-card.e-destaque::before { height:4px; }

/* ── o produto, grande ────────────────────────────────────────────── */
.bn-prod { display:grid; align-items:center; gap:clamp(26px,3.6vw,54px);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  margin-top:clamp(34px,4.4vw,64px); }
.bn-prod.e-inverte { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
.bn-prod.e-inverte .bn-prod-txt { order:1; }
.bn-prod.e-inverte .bn-prod-foto { order:2; }
.bn-prod-cat { display:block; font:800 10.5px/1 'Sora',system-ui,sans-serif; letter-spacing:.17em;
  text-transform:uppercase; color:var(--cyan-400,#38bdf8); }
.bn-prod-txt h3 { margin:11px 0 0; color:#fff; letter-spacing:-.022em;
  font:800 clamp(21px,2.3vw,30px)/1.16 'Sora',system-ui,sans-serif; }
.bn-prod-txt h3 em { font-style:normal; color:var(--cyan-400,#38bdf8); }
.bn-prod-txt > p { margin:13px 0 0; font-size:14.5px; line-height:1.6; color:rgba(226,240,255,.76); }
.bn-prod-lista { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:14px; }
.bn-prod-lista li { display:grid; grid-template-columns:38px minmax(0,1fr); gap:13px;
  align-items:center; }
.bn-prod-lista .bn-pico { width:38px; height:38px; border-radius:12px; display:grid;
  place-items:center; color:var(--cyan-400,#38bdf8);
  background:rgba(56,189,248,.12); border:1px solid rgba(125,211,252,.28); }
.bn-prod-lista b { display:block; font:700 14px/1.3 'Sora',system-ui,sans-serif; color:#fff; }
.bn-prod-lista span { display:block; margin-top:2px; font-size:13px; line-height:1.4;
  color:rgba(226,240,255,.72); }
.bn-prod-foto { margin:0; }
.bn-prod-foto img { display:block; width:100%; height:auto; border-radius:18px;
  border:1px solid rgba(125,211,252,.26); box-shadow:0 40px 80px -38px rgba(2,8,23,.95); }
.bn-prod-foto.e-app img { border:0 !important; border-radius:0 !important; box-shadow:none !important;
  max-width:min(330px,82%); margin-inline:auto;
  filter:drop-shadow(0 34px 46px rgba(2,8,23,.75)); }

@media (max-width:1040px){
  .bn-cab { grid-template-columns:minmax(0,1fr); }
  .bn-lado { padding-left:0; border-left:0; padding-top:22px; border-top:1px solid rgba(125,211,252,.2); }
  .bn-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bn-card.e-destaque { grid-column:1 / -1; }
}
@media (max-width:860px){
  .bn-prod, .bn-prod.e-inverte { grid-template-columns:minmax(0,1fr); }
  .bn-prod.e-inverte .bn-prod-txt, .bn-prod.e-inverte .bn-prod-foto { order:initial; }
  .bn-prod-foto.e-app img { max-width:min(300px,70%); }
}
@media (max-width:620px){
  .bn-cards { grid-template-columns:minmax(0,1fr); }
  .bn-ganhos { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROVA NA PRIMEIRA DOBRA — economia e gestão lado a lado
   A hero deixa de comunicar só controle: o número da economia e a
   amplitude da gestão entram juntos, logo abaixo dos CTAs.
   ═══════════════════════════════════════════════════════════════════ */
.sg-dupla { position:relative; z-index:1; display:grid; gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(2,minmax(0,1fr)); margin:clamp(26px,3vw,36px) auto 0;
  max-width:min(860px,100%); text-align:left; }
.sg-dupla > div { padding:clamp(16px,1.8vw,20px) clamp(18px,2vw,22px); border-radius:18px;
  background:rgba(255,255,255,.07); border:1px solid rgba(125,211,252,.26);
  backdrop-filter:blur(6px); }
.sg-dupla b { display:block; color:#fff; letter-spacing:-.03em;
  font:800 clamp(26px,3vw,38px)/1 'Sora',system-ui,sans-serif; }
.sg-dupla b i { display:block; font-style:normal; margin:0 0 6px;
  font:800 10px/1 'Sora',system-ui,sans-serif; letter-spacing:.17em; text-transform:uppercase;
  color:var(--cyan-400,#38bdf8); }
.sg-dupla > div > span { display:block; margin-top:8px; font-size:12.5px; line-height:1.42;
  color:rgba(226,240,255,.82); }
.sg-dupla small { display:block; margin-top:9px; padding-top:9px;
  border-top:1px solid rgba(255,255,255,.16); font-size:11px; line-height:1.45;
  color:rgba(198,214,244,.7); }
@media (max-width:680px){ .sg-dupla { grid-template-columns:minmax(0,1fr); } }

/* ── faixa dos quatro benefícios principais ───────────────────────── */
.sg-benef { position:relative; padding:clamp(34px,4vw,52px) 0;
  background:linear-gradient(100deg,#0a1a3f,#12306b 48%,#0a1a3f); color:#eaf4ff;
  border-top:1px solid rgba(125,211,252,.2); border-bottom:1px solid rgba(125,211,252,.2); }
.sg-benef-grade { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,26px); }
.sg-benef-grade > div { position:relative; padding-left:clamp(14px,1.6vw,20px);
  border-left:2px solid var(--cyan-400,#38bdf8); }
.sg-benef-grade b { display:block; font:800 clamp(15px,1.5vw,18px)/1.1 'Sora',system-ui,sans-serif;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.sg-benef-grade span { display:block; margin-top:8px; font-size:13.5px; line-height:1.5;
  color:rgba(226,240,255,.8); }
@media (max-width:900px){ .sg-benef-grade { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .sg-benef-grade { grid-template-columns:minmax(0,1fr); } }

/* a tela da Plataforma como prova visual, em tamanho grande */
.sg-plat-grande { margin:clamp(22px,2.6vw,32px) 0 clamp(28px,3.2vw,40px); }
.sg-plat-grande img { display:block; width:100%; height:auto; max-width:1100px;
  margin-inline:auto; filter:drop-shadow(0 30px 44px rgba(15,23,42,.20)); }
.cd-mock.e-sem-foto { grid-template-columns:minmax(0,1fr); }
/* a dor que justifica o produto, antes de explicar o fluxo */
.cd-dor { margin:16px 0 0; max-width:68ch; font-size:15.5px; line-height:1.6;
  padding-left:16px; border-left:3px solid var(--blue-500,#2867ff);
  color:var(--navy-900,#0a1736); font-weight:600; }

/* ── ECONOMIA: o número como protagonista da seção ─────────────────── */
.eco-destaque { display:grid; gap:12px; margin:clamp(22px,2.6vw,32px) 0 clamp(24px,2.8vw,34px);
  padding:clamp(22px,2.6vw,30px) clamp(24px,2.8vw,34px); border-radius:22px;
  background:linear-gradient(120deg, rgba(40,103,255,.07), rgba(56,189,248,.08));
  border:1px solid rgba(40,103,255,.18); }
.eco-destaque > p:first-child { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 20px;
  margin:0; }
.eco-destaque b { display:block; letter-spacing:-.045em; color:var(--navy-900,#0a1736);
  font:800 clamp(48px,6.4vw,86px)/.9 'Sora',system-ui,sans-serif; white-space:nowrap;
  padding-right:.06em; }
.eco-destaque b i { display:block; font-style:normal; margin:0 0 6px;
  font:800 11px/1 'Sora',system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue-500,#2867ff); }
.eco-destaque > p:first-child > span { font-size:clamp(15px,1.5vw,18px); line-height:1.45;
  max-width:30ch; color:var(--gray-500,#64748b); }
.eco-destaque > p:first-child > span strong { color:var(--navy-900,#0a1736); font-weight:700; }
.eco-destaque-nota { margin:0; padding-top:14px; border-top:1px solid rgba(40,103,255,.16);
  font-size:13.5px; line-height:1.55; color:var(--gray-500,#64748b); max-width:72ch; }

/* ── a ponte entre o ponto e a plataforma ──────────────────────────── */
.eco-ponte { padding:clamp(40px,4.6vw,64px) 0;
  background:linear-gradient(110deg,#050d24,#0b1d44 52%,#050d24); color:#eaf4ff; }
.eco-ponte-grade { display:grid; gap:clamp(24px,3.4vw,48px); align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
.eco-ponte h3 { margin:0; color:#fff; letter-spacing:-.026em;
  font:800 clamp(24px,2.9vw,38px)/1.1 'Sora',system-ui,sans-serif; }
.eco-ponte h3 em { font-style:normal; color:var(--cyan-400,#38bdf8); }
.eco-ponte p { margin:14px 0 0; font-size:15px; line-height:1.62; color:rgba(226,240,255,.78); }
.eco-ponte-frase { margin:0 !important; padding:20px 22px; border-radius:18px;
  background:rgba(56,189,248,.1); border:1px solid rgba(125,211,252,.28);
  font:700 clamp(15px,1.5vw,18px)/1.45 'Sora',system-ui,sans-serif; color:#fff !important; }
.eco-ponte-frase em { font-style:normal; color:var(--cyan-400,#38bdf8); }
@media (max-width:860px){ .eco-ponte-grade { grid-template-columns:minmax(0,1fr); } }

/* ── ESG: o resultado mensurável antes do reconhecimento ───────────── */
.esg-impacto { margin:clamp(24px,3vw,36px) 0 clamp(28px,3.4vw,42px);
  padding:clamp(24px,2.8vw,34px); border-radius:22px;
  background:linear-gradient(140deg, rgba(56,189,248,.08), rgba(45,212,191,.07));
  border:1px solid rgba(56,189,248,.22); }
.esg-impacto-cab span { display:block; font:800 10.5px/1 'Sora',system-ui,sans-serif;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue-500,#2867ff); }
.esg-impacto-cab h3 { margin:10px 0 0; letter-spacing:-.024em; color:var(--navy-900,#0a1736);
  font:800 clamp(21px,2.3vw,30px)/1.14 'Sora',system-ui,sans-serif; }
.esg-impacto-cab h3 em { font-style:normal; color:var(--blue-500,#2867ff); }
.esg-impacto-cab p { margin:12px 0 0; max-width:66ch; font-size:14.5px; line-height:1.6;
  color:var(--gray-500,#64748b); }
.esg-impacto-itens { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px; margin:clamp(20px,2.4vw,28px) 0 0; padding:0; }
.esg-impacto-itens li { padding:16px 18px; border-radius:16px; background:#fff;
  border:1px solid rgba(15,32,80,.08); }
.esg-impacto-itens b { display:block; font:800 15px/1.2 'Sora',system-ui,sans-serif;
  color:var(--navy-900,#0a1736); }
.esg-impacto-itens span { display:block; margin-top:6px; font-size:12.5px; line-height:1.45;
  color:var(--gray-500,#64748b); }
.esg-impacto-nota { margin:16px 0 0; font-size:12px; line-height:1.55; color:#94a3b8; max-width:78ch; }
@media (max-width:900px){ .esg-impacto-itens { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .esg-impacto-itens { grid-template-columns:minmax(0,1fr); } }

/* ═══════════════════════════════════════════════════════════════════
   EFICIÊNCIA FOOZ — o número domina a seção
   Campanha visual, não card: fundo escuro, 80% gigante em gradiente,
   pouquíssimo texto. O detalhamento (áreas, método) vive em Economizar.
   ═══════════════════════════════════════════════════════════════════ */
.ef { position:relative; padding:clamp(54px,6.4vw,96px) 0;
  background:linear-gradient(135deg,#050d24,#0a1f4d 46%,#050d24); color:#eaf4ff; overflow:hidden; }
.ef::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 70% at 72% 42%, rgba(56,189,248,.16), transparent 70%); }
.ef .wrap { position:relative; z-index:1; }
.ef-grade { display:grid; align-items:center; gap:clamp(26px,4vw,60px);
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
.ef .eyebrow { color:var(--cyan-400,#38bdf8); }
.ef h2 { margin:10px 0 0; color:#fff; letter-spacing:-.03em;
  font:800 clamp(30px,3.8vw,52px)/1.04 'Sora',system-ui,sans-serif; }
.ef h2 em { font-style:normal; color:var(--cyan-400,#38bdf8); }
.ef-lead { margin:18px 0 0; max-width:44ch; font-size:clamp(15px,1.35vw,17.5px);
  line-height:1.6; color:rgba(226,240,255,.8); }
.ef-num { text-align:center; }
.ef-num i { display:block; font-style:normal; margin:0 0 2px;
  font:800 clamp(15px,1.6vw,22px)/1 'Sora',system-ui,sans-serif; letter-spacing:.34em;
  text-transform:uppercase; color:var(--cyan-400,#38bdf8); padding-left:.34em; }
.ef-num b { display:block; white-space:nowrap; letter-spacing:-.055em;
  font:800 clamp(110px,17vw,260px)/.84 'Sora',system-ui,sans-serif;
  padding:.03em .1em .05em 0; margin:0 -.1em 0 0;
  background:linear-gradient(150deg,#ffffff 18%,#9adcff 52%,#38bdf8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 14px 40px rgba(56,189,248,.35)); }
.ef-num span { display:block; margin:14px auto 0; max-width:24ch;
  font:800 clamp(12px,1.2vw,15px)/1.4 'Sora',system-ui,sans-serif; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; }
.ef-pe { margin:clamp(26px,3vw,38px) 0 0; padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid rgba(125,211,252,.22); display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:16px 28px; }
.ef-pe p { margin:0; max-width:52ch; font-size:14.5px; line-height:1.6;
  color:rgba(226,240,255,.8); }
.ef-pe p b { display:block; color:#fff; font:800 16px/1.3 'Sora',system-ui,sans-serif;
  margin-bottom:5px; }
@media (max-width:900px){ .ef-grade { grid-template-columns:minmax(0,1fr); } .ef-num { text-align:left; }
  .ef-num span { margin-inline:0; } }

/* ── Individualização: seção própria, sobre o mesmo componente ─────── */
.bn-cab.e-simples { grid-template-columns:minmax(0,1fr); }
.bn-cab.e-simples h2 { max-width:20ch; }
.ind-benef { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,20px); margin:clamp(30px,3.6vw,46px) 0 0; padding:0; }
.ind-benef li { padding:clamp(20px,2.2vw,26px); border-radius:20px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
.ind-benef span { display:block; font:800 10.5px/1 'Sora',system-ui,sans-serif; letter-spacing:.17em;
  text-transform:uppercase; color:var(--cyan-400,#38bdf8); }
.ind-benef b { display:block; margin:11px 0 0; color:#fff; letter-spacing:-.018em;
  font:800 clamp(17px,1.7vw,20px)/1.2 'Sora',system-ui,sans-serif; }
.ind-benef p { margin:10px 0 0; font-size:13.5px; line-height:1.55; color:rgba(226,240,255,.8); }
.ind-fecho { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px 30px; margin:clamp(28px,3.2vw,40px) 0 0; padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid rgba(125,211,252,.22); }
.ind-fecho p { margin:0; color:#fff; letter-spacing:-.02em;
  font:800 clamp(17px,1.8vw,23px)/1.32 'Sora',system-ui,sans-serif; }
.ind-fecho p em { font-style:normal; color:var(--cyan-400,#38bdf8); }
@media (max-width:900px){ .ind-benef { grid-template-columns:minmax(0,1fr); } }

/* ── variante clara dos cards de benefício, para alternar as faixas ── */
.bn.e-claro { background:linear-gradient(180deg,#ffffff,#f5f8ff 58%,#eef4ff);
  color:var(--navy-900,#0a1736); }
.bn.e-claro .bn-cab h2 { color:var(--navy-900,#0a1736); }
.bn.e-claro .bn-cab h2 em { color:var(--blue-500,#2867ff); }
.bn.e-claro .bn-cab > div:first-child > p { color:var(--gray-500,#64748b); }
.bn.e-claro .eyebrow { color:var(--blue-500,#2867ff) !important; }
.bn.e-claro .bn-lado { border-left-color:rgba(15,32,80,.12); }
.bn.e-claro .bn-ganhos b { color:var(--navy-900,#0a1736); }
.bn.e-claro .bn-ganhos span { color:var(--gray-500,#64748b); }
.bn.e-claro .bn-ganhos svg, .bn.e-claro .bn-frase svg { color:var(--blue-500,#2867ff); }
.bn.e-claro .bn-frase { background:rgba(40,103,255,.06); border-color:rgba(40,103,255,.18); }
.bn.e-claro .bn-frase b { color:var(--navy-900,#0a1736); }
.bn.e-claro .bn-frase span { color:var(--gray-500,#64748b); }
.bn.e-claro .bn-card { background:#fff; border-color:rgba(15,32,80,.1);
  box-shadow:0 30px 60px -40px rgba(15,23,42,.5); }
.bn.e-claro .bn-card h3 { color:var(--navy-900,#0a1736); }
.bn.e-claro .bn-forte { background:rgba(40,103,255,.06); border-color:rgba(40,103,255,.16);
  color:var(--navy-900,#0a1736); }
.bn.e-claro .bn-itens li { color:var(--gray-500,#64748b); }
.bn.e-claro .bn-itens li b { color:var(--navy-900,#0a1736); }
.bn.e-claro .bn-tick { color:#fff; }
.bn.e-claro .bn-res { border-top-color:rgba(15,32,80,.1); }
.bn.e-claro .bn-res span { color:#94a3b8; }
.bn.e-claro .bn-res b { color:var(--navy-900,#0a1736); }
.bn.e-claro .bn-card.e-destaque { background:linear-gradient(168deg,#f4f8ff,#eaf2ff);
  border-color:rgba(40,103,255,.28); }

/* ── Plataforma: cards minimalistas, só rótulo, título e itens ─────── */
#plataforma .cd-sol { padding-block:clamp(24px,2.6vw,30px); }
#plataforma .cd-sol h3 { margin-bottom:4px; }
#plataforma .cd-lista { margin-top:18px; grid-template-columns:minmax(0,1fr); gap:0; }
#plataforma .cd-lista li { align-items:center; gap:11px; padding:11px 0;
  font-size:14px; line-height:1.4; color:var(--navy-900,#0a1736);
  border-top:1px solid var(--gray-100,#eef2f7); }
#plataforma .cd-lista li:first-child { border-top:0; padding-top:0; }
#plataforma .cd-lista li:last-child { padding-bottom:0; }
/* o tique vira um ponto discreto: a lista é de tópicos, não de promessas */
#plataforma .cd-lista svg { display:none; }
#plataforma .cd-lista li::before { content:""; flex:0 0 auto; width:5px; height:5px;
  border-radius:50%; background:var(--blue-500,#2867ff); }

/* três cards iguais, minimalistas: rótulo, título e os pontos principais */
.plat-trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px); align-items:stretch; }
.plat-trio .cd-sol { height:100%; }
#plataforma .cd-lista li { border-top:0; padding:9px 0; }
.plat-link { display:inline-flex; align-items:center; gap:8px;
  margin:clamp(22px,2.6vw,30px) 0 0; }
@media (max-width:940px){ .plat-trio { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .plat-trio { grid-template-columns:minmax(0,1fr); } }

/* hero reduzida: só a faixa azul encolhe — a tipografia não muda */
.sg-hero.e-baixa { padding:clamp(1.6rem,2.9vw,2.5rem) 0 clamp(1.9rem,3.2vw,2.9rem); }
.sg-hero.e-baixa .sg-hero-grid { min-height:clamp(392px,49vh,470px); }
/* manchete mais longa: a coluna abre para caber em duas linhas sem diminuir a fonte */
.sg-hero.e-baixa .sg-hero-grid > .sg-hero-txt { max-width:min(1120px,100%); }

/* a leitura da conta, logo abaixo do número do ponto */
.ef-conta { display:block; margin:18px auto 0; max-width:26ch; padding-top:16px;
  border-top:1px solid rgba(125,211,252,.28);
  font:700 clamp(15px,1.5vw,19px)/1.4 'Sora',system-ui,sans-serif;
  letter-spacing:0; text-transform:none; color:rgba(226,240,255,.86); }
.ef-conta b { color:var(--cyan-400,#38bdf8); font-weight:800;
  font-size:1.35em; letter-spacing:-.02em; }
@media (max-width:900px){ .ef-conta { margin-inline:0; } }
/* a leitura da conta como complemento, não como segundo destaque */
.ef-conta { font-size:clamp(13px,1.15vw,15px) !important; font-weight:700 !important;
  color:rgba(226,240,255,.84) !important; }
.ef-conta b { font-size:1.15em !important; }
.ef-conta sup { font-size:.72em; color:var(--cyan-400,#38bdf8); margin-left:1px; }
.ef-conta small { display:block; margin:7px 0 0;
  font:500 11px/1.45 'Sora',system-ui,sans-serif; color:rgba(198,214,244,.6); }

/* Hero sem foto: sem imagem atrás, o azul-marinho puro vira um bloco chapado.
   Um degradê mais claro e uma aurora mais presente dão profundidade. */
.sg-hero--marca:not(.sg-hero--fundo) {
  background-color:#0a1b44;
  background-image:
    radial-gradient(1100px 620px at 76% 12%, rgba(56,189,248,.30), transparent 62%),
    radial-gradient(820px 520px at 12% 96%, rgba(40,103,255,.28), transparent 64%),
    linear-gradient(160deg, #11265c 0%, #0a1b44 46%, #071336 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   CONDOMÍNIO INTELIGENTE FOOZ — componentes do programa
   ═══════════════════════════════════════════════════════════════════ */
/* os pilares do programa */
.ci-pilares { display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px); margin-top:clamp(26px,3vw,36px); }
.ci-pilares article { padding:clamp(20px,2.2vw,26px); border-radius:20px; background:#fff;
  border:1px solid var(--gray-200,#e2e8f0); box-shadow:0 26px 54px -40px rgba(15,23,42,.5); }
.ci-pilares span { display:block; font:800 11px/1 'Sora',system-ui,sans-serif; letter-spacing:.14em;
  color:var(--blue-500,#2867ff); }
.ci-pilares b { display:block; margin:12px 0 0; font:800 clamp(16px,1.6vw,19px)/1.2 'Sora',system-ui,sans-serif;
  letter-spacing:-.015em; color:var(--navy-900,#0a1736); }
.ci-pilares strong { display:block; margin:9px 0 0; font:700 13.5px/1.35 'Sora',system-ui,sans-serif;
  color:var(--blue-500,#2867ff); }
.ci-pilares p { margin:9px 0 0; font-size:13px; line-height:1.5; color:var(--gray-500,#64748b); }
@media (max-width:1080px){ .ci-pilares { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:720px){ .ci-pilares { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .ci-pilares { grid-template-columns:minmax(0,1fr); } }

/* onde a eficiência pode atuar — uma linha só */
.ef-onde { margin:clamp(26px,3vw,36px) 0 0; padding:16px 20px; border-radius:16px; text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(125,211,252,.22);
  font:700 clamp(12.5px,1.2vw,15px)/1.5 'Sora',system-ui,sans-serif; letter-spacing:.04em;
  color:rgba(226,240,255,.86); }

/* a tela grande da Plataforma dentro de uma faixa escura */
.ci-tela { margin:clamp(24px,2.8vw,34px) 0 clamp(28px,3.2vw,40px); }
.ci-tela img { display:block; width:100%; height:auto; max-width:1100px; margin-inline:auto;
  filter:drop-shadow(0 30px 50px rgba(2,8,23,.7)); }

/* os módulos da plataforma */
.ci-mods { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(13px,1.7vw,20px); }
.ci-mods article { padding:clamp(20px,2.2vw,26px); border-radius:20px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
.ci-mods-ic { width:42px; height:42px; display:grid; place-items:center; border-radius:13px;
  margin:0 0 14px; color:var(--cyan-400,#38bdf8);
  background:rgba(56,189,248,.14); border:1px solid rgba(125,211,252,.3); }
.ci-mods-n { display:block; font:800 10px/1 'Sora',system-ui,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan-400,#38bdf8); }
.ci-mods b { display:block; margin:10px 0 0; color:#fff; letter-spacing:-.015em;
  font:800 clamp(15.5px,1.5vw,18px)/1.24 'Sora',system-ui,sans-serif; }
.ci-mods ul { list-style:none; margin:13px 0 0; padding:0; display:grid; gap:7px; }
.ci-mods li { position:relative; padding-left:14px; font-size:13px; line-height:1.45;
  color:rgba(226,240,255,.8); }
.ci-mods li::before { content:""; position:absolute; left:0; top:.55em; width:4px; height:4px;
  border-radius:50%; background:var(--cyan-400,#38bdf8); }
@media (max-width:1040px){ .ci-mods { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ci-mods { grid-template-columns:minmax(0,1fr); } }

/* fluxo do FOOZ Find */
.ci-fluxo { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(13px,1.7vw,20px); margin:clamp(26px,3vw,36px) 0 0; padding:0; counter-reset:f; }
.ci-fluxo li { position:relative; padding:clamp(20px,2.2vw,26px); border-radius:20px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
.ci-fluxo li + li::after { content:"→"; position:absolute; left:-16px; top:50%;
  transform:translateY(-50%); color:rgba(125,211,252,.5); font-size:18px; }
.ci-fluxo span { display:block; font:800 11px/1 'Sora',system-ui,sans-serif; letter-spacing:.14em;
  color:var(--cyan-400,#38bdf8); }
.ci-fluxo b { display:block; margin:11px 0 0; color:#fff; letter-spacing:-.015em;
  font:800 clamp(16px,1.6vw,19px)/1.2 'Sora',system-ui,sans-serif; }
.ci-fluxo p { margin:9px 0 0; font-size:13px; line-height:1.5; color:rgba(226,240,255,.78); }
@media (max-width:1040px){ .ci-fluxo { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ci-fluxo li + li::after { display:none; } }
@media (max-width:560px){ .ci-fluxo { grid-template-columns:minmax(0,1fr); } }

/* residencial × comercial e os três reconhecimentos */
.ci-duplo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px); margin-top:clamp(24px,2.8vw,34px); }
.ci-duplo.e-tres { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ci-duplo article { padding:clamp(20px,2.2vw,28px); border-radius:20px; background:#fff;
  border:1px solid var(--gray-200,#e2e8f0); }
.ci-duplo span { display:block; font:800 11px/1 'Sora',system-ui,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-500,#2867ff); }
.ci-duplo p { margin:11px 0 0; font-size:14px; line-height:1.55; color:var(--gray-500,#64748b); }
.ci-duplo .cd-sol-link { margin-top:14px; }
/* dentro de uma faixa escura, os cards invertem */
.ci-duplo.e-dentro article { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); }
.ci-duplo.e-dentro span { color:var(--cyan-400,#38bdf8); }
.ci-duplo.e-dentro p { color:rgba(226,240,255,.8); }
.ci-duplo.e-dentro .cd-sol-link { color:var(--cyan-400,#38bdf8); }
@media (max-width:820px){ .ci-duplo, .ci-duplo.e-tres { grid-template-columns:minmax(0,1fr); } }

/* formas de contratação, discretas junto do CTA */
.ci-modelos { margin:clamp(22px,2.6vw,30px) 0 0; padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid rgba(125,211,252,.2);
  font:600 13px/1.5 'Sora',system-ui,sans-serif; color:rgba(226,240,255,.76); }
.ci-modelos b { color:#fff; font-weight:800; }
.ci-modelos small { display:block; margin-top:7px; font:500 11px/1.45 'Sora',system-ui,sans-serif;
  color:rgba(198,214,244,.6); }
/* fecho da individualização quando a faixa é clara */
.bn.e-claro .ind-fecho { border-top-color:rgba(15,32,80,.12); }
.bn.e-claro .ind-fecho p { color:var(--navy-900,#0a1736); }
.bn.e-claro .ind-fecho p em { color:var(--blue-500,#2867ff); }
.bn.e-claro .bn-prod-txt h3 { color:var(--navy-900,#0a1736); }
.bn.e-claro .bn-prod-txt h3 em { color:var(--blue-500,#2867ff); }
.bn.e-claro .bn-prod-cat { color:var(--blue-500,#2867ff); }
.bn.e-claro .bn-prod-txt > p { color:var(--gray-500,#64748b); }
.bn.e-claro .bn-prod-lista b { color:var(--navy-900,#0a1736); }
.bn.e-claro .bn-prod-lista span { color:var(--gray-500,#64748b); }
.bn.e-claro .bn-prod-lista .bn-pico { background:rgba(40,103,255,.08);
  border-color:rgba(40,103,255,.2); color:var(--blue-500,#2867ff); }
.bn.e-claro .bn-prod-foto:not(.e-app) img { border-color:rgba(15,32,80,.1);
  box-shadow:0 34px 70px -38px rgba(15,23,42,.55); }
.bn.e-claro .bn-prod-foto.e-app img { filter:drop-shadow(0 32px 44px rgba(15,23,42,.28)); }

/* a leitura da conta vai para o canto do pé da seção, fora do número */
.ef-pe { align-items:flex-end; }
.ef-nota { order:-1; flex:1 1 240px; max-width:32ch; }
.ef-nota .ef-conta { display:block; margin:0; padding:0; border:0; text-align:left; }
.ef-pe > p { flex:1 1 300px; }

/* Mockups com fundo escuro embutido: sobre faixa clara, ganham um palco
   escuro proposital em vez de virarem um retângulo solto. */
.bn.e-claro .bn-prod-foto:not(.e-app) { padding:clamp(14px,1.6vw,20px); border-radius:24px;
  background:linear-gradient(150deg,#0a1b44,#050d24);
  box-shadow:0 34px 70px -38px rgba(15,23,42,.55); }
.bn.e-claro .bn-prod-foto:not(.e-app) img { border:0; border-radius:14px; box-shadow:none; }

/* A tela recortada da Plataforma foi preparada para fundo claro: dentro de
   uma faixa escura, ela ganha o próprio palco branco. */
.cd-indiv .ci-tela { padding:clamp(16px,2vw,26px); border-radius:26px;
  background:linear-gradient(180deg,#ffffff,#eef4ff);
  box-shadow:0 40px 80px -40px rgba(2,8,23,.9); }
.cd-indiv .ci-tela img { filter:none; }


/* ═══════════════════════════════════════════════════════════════════
   RODAPÉ — o mesmo da página principal, para todas as páginas de
   segmento. Os caminhos são relativos a /segmentos/, mesma
   profundidade das páginas de solução de onde ele veio.
   ═══════════════════════════════════════════════════════════════════ */
  footer {
  background: #00051A;
  color: rgba(255,255,255,0.6);
  padding: 80px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ft-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 60px;
  margin-bottom: 48px;
  align-items: start;
}
.ft-brand .logo { margin-bottom: 22px; }
.ft-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan-400);
  margin: 6px 0 22px;
}
.ft-brand p { font-size: 14px; line-height: 1.65; margin: 0; max-width: 320px; color: rgba(255,255,255,0.65); }
.ft-col h5 {
  color: white;
  font-family: "Geologica", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
}
.ft-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ft-col a {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  transition: color .2s, transform .2s;
  display: inline-block;
}
.ft-col a:hover { color: var(--cyan-400); transform: translateX(2px); }
.ft-contact { display: grid; gap: 26px; }
.ft-contact-block { display: flex; gap: 14px; align-items: flex-start; }
.ft-contact-ico {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(125,211,252,0.3);
  background: rgba(56,189,248,0.08);
  color: var(--cyan-400);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ft-contact-block .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.ft-contact-block .val {
  font-family: "Geologica", "Inter", sans-serif;
  font-size: 17px; font-weight: 600; color: white;
  letter-spacing: -0.01em;
  display: block;
  transition: color .2s;
}
.ft-contact-block .val:hover { color: var(--cyan-400); }
.ft-contact-block .sub { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.ft-social { display: flex; gap: 12px; flex-wrap: wrap; }
.ft-social a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.ft-social a:hover {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: white;
  transform: translateY(-2px);
}
.ft-bottom {
  display: block;
  text-align: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.01em;
}
.ft-bottom a { color: rgba(255,255,255,0.6); }
.ft-bottom a:hover { color: var(--cyan-400); }
@media (max-width: 1024px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ft-contact { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ft-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════
   INCORPORADORAS E CONSTRUTORAS
   ═══════════════════════════════════════════════════════════════════ */
.ct-bullets { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px clamp(14px,1.8vw,24px); margin:clamp(24px,2.8vw,34px) 0 0; padding:0; }
.ct-bullets li { display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px;
  align-items:start; font-size:13.5px; line-height:1.45; color:rgba(226,240,255,.82); }
.ct-bullets li b { color:#fff; font-weight:700; }
.ct-tick { width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  margin-top:1px; color:#050d24; background:var(--cyan-400,#38bdf8); }
@media (max-width:980px){ .ct-bullets { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ct-bullets { grid-template-columns:minmax(0,1fr); } }
.ct-frase { margin:clamp(26px,3vw,36px) 0 0 !important; padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid rgba(125,211,252,.22);
  font:800 clamp(17px,1.9vw,24px)/1.32 'Sora',system-ui,sans-serif; color:#fff !important; }
.ct-frase em { font-style:normal; color:var(--cyan-400,#38bdf8); }

/* a transição obra → empreendimento */
.ct-transicao { padding:clamp(44px,5vw,72px) 0;
  background:linear-gradient(180deg,#ffffff,#f4f8ff 60%,#eef4ff); }
.ct-transicao-grade { display:grid; align-items:center; gap:clamp(26px,3.6vw,52px);
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); }
.ct-transicao .eyebrow { display:block; color:var(--gray-500,#64748b); }
.ct-transicao h2 { margin:9px 0 0; letter-spacing:-.028em; color:var(--navy-900,#0a1736);
  font:800 clamp(26px,3.1vw,40px)/1.08 'Sora',system-ui,sans-serif; }
.ct-transicao h2 em { font-style:normal; color:var(--blue-500,#2867ff); }
.ct-transicao p { margin:13px 0 0; max-width:44ch; font-size:15px; line-height:1.6;
  color:var(--gray-500,#64748b); }
.ct-linha { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px;
  margin:22px 0 0; padding:0; }
.ct-linha li { font:800 10.5px/1 'Sora',system-ui,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-500,#64748b); white-space:nowrap; }
.ct-linha li + li::before { content:"\2192"; margin:0 8px 0 3px; color:#a9bdd8; }
.ct-linha li:last-child { color:var(--blue-500,#2867ff); }
.ct-transicao-foto { margin:0; }
.ct-transicao-foto img { display:block; width:100%; height:auto; border-radius:20px;
  box-shadow:0 34px 70px -38px rgba(15,23,42,.55); }
@media (max-width:900px){ .ct-transicao-grade { grid-template-columns:minmax(0,1fr); } }

/* voucher: a arte é a protagonista */
.ct-voucher { display:grid; align-items:center; gap:clamp(26px,3.6vw,52px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); margin-top:clamp(26px,3vw,38px); }
.ct-voucher-txt h3 { margin:10px 0 0; color:#fff; letter-spacing:-.022em;
  font:800 clamp(21px,2.3vw,30px)/1.16 'Sora',system-ui,sans-serif; }
.ct-voucher-txt h3 em { font-style:normal; color:var(--cyan-400,#38bdf8); }
.ct-voucher-txt > p { margin:13px 0 0; font-size:14.5px; line-height:1.6; color:rgba(226,240,255,.78); }
.ct-voucher .ct-bullets { grid-template-columns:minmax(0,1fr); gap:12px; }
@media (max-width:900px){ .ct-voucher { grid-template-columns:minmax(0,1fr); } }

/* certificações: presença visual, sem usar marca de terceiros */
.ct-cert { display:flex; flex-wrap:wrap; gap:clamp(12px,1.6vw,18px);
  margin:clamp(26px,3vw,36px) 0 clamp(24px,2.8vw,34px); }
.ct-cert span { flex:1 1 180px; display:grid; place-items:center; min-height:86px;
  padding:18px 22px; border-radius:18px; background:#fff;
  border:1px solid var(--gray-200,#e2e8f0);
  font:800 clamp(17px,1.8vw,23px)/1.1 'Sora',system-ui,sans-serif; letter-spacing:.04em;
  color:var(--navy-900,#0a1736); text-align:center; }
.ct-cert span.e-fooz { background:linear-gradient(135deg,#2867ff,#38bdf8); color:#fff;
  border-color:transparent; }
.ct-cert-grade { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(13px,1.7vw,20px); }
.ct-cert-grade article { padding:clamp(18px,2vw,24px); border-radius:18px;
  background:#fff; border:1px solid var(--gray-200,#e2e8f0); }
.ct-cert-grade b { display:block; font:800 15px/1.2 'Sora',system-ui,sans-serif;
  color:var(--navy-900,#0a1736); }
.ct-cert-grade p { margin:9px 0 0; font-size:13px; line-height:1.5; color:var(--gray-500,#64748b); }
.ct-cert-frase { margin:clamp(24px,2.8vw,34px) 0 0; padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--gray-200,#e2e8f0);
  font:700 clamp(16px,1.7vw,21px)/1.4 'Sora',system-ui,sans-serif; color:var(--gray-500,#64748b); }
.ct-cert-frase b { color:var(--navy-900,#0a1736); font-weight:800; }
.ct-cert-nota { margin:14px 0 0; font-size:12px; line-height:1.55; color:#94a3b8; max-width:84ch; }
@media (max-width:900px){ .ct-cert-grade { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .ct-cert-grade { grid-template-columns:minmax(0,1fr); } }
/* os quatro ganhos do diferencial, dentro da faixa em gradiente */
.ct-quatro { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(13px,1.7vw,20px); margin-top:clamp(26px,3vw,36px); }
.ct-quatro article { padding:clamp(18px,2vw,24px); border-radius:18px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px); }
.ct-quatro b { display:block; font:800 12px/1 'Sora',system-ui,sans-serif; letter-spacing:.15em;
  text-transform:uppercase; color:#fff; }
.ct-quatro p { margin:11px 0 0 !important; font-size:13.5px; line-height:1.5;
  color:rgba(255,255,255,.88) !important; max-width:none !important; }
@media (max-width:900px){ .ct-quatro { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .ct-quatro { grid-template-columns:minmax(0,1fr); } }
/* FAQ sobre faixa escura: os cartões brancos continuam legíveis */
.cd-indiv.e-faq .sg-head .eyebrow { color:var(--cyan-400,#38bdf8); }
.cd-indiv.e-faq .cd-faq { background:#fff; }
.cd-indiv.e-faq .cd-faq summary { color:var(--navy-900,#0a1736); }
.cd-indiv.e-faq .cd-faq details > p { color:var(--gray-700,#334155); }

/* ── variantes de faixa para alternar a página de Construtoras ─────── */
/* economia em faixa clara: o número grande funciona igual sobre branco */
.ef.e-claro { background:linear-gradient(180deg,#ffffff,#f4f8ff 58%,#eef4ff); color:var(--navy-900,#0a1736); }
.ef.e-claro::after { background:radial-gradient(58% 70% at 74% 40%, rgba(40,103,255,.07), transparent 70%); }
.ef.e-claro .eyebrow { color:var(--blue-500,#2867ff); }
.ef.e-claro h2 { color:var(--navy-900,#0a1736); }
.ef.e-claro h2 em { color:var(--blue-500,#2867ff); }
.ef.e-claro .ef-lead { color:var(--gray-500,#64748b); }
.ef.e-claro .ef-num i { color:var(--blue-500,#2867ff); }
.ef.e-claro .ef-num b { background:linear-gradient(150deg,#2867ff 12%,#38bdf8 62%,#7dd3fc 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 12px 30px rgba(40,103,255,.22)); }
.ef.e-claro .ef-num span { color:var(--navy-900,#0a1736); }
.ef.e-claro .ef-pe { border-top-color:var(--gray-200,#e2e8f0); }
.ef.e-claro .ef-pe p { color:var(--gray-500,#64748b); }
.ef.e-claro .ef-pe p b { color:var(--navy-900,#0a1736); }
.ef.e-claro .prova-grade { margin-top:clamp(28px,3.2vw,40px); }

/* transição em faixa escura */
.ct-transicao.e-escura { background:linear-gradient(110deg,#050d24,#0b1d44 52%,#050d24); }
.ct-transicao.e-escura .eyebrow { color:rgba(226,240,255,.7); }
.ct-transicao.e-escura h2 { color:#fff; }
.ct-transicao.e-escura h2 em { color:var(--cyan-400,#38bdf8); }
.ct-transicao.e-escura p { color:rgba(226,240,255,.78); }
.ct-transicao.e-escura .ct-linha li { color:rgba(226,240,255,.7); }
.ct-transicao.e-escura .ct-linha li:last-child { color:var(--cyan-400,#38bdf8); }
.ct-transicao.e-escura .ct-linha li + li::before { color:rgba(125,211,252,.5); }

/* ESG em faixa escura */
.cd-indiv.e-esg .sg-head .eyebrow { color:var(--cyan-400,#38bdf8); }
.cd-indiv.e-esg .esg-impacto-itens li { background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14); }
.cd-indiv.e-esg .esg-impacto-itens b { color:#fff; }
.cd-indiv.e-esg .esg-impacto-itens span { color:rgba(226,240,255,.76); }
.cd-indiv.e-esg .esg-impacto-nota { color:rgba(198,214,244,.6); }

/* ── FAQ em banda clara (alternância de cor) ───────────────────────── */
.cd-faq-clara { position:relative; padding:clamp(3rem,6vw,5rem) 0;
  background:linear-gradient(180deg,#ffffff 0%,#f5f8fd 100%); }
.cd-faq-clara .sg-head { max-width:760px; }
.cd-faq-clara .cd-faq { background:#fff; border:1px solid rgba(15,32,80,.09);
  border-radius:22px; overflow:hidden; box-shadow:0 30px 64px -46px rgba(15,23,42,.4); }
.cd-faq-clara .cd-faq summary { color:var(--navy-900,#0a1736); }
.cd-faq-clara .cd-faq details > p { color:var(--gray-700,#334155); }

/* ── ODS em banda escura (alternância de cor) ──────────────────────── */
.home-ods.e-escura { background:linear-gradient(165deg,#0e2358 0%,#0a1b44 52%,#071336 100%);
  color:#fff; }
.home-ods.e-escura h2, .home-ods.e-escura h3 { color:#fff; }
.home-ods.e-escura .eyebrow { color:var(--cyan-400,#38bdf8); }
.home-ods.e-escura > .wrap > p, .home-ods.e-escura > .wrap > li { color:rgba(226,240,255,.8); }
.home-ods.e-escura .ho-principal { background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); }
.home-ods.e-escura .ho-principal b { color:#fff; }
.home-ods.e-escura .ho-principal p { color:rgba(226,240,255,.8); }
.home-ods.e-escura .ho-selo .t { color:rgba(226,240,255,.86); }
.home-ods.e-escura .ods-card, .home-ods.e-escura .home-ods-card {
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.home-ods.e-escura small, .home-ods.e-escura .nota { color:rgba(198,214,244,.6); }

/* ══════════════════════════════════════════════════════════════════════
   ÓRGÃOS PÚBLICOS · blocos próprios
   ══════════════════════════════════════════════════════════════════ */

/* 02 · prova imediata — economia comprovada + gestão em escala */
.op-provas { padding:clamp(3rem,6vw,5.2rem) 0;
  background:linear-gradient(180deg,#ffffff,#f4f8ff); }
.op-provas-grade { display:grid; gap:clamp(20px,2.6vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.op-prova { display:flex; flex-direction:column; padding:clamp(18px,2vw,26px);
  border:1px solid rgba(15,32,80,.09); border-radius:26px; background:#fff;
  box-shadow:0 34px 70px -50px rgba(15,23,42,.5); }
.op-prova-tag { align-self:flex-start; font:800 10.5px/1 'Sora',system-ui,sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500,#2867ff);
  padding:7px 12px; border-radius:999px; background:rgba(40,103,255,.08); }
.op-prova figure { margin:18px 0 0; border-radius:18px; overflow:hidden; }
.op-prova figure img { display:block; width:100%; height:auto; }
.op-prova.e-mapa figure { border:1px solid rgba(15,32,80,.1); }
.op-prova b { margin-top:18px; font:800 clamp(30px,4.2vw,52px)/1 'Sora',system-ui,sans-serif;
  letter-spacing:-.03em;
  background:linear-gradient(150deg,#2867ff 12%,#38bdf8 62%,#7dd3fc 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.op-prova > p { margin:8px 0 0; font-size:14.5px; line-height:1.6; color:var(--gray-500,#64748b); }

/* 06 · infraestrutura conectada */
.op-infra { padding:clamp(3rem,6vw,5.2rem) 0;
  background:linear-gradient(180deg,#f7f9fc,#ffffff 62%); }
.op-infra-grade { margin-top:clamp(22px,3vw,34px); display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.op-infra-grade article { padding:20px 20px 22px; border-radius:20px;
  border:1px solid rgba(15,32,80,.09); background:#fff; }
.op-infra-grade b { display:block; font:800 17px/1.2 'Sora',system-ui,sans-serif;
  color:var(--navy-900,#0a1736); }
.op-infra-grade span { display:block; margin-top:9px; font-size:13.5px; line-height:1.65;
  color:var(--gray-500,#64748b); }
.op-abastecimento { margin-top:clamp(20px,2.6vw,30px); padding:clamp(20px,2.6vw,30px);
  border-radius:24px; color:#fff;
  background:linear-gradient(140deg,#0e2358,#0a1b44 56%,#071336); }
.op-abastecimento h3 { margin:0; font:800 clamp(20px,2.5vw,27px)/1.15 'Sora',system-ui,sans-serif;
  color:#fff; }
.op-abastecimento p { margin:12px 0 0; max-width:74ch; font-size:14.5px; line-height:1.7;
  color:rgba(226,240,255,.8); }

/* 07 · FOOZ Find */
.op-find { padding:clamp(3rem,6vw,5.2rem) 0; color:#fff;
  background:linear-gradient(160deg,#11265c 0%,#0a1b44 48%,#071336 100%); }
.op-find-grade { display:grid; align-items:center; gap:clamp(26px,4vw,54px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); }
.op-find-grade h2 { margin:14px 0 0; font:800 clamp(25px,3.2vw,39px)/1.12 'Sora',system-ui,sans-serif;
  letter-spacing:-.02em; color:#fff; }
.op-find-grade h2 em { font-style:normal; color:var(--cyan-400,#38bdf8); }
.op-find-grade > div > p { margin:14px 0 0; font-size:15.5px; line-height:1.7;
  color:rgba(226,240,255,.8); max-width:56ch; }
.op-find .ct-linha { margin-top:22px; }
.op-find-frase { margin-top:18px !important; font-size:15px !important;
  color:rgba(226,240,255,.86) !important; }
.op-find-frase b { color:#fff; }
.op-find .sg-btn { margin-top:22px; }
.op-find figure { margin:0; }
.op-find figure img { display:block; width:100%; height:auto; border-radius:22px; }

/* 08 · case SEDUC + vídeo */
.op-case { padding:clamp(3rem,6vw,5.2rem) 0;
  background:linear-gradient(180deg,#ffffff,#f4f8ff 60%,#eef4ff); }
.op-case-nums { margin-top:clamp(22px,3vw,34px); display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.op-case-nums div { padding:20px; border-radius:20px; background:#fff;
  border:1px solid rgba(15,32,80,.09); }
.op-case-nums b { display:block; font:800 clamp(26px,3.4vw,40px)/1 'Sora',system-ui,sans-serif;
  letter-spacing:-.03em;
  background:linear-gradient(150deg,#2867ff 12%,#38bdf8 62%,#7dd3fc 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.op-case-nums span { display:block; margin-top:8px; font-size:13px; line-height:1.5;
  color:var(--gray-500,#64748b); }
.op-video { margin-top:clamp(26px,3.4vw,40px); }
.op-video-cab { margin-bottom:14px; }
.op-video-quadro { position:relative; aspect-ratio:16/9; border-radius:24px; overflow:hidden;
  cursor:pointer; border:1px solid rgba(15,32,80,.1);
  box-shadow:0 46px 92px -54px rgba(15,23,42,.62);
  background:linear-gradient(140deg,#0e2358,#071336); }
.op-video-quadro img { display:block; width:100%; height:100%; object-fit:cover; }
.op-video-quadro iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.op-video-quadro.e-tocando img, .op-video-quadro.e-tocando .op-video-play { display:none; }
.op-video-quadro::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,13,36,.06), rgba(5,13,36,.34)); }
.op-video-quadro.e-tocando::after { display:none; }
.op-video-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; width:clamp(64px,7vw,88px); aspect-ratio:1; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:#fff;
  background:linear-gradient(150deg,#2867ff,#38bdf8);
  box-shadow:0 22px 50px -18px rgba(40,103,255,.7);
  transition:transform .18s ease; }
.op-video-quadro:hover .op-video-play { transform:translate(-50%,-50%) scale(1.06); }
.op-video-play svg { width:42%; height:42%; margin-left:6%; }
.op-video-leg { margin:16px 0 0; font-size:14.5px; line-height:1.6;
  color:var(--gray-500,#64748b); }

/* 09 · ESG em três colunas */
.op-esg { margin-top:clamp(22px,3vw,34px); display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.op-esg article { padding:22px; border-radius:22px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); }
.op-esg-l { display:grid; place-items:center; width:38px; aspect-ratio:1; border-radius:12px;
  font:800 18px/1 'Sora',system-ui,sans-serif; color:#050d24;
  background:linear-gradient(150deg,#7dd3fc,#38bdf8); }
.op-esg b { display:block; margin-top:14px; font:800 17px/1.2 'Sora',system-ui,sans-serif;
  color:#fff; }
.op-esg ul { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.op-esg li { position:relative; padding-left:16px; font-size:13.5px; line-height:1.6;
  color:rgba(226,240,255,.78); }
.op-esg li::before { content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--cyan-400,#38bdf8); }

/* 10 · engajamento e reconhecimento */
.op-engaja { padding:clamp(3rem,6vw,5.2rem) 0;
  background:linear-gradient(180deg,#ffffff,#f7f9fc); }

@media (max-width:900px){
  .op-find-grade { grid-template-columns:minmax(0,1fr); }
  .op-find figure { order:-1; }
}

/* ── passos numerados do programa (Administradoras, Órgãos Públicos) ──
   Só existia dentro de media query; esta é a regra base. */
.ap-passos { list-style:none; margin:clamp(22px,3vw,34px) 0 0; padding:0;
  display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.ap-passos li { padding:22px 22px 24px; border-radius:20px;
  border:1px solid rgba(15,32,80,.09); background:#fff; }
.ap-passo-n { display:grid; place-items:center; width:34px; aspect-ratio:1;
  border-radius:11px; font:800 12.5px/1 'Sora',system-ui,sans-serif; color:#fff;
  background:linear-gradient(150deg,#2867ff,#38bdf8); }
.ap-passos li b { display:block; margin-top:14px; font:800 16.5px/1.2 'Sora',system-ui,sans-serif;
  color:var(--navy-900,#0a1736); }
.ap-passos li span:not(.ap-passo-n) { display:block; margin-top:8px; font-size:13.5px;
  line-height:1.65; color:var(--gray-500,#64748b); }

/* faixa de pilares em versão escura (alternância de cor) */
.sg-pilares-sec.e-escura { border-color:rgba(255,255,255,.08); color:#fff;
  background:linear-gradient(165deg,#11265c 0%,#0a1b44 50%,#071336 100%); }
.sg-pilares-sec.e-escura .sg-head h2 { color:#fff; }
.sg-pilares-sec.e-escura .sg-head h2 em { color:var(--cyan-400,#38bdf8); }
.sg-pilares-sec.e-escura .sg-head > p { margin-top:14px; font-size:15.5px; line-height:1.65;
  color:rgba(226,240,255,.8); max-width:70ch; }
.sg-pilares-sec.e-escura .eyebrow { color:var(--cyan-400,#38bdf8); }
.sg-pilares-sec.e-escura .ap-passos li { background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14); }
.sg-pilares-sec.e-escura .ap-passos li b { color:#fff; }
.sg-pilares-sec.e-escura .ap-passos li span:not(.ap-passo-n) { color:rgba(226,240,255,.78); }
.sg-pilares-sec.e-escura .cd-nucleo { border:1px solid rgba(255,255,255,.14); }
.sg-pilares-sec.e-escura .sg-pilar { background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14); color:#fff; }
.sg-pilares-sec.e-escura .sg-pilar h3 { color:#fff; }
.sg-pilares-sec.e-escura .sg-pilar p, .sg-pilares-sec.e-escura .sg-pilar li {
  color:rgba(226,240,255,.78); }

@media (max-width:760px){ .ap-passos { grid-template-columns:minmax(0,1fr) !important; } }

/* voucher + landing exclusiva do empreendimento (Construtoras) */
.ct-voucher-foto { margin:0; border-radius:26px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 46px 92px -54px rgba(5,13,36,.8); }
.ct-voucher-foto img { display:block; width:100%; height:auto; }
.ct-voucher-nota { margin:18px 0 0; font-size:13.5px; line-height:1.65;
  color:rgba(226,240,255,.7); max-width:62ch; }

/* ══════════════════════════════════════════════════════════════════════
   NÍVEL DE RESERVATÓRIO ONLINE
   Trazido da proposta "Reservatório Online · SEDUC Recife", com as
   unidades anonimizadas.
   ══════════════════════════════════════════════════════════════════ */
.rv-hero { position:relative; overflow:hidden; padding:clamp(3rem,6vw,5.2rem) 0; color:#fff;
  background:
    radial-gradient(1100px 620px at 78% 10%, rgba(56,189,248,.26), transparent 62%),
    radial-gradient(820px 520px at 8% 96%, rgba(40,103,255,.24), transparent 64%),
    linear-gradient(160deg,#11265c 0%,#0a1b44 48%,#071336 100%); }
.rv-hero-grid { display:grid; align-items:center; gap:clamp(26px,4vw,54px);
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); }
.rv-eyebrow { display:inline-flex; align-items:center; gap:9px;
  font:700 11px/1 'Sora',system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(226,240,255,.9); padding:9px 15px; border-radius:999px;
  border:1px solid rgba(125,211,252,.3); background:rgba(56,189,248,.1); }
.rv-eyebrow .d { width:8px; height:8px; border-radius:50%; background:var(--cyan-400,#38bdf8);
  box-shadow:0 0 0 4px rgba(56,189,248,.22); }
.rv-hero h2 { margin:18px 0 0; letter-spacing:-.025em; color:#fff; max-width:16ch;
  font:800 clamp(30px,4.4vw,54px)/1.06 'Sora',system-ui,sans-serif; }
.rv-hero h2 em { font-style:normal; color:var(--cyan-400,#38bdf8); }
.rv-hero > .wrap p { margin:18px 0 0; max-width:56ch; font-size:15.5px; line-height:1.7;
  color:rgba(226,240,255,.8); }
.rv-hero > .wrap p b { color:#fff; }
.rv-stats { display:flex; flex-wrap:wrap; gap:14px clamp(18px,2.6vw,34px); margin-top:26px;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.rv-stats div b { display:block; font:800 clamp(19px,2.2vw,25px)/1 'Sora',system-ui,sans-serif;
  color:#fff; letter-spacing:-.02em; }
.rv-stats div span { display:block; margin-top:6px; font-size:12.5px; line-height:1.4;
  color:rgba(198,214,244,.72); }
.rv-usos { display:grid; gap:12px; }
.rv-uso { display:flex; gap:14px; padding:18px 20px; border-radius:18px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); }
.rv-uso .ic { flex:0 0 auto; display:grid; place-items:center; width:40px; aspect-ratio:1;
  border-radius:12px; }
.rv-uso b { display:block; font:800 14.5px/1.25 'Sora',system-ui,sans-serif; color:#fff; }
.rv-uso span { display:block; margin-top:6px; font-size:13px; line-height:1.6;
  color:rgba(226,240,255,.76); }

/* faixa clara: cards de nível, histórico e galeria */
.rv-rede { padding:clamp(3rem,6vw,5.2rem) 0;
  background:linear-gradient(180deg,#ffffff,#f7f9fc 55%,#ffffff); }
.rv-head { max-width:820px; margin-inline:auto; margin-bottom:clamp(26px,3.4vw,40px);
  text-align:center; }
.rv-head > p { margin-top:14px; font-size:15.5px; line-height:1.65;
  color:var(--gray-500,#64748b); }

.rv-tanks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.rv-tank { position:relative; overflow:hidden; border-radius:18px; min-height:230px;
  border:1px solid rgba(15,30,60,.06); box-shadow:0 14px 32px -22px rgba(15,30,60,.4); }
.rv-badge { position:absolute; top:12px; right:12px; z-index:2; display:inline-flex;
  align-items:center; gap:6px; color:#fff; border-radius:999px; padding:4px 10px;
  font:700 10.5px/1 'Sora',system-ui,sans-serif; letter-spacing:.04em; }
.rv-badge .d { width:6px; height:6px; border-radius:999px; background:#fff; }
.rv-body { position:relative; z-index:1; padding:16px 18px; }
.rv-unit { font-size:11px; font-weight:600; letter-spacing:.02em; opacity:.85; }
.rv-name { margin-top:2px; font:700 16px/1.15 'Sora',system-ui,sans-serif; color:#0E1B2E;
  letter-spacing:-.015em; }
.rv-upd { font-size:11px; opacity:.75; margin-top:3px; }
.rv-row { display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-top:16px; }
.rv-gauge { background:#fff; border-radius:12px; padding:10px 12px 12px;
  box-shadow:0 6px 18px -12px rgba(15,30,60,.35); display:inline-flex; flex-direction:column;
  align-items:center; gap:6px; }
.rv-gauge .gm { font-size:11px; font-weight:700; color:#3A465E; }
.rv-gauge .gt { position:relative; width:26px; }
.rv-gauge .gmark { position:absolute; left:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:999px; background:#fff; border:2px solid #1E88FE;
  box-shadow:0 2px 6px rgba(30,136,254,.4); }
.rv-gauge .gv { font-size:10px; font-weight:700; color:#1E88FE; background:#EAF3FF;
  border-radius:6px; padding:3px 7px; white-space:nowrap; }
.rv-cap { background:#fff; border-radius:12px; padding:12px 16px; text-align:center;
  box-shadow:0 6px 18px -12px rgba(15,30,60,.35); }
.rv-cap .cl { font-size:10.5px; color:var(--gray-500,#64748b); font-weight:600; }
.rv-cap .cv { margin-top:3px; font:800 28px/1 'Sora',system-ui,sans-serif; letter-spacing:-.02em; }

.rv-panel { background:#fff; border:1px solid var(--gray-200,#e2e8f0); border-radius:20px;
  box-shadow:0 18px 36px -24px rgba(15,23,42,.12); padding:clamp(18px,2.4vw,26px); }
.rv-panel-head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; }
.rv-panel-head h3 { margin:0; font:700 18px/1.2 'Sora',system-ui,sans-serif;
  color:var(--navy-900,#0a1736); }
.rv-panel-head p { margin:4px 0 0; font-size:13px; color:var(--gray-500,#64748b); }
.rv-alert-chip { display:inline-flex; align-items:center; gap:7px; font-size:11.5px;
  font-weight:700; color:#C03737; background:#FEF2F2; border:1px solid #F5C9C9;
  border-radius:999px; padding:6px 12px; }
.rv-alert-chip .d { width:8px; height:8px; border-radius:999px; background:#E5484D; }
.rv-legend { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 8px; }
.rv-lg { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--gray-200,#e2e8f0);
  border-radius:999px; padding:4px 11px; font-size:11.5px; font-weight:600; color:#0E1B2E; }
.rv-lg i { width:8px; height:8px; border-radius:999px; }
.rv-chart-rolagem { margin-top:8px; overflow-x:auto; }

.rv-galeria { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.rv-card { margin:0; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--gray-200,#e2e8f0); border-radius:16px; overflow:hidden;
  box-shadow:0 14px 30px -22px rgba(15,30,60,.2); }
.rv-card.e-larga { grid-column:span 3; flex-direction:row; }
.rv-card.e-larga .rv-img { flex:1.35; aspect-ratio:auto; }
.rv-card.e-larga figcaption { flex:1; padding:clamp(24px,3vw,34px); display:flex;
  flex-direction:column; justify-content:center; }
.rv-img { aspect-ratio:16/10; overflow:hidden; background:#EEF2F8; }
.rv-img img { display:block; width:100%; height:100%; object-fit:cover; }
.rv-card figcaption { margin:0; padding:18px 22px 22px; }
.rv-tag { display:inline-block; align-self:flex-start; margin-bottom:10px;
  font:700 11px/1 'Sora',system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-500,#2867ff); background:rgba(40,103,255,.08); padding:5px 11px;
  border-radius:999px; }
.rv-card h4 { margin:0; font:800 17px/1.25 'Sora',system-ui,sans-serif;
  color:var(--navy-900,#0a1736); letter-spacing:-.015em; }
.rv-card figcaption p { margin:9px 0 0; font-size:13.5px; line-height:1.65;
  color:var(--gray-500,#64748b); }

@media (max-width:980px){
  .rv-hero-grid { grid-template-columns:minmax(0,1fr); }
  .rv-tanks { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rv-galeria { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rv-card.e-larga { grid-column:span 2; flex-direction:column; }
  .rv-card.e-larga .rv-img { aspect-ratio:16/10; }
}
@media (max-width:620px){
  .rv-tanks, .rv-galeria { grid-template-columns:minmax(0,1fr); }
  .rv-card.e-larga { grid-column:span 1; }
}

/* Hero de marca sem foto: quando o texto é o único filho da grade, ele
   ocupa as duas colunas e fica de fato centralizado. */
.sg-hero--marca.e-largo .sg-hero-grid > .sg-hero-txt:only-child {
  grid-column:1 / -1; justify-self:center; margin-inline:auto; text-align:center; }

/* ── Plataforma em faixa clara: tela grande + recursos em grade ───────
   Mesma forma da faixa de Órgãos Públicos, na paleta clara. */
.sg-pilares-sec.e-plataforma { background:linear-gradient(180deg,#ffffff,#f4f8ff 58%,#eef4ff); }
.sg-pilares-sec.e-plataforma .sg-head { max-width:820px; }
.sg-pilares-sec.e-plataforma .sg-head > p { margin-top:14px; font-size:15.5px; line-height:1.65;
  color:var(--gray-500,#64748b); max-width:70ch; }
.sg-pilares-sec.e-plataforma .sg-plat-grande { margin:clamp(22px,3vw,34px) 0 0; }

.ci-mods.e-clara { list-style:none; margin:clamp(24px,3.2vw,38px) 0 0; padding:0; }
.ci-mods.e-clara li { padding:clamp(18px,2vw,24px); border-radius:20px; background:#fff;
  border:1px solid rgba(15,32,80,.09); box-shadow:0 22px 46px -38px rgba(15,23,42,.45); }
.ci-mods.e-clara li::before { left:clamp(18px,2vw,24px); top:calc(clamp(18px,2vw,24px) + .62em);
  background:var(--blue-500,#2867ff); }
.ci-mods.e-clara b { margin:0 0 0 14px; color:var(--navy-900,#0a1736); }
.ci-mods.e-clara span { display:block; margin:8px 0 0 14px; font-size:13.5px; line-height:1.55;
  color:var(--gray-500,#64748b); }

.plat-fecho { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px;
  margin-top:clamp(26px,3.2vw,38px); padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--gray-200,#e2e8f0); }
.plat-fecho h3 { flex:1 1 420px; margin:0; letter-spacing:-.02em; color:var(--navy-900,#0a1736);
  font:800 clamp(18px,2.2vw,25px)/1.18 'Sora',system-ui,sans-serif; }
.plat-fecho h3 em { font-style:normal; color:var(--blue-500,#2867ff); }

/* ══════════════════════════════════════════════════════════════════════
   VARIANTES COMPARTILHADAS (Hospitais, Supermercados, Hotelaria)
   ══════════════════════════════════════════════════════════════════ */

/* FOOZ Find em faixa clara */
.op-find.e-clara { color:var(--navy-900,#0a1736);
  background:linear-gradient(180deg,#ffffff,#f4f8ff 58%,#eef4ff); }
.op-find.e-clara h2 { color:var(--navy-900,#0a1736); }
.op-find.e-clara h2 em { color:var(--blue-500,#2867ff); }
.op-find.e-clara .eyebrow { color:var(--blue-500,#2867ff); }
.op-find.e-clara .op-find-grade > div > p { color:var(--gray-500,#64748b); }
.op-find.e-clara .op-find-frase { color:var(--gray-500,#64748b) !important; }
.op-find.e-clara .op-find-frase b { color:var(--navy-900,#0a1736); }
.op-find.e-clara .ct-linha li { color:var(--gray-500,#64748b); }
.op-find.e-clara .ct-linha li:last-child { color:var(--blue-500,#2867ff); }
.op-find.e-clara .ct-linha li + li::before { color:#a9bdd8; }
.op-find.e-clara figure img { border:1px solid rgba(15,32,80,.09);
  box-shadow:0 34px 70px -46px rgba(15,23,42,.45); }

/* CTA final em faixa escura */
.sg-fecho.e-escura { background:linear-gradient(165deg,#0e2358 0%,#0a1b44 52%,#071336 100%); }
.sg-fecho.e-escura .sg-caso { background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14); }
.sg-fecho.e-escura .sg-caso h3 { color:#fff; }
.sg-fecho.e-escura .sg-caso p { color:rgba(226,240,255,.78); }
.sg-fecho.e-escura .sg-caso-tag { color:var(--cyan-400,#38bdf8); }
.sg-fecho.e-escura .sg-caso-link { color:#fff; background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.24); }
.sg-fecho.e-escura .sg-caso-link:hover { border-color:rgba(125,211,252,.55);
  background:rgba(125,211,252,.14); color:var(--cyan-400,#38bdf8); }
.sg-fecho.e-escura .sg-cta { border:1px solid rgba(255,255,255,.14); }

/* Diferencial em faixa clara */
.cd-gradiente.e-clara { color:var(--navy-900,#0a1736);
  background:linear-gradient(180deg,#f7f9fc,#ffffff 60%); }
.cd-gradiente.e-clara .eyebrow { color:var(--blue-500,#2867ff) !important; }
.cd-gradiente.e-clara h2 { color:var(--navy-900,#0a1736); }
.cd-gradiente.e-clara h2 em { color:var(--blue-500,#2867ff); }
.cd-gradiente.e-clara > .wrap > p { color:var(--gray-500,#64748b); }
.ct-quatro.e-clara article { background:#fff; border-color:rgba(15,32,80,.09);
  box-shadow:0 22px 46px -38px rgba(15,23,42,.42); }
.ct-quatro.e-clara b { color:var(--blue-500,#2867ff); }
.ct-quatro.e-clara p { color:var(--gray-500,#64748b) !important; }

/* Recursos da Plataforma em faixa clara, com listas */
.ci-mods.e-clara article { padding:clamp(20px,2.2vw,26px); border-radius:20px; background:#fff;
  border:1px solid rgba(15,32,80,.09); box-shadow:0 22px 46px -38px rgba(15,23,42,.45); }
.ci-mods.e-clara .ci-mods-ic { color:var(--blue-500,#2867ff);
  background:rgba(40,103,255,.08); border-color:rgba(40,103,255,.18); }
.ci-mods.e-clara .ci-mods-n { color:var(--blue-500,#2867ff); }
.ci-mods.e-clara article b { color:var(--navy-900,#0a1736); }
.ci-mods.e-clara article li { color:var(--gray-500,#64748b); }
.ci-mods.e-clara article li::before { background:var(--blue-500,#2867ff); }

/* ── Setorização: a operação dividida por área ───────────────────────
   Usada em Supermercados, Hotelaria e Hospitais. */
.sg-setores { padding:clamp(3rem,6vw,5.2rem) 0; }
.sg-setores.e-escura { color:#fff;
  background:linear-gradient(165deg,#11265c 0%,#0a1b44 50%,#071336 100%); }
.sg-setores.e-clara { background:linear-gradient(180deg,#ffffff,#f4f8ff 60%,#eef4ff); }
.sg-setores.e-escura .sg-head h2 { color:#fff; }
.sg-setores.e-escura .sg-head h2 em { color:var(--cyan-400,#38bdf8); }
.sg-setores.e-escura .eyebrow { color:var(--cyan-400,#38bdf8); }
.sg-setores.e-escura .sg-head > p { color:rgba(226,240,255,.8); }
.sg-setores.e-clara .sg-head > p { color:var(--gray-500,#64748b); }
.sg-setores .sg-head > p { margin-top:14px; font-size:15.5px; line-height:1.65; max-width:70ch; }

.sg-setores-entrada { display:inline-flex; align-items:center; gap:12px;
  padding:12px 20px; border-radius:999px; font:800 12px/1 'Sora',system-ui,sans-serif;
  letter-spacing:.14em; text-transform:uppercase; }
.sg-setores.e-escura .sg-setores-entrada { color:#fff;
  background:rgba(56,189,248,.12); border:1px solid rgba(125,211,252,.3); }
.sg-setores.e-clara .sg-setores-entrada { color:var(--blue-600,#1d4ed8);
  background:rgba(40,103,255,.08); border:1px solid rgba(40,103,255,.18); }
.sg-setores-seta { display:block; margin:14px 0; font-size:20px; line-height:1;
  color:#7dd3fc; }
.sg-setores.e-clara .sg-setores-seta { color:#a9bdd8; }

.sg-setores-grade { display:grid; gap:13px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.sg-setores-grade article { padding:20px 20px 22px; border-radius:18px; }
.sg-setores.e-escura .sg-setores-grade article { background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); }
.sg-setores.e-clara .sg-setores-grade article { background:#fff;
  border:1px solid rgba(15,32,80,.09); box-shadow:0 22px 46px -38px rgba(15,23,42,.42); }
.sg-setores-grade b { display:block; font:800 15.5px/1.2 'Sora',system-ui,sans-serif; }
.sg-setores.e-escura .sg-setores-grade b { color:#fff; }
.sg-setores.e-clara .sg-setores-grade b { color:var(--navy-900,#0a1736); }
.sg-setores-grade span { display:block; margin-top:8px; font-size:13px; line-height:1.55; }
.sg-setores.e-escura .sg-setores-grade span { color:rgba(226,240,255,.76); }
.sg-setores.e-clara .sg-setores-grade span { color:var(--gray-500,#64748b); }

/* frase de destaque, com bastante protagonismo visual */
.sg-frase { margin-top:clamp(26px,3.4vw,42px); padding:clamp(24px,3.2vw,40px);
  border-radius:26px; }
.sg-frase h3 { margin:0; letter-spacing:-.024em; max-width:24ch;
  font:800 clamp(21px,3vw,36px)/1.12 'Sora',system-ui,sans-serif; }
.sg-frase p { margin:14px 0 0; max-width:66ch; font-size:14.5px; line-height:1.65; }
.sg-setores.e-escura .sg-frase, .rv-hero .sg-frase, .cd-indiv .sg-frase {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
.sg-setores.e-escura .sg-frase h3, .cd-indiv .sg-frase h3 { color:#fff; }
.sg-setores.e-escura .sg-frase h3 em, .cd-indiv .sg-frase h3 em {
  font-style:normal; color:var(--cyan-400,#38bdf8); }
.sg-setores.e-escura .sg-frase p, .cd-indiv .sg-frase p { color:rgba(226,240,255,.8); }
.sg-setores.e-clara .sg-frase, .op-infra .sg-frase {
  background:linear-gradient(140deg,#0e2358,#0a1b44 56%,#071336); }
.sg-setores.e-clara .sg-frase h3, .op-infra .sg-frase h3 { color:#fff; }
.sg-setores.e-clara .sg-frase h3 em, .op-infra .sg-frase h3 em {
  font-style:normal; color:var(--cyan-400,#38bdf8); }
.sg-setores.e-clara .sg-frase p, .op-infra .sg-frase p { color:rgba(226,240,255,.8); }

/* "FOOZ também presente em" — faixa de logos de clientes */
.sg-tambem { margin-top:clamp(26px,3.2vw,38px); padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid rgba(255,255,255,.14); }
.sg-tambem > span { display:block; font:800 10.5px/1 'Sora',system-ui,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(198,214,244,.7); }
.sg-tambem-logos { display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px,2.4vw,34px); margin-top:18px; }
.sg-tambem-logos img { display:block; height:clamp(48px,5.2vw,64px); width:auto;
  object-fit:contain; padding:10px 16px; border-radius:12px;
  background:#fff; box-shadow:0 14px 30px -20px rgba(5,13,36,.8); }

/* Command Center em largura total: a imagem tem cinco painéis e precisa de espaço */
.rv-comando { margin:0 0 clamp(18px,2.2vw,28px); border-radius:22px; overflow:hidden;
  background:#fff; border:1px solid var(--gray-200,#e2e8f0);
  box-shadow:0 40px 84px -52px rgba(15,23,42,.5); }
.rv-comando img { display:block; width:100%; height:auto; }
.rv-comando figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px;
  padding:clamp(16px,2vw,24px); }
.rv-comando figcaption b { font:800 clamp(16px,1.8vw,21px)/1.2 'Sora',system-ui,sans-serif;
  color:var(--navy-900,#0a1736); letter-spacing:-.018em; }
.rv-comando figcaption > span:not(.rv-tag) { flex:1 1 380px; font-size:13.5px; line-height:1.6;
  color:var(--gray-500,#64748b); }
.rv-comando .rv-tag { margin:0; }

/* ── Nível dos reservatórios: a tela real da Plataforma ──────────────
   Entra dentro da seção da Plataforma, sem virar seção própria. */
.rv-nivel { margin:clamp(26px,3.4vw,42px) 0 0; }
.rv-nivel-cab { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
  margin-bottom:16px; }
.rv-nivel-cab b { font:800 clamp(17px,2vw,23px)/1.2 'Sora',system-ui,sans-serif;
  letter-spacing:-.018em; }
.rv-nivel-cab span { flex:1 1 360px; font-size:14px; line-height:1.6; }
.rv-nivel figure { margin:0; border-radius:22px; overflow:hidden; }
.rv-nivel figure img { display:block; width:100%; height:auto; }
.rv-nivel ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; }
.rv-nivel li { font:700 12px/1 'Sora',system-ui,sans-serif; padding:9px 14px; border-radius:999px; }

/* dentro de faixa escura */
.cd-indiv .rv-nivel-cab b, .rv-hero .rv-nivel-cab b { color:#fff; }
.cd-indiv .rv-nivel-cab span, .rv-hero .rv-nivel-cab span { color:rgba(226,240,255,.78); }
.cd-indiv .rv-nivel figure { border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); padding:clamp(10px,1.2vw,16px); }
.cd-indiv .rv-nivel li { color:rgba(226,240,255,.86); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14); }

/* dentro de faixa clara */
.sg-pilares-sec .rv-nivel-cab b, .rv-rede .rv-nivel-cab b { color:var(--navy-900,#0a1736); }
.sg-pilares-sec .rv-nivel-cab span, .rv-rede .rv-nivel-cab span { color:var(--gray-500,#64748b); }
.sg-pilares-sec .rv-nivel figure, .rv-rede .rv-nivel figure {
  border:1px solid rgba(15,32,80,.09); background:#fff; padding:clamp(10px,1.2vw,16px);
  box-shadow:0 34px 70px -48px rgba(15,23,42,.45); }
.sg-pilares-sec .rv-nivel li, .rv-rede .rv-nivel li { color:var(--navy-900,#0a1736);
  background:var(--ice-50,#f7f9fc); border:1px solid var(--gray-200,#e2e8f0); }

/* ── Prova em vídeo · teste de vazão no ponto ────────────────────────
   Vertical, com os números por cima da capa. O player só é criado no
   clique; antes disso a página não carrega nenhum iframe. */
.sg-prova-video { display:grid; align-items:center; gap:clamp(26px,4vw,54px);
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  margin-top:clamp(28px,3.4vw,44px); padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--gray-200,#e2e8f0); }
.spv-quadro { position:relative; aspect-ratio:9/16; border-radius:24px; overflow:hidden;
  cursor:pointer; border:1px solid rgba(15,32,80,.1);
  box-shadow:0 46px 92px -54px rgba(15,23,42,.62);
  background:linear-gradient(160deg,#11265c,#050d24); }
.spv-quadro > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.spv-quadro iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4; }
.spv-quadro::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,13,36,.55) 0%, rgba(5,13,36,.18) 34%,
                                     rgba(5,13,36,.62) 70%, rgba(5,13,36,.88) 100%); }
.spv-quadro.e-tocando > img, .spv-quadro.e-tocando .spv-capa,
.spv-quadro.e-tocando .spv-play, .spv-quadro.e-tocando::after { display:none; }
.spv-capa { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:space-between; padding:clamp(16px,2vw,22px); color:#fff; }
.spv-pilula { align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font:800 10px/1 'Sora',system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 13px; border-radius:999px; color:#fff;
  background:rgba(5,13,36,.55); border:1px solid rgba(125,211,252,.4);
  backdrop-filter:blur(6px); }
.spv-pilula::before { content:""; width:7px; height:7px; border-radius:50%;
  background:var(--cyan-400,#38bdf8); }
.spv-titulo { margin:10px 0 0; font:800 clamp(19px,2.2vw,24px)/1.15 'Sora',system-ui,sans-serif;
  letter-spacing:-.02em; }
.spv-queda { font:800 clamp(28px,3.4vw,38px)/1 'Sora',system-ui,sans-serif; letter-spacing:-.03em;
  background:linear-gradient(140deg,#ffffff 10%,#bfe6ff 46%,#38bdf8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.spv-queda-leg { display:block; margin-top:4px; font:800 9.5px/1.3 'Sora',system-ui,sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(191,230,255,.9); }
.spv-medida { display:flex; align-items:center; gap:14px; margin-top:14px; padding:12px 15px;
  border-radius:14px; background:rgba(5,13,36,.5); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px); }
.spv-medida div b { display:block; font:800 21px/1 'Sora',system-ui,sans-serif; color:#fff; }
.spv-medida div span { display:block; margin-top:3px; font:700 9px/1.2 'Sora',system-ui,sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(198,214,244,.72); }
.spv-medida i { font-style:normal; color:rgba(125,211,252,.8); }
.spv-selo { align-self:flex-start; margin-top:14px; font:800 9.5px/1 'Sora',system-ui,sans-serif;
  letter-spacing:.13em; text-transform:uppercase; padding:8px 13px; border-radius:999px;
  color:#052e1a; background:linear-gradient(140deg,#86efac,#4ade80); }
.spv-frase { margin:12px 0 0; font-size:13.5px; line-height:1.5; color:rgba(226,240,255,.92);
  font-weight:600; }
.spv-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:clamp(62px,7vw,80px); aspect-ratio:1; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--blue-500,#2867ff); background:#fff;
  box-shadow:0 22px 50px -18px rgba(5,13,36,.7); transition:transform .18s ease; }
.spv-quadro:hover .spv-play { transform:translate(-50%,-50%) scale(1.06); }
.spv-play svg { width:40%; height:40%; margin-left:8%; }
.spv-txt h3 { margin:10px 0 0; letter-spacing:-.022em;
  font:800 clamp(21px,2.6vw,32px)/1.16 'Sora',system-ui,sans-serif; }
.spv-txt > p { margin:14px 0 0; max-width:52ch; font-size:15px; line-height:1.7; }
.spv-legenda { margin-top:16px !important; font-size:12.5px !important; }
@media (max-width:860px){
  .sg-prova-video { grid-template-columns:minmax(0,1fr); }
  .spv-quadro { max-width:320px; margin-inline:auto; width:100%; }
}

/* Correções de herança: blocos desenhados para faixa escura que hoje
   também aparecem em faixa clara. */
.ef.e-claro .ef-onde { background:var(--ice-50,#f7f9fc);
  border-color:var(--gray-200,#e2e8f0); color:var(--navy-900,#0a1736); }

.sg-pilares-sec .cd-indiv-fecho, .op-engaja .cd-indiv-fecho {
  border-top-color:var(--gray-200,#e2e8f0); }
.sg-pilares-sec .cd-indiv-fecho h3, .op-engaja .cd-indiv-fecho h3 {
  color:var(--navy-900,#0a1736); }
.sg-pilares-sec .cd-indiv-fecho h3 em, .op-engaja .cd-indiv-fecho h3 em {
  background:none; -webkit-background-clip:initial; background-clip:initial;
  color:var(--blue-500,#2867ff); }

/* grade de provas em vídeo (2, 3 ou 4 lado a lado) */
.sg-prova-videos { display:grid; gap:clamp(16px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:clamp(28px,3.4vw,44px); padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--gray-200,#e2e8f0); }
.cd-indiv .sg-prova-videos, .sg-setores.e-escura .sg-prova-videos {
  border-top-color:rgba(255,255,255,.14); }
.spv-item { margin:0; display:flex; flex-direction:column; }
.spv-item .spv-quadro { width:100%; }
.spv-item figcaption { margin-top:12px; font:700 11px/1.45 'Sora',system-ui,sans-serif;
  letter-spacing:.1em; text-transform:uppercase; text-align:center;
  color:var(--blue-500,#2867ff); }
.cd-indiv .spv-item figcaption, .sg-setores.e-escura .spv-item figcaption {
  color:var(--cyan-400,#38bdf8); }
.spv-rot { display:inline-block; align-self:flex-start; margin-top:18px;
  font:800 10.5px/1 'Sora',system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-500,#2867ff); }
.spv-item h4 { margin:10px 0 0; letter-spacing:-.018em; color:var(--navy-900,#0a1736);
  font:800 clamp(16px,1.7vw,19px)/1.25 'Sora',system-ui,sans-serif; }
.spv-item > p { margin:9px 0 0; font-size:13.5px; line-height:1.6;
  color:var(--gray-500,#64748b); }
.cd-indiv .spv-rot, .sg-setores.e-escura .spv-rot { color:var(--cyan-400,#38bdf8); }
.cd-indiv .spv-item h4, .sg-setores.e-escura .spv-item h4 { color:#fff; }
.cd-indiv .spv-item > p, .sg-setores.e-escura .spv-item > p { color:rgba(226,240,255,.78); }
.spv-legenda-foto { margin-top:10px; font-size:12px; line-height:1.5; text-align:center;
  color:var(--gray-500,#64748b); }
.cd-indiv .spv-legenda-foto, .sg-setores.e-escura .spv-legenda-foto { color:rgba(198,214,244,.66); }

/* texto em negrito dentro da linha de apoio de uma faixa escura */
.sg-pilares-sec.e-escura .sg-head > p b { color:#fff; }

/* variante horizontal da prova em vídeo (depoimento, evento, case) */
.spv-quadro.e-largo { aspect-ratio:16/9; }
.spv-quadro.e-largo .spv-capa { justify-content:flex-end; }
.spv-quadro.e-largo::after {
  background:linear-gradient(180deg, rgba(5,13,36,.12) 0%, rgba(5,13,36,.08) 42%,
                                     rgba(5,13,36,.72) 100%); }
.sg-depo { display:grid; align-items:center; gap:clamp(24px,3.4vw,48px);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  margin-top:clamp(28px,3.4vw,44px); padding-top:clamp(26px,3vw,38px);
  border-top:1px solid rgba(255,255,255,.14); }
.sg-pilares-sec .sg-depo, .op-engaja .sg-depo { border-top-color:var(--gray-200,#e2e8f0); }
.sg-depo-txt h3 { margin:10px 0 0; letter-spacing:-.02em; color:#fff;
  font:800 clamp(19px,2.2vw,27px)/1.18 'Sora',system-ui,sans-serif; }
.sg-depo-txt h3 em { font-style:normal; color:var(--cyan-400,#38bdf8); }
.sg-depo-txt p { margin:13px 0 0; font-size:14.5px; line-height:1.65;
  color:rgba(226,240,255,.78); }
.sg-pilares-sec .sg-depo-txt h3, .op-engaja .sg-depo-txt h3 { color:var(--navy-900,#0a1736); }
.sg-pilares-sec .sg-depo-txt h3 em, .op-engaja .sg-depo-txt h3 em { color:var(--blue-500,#2867ff); }
.sg-pilares-sec .sg-depo-txt p, .op-engaja .sg-depo-txt p { color:var(--gray-500,#64748b); }
@media (max-width:900px){ .sg-depo { grid-template-columns:minmax(0,1fr); } }

/* um vídeo + texto dentro da grade de provas */
.sg-prova-videos > .spv-txt { align-self:center; grid-column:span 2; }
@media (max-width:760px){ .sg-prova-videos > .spv-txt { grid-column:span 1; } }

/* Os verticais seguem o tamanho da página do Kit Vortex (~330px). Sem o
   limite, dois numa grade de 1160px viravam vídeos de 958px de altura. */
.sg-prova-videos { justify-content:center; }
.sg-prova-videos .spv-item { max-width:330px; margin-inline:auto; width:100%; }
.sg-prova-videos > .spv-txt { max-width:none; }

/* ── Prova dos sacos dentro da faixa ESCURA (.ef sem .e-claro) ───────
   O bloco nasceu para fundo claro: sobre o azul, o título, os números e
   a nota ficavam ilegíveis. A arte do saco não é alterada — ela só ganha
   um halo suave para não flutuar sobre o azul. */
.ef:not(.e-claro) .prova-passos li { color:rgba(198,214,244,.72); }
.ef:not(.e-claro) .prova-passos li + li::before { color:rgba(125,211,252,.5); }
.ef:not(.e-claro) .prova-passos li:last-child { color:var(--cyan-400,#38bdf8); }
.ef:not(.e-claro) .prova-grade h2 { color:#fff; }
.ef:not(.e-claro) .prova-grade h2 em { color:var(--cyan-400,#38bdf8); }
.ef:not(.e-claro) .prova-grade > div > p { color:rgba(226,240,255,.8); }
.ef:not(.e-claro) .prova-medida { border-top-color:rgba(255,255,255,.14); }
.ef:not(.e-claro) .prova-medida div b { color:#fff; }
.ef:not(.e-claro) .prova-medida div.e-depois b { color:var(--cyan-400,#38bdf8); }
.ef:not(.e-claro) .prova-medida div span { color:rgba(198,214,244,.72); }
.ef:not(.e-claro) .prova-medida .prova-seta { color:rgba(125,211,252,.6); }
.ef:not(.e-claro) .prova-nota { color:rgba(198,214,244,.58); }
/* A arte do saco não recebe halo, sombra nem contorno: quando a faixa for
   escura, o que muda é o fundo da seção, nunca a imagem do produto. */

/* link de apoio sobre faixa escura: o azul-500 não tem contraste suficiente */
.ef:not(.e-claro) .cd-sol-link, .cd-indiv .cd-sol-link, .sg-setores.e-escura .cd-sol-link,
.rv-hero .cd-sol-link { color:var(--cyan-400,#38bdf8); }
.ef:not(.e-claro) .cd-sol-link:hover, .cd-indiv .cd-sol-link:hover,
.sg-setores.e-escura .cd-sol-link:hover, .rv-hero .cd-sol-link:hover { color:#bfe6ff; }

/* frase de destaque dentro da faixa de pilares escura */
.sg-pilares-sec.e-escura .sg-frase { background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); }
.sg-pilares-sec.e-escura .sg-frase h3 { color:#fff; }
.sg-pilares-sec.e-escura .sg-frase h3 em { font-style:normal; color:var(--cyan-400,#38bdf8); }
.sg-pilares-sec.e-escura .sg-frase p { color:rgba(226,240,255,.8); }

/* a figura do Command Center / Mapa também serve às faixas escuras */
.sg-setores.e-escura .rv-comando, .cd-indiv .rv-comando {
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.sg-setores.e-escura .rv-comando figcaption b, .cd-indiv .rv-comando figcaption b { color:#fff; }
.sg-setores.e-escura .rv-comando figcaption > span:not(.rv-tag),
.cd-indiv .rv-comando figcaption > span:not(.rv-tag) { color:rgba(226,240,255,.78); }

/* ── Bloco de destaque (voucher / kit) em FAIXA CLARA ────────────────
   O componente nasceu para faixa escura: título branco e texto claro.
   Quando ele aparece numa seção clara, o texto some. */
.ef.e-claro .ct-voucher-txt h3,
.sg-pilares-sec .ct-voucher-txt h3,
.sg-setores.e-clara .ct-voucher-txt h3,
.op-engaja .ct-voucher-txt h3 { color:var(--navy-900,#0a1736); }
.ef.e-claro .ct-voucher-txt h3 em,
.sg-pilares-sec .ct-voucher-txt h3 em,
.sg-setores.e-clara .ct-voucher-txt h3 em,
.op-engaja .ct-voucher-txt h3 em { color:var(--blue-500,#2867ff); }
.ef.e-claro .ct-voucher-txt > p,
.sg-pilares-sec .ct-voucher-txt > p,
.sg-setores.e-clara .ct-voucher-txt > p,
.op-engaja .ct-voucher-txt > p { color:var(--gray-500,#64748b); }
.ef.e-claro .ct-voucher-nota,
.sg-pilares-sec .ct-voucher-nota,
.sg-setores.e-clara .ct-voucher-nota,
.op-engaja .ct-voucher-nota { color:#94a3b8; }
.ef.e-claro .ct-bullets li,
.sg-pilares-sec .ct-bullets li,
.sg-setores.e-clara .ct-bullets li,
.op-engaja .ct-bullets li { color:var(--gray-500,#64748b); }
.ef.e-claro .ct-bullets li b,
.sg-pilares-sec .ct-bullets li b,
.sg-setores.e-clara .ct-bullets li b,
.op-engaja .ct-bullets li b { color:var(--navy-900,#0a1736); }
.ef.e-claro .ct-tick,
.sg-pilares-sec .ct-tick,
.sg-setores.e-clara .ct-tick,
.op-engaja .ct-tick { background:var(--blue-500,#2867ff); color:#fff; }
.ef.e-claro .ct-voucher-foto,
.sg-pilares-sec .ct-voucher-foto,
.sg-setores.e-clara .ct-voucher-foto,
.op-engaja .ct-voucher-foto { border-color:rgba(15,32,80,.1);
  box-shadow:0 40px 84px -54px rgba(15,23,42,.5); }
.ef.e-claro .bn-prod-cat,
.sg-pilares-sec .bn-prod-cat,
.sg-setores.e-clara .bn-prod-cat,
.op-engaja .bn-prod-cat { color:var(--blue-500,#2867ff); }