/* =============================================================================
   Espaço Celebrarte Festas — style.css
   Direção de identidade "A — Redemoinho": a logo não é arco-íris parado, é um
   vórtice. O motivo estrutural do site é O ARCO — recorte de foto em arco,
   divisor de seção, filete sob o título. O arco-íris vive nos arcos; o resto da
   página é neutro sobre a tinta #0C1014 da própria logo.

   Depende de assets/css/tokens.css (paleta amostrada por pixel da logo).
   Sem framework, sem pré-processador, sem webfont externa.
   ============================================================================= */

/* ------------------------------------------------------------------ base ---
   Os tokens semânticos do tokens.css invertem no escuro do sistema. Como este
   site é escuro por decisão, cada seção declara o próprio par de campo
   (fundo/texto) e nada depende do tema do sistema operacional do visitante. */

:root {
  --campo: var(--celebra-tinta);
  --campo-suave: var(--celebra-tinta-1);
  --campo-linha: rgb(252 252 252 / 0.12);
  --campo-texto: var(--celebra-neblina);
  --campo-suave-texto: #9FA9B4;
  --campo-destaque: var(--celebra-amarelo);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--celebra-tinta);
  color: var(--campo-texto);
  font-family: var(--fonte-texto);
  font-size: var(--txt-md);
  line-height: var(--alt-linha-texto);
  -webkit-font-smoothing: antialiased;
  /* `clip` e não `hidden`: overflow-x:hidden em body faz o body virar
     contêiner de rolagem e mata o position:sticky do cabeçalho. O único
     estouro medido estava no herói, que já tem overflow:hidden — isto aqui é
     rede de segurança e não cria contêiner de rolagem. */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  line-height: var(--alt-linha-titulo);
  letter-spacing: var(--entreletra-titulo);
  margin: 0 0 var(--esp-4);
  text-wrap: balance;
}

h1 { font-size: var(--txt-3xl); }
h2 { font-size: var(--txt-2xl); }
h3 { font-size: var(--txt-xl); }
h4 { font-size: var(--txt-lg); }

p { margin: 0 0 var(--esp-4); text-wrap: pretty; }
p:last-child, ul:last-child { margin-bottom: 0; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

ul { margin: 0 0 var(--esp-4); padding-left: 1.15em; }
li { margin-bottom: var(--esp-2); }

strong { font-weight: var(--peso-forte); }

/* ------------------------------------------------------------- utilidades --- */

.conteudo {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 2.5rem);
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--camada-modal);
  background: var(--celebra-papel);
  color: var(--celebra-tinta);
  padding: var(--esp-3) var(--esp-4);
  border-radius: 0 0 var(--raio-sm) 0;
}
.pular:focus { left: 0; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.secao {
  position: relative;
  padding-block: clamp(3.25rem, 9vw, 6.5rem);
  background: var(--campo);
  color: var(--campo-texto);
}

.secao--clara {
  --campo: var(--celebra-papel);
  --campo-suave: var(--celebra-neblina);
  --campo-linha: rgb(12 16 20 / 0.12);
  --campo-texto: var(--celebra-tinta);
  --campo-suave-texto: #586471;
  --campo-destaque: var(--celebra-vermelho);
}

.secao--suave { --campo: var(--celebra-tinta-1); }

.secao__cabecalho { max-width: var(--largura-texto); margin-bottom: var(--esp-6); }

.etiqueta {
  display: inline-block;
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--entreletra-etiqueta);
  text-transform: uppercase;
  color: var(--campo-destaque);
  margin-bottom: var(--esp-3);
}

.entrada {
  color: var(--campo-suave-texto);
  font-size: var(--txt-lg);
  line-height: var(--alt-linha-texto);
  max-width: var(--largura-texto);
}

/* --------------------------------------------------- o arco: motivo da marca
   Três usos do mesmo recorte: moldura de foto, divisor e filete de título. */

.foto-arco {
  position: relative;
  margin: 0;
  padding: 7px;
  border-radius: 50% 50% var(--raio-lg) var(--raio-lg) / 24% 24% var(--raio-lg) var(--raio-lg);
  background-image: var(--grad-arcoiris);
  box-shadow: var(--sombra-lg);
}

.foto-arco > img,
.foto-arco > picture > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: inherit;
}

/* O nome "largo" é histórico: era um recorte 16:10 de foto de banco. Com as
   fotos reais (retrato 9:16 do Instagram) o arco passou a ser 4:5. */
.foto-arco--largo > img { aspect-ratio: 4 / 5; }

.foto-arco--meia {
  border-radius: 50% 50% var(--raio-md) var(--raio-md) / 24% 24% var(--raio-md) var(--raio-md);
}

.foto-arco figcaption {
  position: absolute;
  inset: auto 7px 7px;
  padding: var(--esp-5) var(--esp-4) var(--esp-3);
  background: var(--grad-veu);
  color: var(--celebra-papel);
  font-size: var(--txt-xs);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
}

.filete {
  height: 6px;
  border-radius: var(--raio-pill);
  background-image: var(--grad-arcoiris);
  opacity: 0.9;
}
.filete--fino { height: 4px; }

/* O filete curto que assina cada título de seção. */
.titulo-arco { position: relative; padding-bottom: var(--esp-4); }
.titulo-arco::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(56px, 14vw, 96px);
  height: 6px;
  border-radius: var(--raio-pill);
  background-image: var(--grad-marca);
}

/* O rodamoinho da logo, refeito em CSS, girando devagar ao fundo do herói. */
.espiral {
  position: absolute;
  border-radius: var(--raio-circulo);
  background: var(--grad-espiral);
  filter: blur(46px) saturate(1.15);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.espiral--giro { animation: girar 64s linear infinite; }

@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .espiral--giro { animation: none; }
}

/* --------------------------------------------------------------- botões --- */

.botao {
  --botao-fundo: var(--cor-destaque);
  --botao-texto: var(--celebra-papel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--toque-minimo);
  padding: var(--esp-3) var(--esp-5);
  border: 0;
  border-radius: var(--raio-pill);
  background: var(--botao-fundo);
  color: var(--botao-texto);
  font: inherit;
  font-weight: var(--peso-forte);
  font-size: var(--txt-sm);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicao-rapida), box-shadow var(--transicao-rapida), background-color var(--transicao-rapida);
}

.botao:hover { transform: translateY(-2px); box-shadow: var(--sombra-cor); }
.botao:active { transform: translateY(0); }

.botao--zap { --botao-fundo: #25D366; --botao-texto: #06281A; }
.botao--zap:hover { box-shadow: 0 12px 30px -12px rgb(37 211 102 / 0.5); }

.botao--vazio {
  --botao-fundo: transparent;
  --botao-texto: var(--campo-texto);
  border: 1.5px solid var(--campo-linha);
}
.botao--vazio:hover { background: var(--campo-suave); box-shadow: none; }

.botao--largo { width: 100%; }

.botao__icone { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* ------------------------------------------------------------- cabeçalho --- */

.topo {
  position: sticky;
  top: 0;
  z-index: var(--camada-cabecalho);
  background: rgb(12 16 20 / 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgb(252 252 252 / 0.08);
}

.topo__barra {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-height: var(--altura-cabecalho);
  transition: min-height var(--transicao-media);
}

.topo--compacto .topo__barra { min-height: var(--altura-cabecalho-compacto); }

.topo__marca { display: flex; align-items: center; gap: var(--esp-3); text-decoration: none; margin-right: auto; }
.topo__marca img { width: 42px; height: 42px; }
.topo__marca span { display: flex; flex-direction: column; line-height: 1.15; }
.topo__marca strong { font-family: var(--fonte-titulo); font-size: var(--txt-md); color: var(--celebra-papel); }
.topo__marca small { font-size: var(--txt-2xs); letter-spacing: var(--entreletra-etiqueta); text-transform: uppercase; color: #9FA9B4; }

.topo__menu { display: flex; align-items: center; gap: var(--esp-5); list-style: none; margin: 0; padding: 0; }
.topo__menu li { margin: 0; }
.topo__menu a {
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: #C9D0D8;
  text-decoration: none;
  padding-block: var(--esp-2);
  border-bottom: 2px solid transparent;
  transition: color var(--transicao-rapida), border-color var(--transicao-rapida);
}
.topo__menu a:hover { color: var(--celebra-papel); border-color: var(--celebra-laranja); }

.topo__cta { flex: none; }

@media (max-width: 900px) {
  .topo__menu { display: none; }
  .topo__marca small { display: none; }
}

@media (max-width: 420px) {
  .topo__cta .botao__rotulo { display: none; }
  .topo__cta { padding-inline: var(--esp-4); }
}

/* ------------------------------------------------------------------ herói --- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 7rem);
  background:
    radial-gradient(120% 90% at 82% 8%, rgb(107 52 201 / 0.30) 0%, transparent 55%),
    radial-gradient(100% 80% at 8% 92%, rgb(236 45 89 / 0.26) 0%, transparent 52%),
    var(--celebra-tinta);
}

.hero__grade {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 6vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grade { grid-template-columns: 1.05fr 0.95fr; }
}

.hero h1 { margin-bottom: var(--esp-5); }
.hero h1 em { font-style: normal; color: var(--celebra-amarelo); }

.hero__entrada {
  font-size: var(--txt-lg);
  color: #C2CAD3;
  max-width: 34em;
  margin-bottom: var(--esp-5);
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-bottom: var(--esp-6); }

.prova {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-5);
  padding-top: var(--esp-5);
  border-top: 1px solid rgb(252 252 252 / 0.12);
}

.prova__nota { display: flex; align-items: baseline; gap: var(--esp-2); }
.prova__nota b { font-size: var(--txt-2xl); font-family: var(--fonte-titulo); line-height: 1; color: var(--celebra-papel); }
.prova__estrelas { color: var(--celebra-amarelo); letter-spacing: 0.08em; font-size: var(--txt-md); }
.prova__texto { font-size: var(--txt-xs); color: #9FA9B4; }

.chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); list-style: none; margin: 0; padding: 0; }
.chips li {
  margin: 0;
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  color: #DCE2E8;
  background: rgb(252 252 252 / 0.07);
  border: 1px solid rgb(252 252 252 / 0.12);
  border-radius: var(--raio-pill);
  padding: var(--esp-2) var(--esp-4);
}

.selo-2027 {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-5);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-pill);
  background: var(--celebra-vermelho);
  color: var(--celebra-papel);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--entreletra-etiqueta);
  text-transform: uppercase;
}

.hero__midia { position: relative; }

/* O brasão no herói foi removido na verificação visual: a peça tem 128px de
   altura (ampliada 2,51x) e a 96px já serrilhava, o arquivo é 87x128 forçado
   num quadrado 96x96, e o selo caía exatamente sobre a legenda do arco. Na
   direção Redemoinho o arco é que assina a marca — o brasão não faz falta. */

@media (max-width: 899px) {
  .hero__midia { max-width: 460px; margin-inline: auto; }
}

/* ---------------------------------------------------- faixa de fatos (SEO) --- */

.fatos { margin: 0; padding: 0; display: grid; gap: 1px; background: var(--campo-linha); }
@media (min-width: 700px) { .fatos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fatos { grid-template-columns: repeat(4, 1fr); } }

.fatos > div { background: var(--campo); padding: var(--esp-5); }
.fatos dt {
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--entreletra-etiqueta);
  text-transform: uppercase;
  color: var(--campo-suave-texto);
  margin-bottom: var(--esp-2);
}
.fatos dd { margin: 0; font-size: var(--txt-sm); font-weight: var(--peso-medio); }
.fatos a { text-decoration-color: var(--celebra-vermelho); text-underline-offset: 3px; }

/* --------------------------------------------------------- o espaço: tour --- */

.grade-espaco {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
}
@media (min-width: 720px) { .grade-espaco { grid-template-columns: repeat(2, 1fr); } }
/* 4 colunas no desktop: cada card sai a ~264px de 540px de origem — 2x, que é
   o que garante nitidez em tela retina com o material que existe. */
@media (min-width: 1040px) { .grade-espaco { grid-template-columns: repeat(4, 1fr); } }

/* As fotos reais vêm do Instagram da empresa, todas em 9:16 (retrato). O
   formato 4:3 do layout original cortava 65% de cada uma e comia justamente o
   painel temático. Aqui o formato do card passou a acompanhar o material. */
.ambiente { position: relative; margin: 0; }
.ambiente > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raio-md);
  background: var(--campo-suave);
}
.ambiente figcaption { padding-top: var(--esp-3); font-size: var(--txt-xs); color: var(--campo-suave-texto); }
.ambiente figcaption b {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-md);
  color: var(--campo-texto);
  margin-bottom: var(--esp-1);
}

.aviso-fonte {
  margin-top: var(--esp-5);
  font-size: var(--txt-2xs);
  color: var(--campo-suave-texto);
}

/* --------------------------------------------------------------- pacotes --- */

.grade-pacotes { display: grid; gap: var(--esp-4); }
@media (min-width: 640px) { .grade-pacotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grade-pacotes { grid-template-columns: repeat(4, 1fr); } }

.pacote {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5);
  border: 1px solid var(--campo-linha);
  border-top: 5px solid var(--celebra-azul);
  border-radius: var(--raio-md);
  background: var(--campo-suave);
}
.pacote:nth-child(2) { border-top-color: var(--celebra-verde); }
.pacote:nth-child(3) { border-top-color: var(--celebra-laranja); }
.pacote:nth-child(4) { border-top-color: var(--celebra-magenta); }

.pacote header { display: flex; flex-direction: column; gap: var(--esp-1); }
.pacote h3 { font-size: var(--txt-lg); margin: 0; }
.pacote__publico {
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--entreletra-etiqueta);
  text-transform: uppercase;
  color: var(--campo-suave-texto);
}
.pacote p { font-size: var(--txt-sm); color: var(--campo-suave-texto); flex: 1; }
.pacote__valor {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-md);
  font-weight: var(--peso-forte);
  color: var(--campo-destaque);
}

/* ------------------------------------------------------------- orçamento --- */

.orcamento__grade { display: grid; gap: clamp(2rem, 6vw, 4rem); }
@media (min-width: 960px) { .orcamento__grade { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }

.formulario {
  display: grid;
  gap: var(--esp-4);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid var(--campo-linha);
  border-radius: var(--raio-lg);
  background: var(--campo-suave);
}

@media (min-width: 640px) {
  .formulario { grid-template-columns: repeat(2, 1fr); }
  .campo--inteiro { grid-column: 1 / -1; }
}

.campo { display: flex; flex-direction: column; gap: var(--esp-2); }
.campo label { font-size: var(--txt-sm); font-weight: var(--peso-medio); }
.campo .ajuda { font-size: var(--txt-2xs); color: var(--campo-suave-texto); }

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: var(--txt-sm);
  min-height: var(--toque-minimo);
  padding: var(--esp-3) var(--esp-4);
  color: var(--campo-texto);
  background: var(--campo);
  border: 1.5px solid var(--campo-linha);
  border-radius: var(--raio-sm);
  width: 100%;
}

.campo textarea { min-height: 96px; resize: vertical; }

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible { border-color: var(--cor-foco); }

.formulario__rodape { grid-column: 1 / -1; display: grid; gap: var(--esp-3); }
.formulario__rodape .ajuda { font-size: var(--txt-2xs); color: var(--campo-suave-texto); text-align: center; }

.erro { color: var(--celebra-vermelho); font-size: var(--txt-sm); font-weight: var(--peso-medio); }
.formulario__rodape .erro { text-align: center; }

/* ------------------------------------------------------------ avaliações --- */

.grade-avaliacoes { display: grid; gap: var(--esp-4); }
@media (min-width: 720px) { .grade-avaliacoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grade-avaliacoes { grid-template-columns: repeat(3, 1fr); } }

.avaliacao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-5);
  background: var(--campo-suave);
  border: 1px solid var(--campo-linha);
  border-radius: var(--raio-md);
  font-size: var(--txt-sm);
}
.avaliacao__topo { display: flex; align-items: center; gap: var(--esp-3); }
.avaliacao__inicial {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--raio-circulo);
  background-image: var(--grad-espiral);
  color: var(--celebra-papel);
  font-weight: var(--peso-forte);
  text-shadow: 0 1px 3px rgb(12 16 20 / 0.6);
}
.avaliacao__quem { display: flex; flex-direction: column; line-height: 1.25; }
.avaliacao__quem b { font-size: var(--txt-sm); }
.avaliacao__quem span { font-size: var(--txt-2xs); color: var(--campo-suave-texto); }
.avaliacao__estrelas { color: var(--celebra-amarelo); letter-spacing: 0.1em; font-size: var(--txt-xs); }
.avaliacao blockquote { margin: 0; font-size: var(--txt-sm); }
.avaliacao__resposta {
  margin-top: auto;
  padding-top: var(--esp-3);
  border-top: 1px dashed var(--campo-linha);
  font-size: var(--txt-2xs);
  color: var(--campo-suave-texto);
}

/* ------------------------------------------------------------- recreação --- */

.recreacao__grade { display: grid; gap: clamp(2rem, 6vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .recreacao__grade { grid-template-columns: 0.95fr 1.05fr; } }

.cartoes { display: grid; gap: var(--esp-3); list-style: none; margin: 0; padding: 0; }
.cartoes li {
  display: flex;
  gap: var(--esp-4);
  padding: var(--esp-4);
  border-radius: var(--raio-md);
  background: var(--campo-suave);
  border: 1px solid var(--campo-linha);
  margin: 0;
}
.cartoes b { display: block; margin-bottom: var(--esp-1); }
.cartoes p { font-size: var(--txt-sm); color: var(--campo-suave-texto); margin: 0; }
.cartoes__coroa { flex: none; width: 26px; color: var(--celebra-ouro); }

/* ------------------------------------------------------------ localização --- */

.local__grade { display: grid; gap: clamp(2rem, 6vw, 3.5rem); }
@media (min-width: 900px) { .local__grade { grid-template-columns: 1fr 1fr; align-items: center; } }

.endereco { font-style: normal; font-size: var(--txt-lg); line-height: 1.5; margin-bottom: var(--esp-5); }
.endereco b { font-family: var(--fonte-titulo); }

.mapa {
  border-radius: var(--raio-lg);
  border: 1px solid var(--campo-linha);
  overflow: hidden;
  background: var(--campo-suave);
  aspect-ratio: 4 / 3;
}
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------------- FAQ --- */

.faq { max-width: 860px; margin-inline: auto; display: grid; gap: var(--esp-3); }

.faq details {
  border: 1px solid var(--campo-linha);
  border-radius: var(--raio-md);
  background: var(--campo-suave);
  padding: var(--esp-4) var(--esp-5);
}
.faq summary {
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-md);
  font-weight: var(--peso-forte);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--fonte-texto);
  font-size: var(--txt-xl);
  color: var(--celebra-vermelho);
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { margin-bottom: var(--esp-3); }
.faq p { font-size: var(--txt-sm); color: var(--campo-suave-texto); }

/* ------------------------------------------------------------ redes sociais --- */

.redes { display: flex; flex-wrap: wrap; gap: var(--esp-3); list-style: none; margin: var(--esp-5) 0 0; padding: 0; }
.redes li { margin: 0; }
.redes a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--toque-minimo);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-pill);
  border: 1px solid var(--campo-linha);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  background: var(--campo-suave);
}
.redes a:hover { border-color: var(--celebra-vermelho); }
.redes svg { width: 18px; height: 18px; flex: none; }

/* ---------------------------------------------------------------- rodapé --- */

.rodape {
  background: var(--celebra-tinta);
  color: #9FA9B4;
  padding-block: clamp(2.5rem, 6vw, 4rem) var(--esp-6);
  font-size: var(--txt-sm);
  border-top: 1px solid rgb(252 252 252 / 0.08);
}
.rodape__grade { display: grid; gap: var(--esp-6); }
@media (min-width: 760px) { .rodape__grade { grid-template-columns: 1.2fr 1fr 1fr; } }
.rodape h2 { font-size: var(--txt-md); color: var(--celebra-papel); margin-bottom: var(--esp-3); }
.rodape ul { list-style: none; padding: 0; }
.rodape a { color: inherit; text-decoration-color: rgb(159 169 180 / 0.5); text-underline-offset: 3px; }
.rodape a:hover { color: var(--celebra-papel); }
.rodape__marca { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.rodape__marca img { width: 56px; height: 56px; }
.rodape__assinatura {
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid rgb(252 252 252 / 0.08);
  font-size: var(--txt-2xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-5);
  justify-content: space-between;
}

/* ------------------------------------------------- botão flutuante do zap --- */

.flutuante {
  position: fixed;
  right: clamp(1rem, 4vw, 1.75rem);
  bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: var(--camada-menu);
  width: 58px; height: 58px;
  border-radius: var(--raio-circulo);
  display: grid;
  place-items: center;
  background: #25D366;
  color: #06281A;
  box-shadow: 0 14px 30px -10px rgb(37 211 102 / 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transicao-media), transform var(--transicao-media), visibility var(--transicao-media);
}
.flutuante--visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.flutuante svg { width: 30px; height: 30px; fill: currentColor; }

/* ------------------------------------------------- aparecer ao rolar a página */

.anima { opacity: 0; transform: translateY(18px); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.anima--dentro { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anima { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ impressão --- */

@media print {
  .topo, .flutuante, .hero__acoes, .espiral { display: none; }
  body { background: #fff; color: #000; }
  .secao { background: #fff; color: #000; padding-block: 1.5rem; }
  .faq details { break-inside: avoid; }
}