/*
* Theme Name: Altagrad Child
* Template: blocksy
* Version: 1.0.0
* Description: Child theme da Altagrad — Consultoria de Carreira Lusófona
* Author: Gerson Moises
* Author URI: https://altagrad.com
* Text Domain: altagrad
*
* ESTRUTURA DESTE FICHEIRO:
* 00. Child theme declaration + parent import
* A. Google Fonts / @font-face (development vs production)
* B. CSS Reset moderno
* C. Design Tokens — :root CSS Custom Properties
* D. Componentes base — botões, badges, tags, cards, formulários, progress
* E. Utilitários de layout — container, section, grids, flex
* F. Acessibilidade — WCAG 2.2 AA (skip link, focus, sr-only)
* G. Sistema bilingue PT/EN (.pt-only / .en-only)
* H. Toast de notificação
* I. Navegação principal (#nav)
* J. Footer (#footer)
* K. Animações e micro-interacções
* L. Sidebar — Área do Cliente
* M. Blog / Arquivo
* N. Media queries responsivas
* O. WordPress overrides (Blocksy child)
*
* Branding Platform v2.1 — Brand Book DOC 01 — Abril 2026
* © 2026 Altagrad · Gerson Moises · Confidencial
*/
/* ═══════════════════════════════════════════════════════════════════════════
00. CHILD THEME — PARENT IMPORT
WP: O Blocksy parent theme é importado automaticamente pelo WP quando
style.css declara Template: blocksy. Não adicionar @import manual.
O wp_enqueue_style em functions.php faz o load na ordem correcta.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
A. TIPOGRAFIA — GOOGLE FONTS (desenvolvimento)
PRODUÇÃO: Substituir pelo bloco @font-face em font-face-local.css
e remover este @import para conformidade RGPD.
Guia: assets/tipografia/font-face-local.css
═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500&display=swap');
/* ═══════════════════════════════════════════════════════════════════════════
B. CSS RESET MODERNO
Compatível com WordPress + Blocksy. Não sobrepõe o reset do parent.
═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
background-color: var(--white);
color: var(--dk);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-height: 100vh;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
border: none;
background: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
C. DESIGN TOKENS — CSS CUSTOM PROPERTIES
Branding Platform v2.1 · Brand Book DOC 01 · Secção 3
Editar aqui para alterar cores/tipografia em todo o site.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── PALETA ALTAGRAD ─────────────────────────────────────────────────── */
--g: #1D9E75; /* Altagrad Green — cor principal da marca */
--gd: #085041; /* Verde escuro — texto em fundos verdes claros */
--gm: #0F6E56; /* Verde médio — subtítulos, hover */
--gl: #E1F5EE; /* Verde claro — fundos de destaque, cards */
--g9: #9FE1CB; /* Verde pastel — bordas e decorações */
--g5: #5DCAA5; /* Verde médio-claro — ícones e ilustrações */
/* Escala de escuro */
--dk: #1A1A18; /* Obsidian — cor escura principal */
--dk2: #2C2C2A; /* Escuro secundário */
--dk3: #444441; /* Escuro terciário */
/* Escala de cinza */
--gy: #888780; /* Cinza médio — texto secundário */
--gy2: #B4B2A9; /* Cinza claro — placeholders */
--gy3: #D3D1C7; /* Cinza muito claro — divisores */
/* Fundos */
--white: #FFFFFF;
--f5: #F5F4F0; /* Parchment — fundo alternado */
--f0: #F0EEE8; /* Parchment escuro — hover, separadores */
--f8: #FAF9F6; /* Quase branco — fundo de cards */
/* Cores de apoio — badges e estados */
--lb: #E6F1FB; /* Azul claro — PDI, skills, info */
--lp: #EEEDFE; /* Roxo claro — talent, CPLP */
--la: #FAEEDA; /* Âmbar claro — em curso, avisos */
--lr: #FAECE7; /* Coral claro — erros */
--bd: #0C447C; /* Azul escuro — texto sobre --lb */
--pd: #26215C; /* Roxo escuro — texto sobre --lp */
--ad: #633806; /* Âmbar escuro — texto sobre --la */
/* ── TIPOGRAFIA ────────────────────────────────────────────────────── */
--font-display: 'DM Sans', sans-serif; /* Wordmark, UI bold, números */
--font-serif: 'Instrument Serif', serif; /* Headlines editoriais, citações */
--font-body: 'Inter', sans-serif; /* Corpo de texto, UI regular */
/* Escala tipográfica (Major Third — 1.250) */
--text-xs: 0.64rem; /* ~10px — labels uppercase, badges */
--text-sm: 0.80rem; /* ~13px — notas, meta */
--text-base: 1.00rem; /* 16px — corpo */
--text-lg: 1.25rem; /* 20px — lead */
--text-xl: 1.56rem; /* 25px — subtítulos */
--text-2xl: 1.95rem; /* ~31px — h3 */
--text-3xl: 2.44rem; /* ~39px — h2 */
--text-4xl: 3.05rem; /* ~49px — h1 */
--text-5xl: 3.81rem; /* ~61px — hero display */
/* Pesos */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
/* ── ESPAÇAMENTO (escala de 4px) ───────────────────────────────────── */
--space-1: 0.25rem; /* 4px */
--space-2: 0.50rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1.00rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.50rem; /* 24px */
--space-8: 2.00rem; /* 32px */
--space-10: 2.50rem; /* 40px */
--space-12: 3.00rem; /* 48px */
--space-16: 4.00rem; /* 64px */
--space-20: 5.00rem; /* 80px */
--space-24: 6.00rem; /* 96px */
/* ── LAYOUT ────────────────────────────────────────────────────────── */
--nav-height: 64px;
--max-width: 1200px;
--content-width: 720px;
--sidebar-width: 250px;
/* ── BORDAS E RAIOS ────────────────────────────────────────────────── */
--border-color: #e8e3db;
--border-color-2: #d4cfc6;
--border-color-dk: rgba(255,255,255,.10);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-full: 9999px;
/* ── SOMBRAS ───────────────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(0,0,0,.05);
--shadow-sm: 0 1px 4px rgba(0,0,0,.07);
--shadow-md: 0 4px 16px rgba(0,0,0,.09);
--shadow-lg: 0 8px 32px rgba(0,0,0,.11);
--shadow-xl: 0 16px 48px rgba(0,0,0,.13);
--shadow-green: 0 4px 16px rgba(29,158,117,.28);
/* ── TRANSIÇÕES ─────────────────────────────────────────────────────── */
--trans-fast: .12s ease;
--trans: .18s ease;
--trans-slow: .30s ease;
/* ── Z-INDEX ────────────────────────────────────────────────────────── */
--z-base: 1;
--z-nav: 100;
--z-drawer: 200;
--z-modal: 300;
--z-toast: 400;
--z-top: 999;
} /* fim :root */
/* ═══════════════════════════════════════════════════════════════════════════
D. COMPONENTES BASE — BOTÕES
Uso:
Link
═══════════════════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 11px 22px;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-medium);
line-height: 1;
white-space: nowrap;
cursor: pointer;
border: 1.5px solid transparent;
text-decoration: none;
transition:
background-color var(--trans),
border-color var(--trans),
color var(--trans),
transform var(--trans),
box-shadow var(--trans);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn:focus-visible {
outline: 2.5px solid var(--g);
outline-offset: 3px;
}
/* Variantes */
.btn--primary { background: var(--g); color: var(--white); border-color: var(--g); }
.btn--primary:hover { background: var(--gm); border-color: var(--gm); box-shadow: var(--shadow-green); }
.btn--secondary { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.28); }
.btn--secondary:hover { border-color: rgba(255,255,255,.60); color: var(--white); background: rgba(255,255,255,.06); }
.btn--outline { background: transparent; color: var(--dk); border-color: var(--border-color); }
.btn--outline:hover { border-color: var(--g); color: var(--g); background: var(--gl); }
.btn--outline-green { background: transparent; color: var(--g); border-color: var(--g9); }
.btn--outline-green:hover { background: var(--gl); }
.btn--ghost { background: transparent; color: var(--gy); border-color: transparent;
padding-left: var(--space-2); padding-right: var(--space-2); }
.btn--ghost:hover { color: var(--dk); background: var(--f0); }
/* Tamanhos */
.btn--xs { padding: 5px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn--sm { padding: 8px 16px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn--lg { padding: 15px 30px; font-size: var(--text-lg); border-radius: var(--radius-lg); }
.btn--xl { padding: 18px 36px; font-size: var(--text-xl); border-radius: var(--radius-lg); }
/* Modificadores */
.btn--full { width: 100%; }
.btn--square { padding: 11px; }
.btn--loading { pointer-events: none; opacity: .7; }
.btn--disabled,
.btn[disabled] { pointer-events: none; opacity: .38; transform: none; }
/* ═══════════════════════════════════════════════════════════════════════════
D. COMPONENTES BASE — BADGES / PILLS / TAGS
═══════════════════════════════════════════════════════════════════════════ */
.badge {
display: inline-block;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: .08em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--radius-full);
line-height: 1.4;
white-space: nowrap;
}
.badge--green { background: var(--gl); color: var(--gd); }
.badge--blue { background: var(--lb); color: var(--bd); }
.badge--purple { background: var(--lp); color: var(--pd); }
.badge--amber { background: var(--la); color: var(--ad); }
.badge--dark { background: var(--dk); color: var(--g); }
.badge--gray { background: var(--f0); color: var(--gy); }
.badge--red { background: var(--lr); color: #712B13; }
/* Status badges — área do cliente */
.status { font-size: var(--text-xs); font-weight: var(--weight-semibold);
padding: 3px 11px; border-radius: var(--radius-full); }
.status--done { background: var(--gl); color: var(--gd); }
.status--active { background: var(--la); color: var(--ad); }
.status--sched { background: var(--lb); color: var(--bd); }
.status--pend { background: var(--f0); color: var(--gy); }
/* Tags — categorias, steps */
.tag {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: .04em;
padding: 4px 11px;
border-radius: var(--radius-full);
background: var(--gl);
color: var(--gd);
line-height: 1.4;
}
.tag--blue { background: var(--lb); color: var(--bd); }
.tag--purple { background: var(--lp); color: var(--pd); }
.tag--gray { background: var(--f0); color: var(--gy); }
/* ═══════════════════════════════════════════════════════════════════════════
D. COMPONENTES BASE — CARDS
═══════════════════════════════════════════════════════════════════════════ */
.card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: var(--space-6);
transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.card:hover { border-color: var(--border-color-2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card--flat { box-shadow: none; }
.card--flat:hover { transform: none; box-shadow: none; }
.card--green { background: var(--gl); border-color: var(--g9); }
.card--blue { background: var(--lb); border-color: #B5D4F4; }
.card--purple { background: var(--lp); border-color: #CECBF6; }
.card--amber { background: var(--la); border-color: #FAC775; }
.card--dark { background: var(--dk); border-color: var(--border-color-dk); color: var(--white); }
.card--featured { border: 2px solid var(--g); }
.card--featured:hover { box-shadow: var(--shadow-green); }
/* ═══════════════════════════════════════════════════════════════════════════
D. COMPONENTES BASE — AVATAR
═══════════════════════════════════════════════════════════════════════════ */
.avatar {
display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-full);
font-family: var(--font-display);
font-weight: var(--weight-semibold);
flex-shrink: 0;
}
.avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar--md { width: 44px; height: 44px; font-size: var(--text-sm); }
.avatar--lg { width: 64px; height: 64px; font-size: var(--text-xl); }
.avatar--xl { width: 96px; height: 96px; font-size: var(--text-2xl); }
.avatar--green { background: var(--gl); color: var(--gd); border: 2px solid var(--g9); }
.avatar--blue { background: var(--lb); color: var(--bd); }
.avatar--purple { background: var(--lp); color: var(--pd); }
.avatar--dark { background: var(--dk); color: var(--g); }
/* ═══════════════════════════════════════════════════════════════════════════
D. COMPONENTES BASE — FORMULÁRIOS
WP: Aplicar a WPForms, Gravity Forms, WooCommerce fields.
═══════════════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: var(--space-5); }
.form-label {
display: block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--gy);
margin-bottom: var(--space-2);
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 11px 15px;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--dk);
background: var(--white);
transition: border-color var(--trans), box-shadow var(--trans);
appearance: none;
-webkit-appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--gy2); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--g);
box-shadow: 0 0 0 3px rgba(29,158,117,.12);
}
.form-input.error,
.form-select.error,
.form-textarea.error { border-color: #D85A30; box-shadow: 0 0 0 3px rgba(216,90,48,.10); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23888780' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-error {
font-size: var(--text-sm); color: #D85A30;
margin-top: var(--space-1);
display: flex; align-items: center; gap: var(--space-1);
}
.form-hint { font-size: var(--text-sm); color: var(--gy); margin-top: var(--space-1); }
/* ═══════════════════════════════════════════════════════════════════════════
D. COMPONENTES BASE — PROGRESS BAR
═══════════════════════════════════════════════════════════════════════════ */
.progress { height: 6px; background: var(--f0); border-radius: 3px; overflow: hidden; }
.progress__fill { height: 100%; background: var(--g); border-radius: 3px; transition: width .4s ease; }
.progress--thin { height: 4px; }
.progress--thick { height: 8px; }
.progress-row { margin-bottom: var(--space-4); }
.progress-row__label { display: flex; justify-content: space-between;
font-size: var(--text-sm); color: var(--gy); margin-bottom: var(--space-2); }
.progress-row__value { font-weight: var(--weight-medium); color: var(--g); }
/* ═══════════════════════════════════════════════════════════════════════════
E. UTILITÁRIOS DE LAYOUT
═══════════════════════════════════════════════════════════════════════════ */
.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--space-12);
}
.container--narrow { max-width: var(--content-width); }
/* Secções */
.section { padding-block: var(--space-20); padding-inline: var(--space-12); }
.section--sm { padding-block: var(--space-12); }
.section--lg { padding-block: var(--space-24); }
.section--white { background: var(--white); }
.section--alt { background: var(--f5); }
.section--dark { background: var(--dk); color: var(--white); }
.section--green { background: var(--gl); }
/* Cabeçalho de secção */
.section-eyebrow {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--g);
margin-bottom: var(--space-3);
}
.section-h2 {
font-family: var(--font-serif);
font-size: var(--text-3xl);
font-weight: var(--weight-regular);
line-height: 1.15;
letter-spacing: -.3px;
color: var(--dk);
margin-bottom: var(--space-3);
}
.section-h2--white { color: var(--white); }
.section-h2--green { color: var(--gd); }
.section-lead {
font-family: var(--font-body);
font-size: var(--text-lg);
font-weight: var(--weight-light);
color: var(--gy);
line-height: 1.72;
max-width: 560px;
margin-bottom: var(--space-10);
}
.section-lead--white { color: rgba(255,255,255,.58); }
.section-lead--green { color: var(--gm); }
/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: var(--space-5); }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
/* Flex helpers */
.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-start { display: flex; align-items: flex-start; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
/* ═══════════════════════════════════════════════════════════════════════════
F. ACESSIBILIDADE — WCAG 2.2 AA
Não remover. Obrigatório para conformidade.
═══════════════════════════════════════════════════════════════════════════ */
.skip-link {
position: absolute;
top: -100px;
left: var(--space-4);
z-index: var(--z-top);
background: var(--g);
color: var(--white);
padding: var(--space-2) var(--space-4);
border-radius: 0 0 var(--radius-md) var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-medium);
transition: top var(--trans-fast);
}
.skip-link:focus { top: 0; }
/* Focus visível global */
:focus-visible {
outline: 2.5px solid var(--g);
outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
G. SISTEMA BILINGUE PT/EN
Toggle via JavaScript: setLang('pt') / setLang('en')
Persistido: localStorage('altagrad-lang')
WP produção: substituir por WPML/Polylang com classes PHP
═══════════════════════════════════════════════════════════════════════════ */
.en-only { display: none; }
body.lang-en .pt-only { display: none !important; }
body.lang-en .en-only { display: inline !important; }
body.lang-en .en-only.block { display: block !important; }
body.lang-en .en-only.flex { display: flex !important; }
/* ═══════════════════════════════════════════════════════════════════════════
H. TOAST DE NOTIFICAÇÃO
JS: window.toast('Mensagem', 3800)
═══════════════════════════════════════════════════════════════════════════ */
#toast {
position: fixed;
bottom: 24px;
right: 24px;
z-index: var(--z-toast);
background: var(--dk);
color: var(--white);
border-left: 3px solid var(--g);
border-radius: var(--radius-md);
padding: 14px 18px;
font-size: var(--text-sm);
font-family: var(--font-body);
box-shadow: var(--shadow-lg);
max-width: 320px;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity var(--trans), transform var(--trans);
}
#toast.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#toast.toast--error { border-left-color: #D85A30; }
/* ═══════════════════════════════════════════════════════════════════════════
I. NAVEGAÇÃO PRINCIPAL (#nav)
WP: Gerado por header.php. Nav sticky com scroll shadow.
═══════════════════════════════════════════════════════════════════════════ */
#nav {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--nav-height);
background: var(--dk);
z-index: var(--z-nav);
transition: box-shadow var(--trans);
}
#nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.25); }
.nav-inner {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--space-12);
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Logo / wordmark */
.nav-logo {
font-family: var(--font-display);
font-size: 22px;
font-weight: var(--weight-semibold);
letter-spacing: -.4px;
color: var(--white);
line-height: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-logo .grad { color: var(--g); }
.nav-logo .tagline {
font-size: 10px;
font-weight: var(--weight-regular);
letter-spacing: .06em;
color: rgba(255,255,255,.35);
text-transform: uppercase;
}
/* Nav links */
.nav-links {
display: flex;
align-items: center;
gap: var(--space-1);
}
.nav-link {
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--weight-regular);
color: rgba(255,255,255,.65);
padding: 7px 12px;
border-radius: var(--radius-sm);
transition: color var(--trans), background var(--trans);
}
.nav-link:hover,
.nav-link.active { color: var(--white); background: rgba(255,255,255,.07); }
/* Nav actions */
.nav-actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
/* PT/EN toggle */
.lang-toggle {
display: flex;
gap: 2px;
background: rgba(255,255,255,.06);
border-radius: var(--radius-full);
padding: 3px;
}
.lang-btn {
font-size: 11px;
font-weight: var(--weight-medium);
font-family: var(--font-body);
padding: 4px 10px;
border-radius: var(--radius-full);
color: rgba(255,255,255,.45);
transition: color var(--trans), background var(--trans);
cursor: pointer;
}
.lang-btn.active { background: var(--g); color: var(--white); }
/* Hamburger — mobile */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
padding: 8px;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--trans);
}
.hamburger:hover { background: rgba(255,255,255,.07); }
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: transform var(--trans), opacity var(--trans);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile drawer */
.nav-drawer {
display: none;
position: fixed;
top: var(--nav-height);
left: 0; right: 0;
background: var(--dk);
border-top: 1px solid rgba(255,255,255,.08);
padding: var(--space-4) var(--space-6);
z-index: calc(var(--z-nav) - 1);
flex-direction: column;
gap: var(--space-1);
box-shadow: var(--shadow-lg);
}
.nav-drawer.open { display: flex; }
.nav-drawer .nav-link { font-size: 16px; padding: 12px 16px; }
/* Body offset para nav fixed */
body { padding-top: var(--nav-height); }
/* ═══════════════════════════════════════════════════════════════════════════
J. FOOTER (#footer)
WP: Gerado por footer.php.
═══════════════════════════════════════════════════════════════════════════ */
#footer {
background: var(--dk);
color: rgba(255,255,255,.55);
padding-block: var(--space-16) var(--space-8);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-10);
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--space-12);
padding-bottom: var(--space-10);
border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-col-title {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
margin-bottom: var(--space-4);
}
.footer-link {
display: block;
font-size: 14px;
color: rgba(255,255,255,.50);
margin-bottom: var(--space-3);
transition: color var(--trans);
cursor: pointer;
}
.footer-link:hover { color: var(--white); }
.footer-bottom {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--space-12);
padding-top: var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
font-size: 13px;
}
.footer-legal {
display: flex;
gap: var(--space-6);
}
.footer-legal a {
color: rgba(255,255,255,.35);
transition: color var(--trans);
}
.footer-legal a:hover { color: rgba(255,255,255,.70); }
/* ═══════════════════════════════════════════════════════════════════════════
K. ANIMAÇÕES E MICRO-INTERACÇÕES
═══════════════════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
0% { transform: scale(.6); opacity: 0; }
70% { transform: scale(1.08); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.animate-fade-in { animation: fadeIn .25s ease both; }
.animate-fade-in-up { animation: fadeInUp .35s ease both; }
.animate-pop-in { animation: popIn .30s cubic-bezier(.34,1.56,.64,1) both; }
/* Spinner */
.spinner {
width: 18px; height: 18px;
border: 2px solid rgba(255,255,255,.25);
border-top-color: var(--white);
border-radius: 50%;
animation: spin .7s linear infinite;
display: inline-block;
}
.spinner--green {
border-color: rgba(29,158,117,.25);
border-top-color: var(--g);
}
/* Intersection observer — animate on scroll */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ═══════════════════════════════════════════════════════════════════════════
L. SIDEBAR — ÁREA DO CLIENTE
WP: page-cliente.php + MemberPress
CRÍTICO: Usar flex (não grid) para evitar colapso em viewports estreitos.
IDs únicos obrigatórios: #app-layout, #sidebar, #content-area
═══════════════════════════════════════════════════════════════════════════ */
#app-layout {
display: flex;
flex-direction: row;
min-height: calc(100vh - var(--nav-height));
background: var(--f5);
}
#sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
background: var(--dk);
position: sticky;
top: var(--nav-height);
height: calc(100vh - var(--nav-height));
overflow-y: auto;
display: flex;
flex-direction: column;
padding: var(--space-6) 0;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.10) transparent;
}
#content-area {
flex: 1;
min-width: 0;
overflow-y: auto;
padding: var(--space-8) var(--space-10);
}
/* Sidebar navigation links */
.sb-link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 10px var(--space-6);
font-size: 14px;
font-weight: var(--weight-medium);
color: rgba(255,255,255,.50);
transition: color var(--trans), background var(--trans);
cursor: pointer;
border-left: 3px solid transparent;
}
.sb-link:hover { color: var(--white); background: rgba(255,255,255,.05); }
.sb-link.active { color: var(--white); border-left-color: var(--g); background: rgba(255,255,255,.07); }
.sb-section-label {
font-size: 10px;
font-weight: var(--weight-semibold);
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.22);
padding: var(--space-6) var(--space-6) var(--space-2);
}
.sb-divider {
height: 1px;
background: rgba(255,255,255,.07);
margin: var(--space-4) var(--space-6);
}
/* Painéis de conteúdo */
.panel { display: none; }
.panel.active { display: block; animation: fadeIn .20s ease; }
/* Breadcrumb */
.client-breadcrumb {
font-size: 13px;
color: var(--gy);
margin-bottom: var(--space-6);
display: flex;
align-items: center;
gap: var(--space-2);
}
.client-breadcrumb .current { color: var(--dk); font-weight: var(--weight-medium); }
/* ═══════════════════════════════════════════════════════════════════════════
M. BLOG / ARQUIVO
WP: archive.php + single.php
═══════════════════════════════════════════════════════════════════════════ */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-6);
}
.blog-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-color-2); }
.blog-card__img {
aspect-ratio: 16/9;
background: var(--f0);
overflow: hidden;
}
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-card__img img { transform: scale(1.04); }
.blog-card__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.blog-card__category {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--g);
margin-bottom: var(--space-2);
}
.blog-card__title {
font-family: var(--font-serif);
font-size: var(--text-xl);
line-height: 1.25;
color: var(--dk);
margin-bottom: var(--space-3);
}
.blog-card__meta {
font-size: var(--text-sm);
color: var(--gy);
display: flex;
gap: var(--space-4);
}
/* Article single */
.article-header { padding-block: var(--space-12); background: var(--f5); }
.article-body {
max-width: var(--content-width);
margin-inline: auto;
padding: var(--space-12) var(--space-12);
font-size: var(--text-base);
line-height: 1.8;
color: var(--dk);
}
.article-body h2 { font-family: var(--font-serif); font-size: var(--text-2xl); margin-block: var(--space-10) var(--space-4); }
.article-body h3 { font-family: var(--font-display); font-size: var(--text-xl); margin-block: var(--space-8) var(--space-3); }
.article-body p { margin-bottom: var(--space-5); }
.article-body ul, .article-body ol { padding-left: var(--space-6); margin-bottom: var(--space-5); }
.article-body li { margin-bottom: var(--space-2); }
/* ═══════════════════════════════════════════════════════════════════════════
N. MEDIA QUERIES RESPONSIVAS
Breakpoints: Mobile ≤768px | Tablet 769–1024px | Desktop ≥1025px
═══════════════════════════════════════════════════════════════════════════ */
/* Tablet */
@media (max-width: 1024px) {
.container { padding-inline: var(--space-8); }
.section { padding-inline: var(--space-8); }
.nav-inner { padding-inline: var(--space-8); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); padding-inline: var(--space-8); }
.footer-bottom { padding-inline: var(--space-8); }
.grid-3 { grid-template-columns: 1fr 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
#content-area { padding: var(--space-6) var(--space-8); }
}
/* Mobile */
@media (max-width: 768px) {
html { font-size: 15px; }
.container { padding-inline: var(--space-5); }
.section { padding-block: var(--space-12); padding-inline: var(--space-5); }
.nav-inner { padding-inline: var(--space-5); }
/* Nav mobile */
.nav-links { display: none; }
.hamburger { display: flex; }
/* Grids */
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
/* Footer */
.footer-grid { grid-template-columns: 1fr; padding-inline: var(--space-5); }
.footer-bottom { flex-direction: column; align-items: flex-start; padding-inline: var(--space-5); }
.footer-legal { flex-direction: column; gap: var(--space-3); }
/* Sidebar — cliente */
#app-layout { flex-direction: column; }
#sidebar {
width: 100%;
height: auto;
position: static;
flex-direction: row;
flex-wrap: wrap;
padding: var(--space-3) var(--space-4);
overflow-x: auto;
gap: var(--space-1);
}
.sb-link { padding: 8px 14px; border-left: none; border-bottom: 3px solid transparent; font-size: 13px; }
.sb-link.active { border-bottom-color: var(--g); border-left-color: transparent; }
.sb-section-label { display: none; }
.sb-divider { display: none; }
#content-area { padding: var(--space-5); }
/* Toast */
#toast { left: var(--space-5); right: var(--space-5); max-width: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
O. WORDPRESS OVERRIDES — BLOCKSY CHILD
Overrides específicos para o tema Blocksy.
Adicionar overrides adicionais aqui conforme necessário.
═══════════════════════════════════════════════════════════════════════════ */
/* Reset WordPress body classes que possam interferir */
.wp-site-blocks { padding: 0 !important; }
/* Remover outline do Blocksy em favor do nosso */
.ct-header a:focus,
.ct-header button:focus { outline: none; }
/* WooCommerce — alinhar ao Design System */
.woocommerce-message,
.woocommerce-info { border-top-color: var(--g); }
.woocommerce-error { border-top-color: #D85A30; }
.woocommerce a.button,
.woocommerce button.button {
background: var(--g);
color: var(--white);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-weight: var(--weight-medium);
transition: background var(--trans), box-shadow var(--trans);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--gm); box-shadow: var(--shadow-green); }
/* MemberPress — login form */
.mepr-login-form .mepr-field input { border: 1.5px solid var(--border-color); border-radius: var(--radius-md); }
.mepr-login-form .mepr-field input:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(29,158,117,.12); }
.mepr-login-form .mepr-submit { background: var(--g); color: var(--white); }
/* Calendly embed */
.calendly-inline-widget { border-radius: var(--radius-lg); overflow: hidden; }
/*
* FIM DO style.css — Altagrad Child Theme v1.0
* Próximo: functions.php → src/php/ → child theme completo
* © 2026 Altagrad · Gerson Moises · Confidencial
*/
/* ═══════════════════════════════════════════════════════════════════════════
P. PÁGINA SOBRE — page-sobre.php
CSS extraído do Altagrad_SITE_INTEGRATION.html (standalone v1.0)
Fidelidade total ao design original aprovado.
═══════════════════════════════════════════════════════════════════════════ */
/* Hero About */
.about-hero {
background: var(--dk);
padding: 72px 48px;
position: relative;
overflow: hidden;
}
.about-hero::before {
content: '';
position: absolute;
top: -30%; right: -8%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(29,158,117,.09) 0%, transparent 68%);
pointer-events: none;
}
.about-hero-inner {
max-width: var(--max-width);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr 300px;
gap: 56px;
align-items: start;
position: relative;
z-index: 1;
}
.about-h1 {
font-family: var(--font-serif);
font-size: clamp(36px, 4.5vw, 54px);
font-weight: 400;
color: #fff;
line-height: 1.08;
letter-spacing: -.5px;
margin-bottom: 16px;
}
.about-h1 em { color: var(--g); font-style: italic; }
.about-sub {
font-size: clamp(14px, 1.2vw, 17px);
color: rgba(255,255,255,.58);
line-height: 1.75;
font-weight: 300;
max-width: 520px;
}
.about-founder-photo {
width: 100%;
border-radius: var(--radius-xl);
box-shadow: 0 12px 40px rgba(0,0,0,.32);
object-fit: cover;
object-position: center 10%;
}
/* Founder tags */
.founder-tags {
display: flex;
gap: 9px;
flex-wrap: wrap;
margin-top: 20px;
}
.founder-tag {
font-size: 11.5px;
padding: 5px 14px;
border-radius: var(--radius-full);
border: 1px solid var(--border-color);
color: var(--gy);
background: var(--white);
}
/* MVV Cards */
.mvv-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 48px;
}
.mvv-card { border-radius: var(--radius-lg); padding: 28px; }
.mvv-card--green { background: var(--gl); border: 1px solid var(--g9); }
.mvv-card--blue { background: var(--lb); border: 1px solid #B5D4F4; }
.mvv-card--purple { background: var(--lp); border: 1px solid #CECBF6; }
.mvv-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 12px;
}
.mvv-label--g { color: var(--gd); }
.mvv-label--b { color: var(--bd); }
.mvv-label--p { color: var(--pd); }
.mvv-text { font-size: 14px; line-height: 1.75; }
.mvv-text--g { color: #2a2a28; }
.mvv-text--b { color: #0a1a2a; }
.mvv-text--p { color: #0e0d22; }
/* Values Grid */
.values-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.value-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 20px 14px;
text-align: center;
transition: transform var(--trans), box-shadow var(--trans);
}
.value-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.value-icon {
width: 44px; height: 44px;
background: var(--gl);
border-radius: var(--radius-md);
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
}
.value-name { font-size: 13px; font-weight: 500; color: var(--dk); margin-bottom: 5px; }
.value-desc { font-size: 11px; color: var(--gy); line-height: 1.5; }
/* Timeline */
.timeline-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-top: 36px;
}
.timeline {
position: relative;
padding-left: 28px;
}
.timeline::before {
content: '';
position: absolute;
left: 4px; top: 8px; bottom: 8px;
width: 2px;
background: linear-gradient(180deg, var(--g) 0%, #9FE1CB 60%, rgba(29,158,117,.15) 100%);
}
.tl-item {
position: relative;
margin-bottom: 32px;
}
.tl-dot {
position: absolute;
left: -32px; top: 5px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--g);
border: 3px solid var(--white);
box-shadow: 0 0 0 2px var(--g);
}
.tl-year {
font-size: 10px;
font-weight: 700;
color: var(--g);
text-transform: uppercase;
letter-spacing: .10em;
margin-bottom: 5px;
}
.tl-title {
font-size: 14px;
font-weight: 500;
color: var(--dk);
margin-bottom: 4px;
}
.tl-text { font-size: 13.5px; color: #444; line-height: 1.7; }
.tl-item--highlight .tl-year { color: var(--g); font-size: 12px; }
.tl-item--highlight .tl-title { color: var(--gd); font-size: 15px; }
/* Manifesto Block */
.manifesto-block {
background: var(--dk);
border-radius: var(--radius-xl);
padding: 48px 52px;
}
.manifesto-quote {
font-family: var(--font-serif);
font-size: clamp(18px, 2vw, 24px);
color: #fff;
line-height: 1.6;
font-style: italic;
margin-bottom: 24px;
position: relative;
padding-top: 32px;
}
.manifesto-quote::before {
content: '\201C';
position: absolute;
top: -8px; left: 0;
font-size: 56px;
color: var(--g);
font-family: var(--font-serif);
line-height: 1;
}
.manifesto-author {
font-size: 13px;
color: var(--g);
font-weight: 500;
margin-bottom: 24px;
}
.manifesto-divider {
height: 1px;
background: rgba(255,255,255,.08);
margin-bottom: 24px;
}
.academic-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.28);
margin-bottom: 14px;
}
.academic-list {
font-size: 12.5px;
color: rgba(255,255,255,.50);
line-height: 2.1;
}
/* CTA secção verde */
.cta-sec {
background: var(--gl);
padding: 80px 48px;
text-align: center;
}
.cta-h {
font-family: var(--font-serif);
font-size: clamp(28px, 3.5vw, 44px);
color: var(--gd);
font-weight: 400;
line-height: 1.2;
margin-bottom: 14px;
}
.cta-p {
font-size: 17px;
color: var(--gm);
margin-bottom: 36px;
font-weight: 300;
}
/* Responsive About */
@media (max-width: 1024px) {
.about-hero-inner { grid-template-columns: 1fr; }
.about-founder-photo { max-width: 280px; margin-inline: auto; }
.values-grid { grid-template-columns: repeat(3, 1fr); }
.timeline-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.about-hero { padding-inline: 20px; }
.mvv-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: repeat(2, 1fr); }
.manifesto-block { padding: 32px 28px; }
.cta-sec { padding-inline: 20px; }
}
@media (max-width: 480px) {
.values-grid { grid-template-columns: 1fr 1fr; }
}
/* ════════════════════════════════════════════════════════════════════
ALTAGRAD — COMPONENTES 3P · Avaliações · KPIs · Manifesto
Adicionado: Maio 2026
════════════════════════════════════════════════════════════════════ */
/* ── EVAL QUOTE — Citações de avaliação 3P ──────────────────────── */
.eval-quote{
background:linear-gradient(135deg,rgba(29,158,117,.10) 0%,rgba(29,158,117,.04) 100%);
border-left:3px solid var(--g);
border-radius:0 var(--radius-md) var(--radius-md) 0;
padding:16px 20px 14px;
margin:16px 0 8px;
position:relative;
}
.eval-quote::before{
content:'"';
font-family:var(--font-serif);
font-size:48px;
color:var(--g);
opacity:.25;
position:absolute;
top:-8px;
left:12px;
line-height:1;
}
.eval-quote__text{
font-size:13px;
color:var(--dk);
line-height:1.65;
font-style:italic;
text-align:justify;
hyphens:auto;
margin-bottom:10px;
padding-left:4px;
}
.eval-quote__author{
font-size:11px;
font-weight:600;
color:var(--g);
letter-spacing:.04em;
text-transform:uppercase;
padding-left:4px;
}
.eval-quote__source{
font-size:10px;
color:var(--gy2);
padding-left:4px;
margin-top:2px;
font-style:normal;
}
/* ── EVAL NOTE — Nota contextual (2008, 2006/2007) ──────────────── */
.eval-note{
background:rgba(239,159,39,.07);
border:1px solid rgba(239,159,39,.22);
border-radius:var(--radius-md);
padding:10px 14px;
margin:12px 0 4px;
display:flex;
gap:10px;
align-items:flex-start;
}
.eval-note__icon{
font-size:14px;
flex-shrink:0;
margin-top:1px;
}
.eval-note__text{
font-size:12px;
color:var(--gy);
line-height:1.55;
text-align:justify;
hyphens:auto;
}
/* ── KPI CARDS — 3 cards verticais alinhados ────────────────────── */
.kpi-section-wrap{
max-width:var(--max-width);
margin-inline:auto;
padding:48px var(--space-12) 0;
}
.kpi-section-lead{
font-size:13px;
color:var(--gy);
margin-bottom:28px;
max-width:620px;
text-align:justify;
hyphens:auto;
line-height:1.6;
}
.kpi-cards{
display:flex;
flex-direction:column;
gap:20px;
}
.kpi-card{
background:var(--white);
border:1px solid var(--border-color);
border-radius:var(--radius-lg);
overflow:hidden;
}
.kpi-card--highlight{
border-color:var(--g);
box-shadow:0 0 0 1px var(--g);
}
.kpi-card__head{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 20px;
background:var(--f5);
border-bottom:1px solid var(--border-color);
flex-wrap:wrap;
gap:6px;
}
.kpi-card--highlight .kpi-card__head{
background:rgba(29,158,117,.06);
border-bottom-color:var(--g);
}
.kpi-card__period{
font-family:var(--font-display);
font-size:14px;
font-weight:700;
color:var(--dk);
}
.kpi-card__role{
font-size:11px;
color:var(--gy);
margin-top:2px;
}
.kpi-card__evaluator-badge{
font-size:10px;
color:var(--gy2);
text-align:right;
line-height:1.4;
}
.kpi-card__body{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:0;
}
.kpi-metric{
padding:14px 18px;
border-right:1px solid var(--f0);
border-bottom:1px solid var(--f0);
}
.kpi-metric:nth-child(3n){border-right:none;}
.kpi-metric__label{
font-size:11px;
color:var(--gy);
margin-bottom:6px;
line-height:1.35;
}
.kpi-metric__value{
font-family:var(--font-display);
font-size:22px;
font-weight:700;
color:var(--g);
line-height:1;
margin-bottom:4px;
}
.kpi-metric__value--sm{
font-size:14px;
line-height:1.3;
}
.kpi-metric__bench{
font-size:10px;
color:var(--gy2);
line-height:1.3;
}
@media(max-width:640px){
.kpi-card__body{grid-template-columns:repeat(2,1fr);}
.kpi-metric:nth-child(3n){border-right:1px solid var(--f0);}
.kpi-metric:nth-child(2n){border-right:none;}
}
/* ── EVAL EXTERNAL — Caixa manifesto externo Lars ───────────────── */
.eval-external{
background:var(--dk);
border-radius:var(--radius-xl);
padding:28px 32px;
margin-top:24px;
position:relative;
}
.eval-external::before{
content:'"';
font-family:var(--font-serif);
font-size:72px;
color:var(--g);
opacity:.20;
position:absolute;
top:-4px;
left:20px;
line-height:1;
}
.eval-external__label{
font-size:9px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--g);
margin-bottom:12px;
}
.eval-external__quote{
font-family:var(--font-serif);
font-size:clamp(14px,1.4vw,17px);
color:#fff;
line-height:1.65;
font-style:italic;
text-align:justify;
hyphens:auto;
margin-bottom:16px;
}
.eval-external__author{
font-size:11px;
color:var(--g9);
font-weight:500;
}
/* ═══════════════════════════════════════════════════════════════════════════
P. BLOCKSY OVERRIDE — GARANTIR PRECEDÊNCIA DOS TOKENS ALTAGRAD
Adicionado: v1.0.1 — garante que as nossas variáveis e estilos base
sobrescrevem sempre os do Blocksy, independentemente da ordem de load.
═══════════════════════════════════════════════════════════════════════════ */
/* Forçar tokens Altagrad sobre variáveis do Blocksy */
body,
body.ct-body {
background-color: var(--white) !important;
color: var(--dk) !important;
font-family: var(--font-body) !important;
padding-top: var(--nav-height) !important;
}
/* Neutralizar palette colors do Blocksy */
:root {
--theme-palette-color-1: var(--g) !important;
--theme-palette-color-2: var(--gm) !important;
--theme-palette-color-3: var(--dk) !important;
--theme-palette-color-4: var(--dk2) !important;
--theme-palette-color-5: var(--gy) !important;
--theme-palette-color-6: var(--gy2) !important;
--theme-palette-color-7: var(--white) !important;
--theme-palette-color-8: var(--f5) !important;
}
/* Remover padding/margin do Blocksy que interfere com o nosso layout */
.entry-content,
.ct-container,
.wp-site-blocks {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
}
/* Garantir que o nosso #nav tem sempre precedência */
#nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: var(--nav-height) !important;
background: var(--dk) !important;
z-index: var(--z-nav) !important;
}
/* Garantir footer Altagrad */
#footer {
background: var(--dk) !important;
color: rgba(255,255,255,.55) !important;
}
/* Secções — garantir cores correctas */
.section--green { background: var(--gl) !important; }
.section--dark { background: var(--dk) !important; color: var(--white) !important; }
.section--alt { background: var(--f5) !important; }
.section--white { background: var(--white) !important; }
/* Botões — garantir design Altagrad */
.btn--primary {
background: var(--g) !important;
color: var(--white) !important;
border-color: var(--g) !important;
}
.btn--primary:hover {
background: var(--gm) !important;
border-color: var(--gm) !important;
}
/* Nav hamburger — classe correcta */
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
padding: 8px;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--trans);
background: none;
border: none;
}
.nav-hamburger:hover { background: rgba(255,255,255,.07); }
.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: transform var(--trans), opacity var(--trans);
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Nav drawer — classe correcta (is-open em vez de open) */
#nav-drawer {
display: none;
position: fixed;
top: var(--nav-height);
left: 0; right: 0;
background: var(--dk);
border-top: 1px solid rgba(255,255,255,.08);
padding: var(--space-4) var(--space-6);
z-index: calc(var(--z-nav) - 1);
flex-direction: column;
gap: var(--space-1);
box-shadow: var(--shadow-lg);
}
#nav-drawer.is-open { display: flex; }
/* Lang btn — estado activo */
.lang-btn.on {
background: var(--g);
color: var(--white);
}
/* Nav CTA */
.btn-nav-cta {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: var(--g);
color: var(--white) !important;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: var(--weight-medium);
font-family: var(--font-body);
transition: background var(--trans), box-shadow var(--trans);
white-space: nowrap;
}
.btn-nav-cta:hover {
background: var(--gm);
box-shadow: var(--shadow-green);
}
/* Btn login */
.btn-login {
font-size: 13px;
color: rgba(255,255,255,.65);
padding: 7px 12px;
border-radius: var(--radius-sm);
transition: color var(--trans), background var(--trans);
font-family: var(--font-body);
}
.btn-login:hover { color: var(--white); background: rgba(255,255,255,.07); }
/* Drawer links */
.drawer-links { display: flex; flex-direction: column; }
.drawer-lang-row {
display: flex;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-top: 1px solid rgba(255,255,255,.08);
margin-top: var(--space-2);
}
.drawer-lang-btn {
font-size: 13px;
font-weight: var(--weight-medium);
font-family: var(--font-body);
padding: 6px 16px;
border-radius: var(--radius-full);
color: rgba(255,255,255,.45);
background: rgba(255,255,255,.06);
transition: color var(--trans), background var(--trans);
cursor: pointer;
border: none;
}
.drawer-lang-btn.on { background: var(--g); color: var(--white); }
@media (max-width: 768px) {
.nav-links { display: none !important; }
.nav-hamburger { display: flex !important; }
.btn-nav-cta { display: none; }
.btn-login { display: none; }
.lang-toggle { display: none; }
}
/* © 2026 Altagrad · Gerson Moises · Confidencial — style.css v1.0.2 */
\nbody.wp-singular { background: var(--white) !important; padding-top: var(--nav-height) !important; }\n.about-hero{background:var(--dk)!important;color:#fff!important}
/* ═══════════════════════════════════════════════════════════════════════════
Q. SOBRE v2.0 — OVERRIDES DE LAYOUT E TIPOGRAFIA
Resolve: classes .sec/.sec-inner não mapeadas, Blocksy specificity,
margens/padding, fontes das secções MVV, Valores, Timeline, CTA.
Adicionado: v2.0 — Junho 2026
═══════════════════════════════════════════════════════════════════════════ */
/* ── .sec e .sec-inner (aliases do standalone) ──────────────────────── */
.sec {
padding: 80px 48px;
}
.sec--alt {
background: var(--f5) !important;
padding: 80px 48px;
}
.sec-inner {
max-width: var(--max-width);
margin-inline: auto;
}
/* ── .eyebrow (alias do standalone) ─────────────────────────────────── */
.eyebrow {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--g);
margin-bottom: 14px;
}
/* ── .h2 (alias do standalone) ──────────────────────────────────────── */
.h2 {
font-family: var(--font-serif) !important;
font-size: clamp(28px, 3.5vw, 42px) !important;
font-weight: 400 !important;
color: var(--dk) !important;
line-height: 1.15 !important;
letter-spacing: -.3px !important;
margin-bottom: 12px !important;
}
/* ── Hero — forçar fundo escuro e cores de texto ─────────────────────── */
.about-hero {
background: var(--dk) !important;
padding: 72px 48px !important;
color: #fff !important;
}
.about-hero .about-h1 {
font-family: var(--font-serif) !important;
font-size: clamp(36px, 4.5vw, 54px) !important;
font-weight: 400 !important;
color: #fff !important;
line-height: 1.08 !important;
letter-spacing: -.5px !important;
margin-bottom: 16px !important;
}
.about-hero .about-h1 em {
color: var(--g) !important;
font-style: italic !important;
}
.about-hero .about-sub {
color: rgba(255,255,255,.58) !important;
font-size: clamp(14px, 1.2vw, 17px) !important;
font-weight: 300 !important;
line-height: 1.75 !important;
}
.about-hero .hero-badge-text {
color: var(--g) !important;
}
.about-hero .founder-tag {
background: rgba(255,255,255,.08) !important;
border-color: rgba(255,255,255,.15) !important;
color: rgba(255,255,255,.65) !important;
}
/* ── Secção MVV — fontes e espaçamento ───────────────────────────────── */
.sec .mvv-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
margin-bottom: 48px !important;
}
.sec .mvv-card {
border-radius: var(--radius-lg) !important;
padding: 28px !important;
}
.sec .mvv-label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
margin-bottom: 12px !important;
}
.sec .mvv-text {
font-size: 14px !important;
line-height: 1.75 !important;
font-family: var(--font-body) !important;
}
/* ── Os 5 Valores — título e grid ────────────────────────────────────── */
.sec h3 {
font-family: var(--font-display) !important;
font-size: 20px !important;
font-weight: 500 !important;
color: var(--dk) !important;
margin-top: 0 !important;
margin-bottom: 24px !important;
}
.sec .values-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 16px !important;
}
.sec .value-card {
background: var(--white) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important;
padding: 20px 14px !important;
text-align: center !important;
}
.sec .value-name {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--dk) !important;
margin-bottom: 5px !important;
font-family: var(--font-body) !important;
}
.sec .value-desc {
font-size: 11px !important;
color: var(--gy) !important;
line-height: 1.5 !important;
font-family: var(--font-body) !important;
}
/* ── Timeline — tipografia ───────────────────────────────────────────── */
.sec--alt .tl-year {
font-size: 10px !important;
font-weight: 700 !important;
color: var(--g) !important;
text-transform: uppercase !important;
letter-spacing: .10em !important;
margin-bottom: 5px !important;
font-family: var(--font-body) !important;
}
.sec--alt .tl-title {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--dk) !important;
margin-bottom: 4px !important;
font-family: var(--font-body) !important;
}
.sec--alt .tl-text {
font-size: 13.5px !important;
color: #444 !important;
line-height: 1.7 !important;
font-family: var(--font-body) !important;
}
.sec--alt .tl-item--highlight .tl-title {
color: var(--gd) !important;
font-size: 15px !important;
}
/* ── CTA-sec — fundo e tipografia ────────────────────────────────────── */
.cta-sec {
background: var(--gl) !important;
padding: 80px 48px !important;
text-align: center !important;
}
.cta-sec .cta-h {
font-family: var(--font-serif) !important;
font-size: clamp(28px, 3.5vw, 44px) !important;
color: var(--gd) !important;
font-weight: 400 !important;
line-height: 1.25 !important;
margin-bottom: 14px !important;
}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.sec, .sec--alt { padding: 60px 24px; }
.sec .mvv-grid { grid-template-columns: 1fr !important; }
.sec .values-grid { grid-template-columns: repeat(3, 1fr) !important; }
.about-hero { padding: 56px 24px !important; }
.about-hero-inner { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
.sec, .sec--alt { padding: 48px 20px; }
.sec .values-grid { grid-template-columns: repeat(2, 1fr) !important; }
.cta-sec { padding: 56px 20px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
R. SOBRE v2.1 — TIMELINE-GRID 2 COLUNAS + MANIFESTO-BLOCK + BADGE
Adicionado: v2.1 — Junho 2026
═══════════════════════════════════════════════════════════════════════════ */
/* ── Timeline-grid: 2 colunas como no standalone ─────────────────────── */
.timeline-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 48px !important;
margin-top: 36px !important;
align-items: start !important;
}
/* ── Manifesto block (coluna direita, fundo escuro) ──────────────────── */
.manifesto-block {
background: var(--dk) !important;
border-radius: var(--radius-xl) !important;
padding: 48px 52px !important;
}
.manifesto-quote {
font-family: var(--font-serif) !important;
font-size: clamp(16px, 1.8vw, 21px) !important;
color: #fff !important;
line-height: 1.6 !important;
font-style: italic !important;
margin-bottom: 24px !important;
position: relative !important;
padding-top: 32px !important;
}
.manifesto-quote::before {
content: '\201C' !important;
position: absolute !important;
top: -8px !important;
left: 0 !important;
font-size: 56px !important;
color: var(--g) !important;
font-family: var(--font-serif) !important;
line-height: 1 !important;
}
.manifesto-author {
font-size: 13px !important;
color: var(--g) !important;
font-weight: 500 !important;
margin-bottom: 24px !important;
font-family: var(--font-body) !important;
}
.manifesto-divider {
height: 1px !important;
background: rgba(255,255,255,.08) !important;
margin-bottom: 24px !important;
}
.academic-label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.28) !important;
margin-bottom: 14px !important;
font-family: var(--font-body) !important;
}
.academic-list {
font-size: 12.5px !important;
color: rgba(255,255,255,.50) !important;
line-height: 2.1 !important;
font-family: var(--font-body) !important;
}
/* ── Hero badge — pill verde com dot ─────────────────────────────────── */
.hero-badge {
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
background: rgba(29,158,117,.13) !important;
border: 1px solid rgba(29,158,117,.28) !important;
border-radius: var(--radius-full) !important;
padding: 7px 18px !important;
margin-bottom: 28px !important;
}
.hero-badge-dot {
width: 7px !important;
height: 7px !important;
background: var(--g) !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
animation: pulse 2.5s ease infinite !important;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.8); }
}
.hero-badge-text {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
color: var(--g) !important;
font-family: var(--font-body) !important;
}
/* ── Founder tags — semitransparentes sobre fundo escuro ─────────────── */
.about-hero .founder-tags {
display: flex !important;
gap: 9px !important;
flex-wrap: wrap !important;
margin-top: 20px !important;
}
.about-hero .founder-tag {
font-size: 11.5px !important;
padding: 5px 14px !important;
border-radius: var(--radius-full) !important;
border: 1px solid rgba(255,255,255,.18) !important;
color: rgba(255,255,255,.65) !important;
background: rgba(255,255,255,.07) !important;
font-family: var(--font-body) !important;
}
/* ── Responsive timeline-grid ────────────────────────────────────────── */
@media (max-width: 1024px) {
.timeline-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.manifesto-block {
padding: 32px 28px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
S. SOBRE v2.2 — HERO TIPOGRAFIA FINAL
about-h1 e about-sub alinhados ao standalone exacto
═══════════════════════════════════════════════════════════════════════════ */
.about-hero .about-h1 {
font-family: var(--font-serif) !important;
font-size: clamp(36px, 4.5vw, 54px) !important;
font-weight: 400 !important;
color: #fff !important;
line-height: 1.08 !important;
letter-spacing: -.5px !important;
margin-bottom: 16px !important;
}
.about-hero .about-h1 em {
color: var(--g) !important;
font-style: italic !important;
}
.about-hero .about-sub {
font-family: var(--font-body) !important;
font-size: clamp(14px, 1.2vw, 17px) !important;
font-weight: 300 !important;
color: rgba(255,255,255,.58) !important;
line-height: 1.75 !important;
max-width: 520px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
T. FIXES FINAIS v2.3 — Logo, Hero subtítulo, Manifesto
═══════════════════════════════════════════════════════════════════════════ */
/* ── Nav logo: "Alta" branco + "grad" verde, numa linha sem tagline ───── */
.nav-logo {
font-family: var(--font-display) !important;
font-size: 22px !important;
font-weight: 600 !important;
letter-spacing: -.4px !important;
color: var(--white) !important;
line-height: 1 !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: baseline !important;
gap: 0 !important;
white-space: nowrap !important;
}
.nav-logo .grad {
color: var(--g) !important;
font-family: var(--font-display) !important;
font-size: 22px !important;
font-weight: 600 !important;
}
.nav-logo .tagline {
display: none !important;
}
/* ── Hero: garantir grid 2 colunas e texto em 2 linhas ───────────────── */
.about-hero-inner {
max-width: var(--max-width) !important;
margin-inline: auto !important;
display: grid !important;
grid-template-columns: 1fr 280px !important;
gap: 56px !important;
align-items: start !important;
position: relative !important;
z-index: 1 !important;
}
.about-hero-inner > div:first-child {
min-width: 0 !important;
}
.about-hero .about-sub {
font-family: var(--font-body) !important;
font-size: 16px !important;
font-weight: 300 !important;
color: rgba(255,255,255,.58) !important;
line-height: 1.75 !important;
max-width: 560px !important;
}
/* ── Manifesto block: citação maior, alinhada ao standalone ──────────── */
.manifesto-block {
background: var(--dk) !important;
border-radius: var(--radius-xl) !important;
padding: 40px 44px !important;
}
.manifesto-quote {
font-family: var(--font-serif) !important;
font-size: clamp(17px, 1.6vw, 22px) !important;
color: #fff !important;
line-height: 1.65 !important;
font-style: italic !important;
margin-bottom: 20px !important;
padding-top: 32px !important;
position: relative !important;
}
.manifesto-quote::before {
content: '\201C' !important;
position: absolute !important;
top: -4px !important;
left: 0 !important;
font-size: 52px !important;
color: var(--g) !important;
font-family: var(--font-serif) !important;
line-height: 1 !important;
opacity: .7 !important;
}
.manifesto-author {
font-size: 13px !important;
color: var(--g) !important;
font-weight: 500 !important;
margin-bottom: 20px !important;
font-family: var(--font-body) !important;
}
.manifesto-divider {
height: 1px !important;
background: rgba(255,255,255,.08) !important;
margin-bottom: 20px !important;
border: none !important;
}
.academic-label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.28) !important;
margin-bottom: 12px !important;
font-family: var(--font-body) !important;
}
.academic-list {
font-size: 12.5px !important;
color: rgba(255,255,255,.50) !important;
line-height: 2.0 !important;
font-family: var(--font-body) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
U. HERO GRID FIX — forçar 2 colunas, subtítulo 2 linhas
═══════════════════════════════════════════════════════════════════════════ */
.about-hero {
padding: 72px 48px !important;
}
.about-hero .about-hero-inner {
display: grid !important;
grid-template-columns: 1fr 260px !important;
gap: 56px !important;
align-items: start !important;
max-width: 1200px !important;
margin-inline: auto !important;
width: 100% !important;
}
/* Garantir que o texto não colapsa */
.about-hero .about-hero-inner > * {
min-width: 0 !important;
}
.about-hero .about-sub {
font-weight: 300 !important;
font-size: 16px !important;
line-height: 1.75 !important;
color: rgba(255,255,255,.58) !important;
max-width: 100% !important;
}
/* eval-external dentro do manifesto-block: sem fundo extra */
.manifesto-block .eval-external {
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: var(--radius-md) !important;
padding: 18px 22px !important;
margin-bottom: 20px !important;
margin-top: 0 !important;
}
.manifesto-block .eval-external::before {
display: none !important;
}
.manifesto-block .eval-external__quote {
font-size: 13px !important;
line-height: 1.65 !important;
}
.manifesto-block .eval-external__label {
font-size: 9px !important;
margin-bottom: 8px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
V. JUSTIFICAÇÃO DE TEXTO — apenas texto corrido, sem efeitos colaterais
Aplicado a: tl-text, mvv-text, eval-quote, manifesto-quote,
kpi-section-lead, tl-item p, eval-note, about-sub
Não aplicado a: títulos, eyebrows, labels, botões, badges, navegação
═══════════════════════════════════════════════════════════════════════════ */
.tl-text,
.mvv-text,
.eval-quote__text,
.eval-external__quote,
.manifesto-quote,
.kpi-section-lead,
.about-sub,
.value-desc,
.tl-item p,
.eval-note__text {
text-align: justify !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
hyphenate-limit-chars: 6 3 3 !important;
}
/* ── CTA manifesto — bold de fecho com cor --gd ─────────────────────── */
.cta-sec .cta-h strong {
color: var(--gd) !important;
font-weight: 600 !important;
font-style: normal !important;
}
.cta-sec .cta-h {
text-align: center !important;
hyphens: auto !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
W. HOMEPAGE v1.1 — CSS completo alinhado ao standalone
Cobre: hero, personas, steps, disc-block, pricing, testimonials,
founder-strip, cta-section
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
background: var(--dk) !important;
padding: 88px 48px 80px !important;
position: relative !important;
overflow: hidden !important;
}
.hero::before {
content: '' !important;
position: absolute !important; top: -35% !important; right: -8% !important; z-index: 0 !important;
width: 680px !important; height: 680px !important;
background: radial-gradient(circle, rgba(29,158,117,.09) 0%, transparent 68%) !important;
pointer-events: none !important;
}
.hero::after {
content: '' !important;
position: absolute !important; bottom: -25% !important; left: -12% !important; z-index: 0 !important;
width: 520px !important; height: 520px !important;
background: radial-gradient(circle, rgba(29,158,117,.05) 0%, transparent 70%) !important;
pointer-events: none !important;
}
.hero-inner {
position: relative !important; z-index: 1 !important;
max-width: 700px !important;
margin-inline: auto !important;
}
.hero-h1 {
font-family: var(--font-serif) !important;
font-size: clamp(40px, 5vw, 64px) !important;
font-weight: 400 !important;
color: #fff !important;
line-height: 1.06 !important;
letter-spacing: -.5px !important;
margin-bottom: 16px !important;
}
.hero-h1 em { color: var(--g) !important; font-style: italic !important; }
.hero-sub {
font-size: clamp(15px, 1.5vw, 18px) !important;
color: rgba(255,255,255,.58) !important;
line-height: 1.75 !important;
font-weight: 300 !important;
max-width: 540px !important;
margin-bottom: 44px !important;
}
.hero-actions {
display: flex !important; gap: 14px !important;
flex-wrap: wrap !important; margin-bottom: 60px !important;
}
.hero-stats {
display: flex !important; gap: 44px !important; flex-wrap: wrap !important;
padding-top: 36px !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
}
.stat { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.stat-number {
font-family: var(--font-display) !important;
font-size: clamp(26px, 2.5vw, 36px) !important;
font-weight: 500 !important; color: #fff !important; line-height: 1 !important;
}
.stat-label {
font-size: 12px !important;
color: rgba(255,255,255,.38) !important; font-weight: 300 !important;
}
/* ── Secções helper ──────────────────────────────────────────────────── */
.section { padding: 80px 48px !important; }
.section--alt { background: var(--f5) !important; }
.section--green { background: var(--gl) !important; }
.section-inner { max-width: var(--max-width) !important; margin-inline: auto !important; }
.section-eyebrow {
font-size: 10px !important; font-weight: 700 !important;
letter-spacing: .16em !important; text-transform: uppercase !important;
color: var(--g) !important; margin-bottom: 14px !important;
}
.section-h2 {
font-family: var(--font-serif) !important;
font-size: clamp(28px, 3.5vw, 42px) !important;
font-weight: 400 !important; color: var(--dk) !important;
line-height: 1.15 !important; letter-spacing: -.3px !important; margin-bottom: 12px !important;
}
.section-h2--white { color: #fff !important; }
.section-lead {
font-size: clamp(14px, 1.2vw, 17px) !important;
font-weight: 300 !important; color: var(--gy) !important;
line-height: 1.75 !important; max-width: 560px !important; margin-bottom: 44px !important;
}
.section-lead--white { color: rgba(255,255,255,.58) !important; }
/* ── Personas ────────────────────────────────────────────────────────── */
.personas-grid {
display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important;
}
.persona-card {
background: var(--white) !important; border: 1px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important; padding: 26px !important;
transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans) !important;
}
.persona-card:hover { border-color: var(--g9) !important; transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important; }
.persona-avatar {
width: 46px !important; height: 46px !important; border-radius: 50% !important;
display: flex !important; align-items: center !important; justify-content: center !important;
font-family: var(--font-display) !important; font-size: 15px !important; font-weight: 600 !important;
margin-bottom: 16px !important; flex-shrink: 0 !important;
}
.av-1 { background: var(--gl) !important; color: var(--gd) !important; }
.av-2 { background: var(--lb) !important; color: #1a4a7a !important; }
.av-3 { background: var(--lp) !important; color: #4a3a8a !important; }
.persona-name { font-size: 15px !important; font-weight: 500 !important; color: var(--dk) !important; margin-bottom: 3px !important; }
.persona-loc { font-size: 10px !important; font-weight: 700 !important; color: var(--g) !important; text-transform: uppercase !important; letter-spacing: .08em !important; margin-bottom: 14px !important; }
.persona-quote { font-size: 13.5px !important; color: #555 !important; line-height: 1.65 !important; font-style: italic !important; border-left: 2.5px solid var(--g) !important; padding-left: 14px !important; }
/* ── Steps ───────────────────────────────────────────────────────────── */
.steps-list { display: flex !important; flex-direction: column !important; }
.step-row { display: flex !important; gap: 24px !important; align-items: flex-start !important; padding: 28px 16px !important; border-bottom: 1px solid #ebe7e0 !important; transition: background var(--trans) !important; }
.step-row:last-child { border-bottom: none !important; }
.step-row:hover { background: var(--f5) !important; border-radius: var(--radius-md) !important; }
.step-num {
width: 40px !important; height: 40px !important; border-radius: 50% !important; flex-shrink: 0 !important;
background: var(--f0) !important; border: 1.5px solid var(--border-color) !important;
display: flex !important; align-items: center !important; justify-content: center !important;
font-family: var(--font-display) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--dk) !important;
transition: background var(--trans), color var(--trans) !important;
}
.step-row:hover .step-num { background: var(--g) !important; color: #fff !important; border-color: var(--g) !important; }
.step-content { flex: 1 !important; }
.step-title { font-size: 15px !important; font-weight: 500 !important; color: var(--dk) !important; margin-bottom: 7px !important; }
.step-body { font-size: 14px !important; color: var(--gy) !important; line-height: 1.65 !important; margin-bottom: 12px !important; text-align: justify !important; hyphens: auto !important; }
.step-tags { display: flex !important; gap: 7px !important; flex-wrap: wrap !important; }
.tag { font-size: 11px !important; font-weight: 500 !important; padding: 4px 12px !important; border-radius: var(--radius-full) !important; background: var(--f0) !important; color: var(--gy) !important; border: 1px solid var(--border-color) !important; }
/* ── DISC block ──────────────────────────────────────────────────────── */
.disc-block {
background: var(--dk) !important; border-radius: 22px !important; padding: 52px 56px !important;
display: grid !important; grid-template-columns: 1fr 220px !important; gap: 56px !important; align-items: center !important;
}
.disc-quads { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.disc-quad { border-radius: 14px !important; padding: 18px 14px !important; text-align: center !important; transition: transform var(--trans) !important; }
.disc-quad:hover { transform: scale(1.04) !important; }
.dq-D { background: rgba(29,158,117,.18) !important; border: 1px solid rgba(29,158,117,.32) !important; }
.dq-I { background: rgba(55,138,221,.12) !important; border: 1px solid rgba(55,138,221,.22) !important; }
.dq-S { background: rgba(186,117,23,.11) !important; border: 1px solid rgba(186,117,23,.22) !important; }
.dq-C { background: rgba(127,119,221,.11) !important; border: 1px solid rgba(127,119,221,.22) !important; }
.dq-letter { font-family: var(--font-serif) !important; font-size: 32px !important; line-height: 1 !important; margin-bottom: 6px !important; }
.dq-D .dq-letter { color: var(--g) !important; }
.dq-I .dq-letter { color: #5DCAA5 !important; }
.dq-S .dq-letter { color: #EF9F27 !important; }
.dq-C .dq-letter { color: #9F99DD !important; }
.dq-name { font-size: 11px !important; color: rgba(255,255,255,.48) !important; }
/* ── Pricing ─────────────────────────────────────────────────────────── */
.pricing-grid {
display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 22px !important;
}
.pricing-grid--4 { grid-template-columns: repeat(4,1fr) !important; }
.price-card {
background: var(--white) !important; border: 1.5px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important; padding: 30px !important;
display: flex !important; flex-direction: column !important;
transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans) !important;
}
.price-card:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important; }
.price-card--featured { border: 2px solid var(--g) !important; }
.price-card--featured:hover { box-shadow: 0 6px 24px rgba(29,158,117,.18) !important; }
.pc-badge { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; padding: 4px 13px !important; border-radius: var(--radius-full) !important; display: inline-block !important; width: fit-content !important; margin-bottom: 18px !important; }
.pc-badge--green { background: var(--gl) !important; color: var(--gd) !important; }
.pc-badge--blue { background: var(--lb) !important; color: #1a4a7a !important; }
.pc-name { font-family: var(--font-display) !important; font-size: 19px !important; font-weight: 500 !important; color: var(--dk) !important; margin-bottom: 8px !important; }
.pc-price { font-family: var(--font-serif) !important; font-size: 44px !important; color: var(--dk) !important; line-height: 1 !important; margin-bottom: 5px !important; }
.pc-period { font-size: 12px !important; color: var(--gy) !important; margin-bottom: 22px !important; font-weight: 300 !important; }
.pc-items { flex: 1 !important; margin-bottom: 26px !important; }
.pc-item { display: flex !important; gap: 10px !important; align-items: flex-start !important; font-size: 13.5px !important; color: #3d3d3a !important; padding: 7px 0 !important; border-bottom: 1px solid #f2efe9 !important; line-height: 1.5 !important; }
.pc-item:last-child { border-bottom: none !important; }
.pc-check { color: var(--g) !important; font-weight: 700 !important; flex-shrink: 0 !important; }
.pc-cross { color: var(--gy2) !important; font-weight: 700 !important; flex-shrink: 0 !important; }
.pc-item--no { color: var(--gy) !important; }
/* ── Testimonials ────────────────────────────────────────────────────── */
.testimonials-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; }
.testimonial-card { background: var(--f5) !important; border-radius: var(--radius-lg) !important; padding: 28px !important; }
.tc-quote { font-size: 14.5px !important; color: #444 !important; line-height: 1.75 !important; font-style: italic !important; margin-bottom: 20px !important; position: relative !important; padding-top: 26px !important; text-align: justify !important; hyphens: auto !important; }
.tc-quote::before { content: '\201C' !important; position: absolute !important; top: -4px !important; left: 0 !important; font-size: 46px !important; color: var(--g) !important; font-family: var(--font-serif) !important; line-height: 1 !important; }
.tc-author { display: flex !important; align-items: center !important; gap: 12px !important; }
.tc-avatar { width: 36px !important; height: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-display) !important; font-size: 12px !important; font-weight: 700 !important; }
.tc-name { font-size: 13px !important; font-weight: 500 !important; color: var(--dk) !important; }
.tc-loc { font-size: 11px !important; color: var(--gy) !important; }
/* ── Founder strip ───────────────────────────────────────────────────── */
.founder-strip { display: grid !important; grid-template-columns: auto 1fr !important; gap: 44px !important; align-items: start !important; }
.founder-avatar { width: 96px !important; height: 96px !important; border-radius: 50% !important; background: var(--gl) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-display) !important; font-size: 28px !important; font-weight: 500 !important; color: var(--g) !important; flex-shrink: 0 !important; border: 3px solid var(--g9) !important; }
.founder-name { font-family: var(--font-serif) !important; font-size: 26px !important; color: var(--dk) !important; margin-bottom: 5px !important; }
.founder-title { font-size: 13px !important; color: var(--g) !important; font-weight: 500 !important; letter-spacing: .02em !important; margin-bottom: 18px !important; }
.founder-bio { font-size: 15.5px !important; color: #444 !important; line-height: 1.82 !important; margin-bottom: 20px !important; font-weight: 300 !important; text-align: justify !important; hyphens: auto !important; }
.founder-tags { display: flex !important; gap: 9px !important; flex-wrap: wrap !important; }
.founder-tag { font-size: 11.5px !important; padding: 5px 14px !important; border-radius: var(--radius-full) !important; border: 1px solid var(--border-color) !important; color: var(--gy) !important; background: var(--white) !important; }
/* ── CTA section ─────────────────────────────────────────────────────── */
.cta-section { background: var(--gl) !important; padding: 84px 48px !important; text-align: center !important; }
.cta-h { font-family: var(--font-serif) !important; font-size: clamp(30px,4vw,46px) !important; color: var(--gd) !important; font-weight: 400 !important; line-height: 1.2 !important; margin-bottom: 14px !important; }
.cta-p { font-size: 15px !important; color: var(--gm) !important; font-weight: 300 !important; margin-bottom: 32px !important; }
/* ── Responsive homepage ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hero { padding: 72px 32px 64px !important; }
.pricing-grid--4 { grid-template-columns: repeat(2,1fr) !important; }
.disc-block { grid-template-columns: 1fr !important; padding: 40px !important; gap: 40px !important; }
.disc-quads { width: 220px !important; margin: 0 auto !important; }
.section { padding: 60px 24px !important; }
.cta-section { padding: 60px 24px !important; }
}
@media (max-width: 768px) {
.personas-grid { grid-template-columns: 1fr !important; }
.testimonials-grid { grid-template-columns: 1fr !important; }
.pricing-grid--4 { grid-template-columns: 1fr !important; }
.founder-strip { grid-template-columns: 1fr !important; }
.hero-stats { gap: 28px !important; }
.hero { padding: 60px 20px 52px !important; }
.hero-h1 { font-size: 36px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
X. HOMEPAGE FIXES v1.2
1. btn--outline-hero — visível sobre fundo escuro
2. Step tags — verde (padrão standalone)
3. Step numbers — verde
4. pc-badge — só PT visível por defeito (EN via toggle)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Botão outline sobre hero escuro ─────────────────────────────────── */
.btn--outline-hero {
background: transparent !important;
color: #fff !important;
border: 1.5px solid rgba(255,255,255,.45) !important;
border-radius: var(--radius-full) !important;
padding: 13px 28px !important;
font-family: var(--font-display) !important;
font-size: 15px !important;
font-weight: 500 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
transition: background var(--trans), border-color var(--trans) !important;
}
.btn--outline-hero:hover {
background: rgba(255,255,255,.08) !important;
border-color: rgba(255,255,255,.7) !important;
}
/* ── Step tags — verde como no standalone ────────────────────────────── */
.step-tags .tag {
background: var(--gl) !important;
color: var(--gd) !important;
border-color: var(--g9) !important;
font-weight: 600 !important;
}
/* ── Step numbers — verde ────────────────────────────────────────────── */
.step-num {
background: var(--gl) !important;
border-color: var(--g9) !important;
color: var(--gd) !important;
font-weight: 700 !important;
}
.step-row:hover .step-num {
background: var(--g) !important;
color: #fff !important;
border-color: var(--g) !important;
}
/* ── Pricing badges EN — ocultos por defeito, visíveis em lang-en ────── */
.pc-badge.en-only { display: none !important; }
body.lang-en .pc-badge.pt-only { display: none !important; }
body.lang-en .pc-badge.en-only { display: inline-block !important; }
/* ── DISC block — wrap com label + OCEAN ─────────────────────────────── */
.disc-quads-wrap {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.disc-quads-label {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.35) !important;
margin-bottom: 8px !important;
font-family: var(--font-body) !important;
}
/* OCEAN — 5 quadrantes menores */
.ocean-quads {
display: grid !important;
grid-template-columns: repeat(5,1fr) !important;
gap: 6px !important;
}
.ocean-quad {
border-radius: 10px !important;
padding: 10px 6px !important;
text-align: center !important;
}
.oq-O { background: rgba(29,158,117,.15) !important; border: 1px solid rgba(29,158,117,.25) !important; }
.oq-C { background: rgba(29,158,117,.10) !important; border: 1px solid rgba(29,158,117,.18) !important; }
.oq-E { background: rgba(55,138,221,.12) !important; border: 1px solid rgba(55,138,221,.20) !important; }
.oq-A { background: rgba(186,117,23,.10) !important; border: 1px solid rgba(186,117,23,.18) !important; }
.oq-N { background: rgba(200,60,60,.10) !important; border: 1px solid rgba(200,60,60,.18) !important; }
.oq-letter {
font-family: var(--font-serif) !important;
font-size: 18px !important;
line-height: 1 !important;
margin-bottom: 4px !important;
color: rgba(255,255,255,.75) !important;
}
.oq-name {
font-size: 9px !important;
color: rgba(255,255,255,.38) !important;
font-family: var(--font-body) !important;
}
/* ── OCEAN fix — caber dentro da coluna do disc-block ────────────────── */
.ocean-quads {
display: grid !important;
grid-template-columns: repeat(5,1fr) !important;
gap: 5px !important;
width: 100% !important;
}
.ocean-quad {
border-radius: 8px !important;
padding: 8px 4px !important;
text-align: center !important;
min-width: 0 !important;
}
.oq-letter {
font-size: 15px !important;
margin-bottom: 3px !important;
}
.oq-name {
font-size: 8px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Garantir que disc-quads-wrap não ultrapassa a coluna */
.disc-block .disc-quads-wrap {
width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
/* Ajustar grid do disc-block para dar mais espaço à col direita */
.disc-block {
grid-template-columns: 1fr 240px !important;
}
/* ── Founder avatar — foto real ──────────────────────────────────────── */
.founder-avatar-img {
width: 96px !important;
height: 96px !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center top !important;
border: 3px solid var(--g9) !important;
flex-shrink: 0 !important;
display: block !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
Y. PÁGINA SERVIÇOS v1.0 RFT
Alinhado ao standalone Altagrad_SITE_INTEGRATION_v2.html
═══════════════════════════════════════════════════════════════════════════ */
/* ── Page Hero (fundo escuro, partilhado com outras páginas internas) ── */
.page-hero {
background: var(--dk) !important;
padding: 72px 48px !important;
position: relative !important;
overflow: hidden !important;
}
.page-hero::before {
content: '' !important;
position: absolute !important;
top: -30% !important; right: -8% !important;
width: 600px !important; height: 600px !important;
background: radial-gradient(circle,rgba(29,158,117,.09) 0%,transparent 68%) !important;
pointer-events: none !important;
}
.page-hero .hero-inner {
max-width: var(--max-width) !important;
margin-inline: auto !important;
position: relative !important;
z-index: 1 !important;
}
.page-hero .h1 {
font-family: var(--font-serif) !important;
font-size: clamp(36px, 4.5vw, 56px) !important;
font-weight: 400 !important;
color: #fff !important;
line-height: 1.08 !important;
letter-spacing: -.5px !important;
margin-bottom: 16px !important;
}
.page-hero .h1 em {
color: var(--g) !important;
font-style: italic !important;
}
.page-hero .hero-sub {
font-size: clamp(14px, 1.3vw, 17px) !important;
color: rgba(255,255,255,.58) !important;
line-height: 1.75 !important;
font-weight: 300 !important;
max-width: 560px !important;
}
/* ── Services Grid — 2×2 ─────────────────────────────────────────────── */
.services-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
margin-top: 40px !important;
}
/* ── Service Cards ───────────────────────────────────────────────────── */
.svc-card {
border: 1.5px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important;
padding: 32px !important;
background: var(--white) !important;
transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans) !important;
display: flex !important;
flex-direction: column !important;
}
.svc-card:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
.svc-card--dark {
background: var(--dk) !important;
border-color: var(--dk) !important;
color: #fff !important;
}
.svc-card--featured {
border: 2px solid var(--g) !important;
}
.svc-card--featured:hover {
box-shadow: 0 6px 24px rgba(29,158,117,.18) !important;
}
/* ── Service Badges ──────────────────────────────────────────────────── */
.svc-badge {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
padding: 4px 13px !important;
border-radius: var(--radius-full) !important;
display: inline-block !important;
width: fit-content !important;
margin-bottom: 16px !important;
}
.sb-green { background: var(--gl) !important; color: var(--gd) !important; }
.sb-blue { background: var(--lb) !important; color: #1a4a7a !important; }
.sb-dark { background: rgba(255,255,255,.10) !important; color: var(--g) !important; border: 1px solid rgba(255,255,255,.15) !important; }
/* ── Service Typography ──────────────────────────────────────────────── */
.svc-name { font-family: var(--font-display) !important; font-size: 20px !important; font-weight: 500 !important; margin-bottom: 8px !important; }
.svc-name--white { color: #fff !important; }
.svc-name--dk { color: var(--dk) !important; }
.svc-price { font-family: var(--font-serif) !important; font-size: 44px !important; line-height: 1 !important; margin-bottom: 5px !important; }
.svc-price--dk { color: var(--dk) !important; }
.svc-price--g { color: var(--g) !important; }
.svc-period { font-size: 12px !important; color: var(--gy) !important; margin-bottom: 20px !important; font-weight: 300 !important; }
.svc-period--white { color: rgba(255,255,255,.40) !important; }
.svc-desc { font-size: 14px !important; line-height: 1.75 !important; margin-bottom: 22px !important; flex: 1 !important; text-align: justify !important; hyphens: auto !important; }
.svc-desc--dk { color: #444 !important; }
/* ── Service Items (checklist) ───────────────────────────────────────── */
.svc-items { margin-bottom: 24px !important; flex: 1 !important; }
.svc-item {
display: flex !important;
gap: 10px !important;
align-items: flex-start !important;
font-size: 13.5px !important;
padding: 7px 0 !important;
border-bottom: 1px solid #f2efe9 !important;
line-height: 1.5 !important;
color: #3d3d3a !important;
}
.svc-item--white {
border-bottom-color: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.75) !important;
}
.svc-item:last-child { border-bottom: none !important; }
.svc-check { color: var(--g) !important; font-weight: 700 !important; flex-shrink: 0 !important; margin-top: 1px !important; }
/* ── Methodology Grid — 3 cards ──────────────────────────────────────── */
.method-grid {
display: grid !important;
grid-template-columns: repeat(3,1fr) !important;
gap: 20px !important;
margin-top: 40px !important;
}
.method-card {
background: var(--white) !important;
border-radius: var(--radius-lg) !important;
padding: 26px !important;
text-align: center !important;
transition: transform var(--trans), box-shadow var(--trans) !important;
}
.method-card:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
.method-icon {
width: 56px !important;
height: 56px !important;
border-radius: var(--radius-lg) !important;
margin: 0 auto 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.mi-D { background: rgba(29,158,117,.12) !important; border: 1px solid rgba(29,158,117,.22) !important; }
.mi-C2 { background: rgba(55,138,221,.10) !important; border: 1px solid rgba(55,138,221,.18) !important; }
.method-letter { font-family: var(--font-serif) !important; font-size: 36px !important; line-height: 1 !important; }
.ml-D { color: var(--g) !important; }
.ml-C2 { color: #1a4a7a !important; }
.method-name { font-size: 15px !important; font-weight: 500 !important; color: var(--dk) !important; margin-bottom: 8px !important; }
.method-desc { font-size: 13px !important; color: var(--gy) !important; line-height: 1.65 !important; text-align: justify !important; hyphens: auto !important; }
/* ── Lead text (secção metodologia) ─────────────────────────────────── */
.lead {
font-size: clamp(14px,1.2vw,17px) !important;
font-weight: 300 !important;
color: var(--gy) !important;
line-height: 1.75 !important;
max-width: 640px !important;
margin-bottom: 0 !important;
text-align: justify !important;
hyphens: auto !important;
}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.page-hero { padding: 60px 24px !important; }
.services-grid { grid-template-columns: 1fr !important; max-width: 540px !important; margin-inline: auto !important; }
.method-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
.method-grid { grid-template-columns: 1fr !important; }
.page-hero { padding: 48px 20px !important; }
}
/* ── Page hero centrado (serviços) ───────────────────────────────────── */
.page-hero--centered {
text-align: center !important;
}
.page-hero--centered .hero-inner {
margin-inline: auto !important;
}
.page-hero--centered .hero-badge {
margin-inline: auto !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
Z. PÁGINA DIAGNÓSTICO v1.0 RFT
Alinhado ao standalone Altagrad_SITE_INTEGRATION_v2.html
═══════════════════════════════════════════════════════════════════════════ */
/* ── Disc Hero — 2 colunas: texto + card formulário ─────────────────── */
.disc-hero {
background: var(--dk) !important;
padding: 72px 48px !important;
display: grid !important;
grid-template-columns: 1fr 420px !important;
gap: 56px !important;
align-items: center !important;
position: relative !important;
overflow: hidden !important;
}
.disc-hero::before {
content: '' !important;
position: absolute !important;
top: -30% !important; right: -5% !important;
width: 600px !important; height: 600px !important;
background: radial-gradient(circle,rgba(29,158,117,.09) 0%,transparent 68%) !important;
pointer-events: none !important;
}
.disc-hero-text { position: relative !important; z-index: 1 !important; }
.disc-hero .h1 {
font-family: var(--font-serif) !important;
font-size: clamp(36px, 4.5vw, 54px) !important;
font-weight: 400 !important;
color: #fff !important;
line-height: 1.08 !important;
letter-spacing: -.5px !important;
margin-bottom: 16px !important;
}
.disc-hero .h1 em { color: var(--g) !important; font-style: italic !important; }
.disc-hero .hero-sub {
font-size: clamp(14px,1.2vw,16px) !important;
color: rgba(255,255,255,.58) !important;
line-height: 1.75 !important;
font-weight: 300 !important;
max-width: 480px !important;
margin-bottom: 0 !important;
}
/* ── Formulário DISC ─────────────────────────────────────────────────── */
.disc-form-card {
background: var(--white) !important;
border-radius: 20px !important;
padding: 36px !important;
box-shadow: 0 12px 48px rgba(0,0,0,.20) !important;
position: relative !important;
z-index: 1 !important;
}
.disc-form-header {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--dk) !important;
margin-bottom: 6px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid #f0ede8 !important;
}
.disc-form-sub {
font-size: 12px !important;
color: var(--gy) !important;
margin-bottom: 20px !important;
margin-top: 10px !important;
}
.disc-progress {
height: 4px !important;
background: var(--f0) !important;
border-radius: 2px !important;
overflow: hidden !important;
margin-bottom: 12px !important;
}
.disc-progress-fill {
height: 100% !important;
background: var(--g) !important;
border-radius: 2px !important;
transition: width .4s ease !important;
}
.disc-steps-indicator {
display: flex !important;
gap: 6px !important;
margin-bottom: 20px !important;
}
.dsi {
width: 20px !important;
height: 4px !important;
border-radius: 2px !important;
background: var(--f0) !important;
transition: background .3s ease !important;
}
.dsi.active { background: var(--g) !important; }
.dsi.done { background: var(--gd) !important; }
/* ── Questões ────────────────────────────────────────────────────────── */
.disc-question { display: none !important; }
.disc-question.active { display: block !important; }
.disc-q-num {
font-size: 10px !important;
font-weight: 700 !important;
color: var(--g) !important;
text-transform: uppercase !important;
letter-spacing: .10em !important;
margin-bottom: 8px !important;
}
.disc-q-label {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--dk) !important;
line-height: 1.5 !important;
margin-bottom: 16px !important;
}
.disc-opts { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.disc-opt {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 11px 14px !important;
border: 1.5px solid var(--border-color) !important;
border-radius: var(--radius-md) !important;
background: var(--white) !important;
font-size: 13px !important;
color: #444 !important;
text-align: left !important;
cursor: pointer !important;
transition: border-color var(--trans), background var(--trans) !important;
font-family: var(--font-body) !important;
}
.disc-opt:hover {
border-color: var(--g) !important;
background: var(--gl) !important;
}
.disc-opt.selected {
border-color: var(--g) !important;
background: var(--gl) !important;
color: var(--gd) !important;
}
.disc-opt-radio {
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
border: 2px solid var(--border-color) !important;
flex-shrink: 0 !important;
transition: border-color var(--trans), background var(--trans) !important;
}
.disc-opt.selected .disc-opt-radio {
border-color: var(--g) !important;
background: var(--g) !important;
}
.disc-nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-top: 14px !important;
}
.disc-back {
font-size: 12px !important;
color: var(--gy) !important;
cursor: pointer !important;
font-family: var(--font-body) !important;
}
.disc-back:hover { color: var(--dk) !important; }
.disc-count {
font-size: 11px !important;
color: var(--gy) !important;
font-weight: 500 !important;
}
/* ── Resultado ───────────────────────────────────────────────────────── */
.result-profile-name {
font-family: var(--font-serif) !important;
font-size: 28px !important;
color: var(--gd) !important;
margin-bottom: 8px !important;
line-height: 1.1 !important;
}
.result-profile-tag {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
color: var(--g) !important;
margin-bottom: 16px !important;
}
.result-bars { margin-bottom: 18px !important; }
.result-bar-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 8px !important;
}
.result-bar-label {
font-size: 12px !important;
font-weight: 700 !important;
color: var(--dk) !important;
width: 20px !important;
flex-shrink: 0 !important;
}
.result-bar-track {
flex: 1 !important;
height: 7px !important;
background: var(--f0) !important;
border-radius: 4px !important;
overflow: hidden !important;
}
.result-bar-fill {
height: 100% !important;
border-radius: 4px !important;
transition: width .6s ease !important;
}
.result-bar-val {
font-size: 11px !important;
font-weight: 700 !important;
width: 36px !important;
text-align: right !important;
}
.result-desc {
background: var(--gl) !important;
border-radius: var(--radius-md) !important;
padding: 14px !important;
margin-bottom: 16px !important;
font-size: 12.5px !important;
color: var(--gm) !important;
line-height: 1.7 !important;
text-align: justify !important;
hyphens: auto !important;
}
.result-next-title {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--gd) !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
margin-bottom: 6px !important;
}
.result-next-text {
font-size: 11.5px !important;
color: var(--gy) !important;
line-height: 1.6 !important;
margin-bottom: 14px !important;
}
/* ── 4 Dimensões DISC grid ───────────────────────────────────────────── */
.disc-4-grid {
display: grid !important;
grid-template-columns: repeat(4,1fr) !important;
gap: 18px !important;
margin-top: 36px !important;
}
.disc-dim-card {
border-radius: var(--radius-lg) !important;
padding: 26px !important;
text-align: center !important;
transition: transform var(--trans) !important;
}
.disc-dim-card:hover { transform: scale(1.03) !important; }
.dd-D { background: rgba(29,158,117,.06) !important; border: 1px solid rgba(29,158,117,.18) !important; }
.dd-I { background: rgba(55,138,221,.06) !important; border: 1px solid rgba(55,138,221,.18) !important; }
.dd-S { background: rgba(186,117,23,.06) !important; border: 1px solid rgba(186,117,23,.18) !important; }
.dd-C { background: rgba(127,119,221,.06) !important; border: 1px solid rgba(127,119,221,.18) !important; }
.dd-letter {
font-family: var(--font-serif) !important;
font-size: 44px !important;
margin-bottom: 10px !important;
line-height: 1 !important;
}
.dd-D .dd-letter { color: var(--g) !important; }
.dd-I .dd-letter { color: #378ADD !important; }
.dd-S .dd-letter { color: #BA7517 !important; }
.dd-C .dd-letter { color: #7F77DD !important; }
.dd-name { font-size: 15px !important; font-weight: 500 !important; margin-bottom: 8px !important; }
.dd-D .dd-name { color: var(--gd) !important; }
.dd-I .dd-name { color: #185FA5 !important; }
.dd-S .dd-name { color: #854F0B !important; }
.dd-C .dd-name { color: #3C3489 !important; }
.dd-desc {
font-size: 12.5px !important;
line-height: 1.65 !important;
text-align: justify !important;
hyphens: auto !important;
}
.dd-D .dd-desc { color: var(--gm) !important; }
.dd-I .dd-desc { color: #185FA5 !important; }
.dd-S .dd-desc { color: #854F0B !important; }
.dd-C .dd-desc { color: #3C3489 !important; }
.dd-traits {
margin-top: 12px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
justify-content: center !important;
}
.dd-trait {
font-size: 10px !important;
padding: 3px 9px !important;
border-radius: var(--radius-full) !important;
font-weight: 500 !important;
}
.dd-D .dd-trait { background: var(--gl) !important; color: var(--gd) !important; }
.dd-I .dd-trait { background: var(--lb) !important; color: #1a4a7a !important; }
.dd-S .dd-trait { background: var(--la) !important; color: #854F0B !important; }
.dd-C .dd-trait { background: var(--lp) !important; color: #3C3489 !important; }
/* ── btn--outline-green ──────────────────────────────────────────────── */
.btn--outline-green {
background: transparent !important;
color: var(--gd) !important;
border: 1.5px solid var(--g) !important;
border-radius: var(--radius-full) !important;
padding: 13px 28px !important;
font-family: var(--font-display) !important;
font-size: 15px !important;
font-weight: 500 !important;
display: inline-flex !important;
align-items: center !important;
transition: background var(--trans) !important;
}
.btn--outline-green:hover {
background: var(--gl) !important;
}
/* ── Responsive diagnóstico ──────────────────────────────────────────── */
@media (max-width: 1024px) {
.disc-hero { grid-template-columns: 1fr !important; padding: 60px 24px !important; }
.disc-form-card { max-width: 480px !important; margin-inline: auto !important; }
.disc-4-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
.disc-4-grid { grid-template-columns: 1fr !important; }
.disc-hero { padding: 48px 20px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
AA. DIAGNÓSTICO v1.1 — Hero descongestionar + Big Five OCEAN grid
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero — colunas equilibradas, mais espaço ────────────────────────── */
.disc-hero {
padding: 88px 56px !important;
grid-template-columns: 1fr 400px !important;
gap: 64px !important;
min-height: 560px !important;
align-items: center !important;
}
.disc-hero .h1 {
font-size: clamp(32px, 3.8vw, 50px) !important;
margin-bottom: 20px !important;
}
.disc-hero .hero-sub {
margin-bottom: 32px !important;
font-size: 14px !important;
line-height: 1.8 !important;
}
/* Trust items — substituir inline styles por classe limpa */
.disc-hero-trust {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin-top: 32px !important;
}
.disc-trust-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 13px !important;
color: rgba(255,255,255,.45) !important;
font-family: var(--font-body) !important;
}
/* ── Big Five OCEAN — grid 5 colunas ─────────────────────────────────── */
.ocean-5-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 16px !important;
}
.ocean-dim-card {
border-radius: var(--radius-lg) !important;
padding: 24px 18px !important;
text-align: center !important;
transition: transform var(--trans) !important;
}
.ocean-dim-card:hover { transform: translateY(-3px) !important; }
/* Cores por dimensão OCEAN */
.od-O { background: rgba(29,158,117,.06) !important; border: 1px solid rgba(29,158,117,.18) !important; }
.od-C { background: rgba(55,138,221,.06) !important; border: 1px solid rgba(55,138,221,.18) !important; }
.od-E { background: rgba(239,159,39,.06) !important; border: 1px solid rgba(239,159,39,.18) !important; }
.od-A { background: rgba(127,119,221,.06) !important; border: 1px solid rgba(127,119,221,.18) !important; }
.od-N { background: rgba(200,80,80,.06) !important; border: 1px solid rgba(200,80,80,.18) !important; }
.od-letter {
font-family: var(--font-serif) !important;
font-size: 38px !important;
margin-bottom: 8px !important;
line-height: 1 !important;
}
.od-O .od-letter { color: var(--g) !important; }
.od-C .od-letter { color: #378ADD !important; }
.od-E .od-letter { color: #EF9F27 !important; }
.od-A .od-letter { color: #7F77DD !important; }
.od-N .od-letter { color: #C85050 !important; }
.od-name {
font-size: 13px !important;
font-weight: 600 !important;
margin-bottom: 10px !important;
}
.od-O .od-name { color: var(--gd) !important; }
.od-C .od-name { color: #185FA5 !important; }
.od-E .od-name { color: #8A5E0B !important; }
.od-A .od-name { color: #3C3489 !important; }
.od-N .od-name { color: #8B2020 !important; }
.od-desc {
font-size: 12px !important;
line-height: 1.65 !important;
margin-bottom: 12px !important;
text-align: justify !important;
hyphens: auto !important;
}
.od-O .od-desc { color: var(--gm) !important; }
.od-C .od-desc { color: #185FA5 !important; }
.od-E .od-desc { color: #7A5209 !important; }
.od-A .od-desc { color: #3C3489 !important; }
.od-N .od-desc { color: #8B2020 !important; }
.od-traits {
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
justify-content: center !important;
}
.od-trait {
font-size: 10px !important;
padding: 3px 9px !important;
border-radius: var(--radius-full) !important;
font-weight: 500 !important;
}
.od-O .od-trait { background: var(--gl) !important; color: var(--gd) !important; }
.od-C .od-trait { background: var(--lb) !important; color: #1a4a7a !important; }
.od-E .od-trait { background: var(--la) !important; color: #8A5E0B !important; }
.od-A .od-trait { background: var(--lp) !important; color: #3C3489 !important; }
.od-N .od-trait { background: rgba(200,80,80,.10) !important; color: #8B2020 !important; }
/* ── Responsive OCEAN ────────────────────────────────────────────────── */
@media (max-width: 1200px) {
.ocean-5-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
.ocean-5-grid { grid-template-columns: repeat(2, 1fr) !important; }
.disc-hero { padding: 60px 24px !important; gap: 40px !important; }
}
@media (max-width: 480px) {
.ocean-5-grid { grid-template-columns: 1fr !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
AB. DIAGNÓSTICO v1.2 — Hero fix definitivo
Problema: formulário excede altura do hero, texto fica comprimido
Solução: padding assimétrico, align-items:start, form sem shadow externo
═══════════════════════════════════════════════════════════════════════════ */
.disc-hero {
padding: 80px 56px 80px !important;
grid-template-columns: 1fr 380px !important;
gap: 56px !important;
align-items: start !important;
min-height: unset !important;
}
.disc-hero-text {
padding-top: 16px !important;
}
.disc-hero .hero-badge {
margin-bottom: 24px !important;
}
.disc-hero .h1 {
font-size: clamp(30px, 3.5vw, 46px) !important;
margin-bottom: 18px !important;
}
.disc-hero .hero-sub {
font-size: 14px !important;
line-height: 1.75 !important;
max-width: 440px !important;
margin-bottom: 28px !important;
}
.disc-hero-trust {
gap: 10px !important;
margin-top: 24px !important;
}
.disc-trust-item {
font-size: 12.5px !important;
}
/* Form card — sem sombra excessiva */
.disc-form-card {
padding: 28px !important;
border-radius: 16px !important;
box-shadow: 0 8px 32px rgba(0,0,0,.18) !important;
}
.disc-form-header {
font-size: 13px !important;
padding-bottom: 12px !important;
margin-bottom: 4px !important;
}
.disc-form-sub {
font-size: 11.5px !important;
margin-bottom: 16px !important;
margin-top: 8px !important;
}
.disc-opts { gap: 6px !important; }
.disc-opt {
padding: 9px 12px !important;
font-size: 12.5px !important;
}
@media (max-width: 1100px) {
.disc-hero {
grid-template-columns: 1fr !important;
padding: 60px 24px !important;
}
.disc-form-card {
max-width: 460px !important;
margin-inline: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
AC. DIAGNÓSTICO v1.3 — Hero layout + WCAG text fixes
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero: forçar largura máxima e remover constraints do Blocksy ────── */
.disc-hero {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 80px 5vw !important;
grid-template-columns: minmax(300px,1fr) minmax(340px,400px) !important;
gap: 48px !important;
align-items: start !important;
}
/* ── OCEAN section — WCAG AA compliant ───────────────────────────────── */
/* Título */
#ocean-dim-h2 {
color: var(--dk) !important;
font-size: clamp(26px, 3vw, 38px) !important;
margin-bottom: 16px !important;
}
/* Lead text — contraste mínimo 4.5:1 sobre branco */
.sec .lead,
.sec--alt .lead {
color: #444440 !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
max-width: 680px !important;
}
/* Eyebrow OCEAN */
#ocean-dim-h2 ~ .lead,
.sec .eyebrow + * + .lead {
color: #444440 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
AD. BLOCKSY BREAKOUT — disc-hero full-width
O Blocksy envolve o conteúdo num ct-container com max-width.
Esta técnica força o hero a ocupar 100vw independentemente do container.
═══════════════════════════════════════════════════════════════════════════ */
.disc-hero {
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
width: 100vw !important;
max-width: 100vw !important;
box-sizing: border-box !important;
padding: 80px calc((100vw - 1100px) / 2) !important;
grid-template-columns: 1fr 380px !important;
gap: 56px !important;
align-items: start !important;
}
/* ── WCAG AA — lead text cor corrigida ───────────────────────────────── */
.lead {
color: #3a3a38 !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
}
/* Eyebrow + h2 OCEAN — contraste forte */
#ocean-dim-h2 {
color: var(--dk) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
AE. WCAG AA — .lead text fix definitivo
#888780 (ratio 3.1:1) → #3D3D3A (ratio 7.2:1) ✅ WCAG AAA
font-weight 300 → 400 (leitura normal)
font-size mínimo 15px (legibilidade)
═══════════════════════════════════════════════════════════════════════════ */
.lead,
p.lead,
.sec .lead,
.sec--alt .lead {
color: #3D3D3A !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
font-family: var(--font-body) !important;
max-width: 640px !important;
}
/* ── OCEAN section — espaçamento título/texto/grid ───────────────────── */
#ocean-dim-h2 {
margin-bottom: 20px !important;
}
#ocean-dim-h2 ~ .lead {
margin-bottom: 40px !important;
}
.ocean-5-grid {
margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
AF. BLOG v2.0 RFT — archive.php + single.php
Alinhado ao standalone + boas práticas editoriais (Interbrand/Wolff Olins)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Blog Hero ───────────────────────────────────────────────────────── */
.blog-hero {
background: var(--dk) !important;
padding: 72px 48px !important;
position: relative !important;
overflow: hidden !important;
}
.blog-hero::before {
content: '' !important;
position: absolute !important; top: -30% !important; right: -8% !important;
width: 600px !important; height: 600px !important;
background: radial-gradient(circle,rgba(29,158,117,.09) 0%,transparent 68%) !important;
pointer-events: none !important;
}
.blog-hero-inner {
max-width: var(--max-width) !important;
margin-inline: auto !important;
position: relative !important;
z-index: 1 !important;
max-width: 700px !important;
}
.blog-hero .h1 {
font-family: var(--font-serif) !important;
font-size: clamp(36px,4.5vw,54px) !important;
font-weight: 400 !important;
color: #fff !important;
line-height: 1.08 !important;
letter-spacing: -.5px !important;
margin-bottom: 16px !important;
}
.blog-hero .h1 em { color: var(--g) !important; font-style: italic !important; }
.blog-hero-lead {
font-size: clamp(14px,1.3vw,17px) !important;
color: rgba(255,255,255,.58) !important;
line-height: 1.75 !important;
font-weight: 300 !important;
max-width: 560px !important;
}
/* ── Filtros ─────────────────────────────────────────────────────────── */
.blog-filters {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin-bottom: 8px !important;
}
.filter-btn {
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: .05em !important;
padding: 7px 16px !important;
border-radius: var(--radius-full) !important;
border: 1px solid var(--border-color) !important;
background: var(--white) !important;
color: var(--gy) !important;
text-decoration: none !important;
transition: all var(--trans) !important;
display: inline-block !important;
font-family: var(--font-body) !important;
}
.filter-btn:hover {
border-color: var(--g9) !important;
color: var(--gd) !important;
background: var(--gl) !important;
}
.filter-btn.active {
background: var(--g) !important;
border-color: var(--g) !important;
color: #fff !important;
}
/* ── Featured Article ────────────────────────────────────────────────── */
.featured-article {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
border-radius: var(--radius-xl) !important;
overflow: hidden !important;
border: 1px solid var(--border-color) !important;
margin-bottom: 0 !important;
transition: box-shadow var(--trans) !important;
}
.featured-article:hover { box-shadow: var(--shadow-lg) !important; }
.featured-img {
min-height: 320px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
.featured-thumb {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.featured-img-inner { text-align: center !important; padding: 40px !important; }
.featured-img svg { margin: 0 auto 16px !important; display: block !important; }
.featured-img-label {
font-family: var(--font-serif) !important;
font-size: 24px !important;
color: #fff !important;
font-style: italic !important;
line-height: 1.3 !important;
}
.featured-body {
padding: 40px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
background: var(--white) !important;
}
.featured-cat {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
color: var(--g) !important;
margin-bottom: 14px !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.featured-cat::before { content: '★' !important; font-size: 10px !important; }
.featured-title {
font-family: var(--font-serif) !important;
font-size: clamp(20px,2.2vw,28px) !important;
color: var(--dk) !important;
line-height: 1.25 !important;
margin-bottom: 14px !important;
font-weight: 400 !important;
}
.featured-excerpt {
font-size: 14px !important;
color: #444 !important;
line-height: 1.75 !important;
margin-bottom: 20px !important;
flex: 1 !important;
text-align: justify !important;
hyphens: auto !important;
}
.featured-meta {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 12px !important;
color: var(--gy) !important;
margin-bottom: 20px !important;
}
.featured-meta-sep { color: var(--gy3) !important; }
.read-more {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--g) !important;
text-decoration: none !important;
transition: gap var(--trans) !important;
}
.read-more:hover { gap: 12px !important; }
.read-more-arrow { font-size: 16px !important; }
/* ── Blog Grid ───────────────────────────────────────────────────────── */
.blog-grid {
display: grid !important;
grid-template-columns: repeat(3,1fr) !important;
gap: 24px !important;
margin-bottom: 48px !important;
}
.blog-card {
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important;
overflow: hidden !important;
background: var(--white) !important;
display: flex !important;
flex-direction: column !important;
transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans) !important;
}
.blog-card:hover {
transform: translateY(-3px) !important;
box-shadow: var(--shadow-md) !important;
border-color: var(--g9) !important;
}
.blog-card-img-link { display: block !important; }
.blog-card-img {
height: 168px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
.blog-card-thumb {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.blog-card-body {
padding: 20px !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.blog-cat-tag {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
display: inline-block !important;
padding: 3px 11px !important;
border-radius: var(--radius-full) !important;
margin-bottom: 10px !important;
text-decoration: none !important;
}
.blog-title {
font-family: var(--font-display) !important;
font-size: 15px !important;
font-weight: 500 !important;
color: var(--dk) !important;
margin-bottom: 9px !important;
line-height: 1.45 !important;
flex: 1 !important;
}
.blog-excerpt {
font-size: 12.5px !important;
color: #444 !important;
line-height: 1.65 !important;
margin-bottom: 14px !important;
text-align: justify !important;
hyphens: auto !important;
}
.blog-meta-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-size: 11px !important;
color: var(--gy) !important;
margin-top: auto !important;
}
.blog-read-link {
font-weight: 600 !important;
color: var(--g) !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
/* ── Paginação ───────────────────────────────────────────────────────── */
.blog-pagination {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin-top: 8px !important;
}
.blog-pagination .page-numbers {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 12px !important;
border-radius: var(--radius-full) !important;
border: 1px solid var(--border-color) !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--dk) !important;
text-decoration: none !important;
transition: all var(--trans) !important;
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
background: var(--g) !important;
border-color: var(--g) !important;
color: #fff !important;
}
/* ── Blog empty ──────────────────────────────────────────────────────── */
.blog-empty {
padding: 60px 0 !important;
text-align: center !important;
color: var(--gy) !important;
font-size: 15px !important;
}
/* ── Single — breadcrumb ─────────────────────────────────────────────── */
.article-breadcrumb {
background: var(--f5) !important;
padding: 14px 48px !important;
border-bottom: 1px solid var(--border-color) !important;
}
.breadcrumb-list {
max-width: 860px !important;
margin-inline: auto !important;
display: flex !important;
gap: 6px !important;
align-items: center !important;
list-style: none !important;
font-size: 12.5px !important;
color: var(--gy) !important;
flex-wrap: wrap !important;
}
.breadcrumb-list a { color: var(--gy) !important; text-decoration: none !important; }
.breadcrumb-list a:hover { color: var(--g) !important; }
.breadcrumb-sep { color: var(--gy3) !important; }
.breadcrumb-current { color: var(--dk) !important; font-weight: 500 !important; }
/* ── Single — article header ─────────────────────────────────────────── */
.article-header-inner {
max-width: 860px !important;
margin-inline: auto !important;
}
.article-cat-tag {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
color: var(--g) !important;
text-decoration: none !important;
display: inline-block !important;
margin-bottom: 16px !important;
}
.article-title {
font-family: var(--font-serif) !important;
font-size: clamp(28px,4vw,46px) !important;
font-weight: 400 !important;
color: var(--dk) !important;
line-height: 1.15 !important;
letter-spacing: -.3px !important;
margin-bottom: 18px !important;
}
.article-deck {
font-size: clamp(16px,1.5vw,19px) !important;
color: #444 !important;
line-height: 1.7 !important;
font-weight: 300 !important;
margin-bottom: 28px !important;
max-width: 680px !important;
}
.article-meta {
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
.article-author-avatar {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: var(--gl) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: var(--font-display) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--g) !important;
border: 2px solid var(--g9) !important;
flex-shrink: 0 !important;
}
.article-meta-name {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--dk) !important;
}
.article-meta-details {
font-size: 12px !important;
color: var(--gy) !important;
display: flex !important;
gap: 6px !important;
align-items: center !important;
}
.article-hero-img { padding: 0 48px 0 !important; }
.article-featured-img {
width: 100% !important;
border-radius: var(--radius-lg) !important;
max-height: 480px !important;
object-fit: cover !important;
}
/* ── Single — article body ───────────────────────────────────────────── */
.article-body-wrap {
max-width: 860px !important;
margin-inline: auto !important;
}
.article-body {
font-size: 17px !important;
line-height: 1.82 !important;
color: #2a2a28 !important;
font-weight: 300 !important;
font-family: var(--font-body) !important;
}
.article-body p { margin-bottom: 1.6rem !important; }
.article-body h2 { font-family: var(--font-serif) !important; font-size: clamp(22px,2.5vw,30px) !important; font-weight: 400 !important; color: var(--dk) !important; line-height: 1.25 !important; margin: 2.4rem 0 1rem !important; }
.article-body h3 { font-family: var(--font-display) !important; font-size: 19px !important; font-weight: 500 !important; color: var(--dk) !important; margin: 2rem 0 .8rem !important; }
.article-body strong { font-weight: 600 !important; color: var(--dk) !important; }
.article-body a { color: var(--g) !important; text-decoration: underline !important; text-decoration-color: var(--g9) !important; text-underline-offset: 3px !important; }
.article-body a:hover { color: var(--gd) !important; }
.article-body blockquote { border-left: 3px solid var(--g) !important; padding: 20px 24px !important; margin: 2rem 0 !important; background: var(--gl) !important; border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; }
.article-body blockquote p { font-family: var(--font-serif) !important; font-size: 20px !important; font-style: italic !important; color: var(--gd) !important; line-height: 1.55 !important; margin: 0 !important; }
.article-body ul, .article-body ol { margin: 1.2rem 0 1.6rem 1.2rem !important; }
.article-body ul { list-style: none !important; }
.article-body ul li { position: relative !important; padding-left: 20px !important; margin-bottom: .7rem !important; font-size: 17px !important; line-height: 1.7 !important; }
.article-body ul li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 10px !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--g) !important; }
.article-body ol { list-style: decimal !important; padding-left: 20px !important; }
.article-body ol li { margin-bottom: .7rem !important; font-size: 17px !important; line-height: 1.7 !important; padding-left: 6px !important; }
.article-body ol li::marker { color: var(--g) !important; font-weight: 600 !important; }
.article-body hr { border: none !important; border-top: 1px solid var(--border-color) !important; margin: 2.5rem 0 !important; }
/* ── Tags ────────────────────────────────────────────────────────────── */
.article-tags { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.article-tag {
font-size: 12px !important;
padding: 5px 14px !important;
border-radius: var(--radius-full) !important;
border: 1px solid var(--border-color) !important;
color: var(--gy) !important;
text-decoration: none !important;
transition: all var(--trans) !important;
font-family: var(--font-body) !important;
}
.article-tag:hover { border-color: var(--g) !important; color: var(--g) !important; }
/* ── Author box ──────────────────────────────────────────────────────── */
.author-box {
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-xl) !important;
padding: 36px !important;
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 28px !important;
align-items: start !important;
background: var(--white) !important;
}
.author-avatar {
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
background: var(--gl) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: var(--font-display) !important;
font-size: 24px !important;
font-weight: 500 !important;
color: var(--g) !important;
border: 3px solid var(--g9) !important;
flex-shrink: 0 !important;
}
.author-avatar-img {
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center top !important;
border: 3px solid var(--g9) !important;
flex-shrink: 0 !important;
}
.author-name { font-family: var(--font-serif) !important; font-size: 22px !important; color: var(--dk) !important; margin-bottom: 4px !important; }
.author-role { font-size: 12px !important; color: var(--g) !important; font-weight: 500 !important; margin-bottom: 14px !important; letter-spacing: .02em !important; }
.author-bio { font-size: 14px !important; color: #444 !important; line-height: 1.75 !important; margin-bottom: 16px !important; }
.author-cta { font-size: 13px !important; font-weight: 600 !important; color: var(--g) !important; text-decoration: none !important; }
.author-cta:hover { color: var(--gd) !important; }
/* ── Related articles ────────────────────────────────────────────────── */
.related-grid {
display: grid !important;
grid-template-columns: repeat(3,1fr) !important;
gap: 20px !important;
}
.related-card {
background: var(--f5) !important;
border-radius: var(--radius-lg) !important;
padding: 22px !important;
border: 1px solid var(--border-color) !important;
transition: box-shadow var(--trans) !important;
}
.related-card:hover { box-shadow: var(--shadow-md) !important; }
.related-title {
font-family: var(--font-display) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--dk) !important;
line-height: 1.45 !important;
}
/* ── Responsive blog ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.blog-hero { padding: 60px 24px !important; }
.blog-grid { grid-template-columns: 1fr 1fr !important; }
.featured-article { grid-template-columns: 1fr !important; }
.featured-img { min-height: 200px !important; }
.article-breadcrumb { padding-inline: 24px !important; }
.article-hero-img { padding-inline: 24px !important; }
}
@media (max-width: 640px) {
.blog-grid { grid-template-columns: 1fr !important; }
.related-grid { grid-template-columns: 1fr !important; }
.author-box { grid-template-columns: 1fr !important; }
.blog-hero { padding: 48px 20px !important; }
}
/* ── Article meta avatar — foto circular ─────────────────────────────── */
.article-author-avatar-img {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center top !important;
border: 2px solid var(--g9) !important;
flex-shrink: 0 !important;
}
/* ── Author box founder style — igual à secção strip da homepage ─────── */
.author-box--founder {
gap: 32px !important;
align-items: center !important;
border: none !important;
background: var(--f5) !important;
padding: 36px !important;
}
.author-avatar-img--lg {
width: 96px !important;
height: 96px !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center top !important;
border: 3px solid var(--g9) !important;
flex-shrink: 0 !important;
}
.author-tags {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 14px 0 18px !important;
}
.author-tag {
font-size: 11.5px !important;
padding: 5px 13px !important;
border-radius: var(--radius-full) !important;
border: 1px solid var(--border-color) !important;
color: var(--gy) !important;
background: var(--white) !important;
font-family: var(--font-body) !important;
}
/* Meta minimalista no header do artigo */
.article-meta-minimal {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
AG. SUSTENTABILIDADE v1.0 RFT
═══════════════════════════════════════════════════════════════════════════ */
.sustain-hero {
background: var(--dk) !important;
padding: 72px 48px !important;
position: relative !important;
overflow: hidden !important;
}
.sustain-hero::before {
content: '' !important;
position: absolute !important; top: -30% !important; right: -8% !important;
width: 600px !important; height: 600px !important;
background: radial-gradient(circle,rgba(29,158,117,.09) 0%,transparent 68%) !important;
pointer-events: none !important;
}
.sustain-hero-inner {
max-width: 680px !important;
margin-inline: auto !important;
position: relative !important;
z-index: 1 !important;
}
.sustain-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
margin-top: 36px !important;
}
.sustain-card {
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important;
padding: 32px !important;
background: var(--white) !important;
transition: transform var(--trans), box-shadow var(--trans) !important;
}
.sustain-card:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
.sustain-icon {
width: 48px !important;
height: 48px !important;
border-radius: var(--radius-md) !important;
background: var(--gl) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 18px !important;
}
.sustain-title {
font-size: 16px !important;
font-weight: 500 !important;
color: var(--dk) !important;
margin-bottom: 10px !important;
font-family: var(--font-body) !important;
}
.sustain-text {
font-size: 14px !important;
color: #3D3D3A !important;
line-height: 1.75 !important;
text-align: justify !important;
hyphens: auto !important;
}
.sec--dk {
background: var(--dk) !important;
padding: 80px 48px !important;
}
.h2--white { color: #fff !important; }
.lead--white {
color: rgba(255,255,255,.58) !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
max-width: 640px !important;
}
.commit-grid {
display: grid !important;
grid-template-columns: repeat(3,1fr) !important;
gap: 20px !important;
margin-top: 40px !important;
}
.commit-card {
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: var(--radius-lg) !important;
padding: 32px 24px !important;
text-align: center !important;
}
.commit-num {
font-family: var(--font-serif) !important;
font-size: 48px !important;
color: var(--g) !important;
margin-bottom: 8px !important;
line-height: 1 !important;
}
.commit-label {
font-size: 12px !important;
color: rgba(255,255,255,.50) !important;
line-height: 1.6 !important;
}
.commit-label strong {
display: block !important;
font-size: 14px !important;
color: rgba(255,255,255,.80) !important;
margin-bottom: 6px !important;
font-weight: 500 !important;
}
@media (max-width: 1024px) {
.sustain-hero { padding: 60px 24px !important; }
.sec--dk { padding: 60px 24px !important; }
.sustain-grid { grid-template-columns: 1fr !important; }
.commit-grid { grid-template-columns: 1fr !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
AH. CHECKOUT v1.0 RFT
═══════════════════════════════════════════════════════════════════════════ */
.checkout-wrap { background: var(--f5) !important; min-height: 80vh !important; }
/* Plan selector */
.plan-selector {
display: flex !important; gap: 12px !important; flex-wrap: wrap !important;
margin-bottom: 0 !important;
}
.plan-tab {
flex: 1 !important; min-width: 140px !important;
border: 1.5px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important;
padding: 14px 18px !important;
background: var(--white) !important;
text-decoration: none !important;
transition: all var(--trans) !important;
display: flex !important; flex-direction: column !important; gap: 3px !important;
}
.plan-tab:hover { border-color: var(--g9) !important; }
.plan-tab.active { border-color: var(--g) !important; background: var(--white) !important; box-shadow: 0 0 0 3px rgba(29,158,117,.10) !important; }
.plan-tab-name { font-size: 13px !important; font-weight: 500 !important; color: var(--dk) !important; }
.plan-tab-price { font-family: var(--font-serif) !important; font-size: 22px !important; color: var(--g) !important; line-height: 1 !important; }
.plan-tab-inst { font-size: 11px !important; color: var(--gy) !important; }
/* Checkout grid */
.checkout-grid {
display: grid !important;
grid-template-columns: 1fr 360px !important;
gap: 32px !important;
align-items: start !important;
}
/* Form cards */
.form-card {
background: var(--white) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important;
padding: 28px !important;
margin-bottom: 16px !important;
}
.form-card-title {
display: flex !important; align-items: center !important; gap: 14px !important;
font-size: 15px !important; font-weight: 600 !important; color: var(--dk) !important;
margin-bottom: 22px !important;
padding-bottom: 16px !important; border-bottom: 1px solid var(--f0) !important;
}
.form-card-step {
width: 28px !important; height: 28px !important; border-radius: 50% !important;
background: var(--g) !important; color: #fff !important;
display: flex !important; align-items: center !important; justify-content: center !important;
font-size: 13px !important; font-weight: 700 !important; flex-shrink: 0 !important;
}
.form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
.form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-bottom: 14px !important; }
.form-label { font-size: 12px !important; font-weight: 600 !important; color: var(--dk) !important; }
.form-input {
padding: 11px 14px !important; border: 1.5px solid var(--border-color) !important;
border-radius: var(--radius-md) !important; font-size: 14px !important;
font-family: var(--font-body) !important; color: var(--dk) !important;
background: var(--white) !important; transition: border-color var(--trans) !important;
width: 100% !important; box-sizing: border-box !important;
}
.form-input:focus { outline: none !important; border-color: var(--g) !important; box-shadow: 0 0 0 3px rgba(29,158,117,.10) !important; }
.form-input.error { border-color: #D85A30 !important; }
.form-hint { font-size: 11.5px !important; color: var(--gy) !important; margin-top: 4px !important; }
/* Payment tabs */
.payment-tabs { display: flex !important; gap: 8px !important; margin-bottom: 20px !important; }
.pay-tab {
flex: 1 !important; padding: 9px 12px !important;
border: 1.5px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
background: var(--white) !important; font-size: 13px !important; font-weight: 500 !important;
color: var(--gy) !important; cursor: pointer !important;
display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
transition: all var(--trans) !important; font-family: var(--font-body) !important;
}
.pay-tab.active { border-color: var(--g) !important; color: var(--gd) !important; background: var(--gl) !important; }
.payment-security {
display: flex !important; align-items: flex-start !important; gap: 8px !important;
font-size: 11.5px !important; color: var(--gy) !important; line-height: 1.6 !important;
margin-top: 14px !important; padding: 12px !important;
background: var(--f5) !important; border-radius: var(--radius-md) !important;
}
.transfer-info { background: var(--f5) !important; border-radius: var(--radius-md) !important; padding: 18px !important; margin-bottom: 14px !important; }
.transfer-row { display: flex !important; justify-content: space-between !important; font-size: 13px !important; padding: 6px 0 !important; border-bottom: 1px solid var(--border-color) !important; color: var(--gy) !important; }
.transfer-row:last-child { border-bottom: none !important; }
.transfer-row strong { color: var(--dk) !important; }
/* Installments */
.installment-opts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.installment-opt {
border: 1.5px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
padding: 16px !important; cursor: pointer !important; transition: all var(--trans) !important;
display: block !important;
}
.installment-opt input { display: none !important; }
.installment-opt.active { border-color: var(--g) !important; background: var(--gl) !important; }
.inst-opt-title { font-family: var(--font-serif) !important; font-size: 22px !important; color: var(--g) !important; }
.inst-opt-desc { font-size: 12px !important; color: var(--gy) !important; margin-top: 3px !important; }
/* Consent */
.consent-list { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.consent-group {
display: flex !important; gap: 14px !important; align-items: flex-start !important;
padding: 14px !important; border-radius: var(--radius-md) !important;
border: 1px solid var(--border-color) !important; transition: border-color var(--trans) !important;
}
.consent-group.active { border-color: var(--g9) !important; background: var(--gl) !important; }
.consent-group.error { border-color: #D85A30 !important; background: rgba(216,90,48,.04) !important; }
.consent-check {
width: 20px !important; height: 20px !important; border-radius: 5px !important;
border: 2px solid var(--border-color) !important; flex-shrink: 0 !important;
cursor: pointer !important; transition: all var(--trans) !important; margin-top: 1px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
}
.consent-check.checked { background: var(--g) !important; border-color: var(--g) !important; }
.consent-check.checked::after { content: '✓' !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; }
.consent-text { font-size: 13px !important; color: #444 !important; line-height: 1.65 !important; }
.consent-text a { color: var(--g) !important; }
.consent-required { color: #D85A30 !important; margin-left: 3px !important; }
/* Submit button */
.checkout-submit:disabled, .checkout-submit[aria-disabled="true"] {
opacity: .45 !important; cursor: not-allowed !important;
}
.security-badges {
display: flex !important; gap: 8px !important; flex-wrap: wrap !important;
justify-content: center !important; margin-top: 14px !important;
}
.sec-badge {
font-size: 10px !important; font-weight: 700 !important; letter-spacing: .05em !important;
padding: 3px 10px !important; border-radius: var(--radius-full) !important;
border: 1px solid var(--border-color) !important; color: var(--gy) !important;
}
.guarantee-box {
display: flex !important; gap: 10px !important; align-items: flex-start !important;
margin-top: 16px !important; padding: 14px !important;
background: var(--gl) !important; border-radius: var(--radius-md) !important;
font-size: 12.5px !important; color: var(--gm) !important; line-height: 1.65 !important;
}
.guarantee-box strong { color: var(--gd) !important; }
.guarantee-box svg { flex-shrink: 0 !important; margin-top: 2px !important; }
/* Order summary */
.order-summary { position: sticky !important; top: 24px !important; }
.order-summary-inner {
background: var(--white) !important; border: 1px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important; padding: 24px !important;
}
.order-summary-title { font-size: 15px !important; font-weight: 600 !important; color: var(--dk) !important; margin-bottom: 18px !important; }
.os-plan { padding-bottom: 16px !important; border-bottom: 1px solid var(--f0) !important; margin-bottom: 16px !important; }
.os-plan-name { font-family: var(--font-display) !important; font-size: 17px !important; font-weight: 500 !important; color: var(--dk) !important; margin-bottom: 4px !important; }
.os-plan-desc { font-size: 12px !important; color: var(--gy) !important; }
.os-items { margin-bottom: 20px !important; }
.os-item { display: flex !important; align-items: flex-start !important; gap: 8px !important; font-size: 13px !important; color: #444 !important; padding: 5px 0 !important; }
.os-total { padding: 16px 0 !important; border-top: 1px solid var(--border-color) !important; border-bottom: 1px solid var(--border-color) !important; margin-bottom: 16px !important; }
.os-total-label { font-size: 12px !important; color: var(--gy) !important; text-transform: uppercase !important; letter-spacing: .08em !important; margin-bottom: 4px !important; }
.os-total-price { font-family: var(--font-serif) !important; font-size: 36px !important; color: var(--dk) !important; line-height: 1 !important; }
.os-guarantee { display: flex !important; gap: 8px !important; align-items: flex-start !important; font-size: 11.5px !important; color: var(--gy) !important; margin-top: 12px !important; line-height: 1.6 !important; }
.os-guarantee a { color: var(--g) !important; }
@media (max-width: 1024px) {
.checkout-grid { grid-template-columns: 1fr !important; }
.order-summary { position: static !important; }
.plan-selector { flex-direction: column !important; }
.plan-tab { min-width: unset !important; }
}
@media (max-width: 640px) {
.form-row { grid-template-columns: 1fr !important; }
.installment-opts { grid-template-columns: 1fr !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
AI. CHECKOUT FIXES v1.1 — alinhamento ao standalone
═══════════════════════════════════════════════════════════════════════════ */
/* ── Plan selector — pills compactos horizontais ─────────────────────── */
.plan-selector {
display: flex !important;
gap: 8px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
padding-bottom: 4px !important;
}
.plan-tab {
flex: 1 !important;
min-width: 0 !important;
border: 1.5px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important;
padding: 10px 16px !important;
background: var(--white) !important;
text-decoration: none !important;
transition: all var(--trans) !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.plan-tab::before {
content: '' !important;
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
border: 2px solid var(--border-color) !important;
flex-shrink: 0 !important;
transition: all var(--trans) !important;
}
.plan-tab.active::before {
border-color: var(--g) !important;
background: var(--g) !important;
box-shadow: inset 0 0 0 3px #fff !important;
}
.plan-tab.active {
border-color: var(--g) !important;
background: var(--white) !important;
}
.plan-tab-info { display: flex !important; flex-direction: column !important; gap: 1px !important; }
.plan-tab-name { font-size: 13px !important; font-weight: 500 !important; color: var(--dk) !important; white-space: nowrap !important; }
.plan-tab-price { font-size: 13px !important; color: var(--gy) !important; }
.plan-tab-inst { font-size: 11px !important; color: var(--gy) !important; }
.plan-tab-badge {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
padding: 2px 7px !important;
border-radius: var(--radius-full) !important;
background: var(--f0) !important;
color: var(--gy) !important;
white-space: nowrap !important;
}
.plan-tab-badge--active {
background: var(--g) !important;
color: #fff !important;
}
/* ── Order summary — fundo escuro como standalone ────────────────────── */
.order-summary-inner {
background: var(--dk) !important;
border: none !important;
border-radius: var(--radius-lg) !important;
padding: 28px !important;
}
.order-summary-title {
color: #fff !important;
font-size: 16px !important;
font-weight: 500 !important;
margin-bottom: 18px !important;
font-family: var(--font-serif) !important;
}
.os-plan { border-bottom-color: rgba(255,255,255,.10) !important; margin-bottom: 16px !important; padding-bottom: 14px !important; }
.os-plan-name { color: #fff !important; font-size: 16px !important; font-weight: 500 !important; }
.os-plan-desc { color: rgba(255,255,255,.40) !important; font-size: 12px !important; }
/* Items com "Incluído" à direita — como standalone */
.os-item {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-size: 13px !important;
color: rgba(255,255,255,.70) !important;
padding: 7px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.07) !important;
gap: 12px !important;
}
.os-item:last-child { border-bottom: none !important; }
.os-item svg { display: none !important; } /* Sem ícone — "Incluído" à direita */
.os-item span { flex: 1 !important; }
.os-item::after {
content: 'Incluído' !important;
font-size: 11px !important;
font-weight: 600 !important;
color: var(--g) !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* Total */
.os-total { border-color: rgba(255,255,255,.12) !important; }
.os-total-label { color: rgba(255,255,255,.40) !important; }
.os-total-price { color: #fff !important; font-size: 40px !important; }
.os-total-note { color: rgba(255,255,255,.35) !important; }
/* CTA lateral */
.os-cta { margin-bottom: 12px !important; }
/* Garantia lateral */
.os-guarantee { color: rgba(255,255,255,.45) !important; }
.os-guarantee a { color: var(--g) !important; }
/* Selos de segurança — fundo escuro */
.security-badges { justify-content: flex-start !important; margin-top: 16px !important; }
.sec-badge {
border-color: rgba(255,255,255,.12) !important;
color: rgba(255,255,255,.35) !important;
font-size: 9px !important;
}
/* Garantia no formulário */
.guarantee-box { background: rgba(29,158,117,.12) !important; border: 1px solid rgba(29,158,117,.20) !important; }
/* ── Card 4 — consent fix ────────────────────────────────────────────── */
/* O card 4 estava vazio por overflow:hidden num parent */
.form-card { overflow: visible !important; }
.consent-list { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.consent-group {
display: flex !important;
gap: 12px !important;
align-items: flex-start !important;
padding: 14px !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-md) !important;
background: var(--white) !important;
cursor: pointer !important;
}
.consent-check {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
border-radius: 4px !important;
border: 2px solid var(--border-color) !important;
background: var(--white) !important;
cursor: pointer !important;
transition: all var(--trans) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 1px !important;
}
.consent-check.checked {
background: var(--g) !important;
border-color: var(--g) !important;
}
.consent-check.checked::after {
content: '✓' !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.consent-text {
font-size: 13px !important;
color: #444 !important;
line-height: 1.65 !important;
flex: 1 !important;
}
.consent-text a { color: var(--g) !important; text-decoration: underline !important; }
.consent-required { color: #D85A30 !important; font-weight: 700 !important; }
/* ── Formulário — Nome + Apelido na mesma linha ──────────────────────── */
.form-row-first {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
AJ. CHECKOUT v2.0 RFT — fiel ao standalone
═══════════════════════════════════════════════════════════════════════════ */
.co-page { background: var(--f5) !important; min-height: 80vh !important; }
/* Breadcrumb */
.breadcrumb-bar { background: var(--white) !important; border-bottom: 1px solid var(--border-color) !important; padding: 14px 40px !important; }
.breadcrumb { max-width: var(--max-width) !important; margin-inline: auto !important; display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12.5px !important; color: var(--gy) !important; }
.breadcrumb a { color: var(--gy) !important; text-decoration: none !important; }
.breadcrumb a:hover { color: var(--g) !important; }
.breadcrumb-sep { color: var(--gy3) !important; }
.breadcrumb-curr { color: var(--dk) !important; font-weight: 500 !important; }
/* Plan selector */
.co-plan-selector { background: var(--white) !important; border-bottom: 1px solid var(--border-color) !important; padding: 20px 40px !important; }
.co-plan-inner { max-width: var(--max-width) !important; margin-inline: auto !important; }
.co-plan-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--gy) !important; margin-bottom: 14px !important; }
.co-plan-tabs { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; }
.co-plan-tab { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 20px !important; border-radius: var(--radius-lg) !important; border: 2px solid var(--border-color) !important; background: var(--white) !important; text-decoration: none !important; transition: all var(--trans) !important; }
.co-plan-tab:hover:not(.active) { border-color: var(--g9) !important; background: var(--gl) !important; }
.co-plan-tab.active { border-color: var(--g) !important; background: var(--gl) !important; }
.co-plan-tab-radio { width: 18px !important; height: 18px !important; border-radius: 50% !important; border: 2px solid var(--gy3) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: all var(--trans) !important; }
.co-plan-tab.active .co-plan-tab-radio { border-color: var(--g) !important; }
.co-plan-tab.active .co-plan-tab-radio::after { content: '' !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--g) !important; }
.co-plan-tab-name { font-size: 14px !important; font-weight: 600 !important; color: var(--dk) !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.co-plan-tab.active .co-plan-tab-name { color: var(--gd) !important; }
.co-plan-tab-price { font-size: 12px !important; color: var(--gy) !important; }
.co-plan-tab.active .co-plan-tab-price { color: var(--gm) !important; }
.badge-green { font-size: 9px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; background: var(--g) !important; color: #fff !important; padding: 2px 8px !important; border-radius: var(--radius-full) !important; }
/* Main layout */
.co-main { padding: 32px 40px !important; }
.co-wrap { max-width: var(--max-width) !important; margin-inline: auto !important; display: grid !important; grid-template-columns: 1fr 360px !important; gap: 28px !important; align-items: start !important; }
.co-left { display: flex !important; flex-direction: column !important; gap: 16px !important; }
/* Cards */
.co-card { background: var(--white) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-lg) !important; padding: 28px !important; }
.co-card-title { display: flex !important; align-items: center !important; gap: 14px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--dk) !important; margin-bottom: 22px !important; padding-bottom: 16px !important; border-bottom: 1px solid var(--f0) !important; }
.co-step { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: var(--g) !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
/* Form */
.form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
.form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-bottom: 14px !important; }
.form-group:last-child { margin-bottom: 0 !important; }
.form-label { font-size: 12px !important; font-weight: 600 !important; color: var(--dk) !important; }
.req { color: #D85A30 !important; margin-left: 3px !important; }
.form-input { padding: 11px 14px !important; border: 1.5px solid var(--border-color) !important; border-radius: var(--radius-md) !important; font-size: 14px !important; font-family: var(--font-body) !important; color: var(--dk) !important; background: var(--white) !important; width: 100% !important; box-sizing: border-box !important; transition: border-color var(--trans) !important; }
.form-input:focus { outline: none !important; border-color: var(--g) !important; box-shadow: 0 0 0 3px rgba(29,158,117,.10) !important; }
.form-hint { font-size: 11.5px !important; color: var(--gy) !important; }
/* Payment tabs */
.co-pm-tabs { display: flex !important; gap: 8px !important; margin-bottom: 20px !important; }
.co-pm-btn { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 10px 12px !important; border: 1.5px solid var(--border-color) !important; border-radius: var(--radius-md) !important; background: var(--white) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--gy) !important; cursor: pointer !important; font-family: var(--font-body) !important; transition: all var(--trans) !important; }
.co-pm-btn.active { border-color: var(--g) !important; color: var(--gd) !important; background: var(--gl) !important; }
.card-wrap { position: relative !important; }
.card-icon { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 16px !important; }
.stripe-note { background: var(--f5) !important; border-radius: var(--radius-md) !important; padding: 12px 16px !important; display: flex !important; gap: 10px !important; align-items: flex-start !important; font-size: 12px !important; color: var(--gy) !important; line-height: 1.6 !important; margin-top: 16px !important; }
.bank-info { background: var(--f5) !important; border-radius: var(--radius-lg) !important; padding: 20px !important; margin-top: 4px !important; }
.bank-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 0 !important; border-bottom: 1px solid var(--f0) !important; }
.bank-row:last-child { border-bottom: none !important; }
.bank-label { font-size: 12px !important; color: var(--gy) !important; }
.bank-value { font-size: 13px !important; color: var(--dk) !important; font-weight: 500 !important; }
/* Installments */
.inst-opts { display: flex !important; gap: 12px !important; }
.inst-opt { flex: 1 !important; padding: 14px !important; border-radius: var(--radius-md) !important; border: 1.5px solid var(--border-color) !important; cursor: pointer !important; text-align: center !important; background: var(--white) !important; transition: all var(--trans) !important; }
.inst-opt:hover:not(.active) { border-color: var(--g9) !important; }
.inst-opt.active { border-color: var(--g) !important; background: var(--gl) !important; }
.inst-price { font-size: 16px !important; font-weight: 600 !important; color: var(--dk) !important; margin-bottom: 3px !important; }
.inst-opt.active .inst-price { color: var(--gd) !important; }
.inst-label { font-size: 12px !important; color: var(--gy) !important; }
.inst-opt.active .inst-label { color: var(--gm) !important; }
/* Consent */
.consent-group { display: flex !important; gap: 12px !important; align-items: flex-start !important; padding: 16px !important; background: var(--f5) !important; border-radius: var(--radius-md) !important; border: 1px solid var(--border-color) !important; transition: all var(--trans) !important; }
.consent-group.co-active { border-color: var(--g9) !important; background: var(--gl) !important; }
.consent-check { width: 18px !important; height: 18px !important; border: 2px solid var(--border-color) !important; border-radius: 4px !important; flex-shrink: 0 !important; cursor: pointer !important; margin-top: 1px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--white) !important; transition: all var(--trans) !important; }
.consent-check.checked { background: var(--g) !important; border-color: var(--g) !important; }
.consent-check.checked::after { content: '✓' !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; }
.consent-text { font-size: 13px !important; color: #444 !important; line-height: 1.65 !important; flex: 1 !important; }
.consent-text a { color: var(--g) !important; text-decoration: underline !important; }
/* Order Summary — fundo escuro */
.order-summary { background: var(--dk) !important; border-radius: var(--radius-xl) !important; padding: 30px !important; position: sticky !important; top: 24px !important; }
.os-title { font-family: var(--font-serif) !important; font-size: 22px !important; color: #fff !important; margin-bottom: 22px !important; padding-bottom: 18px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; font-weight: 400 !important; }
.os-product { margin-bottom: 18px !important; padding-bottom: 18px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.os-product-name { font-size: 15px !important; font-weight: 500 !important; color: #fff !important; margin-bottom: 4px !important; }
.os-product-desc { font-size: 12px !important; color: rgba(255,255,255,.45) !important; line-height: 1.6 !important; }
.os-items { margin-bottom: 18px !important; padding-bottom: 18px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.os-item { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; font-size: 13px !important; padding: 7px 0 !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; }
.os-item:last-child { border-bottom: none !important; }
.os-item-label { color: rgba(255,255,255,.55) !important; flex: 1 !important; padding-right: 12px !important; line-height: 1.45 !important; }
.os-item-incl { color: var(--g9) !important; font-size: 11px !important; font-weight: 600 !important; white-space: nowrap !important; }
.os-total-block { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; margin-bottom: 6px !important; }
.os-total-label { font-size: 15px !important; font-weight: 500 !important; color: #fff !important; }
.os-total-price { font-family: var(--font-display) !important; font-size: 32px !important; font-weight: 600 !important; color: var(--g) !important; line-height: 1 !important; }
.os-tax { font-size: 11px !important; color: rgba(255,255,255,.28) !important; margin-bottom: 20px !important; line-height: 1.5 !important; }
.pay-btn-wrap { margin-bottom: 16px !important; }
.pay-btn { width: 100% !important; background: var(--g) !important; color: #fff !important; padding: 16px !important; border-radius: var(--radius-lg) !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; border: none !important; font-family: var(--font-body) !important; transition: all var(--trans) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; }
.pay-btn:hover { background: var(--gm) !important; transform: translateY(-1px) !important; }
.pay-btn:disabled { opacity: .5 !important; cursor: not-allowed !important; transform: none !important; }
.secure-badges { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; margin-bottom: 20px !important; flex-wrap: wrap !important; }
.secure-badge { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 11px !important; color: rgba(255,255,255,.35) !important; }
.guarantee { border-top: 1px solid rgba(255,255,255,.08) !important; padding-top: 20px !important; margin-top: 4px !important; }
.guarantee-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .10em !important; text-transform: uppercase !important; color: rgba(255,255,255,.28) !important; margin-bottom: 10px !important; }
.guarantee-text { font-size: 12px !important; color: rgba(255,255,255,.42) !important; line-height: 1.65 !important; }
.guarantee-text em { color: var(--g9) !important; font-style: normal !important; font-weight: 500 !important; }
.trust-logos { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; margin-top: 18px !important; padding-top: 18px !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
.trust-logo { font-size: 10px !important; color: rgba(255,255,255,.28) !important; display: flex !important; align-items: center !important; gap: 5px !important; letter-spacing: .05em !important; }
/* Responsive */
@media (max-width: 1024px) {
.co-wrap { grid-template-columns: 1fr !important; }
.order-summary { position: static !important; }
.co-main { padding: 24px 20px !important; }
.co-plan-selector { padding-inline: 20px !important; }
.breadcrumb-bar { padding-inline: 20px !important; }
}
@media (max-width: 640px) {
.form-row { grid-template-columns: 1fr !important; }
.inst-opts { flex-direction: column !important; }
.co-plan-tabs { flex-direction: column !important; }
}