/* ==========================================================================
   AUDITEC — folha única

   Mesma base do site da DGA (HTML + CSS + JS, sem build). Identidade:
     azul da marca   #002385  — títulos, textos e superfícies principais
     azul profundo   #001454  — abertura, serviços, confiança e rodapé
     âmbar           #E0AB24  — apoio: cunha, botões e ícones sobre o azul
     claro           #F0F3FA  — fundo geral

   Regra do âmbar: sobre o claro ele dá 1,89:1. Nunca é texto nem ícone em
   fundo claro — ali ele só aparece como forma (a cunha, a régua dos degraus).
   Sobre o azul ele dá 6,35:1, e o azul sobre ele, o mesmo.

   Movimento: a abertura tem o seu momento próprio no carregamento; todas as
   outras seções entram pela revelação do bloco 3, ao rolar.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --azul:        #002385;
  --azul-fundo:  #001454;
  --azul-alto:   #0a2470;   /* célula em destaque sobre o azul profundo */
  --ambar:       #E0AB24;
  --ambar-vivo:  #ebbd45;   /* hover do âmbar */
  --claro:       #F0F3FA;
  --branco:      #ffffff;

  /* papéis — registro claro (padrão) */
  --fundo:       var(--claro);
  --texto:       var(--azul);
  --texto-2:     #3d4a78;   /* 7,7:1 sobre o claro */
  --fio:         rgba(0,35,133,.14);

  /* tipo: Archivo variável; a largura carrega a voz da marca */
  --f: 'Archivo', 'Arial Nova', Arial, sans-serif;
  --largo: 125%;   /* títulos: o "auditec" do logotipo é largo */
  --meio:  112%;

  /* medida */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --secao:  clamp(5rem, 9vw, 8.5rem);
  --raio:   20px;
  --rampa:  clamp(56px, 9vw, 150px);   /* altura do corte diagonal */
}

/* registro escuro */
.escuro{
  --fundo:   var(--azul-fundo);
  --texto:   var(--claro);
  --texto-2: #a9b4d6;   /* 8,3:1 sobre o azul profundo */
  --fio:     rgba(240,243,250,.14);
  background:var(--fundo);
  color:var(--texto);
}

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

/* Sem overflow-x:hidden no body, de propósito: ele força overflow-y:auto, o
   body vira um contêiner de rolagem e o IntersectionObserver deixa de ver o
   que está abaixo da dobra. */
body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--f);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; font-weight:700; }
p, figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ambar);
  outline-offset:3px;
  border-radius:4px;
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ width:1em; height:1em; fill:currentColor; flex:none; vertical-align:-.125em; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.pular{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--ambar); color:var(--azul-fundo);
  padding:.75rem 1.25rem; font-weight:600; text-decoration:none;
  transition:top .2s;
}
.pular:focus{ top:1rem; }

/* ---------- 3. Revelação por cortina ------------------------------------- */
/* Em todas as seções. Títulos e textos sobem; as fotos de público e o fecho
   abrem por cortina lateral. O recorte vive no @keyframes:
   em repouso com clip-path o elemento teria área zero e o observer nunca o
   veria. fill-mode `backwards`, para nada ficar preso invisível. */
.js-anim [data-reveal]{ opacity:0; }
.js-anim [data-reveal].is-revealed{
  opacity:1;
  animation-duration:.8s;
  animation-timing-function:cubic-bezier(.33,1,.68,1);
  animation-fill-mode:backwards;
  animation-delay:var(--reveal-delay,0ms);
}
.js-anim [data-reveal="left"].is-revealed{ animation-name:revela-esquerda; }
.js-anim [data-reveal="right"].is-revealed{ animation-name:revela-direita; }
.js-anim [data-reveal="up"].is-revealed{ animation-name:revela-baixo; }

@keyframes revela-esquerda{
  from{ opacity:0; clip-path:inset(0 100% 0 0 round var(--raio)); }
  to{ opacity:1; clip-path:inset(0 0 0 0 round var(--raio)); }
}
@keyframes revela-direita{
  from{ opacity:0; clip-path:inset(0 0 0 100% round var(--raio)); }
  to{ opacity:1; clip-path:inset(0 0 0 0 round var(--raio)); }
}
@keyframes revela-baixo{
  from{ opacity:0; transform:translateY(1.5rem); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js-anim [data-reveal]{ opacity:1; animation:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- 4. Tipo e peças ---------------------------------------------- */
.titulo{
  font-stretch:var(--largo);
  font-weight:700;
  font-size:clamp(1.75rem, 3vw, 2.7rem);
  line-height:1.1;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.titulo-item{
  font-stretch:var(--meio);
  font-weight:650;
  font-size:1.2rem;
  line-height:1.25;
}
.lide{
  font-size:clamp(1.2rem, 1.7vw, 1.4rem);
  line-height:1.5;
  font-weight:500;
  color:var(--texto);
}

.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px;
  padding:.85rem 1.6rem;
  font-family:var(--f); font-weight:650; font-size:1rem; line-height:1.1;
  font-stretch:var(--meio);
  text-decoration:none;
  border:1.5px solid transparent;
  border-radius:999px;
  transition:background-color .2s, color .2s, border-color .2s;
}
.botao--grande{ min-height:56px; padding-inline:2rem; font-size:1.0625rem; }
.botao--largo{ width:100%; }

/* âmbar só sobre o azul: o texto é o azul profundo, 8,2:1 */
.botao--ambar{ background:var(--ambar); color:var(--azul-fundo); }
.botao--ambar:hover{ background:var(--ambar-vivo); }

.botao--azul{ background:var(--azul); color:var(--claro); }
.botao--azul:hover{ background:var(--azul-fundo); }

.botao--contorno-claro{ border-color:rgba(240,243,250,.55); color:var(--claro); }
.botao--contorno-claro:hover{ border-color:var(--claro); background:rgba(240,243,250,.08); }

/* ---------- 5. Cabeçalho ------------------------------------------------- */
/* Fixo e transparente sobre a abertura escura. Ao rolar vira claro e o
   logotipo troca de versão por opacidade. */
.cabecalho{
  position:fixed; top:0; left:0; right:0; z-index:90;
  color:var(--claro);
  transition:background-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.cabecalho.is-rolado{
  background:var(--claro);
  color:var(--azul);
  box-shadow:0 1px 0 rgba(0,35,133,.1);
}

.cabecalho__faixa{
  max-width:1320px; margin-inline:auto;
  padding:1.1rem var(--gutter);
  display:flex; align-items:center; gap:clamp(1rem,3vw,3rem);
  transition:padding .3s ease;
}
.cabecalho.is-rolado .cabecalho__faixa{ padding-block:.75rem; }

.marca{ position:relative; flex:none; display:block; line-height:0; }
.marca img{ height:clamp(34px, 3.4vw, 42px); width:auto; transition:opacity .3s ease; }
.marca__cor{ position:absolute; left:0; top:0; opacity:0; }
.cabecalho.is-rolado .marca__claro{ opacity:0; }
.cabecalho.is-rolado .marca__cor{ opacity:1; }

.nav{ margin-inline-start:auto; }
.nav__lista{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.25rem); }
.nav__link{
  position:relative;
  display:inline-block;
  padding:.5rem 0;
  font-size:.975rem; font-weight:500;
  text-decoration:none;
  opacity:.86;
  transition:opacity .2s;
}
/* o fio âmbar é decorativo e acompanha o texto, que tem o contraste */
.nav__link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.2rem;
  height:2px; background:var(--ambar);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.76,0,.24,1);
}
.nav__link:hover{ opacity:1; }
.nav__link:hover::after{ transform:scaleX(1); }

.cabecalho__acao{ flex:none; min-height:44px; padding:.7rem 1.3rem; font-size:.95rem; }
/* no cabeçalho claro o âmbar perderia o contorno: vira o azul da marca */
.cabecalho.is-rolado .cabecalho__acao{ background:var(--azul); color:var(--claro); }
.cabecalho.is-rolado .cabecalho__acao:hover{ background:var(--azul-fundo); }

.abrir-menu{ display:none; }

/* ---------- 6. Menu móvel ------------------------------------------------ */
.menu-movel{
  position:fixed; inset:0; z-index:80;
  background:var(--azul-fundo);
  color:var(--claro);
  padding:6.5rem var(--gutter) 3rem;
  overflow-y:auto;
}
@media (prefers-reduced-motion:no-preference){
  .menu-movel{ opacity:0; transition:opacity .28s ease; }
  .menu-movel.is-aberto{ opacity:1; }
  .menu-movel__nav > ul > li,
  .menu-movel__rodape{
    opacity:0; transform:translateY(.8rem);
    transition:opacity .42s cubic-bezier(.33,1,.68,1), transform .42s cubic-bezier(.33,1,.68,1);
  }
  .menu-movel.is-aberto .menu-movel__nav > ul > li,
  .menu-movel.is-aberto .menu-movel__rodape{ opacity:1; transform:none; }
  .menu-movel.is-aberto .menu-movel__nav > ul > li:nth-child(1){ transition-delay:60ms; }
  .menu-movel.is-aberto .menu-movel__nav > ul > li:nth-child(2){ transition-delay:105ms; }
  .menu-movel.is-aberto .menu-movel__nav > ul > li:nth-child(3){ transition-delay:150ms; }
  .menu-movel.is-aberto .menu-movel__nav > ul > li:nth-child(4){ transition-delay:195ms; }
  .menu-movel.is-aberto .menu-movel__rodape{ transition-delay:240ms; }
}
.menu-movel__nav > ul{ border-top:1px solid rgba(240,243,250,.14); }
.menu-movel__nav > ul > li{ border-bottom:1px solid rgba(240,243,250,.14); }
.menu-movel__link{
  display:block; padding:1.1rem 0;
  font-stretch:var(--largo); font-weight:700; font-size:1.35rem;
  text-decoration:none;
}
.menu-movel__rodape{ margin-top:2rem; }

/* com o menu aberto o cabeçalho fica sobre o azul: volta à versão clara */
.cabecalho.is-menu{ background:transparent; color:var(--claro); box-shadow:none; }
.cabecalho.is-menu .marca__claro{ opacity:1; }
.cabecalho.is-menu .marca__cor{ opacity:0; }

/* ---------- 7. Caixa e seções -------------------------------------------- */
.caixa{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.secao{ padding-block:var(--secao); }
.secao--branca{ --fundo:var(--branco); background:var(--branco); }

/* cabeça de seção: título à esquerda, apoio à direita, alinhados pela base */
.cabeca{ display:grid; gap:1.25rem; margin-bottom:clamp(2.75rem,5vw,4.5rem); }
.cabeca__apoio{ max-width:34rem; color:var(--texto-2); font-size:1.0625rem; }
@media (min-width:960px){
  .cabeca{ grid-template-columns:1.5fr 1fr; gap:4rem; align-items:end; }
  .cabeca .titulo{ max-width:17em; }
}

/* ---------- 8. Abertura -------------------------------------------------- */
.abertura{
  position:relative;
  isolation:isolate;
  min-height:min(100svh, 980px);
  display:flex; align-items:center;
  padding:calc(7rem + 2vh) 0 calc(var(--rampa) + 4rem);
  background:var(--azul-fundo);
  color:var(--claro);
  overflow:hidden;
}
.abertura__foto{ position:absolute; inset:0; z-index:-2; }
.abertura__foto img{ width:100%; height:100%; object-fit:cover; object-position:60% 50%; }
/* o véu fecha à esquerda, onde está o texto, e abre à direita na colheita */
.abertura::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(0,20,84,.96) 0%, rgba(0,20,84,.9) 34%, rgba(0,20,84,.55) 62%, rgba(0,20,84,.2) 100%),
    linear-gradient(0deg, rgba(0,20,84,.55), rgba(0,20,84,0) 40%);
}

.abertura__conteudo{ position:relative; }
.abertura__titulo{
  font-stretch:var(--largo);
  font-weight:750;
  font-size:clamp(2.1rem, 4.6vw, 4.4rem);
  line-height:1.02;
  letter-spacing:-.025em;
}
.abertura__titulo .linha{ display:block; overflow:hidden; padding-bottom:.08em; }
.abertura__titulo .linha > span{ display:block; }

.abertura__texto{
  margin-top:1.75rem;
  max-width:31rem;
  font-size:clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height:1.6;
  color:#c9d2ec;
}
.abertura__acoes{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.5rem; }

/* o corte diagonal: papel por baixo da linha e a cunha âmbar dentro do vão */
.abertura__corte{
  position:absolute; left:0; bottom:-1px;
  width:100%; height:var(--rampa);
}
.corte__papel{ fill:var(--claro); }
.corte__cunha{ fill:var(--ambar); }

/* --- o momento da página: uma vez, no carregamento ----------------------- */
@media (prefers-reduced-motion:no-preference){
  .js-anim .abertura__titulo .linha > span{
    transform:translateY(105%);
    transition:transform .9s cubic-bezier(.2,.7,.25,1);
  }
  .js-anim .abertura__titulo .linha:nth-child(2) > span{ transition-delay:.08s; }
  .js-anim .abertura__texto,
  .js-anim .abertura__acoes{
    opacity:0; transform:translateY(.75rem);
    transition:opacity .7s ease .35s, transform .7s cubic-bezier(.2,.7,.25,1) .35s;
  }
  .js-anim .abertura__acoes{ transition-delay:.45s; }
  /* a cunha abre da ponta esquerda, como no símbolo */
  .js-anim .corte__cunha{
    transform:scaleX(0); transform-origin:0 100%;
    transition:transform 1.1s cubic-bezier(.65,0,.35,1) .25s;
  }
  .js-anim .abertura__foto img{ scale:1.06; transition:scale 2.4s cubic-bezier(.2,.7,.25,1); }

  .is-pronto .abertura__titulo .linha > span,
  .is-pronto .abertura__texto,
  .is-pronto .abertura__acoes{ opacity:1; transform:none; }
  .is-pronto .corte__cunha{ transform:none; }
  .is-pronto .abertura__foto img{ scale:1; }
}

/* ---------- 9. Sobre ----------------------------------------------------- */
.sobre{ display:grid; gap:2rem; }
.sobre__texto{ display:grid; gap:1.25rem; max-width:38rem; }
.sobre__texto p:not(.lide){ color:var(--texto-2); }
@media (min-width:960px){
  .sobre{ grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
  .sobre .titulo{ max-width:12em; }
}

/* ---------- 10. Diferenciais --------------------------------------------- */
.diferenciais{ display:grid; gap:2.5rem; }
.diferenciais li{ display:grid; gap:.75rem; align-content:start; }
.diferenciais p{ color:var(--texto-2); }
.selo{
  display:grid; place-items:center;
  width:3.5rem; height:3.5rem;
  margin-bottom:.5rem;
  border:1.5px solid var(--azul);
  border-radius:14px;
  font-size:1.35rem;
  color:var(--azul);
  transition:background-color .25s, border-color .25s;
}
/* Sob o ponteiro o selo se enche de âmbar. O desenho continua azul: âmbar
   puro sobre o branco daria 1,9:1 e o ícone sumiria; azul sobre âmbar dá 6,4:1. */
.diferenciais li:hover .selo{ background:var(--ambar); border-color:var(--ambar); }
@media (min-width:640px){ .diferenciais{ grid-template-columns:1fr 1fr; gap:3rem; } }
@media (min-width:1080px){
  .diferenciais{ grid-template-columns:repeat(4,1fr); gap:0; }
  .diferenciais li{ padding-inline:2rem; border-left:1px solid var(--fio); }
  .diferenciais li:first-child{ padding-left:0; border-left:0; }
}

/* ---------- 11. Serviços ------------------------------------------------- */
/* As células dividem fios de 1px: o gap da grade é o próprio fio, pintado
   pelo fundo da lista. */
.servicos{
  display:grid;
  gap:1px;
  background:var(--fio);
  border:1px solid var(--fio);
  border-radius:var(--raio);
  overflow:hidden;
}
.servico{
  display:grid; gap:.75rem; align-content:start;
  padding:clamp(1.75rem,3vw,2.5rem);
  background:var(--azul-fundo);
  transition:background-color .25s;
}
.servico:hover{ background:var(--azul-alto); }
.servico p{ color:var(--texto-2); max-width:30rem; }
.servico__ico{ font-size:1.75rem; color:var(--ambar); margin-bottom:.75rem; }

/* a última célula é o convite, em âmbar cheio */
.servico--convite{
  background:var(--ambar);
  color:var(--azul-fundo);
  align-content:center;
}
.servico--convite:hover{ background:var(--ambar); }
.servico--convite p{ color:var(--azul-fundo); }
.servico--convite .botao{ justify-self:start; margin-top:.75rem; }

@media (min-width:700px){ .servicos{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .servicos{ grid-template-columns:repeat(3,1fr); } }

/* ---------- 12. Para quem atendemos -------------------------------------- */
.publicos{ display:grid; gap:1.5rem; }
@media (min-width:900px){ .publicos{ grid-template-columns:1fr 1fr; } }

.publico{
  position:relative;
  min-height:clamp(26rem, 42vw, 36rem);
  display:flex; align-items:flex-end;
  border-radius:var(--raio);
  overflow:hidden;
  color:var(--claro);
  background:var(--azul-fundo);
}
/* ordem de empilhamento explícita: foto, véu, texto */
.publico img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
/* zoom lento da foto sob o ponteiro; o painel corta o excesso (overflow) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .publico img{ transition:scale .9s cubic-bezier(.2,.7,.25,1); }
  .publico:hover img{ scale:1.08; }
}
.publico::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(0,20,84,.97) 0%, rgba(0,20,84,.88) 38%, rgba(0,20,84,.15) 78%);
}
.publico__texto{
  position:relative; z-index:2;
  display:grid; gap:.75rem;
  padding:clamp(1.75rem,3.5vw,2.75rem);
  max-width:34rem;
}
.publico__ico{ font-size:2rem; color:var(--ambar); margin-bottom:.25rem; }
.publico__titulo{
  font-stretch:var(--largo);
  font-size:clamp(1.4rem, 2.2vw, 1.85rem);
  line-height:1.12;
  letter-spacing:-.01em;
}
.publico p{ color:#c9d2ec; }

/* ---------- 13. Como trabalhamos ----------------------------------------- */
.degraus{ display:grid; gap:2.5rem; counter-reset:none; }
.degrau{ display:grid; gap:.75rem; align-content:start; }
.degrau p{ color:var(--texto-2); }
.degrau__num{
  font-stretch:var(--largo);
  font-weight:800;
  font-size:clamp(3rem, 5vw, 4.5rem);
  line-height:1;
  color:var(--azul);
  padding-bottom:1rem;
  margin-bottom:.5rem;
  border-bottom:3px solid var(--ambar);
}
@media (min-width:640px){ .degraus{ grid-template-columns:1fr 1fr; gap:3rem 2.5rem; } }
/* no desktop os passos sobem como degraus, da esquerda para a direita */
@media (min-width:1080px){
  .degraus{ grid-template-columns:repeat(4,1fr); gap:2rem; align-items:start; }
  .degrau:nth-child(1){ margin-top:9rem; }
  .degrau:nth-child(2){ margin-top:6rem; }
  .degrau:nth-child(3){ margin-top:3rem; }
}

/* ---------- 14. Confiança ------------------------------------------------ */
.confianca{ position:relative; overflow:hidden; isolation:isolate; }
/* o símbolo inteiro, enorme e quase apagado, saindo pela direita */
.confianca__marca{
  position:absolute; z-index:-1;
  right:-8%; top:50%;
  width:min(62vw, 820px); height:auto; aspect-ratio:2134.75/1927.45;
  transform:translateY(-50%);
  fill:rgba(240,243,250,.045);
}
.confianca__grade{ display:grid; gap:2rem; }
.confianca__titulo{
  font-stretch:var(--largo);
  font-size:clamp(2rem, 4.2vw, 3.6rem);
  line-height:1.05;
  letter-spacing:-.02em;
  max-width:11em;
  text-wrap:balance;
}
.confianca__texto{ display:grid; gap:1.25rem; max-width:34rem; color:var(--texto-2); font-size:1.125rem; }
.confianca__texto p:first-child{ color:var(--claro); }
@media (min-width:960px){
  .confianca__grade{ grid-template-columns:1.2fr 1fr; gap:5rem; align-items:end; }
}

/* ---------- 15. Chamada final -------------------------------------------- */
/* âmbar cheio, com o topo cortado no mesmo ângulo da abertura */
.chamada{
  position:relative;
  background:var(--ambar);
  color:var(--azul-fundo);
  padding:calc(var(--rampa) + clamp(3rem,6vw,5rem)) 0 clamp(4rem,7vw,6rem);
  clip-path:polygon(0 var(--rampa), 100% 0, 100% 100%, 0 100%);
  margin-top:calc(var(--rampa) * -1);
}
/* fundo do vão acima do corte: a seção anterior é escura */
.confianca{ padding-bottom:calc(var(--secao) + var(--rampa)); }
.chamada__grade{ display:grid; gap:2rem; align-items:end; }
.chamada .titulo{ max-width:13em; }
.chamada__texto{ margin-top:1.25rem; max-width:32rem; font-size:1.125rem; font-weight:500; }
@media (min-width:900px){
  .chamada__grade{ grid-template-columns:1fr auto; gap:4rem; }
}

/* ---------- 16. Rodapé --------------------------------------------------- */
.rodape{ padding-block:clamp(4rem,7vw,5.5rem) 2rem; }
.rodape__topo{ display:grid; gap:3rem; padding-bottom:3rem; }
.rodape__marca img{ height:44px; width:auto; }
.rodape__marca p{ margin-top:1.25rem; color:var(--texto-2); max-width:22rem; }

.rodape__links{ display:grid; gap:2rem; }
.rodape__links h2{ font-stretch:var(--meio); font-size:1rem; margin-bottom:1rem; }
.rodape__links li + li{ margin-top:.5rem; }
.rodape__links a{ color:var(--texto-2); text-decoration:none; transition:color .2s; }
.rodape__links a:hover{ color:var(--ambar); }

/* o fio vai no parágrafo, não na caixa: na caixa ele passaria por baixo do
   recuo lateral e ficaria mais largo que o conteúdo */
.rodape__base{ font-size:.875rem; color:var(--texto-2); }
.rodape__base p{ padding-top:2rem; border-top:1px solid var(--fio); }
@media (min-width:600px){ .rodape__links{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .rodape__topo{ grid-template-columns:1fr 1.8fr; } }

/* ---------- 16b. Balão do WhatsApp --------------------------------------- */
/* Fixo no canto inferior direito. Fica abaixo do menu móvel (80) e dos modais
   (140), que o cobrem quando abertos. O verde é o do WhatsApp: é por ele que
   o botão é reconhecido antes mesmo do ícone. */
.whatsapp{
  position:fixed; z-index:70;
  right:clamp(1rem, 2.5vw, 2rem);
  bottom:clamp(1rem, 2.5vw, 2rem);
  width:60px; height:60px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  font-size:1.9rem;
  box-shadow:0 6px 20px rgba(0,20,84,.28);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background-color .2s;
}
.whatsapp:hover{ transform:scale(1.08); background:#1ebe5b; }
.whatsapp:focus-visible{ outline-color:var(--azul); outline-offset:4px; border-radius:50%; }
@media (prefers-reduced-motion:no-preference){
  /* entra depois da abertura, para não disputar com ela */
  .js-anim .whatsapp{ animation:whatsapp-entra .5s cubic-bezier(.34,1.56,.64,1) 1.4s backwards; }
}
@keyframes whatsapp-entra{ from{ opacity:0; transform:scale(.4); } }
@media (max-width:599px){
  .whatsapp{ width:54px; height:54px; font-size:1.7rem; }
}

/* ---------- 17. Formulário ----------------------------------------------- */
.formulario{ display:grid; gap:1.1rem; }
.campo{ display:grid; gap:.45rem; }
.campo--duplo{ grid-template-columns:1fr 1fr; gap:1.1rem; }
.campo--duplo > div{ display:grid; gap:.45rem; }
.campo label{ font-size:.875rem; font-weight:500; color:var(--texto-2); }

.campo input,
.campo select,
.campo textarea{
  width:100%;
  padding:.85rem 1rem;
  font-family:var(--f); font-size:1rem;
  color:var(--azul);
  background:var(--claro);
  border:1.5px solid transparent;
  border-radius:10px;
  transition:border-color .2s, background-color .2s;
}
.campo input:hover,
.campo select:hover,
.campo textarea:hover{ border-color:rgba(0,35,133,.25); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{ background:var(--branco); border-color:var(--azul); outline:none; }
.campo textarea{ resize:vertical; min-height:120px; }
.campo select{
  appearance:none; cursor:pointer; padding-right:2.75rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--azul) 50%),
                   linear-gradient(135deg,var(--azul) 50%,transparent 50%);
  background-position:calc(100% - 20px) 54%, calc(100% - 14px) 54%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.campo--aceite{ grid-template-columns:auto 1fr; align-items:start; gap:.7rem; margin-top:.25rem; }
.campo--aceite input{ width:18px; height:18px; margin-top:.2rem; padding:0; accent-color:var(--azul); }
.campo--aceite label{ font-size:.85rem; line-height:1.5; }

#enviar{ margin-top:.5rem; }
#enviar[disabled]{ opacity:.55; cursor:progress; }

/* ---------- 18. Modais --------------------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  padding:1.5rem;
  background:rgba(0,20,84,.82);
  backdrop-filter:blur(6px);
}
.modal__caixa{
  position:relative;
  width:min(420px,100%);
  background:var(--branco);
  color:var(--azul);
  border-radius:var(--raio);
  padding:3rem 2rem 2.25rem;
  text-align:center;
}
.modal__fechar{
  position:absolute; top:.75rem; right:.75rem;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--texto-2);
  transition:background-color .2s, color .2s;
}
.modal__fechar:hover{ background:var(--claro); color:var(--azul); }
.modal__titulo{ font-stretch:var(--largo); font-size:1.6rem; line-height:1.15; padding-right:2.5rem; }
.modal__apoio{ margin:.85rem 0 1.75rem; color:var(--texto-2); font-size:.975rem; }
.modal__mensagem{ font-stretch:var(--meio); font-weight:650; font-size:1.2rem; line-height:1.35; }
.modal__ok{ margin-top:1.5rem; }
.modal__detalhe{ display:block; margin-top:.9rem; font-weight:400; font-size:.8125rem; color:var(--texto-2); }

/* formulário: rolável quando não cabe. `align-items:start` com margem
   automática centraliza enquanto cabe — `center` cortaria o topo. */
.modal--contato{ z-index:140; align-items:start; overflow-y:auto; }
.modal--contato .modal__caixa{ text-align:left; padding:clamp(1.75rem,4vw,2.75rem); margin-block:auto; }
.modal__caixa--largo{ width:min(640px,100%); }

/* --- marca de estado do envio --------------------------------------------- */
.estado{ width:76px; height:76px; margin:0 auto 1.5rem; }
.estado svg{ width:100%; height:100%; overflow:visible; }
.estado circle,
.estado path{ fill:none; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.estado__trilho{ stroke:rgba(0,35,133,.12); }
.estado__arco{
  stroke:var(--azul);
  stroke-dasharray:43 127;   /* um quarto de 2πr ≈ 170 */
  transform-origin:50% 50%;
  animation:estado-gira 1s linear infinite;
}
.estado__certo,
.estado__erro{ stroke-dasharray:1; stroke-dashoffset:1; }
.estado__certo{ stroke:var(--azul); }
.estado__erro{ stroke:var(--texto-2); }
@keyframes estado-gira{ to{ transform:rotate(360deg); } }

.modal.is-sucesso .estado__arco,
.modal.is-erro .estado__arco{ animation:estado-fecha .45s cubic-bezier(.33,1,.68,1) forwards; }
.modal.is-sucesso .estado__arco{ stroke:var(--ambar); }
.modal.is-erro .estado__arco{ stroke:var(--texto-2); }
@keyframes estado-fecha{ from{ stroke-dasharray:43 127; } to{ stroke-dasharray:170 0; } }

.modal.is-sucesso .estado__certo{ animation:estado-traco .4s cubic-bezier(.65,0,.35,1) .3s forwards; }
.modal.is-erro .estado__erro{ animation:estado-traco .3s cubic-bezier(.65,0,.35,1) .3s forwards; }
@keyframes estado-traco{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion:reduce){
  .estado__arco{ animation:none; stroke-dasharray:170 0; }
  .modal.is-sucesso .estado__certo,
  .modal.is-erro .estado__erro{ stroke-dashoffset:0; }
}

/* ---------- 19. Responsivo ----------------------------------------------- */
@media (max-width:1079px){
  .nav,
  .cabecalho__acao{ display:none; }

  .abrir-menu{
    display:grid; place-items:center;
    margin-inline-start:auto;
    width:44px; height:44px;
    color:inherit;
  }
  .abrir-menu__traco,
  .abrir-menu__traco::before,
  .abrir-menu__traco::after{
    display:block; width:24px; height:2px; border-radius:2px; background:currentColor;
  }
  .abrir-menu__traco{ position:relative; transition:background-color .2s; }
  .abrir-menu__traco::before,
  .abrir-menu__traco::after{ content:""; position:absolute; left:0; transition:transform .25s; }
  .abrir-menu__traco::before{ top:-7px; }
  .abrir-menu__traco::after{ top:7px; }
  .abrir-menu[aria-expanded="true"] .abrir-menu__traco{ background:transparent; }
  .abrir-menu[aria-expanded="true"] .abrir-menu__traco::before{ transform:translateY(7px) rotate(45deg); }
  .abrir-menu[aria-expanded="true"] .abrir-menu__traco::after{ transform:translateY(-7px) rotate(-45deg); }
}
@media (min-width:1080px){
  .menu-movel{ display:none !important; }
}

@media (max-width:599px){
  .campo--duplo{ grid-template-columns:1fr; }
  .abertura__acoes .botao{ width:100%; }
  .rodape__links a{ display:inline-block; padding-block:.5rem; }
  .rodape__links li + li{ margin-top:0; }
}