/* ==========================================================================
   Walk of Life — landing page
   Tokens herdados de ../design_system.md (o sistema de design do e-book), para
   que a página e o produto tenham a mesma caligrafia. Os contrastes não são
   estimados aqui: estão calculados naquele documento e todos passam AA ou AAA.

   Porte das fontes: só o subset latino. O português inteiro (ã, ç, õ, é) vive em
   U+0000-00FF, que é o range latino, e até o travessão de "5–30 min" (U+2013) cai
   no U+2000-206F. O subset latin-ext não é baixado porque nada na página o usa.
   ========================================================================== */

/* ---------- fontes ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/fraunces-600-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+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/fraunces-700-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+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:900;font-display:swap;
  src:url("fonts/fraunces-900-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+FEFF,U+FFFD;}
@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-U+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+FEFF,U+FFFD;}
@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-U+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+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/inter-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-U+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+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/inter-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-U+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+FEFF,U+FFFD;}

/* ---------- tokens ---------- */
:root{
  --cream:#FDF8F0;  --cream-deep:#F7EFE2;  --paper:#FFFDF9;
  --ink:#3B2A20;    --ink-soft:#6B584C;
  --terracotta:#A9542F; --terracotta-deep:#8C4224;
  --butter:#E8B84B; --sage:#7A8B6F; --sage-deep:#5E6E54;
  --line:#E0D3C0;   --alert:#8C3A2B; --alert-bg:#FBEDE8;

  --max:1180px;
  --gutter:22px;
  --raio:10px;
  --raio-g:16px;

  /* Ritmo vertical. Generoso por decisão: a página é editorial, não um painel. */
  --secao-y:96px;

  --sombra:0 1px 2px rgba(59,42,32,.04), 0 8px 24px rgba(59,42,32,.06);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ font-family:Fraunces,Georgia,serif; margin:0; line-height:1.14; font-weight:700; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--terracotta-deep); }

/* O foco é sempre visível e consistente em toda a página (item 5 e 9.8). */
:focus-visible{
  outline:3px solid var(--terracotta);
  outline-offset:3px;
  border-radius:4px;
}

.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

/* Acessível a leitor de tela, invisível na tela. Usado no link de pular. */
.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;
}

.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:100;
  background:var(--terracotta); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--raio) var(--raio); font-weight:600; text-decoration:none;
  transition:top .15s ease;
}
.skip:focus{ top:0; }

/* ---------- tipografia editorial ---------- */
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--terracotta); margin:0 0 14px;
}
.h-secao{
  font-size:clamp(28px,4.4vw,42px); font-weight:700; letter-spacing:-.015em;
  color:var(--ink); margin:0 0 18px; max-width:22ch;
}
.lede{ font-size:19px; line-height:1.6; color:var(--ink-soft); max-width:62ch; }
.muted{ color:var(--ink-soft); }

/* Losango sálvia: o mesmo marcador dos itens de ingrediente do e-book. Reusar o
   elemento gráfico do produto é o que faz a página parecer da mesma marca. */
.marca-sage{
  display:inline-block; width:8px; height:8px; background:var(--sage);
  transform:rotate(45deg); flex:0 0 auto;
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:Inter,sans-serif; font-size:16px; font-weight:600; line-height:1;
  padding:16px 26px; min-height:52px;           /* área de toque confortável */
  border:0; border-radius:var(--raio); cursor:pointer;
  text-decoration:none; text-align:center;
  transition:background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-primario{ background:var(--terracotta); color:#fff; box-shadow:var(--sombra); }
.btn-primario:hover{ background:var(--terracotta-deep); transform:translateY(-1px); }
.btn-primario:active{ transform:translateY(0); }

.btn-secundario{
  background:transparent; color:var(--terracotta-deep);
  border:1.5px solid var(--line); box-shadow:none;
}
.btn-secundario:hover{ border-color:var(--terracotta); background:var(--paper); }

.btn-claro{ background:var(--butter); color:var(--ink); box-shadow:none; }
.btn-claro:hover{ background:#DFAE3F; }

/* Estado de checkout não configurado. O botão fica visivelmente inerte e diz por
   quê — nunca simula uma compra (item 4.8). */
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--cream-deep); color:var(--ink-soft);
  border:1.5px dashed var(--line); cursor:not-allowed; box-shadow:none;
  transform:none;
}

.btn-bloco{ width:100%; }

/* ---------- tarja de aviso de configuração ---------- */
.aviso-build{
  background:var(--alert-bg); border-bottom:1px solid rgba(140,58,43,.22);
  color:var(--alert); font-size:14px; font-weight:500;
  padding:11px var(--gutter); text-align:center;
}
.aviso-build b{ font-weight:700; }

/* ---------- cabeçalho ---------- */
.cabecalho{
  position:sticky; top:0; z-index:50;
  background:rgba(253,248,240,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cabecalho.fixo{ border-bottom-color:var(--line); box-shadow:0 1px 14px rgba(59,42,32,.05); }
/* Cuidado: este elemento também carrega `.container`. O atalho `padding` zera
   TODOS os lados, inclusive o gutter lateral que `.container` define — foi assim
   que o cabeçalho ficou com o nome colado na borda da tela enquanto todas as
   outras seções tinham a margem certa. As laterais ficam por conta do
   `.container`; aqui só o vertical. */
.cabecalho-in{
  display:flex; align-items:center; gap:18px;
  min-height:70px; padding-top:8px; padding-bottom:8px;
}
.marca{ display:flex; align-items:baseline; gap:9px; text-decoration:none; color:var(--ink); }
/* O wordmark da marca ("Walk of Life") é curto, mas divide a linha com o nome do
   produto, que é longo: 20px em vez de 23px para o cabeçalho não crescer e
   empurrar o botão de compra. */
.marca-nome{
  font-family:Fraunces,Georgia,serif; font-weight:900; font-size:20px;
  letter-spacing:-.02em;
}
/* A forma completa do nome só aparece no desktop, onde há largura para ela. */
.marca-promessa{
  font-size:12.5px; color:var(--ink-soft); display:none;
}
@media (min-width:1040px){ .marca-promessa{ display:block; } }

.nav{ display:none; margin-left:auto; gap:26px; align-items:center; }
@media (min-width:820px){ .nav{ display:flex; } }
.nav a{
  color:var(--ink); text-decoration:none; font-size:15.5px; font-weight:500;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--terracotta); color:var(--terracotta-deep); }

.cabecalho-cta{ margin-left:auto; }
@media (min-width:820px){ .cabecalho-cta{ margin-left:0; } }
.cabecalho .btn{ padding:12px 20px; min-height:44px; font-size:15px; }
/* No celular a navegação some e a chamada fica — é o que o item 4.1 pede. */
@media (max-width:560px){ .cabecalho .btn{ padding:11px 16px; font-size:14.5px; } }

/* ---------- seções ---------- */
.secao{ padding:var(--secao-y) 0; }
@media (max-width:720px){ .secao{ padding:64px 0; } }
.secao-alt{ background:var(--cream-deep); }
.secao-papel{ background:var(--paper); }

/* ---------- hero ---------- */
.hero{ padding:64px 0 80px; }
@media (max-width:900px){ .hero{ padding:40px 0 56px; } }
.hero-grid{
  display:grid; gap:52px; align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:960px){ .hero-grid{ grid-template-columns:1.06fr .94fr; gap:60px; } }

/* O h1 é o NOME DO PRODUTO ("30 Minutos para se Presentear") — texto curto, então
   pode ser bem maior que uma manchete e ainda caber em duas linhas. "Presentear"
   é a palavra mais longa: em Fraunces 900 ela precisa de folga para não estourar
   a coluna em 390 px, e é isso que o teto de 4,9vw garante. */
.hero h1{
  font-size:clamp(38px,4.9vw,62px); font-weight:900; letter-spacing:-.022em;
  line-height:1.02; margin:0 0 16px; max-width:16ch;
}
/* A frase de efeito, logo abaixo do nome. Menor que o título e maior que o corpo
   — é o degrau do meio da hierarquia. */
.hero-tagline{
  font-family:Fraunces,Georgia,serif; font-size:clamp(20px,2.1vw,26px);
  font-weight:600; line-height:1.32; color:var(--terracotta-deep);
  margin:0 0 18px; max-width:28ch;
}
.hero .lede{ font-size:19px; margin-bottom:30px; }
@media (max-width:520px){ .hero .lede{ font-size:17.5px; } }

.hero-regua{ width:64px; height:4px; background:var(--terracotta); border-radius:2px; margin:0 0 24px; }

.hero-acoes{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.hero-selos{
  display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 0; padding:0; list-style:none;
}
.selo{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:100px; padding:8px 15px;
  font-size:13.5px; font-weight:500; color:var(--ink);
}
.selo b{ font-weight:700; }
.selo-tempo{ background:var(--butter); border-color:transparent; font-weight:600; }

.hero-fig{ position:relative; margin:0; }
.hero-fig img{
  width:100%; border-radius:var(--raio-g); box-shadow:var(--sombra);
}
.hero-fig figcaption{
  font-size:13px; color:var(--ink-soft); margin-top:12px; text-align:center;
}

/* microcopy sob o CTA: esclarece que é digital sem inventar prazo */
.hero-nota{ font-size:14px; color:var(--ink-soft); margin:14px 0 0; }

/* ---------- identificação (4.3) ---------- */
.reconhece{ display:grid; gap:16px; margin:0; padding:0; list-style:none; }
@media (min-width:760px){ .reconhece{ grid-template-columns:1fr 1fr; gap:18px 30px; } }
.reconhece li{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--raio); padding:20px 22px;
}
.reconhece .marca-sage{ margin-top:9px; }
.reconhece p{ margin:0; font-size:16.5px; }

/* ---------- benefícios (4.4) ---------- */
.beneficios{
  display:grid; gap:20px; margin:0; padding:0; list-style:none;
  grid-template-columns:1fr;
}
@media (min-width:680px){ .beneficios{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .beneficios{ grid-template-columns:repeat(4,1fr); } }
.beneficio{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--raio-g); padding:26px 24px;
  border-top:3px solid var(--terracotta);
}
.beneficio h3{ font-size:19px; margin:0 0 10px; }
.beneficio p{ font-size:15.5px; color:var(--ink-soft); margin:0; }
.beneficio .num{
  font-family:Fraunces,Georgia,serif; font-weight:900; font-size:15px;
  color:var(--terracotta); display:block; margin-bottom:12px;
}

/* ---------- cartões de receita (4.5) ---------- */
.vitrine{ display:grid; gap:26px; grid-template-columns:1fr; margin:0; padding:0; list-style:none; }
@media (min-width:640px){ .vitrine{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .vitrine{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--raio-g); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sombra); border-color:#D9C8B2; }
.card-fig{ margin:0; position:relative; background:var(--cream-deep); }
.card-fig img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
/* Selo de tempo em cima da foto, igual ao selo da página de receita do livro. */
.card-tempo{
  position:absolute; left:14px; bottom:14px;
  background:var(--butter); color:var(--ink);
  font-size:13px; font-weight:700; padding:7px 13px; border-radius:8px;
  box-shadow:0 2px 8px rgba(59,42,32,.16);
}
.card-corpo{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1 1 auto; }
.card-code{
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--terracotta); margin:0 0 8px;
}
.card h3{ font-size:19.5px; margin:0 0 9px; letter-spacing:-.01em; }
.card p{ font-size:15px; color:var(--ink-soft); margin:0; }
.card-meta{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 14px;
  font-size:13.5px; color:var(--ink-soft);
}
.card-meta b{ font-weight:600; color:var(--ink); }

/* ---------- o que você recebe (4.6) ---------- */
.recebe-grid{ display:grid; gap:44px; grid-template-columns:1fr; align-items:start; }
@media (min-width:920px){ .recebe-grid{ grid-template-columns:1fr 1.15fr; gap:56px; } }

.ficha{ margin:0; display:grid; gap:0; }
.ficha div{
  display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.ficha div:first-child{ border-top:1px solid var(--line); }
.ficha dt{ font-size:14px; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; }
.ficha dd{ margin:0; font-size:16px; font-weight:500; text-align:right; }
.pendente{
  color:var(--alert); font-weight:500; font-style:italic;
  background:var(--alert-bg); border-radius:6px; padding:3px 9px; font-size:14px;
}
/* Explicação que só aparece no clique de um CTA sem checkout. O `hidden` do HTML
   é quem esconde; esta regra só dá forma e espaçamento a ela quando visível. */
.aviso-checkout{
  margin:14px 0 0; text-align:center; line-height:1.5;
}
.aviso-checkout:focus-visible{ outline:3px solid var(--terracotta); outline-offset:3px; }
@media (max-width:520px){
  .ficha div{ flex-direction:column; align-items:flex-start; gap:5px; }
  .ficha dd{ text-align:left; }
}

.secoes-lista{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.secoes-lista li{
  display:flex; gap:16px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--raio);
  padding:14px;
}
.secoes-lista img{
  width:80px; height:60px; object-fit:cover; border-radius:8px; flex:0 0 auto;
}
.secoes-lista .num-sec{
  font-family:Fraunces,Georgia,serif; font-weight:900; font-size:17px;
  color:var(--paper); background:var(--terracotta);
  width:29px; height:29px; line-height:29px; text-align:center; border-radius:50%;
  flex:0 0 auto;
}
.secoes-lista h3{ font-size:16.5px; margin:0 0 3px; }
.secoes-lista p{ font-size:14px; color:var(--ink-soft); margin:0; }

/* ---------- veja por dentro (4.7) ---------- */
.dentro{
  display:grid; gap:22px; margin:0; padding:0; list-style:none;
  grid-template-columns:1fr;
}
@media (min-width:620px){ .dentro{ grid-template-columns:repeat(3,1fr); gap:26px; } }
.dentro li{ margin:0; }
.dentro figure{ margin:0; }
.dentro img{
  width:100%; border-radius:8px; border:1px solid var(--line);
  box-shadow:var(--sombra); background:var(--paper);
}
.dentro figcaption{
  font-size:14px; color:var(--ink-soft); margin-top:12px; text-align:center;
}
@media (min-width:620px){
  .dentro li:nth-child(2){ transform:translateY(-18px); }
}

/* ---------- oferta (4.8) ---------- */
.oferta-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--raio-g); box-shadow:var(--sombra);
  padding:40px; max-width:620px; margin:0 auto;
}
@media (max-width:560px){ .oferta-card{ padding:28px 22px; } }
.oferta-card h2{ font-size:clamp(26px,4vw,34px); margin:0 0 10px; letter-spacing:-.015em; }
.oferta-sub{ color:var(--ink-soft); font-size:16px; margin:0 0 26px; }
.oferta-lista{
  list-style:none; margin:0 0 26px; padding:0;
  display:grid; gap:11px;
}
.oferta-lista li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; }
.oferta-lista .marca-sage{ margin-top:8px; }

.preco{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:22px 0; margin:0 0 22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.preco-valor{
  font-family:Fraunces,Georgia,serif; font-weight:900; font-size:44px;
  letter-spacing:-.02em; color:var(--ink); line-height:1;
}
.preco-nota{ font-size:14px; color:var(--ink-soft); }

.oferta-rodape{ font-size:14px; color:var(--ink-soft); margin:16px 0 0; text-align:center; }

/* ---------- FAQ (4.9) ---------- */
.faq{ max-width:760px; margin:0 auto; }
.faq details{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--raio); margin-bottom:12px; overflow:hidden;
}
.faq details[open]{ border-color:#D9C8B2; }
.faq summary{
  cursor:pointer; list-style:none; padding:19px 52px 19px 22px;
  font-family:Fraunces,Georgia,serif; font-weight:700; font-size:17.5px;
  position:relative; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--terracotta); border-bottom:2px solid var(--terracotta);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq summary:hover{ color:var(--terracotta-deep); }
.faq .resposta{ padding:0 22px 20px; color:var(--ink-soft); font-size:16px; }
.faq .resposta p{ margin:0 0 .8em; }
.faq .resposta p:last-child{ margin-bottom:0; }

/* ---------- rodapé ---------- */
.rodape{
  background:var(--ink); color:#E9DFD4; padding:64px 0 30px;
}
.rodape a{ color:#F0E6DA; }
.rodape-grid{ display:grid; gap:34px; grid-template-columns:1fr; }
@media (min-width:760px){ .rodape-grid{ grid-template-columns:1.4fr 1fr; gap:56px; } }
.rodape .marca-nome{ color:#fff; }
.rodape .marca{ color:#fff; }
/* Nome do produto no rodapé: presente, mas subordinado à marca. */
.rodape-produto{
  margin:6px 0 0; font-family:Fraunces,Georgia,serif; font-size:16px;
  color:#E9DFD4; letter-spacing:-.01em;
}
.rodape p{ font-size:14.5px; line-height:1.65; color:#C9BCAD; margin:0 0 10px; }
.rodape h3{
  font-family:Inter,sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--butter);
  margin:0 0 14px;
}
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.rodape li{ font-size:14.5px; }
.rodape-base{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(233,223,212,.16);
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center;
  font-size:13.5px; color:#B5A798;
}

/* ---------- animação de entrada ---------- */
/* Sutil e desligável: só um deslocamento curto, sem coreografia.
   A regra base só vale quando o JS está ativo — sem JS, `.revela` não esconde
   nada, então o conteúdo nunca fica invisível para quem não executa scripts. */
.js .revela{ opacity:0; transform:translateY(14px); }
.js .revela.vis{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion:reduce){
  .js .revela{ opacity:1; transform:none; }
}

/* ==========================================================================
   Impressão — a página também é lida em papel por quem salva o link.
   Sem o menu fixo, sem a tarja de configuração, sem sombra.
   ========================================================================== */
@media print{
  .cabecalho,.skip,.aviso-build,.hero-acoes,.oferta-card .btn,.rodape{ display:none !important; }
  .secao{ padding:22px 0; break-inside:avoid; }
  body{ background:#fff; font-size:11pt; }
  .secao-alt,.secao-papel{ background:#fff; }
  .card,.beneficio,.reconhece li,.ficha div{ break-inside:avoid; }
  .revela{ opacity:1 !important; transform:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#666; }
}