/* =====================================================================
   MAIN.CSS — Landing Page Centro Médico · Sistema Gestor
   Variáveis no topo · CSS abaixo separado por área
   ===================================================================== */

/* ===== VARIÁVEIS (DESIGN SYSTEM) ===== */
:root {
    /* Cores — paleta azul cobalto + coral (destaque) */
    --color-bg: #FAFBFC;          /* off-white de fundo */
    --color-surface: #FFFFFF;     /* cards / superfícies */
    --color-brand: #1B4FD6;       /* azul cobalto — marca */
    --color-brand-soft: #6BA8E5;  /* azul-céu — apoio */
    --color-deep: #0E2A5E;        /* navy profundo */
    --color-highlight: #FF6A1A;       /* laranja vivo — cor de DESTAQUE (grita, puxa o olho) */
    --color-highlight-deep: #E5550A;  /* laranja escuro — hover/estados */
    --color-accent: #C99A4B;      /* dourado âmbar — detalhe raro (ex: ping do sino) */
    --color-accent-soft: #E4C88A; /* dourado claro */
    --color-text: #0E1B33;        /* texto — azul quase preto */
    --color-text-muted: #5A6577;  /* texto secundário */
    --color-hairline: rgba(14, 27, 51, 0.10);
    --color-mist: #EAEFF6;        /* cinza-azulado claro — fundos com corpo (ex: Clientes) */
  

    /* Véu do hero (branco translúcido + blur) e superfície das notificações */
    --hero-veil: rgba(250, 251, 252, 0.30);
    --notif-surface: rgba(255, 255, 255, 0.45);
    --notif-border: rgba(255, 255, 255, 0.60);

    /* Materiais dos artefatos — seção Problema/Dor ("balcão do caos").
       Cores do "mundo real" de cada objeto: WhatsApp, post-it, caderno,
       planilha, push do concorrente e toast do site. */
    --color-chaos-deep: #081735;             /* fundo do gradiente (mais escuro que o navy) */
    --chaos-text-soft: rgba(255, 255, 255, 0.62);
    --color-wa-bg: #ECE5DD;                  /* fundo da conversa */
    --color-wa-header: #075E54;              /* verde da barra do WhatsApp */
    --color-wa-avatar: #C7D8CE;
    --color-wa-badge: #25D366;               /* bolha de não lidas */
    --color-wa-badge-text: #05301F;
    --color-wa-time: #8696A0;
    --color-postit: #FFE983;                 /* amarelo post-it (topo) */
    --color-postit-deep: #FBD95E;            /* amarelo post-it (base) */
    --color-postit-text: #4A3B0A;
    --color-ink-pen: #23408F;                /* caneta azul do caderno */
    --color-ink-red: #D33A2C;                /* rasura no caderno e erro na planilha */
    --color-book-line: #D9E4F0;              /* pauta do caderno */
    --color-book-margin: #F0A8A8;            /* margem vermelha do caderno */
    --color-sheet-bar: #1E6B41;              /* verde Excel da barra de título */
    --color-sheet-border: #DCE3EA;
    --color-sheet-head: #F2F5F8;
    --color-push-icon-1: #22B07D;            /* gradiente do ícone do app concorrente */
    --color-push-icon-2: #14795A;
    --color-push-meta: #6B7686;
    --color-push-surface: rgba(255, 255, 255, 0.92); /* vidro claro do push */
    --color-toast-bg: #101D38;
    --color-toast-border: rgba(255, 255, 255, 0.14);
    --color-toast-sub: #9AA8C0;

    /* Céus da seção Features ("um dia na clínica") — o fundo acompanha a hora
       do dia conforme a cena ativa (JS troca data-phase na seção).
       dusk/night reutilizam --color-deep e --color-chaos-deep. */
    --color-day-dawn: #F5E7D3;                 /* amanhecer — luz quente */
    --color-day-morning: #FAF4EA;              /* manhã — resto de calor */
    --color-day-noon: #FAFBFC;                 /* meio-dia — off-white padrão */
    --color-day-glow: rgba(255, 168, 90, 0.5); /* clarão do sol nascendo */

    /* Materiais dos mockups vivos da seção Features */
    --color-wa-out: #D9FDD3;      /* bolha enviada (verde WhatsApp) */
    --color-wa-check: #53BDEB;    /* confirmação de leitura (azul) */
    --color-chart-line: #E3EAF3;  /* linhas "escritas" do prontuário */
    --color-chart-chip: #EFF4FA;  /* botões de ação do prontuário */
    --color-ok: #1FA36B;          /* sucesso (receita emitida) */

    /* Materiais do FAQ (chat da Ana) — vidro da marca, sem verde de
       WhatsApp: a bolha do visitante é uma tinta clara do azul cobalto. */
    --faq-bubble-user: #DCE8FB;
    --faq-bubble-user-text: #16305F;
    --faq-window-h: min(58vh, 440px); /* a conversa rola por dentro da janela */
    --faq-bg: #F9E3DA;               /* salmão claro — fundo da seção */

    /* Rodapé — o único escuro depois do FAQ, onde a página se apaga.
       O turquesa é a cor do cubo da logo, usada só aqui, nos títulos. */
    --finale-text: rgba(255, 255, 255, 0.72);
    --finale-dim: rgba(255, 255, 255, 0.46);  /* horários, copyright */
    --finale-rule: rgba(255, 255, 255, 0.12); /* filete acima do copyright */
    --foot-bg: #0B1B33;
    --foot-teal: #16A79B;                     /* títulos das colunas */

    /* Tipografia */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-hand: 'Caveat', 'Segoe Print', cursive; /* letra de mão (post-it, caderno) */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Escala tipográfica */
    --fs-eyebrow: 0.8125rem;   /* 13px */
    --fs-body: 1.0625rem;      /* 17px */
    --fs-lead: 1.1875rem;      /* 19px */
    --fs-notif-title: 0.9375rem;
    --fs-notif-meta: 0.8125rem;
    --fs-artifact: 0.875rem;   /* texto interno dos artefatos (14px) */
    --fs-micro: 0.6875rem;     /* carimbos de hora, metadados (11px) */
    --fs-h1: clamp(2.4rem, 4.4vw, 4rem);
    --fs-h2: clamp(2.2rem, 4.6vw, 3.6rem);
    --fs-closing: clamp(1.4rem, 2.6vw, 2rem);
    --fs-scene-time: clamp(2.4rem, 3.6vw, 3.4rem);   /* horários da timeline */
    --fs-scene-title: clamp(1.5rem, 2.2vw, 2.05rem); /* título de cada cena */

    /* Espaçamento (escala 4/8/16/24/32/48/64/96) */
    --space-1: 0.25rem;   /* 4 */
    --space-2: 0.5rem;    /* 8 */
    --space-3: 1rem;      /* 16 */
    --space-4: 1.5rem;    /* 24 */
    --space-5: 2rem;      /* 32 */
    --space-6: 3rem;      /* 48 */
    --space-7: 4rem;      /* 64 */
    --space-8: 6rem;      /* 96 */

    /* Sombras — elevação suave/difusa (coerente com a arquitetura curva da foto) */
    --shadow-sm: 0 2px 8px rgba(14, 27, 51, 0.06);
    --shadow-md: 0 12px 32px rgba(14, 27, 51, 0.10);
    --shadow-lg: 0 24px 60px rgba(14, 27, 51, 0.14);
    --shadow-notif: 0 10px 30px rgba(14, 42, 94, 0.16);
    --shadow-artifact: 0 24px 60px rgba(0, 0, 0, 0.38); /* elevação sobre o fundo navy */

    /* Raios */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Transições / easing */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot suave (iOS-like) */
    --transition-fast: 180ms var(--ease-out);
    --transition-base: 320ms var(--ease-out);

    /* Layout */
    --container-max: 1240px;
    --chaos-fade: 96px; /* altura do degradê claro → navy no topo da seção de dores */
    --day-fade: 200px;  /* degradê navy (caos) → amanhecer no topo das features */
    --stage-height: min(74vh, 640px); /* altura do palco sticky das features */

    /* Breakpoints (documentação; usados nas @media abaixo)
       --bp-md: 900px (abaixo disso o hero empilha) · --bp-sm: 620px */
}

/* ===== BASE / RESET ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Alvos das âncoras do menu: sem esta folga a topbar flutuante cobriria os
   primeiros pixels da seção recém-aberta. */
section[id] {
    scroll-margin-top: calc(var(--space-8) + var(--space-3));
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Os CTAs (hero, topbar, final) são <button> porque abrem o modal em vez de
   navegar. Sem este reset eles herdariam a aparência nativa do navegador. */
button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Conteúdo só para leitores de tela (ex: a lista de clínicas das esteiras,
   já que as tiras são imagens decorativas) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* ===== TOPBAR ===== */
/* Barra flutuante de vidro fosco (mesmo material das notificações e do véu):
   branco translúcido + blur, cantos levemente arredondados — logo à esquerda,
   botão laranja à direita. Leve, integrada à cena. */
/* Fixa no topo, em vidro fosco durante toda a rolagem. O véu é translúcido,
   então o fundo de cada seção atravessa a pílula. */
.topbar {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
    background: var(--notif-surface);
    border: 1px solid var(--notif-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
}

.topbar__brand {
    display: inline-flex;
    transition: opacity var(--transition-fast);
}

.topbar__brand:hover {
    opacity: 0.8;
}

.topbar__logo {
    width: auto;
    height: 42px; /* com mais destaque */
}

/* Botão da topbar — laranja, igual ao CTA do hero */
.topbar__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    color: var(--color-surface);
    background: var(--color-highlight);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition:
        transform var(--transition-fast),
        background var(--transition-fast);
}

.topbar__cta:hover {
    transform: translateY(-1px);
    background: var(--color-highlight-deep);
}

.topbar__cta-arrow {
    transition: transform var(--transition-fast);
}

.topbar__cta:hover .topbar__cta-arrow {
    transform: translateX(3px);
}

/* --- Navegação por âncora ---
   Fica no centro da pílula, entre a logo e o CTA. Os links são discretos de
   propósito: o único elemento que disputa atenção na topbar é o botão. */
.topnav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.topnav__link {
    position: relative;
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color var(--transition-fast);
}

/* Sublinhado que cresce da esquerda — some no hover de um item para o outro
   sem piscar, porque só a escala muda. */
.topnav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--color-highlight);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast);
}

.topnav__link:hover {
    color: var(--color-deep);
}

.topnav__link:hover::after {
    transform: scaleX(1);
}

/* Seção em que o visitante está agora (marcado pelo JS) */
.topnav__link[aria-current="true"] {
    color: var(--color-deep);
    font-weight: var(--fw-semibold);
}

.topnav__link[aria-current="true"]::after {
    transform: scaleX(1);
}

/* --- Botão hamburger (só no mobile) --- */
.topbar__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 var(--space-2);
    flex-shrink: 0;
}

.topbar__burger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-deep);
    border-radius: var(--radius-pill);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Aberto: as duas barras viram um X */
.topbar__burger[aria-expanded="true"] .topbar__burger-bar:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.topbar__burger[aria-expanded="true"] .topbar__burger-bar:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}

/* --- Responsivo ---
   Abaixo de 1000px os seis itens não cabem ao lado da logo e do CTA: o menu
   vira um painel que desce da própria pílula. */
@media (max-width: 1000px) {
    .topbar {
        flex-wrap: wrap;
        row-gap: var(--space-3);
    }

    .topbar__burger {
        display: flex;
    }

    .topnav {
        display: none;
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--notif-border);
    }

    .topnav--open {
        display: flex;
    }

    /* A pílula é fixa: em telas baixas (celular deitado) o painel aberto
       passaria da tela, então ele rola por dentro. */
    .topbar {
        max-height: calc(100svh - var(--space-5));
        overflow-y: auto;
    }

    .topnav__link {
        font-size: var(--fs-body);
    }

    /* No painel vertical o sublinhado cresceria pela linha inteira; a cor
       sozinha já marca a seção atual. */
    .topnav__link::after {
        display: none;
    }
}

/* Numa pílula estreita o texto do CTA some e fica só a seta */
@media (max-width: 420px) {
    .topbar {
        padding-left: var(--space-3);
    }

    .topbar__cta {
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-micro);
    }
}

@media (prefers-reduced-motion: reduce) {
    .topnav__link::after,
    .topbar__burger-bar {
        transition: none;
    }
}

/* ===== HERO (widescreen, imagem full-bleed) ===== */
.hero {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    /* Split 40% (headline) / 60% (celular + notificações), tudo numa linha só */
    display: grid;
    grid-template-columns: 46% 54%;
    grid-template-rows: 100%;
    align-items: center;
}

/* Imagem de fundo cobrindo toda a largura */
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Véu branco translúcido + blur (frosted glass) para legibilidade da headline.
   Mais denso à esquerda (onde fica o texto), dissolvendo para a direita. */
.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(250, 251, 252, 0.86) 0%,
        rgba(250, 251, 252, 0.68) 30%,
        rgba(250, 251, 252, 0.22) 58%,
        rgba(250, 251, 252, 0.05) 100%
    );
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* Conteúdo: headline na coluna esquerda, centralizada verticalmente.
   Barra vertical cobalto à esquerda ancora o bloco (estrutura editorial). */
.hero__content {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    padding-inline: clamp(var(--space-4), 4vw, var(--space-7));
    /* respiro para o conteúdo não encostar na topbar flutuante */
    padding-top: var(--space-7);
}

/* Barra vertical de âncora — alinhada ao bloco de texto (eyebrow → botão),
   não à coluna inteira, para não subir demais em direção à topbar. */
.hero__content::before {
    content: "";
    position: absolute;
    left: clamp(var(--space-3), 3vw, var(--space-5));
    top: 22%;
    bottom: 14%;
    width: 4px;
    border-radius: var(--radius-pill);
    background: linear-gradient(
        180deg,
        var(--color-brand) 0%,
        var(--color-brand-soft) 100%
    );
    opacity: 0;
    animation: reveal-bar 0.9s var(--ease-out) 0.2s forwards;
}

@keyframes reveal-bar {
    from { opacity: 0; transform: scaleY(0.4); transform-origin: top; }
    to   { opacity: 1; transform: scaleY(1); }
}

.hero__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-brand);
    margin-bottom: var(--space-4);
}

.hero__title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);   /* mais autoridade */
    font-size: var(--fs-h1);
    line-height: 1.1;              /* respiro editorial entre as linhas */
    letter-spacing: -0.02em;      /* kerning mais apertado, mais display */
    color: var(--color-deep);
    max-width: 20ch;              /* mais largo — preenche a coluna, fecha o buraco */
}

/* Cada linha vira uma máscara; o inner sobe a partir de baixo (reveal). */
.hero__line {
    display: block;
    overflow: hidden;
}

.hero__line-in {
    display: block;
}

/* Acento único na palavra "experiência" — itálico Playfair + laranja vivo.
   Respiro sutil (escala + brilho) no mesmo ritmo lento do float do celular,
   para os dois movimentos conversarem. transform-origin na base-esquerda
   para não empurrar a palavra "A" ao lado. */
.hero__title em {
    font-style: italic;
    color: var(--color-highlight);
    display: inline-block;
    transform-origin: left bottom;
    animation: word-breath 6s ease-in-out 1.6s infinite;
    will-change: transform, filter;
    font-size: 1.1em;
}

@keyframes word-breath {
    0%, 100% { transform: scale(1);     filter: brightness(1); }
    50%      { transform: scale(1.025); filter: brightness(1.12); }
}

.hero__subtitle {
    margin-top: var(--space-4);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: 42ch;
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-surface);
    background: var(--color-highlight);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

.hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: var(--color-highlight-deep);
}

.hero__cta-arrow {
    transition: transform var(--transition-fast);
}

.hero__cta:hover .hero__cta-arrow {
    transform: translateX(4px);
}

/* --- Celular nítido (sobre o véu) ---
   Vive na coluna direita (60%), centralizado nela. As notificações emergem das
   duas bordas do celular (esquerda e direita). */
.hero__phone {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    /* baixa o celular para o topo dele alinhar com o eyebrow */
    margin-top: 56px;
    height: min(68%, 560px);
    aspect-ratio: 628 / 1360;
}

.hero__phone-img {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 30px 60px rgba(14, 42, 94, 0.28));
}

/* ===== ENTRADA COREOGRAFADA + FLOAT ===== */
/* Elementos com .reveal começam escondidos (deslocados p/ baixo) e sobem em
   sequência via delays --1..--6. O celular entra e depois flutua em loop. */
.reveal {
    opacity: 0;
    transform: translateY(120%);
    animation: reveal-up 0.9s var(--ease-out) forwards;
}

/* Para elementos que NÃO estão dentro de máscara (eyebrow, subtítulo, cta),
   um deslocamento menor fica mais elegante que 120%. */
.hero__eyebrow.reveal,
.hero__subtitle.reveal,
.hero__cta.reveal {
    transform: translateY(18px);
}

.reveal--1 { animation-delay: 0.10s; }
.reveal--2 { animation-delay: 0.28s; }
.reveal--3 { animation-delay: 0.42s; }
.reveal--4 { animation-delay: 0.56s; }
.reveal--5 { animation-delay: 0.80s; }
.reveal--6 { animation-delay: 0.98s; }

@keyframes reveal-up {
    from { opacity: 0; transform: translateY(120%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* O celular: entra deslizando de baixo (com leve escala), depois flutua. */
.hero__phone {
    animation:
        phone-enter 1.1s var(--ease-out) 0.35s backwards,
        phone-float 6s ease-in-out 1.6s infinite;
}

@keyframes phone-enter {
    from { opacity: 0; transform: translateY(48px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Float ambiente sutil — sobe/desce ~8px em ciclo lento */
@keyframes phone-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* A sombra do celular responde ao float, reforçando a sensação de suspenso */
.hero__phone-img {
    animation: phone-shadow 6s ease-in-out 1.6s infinite;
}

@keyframes phone-shadow {
    0%, 100% { filter: drop-shadow(0 30px 60px rgba(14, 42, 94, 0.28)); }
    50%      { filter: drop-shadow(0 42px 72px rgba(14, 42, 94, 0.22)); }
}

/* --- Ping do sino do app ---
   Pequeno ponto sobre o sino (barra do topo do app). Pulsa quando chega
   uma notificação, conectando o evento à origem na tela do celular. */
.hero__phone-bell {
    position: absolute;
    z-index: 4;
    /* alinhado ao sino na tela (canto sup. direito da barra azul, celular inclinado) */
    top: 12.4%;
    right: 11%;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: var(--color-highlight);
    opacity: 0;
    pointer-events: none;
}

.hero__phone-bell.is-ping {
    animation: bell-ping 1.1s var(--ease-out);
}

@keyframes bell-ping {
    0%   { opacity: 1; transform: scale(0.6); box-shadow: 0 0 0 0 rgba(255, 106, 26, 0.55); }
    70%  { opacity: 1; transform: scale(1);   box-shadow: 0 0 0 10px rgba(255, 106, 26, 0); }
    100% { opacity: 0; transform: scale(1);   box-shadow: 0 0 0 0 rgba(255, 106, 26, 0); }
}

/* --- Camada de notificações ---
   Envolve o celular e suas laterais. O miolo (onde o celular está, ~200px) fica
   livre; as notificações vivem SÓ nas faixas externas (esquerda e direita),
   sem invadir a tela. --notif-side é a largura de cada faixa externa. */
.notif-layer {
    /* A camada é filha de .hero__phone (largura do celular). Estende-se para os
       dois lados além do aparelho, centrada nele, para caber notificações nas
       laterais. left/right negativos criam as faixas externas. */
    position: absolute;
    z-index: 3;
    top: 6%;
    left: -170%;   /* estende 170% da largura do celular para a esquerda */
    right: -170%;  /* e para a direita — simétrico, centrado no celular */
    height: 76%;
    pointer-events: none;
}

.notif {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: max-content;          /* largura natural do texto — nunca corta */
    max-width: 40%;              /* teto de segurança (não passa da metade da camada) */
    padding: var(--space-2) var(--space-3);
    background: var(--notif-surface);
    border: 1px solid var(--notif-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    backdrop-filter: blur(8px) saturate(1.2);
    white-space: nowrap;
    opacity: 0;
    transition:
        transform 420ms var(--ease-bounce),
        opacity var(--transition-base);
    will-change: transform, opacity;
}

/* Notificações da DIREITA: borda ESQUERDA ancorada à direita do celular; a
   notificação cresce para a direita conforme o texto. Nasce colada e desliza. */
.notif--right {
    left: 63%;
    transform: translateX(-16px) scale(0.96);
}
.notif--right.is-in {
    transform: translateX(0) scale(1);
    opacity: 1;
}
.notif--right.is-out {
    transform: translateX(10px) scale(0.98);
    opacity: 0;
}

/* Notificação da ESQUERDA: borda DIREITA ancorada à esquerda do celular; a
   notificação cresce para a esquerda conforme o texto. Nasce colada e desliza. */
.notif--left {
    right: 63%;
    transform: translateX(16px) scale(0.96);
}
.notif--left.is-in {
    transform: translateX(0) scale(1);
    opacity: 1;
}
.notif--left.is-out {
    transform: translateX(-10px) scale(0.98);
    opacity: 0;
}

.notif__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-highlight);
    color: var(--color-surface);
    font-size: 0.7rem;
}

.notif__label {
    font-size: var(--fs-notif-meta);
    font-weight: var(--fw-medium);
    color: var(--color-deep);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Carimbo de tempo relativo — reforça a sensação de notificação real */
.notif__time {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    padding-left: var(--space-2);
    margin-left: auto;
    /* separador sutil antes do horário */
    border-left: 1px solid var(--color-hairline);
}

/* ===== RESPONSIVO ===== */

/* --- Faixa intermediária (901–1280px): mantém o split, mas há menos espaço
   lateral. O celular vem mais para a esquerda (colunas reequilibradas) e as
   notificações aparecem SÓ à direita — à esquerda elas invadiriam a headline. */
@media (min-width: 901px) and (max-width: 1280px) {
    .hero {
        grid-template-columns: 50% 50%;
    }

    /* Celular mais ao centro/esquerda e um pouco menor */
    .hero__phone {
        justify-self: start;
        height: min(60%, 480px);
    }

    /* Todas as notificações saem pela direita do celular */
    .notif--left {
        right: auto;
        left: 63%;
    }

    .notif--left {
        transform: translateX(-16px) scale(0.96);
    }

    .notif--left.is-in {
        transform: translateX(0) scale(1);
    }

    .notif--left.is-out {
        transform: translateX(10px) scale(0.98);
    }
}

@media (max-width: 900px) {
    /* Logo à esquerda e hamburger à direita — o CTA já existe abaixo da
       headline, então some daqui para não repetir a mesma ação duas vezes. */
    .topbar {
        justify-content: space-between;
        padding-inline: var(--space-4);
    }

    .topbar__cta {
        display: none;
    }

    /* Empilha em coluna única e com rolagem: headline/CTA em cima, celular embaixo.
       Nada de altura fixa de tela — o conteúdo flui verticalmente. */
    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        min-height: 100svh;
        overflow-x: clip; /* contém notificações que saem à direita do celular */
        /* espaço no topo para a topbar flutuante + respiro no fim */
        padding: calc(var(--space-8) + var(--space-4)) var(--space-4) var(--space-7);
        gap: var(--space-6);
    }

    /* O fundo e o véu continuam cobrindo toda a seção */
    .hero__bg,
    .hero__veil {
        position: absolute;
    }

    /* Ordem: headline/CTA primeiro, celular depois */
    .hero__content {
        order: 1;
        grid-column: auto;
        grid-row: auto;
        text-align: center;
        max-width: 34ch;
        margin-inline: auto;
        padding-top: 0;
    }

    /* A barra de âncora não faz sentido com texto centralizado */
    .hero__content::before {
        display: none;
    }

    .hero__title,
    .hero__subtitle {
        margin-inline: auto;
    }

    /* Headline quebra naturalmente — sem br forçados */
    .hero__br {
        display: none;
    }

    /* Celular abaixo da headline, centralizado. Espaço extra no topo reserva
       a área ACIMA do aparelho onde as notificações aparecem (com respiro do CTA). */
    .hero__phone {
        order: 2;
        grid-column: auto;
        grid-row: auto;
        justify-self: center;
        align-self: auto;
        margin: var(--space-8) auto 0;
        height: auto;
        width: min(230px, 60vw);
    }

    /* No mobile as notificações ficam ACIMA do celular (fora da tela do app),
       empilhadas e centralizadas — não cobrem o conteúdo do aparelho. */
    .notif-layer {
        top: auto;
        bottom: 100%;             /* logo acima do topo do celular */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(300px, 94vw);
        height: auto;
        /* empilha de baixo p/ cima: a mais nova fica junto ao celular */
        display: flex;
        flex-direction: column-reverse;
        gap: var(--space-2);
        padding-bottom: var(--space-3);
    }

    /* Notificações em fluxo (não absolutas) dentro da camada flex */
    .notif--left,
    .notif--right {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        align-self: center;
        max-width: 100%;
        transform: translateY(8px) scale(0.96);
    }

    .notif--left.is-in,
    .notif--right.is-in {
        transform: translateY(0) scale(1);
    }

    .notif--left.is-out,
    .notif--right.is-out {
        transform: translateY(6px) scale(0.98);
    }
}

@media (max-width: 620px) {
    .hero {
        padding-top: calc(var(--space-8) + var(--space-2));
    }

    .hero__phone {
        width: min(210px, 66vw);
    }

    .notif {
        padding: var(--space-1) var(--space-2);
    }
}

/* ===== MOVIMENTO REDUZIDO ===== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* Entrada coreografada, float e respiro desligados: tudo em repouso, visível */
    .reveal,
    .hero__phone,
    .hero__phone-img,
    .hero__content::before,
    .hero__title em {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    /* Sino não pulsa */
    .hero__phone-bell.is-ping {
        animation: none !important;
        opacity: 0;
    }

    .notif {
        transition: none;
        transform: none;
        opacity: 1;
    }

    .notif.is-out {
        transform: none;
        opacity: 1;
    }

    .hero__cta,
    .hero__cta-arrow {
        transition: none;
    }
}

/* ===== SEÇÃO PROBLEMA/DOR ("balcão do caos") ===== */
/* Primeiro momento escuro da página. As 6 dores viram os artefatos reais do
   dia a dia (WhatsApp, post-it, caderno, planilha, push, toast), espalhados
   como numa mesa bagunçada: levemente rotacionados, surgindo em cascata no
   scroll. No hover, o artefato "se endireita" (rotação zera). */
.chaos {
    /* Duas camadas: por baixo, o navy radial; por cima, um véu claro que nasce
       branco (mesma cor da faixa de números) e derrete RÁPIDO — decaimento
       eased, não linear, para o branco não "lavar" metade do caminho: só uma
       borda fina clara que dissolve no navy. */
    background:
        linear-gradient(
            180deg,
            var(--color-surface) 0,
            rgba(255, 255, 255, 0.5) calc(var(--chaos-fade) * 0.2),
            rgba(255, 255, 255, 0.2) calc(var(--chaos-fade) * 0.48),
            rgba(255, 255, 255, 0.06) calc(var(--chaos-fade) * 0.75),
            rgba(255, 255, 255, 0) var(--chaos-fade)
        ),
        radial-gradient(
            120% 120% at 50% 0%,
            var(--color-deep) 0%,
            var(--color-chaos-deep) 78%
        );
    padding: calc(var(--space-7) + var(--space-3)) var(--space-4) var(--space-5);
}

/* --- Faixa de números (prova social, entre o hero e as dores) --- */
.stats-band {
    background: var(--color-surface);
    padding: var(--space-5) var(--space-4);
}

.stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    /* entrada suave junto com o scroll (JS adiciona .is-in) */
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s var(--ease-out),
        transform 0.7s var(--ease-out);
}

.stats.is-in {
    opacity: 1;
    transform: translateY(0);
}

.stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: center;
    text-align: center;
    padding-inline: var(--space-3);
}

.stats__item + .stats__item {
    border-left: 1px solid var(--color-hairline);
}

.stats__value {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    line-height: 1.1;
    color: var(--color-brand);
    font-variant-numeric: tabular-nums;
}

.stats__label {
    font-size: var(--fs-notif-meta);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    max-width: 22ch;
}

.chaos__eyebrow {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-highlight);
    margin-bottom: var(--space-2);
}

.chaos__title {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--color-surface);
    max-width: 22ch;
    margin-bottom: var(--space-3);
}

/* Mesmo acento do hero: itálico + laranja */
.chaos__title em {
    font-style: italic;
    color: var(--color-highlight);
}

.chaos__intro {
    color: var(--chaos-text-soft);
    max-width: 34rem;
    margin-bottom: var(--space-5);
    font-size: var(--fs-body);
}

/* --- Mesa de artefatos --- */
.chaos__desk {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5) var(--space-4);
    align-items: start;
}

/* Cada artefato nasce invisível (abaixo e sem rotação) e assenta na mesa com
   a própria inclinação (--tilt) quando o JS adiciona .is-in. */
.artifact {
    justify-self: center;
    width: 100%;
    max-width: 330px;
    opacity: 0;
    transform: translateY(28px) rotate(0deg);
    transition:
        opacity 0.7s var(--ease-out),
        transform 0.7s var(--ease-out);
}

.artifact.is-in {
    opacity: 1;
    transform: translateY(0) rotate(var(--tilt, 0deg));
}

.artifact.is-in:hover {
    transform: translateY(-6px) rotate(0deg);
}

.artifact__card {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-artifact);
}

/* Legenda de uma linha sob cada artefato — nomeia a dor */
.artifact__caption {
    margin-top: var(--space-3);
    text-align: center;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-brand-soft);
}

/* Deslocamentos verticais + inclinações — o "espalhado" da mesa */
.artifact--wa     { --tilt: -2deg; }
.artifact--postit { --tilt: 3.5deg;  margin-top: var(--space-6); }
.artifact--push   { --tilt: -1.5deg; margin-top: var(--space-3); }
.artifact--book   { --tilt: 2deg; }
.artifact--sheet  { --tilt: -2.5deg; margin-top: var(--space-5); }
.artifact--toast  { --tilt: 1.5deg;  margin-top: var(--space-6); }

/* --- 1. Conversa de WhatsApp --- */
.wa {
    background: var(--color-wa-bg);
    overflow: hidden;
}

.wa__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-wa-header);
    color: var(--color-surface);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-artifact);
}

.wa__avatar {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--color-wa-avatar);
    flex-shrink: 0;
}

.wa__badge {
    margin-left: auto;
    background: var(--color-wa-badge);
    color: var(--color-wa-badge-text);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-2);
    line-height: 1;
}

.wa__body {
    padding: var(--space-2) var(--space-3) var(--space-3);
    display: grid;
    gap: var(--space-2);
}

.wa__msg {
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    border-top-left-radius: 2px; /* "rabinho" da bolha recebida */
    padding: var(--space-2) var(--space-2);
    font-size: var(--fs-artifact);
    line-height: 1.45;
    max-width: 92%;
    box-shadow: var(--shadow-sm);
}

.wa__msg time {
    display: block;
    text-align: right;
    font-size: var(--fs-micro);
    color: var(--color-wa-time);
    margin-top: var(--space-1);
}

/* --- 2. Post-it --- */
.postit {
    background: linear-gradient(
        180deg,
        var(--color-postit) 0%,
        var(--color-postit-deep) 100%
    );
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-4) var(--space-5);
    font-family: var(--font-hand);
    font-size: 1.45rem; /* Caveat renderiza pequena — compensação da handwriting */
    line-height: 1.3;
    color: var(--color-postit-text);
    min-height: 160px;
}

.postit strong {
    font-weight: var(--fw-semibold);
    text-decoration: underline;
}

/* --- 3. Push do app do concorrente --- */
.push {
    background: var(--color-push-surface);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

.push__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        135deg,
        var(--color-push-icon-1),
        var(--color-push-icon-2)
    );
    color: var(--color-surface);
    display: grid;
    place-items: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    flex-shrink: 0;
}

.push__text {
    font-size: var(--fs-artifact);
    line-height: 1.5;
}

.push__app {
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-push-meta);
}

.push__title {
    font-weight: var(--fw-bold);
}

/* --- 4. Página do caderno (pauta + margem, letra de caneta) --- */
.book {
    background: repeating-linear-gradient(
        180deg,
        var(--color-surface) 0 27px,
        var(--color-book-line) 27px 28px
    );
    border-left: 3px solid var(--color-book-margin);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-3) var(--space-4) var(--space-4);
    font-family: var(--font-hand);
    font-size: 1.25rem;      /* compensação da handwriting */
    color: var(--color-ink-pen);
    line-height: 28px;       /* escreve exatamente sobre a pauta */
}

.book__risco {
    text-decoration: line-through;
    text-decoration-color: var(--color-ink-red);
    text-decoration-thickness: 2px;
}

.book__duvida {
    color: var(--color-ink-red);
}

/* --- 5. Planilha de financeiro --- */
.sheet {
    background: var(--color-surface);
    overflow: hidden;
}

.sheet__titlebar {
    background: var(--color-sheet-bar);
    color: var(--color-surface);
    font-size: var(--fs-micro);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sheet table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-artifact);
    font-variant-numeric: tabular-nums;
}

.sheet td,
.sheet th {
    border: 1px solid var(--color-sheet-border);
    padding: var(--space-1) var(--space-2);
    text-align: right;
}

.sheet th {
    background: var(--color-sheet-head);
    font-weight: var(--fw-semibold);
    text-align: left;
    color: var(--color-text-muted);
}

.sheet__err {
    color: var(--color-ink-red);
    font-weight: var(--fw-bold);
    text-align: center;
}

.sheet__neg {
    color: var(--color-ink-red);
}

/* --- 6. Toast do site (agendamento online desconectado) --- */
.toast {
    background: var(--color-toast-bg);
    border: 1px solid var(--color-toast-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    color: var(--color-surface);
    font-size: var(--fs-artifact);
    line-height: 1.5;
}

.toast__dot {
    width: 10px;
    height: 10px;
    margin-top: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-highlight);
    box-shadow: 0 0 0 5px rgba(255, 106, 26, 0.18);
    flex-shrink: 0;
}

.toast__title {
    font-weight: var(--fw-bold);
    display: block;
}

.toast__sub {
    color: var(--color-toast-sub);
    font-size: var(--fs-notif-meta);
}

/* --- Fecho da seção: ponte para as features --- */
.chaos__closing {
    margin-top: var(--space-5);
    text-align: center;
}

.chaos__closing p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-closing);
    color: var(--color-surface);
}

.chaos__arrow {
    display: inline-block;
    margin-top: var(--space-3);
    color: var(--color-highlight);
    font-size: var(--fs-lead);
}

/* --- Responsivo da seção --- */
@media (max-width: 900px) {
    .chaos__desk {
        grid-template-columns: 1fr 1fr;
    }

    /* Números em 2×2 — sem divisórias verticais (quebrariam na 2ª linha) */
    .stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4) var(--space-3);
    }

    .stats__item + .stats__item {
        border-left: none;
    }
}

@media (max-width: 620px) {
    .chaos {
        padding-block: var(--space-8) var(--space-7);
    }

    .stats-band {
        padding-block: var(--space-6);
    }

    .chaos__desk {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    /* Em coluna única os deslocamentos verticais viram só respiro do gap */
    .artifact--postit,
    .artifact--push,
    .artifact--sheet,
    .artifact--toast {
        margin-top: 0;
    }
}

/* --- Movimento reduzido: tudo em repouso, visível, com a inclinação final --- */
@media (prefers-reduced-motion: reduce) {
    .artifact {
        transition: none;
        opacity: 1;
        transform: rotate(var(--tilt, 0deg));
    }

    .artifact.is-in:hover {
        transform: rotate(var(--tilt, 0deg));
    }

    .stats {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* ===== FEATURES (palco único) ===== */
/* Toda a seção numa tela: playlist das 8 features (agrupadas por momento do
   dia) à esquerda, palco à direita. O JS avança sozinho quando a barra de
   progresso sob o item ativo enche; pausa no hover; clique pula. Fundo navy
   contínuo ao caos, mas separado dele pela faixa de números / prova social. */
.stagesec {
    position: relative;
    background: radial-gradient(
        120% 140% at 50% -10%,
        var(--color-deep) 0%,
        var(--color-chaos-deep) 78%
    );
    color: var(--color-surface);
    padding: var(--space-5) 0 var(--space-6);
    overflow: clip;
}

/* --- Cabeçalho --- */
.stagesec__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-highlight);
    margin-bottom: var(--space-3);
}

.stagesec__title {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--color-surface);
    margin-bottom: var(--space-4);
}

.stagesec__title em {
    font-style: italic;
    color: var(--color-highlight);
}

.stagesec__intro {
    color: var(--chaos-text-soft);
    max-width: 40ch;
    font-size: var(--fs-body);
}

/* --- Layout: playlist (5) / palco (7) --- */
.stagesec__flow {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-5);
    align-items: start;
    margin-top: var(--space-5);
    min-height: min(68vh, 600px);
}

/* --- Playlist --- */
.playlist {
    display: grid;
    gap: var(--space-3);
}

.playlist__group {
    display: grid;
    gap: var(--space-1);
}

.playlist__label {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-lead);
    color: var(--color-brand-soft);
    margin-bottom: var(--space-1);
}

/* Item da playlist — botão de aba. Bolinha à esquerda + barra de progresso
   fina embaixo, que só aparece (e enche) no item ativo. */
.pl {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: rgba(255, 255, 255, 0.55);
    padding: var(--space-1) 0 calc(var(--space-1) + 3px) var(--space-4);
    cursor: pointer;
    transition: color var(--transition-base);
}

.pl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255, 255, 255, 0.30);
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.pl:hover,
.pl:focus-visible {
    color: var(--color-surface);
}

.pl.is-on {
    color: var(--color-surface);
}

.pl.is-on::before {
    background: var(--color-highlight);
    border-color: var(--color-highlight);
    box-shadow: 0 0 0 5px rgba(255, 106, 26, 0.20);
}

/* Item ativo pausado (usuário clicou nele): bolinha esvaziada, indica que
   está parado e que um novo clique retoma. */
.stagesec.is-paused .pl.is-on::before {
    background: transparent;
    box-shadow: 0 0 0 5px rgba(255, 106, 26, 0.12);
}

/* Trilho da barra de progresso (só visível no item ativo) */
.pl__bar {
    position: absolute;
    left: var(--space-4);
    right: 24%;
    bottom: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.pl.is-on .pl__bar {
    opacity: 1;
}

/* O preenchimento — o JS controla a duração via --pl-dur e dispara com .is-running */
.pl__bar i {
    position: absolute;
    inset: 0;
    background: var(--color-highlight);
    transform: scaleX(0);
    transform-origin: left;
}

.pl.is-on.is-running .pl__bar i {
    animation: pl-fill var(--pl-dur, 5s) linear forwards;
}

@keyframes pl-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* --- Palco ---
   Altura enxuta: as cenas 3:2 em 620px rendem ~413px de altura, então o palco
   acompanha isso em vez de deixar a imagem nadando num quadro alto (que jogava
   a legenda pra base e abria espaço morto no topo). */
.stage {
    position: relative;
    /* Dimensionado pelo slide mais alto (WhatsApp, com três mensagens); os
       demais sobram espaço e ficam centrados. */
    height: min(68vh, 600px);
}

.stage__v {
    position: absolute;
    inset: 0;
    margin: 0;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-2);
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    transition:
        opacity 0.55s var(--ease-out),
        transform 0.55s var(--ease-out);
    pointer-events: none;
}

.stage__v.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Mockups (chat, prontuário) ficam contidos; as cenas fotográficas e a
   carteirinha ocupam o palco inteiro, porque a foto é o argumento. */
.stage__v > *:first-child {
    max-width: min(480px, 100%);
    width: 100%;
}

.stage__v > .shot__card {
    max-width: min(620px, 100%);
}

/* A carteirinha do Clube é a arte mais "cheia" do palco e pedia menos escala,
   ainda mais agora que divide os 430px do palco com uma legenda de 4 linhas:
   ~430px de largura rendem ~287px de altura e sobra folga para o texto. */
.stage__v--clube > .shot__card {
    max-width: min(430px, 100%);
}

.stage__cap {
    text-align: center;
    font-size: var(--fs-notif-meta);
    font-style: italic;
    color: rgba(255, 255, 255, 0.62);
    max-width: 42ch;
}

/* Legenda explicativa (Clube): texto corrido em vez de frase de efeito — sai
   do itálico, que cansa em 4 linhas, e ganha entrelinha de leitura. Alinhado
   à esquerda (margem reta ajuda a ler o bloco), mas o bloco segue centrado
   no palco para não sair do eixo da imagem. */
.stage__cap--long {
    font-style: normal;
    font-size: var(--fs-artifact);
    line-height: 1.55;
    max-width: 54ch;
    color: rgba(255, 255, 255, 0.72);
    text-align: justify;
    /* text-wrap: pretty distribui melhor as linhas e evita órfãs; sem
       hyphens, para não quebrar palavras com hífen no fim da linha. */
    text-wrap: pretty;
}

.stage__cap b {
    font-style: normal;
    font-weight: var(--fw-bold);
    color: var(--color-highlight);
}

/* Artes finais do palco (cenas geradas + carteirinha) */
.shot__card {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.45));
}

/* --- Mockup: WhatsApp automático --- */
.wa2 {
    background: var(--color-wa-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.wa2__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-wa-header);
    color: var(--color-surface);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-artifact);
    font-weight: var(--fw-semibold);
}

.wa2__avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-wa-header);
    display: grid;
    place-items: center;
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}

.wa2__badge {
    margin-left: auto;
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-2);
    line-height: 1;
}

.wa2__body {
    padding: var(--space-3);
    display: grid;
    gap: var(--space-2);
}

.wa2__msg {
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-size: var(--fs-artifact);
    color: var(--color-text);
    line-height: 1.45;
    max-width: 88%;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition:
        opacity 0.45s var(--ease-bounce),
        transform 0.45s var(--ease-bounce);
}

.wa2__msg--out {
    background: var(--color-wa-out);
    border-bottom-right-radius: 2px;
    justify-self: end;
}

.wa2__msg--in {
    background: var(--color-surface);
    border-top-left-radius: 2px;
    justify-self: start;
}

.wa2__meta {
    display: block;
    text-align: right;
    font-size: var(--fs-micro);
    color: var(--color-wa-time);
    margin-top: var(--space-1);
}

.wa2__check {
    color: var(--color-wa-check);
    letter-spacing: -0.12em;
}

.wa2__foot {
    padding: 0 var(--space-3) var(--space-3);
    text-align: center;
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-wa-time);
}

/* Cascata das mensagens quando a feature entra */
.stage__v.is-active .wa2__msg {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.stage__v.is-active .wa2__msg:nth-child(1) { transition-delay: 0.3s; }
.stage__v.is-active .wa2__msg:nth-child(2) { transition-delay: 1s; }
.stage__v.is-active .wa2__msg:nth-child(3) { transition-delay: 1.7s; }

/* --- Mockup: prontuário eletrônico --- */
.chart {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.chart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    background: var(--color-deep);
    color: var(--color-surface);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-artifact);
    font-weight: var(--fw-semibold);
}

.chart__badge {
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-2);
    line-height: 1;
}

.chart__tabs {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-hairline);
    font-size: var(--fs-notif-meta);
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
}

.chart__tabs .is-on {
    color: var(--color-brand);
    box-shadow: 0 2px 0 var(--color-brand);
}

.chart__lines {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
}

.chart__line {
    display: block;
    width: var(--w, 80%);
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--color-chart-line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--ease-out);
}

.stage__v.is-active .chart__line { transform: scaleX(1); }
.stage__v.is-active .chart__line:nth-child(1) { transition-delay: 0.3s; }
.stage__v.is-active .chart__line:nth-child(2) { transition-delay: 0.7s; }
.stage__v.is-active .chart__line:nth-child(3) { transition-delay: 1.1s; }
.stage__v.is-active .chart__line:nth-child(4) { transition-delay: 1.5s; }

.chart__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-4);
}

.chart__chip {
    font-size: var(--fs-notif-meta);
    font-weight: var(--fw-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-chart-chip);
    color: var(--color-text-muted);
}

.chart__chip--done {
    background: var(--color-ok);
    color: var(--color-surface);
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 0.4s var(--ease-bounce),
        transform 0.4s var(--ease-bounce);
}

.stage__v.is-active .chart__chip--done {
    opacity: 1;
    transform: scale(1);
    transition-delay: 2s;
}

/* --- Mockup: chat do suporte --- */
.helpchat {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    color: var(--color-text);
}

.helpchat__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-hairline);
}

.helpchat__avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-brand), var(--color-deep));
    color: var(--color-surface);
    display: grid;
    place-items: center;
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}

.helpchat__who {
    display: grid;
    font-size: var(--fs-artifact);
    line-height: 1.35;
}

.helpchat__status {
    font-size: var(--fs-micro);
    color: var(--color-ok);
    font-weight: var(--fw-semibold);
}

.helpchat__body {
    padding: var(--space-3);
    display: grid;
    gap: var(--space-2);
}

.helpchat__msg {
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-artifact);
    line-height: 1.45;
    max-width: 88%;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition:
        opacity 0.45s var(--ease-bounce),
        transform 0.45s var(--ease-bounce);
}

.helpchat__msg--user {
    background: var(--color-chart-chip);
    justify-self: end;
    border-bottom-right-radius: 2px;
}

.helpchat__msg--agent {
    background: var(--color-brand);
    color: var(--color-surface);
    justify-self: start;
    border-top-left-radius: 2px;
}

.helpchat__msg time {
    display: block;
    text-align: right;
    font-size: var(--fs-micro);
    opacity: 0.65;
    margin-top: var(--space-1);
}

.helpchat__foot {
    padding: 0 var(--space-3) var(--space-3);
    text-align: center;
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.stage__v.is-active .helpchat__msg { opacity: 1; transform: translateY(0) scale(1); }
.stage__v.is-active .helpchat__msg--user  { transition-delay: 0.3s; }
.stage__v.is-active .helpchat__msg--agent { transition-delay: 1.4s; }

/* --- Responsivo da seção --- */
@media (max-width: 900px) {
    .stagesec__flow {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        min-height: 0;
    }

    /* Palco primeiro (visual puxa), playlist depois */
    .stage {
        order: -1;
        height: min(64vh, 490px);
    }

    .playlist {
        gap: var(--space-4);
    }
}

@media (max-width: 620px) {
    .stagesec {
        padding-block: var(--space-7);
    }

    .stage {
        height: 440px;
    }

    .pl__bar {
        right: 12%;
    }
}

/* --- Movimento reduzido: sem autoavanço, sem crossfade animado; o JS mostra
   todas as features empilhadas com o visual visível, tudo estático. --- */
.stagesec--static .stage {
    height: auto;
}

.stagesec--static .stage__v {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-bottom: var(--space-6);
}

.stagesec--static .pl__bar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .stage__v,
    .pl,
    .pl::before,
    .pl__bar {
        transition: none;
    }

    .pl__bar i {
        animation: none !important;
    }

    .wa2__msg,
    .chart__line,
    .chart__chip--done,
    .helpchat__msg {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* =====================================================================
   CLIENTES (prova social em movimento) — duas esteiras de logos em loop
   ===================================================================== */
.clients {
    background: var(--color-mist);
    padding: var(--space-6) 0 var(--space-4);
    overflow: clip;
}

/* --- Cabeçalho: discreto, porque a estrela é a esteira --- */
.clients__head {
    text-align: center;
    margin-bottom: var(--space-5);
}

.clients__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-highlight);
    margin-bottom: var(--space-2);
}

/* Menor que --fs-h2 de propósito: a frase é longa e não deve roubar
   espaço nem protagonismo da esteira. */
.clients__title {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--color-deep);
    max-width: 30ch;
    margin-inline: auto;
}

/* Mesmo acento do hero e das dores: itálico + laranja */
.clients__title em {
    font-style: italic;
    color: var(--color-highlight);
}

/* --- Esteiras --- */
.clients__belt {
    display: grid;
    gap: var(--space-3);
}

/* Fade nas bordas: as logos surgem e se dissolvem em vez de aparecerem
   cortadas na lateral da tela. */
.belt {
    overflow: hidden;
    -webkit-mask: linear-gradient(
        90deg,
        transparent 0,
        #000 12%,
        #000 88%,
        transparent 100%
    );
            mask: linear-gradient(
        90deg,
        transparent 0,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

/* A trilha tem as duas tiras repetidas 2x; deslizar -50% recoloca a cópia
   no ponto exato de onde a primeira saiu — loop sem emenda. */
.belt__track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: belt-slide var(--belt-dur, 60s) linear infinite;
}

/* Durações levemente diferentes por fileira: andando fora de sincronia, o
   conjunto respira como duas esteiras independentes, não como um bloco só. */
.belt--left .belt__track {
    --belt-dur: 64s;
}

/* Sentido oposto: mesma animação, invertida */
.belt--right .belt__track {
    --belt-dur: 52s;
    animation-direction: reverse;
}

.belt__strip {
    height: clamp(46px, 5.2vw, 74px);
    width: auto;
    flex: none;
    mix-blend-mode: multiply; /* dissolve o fundo branco das tiras no mist */
}

@keyframes belt-slide {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Cortesia: parar o movimento deixa o visitante ler uma logo específica */
.clients__belt:hover .belt__track {
    animation-play-state: paused;
}

/* --- Fecho que chama para o FAQ (mesmo gesto do "Existe um jeito mais leve") --- */
.clients__closing {
    margin-top: var(--space-4);
    text-align: center;
}

.clients__closing p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-closing);
    color: var(--color-deep);
}

.clients__arrow {
    display: inline-block;
    margin-top: var(--space-2);
    color: var(--color-highlight);
    font-size: var(--fs-lead);
    animation: clients-arrow 2.4s var(--ease-in-out) infinite;
}

@keyframes clients-arrow {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* --- Responsivo --- */
@media (max-width: 620px) {
    .clients__belt {
        gap: var(--space-2);
    }

    /* Menos percurso visível numa tela estreita: acelera um pouco para o
       movimento não parecer estagnado. */
    .belt__track {
        --belt-dur: 42s;
    }
}

/* --- Movimento reduzido: esteiras param, tudo continua legível --- */
@media (prefers-reduced-motion: reduce) {
    .belt__track,
    .clients__arrow {
        animation: none;
    }

    .belt {
        overflow-x: auto;
    }
}

/* =====================================================================
   FAQ ("Pergunte pra gente") — uma janela de chat, altura fixa
   ===================================================================== */
/* Seção curta de propósito: a janela tem altura travada em --faq-window-h e
   a conversa rola por dentro dela. Responder todas as perguntas não faz a
   página crescer um pixel. */
.faqchat {
    position: relative;
    padding: var(--space-4) 0 var(--space-6);
    background: var(--faq-bg);
    overflow: clip;
}

/* A seção acima (Clientes) é cinza-azulado: sem este degradê a emenda
   mist → salmão vira uma listra dura atravessando a página. */
.faqchat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-6);
    pointer-events: none;
    background: linear-gradient(var(--color-mist), transparent);
}

.faqchat__inner {
    position: relative; /* acima do degradê de emenda */
    z-index: 1;
}

/* --- Cabeçalho --- */
.faqchat__head {
    text-align: center;
    margin-bottom: var(--space-4);
}

/* Laranja escuro, não o --color-highlight: sobre o salmão, o laranja vivo
   fica laranja-sobre-laranja e some. */
.faqchat__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-highlight-deep);
    margin-bottom: var(--space-2);
}

.faqchat__title {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-deep);
}

.faqchat__title em {
    font-style: italic;
    color: var(--color-highlight-deep);
}

/* --- Janela: opaca, no off-white da página --- */
/* Sem vidro translúcido aqui: sobre o salmão, o branco a 30% deixaria a cor
   da seção atravessar e tingir a conversa. A janela é uma superfície própria,
   recortada do fundo. */
.faqchat__window {
    display: flex;
    flex-direction: column;
    max-width: 680px;
    margin-inline: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.faqchat__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-hairline);
    background: var(--color-surface);
}

.faqchat__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--color-brand), var(--color-deep));
    color: var(--color-surface);
    font-weight: var(--fw-bold);
    font-size: var(--fs-artifact);
    letter-spacing: 0.02em;
}

.faqchat__who {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.faqchat__who strong {
    font-size: var(--fs-artifact);
    font-weight: var(--fw-semibold);
    color: var(--color-deep);
}

/* O texto carrega a informação; o ponto verde só reforça (nunca sozinho) */
.faqchat__status {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-micro);
    color: var(--color-text-muted);
}

.faqchat__status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-ok);
    animation: faq-pulse 2.4s var(--ease-in-out) infinite;
}

@keyframes faq-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* --- Corpo da conversa: a única parte que rola --- */
.faqchat__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: var(--faq-window-h);
    padding: var(--space-4);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-hairline) transparent;
}

.faqchat__body::-webkit-scrollbar {
    width: 6px;
}

.faqchat__body::-webkit-scrollbar-thumb {
    background: var(--color-hairline);
    border-radius: var(--radius-pill);
}

/* --- Bolhas --- */
/* O canto "de origem" fica reto: é a cauda, sem desenhar um triângulo. */
.fmsg {
    position: relative;
    max-width: 78%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--fs-artifact);
    line-height: 1.5;
    animation: faq-msg-in 320ms var(--ease-out) both;
}

.fmsg--agent {
    align-self: flex-start;
    border-bottom-left-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.fmsg--user {
    align-self: flex-end;
    border-bottom-right-radius: var(--radius-sm);
    background: var(--faq-bubble-user);
    color: var(--faq-bubble-user-text);
}

/* Hora + confirmação de leitura, dentro da bolha */
.fmsg__meta {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-micro);
    color: var(--color-text-muted);
    text-align: right;
}

.fmsg--user .fmsg__meta {
    color: rgba(22, 48, 95, 0.55);
}

/* O ✓✓ nasce invisível e o JS o revela quando a mensagem é "lida" */
.fmsg__check {
    opacity: 0;
    color: var(--color-brand);
    transition: opacity var(--transition-fast);
}

.fmsg__check.is-read {
    opacity: 1;
}

/* Link de conversão dentro da última resposta */
.fmsg a {
    color: var(--color-highlight-deep);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@keyframes faq-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* --- "digitando…" --- */
.ftyping {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    animation: faq-msg-in 200ms var(--ease-out) both;
}

.ftyping span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: faq-dot 1.2s var(--ease-in-out) infinite;
}

.ftyping span:nth-child(2) { animation-delay: 0.15s; }
.ftyping span:nth-child(3) { animation-delay: 0.3s; }

@keyframes faq-dot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* --- Chips das perguntas --- */
.faqchat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-1);
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-top: 1px solid var(--color-hairline);
    background: var(--color-surface);
}

/* Etiquetas finas, não balões: as perguntas são a oferta, não o conteúdo —
   quem tem que ter corpo na janela são as bolhas da conversa. Altura travada
   para que uma pergunta longa não engorde a fila inteira. */
.fchip {
    font-family: inherit;
    font-size: var(--fs-micro);
    font-weight: var(--fw-medium);
    line-height: 1;
    height: 26px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: var(--color-brand);
    background: transparent;
    border: 1px solid rgba(27, 79, 214, 0.22);
    border-radius: var(--radius-sm);
    padding-inline: var(--space-2);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.fchip:hover {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-surface);
}

/* Chip usado: encolhe na horizontal e some, e a fila se refecha sozinha */
.fchip.is-used {
    animation: faq-chip-out 240ms var(--ease-out) forwards;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
}

@keyframes faq-chip-out {
    to {
        opacity: 0;
        max-width: 0;
        margin-right: calc(var(--space-1) * -1);
        padding-inline: 0;
        border-width: 0;
    }
}

/* Enquanto a Ana digita, os chips ficam fora de alcance */
.faqchat__chips.is-locked .fchip {
    opacity: 0.45;
    pointer-events: none;
}

/* Fecho: some quando todas as perguntas acabam (o JS troca o conteúdo) */
.faqchat__chips--done {
    justify-content: center;
    font-size: var(--fs-micro);
    color: var(--color-text-muted);
}

/* --- Responsivo --- */
@media (max-width: 620px) {
    .faqchat {
        padding: var(--space-4) 0 var(--space-5);
    }

    /* A fila de perguntas ocupa mais linhas aqui; a conversa cede a altura
       para a seção continuar curta. */
    .faqchat__window {
        --faq-window-h: min(46vh, 340px);
    }

    .fmsg {
        max-width: 86%;
    }

    /* Todas as perguntas visíveis de uma vez: numa tela estreita, rolagem
       lateral esconde metade delas e o visitante não sabe que existem. Elas
       quebram em várias linhas, e a janela encolhe para compensar a altura
       que a fila ocupa. */
    .faqchat__chips {
        padding-inline: var(--space-3);
    }

    /* Sem nowrap aqui: uma pergunta longa passaria da largura da tela.
       Ela quebra dentro do próprio chip, que então cresce em altura. */
    .fchip {
        height: auto;
        min-height: 26px;
        white-space: normal;
        text-align: left;
        padding-block: 5px;
        line-height: 1.25;
    }
}

/* --- Movimento reduzido: tudo estático, nada pisca --- */
@media (prefers-reduced-motion: reduce) {
    .fmsg,
    .ftyping,
    .ftyping span,
    .faqchat__status::before {
        animation: none;
    }

    .fchip.is-used {
        display: none;
    }
}

/* =====================================================================
   CTA FINAL — faixa curta de conversão
   ===================================================================== */
/* Área própria, não continuação do FAQ: o salmão termina na conversa e o
   CTA volta ao off-white da página. A troca de fundo é a divisão — são
   duas áreas distintas, não um bloco só. Sem escurecer de novo: o escuro
   fica reservado ao rodapé. */
.finale {
    position: relative;
    padding: var(--space-6) 0;
    background: var(--color-bg);
    text-align: center;
}

.finale__inner {
    max-width: 620px;
    margin-inline: auto;
}

/* Pílula de contorno: a borda usa currentColor, então acompanha a cor do
   texto sem repetir o valor. */
.finale__eyebrow {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-highlight-deep);
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
}

.finale__title {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--color-deep);
}

.finale__title em {
    font-style: italic;
    color: var(--color-highlight-deep);
}

/* O botão é o único elemento saturado da faixa — o olho não tem para onde
   ir além dele. */
.finale__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background: var(--color-highlight);
    color: var(--color-surface);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 26px rgba(255, 106, 26, 0.28);
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.finale__cta:hover {
    background: var(--color-highlight-deep);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(255, 106, 26, 0.34);
}

.finale__cta-arrow {
    transition: transform var(--transition-fast);
}

.finale__cta:hover .finale__cta-arrow {
    transform: translateX(4px);
}

.finale__note {
    margin-top: var(--space-3);
    font-size: var(--fs-notif-meta);
    color: var(--color-text-muted);
}

/* =====================================================================
   RODAPÉ
   ===================================================================== */
/* Onde a página realmente acaba — o único escuro depois do FAQ.
   Quatro colunas, títulos em turquesa, filete acima do copyright. */
.foot {
    background: var(--foot-bg);
    color: var(--finale-text);
}

.foot__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--space-5);
    padding-block: var(--space-6) var(--space-5);
}

.foot__label {
    font-size: var(--fs-artifact);
    font-weight: var(--fw-semibold);
    color: var(--foot-teal);
    margin-bottom: var(--space-3);
}

.foot__pitch {
    max-width: 34ch;
    font-size: var(--fs-artifact);
    line-height: 1.65;
    color: var(--finale-text);
}

.foot__list {
    list-style: none;
    display: grid;
    gap: var(--space-2);
    font-size: var(--fs-artifact);
    line-height: 1.5;
}

.foot__list a {
    color: var(--finale-text);
    transition: color var(--transition-fast);
}

.foot__list a:hover {
    color: var(--color-highlight);
}

/* Horários não são links: ficam num tom abaixo para não parecerem clicáveis */
.foot__list--plain {
    color: var(--finale-dim);
}

/* Ícones no lugar dos nomes das redes */
.foot__social {
    display: flex;
    gap: var(--space-4);
}

/* Ícones do Font Awesome: o tamanho vem do font-size, não de width/height */
.foot__social a {
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--finale-text);
    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.foot__social a:hover {
    color: var(--foot-teal);
    transform: translateY(-2px);
}

.foot__base {
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--finale-rule);
    font-size: var(--fs-micro);
    color: var(--finale-dim);
    text-align: center;
}

/* --- Responsivo --- */
@media (max-width: 860px) {
    .foot__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5) var(--space-4);
    }
}

@media (max-width: 620px) {
    .finale__cta {
        /* Alvo confortável no polegar, sem encostar nas bordas da tela */
        width: 100%;
        max-width: 340px;
        justify-content: center;
    }

    .foot__inner {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding-block: var(--space-5) var(--space-4);
    }
}

/* --- Movimento reduzido --- */
@media (prefers-reduced-motion: reduce) {
    .foot__social a:hover {
        transform: none;
    }
}

/* =====================================================================
   MODAL DE LEAD — formulário do CTA
   ===================================================================== */
.leadmodal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.leadmodal[hidden] {
    display: none;
}

/* O fundo escurece a página e captura o clique de fechar */
.leadmodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 23, 53, 0.55);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    animation: lead-fade 200ms var(--ease-out);
}

/* Compacto de propósito: o formulário inteiro tem que caber na tela sem
   rolagem. O overflow existe só como rede de segurança para telas muito
   baixas (notebook em 768px de altura, por exemplo). */
.leadmodal__panel {
    position: relative;
    width: min(100%, 470px);
    max-height: calc(100vh - var(--space-4));
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: lead-rise 260ms var(--ease-out);
}

@keyframes lead-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lead-rise {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.leadmodal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--color-text-muted);
    background: var(--color-mist);
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.leadmodal__close:hover {
    background: var(--color-highlight);
    color: var(--color-surface);
}

.leadmodal__logo {
    width: 158px;
    height: auto;
    margin: 0 auto var(--space-3);
}

/* Armadilha anti-bot: fora da tela em vez de display:none, porque bots mais
   espertos ignoram campos explicitamente ocultos. Aqui o campo existe no
   DOM, é preenchível por script e invisível para gente. */
.lead-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Campos --- */
.lead-field {
    margin-bottom: var(--space-2);
}

.lead-field label {
    display: block;
    margin-bottom: 3px;
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--color-deep);
}

.lead-req {
    color: var(--color-highlight);
}

/* Caixinha: borda em todos os lados, nunca underline */
.lead-field input,
.lead-field select {
    width: 100%;
    height: 42px;
    padding-inline: var(--space-3);
    font-family: inherit;
    font-size: var(--fs-artifact);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-sm);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

/* Nome e clínica ficam como a pessoa digitou. Só o e-mail é forçado a
   minúsculo (o JS normaliza o valor real; aqui é só a aparência). */
.lead-field input[type="email"] {
    text-transform: lowercase;
}

.lead-field input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
    text-transform: none;
}

.lead-field input:focus,
.lead-field select:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(27, 79, 214, 0.12);
}

.lead-field select {
    cursor: pointer;
    appearance: none;
    /* Seta do select desenhada em SVG inline — sem arquivo externo */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6577' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 18px;
    padding-right: var(--space-6);
}

/* WhatsApp e função lado a lado, como no print */
.lead-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* --- Erros --- */
.lead-error {
    display: none;
    margin-top: var(--space-1);
    font-size: var(--fs-micro);
    color: var(--color-ink-red);
}

.lead-error.is-on {
    display: block;
}

.lead-field.has-error input,
.lead-field.has-error select {
    border-color: var(--color-ink-red);
}

/* Aviso geral do formulário (falha de rede, limite de envios, etc.) */
.lead-alert {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-micro);
    color: var(--color-ink-red);
    background: rgba(211, 58, 44, 0.08);
    border-radius: var(--radius-sm);
}

.lead-alert[hidden] {
    display: none;
}

/* Moldura do reCAPTCHA enquanto ele não existe */
/* O widget do Google tem 304x78 fixos; aqui só centralizamos. Sem moldura
   própria: a caixa dele já tem borda. */
.lead-captcha {
    display: flex;
    justify-content: center;
    margin-block: var(--space-3);
}

/* Em telas estreitas o widget não cabe nos 304px e vaza para fora do modal.
   O transform encolhe sem cortar (media query mais abaixo). */
.lead-captcha .g-recaptcha {
    transform-origin: center;
}

/* --- Botão de envio --- */
.lead-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 48px;
    font-size: var(--fs-artifact);
    font-weight: var(--fw-semibold);
    color: var(--color-surface);
    background: var(--color-highlight);
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 20px rgba(255, 106, 26, 0.26);
    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.lead-submit:hover:not(:disabled) {
    background: var(--color-highlight-deep);
    transform: translateY(-1px);
}

.lead-submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.lead-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--fs-micro);
    color: var(--color-text-muted);
}

.lead-note i {
    color: var(--color-ok);
}

/* --- Confirmação --- */
.lead-done {
    text-align: center;
    padding: var(--space-4) 0;
}

.lead-done[hidden] {
    display: none;
}

.lead-done__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-3);
    font-size: 1.5rem;
    color: var(--color-surface);
    background: var(--color-ok);
    border-radius: 50%;
}

/* Aviso de confirmação usa a fonte de corpo, e não a display: a serifada
   editorial pesa demais num retorno curto de sistema. */
.lead-done h3 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    color: var(--color-deep);
    margin-bottom: var(--space-2);
}

.lead-done p {
    font-size: var(--fs-artifact);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.lead-done__btn {
    padding: var(--space-2) var(--space-5);
    font-weight: var(--fw-semibold);
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-pill);
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.lead-done__btn:hover {
    background: var(--color-brand);
    color: var(--color-surface);
}

/* Botão de WhatsApp na confirmação: ação principal (verde sólido), então
   vem antes do "Fechar" e o empurra para o papel secundário. Aparece só
   quando o JS recebe o link do servidor. */
.lead-done__wa {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-5);
    font-weight: var(--fw-semibold);
    color: var(--color-surface);
    background: var(--color-wa-badge);
    border-radius: var(--radius-pill);
    transition: filter var(--transition-fast);
}

.lead-done__wa:hover {
    filter: brightness(0.94);
}

.lead-done__wa[hidden] {
    display: none;
}

/* Contador de redirecionamento: entre a mensagem e o botão, com presença —
   é o aviso de que a pessoa está prestes a ser levada ao WhatsApp. */
.lead-done__timer {
    font-size: 1.05rem;
    color: var(--color-deep);
    margin-bottom: var(--space-4);
}

.lead-done__timer[hidden] {
    display: none;
}

.lead-done__timer b {
    display: inline-block;
    min-width: 1.4em;
    padding: 0.05em 0.4em;
    font-size: 1.25rem;
    font-weight: var(--fw-semibold);
    color: var(--color-surface);
    background: var(--color-wa-badge);
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums; /* o número não "pula" ao trocar */
}

/* Com o WhatsApp presente, "Fechar" recua para link discreto. */
.lead-done__wa:not([hidden]) ~ .lead-done__btn {
    display: block;
    margin: 0 auto;
    border-color: transparent;
    color: var(--color-text-muted);
}

/* --- Responsivo --- */
@media (max-width: 620px) {
    .leadmodal {
        padding: var(--space-2);
    }

    .leadmodal__panel {
        padding: var(--space-4);
        max-height: calc(100vh - var(--space-4));
    }

    /* Empilha: dois campos lado a lado ficam apertados demais no celular */
    .lead-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* O widget tem largura fixa de 304px e estouraria o modal num celular
       estreito; encolhe proporcionalmente. */
    .lead-captcha .g-recaptcha {
        transform: scale(0.88);
    }
}

/* --- Movimento reduzido --- */
@media (prefers-reduced-motion: reduce) {
    .leadmodal__backdrop,
    .leadmodal__panel {
        animation: none;
    }

    .lead-submit:hover:not(:disabled) {
        transform: none;
    }
}

/* --- Movimento reduzido: o botão continua reagindo, mas sem deslocamento --- */
@media (prefers-reduced-motion: reduce) {
    .finale__cta:hover {
        transform: none;
    }

    .finale__cta:hover .finale__cta-arrow {
        transform: none;
    }
}


/* ==========================================================================
   MODAL INSTITUCIONAL (Política de Privacidade / Sobre a Empresa)
   Painel único, alto e com rolagem interna: são documentos longos, ao
   contrário do modal de lead, que é curto e cabe inteiro na tela.
   O cabeçalho e o rodapé ficam fixos; só o miolo rola.
   ========================================================================== */

.docmodal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.docmodal[hidden] {
    display: none;
}

.docmodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 23, 53, 0.55);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    animation: lead-fade 200ms var(--ease-out);
}

/* Grid de três faixas: cabeçalho e rodapé com altura própria, corpo ocupando
   o resto. É o que mantém os dois presos enquanto o texto rola. */
.docmodal__panel {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(100%, 720px);
    max-height: min(84vh, 780px);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: lead-rise 260ms var(--ease-out);
}

/* --- Cabeçalho --- */

.docmodal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid rgba(14, 27, 51, 0.10);
}

.docmodal__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--color-deep);
}

.docmodal__icon {
    color: var(--color-brand);
    font-size: 1.1rem;
}

.docmodal__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--color-text-muted);
    border-radius: 50%;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.docmodal__close:hover {
    background: rgba(14, 27, 51, 0.06);
    color: var(--color-text);
}

/* --- Corpo rolável --- */

.docmodal__body {
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
    /* overscroll-behavior impede que o scroll "vaze" para a página atrás
       quando o texto chega ao fim. */
    overscroll-behavior: contain;
}

.docmodal__body:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: -4px;
}

/* --- Conteúdo dos documentos --- */

.doc[hidden] {
    display: none;
}

.doc h3 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: 1.0625rem;
    color: var(--color-brand);
    margin-bottom: var(--space-2);
}

.doc h3:not(:first-child) {
    margin-top: var(--space-5);
}

.doc h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: 0.9875rem;
    color: var(--color-deep);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.doc h4 i {
    color: var(--color-brand-soft);
}

.doc p {
    font-size: var(--fs-artifact);
    line-height: 1.65;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.doc ul {
    list-style: none;
    margin-bottom: var(--space-3);
}

.doc ul li {
    position: relative;
    padding-left: var(--space-4);
    font-size: var(--fs-artifact);
    line-height: 1.65;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

/* Marcador próprio: o disc padrão do navegador destoa do resto da página. */
.doc ul li::before {
    content: "";
    position: absolute;
    left: var(--space-2);
    top: 0.6em;
    width: 5px;
    height: 5px;
    background: var(--color-brand-soft);
    border-radius: 50%;
}

.doc ul li strong {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.doc a {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.doc a:hover {
    color: var(--color-deep);
}

/* Listas de dados (CNPJ, endereço, contato): rótulo acima do valor, sem
   marcador — é ficha técnica, não enumeração. */
.doc__data li {
    padding-left: 0;
    margin-bottom: var(--space-3);
}

.doc__data li::before {
    display: none;
}

.doc__key {
    display: block;
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text);
    margin-bottom: 2px;
}

.doc__meta {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(14, 27, 51, 0.10);
    font-size: var(--fs-micro);
    color: var(--color-text-muted);
}

/* --- Rodapé --- */

.docmodal__foot {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid rgba(14, 27, 51, 0.10);
}

.docmodal__ok {
    padding: var(--space-2) var(--space-6);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-artifact);
    color: var(--color-surface);
    background: var(--color-brand);
    border-radius: var(--radius-pill);
    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.docmodal__ok:hover {
    background: var(--color-deep);
}

.docmodal__ok:active {
    transform: translateY(1px);
}

/* --- Responsivo --- */
@media (max-width: 620px) {
    .docmodal {
        padding: var(--space-2);
    }

    .docmodal__panel {
        max-height: calc(100vh - var(--space-3));
    }

    .docmodal__head,
    .docmodal__body,
    .docmodal__foot {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .docmodal__title {
        font-size: 1.1rem;
    }

    .docmodal__ok {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .docmodal__panel,
    .docmodal__backdrop {
        animation: none;
    }
}