/* 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 (.pagina-site ou .pagina-links) para as regras não vazarem de uma pra outra. */ @import url("../design-system/tokens.css"); /* 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} /* =================================================================== .pagina-site · index.html, o site de venda =================================================================== */ .pagina-site{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)} .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)} .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} .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 */ .pagina-site .video-correcao{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:var(--radius-md);background:var(--color-primary);margin-top:var(--space-4)} .pagina-site .prova{background:var(--color-bg)} .pagina-site .caso{border-top:1px solid var(--color-border);padding:var(--space-5) 0} .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 · p&b como o resto da fotografia da marca. Regras que não podem cair: 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 e CLAUDE.md regra 1. */ .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 · card do resultado mais forte da página (61 anos + caneta emagrecedora). Raio --radius-md e borda --color-border de propósito: a linguagem "documento" (raio 0 + borda accent) é exclusiva da ficha de preço (CLAUDE.md regra 2). O destaque aqui vem de escala tipográfica (números na serifada, tamanho de preço) e respiro. */ .pagina-site .caso-destaque{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-5)} .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-3) 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-5)} .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)} .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)} /* =================================================================== .pagina-links · links.html, a página de bio =================================================================== */ .pagina-links{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}