/* =========================================================================
   DE PERTO · v3 · o que veio do site novo (aprovado em 23/10/2026)
   Os seis componentes que o site da Clínica Ressignifique criou em
   src/styles/site.css e que o DS ainda não tinha: a barra de agendar no
   celular, o índice de queixas, a cartela em linhas, a ficha do tratamento,
   a lente da cabeça interna e o cartão do Clube em 3D.
   As classes têm o mesmo nome do site, para ele usar este arquivo como está
   e apagar as regras repetidas do site.css. Aprovado pelo Felipe em
   23/10/2026: vale como da v3.
   ========================================================================= */

:root {
  /* 6.12 Do site · medida */
  --barra-cel: calc(var(--btn-altura) + var(--esp-5));   /* a barra fixa de agendar, com o respiro embaixo */
  --cabeca-min: 64svh;                                    /* a folha que abre as páginas internas: o começo do conteúdo aparece */
  --lente-cel: 62vw;                                      /* a lente com foto, no celular */
  --lente-numero-cel: 48vw;                               /* a lente com número, no celular: menor, o número já pesa */
  --cartao3d-max: calc(var(--memcard) * 2);              /* o cartão em 3D no dobro do cartão plano (o site usava 46rem solto) */
  --proporcao-cel: 390 / 844;                             /* a tela de celular das aplicações (prancha XII) */

  /* 6.13 Do site · luz sobre o tinta */
  --lf-brilho-feixe: 1.7;       /* o feixe da lupa, mais forte sobre a folha de tinta */
  --lf-brilho-poeira: 1.4;
  --lf-brilho-boca: 1.5;
}

/* ---------- a barra de agendar, só no celular ---------- */
.barra-cel { position: fixed; z-index: var(--z-nav); left: var(--esp-3); right: var(--esp-3); bottom: var(--esp-3); display: flex; gap: var(--esp-2); padding: var(--esp-2); border-radius: var(--raio-pilula); background: var(--cor-tinta-a88); -webkit-backdrop-filter: blur(var(--desfoque-vidro)); backdrop-filter: blur(var(--desfoque-vidro)); box-shadow: var(--sombra-tinta); color: var(--cor-papel); --cor-acao: var(--cor-papel); --cor-acao-texto: var(--cor-tinta); --cor-foco: var(--cor-luz); transition: transform var(--tempo-lento) var(--curva); }
.barra-cel .btn { flex: 1; }
.barra-cel__zap { flex: none; color: var(--cor-papel); border-color: var(--cor-papel-a30); }
@media (max-width: 899px) { body:has(> .barra-cel) { padding-bottom: var(--barra-cel); } }
@media (min-width: 900px) { .barra-cel { display: none; } }

/* ---------- o índice de queixas (ao lado do mapa do rosto) ---------- */
.indice { margin: 0; padding: 0; list-style: none; border-bottom: var(--fio-fino) solid var(--cor-fio-forte); }
.indice__linha { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--esp-1) var(--esp-5); min-height: var(--alvo-toque); padding: var(--esp-4) 0; border-top: var(--fio-fino) solid var(--cor-fio-forte); color: var(--cor-texto); text-decoration: none; }
.indice__nome { font-family: var(--letra-titulo); font-size: var(--tam-h3); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); color: var(--cor-titulo); transition: color var(--tempo-rapido) var(--curva-suave); }
.indice__frase { grid-column: 1; color: var(--cor-texto-2); font-size: var(--tam-pequeno); }
.indice__conta { grid-row: 1 / span 2; grid-column: 2; display: inline-flex; align-items: center; gap: var(--esp-2); font-family: var(--letra-rotulo); font-size: var(--tam-rotulo); letter-spacing: var(--tr-rotulo); color: var(--cor-texto-2); white-space: nowrap; }
.indice__conta .icone { transition: transform var(--tempo-medio) var(--curva); }
.indice__linha:hover .indice__nome, .indice__linha:focus-visible .indice__nome { color: var(--cor-framboesa); font-style: italic; }
.indice__linha:hover .icone, .indice__linha:focus-visible .icone { transform: translateX(var(--esp-1)); }
@media (max-width: 599px) { .indice__nome { font-size: var(--tam-h4); } .indice__conta { grid-row: 1; font-size: var(--tam-legenda); } .indice__frase { grid-column: 1 / -1; } }

/* ---------- a cartela em linhas (a lista; a vitrine presa #productTrack continua para a vitrine) ---------- */
.area { display: grid; gap: var(--esp-7); }
@media (min-width: 1000px) { .area { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } .area__cab { position: sticky; top: var(--esp-10); } }
.area__cab { display: grid; gap: var(--esp-4); }
.area__cab .prancha__titulo { margin-top: 0; }
.cartela { margin: 0; padding: 0; list-style: none; border-bottom: var(--fio-fino) solid var(--cor-fio-forte); }
.linha-trat { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--esp-1) var(--esp-4); padding: var(--esp-4) 0; border-top: var(--fio-fino) solid var(--cor-fio-forte); color: var(--cor-texto); text-decoration: none; }
.linha-trat__nome { font-family: var(--letra-titulo); font-size: var(--tam-h4); line-height: var(--lh-sub); color: var(--cor-titulo); }
.linha-trat__nome em { color: inherit; transition: color var(--tempo-rapido) var(--curva-suave); }
.linha-trat:hover .linha-trat__nome, .linha-trat:focus-visible .linha-trat__nome { font-style: italic; }
.linha-trat:hover .linha-trat__nome em, .linha-trat:focus-visible .linha-trat__nome em { color: var(--cor-destaque); }
.linha-trat__frase { grid-column: 1; font-size: var(--tam-pequeno); color: var(--cor-texto-2); }
.linha-trat__ir { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: var(--alvo-toque); height: var(--alvo-toque); border-radius: var(--raio-lente); box-shadow: inset 0 0 0 var(--fio-fino) var(--cor-fio-forte); transition: background-color var(--tempo-medio) var(--curva), color var(--tempo-medio) var(--curva); }
.linha-trat:hover .linha-trat__ir, .linha-trat:focus-visible .linha-trat__ir { background: var(--cor-acao); color: var(--cor-acao-texto); }
.linha-trat--foto { grid-template-columns: auto 1fr auto; column-gap: var(--esp-5); }
.linha-trat--foto .linha-trat__foto { grid-row: 1 / span 2; align-self: center; width: var(--esp-10); aspect-ratio: var(--proporcao-foto); border-radius: var(--raio-2); overflow: hidden; }
.linha-trat--foto .linha-trat__foto img { width: 100%; height: 100%; object-fit: cover; }
.linha-trat--foto .linha-trat__nome, .linha-trat--foto .linha-trat__frase { grid-column: 2; }
.linha-trat--foto .linha-trat__ir { grid-column: 3; }
@media (max-width: 599px) { .linha-trat--foto .linha-trat__foto { width: var(--esp-9); } .linha-trat__nome { font-size: var(--tam-h5); } }

/* ---------- a ficha do tratamento ---------- */
.trat { display: grid; grid-template-columns: 1fr; gap: var(--esp-7); align-items: start; }
@media (min-width: 900px) { .trat { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: var(--esp-9); } }
.trat__texto { display: grid; gap: var(--esp-5); max-width: var(--largura-texto); }
.trat__texto .prancha__titulo { margin-top: 0; }
.trat__desc { color: var(--cor-texto); line-height: var(--lh-texto); }
.trat__ficha { display: grid; gap: var(--esp-5); }
.trat__nota { padding: var(--esp-4); border-radius: var(--raio-3); background: var(--cor-tinta-a04); }
.spec dd a { color: var(--cor-texto); text-decoration-color: var(--cor-framboesa); text-underline-offset: 0.2em; }
.spec s { color: var(--cor-texto-2); }
.preco-membro { font-family: var(--letra-titulo); font-weight: var(--peso-normal); font-size: var(--tam-h5); color: var(--cor-framboesa); }
.sessao { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cartao-min-p)), 1fr)); }
.sessao .cartao p { font-family: var(--letra-texto); font-size: var(--tam-texto); line-height: var(--lh-texto); color: var(--cor-texto); }
.cuidados { display: grid; gap: var(--esp-7); margin-top: var(--esp-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-2)), 1fr)); }
.cuidados h3 { margin-bottom: var(--esp-4); }
.lista-cuidado { display: grid; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.lista-cuidado li { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-3); align-items: start; padding-bottom: var(--esp-3); border-bottom: var(--fio-fino) solid var(--cor-fio); }
.lista-cuidado .icone { color: var(--cor-framboesa); margin-top: var(--esp-1); }
.outras { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-5) 0 0; padding: 0; list-style: none; }
.outras .chip { text-decoration: none; }

/* ---------- a lente da cabeça interna: foto em cor com o anel de luz, ou um número ---------- */
.cabeca__lente { position: relative; z-index: var(--z-alto); justify-self: center; width: min(var(--lente-cel), var(--largura-luz)); aspect-ratio: 1; margin: 0 0 var(--esp-6); border-radius: var(--raio-lente); overflow: hidden; box-shadow: 0 0 0 var(--fio) var(--cor-luz), 0 0 var(--esp-7) var(--cor-luz-a70), var(--sombra-tinta); }
.cabeca__lente img { width: 100%; height: 100%; object-fit: cover; }
.cabeca__lente::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 40% at 32% 22%, var(--cor-luz-a40), transparent 70%); pointer-events: none; }
@media (min-width: 900px) { .cabeca__lente { width: 100%; margin: 0; } }
.cabeca__lente--numero { display: grid; place-items: center; background: radial-gradient(closest-side, var(--cor-luz-a18), transparent), var(--cor-tinta); }
[data-folha="tinta"] .cabeca__lente--numero, [data-folha="noite"] .cabeca__lente--numero { background: radial-gradient(closest-side, var(--cor-luz-a18), transparent), var(--cor-fundo); }
.lente__numero { position: relative; z-index: var(--z-cima); display: grid; justify-items: center; gap: var(--esp-2); margin: 0; text-align: center; color: var(--cor-papel); }
.lente__numero .t-numeral { color: var(--cor-luz); }
.lente__rotulo { max-width: var(--medida-abertura-titulo); text-wrap: balance; font-family: var(--letra-titulo); font-style: italic; font-size: var(--tam-h5); line-height: var(--lh-sub); color: var(--cor-po); }
@media (max-width: 899px) { .cabeca__lente--numero { width: min(var(--lente-numero-cel), var(--largura-luz)); } }
/* cabeças claras (papel, pó, sálvia): a lente leva o fio e a sombra de papel, não a luz */
.cabeca--clara .cabeca__lente { box-shadow: 0 0 0 var(--fio) var(--cor-fio-forte), 0 0 0 var(--esp-3) var(--cor-papel-alto-a65), var(--sombra-papel); }
.cabeca--clara .cabeca__lente::after { content: none; }

/* ---------- o cartão do Clube em 3D (render do Blender), com o reflexo que passa pela face ---------- */
.cartao3d { position: relative; width: 100%; max-width: var(--cartao3d-max); margin: 0 auto; }
.cartao3d img { position: relative; width: 100%; height: auto; }
/* recortado pela máscara do próprio render (--mascara-cartao, na figura): só o cartão, sem a sombra */
.cartao3d__reflexo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: var(--mascara-cartao) center / 100% 100% no-repeat; mask: var(--mascara-cartao) center / 100% 100% no-repeat; mix-blend-mode: screen; }
.cartao3d__reflexo::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(105deg, transparent 0%, var(--cor-luz-a18) 30%, var(--cor-papel-a50) 48%, var(--cor-luz-a40) 54%, var(--cor-luz-a18) 66%, transparent 100%); filter: blur(var(--esp-3)); transform: translateX(-120%) skewX(-12deg); animation: reflexo-passa var(--tempo-respira) var(--curva-suave) infinite; }
@keyframes reflexo-passa { 0% { transform: translateX(-120%) skewX(-12deg); } 32% { transform: translateX(300%) skewX(-12deg); } 100% { transform: translateX(300%) skewX(-12deg); } }
[data-movimento="pausado"] .cartao3d__reflexo::before { animation: none; transform: translateX(-120%) skewX(-12deg); }
@media (prefers-reduced-motion: reduce) { .cartao3d__reflexo::before { animation: none; transform: translateX(-120%) skewX(-12deg); } }

/* a luz da lupa mais forte, sobre a folha de tinta (o Clube) */
.luz-lupa--forte .luz-lupa__feixe { filter: brightness(var(--lf-brilho-feixe)); }
.luz-lupa--forte .luz-lupa__poeira { filter: brightness(var(--lf-brilho-poeira)); }
.luz-lupa--forte .luz-lupa__boca { filter: brightness(var(--lf-brilho-boca)); }
/* a poeira viva (do-site.js): cada partícula anda sozinha; a textura parada fica só sem JavaScript */
.poeira-viva { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.tem-poeira-viva > .luz-lupa__poeira { display: none; }

/* ---------- só na página do DS: as molduras das demonstrações ---------- */
.demo-cel { position: relative; width: min(100%, var(--memcard)); aspect-ratio: var(--proporcao-cel); margin: 0 auto; overflow: hidden; border-radius: var(--raio-4); box-shadow: 0 0 0 var(--fio) var(--cor-fio-forte), var(--sombra-tinta); }
.demo-cel > img { width: 100%; height: 100%; object-fit: cover; }
.demo-cel .barra-cel { position: absolute; display: flex; }
.demo-lentes { display: grid; gap: var(--esp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-3)), 1fr)); }
.demo-lente { display: grid; gap: var(--esp-4); justify-items: center; padding: var(--esp-6); border-radius: var(--raio-4); background: var(--cor-fundo); color: var(--cor-texto); }
.demo-lente .cabeca__lente { width: 100%; max-width: var(--largura-luz); margin: 0; }
.demo-lente .t-legenda { color: var(--cor-texto-2); }
.demo-palco { position: relative; isolation: isolate; display: grid; place-items: center; padding: var(--esp-8) var(--esp-5); overflow: hidden; border-radius: var(--raio-4); background: var(--cor-fundo); --lf-y: 50%; --lf-r: 15rem; --lf-alcance: 70%; --lf-abre: 30%; --lf-corpo-x: 50%; --lf-corpo-y: 50%; --lf-corpo-larg: 46%; --lf-corpo-alt: 44%; }
.demo-palco .luz-lupa { z-index: var(--z-fundo); }
.demo-palco .luz-lupa--frente { z-index: var(--z-cima); }
.demo-palco .cartao3d { z-index: var(--z-alto); }