/* ============================================================
   SAN - protótipo da tela inicial
   Tudo aqui segue o Manual de Marca (pasta ARQUIVOS PROJETO):

   CORES (página "Cores")
     azul   #034BFF   navy #011336   gelo #E4E8F7   preto #090C0D
     + 5 tons de cada cor (passos de 1/6 até o branco, como na página 5)
   FONTE (página "Tipografia institucional")
     Satoshi (principal), Work Sans (alternativa)
     Fonte mono: só onde o manual usa (Tudo em dia., endereço do site, 100%)
   FORMAS: quadrantes curvos, paralelogramo do símbolo, padronagem do S
   ============================================================ */

:root {
  /* cores do manual */
  --blue: #034BFF;
  --navy: #011336;
  --ice: #E4E8F7;
  --black: #090C0D;
  --white: #FFFFFF;

  /* tons do manual (1 a 5 = do mais escuro ao mais claro) */
  --blue-1: #2D69FF; --blue-2: #5787FF; --blue-3: #81A5FF; --blue-4: #ABC3FF; --blue-5: #D5E1FF;
  --navy-1: #2B3A58; --navy-2: #566279; --navy-3: #80899A; --navy-4: #AAB0BC; --navy-5: #D5D8DE;
  --ice-1: #E8ECF8;  --ice-2: #EDF0FA;  --ice-3: #F2F4FB;  --ice-4: #F6F7FC;  --ice-5: #FAFBFE;

  /* papéis na interface */
  --text: var(--navy);
  --text-soft: var(--navy-2);      /* contraste 5,9:1 sobre branco */
  --line: var(--navy-5);

  --radius-btn: 10px;
  --radius-card: 18px;
  /* As duas fontes do manual: Satoshi nos títulos e na marca; Work Sans nos textos corridos e na interface */
  --font: 'Satoshi', 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Work Sans', 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --maxw: 1200px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
html, body { overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }

/* Satoshi: títulos, marca, números, botões e frases da marca */
h1, h2, h3, h4, .btn, .eyebrow, .module__num, .link, .step__n, .tagline, .headline, .sub,
.law__badge > span, .law p, .cta p, .footer__brand p, .section__head h2, .nav__btn b, .subitem b { font-family: var(--font); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); }
.eyebrow { font-weight: 500; font-size: 15px; color: var(--blue); margin-bottom: 14px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Botões (o manual não define; retângulo de canto suave, como no mockup do site) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 26px;
  border-radius: var(--radius-btn);
  font: 700 16px/1 var(--font);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--navy); }
.btn--white { background: #fff; color: var(--blue); }
.btn--white:hover { background: var(--ice); }
.btn--ghost-white { border-color: rgb(255 255 255 / .6); color: #fff; }
.btn--ghost-white:hover { border-color: #fff; background: rgb(255 255 255 / .1); }

/* ---------- Cabeçalho ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgb(255 255 255 / .94); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.header__inner { position: relative; display: flex; align-items: center; gap: 32px; height: 76px; }
.header__logo { position: relative; display: block; }
.header__logo img { height: 38px; width: auto; }
.nav { display: flex; gap: 2px; margin-left: 8px; }
.nav__item { position: static; }
.nav__btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 8px; border: 0; background: none; cursor: pointer; font: 500 16px/1.2 var(--font-text); color: var(--navy); }
.nav__btn:hover, .nav__item.open > .nav__btn { background: var(--ice-2); }
.chev { width: 11px; height: 11px; transition: transform .2s ease; }
.nav__item.open .chev { transform: rotate(180deg); }

/* Submenus (abrem ao passar o mouse, clicar ou usar o teclado) */
/* Painel padronizado: sempre na largura do conteúdo, colado ao cabeçalho, com introdução à esquerda e itens em 4 colunas */
.subnav { position: absolute; top: calc(100% - 1px); left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: stretch; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 20px 20px; box-shadow: 0 30px 60px rgb(1 19 54 / .16); padding: 22px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; }
.subnav__intro { position: relative; overflow: hidden; background: var(--navy); color: #fff; border-radius: 14px; padding: 22px 22px 72px; min-height: 170px; }
.subnav__intro b { display: block; font: 700 22px/1.15 var(--font); }
.subnav__intro p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: rgb(255 255 255 / .82); }
.subnav__intro::after { content: ""; position: absolute; right: 0; bottom: 0; width: 84px; height: 84px; background: var(--blue); border-radius: 100% 0 0 0; }
.subnav__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; align-content: start; }
.nav__item.open > .subnav { opacity: 1; visibility: visible; transform: none; }
.subitem { display: block; padding: 11px 14px; border-radius: 10px; cursor: default; outline: none; }
.subitem b { display: block; font-size: 16px; font-weight: 700; color: var(--navy); }
.subitem small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--text-soft); }
.subitem:hover, .subitem:focus-visible { background: var(--ice-2); }
.subitem:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header__login { font-weight: 700; padding: 10px 16px; border-radius: 8px; }
.header__login:hover { background: var(--ice-2); }
.header .btn { height: 44px; padding: 0 22px; font-size: 15px; }
.menu-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 5px auto; border-radius: 2px; }

/* ---------- Cartões (canto em quadrante, forma da marca) ---------- */
/* Os cartões ficam entre a abertura e a faixa azul sobre fundo gelo (par de cores do manual), sem branco puro encostando no azul */
.cards { position: relative; z-index: 5; margin-top: -90px; padding-bottom: 110px; background: linear-gradient(180deg, transparent 0, transparent 90px, var(--blue) 90px, var(--navy) 100%); }
.cards .card { box-shadow: 0 24px 60px rgb(1 19 54 / .35); border-color: transparent; }
.section--ice .step { background: #fff; }
.cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { position: relative; overflow: hidden; background: #fff; border-radius: var(--radius-card); padding: 34px 30px 30px; border: 1px solid var(--line); box-shadow: 0 18px 50px rgb(1 19 54 / .12); transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; gap: 12px; }
.card::after { content: ""; position: absolute; top: 0; right: 0; width: 92px; height: 92px; background: var(--ice); border-radius: 0 0 0 100%; transition: background .25s ease, transform .35s ease; transform-origin: top right; }
.card:hover::after { background: var(--blue); transform: scale(1.12); }
.card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgb(1 19 54 / .18); }
.card h3, .card p, .card .link { position: relative; z-index: 1; }
.card h3 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; max-width: 78%; }
.card p { color: var(--text-soft); }
.link { margin-top: auto; font-weight: 700; color: var(--blue); display: inline-flex; gap: 8px; align-items: center; }
.link::after { content: "→"; transition: transform .15s ease; }
.card:hover .link::after, .link:hover::after { transform: translateX(4px); }

/* ---------- Seções ---------- */
.section { padding: 110px 0; }
.section--ice { background: var(--ice); }
/* Seções escuras: o site vai escurecendo conforme a rolagem (como nos materiais em navy do manual) */
.section--dark { background: var(--navy); color: #fff; }
.section--dark .section__head h2 { color: #fff; }
.section--dark .eyebrow { color: var(--blue-3); }
.section--dark .benefit h3 { color: #fff; }
.section--dark .benefit p { color: rgb(255 255 255 / .72); }
.section--dark .benefit::before { background: var(--blue-2); }
.section--dark .photo { box-shadow: 0 30px 70px rgb(0 0 0 / .45); }
.section--dark .step { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .14); }
.section--dark .step__n { color: var(--blue-2); }
.section--dark .step h3 { color: #fff; }
.section--dark .step p { color: rgb(255 255 255 / .72); }
.section__head { max-width: 760px; margin-bottom: 56px; }
.section__head h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.02em; font-weight: 300; }
.section__head h2 b { font-weight: 700; }
.section__head p { margin-top: 18px; color: var(--text-soft); font-size: 19px; }

.why { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
/* Foto do material do designer, com o canto inferior em quadrante (forma da marca) */
.photo { position: relative; margin: 0 auto; width: 100%; max-width: 470px; border-radius: 28px 28px 28px 150px; overflow: hidden; box-shadow: 0 30px 70px rgb(1 19 54 / .22); background: var(--blue); }
.photo img { width: 100%; height: auto; display: block; }
.benefits { display: grid; gap: 28px; }
.benefit { position: relative; padding-left: 30px; }
.benefit::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-radius: 2px; background: var(--blue); transform: skewX(-20deg); }
.benefit h3 { font-size: 21px; margin-bottom: 4px; }
.benefit p { color: var(--text-soft); }


/* 100% do código é nosso (seta em degradê do manual) */
.law { position: relative; overflow: hidden; background: var(--blue); color: #fff; padding: 110px 0; isolation: isolate; }
.law::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url('img/padrao-gelo.svg') right center / 520px auto repeat; opacity: .10; -webkit-mask-image: linear-gradient(270deg, #000, transparent 55%); mask-image: linear-gradient(270deg, #000, transparent 55%); }
.law__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.law__badge { position: relative; background: linear-gradient(105deg, var(--navy) 0%, var(--navy-1) 100%); color: #fff; padding: 54px 80px 54px 48px; clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%); border-radius: 18px 0 0 18px; }
.law__badge .big { font-family: var(--mono); font-weight: 300; font-size: clamp(64px, 9vw, 112px); line-height: 1; letter-spacing: -.04em; color: var(--blue-5); }
.law__badge > span { display: block; margin-top: 8px; font-size: 20px; font-weight: 300; }
.law h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.02em; font-weight: 300; }
.law h2 b { font-weight: 700; }
.law p { margin-top: 20px; color: rgb(255 255 255 / .8); font-size: 19px; font-weight: 300; }
.chips { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-weight: 500; font-size: 14px; padding: 8px 14px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .32); color: #fff; }

/* Como funciona */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { padding: 34px 30px 30px; border-radius: var(--radius-card); background: var(--ice-4); border: 1px solid var(--line); }
.step__n { font-weight: 300; font-size: 64px; color: var(--blue); line-height: 1; letter-spacing: -.04em; }
.step h3 { margin: 18px 0 8px; font-size: 22px; }
.step p { color: var(--text-soft); }

/* Chamada final */
.cta { position: relative; overflow: hidden; background: var(--blue); color: #fff; padding: 96px 0; isolation: isolate; text-align: center; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url('img/padrao-gelo.svg') center / 480px auto repeat; opacity: .08; }
.cta h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.02em; font-weight: 300; }
.cta h2 b { font-weight: 700; }
.slogan { font-family: var(--mono); font-weight: 700; letter-spacing: -.03em; }   /* "Tudo em dia." sempre em mono, como no manual */
.cta p { margin: 20px auto 0; max-width: 46ch; font-size: 20px; color: rgb(255 255 255 / .92); font-weight: 300; }
.cta__buttons { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Rodapé */
.footer { background: var(--navy); color: rgb(255 255 255 / .78); padding: 76px 0 34px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; }   /* 3 colunas de links: a coluna Legal está comentada em _RodapeNovo.cshtml; voltar para repeat(4, 1fr) ao reativar */
.footer__brand img { height: 40px; width: auto; margin-bottom: 18px; }
.footer__brand p { max-width: 30ch; font-weight: 300; }
.footer__contact { margin-top: 20px; display: grid; gap: 4px; font-size: 15px; }
.social { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-btn); border: 1px solid rgb(255 255 255 / .28); color: #fff; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.social a:hover { background: var(--blue); border-color: var(--blue); text-decoration: none; transform: translateY(-2px); }
.social svg { width: 21px; height: 21px; }

/* Newsletter do rodapé */
.news { position: relative; overflow: hidden; isolation: isolate; margin-bottom: 64px; padding: 36px; background: var(--blue); color: #fff; border-radius: var(--radius-card); display: grid; grid-template-columns: .9fr 1.4fr; gap: 32px; align-items: center; }
.news::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('img/padrao-gelo.svg') 0 0 / 460px auto repeat; opacity: .08; }
.news h2 { font-family: var(--font); font-weight: 700; font-size: 28px; letter-spacing: -.01em; color: #fff; }
.news p { margin-top: 6px; color: rgb(255 255 255 / .95); }
.news__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.news__form input { width: 100%; height: 50px; padding: 0 14px; border-radius: var(--radius-btn); border: 2px solid transparent; background: #fff; color: var(--navy); font: 400 16px var(--font-text); }
.news__form input::placeholder { color: var(--navy-3); }
.news__form input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgb(255 255 255 / .35); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-1); }
.btn[disabled] { opacity: .7; cursor: progress; }
.news__msg { grid-column: 1 / -1; min-height: 1.5em; margin: 0; font-size: 15px; color: #fff; }
.news__msg.is-erro { font-weight: 700; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; font-weight: 700; }
.footer li { margin-bottom: 10px; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__bottom { margin-top: 54px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .14); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.url { font-family: var(--mono); }
.url b { font-weight: 700; color: #fff; }

/* Aviso de protótipo (não faz parte do design) */
.proto { position: fixed; left: 16px; bottom: 16px; z-index: 90; font: 500 12px var(--font); background: var(--black); color: #fff; padding: 9px 14px; border-radius: 8px; opacity: .92; }

/* ---------- Responsivo ---------- */
@media (max-width: 1020px) {
  .nav, .header__login { display: none; }
  .menu-toggle { display: block; }
  .header__actions { margin-left: 0; }
  .header__actions .btn { display: none; }
  .nav.open { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; padding: 8px var(--gutter) 22px; border-bottom: 1px solid var(--line); margin: 0; max-height: calc(100vh - 76px); overflow: auto; }
  .nav.open .nav__item { border-bottom: 1px solid var(--ice-1); }
  .nav.open .nav__btn { width: 100%; justify-content: space-between; padding: 16px 6px; border-radius: 0; }
  .nav.open .subnav { position: static; display: none; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 10px 6px; }
  .nav.open .nav__item.open > .subnav { display: block; }
  .subnav__intro { display: none; }
  .subnav__grid { grid-template-columns: 1fr; }
  .photo { max-width: 420px; }
  .why, .law__grid { grid-template-columns: 1fr; gap: 48px; }
  .cards__grid, .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .section { padding: 76px 0; }
  .law { padding: 76px 0; }
  .law__badge { clip-path: none; border-radius: 18px; padding: 40px 32px; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .proto { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .card::after, .module, .link::after { transition: none; }
}

/* Newsletter: telas menores */
@media (max-width: 900px) {
  .news { grid-template-columns: 1fr; padding: 28px 24px; }
  .news__text { padding-right: 44px; }
}
@media (max-width: 560px) {
  .news__form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .social a { transition: none; }
}


/* ============================================================
   ROLAGEM ÚNICA (só computador; ver scroll.js)
   A barra do navegador some e entra uma gota "meio densa, meio líquida": uma cor só, sem borda, que ondula devagar e estica ao se mover.
   A cor troca conforme o fundo (azul sobre claro, gelo sobre azul/navy) para nunca sumir. A faixa da lateral é invisível e clicável. */
html.has-sc { scrollbar-width: none; -ms-overflow-style: none; }
html.has-sc::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sc { position: fixed; top: 0; right: 0; bottom: 0; width: 24px; z-index: 5000; }
.sc[hidden] { display: none; }
.sc__gota { position: absolute; top: 0; right: 4px; width: 22px; height: 34px; cursor: grab; touch-action: none; will-change: transform; transform-origin: 50% 50%;
  border-radius: 50% 50% 50% 50% / 52% 52% 48% 48%;
  animation: sc-ondula 7s ease-in-out infinite; }
.sc__gota::before, .sc__gota::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: opacity .35s ease; }
.sc__gota::before { background: radial-gradient(120% 90% at 32% 24%, var(--blue-1), var(--blue) 62%); box-shadow: 0 8px 20px rgb(1 19 54 / .28); }
.sc__gota::after { background: radial-gradient(120% 90% at 32% 24%, #fff, var(--ice) 62%); opacity: 0; box-shadow: 0 8px 20px rgb(1 19 54 / .35); }
.sc__gota.is-gelo::before { opacity: 0; }
.sc__gota.is-gelo::after { opacity: 1; }
.sc__gota.is-arrastando { cursor: grabbing; }
@keyframes sc-ondula {
  0%, 100% { border-radius: 50% 50% 50% 50% / 52% 52% 48% 48%; }
  33% { border-radius: 53% 47% 51% 49% / 48% 54% 46% 52%; }
  66% { border-radius: 48% 52% 47% 53% / 53% 47% 53% 47%; }
}
@media (prefers-reduced-motion: reduce) { .sc__gota { animation: none; } .sc__gota::before, .sc__gota::after { transition: none; } }

.news__form { margin-right: 21%; }

/* ============================================================
   COMPOSIÇÕES COM A GEOMETRIA DO DESIGNER (ver estudo no txt de regras): formas sangram as bordas, o assunto atravessa a forma,
   o texto fica numa célula limpa. Só azul/navy/gelo chapados. */

/* Como funciona (fundo claro): bloco da padronagem do S à esquerda, como nos cartazes claros; os cartões dos passos atravessam a borda dele */
.como { position: relative; overflow: hidden; isolation: isolate; }
.como__padrao { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 42%; background: #fff url('img/padrao-azul.svg') 0 0 / 900px auto repeat; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.como__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: center; }
.como .section__head { margin-bottom: 32px; }
.como .steps { grid-template-columns: 1fr; gap: 16px; margin-left: calc(-1 * clamp(40px, 7vw, 110px)); }
.como .step { display: grid; grid-template-columns: 92px 1fr; column-gap: 18px; align-items: center; padding: 22px 30px; box-shadow: 0 18px 44px rgb(1 19 54 / .14); }
.como .step__n { grid-row: 1 / span 2; font-size: 58px; }
.como .step h3 { margin: 0 0 4px; }
.como .step p { margin: 0; }

/* Chamada final: layout da capa do manual (texto à esquerda, arco e lajota grandes à direita, cruzando) */
/* Transição entre a seção clara, a chamada final e o rodapé escuro SEM degradê (o designer só usa formas chapadas): a chamada final é um painel azul
   arredondado que ATRAVESSA a divisão seca entre o fundo claro (em cima) e o navy (embaixo), como o assunto atravessando a forma nos exemplos. */
.cta { padding: 44px 0 0; overflow: visible; isolation: auto; text-align: center; background: linear-gradient(180deg, var(--ice) calc(50% + 22px), var(--navy) calc(50% + 22px)); }   /* o respiro de 44px em cima desloca o meio do painel em 22px */
.cta::before { display: none; }
.cta__painel { position: relative; overflow: hidden; isolation: isolate; background: var(--blue); border-radius: 36px; padding: 96px 32px; box-shadow: 0 30px 70px rgb(1 19 54 / .28); }
.cta__painel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url('img/padrao-gelo.svg') center / 480px auto repeat; opacity: .08; }
.cta__txt { max-width: none; }
.cta__simbolo { display: block; height: 64px; width: auto; margin: 0 auto 22px; }
.cta p { margin-left: auto; margin-right: auto; }
.cta__buttons { justify-content: center; }



@media (max-width: 980px) {
  .como__padrao, .como__vazio,   .como__grid { grid-template-columns: 1fr; }
  .como .steps { margin-left: 0; }
}
.modscene__count span { color: #fff; }
.modscene__count small { color: var(--ice); }

/* ============================================================
   COMPOSIÇÃO DO DESIGNER, DESENHO EXATO (medido sobre a capa do manual, quadro 676x375)
   Arco: trecho de um CÍRCULO (centro 684,142; raio 237) cortado pela linha horizontal do cruzamento.
   Lajota: paralelogramo inclinado ~21,5° com o canto de cima arredondado (raio 59); o canto de cima da direita da lajota é o mesmo ponto
   onde o arco termina. Escala pela ALTURA da seção (largura = 1,8 x altura), colada à direita e ao alto, sangrando as bordas.
   Cores: --g1 (arco) e --g2 (lajota). Sempre cores chapadas do manual. */
.gx { position: absolute; z-index: -3; right: 0; top: 0; height: 100%; aspect-ratio: 676 / 375; pointer-events: none; --g1: var(--navy); --g2: var(--navy); }
.gx svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gx__arc { fill: var(--g1); }
.gx__slab { fill: var(--g2); }
.gx--mod { --g1: var(--blue); --g2: var(--blue); z-index: -1; height: 90%; }   /* a linha do cruzamento cai no vão entre as duas fileiras de cartões */
.gx--news { --g1: var(--navy); --g2: var(--navy); z-index: -1; }
.gx--hero { --g1: var(--navy-1); --g2: var(--navy-1); }   /* tom navy-1 (o do arco original do hero): o texto branco lê bem e o ícone navy continua se destacando */
@media (max-width: 900px) { .gx { display: none; } }

/* Gota "mini" nas áreas internas que rolam (ver scroll.js) e texto que desliza nos campos (ver campos.js) */
/* prioridade maior que a regra do próprio campo (.combo__list em login.css traz scrollbar-width: thin e carrega depois) */
.has-minisc, .combo__list.has-minisc { scrollbar-width: none !important; -ms-overflow-style: none; scrollbar-color: transparent transparent !important; }
.has-minisc::-webkit-scrollbar, .combo__list.has-minisc::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.sc__gota--mini { right: auto; top: 0; width: 10px; height: 26px; z-index: 50; }
.campo__dica { position: absolute; z-index: 1; display: flex; align-items: center; overflow: hidden; pointer-events: none; }
.campo__dica[hidden] { display: none; }
.campo__dica > span { display: inline-block; white-space: nowrap; will-change: transform; }
.campo__dica.is-roda > span { animation: combo-roda var(--dur, 6s) ease-in-out infinite; }
input.tem-dica::placeholder { color: transparent !important; }
@media (prefers-reduced-motion: reduce) { .campo__dica { display: none; } }
/* Movimento do texto que não cabe no campo (campos.js e o combo de Estado/Cidade): pausa, desliza até o fim, pausa, volta. Fica aqui porque TODA página nova carrega styles.css */
@keyframes combo-roda { 0%, 18% { transform: translateX(0); } 50%, 68% { transform: translateX(calc(var(--dist) * -1)); } 100% { transform: translateX(0); } }