/*
* BASE.CSS — Reset, tipografia base, utilitários de layout
* Projeto: "O Novo Sistema" (Altis Lisboa / Ana Lisboa) — rebrand local do
* scaffold de reconstrução do site "Tradutor de Almas" (andreavermontpsicanalise.com).
*
* ============================================================================
* AÇÃO PENDENTE PARA O AGENTE DE ASSEMBLY — de Google Fonts
* ============================================================================
* Este arquivo NÃO pode editar index.html. A fonte de apoio do corpo de texto
* ("Instrument Sans", ver decisão documentada no topo de styles/tokens.css)
* precisa ser carregada via Google Fonts. Cole a tag abaixo dentro de ,
* ANTES do (para evitar
* flash de fonte errada), exatamente como está:
*
*
*
*
*
* A fonte de display (RizomaM) NÃO precisa de — é self-hosted via
* @font-face abaixo, apontando para assets/fonts/RizomaM-Regular.otf.
* ============================================================================
*
* ============================================================================
* CONVENÇÃO DE BREAKPOINTS (obrigatória para TODOS os agentes de seção)
* ============================================================================
*
* Larguras observadas/capturadas durante o reconhecimento (ver
* docs/recon-animacoes-responsividade.md, Parte 2):
*
* 1440px → Desktop (referência principal, é o layout "base" sem media query)
* 1024px → Desktop comprimido (mesma estrutura do 1440, margens reduzidas —
* sem reflow estrutural grande; estimado nos tokens visuais)
* 768px → Tablet (PONTO DE QUEBRA ESTRUTURAL: hero empilha, grids de 3 vão
* para 1–2 colunas, cronograma tende a empilhar)
* 430px → Mobile grande (todas as grids colapsam para 1 coluna, cards de
* preço empilham verticalmente)
* 375px → Mobile pequeno (mesmo layout do 430px, apenas mais compacto —
* NÃO introduz nenhuma quebra estrutural nova, só ajustes finos de
* fonte/padding)
*
* CONVENÇÃO: escreva mobile-last (desktop-first). Estilos base = desktop 1440.
* Use SEMPRE estas 3 media queries "estruturais" com max-width, nesta ordem,
* em cada arquivo styles/sections/NN-nome.css que precisar de ajuste responsivo:
*
* @media (max-width: 1024px) { ... } // desktop comprimido
* @media (max-width: 768px) { ... } // tablet — quebra estrutural principal
* @media (max-width: 430px) { ... } // mobile
*
* Use `@media (max-width: 375px) { ... }` SOMENTE para ajuste fino adicional
* (ex.: reduzir mais uma fonte, ou padding), nunca para introduzir uma nova
* estrutura de layout — a estrutura mobile já deve estar completa em 430px.
*
* Não invente breakpoints intermediários (ex.: 900px, 600px) sem necessidade —
* mantenha-se nestes 4 valores para que o comportamento responsivo do site
* fique previsível entre seções feitas por agentes diferentes.
* ============================================================================
*/
/* ---------------------------------------------------------------------------
* RESET BÁSICO
* ------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
figure, figcaption,
blockquote, dl, dd {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
/* ---------------------------------------------------------------------------
* @FONT-FACE — RizomaM (fonte de marca, self-hosted, peso único 400)
* ---------------------------------------------------------------------------
* Ver decisão de uso (só display/títulos, não corpo) documentada no topo de
* styles/tokens.css. Peso único: não declarar font-weight: 600/700 usando
* esta família — não existe arquivo bold, o navegador faria fake-bold.
* ------------------------------------------------------------------------- */
@font-face {
font-family: 'RizomaM';
src: url('../assets/fonts/RizomaM-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ---------------------------------------------------------------------------
* TIPOGRAFIA BASE (usa os tokens definidos em tokens.css)
* ------------------------------------------------------------------------- */
body {
font-family: var(--font-familia-base);
font-weight: var(--peso-regular);
background-color: var(--cor-fundo-escuro-base);
color: var(--cor-texto-branco);
}
/* !important deliberado: dezenas de seções aplicam font-weight: var(--fw-*) diretamente
* em títulos (ex.: .hero__title { font-weight: var(--fw-h1-hero) } = 600), e como esse
* seletor de classe tem mais especificidade que este `h1,h2...`, ele vencia — a RizomaM só
* existe no arquivo Regular (400), então o navegador sintetizava um bold falso (título
* "grosso"/distorcido). Isto NÃO é uma preferência de design a ser sobrescrita por seção;
* é uma limitação física do arquivo de fonte (peso único) — por isso o !important, para
* garantir que nenhuma regra futura reintroduza o fake-bold. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-familia-display);
font-weight: 400 !important;
/* Evita títulos terminando com 1 palavra sozinha numa linha curta ("órfã") —
o navegador redistribui as palavras entre as linhas de forma equilibrada
em vez de só preencher e sobrar o resto no final. Sem efeito em navegadores
sem suporte (fallback = normal, quebra como antes). */
text-wrap: balance;
}
/* Mesmo problema de "órfã"/"viúva" pode ocorrer em parágrafos de corpo (ex.:
subtítulos, texto de apoio) — text-wrap: balance não é indicado aqui (só
funciona bem em blocos curtos como títulos), mas text-wrap: pretty evita
especificamente a última linha ficar com 1 palavra solta, sem redistribuir
o resto do parágrafo. Progressive enhancement, mesmo raciocínio acima. */
p {
text-wrap: pretty;
}
/* ---------------------------------------------------------------------------
* CONTAINER — max-width + padding responsivo com clamp()
* ------------------------------------------------------------------------- */
/*
* .container: largura efetiva de conteúdo alinhada ao token
* --container-largura-conteudo (1297px), com cap em --container-max-width
* (1440px) e padding horizontal fluido entre o valor mobile e o valor
* desktop (--space-secao-horizontal = 64px), usando clamp() para não precisar
* de uma media query só para o padding.
*/
.container {
width: 100%;
max-width: calc(var(--container-largura-conteudo) + (2 * var(--space-secao-horizontal)));
margin-inline: auto;
padding-inline: clamp(20px, 4vw, var(--space-secao-horizontal));
}
/* .container--full: mesma lógica de padding, mas sem cap de largura interna
* (útil para seções full-bleed que precisam só do respiro lateral, ex. marquees). */
.container--full {
width: 100%;
max-width: var(--container-max-width);
margin-inline: auto;
padding-inline: clamp(20px, 4vw, var(--space-secao-horizontal));
}
/* .section: padding vertical padrão de seção, fluido entre mobile e desktop.
* Piso subiu de 40px → 56px (2026-08-10, pedido "respiro de uma seção e outra" —
* em mobile o padding batia no mínimo do clamp() com muita frequência, deixando
* as seções coladas). Também ganha um divisor dourado centralizado (ver
* .section::before abaixo) para marcar a transição mesmo quando 2-3 seções
* seguidas usam tons de fundo escuro quase idênticos. */
.section {
position: relative;
padding-block: clamp(56px, 9vw, var(--space-secao-vertical));
}
.section::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(88px, 20%);
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, var(--cor-cta-dourado), transparent);
opacity: 0.5;
}
/* scroll-margin-top: com scroll-behavior:smooth + .site-header sticky (01-header.css),
* um link âncora (ex.: href="#valor") rolava a seção-alvo até y=0, deixando o header
* fixo (~125px, ver --header-fixo-altura-total) cobrindo o início do conteúdo. Aplica-se
* a qualquer section com id — são os únicos alvos de âncora do site. */
section[id] {
scroll-margin-top: calc(var(--header-fixo-altura-total) + 16px);
}
/* ---------------------------------------------------------------------------
* UTILITÁRIOS GENÉRICOS DE GRID / FLEX
* ------------------------------------------------------------------------- */
.flex {
display: flex;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-xs { gap: 8px; }
.gap-sm { gap: 12px; }
.gap-md { gap: 24px; }
.gap-lg { gap: 48px; }
.grid {
display: grid;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--card-feature-gap-linha);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--card-feature-gap-linha);
}
@media (max-width: 1024px) {
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.grid-2,
.grid-3 {
grid-template-columns: 1fr;
}
}
.text-center {
text-align: center;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------------------
* PLACEHOLDERS DE ASSET — convenção compartilhada, usar em TODAS as seções
* ---------------------------------------------------------------------------
* Não redefina estas classes nos arquivos styles/sections/NN-*.css.
* Controle apenas dimensão/aspect-ratio/radius/posição via classe adicional
* ou style inline no elemento, mantendo estas 3 classes de base.
*
* Uso:
*