/* ==========================================================================
   Dr. Matheus Gavassoni | saúde do idoso, Colatina/ES

   Quem lê esta página é o filho ou a filha, entre 40 e 60 anos, muitas vezes
   junto com o próprio idoso. Por isso o corpo de texto é 18px e não 16, o
   contraste é alto e todo alvo de toque passa de 48px. Legibilidade aqui não
   é preferência estética, é requisito.
   ========================================================================== */

:root{
  /* Paleta oficial da marca. O dourado #BA9A5A é lindo, mas dá só 2.26:1
     sobre o off-white: reprovado para texto. Ele fica como elemento gráfico e
     como cor sobre o verde escuro (5.3:1, onde brilha). Para texto em tom de
     marca sobre fundo claro existe o --dourado-texto, derivado, com 5.2:1. */
  --papel:        #F6F5F1;
  --papel-2:      #EDECE6;   /* off-white oficial */
  --tinta:        #153025;   /* verde oficial */
  --tinta-suave:  #4A5A51;
  --acento:       #153025;
  --acento-fundo: #E3E7E1;
  --dourado:      #BA9A5A;   /* oficial: grafismo, e texto sobre o verde */
  --dourado-texto:#7E6329;   /* derivado: texto sobre fundo claro */
  --linha:        rgba(21,48,37,.14);

  --nav-altura: 4.25rem;   /* na raiz: a capa e os passos também dependem dela,
                              e nenhum dos dois é descendente da nav */
  --largura: 1140px;
  --respiro: clamp(1.25rem, 5vw, 3rem);
  --secao:   clamp(4rem, 9vw, 7.5rem);
  --curva:   cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:7.5rem; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:'Inter', -apple-system, system-ui, sans-serif;
  font-size:18px;          /* proposital: público maduro */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto é obrigatório junto com os atributos width/height do HTML.
   Eles existem pra reservar espaço e evitar o salto de layout, mas viram a
   altura efetiva: sem isto, um CSS que só define a largura estica a imagem. */
img,iframe{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }

.recipiente{
  width:100%; max-width:var(--largura);
  margin-inline:auto; padding-inline:var(--respiro);
}

.pular{ position:absolute; left:-9999px; }
.pular:focus{ left:1rem; top:1rem; z-index:99; background:var(--acento); color:#fff; padding:.75rem 1.25rem; border-radius:8px; }

/* --------------------------------------------------------------- tipografia */
.etiqueta{
  margin:0 0 1rem;
  font-size:.8rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--dourado-texto);
}

h1{
  margin:0 0 1.5rem;
  font-family:'Host Grotesk', 'Inter', sans-serif;
  font-size:clamp(2.3rem, 5vw, 3.9rem);
  font-weight:300; line-height:1.1; letter-spacing:-.02em;
}
h1 em{ font-style:normal; font-weight:600; color:var(--dourado-texto); }

.titulo{
  margin:0 0 1.25rem;
  font-family:'Host Grotesk', 'Inter', sans-serif;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight:400; line-height:1.2; letter-spacing:-.015em;
  max-width:24ch;
}

.apoio{ margin:0 0 3rem; max-width:58ch; color:var(--tinta-suave); }

/* -------------------------------------------------------------------- botão */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:56px;
  padding:1rem 1.9rem;             /* o respiro dos botões da capa, em todos */
  border-radius:10px;
  font-size:1rem; font-weight:600; text-decoration:none;
  transition:background-color .25s, color .25s, border-color .25s, transform .3s var(--curva);
}
.botao--grande{ min-height:60px; padding:1.1rem 2.1rem; font-size:1.05rem; }
.botao__seta{ transition:transform .3s var(--curva); }

/* Pílula chapada. Sem gradiente e sem brilho. */
.botao--principal{ background:var(--acento); color:#fff; }
.botao--principal:hover{ background:#1E4433; transform:translateY(-2px); }
.botao--principal:hover .botao__seta{ transform:translateX(3px); }

.botao--vazado{ border:1.5px solid var(--linha); color:var(--tinta); background:transparent; }
.botao--vazado:hover{ border-color:var(--acento); color:var(--acento); transform:translateY(-2px); }

/* ---------------------------------------------------------------- navegação */
/* Mega-nav do Osmo, adaptada. Os dropdowns levam aos sinais e às modalidades:
   no celular ela também resolve um buraco, porque antes não havia menu
   nenhum abaixo de 1100px, só a logo e o botão. */

.nav{
  position:fixed; z-index:100;
  top:1rem; left:1rem; right:1rem;
}
.nav__bar{
  position:relative; z-index:3;
  max-width:var(--largura); margin-inline:auto;
  /* Vidro: a cor de baixo atravessa. Precisa de translucidez de verdade,
     senão o blur não tem o que borrar. */
  background:rgba(246,245,241,.72);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(246,245,241,.5);
  border-radius:10px;
}
.nav__container{
  height:var(--nav-altura);
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.25rem;
}
.nav__start{ display:flex; align-items:center; width:100%; position:relative; }

.nav__logo{ flex:none; margin-right:2.5rem; display:flex; }
.nav__logo img{ height:38px; width:auto; }

.nav__inner{ display:flex; align-items:center; width:100%; gap:.75rem; }
.nav__list{ display:flex; align-items:center; gap:.25rem; }
.nav__list.is--actions{ margin-left:auto; gap:.5rem; }

.nav__link{
  display:flex; align-items:center; gap:.15rem;
  padding:.5rem .7rem; border-radius:8px;
  background:none; border:0; cursor:pointer;
  color:var(--tinta-suave); text-decoration:none;
  font-family:inherit;
  transition:color .2s, background-color .2s;
}
.nav__link:hover{ color:var(--tinta); background:rgba(21,48,37,.05); }
.nav__link-label{ font-size:.95rem; font-weight:500; line-height:1.2; white-space:nowrap; }
.nav__link-icon{ width:1.15rem; height:1.15rem; flex:none; }

.nav__cta{
  display:flex; align-items:center; justify-content:center;
  padding:.8rem 1.35rem; border-radius:10px;
  background:var(--acento); color:var(--papel);
  text-decoration:none; white-space:nowrap;
  transition:background-color .2s, transform .3s var(--curva);
}
.nav__cta:hover{ background:#1E4433; transform:translateY(-1px); }
.nav__cta.is--secundario{
  background:transparent; color:var(--tinta);
  border:1px solid var(--linha);
}
.nav__cta.is--secundario:hover{ background:transparent; border-color:var(--dourado-texto); color:var(--dourado-texto); }

.nav__end{ display:none; align-items:center; }
.nav__burger{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.24rem; width:48px; height:48px; padding:0;
  background:var(--acento-fundo); border:0; border-radius:10px; cursor:pointer;
}
.nav__burger-line{
  display:block; width:1.2rem; height:2px; border-radius:2px;
  background:var(--acento); position:relative;
}

.nav__back{
  position:absolute; left:-.5rem; z-index:2;
  opacity:0; visibility:hidden;
}

.nav__backdrop{
  position:fixed; inset:0; z-index:0;
  opacity:0; visibility:hidden; pointer-events:none;
  background:rgba(21,48,37,.28);
}

/* ------------------------------------------------------------- dropdown */
.nav__drop-wrap{
  position:absolute; top:calc(100% - .25rem); left:0; right:0; z-index:2;
  max-width:var(--largura); margin-inline:auto;
  pointer-events:none;
}
.nav__drop-container{ position:relative; overflow:hidden; }
.nav__drop-bg{
  position:absolute; inset:0;
  background:rgba(246,245,241,.94);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(246,245,241,.5);
  border-radius:10px;
  will-change:transform;
}
.nav__panel{
  position:absolute; inset:0 0 auto;
  opacity:0; visibility:hidden; pointer-events:none;
  overflow:hidden;
}
.nav__panel-inner{ display:flex; }

.nav__col{
  flex:1; display:flex; flex-direction:column;
  align-items:flex-start; gap:1rem;
  padding:2rem 1.25rem;
  border-right:1px solid var(--linha);
}
.nav__col:last-of-type{ border-right:0; }
.nav__col.is--destaque{ background:var(--papel-2); border-radius:0 10px 10px 0; }

.nav__col-label{
  padding-left:.75rem;
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--dourado-texto);
}
.nav__col-list{ display:flex; flex-direction:column; width:100%; }
.nav__panel-link{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:.6rem .75rem; border-radius:8px;
  color:var(--tinta); text-decoration:none;
  transition:background-color .2s;
}
.nav__panel-link:hover{ background:rgba(21,48,37,.05); }
.nav__panel-link-text{ font-weight:500; font-size:.98rem; }
.nav__panel-link-desc{ font-size:.85rem; color:var(--tinta-suave); }

/* Sem caixa própria: a coluna destacada já é o cartão, e uma segunda borda
   dentro dela vira card dentro de card. */
.nav__cartao{
  width:100%;
  display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
  padding:0 .75rem;
}
.nav__cartao-frase{
  margin:0; font-family:'Host Grotesk','Inter',sans-serif;
  font-size:1.15rem; font-weight:300; line-height:1.3;
}
.nav__cartao-cta{
  display:flex; align-items:center; gap:.25rem;
  padding:.75rem 1.2rem; border-radius:10px;
  background:var(--acento); color:var(--papel);
  font-size:.9rem; font-weight:600; text-decoration:none;
}
.nav__cartao-cta svg{ width:1.1rem; height:1.1rem; }

/* --------------------------------------------------------------------- capa */
/* Ocupa a tela inteira do dispositivo. svh e não vh: no celular o vh conta a
   barra do navegador que só aparece depois, e o conteúdo nasce cortado.
   min-height e não height, para a capa crescer se o conteúdo não couber. */
/* A foto é o fundo da capa, atrás de todo o conteúdo. O texto vira claro e
   ganha um véu escuro do lado esquerdo, senão não há contraste sobre o céu. */
.capa{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; align-items:flex-start;
  padding-block:calc(var(--nav-altura) + 3rem) 3rem;
  background:#12232F url('assets/hero.webp') right center / cover no-repeat;
  background-position:85% center;
  color:var(--papel);
}
.capa__veu{
  position:absolute; inset:0; z-index:-1;
  background:none;
}
.capa .etiqueta{ color:#DCC084; }
/* A sombra faz o trabalho que o véu fazia, mas só ao redor das letras: a foto
   continua com a cor original. O parágrafo leva sombra mais fechada porque é
   texto pequeno, onde a exigência de contraste é maior. */
.capa .etiqueta,
.capa h1{ text-shadow:0 1px 28px rgba(8,20,28,.9), 0 1px 4px rgba(8,20,28,.55); }
.capa .capa__apoio{ text-shadow:0 1px 14px rgba(8,20,28,.95), 0 1px 3px rgba(8,20,28,.85); }
.capa h1{ color:var(--papel); }
.capa h1 em{ color:#DCC084; }
.capa .capa__apoio{
  /* .capa__apoio sozinho empatava com a regra do tema claro e perdia por vir
     antes no arquivo. Com a classe da seção junto, ganha por especificidade. */
  color:var(--papel); max-width:38ch;
}
.capa .botao--principal{ background:#DCC084; color:#12232F; }
.capa .botao--principal:hover{ background:#E7D19C; }
.capa .botao--vazado{ border-color:rgba(246,245,241,.45); color:var(--papel); }
.capa .botao--vazado:hover{ border-color:#DCC084; color:#DCC084; }
/* Centraliza por margem automática, não por align-items: com flex centralizado
   um conteúdo maior que a tela transborda para cima e some sob a nav fixa.
   A margem automática centraliza quando sobra espaço e respeita o padding
   quando não sobra. */
.capa__interno{ margin-block:auto; }
.capa__interno{
  width:100%;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.capa__apoio{ margin:0 0 2.25rem; max-width:52ch; font-size:1.08rem; color:var(--tinta-suave); }
.capa__acoes{ display:flex; flex-wrap:wrap; gap:.85rem; }

.capa__retrato{ margin:0; }
.retrato__vazio{
  aspect-ratio:4/5; border-radius:16px;
  background:var(--acento-fundo);
  border:1px dashed rgba(21,48,37,.3);
  display:grid; place-items:center;
  color:rgba(21,48,37,.5); font-size:.9rem; text-align:center; line-height:1.5;
}
.retrato__vazio--largo{ aspect-ratio:5/4; }

/* ------------------------------------------------------------------ seções */
.secao{ padding-block:var(--secao); }
.secao--clara{ background:var(--papel-2); }

/* Seção no verde da marca. Como todo componente lê os tokens, redefinir os
   tokens aqui dentro inverte a seção inteira sem duplicar nenhuma regra. */
.secao--verde{
  --papel:        #153025;
  --papel-2:      #1B3A2C;
  --tinta:        #EDECE6;
  --tinta-suave:  rgba(237,236,230,.76);
  --acento:       #BA9A5A;
  --acento-fundo: rgba(237,236,230,.08);
  --dourado-texto:#BA9A5A;     /* no escuro o dourado da marca já tem 5.3:1 */
  --linha:        rgba(237,236,230,.18);
  background:var(--papel);
  color:var(--tinta);
}
.secao--verde .sinais li{ background:rgba(237,236,230,.05); }
.secao--verde .chamada-meio{ background:rgba(237,236,230,.07); }
.secao--verde .botao--principal{ background:var(--acento); color:#153025; }
.secao--verde .botao--principal:hover{ background:#C9AC71; }
.secao--verde .botao--vazado{ border-color:rgba(237,236,230,.35); color:var(--tinta); }
.secao--verde .botao--vazado:hover{ border-color:var(--acento); color:var(--acento); }
.secao--verde .local__mapa{ border-color:rgba(237,236,230,.2); }
.secao--verde .local dd a{ color:var(--tinta); }

/* ------------------------------------------------------------------ sinais */
/* Passos que grudam: o texto rola e o cartão ao lado fica preso, trocando
   conforme o passo ativo muda. Efeito baseado no sticky steps do Osmo,
   adaptado à escala e à paleta daqui. */
.sinais__topo{ margin-bottom:clamp(2rem,5vw,3.5rem); }

.passos-lista{
  display:flex; flex-direction:column;
  gap:18dvh;
  padding-block:calc(50dvh - 9em);
  position:relative;
}

/* Sem position aqui de propósito: a mídia é absoluta em relação à lista
   inteira, não a cada passo. É isso que dá curso para o sticky grudar ao
   longo dos seis passos, em vez de grudar dentro de um bloco de 200px. */
.passo{ position:static; }

.passo__texto{
  display:flex; flex-direction:column; gap:1.1rem;
  width:50%; padding-right:4rem;
}
.passo__n{
  font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dourado-texto);
}
.passo__titulo{
  margin:0;
  font-family:'Host Grotesk','Inter',sans-serif;
  font-size:clamp(1.8rem,3.4vw,2.9rem);
  font-weight:300; line-height:1.1; letter-spacing:-.02em;
}
.passo__p{ margin:0; color:var(--tinta-suave); max-width:42ch; }

.passo__midia{
  position:absolute; top:0; right:0;
  width:50%; height:100%;
  padding-left:3rem;
}
.passo__gruda{
  position:sticky;
  /* a nav é fixa: sem esta folga o cartão passa por baixo dela */
  top:8rem;
  display:flex; align-items:center;
  width:100%; min-height:calc(100dvh - 12rem);
}

.passo__cartao{
  margin:0; width:100%; aspect-ratio:4/5;
  border-radius:18px;
  /* Sólido de propósito: os cartões ficam empilhados no mesmo lugar e o
     ativo precisa cobrir os anteriores. Translúcido deixava dois números
     e duas frases visíveis ao mesmo tempo. */
  background:#1E3E2F;
  border:1px solid rgba(237,236,230,.14);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(1.75rem,3vw,2.75rem);
  overflow:hidden; position:relative;
}
.passo__cartao::after{        /* a árvore da marca, discreta ao fundo */
  content:''; position:absolute; right:-14%; bottom:-8%;
  width:70%; aspect-ratio:512/603;
  background:url('assets/simbolo.png') center/contain no-repeat;
  opacity:.1;
}
.passo__cartao-n{
  font-family:'Host Grotesk','Inter',sans-serif;
  font-size:clamp(3rem,6vw,4.6rem); font-weight:300; line-height:1;
  color:var(--dourado);
}
.passo__cartao-frase{
  margin:0; position:relative;
  font-family:'Host Grotesk','Inter',sans-serif;
  font-size:clamp(1.4rem,2.6vw,2rem); font-weight:300;
  line-height:1.25; letter-spacing:-.01em;
  max-width:16ch;
}

/* Já pronta para quando as fotos chegarem: basta trocar o <figure> por um
   <img class="passo__imagem">, sem mexer em mais nada. */
.passo__imagem{
  width:100%; aspect-ratio:4/5;
  object-fit:cover; border-radius:18px;
  filter:grayscale(.15);
}

@media (min-width:1101px){
  [data-passo-status] .passo__gruda{
    transition:opacity .5s ease-in-out, visibility .5s ease-in-out;
    opacity:0; visibility:hidden;
  }
  [data-passo-status="before"] .passo__gruda,
  [data-passo-status="active"] .passo__gruda{ opacity:1; visibility:visible; }

  [data-passo-status] .passo__texto{ transition:opacity .5s ease-in-out; opacity:.3; }
  [data-passo-status="active"] .passo__texto{ opacity:1; }
}

/* ------------------------------------------------------------------- passos */
.passos{ display:grid; gap:0; }
.passos li{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:1.75rem; align-items:start;
  padding-block:1.75rem;
  border-bottom:1px solid var(--linha);
}
.passos li:first-child{ border-top:1px solid var(--linha); }
.passos__n{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--dourado); color:#153025;
  font-size:1rem; font-weight:600;
}
.passos h3{ margin:.35rem 0 .4rem; font-family:'Host Grotesk','Inter',sans-serif; font-size:1.3rem; font-weight:500; }
.passos p{ margin:0; color:var(--tinta-suave); max-width:60ch; }

.nota{
  margin-top:2rem; padding:1.25rem 1.5rem;
  background:var(--papel); border:1px solid var(--linha); border-radius:12px;
  font-size:1rem; color:var(--tinta-suave);
}

/* -------------------------------------------------------------------- sobre */
.sobre{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.sobre__texto p{ color:var(--tinta-suave); max-width:56ch; }
.sobre__registro{ margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--linha); font-size:.95rem; }
.sobre__foto{ margin:0; }

/* -------------------------------------------------------------------- local */
.local{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.local dl{ margin-bottom:2rem; }
.local dl > div{ padding-block:1.1rem; border-bottom:1px solid var(--linha); }
.local dl > div:first-child{ border-top:1px solid var(--linha); }
.local dt{ font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dourado-texto); margin-bottom:.4rem; }
.local dd{ margin:0; color:var(--tinta-suave); }
.local dd a{ color:var(--tinta); }
.local__mapa{ border-radius:14px; overflow:hidden; border:1px solid var(--linha); }
.local__mapa iframe{ width:100%; height:380px; border:0; }

/* ---------------------------------------------------------------------- faq */
/* Título fixo à esquerda, perguntas à direita: o título fica visível enquanto
   a pessoa percorre a lista, e a coluna estreita segura a linha de leitura. */
.faq-bloco{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);
  gap:clamp(2rem,6vw,5rem); align-items:start;
}
.faq-bloco__intro{ position:sticky; top:7rem; }
.faq-bloco__intro .titulo{ font-size:clamp(2rem,3.8vw,3.1rem); }
.faq-bloco__intro .apoio{ margin-bottom:0; font-size:1rem; }
.faq-bloco__intro .apoio a{ color:var(--dourado-texto); text-underline-offset:3px; }

.faq{ border-top:1px solid var(--linha); }
.faq details{ border-bottom:1px solid var(--linha); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:1.5rem 3rem 1.5rem 0;
  position:relative;
  font-family:'Host Grotesk','Inter',sans-serif;
  font-size:1.22rem; font-weight:500; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:.6rem; top:50%;
  width:11px; height:11px;
  border-right:2px solid var(--dourado-texto);
  border-bottom:2px solid var(--dourado-texto);
  translate:0 -70%; rotate:45deg;
  transition:rotate .3s var(--curva), translate .3s var(--curva);
}
.faq details[open] summary::after{ rotate:225deg; translate:0 -25%; }
.faq summary:hover{ color:var(--acento); }
.faq p{ margin:0 0 1.5rem; max-width:62ch; color:var(--tinta-suave); }

/* ------------------------------------------------------------------ agendar */
.agendar{ background:var(--acento); color:#fff; padding-block:var(--secao); text-align:center; }
.agendar h2{
  margin:0 auto 1rem; max-width:20ch;
  font-family:'Host Grotesk','Inter',sans-serif;
  font-size:clamp(1.8rem,3.6vw,2.8rem); font-weight:300; line-height:1.2;
}
.agendar p{ margin:0 auto 2rem; max-width:48ch; color:rgba(255,255,255,.85); }
.agendar .botao--principal{ background:var(--dourado); color:#153025; }
.agendar .botao--principal:hover{ background:#C9AC71; }
.agendar__nota{ margin-top:1.75rem !important; font-size:.95rem; }

/* ------------------------------------------------------------------- rodapé */
.rodape{
  background:var(--papel);
  border-top:1px solid var(--linha);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
}

.rodape__topo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,5rem);
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
.rodape__marca img{ width:300px; max-width:100%; }

.rodape__contato{ margin-top:2rem; }
.rodape h3{
  margin:0 0 .9rem;
  font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--dourado-texto);
}
.rodape__contato p{ margin:0 0 .75rem; font-size:.95rem; color:var(--tinta-suave); }
.rodape__contato a{ color:var(--tinta); font-weight:500; }

.rodape__colunas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2rem;
}
.rodape__colunas a{
  display:block; padding-block:.4rem;
  font-size:.95rem; color:var(--tinta-suave); text-decoration:none;
  transition:color .2s;
}
.rodape__colunas a:hover{ color:var(--dourado-texto); }

.rodape__base{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding-top:2rem; border-top:1px solid var(--linha);
}
.rodape__legal p{ margin:0; font-size:.85rem; color:var(--tinta-suave); max-width:62ch; }
.rodape__legal p:first-child{ margin-bottom:.4rem; letter-spacing:.06em; color:var(--tinta); }

.rodape__redes{ display:flex; gap:.6rem; }
.rodape__redes a{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--linha); color:var(--tinta-suave);
  transition:border-color .2s, color .2s;
}
.rodape__redes a:hover{ border-color:var(--dourado-texto); color:var(--dourado-texto); }

/* --------------------------------------------------------------- flutuante */
/* Botão fixo de WhatsApp. Só no celular, que é de onde a família vai clicar. */
.flutuante{
  position:fixed; right:1rem; bottom:1rem; z-index:45;
  display:none; align-items:center; gap:.5rem;
  min-height:56px; padding:0 1.35rem;
  background:var(--acento); color:#fff;
  border-radius:10px; text-decoration:none;
  font-weight:600; font-size:1rem;
  box-shadow:0 8px 24px rgba(21,48,37,.28);
  opacity:0; pointer-events:none;          /* nasce escondido; o JS decide */
  transition:opacity .3s ease;
}

/* ------------------------------------------------------------------ mobile */
@media (max-width:1100px){
  /* --------------------------------------------------- navegação no celular */
  .nav{ top:0; left:0; right:0; }
  .nav__bar{ border-radius:0; border-inline:0; border-top:0; }
  .nav__start{ justify-content:space-between; }
  .nav__logo{ margin-right:0; }
  .nav__logo img{ height:30px; }
  .nav__end{ display:flex; }

  .nav__inner{
    position:fixed; inset:var(--nav-altura) 0 0 0;
    flex-direction:column; justify-content:space-between; align-items:stretch;
    gap:1.5rem; padding:1.75rem 1.25rem 2.5rem;
    background:var(--papel);
    overflow:auto;
    opacity:0; visibility:hidden;
  }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .nav__list.is--actions{ flex-direction:row; gap:.75rem; margin-left:0; }
  .nav__action{ flex:1; }
  .nav__cta{ width:100%; padding:.9rem 1rem; }

  .nav__link{
    width:100%; padding:1rem 0; border-radius:0;
    border-bottom:1px solid var(--linha);
  }
  .nav__link.is--dropdown{ justify-content:space-between; }
  .nav__link.is--back{ border-bottom:0; padding:.5rem 0; }
  .nav__link-label{ font-size:1.1rem; }
  .nav__link-icon.is--dropdown{ transform:rotate(-90deg); }

  .nav__backdrop{ display:none; }
  .nav__drop-wrap{ position:fixed; inset:var(--nav-altura) 0 0 0; z-index:4; max-width:none; }
  .nav__drop-container{ height:100%; overflow:auto; }
  .nav__drop-bg{ display:none; }
  .nav__panel{ inset:0; background:var(--papel); overflow:auto; }
  .nav__panel-inner{ flex-direction:column; }
  .nav__col{ border-right:0; border-bottom:1px solid var(--linha); padding:1.5rem 1.25rem; }
  .nav__col.is--destaque{ border-radius:0; }
  .nav__col-label{ width:100%; padding-left:0; }

  /* Em 390px a marca completa quebrava em tres linhas e empurrava a capa
     inteira pra baixo. No celular fica so o nome. */
  /* Marca e botão têm flex:none: juntos estouravam 390px. Aqui a marca
     encolhe, o gap fecha e o botão perde a palavra que não é essencial. */
  .marca img{ height:30px; }
  .cabecalho__interno{ gap:.75rem; }
  .cta__extra{ display:none; }
  .capa__interno,
  .sobre,
  .local{ grid-template-columns:1fr; }
  .capa{
    background-image:url('assets/hero-p.webp');
    background-position:72% center;
  }
  /* No desktop a foto fica limpa, sem camada por cima. No retrato ela é
     recortada e o texto cai sempre sobre cabelo branco ou pele iluminada:
     medi cinco enquadramentos e todos deram ~1.2 de contraste. Aqui o véu
     volta, só no celular, e só na metade de baixo, onde o texto está. */
  /* A sobrancelha é dourada e pequena: no topo, onde o véu é mais leve, o tom
     da marca não alcança 4.5. Aqui ela clareia. */
  .capa .etiqueta{ color:#EEDCB4; }
  .capa__veu{
    background:linear-gradient(180deg,
      rgba(11,26,36,.42) 0%,
      rgba(11,26,36,.62) 22%,
      rgba(11,26,36,.86) 45%,
      rgba(11,26,36,.94) 100%);
  }
  .capa{ padding-block:calc(var(--nav-altura) + 1.25rem) 1.5rem; }
  .capa__interno{ gap:1.25rem; }
  /* O parágrafo era o maior bloco da capa no celular (200px de 667). Menor,
     mas ainda em 16px, que é o piso de conforto para este público. */
  .capa__apoio{ font-size:1rem; line-height:1.5; margin-bottom:0; }
  .capa h1{ margin-bottom:.75rem; }
  .capa__acoes{ gap:.6rem; }
  .passos li{ grid-template-columns:1fr; gap:.75rem; }
  .faq-bloco{ grid-template-columns:1fr; }
  .passos-lista{ gap:4.5rem; padding-block:0; }
  .passo__texto{ width:100%; padding-right:0; padding-bottom:2rem; }
  .passo__midia{ position:relative; width:100%; height:auto; padding-left:0; }
  .passo__gruda{ position:relative; top:auto; min-height:auto; }
  .passo__cartao{ aspect-ratio:16/10; }
  .faq-bloco__intro{ position:static; }
  .rodape__topo{ grid-template-columns:1fr; }
  .rodape__base{ flex-direction:column; align-items:flex-start; }
  .chamada-meio{ flex-direction:column; align-items:stretch; text-align:center; }
  .flutuante{ display:inline-flex; }
  body{ padding-bottom:5rem; }   /* espaço pro botão fixo não cobrir o rodapé */
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* --------------------------------------------------------------- domiciliar */
.domiciliar{ max-width:70ch; }
.lista-marcada{ display:grid; gap:.9rem; }
.lista-marcada li{
  position:relative; padding-left:2rem;
  color:var(--tinta-suave);
}
.lista-marcada li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%;
  background:var(--dourado);
}