/* =========================================================
   Churros do Tio — desde 1976
   Paleta e formas derivadas da própria marca:
   verde garrafa do logotipo, ouro da rosácea, vermelho do toldo.
   ========================================================= */

:root{
  /* cores extraídas do logotipo original */
  --verde:#133B19;
  --verde-fundo:#0B2410;
  --verde-carta:#15421D;
  --verde-linha:#22572B;
  --ouro:#DC9000;
  --ouro-claro:#F5C765;
  --ouro-escuro:#A66A00;
  --vermelho:#9E1714;
  --creme:#F7F0E2;
  --creme-papel:#F3EADA;
  --creme-fraco:rgba(247,240,226,.66);
  --creme-tenue:rgba(247,240,226,.14);

  --fonte-titulo:'Bodoni Moda', 'Times New Roman', serif;
  --fonte-selo:'Cinzel', 'Times New Roman', serif;
  --fonte-texto:'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --largura:1180px;
  --raio:2px;
  --sombra:0 24px 60px rgba(0,0,0,.38);
  --transicao:.55s cubic-bezier(.22,.7,.26,1);
  --topo:78px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topo) + 20px);
}

body{
  margin:0;
  background:var(--verde-fundo);
  color:var(--creme);
  font-family:var(--fonte-texto);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

::selection{background:var(--ouro);color:var(--verde-fundo)}

:focus-visible{
  outline:2px solid var(--ouro-claro);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{
  font-family:var(--fonte-titulo);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.4vw,4.9rem)}
h2{font-size:clamp(2rem,4.3vw,3.25rem)}
h3{font-size:clamp(1.3rem,2.1vw,1.72rem)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.sobrancelha{
  font-family:var(--fonte-selo);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ouro);
  display:flex;
  align-items:center;
  gap:.85em;
  margin:0 0 1.5rem;
}
.sobrancelha::before{
  content:"";
  width:34px;height:1px;
  background:var(--ouro);
  flex:none;
}
.sobrancelha--centro{justify-content:center}
.sobrancelha--centro::after{
  content:"";width:34px;height:1px;background:var(--ouro);flex:none;
}

.destaque{
  font-family:var(--fonte-titulo);
  font-style:italic;
  color:var(--ouro-claro);
}

.texto-guia{
  font-size:1.09rem;
  color:var(--creme-fraco);
  max-width:60ch;
}

/* ---------- estruturas ---------- */
.envelope{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:24px;
}
.secao{padding-block:clamp(72px,10vw,132px)}
.secao--papel{
  background:var(--creme-papel);
  color:var(--verde);
}
.secao--papel .texto-guia{color:rgba(19,59,25,.74)}
.secao--papel .cartao .texto-guia,
.secao--papel .cartao-servico .texto-guia{color:var(--creme-fraco)}
.secao--papel .sobrancelha{color:var(--ouro-escuro)}
.secao--papel .sobrancelha::before,
.secao--papel .sobrancelha::after{background:var(--ouro-escuro)}
.secao--papel .destaque{color:var(--ouro-escuro)}

.cabecalho-secao{max-width:44rem;margin-bottom:clamp(40px,5vw,68px)}
.cabecalho-secao--centro{margin-inline:auto;text-align:center}
.cabecalho-secao--centro .sobrancelha{justify-content:center}
.cabecalho-secao--centro .sobrancelha::after{
  content:"";width:34px;height:1px;background:currentColor;flex:none;
}
.cabecalho-secao p{margin-top:1.2rem}
h2+.texto-guia,h2+p,h3+.texto-guia{margin-top:1.35rem}
.texto-guia+.lista-estrela,.texto-guia+.grupo-botoes{margin-top:1.9rem}
.lista-estrela+.grupo-botoes{margin-top:2.1rem}
.cabecalho-secao--centro p{margin-inline:auto}

/* ---------- faixa de toldo (listras do logotipo) ---------- */
.toldo{
  height:7px;
  background:repeating-linear-gradient(
    90deg,
    var(--vermelho) 0 14px,
    var(--ouro) 14px 28px
  );
  flex:none;
}
.toldo--fino{height:5px}

/* ---------- botões ---------- */
.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:1.05em 2.1em;
  font-family:var(--fonte-selo);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  border:1px solid var(--ouro);
  border-radius:var(--raio);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .4s ease, border-color .4s ease, transform .4s ease;
  text-align:center;
}
.botao::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--ouro);
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.22,.7,.26,1);
}
.botao--cheio{background:var(--ouro);color:var(--verde-fundo)}
.botao--cheio::after{background:var(--ouro-claro);}
.botao--vazado{color:var(--ouro);background:transparent}
.secao--papel .botao--vazado{color:var(--ouro-escuro);border-color:var(--ouro-escuro)}
.secao--papel .botao--vazado:hover,.secao--papel .botao--vazado:focus-visible{color:var(--creme)}
.secao--papel .botao--vazado::after{background:var(--ouro-escuro)}
.botao--vazado:hover,.botao--vazado:focus-visible{color:var(--verde-fundo)}
.botao:hover::after,.botao:focus-visible::after{transform:translateY(0)}
.botao:hover{transform:translateY(-2px)}
.botao:active{transform:translateY(0)}
.botao svg{width:1.05em;height:1.05em;fill:currentColor;flex:none}

.grupo-botoes{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- cabeçalho ---------- */
.topo{
  position:fixed;
  inset:0 0 auto;
  z-index:90;
  background:rgba(11,36,16,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease;
}
.topo.rolou{
  background:rgba(11,36,16,.97);
  border-bottom-color:rgba(220,144,0,.26);
}
.topo__interno{
  height:var(--topo);
  display:flex;
  align-items:center;
  gap:24px;
}
.marca{display:flex;align-items:center;gap:12px;flex:none}
.marca img{height:42px;width:auto;transition:height var(--transicao)}
.topo.rolou .marca img{height:36px}
.marca__texto{display:flex;flex-direction:column;line-height:1}
.marca__nome{
  font-family:var(--fonte-selo);
  font-size:.9rem;font-weight:700;letter-spacing:.14em;
  color:var(--creme);text-transform:uppercase;
}
.marca__ano{
  font-family:var(--fonte-selo);
  font-size:.58rem;letter-spacing:.3em;color:var(--ouro);
  margin-top:5px;text-transform:uppercase;
}

.menu{display:flex;align-items:center;gap:30px;margin-left:auto}
.menu a{
  font-size:.83rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--creme-fraco);
  position:relative;
  padding-block:6px;
  transition:color .3s ease;
  white-space:nowrap;
}
.menu a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ouro);
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.22,.7,.26,1);
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--creme)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu .botao{padding:.82em 1.5em;font-size:.7rem}
.menu .botao::after{background:var(--ouro-claro)}

.abrir-menu{
  display:none;
  margin-left:auto;
  width:44px;height:44px;
  background:none;border:1px solid var(--verde-linha);
  border-radius:var(--raio);
  align-items:center;justify-content:center;
  cursor:pointer;
}
.abrir-menu span{
  display:block;width:19px;height:1.5px;background:var(--creme);
  position:relative;transition:background .2s ease;
}
.abrir-menu span::before,.abrir-menu span::after{
  content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--creme);
  transition:transform .35s cubic-bezier(.22,.7,.26,1);
}
.abrir-menu span::before{top:-6px}
.abrir-menu span::after{top:6px}
body.menu-aberto .abrir-menu span{background:transparent}
body.menu-aberto .abrir-menu span::before{transform:translateY(6px) rotate(45deg)}
body.menu-aberto .abrir-menu span::after{transform:translateY(-6px) rotate(-45deg)}

.menu-movel{
  position:fixed;
  inset:var(--topo) 0 auto;
  background:var(--verde-fundo);
  border-bottom:1px solid var(--verde-linha);
  padding:26px 24px 34px;
  display:none;
  flex-direction:column;
  gap:4px;
  z-index:89;
  max-height:calc(100dvh - var(--topo));
  overflow-y:auto;
}
.menu-movel a{
  font-family:var(--fonte-titulo);
  font-size:1.5rem;
  padding:11px 0;
  border-bottom:1px solid rgba(247,240,226,.08);
  color:var(--creme);
}
.menu-movel a:last-of-type{border-bottom:none}
.menu-movel .botao{margin-top:20px}
body.menu-aberto .menu-movel{display:flex}
body.menu-aberto{overflow:hidden}

/* ---------- selo giratório (elemento assinatura) ---------- */
.selo{
  width:var(--selo,146px);
  height:var(--selo,146px);
  flex:none;
  position:relative;
}
.selo svg{width:100%;height:100%;display:block;overflow:visible}
.selo__anel{
  animation:girar 26s linear infinite;
  transform-origin:50% 50%;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- capa (hero) ---------- */
.capa{
  position:relative;
  padding-top:calc(var(--topo) + clamp(48px,7vw,86px));
  padding-bottom:clamp(64px,8vw,110px);
  overflow:hidden;
  isolation:isolate;
}
.capa__fundo{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(220,144,0,.16), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(158,23,20,.20), transparent 60%),
    var(--verde-fundo);
}
.capa__marca-agua{
  position:absolute;
  z-index:-1;
  top:-6%;
  left:50%;
  width:min(760px,105vw);
  opacity:.055;
  transform:translateX(-50%);
  pointer-events:none;
  animation:flutuar 22s ease-in-out infinite alternate;
}
@keyframes flutuar{
  from{transform:translateX(-50%) translateY(0) rotate(-2.5deg)}
  to{transform:translateX(-50%) translateY(26px) rotate(2.5deg)}
}

.capa__grade{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(36px,5.5vw,80px);
  align-items:center;
}
.capa__titulo{max-width:15ch}
.capa__texto{margin-top:1.8rem;max-width:46ch}
.capa__texto+.capa__texto{margin-top:0}
.capa__acoes{margin-top:2.4rem}

.capa__provas{
  display:flex;
  flex-wrap:wrap;
  gap:14px 34px;
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--creme-tenue);
}
.prova{display:flex;flex-direction:column;gap:2px}
.prova__num{
  font-family:var(--fonte-titulo);
  font-size:1.85rem;
  color:var(--ouro-claro);
  line-height:1;
}
.prova__rot{
  font-family:var(--fonte-selo);
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--creme-fraco);
}

/* moldura da foto — proporção travada, imagem nunca deforma */
.moldura{
  position:relative;
  border:1px solid rgba(220,144,0,.42);
  padding:11px;
  background:linear-gradient(150deg, rgba(220,144,0,.13), rgba(220,144,0,0) 55%);
}
.moldura__foto{
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--prop,4/5);
  background:var(--verde-carta);
}
.moldura__foto img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--foco,center);
  transition:transform 1.1s cubic-bezier(.22,.7,.26,1);
}
.moldura:hover .moldura__foto img{transform:scale(1.035)}
.moldura__selo{
  position:absolute;
  left:-34px;
  bottom:-30px;
  --selo:150px;
  z-index:2;
}
.moldura__legenda{
  position:absolute;
  right:14px;bottom:14px;
  background:rgba(11,36,16,.86);
  border:1px solid rgba(220,144,0,.32);
  padding:.55em 1em;
  font-family:var(--fonte-selo);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ouro-claro);
}

/* capa interna das páginas ---------- */
.capa-pagina{
  position:relative;
  padding-top:calc(var(--topo) + clamp(52px,6vw,84px));
  padding-bottom:clamp(52px,6vw,84px);
  overflow:hidden;
  isolation:isolate;
}
.capa-pagina__fundo{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(110% 100% at 84% 0%, rgba(220,144,0,.15), transparent 62%),
    var(--verde-fundo);
}
.capa-pagina__grade{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.capa-pagina h1{font-size:clamp(2.3rem,5vw,3.9rem)}
.capa-pagina .texto-guia{margin-top:1.5rem}
.capa-pagina .grupo-botoes{margin-top:2.2rem}

.migalhas{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
  font-family:var(--fonte-selo);
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,240,226,.5);
  margin-bottom:1.6rem;
}
.migalhas a:hover{color:var(--ouro)}
.migalhas span[aria-hidden]{color:var(--ouro);opacity:.7}
.migalhas [aria-current]{color:var(--ouro-claro)}

/* ---------- cartões ---------- */
.grade{display:grid;gap:22px}
.grade--2{grid-template-columns:repeat(2,1fr)}
.grade--3{grid-template-columns:repeat(3,1fr)}
.grade--4{grid-template-columns:repeat(4,1fr)}

.cartao{
  position:relative;
  color:var(--creme);
  background:var(--verde-carta);
  border:1px solid var(--verde-linha);
  padding:32px 28px 34px;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:border-color .45s ease, transform .45s cubic-bezier(.22,.7,.26,1), background .45s ease;
}
.cartao::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--vermelho) 0 10px,var(--ouro) 10px 20px);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.22,.7,.26,1);
}
.cartao:hover{
  border-color:rgba(220,144,0,.48);
  transform:translateY(-5px);
  background:#173F1E;
}
.cartao:hover::before{transform:scaleX(1)}
.cartao h3{margin-bottom:.7rem}
.cartao p{color:var(--creme-fraco);font-size:.97rem}

.cartao__icone{
  width:52px;height:52px;
  margin-bottom:22px;
  color:var(--ouro);
}
.cartao__icone svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}

/* cartão de serviço com foto */
.cartao-servico{
  display:flex;flex-direction:column;
  color:var(--creme);
  background:var(--verde-carta);
  border:1px solid var(--verde-linha);
  overflow:hidden;
  transition:border-color .45s ease, transform .45s cubic-bezier(.22,.7,.26,1);
}
.cartao-servico:hover{border-color:rgba(220,144,0,.5);transform:translateY(-5px)}
.cartao-servico__foto{
  position:relative;
  aspect-ratio:16/11;
  overflow:hidden;
  background:var(--verde);
}
.cartao-servico__foto img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--foco,center);
  transition:transform 1s cubic-bezier(.22,.7,.26,1), filter .6s ease;
  filter:saturate(.92);
}
.cartao-servico:hover .cartao-servico__foto img{transform:scale(1.06);filter:saturate(1.05)}
.cartao-servico__faixa{
  position:absolute;left:0;right:0;bottom:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--vermelho) 0 12px,var(--ouro) 12px 24px);
}
.cartao-servico__corpo{padding:28px 26px 30px;display:flex;flex-direction:column;flex:1}
.cartao-servico__corpo p{color:var(--creme-fraco);font-size:.96rem;flex:1}
.cartao-servico h3{margin-bottom:.65rem;font-size:1.42rem}
.seta-link{
  margin-top:20px;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--fonte-selo);
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ouro);
}
.seta-link svg{width:14px;height:9px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .4s ease}
.cartao-servico:hover .seta-link svg,.seta-link:hover svg{transform:translateX(6px)}

/* ---------- placa da loja física (assinatura estilo letreiro) ---------- */
.placa{
  margin-top:22px;
  border:1px solid rgba(220,144,0,.4);
  background:rgba(220,144,0,.06);
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:center;
}
.placa span:first-child{
  font-family:var(--fonte-selo);
  font-size:.85rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ouro-claro);
}
.placa span:nth-child(2){
  font-family:var(--fonte-texto);
  font-size:.95rem;color:var(--creme);
}
.placa span:last-child{
  font-family:var(--fonte-titulo);
  font-style:italic;font-size:.92rem;color:var(--creme-fraco);
}
.secao--papel .placa{background:rgba(220,144,0,.09);border-color:rgba(166,106,0,.42)}
.secao--papel .placa span:first-child{color:var(--ouro-escuro)}
.secao--papel .placa span:nth-child(2){color:var(--verde)}
.secao--papel .placa span:last-child{color:rgba(19,59,25,.7)}

/* ---------- lista de itens com marcador estrela ---------- */
.lista-estrela{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista-estrela li{
  position:relative;
  padding-left:34px;
  color:var(--creme-fraco);
  font-size:1rem;
}
.lista-estrela li::before{
  content:"";
  position:absolute;left:0;top:.52em;
  width:15px;height:15px;
  background:var(--ouro);
  -webkit-mask:var(--estrela) center/contain no-repeat;
  mask:var(--estrela) center/contain no-repeat;
}
.lista-estrela strong{color:var(--creme);font-weight:700}
.secao--papel .lista-estrela li{color:rgba(19,59,25,.78)}
.secao--papel .lista-estrela strong{color:var(--verde)}
.secao--papel .lista-estrela li::before{background:var(--ouro-escuro)}

/* ---------- etapas numeradas (só onde a ordem importa) ---------- */
.etapas{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  counter-reset:passo;
}
.etapa{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:26px;
  padding:30px 0;
  border-top:1px solid var(--creme-tenue);
  counter-increment:passo;
  align-items:start;
}
.etapa:last-child{border-bottom:1px solid var(--creme-tenue)}
.etapa__num{
  font-family:var(--fonte-titulo);
  font-size:2.5rem;
  line-height:1;
  color:var(--ouro);
}
.etapa__num::before{content:"0" counter(passo)}
.etapa h3{margin-bottom:.55rem;font-size:1.35rem}
.etapa p{color:var(--creme-fraco);margin:0;font-size:1rem}
.secao--papel .etapa{border-color:rgba(19,59,25,.16)}
.secao--papel .etapa__num{color:var(--ouro-escuro)}
.secao--papel .etapa p{color:rgba(19,59,25,.74)}

/* ---------- linha do tempo ---------- */
.tempo{list-style:none;margin:0;padding:0;position:relative}
.tempo::before{
  content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(var(--ouro),rgba(220,144,0,.08));
}
.tempo li{position:relative;padding:0 0 38px 44px}
.tempo li:last-child{padding-bottom:0}
.tempo li::before{
  content:"";position:absolute;left:0;top:9px;
  width:15px;height:15px;background:var(--ouro);
  -webkit-mask:var(--estrela) center/contain no-repeat;
  mask:var(--estrela) center/contain no-repeat;
}
.tempo__ano{
  font-family:var(--fonte-selo);
  font-size:.68rem;letter-spacing:.26em;color:var(--ouro);
  text-transform:uppercase;display:block;margin-bottom:.45rem;
}
.tempo h3{font-size:1.3rem;margin-bottom:.45rem}
.tempo p{color:var(--creme-fraco);font-size:1rem;margin:0}

/* ---------- fichas / chips ---------- */
.fichas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.fichas li{
  border:1px solid rgba(220,144,0,.4);
  color:var(--creme);
  padding:.6em 1.15em;
  font-family:var(--fonte-selo);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(220,144,0,.06);
}
.secao--papel .fichas li{color:var(--verde);border-color:rgba(166,106,0,.42);background:rgba(220,144,0,.09)}

/* ---------- bloco dividido texto + imagem ---------- */
.dividido{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,76px);
  align-items:center;
}
.dividido--invertido .dividido__midia{order:-1}

/* ---------- galeria ---------- */
.galeria{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.galeria__item{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;
  background:var(--verde-carta);
  border:1px solid var(--verde-linha);
}
.galeria__item img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--foco,center);
  transition:transform 1s cubic-bezier(.22,.7,.26,1);
}
.galeria__item:hover img{transform:scale(1.07)}
.galeria__item--largo{grid-column:span 2;aspect-ratio:3/2}

/* ---------- vídeo ---------- */
.vitrine-video{
  position:relative;
  max-width:392px;
  margin-inline:auto;
  border:1px solid rgba(220,144,0,.34);
  padding:11px;
  background:linear-gradient(150deg,rgba(220,144,0,.12),transparent 60%);
}
.vitrine-video__quadro{
  position:relative;
  aspect-ratio:9/16;
  overflow:hidden;
  background:var(--verde);
}
.vitrine-video__quadro video,
.vitrine-video__quadro img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.vitrine-video__quadro video{position:absolute;inset:0}

/* ---------- perguntas ---------- */
.perguntas{border-top:1px solid var(--creme-tenue)}
.pergunta{border-bottom:1px solid var(--creme-tenue)}
.pergunta__botao{
  width:100%;
  background:none;border:none;
  display:flex;align-items:flex-start;gap:20px;
  padding:26px 0;
  text-align:left;
  cursor:pointer;
  font-family:var(--fonte-titulo);
  font-size:clamp(1.08rem,1.7vw,1.32rem);
  font-weight:600;
  color:var(--creme);
  transition:color .3s ease;
}
.pergunta__botao:hover{color:var(--ouro-claro)}
.pergunta__mais{
  margin-left:auto;flex:none;
  width:22px;height:22px;position:relative;margin-top:.35em;
}
.pergunta__mais::before,.pergunta__mais::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ouro);
  transform:translate(-50%,-50%);
  transition:transform .4s cubic-bezier(.22,.7,.26,1), opacity .3s ease;
}
.pergunta__mais::before{width:15px;height:1.5px}
.pergunta__mais::after{width:1.5px;height:15px}
.pergunta[data-aberta] .pergunta__mais::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.pergunta__resposta{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.22,.7,.26,1);
}
.pergunta[data-aberta] .pergunta__resposta{grid-template-rows:1fr}
.pergunta__resposta>div{overflow:hidden}
.pergunta__resposta p{
  color:var(--creme-fraco);
  padding:0 42px 28px 0;
  max-width:66ch;
  margin:0;
}
.secao--papel .perguntas,.secao--papel .pergunta{border-color:rgba(19,59,25,.16)}
.secao--papel .pergunta__botao{color:var(--verde)}
.secao--papel .pergunta__botao:hover{color:var(--ouro-escuro)}
.secao--papel .pergunta__mais::before,.secao--papel .pergunta__mais::after{background:var(--ouro-escuro)}
.secao--papel .pergunta__resposta p{color:rgba(19,59,25,.76)}

/* ---------- chamada final ---------- */
.chamada{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  padding-block:clamp(76px,9vw,124px);
  background:var(--verde);
}
.chamada__fundo{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(220,144,0,.22), transparent 62%),
    radial-gradient(60% 90% at 50% 100%, rgba(158,23,20,.28), transparent 60%);
}
.chamada .selo{margin:0 auto 30px;--selo:132px}
.chamada h2{max-width:19ch;margin-inline:auto}
.chamada .texto-guia{margin:1.4rem auto 0;text-align:center}
.chamada .grupo-botoes{justify-content:center;margin-top:2.6rem}
.chamada__contato{
  margin-top:2.4rem;
  font-family:var(--fonte-selo);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(247,240,226,.62);
}
.chamada__contato a{color:var(--ouro-claro)}

/* ---------- rodapé ---------- */
.rodape{background:#081C0C;padding-block:clamp(56px,6vw,80px) 0}
.rodape__grade{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:52px;
}
.rodape h4{
  font-family:var(--fonte-selo);
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:20px;
}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rodape a,.rodape p{color:rgba(247,240,226,.6);font-size:.94rem}
.rodape a{transition:color .3s ease}
.rodape a:hover{color:var(--ouro-claro)}
.rodape__logo{height:66px;width:auto;margin-bottom:20px}
.rodape__base{
  border-top:1px solid rgba(247,240,226,.1);
  padding-block:24px 30px;
  display:flex;flex-wrap:wrap;gap:12px 26px;
  align-items:center;justify-content:space-between;
  font-size:.8rem;color:rgba(247,240,226,.42);
}
.redes{display:flex;gap:12px;margin-top:22px}
.redes a{
  width:42px;height:42px;
  border:1px solid var(--verde-linha);
  display:grid;place-items:center;
  transition:border-color .35s ease, background .35s ease, transform .35s ease;
}
.redes a:hover{border-color:var(--ouro);background:rgba(220,144,0,.1);transform:translateY(-3px)}
.redes svg{width:17px;height:17px;fill:currentColor}

/* ---------- botão flutuante whatsapp ---------- */
.zap{
  position:fixed;
  right:18px;bottom:18px;
  z-index:80;
  display:flex;align-items:center;gap:10px;
  background:var(--ouro);
  color:var(--verde-fundo);
  padding:.85em 1.3em;
  border-radius:100px;
  font-family:var(--fonte-selo);
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  transform:translateY(120%);
  transition:transform .5s cubic-bezier(.22,.7,.26,1), background .3s ease;
}
.zap.visivel{transform:translateY(0)}
.zap:hover{background:var(--ouro-claro)}
.zap svg{width:19px;height:19px;fill:currentColor;flex:none}

/* ---------- animações de entrada ---------- */
[data-revelar]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.22,.7,.26,1), transform .85s cubic-bezier(.22,.7,.26,1);
  transition-delay:var(--atraso,0ms);
}
[data-revelar].revelado{opacity:1;transform:none}

.abre-linha{overflow:hidden;display:block}
.abre-linha>span{
  display:block;
  transform:translateY(105%);
  animation:subir .95s cubic-bezier(.22,.7,.26,1) forwards;
  animation-delay:var(--atraso,0ms);
}
@keyframes subir{to{transform:translateY(0)}}

.entra{opacity:0;animation:entrar .95s cubic-bezier(.22,.7,.26,1) forwards;animation-delay:var(--atraso,0ms)}
@keyframes entrar{to{opacity:1;transform:none}}
.entra--sobe{transform:translateY(24px)}
.entra--zoom{transform:scale(.965)}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .rodape__grade{grid-template-columns:1fr 1fr}
  .grade--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .menu{display:none}
  .abrir-menu{display:flex}
  .capa__grade,.capa-pagina__grade,.dividido{grid-template-columns:1fr}
  .dividido--invertido .dividido__midia{order:0}
  .capa__midia,.capa-pagina__midia{max-width:460px;width:100%}
  .capa__titulo{max-width:none}
  .moldura__selo{left:auto;right:-14px;bottom:-24px;--selo:104px}
  .moldura__legenda{right:auto;left:14px}
  .grade--3{grid-template-columns:repeat(2,1fr)}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .galeria__item--largo{grid-column:span 2}
}
@media (max-width:680px){
  body{font-size:16px}
  .envelope{padding-inline:20px}
  .grade--2,.grade--3,.grade--4{grid-template-columns:1fr}
  .etapa{grid-template-columns:1fr;gap:10px}
  .etapa__num{font-size:2rem}
  .grupo-botoes .botao{width:100%}
  .capa__provas{gap:18px 26px}
  .prova__num{font-size:1.5rem}
  .rodape__grade{grid-template-columns:1fr;gap:34px}
  .moldura{padding:8px}
  .moldura__selo{--selo:88px;right:-8px;bottom:-18px}
  .zap span{display:none}
  .zap{padding:1em;border-radius:50%}
  .pergunta__resposta p{padding-right:0}
}

/* ---------- acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-revelar]{opacity:1;transform:none}
  .abre-linha>span,.entra{opacity:1;transform:none}
}

/* ---------- impressão ---------- */
@media print{
  .topo,.zap,.menu-movel,.chamada,.vitrine-video{display:none !important}
  body{background:#fff;color:#000}
}