/* =========================================================
   LP Dr. Marcelo — esqueleto v0
   Linha: base Neurona, azul escuro contrastando com blocos claros.
   Stack da casa: CSS à mão, custom properties, sem framework.
   Placeholders neuronais marcados com .neuro-glow / comentários.
   ========================================================= */

:root {
  /* Paleta — azul escuro (navy) + claro para legibilidade + acento neuro */
  --navy-900: #071324;   /* fundo escuro mais profundo */
  --navy-800: #0b1e38;   /* fundo escuro padrão */
  --navy-700: #122c4f;   /* cartões sobre escuro */
  --claro:    #eef3f9;   /* fundo das seções claras */
  --branco:   #ffffff;
  --azul-eletrico: #3ea1ff;  /* acento neuro sobre fundo escuro (brilho, links, botões) */
  --azul-marca:    #0069fe;  /* azul do degradê da logo — usado sobre fundo claro */
  --ciano:    #7fe3ff;

  --txt-claro:  #e9f0fa;   /* texto sobre escuro */
  --txt-suave:  #9db4d2;   /* secundário sobre escuro */
  --txt-escuro: #0e2038;   /* texto sobre claro */
  --txt-escuro-suave: #45607f;

  /* Escada de texto sobre branco: passos regulares de L* (12 / 27 / 42 / 47),
     dessaturando conforme clareia. Antes os passos eram 6, 28 e 0: o título e o
     lead tinham quase a mesma escuridão e a identificação era idêntica ao apoio.
     Todos passam AA (16,4 · 10,4 · 6,0 · 5,0). */
  --tinta-1: #0a203a;   /* título */
  --tinta-2: #244165;   /* lead */
  --tinta-3: #496588;   /* apoio */
  --tinta-4: #597191;   /* identificação CFM */

  /* Tipografia — escala modular 1,25 (terça maior), base 16px */
  /* Uma família só, como a logo (sans geométrica). Georgia era placeholder do
     esqueleto e somava uma terceira voz ao hero. Enquanto não há subset
     auto-hospedado, a pilha de sistema é a opção que o modelo-lp permite. */
  --fonte-titulo: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --fonte-corpo:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  /* Escala FLUIDA e não uniforme. A antiga era 1,25 constante, e 1,25 é razão de
     UI densa: aplicada a uma página de marketing ela achata o topo (h1 e h2 quase
     do mesmo tamanho) e some com o miolo. Aqui o passo cresce em direção ao
     display (1,13 no corpo, 1,40 no h1) e o tamanho acompanha a viewport, em vez
     de saltar no breakpoint. */
  --t-xs:   clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem);   /* 13 -> 14 */
  --t-sm:   clamp(0.875rem,  0.85rem + 0.11vw, 0.9375rem);  /* 14 -> 15 */
  --t-base: clamp(1rem,      0.98rem + 0.11vw, 1.0625rem);  /* 16 -> 17 */
  --t-md:   clamp(1.0625rem, 1rem    + 0.25vw, 1.25rem);    /* 17 -> 20 */
  --t-lg:   clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);     /* 19 -> 24 */
  --t-xl:   clamp(1.375rem,  1.15rem + 0.9vw,  1.875rem);   /* 22 -> 30 */
  --t-2xl:  clamp(1.75rem,   1.35rem + 1.6vw,  2.5rem);     /* 28 -> 40 */
  --t-3xl:  clamp(2.25rem,   1.6rem  + 2.6vw,  3.5rem);     /* 36 -> 56 */

  /* Espaçamento — grade 8pt, com os meios-passos de 4pt declarados
     (Material/Apple HIG: base 4, ritmo 8). Nada de valor solto fora daqui. */
  --s-05: 4px; --s-1: 8px; --s-15: 12px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px;

  --calha: var(--s-3);   /* calha única de todas as grades */
  /* respiro de seção fluido: 56px no celular, 112px no desktop, sem degrau */
  --s-secao: clamp(3.5rem, 2rem + 6vw, 7rem);
  /* Teto de medida. A unidade ch mede o glifo "0", que e' mais largo que a media
     das minusculas: 65ch deixava passar 84 caracteres reais. 55ch da ~71. */
  --medida: 55ch;
  /* degradê marinho da casa: um lugar só, usado pelo fundo do hero, pelo H1 e
     pelo CTA. Se mudar aqui, muda nos três. */
  --degrade-marinho: linear-gradient(155deg, #122c4f 0%, #0b1e38 45%, #071324 100%);
  --wrap: 1136px;        /* 142 x 8 */
  --radio: var(--s-2);

  /* Canais RGB da paleta, para transparência sem repetir o número:
     rgb(var(--ciano-rgb) / .3) no lugar de rgb(var(--ciano-rgb) / .3).
     Isto também mata uma deriva que já existia — o ciano aparecia como 126 em
     dez lugares e o token --ciano é #7fe3ff, que é 127. */
  --ciano-rgb:      127 227 255;
  --eletrico-rgb:    62 161 255;
  --marca-rgb:        0 105 254;
  --navy-900-rgb:     7  19  36;
  --navy-800-rgb:    11  30  56;
  --navy-700-rgb:    18  44  79;
  /* Dois marinhos de sombra que não estão na paleta, um para cada tipo de fundo. */
  --sombra-escura-rgb:  2 10 22;
  --sombra-clara-rgb:  24 52 84;

  /* Alvo mínimo de toque. 44px é o piso do Apple HIG e o mínimo confortável do
     Material; não é número solto. Não confundir com o 44px do drop-shadow da
     figura do hero, que é raio de desfoque e coincidência. */
  --toque: 44px;

  /* Cor dos botões de conversão sobre fundo claro (.btn-primary). É o único
     ponto que o cliente troca pelo CMS; o valor real chega por um <style> no
     topo da página, e este aqui é só a rede se ele não chegar.
     As duas derivadas existem para o degradê e o brilho acompanharem a troca.
     93/80 e não 50/50: mistura forte apaga a cor escolhida e o botão vira
     cinza-colorido em vez de ficar com relevo. */
  --btn-cor: #0b1e38;
  --btn-luz: color-mix(in srgb, var(--btn-cor) 93%, #fff);
  --btn-esc: color-mix(in srgb, var(--btn-cor) 80%, #000);

  /* Único z-index global da folha: o cabeçalho fixo. Todos os outros valores
     aqui são LOCAIS, dentro de um isolation:isolate, e por isso NÃO viram
     escala — comparar o 3 do carrossel com o 2 do hero não significa nada. */
  --z-cabecalho: 20;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  line-height: 1.5;              /* 16 x 1,5 = 24px: o corpo cai na baseline de 8pt */
  color: var(--txt-escuro);
  background: var(--navy-800);
}
/* height:auto e obrigatorio: sem ele o atributo height="" do HTML vira altura
   definida e anula qualquer aspect-ratio do CSS (foi o que esticou o hero). */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.15; font-weight: 600; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-3); }
.center { text-align: center; }

/* ---- ritmo de seções: escuro x claro ---- */
/* Mesmo degradê marinho do hero, para as seções escuras não lerem como um azul
   diferente do resto da página. Nenhuma seção escura é vizinha de outra, então
   o degradê não reinicia à vista e não cria emenda. */
.section-dark  { background: var(--degrade-marinho); color: var(--txt-claro); padding: var(--s-secao) 0; }

/* A rede neural era o gráfico de assinatura do site e aparecia só no hero, nos
   primeiros 780px. Aqui ela volta como textura nas duas seções escuras. Custa
   ZERO requisição: é o mesmo arquivo que o hero já baixou, servido do cache.
   isolation:isolate cria o contexto de empilhamento para o z-index:-1 ficar
   acima do fundo da seção e abaixo do conteúdo — sem isso ele some atrás.
   Cada seção mostra um pedaço diferente (posição + espelhamento) para não ler
   como o mesmo papel de parede repetido. */
#casos, #agendar { position: relative; isolation: isolate; overflow: hidden; }

/* O marinho ocupa a tela inteira. O conteúdo continua sendo o mesmo — a altura
   extra vira folga distribuída pelo justify-content, não espaço morto no rodapé
   da seção. O recuo de topo não desce abaixo da altura do cabeçalho grudento:
   sem isso, ao ancorar em #casos o título ficaria por baixo dele. */
#casos, #agendar {
  min-height: 100vh;
  /* svh = altura da viewport com a barra do navegador VISÍVEL. No iOS, 100vh
     conta a barra que some ao rolar, então a seção ficaria mais alta que a área
     realmente visível. A linha acima é o recuo para quem não conhece svh. */
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: max(var(--s-secao), 96px);
}
/* .wrap tem margin: 0 auto, e margem automática no eixo cruzado de um flex
   container CANCELA o stretch — o wrap encolhia para o tamanho do conteúdo.
   Com isso o auto-fit da jornada caía de 4 para 2 colunas e os nós viravam 2x2.
   Largura explícita devolve a faixa inteira; o max-width do .wrap segue
   centralizando o conteúdo como antes. */
#casos > *, #agendar > * { width: 100%; }
#casos::before, #agendar::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* sangra 10% para fora: a deriva nunca revela borda do quadro */
  inset: -10%;
  background: url("img/rede-neural.webp") center / cover no-repeat;
  opacity: .20;
  /* Esmaece nas bordas para não brigar com a emenda das seções vizinhas. As
     paradas contam a sangria: a camada é 120% da seção, então a seção ocupa o
     miolo (8%–92%) e o esmaecimento tem que cair dentro dessa faixa, não nas
     bordas da camada — que estão fora da tela. */
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 25%, #000 75%, transparent 92%);
          mask-image: linear-gradient(180deg, transparent 8%, #000 25%, #000 75%, transparent 92%);
  /* Deriva submarina: três quadros e ease-in-out em alternate, então o ciclo
     real é o dobro e nunca cai numa cadência óbvia. Só transform — composita,
     não repinta. O espelhamento do #agendar entrou nos quadros porque animar
     transform sobrescreveria um scaleX(-1) declarado à parte. */
  animation: deriva-fundo 52s ease-in-out infinite alternate;
}
#agendar::before {
  background-position: 28% 68%; opacity: .15;
  animation: deriva-fundo-espelho 67s ease-in-out infinite alternate;
}
@keyframes deriva-fundo {
  0%   { transform: translate3d(-1.6%, -1.1%, 0) scale(1.03); }
  50%  { transform: translate3d( 1.8%,  1.4%, 0) scale(1.07); }
  100% { transform: translate3d(-1.1%,  2.1%, 0) scale(1.04); }
}
@keyframes deriva-fundo-espelho {
  0%   { transform: scaleX(-1) translate3d( 1.4%,  1.6%, 0) scale(1.04); }
  50%  { transform: scaleX(-1) translate3d(-1.9%, -1.2%, 0) scale(1.08); }
  100% { transform: scaleX(-1) translate3d( 1.2%, -2.0%, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  #casos::before, #agendar::before { animation: none; }
}
/* Fundo claro em degradê: branco no topo, esfriando para o azul da paleta em
   baixo. Duas camadas — um brilho radial frio no alto à direita, e a base
   vertical. Fundo chapado ao lado de seções marinho lê como papel; o degradê
   dá profundidade sem custar contraste (o texto continua sobre L* alto). */
.section-light {
  color: var(--txt-escuro); padding: var(--s-secao) 0;
  background:
    radial-gradient(90% 60% at 82% 0%, rgb(var(--eletrico-rgb) / .10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--claro) 52%, #e3ebf5 100%);
}
.section-dark h2, .section-light h2 { font-size: var(--t-2xl); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 var(--s-2); max-width: 22ch; }
.section-intro { max-width: var(--medida); font-size: var(--t-md); line-height: 1.45; margin: 0 0 var(--s-8); color: var(--txt-suave); }
.section-light .section-intro { color: var(--txt-escuro-suave); }

/* ---- botões ---- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 600;
  padding: var(--s-15) var(--s-3); border-radius: 999px; font-family: var(--fonte-corpo);
  transition: transform .15s ease, box-shadow .15s ease;
}
/* Degradê marinho com brilho: era override só do hero, e o CTA de "como agendar"
   ficava azul chapado — os dois botões de conversão da página não combinavam.
   Promovido para o componente; o hero deixa de precisar da exceção. */
/* Botão de conversão sobre fundo claro. É o ÚNICO que o CMS recolore, e a cor
   entra por --btn-cor (ver o bloco no topo do index.php).
   Tudo aqui deriva dessa cor, inclusive o brilho: se o halo continuasse azul
   fixo, uma troca para verde deixaria o botão com duas cores brigando.
   A cor chapada vem antes do degradê de propósito — é o que sobra se um
   navegador antigo não entender color-mix, em vez de botão transparente. */
.btn-primary {
  color: #fff;
  background: var(--btn-cor);
  background: linear-gradient(155deg, var(--btn-luz) 0%, var(--btn-cor) 45%, var(--btn-esc) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--btn-luz) 62%, transparent),
              0 8px 26px -6px color-mix(in srgb, var(--btn-cor) 55%, transparent),
              0 0 36px -4px color-mix(in srgb, var(--btn-luz) 45%, transparent);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--btn-luz) 78%, transparent),
              0 12px 32px -6px color-mix(in srgb, var(--btn-cor) 68%, transparent),
              0 0 48px -4px color-mix(in srgb, var(--btn-luz) 62%, transparent);
}
.btn-branco { background: var(--branco); color: var(--navy-900); box-shadow: 0 6px 22px rgba(6,18,34,.45); }
.btn-branco:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,255,255,.28); }
.btn-lg { padding: var(--s-2) var(--s-4); font-size: var(--t-md); }

/* ================= HEADER ================= */
.site-header {
  position: sticky; top: 0; z-index: var(--z-cabecalho);
  background: rgb(var(--navy-900-rgb) / .85); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(var(--ciano-rgb) / .12);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); padding-bottom: var(--s-2); }

/* marca: simbolo em mono (branco) + nome na horizontal, sem subtitulo */
.brand { display: flex; align-items: center; gap: var(--s-2); color: var(--branco); text-decoration: none; min-width: 0; min-height: var(--toque); }
.brand-marca { height: var(--s-4); width: auto; display: block; flex: none; }  /* herda color: fill=currentColor */
/* em tela muito estreita o nome corta com reticencias em vez de estourar o header */
.brand-nome { font-weight: 600; font-size: var(--t-md); line-height: 1; white-space: nowrap; letter-spacing: .2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.nav { display: flex; gap: var(--s-4); }
.nav a { color: var(--txt-claro); text-decoration: none; font-size: var(--t-base); opacity: .85;
  display: flex; align-items: center; min-height: var(--toque); }
.nav a:hover { opacity: 1; color: var(--ciano); }

/* rotulo curto do CTA no celular (mesmo padrao da pagina do Paulo) */
.header-inner .btn { flex: none; white-space: nowrap; }
.cta-curto { display: none; }

/* ---- botao do menu (so existe no celular; as regras de exibicao estao no
        bloco responsivo, junto com o painel que ele abre) ---- */
.menu-toggle {
  display: none; flex: none; position: relative;   /* ancora dos tres riscos */
  width: var(--toque); height: var(--toque);
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--txt-claro);
}
.menu-toggle:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; border-radius: var(--s-05); }
/* Tres riscos com um elemento so: o do meio e' o proprio span, os de fora sao
   os pseudos. Ao abrir, o do meio some e os de fora giram para formar o X. */
.menu-risco, .menu-risco::before, .menu-risco::after {
  content: ""; position: absolute;
  width: 22px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .18s ease;
}
.menu-risco::before { transform: translateY(-7px); }
.menu-risco::after  { transform: translateY( 7px); }
.menu-toggle[aria-expanded="true"] .menu-risco          { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-risco::before  { transform: rotate(45deg); opacity: 1; }
.menu-toggle[aria-expanded="true"] .menu-risco::after   { transform: rotate(-45deg); opacity: 1; }

/* ================= HERO ================= */
/* Layout Neurona: a seção é partida ao meio de ponta a ponta.
   Esquerda branca (texto), direita azul marinho em degradê (foto).
   Duas camadas de background: o degradê ocupa só os 50% da direita, o branco é a base.
   Isso substitui o split φ — decisão do fundador, 2026-08-01. */
.hero {
  position: relative; overflow: hidden;
  padding: var(--s-12) 0;
  background: var(--degrade-marinho) right center / 50% 100% no-repeat, var(--branco);
  color: var(--txt-escuro);
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
/* Uma voz só. O H1 estava em Georgia e o resto em sans, o que somava três vozes
   com a sans geométrica da logo. A hierarquia vem de peso, tamanho e tinta.
   Entrelinhas escolhidas para cair na baseline de 8pt: 56 / 32 / 24 / 16. */
.hero h1 {
  font-family: var(--fonte-corpo); font-weight: 700; font-size: var(--t-3xl);
  line-height: 1.148;                 /* 48,8 x 1,148 = 56px */
  letter-spacing: -.022em;            /* display grande pede tracking negativo */
  color: var(--tinta-1); margin: 0 0 var(--s-3);
}
/* preenche o H1 com o degradê do fundo. O @supports protege: sem
   background-clip, a cor chapada acima continua valendo e o título não some. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background: var(--degrade-marinho);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}
.hero .lead {
  font-size: var(--t-lg); font-weight: 400; line-height: 1.28;   /* 25 x 1,28 = 32px */
  letter-spacing: -.006em; color: var(--tinta-2); margin: 0 0 var(--s-2);
}
.hero .lead-2 { font-size: var(--t-base); line-height: 1.5; color: var(--tinta-3); margin: 0 0 var(--s-4); }
/* Passou para depois do CTA: virou rodapé do hero, não degrau antes do botão.
   Margem migra de baixo para cima, e maior que o vão que a copy tem até o botão
   (32px), para a linha do CFM ler como registro solto e não como parte da copy. */
.hero .ident {
  font-size: var(--t-sm); line-height: 1.25; color: var(--tinta-4);
  letter-spacing: .01em; margin: var(--s-6) 0 0; max-width: 46ch;
}
/* (O CTA com degradê e brilho virou regra de .btn-primary, lá em cima: era
   exceção do hero e deixava o botão de "como agendar" fora do padrão.) */

/* ---- camada da rede neural (metade direita) ----
   O WebP já traz o marinho embutido: com canal alfa o mesmo render dava 370KB,
   sem alfa dá 69KB. O degradê do CSS fica embaixo como base enquanto carrega. */
/* ---- painel branco em relevo ----
   Vira plano próprio, avança 2% sobre a metade marinho e projeta sombra para a
   direita e para baixo. É o avanço + a sombra caindo SOBRE o marinho que dizem
   "este plano está na frente"; borda dura sozinha só divide, não eleva.
   Camadas do hero: rede 0 · painel 1 · médico 2 · conteúdo 3.
   O overflow:hidden do hero corta a sombra na borda inferior, então ela para
   onde a faixa animada começa. */
.hero-painel {
  position: absolute; top: 0; bottom: 0; left: 0; right: 48%;
  z-index: 1; background: var(--branco);
  border-radius: 0 var(--s-3) var(--s-3) 0;
  box-shadow: 30px 16px 60px -26px rgb(var(--sombra-escura-rgb) / .70),
              10px 0 24px -14px rgb(var(--sombra-escura-rgb) / .45);
}
/* fio de luz na quina: é o que dá a espessura do plano */
.hero-painel::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85) 18%, rgba(255,255,255,.85) 82%, rgba(255,255,255,0));
}
.hero-rede { position: absolute; inset: 0 0 0 50%; z-index: 0; overflow: hidden; }
/* Camada da rede: parada e fosca (2026-08-05, pedido do Aledi).
   Saíram daqui a deriva de dois níveis (29s/41s) e as 38 sinapses em SVG.
   O que sobrou é o render do Blender como textura.

   Como se faz "fosco" sem outra imagem: a saturação cai (o ciano do render era
   a parte que gritava), o contraste cai (matiz brilhante vira matiz de fundo) e
   um desfoque de menos de um pixel tira o fio duro do traço. A opacidade baixa
   deixa o degradê marinho do .hero aparecer por baixo e é ela que faz a rede
   virar papel de parede em vez de ilustração.

   A sangria de 3% existe por causa do blur: sem ela, o desfoque come a borda da
   camada e aparece uma faixa mais clara encostada no painel branco. */
.rede-fundo {
  position: absolute; inset: -3%;
  background: url("img/rede-neural.webp") center / cover no-repeat;
  opacity: .30;
  filter: saturate(.4) contrast(.85) brightness(.92) blur(.7px);
}

/* o conteúdo tem que ficar por cima da camada da rede */
.hero > .wrap { position: relative; z-index: 3; }

/* piso de altura para a figura ter presença: sem isso o hero mede só o texto
   e o médico encolhe junto */
.hero { min-height: 780px; }
.hero-visual { position: relative; display: grid; place-items: center; }
/* Figura do médico: camada própria sobre a metade direita inteira, ancorada na
   base. O recorte já encosta no rodapé da imagem e traz 16% de respiro acima da
   cabeça, então preencher a altura o deixa apoiado, não flutuando. */
.hero-figura {
  position: absolute; top: 0; right: 0; bottom: 0; left: 52%;
  z-index: 2; display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.hero-figura img {
  height: 100%; width: auto; max-width: 100%; display: block;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 18px 44px rgba(2, 8, 18, .55));
}
/* a coluna direita do grid vira espaçador: segura o texto na metade esquerda */
.hero-visual { position: relative; }
/* PLACEHOLDER neuronal — brilho/eletricidade a alocar */
.neuro-glow {
  position: absolute; inset: -10% ; z-index: 1;
  background: radial-gradient(circle at 50% 45%, rgb(var(--eletrico-rgb) / .55), rgb(var(--eletrico-rgb) / .12) 45%, transparent 70%);
  filter: blur(10px);
}

/* ================= FAIXA ANIMADA (transição do hero) =================
   Mesmo mecanismo da página do Paulo: pista em inline-flex com o conteúdo
   duplicado, andando -50%. A segunda cópia entra onde a primeira sai, então
   o loop não tem emenda. Só transform, logo roda no compositor.
   Paleta trocada: marinho mais profundo que o do hero, para a faixa fechar a
   dobra em vez de se dissolver nela. */
.marquee {
  overflow: hidden;
  background: var(--navy-900);
  border-top: 1px solid rgb(var(--ciano-rgb) / .16);
  border-bottom: 1px solid rgb(var(--ciano-rgb) / .10);
  /* esmaece nas pontas: sem isso o texto nasce e morre com corte seco na borda */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: var(--s-3) 0;
  animation: mq 62s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* dois registros, separados por peso, caixa e cor (não por família:
   a página tem uma voz tipográfica só) */
.mq-item {
  font-size: var(--t-md); color: var(--txt-claro); letter-spacing: -.005em;
}
.mq-item.cred {
  font-size: var(--t-sm); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: var(--ciano);
}
.mq-sep {
  width: 5px; height: 5px; flex: none; transform: rotate(45deg);
  background: var(--azul-eletrico); opacity: .55; margin: 0 var(--s-6);
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ================= DIFERENCIAIS ================= */
/* Colunas por MEDIDA, não por simetria. Quatro colunas em 1088px davam 254px,
   que é 23 caracteres por linha: metade do piso confortável. O minmax faz o
   número de colunas cair sozinho até o texto caber, sem breakpoint. */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--calha); }
/* Cartão com relevo: três sombras em distâncias diferentes. Uma sombra só, larga,
   lê como borrão; empilhar contato + média + longa é o que dá a sensação de
   objeto apoiado. */
.pilar {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid rgba(148,178,208,.30);
  border-radius: var(--radio);
  padding: var(--s-4);
  box-shadow:
    0 1px 2px  rgb(var(--sombra-clara-rgb) / .05),
    0 4px 10px -4px rgb(var(--sombra-clara-rgb) / .09),
    0 16px 32px -14px rgb(var(--sombra-clara-rgb) / .12);
  transition: transform .28s cubic-bezier(.2,.7,.3,1),
              box-shadow .28s cubic-bezier(.2,.7,.3,1),
              border-color .28s ease;
}
/* fio azul que corre da esquerda para a direita ao passar o mouse */
.pilar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--navy-700), var(--navy-900));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .42s cubic-bezier(.2,.7,.3,1);
}
/* brilho frio que acende no canto, atrás do texto */
.pilar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 78% at 82% 0%, rgb(var(--navy-800-rgb) / .11), transparent 62%);
  opacity: 0; transition: opacity .42s ease;
}
.pilar:hover, .pilar:focus-within {
  transform: translateY(-4px);
  border-color: rgb(var(--navy-700-rgb) / .45);
  box-shadow:
    0 2px 4px  rgb(var(--sombra-clara-rgb) / .06),
    0 10px 22px -8px rgb(var(--sombra-clara-rgb) / .13),
    0 28px 54px -18px rgba(20,60,110,.22);
}
.pilar:hover::before, .pilar:focus-within::before { transform: scaleX(1); }
.pilar:hover::after,  .pilar:focus-within::after  { opacity: 1; }

/* ícone: repousa em tinta sobre fundo lavado; no hover vira o degradê marinho */
.pilar-icone {
  position: relative; display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 0 var(--s-3);
  border-radius: var(--s-15);
  color: var(--navy-800);
  background: linear-gradient(180deg, rgb(var(--navy-800-rgb) / .075), rgb(var(--navy-800-rgb) / .025));
  border: 1px solid rgb(var(--navy-700-rgb) / .16);
  transition: color .42s ease, background .42s ease,
              border-color .42s ease, box-shadow .42s ease;
}
.pilar-icone svg {
  width: 26px; height: 26px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.pilar:hover .pilar-icone, .pilar:focus-within .pilar-icone {
  color: #fff;
  background: var(--degrade-marinho);
  border-color: rgb(var(--navy-900-rgb) / .55);
  box-shadow: 0 8px 18px -8px rgb(var(--navy-900-rgb) / .55);
}

.pilar h3 { position: relative; font-size: var(--t-md); margin: 0 0 var(--s-1); color: var(--tinta-1); }
.pilar p  { position: relative; margin: 0; color: var(--tinta-3); font-size: var(--t-base); }

/* quem pediu menos movimento recebe o relevo, não o deslocamento */
@media (prefers-reduced-motion: reduce) {
  .pilar, .pilar::before, .pilar::after, .pilar-icone { transition: none; }
  .pilar:hover, .pilar:focus-within { transform: none; }
}

/* ================= CASOS — carrossel com vizinhos desfocados =================
   Portado da LP do Dr. Paulo (#quando), que é a referência da casa para isto.
   Duas coisas fazem o efeito, e a segunda é a menos óbvia:
     1. o card centrado está em foco e os vizinhos levam blur + opacidade + escala;
     2. a PROPORÇÃO do card. Lá é 1,43:1; aqui era 2,55:1 — um letterbox, e essa
        era a maior razão de parecer mais pobre, mais do que qualquer efeito.
   --slide em vw e não em %: como flex-basis, a % resolveria contra a caixa de
   conteúdo da pista e ficaria circular se a pista tivesse padding lateral. */
.carousel { position: relative; }

/* A seção inteira precisa caber numa dobra. O custo fixo (respiros da seção,
   margem do intro, folga da pista e da navegação) foi cortado primeiro; só
   depois o card, que é o que importa. Com o custo fixo em ~375px, a altura do
   card vira o que sobra da viewport — daí o calc com vh em vez de número fixo. */
#casos { --s-secao: clamp(2rem, 1rem + 2.6vw, 3rem); }
#casos .section-intro { margin-bottom: var(--s-4); }

/* A altura manda e a largura segue, com teto de proporção. Sem esse teto, tela
   baixa devolvia um card 2,39:1 — o letterbox que a proporção do Paulo veio
   corrigir. O piso de 600px protege a medida do texto: abaixo disso a coluna
   fica estreita, o texto quebra em mais linhas e a altura volta a crescer. */
.casos-carrossel {
  --alt-card: clamp(390px, calc(100vh - 430px), 610px);
  --slide: clamp(650px, min(68vw, calc(var(--alt-card) * 1.72)), 930px);
}
.carousel-track {
  /* position:relative é funcional, não decorativo: torna a pista o offsetParent
     dos cards, e só assim o offsetLeft deles é a própria coordenada de rolagem
     que o script usa para centralizar. Sem isso a conta sai deslocada.
     Sem padding lateral: com laço infinito sempre existe card dos dois lados,
     então recuo de ponta é desnecessário — e desloca a centralização. */
  position: relative;
  display: flex; gap: var(--s-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scroll-behavior: smooth;
  padding: var(--s-1) 0 var(--s-2);
  scrollbar-width: none; cursor: grab;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--ciano); outline-offset: 4px; }
.carousel-track.dragging {
  scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none;
}

.caso-card {
  flex: 0 0 var(--slide); scroll-snap-align: center;
  display: grid; grid-template-columns: .82fr 1.18fr;
  min-height: var(--alt-card, 560px);
  background: linear-gradient(180deg, #ffffff 0%, #f6fafd 100%);
  border: 1px solid rgba(160,190,220,.22);
  border-radius: var(--s-3); overflow: hidden;
  /* profundidade de campo: só o card centrado está em foco. Vizinho desfocado lê
     como plano de fundo; vizinho nítido cortado pela borda lê como erro.
     A escala é o que faz o centrado parecer maior sem mudar o layout — transform
     não afeta a caixa, então o scroll-snap continua medindo todos igual.
     A classe .is-center é pintada pelo script.js.

     O apagamento do vizinho é VÉU (::after opaco), não opacity no card. Com
     opacity o card fica translúcido e a rede neural do fundo aparece através
     dele — parecia rede desenhada por cima do card, e mudava durante a
     transição. Véu escurece sem deixar nada atravessar. */
  position: relative;
  filter: blur(7px); transform: scale(.87);
  transition: filter .45s ease, transform .45s ease, box-shadow .45s ease;
}
.caso-card::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: rgba(8,22,42,.60);
  transition: opacity .45s ease;
}
.caso-card.is-center::after { opacity: 0; }
.caso-card.is-center {
  filter: none; transform: scale(1);
  /* sobre marinho a sombra escura some; o que separa o card do fundo é a
     própria luz dele, então a sombra só ancora e um fio claro no topo levanta */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 6px rgb(var(--sombra-escura-rgb) / .35),
    0 34px 76px -30px rgb(var(--sombra-escura-rgb) / .95);
}
.caso-foto { position: relative; overflow: hidden; background: transparent; }
/* A transição é MÁSCARA na imagem, não véu branco por cima. Véu branco só
   funcionaria sobre card branco e sujaria qualquer foto escura; a máscara torna
   a própria imagem transparente e deixa o fundo do card aparecer, seja ele qual
   for. O fundo do painel virou transparente pelo mesmo motivo — marinho por
   baixo reapareceria justamente onde a imagem some. */
.caso-foto img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%);
}
/* Sem contorno no painel da foto. O inset box-shadow que existia aqui desenhava
   nos QUATRO lados, e o lado direito virava um fio escuro atravessando
   justamente o trecho onde a imagem se dissolve. As bordas de cima, de baixo e
   da esquerda coincidem com a borda do próprio card, então não faziam falta. */
.caso-texto {
  display: flex; flex-direction: column; justify-content: center;
  /* ⚠ Aqui havia var(--s-7), que existe na escala do Paulo e NÃO existe nesta.
     Variável indefinida invalida o clamp(), o clamp() invalida a declaração
     inteira de padding — e o painel de texto ficou sem recuo nenhum, colado na
     emenda da foto. Era a razão de o card parecer pior que o dele. */
  padding: clamp(var(--s-3), 3vw, var(--s-6)) clamp(var(--s-4), 3.8vw, var(--s-6));
}
.caso-texto h3 { font-size: var(--t-2xl); line-height: 1.16; letter-spacing: -.018em;
                 margin: 0 0 var(--s-4); color: var(--tinta-1); }
/* medida curta e entrelinha larga, como no card do Paulo: o texto respira e o
   bloco fica com a mesma silhueta. tinta-2 e não tinta-3 — lá o corpo tem mais
   contraste contra o painel do que tinha aqui. */
.caso-texto p  { margin: 0; color: var(--tinta-2); font-size: var(--t-md);
                 line-height: 1.7; max-width: 30ch; }
/* CTA do card: mesmo degradê marinho do hero, um degrau menor que o botão das
   seções. align-self para não esticar na largura do painel. */
.btn-card {
  align-self: flex-start; margin-top: var(--s-4);
  padding: var(--s-15) var(--s-3); font-size: var(--t-sm);
}

/* Tela baixa (notebook 1440x900 dá ~780px de viewport): o que impede a seção de
   caber numa dobra é a altura do TEXTO, não a do card. Um degrau de tipo e uma
   entrelinha mais curta resolvem sem mexer no layout. Só acima de 900px de
   largura — abaixo disso o card já empilha e a conta é outra. */
@media (min-width: 901px) and (max-height: 880px) {
  .caso-texto h3 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
  .caso-texto p  { font-size: var(--t-base); line-height: 1.6; }
  .caso-texto    { padding: var(--s-4) clamp(var(--s-3), 3vw, var(--s-6)); }
  /* o card cresceu a pedido; o respiro da seção devolve os pixels da dobra */
  #casos { --s-secao: var(--s-4); }
}

/* empilha antes que o painel de texto fique estreito demais para a medida */
@media (max-width: 900px) {
  /* O card ocupava 84% da altura da tela (335x707 num iPhone de 844): tomava a
     dobra inteira e escondia que existe carrossel. Encolhido em quatro frentes,
     porque só estreitar não resolveria — texto mais estreito quebra em mais
     linhas e devolve a altura pela porta dos fundos.
     A tipografia é o maior peso aqui: o h3 saía em 31px, tamanho de título de
     seção dentro de um card de 300px de largura. */
  .casos-carrossel { --slide: 80vw; }
  .caso-card { grid-template-columns: 1fr; min-height: 0; }
  .caso-foto { aspect-ratio: 16 / 9; }
  /* A borda do anterior e do próximo tem que aparecer — é o que diz que existe
     carrossel. No celular ela caía 13px FORA da tela, e a conta explica por quê:
     o vizinho encolhe para .87, e encolher recua a borda mais 6,5% da largura
     para dentro, somando à calha. Calha menor e encolhimento mais suave trazem
     a borda de volta; o desfoque continua fazendo o trabalho de separar. */
  .carousel-track { gap: var(--s-2); }
  .caso-card:not(.is-center) { transform: scale(.92); }
  /* empilhado, a emenda é embaixo: a máscara gira 90° */
  .caso-foto img {
    -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.55) 85%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.55) 85%, transparent 100%);
  }
  .caso-texto   { padding: var(--s-3); }
  .caso-texto h3 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
  .caso-texto p  { max-width: none; font-size: var(--t-base); line-height: 1.55; }
  .caso-texto .btn-card { margin-top: var(--s-3); }
}

/* pontos à esquerda, setas à direita — mesma barra do #quando do Paulo */
.carousel-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--s-3); gap: var(--s-3);
}
.carousel-dots { display: flex; gap: 10px; }
.c-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(157,180,210,.32);
  transition: background .3s ease, transform .3s ease;
}
.c-dot.active { background: var(--ciano); transform: scale(1.3); }
.c-dot:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }

.carousel-controls { display: flex; gap: var(--s-15); }
.carousel-btn {
  width: var(--s-6); height: var(--s-6); border-radius: 50%; border: 1px solid rgb(var(--ciano-rgb) / .3);
  background: transparent; color: var(--ciano); font-size: var(--t-md); cursor: pointer; line-height: 1;
  padding: 0; transition: background .15s ease;
}
.carousel-btn:hover { background: var(--ciano); color: var(--navy-900); }

/* o desfoque não é movimento, então fica; some só a transição */
@media (prefers-reduced-motion: reduce) {
  .caso-card { transition: none; }
  .c-dot { transition: none; }
}

/* ================= FORMAS ================= */
/* Três canais, três colunas: piso de 320px porque abaixo disso a medida do texto
   aperta antes de o card ficar feio. */
.grid-modalidades {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--calha);
}
/* .modalidade é só o degrau de tamanho sobre .pilar — todo o comportamento
   (linha que corre, brilho de canto, elevação, ícone que vira marinho) vem de lá. */
.modalidade { padding: var(--s-6) var(--s-4); }
.modalidade .pilar-icone {
  width: 64px; height: 64px; border-radius: var(--s-2); margin-bottom: var(--s-4);
}
.modalidade .pilar-icone svg { width: 32px; height: 32px; }
/* coluna para o botão poder ancorar embaixo com margin-top:auto — os três cards
   ficam com o CTA na mesma linha, mesmo tendo textos de tamanhos diferentes */
.modalidade { display: flex; flex-direction: column; }
.modalidade h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.modalidade p  { font-size: var(--t-base); line-height: 1.6; }

/* Revela no hover. O espaço do botão é RESERVADO desde o início (ele está no
   fluxo, só invisível): revelar empurrando conteúdo faria o card crescer e a
   grade inteira pular no passar do mouse.
   opacity em vez de visibility/display porque o elemento precisa continuar
   focável — é o foco dele que dispara o :focus-within e traz o botão à tona
   para quem navega por teclado. pointer-events desligado enquanto invisível,
   para não existir alvo de clique que não se vê. */
.modalidade .btn-revela {
  margin-top: auto; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.modalidade p { margin-bottom: var(--s-4); }
.modalidade:hover .btn-revela,
.modalidade:focus-within .btn-revela {
  opacity: 1; transform: none; pointer-events: auto;
}
.btn-revela:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 3px; }

/* Sem hover — toque — o botão é permanente. Do contrário ele seria inalcançável
   justamente em celular, que é onde a maioria vai abrir o WhatsApp. */
@media (hover: none) {
  .modalidade .btn-revela { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .modalidade .btn-revela { transition: opacity .2s ease; transform: none; }
}

/* ================= JORNADA (como agendar) ================= */
.jornada {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--calha); padding: 0; margin: var(--s-8) 0 var(--s-10); position: relative;
}
.jornada-no {
  position: relative; padding-top: calc(var(--no) + var(--s-4)); --no: 84px;
  text-align: center;
}
/* O nó é sináptico: núcleo branco aceso, encaixado num anel escuro e com halo.
   Era marinho sobre marinho e o número quase sumia; branco é o corpo celular
   iluminado e o axônio ciano sai dele. O anel escuro de 6px não é enfeite: ele
   separa o disco branco do traço, senão o axônio parece brotar da borda. */
.jornada-icone {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: var(--no); height: var(--no); border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #e9f2fb 100%);
  color: var(--navy-900);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 6px rgb(var(--navy-900-rgb) / .45),
              0 0 30px -2px rgba(150,215,255,.45),
              0 12px 28px -10px rgb(var(--sombra-escura-rgb) / .85);
}
/* 34px de traço 1,5 no grid de 24 dá ~2,1px na tela: o mesmo peso ótico que o
   numeral 600 que estava aqui antes. Traço mais fino some dentro do disco. */
.jornada-icone svg {
  width: 34px; height: 34px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* O axônio entre os nós, com um impulso percorrendo. Duas camadas de gradiente
   no mesmo elemento: a de baixo é o fio parado, a de cima é o ponto de luz, e
   só a posição dela anima. O atraso escalonado por nó faz a luz atravessar a
   corrente inteira em sequência, em vez de os quatro piscarem juntos. */
.jornada-no::before {
  content: ""; position: absolute;
  /* Com o nó centrado, o traço vai da borda direita DELE até a borda esquerda do
     nó seguinte. As porcentagens resolvem contra a largura do item, então
     50% é o centro da coluna e o vão da grade entra pelo lado direito. */
  top: calc(var(--no) / 2 - 1px);
  left:  calc(50% + var(--no) / 2 + var(--s-1));
  right: calc(var(--no) / 2 + var(--s-1) - var(--calha) - 50%);
  height: 2px;
  background:
    linear-gradient(90deg, rgb(var(--ciano-rgb) / 0) 0%, rgb(var(--ciano-rgb) / .95) 7%,
                           rgba(255,255,255,.9) 9%, rgb(var(--ciano-rgb) / 0) 17%)
      0 0 / 260% 100% no-repeat,
    linear-gradient(90deg, rgb(var(--eletrico-rgb) / .5), rgb(var(--eletrico-rgb) / .1));
  animation: impulso 4.4s linear var(--atraso, 0s) infinite;
}
/* Do nó 1 para o 4, ou seja da esquerda para a direita. Os valores parecem
   invertidos e não são: com background-size (260%) MAIOR que o contêiner, o
   deslocamento vale (largura_do_contêiner − largura_da_camada) × posição, que é
   negativo — então aumentar a porcentagem move a camada para a ESQUERDA. Para a
   luz correr para a direita, a porcentagem tem que DIMINUIR. */
@keyframes impulso {
  from { background-position: 170% 0, 0 0; }
  to   { background-position: -70% 0, 0 0; }
}
.jornada-no:last-child::before { display: none; }
.jornada-no p { color: var(--txt-suave); font-size: var(--t-base); margin: 0; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .jornada-no::before { animation: none; }
}

/* ================= REVELAR AO ROLAR =================
   A classe .a-revelar é posta pelo script, nunca escrita no HTML. Consequência:
   se o script não carregar, não rodar ou quebrar antes desta linha, o estado
   escondido simplesmente não existe e a página aparece inteira.

   Tentei antes por animation-timeline: view(), que é mais moderno e dispensa JS.
   Descartado: em ambiente que declara suporte, a linha do tempo inativa resolveu
   ora para o início (invisível) ora para o fim, e eu não consigo prever qual.
   Efeito de rolagem não vale o risco de a página abrir em branco.

   A transição mora em .visivel, e não no estado escondido, para o elemento não
   animar ao ser escondido no carregamento. */
.a-revelar {
  opacity: 0; transform: translateY(20px);
  /* Rede de segurança em CSS puro: passados 3s, revela de qualquer jeito. Não
     depende de rolagem, de evento nem de observador. Se o caminho normal
     funcionar, .visivel já apareceu antes e isto termina no mesmo estado, sem
     diferença visível. Se falhar, o pior caso é conteúdo 3s atrasado — nunca
     conteúdo invisível. Não consegui verificar a rolagem neste ambiente, então
     a garantia tinha que ser estrutural. */
  animation: destravar .5s ease 3s forwards;
}
@keyframes destravar { to { opacity: 1; transform: none; } }
.a-revelar.visivel {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
/* escada curta dentro de cada grade: cascata, não bloco */
.a-revelar.visivel:nth-child(2) { transition-delay: .07s; }
.a-revelar.visivel:nth-child(3) { transition-delay: .14s; }
.a-revelar.visivel:nth-child(4) { transition-delay: .21s; }

/* ================= SOBRE ================= */
/* 5:7 de uma grade de 12 colunas. φ fica reservado ao hero. */
.sobre-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: center; }
.sobre-foto img { width: 100%; border-radius: var(--radio); aspect-ratio: 4/5; object-fit: cover; }
.sobre-text p { color: var(--txt-escuro-suave); margin: 0 0 var(--s-2); max-width: var(--medida); line-height: 1.55; }
/* o último parágrafo já deixa 16px; mais 16 fecha o passo de 32 da grade */
.sobre-text .btn { margin-top: var(--s-2); }

/* ================= FOOTER ================= */
.site-footer { padding: var(--s-8) 0; border-top: 1px solid rgb(var(--ciano-rgb) / .12); }
/* Consultórios. auto-fit e não duas colunas fixas: com uma praça só vira uma
   coluna sozinha, com três vira três, sem tocar no CSS. */
.footer-locais {
  list-style: none; padding: 0; margin: 0 0 var(--s-4);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
  gap: var(--s-3) var(--s-8);
}
.footer-locais strong {
  display: block; font-size: var(--t-sm); color: var(--ciano);
  letter-spacing: .04em; margin-bottom: var(--s-05);
}
.footer-locais address {
  font-style: normal;                 /* o padrão do navegador é itálico */
  font-size: var(--t-sm); color: var(--txt-suave); line-height: 1.6;
}
.footer-ident { font-size: var(--t-sm); color: var(--txt-claro); margin: 0 0 var(--s-1); max-width: 62ch; line-height: 1.6; }
.footer-copy { font-size: var(--t-sm); color: var(--txt-suave); margin: 0; }
.footer-creditos {
  font-size: var(--t-xs); color: var(--txt-suave); opacity: .72;
  margin: var(--s-3) 0 0; max-width: 78ch; line-height: 1.6;
}
.footer-creditos a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-creditos a:hover { color: var(--ciano); }

/* ================= RESPONSIVO ================= */
/* O menu sai antes do resto: brand + nav + CTA nao cabem abaixo de ~960px.
   Ele nao SOME mais: vira painel sob o cabecalho, aberto pelo botao. */
@media (max-width: 960px) {
  .menu-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: var(--s-1) var(--s-3) var(--s-3);
    background: rgb(var(--navy-900-rgb) / .97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgb(var(--ciano-rgb) / .14);
    box-shadow: 0 18px 34px -22px rgb(var(--sombra-escura-rgb) / .9);
    /* Fechado sem display:none, para a altura poder animar. visibility corta o
       foco do teclado, que opacity sozinha nao faria. */
    visibility: hidden; opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .26s cubic-bezier(.2,.7,.3,1), visibility 0s .22s;
  }
  .nav[data-aberto] {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .22s ease, transform .26s cubic-bezier(.2,.7,.3,1), visibility 0s;
  }
  .nav a {
    font-size: var(--t-md);
    padding: var(--s-1) 0;
    border-bottom: 1px solid rgb(var(--ciano-rgb) / .10);
  }
  .nav a:last-child { border-bottom: 0; }
  /* sem JS o painel nao abre, entao os links voltam a viver dentro do cabecalho */
  .sem-js .nav {
    position: static; visibility: visible; opacity: 1; transform: none;
    flex-direction: row; flex-wrap: wrap; gap: var(--s-3);
    padding: 0 0 var(--s-2); background: none; box-shadow: none; border: 0;
  }
  .sem-js .nav a { border: 0; font-size: var(--t-base); }
  .sem-js .menu-toggle { display: none; }
  .sem-js .header-inner { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  /* Empilhado, a divisão 50/50 de fundo não sobrevive (a altura do texto varia),
     então a metade marinho vira um painel próprio em volta da figura.
     O hero vira flex coluna só para o H1 vir antes da foto: foto acima do título
     joga a promessa para fora da primeira tela. */
  .hero { background: var(--branco); min-height: 0; display: flex; flex-direction: column; }
  .hero > .wrap { order: 1; }
  .hero-rede, .hero-visual, .hero-painel { display: none; }
  .hero-figura {
    order: 2; position: static; inset: auto; width: auto; pointer-events: auto;
    margin: var(--s-6) var(--s-3) 0; padding: var(--s-4) var(--s-3) 0;
    border-radius: var(--radio); overflow: hidden;
    /* Mesmo pedido de sobriedade do desktop (2026-08-05). Aqui a rede não pode
       levar filter: o retrato do médico é filho desta caixa e viria junto. O véu
       marinho por cima resolve sem tocar na foto, e é a camada de baixo do
       degradê que devolve a profundidade. No celular a rede era a versão MAIS
       forte da página: 100% de opacidade, sem máscara. */
    background: linear-gradient(rgb(var(--navy-900-rgb) / .68), rgb(var(--navy-900-rgb) / .68)),
                url("img/rede-neural.webp") center / cover no-repeat,
                linear-gradient(155deg, var(--navy-700), var(--navy-900));
  }
  .hero-figura img { height: auto; width: 100%; max-width: 300px; margin: 0 auto; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-modalidades { grid-template-columns: repeat(2, 1fr); }
  .jornada { grid-template-columns: 1fr; counter-reset: passo; }
  /* empilhado: nó em cima, texto embaixo, tudo centrado — e o traço desce pelo
     eixo do nó, que agora é o centro da coluna e não mais a margem esquerda */
  .jornada-no { padding: calc(var(--no) + var(--s-3)) 0 var(--s-6); counter-increment: passo; }
  /* Empilhada, a jornada perde as DUAS coisas que davam a ordem no desktop: a
     fileira da esquerda para a direita e o impulso correndo nela (desligado
     aqui). Como os números viraram ícones, não sobrou sinal nenhum de sequência.
     O contador devolve isso sem tocar na marcação nem no desenho do desktop. */
  .jornada-icone::after {
    content: counter(passo);
    position: absolute; top: -3px; right: -3px;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: var(--t-sm); font-weight: 600; line-height: 1;
    background: var(--navy-900); color: var(--ciano);
    border: 1px solid rgb(var(--ciano-rgb) / .45);
  }
  .jornada-no::before {
    top: var(--no); left: calc(50% - 1px); right: auto;
    bottom: calc(var(--s-6) / -2); width: 2px; height: auto;
    background: linear-gradient(180deg, rgb(var(--eletrico-rgb) / .5), rgb(var(--eletrico-rgb) / .1));
    animation: none;
  }
  .sobre-grid { grid-template-columns: 1fr; }

  /* ---- alvos de toque ----
     Medido em 390px: os botões dos cards davam 39px de altura, os pontos do
     carrossel 9px e os telefones do rodapé 17px. O piso confortável é 44
     (Apple HIG) e o dedo não tem a mira do ponteiro. */
  .btn-card { min-height: var(--toque); display: inline-flex; align-items: center; }
  .footer-locais address a { display: inline-flex; align-items: center; min-height: var(--toque); }

  /* O ponto continua com 9px de desenho; quem cresce é a área clicável, num
     pseudo que não ocupa espaço no layout. Aumentei a calha junto para as áreas
     vizinhas não se sobreporem — alvo grande colado no vizinho ainda erra. */
  .carousel-dots { gap: var(--s-3); }
  .c-dot { position: relative; }
  .c-dot::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: var(--toque);
  }
}
@media (max-width: 560px) {
  .header-inner { gap: var(--s-1); }
  .brand { gap: var(--s-1); }
  .brand-marca { height: var(--s-3); }
  .brand-nome  { font-size: var(--t-base); }
  .header-inner .btn { padding: var(--s-15) var(--s-2); font-size: var(--t-sm); min-height: var(--toque); display: inline-flex; align-items: center; }
  .cta-longo { display: none; }
  .cta-curto { display: inline; }
}
@media (max-width: 520px) {
  .grid-4, .grid-modalidades { grid-template-columns: 1fr; }
  .pilar { padding: var(--s-3); }
  .modalidade { padding: var(--s-4) var(--s-3); }
  .caso-card h3, .caso-card p { margin-left: var(--s-2); margin-right: var(--s-2); }
  :root { --t-3xl: 2.441rem; --t-2xl: 1.953rem; }
}