/* =========================================================================
   Fino do Tráfego — folha de estilo única
   Sistema visual: paleta Outono Profundo · Jost (display) + Inter (corpo)
   Regra de cor: 60% verde dominante · 30% neutro · 10% mostarda (só forma)
   ========================================================================= */

/* ---------- fontes self-hosted (sem chamada a terceiros) ---------- */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---------- tokens ---------- */
:root{
  /* cores de marca */
  --verde:#234B3A;
  --verde-fundo:#1B3A2D;
  --verde-mais-escuro:#142A20;
  --petroleo:#16505A;
  --mostarda:#C8A02C;
  /* neutros */
  --chocolate:#3C2A1E;
  --taupe:#7C6A52;
  --bege:#CDB89B;
  --creme:#EFE3C8;
  --marfim:#F7F1E2;
  --branco:#fff;

  /* papéis semânticos — claro por padrão */
  --fundo:var(--marfim);
  --texto:var(--chocolate);
  --texto-fraco:var(--taupe);
  --linha:rgba(60,42,30,.14);
  --linha-forte:rgba(60,42,30,.24);
  --foco:var(--petroleo);

  /* tipografia */
  --display:'Jost',ui-sans-serif,system-ui,sans-serif;
  --corpo:'Inter',ui-sans-serif,system-ui,sans-serif;
  --dado:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  /* medidas */
  --largura:1120px;
  --prosa:66ch;
  --gutter:clamp(20px,5vw,40px);
  --sec-y:clamp(64px,9vw,112px);
  --raio:6px;
  --raio-g:10px;
  --topo:66px; /* altura do cabeçalho fixo */
}

/* seções escuras invertem os papéis */
.escuro{
  --fundo:var(--verde-fundo);
  --texto:var(--creme);
  --texto-fraco:var(--bege);
  --linha:rgba(239,227,200,.18);
  --linha-forte:rgba(239,227,200,.32);
  --foco:var(--mostarda);
}
.creme{ --fundo:var(--creme); --linha:rgba(60,42,30,.16); }

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--marfim);
  color:var(--chocolate);
  font-family:var(--corpo);
  font-size:clamp(16px,.4vw + 15px,17px);
  line-height:1.7;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:2px}
::selection{background:var(--mostarda);color:var(--chocolate)}

/* ---------- utilidades de layout ---------- */
.faixa{background:var(--fundo);color:var(--texto)}
.wrap{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y);scroll-margin-top:calc(var(--topo) + 8px)}
.prosa{max-width:var(--prosa)}
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--gutter);top:10px;z-index:200;background:var(--mostarda);color:var(--chocolate);
  padding:10px 16px;border-radius:var(--raio);font-family:var(--display);font-weight:500}

/* ---------- tipografia de sistema ---------- */
.sobretitulo{
  font-family:var(--dado);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mostarda);margin-bottom:18px
}
.faixa:not(.escuro) .sobretitulo{color:var(--petroleo)}
.h1{
  font-family:var(--display);font-weight:500;font-size:clamp(33px,5.4vw,58px);
  line-height:1.06;letter-spacing:-.026em;text-wrap:balance
}
.h2{
  font-family:var(--display);font-weight:500;font-size:clamp(27px,3.9vw,42px);
  line-height:1.14;letter-spacing:-.02em;text-wrap:balance
}
.h3{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.6vw,22px);line-height:1.32;letter-spacing:-.012em}
.lead{font-size:clamp(17px,1.3vw,19.5px);line-height:1.62;color:var(--texto-fraco)}
.miudo{font-size:14px;line-height:1.6;color:var(--texto-fraco)}
.dado{font-family:var(--dado);font-size:13px;letter-spacing:.02em}
b,strong{font-weight:500;color:var(--texto)}
em{font-style:normal;color:var(--mostarda)}
.faixa:not(.escuro) em{color:var(--petroleo)}

.filete{width:34px;height:2px;background:var(--mostarda);border:0;margin:0}

/* faixa de espectro da marca — ordem fixa da paleta */
.espectro{display:flex;height:7px}
.espectro span{flex:1}
.espectro span:nth-child(1){background:var(--verde)}
.espectro span:nth-child(2){background:var(--petroleo)}
.espectro span:nth-child(3){background:var(--mostarda)}
.espectro span:nth-child(4){background:var(--bege)}
.espectro span:nth-child(5){background:var(--creme)}

/* utilidades de espaçamento — usadas em vez de style="" inline,
   porque a Content-Security-Policy do site bloqueia estilo inline */
.esp-t{margin-top:22px}
.esp-b{margin-bottom:16px}
.esp-b-g{margin-bottom:clamp(40px,5vw,64px)}
.filete-v{margin-block:22px}
.prosa p + p{margin-top:16px}

/* cabeça de seção */
.sec-head{margin-bottom:clamp(34px,4vw,52px)}
.sec-head .h2{margin-bottom:16px}
.sec-head .lead{max-width:58ch}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:-.008em;
  padding:15px 26px;border-radius:var(--raio);border:1.5px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease
}
.btn svg{flex:0 0 auto}
.btn-1{background:var(--mostarda);color:#2E1F06;box-shadow:0 1px 0 rgba(60,42,30,.14)}
.btn-1:hover{background:#D8AE33;transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,160,44,.28)}
.btn-2{border-color:var(--linha-forte);color:var(--texto);background:transparent}
.btn-2:hover{border-color:var(--texto);transform:translateY(-1px)}
.btn-bloco{width:100%}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

.acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.selo{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--dado);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-fraco)
}
.selo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mostarda);flex:0 0 auto}

/* ---------- cabeçalho ---------- */
.topo{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--verde-fundo) 92%,transparent);
  border-bottom:1px solid rgba(239,227,200,.14);
  transition:box-shadow .2s ease,background-color .2s ease
}
@supports (backdrop-filter:blur(8px)){
  .topo{backdrop-filter:saturate(1.3) blur(10px)}
}
.topo[data-rolado]{background:var(--verde-fundo);box-shadow:0 8px 26px rgba(20,42,32,.28)}
.topo-in{display:flex;align-items:center;gap:20px;height:var(--topo)}
.marca{display:flex;align-items:center;gap:11px;margin-right:auto;color:var(--creme)}
.marca svg{width:26px;height:26px}
.marca-nome{font-family:var(--display);font-weight:500;font-size:18.5px;letter-spacing:-.018em;white-space:nowrap}
.nav{display:flex;gap:26px}
.nav a{
  font-size:14.5px;color:var(--bege);position:relative;padding-block:4px;
  transition:color .15s ease
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--mostarda);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease
}
.nav a:hover{color:var(--creme)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--creme)}
.topo .btn{padding:10px 18px;font-size:14.5px}
@media (max-width:900px){.nav{display:none}}
@media (max-width:520px){.topo .btn-rotulo-longo{display:none}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(52px,8vw,96px) clamp(56px,8vw,104px);position:relative;overflow:hidden}
/* brilho de petróleo à direita: dá profundidade ao espaço vazio,
   que no sistema é intencional — respiro, não sobra */
.hero::after{
  content:"";position:absolute;inset:-30% -20% -30% 38%;
  background:radial-gradient(45% 50% at 62% 48%,rgba(22,80,90,.62),rgba(22,80,90,.16) 55%,transparent 78%);
  pointer-events:none;z-index:0
}
@media (max-width:820px){.hero::after{inset:auto -30% -35% 20%;height:55%}}
.hero-in{position:relative;z-index:1}
.hero .h1{max-width:20ch;margin-bottom:24px}
.hero .lead{max-width:52ch;margin-bottom:32px}
.hero .acoes{margin-bottom:22px}
.hero-nota{display:flex;flex-wrap:wrap;gap:10px 26px}

/* faixa de números (opcional) */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:2px;background:var(--linha)}
.numeros div{background:var(--fundo);padding:22px 24px}
.numeros dt{font-family:var(--dado);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--texto-fraco);margin-bottom:7px}
.numeros dd{font-family:var(--display);font-weight:500;font-size:clamp(25px,2.6vw,32px);line-height:1.1;letter-spacing:-.02em;color:var(--texto)}

/* ---------- listas de conteúdo ---------- */
.lista-dor{display:grid;gap:2px;background:var(--linha);border-block:1px solid var(--linha);margin-bottom:34px}
.lista-dor li{
  background:var(--fundo);padding:20px 24px 20px 56px;position:relative;
  font-size:16.5px;line-height:1.6
}
.lista-dor li::before{
  content:"";position:absolute;left:24px;top:29px;width:14px;height:2px;background:var(--mostarda)
}

.marcada{display:grid;gap:13px}
.marcada li{position:relative;padding-left:28px;line-height:1.6}
.marcada li::before{
  content:"";position:absolute;left:0;top:11px;width:9px;height:9px;border-radius:2px;
  background:var(--mostarda)
}
.marcada.risco li::before{background:none;border:1.5px solid currentColor;opacity:.45;border-radius:50%}

/* ---------- método FINO ---------- */
.fino{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--raio-g);overflow:hidden}
@media (min-width:760px){.fino{grid-template-columns:1fr 1fr}}
.fino-item{background:var(--fundo);padding:clamp(26px,3vw,38px)}
.fino-item .h3{margin-bottom:10px}
.fino-item p{color:var(--texto-fraco);font-size:15.5px;line-height:1.62}
/* precisa vencer `.fino-item p` acima — daí as duas classes */
.fino-item .fino-letra{
  font-family:var(--display);font-weight:500;font-size:clamp(42px,4vw,54px);line-height:.9;
  color:var(--mostarda);margin-bottom:12px;letter-spacing:-.03em
}
.fino-legenda{
  font-family:var(--dado);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-fraco);margin-bottom:20px;display:block
}

/* ---------- operação / entregáveis ---------- */
.grade-2{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:860px){.grade-2{grid-template-columns:0.9fr 1.1fr;align-items:start}}
.cartoes{display:grid;gap:14px}
@media (min-width:620px){.cartoes{grid-template-columns:1fr 1fr}}
.cartao{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:22px 24px
}
.escuro .cartao{background:rgba(239,227,200,.05);border-color:var(--linha)}
.cartao .h3{font-size:17.5px;margin-bottom:7px}
.cartao p{font-size:14.5px;line-height:1.6;color:var(--texto-fraco)}

/* ---------- sobre ---------- */
.sobre-grade{display:grid;gap:clamp(30px,4vw,54px);align-items:center}
@media (min-width:820px){.sobre-grade{grid-template-columns:minmax(0,380px) minmax(0,1fr)}}
.retrato{position:relative;border-radius:var(--raio-g);overflow:hidden;background:var(--verde-mais-escuro)}
.retrato img{width:100%;aspect-ratio:4/5;object-fit:cover}
.retrato figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:20px 22px;
  background:linear-gradient(to top,rgba(20,42,32,.92),rgba(20,42,32,0));
  font-family:var(--dado);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--bege)
}
.sobre-texto p + p{margin-top:16px}
.assinatura{margin-top:26px;display:flex;align-items:center;gap:14px}
.assinatura-nome{font-family:var(--display);font-weight:500;font-size:17px;color:var(--texto)}
.assinatura .miudo{margin-top:1px}

/* ---------- duas portas ---------- */
.portas{display:grid;gap:16px}
@media (min-width:820px){.portas{grid-template-columns:1fr 1fr}}
.porta{
  background:var(--branco);border:1px solid var(--linha-forte);border-radius:var(--raio-g);
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column
}
.porta-tipo{
  font-family:var(--dado);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--petroleo);margin-bottom:12px
}
.porta .h3{font-size:clamp(21px,2vw,25px);margin-bottom:10px}
.porta-para{font-size:15px;line-height:1.6;color:var(--texto-fraco);padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--linha)}
.porta .marcada{font-size:15px;margin-bottom:26px}
.porta .marcada li{padding-left:26px}
.porta-pe{margin-top:auto}
.porta-meta{display:grid;gap:6px;margin-bottom:20px}
.porta-meta div{display:flex;justify-content:space-between;gap:14px;font-family:var(--dado);font-size:12.5px;color:var(--texto-fraco);border-bottom:1px dotted var(--linha);padding-bottom:6px}
.porta-meta b{color:var(--texto);font-weight:500}

.garantia{
  margin-top:22px;border:1.5px solid var(--mostarda);border-radius:var(--raio-g);
  padding:clamp(24px,3vw,34px);background:rgba(200,160,44,.07)
}
.garantia .h3{margin-bottom:10px;display:flex;align-items:center;gap:11px}
.garantia .h3 svg{width:22px;height:22px;flex:0 0 auto;color:var(--mostarda)}
.garantia p{font-size:15.5px;line-height:1.62;color:var(--texto)}

/* ---------- passos ---------- */
.passos{counter-reset:p;display:grid;gap:1px;background:var(--linha);border-block:1px solid var(--linha)}
@media (min-width:760px){.passos{grid-template-columns:repeat(3,1fr)}}
.passo{background:var(--fundo);padding:clamp(24px,3vw,34px);counter-increment:p}
.passo::before{
  content:"0" counter(p);display:block;font-family:var(--dado);font-size:12.5px;font-weight:500;
  letter-spacing:.14em;color:var(--mostarda);margin-bottom:16px
}
.passo .h3{margin-bottom:9px}
.passo p{font-size:15px;line-height:1.62;color:var(--texto-fraco)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linha);max-width:820px}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{
  display:flex;align-items:flex-start;gap:16px;cursor:pointer;list-style:none;
  padding:22px 0;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.5vw,19.5px);
  line-height:1.4;letter-spacing:-.012em
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:13px;height:13px;margin-top:7px;margin-left:auto;
  border-right:2px solid var(--mostarda);border-bottom:2px solid var(--mostarda);
  transform:rotate(45deg);transition:transform .2s ease
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--petroleo)}
.faq-resposta{padding:0 44px 26px 0;color:var(--texto-fraco);max-width:64ch}
.faq-resposta p + p{margin-top:14px}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- CTA final ---------- */
.fecho{text-align:center}
.fecho .h2{margin-inline:auto;max-width:24ch;margin-bottom:20px}
.fecho .lead{margin-inline:auto;max-width:56ch;margin-bottom:32px}
.fecho .acoes{justify-content:center}
.fecho .filete{margin-inline:auto;margin-bottom:26px}
.ps{
  margin-top:38px;padding-top:26px;border-top:1px solid var(--linha);
  max-width:60ch;margin-inline:auto;text-align:left;font-size:15px;line-height:1.65;color:var(--texto-fraco)
}
.ps b{color:var(--creme)}

/* ---------- rodapé ---------- */
/* Nota de contraste: o rodapé usa o verde mais escuro do sistema (#142A20).
   Sobre ele o taupe dá só 2.9:1 e reprova em WCAG AA — por isso aqui os
   neutros usados em texto são bege (7.9:1) e creme (9.8:1), e a hierarquia
   vem de tamanho e caixa, não de contraste. */
.rodape{background:var(--verde-mais-escuro);color:var(--bege);padding-block:clamp(44px,6vw,64px) 26px}
.rodape a{color:var(--creme);border-bottom:1px solid transparent;transition:border-color .15s}
.rodape a:hover{border-bottom-color:var(--mostarda)}
.rodape-grade{display:grid;gap:34px;margin-bottom:40px}
@media (min-width:720px){.rodape-grade{grid-template-columns:1.4fr 1fr 1fr}}
.rodape h2{font-family:var(--dado);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--bege);margin-bottom:15px}
.rodape .marca{margin-bottom:14px;color:var(--creme)}
.rodape .marca a{border-bottom:none}
.rodape-sobre{font-size:14.5px;max-width:36ch}
.rodape ul{display:grid;font-size:14.5px}
.rodape ul a{display:inline-block;padding-block:9px}
.rodape-pe{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  padding-top:22px;border-top:1px solid rgba(239,227,200,.13);
  font-family:var(--dado);font-size:11.5px;letter-spacing:.04em;color:var(--bege)
}

/* ---------- barra fixa de CTA (mobile) ---------- */
.barra-cta{
  position:fixed;inset:auto 0 0 0;z-index:99;
  padding:10px max(var(--gutter),10px) calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--verde-fundo) 96%,transparent);
  border-top:1px solid rgba(239,227,200,.16);
  transform:translateY(110%);transition:transform .26s ease;
  display:none
}
.barra-cta[data-visivel]{transform:translateY(0)}
@media (max-width:760px){
  .barra-cta{display:block}
  /* respiro para a barra fixa não cobrir o fim do rodapé */
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.barra-cta{transition:none}}

/* ---------- revelação em scroll (progressiva, sem JS) ----------
   Anima SÓ o deslocamento, nunca a opacidade. Se a timeline de scroll
   travar num valor intermediário — o que acontece com elemento mais alto
   que a janela, ou janela muito curta — o pior caso é um deslocamento de
   14px. Conteúdo invisível numa página de conversão é inaceitável.
   Só o Chromium implementa animation-timeline hoje; nos outros
   navegadores a página simplesmente não anima, sem prejuízo nenhum. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:760px){
    .revelar{
      animation:surgir linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 60%;
    }
  }
}
@keyframes surgir{from{transform:translateY(14px)}to{transform:none}}

/* ---------- página de erro (404) ---------- */
.erro{min-height:100svh;display:flex;align-items:center}
.erro-cod{font-family:var(--dado);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mostarda);margin-bottom:22px}
.erro .h1{max-width:22ch;margin-bottom:20px}
.erro .lead{max-width:48ch;margin-bottom:32px}

/* ---------- impressão ---------- */
@media print{
  .topo,.barra-cta,.hero::after{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .faixa{background:#fff!important;color:#000!important}
  .sec{padding-block:14pt;page-break-inside:avoid}
  .faq details{page-break-inside:avoid}
  .faq-resposta{display:block!important}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}