/* ==========================================================================
COP CAPITAL · Site institucional
Base: Manual de identidade e Design System COP CAPITAL V.01 (out/2026),
cop-capital-id.vercel.app. Os tokens têm os nomes e valores de
cop-capital-tokens.css; os escopos de cor, que no DS são data-theme, aqui
são classes (ver "Escopos" abaixo).
Regras da marca que este arquivo aplica:
- Âmbar Vigília é sinal: sempre sólido, sem degradê nem brilho, em até 10%
da área; nunca texto sobre claro (1,7:1). Uma faixa âmbar por página.
Exceções, pedidas em 06/10/2026 e só na peça do hero da home: o brilho
suave atrás dela e o reflexo da luz nos cartões.
- Dois registros. Missão (equipar, treinar, crédito e comunidade; escopos
claro, escuro e âmbar): canto vivo e o Corte. Fortalecer (telepsicologia,
seguro, família e educação financeira; escopos Alvorada e Noite): frase
normal em Barlow, cantos de 6px, sem Corte, stencil, cantoneiras ou
números de impacto.
- Corte 11,6°: as laterais de botões, etiquetas e do segmentado, as
insígnias, os marcadores e os cantos das fotos seguem a inclinação do
símbolo. O rótulo fica reto.
- Sem listras: a faixa zebrada amarela e preta é do COP International.
- Sem numeração decorativa: só o Passo a passo (.steps) e as perguntas
(.questions) são numerados, porque a ordem é o conteúdo.
- Campos [entre colchetes] sem destaque visual: os colchetes bastam.
- Stencil (contorno âmbar) só em display de 60px ou mais, no escuro.
- Padrão de símbolos e grade tática nunca atrás de texto corrido.
- Tipo grande é pesado e justo; tipo pequeno é leve e espaçado.
========================================================================== */
/* -------------------------------------------------------------------------- */
/* 1. Tokens */
/* -------------------------------------------------------------------------- */
:root {
/* Paleta primária: as cores são nomeadas pelo papel que cumprem */
--ambar-vigilia: #FFBE03; /* ação e destaque: sempre sólido, até 10% da área */
--preto-operacao: #000000; /* base de equipar, treinar e crédito */
--noite: #071019; /* base de conta e do Fortalecer no escuro */
--osso: #F5F5F5; /* superfícies claras e texto sobre escuro */
--alvorada: #C9CEDF; /* cinza azulado do registro Fortalecer */
--branco: #FFFFFF; /* respiro, cartões, campos e a Ficha Clara */
/* Paleta de apoio: nenhuma assina a marca */
--ambar-bright: #FFCE2E; /* hover */
--ambar-deep: #F1B302; /* ativo */
--ambar-dark: #C19002; /* detalhe (não é cor de texto) */
--ambar-night: #8C6900; /* sombra (não é cor de texto) */
--ambar-escuro: #6E5200; /* texto sobre Alvorada (4,7:1) */
--asphalt: #0A0A0A;
--graphite: #141414;
--steel: #1F1F1F;
--iron: #2A2A2A;
--dust: #A1A1A1;
--dust-soft: #ECECEC;
--noite-2: #13253A; /* insígnia do Fortalecer sobre fundo escuro */
--sinal-verde: #00C853; /* sinais: só estados de produto, sempre com ícone e palavra */
--sinal-vermelho: #FF3B30;
--sinal-azul: #2E86FF;
--console: #060606; /* simulador, resultado e menu suspenso */
--cabecalho-vidro: rgba(0, 0, 0, .82);
--preto-hover: #1A1A1A;
--grade-tatica: rgba(255, 190, 3, .07);
--ficha-linha: #E2E2E2;
--ficha-produto: #CFCFCF;
--sombra-menu: 0 30px 60px -20px rgba(0, 0, 0, .9);
--halo-campo: 0 0 0 3px rgba(255, 190, 3, .16);
--sombra-aviso: 0 20px 50px -24px rgba(0, 0, 0, .55);
/* Corte 11,6°: inclinação do símbolo */
--corte: 11.6deg;
--corte-tan: .2053; /* tan(11,6°): avanço horizontal por unidade de altura */
/* Raios: canto vivo no Missão, 6px no Fortalecer */
--raio-missao: 0px;
--raio-fortalecer: 6px;
--raio-fortalecer-interno: 4px;
--raio-bolha: 14px;
--radius: var(--raio-missao);
/* Escopo claro (padrão): o preto entra como destaque, o âmbar como ação */
--bg: var(--branco);
--bg-raised: var(--dust-soft);
--surface: var(--branco);
--surface-2: var(--osso);
--line: #D9D9D9;
--line-strong: #BFBFBF;
--line-hover: #8F8F8F;
--hover-bg: var(--osso);
--field-bg: var(--branco);
--hatch: rgba(0, 0, 0, .035);
--text: #000000;
--text-2: #333333;
--text-3: #5F5F5F;
--accent: var(--ambar-vigilia); /* preenchimentos: botões, barras, marcadores */
--accent-hover: var(--ambar-bright);
--on-accent: #000000;
--accent-ink: #000000; /* destaque como texto ou ícone: o âmbar não lê no branco */
--accent-ink-hover: #3A3A3A;
--ico-bg: var(--ambar-vigilia);
--ico-border: var(--ambar-vigilia);
--ico-ink: #000000;
--marca: #000000; /* símbolo (moldura e P) e submarcas */
--logo-tinta: #000000; /* logotipo V.02: COP°, barra do CAPITAL e letras do CAPITAL */
--logo-barra: var(--ambar-vigilia);
--logo-capital: #000000;
--simbolo-barra: #000000;
--simbolo-capital: #FFFFFF;
--insignia-bg: #000000;
--insignia-ink: var(--ambar-vigilia);
--insignia-fortalecer-bg: var(--noite);
--foco: var(--accent-ink); /* contorno de foco: 3:1 ou mais em todo escopo */
--hl-bg: linear-gradient(transparent 58%, rgba(255, 190, 3, .75) 58%, rgba(255, 190, 3, .75) 92%, transparent 92%);
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
color-scheme: light;
--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
--font-acao: "Barlow Semi Condensed", "Barlow Condensed", "Arial Narrow", sans-serif; /* rótulo dos botões */
--font-sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--container: 1280px;
--gutter: clamp(16px, 4vw, 40px);
--section-y: clamp(72px, 9vw, 136px);
--header-h: 60px;
--ease: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 1280px) {
:root { --header-h: 68px; }
}
/* Acessibilidade: tamanho de fonte (seletor no topo) */
html[data-fs="-1"] { font-size: 93.75%; }
html[data-fs="1"] { font-size: 112.5%; }
html[data-fs="2"] { font-size: 125%; }
/* Escopos. No DS: claro = :root; operacao = .theme-dark e os blocos escuros
abaixo; ambar = .section--yellow, .cta-band, .sol--featured; alvorada =
.section--care; noite = .section--care-dark. */
/* Escopo operacao (Preto Operação): cabeçalho, rodapé, heróis, simuladores e seções de destaque */
.theme-dark, .section--dark, .hero, .page-hero, .topbar, .navbar, .mnav, .search, .subnav, .footer, .sim, .console, .pass {
--bg: var(--preto-operacao);
--bg-raised: var(--asphalt);
--surface: #0B0B0B;
--surface-2: var(--graphite);
--line: var(--steel);
--line-strong: var(--iron);
--line-hover: #3D3D3D;
--hover-bg: #0F0F0F;
--field-bg: #0D0D0D;
--hatch: rgba(255, 255, 255, .02);
--text: var(--osso);
--text-2: #BDBDBD;
--text-3: #8F8F8F;
--accent: var(--ambar-vigilia);
--accent-hover: var(--ambar-bright);
--on-accent: #000000;
--accent-ink: var(--ambar-vigilia);
--accent-ink-hover: var(--ambar-bright);
--ico-bg: rgba(255, 190, 3, .08);
--ico-border: rgba(255, 190, 3, .28);
--ico-ink: var(--ambar-vigilia);
--marca: var(--ambar-vigilia);
--logo-tinta: #FFFFFF;
--logo-barra: var(--ambar-vigilia);
--logo-capital: #000000;
--simbolo-barra: var(--osso);
--simbolo-capital: #000000;
--insignia-bg: var(--steel);
--insignia-ink: var(--ambar-vigilia);
--insignia-fortalecer-bg: var(--noite-2);
--foco: var(--accent-ink);
--hl-bg: none;
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBE03' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
color-scheme: dark;
color: var(--text);
}
/* Escopo ambar: a faixa de chamada e o card em destaque (uma faixa por página) */
.section--yellow, .cta-band, .sol--featured {
--bg: var(--ambar-vigilia);
--bg-raised: var(--ambar-vigilia);
--surface: var(--ambar-bright);
--surface-2: var(--ambar-bright);
--line: rgba(0, 0, 0, .18);
--line-strong: rgba(0, 0, 0, .32);
--line-hover: rgba(0, 0, 0, .6);
--hover-bg: rgba(0, 0, 0, .05);
--field-bg: #FFFFFF;
--hatch: rgba(0, 0, 0, .05);
--text: #000000;
--text-2: rgba(0, 0, 0, .8);
--text-3: rgba(0, 0, 0, .64);
--accent: #000000;
--accent-hover: var(--preto-hover);
--on-accent: var(--ambar-vigilia);
--accent-ink: #000000;
--accent-ink-hover: #3A3A3A;
--ico-bg: #000000;
--ico-border: #000000;
--ico-ink: var(--ambar-vigilia);
--marca: #000000;
--logo-tinta: #000000; /* no âmbar, o logotipo passa à versão monocromática */
--logo-barra: #000000;
--logo-capital: var(--ambar-vigilia);
--simbolo-barra: #000000;
--simbolo-capital: var(--ambar-vigilia);
--insignia-bg: #000000;
--insignia-ink: var(--ambar-vigilia);
--foco: var(--accent-ink);
--hl-bg: none;
color-scheme: light;
color: var(--text);
}
/* Registro Fortalecer: telepsicologia, seguro de vida, família e educação financeira.
Claro em Alvorada (.section--care) ou escuro em Noite (.section--care-dark). */
.section--care {
--bg: var(--alvorada);
--bg-raised: #D2D6E4;
--surface: #E8EAF1;
--surface-2: #DDE0EA;
--line: rgba(7, 16, 25, .14);
--line-strong: rgba(7, 16, 25, .26);
--line-hover: rgba(7, 16, 25, .5);
--hover-bg: rgba(7, 16, 25, .04);
--field-bg: #FFFFFF;
--hatch: rgba(7, 16, 25, .04);
--text: var(--noite);
--text-2: #2E3A46;
--text-3: #434D59;
--accent: var(--noite);
--accent-hover: #142334;
--on-accent: #FFFFFF;
--accent-ink: var(--ambar-escuro); /* âmbar escuro: legível sobre Alvorada (4,7:1) */
--accent-ink-hover: #4D3A00;
--ico-bg: var(--noite);
--ico-border: var(--noite);
--ico-ink: var(--alvorada);
--marca: #000000;
--logo-tinta: #000000;
--logo-barra: var(--ambar-vigilia);
--logo-capital: #000000;
--simbolo-barra: #000000;
--simbolo-capital: var(--alvorada);
--insignia-bg: var(--noite);
--insignia-ink: var(--alvorada);
--insignia-fortalecer-bg: var(--noite);
--foco: var(--accent-ink);
--hl-bg: none;
--radius: var(--raio-fortalecer);
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071019' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
color-scheme: light;
color: var(--text);
}
.section--care-dark {
--bg: var(--noite);
--bg-raised: #0B1826;
--surface: #0E1B29;
--surface-2: #12212F;
--line: rgba(201, 206, 223, .14);
--line-strong: rgba(201, 206, 223, .26);
--line-hover: rgba(201, 206, 223, .48);
--hover-bg: rgba(201, 206, 223, .05);
--field-bg: #0B1826;
--hatch: rgba(201, 206, 223, .03);
--text: var(--osso);
--text-2: #C9CFD6;
--text-3: #8F9AA5;
--accent: var(--alvorada);
--accent-hover: #FFFFFF;
--on-accent: var(--noite);
--accent-ink: var(--ambar-vigilia);
--accent-ink-hover: var(--ambar-bright);
--ico-bg: rgba(201, 206, 223, .09);
--ico-border: rgba(201, 206, 223, .24);
--ico-ink: var(--alvorada);
--marca: var(--alvorada);
--logo-tinta: #FFFFFF;
--logo-barra: var(--ambar-vigilia);
--logo-capital: #000000;
--simbolo-barra: var(--alvorada);
--simbolo-capital: var(--noite);
--insignia-bg: var(--noite-2);
--insignia-ink: var(--alvorada);
--insignia-fortalecer-bg: var(--noite-2);
--foco: var(--accent-ink);
--hl-bg: none;
--radius: var(--raio-fortalecer);
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CEDF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
color-scheme: dark;
color: var(--text);
}
/* Acessibilidade: alto contraste (botão na barra de topo; valores do DS) */
html.hc {
--text: #000000;
--text-2: #111111;
--text-3: #262626;
--line: #7A7A7A;
--line-strong: #4D4D4D;
--bg-raised: #FFFFFF;
--surface: #FFFFFF;
--surface-2: #FFFFFF;
}
html.hc :is(.theme-dark, .section--dark, .hero, .page-hero, .topbar, .navbar, .mnav, .search, .subnav, .footer, .sim, .console, .pass) {
--text: #FFFFFF;
--text-2: #F2F2F2;
--text-3: #DADADA;
--line: #5C5C5C;
--line-strong: #8C8C8C;
--bg-raised: #000000;
--surface: #000000;
--surface-2: #000000;
}
html.hc .section--care {
--text: #000000;
--text-2: #111111;
--text-3: #262626;
--line: #7A7A7A;
--line-strong: #4D4D4D;
--accent-ink: #000000;
}
html.hc .section--care-dark {
--text: #FFFFFF;
--text-2: #F2F2F2;
--text-3: #DADADA;
--line: #5C5C5C;
--line-strong: #8C8C8C;
}
/* -------------------------------------------------------------------------- */
/* 2. Base */
/* -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 24px);
}
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 76px); }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dust-soft); }
::-webkit-scrollbar-thumb { background: var(--dust); }
::-webkit-scrollbar-thumb:hover { background: #8A8A8A; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
width: 1.25em;
height: 1.25em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.skip-link {
position: fixed;
left: 16px; top: -80px;
z-index: 200;
padding: 12px 18px;
background: var(--accent);
color: var(--on-accent);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
font-size: .8125rem;
transition: top .2s;
}
.skip-link:focus { top: 16px; }
/* -------------------------------------------------------------------------- */
/* 3. Layout */
/* -------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(880px + 2 * var(--gutter)); }
.section { position: relative; padding-block: var(--section-y); }
.section--raised { background: var(--bg-raised); }
.section--dark, .section--yellow { background: var(--bg); }
.section--line { border-top: 1px solid var(--line); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.grid-2 { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 1024px) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-5-7 { grid-template-columns: 5fr 7fr; }
.grid-7-5 { grid-template-columns: 7fr 5fr; }
}
/* Registro Fortalecer: fundo da seção */
.section--care, .section--care-dark { background: var(--bg); }
.section--care.section--raised { background: var(--bg-raised); }
/* Cantoneiras (brackets) — um único pseudo-elemento */
.corners { position: relative; }
.corners::after {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
--c: var(--accent);
--l: 14px;
--w: 2px;
background:
linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w),
linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l),
linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w),
linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l),
linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w),
linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l),
linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w),
linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);
background-repeat: no-repeat;
transition: opacity .4s var(--ease);
}
.corners--hover::after { opacity: 0; }
.corners--hover:hover::after,
.corners--hover:focus-within::after { opacity: 1; }
/* Fotografia: o Corte 11,6° recorta os cantos superior esquerdo e inferior direito.
O avanço é tan(11,6°) × a altura da própria foto (cqh), em qualquer proporção.
No registro Fortalecer, cantos de 6px no lugar do recorte. */
.photo {
--ar: 1.5;
container-type: size;
aspect-ratio: var(--ar);
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--pos, 50% 50%);
background: var(--surface-2);
}
.photo img, .photo__ph { clip-path: polygon(calc(var(--corte-tan) * 100cqh) 0, 100% 0, calc(100% - var(--corte-tan) * 100cqh) 100%, 0 100%); }
:is(.section--care, .section--care-dark) :is(.photo img, .photo__ph) { clip-path: none; border-radius: var(--radius); }
/* Foto a definir: mesmo recorte, fundo neutro, ícone e rótulo (data-label, fora do texto da página) */
.photo__ph {
display: grid;
place-content: center;
justify-items: center;
gap: 12px;
width: 100%;
height: 100%;
background: var(--bg-raised);
color: var(--text-3);
}
.photo__ph .ico { width: 32px; height: 32px; stroke-width: 1.5; }
.photo__ph::after {
content: attr(data-label);
font-family: var(--font-mono);
font-size: .6875rem;
letter-spacing: .18em;
text-transform: uppercase;
}
/* Faixa larga: 4:3 no celular, 16:9 no tablet, 21:9 no desktop */
.photo--band { --ar: 1.3333; }
@media (min-width: 720px) { .photo--band { --ar: 1.7778; } }
@media (min-width: 1024px) { .photo--band { --ar: 2.3333; } }
/* Dupla: duas fotos 3:2 lado a lado, separadas por um vão no ângulo do Corte */
.photo-duo { --g: clamp(10px, 1.4vw, 18px); display: grid; gap: var(--g); }
@media (min-width: 720px) {
.photo-duo {
--k: calc(var(--corte-tan) / 1.5); /* avanço do Corte por unidade de largura numa foto 3:2 */
container-type: inline-size;
display: flex;
}
.photo-duo .photo {
flex: none;
width: calc(50% - var(--g) / 2); /* sem unidades cq: metade cada, sem encaixe */
width: calc((100cqw - var(--g)) / (2 - var(--k)));
}
.photo-duo .photo + .photo { margin-left: calc(-1 * var(--k) * (100cqw - var(--g)) / (2 - var(--k))); }
/* No Fortalecer, sem Corte: metade cada, sem encaixe */
:is(.section--care, .section--care-dark) .photo-duo .photo { width: calc(50% - var(--g) / 2); }
:is(.section--care, .section--care-dark) .photo-duo .photo + .photo { margin-left: 0; }
}
/* -------------------------------------------------------------------------- */
/* 4. Tipografia */
/* -------------------------------------------------------------------------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: .75rem;
font-family: var(--font-mono);
font-size: .6875rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent-ink);
}
.eyebrow::before {
content: "";
width: 28px;
height: 1px;
flex: none;
background: currentColor;
}
.eyebrow--dark { color: var(--preto-operacao); }
.display,
.title-xl, .title-lg, .title-md, .title-sm {
font-family: var(--font-display);
text-transform: uppercase;
text-wrap: balance;
}
.title-xl {
font-weight: 800;
font-size: clamp(2.75rem, 7.2vw, 6.25rem);
line-height: .9;
letter-spacing: -.005em;
}
.title-lg {
font-weight: 800;
font-size: clamp(2.25rem, 5vw, 4.125rem);
line-height: .94;
letter-spacing: -.003em;
}
.title-md {
font-weight: 700;
font-size: clamp(1.75rem, 3.3vw, 2.75rem);
line-height: 1;
}
.title-sm {
font-weight: 700;
font-size: clamp(1.375rem, 2.1vw, 1.75rem);
line-height: 1.05;
letter-spacing: .005em;
}
.lead {
font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
line-height: 1.6;
color: var(--text-2);
max-width: 62ch;
text-wrap: pretty;
}
.body-text { color: var(--text-2); text-wrap: pretty; }
.body-text + .body-text { margin-top: 1.1em; }
.micro { font-size: .8125rem; line-height: 1.55; color: var(--text-3); text-wrap: pretty; }
.mono { font-family: var(--font-mono); }
.hl {
color: var(--accent-ink);
background-image: var(--hl-bg);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.white { color: var(--text); }
.coord {
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent-ink);
}
.stencil {
paint-order: stroke fill;
-webkit-text-stroke: 2px var(--accent);
color: transparent;
}
@media (max-width: 640px) {
.stencil { -webkit-text-stroke: 0; color: var(--accent-ink); }
}
.subhead {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-display);
font-weight: 600;
font-size: .9375rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text);
}
.subhead::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
/* Campos [entre colchetes] (.ph) = a preencher/confirmar antes da publicação.
Sem destaque visual (DS V.01: "dados a confirmar ficam entre colchetes, sem
destaque visual"): seguem o texto em volta. A classe fica no HTML só para
localizar esses campos. */
/* Etiqueta: rótulo curto em JetBrains Mono Medium, com as pontas no ângulo do Corte.
Sem modificador usa a cor do escopo (âmbar sólido no claro, âmbar translúcido no
escuro, preto na faixa âmbar). Com botão âmbar na peça, a etiqueta não é âmbar:
.tag--contorno (qualquer escopo) ou .tag--preta (só no claro). Nunca numerada. */
.tag {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
padding: 6px 14px;
color: var(--ico-ink);
font-family: var(--font-mono);
font-weight: 500;
font-size: .75rem;
line-height: 1.3;
letter-spacing: .1em;
text-transform: uppercase;
}
.tag::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--ico-bg);
border: 1px solid var(--ico-border);
transform: skewX(calc(-1 * var(--corte)));
}
.tag--ambar { color: var(--preto-operacao); }
.tag--ambar::before { background: var(--ambar-vigilia); border-color: var(--ambar-vigilia); }
.tag--preta { color: var(--ambar-vigilia); }
.tag--preta::before { background: var(--preto-operacao); border-color: var(--preto-operacao); }
.tag--contorno { padding: 9px 16px 8px; color: var(--text); font-size: .8125rem; line-height: 1; letter-spacing: .06em; }
.tag--contorno::before { background: transparent; border: 1.5px solid var(--text); }
/* Listas: marcador inclinado no Corte, em accent (no Fortalecer, reto com cantos de 2px) */
.bullets { list-style: none; padding: 0; display: grid; gap: 12px; }
.bullets li {
position: relative;
padding-left: 22px;
color: var(--text-2);
text-wrap: pretty;
}
.bullets li::before {
content: "";
position: absolute;
left: 2px; top: .62em;
width: 7px; height: 7px;
background: var(--accent);
transform: skewX(calc(-1 * var(--corte)));
}
.checklist { list-style: none; padding: 0; display: grid; gap: 14px; }
.checklist li {
display: grid;
grid-template-columns: 22px 1fr;
gap: 12px;
align-items: start;
color: var(--text-2);
text-wrap: pretty;
}
.checklist .ico { width: 20px; height: 20px; color: var(--accent-ink); stroke-width: 2.25; margin-top: .15em; }
/* Logotipo V.02: o COP° sobre a barra âmbar do CAPITAL, na versão central (principal)
ou horizontal (cabeçalho, barras e faixas). As cores vêm do escopo: COP° em
--logo-tinta, barra em --logo-barra e letras do CAPITAL em --logo-capital; no âmbar,
vira monocromático. Desenho fechado, nunca redigitado. Área de proteção: 2x em volta
(x = altura do °). Mínimo: 70px de largura (central) e 100px (horizontal). */
.logo { display: block; width: var(--logo-largura, 160px); height: auto; aspect-ratio: 398 / 180; color: var(--logo-tinta); overflow: visible; }
.logo--horizontal { width: var(--logo-largura, 220px); aspect-ratio: 674 / 76; }
/* Submarca (Academy, ShootPass, Clube): o símbolo sem CAPITAL + o descritor em Barlow
Condensed SemiBold itálico. O font-size é o x: símbolo 1,73 × 1,44x, a 0,4x do
descritor, com as maiúsculas na metade da altura do símbolo e centradas nele.
Para criar outra, troque só o descritor. Mínimo: x = 12px. */
.submarca { display: inline-flex; align-items: center; gap: .4em; font-size: 15px; line-height: 1; color: var(--marca); white-space: nowrap; }
.submarca__simbolo { display: block; width: 1.726em; height: 1.44em; flex: none; }
.submarca__nome {
font-family: var(--font-display);
font-style: italic;
font-weight: 600;
font-size: 1em;
letter-spacing: .28em;
line-height: 1;
text-transform: uppercase;
color: var(--text);
transform: translateY(-.05em);
}
/* Selos: o símbolo com CAPITAL e a tagline na moldura do Corte. Chancela: só em peça que já
tem a logo do COP, sobre fundo escuro, um por peça e nunca redigitado. Principal a partir de
250px; abaixo disso, o secundário (a partir de 130px). Moldura e símbolo em âmbar, tagline e
barra em Osso, CAPITAL em preto. */
.selo { display: block; width: var(--selo-largura, 280px); height: auto; aspect-ratio: 1651 / 570; color: var(--ambar-vigilia); --selo-tinta: var(--osso); --selo-capital: #000000; }
.selo--secundario { width: var(--selo-largura, 160px); aspect-ratio: 1133 / 639; }
/* COP.IA: marca própria, âmbar no escuro e preta no claro. Em texto corrido, COP.IA com ponto. */
.copia { display: inline-block; height: 1em; width: auto; aspect-ratio: 743 / 139; vertical-align: middle; color: var(--marca); }
/* Insígnia de serviço: um ícone por serviço dentro do paralelogramo do Corte. No Missão,
preto no claro e steel no escuro, com o ícone em âmbar. Telepsicologia e Seguro usam
.insignia--care: retângulo de 6px em Noite, ícone em Alvorada. Nos escopos Alvorada e
Noite toda insígnia perde o Corte. Ícones: Academy graduation-cap, ShootPass
crosshair, COP.IA message-circle, Clube tag, Telepsicologia brain, Seguro umbrella,
Comunidade users, Proteção shield. */
.insignia {
--h: 46px;
--w: 62px;
--o: calc(var(--h) * var(--corte-tan));
position: relative;
isolation: isolate;
display: inline-grid;
place-items: center;
flex: none;
width: var(--w);
height: var(--h);
clip-path: polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%);
background: var(--insignia-bg);
color: var(--insignia-ink);
}
.insignia .ico { width: 22px; height: 22px; }
.insignia--sm { --h: 34px; --w: 46px; }
.insignia--sm .ico { width: 17px; height: 17px; }
.insignia--lg { --h: 50px; --w: 66px; }
.insignia--lg .ico { width: 28px; height: 28px; }
.insignia--care { clip-path: none; border-radius: var(--raio-fortalecer); background: var(--insignia-fortalecer-bg); color: var(--alvorada); }
/* Só em contorno: listas leves, estados inativos e as quatro insígnias do rodapé */
.insignia--outline { clip-path: none; background: transparent; color: var(--accent-ink); }
.insignia--outline::before {
content: "";
position: absolute;
inset: 0 calc(var(--o) / 2);
z-index: -1;
border: 1.5px solid currentColor;
transform: skewX(calc(-1 * var(--corte)));
}
:is(.section--care, .section--care-dark) .insignia { clip-path: none; border-radius: var(--raio-fortalecer); }
:is(.section--care, .section--care-dark) .insignia--outline::before { transform: none; inset: 0; border-radius: var(--raio-fortalecer); }
.insignias { display: flex; flex-wrap: wrap; gap: 4px; }
/* -------------------------------------------------------------------------- */
/* 5. Botões e links */
/* -------------------------------------------------------------------------- */
/* Botões no Corte: as laterais seguem os 11,6° do símbolo e o rótulo fica reto. Fundo e
borda ficam num ::before inclinado, recuado meio avanço de cada lado (avanço =
--forma-altura × tan 11,6°), para o paralelogramo caber na caixa. A forma vale também
para as ferramentas da barra de topo, o botão de menu e o segmentado. Cada controle
define --forma-altura, --forma-fundo e --forma-borda. No Fortalecer, frase normal em
Barlow e cantos de 6px, sem Corte. */
:where(.btn, .tool, .burger, .seg label) {
position: relative;
isolation: isolate;
border: 0;
background: none;
}
:where(.btn, .tool, .burger, .seg label)::before {
content: "";
position: absolute;
inset: 0 calc(var(--forma-altura) * var(--corte-tan) / 2);
z-index: -1;
background: var(--forma-fundo, transparent);
border: 1px solid var(--forma-borda, transparent);
border-radius: var(--radius);
transform: skewX(calc(-1 * var(--corte)));
transition: background-color .25s, border-color .25s;
}
:is(.section--care, .section--care-dark) :where(.btn, .tool, .burger, .seg label)::before { inset: 0; transform: none; }
/* O anel de foco acompanha a forma */
:where(.btn, .tool, .burger):focus-visible { outline: none; }
:where(.btn, .tool, .burger):focus-visible::before,
.seg input:focus-visible + label::before { outline: 2px solid var(--foco); outline-offset: 3px; }
.btn {
--forma-altura: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .75rem;
min-height: var(--forma-altura);
padding: 12px 30px;
font-family: var(--font-acao);
font-weight: 600;
font-size: .9375rem;
line-height: 1.15;
letter-spacing: .096em;
text-transform: uppercase;
text-align: center;
transition: color .25s, transform .15s;
}
.btn .ico { width: 16px; height: 16px; stroke-width: 2.25; transition: transform .25s var(--ease); }
.btn:hover .ico--arrow { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn--lg { --forma-altura: 56px; padding-inline: 34px; font-size: 1rem; }
.btn--sm { --forma-altura: 42px; padding: 8px 22px; font-size: .84375rem; letter-spacing: .084em; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
/* Primário: a ação principal, uma por vista. Âmbar no claro e no escuro, preto na faixa
âmbar, Noite no Alvorada e Alvorada na Noite; no hover, o preenchimento clareia. */
.btn--primary { --forma-fundo: var(--accent); color: var(--on-accent); }
.btn--primary:hover { --forma-fundo: var(--accent-hover); }
.btn--ghost { --forma-borda: var(--line-hover); color: var(--text); }
.btn--ghost:hover { --forma-borda: var(--accent); color: var(--accent-ink); }
.btn--outline { --forma-borda: var(--accent-ink); color: var(--accent-ink); }
.btn--outline:hover { --forma-fundo: var(--accent); --forma-borda: var(--accent); color: var(--on-accent); }
/* Cor fixa, para fundos de foto ou faixas em que o escopo não ajuda */
.btn--dark { --forma-fundo: var(--preto-operacao); color: var(--ambar-vigilia); }
.btn--dark:hover { --forma-fundo: var(--preto-hover); color: var(--branco); }
.btn--light { --forma-fundo: var(--branco); color: var(--preto-operacao); }
.btn--light:hover { --forma-fundo: var(--ambar-vigilia); }
.link {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--accent-ink);
font-family: var(--font-display);
font-weight: 600;
font-size: .9375rem;
letter-spacing: .12em;
text-transform: uppercase;
transition: color .2s;
}
.link .ico { width: 16px; height: 16px; stroke-width: 2.25; transition: transform .25s var(--ease); }
.link:hover { color: var(--accent-ink-hover); }
.link:hover .ico { transform: translateX(3px); }
.text-link {
color: var(--accent-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.text-link:hover { color: var(--accent-ink-hover); }
/* -------------------------------------------------------------------------- */
/* 6. Topbar + navegação */
/* -------------------------------------------------------------------------- */
.topbar {
display: none;
background: var(--preto-operacao);
border-bottom: 1px solid var(--line);
}
@media (min-width: 1280px) { .topbar { display: block; } }
.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 38px;
}
.topbar__tag {
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-3);
}
.topbar__tag::before { content: "// "; color: var(--accent-ink); }
.tools { display: flex; align-items: center; gap: 4px; }
.tool {
--forma-altura: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 36px;
height: var(--forma-altura);
padding: 0 10px;
color: var(--text-2);
font-family: var(--font-mono);
font-size: .65625rem;
letter-spacing: .14em;
text-transform: uppercase;
transition: color .2s;
}
.tool .ico { width: 16px; height: 16px; }
.tool:hover { color: var(--accent-ink); }
.tool[aria-pressed="true"] { --forma-fundo: var(--accent); color: var(--on-accent); }
.tools__sep { width: 1px; height: 16px; background: var(--line-strong); margin-inline: 8px; }
.navbar {
position: sticky;
top: 0;
z-index: 60;
background: var(--cabecalho-vidro);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--line);
transition: background-color .3s;
}
.navbar.is-scrolled { background: rgba(0, 0, 0, .94); }
.navbar__inner {
display: flex;
align-items: center;
gap: 16px;
height: var(--header-h);
}
/* Logotipo V.02 na versão horizontal: 200px; no celular, o que sobra ao lado das ações,
sem passar do mínimo de 100px */
.brand { flex: none; display: block; }
.brand .logo { --logo-largura: 200px; }
@media (max-width: 480px) { .brand .logo { --logo-largura: clamp(100px, calc(100vw - 252px), 168px); } }
.nav { display: none; flex: 1; }
@media (min-width: 1280px) { .nav { display: block; } }
.nav__list {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
.nav__item { position: relative; }
.nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
height: var(--header-h);
padding: 0 6px;
font-family: var(--font-display);
font-weight: 600;
font-size: .8125rem;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-2);
white-space: nowrap;
transition: color .2s;
}
.nav__link .ico { width: 10px; height: 10px; stroke-width: 2.75; opacity: .6; transition: transform .25s var(--ease); }
.nav__link::after {
content: "";
position: absolute;
left: 6px; right: 6px; bottom: 0;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s var(--ease);
}
.nav__link:hover,
.nav__item:focus-within > .nav__link { color: var(--text); }
.nav__link[aria-current="page"] { color: var(--accent-ink); }
.nav__link[aria-current="page"]::after,
.nav__link:hover::after { transform: scaleX(1); }
.nav__item:hover > .nav__link .ico { transform: rotate(180deg); }
.nav__drop {
position: absolute;
top: 100%;
left: -6px;
width: 300px;
padding: 20px 22px 22px;
background: var(--console);
border: 1px solid var(--line);
box-shadow: var(--sombra-menu);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.nav__item:hover > .nav__drop,
.nav__item:focus-within > .nav__drop {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.nav__drop-head { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.nav__drop-head .ico { width: 22px; height: 22px; color: var(--accent-ink); }
.nav__drop-head p { font-size: .9375rem; line-height: 1.45; color: var(--text); }
.nav__sub { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.nav__sub a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 7px 0;
font-size: .9375rem;
color: var(--text-2);
transition: color .2s, padding .25s var(--ease);
}
.nav__sub a .ico { width: 14px; height: 14px; opacity: 0; color: var(--accent-ink); transition: opacity .2s; }
.nav__sub a:hover { color: var(--accent-ink); padding-left: 4px; }
.nav__sub a:hover .ico { opacity: 1; }
.navbar__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
@media (min-width: 1280px) { .navbar__actions { margin-left: 0; } }
.nav-login {
display: none;
align-items: center;
gap: 8px;
height: 42px;
padding: 0 10px;
font-family: var(--font-display);
font-weight: 600;
font-size: .84375rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-2);
transition: color .2s;
}
.nav-login .ico { width: 16px; height: 16px; }
.nav-login:hover { color: var(--accent-ink); }
@media (min-width: 1280px) { .nav-login { display: inline-flex; } }
.nav-cta { display: none; white-space: nowrap; }
.nav-login { white-space: nowrap; }
/* De 1280 a 1439px os oito itens do menu dividem a barra com as ações: "Entrar" fica só no
ícone (com a dica), o menu aperta um pouco e o logotipo vai a 176px (mínimo: 100px) */
@media (min-width: 1280px) and (max-width: 1439px) {
.nav-login__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-login { padding: 0 8px; }
.brand .logo { --logo-largura: 176px; }
.nav__link { font-size: 12.5px; letter-spacing: .06em; }
}
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }
/* Dica (microcopy do submenu) em Entrar / Abra sua conta */
.has-tip { position: relative; }
.tip {
position: absolute;
top: calc(100% + 12px);
left: 50%;
z-index: 5;
padding: 6px 10px;
background: var(--branco);
color: var(--preto-operacao);
font-family: var(--font-mono);
font-size: .625rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translate(-50%, 4px);
transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s;
}
.tip::before {
content: "";
position: absolute;
top: -4px;
left: 50%;
width: 8px;
height: 8px;
background: inherit;
transform: translateX(-50%) rotate(45deg);
}
@media (hover: hover) {
.has-tip:hover .tip,
.has-tip:focus-visible .tip {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
transition-delay: 0s;
}
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--text);
}
.icon-btn .ico { width: 22px; height: 22px; }
.icon-btn:hover { color: var(--accent-ink); }
.burger {
--forma-altura: 44px;
--forma-borda: var(--line-strong);
width: 44px;
height: var(--forma-altura);
}
.burger span {
position: absolute;
left: 12px; right: 12px;
height: 2px;
background: var(--text);
transition: transform .3s var(--ease), top .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 25px; right: 18px; background: var(--accent); }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 21px; right: 12px; transform: rotate(-45deg); background: var(--text); }
@media (min-width: 1280px) { .burger { display: none; } }
/* Menu mobile (mesmos itens e ícones) */
.mnav {
position: fixed;
inset: var(--header-h) 0 0 0;
z-index: 55;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--preto-operacao);
border-top: 1px solid var(--line);
padding: 8px 0 40px;
}
.mnav[hidden] { display: none; }
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__link {
display: grid;
grid-template-columns: 40px 1fr 20px;
align-items: center;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--line);
}
.mnav__ico {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-strong);
color: var(--accent-ink);
}
.mnav__ico .ico { width: 20px; height: 20px; }
.mnav__label {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.375rem;
line-height: 1.05;
letter-spacing: .02em;
text-transform: uppercase;
}
.mnav__desc { display: block; margin-top: 4px; font-size: .875rem; color: var(--text-3); line-height: 1.4; }
.mnav__link > .ico { width: 18px; height: 18px; color: var(--text-3); }
.mnav__link[aria-current="page"] .mnav__label { color: var(--accent-ink); }
.mnav__actions { display: grid; gap: 12px; margin-top: 28px; }
.mnav__tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.mnav__tools .tool { --forma-altura: 40px; --forma-borda: var(--line-strong); min-width: 46px; }
/* OCULTO 2026-11-13 (pedido Thiago): sem .mnav__actions, evita linha dupla entre a lista e as ferramentas */
.mnav__list + .mnav__tools { margin-top: 0; border-top: 0; }
/* Busca */
.search {
position: fixed;
inset: 0;
z-index: 120;
background: rgba(0, 0, 0, .92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding-top: clamp(24px, 12vh, 120px);
}
.search[hidden] { display: none; }
.search__panel { max-width: calc(760px + 2 * var(--gutter)); }
.search__bar {
display: flex;
align-items: center;
gap: 14px;
border-bottom: 2px solid var(--accent);
padding-bottom: 10px;
}
.search__bar > .ico { width: 26px; height: 26px; color: var(--accent-ink); }
.search__input {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 4vw, 2.25rem);
letter-spacing: .02em;
color: var(--text);
}
.search__input:focus { outline: none; }
.search__input::placeholder { color: #4A4A4A; text-transform: uppercase; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__results { list-style: none; margin: 20px 0 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.search__results a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
padding: 14px 4px;
border-bottom: 1px solid var(--line);
transition: color .2s, padding .25s var(--ease);
}
.search__results a:hover,
.search__results a:focus-visible { color: var(--accent-ink); padding-left: 10px; outline: none; }
.search__results .r-title { font-size: 1.0625rem; }
.search__results .r-page {
flex: none;
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-3);
}
/* O seletor de tamanho de fonte amplia o conteúdo; o cabeçalho mantém medidas fixas
para o menu continuar cabendo (o zoom do navegador segue funcionando normalmente). */
.topbar__tag, .tool { font-size: 10px; }
.nav__link { font-size: 13px; }
@media (min-width: 1280px) and (max-width: 1439px) { .nav__link { font-size: 12.5px; } }
.nav__drop-head p, .nav__sub a { font-size: 15px; }
.nav-login { font-size: 13.5px; }
.navbar .btn--sm { font-size: 13.5px; }
.tip { font-size: 10px; }
.mnav__label { font-size: 22px; }
.mnav__desc { font-size: 14px; }
/* -------------------------------------------------------------------------- */
/* 7. Cabeçalhos de seção e page hero */
/* -------------------------------------------------------------------------- */
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); max-width: 920px; }
.sec-head > .lead { margin-top: 4px; }
.sec-head--split { max-width: none; }
.sec-head--center { margin-inline: auto; justify-items: center; text-align: center; }
@media (min-width: 1024px) {
.sec-head--split { grid-template-columns: 7fr 5fr; align-items: end; column-gap: clamp(40px, 5vw, 88px); }
.sec-head--split > .lead { margin: 0; }
}
.sec-head__title-group { display: grid; gap: 20px; }
.page-hero {
position: relative;
isolation: isolate;
background: var(--bg);
overflow: hidden;
padding-block: clamp(48px, 7vw, 112px) clamp(48px, 6vw, 96px);
border-bottom: 1px solid var(--line);
}
.page-hero__inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .page-hero__inner { grid-template-columns: minmax(0, 1fr) 360px; } }
.page-hero__content { display: grid; gap: 22px; justify-items: start; }
.page-hero__title { font-size: clamp(2.5rem, 6.2vw, 5.25rem); }
.page-hero__lead { max-width: 64ch; }
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
margin: 0 0 6px;
padding: 0;
font-family: var(--font-mono);
font-size: .65625rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-3);
}
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.breadcrumb a:hover { color: var(--accent-ink); }
.breadcrumb [aria-current] { color: var(--text-2); }
/* Emblema decorativo do page hero: a insígnia da página no ângulo do símbolo */
.emblem {
position: relative;
display: none;
width: 340px;
aspect-ratio: 1;
justify-self: end;
}
@media (min-width: 1024px) { .emblem { display: block; } }
.emblem__shape {
position: absolute;
left: 50%; top: 50%;
width: 94%;
height: auto;
transform: translate(-50%, -50%);
overflow: visible;
}
.emblem__shape :is(polygon, rect) {
fill: var(--graphite);
stroke: rgba(255, 190, 3, .35);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.emblem__icon {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.emblem__icon .ico {
width: 40%;
height: 40%;
color: var(--accent-ink);
stroke-width: .9;
}
/* Páginas do registro Fortalecer: o emblema perde o Corte (retângulo com cantos
arredondados no lugar do paralelogramo), na superfície do escopo, com ícone em Alvorada */
.emblem--care .emblem__shape :is(polygon, rect) { fill: var(--surface); stroke: rgba(201, 206, 223, .3); }
.section--care .emblem--care .emblem__shape :is(polygon, rect) { stroke: var(--line-strong); }
.emblem--care .emblem__icon .ico { color: var(--alvorada); }
.section--care .emblem--care .emblem__icon .ico { color: var(--noite); }
.emblem__coord { position: absolute; }
.emblem__coord--a { top: 6%; left: 0; }
.emblem__coord--b { bottom: 6%; right: 0; }
/* Subnavegação fixa (páginas longas) */
.subnav {
position: sticky;
top: var(--header-h);
z-index: 40;
background: rgba(0, 0, 0, .9);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.subnav__list {
display: flex;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;
scrollbar-width: none;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav a {
display: inline-flex;
align-items: center;
gap: 8px;
height: 52px;
padding: 0 14px;
font-family: var(--font-display);
font-weight: 600;
font-size: .8125rem;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
color: var(--text-3);
border-bottom: 2px solid transparent;
transition: color .2s, border-color .2s;
}
.subnav a .ico { width: 15px; height: 15px; }
.subnav a:hover { color: var(--text); }
.subnav a.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); }
/* -------------------------------------------------------------------------- */
/* 8. Home · Hero */
/* -------------------------------------------------------------------------- */
.hero {
position: relative;
isolation: isolate;
background: var(--bg);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: clamp(620px, calc(100svh - var(--header-h)), 980px);
border-bottom: 1px solid var(--line);
}
@media (min-width: 1280px) {
.hero { min-height: clamp(680px, calc(100svh - var(--header-h) - 39px), 980px); }
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Foto de fundo (placas âmbar) a 18% de opacidade */
.hero__photo {
position: absolute;
inset: 0;
opacity: .18;
background: url("../img/hero/fundo.webp") center / cover no-repeat;
}
.hero__noise {
position: absolute;
inset: 0;
opacity: .5;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.hero__inner {
flex: 1;
display: grid;
align-items: center;
gap: 48px;
padding-block: clamp(48px, 8vh, 104px) clamp(40px, 6vh, 72px);
}
@media (min-width: 1024px) {
.hero__inner { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
}
.hero__content { position: relative; z-index: 2; }
.hero__title {
margin-top: 26px;
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
line-height: .86;
letter-spacing: -.01em;
font-size: clamp(3rem, 13.4vw, 7.25rem);
}
@media (min-width: 1024px) {
.hero__title { font-size: clamp(5.25rem, 7.7vw, 8.5rem); }
}
.hero__line { display: block; }
.hero__line--accent { color: var(--accent-ink); }
.hero__title.is-alt { font-size: clamp(2.5rem, 9vw, 5.5rem); line-height: .92; }
@media (min-width: 1024px) { .hero__title.is-alt { font-size: clamp(3.75rem, 5.4vw, 6rem); } }
.hero__title .stencil { -webkit-text-stroke: 0; color: var(--accent); }
.hero__lead {
margin-top: 32px;
font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
font-weight: 300;
line-height: 1.55;
color: var(--text-2);
max-width: 54ch;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
@media (max-width: 479px) { .hero__ctas .btn { width: 100%; } }
/* Visual: peça do hero — decorativo. De trás para a frente: brilho âmbar, foto do
profissional, os cartões e a luz à frente deles. Todas as medidas da
peça estão em --u, o "pixel da arte": 1px quando cabe, menos quando a coluna
é estreita ou baixa. */
@property --u { syntax: ""; inherits: true; initial-value: 1px; }
.hero__visual {
position: relative;
display: none;
align-self: stretch;
min-height: 460px;
container-type: size;
}
@media (min-width: 1024px) { .hero__visual { display: block; } }
/* Arte de 492 × 632: alinhada à direita da coluna, centrada na altura,
podendo avançar sobre o vão da grade (48px) e um pouco sobre o respiro do hero */
.hero-art {
--u: min(1px, (100cqw + 48px) / 492, (100cqh + 48px) / 632);
position: absolute;
right: 0;
top: calc(50% - 316 * var(--u));
width: calc(492 * var(--u));
height: calc(632 * var(--u));
}
/* Brilho âmbar suave atrás da foto, só para dar profundidade (exceção à regra
do âmbar sempre sólido, pedida em 06/10/2026). Queda calibrada na arte original. */
.hero-art__glow {
position: absolute;
left: calc(-97 * var(--u));
top: calc(-119 * var(--u));
width: calc(714 * var(--u));
height: calc(840 * var(--u));
background: radial-gradient(closest-side,
rgba(255, 190, 3, .457),
rgba(255, 190, 3, .445) 10%,
rgba(255, 190, 3, .396) 20%,
rgba(255, 190, 3, .311) 30%,
rgba(255, 190, 3, .209) 40%,
rgba(255, 190, 3, .118) 50%,
rgba(255, 190, 3, .055) 60%,
rgba(255, 190, 3, .021) 70%,
rgba(255, 190, 3, .006) 80%,
rgba(255, 190, 3, 0));
}
.hero-art__person { position: absolute; max-width: none; height: auto; }
/* O recorte da foto termina reto embaixo: fica sempre escondido atrás dos cartões */
.hero-art__person { left: calc(32 * var(--u)); top: calc(-4 * var(--u)); width: calc(451 * var(--u)); }
.plate-stack {
position: absolute;
left: calc(62 * var(--u));
top: calc(351 * var(--u));
width: calc(413 * var(--u));
aspect-ratio: 1.586;
perspective: calc(1400 * var(--u));
perspective-origin: 46% 42%;
transform-style: preserve-3d;
--rx: 0deg;
--ry: 0deg;
--px: 0; /* posição do cursor no hero, de -.5 a .5 (main.js) */
--py: 0;
}
.plate {
position: absolute;
inset: 0;
border-radius: calc(16 * var(--u));
overflow: hidden;
}
.plate--yellow {
background: var(--ambar-vigilia);
transform: translate3d(-16%, -24%, calc(-140 * var(--u))) rotate(-10deg);
box-shadow: 0 calc(40 * var(--u)) calc(80 * var(--u)) calc(-30 * var(--u)) rgba(0, 0, 0, .9);
animation: plateFloatB 9s ease-in-out infinite;
}
.plate--yellow .plate__mark { color: var(--preto-operacao); width: 34%; }
/* Cartão discreto: preto fosco, sem número, o COP° em preto sobre preto
(verniz localizado) e só o nome do titular. O núcleo âmbar aparece na borda. */
.plate--black,
.plate--core {
transform: translateZ(calc(40 * var(--u))) rotateY(calc(-17deg + var(--ry))) rotateX(calc(9deg + var(--rx))) rotateZ(2deg);
transition: transform .5s var(--ease);
animation: plateFloatA 8s ease-in-out infinite;
}
.plate--black {
background: #0E0E0E;
border: 1px solid rgba(255, 255, 255, .07);
box-shadow:
0 calc(60 * var(--u)) calc(100 * var(--u)) calc(-36 * var(--u)) rgba(0, 0, 0, .95),
inset 0 1px 0 rgba(255, 255, 255, .05);
}
.plate--core {
background: var(--ambar-vigilia);
transform: translateZ(calc(40 * var(--u))) rotateY(calc(-17deg + var(--ry))) rotateX(calc(9deg + var(--rx))) rotateZ(2deg) translateZ(calc(-6 * var(--u)));
}
.plate__body {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 7% 7.5%;
}
.plate__top { display: flex; align-items: center; justify-content: flex-end; }
.plate__mark { width: 42%; min-width: calc(120 * var(--u)); height: auto; color: var(--accent); }
.plate--black .plate__mark { width: 30%; min-width: 0; color: var(--steel); }
.plate__mid { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.plate__chip {
position: relative;
width: calc(48 * var(--u));
height: calc(36 * var(--u));
border-radius: calc(6 * var(--u));
background: #3E3E3B;
box-shadow: inset 0 0 0 1px #2A2A28;
}
.plate__chip::before {
content: "";
position: absolute;
inset: 32% 0;
border-block: 1px solid #2A2A28;
}
.plate__nfc { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: none; stroke: #5E5E5E; stroke-width: 2; stroke-linecap: round; }
.plate__engrave {
font-family: var(--font-mono);
font-size: calc(10 * var(--u));
letter-spacing: .3em;
text-transform: uppercase;
color: rgba(255, 255, 255, .42);
}
/* Luz à frente dos cartões, no alto à esquerda (exceção à regra do âmbar sólido,
pedida em 06/10/2026): cada cartão recebe o reflexo amarelo dela no canto
superior esquerdo. O reflexo passeia devagar e muda de tamanho, e desliza
quando os cartões inclinam com o cursor: para o centro quando o cartão vira
para a luz, para o canto quando vira para longe. No cartão amarelo ele fica
por baixo do símbolo, que continua preto. */
.plate--yellow::after,
.plate--black::after {
content: "";
position: absolute;
left: -52%;
top: -76%;
width: 120%;
height: 160%;
pointer-events: none;
translate: calc(var(--px) * -14%) calc(var(--py) * -14%);
transition: translate .5s var(--ease);
animation: plateLightDrift 14s ease-in-out infinite, plateLightBreathe 9s ease-in-out infinite alternate;
}
.plate--black::after {
z-index: 2;
background: radial-gradient(closest-side,
rgba(255, 212, 80, .66),
rgba(255, 212, 80, .622) 10%,
rgba(255, 212, 80, .519) 20%,
rgba(255, 212, 80, .385) 30%,
rgba(255, 212, 80, .253) 40%,
rgba(255, 212, 80, .147) 50%,
rgba(255, 212, 80, .076) 60%,
rgba(255, 212, 80, .035) 70%,
rgba(255, 212, 80, .014) 80%,
rgba(255, 212, 80, .005) 90%,
rgba(255, 212, 80, 0));
}
.plate--yellow::after {
z-index: 0;
background: radial-gradient(closest-side,
rgba(255, 240, 190, .62),
rgba(255, 240, 190, .59) 10%,
rgba(255, 240, 190, .508) 20%,
rgba(255, 240, 190, .395) 30%,
rgba(255, 240, 190, .279) 40%,
rgba(255, 240, 190, .178) 50%,
rgba(255, 240, 190, .102) 60%,
rgba(255, 240, 190, .054) 70%,
rgba(255, 240, 190, .025) 80%,
rgba(255, 240, 190, .011) 90%,
rgba(255, 240, 190, 0));
}
/* A mesma luz pega no fio da borda de cima e da esquerda do cartão preto */
.plate--black::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: linear-gradient(128deg, rgba(255, 214, 92, .7), rgba(255, 190, 3, .2) 24%, rgba(255, 190, 3, 0) 50%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* Barra de confiança */
.trustbar {
position: relative;
z-index: 2;
border-top: 1px solid var(--line);
background: rgba(0, 0, 0, .55);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.trustbar__list {
list-style: none;
margin-block: 0;
display: grid;
gap: 14px 36px;
padding-block: 20px;
}
@media (min-width: 640px) { .trustbar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
.trustbar__list { display: flex; justify-content: space-between; }
}
.trustbar li {
display: flex;
align-items: center;
gap: 12px;
font-size: .875rem;
font-weight: 500;
line-height: 1.35;
color: var(--text-2);
}
.trustbar .ico { width: 18px; height: 18px; color: var(--accent-ink); }
/* Os quatro pilares logo abaixo do hero: a grade de pilares (.pillars, seção 15), mais
compacta e no escopo escuro. A faixa âmbar da página é a de chamada, no fim. */
.stats--pillars { background: var(--bg); border-bottom: 1px solid var(--line); }
.stats--pillars .pillars { border-block: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .stats--pillars .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats--pillars .pillar { gap: 10px; padding: 26px clamp(18px, 2.2vw, 26px) 28px; }
.stats--pillars .pillar .ico { width: 28px; height: 28px; margin: 0 0 4px; }
.stats--pillars .pillar__verb { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.stats--pillars .pillar p { max-width: 32ch; }
@media (max-width: 639px) {
.stats--pillars .pillar { padding: 20px 14px 22px; }
.stats--pillars .pillar .ico { width: 24px; height: 24px; }
.stats--pillars .pillar__verb { font-size: 1.375rem; }
.stats--pillars .pillar p { font-size: .875rem; }
}
/* -------------------------------------------------------------------------- */
/* 9. Home · Contexto Brasil */
/* -------------------------------------------------------------------------- */
.data-grid {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 640px) { .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .data-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.data {
container-type: inline-size;
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
padding: clamp(24px, 3vw, 36px);
background: var(--bg-raised);
}
.data__num {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(3.5rem, 32cqi, 7rem);
line-height: .82;
letter-spacing: -.01em;
color: var(--text);
text-transform: uppercase;
}
.data__num--word { font-size: clamp(2.75rem, 25cqi, 5.75rem); }
.data__num--sign { color: var(--accent-ink); }
.data p { color: var(--text-2); font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }
.source { margin-top: 14px; font-size: .8125rem; line-height: 1.55; color: var(--text-3); }
.source strong { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); margin-right: 8px; }
/* Conclusão com a barra de sinal: 6px à esquerda, em Âmbar Vigília sólido */
.closing {
margin-top: clamp(48px, 6vw, 80px);
padding: 6px 0 6px clamp(20px, 3vw, 28px);
border-left: 6px solid var(--accent);
max-width: 980px;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 2.8vw, 2.375rem);
line-height: 1.12;
letter-spacing: .005em;
color: var(--text);
text-wrap: balance;
}
.closing .hl {
color: var(--accent-ink);
background-image: var(--hl-bg);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* -------------------------------------------------------------------------- */
/* 10. Home · Dores */
/* -------------------------------------------------------------------------- */
.pain-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 720px) { .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pain-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pain {
display: flex;
flex-direction: column;
gap: 18px;
padding: clamp(26px, 3vw, 36px);
background: var(--bg);
transition: background-color .4s var(--ease);
}
.pain:hover { background: var(--hover-bg); }
.pain__top { display: flex; align-items: center; padding-bottom: clamp(20px, 3vw, 44px); }
@media (min-width: 720px) { .pain { min-height: 300px; } }
.pain__ico { width: 30px; height: 30px; color: var(--text-3); stroke-width: 1.5; transition: color .4s var(--ease), transform .5s var(--ease); }
.pain:hover .pain__ico { color: var(--accent-ink); transform: translateY(-2px); }
.pain__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.5rem, 2.1vw, 1.8125rem);
line-height: 1;
text-transform: uppercase;
text-wrap: balance;
}
.pain p { color: var(--text-2); font-size: .96875rem; line-height: 1.6; text-wrap: pretty; }
/* Cada dor tem uma resposta concreta da marca (DS: Grade de dores) */
.pain p.pain__answer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.pain__answer .coord { flex: none; }
.pain__answer span:last-child { font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--text); }
.cta-line {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 32px;
margin-top: clamp(36px, 4vw, 56px);
padding: 26px clamp(22px, 3vw, 34px);
border: 1px solid var(--line);
border-left: 4px solid var(--accent);
}
.cta-line > span {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.25rem, 2vw, 1.625rem);
line-height: 1.1;
text-transform: uppercase;
}
/* -------------------------------------------------------------------------- */
/* 11. Soluções (cards) */
/* -------------------------------------------------------------------------- */
/* Cada item: o card e, embaixo dele (fora do card), a observação em texto pequeno.
No desktop, a subgrade deixa os cards com a mesma altura e as observações na mesma linha. */
.sol-grid { display: grid; gap: 28px; }
.sol-item { display: grid; gap: 14px; align-content: start; }
@media (min-width: 1024px) {
.sol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 14px 20px; }
.sol-item { grid-row: span 2; grid-template-rows: subgrid; }
}
.sol__note { max-width: 56ch; }
.sol {
display: flex;
flex-direction: column;
gap: 20px;
padding: clamp(26px, 3vw, 36px);
background: var(--surface);
border: 1px solid var(--line);
transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.sol:hover { border-color: var(--line-hover); }
.sol.theme-dark { background: var(--preto-operacao); }
.sol--featured { background: var(--ambar-vigilia); border-color: var(--ambar-vigilia); }
.sol__top { display: flex; align-items: center; justify-content: flex-end; }
.sol__ico {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid var(--line-strong);
color: var(--accent-ink);
}
.sol__ico .ico { width: 24px; height: 24px; }
.sol__name {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.5rem, 2.2vw, 1.875rem);
line-height: 1;
text-transform: uppercase;
text-wrap: balance;
}
.sol__name a { transition: color .2s; }
.sol__name a:hover { color: var(--accent-ink); }
.sol__quote { font-size: 1.1875rem; font-weight: 500; line-height: 1.4; color: var(--text); text-wrap: pretty; }
.sol__foot { display: grid; gap: 18px; margin-top: auto; padding-top: 8px; }
/* Preço: "A partir de" pequeno, em cima; o valor em Barlow Bold, sem itálico */
.price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 8px;
font-family: var(--font-display);
text-transform: uppercase;
}
.price__from { flex-basis: 100%; font-weight: 600; font-size: .75rem; line-height: 1.2; letter-spacing: .14em; color: var(--text-2); }
.price__value { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.75rem, 2.95vw, 2.375rem); line-height: 1; color: var(--accent-ink); }
.price__per { font-weight: 600; font-size: 1rem; letter-spacing: .08em; color: var(--text-2); }
/* -------------------------------------------------------------------------- */
/* 12. Comunidade (teaser + feed + tiles) */
/* -------------------------------------------------------------------------- */
.community { display: grid; gap: clamp(40px, 5vw, 64px); }
.community__intro {
display: grid;
gap: 22px;
justify-items: center;
max-width: 800px;
margin-inline: auto;
text-align: center;
}
.community__intro .lead { text-wrap: pretty; }
.community__intro .btn { margin-top: 10px; }
/* Feed ilustrativo: três faixas já desfocadas (tools/feed_strips.py) descem em loop
só com transform; na frente, 5 posts trocam a cada 3 s. Tudo em CSS, ciclo de 15 s. */
.feed {
--feed-cycle: 15s;
position: relative;
isolation: isolate;
height: clamp(460px, 44vw, 600px);
overflow: hidden;
}
.feed::before,
.feed::after {
content: "";
position: absolute;
inset-inline: 0;
z-index: 1;
height: 24%;
pointer-events: none;
}
.feed::before { top: 0; background: linear-gradient(var(--bg), rgba(0, 0, 0, .6) 45%, transparent); }
.feed::after { bottom: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .6) 55%, var(--bg)); }
.feed__wall {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: clamp(16px, 3.2vw, 46px);
opacity: .8;
}
.feed__col {
background: var(--strip) repeat-y 0 0 / 100% auto;
animation: feed-down var(--feed-cycle) linear infinite;
will-change: transform;
}
/* aspect-ratio = largura / (2 × período): a coluna tem dois períodos e desce 50% */
.feed__col--1 { --strip: url("../img/comunidade/feed-1.webp"); aspect-ratio: 450 / 3964; }
.feed__col--2 { --strip: url("../img/comunidade/feed-2.webp"); aspect-ratio: 450 / 3420; animation-delay: -6s; }
.feed__col--3 { --strip: url("../img/comunidade/feed-3.webp"); aspect-ratio: 450 / 4508; animation-delay: -3s; }
@keyframes feed-down {
from { transform: translateY(-50%); }
to { transform: translateY(0); }
}
@media (max-width: 639px) {
.feed__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feed__col--3 { display: none; }
}
.feed__stack {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
padding-inline: 4px;
background: radial-gradient(ellipse 58% 56% at 50% 50%, rgba(0, 0, 0, .55), transparent 78%);
}
.feed__post {
--delay: calc(var(--k) * 3s - var(--feed-cycle));
grid-area: 1 / 1;
display: flex;
flex-direction: column;
width: min(720px, 100%);
border: 2px solid #8F96A6;
border-radius: 20px;
background: #30353F;
box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 8px 24px rgba(0, 0, 0, .45);
color: #F2F4F7;
transform-origin: 50% 50%;
will-change: transform, opacity;
animation:
feed-post-move var(--feed-cycle) linear var(--delay) infinite both,
feed-post-fade var(--feed-cycle) linear var(--delay) infinite both;
}
.feed__head {
display: flex;
align-items: center;
gap: clamp(12px, 1.4vw, 18px);
padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 34px) 0;
}
.feed__av {
display: grid;
place-items: center;
flex: none;
width: clamp(44px, 4.6vw, 62px);
aspect-ratio: 1;
border-radius: 50%;
background: var(--av);
color: #ECEFF3;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1rem, 1.5vw, 1.375rem);
letter-spacing: .02em;
}
.feed__who { display: grid; flex: 1; gap: 4px; min-width: 0; }
.feed__who b { font-weight: 600; font-size: clamp(1.0625rem, 1.7vw, 1.5rem); line-height: 1.1; }
.feed__who span {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(.6875rem, .95vw, .875rem);
line-height: 1.25;
letter-spacing: .08em;
text-transform: uppercase;
color: #A3ABB7;
}
/* Etiqueta no Corte 11,6°, em âmbar sólido */
.feed__tag {
--h: clamp(26px, 2.6vw, 34px);
--o: calc(var(--h) * var(--corte-tan));
display: inline-flex;
align-items: center;
flex: none;
align-self: flex-start;
height: var(--h);
padding: 0 calc(12px + var(--o));
clip-path: polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%);
background: var(--ambar-vigilia);
color: var(--preto-operacao);
font-family: var(--font-mono);
font-weight: 500;
font-size: clamp(.6875rem, .95vw, .8125rem);
letter-spacing: .1em;
text-transform: uppercase;
}
/* Registro Fortalecer: sem paralelogramo, frase normal em Barlow */
.feed__tag--care {
padding: 0 12px;
clip-path: none;
border-radius: 6px;
background: var(--noite-2);
color: var(--alvorada);
font-family: var(--font-sans);
font-weight: 500;
font-size: clamp(.8125rem, 1.05vw, .9375rem);
letter-spacing: 0;
text-transform: none;
}
.feed__text {
padding: clamp(14px, 1.8vw, 20px) clamp(20px, 3vw, 34px) clamp(20px, 2.6vw, 30px);
font-size: clamp(1.0625rem, 1.9vw, 1.625rem);
line-height: 1.32;
color: #DDE1E7;
text-wrap: pretty;
}
.feed__foot {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
height: clamp(54px, 5.6vw, 72px);
margin-top: auto;
padding: 0 12px;
border-top: 2px solid #484E58;
}
.feed__act {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #A3ABB7;
font-weight: 500;
font-size: clamp(.875rem, 1.25vw, 1.0625rem);
line-height: 1;
}
.feed__act .ico,
.feed__heart { width: clamp(20px, 2vw, 26px); height: clamp(20px, 2vw, 26px); stroke-width: 2; }
.feed__heart { position: relative; display: block; flex: none; }
.feed__heart .ico { position: absolute; inset: 0; width: 100%; height: 100%; }
.feed__heart .ico:first-child { animation: feed-like-line var(--feed-cycle) linear var(--delay) infinite both; }
.feed__heart .ico + .ico {
fill: var(--ambar-vigilia);
stroke: var(--ambar-vigilia);
opacity: 0;
transform-origin: 50% 55%;
animation: feed-like-fill var(--feed-cycle) linear var(--delay) infinite both;
}
.feed__count {
display: inline-grid;
height: 1.25em;
overflow: hidden;
line-height: 1.25em;
font-variant-numeric: tabular-nums;
}
.feed__count > span { grid-area: 1 / 1; }
.feed__count > span:first-child { animation: feed-count-out var(--feed-cycle) linear var(--delay) infinite both; }
.feed__count > span:last-child {
opacity: 0;
animation: feed-count-in var(--feed-cycle) linear var(--delay) infinite both;
}
.feed__note {
position: absolute;
right: 0;
bottom: 12px;
z-index: 3;
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--text-3);
}
/* Fora da tela, para (main.js) */
.feed.is-paused,
.feed.is-paused * { animation-play-state: paused; }
/* Ciclo de 15 s em %, com cada post atrasado k × 3 s (pousa em 0 %):
segura até 2,2 s (14,667 %), sai para baixo até 2,6 s (17,333 %), fica oculto
e reentra de cima entre 14,4 s (96 %) e 15 s. A curtida acontece aos 0,55 s. */
@keyframes feed-post-move {
0%, 14.667% { transform: translateY(0) scale(1); z-index: 1; animation-timing-function: cubic-bezier(.55, .06, .68, .19); }
17.333% { transform: translateY(64px) scale(.9); z-index: 1; }
17.4%, 95.9% { transform: translateY(-56px) scale(.9); z-index: 1; }
96% { transform: translateY(-56px) scale(.9); z-index: 10; animation-timing-function: cubic-bezier(.34, 1.45, .64, 1); }
100% { transform: translateY(0) scale(1); z-index: 10; }
}
@keyframes feed-post-fade {
0%, 14.667% { opacity: 1; filter: blur(0px); }
17.333%, 96% { opacity: 0; filter: blur(12px); animation-timing-function: ease-out; }
97.667% { opacity: 1; filter: blur(5px); }
100% { opacity: 1; filter: blur(0px); }
}
@keyframes feed-like-line {
0%, 3.667% { opacity: 1; }
4.667%, 18% { opacity: 0; }
18.1%, 100% { opacity: 1; }
}
@keyframes feed-like-fill {
0%, 3.667% { transform: scale(.2); opacity: 0; animation-timing-function: cubic-bezier(.34, 1.8, .64, 1); }
7%, 18% { transform: scale(1); opacity: 1; }
18.1%, 100% { transform: scale(.2); opacity: 0; }
}
@keyframes feed-count-out {
0%, 4% { transform: translateY(0); opacity: 1; animation-timing-function: ease-in; }
6.333%, 18% { transform: translateY(-100%); opacity: 0; }
18.1%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes feed-count-in {
0%, 4.467% { transform: translateY(100%); opacity: 0; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
7.467%, 18% { transform: translateY(0); opacity: 1; }
18.1%, 100% { transform: translateY(100%); opacity: 0; }
}
/* Movimento reduzido: feed parado e só o primeiro post, já curtido */
@media (prefers-reduced-motion: reduce) {
.feed * { animation: none !important; }
.feed__post:not(:first-child) { visibility: hidden; }
.feed__heart .ico:first-child,
.feed__count > span:first-child { opacity: 0; }
.feed__heart .ico + .ico,
.feed__count > span:last-child { opacity: 1; }
}
.tiles {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Tile horizontal: insígnia à esquerda, texto à direita */
.tile {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-content: start;
column-gap: 20px;
row-gap: 8px;
height: 100%;
padding: clamp(22px, 2.2vw, 28px);
background: var(--bg-raised);
transition: background-color .4s var(--ease);
}
.tile > :not(.tile__ico, .tile__go) { grid-column: 2; }
.tile:hover { background: var(--hover-bg); }
/* Insígnia do serviço (.insignia) só em contorno: paralelogramo do Corte em Dust, sem fill; clareia no hover */
.tile__ico.insignia {
position: relative;
grid-row: 1 / span 3;
clip-path: none;
background: none;
color: var(--dust);
transition: color .3s;
}
.tile__ico.insignia::before {
content: "";
position: absolute;
inset: 0 calc(var(--o) / 2);
border: 1px solid currentColor;
transform: skewX(calc(-1 * var(--corte)));
}
/* Telepsicologia e Seguro (Fortalecer): contorno em retângulo arredondado, sem Corte */
.tile__ico.insignia--care::before { inset: 0; border-radius: var(--raio-fortalecer); transform: none; }
.tile:hover .tile__ico.insignia,
.tile:focus-visible .tile__ico.insignia { color: var(--osso); }
/* Nome do serviço: Academy, ShootPass e Clube assinam com a submarca e a COP.IA com a
marca própria; Telepsicologia e Seguro (Fortalecer) são nomes descritivos, em texto */
.tile__name {
display: flex;
align-items: center;
min-height: 1.6em;
padding-right: 28px;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.375rem;
line-height: 1.02;
text-transform: uppercase;
color: var(--text);
text-wrap: balance;
}
.tile__name .submarca { font-size: 16px; }
.tile__name .copia { height: 1.05em; }
.tile__tag { font-family: var(--font-mono); font-size: .65625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); line-height: 1.5; }
.tile__quote { color: var(--text-2); font-size: .96875rem; line-height: 1.55; text-wrap: pretty; }
.tile__go {
position: absolute;
top: clamp(22px, 2.2vw, 28px);
right: clamp(22px, 2.2vw, 28px);
width: 20px; height: 20px;
color: var(--text-3);
transition: color .3s, transform .4s var(--ease);
}
.tile:hover .tile__go { color: var(--accent-ink); transform: translate(2px, -2px); }
/* -------------------------------------------------------------------------- */
/* 13. Simuladores */
/* -------------------------------------------------------------------------- */
.sim-wrap { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 1100px) { .sim-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.sim-wrap__intro { display: grid; gap: 22px; justify-items: start; }
@media (min-width: 1100px) { .sim-wrap__intro { position: sticky; top: calc(var(--header-h) + 40px); } }
.sim {
position: relative;
background: var(--console);
border: 1px solid var(--line-strong);
}
.sim__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px clamp(20px, 3vw, 32px);
border-bottom: 1px dashed var(--line-strong);
}
.sim__title {
font-family: var(--font-mono);
font-size: .6875rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent-ink);
}
.beacons { display: flex; gap: 6px; }
.beacons span { width: 6px; height: 6px; background: var(--line-strong); }
.beacons span:first-child { background: var(--accent); animation: pulseBeacon 2s infinite; }
.sim__main { display: grid; align-content: start; }
@media (min-width: 1100px) {
.sim--wide { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.sim--wide .sim__result { border-top: 0; border-left: 1px solid var(--line-strong); align-content: center; }
}
.sim__body { padding: clamp(20px, 3vw, 32px); display: grid; gap: 30px; }
.sim__step { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sim__step-label {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.15;
text-transform: uppercase;
margin-bottom: 16px;
}
.sim__fields { display: grid; gap: 14px; }
@media (min-width: 560px) { .sim__fields--2 { grid-template-columns: 1.4fr 1fr; } }
.sim__alt {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: .9375rem;
color: var(--accent-ink);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
justify-self: start;
}
.sim__alt:hover { color: var(--accent-ink-hover); }
.sim__alt .ico { width: 16px; height: 16px; }
/* Campos (formulários) */
.field { display: grid; gap: 8px; min-width: 0; }
.field__label {
font-family: var(--font-mono);
font-size: .65625rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-3);
}
.input,
.select {
width: 100%;
height: 52px;
padding: 0 16px;
background: var(--field-bg);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
color: var(--text);
font-size: 1rem;
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input::placeholder { color: var(--text-3); }
.input:hover, .select:hover { border-color: var(--line-hover); }
/* Foco: borda em --foco (accent-ink) e o halo âmbar */
.input:focus, .select:focus {
outline: none;
border-color: var(--foco);
box-shadow: var(--halo-campo);
}
.select {
appearance: none;
-webkit-appearance: none;
padding-right: 44px;
background-image: var(--select-arrow);
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}
.select option { background: var(--field-bg); color: var(--text); }
.input[aria-invalid="true"],
.input:user-invalid,
.select:user-invalid { border-color: var(--sinal-vermelho); }
.money {
display: flex;
align-items: stretch;
background: var(--field-bg);
border: 1px solid var(--line-strong);
transition: border-color .2s, box-shadow .2s;
}
.money:focus-within { border-color: var(--foco); box-shadow: var(--halo-campo); }
.money__prefix {
display: grid;
place-items: center;
padding: 0 16px;
border-right: 1px solid var(--line-strong);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
color: var(--accent-ink);
}
.money .input {
border: 0;
height: 60px;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.75rem;
letter-spacing: .02em;
box-shadow: none;
background: transparent;
}
.money--age .input { padding-left: 16px; }
.input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.input[type="number"]::-webkit-inner-spin-button,
.input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Range */
.range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 28px;
background: transparent;
cursor: pointer;
--p: 50%;
}
.range::-webkit-slider-runnable-track {
height: 2px;
background: linear-gradient(90deg, var(--accent) var(--p), var(--line-strong) var(--p));
}
.range::-moz-range-track { height: 2px; background: var(--line-strong); }
.range::-moz-range-progress { height: 2px; background: var(--accent); }
.range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: -9px;
background: var(--accent);
border: 3px solid var(--bg);
box-shadow: 0 0 0 1px var(--accent);
}
.range::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--accent);
border: 3px solid var(--bg);
border-radius: 0;
box-shadow: 0 0 0 1px var(--accent);
}
.range:focus-visible { outline-offset: 6px; }
.range-scale {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .1em;
color: var(--text-3);
}
/* Seletor segmentado (prazo, capital, sim/não): blocos com as laterais no Corte, como os
botões (a forma vem da seção 5); a opção marcada ganha o preenchimento accent */
.seg {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
@media (min-width: 560px) { .seg--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.seg--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .seg--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.seg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
--forma-altura: 46px;
--forma-fundo: var(--field-bg);
--forma-borda: var(--line-strong);
display: grid;
place-items: center;
min-height: var(--forma-altura);
padding: 6px 8px;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: .04em;
text-align: center;
color: var(--text-2);
cursor: pointer;
transition: color .2s;
}
.seg label:hover { --forma-borda: var(--accent); color: var(--text); }
.seg input:checked + label { --forma-fundo: var(--accent); --forma-borda: var(--accent); color: var(--on-accent); }
/* Resultado */
.sim__result {
display: grid;
gap: 22px;
padding: clamp(20px, 3vw, 32px);
border-top: 1px solid var(--line-strong);
background: var(--console);
}
.sim__amount-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 14px;
font-size: 1.0625rem;
color: var(--text-2);
}
.sim__amount-line .lbl {
width: 100%;
font-family: var(--font-mono);
font-size: .6875rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-3);
}
/* Valores em Barlow Condensed itálico, que acompanha a inclinação do símbolo */
.sim__amount {
font-family: var(--font-display);
font-style: italic;
font-weight: 800;
font-size: clamp(2.75rem, 6vw, 4rem);
line-height: 1;
color: var(--accent-ink);
font-variant-numeric: tabular-nums;
}
/* Ficha Clara: toda oferta de crédito termina nesta ficha, com cara de etiqueta
técnica. A parcela é o único destaque em âmbar; taxa e CET sempre mensal e
anual lado a lado; o total fecha a conta (parcela × prazo). */
.ficha {
--text: var(--asphalt);
--text-2: #333333;
--text-3: #5F5F5F;
--line: var(--ficha-linha);
--accent-ink: #000000;
background: var(--branco);
color: var(--text);
border: 2px solid var(--preto-operacao);
font-variant-numeric: tabular-nums;
}
.ficha__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 12px;
padding: 10px 16px;
background: var(--preto-operacao);
}
.ficha__brand {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.125rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ambar-vigilia);
}
.ficha__prod {
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ficha-produto);
}
.ficha__rows { margin: 0; }
.ficha__row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 16px;
padding: 11px 16px;
border-bottom: 1px solid var(--line);
}
.ficha__row:last-child { border-bottom: 0; }
.ficha__row dt {
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-3);
}
.ficha__row dd {
margin-left: auto;
font-family: var(--font-mono);
font-size: .875rem;
text-align: right;
color: var(--text);
}
.ficha__row dd > span + span::before { content: "·"; margin-inline: .5em; color: var(--text-3); }
.ficha__row--key { padding-block: 14px; box-shadow: inset 6px 0 0 var(--ambar-vigilia); }
.ficha__row--key dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 10px; }
.ficha__row--key dd > span + span::before { content: none; }
.ficha .sim__amount { font-size: clamp(2.25rem, 5vw, 3.25rem); color: var(--text); }
.ficha__n { font-size: .75rem; color: var(--text-2); }
.ficha__row--total dd { font-weight: 600; }
.legal-note {
font-size: .8125rem;
line-height: 1.6;
color: var(--text-3);
padding-left: 14px;
border-left: 1px solid var(--line-strong);
}
.sim-card {
display: grid;
gap: 20px;
align-content: start;
padding: clamp(24px, 3vw, 36px);
border: 1px solid var(--line);
background: var(--surface);
}
.receipt {
display: grid;
gap: 10px;
padding: 18px;
border: 1px dashed var(--line-strong);
background: var(--surface-2);
}
.receipt__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.receipt__row i { display: block; height: 8px; background: var(--line-strong); }
.receipt__row i.w1 { width: 46%; } .receipt__row i.w2 { width: 22%; } .receipt__row i.w3 { width: 38%; } .receipt__row i.w4 { width: 16%; }
.receipt__row--total { padding-top: 12px; border-top: 1px solid var(--line-strong); }
.receipt__row--total i { background: var(--accent); height: 10px; }
/* -------------------------------------------------------------------------- */
/* 14. CTA band (amarela) */
/* -------------------------------------------------------------------------- */
.cta-band {
position: relative;
background: var(--ambar-vigilia);
color: var(--preto-operacao);
overflow: hidden;
isolation: isolate;
}
.cta-band__inner {
display: grid;
gap: clamp(40px, 5vw, 64px);
padding-block: clamp(64px, 8vw, 112px);
}
/* Faixa de chamada (DS): título, texto e a ação à esquerda, foto no Corte à direita (rosto
sempre no quadro) e, embaixo, o passo a passo. Uma por página: é ela que consome os 10%
de âmbar. No escopo âmbar o primário fica preto com texto âmbar. */
.cta-band__top { display: grid; gap: 28px; }
.cta-band__copy { display: grid; gap: 18px; justify-items: start; align-content: center; }
.cta-band__copy .btn { margin-top: 6px; }
.cta-band__photo { --ar: 1.3333; --pos: 50% 45%; }
@media (min-width: 900px) {
.cta-band__top { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
}
.cta-band .lead { color: var(--text-2); font-weight: 500; }
.cta-band__side { display: grid; gap: 28px; }
.steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
counter-reset: step;
}
.steps li {
counter-increment: step;
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--line);
font-weight: 500;
line-height: 1.4;
color: var(--text);
text-wrap: pretty;
}
/* Passo a passo em duas colunas (faixa amarela da home) */
@media (min-width: 720px) {
.steps--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
}
.steps li::before {
content: counter(step, decimal-leading-zero);
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--radius);
background: var(--accent); /* preto na faixa âmbar, âmbar no claro e no escuro */
color: var(--on-accent);
font-family: var(--font-mono);
font-size: .75rem;
font-weight: 500;
}
/* Passo a passo em fundo escuro */
.flow {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 720px) {
.flow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flow li {
position: relative;
display: grid;
align-content: start;
gap: 14px;
padding: 24px 22px 26px;
background: var(--bg);
color: var(--text-2);
line-height: 1.5;
text-wrap: pretty;
}
.section--raised .flow li { background: var(--bg-raised); }
.flow__head { display: flex; align-items: center; }
.flow__head .ico { width: 24px; height: 24px; color: var(--text); stroke-width: 1.5; }
/* -------------------------------------------------------------------------- */
/* 15. Quem somos · Propósito · Tese */
/* -------------------------------------------------------------------------- */
.prose-cols { display: grid; gap: 24px; }
@media (min-width: 900px) { .prose-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
.prose-cols p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
/* Manifesto direto no fundo da seção, sem caixa */
.manifesto {
display: grid;
align-content: center;
gap: 24px;
}
.manifesto__label {
font-family: var(--font-mono);
font-size: .6875rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--text-3);
}
.manifesto__text {
font-size: clamp(1.3125rem, 2.3vw, 1.9375rem);
font-weight: 300;
line-height: 1.45;
color: var(--text-2);
text-wrap: pretty;
}
.manifesto__text strong { font-weight: 600; color: var(--text); }
.manifesto__text .hl { font-weight: 600; }
/* Manifesto com foto ao lado: no desktop a foto acompanha a altura do texto */
.manifesto-wrap { display: grid; gap: clamp(20px, 3vw, 32px); }
@media (min-width: 1024px) {
.manifesto-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.manifesto-wrap .photo { aspect-ratio: auto; }
}
.values {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .values { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.value { display: grid; align-content: start; gap: 12px; padding: 28px 24px 30px; background: var(--bg); }
.value .ico { width: 26px; height: 26px; color: var(--accent-ink); stroke-width: 1.5; margin-bottom: 14px; }
.value h3,
.value h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
line-height: 1;
text-transform: uppercase;
}
.value p { color: var(--text-2); font-size: .96875rem; line-height: 1.55; text-wrap: pretty; }
/* Os quatro pilares (DS: Pilares): Treinar, Equipar, Fortalecer e Pertencer, sempre os
quatro e nesta ordem, numa grade de filetes. O filete âmbar do topo cresce no hover. */
.pillars {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pillar {
position: relative;
display: grid;
align-content: start;
gap: 14px;
padding: 32px 26px 34px;
background: var(--bg-raised);
overflow: hidden;
}
.pillar::before {
content: "";
position: absolute;
left: 0; top: 0;
height: 2px; width: 100%;
background: var(--accent);
transform: scaleX(.12);
transform-origin: left;
transition: transform .6s var(--ease);
}
.pillar:hover::before { transform: scaleX(1); }
.pillar .ico { width: 34px; height: 34px; color: var(--accent-ink); stroke-width: 1.4; margin: 0 0 8px; }
.pillar__verb {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3vw, 2.625rem);
line-height: .9;
text-transform: uppercase;
}
.pillar p { color: var(--text-2); font-size: .96875rem; line-height: 1.55; text-wrap: pretty; }
/* Diagrama de 3 pontas */
.tri { position: relative; margin-top: 8px; }
.tri__svg { display: none; }
.tri__nodes { list-style: none; margin: 0; padding: 0 0 0 30px; display: grid; gap: 28px; position: relative; }
.tri__nodes::before {
content: "";
position: absolute;
left: 7px; top: 8px; bottom: 8px;
border-left: 1px dashed rgba(255, 190, 3, .55);
}
.tri__node { position: relative; display: grid; gap: 8px; }
.tri__node::before {
content: "";
position: absolute;
left: -30px; top: 4px;
width: 15px; height: 15px;
background: var(--accent);
}
.tri__label {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.75rem;
line-height: 1;
text-transform: uppercase;
}
.tri__desc { color: var(--text-2); max-width: 34ch; text-wrap: pretty; }
.tri__center { display: none; }
@media (min-width: 960px) {
.tri { aspect-ratio: 1000 / 600; width: 65%; margin-inline: auto; }
.tri__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tri__nodes { position: absolute; inset: 0; padding: 0; display: block; }
.tri__nodes::before { display: none; }
.tri__node { position: absolute; width: 30%; }
.tri__node::before { display: none; }
.tri__node--a { left: 50%; top: 0; transform: translateX(-50%); text-align: center; justify-items: center; }
.tri__node--b { left: 0; bottom: 0; }
.tri__node--c { right: 0; bottom: 0; text-align: right; justify-items: end; }
.tri__center {
position: absolute;
left: 50%; top: 61%;
transform: translate(-50%, -50%);
display: grid;
justify-items: center;
gap: 10px;
width: 22%;
}
.tri__center .logo { --logo-largura: 76%; }
}
.tri__line { stroke: rgba(255, 190, 3, .55); stroke-width: 1.5; stroke-dasharray: 6 8; fill: none; animation: dashFlow 2.4s linear infinite; }
.tri__ring { fill: none; stroke: rgba(255, 190, 3, .25); stroke-width: 1; }
.tri__dot { fill: var(--accent); }
.tri__pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ringPulse 2.4s var(--ease) infinite; }
.result-quote {
margin-top: clamp(40px, 5vw, 64px);
display: grid;
gap: 16px;
padding: clamp(24px, 4vw, 44px);
border: 1px solid rgba(255, 190, 3, .35);
border-left: 4px solid var(--accent);
text-align: center;
}
.result-quote p {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.375rem, 2.6vw, 2.25rem);
line-height: 1.1;
text-transform: uppercase;
text-wrap: balance;
}
/* Bloco de transparência */
.doc-panel {
display: grid;
gap: 28px;
padding: clamp(24px, 4vw, 48px);
border: 1px solid var(--line-strong);
background: var(--surface);
}
@media (min-width: 1024px) { .doc-panel { grid-template-columns: 72px 1fr; column-gap: 36px; } }
.doc-panel__ico {
display: grid;
place-items: center;
width: 72px;
height: 72px;
border: 1px solid rgba(255, 190, 3, .4);
color: var(--accent-ink);
}
.doc-panel__ico .ico { width: 30px; height: 30px; stroke-width: 1.5; }
.doc-panel__content { display: grid; gap: 20px; }
.legal-data {
display: grid;
gap: 8px;
padding-top: 20px;
border-top: 1px dashed var(--line-strong);
}
.legal-data__label {
font-family: var(--font-mono);
font-size: .65625rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-3);
}
.legal-data p { color: var(--text-2); line-height: 2; }
/* -------------------------------------------------------------------------- */
/* 16. Soluções / Comunidade / Produtos (blocos de página) */
/* -------------------------------------------------------------------------- */
.block { display: grid; gap: clamp(32px, 4vw, 56px); }
.block__head { display: grid; gap: 18px; justify-items: start; max-width: 860px; }
/* Cabeçalho do bloco com foto ao lado */
.block__lead { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1024px) { .block__lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.block__kicker {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: .6875rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent-ink);
}
.block__kicker .ico { width: 18px; height: 18px; }
h2.block__kicker {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
line-height: 1.15;
letter-spacing: .12em;
}
h2.block__kicker .ico { width: 24px; height: 24px; }
h2.block__kicker .insignia .ico { width: 17px; height: 17px; }
/* Frentes da comunidade com assinatura própria (submarcas Academy, ShootPass e Clube) e a
marca própria da COP.IA */
.block__kicker .submarca { font-size: clamp(15px, 1.5vw, 18px); }
.block__kicker .copia { height: clamp(18px, 1.8vw, 22px); }
.lead--statement {
max-width: 1000px;
font-size: clamp(1.25rem, 2vw, 1.625rem);
line-height: 1.5;
color: var(--text);
}
.block__name {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
line-height: 1.15;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-2);
}
.block__quote {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 4.4vw, 3.5rem);
line-height: .96;
text-transform: uppercase;
text-wrap: balance;
}
.block__body { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 1024px) { .block__body--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.block__text { display: grid; gap: 22px; align-content: start; }
.block__text > p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
.block__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.icon-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 640px) { .icon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.icon-list li {
display: grid;
grid-template-columns: 40px 1fr;
gap: 16px;
align-items: center;
padding: 18px 20px;
background: var(--bg);
color: var(--text);
line-height: 1.4;
text-wrap: pretty;
}
.section--raised .icon-list li { background: var(--bg-raised); }
.icon-list .ico-box {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-strong);
color: var(--accent-ink);
}
.icon-list .ico-box .ico { width: 20px; height: 20px; }
.icon-list li.is-wide { grid-column: 1 / -1; }
.list-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 18px;
}
.callout {
display: grid;
gap: 18px;
align-items: center;
padding: 24px clamp(20px, 3vw, 32px);
border: 1px dashed rgba(255, 190, 3, .45);
background: rgba(255, 190, 3, .04);
}
@media (min-width: 900px) { .callout { grid-template-columns: 1fr auto; gap: 32px; } }
.callout p { color: var(--text); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.why {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 640px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .why { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.why li { display: grid; align-content: start; gap: 12px; padding: 28px 24px; background: var(--bg-raised); }
.why .ico { width: 28px; height: 28px; color: var(--accent-ink); stroke-width: 1.5; margin-bottom: 10px; }
.why h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
line-height: 1;
text-transform: uppercase;
}
.why p { color: var(--text-2); font-size: .96875rem; line-height: 1.55; text-wrap: pretty; }
/* Trilhas da Academy */
.tracks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 720px) { .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tracks li {
padding: 18px 20px;
background: var(--bg);
line-height: 1.45;
text-wrap: pretty;
}
.section--raised .tracks li { background: var(--bg-raised); }
.tracks li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* COP.IA — console */
.console {
position: relative;
border: 1px solid var(--line-strong);
background: #040404;
font-family: var(--font-mono);
}
.console__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid var(--line-strong);
font-size: .6875rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent-ink);
}
.console__title { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.console__live { display: inline-flex; align-items: center; gap: 10px; color: var(--text-3); }
.console__live::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--sinal-verde);
animation: pulseGreen 2s infinite;
}
.console__list { list-style: none; margin: 0; padding: 18px; display: grid; gap: 4px; }
.console__list li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
padding: 10px 6px;
font-size: .875rem;
line-height: 1.55;
color: var(--text-2);
border-bottom: 1px dashed #1A1A1A;
}
.console__list li::before { content: "›"; color: var(--accent-ink); }
.console__cursor {
display: block;
margin: 0 24px 20px;
width: 10px; height: 18px;
background: var(--accent);
animation: blink 1.1s steps(1) infinite;
}
/* ShootPass — passe */
.pass {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
padding: 26px;
border: 1px solid var(--line-strong);
background: #070707;
overflow: hidden;
}
.pass__name {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.25rem, 4vw, 3.25rem);
line-height: .9;
text-transform: uppercase;
}
.pass__name span { color: var(--accent-ink); }
.pass__qr { width: 104px; height: 104px; padding: 8px; background: var(--branco); }
.pass__qr svg { width: 100%; height: 100%; }
/* Telepsicologia */
.secret {
display: grid;
grid-template-columns: 48px 1fr;
gap: 18px;
padding: 24px;
border: 1px solid var(--line-strong);
background: var(--surface);
}
.secret .ico { width: 26px; height: 26px; color: var(--accent-ink); stroke-width: 1.5; }
.secret__label {
font-family: var(--font-mono);
font-size: .65625rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 8px;
}
.secret p { color: var(--text); line-height: 1.6; text-wrap: pretty; }
/* Aviso de crise — fixo enquanto a seção de Telepsicologia está na tela */
.crisis {
position: sticky;
bottom: 16px;
z-index: 30;
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
align-items: center;
margin-top: clamp(32px, 4vw, 48px);
padding: 16px 20px;
background: var(--branco);
color: var(--preto-operacao);
border: 2px solid var(--preto-operacao);
box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .55);
}
.crisis .ico { width: 28px; height: 28px; color: var(--preto-operacao); stroke-width: 2; }
.crisis p { font-size: .96875rem; font-weight: 500; line-height: 1.45; text-wrap: pretty; }
.crisis a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* Produtos — ledger */
.ledger { display: grid; }
.ledger__row {
display: grid;
gap: 28px;
padding-block: clamp(40px, 5vw, 64px);
border-top: 1px solid var(--line);
}
.ledger__row:last-child { border-bottom: 1px solid var(--line); }
/* Título e informações à esquerda, foto à direita na altura do conteúdo */
.ledger__main { display: grid; gap: 28px; align-content: start; }
@media (min-width: 1024px) {
.ledger__row { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); }
.ledger__photo { aspect-ratio: auto; min-height: 320px; }
}
.ledger__head { display: grid; gap: 18px; align-content: start; }
.ledger__meta { display: flex; align-items: center; gap: 14px; }
.ledger__ico {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--line-strong);
color: var(--accent-ink);
}
.ledger__ico .ico { width: 22px; height: 22px; }
.ledger__name {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.0625rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-2);
}
.ledger__quote {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.875rem, 3.4vw, 2.875rem);
line-height: .98;
text-transform: uppercase;
text-wrap: balance;
}
.ledger__body { display: grid; gap: 24px; align-content: start; }
.ledger__body > p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
/* -------------------------------------------------------------------------- */
/* 17. Abra sua conta */
/* -------------------------------------------------------------------------- */
.signup { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 1100px) { .signup { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.signup__intro { display: grid; gap: 22px; justify-items: start; }
.form {
display: grid;
gap: 22px;
padding: clamp(22px, 3.4vw, 40px);
background: var(--surface);
border: 1px solid var(--line-strong);
}
.form__grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form__grid .is-wide { grid-column: 1 / -1; } }
.check {
position: relative;
display: grid;
grid-template-columns: 22px 1fr;
gap: 12px;
align-items: start;
font-size: .9375rem;
line-height: 1.5;
color: var(--text-2);
cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.check__box {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border: 1px solid var(--line-hover);
background: var(--field-bg);
transition: background-color .2s, border-color .2s;
}
.check__box .ico { width: 14px; height: 14px; stroke-width: 3; color: var(--on-accent); opacity: 0; }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box .ico { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--foco); outline-offset: 2px; }
.check input:user-invalid + .check__box { border-color: var(--sinal-vermelho); }
.check a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.form__micro { display: flex; gap: 10px; align-items: start; }
.form__micro .ico { width: 16px; height: 16px; color: var(--accent-ink); margin-top: 3px; }
.success {
display: grid;
gap: 18px;
justify-items: start;
padding: clamp(28px, 4vw, 48px);
background: var(--surface);
border: 1px solid var(--accent);
}
.success[hidden] { display: none; }
.success .ico { width: 44px; height: 44px; color: var(--accent-ink); stroke-width: 1.5; }
.success p {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.5rem, 3vw, 2.125rem);
line-height: 1.08;
text-transform: uppercase;
text-wrap: balance;
}
.app-badges { display: flex; flex-wrap: wrap; gap: 10px; }
/* -------------------------------------------------------------------------- */
/* 18. Conteúdo */
/* -------------------------------------------------------------------------- */
.cats {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
@media (min-width: 640px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cat {
display: grid;
align-content: start;
gap: 10px;
width: 100%;
height: 100%;
padding: 22px 20px;
text-align: left;
border: 1px solid var(--line);
background: var(--surface);
transition: border-color .25s, background-color .25s;
}
.cat .ico { width: 24px; height: 24px; color: var(--accent-ink); stroke-width: 1.6; margin-bottom: 6px; }
.cat__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.375rem;
line-height: 1;
text-transform: uppercase;
}
.cat__desc { color: var(--text-2); font-size: .90625rem; line-height: 1.5; }
.cat:hover { border-color: var(--line-hover); }
.cat[aria-pressed="true"] { border-color: var(--accent); background: rgba(255, 190, 3, .14); }
.posts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 720px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .posts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.post {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 240px;
padding: 26px 24px;
background: var(--bg);
}
.post[hidden] { display: none; }
.post__img {
flex: none;
width: calc(100% + 48px);
height: auto;
max-width: none;
margin: -26px -24px 4px;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: var(--pos, 50% 50%);
background: var(--surface-2);
}
.post__cat {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent-ink);
}
.post__cat .ico { width: 14px; height: 14px; }
.post h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.4375rem;
line-height: 1.04;
text-transform: uppercase;
text-wrap: balance;
}
.post__bar { margin-top: auto; height: 2px; background: var(--line-strong); position: relative; }
.post__bar::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 22%; background: var(--accent); transition: width .6s var(--ease); }
.post:hover .post__bar::after { width: 100%; }
.newsletter {
display: grid;
gap: 22px;
align-items: center;
padding: clamp(24px, 4vw, 44px);
border: 1px solid var(--line-strong);
background: var(--surface);
}
@media (min-width: 1024px) { .newsletter { grid-template-columns: 1fr 1fr; gap: 48px; } }
.newsletter__label { font-family: var(--font-mono); font-size: .65625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; }
.newsletter__text {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.5rem, 2.6vw, 2.125rem);
line-height: 1.05;
text-transform: uppercase;
text-wrap: balance;
}
.newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter__form .input { flex: 1 1 220px; }
/* -------------------------------------------------------------------------- */
/* 19. Parceiros */
/* -------------------------------------------------------------------------- */
.logo-groups {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 640px) { .logo-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .logo-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-group { display: grid; align-content: start; gap: 18px; padding: 24px 22px 26px; background: var(--bg); }
.logo-group__head { display: flex; align-items: center; gap: 12px; }
.logo-group__head .ico { width: 20px; height: 20px; color: var(--accent-ink); }
.logo-group h2,
.logo-group h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
line-height: 1.1;
letter-spacing: .06em;
text-transform: uppercase;
}
.logo-slot {
display: grid;
place-items: center;
min-height: 96px;
padding: 14px;
border: 1px dashed var(--line-strong);
background: repeating-linear-gradient(135deg, transparent 0 10px, var(--hatch) 10px 20px);
line-height: 1.5;
text-align: center;
}
/* -------------------------------------------------------------------------- */
/* 20. Documentos (privacidade, termos, educação, ética) */
/* -------------------------------------------------------------------------- */
.doc { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 1024px) { .doc { grid-template-columns: 280px minmax(0, 1fr); } }
.toc {
display: none;
position: sticky;
top: calc(var(--header-h) + 32px);
max-height: calc(100vh - var(--header-h) - 64px);
overflow-y: auto;
padding-right: 12px;
}
@media (min-width: 1024px) { .toc { display: block; } }
.toc__title {
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 14px;
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--line); }
.toc a {
display: block;
padding: 7px 0 7px 16px;
margin-left: -1px;
border-left: 1px solid transparent;
font-size: .875rem;
line-height: 1.4;
color: var(--text-3);
transition: color .2s, border-color .2s;
}
.toc a:hover { color: var(--text); }
.toc a.is-active { color: var(--accent-ink); border-left-color: var(--accent); }
.prose { max-width: 74ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
margin-top: 2.6em;
padding-top: 1.4em;
border-top: 1px solid var(--line);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
line-height: 1.1;
text-transform: uppercase;
text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
margin-top: 2em;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.15;
text-transform: uppercase;
}
.prose p, .prose li { color: var(--text-2); font-size: 1.03125rem; line-height: 1.75; text-wrap: pretty; }
.prose ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before {
content: "";
position: absolute;
left: 2px; top: .7em;
width: 7px; height: 7px;
background: var(--accent);
transform: skewX(calc(-1 * var(--corte)));
}
.prose strong { color: var(--text); }
.prose .lbl {
display: block;
margin-bottom: 6px;
font-family: var(--font-mono);
font-size: .65625rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-3);
}
.prose .note-box {
padding: 20px 22px;
border: 1px solid var(--line-strong);
background: var(--surface);
}
.updated {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: .6875rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-3);
}
.updated .ico { width: 15px; height: 15px; color: var(--accent-ink); }
.terms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.prose .terms-list { gap: 1px; }
.prose .terms-list li { padding: 14px 18px; }
.prose .terms-list li::before { content: none; }
.terms-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--bg); }
.terms-list a { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.terms-list a .ico { width: 16px; height: 16px; color: var(--accent-ink); }
.terms-list a:hover { color: var(--accent-ink); }
/* Educação financeira */
.questions { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: q; }
.questions li {
counter-increment: q;
display: grid;
grid-template-columns: clamp(56px, 8vw, 96px) 1fr;
gap: 20px;
align-items: baseline;
padding: 22px 0;
border-bottom: 1px solid var(--line);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.375rem, 2.6vw, 2.125rem);
line-height: 1.08;
text-transform: uppercase;
text-wrap: balance;
}
.questions li:first-child { border-top: 1px solid var(--line); }
.questions li::before {
content: counter(q, decimal-leading-zero);
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: .8;
color: var(--accent-ink);
}
.glossary {
display: grid;
gap: 1px;
margin: 0;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 720px) { .glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
/* 5 termos: 3 na primeira linha, 2 na segunda — sem célula vazia */
.glossary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.glossary > div { grid-column: span 2; }
.glossary > div:nth-last-child(-n+2):nth-child(3n+1),
.glossary > div:nth-last-child(-n+2):nth-child(3n+2) { grid-column: span 3; }
}
.glossary > div { display: grid; align-content: start; gap: 12px; padding: 26px 24px; background: var(--bg-raised); }
.glossary dt {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.375rem;
line-height: 1.05;
text-transform: uppercase;
color: var(--accent-ink);
}
.glossary dd { color: var(--text-2); line-height: 1.6; text-wrap: pretty; }
.cta-pair { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 900px) { .cta-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cta-pair a {
display: grid;
grid-template-columns: 48px 1fr 24px;
gap: 18px;
align-items: center;
padding: 26px 24px;
background: var(--bg);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.15;
text-transform: uppercase;
transition: background-color .3s, color .3s;
}
.cta-pair a:hover { background: var(--hover-bg); color: var(--accent-ink); }
.cta-pair .ico-box {
display: grid;
place-items: center;
width: 48px;
height: 48px;
background: var(--accent);
color: var(--on-accent);
}
.cta-pair .ico-box .ico { width: 22px; height: 22px; }
.cta-pair a > .ico { width: 20px; height: 20px; color: var(--accent-ink); }
/* -------------------------------------------------------------------------- */
/* 21. Rodapé */
/* -------------------------------------------------------------------------- */
.footer {
position: relative;
overflow: hidden;
border-top: 1px solid var(--line);
background: var(--preto-operacao);
}
.footer__grid {
display: grid;
gap: 40px 32px;
padding-top: clamp(56px, 7vw, 96px);
}
.footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__brand, #atendimento { grid-column: 1 / -1; }
@media (min-width: 640px) { #atendimento { grid-column: auto; } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); } }
/* Marca no rodapé: logotipo central, a tagline no itálico do Corte (sempre com ponto
final) e as quatro insígnias dos pilares, em contorno */
.footer__brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
@media (min-width: 1100px) { .footer__brand { grid-column: auto; } }
.footer__brand .logo { --logo-largura: 150px; }
.footer__tagline {
font-family: var(--font-display);
font-style: italic;
font-weight: 600;
font-size: 1.25rem;
line-height: .98;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--text);
}
.footer .insignia--outline { color: var(--osso); }
.footer__col h2 {
font-family: var(--font-mono);
font-size: .65625rem;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent-ink);
margin-bottom: 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer__col li { font-size: .90625rem; line-height: 1.45; color: var(--text-2); }
.footer__col a { color: var(--text-2); transition: color .2s; }
.footer__col a:hover { color: var(--accent-ink); }
.footer__col .lbl { color: var(--text-3); }
.footer__band {
display: grid;
gap: 28px;
margin-top: clamp(40px, 5vw, 64px);
padding-block: 28px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .footer__band { grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: center; } }
.footer__band-group { display: grid; gap: 12px; }
.footer__band-label {
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-3);
}
.socials { display: flex; gap: 8px; }
.socials a {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid var(--line-strong);
color: var(--text-2);
transition: color .2s, border-color .2s;
}
.socials a:hover { color: var(--accent-ink); border-color: var(--accent); }
.socials .ico { width: 18px; height: 18px; }
.seals { display: flex; flex-wrap: wrap; gap: 8px; }
.seal {
display: block;
width: 92px;
height: 42px;
border: 1px dashed var(--line-strong);
background: repeating-linear-gradient(135deg, transparent 0 8px, var(--hatch) 8px 16px);
}
.footer__legal {
padding-block: 28px 40px;
font-size: .78125rem;
line-height: 1.75;
color: var(--text-3);
max-width: 1100px;
text-wrap: pretty;
}
.footer__legal p + p { margin-top: .6em; }
/* -------------------------------------------------------------------------- */
/* 21b. Registro Fortalecer (componentes) */
/* Mesma marca, outra temperatura: frase normal em Barlow SemiBold, cantos de */
/* 6px, sem Corte, stencil, cantoneiras ou números de impacto. */
/* -------------------------------------------------------------------------- */
:is(.section--care, .section--care-dark) :is(.title-xl, .title-lg, .title-md, .title-sm, .block__quote) {
font-family: var(--font-sans);
font-weight: 600;
line-height: 1.12;
letter-spacing: -.015em;
text-transform: none;
}
:is(.section--care, .section--care-dark) .title-xl { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.04; }
:is(.section--care, .section--care-dark) .title-lg { font-size: clamp(1.875rem, 3.8vw, 3rem); }
:is(.section--care, .section--care-dark) .title-md { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
:is(.section--care, .section--care-dark) .block__quote { font-size: clamp(1.75rem, 3.4vw, 2.625rem); }
:is(.section--care, .section--care-dark) :is(.block__kicker, .list-title, .subhead, .glossary dt, .cta-pair a, .questions li) {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
:is(.section--care, .section--care-dark) h2.block__kicker { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--text); }
:is(.section--care, .section--care-dark) .questions li { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.25; }
:is(.section--care, .section--care-dark) .tag {
padding: 0;
font-family: var(--font-sans);
font-weight: 600;
font-size: 1rem;
letter-spacing: 0;
text-transform: none;
color: var(--accent-ink);
}
:is(.section--care, .section--care-dark) .tag::before { content: none; }
:is(.section--care, .section--care-dark) .btn {
font-family: var(--font-sans);
font-size: 1rem;
letter-spacing: 0;
text-transform: none;
}
:is(.section--care, .section--care-dark) .bullets li::before { transform: none; border-radius: 2px; }
:is(.section--care, .section--care-dark) .cta-line > span { font-family: var(--font-sans); font-weight: 600; text-transform: none; }
:is(.section--care, .section--care-dark) :is(.secret, .flow, .icon-list, .glossary, .cta-pair, .callout) { border-radius: var(--radius); overflow: hidden; }
:is(.section--care, .section--care-dark) :is(.icon-list .ico-box, .cta-pair .ico-box) { border-radius: calc(var(--radius) - 2px); }
:is(.section--care, .section--care-dark) .corners::after { content: none; }
:is(.section--care, .section--care-dark) .stencil { -webkit-text-stroke: 0; color: inherit; }
/* -------------------------------------------------------------------------- */
/* 22. Movimento */
/* -------------------------------------------------------------------------- */
@keyframes fadeSlideIn {
0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes pulseBeacon {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 190, 3, .7); }
50% { box-shadow: 0 0 0 8px rgba(255, 190, 3, 0); }
}
@keyframes pulseGreen {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, .6); }
50% { box-shadow: 0 0 0 7px rgba(0, 200, 83, 0); }
}
@keyframes dashFlow { to { stroke-dashoffset: -28; } }
@keyframes ringPulse {
0% { transform: scale(.6); opacity: .9; }
100% { transform: scale(2.4); opacity: 0; }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes plateFloatA {
0%, 100% { translate: 0 0; }
50% { translate: 0 -10px; }
}
@keyframes plateFloatB {
0%, 100% { translate: 0 0; }
50% { translate: 0 8px; }
}
@keyframes plateLightDrift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(12%, 4%); }
}
@keyframes plateLightBreathe {
from { scale: 1; }
to { scale: 1.08; }
}
.js [data-anim] { animation: fadeSlideIn 1s var(--ease) both; }
.js [data-anim="1"] { animation-delay: .1s; }
.js [data-anim="2"] { animation-delay: .22s; }
.js [data-anim="3"] { animation-delay: .34s; }
.js [data-anim="4"] { animation-delay: .44s; }
.js [data-anim="5"] { animation-delay: .54s; }
.js [data-anim="6"] { animation-delay: .7s; }
.js [data-reveal] {
opacity: 0;
transform: translateY(26px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.js [data-reveal] { opacity: 1; transform: none; }
}
/* Alto contraste: remove texturas decorativas e reforça links */
html.hc .hero__noise,
html.hc .hero-art__glow,
html.hc .plate::before,
html.hc .plate::after { display: none; }
html.hc .stencil { -webkit-text-stroke: 0; color: var(--accent-ink); }
html.hc .body-text a,
html.hc .prose a,
html.hc .footer__col a { text-decoration: underline; text-underline-offset: 3px; }
html.hc .tile, html.hc .pain, html.hc .data, html.hc .value, html.hc .pillar,
html.hc .why li, html.hc .post, html.hc .logo-group, html.hc .glossary > div { background: var(--surface); }
/* -------------------------------------------------------------------------- */
/* 23. Impressão (documentos legais) */
/* -------------------------------------------------------------------------- */
@media print {
.topbar, .navbar, .footer, .subnav, .toc, .emblem, .skip-link, .search, .crisis { display: none !important; }
body { background: #fff; color: #000; }
.page-hero { border: 0; padding: 0 0 24px; }
.title-xl, .title-lg, .page-hero__title { color: #000; font-size: 28pt; }
.prose p, .prose li, .lead { color: #000; }
.prose h2 { color: #000; border-color: #ccc; }
.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}
/* -------------------------------------------------------------------------- */
/* 24. Utilitários (por último, para prevalecer) */
/* -------------------------------------------------------------------------- */
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: clamp(40px, 5vw, 56px); }
.mt-xl { margin-top: clamp(56px, 7vw, 96px); }
.mb-m { margin-bottom: 28px; }