/* ==========================================================================
   Gabriel Ferreira — Psicólogo em Novo Hamburgo
   Folha de estilo única. Sem build: este arquivo é servido como está.

   Decisões de performance que valem para o arquivo inteiro:
   - Nada de backdrop-filter. Eram ~30 elementos com blur de vidro; cada um
     obriga o navegador a reler e desfazer o fundo. Trocados por superficies
     quase opacas, visualmente iguais sobre esta paleta clara.
    - Nenhum filtro blur() no caminho padrao, nem estatico nem animado. O
      fundo antigo eram 5 orbes de 48-58vmax com blur(70px) animados para
      sempre; a ambiance agora vem de gradientes estaticos. E o desfoque
      tambem foi tentado na entrada de conteudo, mas um blur() animado
      repinta o texto a cada quadro: com a pagina inteira entrando, o quadro
      nao fecha e a transicao de opacidade e pulada. Opacity e transform
      sozinhas sao resolvidas pelo compositor e o fade sai no tempo certo.
      Existe uma variante opt-in .reveal--blur para titulo isolado, nunca
      aplicada pela varredura automatica.
    - Nenhuma animacao continua que force repaint. As entradas de conteudo
        animam so transform e opacity, uma vez so, e nunca ficam em repouso
        animando.
   - A entrada de conteudo e a mesma em todas as dobras: fade longo e
     subida de poucos pixels, com duracao e curva no :root (--in-*).
   - Empilhamento entre dobras desativado: as secoes rolam em fluxo normal.
     Pelo mesmo motivo o baralho de cards de Temas nao existe mais: os seis
     cards ficam sempre no grid de 1/2/3 colunas e a secao rola inteira.
   ========================================================================== */

:root {
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --c-bg: #f6faf8;
  --c-text: #12201a;
  --c-text-soft: #3a4f46;
  --c-text-muted: #5c7268;

  --c-green-100: #e3f2eb;
  --c-green-200: #c5e5d8;
  --c-green-300: #9dd4bf;
  --c-green-400: #6fbfa5;
  --c-green-500: #4a9e82;
  --c-green-600: #3a8269;
  --c-green-700: #2d6653;
  --c-green-800: #1f4a3c;

  --c-gold: #c4a35a;
  --c-ink: #0d1713;

  --shadow-sm: 0 4px 14px rgba(18, 32, 26, 0.06);
  --shadow-md: 0 12px 32px rgba(18, 32, 26, 0.1);
  --shadow-lg: 0 28px 60px rgba(18, 32, 26, 0.14);
  --shadow-cta: 0 10px 28px rgba(45, 102, 83, 0.35);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --container: 1140px;

  /* Entrada de conteudo, compartilhada por todas as dobras (.hero-line,
     .split, .reveal, .stagger > *, .theme-card).

     So opacity e transform no caminho padrao. Sem filter de blur, de
     proposito: um blur() animado obriga o navegador a repintar o texto a
     cada quadro. Com ~60 elementos animando ao mesmo tempo o quadro nao
     fecha, a transicao e pulada, e o resultado nao e um fade suave — e
     conteudo que simplesmente aparece. Opacity e transform sao propriedades
     de compositor: o compositor resolve as duas sem pintar de novo.
     Se o desfoque for desejado em algum titulo, existe a variante opt-in
     .reveal--blur / .split--blur (ver "Entrada de conteudo" mais abaixo),
     que nunca e aplicada automaticamente.

     ——— A curva: por que power2.out e nao uma ease generica ———

     Este era o defeito real do efeito. A curva anterior era
     cubic-bezier(0.4, 0.15, 0.5, 0.85) numa transicao de 2.2s. Medindo a
     curva (mesma interpolacao que o navegador usa) ela e quase plana no
     comeco e so dispara no fim:

       progresso   curva antiga    power2.out (esta)
          10%          0.05             0.28
          20%          0.14             0.51
          30%          0.26             0.68
          50%          0.56             0.88
          90%          0.96             1.00

     Traduzido em tempo de tela, com a duracao antiga de 2.2s: o texto
     ficava abaixo de 5% de opacidade durante os primeiros 0.8s e nao
     chegava a 50% antes de 1.02s. Confirmado no Chrome: opacidade medida
     de 0.016 em t=1000ms.

     O efeito pratico e exatamente o relatado — nada acontece, e depois o
     texto aparece. A curva comecava devagar demais, e a duracao longa
     multiplicava essa lentidao por 2.4.

     power2.out e o inverso disso: 50% da opacidade ja em 20% da duracao, e
     o resto assenta. E a curva do efeito de referencia (GSAP power2.out =
     cubic-bezier(0.215, 0.61, 0.355, 1)). O olho le como "suave" nao a
     lentidao, e a resposta: comecar a responder de imediato e desacelerar
     em cima do valor final.

     ——— A duracao: por que 0.9s e nao 2.2s ———

     A curva antiga escondia o problema; 2.2s era o que sobrava para a
     transicao parecer grande. Com power2.out a mesma maciez cabe em ~0.9s,
     e o texto fica legivel em 0.5s em vez de 1.9s. Diminuir a duracao nao
     tira smoothness aqui: com ease-out, cortar o tempo e apenas cortar a
     cauda, e a parte que o olho perceives (o comeco) fica identica.

     O movimento continua com relogio proprio e um pouco mais longo
     (--in-dur), para a subida assentar depois de o texto ja estar
     visivel — o texto nao fica desalinhado enquanto ainda opaco. */
  --in-fade-dur: 0.9s;
  --in-dur:      1s;
  --in-dur-fast: 0.8s;
  --in-fade:     cubic-bezier(0.215, 0.61, 0.355, 1);
  --in-move:     cubic-bezier(0.22, 0.68, 0.32, 1);
  --in-rise:     8px;
  --in-rise-sm:  5px;

  /* Escalonamento entre itens vizinhos de uma lista. 120ms: o passo e
     curto o bastante para a lista ainda ler como um grupo, e longo o
     bastante para o olho acompanhar quem entra primeiro. */
  --in-stagger:  0.12s;

  /* Escala e teto dos atrasos de entrada (--rd).
     O --rd e escrito a mao no HTML em valores pensados para a transicao
     antiga de 2.2s: os itens do FAQ vao ate .7s. Aplicados como estao
     numa transicao de 0.9s, o ultimo item esperaria 78% da duracao
     inteira — o bloco entraria quase inteiro invisivel.

     Por isso o --rd e multiplicado por --in-delay-scale em vez de ter um
     teto por cima. Teto achata: todos os atrasos acima dele viravam o mesmo
     valor e o escalonamento escrito a mao sumia. Escala preserva: a ordem e
     o ritmo relatifos entre os itens continuam como o HTML define, so
     acelerados para caber na duracao nova. O teto continua existindo, mas
     so como rede de seguranca para um --rd absurdo. */
  --in-delay-scale: 0.4;
  --in-delay-max:   0.3s;

  /* Duracao do fade quando prefers-reduced-motion esta ativo.
     Continua sendo fade — so sem o deslocamento (ver bloco de movimento
     reduzido no fim do arquivo). Mais curta que a normal porque quem pede
     reducao nao esta pedindo uma espera maior, e sim menos agitacao. */
  --in-fade-dur-rm: 0.5s;
}

/* --------------------------------------------------------------------------
   Fontes locais
   Duas familias variaveis auto-hospedadas (47 KB + 37 KB, subconjunto latin)
   no lugar de 7 arquivos estaticos vindos de fonts.googleapis.com. Some a
   cadeia render-blocking: DNS + TCP + TLS para dois dominios externos.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/lora-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--c-green-200);
  color: var(--c-text);
}

:focus-visible {
  outline: 2px solid var(--c-green-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.container--narrow {
  max-width: 780px;
}

/* --------------------------------------------------------------------------
   Barra de progresso
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-green-500), var(--c-gold), var(--c-green-400));
}

/* --------------------------------------------------------------------------
   Navegacao
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: clamp(0.7rem, 1.8vw, 1.35rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(1360px, calc(100% - clamp(1rem, 3vw, 2.5rem)));
  z-index: 110;
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding: clamp(0.5rem, 1vw, 0.72rem) clamp(1rem, 2.4vw, 1.9rem);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 30px rgba(18, 32, 26, 0.09);
  transition: box-shadow 0.3s ease;
}

.nav.is-scrolled .nav__bar {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 34px rgba(18, 32, 26, 0.13);
}

.js .nav {
  opacity: 0;
  animation: nav-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.55rem, 1.4vw, 0.8rem);
  text-decoration: none;
  color: var(--c-text);
  min-width: 0;
}

.nav__leaf {
  width: clamp(30px, 3vw, 38px);
  height: clamp(30px, 3vw, 38px);
  flex-shrink: 0;
  color: var(--c-green-700);
}

.nav__id {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
}

.nav__name {
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__role {
  font-size: clamp(0.62rem, 1vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.6vw, 2.75rem);
}

.nav__link {
  position: relative;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 500;
  color: var(--c-text-soft);
  text-decoration: none;
  padding: 0.35rem 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2.5px;
  border-radius: 999px;
  background: var(--c-green-600);
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav__link:hover {
  color: var(--c-green-800);
}

.nav__link.is-active {
  color: var(--c-green-800);
  font-weight: 600;
}

.nav__link.is-active::after,
.nav__link:hover::after {
  transform: scaleX(1);
}

.nav__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--c-green-700);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  transition: background 0.2s ease;
}

.nav__wa:hover {
  background: var(--c-green-800);
}

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

/* --------------------------------------------------------------------------
   Menu hamburguer (celular) e item "Servicos"

   Duas entradas de menu diferentes, o mesmo painel: a home usa .nav (barra
   fixa) e as paginas internas usam .site-head (cabecalho estatico). O painel
   e o mesmo (.mmenu) nas duas, por isso o CSS nao distingue um do outro.

   Abaixo de 900px os links de navegacao somem e sobram o botao e o painel.
   Nada de backdrop-filter, como o resto da folha. O painel usa uma superficie
   quase opaca e trava o scroll do fundo com position: fixed no body.
   -------------------------------------------------------------------------- */

.burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-green-800);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.burger:focus-visible {
  outline: 2px solid var(--c-green-600);
  outline-offset: 2px;
}

.burger__box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 6px; }
.burger__line:nth-child(3) { top: 12px; }

/* Aberto: as tres barras viram um X. */
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* O painel aparece e some, sem fade. Com [hidden] a transicao de opacity
   nunca chegaria a rodar (display:none nao anima), e sem fade o menu mobile
   fica igual ao de qualquer app. O ganho real de usar [hidden] e que o
   navegador tira o painel da arvore de acessibilidade e do tabulamento
   enquanto ele esta fechado.

   Nao ha cabecalho dentro do painel: o nome do psicologo fica na barra de
   cima, fora do hamburger, e e ela que fecha o menu (o icone vira X). Por
   isso o padding de cima e fixo, mais alto que a area segura, para o primeiro
   link cair embaixo da barra em vez de atras dela. */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(76px + env(safe-area-inset-top)) 1.15rem calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-bg);
}

.mmenu[hidden] {
  display: none;
}

.mmenu__nav {
  display: flex;
  flex-direction: column;
}

.mmenu__link {
  display: block;
  padding: 0.95rem 0.25rem;
  border-bottom: 1px solid var(--c-green-100);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
}

.mmenu__link:active {
  color: var(--c-green-700);
}

/* Item novo: da acesso as seis paginas de servico sem sair do menu. */
.mmenu__label {
  margin: 1.5rem 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.mmenu__services {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-green-100);
}

.mmenu__services a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.72rem 0.25rem;
  border-bottom: 1px solid var(--c-green-100);
  font-size: 0.98rem;
  color: var(--c-text-soft);
  text-decoration: none;
}

.mmenu__services a::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-green-400);
}

.mmenu__services a:active {
  color: var(--c-green-700);
}

.mmenu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  margin-top: 1.6rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--c-green-700);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.mmenu__cta svg {
  flex-shrink: 0;
}

/* Com o menu aberto o fundo nao rola. */
body.is-menu-open {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Camadas enquanto o menu esta aberto. O painel e z-90, mas tres coisas
   ficariam por cima dele e atrapalhariam: o cabecalho fixo das paginas
   internas (z-20), o botao flutuante (z-100) e a barra de progresso (z-120).
   O cabecalho sobe para 95 de proposito, para o botao hamburguer continuar
   clicavel e o usuario ver em que pagina esta. */
body.is-menu-open .site-head {
  z-index: 95;
}

body.is-menu-open .btn--sticky,
body.is-menu-open .progress {
  display: none;
}

@media (max-width: 900px) {
  /* Com JS os links saem e o hamburguer assume. Sem JS os links continuam
     visiveis: e melhor do que um botao que nao faz nada. O inliner que
     poe a classe .js no <html> roda antes desta folha, entao nao ha
     chance de o celular pintar o botao e o nav ao mesmo tempo. */
  html.js .nav__links,
  html.js .site-head__nav {
    display: none;
  }

  html.js .burger {
    display: grid;
  }
}

/* Item "Servicos" no desktop. Fica fora do breakpoints: a partir de 901px
   os links voltam e o item aparece. O submenu abre por hover e por
   :focus-within, entao funciona no teclado sem depender do mouse nem de JS. */
.nav__item {
  position: relative;
}

.nav__link--btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.nav__link--btn::after {
  right: auto;
  width: 100%;
}

.nav__caret {
  width: 9px;
  height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}

.nav__item.is-open .nav__caret,
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret {
  transform: translateY(1px) rotate(-135deg);
}

.nav__drop {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 244px;
  padding: 0.5rem;
  border: 1px solid var(--c-green-100);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.nav__drop[hidden] {
  display: none;
}

.nav__item.is-open .nav__drop,
.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__drop a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--c-text-soft);
  text-decoration: none;
  white-space: nowrap;
}

.nav__drop a:hover {
  background: var(--c-green-100);
  color: var(--c-green-800);
  text-decoration: none;
}

.nav__drop a:focus-visible {
  outline: 2px solid var(--c-green-600);
  outline-offset: -2px;
}

/* Dropdown ancorado pela esquerda nas paginas internas, onde a nav cresce
   para a direita a partir do logo. */
.site-head__nav .nav__drop {
  left: 0;
  transform: translate(0, -8px);
}

.site-head__nav .nav__item.is-open .nav__drop,
.site-head__nav .nav__item:hover .nav__drop,
.site-head__nav .nav__item:focus-within .nav__drop {
  transform: translate(0, 0);
}

/* --------------------------------------------------------------------------
   Botoes
   O anel neon animado (conic-gradient girando + dois drop-shadow) foi removido:
   filter animado em 4 botoes, o tempo todo, custava mais que todo o resto do
   site. No lugar, um anel estatico e um halo que respira so no botao fixo,
   usando transform e opacity (campos do compositor, sem repaint).
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 54px;
  padding: 0.9rem 1.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--c-green-700) 0%, var(--c-green-800) 100%);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    150px circle at var(--mx) var(--my),
    rgba(220, 255, 240, 0.42),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(45, 102, 83, 0.42);
}

.btn:hover::before,
.btn:focus-visible::before {
  opacity: 1;
}

.btn:active {
  transform: translateY(0);
}

.btn__label {
  position: relative;
  z-index: 1;
}

.btn__icon,
.btn__arrow {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.btn__arrow {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .btn {
    width: auto;
    font-size: 1.0625rem;
  }
}

/* --------------------------------------------------------------------------
   Botao flutuante de WhatsApp
   Regra do site: a hero tem o botao no fluxo, e o flutuante so entra a partir
   da segunda dobra (classe is-past-hero, ligada no main.js / pagina.js). No
   rodape nao ha botao nenhum, porque o flutuante ja esta la.

   O botao e' FIXO e nao tem relacao com a rolagem. Nao some descendo a pagina
   nem reaparece quando a rolagem para: um botao que pisca conforme o gesto e'
   pior do que um botao sempre ali, porque a pessoa desiste de mirar nele.

   O unico "movimento" e o corte da hero, que e uma unica travessia de limiar
   e nao um acompanhamento quadro a quadro.
   -------------------------------------------------------------------------- */

.btn--sticky {
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: calc(100% - 2rem);
  min-height: 52px;
  padding: 0.7rem 1.2rem;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  box-shadow: 0 12px 30px rgba(31, 74, 60, 0.4);
  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.3s;
}

.btn--sticky .btn__icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* O rotulo e' o CTA. Fica nowrap para o pill nunca quebrar em duas linhas e
   virar um retangulo alto em cima do texto. */
.btn--sticky .btn__label {
  white-space: nowrap;
}

body.is-past-hero .btn--sticky {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* O banner de cookies ocupa a mesma faixa do rodape da tela. Os dois nao podem
   disputando o mesmo canto. */
body:has(.cookie.is-open) .btn--sticky {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

/* O rodape nao e o lugar do botao. Quando o rodape entra na tela o flutuante
   sai: ali ja existe o telefone e os links de navegacao, e o botao passaria
   por cima do telefone. Ligado por IntersectionObserver no .footer.

   Esta e a ultima regra do grupo, de proposito: as anteriores tem a mesma
   especificidade, e o que precisa ganhar e sempre a de "nao mostrar". */
body.at-footer .btn--sticky {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
}

@media (min-width: 768px) {
  .btn--sticky {
    right: 1.75rem;
    bottom: 1.75rem;
    min-height: 54px;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
  }
}

/* Reserva de espaco no fim do documento. Nao ha mais: o botao flutuante e'
   escondido quando o rodape entra na tela (body.at-footer), entao ele nunca
   cobre o texto do rodape e nao precisa de folga para ser contornado. */

/* Espaco entre a lead da page-hero e o CTA que entra logo abaixo. */
.page-hero__cta {
  margin-top: 1.75rem;
  max-width: 22rem;
}

@media (min-width: 768px) {
  .page-hero__cta {
    margin-top: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Secoes em fluxo normal
   O empilhamento entre dobras foi desativado: as secoes rolam uma apos a
   outra, com todo o conteudo visivel e sem sobreposicao entre vizinhas.
   -------------------------------------------------------------------------- */

.stack-panel {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f4f9f7;
  background-image: radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, 0.85), transparent 60%);
  box-shadow: 0 -20px 56px rgba(18, 32, 26, 0.15);
}

/* Tinte por id e nao por :nth-child. */
#inicio { background-color: #eef6f2; }
#temas { background-color: #f7fbf9; }
#sobre { background-color: #eef5f1; }
#como-funciona { background-color: #f8fbfa; }
#faq { background-color: #eff6f3; }
#fechamento { background-color: #f7faf8; }

.stack-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  transform-origin: center top;
}

@media (max-height: 800px) {
  .stack-inner {
    padding-block: clamp(1.5rem, 4vh, 3rem);
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: clamp(7.5rem, 17vh, 10rem) 0 clamp(3rem, 9vh, 5.5rem);
  background-color: #eef6f2;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 70% 6%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      96deg,
      rgba(238, 246, 242, 0.96) 0%,
      rgba(238, 246, 242, 0.9) 24%,
      rgba(238, 246, 242, 0.68) 44%,
      rgba(238, 246, 242, 0.3) 60%,
      rgba(238, 246, 242, 0) 74%
    ),
    linear-gradient(180deg, rgba(238, 246, 242, 0.75) 0%, rgba(238, 246, 242, 0) 16%);
}

.hero__layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.hero__copy {
  max-width: 46rem;
}

.hero__title {
  font-family: var(--font-sans);
  font-size: clamp(2.15rem, 5.4vw, 4.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--c-text);
  margin: 0.85rem 0 1.3rem;
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: var(--c-green-700);
}

.hero__title span {
  display: block;
}

.hero__sub {
  font-size: clamp(1.05rem, 1.75vw, 1.5rem);
  line-height: 1.6;
  color: #4c5c66;
  max-width: 30rem;
  margin-bottom: clamp(1.75rem, 4.5vh, 2.75rem);
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  list-style: none;
  font-size: 0.875rem;
  color: var(--c-text-soft);
}

.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(45, 102, 83, 0.14);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

.hero__facts svg {
  width: 15px;
  height: 15px;
  color: var(--c-green-600);
  flex-shrink: 0;
}

.hero .btn {
  min-height: 62px;
  padding-inline: 2.1rem;
  font-size: 1.075rem;
  background: linear-gradient(180deg, #34624f 0%, #2a5446 100%);
  box-shadow: 0 12px 28px rgba(31, 74, 60, 0.32);
}

/* Entrada do hero: fade longo e subida curta, com o mesmo --in-rise das
   outras dobras, para a primeira dobra nao destoa delas. Ja houve um
   blur(10px) animado aqui e ele foi removido: repintava o texto a cada
   quadro, e com a hero inteira animando junto o quadro nao fechava — o
   resultado era conteudo aparecendo de uma vez, sem fade perceptivel.
   Cada linha traz seu atraso em --d no HTML. */
.js .hero-line {
  /* 0.02 e nao 0: no desktop o LCP e este bloco de texto. Elemento com
     opacidade 0 e ignorado pelo Largest Contentful Paint, e como o fade
     roda no compositor nao surge um novo candidato depois. Partir de 2%
     mantem o fade e deixa o texto visivel desde o primeiro quadro, o que
     evita o NO_LCP do Lighthouse. */
  opacity: 0.02;
  transform: translateY(var(--in-rise));
  /* Duas animacoes, nao uma: o fade tem duracao propria e o movimento tem
     outra, e um unico @keyframes nao aceita curvas diferentes por
     propriedade. */
  animation:
    hero-fade var(--in-fade-dur) var(--in-fade) forwards,
    hero-rise var(--in-dur) var(--in-move) forwards;
  animation-delay: var(--d, 0s), var(--d, 0s);
}

@keyframes hero-fade {
  to { opacity: 1; }
}

@keyframes hero-rise {
  to { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Tipografia de secao
   -------------------------------------------------------------------------- */

.br-desk {
  display: none;
}

@media (min-width: 720px) {
  .br-desk {
    display: inline;
  }
}

.section {
  position: relative;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-green-700);
  margin-bottom: 0.75rem;
}

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.eyebrow--rule::before {
  content: "";
  flex-shrink: 0;
  width: clamp(26px, 3vw, 42px);
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.9;
}

.hero .eyebrow {
  color: var(--c-text-soft);
}

/* No celular o "Presencial e online" desce para a segunda linha. O separador
   foi Tirado de proposito: na quebra de linha ele ficava pendurado no fim da
   primeira, sozinho, parecendo um traco solto. Aqui a quebra e feita pelo
   layout (flex-basis 100%), nao por <br>, entao continua valendo no desktop.

   O tracinho da esquerda encolhe junto. O eyebrow e uppercase com
   letter-spacing de 0.16em, e "NOVO HAMBURGO E REGIAO" ja ocupa quase a
   largura toda num celular de 320px: sem folgar o adorno a primeira linha
   quebraria, e o resultado seriam tres linhas em vez de duas. */
@media (max-width: 620px) {
  .eyebrow--rule {
    flex-wrap: wrap;
    row-gap: 0.1rem;
    column-gap: 0.6rem;
  }

  .eyebrow--rule::before {
    width: 20px;
  }

  .eyebrow__alt {
    flex-basis: 100%;
  }
}

.section h2,
.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-text);
  margin-bottom: 1rem;
  text-wrap: balance;
  max-width: 28ch;
}

.section__head {
  margin-bottom: clamp(1.5rem, 3.5vw, 2.4rem);
}

.section__head--center {
  text-align: center;
  margin-inline: auto;
}

.section__head--center h2 {
  margin-inline: auto;
}

.section__lead {
  max-width: 52ch;
  margin-top: -0.25rem;
}

.section__head--center .section__lead {
  margin-inline: auto;
}

.text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--c-text-soft);
  max-width: 58ch;
  text-wrap: pretty;
}

.text--lead {
  font-size: clamp(1.05rem, 2.2vw, 1.175rem);
}

/* --------------------------------------------------------------------------
   Entrada de conteudo
   Um unico par fade + subida curta para as tres classes, com duracao e curva
   vindas do :root. O que muda entre elas e so o deslocamento e o
   escalonamento: .split e o titulo, .reveal e o bloco corrido, .stagger e a
   lista que entra item a item.

   O deslocamento e minimo de proposito. Com 16-20px o texto subia demais e a
   dobra parecia ter duas metades; com --in-rise ele mal sai do lugar, e o
   que se perceives e a opacidade subindo. A curva e power2.out: o texto
   responde de imediato e desacelera em cima do valor final.
   -------------------------------------------------------------------------- */

.js .split {
  opacity: 0;
  transform: translateY(var(--in-rise));
  transition:
    opacity var(--in-fade-dur) var(--in-fade),
    transform var(--in-dur) var(--in-move);
}

.js .split.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal {
  opacity: 0;
  transform: translateY(var(--in-rise));
  transition:
    opacity var(--in-fade-dur) var(--in-fade),
    transform var(--in-dur) var(--in-move);
  /* O --rd e escalado em vez de ter um teto direto. Ver --in-delay-scale no
     :root: os atrasos do HTML foram escritos para a transicao antiga de
     2.2s, e um teto por cima achataria todos eles no mesmo valor, apagando
     o escalonamento escrito a mao. */
  transition-delay: min(calc(var(--rd, 0s) * var(--in-delay-scale)), var(--in-delay-max));
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .stagger > * {
  opacity: 0;
  transform: translateY(var(--in-rise-sm));
  transition:
    opacity var(--in-fade-dur) var(--in-fade),
    transform var(--in-dur-fast) var(--in-move);
}

.js .stagger.is-visible > *,
.js .reveal.is-visible .stagger > * {
  opacity: 1;
  transform: translateY(0);
}

/* will-change so enquanto o elemento esta esperando.
   O efeito de referencia fixa will-change no elemento, mas aqui sao ~60
   elementos e cada um com uma camada propria ocupa memoria de GPU durante
   toda a vida da pagina. O seletor :not(.is-visible) faz o oposto: a dica
   existe na janela em que a transicao realmente roda (uns 0.9s) e some
   sozinha quando o elemento assenta, sem depender de JS para limpar. */
.js .reveal:not(.is-visible),
.js .split:not(.is-visible),
.js .stagger:not(.is-visible) > * {
  will-change: opacity, transform;
}

/* Desfoque opt-in. Nao e o comportamento padrao do site: um filter: blur()
   animado repinta o texto a cada quadro e, com a pagina inteira entrando,
   o quadro nao fecha — e o resultado e pior do que nenhum fade. Quem quiser
   o desfoque pede por elemento, num titulo isolado, com .reveal--blur ou
   .split--blur. A varredura automatica do JS nunca adiciona estas classes. */
.js .reveal--blur,
.js .split--blur {
  filter: blur(8px);
  transition:
    opacity var(--in-fade-dur) var(--in-fade),
    transform var(--in-dur) var(--in-move),
    filter var(--in-fade-dur) var(--in-fade);
  will-change: opacity, transform, filter;
}

.js .reveal--blur.is-visible,
.js .split--blur.is-visible {
  filter: blur(0);
  will-change: opacity, transform;
}

/* O passo vem de --in-stagger no :root, entao mudar o ritmo da entrada e
   mexer em um valor so. O primeiro item espera meio passo, para nao haver
   um salto entre ele e o segundo. */
.js .stagger.is-visible > *,
.js .reveal.is-visible .stagger > * { transition-delay: calc(var(--in-stagger) * (var(--i, 1) - 0.5)); }

.js .stagger > *:nth-child(1) { --i: 1; }
.js .stagger > *:nth-child(2) { --i: 2; }
.js .stagger > *:nth-child(3) { --i: 3; }
.js .stagger > *:nth-child(4) { --i: 4; }
.js .stagger > *:nth-child(5) { --i: 5; }
.js .stagger > *:nth-child(6) { --i: 6; }

/* Sem JS, nada fica invisivel. */
html:not(.js) .reveal,
html:not(.js) .split,
html:not(.js) .stagger > *,
html:not(.js) .hero-line,
html:not(.js) .theme-card {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

/* Orçamento de quadro durante a rolagem
   Sobraram duas animações contínuas no site: o halo do botão fixo e o brilho
   do card de fechamento. Durante a rolagem elas pausam, liberando o quadro
   para os fades de entrada. */
body.is-scrolling .closing__card::before {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Listas
   -------------------------------------------------------------------------- */

.bullets {
  list-style: none;
  display: grid;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.bullets li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--c-text-soft);
}

.bullets li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background-color: var(--c-green-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d6653' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.bullets--cards {
  gap: 0.7rem;
  margin-bottom: 1.75rem;
}

.bullets--cards li {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(45, 102, 83, 0.1);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.1rem;
  box-shadow: var(--shadow-sm);
}

.bullets--cards li::before {
  background-color: var(--c-green-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Onde atendo: lista de bairros e cidades. Conteudo local real, visivel. */
.onde {
  margin-top: 1.5rem;
}

.onde__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-green-700);
  margin-bottom: 0.8rem;
}

.onde__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
}

.onde__list li {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--c-text-soft);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(45, 102, 83, 0.12);
  border-radius: 999px;
  padding: 0.34rem 0.78rem;
}

/* --------------------------------------------------------------------------
   Sobre
   -------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about__photo-wrap {
  position: relative;
  max-width: 380px;
  margin-inline: auto;
}

.about__photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  border: 4px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(18, 32, 26, 0.04);
  background: var(--c-green-100);
}

.about__accent {
  position: absolute;
  right: 12px;
  bottom: -16px;
  width: 108px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  background: #f7f1e6;
}

.about__quote {
  margin-top: 1.5rem;
  padding: 1.1rem 1.3rem 1.1rem 1.3rem;
  border-left: 3px solid var(--c-gold);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}

.about__quote p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-text-soft);
}

.about__quote p::before {
  content: "\201C";
}

.about__quote p::after {
  content: "\201D";
}

.about__content .bullets {
  margin-top: 1.35rem;
}

.about__credenciais {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.35rem;
  font-size: 0.95rem;
  color: var(--c-text-muted);
}

.about__credenciais div {
  display: flex;
  gap: 0.5rem;
}

.about__credenciais strong {
  color: var(--c-text-soft);
  font-weight: 600;
  min-width: 5.5rem;
}

/* --------------------------------------------------------------------------
   Temas (agora links para as paginas de servico)
   -------------------------------------------------------------------------- */

.themes__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.theme-card {
  position: relative;
  display: block;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(45, 102, 83, 0.1);
  border-radius: var(--radius-lg);
  padding: 1.45rem 1.35rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  opacity: 0;
  transform: translateY(var(--in-rise));
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease,
    opacity 0.5s ease;
}

.theme-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--c-green-400), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Mesmo padrao do hero-line: uma animacao por propriedade, para cada uma
   usar a sua duracao. O card-in substitui a transition acima quando o grid
   fica visivel, entao o hover continua na transition. */
.js .themes__grid.is-visible .theme-card {
  animation:
    card-fade var(--in-fade-dur) var(--in-fade) forwards,
    card-rise var(--in-dur) var(--in-move) forwards;
  animation-delay:
    calc(var(--in-stagger) * (var(--i, 1) - 0.5)),
    calc(var(--in-stagger) * (var(--i, 1) - 0.5));
}

.js .themes__grid .theme-card:nth-child(1) { --i: 1; }
.js .themes__grid .theme-card:nth-child(2) { --i: 2; }
.js .themes__grid .theme-card:nth-child(3) { --i: 3; }
.js .themes__grid .theme-card:nth-child(4) { --i: 4; }
.js .themes__grid .theme-card:nth-child(5) { --i: 5; }
.js .themes__grid .theme-card:nth-child(6) { --i: 6; }

@keyframes card-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes card-rise {
  from { transform: translateY(var(--in-rise)); }
  to   { transform: translateY(0); }
}

.theme-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.9rem;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--c-green-100), var(--c-green-200));
  color: var(--c-green-700);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.theme-card__icon svg {
  width: 24px;
  height: 24px;
}

.theme-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.35rem;
}

.theme-card p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.theme-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-green-700);
}

.theme-card__more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .theme-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-md);
  }

  .theme-card:hover::after {
    opacity: 1;
  }

  .theme-card:hover .theme-card__more svg {
    transform: translateX(3px);
  }
}

@media (min-width: 640px) {
  .themes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .themes__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
  }
}

/* Os cards ficam sempre no grid de 1/2/3 colunas acima, com o card-in
   escalonado. Nao ha mais baralho: nada de position absolute, nada de
   transform por quadro de rolagem. A secao pode passar da altura da janela
   e isso e normal — ela rola junto com o resto da pagina. */

/* --------------------------------------------------------------------------
   Como funciona
   -------------------------------------------------------------------------- */

.how__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.steps {
  list-style: none;
  display: grid;
  gap: 0.85rem;
  margin: 1.5rem 0 1.35rem;
}

.steps__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(45, 102, 83, 0.1);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}

.steps__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--c-green-600), var(--c-green-800));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.steps__item strong {
  display: block;
  font-size: 1rem;
  color: var(--c-text);
  margin-bottom: 0.1rem;
}

.steps__item p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}

.how__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 4px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(18, 32, 26, 0.04);
  background: var(--c-green-100);
}

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

.faq {
  display: grid;
  gap: 0.7rem;
}

.faq__item {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(45, 102, 83, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq__item[open] {
  box-shadow: var(--shadow-md);
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.2rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-text);
  position: relative;
  transition: color 0.2s ease;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--c-green-600);
  border-bottom: 2px solid var(--c-green-600);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}

.faq__item[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.faq__item summary:hover {
  color: var(--c-green-700);
}

.faq__item p {
  padding: 0 1.2rem 1.15rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--c-text-soft);
}

/* --------------------------------------------------------------------------
   Fechamento
   -------------------------------------------------------------------------- */

.section--closing {
  text-align: center;
}

.section--closing h2 {
  margin-inline: auto;
}

.closing__card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(45, 102, 83, 0.1);
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 7vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Halo estatico. Era um radial-gradient com scale/translate animados a cada
   quadro sobre um elemento de tela cheia. */
.closing__card::before {
  content: "";
  position: absolute;
  inset: -45% -20% auto;
  height: 75%;
  background: radial-gradient(ellipse at center, rgba(196, 163, 90, 0.16), rgba(157, 212, 191, 0.2), transparent 70%);
  pointer-events: none;
}

.closing__card > * {
  position: relative;
}

.closing__card h2 {
  max-width: 18ch;
  margin-bottom: 1rem;
}

.closing__card .text {
  max-width: 36rem;
  margin: 0 auto 1.75rem;
}

.closing__card .btn {
  margin-bottom: 1rem;
}

.closing__micro {
  font-size: 0.93rem;
  color: var(--c-text-muted);
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .about__photo-wrap {
    max-width: none;
    margin-inline: 0;
  }

  .about__accent {
    right: -20px;
    bottom: -22px;
    width: 140px;
  }

  .how__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* --------------------------------------------------------------------------
   Paginas internas (servico, legal, 404)

   Um unico conjunto de classes para todas elas. O cabecalho e leve e estatico
   de proposito: nas paginas de servico nao ha nada de empilhamento, entao
   nao ha motivo para levar o script da home.
   -------------------------------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(100% 60% at 8% 0%, #f0f8f4 0%, transparent 55%),
    radial-gradient(80% 50% at 95% 12%, #ecf5f1 0%, transparent 55%),
    var(--c-bg);
}

.page-main {
  flex: 1 0 auto;
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 250, 248, 0.94);
  border-bottom: 1px solid rgba(45, 102, 83, 0.1);
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
}

.site-head__id {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--c-text);
}

.site-head__id svg {
  width: 30px;
  height: 30px;
  color: var(--c-green-700);
  flex-shrink: 0;
}

.site-head__name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.site-head__role {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  line-height: 1.2;
}

.site-head__nav {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  font-size: 0.9rem;
}

.site-head__nav a {
  color: var(--c-text-soft);
  text-decoration: none;
}

.site-head__nav a:hover {
  color: var(--c-green-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A regua e a do nome e do cargo saem do mobile. Antes eles sumiam porque a
   barra ainda tinha que caber com os links de navegacao; agora, abaixo de
   900px, o que sobra na barra e o nome e o hamburguer, com folga. */

.crumbs {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  padding-top: clamp(1.75rem, 5vw, 2.5rem);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}

.crumbs li::after {
  content: "/";
  margin-left: 0.4rem;
  color: rgba(92, 114, 104, 0.5);
}

.crumbs li:last-child::after {
  content: none;
}

.crumbs a {
  color: var(--c-green-700);
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-hero {
  padding: clamp(1.25rem, 3.5vw, 1.75rem) 0 clamp(2rem, 5vw, 3rem);
}

.page-hero h1 {
  max-width: 22ch;
  margin-bottom: 0.85rem;
}

.page-hero .text {
  max-width: 56ch;
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin-top: 1.35rem;
  font-size: 0.875rem;
  color: var(--c-text-soft);
}

.page-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid rgba(45, 102, 83, 0.12);
  border-radius: 999px;
  padding: 0.34rem 0.8rem;
}

.page-meta svg {
  width: 15px;
  height: 15px;
  color: var(--c-green-600);
  flex-shrink: 0;
}

.page-body {
  flex: 1 0 auto;
  padding-bottom: clamp(3.5rem, 9vw, 5.5rem);
}

.page-card {
  background: #fff;
  border: 1px solid rgba(45, 102, 83, 0.1);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4.5vw, 2.6rem);
  box-shadow: var(--shadow-md);
}

.page-card + .page-card {
  margin-top: 1.25rem;
}

.prose > * + * {
  margin-top: 1rem;
}

.prose h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-text);
  margin-top: 2.25rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
  margin-top: 1.6rem;
}

.prose p,
.prose li {
  font-size: 1.0125rem;
  line-height: 1.75;
  color: var(--c-text-soft);
  text-wrap: pretty;
}

.prose > p + p {
  margin-top: 1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.prose strong {
  color: var(--c-text);
  font-weight: 600;
}

.prose a {
  color: var(--c-green-700);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--c-green-800);
}

.prose .lead-p {
  font-size: 1.075rem;
  color: var(--c-text-soft);
}

.callout {
  border-left: 3px solid var(--c-gold);
  background: #fdfaf4;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.1rem 1.25rem;
}

.callout p {
  font-family: var(--font-serif);
  font-size: 1.075rem;
  line-height: 1.6;
  color: var(--c-text-soft);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  padding-left: 0 !important;
}

.pill-list li {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--c-text-soft);
  background: var(--c-green-100);
  border-radius: 999px;
  padding: 0.34rem 0.78rem;
}

.page-cta {
  text-align: center;
  margin-top: 1.75rem;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.page-cta .micro {
  font-size: 0.9rem;
  color: var(--c-text-muted);
}

.related {
  margin-top: 1.75rem;
}

.related h2 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-green-700);
  margin-bottom: 0.85rem;
}

.related ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--c-text-soft);
  text-decoration: none;
  background: var(--c-bg);
  border: 1px solid rgba(45, 102, 83, 0.1);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.related a:hover {
  background: var(--c-green-100);
  transform: translateX(3px);
}

.related a::after {
  content: "\2192";
  color: var(--c-green-600);
  flex-shrink: 0;
}

.notfound {
  text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
}

.notfound__code {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-green-200);
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Footer
   As opacidades de texto subiram para passar em WCAG AA sobre o fundo
   escuro (o texto a 48% de opacidade dava contraste 4.06:1).
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 20;
  background: linear-gradient(165deg, var(--c-green-800) 0%, var(--c-ink) 100%);
  color: rgba(248, 251, 249, 0.82);
  padding-top: clamp(2.5rem, 5vw, 3.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(157, 212, 191, 0.4) 25%,
    rgba(196, 163, 90, 0.45) 50%,
    rgba(157, 212, 191, 0.4) 75%,
    transparent
  );
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
  padding-bottom: 1.5rem;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 38ch;
}

.footer__id {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  align-self: flex-start;
  text-decoration: none;
  color: inherit;
}

.footer__leaf {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--c-green-300);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer__id:hover .footer__leaf {
  transform: rotate(-8deg);
}

.footer__names {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.footer__name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: #f8fbf9;
}

.footer__role {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(248, 251, 249, 0.7);
}

.footer__tagline {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(248, 251, 249, 0.72);
}

.footer__col {
  min-width: 0;
}

.footer__title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-green-300);
  margin-bottom: 0.85rem;
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(248, 251, 249, 0.8);
}

.footer__list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__list a:hover {
  color: #fff;
}

.footer__note {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(248, 251, 249, 0.66);
}

.footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--c-green-300) !important;
}

.footer__contact svg {
  flex-shrink: 0;
}

.footer__contact:hover {
  color: #fff !important;
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(248, 251, 249, 0.12);
}

.footer__copy {
  font-size: 0.8125rem;
  color: rgba(248, 251, 249, 0.66);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.footer__legal a {
  font-size: 0.8125rem;
  color: rgba(248, 251, 249, 0.72);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer__legal a:hover {
  color: #fff;
  border-bottom-color: rgba(248, 251, 249, 0.5);
}

@media (min-width: 560px) {
  .footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .footer__inner {
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: 2rem 3rem;
    padding-bottom: 1.75rem;
  }

  .footer__brand {
    max-width: none;
  }
}

@media (max-width: 719px) {
  .footer {
    padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  }

  .footer__base {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Celular
   -------------------------------------------------------------------------- */

@media (max-width: 719px) {
  .stack-panel {
    min-height: 100svh;
    box-shadow: 0 -18px 46px rgba(18, 32, 26, 0.15);
  }

  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100svh;
    padding-top: clamp(5.25rem, 13vw, 6rem);
    padding-bottom: clamp(2rem, 6vw, 2.75rem);
  }

  /* Faixa da foto: ocupa o topo e absorve a sobra de altura, entao nunca
     invade o texto, em qualquer tamanho de tela. */
  .hero__media {
    position: relative;
    inset: auto;
    order: -1;
    flex: 1 1 auto;
    min-height: 190px;
    max-height: 50svh;
  }

  .hero__img {
    object-position: 68% 0%;
  }

  .hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(238, 246, 242, 0) 54%,
      rgba(238, 246, 242, 0.3) 73%,
      rgba(238, 246, 242, 0.7) 89%,
      rgba(238, 246, 242, 0.96) 100%
    );
  }

  .hero__layout {
    flex: 0 0 auto;
    padding-block: clamp(1.5rem, 5vw, 2rem) 0;
  }

  .hero__copy {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Botao secundario
   Variante de contorno com o MESMO tamanho e o MESMO peso de fonte do .btn
   principal. Existe porque o banner de cookies precisa mostrar "recusar" e
   "preferencias" com o mesmo destaque de "aceitar": um botao visualmente
   menor e mais fraco para recusar e a forma mais comum de consentimento nada
   valido, alem de ser o que a ANPD fiscaliza.

   .btn principal fica com o gradiente escuro; este usa contorno sobre a
   superficie escura do banner. Por isso a cor base e #fff, e nao o verde.
   -------------------------------------------------------------------------- */

.btn--quiet {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: none;
}

.btn--quiet:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.btn--quiet::before {
  background: radial-gradient(
    150px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.2),
    transparent 65%
  );
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Consentimento de cookies (LGPD)
   -------------------------------------------------------------------------- */

.cookie {
  position: fixed;
  z-index: 200;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(165deg, var(--c-green-800) 0%, var(--c-ink) 100%);
  color: rgba(248, 251, 249, 0.9);
  box-shadow: 0 -18px 46px rgba(13, 23, 19, 0.28);
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}

.cookie[hidden] {
  display: none;
}

.cookie.is-open {
  opacity: 1;
  transform: translateY(0);
}

.cookie__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 1.1rem;
}

.cookie__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.35rem;
}

.cookie__text p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(248, 251, 249, 0.86);
  text-wrap: pretty;
}

.cookie__text a,
.cookie-modal__note a {
  color: var(--c-green-300);
  text-underline-offset: 3px;
}

.cookie__text a:hover,
.cookie-modal__note a:hover {
  color: var(--c-green-200);
}

.cookie__actions {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

/* Link, nao botao: "Gerenciar preferencias" e uma terceira via, nao uma
   decisao. Continua com area de clique de 44px, como pede a WCAG 2.5.8. */
.cookie__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-green-300);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.cookie__link:hover {
  color: var(--c-green-200);
}

.cookie__link:focus-visible {
  outline: 2px solid var(--c-green-300);
  outline-offset: 3px;
  border-radius: 6px;
}

/* —— Tela de preferencias —— */

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.cookie-modal[hidden] {
  display: none;
}

.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 23, 19, 0.6);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.cookie-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: min(88vh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-bg);
  border: 1px solid rgba(45, 102, 83, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 4vw, 1.9rem);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}

.cookie-modal.is-open .cookie-modal__backdrop {
  opacity: 1;
}

.cookie-modal.is-open .cookie-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cookie-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cookie-modal__title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-text);
}

.cookie-modal__sub {
  margin-top: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.cookie-modal__x {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(45, 102, 83, 0.14);
  border-radius: 50%;
  background: #fff;
  color: var(--c-text-soft);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.cookie-modal__x:hover {
  background: var(--c-green-100);
  color: var(--c-green-800);
}

.cookie-modal__list {
  display: grid;
  gap: 0.7rem;
}

.cookie-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid rgba(45, 102, 83, 0.1);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.05rem;
  box-shadow: var(--shadow-sm);
}

.cookie-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

.cookie-row__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.cookie-row__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
}

.cookie-row__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-green-700);
  background: var(--c-green-100);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

.cookie-row__desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.cookie-switch {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  cursor: pointer;
  margin-top: 0.15rem;
}

/* O input continua no DOM e no teclado: e ele que carrega estado, foco e o
   nome acessivel. O que some e so a caixa nativa. */
.cookie-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cookie-switch input:disabled {
  cursor: not-allowed;
}

.cookie-switch__track {
  position: relative;
  display: block;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: rgba(13, 23, 19, 0.22);
  transition: background 0.22s ease;
}

.cookie-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(13, 23, 19, 0.28);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-switch input:checked + .cookie-switch__track {
  background: linear-gradient(135deg, var(--c-green-600), var(--c-green-800));
}

.cookie-switch input:checked + .cookie-switch__track::after {
  transform: translateX(22px);
}

.cookie-switch input:disabled + .cookie-switch__track {
  background: rgba(45, 102, 83, 0.35);
}

.cookie-switch input:focus-visible + .cookie-switch__track {
  outline: 2px solid var(--c-green-600);
  outline-offset: 3px;
}

.cookie-modal__note {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.cookie-modal__foot {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.35rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(45, 102, 83, 0.12);
}

/* Trava a rolagem do fundo com o modal aberto. Sem isso o documento
   continua rolavel atras da sobreposicao em navegadores que nao usam
   overscroll-behavior no painel. */
html.has-cookie-modal {
  overflow: hidden;
}

@media (min-width: 860px) {
  .cookie__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    align-items: center;
    gap: 1.75rem;
  }

  .cookie__actions {
    grid-template-columns: 1fr 1fr;
  }

  .cookie__actions .cookie__link {
    grid-column: 1 / -1;
  }

  .cookie__actions .btn {
    width: 100%;
    padding-inline: 1.1rem;
    font-size: 0.95rem;
  }

  .cookie-modal__foot {
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
  }

  .cookie-modal__foot .btn {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .cookie {
    padding: 1.15rem 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* ——— O que este bloco nao faz mais: ———
     Ate aqui o bloco inteiro usava transition-duration: 0.01ms para tudo,
     o que na pratica desligava o efeito de entrada. Medido no Chrome com
     prefers-reduced-motion ativo:

       transition-duration: 0.01ms
       opacidade por quadro: 0.00 0.00 0.00 0.00 1.00 1.00 1.00 ...

     O texto nao aparecia instantaneamente: ele passava de 0 para 1 em um
     unico quadro. Isso e o oposto de fade, e era o sintoma relatado de "as
     palavras entram muito rapido, sem suavidade".

     prefers-reduced-motion pede para remover MOVIMENTO — deslocamento,
     parallax, rotacao, zoom. Sao esses que causam nausea e transtorno
     vestibular. Ele nao pede para remover o aparecimento gradual: um
     crossfade so de opacidade nao move nada na tela, e continua legivel
     para o usuario que pediu a reducao. A regra acessivel e "sem
     deslocamento", nao "sem fade".

     Entao o caminho e o oposto do que o bloco fazia: zerar tudo primeiro
     (para nenhuma animacao nova escapar) e depois restaurar
     explicitamente o fade de opacidade das classes de entrada, sem
     transform. As regras de restauracao vem DEPOIS do zeramento e sao
     igualmente !important, entao vencem por especificidade e por ordem. */

  /* Os atrasos das listas continuam: o escalonamento entre itens vizinhos
     e ritmo, nao movimento. Zerar o --rd faria a lista entrar como um
     bloco so — sem motivo de acessibilidade. */
  .js .stagger.is-visible > *,
  .js .reveal.is-visible .stagger > * { transition-delay: calc(var(--in-stagger) * (var(--i, 1) - 0.5)) !important; }

  /* Entrada por transition (.reveal, .split, .stagger > *).
     So opacidade, sem transform, com duracao propria e mais curta que a
     normal — o usuario pediu menos agitacao, nao uma espera maior. */
  .js .reveal,
  .js .split,
  .js .stagger > * {
    opacity: 0;
    transform: none !important;
    transition:
      opacity var(--in-fade-dur-rm) var(--in-fade) !important;
    will-change: auto !important;
  }

  .js .reveal.is-visible,
  .js .split.is-visible,
  .js .stagger.is-visible > *,
  .js .reveal.is-visible .stagger > * {
    opacity: 1;
    transform: none !important;
  }

  /* Entrada por @keyframes (.hero-line e .theme-card).
     Sao duas animacoes por elemento: a de opacidade e a de transform. Aqui
     so a de opacidade e redeclarada, entao a subida some e o fade fica. */
  .js .hero-line {
    animation: hero-fade var(--in-fade-dur-rm) var(--in-fade) forwards !important;
    animation-delay: var(--d, 0s) !important;
  }

  .js .themes__grid.is-visible .theme-card {
    animation: card-fade var(--in-fade-dur-rm) var(--in-fade) forwards !important;
    animation-delay: calc(var(--in-stagger) * (var(--i, 1) - 0.5)) !important;
  }

  .theme-card {
    opacity: 0;
    transform: none !important;
  }
  .js .themes__grid.is-visible .theme-card { opacity: 1; }

  /* O desfoque opt-in precisa sair. Com a transicao em 0.01ms o
     filter: blur(8px) do estado inicial ainda valeria no quadro em que o
     .is-visible entra, e o texto ficaria permanentemente desfocado. */
  .js .reveal--blur,
  .js .split--blur,
  .js .reveal--blur.is-visible,
  .js .split--blur.is-visible {
    filter: none !important;
  }
}