/* ==========================================================================
   Aura Studio de Pilates by Esther Carvalho
   Folha de estilo unica. Nao depende de nenhuma biblioteca externa.

   Ordem do arquivo:
   1. Tokens
   2. Reset e base
   3. Utilitarios de layout
   4. Componentes (botao, olho, cartao)
   5. Secoes
   6. Movimento
   7. Responsivo
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   Paleta institucional fixa. Nenhuma cor fora daqui.
   ========================================================================== */

:root {
  /* Paleta oficial da marca */
  --creme: #f4f0ea;
  --dourado: #c19a5b;
  --preto: #1a1a1a;
  --oliva: #4c5340;
  --terra: #5c4033;

  /* Superficies derivadas da propria paleta */
  --superficie: var(--creme);
  --superficie-alt: #ece6dc; /* creme puxado para o terra, mesma familia */
  --superficie-escura: var(--preto);

  /* Texto
     Regra de contraste verificada:
     preto sobre creme = 15:1
     dourado sobre creme = 2,3:1  -> nunca usar dourado como texto sobre creme
     dourado sobre preto = 6,7:1  -> liberado
     preto sobre dourado = 6,7:1  -> liberado (botao) */
  --texto: var(--preto);
  --texto-suave: #4a463f;
  --texto-claro: var(--creme);
  --texto-claro-suave: rgba(244, 240, 234, 0.78);

  --linha: rgba(26, 26, 26, 0.12);
  --linha-clara: rgba(244, 240, 234, 0.2);

  /* Tipografia */
  --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-texto: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Arial, sans-serif;

  /* Base 18px: o publico inclui pessoas na melhor idade,
     16px seria o minimo, 18px e o confortavel. */
  --texto-base: 1.125rem;
  --linha-altura: 1.65;

  --t-olho: 0.78rem;
  --t-pequeno: 0.95rem;
  --t-h3: clamp(1.3rem, 1rem + 1.2vw, 1.7rem);
  --t-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  --t-h1: clamp(2.4rem, 1.5rem + 4.2vw, 4.4rem);

  /* Espacamento generoso: pagina de marketing, densidade baixa */
  --e1: 0.5rem;
  --e2: 1rem;
  --e3: 1.5rem;
  --e4: 2rem;
  --e5: 3rem;
  --e6: 4.5rem;
  --e7: 6rem;
  --secao: clamp(4rem, 8vw, 7.5rem);

  /* Forma: recuo sutil, nem reto nem arredondado demais */
  --raio: 4px;
  --raio-cartao: 12px;
  /* Arco do topo das fotos. O raio vertical era 260px e curvava tanto que
     comia o que estivesse nos cantos de cima, como a cabeca de quem aparece
     na ponta do enquadramento. 130px mantem a curva e devolve o conteudo. */
  --arco: 999px 999px var(--raio) var(--raio) / 130px 130px var(--raio)
    var(--raio);

  /* Sombra leve, so onde precisa de profundidade */
  --sombra: 0 1px 2px rgba(26, 26, 26, 0.04), 0 10px 30px rgba(26, 26, 26, 0.07);
  --sombra-forte: 0 2px 4px rgba(26, 26, 26, 0.06),
    0 18px 50px rgba(26, 26, 26, 0.12);

  --largura: 1200px;
  --largura-texto: 62ch;

  --transicao: 220ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* compensa o cabecalho fixo quando um link de ancora e clicado */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: var(--linha-altura);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--e3);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
}
h2 {
  font-size: var(--t-h2);
}
h3 {
  font-size: var(--t-h3);
  line-height: 1.25;
}

p {
  margin: 0 0 var(--e3);
  max-width: var(--largura-texto);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

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

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Foco sempre visivel. Nunca remover. */
:focus-visible {
  outline: 3px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 2px;
}

.fundo-escuro :focus-visible {
  outline-color: var(--creme);
}

/* Link de pular para o conteudo, para quem navega por teclado */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--preto);
  color: var(--creme);
  padding: var(--e2) var(--e3);
  border-radius: 0 0 var(--raio) 0;
}

.pular:focus {
  left: 0;
}

/* ==========================================================================
   3. UTILITARIOS DE LAYOUT
   ========================================================================== */

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

.secao {
  padding-block: var(--secao);
}

.fundo-alt {
  background: var(--superficie-alt);
}

.fundo-escuro {
  background: var(--superficie-escura);
  color: var(--texto-claro);
}

.fundo-oliva {
  background: var(--oliva);
  color: var(--texto-claro);
}

.fundo-escuro p,
.fundo-oliva p {
  color: var(--texto-claro-suave);
}

.centro {
  text-align: center;
}

.centro p {
  margin-inline: auto;
}

/* Texto apenas para leitor de tela */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* --- Olho: a linha pequena em caixa alta acima do titulo --- */
.olho {
  display: block;
  font-size: var(--t-olho);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e3);
}

.fundo-escuro .olho,
.fundo-oliva .olho,
.heroi .olho {
  color: var(--dourado);
}

/* --- Filete decorativo dourado --- */
.filete {
  width: 56px;
  height: 2px;
  background: var(--dourado);
  border: 0;
  margin: 0 0 var(--e4);
}

.centro .filete {
  margin-inline: auto;
}

/* --- Botoes --- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  /* alvo de toque confortavel, acima dos 44px minimos */
  min-height: 52px;
  padding: 0.9rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-family: var(--fonte-texto);
  font-size: var(--t-pequeno);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
    border-color var(--transicao), transform var(--transicao);
}

.botao:active {
  transform: translateY(1px);
}

/* Dourado com texto preto: 6,7:1. Branco sobre dourado reprovaria. */
.botao-principal {
  background: var(--dourado);
  color: var(--preto);
  border-color: var(--dourado);
}

.botao-principal:hover {
  background: #ad8848;
  border-color: #ad8848;
}

.botao-contorno {
  background: transparent;
  color: var(--texto);
  border-color: currentColor;
}

.botao-contorno:hover {
  background: var(--preto);
  color: var(--creme);
  border-color: var(--preto);
}

.fundo-escuro .botao-contorno,
.fundo-oliva .botao-contorno,
.heroi .botao-contorno {
  color: var(--creme);
}

.fundo-escuro .botao-contorno:hover,
.fundo-oliva .botao-contorno:hover,
.heroi .botao-contorno:hover {
  background: var(--creme);
  color: var(--preto);
  border-color: var(--creme);
}

.botao svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.grupo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.centro .grupo-botoes {
  justify-content: center;
}

/* ==========================================================================
   5. SECOES
   ========================================================================== */

/* --- Cabecalho --- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: var(--e3);
  transition: background-color var(--transicao), padding var(--transicao),
    box-shadow var(--transicao);
}

.cabecalho--fixo {
  background: rgba(244, 240, 234, 0.96);
  backdrop-filter: blur(10px);
  padding-block: 0.75rem;
  box-shadow: 0 1px 0 var(--linha);
}

.cabecalho .envolt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

.marca img {
  width: auto;
  height: 46px;
  transition: height var(--transicao);
}

.cabecalho--fixo .marca img {
  height: 40px;
}

/* Duas versoes do logo: a branca sai quando o cabecalho fica solido */
.marca .logo-claro {
  display: block;
}
.marca .logo-escuro {
  display: none;
}
.cabecalho--fixo .marca .logo-claro {
  display: none;
}
.cabecalho--fixo .marca .logo-escuro {
  display: block;
}

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

.menu a {
  display: inline-flex;
  align-items: center;
  /* 44px de altura minima tambem no menu do topo */
  min-height: 44px;
  font-size: var(--t-pequeno);
  font-weight: 500;
  text-decoration: none;
  color: var(--creme);
  padding: 0.5rem 0;
  position: relative;
  transition: color var(--transicao);
}

.cabecalho--fixo .menu a {
  color: var(--texto);
}

/* Sublinhado que cresce. Nao e a unica pista: a cor tambem muda. */
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 9px;
  width: 0;
  height: 1px;
  background: var(--dourado);
  transition: width var(--transicao);
}

.menu a:hover::after,
.menu a:focus-visible::after {
  width: 100%;
}

.cabecalho .botao {
  min-height: 46px;
  padding: 0.6rem 1.3rem;
  font-size: 0.82rem;
}

/* Botao sanduiche, so no celular */
.sanduiche {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--creme);
}

.cabecalho--fixo .sanduiche {
  color: var(--texto);
}

.sanduiche span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 6px auto;
  background: currentColor;
  transition: transform var(--transicao), opacity var(--transicao);
}

.sanduiche[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.sanduiche[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.sanduiche[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Heroi --- */
.heroi {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 9rem var(--e6);
  color: var(--texto-claro);
  isolation: isolate;
}

.heroi__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A camada escura garante o contraste do texto sobre a foto */
.heroi::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(26, 26, 26, 0.9) 0%,
    rgba(26, 26, 26, 0.75) 45%,
    rgba(26, 26, 26, 0.35) 100%
  );
}

.heroi__conteudo {
  max-width: 46rem;
}

.heroi h1 {
  margin-bottom: var(--e4);
}

.heroi h1 em {
  font-style: italic;
  color: var(--dourado);
}

.heroi__linha {
  font-size: 1.2rem;
  color: var(--texto-claro-suave);
  margin-bottom: var(--e5);
  max-width: 34rem;
}

/* --- Faixa de confianca --- */
.confianca {
  border-block: 1px solid var(--linha);
  padding-block: var(--e4);
}

.confianca ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e4);
}

.confianca li {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-pequeno);
  color: var(--texto-suave);
}

.confianca svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--dourado);
}

/* --- Bloco de duas colunas --- */
.duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.duplo--invertido .duplo__midia {
  order: 2;
}

.duplo__midia img {
  width: 100%;
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra);
}

/* --- Pilares do metodo --- */
.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e4);
  margin-top: var(--e6);
}

.pilar {
  padding: var(--e5) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
}

.fundo-alt .pilar {
  background: var(--creme);
}

.pilar__numero {
  font-family: var(--fonte-titulo);
  font-size: 2.2rem;
  color: var(--dourado);
  line-height: 1;
  display: block;
  margin-bottom: var(--e3);
}

.pilar h3 {
  margin-bottom: var(--e2);
}

.pilar p {
  font-size: var(--t-pequeno);
  color: var(--texto-suave);
  margin: 0;
}

/* --- Publicos --- */
.publicos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e4);
  margin-top: var(--e6);
}

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

/* O arco no topo da foto e o elemento de assinatura:
   traz a curva do movimento sem mexer no logo. */
.publico__foto {
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;
  border-radius: var(--arco);
  margin-bottom: var(--e4);
}

.publico h3 {
  margin-bottom: var(--e2);
}

.publico p {
  font-size: var(--t-pequeno);
  color: var(--texto-suave);
  margin-bottom: var(--e3);
}

.publico ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: var(--t-pequeno);
  color: var(--texto-suave);
}

.publico li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.publico li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--dourado);
}

/* --- Esther --- */
.esther__midia {
  position: relative;
}

.esther__midia img {
  border-radius: var(--arco);
  box-shadow: var(--sombra-forte);
}

.credencial {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--e4);
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.credencial svg {
  width: 20px;
  height: 20px;
  color: var(--dourado);
}

.fundo-escuro .credencial,
.fundo-oliva .credencial {
  border-color: var(--linha-clara);
  color: var(--texto-claro-suave);
}

/* --- Perguntas frequentes --- */
.perguntas {
  max-width: 52rem;
  margin: var(--e6) auto 0;
}

.pergunta {
  border-bottom: 1px solid var(--linha);
}

.pergunta__gatilho {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 64px;
  padding: var(--e3) 0;
  background: none;
  border: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}

.pergunta__sinal {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
  color: var(--dourado);
}

.pergunta__sinal::before,
.pergunta__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--transicao);
}

.pergunta__sinal::after {
  transform: rotate(90deg);
}

.pergunta__gatilho[aria-expanded="true"] .pergunta__sinal::after {
  transform: rotate(0deg);
}

.pergunta__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transicao);
}

.pergunta__gatilho[aria-expanded="true"] + .pergunta__corpo {
  grid-template-rows: 1fr;
}

.pergunta__corpo > div {
  overflow: hidden;
}

.pergunta__corpo p {
  font-size: var(--t-pequeno);
  color: var(--texto-suave);
  padding-bottom: var(--e4);
}

/* --- Contato --- */
.contato {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.dados {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  margin-top: var(--e5);
}

.dado {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
}

.dado svg {
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 0.2rem;
  color: var(--dourado);
}

.dado h3 {
  font-family: var(--fonte-texto);
  font-size: var(--t-olho);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-claro-suave);
  margin-bottom: 0.35rem;
}

.dado p,
.dado a {
  font-size: var(--t-pequeno);
  margin: 0;
}

.dado a {
  color: var(--creme);
  text-decoration-color: var(--dourado);
  text-underline-offset: 4px;
}

.mapa {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linha-clara);
  border-radius: var(--raio-cartao);
  /* Dessaturado para não brigar com a paleta, mas sem baixar o contraste:
     o mapa precisa continuar legível. */
  filter: grayscale(0.8);
}

/* Espaco reservado do mapa, enquanto o endereco nao estiver definido.
   Mantem a altura da caixa para o layout nao pular quando o mapa entrar. */
.mapa--vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  filter: none;
  background: rgba(26, 26, 26, 0.16);
  color: var(--texto-claro-suave);
}

.mapa--vazio svg {
  width: 44px;
  height: 44px;
  color: var(--dourado);
}

.mapa--vazio p {
  font-size: var(--t-pequeno);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

/* --- Rodape --- */
.rodape {
  background: var(--preto);
  color: var(--texto-claro-suave);
  padding-block: var(--e6) var(--e4);
  border-top: 1px solid var(--linha-clara);
}

.rodape__topo {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--e5);
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--linha-clara);
}

.rodape img {
  height: 128px;
  width: auto;
  margin-bottom: var(--e4);
}

.rodape h3 {
  font-family: var(--fonte-texto);
  font-size: var(--t-olho);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--creme);
  margin-bottom: var(--e3);
}

.rodape li + li {
  margin-top: 0.7rem;
}

.rodape a {
  font-size: var(--t-pequeno);
  text-decoration: none;
  transition: color var(--transicao);
}

.rodape a:hover {
  color: var(--dourado);
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e2);
  padding-top: var(--e4);
  font-size: 0.82rem;
}

/* --- Botao flutuante do WhatsApp --- */
/* Dourado porque o manual reserva essa cor para acao, e o oliva sumia contra
   a foto escura do heroi. O anel escuro garante que o disco continue destacado
   quando ele passa por cima das secoes em creme. */
.zap {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--dourado);
  color: var(--preto);
  box-shadow: var(--sombra-forte), 0 0 0 3px rgba(26, 26, 26, 0.14);
  transition: transform var(--transicao), background-color var(--transicao),
    color var(--transicao);
}

.zap:hover,
.zap:focus-visible {
  background: var(--preto);
  color: var(--dourado);
  transform: scale(1.06);
}

.zap svg {
  width: 30px;
  height: 30px;
}

/* ==========================================================================
   6. MOVIMENTO
   Entradas discretas. Nada decorativo, so orienta a leitura.
   ========================================================================== */

/* O estado escondido so existe quando o JavaScript esta rodando.
   A classe .js e colocada no <html> por um script no proprio cabecalho.
   Se o JavaScript falhar, o texto simplesmente aparece: nenhum conteudo
   da pagina depende de script para ser lido. */
.js .surge {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.33, 1, 0.68, 1);
}

.js .surge.visivel {
  opacity: 1;
  transform: none;
}

/* Escalonamento leve dentro de uma grade */
.js .surge:nth-child(2) {
  transition-delay: 80ms;
}
.js .surge:nth-child(3) {
  transition-delay: 160ms;
}

/* Quem pediu menos movimento no sistema recebe menos movimento */
@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;
    scroll-behavior: auto !important;
  }

  .js .surge {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   7. RESPONSIVO
   Escrito do maior para o menor porque o layout base ja e o de desktop.
   ========================================================================== */

@media (max-width: 960px) {
  .publicos,
  .pilares {
    grid-template-columns: 1fr 1fr;
  }

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

@media (max-width: 860px) {
  .menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(85vw, 22rem);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--e4);
    padding: var(--e6) var(--e5);
    background: var(--preto);
    transform: translateX(100%);
    transition: transform var(--transicao);
  }

  .menu[data-aberto="true"] {
    transform: none;
  }

  .menu a,
  .cabecalho--fixo .menu a {
    color: var(--creme);
    font-size: 1.25rem;
    font-family: var(--fonte-titulo);
  }

  .sanduiche {
    display: block;
    z-index: 101;
  }

  .menu[data-aberto="true"] ~ .sanduiche,
  .cabecalho--fixo .menu[data-aberto="true"] ~ .sanduiche {
    color: var(--creme);
  }

  .cabecalho .botao {
    display: none;
  }

  .duplo,
  .contato {
    grid-template-columns: 1fr;
  }

  .duplo--invertido .duplo__midia {
    order: 0;
  }

  .confianca ul {
    grid-template-columns: 1fr;
    gap: var(--e3);
  }
}

@media (max-width: 620px) {
  /* O texto base NAO diminui aqui, de proposito. Ele fica em 1.125rem (18px)
     em qualquer largura. O site fala com publico de melhor idade, e e no
     celular que essas pessoas leem. Encolher a fonte na tela pequena trabalha
     contra exatamente quem mais precisa enxergar. */

  .publicos,
  .pilares,
  .rodape__topo {
    grid-template-columns: 1fr;
  }

  .heroi {
    padding-block: 7.5rem var(--e5);
  }

  .grupo-botoes .botao {
    width: 100%;
  }

  /* o flutuante nao pode cobrir o botao de acao no fim da pagina */
  .zap {
    right: 1rem;
    bottom: 1rem;
  }
}

/* ==========================================================================
   IMPRESSAO
   ========================================================================== */

@media print {
  .cabecalho,
  .zap,
  .mapa {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}