/* ==========================================================================
Design System — Dra. Taís Caetano · "Bem, Bonita & Disposta"
Fonte da verdade: referencias/ID IMAGÉTICA TAÍS CAETANO.pdf (Canva, 2026)
Tudo que o site usa de cor, tipo, espaço e forma nasce daqui.
========================================================================== */
/* Fontes: carregar no de cada página (mais rápido que @import):
*/
:root {
/* ---- Paleta oficial (6 cores do PDF) ---------------------------------- */
--tc-brown: #4F1F15; /* marrom-café — acento profundo, títulos de destaque */
--tc-caramel: #77583F; /* caramelo — acento quente, detalhes, links */
--tc-green: #07362C; /* verde-floresta — cor de marca: botões, etiquetas, rodapé */
--tc-white: #FFFFFF;
--tc-black: #000000; /* texto principal e filetes */
--tc-mist: #EDE8E8; /* névoa — fundo base das páginas (capa) */
/* ---- Derivados (não estão no PDF; só para estados de interface) ------- */
--tc-green-hover: #0B4A3D; /* hover do botão primário */
--tc-band: #EDEDED; /* faixa cinza atrás de títulos de seção (vista no PDF) */
--tc-line: rgba(0, 0, 0, .14);/* divisores discretos */
/* ---- Papéis semânticos ------------------------------------------------ */
--color-bg: var(--tc-mist);
--color-surface: var(--tc-white);
--color-text: var(--tc-black);
--color-text-muted: var(--tc-caramel); /* 5,3:1 sobre névoa, 6,5:1 sobre branco */
--color-brand: var(--tc-green);
--color-on-brand: var(--tc-white);
--color-accent: var(--tc-caramel);
--color-accent-deep: var(--tc-brown);
--color-rule: var(--tc-black);
/* ---- Tipografia ------------------------------------------------------- */
--font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* títulos grandes, caixa-alta espaçada */
--font-label: "Josefin Sans", "Montserrat", sans-serif; /* cabeçalhos de seção, números, legendas */
--font-body: "Raleway", "Helvetica Neue", Arial, sans-serif; /* texto corrido e destaques em negrito */
--fs-hero: clamp(2.5rem, 7vw, 5rem); /* IDENTIDADE IMAGÉTICA */
--fs-h1: clamp(2rem, 4.5vw, 3.25rem); /* TERRITÓRIO / BIO */
--fs-h2: clamp(1.5rem, 3vw, 2.25rem);
--fs-h3: 1.25rem;
--fs-body: 1.0625rem; /* 17px */
--fs-small: .875rem;
--fs-label: .8125rem; /* etiquetas e botões, caixa-alta */
--tracking-wide: .22em; /* títulos Montserrat em caixa-alta */
--tracking-label: .16em; /* etiquetas e botões */
--lh-tight: 1.1;
--lh-body: 1.65;
/* ---- Espaço (base 8) -------------------------------------------------- */
--sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;
--sp-9: 7rem; /* respiro entre seções — a identidade é arejada */
--container: 72rem;
--gutter: 1.25rem;
/* ---- Forma ------------------------------------------------------------ */
--radius: 0; /* a identidade é retilínea: etiqueta verde, faixas, filetes */
--radius-soft: 2px;
--rule-weight: 2px; /* filete vertical preto da capa */
--shadow-none: none;
--shadow-lift: 0 10px 30px rgba(79, 31, 21, .10); /* único sombreado permitido: tom marrom, bem suave */
/* ---- Movimento -------------------------------------------------------- */
--ease: cubic-bezier(.2, .7, .2, 1);
--dur: .25s;
}
/* ==========================================================================
Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 var(--sp-4); font-weight: 500; line-height: var(--lh-tight); }
.t-hero { font-family: var(--font-display); font-size: var(--fs-hero); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 500; }
.t-h1 { font-family: var(--font-label); font-size: var(--fs-h1); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: .02em; font-weight: 500; }
.t-h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 700; }
.t-lead { font-family: var(--font-body); font-size: 1.25rem; font-weight: 300; line-height: 1.5; }
.t-lead strong { font-weight: 700; } /* "VIVER BEM / **DEPOIS DOS 40**" */
.t-label { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; }
.t-year { font-family: var(--font-label); font-style: italic; letter-spacing: .3em; }
.t-muted { color: var(--color-text-muted); }
/* ==========================================================================
Componentes
========================================================================== */
/* Etiqueta verde — o bloco "TAÍS CAETANO" da capa */
.tag {
display: inline-block;
padding: var(--sp-3) var(--sp-6);
background: var(--color-brand);
color: var(--color-on-brand);
font-family: var(--font-display);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
border-radius: var(--radius);
}
/* Faixa de título de seção — o título sobre faixa cinza do PDF */
.band {
background: var(--tc-band);
padding: var(--sp-5) var(--gutter);
margin-right: 12%;
}
.band > * { margin: 0; }
/* Filete vertical — separador de capa/seções */
.rule-v { width: var(--rule-weight); height: 6rem; background: var(--color-rule); margin: var(--sp-7) auto; border-radius: 2px; }
.rule-h { height: 1px; background: var(--tc-line); border: 0; margin: var(--sp-6) 0; }
/* Botões */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
min-height: 3rem; padding: 0 var(--sp-6);
font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600;
letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none;
border: 1px solid var(--color-brand); border-radius: var(--radius);
background: var(--color-brand); color: var(--color-on-brand);
cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--tc-green-hover); }
.btn:focus-visible { outline: 2px solid var(--tc-caramel); outline-offset: 3px; }
.btn--outline { background: transparent; color: var(--color-brand); }
.btn--outline:hover { background: var(--color-brand); color: var(--color-on-brand); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--color-text); padding: 0; min-height: auto; }
.btn--ghost::after { content: "↓"; } /* "↓ Seu cuidado começa aqui" */
/* Card */
.card {
background: var(--color-surface);
border-radius: var(--radius);
padding: var(--sp-6);
border: 1px solid transparent;
transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); border-color: var(--tc-line); }
.card--green { background: var(--color-brand); color: var(--color-on-brand); }
/* Layout */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--sp-9); }
.section--white { background: var(--tc-white); }
.section--green { background: var(--color-brand); color: var(--color-on-brand); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }