/* ============================================================
   MEMORIAL PARK — site institucional
   style.css

   Tokens, componentes e regras vindos do design system:
   Conectores/design-system/memorial-park/ — módulos 02 (cor),
   03 (tipografia), 05 (fotografia) e 10 (digital e interface).

   Onde este arquivo e o módulo divergirem, o módulo vence.
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS — cópia literal do módulo 10-digital-ui.md
------------------------------------------------------------ */
:root{
  /* cor — ver 02-cor.md */
  --halo:#FFF9C5; --oliva:#C5BF23; --marrom:#9F7434;
  --grafite:#211A15; --ardosia:#2F3942; --marrom-escuro:#5C371E;
  --verde-mata:#20351F; --verde-mata-2:#2C4429;
  --dourado:#C69A3F; --dourado-claro:#D8BC86;
  --creme:#F6EBDF; --creme-2:#EFE2D2; --branco:#fff;
  --tinta:#211A15; --corpo:#3E3A35; --apagado:#6E675E;
  --fio:#E2D9CD; --fio-forte:#C9BCAC;
  --erro:#9A2A1E; --sucesso:#3F6B3A; --scrim:rgba(33,26,21,.55);

  /* forma */
  --r-xs:3px; --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:32px; --r-full:9999px;

  /* espaço */
  --s-xxs:2px; --s-xs:4px; --s-sm:8px; --s-md:12px; --s-base:16px;
  --s-lg:24px; --s-xl:32px; --s-xxl:48px; --s-section:80px;

  /* altura */
  --h-nav:84px; --h-nav-scroll:64px; --h-botao:52px; --h-input:56px; --h-faixa:64px;

  /* elevação — um degrau, e mais nada */
  --elev-cartao:0 1px 2px rgba(33,26,21,.04), 0 8px 24px -8px rgba(33,26,21,.06);
  --elev-flutuante:0 12px 40px -12px rgba(33,26,21,.10);

  /* movimento */
  --ease:cubic-bezier(.22,.61,.36,1); --dur:240ms;

  /* tipografia */
  --f-marca:Montserrat,"Segoe UI",system-ui,sans-serif;
  --f-texto:Figtree,"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --f-editorial:"Playfair Display",Georgia,"Times New Roman",serif;
}

/* ------------------------------------------------------------
   BASE
------------------------------------------------------------ */
html{ scroll-behavior:smooth; scroll-padding-top:var(--h-nav); }

body{
  font-family:var(--f-texto);
  font-size:16px;              /* piso do módulo 10 — nunca 14px em parágrafo */
  line-height:1.6;
  color:var(--corpo);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

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

/* [hidden] tem de vencer qualquer display declarado no elemento */
[hidden]{ display:none !important; }

::selection{ background:var(--halo); color:var(--grafite); }

/* Foco visível — obrigatório. Nunca outline:none. */
:focus-visible{
  outline:2px solid var(--verde-mata);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
.secao-escura :focus-visible,
.rodape :focus-visible{ outline-color:var(--dourado-claro); }

/* Pular para o conteúdo — leitor de tela e teclado */
.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--verde-mata); color:var(--creme);
  padding:var(--s-md) var(--s-lg); border-radius:0 0 var(--r-sm) 0;
  font-family:var(--f-marca); font-weight:600;
}
.pular:focus{ left:0; }

/* ------------------------------------------------------------
   TIPOGRAFIA
   Editorial (Playfair) = camada institucional.
   Marca (Montserrat)   = título de interface, eyebrow, botão.
   Texto (Figtree)      = tudo que se lê.
------------------------------------------------------------ */
.editorial{
  font-family:var(--f-editorial);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.5px;
  color:var(--verde-mata);
}
.editorial em{ font-style:italic; font-weight:500; }   /* a ênfase: uma palavra, nunca duas */

.marca{ font-family:var(--f-marca); }

.eyebrow{
  font-family:var(--f-marca);
  font-weight:600;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--marrom-escuro);
}
.secao-escura .eyebrow{ color:var(--dourado-claro); }

/* Assinatura oficial da marca — Montserrat Medium, caixa baixa, nunca em caps */
.assinatura{
  font-family:var(--f-marca);
  font-weight:500;
  line-height:1.3;
  color:var(--marrom-escuro);
  text-transform:none;
}
.secao-escura .assinatura,
.rodape .assinatura{ color:var(--creme); }

/* Filete dourado — ornamento, nunca texto */
.filete{ border:0; border-top:1px solid var(--dourado); width:56px; margin:var(--s-lg) 0; }
.filete-centro{ margin-left:auto; margin-right:auto; }

/* ------------------------------------------------------------
   SEÇÕES
------------------------------------------------------------ */
.secao{ padding:64px 0; }
@media (min-width:1024px){ .secao{ padding:var(--s-section) 0; } }

.secao-creme{ background:var(--creme); }
.secao-escura{ background:var(--verde-mata); color:var(--creme); }
.secao-escura .editorial{ color:var(--creme); }

.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 16px; }
@media (min-width:768px){ .container{ padding:0 24px; } }

/* ------------------------------------------------------------
   HEADER — 84px, branco, fio inferior. Ao rolar cai para 64px.
------------------------------------------------------------ */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:60;
  background:var(--branco);
  border-bottom:1px solid var(--fio);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.header__barra{
  display:flex; align-items:center; gap:var(--s-lg);
  height:var(--h-nav);
  transition:height var(--dur) var(--ease);
}
.header.rolado{ box-shadow:var(--elev-cartao); border-color:transparent; }
.header.rolado .header__barra{ height:var(--h-nav-scroll); }

.header__logo img{ height:62px; width:auto; transition:height var(--dur) var(--ease); }
.header.rolado .header__logo img{ height:50px; }

.nav{ display:none; align-items:center; gap:var(--s-lg); margin-left:auto; }
@media (min-width:1024px){ .nav{ display:flex; } }

.nav a{
  font-family:var(--f-marca); font-weight:600; font-size:16px;
  color:var(--verde-mata); text-decoration:none;
  position:relative; padding:6px 0;
}
/* Item ativo e hover: sublinhado de 2px animado por scaleX */
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--verde-mata);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a.ativo::after{ transform:scaleX(1); }

/* O botão e o link da régua 2 não são itens de navegação.
   `.nav a` tem especificidade maior que `.btn` — sem estas linhas ele
   anula padding, fonte e cor do botão, e o rótulo cola nas bordas. */
.nav a.btn::after,
.nav a.link-regua2::after{ display:none; }
.nav a.btn{
  padding:0 var(--s-lg);
  min-height:var(--h-botao);
  font-family:var(--f-texto);
  flex:none;
}
.nav a.btn-primario{ color:var(--creme); }
.nav a.btn-secundario{ color:var(--verde-mata); }
.nav a.link-regua2{ color:var(--marrom-escuro); font-weight:500; }
.nav a.link-regua2:hover{ color:var(--grafite); }

/* "Estamos aqui" — link permanente e discreto, um clique de qualquer página */
.link-regua2{
  font-family:var(--f-texto); font-weight:500; font-size:15px;
  color:var(--marrom-escuro); text-decoration:underline;
  text-underline-offset:3px;
}
.link-regua2:hover{ color:var(--grafite); }

/* Botão de menu — 48×48, alvo de toque mínimo */
.menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; margin-left:auto; border-radius:var(--r-sm);
  color:var(--verde-mata); background:transparent; border:0; cursor:pointer;
}
@media (min-width:1024px){ .menu-btn{ display:none; } }

.menu-movel{
  position:fixed; inset:var(--h-nav) 0 auto 0;
  background:var(--branco); border-bottom:1px solid var(--fio);
  box-shadow:var(--elev-flutuante);
  padding:var(--s-lg) 16px calc(var(--s-lg) + 8px);
  display:flex; flex-direction:column; gap:var(--s-xs);
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  max-height:calc(100vh - var(--h-nav)); overflow-y:auto;
}
.menu-movel.aberto{ opacity:1; pointer-events:auto; transform:translateY(0); }
.menu-movel a{
  font-family:var(--f-marca); font-weight:600; font-size:17px;
  color:var(--verde-mata); text-decoration:none;
  min-height:48px; display:flex; align-items:center;
  border-bottom:1px solid var(--fio);
}
.menu-movel a:last-of-type{ border-bottom:0; }

/* O botão dentro da gaveta é botão, não item de lista */
.menu-movel a.btn{
  border-bottom:0; justify-content:center;
  min-height:var(--h-botao); font-family:var(--f-texto);
}
.menu-movel a.btn-primario{ color:var(--creme); }

/* ------------------------------------------------------------
   BOTÕES — tabela de variantes do módulo 10
------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--h-botao); padding:0 var(--s-lg);
  border-radius:var(--r-sm); border:0; cursor:pointer;
  font-family:var(--f-texto); font-weight:600; font-size:16px; line-height:1.25;
  text-decoration:none; text-align:center; white-space:nowrap;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-primario{ background:var(--verde-mata); color:var(--creme); }
.btn-primario:hover{ background:var(--verde-mata-2); transform:translateY(-1px); }

.btn-secundario{
  background:var(--branco); color:var(--verde-mata);
  box-shadow:inset 0 0 0 1px var(--fio-forte);
}
.btn-secundario:hover{ box-shadow:inset 0 0 0 1px var(--verde-mata); transform:translateY(-1px); }

.btn-terciario{
  background:transparent; color:var(--verde-mata); padding:0;
  min-height:auto; text-decoration:none;
}
.btn-terciario:hover{ text-decoration:underline; text-underline-offset:4px; }

/* Comercial — território NÚCLEO. Texto grafite: 8,87:1. Nunca texto claro sobre oliva. */
.btn-comercial{ background:var(--oliva); color:var(--grafite); }
.btn-comercial:hover{ background:#B4AE1F; transform:translateY(-1px); }

/* Sobre fundo escuro */
.secao-escura .btn-secundario,
.hero .btn-secundario{
  background:transparent; color:var(--creme);
  box-shadow:inset 0 0 0 1px rgba(246,235,223,.55);
}
.secao-escura .btn-secundario:hover,
.hero .btn-secundario:hover{ box-shadow:inset 0 0 0 1px var(--creme); background:rgba(246,235,223,.08); }

/* ------------------------------------------------------------
   HERO — foto do parque com véu verde por baixo do texto
------------------------------------------------------------ */
.hero{
  position:relative;
  margin-top:var(--h-nav);
  min-height:min(78vh, 640px);
  display:flex; align-items:flex-end;
  background:var(--verde-mata);
  overflow:hidden;
}
.hero__foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
}
/* Véu: escurece o pé da imagem o suficiente para o texto passar em AA */
.hero__veu{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(32,53,31,.30) 0%,
    rgba(32,53,31,.55) 45%,
    rgba(32,53,31,.88) 100%);
}
.hero__conteudo{
  position:relative; z-index:2;
  padding:120px 0 56px;
  max-width:760px; color:var(--creme);
}
.hero .editorial,
.hero .assinatura{ color:var(--creme); }
.hero h1{ font-size:clamp(32px, 6vw, 60px); margin:var(--s-base) 0 0; }
.hero p.apoio{
  font-size:clamp(17px, 2.2vw, 20px);
  color:#EFE6DA; margin-top:var(--s-lg); max-width:56ch;
}
.hero__acoes{ display:flex; flex-wrap:wrap; gap:var(--s-md); margin-top:var(--s-xl); }
@media (min-width:1024px){ .hero{ min-height:min(84vh, 720px); } .hero__conteudo{ padding:140px 0 72px; } }

/* ------------------------------------------------------------
   PLACA INSTITUCIONAL — componente de assinatura do sistema
------------------------------------------------------------ */
.placa{
  background:var(--creme);
  border-radius:var(--r-lg);
  padding:var(--s-xl);
  box-shadow:var(--elev-cartao);
  max-width:520px;
}
@media (min-width:768px){ .placa{ padding:var(--s-xxl); } }
.placa h2{ font-size:clamp(26px, 3.4vw, 40px); }
.placa p{ color:var(--corpo); }

/* ------------------------------------------------------------
   CARTÃO
------------------------------------------------------------ */
.cartao{
  background:var(--branco);
  border:1px solid var(--fio);
  border-radius:var(--r-md);
  padding:var(--s-lg);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  height:100%;
}
.cartao:hover{ border-color:transparent; box-shadow:var(--elev-cartao); transform:translateY(-2px); }
.cartao h3{
  font-family:var(--f-marca); font-weight:600; font-size:18px;
  color:var(--verde-mata); margin-bottom:var(--s-sm);
}
.cartao p{ font-size:16px; color:var(--corpo); }

.icone{
  width:44px; height:44px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--halo); color:var(--marrom-escuro);
  margin-bottom:var(--s-base);
}
.icone svg{ width:24px; height:24px; }

/* ------------------------------------------------------------
   GALERIA — abas por unidade, grade 4:3, lightbox
------------------------------------------------------------ */
.abas{ display:flex; gap:var(--s-sm); flex-wrap:wrap; }
.aba{
  font-family:var(--f-marca); font-weight:600; font-size:15px;
  min-height:48px; padding:0 var(--s-lg);
  display:inline-flex; align-items:center; gap:8px;
  border-radius:var(--r-full); cursor:pointer;
  background:var(--branco); color:var(--verde-mata);
  border:1px solid var(--fio-forte);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.aba[aria-selected="true"]{ background:var(--verde-mata); color:var(--creme); border-color:var(--verde-mata); }

.galeria{
  display:grid; gap:var(--s-md);
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:768px){ .galeria{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-base); } }
@media (min-width:1024px){ .galeria{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.galeria button{
  display:block; padding:0; border:0; cursor:zoom-in; background:none;
  border-radius:var(--r-md); overflow:hidden; position:relative;
  aspect-ratio:4/3; width:100%;
}
.galeria img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 400ms var(--ease);
}
.galeria button:hover img{ transform:scale(1.04); }
.galeria button::after{
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(33,26,21,.08); border-radius:var(--r-md);
}

.galeria-vazia{
  border:1px dashed var(--fio-forte); border-radius:var(--r-md);
  padding:var(--s-xxl) var(--s-lg); text-align:center; color:var(--apagado);
  background:var(--branco);
}

/* Lightbox */
/* Modal precisa de véu mais fechado que o --scrim de foto: o fundo
   claro da página atravessava .55 e comia a legenda. */
.lightbox{
  position:fixed; inset:0; z-index:90;
  background:rgba(33,26,21,.90);
  display:none; align-items:center; justify-content:center;
  padding:16px;
}
.lightbox.aberto{ display:flex; }
.lightbox__quadro{
  position:relative; max-width:min(1200px, 96vw); max-height:92vh;
  display:flex; flex-direction:column; gap:var(--s-md);
}
.lightbox img{
  max-width:100%; max-height:80vh; width:auto; margin:0 auto;
  border-radius:var(--r-md); background:var(--verde-mata);
}
.lightbox figcaption{
  color:var(--creme); font-size:15px; text-align:center; max-width:70ch; margin:0 auto;
}
.lightbox__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:var(--r-full); border:0; cursor:pointer;
  background:rgba(246,235,223,.92); color:var(--verde-mata);
  display:flex; align-items:center; justify-content:center;
}
.lightbox__btn:hover{ background:var(--creme); }
.lightbox__ant{ left:-8px; }
.lightbox__prox{ right:-8px; }
/* Fixo no canto da janela — encostado no quadro ele batia no cabeçalho */
.lightbox__fechar{
  position:fixed; top:16px; right:16px;
  width:48px; height:48px; border-radius:var(--r-full); border:0; cursor:pointer;
  background:rgba(246,235,223,.92); color:var(--verde-mata);
  display:flex; align-items:center; justify-content:center;
}
@media (min-width:1024px){ .lightbox__ant{ left:-64px; } .lightbox__prox{ right:-64px; } }

/* ------------------------------------------------------------
   UNIDADES — as duas sempre separadas, cada uma com seu telefone
------------------------------------------------------------ */
.unidade{
  background:var(--branco); border:1px solid var(--fio);
  border-radius:var(--r-md); overflow:hidden; height:100%;
  display:flex; flex-direction:column;
}
.unidade__foto{ aspect-ratio:3/2; width:100%; object-fit:cover; }
.unidade__vazio{
  aspect-ratio:3/2; width:100%;
  background:var(--creme-2); color:var(--apagado);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:var(--s-lg); font-size:15px;
}
.unidade__corpo{ padding:var(--s-lg); display:flex; flex-direction:column; gap:var(--s-base); flex:1; }
@media (min-width:768px){ .unidade__corpo{ padding:var(--s-xl); } }
/* Travado pela LARGURA, não pela altura: o módulo 01-marca exige 165 px
   mínimos em tela para o lockup com descritor — abaixo disso a caixa-alta
   do descritor fica menor que 8 px e some.
   O `align-self` é obrigatório: o cartão é flex column e o `stretch`
   esticava a imagem na largura toda, achatando a copa. */
.unidade__logo{ width:184px; height:auto; align-self:flex-start; }

.dado{ display:flex; gap:var(--s-md); align-items:flex-start; }
.dado svg{ width:20px; height:20px; flex:none; margin-top:3px; color:var(--marrom-escuro); }
.dado h4{
  font-family:var(--f-marca); font-weight:600; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--apagado);
  margin-bottom:2px;
}
.dado address{ font-style:normal; color:var(--corpo); }
.dado a{ color:var(--verde-mata); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.dado a:hover{ color:var(--verde-mata-2); }

/* ------------------------------------------------------------
   FORMULÁRIO — rótulo sempre visível, nunca só placeholder
------------------------------------------------------------ */
.campo{ display:flex; flex-direction:column; gap:var(--s-sm); }
.campo label{
  font-family:var(--f-marca); font-weight:600; font-size:14px;
  color:var(--verde-mata);
}
.campo label .obrig{ color:var(--erro); }
.campo input, .campo select, .campo textarea{
  height:var(--h-input);
  border:1px solid var(--fio); border-radius:var(--r-sm);
  background:var(--branco); color:var(--tinta);
  font-family:var(--f-texto); font-size:16px;
  padding:0 var(--s-base);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.campo textarea{ height:auto; min-height:120px; padding:var(--s-md) var(--s-base); line-height:1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--fio-forte);
  box-shadow:0 0 0 2px var(--branco), 0 0 0 4px var(--verde-mata);
}
.campo.erro input, .campo.erro select{ border-color:var(--erro); }

/* Erro nunca só pela cor — ícone + texto */
.campo__erro{
  display:none; align-items:center; gap:6px;
  font-size:14px; color:var(--erro);
}
.campo.erro .campo__erro{ display:flex; }
.campo__erro svg{ width:16px; height:16px; flex:none; }

.consentimento{
  display:flex; gap:var(--s-md); align-items:flex-start;
  font-size:14px; color:var(--apagado); line-height:1.5;
}
.consentimento input{ width:22px; height:22px; margin-top:2px; accent-color:var(--verde-mata); flex:none; }

/* ------------------------------------------------------------
   FAIXA INSTITUCIONAL — filete dourado no topo
------------------------------------------------------------ */
.faixa{
  background:var(--verde-mata); color:var(--creme);
  border-top:1px solid var(--dourado);
  min-height:var(--h-faixa);
  padding:var(--s-lg) 0;
}
.faixa a{ color:var(--dourado-claro); text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.faixa a:hover{ color:var(--creme); }
.faixa a.btn{ color:var(--creme); text-decoration:none; font-family:var(--f-texto); }

/* ------------------------------------------------------------
   RODAPÉ
------------------------------------------------------------ */
.rodape{ background:var(--verde-mata); color:var(--creme); padding:56px 0 0; }
.rodape h4{
  font-family:var(--f-marca); font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dourado-claro);
  margin-bottom:var(--s-base);
}
.rodape a{ color:var(--dourado-claro); text-decoration:none; }
.rodape a:hover{ color:var(--creme); text-decoration:underline; text-underline-offset:3px; }
.rodape address{ font-style:normal; color:#E4D9CB; }
.rodape .fio{ border-top:1px solid rgba(214,201,185,.22); margin-top:var(--s-xxl); padding:var(--s-lg) 0; }

/* A marca sobre verde-mata vai em placa creme — a versão monocromática
   negativa não existe nos arquivos entregues. Ver PENDENCIAS.md. */
.rodape__placa{
  background:var(--creme); border-radius:var(--r-md);
  padding:var(--s-base) var(--s-lg); display:inline-block;
}
.rodape__placa img{ height:96px; width:auto; }

/* ------------------------------------------------------------
   WHATSAPP — botão estático. Não abre sozinho, não é chat.
------------------------------------------------------------ */
.zap{
  position:fixed; right:16px; bottom:16px; z-index:50;
  width:56px; height:56px; border-radius:var(--r-full);
  background:var(--verde-mata); color:var(--creme);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--elev-flutuante);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.zap:hover{ background:var(--verde-mata-2); transform:translateY(-2px); }
.zap svg{ width:28px; height:28px; }

/* ------------------------------------------------------------
   ENTRADA DE SEÇÃO — fade + 16px de subida. Nada mais.
------------------------------------------------------------ */
.revela{ opacity:0; transform:translateY(16px); }
.revela.visivel{
  opacity:1; transform:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* ------------------------------------------------------------
   "ESTAMOS AQUI" — régua 2. Página leve, sem imagem, sem venda.
------------------------------------------------------------ */
.regua2{ background:var(--creme); min-height:100vh; }
.regua2 .telefone{
  font-family:var(--f-marca); font-weight:700;
  font-size:clamp(30px, 6vw, 46px); line-height:1.1;
  color:var(--verde-mata); text-decoration:none;
  display:inline-block; padding:var(--s-sm) 0;
}
.regua2 .telefone:hover{ color:var(--verde-mata-2); text-decoration:underline; text-underline-offset:6px; }
.passos{ counter-reset:passo; display:flex; flex-direction:column; gap:var(--s-lg); }
.passos li{ counter-increment:passo; display:flex; gap:var(--s-base); align-items:flex-start; }
.passos li::before{
  content:counter(passo);
  flex:none; width:36px; height:36px; border-radius:var(--r-full);
  background:var(--verde-mata); color:var(--creme);
  font-family:var(--f-marca); font-weight:600; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}

/* ------------------------------------------------------------
   MOVIMENTO REDUZIDO — obrigatório
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .revela{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------
   IMPRESSÃO — endereço e telefone precisam sair no papel
------------------------------------------------------------ */
@media print{
  .header, .menu-movel, .zap, .hero__foto, .hero__veu, .lightbox{ display:none !important; }
  body{ color:#000; background:#fff; }
  .secao-escura, .rodape, .faixa{ background:#fff !important; color:#000 !important; }
  .secao-escura .editorial, .rodape a{ color:#000 !important; }
  a[href^="tel:"]::after{ content:" (" attr(href) ")"; font-size:12px; }
}