/* ==========================================================================
   INSTITUTO VERDEJAR - Componentes
   ========================================================================== */

/* ==========================================================================
   1. ONDA ORGÂNICA - a assinatura visual da marca
   Presente em todas as artes: separa a fotografia do painel de papel.
   Vertical no hero, horizontal entre seções.
   ========================================================================== */

.onda-vertical {
  position: absolute;
  top: 0;
  height: 100%;
  width: 120px;
  z-index: var(--z-onda);
  pointer-events: none;
}
.onda-vertical--esquerda { left: -119px; }

.onda-horizontal {
  display: block;
  width: 100%;
  height: clamp(60px, 8vw, 130px);
  z-index: var(--z-onda);
  /* A área acima da curva é transparente: o fundo deste elemento precisa
     ser o mesmo da seção anterior, senão aparece uma emenda reta. */
}
/* Espelha a onda para variar o ritmo entre seções */
.onda-horizontal--invertida { transform: scaleX(-1); }

/* Cor de origem - casa com a seção imediatamente acima da onda */
.onda-horizontal--de-papel { background-color: var(--creme-papel); }
.onda-horizontal--de-creme { background-color: var(--creme-claro); }
.onda-horizontal--de-floresta { background-color: var(--verde-floresta); }

.onda-preenche-creme    { fill: var(--creme-claro); }
.onda-preenche-papel    { fill: var(--creme-papel); }
.onda-preenche-floresta { fill: var(--verde-floresta); }
.onda-preenche-profundo { fill: var(--verde-profundo); }

/* ---------- Onda na base da capa de página interna ----------
   Vive DENTRO da <section class="capa-pagina">, e não como irmã depois dela.
   Como irmã, o elemento trazia o próprio background-color e formava uma faixa
   de cor cheia logo abaixo da fotografia - a foto parecia parar antes do fim
   da seção. Por dentro, ela não tem fundo: a área acima da curva é
   transparente, a fotografia corre até a base da seção e a onda só recorta
   por cima o formato do papel que vem a seguir.

   A capa é `position: relative` e `overflow: hidden`, então o posicionamento
   absoluto se ancora nela e nada vaza. */
.onda-horizontal--base-capa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;            /* mata o fio claro que o arredondamento deixa */
  width: 100%;
  z-index: var(--z-onda);
  background-color: transparent;
  pointer-events: none;
}

/* Classe própria de propósito: `.onda-preenche-papel` dentro de uma capa
   escura é repintada de verde por outra regra (é o que a onda VERTICAL do
   painel precisa), e a onda de base ficaria invisível. */
.onda-preenche-base { fill: var(--fundo-pagina); }


/* ==========================================================================
   2. FOLHAGEM ORNAMENTAL - traço dourado fino de fundo
   ========================================================================== */

.folhagem-ornamental {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
  color: var(--dourado);
}
.folhagem-ornamental--topo-direita {
  top: 0; right: 0;
  width: clamp(180px, 26vw, 420px);
}
.folhagem-ornamental--base-esquerda {
  bottom: 0; left: 0;
  width: clamp(150px, 20vw, 320px);
  transform: scaleX(-1);
}


/* ==========================================================================
   3. CABEÇALHO
   ========================================================================== */

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-block: var(--sp-sm);
  transition: box-shadow var(--dur-media) var(--ease-suave),
              padding var(--dur-media) var(--ease-suave);
}

/* O fundo vidro fica num pseudo-elemento, nunca no próprio .cabecalho:
   backdrop-filter no cabeçalho vira containing block dos descendentes fixed,
   e o menu mobile (position: fixed; inset: 0) ficaria com a altura do
   cabeçalho em vez da tela inteira. */
.cabecalho::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: rgb(var(--rgb-offwhite) / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease-suave);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
}

.cabecalho__marca {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.cabecalho__marca img,
.cabecalho__marca svg { width: 38px; height: 40px; }

.cabecalho__marca-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.cabecalho__marca-texto small {
  font-family: var(--font-titulo);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--verdejar-oliva);
  font-weight: var(--peso-subtitulo);
}
.cabecalho__marca-texto strong {
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  font-weight: var(--peso-titulo);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--verdejar-oliva);
}

/* Sobre o hero o cabeçalho é transparente; ao rolar ganha fundo */
.cabecalho--rolado {
  box-shadow: 0 1px 0 var(--creme-borda), 0 8px 28px rgb(var(--rgb-tronco) / 0.07);
  padding-block: var(--sp-2xs);
}
.cabecalho--rolado::before { opacity: 1; }

/* Páginas sem hero (ex.: Sobre Nós) - o cabeçalho já nasce sólido,
   porque o conteúdo começa colado no topo. O JS não mexe nesta classe. */
.cabecalho--solido {
  box-shadow: 0 1px 0 var(--creme-borda), 0 8px 28px rgb(var(--rgb-tronco) / 0.07);
}
.cabecalho--solido::before {
  background-color: rgb(var(--rgb-offwhite) / 0.94);
  opacity: 1;
}

.menu {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.menu__navegacao {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-sm), 2vw, var(--sp-lg));
}
/* Menu em Inter, conforme o manual de fontes ("corpo, parágrafos, menu") */
.menu__link {
  position: relative;
  font-family: var(--font-corpo);
  font-size: var(--fs-pequeno);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verdejar-oliva);
  padding-block: var(--sp-3xs);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.menu__link:hover { color: var(--verdejar-laranja); }
.menu__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--verdejar-laranja);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-rapida) var(--ease-suave);
}
.menu__link:hover::after,
.menu__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Link que sai do site (Loja Virtual): setinha ↗ depois do texto.
   O ícone fica em linha (e não flex) para o link manter a mesma caixa dos
   vizinhos - senão o sublinhado Laranja dele descia alguns pixels. */
.menu__link--externo svg {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
}

.menu__botao-mobile {
  display: none;
  background: none;
  border: 0;
  padding: var(--sp-2xs);
  cursor: pointer;
  color: var(--verde-tipo);
}
.menu__botao-mobile svg { width: 26px; height: 26px; }


/* ==========================================================================
   4. BOTÕES
   ========================================================================== */

.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: 0.85em 1.9em;
  border: 0;
  border-radius: 100px;
  /* Inter SemiBold nos botões, conforme o manual de fontes */
  font-family: var(--font-corpo);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-destaque);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-suave),
              background-color var(--dur-rapida) var(--ease-suave),
              box-shadow var(--dur-rapida) var(--ease-suave);
}
.botao:hover { transform: translateY(-2px); }

/* Botão principal: fundo Laranja, texto Off-White.
   No hover, o Laranja escurece 10% - regra explícita do manual. */
.botao--primario {
  background: var(--acao);
  color: var(--acao-texto);
  box-shadow: 0 6px 18px rgb(var(--rgb-laranja) / 0.3);
}
.botao--primario:hover { background: var(--acao-hover); }

/* Botão secundário: contorno Verde Oliva, fundo transparente, texto Oliva. */
.botao--contorno {
  background: transparent;
  color: var(--verdejar-oliva);
  box-shadow: inset 0 0 0 1.5px var(--verdejar-oliva);
}
.botao--contorno:hover { background: rgb(var(--rgb-oliva) / 0.1); }


/* ==========================================================================
   5. CARDS DE NAVEGAÇÃO - o grid "ACESSE" da arte_02
   ========================================================================== */

/* Nove cards: 3 x 3 no desktop, 2 colunas no tablet, 1 no celular.
   Colunas fixas em vez de auto-fit - com auto-fit a grade caía em 4 colunas
   e o nono card sobrava sozinho na última linha.
   A faixa da Loja Virtual vem depois dos nove e ocupa a linha inteira. */
.grade-acesso {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--sp-sm), 1.6vw, var(--sp-md));
}
@media (max-width: 960px) {
  .grade-acesso { grid-template-columns: repeat(2, 1fr); }
  /* Em 2 colunas o nono card fica ímpar: ocupa a linha inteira.
     Depois dele vêm as duas faixas (Calculadora e Loja), por isso nth-last-child(3). */
  .grade-acesso > .card-acesso:not(.card-acesso--loja):nth-child(odd):nth-last-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .grade-acesso { grid-template-columns: 1fr; }
}

.card-acesso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-xs);
  padding: clamp(var(--sp-md), 2.4vw, var(--sp-lg)) var(--sp-md);
  background-color: var(--creme-card);
  background-image: var(--textura-papel);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  transition: transform var(--dur-media) var(--ease-saida),
              box-shadow var(--dur-media) var(--ease-saida);
}

.card-acesso::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-oliva) / 0.16);
  pointer-events: none;
}

.card-acesso:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta);
}

.card-acesso__icone {
  width: 46px;
  height: 46px;
  color: var(--verde-folha);
  transition: transform var(--dur-media) var(--ease-saida);
}
.card-acesso:hover .card-acesso__icone { transform: translateY(-3px) scale(1.06); }

.card-acesso__titulo {
  font-family: var(--font-corpo);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-tipo);
  line-height: 1.35;
}

.card-acesso__texto {
  font-size: var(--fs-pequeno);
  line-height: 1.55;
  color: var(--texto-medio);
  max-width: 26ch;
}

/* Variantes sólidas - os dois cards de ação no fim do grid.
   Ambas usam combinações que o manual aprova para qualquer tamanho de texto:
   Tronco sobre Verde Limão e Off-White sobre Verde Oliva. O Laranja fica
   reservado aos botões e aos detalhes - "usar com parcimônia". */

/* "Seja um Apoiador" - tarja em Verde Limão, o realce da marca */
.card-acesso--oliva {
  background-color: var(--verdejar-limao);
  background-image: var(--textura-papel);
}
.card-acesso--oliva .card-acesso__titulo,
.card-acesso--oliva .card-acesso__icone { color: var(--verdejar-tronco); }
.card-acesso--oliva .card-acesso__texto { color: rgb(var(--rgb-tronco) / 0.85); }
.card-acesso--oliva::after { box-shadow: inset 0 0 0 1px rgb(var(--rgb-tronco) / 0.22); }

/* "Fale Conosco" - bloco institucional em Verde Oliva */
.card-acesso--escuro {
  background-color: var(--verdejar-oliva);
  background-image: var(--textura-papel);
}
.card-acesso--escuro .card-acesso__titulo,
.card-acesso--escuro .card-acesso__icone { color: var(--texto-sobre-escuro); }
.card-acesso--escuro .card-acesso__texto { color: var(--texto-sobre-escuro-suave); }
.card-acesso--escuro::after { box-shadow: inset 0 0 0 1px rgb(var(--rgb-offwhite) / 0.22); }

/* "Loja Virtual" - faixa de largura inteira abaixo dos nove cards.
   Leva para outro site (o subdomínio da loja), por isso tem cara de saída:
   ícone, texto e um botão Laranja em linha. No celular empilha, centralizado. */
.card-acesso--loja {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  gap: clamp(var(--sp-sm), 2.4vw, var(--sp-lg));
  text-align: left;
  padding-inline: clamp(var(--sp-md), 4vw, var(--sp-xl));
}
.card-acesso--loja .card-acesso__icone { flex-shrink: 0; width: 52px; height: 52px; }
.card-acesso__loja-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3xs);
}
.card-acesso--loja .card-acesso__texto { max-width: none; }
.card-acesso--loja .botao { flex-shrink: 0; }
.card-acesso--loja .botao svg { width: 1em; height: 1em; }
.card-acesso--loja:hover .botao { background: var(--acao-hover); }

@media (max-width: 640px) {
  .card-acesso--loja {
    flex-direction: column;
    text-align: center;
  }
  .card-acesso__loja-texto { align-items: center; }
}


/* ==========================================================================
   6. RODAPÉ
   ========================================================================== */

/* Manual: "Rodapé - fundo Verde Oliva com texto Off-White e detalhe em Laranja."
   O Laranja entra nos filetes e no realce dos ícones. Nos textos ele não entra:
   sobre o Oliva o contraste não sustenta leitura - por isso todo texto do
   rodapé é Off-White. */
.rodape {
  position: relative;
  background-color: var(--fundo-escuro);
  background-image: var(--textura-papel);
  color: var(--texto-sobre-escuro);
  padding-block: var(--sp-2xl) var(--sp-lg);
  overflow: hidden;
}

.rodape__citacao {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-titulo);
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  font-weight: var(--peso-subtitulo);
  line-height: 1.35;
  color: var(--texto-sobre-escuro);
}

.rodape__redes {
  display: flex;
  justify-content: center;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}
/* Os ícones das redes usam o símbolo oficial colorido de cada plataforma
   (pedido do guia de modificações). Marca de terceiro é a exceção prevista
   à regra das cinco cores - por isso o SVG traz a própria cor e o círculo
   fica em Off-White, que serve de base neutra a todas elas. */
.rodape__rede {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--verdejar-offwhite);
  box-shadow: 0 2px 8px rgb(var(--rgb-tronco) / 0.25);
  transition: box-shadow var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}
.rodape__rede svg { width: 24px; height: 24px; }
.rodape__rede:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px var(--verdejar-laranja),
              0 6px 16px rgb(var(--rgb-tronco) / 0.3);
}

.rodape__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-lg);
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid rgb(var(--rgb-laranja) / 0.45);
}

.rodape__titulo-coluna {
  font-family: var(--font-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-subtitulo);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--texto-sobre-escuro);
  margin-bottom: var(--sp-sm);
}

.rodape__lista li + li { margin-top: var(--sp-2xs); }
.rodape__lista a,
.rodape__lista span {
  font-size: var(--fs-pequeno);
  color: var(--texto-claro-suave);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.rodape__lista a:hover { color: var(--texto-sobre-escuro); }

.rodape__base {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid rgb(var(--rgb-laranja) / 0.3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-sm);
  font-size: var(--fs-micro);
  color: rgb(var(--rgb-offwhite) / 0.55);
}


/* ==========================================================================
   7. AVISO DE PENDÊNCIA (temporário - remover antes de publicar)
   ========================================================================== */

.aviso-placeholder {
  position: fixed;
  right: var(--sp-sm);
  bottom: var(--sp-sm);
  z-index: var(--z-menu);
  max-width: 280px;
  padding: var(--sp-xs) var(--sp-sm);
  background: rgb(var(--rgb-tronco) / 0.93);
  color: var(--creme-papel);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio-sm);
  font-size: var(--fs-micro);
  line-height: 1.5;
  box-shadow: var(--sombra-alta);
}
.aviso-placeholder button {
  background: none;
  border: 0;
  color: var(--dourado);
  cursor: pointer;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-decoration: underline;
  padding: 0;
  margin-top: var(--sp-3xs);
}


/* ==========================================================================
   8. MIGALHAS DE PÃO - orientação nas páginas internas
   ========================================================================== */

.migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2xs);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-medio);
}
.migalhas li + li::before {
  content: "/";
  margin-right: var(--sp-2xs);
  color: var(--verde-oliva);
  opacity: 0.6;
}
.migalhas a:hover { color: var(--verde-oliva); }
.migalhas [aria-current="page"] { color: var(--verde-tipo); font-weight: 700; }


/* ==========================================================================
   9. CARD DE PROJETO - grade da página "Nossos Projetos"
   ========================================================================== */

.grade-projetos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(var(--sp-md), 2vw, var(--sp-lg));
}

.card-projeto {
  display: flex;
  flex-direction: column;
  background-color: var(--creme-card);
  background-image: var(--textura-papel);
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: transform var(--dur-media) var(--ease-saida),
              box-shadow var(--dur-media) var(--ease-saida);
}
.card-projeto:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta);
}

.card-projeto__foto { overflow: hidden; }
.card-projeto__foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-saida);
}
.card-projeto:hover .card-projeto__foto img { transform: scale(1.05); }

.card-projeto__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2xs);
  padding: var(--sp-md);
}

.card-projeto__titulo {
  font-size: var(--fs-h3);
  color: var(--verde-tipo);
}

.card-projeto__texto {
  font-size: var(--fs-pequeno);
  line-height: 1.6;
  color: var(--texto-medio);
}

.card-projeto__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  margin-top: auto;
  padding-top: var(--sp-sm);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-oliva);
}
.card-projeto__link svg { width: 16px; height: 16px; transition: transform var(--dur-rapida) var(--ease-suave); }
.card-projeto:hover .card-projeto__link svg { transform: translateX(4px); }


/* ==========================================================================
   10. PILARES - a fileira de ícones circulares das artes 08 e 10
   ========================================================================== */

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(var(--sp-md), 3vw, var(--sp-lg));
  text-align: center;
}

.pilar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
}

.pilar__icone {
  display: grid;
  place-items: center;
  width: clamp(60px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--verde-oliva);
  color: var(--creme-papel);
}
.pilar__icone svg { width: 52%; height: 52%; }

.pilar__rotulo {
  font-family: var(--font-corpo);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--verde-tipo);
}

/* Sobre fundo escuro os círculos ficam vazados, como nas artes */
.secao--floresta .pilar__icone,
.chamada .pilar__icone {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--dourado);
  color: var(--dourado);
}
.secao--floresta .pilar__rotulo,
.chamada .pilar__rotulo { color: var(--texto-claro-suave); }


/* ==========================================================================
   11. LISTA COM FOLHINHA - enumerações dentro do texto corrido
   ========================================================================== */

.lista-folha li {
  position: relative;
  padding-left: 2rem;
  color: var(--texto-medio);
}
.lista-folha li + li { margin-top: var(--sp-xs); }

.lista-folha__icone {
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 17px;
  height: 17px;
  color: var(--verde-oliva);
}

.secao--floresta .lista-folha li { color: var(--texto-claro-suave); }
.secao--floresta .lista-folha__icone { color: var(--dourado); }


/* ==========================================================================
   12. CHAMADA - faixa verde de convite ao fim das páginas
   ========================================================================== */

/* Tom mais fechado que o rodapé, para os dois blocos escuros em sequência
   não virarem uma mancha só. */
.chamada {
  position: relative;
  padding-block: clamp(var(--sp-2xl), 8vw, var(--sp-3xl));
  background-color: var(--verde-profundo);
  background-image: var(--textura-papel);
  color: var(--texto-claro);
  text-align: center;
  overflow: hidden;
}

.chamada__titulo {
  font-size: var(--fs-h2);
  color: var(--creme-papel);
  max-width: 20ch;
  margin-inline: auto;
}

.chamada__texto {
  max-width: 56ch;
  margin: var(--sp-md) auto 0;
  color: var(--texto-claro-suave);
}

.chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}

.chamada .botao--contorno {
  color: var(--creme-papel);
  box-shadow: inset 0 0 0 1.5px var(--dourado);
}
.chamada .botao--contorno:hover { background: rgb(var(--rgb-limao) / 0.16); }


/* ==========================================================================
   13. CARD DE INFORMAÇÃO - blocos de contato, formas de apoio, parceria
   ========================================================================== */

.grade-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(var(--sp-md), 2vw, var(--sp-lg));
}

.card-info {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  padding: clamp(var(--sp-md), 2.4vw, var(--sp-lg));
  background-color: var(--creme-card);
  background-image: var(--textura-papel);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
}
.card-info::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-oliva) / 0.16);
  pointer-events: none;
}

.card-info__icone {
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-2xs);
  color: var(--verde-folha);
}

.card-info__titulo {
  font-family: var(--font-corpo);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-tipo);
}

.card-info__texto {
  font-size: var(--fs-pequeno);
  line-height: 1.6;
  color: var(--texto-medio);
}
.card-info__texto a { text-decoration: underline; text-underline-offset: 3px; }

/* O dado em si (telefone, horário) - é o que a pessoa veio buscar no card.
   Oswald Medium, um corpo acima do texto de apoio. */
.card-info__dado {
  font-family: var(--font-titulo);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: var(--peso-subtitulo);
  line-height: 1.2;
  color: var(--verdejar-oliva);
}
.card-info__dado a { text-decoration: none; }
.card-info__dado a:hover { color: var(--verdejar-laranja); text-decoration: underline; }

/* Card em destaque - o nível de apoio recomendado, o canal principal */
.card-info--destaque {
  background-color: var(--verde-oliva);
  background-image: var(--textura-papel);
}
.card-info--destaque .card-info__titulo,
.card-info--destaque .card-info__icone { color: var(--creme-papel); }
.card-info--destaque .card-info__texto { color: var(--texto-claro-suave); }
.card-info--destaque::after { box-shadow: inset 0 0 0 1px rgb(var(--rgb-offwhite) / 0.22); }

/* Precisa vir depois da regra de .card-info__texto acima: o elemento carrega as
   duas classes, e o dado não pode herdar os 78% de opacidade do texto de apoio. */
.card-info--destaque .card-info__dado,
.card-info--destaque .card-info__dado a { color: var(--texto-sobre-escuro); }
.card-info--destaque .card-info__dado a:hover { color: var(--verdejar-limao); }


/* ==========================================================================
   14. SELO DE PENDÊNCIA - marca no conteúdo o que aguarda o cliente
   Some junto com o aviso, quando o material oficial chegar.
   ========================================================================== */

/* Etiqueta compacta, de uma linha só. A pílula arredondada só funciona em
   linha única: com o texto quebrando dentro dela o formato ficava disforme.
   Por isso o rótulo é curto ("PIX pendente"), o corpo é menor e o raio é
   suave - se ainda assim quebrar numa tela estreita, continua legível. */
.selo-pendente {
  display: inline-block;
  max-width: 100%;
  padding: 0.2em 0.65em;
  border-radius: var(--raio-sm);
  background: rgb(var(--rgb-limao) / 0.28);
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-limao) / 0.6);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--verdejar-tronco);   /* Tronco sobre Verde Limão - combinação
                                      aprovada no manual para qualquer corpo */
  vertical-align: middle;
}

/* Dentro dos cards de forma de apoio o selo é a última linha do bloco:
   ganha respiro em cima para não colar no parágrafo. */
.card-info .selo-pendente,
.card-acesso .selo-pendente { margin-top: var(--sp-3xs); }


/* ==========================================================================
   15. FORMULÁRIO
   ========================================================================== */

.formulario {
  display: grid;
  gap: var(--sp-md);
}

.formulario__linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-md);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
}

.campo__rotulo {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-tipo);
}
.campo__rotulo span { color: var(--verde-oliva); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 1.5px solid var(--creme-borda);
  border-radius: var(--raio-sm);
  /* Branco puro não entra: o fundo dos campos é o próprio Off-White,
     clareado só o bastante para o campo se destacar do painel. */
  background-color: rgb(var(--rgb-offwhite) / 0.55);
  color: var(--texto-corpo);
  font-size: var(--fs-pequeno);
  transition: border-color var(--dur-rapida) var(--ease-suave),
              background-color var(--dur-rapida) var(--ease-suave);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--verde-oliva); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verdejar-oliva);
  background-color: var(--verdejar-offwhite);
  box-shadow: 0 0 0 3px rgb(var(--rgb-oliva) / 0.18);
}

/* Erro de formulário: tom profundo do Laranja da marca.
   O manual proíbe cor nova, mas permite tons das cinco - este é o Laranja
   escurecido até ter contraste de leitura sobre o Off-White. */
.campo__erro {
  display: none;
  font-size: var(--fs-micro);
  font-weight: var(--peso-destaque);
  color: var(--erro);
}
.campo--invalido .campo__erro { display: block; }
.campo--invalido input,
.campo--invalido select,
.campo--invalido textarea { border-color: var(--erro); }

/* Consentimento - caixa de seleção com rótulo ao lado */
.campo--marcacao {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-xs);
}
.campo--marcacao .campo__erro { width: 100%; }
.campo--marcacao input {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.2em;
  padding: 0;
  accent-color: var(--verde-oliva);
}
.campo--marcacao .campo__rotulo {
  font-size: var(--fs-pequeno);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--texto-medio);
}

.formulario__retorno {
  display: none;
  padding: var(--sp-sm) var(--sp-md);
  border-left: 3px solid var(--verde-oliva);
  border-radius: var(--raio-sm);
  background: rgb(var(--rgb-oliva) / 0.12);
  font-size: var(--fs-pequeno);
  line-height: 1.6;
  color: var(--verde-tipo);
}
.formulario__retorno[data-visivel="true"] { display: block; }

/* Os três estados do envio. Erro usa o mesmo tom profundo do Laranja dos
   campos inválidos; sucesso fica no Oliva; "enviando" perde a cor para
   sinalizar que ainda é provisório. */
.formulario__retorno[data-estado="sucesso"] {
  border-left-color: var(--verdejar-oliva);
  background: rgb(var(--rgb-oliva) / 0.12);
  color: var(--verdejar-oliva);
  font-weight: var(--peso-destaque);
}
.formulario__retorno[data-estado="erro"] {
  border-left-color: var(--erro);
  background: rgb(var(--rgb-laranja) / 0.1);
  color: var(--erro);
  font-weight: var(--peso-destaque);
}
.formulario__retorno[data-estado="enviando"] {
  border-left-color: var(--borda-forte);
  background: rgb(var(--rgb-oliva) / 0.06);
  color: var(--texto-apoio);
}

.botao[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.formulario__nota {
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--texto-medio);
}

/* Armadilha anti-robô: campo invisível que só um robô preenche */
.campo--armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   16. PERGUNTAS FREQUENTES - <details>/<summary>, funciona sem JavaScript
   ========================================================================== */

.faq { max-width: var(--largura-texto); margin-inline: auto; }

.faq__item {
  border-bottom: 1px solid var(--creme-borda);
}

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding-block: var(--sp-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-titulo);
  font-size: var(--fs-h3);
  color: var(--verde-tipo);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:hover { color: var(--verde-oliva); }

.faq__sinal {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
  color: var(--verde-oliva);
}
.faq__sinal::before,
.faq__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-rapida) var(--ease-suave);
}
.faq__sinal::after { transform: rotate(90deg); }
.faq__item[open] .faq__sinal::after { transform: rotate(0deg); }

.faq__resposta {
  padding-bottom: var(--sp-md);
  max-width: 62ch;
  color: var(--texto-medio);
}
.faq__resposta p + p { margin-top: var(--sp-sm); }


/* ==========================================================================
   17. RESPONSIVO
   ========================================================================== */

/* O menu vira hambúrguer abaixo de 960px (era 860px): com a Loja, são sete
   itens, e entre 861px e 960px eles já não cabiam ao lado da marca. */
@media (max-width: 960px) {
  /* Acima do painel aberto, para servir de botão fechar */
  .menu__botao-mobile {
    display: block;
    position: relative;
    z-index: calc(var(--z-menu) + 1);
  }

  .menu__navegacao {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-lg);
    background-color: var(--creme-papel);
    background-image: var(--textura-papel);
    transform: translateX(100%);
    transition: transform var(--dur-media) var(--ease-organica);
  }
  .menu__navegacao[data-aberto="true"] { transform: translateX(0); }
  .menu__link { font-size: 1.05rem; }
}


/* ==========================================================================
   18. EM BREVE - véu temporário sobre uma página ainda não liberada
   Usado na Apoie enquanto as formas de apoio são decididas. A página segue
   montada por baixo, desfocada; o cabeçalho fica por cima (z-header > véu)
   para o visitante continuar navegando. Liberar = tirar o bloco do HTML.
   ========================================================================== */

/* Trava a rolagem: o véu é fixo, rolar por baixo dele não mostra nada. */
.pagina-em-breve,
.pagina-em-breve body { overflow: hidden; }

.em-breve {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  /* Respiro do cabeçalho fixo em cima; rola sozinho em tela muito baixa. */
  padding: calc(var(--sp-2xl) + var(--sp-xs)) var(--sp-sm) var(--sp-lg);
  overflow-y: auto;
  background-color: rgb(var(--rgb-offwhite) / 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}
.em-breve:focus { outline: none; }

/* Sem backdrop-filter, o conteúdo por baixo ficaria legível: o véu fecha. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .em-breve { background-color: rgb(var(--rgb-offwhite) / 0.97); }
}

/* margin:auto centraliza sem cortar o topo quando o cartão passa da tela. */
.em-breve__cartao {
  margin: auto;
  width: min(100%, 34rem);
  padding: clamp(var(--sp-lg), 6vw, var(--sp-xl)) clamp(var(--sp-md), 5vw, var(--sp-xl));
  text-align: center;
  background-color: var(--fundo-painel);
  background-image: var(--textura-papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-alta);
}

/* Logo com o cadeado encaixado no canto, como um selo. */
.em-breve__marca {
  position: relative;
  width: clamp(88px, 22vw, 120px);
  margin: 0 auto var(--sp-md);
}
.em-breve__marca img { width: 100%; height: auto; }

.em-breve__cadeado {
  position: absolute;
  right: -14%;
  bottom: -6%;
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--verdejar-oliva);
  color: var(--texto-sobre-escuro);
  /* Anel off-white separa o selo do desenho do logo. */
  box-shadow: 0 0 0 4px var(--fundo-painel), var(--sombra-card);
}
.em-breve__cadeado svg { width: 58%; height: 58%; }

.em-breve__titulo {
  margin-top: var(--sp-2xs);
  font-family: var(--font-titulo);
  font-size: var(--fs-h2);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--texto-titulo);
}

.em-breve__texto {
  max-width: 36ch;
  margin: var(--sp-sm) auto 0;
  color: var(--texto-apoio);
}

.em-breve__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-lg);
}