/* ============================================================
   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; o lilás
   entra só no fio antes dele.                                           */
.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);
}
.rotulo::before { content: ""; width: 2.1rem; height: 1px; background: var(--lilas); flex: none; }

.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 .rotulo::before, .superficie-funda .rotulo::before { background: var(--lilas-claro); }
.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.

   A cor da bolinha é o turquesa DA LOGO (#00A2BD) clareado a 30% sobre o
   creme: #ADDADE, quase o #B1DAE7 do original. O texto vai no turquesa
   forte: 5,8:1 sobre a bolinha e 7,9:1 sobre o creme. Ele fica metade em
   cada fundo, então precisa passar nos dois.

   NO CELULAR não existe hover: o botao-toque.js abre a bolinha quando o
   botão aparece inteiro na tela, e ela fica aberta. Sem script, ele
   continua um link legível com bolinha e seta.                         */
.botao-principal {
  --bolinha: #ADDADE;
  position: relative; isolation: isolate;
  background: none; color: var(--turquesa-forte);
  min-height: 3rem; padding: 0 1.5rem 0 1.15rem; gap: 0.7rem;
}
.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: none; }
.botao-principal:active { transform: scale(0.97); }

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

/* 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; }