/* ============================================================
   KIT PRIMAVERA — camada 2
   A pele clara, para quem já chega com marca própria.

   DE ONDE VEIO
   Primeira cliente: Avivah Estética (SJC), 07/10/2026. A logo é turquesa e
   lilás sobre branco; o consultório é verde-musgo, roxo e madeira. O kit
   junta os dois: a AÇÃO sai da logo (turquesa), o FUNDO e a seção escura
   saem do lugar (creme quente e verde do painel), e o lilás fica
   reservado, como o "AH" da logo.

   Referências: Maria Luné (cor de marca apagada em área grande, detalhe
   fino em toda parte), Starbucks (uma cor forte em degraus com função,
   uma cor reservada), Claude (creme + serifada, calma).
   Fichas em docs/referencias/.

   ⚠ As fontes NÃO entram aqui por @import (serializa o pedido: medido no
   kit moderno, 222ms de atraso). O cabeca.mjs do layout carrega:
     EB Garamond 400/500 + itálico 400 · Jost 400/500

   POR QUE EB GARAMOND, E NÃO CORMORANT (07/10/2026)
   A primeira escolha foi Cormorant Garamond: fina, a mais próxima da logo.
   No print, "Ciência" saiu com o circunflexo SOLTO, alto, acima do "e"; o
   "ú" de "saúde" também. Testadas lado a lado: Cormorant, Cormorant
   Garamond e Cormorant Infant têm o mesmo defeito na versão do Google
   Fonts. Em português, com acento em quase toda frase, isso não passa.
   EB Garamond tem o mesmo ar clássico, acento colado na letra e itálico
   de verdade para a palavra em lilás.
   ============================================================ */

:root {
  --fonte-display: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --fonte-corpo: 'Jost', system-ui, -apple-system, sans-serif;

  /* --- Fundos claros ---------------------------------------
     Matiz 32°, nunca branco. Os brancos do consultório dela medem 38–41°
     nas fotos; o creme fica um pouco mais rosado que eles para o turquesa
     ter contra o quê brilhar. Três degraus, cada um com função.        */
  --creme:        #F7F2EC;  /* fundo da página */
  --creme-fundo:  #EFE7DE;  /* seção alternada e card claro */
  --areia:        #E2D6C9;  /* fio e divisória no claro */

  /* --- Texto ------------------------------------------------
     O "preto" é turquesa quase preto: o texto pertence à família da marca,
     e nenhum cinza neutro entra na página (regra do núcleo).           */
  --tinta:        #1C3236;  /* 12,1:1 sobre o creme */
  --tinta-fraca:  #4D6266;  /*  5,8:1 */

  /* --- Turquesa: a cor da AÇÃO, em degraus com função -------
     O #00A2BD da logo dá 2,7:1 sobre o creme e falha para texto e botão. O
     botão usa o mesmo matiz escurecido; o original fica para detalhe.   */
  --turquesa:          #0A6C7C;  /* botão, link, rótulo — 5,5:1 sobre o creme */
  --turquesa-forte:    #08525E;  /* hover do botão */
  --turquesa-logo:     #00A2BD;  /* só ornamento, nunca texto */
  --turquesa-apagado:  #4A7477;  /* faixa de prova: cor de marca em área grande, saturação ~22%. Era #5F8A8D, do rascunho: o creme sobre ele dava 3,4:1 e o rótulo de 12px falhava. Agora 4,65:1 */

  /* --- Verde do painel: a seção ESCURA ---------------------
     Medido na foto 02 do GMN (o painel atrás da mesa): #34412E, matiz 101°.
     Levemente esfriado para 120° para não brigar com o turquesa da ação —
     continua lendo como o verde da parede, e conversa com o botão.     */
  --verde:         #2E3F35;  /* fundo das seções escuras */
  --verde-fundo:   #24332B;  /* chamada final, mais fundo */
  --verde-card:    #3A4D42;  /* card sobre o verde */
  --sobre-verde:        #F3EEE6;  /*  9,7:1 */
  --sobre-verde-medio:  #C9D2C9;  /*  7,2:1 */
  --sobre-verde-fraco:  #A9B7AD;  /*  5,4:1 — no card (#3A4D42) cai para 4,3: lá, usar o médio */
  --fio-no-verde:       #4A5E52;

  /* --- Lilás: reservado ------------------------------------
     O "AH" da logo. Só em fio, selo, estrela e UMA palavra do título.
     Nunca em área: lilás em bloco vira festa infantil.                  */
  --lilas:        #B65CC3;  /* 3,6:1 no creme: passa só em texto grande (≥24px) */
  --lilas-claro:  #D7A6E0;  /* sobre o verde */

  /* --- Forma ------------------------------------------------
     Botão em pílula (Starbucks, Avivah SP). Card com 4px: o núcleo veta
     canto acima de 8px. A ÚNICA exceção é o arco, que é forma e não canto. */
  --raio-p: 4px;
  --raio-m: 4px;

  --sombra-card: 0 18px 40px -24px rgb(28 50 54 / 0.35);
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
}

html { background: var(--creme); }
body {
  font-family: var(--fonte-corpo);
  color: var(--tinta);
  background: var(--creme);
}

/* --- Tipografia --------------------------------------------
   Garamond no peso 400 no título: é o "quiet" de "quiet beauty". O 500
   fica para número (faixa de prova), onde precisa de presença. Nunca 700:
   em negrito ela vira convite de casamento.                            */
.display, .titulo {
  font-family: var(--fonte-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.display { line-height: 0.98; }
/* No celular o núcleo dá 28px ao título de seção. Para uma Garamond fina
   é pouco: ao lado do corpo de 17px ela some (razão 1,6x). 37px devolve
   o contraste de escala sem quebrar frase curta em três linhas. */
@media (max-width: 47.99rem) { .titulo { font-size: 2.3rem; } }
.display em, .titulo em { font-style: italic; color: var(--lilas); }

/* Rótulo: Jost pequena, caixa alta, espaçada. Código de marca de luxo
   (Avivah SP, Maria Luné). Em turquesa, que passa contraste.
   SEM o traço antes: ele existia (um fio lilás de 2rem) e o Daniel tirou
   em 07/10, "traço fica muito estranho". O rótulo agora é frase, não
   etiqueta ("Avaliações das minhas queridas pacientes"), e frase não
   precisa de marcador.                                                  */
.rotulo {
  display: flex; align-items: center; gap: var(--e3);
  font-size: var(--texto-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--turquesa);
}

.conduz { color: var(--tinta-fraca); }

::selection { background: var(--turquesa); color: var(--creme); }
:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; }

/* --- Superfícies ------------------------------------------- */
.superficie-clara { background: var(--creme); color: var(--tinta); }
.superficie-clara-2 { background: var(--creme-fundo); color: var(--tinta); }
.superficie-escura { background: var(--verde); color: var(--sobre-verde); }
.superficie-funda { background: var(--verde-fundo); color: var(--sobre-verde); }
.superficie-escura .rotulo, .superficie-funda .rotulo { color: var(--sobre-verde-medio); }
.superficie-escura .conduz, .superficie-funda .conduz { color: var(--sobre-verde-medio); }
.superficie-escura em, .superficie-funda em { color: var(--lilas-claro); }
.superficie-escura :focus-visible, .superficie-funda :focus-visible { outline-color: var(--sobre-verde); }

/* --- Botão -------------------------------------------------
   Texto em caixa alta espaçada, como os rótulos: o botão é interface,
   não frase.                                                           */
.botao {
  border-radius: var(--raio-pilula);
  padding: 1.05rem 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 200ms var(--curva), transform 200ms var(--curva);
}

/* O BOTÃO PRINCIPAL: A BOLINHA QUE SE ABRE
   Escolhido pelo Daniel no uiverse em 07/10 ("simples, legal, sem nada
   mirabolante"). Em repouso é só o texto com uma bolinha atrás do começo
   e uma seta; no hover a bolinha se estica até virar a pílula inteira e a
   seta anda 5px para a frente.

   Adaptado do original: cores da Avivah, a fonte e a caixa alta do kit, e
   a bolinha de 45px vira 48px, o alvo de toque mínimo do núcleo.

   COR (trocada pelo Daniel na mesma noite): a bolinha é o verde-musgo da
   faixa de prova (--turquesa-apagado, #4A7477), não mais o azul-claro do
   original (#ADDADE). Por ser escura, o texto escuro não pode passar por
   cima dela: no original as primeiras letras ficam DENTRO da bolinha, e
   aqui ficariam ilegíveis. Então o texto começa logo depois dela e,
   quando ela se abre, o texto vira creme (4,65:1 sobre o musgo; o escuro
   dá 12,1:1 sobre o creme, parado). Para a pílula aberta não ficar com
   folga só à esquerda, texto e seta andam 1,1rem para o centro.

   NO CELULAR não existe hover: o botao-toque.js abre a bolinha quando o
   botão passa pela faixa do meio da tela, e fecha quando ele sai (como
   os passos e a lista com luz). Sem script, ele continua um link legível
   com bolinha e seta.                         */
.botao-principal {
  --bolinha: var(--turquesa-apagado);
  --anda: -1.1rem;
  position: relative; isolation: isolate;
  background: none; color: var(--tinta);
  min-height: 3rem; padding: 0 1.3rem 0 3.6rem; gap: 0.7rem;
  transition: color 320ms var(--curva), transform 200ms var(--curva);
}
.botao-principal span { transition: transform 320ms var(--curva); }
.botao-principal:hover, .botao-principal.aberto { color: var(--creme); }
.botao-principal:hover span, .botao-principal.aberto span { transform: translateX(var(--anda)); }
.botao-principal::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: -1;
  width: 3rem; height: 100%;
  border-radius: var(--raio-pilula);
  background: var(--bolinha);
  transition: width 320ms var(--curva);
}
.botao-principal svg {
  flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transform: translateX(-5px);
  transition: transform 320ms var(--curva);
}
.botao-principal:hover::before, .botao-principal.aberto::before { width: 100%; }
.botao-principal:hover svg, .botao-principal.aberto svg { transform: translateX(var(--anda)); }
.botao-principal:active { transform: scale(0.97); }

/* No verde: bolinha de creme translúcido, texto creme sempre (6,2:1). */
.superficie-escura .botao-principal, .superficie-funda .botao-principal {
  --bolinha: rgb(243 238 230 / 0.16); color: var(--sobre-verde);
}

/* --- Lista com luz (credenciais) ---------------------------
   A MESMA luz da página da Helena (kit Cacau, que adaptou o "radio
   glider" do uiverse), na pele da Primavera. A primeira versão daqui era
   só uma faixa com borda, e o Daniel sentiu na hora: "a da Helena é mais
   premium". A diferença está nas três camadas, que agora entram todas:

     TRILHO    1px de areia na esquerda da lista, que some nas pontas
     BARRA     2px verde-musgo, que some nas pontas, com BRILHO desfocado em volta
     ESCORRIDO um degradê musgo que escorre da barra para dentro do item

   COR: era lilás, e o Daniel achou que destoava (07/10). Testados lado a
   lado o azul da logo e o verde-musgo: ele escolheu o MUSGO, a mesma cor
   do botão e da faixa de prova. Mais sóbrio, e a página fica com uma cor
   de ação só.

   E o item aceso sobe um degrau de tinta: os outros ficam na tinta fraca,
   ele vai para a tinta cheia. É esse contraste que faz a luz "acender".

   O luz-lista.js mede o item e passa --luz-y e --luz-h. Com mouse acende
   o item sob o cursor; no celular, o do meio da tela (foco.js). Sem
   script, a lista fica normal. Pseudo-elementos em z-index -1 com
   `isolation`, para passar por trás do texto sem sumir atrás da seção. */
.lista-luz {
  --trilho: #D3C4B5;  /* um degrau abaixo da areia: no creme-fundo, a areia sumia */
  --barra: var(--turquesa-apagado);
  --escorrido: rgb(74 116 119 / 0.16);
  position: relative;
  isolation: isolate;
  padding-left: var(--e4);
  background: linear-gradient(to bottom, transparent, var(--trilho) 18%, var(--trilho) 82%, transparent)
              left top / 1px 100% no-repeat;
}
.lista-luz::before,
.lista-luz::after {
  content: ""; position: absolute; left: 0; top: 0; z-index: -1;
  height: var(--luz-h, 0px);
  transform: translateY(var(--luz-y, 0px));
  opacity: 0;
  pointer-events: none;
  transition: transform 480ms var(--curva), height 480ms var(--curva), opacity 280ms var(--curva);
}
.lista-luz::before {
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--barra) 50%, transparent);
  filter: drop-shadow(0 0 7px var(--turquesa-apagado)) drop-shadow(0 0 2px var(--turquesa-apagado));
}
.lista-luz::after {
  width: min(80%, 26rem);
  background: linear-gradient(90deg, var(--escorrido), transparent);
}
.lista-luz.luz-acesa::before,
.lista-luz.luz-acesa::after { opacity: 1; }
.lista-luz.luz-instante::before,
.lista-luz.luz-instante::after { transition: opacity 280ms var(--curva); }
.lista-luz > li { color: var(--tinta-fraca); transition: color 200ms var(--curva); }
.lista-luz > li.luz-ativo { color: var(--tinta); }

/* Link de texto com fio lilás embaixo: o lilás como detalhe, não como cor. */
.link-fio {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--lilas);
  padding-bottom: 2px;
}
.link-fio:hover { border-bottom-width: 2px; }

/* Telefone em destaque, mas SEM link. A página tem um objetivo só, o
   WhatsApp (decisão do Daniel, 07/10): um "ligar" clicável é uma segunda
   saída. O número continua à vista para quem prefere ligar e copia. Não
   parece link de propósito: sem sublinhado, sem cor de ação. */
.telefone { font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.02em; }