/* ============================================================
FONT IMPORTS
Fontes carregadas via no do HTML (Parte 1.1).
Instrument Serif: headlines editoriais
JetBrains Mono: números, metadados, IDs, dados técnicos
Inter (com eixo opsz): corpo/UI
============================================================ */
/* ============================================================
CUSTOM PROPERTIES — DESIGN TOKENS
Paleta Observatório (DESIGN.md §2) + sistema tipográfico +
escala de espaçamento + shadows + easing
============================================================ */
:root {
/* ── Paleta Observatório ── */
--color-carvao: #0B0B0E;
--color-carvao-plus1: #14141A;
--color-carvao-minus1: #08080B;
--color-pergaminho: #EDEAE3;
--color-pergaminho-minus1: #A8A39A;
--color-pergaminho-minus2: #6B665D;
--color-ambar: #B8823C;
--color-ambar-minus1: #8C6630;
/* ── Aliases funcionais (mantém compatibilidade com HTML inline) ── */
--bg: var(--color-carvao);
--bg2: var(--color-carvao-plus1);
--bg3: var(--color-carvao-plus1);
--white: var(--color-pergaminho);
--gray: var(--color-pergaminho-minus2);
--gray-l: var(--color-pergaminho-minus1);
--gold: var(--color-ambar);
--green: #3D8B5E;
--amber: var(--color-ambar);
/* Legacy purple aliases → remapped to Observatório */
--purple: var(--color-ambar);
--neon: var(--color-ambar);
--purple-l: var(--color-ambar);
--purple-xl: var(--color-pergaminho);
--rose: var(--color-pergaminho-minus1);
--teal: var(--color-ambar);
--blue: var(--color-ambar);
/* ── Borders & Surfaces ── */
--border: rgba(237, 234, 227, 0.08);
--border-h: rgba(184, 130, 60, 0.35);
--card-bg: rgba(237, 234, 227, 0.03);
--card-border: rgba(237, 234, 227, 0.10);
--glass: rgba(11, 11, 14, 0.7);
--radius: 14px;
--radius-s: 8px;
/* ── Shadows — amber tinted (DESIGN.md §4) ── */
--shadow-card: 0 30px 80px -30px rgba(184, 130, 60, 0.15);
--shadow-card-hover: 0 40px 100px -30px rgba(184, 130, 60, 0.22);
--shadow-btn: 0 4px 24px rgba(184, 130, 60, 0.25);
--shadow-btn-hover: 0 8px 36px rgba(184, 130, 60, 0.35);
--glow: var(--shadow-card);
--glow-s: 0 16px 48px -16px rgba(184, 130, 60, 0.10);
/* ── Typography ── */
--font-serif: 'Instrument Serif', Georgia, serif;
--font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
/* ── Spacing Scale ── */
--space-3xs: 0.25rem; /* 4px */
--space-2xs: 0.5rem; /* 8px */
--space-xs: 0.75rem; /* 12px */
--space-s: 1rem; /* 16px */
--space-m: 1.5rem; /* 24px */
--space-l: 2rem; /* 32px */
--space-xl: 3rem; /* 48px */
--space-2xl: 4.5rem; /* 72px */
--space-3xl: 6rem; /* 96px */
--space-4xl: 8rem; /* 128px */
/* ── Easing (DESIGN.md §4 — natural, nunca ease-in-out) ── */
--ease: cubic-bezier(0.32, 0.72, 0, 1);
--trans: 0.4s var(--ease);
}
/* ============================================================
MODERN RESET
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
min-height: 100dvh;
background: var(--color-carvao);
color: var(--color-pergaminho);
font-family: var(--font-sans);
font-size: 1rem;
font-optical-sizing: auto;
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Noise texture overlay — fixed, pointer-events: none so it never blocks interaction */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-size: 300px 300px;
}
@media (prefers-reduced-motion: reduce) {
body::after { display: none; }
}
img, picture, video, canvas, svg {
max-width: 100%;
display: block;
}
img { height: auto; }
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
cursor: pointer;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
text-wrap: balance;
}
p { text-wrap: pretty; }
input, textarea, select { font: inherit; }
ul, ol { list-style: none; }
/* ============================================================
TYPOGRAPHY UTILITIES
============================================================ */
.syn {
font-family: var(--font-serif);
font-weight: 400;
letter-spacing: -0.02em;
}
.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* ============================================================
LAYOUT
============================================================ */
.container {
max-width: 1060px;
margin: 0 auto;
padding: 0 var(--space-m);
}
section {
padding: var(--space-3xl) 0;
position: relative;
}
/* ============================================================
SCROLL REVEAL
============================================================ */
/* ── Scroll reveal: hidden only when JS is present (html.js class) ── */
html.js .reveal {
opacity: 0;
transform: translateY(28px);
will-change: opacity, transform;
transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
html.js .reveal.visible,
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
html.js .reveal-left {
opacity: 0;
transform: translateX(-32px);
will-change: opacity, transform;
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.js .reveal-left.visible,
.reveal-left.visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.js .reveal, html.js .reveal-left, .pain-item {
opacity: 1;
transform: none;
filter: none;
transition: none;
will-change: auto;
}
}
/* ============================================================
NAV
============================================================ */
#header-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(11, 11, 14, 0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
transition: background var(--trans);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
.logo {
font-family: var(--font-mono);
font-weight: 400;
font-size: 0.75rem;
letter-spacing: 0.14em;
color: var(--color-pergaminho);
text-transform: uppercase;
flex-shrink: 0;
display: flex;
align-items: center;
}
.logo-img {
display: block;
width: auto;
height: 36px; /* altura fixa no nav — imagem escala proporcionalmente */
max-width: 260px; /* teto de largura no desktop */
object-fit: contain;
object-position: left center;
/* O fundo da imagem é #0B0B0E — mesmo carvão do nav — sem nenhuma borda visível */
}
/* Mobile: encolhe para caber na barra */
@media (max-width: 600px) {
.logo-img {
height: 28px;
max-width: 200px;
}
}
@media (max-width: 380px) {
.logo-img {
height: 24px;
max-width: 150px; /* reduzido de 165px para 150px por precaução de overflow */
}
}
.nav-cta {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: var(--space-2xs) var(--space-m);
border: 1px solid var(--color-ambar);
border-radius: 40px;
color: var(--color-ambar);
transition: background var(--trans), color var(--trans), box-shadow var(--trans);
}
.nav-cta:hover {
background: var(--color-ambar);
color: var(--color-carvao);
box-shadow: 0 0 20px rgba(184, 130, 60, 0.3);
}
.nav-links-group {
display: flex;
align-items: center;
gap: var(--space-2xs);
}
.nav-link-anchor {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 7px 14px;
border: 1px solid rgba(237, 234, 227, 0.12);
border-radius: 40px;
color: var(--color-pergaminho-minus1);
transition: border-color var(--trans), color var(--trans), background var(--trans);
white-space: nowrap;
}
.nav-link-anchor:hover {
border-color: var(--color-ambar);
color: var(--color-pergaminho);
background: rgba(184, 130, 60, 0.06);
}
.nav-whatsapp-slot {
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.logo {
margin-right: var(--space-s);
}
.nav-inner {
gap: var(--space-s);
}
.nav-links-group {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
min-width: 0;
flex-shrink: 1;
padding-block: 4px;
}
.nav-links-group::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 420px) {
.nav-links-group { gap: 4px; }
.nav-link-anchor { font-size: 0.5625rem; padding: 6px 10px; letter-spacing: 0.06em; }
}
/* ============================================================
BUTTONS
============================================================ */
.btn-primary {
display: inline-block;
background: var(--color-ambar);
color: var(--color-carvao);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 18px 40px;
border-radius: 50px;
cursor: pointer;
border: none;
box-shadow: var(--shadow-btn);
touch-action: manipulation;
transition: transform var(--trans), box-shadow var(--trans), filter var(--trans);
text-decoration: none;
}
.btn-primary.no-pulse { animation: none; }
.btn-primary:hover {
transform: translateY(-2px);
filter: brightness(1.1);
box-shadow: var(--shadow-btn-hover);
}
.btn-primary:active {
transform: translateY(0) scale(0.98);
}
.btn-max {
display: inline-block;
background: var(--color-ambar);
color: var(--color-carvao);
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 22px 52px;
border-radius: 50px;
cursor: pointer;
border: none;
box-shadow: var(--shadow-btn);
touch-action: manipulation;
transition: transform var(--trans), box-shadow var(--trans);
text-decoration: none;
}
.btn-max:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-btn-hover);
}
.btn-max:active {
transform: translateY(0) scale(0.98);
}
.micro-copy {
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--color-pergaminho-minus2);
margin-top: 14px;
letter-spacing: 0.03em;
}
/* ============================================================
SECTION SHARED
============================================================ */
.section-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.75rem, 4vw, 2.75rem);
text-align: center;
letter-spacing: -0.02em;
margin-bottom: var(--space-s);
line-height: 1.15;
color: var(--color-pergaminho);
}
.section-sub {
text-align: center;
color: var(--color-pergaminho-minus1);
font-size: 1.0625rem;
max-width: 600px;
margin: 0 auto var(--space-xl);
line-height: 1.7;
}
.section-tagline {
text-align: center;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-ambar);
margin-bottom: var(--space-xl);
opacity: 0.8;
}
.hero-tagline {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
color: var(--color-pergaminho-minus2);
margin-bottom: var(--space-m);
text-transform: uppercase;
opacity: 0.8;
}
/* ============================================================
VIDEO DIVIDER
============================================================ */
.vid-divider {
width: 100%;
overflow: hidden;
line-height: 0;
min-height: 80px;
background: transparent;
position: relative;
display: flex;
align-items: center;
}
.vid-divider::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(184, 130, 60, 0.08) 20%,
rgba(184, 130, 60, 0.15) 50%,
rgba(184, 130, 60, 0.08) 80%,
transparent 100%);
z-index: 0;
}
.vid-divider::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
transparent 0px,
rgba(237, 234, 227, 0.03) 1px,
transparent 3px
);
animation: wave-drift 6s linear infinite;
z-index: 1;
}
.vid-divider video {
width: 100%;
height: 80px;
object-fit: cover;
display: block;
position: relative;
z-index: 2;
mix-blend-mode: screen;
background: transparent;
}
.vid-divider video.hidden { display: none; }
/* ============================================================
HERO
============================================================ */
/* ── Hero shell ── */
.hero {
position: relative;
min-height: 100dvh;
padding-top: 100px;
padding-bottom: var(--space-3xl);
overflow: hidden;
}
/* Grid editorial: conteúdo (1.45fr) + vídeo offset (1fr). Desktop asymmetric. */
.hero__grid {
max-width: 1260px;
margin: 0 auto;
padding: 0 clamp(var(--space-m), 4vw, var(--space-2xl));
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.5rem, 6vw, 5.5rem);
min-height: calc(100dvh - 100px - var(--space-3xl));
align-items: center;
}
.hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding-block: clamp(1.5rem, 8vh, 5rem) clamp(1.5rem, 4vh, 3rem);
gap: clamp(2.5rem, 8vh, 4.5rem);
}
/* Eyebrow mono — DNA do instituto. Régua âmbar como único decorativo do hero. */
.hero__eyebrow {
align-self: center;
display: inline-flex;
align-items: center;
gap: 0.875rem;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-pergaminho-minus1);
}
.hero__eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--color-ambar);
opacity: 0.85;
}
.hero__body {
display: flex;
flex-direction: column;
gap: clamp(1.75rem, 3.2vh, 2.5rem);
}
.hero__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(2.2rem, 5.5vw, 4rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-pergaminho);
max-width: 100%;
text-wrap: balance;
}
.hero__title-em {
display: block;
font-style: italic;
color: var(--color-ambar);
margin-top: 0.06em;
opacity: 0.92;
}
.hero__sub {
font-family: var(--font-sans);
font-size: clamp(1rem, 1.35vw, 1.1875rem);
line-height: 1.6;
color: var(--color-pergaminho-minus1);
max-width: 70ch;
margin: 0 auto;
}
.hero__cta-row {
display: flex;
flex-direction: column;
gap: var(--space-m);
align-items: center;
}
.hero__technical {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-pergaminho-minus2);
}
.hero__sep {
display: inline-block;
margin: 0 0.6em;
color: var(--color-ambar);
opacity: 0.55;
}
/* Oscilloscope styling deleted */
/* ── Hero entrada staggered — hidden only when JS loaded ── */
html.js .hero [data-rise] {
opacity: 0;
transform: translateY(8px);
transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
will-change: opacity, transform;
}
html.js .hero [data-rise].rise-in,
.hero [data-rise].rise-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.js .hero [data-rise] {
opacity: 1;
transform: none;
transition: none;
}
}
/* ── Responsivo ── */
@media (max-width: 960px) {
.hero__grid {
grid-template-columns: 1fr;
min-height: auto;
gap: var(--space-l);
}
.hero__content {
padding-block: clamp(1rem, 4vh, 2rem) 0;
align-items: center;
text-align: center;
}
.hero__eyebrow {
align-self: center;
}
.hero__cta-row {
align-items: center;
}
.hero__content {
padding-block: clamp(1rem, 4vh, 2rem) 0;
}
.hero__aside {
padding-block: 0 var(--space-xl);
}
.hero__title {
max-width: 100%;
}
.hero__scope-frame {
aspect-ratio: 16 / 7;
}
.hero__wave-hz {
font-size: clamp(1.75rem, 6vw, 2.5rem);
}
}
@media (max-width: 480px) {
.hero {
padding-top: 48px;
padding-bottom: var(--space-xl);
}
.hero__body {
gap: clamp(1rem, 2.4vh, 1.75rem);
}
.hero__eyebrow {
font-size: 0.6875rem;
letter-spacing: 0.14em;
gap: 0.625rem;
}
.hero__eyebrow::before { width: 20px; }
.hero__title {
font-size: clamp(2.4rem, 11vw, 3.5rem);
letter-spacing: -0.02em;
max-width: 100%;
}
.hero__sub { font-size: 0.9375rem; line-height: 1.55; }
.hero__technical { font-size: 0.6875rem; letter-spacing: 0.08em; }
.hero__sep { margin: 0 0.4em; }
.hero__scope-frame {
aspect-ratio: 16 / 6;
}
}
/* ============================================================
SPOTLIGHT CARD
Componente com glow radial que segue o cursor (spec: components.md).
Uso: cards de demo gratuita (seção #demo).
--glow-x e --glow-y atualizadas via JS (initSpotlightCards).
============================================================ */
.spotlight-card {
--glow-x: 50%;
--glow-y: 50%;
--glow-opacity: 0;
--glow-color: 184, 130, 60;
--card-radius: 20px;
--border-color: rgba(237, 234, 227, 0.08);
--border-color-active: rgba(184, 130, 60, 0.35);
position: relative;
border-radius: var(--card-radius);
background: linear-gradient(180deg, rgba(237, 234, 227, 0.02) 0%, rgba(237, 234, 227, 0.04) 100%);
border: 1px solid var(--border-color);
overflow: hidden;
transition: border-color 600ms cubic-bezier(0.32, 0.72, 0, 1);
isolation: isolate;
}
.spotlight-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle 320px at var(--glow-x) var(--glow-y),
rgba(var(--glow-color), 0.12),
rgba(var(--glow-color), 0.04) 30%,
transparent 60%
);
opacity: var(--glow-opacity);
transition: opacity 500ms cubic-bezier(0.32, 0.72, 0, 1);
pointer-events: none;
z-index: 1;
}
.spotlight-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: radial-gradient(
circle 240px at var(--glow-x) var(--glow-y),
rgba(var(--glow-color), 0.9),
rgba(var(--glow-color), 0.2) 25%,
transparent 55%
);
opacity: var(--glow-opacity);
transition: opacity 500ms cubic-bezier(0.32, 0.72, 0, 1);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 2;
}
.spotlight-card[data-glow]:hover {
--glow-opacity: 1;
border-color: var(--border-color-active);
}
.spotlight-card__inner {
position: relative;
z-index: 3;
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.spotlight-card__eyebrow {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(237, 234, 227, 0.55);
}
.spotlight-card__freq {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.05em;
color: var(--color-ambar);
text-transform: uppercase;
}
.spotlight-card__header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(237, 234, 227, 0.06);
}
.spotlight-card__code {
font-family: var(--font-mono);
font-size: 1.5rem;
letter-spacing: 0.1em;
color: rgba(237, 234, 227, 0.9);
margin-top: 0.5rem;
}
.spotlight-card__title {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 2.5vw, 2.25rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--color-pergaminho);
}
.spotlight-card__body {
font-size: 1rem;
line-height: 1.6;
color: rgba(237, 234, 227, 0.75);
}
.spotlight-card__micro {
padding: 1.25rem;
background: rgba(237, 234, 227, 0.03);
border-radius: 12px;
border: 1px solid rgba(237, 234, 227, 0.06);
}
.spotlight-card__micro-label {
display: block;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ambar);
margin-bottom: 0.5rem;
}
.spotlight-card__micro p {
font-size: 0.9375rem;
line-height: 1.55;
color: rgba(237, 234, 227, 0.8);
}
.spotlight-card__audio-meta {
font-family: var(--font-mono);
font-size: 0.75rem;
color: rgba(237, 234, 227, 0.45);
letter-spacing: 0.03em;
}
/* Mobile: glow estático central, sem tracking */
@media (max-width: 768px) {
.spotlight-card {
--glow-x: 50%;
--glow-y: 40%;
--glow-opacity: 0.35;
}
.spotlight-card[data-glow]:hover {
--glow-opacity: 0.35;
}
.spotlight-card__inner {
padding: 1.5rem 1.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.spotlight-card,
.spotlight-card::before,
.spotlight-card::after {
transition: none;
}
}
/* ============================================================
LIQUID GLASS BUTTON
Uso autorizado: CTA primário do hero + CTA final da página.
============================================================ */
.liquid-glass-filter {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
}
.liquid-glass-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.875rem;
padding: 1.125rem 2rem 1.125rem 2.25rem;
border: none;
border-radius: 999px;
cursor: pointer;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--color-pergaminho);
text-decoration: none;
background: linear-gradient(
180deg,
rgba(237, 234, 227, 0.18) 0%,
rgba(237, 234, 227, 0.09) 100%
);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(184, 130, 60, 0.45);
box-shadow:
inset 0 1px 1px rgba(237, 234, 227, 0.35),
inset -1px -1px 1px rgba(237, 234, 227, 0.08),
inset 0 0 12px rgba(237, 234, 227, 0.06),
0 4px 24px rgba(0, 0, 0, 0.4),
0 0 32px rgba(184, 130, 60, 0.2);
transition:
transform 0.4s var(--ease),
box-shadow 0.4s var(--ease),
background 0.4s var(--ease);
isolation: isolate;
}
.liquid-glass-btn__label {
position: relative;
z-index: 1;
}
.liquid-glass-btn__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(184, 130, 60, 0.18);
color: var(--color-ambar);
transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.liquid-glass-btn:hover {
background: linear-gradient(
180deg,
rgba(237, 234, 227, 0.16) 0%,
rgba(237, 234, 227, 0.09) 100%
);
box-shadow:
inset 1px 1px 1px rgba(237, 234, 227, 0.32),
inset -1px -1px 1px rgba(237, 234, 227, 0.1),
inset 0 0 16px rgba(237, 234, 227, 0.08),
0 8px 32px rgba(0, 0, 0, 0.5),
0 0 24px rgba(184, 130, 60, 0.2);
}
.liquid-glass-btn:hover .liquid-glass-btn__arrow {
background: rgba(184, 130, 60, 0.28);
transform: translate(2px, -1px);
}
.liquid-glass-btn:active {
transform: scale(0.98);
box-shadow:
inset 1px 1px 2px rgba(0, 0, 0, 0.2),
inset -1px -1px 1px rgba(237, 234, 227, 0.1),
inset 0 0 8px rgba(237, 234, 227, 0.04),
0 2px 12px rgba(0, 0, 0, 0.4);
}
.liquid-glass-btn:focus-visible {
outline: 2px solid var(--color-ambar);
outline-offset: 3px;
}
@media (max-width: 768px) {
.liquid-glass-btn {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 1rem 1.5rem 1rem 1.75rem;
font-size: 0.9375rem;
}
}
@supports not (backdrop-filter: blur(10px)) {
.liquid-glass-btn {
background: rgba(237, 234, 227, 0.13);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
@media (prefers-reduced-motion: reduce) {
.liquid-glass-btn,
.liquid-glass-btn__arrow {
transition: none;
}
.liquid-glass-btn:hover .liquid-glass-btn__arrow {
transform: none;
}
}
/* ============================================================
PAIN / DOR — redesign (diagnóstico grid)
============================================================ */
#pain {
background: var(--color-carvao);
}
/* Left-align apenas em desktop; mobile herda text-align:center do global */
@media (min-width: 721px) {
.pain-eyebrow { text-align: left; }
.pain-title { text-align: left; }
.pain-header { text-align: left; }
}
.pain-header {
margin-bottom: var(--space-2xl);
}
/* Copy blocks — reading beats between the header and the pain-cards */
.pain-copy-block {
max-width: 62ch;
margin: 0 auto var(--space-xl);
}
.pain-copy-block p {
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
line-height: 1.75;
color: var(--color-pergaminho-minus1);
}
@media (min-width: 721px) {
.pain-copy-block { margin-left: 0; margin-right: auto; text-align: left; }
}
/* Pivot — single-sentence callout */
.pain-pivot {
margin: var(--space-2xl) auto 0;
max-width: 46ch;
padding: var(--space-xl) var(--space-l);
text-align: center;
border-top: 1px solid rgba(184, 130, 60, 0.25);
border-bottom: 1px solid rgba(184, 130, 60, 0.25);
position: relative;
}
.pain-pivot::before {
content: "";
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 64px;
height: 2px;
background: var(--color-ambar);
box-shadow: 0 0 16px rgba(184, 130, 60, 0.7);
}
.pain-pivot p {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.6vw, 2rem);
line-height: 1.45;
color: var(--color-pergaminho);
font-style: italic;
text-shadow: 0 0 30px rgba(184, 130, 60, 0.2);
}
@media (max-width: 720px) {
.pain-header {
margin-bottom: var(--space-xl);
}
.pain-pivot {
padding: var(--space-l) var(--space-m);
margin-top: var(--space-xl);
}
}
/* ============================================================
MECHANISM — redesign (tríade de fases)
============================================================ */
#mechanism {
background: var(--color-carvao);
overflow: hidden;
}
#mechanism-explained {
background: var(--color-carvao);
}
.mech-header {
margin-bottom: var(--space-2xl);
}
/* Left-align on desktop only */
@media (min-width: 721px) {
.mech-eyebrow { text-align: left; }
.mech-title-h { text-align: left; }
.mech-header { text-align: left; }
}
/* Intro: left-aligned, max readable width */
#mechanism .mech-intro {
margin-left: 0;
margin-right: 0;
max-width: 640px;
}
/* Three-phase horizontal grid */
.mech-phases {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(237, 234, 227, 0.08);
border-bottom: 1px solid rgba(237, 234, 227, 0.08);
margin-top: var(--space-2xl);
}
.mech-phase {
padding: var(--space-xl) var(--space-l);
border-right: 1px solid rgba(237, 234, 227, 0.08);
}
.mech-phase:first-child {
padding-left: 0;
}
.mech-phase:last-child {
border-right: none;
padding-right: 0;
}
.mech-phase__num {
display: block;
font-family: var(--font-mono);
font-size: 0.5625rem;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--color-ambar);
opacity: 0.75;
margin-bottom: var(--space-2xs);
}
.mech-phase__label {
display: block;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-pergaminho-minus2);
margin-bottom: var(--space-m);
padding-bottom: var(--space-s);
border-bottom: 1px solid rgba(237, 234, 227, 0.06);
}
.mech-phase__title {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 2.2vw, 2rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--color-pergaminho);
margin-bottom: var(--space-m);
}
.mech-phase__body {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--color-pergaminho-minus1);
}
@media (max-width: 720px) {
.mech-header {
margin-bottom: var(--space-xl);
text-align: center;
}
.mech-phases {
grid-template-columns: 1fr;
border-bottom: none;
}
.mech-phase {
border-right: none;
border-bottom: 1px solid rgba(237, 234, 227, 0.08);
padding: var(--space-l) 0;
}
.mech-phase:first-child { padding-left: 0; }
.mech-phase:last-child { border-bottom: none; padding-right: 0; }
}
/* CIA callout */
.cia-callout {
background: rgba(184, 130, 60, 0.04);
border: 1px solid rgba(184, 130, 60, 0.15);
border-left: 2px solid var(--color-ambar);
border-radius: 0 var(--radius-s) var(--radius-s) 0;
padding: 14px 18px;
margin: 14px 0;
}
.cia-callout-label {
font-family: var(--font-mono);
font-size: 0.5625rem;
letter-spacing: 0.14em;
color: var(--color-ambar);
margin-bottom: var(--space-2xs);
display: flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
}
.cia-callout p {
font-size: 0.8125rem;
color: rgba(237, 234, 227, 0.8);
line-height: 1.7;
margin: 0;
}
.cia-link {
color: var(--color-ambar);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(184, 130, 60, 0.4);
font-weight: 600;
transition: color 0.2s var(--ease);
}
.cia-link:hover {
color: var(--color-pergaminho);
}
.cia-doc-meta {
margin-top: var(--space-2xs);
font-family: var(--font-mono);
font-size: 0.5625rem;
color: var(--color-pergaminho-minus2);
opacity: 0.8;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.cia-evolution {
font-size: 0.8125rem;
color: rgba(237, 234, 227, 0.55);
line-height: 1.7;
font-style: italic;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(237, 234, 227, 0.06);
}
/* ============================================================
DEMO GRATUITA — "Respire e Escolha"
============================================================ */
#demo {
background: var(--color-carvao);
overflow: hidden;
}
.demo-intro {
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--color-pergaminho-minus2);
letter-spacing: 0.04em;
text-align: center;
margin: 0 auto var(--space-xl);
max-width: 440px;
}
/* Intro da demo (eyebrow+headline+sub) só existe enquanto a escolha está ativa */
#demo-intro-block {
max-height: 500px;
overflow: hidden;
transition: opacity 0.6s var(--ease), max-height 0.7s var(--ease), margin-bottom 0.7s var(--ease);
}
#demo-intro-block.is-choosing {
opacity: 0;
}
#demo-intro-block.is-done {
max-height: 0;
margin-bottom: 0;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
#demo-intro-block { transition: none; }
}
/* ---------- choice grid ---------- */
.choice-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-s);
max-width: 940px;
margin: 0 auto;
perspective: 1200px;
}
@media (max-width: 720px) {
.choice-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
}
.choice-card {
position: relative;
cursor: pointer;
aspect-ratio: 3 / 4;
border-radius: 16px;
background: linear-gradient(160deg, rgba(237, 234, 227, 0.035), rgba(237, 234, 227, 0.012));
border: 1px solid rgba(237, 234, 227, 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
--gx: 50%;
--gy: 42%;
--float-delay: 0s;
--float-dur: 6s;
animation-name: choice-float;
animation-duration: var(--float-dur);
animation-timing-function: ease-in-out;
animation-delay: var(--float-delay);
animation-iteration-count: infinite;
transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.choice-card:nth-child(1) { --float-delay: 0s; --float-dur: 6s; }
.choice-card:nth-child(2) { --float-delay: -1.6s; --float-dur: 6.6s; }
.choice-card:nth-child(3) { --float-delay: -3.2s; --float-dur: 5.6s; }
.choice-card:nth-child(4) { --float-delay: -4.8s; --float-dur: 7s; }
html.js .choice-card.reveal-init {
opacity: 0;
transform: translateY(20px);
}
.choice-card.rise-in {
animation-name: choice-drift-in, choice-float;
animation-duration: 1s, var(--float-dur);
animation-timing-function: var(--ease), ease-in-out;
animation-delay: 0s, calc(var(--float-delay) + 1s);
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, none;
}
@keyframes choice-drift-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes choice-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
/* breathing ambient spotlight — always on, mobile included, stronger */
.choice-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(62% 58% at var(--gx) var(--gy), rgba(184, 130, 60, 0.45), transparent 72%);
opacity: 0.55;
animation: choice-breathe 6s var(--ease) infinite;
}
.choice-card:nth-child(2)::before { animation-delay: -1.5s; }
.choice-card:nth-child(3)::before { animation-delay: -3s; }
.choice-card:nth-child(4)::before { animation-delay: -4.5s; }
@keyframes choice-breathe {
0%, 100% { opacity: 0.4; --gx: 40%; --gy: 36%; }
50% { opacity: 0.85; --gx: 60%; --gy: 58%; }
}
/* traveling light on the border — "wind" */
.choice-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: conic-gradient(from var(--wind-angle, 0deg), transparent 0%, rgba(184, 130, 60, 0.9) 12%, transparent 28%, transparent 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: choice-wind 5.5s linear infinite;
opacity: 0.9;
}
.choice-card:nth-child(2)::after { animation-delay: -1.4s; }
.choice-card:nth-child(3)::after { animation-delay: -2.8s; }
.choice-card:nth-child(4)::after { animation-delay: -4.2s; }
@keyframes choice-wind {
to { --wind-angle: 360deg; }
}
@property --wind-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
.choice-card:hover,
.choice-card:focus-visible {
border-color: rgba(184, 130, 60, 0.4);
}
.choice-card__code {
font-family: var(--font-serif);
font-size: clamp(1.15rem, 2.4vw, 1.7rem);
letter-spacing: 0.04em;
color: var(--color-pergaminho);
position: relative;
z-index: 2;
user-select: none;
text-shadow: 0 2px 30px rgba(184, 130, 60, 0.4);
}
.choice-card__hint {
position: absolute;
bottom: 0.85rem;
left: 0;
right: 0;
z-index: 2;
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-ambar);
text-shadow: 0 0 14px rgba(184, 130, 60, 0.65);
text-align: center;
animation: choice-hint-pulse 2.6s ease-in-out infinite;
}
@keyframes choice-hint-pulse {
0%, 100% { opacity: 0.75; }
50% { opacity: 1; text-shadow: 0 0 20px rgba(184, 130, 60, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
.choice-card__hint { animation: none; opacity: 0.9; }
}
/* wind-out when another card is chosen */
.choice-grid.is-choosing .choice-card:not(.is-chosen) {
opacity: 0;
transform: translateY(-18px) scale(0.94) rotateX(8deg);
filter: blur(4px);
pointer-events: none;
animation: none;
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.choice-grid.is-choosing .choice-card.is-chosen {
transform: scale(1.03);
border-color: transparent;
animation: none;
transition: transform 0.7s var(--ease), border-color 0.7s var(--ease);
}
.choice-grid.is-done { display: none; }
/* ---------- transition beat ---------- */
.choice-beat {
display: none;
margin: var(--space-xl) auto 0;
max-width: 30ch;
text-align: center;
}
.choice-beat.show {
display: block;
animation: choice-drift-in 1.2s var(--ease) forwards;
}
.choice-beat__whisper {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.2rem;
color: var(--color-ambar);
line-height: 1.4;
}
.choice-beat__code {
font-family: var(--font-mono);
letter-spacing: 0.14em;
color: var(--color-pergaminho);
font-size: 0.8rem;
margin-bottom: 0.6rem;
text-transform: uppercase;
}
.choice-beat__text {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.2rem;
color: var(--color-ambar);
line-height: 1.45;
margin-top: 0.5rem;
}
/* ---------- ritual card (reveal) ---------- */
.ritual-wrap {
display: none;
justify-content: center;
margin-top: var(--space-l);
}
.ritual-wrap.show {
display: flex;
animation: ritual-rise 1.1s var(--ease) forwards;
}
@keyframes ritual-rise {
from { opacity: 0; transform: translateY(30px) scale(0.96); }
to { opacity: 1; transform: none; }
}
.ritual-card {
position: relative;
width: min(440px, 100%);
border-radius: 18px;
padding: var(--space-xl) var(--space-l) var(--space-l);
background: linear-gradient(165deg, #171209, #0d0b07 70%);
border: 1px solid rgba(184, 130, 60, 0.25);
isolation: isolate;
text-align: center;
--gx: 50%;
--gy: 38%;
animation: ritual-breathe-scale 6.5s var(--ease) infinite;
}
@keyframes ritual-breathe-scale {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.012); }
}
.ritual-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: -1;
background: radial-gradient(50% 45% at var(--gx) var(--gy), rgba(184, 130, 60, 0.34), transparent 68%);
animation: ritual-breathe-glow 7s var(--ease) infinite;
}
@keyframes ritual-breathe-glow {
0%, 100% { opacity: 0.55; --gx: 44%; --gy: 34%; }
50% { opacity: 0.9; --gx: 56%; --gy: 46%; }
}
.ritual-card__corner {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid rgba(184, 130, 60, 0.5);
}
.ritual-card__corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.ritual-card__corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.ritual-card__corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.ritual-card__corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.ritual-card__code {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 4.5vw, 2.6rem);
letter-spacing: 0.03em;
line-height: 1;
color: var(--color-pergaminho);
margin-bottom: 0.4rem;
text-shadow: 0 4px 40px rgba(184, 130, 60, 0.4);
}
.ritual-card__name {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ambar);
margin-bottom: var(--space-l);
}
/* custom play sigil — deliberately not a player bar */
.ritual-sigil {
width: 88px;
height: 88px;
margin: 0 auto 1.4rem;
position: relative;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle, rgba(184, 130, 60, 0.16), transparent 70%);
border: none;
padding: 0;
transition: transform 0.4s var(--ease);
touch-action: manipulation;
}
.ritual-sigil:hover { transform: scale(1.05); }
.ritual-sigil:focus-visible {
outline: 2px solid var(--color-ambar);
outline-offset: 4px;
}
.ritual-sigil__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.ritual-sigil__ring { fill: none; stroke: rgba(184, 130, 60, 0.35); stroke-width: 1; }
.ritual-sigil__ring--pulse {
stroke: rgba(184, 130, 60, 0.9);
stroke-dasharray: 264;
stroke-dashoffset: 264;
transform-origin: center;
transform: rotate(-90deg);
}
.ritual-sigil__icon { position: relative; width: 34px; height: 34px; }
.ritual-sigil__tri { fill: var(--color-ambar); transition: opacity 0.3s; }
.ritual-sigil__pause { opacity: 0; }
.ritual-sigil__pause rect { fill: var(--color-ambar); }
.ritual-sigil.is-playing .ritual-sigil__ring--pulse { animation: sigil-trace 60s linear forwards; }
.ritual-sigil.is-playing .ritual-sigil__tri { opacity: 0; }
.ritual-sigil.is-playing .ritual-sigil__pause { opacity: 1; }
.ritual-sigil.is-playing { animation: sigil-breathe 3.5s var(--ease) infinite; }
@keyframes sigil-trace { to { stroke-dashoffset: 0; } }
@keyframes sigil-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.ritual-timer {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
color: var(--color-pergaminho-minus2);
margin-bottom: var(--space-l);
}
.ritual-emba {
font-size: 0.95rem;
line-height: 1.65;
color: var(--color-pergaminho-minus1);
text-align: left;
border-top: 1px solid rgba(237, 234, 227, 0.08);
padding-top: var(--space-m);
margin-bottom: var(--space-m);
}
.ritual-emba b { color: var(--color-pergaminho); font-weight: 500; }
.ritual-disclaimer {
font-size: 0.76rem;
line-height: 1.55;
color: var(--color-pergaminho-minus2);
background: rgba(237, 234, 227, 0.03);
border-radius: 10px;
padding: 0.85rem 1rem;
text-align: left;
}
/* CTA duplo — reaproveita .post-demo-cta / .bridge-cta-btn */
.post-demo-cta {
opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease), max-height 0.6s var(--ease), margin-top 0.5s var(--ease);
margin-top: 0;
text-align: center;
}
.post-demo-cta.show {
opacity: 1;
visibility: visible;
max-height: 400px;
margin-top: var(--space-l);
}
.post-demo-phrase {
font-family: var(--font-serif);
font-size: 0.9375rem;
font-style: italic;
color: var(--color-pergaminho-minus1);
max-width: 460px;
margin: 0 auto var(--space-m);
line-height: 1.7;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.post-demo-cta.show .post-demo-phrase {
opacity: 1;
transform: translateY(0);
}
.ritual-rechoose {
display: block;
margin: var(--space-m) auto 0;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-pergaminho-minus2);
text-decoration: underline;
text-underline-offset: 4px;
transition: color 0.2s var(--ease);
}
.ritual-rechoose:hover { color: var(--color-ambar); }
@media (max-width: 480px) {
.ritual-card { padding: var(--space-l) var(--space-m) var(--space-m); }
}
@media (prefers-reduced-motion: reduce) {
.choice-card,
.choice-card::before,
.choice-card::after,
.choice-card.rise-in,
.ritual-card,
.ritual-card::before,
.ritual-sigil.is-playing,
.ritual-sigil.is-playing .ritual-sigil__ring--pulse,
.choice-beat.show,
.ritual-wrap.show {
animation: none !important;
}
html.js .choice-card.reveal-init {
opacity: 1;
transform: none;
}
.choice-card {
transform: none !important;
}
}
/* ============================================================
PRODUCT
============================================================ */
#product {
background: var(--color-carvao);
}
.product-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
margin-bottom: var(--space-2xl);
}
.product-intro {
color: var(--color-pergaminho-minus1);
font-size: 1.0625rem;
line-height: 1.8;
margin-bottom: var(--space-l);
}
.dim-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-s);
margin-top: var(--space-s);
}
.dim-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: var(--space-m);
display: flex;
align-items: center;
gap: 14px;
transition: border-color var(--trans), transform var(--trans);
}
.dim-card:hover {
border-color: rgba(184, 130, 60, 0.25);
transform: translateY(-2px);
}
.dim-card img,
.dim-card .dim-icon-svg {
width: 40px;
height: 40px;
object-fit: contain;
flex-shrink: 0;
}
.dim-icon-svg {
width: 42px;
height: 42px;
flex-shrink: 0;
color: var(--color-ambar);
}
.dim-card h4 {
font-family: var(--font-mono);
font-size: 0.5625rem;
letter-spacing: 0.1em;
color: var(--color-pergaminho);
margin-bottom: 4px;
text-transform: uppercase;
}
.dim-card p {
font-size: 0.75rem;
color: var(--color-pergaminho-minus2);
}
.product-mockup {
position: relative;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.product-mockup img {
max-width: 380px;
max-height: 520px;
width: auto;
margin: 0 auto;
border-radius: var(--radius);
object-fit: contain;
object-position: center;
mix-blend-mode: screen;
filter: drop-shadow(0 0 32px rgba(184, 130, 60, 0.15));
}
/* Code preview */
.code-preview {
max-width: 480px;
margin: 0 auto;
background: var(--color-carvao-plus1);
border: 1px solid rgba(184, 130, 60, 0.2);
border-radius: 16px;
padding: var(--space-l);
text-align: center;
box-shadow: 0 0 32px rgba(184, 130, 60, 0.06);
}
.cp-dim {
font-family: var(--font-mono);
font-size: 0.5625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ambar);
margin-bottom: var(--space-2xs);
}
.cp-code {
font-family: var(--font-mono);
font-weight: 700;
font-size: clamp(1.5rem, 4vw, 2.375rem);
letter-spacing: 0.12em;
color: var(--color-ambar);
margin: var(--space-m) 0;
}
.cp-name {
font-family: var(--font-mono);
font-size: 0.75rem;
color: rgba(237, 234, 227, 0.5);
margin-bottom: var(--space-s);
letter-spacing: 0.05em;
}
.cp-ma {
border-left: 2px solid var(--color-ambar);
background: rgba(184, 130, 60, 0.04);
padding: 12px 16px;
border-radius: 0 var(--radius-s) var(--radius-s) 0;
text-align: left;
font-size: 0.8125rem;
color: rgba(237, 234, 227, 0.75);
line-height: 1.6;
}
/* ============================================================
SOCIAL PROOF
============================================================ */
#social {
background: var(--color-carvao);
}
.counter-wrap {
text-align: center;
margin-bottom: var(--space-xl);
}
.counter-num {
font-family: var(--font-mono);
font-size: clamp(2.5rem, 8vw, 4.5rem);
font-weight: 700;
color: var(--color-pergaminho);
letter-spacing: 0.04em;
}
.counter-label {
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--color-pergaminho-minus2);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: var(--space-2xs);
}
/* Evolution Mini Layout */
.evolution-mini {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-m);
margin-top: var(--space-l);
margin-bottom: var(--space-xl);
}
.evo-step {
display: flex;
align-items: center;
gap: 12px;
background: rgba(237, 234, 227, 0.03);
padding: var(--space-s) var(--space-m);
border-radius: var(--radius-s);
border: 1px solid rgba(237, 234, 227, 0.08);
}
.evo-step.active {
background: rgba(184, 130, 60, 0.1);
border-color: rgba(184, 130, 60, 0.3);
}
.evo-icon {
font-size: 1.5rem;
}
.evo-text {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--color-pergaminho-minus1);
line-height: 1.3;
}
.evo-step.active .evo-text {
color: var(--color-ambar);
font-weight: 500;
}
.evo-arrow {
color: var(--color-pergaminho-minus2);
font-size: 1.25rem;
font-family: var(--font-mono);
}
@media (max-width: 600px) {
.evolution-mini {
flex-direction: column;
gap: var(--space-s);
}
.evo-arrow {
transform: rotate(90deg);
}
}
/* Social proof: 1 depoimento por vez */
.social-note {
text-align: center;
max-width: 54ch;
margin: var(--space-s) auto 0;
font-size: 0.875rem;
font-style: italic;
color: var(--color-pergaminho-minus2);
line-height: 1.6;
}
.social-carousel {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-m);
margin-top: var(--space-xl);
}
.social-carousel__frame {
width: min(80vw, 300px);
max-height: 72vh;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(237, 234, 227, 0.1);
box-shadow: var(--shadow-card);
background: rgba(237, 234, 227, 0.02);
display: flex;
align-items: center;
justify-content: center;
}
.social-carousel__img {
width: 100%;
height: auto;
max-height: 72vh;
object-fit: contain;
display: block;
opacity: 1;
transition: opacity 0.3s var(--ease);
}
.social-carousel__img.is-fading {
opacity: 0;
}
.social-carousel__btn {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(184, 130, 60, 0.15);
border: 1px solid rgba(184, 130, 60, 0.25);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
touch-action: manipulation;
color: var(--color-pergaminho);
transition: background var(--trans), box-shadow var(--trans), transform var(--trans);
}
.social-carousel__btn:hover {
background: rgba(184, 130, 60, 0.3);
box-shadow: 0 0 20px rgba(184, 130, 60, 0.2);
}
.social-carousel__btn:active { transform: scale(0.95); }
.social-carousel__dots {
display: flex;
justify-content: center;
gap: var(--space-2xs);
margin-top: var(--space-m);
}
.social-carousel__dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(237, 234, 227, 0.15);
cursor: pointer;
transition: background var(--trans), width 0.3s var(--ease), border-radius 0.3s var(--ease);
}
.social-carousel__dots span.active {
background: var(--color-ambar);
width: 24px;
border-radius: 4px;
}
@media (max-width: 480px) {
.social-carousel { gap: var(--space-s); }
.social-carousel__btn { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
.social-carousel__img { transition: none; }
}
/* ============================================================
GRADE
============================================================ */
#grade {
text-align: center;
padding: var(--space-3xl) 0;
}
.grade-counter {
display: flex;
flex-direction: column;
align-items: center;
margin: var(--space-xl) 0 var(--space-l);
}
.grade-num {
font-family: var(--font-serif);
font-size: clamp(5rem, 18vw, 11rem);
font-weight: 400;
line-height: 0.88;
color: var(--color-pergaminho);
letter-spacing: -0.02em;
}
.grade-unit {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ambar);
margin-top: var(--space-s);
}
.grade-dims {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: 720px;
margin: 0 auto;
border: 1px solid rgba(237, 234, 227, 0.08);
border-radius: var(--radius);
overflow: hidden;
}
.grade-dim-item {
padding: var(--space-m) var(--space-s);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: rgba(237, 234, 227, 0.015);
}
.grade-dim-item + .grade-dim-item {
border-left: 1px solid rgba(237, 234, 227, 0.08);
}
.grade-dim-count {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 4vw, 2.75rem);
color: var(--color-ambar);
line-height: 1;
}
.grade-dim-label {
font-family: var(--font-mono);
font-size: 0.5625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(237, 234, 227, 0.45);
text-align: center;
line-height: 1.4;
}
@media (max-width: 600px) {
.grade-dims { grid-template-columns: repeat(2, 1fr); }
.grade-dim-item:nth-child(3),
.grade-dim-item:nth-child(4) {
border-top: 1px solid rgba(237, 234, 227, 0.08);
}
.grade-dim-item:nth-child(3) { border-left: none; }
}
/* ============================================================
PRICING
============================================================ */
#oferta {
background: var(--color-carvao);
}
.pricing-cards {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: var(--space-m);
max-width: 820px;
margin: 0 auto var(--space-m);
align-items: start;
}
.pricing-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 20px;
padding: var(--space-xl) var(--space-l);
position: relative;
transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
will-change: transform;
}
.pricing-card:hover {
transform: translateY(-4px);
}
.pricing-card:active {
transform: translateY(-2px);
}
.pricing-card.featured {
border: 2px solid var(--color-ambar);
box-shadow: 0 0 40px rgba(184, 130, 60, 0.2);
background: linear-gradient(180deg, rgba(184, 130, 60, 0.08) 0%, rgba(11, 11, 14, 0) 100%);
transform: scale(1.02);
animation: featured-pulse 4s infinite alternate ease-in-out;
}
@keyframes featured-pulse {
from { box-shadow: 0 0 30px rgba(184, 130, 60, 0.15); }
to { box-shadow: 0 0 50px rgba(184, 130, 60, 0.4); }
}
.pricing-tag {
background: var(--color-ambar);
color: var(--color-carvao);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: var(--space-2xs) var(--space-s);
border-radius: 20px;
display: inline-block;
margin-bottom: var(--space-m);
}
.pricing-card.featured:hover {
transform: scale(1.04);
}
/* Spotlight glow on pricing cards */
.pricing-card[data-glow] {
--glow-x: 50%;
--glow-y: 50%;
--glow-opacity: 0;
--glow-color: 184, 130, 60;
isolation: isolate;
}
.pricing-card[data-glow]::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: radial-gradient(
circle at var(--glow-x) var(--glow-y),
rgba(var(--glow-color), 0.14) 0%,
transparent 65%
);
opacity: var(--glow-opacity);
transition: opacity 0.3s var(--ease);
pointer-events: none;
}
.pricing-card[data-glow]::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: radial-gradient(
circle at var(--glow-x) var(--glow-y),
rgba(var(--glow-color), 0.5) 0%,
transparent 55%
);
opacity: var(--glow-opacity);
transition: opacity 0.3s var(--ease);
pointer-events: none;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 1px;
}
.pricing-card[data-glow]:hover { --glow-opacity: 1; }
@media (max-width: 768px) {
.pricing-card[data-glow] {
--glow-x: 50%;
--glow-y: 40%;
--glow-opacity: 0.3;
}
.pricing-card[data-glow]:hover {
--glow-opacity: 0.3;
}
}
.pricing-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--color-ambar);
color: var(--color-carvao);
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 5px 18px;
border-radius: 999px;
white-space: nowrap;
}
.pricing-name {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-pergaminho-minus1);
margin-bottom: var(--space-s);
}
.pricing-price {
font-family: var(--font-mono);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
color: var(--color-pergaminho);
margin-bottom: 4px;
letter-spacing: 0.02em;
}
.pricing-period {
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--color-pergaminho-minus2);
margin-bottom: var(--space-m);
}
.pricing-desc {
font-size: 0.875rem;
color: rgba(237, 234, 227, 0.8);
line-height: 1.6;
margin-bottom: var(--space-s);
}
.pricing-desc--label {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ambar);
opacity: 0.85;
margin-bottom: var(--space-m);
}
.pricing-features {
list-style: none;
margin-bottom: var(--space-l);
display: flex;
flex-direction: column;
gap: 10px;
}
.pricing-features li {
font-size: 0.875rem;
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.pricing-features li.yes {
color: rgba(237, 234, 227, 0.85);
}
.pricing-features li.yes::before {
content: '\2713';
color: var(--color-ambar);
flex-shrink: 0;
font-weight: 700;
margin-top: 1px;
}
.pricing-features li.no {
color: var(--color-pergaminho-minus2);
opacity: 0.6;
}
.pricing-features li.no::before {
content: '\2717';
color: var(--color-pergaminho-minus2);
flex-shrink: 0;
opacity: 0.5;
}
.btn-pricing {
display: block;
width: 100%;
text-align: center;
padding: var(--space-s);
border-radius: 40px;
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.8125rem;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
touch-action: manipulation;
transition: transform var(--trans), box-shadow var(--trans), filter var(--trans);
border: none;
text-decoration: none;
}
.pricing-card.featured .btn-pricing {
background: var(--color-ambar);
color: var(--color-carvao);
box-shadow: var(--shadow-btn);
}
.pricing-card:not(.featured) .btn-pricing {
background: transparent;
border: 1px solid var(--border-h);
color: var(--color-ambar);
}
.btn-pricing:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow: var(--shadow-btn-hover);
}
.btn-pricing:active {
transform: translateY(0) scale(0.97);
}
.pricing-micro {
text-align: center;
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--color-pergaminho-minus2);
letter-spacing: 0.04em;
}
/* Value Stack */
.value-stack {
margin-bottom: var(--space-m);
padding: var(--space-s) 0;
border-top: 1px solid rgba(237, 234, 227, 0.06);
border-bottom: 1px solid rgba(237, 234, 227, 0.06);
}
.value-stack-item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
font-size: 0.8125rem;
color: rgba(237, 234, 227, 0.6);
}
.value-stack-item .vs-name {
flex: 1;
}
.value-stack-item .vs-price {
font-family: var(--font-mono);
font-size: 0.75rem;
text-decoration: line-through;
color: var(--color-pergaminho-minus2);
opacity: 0.7;
}
.value-stack-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--space-xs) 0;
margin-top: var(--space-2xs);
border-top: 1px solid rgba(237, 234, 227, 0.08);
}
.value-stack-total .vs-label {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-pergaminho-minus2);
}
.value-stack-total .vs-old-price {
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 700;
text-decoration: line-through;
color: var(--color-pergaminho-minus2);
}
.value-stack-current {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--space-xs) 0 4px;
}
.value-stack-current .vs-current-label {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ambar);
}
.value-stack-current .vs-current-price {
font-family: var(--font-mono);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-pergaminho);
letter-spacing: 0.02em;
}
/* Pricing Urgency */
.pricing-urgency {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--color-ambar);
letter-spacing: 0.04em;
margin-bottom: 4px;
opacity: 0.8;
}
/* Payment Trust */
.payment-trust { text-align: center; }
.payment-badges {
display: flex;
justify-content: center;
gap: var(--space-2xs);
flex-wrap: wrap;
margin-top: var(--space-xs);
}
.pay-badge {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-pergaminho-minus2);
border: 1px solid rgba(237, 234, 227, 0.08);
border-radius: 6px;
padding: 4px 10px;
background: rgba(237, 234, 227, 0.02);
}
/* ============================================================
GARANTIA
============================================================ */
.guarantee-section {
padding: var(--space-3xl) 0;
}
.guarantee-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: var(--card-bg);
border: 1px solid rgba(184, 130, 60, 0.3);
border-radius: 24px;
padding: var(--space-2xl) var(--space-l);
max-width: 800px;
margin: 0 auto;
box-shadow: 0 8px 32px rgba(184, 130, 60, 0.1);
}
.guarantee-badge {
display: flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
background: rgba(184, 130, 60, 0.1);
border-radius: 50%;
margin-bottom: var(--space-l);
}
.guarantee-text {
font-size: 1.0625rem;
color: var(--color-pergaminho-minus1);
line-height: 1.75;
}
@media (min-width: 768px) {
.guarantee-card {
flex-direction: row;
text-align: left;
padding: var(--space-2xl);
gap: var(--space-xl);
}
.guarantee-badge {
flex-shrink: 0;
margin-bottom: 0;
}
}
/* ============================================================
FAQ
============================================================ */
#faq {
background: var(--color-carvao);
}
.faq-list {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
.faq-item {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.3s var(--ease);
}
.faq-item.open {
border-color: rgba(184, 130, 60, 0.3);
}
.faq-q {
width: 100%;
background: none;
border: none;
color: var(--color-pergaminho);
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 500;
text-align: left;
padding: var(--space-m) var(--space-m);
cursor: pointer;
touch-action: manipulation;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
letter-spacing: 0.01em;
transition: color var(--trans);
line-height: 1.4;
}
.faq-q:hover {
color: var(--color-ambar);
}
.faq-arrow {
flex-shrink: 0;
transition: transform var(--trans);
color: var(--color-ambar);
}
.faq-item.open .faq-arrow {
transform: rotate(180deg);
}
.faq-a {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}
.faq-a-inner {
min-height: 0;
border-left: 2px solid var(--color-ambar);
}
.faq-item.open .faq-a {
grid-template-rows: 1fr;
}
.faq-a p {
padding: 0 var(--space-m) var(--space-m);
font-size: 0.875rem;
color: var(--color-pergaminho-minus1);
line-height: 1.75;
}
@media (prefers-reduced-motion: reduce) {
.faq-a { transition: none; }
}
/* ============================================================
FINAL CTA
============================================================ */
#final-cta {
background: var(--color-carvao);
text-align: center;
padding: var(--space-4xl) 0;
overflow: hidden;
}
.final-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.5rem, 4vw, 2.75rem);
margin-bottom: var(--space-m);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--color-pergaminho);
}
.final-sub {
font-size: 1.0625rem;
color: var(--color-pergaminho-minus1);
max-width: 560px;
margin: 0 auto var(--space-xl);
line-height: 1.7;
}
/* ============================================================
FOOTER
============================================================ */
footer {
background: var(--color-carvao-minus1);
border-top: 1px solid rgba(237, 234, 227, 0.06);
padding: var(--space-xl) 0;
}
@media (max-width: 768px) {
footer { padding-bottom: calc(var(--space-xl) + 72px); }
}
.footer-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-m);
text-align: center;
}
.footer-logo {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-pergaminho-minus1);
}
.footer-links {
display: flex;
gap: var(--space-m);
flex-wrap: wrap;
justify-content: center;
}
.footer-links a {
font-size: 0.8125rem;
color: var(--color-pergaminho-minus2);
transition: color 0.2s var(--ease);
}
.footer-links a:hover {
color: var(--color-ambar);
}
.footer-copy {
font-size: 0.75rem;
color: var(--color-pergaminho-minus2);
opacity: 0.7;
}
.footer-legal {
font-size: 0.6875rem;
color: var(--color-pergaminho-minus2);
opacity: 0.5;
max-width: 500px;
line-height: 1.5;
}
/* ============================================================
KEYFRAME ANIMATIONS
============================================================ */
@keyframes orb-pulse {
0%, 100% { opacity: 0; transform: scale(0.9) translateX(var(--tx, 0)); }
50% { opacity: 1; transform: scale(1.05) translateX(var(--tx, 0)); }
}
@keyframes wave-drift {
from { background-position: 0 0; }
to { background-position: 200px 0; }
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes wf-anim {
from { height: 4px; }
to { height: var(--h, 16px); }
}
@keyframes code-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
@keyframes card-highlight-pulse {
0% { box-shadow: var(--glow-s); border-color: var(--card-border); }
25% { box-shadow: 0 0 0 3px rgba(184, 130, 60, 0.25), 0 0 40px rgba(184, 130, 60, 0.2); border-color: var(--color-ambar); }
75% { box-shadow: 0 0 0 3px rgba(184, 130, 60, 0.25), 0 0 40px rgba(184, 130, 60, 0.2); border-color: var(--color-ambar); }
100% { box-shadow: var(--glow-s); border-color: var(--card-border); }
}
@keyframes pulse-ambar {
0%, 100% { border-color: rgba(184, 130, 60, 0.25); }
50% { border-color: rgba(184, 130, 60, 0.55); }
}
@keyframes shimmer-counter {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
#social-counter.counted {
background: linear-gradient(
90deg,
var(--color-pergaminho) 0%,
var(--color-pergaminho) 40%,
rgba(184, 130, 60, 0.85) 50%,
var(--color-pergaminho) 60%,
var(--color-pergaminho) 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer-counter 1.5s linear 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
#social-counter.counted { animation: none; background: none; -webkit-text-fill-color: unset; }
}
/* Freq Reforco */
.freq-reforco {
margin-top: var(--space-2xl);
text-align: center;
padding: var(--space-xl) var(--space-m);
border-top: 1px solid rgba(237, 234, 227, 0.06);
}
.freq-reforco-label {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ambar);
margin-bottom: var(--space-l);
}
.freq-reforco-grid {
display: flex;
justify-content: center;
gap: var(--space-l);
flex-wrap: wrap;
margin-bottom: var(--space-l);
}
.fr-item {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.fr-hz {
font-family: var(--font-mono);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-pergaminho);
}
.fr-nome {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--color-pergaminho-minus2);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.freq-reforco-sub {
font-size: 1rem;
color: var(--color-pergaminho-minus1);
line-height: 1.7;
}
.freq-reforco-sub strong {
color: var(--color-pergaminho);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
.mech-cards { grid-template-columns: 1fr; }
.product-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
.pricing-cards { grid-template-columns: 1fr; max-width: 440px; }
.pricing-card.featured { transform: none; }
.testimonials { grid-template-columns: 1fr; }
.dim-cards { grid-template-columns: 1fr 1fr; }
.hero { padding-top: 80px; }
}
@media (max-width: 768px) {
.dim-cards { grid-template-columns: 1fr 1fr; }
.code-preview { padding: var(--space-m) var(--space-m); }
.cp-code { font-size: clamp(1.25rem, 6vw, 2rem); }
}
@media (max-width: 600px) {
section { padding: var(--space-l) 0; }
.mech-cards { gap: var(--space-s); }
.dim-cards { grid-template-columns: 1fr; }
.pricing-cards { max-width: 100%; }
.pricing-card { min-width: 0; width: 100%; }
.section-title { font-size: clamp(1.25rem, 5vw, 1.75rem); }
.btn-primary { padding: var(--space-s) var(--space-l); font-size: 0.6875rem; }
.btn-max { padding: 18px var(--space-l); font-size: 0.75rem; }
}
@media (max-width: 480px) {
.pain-twist { padding: var(--space-m) 18px; }
.vsl-label { display: none; }
}
/* ============================================================
MOBILE CTA BAR
============================================================ */
.mobile-cta-bar {
display: none;
}
@media (max-width: 768px) {
.mobile-cta-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 200;
background: rgba(43, 30, 14, 0.96);
padding: var(--space-xs) var(--space-m);
border-top: 1px solid rgba(184, 130, 60, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.mcta-links {
display: flex;
align-items: center;
gap: var(--space-2xs);
flex-shrink: 0;
}
.mcta-anchor {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-pergaminho-minus1);
white-space: nowrap;
transition: color var(--trans);
}
.mcta-anchor:hover,
.mcta-anchor:active {
color: var(--color-ambar);
}
.mcta-sep {
font-size: 0.625rem;
color: rgba(237, 234, 227, 0.15);
}
.mcta-whatsapp-slot {
display: flex;
align-items: center;
}
.mcta-btn {
flex-shrink: 0;
background: var(--color-ambar);
color: var(--color-carvao);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 10px 18px;
border-radius: 40px;
white-space: nowrap;
box-shadow: 0 4px 20px rgba(184, 130, 60, 0.3);
transition: filter 0.2s var(--ease), transform 0.2s var(--ease);
text-decoration: none;
}
.mcta-btn:active {
transform: scale(0.97);
filter: brightness(1.08);
}
body { padding-bottom: 72px; }
}
/* ============================================================
NEW COMPONENTS — Copy Update v2
============================================================ */
/* Section Eyebrow — stamp/dossier style */
.section-eyebrow {
display: block;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ambar);
text-align: center;
margin-bottom: var(--space-m);
opacity: 0.85;
}
/* Pill Badge — CIA document ID inline */
.pill-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--color-ambar);
border: 1px solid rgba(184, 130, 60, 0.3);
border-radius: 999px;
padding: 2px 12px;
white-space: nowrap;
vertical-align: middle;
}
/* Mechanism intro text */
.mech-intro {
max-width: 800px;
margin: 0 auto;
}
.mech-intro p {
font-size: 1.0625rem;
color: var(--color-pergaminho-minus1);
line-height: 1.75;
margin-bottom: var(--space-m);
}
.mech-intro p:last-child {
margin-bottom: 0;
}
.mech-intro__meta {
font-family: var(--font-mono);
font-size: 0.75rem !important;
letter-spacing: 0.02em;
color: var(--color-pergaminho-minus2) !important;
font-style: italic;
opacity: 0.75;
}
/* "Bloco-documento" — arquivo antigo: textura sóbria, borda fria */
.mech-doc-box {
max-width: 800px;
margin: 0 auto var(--space-2xl);
padding: var(--space-xl) var(--space-l);
border-radius: var(--radius);
background:
linear-gradient(165deg, rgba(126, 138, 153, 0.05), rgba(237, 234, 227, 0.015)),
var(--color-carvao);
border: 1px solid rgba(126, 138, 153, 0.22);
text-align: center;
}
.mech-doc-box .btn-gateway {
margin-bottom: 0;
}
/* "A virada" — presente luminoso: destaque âmbar, glow, entrada no scroll */
.mech-turn {
position: relative;
max-width: 720px;
margin: 0 auto var(--space-2xl);
padding: var(--space-xl) var(--space-l);
border-radius: var(--radius);
text-align: center;
background: radial-gradient(120% 140% at 50% 0%, rgba(184, 130, 60, 0.14), rgba(184, 130, 60, 0.03) 60%, transparent 100%);
border: 1px solid rgba(184, 130, 60, 0.35);
box-shadow: var(--shadow-btn), inset 0 0 40px rgba(184, 130, 60, 0.06);
overflow: hidden;
}
.mech-turn::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
box-shadow: 0 0 60px rgba(184, 130, 60, 0.18);
}
.mech-turn p {
font-family: var(--font-serif);
font-size: clamp(1.15rem, 2vw, 1.5rem);
line-height: 1.6;
color: var(--color-pergaminho);
margin-bottom: var(--space-m);
}
.mech-turn p:last-child {
margin-bottom: 0;
color: var(--color-ambar);
font-style: italic;
}
.mech-closing {
text-align: center;
max-width: 52ch;
margin: var(--space-xl) auto 0;
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.05rem, 1.7vw, 1.3rem);
color: var(--color-pergaminho-minus1);
}
@media (max-width: 720px) {
.mech-doc-box,
.mech-turn {
padding: var(--space-l) var(--space-m);
}
}
/* Mechanism phase label */
.mech-phase-label {
display: block;
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-ambar);
margin-bottom: var(--space-s);
opacity: 0.8;
}
/* Gateway button */
.btn-gateway {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ambar);
background: rgba(184, 130, 60, 0.06);
border: 1px solid rgba(184, 130, 60, 0.25);
border-radius: 999px;
padding: 12px 28px;
cursor: pointer;
touch-action: manipulation;
transition: background var(--trans), box-shadow var(--trans), transform var(--trans);
margin: var(--space-l) auto;
max-width: fit-content;
}
.btn-gateway:hover {
background: rgba(184, 130, 60, 0.12);
box-shadow: 0 0 24px rgba(184, 130, 60, 0.15);
transform: translateY(-2px);
}
.btn-gateway:active {
transform: translateY(0) scale(0.97);
}
.btn-gateway:focus-visible {
outline: 2px solid var(--color-ambar);
outline-offset: 3px;
}
/* ============================================================
GATEWAY MODAL
============================================================ */
.gateway-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.gateway-modal.active {
opacity: 1;
visibility: visible;
}
.gateway-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(11, 11, 14, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.gateway-modal__content {
position: relative;
width: 90vw;
max-width: 900px;
height: 85vh;
max-height: 700px;
background: var(--color-carvao-plus1);
border: 1px solid rgba(184, 130, 60, 0.2);
border-radius: var(--radius);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(184, 130, 60, 0.08);
transform: translateY(20px) scale(0.97);
transition: transform 0.4s var(--ease);
}
.gateway-modal.active .gateway-modal__content {
transform: translateY(0) scale(1);
}
.gateway-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-m) var(--space-l);
border-bottom: 1px solid rgba(237, 234, 227, 0.06);
flex-shrink: 0;
}
.gateway-modal__header h3 {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-pergaminho);
}
.gateway-modal__close {
width: 36px;
height: 36px;
background: rgba(237, 234, 227, 0.05);
border: 1px solid rgba(237, 234, 227, 0.1);
border-radius: 50%;
color: var(--color-pergaminho);
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--trans), border-color var(--trans);
line-height: 1;
}
.gateway-modal__close:hover {
background: rgba(184, 130, 60, 0.15);
border-color: rgba(184, 130, 60, 0.3);
}
.gateway-modal__close:focus-visible {
outline: 2px solid var(--color-ambar);
outline-offset: 2px;
}
.gateway-modal__tabs {
display: flex;
gap: 0;
padding: 0 var(--space-l);
border-bottom: 1px solid rgba(237, 234, 227, 0.06);
flex-shrink: 0;
}
.gateway-modal__tab {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-pergaminho-minus2);
background: none;
border: none;
padding: var(--space-s) var(--space-m);
cursor: pointer;
position: relative;
transition: color var(--trans);
}
.gateway-modal__tab:hover {
color: var(--color-pergaminho);
}
.gateway-modal__tab--active {
color: var(--color-ambar);
}
.gateway-modal__tab--active::after {
content: '';
position: absolute;
bottom: -1px;
left: var(--space-m);
right: var(--space-m);
height: 2px;
background: var(--color-ambar);
border-radius: 2px 2px 0 0;
}
.gateway-modal__body {
flex: 1;
overflow: hidden;
padding: 0;
display: flex;
flex-direction: column;
}
.gateway-pdf-viewer {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
background: #ececec;
}
.gateway-pdf-img {
width: 100%;
height: auto;
display: block;
border-bottom: 2px solid var(--color-carvao);
}
@media (max-width: 600px) {
.gateway-modal__content {
width: 96vw;
height: 90vh;
border-radius: var(--radius-s);
}
.gateway-modal__header {
padding: var(--space-s) var(--space-m);
}
.gateway-modal__header h3 {
font-size: 0.625rem;
}
.gateway-modal__tabs {
padding: 0 var(--space-m);
}
}
/* Section Divider — draw-on-scroll via IntersectionObserver (JS adds .visible) */
.section-divider {
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(184, 130, 60, 0.08) 15%,
rgba(184, 130, 60, 0.5) 50%,
rgba(184, 130, 60, 0.08) 85%,
transparent 100%
);
clip-path: inset(0 50% 0 50%);
transition: clip-path 1.1s cubic-bezier(0.32, 0.72, 0, 1);
margin: 0;
}
.section-divider.visible {
clip-path: inset(0 0% 0 0%);
}
@media (prefers-reduced-motion: reduce) {
.section-divider {
clip-path: none;
transition: none;
}
}
/* Transition text — between demo and product */
.transition-text {
max-width: 800px;
margin: var(--space-2xl) auto 0;
padding: 0 var(--space-m);
}
.experience-card {
display: flex;
flex-direction: column;
background: var(--card-bg);
border: 1px solid rgba(184, 130, 60, 0.2);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.experience-img {
width: 100%;
height: 240px;
object-fit: cover;
opacity: 0.85;
}
.experience-content {
padding: var(--space-l);
text-align: left;
}
.experience-content h3 {
font-family: var(--font-serif);
font-size: 1.5rem;
color: var(--color-ambar);
margin-bottom: var(--space-s);
}
.experience-content p {
font-size: 1rem;
color: var(--color-pergaminho-minus1);
line-height: 1.6;
margin-bottom: var(--space-xs);
}
.experience-content strong {
color: var(--color-pergaminho);
font-weight: 500;
}
@media (min-width: 768px) {
.experience-card {
flex-direction: row;
align-items: center;
}
.experience-img {
width: 40%;
height: auto;
align-self: stretch;
}
.experience-content {
width: 60%;
padding: var(--space-xl);
}
}
/* FAQ expanded — longer answers */
.faq-item.open .faq-a {
max-height: 600px;
}
/* Value stack standalone container */
.value-stack-container {
max-width: 600px;
margin: 0 auto var(--space-xl);
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: var(--space-l);
}
/* Dim card improvements for new layout */
.dim-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-s);
max-width: 800px;
margin: 0 auto var(--space-2xl);
}
@media (max-width: 600px) {
.dim-cards-grid { grid-template-columns: 1fr; }
}
/* Guarantee document style */
#guarantee .section-title {
font-family: var(--font-mono);
font-size: clamp(1rem, 2.5vw, 1.25rem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-pergaminho);
}
/* ============================================================
ASSET REAL CLASSES
============================================================ */
.mech-bg-real {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.25;
mix-blend-mode: luminosity;
pointer-events: none;
mask-image: linear-gradient(to bottom, black 0%, transparent 70%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 70%);
}
.demo-chladni-real {
width: 100%;
max-height: 200px;
border-radius: 8px;
object-fit: cover;
opacity: 0.45;
mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
margin-bottom: var(--space-xl);
}
.app-mockup-real {
max-width: 280px;
margin: var(--space-2xl) auto 0;
border-radius: 24px;
display: block;
animation: pulse-glow 3s infinite alternate ease-in-out;
}
@keyframes pulse-glow {
0% { filter: drop-shadow(0 0 10px rgba(184, 130, 60, 0.1)); }
100% { filter: drop-shadow(0 0 35px rgba(184, 130, 60, 0.5)); }
}
.final-cta-bg-real {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.35;
mix-blend-mode: luminosity;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 80%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 80%, transparent 100%);
}
/* ============================================================
HERO DEMO LINK — rota do cético (Parte 3.2)
============================================================ */
/* ============================================================
PRICING TAG GLYPH — substitui emoji (Parte 5.1)
============================================================ */
.pricing-tag-glyph {
color: var(--color-carvao);
font-family: var(--font-mono);
margin-right: 4px;
}
/* ============================================================
EVOLUTION — SVG icons replace emoji (Parte 5.1)
============================================================ */
.evo-icon-svg {
width: 28px;
height: 28px;
flex-shrink: 0;
color: var(--color-pergaminho-minus1);
}
.evo-step.active .evo-icon-svg {
color: var(--color-ambar);
}
/* ============================================================
QUOTE DIVIDER — Tesla (Parte 4.2)
============================================================ */
#quote-divider {
padding: var(--space-3xl) 0;
background: var(--color-carvao);
}
.tesla-quote {
max-width: 700px;
margin: 0 auto;
text-align: center;
border: none;
}
.tesla-quote p {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.375rem, 3vw, 2rem);
line-height: 1.45;
color: var(--color-pergaminho);
letter-spacing: -0.01em;
margin-bottom: var(--space-m);
}
.tesla-quote cite {
display: block;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-pergaminho-minus2);
opacity: 0.65;
font-style: normal;
}
.quote-ref {
color: var(--color-ambar);
opacity: 0.75;
}
/* ============================================================
RESEARCH SECTION (Parte 4.3)
============================================================ */
#research {
background: var(--color-carvao);
}
.research-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2.5vw, 2rem);
margin: var(--space-2xl) 0 var(--space-xl);
}
.research-card {
background: rgba(237, 234, 227, 0.03);
border: 1px solid rgba(237, 234, 227, 0.10);
border-radius: 14px;
padding: var(--space-l) var(--space-m);
display: flex;
flex-direction: column;
gap: var(--space-s);
transition: border-color var(--trans), transform var(--trans);
}
.research-card:hover {
border-color: rgba(184, 130, 60, 0.28);
transform: translateY(-3px);
}
.research-meta {
display: block;
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ambar);
opacity: 0.85;
}
.research-card h3 {
font-family: var(--font-serif);
font-size: clamp(1.125rem, 2vw, 1.5rem);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--color-pergaminho);
line-height: 1.2;
}
.research-card p {
font-size: 0.9rem;
line-height: 1.65;
color: var(--color-pergaminho-minus1);
flex: 1;
}
.research-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ambar);
background: rgba(184, 130, 60, 0.06);
border: 1px solid rgba(184, 130, 60, 0.25);
border-radius: 999px;
padding: 8px 18px;
cursor: pointer;
touch-action: manipulation;
transition: background var(--trans), box-shadow var(--trans);
width: fit-content;
margin-top: auto;
}
.research-link:hover {
background: rgba(184, 130, 60, 0.12);
box-shadow: 0 0 18px rgba(184, 130, 60, 0.15);
}
.research-footnote {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-pergaminho-minus1);
text-align: center;
opacity: 0.65;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.catalog-version {
display: inline-block;
margin-top: 4px;
opacity: 0.7;
}
@media (max-width: 768px) {
.research-grid {
grid-template-columns: 1fr;
gap: var(--space-m);
}
}
@media (prefers-reduced-motion: reduce) {
.research-card { transition: none; }
}
/* ============================================================
ASSISTENTE SECTION (Parte 4.4)
============================================================ */
#assistente {
background: var(--color-carvao);
}
.assist-intro {
font-size: 1.0625rem;
color: var(--color-pergaminho-minus1);
max-width: 560px;
margin: 0 auto var(--space-2xl);
text-align: center;
line-height: 1.7;
}
.assist-mock {
max-width: 640px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-m);
}
.assist-bubble {
border-radius: 14px;
padding: var(--space-m) var(--space-l);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.assist-bubble--user {
background: rgba(237, 234, 227, 0.04);
border: 1px solid rgba(237, 234, 227, 0.10);
align-self: flex-start;
max-width: 85%;
}
.assist-bubble--ai {
background: rgba(184, 130, 60, 0.04);
border: 1px solid rgba(184, 130, 60, 0.30);
align-self: flex-end;
max-width: 90%;
}
.assist-label {
display: block;
font-family: var(--font-mono);
font-size: 0.5625rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-pergaminho-minus2);
margin-bottom: 2px;
}
.assist-bubble--ai .assist-label {
color: var(--color-ambar);
opacity: 0.75;
}
.assist-bubble p {
font-size: 0.9375rem;
color: var(--color-pergaminho-minus1);
line-height: 1.6;
}
.assist-code {
font-family: var(--font-mono) !important;
color: var(--color-ambar) !important;
font-size: 0.875rem !important;
letter-spacing: 0.04em;
}
.assist-detail {
font-family: var(--font-mono);
font-size: 0.75rem !important;
color: var(--color-pergaminho-minus2) !important;
letter-spacing: 0.03em;
}
.assist-availability {
font-family: var(--font-mono);
font-size: 0.6875rem;
text-align: center;
color: var(--color-pergaminho-minus2);
opacity: 0.5;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: var(--space-s);
}
@media (max-width: 600px) {
.assist-bubble--user,
.assist-bubble--ai { max-width: 100%; align-self: stretch; }
.assist-bubble { padding: var(--space-m); }
}
/* ============================================================
ARQUIVO ABERTO — Email capture (Parte 4.5)
============================================================ */
#arquivo-aberto {
background: var(--color-carvao);
padding: var(--space-3xl) 0;
}
.open-archive-card {
max-width: 560px;
margin: 0 auto;
background: rgba(237, 234, 227, 0.03);
border: 1px solid rgba(184, 130, 60, 0.22);
border-radius: 20px;
padding: var(--space-2xl) var(--space-xl);
text-align: center;
}
.oa-title {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--color-pergaminho);
margin: var(--space-s) 0 var(--space-m);
}
.oa-sub {
font-size: 0.9375rem;
color: var(--color-pergaminho-minus1);
line-height: 1.65;
max-width: 440px;
margin: 0 auto var(--space-l);
}
.oa-form {
display: flex;
gap: var(--space-s);
flex-wrap: wrap;
justify-content: center;
}
.oa-form input[type="email"] {
flex: 1;
min-width: 220px;
background: rgba(11, 11, 14, 0.6);
border: 1px solid rgba(237, 234, 227, 0.12);
border-radius: 40px;
padding: 14px 20px;
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--color-pergaminho);
outline: none;
transition: border-color var(--trans);
}
.oa-form input[type="email"]::placeholder {
color: var(--color-pergaminho-minus2);
opacity: 0.7;
}
.oa-form input[type="email"]:focus {
border-color: var(--color-ambar);
box-shadow: 0 0 16px rgba(184, 130, 60, 0.12);
}
.oa-micro {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--color-pergaminho-minus2);
opacity: 0.55;
margin-top: var(--space-s);
letter-spacing: 0.04em;
}
/* btn-secondary — used in email form and gateway modal footer */
.btn-secondary {
display: inline-block;
background: transparent;
border: 1px solid var(--color-ambar);
color: var(--color-ambar);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 14px 28px;
border-radius: 40px;
cursor: pointer;
touch-action: manipulation;
transition: background var(--trans), color var(--trans), box-shadow var(--trans);
text-decoration: none;
white-space: nowrap;
}
.btn-secondary:hover {
background: var(--color-ambar);
color: var(--color-carvao);
box-shadow: 0 0 24px rgba(184, 130, 60, 0.3);
}
.btn-secondary:active {
transform: scale(0.97);
}
@media (max-width: 540px) {
.open-archive-card { padding: var(--space-xl) var(--space-m); }
.oa-form { flex-direction: column; gap: var(--space-xs); }
.oa-form input[type="email"], .btn-secondary { width: 100%; }
}
/* ============================================================
FOOTER INSTITUCIONAL — grid 3 colunas (Parte 4.6)
============================================================ */
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: var(--space-2xl);
padding-top: var(--space-2xl);
padding-bottom: var(--space-xl);
}
.footer-col {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.footer-col--main {
gap: var(--space-s);
}
.footer-logo {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-pergaminho-minus1);
margin-bottom: var(--space-2xs);
}
.footer-selo-img {
display: block;
width: 80px;
height: 80px;
object-fit: contain;
opacity: 0.75;
margin: 0 auto var(--space-s); /* centralizado no mobile */
transition: opacity 0.3s ease;
}
.footer-selo-img:hover {
opacity: 1;
}
/* Desktop: alinhar à esquerda se o footer for em colunas */
@media (min-width: 769px) {
.footer-selo-img {
margin: 0 0 var(--space-s) 0;
}
}
.footer-desc {
font-size: 0.8125rem;
color: var(--color-pergaminho-minus2);
line-height: 1.65;
opacity: 0.7;
}
.footer-contact {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-pergaminho-minus2);
opacity: 0.55;
letter-spacing: 0.04em;
}
.footer-contact a {
color: inherit;
text-decoration: none;
transition: color var(--trans), opacity var(--trans);
}
.footer-contact a:hover {
color: var(--color-ambar);
opacity: 1;
}
.footer-col-title {
display: block;
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-ambar);
opacity: 0.85;
margin-bottom: var(--space-2xs);
}
.footer-col a {
font-size: 0.8125rem;
color: rgba(237, 234, 227, 0.55);
transition: color 0.2s var(--ease);
line-height: 1.5;
}
.footer-col a:hover {
color: var(--color-ambar);
}
/* Button styled as link for gateway in footer */
.footer-link-btn {
display: inline;
background: none;
border: none;
padding: 0;
font: inherit;
font-size: 0.8125rem;
color: rgba(237, 234, 227, 0.55);
cursor: pointer;
text-align: left;
transition: color 0.2s var(--ease);
line-height: 1.5;
}
.footer-link-btn:hover {
color: var(--color-ambar);
}
.footer-bottom {
border-top: 1px solid rgba(237, 234, 227, 0.06);
padding-top: var(--space-l);
padding-bottom: var(--space-l);
display: flex;
flex-direction: column;
gap: var(--space-s);
}
.footer-copy {
font-size: 0.75rem;
color: var(--color-pergaminho-minus2);
opacity: 0.65;
}
.footer-legal {
font-size: 0.6875rem;
color: var(--color-pergaminho-minus2);
opacity: 0.45;
line-height: 1.55;
max-width: 800px;
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
padding-top: var(--space-xl);
}
footer { padding-bottom: calc(var(--space-xl) + 72px); }
}
/* ============================================================
PARCELAS — pricing card Completo (Parte 2.5)
============================================================ */
.pricing-installments {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-pergaminho-minus2);
opacity: 0.65;
letter-spacing: 0.04em;
margin-bottom: var(--space-xs);
}
/* ============================================================
REDUCED MOTION — novos componentes animados
============================================================ */
@media (prefers-reduced-motion: reduce) {
.research-card,
.assist-bubble,
.open-archive-card {
transition: none;
}
}
/* === REFACTOR v2 === */
/* NAV e hero aside: ocultar no mobile */
@media (max-width: 768px) {
.nav-links-group { display: none; }
.hero__aside { display: none; }
}
/* GARANTIA dentro da oferta */
#oferta .guarantee-card {
margin-top: 2.5rem;
border-top: 0.5px solid rgba(237, 234, 227, 0.1);
padding-top: 2rem;
background: transparent;
box-shadow: none;
}
/* GATEWAY BTN: rebaixar visualmente */
#gateway-btn {
font-size: 0.8rem;
opacity: 0.6;
margin-top: 0.5rem;
}
/* === SPRINT v2.1 === */
/* FIX GAP: Hero altura automática no mobile (aside oculto não precisa de 100dvh) */
@media (max-width: 768px) {
.hero { min-height: auto !important; padding-bottom: var(--space-m); }
.hero__grid { min-height: auto !important; }
}
/* POST-DEMO BRIDGE CTA — entre demo e social */
.post-demo-bridge {
display: none;
justify-content: center;
align-items: center;
padding: 2.5rem var(--space-m) 0.5rem;
opacity: 0;
transform: translateY(24px);
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-demo-bridge.show {
opacity: 1;
transform: translateY(0);
}
.bridge-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
background: linear-gradient(135deg, #C8912A 0%, #A06C1A 100%);
color: #0B0B0E;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.025em;
line-height: 1.3;
padding: 1rem 1.5rem;
border-radius: 2rem;
text-decoration: none;
text-align: center;
white-space: normal;
box-shadow:
0 0 0 1px rgba(184, 130, 60, 0.25),
0 0 28px rgba(184, 130, 60, 0.50),
0 6px 20px rgba(0, 0, 0, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.bridge-cta-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 0 0 1px rgba(184, 130, 60, 0.4),
0 0 44px rgba(184, 130, 60, 0.70),
0 10px 30px rgba(0, 0, 0, 0.45);
filter: brightness(1.08);
}
.bridge-cta-btn:active { transform: translateY(0) scale(0.98); }
/* === SPRINT v2.2: Fixes === */
/* NAV: forçar visibilidade no desktop (CSS anterior só tinha o hide mobile) */
.nav-links-group {
display: flex !important;
align-items: center;
gap: 1.25rem;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 768px) {
.nav-links-group { display: none !important; }
}
/* ============================================================
NAV FIX — mostra O Acervo / Demo / Mecanismo no desktop e mobile
============================================================ */
#header-nav {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 10000 !important;
min-height: 60px;
background: rgba(11, 11, 14, 0.92) !important;
border-bottom: 1px solid rgba(237, 234, 227, 0.12) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
#header-nav .nav-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 60px;
gap: 16px;
}
#header-nav .nav-links-group {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
visibility: visible !important;
opacity: 1 !important;
min-width: 0;
}
#header-nav .nav-link-anchor {
display: inline-flex !important;
align-items: center;
justify-content: center;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 7px 14px;
border: 1px solid rgba(237, 234, 227, 0.14);
border-radius: 999px;
color: var(--color-pergaminho-minus1);
background: rgba(237, 234, 227, 0.025);
}
#header-nav .nav-link-anchor:hover {
border-color: var(--color-ambar);
color: var(--color-pergaminho);
background: rgba(184, 130, 60, 0.08);
}
/* Mobile: mantém os botões visíveis em vez de esconder */
@media (max-width: 768px) {
#header-nav .nav-inner {
height: auto !important;
min-height: 58px;
padding-top: 8px;
padding-bottom: 8px;
gap: 8px;
}
#header-nav .logo-img {
height: 24px !important;
max-width: 120px !important;
}
#header-nav .nav-links-group {
display: flex !important;
flex: 1 1 auto;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
-ms-overflow-style: none;
}
#header-nav .nav-links-group::-webkit-scrollbar {
display: none;
}
#header-nav .nav-link-anchor {
font-size: 0.56rem;
letter-spacing: 0.055em;
padding: 6px 9px;
}
}
@media (max-width: 380px) {
#header-nav .logo-img {
max-width: 96px !important;
}
#header-nav .nav-link-anchor {
font-size: 0.52rem;
padding: 5px 7px;
}
}
/* ============================================================
BOTÃO DE SUPORTE E E-MAIL NO FOOTER
============================================================ */
.support-wrapper {
margin-bottom: 2.5rem;
}
.btn-support-card {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 22px;
background: rgba(184, 130, 60, 0.04);
border: 1px solid rgba(184, 130, 60, 0.22);
border-radius: 30px;
color: var(--color-pergaminho-minus2);
text-decoration: none;
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.03em;
transition: all var(--trans);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-support-card strong {
color: var(--color-ambar);
font-weight: 600;
margin-left: 4px;
}
.btn-support-card:hover {
background: rgba(184, 130, 60, 0.1);
border-color: var(--color-ambar);
color: var(--color-pergaminho);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(184, 130, 60, 0.15);
}
.btn-support-card:active {
transform: translateY(0);
}
/* ============================================================
OTIMIZAÇÕES CLARITY — SPRINT
============================================================ */
/* Bloco 2.2 — Bridge CTA Attention Animation */
.post-demo-cta.show .bridge-cta-btn {
animation: cta-pulse-amber 2.5s ease-in-out 0.8s infinite;
}
@keyframes cta-pulse-amber {
0%, 100% { box-shadow: 0 0 0 1px rgba(184,130,60,0.25), 0 0 28px rgba(184,130,60,0.50), 0 6px 20px rgba(0,0,0,0.35); }
50% { box-shadow: 0 0 0 1px rgba(184,130,60,0.5), 0 0 48px rgba(184,130,60,0.75), 0 8px 28px rgba(0,0,0,0.45); }
}
/* Bloco 2.4 — Demo Sticky Bar */
.demo-sticky-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 10px var(--space-m);
background: rgba(11, 11, 14, 0.97);
border-bottom: 1px solid rgba(184, 130, 60, 0.25);
backdrop-filter: blur(8px);
transform: translateY(-100%);
transition: transform 0.4s var(--ease);
pointer-events: none;
}
.demo-sticky-bar.show {
transform: translateY(0);
pointer-events: all;
}
.demo-sticky-bar__text {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.08em;
color: var(--color-pergaminho-minus1);
text-transform: uppercase;
white-space: nowrap;
}
.demo-sticky-bar__btn {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-carvao);
background: var(--color-ambar);
padding: 6px 14px;
border-radius: 20px;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 480px) {
.demo-sticky-bar__text { display: none; }
}
/* Bloco 8 — Compact mobile spacings */
@media (max-width: 768px) {
.section-divider {
margin: var(--space-m) 0 !important;
}
#pain .container,
#mechanism .container,
#faq .container {
padding-block: 0 !important;
}
}
/* ============================================================
MATERIAL POR DENTRO & MOCKUP SHOWCASE SPRINT
============================================================ */
.inside-preview-section {
padding-block: var(--space-3xl) var(--space-xl);
background: var(--color-carvao);
overflow: hidden;
}
@media (max-width: 768px) {
.inside-preview-section {
padding-block: var(--space-l) var(--space-m);
}
}
.preview-carousel-wrap {
position: relative;
max-width: 1200px;
margin: var(--space-xl) auto 0;
padding: 0 48px;
}
@media (max-width: 768px) {
.preview-carousel-wrap {
margin-top: var(--space-m);
}
}
.preview-carousel-container {
overflow: hidden;
width: 100%;
}
.preview-carousel-track {
display: flex;
gap: 24px;
transition: transform 0.4s var(--ease);
}
.preview-card {
flex: 0 0 calc((100% - 48px) / 3); /* 3 cards visible */
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(184, 130, 60, 0.18);
background: var(--color-carvao-minus1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
transition: transform 0.3s ease, border-color 0.3s ease;
}
.preview-card:hover {
transform: translateY(-4px);
border-color: rgba(184, 130, 60, 0.4);
}
.preview-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Preview carousel controls */
.preview-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 44px;
height: 44px;
background: rgba(184, 130, 60, 0.15);
border: 1px solid rgba(184, 130, 60, 0.25);
border-radius: 50%;
color: var(--color-pergaminho);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
}
.preview-carousel-btn:hover {
background: var(--color-ambar);
color: var(--color-carvao);
border-color: var(--color-ambar);
}
.preview-carousel-btn.prev { left: 0; }
.preview-carousel-btn.next { right: 0; }
.preview-carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: var(--space-l);
}
.preview-carousel-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(237, 234, 227, 0.2);
cursor: pointer;
transition: background 0.3s ease;
}
.preview-carousel-dots span.active {
background: var(--color-ambar);
width: 20px;
border-radius: 4px;
}
@media (max-width: 900px) {
.preview-card {
flex: 0 0 calc((100% - 24px) / 2); /* 2 cards visible */
}
}
@media (max-width: 600px) {
.preview-carousel-wrap {
padding: 0 20px;
}
.preview-card {
flex: 0 0 100%; /* 1 card visible */
}
.preview-carousel-btn {
display: none;
}
}