/* ==========================================================================
   Dra. Ingrid Fuganholi, Advocacia de Família
   Folha de estilo principal

   Organização do arquivo:
   01. Variáveis (design tokens)
   02. Reset e base
   03. Utilitários (container, botões, títulos de seção)
   04. Header
   05. Mosaico de fotos
   06. Apresentação
   07. Áreas de atuação
   08. Sobre
   09. Contato
   10. Rodapé
   11. Botão flutuante do WhatsApp
   12. Animações de entrada
   13. Responsivo
   14. Impressão

   PROPORÇÃO DA PALETA: o branco domina os fundos, o azul marinho fica
   nos textos de corpo e nos blocos escuros de contato e rodapé, e o
   terracota aparece apenas em destaques, botões, ícones e títulos.
   ========================================================================== */


/* ==========================================================================
   01. VARIÁVEIS
   ========================================================================== */
:root {
  /* Paleta principal */
  --terracota: rgb(160, 70, 19);
  --azul-marinho: rgb(6, 15, 26);
  --branco: #ffffff;

  /* Derivadas, geradas a partir das três cores acima */
  --terracota-escuro: rgb(126, 54, 14);
  --terracota-claro: rgb(196, 104, 52);
  --terracota-suave: rgba(160, 70, 19, 0.08);
  --terracota-borda: rgba(160, 70, 19, 0.28);

  --azul-texto: rgba(6, 15, 26, 0.82);
  --azul-suave: rgba(6, 15, 26, 0.05);
  --azul-borda: rgba(6, 15, 26, 0.1);
  --azul-claro-fundo: rgba(6, 15, 26, 0.03);

  --branco-suave: rgba(255, 255, 255, 0.78);
  --branco-tenue: rgba(255, 255, 255, 0.55);

  /* WhatsApp, única cor fora da paleta, por reconhecimento universal */
  --whatsapp: #25d366;
  --whatsapp-escuro: #1da851;

  /* Tipografia */
  --fonte-marca: "Alex Brush", "Segoe Script", cursive;
  --fonte-titulo: "Marcellus", Georgia, "Times New Roman", serif;
  --fonte-corpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Espaçamento e medidas */
  --largura-max: 1180px;
  --largura-estreita: 760px;
  /* Altura acomoda a caixa de linha da cursiva sem apertar as hastes.
     O mosaico e o scroll das âncoras usam esta mesma variável, então
     mudar aqui reposiciona tudo junto. */
  --altura-header: 92px;
  --raio: 4px;
  --raio-grande: 8px;

  /* Sombras */
  --sombra-header: 0 1px 24px rgba(6, 15, 26, 0.08);
  --sombra-card: 0 1px 3px rgba(6, 15, 26, 0.05);
  --sombra-card-hover: 0 12px 32px rgba(6, 15, 26, 0.09);

  /* Transições */
  --transicao: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   02. RESET E BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Compensa o header fixo ao navegar pelas âncoras do menu */
  scroll-padding-top: calc(var(--altura-header) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--azul-texto);
  background-color: var(--branco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  line-height: 1.25;
  color: var(--azul-marinho);
  letter-spacing: 0.01em;
}

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

a {
  color: var(--terracota);
  text-decoration: none;
  transition: color var(--transicao);
}

ul { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

svg { display: block; }

/* Foco visível e consistente em todo o site */
:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background-color: var(--terracota);
  color: var(--branco);
}

/* Link de acessibilidade, aparece somente na navegação por teclado */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background-color: var(--terracota);
  color: var(--branco);
  border-radius: var(--raio);
  font-size: 0.9rem;
  transition: top var(--transicao);
}
.skip-link:focus { top: 12px; }


/* ==========================================================================
   03. UTILITÁRIOS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: 24px;
}

.container--estreito { max-width: var(--largura-estreita); }

/* --- Títulos de seção --- */
.secao-cabecalho {
  max-width: 640px;
  margin-bottom: 56px;
}

.secao-kicker {
  font-family: var(--fonte-corpo);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 14px;
}
.secao-kicker--claro { color: var(--terracota-claro); }

.secao-titulo {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--azul-marinho);
  margin-bottom: 18px;
}
.secao-titulo--claro { color: var(--branco); }

.secao-subtitulo {
  font-size: 1.02rem;
  color: var(--azul-texto);
  max-width: 56ch;
}

.destaque { color: var(--terracota); }

/* --- Botões --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  padding: 15px 30px;
  border-radius: var(--raio);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}

.btn--solid {
  background-color: var(--terracota);
  border-color: var(--terracota);
  color: var(--branco);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  background-color: var(--terracota-escuro);
  border-color: var(--terracota-escuro);
  color: var(--branco);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(160, 70, 19, 0.24);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--terracota-borda);
  color: var(--terracota);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--terracota);
  border-color: var(--terracota);
  color: var(--branco);
}

.btn--sm { padding: 11px 20px; font-size: 0.875rem; }

.btn--lg {
  padding: 19px 40px;
  font-size: 1.05rem;
  width: 100%;
  max-width: 460px;
}

.btn__icone { width: 22px; height: 22px; flex-shrink: 0; }


/* ==========================================================================
   04. HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--altura-header);
  background-color: var(--branco);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}

/* Classe aplicada por JS ao rolar a página */
.site-header.is-rolado {
  box-shadow: var(--sombra-header);
  border-bottom-color: var(--azul-borda);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

/* Marca principal do site, em cursiva Alex Brush.

   Três cuidados que a fonte cursiva exige:
   1. Tamanho maior. A Alex Brush tem altura de x pequena em relação ao
      corpo, então precisa de mais pontos para ter o mesmo peso visual
      que a Marcellus tinha.
   2. letter-spacing zerado. É uma cursiva ligada, e qualquer espaçamento
      positivo quebra a emenda entre as letras.
   3. line-height folgado. As hastes e a perna do "g" saem bem além da
      caixa da linha, e o padding vertical garante que nada seja cortado.
      Nenhum elemento acima usa overflow hidden, então as hastes podem
      respirar para fora sem risco de corte. */
.brand {
  font-family: var(--fonte-marca);
  /* O coeficiente em vw é contido de propósito. A cursiva ocupa bem mais
     largura que a Marcellus no mesmo corpo, e sem isso ela espremia o
     menu na faixa entre 861px e 980px, onde a navegação ainda é horizontal. */
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.45;
  color: var(--terracota);
  letter-spacing: 0;
  white-space: nowrap;
  padding-block: 0.12em;
  transition: opacity var(--transicao);
}
.brand:hover { opacity: 0.78; }

.nav { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav__link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--azul-texto);
  padding-block: 6px;
  /* Item de menu não quebra linha, mesmo em telas apertadas */
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--terracota);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}

.nav__link:hover,
.nav__link.is-ativo { color: var(--terracota); }

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

.header-cta { flex-shrink: 0; }

/* Cópia do CTA inserida por JS dentro do menu mobile.
   Fica oculta no desktop, onde o botão original já aparece no header. */
.nav__cta-mobile { display: none; }

/* Botão hambúrguer, visível apenas no mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-right: -10px;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--azul-marinho);
  transition: transform var(--transicao), opacity var(--transicao);
}

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


/* ==========================================================================
   05. MOSAICO DE FOTOS
   Faixa full width logo abaixo do header.
   ========================================================================== */
.mosaico {
  position: relative;
  margin-top: var(--altura-header);
  height: 320px;
  overflow: hidden;
  background-color: var(--azul-marinho);
}

.mosaico__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  height: 100%;
}

/* A célula tem dimensão definida pela grade e serve de referência para as
   camadas empilhadas. Como as camadas são absolutas, entrar ou sair uma
   imagem nunca altera o layout, o que mantém o CLS em zero. */
.mosaico__item {
  position: relative;
  overflow: hidden;
  background-color: var(--azul-marinho);
}

/* Cada imagem do mosaico é uma camada sobreposta. Duas ficam visíveis ao
   mesmo tempo durante o crossfade, por isso nunca há tela preta ou branca
   no meio da troca. Só opacity e transform são animados, ambos compostos
   pela GPU, sem provocar reflow. */
.mosaico__camada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  backface-visibility: hidden;
  transition:
    opacity var(--fade-dur, 1200ms) ease-in-out,
    transform var(--kb-dur, 7000ms) linear;
}

.mosaico__camada.is-ativa { opacity: 1; }

/* will-change entra apenas enquanto a camada está em movimento e é
   removido pelo JavaScript ao final, para não manter camadas promovidas
   na memória da GPU sem necessidade. */
.mosaico__camada.is-animando { will-change: transform, opacity; }

/* Ken Burns, alternando o sentido a cada troca.
   A direção "entrando" aproxima devagar, a "saindo" afasta. O leve
   deslocamento evita que o movimento pareça um zoom mecânico. */
.mosaico__camada--kb-entra { transform: scale(1) translate3d(0, 0, 0); }
.mosaico__camada--kb-entra.is-movendo { transform: scale(1.08) translate3d(-1.5%, -1.2%, 0); }

.mosaico__camada--kb-sai { transform: scale(1.08) translate3d(1.5%, 1.2%, 0); }
.mosaico__camada--kb-sai.is-movendo { transform: scale(1) translate3d(0, 0, 0); }

/* Disposição tipo bento no desktop, alternando blocos altos e baixos */
.m1  { grid-column: 1; grid-row: 1 / span 2; }
.m2  { grid-column: 2; grid-row: 1; }
.m3  { grid-column: 2; grid-row: 2; }
.m4  { grid-column: 3; grid-row: 1 / span 2; }
.m5  { grid-column: 4; grid-row: 1; }
.m6  { grid-column: 4; grid-row: 2; }
.m7  { grid-column: 5; grid-row: 1 / span 2; }
.m8  { grid-column: 6; grid-row: 1; }
.m9  { grid-column: 6; grid-row: 2; }
.m10 { grid-column: 7; grid-row: 1 / span 2; }

/* Overlay azul marinho, unifica as fotos com a paleta do site.
   Véu uniforme, sem gradiente escuro na base. O gradiente existia apenas
   para dar contraste à legenda, que agora vive fora do mosaico. */
.mosaico__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* MANUTENÇÃO: ajuste a opacidade aqui para clarear ou escurecer a faixa */
  background: rgba(6, 15, 26, 0.18);
}


/* ==========================================================================
   05b. FRASE DE TRANSIÇÃO
   Ponte entre o mosaico e a apresentação, em fundo branco.
   ========================================================================== */
.transicao {
  padding: clamp(44px, 7vw, 72px) 24px 0;
  background-color: var(--branco);
  text-align: center;
}

.transicao__frase {
  font-family: var(--fonte-titulo);
  /* Um degrau abaixo do título da apresentação, para a frase soar como
     passagem e não competir com o h1 logo abaixo. */
  font-size: clamp(1.1rem, 2.6vw, 1.55rem);
  line-height: 1.35;
  color: var(--terracota);
  letter-spacing: 0.02em;
  max-width: 26ch;
  margin-inline: auto;
}

/* Filete curto, marca a frase como passagem entre as duas seções */
.transicao__frase::after {
  content: "";
  display: block;
  width: 40px;
  height: 1.5px;
  background-color: var(--terracota-borda);
  margin: 26px auto 0;
}

/* Com a frase presente, a apresentação não precisa do respiro completo.
   Se o bloco de transição for removido, o padding original volta sozinho. */
.transicao + .apresentacao { padding-top: clamp(28px, 4vw, 44px); }


/* ==========================================================================
   06. APRESENTAÇÃO
   ========================================================================== */
.apresentacao {
  padding: clamp(56px, 9vw, 96px) 0;
  text-align: center;
  background-color: var(--branco);
}

.apresentacao__lead {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.4;
  margin-bottom: 20px;
}

.apresentacao__texto {
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  color: var(--azul-texto);
  max-width: 60ch;
  margin-inline: auto;
}

/* Filete decorativo em terracota abaixo do parágrafo */
.apresentacao__texto::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background-color: var(--terracota);
  margin: 36px auto 0;
}


/* ==========================================================================
   07. ÁREAS DE ATUAÇÃO
   ========================================================================== */
.areas {
  padding: clamp(64px, 9vw, 104px) 0;
  /* Fundo levemente azulado, derivado do azul marinho */
  background-color: var(--azul-claro-fundo);
  border-top: 1px solid var(--azul-borda);
  border-bottom: 1px solid var(--azul-borda);
}

.areas__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  background-color: var(--branco);
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-card);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-card-hover);
  border-color: var(--terracota-borda);
}

.card__icone {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 50%;
  background-color: var(--terracota-suave);
  color: var(--terracota);
  flex-shrink: 0;
}
.card__icone svg { width: 28px; height: 28px; }

.card__titulo {
  font-size: 1.28rem;
  margin-bottom: 12px;
}

.card__texto {
  font-size: 0.96rem;
  color: var(--azul-texto);
  margin-bottom: 22px;
  flex-grow: 1;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--terracota);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), gap var(--transicao);
}
.card__link:hover {
  border-bottom-color: var(--terracota);
  gap: 12px;
}
.card__seta { width: 16px; height: 16px; }

/* Bloco de fechamento do grid, em fundo terracota suave */
.card--destaque {
  background-color: var(--terracota-suave);
  border-color: var(--terracota-borda);
  justify-content: center;
}
.card--destaque .card__titulo { color: var(--terracota); }
.card--destaque .btn { align-self: flex-start; }


/* ==========================================================================
   08. SOBRE
   ========================================================================== */
.sobre { padding: clamp(64px, 9vw, 104px) 0; }

.sobre__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.sobre__texto p:not(.secao-kicker) {
  font-size: 1rem;
  color: var(--azul-texto);
  margin-bottom: 18px;
}
.sobre__texto .btn { margin-top: 14px; }

.sobre__pilares {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
}

.pilar {
  padding-top: 20px;
  border-top: 2px solid var(--terracota-borda);
}

.pilar__numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  color: var(--terracota);
  margin-bottom: 8px;
  letter-spacing: 0.06em;
}

.pilar__titulo {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.pilar__texto {
  font-size: 0.9rem;
  color: var(--azul-texto);
  line-height: 1.6;
}


/* ==========================================================================
   09. CONTATO
   ========================================================================== */
.contato {
  padding: clamp(72px, 10vw, 112px) 0;
  background-color: var(--azul-marinho);
  color: var(--branco);
  text-align: center;
}

.contato__texto {
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  color: var(--branco-suave);
  max-width: 54ch;
  margin: 0 auto 40px;
}

.contato .btn--lg {
  margin-inline: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.contato__micro {
  font-size: 0.85rem;
  color: var(--branco-tenue);
  margin-top: 18px;
  max-width: 46ch;
  margin-inline: auto;
}

.contato__infos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 48px;
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.contato__infos li {
  font-size: 0.92rem;
  color: var(--branco-suave);
}

.contato__rotulo {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracota-claro);
  margin-bottom: 4px;
}


/* ==========================================================================
   10. RODAPÉ
   ========================================================================== */
.rodape {
  background-color: var(--azul-marinho);
  color: var(--branco-suave);
  padding: 64px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}

.rodape__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 44px;
}

.rodape__marca {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  color: var(--branco);
  margin-bottom: 8px;
}

.rodape__titulo {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracota-claro);
  margin-bottom: 12px;
}

.rodape__linha {
  color: var(--branco-suave);
  margin-bottom: 6px;
  line-height: 1.6;
}

.rodape__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--branco);
  font-weight: 500;
}
.rodape__whatsapp svg {
  width: 20px;
  height: 20px;
  color: var(--terracota-claro);
  transition: color var(--transicao);
}
.rodape__whatsapp:hover { color: var(--terracota-claro); }
.rodape__whatsapp:hover svg { color: var(--branco); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rodape__aviso,
.rodape__copy {
  font-size: 0.8rem;
  color: var(--branco-tenue);
}


/* ==========================================================================
   11. BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================================== */
.whatsapp-float {
  /* Cor do anel de pulso, sobrescrita pela variação em terracota */
  --pulso-cor: rgba(37, 211, 102, 0.55);
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 110;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--whatsapp);
  color: var(--branco);
  box-shadow: 0 6px 22px rgba(6, 15, 26, 0.26);
  transition: transform var(--transicao), background-color var(--transicao);
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 1;
}

.whatsapp-float:hover {
  background-color: var(--whatsapp-escuro);
  color: var(--branco);
  transform: scale(1.07);
}

/* Variação em terracota, alinhada à identidade visual.
   Para testar, adicione a classe whatsapp-float--terracota no HTML. */
.whatsapp-float--terracota {
  background-color: var(--terracota);
  --pulso-cor: rgba(160, 70, 19, 0.55);
}
.whatsapp-float--terracota:hover { background-color: var(--terracota-escuro); }

/* Pulso sutil, chama atenção sem ser invasivo */
.whatsapp-float__pulso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: pulso 2.8s ease-out infinite;
}

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 var(--pulso-cor); opacity: 0.9; }
  70%  { box-shadow: 0 0 0 15px var(--pulso-cor); opacity: 0; }
  100% { box-shadow: 0 0 0 0 var(--pulso-cor); opacity: 0; }
}


/* ==========================================================================
   12. ANIMAÇÕES DE ENTRADA
   Classe aplicada por JS quando a seção entra na tela.
   ========================================================================== */
.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.revelar.is-visivel {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   13. RESPONSIVO
   ========================================================================== */

/* --- Tablet --- */
@media (max-width: 980px) {
  .nav__list { gap: 24px; }
  .mosaico { height: 280px; }

  /* Mosaico passa a 4 colunas, com 8 fotos visíveis */
  .mosaico__grid { grid-template-columns: repeat(4, 1fr); }
  .m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10 {
    grid-column: auto;
    grid-row: auto;
  }
  .m9, .m10 { display: none; }

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

/* --- Mobile: menu recolhido --- */
@media (max-width: 860px) {
  :root { --altura-header: 74px; }

  .nav-toggle { display: flex; }
  .header-cta { display: none; }

  .nav {
    position: fixed;
    top: var(--altura-header);
    left: 0;
    right: 0;
    background-color: var(--branco);
    border-bottom: 1px solid var(--azul-borda);
    box-shadow: var(--sombra-header);
    padding: 8px 24px 28px;
    transform: translateY(-140%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transicao), opacity var(--transicao), visibility var(--transicao);
  }

  .nav.is-aberto {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li { border-bottom: 1px solid var(--azul-borda); }
  .nav__list li:last-child { border-bottom: none; }

  .nav__link {
    display: block;
    padding: 16px 0;
    font-size: 1rem;
  }
  .nav__link::after { display: none; }

  /* CTA replicado dentro do menu mobile, inserido por JS */
  .nav__cta-mobile {
    display: block;
    margin-top: 20px;
    width: 100%;
  }
}

/* --- Mobile --- */
@media (max-width: 680px) {
  .container { padding-inline: 20px; }

  .mosaico { height: 200px; }
  .mosaico__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
  /* Mantém 6 fotos no mobile, o suficiente para dar variedade sem pesar */
  .m7, .m8 { display: none; }

  /* Ken Burns mais discreto no celular. Menos área repintada por quadro,
     o que alivia GPU e bateria. O ritmo mais lento das trocas é definido
     no objeto MOSAICO em assets/js/main.js. */
  .mosaico__camada--kb-entra.is-movendo { transform: scale(1.04) translate3d(-0.8%, -0.6%, 0); }
  .mosaico__camada--kb-sai { transform: scale(1.04) translate3d(0.8%, 0.6%, 0); }

  .transicao { padding-inline: 20px; }

  .areas__grid { grid-template-columns: 1fr; }
  .card { padding: 30px 24px; }

  .sobre__pilares { grid-template-columns: 1fr; gap: 24px; }

  .contato__infos {
    flex-direction: column;
    gap: 22px;
  }

  .rodape__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .rodape__base {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    /* Espaço extra à direita e abaixo, para o botão flutuante não cobrir o texto */
    padding-right: 76px;
    padding-bottom: 16px;
  }

  .btn--lg {
    padding: 17px 24px;
    font-size: 0.98rem;
  }

  /* Botão flutuante um pouco menor e mais próximo do canto */
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }
  .whatsapp-float svg { width: 29px; height: 29px; }
}

/* --- Preferência por 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;
  }

  .revelar { opacity: 1; transform: none; }
  .whatsapp-float__pulso { display: none; }

  /* Mosaico congelado: uma única imagem por célula, sem troca automática
     e sem Ken Burns. O JavaScript também não inicia os temporizadores. */
  .mosaico__camada {
    transition: none !important;
    transform: none !important;
  }
}


/* ==========================================================================
   14. IMPRESSÃO
   ========================================================================== */
@media print {
  .site-header,
  .nav-toggle,
  .whatsapp-float,
  .mosaico { display: none !important; }

  body { color: #000; }
  .contato, .rodape { background: none; color: #000; }
  .secao-titulo--claro, .contato__texto, .rodape__linha { color: #000; }
}