/* ============================================================
INEV — Instituto de Negócios e Empresas Validadas
Sistema de design · base híbrida claro/escuro · v2
============================================================ */
/* --- Tokens -------------------------------------------------- */
:root {
--ink: #0E1519;
--ink-2: #16202A;
--ink-3: #1E2A34;
--muted: #5D6B74;
--muted-2: #626E77;
--paper: #FAF7F2;
--paper-2: #F2ECE2;
--paper-3: #EAE2D5;
--line: #DDD5C8;
--line-2: #C9BEAC;
/* claros sobre escuro */
--sobre-ink: #E8EDF0;
--sobre-ink-mudo: #93A2AB;
--linha-ink: rgba(255,255,255,.13);
--linha-ink-2: rgba(255,255,255,.26);
--bronze: #816133;
--bronze-lt: #C4A574;
--bronze-bg: #F4EDE1;
/* --- cor: âmbar é a energia, petróleo é o segundo fundo --- */
--ambar: #E8A33D;
--ambar-lt: #F7C266;
--ambar-esc: #8A5D12; /* legível sobre claro */
--ambar-bg: #FBEFD9;
--petroleo: #0D2E2C;
--petroleo-2: #123C39;
--petroleo-3: #1B5450;
--sobre-petroleo: #DCEDEA;
--sobre-petroleo-mudo: #8FB3AE;
--green: #0F5C43;
--green-bg: #E6EFEA;
--amber: #8A6410;
--amber-bg: #F6EEDB;
--red: #8A2E2E;
--red-bg: #F3E7E5;
--display: "Fraunces", Georgia, "Times New Roman", serif;
--sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
--wrap: 1200px;
--wrap-narrow: 780px;
--nav-h: 76px;
--radius: 3px;
--ease: cubic-bezier(.22,.61,.36,1);
}
/* --- Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
margin: 0; background: var(--paper); color: var(--ink);
font-family: var(--sans); font-size: 16.5px; line-height: 1.62;
font-feature-settings: "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
/* --- Tipografia ---------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.015em; }
/* Fraunces é variável: font-variation-settings substitui font-weight,
então o peso vai declarado junto. SOFT e WONK em 0 tiram a
informalidade da fonte e deixam o corte institucional. */
.display-xl, .display-l, .display-m, .display-s, .pull {
font-variation-settings: "opsz" 120, "wght" 400, "SOFT" 0, "WONK" 0;
}
.nav__word { font-variation-settings: "opsz" 40, "wght" 500, "SOFT" 0, "WONK" 0; }
.mural__nome, .letreiro__item, .bloco__n, .stat__n, .door h3 {
font-variation-settings: "opsz" 72, "wght" 400, "SOFT" 0, "WONK" 0;
}
.display-xl { font-family: var(--display); font-size: clamp(3rem, 8vw, 6.2rem); line-height: .98; letter-spacing: -.03em; }
.display-l { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1.06; letter-spacing: -.024em; }
.display-m { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.16; letter-spacing: -.018em; }
.display-s { font-family: var(--display); font-size: clamp(1.35rem, 2.1vw, 1.65rem); line-height: 1.26; }
.eyebrow {
font-family: var(--mono); font-size: .685rem; letter-spacing: .19em;
text-transform: uppercase; color: var(--bronze); font-weight: 500; margin: 0 0 1.15rem;
display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.eyebrow--simples::before { display: none; }
.lead { font-size: 1.17rem; line-height: 1.66; color: var(--ink-2); }
.muted { color: var(--muted); }
.small { font-size: .885rem; line-height: 1.6; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
/* --- Layout -------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 28px; }
.section { padding: 100px 0; position: relative; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--paper-2); }
.rule { height: 1px; background: var(--line); border: 0; }
/* Seções escuras — o "híbrido" */
.section--ink { background: var(--ink); color: var(--sobre-ink); }
.section--ink .muted { color: var(--sobre-ink-mudo); }
.section--ink .eyebrow { color: var(--bronze-lt); }
.section--ink .lead { color: var(--sobre-ink); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .card { background: var(--ink-2); border-color: var(--linha-ink); color: var(--sobre-ink); }
.section--ink .card h3 { color: #fff; }
.section--ink .card p { color: var(--sobre-ink-mudo); }
.section--ink .table-wrap { background: var(--ink-2); border-color: var(--linha-ink); }
.section--ink table.data th { background: var(--ink); color: var(--sobre-ink-mudo); border-bottom-color: var(--linha-ink); }
.section--ink table.data td { border-bottom-color: var(--linha-ink); color: var(--sobre-ink); }
.section--ink .note { color: var(--sobre-ink-mudo); border-left-color: var(--bronze-lt); }
.section--ink .checks li { color: var(--sobre-ink); }
.section--ink .checks li::before { border-color: var(--bronze-lt); }
.section--ink .tag { background: rgba(255,255,255,.06); border-color: var(--linha-ink); color: var(--sobre-ink); }
.grid { display: grid; gap: 30px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 62px; align-items: start; }
.stack-l > * + * { margin-top: 26px; }
/* ============================================================
MARCA
============================================================ */
.marca { width: 36px; height: 36px; flex: none; }
.marca__eco { stroke: var(--bronze); stroke-width: 10; opacity: .5; }
.marca__v { stroke: var(--ink); stroke-width: 11; }
.marca path { fill: none; stroke-linecap: square; }
/* --- Navegação ----------------------------------------------- */
.nav {
position: sticky; top: 0; z-index: 60;
background: rgba(250,247,242,.88); backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--line);
transition: background .3s var(--ease), border-color .3s var(--ease);
}
.nav--sobre-escuro {
background: transparent; border-bottom-color: var(--linha-ink); backdrop-filter: none;
}
.nav--sobre-escuro .nav__word { color: var(--paper); }
.nav--sobre-escuro .nav__sub { color: var(--sobre-ink-mudo); }
.nav--sobre-escuro .nav__links a { color: var(--sobre-ink); }
.nav--sobre-escuro .marca__eco { stroke: var(--bronze-lt); opacity: .6; }
.nav--sobre-escuro .marca__v { stroke: var(--paper); }
.nav--sobre-escuro .btn--ghost { color: var(--paper); border-color: var(--linha-ink-2); }
.nav--sobre-escuro .btn--primary { background: var(--paper); color: var(--ink); }
.nav--sobre-escuro .nav__toggle { color: var(--paper); border-color: var(--linha-ink-2); }
.nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 28px; }
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.nav__word { font-family: var(--display); font-size: 1.45rem; letter-spacing: .07em; line-height: 1; transition: color .3s var(--ease); }
.nav__lock { display: block; }
.nav__sub {
display: block; font-family: var(--mono); font-size: .585rem; letter-spacing: .085em;
text-transform: uppercase; color: var(--muted); margin-top: 5px; line-height: 1.2;
transition: color .3s var(--ease); white-space: nowrap;
}
.nav__sub b { color: var(--bronze); font-weight: 500; letter-spacing: .12em; }
.nav--sobre-escuro .nav__sub b { color: var(--bronze-lt); }
.foot__brand .nav__sub { color: #7E8C95; }
.foot__brand .nav__sub b { color: var(--bronze-lt); }
.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a {
text-decoration: none; font-size: .885rem; color: var(--ink-2);
padding: 4px 0; border-bottom: 1px solid transparent;
transition: border-color .18s, color .3s var(--ease);
}
.nav__links a:hover { border-bottom-color: var(--bronze); }
.nav__links a[aria-current="page"] { border-bottom-color: currentColor; font-weight: 500; }
.nav__toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 7px 11px; cursor: pointer; color: var(--ink); }
/* --- Barra de leitura ---------------------------------------- */
.barra-leitura {
position: fixed; top: 0; left: 0; height: 2px; width: 0;
background: var(--bronze-lt); z-index: 80; transition: width .1s linear;
}
/* --- Botões -------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 14px 26px; border-radius: var(--radius); text-decoration: none;
font-size: .905rem; font-weight: 500; border: 1px solid transparent; cursor: pointer;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
white-space: nowrap; position: relative;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-3); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--bronze { background: var(--bronze); color: #fff; }
.btn--bronze:hover { background: #6F5330; }
.btn--sm { padding: 9px 16px; font-size: .83rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.section--ink .btn--ghost { color: var(--paper); border-color: var(--linha-ink-2); }
.section--ink .btn--ghost:hover { border-color: var(--paper); }
.link-arrow {
display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
font-size: .9rem; font-weight: 500; border-bottom: 1px solid var(--line-2);
padding-bottom: 2px; transition: border-color .18s, gap .18s var(--ease);
}
.link-arrow:hover { border-bottom-color: currentColor; gap: 12px; }
.section--ink .link-arrow { border-bottom-color: var(--linha-ink-2); }
/* ============================================================
ANIMAÇÕES
============================================================ */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].visivel {
opacity: 1; transform: none;
transition: opacity .75s var(--ease), transform .75s var(--ease);
transition-delay: var(--atraso, 0ms);
}
/* carimbo de entrada do selo */
@keyframes carimbar {
0% { opacity: 0; transform: scale(1.5) rotate(-9deg); }
55% { opacity: 1; transform: scale(.965) rotate(1.5deg); }
78% { transform: scale(1.012) rotate(-.5deg); }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
.carimbo { animation: carimbar .95s var(--ease) both; animation-delay: .25s; }
/* pulso do anel do selo */
@keyframes anel { from { transform: scale(1); opacity: .5 } to { transform: scale(1.28); opacity: 0 } }
.selo-halo {
position: absolute; inset: 0; border-radius: 50%;
border: 1px solid var(--bronze-lt); animation: anel 2.6s var(--ease) infinite; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
[data-reveal] { opacity: 1 !important; transform: none !important; }
.carimbo { animation: none; }
.selo-halo { display: none; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ============================================================
HERO
============================================================ */
.hero { background: var(--ink); color: var(--sobre-ink); padding: 112px 0 96px; position: relative; overflow: hidden; margin-top: calc(var(--nav-h) * -1); padding-top: calc(112px + var(--nav-h)); }
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(900px 520px at 78% 22%, rgba(196,165,116,.12), transparent 62%),
radial-gradient(700px 400px at 8% 92%, rgba(196,165,116,.06), transparent 60%);
}
.hero > * { position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); gap: 70px; align-items: center; }
.hero h1 { color: #fff; }
.hero .lead { color: var(--sobre-ink); }
.hero__selo { justify-self: center; width: min(360px,100%); position: relative; }
.hero__selo img { width: 100%; }
/* trama de V ao fundo */
.trama { position: absolute; inset: 0; opacity: .05; pointer-events: none; }
/* ============================================================
CONTADOR DE VAGAS — Turma Fundadora
============================================================ */
.vagas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; margin: 30px 0 22px; }
.vaga {
aspect-ratio: 1; border-radius: var(--radius); border: 1px solid var(--linha-ink-2);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: .62rem; color: var(--sobre-ink-mudo);
transition: transform .5s var(--ease), background .5s var(--ease);
}
.vaga--ocupada { background: var(--bronze); border-color: var(--bronze); color: #fff; font-weight: 500; }
.vaga--livre { border-style: dashed; }
.section--claro .vaga { border-color: var(--line-2); color: var(--muted); }
.section--claro .vaga--ocupada { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.vagas-legenda { display: flex; flex-wrap: wrap; gap: 26px; font-size: .85rem; }
.vagas-legenda span { display: flex; align-items: center; gap: 9px; }
.vagas-legenda i { width: 13px; height: 13px; border-radius: 2px; display: block; }
/* ============================================================
CARTÕES E BLOCOS
============================================================ */
.card {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 30px 28px; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card--link { text-decoration: none; display: block; }
.card--link:hover { border-color: var(--line-2); transform: translateY(-3px); }
.section--ink .card--link:hover { border-color: var(--linha-ink-2); }
.card__k { font-family: var(--mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); margin-bottom: 12px; }
.section--ink .card__k { color: var(--bronze-lt); }
.card h3 { font-size: 1.06rem; font-weight: 600; margin-bottom: 9px; }
.card p { font-size: .925rem; color: var(--muted); }
/* Blocos de critério — numeral grande */
.bloco {
display: grid; grid-template-columns: 96px 1fr; gap: 30px; padding: 40px 0;
border-top: 1px solid var(--line); align-items: start;
}
.section--ink .bloco { border-top-color: var(--linha-ink); }
.bloco__n {
font-family: var(--display); font-size: 4.2rem; line-height: .82; color: var(--bronze-lt);
position: relative;
}
.bloco__n::after { content: ""; display: block; width: 34px; height: 1px; background: var(--bronze); margin-top: 16px; }
.bloco h3 { font-family: var(--display); font-size: 1.6rem; margin-bottom: 12px; }
/* ============================================================
LISTAS DE VERIFICAÇÃO
============================================================ */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding-left: 30px; margin-bottom: 11px; font-size: .945rem; color: var(--ink-2); }
.checks li::before {
content: ""; position: absolute; left: 0; top: .48em; width: 13px; height: 7px;
border-left: 1.8px solid var(--bronze); border-bottom: 1.8px solid var(--bronze); transform: rotate(-45deg);
}
.checks--tight li { margin-bottom: 7px; font-size: .9rem; }
.checks--x li::before { border-color: var(--red); }
/* ============================================================
CHIPS
============================================================ */
.chip {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px;
border-radius: 100px; font-family: var(--mono); font-size: .665rem;
letter-spacing: .1em; text-transform: uppercase; font-weight: 500; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--ativo { background: var(--green-bg); color: var(--green); }
.chip--analise { background: var(--amber-bg); color: var(--amber); }
.chip--suspenso { background: var(--red-bg); color: var(--red); }
.chip--plain { background: var(--paper-3); color: var(--ink-2); }
.chip--plain::before { display: none; }
.chip--fundadora { background: var(--bronze); color: #fff; }
.chip--fundadora::before { display: none; }
/* ============================================================
TABELAS
============================================================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
table.data th {
text-align: left; padding: 15px 20px; font-family: var(--mono); font-size: .675rem;
letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
font-weight: 500; border-bottom: 1px solid var(--line); background: var(--paper);
}
table.data td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data td:first-child { font-weight: 500; }
table.data .num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ============================================================
ESCADA ECONÔMICA — visual do take rate
============================================================ */
.escada { display: grid; gap: 12px; }
.degrau {
display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--radius);
background: #fff; position: relative; overflow: hidden;
}
.section--ink .degrau { background: var(--ink-2); border-color: var(--linha-ink); }
.degrau::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0;
background: var(--bronze); opacity: .13; width: var(--peso, 20%);
transition: width 1.1s var(--ease); transition-delay: var(--atraso, 0ms);
}
.degrau > * { position: relative; }
.degrau__t { font-weight: 600; font-size: .98rem; }
.degrau__d { font-size: .86rem; color: var(--muted); margin-top: 4px; }
.section--ink .degrau__d { color: var(--sobre-ink-mudo); }
.degrau__v { font-family: var(--mono); font-size: 1.35rem; white-space: nowrap; }
.degrau__v small { display: block; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.section--ink .degrau__v small { color: var(--sobre-ink-mudo); }
/* ============================================================
MURAL DE FUNDADORAS
============================================================ */
.mural { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.section--ink .mural { border-color: var(--linha-ink); background: var(--ink-2); }
.mural__item {
padding: 42px 30px; text-decoration: none; display: flex; flex-direction: column;
justify-content: space-between; min-height: 220px; position: relative;
border-right: 1px solid var(--line); transition: background .3s var(--ease);
}
.section--ink .mural__item { border-right-color: var(--linha-ink); }
.mural__item:last-child { border-right: 0; }
.mural__item::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: var(--cor, var(--bronze)); transform: scaleX(0); transform-origin: left;
transition: transform .4s var(--ease);
}
.mural__item:hover::after { transform: scaleX(1); }
.mural__item:hover { background: var(--paper); }
.section--ink .mural__item:hover { background: rgba(255,255,255,.04); }
.mural__reg { font-family: var(--mono); font-size: .68rem; color: var(--bronze); letter-spacing: .06em; }
.section--ink .mural__reg { color: var(--bronze-lt); }
/* placa branca: unifica logos de cores diferentes */
.mural__placa {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
margin: 20px 0 16px; padding: 22px 18px; min-height: 104px;
display: flex; align-items: center; justify-content: center; text-align: center;
}
.section--ink .mural__placa { border-color: transparent; }
.mural__logo {
max-height: 54px; max-width: 100%; width: auto; object-fit: contain;
filter: grayscale(1); opacity: .78;
transition: filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.mural__item:hover .mural__logo { filter: none; opacity: 1; transform: scale(1.04); }
.mural__nome { font-family: var(--display); font-size: 1.62rem; line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.mural__sub { font-size: .82rem; color: var(--muted); }
.section--ink .mural__sub { color: var(--sobre-ink-mudo); }
/* placa na ficha da empresa */
.ficha-placa {
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 18px 24px; margin-top: 20px; min-height: 84px; min-width: 180px;
}
.ficha-placa .mural__logo { filter: none; opacity: 1; max-height: 46px; }
.ficha-placa .mural__nome { font-size: 1.4rem; }
/* ============================================================
REGISTRO
============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--mono); font-size: .655rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.field select, .field input, .field textarea {
font-family: var(--sans); font-size: .93rem; padding: 12px 14px; background: #fff;
border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink); min-width: 190px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field :focus { outline: 2px solid var(--bronze); outline-offset: -1px; }
.field--grow { flex: 1 1 240px; }
.field--grow input { width: 100%; min-width: 0; }
.reg-list { display: grid; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.reg-item { display: grid; grid-template-columns: 158px 1fr auto; gap: 26px; padding: 28px; text-decoration: none; align-items: start; transition: background .2s var(--ease); position: relative; }
.reg-item + .reg-item { border-top: 1px solid var(--line); }
.reg-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cor, var(--bronze)); transform: scaleY(0); transition: transform .3s var(--ease); }
.reg-item:hover::before { transform: scaleY(1); }
.reg-item:hover { background: var(--paper); }
.reg-item__id { font-family: var(--mono); font-size: .77rem; color: var(--muted); }
.reg-item__name { font-size: 1.12rem; font-weight: 600; letter-spacing: -.008em; }
.reg-item__meta { font-size: .875rem; color: var(--muted); margin-top: 6px; }
.reg-item__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.tag { font-size: .74rem; padding: 3px 10px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 100px; color: var(--ink-2); }
.empty-state { padding: 64px 28px; text-align: center; color: var(--muted); }
/* --- Ficha --------------------------------------------------- */
.record-head { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: start; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.record-seal { width: 138px; flex: none; }
.dl { display: grid; grid-template-columns: 190px 1fr; }
.dl dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 15px 0; border-top: 1px solid var(--line); }
.dl dd { margin: 0; padding: 15px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.section--ink .dl dt, .section--ink .dl dd { border-top-color: var(--linha-ink); }
/* ============================================================
FLUXO / LINHA DO TEMPO
============================================================ */
.flow { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.section--ink .flow { background: var(--ink-2); border-color: var(--linha-ink); }
.flow__step { padding: 28px 22px; border-right: 1px solid var(--line); position: relative; }
.section--ink .flow__step { border-right-color: var(--linha-ink); }
.flow__step:last-child { border-right: 0; }
.flow__step::before {
content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%;
background: var(--bronze); transform: scaleX(0); transform-origin: left;
transition: transform .6s var(--ease); transition-delay: var(--atraso, 0ms);
}
.flow.visivel .flow__step::before { transform: scaleX(1); }
.flow__n { font-family: var(--mono); font-size: .68rem; color: var(--bronze); letter-spacing: .13em; }
.section--ink .flow__n { color: var(--bronze-lt); }
.flow__t { font-size: .94rem; font-weight: 600; margin: 12px 0 6px; }
.flow__d { font-size: .81rem; color: var(--muted); }
.section--ink .flow__d { color: var(--sobre-ink-mudo); }
/* ============================================================
CICLO DA REDE
============================================================ */
.wheel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wheel__node { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; background: #fff; position: relative; }
.section--ink .wheel__node { background: var(--ink-2); border-color: var(--linha-ink); }
.wheel__node::after {
content: ""; position: absolute; right: -14px; top: 50%; width: 10px; height: 10px;
border-top: 1.5px solid var(--bronze-lt); border-right: 1.5px solid var(--bronze-lt);
transform: translateY(-50%) rotate(45deg); z-index: 2;
}
.wheel__node:last-child::after { display: none; }
.wheel__n { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; color: var(--bronze); }
.section--ink .wheel__n { color: var(--bronze-lt); }
.wheel__node h4 { font-size: .98rem; font-weight: 600; margin: 11px 0 7px; }
.wheel__node p { font-size: .855rem; color: var(--muted); }
.section--ink .wheel__node p { color: var(--sobre-ink-mudo); }
/* ============================================================
MATRIZ DE EXCLUSIVIDADE — grade visual
============================================================ */
.matriz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.celula {
border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px;
min-height: 128px; display: flex; flex-direction: column; justify-content: space-between;
background: #fff; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.celula--ocupada { border-color: var(--ink); }
.celula--ocupada .celula__st { color: var(--green); }
.celula--livre { border-style: dashed; background: transparent; }
.celula--livre:hover { border-color: var(--bronze); transform: translateY(-3px); }
.celula__sub { font-size: .95rem; font-weight: 600; line-height: 1.32; }
.celula__oc { font-size: .82rem; color: var(--muted); margin-top: 7px; }
.celula__st { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); margin-top: 16px; }
/* ============================================================
BALANÇA — conflito x salvaguarda
============================================================ */
.balanca { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.section--ink .balanca { border-color: var(--linha-ink); }
.balanca__lado { padding: 34px 32px; }
.balanca__lado + .balanca__lado { border-left: 1px solid var(--line); }
.section--ink .balanca__lado + .balanca__lado { border-left-color: var(--linha-ink); }
.balanca__lado--risco { background: var(--red-bg); }
.balanca__lado--guarda { background: var(--green-bg); }
.section--ink .balanca__lado--risco { background: rgba(138,46,46,.16); }
.section--ink .balanca__lado--guarda { background: rgba(15,92,67,.2); }
.balanca__t { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.balanca__lado--risco .balanca__t { color: var(--red); }
.balanca__lado--guarda .balanca__t { color: var(--green); }
.section--ink .balanca__lado--risco .balanca__t { color: #E9A9A9; }
.section--ink .balanca__lado--guarda .balanca__t { color: #8FD3BA; }
.balanca ul { margin: 0; padding-left: 18px; font-size: .93rem; }
.balanca li { margin-bottom: 9px; }
/* ============================================================
NÚMEROS
============================================================ */
.stats { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 36px 26px 36px 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 26px; }
.stat__n { font-family: var(--display); font-size: clamp(2.4rem,4.6vw,3.5rem); line-height: 1; letter-spacing: -.02em; }
.stat__l { font-size: .805rem; color: var(--muted); margin-top: 12px; line-height: 1.45; }
.section--ink .stats { border-color: var(--linha-ink); }
.section--ink .stat + .stat { border-left-color: var(--linha-ink); }
/* ============================================================
DIVERSOS
============================================================ */
.pull { font-family: var(--display); font-size: clamp(1.7rem,3.6vw,2.9rem); line-height: 1.22; letter-spacing: -.02em; }
.note { border-left: 2px solid var(--bronze); padding: 4px 0 4px 22px; font-size: .93rem; color: var(--muted); }
.todo { background: var(--amber-bg); border: 1px dashed #C9A94A; border-radius: var(--radius); padding: 14px 18px; font-size: .85rem; color: var(--amber); font-family: var(--mono); line-height: 1.55; }
.doc-link {
display: flex; align-items: center; gap: 20px; padding: 26px 28px;
border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
background: #fff; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.section--ink .doc-link { background: var(--ink-2); border-color: var(--linha-ink); }
.doc-link:hover { border-color: var(--bronze); transform: translateY(-2px); }
.doc-link__ico { width: 44px; height: 54px; border: 1.5px solid var(--bronze); border-radius: 2px; flex: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; font-family: var(--mono); font-size: .54rem; letter-spacing: .08em; color: var(--bronze); }
.doc-link__t { font-weight: 600; font-size: 1.02rem; }
.doc-link__d { font-size: .86rem; color: var(--muted); margin-top: 3px; }
.section--ink .doc-link__d { color: var(--sobre-ink-mudo); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .field { min-width: 0; }
.form-grid .field input, .form-grid .field select { width: 100%; min-width: 0; }
.form-grid .span-2 { grid-column: 1 / -1; }
/* --- Rodapé -------------------------------------------------- */
.foot { background: var(--ink); color: #B9C4CB; padding: 78px 0 34px; font-size: .885rem; }
.foot a { color: #DDE4E8; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot h4 { font-family: var(--mono); font-size: .655rem; letter-spacing: .15em; text-transform: uppercase; color: #7E8C95; margin-bottom: 16px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 9px; }
.aviso-envio { margin-top: 14px; padding: 12px 15px; border-radius: 3px; font-size: .88rem; line-height: 1.55;
background: rgba(129, 97, 51, .09); border: 1px solid rgba(129, 97, 51, .3); color: var(--ink); max-width: 62ch; }
.aviso-envio--erro { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.foot__nota { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linha-ink); max-width: 82ch; color: #93A2AB; font-size: .805rem; line-height: 1.6; }
.foot__nota + .foot__bottom { margin-top: 24px; padding-top: 22px; }
.foot__bottom { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--linha-ink); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: #7E8C95; font-size: .8rem; }
.foot__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.foot__brand .marca__eco { stroke: var(--bronze-lt); opacity: .6; }
.foot__brand .marca__v { stroke: var(--paper); }
.foot__brand .nav__word { color: var(--paper); }
/* --- Utilidades ---------------------------------------------- */
.center { text-align: center; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 30px; } .mt-l { margin-top: 56px; }
.mb-m { margin-bottom: 30px; } .mb-l { margin-bottom: 56px; }
.maxch { max-width: 62ch; }
.hide { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* --- Responsivo ---------------------------------------------- */
@media (max-width: 1000px) {
.hero__grid { grid-template-columns: 1fr; gap: 48px; }
.hero__selo { width: min(270px,70%); order: -1; justify-self: start; }
.split { grid-template-columns: 1fr; gap: 38px; }
.g-4, .matriz { grid-template-columns: repeat(2,1fr); }
.mural { grid-template-columns: repeat(2,1fr); }
.mural__item:nth-child(2n) { border-right: 0; }
.mural__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.wheel { grid-template-columns: repeat(2,1fr); }
.wheel__node:nth-child(2)::after { display: none; }
.flow { grid-template-columns: repeat(3,1fr); }
.flow__step:nth-child(3n) { border-right: 0; }
.flow__step:nth-child(n+4) { border-top: 1px solid var(--line); }
.foot__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
.vagas { grid-template-columns: repeat(6,1fr); }
}
@media (max-width: 800px) {
.nav__links {
position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column;
align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line);
padding: 10px 28px 22px; display: none;
}
.nav--sobre-escuro .nav__links { background: var(--ink); }
.nav__links.open { display: flex; }
.nav__links a { padding: 13px 0; border-bottom: 1px solid var(--line); }
.nav--sobre-escuro .nav__links a { border-bottom-color: var(--linha-ink); }
.nav__links .btn { margin-top: 12px; }
.nav__toggle { display: block; }
.section { padding: 66px 0; }
.hero { padding: 66px 0 56px; padding-top: calc(66px + var(--nav-h)); }
.g-2, .g-3, .g-4, .form-grid, .matriz, .balanca { grid-template-columns: 1fr; }
.balanca__lado + .balanca__lado { border-left: 0; border-top: 1px solid var(--line); }
.mural { grid-template-columns: 1fr; }
.mural__item { border-right: 0; border-bottom: 1px solid var(--line); min-height: auto; }
.mural__item:last-child { border-bottom: 0; }
.stats { grid-template-columns: 1fr 1fr; }
.stat { padding: 26px 18px 26px 0; }
.stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.stat:nth-child(odd) { border-left: 0; padding-left: 0; }
.wheel, .flow { grid-template-columns: 1fr; }
.wheel__node::after { display: none; }
.flow__step { border-right: 0; border-bottom: 1px solid var(--line); }
.bloco { grid-template-columns: 1fr; gap: 14px; }
.bloco__n { font-size: 3rem; }
.reg-item { grid-template-columns: 1fr; gap: 12px; }
.record-head { grid-template-columns: 1fr; gap: 28px; }
.record-seal { width: 108px; }
.dl { grid-template-columns: 1fr; }
.dl dt { padding-bottom: 0; }
.dl dd { padding-top: 5px; border-top: 0; }
.degrau { grid-template-columns: 1fr; gap: 12px; }
.foot__grid { grid-template-columns: 1fr; }
.vagas { grid-template-columns: repeat(4,1fr); }
}
@media print {
.nav, .foot, .btn, .barra-leitura { display: none; }
body { background: #fff; }
.section--ink, .hero { background: #fff !important; color: #000 !important; }
}
/* ============================================================
v3 — CORREÇÕES DE CONTRASTE
Este bloco vem por último de propósito: precisa vencer as
regras genéricas de :hover definidas mais acima.
============================================================ */
/* Rede de segurança: nada herda cor escura dentro de fundo escuro */
.section--ink, .hero { color: var(--sobre-ink); }
.section--ink h4, .section--ink dt, .section--ink dd,
.section--ink li, .section--ink p, .section--ink span:not(.chip):not(.tag),
.hero h4, .hero p, .hero li { color: inherit; }
.section--ink .stat__n, .section--ink .degrau__t, .section--ink .degrau__v,
.section--ink .flow__t, .section--ink .wheel__node h4, .section--ink .doc-link__t,
.section--ink .celula__sub { color: #fff; }
.section--ink .dl dt, .section--ink .celula__oc { color: var(--sobre-ink-mudo); }
.section--ink .celula { background: var(--ink-2); border-color: var(--linha-ink); }
.section--ink .celula--livre { background: transparent; }
.section--ink .field input, .section--ink .field select, .section--ink .field textarea {
background: var(--ink-2); border-color: var(--linha-ink-2); color: #fff;
}
.section--ink .field label { color: var(--sobre-ink-mudo); }
/* O nome em serifa do mural fica sempre sobre a placa branca */
.mural__placa .mural__nome, .ficha-placa .mural__nome { color: var(--ink); }
/* Links dentro de texto: sempre sublinhados para não sumirem */
.section--ink a:not(.btn):not(.card):not(.mural__item):not(.celula):not(.link-arrow):not(.doc-link):not(.reg-item) { color: var(--bronze-lt); text-decoration: underline; }
.note a, .lead a { color: var(--bronze); text-decoration: underline; text-underline-offset: 2px; }
.section--ink .note a { color: var(--bronze-lt); }
/* ============================================================
v3 — O CARIMBO
O selo desce, bate no papel, a tinta se espalha e a marca assenta.
============================================================ */
.carimbo-cena { position: relative; display: block; }
.carimbo-cena img { position: relative; z-index: 2; width: 100%; }
@keyframes bater {
0% { opacity: 0; transform: translateY(-52px) scale(1.9) rotate(-13deg); }
38% { opacity: 1; }
56% { transform: translateY(0) scale(.925) rotate(2.2deg); } /* impacto */
70% { transform: translateY(-9px) scale(1.045) rotate(-1.1deg); } /* repique */
84% { transform: translateY(0) scale(.988) rotate(.4deg); }
100% { opacity: 1; transform: none; }
}
.carimbo { animation: bater 1.05s cubic-bezier(.2,.7,.3,1) both .2s; }
/* tinta que se espalha no momento do impacto */
@keyframes tinta {
0% { transform: scale(.82); opacity: 0; }
6% { opacity: .55; }
100% { transform: scale(1.6); opacity: 0; }
}
.carimbo-tinta {
position: absolute; inset: 4%; border-radius: 50%; z-index: 1;
border: 2px solid var(--bronze-lt); pointer-events: none;
transform-origin: 50% 40%;
animation: tinta 1.15s cubic-bezier(.12,.7,.3,1) both .79s;
}
.carimbo-tinta--2 { animation-delay: .93s; animation-duration: 1.5s; border-width: 1px; opacity: .6; }
.carimbo-cena--claro .carimbo-tinta { border-color: var(--bronze); }
/* Quando o carimbo físico está em cena, tudo se realinha ao novo
instante de impacto: 1.20s. Os valores acima valem só para as
cenas sem carimbo, em que o selo desce sozinho. */
.carimbo-cena--fisico .carimbo-tinta { animation-delay: 1.20s; }
.carimbo-cena--fisico .carimbo-tinta--2 { animation-delay: 1.34s; }
/* o papel leva o baque */
@keyframes baque {
0%, 100% { transform: none; }
52% { transform: translateY(3px); }
60% { transform: translateY(-1px); }
}
.hero.batendo .hero__grid > div:first-child { animation: baque .5s ease-out 1.19s; }
/* repique quando o selo volta a entrar na tela */
.carimbo-cena.recarimbar .carimbo { animation: bater 1.05s cubic-bezier(.2,.7,.3,1) both; }
.carimbo-cena.recarimbar .carimbo-tinta { animation: tinta 1.15s cubic-bezier(.12,.7,.3,1) both .59s; }
/* ============================================================
v3 — MAIS MOVIMENTO
============================================================ */
/* trama de V em deriva lenta ao fundo do hero */
.trama {
position: absolute; inset: -60px; pointer-events: none; opacity: .07; z-index: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M18 24 L36 50 L54 24' fill='none' stroke='%23C4A574' stroke-width='2.4'/%3E%3C/svg%3E");
animation: deriva 46s linear infinite;
}
@keyframes deriva { from { background-position: 0 0; } to { background-position: 288px 216px; } }
/* o brilho respira */
@keyframes respirar { 0%,100% { opacity: .85; } 50% { opacity: 1.25; } }
.hero::before { animation: respirar 9s ease-in-out infinite; }
/* letreiro contínuo dos subsetores abertos */
.letreiro {
overflow: hidden; border-top: 1px solid var(--linha-ink); border-bottom: 1px solid var(--linha-ink);
padding: 20px 0; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.letreiro__fita { display: flex; gap: 0; width: max-content; animation: correr 42s linear infinite; }
.letreiro:hover .letreiro__fita { animation-play-state: paused; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.letreiro__item {
display: inline-flex; align-items: center; gap: 16px; padding: 0 26px; white-space: nowrap;
font-family: var(--display); font-size: 1.45rem; letter-spacing: -.01em;
}
.letreiro__item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bronze-lt); opacity: .6; }
.letreiro__item span { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--bronze-lt); }
/* sublinhado que se desenha sob os títulos */
.sublinha { position: relative; display: inline-block; padding-bottom: 12px; }
.sublinha::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
background: var(--bronze); transform: scaleX(0); transform-origin: left;
transition: transform 1s var(--ease) .2s;
}
.section--ink .sublinha::after { background: var(--bronze-lt); }
[data-reveal].visivel .sublinha::after, .sublinha[data-reveal].visivel::after { transform: scaleX(1); }
/* as vagas preenchem em sequência */
.vaga--ocupada { transform: scale(.5); opacity: 0; }
.vagas.visivel .vaga--ocupada { animation: encaixar .5s var(--ease) both; }
@keyframes encaixar { from { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.09); } to { transform: none; opacity: 1; } }
.vagas.visivel .vaga--ocupada:nth-child(1) { animation-delay: .05s }
.vagas.visivel .vaga--ocupada:nth-child(2) { animation-delay: .16s }
.vagas.visivel .vaga--ocupada:nth-child(3) { animation-delay: .27s }
.vagas.visivel .vaga--ocupada:nth-child(4) { animation-delay: .38s }
.vagas.visivel .vaga--ocupada:nth-child(n+5) { animation-delay: .49s }
/* cartões inclinam de leve para o cursor */
.card--link { transform-style: preserve-3d; }
/* a seta do ciclo pulsa */
@keyframes empurrar { 0%,100% { transform: translateY(-50%) rotate(45deg) translateX(0) } 50% { transform: translateY(-50%) rotate(45deg) translateX(3px) } }
.wheel__node::after { animation: empurrar 2.4s ease-in-out infinite; }
/* o selo do hero flutua devagar depois de assentar */
@keyframes flutuar { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
.hero__selo .carimbo-cena { animation: flutuar 7s ease-in-out infinite 1.5s; }
@media (prefers-reduced-motion: reduce) {
.trama, .letreiro__fita, .hero::before, .wheel__node::after,
.hero__selo .carimbo-cena, .carimbo, .carimbo-tinta { animation: none !important; }
.carimbo-tinta { display: none; }
.vaga--ocupada { transform: none; opacity: 1; }
.sublinha::after { transform: scaleX(1); }
}
/* ============================================================
v4 — SISTEMA DE BOTÕES CONSCIENTE DE CONTEXTO
------------------------------------------------------------
O bug anterior: .btn--ghost tinha color:var(--ink) fixo, então
dentro do hero escuro ficava tinta sobre tinta. Remendar cada
caso não resolve — a cada seção nova o bug volta. Agora existe
um único grupo de contextos escuros e TODOS os estados de TODAS
as variantes estão declarados dentro dele.
============================================================ */
:root { --escuro: .hero, .section--ink, .nav--sobre-escuro; }
/* --- contexto claro (padrão) --- */
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--ink-3); color: var(--paper); border-color: var(--ink-3); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover,
.btn--ghost:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn--light:hover,
.btn--light:focus-visible { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn--bronze { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.btn--bronze:hover,
.btn--bronze:focus-visible { background: #6F5330; color: #fff; border-color: #6F5330; }
/* --- contextos escuros: hero, seções ink e menu sobre o hero --- */
.hero .btn--primary,
.section--ink .btn--primary,
.nav--sobre-escuro .btn--primary,
.hero .btn--light,
.section--ink .btn--light,
.nav--sobre-escuro .btn--light {
background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.hero .btn--primary:hover,
.section--ink .btn--primary:hover,
.nav--sobre-escuro .btn--primary:hover,
.hero .btn--primary:focus-visible,
.section--ink .btn--primary:focus-visible,
.nav--sobre-escuro .btn--primary:focus-visible,
.hero .btn--light:hover,
.section--ink .btn--light:hover,
.nav--sobre-escuro .btn--light:hover,
.hero .btn--light:focus-visible,
.section--ink .btn--light:focus-visible,
.nav--sobre-escuro .btn--light:focus-visible {
background: #fff; color: var(--ink); border-color: #fff;
}
.hero .btn--ghost,
.section--ink .btn--ghost,
.nav--sobre-escuro .btn--ghost {
background: transparent; color: #fff; border-color: rgba(255,255,255,.38);
}
.hero .btn--ghost:hover,
.section--ink .btn--ghost:hover,
.nav--sobre-escuro .btn--ghost:hover,
.hero .btn--ghost:focus-visible,
.section--ink .btn--ghost:focus-visible,
.nav--sobre-escuro .btn--ghost:focus-visible {
background: rgba(255,255,255,.14); color: #fff; border-color: #fff;
}
.hero .btn--bronze,
.section--ink .btn--bronze,
.nav--sobre-escuro .btn--bronze {
background: var(--ambar); color: var(--ink); border-color: var(--ambar);
}
.hero .btn--bronze:hover,
.section--ink .btn--bronze:hover,
.nav--sobre-escuro .btn--bronze:hover {
background: #F7C266; color: var(--ink); border-color: #F7C266;
}
/* foco sempre visível, em qualquer fundo */
.btn:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
/* ============================================================
v4 — COR
Âmbar para energia e destaque, petróleo como segundo fundo
escuro. O bronze continua sendo o metal do selo.
============================================================ */
.section--petroleo { background: var(--petroleo); color: var(--sobre-petroleo); }
.section--petroleo h1, .section--petroleo h2, .section--petroleo h3 { color: #fff; }
.section--petroleo .eyebrow { color: var(--ambar); }
.section--petroleo .lead { color: var(--sobre-petroleo); }
.section--petroleo .muted { color: var(--sobre-petroleo-mudo); }
.section--petroleo .card { background: var(--petroleo-2); border-color: rgba(255,255,255,.12); }
.section--petroleo .card h3 { color: #fff; }
.section--petroleo .card p { color: var(--sobre-petroleo-mudo); }
.section--petroleo .card__k { color: var(--ambar); }
.section--petroleo .note { color: var(--sobre-petroleo-mudo); border-left-color: var(--ambar); }
.section--petroleo .checks li { color: var(--sobre-petroleo); }
.section--petroleo .checks li::before { border-color: var(--ambar); }
.section--petroleo .btn--primary, .section--petroleo .btn--light {
background: var(--ambar); color: var(--ink); border-color: var(--ambar);
}
.section--petroleo .btn--primary:hover, .section--petroleo .btn--light:hover {
background: var(--ambar-lt); color: var(--ink); border-color: var(--ambar-lt);
}
.section--petroleo .btn--ghost { color: #fff; border-color: rgba(255,255,255,.38); }
.section--petroleo .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.section--petroleo .table-wrap { background: var(--petroleo-2); border-color: rgba(255,255,255,.12); }
.section--petroleo table.data th { background: var(--petroleo); color: var(--sobre-petroleo-mudo); border-bottom-color: rgba(255,255,255,.12); }
.section--petroleo table.data td { color: var(--sobre-petroleo); border-bottom-color: rgba(255,255,255,.12); }
.section--petroleo a:not(.btn):not(.card) { color: var(--ambar); }
/* faixa âmbar de destaque */
.faixa-ambar { background: var(--ambar); color: var(--ink); }
.faixa-ambar .eyebrow { color: #4A3105; }
.faixa-ambar h2, .faixa-ambar h3 { color: var(--ink); }
.faixa-ambar .lead, .faixa-ambar p { color: #2A1D06; }
.faixa-ambar .btn--primary { background: var(--ink); color: var(--ambar-lt); border-color: var(--ink); }
.faixa-ambar .btn--primary:hover { background: #000; color: var(--ambar-lt); }
.faixa-ambar .btn--ghost { color: var(--ink); border-color: rgba(14,21,25,.42); }
.faixa-ambar .btn--ghost:hover { background: rgba(14,21,25,.1); border-color: var(--ink); }
/* acentos coloridos espalhados */
.eyebrow { color: var(--ambar-esc); }
.section--ink .eyebrow { color: var(--ambar); }
.card__k { color: var(--ambar-esc); }
.section--ink .card__k { color: var(--ambar); }
.bloco__n { color: var(--ambar); }
.flow__n { color: var(--ambar-esc); }
.section--ink .flow__n { color: var(--ambar); }
.flow__step::before { background: linear-gradient(90deg, var(--ambar), var(--bronze)); }
.degrau::before { background: linear-gradient(90deg, var(--ambar), var(--bronze)); opacity: .2; }
.mural__reg { color: var(--ambar-esc); }
.section--ink .mural__reg { color: var(--ambar); }
.barra-leitura { background: linear-gradient(90deg, var(--ambar), var(--bronze-lt)); height: 3px; }
.wheel__node::after { border-color: var(--ambar); }
.celula--livre:hover { border-color: var(--ambar); }
.celula__st { color: var(--ambar-esc); }
.chip--fundadora { background: linear-gradient(100deg, var(--bronze), var(--ambar-esc)); }
.vaga--ocupada { background: linear-gradient(140deg, var(--bronze), var(--ambar-esc)); border-color: transparent; }
.sublinha::after { background: linear-gradient(90deg, var(--ambar), var(--bronze)); height: 3px; }
.section--ink .sublinha::after { background: linear-gradient(90deg, var(--ambar), var(--bronze-lt)); }
.letreiro__item span { color: var(--ambar); }
.letreiro__item::after { background: var(--ambar); opacity: .8; }
.doc-link__ico { border-color: var(--ambar-esc); color: var(--ambar-esc); }
.section--ink .doc-link__ico { border-color: var(--ambar); color: var(--ambar); }
.doc-link:hover { border-color: var(--ambar); }
.hero::before {
background:
radial-gradient(900px 520px at 78% 22%, rgba(232,163,61,.16), transparent 62%),
radial-gradient(680px 420px at 6% 90%, rgba(27,84,80,.30), transparent 62%);
}
.trama { opacity: .085; }
/* ============================================================
v4 — WORDMARK DESENHADO
Construção geométrica própria, não fonte aplicada.
============================================================ */
.wm { height: 25px; width: auto; display: block; }
.wm path { fill: none; stroke-width: 13; stroke-linecap: butt; stroke-linejoin: miter; }
.wm__t { stroke: var(--ink); transition: stroke .3s var(--ease); }
.wm__eco { stroke: var(--bronze); opacity: .45; transition: stroke .3s var(--ease); }
.nav--sobre-escuro .wm__t { stroke: var(--paper); }
.nav--sobre-escuro .wm__eco { stroke: var(--ambar); opacity: .6; }
.foot__brand .wm__t { stroke: var(--paper); }
.foot__brand .wm__eco { stroke: var(--ambar); opacity: .6; }
.foot__brand .wm { height: 23px; }
.nav__brand:hover .wm__eco { opacity: .8; }
/* ============================================================
v5 — O CARIMBO FÍSICO, VINDO DA TELA
O carimbo não cai de cima: ele vem do plano do observador em
direção ao centro do selo. Parte grande e desfocado (perto do
olho), recua no eixo Z, entra em foco e acerta a marca. Depois
recolhe pelo mesmo caminho.
A geometria só fecha por causa de dois pontos coincidentes:
· transform-origin 50% 100% = a face da borracha
· perspective-origin 50% 42% = o mesmo ponto na tela
Como os dois coincidem, o translateZ escala o carimbo em torno
da face de contato — que fica cravada no alvo o tempo inteiro,
não importa o quanto o resto do corpo avance sobre a câmera.
bottom:58% é o que põe a face sobre o V da marca. O SVG termina
exatamente na face (viewBox 0 0 220 196), então essa medida é
direta: não há folga embaixo do desenho para compensar.
============================================================ */
.carimbo-cena {
position: relative; display: block; overflow: visible;
perspective: 900px; perspective-origin: 50% 42%;
}
.carimbo-fisico {
/* aspect-ratio em vez de height:auto — SVG inline sem atributos de
tamanho cai para 150px de altura em alguns navegadores. */
position: absolute; left: 50%; bottom: 58%; width: 54%;
height: auto; aspect-ratio: 220 / 196;
z-index: 5; pointer-events: none; opacity: 0;
transform-origin: 50% 100%;
transform: translate(-50%, 0);
}
.carimbo-cena.rodando .carimbo-fisico { animation: aproximar 2.1s cubic-bezier(.30,.02,.18,1) both .15s; }
.carimbo-cena.rodando .carimbo-pad { animation: comprimir 2.1s cubic-bezier(.30,.02,.18,1) both .15s; }
@keyframes aproximar {
0% {
opacity: 0;
transform: translate(-50%,0) translateZ(560px) rotateX(15deg) rotateZ(-7deg);
filter: blur(12px) drop-shadow(0 34px 44px rgba(0,0,0,.26));
}
16% { opacity: .55; }
40% {
opacity: 1;
transform: translate(-50%,0) translateZ(104px) rotateX(4deg) rotateZ(-1.6deg);
filter: blur(1.8px) drop-shadow(0 18px 24px rgba(0,0,0,.34));
}
50% { /* IMPACTO — 1.20s */
opacity: 1;
transform: translate(-50%,0) translateZ(0) rotateX(0) rotateZ(0);
filter: blur(0) drop-shadow(0 7px 10px rgba(0,0,0,.42));
}
58% {
transform: translate(-50%,0) translateZ(30px) rotateX(1.2deg) rotateZ(.7deg);
filter: blur(0) drop-shadow(0 13px 17px rgba(0,0,0,.32));
}
100% {
opacity: 0;
transform: translate(-50%,0) translateZ(520px) rotateX(13deg) rotateZ(5deg);
filter: blur(14px) drop-shadow(0 34px 44px rgba(0,0,0,.12));
}
}
/* a borracha esmaga no toque e volta — só funciona porque o SVG
está inline; dentro de ![]()
o CSS não alcançaria este grupo. */
@keyframes comprimir {
0%, 44% { transform: scaleY(1); }
50% { transform: scaleY(.62); }
61% { transform: scaleY(1.06); }
72%,100% { transform: scaleY(1); }
}
.carimbo-pad { transform-box: fill-box; transform-origin: 50% 100%; }
/* o selo não voa: ele é revelado pela pancada, em 1.20s cravados */
.carimbo-cena--fisico .carimbo { animation: revelar 1.05s cubic-bezier(.2,.7,.3,1) both .93s; }
@keyframes revelar {
0% { opacity: 0; transform: scale(1.08); }
20% { opacity: 0; }
26% { opacity: 1; transform: scale(.955); } /* aparece na pancada */
42% { transform: scale(1.02); }
60% { transform: scale(.99); }
100% { opacity: 1; transform: none; }
}
/* poeira de tinta que salta do impacto */
.carimbo-po { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.carimbo-po i {
position: absolute; left: 50%; top: 42%;
width: var(--r, 4px); height: var(--r, 4px); border-radius: 50%;
background: var(--ambar); opacity: 0;
}
.carimbo-cena.rodando .carimbo-po i { animation: salpicar 1s ease-out both; }
@keyframes salpicar {
0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
10% { opacity: .9; }
100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.18); }
}
@media (prefers-reduced-motion: reduce) {
.carimbo-fisico, .carimbo-po { display: none; }
.carimbo-cena--fisico .carimbo { animation: none; opacity: 1; }
}
@media (max-width: 800px) { .carimbo-fisico { width: 62%; } }
/* o nome da empresa aparece mesmo quando a logo é só o símbolo */
.mural__marca { font-size: .96rem; font-weight: 600; letter-spacing: -.005em; margin-bottom: 3px; }
.section--ink .mural__marca { color: #fff; }
.mural__placa { min-height: 112px; }
/* ============================================================
v5 — CAMADAS DE CONFIANÇA
Empilhamento que se monta ao entrar na tela: cada camada
entra por baixo da anterior, como sedimento.
============================================================ */
.camadas { display: grid; gap: 14px; counter-reset: camada; }
.camada {
display: grid; grid-template-columns: 62px 1fr auto; gap: 26px; align-items: center;
padding: 26px 30px; border-radius: var(--radius); position: relative;
background: var(--ink-2); border: 1px solid var(--linha-ink);
transform: translateX(-26px); opacity: 0;
transition: transform .7s var(--ease), opacity .7s var(--ease), border-color .3s var(--ease);
transition-delay: var(--atraso, 0ms);
}
.camadas.visivel .camada { transform: none; opacity: 1; }
.camada:hover { border-color: var(--ambar); }
.camada::before {
counter-increment: camada; content: counter(camada, decimal-leading-zero);
font-family: var(--mono); font-size: 1.5rem; color: var(--ambar); letter-spacing: -.02em;
}
.camada__t { font-size: 1.08rem; font-weight: 600; color: #fff; }
.camada__d { font-size: .9rem; color: var(--sobre-ink-mudo); margin-top: 5px; }
.camada__q { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--ambar); white-space: nowrap; }
.camada--soma {
background: linear-gradient(100deg, var(--bronze), var(--ambar-esc));
border-color: transparent;
}
.camada--soma::before { color: rgba(255,255,255,.7); }
.camada--soma .camada__d { color: #FFFFFF; opacity: .95; }
.camada--soma .camada__q { color: #FFFFFF; }
/* --- dois lados --- */
.lados { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.lado { padding: 44px 40px; }
.lado + .lado { border-left: 1px solid var(--line); }
.lado--indica { background: var(--paper-2); }
.lado--contrata { background: #fff; }
.lado__t { font-family: var(--display); font-size: 1.9rem; line-height: 1.14; margin: 14px 0 18px;
font-variation-settings: "opsz" 72, "wght" 400, "SOFT" 0, "WONK" 0; }
.lado__preco {
margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--ambar-esc);
}
/* --- comparação de custo --- */
.custo { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.custo__linha { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0; }
.custo__linha + .custo__linha { border-top: 1px solid var(--line); }
.custo__linha--cab { background: var(--paper); }
.custo__cel { padding: 20px 24px; font-size: .93rem; }
.custo__cel + .custo__cel { border-left: 1px solid var(--line); }
.custo__linha--cab .custo__cel { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em;
text-transform: uppercase; color: var(--muted); }
.custo__cel--sozinho { color: var(--red); }
.custo__cel--inev { color: var(--green); font-weight: 500; background: var(--green-bg); }
.custo__linha--cab .custo__cel--inev { background: var(--green-bg); color: var(--green); }
.custo__cel strong { display: block; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
@media (max-width: 900px) {
.lados { grid-template-columns: 1fr; }
.lado + .lado { border-left: 0; border-top: 1px solid var(--line); }
.custo__linha { grid-template-columns: 1fr; }
.custo__cel + .custo__cel { border-left: 0; border-top: 1px solid var(--line); }
.custo__linha--cab { display: none; }
.camada { grid-template-columns: 46px 1fr; }
.camada__q { grid-column: 2; }
}
/* ============================================================
v6 — O GUARDA-CHUVA
Quatro passos sob um mesmo arco de cobertura.
============================================================ */
.guarda { position: relative; padding-top: 58px; }
.guarda__arco {
position: absolute; top: 0; left: 0; right: 0; height: 42px;
border: 2px solid var(--ambar); border-bottom: 0;
border-radius: 26px 26px 0 0;
}
.guarda__arco::after {
content: attr(data-rotulo); position: absolute; top: -11px; left: 50%;
transform: translateX(-50%); background: var(--ink); padding: 0 18px;
font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--ambar); white-space: nowrap;
}
.section--petroleo .guarda__arco::after { background: var(--petroleo); }
.section--alt .guarda__arco::after { background: var(--paper-2); }
.guarda__passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.passo {
border: 1px solid var(--linha-ink); border-radius: var(--radius); padding: 26px 24px;
background: var(--ink-2); position: relative;
transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.section--petroleo .passo { background: var(--petroleo-2); border-color: rgba(255,255,255,.14); }
.passo:hover { transform: translateY(-4px); border-color: var(--ambar); }
.passo__n {
width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
justify-content: center; background: var(--ambar); color: var(--ink);
font-family: var(--mono); font-size: .8rem; font-weight: 500; margin-bottom: 16px;
}
.passo__t { font-size: 1.02rem; font-weight: 600; color: #fff; margin-bottom: 7px; }
.passo__d { font-size: .88rem; color: var(--sobre-ink-mudo); }
.section--petroleo .passo__d { color: var(--sobre-petroleo-mudo); }
.passo__tempo {
margin-top: 14px; font-family: var(--mono); font-size: .62rem; letter-spacing: .13em;
text-transform: uppercase; color: var(--ambar);
}
/* --- comparação: catálogo aberto x catálogo com porta --- */
.porta { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.porta__lado { padding: 38px 34px; }
.porta__lado + .porta__lado { border-left: 1px solid var(--line); }
.porta__lado--aberto { background: var(--paper-2); }
.porta__lado--curado { background: var(--ink); color: var(--sobre-ink); }
.porta__lado--curado h3 { color: #fff; }
.porta__lado--curado .checks li { color: var(--sobre-ink); }
.porta__lado--curado .checks li::before { border-color: var(--ambar); }
.porta__t { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
text-transform: uppercase; margin-bottom: 14px; }
.porta__lado--aberto .porta__t { color: var(--muted); }
.porta__lado--curado .porta__t { color: var(--ambar); }
.porta h3 { font-family: var(--display); font-size: 1.6rem; margin-bottom: 18px;
font-variation-settings: "opsz" 72, "wght" 400, "SOFT" 0, "WONK" 0; }
/* --- motor de marketing --- */
.motor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.section--ink .motor, .section--petroleo .motor { background: var(--linha-ink); border-color: var(--linha-ink); }
.motor__item { background: #fff; padding: 30px 28px; }
.section--ink .motor__item { background: var(--ink-2); }
.section--petroleo .motor__item { background: var(--petroleo-2); }
.motor__k { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--ambar-esc); margin-bottom: 11px; }
.section--ink .motor__k, .section--petroleo .motor__k { color: var(--ambar); }
.motor__t { font-size: 1.02rem; font-weight: 600; margin-bottom: 8px; }
.section--ink .motor__t, .section--petroleo .motor__t { color: #fff; }
.motor__d { font-size: .89rem; color: var(--muted); }
.section--ink .motor__d { color: var(--sobre-ink-mudo); }
.section--petroleo .motor__d { color: var(--sobre-petroleo-mudo); }
@media (max-width: 1000px) {
.guarda__passos { grid-template-columns: repeat(2, 1fr); }
.motor { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
.guarda { padding-top: 44px; }
.guarda__passos, .motor, .porta { grid-template-columns: 1fr; }
.porta__lado + .porta__lado { border-left: 0; border-top: 1px solid var(--line); }
}
/* ============================================================
v7 — ILUSTRAÇÕES
Traço único, mesma espessura da marca. Desenham-se sozinhas
ao entrar na tela (o comprimento de cada traçado é medido em
JS, ver bloco 3e do app.js).
============================================================ */
.il { width: 100%; max-width: 260px; height: auto; stroke-width: 3.6; overflow: visible; }
.il-t { stroke: var(--ink); }
.il-m { stroke: var(--muted); }
.il-a { stroke: var(--ambar-esc); }
.section--ink .il-t, .section--petroleo .il-t { stroke: #fff; }
.section--ink .il-m { stroke: var(--sobre-ink-mudo); }
.section--petroleo .il-m { stroke: var(--sobre-petroleo-mudo); }
.section--ink .il-a, .section--petroleo .il-a { stroke: var(--ambar); }
.faixa-ambar .il-t { stroke: var(--ink); }
.faixa-ambar .il-m { stroke: #6B4708; }
.faixa-ambar .il-a { stroke: #3D2804; }
.il--desenhar path, .il--desenhar circle {
stroke-dasharray: var(--comp); stroke-dashoffset: var(--comp);
}
.il--desenhar.visivel path, .il--desenhar.visivel circle {
animation: tracar 1.3s cubic-bezier(.5,.05,.2,1) forwards;
animation-delay: var(--espera, 0ms);
}
@keyframes tracar { to { stroke-dashoffset: 0; } }
/* o selo da ilustração gira de leve ao terminar de desenhar */
.il--desenhar.visivel .il-selo { animation: girar-selo .8s var(--ease) 1.1s both; }
@keyframes girar-selo {
from { transform: rotate(-14deg) scale(.86); transform-origin: 146px 132px; }
to { transform: none; transform-origin: 146px 132px; }
}
/* bloco de seção com ilustração ao lado */
.com-ilustra { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 54px; align-items: center; }
.com-ilustra--inverso { grid-template-columns: 260px minmax(0,1fr); }
@media (max-width: 900px) {
.com-ilustra, .com-ilustra--inverso { grid-template-columns: 1fr; gap: 34px; }
.com-ilustra .il { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.il--desenhar path, .il--desenhar circle { stroke-dasharray: none; stroke-dashoffset: 0; }
.il--desenhar.visivel .il-selo { animation: none; }
}
/* ============================================================
v7 — FAIXA DE VAGAS NO TOPO
Logo abaixo do menu, em todas as páginas. Fina, discreta e
sempre em movimento — lembra que o registro está aberto.
============================================================ */
.faixa-vagas {
border-top: 1px solid var(--line); background: var(--ink); color: var(--sobre-ink);
overflow: hidden; height: 38px; display: flex; align-items: center;
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.nav--sobre-escuro .faixa-vagas { border-top-color: var(--linha-ink); }
.faixa-vagas__fita { display: flex; width: max-content; animation: correr 58s linear infinite; }
.faixa-vagas:hover .faixa-vagas__fita { animation-play-state: paused; }
.faixa-vagas__item {
display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; white-space: nowrap;
font-size: .78rem; color: var(--sobre-ink);
}
.faixa-vagas__item::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--ambar); flex: none; animation: piscar 2.6s ease-in-out infinite;
}
.faixa-vagas__item b { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--ambar); font-weight: 500; }
.faixa-vagas__item--forte { color: #fff; font-weight: 500; }
@keyframes piscar { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@media (max-width: 800px) { .faixa-vagas { height: 34px; } .faixa-vagas__item { font-size: .72rem; padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) {
.faixa-vagas__fita { animation: none; }
.faixa-vagas__item::before { animation: none; }
}
/* ============================================================
v8 — SELO DE ESTÁGIO
Marca o que ainda não está vigente. Feio de propósito: tem
que interromper a leitura, não decorar a página.
============================================================ */
.estagio-selo {
display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;
padding: 5px 13px 5px 11px; border-radius: 100px; margin-left: 12px;
font-family: var(--mono); font-size: .6rem; letter-spacing: .13em;
text-transform: uppercase; font-weight: 500;
background: var(--amber-bg); color: var(--amber); border: 1px dashed #C9A94A;
}
.estagio-selo::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: currentColor; animation: piscar 2.2s ease-in-out infinite;
}
.section--ink .estagio-selo, .section--petroleo .estagio-selo {
background: rgba(232,163,61,.16); color: var(--ambar-lt); border-color: rgba(232,163,61,.5);
}
.faixa-ambar .estagio-selo { background: rgba(14,21,25,.12); color: #3D2804; border-color: #3D2804; }
.aviso-estagio {
border: 1px dashed #C9A94A; background: var(--amber-bg); color: #6B4708;
border-radius: var(--radius); padding: 20px 24px; font-size: .92rem; line-height: 1.6;
}
.aviso-estagio strong { color: #4A3105; }
.section--ink .aviso-estagio, .section--petroleo .aviso-estagio {
background: rgba(232,163,61,.12); border-color: rgba(232,163,61,.55); color: #F0D9A8;
}
.section--ink .aviso-estagio strong, .section--petroleo .aviso-estagio strong { color: #fff; }
.faixa-ambar .aviso-estagio { background: rgba(14,21,25,.1); border-color: #3D2804; color: #3A2A0C; }
.faixa-ambar .aviso-estagio strong { color: var(--ink); }
/* ============================================================
v8 — QUADRO DE ESTÁGIO DO INSTITUTO
============================================================ */
.estagio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.section--ink .estagio, .section--petroleo .estagio { background: var(--linha-ink); border-color: var(--linha-ink); }
.estagio__col { background: #fff; padding: 30px 28px; }
.section--ink .estagio__col { background: var(--ink-2); }
.section--petroleo .estagio__col { background: var(--petroleo-2); }
.estagio__t { display: flex; align-items: center; gap: 9px; font-family: var(--mono);
font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.estagio__t::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.estagio__col--ativo .estagio__t { color: var(--green); }
.estagio__col--ativo .estagio__t::before { background: var(--green); }
.estagio__col--curso .estagio__t { color: var(--ambar-esc); }
.estagio__col--curso .estagio__t::before { background: var(--ambar); animation: piscar 2.2s ease-in-out infinite; }
.estagio__col--futuro .estagio__t { color: var(--muted); }
.estagio__col--futuro .estagio__t::before { background: var(--muted); opacity: .5; }
.section--ink .estagio__col--ativo .estagio__t { color: #8FD3BA; }
.section--ink .estagio__col--ativo .estagio__t::before { background: #8FD3BA; }
.section--ink .estagio__col--curso .estagio__t { color: var(--ambar); }
.section--ink .estagio__col--futuro .estagio__t { color: var(--sobre-ink-mudo); }
.estagio ul { list-style: none; margin: 0; padding: 0; }
.estagio li { font-size: .9rem; padding-left: 22px; position: relative; margin-bottom: 11px; color: var(--ink-2); }
.section--ink .estagio li { color: var(--sobre-ink); }
.estagio li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 1px; background: currentColor; opacity: .45; }
.estagio__prazo { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--muted); }
.section--ink .estagio__prazo { border-top-color: var(--linha-ink); color: var(--sobre-ink-mudo); }
@media (max-width: 900px) { .estagio { grid-template-columns: 1fr; } }
/* ============================================================
v6 — PASSE CLEAN
Menos caixa, menos borda, menos peso, mais ar. As regras vêm
por último de propósito: este bloco é uma camada de acabamento
sobre o sistema, não uma reescrita dele. Para voltar ao visual
anterior basta apagar daqui até o fim do arquivo.
============================================================ */
:root {
/* papel mais limpo, linhas mais finas de tom */
--paper: #FCFBF8;
--paper-2: #F5F2EB;
--paper-3: #ECE7DC;
--line: #E7E2D8;
--line-2: #CFC8BA;
--radius: 0px; /* canto reto: é o que moderniza mais rápido */
--wrap: 1280px;
}
/* --- Tipografia: display em sans, apertada -------------------
O serif ficou reservado a um único bloco por página (.pull).
Espalhado, ele puxava o site para o editorial; concentrado em
um lugar só, vira ênfase. */
.display-xl, .display-l, .display-m, .display-s {
font-family: var(--sans);
font-variation-settings: normal;
font-weight: 500;
}
.display-xl { font-size: clamp(2.9rem, 7.4vw, 5.6rem); line-height: .96; letter-spacing: -.042em; }
.display-l { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.07; letter-spacing: -.032em; }
.display-m { font-size: clamp(1.65rem, 2.8vw, 2.2rem); line-height: 1.18; letter-spacing: -.026em; }
.display-s { font-size: clamp(1.28rem, 2vw, 1.5rem); line-height: 1.3; letter-spacing: -.018em; }
.pull { font-family: var(--display); letter-spacing: -.028em; }
body { font-size: 17px; line-height: 1.66; }
.lead { font-size: 1.2rem; line-height: 1.62; letter-spacing: -.008em; }
.eyebrow { font-size: .645rem; letter-spacing: .22em; margin-bottom: 1.35rem; }
.eyebrow::before { width: 18px; }
/* --- Ar ------------------------------------------------------ */
.section { padding: 132px 0; }
.section--tight { padding: 84px 0; }
.wrap, .wrap-narrow { padding: 0 34px; }
.grid { gap: 44px 40px; }
.split { gap: 78px; }
.mt-l { margin-top: 68px; }
.mb-l { margin-bottom: 68px; }
/* --- Cards viram blocos abertos ------------------------------
Some a caixa branca: fica a régua fina em cima e o texto. É a
troca que mais aproxima o site da referência. Os cards com
fundo declarado no HTML continuam sólidos de propósito — um
bloco preenchido no meio de blocos abertos vira destaque. */
.card {
background: transparent;
border: 0; border-top: 1px solid var(--line);
padding: 26px 0 0;
}
.card__k { font-size: .655rem; letter-spacing: .17em; margin-bottom: 14px; }
.card h3 { font-size: 1.14rem; font-weight: 500; letter-spacing: -.017em; margin-bottom: 11px; }
.card p { font-size: .95rem; color: var(--muted); }
.section--ink .card,
.section--petroleo .card { background: transparent; border: 0; border-top: 1px solid var(--linha-ink); }
/* cartões clicáveis mantêm a caixa: sem ela não se lê como botão */
.card--link {
border: 1px solid var(--line); padding: 34px 32px;
transition: border-color .25s var(--ease), background .25s var(--ease);
}
.card--link:hover { transform: none; border-color: var(--ink); background: #fff; }
.section--ink .card--link,
.section--petroleo .card--link { border: 1px solid var(--linha-ink); }
.section--ink .card--link:hover,
.section--petroleo .card--link:hover { border-color: var(--linha-ink-2); background: rgba(255,255,255,.04); }
/* --- Botões: retos, largos, com respiro ---------------------- */
.btn {
padding: 17px 34px; letter-spacing: .012em; font-weight: 500;
transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn--sm { padding: 10px 18px; }
/* --- Menos sombra, menos salto ------------------------------- */
.mural, .flow, .balanca, .reg-list, .table-wrap, .wheel__node, .doc-link { box-shadow: none; }
.doc-link:hover { transform: none; border-color: var(--ink); }
/* --- Régua fina no lugar de fundo alternado ------------------
.section--alt existia só para separar seções. Uma linha basta,
e o site deixa de ter faixas de cinza sem função. */
.section--alt { background: transparent; border-top: 1px solid var(--line); }
@media (max-width: 800px) {
.section { padding: 84px 0; }
.section--tight { padding: 58px 0; }
.wrap, .wrap-narrow { padding: 0 22px; }
.grid { gap: 34px 28px; }
.split { gap: 44px; }
}
/* ============================================================
v7 — FOTOGRAFIA
Retratos e faixas sangradas. A faixa sangrada é o único
elemento do site que ignora o container: é ela que quebra o
ritmo de "tudo dentro de 1280px" e dá escala à página.
============================================================ */
.retrato-split {
display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
gap: 64px; align-items: end;
}
.retrato { margin: 0; }
.retrato img {
width: 100%; height: auto; display: block;
background: var(--paper-2);
}
.retrato figcaption {
margin-top: 14px; font-family: var(--mono); font-size: .68rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
line-height: 1.5;
}
.section--ink .retrato figcaption,
.section--petroleo .retrato figcaption { color: var(--sobre-ink-mudo); }
.retrato--largo { max-width: 420px; }
/* --- faixa de imagem sangrada ------------------------------- */
.faixa-foto {
position: relative; overflow: hidden; background: var(--ink);
min-height: clamp(340px, 56vh, 560px);
display: grid; align-items: end;
}
.faixa-foto > img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center 38%;
}
/* O véu segura a opacidade alta por toda a faixa onde o texto pousa
(0 a ~34% a partir da base) e só então abre. Com um degradê suave
demais, um título branco sobre uma foto clara caía para 3.78:1 —
abaixo de AA. Aqui o pior caso fica acima de 9:1. */
.faixa-foto::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top,
rgba(11,18,21,.82) 0%,
rgba(11,18,21,.78) 22%,
rgba(11,18,21,.74) 36%,
rgba(11,18,21,.44) 64%,
rgba(11,18,21,.10) 100%);
}
.faixa-foto__txt {
position: relative; z-index: 2;
width: 100%; max-width: var(--wrap); margin: 0 auto;
padding: 0 34px 58px; color: #fff;
}
.faixa-foto__txt .eyebrow { color: var(--ambar-lt); }
.faixa-foto__txt p { color: rgba(255,255,255,.86); max-width: 46ch; }
/* espaço reservado enquanto a foto não existe */
.faixa-foto--vazia { background: var(--ink-2); }
.faixa-foto--vazia::before {
content: ""; position: absolute; inset: 18px;
border: 1px dashed rgba(255,255,255,.30);
}
.faixa-foto__spec {
position: absolute; z-index: 3; top: 34px; left: 50%; transform: translateX(-50%);
font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
color: #F0D9A8; text-align: center; line-height: 1.7; padding: 0 20px;
}
@media (max-width: 800px) {
.retrato-split { grid-template-columns: 1fr; gap: 30px; align-items: start; }
.retrato { max-width: 320px; }
.faixa-foto__txt { padding: 0 22px 40px; }
}
@media (prefers-reduced-motion: no-preference) {
.faixa-foto > img { will-change: auto; }
}
/* ============================================================
v8 — CABEÇALHO À PROVA DE CORTE
O topo aparecia cortado ao abrir o site. Duas causas somadas:
1. .nav__inner tinha ALTURA FIXA de 76px. Qualquer crescimento
do conteúdo (a assinatura ganhou uma linha, o corpo subiu
para 17px, os botões ficaram maiores) transbordava.
2. .hero era puxado para cima em -76px para correr por baixo
do cabeçalho translúcido — mas o cabeçalho passou a ter a
faixa de vagas junto e mede ~115px. A conta nunca mais
fechou, e o herói escuro subia por cima da marca.
A correção elimina as duas de uma vez: altura mínima em vez de
fixa, e nenhuma sobreposição. O cabeçalho ocupa o espaço dele.
============================================================ */
.nav__inner {
height: auto; min-height: var(--nav-h);
padding-top: 13px; padding-bottom: 13px;
flex-wrap: wrap; row-gap: 12px;
}
.nav { background: var(--paper); backdrop-filter: none; }
.nav--sobre-escuro { background: var(--ink); border-bottom-color: var(--linha-ink); }
.hero {
margin-top: 0;
padding-top: clamp(72px, 9vw, 118px);
padding-bottom: clamp(64px, 8vw, 96px);
}
html { scroll-padding-top: calc(var(--nav-h) + 46px); }
@media (max-width: 800px) {
.hero { padding-top: 58px; padding-bottom: 52px; }
.nav__links { top: auto; }
}
/* ============================================================
v9 — CENAS DE ROLAGEM
Cada [data-cena] recebe duas variáveis do app.js:
--e entrada: 0 quando o elemento surge por baixo, 1 quando
já subiu o suficiente para estar assentado
--p travessia: 0 a 1 ao longo de toda a passagem pela janela,
usado no parallax (precisa continuar variando
depois que o elemento já entrou)
Um único listener de scroll passivo, limitado a um quadro,
alimenta todos os efeitos. Sem --p definido, tudo assume o
estado final: se o JS falhar, a página fica correta parada.
============================================================ */
/* --- retrato recortado, com o texto contornando a silhueta --- */
.com-recorte { max-width: 1000px; margin: 0 auto; }
.com-recorte::after { content: ""; display: block; clear: both; }
.recorte {
float: right;
width: min(44%, 372px);
margin: 2px 0 18px 44px;
/* o texto acompanha o contorno do corpo, não uma caixa */
shape-outside: url("fotos/andrey-borges-recorte.webp");
shape-image-threshold: .45;
shape-margin: 22px;
transform: translateY(calc((1 - var(--e, 1)) * 72px));
opacity: calc(.12 + var(--e, 1) * .88);
transform-origin: 50% 100%;
}
.recorte-legenda {
clear: right; text-align: right;
font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-top: 10px;
}
/* --- parallax das faixas sangradas --------------------------- */
.faixa-foto > img {
transform: translateY(calc((var(--p, .5) - .5) * -76px)) scale(1.16);
}
/* --- as réguas se desenham conforme a página desce ----------- */
.section--alt { background-image: none; }
.regua-viva {
height: 1px; border: 0; margin: 0;
background: var(--line-2);
transform: scaleX(var(--e, 1)); transform-origin: 0 50%;
}
@media (max-width: 800px) {
.recorte {
float: none; shape-outside: none;
width: 240px; margin: 0 auto 26px; display: block;
}
.recorte-legenda { text-align: center; }
.faixa-foto > img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.recorte { transform: none; opacity: 1; }
.faixa-foto > img { transform: scale(1.02); }
.regua-viva { transform: none; }
}
/* o retrato agora é recorte com alpha: um fundo pintado atrás dele
apareceria como um retângulo claro em volta da silhueta */
.retrato img { background: transparent; }
.retrato--largo { max-width: 360px; }
.section--petroleo .retrato img,
.section--ink .retrato img { filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
/* ============================================================
v10 — FAIXA EM VÍDEO
A mesma faixa sangrada aceita