/* ==========================================================================
   Laboratório do Comportamento, home (protótipo local)
   IDV: paleta pastel clara da marca (malva, verde-água, creme) + Montserrat.
   Sem CDN: fontes locais em /fonts, imagens em /img.
   ========================================================================== */

@font-face { font-family: Montserrat; src: url(../fonts/montserrat-300.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Montserrat; src: url(../fonts/montserrat-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Montserrat; src: url(../fonts/montserrat-600.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Montserrat; src: url(../fonts/montserrat-700.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Cores da marca. As versões "acao" e "tinta" são as escurecidas o
     suficiente para passar contraste AA, que o pastel puro não passa.
     #AB7E9D é o "Roxo antigo" da paleta global do próprio site: é o fundo
     chapado da foto da Ana e a raiz de toda a família roxa do painel. */
  --fundo: #FDFBF8;
  --fundo-cartao: #FFFFFF;
  --tinta: #33262E;
  --tinta-2: #5B4A54;

  --malva: #AB7E9D;
  --malva-acao: #8E5A79;
  --malva-escuro: #6B3F58;
  --malva-claro: #F3E7EE;

  --agua: #A4D6D5;
  --agua-tinta: #1F5C5A;
  --agua-claro: #EAF4F3;

  --creme: #FFEABD;
  --borda: #EBE2E6;

  --raio: 22px;
  --raio-p: 12px;
  --largura: 1200px;

  --sombra: 0 10px 30px rgba(51, 38, 46, .07);
  --sombra-alta: 0 22px 50px rgba(51, 38, 46, .16);

  /* --------------------------- Movimento ---------------------------------
     Uma curva desacelerada para tudo que abre. Entrar é demorado e macio de
     propósito; sair é bem mais rápido, senão o cursor passa raspando num
     card e ele fica preso aberto atrás do ponteiro. */
  --curva: cubic-bezier(.22, 1, .36, 1);

  --tempo: 1100ms;       /* abertura do card, bem cadenciada */
  --tempo-sai: 400ms;    /* fechamento */
  --tempo-foto: 1400ms;  /* zoom da foto, sempre um passo atrás do resto */
  --tempo-foto-sai: 520ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 16px/1.6 Montserrat, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--malva-escuro); }

:focus-visible {
  outline: 3px solid var(--malva-acao);
  outline-offset: 3px;
  border-radius: 4px;
}

.faixa { width: min(100% - 40px, var(--largura)); margin-inline: auto; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.pular {
  position: absolute; left: 16px; top: -100px; z-index: 60;
  background: var(--malva-escuro); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--raio-p) var(--raio-p); font-weight: 600; text-decoration: none;
  transition: top 220ms var(--curva);
}
.pular:focus { top: 0; }

.olho {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--malva-acao); margin-bottom: 10px;
}

/* ============================ Cabeçalho ================================= */

.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 251, 248, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}

.cabecalho-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 76px;
}

.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marca img { width: 46px; height: auto; }
.marca-texto { font-size: 15px; font-weight: 400; color: var(--tinta-2); line-height: 1.2; max-width: 150px; }
.marca-texto b { display: block; font-weight: 700; color: var(--tinta); }

.nav-lista { display: flex; align-items: center; gap: 4px; }

.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--tinta-2);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  font-family: inherit;
  transition: background-color 260ms var(--curva), color 260ms var(--curva);
}
.nav-link:hover { background: var(--malva-claro); color: var(--malva-escuro); }
.nav-link-atual { color: var(--malva-escuro); }
.nav-botao[aria-expanded="true"] { background: var(--malva-claro); color: var(--malva-escuro); }
.nav-botao[aria-expanded="true"] .nav-seta { transform: rotate(180deg); }
.nav-seta { transition: transform 300ms var(--curva); }

.nav-item-produtos { position: relative; }

.painel {
  position: absolute; top: calc(100% + 12px); right: 0;
  width: min(92vw, 560px);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  padding: 14px;

  /* Nunca mais alto que a janela: o que passar rola aqui dentro,
     sem arrastar a página junto. */
  max-height: min(72vh, calc(100vh - 130px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--borda) transparent;
}
.painel[hidden] { display: none; }

.painel-secao + .painel-secao { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--borda); }
.painel-secao-titulo {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--malva-acao); margin-bottom: 12px;
}
.painel-itens { display: grid; gap: 4px; }

.painel-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: var(--raio-p);
  text-decoration: none; color: inherit;
  transition: background-color 240ms var(--curva);
}
a.painel-item:hover { background: var(--malva-claro); }
.painel-item-off { opacity: .62; }

.painel-item-nome { font-weight: 600; font-size: 15px; color: var(--tinta); }
.painel-item-desc { font-size: 13px; color: var(--tinta-2); line-height: 1.45; }
.painel-item-preco { font-size: 13px; font-weight: 600; color: var(--malva-escuro); margin-top: 2px; }

.selo {
  justify-self: end;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.selo-ok { background: var(--agua-claro); color: var(--agua-tinta); }
.selo-espera { background: var(--creme); color: #6B4E12; }
.selo-breve { background: var(--malva-claro); color: var(--malva-escuro); }

.menu-mobile {
  display: none; width: 44px; height: 44px; border: 1px solid var(--borda);
  border-radius: var(--raio-p); background: var(--fundo-cartao); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-mobile-barras, .menu-mobile-barras::before, .menu-mobile-barras::after {
  display: block; width: 20px; height: 2px; background: var(--tinta); border-radius: 2px;
}
.menu-mobile-barras { position: relative; }
.menu-mobile-barras::before, .menu-mobile-barras::after { content: ""; position: absolute; left: 0; }
.menu-mobile-barras::before { top: -6px; }
.menu-mobile-barras::after { top: 6px; }

.nav-mobile { border-top: 1px solid var(--borda); padding: 18px 20px 26px; }
.nav-mobile[hidden] { display: none; }
.nav-mobile-link {
  display: block; padding: 12px 0; font-weight: 600; color: var(--tinta);
  text-decoration: none; border-bottom: 1px solid var(--borda);
}

/* =============================== Hero =================================== */

.hero { padding: clamp(16px, 2vw, 28px) 0 clamp(48px, 6vw, 84px); text-align: center; }

.hero-titulo {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 400;
  color: var(--tinta);
  max-width: 18ch;
  margin-inline: auto;
}
.hero-titulo em { font-style: normal; font-weight: 700; color: var(--malva-escuro); }

.hero-apoio {
  margin: 18px auto 0; max-width: 46ch;
  color: var(--tinta-2); font-size: clamp(15px, 1.5vw, 17px);
}

/* --- O par de caminhos. A revelação acontece dentro do card. ---

   As colunas são fixas em 1fr 1fr e a altura do card também: nada aqui pode
   empurrar o resto da página quando o mouse passa. O que muda no hover é só
   o interior: véu, zoom da foto, sombra e o anel da borda.

   Chave de estado: --aberta (0 fechado, 1 aberto). Quem liga a chave são os
   poucos seletores do bloco "Onde a chave liga"; todo o resto lê a variável,
   inclusive as durações. É assim que entrada e saída ganham tempos
   diferentes sem precisar de uma segunda lista de seletores de hover. */

.vias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: clamp(18px, 2vw, 28px);
  text-align: left;
}

.via {
  --aberta: 0;

  /* Aberto usa o tempo longo, fechado o curto. */
  --dur: calc(var(--tempo-sai) + var(--aberta) * (var(--tempo) - var(--tempo-sai)));
  --dur-foto: calc(var(--tempo-foto-sai) + var(--aberta) * (var(--tempo-foto) - var(--tempo-foto-sai)));

  position: relative; isolation: isolate;
  min-height: clamp(400px, 34vw, 480px);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--malva-claro);
  box-shadow: var(--sombra);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: box-shadow var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.via-supervisao { background: var(--malva); }

.via-foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.via-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 52% 46%;
  transform: scale(calc(1 + var(--aberta) * .06));
  transition: transform var(--dur-foto) var(--curva),
              object-position var(--dur-foto) var(--curva);
}
.via-foto-ana img { object-position: 50% 6%; }

/* Véu: sobe da base e é o que garante contraste do texto branco. */
.via-veu {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
      rgba(45, 30, 40, .88) 0%,
      rgba(45, 30, 40, .68) 28%,
      rgba(45, 30, 40, .24) 56%,
      rgba(45, 30, 40, .02) 82%);
  transition: opacity var(--dur) var(--curva);
}

/* Segunda camada, que só entra quando o caminho está aberto: sem ela o texto
   do painel cai em cima da parte clara da foto e some. */
.via-veu::after {
  content: ""; position: absolute; inset: 0;
  opacity: var(--aberta);
  background: linear-gradient(to top,
      rgba(52, 30, 44, .92) 0%,
      rgba(52, 30, 44, .82) 46%,
      rgba(52, 30, 44, .46) 76%,
      rgba(52, 30, 44, .06) 100%);
  transition: opacity var(--dur) var(--curva);
}

.via-corpo { padding: clamp(22px, 2.6vw, 34px); color: #fff; }

.via-para {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta); background: var(--creme);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}

.via-titulo { font-size: clamp(26px, 3vw, 36px); font-weight: 400; color: #fff; }
.via-titulo b { font-weight: 700; }

/* Painel revelado. Fica no DOM sempre (leitores de tela e busca leem),
   só recolhido visualmente. */
.via-painel {
  max-height: calc(var(--aberta) * 480px);
  opacity: var(--aberta);
  overflow: hidden;
  transform: translateY(calc((1 - var(--aberta)) * 14px));
  transition: max-height var(--dur) var(--curva),
              opacity calc(var(--dur) * .6) var(--curva),
              transform var(--dur) var(--curva);
}

.via-itens { margin-top: 20px; display: grid; gap: 14px; }

/* Os itens não aparecem junto com o painel: entram em fila, um degrau atrás
   do outro. Na saída todos os atrasos zeram (--aberta vira 0) e o painel
   recolhe inteiro de uma vez, que é o que o olho espera de um fechamento. */
.via-itens li,
.via-cta {
  opacity: var(--aberta);
  transform: translateY(calc((1 - var(--aberta)) * 12px));
  transition-property: opacity, transform;
  transition-duration: calc(280ms + var(--aberta) * 400ms);
  transition-timing-function: var(--curva);
}
.via-itens li:nth-child(1) { transition-delay: calc(var(--aberta) * 260ms); }
.via-itens li:nth-child(2) { transition-delay: calc(var(--aberta) * 430ms); }
.via-itens li:nth-child(3) { transition-delay: calc(var(--aberta) * 600ms); }
.via-cta { transition-delay: calc(var(--aberta) * 780ms); }

.via-itens li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.via-itens b { display: block; font-weight: 600; font-size: 15px; }
.via-itens span:last-child { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .88); }

.via-icone {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .22); color: #fff;
}

.via-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 24px; padding: 13px 22px; border-radius: 999px;
  background: #fff; color: var(--malva-escuro);
  font-weight: 600; font-size: 15px; text-decoration: none;
}
.via-cta:hover { background: var(--creme); gap: 14px; }
.via-cta:focus-visible { outline-color: var(--creme); }

.dica { margin-top: 22px; font-size: 13.5px; color: var(--tinta-2); }

/* --- Estados de revelação, a partir do layout de duas colunas. --- */
@media (min-width: 901px) {

  /* Altura travada: o painel abre por dentro, o card não cresce. */
  .via { cursor: pointer; min-height: 0; height: clamp(340px, calc(100vh - 300px), 480px); }
  /* 300px = cabeçalho + título + respiros: o que sobra da janela vira card,
     pra dobra fechar com os dois caminhos inteiros em qualquer monitor. */

  .via:hover, .via:focus-within, .via[data-estado="ativa"] {
    box-shadow: var(--sombra-alta);
  }

  /* Anel do card escolhido. Vai de sombra interna, e não de border, pra não
     mexer um pixel do que está dentro. */
  .via-borda {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    border-radius: inherit;
    opacity: var(--aberta);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34);
    transition: opacity var(--dur) var(--curva);
  }

  /* O caminho não escolhido recua no clima, não no tamanho: só escurece. */
  .vias:has(.via-clinica:hover) .via-supervisao .via-veu,
  .vias:has(.via-clinica:focus-within) .via-supervisao .via-veu,
  .vias:has(.via-supervisao:hover) .via-clinica .via-veu,
  .vias:has(.via-supervisao:focus-within) .via-clinica .via-veu,
  .via[data-estado="recuada"] .via-veu { opacity: .82; }

  /* Aberta, a clínica gira um pouco o enquadramento pro lado das letras. */
  html:not(.toque) .via-clinica:hover .via-foto img,
  html:not(.toque) .via-clinica:focus-within .via-foto img,
  .via-clinica[data-estado="ativa"] .via-foto img { object-position: 58% 42%; }
}

/* ============== Painel aberto × card baixo (dobra adaptável) ============
   Com a altura do card presa à janela, em tela baixa o conteúdo aberto
   passava do card e o selo "PARA ..." era decapitado no topo. Defesas,
   todas só no desktop com mouse:
   1) o selo se despede quando o painel abre (é o primeiro cortado e vira
      redundante com o painel à vista);
   2) janela ≤ 800px de altura: painel aberto mais compacto;
   3) janela ≤ 680px: compressão extra; o certificado e o fio cedem a vez.
   No toque o card cresce (height auto) e nada corta. */

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html:not(.toque) .via-para {
    opacity: calc(1 - var(--aberta));
    transition: opacity calc(var(--dur) * .5) var(--curva);
  }
}

@media (min-width: 901px) {
  html.toque .via { height: auto; }
}

@media (min-width: 901px) and (max-height: 800px) {
  html:not(.toque) .via-corpo { padding: 22px 26px; }
  html:not(.toque) .via-para { margin-bottom: 10px; }
  html:not(.toque) .via-itens { margin-top: 14px; gap: 10px; }
  html:not(.toque) .via-cta { margin-top: 16px; padding: 11px 20px; }
}

@media (min-width: 901px) and (max-height: 680px) and (prefers-reduced-motion: no-preference) {
  html:not(.toque) .via-titulo { font-size: 24px; }
  html:not(.toque) .via-itens span:last-child { font-size: 13px; line-height: 1.4; }
  html:not(.toque) .via-icone { width: 30px; height: 30px; }
  html:not(.toque) .via-itens li { grid-template-columns: 30px 1fr; }
  html:not(.toque) .via-cert,
  html:not(.toque) .via-fio {
    max-height: calc((1 - var(--aberta)) * 44px);
    opacity: calc(1 - var(--aberta));
    overflow: hidden;
    transition: max-height var(--dur) var(--curva), opacity calc(var(--dur) * .5) var(--curva);
  }
}

/* =========================== Diferenciais =============================== */

.diferenciais { background: var(--agua); padding: clamp(44px, 5vw, 66px) 0; }

.diferenciais-grade {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px);
}

.dif { text-align: center; color: var(--agua-tinta); }

.dif-circulo {
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--agua-tinta);
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(31, 92, 90, .14);
  transition: transform 420ms var(--curva), box-shadow 420ms var(--curva);
}
.dif:hover .dif-circulo { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(31, 92, 90, .22); }

.dif-titulo { font-size: 17px; font-weight: 700; color: var(--agua-tinta); }
.dif-texto { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--agua-tinta); }

/* ============================= Rodapé =================================== */

.rodape { background: var(--malva-claro); padding: clamp(44px, 5vw, 64px) 0 0; }

.rodape-grade {
  display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: clamp(28px, 4vw, 56px);
  padding-bottom: 42px;
}
.rodape-logo { width: 54px; height: auto; margin-bottom: 14px; }
.rodape-nome { font-weight: 700; font-size: 17px; }
.rodape-texto { margin-top: 8px; font-size: 14px; color: var(--tinta-2); max-width: 34ch; }

.rodape-titulo {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--malva-acao); margin-bottom: 16px;
}
.rodape-lista { display: grid; gap: 10px; }
.rodape-lista a { color: var(--tinta); font-size: 14.5px; text-decoration: none; }
.rodape-lista a:hover { text-decoration: underline; }
.rodape-endereco { margin-top: 18px; font-style: normal; font-size: 14px; color: var(--tinta-2); line-height: 1.6; }

.rodape-base { border-top: 1px solid rgba(107, 63, 88, .16); padding: 20px 0 26px; }
.rodape-base p { font-size: 13px; color: var(--tinta-2); }

/* ============================ Responsivo ================================ */

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-mobile { display: inline-flex; }
  .marca-texto { display: none; }

  .vias { grid-template-columns: 1fr; gap: 18px; }

  /* Em tela pequena não existe hover: os dois caminhos já chegam abertos.
     A foto vira um bloco no topo e o texto ganha fundo sólido, em vez de
     depender de um véu sobre uma imagem muito alta. */
  .via { display: block; min-height: 0; background: #3D2C36; }
  .via-foto { position: relative; inset: auto; z-index: 0; height: 220px; }
  .via-foto img { object-position: 50% 45%; transform: none; }
  .via-foto-ana img { object-fit: contain; object-position: 50% 100%; }
  .via-veu { display: none; }
  .via-painel { max-height: none; overflow: visible; }

  .diferenciais-grade { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .rodape-grade { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .diferenciais-grade { grid-template-columns: 1fr; }
}

/* ==========================================================================
   O lado da supervisão: roxo profundo tirado da própria marca.

   O fundo chapado da foto original da Ana é o #AB7E9D. Fechado, o card é
   exatamente esse tom, igual ao site de hoje. Aberto, ele afunda numa
   família mais escura do mesmo roxo, e o topo do degradê volta a encostar
   no #AB7E9D pra foto e painel não terem emenda nenhuma. Acentos em
   verde-água (#ACD8D7) e creme (#FAECC3), as duas outras cores da paleta.
   ========================================================================== */

.via-supervisao {
  --roxo-marca: #AB7E9D;
  --roxo-topo:  #6E4560;
  --roxo-meio:  #55344A;
  --roxo-base:  #3B2333;

  --lilas: #F0DAE7;
  --agua-luz: #ACD8D7;
  --agua-luz-2: #CDE9E8;
  --papel: #F7F1F5;

  background: var(--roxo-marca);
}

/* Véu do estado fechado: sobe do roxo escuro e desaparece dentro do próprio
   malva, sem passar por cinza nenhum no caminho. */
.via-supervisao .via-veu {
  background: linear-gradient(to top,
      rgba(46, 27, 39, .92) 0%,
      rgba(52, 31, 44, .74) 24%,
      rgba(63, 38, 54, .30) 52%,
      rgba(107, 66, 92, 0) 78%);
}
.via-supervisao .via-veu::after { display: none; }

/* A camada profunda. Embaixo é o roxo mais escuro chapado, que é onde o texto
   mora; em cima ela vai abrindo até virar só um véu do próprio #AB7E9D, e a
   Ana reaparece por trás do painel. Como o fundo do card já é esse mesmo tom,
   não existe borda entre foto e painel em lugar nenhum. */
.via-profundo {
  position: absolute; inset: 0; z-index: -1;
  opacity: var(--aberta);
  background: linear-gradient(to top,
      var(--roxo-base) 0%,
      var(--roxo-base) 30%,
      rgba(85, 52, 74, .97) 52%,
      rgba(110, 69, 96, .92) 72%,
      rgba(140, 97, 126, .74) 88%,
      rgba(171, 126, 157, .44) 100%);
  transition: opacity var(--dur) var(--curva);
}

/* Aberta, a Ana recua um passo: perde um pouco de saturação e de peso, sem
   virar preto e branco, que sobre roxo fica sujo. */
.via-supervisao .via-foto img {
  opacity: calc(1 - var(--aberta) * .16);
  filter: saturate(calc(1 - var(--aberta) * .18));
  transition: transform var(--dur-foto) var(--curva),
              object-position var(--dur-foto) var(--curva),
              filter var(--dur) var(--curva),
              opacity var(--dur) var(--curva);
}

.via-supervisao:hover, .via-supervisao:focus-within, .via-supervisao[data-estado="ativa"] {
  box-shadow: 0 24px 60px rgba(43, 24, 36, .48);
}

/* Chapa "Para profissionais": sai o creme, entra o verde-água. O fundo dela é
   escuro, não vazado: a chapa cai na parte clara do degradê e o texto é
   miúdo, então precisa dos 4.5:1 sozinha. */
.via-supervisao .via-para {
  background: rgba(28, 15, 24, .58);
  border: 1px solid rgba(172, 216, 215, .48);
  color: var(--agua-luz);
}

.via-supervisao .via-titulo { font-weight: 700; letter-spacing: -.02em; color: var(--papel); }
.via-supervisao .via-titulo b { color: var(--lilas); }

/* Certificações sob o título: aparecem junto com a abertura do caminho,
   em Montserrat light, discretas como uma credencial e não como um selo. */
.via-cert {
  margin-top: 6px;
  font-family: Montserrat, sans-serif;
  font-weight: 300;
  font-size: 14.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247, 241, 245, .88);
  opacity: var(--aberta);
  transition: opacity var(--dur) var(--curva);
}
.via-cert-r { font-size: .62em; vertical-align: super; letter-spacing: 0; }

/* O fio. Assinatura do lado técnico: nasce curto embaixo do título e corre
   até a largura toda quando o caminho abre. */
.via-fio {
  display: block; height: 2px; margin-top: 16px; border-radius: 2px;
  background: linear-gradient(to right, var(--lilas) 0%, var(--agua-luz) 100%);
  transform: scaleX(calc(.12 + .88 * var(--aberta)));
  transform-origin: left center;
  transition: transform var(--dur) var(--curva);
}

/* Painel: mesma anatomia do lado da clínica, ícone em círculo e texto direto
   sobre o roxo. Sem caixa atrás de cada linha, que é o que fazia o painel
   parecer outro componente. O contraste vem do véu profundo, não de fundinho
   por item. */
.via-supervisao .via-painel { max-height: calc(var(--aberta) * 520px); }
.via-supervisao .via-itens { gap: 14px; }

.via-supervisao .via-itens b { color: var(--papel); font-weight: 700; font-size: 15px; }
.via-supervisao .via-itens span:last-child { color: rgba(247, 241, 245, .86); font-size: 13.5px; line-height: 1.5; }

.via-supervisao .via-icone {
  background: rgba(172, 216, 215, .18); color: var(--agua-luz);
}

.via-supervisao .via-cta {
  background: var(--agua-luz); color: #24141E; font-weight: 700;
}
.via-supervisao .via-cta:hover { background: var(--agua-luz-2); }
.via-supervisao :focus-visible { outline-color: var(--agua-luz); }

/* --------- Onde a chave liga ---------
   O padrão é fechado; cada contexto abaixo abre. A ordem é a cascata. */

@media (min-width: 901px) {
  html:not(.toque) .via:hover,
  html:not(.toque) .via:focus-within,
  .via[data-estado="ativa"] { --aberta: 1; }

  /* A Ana é um recorte sem fundo: no card aberto ela desliza pro canto que o
     texto não ocupa, em vez de virar só um cabelo atrás da leitura. */
  html:not(.toque) .via-supervisao:hover .via-foto img,
  html:not(.toque) .via-supervisao:focus-within .via-foto img,
  .via-supervisao[data-estado="ativa"] .via-foto img { object-position: 74% 8%; }
}

/* Aparelho de toque: os dois caminhos já chegam abertos, em qualquer largura.
   Evita o padrão "primeiro toque abre, segundo navega", que sempre confunde. */
html.toque .via { --aberta: 1; justify-content: flex-end; }
html.toque .vias { grid-template-columns: 1fr 1fr; }
html.toque .via-painel { max-height: none; overflow: visible; }

@media (max-width: 900px) {
  .via { --aberta: 1; }
  html.toque .vias { grid-template-columns: 1fr; }

  /* Tela pequena: o card inteiro já é o roxo profundo, e o bloco da foto
     mantém o malva original da Ana, derretendo pro escuro na emenda. */
  .via-supervisao { background: var(--roxo-base); }
  .via-profundo { display: none; }
  .via-supervisao .via-foto-ana {
    background: linear-gradient(to bottom,
        var(--roxo-marca) 0%, var(--roxo-marca) 52%, var(--roxo-base) 100%);
  }
  .via-supervisao .via-foto img { filter: none; opacity: 1; }
  .via-fio { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .via { --aberta: 1; }
  .via-painel { max-height: none; overflow: visible; }
}

/* Sem movimento e com espaço: os painéis já chegam abertos e a altura volta a
   ser automática, pra nada ser cortado sem a animação que faria o encaixe. */
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .via { justify-content: flex-end; height: auto; }
}