/* =============================================================================
   DESIGN SYSTEM — Dra. Vanessa Otavïanï
   O CHROME do site (header, botões, botão flutuante, marcas, listas, formulário)
   e a TIPOGRAFIA aplicada. Os valores vêm todos de tokens.css.

   Divisão de responsabilidade, para não haver dúvida sobre onde mexer:
     tokens.css        → QUANTO vale (a cor, o tamanho, o espaço, a duração)
     design-system.css → QUE FORMA tem (o componente que consome o token)

   Nenhum valor cru abaixo desta linha. Se falta um valor, ele nasce em
   tokens.css primeiro.

   Carregado por TODAS as páginas públicas, sempre como o ÚLTIMO <link> do
   <head>, depois do bloco <style> da página — a ordem é o que garante que os
   tokens vençam as cópias locais enquanto elas ainda existirem.

   Chrome não varia entre páginas. Qualquer mudança de header, botão flutuante
   ou botão primário acontece AQUI, nunca numa página isolada.
   ============================================================================= */

/* tokens.css entra como <link> próprio, ANTES desta folha — a ordem é emitida
   por partials/estilos.html. Não usar @import aqui: ele serializa o download
   (o navegador só descobre tokens.css depois de baixar esta folha).

   Um cuidado que a ordem resolve: articles.css declara um segundo :root com
   --error #EF4444, contra o #B4232B da marca. Com tokens.css e esta folha
   depois dele, a marca vence. */

/* ============================ BASE DE TEXTO =============================== */
/* Home e paginas de tratamento divergiam (16/1.6 vs 17/1.75) e a home herdava
   #1F2937, um cinza azulado fora da paleta. Uma base so. */

/* O header é sticky: sem esta linha, o navegador alinha o alvo da âncora ao
   topo da janela e a barra fica POR CIMA dele. Vale para todo link interno,
   inclusive os que ainda não existem — por isso está no html, e não repetida
   como scroll-margin em cada id. */
html {
    scroll-padding-top: var(--header-h);
}

body {
    /* Sem esta linha, o corpo do site inteiro renderizava na fonte do SISTEMA
       (Segoe UI no Windows), não em Work Sans — medido: a mesma frase dava
       379px, idêntica a Segoe UI, contra 430px em Work Sans.

       A causa não era o carregamento: `document.fonts.check` confirma a face
       disponível. É que ninguém a APLICAVA. Esta regra definia tamanho, entre-
       linha, tracking e cor, e esquecia a família; e scripts/ler-tokens.js
       substitui theme.fontFamily inteiro, apagando a chave `sans` de que o
       preflight do Tailwind depende para o seletor html.

       Defeito silencioso do pior tipo: a fonte do sistema é parecida o
       bastante para não gritar, e todo o cálculo de `ch` — a medida de leitura
       do site — saía errado junto. */
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    letter-spacing: var(--track-body);
    color: var(--ink-body);
    /* O fundo da marca vinha do <style> inline da home — a única página que o
       tinha. Ao remover o inline, o corpo caiu para o branco do navegador
       (medido: rgb(246,243,239) antes, rgba(0,0,0,0) depois). O tom do papel é
       do sistema, não de uma página. */
    background: var(--ground);
}

p,
li,
.answer-capsule p,
.faq-answer p {
    text-wrap: pretty;
}

/* =========================== CHROME: HEADER =============================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--glass-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--rule) solid var(--hairline);
    box-shadow: var(--shadow);
}

/* =========================== CHROME: BOTÕES =============================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: var(--touch);
    padding: 18px 40px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 0.875rem;
    line-height: var(--leading-flat);
    letter-spacing: var(--track-caps-tight);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
    /* o tracking soma depois da ultima letra: compensa para centrar de fato */
    padding-right: calc(40px - var(--track-caps-tight));
    transition: background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

.btn-sm {
    padding: 14px 28px;
    padding-right: calc(28px - var(--track-caps-tight));
    font-size: 0.75rem;
    min-height: var(--touch);
}

.btn-dark {
    background: var(--ground-dark);
    color: var(--ink-invert);
}

.btn-dark:hover {
    background: var(--accent);
}

.btn-light {
    background: var(--ink-invert);
    color: var(--ink);
}

.btn-light:hover {
    background: var(--accent-lilac);
}

.btn-outline {
    border: var(--rule) solid var(--border-invert);
    color: var(--ink-invert);
    padding: 16px 32px;
}

.btn-outline:hover {
    border-color: var(--accent-lilac);
    background: var(--fill-invert-soft);
}

/* ====================== CHROME: MENU SUSPENSO ============================= */
/* Estava inline em 38 páginas, com `border-radius: 8px` e `box-shadow` — os
   dois proibidos pelo sistema — e consumindo --neutral-white / --shadow-lg,
   que vinham do :root fantasma de articles.css e não existem como token. */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 200px;
    padding: var(--space-2xs) 0;
    background: var(--ground);
    border: var(--rule) solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.dropdown-content a {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
    color: var(--ink);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: background-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

.dropdown-content a:hover {
    background: var(--ground-deep);
    color: var(--accent);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}

/* ==================== CHROME: WHATSAPP FLUTUANTE ========================== */

.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--ground-dark);
    color: var(--ink-invert);
    border: var(--rule) solid var(--border-invert);
    border-radius: var(--radius);
    padding: 14px 20px;
    box-shadow: var(--shadow);
    z-index: 1000;
    transition: background-color var(--dur-fast) var(--ease);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-micro);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    min-height: var(--touch);
}

.whatsapp-float:hover {
    background: var(--accent);
    transform: none;
    box-shadow: var(--shadow);
}

/* Recolhido enquanto um formulário de agendamento está na tela (chrome.js):
   no celular ele cobria 54 px do botão "Enviar e agendar" (UX-01, 2026-09-11). */
.whatsapp-float {
    transition: background-color var(--dur-fast) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s var(--dur);
}
.whatsapp-float.recolhido {
    opacity: 0;
    visibility: hidden;      /* E-04: fora da ordem de foco, não só invisível */
    pointer-events: none;
    transform: translateY(12px);
}

@media (max-width: 1023px) {
    .whatsapp-float span {
        display: none;
    }

    /* subia sobre o ponto focal das imagens no topo das paginas */
    .whatsapp-float {
        padding: 14px;
        border-radius: var(--radius);
        bottom: 96px;
    }
}

/* ============================ FOCO GLOBAL ================================= */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="tabpanel"]:focus-visible {
    outline: var(--rule-strong) solid var(--accent-tick);
    outline-offset: 3px;
}

.on-dark a:focus-visible,
.on-dark button:focus-visible {
    outline-color: var(--accent-lilac);
}

/* ========================= PULAR PARA O CONTEÚDO ========================= */
/* QA 2026-09-11 (P2-01). Fora da tela até receber foco; ao aparecer, cobre o
   canto do header em vez de empurrar o layout. O alvo ganha scroll-margin
   igual à altura do header, senão o foco cai atrás dele. */
.skip-link {
    position: absolute;
    inset-inline-start: var(--space-md);
    inset-block-start: -100px;
    z-index: 100;
    padding: var(--space-xs) var(--space-sm);
    background: var(--ground-dark);
    color: var(--ink-invert);
    font-family: var(--font-body);
    font-size: var(--text-secondary);
}
.skip-link:focus-visible {
    inset-block-start: var(--space-xs);
}
#conteudo {
    scroll-margin-top: var(--header-h);
}

/* QA 2026-09-11 (P2-03). Só o .t-micro que é LINK ganha área de toque de
   44px; o rótulo .t-micro (23 de 24 usos numa página de tratamento) não muda.
   Padding e margem negativa iguais: a área cresce, o desenho não se move. */
a.t-micro {
    display: inline-block;
    padding-block: calc((var(--touch) - 1em) / 2);
    margin-block: calc((var(--touch) - 1em) / -2);
}

/* ========================= MOVIMENTO REDUZIDO ============================= */

@media (prefers-reduced-motion: reduce) {

    .whatsapp-float,
    .whatsapp-float:hover,
    .btn {
        transition: none;
        transform: none;
    }
}

/* ======================= TIPOGRAFIA DO SISTEMA ============================ */
/* Recline tem apenas 300/400/500 — nunca usar font-bold com ela: o navegador
   sintetiza o peso e o resultado fica sujo. Escala e espaco fazem o trabalho. */

.font-title {
    font-family: var(--font-title);
}

.t-display {
    font-family: var(--font-title);
    font-weight: var(--weight-light);
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--track-display);
    text-wrap: balance;
    overflow-wrap: normal;
    hyphens: manual;
}

.t-section {
    font-family: var(--font-title);
    font-weight: var(--weight-light);
    font-size: var(--text-section);
    line-height: var(--leading-section);
    letter-spacing: var(--track-section);
    color: var(--ink);
    text-wrap: balance;
}

.t-sub {
    font-family: var(--font-title);
    font-weight: var(--weight-regular);
    font-size: var(--text-sub);
    line-height: var(--leading-sub);
    letter-spacing: var(--track-sub);
    color: var(--ink);
}

.t-statement {
    font-family: var(--font-title);
    font-weight: var(--weight-light);
    font-size: var(--text-statement);
    line-height: var(--leading-statement);
    letter-spacing: var(--track-statement);
}

.t-quote {
    font-family: var(--font-title);
    font-weight: var(--weight-light);
    font-size: var(--text-quote);
    line-height: var(--leading-quote);
    color: var(--ink);
}

.t-figure {
    font-family: var(--font-title);
    font-weight: var(--weight-light);
    font-size: var(--text-figure);
    line-height: var(--leading-flat);
    letter-spacing: var(--track-statement);
}

.t-ordinal {
    font-family: var(--font-title);
    font-weight: var(--weight-light);
    font-size: var(--text-ordinal);
    line-height: var(--leading-flat);
    color: var(--ink-numeral);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.t-micro {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-micro);
    line-height: var(--leading-flat);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-secondary);
}

.t-micro-invert {
    color: var(--accent-lilac);
}

.t-secondary {
    font-size: var(--text-secondary);
    line-height: var(--leading-body);
    letter-spacing: var(--track-secondary);
    color: var(--ink-secondary);
}

/* As variantes -invert vêm DEPOIS da base de propósito: mesma especificidade,
   vence quem vem depois. Em 2026-09-10 esta regra estava antes de .t-secondary e
   o rodapé escuro renderizava o texto secundário a 2,53:1 (medido no preview).
   contraste.test.js reprova se a ordem voltar a inverter. */
.t-secondary-invert {
    color: var(--ink-invert-body);
}


.t-fine {
    font-size: var(--text-fine);
    line-height: var(--leading-fine);
    letter-spacing: var(--track-fine);
    color: var(--ink-secondary);
}

.measure {
    max-width: var(--measure);
}

/* Medida de leitura para um bloco inteiro de conteúdo.
   As páginas de tratamento corriam o texto na largura do contêiner: 848px, ou
   ~100 caracteres por linha (medido). Acima de ~68 o olho perde a linha na
   volta, e o resultado é parede de texto — o mesmo efeito que faz uma página
   parecer post.

   Constrange o TEXTO, não o contêiner: listas regradas, tabelas, imagens e o
   FAQ continuam podendo usar a largura toda, que é o contraste editorial que
   dá ritmo à página. */

.prosa > p,
.prosa > .answer-capsule,
.prosa > ul:not([class*="grid"]),
.prosa > ol:not([class*="grid"]) {
    max-width: var(--measure);
}

/* ========================= MARCAS E LINKS ================================= */

.section-mark {
    display: block;
    width: var(--space-xl);
    height: var(--rule-strong);
    background: var(--accent-tick);
    margin-bottom: var(--space-sm);
}

.section-mark-invert {
    background: var(--accent-lilac);
}

.link-rule {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-micro);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: var(--rule);
    text-underline-offset: 5px;
    transition: color var(--dur-fast) var(--ease);
}

.link-rule:hover {
    color: var(--ink);
}

/* ==================== LISTAS QUE LEVAM A SUBPÁGINAS ====================== */
/* A linha inteira já era o link. O que faltava era um sinal permanente, sem
   repetir um CTA verbal em cada item — isso pesava a régua editorial. A seta
   entra no título, no corpo da mesma frase, como um índice. */

.disclosure-row {
    min-height: var(--touch);
    margin-inline: calc(var(--space-xs) * -1);
    padding-inline: var(--space-xs);
    transition: background-color var(--dur-fast) var(--ease);
}

.disclosure-row .t-sub::after {
    content: "\00a0→";
    color: var(--ink-secondary);   /* E-06: --ink-numeral dava 3,65:1 em --text-fine */
    font-family: var(--font-body);
    font-size: var(--text-fine);
    font-weight: var(--weight-regular);
    letter-spacing: 0.08em;
    vertical-align: 0.12em;
}

.disclosure-row:hover .t-sub,
.disclosure-row:focus-visible .t-sub {
    color: var(--accent);
}

.disclosure-row:hover .t-sub::after,
.disclosure-row:focus-visible .t-sub::after {
    color: var(--accent);
}

.disclosure-row:active {
    background: var(--accent-lilac-pale);
}

/* Link DENTRO de um parágrafo, em fundo claro. O sistema tinha o .link-rule
   (bloco, caixa alta, com régua) e o .link-invert (fundo escuro), mas nada para
   o link no meio da frase — e é o que uma página de texto corrido, como a
   política de privacidade, mais usa. Mesmos valores que articles.css já aplica
   dentro do artigo, para o link ser o mesmo objeto no site inteiro. */
.link-texto {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: var(--rule);
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease);
}

.link-texto:hover {
    color: var(--ink);
}

.link-invert {
    color: var(--accent-lilac);
    text-decoration: underline;
    text-decoration-thickness: var(--rule);
    text-underline-offset: 5px;
    text-decoration-color: color-mix(in srgb, var(--accent-lilac) 50%, transparent);
    transition: text-decoration-color var(--dur-fast) var(--ease);
}

.link-invert:hover {
    text-decoration-color: var(--accent-lilac);
}

/* ======================== ANSWER CAPSULE (GEO/AEO) ======================== */
/* O trecho que buscadores de IA extraem e citam. Existiam DUAS versões: esta,
   editorial (fio de 1px + Recline 300), e uma antiga com gradiente lavanda,
   `border-radius: 0 .5rem .5rem 0` e um emoji 💡 no ::before — que violava
   raio zero e ainda estava em uso no hub de tratamentos e em 4 das 5 páginas
   filhas. Vale esta. */

.answer-capsule {
    border-left: var(--rule) solid var(--accent-tick);
    /* O recuo acompanha o tipo: 16px no celular, 28px do desktop em diante.
       Fixo em 28px ele comia 8% da coluna de 327px do telefone. */
    padding-left: clamp(16px, 3.9vw, 28px);
    margin: var(--space-lg) 0;
    background: none;
    border-radius: var(--radius);
}

.answer-capsule::before {
    content: none;
}

.answer-capsule p {
    font-family: var(--font-title);
    font-weight: var(--weight-light);
    /* FLUIDO, e não cravado. Em 1.3125rem fixo a cápsula não encolhia, e no
       celular 21px numa coluna de 327px davam 28 a 31 caracteres por linha —
       medida de destaque numa tarefa de leitura, com cada cápsula ocupando 44
       a 48% da tela. Os dois pontos são medidos: 18px numa tela de 390px,
       21px de 700px em diante, que é o que o desktop já tinha. Depois disso:
       8 a 10 linhas em vez de 11-12, 34 a 38 caracteres por linha, 28 a 35%
       da tela. O desktop não mudou. */
    font-size: clamp(1.125rem, 0.89rem + 0.97vw, 1.3125rem);
    line-height: 1.62;
    color: var(--ink-body);
    margin: 0;
}

.answer-capsule-invert {
    border-left-color: var(--accent-lilac);
}

.answer-capsule-invert p {
    color: var(--ink-invert-body);
}

/* ========================== LISTA NUMERADA ================================ */
/* Numeral com zero à esquerda: dá coluna alinhada sem depender de tabular-nums
   no corpo e mantém o ar de protocolo. */

.counted-list {
    counter-reset: item;
}

/* Mesma armadilha que a .ruled-list tinha: com `display: flex` no <li>, todo
   texto solto vira um item de flex separado e a frase se parte em colunas. Aqui
   ainda não aparecia porque as quatro páginas que usam a lista embrulham o
   conteúdo num <span> — o que só funciona enquanto alguém lembrar do <span>.
   Numeral absoluto, conteúdo em fluxo: mesma geometria (texto a 52px). */
.counted-list li {
    position: relative;
    padding: var(--space-sm) 0 var(--space-sm) 52px;
    border-bottom: var(--rule) solid var(--hairline);
    list-style: none;
}

.counted-list li::before {
    content: counter(item, decimal-leading-zero);
    counter-increment: item;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(var(--space-sm) + 0.5em);
    inline-size: 32px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-micro);
    letter-spacing: var(--track-caps);
    /* D-03 (2026-09-11): --ink-numeral e' para numeral grande (.t-ordinal);
       em 11px dava 3,31-3,65:1. Em texto pequeno, --ink-secondary (5,2:1+). */
    color: var(--ink-secondary);
}

/* ================================ FAQ ===================================== */
/* Marcador +/− desenhado em dois fios de 1px: o traço vertical some no aberto.
   Sem ícone, sem rotação — a mesma gramática de fio do resto do sistema. */

.faq-list {
    border-top: var(--rule) solid var(--hairline-strong);
}

.faq-list details {
    border-bottom: var(--rule) solid var(--hairline);
}

.faq-list summary {
    list-style: none;
    position: relative;
    cursor: pointer;
    padding: 28px 40px 28px 0;
    font-family: var(--font-title);
    font-weight: var(--weight-regular);
    font-size: 1.3125rem;
    line-height: 1.3;
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease);
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary:hover {
    color: var(--accent);
}

.faq-list summary:focus-visible {
    outline: var(--rule-strong) solid var(--accent-tick);
    outline-offset: -2px;
}

.faq-list summary::after {
    content: "";
    position: absolute;
    right: 0;
    top: 43px;
    width: 16px;
    height: var(--rule);
    background: var(--accent-tick);
}

.faq-list summary::before {
    content: "";
    position: absolute;
    right: 7.5px;
    top: 35px;
    width: var(--rule);
    height: 16px;
    background: var(--accent-tick);
    transition: opacity var(--dur-fast) var(--ease);
}

.faq-list details[open] summary::before {
    opacity: 0;
}

.faq-answer {
    padding: 0 40px var(--space-lg) 0;
    max-width: 62ch;
    color: var(--ink-body);
}

/* ===================== RÉGUA (elemento-assinatura) ======================== */

.regua-tick {
    stroke-dasharray: 1 15;
    stroke-dashoffset: 0;
}

.regua-baseline {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 900ms var(--ease);
}

.regua.is-visible .regua-baseline {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .regua-baseline {
        transition: none;
        stroke-dashoffset: 0;
    }
}

/* ============ UTILITÁRIOS HERDADOS — apontados para tokens ================ */
/* Nomes anteriores ao sistema de tokens, ainda espalhados pelas páginas.
   Mantidos como apelido para que nenhuma página precise redeclará-los no seu
   <style> inline. Não usar em página nova: prefira text-ink / text-accent. */

.primary-dark-text {
    color: var(--ink);
}

.primary-medium-text {
    color: var(--accent);
}

.primary-light-text {
    color: var(--accent-tick);
}

.neutral-medium-text {
    color: var(--ink-secondary);
}

.primary-dark-bg {
    background: var(--ground-dark);
}

.primary-medium-bg {
    background: var(--accent);
}

/* ===================== LISTAS REGRADAS / FORMULARIO ======================= */

/* O traço era um item de FLEX, e isso quebrava o item assim que o texto tinha
   marcação: numa lista com <strong>, cada nó vira um item de flex separado e a
   frase se parte em colunas — "Nome , e-mail e telefone" saiu em cinco blocos
   na política de privacidade. Nas páginas de sinal não aparecia porque lá os
   itens são texto puro.

   Traço absoluto, conteúdo em fluxo normal: mesma geometria (22px até o texto),
   e agora <strong>, <a> e <em> se comportam como texto. */
.ruled-list li {
    position: relative;
    padding: 18px 0 18px calc(6px + var(--space-sm));
    border-bottom: var(--rule) solid var(--hairline);
    color: var(--ink);
    list-style: none;
}

.ruled-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(18px + 0.95em);
    inline-size: 6px;
    block-size: var(--rule);
    background: var(--accent-tick);
}

.field-label {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-micro);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-secondary);
    line-height: var(--leading-flat);
    margin-bottom: var(--space-2xs);
}

.field-input {
    display: block;
    vertical-align: top;
    width: 100%;
    min-height: 48px;
    background: transparent;
    border: 0;
    border-bottom: var(--rule) solid var(--hairline-strong);
    border-radius: var(--radius);
    padding: 12px 2px;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease);
}

.field-input:focus {
    outline: none;
    border-bottom: var(--rule-strong) solid var(--accent);
}

.field-input::placeholder {
    color: var(--ink-placeholder);
}

/* Campo recusado. `aria-invalid` em vez de classe: a mesma marca serve à régua
   vermelha e ao leitor de tela, que a cor sozinha não alcança. A versão antiga
   usava `border-red-500` do Tailwind — vermelho fora da paleta. */
.field-input[aria-invalid="true"] {
    border-bottom-color: var(--error);
}

.field-erro {
    margin-top: var(--space-3xs);
    font-size: var(--text-fine);
    line-height: var(--leading-fine);
    color: var(--error);
}

.field-erro[hidden] {
    display: none;
}

.form-note {
    border-left: var(--rule-strong) solid;
    padding: 12px 0 12px var(--space-sm);
    font-size: var(--text-secondary);
}

/* Painel do formulário de agendamento — o retângulo claro com a régua de
   acento no topo, que faz o formulário existir sobre a faixa escura.
   Estava escrito como utilitário em 13 páginas (`border-t-[3px]
   border-[var(--accent-tick)] bg-[var(--ground)] p-8 lg:p-10`), com 3px cru no
   HTML, e FALTAVA na home e na página "sobre" — onde o formulário caiu direto
   sobre o fundo escuro, com rótulo cinza e botão escuro sobre escuro. */
.form-painel {
    border-block-start: var(--rule-strong) solid var(--accent-tick);
    background: var(--ground);
    padding: var(--space-lg);
    color: var(--ink);
}

@media (min-width: 1024px) {
    .form-painel {
        padding: var(--space-xl);
    }
}

/* O formulário traz `mt-8` para descolar do rótulo "Deixe seu contato" que o
   antecede nas páginas de tratamento e de sinal. Onde o painel começa direto
   nele — home e "sobre" —, essa margem viraria um vão no topo da caixa. */
.form-painel>form:first-child {
    margin-block-start: 0;
}

/* ============================ MOVIMENTO =================================== */

.editorial-frame {
    overflow: hidden;
}

.editorial-frame img {
    display: block;
    width: 100%;
    transition: transform var(--dur-image) var(--ease);
}

.editorial-frame:hover img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {

    .editorial-frame img,
    .editorial-frame:hover img {
        transition: none;
        transform: none;
    }
}

/* ========================= SANGRIA CORRETA ================================ */
/* `calc(50% - 50vw)` resolve o 50% contra a COLUNA do grid, nao contra o
   container: jogava ~330px de cada imagem para fora da tela, e o bleed-guard
   amputava o resto. A conta certa parte da largura do container. */

.bleed-right {
    margin-right: calc(-1 * (max(0px, (100vw - 1240px)) / 2 + 48px));
}

.bleed-left {
    margin-left: calc(-1 * (max(0px, (100vw - 1240px)) / 2 + 48px));
}

@media (max-width: 1023px) {

    .bleed-right,
    .bleed-left {
        margin-inline: 0;
    }
}

/* ===================== SANGRIA LATERAL SEGURA ============================= */
/* Elementos com margem negativa em vw estouram a largura util quando existe
   barra de rolagem (100vw inclui a barra). `clip` corta sem criar contexto de
   rolagem — `hidden` aqui quebraria o position:sticky do header. */

.bleed-guard {
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    .bleed-guard {
        overflow-x: hidden;
    }
}

/* ====================== TRATAMENTO DE IMAGEM ============================== */
/* As fotos nao tem um pixel violeta: sem gradacao elas ficam como objeto
   colado sobre um sistema violeta-e-osso. `color` troca matiz e saturacao
   preservando a luminancia — a pele continua pele. Nao usar duotone. */

.portrait-plate {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Abaixo do desktop a coluna vira uma só e o retrato passa a ter a largura
   inteira: a 768px o 4/5 dá 705×881px — uma parede de foto que empurra o H1
   para fora da dobra. Medido em quatro páginas (home, sobre, tratamento e hub),
   sempre 705×881, porque o defeito é da peça, não da página.

   O teto é vertical e não muda a largura: o object-cover apara o excedente em
   cima e embaixo, mantendo o rosto (que está no centro do quadro). No celular
   o 4/5 já é mais baixo que este teto, então nada muda lá. */
@media (max-width: 1023px) {
    .portrait-plate {
        max-block-size: 56vh;
    }
}

.portrait-plate img {
    filter: var(--grade-portrait);
}

.portrait-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: var(--grade-veil);
    mix-blend-mode: color;
    opacity: var(--grade-veil-opacity);
}

.portrait-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(115% 85% at 55% 38%, transparent 45%, var(--grade-vignette) 100%);
    mix-blend-mode: multiply;
}

/* Em faixa escura a imagem DISSOLVE; em faixa clara e placa de borda dura. */
.plate-dissolve-left {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%);
    mask-image: linear-gradient(to right, transparent 0, #000 30%);
}

@media (max-width: 1023px) {
    .plate-dissolve-left {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
    }
}

/* Miniaturas de artigo: seis fundos sem relacao entre si (turquesa, magenta,
   menta) viravam uma erupcao de cor na lista. Uma familia so, cor no hover. */
.article-thumb {
    filter: var(--grade-thumb);
    outline: var(--rule) solid var(--hairline);
    outline-offset: -1px;
    transition: filter var(--dur-slow) var(--ease);
}

.group:hover .article-thumb {
    filter: var(--grade-thumb-hover);
}

@media (prefers-reduced-motion: reduce) {
    .article-thumb {
        transition: none;
    }
}

/* ===================== ANIMACAO DE ENTRADA REMOVIDA ======================= */
/* O fade-up em dezenas de elementos era um tique de template e deixava o
   conteudo dependente de JS. Conteudo nunca depende de JS para ser visto. */

.reveal,
.reveal.active {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ================== HERO DA HOME: TIPO + REGUA VERTICAL =================== */
/* A home e a tese; as paginas de tratamento sao as instancias. O hero nao
   carrega imagem: duas tentativas provaram que qualquer placa de altura
   integral naquela faixa vira o assunto e e interrogada. O H1 e o objeto
   mais claro e maior da tela — por regra. */

.t-display-hero {
    font-family: var(--font-title);
    font-weight: var(--weight-light);
    font-size: var(--text-hero);
    line-height: var(--leading-display);
    letter-spacing: var(--track-hero);
    text-wrap: balance;
}

/* ================ BANDA DA AMPLIAÇÃO (1× → 20× → 60×) ==================== */
/* Instrumento à esquerda, régua VERTICAL à direita.

   Três correções vindas da avaliação de efeitos e inovação, todas medidas:

   1. A régua horizontal sob a imagem caía 54px ABAIXO da dobra em 1440×900 —
      o controle tinha saído de "pequeno demais" para "fora da tela". Ao lado,
      alinhada ao topo da janela, ela entra na primeira tela.

   2. A janela de 1144×520 recortava 39% da fonte 4:3 e ainda a AMPLIAVA 1,24×
      em DPR 1 (2,49× em DPR 2). Uma peça cujo assunto é resolução exibindo
      imagem acima da resolução nativa. Agora 3:2 na coluna de 7fr: o recorte
      cai para 11% e o upscale desaparece. Quem limita a altura é a LARGURA da
      coluna — teto de altura sobre proporção fixa só piora o corte.

   3. A FRASE de cada degrau é o conteúdo mais valioso da peça, e vivia num
      aria-live abaixo da dobra, uma por vez. Vai para dentro da estação: as
      três ficam legíveis ao mesmo tempo e a régua passa a se anunciar como
      controle, em vez de eixo de gráfico. */

.band-unit {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 1024px) {
    .band-unit {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        gap: var(--space-3xl);
        align-items: start;
    }
}

.band-window {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ground-dark);
}

.band-window img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A MIRA — o campo do PRÓXIMO nível, desenhado sobre o atual.
   É o retângulo que transforma três fotos numa ampliação: ele diz ONDE se
   entra. Sem ele a peça alega "a mesma área" e a imagem não sustenta —
   vira rótulo colado em slideshow, e a peça deixa de ser prova.
   Custa zero byte: é uma borda de 1px. */

.band-mira {
    position: absolute;
    left: var(--mira-x);
    top: var(--mira-y);
    width: var(--mira-w);
    height: var(--mira-h);
    border: var(--rule) solid var(--accent-tick);
    pointer-events: none;
}

/* Um rótulo minúsculo no canto da mira, dizendo para onde ela leva. */
.band-mira::after {
    content: attr(data-leva);
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 0.625rem;
    letter-spacing: var(--track-caps-tight);
    text-transform: uppercase;
    color: var(--accent-lilac);
    white-space: nowrap;
}

/* O valor da ampliação fica DENTRO da janela: é número gravado na lente. */
.band-mag {
    position: absolute;
    left: var(--space-md);
    top: var(--space-sm);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-micro);
    letter-spacing: var(--track-caps-tight);
    color: var(--accent-lilac-pale);
    opacity: 0.7;
}

.band-frame {
    margin: 0;
}

.band-frame + .band-frame {
    margin-top: var(--space-lg);
}

/* A RÉGUA — coluna, fio à esquerda, um tique por estação. */
.band-ruler {
    display: flex;
    flex-direction: column;
    border-left: var(--rule) solid var(--hairline-strong);
}

.band-tab {
    position: relative;
    min-height: var(--touch);
    padding: var(--space-sm) 0 var(--space-md) var(--space-md);
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--ink-secondary);
    transition: color var(--dur-fast) var(--ease);
}

/* O tique cresce e vira violeta na estação ativa. */
.band-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--space-sm) + 0.55em);
    width: 8px;
    height: var(--rule);
    background: var(--hairline-strong);
    transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.band-tab-num {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-fine);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    line-height: var(--leading-flat);
}

.band-tab-lbl {
    display: block;
    margin-top: var(--space-2xs);
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-secondary);
    letter-spacing: var(--track-secondary);
    line-height: var(--leading-sub);
    max-width: 30ch;
}

.band-tab:hover {
    color: var(--ink);
}

.band-tab:hover::before {
    width: 16px;
    background: var(--accent);
}

.band-tab[aria-selected="true"] {
    color: var(--ink);
}

.band-tab[aria-selected="true"]::before {
    width: 20px;
    background: var(--accent-tick);
}

.band-frame figcaption {
    margin-top: var(--space-sm);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-micro);
    letter-spacing: var(--track-caps-tight);
    text-transform: uppercase;
    color: var(--ink-secondary);
}

/* ── Com JS: um quadro por vez, na mesma célula do grid (CLS = 0) ────────── */

[data-band="on"] .band-stage {
    display: grid;
}

[data-band="on"] .band-frame {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease);
}

[data-band="on"] .band-frame[data-ativo] {
    opacity: 1;
    visibility: visible;
}

/* O CORTE CASADO — o quadro entra em escala a PARTIR de dentro da mira do
   nível anterior, em vez de aparecer por esmaecimento. O olho lê "eu entrei
   naquela caixa". É um corte casado de cinema, não um efeito.

   Passa no teste que separa revelação de enfeite: a informação que o movimento
   carrega — DE ONDE para ONDE — também existe PARADA, na mira estática. Quem
   pede menos movimento não perde fato nenhum; --dur-slow já é zerado em
   tokens.css sob prefers-reduced-motion, então a animação some sozinha. */

[data-band="on"] .band-frame img {
    transform-origin: var(--zoom-origin, 50% 50%);
    transition: transform var(--dur-slow) var(--ease);
}

[data-band="on"] .band-frame:not([data-ativo]) img {
    transform: scale(var(--zoom-from, 1));
}

[data-band="on"] .band-frame[data-ativo] img {
    transform: none;
}

/* Com JS a frase vive na estação; sem JS ela fica no figcaption de cada
   figure, e as três aparecem empilhadas. Nunca some. */
[data-band="on"] .band-frame figcaption {
    display: none;
}

/* ── Mobile: rolagem lateral nativa ─────────────────────────────────────────
   A frase VOLTA para o figcaption. Três painéis visíveis com uma legenda única
   fora deles dessincronizam — foi bug medido a 390×844: com o quadro 60× na
   tela, a legenda continuava lendo a do 1×. */

@media (max-width: 1023px) {
    [data-band="on"] .band-stage {
        display: flex;
        gap: var(--rule);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(var(--space-md) * -1);
        padding-inline: var(--space-md);
        scrollbar-width: none;
    }

    [data-band="on"] .band-stage::-webkit-scrollbar {
        display: none;
    }

    [data-band="on"] .band-frame {
        flex: 0 0 82vw;
        scroll-snap-align: center;
        opacity: 1;
        visibility: visible;
    }

    [data-band="on"] .band-frame figcaption {
        display: block;
    }

    /* Sem corte casado no mobile: os três quadros ficam visíveis lado a lado,
       então não há "entrada" para casar — a rolagem já é o movimento. */
    [data-band="on"] .band-frame img {
        transform: none;
    }

    .band-ruler {
        flex-direction: row;
        justify-content: space-between;
        border-left: 0;
        border-top: var(--rule) solid var(--hairline-strong);
    }

    /* UX-06 + D-04 (2026-09-11): no celular a régua lia como escala decorativa —
       só 46% da faixa era tocável e o estado ativo era um tique de 1×16 px. Cada
       aba passa a ocupar um terço da faixa e o ativo é um traço da largura da
       aba, sobre a linha superior: aba, não régua. */
    .band-tab {
        flex: 1 1 0;
        padding: var(--space-sm) var(--space-xs);
        text-align: center;
    }

    .band-tab-lbl {
        display: none;
    }

    .band-tab::before {
        left: 0;
        right: 0;
        top: calc(var(--rule) * -1);
        width: auto;
        height: var(--rule);
        background: transparent;
        transition: background-color var(--dur) var(--ease), height var(--dur) var(--ease);
    }

    .band-tab:first-child::before,
    .band-tab:last-child::before {
        left: 0;
        right: 0;
    }

    .band-tab:hover::before,
    .band-tab[aria-selected="true"]::before {
        width: auto;
        height: var(--rule-strong);
        background: var(--accent-tick);
    }
}

/* ===================== HERO: A IMAGEM COMO CAMPO ========================== */
/* Terceira tentativa de imagem no hero, e a primeira que funciona — porque
   muda de espécie. As duas anteriores eram PLACAS (objeto com borda) de altura
   integral, e viravam o assunto: a tela ficava com dois sujeitos e o H1 perdia
   a primazia. Foram rejeitadas.

   Aqui a imagem não é objeto: é CAMPO. Sangra à direita e embaixo, dissolve à
   esquerda e no topo. Onde é vazia, ela É a faixa — não há aresta para o olho
   interrogar, e não há costura para defender.

   A medição que motivou a mudança: 99,2% da placa anterior ficava a menos de
   0,2 L* do fundo da faixa. Ela pagava o custo de composição de um painel de
   altura integral e não entregava imagem nenhuma. */

.hero-field {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 46%;
    padding-block-start: 112px;
    pointer-events: none;
}

.hero-field img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* O recorte muda entre telas porque o painel muda de forma: retrato alto
       no desktop, faixa larga e baixa no mobile. Mora aqui, e não numa segunda
       cópia da imagem no HTML — a cópia custava um download inteiro. */
    object-position: 60% 50%;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 240px),
        linear-gradient(to bottom, transparent 0, #000 140px);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 240px),
        linear-gradient(to bottom, transparent 0, #000 140px);
    mask-composite: intersect;
}

/* No mobile o campo desce para baixo do texto e sangra a largura toda. Não
   usar como fundo ATRÁS do texto: a imagem é escura demais para sobreviver a
   uma sobreposição, e o deck ficaria ilegível. */
@media (max-width: 1023px) {
    .hero-field {
        position: relative;
        inline-size: 100%;
        block-size: 46vw;
        max-block-size: 320px;
        padding-block-start: 0;
    }

    .hero-field img {
        object-position: 60% 45%;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px);
        mask-image: linear-gradient(to bottom, transparent 0, #000 140px);
    }
}

.regua-v {
    position: relative;
}

.regua-v-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--rule);
    background: var(--hairline-invert-strong);
}

.regua-v-ticks {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 6px;
    background-image: repeating-linear-gradient(to bottom,
            var(--hairline-invert) 0 1px, transparent 1px 16px);
}

.regua-v-station {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.regua-v-station .regua-v-label {
    text-align: right;
}

.regua-v-station .regua-v-major {
    width: 20px;
    height: var(--rule);
    background: var(--accent-tick);
}

.regua-v-station::after {
    content: "";
    position: absolute;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lilac);
}

/* Versao mobile: a mesma regua, deitada, sob os CTAs */
.regua-h {
    position: relative;
    height: 28px;
    border-bottom: var(--rule) solid var(--hairline-invert-strong);
    background-image: repeating-linear-gradient(to right,
            var(--hairline-invert) 0 1px, transparent 1px 16px);
    background-size: 100% 6px;
    background-position: left bottom;
    background-repeat: no-repeat;
}

.regua-h span {
    position: absolute;
    bottom: 0;
    width: var(--rule);
    height: 14px;
    background: var(--accent-tick);
}

.regua-h span::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -3.5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lilac);
}

/* Em telas estreitas o nowrap so vale onde cabe: rotulo maior que a coluna
   explodia o grid (formulario cortado no mobile — achado do painel). */
@media (max-width: 480px) {
    .btn {
        white-space: normal;
    }
}

/* ================== REAFIRMACAO DE UTILITARIOS DE COR ===================== */
/* Esta folha carrega por ultimo: no empate de especificidade ela vence os
   utilitarios do Tailwind. Os .t-* declaram cor — entao text-white e afins
   morriam em silencio (H2 "Comece pela avaliacao" ficou aubergine sobre
   aubergine: invisivel). Reafirmados aqui, depois da tipografia, para que
   utilitario de cor SEMPRE venca classe tipografica. */

.text-white {
    color: var(--ink-invert);
}

.text-\[var\(--ink-invert-body\)\] {
    color: var(--ink-invert-body);
}

.text-\[var\(--accent-lilac\)\] {
    color: var(--accent-lilac);
}

.text-\[var\(--ink\)\] {
    color: var(--ink);
}

.text-\[var\(--accent\)\] {
    color: var(--accent);
}
