/* ---------------------------------------------------------------
   Coletivo Popular Vista Bela em Movimento
   Paleta tirada da logo do coletivo: preto, vermelho e verde.
   Sem framework e sem fonte externa — tem que abrir rápido no 3G
   do bairro, que é onde este site vai ser aberto de verdade.

   As animações usam scroll-driven animations quando o navegador
   tem (Chrome/Edge modernos) e caem num IntersectionObserver
   quando não tem. Quem pede "reduzir movimento" não vê nenhuma.
   --------------------------------------------------------------- */

:root {
  --preto:        #0C0C0E;
  --preto-2:      #17171B;
  --papel:        #FBF8F3;
  --areia:        #F0E9DD;
  --vermelho:     #E1251B;
  --vermelho-esc: #A6120C;
  --vermelho-luz: #FF6B5E;
  --verde:        #12855A;
  --verde-claro:  #19A86F;
  --texto:        #17171B;
  --texto-suave:  #55555F;
  --borda:        rgba(12,12,14,.13);
  --raio:         16px;
  --raio-p:       10px;
  --sombra:       0 14px 34px rgba(12,12,14,.10);
  --sombra-forte: 0 22px 50px rgba(12,12,14,.22);
  --largura:      1160px;
  --topo-altura:  72px;
  --transicao:    .28s cubic-bezier(.2,.7,.3,1);
  --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
  accent-color: var(--verde);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--vermelho-esc); }

/* âncora não pode parar embaixo do cabeçalho grudado */
:target, section[id] { scroll-margin-top: calc(var(--topo-altura) + 16px); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--verde-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- barra de progresso da leitura ---------- */

.progresso {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--vermelho), var(--verde));
  transform: scaleX(0); transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .progresso {
    animation: cresce linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes cresce { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .progresso { display: none; } }

/* ---------- estrutura ---------- */

.env { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }

.secao { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.secao--areia { background: var(--areia); }
.secao--preto { background: var(--preto); color: #fff; }

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--vermelho); color: #fff; padding: .8rem 1.2rem; z-index: 999;
}
.pular:focus { left: 1rem; top: 1rem; }

/* ---------- tipografia ---------- */

.rotulo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vermelho); margin: 0 0 1rem;
}
.rotulo::before {
  content: ""; width: 28px; height: 3px; background: var(--vermelho); border-radius: 2px;
}
.secao--preto .rotulo, .historia__destaque .rotulo { color: var(--vermelho-luz); }
.secao--preto .rotulo::before, .historia__destaque .rotulo::before { background: var(--vermelho-luz); }

h1, h2, h3 {
  line-height: 1.1; letter-spacing: -.02em; margin: 0 0 1rem; font-weight: 800;
  text-wrap: balance;
}
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { text-wrap: pretty; }

.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--texto-suave); max-width: 62ch; }
.secao--preto .lead { color: rgba(255,255,255,.75); }
.centro { text-align: center; }
.centro .rotulo { justify-content: center; }
.centro .lead { margin-inline: auto; }

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

.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px;                      /* alvo de toque confortável no celular */
  padding: .95rem 1.7rem; border-radius: 100px; border: 2px solid transparent;
  font: inherit; font-weight: 800; font-size: 1rem; text-decoration: none;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background var(--transicao), color var(--transicao);
}
.bt--vermelho { background: var(--vermelho); color: #fff; box-shadow: 0 10px 24px rgba(225,37,27,.32); }
.bt--verde { background: var(--verde); color: #fff; box-shadow: 0 10px 24px rgba(18,133,90,.30); }
.bt--linha { border-color: currentColor; color: inherit; background: transparent; }

@media (hover: hover) and (pointer: fine) {
  .bt:hover { transform: translateY(-2px); }
  .bt--vermelho:hover { background: var(--vermelho-esc); box-shadow: 0 16px 32px rgba(225,37,27,.42); }
  .bt--verde:hover { background: var(--verde-claro); }
  .bt--linha:hover { background: rgba(255,255,255,.10); }
  .secao--areia .bt--linha:hover { background: rgba(12,12,14,.06); }
}
.bt:active { transform: translateY(1px) scale(.99); }
.botoes { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

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

.topo {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,12,14,.92);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
@supports (backdrop-filter: blur(12px)) {
  .topo { background: rgba(12,12,14,.72); backdrop-filter: saturate(150%) blur(14px); }
}
.topo__linha { display: flex; align-items: center; gap: 1rem; min-height: var(--topo-altura); }

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; margin-right: auto; }
.marca img { width: 42px; height: 42px; border-radius: 10px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__nome { font-weight: 900; font-size: .98rem; letter-spacing: -.01em; }
.marca__sub { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }

.menu { display: flex; align-items: center; gap: .3rem; }
.menu a {
  color: rgba(255,255,255,.82); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .55rem .85rem; border-radius: 100px; position: relative;
  transition: color var(--transicao), background var(--transicao);
}
@media (hover: hover) { .menu a:hover { color: #fff; background: rgba(255,255,255,.10); } }
.menu .bt { padding: .6rem 1.2rem; font-size: .92rem; margin-left: .4rem; min-height: 42px; }

.abrir-menu {
  display: none; background: none; border: 0; color: #fff; cursor: pointer;
  width: 48px; height: 48px; place-items: center; border-radius: 12px;
}
.abrir-menu svg { width: 26px; height: 26px; }
.abrir-menu span { position: absolute; left: -9999px; }

@media (max-width: 900px) {
  .abrir-menu { display: grid; }
  .menu {
    position: fixed; inset: var(--topo-altura) 0 auto; flex-direction: column; align-items: stretch;
    background: var(--preto); padding: 1rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom));
    gap: .2rem; border-bottom: 1px solid rgba(255,255,255,.12);
    max-height: calc(100dvh - var(--topo-altura)); overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-115%); visibility: hidden;
    transition: transform var(--transicao), visibility 0s .3s;
  }
  .menu[data-aberto="1"] { transform: translateY(0); visibility: visible; transition: transform var(--transicao); }
  .menu a { padding: .9rem 1rem; font-size: 1.05rem; }
  .menu .bt { margin: .6rem 0 0; }
}

/* ---------- abertura ---------- */

.hero {
  position: relative; overflow: hidden;
  background: var(--preto); color: #fff;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3.5rem, 8vw, 6rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.030) 0 2px, transparent 2px 15px);
}
.hero::after {
  content: ""; position: absolute; right: -18%; top: -35%; pointer-events: none;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(225,37,27,.30), transparent 62%);
}
.hero__grade {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 900px) { .hero__grade { grid-template-columns: 1fr; } }

.hero h1 {
  font-size: clamp(2.3rem, 6.2vw, 4.3rem); font-weight: 900;
  letter-spacing: -.035em; margin: 0 0 1.25rem;
}
.hero h1 span { position: relative; display: inline-block; }
.hero h1 span::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .04em; height: .22em;
  background: var(--vermelho); z-index: -1; border-radius: 3px;
}
.hero__lead { font-size: clamp(1.08rem, 2.1vw, 1.32rem); color: rgba(255,255,255,.80); max-width: 54ch; }
.hero__selo {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem;
  padding: .4rem 1rem .4rem .4rem; border-radius: 100px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.88);
}
.hero__selo b { background: var(--verde); color: #fff; padding: .2rem .65rem; border-radius: 100px; font-size: .78rem; }
.hero__arte { display: grid; place-items: center; }
.punhos {
  width: min(100%, 360px); height: auto; overflow: visible;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.55));
}
@media (max-width: 900px) {
  .hero__arte { margin-top: 2.5rem; }
  /* sem sombra no celular: recalcular filtro a cada quadro da animação
     é justamente o que faz aparelho fraco engasgar */
  .punhos { width: min(72%, 240px); filter: none; }
}

/* ---------- os punhos erguendo ----------
   Duas batidas e um descanso, como palavra de ordem em ato:
   o do meio puxa, os outros dois entram logo atrás. */

.punho { transform-box: fill-box; transform-origin: 50% 100%; }
.anel  { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .punho {
    animation: erguer 3.2s cubic-bezier(.33,.85,.4,1) infinite;
    animation-delay: 1.1s;                 /* espera a abertura assentar */
  }
  .punho--esq { animation-delay: 1.28s; }
  .punho--dir { animation-delay: 1.46s; }

  .anel { animation: onda 3.2s ease-out infinite; animation-delay: 1.1s; }
  .anel--2 { animation-delay: 1.3s; }
  .anel--3 { animation-delay: 1.5s; }
}

/* fora da tela não precisa gastar bateria animando */
.hero__arte[data-parado="1"] .punho,
.hero__arte[data-parado="1"] .anel { animation-play-state: paused; }

/* só translateY: giro dependeria de transform-origin dentro do SVG, que
   nem todo navegador resolve igual — e o movimento não precisa dele */
@keyframes erguer {
  0%,   6% { transform: translateY(0); }
  20%      { transform: translateY(-32px); }
  33%      { transform: translateY(-2px); }
  45%      { transform: translateY(-24px); }
  58%, 100%{ transform: translateY(0); }
}

@keyframes onda {
  0%,   6% { transform: scale(.95); opacity: .6; }
  24%      { transform: scale(1.05); opacity: 1; }
  58%, 100%{ transform: scale(.95); opacity: .6; }
}

/* entrada da abertura, na carga da página */
@media (prefers-reduced-motion: no-preference) {
  .hero__selo  { animation: sobe .8s .05s both; }
  .hero h1     { animation: sobe .9s .12s both; }
  .hero__lead  { animation: sobe .9s .22s both; }
  .hero .botoes{ animation: sobe .9s .32s both; }
  .hero__arte  { animation: chega 1.1s .18s both; }
  .hero h1 span::after { transform: scaleX(0); transform-origin: left center; animation: risca .6s .8s forwards; }
}
@keyframes sobe  { from { opacity: 0; transform: translateY(26px); } }
@keyframes chega { from { opacity: 0; transform: translateY(20px) scale(.94); } }
@keyframes risca { to { transform: scaleX(1); } }

/* ---------- faixa que desliza ---------- */

.faixa {
  background: var(--vermelho); color: #fff; overflow: hidden;
  padding: .85rem 0; border-block: 3px solid var(--preto);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.faixa__trilho { display: flex; width: max-content; gap: 0; }
.faixa__trilho span {
  padding-inline: 1.4rem; white-space: nowrap; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; font-size: .92rem;
}
/* losango separador: emoji aqui sairia colorido e brigaria com o vermelho */
.faixa__trilho i { font-style: normal; opacity: .5; margin-left: .9rem; font-size: .7em; vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) {
  .faixa__trilho { animation: desliza 34s linear infinite; }
  .faixa:hover .faixa__trilho { animation-play-state: paused; }
}
@keyframes desliza { to { transform: translateX(-50%); } }

/* ---------- números ---------- */

.numeros { background: var(--verde); color: #fff; }
.numeros__grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: rgba(255,255,255,.22);
}
.numero { background: var(--verde); padding: 2.2rem 1.5rem; text-align: center; transition: background var(--transicao); }
@media (hover: hover) { .numero:hover { background: var(--verde-claro); } }
.numero b {
  display: block; font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 900;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
/* valor que é palavra, não número, precisa caber numa linha só —
   senão o rótulo dele desce e desalinha a faixa inteira */
.numero b:not([data-conta]) { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; }
.numero span { display: block; margin-top: .5rem; font-size: .88rem; color: rgba(255,255,255,.85); }

/* ---------- cartões ---------- */

.grade { display: grid; gap: 1.5rem; margin-top: 3rem; container-type: inline-size; }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
/* 420px de mínimo garante DUAS colunas na tela larga: com 340 cabiam três,
   e a quarta frente ficava sozinha na linha de baixo */
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

.cartao {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 2rem 1.75rem; box-shadow: var(--sombra);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cartao::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--vermelho); transition: width var(--transicao);
}
.cartao--verde::before { background: var(--verde); }
.cartao--preto::before { background: var(--preto); }

/* luz que segue o mouse — só onde existe mouse de verdade */
@media (hover: hover) and (pointer: fine) {
  .cartao::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(225,37,27,.10), transparent 62%);
  }
  .cartao--verde::after { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(18,133,90,.12), transparent 62%); }
  .cartao:hover { transform: translateY(-5px); box-shadow: var(--sombra-forte); border-color: transparent; }
  .cartao:hover::before { width: 8px; }
  .cartao:hover::after { opacity: 1; }
}

.cartao h3 { margin-bottom: .6rem; }
.cartao p { margin: 0; color: var(--texto-suave); }
.cartao__icone {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(225,37,27,.10); color: var(--vermelho); margin-bottom: 1.1rem;
  transition: transform var(--transicao), background var(--transicao);
}
.cartao--verde .cartao__icone { background: rgba(18,133,90,.12); color: var(--verde); }
.cartao--preto .cartao__icone { background: rgba(12,12,14,.08); color: var(--preto); }
.cartao__icone svg { width: 26px; height: 26px; }
@media (hover: hover) { .cartao:hover .cartao__icone { transform: rotate(-6deg) scale(1.08); } }
.cartao__tag {
  display: inline-block; margin-top: 1.1rem; font-size: .76rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--verde);
}

/* com espaço sobrando, o cartão respira mais */
@container (min-width: 780px) {
  .cartao { padding: 2.4rem 2.1rem; }
  .cartao h3 { font-size: 1.35rem; }
}

/* ---------- história ---------- */

.historia { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,4rem); align-items: start; }
@media (max-width: 860px) { .historia { grid-template-columns: 1fr; } }
.historia p { color: var(--texto-suave); }
.historia p + p { margin-top: 1.1rem; }
.historia__destaque {
  background: var(--preto); color: #fff; border-radius: var(--raio);
  padding: 2.25rem; box-shadow: var(--sombra-forte);
  position: relative; overflow: hidden;
}
.historia__destaque::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 15px);
}
.historia__destaque p { color: rgba(255,255,255,.82); }
.historia__destaque h3 { color: #fff; }

.lista-marcada { list-style: none; margin: 1.5rem 0 0; padding: 0; position: relative; }
.lista-marcada li { position: relative; padding-left: 2rem; margin-bottom: .9rem; }
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 12px; height: 12px;
  border-radius: 3px; background: var(--verde);
}

/* ---------- doação ---------- */

.pix {
  margin-top: 2.5rem; background: #fff; border: 2px dashed var(--verde);
  border-radius: var(--raio); padding: 1.75rem; text-align: center;
}
.pix code { display: block; margin: .8rem 0; font-size: 1.15rem; font-weight: 800; word-break: break-all; color: var(--preto); }

/* ---------- formulário ---------- */

.form-caixa {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--sombra-forte);
  max-width: 820px; margin: 3rem auto 0;
}
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-weight: 700; font-size: .92rem; transition: color var(--transicao); }
.campo label span { color: var(--vermelho); }
.campo input, .campo select, .campo textarea {
  font: inherit; padding: .85rem 1rem; border: 1.5px solid var(--borda); border-radius: var(--raio-p);
  background: var(--papel); color: var(--texto); width: 100%; min-height: 48px;
  transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--verde); background: #fff; box-shadow: 0 0 0 4px rgba(18,133,90,.12);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo__dica { font-size: .82rem; color: var(--texto-suave); }

/* o rótulo acende junto com o campo em foco */
.campo:has(input:focus, select:focus, textarea:focus) label { color: var(--verde); }
/* e avisa em vermelho só depois que a pessoa digitou algo errado */
.campo:has(input:not(:placeholder-shown):invalid) input { border-color: var(--vermelho); }

.mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso { border-radius: var(--raio-p); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-weight: 600; }
.aviso--ok   { background: rgba(18,133,90,.12); border-left: 5px solid var(--verde); color: #0B5B3E; }
.aviso--erro { background: rgba(225,37,27,.10); border-left: 5px solid var(--vermelho); color: var(--vermelho-esc); }
@media (prefers-reduced-motion: no-preference) { .aviso { animation: sobe .5s both; } }

/* ---------- perguntas ---------- */

.faq { max-width: 820px; margin: 3rem auto 0; }
.faq details {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  margin-bottom: .9rem; overflow: hidden; transition: box-shadow var(--transicao), border-color var(--transicao);
}
.faq details[open] { box-shadow: var(--sombra); border-color: rgba(225,37,27,.35); }
.faq summary {
  cursor: pointer; padding: 1.25rem 1.5rem; font-weight: 800; font-size: 1.05rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.6rem; font-weight: 400; color: var(--vermelho); flex: none; line-height: 1;
  transition: transform var(--transicao);
}
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq details > div { padding: 0 1.5rem 1.4rem; color: var(--texto-suave); }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] > div { animation: abre .35s ease both; }
}
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- contato ---------- */

.contatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; margin-top: 3rem; }
.contato {
  display: flex; gap: 1rem; align-items: flex-start; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--raio); padding: 1.5rem;
  transition: background var(--transicao), transform var(--transicao), border-color var(--transicao);
}
@media (hover: hover) {
  .contato:hover { background: rgba(255,255,255,.10); transform: translateY(-3px); border-color: rgba(255,107,94,.5); }
}
.contato svg { width: 24px; height: 24px; flex: none; color: var(--vermelho-luz); margin-top: .2rem; }
.contato b { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .25rem; font-weight: 800; }
.contato span { font-weight: 700; color: #fff; word-break: break-word; }

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

.rodape {
  background: #050506; color: rgba(255,255,255,.60); font-size: .92rem;
  padding: 3rem 0 calc(2.5rem + env(safe-area-inset-bottom));
}
.rodape__linha { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.rodape a { color: rgba(255,255,255,.80); text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape__creditos { border-top: 1px solid rgba(255,255,255,.10); margin-top: 2rem; padding-top: 1.5rem; font-size: .85rem; }

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

.zap-flut {
  position: fixed; z-index: 90;
  right: max(1.1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #25D366; color: #fff; box-shadow: 0 10px 26px rgba(37,211,102,.45);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.zap-flut svg { width: 30px; height: 30px; }
@media (hover: hover) { .zap-flut:hover { transform: scale(1.08); box-shadow: 0 14px 32px rgba(37,211,102,.6); } }
@media (prefers-reduced-motion: no-preference) {
  .zap-flut::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid #25D366; animation: pulsa 2.8s ease-out infinite;
  }
}
@keyframes pulsa {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- blocos que surgem ao rolar ----------
   1ª opção: animação ligada ao scroll, feita pelo próprio navegador.
   2ª opção: a classe .visivel, que o site.js coloca. */

@media (prefers-reduced-motion: no-preference) {
  .surge {
    opacity: 0; transform: translateY(28px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.22,1.15,.36,1);  /* passa um tico e volta */
  }
  .surge.visivel { opacity: 1; transform: none; }
  .surge--esq  { transform: translateX(-34px); }
  .surge--dir  { transform: translateX(34px); }
  .surge--zoom { transform: scale(.92) translateY(20px); }

  /* efeito escada: cada peça entra um tiquinho depois da anterior */
  .grade > .surge, .contatos > .surge, .faq > .surge {
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  /* a tarja colorida do cartão cresce de cima pra baixo */
  .cartao.visivel::before { animation: barra .55s .2s cubic-bezier(.2,.7,.3,1) both; }

  @supports (animation-timeline: view()) {
    .surge {
      opacity: 1; transform: none; transition: none;
      animation: surge-entra .9s cubic-bezier(.22,1.15,.36,1) both;
      animation-timeline: view();
      animation-range: entry 2% cover 26%;
    }
    .surge--esq  { animation-name: surge-esq; }
    .surge--dir  { animation-name: surge-dir; }
    .surge--zoom { animation-name: surge-zoom; }
    .grade > .surge, .contatos > .surge, .faq > .surge { animation-delay: 0s; }

    .cartao::before {
      animation: barra .6s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
  }
}

@keyframes surge-entra { from { opacity: 0; transform: translateY(28px); } }
@keyframes surge-esq   { from { opacity: 0; transform: translateX(-34px); } }
@keyframes surge-dir   { from { opacity: 0; transform: translateX(34px); } }
@keyframes surge-zoom  { from { opacity: 0; transform: scale(.92) translateY(20px); } }
@keyframes barra       { from { transform: scaleY(0); transform-origin: top; } }

@media (prefers-reduced-motion: reduce) {
  .surge { opacity: 1; transform: none; }
  .bt, .cartao, .contato, .zap-flut, .numero { transition: none; }
}

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

@media print {
  .topo, .zap-flut, .progresso, .faixa, .form-caixa, .hero__arte { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .secao--preto, .hero, .numeros { background: #fff !important; color: #000 !important; }
  .secao--preto *, .hero *, .numeros * { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}