/* ==========================================================================
   vouchi!: folha de estilo única da landing
   --------------------------------------------------------------------------
   Sem build, sem framework. Este arquivo é compartilhado por index.html,
   termos.html e privacidade.html para que as três páginas sejam o mesmo
   produto. O deploy é um rsync do diretório inteiro.

   Paleta espelhada de apps/mobile/src/theme/index.ts (tokens `colors`) para
   que app e site não pareçam marcas diferentes. O amarelo #f2c230 é o do
   wordmark em curvas (marca/vouchi/*.svg); o #feb300 é o amarelo do app e
   entra como variação de hover/realce.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* marca */
  --vermelho:        #af101a;
  --vermelho-escuro: #8c0d15;
  --vermelho-medio:  #ba1a20;
  --coral:           #d32f2f;
  --amarelo:         #f2c230;  /* wordmark "vou" */
  --amarelo-forte:   #feb300;  /* secondaryContainer do app */
  --amarelo-suave:   #ffdeac;

  /* superfícies: neutros "crus", nada de branco puro no fundo */
  --fundo:        #fcf9f8;
  --superficie:   #ffffff;
  --superficie-2: #f6f3f2;
  --superficie-3: #f0eded;
  --creme:        #fff4f2;

  /* texto */
  --tinta:       #1b1c1c;
  --tinta-media: #5b403d;
  --tinta-fraca: #8f6f6c;
  --linha:       #e9dedc;
  --linha-forte: #e4beba;

  /* escala tipográfica fluida (clamp = sem media query pra tamanho de fonte) */
  --t-display: clamp(2.25rem, 1.35rem + 4.2vw, 4.25rem);
  --t-h2:      clamp(1.6rem,  1.15rem + 2.1vw, 2.5rem);
  --t-h3:      clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --t-lead:    clamp(1.02rem, 0.96rem + 0.35vw, 1.18rem);
  --t-corpo:   1rem;
  --t-mini:    0.82rem;

  /* ritmo: tudo múltiplo de 4px */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --sombra-1: 0 1px 2px rgba(27,28,28,.06), 0 2px 8px rgba(27,28,28,.05);
  --sombra-2: 0 8px 24px rgba(27,28,28,.09), 0 2px 6px rgba(27,28,28,.05);
  --sombra-3: 0 24px 60px rgba(110,10,18,.22);

  --max: 1120px;
  --nav-h: 64px;

  --transicao: 200ms cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. Reset enxuto
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  /* âncoras não param atrás da navbar fixa */
  scroll-padding-top:calc(var(--nav-h) + var(--e-5));
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-size:var(--t-corpo);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* trava qualquer scroll horizontal acidental em telas estreitas */
  overflow-x:hidden;
}

img,svg{ max-width:100%; height:auto; display:block }
h1,h2,h3,h4{ line-height:1.15; letter-spacing:-.022em; margin:0; text-wrap:balance }
p{ margin:0 }
ul{ margin:0; padding:0 }

/* foco visível sempre: nunca remover outline sem repor outra coisa */
:focus-visible{
  outline:3px solid var(--amarelo-forte);
  outline-offset:3px;
  border-radius:var(--e-1);
}
/* em fundo vermelho o amarelo some; troca pelo creme */
.faixa-escura :focus-visible,
.rodape :focus-visible,
.navbar :focus-visible{ outline-color:var(--creme) }

/* --------------------------------------------------------------------------
   3. Utilitários
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--e-5) }
@media (max-width:480px){ .wrap{ padding-inline:var(--e-4) } }   /* gutter de 16px aos 375px */

.so-leitor{
  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:var(--e-4); top:-100px; z-index:200;
  background:var(--amarelo); color:var(--tinta); font-weight:800;
  padding:var(--e-3) var(--e-4); border-radius:var(--r-pill);
  text-decoration:none; transition:top var(--transicao);
}
.pular:focus{ top:var(--e-3) }

/* --------------------------------------------------------------------------
   4. Marca
   -------------------------------------------------------------------------- */
.marca{
  font-weight:800; letter-spacing:-.045em; line-height:1;
  text-decoration:none; display:inline-block; white-space:nowrap;
  font-size:1.6rem;
}
.marca .vou{ color:var(--amarelo) }
.marca .chi{ color:var(--vermelho) }
/* sobre fundo vermelho o "chi!" precisa virar creme pra ter contraste */
.marca--claro .chi{ color:var(--creme) }

/* --------------------------------------------------------------------------
   5. Botões
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2);
  font:inherit; font-weight:800; font-size:.97rem; letter-spacing:-.01em;
  border:1px solid transparent; border-radius:var(--r-pill);
  padding:14px var(--e-5); min-height:48px;   /* alvo de toque confortável */
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform var(--transicao), box-shadow var(--transicao),
             background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn:active{ transform:translateY(1px) }

.btn--principal{
  background:var(--amarelo); color:var(--tinta);
  box-shadow:0 6px 18px rgba(175,16,26,.18);
}
.btn--principal:hover{ background:var(--amarelo-forte); transform:translateY(-2px); box-shadow:0 12px 28px rgba(175,16,26,.24) }

.btn--vermelho{ background:var(--vermelho); color:#fff }
.btn--vermelho:hover{ background:var(--vermelho-escuro); transform:translateY(-2px); box-shadow:var(--sombra-2) }

.btn--fantasma{ background:transparent; color:var(--creme); border-color:rgba(255,244,242,.45) }
.btn--fantasma:hover{ background:rgba(255,244,242,.12); border-color:var(--creme) }

.btn--contorno{ background:transparent; color:var(--vermelho); border-color:var(--linha-forte) }
.btn--contorno:hover{ border-color:var(--vermelho); background:var(--creme) }

.btn--pequeno{ padding:10px var(--e-4); min-height:40px; font-size:.86rem }

/* --------------------------------------------------------------------------
   6. Navbar
   -------------------------------------------------------------------------- */
.navbar{
  position:sticky; top:0; z-index:100;
  background:rgba(252,249,248,.82);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}
/* a borda só aparece depois que a página rola, deixando a navbar "limpa" no topo */
.navbar.rolou{ border-bottom-color:var(--linha); box-shadow:var(--sombra-1); background:rgba(252,249,248,.94) }

.nav-in{
  display:flex; align-items:center; gap:var(--e-4);
  min-height:var(--nav-h);
  max-width:var(--max); margin-inline:auto; padding-inline:var(--e-5);
}
@media (max-width:480px){ .nav-in{ padding-inline:var(--e-4) } }

.nav-in .marca{ font-size:1.5rem; flex:0 0 auto }

.nav-menu{ display:flex; align-items:center; gap:var(--e-1); margin-left:auto }

.nav-link{
  color:var(--tinta-media); text-decoration:none; font-weight:600; font-size:.9rem;
  padding:var(--e-2) var(--e-3); border-radius:var(--r-pill);
  transition:color var(--transicao), background-color var(--transicao);
}
.nav-link:hover{ color:var(--vermelho); background:var(--creme) }

/* separador visual entre navegação de conteúdo e acessos internos */
.nav-sep{ width:1px; height:22px; background:var(--linha); margin-inline:var(--e-2) }

/* Acessos de equipe e parceiro: discretos de propósito. Quem chega na landing é
   cliente; estes links são ferramenta de trabalho, não chamada de venda.
   Ambos abrem o MESMO painel; o tipo da conta decide o que aparece lá. */
.nav-acesso{
  color:var(--tinta-media); text-decoration:none;
  font-size:.78rem; font-weight:600; letter-spacing:.01em;
  padding:6px var(--e-3); border-radius:var(--r-pill);
  border:1px solid var(--linha);
  transition:color var(--transicao), border-color var(--transicao), background-color var(--transicao);
}
.nav-acesso:hover{ color:var(--vermelho); border-color:var(--linha-forte); background:var(--superficie) }

.nav-cta{ margin-left:var(--e-2) }

/* botão de menu: só existe no mobile */
.nav-botao{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:0;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--linha); border-radius:var(--r-sm);
  cursor:pointer; color:var(--tinta);
}
.nav-botao span{
  display:block; width:18px; height:2px; background:currentColor; border-radius:2px;
  position:relative; transition:transform var(--transicao), background-color var(--transicao);
}
.nav-botao span::before,.nav-botao span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px;
  transition:transform var(--transicao), top var(--transicao);
}
.nav-botao span::before{ top:-6px }
.nav-botao span::after{ top:6px }
.nav-botao[aria-expanded="true"] span{ background:transparent }
.nav-botao[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg) }
.nav-botao[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg) }

@media (max-width:900px){
  .nav-botao{ display:flex }
  .nav-menu{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:var(--e-1);
    margin:0; padding:var(--e-4) var(--e-4) var(--e-5);
    background:var(--fundo); border-bottom:1px solid var(--linha);
    box-shadow:var(--sombra-2);
    max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
    /* fechado: invisível e fora da ordem de foco */
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }
  .nav-menu.aberto{ opacity:1; visibility:visible; transform:none }
  .nav-link{ font-size:1.05rem; padding:var(--e-3) var(--e-2) }
  .nav-sep{ width:100%; height:1px; margin:var(--e-3) 0 }
  .nav-acessos{ display:flex; gap:var(--e-2) }
  .nav-acesso{ flex:1; text-align:center; padding:var(--e-3) }
  .nav-cta{ margin:var(--e-3) 0 0; width:100% }
}
@media (min-width:901px){
  .nav-acessos{ display:contents }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; color:var(--creme);
  background:
    radial-gradient(90% 120% at 12% 0%, #c6151f 0%, transparent 60%),
    linear-gradient(155deg, var(--vermelho) 0%, var(--vermelho-medio) 55%, var(--coral) 100%);
  /* Sem altura mínima e sem centralização vertical: o conteúdo começa logo
     abaixo da navbar. Forçar a tela inteira e centrar dentro dela jogava metade
     da sobra ACIMA do título, que é exatamente o espaço vazio que se via.
     O hero agora tem a altura do próprio conteúdo. */
  padding:clamp(var(--e-4), 2.5vw, var(--e-6)) 0 clamp(var(--e-6), 5vw, var(--e-8));
}
/* ruído/grão sutil: tira o aspecto "gradiente de template" */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:4px 4px;
}

/* cupons subindo ao fundo: assinatura visual da marca, herdada da versão anterior */
.hero-cupons{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.cupom-sobe{ position:absolute; bottom:-14%; will-change:transform; animation:cupom-subir linear infinite }
.cupom-deriva{ display:inline-block; color:var(--amarelo); animation:cupom-derivar ease-in-out infinite alternate }
.cupom-deriva svg{ width:100%; height:auto; display:block }
@keyframes cupom-subir{
  0%{ transform:translateY(0); opacity:0 }
  12%{ opacity:.38 }
  86%{ opacity:.38 }
  100%{ transform:translateY(-124vh); opacity:0 }
}
@keyframes cupom-derivar{
  from{ transform:translateX(calc(var(--amp,18) * -1px)) }
  to  { transform:translateX(calc(var(--amp,18) * 1px)) }
}

.hero-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(var(--e-6), 4vw, var(--e-8));
  align-items:center;
}

.hero h1{ font-size:var(--t-display); font-weight:800; margin-bottom:var(--e-4); letter-spacing:-.035em }
.hero h1 .realce{ color:var(--amarelo) }

.hero-lead{ font-size:var(--t-lead); line-height:1.5; opacity:.93; max-width:46ch; margin-bottom:var(--e-5) }

.hero-ctas{ display:flex; gap:var(--e-3); flex-wrap:wrap; align-items:center }
.hero-nota{ font-size:var(--t-mini); opacity:.82; margin-top:var(--e-3); max-width:42ch }

/* bilhete de preço */
.bilhete{
  background:var(--superficie); color:var(--tinta);
  border-radius:var(--r-xl); padding:var(--e-5);
  box-shadow:var(--sombra-3);
  position:relative;
}
/* picote lateral, como num tíquete de verdade */
.bilhete::before,.bilhete::after{
  content:""; position:absolute; width:22px; height:22px; border-radius:50%;
  background:var(--vermelho-medio); top:50%; margin-top:-11px;
}
.bilhete::before{ left:-11px }
.bilhete::after { right:-11px }

.bilhete-chapeu{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  color:var(--tinta-media); margin-bottom:var(--e-2);
}
.bilhete-preco{ display:flex; align-items:baseline; gap:var(--e-2); flex-wrap:wrap }
.bilhete-preco .valor{ font-size:clamp(2.3rem,1.8rem + 2vw,3rem); font-weight:800; letter-spacing:-.04em; color:var(--vermelho) }
.bilhete-preco .periodo{ font-size:.9rem; color:var(--tinta-media); font-weight:600 }
.bilhete-corte{ border:0; border-top:2px dashed var(--linha-forte); margin:var(--e-4) calc(var(--e-5) * -1) }
.bilhete ul{ list-style:none; display:grid; gap:var(--e-3) }
.bilhete li{ display:grid; grid-template-columns:20px 1fr; gap:var(--e-3); align-items:start; font-size:.93rem; line-height:1.45 }
.bilhete li b{ color:var(--vermelho) }
.bilhete-check{ color:var(--vermelho); display:block; margin-top:.18em }
.bilhete-check svg{ width:16px; height:16px; display:block }

@media (max-width:900px){
  .hero-in{ grid-template-columns:1fr }
  .bilhete::before,.bilhete::after{ display:none }
}

/* --------------------------------------------------------------------------
   8. Seções
   -------------------------------------------------------------------------- */
.secao{ padding:clamp(var(--e-7), 6vw, var(--e-9)) 0 }
.secao-cabeca{ max-width:58ch; margin-bottom:clamp(var(--e-6), 4vw, var(--e-7)) }
.secao-chapeu{
  display:block; font-size:.74rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vermelho); margin-bottom:var(--e-3);
}
.secao h2{ font-size:var(--t-h2); font-weight:800 }
.secao-sub{ color:var(--tinta-media); font-size:var(--t-lead); line-height:1.55; margin-top:var(--e-3) }

.faixa-escura{ background:var(--tinta); color:var(--creme) }
.faixa-escura .secao-chapeu{ color:var(--amarelo) }
.faixa-escura .secao-sub{ color:rgba(255,244,242,.74) }

.faixa-clara{ background:var(--superficie-2); border-block:1px solid var(--linha) }

/* --------------------------------------------------------------------------
   9. Passos
   -------------------------------------------------------------------------- */
.passos{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-5); counter-reset:passo }
.passo{
  position:relative; background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-lg); padding:var(--e-5);
  transition:transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.passo:hover{ transform:translateY(-4px); box-shadow:var(--sombra-2); border-color:var(--linha-forte) }
.passo-n{
  counter-increment:passo;
  width:34px; height:34px; border-radius:50%;
  background:var(--vermelho); color:var(--creme);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.92rem; margin-bottom:var(--e-4);
}
.passo-n::before{ content:counter(passo) }
.passo h3{ font-size:var(--t-h3); margin-bottom:var(--e-2) }
.passo p{ color:var(--tinta-media); font-size:.93rem; line-height:1.55 }

/* --------------------------------------------------------------------------
   10. Bento das vantagens
   -------------------------------------------------------------------------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--e-4) }
.cartao{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,244,242,.14);
  border-radius:var(--r-lg); padding:var(--e-5);
  transition:transform var(--transicao), background-color var(--transicao), border-color var(--transicao);
}
.cartao:hover{ transform:translateY(-3px); background:rgba(255,255,255,.09); border-color:rgba(255,244,242,.28) }
.cartao--largo{ grid-column:span 3 }
.cartao--meio{ grid-column:span 2 }
.cartao-ico{ margin-bottom:var(--e-3); color:var(--amarelo) }
.cartao-ico svg{ width:28px; height:28px; display:block }
.cartao h3{ font-size:var(--t-h3); margin-bottom:var(--e-2) }
.cartao p{ color:rgba(255,244,242,.74); font-size:.93rem; line-height:1.55 }
.cartao--destaque{
  grid-column:span 6;
  background:linear-gradient(120deg, rgba(175,16,26,.5), rgba(211,47,47,.28));
  border-color:rgba(242,194,48,.34);
}
.cartao--destaque h3{ font-size:clamp(1.25rem,1rem + 1.2vw,1.7rem); color:var(--amarelo) }
.cartao--destaque p{ max-width:60ch; font-size:var(--t-lead); color:rgba(255,244,242,.88) }

@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2,1fr) }
  .cartao--largo,.cartao--meio{ grid-column:span 1 }
  .cartao--destaque{ grid-column:span 2 }
}
@media (max-width:560px){
  .bento{ grid-template-columns:1fr }
  .cartao--destaque{ grid-column:span 1 }
  .passos{ grid-template-columns:1fr }
}

/* --------------------------------------------------------------------------
   12. Captura de e-mail
   -------------------------------------------------------------------------- */
.news{ max-width:520px }
.news-form{ display:flex; gap:var(--e-2); margin-top:var(--e-5); flex-wrap:wrap }
.news-form input{
  flex:1 1 220px; min-width:0; font:inherit; font-size:.97rem;
  background:rgba(255,255,255,.08); color:var(--creme);
  border:1px solid rgba(255,244,242,.38); border-radius:var(--r-pill);
  padding:14px var(--e-5); min-height:48px;
}
.news-form input::placeholder{ color:rgba(255,244,242,.6) }
.news-form button{ flex:0 0 auto }
.news-form button:disabled{ opacity:.55; cursor:progress; transform:none }
.news-msg{ margin-top:var(--e-3); font-size:.9rem; min-height:1.4em; font-weight:600 }
.news-msg[data-estado="erro"]{ color:#ffb3ac }
.news-msg[data-estado="ok"]{ color:var(--amarelo) }
.news-privacidade{ margin-top:var(--e-4); font-size:var(--t-mini); color:rgba(255,244,242,.6) }
.news-privacidade a{ color:rgba(255,244,242,.85) }

/* --------------------------------------------------------------------------
   13. FAQ (acordeão nativo, sem uma linha de JS)
   -------------------------------------------------------------------------- */
.faq{ display:grid; gap:var(--e-2); max-width:800px }
.faq details{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-md);
  padding:var(--e-4) var(--e-5);
  transition:border-color var(--transicao), box-shadow var(--transicao);
}
.faq details[open]{ border-color:var(--linha-forte); box-shadow:var(--sombra-1) }
.faq summary{
  cursor:pointer; font-weight:700; font-size:1rem; list-style:none;
  display:flex; justify-content:space-between; gap:var(--e-4); align-items:center;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; color:var(--vermelho); font-weight:900; font-size:1.3rem; line-height:1;
  flex:0 0 auto; transition:transform var(--transicao);
}
.faq details[open] summary::after{ content:"−"; transform:rotate(180deg) }
.faq details p{ margin-top:var(--e-3); color:var(--tinta-media); font-size:.94rem; line-height:1.65 }
.faq details p + p{ margin-top:var(--e-2) }
.faq details p a,
.secao-sub a{ color:var(--vermelho); font-weight:600 }

/* --------------------------------------------------------------------------
   14. Chamada final para restaurantes
   -------------------------------------------------------------------------- */
.chamada{
  background:linear-gradient(140deg,var(--vermelho) 0%,var(--vermelho-medio) 100%);
  color:var(--creme); border-radius:var(--r-xl);
  padding:clamp(var(--e-6), 5vw, var(--e-8));
  display:grid; grid-template-columns:1.3fr auto; gap:var(--e-6); align-items:center;
}
.chamada h2{ font-size:var(--t-h2); margin-bottom:var(--e-3) }
.chamada p{ color:rgba(255,244,242,.86); max-width:52ch }
@media (max-width:760px){ .chamada{ grid-template-columns:1fr } }

/* --------------------------------------------------------------------------
   15. Rodapé
   -------------------------------------------------------------------------- */
.rodape{ background:var(--tinta); color:var(--creme); padding:var(--e-8) 0 var(--e-6) }
.rodape-grade{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--e-6);
  padding-bottom:var(--e-6); border-bottom:1px solid rgba(255,244,242,.14);
}
.rodape-sobre p{ color:rgba(255,244,242,.66); font-size:.9rem; margin-top:var(--e-3); max-width:36ch }
.rodape h3{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.12em;
  color:rgba(255,244,242,.5); margin-bottom:var(--e-4);
}
.rodape ul{ list-style:none; display:grid; gap:var(--e-3) }
.rodape a{
  color:rgba(255,244,242,.82); text-decoration:none; font-size:.92rem;
  transition:color var(--transicao);
}
.rodape a:hover{ color:var(--amarelo); text-decoration:underline }
.rodape-botao{
  background:none; border:0; padding:0; font:inherit; font-size:.92rem;
  color:rgba(255,244,242,.82); cursor:pointer; text-align:left;
}
.rodape-botao:hover{ color:var(--amarelo); text-decoration:underline }
.rodape-fim{
  display:flex; justify-content:space-between; gap:var(--e-4); flex-wrap:wrap;
  padding-top:var(--e-5); font-size:var(--t-mini); color:rgba(255,244,242,.48);
}
@media (max-width:760px){ .rodape-grade{ grid-template-columns:1fr; gap:var(--e-6) } }

/* --------------------------------------------------------------------------
   16. Banner de cookies
   -------------------------------------------------------------------------- */
/* Barra discreta no rodapé, não painel. Um aviso de cookies que toma a tela
   atrapalha a primeira impressão e empurra a pessoa a clicar em "aceitar" só
   pra se livrar dele, que é o oposto de consentimento livre. */
.cookies{
  position:fixed; left:var(--e-4); right:var(--e-4); bottom:var(--e-4); z-index:150;
  max-width:440px;
  background:var(--superficie); color:var(--tinta);
  border:1px solid var(--linha-forte); border-radius:var(--r-md);
  padding:var(--e-3) var(--e-4); box-shadow:var(--sombra-1);
  /* nasce escondido; o JS mostra só se ainda não houver decisão guardada */
  display:none;
}
.cookies.visivel{
  display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap;
  animation:cookies-entrar 320ms cubic-bezier(.22,.61,.36,1);
}
@keyframes cookies-entrar{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.cookies p{ flex:1 1 190px; margin:0; font-size:.8rem; color:var(--tinta-media); line-height:1.45 }
.cookies p a{ color:var(--vermelho); font-weight:600 }
.cookies-botoes{ display:flex; gap:var(--e-2); margin-left:auto }
/* "recusar" tem o MESMO peso visual de "aceitar": exigência da ANPD,
   banner com saída difícil não é consentimento livre. Encolheram juntos. */
.cookies-botoes .btn{
  flex:0 0 auto; min-height:34px; padding:7px var(--e-4);
  font-size:.8rem; border-radius:var(--r-pill);
}
.cookies-botoes .btn--contorno{ border-color:var(--vermelho); border-width:1px }

/* visível só para leitor de tela */
.so-leitor{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* a partir do tablet a barra encosta só no canto esquerdo, bem fora do caminho */
@media (min-width:560px){
  .cookies{ right:auto }
}

/* --------------------------------------------------------------------------
   17. Páginas de texto legal (termos.html, privacidade.html)
   -------------------------------------------------------------------------- */
.doc-topo{
  background:linear-gradient(150deg,var(--vermelho) 0%,var(--vermelho-medio) 100%);
  color:var(--creme); padding:var(--e-7) 0 var(--e-8);
}
.doc-topo .marca{ font-size:1.8rem }
.doc-topo h1{ font-size:clamp(1.7rem,1.3rem + 1.8vw,2.4rem); margin:var(--e-5) 0 var(--e-2) }
.doc-topo .doc-data{ color:rgba(255,244,242,.78); font-size:.88rem }
.doc-voltar{
  display:inline-flex; align-items:center; gap:var(--e-2);
  color:rgba(255,244,242,.8); text-decoration:none; font-size:.86rem; font-weight:600;
  margin-top:var(--e-5);
}
.doc-voltar:hover{ color:var(--creme); text-decoration:underline }

.doc{ max-width:46rem; padding-block:clamp(var(--e-6), 5vw, var(--e-8)) }
.doc h2{
  font-size:1.2rem; color:var(--vermelho); margin:var(--e-7) 0 var(--e-4);
  scroll-margin-top:calc(var(--nav-h) + var(--e-4));
}
.doc h2:first-child{ margin-top:0 }
.doc p,.doc li{ margin-bottom:var(--e-3); color:var(--tinta-media); font-size:1.02rem; line-height:1.7 }
.doc strong{ color:var(--tinta) }
.doc ul{ padding-left:var(--e-5); list-style:disc }
.doc a{ color:var(--vermelho); font-weight:600 }
.doc code{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.88em; background:var(--superficie-3); color:var(--tinta);
  padding:2px 6px; border-radius:6px; word-break:break-word;
}

.aviso{
  background:#fff6d9; border:1px solid var(--amarelo); border-left:4px solid var(--amarelo);
  border-radius:var(--r-md); padding:var(--e-4) var(--e-5); margin-bottom:var(--e-6); font-size:.93rem;
}
.aviso b{ display:block; margin-bottom:var(--e-1); text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; color:#8a6410 }
.aviso p{ color:var(--tinta-media); font-size:.93rem; margin:0 }

.destaque{
  background:var(--superficie); border-left:4px solid var(--amarelo);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:var(--e-4) var(--e-5);
  margin-bottom:var(--e-4); box-shadow:var(--sombra-1);
}
.destaque p:last-child{ margin-bottom:0 }

.tabela{ overflow-x:auto; border:1px solid var(--linha); border-radius:var(--r-md); background:var(--superficie); margin-bottom:var(--e-4) }
.tabela table{ border-collapse:collapse; width:100%; font-size:.92rem; min-width:420px }
.tabela th,.tabela td{ text-align:left; padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--linha) }
.tabela th{ background:var(--superficie-2); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-media) }
.tabela tr:last-child td{ border-bottom:0 }
.tabela td.sim{ color:#1b6b47; font-weight:700 }
.tabela td.nao{ color:var(--vermelho); font-weight:700 }

/* --------------------------------------------------------------------------
   18. Revelação no scroll
   -------------------------------------------------------------------------- */
/* Só entra em cena se o JS marcar <html class="js">: sem JS, nada fica invisível. */
.js .revelar{
  opacity:0; transform:translateY(22px);
  transition:opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1);
}
.js .revelar.visivel{ opacity:1; transform:none }

/* --------------------------------------------------------------------------
   19. prefers-reduced-motion: desliga movimento, mantém tudo legível
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .cupom-sobe,.cupom-deriva{ animation:none; opacity:.22 }
  .js .revelar{ opacity:1; transform:none }
  .btn:hover,.passo:hover,.cartao:hover{ transform:none }
}