/*
Components — Allges
Reprodução fiel dos componentes do design system (Figma) + componentes de página.
*/
/* =========================================================
Botão
========================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
height: var(--control-height-md);
padding-inline: var(--space-lg);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--ls-label);
white-space: nowrap;
transition: background-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
position: relative;
}
.btn-lg {
height: var(--control-height-lg);
padding-inline: var(--space-xl);
}
/* Um degrau acima do Large (extensão de 2026-09-09, design.md §6.1): usado só
no CTA de vidro abaixo da órbita de integrações, que o cliente pediu maior
que os demais botões da página. */
.btn-xl {
height: var(--control-height-xl);
padding-inline: var(--space-2xl);
font-size: var(--fs-body);
}
.btn:active {
transform: scale(0.98);
}
.btn[disabled],
.btn.is-disabled {
cursor: not-allowed;
pointer-events: none;
}
/* Focus ring: nó externo com respiro, nunca colado na pílula */
.btn::after {
content: "";
position: absolute;
inset: -5px;
border-radius: inherit;
border: var(--control-focus-ring) solid transparent;
pointer-events: none;
transition: border-color var(--dur-base) var(--ease-out);
}
.btn:focus-visible {
outline: none;
}
.btn-light {
background: var(--color-bg-surface);
color: var(--color-text-brand-strong);
box-shadow: var(--shadow-soft);
}
.btn-light:hover {
background: var(--color-bg-canvas);
}
.btn-light:focus-visible::after {
border-color: var(--color-border-focus);
}
.btn-light.is-disabled {
background: var(--color-bg-disabled);
color: var(--color-text-disabled);
box-shadow: none;
}
.btn-accent {
background: var(--color-bg-accent);
color: var(--color-text-on-accent);
}
.btn-accent:hover {
background: var(--color-bg-accent-hover);
}
.btn-accent:focus-visible::after {
border-color: var(--color-border-inverse);
}
.btn-accent.is-disabled {
background: var(--color-bg-disabled-inverse);
color: var(--color-text-disabled-inverse);
}
/* Azul com texto branco (2026-10-16, decisão do cliente; design.md §6.1).
Era roxo #2A0081 com texto lima. Lima sobre azul reprovaria (~2,6:1), por
isso o texto passou a branco: 5,2:1. O hover escurece para o roxo profundo
(cor sólida, nunca opacidade), branco sobre #2A0081 = 14,84:1. */
.btn-dark {
background: var(--color-bg-info);
color: var(--color-text-on-inverse);
box-shadow: var(--shadow-soft);
}
.btn-dark:hover {
background: var(--color-bg-inverse);
}
.btn-dark:focus-visible::after {
border-color: var(--color-border-focus-inverse);
}
.btn-dark.is-disabled {
background: var(--color-bg-disabled-inverse);
color: var(--color-text-disabled-inverse);
box-shadow: none;
}
/*
Material de vidro "líquido" (2026-09-09, refeito).
Reconstruído a partir da ESTRUTURA do componente de referência do cliente
(o CSS dele nunca veio junto, só o JSX). Três coisas que a estrutura entrega
e que a primeira tentativa tinha ignorado:
1. A sombra é um ELEMENTO À PARTE (`glass-button-shadow`, irmão do botão),
não um box-shadow. Isso permite borrá-la e deslocá-la sozinha, sem
arrastar o recorte do vidro junto — é o que faz o botão parecer
apoiado sobre a superfície em vez de colado nela.
2. O botão usa `isolate`, criando contexto próprio de empilhamento.
3. O texto usa `tracking-tighter`.
E o erro visual da primeira tentativa: vidro de verdade é MUITO mais
transparente do que eu tinha feito (eu usei branco a 70%, que lê como pílula
sólida). O brilho não está no miolo — está concentrado na BORDA, em anéis
internos de 1px que simulam a luz entortando na quina do vidro. É isso que
distingue vidro de "fundo translúcido".
*/
.glassbtn {
position: relative;
display: inline-flex;
border-radius: var(--radius-full);
isolation: isolate;
}
/* A sombra separada, borrada e empurrada para baixo do botão */
.glassbtn__shadow {
position: absolute;
inset: 8px 8px -4px;
z-index: -1;
border-radius: inherit;
filter: blur(12px);
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
pointer-events: none;
}
.glassbtn:hover .glassbtn__shadow {
transform: translateY(1px) scale(1.01);
}
.btn-glass,
.btn-glass-light,
.btn-glass-brand {
overflow: hidden;
isolation: isolate;
letter-spacing: -0.03em;
backdrop-filter: blur(14px) saturate(190%);
-webkit-backdrop-filter: blur(14px) saturate(190%);
border: 0;
}
/* Degradê interno: claro no topo, transparente na metade de baixo */
.btn-glass::before,
.btn-glass-light::before,
.btn-glass-brand::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.14),
rgba(255, 255, 255, 0) 58%
);
pointer-events: none;
}
/* Reflexo que atravessa no hover — a parte "líquida" */
.btn-glass::after,
.btn-glass-light::after,
.btn-glass-brand::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(
100deg,
transparent 34%,
rgba(255, 255, 255, 0.16) 50%,
transparent 66%
);
transform: translateX(-130%);
transition: transform 0.7s var(--ease-out);
pointer-events: none;
}
.btn-glass:hover::after,
.btn-glass-light:hover::after,
.btn-glass-brand:hover::after {
transform: translateX(130%);
}
@media (prefers-reduced-motion: reduce) {
.btn-glass::after,
.btn-glass-light::after,
.btn-glass-brand::after {
transition: none;
}
}
/*
---- Glass sobre superfície escura (hero) — design.md §6.1 ----
Os quatro anéis internos são, na ordem: o contorno do vidro, a luz batendo
na quina de cima-esquerda, o retorno mais fraco na quina de baixo-direita,
e um halo suave por dentro.
*/
.btn-glass {
background: rgba(255, 255, 255, 0.12);
color: var(--color-text-on-inverse);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 0 16px 2px rgba(255, 255, 255, 0.05);
}
.btn-glass:hover {
background: rgba(255, 255, 255, 0.16);
}
.btn-glass:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-border-focus-glass),
inset 0 1px 1px rgba(255, 255, 255, 0.55);
}
.btn-glass.is-disabled {
background: var(--color-bg-glass-disabled);
color: var(--color-text-muted-inverse);
}
.glassbtn--dark .glassbtn__shadow {
background: rgba(0, 0, 0, 0.55);
opacity: 0.5;
}
/*
---- Glass sobre superfície clara — extensão aprovada em 2026-09-09 ----
O design.md §8 restringe vidro a fundos escuros porque o contraste do texto
branco não pode ser garantido sobre um fundo qualquer. Aqui o texto é o roxo
escuro (#2A0081) sobre a seção branca: o contraste é 14.8:1, medido, e é
previsível — o risco que aquela regra mira não existe nesta variante.
O halo roxo atrás (.orbit-cta::before) não é decoração: sem nada atrás, um
vidro transparente sobre branco não teria o que refratar e sumiria.
*/
.btn-glass-light {
background: rgba(255, 255, 255, 0.26);
color: var(--color-text-brand-strong);
font-weight: 600;
/*
Sobre fundo claro, vidro quase não tem contorno: o que aparece é um fio
de luz na quina de cima e um retorno bem fraco embaixo. Um anel branco
fechando o botão inteiro lê como borda desenhada, não como vidro.
*/
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85),
inset 0 0 0 1px rgba(42, 0, 129, 0.11),
inset 0 -1px 1px rgba(42, 0, 129, 0.05);
}
.btn-glass-light:hover {
background: rgba(255, 255, 255, 0.38);
}
.btn-glass-light:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-border-focus),
inset 0 1px 1px rgba(255, 255, 255, 0.85);
}
/*
Sombra bem difusa e fraca: sobre branco, vidro espalha luz em vez de
bloquear. Uma sombra roxa densa aqui lia como um botão sólido flutuando.
*/
.glassbtn--light .glassbtn__shadow {
background: rgba(42, 0, 129, 0.3);
opacity: 0.16;
filter: blur(18px);
}
/*
---- Glass de marca (o mesmo material do hero, sobre superfície clara) ----
O vidro do hero lê roxo porque o hero é roxo. Para repetir aquele acabamento
numa seção branca, o roxo passa a ser do próprio botão: o material continua
translúcido (o halo atrás atravessa), mas o que se vê por baixo é a cor da
marca, não a página.
Vantagem sobre a variante clara: o par branco sobre #2A0081 já é um dos
contrastes aprovados no design.md §8 (14.84:1), então este caminho não
depende da exceção que a variante clara precisou abrir.
*/
.btn-glass-brand {
/* Azul em cima, roxo profundo embaixo (2026-10-16, botões no tom azul). */
background: linear-gradient(
180deg,
rgba(39, 77, 234, 0.9),
rgba(42, 0, 129, 0.92)
);
color: var(--color-text-on-inverse);
font-weight: 600;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 0 0 1px rgba(255, 255, 255, 0.16),
inset 0 0 18px 2px rgba(255, 255, 255, 0.05);
}
.btn-glass-brand:hover {
background: linear-gradient(
180deg,
rgba(52, 88, 238, 0.92),
rgba(46, 2, 138, 0.93)
);
}
.btn-glass-brand:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-border-focus-inverse),
inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.glassbtn--brand .glassbtn__shadow {
background: rgba(42, 0, 129, 0.55);
opacity: 0.3;
filter: blur(16px);
}
@supports not (backdrop-filter: blur(1px)) {
.btn-glass {
background: rgba(42, 0, 129, 0.55);
}
}
/* =========================================================
Chip
========================================================= */
.chip-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-lg);
justify-content: center;
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
}
.chip svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-icon-brand);
}
[data-surface="inverse"] .chip,
[data-surface="canvas-dark"] .chip {
color: var(--color-text-muted-inverse);
}
[data-surface="inverse"] .chip svg,
[data-surface="canvas-dark"] .chip svg {
color: var(--color-text-accent);
}
/* =========================================================
Navegação
========================================================= */
.site-nav {
position: fixed;
top: var(--space-lg);
left: 50%;
transform: translateX(-50%);
z-index: 90;
width: min(calc(100% - 32px), 960px);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
height: 64px;
padding-inline: var(--space-lg);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 30px -12px rgba(42, 0, 129, 0.18);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
/* Some ao rolar para baixo (ui.js, initNav). Sobe para fora da tela pelo
transform, mantendo o translateX(-50%) da centralização. */
.site-nav {
transition: transform 0.45s var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.site-nav.is-hidden {
transform: translate(-50%, calc(-100% - var(--space-lg) - 8px));
}
@media (prefers-reduced-motion: reduce) {
.site-nav { transition: none; }
}
/* Com o menu escondido, o cabeçalho grudado da tabela de planos sobe. */
.pl-table thead th {
transition: top 0.45s var(--ease-out);
}
.nav-hidden .pl-table thead th {
top: 0;
}
.site-nav.is-scrolled {
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 12px 34px -14px rgba(42, 0, 129, 0.28);
}
.site-nav__brand {
display: flex;
align-items: center;
height: 28px;
}
.site-nav__brand img {
height: 100%;
width: auto;
}
/* Itens do menu com uma pílula que desliza entre eles (2026-10-19, no lugar
do sublinhado, que o cliente achou manjado). A pílula é um elemento só
(.site-nav__pill), criado por ui.js, que repousa no item da página atual,
vai até o item sob o mouse ou o foco e volta quando o mouse sai.
Sem JS: a página atual e o hover ganham a pílula no próprio item. */
.site-nav__links {
position: relative;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.site-nav__link {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--space-md);
border-radius: var(--radius-full);
font-size: var(--fs-body-sm);
font-weight: 500;
color: var(--color-text-primary);
transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
background-color: var(--color-bg-info-soft);
color: var(--color-text-brand-strong);
}
.site-nav__link:focus-visible {
outline: var(--control-focus-ring) solid var(--color-border-focus);
outline-offset: 2px;
}
/* Com a pílula ativa, o fundo sai dos itens e fica só nela. */
.has-pill .site-nav__link:hover,
.has-pill .site-nav__link[aria-current="page"] {
background-color: transparent;
}
/* A cor de destaque acompanha a pílula: o item da página atual volta ao
preto enquanto a pílula está em outro item. */
.has-pill .site-nav__link[aria-current="page"]:not(.is-under) {
color: var(--color-text-primary);
}
.has-pill .site-nav__link.is-under {
color: var(--color-text-brand-strong);
}
.site-nav__pill {
position: absolute;
top: 50%;
left: 0;
height: 44px;
width: var(--pill-w, 0);
border-radius: var(--radius-full);
background: var(--color-bg-info-soft);
box-shadow: inset 0 0 0 1px var(--color-bg-info-soft);
transform: translate(var(--pill-x, 0), -50%);
opacity: var(--pill-o, 0);
pointer-events: none;
transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out),
opacity var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.site-nav__pill {
transition: opacity var(--dur-base) var(--ease-out);
}
}
.site-nav__actions {
display: flex;
align-items: center;
gap: var(--space-md);
}
.site-nav__enter {
font-size: var(--fs-body-sm);
font-weight: 500;
color: var(--color-text-brand-strong);
}
.site-nav__toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
}
.site-nav__toggle svg {
width: 22px;
height: 22px;
}
.site-nav__mobile {
position: fixed;
inset: 0;
z-index: 95;
background: var(--color-bg-surface);
display: none;
flex-direction: column;
padding: calc(64px + var(--space-xl)) var(--container-pad) var(--space-xl);
gap: var(--space-xl);
}
.site-nav__mobile.is-open {
display: flex;
}
.site-nav__mobile a {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 700;
}
.site-nav__mobile-close {
position: fixed;
top: var(--space-lg);
right: calc(var(--container-pad));
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--color-bg-canvas);
z-index: 96;
}
@media (max-width: 860px) {
.site-nav__links {
display: none;
}
.site-nav__toggle {
display: flex;
}
.site-nav__actions .btn {
display: none;
}
}
/* =========================================================
Mockup window (moldura de navegador para screenshots)
========================================================= */
.mock-window {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-bg-canvas-dark);
box-shadow: var(--shadow-soft-lg);
}
.mock-window__bar {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-md) var(--space-lg);
background: #232323;
}
.mock-window__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #4a4a4a;
}
.mock-window__bar .mock-window__dot:nth-child(1) { background: #e0605a; }
.mock-window__bar .mock-window__dot:nth-child(2) { background: #e0b95a; }
.mock-window__bar .mock-window__dot:nth-child(3) { background: #6fbf6f; }
.mock-window img {
width: 100%;
height: auto;
}
/* =========================================================
Card
========================================================= */
.card {
border-radius: var(--radius-lg);
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.card-light {
background: var(--color-bg-canvas);
border: 1px solid var(--color-border-brand);
}
.card-dark {
background: var(--color-bg-inverse);
color: var(--color-text-on-inverse);
}
/* =========================================================
Problema — duas colunas com cartões de número (2026-09-08)
========================================================= */
/* Proporção medida no Figma: coluna de texto 693px, cartões 557px, gap 52px,
num container de 1302px. */
.problem-grid {
display: grid;
grid-template-columns: 1.244fr 1fr;
gap: 52px;
align-items: center;
}
/* Teto menor que o display-2 padrão (56px): em 56px o título quebrava em 3
linhas dentro desta coluna. Em 48px fecha em 2, sem precisar de
. */
.problem-grid__text h2 {
font-size: clamp(1.75rem, 3.2vw, 3rem);
margin-bottom: var(--space-lg);
}
.problem-grid__text p {
color: var(--color-text-muted);
margin-bottom: var(--space-xl);
}
.problem-grid__photo {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.problem-grid__stats {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.stat-card {
border-radius: var(--radius-xl);
padding: var(--space-lg) var(--space-xl);
display: flex;
align-items: baseline;
gap: var(--space-md);
flex-wrap: wrap;
}
.stat-card strong {
font-family: var(--font-display);
font-weight: 700;
line-height: 1;
flex-shrink: 0;
}
.stat-card span {
font-size: var(--fs-body-sm);
}
/*
Desktop e notebook: descrição em UMA linha. Com ela quebrando em duas, a
altura dos três cartões ficava desigual e o espaçamento entre eles parecia
torto. Abaixo de 1024px volta a quebrar normalmente.
*/
@media (min-width: 1024px) {
.stat-card {
flex-wrap: nowrap;
}
.stat-card span {
white-space: nowrap;
}
}
.stat-card--brand {
background: var(--color-bg-info); /* 2026-10-16: sai do roxo cheio */
color: var(--color-text-on-inverse);
}
.stat-card--brand strong { font-size: 2.875rem; }
.stat-card--brand span { color: var(--color-text-muted-inverse); }
.stat-card--accent {
background: var(--color-bg-accent);
color: var(--color-text-on-accent);
}
.stat-card--accent strong { font-size: 3.125rem; }
.stat-card--canvas {
background: var(--color-bg-canvas);
color: var(--color-text-primary);
}
.stat-card--canvas strong { font-size: 3.75rem; color: var(--color-text-brand-strong); }
.stat-card--canvas span { color: var(--color-text-muted); }
@media (max-width: 860px) {
.problem-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
Split panel (Bifurcação Saúde / Serviços)
Redesenho de 2026-09-08: painéis viram dois cartões separados
(raio 2xl), com foto sangrando no canto inferior direito e um
CTA circular no lugar do botão de texto.
========================================================= */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.split__panel {
position: relative;
overflow: hidden;
border-radius: var(--radius-2xl);
min-height: 640px;
}
/* Painel Saúde em azul cheio (2026-10-16): o azul é a cor própria da vertente
Saúde no rebalanceamento do design.md §2.2. O nome --light ficou do tempo em
que o painel era claro; a classe é mantida para não mexer no JS/HTML. */
.split__panel--light {
background: var(--color-bg-info);
color: var(--color-text-on-inverse);
}
.split__panel--light .text-muted {
color: var(--color-text-muted-inverse);
}
.split__panel--dark {
background: var(--color-bg-inverse);
color: var(--color-text-on-inverse);
}
/*
O card inteiro é o link (2026-09-09) — antes só o círculo com a seta era
clicável. Sem transition aqui: o GSAP faz o scrub desses painéis, e uma
transition em CSS na mesma propriedade briga com ele e deixa o movimento
arrastado.
*/
.split__panel-inner {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
gap: var(--space-lg);
padding: var(--space-3xl);
}
.split[data-state="idle"] .split__panel--light {
transform: translateX(32px);
opacity: 0;
}
.split[data-state="idle"] .split__panel--dark {
transform: translateX(-32px);
opacity: 0;
}
.split[data-state="revealed"] .split__panel {
transform: translateX(0);
opacity: 1;
}
/* Foto sangrando no canto inferior direito do painel. A de Serviços sai do
Figma com o próprio fundo do painel por trás (mesma cor, sem alpha); a de
Saúde passou a ter fundo transparente em 2026-10-16, quando o painel virou
azul e o cinza embutido no arquivo antigo aparecia como um retângulo. */
.split__photo {
position: absolute;
right: 0;
bottom: 0;
width: 46%;
height: auto;
max-height: 84%;
object-fit: cover;
object-position: top center;
z-index: 0;
pointer-events: none;
}
.split__panel-content {
display: flex;
align-items: center;
gap: var(--space-md);
}
.split__panel-content h3 {
margin: 0;
}
.split__eyebrow-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
}
.split__panel--light .split__eyebrow-icon {
background: var(--color-bg-surface);
color: var(--color-bg-info);
}
.split__panel--dark .split__eyebrow-icon {
background: var(--color-bg-accent);
color: var(--color-text-on-accent);
}
.split__list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-width: 60%;
}
.split__list li {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--fs-body-sm);
}
.split__list svg {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
}
.split__panel--light .split__list svg { color: var(--color-icon-on-inverse); }
.split__panel--dark .split__list svg { color: var(--color-text-accent); }
/*
Seta circular: só o afordance visual do link (2026-09-09). O card inteiro
é que é clicável — .split__panel-inner é o , com o nome acessível no
próprio aria-label dele. A seta virou , decorativa; ela
reage ao hover/foco do card, não ao próprio (não é mais um link em si).
*/
.split__cta {
margin-top: auto;
width: 52px;
height: 52px;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out);
}
.split__cta svg {
width: 20px;
height: 20px;
}
.split__panel-inner:hover .split__cta,
.split__panel-inner:focus-visible .split__cta {
transform: translate(2px, -2px);
}
.split__cta--light {
background: var(--white);
color: var(--color-text-brand-strong);
box-shadow: var(--shadow-soft);
}
.split__panel-inner:hover .split__cta--light,
.split__panel-inner:focus-visible .split__cta--light {
background: var(--color-bg-canvas);
}
.split__cta--dark {
background: rgba(255, 255, 255, 0.14);
color: var(--color-text-on-inverse);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.split__panel-inner:hover .split__cta--dark,
.split__panel-inner:focus-visible .split__cta--dark {
background: rgba(255, 255, 255, 0.22);
}
/*
Bolha "Saiba mais" que acompanha o cursor sobre o painel (2026-09-09).
Progressão só para mouse: ui.js (initSplitHint) só liga em pointer fino e
fora de reduced-motion, e só ele mexe no transform (a translação vem de lá).
A propriedade `scale` é independente do transform de propósito — assim o
"pop" de entrada não briga com a posição escrita pelo JS.
Não esconde o cursor nativo (design.md §7.3). Fica clipada pelo
overflow:hidden do painel. pointer-events:none: nunca bloqueia o link.
Contrastes conferidos (design.md §8): branco sobre #2A0081 = 14.84:1;
#2A0081 sobre #B6DB00 = 9.27:1.
*/
.split__hint {
position: absolute;
top: 0;
left: 0;
z-index: 4;
display: grid;
place-items: center;
width: 116px;
height: 116px;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--ls-label);
text-align: center;
pointer-events: none;
opacity: 0;
transform: translate(0, 0);
scale: 0.55;
transition: opacity var(--dur-base) var(--ease-out),
scale var(--dur-base) var(--ease-out);
will-change: transform;
}
.split__panel--light .split__hint {
background: var(--color-bg-inverse);
color: var(--color-text-on-inverse);
box-shadow: var(--shadow-soft);
}
.split__panel--dark .split__hint {
background: var(--color-bg-accent);
color: var(--color-text-on-accent);
}
.split__panel.is-hint-active .split__hint {
opacity: 1;
scale: 1;
}
@media (pointer: coarse) {
.split__hint {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.split__hint {
display: none;
}
}
@media (max-width: 860px) {
.split {
grid-template-columns: 1fr;
}
/* Flex column: a foto entra como último item, encostada na base do card
(mesma leitura do desktop, onde ela fica absoluta no canto inferior). */
.split__panel {
min-height: auto;
display: flex;
flex-direction: column;
}
.split__panel-inner {
order: 1;
padding: var(--space-3xl) var(--space-lg);
}
.split__list {
max-width: 100%;
}
/* Estática, no fluxo, com a altura natural — a imagem aparece inteira,
sem recorte, alinhada à direita e ao fundo do card. */
.split__photo {
position: static;
order: 2;
align-self: flex-end;
width: 62%;
height: auto;
max-height: none;
object-fit: contain;
object-position: bottom center;
}
.split[data-state="idle"] .split__panel--light,
.split[data-state="idle"] .split__panel--dark {
transform: translateY(24px);
}
}
/* =========================================================
Módulos
========================================================= */
.module-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--color-border-subtle);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
}
.module {
background: var(--color-bg-surface);
padding: var(--space-xl) var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-md);
transition: background var(--dur-base) var(--ease-out);
}
.module:hover {
background: var(--color-bg-canvas);
}
.module svg {
width: 26px;
height: 26px;
color: var(--color-icon-brand);
}
.module h3 {
font-size: var(--fs-body);
font-weight: 600;
}
.module p {
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
}
@media (max-width: 1024px) {
.module-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.module-grid { grid-template-columns: 1fr; }
}
.module-grid--dark {
background: var(--color-border-subtle-inverse);
border-color: var(--color-border-subtle-inverse);
}
.module-grid--dark .module {
background: var(--color-bg-inverse);
color: var(--color-text-on-inverse);
}
.module-grid--dark .module:hover {
background: var(--color-bg-brand-hover);
}
.module-grid--dark .module svg {
color: var(--color-text-accent);
}
.module-grid--dark .module p {
color: var(--color-text-muted-inverse);
}
/* =========================================================
Abas (seção IA)
========================================================= */
.tabs {
display: grid;
/* Proporção medida no Figma: lista de abas 581px, print 661px, num total
de 1302px — mais larga que o antigo 320px fixo. */
grid-template-columns: 0.88fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.tabs__list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.tabs__tab {
text-align: left;
padding: var(--space-lg);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: var(--space-xs);
transition: background var(--dur-base) var(--ease-out);
}
/* Aba ativa em lima cheio (2026-09-08). Antes era roxo — sobre o fundo
canvas-dark da seção, o lima lê mais como "estado ligado" que o roxo,
que já é a cor do próprio fundo da marca em outros lugares. */
.tabs__tab[aria-selected="true"] {
background: var(--color-bg-accent);
color: var(--color-text-on-accent);
}
.tabs__tab:not([aria-selected="true"]):hover {
background: rgba(255, 255, 255, 0.06);
}
.tabs__tab strong {
font-size: var(--fs-body);
font-weight: 600;
}
.tabs__tab span {
font-size: var(--fs-body-sm);
}
.tabs__tab[aria-selected="true"] span {
color: var(--color-text-on-accent);
opacity: 0.75;
}
.tabs__tab:not([aria-selected="true"]) span {
color: var(--color-text-muted-inverse);
}
.tabs__panels {
position: relative;
}
.tabs__panel {
display: none;
animation: tabIn var(--dur-base) var(--ease-out);
}
.tabs__panel[data-active="true"] {
display: block;
}
@keyframes tabIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 860px) {
.tabs {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
}
/* =========================================================
Carrossel (extensões, depoimentos)
========================================================= */
.carousel {
position: relative;
}
/*
overflow-x:auto força overflow-y a computar como auto também (regra do
próprio CSS: um eixo "scrollável" não deixa o outro em "visible"). Com só
4px de padding-block, a sombra dos cards — que precisa de ~24px pra
renderizar inteira, incluindo o estado de hover — ficava cortada pela
própria pista. 28px dá espaço de sobra pros dois estados.
*/
/*
Sem scroll-snap (removido em 2026-09-09): o alinhamento por card fazia o
navegador "descansar" num ponto de encaixe que nem sempre coincidia com o
fim real do conteúdo — o carrossel parava um pouco antes do último card
ficar rente à borda, sobrando uma lacuna que não devia existir. Sem snap,
tanto o gesto de arrastar quanto os botões (que já usam scrollBy) sempre
alcançam o scrollLeft máximo de verdade, com o último card encostado.
*/
/*
Sangria à direita (2026-09-08, medido no Figma do cliente): a pista começa
alinhada ao título, na borda do container, e termina na borda da JANELA, não
na borda do container. Sem isto sobravam ~110px de fundo vazio entre o último
card cortado e o fim da seção — a "lacuna" que o cliente apontou. No Figma as
duas fileiras (seções 7 e 9) têm recuo esquerdo idêntico ao do título e recuo
direito negativo, ou seja, os cards correm para fora da tela.
A margem negativa só vai na PISTA, não no .carousel: assim os botões de
navegação continuam alinhados ao container, como no design.
50% resolve contra o container (a caixa que contém a pista) e 50vw contra a
janela. Como 50vw conta a barra de rolagem vertical e 50% não, a conta passa
da área visível por meia largura de barra — medido: 7,5px. --sbw traz essa
largura (ui.js mede uma vez e no resize) e a metade dela devolve o alinhamento
exato. Sem JS, o var() cai para 0px e sobra aquele overshoot de 7,5px, que a
própria seção recorta (overflow-x: clip em base.css) — ou seja, degrada para
"um tico além da borda", nunca para uma lacuna.
*/
.carousel__track {
display: flex;
gap: var(--space-lg);
overflow-x: auto;
padding-block: 28px;
margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2);
scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar {
display: none;
}
.carousel__item {
flex: 0 0 auto;
}
.carousel__nav {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
margin-top: var(--space-lg);
}
.carousel__btn {
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: var(--color-bg-canvas);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--dur-fast) var(--ease-out);
}
.carousel__btn:hover {
background: var(--gray-100);
filter: brightness(0.96);
}
.carousel__btn svg {
width: 20px;
height: 20px;
}
.carousel__btn[disabled] {
opacity: 0.35;
pointer-events: none;
}
/* Card de extensão */
/* Imagem inteira (2026-10-16): o cliente aceitou ficar com 3 cards visíveis em
troca de não cortar mais as capturas. A proporção da mídia é a da captura
mais alta (800×521); as mais baixas ganham uma faixa da cor do card. */
.ext-card {
width: 440px;
max-width: 82vw;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--card-surface-light);
border: 1px solid var(--color-border-subtle);
box-shadow: var(--card-inset-light), 0 2px 10px -6px rgba(42, 0, 129, 0.2);
transition: border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.ext-card:hover {
border-color: var(--color-border-brand);
box-shadow: var(--card-inset-light), var(--shadow-soft);
}
.ext-card__media {
aspect-ratio: 800 / 521;
overflow: hidden;
background: var(--color-bg-surface);
}
.ext-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ext-card__body {
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.ext-card__price {
color: var(--color-text-brand-strong);
font-weight: 600;
}
/* Card de depoimento */
.quote-card {
width: 400px;
border-radius: var(--radius-lg);
background: var(--card-surface-light);
border: 1px solid var(--color-border-subtle);
box-shadow: var(--card-inset-light), 0 2px 10px -6px rgba(42, 0, 129, 0.2);
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-lg);
transition: border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.quote-card:hover {
border-color: var(--color-border-brand);
box-shadow: var(--card-inset-light), var(--shadow-soft);
}
/* aspas de abertura como marca gráfica, não como enfeite solto */
.quote-card::after {
content: "\201C";
position: absolute;
top: -18px;
right: 18px;
font-family: var(--font-display);
font-size: 7rem;
line-height: 1;
color: var(--color-border-brand);
opacity: 0.16;
pointer-events: none;
}
.quote-card p {
font-size: var(--fs-body-lg);
line-height: var(--lh-heading);
}
.quote-card__author {
display: flex;
align-items: center;
gap: var(--space-md);
}
.quote-card__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-bg-brand);
color: var(--color-text-on-inverse);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.quote-card__avatar--photo {
background: none;
overflow: hidden;
}
.quote-card__avatar--photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.quote-card__author strong {
display: block;
font-size: var(--fs-body-sm);
}
.quote-card__author span {
display: block;
font-size: var(--fs-caption);
color: var(--color-text-muted);
}
/* =========================================================
Sistema orbital (integrações)
As ferramentas soltas giram em torno do símbolo da Allges. Passar o mouse
num app pausa a órbita inteira e revela o nome dele.
Como a volta funciona, e por que existem quatro camadas por app:
.orbit__slot gira em torno do centro do palco (é a órbita)
.orbit__arm empurra o app até o raio do anel
.orbit__counter gira ao contrário, na MESMA duração, para o ícone chegar
do outro lado da volta ainda em pé
.orbit__app o quadrinho visível, com o transform livre
Os keyframes leem `--a0` (o ângulo inicial daquele app) em vez de usar
animation-delay negativo. É isso que faz o ângulo continuar valendo quando a
animação está desligada — em ?static=1 ou em prefers-reduced-motion os apps
ficam distribuídos pelos anéis, parados, em vez de empilhados no ângulo 0.
O hover usa a propriedade `scale` (independente), não `transform`: o
transform de .orbit__app pertence ao GSAP na animação de entrada, e as duas
coisas se multiplicam sem uma apagar a outra.
========================================================= */
.orbit {
--stage: clamp(300px, 62vw, 640px);
--tile: clamp(40px, 4.6vw, 58px);
--r1: calc(var(--stage) * 0.22);
--r2: calc(var(--stage) * 0.31);
--r3: calc(var(--stage) * 0.4);
--orbit-dur-1: 38s;
--orbit-dur-2: 52s;
--orbit-dur-3: 66s;
position: relative;
width: var(--stage);
height: var(--stage);
/* Respiro curto: o próprio palco já tem ar sobrando nos cantos, então uma
margem grande aqui lia como buraco entre o texto e a animação. */
margin: var(--space-lg) auto 0;
}
.orbit-cta {
position: relative;
display: flex;
justify-content: center;
margin-top: var(--space-lg);
}
/*
Halo de marca atrás do CTA. Não é enfeite: um vidro transparente sobre o
branco da seção não teria nada para refratar e leria como um contorno vazio.
É o mesmo papel da textura pontilhada que a demo do componente usa por trás
dos botões.
*/
.orbit-cta::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 420px;
height: 160px;
transform: translate(-50%, -50%);
border-radius: var(--radius-full);
background: radial-gradient(
ellipse,
rgba(162, 97, 254, 0.2),
rgba(162, 97, 254, 0) 72%
);
filter: blur(18px);
pointer-events: none;
}
/* Brilho de marca por trás do núcleo */
.orbit__glow {
position: absolute;
inset: 0;
margin: auto;
width: calc(var(--stage) * 0.72);
height: calc(var(--stage) * 0.72);
border-radius: var(--radius-full);
background: radial-gradient(
circle,
rgba(162, 97, 254, 0.2),
rgba(162, 97, 254, 0) 68%
);
filter: blur(16px);
pointer-events: none;
}
/* Anéis: centrados por inset+margin (não por transform), porque o transform
deles pertence ao GSAP na entrada. */
.orbit__ring {
position: absolute;
inset: 0;
margin: auto;
border-radius: var(--radius-full);
border: 1px solid var(--color-border-subtle);
pointer-events: none;
}
.orbit__ring--1 {
width: calc(var(--r1) * 2);
height: calc(var(--r1) * 2);
}
.orbit__ring--2 {
width: calc(var(--r2) * 2);
height: calc(var(--r2) * 2);
}
.orbit__ring--3 {
width: calc(var(--r3) * 2);
height: calc(var(--r3) * 2);
border-style: dashed;
}
.orbit__core {
position: absolute;
inset: 0;
margin: auto;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: clamp(76px, 15vw, 112px);
height: clamp(76px, 15vw, 112px);
border-radius: var(--radius-full);
background: var(--highlight-gradient-d);
box-shadow: var(--shadow-soft-lg);
}
.orbit__core img {
width: 46%;
height: auto;
}
.orbit__apps {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
list-style: none;
}
.orbit__slot {
--a0: calc(360deg * var(--i) / var(--n) + var(--off, 0deg));
position: absolute;
inset: 0;
z-index: 1;
transform: rotate(var(--a0));
animation: orbit-spin var(--orbit-dur) linear infinite;
}
@keyframes orbit-spin {
from { transform: rotate(var(--a0)); }
to { transform: rotate(calc(var(--a0) + 360deg)); }
}
.orbit__slot--1 { --n: 2; --r: var(--r1); --orbit-dur: var(--orbit-dur-1); }
.orbit__slot--2 { --n: 2; --r: var(--r2); --orbit-dur: var(--orbit-dur-2); --off: 60deg; }
.orbit__slot--3 { --n: 2; --r: var(--r3); --orbit-dur: var(--orbit-dur-3); --off: 120deg; }
/* O anel do meio gira ao contrário, para os três não lerem como um bloco só */
.orbit__slot--2,
.orbit__slot--2 .orbit__counter {
animation-direction: reverse;
}
.orbit__arm {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateX(var(--r));
}
.orbit__counter {
display: block;
transform: rotate(calc(var(--a0) * -1));
animation: orbit-counter var(--orbit-dur) linear infinite;
}
@keyframes orbit-counter {
from { transform: rotate(calc(var(--a0) * -1)); }
to { transform: rotate(calc(var(--a0) * -1 - 360deg)); }
}
/*
Sem moldura (2026-09-09, pedido do cliente): os arquivos que ele forneceu já
são marcas fechadas, com forma e cor próprias. O quadrinho branco em volta
competia com elas e deixava tudo com cara de grade de app store. Agora o
ícone é o elemento, e a profundidade vem de uma sombra projetada que segue o
contorno real do desenho — não de uma caixa.
*/
.orbit__app {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: var(--tile);
height: var(--tile);
filter: drop-shadow(0 6px 12px rgba(42, 0, 129, 0.16));
transition: filter var(--dur-base) var(--ease-out),
scale var(--dur-base) var(--ease-out);
}
.orbit__app img {
width: 100%;
height: 100%;
object-fit: contain;
}
.orbit__app:hover {
scale: 1.18;
filter: drop-shadow(0 12px 22px rgba(42, 0, 129, 0.3));
}
/* O app sob o cursor sobe acima dos outros anéis. Precisa ser no slot: cada
slot tem transform, e transform cria contexto de empilhamento — um z-index
no próprio app não escaparia do slot dele. */
.orbit__slot:has(.orbit__app:hover) {
z-index: 4;
}
.orbit__name {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
padding: 2px 10px;
border-radius: var(--radius-full);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
box-shadow: var(--shadow-soft);
font-size: var(--fs-caption);
font-weight: 500;
color: var(--color-text-primary);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out),
scale var(--dur-base) var(--ease-out);
}
/* Desfaz o aumento do quadrinho, para o rótulo não crescer junto */
.orbit__app:hover .orbit__name {
opacity: 1;
scale: 0.78;
}
/* Passar o mouse num app pausa a órbita inteira, para dar tempo de ler */
.orbit:has(.orbit__app:hover) .orbit__slot,
.orbit:has(.orbit__app:hover) .orbit__counter {
animation-play-state: paused;
}
/* Antes da entrada (o GSAP troca para "revealed" ao fim da animação): a órbita
fica parada, mas NUNCA escondida — quem controla opacidade aqui é só a
timeline do GSAP. */
.orbit[data-state="idle"] .orbit__slot,
.orbit[data-state="idle"] .orbit__counter {
animation-play-state: paused;
}
/* Captura estática e reduced-motion: sem animação, com os apps parados nos
ângulos certos (é o que o --a0 nos keyframes garante). */
[data-static="true"] .orbit__slot,
[data-static="true"] .orbit__counter {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.orbit__slot,
.orbit__counter {
animation: none;
}
}
/* =========================================================
Planos
========================================================= */
.plan-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
align-items: stretch;
}
.plan-card {
position: relative;
border-radius: var(--radius-lg);
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-lg);
background: var(--color-bg-canvas);
border: 1px solid var(--color-border-subtle);
}
/*
O plano recomendado NÃO recebe fundo colorido: recolorir o card do meio
é o clichê de página de preço vetado em specs/design.md §9.2. A distinção
é feita por borda + selo, mantendo o mesmo tratamento visual dos demais.
*/
.plan-card[data-featured="true"] {
border: 2px solid var(--color-border-brand);
}
.plan-card__badge {
position: absolute;
top: -13px;
left: var(--space-xl);
background: var(--color-bg-inverse);
color: var(--color-text-accent);
font-size: var(--fs-caption);
font-weight: 600;
padding: 4px var(--space-md);
border-radius: var(--radius-full);
}
.plan-card__name {
font-size: var(--fs-body-lg);
font-weight: 700;
}
.plan-card__desc {
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
}
.plan-card__price {
display: flex;
align-items: baseline;
gap: var(--space-xs);
}
/* Preço em Inter Tight (2026-10-16, pedido do cliente): cifrão e números mais
simples que os da Playfair. */
.plan-card__price strong {
font-family: var(--font-body);
font-size: 2.5rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.plan-card__price span {
font-size: var(--fs-body-sm);
}
.plan-card__features {
display: flex;
flex-direction: column;
gap: var(--space-sm);
flex: 1;
}
.plan-card__features li {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--fs-body-sm);
}
.plan-card__features svg {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
color: var(--color-icon-brand);
}
@media (max-width: 900px) {
.plan-grid {
grid-template-columns: 1fr;
}
}
/* Resumo de planos da Home: o Pro fica maior que os outros dois
(specs/design.md §6.5, exceção de 2026-09-08). Só aqui — a tabela
completa em planos.html mantém os três cards do mesmo tamanho. */
.plan-grid--home {
grid-template-columns: 1fr 1.14fr 1fr;
}
.plan-grid--home .plan-card[data-featured="true"] {
padding: calc(var(--space-xl) + var(--space-md));
}
@media (max-width: 900px) {
.plan-grid--home {
grid-template-columns: 1fr;
}
}
/* Toggle mensal / preço destacado nas extensões */
.ext-price-row {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
background: var(--color-bg-canvas);
}
.ext-price-row img {
width: 56px;
height: 40px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.ext-price-row__name {
font-weight: 600;
flex: 1;
}
.ext-price-row__price {
font-weight: 700;
color: var(--color-text-brand-strong);
white-space: nowrap;
}
/* =========================================================
Tabela de comparação
========================================================= */
.compare-scroll {
overflow-x: auto;
}
.compare-table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
}
.compare-table caption {
text-align: left;
padding-block: var(--space-md);
font-weight: 700;
font-size: var(--fs-body);
}
.compare-table th,
.compare-table td {
text-align: left;
padding: var(--space-md) var(--space-lg);
font-size: var(--fs-body-sm);
border-bottom: 1px solid var(--color-border-subtle);
}
.compare-table thead th {
font-weight: 600;
color: var(--color-text-muted);
border-bottom: 2px solid var(--gray-950);
}
.compare-table td[data-value="yes"],
.compare-table th[data-value="yes"] {
text-align: center;
}
.compare-table td[data-value="yes"] svg {
width: 18px;
height: 18px;
color: var(--color-bg-info);
margin-inline: auto;
}
.compare-table td[data-value="no"] {
text-align: center;
color: var(--color-text-disabled);
}
.compare-table td:first-child,
.compare-table th:first-child {
position: sticky;
left: 0;
background: var(--color-bg-surface);
}
.compare-table col.is-recommended,
.compare-table th.is-recommended,
.compare-table td.is-recommended {
background: var(--color-bg-canvas);
}
/* =========================================================
FAQ / Acordeão
========================================================= */
.faq {
display: flex;
flex-direction: column;
border-top: 1px solid var(--color-border-subtle);
}
.faq__item {
border-bottom: 1px solid var(--color-border-subtle);
}
.faq__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
padding-block: var(--space-lg);
text-align: left;
font-size: var(--fs-body-lg);
font-weight: 600;
}
.faq__icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--color-icon-brand);
transition: transform var(--dur-slow) var(--ease-out);
}
.faq__trigger[aria-expanded="true"] .faq__icon {
transform: rotate(45deg);
}
.faq__panel {
height: 0;
overflow: hidden;
transition: height var(--dur-slow) var(--ease-out);
}
.faq__panel p {
padding-bottom: var(--space-lg);
color: var(--color-text-muted);
max-width: 62ch;
}
/* =========================================================
Stat inline
========================================================= */
.stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.stat {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.stat strong {
font-family: var(--font-display);
font-size: var(--fs-display-2);
font-weight: 700;
color: var(--color-text-brand-strong);
}
.stat span {
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
}
[data-surface="inverse"] .stat strong,
[data-surface="canvas-dark"] .stat strong {
color: var(--color-text-accent);
}
[data-surface="inverse"] .stat span,
[data-surface="canvas-dark"] .stat span {
color: var(--color-text-muted-inverse);
}
@media (max-width: 700px) {
.stat-row { grid-template-columns: 1fr; }
}
/* =========================================================
Logo row (prova social)
========================================================= */
.logo-row {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3xl);
flex-wrap: wrap;
opacity: 0.85;
}
.logo-row img {
height: 28px;
width: auto;
}
/* =========================================================
Footer
========================================================= */
.site-footer {
background: var(--color-bg-canvas-dark);
color: var(--color-text-on-inverse);
padding-block: var(--space-4xl) var(--space-xl);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--space-xl);
padding-bottom: var(--space-3xl);
border-bottom: 1px solid var(--color-border-subtle-inverse);
}
.footer-col h4,
.footer-col__title {
font-size: var(--fs-caption);
color: var(--color-text-muted-inverse);
margin-bottom: var(--space-md);
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer-col a {
font-size: var(--fs-body-sm);
color: var(--color-text-on-inverse);
transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover {
color: var(--color-text-accent);
}
.footer-brand p {
font-size: var(--fs-body-sm);
color: var(--color-text-muted-inverse);
max-width: 32ch;
margin-top: var(--space-md);
}
.footer-legal {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-md);
padding-top: var(--space-xl);
font-size: var(--fs-caption);
color: var(--color-text-muted-inverse);
}
.footer-wordmark {
width: 100%;
overflow: hidden;
line-height: 0.8;
margin-top: var(--space-xl);
}
.footer-wordmark img {
width: 100%;
height: auto;
opacity: 0.9;
}
@media (max-width: 860px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Mobile: colunas lado a lado e tudo centralizado (pedido do cliente
2026-09-09) em vez de uma coluna empilhada à esquerda.
Linha 1: marca (largura total). Linha 2: Produto | Institucional.
Linha 3: Redes sociais (largura total, centralizada). */
@media (max-width: 520px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-xl) var(--space-lg);
text-align: center;
justify-items: center;
}
.footer-brand,
.footer-grid > .footer-col:last-child {
grid-column: 1 / -1;
}
.footer-brand p {
margin-inline: auto;
}
.footer-col ul {
align-items: center;
}
.footer-legal {
justify-content: center;
text-align: center;
}
}
/* =========================================================
Hero
========================================================= */
.hero {
position: relative;
padding-block: calc(64px + var(--space-3xl)) var(--space-4xl);
overflow: hidden;
}
/*
Pré-esconde só o que a timeline de heroIntro() (motion.js) vai revelar —
gatilhado pela classe que o script inline no aplica antes da
primeira pintura (ver index.html). Sem isso, o hero nascia visível (era o
próprio estado de degradação) e só ficava invisível quando o GSAP
finalmente rodava, alguns quadros depois: o usuário via o hero completo,
ele sumia de repente, e só então a animação começava. 2026-09-09.
headline (.word) não entra aqui: as palavras nem existem até splitWords()
rodar dentro de heroIntro(), então escondemos o elemento inteiro por fora.
*/
.js-hero-anim .hero__badge,
.js-hero-anim .hero__sub,
.js-hero-anim .hero__cta,
.js-hero-anim .hero__mock,
.js-hero-anim .hero [data-typewriter] {
opacity: 0;
}
/* Canvas do kinetic grid: pinta o próprio gradiente de fundo */
.hero__canvas {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
background: var(--highlight-gradient-d); /* estado antes do canvas pintar */
}
.hero__content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
text-align: center;
max-width: 1180px;
margin-inline: auto;
}
.hero__badge {
justify-self: center;
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 6px var(--space-md);
border-radius: var(--radius-full);
font-size: var(--fs-caption);
font-weight: 500;
color: var(--color-text-on-inverse);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Um pouco mais de respiro em relação à nav flutuante acima (2026-09-08). */
margin-top: var(--space-md);
}
.hero__badge b {
color: var(--color-text-accent);
font-weight: 600;
}
/* Prova social do hero (substitui o selo "30 dias grátis" em 2026-09-08;
a barra de provas logo abaixo continua trazendo essa informação).
Sem pílula: flutua direto sobre o fundo do hero, sem fundo nem borda —
corrigido em 2026-09-08 depois de herdar o container de .hero__badge. */
.hero__proof {
gap: var(--space-md);
padding: 0;
text-align: left;
background: none;
border: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.hero__proof-avatars {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.hero__proof-avatars img,
.hero__proof-count {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--color-bg-inverse);
object-fit: cover;
margin-left: -10px;
}
.hero__proof-avatars img:first-child {
margin-left: 0;
}
.hero__proof-count {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-accent);
color: var(--color-text-on-accent);
font-size: 10px;
font-weight: 700;
}
.hero__proof-text {
font-size: var(--fs-caption);
font-weight: 500;
color: var(--color-text-on-inverse);
max-width: 30ch;
}
/* palavras da headline (divididas por motion.js) */
.hero__content .word {
display: inline-block;
will-change: transform, opacity;
}
/*
Quebra de linha do h1 controlada: duas linhas em desktop e notebook.
Em tablet e celular o
some e o título quebra naturalmente.
*/
.br-desk {
display: none;
}
@media (min-width: 861px) {
.br-desk {
display: inline;
}
}
.hero__sub {
max-width: 68ch;
margin-inline: auto;
}
.hero__cta {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
/* Sem transition aqui: o GSAP controla o transform com scrub e uma
transition em CSS brigaria com ele, deixando a paralaxe arrastada.
z-index acima do véu e do conteúdo, para o print ficar na frente. */
.hero__mock {
position: relative;
z-index: 3;
margin-top: var(--space-4xl);
max-width: 1240px;
margin-inline: auto;
will-change: transform;
}
/* Mockup fotográfico único (2026-09-08): a moldura de notebook já vem
pronta do Figma com o print composto dentro, então não precisa mais da
moldura de navegador em CSS (.mock-window), só do próprio arquivo. */
/*
Painel 3D do hero (2026-09-09) — adaptado da referência que o cliente enviou
(o "container scroll animation"): a peça chega inclinada para trás e se
endireita conforme a rolagem.
Divisão de responsabilidade entre as camadas:
.hero__stage guarda SÓ a perspectiva. Precisa ser um elemento separado
porque `perspective` age sobre os FILHOS — se estivesse no
próprio elemento girado, não haveria profundidade nenhuma.
.hero__device é quem o GSAP inclina. Nada mais escreve no transform dele.
.hero__screen recorta a imagem dentro da moldura.
O CSS deixa a peça DEITADA (sem rotação), que é o estado final. Quem aplica a
inclinação de partida é o GSAP — assim, em ?static=1, reduced-motion ou sem
JS, o painel aparece reto em vez de preso torto.
*/
.hero__stage {
perspective: 1000px;
}
.hero__device {
border-radius: var(--radius-lg);
/* Moldura do aparelho: preto da marca + o fio de 1px em branco 10% que o
design.md §6.2 define para borda de card em superfície escura. */
background: var(--color-bg-canvas-dark);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px;
box-shadow: var(--shadow-soft-lg);
will-change: transform;
}
.hero__screen {
border-radius: calc(var(--radius-lg) - 8px);
overflow: hidden;
background: var(--color-bg-canvas-dark);
}
.hero__screen img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.hero__device {
padding: 6px;
}
}
@media (max-width: 860px) {
.hero__mock {
margin-top: var(--space-2xl);
}
}
@media (max-width: 640px) {
/* Hero centralizado também no mobile (pedido do cliente 2026-09-09):
badge/prova, headline, subtítulo e CTAs alinhados ao meio. */
.hero__content { text-align: center; }
.hero__cta { justify-content: center; }
.hero__proof { text-align: center; }
}
/* =========================================================
Título de seção
========================================================= */
.section-head {
max-width: 860px;
margin-bottom: var(--space-2xl);
}
.section-head.center {
margin-inline: auto;
text-align: center;
}
.section-head p {
margin-top: var(--space-md);
color: var(--color-text-muted);
}
/* O subtítulo tem max-width de 68ch (base.css). Num cabeçalho centralizado,
sem margem automática essa caixa fica ancorada à esquerda e o texto
centralizado dela cai à esquerda do centro do título. */
.section-head.center p {
margin-inline: auto;
}
[data-surface="inverse"] .section-head p,
[data-surface="canvas-dark"] .section-head p {
color: var(--color-text-muted-inverse);
}
/* Eyebrow — exceção aprovada em 2026-09-08 (design.md §9.3). Conteúdo em
sentence case, caixa alta só por CSS: leitor de tela não soletra sigla. */
.section-eyebrow {
display: block;
font-family: var(--font-body);
font-size: var(--fs-caption);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-brand-strong);
margin-bottom: var(--space-sm);
}
[data-surface="canvas-dark"] .section-eyebrow,
[data-surface="inverse"] .section-eyebrow {
color: var(--color-text-accent);
}
.section-eyebrow-logo {
display: block;
height: 20px;
width: auto;
margin: 0 auto var(--space-lg);
opacity: 0.92;
}
/* Marca d'água decorativa atrás do título — símbolo em baixíssima opacidade,
nunca atrás de texto corrido (specs/design.md §2.3). */
.section-watermark {
position: absolute;
width: 260px;
height: auto;
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
.section-watermark--top-right {
/*
160px, não -32px (2026-09-09, pedido do cliente): negativo fazia a marca
d'água nascer ACIMA do próprio box da seção — sobrepondo a seção anterior
— e ainda cravava por cima do separador SVG do topo (~120-150px de altura,
variável com a largura da viewport). 160px garante folga do separador em
qualquer largura e desce a marca para a área do título, que é onde ela
funciona como fundo decorativo.
*/
top: 160px;
right: 0;
}
/*
Marca d'água dos planos: no Figma é o símbolo a 3% com um círculo da cor da
seção por cima, deslocado para baixo. O que sobra visível são só as pontas
superiores do símbolo saindo por trás do círculo — não o símbolo inteiro.
*/
.plan-watermark {
position: absolute;
top: 59px;
left: 50%;
width: 609px;
height: 750px;
margin-left: -305px;
pointer-events: none;
z-index: 0;
}
.plan-watermark img {
position: absolute;
top: 0;
left: 0;
width: 609px;
height: 609px;
opacity: 0.03;
}
.plan-watermark__cover {
position: absolute;
top: 150px;
left: 50%;
width: 600px;
height: 600px;
margin-left: -300px;
border-radius: 50%;
background: var(--color-bg-canvas);
}
@media (max-width: 860px) {
.plan-watermark {
display: none;
}
}
/* =========================================================
Separador de seção — asset literal do cliente (2026-09-08)
Substitui a costura em CSS que eu tinha inventado. Só existe nas duas
bordas da seção de IA (a única seção escura da página), que é onde o
cliente colocou os separadores de verdade no Figma: bottom.svg no fim
de Módulos, top.svg no início de Extensões. Nenhum outro par de seções
recebe separador.
========================================================= */
/*
A peça é da cor da seção VIZINHA colorida (escura na 6, cinza na 10) e fica
encostada na linha de troca, avançando só para dentro da seção clara. Ela
não cavalga a fronteira: se cavalgasse, o recorte deixaria passar um pedaço
do branco da seção de cima para dentro da escura — foi exatamente esse o
defeito da rodada anterior.
Quem cria o respiro é o padding da seção, não a peça: por isso a seção que
hospeda o separador tem padding suficiente para caber a peça inteira mais
o espaço livre antes dela.
*/
.section-separator {
position: absolute;
left: 0;
width: 100%;
height: auto;
pointer-events: none;
z-index: 0;
}
/*
-2px, não 0: width:100%/height:auto dá uma altura fracionária (ex.: largura
1907px × 120/1536 = 149,06px). O navegador não pinta esse resto de pixel de
forma confiável, e sobrava uma linha clara de 1px exatamente na linha de
troca — visível como um "gap" entre o separador e a seção vizinha. A cor
da peça já é igual à da seção que ela invade, então sangrar 2px a mais não
aparece — só fecha a costura.
*/
.section-separator--bottom {
bottom: -2px;
}
.section-separator--top {
top: -2px;
}
/* Todo conteúdo real fica acima das decorações (separador, brilho, marca
d'água), sem depender de ordem de pintura implícita. */
.section > .container {
position: relative;
z-index: 1;
}
/* Fundo customizado da seção de extensões — valor literal do cliente,
fora da escala de superfícies (nem branco puro, nem o cinza padrão). */
.section--ext-bg {
background: #f3f3f3;
}
/* =========================================================
Espaçamento por seção da Home (2026-09-08)
Valores medidos direto no frame do Figma — cada seção tem um respiro
próprio, não o --space-4xl uniforme.
========================================================= */
.page-home #conteudo > section:nth-of-type(3) { padding-block: 123px 202px; } /* problema */
.page-home #conteudo > section:nth-of-type(4) { padding-block: 127px 109px; } /* bifurcação */
/*
Módulos e Extensões (2026-09-09): perderam a reserva de espaço para
separador — as peças saíram daqui e passaram a viver dentro da própria
seção de IA (ver comentário no HTML, seção 6). Voltam ao respiro padrão.
*/
.page-home #conteudo > section:nth-of-type(5) { padding-block: 96px 64px; } /* módulos */
/*
IA (2026-09-09): agora é ELA quem reserva espaço para as duas peças —
122px de altura em cima, ~80px embaixo (proporção das novas artes), mais o
respiro de leitura para o conteúdo não colar nelas.
*/
.page-home #conteudo > section:nth-of-type(6) { padding-block: 280px 240px; } /* IA */
.page-home #conteudo > section:nth-of-type(7) { padding-block: 96px 96px; } /* extensões */
.page-home #conteudo > section:nth-of-type(8) { padding-block: 183px; } /* integrações */
.page-home #conteudo > section:nth-of-type(9) { padding-block: 160px 210px; } /* depoimentos */
.page-home #conteudo > section:nth-of-type(10) { padding-block: 162px 163px; } /* planos */
.page-home #conteudo > section:nth-of-type(11) { padding-block: 191px 190px; } /* faq */
/*
Depoimentos: as setas do carrossel colidiam com o separador de seção que
começa logo depois. A peça reserva ~120px de altura (proporção 1536:120), e
os 96px de padding-bottom acima — já reduzidos de propósito na rodada de
2026-09-09 para fechar uma lacuna vazia — não sobravam o bastante. Só as
setas ganham a margem extra, para não reabrir aquela lacuna (2026-09-08).
*/
.page-home #conteudo > section:nth-of-type(9) .carousel__nav {
margin-bottom: 40px;
}
@media (max-width: 768px) {
.page-home #conteudo > section:nth-of-type(3),
.page-home #conteudo > section:nth-of-type(4),
.page-home #conteudo > section:nth-of-type(8),
.page-home #conteudo > section:nth-of-type(9),
.page-home #conteudo > section:nth-of-type(10),
.page-home #conteudo > section:nth-of-type(11) {
padding-block: var(--space-3xl);
}
/* No mobile a peça encolhe junto com a largura (é 1536:altura), então o
padding reservado para ela também encolhe. A reserva mudou de seção 5/7
para seção 6 em 2026-09-09 (ver o CSS acima). */
.page-home #conteudo > section:nth-of-type(6) { padding-block: 100px 90px; }
.page-home #conteudo > section:nth-of-type(11) { padding-block: 110px var(--space-3xl); }
}
/* =========================================================
Brilhos ambiente da seção de IA (2026-09-08)
Três círculos grandes, borrados e translúcidos, replicando os glows do
Figma atrás do conteúdo. A quarta bolha do Figma tinha opacidade 0 e foi
omitida.
========================================================= */
.ia-glow {
position: absolute;
width: 390px;
height: 390px;
border-radius: 50%;
filter: blur(115px);
pointer-events: none;
z-index: 0;
}
.ia-glow--blue-br {
right: -80px;
bottom: 60px;
background: #274dea;
opacity: 0.08;
}
.ia-glow--purple-tr {
right: -60px;
top: 30px;
background: #a261fe;
opacity: 0.24;
}
.ia-glow--lime-tl {
left: -100px;
top: 10px;
background: #b6db00;
opacity: 0.06;
}
/* =========================================================
CTA final
========================================================= */
.cta-final {
border-radius: var(--radius-lg);
padding: var(--space-4xl) var(--space-lg);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-lg);
background: var(--highlight-gradient-d);
color: var(--color-text-on-inverse);
}
.cta-final p {
color: var(--text-muted-inverse, rgba(255, 255, 255, 0.8));
max-width: 46ch;
}
/* =========================================================
Página interna (Saúde / Serviços / Planos)
========================================================= */
.page-hero {
padding-block: calc(64px + var(--space-2xl)) var(--space-3xl);
}
.page-hero__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
@media (max-width: 900px) {
.page-hero__grid {
grid-template-columns: 1fr;
}
}
.pill-badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
font-size: var(--fs-caption);
font-weight: 600;
background: rgba(39, 77, 234, 0.1);
color: var(--color-bg-info);
width: fit-content;
}
[data-surface="inverse"] .pill-badge {
background: rgba(182, 219, 0, 0.14);
color: var(--color-text-accent);
}
/* =========================================================
Reveal genérico (usado por motion.js)
========================================================= */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* Contagem numérica */
[data-count-to] {
font-variant-numeric: tabular-nums;
}
/* =========================================================
Cursor da marca (2026-10-20). Ver initBrandCursor em ui.js.
O símbolo da Allges, com contorno roxo para ler no claro e no escuro.
========================================================= */
@media (pointer: fine) {
html.has-bc,
html.has-bc * {
cursor: none !important;
}
html.has-bc input,
html.has-bc textarea,
html.has-bc [contenteditable="true"] {
cursor: text !important;
}
/* Onde é clicável, volta a mãozinha nativa (pedido do cliente,
2026-10-20) e o cursor da marca some. */
html.has-bc a,
html.has-bc a *,
html.has-bc button,
html.has-bc button *,
html.has-bc [role="tab"],
html.has-bc [role="tab"] *,
html.has-bc summary,
html.has-bc label,
html.has-bc select,
html.has-bc [data-cursor] {
cursor: pointer !important;
}
}
.bc {
position: fixed;
inset: 0;
z-index: 1000;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.bc.is-on {
opacity: 1;
}
.bc.is-on.is-text,
.bc.is-on.is-click {
opacity: 0;
}
/* O contorno roxo (drop-shadow) mantém o símbolo branco legível também
sobre as seções claras. */
.bc-sym {
position: absolute;
top: -11px;
left: -11px;
width: 22px;
height: 22px;
filter: drop-shadow(0 0 1px rgba(42, 0, 129, 0.9)) drop-shadow(0 2px 6px rgba(42, 0, 129, 0.6));
}
.bc-sym img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
animation: bc-spin 9s linear infinite;
transition: scale 0.2s var(--ease-out);
}
.bc-sym__c,
.bc.is-light .bc-sym__w {
opacity: 0;
}
.bc.is-light .bc-sym__c {
opacity: 1;
}
.bc.is-light .bc-sym {
filter: drop-shadow(0 2px 6px rgba(42, 0, 129, 0.35));
}
.bc.is-down .bc-sym img {
scale: 0.8;
}
@keyframes bc-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.bc-sym img { animation: none; }
}
@media (pointer: coarse) {
.bc { display: none; }
}
/* =========================================================
Spotlight interno de card + profundidade em 3 camadas
========================================================= */
/*
Sem overflow:hidden aqui. O ::before já fica contido por inset:0 e herda o
raio do card. Recortar o card inteiro cortava o selo "Mais escolhido"
(top:-13px) e as aspas do depoimento (top:-18px).
*/
[data-spotlight] {
position: relative;
isolation: isolate;
transition: border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
[data-spotlight]::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-slow) var(--ease-out);
background: radial-gradient(
260px circle at var(--mx, 50%) var(--my, 50%),
var(--spot, var(--card-spotlight-light)),
transparent 68%
);
}
[data-spotlight]:hover::before,
[data-spotlight]:focus-within::before {
opacity: 1;
}
/* variação escura */
[data-spotlight][data-tone="dark"] {
--spot: var(--card-spotlight-dark);
}
@media (prefers-reduced-motion: reduce) {
[data-spotlight]::before { display: none; }
}
/* =========================================================
Plano: superfície, destaque e preço
========================================================= */
.plan-card {
background: var(--card-surface-light);
border: 1px solid var(--color-border-subtle);
box-shadow: var(--card-inset-light), 0 2px 8px -4px rgba(42, 0, 129, 0.12);
}
.plan-card:hover {
border-color: var(--color-border-brand);
box-shadow: var(--card-inset-light), var(--shadow-soft);
}
/*
Plano recomendado: gradiente da marca (specs/design.md §6.5).
Mesmo tamanho e mesmo raio dos demais, só a superfície muda.
*/
.plan-card[data-featured="true"] {
background: var(--highlight-gradient-d);
border-color: transparent;
color: var(--color-text-on-inverse);
box-shadow: var(--card-inset-dark), var(--shadow-soft-lg);
--spot: rgba(255, 255, 255, 0.16);
}
.plan-card[data-featured="true"] .plan-card__desc {
color: var(--color-text-muted-inverse);
}
.plan-card[data-featured="true"] .plan-card__features svg {
color: var(--color-text-accent);
}
.plan-card[data-featured="true"] .plan-card__badge {
background: var(--color-bg-accent);
color: var(--color-text-on-accent);
}
.plan-card[data-featured="true"]:hover {
border-color: transparent;
}
/* =========================================================
Barra de provas em pílulas (marquee contínuo)
========================================================= */
.proof-bar {
padding-block: var(--space-xl);
border-bottom: 1px solid var(--color-border-subtle);
}
.proof-pill {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 10px var(--space-lg);
border-radius: var(--radius-full);
background: var(--card-surface-light);
border: 1px solid var(--color-border-subtle);
box-shadow: var(--card-inset-light), 0 2px 8px -6px rgba(42, 0, 129, 0.25);
font-size: var(--fs-body-sm);
font-weight: 500;
color: var(--color-text-primary);
white-space: nowrap;
transition: border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.proof-pill:hover {
border-color: var(--color-border-brand);
box-shadow: var(--card-inset-light), var(--shadow-soft);
}
.proof-pill svg {
width: 17px;
height: 17px;
flex-shrink: 0;
color: var(--color-icon-brand);
}
/* Toda pílula carrega o próprio respiro à direita — inclusive a última de
cada grupo. É essa margem, e não um gap entre os grupos, que faz os dois
grupos ficarem exatamente do mesmo tamanho (ver .marquee__track abaixo). */
.proof-pill {
margin-right: var(--space-lg);
}
/* =========================================================
Marquee infinito — reconstruído do zero em 2026-09-09, 100% CSS
========================================================= */
/*
Depois de várias rodadas tentando acertar a distância do laço calculando-a
em JS (somando largura de pílula por pílula), toda tentativa esbarrava no
mesmo problema: a soma reconstruída em JS diverge por frações de pixel do
que o navegador realmente desenha, e como o desvio nunca se corrige
sozinho, ele cresce a cada volta até virar um vão visível.
A solução que elimina a causa em vez de tentar medi-la com mais precisão:
não calcular distância nenhuma. O HTML já traz dois grupos de pílulas
idênticos (o segundo é aria-hidden), e a animação desloca a pista por
-50% da PRÓPRIA largura renderizada — uma conta que o navegador faz
sozinho, com a precisão dele, não a nossa. Como os dois grupos são
idênticos por construção (mesmo HTML, mesma margem em cada pílula
inclusive a última), -50% cai exatamente no início do segundo grupo,
sempre, em qualquer resolução de tela, sem JS nenhum medindo nada.
*/
/*
overflow:hidden sem respiro nenhum cortava a sombra de hover da pílula
(.proof-pill:hover usa --shadow-soft, que precisa de ~24-28px). padding +
margin negativa do mesmo tamanho: cria espaço por dentro pro overflow não
cortar, sem mudar a altura visível da barra de provas por fora.
*/
.marquee {
overflow: hidden;
padding-block: 28px;
margin-block: -28px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track {
display: flex;
width: max-content;
animation: marquee-loop 34s linear infinite;
}
.marquee__group {
display: flex;
flex-shrink: 0;
}
@keyframes marquee-loop {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Pausa no hover e no foco de teclado — sem botão de play/pause: decisão do
cliente em 2026-09-05 (memoria.md), esta faixa não tem controles. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
animation-play-state: paused;
}
@media (max-width: 700px) {
.marquee {
-webkit-mask-image: none;
mask-image: none;
}
}
@media (prefers-reduced-motion: reduce) {
.marquee {
overflow-x: auto;
}
.marquee__track {
animation: none;
width: auto;
}
/* Sem a animação, o segundo grupo (clone) não tem função — some do
layout e da árvore de acessibilidade, sem duplicar as pílulas na tela. */
.marquee__group[aria-hidden="true"] {
display: none;
}
}
/* ?static=1 (ver ui.js): mesmo tratamento de reduced-motion, mas acionado
pelo atributo em vez do media feature — uma animação 100% em CSS não tem
como saber sozinha que a página está sendo capturada para o Figma. Sem
isso, cada captura pegava o marquee numa posição diferente do laço. */
[data-static="true"] .marquee {
overflow-x: auto;
}
[data-static="true"] .marquee__track {
animation: none;
width: auto;
}
[data-static="true"] .marquee__group[aria-hidden="true"] {
display: none;
}
/* =========================================================
FAQ (redesenhado: cards com spotlight, ver design.md §7.2)
========================================================= */
.faq {
display: flex;
flex-direction: column;
gap: var(--space-md);
border-top: none;
}
/* Nada de transform aqui: o GSAP anima a entrada e um transform de hover
deixaria as duas coisas disputando a mesma propriedade. O realce de hover
é feito com borda e sombra. */
.faq__item {
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
background: var(--card-surface-light);
box-shadow: var(--card-inset-light);
transition: border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.faq__item:hover {
border-color: var(--color-border-brand);
box-shadow: var(--card-inset-light), var(--shadow-soft);
}
.faq__item.is-open {
border-color: var(--color-border-brand);
box-shadow: var(--card-inset-light), var(--shadow-soft);
}
.faq__trigger {
width: 100%;
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-lg) var(--space-xl);
text-align: left;
font-family: var(--font-body);
font-size: var(--fs-body-lg);
font-weight: 600;
border-radius: inherit;
}
.faq__mark {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: var(--radius-full);
border: 1px solid var(--color-border-subtle);
background: var(--color-bg-canvas);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--dur-slow) var(--ease-out),
background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.faq__item:hover .faq__mark {
border-color: var(--color-border-brand);
}
.faq__trigger[aria-expanded="true"] .faq__mark {
background: var(--color-bg-inverse);
border-color: transparent;
transform: rotate(45deg);
}
.faq__mark svg {
width: 20px;
height: 20px;
color: var(--color-text-brand-strong);
transition: color var(--dur-base) var(--ease-out);
}
.faq__trigger[aria-expanded="true"] .faq__mark svg {
color: var(--color-text-accent);
}
.faq__q {
flex: 1;
}
.faq__tag {
flex-shrink: 0;
font-size: var(--fs-caption);
font-weight: 500;
color: var(--color-text-muted);
padding: 4px var(--space-md);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-full);
}
.faq__panel p {
padding: 0 var(--space-xl) var(--space-lg) calc(44px + var(--space-xl) + var(--space-lg));
color: var(--color-text-muted);
max-width: 70ch;
}
@media (max-width: 700px) {
.faq__trigger {
padding: var(--space-md) var(--space-lg);
gap: var(--space-md);
font-size: var(--fs-body);
}
.faq__tag { display: none; }
.faq__panel p {
padding: 0 var(--space-lg) var(--space-lg) calc(44px + var(--space-lg) + var(--space-md));
}
}
/* =========================================================
Inversão da seção de Inteligência Artificial (2026-09-09)
Refeito a partir do código que o cliente já tinha validado no Elementor.
A ideia central: o ScrollTrigger NÃO interpola cor nenhuma — ele só liga e
desliga a classe `ia-on` no ao cruzar o ponto. Quem anima é o
`transition` daqui.
Por que isso é melhor que amarrar a cor à posição do scroll (o que eu tinha
feito antes): parar no meio da rolagem deixava a seção congelada no cinza
intermediário, e a suavidade dependia da velocidade de quem rolava. Assim a
troca leva sempre 1s e sai igual toda vez.
A cor de verdade da seção continua sendo a ESCURA, declarada no HTML via
data-surface. Só quando motion.js marca `js-ia` no — o que ele não
faz em ?static=1, em reduced-motion nem sem GSAP — é que o estado claro de
partida passa a valer. Sem JS, a seção fica escura, que é o certo.
Os separadores NÃO estão nesta lista de transição (2026-09-09): a lógica
nova do cliente deu a eles uma cor fixa, própria da seção vizinha que cada
um imita, então não precisam mais sumir/aparecer junto com a troca. Ver o
comentário no HTML, seção 6.
========================================================= */
.js-ia [data-ia-invert],
.js-ia [data-ia-invert] .ia-glow,
.js-ia [data-ia-invert] .section-eyebrow-logo {
transition: background-color 1s ease, color 1s ease, opacity 1s ease,
filter 1s ease;
}
/* Estado de partida: claro. Vale só enquanto `ia-on` está ausente — quando ela
entra, estas regras deixam de casar e cada elemento volta sozinho ao valor
que já declara em outro lugar (inclusive as opacidades próprias de cada
brilho: 0.08, 0.24 e 0.06). */
.js-ia:not(.ia-on) [data-ia-invert] {
background-color: var(--color-bg-surface);
color: var(--color-text-primary);
}
.js-ia:not(.ia-on) [data-ia-invert] .ia-glow {
opacity: 0;
}
/* O logotipo do eyebrow é a arte BRANCA e sumiria no claro. O invert() resolve
e ainda é, literalmente, o efeito negativo. */
.js-ia:not(.ia-on) [data-ia-invert] .section-eyebrow-logo {
filter: invert(1);
}
/* Gradiente de destaque no estado final (2026-10-16, design.md §2.2). Gradiente
não interpola em `transition`, então ele vive numa camada própria atrás de
tudo e entra por opacidade, no mesmo 1s da troca de cor acima. Sem JS a
camada fica visível — a cor de verdade da seção. */
[data-ia-invert] {
isolation: isolate;
}
[data-ia-invert]::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--highlight-gradient-d);
pointer-events: none;
}
.js-ia [data-ia-invert]::before {
transition: opacity 1s ease;
}
.js-ia:not(.ia-on) [data-ia-invert]::before {
opacity: 0;
}
/* =========================================================
Revelação letra a letra (2026-09-09)
splitChars() em motion.js embrulha cada palavra num `.word` e cada letra
num `.char`. A palavra precisa ser inline-block: como cada letra virou um
elemento, sem isso o navegador pode quebrar a linha NO MEIO de uma palavra.
O `.char` fica inline de propósito — só a opacidade é animada, e manter a
letra inline preserva o kerning.
Nada aqui esconde texto: quem aplica opacidade 0 é o GSAP, e só quando a
animação vai de fato rodar. Sem JS, em ?static=1 ou em reduced-motion o
texto nem chega a ser dividido.
========================================================= */
[data-split-text] .word {
display: inline-block;
}
/* =========================================================
Página Allges Saúde (2026-10-16)
Direto no código, sem passar pelo Figma (decisão do cliente nesta rodada),
reaproveitando os componentes aprovados da Home. Regime claro da vertente
Saúde (design.md §3) com o azul como cor própria; um bloco escuro pontual
na seção de segurança.
Cada seção tem um movimento próprio, ligado ao conteúdo dela (design.md
§7.1): linhas do título subindo de uma máscara no hero, a linha do dia que
se preenche no scroll, a ficha do paciente que se completa passo a passo e
a ficha que esconde o conteúdo clínico conforme a função.
Todo estado "apagado" ou "escondido" abaixo só vale com uma classe js-*
no , marcada por motion.js. Sem JS, em ?static=1 ou em
reduced-motion, tudo aparece no estado final.
========================================================= */
/* ---------- Rótulo acima dos títulos (2026-10-19) ----------
Pedido do cliente. Não é o eyebrow vetado no design.md §9.3 (caixa alta
com tracking largo): é texto curto em sentence case, peso médio, na cor de destaque da página. Exceção registrada só para a
página Saúde (sem o traço antes, retirado a pedido do cliente). Em fundo escuro, branco suave (azul sobre #191919 não passa
no contraste de texto pequeno). */
/* `.section-head .sa-kicker` também: sem isso, a regra `.section-head p`
(cor apagada, tamanho de corpo grande) vencia o rótulo. */
.sa-kicker,
.section-head .sa-kicker {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
margin: 0 0 var(--space-md);
font-size: var(--fs-body-sm);
font-weight: 600;
letter-spacing: var(--ls-label);
color: var(--color-text-brand);
}
.sa-secure .sa-kicker {
color: var(--color-text-muted-inverse);
}
.sa-day .sa-kicker {
color: var(--tone-time);
transition: color 0.8s ease;
}
/* ---------- Hero ---------- */
.sa-hero {
position: relative;
overflow: hidden;
background: var(--color-bg-surface);
min-height: max(100vh, 860px);
display: flex;
align-items: center;
padding-block: calc(var(--space-5xl) + var(--space-2xl)) var(--space-4xl);
}
.sa-hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.sa-hero__title {
margin-top: var(--space-lg);
}
@media (max-width: 1500px) {
.sa-hero__title {
font-size: var(--fs-display-2);
}
}
/* Cada linha é uma máscara: o texto sobe de dentro dela na entrada. O pequeno
respiro embaixo evita cortar a descendente do "p" e do "g". */
.sa-line {
display: block;
overflow: hidden;
padding-bottom: 0.08em;
}
.sa-line__in {
display: block;
}
/* Segunda linha em cor de destaque, padrão permitido no design.md §4.2. Azul
sobre branco em título grande: 5.2:1. Quando não cabe numa linha, o
`balance` divide em duas de tamanho parecido ("mais tempo / para o
paciente.") em vez de deixar "paciente." sozinho embaixo. */
.sa-hero__title-accent {
color: var(--color-text-brand);
text-wrap: balance;
}
.sa-hero__sub {
max-width: 52ch;
margin-top: var(--space-lg);
}
.sa-hero__cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-top: var(--space-xl);
}
.sa-btn-outline {
border: 1px solid var(--color-border-subtle);
box-shadow: none;
}
/* Hover em roxo profundo com texto branco (pedido do cliente, 2026-10-19):
14.84:1, par aprovado no design.md §8. Cor sólida, nunca opacidade. */
.sa-btn-outline:hover {
background: var(--color-bg-inverse);
border-color: var(--color-bg-inverse);
color: var(--color-text-on-inverse);
}
.sa-hero__note {
margin-top: var(--space-md);
}
.sa-hero__proof {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border-subtle);
max-width: 460px;
font-size: var(--fs-body-sm);
font-weight: 500;
color: var(--color-text-primary);
/* Linhas de tamanho parecido, em vez de "Allges" sozinho na segunda. */
text-wrap: balance;
}
.sa-hero__avatars {
display: flex;
flex: none;
}
.sa-hero__avatars img {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
border: 2px solid var(--color-bg-surface);
object-fit: cover;
}
.sa-hero__avatars img + img {
margin-left: -10px;
}
/* Linha de batimento: base bem clara e um pulso que corre por ela. */
.sa-pulse {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 120px;
z-index: 0;
pointer-events: none;
overflow: visible;
}
.sa-pulse path {
fill: none;
stroke: var(--color-bg-info);
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.sa-pulse__base {
stroke-width: 1.5;
opacity: 0.14;
}
.sa-pulse__beat {
stroke-width: 2.5;
stroke-dasharray: 70 930;
stroke-dashoffset: 1000;
animation: sa-beat 5s linear infinite;
}
@keyframes sa-beat {
to { stroke-dashoffset: 0; }
}
/* Fundo vivo do hero (2026-10-19, pedido do cliente), em três camadas:
1. Malha de pontos azuis que desliza devagar, mais forte do lado do painel
e sumindo antes do texto (a leitura continua sobre branco limpo).
2. Os pontos acendem em azul cheio perto do cursor: a mesma linguagem da
malha reativa do hero da Home (design.md §7.2). Usa --px/--py, que
ui.js já escreve para o parallax; só em ponteiro fino.
3. Halo azul e roxo respirando atrás do painel (.sa-hero__visual::before).
Paradas em reduced-motion e em ?static=1.
O mesmo fundo vale para qualquer seção com a classe .sa-live (2026-10-19,
pedido do cliente para a seção de especialidades). Cada seção decide onde
a malha aparece pela variável --dots-mask. */
.sa-hero {
--dots-mask: radial-gradient(ellipse 70% 85% at 72% 50%, black 30%, transparent 80%);
}
.sa-live {
position: relative;
}
.sa-live > .container {
position: relative;
z-index: 1;
}
.sa-hero::before,
.sa-hero::after,
.sa-live::before,
.sa-live::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(circle, var(--dots-color, var(--dot-blue)) 1.2px, transparent 1.8px);
background-size: 28px 28px;
animation: sa-dots 60s linear infinite;
}
.sa-hero::before,
.sa-live::before {
-webkit-mask-image: var(--dots-mask);
mask-image: var(--dots-mask);
}
.sa-hero::after,
.sa-live::after {
background-image: radial-gradient(circle, var(--color-bg-info) 1.4px, transparent 2px);
--cx: calc((var(--px, 0) + 1) * 50%);
--cy: calc((var(--py, 0) + 1) * 50%);
-webkit-mask-image: radial-gradient(circle 200px at var(--cx) var(--cy), black, transparent);
mask-image: radial-gradient(circle 200px at var(--cx) var(--cy), black, transparent);
opacity: 0;
transition: opacity 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.sa-hero:hover::after,
.sa-live:hover::after {
opacity: 0.55;
}
}
@keyframes sa-dots {
to { background-position: 280px 140px; }
}
/* Palco: o painel azul. A foto mora FORA dele (ver .sa-hero__photo), para a
cabeça poder passar da borda de cima. Sobe 64px em relação ao centro da
coluna de texto, para o conjunto não pesar para baixo (`top`, e não
transform: o transform deste elemento é do paralaxe de scroll no GSAP). */
.sa-hero__visual {
position: relative;
top: calc(-1 * var(--space-3xl));
height: min(78vh, 740px);
min-height: 560px;
}
.sa-hero__visual::before {
content: "";
position: absolute;
inset: 18% -4% 0 2%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 62% 50%, var(--glow-blue), transparent 58%),
radial-gradient(circle at 22% 85%, var(--glow-purple), transparent 50%);
filter: blur(70px);
/* Reduzido em 2026-10-19: a 0.95 lia como sombra roxa pesada em volta do
painel. Agora é só uma luz por trás. */
opacity: 0.4;
animation: sa-halo 14s ease-in-out infinite alternate;
}
@keyframes sa-halo {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-4%, 3%) scale(1.08); }
}
.sa-hero__stage {
position: absolute;
top: 22%;
right: 0;
bottom: 0;
left: 6%;
border-radius: var(--radius-lg);
/* Degradê da cor própria da vertente (azul) até o roxo profundo da marca,
de cima para baixo: dá chão para a figura em vez de um bloco chapado. */
background: linear-gradient(170deg, var(--blue-500) 0%, var(--blue-500) 38%, var(--purple-900) 100%);
overflow: hidden;
box-shadow: var(--shadow-soft-lg);
}
/* Símbolo da marca, inteiro e sem alteração de paths (CLAUDE.md, regra 3),
como marca d'água no palco. Se move mais que a foto, no sentido oposto. */
.sa-hero__mark {
position: absolute;
top: -14%;
right: -14%;
width: 72%;
height: auto;
opacity: 0.14;
translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 16px);
transition: translate 0.6s var(--ease-out);
}
.sa-hero__photo {
position: absolute;
z-index: 1;
bottom: 0;
left: 53%;
height: 94%;
width: auto;
translate: calc(-50% + var(--px, 0) * -8px) 0;
transition: translate 0.6s var(--ease-out);
pointer-events: none;
}
/* Recortes reais do app em moldura de vidro claro (design.md §6.1, "Glass
claro"). O texto está dentro da própria captura, então o contraste não
depende do vidro; o vidro só emoldura, e tem o que refratar atrás: a foto,
o azul do palco e a quina dele, que A e C atravessam de propósito.
A borda é dupla como num vidro real: branca por dentro (luz) e um fio roxo
por fora, que é o que desenha a quina quando o fundo atrás é branco.
A flutuação usa `translate` (independente de `transform`), porque o
transform deles pertence ao GSAP na entrada — mesma separação da órbita. */
.sa-shot {
display: block;
padding: var(--space-sm);
border-radius: var(--radius-lg);
background: linear-gradient(160deg, var(--white-a45), var(--white-a08) 60%);
-webkit-backdrop-filter: blur(var(--control-glass-blur)) saturate(170%);
backdrop-filter: blur(var(--control-glass-blur)) saturate(170%);
box-shadow:
inset 0 0 0 1px var(--color-border-glass),
0 0 0 1px var(--glass-hairline-light),
var(--shadow-soft-lg);
animation: sa-bob 6s ease-in-out infinite;
}
.sa-shot img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
/* Posição e largura. Os cartões NÃO seguem o cursor (pedido do cliente,
2026-10-19): ficam só com a flutuação (sa-bob). Foto e símbolo do palco
continuam com o parallax. Três escalas diferentes, não três cartões
iguais (design.md §9.1). */
.sa-float-wrap {
position: absolute;
z-index: 2;
}
.sa-float-wrap--a { top: 27%; left: -3%; width: clamp(130px, 21%, 190px); }
.sa-float-wrap--b { top: 46%; right: -6%; width: clamp(210px, 40%, 340px); }
.sa-float-wrap--c { bottom: 5%; left: -3%; width: clamp(260px, 58%, 500px); }
/* Perto de 1024 a coluna encosta na borda da janela: o recorte da direita
para de vazar o palco. */
@media (max-width: 1200px) {
.sa-float-wrap--b { right: -2%; }
}
.sa-float-wrap--b .sa-shot { animation-delay: -2s; }
.sa-float-wrap--c .sa-shot { animation-delay: -4s; }
@keyframes sa-bob {
0%, 100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
@media (prefers-reduced-motion: reduce) {
.sa-pulse__beat {
animation: none;
stroke-dasharray: none;
opacity: 0.4;
}
.sa-hero::before,
.sa-live::before,
.sa-hero__visual::before,
.sa-spec__media::before {
animation: none;
}
.sa-hero::after,
.sa-live::after {
display: none;
}
}
[data-static="true"] .sa-hero::before,
[data-static="true"] .sa-live::before,
[data-static="true"] .sa-hero__visual::before,
[data-static="true"] .sa-spec__media::before {
animation: none;
}
[data-static="true"] .sa-hero::after,
[data-static="true"] .sa-live::after {
display: none;
}
[data-static="true"] .sa-pulse__beat {
animation: none;
stroke-dasharray: none;
opacity: 0.4;
}
/* Pré-esconde do hero: só enquanto motion.js não montou a timeline. */
.js-hero-anim .sa-hero [data-hero-in],
.js-hero-anim .sa-hero .sa-line__in,
.js-hero-anim .sa-hero [data-float],
.js-hero-anim .sa-hero__stage,
.js-hero-anim .sa-hero__photo {
opacity: 0;
}
/* ---------- Um dia no consultório: o relógio ----------
Sem JS: lista comum, um momento embaixo do outro. Com `js-clock` (marcada
por motion.js), a seção vira um palco fixo na tela que troca de momento
conforme a rolagem.
O tom do dia (manhã, dia, fim de tarde, noite) é TROCA DE CLASSE com
transition, nunca interpolação por scroll: é a regra aprendida na seção de
IA da Home (memoria.md, 15ª rodada), para a seção nunca parar num cinza
intermediário em que texto e fundo se aproximam. Cada tom tem pares de
contraste já aprovados no design.md §8. */
.sa-day {
/* Tom do dia: manhã (branco com véu azul), dia (branco), fim de tarde
(azul) e noite (roxo). Só o que está FORA da agenda muda de cor; a
janela da agenda é sempre branca, como o app. */
--tone-bg: var(--color-bg-surface);
--tone-text: var(--color-text-primary);
--tone-time: var(--color-text-brand-strong);
--tone-muted: var(--color-text-muted);
position: relative;
isolation: isolate;
background-color: var(--tone-bg);
color: var(--tone-text);
transition: background-color 0.8s ease, color 0.8s ease;
}
.sa-day::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--color-bg-info-soft);
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: none;
}
.sa-day[data-tone="dawn"]::before {
opacity: 1;
}
.sa-day[data-tone="dusk"],
.sa-day[data-tone="night"] {
--tone-bg: var(--color-bg-info);
--tone-text: var(--color-text-on-inverse);
--tone-time: var(--color-text-on-inverse);
--tone-muted: var(--color-text-muted-inverse);
}
.sa-day[data-tone="night"] {
--tone-bg: var(--color-bg-inverse);
}
/* Título e "Agora" à esquerda, agenda à direita: uma composição só, sem o
vão que havia entre o cabeçalho e o conteúdo. */
.sa-day__grid {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: var(--space-4xl);
align-items: center;
}
.sa-day__head p.body-lg {
margin-top: var(--space-lg);
max-width: 46ch;
color: var(--tone-muted);
transition: color 0.8s ease;
}
.sa-day__now {
display: none;
}
.sa-day__now-label {
display: block;
font-size: var(--fs-label);
font-weight: 600;
color: var(--tone-muted);
transition: color 0.8s ease;
}
.sa-day__now-time {
display: block;
margin-top: var(--space-xs);
font-family: var(--font-display);
font-size: var(--fs-display-2);
font-weight: 700;
line-height: 1;
letter-spacing: var(--ls-display);
font-variant-numeric: lining-nums tabular-nums;
color: var(--tone-time);
transition: color 0.8s ease;
}
/* ---- A janela da agenda ---- */
.sa-agenda {
background: var(--color-bg-surface);
color: var(--color-text-primary);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--card-inset-light), var(--shadow-soft-lg);
padding: var(--space-lg) var(--space-xl) var(--space-xl);
}
.sa-agenda__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding-bottom: var(--space-md);
margin-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border-subtle);
}
.sa-agenda__title {
font-size: var(--fs-body-sm);
font-weight: 600;
}
.sa-agenda__day {
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
background: var(--color-bg-info-soft);
color: var(--color-text-brand-strong);
font-size: var(--fs-caption);
font-weight: 600;
}
.sa-clock__list {
list-style: none;
margin: 0;
padding: 0;
}
/* Cada compromisso: horário em pílula | nó no trilho | conteúdo. A cor do
trilho (--rail) é a do momento do dia: azul-claro de manhã, azul de dia,
violeta no fim de tarde e roxo profundo à noite. */
.sa-moment {
--rail: var(--color-bg-info);
position: relative;
display: grid;
grid-template-columns: 4.5rem 18px minmax(0, 1fr);
column-gap: var(--space-md);
align-items: start;
padding-bottom: var(--space-md);
}
.sa-moment[data-tone="dawn"] { --rail: var(--glow-blue); }
.sa-moment[data-tone="dusk"] { --rail: var(--purple-700); }
.sa-moment[data-tone="night"] { --rail: var(--purple-900); }
.sa-moment:last-child {
padding-bottom: 0;
}
.sa-moment__time {
justify-self: start;
padding: 2px var(--space-sm);
border-radius: var(--radius-full);
background: var(--color-bg-info-soft);
color: var(--color-text-brand-strong);
font-size: var(--fs-caption);
font-weight: 600;
line-height: 1.6;
font-variant-numeric: tabular-nums;
transition: background-color 0.5s ease, color 0.5s ease;
}
/* O trilho é feito de segmentos: cada compromisso desenha o trecho que o
liga ao próximo. Quando o momento já passou, o trecho ganha a cor dele. */
.sa-moment::after {
content: "";
position: absolute;
top: 14px;
bottom: -14px;
left: calc(4.5rem + var(--space-md) + 8px);
width: 2px;
background: var(--color-border-subtle);
transition: background-color 0.6s ease;
}
.sa-moment:last-child::after {
display: none;
}
.sa-moment__node {
position: relative;
z-index: 1;
width: 14px;
height: 14px;
margin: 5px 2px 0;
border-radius: var(--radius-full);
background: var(--color-bg-surface);
border: 2px solid var(--color-border-subtle);
transition: background-color 0.5s ease, border-color 0.5s ease,
box-shadow 0.5s ease, scale 0.4s var(--ease-out);
}
.sa-moment__before {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
/* Sem isto o texto não encolhe dentro do flex e a reticência das linhas
compactas não aparece (o texto vazava para fora da janela). */
.sa-moment__before > div {
min-width: 0;
}
.sa-cmp__icon {
flex: none;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--color-bg-surface);
box-shadow: var(--card-inset-light), var(--shadow-soft);
color: var(--color-text-muted);
display: flex;
align-items: center;
justify-content: center;
}
.sa-cmp__icon img,
.sa-cmp__icon svg {
width: 22px;
height: 22px;
}
.sa-cmp__icon--brand {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--highlight-gradient-d);
box-shadow: none;
}
.sa-cmp__icon--brand img {
width: 26px;
height: 26px;
}
.sa-cmp__label {
display: block;
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: var(--ls-label);
color: var(--color-text-muted);
}
.sa-moment__pain {
font-size: var(--fs-body-sm);
line-height: var(--lh-heading);
}
/* O "Com o Allges" abre por baixo do compromisso (0fr → 1fr). Sem JS ele
já nasce aberto. */
.sa-moment__more {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.6s var(--ease-out);
}
.sa-moment__more > * {
min-height: 0;
overflow: hidden;
}
.sa-moment__after {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-md);
padding: var(--space-lg);
border-radius: var(--radius-md);
background: var(--color-bg-info);
color: var(--color-text-on-inverse);
box-shadow: var(--shadow-soft);
}
.sa-moment__after .sa-cmp__label {
color: var(--color-text-on-inverse);
}
.sa-moment__fix {
margin-top: 2px;
font-size: var(--fs-h3);
font-weight: 600;
line-height: var(--lh-heading);
letter-spacing: var(--ls-display);
}
/* ---- Modo relógio (com JS) ---- */
.js-clock .sa-day.section {
padding-block: 0;
}
/* Cinco momentos, cada um com ~85% da altura da janela de rolagem. */
.js-clock .sa-clock {
height: calc(5 * 85vh);
}
.js-clock .sa-clock__stage {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding-block: var(--space-4xl) var(--space-xl);
}
.js-clock .sa-day__now {
display: block;
margin-top: var(--space-2xl);
}
/* Fora do momento atual, o compromisso fica compacto como numa agenda:
uma linha, sem rótulo, com o "Com o Allges" fechado. */
.js-clock .sa-moment:not(.is-current) .sa-cmp__label {
display: none;
}
.js-clock .sa-moment:not(.is-current) .sa-moment__pain {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-text-muted);
}
.js-clock .sa-moment:not(.is-current) .sa-cmp__icon {
width: 28px;
height: 28px;
}
.js-clock .sa-moment:not(.is-current) .sa-cmp__icon img,
.js-clock .sa-moment:not(.is-current) .sa-cmp__icon svg {
width: 18px;
height: 18px;
}
.js-clock .sa-moment__more {
grid-template-rows: 0fr;
}
.js-clock .sa-moment.is-current .sa-moment__more {
grid-template-rows: 1fr;
}
.js-clock .sa-moment__after {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s var(--ease-out) 0.25s, transform 0.6s var(--ease-out) 0.25s;
}
.js-clock .sa-moment.is-current .sa-moment__after {
opacity: 1;
transform: none;
}
/* Momento atual: pílula e nó na cor do momento, com um halo de "agora". */
.js-clock .sa-moment.is-current .sa-moment__time {
background: var(--color-bg-info);
color: var(--color-text-on-inverse);
}
.js-clock .sa-moment.is-current .sa-moment__node {
background: var(--rail);
border-color: var(--rail);
box-shadow: 0 0 0 6px var(--color-bg-info-soft);
scale: 1.2;
}
/* Momentos já vividos: nó preenchido, trecho do trilho colorido e o
problema riscado, como compromisso cumprido. */
.js-clock .sa-moment.is-past .sa-moment__node {
background: var(--rail);
border-color: var(--rail);
}
.js-clock .sa-moment.is-past::after {
background: var(--rail);
}
/* O risco: um fundo que cresce no , linha por linha
(box-decoration-break). No momento atual ele espera o Allges entrar. */
.js-clock .sa-moment__pain span {
background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1.5px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background-size 0.7s var(--ease-out);
}
.js-clock .sa-moment.is-past .sa-moment__pain span {
background-size: 100% 1.5px;
}
.js-clock .sa-moment.is-current .sa-moment__pain span {
background-size: 100% 1.5px;
transition-delay: 1s;
}
@media (max-width: 960px) {
.sa-day__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xl);
}
/* No celular, o palco fixo só tem espaço para o título e a agenda. */
.js-clock .sa-day__head p.body-lg,
.js-clock .sa-day__now {
display: none;
}
.js-clock .sa-clock__stage {
justify-content: flex-start;
padding-top: calc(var(--space-4xl) + var(--space-md));
}
.js-clock .sa-day__head .h2 {
font-size: var(--fs-h1);
}
}
@media (max-width: 520px) {
.sa-agenda {
padding: var(--space-md) var(--space-md) var(--space-lg);
}
.sa-moment {
grid-template-columns: 3.5rem 18px minmax(0, 1fr);
column-gap: var(--space-sm);
}
.sa-moment::after {
left: calc(3.5rem + var(--space-sm) + 8px);
}
/* Tudo mais enxuto para o compromisso atual caber na tela junto com o
título: ícone da ferramenta só nas linhas compactas e cartão do Allges
com o símbolo pequeno ao lado. */
.sa-agenda__bar {
margin-bottom: var(--space-md);
}
.sa-moment {
padding-bottom: var(--space-sm);
}
.js-clock .sa-moment.is-current .sa-moment__before .sa-cmp__icon {
display: none;
}
/* O cartão do Allges avança por baixo da coluna dos horários e ocupa a
largura toda da agenda: o texto cabe em duas linhas em vez de cinco. */
.sa-moment__after {
position: relative;
z-index: 1;
align-items: flex-start;
gap: var(--space-sm);
margin-top: var(--space-sm);
margin-left: calc(-1 * (3.5rem + 18px + 2 * var(--space-sm)));
padding: var(--space-md);
}
.sa-cmp__icon--brand {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
}
.sa-cmp__icon--brand img {
width: 18px;
height: 18px;
}
.sa-moment__fix {
font-size: var(--fs-body-lg);
}
}
/* ---------- Jornada do paciente ----------
A ficha no centro e as etapas em volta, ligadas por fios (2026-10-19).
Os fios são um SVG desenhado por motion.js a partir da posição real de
cada etapa e de cada linha da ficha. */
.sa-hub {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 440px) minmax(0, 1fr);
gap: var(--space-4xl);
align-items: center;
margin-top: var(--space-3xl);
}
.sa-journey .section-head p {
text-wrap: balance;
}
.sa-hub__wires {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.sa-hub__wire {
fill: none;
stroke: var(--color-border-subtle);
stroke-width: 1.5;
}
.sa-hub__wire--live {
stroke: var(--color-bg-info);
stroke-width: 2;
stroke-linecap: round;
}
.sa-hub__steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2xl);
}
.sa-hub__step {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
/* À esquerda, o número fica do lado da ficha: o fio sai dele. */
.sa-hub__steps--left .sa-hub__step {
flex-direction: row-reverse;
text-align: right;
}
.sa-hub__step h3 {
color: var(--color-text-brand-strong);
}
.sa-hub__step p {
margin-top: var(--space-sm);
color: var(--color-text-muted);
font-size: var(--fs-body-sm);
max-width: 40ch;
}
.sa-hub__steps--left .sa-hub__step p {
margin-left: auto;
}
/* Os números são informação: a jornada é uma sequência real (§9.4), e é o
mesmo número na etapa e na linha da ficha. */
.sa-hub__num {
flex: none;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--color-bg-info);
color: var(--color-text-on-inverse);
font-size: var(--fs-body-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ---- A ficha ---- */
.sa-record {
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--card-inset-light), var(--shadow-soft-lg);
padding: var(--space-xl);
}
.sa-hub__record {
position: relative;
z-index: 1;
padding: var(--space-lg);
}
.sa-record__head,
.sa-vault__head {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: var(--fs-body-sm);
}
.sa-record__head strong,
.sa-vault__head strong {
display: block;
font-size: var(--fs-body);
font-weight: 600;
}
.sa-record__head strong + span {
color: var(--color-text-muted);
}
/* Sem isto, no celular o nome quebrava uma palavra por linha. */
.sa-record__who {
flex: 1;
min-width: 0;
}
.sa-record__avatar {
flex: none;
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: var(--color-bg-info);
color: var(--color-text-on-inverse);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.sa-record__tag {
flex: none;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
background: var(--color-bg-canvas);
color: var(--color-text-brand-strong);
font-size: var(--fs-caption);
font-weight: 600;
}
.sa-record__rows {
list-style: none;
margin: var(--space-lg) 0 0;
padding: 0;
}
.sa-record__row {
display: grid;
grid-template-columns: 128px 1fr;
gap: var(--space-md);
align-items: center;
padding: var(--space-sm) var(--space-sm);
border-top: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
font-size: var(--fs-body-sm);
transition: background-color 0.5s ease;
}
.sa-record__k {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--color-text-muted);
font-weight: 500;
transition: color 0.5s ease;
}
.sa-record__k .sa-hub__num {
width: 22px;
height: 22px;
font-size: var(--fs-caption);
transition: background-color 0.5s ease, color 0.5s ease;
}
.sa-record__v {
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.sa-record__bar {
flex: none;
width: 72px;
height: 6px;
border-radius: var(--radius-full);
background: var(--color-bg-canvas);
overflow: hidden;
}
.sa-record__bar > span {
display: block;
width: var(--p);
height: 100%;
background: var(--color-bg-info);
}
/* Com JS, a linha só "acende" quando o fio dela chega (motion.js). Antes
disso, o número fica apagado e o valor some. Sem JS fica tudo aceso. */
.js-hub .sa-record__row:not(.is-lit) .sa-record__v {
opacity: 0;
}
.js-hub .sa-record__row:not(.is-lit) .sa-record__k .sa-hub__num {
background: var(--color-bg-canvas);
color: var(--color-text-muted);
}
.js-hub .sa-record__row .sa-record__v {
transition: opacity 0.5s var(--ease-out);
}
.js-hub .sa-record__row.is-lit {
animation: sa-row-lit 1.4s var(--ease-out);
}
@keyframes sa-row-lit {
0% { background-color: var(--color-bg-info-soft); }
100% { background-color: transparent; }
}
/* Respiro maior entre o conteúdo e as bordas das seções desta página
(pedido do cliente, 2026-10-16). */
.page-saude .section {
padding-block: calc(var(--space-5xl) + var(--space-xl));
}
/* ---------- FAQ e separadores ---------- */
.sa-faq {
max-width: 900px;
}
/* ---------- Extensões: escolha a sua especialidade (2026-10-19) ----------
Abas acessíveis (role="tablist"), um painel por especialidade: a tela
grande numa janela do app, a lupa no recurso principal (mesma moldura de
vidro dos recortes do hero) e três recursos à direita. Sem JS, as abas
ficam escondidas e os painéis aparecem um embaixo do outro. */
.sa-spec__tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
margin-top: var(--space-2xl);
}
.sa-spec__tabs[hidden] {
display: none;
}
.sa-spec__tab {
min-height: 44px;
padding: var(--space-sm) var(--space-lg);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-full);
background: var(--color-bg-surface);
color: var(--color-text-brand-strong);
font: inherit;
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--ls-label);
cursor: pointer;
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.sa-spec__tab:hover {
border-color: var(--color-border-brand);
}
.sa-spec__tab[aria-selected="true"] {
background: var(--color-bg-info);
border-color: var(--color-bg-info);
color: var(--color-text-on-inverse);
box-shadow: var(--shadow-soft);
}
.sa-spec__tab:focus-visible {
outline: var(--control-focus-ring) solid var(--color-border-focus);
outline-offset: 5px;
}
.sa-spec__panels {
margin-top: var(--space-3xl);
}
.sa-spec__panel {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--space-4xl);
align-items: center;
}
/* Sem JS: os cinco painéis em sequência. */
.sa-spec__panel + .sa-spec__panel {
margin-top: var(--space-4xl);
}
.js-spec .sa-spec__panel + .sa-spec__panel {
margin-top: 0;
}
.sa-spec__panel[hidden] {
display: none;
}
/* Fundo vivo, igual ao do hero: a malha fica em volta da tela grande. */
.sa-spec {
--dots-mask: radial-gradient(ellipse 60% 70% at 36% 64%, black 25%, transparent 80%);
}
/* Halo azul e roxo atrás da tela, como atrás do painel do hero. */
.sa-spec__media::before {
content: "";
position: absolute;
inset: 8% 6% 4% -4%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 55% 45%, var(--glow-blue), transparent 58%),
radial-gradient(circle at 20% 85%, var(--glow-purple), transparent 50%);
filter: blur(70px);
opacity: 0.4;
animation: sa-halo 14s ease-in-out infinite alternate;
}
.sa-spec__media {
position: relative;
/* Respiro para a lupa, que passa da borda da janela. */
padding: 0 var(--space-2xl) var(--space-3xl) 0;
}
.sa-spec__window img {
display: block;
}
.sa-spec__lens {
position: absolute;
right: 0;
bottom: 0;
width: 46%;
z-index: 1;
}
.sa-spec__lens--tall {
width: 32%;
}
.sa-spec__name {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: -0.01em;
color: var(--color-text-primary);
}
.sa-spec__list {
list-style: none;
margin: var(--space-lg) 0 0;
padding: 0;
display: grid;
gap: var(--space-md);
max-width: 44ch;
}
.sa-spec__list li {
position: relative;
padding-left: var(--space-lg);
color: var(--color-text-muted);
}
.sa-spec__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--color-bg-info);
}
.sa-spec__link {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: var(--space-lg);
color: var(--color-text-brand-strong);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
}
/* Troca de especialidade: a janela entra, a lupa chega por último e os
recursos sobem um a um. Só na troca (classe is-in, recolocada pelo JS). */
.sa-spec__panel.is-in .sa-spec__window {
animation: sa-spec-in 0.6s var(--ease-out) both;
}
.sa-spec__panel.is-in .sa-spec__lens {
animation: sa-spec-lens 0.7s var(--ease-out) 0.2s both;
}
.sa-spec__panel.is-in .sa-spec__info > * {
animation: sa-spec-in 0.6s var(--ease-out) both;
}
.sa-spec__panel.is-in .sa-spec__info > :nth-child(2) { animation-delay: 0.08s; }
.sa-spec__panel.is-in .sa-spec__info > :nth-child(3) { animation-delay: 0.16s; }
@keyframes sa-spec-in {
from { opacity: 0; transform: translateY(12px); }
}
@keyframes sa-spec-lens {
from { opacity: 0; transform: translate(24px, 16px) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
.sa-spec__panel.is-in .sa-spec__window,
.sa-spec__panel.is-in .sa-spec__lens,
.sa-spec__panel.is-in .sa-spec__info > * {
animation: none;
}
}
/* As outras quatro especialidades, como etiquetas (não são abas: ainda
não há tela delas para mostrar). */
.sa-spec__more {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-sm) var(--space-md);
margin-top: var(--space-3xl);
}
.sa-spec__more-label {
font-size: var(--fs-body-sm);
font-weight: 500;
color: var(--color-text-muted);
}
.sa-spec__chips {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
}
.sa-spec__chips li {
padding: var(--space-xs) var(--space-md);
border: 1px dashed var(--color-border-brand);
border-radius: var(--radius-full);
color: var(--color-text-brand-strong);
font-size: var(--fs-caption);
font-weight: 600;
}
@media (max-width: 960px) {
.sa-spec__panel {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xl);
}
.sa-spec__media {
padding: 0 var(--space-lg) var(--space-2xl) 0;
}
.sa-spec {
--dots-mask: radial-gradient(ellipse 90% 35% at 50% 55%, black 25%, transparent 80%);
}
}
/* ---------- Segurança e LGPD ---------- */
.sa-secure__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4xl);
align-items: center;
}
.sa-secure__text .body-lg {
margin-top: var(--space-md);
color: var(--color-text-muted-inverse);
}
.sa-secure__groups {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
margin-top: var(--space-2xl);
}
.sa-secure__group-title {
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-border-subtle-inverse);
font-size: var(--fs-body);
font-weight: 600;
color: var(--color-text-on-inverse);
}
.sa-secure__list {
list-style: none;
margin: var(--space-md) 0 0;
padding: 0;
display: grid;
gap: var(--space-md);
font-size: var(--fs-body-sm);
color: var(--color-text-muted-inverse);
}
.sa-secure__list li {
position: relative;
padding-left: var(--space-xl);
}
.sa-secure__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 10px;
height: 10px;
border-radius: 2px;
background: var(--color-bg-info);
}
.sa-roles__label {
display: block;
margin-bottom: var(--space-sm);
font-size: var(--fs-body-sm);
font-weight: 500;
color: var(--color-text-muted-inverse);
}
.sa-roles {
display: inline-flex;
padding: var(--space-xs);
border-radius: var(--radius-full);
background: var(--color-bg-glass-disabled);
border: 1px solid var(--color-border-subtle-inverse);
}
.sa-roles__btn {
min-height: var(--control-height-md);
padding: 0 var(--space-lg);
border-radius: var(--radius-full);
color: var(--color-text-on-inverse);
font-size: var(--fs-label);
font-weight: 500;
transition: background var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.sa-roles__btn[aria-pressed="true"] {
background: var(--color-bg-surface);
color: var(--color-text-brand-strong);
}
.sa-roles__btn:focus-visible {
outline: var(--control-focus-ring) solid var(--color-border-focus-inverse);
outline-offset: 5px;
}
/* Card um passo acima do fundo escuro (design.md §6.2). */
.sa-vault {
margin-top: var(--space-lg);
background: var(--card-surface-dark);
border: 1px solid var(--color-border-subtle-inverse);
border-radius: var(--radius-lg);
box-shadow: var(--card-inset-dark), var(--shadow-soft-lg);
padding: var(--space-xl);
}
.sa-vault__head strong + span {
color: var(--color-text-muted-inverse);
}
.sa-vault__lock {
margin-left: auto;
width: 20px;
height: 20px;
color: var(--color-text-muted-inverse);
}
.sa-vault__fields {
margin: var(--space-lg) 0 0;
}
.sa-vault__fields > div {
display: grid;
grid-template-columns: 170px 1fr;
gap: var(--space-md);
padding-block: var(--space-md);
border-top: 1px solid var(--color-border-subtle-inverse);
font-size: var(--fs-body-sm);
}
.sa-vault__fields dt {
color: var(--color-text-muted-inverse);
}
.sa-vault__fields dd {
position: relative;
margin: 0;
color: var(--color-text-on-inverse);
transition: color var(--dur-slow) var(--ease-out);
}
/* Campo protegido (2026-10-19): na visão do atendente, o texto clínico se
borra e um selo com cadeado diz quem pode ver. Antes eram barras cinza,
que liam como "carregando", não como "protegido". */
.sa-vault__value {
display: inline-block;
transition: filter var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.sa-vault__guard {
position: absolute;
left: 0;
top: 50%;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 2px var(--space-sm);
border-radius: var(--radius-full);
background: var(--color-bg-glass);
border: 1px solid var(--color-border-subtle-inverse);
color: var(--color-text-on-inverse);
font-size: var(--fs-caption);
font-weight: 600;
white-space: nowrap;
opacity: 0;
transform: translateY(-50%) scale(0.9);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.sa-vault__guard svg {
width: 12px;
height: 12px;
}
.sa-vault[data-role="atendente"] .sa-vault__value {
filter: blur(6px);
opacity: 0.6;
user-select: none;
}
.sa-vault[data-role="atendente"] .sa-vault__guard {
opacity: 1;
transform: translateY(-50%);
}
.sa-vault__note {
margin-top: var(--space-md);
font-size: var(--fs-caption);
color: var(--color-text-muted-inverse);
}
/* Registro de acesso: cada troca de visão vira uma linha nova. */
.sa-log {
margin-top: var(--space-md);
padding: var(--space-lg);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-subtle-inverse);
background: var(--color-bg-glass-disabled);
}
.sa-log__title {
font-size: var(--fs-caption);
font-weight: 600;
color: var(--color-text-muted-inverse);
}
.sa-log__list {
list-style: none;
margin: var(--space-sm) 0 0;
padding: 0;
display: grid;
gap: var(--space-xs);
}
.sa-log__list li {
display: flex;
gap: var(--space-md);
font-size: var(--fs-body-sm);
color: var(--color-text-on-inverse);
}
.sa-log__list time {
min-width: 52px;
color: var(--color-text-muted-inverse);
font-variant-numeric: tabular-nums;
}
.sa-log__list li.is-new {
animation: sa-log-in 0.5s var(--ease-out);
}
@keyframes sa-log-in {
from { opacity: 0; transform: translateY(-6px); }
}
/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
.sa-hero {
padding-block: calc(var(--space-4xl) + var(--space-2xl)) var(--space-3xl);
}
.sa-hero__grid,
.sa-secure__grid,
.sa-secure__groups {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.sa-hero__visual {
min-height: 480px;
}
.sa-hero {
min-height: 0;
}
.sa-hero__visual {
top: 0;
height: 520px;
min-height: 0;
}
/* Em coluna única a malha ficaria atrás de todo o texto: fica só em volta
do painel, que está no pé do hero. */
.sa-hero {
--dots-mask: radial-gradient(ellipse 90% 30% at 50% 82%, black 30%, transparent 80%);
}
.sa-hero__stage {
left: 0;
}
.sa-hero__photo {
left: 50%;
}
.sa-float-wrap--a { left: 0; }
.sa-float-wrap--b { right: 0; }
.sa-float-wrap--c { left: 0; }
/* Coluna única: ficha primeiro, etapas embaixo, sem fios (os números
ligam etapa e linha). */
.sa-hub {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2xl);
}
.sa-hub__wires {
display: none;
}
.sa-hub__record {
order: -1;
}
.sa-hub__steps {
gap: var(--space-xl);
}
/* As duas listas viram uma só: entre a 3 e a 4, o mesmo espaço das outras. */
.sa-hub__steps--right {
margin-top: calc(var(--space-xl) - var(--space-2xl));
}
.sa-hub__steps--left .sa-hub__step {
flex-direction: row;
text-align: left;
}
.sa-hub__steps--left .sa-hub__step p {
margin-left: 0;
}
}
@media (max-width: 520px) {
.sa-shot {
padding: var(--space-xs);
border-radius: var(--radius-md);
}
.sa-shot img {
border-radius: var(--radius-sm);
}
.sa-record__row,
.sa-vault__fields > div {
grid-template-columns: 1fr;
gap: var(--space-xs);
}
}
@media (prefers-reduced-motion: reduce) {
.sa-shot {
animation: none;
}
}
[data-static="true"] .sa-shot {
animation: none;
}
/* =========================================================
Laço contínuo de cards (página Saúde, 2026-10-16)
Extensões e depoimentos rolam sem parar, com setas e botão de pausa. Como
setas não funcionam num laço em CSS puro, a posição é do JS (initLoops em
ui.js), que mede a distância do laço pela posição REAL em que a cópia foi
desenhada — nunca somando larguras (o bug da barra de provas). Dois grupos
idênticos no HTML; cada card carrega a própria margem à direita, inclusive
o último, para os dois grupos terem exatamente a mesma largura.
Ocupa a largura da tela inteira: o card sai pela borda da janela, nunca
cortado no meio pela borda do container.
Pausa no hover, no foco de teclado e pelo botão pausar/continuar (WCAG
2.2.2). As setas de anterior/próximo saíram por decisão do cliente nesta
rodada (design.md §7.2 atualizado).
========================================================= */
.loop__viewport {
overflow: hidden;
margin-inline: calc(50% - 50vw);
padding-block: 28px;
margin-block: -28px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.loop__track {
display: flex;
width: max-content;
will-change: transform;
}
.loop__group {
display: flex;
flex-shrink: 0;
align-items: stretch;
}
.loop__item {
flex: 0 0 auto;
margin-right: var(--space-lg);
}
/* Sem JS a faixa rola à mão; os controles só existem quando o JS assume a
posição (classe js-loop, marcada por ui.js). */
.loop:not(.js-loop) .loop__viewport {
overflow-x: auto;
}
.loop:not(.js-loop) .loop__group[aria-hidden="true"] {
display: none;
}
.loop__controls {
display: none;
justify-content: flex-end;
gap: var(--space-sm);
margin-top: var(--space-lg);
}
.js-loop .loop__controls {
display: flex;
}
@media (prefers-reduced-motion: reduce) {
.loop__viewport {
overflow-x: auto;
}
.loop__track {
animation: none;
}
.loop__group[aria-hidden="true"],
.loop__controls {
display: none;
}
}
[data-static="true"] .loop__viewport {
overflow-x: auto;
}
[data-static="true"] .loop__track {
animation: none;
}
[data-static="true"] .loop__group[aria-hidden="true"],
[data-static="true"] .loop__controls {
display: none;
}
/* =========================================================
Fundo em movimento da seção de segurança
design.md §7.2: "Seções escuras: gradiente de marca com deslocamento lento
e contínuo, muito baixa amplitude". Duas luzes (azul e roxa) derivando
devagar em sentidos opostos sobre o #191919, como reflexo de tela num
consultório à noite. Fica atrás do conteúdo e para em reduced-motion.
========================================================= */
.sa-secure {
position: relative;
overflow: hidden;
isolation: isolate;
}
.sa-secure::before,
.sa-secure::after {
content: "";
position: absolute;
width: 70vw;
height: 70vw;
max-width: 1100px;
max-height: 1100px;
border-radius: 50%;
filter: blur(90px);
pointer-events: none;
z-index: -1;
}
.sa-secure::before {
top: -35%;
left: -20%;
background: radial-gradient(circle, var(--glow-blue), transparent 65%);
animation: sa-aurora-a 26s ease-in-out infinite alternate;
}
.sa-secure::after {
bottom: -40%;
right: -15%;
background: radial-gradient(circle, var(--glow-purple), transparent 65%);
animation: sa-aurora-b 32s ease-in-out infinite alternate;
}
@keyframes sa-aurora-a {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(18%, 22%) scale(1.15); }
}
@keyframes sa-aurora-b {
from { transform: translate(0, 0) scale(1.1); }
to { transform: translate(-22%, -14%) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
.sa-secure::before,
.sa-secure::after {
animation: none;
}
}
[data-static="true"] .sa-secure::before,
[data-static="true"] .sa-secure::after {
animation: none;
}
/* =========================================================
Página Allges Serviços (2026-10-19, revisada no mesmo dia)
Regime escuro (design.md §3) sobre #191919 em todas as seções: depois do
rebalanceamento de 2026-10-16 ("menos áreas roxas cheias"), o roxo
aparece em luz (halos) e em momentos pontuais, não em faixas inteiras.
Lima só nos botões (design.md §2.2).
Cada seção tem forma e movimento próprios (design.md §7.1, repetição
zero): hero = ferramentas sugadas + contagem; problema = troca de face;
funil = cartão que anda; anúncios = conta que se resolve; equipe = raias
da semana; extensões = resposta chegando e contrato sendo escrito.
Cada cena só ganha o estado de partida com `js-sv` no (ui.js) e
chega ao final com `.is-on`, quando entra na tela. Sem JS, em ?static=1 ou
em reduced-motion, tudo nasce no estado final.
========================================================= */
.page-servicos {
background: var(--color-bg-canvas-dark);
}
.page-servicos .section {
padding-block: calc(var(--space-5xl) + var(--space-xl));
overflow-x: clip;
}
/* Luz de marca alternando de lado a cada seção, no lugar das faixas roxas:
dá ritmo sem cortar a página em listras. */
.page-servicos main > .section::before {
content: "";
position: absolute;
top: 10%;
width: 46vw;
height: 46vw;
max-width: 760px;
max-height: 760px;
border-radius: 50%;
pointer-events: none;
filter: blur(100px);
opacity: 0.32;
}
.page-servicos main > .section:nth-of-type(odd)::before {
left: -14vw;
background: radial-gradient(circle, var(--glow-purple), transparent 65%);
}
.page-servicos main > .section:nth-of-type(even)::before {
right: -14vw;
background: radial-gradient(circle, var(--glow-blue), transparent 65%);
}
.page-servicos main > .section > .container {
position: relative;
z-index: 1;
}
.page-servicos .sa-kicker,
.page-servicos .section-head .sa-kicker {
color: var(--color-text-muted-inverse);
}
.page-servicos .section-head p {
text-wrap: balance;
}
.sv-muted {
margin-top: var(--space-md);
color: var(--color-text-muted-inverse);
}
/* ---- Hero ---- */
.sv-hero {
--dots-color: var(--dot-light);
--dots-mask: radial-gradient(ellipse 60% 80% at 75% 50%, black 25%, transparent 80%);
position: relative;
overflow: hidden;
min-height: max(100vh, 820px);
display: flex;
align-items: center;
padding-block: calc(var(--space-5xl) + var(--space-xl)) var(--space-4xl);
isolation: isolate;
}
.sv-hero__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: var(--space-4xl);
align-items: center;
}
.sv-hero__grid::before {
content: "";
position: absolute;
inset: 0 -10% 0 40%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 55% 45%, var(--glow-blue), transparent 55%),
radial-gradient(circle at 30% 80%, var(--glow-purple), transparent 50%);
filter: blur(100px);
opacity: 0.3;
animation: sa-halo 14s ease-in-out infinite alternate;
}
.sv-hero .pill-badge {
background: var(--white-a08);
color: var(--color-text-on-inverse);
}
.sv-hero__title {
margin-top: var(--space-lg);
text-wrap: balance;
}
@media (max-width: 1500px) {
.sv-hero__title {
font-size: var(--fs-display-2);
}
}
.sv-hero__accent {
color: var(--color-text-brand-on-dark);
}
.sv-hero__sub {
max-width: 50ch;
margin-top: var(--space-lg);
color: var(--color-text-muted-inverse);
}
.sv-hero__cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-top: var(--space-xl);
}
.sv-hero__note {
margin-top: var(--space-md);
color: var(--color-text-muted-inverse);
}
.sv-hero__proof {
display: flex;
align-items: center;
gap: var(--space-md);
max-width: 460px;
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border-subtle-inverse);
font-size: var(--fs-body-sm);
font-weight: 500;
text-wrap: balance;
}
.sv-hero .sa-hero__avatars img {
border-color: var(--color-bg-canvas-dark);
}
.sv-hero__stage {
position: relative;
container-type: inline-size;
}
/* Direção A (2026-10-20): a pessoa ocupa o palco inteiro, ancorada na
base, espelhada para olhar para dentro da página. Os dados são três
vidros pequenos flutuando sobre ela, em profundidades diferentes. */
.sv-hero__stage {
height: min(76vh, 700px);
min-height: 560px;
}
/* As quatro ferramentas, espalhadas à esquerda do palco, são sugadas para
o vidro do "Sobrou no mês" uma vez na carga e somem. --x em cqw (largura
do palco). Decorativo; sem movimento elas nem aparecem. */
.sv-suck {
position: absolute;
z-index: 2;
top: 55%;
left: 30%;
width: 52px;
height: 52px;
margin: -26px 0 0 -26px;
border-radius: var(--radius-md);
background: var(--color-bg-surface);
box-shadow: var(--shadow-soft-lg);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
animation: sv-suck 1.6s var(--ease-out) both;
animation-delay: calc(0.6s + var(--i) * 0.22s);
}
.sv-suck img {
width: 28px;
height: 28px;
}
@keyframes sv-suck {
0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.8); }
25% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
100% { opacity: 0; transform: translate(0, 0) scale(0.2); }
}
.sv-hero__person {
position: absolute;
z-index: 0;
bottom: 0;
right: -4cqw;
height: 104%;
width: auto;
transform: scaleX(-1);
/* Recorte em PNG transparente (fundo removido no Canva, 2026-10-20):
a pessoa fica nítida e opaca. Só o pé some no fundo, para não terminar
num corte reto. */
-webkit-mask-image: linear-gradient(#000 78%, transparent);
mask-image: linear-gradient(#000 78%, transparent);
filter: drop-shadow(0 30px 60px rgba(42, 0, 129, 0.45));
pointer-events: none;
}
/* .sv-hero__stage na frente: o material de vidro (.sv-board, mais abaixo
no arquivo) declara position: relative e venceria. */
.sv-hero__stage .sv-float {
position: absolute;
z-index: 1;
animation: sa-bob 7s ease-in-out infinite;
}
.sv-board.sv-float {
padding: var(--space-lg);
/* Mesma receita dos recortes de vidro do hero da Saúde (.sa-shot), que o
cliente aprovou: véu em degradê do claro para o quase transparente e
borda clara inteira por dentro. E os cartões ficam sobre a pessoa, para
o desfoque ter o que borrar. */
background: linear-gradient(160deg, var(--white-a18), var(--white-a04) 55%, transparent);
-webkit-backdrop-filter: blur(28px) saturate(180%);
backdrop-filter: blur(28px) saturate(180%);
box-shadow:
inset 0 0 0 1px var(--white-a30),
inset 0 1px 0 var(--white-a45),
var(--shadow-glass);
}
.sv-float--sobra {
left: 16cqw;
top: 44%;
width: 54cqw;
padding: var(--space-lg) var(--space-xl) !important;
}
.sv-float--mix {
left: 4cqw;
top: 10%;
width: 40cqw;
animation-delay: -2.5s;
}
.sv-float--mix .sv-board__label {
margin-top: 0;
}
.sv-float--mix .sv-bars li {
grid-template-columns: minmax(0, 1fr) 4.6rem;
row-gap: var(--space-xs);
}
.sv-float--mix .sv-bars li i {
grid-column: 1 / -1;
grid-row: 2;
}
.sv-float--chip {
right: 4cqw;
bottom: 7%;
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg) !important;
border-radius: var(--radius-full) !important;
font-size: var(--fs-body-sm);
color: var(--color-text-muted-inverse);
animation-delay: -4.5s;
}
.sv-float--chip strong {
display: block;
color: var(--color-text-on-inverse);
font-weight: 600;
}
.sv-chip__check {
position: relative;
flex: none;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--color-bg-info);
}
.sv-chip__check::after {
content: "";
position: absolute;
left: 12px;
top: 8px;
width: 7px;
height: 13px;
border: solid var(--color-text-on-inverse);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* O "Sobrou no mês" deixa de ser uma caixa dentro de outra: o próprio
vidro carrega o número. */
.sv-float--sobra .sv-sobra__value {
font-size: clamp(2.5rem, 4vw, 3.5rem);
}
.sv-float--sobra .sv-sobra__value {
white-space: nowrap;
}
/* Coluna mais estreita (até ~1500px): o vidro da receita sai, o "Sobrou"
ganha a largura e sobe; o selo das comissões fica no pé. */
@media (max-width: 1500px) {
.sv-float--mix { display: none; }
.sv-float--sobra { width: 70cqw; top: 34%; }
}
@media (prefers-reduced-motion: reduce) {
.sv-float { animation: none; }
}
[data-static="true"] .sv-float { animation: none; }
.sv-sobra {
padding: var(--space-lg);
border-radius: var(--radius-md);
background: var(--highlight-gradient-d);
box-shadow: var(--shadow-soft-lg);
}
.sv-sobra__label {
display: block;
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--color-text-muted-inverse);
}
.sv-sobra__value {
display: block;
margin-top: var(--space-xs);
font-size: clamp(2.25rem, 3.6vw, 3.25rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: var(--ls-display);
font-variant-numeric: tabular-nums;
}
.sv-sobra__calc {
display: block;
margin-top: var(--space-sm);
font-size: var(--fs-body-sm);
color: var(--color-text-muted-inverse);
}
/* Entrada do hero: escalonada, só na carga. */
.sv-in {
animation: sv-rise 0.9s var(--ease-out) both;
}
.sv-hero__text > .sv-in:nth-child(2) { animation-delay: 0.08s; }
.sv-hero__text > .sv-in:nth-child(3) { animation-delay: 0.16s; }
.sv-hero__text > .sv-in:nth-child(4) { animation-delay: 0.24s; }
.sv-hero__text > .sv-in:nth-child(5) { animation-delay: 0.3s; }
.sv-hero__text > .sv-in:nth-child(6) { animation-delay: 0.36s; }
.sv-hero__stage.sv-in { animation-delay: 0.3s; }
@keyframes sv-rise {
from { opacity: 0; transform: translateY(18px); }
}
/* ---- Vidro escuro (2026-10-19) ----
Só nas telas principais da página, nunca aninhado. O que faz parecer
vidro (design.md §6.1): o desfoque COM saturação, uma luz entrando pelo
canto de cima, e a quina feita de brilho especular em degradê (::before,
anel de 1px recortado por máscara) em vez de uma borda chapada de 1px,
que era o que dava a "cara de IA". Atrás de cada um há luz de marca
(halos da seção) para o vidro ter o que refratar. */
.sv-board,
.sv-swap__after,
.sv-kanban__inner,
.sv-calc,
.sv-week,
.sv-ticket,
.sv-gen {
position: relative;
isolation: isolate;
border: 0;
border-radius: var(--radius-lg);
background:
radial-gradient(120% 90% at 0% 0%, var(--white-a12), transparent 55%),
linear-gradient(160deg, var(--white-a08), var(--white-a04) 55%, transparent);
-webkit-backdrop-filter: blur(var(--control-glass-blur)) saturate(180%);
backdrop-filter: blur(var(--control-glass-blur)) saturate(180%);
box-shadow: inset 0 1px 0 var(--white-a18), var(--shadow-glass);
color: var(--color-text-on-inverse);
}
.sv-board::before,
.sv-swap__after::before,
.sv-kanban__inner::before,
.sv-calc::before,
.sv-week::before,
.sv-ticket::before,
.sv-gen::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
padding: 1px;
border-radius: inherit;
background:
radial-gradient(220px circle at var(--gx, -999px) var(--gy, -999px), var(--white-a90), transparent 70%),
linear-gradient(150deg, var(--white-a45), var(--white-a08) 30%, transparent 55%, var(--white-a12));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
pointer-events: none;
}
.sv-board {
padding: var(--space-xl);
}
/* Luz de marca logo atrás das telas de vidro: é ela que atravessa o vidro
(blur + saturate) e dá a cor refratada. Sem cor atrás, vidro escuro lê
como cinza fumê. Fica na metade de baixo do container, onde as telas
estão, e respira devagar como o halo do hero. */
.sv-tools > .container::after,
.sv-funnel > .container::after,
.sv-ads > .container::after,
.sv-team > .container::after,
.sv-ext > .container::after {
content: "";
position: absolute;
z-index: -1;
left: 15%;
right: 15%;
top: 45%;
bottom: 0;
pointer-events: none;
background:
radial-gradient(closest-side at 30% 55%, var(--glow-blue), transparent),
radial-gradient(closest-side at 72% 45%, var(--glow-purple), transparent);
filter: blur(60px);
opacity: 0.9;
animation: sa-halo 16s ease-in-out infinite alternate;
}
.sv-funnel > .container::after,
.sv-team > .container::after {
top: 50%;
}
.sv-board__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding-bottom: var(--space-md);
margin-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border-subtle-inverse);
}
.sv-board__title {
font-size: var(--fs-body-sm);
font-weight: 600;
}
.sv-board__chip {
padding: 2px var(--space-sm);
border-radius: var(--radius-full);
background: var(--white-a08);
font-size: var(--fs-caption);
font-weight: 600;
color: var(--color-text-muted-inverse);
white-space: nowrap;
}
.sv-board__label {
margin-top: var(--space-xl);
font-size: var(--fs-caption);
font-weight: 600;
color: var(--color-text-muted-inverse);
}
.sv-board__foot {
display: flex;
justify-content: space-between;
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border-subtle-inverse);
font-size: var(--fs-body-sm);
color: var(--color-text-muted-inverse);
}
.sv-board__foot strong {
color: var(--color-text-on-inverse);
}
.sv-bars {
list-style: none;
margin: var(--space-md) 0 0;
padding: 0;
display: grid;
gap: var(--space-md);
}
.sv-bars li {
display: grid;
grid-template-columns: 8.5rem minmax(0, 1fr) 5.5rem;
gap: var(--space-md);
align-items: center;
font-size: var(--fs-body-sm);
}
.sv-bars b {
font-weight: 600;
text-align: right;
font-variant-numeric: tabular-nums;
}
.sv-bars i {
position: relative;
display: block;
height: 8px;
border-radius: var(--radius-full);
background: var(--color-bg-glass-disabled);
overflow: hidden;
}
.sv-bars i::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: var(--v);
border-radius: inherit;
background: var(--highlight-gradient-h);
}
/* ---- O problema: troca de face ---- */
.sv-swaps {
list-style: none;
margin: var(--space-3xl) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-md);
}
.sv-swap {
display: grid;
min-height: 220px;
border-radius: var(--radius-lg);
overflow: hidden;
}
.sv-swap__face {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-lg);
border-radius: inherit;
transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}
.sv-swap__face strong {
font-size: var(--fs-body-lg);
font-weight: 600;
line-height: var(--lh-heading);
}
.sv-swap__before {
border: 1px dashed var(--color-border-subtle-inverse);
color: var(--color-text-on-inverse);
}
.sv-swap__before > span:last-child {
font-size: var(--fs-body-sm);
color: var(--color-text-muted-inverse);
}
.sv-swap__before .sv-tool__icon {
margin-bottom: var(--space-sm);
}
.sv-swap__after {
border-radius: inherit;
}
.sv-swap__mark {
width: 40px;
height: 40px;
margin-bottom: var(--space-sm);
border-radius: var(--radius-sm);
background: var(--highlight-gradient-d);
display: flex;
align-items: center;
justify-content: center;
}
.sv-swap__was {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
margin-top: auto;
padding-top: var(--space-md);
font-size: var(--fs-caption);
font-weight: 500;
color: var(--color-text-muted-inverse);
}
.sv-swap__was img {
flex: none;
width: 16px;
height: 16px;
padding: 2px;
border-radius: 4px;
background: var(--color-bg-surface);
}
.sv-tool__icon {
flex: none;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: var(--color-bg-surface);
display: flex;
align-items: center;
justify-content: center;
}
.sv-tool__icon img {
width: 26px;
height: 26px;
}
/* Sem JS a face "antes" nem aparece. */
.sv-swap__before {
opacity: 0;
visibility: hidden;
}
.js-sv .sv-swap__before {
visibility: visible;
}
.js-sv .sv-tools:not(.is-on) .sv-swap__before {
opacity: 1;
}
.js-sv .sv-tools:not(.is-on) .sv-swap__after {
opacity: 0;
transform: translateY(24px);
}
.js-sv .sv-tools.is-on .sv-swap__before {
opacity: 0;
transform: translateY(-24px) scale(0.96);
}
.js-sv .sv-tools .sv-swap__face {
transition-delay: calc(var(--i, 0) * 0.45s + 0.4s);
}
.js-sv .sv-tools.is-on .sv-swap__after {
transition-delay: calc(var(--i, 0) * 0.45s + 0.55s);
}
.sv-swap:nth-child(1) .sv-swap__face { --i: 0; }
.sv-swap:nth-child(2) .sv-swap__face { --i: 1; }
.sv-swap:nth-child(3) .sv-swap__face { --i: 2; }
.sv-swap:nth-child(4) .sv-swap__face { --i: 3; }
/* ---- Para quem é ----
Retratos sem caixa: a foto é o elemento, com a legenda sobre a base dela.
Alturas desencontradas (2ª e 4ª descem) para não virar grade de cards
iguais (design.md §9.1). Entram subindo, um de cada vez. */
.sv-who__grid {
list-style: none;
margin: var(--space-3xl) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-lg);
align-items: start;
}
.sv-who__item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
isolation: isolate;
box-shadow: var(--shadow-glass);
transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out);
}
.sv-who__item:nth-child(even) {
margin-top: var(--space-3xl);
}
.sv-who__item img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 560 / 694;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.sv-who__item:hover img {
transform: scale(1.04);
}
/* Escurece a base da foto para a legenda ficar legível. */
.sv-who__item::after {
content: "";
position: absolute;
inset: 45% 0 0;
z-index: 0;
background: linear-gradient(transparent, var(--color-bg-canvas-dark) 85%);
pointer-events: none;
}
/* Legenda num bloco só, preso à base: o título fica sempre colado ao
texto, qualquer que seja o número de linhas. */
.sv-who__cap {
position: absolute;
z-index: 1;
left: var(--space-lg);
right: var(--space-lg);
bottom: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.sv-who__cap strong {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.15;
}
.sv-who__cap span {
max-width: 30ch;
font-size: var(--fs-body-sm);
line-height: 1.4;
color: var(--color-text-muted-inverse);
}
.js-sv .sv-who:not(.is-on) .sv-who__item {
opacity: 0;
transform: translateY(40px);
}
.js-sv .sv-who.is-on .sv-who__item {
transition-delay: calc(var(--i) * 0.15s + 0.1s);
}
img.sv-task__who {
object-fit: cover;
box-shadow: 0 0 0 2px var(--color-bg-canvas-dark);
}
/* ---- Funil ---- */
.sv-funnel__head {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: var(--space-4xl);
align-items: end;
}
.sv-points {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-lg);
color: var(--color-text-muted-inverse);
}
.sv-points li {
padding-left: var(--space-lg);
border-left: 2px solid var(--color-border-subtle-inverse);
}
.sv-points strong {
display: block;
margin-bottom: var(--space-xs);
color: var(--color-text-on-inverse);
font-weight: 600;
}
.sv-kanban {
margin-top: var(--space-3xl);
}
.sv-kanban__inner {
padding: var(--space-md);
}
.sv-kanban__cols {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sv-col {
min-height: 320px;
padding: var(--space-sm) var(--space-md) var(--space-md);
}
.sv-col + .sv-col {
border-left: 1px solid var(--white-a08);
}
.sv-col__title {
display: flex;
justify-content: space-between;
font-size: var(--fs-body-sm);
font-weight: 600;
}
.sv-col__title em {
font-style: normal;
font-variant-numeric: tabular-nums;
color: var(--color-text-muted-inverse);
}
.sv-card {
margin-top: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
background: var(--white-a08);
font-size: var(--fs-body-sm);
}
.sv-card strong {
display: block;
font-weight: 600;
}
.sv-src {
display: inline-block;
margin-top: var(--space-xs);
padding: 0 var(--space-sm);
border-radius: var(--radius-full);
background: var(--white-a08);
font-size: var(--fs-caption);
color: var(--color-text-muted-inverse);
}
.sv-traveler {
position: absolute;
left: var(--space-md);
bottom: var(--space-md);
width: calc((100% - 2 * var(--space-md)) / 4);
padding: var(--space-md);
transform: translateX(calc(var(--col, 3) * 100%));
transition: transform 0.9s var(--ease-out);
}
.sv-card--live {
margin: 0;
background: var(--highlight-gradient-d);
box-shadow: inset 0 1px 0 var(--white-a18), var(--shadow-glass);
}
.sv-src--ig {
background: var(--color-bg-info);
color: var(--color-text-on-inverse);
}
.sv-card__value {
display: block;
margin-top: var(--space-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* O que aconteceu na etapa, preso ao cartão. */
.sv-card__event {
display: block;
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--white-a18);
font-size: var(--fs-caption);
color: var(--color-text-muted-inverse);
}
.sv-card__event.is-new {
animation: sv-event 0.5s var(--ease-out);
}
@keyframes sv-event {
from { opacity: 0; transform: translateY(4px); }
}
/* ---- Anúncios: a conta ---- */
.sv-calc {
max-width: 1080px;
margin: var(--space-3xl) auto 0;
padding: var(--space-xl) var(--space-2xl);
}
.sv-calc__row {
display: grid;
grid-template-columns: 9rem 1fr auto 1fr auto 1.2fr;
gap: var(--space-lg);
align-items: end;
padding-block: var(--space-lg);
}
.sv-calc__row + .sv-calc__row {
border-top: 1px solid var(--color-border-subtle-inverse);
}
.sv-calc__who {
align-self: center;
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--fs-body-sm);
font-weight: 600;
}
/* Logos oficiais, arquivos inteiros (icons/meta.svg, icons/google-ads-mark.svg). */
.sv-calc__who img {
flex: none;
width: 32px;
height: 24px;
object-fit: contain;
}
.sv-calc__term {
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 600;
line-height: 1.1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sv-calc__term small {
display: block;
margin-bottom: var(--space-xs);
font-size: var(--fs-caption);
font-weight: 600;
color: var(--color-text-muted-inverse);
}
.sv-calc__op {
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.1;
color: var(--color-text-muted-inverse);
}
.sv-calc__res {
font-size: clamp(2.25rem, 3.6vw, 3rem);
font-weight: 700;
letter-spacing: var(--ls-display);
}
.sv-calc__verdict {
margin-top: var(--space-md);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border-subtle-inverse);
color: var(--color-text-muted-inverse);
}
.sv-calc__term,
.sv-calc__op {
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.js-sv .sv-ads:not(.is-on) .sv-calc__term,
.js-sv .sv-ads:not(.is-on) .sv-calc__op {
opacity: 0;
transform: translateY(10px);
}
.js-sv .sv-ads.is-on .sv-calc__term,
.js-sv .sv-ads.is-on .sv-calc__op {
transition-delay: calc(var(--k) * 0.28s + 0.2s);
}
.js-sv .sv-ads.is-on .sv-calc__row + .sv-calc__row .sv-calc__term,
.js-sv .sv-ads.is-on .sv-calc__row + .sv-calc__row .sv-calc__op {
transition-delay: calc(var(--k) * 0.28s + 1.6s);
}
.sv-dot {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-weight: 600;
}
.sv-dot::before {
content: "";
width: 10px;
height: 10px;
border-radius: var(--radius-full);
}
.sv-dot--meta::before { background: var(--color-data-1); }
.sv-dot--google::before { background: var(--color-data-2); }
.sv-also {
max-width: 62ch;
margin: var(--space-xl) auto 0;
text-align: center;
font-size: var(--fs-body-sm);
color: var(--color-text-muted-inverse);
}
/* ---- Equipe: raias da semana ---- */
.sv-week {
margin-top: var(--space-3xl);
padding: var(--space-xl);
}
.sv-week__days,
.sv-lane {
display: grid;
grid-template-columns: 9rem minmax(0, 1fr);
gap: var(--space-md);
}
/* A primeira coluna desconta o espaço entre o nome e a raia, para cada dia
ficar sobre a sua faixa. */
.sv-week__days {
grid-template-columns: calc(9rem + var(--space-md)) repeat(5, minmax(0, 1fr));
gap: 0;
padding-bottom: var(--space-sm);
font-size: var(--fs-caption);
font-weight: 600;
color: var(--color-text-muted-inverse);
}
.sv-week__days > span + span {
padding-left: var(--space-sm);
}
.sv-week__days b {
font-weight: 600;
color: var(--color-text-on-inverse);
}
.sv-week__days .is-today {
color: var(--color-text-on-inverse);
}
/* Legenda dos setores, em cima da semana. */
.sv-week__legend {
list-style: none;
margin: 0 0 var(--space-lg);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-lg);
font-size: var(--fs-caption);
color: var(--color-text-muted-inverse);
}
.sv-week__legend li {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.sv-week__legend li::before {
content: "";
width: 10px;
height: 10px;
border-radius: 3px;
background: var(--sector);
}
.sv-week__legend .sv-week__late::before {
background: repeating-linear-gradient(135deg, var(--color-data-2) 0 3px, transparent 3px 6px);
}
.sv-week__inner {
position: relative;
}
/* Linha do "agora": quarta à tarde, atravessando as raias. */
/* Passa por baixo das tarefas (z 1 contra 2), para não riscar o texto. */
.sv-week__now {
position: absolute;
z-index: 1;
top: 4.4rem;
bottom: 0;
left: calc(9rem + var(--space-md) + (100% - 9rem - var(--space-md)) * 0.54);
width: 2px;
background: var(--color-text-on-inverse);
opacity: 0.85;
pointer-events: none;
}
.sv-week__now i {
position: absolute;
top: -1.4rem;
left: 50%;
transform: translateX(-50%);
padding: 1px var(--space-sm);
border-radius: var(--radius-full);
background: var(--color-text-on-inverse);
color: var(--color-text-brand-strong);
font-size: var(--fs-caption);
font-style: normal;
font-weight: 700;
}
.sv-lane {
align-items: center;
padding-block: var(--space-md);
border-top: 1px solid var(--white-a08);
}
.sv-lane__who {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--fs-body-sm);
font-weight: 600;
line-height: 1.2;
}
.sv-lane__who small {
display: block;
font-size: var(--fs-caption);
font-weight: 500;
color: var(--color-text-muted-inverse);
}
.sv-lane__who img.sv-task__who {
width: 40px;
height: 40px;
}
.sv-task__who {
flex: none;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--color-bg-info);
font-size: var(--fs-caption);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* Trilho de 5 dias com as linhas de cada dia ao fundo. */
.sv-lane__track {
position: relative;
height: 76px;
background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--white-a08) calc(20% - 1px) 20%);
}
.sv-block {
position: absolute;
top: 6px;
bottom: 6px;
left: calc(var(--s) * 20%);
width: calc(var(--w) * 20% - 6px);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
/* Cor do setor como luz, não como bloco chapado: um véu da cor + uma
barra cheia na borda esquerda. */
background:
linear-gradient(90deg, color-mix(in srgb, var(--sector) 42%, transparent), color-mix(in srgb, var(--sector) 18%, transparent)),
var(--color-bg-canvas-dark);
box-shadow: inset 3px 0 0 var(--sector), inset 0 1px 0 var(--white-a18);
padding-left: calc(var(--space-sm) + 4px);
overflow: visible;
font-size: var(--fs-caption);
line-height: 1.3;
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.sv-block strong {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: var(--fs-body-sm);
font-weight: 600;
}
.sv-block > span {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-text-muted-inverse);
}
.sv-block {
z-index: 2;
}
.sv-block--com { --sector: var(--color-data-1); }
.sv-block--mkt { --sector: var(--color-data-2); }
.sv-block--fin { --sector: var(--purple-700); }
.sv-block--pos { --sector: var(--purple-200); }
/* O trecho além do estimado: listrado, saindo da caixa. */
.sv-block--late::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: calc(var(--o) / var(--w) * 100%);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: repeating-linear-gradient(135deg, var(--color-data-2) 0 6px, var(--color-bg-inverse) 6px 12px);
transform-origin: left;
transition: transform 0.7s var(--ease-out);
}
.sv-block__over {
position: absolute;
top: -12px;
left: calc(100% + var(--o) / var(--w) * 100% - 4px);
padding: 2px var(--space-sm);
border-radius: var(--radius-full);
background: var(--color-bg-surface);
color: var(--color-text-brand-strong);
font-size: var(--fs-caption);
font-style: normal;
font-weight: 700;
white-space: nowrap;
transform: translateX(-50%);
transition: opacity 0.5s var(--ease-out);
}
.js-sv .sv-team:not(.is-on) .sv-block {
opacity: 0;
transform: translateX(-16px);
}
.js-sv .sv-team.is-on .sv-block {
transition-delay: calc(var(--i) * 0.25s + 0.2s);
}
.js-sv .sv-team:not(.is-on) .sv-block--late::after {
transform: scaleX(0);
}
.js-sv .sv-team.is-on .sv-block--late::after {
transition-delay: 1.5s;
}
.js-sv .sv-team:not(.is-on) .sv-block__over {
opacity: 0;
}
.js-sv .sv-team.is-on .sv-block__over {
transition-delay: 2.1s;
}
/* ---- Extensões ---- */
.sv-ext__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-4xl);
margin-top: var(--space-3xl);
}
.sv-ext__item {
display: flex;
flex-direction: column;
}
.sv-ext__name {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: -0.01em;
}
.sv-ext__item .sa-spec__link {
align-self: flex-start;
color: var(--color-text-on-inverse);
}
.sv-ticket,
.sv-gen {
flex: 1;
margin-top: var(--space-xl);
padding: var(--space-lg);
}
.sv-ticket__head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--fs-body-sm);
font-weight: 600;
}
.sv-ticket__msg {
margin-top: var(--space-md);
max-width: 85%;
padding: var(--space-md);
border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-sm);
background: var(--white-a08);
font-size: var(--fs-body-sm);
}
.sv-ticket__msg strong {
display: block;
margin-bottom: 2px;
font-size: var(--fs-caption);
color: var(--color-text-muted-inverse);
}
.sv-ticket__msg--team {
margin-left: auto;
border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md);
background: var(--color-bg-info);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.sv-ticket__msg--team strong {
color: var(--color-text-on-inverse);
}
/* "Digitando…" antes da resposta chegar. Só existe com movimento. */
.sv-ticket__typing {
display: none;
}
.js-sv .sv-ticket__typing {
display: inline-flex;
gap: 4px;
margin: var(--space-md) 0 0 auto;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-full);
background: var(--color-bg-info);
width: fit-content;
float: right;
transition: opacity 0.3s ease;
}
.js-sv .sv-ticket__typing i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-text-on-inverse);
animation: sv-typing 1s ease-in-out infinite;
}
.js-sv .sv-ticket__typing i:nth-child(2) { animation-delay: 0.15s; }
.js-sv .sv-ticket__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sv-typing {
0%, 100% { opacity: 0.35; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-2px); }
}
.js-sv .sv-ext:not(.is-on) .sv-ticket__msg--team {
display: none;
}
.js-sv .sv-ext.is-on .sv-ticket__typing {
display: none;
}
.js-sv .sv-ext.is-on .sv-ticket__msg--team {
animation: sv-event 0.5s var(--ease-out);
}
.sv-gen__in {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
margin-top: var(--space-lg);
}
.sv-gen__in span {
padding-left: var(--space-md);
border-left: 2px solid var(--white-a18);
font-size: var(--fs-body-sm);
font-weight: 600;
}
.sv-gen__in small {
display: block;
font-size: var(--fs-caption);
font-weight: 500;
color: var(--color-text-muted-inverse);
}
.sv-gen__out {
display: grid;
gap: var(--space-sm);
margin-top: var(--space-md);
padding: var(--space-md);
border-radius: var(--radius-sm);
background: var(--color-bg-surface);
color: var(--color-text-primary);
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
}
/* O contrato é "escrito" linha a linha: cada linha se abre da esquerda. */
.sv-gen__out span {
transition: clip-path 0.9s steps(28, end);
}
.js-sv .sv-ext:not(.is-on) .sv-gen__out span {
clip-path: inset(0 100% 0 0);
}
.js-sv .sv-ext.is-on .sv-gen__out span {
clip-path: inset(0 0 0 0);
transition-delay: calc(var(--k) * 0.95s + 0.6s);
}
/* ---- FAQ no escuro ---- */
.sv-faq .faq {
gap: 0;
}
.sv-faq .faq__item {
background: transparent;
border: 0;
border-bottom: 1px solid var(--white-a08);
border-radius: 0;
box-shadow: none;
}
.sv-faq .faq__item:hover,
.sv-faq .faq__item.is-open {
border-color: var(--white-a18);
box-shadow: none;
}
.sv-faq .faq__trigger {
padding-inline: 0;
}
/* Sem o spotlight retangular dos cartões (aqui é lista, não caixa): no
hover, a divisória acende do lado do mouse e o "+" ganha fundo. */
.sv-faq .faq__item::before {
inset: auto 0 -1px;
height: 1px;
border-radius: 0;
background: radial-gradient(240px circle at var(--mx, 50%) 50%, var(--white-a90), transparent 70%);
}
.sv-faq .faq__item:hover .faq__mark {
background: var(--white-a18);
}
.sv-faq .faq__mark {
background: var(--white-a08);
border-color: transparent;
color: var(--color-text-on-inverse);
}
.sv-faq .faq__mark svg {
color: var(--color-text-on-inverse);
}
.sv-faq .faq__trigger[aria-expanded="true"] .faq__mark svg {
color: var(--color-text-accent);
}
.sv-faq .faq__tag {
border-color: transparent;
background: var(--white-a04);
color: var(--color-text-muted-inverse);
}
.sv-faq .faq__panel p {
color: var(--color-text-muted-inverse);
}
/* ---- Movimento desligado ---- */
@media (prefers-reduced-motion: reduce) {
.sv-in,
.sv-hero__grid::before,
.page-servicos .container::after {
animation: none;
}
.sv-suck {
display: none;
}
}
[data-static="true"] .sv-in,
[data-static="true"] .sv-hero__grid::before,
[data-static="true"] .page-servicos .container::after {
animation: none;
}
[data-static="true"] .sv-suck {
display: none;
}
/* ---- Responsivo ---- */
@media (max-width: 1100px) {
.sv-swaps,
.sv-who__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.sv-hero {
min-height: 0;
padding-block: calc(var(--space-4xl) + var(--space-2xl)) var(--space-3xl);
--dots-mask: radial-gradient(ellipse 90% 30% at 50% 80%, black 25%, transparent 80%);
}
.sv-hero__grid,
.sv-funnel__head,
.sv-ext__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2xl);
}
.sv-suck {
display: none;
}
/* Celular: a pessoa no alto à direita e os vidros em cascata, cada um
deslocado do anterior, sem se cobrirem. O de receita por serviço sai
(o número que importa é o que sobrou). */
.sv-hero__stage {
height: 150cqw;
min-height: 0;
}
.sv-hero__person {
right: -14cqw;
height: 92%;
bottom: auto;
top: 0;
}
.sv-float--mix { display: none; }
.sv-float--sobra { width: 78cqw; top: 52%; left: 0; }
.sv-float--chip { right: 0; bottom: 0; }
/* Funil e semana continuam inteiros e rolam de lado. */
.sv-kanban,
.sv-week {
overflow-x: auto;
scrollbar-width: none;
}
.sv-kanban {
margin-inline: calc(-1 * var(--container-pad));
padding-inline: var(--container-pad);
}
.sv-kanban__inner {
min-width: 640px;
}
.sv-week__inner {
min-width: 680px;
}
.sv-calc {
padding: var(--space-lg);
}
.sv-calc__row {
grid-template-columns: repeat(5, auto);
justify-content: start;
gap: var(--space-sm) var(--space-md);
}
.sv-calc__who {
grid-column: 1 / -1;
}
}
@media (max-width: 520px) {
.sv-board {
padding: var(--space-lg);
}
.sv-swaps {
grid-template-columns: minmax(0, 1fr);
}
.sv-swap {
min-height: 0;
}
.sv-bars li {
grid-template-columns: minmax(0, 1fr) 5rem;
row-gap: var(--space-xs);
}
.sv-bars li i {
grid-column: 1 / -1;
grid-row: 2;
}
.sv-calc__term,
.sv-calc__op {
font-size: var(--fs-body-lg);
}
.sv-calc__res {
font-size: var(--fs-h3);
}
.sv-gen__in {
grid-template-columns: minmax(0, 1fr);
}
}
/* =========================================================
Página de Planos (2026-10-20)
Referências do Pinterest: colunas da tabela alinhadas aos planos, com o
cabeçalho grudado ao rolar; destaque único no recomendado (design.md
§6.5: degradê de destaque, três cartões do mesmo tamanho nesta página);
calculadora "Monte seu plano" com os preços reais das extensões.
========================================================= */
.page-planos .section {
padding-block: calc(var(--space-5xl) + var(--space-xl));
}
.pl-hero {
--dots-mask: radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 80%);
padding-block: calc(var(--space-5xl) + var(--space-2xl)) var(--space-4xl);
overflow: hidden;
}
.pl-hero .section-head p.body-lg {
text-wrap: balance;
}
/* ---- Cartões ---- */
.pl-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
align-items: stretch;
margin-top: var(--space-3xl);
}
.pl-card {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-xl);
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
box-shadow: var(--card-inset-light), var(--shadow-soft);
transition: box-shadow 0.4s var(--ease-out);
}
.pl-card:hover {
box-shadow: var(--card-inset-light), var(--shadow-soft-lg);
}
.pl-card--rec {
background: var(--highlight-gradient-d);
border-color: transparent;
color: var(--color-text-on-inverse);
box-shadow: inset 0 1px 0 var(--white-a18), var(--shadow-glass);
--spot: rgba(255, 255, 255, 0.12);
}
.pl-card__badge {
position: absolute;
top: var(--space-xl);
right: var(--space-xl);
padding: 2px var(--space-md);
border-radius: var(--radius-full);
background: var(--color-bg-accent);
color: var(--color-text-on-accent);
font-size: var(--fs-caption);
font-weight: 700;
}
.pl-card__name {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 700;
line-height: 1.1;
}
.pl-card__desc {
margin-top: var(--space-sm);
min-height: 3em;
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
}
.pl-card--rec .pl-card__desc,
.pl-card--rec .pl-card__lead,
.pl-card--rec .pl-card__per,
.pl-card--rec .pl-card__cur {
color: var(--color-text-muted-inverse);
}
.pl-card__price {
display: flex;
align-items: baseline;
gap: var(--space-xs);
margin-top: var(--space-xl);
font-family: var(--font-body);
font-variant-numeric: tabular-nums;
}
.pl-card__cur {
font-size: var(--fs-body-lg);
font-weight: 600;
color: var(--color-text-muted);
}
.pl-card__price strong {
font-size: clamp(2.5rem, 4vw, 3.25rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.03em;
}
.pl-card__per {
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
}
.pl-card__cta {
margin-top: var(--space-xl);
width: 100%;
justify-content: center;
}
.pl-card__lead {
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border-subtle);
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--color-text-muted);
}
.pl-card--rec .pl-card__lead {
border-top-color: var(--white-a18);
}
.pl-card__list {
list-style: none;
margin: var(--space-md) 0 0;
padding: 0;
display: grid;
gap: var(--space-sm);
font-size: var(--fs-body-sm);
}
.pl-card__list li {
display: flex;
gap: var(--space-sm);
align-items: flex-start;
}
.pl-card__list svg {
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--color-icon-brand);
}
.pl-card--rec .pl-card__list svg {
color: var(--color-text-accent);
}
.pl-trust {
list-style: none;
margin: var(--space-2xl) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm) var(--space-xl);
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
}
.pl-trust li {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.pl-trust svg {
width: 16px;
height: 16px;
color: var(--color-icon-brand);
}
/* ---- Tabela com cabeçalho grudado ---- */
.pl-table-wrap {
margin-top: var(--space-3xl);
}
.pl-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--fs-body-sm);
}
.pl-table thead th {
position: sticky;
top: 96px;
z-index: 2;
padding: var(--space-lg) var(--space-md);
background: var(--color-bg-canvas);
border-bottom: 1px solid var(--color-border-subtle);
text-align: center;
vertical-align: bottom;
}
.pl-table thead .pl-th--first {
text-align: left;
}
.pl-th__hint {
font-size: var(--fs-caption);
font-weight: 600;
color: var(--color-text-muted);
}
.pl-th__name {
display: block;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 700;
}
.pl-th__price {
display: block;
margin-top: 2px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.pl-th__price small {
font-weight: 500;
color: var(--color-text-muted);
}
.pl-th__cta {
display: inline-flex;
align-items: center;
min-height: 36px;
margin-top: var(--space-sm);
padding: 0 var(--space-md);
border-radius: var(--radius-full);
background: var(--color-bg-info);
color: var(--color-text-on-inverse);
font-size: var(--fs-caption);
font-weight: 600;
transition: background-color var(--dur-base) var(--ease-out);
}
.pl-th__cta:hover {
background: var(--color-bg-inverse);
}
/* Coluna do recomendado: o mesmo degradê do cartão no cabeçalho e um véu
azul nas células, de ponta a ponta. */
.pl-table thead th.is-rec {
background: var(--highlight-gradient-d);
color: var(--color-text-on-inverse);
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.pl-table thead th.is-rec .pl-th__price small {
color: var(--color-text-muted-inverse);
}
.pl-table thead th.is-rec .pl-th__cta {
background: var(--color-bg-accent);
color: var(--color-text-on-accent);
}
.pl-table tbody th,
.pl-table tbody td {
padding: var(--space-md);
border-bottom: 1px solid var(--color-border-subtle);
}
.pl-table tbody th[scope="row"] {
font-weight: 500;
text-align: left;
}
.pl-table tbody td {
width: 19%;
text-align: center;
}
.pl-table td.is-rec {
background: var(--color-bg-info-soft);
}
.pl-table tbody tr:hover th[scope="row"],
.pl-table tbody tr:hover td:not(.is-rec) {
background: var(--white-a45);
}
.pl-group th {
padding: var(--space-xl) var(--space-md) var(--space-sm) !important;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 700;
text-align: left;
border-bottom-color: var(--color-text-primary) !important;
}
.pl-yes svg {
width: 20px;
height: 20px;
color: var(--color-icon-brand);
}
.pl-yes.is-rec svg {
color: var(--color-text-brand-strong);
}
.pl-no {
display: inline-block;
width: 14px;
height: 2px;
border-radius: 2px;
background: var(--color-border-subtle);
vertical-align: middle;
}
@media (max-width: 960px) {
.pl-grid {
grid-template-columns: minmax(0, 1fr);
max-width: 480px;
margin-inline: auto;
}
/* Tabela: rola de lado; o cabeçalho deixa de grudar. */
.pl-table-wrap {
overflow-x: auto;
margin-inline: calc(-1 * var(--container-pad));
padding-inline: var(--container-pad);
}
.pl-table {
min-width: 640px;
}
.pl-table thead th {
position: static;
}
}
/* ---- Calculadora, versão 2 (2026-10-20): pílulas + fatura ---- */
.pl-calc {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
gap: var(--space-xl);
max-width: 1100px;
margin: var(--space-3xl) auto 0;
padding: var(--space-xl);
border-radius: var(--radius-lg);
background: var(--color-bg-canvas);
}
.pl-calc__form {
display: grid;
align-content: start;
gap: var(--space-xl);
padding: var(--space-md);
}
.pl-calc fieldset {
margin: 0;
padding: 0;
border: 0;
}
.pl-calc legend {
margin-bottom: var(--space-md);
font-size: var(--fs-body-sm);
font-weight: 600;
}
.pl-calc legend span {
font-weight: 500;
color: var(--color-text-muted);
}
/* Seletor segmentado do plano. */
.pl-seg {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 4px;
border-radius: var(--radius-full);
background: var(--color-bg-surface);
box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}
.pl-seg__opt {
position: relative;
cursor: pointer;
}
.pl-seg__opt input,
.pl-chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.pl-seg__opt span {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
border-radius: var(--radius-full);
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--color-text-muted);
transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.pl-seg__opt input:checked + span {
background: var(--highlight-gradient-d);
color: var(--color-text-on-inverse);
box-shadow: var(--shadow-soft);
}
.pl-seg__opt input:focus-visible + span,
.pl-chip:has(input:focus-visible) {
outline: var(--control-focus-ring) solid var(--color-border-focus);
outline-offset: 3px;
}
/* Extensões em pílulas: nome + preço, check quando marcada. */
.pl-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.pl-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-sm);
min-height: 44px;
padding: 0 var(--space-md) 0 var(--space-sm);
border-radius: var(--radius-full);
background: var(--color-bg-surface);
box-shadow: inset 0 0 0 1px var(--color-border-subtle);
font-size: var(--fs-body-sm);
cursor: pointer;
transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.pl-chip:hover {
box-shadow: inset 0 0 0 1px var(--color-border-brand);
}
.pl-chip__tick {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: var(--radius-full);
background: var(--color-bg-canvas);
color: transparent;
transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.pl-chip__tick svg {
width: 14px;
height: 14px;
}
.pl-chip__name {
font-weight: 600;
}
.pl-chip__price {
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pl-chip:has(input:checked) {
box-shadow: inset 0 0 0 1.5px var(--color-border-brand), var(--shadow-soft);
}
.pl-chip:has(input:checked) .pl-chip__tick {
background: var(--color-bg-info);
color: var(--color-text-on-inverse);
}
.pl-chip:has(input:checked) .pl-chip__price {
color: var(--color-text-brand-strong);
}
/* A fatura. */
.pl-bill {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-xl);
border-radius: var(--radius-lg);
background: var(--highlight-gradient-d);
color: var(--color-text-on-inverse);
box-shadow: inset 0 1px 0 var(--white-a18), var(--shadow-glass);
}
.pl-bill__head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-md);
border-bottom: 1px dashed var(--white-a30);
font-size: var(--fs-body-sm);
font-weight: 600;
}
.pl-bill__lines {
list-style: none;
margin: var(--space-md) 0 0;
padding: 0;
display: grid;
gap: var(--space-sm);
min-height: 7.5rem;
align-content: start;
font-size: var(--fs-body-sm);
}
.pl-bill__lines li {
display: flex;
align-items: baseline;
gap: var(--space-sm);
}
/* Pontilhado entre o item e o valor, como numa nota. */
.pl-bill__lines i {
flex: 1;
border-bottom: 1px dotted var(--white-a30);
transform: translateY(-3px);
}
.pl-bill__lines b {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.pl-bill__lines li.is-new {
animation: pl-line-in 0.45s var(--ease-out);
}
@keyframes pl-line-in {
from { opacity: 0; transform: translateY(-6px); }
}
.pl-bill__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-md);
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px dashed var(--white-a30);
}
.pl-bill__total span {
font-size: var(--fs-body-sm);
color: var(--color-text-muted-inverse);
}
.pl-bill__total output {
font-size: clamp(2.25rem, 3.4vw, 2.75rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.pl-bill__total output.is-bump {
animation: pl-bump 0.4s var(--ease-out);
}
.pl-bill .btn {
margin-top: var(--space-lg);
justify-content: center;
}
.pl-bill__note {
margin-top: var(--space-sm);
font-size: var(--fs-caption);
text-align: center;
color: var(--color-text-muted-inverse);
}
@media (max-width: 960px) {
.pl-calc {
grid-template-columns: minmax(0, 1fr);
padding: var(--space-md);
}
}
/* ---- Tabela, correções (2026-10-20) ---- */
.pl-table-wrap {
padding: var(--space-md) var(--space-lg) var(--space-lg);
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
box-shadow: var(--card-inset-light), var(--shadow-soft);
}
.pl-table thead th {
background: var(--color-bg-surface);
}
/* Só enquanto o cabeçalho está grudado (classe posta por ui.js): uma faixa
da cor do painel cobre o espaço entre o menu e o cabeçalho, para as
linhas não aparecerem ali. Parada, a tabela não tem faixa nenhuma. */
.pl-table.is-stuck thead th {
box-shadow: 0 -110px 0 0 var(--color-bg-surface);
}
.pl-th__title {
display: block;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 700;
color: var(--color-text-primary);
}
.pl-th__legend {
display: flex;
gap: var(--space-lg);
margin-top: var(--space-sm);
font-size: var(--fs-caption);
font-weight: 500;
color: var(--color-text-muted);
}
.pl-th__legend > span {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.pl-th__legend svg {
width: 14px;
height: 14px;
color: var(--color-icon-brand);
}
.pl-yes svg {
display: block;
margin-inline: auto;
}
/* "Não incluso" visível: traço cinza médio, não da cor do fundo. */
.pl-no {
width: 16px;
background: var(--gray-600);
opacity: 0.35;
}
.pl-group th {
font-size: var(--fs-body-lg) !important;
border-bottom-color: var(--color-border-subtle) !important;
}
.pl-table tbody tr:hover th[scope="row"],
.pl-table tbody tr:hover td:not(.is-rec) {
background: var(--color-bg-canvas);
}
.pl-th__cta {
white-space: nowrap;
}
@media (max-width: 960px) {
.pl-table-wrap {
border-radius: 0;
}
}
/* Vidro do hero de Serviços (2026-10-20): o desfoque de fundo só alcança o
que está na mesma camada (contexto de empilhamento) que o vidro. O
.container do .sa-live tinha z-index: 1, o que isolava o conteúdo e
deixava a malha de pontos do fundo nítida dentro dos cartões. Aqui o
contêiner volta a não criar camada, e a malha desce para trás (z -1,
dentro do isolation do próprio hero). */
.sv-hero > .container {
z-index: auto;
}
/* Cartões de vidro do hero de Serviços com a mesma construção dos .sa-shot
da Saúde (onde o desfoque funciona no navegador do cliente): sem o anel
de máscara (::before com mask-composite) e sem isolation, que em alguns
navegadores/placas de vídeo desligam o backdrop-filter. A borda vem só
de box-shadow. */
.sv-hero .sv-float {
isolation: auto !important;
}
.sv-hero .sv-float::before {
display: none !important;
}
/* Hero de Serviços (2026-10-20): a malha de pontos fica ATRÁS de tudo
(dentro do isolation do próprio hero), e o palco dos cartões perde a
animação de entrada: um pai com animação de opacidade/transform pode
virar "raiz do fundo" do backdrop-filter e o vidro deixa de borrar o que
está atrás. Diagnóstico item a item em teste-vidro.html. */
.sv-hero::before,
.sv-hero::after {
z-index: -1 !important;
}
.sv-hero__stage.sv-in {
animation: none !important;
}
/* =========================================================
Home v2 (2026-10-20): proposta em index-v2.html. Tudo aqui é escopado em
.page-home-v2 e reaproveita componentes das páginas Saúde e Serviços.
========================================================= */
/* Problema: agenda curta, estática (sem js-clock). */
.page-home-v2 .v2-problem .sa-day__grid {
align-items: center;
}
.page-home-v2 .v2-problem .sa-day__head .display-2 {
margin-top: 0;
}
/* Bifurcação: dono de agência recortado, ancorado na base do painel. */
.page-home-v2 .v2-split__photo {
width: auto;
height: 68%;
object-fit: contain;
object-position: bottom right;
transform: scaleX(-1);
}
/* Módulos: 4 + 4 em volta do painel. */
.page-home-v2 .v2-hub .sa-hub__steps {
gap: var(--space-xl);
}
.page-home-v2 .v2-hub .sa-record__avatar {
background: var(--highlight-gradient-d);
}
.page-home-v2 .v2-hub .sa-record__row {
grid-template-columns: 132px 1fr;
}
/* FAQ em lista com divisórias (como na Serviços), no claro. */
.page-home-v2 .v2-faq .faq {
gap: 0;
}
.page-home-v2 .v2-faq .faq__item {
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-border-subtle);
border-radius: 0;
box-shadow: none;
}
.page-home-v2 .v2-faq .faq__item:hover,
.page-home-v2 .v2-faq .faq__item.is-open {
border-color: var(--color-border-brand);
box-shadow: none;
}
.page-home-v2 .v2-faq .faq__item::before {
inset: auto 0 -1px;
height: 1px;
border-radius: 0;
background: radial-gradient(240px circle at var(--mx, 50%) 50%, var(--color-bg-info), transparent 70%);
}
.page-home-v2 .v2-faq .faq__trigger {
padding-inline: 0;
}
@media (max-width: 960px) {
.page-home-v2 .v2-split__photo {
height: auto;
width: 62%;
}
}
/* Ajustes de celular (revisão final, 2026-10-20). */
@media (max-width: 520px) {
/* "Para quem é" (Serviços): uma coluna, alturas alinhadas, legenda menor. */
.sv-who__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-md);
}
.sv-who__item:nth-child(even) {
margin-top: 0;
}
.sv-who__item img {
aspect-ratio: 4 / 3;
object-position: center 20%;
}
/* Fatura (Planos): rótulo em cima, valor embaixo. */
.pl-bill__total {
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs);
}
}