/* Design System "Eixo" · CSS compartilhado entre index.html (o site) e
   links.html (a página de bio). Tokens vêm de design-system/tokens.css,
   nunca copiados aqui. Ver CLAUDE.md.

   Escopo: index.html e links.html reusam nomes de classe iguais para coisas
   diferentes (.hero, .cta, footer), então cada página é escopada pela classe
   no <body> (.pagina-site ou .pagina-links) para as regras não vazarem de
   uma pra outra. */

/* PERFORMANCE · o @import daqui foi removido em 24/08/2026.
   Ele criava uma cadeia de requisições que bloqueava a renderização: o
   navegador só descobria o tokens.css depois de baixar E parsear este
   arquivo, então os dois vinham em série (medido: eixo.css terminava em
   63ms e o tokens.css só começava em 64ms). Agora cada página carrega os
   dois com <link> próprio, e eles baixam em paralelo.
   A regra do CLAUDE.md continua valendo: token nenhum é copiado para cá,
   a fonte da verdade segue sendo design-system/tokens.css.
   Se criar página nova, incluir OS DOIS <link>, tokens antes de eixo. */

/* reset e base compartilhados, sem nada visual page-specific */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

/* ===================================================================
   .consentimento · faixa de cookies, compartilhada pelas duas páginas
   Fora do escopo .pagina-site / .pagina-links de propósito: é o único
   elemento que aparece igual nas duas, e o fundo escuro próprio funciona
   tanto sobre a página clara quanto sobre a de bio.
   Discreta por decisão: faixa fina no rodapé, sem modal, sem sombra, sem
   animação de entrada e sem bloquear a leitura da página.
   =================================================================== */
.consentimento{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--color-primary);border-top:1px solid var(--color-accent);padding:var(--space-3) var(--space-4)}
.consentimento-linha{max-width:420px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);font-family:var(--font-body);font-size:13px;line-height:1.5}
/* --color-muted-on-dark sobre --color-primary dá 6,96:1 e passa no AA */
.consentimento p{margin:0;color:var(--color-muted-on-dark);flex:1 1 100%}
/* ALVO DE TOQUE · corrigido em 24/08/2026, apontado por duas auditorias
   independentes (leitura de CSS e medição no navegador ao vivo). A regra
   anterior era padding:0 0 2px, o que dava 13px de fonte mais 2px, ou seja
   um alvo de ~19px de altura. O mínimo recomendado é 44px, e o CLAUDE.md
   exige WCAG AA. Num banner onde os dois botões ficam lado a lado e um
   deles recusa medição, errar o toque tem consequência real.
   O sublinhado SAIU de border-bottom e virou ::after posicionado. Assim o
   padding cresce a área clicável sem afastar o traço do texto: visualmente
   o botão continua idêntico, só o alvo mudou. Manter os 10px do ::after
   em par com o padding-bottom de 12px, senão o traço descola. */
.consentimento button{position:relative;font-family:inherit;font-size:13px;line-height:1.5;font-weight:600;cursor:pointer;background:none;border:0;padding:13px 0 12px;color:var(--color-bg)}
.consentimento button::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--color-accent)}
.consentimento button:hover{color:var(--color-accent)}
.consentimento .recusar{color:var(--color-muted-on-dark);font-weight:400}
.consentimento .recusar::after{background:var(--color-muted-on-dark)}
.consentimento .recusar:hover{color:var(--color-bg)}
.consentimento .recusar:hover::after{background:var(--color-bg)}

/* ===================================================================
   .pagina-site · index.html, o site de venda
   =================================================================== */
.pagina-site{color-scheme:light;background:var(--color-bg);color:var(--color-text);font-size:16px;line-height:1.6}
.pagina-site .wrap{max-width:420px;margin:0 auto;background:var(--color-surface);min-height:100vh}
.pagina-site section{padding:var(--space-7) var(--space-5)}
/* CADÊNCIA · as cinco sections mediam 48px em cima e 48px embaixo, sem
   exceção: um intervalo só, repetido a página inteira, então nada podia
   parecer mais urgente nem mais calmo que o resto. Ritmo é o contraste entre
   apertado e generoso, e aqui cada section recebe o peso do papel que cumpre.
   ESCOPADO EM .pagina-home, não em .pagina-site: /sobre e a página local
   reusam as mesmas classes, e estas medidas foram decididas lendo a home.
   A prova entra apertada e sai larga, pra soltar a leitora dentro do preço; o
   presencial fica curto, que é o que o HTML dele já dizia querer ("seção
   enxuta de propósito, pouquíssima disponibilidade real"). */
.pagina-home .prova{padding-top:var(--space-6);padding-bottom:var(--space-8)}
.pagina-home .ficha-area{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.pagina-home .presencial{padding-top:var(--space-6);padding-bottom:var(--space-6)}

/* SANGRA · CLAUDE.md regra 1 pede fotografia "sangrando até a borda do
   container", e nenhuma mídia da página fazia isso: todas herdavam os 24px de
   padding lateral da section e ficavam como selo flutuando dentro do bloco.
   Isto desfaz esse padding no elemento, e só nele. Não usar em texto: a
   medida de leitura depende do padding da section. */
/* A CLASSE REPETIDA (.sangra.sangra) É DE PROPÓSITO, não é erro de digitação.
   .video-par, .video-correcao e .par-foto-unica declaram width:100% nas
   próprias regras, mais abaixo neste arquivo. Com especificidade igual
   (0,2,0) quem vence é a última do arquivo, então o width:100% delas
   desfazia o sangramento e a mídia ficava 372px encostada só na esquerda.
   Repetir a classe leva a regra a 0,3,0 e ela passa a valer sobre qualquer
   componente, independentemente da ordem. Assim um componente novo criado
   amanhã não quebra o utilitário sem ninguém perceber. */
.pagina-site .sangra.sangra{
  margin-left:calc(var(--space-5) * -1);
  margin-right:calc(var(--space-5) * -1);
  width:calc(100% + var(--space-5) * 2);
  max-width:none;
}
.pagina-site h1{font-family:var(--font-display);font-size:32px;line-height:1.15;font-weight:400}
.pagina-site h2{font-family:var(--font-display);font-size:24px;line-height:1.2;font-weight:400;margin-bottom:var(--space-4)}
.pagina-site h3{font-size:15px;font-weight:600;margin-bottom:var(--space-1)}
.pagina-site p{margin-bottom:var(--space-4)}
.pagina-site p:last-child{margin-bottom:0}
.pagina-site .muted{color:var(--color-muted);font-size:14px}
.pagina-site .rotulo{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted);font-weight:600}
.pagina-site em.gesto{font-family:var(--font-display);font-style:italic;color:var(--color-accent)}

/* linha de respiração: única animação da página */
.pagina-site .respiro{height:2px;background:var(--color-accent);transform-origin:left;animation:respira 5s ease-in-out infinite;margin:var(--space-5) 0}
@keyframes respira{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.pagina-site .respiro{animation:none;transform:scaleX(1)}}

/* abertura */
.pagina-site .hero{background:var(--color-primary);color:var(--color-bg);padding:var(--space-7) var(--space-5) var(--space-6)}
.pagina-site .hero h1{color:var(--color-bg)}
/* A foto do hero é RETRATO (1023x1537) e vinha recortada em 300px de altura,
   ou seja uma faixa fina tirada de uma vertical. Com o .sangra ela recupera os
   48px de largura que viravam margem, e 380px de altura ainda cabem na
   primeira dobra junto do h1 (~110px de h1 + 48px de padding + 380px de foto),
   que era a razão da ordem atual do HTML.
   object-position · num container mais ALTO o "cover" mostra MAIS da vertical,
   não menos, então o centro padrão cortaria os braços cruzados que o alt text
   descreve. 45% mantém da cabeça até abaixo da cintura. */
/* display e object-fit saíram do style inline do <img> no index.html: estilo
   inline vence stylesheet, e o desktop precisa reposicionar esta foto. Os
   valores são os mesmos que estavam lá, então no celular nada muda.
   object-fit:cover É OBRIGATÓRIO AQUI: sem ele o padrão vira `fill`, que
   ESTICA um retrato 2:3 dentro de uma caixa de 420x380 e deforma a Bruna.
   Não remover junto com o inline de novo. */
.pagina-site .hero img{display:block;object-fit:cover}
.pagina-home .hero img.sangra{height:380px;object-position:50% 45%;margin-top:var(--space-5)}
.pagina-home .hero{padding-bottom:var(--space-8)}
.pagina-site .hero .abertura{margin-top:var(--space-4);font-size:17px}
.pagina-site .hero .apoio{color:var(--color-muted-on-dark);font-size:14px;margin-top:var(--space-4)}
.pagina-site .hero .respiro{margin-bottom:0}
.pagina-site .atalho{display:inline-block;margin-top:var(--space-5);color:var(--color-bg);font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--color-accent);padding-bottom:3px;letter-spacing:.02em}
.pagina-site .atalho:hover{color:var(--color-accent)}

/* método */
.pagina-site .ponto{border-top:1px solid var(--color-border);padding:var(--space-4) 0}
/* o primeiro .ponto vinha logo depois do parágrafo de abertura com a mesma
   régua dos outros, então os quatro liam como quatro blocos soltos. Sem a
   primeira régua eles leem como UM grupo de quatro. O padding-top fica: o
   espaço acima do título é o que separa o grupo do parágrafo. */
.pagina-home section > p + .ponto{border-top:0}

/* UNIDADE DA RESPIRAÇÃO · a quebra de grid intencional da index (CLAUDE.md
   regra 2). Mesmo par recuo + régua de 2px no accent que .formacao-nota e
   .bairros-nota usam nas outras páginas. A régua marca só o ARGUMENTO e para
   antes do vídeo: envolvendo a unidade inteira ela passava por trás do vídeo
   sangrado e sobrava um pedaço solto ao lado da legenda centralizada. */
.pagina-site .unidade-respiracao{margin:var(--space-5) 0}
.pagina-site .unidade-respiracao .ponto{
  border-top:0;
  padding:var(--space-2) 0 var(--space-2) var(--space-4);
  border-left:2px solid var(--color-accent);
}
.pagina-site .unidade-respiracao .video-metodo{
  margin:var(--space-5) calc(var(--space-5) * -1) 0;
  width:calc(100% + var(--space-5) * 2);
  max-width:none;
}
.pagina-site .unidade-respiracao .voz-legenda{margin-top:var(--space-3)}
.pagina-site .ponto p{font-size:15px;margin:0}
.pagina-site .voz-legenda{font-size:13px;color:var(--color-muted);text-align:center;margin-top:var(--space-2)}
.pagina-site .video-metodo{display:block;width:100%;max-height:480px;background:var(--color-primary)}

/* prova: falas de alunas, ÚNICO lugar com aspas + atribuição */
/* border-radius:0 desde que ele sangra: canto arredondado encostado na
   borda da tela lê como erro, não como acabamento. */
.pagina-site .video-correcao{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:0;background:var(--color-primary);margin-top:var(--space-4)}
.pagina-site .prova{background:var(--color-bg)}
/* DEPOIMENTO EM ÁUDIO · era border-top + padding, ou seja, lia como
   continuação do bloco anterior e o player passava despercebido. Agora é
   card, mesma família visual do .caso-destaque (--radius-md e
   --color-border): a linguagem "documento" com raio 0 e borda accent
   continua exclusiva da ficha de preço, CLAUDE.md regra 2. */
.pagina-site .caso{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-6)}
.pagina-site .caso .rotulo{margin-bottom:var(--space-1)}
.pagina-site .caso-origem{font-size:13px;color:var(--color-muted);margin-bottom:var(--space-4)}
.pagina-site .caso-audio{width:100%;margin-bottom:var(--space-4)}
.pagina-site .caso-fala{font-family:var(--font-display);font-style:italic;font-size:15px;line-height:1.5;margin-bottom:var(--space-3)}
.pagina-site .caso-quem{font-size:13px;color:var(--color-muted);letter-spacing:.04em;margin:0}

/* ANTES E DEPOIS · em cores desde 24/08/2026, quando a exigência de preto e
   branco saiu da regra 1 do CLAUDE.md. Nestes pares a cor até ajuda: p&b
   achatava a diferença de tônus que é justamente o que a foto documenta.
   Regras que não podem cair, e essas continuam inteiras: autorização escrita
   de cada aluna, contexto junto de cada par, e nenhuma promessa de prazo ou
   resultado. Ver docs/01-plano-v3.md seção 5. */
.pagina-site .par{border-top:1px solid var(--color-border);margin-top:var(--space-5);padding-top:var(--space-5)}
.pagina-site .par-fotos{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pagina-site .par-fotos figure{margin:0;position:relative}
.pagina-site .par-fotos figcaption{position:absolute;bottom:0;left:0;background:var(--color-primary);color:var(--color-bg);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:var(--space-1) var(--space-2)}
/* imagem única de antes/depois, quando o arquivo já vem com os dois lados
   montados (ex.: print que não dá pra recortar sem artefato). Raio 0, como
   o resto da prova documental (image-slot sem shape="rounded" já é raio 0
   por padrão, o vídeo replica isso pra Par 1 e Par 2 lerem como a mesma
   família visual em vez de dois formatos improvisados). */
.pagina-site .par-foto-unica{width:100%}
.pagina-site .video-par{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:0;background:var(--color-primary)}
.pagina-site .par-contexto{font-size:14px;color:var(--color-text);margin-top:var(--space-3)}
/* resultados em lista, quando o contexto tem números que merecem destaque
   próprio. Mesmo marcador "·" da ficha (CLAUDE.md: nada de ícone de
   biblioteca nem checkmark decorativo). */
.pagina-site .par-resultados{list-style:none;margin-top:var(--space-3)}
.pagina-site .par-resultados li{font-size:14px;font-weight:600;padding:var(--space-1) 0}
.pagina-site .par-resultados li:before{content:"·";color:var(--color-accent);margin-right:var(--space-2);font-weight:700}

/* CASO EM DESTAQUE · o resultado mais forte da página (61 anos + caneta
   emagrecedora). O CARD FOI DISSOLVIDO em 30/08/2026: era
   .wrap > .prova > .caso-destaque > vídeo, três caixas antes de chegar na
   prova, e o vídeo renderizava com 336px dentro de uma coluna de 420px.
   Cada camada custava 24px de padding e desenhava mais um retângulo numa
   página que já tinha 18 réguas e bordas visíveis.
   O destaque agora vem de onde o comentário anterior já dizia que deveria vir,
   escala tipográfica e respiro, mais o sangramento do vídeo. Sem borda e sem
   fundo próprio, a linguagem "documento" (raio 0 + borda accent) volta a ser
   exclusiva da ficha de preço, sem card concorrendo (CLAUDE.md regra 2). */
.pagina-site .caso-destaque{background:transparent;border:0;border-radius:0;padding:0;margin-top:var(--space-6)}
.pagina-site .caso-destaque .rotulo{margin-bottom:var(--space-2)}
.pagina-site .destaque-linha{display:flex;align-items:baseline;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
.pagina-site .destaque-num{font-family:var(--font-display);font-size:30px;color:var(--color-accent);line-height:1;flex-shrink:0}
.pagina-site .destaque-texto{font-size:14px}
.pagina-site .caso-destaque .video-par{margin-top:var(--space-6)}
.pagina-site .caso-destaque .par-contexto{margin-top:var(--space-4)}
.pagina-site .ressalva{font-size:12px;color:var(--color-muted);margin-top:var(--space-6);line-height:1.5}

/* ficha: raio 0, borda accent fechada nos 4 lados. Decisão desta sessão:
   abandonar o sangramento assimétrico à direita (fazia sentido só com a
   ficha rotacionada, e a rotação já tinha sido removida numa sessão
   anterior sem atualizar isso, o que deixava a borda parecendo faltando
   um lado). Ver CLAUDE.md regra 2, atualizada pra refletir isso. */
.pagina-site .ficha{position:relative;border:1px solid var(--color-accent);border-radius:0;background:var(--color-surface);padding:var(--space-6) var(--space-5) var(--space-5);margin:var(--space-5) 0 var(--space-6)}
.pagina-site .ficha .rotulo{position:absolute;top:calc(var(--space-4) * -0.5);left:var(--space-4);background:var(--color-surface);padding:0 var(--space-2);color:var(--color-accent);font-family:var(--font-body);margin:0}
.pagina-site .ficha ul{list-style:none;margin:var(--space-4) 0}
.pagina-site .ficha li{font-size:15px;padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}
.pagina-site .ficha li:before{content:"·";color:var(--color-accent);margin-right:var(--space-2);font-weight:700}
.pagina-site .limite{font-size:14px;color:var(--color-muted);background:var(--color-bg);padding:var(--space-4);margin-bottom:var(--space-5)}
.pagina-site .preco-antes{font-size:15px;margin-bottom:var(--space-3)}
.pagina-site .preco{font-family:var(--font-display);font-size:34px;color:var(--color-accent);line-height:1}
.pagina-site .preco-unico{font-size:15px;font-family:var(--font-body);color:var(--color-text)}
.pagina-site .preco-depois{font-size:14px;color:var(--color-muted);margin-top:var(--space-3)}
.pagina-site .garantia{font-size:14px;background:var(--color-bg);border-left:2px solid var(--color-accent);padding:var(--space-3) var(--space-4);margin-top:var(--space-4)}
.pagina-site .cta{display:block;text-align:center;background:var(--color-accent);color:var(--color-surface);text-decoration:none;padding:var(--space-4);font-weight:600;font-size:16px;border-radius:var(--radius-md);margin-top:var(--space-5);border:none;width:100%;cursor:pointer;font-family:var(--font-body)}
.pagina-site .cta:hover{background:var(--color-accent-hover)}
.pagina-site .subnota{text-align:center;font-size:13px;color:var(--color-muted);margin-top:var(--space-3)}

/* nao-e */
.pagina-site .naoe{background:var(--color-bg)}

/* AGENDAR · o calendário é a escassez. Nada de número escrito à mão. */
.pagina-site .passos{counter-reset:passo;list-style:none;margin:var(--space-5) 0}
.pagina-site .passos li{counter-increment:passo;position:relative;padding-left:var(--space-6);padding-bottom:var(--space-4);font-size:15px}
.pagina-site .passos li:before{content:counter(passo);position:absolute;left:0;top:0;width:22px;height:22px;border:1px solid var(--color-accent);color:var(--color-accent);border-radius:var(--radius-pill);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
/* placeholder enquanto a conta Cal.com não existia. Mantido no CSS caso
   o embed precise de um fallback visual de novo (ex.: erro de carregamento). */
.pagina-site .calendario{border:1px dashed var(--color-border);background:var(--color-bg);padding:var(--space-6) var(--space-4);text-align:center;color:var(--color-muted);font-size:13px;line-height:1.8;margin:var(--space-5) 0}
/* embed real do Cal.com. min-height evita o salto de layout enquanto o
   iframe carrega (ele injeta o próprio iframe dentro desta div). */
.pagina-site #cal-booking{width:100%;min-height:600px;border-top:1px solid var(--color-border);margin:var(--space-5) 0;padding-top:var(--space-5)}

/* presencial: tile neutro, sem accent, sem CTA de compra */
.pagina-site .presencial{background:var(--color-primary);color:var(--color-bg)}
.pagina-site .presencial h2{color:var(--color-bg)}
.pagina-site .presencial p{color:var(--color-muted-on-dark);font-size:15px}
.pagina-site .presencial label{color:var(--color-bg)}
.pagina-site .presencial .ajuda{color:var(--color-muted-on-dark)}
.pagina-site .cta-fantasma{display:block;text-align:center;text-decoration:none;background:transparent;color:var(--color-bg);border:1px solid var(--color-muted-on-dark);padding:var(--space-4);font-weight:600;font-size:15px;border-radius:var(--radius-md);margin-top:var(--space-5);width:100%;cursor:pointer;font-family:var(--font-body);box-sizing:border-box}
.pagina-site .cta-fantasma:hover{border-color:var(--color-bg)}

/* formulário */
.pagina-site .campo{margin-bottom:var(--space-5)}
.pagina-site label{display:block;font-size:14px;font-weight:600;margin-bottom:var(--space-2)}
.pagina-site input[type=text],.pagina-site input[type=tel],.pagina-site select,.pagina-site textarea{width:100%;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-body);font-size:16px;background:var(--color-surface);color:var(--color-text)}
.pagina-site textarea{min-height:80px;resize:vertical}
.pagina-site .ajuda{font-size:13px;color:var(--color-muted);margin-top:var(--space-2)}
.pagina-site .opcao{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) 0;font-size:15px;font-weight:400;border-bottom:1px solid var(--color-border)}
.pagina-site .opcao input{margin-top:5px;accent-color:var(--color-accent);flex-shrink:0}
.pagina-site .lgpd{font-size:13px;color:var(--color-muted);background:var(--color-bg);padding:var(--space-4);border-radius:var(--radius-md)}

/* PLACEHOLDER BLOQUEANTE · não publicar com isto na tela. */
.pagina-site .confirmar{background:#FFE9A8;color:#5C4A00;border:1px dashed #B08900;padding:1px var(--space-2);font-weight:600;font-size:.9em}

/* porta humana: presente, mas com peso visual menor que o botão de agendar */
.pagina-site .duvida{border-top:1px solid var(--color-border);margin-top:var(--space-6);padding-top:var(--space-5)}
.pagina-site .duvida p{margin-bottom:var(--space-2)}
/* link dentro de texto corrido. Não existia no sistema: até aqui todo link
   do site era bloco (.cta, .cta-fantasma) ou linha própria (.cta-linha,
   .atalho), então <a> no meio de frase sairia azul padrão do navegador.
   Accent sobre o fundo claro dá 5,2:1 e passa no AA exigido pelo CLAUDE.md. */
.pagina-site .link{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.pagina-site .link:hover{color:var(--color-accent-hover)}

.pagina-site .cta-linha{display:inline-block;margin-top:var(--space-3);color:var(--color-accent);font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid var(--color-accent);padding-bottom:2px}
.pagina-site .cta-linha:hover{color:var(--color-accent-hover);border-color:var(--color-accent-hover)}

/* rodapé */
.pagina-site footer{background:var(--color-primary);color:var(--color-muted-on-dark);padding:var(--space-6) var(--space-5);text-align:center;font-size:13px}
.pagina-site .repeticao{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--color-bg)}
.pagina-site footer a{color:var(--color-muted-on-dark);display:block;margin-top:var(--space-4)}
/* NAP · precisa anular o display:block e o margin-top da regra acima, senão o
   telefone e a cidade quebram em duas linhas e param de ler como um dado só.
   O padding vertical existe pelo mesmo motivo dos botões do banner de cookies:
   link de telefone é para ser tocado com o polegar, e 13px de fonte sozinhos
   dariam um alvo de ~19px. line-height declarado porque inline-block não
   herda o do rodapé.
   SEM border-bottom aqui de propósito: o padding empurra a borda para a base
   da área clicável, longe do texto, e ela soma com o sublinhado padrão do
   link, o que desenha dois traços e lê como risco solto. O sublinhado nativo
   já marca que é link, igual aos outros do rodapé. */
.pagina-site .nap{margin-top:var(--space-4);color:var(--color-muted-on-dark)}
.pagina-site .nap a{display:inline-block;margin-top:0;padding:13px 0 12px;line-height:1.5;color:var(--color-bg)}
.pagina-site .nap a:hover{color:var(--color-accent)}
.pagina-site .nap span{margin:0 var(--space-2)}

/* PÁGINA LOCAL · personal-trainer-analia-franco-tatuape/index.html
   Reusa .pagina-site inteira (hero, .ponto, .cta, .presencial, footer). Só o
   que não existia no sistema entra aqui. Nenhum valor fora dos tokens. */

/* migalha: caminho de volta pro site, dentro do hero escuro */
.pagina-site .migalha{font-size:12px;color:var(--color-muted-on-dark);letter-spacing:.04em;margin-bottom:var(--space-4)}
.pagina-site .migalha a{color:var(--color-bg);text-decoration:none;border-bottom:1px solid var(--color-accent);padding-bottom:2px}
.pagina-site .migalha a:hover{color:var(--color-accent)}

/* bairros: a QUEBRA DE GRID INTENCIONAL exigida pelos anti-tells de IA
   (CLAUDE.md). Duas colunas para os bairros confirmados, e a nota de região
   atravessando as duas, desalinhada de propósito. A borda de 2px no accent
   só existe no item que quebra o grid: é o que faz a assimetria ler como
   decisão em vez de bug, o mesmo problema que derrubou a ficha rotacionada. */
/* auto-fit com minmax em vez de 1fr 1fr fixo: abaixo de ~360px "Anália
   Franco" com o marcador não cabia em 135px e quebrava em duas linhas,
   desalinhando os dois cards. Agora vira uma coluna só antes de apertar, e a
   nota continua atravessando a largura inteira nos dois casos. */
.pagina-site .bairros{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-2);margin:var(--space-5) 0}
.pagina-site .bairros li{font-size:15px;font-weight:600;background:var(--color-bg);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.pagina-site .bairros li:before{content:"·";color:var(--color-accent);margin-right:var(--space-2);font-weight:700}
.pagina-site .bairros .bairros-nota{grid-column:1 / -1;font-weight:400;font-size:14px;color:var(--color-muted);background:transparent;border-left:2px solid var(--color-accent);border-radius:0;padding-left:var(--space-4)}
.pagina-site .bairros .bairros-nota:before{content:none}

/* PÁGINA SOBRE · sobre/index.html
   formacao: lista seca de credenciais. Mesmo marcador "·" da ficha e das
   demais listas do sistema (CLAUDE.md: nada de ícone de biblioteca).
   O último item, .formacao-nota, é a QUEBRA DE GRID INTENCIONAL da página
   (anti-tell de IA): sai do padrão dos outros, recuado e com borda no
   accent, porque ele é de outra natureza (congresso, não titulação). */
.pagina-site .formacao{list-style:none;margin:var(--space-5) 0 0}
.pagina-site .formacao li{font-size:15px;padding:var(--space-3) 0;border-top:1px solid var(--color-border)}
.pagina-site .formacao li:before{content:"·";color:var(--color-accent);margin-right:var(--space-2);font-weight:700}
.pagina-site .formacao .formacao-nota{margin-left:var(--space-5);padding-left:var(--space-4);border-top:0;border-left:2px solid var(--color-accent);font-size:14px;color:var(--color-muted);margin-top:var(--space-4)}
.pagina-site .formacao .formacao-nota:before{content:none}

/* faq: mesma família visual dos .ponto do método, fundo --color-bg pra
   separar do bloco anterior sem inventar superfície nova */
.pagina-site .faq{background:var(--color-bg)}
.pagina-site .faq .ponto h3{font-size:16px;margin-bottom:var(--space-2)}

/* vídeo do presencial · no celular sangra como o resto da mídia (regra 1) */
.pagina-site .video-presencial{display:block;width:100%;background:var(--color-primary-soft);margin-top:var(--space-5)}

/* SUPERFÍCIES DO NAVEGADOR · seleção de texto na tinta da marca em vez do azul
   padrão do Chrome. É a parte que nenhum design system lembra de vestir. */
.pagina-site ::selection{background:var(--color-accent);color:var(--color-surface)}

/* ===================================================================
   DESKTOP · 01/09/2026
   ===================================================================
   O site era mobile-ONLY: .wrap travava em 420px e não havia UMA media query
   de largura no arquivo. Em 1440px isso dava 420px de conteúdo e 510px de
   fundo vazio de cada lado.
   TUDO AQUI É ADITIVO: vive dentro de media query, então o celular não enxerga
   nada. Conferido medindo em 320, 390 e 420px contra a versão publicada.
   A links.html fica de fora de propósito (escopo .pagina-site/.pagina-home):
   é link de bio, aberta quase sempre do Instagram no celular.

   A REGRA QUE ORGANIZA TUDO: o texto corre numa coluna e a mídia acompanha na
   outra. Foi assim que a Cris pediu, seção por seção, e é o que mantém a
   leitura contínua em vez de picada por vídeos no meio.

   LARGURA DE MÍDIA É A RESOLUÇÃO REAL DO ARQUIVO, nunca "quanto cabe":
     bruna-hero.webp        1023x1537 retrato
     respiracao.mp4         1024x576  paisagem
     antes-depois-par2.mp4   480x702  retrato
     correcao-aluna.mp4      576x1024 retrato
     antes-depois-par1.webp  860x757
     presencial.mp4          720x1280 retrato (1280x720 com rotation=-90)
   Ampliar acima disso borra. Se chegar arquivo maior, é o teto aqui que sobe.
   =================================================================== */

@media (min-width:1100px){
  /* TUDO AQUI É .pagina-home, nunca .pagina-site. /sobre e a página local
     reusam .pagina-site inteira mas NÃO têm layout de desktop: se a largura e
     a escala tipográfica valessem para elas, o wrap iria a 1240px e os
     parágrafos passariam a correr em linhas de 1192px, ilegíveis, sem nenhuma
     composição de duas colunas para justificar. Elas seguem em 420px de
     propósito, como estão no ar hoje. Se um dia ganharem desktop, é decisão a
     tomar olhando cada uma. */

  .pagina-home .wrap{max-width:1240px}

  /* tipografia para distância de braço, não de mão */
  .pagina-home h1{font-size:56px;line-height:1.05;letter-spacing:-.02em}
  .pagina-home h2{font-size:36px;line-height:1.15}
  .pagina-home .hero .abertura{font-size:19px}

  /* o .sangra existe pro celular, onde a mídia encosta nas bordas da coluna.
     Dentro das grades do desktop ele puxaria a mídia pra fora da célula, então
     é desligado aqui. A dupla classe é pra vencer o peso 0,3,0 da regra dele. */
  .pagina-home .sangra.sangra{margin-left:0;margin-right:0;width:100%}


  /* ---------- 1. ABERTURA · promessa e Bruna, lado a lado ----------
     A coluna da foto tem largura fixa e a foto tem altura automática: ela
     aparece inteira, na proporção do arquivo. A grade tem a última linha em
     1fr justamente pra absorver a sobra de altura da foto sem abrir buracos
     entre as linhas de texto, que foi o defeito que derrubou a tentativa
     anterior de duas colunas. */
  .pagina-home .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 440px;
    grid-template-rows:min-content min-content min-content min-content 1fr;
    column-gap:var(--space-8);
    padding-top:var(--space-8);
    padding-bottom:var(--space-8);
  }
  .pagina-home .hero > h1{grid-column:1;grid-row:1;margin-bottom:var(--space-5)}
  .pagina-home .hero > .abertura{grid-column:1;grid-row:2;margin-top:0}
  .pagina-home .hero > .apoio{grid-column:1;grid-row:3}
  .pagina-home .hero > .cta{grid-column:1;grid-row:4;justify-self:start;min-width:320px}
  .pagina-home .hero > .respiro{grid-column:1;grid-row:5;align-self:start;margin:var(--space-6) 0 0}
  /* SEM object-fit, SEM height fixa, SEM crop: proporção do arquivo. */
  /* A FOTO TERMINA ONDE O BOTÃO TERMINA (pedido da Cris). Sem corte ela tem
     440x661 e sobrava 173px abaixo do CTA, então a coluna da direita ficava
     mais pesada que a da esquerda e o botão pairava no meio do nada.
     488px é medido, não chutado: é a distância do topo do h1 até a base do
     botão. O corte de 173px sai de cima E de baixo, que foi o que ela
     autorizou; a proporção horizontal não muda, então NÃO há deformação,
     só enquadramento mais fechado.
     object-position 50% 30% escolhido comparando 20/30/40/50% lado a lado:
     em 30% sobra respiro acima do cabelo e ainda aparecem os braços
     cruzados, que é o que o alt text descreve. Não subir de 40%: começa a
     raspar o topo do cabelo. */
  .pagina-home .hero img.sangra.sangra{
    grid-column:2;grid-row:1 / 5;
    width:440px;height:488px;
    object-fit:cover;object-position:50% 30%;
    align-self:start;margin:0;max-width:none;
  }


  /* ---------- 2. MÉTODO · tese à esquerda, pontos à direita ----------
     O h2 e o parágrafo de tese param numa coluna estreita e os quatro pontos
     correm ao lado. É a leitura de ensaio: a afirmação de um lado, o
     desdobramento do outro. */
  /* TODO O TEXTO NA ESQUERDA, SÓ O VÍDEO NA DIREITA, igual ao agendar.
     A versão anterior punha o h2 e a tese numa coluna e os quatro pontos na
     outra, com o vídeo no meio deles: a leitura quebrava em dois lugares
     (título de um lado, pontos do outro) e os textos ficavam picados em cima
     e embaixo do vídeo, sem continuidade. Agora o método se lê de uma vez só,
     de cima a baixo, e o vídeo acompanha ao lado.
     display:contents na .unidade-respiracao faz os filhos dela virarem itens
     desta grade, sem mexer no HTML: assim o ponto da respiração fica na
     coluna de texto e o vídeo vai pra direita, mantendo a régua no accent que
     é a quebra de grid intencional da página (CLAUDE.md regra 2). */
  .pagina-home .metodo{
    display:grid;
    grid-template-columns:minmax(0,1fr) 460px;
    grid-template-rows:repeat(6,min-content) 1fr;
    column-gap:var(--space-8);
  }
  .pagina-home .metodo > h2,
  .pagina-home .metodo > p,
  .pagina-home .metodo > .ponto{grid-column:1}
  .pagina-home .metodo > p{font-size:17px}
  .pagina-home .metodo > .unidade-respiracao{display:contents}
  .pagina-home .metodo .unidade-respiracao > .ponto{grid-column:1;margin:var(--space-2) 0}
  .pagina-home .metodo-video{grid-column:2;grid-row:1 / -1;align-self:start}
  .pagina-home .metodo-video .video-metodo{
    width:460px;max-width:460px;max-height:none;
    object-fit:contain;margin:0;
  }
  .pagina-home .metodo-video .voz-legenda{text-align:left;margin-top:var(--space-3)}


  /* ---------- 3. PROVA · duas colunas de verdade ----------
     Ideia da Cris: os dois antes-e-depois lado a lado, cada texto embaixo do
     seu. Duas tentativas antes desta, e o que cada uma ensinou:

     1ª) colunas iguais de 564px e as duas mídias na MESMA linha de grade.
         O vídeo é retrato (480x702) e a foto é deitada (860x757), então
         deram 702px e 496px de altura: 206px de buraco embaixo da foto.
     2ª) colunas calculadas (394 e 654) pra que as duas mídias terminassem na
         mesma altura. Resolveu o buraco e criou outro problema: a coluna da
         esquerda ficou com 394px, e os números e o contexto espremeram.
         Foi o que a Cris chamou de "perdeu a dimensão de coluna", e ela está
         certa: eu tinha dimensionado a COLUNA pela mídia, quando é a mídia
         que tem de caber na coluna.

     3ª, esta) as duas colunas voltam a ser iguais, e cada caso é um bloco que
         corre sozinho de cima a baixo: .caso-destaque na esquerda com rótulo,
         números, vídeo e contexto; .par na direita com a foto e o contexto
         dela. Sem display:contents e sem linha compartilhada, então nenhuma
         altura precisa bater com a outra e não há buraco: cada coluna
         simplesmente termina onde o conteúdo dela termina.
         O contexto continua colado na sua mídia, que é a exigência do CONFEF.
     Nenhuma mídia é ampliada além do arquivo: o vídeo trava nos 480px reais
     dentro de uma coluna de 524. */
  .pagina-home .prova{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--space-8);
    align-items:start;
  }
  /* O TÍTULO PRECISA DE AR. Esta seção não tem card nem fundo próprio em volta
     do conteúdo, então com os 16px padrão do h2 ele encostava no rótulo e lia
     como parte do primeiro caso, não como título da seção. Com --space-7 ele
     volta a se anunciar como título. */
  .pagina-home .prova > h2{grid-column:1 / -1;margin-bottom:var(--space-7)}
  .pagina-home .prova > .caso-destaque{grid-column:1}
  /* coluna da direita: a foto do Instagram, o contexto dela e, logo abaixo, a
     mensagem de voz. Ficam juntas de propósito (pedido da Cris): as duas vêm
     do mesmo lugar, a aluna que mandou o áudio e a foto com a marca do
     @studiobrunasiqueira. Como é um bloco só, ele corre sozinho e a coluna da
     direita deixa de terminar muito antes da esquerda. */
  /* A COLUNA É FLEX SÓ PRA PODER INVERTER A ORDEM VISUAL: a mensagem de voz
     sobe pro topo (order:-1) e a foto fica embaixo dela. Pedido da Cris.
     Feito com `order` e não movendo o HTML de propósito: no celular a ordem
     continua sendo foto e depois áudio, que é a ordem publicada hoje.
     Do lado prático também fecha melhor: o card do áudio tem altura fixa e
     alinha com os números da coluna da esquerda, então as duas colunas
     começam com um bloco de texto e terminam com uma imagem. */
  .pagina-home .prova > .prova-coluna2{grid-column:2;display:flex;flex-direction:column}
  .pagina-home .prova-coluna2 > .caso{order:-1;margin:0 0 var(--space-6)}
  .pagina-home .prova-coluna2 > .par{border-top:0;margin:0;padding-top:0}

  /* o vídeo trava na resolução real; a foto pode ocupar a coluna inteira */
  .pagina-home .prova .video-par.sangra.sangra{
    width:100%;max-width:480px;height:auto;max-height:none;
    object-fit:initial;margin:var(--space-4) 0 0;
  }
  .pagina-home .prova .par-foto-unica.sangra.sangra{
    width:100%;max-width:860px;margin:0;
  }
  .pagina-home .destaque-num{font-size:40px}

  /* MENSAGEM DE VOZ · texto centralizado (pedido da Cris). Ela agora vive
     dentro da coluna da direita, embaixo do antes e depois, então a largura
     já vem da coluna e não precisa de teto próprio. */
  .pagina-home .prova-coluna2 > .caso{text-align:center}
  .pagina-home .prova > .ressalva{grid-column:1 / -1}

  /* ---------- 4. FICHA · documento, e só ----------
     Não vira faixa de 1112px: continua do tamanho de um papel. */
  /* O documento fica CENTRALIZADO, e é a única coisa centralizada da página.
     Encostado à esquerda ele deixava metade da seção vazia e parecia ter
     sobrado; no centro, ele lê como o papel que a página inteira estava
     construindo. É a pausa antes do agendamento. */
  .pagina-home .ficha{max-width:600px;margin-left:auto;margin-right:auto}


  /* ---------- 5. AGENDAR · texto e vídeo em cima, calendário embaixo ------
     O Cal.com é embed de POPUP: um botão .cta abre o Booker por cima. O embed
     inline foi abandonado em 01/09/2026 porque ocupava a seção inteira
     (medido: 1192x1566 em week_view, 480x1081 em month_view).
     O texto corre na esquerda e o vídeo de correção acompanha na direita.
     AS LINHAS SÃO EXPLÍCITAS de propósito: sem grid-template-rows, o
     `grid-row: 1 / -1` do vídeo não atravessa nada, porque `-1` aponta pro fim
     da grade explícita, que sem esta declaração é a linha 1. O vídeo ficava
     sozinho na linha 1, inflava ela e empurrava o texto todo pra baixo dele. */
  .pagina-home .agendar{
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    grid-template-rows:repeat(6,min-content) 1fr;
    column-gap:var(--space-8);
    align-items:start;
  }
  .pagina-home .agendar > h2{grid-column:1;grid-row:1}
  .pagina-home .agendar > p{grid-column:1;grid-row:2;max-width:62ch}
  .pagina-home .agendar > .limite{grid-column:1;grid-row:3;max-width:62ch}
  /* O VÍDEO ATRAVESSA ATÉ A ÚLTIMA LINHA, que é 1fr e existe só para absorver
     a sobra de altura dele. Antes ele ia de 1 a 4, ou seja cobria h2,
     parágrafo e aviso: como um item que atravessa linhas ESTICA essas linhas
     pra caber, os 711px do vídeo eram distribuídos entre as três e cada frase
     ficava num vão enorme. Com o absorvedor no fim, as linhas de texto voltam
     ao tamanho do texto e a sobra cai toda embaixo.
     Terceira vez que este mesmo erro aparece nesta folha (hero, caso em
     destaque e aqui): item alto atravessando linhas de texto SEMPRE precisa de
     uma faixa 1fr no fim para receber a diferença. */
  .pagina-home .agendar > .agendar-video{grid-column:2;grid-row:1 / -1;align-self:start}
  .pagina-home .agendar-video .video-correcao.sangra.sangra{
    width:100%;max-width:400px;height:auto;max-height:none;
    object-fit:initial;margin:0;
  }
  .pagina-home .agendar-video .voz-legenda{text-align:left;margin-top:var(--space-3)}
  /* O botão que abre o Cal é um .cta normal do Eixo, na coluna de texto, no
     lugar onde o CTA sempre esteve. O calendário abre por cima quando ela
     clica, então a seção não carrega mais o widget inteiro.
     width:auto porque o .cta base traz width:100% e item de grade estica:
     sem isso o botão pega a coluna toda e volta a ler como faixa. */
  .pagina-home .agendar > .cta{
    grid-column:1;grid-row:4;justify-self:start;
    width:auto;min-width:360px;margin-top:var(--space-5);
  }
  .pagina-home .agendar > .passos{grid-column:1;grid-row:5;margin-top:var(--space-6)}
  .pagina-home .agendar > .duvida{grid-column:1 / -1;grid-row:6}

  /* ---------- 6. PRESENCIAL · compacto de propósito ----------
     O vídeo estava com 360px de largura, o que dá 640px de altura (é retrato),
     enquanto a coluna de texto some em ~300px. Sobrava meia tela de vazio, e
     numa seção que o próprio HTML diz ser "enxuta de propósito, pouquíssima
     disponibilidade real" isso a transformava no bloco escuro mais alto da
     página, com o peso trocado.
     O vídeo cai pra 280px (498px de altura) e as duas ações ganham corpo, pra
     coluna da esquerda encher a linha em vez de terminar no meio. */
  .pagina-home .presencial{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    grid-template-rows:min-content min-content min-content 1fr;
    column-gap:var(--space-8);
  }
  .pagina-home .presencial > h2{grid-column:1;grid-row:1}
  .pagina-home .presencial > p{grid-column:1;grid-row:2;max-width:52ch}
  .pagina-home .presencial > .atalho{grid-column:1;grid-row:3;justify-self:start;margin-top:var(--space-6)}
  .pagina-home .presencial > .cta-fantasma{
    grid-column:1;grid-row:4;justify-self:start;align-self:start;
    width:auto;min-width:380px;margin-top:var(--space-5);
  }
  .pagina-home .presencial > .video-presencial{
    grid-column:2;grid-row:1 / -1;align-self:start;
    margin:0;width:280px;height:auto;max-width:none;object-fit:initial;
  }

  /* ---------- 7. RODAPÉ ---------- */
  .pagina-home footer{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    column-gap:var(--space-8);
    text-align:left;
    align-items:baseline;
  }
  .pagina-home footer .repeticao{grid-column:1;grid-row:1}
  .pagina-home footer nav{grid-row:1}
  .pagina-home footer nav a{margin-top:0}
  .pagina-home footer .nap{grid-column:1 / -1;grid-row:2;margin-top:var(--space-6)}
  .pagina-home footer > p:last-child{grid-column:1 / -1;grid-row:3}


  /* MEDIDA DE LEITURA · nenhuma linha de texto passa disso, em nenhuma coluna */
  .pagina-home .metodo > p,
  .pagina-home .prova > h2,
  .pagina-home .par-contexto,
  .pagina-home .caso-fala,
  .pagina-home .ressalva,
  .pagina-home .agendar > p,
  .pagina-home .limite,
  .pagina-home .presencial > p{max-width:62ch}
}

/* ===================================================================
   .pagina-links · links.html, a página de bio
   =================================================================== */
.pagina-links{color-scheme:dark;background:var(--color-primary);color:var(--color-bg);font-weight:400;line-height:1.5}
.pagina-links a{color:inherit}

.pagina-links .page{max-width:420px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}

/* hero */
.pagina-links .hero{position:relative;height:300px;overflow:hidden}
.pagina-links .hero img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.pagina-links .hero-placeholder{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-5);background:var(--color-primary-soft);color:var(--color-muted-on-dark);font-size:.8rem;letter-spacing:.02em}

/* nome e tagline */
.pagina-links .identity{padding:var(--space-6) var(--space-5) 0;text-align:center}
.pagina-links .identity h1{font-family:var(--font-display);font-weight:400;font-size:2rem;margin:0 0 var(--space-2);letter-spacing:.01em}
.pagina-links .identity .tagline{margin:0;font-size:1rem;color:var(--color-muted-on-dark)}
.pagina-links .identity .tagline em{font-style:italic;font-family:var(--font-display);color:var(--color-bg);border-bottom:2px solid var(--color-accent);padding-bottom:1px}
.pagina-links .identity .tagline-detail{margin:var(--space-3) 0 0;font-size:.88rem;color:var(--color-muted-on-dark)}

/* linha de respiração */
.pagina-links .breath-line{width:64px;height:2px;background:var(--color-accent);margin:var(--space-5) auto var(--space-6);transform-origin:left;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.pagina-links .breath-line{animation:none;transform:scaleX(1)}}

/* botões de contato */
.pagina-links .cta-group{display:flex;flex-direction:column;gap:var(--space-4);margin:0 var(--space-5) var(--space-5)}
.pagina-links .cta{display:block;text-align:center;text-decoration:none;font-weight:600;font-size:1rem;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);transition:background .15s ease,border-color .15s ease}
.pagina-links .cta-primary{background:var(--color-accent);color:var(--color-bg);border:1px solid var(--color-accent)}
.pagina-links .cta-primary:hover,.pagina-links .cta-primary:focus-visible{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}
.pagina-links .cta-secondary{background:transparent;color:var(--color-bg);border:1px solid var(--color-muted-on-dark)}
.pagina-links .cta-secondary:hover,.pagina-links .cta-secondary:focus-visible{border-color:var(--color-bg)}
.pagina-links .cta-detail{display:block;font-weight:400;font-size:.78rem;color:var(--color-muted-on-dark);margin-top:var(--space-1)}

/* rodapé */
.pagina-links footer{margin-top:auto;text-align:center;padding:0 var(--space-5) var(--space-7)}
.pagina-links footer nav a{font-size:.78rem;color:var(--color-muted-on-dark);text-decoration:none}
.pagina-links footer nav a:hover{color:var(--color-bg);text-decoration:underline}