/* ============================================================
Azenit — landing page
Tema creme, painéis empilhados (sticky) na rolagem.
============================================================ */
:root {
/* superfícies */
--ground: #ebe3d4; /* fundo da página, atrás dos cards */
--bg: #f6f1e7;
--bg-2: #fbf8f1;
--surface: #fffdf9;
--surface-2: #fffefc;
--line: #e2d8c6;
--line-soft: #ece4d6;
/* texto */
--text: #191710;
--text-muted: #5b5445;
--text-dim: #7a7263;
/* acentos */
--accent: #2f4acd;
--accent-hover: #3a55dd;
--accent-tint: #e9ecfb;
--accent-2: #0f9e76;
--ok: #0a6e52;
/* superfície escura (rodapé): tons quentes para casar com o creme */
--tinta: #1c1a15;
--tinta-texto: #efe9dd;
--tinta-muted: #a8a094;
--tinta-dim: #877f72;
--tinta-accent: #8ba0f8;
--tinta-accent-2: #35d6a1;
--erro: #b03b39;
/* dourado e marinho da trama, reusados na linha do tempo */
--dourado: #dcb44a;
--azul-escuro: #1b3a6b;
--radius: 14px;
--radius-lg: 20px;
--panel-radius: 24px;
--container: 1140px;
--header-h: 66px;
/* recuo dos cards e respiro interno: o header e o rodapé reusam para alinhar */
--gutter: clamp(14px, 3.5vw, 44px);
--card-pad: clamp(20px, 3vw, 40px);
/* Trama de pontos do fundo: base em azul marinho a cada 24px e dois
retículos dourados esparsos (a cada 6 e a cada 7/8 pontos, com deslocamento
diferente) — múltiplos da base, então os dourados caem exatamente sobre
pontos da grade em vez de flutuar entre eles. */
--pontos: url("data:image/svg+xml, */
.svg-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
/* ── Barra de progresso ─────────────────────────────────── */
.scroll-progress {
position: fixed;
inset: 0 0 auto;
height: 2px;
z-index: 60;
pointer-events: none;
}
.scroll-progress span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
/* ── Header ─────────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 50;
height: var(--header-h);
display: flex;
align-items: center;
background: rgba(235, 227, 212, .8);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;
transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled {
border-bottom-color: var(--line);
background: rgba(235, 227, 212, .95);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--accent);
flex-shrink: 0;
}
.brand-mark { width: 26px; height: 26px; }
.brand-name {
color: var(--text);
font-size: 1.12rem;
font-weight: 640;
letter-spacing: -.02em;
}
.nav {
display: flex;
align-items: center;
gap: 26px;
}
.nav-list {
display: flex;
align-items: center;
gap: 24px;
}
.nav-list a {
position: relative;
font-size: .925rem;
color: var(--text-muted);
transition: color .2s var(--ease);
}
.nav-list a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 1.5px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s var(--ease);
}
.nav-list a:hover,
.nav-list a.is-active { color: var(--text); }
.nav-list a.is-active::after { transform: scaleX(1); }
.nav-toggle {
display: none;
width: 42px;
height: 42px;
padding: 0;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 18px;
height: 1.5px;
margin: 3.5px auto;
background: var(--text);
transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* ── Botões ─────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 22px;
border: 1px solid transparent;
border-radius: 10px;
font: inherit;
font-size: .95rem;
font-weight: 560;
cursor: pointer;
white-space: nowrap;
transition: transform .2s var(--ease), background .2s var(--ease),
border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.btn-sm { padding: 9px 16px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-primary {
background: var(--accent);
color: #fff;
box-shadow: 0 10px 22px -14px rgba(47, 74, 205, .9);
}
.btn-primary:hover {
background: var(--accent-hover);
transform: translateY(-1px);
}
.btn-ghost {
background: transparent;
border-color: var(--line);
color: var(--text);
}
.btn-ghost:hover {
border-color: #cdbfa6;
background: rgba(255, 255, 255, .6);
}
/* ── Painéis empilhados ─────────────────────────────────── */
/* Cada seção é um card que não ocupa a tela inteira: sobra fundo em volta,
então dá para ver a pilha e o card seguinte subindo por baixo. */
.stack {
position: relative;
padding: 14px var(--gutter) 0;
}
.panel {
position: sticky;
top: calc(var(--header-h) + var(--peek, 0px));
/* piso baixo, só para o card curto não virar tarja: a altura real vem do
conteúdo. Em px no teto, senão telas altas voltam a criar espaço morto */
min-height: min(48vh, 430px);
max-width: 1240px;
margin: 0 auto 12px;
display: flex;
align-items: center;
padding: clamp(28px, 3.8vh, 48px) 0;
overflow: hidden;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--panel-radius);
box-shadow: var(--shadow-panel);
scroll-margin-top: calc(var(--header-h) + 16px);
}
/* dentro do card quem limita a largura é o próprio card */
.panel > .container {
position: relative;
max-width: none;
padding-inline: var(--card-pad);
}
/* o header é full-bleed, então alinha somando recuo do card + respiro interno */
.site-header .container {
max-width: calc(1240px + 2 * var(--gutter));
padding-inline: calc(var(--gutter) + var(--card-pad));
}
/* o rodapé já é um card, então só o respiro interno */
.site-footer .container {
max-width: none;
padding-inline: var(--card-pad);
}
/* alterna o creme para o empilhamento ficar legível */
.panel:nth-child(even) { background: var(--bg-2); }
/* cada painel para um pouco mais abaixo: aparece a borda do card anterior */
.panel:nth-child(2) { --peek: 8px; }
.panel:nth-child(3) { --peek: 16px; }
.panel:nth-child(4) { --peek: 24px; }
.panel:nth-child(5) { --peek: 32px; }
.panel:nth-child(6) { --peek: 40px; }
.panel:nth-child(7) { --peek: 48px; }
.panel-hero {
/* mais alto que os demais porque a arte 3D mede ~435px */
min-height: min(64vh, 560px);
background:
radial-gradient(120% 80% at 78% 0%, rgba(47, 74, 205, .1), transparent 62%),
radial-gradient(90% 70% at 5% 100%, rgba(15, 158, 118, .09), transparent 60%),
var(--bg);
}
/* ── Hero ───────────────────────────────────────────────── */
/* ── Arte do hero: esfera armilar em CSS 3D ─────────────── */
.hero-art {
position: absolute;
top: 44%;
right: clamp(-52px, -2.2vw, -14px);
width: clamp(360px, 35vw, 500px);
aspect-ratio: 1;
transform: translateY(-50%);
perspective: 1100px;
pointer-events: none;
}
.art-halo {
position: absolute;
inset: -12%;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, rgba(47, 74, 205, .13), transparent 62%),
radial-gradient(circle at 62% 62%, rgba(15, 158, 118, .1), transparent 58%);
animation: art-respira 12s var(--ease) infinite;
}
.art-cena {
position: absolute;
inset: 0;
transform-style: preserve-3d;
/* o primeiro quadro já é a pose final: com movimento desligado, as camadas
continuam em perspectiva em vez de ficarem chapadas */
transform: rotateX(7deg) rotateY(-25deg) translateY(0);
animation: art-flutua 18s ease-in-out infinite;
}
/* as três camadas: o translateZ é o que cria a profundidade de verdade */
.art-camada {
position: absolute;
border-radius: 16px;
transform-style: preserve-3d;
}
.art-camada-malha {
left: 38%;
top: 4%;
width: 58%;
height: 42%;
transform: translateZ(-120px);
border: 1px solid rgba(47, 74, 205, .18);
background-image: radial-gradient(rgba(47, 74, 205, .3) 1.2px, transparent 1.2px);
background-size: 18px 18px;
opacity: .7;
}
.art-camada-blocos {
left: 26%;
top: 20%;
width: 58%;
height: 42%;
transform: translateZ(-40px);
border: 1px solid var(--line);
background: rgba(255, 253, 249, .82);
box-shadow: 0 20px 34px -26px rgba(60, 46, 20, .7);
}
.art-bloco {
position: absolute;
border-radius: 6px;
background: rgba(47, 74, 205, .16);
border: 1px solid rgba(47, 74, 205, .3);
}
.art-bloco-1 { left: 12%; top: 18%; width: 30%; height: 22%; }
.art-bloco-2 { right: 12%; top: 18%; width: 30%; height: 22%; }
.art-bloco-3 { left: 50%; bottom: 16%; width: 34%; height: 24%; transform: translateX(-50%); background: rgba(15, 158, 118, .14); border-color: rgba(15, 158, 118, .32); }
.art-fio {
position: absolute;
height: 1px;
background: rgba(47, 74, 205, .35);
}
.art-fio-1 { left: 27%; top: 29%; width: 46%; }
.art-fio-2 { left: 50%; top: 29%; width: 1px; height: 31%; }
.art-pulso {
position: absolute;
left: 27%;
top: 29%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: var(--accent);
animation: art-corre 4.5s var(--ease) infinite;
}
.art-camada-codigo {
left: 2%;
top: 36%;
width: 60%;
height: 44%;
padding: 26px 18px 18px;
transform: translateZ(70px);
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(255, 253, 249, .96);
box-shadow: 0 30px 44px -28px rgba(60, 46, 20, .75);
}
.art-barra-topo {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 18px;
border-bottom: 1px solid var(--line-soft);
border-radius: 14px 14px 0 0;
background: rgba(235, 227, 212, .5);
}
.art-linha,
.art-cursor {
display: block;
height: 6px;
margin: 0 0 9px var(--ind, 0);
border-radius: 3px;
width: var(--w, 30%);
background: rgba(25, 23, 16, .2);
transform-origin: left center;
animation: art-escreve 13s ease-in-out infinite;
animation-delay: calc(var(--i) * .3s);
}
.art-linha-azul { background: rgba(47, 74, 205, .55); }
.art-linha-verde { background: rgba(15, 158, 118, .55); }
.art-cursor {
width: 9px;
height: 12px;
border-radius: 2px;
background: var(--accent);
/* só pisca: somar o art-escreve brigaria pela mesma propriedade opacity */
animation: art-pisca 1.1s steps(1) infinite;
}
@keyframes art-flutua {
0%, 100% { transform: rotateX(7deg) rotateY(-25deg) translateY(0); }
50% { transform: rotateX(5deg) rotateY(-19deg) translateY(-12px); }
}
/* apaga e reescreve: 0% e 100% são o estado completo, então parado fica cheio */
@keyframes art-escreve {
0%, 46% { transform: scaleX(1); opacity: 1; }
53%, 63% { transform: scaleX(0); opacity: 0; }
73%, 100% { transform: scaleX(1); opacity: 1; }
}
@keyframes art-pisca {
0%, 49% { opacity: 1; }
50%, 100% { opacity: .15; }
}
/* percentagem em translate se refere ao próprio tamanho (6px), então o
percurso é feito com left/top, que se referem à camada */
@keyframes art-corre {
0% { left: 27%; top: 29%; opacity: 0; }
10%, 55% { opacity: 1; }
55% { left: 73%; top: 29%; }
72% { left: 73%; top: 29%; }
100% { left: 73%; top: 60%; opacity: 0; }
}
@keyframes art-respira {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .78; transform: scale(1.05); }
}
@media (max-width: 1023px) {
.hero-art { display: none; }
}
.eyebrow {
margin: 0 0 16px;
font-size: .78rem;
font-weight: 640;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
}
.hero-title {
max-width: 20ch;
font-size: clamp(2rem, 4.6vw, 3.3rem);
letter-spacing: -.035em;
font-weight: 660;
text-wrap: balance;
}
.hero-lead {
max-width: 58ch;
margin-top: 4px;
font-size: clamp(1rem, 1.5vw, 1.12rem);
color: var(--text-muted);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.hero-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin-top: clamp(32px, 6vh, 60px);
background: var(--line-soft);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
overflow: hidden;
}
.hero-facts li {
display: flex;
flex-direction: column;
gap: 3px;
padding: 18px 20px;
background: var(--surface);
}
.hero-facts strong { font-weight: 620; font-size: .96rem; }
.hero-facts span { font-size: .88rem; color: var(--text-dim); }
.scroll-hint {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
width: 26px;
height: 42px;
border: 1px solid var(--line);
border-radius: 14px;
display: grid;
place-items: start center;
padding-top: 8px;
background: rgba(255, 255, 255, .5);
}
.scroll-hint span {
width: 3px;
height: 8px;
border-radius: 2px;
background: var(--accent);
animation: hint 1.9s var(--ease) infinite;
}
@keyframes hint {
0%, 100% { transform: translateY(0); opacity: 1; }
55% { transform: translateY(13px); opacity: .15; }
}
/* ── Cabeçalho de seção ─────────────────────────────────── */
.section-head {
max-width: 62ch;
margin-bottom: clamp(20px, 3.4vh, 36px);
}
.section-head h2 { margin-bottom: .35em; }
.section-lead {
font-size: 1rem;
line-height: 1.55;
color: var(--text-muted);
}
/* ── Sobre ──────────────────────────────────────────────── */
.about-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(32px, 5vw, 68px);
align-items: center;
width: 100%;
}
.about-text h2 { margin-bottom: .55em; }
.about-text p { color: var(--text-muted); }
.about-note {
margin-top: 20px !important;
padding-left: 16px;
border-left: 2px solid var(--accent);
color: var(--text) !important;
font-size: 1rem;
}
.principles {
display: grid;
gap: 12px;
}
.principles li {
padding: 20px 22px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
.principles h3 { margin-bottom: .35em; }
.principles p {
font-size: .93rem;
color: var(--text-dim);
}
/* ── Cards ──────────────────────────────────────────────── */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
gap: 16px;
}
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
/* entre tablet e desktop, 2×2 fica melhor que 3 + 1 órfão */
@media (min-width: 621px) and (max-width: 1080px) {
.cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card {
padding: 20px 20px 22px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
transition: transform .3s var(--ease), border-color .3s var(--ease),
box-shadow .3s var(--ease);
}
.card:hover {
transform: translateY(-3px);
border-color: #d9cdb6;
box-shadow: 0 20px 34px -24px rgba(60, 46, 20, .7);
}
.card-icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin-bottom: 13px;
border: 1px solid rgba(47, 74, 205, .18);
border-radius: 11px;
background: var(--accent-tint);
color: var(--accent);
}
.card-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.card p {
font-size: .92rem;
line-height: 1.5;
color: var(--text-muted);
}
/* card de convite: ocupa a linha inteira da grade e fecha a seção */
.card-convite {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 24px;
padding: 14px 20px;
border-color: rgba(47, 74, 205, .28);
background:
linear-gradient(100deg, var(--accent-tint), transparent 62%),
var(--surface);
}
.card-convite:hover {
/* não é card navegável, é chamada: sem o levantar dos outros */
transform: none;
border-color: rgba(47, 74, 205, .45);
}
.card-convite h3 { margin-bottom: .15em; }
.card-convite p { max-width: 66ch; }
.card-convite .btn { flex-shrink: 0; }
.section-foot {
max-width: 72ch;
margin-top: 26px;
font-size: .93rem;
color: var(--text-dim);
}
.section-foot a {
color: var(--accent);
border-bottom: 1px solid rgba(47, 74, 205, .35);
}
.section-foot a:hover { border-bottom-color: var(--accent); }
/* ── Processo: linha do tempo ───────────────────────────── */
/* Cinco etapas lado a lado, ligadas por um caminho pontilhado que passa pelas
bolinhas — em duas colunas a ordem ficava ambígua (01 e 02 em linhas
diferentes de leitura). Abaixo de 980px a mesma linha vira vertical. */
.steps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 26px;
width: 100%;
}
.step {
position: relative;
padding-top: 46px;
}
.step-num {
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--dourado);
color: var(--azul-escuro);
font-size: .78rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 4px rgba(194, 152, 43, .14);
}
/* o caminho entre uma bolinha e a seguinte: a mesma estrelinha do fundo,
repetida — o tracejado virou trilha de estrelas */
.step:not(:last-child)::after {
content: "";
position: absolute;
top: 10px;
left: 38px;
right: -34px;
height: 10px;
background-image: url("data:image/svg+xml,