/* ═══════════════════════════════════════════════════════════════════════════
   Tribo da Trilha PE — MOVIMENTO, botão fixo do WhatsApp e seletor de idioma
   Como funciona:
   - Entradas ao rolar: o JS só põe a classe .is-visivel quando o bloco aparece
     na tela (IntersectionObserver); a transição mora aqui. Funciona em qualquer
     navegador. A classe .js no <html> garante que, sem JavaScript, nada some.
   - Efeitos presos à rolagem (parallax, barra de leitura, profundidade do herói):
     animation-timeline do CSS, onde o navegador suporta.
   - "Reduzir movimento" ligado no sistema: tira deslocamento, zoom e parallax,
     mas mantém o esmaecer suave (o conteúdo continua aparecendo com delicadeza).
   Medidas em rem na escala do SWCore (1rem = 10px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Curvas e tempos ─────────────────────────────────────────────────────── */
:root {
  --ease-sai: cubic-bezier(.16, 1, .3, 1);       /* desacelera no fim: entrada elegante */
  --t-entra: 1s;
}

/* ═══ 1. HERÓI ══════════════════════════════════════════════════════════ */
/* Ken Burns: todas as fotos com zoom lento contínuo; 2 e 3 fundem por cima da 1 */
.heroi__foto--1 { animation: kenburns-1 26s ease-in-out infinite alternate; }
.heroi__foto--2, .heroi__foto--3 { opacity: 0; animation: revezar 24s ease-in-out infinite, kenburns-2 24s linear infinite; }
.heroi__foto--2 { animation-delay: 5s, 5s; }
.heroi__foto--3 { animation-delay: 13s, 13s; }
@keyframes kenburns-1 { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.18) translate(-2%, -1.5%); } }
@keyframes kenburns-2 { from { transform: scale(1.16) translate(1.5%, 0); } to { transform: scale(1.02) translate(0, 1%); } }
@keyframes revezar { 0% { opacity: 0; } 6%, 30% { opacity: 1; } 37%, 100% { opacity: 0; } }

/* Título palavra por palavra: cada palavra sobe de dentro da própria máscara */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding: .02em .04em .06em 0; margin-bottom: -.06em; }
.palavra > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom; animation: palavra-entra 1.1s var(--ease-sai) forwards; }
.palavra:nth-child(1) > span { animation-delay: .25s; }
.palavra:nth-child(2) > span { animation-delay: .33s; }
.palavra:nth-child(3) > span { animation-delay: .41s; }
.palavra:nth-child(4) > span { animation-delay: .49s; }
.palavra:nth-child(5) > span { animation-delay: .57s; }
.palavra:nth-child(6) > span { animation-delay: .65s; }
.palavra:nth-child(7) > span { animation-delay: .73s; }
.palavra:nth-child(8) > span { animation-delay: .81s; }
.palavra:nth-child(9) > span { animation-delay: .89s; }
@keyframes palavra-entra { to { transform: none; } }

/* Frase inteira do título: escondida da vista (fica para leitor de tela e tradutor);
   com o site traduzido pelo Google (html.translated-ltr) ela aparece e a animada some */
.heroi__titulo-frase { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.translated-ltr .heroi__titulo-anim, html.translated-rtl .heroi__titulo-anim { display: none; }
html.translated-ltr .heroi__titulo-frase, html.translated-rtl .heroi__titulo-frase { position: static; width: auto; height: auto; clip-path: none; white-space: normal; animation: sobe-suave 1s var(--ease-sai) both; }

/* Selo, texto e botões entram depois do título, em sequência */
.heroi__selo { animation: sobe-suave .9s var(--ease-sai) .1s both; }
.heroi__texto { animation: sobe-suave 1s var(--ease-sai) 1s both; }
.heroi__botoes { animation: sobe-suave 1s var(--ease-sai) 1.2s both; }
.heroi__rolar { animation: aparece-so 1s ease 1.8s both; }
@keyframes sobe-suave { from { opacity: 0; transform: translateY(2.4rem); } }
@keyframes aparece-so { from { opacity: 0; } }
/* indicador "role": a bolinha desce e um anel pulsa em volta */
.heroi__rolar::after { content: ''; position: absolute; inset: -.8rem; border-radius: 2rem; border: 1px solid rgba(255, 255, 255, .5); animation: onda-rolar 2.2s ease-out infinite; }
@keyframes onda-rolar { from { opacity: .8; transform: scale(.85); } to { opacity: 0; transform: scale(1.35); } }

/* Profundidade: ao rolar, o texto do herói sobe e some antes da foto */
@supports (animation-timeline: scroll()) {
  .heroi__conteudo { animation: heroi-profundo linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  .heroi__fotos { animation: heroi-fundo linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
}
@keyframes heroi-profundo { to { opacity: 0; transform: translateY(-14rem) scale(.96); } }
@keyframes heroi-fundo { to { transform: translateY(18%); } }

/* 06/10/2026 (Sandro: "deixa a logo ainda um pouco maior"): PC 30rem→38rem, celular 14rem→18rem */
/* ═══ 1b. LOGO: grande no herói → pequena no menu, presa à rolagem ═════
   A logo grande (logo_g) fica FIXA na tela e, conforme a pessoa rola os primeiros
   60% da tela, anda e encolhe até o lugar exato da logo do menu (logo_p), que
   então aparece. Sem caixa atrás: só uma sombra suave para destacar na foto. */
.topo__marca { flex: none; }
.topo__logo { display: block; flex: none; height: 5.6rem; width: 7.95rem; max-width: none; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); }
.heroi__logo {
  position: absolute; z-index: 2; width: 19rem; height: auto; pointer-events: none;
  top: calc(var(--topo-h) + 1.6rem); left: var(--lado);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45));
  animation: logo-chega 1.2s var(--ease-sai) .1s both;
}
@keyframes logo-chega { from { transform: translateY(-2rem) scale(.9); } }   /* sem opacidade 0: a logo conta como maior imagem da tela (LCP) */
@media (max-width: 1023px) { .heroi { padding-top: calc(var(--topo-h) + 25.5rem); } }
@media (min-width: 1024px) {
  .heroi .heroi__conteudo { max-width: calc(100% - min(52rem, 64vh) - 6rem); }   /* o título nunca passa por baixo da logo */
  .heroi__logo { width: min(52rem, 64vh); top: calc(50% - min(30rem, 37vh)); left: auto; right: max(var(--lado), 6vw); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .heroi__logo { position: fixed; animation: logo-encolhe linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    @media (min-width: 1024px) { .heroi__logo { animation-name: logo-encolhe-pc; } }
    body:has(.heroi__logo) .topo__logo { animation: logo-menu linear both; animation-timeline: scroll(root); animation-range: 56vh 60vh; }
  }
}
@keyframes logo-encolhe {
  from { top: calc(var(--topo-h) + 1.6rem); left: var(--lado); width: 19rem; }
  96% { opacity: 1; }
  to { top: .8rem; left: var(--lado); width: 7.95rem; opacity: 0; filter: none; }
}
@keyframes logo-encolhe-pc {
  from { top: calc(50vh - min(30rem, 37vh)); left: calc(100vw - max(var(--lado), 6vw) - min(52rem, 64vh)); width: min(52rem, 64vh); }
  96% { opacity: 1; }
  to { top: .8rem; left: var(--lado); width: 7.95rem; opacity: 0; filter: none; }
}
@keyframes logo-menu { from { opacity: 0; } to { opacity: 1; } }

/* ═══ 2. BARRA DE LEITURA E TOPO QUE ENCOLHE ═══════════════════════════ */
.progresso { position: fixed; inset: 0 0 auto; z-index: 70; height: 3px; background: linear-gradient(90deg, var(--folha), var(--sol)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progresso { animation: ler linear both; animation-timeline: scroll(root); }
}
@keyframes ler { to { transform: scaleX(1); } }
.topo { transition: background-color .4s, color .4s, box-shadow .4s, height .4s var(--ease-sai); }

/* ═══ 3. ENTRADA AO ROLAR (classe .is-visivel pelo JS) ═══════════════════ */
.js .revela { opacity: 0; transform: translateY(4rem); transition: opacity var(--t-entra) var(--ease-sai), transform var(--t-entra) var(--ease-sai), clip-path 1.2s var(--ease-sai); }
.js .revela.is-visivel { opacity: 1; transform: none; }

/* Títulos de seção: revelados por uma máscara que sobe (cortina de baixo pra cima) */
.js .secao__titulo.revela, .js .secao__topo.revela .secao__titulo { clip-path: inset(0 0 100% 0); transform: translateY(2rem); }
.js .secao__titulo.revela.is-visivel, .js .secao__topo.revela.is-visivel .secao__titulo { clip-path: inset(0 0 -10% 0); transform: none; }
.js .secao__topo.revela .secao__titulo { transition: clip-path 1.1s var(--ease-sai) .1s, transform 1.1s var(--ease-sai) .1s; }
/* o tracinho do rótulo cresce */
.js .revela .rotulo::before, .js .rotulo.revela::before { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-sai) .2s; }
.js .revela.is-visivel .rotulo::before, .js .rotulo.revela.is-visivel::before { transform: scaleX(1); }

/* Fotos grandes: cortina lateral + a foto "assenta" (zoom de 1.25 para 1) */
.js .dupla__foto.revela { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.js .dupla--invertida .dupla__foto.revela { clip-path: inset(0 0 0 100%); }
.js .dupla__foto.revela.is-visivel { clip-path: inset(0 0 0 0); }
.js .dupla__foto.revela img { transform: scale(1.25); transition: transform 1.8s var(--ease-sai); }
.js .dupla__foto.revela.is-visivel img { transform: scale(1); }

/* Cascata: cartões vizinhos entram um depois do outro */
.js .cascata > .revela:nth-child(4n+2) { transition-delay: .09s; }
.js .cascata > .revela:nth-child(4n+3) { transition-delay: .18s; }
.js .cascata > .revela:nth-child(4n+4) { transition-delay: .27s; }
.js .modalidades__grade.cascata > .revela { transform: translateY(5rem) scale(.94); }
.js .modalidades__grade.cascata > .revela.is-visivel { transform: none; }

/* Galeria: entrada em grade escalonada (cada foto ganha .is-visivel ao aparecer) */
.js .galeria__item { opacity: 0; transform: translateY(3rem) scale(.96); transition: opacity .8s var(--ease-sai), transform .8s var(--ease-sai); animation: none; }
.js .galeria__item.is-visivel { opacity: 1; transform: none; }
.js .galeria__item:nth-child(4n+2) { transition-delay: .08s; }
.js .galeria__item:nth-child(4n+3) { transition-delay: .16s; }
.js .galeria__item:nth-child(4n+4) { transition-delay: .24s; }
/* ao filtrar: a grade pisca de leve e as fotos que ficam reentram */
.galeria__grade.is-trocando .galeria__item { animation: refiltra .6s var(--ease-sai) both; }
@keyframes refiltra { from { opacity: 0; transform: translateY(2rem) scale(.95); } }

/* Hover dos cartões de modalidade: leve inclinação e zoom (profundidade) */
.modalidade { transition: transform .6s var(--ease-sai), box-shadow .6s var(--ease-sai), opacity var(--t-entra) var(--ease-sai); }
@media (hover: hover) {
  .modalidade.is-visivel:hover, .modalidade:not(.revela):hover { transform: perspective(90rem) rotateX(3deg) rotateY(-4deg) scale(1.025); box-shadow: 0 30px 50px -25px rgba(0, 0, 0, .6); }
  .evento:hover { transform: translateY(-.6rem); }
  .evento { transition: transform .5s var(--ease-sai), opacity var(--t-entra) var(--ease-sai); }
}

/* ═══ 4. PRESOS À ROLAGEM: parallax e frentes ══════════════════════════ */
@supports (animation-timeline: view()) {
  .faixa__foto { animation: paralaxe linear both; animation-timeline: view(); }
  .faixa__frase { animation: frase-profunda linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .frente__foto { animation: aproxima linear both; animation-timeline: view(); }
  .pg-topo__foto { animation: paralaxe-topo linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .contato__foto img, .sobre .dupla:first-child .dupla__foto img { animation: deriva linear both; animation-timeline: view(); }
}
@keyframes paralaxe { from { transform: translateY(-10%) scale(1.05); } to { transform: translateY(10%) scale(1.05); } }
@keyframes frase-profunda { from { transform: translateY(6rem); opacity: .3; } 40%, 60% { opacity: 1; transform: none; } to { transform: translateY(-6rem); opacity: .3; } }
@keyframes aproxima { from { transform: scale(1.2); } to { transform: scale(1); } }
@keyframes paralaxe-topo { to { transform: translateY(15%) scale(1.08); } }
@keyframes deriva { from { object-position: 50% 30%; } to { object-position: 50% 70%; } }

/* Parceiros: loop infinito (a faixa tem duas voltas iguais) — já em site.css; aqui um brilho no hover */
.parceiros__lista img { transition: filter .4s, opacity .4s, transform .4s var(--ease-sai); }

/* Números: dão um pulinho quando terminam de contar (classe pelo JS) */
.numero b.is-contado { animation: pulso .6s var(--ease-sai); }
@keyframes pulso { 45% { transform: scale(1.12); color: #fff; } }

/* Troca de página sem recarregar (classes pelo JS): esmaece e sobe de leve */
.conteudo { transition: opacity .25s ease, transform .25s ease; }
.conteudo.is-saindo { opacity: 0; transform: translateY(8px); }
.conteudo.is-entrando { animation: sobe-suave .55s var(--ease-sai) both; }

/* ═══ 5. BOTÃO FIXO DO WHATSAPP ════════════════════════════════════════ */
.zap-fixo {
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 65;
  display: flex; align-items: center; justify-content: center; width: 7.2rem; height: 7.2rem; padding: 0;   /* 06/10 Sandro: só o ícone, maior */
  border-radius: 50%; background: #25d366; color: #fff !important; text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45); transition: bottom .4s var(--ease-sai), transform .3s var(--ease-sai), padding .3s;
  animation: zap-chega .8s var(--ease-sai) 2s both;
}
.zap-fixo i { font-size: 4rem; line-height: 1; }
.zap-fixo__rotulo { display: none; max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 1.5rem; transition: max-width .45s var(--ease-sai); }
.zap-fixo::before, .zap-fixo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25d366; animation: zap-onda 2.4s ease-out infinite; pointer-events: none; }
.zap-fixo::after { animation-delay: 1.2s; }
.zap-fixo:hover { transform: translateY(-3px); }

@keyframes zap-onda { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
@keyframes zap-chega { from { opacity: 0; transform: translateY(3rem) scale(.6); } }
/* o "voltar ao topo" do SWCore fica acima do WhatsApp */
/* 06/10 (Sandro: "os dois iguais, organizados"): voltar ao topo = mesmo tamanho, forma e coluna do WhatsApp, logo acima */
.tt-topo[sw-top] { --bt: 7.2rem; width: var(--bt) !important; height: var(--bt) !important; right: 1.6rem !important; bottom: calc(1.6rem + var(--bt) + 1.2rem) !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; background: var(--mata, #1f3d2b) !important; color: #fff !important; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45) !important; border: 2px solid rgba(255, 255, 255, .18) !important; font-size: 3rem !important; }
.tt-topo[sw-top] i, .tt-topo[sw-top] svg { font-size: 3.4rem !important; width: 3.4rem !important; height: 3.4rem !important; line-height: 1 !important; }
/* aviso de cookies aberto: o WhatsApp sobe para não cobrir o aviso */
body:has([sw-lgpd-banner].is-vis) .zap-fixo { bottom: 10rem; }
body:has([sw-lgpd-banner].is-vis) .tt-topo[sw-top] { bottom: calc(10rem + var(--bt) + 1.2rem) !important; }
@media (max-width: 639px) {
  .heroi__botoes .botao { width: calc(100% - 8rem); }   /* deixa o canto direito livre para o botão do WhatsApp */
  .heroi__botoes .botao:not(:first-child) { display: none; }   /* 06/10: no celular o WhatsApp fixo já faz esse papel (e o ícone de cookies cobria esse botão) */
  .zap-fixo { height: 6.4rem; width: 6.4rem; }
  .tt-topo[sw-top] { --bt: 6.4rem; font-size: 2.6rem !important; }
  body:has([sw-lgpd-banner].is-vis) .tt-topo[sw-top] { bottom: calc(12rem + var(--bt) + 1.2rem) !important; }
  .zap-fixo i { font-size: 3.6rem; }
  body:has([sw-lgpd-banner].is-vis) .zap-fixo { bottom: 12rem; }
}
/* aviso de cookies compacto, no canto */
[sw-lgpd-banner] { z-index: 66; }

/* ═══ 6. SELETOR DE IDIOMA (por cima do Google Tradutor, que fica escondido) ══ */
.idiomas { display: flex; gap: .3rem; padding: .3rem; border-radius: var(--raio); border: 1px solid currentColor; }
.idiomas button { min-width: 3.6rem; min-height: 3.4rem; padding: 0 .6rem; border: 0; border-radius: 4px; background: transparent; color: inherit; font: 700 1.25rem/1 var(--f-texto); letter-spacing: .06em; cursor: pointer; transition: background-color .25s, color .25s; }
.idiomas button:hover { background: rgba(255, 255, 255, .15); }
.idiomas button.is-ativo { background: var(--sol); color: var(--tinta-escura); }
.topo__acoes > .idiomas { display: none; }
@media (min-width: 1280px) { .topo__acoes > .idiomas { display: flex; } }
/* no menu do celular o seletor aparece embaixo dos links */
.topo__menu .idiomas { display: none; }
.topo.menu-aberto .topo__menu .idiomas { display: flex; align-self: flex-start; margin-top: 2.4rem; border-color: rgba(255, 255, 255, .4); }
.topo.menu-aberto .topo__menu .idiomas button { font-size: 1.6rem; min-width: 5rem; min-height: 4.4rem; }
@media (min-width: 1280px) { .topo__menu .idiomas { display: none !important; } }
/* esconde a barra/balão do Google Tradutor e o deslocamento que ele aplica no body */
.goog-te-banner-frame, iframe.skiptranslate, .goog-te-balloon-frame, #goog-gt-tt, .goog-te-spinner-pos, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
body { top: 0 !important; }
#tradutor-google { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
font[style] { background: none !important; box-shadow: none !important; }   /* marcação que o Google põe no texto traduzido */

/* ═══ 7. MENOS MOVIMENTO (pedido no sistema): só esmaecer ══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .heroi__foto--1, .heroi__foto--2, .heroi__foto--3, .pg-topo__foto { animation: none; transform: none; }
  .heroi__foto--2, .heroi__foto--3 { display: none; }
  .palavra > span { transform: none; animation: aparece-so .8s ease both; }
  .heroi__conteudo, .heroi__fotos, .faixa__foto, .faixa__frase, .frente__foto, .contato__foto img, .sobre .dupla__foto img, .progresso { animation: none !important; }
  .js .revela, .js .galeria__item, .js .modalidades__grade.cascata > .revela { transform: none !important; clip-path: none !important; }
  .js .dupla__foto.revela img { transform: none; }
  .zap-fixo::before, .zap-fixo::after, .heroi__rolar::after, .heroi__rolar span { animation: none; }
  .parceiros__trilho { animation-duration: 240s; }
  .modalidade:hover { transform: none !important; }
}

/* ═══ 8. Ícones soltos no topo: redes nas cores de cada marca + sol/lua laranja ═══
   Sem quadrado, bolinha nem borda: só o ícone (~23px) com área de toque de 44px e leve zoom no hover. */
.rede, .topo__tema { display: inline-grid; place-items: center; width: 4rem; height: 4rem; padding: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none; font-size: 2.8rem; line-height: 1; text-decoration: none; transition: transform .25s var(--ease-sai), filter .25s; }
.rede:hover, .topo__tema:hover { transform: scale(1.18); }
.topo__tema, .topo__tema i, .topo__tema .sw-daytg-ico { color: var(--sol) !important; }
.rede--ig i { background: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rede--fb { color: #1877f2 !important; }
.rede--zap { color: #25d366 !important; }
.rede--x { color: #fff !important; }                                  /* sobre a foto do herói e no menu verde */
.topo--cheio .rede--x, body:not(:has(.heroi, .pg-topo, .erro404)) .rede--x { color: #0f1419 !important; }
html[sw-theme="dark"] .topo--cheio .rede--x, html[sw-theme="dark"] body:not(:has(.heroi, .pg-topo, .erro404)) .rede--x { color: #fff !important; }
.topo.menu-aberto .rede--x { color: #fff !important; }
.redes { display: flex; align-items: center; gap: 0; }
/* ícones de 28px com área de toque de 40px; a margem negativa aproxima o desenho (~7px entre ícones) sem diminuir o toque */
.redes--topo .rede, .topo__acoes > .topo__tema { margin-inline: -.25rem; }
.topo__acoes > .topo__tema { margin-left: 0; margin-right: .1rem; }
.topo__acoes > .redes--topo { margin-left: -1.2rem; }   /* compensa o espaço do grupo: tema e redes ficam com o mesmo intervalo */
.topo__tema i, .topo__tema .sw-daytg-ico { font-size: 2.8rem !important; }   /* o SWCore põe 18px no ícone do tema */
/* topo: redes só no computador; no celular elas vão para dentro do menu ☰ */
.redes--topo { display: none; }
@media (min-width: 1100px) { .redes--topo { display: flex; } }
.topo__menu .redes { display: none; }
.topo.menu-aberto .topo__menu .redes { display: flex; gap: 1rem; margin-top: 2.4rem; }
.topo.menu-aberto .topo__menu .redes .rede { font-size: 2.8rem; border-bottom: 0; }
@media (min-width: 1100px) { .topo__menu .redes { display: none !important; } }

/* ═══ 10. Certificações e credenciais ═══════════════════════════════════ */
.credenciais { padding: clamp(5rem, 8vw, 8rem) var(--lado); background: var(--fundo-2); }
.credenciais__titulo { font-size: clamp(3.2rem, 5.5vw, 5rem); font-weight: 900; text-transform: uppercase; margin-bottom: 3.2rem; }
.credenciais__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (min-width: 640px) { .credenciais__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .credenciais__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.credencial { display: flex; gap: 1.4rem; align-items: flex-start; padding: 2rem; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--linha); }
.credencial > i { flex: none; font-size: 3.2rem; color: var(--enfase); }
.credencial h3 { font-size: 2.1rem; text-transform: uppercase; margin-bottom: .4rem; }
.credencial p { margin: 0; font-size: 1.45rem; color: var(--texto-2); }
.selos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.4rem 4rem; list-style: none; margin: 3.6rem 0 0; padding: 0; }
.selos a { display: grid; justify-items: center; gap: .8rem; text-decoration: none; color: var(--texto-2); font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.selos img { width: auto; max-width: none; transition: transform .3s var(--ease-sai); }   /* tamanho natural: não amplia (não borra) */
html[sw-theme="dark"] .selos img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 2px 8px rgba(0, 0, 0, .4)); }
.selos a:hover img { transform: scale(1.06); }
.selos--rodape { margin: 3.2rem 0 0; justify-content: flex-start; gap: 2rem; }
.selos--rodape img { height: 5.6rem; width: auto; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .8)); }

/* Guia da modalidade (para quem é, nível, segurança, o que levar, onde) */
.guia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; margin-top: 3.2rem; }
@media (min-width: 768px) { .guia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guia__item { padding: 2rem 2.2rem; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--linha); }
.guia__item h2 { display: flex; gap: .8rem; align-items: center; font-size: 2.4rem; text-transform: uppercase; margin-bottom: .8rem; color: var(--enfase); }
.guia__item p, .guia__item ul { margin: 0; color: var(--texto-2); }
.guia__item ul { padding-left: 1.8rem; display: grid; gap: .4rem; }
.pg-faq { margin-top: 4rem; }
.pg-faq h2 { font-size: clamp(3.2rem, 5vw, 4.4rem); text-transform: uppercase; margin-bottom: 1rem; }

/* ═══ 9. Avaliar no Google (faixa da home + botão nas modalidades) ═════ */
.avaliar { padding: 0 var(--lado) clamp(6rem, 9vw, 10rem); }
.avaliar__caixa { display: grid; justify-items: center; gap: 1.4rem; text-align: center; padding: clamp(3.2rem, 5vw, 5.6rem) 2rem; border-radius: var(--raio);
  background: radial-gradient(circle at 50% 0%, rgba(240, 136, 58, .18), transparent 60%), var(--mata); color: var(--areia); }
.avaliar__titulo { color: #fff !important; font-size: clamp(3.2rem, 5.5vw, 5.2rem); font-weight: 900; text-transform: uppercase; }
.avaliar__titulo em { color: var(--broto) !important; }
.avaliar__nota { margin: 0; font-size: 1.6rem; color: rgba(244, 238, 224, .85); }
.avaliar__nota strong { color: #fbbc04; font-size: 2rem; }
.avaliar__estrelas { display: flex; gap: .6rem; font-size: 3.6rem; color: #fbbc04; }
.avaliar__estrelas i { display: inline-block; animation: estrela 2.8s ease-in-out infinite; }
.avaliar__estrelas i:nth-child(2) { animation-delay: .15s; }
.avaliar__estrelas i:nth-child(3) { animation-delay: .3s; }
.avaliar__estrelas i:nth-child(4) { animation-delay: .45s; }
.avaliar__estrelas i:nth-child(5) { animation-delay: .6s; }
@keyframes estrela { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-.6rem) scale(1.25) rotate(-12deg); } 90% { transform: scale(1.1); } }
.avaliar-mini { display: flex; justify-content: center; margin: 0; padding: 0 var(--lado) 2rem; }
@media (prefers-reduced-motion: reduce) { .avaliar__estrelas i { animation: none; } }

/* ═══ 11. Dicas (tooltip do SWCore) ════════════════════════════════════
   Em tela de toque não há "passar o mouse": a dica não aparece, para nunca atrapalhar o toque. */
.sw-tooltip { z-index: 1100 !important; }
@media (hover: none) { .sw-tooltip { display: none !important; } }

/* ═══ 12. Assinatura SanWeb no fim do rodapé ("o charmezinho") ══════════
   O "S." é a imagem public/assets/img/sanweb-s.webp usada como MÁSCARA: a cor vem do CSS
   (laranja da marca). Ao aparecer na tela (.is-visivel), o S gira e se "desenha" de baixo
   para cima; o ponto pulsa. No hover: piscadinha de brilho e gradiente correndo no nome. */
.assinatura { margin: 2.4rem 0 0; padding-top: 2rem; border-top: 1px solid rgba(244, 238, 224, .08); text-align: center; }
.assinatura__link { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; font-size: 1.4rem; color: rgba(244, 238, 224, .7); text-decoration: none; }
.assinatura__coracao { color: #e8505b; display: inline-block; animation: bate 1.6s ease-in-out infinite; }
@keyframes bate { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(.95); } 45% { transform: scale(1.15); } }
.assinatura__s { position: relative; display: inline-block; width: 2.6rem; height: 2.6rem; margin-left: .3rem; background: var(--sol);
  -webkit-mask: url('/assets/img/sanweb-s.webp') center / contain no-repeat; mask: url('/assets/img/sanweb-s.webp') center / contain no-repeat;
  transition: filter .3s, transform .4s var(--ease-sai); }
.assinatura__ponto { position: absolute; right: .1rem; bottom: .25rem; width: .55rem; height: .55rem; border-radius: 50%; background: #fff; opacity: 0; }
.assinatura__nome { font: 800 1.9rem/1 var(--f-titulo); letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, #fff 0%, #fff 40%, var(--sol) 50%, var(--folha) 60%, #fff 70%, #fff 100%); background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* ao aparecer: o S gira e se desenha (máscara revelando de baixo para cima) */
.js .assinatura__link.revela .assinatura__s { clip-path: inset(100% 0 0 0); transform: rotate(-90deg) scale(.6); }
.js .assinatura__link.revela.is-visivel .assinatura__s { clip-path: inset(0); transform: none; transition: clip-path 1.1s var(--ease-sai) .2s, transform 1.1s var(--ease-sai) .2s; }
.assinatura__link.is-visivel .assinatura__ponto, .assinatura__link:not(.revela) .assinatura__ponto { animation: ponto 2.2s ease-in-out 1.3s infinite; }
@keyframes ponto { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: .9; transform: scale(1.4); } }
/* hover: piscadinha + gradiente que corre no nome */
.assinatura__link:hover .assinatura__s { animation: piscada .6s ease; filter: drop-shadow(0 0 6px rgba(240, 136, 58, .8)); }
.assinatura__link:hover .assinatura__nome { animation: corre 1.4s linear infinite; }
@keyframes piscada { 40% { transform: scale(1.18) rotate(-8deg); filter: brightness(1.6) drop-shadow(0 0 8px var(--sol)); } }
@keyframes corre { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .assinatura__coracao, .assinatura__ponto, .assinatura__link:hover .assinatura__nome, .assinatura__link:hover .assinatura__s { animation: none !important; }
  .js .assinatura__link.revela .assinatura__s { clip-path: none; transform: none; }
}
/* celular: espaço no fim do rodapé para os botões flutuantes (WhatsApp/topo/cookies) não cobrirem a assinatura */
@media (max-width: 639px) { .rodape { padding-bottom: 10rem; } }

/* ═══ Rodapé centralizado e compacto (06/10/2026, Sandro: "centraliza, sobe, sem espaço vago") ═══ */
.rodape__marca p { margin-top: .8rem; max-width: 34rem; }
.selos--rodape { justify-content: flex-start; margin: 1.6rem auto 1.2rem; }
.rodape__base { justify-content: center; text-align: center; flex-wrap: wrap; gap: .6rem 1.8rem; padding-top: 1.4rem; margin-top: 0; }
.rodape { padding-bottom: 1.2rem; }
.assinatura { margin: 1rem 0 0; text-align: center; }
@media (max-width: 639px) { .rodape { padding-bottom: 10rem; } .rodape__base { padding-inline: 4.5rem; } }
/* linha do CNPJ no meio exato entre as duas linhas finas */
.rodape__base { padding: 1.5rem 0 !important; margin: 0 !important; align-items: center; }
.assinatura { padding-top: 1.5rem; margin-top: 0; }
/* 06/10 Sandro: charme amarelo — estrela do "Avalie no Google" e o ícone do selo do herói */
.rodape__base .swi-star, .heroi__selo i { color: #ffc93c; filter: drop-shadow(0 0 4px rgba(255, 201, 60, .45)); }
.rodape__marca .selos--rodape { margin: 1.4rem 0 0; justify-content: flex-start; }
.rodape__grade { padding-bottom: 2.4rem; }