/* MACGOV · página institucional (base: site do Gestor de Emendas)
   Claro, com vidro leve; marinho #191935 no texto e âmbar #fcc01c como acento (brand-guide). Movimento só em transform/opacity. */
:root {
  --fundo: #f6f7fb;
  --fundo-2: #ffffff;
  --texto: #191935;
  --suave: #4b5570;
  --apagado: #6f7891;
  --linha: rgba(25, 25, 53, .08);
  --linha-forte: rgba(25, 25, 53, .14);
  --acento: #a87900;
  --acento-2: #fcc01c;
  --marca: #191935;
  --mola: cubic-bezier(.32, .72, 0, 1);
  --saida: cubic-bezier(.16, 1, .3, 1);
  --raio: 28px;
  --display: "Ubuntu", system-ui, sans-serif;
  --corpo: "Ubuntu", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }   /* nada alarga a página no celular */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: radial-gradient(1200px 700px at 85% -10%, #fff3cc 0%, transparent 60%), radial-gradient(900px 600px at -10% 30%, #eceef7 0%, transparent 60%), var(--fundo); color: var(--texto);
  font: 400 17px/1.65 var(--corpo); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.02em; }
em, em .palavra { font-style: normal; background: linear-gradient(100deg, #191935, #a87900 45%, #fcc01c); -webkit-background-clip: text; background-clip: text; color: transparent; }
em .palavra { padding-right: .04em; }
/* respiro para as letras que descem (p, g): o gradiente só pinta dentro da caixa da palavra e a máscara da
   animação corta o que passa dela; o margin negativo mantém o espaçamento entre as linhas */
em, em .palavra, .palavra-mask { padding-bottom: .16em; margin-bottom: -.16em; }
::selection { background: rgba(252, 192, 28, .2); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 8px; }

/* textura de grão fixa (não repinta ao rolar) */
.grao { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- abertura ---------- */
.intro { position: fixed; inset: 0; z-index: 80; background: #141430; cursor: pointer; }
.intro__marca { display: grid; justify-items: center; gap: 22px; }
.intro__nome { margin: 0; font: 600 30px/1 var(--display); letter-spacing: -.02em; }
.intro__nome span { color: var(--acento); }
.sem-intro .intro { display: none; }

/* ---------- navegação flutuante ---------- */
.nav { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 28px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 10px 40px -12px rgba(25, 25, 53, .22), 0 0 0 1px var(--linha); }
.nav__marca { display: flex; align-items: center; gap: 10px; font: 600 15px var(--display); white-space: nowrap; }
.nav__marca b { color: var(--acento); font-weight: 600; }
.nav__links { display: flex; gap: 26px; font-size: 15px; color: var(--suave); }
.nav__links a { white-space: nowrap; transition: color .3s var(--mola); }
.nav__links a:hover { color: var(--texto); }
.nav__entrar { padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; color: #fff; background: var(--texto);
  border: 1px solid transparent; transition: background .4s var(--mola); }
.nav__entrar:hover { background: var(--marca); }
.nav__menu { display: none; position: relative; width: 42px; height: 42px; border: 0; border-radius: 999px; background: rgba(25, 25, 53, .06); cursor: pointer; }
.nav__menu span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--texto); transition: transform .5s var(--mola); }
.nav__menu span:first-child { top: 17px; } .nav__menu span:last-child { top: 24px; }
.menu-aberto .nav__menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-aberto .nav__menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-celular { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 28px;
  background: rgba(245, 248, 252, .92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; pointer-events: none; transition: opacity .5s var(--mola); }
.menu-celular a { font: 600 34px var(--display); transform: translateY(30px); opacity: 0; transition: transform .7s var(--mola), opacity .7s var(--mola); }
.menu-aberto .menu-celular { opacity: 1; pointer-events: auto; }
.menu-aberto .menu-celular a { transform: none; opacity: 1; }
.menu-aberto .menu-celular a:nth-child(2) { transition-delay: .05s; } .menu-aberto .menu-celular a:nth-child(3) { transition-delay: .1s; }
.menu-aberto .menu-celular a:nth-child(4) { transition-delay: .15s; } .menu-aberto .menu-celular a:nth-child(5) { transition-delay: .2s; }

/* ---------- botões ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 24px; min-height: 54px; border-radius: 999px;
  font: 600 16px var(--display); letter-spacing: -.01em; white-space: nowrap; transition: transform .6s var(--mola), box-shadow .6s var(--mola), background .4s var(--mola); will-change: transform; }
.btn:active { transform: scale(.98); }
.btn--primario { color: #fff; background: linear-gradient(180deg, #ffd24d, #f2b300); box-shadow: 0 12px 36px -10px rgba(168, 121, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--primario:hover { box-shadow: 0 18px 50px -10px rgba(168, 121, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--vidro { padding: 8px 24px; color: var(--texto); background: rgba(255, 255, 255, .8); border: 1px solid var(--linha-forte); box-shadow: 0 8px 24px -14px rgba(25, 25, 53, .3); }
.btn--vidro:hover { background: #fff; }
.btn__icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 17px; transition: transform .6s var(--mola); }
.btn:hover .btn__icone { transform: translate(3px, -2px) scale(1.06); }

/* ---------- moldura dupla (vidro sobre bandeja) ---------- */
.bezel { padding: 7px; border-radius: var(--raio); background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(232, 241, 251, .7));
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 30px 70px -30px rgba(25, 25, 53, .35), 0 0 0 1px var(--linha); }
.bezel__nucleo { border-radius: calc(var(--raio) - 7px); overflow: hidden; background: var(--fundo-2); box-shadow: 0 0 0 1px var(--linha); }
.bezel--grande { --raio: 32px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px;
  padding: 140px max(32px, 5vw) 80px; overflow: hidden; }
.hero__cena { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__veu { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(55% 60% at 20% 45%, rgba(245, 248, 252, .9), transparent 70%), linear-gradient(180deg, transparent 75%, var(--fundo)); }
.hero__conteudo { position: relative; z-index: 2; max-width: 620px; }
.selo { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 7px 14px; border-radius: 999px; font: 500 12px var(--display);
  letter-spacing: .12em; text-transform: uppercase; color: var(--marca); background: rgba(252, 192, 28, .07); border: 1px solid rgba(252, 192, 28, .2); }
.selo__ponto { width: 7px; height: 7px; border-radius: 999px; background: var(--acento); box-shadow: 0 0 0 4px rgba(252, 192, 28, .15); }
.hero__titulo { font-size: clamp(42px, 5.6vw, 78px); line-height: 1.04; font-weight: 600; letter-spacing: -.035em; }
.hero__sub { margin: 26px 0 36px; max-width: 30em; font-size: 20px; color: var(--suave); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__produto { position: relative; z-index: 2; margin: 0; perspective: 1600px; }
.inclinado { transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg); transform-style: preserve-3d; transition: transform 1.2s var(--mola); }
.hero__produto:hover .inclinado { transform: rotateY(-6deg) rotateX(3deg); }

/* ---------- seções ---------- */
section { position: relative; }
.titulo-secao { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.08; font-weight: 600; letter-spacing: -.03em; max-width: 18ch; }
.problema, .recursos, .tribunais, .precos, .faq, .final { padding: clamp(96px, 14vh, 160px) max(24px, 5vw); max-width: 1320px; margin: 0 auto; }

.problema { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.dores { list-style: none; margin: 0; padding: 0; }
.dor { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 28px 0; border-top: 1px solid var(--linha); }
.dor:last-child { border-bottom: 1px solid var(--linha); }
.dor__n { font: 500 15px var(--display); color: var(--acento); padding-top: 4px; }
.dor h3 { font-size: 24px; font-weight: 500; margin-bottom: 6px; }
.dor p { margin: 0; color: var(--suave); }

/* ciclo travado */
.ciclo { padding: 0 max(24px, 5vw); }
.ciclo__fixo { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; max-width: 1400px; margin: 0 auto; }
.fases { list-style: none; margin: 36px 0 0; padding: 0; }
.fase { padding: 16px 0 16px 22px; border-left: 2px solid var(--linha); transition: border-color .5s var(--mola), opacity .5s var(--mola); opacity: .38; cursor: default; }
.fase b { display: block; font: 600 21px var(--display); }
.fase span { display: block; color: var(--suave); font-size: 16px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--mola), opacity .6s var(--mola), margin .6s var(--mola); }
.fase.ativa { opacity: 1; border-color: var(--acento); }
.fase.ativa span { max-height: 80px; opacity: 1; margin-top: 6px; }
.ciclo__barra { margin-top: 28px; height: 3px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.ciclo__barra i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--marca), var(--acento)); }
.ciclo__img { transition: opacity .45s var(--mola), transform .7s var(--mola); }
.ciclo__img.trocando { opacity: 0; transform: scale(.985); }

/* bento */
.bento { margin-top: 56px; display: grid; gap: 18px; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(150px, auto); }
.cel--a { grid-column: span 5; grid-row: span 2; }
.cel--b { grid-column: span 7; grid-row: span 2; }
.cel--c { grid-column: span 7; grid-row: span 2; }
.cel--d { grid-column: span 5; }
.cel--e { grid-column: span 5; }
.cel--g { grid-column: span 5; grid-row: span 2; }
.cel--f { grid-column: span 7; grid-row: span 2; }
.cel--h { grid-column: span 7; grid-row: span 2; }
.cel--i { grid-column: span 5; grid-row: span 2; }
.cel .bezel { height: 100%; }
.cel .bezel__nucleo { height: 100%; }
.cel__corpo { padding: 30px; display: flex; flex-direction: column; gap: 12px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(252, 192, 28, .12), transparent 55%), var(--fundo-2); }
.cel__corpo h3 { font-size: 23px; font-weight: 500; }
.cel__corpo p { margin: 0; color: var(--suave); }
.cel__corpo--img { padding: 30px 30px 0; }
.cel__corpo--img img { margin-top: auto; border-radius: 14px 14px 0 0; border: 1px solid var(--linha); border-bottom: 0; transform: translateY(8px); transition: transform 1s var(--mola); }
.cel:hover .cel__corpo--img img { transform: translateY(0) scale(1.01); }
.cel__corpo--escuro { background: radial-gradient(90% 120% at 0% 100%, rgba(252, 192, 28, .22), transparent 60%), linear-gradient(160deg, #f0f8ff, #e3f0fb); }
.fontes { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fontes li, .perfis span { padding: 6px 12px; border-radius: 999px; font-size: 14px; border: 1px solid var(--linha-forte); background: #fff; }
.perfis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.fluxo { position: relative; margin-top: auto; height: 120px; }
.fluxo span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; overflow: hidden; background: var(--linha); }
.fluxo span::after { content: ""; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--acento), transparent); animation: corre 2.8s var(--mola) infinite; }
.fluxo span:nth-child(1) { top: 20px; } .fluxo span:nth-child(2) { top: 58px; } .fluxo span:nth-child(3) { top: 96px; }
.fluxo span:nth-child(2)::after { animation-delay: .6s; } .fluxo span:nth-child(3)::after { animation-delay: 1.2s; }
@keyframes corre { from { transform: translateX(-110%); } to { transform: translateX(380%); } }
.ponte { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: auto; font: 500 15px var(--display); }
.ponte i { position: relative; height: 2px; background: linear-gradient(90deg, var(--marca), var(--acento)); border-radius: 2px; overflow: hidden; }
.ponte i::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 999px; background: #fff; border: 2px solid var(--acento); box-shadow: 0 0 10px rgba(252, 192, 28, .5); animation: viaja 2.4s var(--mola) infinite; }
@keyframes viaja { from { left: 0; } to { left: calc(100% - 8px); } }

/* tribunais */
.tribunais { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.tribunais__texto p { color: var(--suave); font-size: 19px; margin: 18px 0 0; max-width: 34em; }
.orbita { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin: 0 auto; }
.orbita__centro { position: absolute; inset: 37%; display: grid; place-items: center; border-radius: 999px; font: 600 16px var(--display); text-align: center;
  color: var(--marca); background: radial-gradient(circle, #fff, #fff3cc 70%); border: 1px solid rgba(252, 192, 28, .3); box-shadow: 0 20px 60px -10px rgba(252, 192, 28, .35); }
.orbita__anel { position: absolute; inset: 0; border-radius: 999px; border: 1px dashed var(--linha-forte); animation: gira 60s linear infinite; }
.orbita__anel span { position: absolute; inset: 0; transform: rotate(calc(var(--i) * 360deg / var(--n, 10))); pointer-events: none; }
.orbita__anel i { position: absolute; left: 50%; top: 0; font-style: normal; transform: translate(-50%, -50%) rotate(calc(var(--i) * -360deg / var(--n, 10))); }
.orbita__anel b { display: block; padding: 5px 10px; border-radius: 999px; font: 500 12px var(--display); white-space: nowrap; color: var(--apagado);
  background: #fff; border: 1px solid var(--linha-forte); animation: gira 60s linear infinite reverse; }
/* segundo anel, por dentro, girando ao contrário (32 Tribunais não cabem num anel só) */
.orbita__anel--dentro { inset: 17%; animation: gira 80s linear infinite reverse; }
.orbita__anel--dentro b { animation: gira 80s linear infinite; }
.orbita__centro { align-content: center; }
.orbita__centro small { display: block; margin-top: 2px; font: 500 12px var(--corpo); color: var(--suave); }
/* no celular, a lista simples substitui a órbita */
.tribunais__siglas { display: none; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 22px 0 0; }
.tribunais__siglas li { padding: 4px 10px; border-radius: 999px; font: 500 13px var(--display); color: #fff; background: var(--acento); }
.orbita__anel span.on b { color: #fff; background: var(--acento); border-color: transparent; box-shadow: 0 8px 24px -6px rgba(252, 192, 28, .6); }
@keyframes gira { to { transform: rotate(360deg); } }

/* preços */
.precos { max-width: 980px; text-align: center; }
.precos .titulo-secao { margin: 0 auto; }
.precos__sub, .precos__nota { color: var(--suave); margin: 18px auto 0; }
.precos .bezel { margin-top: 44px; text-align: left; }
.tabela-precos { padding: 10px 0; }
.linha { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 30px; border-top: 1px solid var(--linha); transition: background .4s var(--mola); }
.linha:first-child { border-top: 0; }
.linha:hover { background: rgba(252, 192, 28, .035); }
.linha span { color: var(--texto); }
.linha b { font: 600 22px var(--display); white-space: nowrap; }
.linha small { font: 400 14px var(--corpo); color: var(--suave); margin: 0 4px; }
.linha.destaque { background: linear-gradient(90deg, rgba(252, 192, 28, .08), transparent); }
.consulta { color: var(--acento); font-size: 18px !important; }


/* perguntas frequentes */
.faq { max-width: 980px; }
.faq__lista { margin-top: 44px; display: grid; gap: 12px; }
.pergunta { border-radius: 22px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 14px 40px -26px rgba(25, 25, 53, .35), 0 0 0 1px var(--linha); transition: box-shadow .5s var(--mola); }
.pergunta[open] { box-shadow: 0 20px 50px -24px rgba(252, 192, 28, .35), 0 0 0 1px rgba(252, 192, 28, .25); }
.pergunta summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; cursor: pointer; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta h3 { font-size: 20px; font-weight: 500; }
.pergunta__sinal { position: relative; flex: none; width: 34px; height: 34px; border-radius: 999px; background: rgba(252, 192, 28, .08); }
.pergunta__sinal::before, .pergunta__sinal::after { content: ""; position: absolute; left: 11px; right: 11px; top: 16px; height: 2px; border-radius: 2px; background: var(--acento); transition: transform .5s var(--mola); }
.pergunta__sinal::after { transform: rotate(90deg); }
.pergunta[open] .pergunta__sinal::after { transform: rotate(0deg); }
.pergunta p { margin: 0; padding: 0 26px 24px; color: var(--suave); max-width: 52em; }
.faq__atualizado { margin-top: 22px; color: var(--apagado); font-size: 15px; }

/* final */
.final { text-align: center; padding-bottom: 180px; }
.final__titulo { font-size: clamp(40px, 6vw, 86px); line-height: 1.04; font-weight: 600; letter-spacing: -.035em; max-width: 14ch; margin: 0 auto; }
.final p { color: var(--suave); font-size: 20px; margin: 22px auto 36px; max-width: 32em; }
.final .hero__ctas { justify-content: center; }

/* Rodapé enxuto: selo de site à esquerda, informações no centro, selo de e-mail à direita */
.rodape { border-top: 1px solid var(--linha); padding: 22px max(24px, 5vw) 104px; color: var(--apagado); font-size: 14px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; max-width: 1100px; margin: 0 auto; }
.rodape__info { display: grid; gap: 2px; justify-items: center; text-align: center; }
.rodape__info p { margin: 0; line-height: 1.45; }
.rodape__info a { white-space: nowrap; }
.rodape__marca { margin-bottom: 4px; }
.rodape__marca { display: flex; align-items: center; gap: 10px; color: var(--texto); font: 600 16px var(--display); }
.rodape__marca b { color: var(--acento); font-weight: 600; }
.rodape a:hover { color: var(--texto); }

/* ---------- botões flutuantes ---------- */
.flutuante-whats { position: fixed; right: 22px; bottom: 22px; z-index: 45; width: 60px; height: 60px; border-radius: 999px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(180deg, #34d399, #059669); box-shadow: 0 12px 40px -6px rgba(16, 185, 129, .6), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .6s var(--mola); }
.flutuante-whats::before { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid rgba(52, 211, 153, .5); animation: pulso 2.6s var(--saida) infinite; }
@keyframes pulso { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.doca { position: fixed; left: 50%; bottom: 22px; z-index: 44; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .8s var(--mola), opacity .8s var(--mola); box-shadow: 0 16px 50px -12px rgba(25, 25, 53, .3), 0 0 0 1px var(--linha); }
.doca.visivel { transform: translate(-50%, 0); opacity: 1; }
.doca__btn { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 20px; border-radius: 999px; font: 600 15px var(--display);
  color: #fff; background: linear-gradient(180deg, #ffd24d, #f2b300); white-space: nowrap; }
.doca__btn .btn__icone { width: 32px; height: 32px; }
.doca__link { padding: 10px 18px; font: 500 15px var(--display); color: var(--suave); white-space: nowrap; }
.doca__link:hover { color: var(--texto); }

/* revelação (estado inicial quando há JS) */
.js .revela { opacity: 0; transform: translateY(40px); filter: blur(8px); }

/* ---------- celular ---------- */
@media (max-width: 960px) {
  .nav { gap: 12px; left: 16px; right: 16px; transform: none; justify-content: space-between; }
  .nav__links, .nav__entrar { display: none; }
  .nav__menu { display: block; }
  .hero { grid-template-columns: 1fr; padding: 120px 20px 64px; min-height: auto; }
  .hero__titulo { font-size: clamp(38px, 10vw, 52px); }
  .hero__sub { font-size: 18px; }
  .inclinado, .hero__produto:hover .inclinado { transform: none; }
  .problema, .tribunais { grid-template-columns: 1fr; gap: 40px; }
  .ciclo__fixo { grid-template-columns: 1fr; gap: 28px; padding: 96px 0; min-height: auto; }
  .fase span { max-height: none; opacity: 1; margin-top: 6px; }
  .fase { opacity: 1; }
  .ciclo__barra { display: none; }
  .bento { grid-template-columns: 1fr; }
  .cel--a, .cel--b, .cel--c, .cel--d, .cel--e, .cel--f, .cel--g, .cel--h, .cel--i { grid-column: auto; grid-row: auto; }
  .linha { padding: 16px 18px; flex-direction: column; gap: 4px; }
  .pergunta summary { padding: 18px 20px; } .pergunta p { padding: 0 20px 20px; } .pergunta h3 { font-size: 18px; }
  .orbita { display: none; }   /* 32 siglas em volta não cabem na tela estreita */
  .tribunais__siglas { display: flex; }
  .doca__link { display: none; }
  .flutuante-whats { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .doca { bottom: 16px; left: 16px; transform: translate(0, 140%); }
  .doca.visivel { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revela { opacity: 1; transform: none; filter: none; }
  .intro { display: none; }
}

/* ---------- vídeo de apresentação (botões "Ver demonstração") ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* largura limitada também pela altura da tela (vídeo 16:9 + barra de 52 px + margens), para nunca estourar */
.video-modal { --barra: 52px; width: min(1120px, calc(100vw - 32px), calc((100vh - 32px - var(--barra)) * 16 / 9));
  max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--raio);
  background: #191935; color: #f5f8fc; box-shadow: 0 40px 120px -30px rgba(10, 10, 30, .7); overflow: auto; }
.video-modal::backdrop { background: rgba(14, 14, 34, .72); backdrop-filter: blur(6px); }
.video-modal[open] { animation: video-entra .45s var(--saida); }
@keyframes video-entra { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.video-modal__fechar { position: absolute; top: 12px; right: 12px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; cursor: pointer; }
.video-modal__fechar:hover { background: rgba(255, 255, 255, .26); }
.video-modal__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
@supports (height: 100dvh) {   /* celular: descontar as barras do navegador */
  .video-modal { width: min(1120px, calc(100vw - 32px), calc((100dvh - 32px - var(--barra)) * 16 / 9)); max-height: calc(100dvh - 32px); }
}
.video-modal__barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: var(--barra); padding: 0 22px; font-size: 15px; color: #a7b4c7; }
.video-modal__pular, .video-modal__rever { border: 0; background: none; color: #fcc01c; font: 600 15px var(--display); cursor: pointer; padding: 6px 0; }
.video-modal__pular:hover, .video-modal__rever:hover { color: #fff; }
.video-modal__cta { display: grid; grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: center; padding: 56px 56px 48px; }
.video-modal__cta[hidden], .video-modal__palco[hidden] { display: none; }
.video-modal__cta .selo { color: #a7b4c7; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); }
.video-modal__cta h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; margin: 18px 0 14px; color: #fff; }
.video-modal__cta em { background: linear-gradient(100deg, #fcc01c, #fcc01c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.video-modal__cta p { color: #c9d1de; font-size: 18px; margin: 0 0 26px; }
.video-modal__cta .btn--primario { background: linear-gradient(180deg, #22c55e, #15803d); box-shadow: 0 12px 36px -10px rgba(21, 128, 61, .6); }
.video-modal__rever { margin-top: 18px; }
.video-modal__qr { margin: 0; text-align: center; }
.video-modal__qr img { width: 100%; max-width: 260px; margin: 0 auto; padding: 18px; background: #fff; border-radius: 22px; }
.video-modal__qr figcaption { margin-top: 12px; color: #a7b4c7; font-size: 15px; }
@media (max-height: 680px) {   /* notebooks de tela baixa: contato mais compacto */
  .video-modal__cta { padding: 40px 44px 30px; gap: 36px; }
  .video-modal__cta h2 { font-size: clamp(28px, 3.6vw, 42px); margin: 12px 0 10px; }
  .video-modal__cta p { font-size: 16px; margin-bottom: 18px; }
  .video-modal__qr img { max-width: 200px; padding: 14px; }
  .video-modal__rever { margin-top: 10px; }
}
@media (max-height: 520px) {
  .video-modal__cta { grid-template-columns: minmax(0, 1fr); padding: 52px 24px 20px; }
  .video-modal__cta .selo { display: none; }
  .video-modal__qr { display: none; }   /* celular deitado: o botão do WhatsApp já abre a conversa */
  .video-modal__cta h2 { margin-top: 0; }
  .video-modal { --barra: 42px; width: min(calc(100vw - 16px), calc((100dvh - 16px - var(--barra)) * 16 / 9)); max-height: calc(100dvh - 16px); }
  .video-modal__barra { font-size: 13px; padding: 0 14px; }
}
@media (max-width: 760px) {
  .video-modal { --barra: 46px; width: min(calc(100vw - 16px), calc((100dvh - 16px - var(--barra)) * 16 / 9)); max-height: calc(100dvh - 16px); border-radius: 20px; }
  .video-modal__barra { padding: 0 16px; font-size: 14px; }
  .video-modal__cta { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 66px 20px 26px; }
  .video-modal__cta .selo { font-size: 11px; }
  .video-modal__cta h2 { margin-top: 14px; }
  .video-modal__qr { display: none; }   /* no celular, o botão do WhatsApp já abre a conversa */
  .video-modal__cta .hero__ctas { flex-direction: column; align-items: stretch; }
  .video-modal__cta .btn { justify-content: center; width: 100%; max-width: 100%; }
}

/* selo oficial TOP 100% (NIC.br), com link para top.nic.br */
.rodape__selo { display: block; line-height: 0; opacity: .9; transition: opacity .3s; }
.rodape__selo:hover { opacity: 1; }
.rodape__selo img { width: 56px; height: auto; }
@media (max-width: 720px) {
  .rodape { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .rodape__info { grid-column: 1 / -1; grid-row: 1; }
  .rodape__selo:first-of-type { justify-self: end; }
}


/* ================= MACGOV: ajustes de marca e blocos próprios ================= */
@font-face { font-family: Ubuntu; font-weight: 400; font-display: swap; src: url(../assets/fonts/ubuntu-400-normal-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-weight: 500; font-display: swap; src: url(../assets/fonts/ubuntu-500-normal-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-weight: 700; font-display: swap; src: url(../assets/fonts/ubuntu-700-normal-latin.woff2) format("woff2"); }
h1, h2, h3, .hero__titulo, .titulo-secao, .final__titulo { font-weight: 700; }
/* destaque das palavras: marca-texto âmbar (âmbar como cor de letra não tem contraste no fundo claro) */
em, em .palavra { font-style: normal; color: var(--texto); -webkit-background-clip: border-box; background-clip: border-box;
  background: linear-gradient(transparent 60%, rgba(252, 192, 28, .75) 60%, rgba(252, 192, 28, .75) 90%, transparent 90%); }
.btn--primario, .doca__btn { color: #191935; }
.btn--primario .btn__icone, .doca__btn .btn__icone { background: rgba(25, 25, 53, .12); }
.btn--primario { box-shadow: 0 14px 36px -12px rgba(242, 179, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn--primario:hover { box-shadow: 0 20px 50px -12px rgba(242, 179, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .5); }
.nav__entrar:hover { background: #2a2a5c; }
.nav__marca img { height: 30px; width: auto; }
.intro__marca img { width: min(340px, 70vw); height: auto; }
.selo { color: var(--texto); }
.selo__ponto { background: #fcc01c; box-shadow: 0 0 0 4px rgba(252, 192, 28, .25); }
.dor__n { color: var(--acento); font-weight: 700; }
.fase.ativa { border-color: #fcc01c; }
.ciclo__barra i { background: linear-gradient(90deg, #191935, #fcc01c); }
.pergunta__sinal::before, .pergunta__sinal::after { background: var(--texto); }
.pergunta__sinal { background: rgba(252, 192, 28, .25); }
:focus-visible { outline-color: #191935; }
.bezel__nucleo video { display: block; width: 100%; height: auto; aspect-ratio: 1152 / 720; object-fit: cover; background: #fff; }
.ciclo__video { transition: opacity .45s var(--mola), transform .7s var(--mola); }
.ciclo__video.trocando { opacity: 0; transform: scale(.985); }
/* janela de navegador sobre as telas reais */
.janela-barra { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; background: #eef0f6; border-bottom: 1px solid var(--linha); }
.janela-barra i { width: 9px; height: 9px; border-radius: 9px; background: #d3d7e3; }
.janela-barra span { margin-left: 10px; height: 16px; width: 200px; max-width: 45%; border-radius: 8px; background: #fff; font: 400 10px/16px var(--corpo); color: #8a93a8; padding-left: 8px; }
/* células escuras do bento: marinho da marca */
.cel__corpo--escuro { background: radial-gradient(90% 120% at 100% 0%, rgba(252, 192, 28, .22), transparent 55%), linear-gradient(160deg, #22224a, #191935); color: #fff; }
.cel__corpo--escuro p { color: #c9d1de; }
.cel__corpo--escuro .perfis span { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.ia-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ia-chips span { padding: 6px 12px; border-radius: 999px; font: 500 13px var(--display); color: #191935; background: #fcc01c; }
.cel__corpo--video { padding: 30px 30px 0; }
.cel__corpo--video .tela { margin-top: auto; border-radius: 14px 14px 0 0; overflow: hidden; border: 1px solid var(--linha); border-bottom: 0; transform: translateY(8px); transition: transform 1s var(--mola); }
.cel:hover .cel__corpo--video .tela { transform: translateY(0) scale(1.01); }
.cel__corpo--video video { display: block; width: 100%; height: auto; }

/* clientes: faixa de logos rolando */
.clientes { padding: 20px 0 80px; text-align: center; }
.clientes__rotulo { margin: 0 0 26px; font: 500 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.clientes__faixa { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.clientes__trilho { display: flex; gap: 18px; width: max-content; margin: 0; padding: 10px 0; animation: desliza 92s linear infinite; }
.clientes__faixa:hover .clientes__trilho { animation-play-state: paused; }
.clientes__trilho li { list-style: none; flex: none; padding: 6px; border-radius: 20px; background: rgba(255, 255, 255, .7); border: 1px solid #fff; box-shadow: 0 12px 30px -20px rgba(25, 25, 53, .35), 0 0 0 1px var(--linha); }
.clientes__trilho img { width: 190px; height: 75px; object-fit: contain; border-radius: 14px; background: #fff; }
@keyframes desliza { to { transform: translateX(calc(-50% - 9px)); } }

/* quem faz */
.quem { padding: clamp(96px, 14vh, 160px) max(24px, 5vw); max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.quem__texto p { color: var(--suave); font-size: 19px; margin: 18px 0 0; max-width: 32em; }
.pessoas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pessoa .bezel, .pessoa .bezel__nucleo { height: 100%; }
.pessoa__corpo { display: flex; flex-direction: column; height: 100%; padding: 0 26px 26px; color: #fff;
  background: radial-gradient(90% 60% at 50% 0%, rgba(252, 192, 28, .3), transparent 65%), linear-gradient(180deg, #22224a, #191935); }
.pessoa__foto { height: 290px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.pessoa__foto img { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: auto; max-width: none; }
.pessoa__foto--mc img { height: 620px; }
.pessoa__foto--rf img { height: 330px; }
.pessoa h3 { font-size: 22px; margin-top: 4px; }
.pessoa ul { list-style: none; padding: 0; margin: 10px 0 16px; color: #c9d1de; font-size: 15px; line-height: 1.5; }
.pessoa ul li { padding: 3px 0 3px 16px; position: relative; }
.pessoa ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 6px; background: #fcc01c; }
.pessoa__cargo { margin-top: auto; font: 500 15px var(--display); color: #fcc01c; }

/* como começar */
.comecar { padding: clamp(96px, 14vh, 160px) max(24px, 5vw); max-width: 1100px; margin: 0 auto; text-align: center; }
.comecar .titulo-secao { margin: 0 auto; }
.passos { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; list-style: none; padding: 0; }
.passos .bezel, .passos .bezel__nucleo { height: 100%; }
.passo__corpo { padding: 30px; }
.passo__n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; font: 700 16px var(--display); background: #fcc01c; color: #191935; }
.passo h3 { font-size: 22px; margin: 18px 0 8px; }
.passo p { margin: 0; color: var(--suave); }

/* contato com formulário */
.contato { padding: 40px max(24px, 5vw) clamp(96px, 14vh, 160px); max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.contato__texto > p { color: var(--suave); font-size: 18px; margin: 18px 0 0; }
.contato__lista { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; font: 500 17px var(--display); }
.contato__lista a:hover { text-decoration: underline; }
.contato__qr { margin-top: 28px; display: flex; align-items: center; gap: 18px; color: var(--suave); font-size: 15px; }
.contato__qr img { width: 124px; height: 124px; padding: 8px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--linha); }
.form { padding: 30px; display: grid; gap: 14px; }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 6px; font: 500 14px var(--display); color: var(--texto); }
.form input, .form select, .form textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linha-forte); background: #fff; font: 400 16px var(--corpo); color: var(--texto);
  transition: border-color .3s var(--mola), box-shadow .3s var(--mola); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: #191935; box-shadow: 0 0 0 4px rgba(252, 192, 28, .35); }
.form .form__aceite { display: flex; align-items: flex-start; gap: 10px; font: 400 14px var(--corpo); color: var(--suave); }
.form__aceite input { width: auto; margin-top: 3px; }
.form__aceite a { text-decoration: underline; }
.form__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-content: space-between; border: 0; cursor: pointer; }
.form__status { margin: 0; font-size: 15px; min-height: 1.4em; }
.form__status.ok { color: #15803d; } .form__status.erro { color: #b91c1c; }

.rodape__marca img { height: 26px; width: auto; }

@media (max-width: 960px) {
  .quem, .contato { grid-template-columns: 1fr; gap: 40px; }
  .passos { grid-template-columns: 1fr; }
  .form__linha { grid-template-columns: 1fr; }
  .clientes__trilho img { width: 150px; height: 60px; }
}
@media (max-width: 620px) { .pessoas { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .clientes__trilho { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .clientes__trilho li[aria-hidden="true"] { display: none; } }

/* topo: vitrine com as telas da plataforma alternando */
.vitrine { position: relative; aspect-ratio: 1152 / 720; background: #fff; overflow: hidden; }
.vitrine__tela { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04);
  transition: opacity .9s var(--mola), transform 5.5s linear; }
.vitrine__tela.ativa { opacity: 1; transform: scale(1); }
.vitrine__rotulo { position: absolute; left: 14px; bottom: 14px; padding: 7px 14px; border-radius: 999px; font: 500 13px var(--display);
  color: #191935; background: #fcc01c; box-shadow: 0 8px 24px -8px rgba(25, 25, 53, .45); transition: opacity .4s var(--mola), transform .5s var(--mola); }
.vitrine__rotulo.troca { opacity: 0; transform: translateY(8px); }
.vitrine__pontos { display: flex; justify-content: center; gap: 8px; margin-top: 22px; position: relative; z-index: 2; }
.vitrine__pontos button { width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.vitrine__pontos i { display: block; width: 8px; height: 8px; border-radius: 8px; background: rgba(25, 25, 53, .22); transition: width .5s var(--mola), background .5s var(--mola); }
.vitrine__pontos .ativo i { width: 26px; background: #191935; }
.vitrine__pontos button:hover i { background: rgba(25, 25, 53, .5); }