/* =============================================================================
Foco G — Design System
-----------------------------------------------------------------------------
Consultoria de negócios brasileira. Tom: autoridade corporativa sóbria +
direção clara e direta (dor do dono). Estética editorial premium sobre base
azul-profundo com acento amarelo preciso.
Tipografia display: Fraunces (serifada de alto contraste, com eixo óptico)
Tipografia corpo: Outfit (sem serifa, geométrica limpa)
Ordem do arquivo:
1. Fontes (o vive no HTML; @import aqui como fallback)
2. Tokens (:root)
3. Reset mínimo
4. Base tipográfica
5. Layout (.container, .section)
6. Componentes (.btn, .eyebrow, .site-header, .site-footer)
7. Reveal seguro (visível sem JS)
============================================================================ */
/* 1. FONTES ---------------------------------------------------------------- */
/* Carga via no (com preconnect). */
/* 2. TOKENS ---------------------------------------------------------------- */
:root {
/* --- Marca (base da spec, preservada) --- */
--deep-blue: #121826; /* azul-profundo — assinatura */
--charcoal: #1A202C; /* carvão */
--yellow: #FFC700; /* amarelo — acento de assinatura */
--off-white: #F7FAFC; /* branco-gelo */
--gray: #A0AEC0; /* cinza neutro */
/* --- Rampa azul (profundidade evoluída) --- */
--navy-950: #0B0F18; /* mais profundo — atmosfera/rodapé */
--navy-900: #121826; /* = deep-blue */
--navy-800: #1A202C; /* = charcoal */
--navy-700: #232B3D; /* superfície elevada escura */
--navy-600: #2E3850; /* bordas/hairline no escuro */
--navy-500: #46527094; /* véu translúcido */
/* --- Rampa âmbar (acento) --- */
--amber-400: #FFD84D; /* realce claro */
--amber-500: #FFC700; /* = yellow */
--amber-600: #EBAF00; /* hover / profundidade */
--amber-700: #C99500; /* pressionado */
--amber-tint: rgba(255, 199, 0, 0.12); /* fundo suave do acento */
/* --- Neutros claros --- */
--white: #FFFFFF;
--paper: #F7FAFC; /* = off-white — fundo da página */
--paper-2: #EEF2F7; /* seção alternada clara */
--hairline: #DCE3ED; /* borda sutil no claro */
/* --- Cinzas de texto --- */
--ink: #121826; /* texto principal no claro */
--ink-soft: #3A4152; /* texto secundário no claro */
--gray-500: #6B7688; /* muted no claro */
--gray-400: #A0AEC0; /* = gray */
--gray-300: #C6CEDA; /* muted no escuro */
/* --- Papéis semânticos (tema claro padrão) --- */
--bg: var(--paper);
--bg-elevated: var(--white);
--bg-inverse: var(--deep-blue);
--text: var(--ink);
--text-muted: var(--gray-500);
--accent: var(--amber-500);
--accent-ink: var(--deep-blue); /* texto sobre amarelo */
--border: var(--hairline);
/* --- Tipografia --- */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Escala tipográfica fluida (clamp: min | preferido | max) */
--fs-xs: 0.78rem;
--fs-sm: 0.9rem;
--fs-base: 1rem;
--fs-lg: clamp(1.1rem, 1rem + 0.5vw, 1.28rem);
--fs-xl: clamp(1.35rem, 1.15rem + 1vw, 1.7rem);
--fs-2xl: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);
--fs-3xl: clamp(2.2rem, 1.6rem + 3vw, 3.4rem);
--fs-4xl: clamp(2.8rem, 1.9rem + 4.4vw, 4.6rem);
--fs-5xl: clamp(3.4rem, 2rem + 6vw, 6rem);
--lh-tight: 1.08;
--lh-snug: 1.25;
--lh-normal: 1.6;
--tracking-tight: -0.02em;
--tracking-wide: 0.14em;
/* --- Espaçamento (escala --space-1..8) --- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
/* --- Largura e raios --- */
--maxw: 1200px;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 24px;
--radius-pill: 999px;
/* --- Sombras (camadas suaves + brilho do acento) --- */
--shadow-sm: 0 1px 2px rgba(18, 24, 38, 0.06), 0 2px 6px rgba(18, 24, 38, 0.05);
--shadow-md: 0 6px 18px rgba(18, 24, 38, 0.08), 0 2px 6px rgba(18, 24, 38, 0.06);
--shadow-lg: 0 24px 60px rgba(18, 24, 38, 0.16), 0 8px 20px rgba(18, 24, 38, 0.10);
--shadow-yellow: 0 10px 30px rgba(255, 199, 0, 0.35);
/* --- Transições --- */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--transition-fast: 160ms var(--ease);
--transition: 240ms var(--ease);
--transition-slow: 480ms var(--ease);
}
/* 3. RESET MÍNIMO ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, picture, svg, video {
max-width: 100%;
height: auto;
display: block;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible {
outline: 2px solid var(--amber-500);
outline-offset: 3px;
border-radius: 3px;
}
/* 4. BASE TIPOGRÁFICA ------------------------------------------------------ */
body {
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: 400;
line-height: var(--lh-normal);
color: var(--text);
background-color: var(--bg);
/* Textura sutil: gradiente radial frio no topo para dar atmosfera */
background-image:
radial-gradient(120% 60% at 100% 0%, rgba(255, 199, 0, 0.05), transparent 60%),
radial-gradient(90% 50% at 0% 0%, rgba(18, 24, 38, 0.04), transparent 55%);
background-attachment: fixed;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--text);
text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-weight: 600; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { max-width: 68ch; }
p + p { margin-top: var(--space-4); }
strong { font-weight: 600; }
/* Ênfase editorial: destaque em itálico da serifada */
.display-em {
font-style: italic;
color: var(--amber-600);
}
/* Texto de apoio maior no lead de seções/hero */
.lead {
font-size: var(--fs-lg);
line-height: var(--lh-normal);
color: var(--text-muted);
font-weight: 400;
}
::selection {
background: var(--amber-500);
color: var(--deep-blue);
}
/* 5. LAYOUT ---------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2rem);
/* Layout full-bleed: soma a faixa segura em telas com notch/cantos arredondados
(iPhone em paisagem) à margem já calculada acima. */
padding-left: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-left));
padding-right: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-right));
}
.section {
padding-block: clamp(3rem, 8vw, 6rem);
}
/* Âncoras internas (menu/CTAs com #id) não ficam escondidas atrás do header
fixo ao navegar via clique ou rolagem suave. */
[id] {
scroll-margin-top: 6rem;
}
/* --- Link de pular para o conteúdo (acessibilidade por teclado) ----------- */
.skip-link {
position: absolute;
top: -3rem;
left: var(--space-4);
z-index: 200;
padding: var(--space-3) var(--space-5);
background: var(--amber-500);
color: var(--deep-blue);
font-weight: 600;
font-size: var(--fs-sm);
border-radius: var(--radius-sm);
transition: top var(--transition-fast);
}
.skip-link:focus-visible {
top: var(--space-4);
}
/* Seção em fundo escuro (assinatura azul-profundo) */
.section--dark {
background: var(--deep-blue);
color: var(--off-white);
--text: var(--off-white);
--text-muted: var(--gray-300);
--border: var(--navy-600);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--off-white); }
/* Seção clara alternada */
.section--muted { background: var(--paper-2); }
/* 6. COMPONENTES ----------------------------------------------------------- */
/* --- Eyebrow: rótulo curto acima de títulos --- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--amber-600);
}
.eyebrow::before {
content: "";
width: 1.75rem;
height: 2px;
background: var(--amber-500);
display: inline-block;
}
.section--dark .eyebrow { color: var(--amber-400); }
/* --- Botões --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.85em 1.6em;
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: 600;
line-height: 1;
letter-spacing: 0.01em;
border: 1.5px solid transparent;
border-radius: var(--radius-pill);
cursor: pointer;
white-space: nowrap;
transition: transform var(--transition-fast),
box-shadow var(--transition),
background-color var(--transition),
color var(--transition),
border-color var(--transition);
}
.btn:active { transform: translateY(1px); }
/* Primário: amarelo sobre azul-profundo */
.btn--primary {
background: var(--amber-500);
color: #0a0a0a;
font-weight: 600;
box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
background: var(--amber-400);
box-shadow: var(--shadow-yellow);
transform: translateY(-2px);
}
/* Outline: contorno adaptável ao fundo */
.btn--outline {
background: transparent;
color: var(--text);
border-color: color-mix(in srgb, var(--text) 35%, transparent);
}
.btn--outline:hover {
border-color: var(--amber-500);
color: var(--amber-600);
transform: translateY(-2px);
}
.section--dark .btn--outline:hover { color: var(--amber-400); }
/* --- Cabeçalho --- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--deep-blue) 92%, transparent);
backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--navy-700);
color: var(--off-white);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
min-height: 4.5rem;
padding-block: var(--space-3);
}
.site-header__brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.site-header__brand img { height: 2rem; width: auto; }
/* Estado ao rolar: fundo mais sólido + sombra de separação */
.site-header.is-scrolled {
background: color-mix(in srgb, var(--deep-blue) 98%, transparent);
box-shadow: var(--shadow-md);
}
/* --- Navegação principal --- */
.site-nav {
display: flex;
align-items: center;
}
.nav__menu {
display: flex;
align-items: center;
gap: var(--space-6);
}
.nav__item:not(.nav__cta) > a {
display: inline-flex;
align-items: center;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--gray-300);
padding-block: var(--space-2);
transition: color var(--transition-fast);
}
.nav__item:not(.nav__cta) > a:hover { color: var(--off-white); }
/* --- Dropdown "Soluções" --- */
.nav__dropdown { position: relative; }
.nav__dropdown-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: none;
border: none;
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--gray-300);
padding-block: var(--space-2);
cursor: pointer;
transition: color var(--transition-fast);
}
.nav__dropdown-btn:hover { color: var(--off-white); }
.nav__dropdown-caret { transition: transform var(--transition-fast); }
.nav__dropdown-btn[aria-expanded="true"] .nav__dropdown-caret { transform: rotate(180deg); }
.nav__dropdown-menu {
position: absolute;
top: calc(100% + var(--space-3));
left: 0;
min-width: 12rem;
display: none;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-2);
background: var(--navy-800);
border: 1px solid var(--navy-600);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
z-index: 110;
}
.nav__dropdown-menu.is-open { display: flex; }
.nav__dropdown-menu a {
display: block;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
color: var(--gray-300);
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav__dropdown-menu a:hover {
background: var(--navy-700);
color: var(--off-white);
}
/* CTA embutido no menu */
.nav__cta .btn { padding: 0.6em 1.3em; font-size: var(--fs-sm); }
/* --- Hamburguer (mobile) --- */
.nav__hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 5px;
width: 2.5rem;
height: 2.5rem;
padding: 0;
background: none;
border: none;
cursor: pointer;
}
.nav__hamburger-bar {
display: block;
width: 100%;
height: 2px;
background: var(--off-white);
border-radius: var(--radius-pill);
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) { opacity: 0; }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* --- Menu mobile --- */
@media (max-width: 860px) {
.site-header__inner { position: relative; }
.nav__hamburger { display: flex; }
.site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
}
.nav__menu {
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--navy-900);
border-bottom: 1px solid var(--navy-700);
box-shadow: var(--shadow-lg);
}
.nav__menu.is-open { display: flex; }
.nav__item { width: 100%; }
.nav__item > a { width: 100%; padding: var(--space-4) var(--space-5); }
.nav__dropdown-btn {
width: 100%;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
}
.nav__dropdown-menu {
position: static;
min-width: 0;
box-shadow: none;
border: none;
border-radius: 0;
background: var(--navy-800);
padding: var(--space-2) var(--space-5);
}
.nav__cta { padding: var(--space-4) var(--space-5); }
.nav__cta .btn { width: 100%; }
}
/* --- Rodapé --- */
.site-footer {
background: var(--navy-950);
color: var(--gray-300);
padding-block: var(--space-8) var(--space-6);
border-top: 1px solid var(--navy-700);
}
.site-footer__brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--off-white);
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: 600;
}
.site-footer__brand img { height: 1.6rem; width: auto; }
.site-footer small { color: var(--gray-400); font-size: var(--fs-xs); }
/* --- Hero (shell de validação) --- */
.hero {
position: relative;
overflow: hidden;
}
.hero__inner {
display: grid;
gap: var(--space-5);
max-width: 52rem;
}
.hero h1 {
font-size: var(--fs-5xl);
font-weight: 600;
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-3);
}
/* 7. REVEAL SEGURO --------------------------------------------------------- */
/* Conteúdo VISÍVEL por padrão. Só é escondido quando o JS ativa animações
(html.js-anim) e o usuário NÃO pediu movimento reduzido. Garante que, se o
JS/GSAP falhar, nada some da tela. */
.reveal { opacity: 1; transform: none; }
html.js-anim .reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
html.js-anim .reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.js-anim .reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* =============================================================================
8. HOME (index.html) — Tarefa 5
-----------------------------------------------------------------------------
Página segmentadora carro-chefe. Editorial premium sobre azul-profundo, com
assinatura amarela precisa. Reaproveita tokens/componentes; nada de framework.
============================================================================ */
/* Números com largura fixa (contadores animados não "pulam") */
.tabular-nums { font-variant-numeric: tabular-nums; }
/* --- 8.1 HERO ------------------------------------------------------------- */
.home-hero {
position: relative;
isolation: isolate;
background: var(--deep-blue);
color: var(--off-white);
--text: var(--off-white);
--text-muted: var(--gray-300);
padding-top: clamp(1.75rem, 5vw, 3.25rem);
padding-bottom: clamp(4.5rem, 12vw, 9rem);
overflow: hidden;
}
/* Camada de atmosfera: orbs âmbar/azul + malha de pontos + grade fina */
.home-hero__bg {
position: absolute;
inset: -20% -10% -10%;
z-index: -2;
pointer-events: none;
background:
radial-gradient(38% 46% at 82% 8%, rgba(255, 199, 0, 0.20), transparent 60%),
radial-gradient(46% 50% at 8% 88%, rgba(46, 56, 80, 0.65), transparent 62%),
radial-gradient(30% 40% at 55% 40%, rgba(255, 199, 0, 0.06), transparent 60%);
will-change: transform;
}
.home-hero__grid {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(160, 174, 192, 0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(160, 174, 192, 0.06) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(90% 80% at 50% 30%, #000 40%, transparent 78%);
mask-image: radial-gradient(90% 80% at 50% 30%, #000 40%, transparent 78%);
}
.home-hero__inner {
position: relative;
display: grid;
gap: var(--space-5);
max-width: 56rem;
}
.home-hero h1 {
font-size: var(--fs-5xl);
font-weight: 600;
color: var(--off-white);
max-width: 20ch;
}
/* Variante para headline mais longa: distribui em linhas equilibradas */
.home-hero--wide h1 { max-width: 34ch; font-size: var(--fs-4xl); }
.home-hero .lead {
color: var(--gray-300);
max-width: 60ch;
}
.home-hero__cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-3);
}
/* Outline no hero escuro fica legível */
.home-hero .btn--outline { color: var(--off-white); border-color: rgba(247, 250, 252, 0.4); }
.home-hero .btn--outline:hover { color: var(--amber-400); border-color: var(--amber-500); }
/* Fio-âncora decorativo abaixo do hero */
.home-hero__scroll {
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-4);
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--gray-400);
}
.home-hero__scroll::before {
content: "";
width: 3rem; height: 1px;
background: linear-gradient(to right, var(--amber-500), transparent);
}
/* --- 8.2 FAIXA DE CONTADORES ---------------------------------------------- */
.stat-band {
background: var(--navy-950);
color: var(--off-white);
border-block: 1px solid var(--navy-700);
padding-block: clamp(2.5rem, 6vw, 4rem);
}
.stat-band__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.stat { position: relative; padding-inline: var(--space-2); }
.stat + .stat { border-left: 1px solid var(--navy-700); padding-left: var(--space-6); }
.stat__num {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-4xl);
line-height: 1;
color: var(--amber-500);
display: inline-flex;
align-items: baseline;
white-space: nowrap;
}
.stat__flag {
display: inline-block;
margin-left: var(--space-3);
padding: 0.2em 0.7em;
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--amber-400);
background: var(--amber-tint);
border: 1px solid rgba(255, 199, 0, 0.28);
border-radius: var(--radius-pill);
vertical-align: middle;
}
.stat__label {
margin-top: var(--space-3);
font-size: var(--fs-sm);
color: var(--gray-300);
max-width: none;
}
@media (max-width: 720px) {
.stat-band__grid { grid-template-columns: 1fr; gap: var(--space-5); }
.stat + .stat { border-left: none; border-top: 1px solid var(--navy-700); padding-left: var(--space-2); padding-top: var(--space-5); }
}
/* --- 8.3 SEGMENTADOR ------------------------------------------------------ */
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__head .lead { margin-top: var(--space-4); }
/* Segmentador: frase de apoio longa precisa de largura total para não quebrar cedo */
#solucoes .section__head { max-width: none; }
#solucoes .section__head .lead { max-width: none; }
/* Metodologia: distribui a frase longa em 2 linhas equilibradas em vez de 3 */
[aria-labelledby="foco-title"] .section__head { max-width: none; }
[aria-labelledby="foco-title"] .section__head .lead { max-width: none; text-wrap: balance; }
/* Foco Performance: leads de "Problemas" e "Método" usam a largura total */
[aria-labelledby="problemas-title"] .section__head,
#metodo .section__head { max-width: none; }
[aria-labelledby="problemas-title"] .section__head .lead,
#metodo .section__head .lead { max-width: none; }
/* Foco Commerce: leads das seções usam a largura total (menos quebras) */
[aria-labelledby="problema-title"] .section__head,
#como-funciona .section__head,
#servicos .section__head,
#jornada .section__head { max-width: none; }
[aria-labelledby="problema-title"] .section__head .lead,
#como-funciona .section__head .lead,
#servicos .section__head .lead,
#jornada .section__head .lead { max-width: none; }
/* Título do passo "Você acompanha o crescimento" cabe em uma linha */
.steps-grid--3 .step h3 { font-size: 1.05rem; }
.seg-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
@media (max-width: 820px) { .seg-grid { grid-template-columns: 1fr; } }
.seg-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: clamp(1.75rem, 4vw, 2.75rem);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.seg-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(to right, var(--amber-500), var(--amber-600));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-slow);
}
.seg-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: color-mix(in srgb, var(--amber-500) 45%, var(--border));
}
.seg-card:hover::before { transform: scaleX(1); }
.seg-card__kicker {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-muted);
}
.seg-card__icon {
width: 3.25rem; height: 3.25rem;
display: grid; place-items: center;
border-radius: var(--radius);
background: var(--amber-tint);
color: var(--amber-600);
border: 1px solid rgba(255, 199, 0, 0.28);
}
.seg-card__icon svg { width: 1.6rem; height: 1.6rem; }
.seg-card h3 { font-size: var(--fs-lg); }
.seg-card p { color: var(--text-muted); }
.seg-card__link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 600;
color: var(--text);
transition: gap var(--transition-fast), color var(--transition-fast);
}
.seg-card__link svg { width: 1.05rem; height: 1.05rem; transition: transform var(--transition-fast); }
.seg-card:hover .seg-card__link { color: var(--amber-600); }
.seg-card:hover .seg-card__link svg { transform: translateX(4px); }
/* --- 8.4 METODOLOGIA FOCO ------------------------------------------------- */
.foco-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-elevated);
}
.section--dark .foco-grid { background: var(--navy-800); border-color: var(--navy-600); }
.foco-pillar {
position: relative;
padding: clamp(1.5rem, 3vw, 2.25rem);
border-right: 1px solid var(--border);
}
.section--dark .foco-pillar { border-right-color: var(--navy-600); }
.foco-pillar:last-child { border-right: none; }
.foco-pillar__letter {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(3rem, 6vw, 4.75rem);
line-height: 0.9;
color: var(--amber-500);
letter-spacing: var(--tracking-tight);
}
.foco-pillar__index {
position: absolute;
top: clamp(1.5rem, 3vw, 2.25rem);
right: clamp(1.5rem, 3vw, 2.25rem);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--text-muted);
letter-spacing: var(--tracking-wide);
}
.foco-pillar h3 {
margin-top: var(--space-4);
font-size: var(--fs-lg);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.foco-pillar p {
margin-top: var(--space-3);
font-size: var(--fs-sm);
color: var(--text-muted);
}
@media (max-width: 900px) {
.foco-grid { grid-template-columns: repeat(2, 1fr); }
.foco-pillar:nth-child(2n) { border-right: none; }
.foco-pillar:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.section--dark .foco-pillar:nth-child(-n+2) { border-bottom-color: var(--navy-600); }
}
@media (max-width: 540px) {
.foco-grid { grid-template-columns: 1fr; }
.foco-pillar { border-right: none; border-bottom: 1px solid var(--border); }
.section--dark .foco-pillar { border-bottom-color: var(--navy-600); }
.foco-pillar:last-child { border-bottom: none; }
}
.foco-note {
margin-top: var(--space-5);
font-size: var(--fs-sm);
color: var(--text-muted);
max-width: none;
}
/* --- 8.5 SOBRE (resumo) --------------------------------------------------- */
.about-brief__grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: clamp(2rem, 6vw, 4.5rem);
align-items: center;
}
@media (max-width: 820px) { .about-brief__grid { grid-template-columns: 1fr; } }
.about-brief__media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 5;
}
.about-brief__media img { width: 100%; height: 100%; object-fit: cover; }
.about-brief__media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(to top, rgba(11, 15, 24, 0.55), transparent);
}
.about-brief__badge {
position: absolute;
left: var(--space-4);
bottom: var(--space-4);
z-index: 1;
padding: var(--space-2) var(--space-4);
background: var(--amber-500);
color: var(--deep-blue);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
border-radius: var(--radius-pill);
}
.about-brief__body h2 { margin-bottom: var(--space-4); }
.about-brief__body p + p { margin-top: var(--space-4); }
.about-brief__cred {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
margin-top: var(--space-5);
}
.about-brief__cred li {
font-size: var(--fs-xs);
font-weight: 500;
padding: 0.4em 0.9em;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
color: var(--text-muted);
}
.about-brief__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-5);
font-weight: 600;
color: var(--text);
border-bottom: 2px solid var(--amber-500);
padding-bottom: 2px;
transition: gap var(--transition-fast);
}
.about-brief__link:hover { gap: var(--space-3); }
/* --- 8.6 SEGMENTOS (preview) ---------------------------------------------- */
.segments-strip__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.segments-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.segments-list li {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font-weight: 500;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.segments-list li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--amber-500) 50%, var(--border)); }
.segments-list li::before {
content: "";
width: 0.5rem; height: 0.5rem;
border-radius: 50%;
background: var(--amber-500);
}
.segments-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.segments-link:hover { color: var(--amber-600); }
/* --- 8.7 CTA FINAL -------------------------------------------------------- */
.cta-final { position: relative; overflow: hidden; text-align: center; }
.cta-final__inner {
position: relative;
max-width: 56rem;
margin-inline: auto;
display: grid;
gap: var(--space-5);
justify-items: center;
}
.cta-final h2 { font-size: var(--fs-4xl); }
.cta-final .lead { color: var(--gray-300); }
.cta-final__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-2); }
.cta-final__glow {
position: absolute;
inset: auto 0 -60% 0;
height: 100%;
z-index: 0;
pointer-events: none;
background: radial-gradient(50% 60% at 50% 100%, rgba(255, 199, 0, 0.22), transparent 70%);
}
/* --- 8.8 RODAPÉ (completo) ------------------------------------------------ */
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1.2fr;
gap: var(--space-7);
padding-bottom: var(--space-7);
border-bottom: 1px solid var(--navy-700);
}
@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 540px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__about { max-width: 30ch; }
.site-footer__about p { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--gray-400); }
.site-footer__col h4 {
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--gray-400);
margin-bottom: var(--space-4);
}
.site-footer__nav { display: grid; gap: var(--space-3); }
.site-footer__nav a,
.site-footer__contact a { color: var(--gray-300); font-size: var(--fs-sm); transition: color var(--transition-fast); }
.site-footer__nav a:hover,
.site-footer__contact a:hover { color: var(--amber-400); }
.site-footer__contact { display: grid; gap: var(--space-3); font-size: var(--fs-sm); font-style: normal; }
.site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.site-footer__social a {
width: 2.4rem; height: 2.4rem;
display: grid; place-items: center;
border: 1px solid var(--navy-600);
border-radius: var(--radius-pill);
color: var(--gray-300);
transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.site-footer__social a:hover { color: var(--amber-400); border-color: var(--amber-500); transform: translateY(-2px); }
.site-footer__social svg { width: 1.15rem; height: 1.15rem; }
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
align-items: center;
justify-content: space-between;
padding-top: var(--space-5);
}
.site-footer__bottom small { color: var(--gray-400); font-size: var(--fs-xs); }
.site-footer__bottom a { color: var(--gray-400); font-size: var(--fs-xs); transition: color var(--transition-fast); }
.site-footer__bottom a:hover { color: var(--amber-400); }
/* =============================================================================
9. SOBRE NÓS (sobre.html) — Tarefa 6
-----------------------------------------------------------------------------
Página de autoridade: contadores + cabeçalho, foto+trajetória (reaproveita
.about-brief__* da home) e o bloco "O início do propósito" com timeline
vertical revelada progressivamente. CTA final reaproveita .cta-final.
============================================================================ */
/* --- 9.1 Cabeçalho da faixa de contadores --------------------------------- */
.stat-band__head {
max-width: 56rem;
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.stat-band .eyebrow { color: var(--amber-400); }
/* Título menor para caber "Autoridade que vem da prática," em uma linha antes do
*/
.stat-band__head h1 { color: var(--off-white); font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.2rem); }
.stat-band__head .lead { color: var(--gray-300); margin-top: var(--space-4); max-width: 46rem; }
/* --- 9.2 Propósito + timeline ---------------------------------------------- */
.purpose__intro {
max-width: none;
margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.purpose__intro p { max-width: none; }
.purpose__intro p + p { margin-top: var(--space-4); }
/* CTA da pagina Sobre: frase de apoio em uma linha */
[aria-labelledby="sobre-cta-title"] .cta-final__inner { max-width: 64rem; }
[aria-labelledby="sobre-cta-title"] .cta-final .lead { max-width: none; }
.timeline {
position: relative;
display: grid;
gap: clamp(1.75rem, 4vw, 2.75rem);
max-width: 62rem;
}
.timeline::before {
content: "";
position: absolute;
top: 0.4rem;
bottom: 0.4rem;
left: 0.34rem;
width: 2px;
background: var(--border);
}
.timeline__item {
position: relative;
padding-left: clamp(2.25rem, 5vw, 3rem);
}
.timeline__dot {
position: absolute;
top: 0.3rem;
left: 0;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: var(--amber-500);
box-shadow: 0 0 0 4px var(--amber-tint);
}
.timeline__date {
display: inline-block;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--amber-600);
margin-bottom: var(--space-2);
}
.timeline__content h3 { font-size: var(--fs-lg); }
.timeline__content p { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); max-width: none; }
/* =============================================================================
10. FOCO PERFORMANCE (consultoria.html) — Tarefa 7
-----------------------------------------------------------------------------
Página de solução (consultoria de gestão): hero reaproveita .home-hero,
cards de problema/passo reaproveitam o padrão de .seg-card/.foco-pillar,
e o bloco final soma o formulário → WhatsApp (data-wa-form).
============================================================================ */
/* --- 10.1 Problemas que resolvemos ----------------------------------------- */
.problem-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .problem-grid { grid-template-columns: 1fr; } }
.problem-card {
padding: var(--space-6);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.problem-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: var(--space-4);
border-radius: var(--radius-sm);
background: var(--amber-tint);
color: var(--amber-600);
}
.problem-card__icon svg { width: 1.5rem; height: 1.5rem; }
.problem-card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.problem-card p { font-size: var(--fs-sm); color: var(--text-muted); }
/* --- 10.2 Método (Falconi) -------------------------------------------------- */
.method-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
@media (max-width: 780px) { .method-grid { grid-template-columns: 1fr; } }
.method-card {
padding: var(--space-6);
background: color-mix(in srgb, var(--off-white) 6%, transparent);
border: 1px solid var(--navy-600);
border-radius: var(--radius-lg);
}
.method-card__index {
display: block;
font-family: var(--font-display);
font-size: var(--fs-2xl);
color: var(--amber-500);
margin-bottom: var(--space-3);
}
.method-card h3 { margin-bottom: var(--space-3); }
.method-card > p { color: var(--gray-300); font-size: var(--fs-sm); font-weight: 600; }
.method-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.method-list li {
position: relative;
padding-left: var(--space-6);
font-size: var(--fs-sm);
color: var(--text-muted);
}
.method-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
font-weight: 700;
color: var(--amber-500);
}
.contact-info .method-list li { color: var(--text-muted); }
.section--dark .foco-note { text-align: center; }
/* --- 10.3 Como funciona ------------------------------------------------------ */
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
}
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr; } }
.step {
padding: var(--space-6);
border-right: 1px solid var(--border);
}
.step:last-child { border-right: none; }
@media (max-width: 900px) {
.step:nth-child(2n) { border-right: none; }
.step:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px) {
.step { border-right: none !important; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
}
.step__index {
display: block;
font-family: var(--font-display);
font-size: var(--fs-2xl);
color: var(--amber-600);
margin-bottom: var(--space-2);
}
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.step p { font-size: var(--fs-sm); color: var(--text-muted); }
/* --- 10.4 Modelo comercial --------------------------------------------------- */
.model-band { position: relative; overflow: hidden; text-align: center; }
.model-card { max-width: 58rem; margin-inline: auto; }
/* Título do modelo comercial em uma linha */
.model-card h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
.model-card__badge {
display: inline-block;
margin-bottom: var(--space-4);
padding: 0.4em 1em;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--amber-400);
background: var(--amber-tint);
border: 1px solid rgba(255, 199, 0, 0.28);
border-radius: var(--radius-pill);
}
.model-card .lead { color: var(--gray-300); margin-block: var(--space-4) var(--space-6); }
/* --- 10.5 Contato / formulário → WhatsApp ------------------------------------ */
.contact-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info .lead { margin-top: var(--space-4); margin-bottom: var(--space-5); }
.contact-form {
display: grid;
gap: var(--space-5);
padding: clamp(1.5rem, 4vw, 2.5rem);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.form-field { display: grid; gap: var(--space-2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.form-consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; }
.form-consent input { width: 1.15em; height: 1.15em; margin-top: 0.15em; accent-color: var(--amber-500); flex-shrink: 0; cursor: pointer; }
/* Página de contato recebido (obrigado.html) */
.obrigado-check {
display: inline-flex; align-items: center; justify-content: center;
width: 3.5rem; height: 3.5rem; border-radius: 50%;
background: var(--amber-500); color: #0a0a0a; margin-bottom: var(--space-4);
}
.obrigado-check svg { width: 1.8rem; height: 1.8rem; }
.obrigado-links { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
/* =============================================================================
14. BANNER DE COOKIES (LGPD)
============================================================================ */
.cookie-banner {
position: fixed;
inset: auto 0 0 0;
z-index: 300;
background: var(--deep-blue);
color: var(--off-white);
border-top: 1px solid var(--navy-700);
padding: clamp(1rem, 3vw, 1.5rem);
padding-bottom: calc(clamp(1rem, 3vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-4);
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { margin: 0; max-width: 62ch; font-size: var(--fs-sm); color: var(--gray-300); }
.cookie-banner__text a { color: var(--amber-400); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: var(--space-3); flex-shrink: 0; }
.cookie-banner__actions .btn { padding: 0.6em 1.3em; }
.site-footer__bottom-links { display: inline-flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.site-footer__cookie { background: none; border: none; padding: 0; cursor: pointer; color: inherit; font: inherit; text-decoration: underline; }
.site-footer__cookie:hover { color: var(--amber-400); }
.form-field label {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--text);
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 0.75em 1em;
font-family: var(--font-body);
font-size: var(--fs-base);
color: var(--text);
background: var(--bg);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field textarea { resize: vertical; min-height: 6rem; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
outline: none;
border-color: var(--amber-500);
box-shadow: 0 0 0 3px var(--amber-tint);
}
.form-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7688' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; background-size: 0.7rem auto; padding-right: 2.5em; }
.form-submit { width: 100%; }
.form-note { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }
/* --- Utilitário: visualmente oculto, mas acessível a leitores de tela ------- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =============================================================================
11. FOCO COMMERCE (marketplaces.html) — Tarefa 8
-----------------------------------------------------------------------------
Página de solução (operação de marketplaces): reaproveita hero (.home-hero),
dores (.problem-grid) e passo a passo (.steps-grid) da Foco Performance;
soma serviços em 4 pilares, jornada B2B→B2C com imagens e faixa de
resultados. Contato reaproveita .contact-grid/.contact-form (data-solucao
"commerce").
============================================================================ */
/* --- 11.1 Como funciona: variante de 3 passos ------------------------------ */
.steps-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .steps-grid--3 { grid-template-columns: 1fr; } }
.section--dark .steps-grid { background: var(--navy-800); border-color: var(--navy-600); }
.section--dark .step { border-right-color: var(--navy-600); }
.section--dark .step__index { color: var(--amber-500); }
@media (max-width: 780px) { .section--dark .step { border-bottom-color: var(--navy-600); } }
/* --- 11.2 Serviços (4 pilares) --------------------------------------------- */
.service-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
padding: var(--space-6);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.service-card__num {
display: block;
font-family: var(--font-display);
font-size: var(--fs-2xl);
color: var(--amber-600);
margin-bottom: var(--space-3);
}
.service-card h3 { margin-bottom: var(--space-3); }
/* --- 11.3 Jornada B2B → B2C -------------------------------------------------- */
.journey-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
@media (max-width: 980px) { .journey-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .journey-grid { grid-template-columns: 1fr; } }
.journey-card { display: flex; flex-direction: column; }
.journey-card__num {
display: block;
font-family: var(--font-display);
font-size: var(--fs-xl);
color: var(--amber-600);
margin-bottom: var(--space-2);
}
/* Título menor (cabe em 2 linhas) + min-height reserva 2 linhas, alinhando as fotos entre os cards */
.journey-card h3 { font-size: 1.05rem; margin-bottom: var(--space-3); min-height: 2.5em; }
.journey-card__media {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-3);
transition: transform var(--transition), box-shadow var(--transition);
}
.journey-card:hover .journey-card__media { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.journey-card__media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
.journey-card__media { transition: none; }
.journey-card:hover .journey-card__media { transform: none; }
}
.journey-card p { font-size: var(--fs-sm); color: var(--text-muted); }
/* --- 11.4 Resultados --------------------------------------------------------- */
.results-band { position: relative; overflow: hidden; text-align: center; }
.results-band .eyebrow { display: inline-flex; }
.results-stat { margin-block: var(--space-6) var(--space-5); }
.results-stat__label { font-size: var(--fs-lg); color: var(--gray-300); }
.results-stat__number {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-5xl);
line-height: 1;
color: var(--amber-500);
}
.results-stat__unit { font-size: var(--fs-xl); color: var(--gray-300); margin-left: 0.2em; }
.results-stat__context { margin-top: var(--space-3); color: var(--gray-300); }
/* Rótulo e contexto ocupam a largura total para centralizar sob o número */
.results-stat__label, .results-stat__context { max-width: none; }
.results-partners__label { max-width: 34rem; margin-inline: auto; color: var(--gray-400); font-size: var(--fs-sm); }
.results-partners {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-5);
margin-top: var(--space-4);
}
.results-partners .partner {
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 600;
color: var(--off-white);
}
.results-partners .partner__sep {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--amber-500);
opacity: 0.6;
}
@media (max-width: 560px) { .results-partners .partner__sep { display: none; } }
.results-cta { margin-top: var(--space-6); }
/* =============================================================================
12. SEGMENTOS (segmentos.html) — Tarefa 9
-----------------------------------------------------------------------------
Reaproveita .seg-card (ícone + kicker + título + descrição + link) do
segmentador da home; aqui em grade de 5, 3 colunas com a última linha
incompleta — mesmo padrão de hover/profundidade do resto do site.
============================================================================ */
/* Intro da página de Segmentos em 2 linhas: largura total + fonte um pouco menor */
[aria-labelledby="segmentos-hero-title"] .section__head { max-width: none; }
[aria-labelledby="segmentos-hero-title"] .section__head .lead { max-width: none; font-size: 1rem; }
/* Reduz o espaço entre a intro e o grid "Os 5 segmentos" */
[aria-labelledby="segmentos-hero-title"] { padding-bottom: 0; }
[aria-labelledby="segmentos-grid-title"] { padding-top: clamp(2rem, 5vw, 3.25rem); }
/* Flexbox para centralizar a última linha (2 cards) sob os 3 de cima */
.seg-grid--wide { display: flex; flex-wrap: wrap; justify-content: center; }
.seg-grid--wide .seg-card { flex: 0 1 calc((100% - 2 * var(--space-5)) / 3); }
@media (max-width: 1000px) { .seg-grid--wide .seg-card { flex-basis: calc((100% - var(--space-5)) / 2); } }
@media (max-width: 620px) { .seg-grid--wide .seg-card { flex-basis: 100%; } }
/* =============================================================================
13. AÇÕES FLUTUANTES (WhatsApp + voltar ao topo) — todas as páginas
============================================================================ */
.floating-actions {
position: fixed;
right: clamp(1rem, 3vw, 1.75rem);
bottom: clamp(1rem, 3vw, 1.75rem);
bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
gap: var(--space-3);
z-index: 200;
}
.fab {
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
box-shadow: var(--shadow-md);
transition: transform var(--transition-fast),
box-shadow var(--transition),
opacity var(--transition),
background-color var(--transition);
}
.fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.fab--whatsapp { background: #25d366; color: #fff; }
.fab--whatsapp:hover { background: #1ebe5b; }
.fab--top {
background: var(--amber-500);
color: #0a0a0a;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px);
}
.fab--top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.fab { transition: none; }
.fab:hover { transform: none; }
}