/* ==========================================================================
   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: 5rem;      /* 80px, como na referência */   /* na raiz: a capa e os passos também dependem dela,
                              e nenhum dos dois é descendente da nav */
  --largura: 1280px;
  --respiro: clamp(1.25rem, 5vw, 3rem);
  --secao:   clamp(4rem, 9vw, 7.5rem);
  --curva:   cubic-bezier(.22,1,.36,1);
  --curva-004: cubic-bezier(.675,.15,.1,1);   /* o easing do botão 004 */
}

*,*::before,*::after{ box-sizing:border-box; }
/* O scroll suave é do Lenis. Deixar o nativo ligado junto faz os dois
   disputarem a mesma rolagem e o clique em âncora fica travado. */
html{ scroll-behavior:auto; 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; }

/* Quebra de linha só onde há largura para ela: no celular o texto já quebra
   sozinho e a quebra forçada criaria uma linha órfã. */
.quebra-desktop{ display:none; }
@media (min-width:1201px){ .quebra-desktop{ display:inline; } }

/* --------------------------------------------------------------- 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:400; line-height:1.1; letter-spacing:-.02em;
}
h1 em{ font-style:normal; font-weight:700; 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:500; 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:0; left:0; right:0;
}
/* Barra de borda a borda, translúcida com desfoque: o conteúdo passa por
   baixo e aparece borrado. Precisa de translucidez real, senão não há o que
   desfocar. */
.nav__bar{
  position:relative; z-index:3;
  width:100%;
  background:rgba(21,48,37,.94);   /* o verde da paleta */
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid rgba(237,236,230,.1);
  border-radius:0;
  transition:background-color .4s var(--curva), border-color .4s var(--curva),
             backdrop-filter .4s var(--curva);
}

/* Sobre a capa a barra vira vidro de verdade: sem cor própria, só o desfoque
   do que passa por baixo e um fio de luz na borda, que é o que dá a
   materialidade. A foto atravessa inteira. */
.nav[data-hero] .nav__bar{
  background:transparent;
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}


.nav__container{
  height:var(--nav-altura);
  display:flex; align-items:center; justify-content:space-between;
  /* O conteúdo segue o container do site, para a logo nascer na mesma
     vertical dos títulos das seções. */
  max-width:var(--largura); margin-inline:auto;
  padding:0 var(--respiro);
}
.nav__start{ display:flex; align-items:center; width:100%; position:relative; }

.nav__logo{ flex:none; margin-right:2.75rem; display:grid; }
.nav__logo img{
  grid-area:1/1;                 /* as duas empilhadas no mesmo lugar */
  height:38px; width:auto;
  transition:opacity .3s var(--curva);
}
.nav__logo-escura{ display:none; }   /* a barra é sempre verde: só a clara é usada */

/* flex:1 e não width:100%: dentro de um flex que já tem a logo, o 100% pede a
   largura inteira do pai e o bloco de ações vaza para fora do padding. */
.nav__inner{ display:flex; align-items:center; flex:1; min-width:0; gap:.5rem; }
.nav__list{ display:flex; align-items:center; gap:.1rem; }
.nav__list.is--actions{ margin-left:auto; gap:.5rem; }

.nav__link{
  display:flex; align-items:center; gap:.15rem;
  padding:.5rem .45rem; border-radius:8px;
  background:none; border:0; cursor:pointer;
  color:rgba(237,236,230,.82); text-decoration:none;
  font-family:inherit;
  transition:color .2s, background-color .2s;
}
.nav__link:hover{ color:var(--papel); background:rgba(237,236,230,.08); }
.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 1rem; border-radius:10px;
  background:var(--dourado); color:var(--tinta);
  text-decoration:none; white-space:nowrap;
  transition:background-color .2s, transform .3s var(--curva);
}
.nav__cta:hover{ background:#C9AC71; transform:translateY(-1px); }
.nav__cta.is--secundario{
  background:transparent; color:var(--papel);
  border:1px solid rgba(237,236,230,.28);
}
.nav__cta.is--secundario:hover{ background:transparent; border-color:var(--dourado); color:var(--dourado); }

.nav__end{ display:none; align-items:center; }
/* Sem retângulo por trás: só os três traços, maiores e mais grossos. */
/* Sem retângulo por trás: só os três traços. Medidas em pixel inteiro de
   propósito: com 2.5px de altura e gap em rem os traços caíam em frações de
   pixel diferentes e o antisserrilhado fazia um parecer mais curto que o
   outro, mesmo os três tendo a mesma largura medida. */
.nav__burger{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; width:48px; height:48px; padding:0;
  background:none; border:0; cursor:pointer;
}
.nav__burger-line{
  display:block; width:28px; height:2px; border-radius:1px;
  background:var(--dourado); 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:100%; 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:var(--tinta);
  border:1px solid rgba(237,236,230,.12);
  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 rgba(237,236,230,.12);
}
.nav__col:last-of-type{ border-right:0; }
.nav__col.is--destaque{ background:rgba(237,236,230,.06); border-radius:0 0 10px 0; }

.nav__col-label{
  padding-left:.75rem;
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--dourado);
}
.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(--papel); text-decoration:none;
  transition:background-color .2s;
}
.nav__panel-link:hover{ background:rgba(237,236,230,.08); }
.nav__panel-link-text{ font-weight:500; font-size:.98rem; }
.nav__panel-link-desc{ font-size:.85rem; color:rgba(237,236,230,.7); }

/* Sem caixa própria: a coluna destacada já é o cartão, e uma segunda borda
   dentro dela vira card dentro de card. */
/* O cartão ocupa a coluna inteira: sem isto sobravam 123px de verde vazio
   embaixo do botão. A foto absorve o que sobra, seja qual for a altura que
   as colunas de links determinarem. */
.nav__cartao{
  width:100%; flex:1; min-height:0;
  display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
  padding:0 .75rem;
}
.nav__cartao-foto{
  width:100%; flex:1 1 0; min-height:4.5rem;
  /* flex-basis:0 é quem manda na altura aqui: o height:auto global do img
     vira irrelevante porque a base flex substitui o height no eixo principal. */
  object-fit:cover; border-radius:10px;
}

.nav__cartao-frase{
  margin:0; font-family:'Host Grotesk','Inter',sans-serif;
  font-size:1.15rem; font-weight:300; line-height:1.3;
  color:var(--papel);
}
.nav__cartao-cta{
  display:flex; align-items:center; gap:.25rem;
  padding:.75rem 1.2rem; border-radius:10px;
  background:var(--dourado); color:var(--tinta);
  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:#153025 url('assets/hero.webp?v=12283b3c') right center / cover no-repeat;
  background-position:88% center;
  color:var(--papel);
}
/* Sem camada por cima: o fundo da foto é o próprio verde da marca e o texto
   já sai em 7.26 (sobrancelha) e 11.23 (título). O degradê só fazia falta na
   versão em taupe. */
.capa__veu{
  position:absolute; inset:0; z-index:-1;
  background:none;
}
.capa .etiqueta{ color:#DCC084; }

/* Teto de 56px, medido: em 62px o título alcança o cabelo dela e o contraste
   cai de 5.29 para 1.34. */
.capa h1{ color:var(--papel); font-size:clamp(2.2rem, 4vw, 3.5rem); }
/* A frase destacada não quebra por dentro: sem isto o "as" fica órfão no fim
   da linha de cima. Só a partir do desktop, onde há largura para ela. */
@media (min-width:1201px){
  .capa h1 em{ white-space:nowrap; }
}
.capa h1 em{ color:#DCC084; }
.capa .capa__apoio{
  max-width:min(38ch, 460px);
  /* .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;
}
/* O principal usa o mesmo dourado do botão da navbar. */
.capa .botao--principal{ background:var(--dourado); color:var(--tinta); }
.capa .botao--principal:hover{ background:#C9AC71; }
/* Vidro: uma lâmina clara translúcida e um fio de luz na borda de cima. Sem
   desfoque, que aqui não teria o que borrar — o que dá a leitura de vidro é a
   diferença de cor com o que está atrás, não o blur. */
.capa .botao--vazado{
  background:rgba(246,245,241,.10);
  border-color:rgba(246,245,241,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
  color:var(--papel);
}
.capa .botao--vazado:hover{
  background:rgba(246,245,241,.17);
  border-color:rgba(246,245,241,.48);
  color:var(--papel);
}
/* 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; }
/* Tela baixa empurra o texto para a faixa clara perto do horizonte: menos
   respiro no topo devolve o bloco para a parte escura do céu. */
@media (min-width:1201px) and (max-height:800px){
  .capa{ padding-top:calc(var(--nav-altura) + 1.25rem); }
}
/* A segunda coluna existia para o retrato, que saiu quando a foto virou fundo.
   Ela espremia o título e quebrava "as próprias escolhas" em duas linhas.
   O container continua com a largura do .recipiente, para seguir alinhado com
   a navbar; quem limita a linha é o conteúdo, senão o bloco centraliza e cai
   em cima do rosto. */
.capa__interno{ width:100%; }
.capa__interno > *{ max-width:560px; }
.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; }

/* ------------------------------------------------------------------ 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:400; 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;
  /* Nada de borda nem de fundo verde: a seção virou clara e os dois viravam
     um fio verde em volta da foto, que cobre o cartão inteiro de qualquer forma. */
  background:var(--papel-2);   /* só aparece enquanto a foto carrega */
  padding:0;
  overflow:hidden; position:relative;
}
/* O cartão é a foto, sem nada por cima. */
.passo__cartao img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  border-radius:inherit;
}

/* 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:1201px){
  [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; }
}

/* Fecha a seção de sinais com o convite. A regra base sumiu junto com os
   cards antigos quando esta seção virou passos. */
.chamada-meio{
  margin-top:3rem; padding:1.75rem 2rem;
  background:var(--acento-fundo);
  border-radius:10px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem;
}
.chamada-meio p{
  margin:0; font-size:1.15rem;
  font-family:'Host Grotesk','Inter',sans-serif; font-weight:400;
}

/* ------------------------------------------------------- linha do tempo */
/* Bloco centralizado dentro do container, como no efeito original: o texto
   continua alinhado à esquerda dentro dele, mas a coluna inteira fica no meio
   da página em vez de encostar na margem. */
#consulta > .recipiente > *{
  max-width:52rem;
  margin-inline:auto;
}
/* Os passos da consulta ligados por uma linha que se preenche conforme a
   pessoa rola. O passo atual fica em foco e os já vistos permanecem acesos. */
.linha{ position:relative; }

.linha__trilho{
  position:absolute; left:1.5rem; width:2px;
  background:rgba(21,48,37,.14);
  pointer-events:none;
}
.linha__preenche{
  position:absolute; inset:0;
  width:100%; height:100%;
  background:var(--dourado);
  transform-origin:50% 0;
}

.linha__lista{ display:flex; flex-direction:column; gap:clamp(3rem,7vw,5rem); }

.linha__item{
  display:flex; align-items:flex-start;
  gap:clamp(1.25rem,3vw,2.5rem);
  position:relative;
}

.linha__marca{
  flex:none; position:relative;
  display:grid; place-items:center;
  width:3rem; height:3rem; border-radius:50%;
  background:var(--papel);
  border:1px solid rgba(21,48,37,.18);
  color:var(--tinta);
  font-size:.95rem; font-weight:600;
  transition:background-color .4s var(--curva), color .4s var(--curva),
             border-color .4s var(--curva), box-shadow .4s var(--curva);
}
.secao--clara .linha__marca{ background:var(--papel-2); }

/* Já percorrido */
[data-linha-item][data-status="ativo"] [data-linha-marca]{
  background:var(--dourado); border-color:var(--dourado); color:var(--tinta);
}
/* O passo em que a pessoa está agora */
[data-linha-item][data-atual] [data-linha-marca]{
  box-shadow:0 0 0 .5rem rgba(186,154,90,.2);
}

.linha__conteudo{
  display:flex; flex-direction:column; gap:.5rem;
  max-width:56ch; padding-top:.35rem;
  opacity:.35;
  transition:opacity .35s var(--curva);
}
[data-linha-item][data-status="ativo"] .linha__conteudo{ opacity:.6; }
[data-linha-item][data-atual] .linha__conteudo{ opacity:1; }

.linha__conteudo h3{
  margin:0;
  font-family:'Host Grotesk','Inter',sans-serif;
  font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:600; letter-spacing:-.02em;
}
.linha__conteudo p{ margin:0; color:var(--tinta-suave); max-width:46ch; }

/* -------------------------------------------------------------------- sobre */
/* Foto à esquerda, texto à direita. A ordem no HTML continua texto-primeiro,
   que é a que faz sentido pra leitor de tela e é a que vale no celular. */
.sobre{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.sobre__foto{ order:-1; }
.sobre__texto p{ color:var(--tinta-suave); max-width:56ch; }
/* O nome virou o título; a frase que era o título desceu a subtítulo. */
.sobre__subtitulo{ margin:-.35rem 0 1.5rem; font-size:clamp(1.25rem,1.9vw,1.4rem); line-height:1.35; max-width:30ch; }
.sobre__registro{ margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--linha); font-size:.95rem; }
.sobre__foto{ margin:0; }
.sobre__foto img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  object-position:center 22%;   /* o rosto sobe: enquadramento de retrato */
  border-radius:10px;
}

/* -------------------------------------------------------------------- local */
/* Sem align-items:start: as duas colunas esticam igual e o mapa acompanha a
   altura da coluna de dados, do topo da lista até a base do botão. */
.local{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,4vw,3.5rem); }
.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); }
/* display:grid no invólucro dá altura definida ao iframe, que não tem
   object-fit e ignoraria um height:100% de pai sem altura resolvida.
   O min-height segura o celular, onde a linha do grid é automática. */
.local__mapa{ display:grid; border-radius:14px; overflow:hidden; border:1px solid var(--linha); }
.local__mapa iframe{ width:100%; height:100%; min-height:20rem; 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:600; 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); }

/* Seção com foto de fundo. É só apontar --foto para o arquivo e a seção
   inverte sozinha: o véu garante o contraste e o texto vira claro.
   Sem --foto definida, a seção continua exatamente como está hoje. */
.secao--foto{
  position:relative; isolation:isolate;
  background:var(--tinta) var(--foto, none) center / cover no-repeat;
  color:var(--papel);
}
.secao--foto::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(11,26,36,.9) 0%, rgba(11,26,36,.72) 45%, rgba(11,26,36,.35) 100%);
}
.secao--foto .etiqueta{ color:#DCC084; }
.secao--foto .titulo,
.secao--foto h2,
.secao--foto h3{ color:var(--papel); }
.secao--foto p,
.secao--foto li{ color:rgba(246,245,241,.9); }
.secao--foto .botao--principal{ background:var(--dourado); color:var(--tinta); }
.secao--foto .botao--principal:hover{ background:#C9AC71; }
.secao--foto .lista-marcada li::before{ background:var(--dourado); }

/* ------------------------------------------------------------------ agendar */
/* A mesma foto da capa fecha a página. O texto vai para a esquerda, sobre o
   céu: é o único lado onde há contraste sem precisar de camada por cima. */
.agendar{
  position:relative; isolation:isolate;
  background:#12232F url('assets/agendar.webp?v=9251160a') 88% center / cover no-repeat;
  color:var(--papel); padding-block:var(--secao); text-align:left;
}
/* Céu azul clareia perto do horizonte e a nota, que é texto pequeno, cai
   abaixo de 4.5. Degradê só na faixa do texto, morrendo em 58%. */
.agendar::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,
    rgba(9,24,33,.45) 0%,
    rgba(9,24,33,.22) 38%,
    rgba(9,24,33,0) 58%);
}
.agendar h2, .agendar p, .agendar__nota{ margin-inline:0; }
/* Sem tamanho próprio: este h2 estava em 44.8px enquanto todos os outros do
   site estão em 40px, e o bloco esticava 46px a mais para a direita. Agora
   segue a regra geral de h2 e o texto fecha mais cedo. */
/* Três linhas fixas, quebradas no HTML: "Vamos conversar / sobre o cuidado /
   de quem você ama." Sem teto de largura, senão o navegador quebra de novo
   por conta própria e some com a divisão. */
.agendar h2{ margin:0 0 1rem; max-width:none; font-size:clamp(2.1rem,4.2vw,3.2rem); }
/* Sobre a foto o branco a 85% cai para 3.6 na nota, que é texto pequeno.
   Opaco, sem transparência: medido 4.58 -> 5.4 no parágrafo e 3.62 -> 4.7 na nota. */
.agendar p{ margin:0 0 2rem; max-width:42ch; color:var(--papel); }
/* Mesmo dourado do botão da navbar e do botão da capa. */
.agendar .botao--principal{ background:var(--dourado); color:var(--tinta); }
.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. */
/* Botão do WhatsApp no canto inferior direito, em todos os tamanhos.
   Verde da marca do WhatsApp com texto escuro: branco sobre #25D366 dá 1.98,
   que é ilegível; o verde da paleta por cima dá 7.15 e mantém o verde
   reconhecível do app. */
.flutuante{
  position:fixed; right:clamp(1rem,2vw,1.75rem); bottom:clamp(1rem,2vw,1.75rem); z-index:45;
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:54px; padding:0 1.35rem;
  background:#25D366; color:#0B2F1C;
  border-radius:999px; text-decoration:none;
  font-weight:600; font-size:1rem;
  opacity:0; pointer-events:none;          /* nasce escondido; o JS decide */
  transition:opacity .3s ease, transform .3s var(--curva), background-color .2s;
}
.flutuante:hover{ background:#1FBE5B; transform:translateY(-2px); }

/* --------------------------------------------------------------- domiciliar */
/* Metade da TELA para cada lado: a foto sangra até a borda direita, sem
   respeitar o container. O texto continua alinhado com o resto do site,
   por um padding calculado a partir do mesmo container. */
/* Sem padding na seção: a foto precisa encostar no topo e na base. O respiro
   vertical passa a ser do texto, que é quem precisa dele. */
#domiciliar{ padding:0; overflow:clip; }
.domiciliar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.domiciliar__texto{
  max-width:none;
  padding-block:var(--secao);
  /* mesma coluna do resto do site: metade da tela menos metade do container,
     mais o respiro interno dele */
  padding-left:max(var(--respiro), calc((100vw - var(--largura)) / 2 + var(--respiro)));
  padding-right:clamp(1.5rem,4vw,3.5rem);
}
.domiciliar__texto > *{ max-width:34rem; }

.domiciliar__foto{ margin:0; height:100%; }
.domiciliar__foto img{
  width:100%; height:100%;
  min-height:clamp(24rem,42vw,34rem);
  object-fit:cover;
}
.lista-marcada{ display:grid; gap:.9rem; }
.lista-marcada li{
  position:relative; padding-left:1.7rem;
  color:var(--tinta-suave);
}
/* Seta no lugar da bolinha: mesma direção do botão logo abaixo. Máscara e não
   <img>, para a cor sair da variável e acompanhar o tema da seção. */
.lista-marcada li::before{
  content:''; position:absolute; left:0; top:.28em;
  width:1.05rem; height:1.05rem;
  background:var(--dourado);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Estes dois espaçamentos moravam em style="" no HTML e sumiam: o reveal
   roda gsap clearProps:'all' no fim e limpa o atributo inteiro. Regra no CSS
   não é apagada. */
.domiciliar__texto .apoio{ margin-bottom:1.25rem; }
.domiciliar__texto .apoio + .apoio{ margin-bottom:2rem; }
.domiciliar__texto .botao{ margin-top:2.75rem; }


/* ------------------------------------------------------- botão 004 (Osmo) */
/* No hover as letras do rótulo caem girando e uma segunda cópia sobe do
   fundo. As duas cópias ocupam a mesma célula do grid: o botão não muda de
   tamanho e o texto não empurra a seta. */
.botao-004__inner{
  display:grid; line-height:1;
}
.botao-004__texto{
  grid-area:1/1;
  perspective:10em; transform-style:preserve-3d;
  white-space:pre;
}
.botao-004__char{
  --base-atraso:.05s;
  --extra:.28s;
  --t:calc(var(--index) / max(var(--max-index), 1));
  --atraso:calc(var(--base-atraso) + var(--t) * var(--extra));
  --giro-curva:sin(calc(var(--t) * 30deg));
  --giro-sinal:clamp(-1, var(--signed-index), 1);
  --giro-max:36deg;
  display:inline-block;
}
.botao-004__texto.is--base .botao-004__char{
  transition:transform .325s var(--curva-004), translate .425s var(--curva-004),
             rotate .45s var(--curva-004), opacity .15s ease-out;
}
.botao-004__texto.is--hover .botao-004__char{
  transition:transform .35s var(--curva-004), translate .35s var(--curva-004),
             rotate .35s var(--curva-004), opacity .15s .1s ease-out;
  rotate:1 0 0 -72deg;
  transform:rotateZ(calc(var(--giro-sinal) * var(--giro-curva) * var(--giro-max) * -1)) scale(.65);
  translate:calc(var(--signed-index) * .125em) 1.25em 0;
  opacity:0;
}

/* Só onde existe ponteiro de verdade e sem preferência por menos movimento. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .botao-004__char{ will-change:transform, translate, rotate, opacity; }

  :is(.botao, .nav__cta, .nav__cartao-cta, .flutuante):is(:hover, :focus-visible)
    .botao-004__texto.is--base .botao-004__char{
    translate:calc(var(--signed-index) * .125em) -1.25em 0;
    rotate:1 0 0 72deg;
    transform:rotateZ(calc(var(--giro-sinal) * var(--giro-curva) * var(--giro-max) * -1)) scale(.65);
    opacity:0;
    transition:transform .35s var(--atraso) var(--curva-004),
               translate .35s var(--atraso) var(--curva-004),
               rotate .35s var(--atraso) var(--curva-004),
               opacity .15s calc(var(--atraso) + .1s) ease-out;
  }
  :is(.botao, .nav__cta, .nav__cartao-cta, .flutuante):is(:hover, :focus-visible)
    .botao-004__texto.is--hover .botao-004__char{
    translate:0 0 0; rotate:1 0 0 0deg;
    transform:rotateZ(0deg) scale(1); opacity:1;
    transition:transform .325s calc(var(--atraso) + .05s) var(--curva-004),
               translate .425s calc(var(--atraso) + .05s) var(--curva-004),
               rotate .45s calc(var(--atraso) + .05s) var(--curva-004),
               opacity .15s calc(var(--atraso) + .075s) ease-out;
  }
}

/* ------------------------------------------------------------------ mobile */


/* As regras responsivas ficam no fim do arquivo de propósito: qualquer
   regra solta escrita depois delas as desfaria em silêncio, por vir
   depois na cascata. */
@media (max-width:1200px){
  /* --------------------------------------------------- navegação no celular */
  .nav__bar{ border-radius:0; }
  .nav__start{ justify-content:space-between; }
  .nav__logo{ margin-right:0; }
  .nav__logo img{ height:38px; }   /* mesma altura do desktop: no celular ela ficava pequena demais */
  /* backdrop-filter cria bloco de contenção: com ele na barra, o
     position:fixed do menu passava a valer dentro da barra e o menu abria com
     68px de altura em vez da tela inteira. No celular a barra é chapada. */
  .nav__bar,
  .nav[data-hero] .nav__bar{
    background:rgba(21,48,37,.96);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:none;
  }

  .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(--tinta);
    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 rgba(237,236,230,.14);
  }
  .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(--tinta); overflow:auto; }
  .nav__panel-inner{ flex-direction:column; }
  .nav__col{ border-right:0; border-bottom:1px solid rgba(237,236,230,.14); padding:1.5rem 1.25rem; }
  .nav__col.is--destaque{ border-radius:0; }
  .nav__cartao-foto{ display:none; }
  .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; }
  .sobre__foto{ order:0; }
  .capa{
    background-image:url('assets/hero-p.webp?v=3f946e5f');
    /* A foto já vem na proporção do celular (0.463). Empurrada 70px para
       baixo: o fundo dela é chapado e igual ao da seção, então a faixa que
       sobra em cima não tem emenda visível. */
    background-size:100% auto;
    background-position:center bottom -70px;
  }
  /* 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á. */
  .capa__veu{ background:none; }   /* sem opacidade por cima da foto no celular */
  /* Mesma história da capa no retrato: o corte joga o texto sobre o cabelo
     branco. O véu volta só aqui, na versão estreita da foto. */
  .agendar{
    background-image:url('assets/agendar-p.webp?v=50a069b7');
    background-position:72% center;
  }
  .agendar::before{
    background:linear-gradient(180deg,
      rgba(8,22,16,.55) 0%,
      rgba(8,22,16,.80) 40%,
      rgba(8,22,16,.92) 100%);
  }
  /* No celular o conteúdo sobe: encosta na barra com 50px de respiro em vez
     de ficar centralizado no meio da foto. */
  .capa{
    padding-block:calc(var(--nav-altura) + 30px) 2.5rem;   /* 50px -40% */
    align-items:flex-start;
    min-height:100svh;
  }
  .capa__interno{ margin-block:0; }
  .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:1.75rem; }
  .capa h1{ margin-bottom:.75rem; }
  /* Os dois lado a lado: cada um pega metade da linha e o rótulo encolhe até
     caber, em vez de empilhar. */
  .capa__acoes{
    gap:.6rem; flex-wrap:nowrap;
  }
  .capa__acoes .botao{
    flex:1 1 0; min-width:0; padding-inline:.75rem;
    font-size:.95rem; white-space:nowrap;
  }
  .passos li{ grid-template-columns:1fr; gap:.75rem; }
  .faq-bloco{ grid-template-columns:1fr; }
  .domiciliar{ grid-template-columns:1fr; }
  .domiciliar__foto{ order:-1; height:auto; }
  .domiciliar__foto img{ min-height:0; aspect-ratio:16/11; }
  .domiciliar__texto{ padding-inline:var(--respiro); }
  /* Só no celular: do "Sinal 01" para baixo o branco muda um tom e ganha fio
     em cima e embaixo, para separar do bloco de introdução. No desktop os
     cartões atravessam essa borda e o corte fica estranho. */
  .passos-lista{
    gap:4.5rem; padding-block:2.5rem;
    margin-inline:calc(50% - 50vw);
    padding-inline:var(--respiro);
    margin-top:2.5rem;
    background:var(--papel-2);
    border-block:1px solid var(--linha);
  }
  #consulta, #duvidas{ border-top:1px solid var(--linha); }
  .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; }
  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; }
}


@media (min-width:900px){
}