/* ==========================================================================
   SoftPay — sistema visual 2.0
   --------------------------------------------------------------------------
   Rebranding de 17/09/2026. Referência medida: stone.com.br (de ref).

   O que a Stone faz e foi trazido:
     · escala tipográfica curta com salto brutal entre texto e display
     · display condensado, caixa alta, entrelinha menor que 1
     · uma cor de energia usada com disciplina, sobre base escura
       (aqui ela é o azul do próprio logotipo do SoftPay, não o verde dela:
        a identidade da marca foi mantida — decisão do Victor, 17/09/2026)
     · pílula (raio 9999px) como forma assinatura
     · fotografia real em sangria total, sem moldura
     · quase nenhuma sombra: cor e forma fazem o trabalho

   O que a Stone faz e NÃO foi trazido (defeito medido na referência):
     · 18,5 telas de rolagem no celular contra 15,1 no desktop — o celular
       dela é MAIS longo que o desktop. Aqui a doutrina é o contrário.
     · seções de baixa densidade, com metade da altura vazia
     · 1.690 elementos com transição no celular

   Escala: 7 degraus (a Stone tem 6; o SoftPay antigo tinha 14).
   Sombras: 2 (o SoftPay antigo tinha 8).

   Tipografia da Stone (25/09/2026): Roobert (Displaay) no texto e ABC Gravity
   X Compressed (Dinamo) no display. As duas são pagas e o próprio arquivo da
   Gravity proíbe hospedar em servidor público — então o desenho foi medido e
   reproduzido com fontes OFL, glifo a glifo (mesma altura de maiúscula,
   interseção sobre união dos pixels):
     · SoftPay Display = Roboto Flex fixada em wdth 28 · wght 650 · opsz 144,
       com o espaço estreitado ao da Gravity. Parecença 0,875 (a Archivo, que
       estava aqui, dava 0,577). Mesma largura de frase: 1,004×.
     · SoftPay Texto = Funnel Sans em 350/450/625/725, servida como
       400/500/600/700 — os pesos que casam com os quatro da Roobert.
       Parecença 0,81–0,87; largura de frase 0,99×.
   Comprou a licença? Troque só os src do @font-face abaixo; os nomes de
   família e o resto do arquivo não mudam.
   ========================================================================== */

/* ----------------------------------------------------------------- 0. FONTES */
@font-face {
    font-family: 'SoftPay Display';
    src: url('/fontes/softpay-display-v1.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SoftPay Texto';
    src: url('/fontes/softpay-texto-400-v1.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SoftPay Texto';
    src: url('/fontes/softpay-texto-400-italico-v1.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'SoftPay Texto';
    src: url('/fontes/softpay-texto-500-v1.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SoftPay Texto';
    src: url('/fontes/softpay-texto-600-v1.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SoftPay Texto';
    src: url('/fontes/softpay-texto-700-v1.woff2') format('woff2');
    font-weight: 700 900; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
    /* --- Marca ---
       Azul-noite como base e lima elétrico como energia. O #1DA1F2 antigo
       (azul do Twitter) sobrevive só como acento de logotipo: sobre branco
       ele dá 2,4:1, contraste insuficiente para texto. */
    --noite:        #06121F;
    --noite-2:      #0B2033;
    --noite-3:      #123048;

    --azul:         #0C5C9E;   /* branco por cima: 6,91:1 — texto, links e ação */
    --azul-forte:   #084A81;
    --azul-vapor:   #E8F3FB;

    /* A cor de energia é o azul do logotipo. Ele não serve para texto sobre
       branco (2,83:1) — mas sobre o azul-noite dá 6,67:1, e com tinta escura
       por cima, também 6,67:1. É lá que ele vira protagonista. */
    --acento:       #1DA1F2;
    --acento-forte: #7FC8F5;   /* rótulo em fundo escuro: 10,31:1 */
    --acento-vapor: #E8F3FB;

    /* --- Neutros --- */
    --branco:       #FFFFFF;
    --nevoa:        #F4F7FA;
    --nevoa-2:      #E9EFF4;
    --linha:        #DCE5EC;
    --linha-forte:  #C3D0DB;
    --tinta:        #0A1A28;   /* corpo */
    --tinta-2:      #46596B;   /* 5,3:1 sobre branco */
    --tinta-3:      #627483;   /* 4,83:1 sobre branco — apoio, não texto corrido */

    /* --- Semânticas --- */
    --ok:           #067A4C;
    --atencao:      #B45309;

    /* --- Superfícies --- */
    --fundo:        var(--branco);
    --sup-alt:      var(--nevoa);
    --sup-escura:   var(--noite);

    /* --- Tipografia ---
       A da Stone, reproduzida em OFL (ver o cabeçalho): display
       ultracondensado de largura única, como a Gravity X Compressed — por
       isso nenhuma regra usa font-stretch —, e grotesca de algarismos
       abertos no corpo, como a Roobert. */
    --fonte:   'SoftPay Texto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --display: 'SoftPay Display', 'Arial Narrow', var(--fonte);
    /* A Gravity ocupa ~60% da largura da Archivo no mesmo corpo: é por isso
       que a Stone usa o display maior (72px no desktop, 56px no celular).
       Todo tamanho de display passa por este fator, que devolve a presença
       dos títulos sem estourar a altura das seções. */
    --display-k: 1.25;
    /* No hero do desktop o título divide a linha com a tela do sistema e
       tem coluna de sobra: ali ele volta à largura que a Archivo ocupava. */
    --display-k-hero: 1.6;

    /* 7 degraus, fluidos de 360 a 1440px. Nenhum tamanho fora desta lista. */
    --t-xs:   0.75rem;                                  /* 12px  — rótulo */
    --t-sm:   0.875rem;                                 /* 14px  — apoio */
    --t-md:   clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); /* 16→17 — corpo */
    --t-lg:   clamp(1.1875rem, 1.08rem + 0.48vw, 1.375rem);  /* 19→22 */
    --t-xl:   clamp(1.625rem, 1.3rem + 1.44vw, 2.25rem);     /* 26→36 */
    --t-2xl:  clamp(2.375rem, 1.5rem + 3.9vw, 4rem);         /* 38→64 */
    --t-3xl:  clamp(3.25rem, 1.2rem + 9.1vw, 6.5rem);        /* 52→104 */

    /* --- Espaço --- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-sec: clamp(2.75rem, 1.6rem + 5.1vw, 6rem);   /* 44→96 */
    --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);

    /* --- Forma --- */
    --r-pill: 9999px;
    --r-lg:   1.75rem;
    --r-md:   1.125rem;
    --r-sm:   0.625rem;

    /* --- Sombra: duas, e só. --- */
    --sombra-1: 0 1px 2px rgba(6, 18, 31, 0.06);
    --sombra-2: 0 18px 44px -14px rgba(6, 18, 31, 0.26);

    /* --- Medidas --- */
    --shell: 78rem;
    --nav-h: 4.5rem;

    --mola: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--t-md);
    line-height: 1.6;
    color: var(--tinta);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;   /* clip, não hidden: não cria contexto de rolagem */
}

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: max(1rem, var(--t-md)); }  /* iOS não dá zoom */

/* Todo filho de flex/grid que carrega texto precisa poder encolher. */
:where(.grade, .duo, .trio, .quad, .dividido, .alterna, .cluster) > * { min-width: 0; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* --------------------------------------------------------- 3. TIPOGRAFIA */
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-weight: 700; line-height: 1.15; }
p  { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* O display é o gesto da marca: ultracondensado, caixa alta, entrelinha < 1.
   A largura vem do próprio desenho da SoftPay Display (uma só, como a
   Gravity X Compressed da Stone), não de font-stretch. */
.display {
    font-family: var(--display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: 0.005em;
    margin: 0;
    text-wrap: balance;
}
.display--hero    { font-size: calc(var(--t-3xl) * var(--display-k)); }
.display--secao   { font-size: calc(var(--t-2xl) * var(--display-k)); }
.display--cartao  { font-size: calc(var(--t-xl) * var(--display-k)); line-height: 1.04; }

/* Mancha de leitura: 66ch. Não confundir com a largura de composição. */
.leitura { max-width: 62ch; }
.leitura--centro { margin-inline: auto; }

.rotulo {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--azul);
    margin: 0 0 var(--sp-3);
}
.rotulo--claro { color: var(--acento-forte); }

.apoio  { font-size: var(--t-sm); color: var(--tinta-2); }
.grande { font-size: var(--t-lg); color: var(--tinta-2); line-height: 1.5; }

.acento { color: var(--azul); }
.acento--em-escuro { color: var(--acento); }

/* --------------------------------------------------- 4. LAYOUT: PRIMITIVAS */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.secao { padding-block: var(--sp-sec); }
.secao--escura { background: var(--noite); color: var(--branco); }
.secao--escura h2, .secao--escura h3 { color: var(--branco); }
.secao--escura .grande, .secao--escura .apoio { color: rgba(255, 255, 255, 0.76); }
.secao--alt { background: var(--sup-alt); }

.cabeca-secao { margin-bottom: var(--sp-6); }
.cabeca-secao--centro { text-align: center; }
.cabeca-secao--centro .leitura { margin-inline: auto; }

/* Grade que nunca estoura: o min() impede a coluna de exceder o container. */
.grade {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 9.5rem)), 1fr));
}

/* Composições fixas — celular já em 2 colunas, por doutrina. */
.duo, .trio, .quad {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40rem) {
    .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .duo, .trio, .quad { gap: var(--sp-4); }
}
@media (min-width: 64rem) {
    .duo, .trio, .quad { gap: var(--sp-5); }
}
.largo { grid-column: 1 / -1; }

/* Texto + mídia: lado a lado só quando cada lado tem 20rem de sobra. */
.dividido {
    display: grid;
    gap: var(--sp-5);
    align-items: center;
}
@media (min-width: 60rem) {
    .dividido { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
    .dividido--texto-maior { grid-template-columns: 1.05fr 0.95fr; }
}

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
/* Par de CTAs dividindo a linha no celular, tamanho do conteúdo no desktop. */
.cluster--cta > * { flex: 1 1 9rem; }
@media (min-width: 40rem) { .cluster--cta > * { flex: 0 0 auto; } }

.pilha { display: grid; gap: var(--sp-4); }

/* Sangria total: a foto rompe o shell e vai de borda a borda. */
.sangria {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* ---------------------------------------------------------- 5. BOTÕES */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 3rem;             /* 48px: acima dos 44px de alvo de toque */
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--t-md);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s var(--mola), background-color 0.16s linear,
                border-color 0.16s linear, color 0.16s linear;
}
.btn:active { transform: scale(0.98); }

/* Ação em fundo claro: azul da marca com branco por cima (6,91:1). */
.btn--acao {
    background: var(--azul);
    color: var(--branco);
    font-weight: 700;
}
/* Ação em fundo escuro: azul com texto BRANCO. Até 25/09/2026 era o azul do logotipo
   com tinta escura por cima, e o Victor reprovou: preto no azul não realça. O degradê
   fica escuro o bastante para o branco dar 4,6:1 no meio do botão. */
.hero .btn--acao,
.secao--escura .btn--acao,
.plano--destaque .btn--acao,
.gaveta .btn--acao {
    background: linear-gradient(180deg, #1A7FD2 0%, #1570C3 50%, #0D63B0 100%);
    color: var(--branco);
    text-shadow: 0 1px 0 rgba(3, 10, 18, 0.25);
}
.btn--linha  { background: transparent; color: var(--tinta); border-color: var(--linha-forte); }
.btn--fantasma-claro { background: rgba(255,255,255,0.14); color: var(--branco); border-color: rgba(255,255,255,0.55); }
.btn--grande { min-height: 3.5rem; padding-inline: 1.75rem; font-size: var(--t-lg); }
.btn--bloco  { width: 100%; }

@media (hover: hover) and (pointer: fine) {
    .btn--acao:hover   { background: var(--azul-forte); transform: translateY(-2px); }
    .hero .btn--acao:hover, .secao--escura .btn--acao:hover,
    .plano--destaque .btn--acao:hover, .gaveta .btn--acao:hover { background: linear-gradient(180deg, #1B84D8 0%, #1676CA 50%, #0F68B8 100%); }
    
    .btn--linha:hover  { border-color: var(--azul); color: var(--azul); }
    .btn--fantasma-claro:hover { background: rgba(255,255,255,0.2); }
}

/* Link com seta que anda no hover. */
.link-seta {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 2.75rem;
    color: var(--azul); font-weight: 600; text-decoration: none;
}
.link-seta svg { transition: transform 0.2s var(--mola); }
.secao--escura .link-seta { color: var(--acento); }
@media (hover: hover) and (pointer: fine) {
    .link-seta:hover svg { transform: translateX(4px); }
}

/* --------------------------------------------------- 6. NAVBAR (pílula) */
.nav {
    position: fixed;
    inset: 0.75rem var(--gutter) auto;
    z-index: 100;
    max-width: calc(var(--shell) - 2 * var(--gutter));
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 3.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--r-pill);
    box-shadow: var(--sombra-2);
}
.nav__logo { flex: 0 0 auto; display: flex; align-items: center; }
.nav__logo img { height: 1.75rem; width: auto; }
.nav__menu { display: none; }
.nav__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.nav__link {
    color: var(--tinta); text-decoration: none; font-size: var(--t-sm);
    font-weight: 500; padding: 0.5rem 0.625rem; border-radius: var(--r-sm);
    white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .nav__link:hover { color: var(--azul); } }

.nav__entrar { display: none; }

.nav__hamburguer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem;
    background: var(--nevoa); border: 0; border-radius: var(--r-pill);
    color: var(--tinta); cursor: pointer;
}
@media (min-width: 62rem) {
    .nav__menu {
        display: flex; align-items: center; gap: var(--sp-2);
        /* centro real da barra: o menu sai do fluxo lateral e se ancora no
           meio, então não depende da largura do logotipo nem dos botões */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .nav__hamburguer { display: none; }
    .nav__entrar { display: inline-flex; }
}

/* Gaveta do celular */
.gaveta {
    position: fixed; inset: 0; z-index: 99;
    display: grid; align-content: start; gap: var(--sp-1);
    padding: calc(var(--nav-h) + 1.5rem) var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
    background: var(--branco);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.32s var(--mola), visibility 0.32s;
    overflow-y: auto;
}
.gaveta[data-aberta="sim"] { transform: translateY(0); visibility: visible; }
.gaveta a {
    display: flex; align-items: center; min-height: 3.25rem;
    padding: 0 var(--sp-3);
    font-size: var(--t-lg); font-weight: 600;
    color: var(--tinta); text-decoration: none;
    border-bottom: 1px solid var(--linha);
}
.gaveta .btn { margin-top: var(--sp-4); }

/* ------------------------------------------------------------- 7. HERO */
.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 0;                    /* no celular: a altura do conteúdo */
    padding-block: calc(var(--nav-h) + 3.5rem) var(--sp-7);
    color: var(--branco);
    background: var(--noite);
    overflow: hidden;
    isolation: isolate;
}
.hero__foto {
    position: absolute; z-index: -3;
    inset: -3rem 0 auto 0;
    width: 100%; height: calc(100% + 6rem);
    object-fit: cover;
    object-position: 72% 50%;
}
/* Véu: a foto continua legível como cena, o texto ganha 8:1 de contraste. */
.hero__veu {
    position: absolute; inset: 0; z-index: -2;
    background:
        linear-gradient(180deg, rgba(6,18,31,0.74) 0%, rgba(6,18,31,0.42) 42%, rgba(6,18,31,0.86) 100%),
        linear-gradient(94deg, rgba(6,18,31,0.92) 0%, rgba(6,18,31,0.34) 64%, rgba(6,18,31,0.16) 100%);
}
.hero__conteudo { max-width: 46rem; }
.hero .display--hero { margin-bottom: var(--sp-4); }
.hero__sub {
    font-size: var(--t-lg);
    color: rgba(255, 255, 255, 0.82);
    max-width: 34ch;
    margin-bottom: var(--sp-5);
}
.hero__selo {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 2.25rem; padding: 0.375rem 0.875rem 0.375rem 0.375rem;
    margin-bottom: var(--sp-5);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--r-pill);
    color: var(--branco); text-decoration: none;
    font-size: var(--t-sm);
}
.hero__selo b {
    padding: 0.125rem 0.5rem; border-radius: var(--r-pill);
    background: #1570C3; color: var(--branco);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.hero__nota {
    display: flex; align-items: center; gap: var(--sp-2);
    margin: var(--sp-4) 0 0;
    font-size: var(--t-sm); color: rgba(255, 255, 255, 0.72);
}
.hero__nota svg { flex: 0 0 auto; color: var(--acento); }

.hero__prova {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-top: var(--sp-5); padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero__prova-fotos { display: flex; flex: 0 0 auto; }
.hero__prova-fotos img {
    width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill);
    border: 2px solid var(--noite); background: var(--branco);
    object-fit: cover;
}
.hero__prova-fotos img + img { margin-left: -0.625rem; }
.hero__prova p { margin: 0; font-size: var(--t-sm); color: rgba(255, 255, 255, 0.82); }
.hero__prova strong { color: var(--branco); }

/* ------------------------------------------- 8. ESTEIRA (pílulas correndo) */
.esteira { overflow: hidden; padding-block: var(--sp-2); }
.esteira__trilho {
    display: flex; gap: var(--sp-3); width: max-content;
    animation: correr var(--dur, 46s) linear infinite;
}
.esteira--volta .esteira__trilho { animation-direction: reverse; }
@keyframes correr { to { transform: translateX(-50%); } }

/* 26/09/2026 (pedido do Victor: o trecho "maior e mais intuitivo", com os ícones 3D
   dele): a pílula cresceu de 48 para 64px, o rótulo de 14 para 16px e a marca deixou
   de ser um traço num círculo — é o ícone 3D do recurso, que diz o que é antes da
   leitura. A esteira para sob o ponteiro, para dar tempo de ler. */
.pilula {
    display: inline-flex; align-items: center; gap: 0.625rem;
    flex: 0 0 auto;
    min-height: 4rem; padding: 0.375rem 1.5rem 0.375rem 0.5rem;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-pill);
    font: inherit; font-size: 1rem; font-weight: 600; white-space: nowrap;
    color: var(--tinta); text-decoration: none;
    cursor: pointer; appearance: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* o "+" no fim diz que a pílula abre alguma coisa (26/09: cada uma abre a prévia) */
.pilula__mais {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 1.5rem; height: 1.5rem; margin-left: 0.125rem;
    border-radius: 50%; background: var(--acento-vapor); color: var(--azul);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease, color 0.2s ease;
}
button.pilula:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
button.pilula:active { transform: scale(0.97); }
.pilula__marca {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 3.25rem; flex: 0 0 auto;
}
.pilula__marca img {
    display: block; width: 100%; height: 100%;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pilula--foto { padding: 0; border: 0; background: none; }
.pilula--foto img {
    width: 9rem; height: 4rem; object-fit: cover;
    border-radius: var(--r-pill);
}
/* a esteira para sob o ponteiro e enquanto a prévia está aberta */
html:has(.previa[open]) .esteira__trilho,
html:has(.previa-flutua.is-visivel) .esteira__trilho { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
    .esteira:hover .esteira__trilho { animation-play-state: paused; }
    button.pilula:hover { border-color: var(--azul); }
    button.pilula:hover .pilula__marca img { transform: translateY(-2px) rotate(-6deg) scale(1.08); }
    button.pilula:hover .pilula__mais { background: var(--azul); color: var(--branco); transform: rotate(90deg); }
}

/* Esteira parada (quem pediu menos movimento) — 20/09/2026.
   Antes virava `overflow-x: auto`: rolagem lateral dentro do componente, que a
   doutrina proibe, com a ultima pilula fora da viewport em 360px. Trocar por
   quebra de linha sozinha nao servia: o trilho tem o dobro de pilulas (o eco
   que faz a animacao dar a volta em translateX -50%), entao no desktop crescia
   248px e o auditor ainda acusava 2.326px de conteudo cortado.
   Parado, o eco nao serve para nada: some, e as 17 pilulas reais quebram em
   linhas. Nada rola, nada fica escondido. */
@media (prefers-reduced-motion: reduce) {
    .esteira { overflow: hidden; }
    .esteira__trilho {
        animation: none;
        flex-wrap: wrap; width: 100%; justify-content: center;
    }
    .esteira__trilho > [data-eco] { display: none; }
}

/* --------------------------------------------------------- 9. NÚMEROS */
.numero {
    display: grid; align-content: start; gap: var(--sp-1);
    padding: var(--sp-4);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    height: 100%;
}
.secao--escura .numero {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}
.numero__valor {
    font-family: var(--display); font-weight: 800;
    font-size: calc(var(--t-xl) * var(--display-k)); line-height: 1; color: var(--azul);
}
.secao--escura .numero__valor { color: var(--acento); }
.numero__rotulo { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.35; }
.secao--escura .numero__rotulo { color: rgba(255, 255, 255, 0.72); }

/* ---------------------------------------------------------- 10. CARTÕES */
.cartao {
    display: grid; align-content: start; gap: var(--sp-2);
    height: 100%; padding: var(--sp-4);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    text-decoration: none; color: inherit;
    transition: border-color 0.18s linear, transform 0.18s var(--mola);
}
.cartao h3 { font-size: var(--t-md); font-weight: 700; margin: 0; }
.cartao p  { font-size: var(--t-sm); color: var(--tinta-2); margin: 0; }
.cartao__marca {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    background: var(--azul-vapor); color: var(--azul);
    border-radius: var(--r-pill);
}
@media (hover: hover) and (pointer: fine) {
    a.cartao:hover { border-color: var(--azul); transform: translateY(-3px); }
}

/* Cartão que muda pelo espaço DELE, não pelo da tela: o mesmo cartão serve
   na grade de 2 colunas do celular e na de 4 do desktop. */
.cartao-box { container-type: inline-size; }
@container (min-width: 17rem) {
    .cartao--linha { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--sp-3); }
    .cartao--linha .cartao__marca { grid-row: span 2; }
}

/* ------------------------------------------------- 11. ABAS (o sistema) */
.abas { display: grid; gap: var(--sp-4); }
.abas > *, .abas__trilho > * { min-width: 0; }
.abas__botoes {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.aba {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    text-decoration: none;
    min-height: 2.75rem; padding: 0.5rem 1rem;
    background: var(--branco); color: var(--tinta-2);
    border: 1px solid var(--linha); border-radius: var(--r-pill);
    font-size: var(--t-sm); font-weight: 600; cursor: pointer;
    transition: background-color 0.16s linear, color 0.16s linear, border-color 0.16s linear;
}
.aba[aria-current="true"] {
    background: var(--noite); color: var(--branco); border-color: var(--noite);
}
.aba__ponto {
    width: 0.5rem; height: 0.5rem; border-radius: var(--r-pill);
    background: var(--linha-forte);
}
.aba[aria-current="true"] .aba__ponto { background: var(--acento); }

.painel[hidden] { display: none; }
.painel {
    display: grid; gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--nevoa);
    border-radius: var(--r-lg);
}
@media (min-width: 60rem) {
    .painel { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: var(--sp-5); padding: var(--sp-6); }
}
.painel__figura {
    margin: 0; border-radius: var(--r-md); overflow: hidden;
    background: var(--branco); box-shadow: var(--sombra-2);
}
.painel__figura img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 30%;
}
@media (min-width: 60rem) {
    /* no desktop cada painel tem a tela só para ele: a proporção pode abrir */
    .painel__figura img { aspect-ratio: 5 / 4; object-position: 50% 0; }
}
.painel__lista { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.painel__lista li {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2);
    align-items: start; font-size: var(--t-sm);
}
.painel__lista svg { color: var(--azul); margin-top: 0.2rem; }

/* ------------------------------------------------------- 12. SEGMENTOS */
/* Medido em stone.com.br/?hsd=a (1440x1200, 17/09/2026): painéis de 288x1200,
   um quinto da largura por uma tela inteira de altura — proporção 0,24 —,
   encostados um no outro, com o nome do segmento em 72px condensado a 62,5%,
   peso 700, entrelinha 0,9, na cor da marca, centrado nos dois eixos.

   Aqui são seis painéis em vez de cinco, e a cor é o azul do logotipo. O que
   não veio: a altura de tela no celular. Seis painéis de uma tela cada dariam
   três telas de rolagem só nesta seção — a doutrina do Victor veta. No celular
   o painel é 3:4 e ficam dois lado a lado.

   minmax(0, 1fr) e não 1fr: com `1fr` a coluna não encolhe abaixo do
   min-content do cartão, que tem proporção fixa — em 1280px isso estourava a
   página em 28px (medido 17/09/2026). */
.vitrine { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .vitrine { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.vitrine__item {
    position: relative; display: block; overflow: hidden;
    container-type: inline-size;      /* o tipo é proporcional ao painel, em cqw */
    aspect-ratio: 3 / 4; text-decoration: none; color: var(--branco); isolation: isolate;
}
@media (min-width: 48rem) { .vitrine__item { aspect-ratio: 3 / 5; } }
/* ACORDEÃO (só onde existe ponteiro fino)
   Medido no print da referência: o painel aberto tem 620px contra 345px dos
   outros — 1,8 vez. Enquanto o ponteiro não entra na fileira, o PRIMEIRO fica
   aberto, para a seção já chegar mostrando do que se trata; assim que o
   ponteiro entra, quem manda é o painel sob ele. */
@media (min-width: 72rem) and (hover: hover) and (pointer: fine) {
    .vitrine {
        display: flex;
        height: min(100svh, 52rem);
        min-height: 34rem;
    }
    .vitrine__item {
        flex: 1 1 0; min-width: 0;
        aspect-ratio: auto; height: 100%;
        /* o tipo para de ser proporcional ao painel: senão ele cresceria e
           encolheria junto com a expansão, e a referência mantém tamanho fixo */
        container-type: normal;
        transition: flex-grow 0.55s var(--mola);
    }
    /* Nenhum painel vem aberto: a fileira começa igual e só abre o que estiver
       sob o ponteiro. (A referência abre o primeiro de saída; o Victor não
       quis — 17/09/2026.) */
    .vitrine__item:hover,
    .vitrine__item:focus-visible { flex-grow: 1.8; }
}
/* Sem ponteiro (toque) não há acordeão: seis painéis altos iguais. */
@media (min-width: 72rem) and (not ((hover: hover) and (pointer: fine))) {
    .vitrine__item {
        aspect-ratio: auto;
        height: min(100svh, 52rem);
        min-height: 34rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .vitrine__item { transition: none; }
}
.vitrine__item img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s var(--mola);
}
.vitrine__item::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(6,18,31,0.88) 0%, rgba(6,18,31,0.28) 62%, rgba(6,18,31,0.12) 100%);
}
/* O nome no MEIO do painel, como na referência — não colado no rodapé. */
/* Na referência o nome está a 42,6% do topo — no meio do painel. Aqui não dá:
   as fotografias são retratos fechados de lojista, e a 42% o texto cai em cima
   da boca (medido em 1440px). O rótulo é ancorado pela BASE, a 12% do pé, onde
   cai sobre o tronco e o balcão. */
.vitrine__rotulo {
    /* Fora do desktop o painel é curto (3:4) e o rosto ocupa quase tudo: o nome
       fica no pé, sobre o assentamento escuro. A 8% do pé ele caía no queixo do
       lojista (medido em 390px). */
    position: absolute; inset: auto 0 0; padding: var(--sp-3) var(--sp-2);
    display: grid; justify-items: center;
}
/* No desktop, como na referência: nome no meio do painel e a ação logo abaixo.
   A referência põe o texto a 42,6% do topo; aqui é 52%, porque as fotografias
   são retratos mais fechados e a 42% o nome cai na boca do lojista. */
@media (min-width: 72rem) {
    .vitrine__rotulo {
        /* 60% e não os 42,6% da referência: lá as pessoas estão em plano médio
           e o texto passa ao lado do rosto; aqui são retratos e a 52% o nome
           caía na boca (medido em 1440px). */
        inset: 60% 0.5rem auto; padding: 0;
        display: grid; justify-items: center; gap: var(--sp-3);
    }
}
.vitrine__nome {
    font-family: var(--display); font-weight: 800;
    /* A Stone usa 25cqw aqui porque a Gravity X Compressed é quase duas
       vezes mais estreita que a Archivo que estava no lugar (794px contra
       400px para treze letras a 100px) — com a Archivo o teto era 14cqw.
       A SoftPay Display tem a largura da Gravity (1,004×), então o nome
       volta ao tamanho da referência: 24cqw deixa "ACESSÓRIOS", o rótulo
       mais largo, em ~74% do painel. */
    font-size: min(24cqw, 4.5rem);
    line-height: 0.88; text-transform: uppercase; text-align: center;
    letter-spacing: -0.01em;
    color: var(--acento);
}
@media (hover: hover) and (pointer: fine) {
    .vitrine__item:hover img { transform: scale(1.06); }
}

/* --------------------------------------------------------- 13. PLANOS */
.planos { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) {
    /* Três do mesmo trilho, com o recomendado NO MEIO — é para onde o olho vai
       primeiro numa tabela de preço, e é o que a maioria deve escolher.
       A coluna do meio é mais larga, não só mais escura. */
    .planos {
        grid-template-columns: 1fr 1.18fr 1fr;
        gap: var(--sp-4);
        align-items: center;
    }
}

.plano {
    display: grid; align-content: start; gap: var(--sp-3);
    height: 100%; padding: var(--sp-4);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
}
/* No celular ele ocupa a linha toda e vem primeiro; do tablet para cima vai
   para o meio e domina pelo tamanho. Trilho com rolagem lateral é vetado. */
.plano--destaque {
    grid-column: 1 / -1; order: -1;
    background: var(--noite); color: var(--branco); border-color: var(--noite);
}
@media (min-width: 48rem) {
    .plano--destaque {
        grid-column: auto;
        order: 0;                         /* volta para o meio, na ordem do HTML */
        position: relative;
        z-index: 2;
        padding: var(--sp-6) var(--sp-5);
        border-radius: var(--r-lg);
        box-shadow: 0 32px 64px -24px rgba(6, 18, 31, 0.55);
    }
    /* os vizinhos recuam um pouco, para o do meio dominar sem gritar */
    .planos > .plano:not(.plano--destaque) {
        transform: scale(0.965);
        transform-origin: center;
    }
    .plano--destaque .plano__nome { font-size: calc(var(--t-xl) * var(--display-k)); }
    .plano--destaque .plano__preco { font-size: calc(clamp(2rem, 1.4rem + 1.6vw, 2.75rem) * var(--display-k)); }
    /* a etiqueta senta sobre a borda de cima, como um selo */
    .plano--destaque .plano__tag {
        position: absolute; top: 0; left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        box-shadow: 0 8px 20px -6px rgba(3, 10, 18, 0.55);
    }
}
@media (prefers-reduced-motion: reduce) {
    .planos > .plano:not(.plano--destaque) { transform: none; }
}
.plano--destaque .plano__nome,
.plano--destaque .plano__preco { color: var(--branco); }
.plano--destaque .plano__desc,
.plano--destaque .plano__inclui li { color: rgba(255, 255, 255, 0.78); }
.plano--destaque .plano__inclui svg { color: var(--acento); }
.plano--destaque .plano__ciclo { color: rgba(255, 255, 255, 0.64); }

.plano__tag {
    justify-self: start;
    padding: 0.375rem 0.75rem; border-radius: var(--r-pill);
    background: var(--nevoa-2); color: var(--tinta-2);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.plano--destaque .plano__tag { background: #1570C3; color: var(--branco); }
.plano__nome  { font-family: var(--display); font-weight: 800;
                font-size: calc(var(--t-lg) * var(--display-k)); text-transform: uppercase; line-height: 1; margin: 0; }
.plano__desc  { font-size: var(--t-sm); color: var(--tinta-2); margin: 0; }
.plano__preco { display: flex; align-items: baseline; gap: 0.25rem; flex-wrap: wrap;
                font-family: var(--display); font-weight: 800;
                font-size: calc(var(--t-xl) * var(--display-k)); line-height: 1; color: var(--azul); }
.plano--destaque .plano__preco { color: var(--acento); }
.plano__ciclo {
    font-family: var(--fonte); font-size: var(--t-sm); font-weight: 500;
    color: var(--tinta-3); white-space: nowrap;
}
.plano__inclui { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.plano__inclui li {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2);
    align-items: start; font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.4;
}
.plano__inclui svg { color: var(--azul); margin-top: 0.15rem; flex: 0 0 auto; }
.plano .btn { margin-top: auto; }

/* --------------------------------------------------- 14. DEPOIMENTOS */
.depo {
    display: grid; align-content: start; gap: var(--sp-3);
    height: 100%; padding: var(--sp-4);
    background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-md);
}
.depo__video {
    width: 100%; aspect-ratio: 9 / 16; max-height: 22rem;
    object-fit: cover; border-radius: var(--r-sm); background: var(--nevoa-2);
}
.depo__texto { font-size: var(--t-sm); color: var(--tinta-2); margin: 0; }
.depo__quem { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; }
.depo__quem img { width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); object-fit: cover; }
.depo__quem b { display: block; font-size: var(--t-sm); }
.depo__quem span { font-size: var(--t-xs); color: var(--tinta-3); }

/* --------------------------------------------------------- 15. FAQ */
.faq { display: grid; gap: 0; }
@media (min-width: 48rem) {
    .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
}
.faq__item {
    border-bottom: 1px solid var(--linha);
    align-content: start;
}
.faq__item[hidden] { display: none; }
.faq__item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    min-height: 3.5rem; padding: var(--sp-3) 0;
    font-size: var(--t-md); font-weight: 600;
    cursor: pointer; list-style: none;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__mais {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
    display: grid; place-items: center;
    color: var(--azul); transition: transform 0.24s var(--mola);
}
.faq__item[open] .faq__mais { transform: rotate(45deg); }
.faq__item > div { padding-bottom: var(--sp-4); }
.faq__item p { font-size: var(--t-sm); color: var(--tinta-2); margin: 0; }

/* ---------------------------------------------------------- 16. RODAPÉ */
.rodape { background: var(--noite); color: rgba(255, 255, 255, 0.72); padding-block: var(--sp-7) var(--sp-5); }
.rodape__grade { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .rodape__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .rodape__grade { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } }
.rodape__marca { grid-column: 1 / -1; }
@media (min-width: 64rem) { .rodape__marca { grid-column: auto; } }
.rodape h3 {
    font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--branco); margin-bottom: var(--sp-3);
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rodape ul a {
    display: flex; align-items: center; min-height: 2.75rem;
    color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: var(--t-sm);
}
.rodape a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .rodape ul a:hover { color: var(--acento); } }
.rodape__base {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--sp-3) var(--sp-5);
    margin-top: var(--sp-6); padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--t-xs); line-height: 1.6;
}
.rodape__produto { margin: 0; }
.rodape__produto a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
    .rodape__produto a:hover { color: var(--acento); }
}

/* Assinatura oficial da VisionX — a mesma do rodapé do visionxma.com, usada
   igual em todo produto (a LP do FroX é a referência viva). Não se reescreve,
   se reusa: o SoftPay assina o produto, a VisionX assina o SoftPay. */
.rodape__visionx {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 44px; padding-inline: 0.25rem;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    transition: color 0.2s linear;
}
.rodape__x {
    flex: none; width: 13px; height: 13px;
    color: var(--branco); opacity: 0.9;
}
.rodape__visionx i { font-style: normal; opacity: 0.55; margin-inline: 2px; }
@media (hover: hover) and (pointer: fine) {
    .rodape__visionx:hover { color: var(--branco); }
}

/* ------------------------------------------------- 17. CTA FIXA (celular) */
.cta-fixa {
    position: fixed; z-index: 90;
    inset: auto 0 0;
    display: flex; gap: var(--sp-2);
    padding: var(--sp-3) var(--gutter) max(var(--sp-3), env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--linha);
    transform: translateY(110%);
    transition: transform 0.28s var(--mola);
}
.cta-fixa[data-visivel="sim"] { transform: translateY(0); }
.cta-fixa > * { flex: 1 1 0; }
@media (min-width: 62rem) { .cta-fixa { display: none; } }
body { padding-bottom: 0; }

/* -------------------------------------------------------- 18. EFEITOS */
.js-ok .revelar { opacity: 0; transform: translateY(16px); }
.js-ok .revelar.visivel {
    opacity: 1; transform: none;
    transition: opacity 0.4s var(--mola), transform 0.4s var(--mola);
    transition-delay: var(--atraso, 0ms);
}
@media (prefers-reduced-motion: reduce) {
    .js-ok .revelar { transform: none; }
    .js-ok .revelar.visivel { transition: opacity 0.2s linear; }
    html { scroll-behavior: auto; }
    .btn, .cartao, .vitrine__item img { transition: none; }
}

/* (A faixa de brilho saiu em 17/09/2026. Ela tinha `inset: -20% 0 auto`, ou
   seja, começava 20% ACIMA do topo da própria seção — e o que subia manchava de
   azul claro o rodapé da seção de cima: o pé do hero e o pé do bloco de
   dúvidas, logo abaixo do "Ver mais perguntas". Era esse o azul claro que o
   Victor apontou. A classe `.brilho` continua no HTML sem efeito; o realce das
   seções vem da cor de fundo e do tipo, não de um halo que vaza.) */
.brilho { position: relative; }

.so-leitor {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* O atalho de teclado não usa a técnica acima: fora da tela pelo topo, ele
   continua invisível e disponível ao leitor de tela, sem texto cortado por
   overflow e sem criar rolagem (deslocamento negativo não gera barra). */
a.so-leitor {
    position: fixed; inset: -6rem auto auto 0.75rem; z-index: 200;
    display: inline-flex; align-items: center;
    width: auto; height: auto; min-height: 3rem; margin: 0;
    padding: 0.75rem 1.25rem;
    overflow: visible; clip: auto; white-space: nowrap;
}
/* "Pular para o conteúdo" só faz sentido se reaparecer ao chegar nele pelo
   teclado. Escondido em todos os estados, o atalho não serve a ninguém. */
a.so-leitor:focus {
    inset: 0.75rem auto auto 0.75rem;
    width: auto; height: auto; min-height: 3rem; margin: 0;
    display: inline-flex; align-items: center;
    padding: 0.75rem 1.25rem;
    clip: auto; overflow: visible; white-space: normal;
    background: var(--acento); color: var(--noite);
    font-weight: 700; text-decoration: none;
    border-radius: var(--r-pill);
    box-shadow: var(--sombra-2);
}

/* ==========================================================================
   19. IMERSÃO
   --------------------------------------------------------------------------
   A versão anterior era compacta e correta, e justamente por isso não
   emocionava: 7,1 telas de rolagem sem um único momento. A referência gasta
   15,1 telas porque cada seção é um acontecimento — foto em tela cheia,
   tipografia que ocupa a largura, cor sólida que corta a página.
   Aqui o espaço é gasto onde há o que mostrar, e economizado onde não há.
   ========================================================================== */

/* ---------------------------------------------- HERO: uma cena, não um bloco */
@media (min-width: 48rem) {
    .hero { align-items: center; }
}
/* Tablet: quase uma tela, com teto, para não esticar em tela alta. */
@media (min-width: 48rem) and (max-width: 61.99rem) {
    .hero { min-height: min(92svh, 52rem); }
}
/* Desktop: a tela INTEIRA. A doutrina geral é "hero com a altura do conteúdo,
   nunca 100vh", e ela continua valendo no celular — lá forçar uma tela só
   alonga a página. No desktop o Victor pediu o contrário (17/09/2026): com
   `min(92svh, 52rem)` o hero ficava em 715px numa janela de 777px, e nos 62px
   que sobravam aparecia a faixa clara da seção seguinte. O fundo do hero tem de
   ser um só, de ponta a ponta. */
@media (min-width: 62rem) {
    .hero { min-height: 100svh; }
}
/* No celular continua com a altura do conteúdo: "cabe em uma tela", nunca
   "ocupa uma tela". */

.hero__foto {
    /* o parallax é escrito por JS numa variável; sem JS fica tudo em zero */
    transform: translate3d(0, var(--parallax, 0px), 0);
    will-change: transform;
}
.hero__conteudo { opacity: var(--recuo, 1); }

/* Título que entra palavra a palavra. Sem JS, as palavras não existem como
   span e o h1 aparece normalmente. */
.display--hero .linha { display: block; }
.display--hero .palavra {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-top: 0.16em;
    margin-top: -0.16em;
}
.display--hero .palavra > span {
    display: inline-block;
    transform: translateY(102%);
}
.entrou .palavra > span {
    transform: translateY(0);
    transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--atraso, 0ms);
}
@media (prefers-reduced-motion: reduce) {
    .display--hero .palavra > span { transform: none; transition: none; }
}

/* Navbar: transparente sobre o hero, sólida depois dele. */
.nav[data-solida="nao"] {
    background: rgba(6, 18, 31, 0.34);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}
.nav[data-solida="nao"] .nav__link { color: rgba(255, 255, 255, 0.86); }
.nav[data-solida="nao"] .nav__logo img { content: url('/assets/logo-claro-232.png'); }
.nav[data-solida="nao"] .nav__hamburguer {
    background: rgba(255, 255, 255, 0.14); color: var(--branco);
}
.nav { transition: background-color 0.3s linear, border-color 0.3s linear, box-shadow 0.3s linear; }

/* ------------------------------------------------ MOMENTO: foto em tela cheia
   A faixa que corta a página: fotografia grande, headline por cima, sem
   moldura e sem cartão. É o que dá fôlego entre dois blocos densos. */
.momento {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 22rem;
    padding-block: var(--sp-7);
    overflow: hidden;
    isolation: isolate;
    color: var(--branco);
    background: var(--noite);
}
@media (min-width: 48rem) {
    .momento { min-height: min(68svh, 34rem); }
}
.momento__foto {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
}
.momento::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(6,18,31,0.92) 0%, rgba(6,18,31,0.5) 52%, rgba(6,18,31,0.34) 100%);
}
.momento__texto { max-width: 36ch; }
.momento .grande, .momento .apoio { color: rgba(255, 255, 255, 0.86); }
.momento h2 { color: var(--branco); }
.momento .display--secao { margin-bottom: var(--sp-3); }

/* ------------------------------------------- ABAS GIGANTES (o sistema)
   No desktop viram uma lista vertical em display: a ativa em azul, as outras
   recuadas. No celular continuam pílulas, que é o que cabe em 360px. */
@media (min-width: 64rem) {
    .abas { grid-template-columns: 22rem 1fr; gap: var(--sp-7); align-items: start; }
    .abas__botoes { flex-direction: column; align-items: stretch; gap: 0; }
    .aba {
        justify-content: flex-start;
        min-height: 0; padding: 0.25rem 0;
        background: none; border: 0; border-radius: 0;
        font-family: var(--display);
        font-size: calc(clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem) * var(--display-k));
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1.04;
        color: #9CADBC;          /* 2,30:1 — lido como apoio, 3,0:1 contra o ativo */
        transition: color 0.26s linear, transform 0.26s var(--mola), opacity 0.26s linear;
        opacity: 0.85;
    }
    .aba[aria-current="true"] {
        background: none; color: var(--azul);
        opacity: 1;
        transform: translateX(8px);
    }
    /* uma marca que acompanha o tópico aceso: o olho encontra a linha certa
       mesmo antes de ler a cor */
    .abas--rolagem .abas__botoes { position: sticky; }
    .abas--rolagem .aba { position: relative; padding-left: 1rem; }
    .abas--rolagem .aba::before {
        content: ""; position: absolute; left: 0; top: 0.28em; bottom: 0.28em;
        width: 3px; border-radius: 3px;
        background: var(--azul);
        transform: scaleY(0); transform-origin: 50% 50%;
        transition: transform 0.28s var(--mola);
    }
    .abas--rolagem .aba[aria-current="true"]::before { transform: scaleY(1); }
    .aba__ponto { display: none; }
    .aba:focus-visible { outline-offset: 6px; }
}
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
    .aba:hover { color: var(--linha-forte); }
    .aba[aria-current="true"]:hover { color: var(--azul); }
}

/* ------------------------------------------------------ CENA: o PDV vendendo
   Uma frente de caixa desenhada, não um screenshot. Ela opera sozinha quando
   entra na tela: o item é bipado, entra na lista, o total sobe.
   Vale mais que uma foto de monitor porque mostra o que o sistema FAZ. */
.pdv {
    display: grid;
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sombra-2);
    transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.4s var(--mola);
    transform-style: preserve-3d;
}
.pdv__barra {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 0.625rem 0.875rem;
    background: var(--noite); color: var(--branco);
    font-size: var(--t-xs);
}
.pdv__ponto {
    width: 0.5rem; height: 0.5rem; border-radius: var(--r-pill);
    background: #3ED47F; flex: 0 0 auto;
}
.pdv__barra b { font-weight: 600; letter-spacing: 0.04em; }
.pdv__barra span { margin-left: auto; color: rgba(255,255,255,0.6); }

.pdv__corpo {
    background: var(--branco); color: var(--tinta);
    padding: var(--sp-3); display: grid; gap: var(--sp-2);
}
.pdv__lista { display: grid; gap: 1px; background: var(--nevoa-2); }
.pdv__item {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: var(--sp-2);
    padding: 0.5rem 0.625rem;
    background: var(--branco);
    font-size: var(--t-sm);
}
.cena-ok .pdv__item {
    opacity: 0;
    transform: translateY(8px);
}
.cena-ok .pdv__item.dentro {
    opacity: 1; transform: none;
    transition: opacity 0.3s linear, transform 0.36s var(--mola);
}
.pdv__item b { font-weight: 600; }
.pdv__item i {
    display: block; font-style: normal;
    font-size: var(--t-xs); color: var(--tinta-3);
}
.pdv__item em {
    font-style: normal; font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--tinta);
}

.pdv__rodape {
    display: flex; align-items: baseline; gap: var(--sp-2);
    padding: 0.75rem 0.625rem 0.5rem;
    border-top: 2px solid var(--nevoa-2);
}
.pdv__rodape > span { font-size: var(--t-xs); color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.1em; }
.pdv__rodape > span b { color: var(--tinta); font-size: var(--t-sm); }
.pdv__total {
    margin-left: auto;
    font-family: var(--display); font-weight: 800;
    font-size: calc(var(--t-xl) * var(--display-k)); line-height: 1; color: var(--azul);
    font-variant-numeric: tabular-nums;
}
.pdv__selo {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 0.625rem 0.875rem; border-radius: var(--r-sm);
    background: var(--nevoa); color: var(--tinta-3);
    font-size: var(--t-xs); font-weight: 600;
    transition: background-color 0.3s linear, color 0.3s linear;
}
.pdv__selo b {
    font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.pdv__selo span { color: inherit; opacity: 0.8; }
.pdv__selo.aceso { background: #E6F8EE; color: #067A4C; }
.pdv__selo.aceso::before { content: "✓"; font-weight: 700; }

/* --------------------------------------------------------------- HOLOFOTE
   Uma luz fraca que segue o cursor. Só com mouse, e só onde ajuda a dar
   profundidade — nunca por cima de texto corrido. */
[data-holofote] { position: relative; isolation: isolate; }
[data-holofote]::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(22rem 22rem at var(--mx, 50%) var(--my, 0%), rgba(29, 161, 242, 0.16), transparent 70%);
    opacity: 0; transition: opacity 0.4s linear;
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    [data-holofote]:hover::before { opacity: 1; }
}

/* Ímã: o botão acompanha um pouco o cursor dentro da própria área. */
@media (hover: hover) and (pointer: fine) {
    .btn--grande { transition: transform 0.24s var(--mola), background-color 0.16s linear; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__foto, .pdv { transform: none; }
    .hero__conteudo { opacity: 1; }
    [data-holofote]::before { display: none; }
}


/* ------------------------------------------- HERO EM DUAS COLUNAS
   A prova fica ao lado do argumento: quem chega vê o sistema operando antes
   de rolar. No celular ela vem depois do texto, menor, porque ali o que
   decide é a frase e o botão. */
.hero__grade { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 62rem) {
    .hero__grade { grid-template-columns: 1.08fr 0.92fr; gap: var(--sp-6); }
    .hero__conteudo { max-width: 36rem; }
    .hero__sub { max-width: 32ch; }
    /* o display cede um degrau para caber em duas linhas ao lado da tela */
    .hero .display--hero { font-size: calc(clamp(2.5rem, 1.35rem + 1.95vw, 3.25rem) * var(--display-k-hero)); }
}
@media (min-width: 90rem) {
    .hero .display--hero { font-size: calc(3.75rem * var(--display-k-hero)); }
}

/* A cena flutua: perspectiva leve, sombra funda e um halo azul atrás, para
   ela descolar da fotografia sem precisar de moldura. */
.hero .pdv {
    position: relative;
    max-width: 30rem;
    margin-inline: auto;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.7);
    transform: perspective(1400px) rotateX(var(--rx, 2.2deg)) rotateY(var(--ry, -7deg)) translateZ(0);
}
/* (O halo azul atrás da peça do hero saiu em 17/09/2026. Ele era um
   radial-gradient com blur, e o `overflow: hidden` do hero cortava o desfoque
   numa reta: em vez de brilho, virava um retângulo azul claro com borda dura
   no meio do azul-noite. O Victor pediu para tirar.) */
@media (max-width: 61.99rem) {
    .hero .pdv { transform: none; max-width: 26rem; }
    .hero .pdv::before { display: none; }
}

/* Com a cena ao lado, o véu pode ser mais forte à direita sem apagar a foto. */


/* ==========================================================================
   20. HERO COM A PEÇA, E ABAS QUE TROCAM COM A ROLAGEM
   --------------------------------------------------------------------------
   Duas correções do Victor em 17/09/2026:

   1. A fotografia atrás da peça 3D virava ruído — duas imagens disputando a
      mesma área. O hero agora é azul-noite com a malha de pontos, e a
      fotografia de lojista continua nas faixas de tela cheia, onde ela conta
      alguma coisa.

   2. As abas trocavam só no clique. Fazer o visitante clicar em seis tópicos
      para descobrir o que cada um diz é o contrário de intuitivo: quem lê uma
      página de venda não caça informação, ela tem de vir. Agora a rolagem
      troca a aba, e o conteúdo dela aparece ao lado. O clique continua
      funcionando para quem quiser saltar.
   ========================================================================== */

.hero { background: var(--noite); }
.hero__veu {
    /* sem fotografia, o véu vira só um assentamento de cor no rodapé */
    background: linear-gradient(180deg, rgba(6,18,31,0) 0%, rgba(6,18,31,0) 62%, rgba(6,18,31,0.9) 100%);
}

/* (.hero__peca saiu: a peça do hero é o desktop, em .hero__tela) */

@keyframes flutuar {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -14px; }
}

/* ------------------------------------------------- ABAS PELA ROLAGEM
   O bloco fica alto de propósito: cada aba tem um trecho de rolagem só dela.
   A coluna da esquerda gruda (sticky) enquanto os trechos passam. */
@media (min-width: 64rem) {
    .abas--rolagem { display: block; }
    .abas--rolagem .abas__trilho { display: grid; grid-template-columns: 22rem 1fr; gap: var(--sp-7); align-items: start; }
    .abas--rolagem .abas__botoes {
        /* Posicionar por JavaScript a cada quadro trazia tremor: medido, saltos
           de até 55px entre quadros. A rolagem roda no compositor e o transform
           escrito por script chega um quadro atrasado, então a coluna "persegue"
           a página em vez de acompanhar.

           `position: sticky` roda no próprio compositor — sem atraso e sem
           tremor. O `top` é a posição em que ela gruda, e essa posição é o
           centro da tela; daí saem os três estados sozinhos:
             · no começo ela está no fluxo, na linha do primeiro tópico;
             · gruda centralizada e acompanha os painéis que passam;
             · desce junto quando o bloco termina.
           --meia-coluna é metade da altura dela, medida no navegador (a altura
           depende da fonte carregada). O max() evita que ela grude atrás da
           navbar em tela baixa. */
        position: sticky;
        top: max(calc(var(--nav-h) + 1rem), calc(50svh - var(--meia-coluna, 10rem)));
        align-self: start;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }
    .abas--rolagem .abas__painels { display: grid; gap: var(--sp-6); }
    .abas--rolagem .painel { min-height: 26rem; }
    /* na rolagem todos os painéis existem ao mesmo tempo: o que manda é a
       posição, não o clique */
    .abas--rolagem .painel[hidden] { display: grid; }
}

/* No celular a coluna sticky não cabe: as pílulas viram um trilho de rolagem
   horizontal que acompanha a aba ativa, e os painéis seguem um abaixo do outro. */
@media (max-width: 63.99rem) {
    .abas--rolagem .abas__botoes {
        min-width: 0;          /* sem isto, o trilho estica o grid e a página rola de lado */
        max-width: 100vw;
        position: sticky; top: calc(var(--nav-h) + 0.5rem); z-index: 40;
        margin-inline: calc(var(--gutter) * -1);
        padding: var(--sp-2) var(--gutter);
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .abas--rolagem .abas__botoes::-webkit-scrollbar { display: none; }
    .abas--rolagem .aba { flex: 0 0 auto; }
    .abas--rolagem .abas__painels { display: grid; gap: var(--sp-5); }
    .abas--rolagem .painel[hidden] { display: grid; }
}


/* ---------------------------------------- A FOTO E A PEÇA, sem disputa
   A fotografia diz para quem o produto serve — é o que faz o visitante
   entender a proposta em um segundo, e por isso fica. O erro anterior não era
   a foto: era ela ocupar a mesma área da peça 3D, duas imagens brigando.
   Agora ela cobre o lado do texto e se apaga antes da peça. */
.hero__foto {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.92) 28%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0.22) 66%, transparent 88%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.92) 28%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0.22) 66%, transparent 88%);
    object-position: 34% 50%;
}
@media (max-width: 61.99rem) {
    /* no celular a peça fica embaixo do texto: a foto volta a cobrir tudo */
    .hero__foto {
        -webkit-mask-image: none; mask-image: none;
        object-position: 62% 50%;
    }
}
.hero__veu {
    background:
        linear-gradient(180deg, rgba(6,18,31,0.72) 0%, rgba(6,18,31,0.44) 44%, rgba(6,18,31,0.92) 100%),
        linear-gradient(94deg, rgba(6,18,31,0.88) 0%, rgba(6,18,31,0.5) 42%, rgba(6,18,31,0.66) 68%, rgba(6,18,31,0.8) 100%);
}


/* ==========================================================================
   21. A TELA DO SISTEMA NO HERO
   --------------------------------------------------------------------------
   O render 3D não dizia o que o produto faz — "não dá nem de entender o que é"
   (Victor, 17/09/2026). Quem convence é a tela de verdade: produtos da loja,
   carrinho com quatro itens, R$ 414,60, botão de finalizar. Capturada do
   sistema em produção.

   E a cor: a mistura `screen` do render clareava um retângulo inteiro do fundo,
   deixando um bloco cinza-azulado no meio do hero. O fundo volta a ser o
   azul-noite limpo, com um brilho atrás do monitor — e nada mais.
   ========================================================================== */

.hero { background: var(--noite); }

.hero__tela { margin: 0; display: grid; place-items: center; }

/* Moldura de monitor: dá escala e diz "isto é uma tela", sem precisar de
   render. Feita com borda e sombra, não com imagem. */
.monitor { position: relative; width: 100%; max-width: 42rem; }
.monitor__moldura {
    position: relative;
    padding: 0.5rem 0.5rem 0.5rem;
    background: linear-gradient(180deg, #1B2C3D 0%, #0E1D2B 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.875rem;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.08) inset,
        0 44px 90px -30px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}
.monitor__moldura img,
.monitor__moldura picture {
    display: block; width: 100%; height: auto;
    border-radius: 0.5rem;
}
/* pezinho do monitor */
.monitor__base {
    display: block; width: 28%; height: 0.75rem; margin: 0 auto;
    background: linear-gradient(180deg, #16283A 0%, #0A1622 100%);
    border: 1px solid rgba(255,255,255,0.1); border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
}
/* o brilho fica ATRÁS do monitor, não por cima do fundo inteiro */
/* (O mesmo halo, atrás do monitor, saiu pelo mesmo motivo.) */

/* A FAMÍLIA DE APARELHOS
   A peça antiga era só o monitor, com proporção 1,09 — alta e estreita, e por
   isso cabia na coluna. A de agora tem quatro aparelhos lado a lado e proporção
   1,99: no mesmo espaço ela encolhia e perdia a leitura das telas. A coluna
   dela cresce, e a peça sangra para fora do shell à direita, que é onde há
   espaço sobrando. */
@media (min-width: 62rem) {
    .hero__grade { grid-template-columns: 0.8fr 1.2fr; column-gap: var(--sp-4); }
    .hero__tela {
        width: calc(100% + var(--gutter) + 4vw);
        margin-right: calc((var(--gutter) + 4vw) * -1);
        justify-self: end;
        align-self: center;
    }
    .hero__tela img { width: 100%; height: auto; }
}
@media (min-width: 100rem) {
    .hero__tela { width: calc(100% + var(--gutter) + 7vw); margin-right: calc((var(--gutter) + 7vw) * -1); }
}
/* (Esta regra flutuava a IMAGEM do hero, quando a peça inteira era uma imagem
   só. Com os aparelhos desenhados, ela passou a pegar as quatro capturas de
   DENTRO das molduras: a tela pulava dentro do aparelho parado. Quem flutua
   agora é o aparelho inteiro — bloco 27. Removida em 17/09/2026.) */


/* ------------------------------------------- O DESKTOP
   A moldura de monitor feita em CSS era chapada. Esta é a peça: monitor
   renderizado, com a captura do sistema encaixada na tela por transformação de
   perspectiva. O fundo dela é preto, então a mistura `screen` faz o preto sumir
   e sobra o monitor — sem retângulo, sem lavar o fundo da seção. */
.hero__tela .monitor,
.hero__tela .monitor__base { display: none; }

.hero__tela picture,
.hero__tela img {
    display: block; width: 100%; height: auto;
}
/* (As regras que davam sombra e teto de altura à imagem do hero saíram: a peça
   deixou de ser UMA imagem e virou quatro aparelhos desenhados, cada um com a
   própria moldura e a própria sombra. Aplicadas às capturas de dentro, elas
   punham sombra em cada tela e quebravam o enquadramento.) */
@media (max-width: 61.99rem) {
    .hero__tela { width: 100%; max-width: 26rem; margin-inline: auto; }
}


/* ------------------------------------------- PLANO À PARTE (só nota fiscal)
   Ele não é do mesmo trilho dos outros três: não tem PDV nem estoque, serve a
   quem só precisa emitir. Fora da grade, o recomendado pode ficar no meio dos
   três — que é onde o olho vai numa tabela de preço. */
.plano-parte {
    display: grid;
    gap: var(--sp-4);
    align-items: center;
    margin-top: var(--sp-5);
    padding: var(--sp-5);
    background: var(--nevoa);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
}
@media (min-width: 48rem) {
    .plano-parte { grid-template-columns: 1fr auto; gap: var(--sp-6); }
}
.plano-parte__texto { display: grid; gap: var(--sp-2); justify-items: start; }
.plano-parte__nome {
    font-family: var(--display); font-weight: 800;
    font-size: calc(var(--t-lg) * var(--display-k)); text-transform: uppercase; line-height: 1; margin: 0;
}
.plano-parte__texto .apoio { max-width: 62ch; }
.plano-parte__acao {
    display: grid; gap: var(--sp-3); justify-items: start;
}
@media (min-width: 48rem) {
    .plano-parte__acao { justify-items: end; text-align: right; }
}
.plano-parte__acao .plano__preco { margin: 0; }


/* --------------------------------------------- "VER MAIS PERGUNTAS"
   Um botão só, centralizado sob as duas colunas. Antes havia dois controles
   lado a lado fazendo a mesma coisa ("Ver mais perguntas" e "Todas as
   perguntas"), encostados na margem esquerda. */
.faq__mais-perguntas {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-6);
}
.faq__mais-perguntas .btn { min-width: 16rem; }


/* ==========================================================================
   22. VITRINE DE SEGMENTOS — refinamento
   --------------------------------------------------------------------------
   O que estava errado, medido:
   · as pílulas eram branco sólido (#FFF) sobre o azul-noite #06121F: gritavam
     mais que as fotografias, que são o assunto da seção, e pareciam vindas de
     outro sistema;
   · o nome ficava chapado sobre a foto, sem sinal de que o cartão leva a algum
     lugar;
   · o gradiente era o mesmo parado no repouso e no hover — o cartão não
     respondia ao ponteiro;
   · a primeira e a última fotografia, cortadas pela sangria, mostravam a
     pessoa pela metade.
   ========================================================================== */

/* As pontas puxam o enquadramento para dentro, já que a sangria corta um lado.
   Com o recorte em retrato a folga lateral é pequena: 60/40 basta para a
   pessoa não ficar pela metade na borda da tela. */
.vitrine__item:first-child img  { object-position: 60% 50%; }
.vitrine__item:last-child  img  { object-position: 40% 50%; }

/* O véu. Na Stone as cinco fotografias são tingidas do mesmo verde: é isso que
   faz a fileira ler como uma peça só, e não como cinco fotos diferentes coladas.
   Aqui o tingimento é o azul da marca, forte o bastante para unificar e fraco o
   bastante para o rosto do lojista continuar reconhecível — três destes são
   clientes de verdade, e descaracterizá-los anularia o selo.

   Duas camadas: o tom chapado (multiply) e um assentamento vertical que segura
   o selo no alto e o pé do painel. No hover o véu recua e a fotografia vem à
   frente. */
.vitrine__item::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--noite-3);
    mix-blend-mode: multiply;
    opacity: 0.20;
    transition: opacity 0.4s var(--mola);
}
.vitrine__item::after {
    /* Na referência a fotografia é clara e o assentamento quase não aparece: o
       rótulo se sustenta pela cor dele, não por escurecer a cena. Aqui sobrou
       só o necessário — um respiro no alto para o selo e outro no pé. */
    background: linear-gradient(180deg,
        rgba(6,18,31,0.58) 0%,
        rgba(6,18,31,0.06) 22%,
        rgba(6,18,31,0.16) 52%,
        rgba(6,18,31,0.62) 100%);
    transition: opacity 0.4s var(--mola);
}
/* Os painéis se encostam (gap 0, como na referência). Um fio de um pixel
   impede que duas fotografias de brilho parecido virem uma mancha só. */
.vitrine__item + .vitrine__item { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1); }
@media (hover: hover) and (pointer: fine) {
    .vitrine__item:hover::before { opacity: 0.08; }
    .vitrine__item:hover::after  { opacity: 0.75; }
}

/* O nome sobre a fotografia, com sombra própria para não depender do véu. */
.vitrine__nome {
    /* Com a fotografia clara, quem garante a leitura é a sombra do próprio
       tipo, não o véu por cima da cena. */
    text-shadow: 0 2px 10px rgba(6, 18, 31, 0.85), 0 6px 34px rgba(6, 18, 31, 0.7);
}

/* SELO DE CLIENTE REAL
   Três destas fotografias não são de banco de imagem: são lojistas que usam o
   SoftPay. Isso vale mais que a fotografia em si, então o cartão diz de quem é
   — em corpo pequeno, acima do nome do segmento, para não competir com ele. */
.vitrine__selo {
    /* No ALTO do painel e centrado como o nome: é legenda do painel inteiro.
       Assim os três selos ficam na mesma linha entre si. */
    position: absolute; inset: 0 var(--sp-3) auto;
    padding-top: var(--sp-4);
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 10px rgba(6, 18, 31, 0.9), 0 0 24px rgba(6, 18, 31, 0.6);
}
.vitrine__selo::before {
    content: ""; flex: none;
    width: 0.4rem; height: 0.4rem; border-radius: 50%;
    background: var(--acento);
    box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.25);
}
/* A ação. Na referência é uma pílula de vidro com "Saiba mais" e um chevron,
   e ela só existe no painel aberto — é o que diz qual painel está ativo. */
.vitrine__seta {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 2.75rem; padding: 0.55rem 1rem 0.55rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--t-sm); font-weight: 600;
    color: var(--branco);
    white-space: nowrap;
    transition: opacity 0.35s linear, transform 0.35s var(--mola),
                background-color 0.2s linear;
}
.vitrine__seta svg { flex: 0 0 auto; }

/* Fora do acordeão (toque e telas menores) a pílula fica sempre visível, no
   rodapé do cartão, junto do nome. */
.vitrine__rotulo .vitrine__seta { margin-top: var(--sp-2); }

@media (min-width: 72rem) and (hover: hover) and (pointer: fine) {
    /* Teto medido no painel FECHADO do acordeão, que é o estreito: 212px menos
       o respiro deixam 196px úteis. Com a Archivo, "VARIEDADES" ocupava 228px
       a 48px e o teto era 28px; a SoftPay Display é ~0,6× mais estreita, então
       o mesmo rótulo cabe a 44px. Acima disso o nome sangra para fora. */
    .vitrine__nome { font-size: 2.75rem; transition: font-size 0.55s var(--mola); }
    /* O painel aberto tem 365px úteis contra 196px: o nome dele cresce junto.
       "Celulares e acessórios", o mais longo, media 341px a 34px na Archivo;
       na SoftPay Display, a 52px, fica em ~315px — dentro dos 365. */
    .vitrine__item:hover .vitrine__nome,
    .vitrine__item:focus-visible .vitrine__nome { font-size: 3.25rem; }

    .vitrine__seta { opacity: 0; transform: translateY(10px); margin-top: 0; }
    .vitrine__item:hover .vitrine__seta,
    .vitrine__item:focus-visible .vitrine__seta { opacity: 1; transform: none; }
    .vitrine__item:hover .vitrine__seta { background: rgba(255, 255, 255, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
    .vitrine__nome { transition: none; }
    .vitrine__seta { transition: none; transform: none; }
    .vitrine__item::before, .vitrine__item::after { transition: none; }
}

/* (A LINHA DE "TAMBÉM ATENDE" saiu em 17/09/2026. Era um rótulo em caixa alta
   seguido dos oito segmentos restantes, separados por um fio vertical, logo
   abaixo dos painéis. Passou por duas versões — pílulas de vidro e depois
   enumeração tipográfica — e o Victor mandou eliminar. As oito páginas
   continuam alcançáveis pelo índice em /segmentos/; mercadinho e distribuidora
   também pelo rodapé. As regras `.atende*` foram removidas junto.) */


/* ==========================================================================
   23. PASSAGEM ENTRE O ESCURO E O CLARO
   --------------------------------------------------------------------------
   Medido no rodapé do hero: em y=826 a cor é (8,20,33) e em y=828 salta para
   (244,247,250). Um corte seco entre duas cores opostas, sem um pixel de
   transição — o olho lê isso como uma borda branca aparecendo.

   A passagem agora é um degradê de 96px do próprio azul-noite para a cor da
   seção seguinte, desenhado DENTRO do bloco escuro. Não muda altura, não entra
   no fluxo e fica abaixo do conteúdo.

   `data-passagem` só entra no bloco escuro cujo VIZINHO DE BAIXO é claro. Em
   17/09/2026 o #para-quem estava com o atributo e o que vem depois dele é a
   fotografia em sangria do bloco .momento: o degradê clareava até quase branco
   e morria em cima de uma foto escura — uma faixa branca no meio do nada, logo
   abaixo da linha de "também atende". O atributo saiu de lá. */
.hero, .secao--escura, .momento { position: relative; }

/* O hero saiu do degradê (17/09/2026): com 96px clareando até quase branco, a
   faixa subia por cima da prova social e do pedestal do monitor — era ela a
   "borda branca" que incomodava, não o corte. O hero termina no azul-noite e a
   seção seguinte começa na cor dela. */
.secao--escura[data-passagem]::after,
.momento[data-passagem]::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 6rem;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(6, 18, 31, 0) 0%,
        rgba(50, 74, 96, 0.28) 46%,
        rgba(160, 180, 196, 0.62) 74%,
        var(--nevoa) 100%);
}
/* o conteúdo continua por cima da passagem */
.secao--escura > .shell, .momento > .shell { position: relative; z-index: 1; }


/* ==========================================================================
   24. O MAPA — ONDE O SOFTPAY JÁ ESTÁ
   --------------------------------------------------------------------------
   Referência medida ao vivo em stone.com.br/?hsd=a (1440x1000, 17/09/2026):
   seção de 1360x854, título de 72px condensado a 62,5% na cor da marca, texto
   em coluna estreita à esquerda, mapa ocupando 75% da largura à direita, e três
   números de 72px no pé (9.0, +5.500, 5 SEGS).

   O que veio: a composição (texto estreito + mapa dominante + números no pé) e
   a ideia de pôr GENTE no mapa, que é o que prende — polígono não emociona.

   O que foi feito melhor, de propósito:
     · O mapa dela é um PNG de 1013x784 com os pinos chapados dentro. Aqui é
       SVG: cada estado é um caminho com <title>, quem usa leitor de tela ouve
       a lista, a peça é nítida em qualquer tela e pesa uma fração.
     · Os rostos dela são de banco de imagem, anônimos. Aqui são três lojistas
       de verdade, com nome e depoimento em vídeo na própria página.
     · O número dela ("+5.500 cidades") é de cobertura de maquininha. O número
       honesto aqui é o de estados onde JÁ EXISTE loja usando — oito — mais o
       argumento que a Stone não tem: não é preciso representante na cidade.
   ========================================================================== */
.mapa__grade { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 62rem) {
    /* texto estreito, mapa dominante — a proporção da referência */
    .mapa__grade { grid-template-columns: 0.82fr 1.18fr; gap: var(--sp-7); }
}

.mapa__lista { display: grid; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-5); padding: 0; list-style: none; }
.mapa__lista li {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2);
    align-items: start; font-size: var(--t-sm); color: rgba(255, 255, 255, 0.86);
}
.mapa__lista svg { color: var(--acento); margin-top: 0.2rem; }
@media (min-width: 30rem) and (max-width: 61.99rem) {
    /* no celular largo e no tablet os três itens cabem em duas colunas */
    .mapa__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
    .mapa__lista li:last-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- A PEÇA */
.mapa__peca { position: relative; margin: 0 auto; width: 100%; max-width: 44rem; }
.mapa__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Estado sem loja: só o contorno, para o Brasil existir sem competir. */
.mapa__svg .uf {
    fill: rgba(255, 255, 255, 0.045);
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 1;
    stroke-linejoin: round;
    transition: fill 0.3s linear;
}
/* Estado com loja: o azul do logotipo, que é onde o olho tem de cair. */
.mapa__svg .uf--ativo {
    fill: var(--azul);
    stroke: var(--acento);
    stroke-width: 1.4;
}
@media (hover: hover) and (pointer: fine) {
    .mapa__svg .uf--ativo:hover { fill: var(--acento); }
}

/* ---------------------------------------------------------------- O HALO
   Atrás de cada rosto, um anel que cresce e some: é o sinal de "tem gente
   vendendo aqui agora". Some inteiro com "menos movimento". */
.mapa__rostos::before {
    content: ""; position: absolute; inset: -0.35rem;
    border-radius: 50%; border: 1.5px solid var(--acento);
    opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .mapa__rostos::before { animation: mapa-pulso 3.4s ease-out infinite; }
    .mapa__pino:nth-of-type(2n) .mapa__rostos::before { animation-delay: 0.6s; }
    .mapa__pino:nth-of-type(3n) .mapa__rostos::before { animation-delay: 1.3s; }
    .mapa__pino:nth-of-type(5n) .mapa__rostos::before { animation-delay: 2.0s; }
    .mapa__pino:nth-of-type(7n) .mapa__rostos::before { animation-delay: 2.6s; }
}
@keyframes mapa-pulso {
    0%   { transform: scale(0.85); opacity: 0.85; }
    70%  { transform: scale(1.9);  opacity: 0; }
    100% { transform: scale(1.9);  opacity: 0; }
}

/* ----------------------------------------------------------------- O PINO
   Onde há lojista com depoimento, o ponto vira rosto. Três avatares
   sobrepostos, do mesmo jeito que a prova social do hero. */
.mapa__pino {
    position: absolute; left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    /* é um botão: no toque o balão abre ao tocar, e não fica aberto de saída —
       com oito pinos, oito balões abertos ao mesmo tempo viram uma mancha e
       ainda estouram a página (medido: 26px a 360px). */
    /* O avatar tem 30px no celular, mas o alvo de toque tem de ter 44: o padding
       cresce a área tocável sem inchar o desenho (medido pelo de audit). */
    padding: 7px; border: 0; background: none; cursor: pointer;
    line-height: 0;
}
@media (min-width: 62rem) { .mapa__pino { padding: 3px; } }
.mapa__pino:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 50%; }
/* o pino sob o ponteiro vem para a frente dos vizinhos */
@media (hover: hover) and (pointer: fine) {
    .mapa__pino:hover, .mapa__pino:focus-within { z-index: 3; }
}
.mapa__rostos { position: relative; display: flex; }
.mapa__rostos img {
    width: 1.875rem; height: 1.875rem; border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--branco);
    box-shadow: 0 8px 20px -6px rgba(6, 18, 31, 0.9);
    background: var(--noite-2);
}
.mapa__rostos img + img { margin-left: -0.7rem; }
/* O Maranhão tem três lojistas com depoimento: o pino dele é maior, e é o
   único que traz nome de gente. */
.mapa__pino--tres .mapa__rostos img { width: 2rem; height: 2rem; }
@media (min-width: 62rem) {
    .mapa__rostos img { width: 2.375rem; height: 2.375rem; }
    /* 2,5rem e não 3,25: com três avatares sobrepostos, o pino tem de caber
       DENTRO do Maranhão — a 3,25rem ele transbordava para o Piauí. */
    .mapa__pino--tres .mapa__rostos img { width: 2.5rem; height: 2.5rem; }
    .mapa__rostos img + img { margin-left: -0.9rem; }
}

.mapa__balao {
    position: absolute; left: 50%; bottom: calc(100% + 0.6rem);
    transform: translateX(-50%);
    width: max-content; max-width: min(15rem, 50vw);
    padding: var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--branco); color: var(--tinta);
    box-shadow: 0 18px 40px -16px rgba(6, 18, 31, 0.8);
    font-size: var(--t-xs); line-height: 1.4;
    text-align: left;
}
.mapa__balao b { display: block; font-size: var(--t-sm); margin-bottom: 0.15rem; }
.mapa__balao::after {
    content: ""; position: absolute; top: 100%; left: 50%;
    width: 0.625rem; height: 0.625rem; margin-left: -0.3125rem;
    background: var(--branco); transform: rotate(45deg) translateY(-0.3125rem);
}
/* O pino está a 69,6% da largura do mapa, então um balão centrado nele só cabe
   se tiver no máximo o dobro da folga do lado mais curto — 61% da largura do
   mapa. Daí o teto de 50vw: em 320px (o caso mais apertado) dá 160px contra
   178px de folga. Medido: 0 de estouro de 320 a 1440. */

/* Nos pinos do topo do mapa (acima de 40% da altura) o balão cai para BAIXO:
   acima deles não há espaço dentro da peça. */
.mapa__pino--baixo .mapa__balao { top: calc(100% + 0.6rem); bottom: auto; }
.mapa__pino--baixo .mapa__balao::after {
    top: auto; bottom: 100%;
    transform: rotate(45deg) translateY(0.3125rem);
}
/* O balão fica fechado até o ponteiro chegar ou o dedo tocar. */
.mapa__balao {
    opacity: 0; pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.28s linear, transform 0.28s var(--mola);
}
.mapa__pino:hover .mapa__balao,
.mapa__pino:focus .mapa__balao,
.mapa__pino:focus-within .mapa__balao { opacity: 1; transform: translateX(-50%); }

/* Pino na metade direita do mapa: o balão cresce para a esquerda, senão sai
   pela borda da página (Pernambuco está a 85,4% da largura). */
.mapa__pino--dir .mapa__balao { left: auto; right: 0; transform: translateY(6px); }
.mapa__pino--dir:hover .mapa__balao,
.mapa__pino--dir:focus .mapa__balao,
.mapa__pino--dir:focus-within .mapa__balao { transform: none; }
.mapa__pino--dir .mapa__balao::after { left: auto; right: 1rem; margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
    .mapa__balao { transition: none; }
}

/* -------------------------------------------------------------- OS NÚMEROS */
.mapa__numeros {
    display: grid; gap: var(--sp-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--sp-7);
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 48rem) { .mapa__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mapa__numeros > div:last-child { grid-column: 1 / -1; }
@media (min-width: 48rem) { .mapa__numeros > div:last-child { grid-column: auto; } }
.mapa__numeros b {
    display: block;
    font-family: var(--display); font-weight: 800;
    font-size: calc(var(--t-2xl) * var(--display-k)); line-height: 0.9;
    color: var(--acento);
}
.mapa__numeros span {
    display: block; margin-top: var(--sp-2);
    font-size: var(--t-sm); color: rgba(255, 255, 255, 0.8);
    max-width: 20ch;
}

/* -------------------------------------------------------- A LISTA DE ESTADOS
   O que falta na referência: oito manchas acesas e nenhuma legenda — dá para
   ver que tem cobertura, não dá para saber ONDE. Aqui a lista diz os nomes, e
   passar por um nome acende o estado no mapa (e o contrário também). */
.mapa__ufs {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--sp-2) var(--sp-3);
    /* 34rem faz a lista quebrar 4 e 4 em vez de 6 e 2, que deixava dois nomes
       órfãos na segunda fileira (medido em 1440px). */
    max-width: 34rem; margin: var(--sp-5) auto 0; padding: 0;
    list-style: none;
}
.mapa__ufs button {
    display: inline-flex; align-items: center; gap: 0.45rem;
    min-height: 2.25rem; padding: 0.35rem 0.5rem;
    border: 0; background: none;
    font: inherit; font-size: var(--t-sm); font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: color 0.2s linear;
}
.mapa__ufs button::before {
    content: ""; flex: none;
    width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: var(--azul);
    border: 1px solid var(--acento);
    transition: background-color 0.2s linear, transform 0.2s var(--mola);
}
@media (hover: hover) and (pointer: fine) {
    .mapa__ufs button:hover { color: var(--branco); }
    .mapa__ufs button:hover::before { background: var(--acento); transform: scale(1.35); }
}
.mapa__ufs button:focus-visible { color: var(--branco); outline: 2px solid var(--acento); outline-offset: 3px; }

/* o estado realçado pela lista */
.mapa__svg .uf--realce { fill: var(--acento); }

@media (prefers-reduced-motion: reduce) {
    .mapa__ufs button, .mapa__ufs button::before { transition: none; }
}
.mapa__ufs button.e-realce { color: var(--branco); }
.mapa__ufs button.e-realce::before { background: var(--acento); transform: scale(1.35); }

/* Nota de integridade: sete dos oito retratos são pessoas geradas, e a página
   diz isso. O que o mapa afirma — que ali existe loja usando — é verdade nos
   oito. Sem esta linha, o rosto passaria por cliente identificado. */
.mapa__nota {
    max-width: 44rem; margin: var(--sp-4) auto 0;
    font-size: var(--t-xs); line-height: 1.5; text-align: center;
    color: rgba(255, 255, 255, 0.5);
}


/* ==========================================================================
   25. PÁGINAS INTERNAS
   --------------------------------------------------------------------------
   São 70 páginas — segmentos, soluções, guias, perguntas, comparativos e blog
   — todas saídas do mesmo `tools/template.py`. Até 17/09/2026 elas carregavam
   `/style.css` (279 KB) e a fonte Plus Jakarta Sans, enquanto a home já usava
   este arquivo com Archivo e Geist: o site tinha duas identidades, e quem caía
   numa página interna pela busca não reconhecia a marca da home.

   Aqui elas passam a usar o mesmo sistema. O vocabulário de classes do corpo
   (`page-section`, `page-list`, `calc-*`, `card-grid`…) foi MANTIDO de
   propósito: assim as 70 páginas de conteúdo não precisaram ser reescritas —
   só o esqueleto do template e este bloco de estilo.

   A largura de leitura é 46rem. O `.shell` da home tem 75rem, que serve para
   grade e fotografia; texto corrido a 75rem passa de 120 caracteres por linha
   e ninguém lê. Grade, tabela e figura rompem essa largura de volta.
   ========================================================================== */
.page { padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-sec); }

.shell--leitura { max-width: 46rem; }

/* --------------------------------------------------------- MIGALHAS */
.breadcrumb { margin-bottom: var(--sp-5); font-size: var(--t-sm); }
.breadcrumb ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    margin: 0; padding: 0; list-style: none;
}
.breadcrumb li { display: flex; align-items: center; gap: 0.35rem; color: var(--tinta-3); }
.breadcrumb li + li::before { content: "/"; color: var(--linha-forte); }
.breadcrumb a { color: var(--tinta-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--azul); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--tinta); font-weight: 500; }

/* ------------------------------------------------- CABEÇA DA PÁGINA */
.page-header { margin-bottom: var(--sp-6); }
.page-title {
    font-size: var(--t-2xl); line-height: 1.02;
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
}
.page-intro {
    margin: 0; font-size: var(--t-lg); line-height: 1.5;
    color: var(--tinta-2); max-width: 60ch;
}
.page-actualizado { margin: var(--sp-3) 0 0; font-size: var(--t-sm); color: var(--tinta-2); }

/* ------------------------------------------------------- O CONTEÚDO */
.page-section { margin-bottom: var(--sp-7); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.page-section > h2 {
    font-family: var(--display); font-weight: 800;
    font-size: calc(var(--t-xl) * var(--display-k)); line-height: 1.05;
    margin: 0 0 var(--sp-4);
    text-transform: none;
}
.page-section h3 {
    font-size: var(--t-lg); font-weight: 700; line-height: 1.25;
    margin: var(--sp-5) 0 var(--sp-3);
}
.page-section p { margin: 0 0 var(--sp-4); line-height: 1.65; }
.page-section p:last-child { margin-bottom: 0; }
.page-section a { color: var(--azul); text-underline-offset: 2px; }

.page-list, .page-steps { margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); }
.page-list { list-style: none; }
.page-list li {
    position: relative; padding-left: 1.75rem; line-height: 1.6;
}
.page-list li::before {
    content: ""; position: absolute; left: 0; top: 0.55em;
    width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: var(--azul);
}
.page-steps { counter-reset: passo; list-style: none; }
.page-steps li {
    counter-increment: passo;
    position: relative; padding-left: 2.5rem; line-height: 1.6;
    min-height: 1.75rem;
}
.page-steps li::before {
    content: counter(passo);
    position: absolute; left: 0; top: -0.1em;
    display: grid; place-items: center;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--acento-vapor); color: var(--azul);
    font-size: var(--t-sm); font-weight: 700;
}

/* Aviso: o mesmo cartão da home, com a barra da cor de atenção. */
.page-note {
    margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    border-left: 3px solid var(--acento);
    background: var(--sup-alt);
}
.page-note strong { display: block; margin-bottom: 0.35rem; }
.page-note p { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); }

/* Exemplo de conta: é o bloco que mais convence nos guias de dinheiro. */
.page-example {
    margin: var(--sp-5) 0; padding: var(--sp-5);
    border: 1px solid var(--linha); border-radius: var(--r-md);
    background: var(--branco);
    box-shadow: var(--sombra-1);
}
.example-badge {
    display: inline-block; margin-bottom: var(--sp-3);
    padding: 0.2rem 0.6rem; border-radius: var(--r-pill);
    background: var(--acento-vapor); color: var(--azul);
    font-size: var(--t-xs); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.page-example h3 { margin: 0 0 var(--sp-4); font-size: var(--t-lg); }
.calc { display: grid; gap: 0; }
.calc-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
    padding: 0.6rem 0; border-bottom: 1px solid var(--linha);
}
.calc-row:last-child { border-bottom: 0; }
.calc-label { color: var(--tinta-2); font-size: var(--t-sm); }
.calc-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row--minus .calc-value { color: var(--atencao); }
.calc-row--result { border-top: 1px solid var(--linha-forte); }
.calc-row--result .calc-label, .calc-row--result .calc-value { font-weight: 700; }
.calc-row--final .calc-value { color: var(--ok); font-size: var(--t-lg); }
.calc-note { margin: var(--sp-3) 0 0; font-size: var(--t-xs); color: var(--tinta-3); }

/* TABELA
   Sem `overflow` no invólucro: esconder estouro é curativo, e a doutrina do
   Victor veta rolagem lateral no celular. Os cantos são arredondados pela
   própria tabela (border-collapse: separate) e, abaixo de 40rem, cada LINHA
   vira um cartão com o nome da coluna ao lado do valor — o `data-rotulo` que
   o tools/blocks.py escreve em cada célula. */
.table-wrap { margin: var(--sp-5) 0; }
.page-table {
    width: 100%; font-size: var(--t-sm);
    border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--linha); border-radius: var(--r-md);
}
.page-table th, .page-table td { padding: 0.75rem 1rem; text-align: left; }
.page-table thead th {
    background: var(--sup-alt); font-weight: 700;
    border-bottom: 1px solid var(--linha);
}
.page-table thead th:first-child { border-top-left-radius: var(--r-md); }
.page-table thead th:last-child  { border-top-right-radius: var(--r-md); }
.page-table tbody tr + tr td { border-top: 1px solid var(--linha); }
.page-table td:first-child { font-weight: 500; }

@media (max-width: 39.99rem) {
    .page-table, .page-table tbody, .page-table tr, .page-table td { display: block; }
    /* O cabeçalho sai de vez, e não escondido fora da tela: cada célula já
       carrega o nome da coluna no data-rotulo, então nada se perde para quem
       usa leitor de tela. Escondido com position:absolute, os <th> vazavam
       para fora da página — 89px de estouro em 360px, medido em 13 páginas. */
    .page-table thead { display: none; }
    .page-table { border: 0; }
    .page-table tbody tr {
        margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-4);
        border: 1px solid var(--linha); border-radius: var(--r-md);
        background: var(--branco);
    }
    .page-table tbody tr + tr td { border-top: 0; }
    .page-table td {
        display: flex; flex-wrap: wrap;
        justify-content: space-between; align-items: baseline;
        column-gap: var(--sp-4); row-gap: 0.15rem;
        padding: 0.5rem 0; border-bottom: 1px solid var(--linha);
        min-width: 0; overflow-wrap: anywhere;
    }
    .page-table tr td:last-child { border-bottom: 0; }
    /* rótulo e valor encolhem e, se não couberem lado a lado, empilham — sem
       isso a célula não cedia e a tabela vazava 48px em 360px (medido) */
    .page-table td::before {
        content: attr(data-rotulo);
        flex: 0 1 auto; min-width: 0;
        color: var(--tinta-3); font-weight: 400;
    }
    .page-table td:first-child { font-weight: 700; }
}

.card-grid {
    display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
}
@media (min-width: 48rem) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-grid li > a, .card-grid li > div {
    display: grid; gap: 0.35rem; height: 100%; align-content: start;
    padding: var(--sp-4);
    border: 1px solid var(--linha); border-radius: var(--r-md);
    background: var(--branco); color: inherit; text-decoration: none;
    transition: border-color 0.2s linear, transform 0.2s var(--mola);
}
.card-grid strong { font-size: var(--t-md); }
.card-grid span { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
    .card-grid li > a:hover { border-color: var(--azul); transform: translateY(-2px); }
}

.page-figure { margin: var(--sp-5) 0; }
.page-figure img {
    width: 100%; height: auto; display: block;
    border-radius: var(--r-md); box-shadow: var(--sombra-2);
}
.page-figure figcaption {
    margin-top: var(--sp-3); font-size: var(--t-sm); color: var(--tinta-3);
}

.page-sources { margin-top: var(--sp-6); font-size: var(--t-sm); color: var(--tinta-3); }
.page-sources a { color: var(--tinta-2); }

/* ------------------------------------------------------- FAQ DA PÁGINA */
.page-faq { margin: var(--sp-7) 0; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.faq-layout { display: grid; gap: var(--sp-5); }
@media (min-width: 60rem) { .faq-layout { grid-template-columns: 0.7fr 1.3fr; gap: var(--sp-6); } }
.faq-aside h2 {
    font-family: var(--display); font-weight: 800;
    font-size: calc(var(--t-xl) * var(--display-k)); line-height: 1.05; margin: 0 0 var(--sp-3);
}
.faq-aside p { margin: 0; color: var(--tinta-2); font-size: var(--t-sm); line-height: 1.6; }
.faq-list { display: grid; gap: 0; }
.faq-item { border-top: 1px solid var(--linha); }
.faq-item:last-child { border-bottom: 1px solid var(--linha); }
.faq-question {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    min-height: 3.25rem; padding: var(--sp-4) 0;
    font-weight: 600; cursor: pointer; list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
    content: ""; flex: none;
    width: 0.625rem; height: 0.625rem;
    border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3);
    transform: rotate(45deg) translateY(-0.15rem);
    transition: transform 0.25s var(--mola);
}
.faq-item[open] .faq-question::after { transform: rotate(-135deg) translateY(-0.15rem); }
.faq-answer { padding: 0 0 var(--sp-4); }
.faq-answer p { margin: 0; color: var(--tinta-2); line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .faq-question::after { transition: none; } }

/* ------------------------------------------------------ CHAMADA E FIM */
.page-cta {
    margin: var(--sp-7) 0;
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--noite); color: var(--branco);
    text-align: center;
}
.page-cta h2 { margin: 0 0 var(--sp-3); color: var(--branco); }
.page-cta > p { margin: 0 auto var(--sp-5); max-width: 46ch; color: rgba(255, 255, 255, 0.82); }
.page-cta-actions {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
}
.page-cta-actions > * { flex: 1 1 11rem; }
@media (min-width: 40rem) { .page-cta-actions > * { flex: 0 0 auto; } }
.page-cta .btn--linha { border-color: rgba(255, 255, 255, 0.4); color: var(--branco); }
.page-cta-note {
    margin: var(--sp-4) 0 0; font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.6);
}

.page-related { margin-top: var(--sp-7); }
.page-related h2 {
    font-family: var(--display); font-weight: 800;
    font-size: calc(var(--t-lg) * var(--display-k)); margin: 0 0 var(--sp-4);
}
.related-grid {
    display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related-grid a {
    display: block; height: 100%; padding: var(--sp-4);
    border: 1px solid var(--linha); border-radius: var(--r-md);
    color: inherit; text-decoration: none; font-size: var(--t-sm); line-height: 1.45;
    transition: border-color 0.2s linear, transform 0.2s var(--mola);
}
@media (hover: hover) and (pointer: fine) {
    .related-grid a:hover { border-color: var(--azul); transform: translateY(-2px); }
}

/* A ação flutuante do celular. Ela existia nas internas sem estilo próprio e
   ficava com 18px de altura — 25px de alvo, contra os 44 do mínimo (medido
   pelo de audit). Vira pílula, à esquerda, para não brigar com o WhatsApp. */
.float-cta {
    position: fixed; left: var(--gutter); bottom: max(var(--gutter), env(safe-area-inset-bottom));
    z-index: 40;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.75rem; padding: 0.7rem 1.25rem;
    border-radius: var(--r-pill);
    background: var(--azul); color: var(--branco);
    font-size: var(--t-sm); font-weight: 600; text-decoration: none;
    box-shadow: 0 12px 28px -10px rgba(6, 18, 31, 0.55);
    transition: transform 0.2s var(--mola);
}
@media (hover: hover) and (pointer: fine) { .float-cta:hover { transform: translateY(-2px); } }
@media (min-width: 62rem) { .float-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .float-cta { transition: none; } }

/* Botão flutuante do WhatsApp: já existia nas internas, agora no tom do sistema */
.whatsapp-float {
    position: fixed; right: var(--gutter); bottom: max(var(--gutter), env(safe-area-inset-bottom));
    z-index: 40;
    display: grid; place-items: center;
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    background: #25D366; color: #fff;
    box-shadow: 0 12px 28px -10px rgba(6, 18, 31, 0.55);
    transition: transform 0.2s var(--mola);
}
@media (hover: hover) and (pointer: fine) { .whatsapp-float:hover { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } }


/* ==========================================================================
   26. AS GARANTIAS (ao lado dos depoimentos)
   --------------------------------------------------------------------------
   Eram quatro caixas soltas feitas com `.numero` — um componente que existe
   para NÚMERO ("+100", "8") e estava sendo usado com palavra. O resultado era
   um título gigante em cima de uma linha miúda, sem ícone e sem hierarquia,
   num bloco que não se parecia com nada mais da página.

   Agora é um bloco só, e ele empresta o que a página já usa em outros lugares:
   o disco de vapor azul com ícone de traço das pílulas da esteira, o fio fino
   entre itens da antiga linha de segmentos, e o rótulo em caixa alta das
   cabeças de seção. É isso que o faz parecer parte da LP, e não um encarte.
   ========================================================================== */
.garantias {
    display: grid; align-content: start; gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-1);
}
@media (min-width: 48rem) { .garantias { padding: var(--sp-6); } }

.garantias__lista { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.garantia {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-5) 0;
}
.garantia + .garantia { border-top: 1px solid var(--linha); }
.garantia:first-child { padding-top: 0; }
.garantia:last-child { padding-bottom: 0; }

/* A CENA
   Não é ícone de catálogo: cada uma desenha o que a frase diz, e tem uma parte
   que se move — os pontinhos de quem está digitando, o dado subindo para a
   nuvem, a página que carrega, o preço que zera. É SVG, então carrega junto com
   o HTML, é nítida em qualquer tela e muda de cor com a marca.
   Tudo o que se move está dentro de `prefers-reduced-motion: no-preference`;
   com movimento reduzido a cena fica parada e continua legível. */
.cena {
    display: grid; place-items: center;
    width: 3.25rem; height: 3.25rem; flex: 0 0 auto;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, var(--acento-vapor), #F7FBFE);
    border: 1px solid var(--linha);
    color: var(--azul);
}
.cena svg { width: 2.25rem; height: 2.25rem; display: block; }

@media (prefers-reduced-motion: no-preference) {
    /* 1. quem responde é gente: os três pontos de "digitando" */
    .cena__ponto { animation: cena-digita 1.5s ease-in-out infinite; }
    .cena__ponto--2 { animation-delay: 0.18s; }
    .cena__ponto--3 { animation-delay: 0.36s; }

    /* 2. a loja não fica no computador: o dado sobe para a nuvem */
    .cena__sobe { animation: cena-sobe 2.4s ease-in-out infinite; }
    .cena__sobe--2 { animation-delay: 0.35s; }
    .cena__sobe--3 { animation-delay: 0.7s; }

    /* 3. abre e usa: a barra da página preenchendo */
    .cena__carrega {
        stroke-dasharray: 22; stroke-dashoffset: 22;
        animation: cena-carrega 2.6s ease-in-out infinite;
    }

    /* 4. começar não custa nada: o preço que assenta em zero */
    .cena__zero { animation: cena-zero 3.2s ease-in-out infinite; }
}
@keyframes cena-digita {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-2px); }
}
@keyframes cena-sobe {
    0%        { opacity: 0;   transform: translateY(4px); }
    25%, 55%  { opacity: 0.9; transform: translateY(0); }
    80%, 100% { opacity: 0;   transform: translateY(-4px); }
}
@keyframes cena-carrega {
    0%        { stroke-dashoffset: 22; }
    55%, 80%  { stroke-dashoffset: 0; }
    100%      { stroke-dashoffset: 0; }
}
@keyframes cena-zero {
    0%, 70%, 100% { opacity: 1; transform: none; }
    80%           { opacity: 1; transform: scale(1.1); }
}
.garantia__texto {
    display: block;
    font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2);
}
.garantia__texto b {
    display: block; margin-bottom: 0.15rem;
    font-size: var(--t-md); font-weight: 700; color: var(--tinta);
}

/* A ressalva fecha o bloco. Ela é a frase mais honesta da página — o SoftPay
   não substitui a maquininha — e por isso ganha destaque próprio em vez de
   virar rodapé em cinza claro. */
.garantias__nota {
    margin: 0;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border-left: 3px solid var(--acento);
    background: var(--sup-alt);
    font-size: var(--t-sm); line-height: 1.55; color: var(--tinta-2);
}
.garantias__nota b { color: var(--tinta); }


/* ==========================================================================
   27. A FAMÍLIA DE APARELHOS DO HERO
   --------------------------------------------------------------------------
   Referência: a home da TriboPay, que o Victor mandou — monitor, notebook,
   tablet e celular juntos, cada um com o produto rodando.

   A primeira versão foi feita como IMAGEM: os aparelhos vinham de um render e
   as capturas entravam dentro por transformação de perspectiva. Duas coisas se
   perdiam. A moldura ficava presa à resolução do render, e numa tela de alta
   densidade as bordas amoleciam — foi o que o Victor apontou. E a captura
   passava por um warp, que come nitidez antes mesmo de o navegador redimensionar.

   Aqui a moldura é desenhada: borda, raio, gradiente e sombra. É vetorial,
   fica nítida em qualquer densidade, pesa alguns bytes e dá controle de cada
   milímetro do acabamento. A captura entra como <img> no tamanho nativo, sem
   deformação nenhuma: o que o navegador serve é o que o lojista vê no sistema.
   ========================================================================== */
.aparelhos {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    container-type: inline-size;
}

/* -------------------------------------------------------- a peça em comum */
.ap { position: absolute; }
.ap__tela {
    position: relative; overflow: hidden;
    background: var(--noite-2);
}
.ap__tela picture { display: block; }
.ap__tela img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------- MONITOR */
.ap--monitor { left: 31%; top: 0; width: 55%; }
.ap--monitor .ap__tela {
    border: 0.7cqw solid #1A1D22;
    border-bottom-width: 1.4cqw;
    border-radius: 0.9cqw;
    box-shadow:
        0 0 0 0.12cqw rgba(255, 255, 255, 0.22),
        0 4cqw 7cqw -2.4cqw rgba(0, 0, 0, 0.75);
}
/* pescoço e base: chapa de alumínio, como no aparelho de verdade */
.ap--monitor .ap__pescoco {
    display: block; width: 7%; height: 4.6cqw; margin: 0 auto;
    background: linear-gradient(90deg, #6E747C 0%, #C9CFD6 38%, #9AA1A9 62%, #5F656D 100%);
}
.ap--monitor .ap__base {
    display: block; width: 26%; height: 0.9cqw; margin: 0 auto;
    border-radius: 0 0 0.5cqw 0.5cqw;
    background: linear-gradient(180deg, #AEB5BD 0%, #71777F 100%);
    box-shadow: 0 1.2cqw 2.4cqw -0.8cqw rgba(0, 0, 0, 0.7);
}

/* -------------------------------------------------------------- NOTEBOOK */
/* o notebook entra na frente, mas mordendo só a ponta do monitor — na
   referência ele cobre pouco, e é isso que deixa o PDV legível */
.ap--note { left: 0; bottom: 3%; width: 41%; }
.ap--note .ap__tela {
    border: 0.55cqw solid #17191E;
    border-bottom-width: 1.1cqw;
    border-radius: 0.7cqw 0.7cqw 0 0;
    box-shadow:
        0 0 0 0.1cqw rgba(255, 255, 255, 0.2),
        0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.7);
}
/* a base do teclado, em trapézio: é o que dá a perspectiva sem foto */
.ap--note .ap__teclado {
    display: block; height: 1.5cqw;
    margin: 0 -6.5%;
    background: linear-gradient(180deg, #C2C8D0 0%, #8E949C 55%, #6A7078 100%);
    clip-path: polygon(6.2% 0, 93.8% 0, 100% 100%, 0 100%);
    border-radius: 0 0 0.45cqw 0.45cqw;
}

/* ---------------------------------------------------------------- TABLET */
.ap--tablet { right: 8.5%; bottom: 7%; width: 18%; }
.ap--tablet .ap__tela {
    border: 0.6cqw solid #17191E;
    border-radius: 1.1cqw;
    box-shadow:
        0 0 0 0.1cqw rgba(255, 255, 255, 0.2),
        0 2.6cqw 5cqw -1.8cqw rgba(0, 0, 0, 0.72);
    aspect-ratio: 3 / 4;
}
/* Tablet e celular recebem RECORTES DEDICADOS, na proporção exata da tela de
   cada um (3:4 e 9:19,5), gerados a partir das capturas do sistema. Antes eles
   usavam a captura de desktop inteira com `object-fit: cover`, que mostrava um
   pedaço arbitrário e ilegível — o Victor apontou.

   No tablet é o painel financeiro: 138 vendas, R$ 19.393,90 de faturamento e a
   pizza por forma de pagamento — números grandes, que se leem no tamanho em que
   o aparelho aparece. No celular é a coluna do carrinho, que já nasce vertical.

   (Não é o catálogo: aquela captura traz "Sua loja ainda não está no ar", e
   essa não é a frase para estar num hero.) */
.ap--tablet .ap__tela img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- CELULAR */
.ap--fone { right: 0; bottom: 1%; width: 8.4%; }
.ap--fone .ap__tela {
    border: 0.42cqw solid #14161A;
    border-radius: 1.5cqw;
    box-shadow:
        0 0 0 0.09cqw rgba(255, 255, 255, 0.26),
        0 2.2cqw 4.4cqw -1.6cqw rgba(0, 0, 0, 0.75);
    aspect-ratio: 9 / 19.5;
}
.ap--fone .ap__tela img { width: 100%; height: 100%; object-fit: cover; }
/* A ilha do celular: estreita e curta, para não comer o cabeçalho da tela —
   a 38% de largura ela cobria a palavra "Carrinho". */
.ap--fone .ap__notch {
    position: absolute; z-index: 2; left: 50%; top: 0.9cqw;
    width: 20%; height: 0.5cqw; transform: translateX(-50%);
    background: #14161A; border-radius: 0.5cqw;
}

/* Flutua devagar, em tempos diferentes: a peça fica viva sem chamar mais
   atenção que o título. */
@media (prefers-reduced-motion: no-preference) {
    .ap--monitor { animation: flutuar 9s ease-in-out infinite; }
    .ap--note    { animation: flutuar 11s ease-in-out infinite 0.8s; }
    .ap--tablet  { animation: flutuar 10s ease-in-out infinite 1.6s; }
    .ap--fone    { animation: flutuar 12s ease-in-out infinite 2.4s; }
}

/* Abaixo de 62rem o hero mostra só a captura do PDV, como antes: quatro
   aparelhos em 390px de largura seriam ilegíveis. */
@media (max-width: 61.99rem) {
    /* o .hero__tela é um grid com place-items:center, que dá ao filho a largura
       do CONTEÚDO — e os aparelhos são todos absolutos, então a caixa colapsava
       para zero (medido em 390px). Aqui ela volta a ocupar a linha inteira. */
    .hero__tela { justify-items: stretch; }
    .aparelhos { aspect-ratio: auto; width: 100%; }
    .ap--note, .ap--tablet, .ap--fone { display: none; }
    .ap--monitor { position: static; width: 100%; }
    .ap--monitor .ap__pescoco, .ap--monitor .ap__base { display: none; }
    .ap--monitor .ap__tela { border-width: 3px; border-bottom-width: 3px; border-radius: 0.75rem; }
}

/* ------------------------------------------- A PEÇA DENTRO DO PAINEL
   O painel do PDV mostrava um mockup com o navegador inteiro à vista, a barra
   de tarefas do Windows embaixo e o carrinho VAZIO — três coisas que não
   deviam aparecer numa página de venda.

   Agora usa a mesma pegada do celular do painel do WhatsApp, que o Victor
   aprovou: peça em perspectiva, fundo transparente, sombra própria, com a
   captura REAL do sistema dentro. O monitor está virado para a esquerda — ele
   fica à direita do texto, então a tela olha para quem lê, nunca para fora da
   página (regra permanente do Victor sobre perspectiva). */
.painel__figura--tela {
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
    display: grid; place-items: center;
    aspect-ratio: auto;
}
.painel__figura--tela img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
    width: 100%; height: auto;
    border-radius: 0;
}


/* ==========================================================================
   28. A CAMADA DO CELULAR
   --------------------------------------------------------------------------
   Pedido do Victor (18/09/2026): "a mesma experiência que tem no desktop,
   transformada para todos os outros dispositivos, e perfeita para cada um.
   Com efeitos perfeitos para cada um. Com legibilidade. Com menos rolagem.
   Que a pessoa não canse. A hero preenchendo a tela logo de começo, e cada
   uma das outras com efeito de card empilhado."

   O que estava errado, medido antes de mexer (390px):
     · página com 13.858px — 17,3 telas, contra 13,0 no desktop
     · rodapé com 874px (o desktop tem 419): 27 links a 44px de altura cada,
       uma escada de duas colunas que ocupa mais de uma tela inteira
     · hero com 1.165px: 1,4 tela, então ela NUNCA aparece inteira — o
       aparelho fica cortado e o visitante começa a página no meio dela
     · #sistema com 3.853px: seis painéis em fila, 4,6 telas de rolagem por
       uma ideia só

   Esta camada não é um "mobile menor": é a composição do celular. Tudo aqui
   está dentro de media query — regra de composição fora de media query é o
   defeito mais caro que já pagamos neste projeto.
   ========================================================================== */

/* ------------------------------------------------------------------ RODAPÉ
   O padrão veio do rodapé do FroX, que o Victor aprovou no celular: as quatro
   colunas ficam LADO A LADO e o link perde os 44px de altura, que aqui só
   serviam para esticar a coluna. O alvo de toque continua confortável pelo
   espaçamento entre linhas — cada link tem 22px de caixa e 10px de respiro. */
@media (max-width: 47.99rem) {
    .rodape { padding-block: var(--sp-6) var(--sp-4); }
    .rodape__grade {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* o espaço entre linhas é ZERO de propósito: as colunas abaixo usam
           subgrid e herdariam esse gap entre CADA link, abrindo 24px onde só
           precisa de ar entre a marca e os títulos */
        gap: 0 0.625rem;
    }
    .rodape__marca { grid-column: 1 / -1; margin-bottom: var(--sp-5); }
    .rodape__marca img { height: 1.75rem !important; margin-bottom: var(--sp-2) !important; }
    .rodape__marca p { font-size: 0.75rem; line-height: 1.5; max-width: 44ch; }

    .rodape h3 {
        font-size: var(--t-xs); letter-spacing: 0.06em;
        margin-bottom: 0;   /* o alvo de 44px do primeiro link já dá o respiro */
        line-height: 1.3;
    }
    /* O FroX chega a 11,5px com 25px de caixa, e visualmente fica ótimo — mas
       ali o dedo erra. Aqui o link mantém os 44px de alvo e ganha corpo de
       12,5px: a economia de altura vem das quatro colunas lado a lado, não de
       espremer o que a pessoa precisa ler e acertar. Contra o rodapé antigo
       ainda são 284px a menos. */
    .rodape ul a {
        display: flex; align-items: center;
        min-height: 2.75rem; padding-block: 2px;
        font-size: 0.78125rem; line-height: 1.25;
        /* "Privacidade" e "Controlar estoque" quebram dentro da coluna em vez
           de encostar na vizinha; o hífen deixa a quebra legível. */
        hyphens: auto;
    }
    .rodape__base {
        margin-top: var(--sp-5); padding-top: var(--sp-4);
        justify-content: center; text-align: center;
        gap: var(--sp-2);
        font-size: var(--t-xs);
    }
    /* o e-mail não tem onde quebrar e é mais largo que a coluna em 320px */
    .rodape__produto { overflow-wrap: anywhere; }
    .rodape__visionx { min-height: 0; padding-block: 0.375rem; }
}
/* As quatro colunas do celular só se alinham de verdade com subgrid: sem ele,
   "PARA QUEM" quebra em duas linhas e empurra a coluna inteira para baixo,
   deixando as fileiras em degrau. Com subgrid, o título de cada coluna e cada
   uma das cinco linhas de link dividem a MESMA fileira nas quatro colunas —
   é o que faz o rodapé ser lido numa varredura só. */
/* Seis fileiras de link desde 21/09/2026, quando "Reembolso" entrou na coluna
   SoftPay: com o subgrid ainda em cinco, o sexto link caía na mesma fileira
   de "Cookies" e os dois se sobrepunham ("Boekiebolso", medido em 390px). */
@media (min-width: 23.5rem) and (max-width: 47.99rem) {
    .rodape__grade { grid-template-rows: auto repeat(7, auto); }
    .rodape__marca { grid-row: 1; }
    .rodape__grade > div:not(.rodape__marca) {
        display: grid; grid-row: 2 / span 7; grid-template-rows: subgrid;
    }
    .rodape__grade > div:not(.rodape__marca) > ul {
        display: grid; grid-row: 2 / span 6; grid-template-rows: subgrid;
    }
}
/* Até 375px a coluna cairia para 66px: "SOLUÇÕES" sozinho mede 80px e invadia
   a coluna vizinha, e "Distribuidora" saía cortada no meio pelo hífen. Duas
   colunas de 155px resolvem — é uma fileira a mais de altura, e vale.
   O subgrid acima NÃO entra aqui de propósito: ele prende os quatro grupos na
   mesma fileira, e com duas colunas isso criava colunas implícitas de 42px. */
@media (max-width: 23.4375rem) {
    .rodape__grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4) 0.625rem;
    }
}


/* -------------------------------------------------------------------- HERO
   "A hero com certeza preencher a tela logo de começo."

   A doutrina da casa diz o contrário para o celular — hero com a altura do
   conteúdo, porque forçar uma tela costuma só alongar a página. Aqui o pedido
   é explícito e vence, mas com uma condição que eu mesma imponho: se ela vai
   ocupar a tela, tem de CABER na tela. De nada adianta 100svh com o conteúdo
   transbordando — seria o defeito de antes com outro nome.

   Por isso o texto encolhe junto: display de 52px para 42px, subtítulo no
   corpo do texto, botões médios, prova social em uma linha. O aparelho fica
   colado na base e sangra 2rem para fora: o corte é o que diz "tem mais
   página aqui embaixo". */
@media (max-width: 61.99rem) {
    .hero {
        min-height: 100svh;
        align-items: stretch;
        /* o rodapé da hero deixa de ser zero: a seção seguinte sobe 1,5rem
           sobre ela (a pilha de cartões), e sem essa folga os dois chips da
           base do aparelho ficavam cortados pela borda arredondada de cima */
        padding-block: calc(var(--nav-h) + 1.25rem) var(--sp-5);
    }
    .hero__grade { align-content: start; gap: var(--sp-5); height: 100%; }

    /* A tipografia NÃO encolhe. A versão anterior apertava display, subtítulo e
       botões para forçar tudo dentro de uma tela — e o Victor cortou na hora
       (18/09): "no celular não é para espremer a hero, hero é para ficar foda".
       O display fica em 44→56px, o subtítulo no tamanho de subtítulo, os botões
       grandes. A tela cheia continua valendo pelo `min-height`: o que muda é
       que o aparelho passa a ficar PARCIALMENTE abaixo da dobra, deitado — e é
       justamente esse pedaço que faz rolar. */
    .hero__selo { margin-bottom: var(--sp-4); }
    .hero .display--hero { font-size: calc(clamp(2.75rem, 1.55rem + 5.3vw, 3.5rem) * var(--display-k)); margin-bottom: var(--sp-4); }
    .hero__sub { max-width: 32ch; margin-bottom: var(--sp-5); }
    .hero__prova { margin-top: var(--sp-5); padding-top: var(--sp-5); }
    .hero__prova-fotos img { width: 2rem; height: 2rem; }

    /* O APARELHO QUE LEVANTA
       O comportamento é o da hero do AlyMaps, que o Victor guardou como
       referência: a peça entra DEITADA, inclinada para trás, e vai ficando de
       pé conforme a pessoa rola. Quem conduz é a rolagem (view timeline), não
       um temporizador — então a peça nunca se mexe sozinha, e onde o navegador
       não suporta ela já nasce de pé, sem nada quebrado.

       `transform-origin: 50% 100%` é o que faz a peça girar apoiada na base,
       como uma tampa de notebook abrindo; girando pelo centro ela afundaria no
       texto. */
    .hero__tela {
        position: relative;
        align-self: end;
        max-width: 23rem;
        perspective: 1400px;
    }
    /* a barra entra logo abaixo da peça e precisa de chão: sem esta folga ela
       era cortada pela borda arredondada da seção seguinte */
    .hero { padding-bottom: var(--sp-6); }
    .hero__tela .aparelhos { transform-origin: 50% 100%; }
}
/* ------------------------------------------------- O SISTEMA, EM BARALHO
   "Cada uma das outras deve ter efeito de card empilhado."

   Os seis painéis eram uma fila: 3.853px, 4,6 telas de rolagem por uma ideia
   só, e a cada rolada o anterior sumia por cima sem que nada acontecesse.
   Aqui cada painel gruda no topo e o seguinte SOBE POR CIMA dele — a pilha se
   monta enquanto a pessoa rola, e o que já passou continua visível como uma
   borda acumulada no alto, igual a um baralho na mão.

   É sticky puro: sem JS, sem evento de rolagem, funciona em qualquer celular
   e não custa nada de desempenho. O `top` cresce 6px por painel — é o que
   deixa a beirada do anterior à mostra em vez de ser encoberta. */
@media (max-width: 61.99rem) {
    .abas--rolagem .abas__painels { display: block; }

    .painel {
        position: sticky;
        top: calc(var(--nav-h) + 4.25rem);
        margin-bottom: var(--sp-4);
        border: 1px solid var(--linha);
        /* a sombra para CIMA é o que faz o cartão novo parecer estar na frente */
        box-shadow: 0 -14px 34px -22px rgba(6, 18, 31, 0.55), var(--sombra-2);
    }
    .painel:nth-child(2) { top: calc(var(--nav-h) + 4.25rem + 6px); }
    .painel:nth-child(3) { top: calc(var(--nav-h) + 4.25rem + 12px); }
    .painel:nth-child(4) { top: calc(var(--nav-h) + 4.25rem + 18px); }
    .painel:nth-child(5) { top: calc(var(--nav-h) + 4.25rem + 24px); }
    .painel:nth-child(6) { top: calc(var(--nav-h) + 4.25rem + 30px); }
    /* o último não tem quem o cubra: fica com respiro normal */
    .painel:last-child { margin-bottom: 0; }

    /* O cartão precisa caber na tela COM a pilha em cima: se passar disso, a
       pessoa rola dentro de um cartão que já está grudado e o efeito vira
       travamento. Daí o aperto — texto menor, figura mais baixa, lista mais
       junta. */
    /* Todos com a MESMA altura: sem isso, um cartão mais alto continua
       aparecendo por baixo do mais curto que subiu na frente, e a pilha vira
       uma sobra de texto solta no meio da tela. */
    .painel {
        padding: var(--sp-4) var(--sp-4) var(--sp-5); gap: var(--sp-3);
        min-height: 33rem; align-content: start;
    }
    .painel .display--cartao { font-size: calc(1.375rem * var(--display-k)); line-height: 1.14; }
    .painel .apoio { font-size: 0.875rem; line-height: 1.5; }
    .painel__lista { gap: 0.375rem; }
    .painel__lista li { font-size: 0.8125rem; line-height: 1.35; }
    .painel__figura img { aspect-ratio: 16 / 9; }
    .painel .link-seta { font-size: 0.875rem; }

    /* a figura vai para o TOPO do cartão: é ela que identifica o painel
       quando só a beirada está à mostra */
    .painel > div { order: 2; }
    .painel__figura { order: 1; }
}

/* Movimento: o cartão entra subindo, e quem pede menos movimento recebe só o
   fade. A pilha em si não é animação — é posição — então continua inteira. */
@media (max-width: 61.99rem) and (prefers-reduced-motion: no-preference) {
    .painel { transition: box-shadow 0.3s linear; }
}


/* --------------------------------------------- MENOS ROLAGEM, MAIS LEITURA
   "Com menos rolagem também. Que seja algo que a pessoa não canse."

   Onde o celular gastava altura sem entregar informação: o display de seção em
   38px ocupava duas ou três linhas em 390px, e o parágrafo de apoio vinha em
   22px, tamanho de subtítulo de hero. Aqui a cabeça de seção fica no corpo do
   texto — continua maior que o corpo, mas para de ser um bloco de 200px antes
   de qualquer conteúdo. */
@media (max-width: 61.99rem) {
    .display--secao { font-size: calc(clamp(1.875rem, 1.2rem + 3vw, 2.25rem) * var(--display-k)); }
    .cabeca-secao { margin-bottom: var(--sp-5); }
    .cabeca-secao .grande { font-size: 1rem; line-height: 1.5; }
}

/* ------------------------------------------------ AS GARANTIAS, LADO A LADO
   Quatro itens curtos em fila vertical são quatro linhas de 100% de largura —
   exatamente o que a doutrina proíbe. Em duas colunas eles cabem numa
   varredura só, com a cena animada em cima do texto em vez de ao lado. */
@media (max-width: 61.99rem) {
    .garantias { padding: var(--sp-4); gap: var(--sp-3); }
    .garantias__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4) var(--sp-3);
    }
    .garantia {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
        padding: 0;
        /* sem isto o item mais curto da dupla estica as duas linhas para
           preencher a altura da fileira, e o texto desce 46px em relação ao
           vizinho — os ícones alinhados e os títulos não */
        align-content: start;
    }
    .garantia + .garantia { border-top: 0; }
    .cena { width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); }
    .cena svg { width: 1.625rem; height: 1.625rem; }
    .garantia__texto b, .garantia__texto strong { font-size: 0.9375rem; }
    .garantia__texto { font-size: 0.8125rem; line-height: 1.45; }
}


/* ------------------------------------------------ EFEITOS QUE SÃO ENTREGA
   No celular não dá para contar com hover: o que existe é o toque e a rolagem.
   Então é neles que o movimento mora.

   1. O fio de progresso. Diz quanto falta, e faz a página parecer curta porque
      a pessoa vê o fim se aproximar. É CSS puro com scroll timeline — nenhum
      ouvinte de rolagem, nenhum quadro gasto em JS. Onde o navegador não
      suporta, simplesmente não existe, e nada mais muda.
   2. O toque. Todo cartão e todo botão afunda 1,5% quando o dedo encosta: é o
      retorno que o celular dá no lugar do hover.
   3. A vitrine. O nome do segmento fica sobre fotografia real, e em algumas
      delas a prateleira é clara — o assentamento do pé ganha peso para o azul
      não se perder no fundo. */
@media (max-width: 61.99rem) {
    @supports (animation-timeline: scroll()) {
        @media (prefers-reduced-motion: no-preference) {
            body::before {
                content: "";
                position: fixed; inset: 0 0 auto 0; z-index: 200;
                height: 2px;
                background: linear-gradient(90deg, var(--acento) 0%, var(--azul) 100%);
                transform: scaleX(0); transform-origin: 0 50%;
                animation: fio-de-leitura linear both;
                animation-timeline: scroll(root);
            }
            @keyframes fio-de-leitura {
                from { transform: scaleX(0); }
                to   { transform: scaleX(1); }
            }
        }
    }

    .painel:active,
    .cartao:active,
    .plano:active,
    .depo:active { transform: scale(0.985); }
    .painel, .cartao, .plano, .depo { transition: transform 0.16s var(--mola); }

    .vitrine__item::after {
        background: linear-gradient(180deg,
            rgba(6,18,31,0.58) 0%,
            rgba(6,18,31,0.10) 20%,
            rgba(6,18,31,0.38) 48%,
            rgba(6,18,31,0.82) 100%);
    }
    .vitrine__item::before { opacity: 0.26; }
}
@media (max-width: 61.99rem) and (prefers-reduced-motion: reduce) {
    .painel, .cartao, .plano, .depo { transition: none; }
    .painel:active, .cartao:active, .plano:active, .depo:active { transform: none; }
}

/* A peça do PDV é um monitor em perspectiva, sem proporção fixa: no celular ela
   sozinha passava de 297px e deixava o primeiro cartão da pilha 80px mais alto
   que os outros cinco — pilha desalinhada é pilha torta. */
@media (max-width: 61.99rem) {
    .painel__figura--tela img { max-height: 11rem; width: auto; margin-inline: auto; }
}

/* Tablet: a mesma hero, com o aparelho maior. Em 768px de largura o monitor de
   26rem deixava um vão de 200px entre a prova social e ele — espaço que no
   celular não existe e aqui sobrava. */
@media (min-width: 37.5rem) and (max-width: 61.99rem) {
    .hero__tela { max-width: 34rem; margin-bottom: -2.5rem; }
}


/* (O bloco "A PÁGINA INTEIRA COMO BARALHO" saiu em 19/09/2026. Ele fazia
   cada seção do celular subir 1,5rem arredondada sobre a anterior, com sombra
   e um fio de luz no topo. O Victor foi mandando endireitar emenda por emenda
   — "Para quem é", "Onde", vitrine → momento, "Onde" → "Planos" — e cobrou:
   "essas bordas arredondadas nas seções não é interessante, você já deveria
   ter corrigido todas logo". Estava certo: o defeito era o bloco, não as
   emendas. Todas as seções voltam a se encontrar em linha reta.
   A pilha de painéis do #sistema é outra coisa e continua.) */


/* ---------------------------------------------- A FOTO QUE RESPIRA (momento)
   As duas seções de fotografia em sangria eram imagem parada. Agora a foto
   fecha o zoom conforme a seção atravessa a tela — é a rolagem que conduz,
   então nada se move sozinho e nada roda fora da tela. Onde não há scroll
   timeline, a foto fica como sempre esteve. */
@media (max-width: 61.99rem) {
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .momento__foto {
                animation: foto-respira linear both;
                animation-timeline: view();
                animation-range: entry 0% exit 100%;
            }
            @keyframes foto-respira {
                from { transform: scale(1.12); }
                to   { transform: scale(1); }
            }
        }
    }
}

/* ------------------------------------------------- OS PLANOS, MAIS JUSTOS
   O cartão de preço é a seção que converte, então não encolhe texto: encolhe
   respiro. Padding de 24 para 16, lista mais junta e o parágrafo de apoio do
   cabeçalho no corpo do texto. */
@media (max-width: 61.99rem) {
    .plano { padding: var(--sp-4); gap: var(--sp-2); }
    .plano__inclui { gap: 0.375rem; }
    .plano__inclui li { font-size: 0.8125rem; line-height: 1.35; }
    .plano__desc { font-size: 0.8125rem; line-height: 1.4; }
    .plano-parte { padding: var(--sp-4); gap: var(--sp-3); }
    .plano-parte .apoio { font-size: 0.8125rem; line-height: 1.45; }

    /* o mapa: o parágrafo dele não está numa .cabeca-secao, então ficou de
       fora do corte geral e continuava em 19px, cinco linhas */
    .mapa__texto .grande { font-size: 1rem; line-height: 1.5; }
    .mapa__lista li { font-size: 0.875rem; }
}


/* ------------------------------------------------- A ESTEIRA SEM CORTE SECO
   Em 390px cabe uma pílula e meia na tela, então as duas das pontas apareciam
   partidas no meio da palavra — "…nte de caixa", "Controle de esto…". De longe
   parece movimento; de perto é texto cortado a faca, e é a primeira coisa que
   se vê depois do hero.

   Duas correções, nenhuma delas tirando o movimento (que é entrega):
   a máscara apaga as pontas antes da borda, e a pílula encolhe para caber
   duas e meia por tela em vez de uma e meia. */
@media (max-width: 61.99rem) {
    .esteira {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    }
    .esteira__trilho { gap: var(--sp-2); }
    .pilula {
        min-height: 3.25rem; padding: 0.25rem 1rem 0.25rem 0.375rem; gap: 0.5rem;
        font-size: 0.875rem;
    }
    .pilula__marca { width: 2.625rem; height: 2.625rem; }
    .pilula__mais { width: 1.25rem; height: 1.25rem; }
    .pilula__mais svg { width: 12px; height: 12px; }
    .pilula--foto img { width: 6.5rem; height: 3.25rem; }
}


/* ==========================================================================
   29. A HERO DO CELULAR — E SÓ DELA
   --------------------------------------------------------------------------
   "Volta o desktop como ele era. Corrige só o mobile. Foca nele."
   (Victor, 19/09/2026)

   Tudo o que eu tinha levado para o desktop na noite de 18/09 — a barra de
   controles cruzando a peça, o foco de luz, o brilho e o ímã do botão, o selo
   que se digita, a peça girando com a rolagem — saiu de lá. O desktop voltou
   aos quatro aparelhos desenhados em CSS, como estava, e o markup deles é o
   mesmo de antes.

   Deste bloco para baixo, NADA vale acima de 62rem. Cada regra está dentro da
   media query do celular, inclusive as que antes moravam fora dela.
   ========================================================================== */

/* O desktop fica com os quatro aparelhos, e nada mais: a peça renderizada, a
   barra de controles e o foco de luz existem só no celular. Sem estes três
   `display: none` o markup deles continuava ocupando altura lá — medido: a
   página de 1440px subiu de 11.731 para 12.104px. */
.hero__tela img.hero__peca, .hero__luz { display: none; }
/* a especificidade aqui não é capricho: `.hero__tela img` (0,2,0) existe desde
   o bloco 21 e vencia um `.hero__peca` (0,1,0) — a peça continuava visível no
   desktop, somando 264px à hero, e o guard acusou. */
@media (max-width: 61.99rem) {
    .aparelhos { display: none; }
    .hero__tela img.hero__peca {
        display: block; width: 100%; height: auto;
        transform-origin: 50% 100%;
        filter:
            drop-shadow(0 18px 28px rgba(29, 161, 242, 0.28))
            drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
    }
    .hero__tela { perspective: 1800px; max-width: 24rem; }

    /* ---- o foco de luz atrás da peça ---- */
    .hero__luz {
        position: absolute; z-index: -1;
        inset: 6% 12% 14%;
        border-radius: 50%;
        background: radial-gradient(closest-side,
            rgba(29, 161, 242, 0.42), rgba(12, 92, 158, 0.22) 55%, transparent);
        filter: blur(34px);
        pointer-events: none;
    }

    /* ---- o botão com o brilho que varre (o ímã é do ponteiro, não existe aqui) ---- */
    .hero .btn--acao {
        background-image:
            linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%),
            linear-gradient(0deg, var(--acento), var(--acento));
        background-size: 250% 100%, 100% 100%;
        background-position: 140% 0, 0 0;
        background-repeat: no-repeat;
        box-shadow: 0 12px 34px -10px rgba(29, 161, 242, 0.55), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    }

    /* ---- o selo que se digita ---- */
    .hero__selo span[data-digita] { display: inline-block; min-height: 1.2em; }
    .hero__selo span.digitando::after {
        content: ""; display: inline-block;
        width: 2px; height: 1em; margin-left: 3px; vertical-align: -0.12em;
        background: var(--acento);
        animation: cursor-pisca 1s steps(1) infinite;
    }
    @keyframes cursor-pisca { 50% { opacity: 0; } }
}

/* --------------------------------------------- O MOVIMENTO, MAIS DEVAGAR
   A peça levanta conduzida pela rolagem, como na referência. Mas o alcance
   dela lá é de 540px numa página de desktop; no celular, com o dedo, 420px
   passavam voando — "tá rapidinho", e estava mesmo: a peça terminava de subir
   antes de a pessoa ter lido o título.

   Agora são 760px, que é a distância entre o topo da página e o fim da hero
   (1.013px menos a altura da peça). O movimento acompanha a leitura inteira
   da primeira tela em vez de se resolver no primeiro polegar. */
@media (max-width: 61.99rem) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll(root)) {
        .hero__peca {
            animation: peca-aproxima linear both;
            animation-timeline: scroll(root);
            animation-range: 0px 760px;
        }
        @keyframes peca-aproxima {
            from { transform: rotateX(22deg) scale(0.94); }
            to   { transform: none; }
        }
    }
    .hero__luz { animation: luz-respira 7s ease-in-out infinite; }
    @keyframes luz-respira { 50% { opacity: 0.62; transform: scale(0.93); } }


    .hero .btn--acao { animation: btn-brilho 4.5s ease-in-out 1.2s infinite; }
    @keyframes btn-brilho {
        0%, 62% { background-position: 140% 0, 0 0; }
        92%, 100% { background-position: -40% 0, 0 0; }
    }
}


/* ------------------------------------------ O TRILHO DE ABAS SEM BARRA
   No iPhone aparecia uma barra de rolagem embaixo das pílulas (PDV e caixa,
   Estoque, Fiado…) enquanto o trilho corria — print do Victor, 19/09/2026.
   `scrollbar-width: none` e `::-webkit-scrollbar { display: none }` já estavam
   lá, e o Safari do iOS ignora os dois: o indicador dele é desenhado pelo
   sistema, por cima do conteúdo, e não obedece a CSS de barra.

   O que funciona em qualquer navegador é tirar o indicador do lugar visível:
   o trilho ganha 12px a mais de respiro embaixo (é ali, na borda de baixo da
   área rolável, que o indicador é pintado), o `clip-path` corta exatamente
   esses 12px, e a margem negativa devolve a altura — nada se mexe na página.
   Não dá para fazer com `overflow: hidden` num pai: o trilho é sticky, e
   elemento sticky dentro de caixa com overflow para de grudar. */
@media (max-width: 63.99rem) {
    .abas--rolagem .abas__botoes {
        padding-bottom: calc(var(--sp-2) + 12px);
        margin-bottom: -12px;
        clip-path: inset(0 0 12px 0);
    }
    .abas--rolagem .abas__botoes::-webkit-scrollbar {
        display: none; width: 0; height: 0; background: transparent;
        -webkit-appearance: none;
    }
}


/* ---------------------------------------------- OS NÚMEROS DO MAPA
   Print do Victor (19/09/2026): "corrija o design destes números". Eram três
   números em duas colunas — o "0" caía sozinho numa terceira fileira, com o
   dobro de largura dos outros e o texto espremido à esquerda, e um fio
   atravessava a seção acima deles. Três itens em duas colunas é exatamente a
   linha órfã que a doutrina proíbe.

   Agora é uma faixa só, três colunas iguais dentro de um painel, separadas por
   fio de 1px (o `gap` de 1px mostra o fundo do painel entre as células). Tudo
   centralizado: número em cima, legenda embaixo, como placar. O contador
   animado (`data-conta`) continua funcionando — não mudou markup nenhum. */
@media (max-width: 47.99rem) {
    .mapa__numeros {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        margin-top: var(--sp-6);
        padding: 0;
        border-top: 0;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r-md);
        overflow: hidden;
        /* o shell dá o respiro lateral; a faixa respeita a mesma borda */
        width: calc(100% - 2 * var(--gutter));
        padding-inline: 0;
    }
    .mapa__numeros > div,
    .mapa__numeros > div:last-child {
        grid-column: auto;
        display: grid; justify-items: center; align-content: start;
        padding: var(--sp-4) var(--sp-2);
        background: var(--noite);
        text-align: center;
    }
    .mapa__numeros b { font-size: calc(2.375rem * var(--display-k)); }
    .mapa__numeros span {
        margin-top: var(--sp-2);
        font-size: 0.75rem; line-height: 1.4;
        max-width: none;
        color: rgba(255, 255, 255, 0.72);
    }
}

/* ------------------------------------ A EMENDA "ONDE" → "PLANOS"
   Mesmo print: o fim do bloco escuro tinha um degradê de 6rem clareando até
   cinza (o `data-passagem`) e, em cima dele, "Planos" subia arredondado. Os
   dois juntos faziam uma faixa cinza suja entre o azul-noite e o branco.
   No celular os dois saem: o escuro termina escuro e "Planos" começa reto,
   como as outras emendas que o Victor já mandou endireitar. */
@media (max-width: 61.99rem) {
    #onde[data-passagem]::after { content: none; }
}


/* ==========================================================================
   30. A BARRA DO TOPO E A BARRA DE BAIXO, MINIMALISTAS (celular)
   --------------------------------------------------------------------------
   "Deixe ambos mais minimalistas e intuitivos" (Victor, 19/09/2026, prints do
   iPhone). O que pesava nas duas:

   · TOPO: uma pílula branca de ~62px com logotipo, um botão "Testar grátis"
     do tamanho de um CTA de hero e um hambúrguer num círculo cinza. Três
     blocos de peso igual brigando numa faixa de 358px.
   · BAIXO: um painel cinza de largura inteira, com borda em cima, e dois
     botões de 48px — ocupava 80px da tela o tempo todo.
   · E os dois ao mesmo tempo mostravam o MESMO convite ("Testar grátis" em
     cima, "Começar grátis" embaixo). Dois botões iguais não é reforço, é ruído.

   O que muda:
   · Um convite de cada vez. Enquanto a hero está na tela, o convite mora no
     topo. Quando a barra de baixo aparece, ele sai do topo — a ação fica onde
     o polegar está, e o topo vira só logotipo e menu. Isso é `:has()` lendo o
     mesmo estado que o JS já escreve na barra (`data-visivel`), sem JS novo.
   · Topo mais baixo (52px), logotipo menor, botão compacto, hambúrguer sem o
     círculo de fundo — só o ícone, com o alvo de toque de 44px preservado.
   · Baixo vira uma pílula flutuante escura, com respiro das bordas e da
     área de segurança do iPhone, em vez de um painel colado no rodapé. O
     botão principal ocupa a maior parte; "Planos" vira um botão de texto ao
     lado, sem contorno.
   ========================================================================== */
@media (max-width: 61.99rem) {
    /* ---- TOPO ---- */
    .nav {
        inset: max(0.5rem, env(safe-area-inset-top)) var(--gutter) auto;
        min-height: 0;
        gap: var(--sp-2);
        padding: 0.25rem 0.25rem 0.25rem 1rem;
    }
    .nav__logo img { height: 1.5rem; }
    .nav__acoes { gap: 0.25rem; }
    .nav .btn--acao {
        min-height: 2.75rem;
        padding-inline: 1rem;
        font-size: 0.875rem;
    }
    .nav__hamburguer,
    .nav[data-solida="nao"] .nav__hamburguer {
        width: 2.75rem; height: 2.75rem;
        background: transparent;
    }
    /* um convite de cada vez */
    body:has(.cta-fixa[data-visivel="sim"]) .nav .btn--acao { display: none; }

    /* ---- BAIXO ---- */
    .cta-fixa {
        inset: auto var(--gutter) max(0.75rem, env(safe-area-inset-bottom));
        gap: 0.25rem;
        padding: 0.3125rem;
        background: rgba(6, 18, 31, 0.9);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        backdrop-filter: blur(14px) saturate(1.4);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r-pill);
        box-shadow: 0 16px 36px -14px rgba(6, 18, 31, 0.6);
        /* sai por baixo com folga suficiente para a sombra sumir junto */
        transform: translateY(calc(100% + 2rem));
    }
    .cta-fixa[data-visivel="sim"] { transform: translateY(0); }
    .cta-fixa > .btn {
        min-height: 2.75rem;
        font-size: 0.9375rem;
    }
    .cta-fixa > .btn--acao { flex: 1.8 1 0; }
    .cta-fixa > .btn--linha {
        flex: 1 1 0;
        background: transparent;
        border-color: transparent;
        color: rgba(255, 255, 255, 0.86);
    }
}
@media (max-width: 61.99rem) and (hover: hover) and (pointer: fine) {
    .cta-fixa > .btn--linha:hover { color: var(--branco); background: rgba(255, 255, 255, 0.08); }
}

/* A barra do topo encolheu de ~62px para 54px (mais 8px de respiro do topo).
   `--nav-h` é a medida que o trilho de abas, a pilha de painéis, a gaveta, o
   respiro da hero e a âncora de rolagem usam para não ficar por baixo dela —
   sem acompanhar, sobrava um vão de 17px entre a barra e o trilho de abas. */
@media (max-width: 61.99rem) {
    :root { --nav-h: 3.875rem; }
}


/* ==========================================================================
   31. O RODAPÉ NO PADRÃO DAS LPs DA VISIONX
   --------------------------------------------------------------------------
   "Isso aqui também merece ficar mais minimalista, e as referências do
   SoftPay e da VisionX estão ruins, não estão no padrão" (Victor, 19/09/2026).

   O padrão é o rodapé do FroX, que ele aprovou: a base tem três peças e só
   três — o copyright do produto numa frase, os contatos como ícones e a
   assinatura oficial da VisionX (ícone X + © + CNPJ). O SoftPay tinha
   inventado um meio-termo: uma linha corrida com cidade, e-mail escrito por
   extenso e telefone, que no celular quebrava em duas linhas e parecia rodapé
   de documento, não de produto.

   A base é markup de conteúdo, então vale em todo aparelho — é a mesma nas 74
   páginas e no gerador (tools/template.py). O que é composição de celular
   (colunas mais leves, base centralizada) está dentro da media query.
   ========================================================================== */
.rodape__social { display: inline-flex; align-items: center; gap: var(--sp-2); }
.rodape__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;           /* alvo de toque cheio, ícone menor */
    border-radius: var(--r-pill);
    transition: transform 0.18s var(--mola);
}
.rodape__social svg { width: 32px; height: 32px; }
@media (hover: hover) and (pointer: fine) {
    .rodape__social a:hover { transform: translateY(-2px); }
}
.rodape__social a:active { transform: scale(0.94); }
.rodape__produto { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 47.99rem) {
    /* ---- as colunas, mais leves ----
       Menos peso sem perder leitura: títulos em cinza e caixa pequena (eram
       brancos em negrito, gritavam mais que os links), links um pouco menores e
       com o passo de linha do FroX em vez dos 44px que abriam vão entre eles. */
    .rodape { padding-block: var(--sp-6) var(--sp-5); }
    .rodape__marca img { height: 1.5rem !important; }
    .rodape__marca p { font-size: 0.75rem; color: rgba(255, 255, 255, 0.56) !important; }
    .rodape h3 {
        font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.46);
        margin-bottom: 0.25rem;
    }
    .rodape ul a {
        /* 20/09/2026: aqui estava `min-height: 0`, que zerava os 44px decididos
           na camada de cima e deixava o link com 30,3px de caixa — o dedo erra
           e acerta o vizinho. O alvo volta a 44px; a altura do rodape cresce
           pouco porque as quatro colunas ficam lado a lado. */
        min-height: 2.75rem;
        padding-block: 2px;
        font-size: 0.78125rem; line-height: 1.3;
        color: rgba(255, 255, 255, 0.78);
    }

    /* ---- a base: três linhas centradas, cada uma com um trabalho ---- */
    .rodape__base {
        flex-direction: column; align-items: center; justify-content: center;
        gap: var(--sp-2);
        margin-top: var(--sp-5); padding-top: var(--sp-5);
        border-top-color: rgba(255, 255, 255, 0.08);
        text-align: center;
    }
    .rodape__produto { font-size: 0.75rem; }
    /* A assinatura é longa demais para uma linha em 358px. Em flex, o X ficava
       isolado à esquerda de um bloco de três linhas. Aqui ela corre como texto:
       o X entra na primeira linha e o CNPJ desce inteiro para a segunda (o
       separador "·" vira a quebra). */
    .rodape__visionx {
        display: block; text-align: center;
        font-size: 0.6875rem; line-height: 1.6;
        min-height: 0; padding-block: 0.25rem;
    }
    .rodape__visionx .rodape__x {
        display: inline-block; vertical-align: -0.1em;
        width: 0.75rem; height: 0.75rem; margin-right: 0.375rem;
    }
    .rodape__visionx i { display: block; height: 0; overflow: hidden; }
}


/* (A barra de controles que cruzava a peça da hero no celular saiu em
   19/09/2026: "isso aqui tá com cara de IA". Estava mesmo — eram quatro
   controles falsos, chave, trilho e valor desenhados em CSS imitando a hero do
   AlyMaps, que lá mostram filtros REAIS do produto. Aqui nenhum deles era um
   controle do SoftPay que a pessoa encontraria igual no sistema. A peça
   renderizada, com as capturas de verdade, já diz o que o produto faz.) */

/* ------------------------------------------ A BASE DO RODAPÉ NO CELULAR
   "A referência da VisionX não está visível; deve ficar perfeita, perto da do
   SoftPay, minimalista igual à do desktop" (Victor, 19/09/2026).

   Não estava visível por dois motivos: a pílula flutuante de baixo cobria a
   assinatura inteira (resolvido no efeitos.js — a pílula sai quando o fim da
   página aparece), e ela ficava longe do copyright do SoftPay, com a fileira
   de ícones no meio.

   Agora os ícones vêm primeiro e as duas assinaturas ficam juntas embaixo,
   coladas, no mesmo tamanho e na mesma cor — como no desktop, onde elas
   dividem a mesma linha. */
@media (max-width: 47.99rem) {
    .rodape__base { gap: 0; }
    .rodape__social { order: 1; margin-bottom: var(--sp-3); }
    .rodape__produto { order: 2; }
    .rodape__visionx { order: 3; }
    .rodape__produto,
    .rodape__visionx {
        font-size: 0.6875rem; line-height: 1.6;
        color: rgba(255, 255, 255, 0.62);
        padding-block: 0;
    }
    .rodape__visionx .rodape__x { color: var(--branco); opacity: 0.85; }
}


/* ------------------------------------------------ O FAQ CENTRALIZADO (celular)
   Pedido do Victor (19/09/2026): centralizar "Perguntas frequentes" e as
   perguntas. A cabeça da seção centraliza como as de "Planos" e "Tudo em um
   lugar só". Na pergunta, o texto vai para o centro e o "+" sai do fluxo e
   fica ancorado à direita — com o mesmo respiro dos dois lados, para o texto
   ficar no centro de verdade e não no centro do que sobra depois do ícone. A
   resposta acompanha, centralizada e com largura de leitura. */
@media (max-width: 47.99rem) {
    #duvidas .cabeca-secao { text-align: center; }
    #duvidas .faq__item > summary {
        position: relative;
        justify-content: center; text-align: center;
        padding-inline: 2.25rem;
    }
    #duvidas .faq__mais {
        position: absolute; right: 0; top: 50%;
        margin-top: -0.75rem;
    }
    #duvidas .faq__item > div { text-align: center; }
    #duvidas .faq__item p { max-width: 36ch; margin-inline: auto; }
}


/* ==========================================================================
   32. "PARA QUEM É" EM TELA CHEIA, EMPILHANDO (celular)
   --------------------------------------------------------------------------
   Pedido do Victor (19/09/2026): no desktop os lojistas aparecem em painéis
   verticais grandes, da altura da tela. No celular eles viravam uma grade
   2x3 de cartões pequenos. Ele quer o mesmo impacto no celular, com o
   comportamento da pilha do "sistema por dentro": cada lojista ocupa o
   aparelho INTEIRO, gruda no topo, e o próximo sobe por cima conforme a
   rolagem.

   · Cada painel tem 100svh (a altura "pequena" da tela: não pula quando a
     barra do Safari aparece e some) e gruda em top: 0. Os seis são irmãos no
     mesmo contêiner, então o de baixo pinta por cima do de cima — a pilha sai
     da ordem do documento, sem z-index.
   · A foto não é a mesma da grade. Esticar o recorte 3:4 de 1000px até a
     altura de um iPhone dava 1,9x de ampliação pelo navegador — mole. Cada
     lojista ganhou um recorte próprio em retrato alto (tools/tela-cheia.py):
     rosto com 25% da largura da tela, centrado, a 36% da altura da foto, o
     MESMO padrão nos seis, e ampliado 4x com Real-ESRGAN antes de reduzir
     para 1170px (DPR 3) e 780px (DPR 2).
   · A foto ocupa os 78% de cima e se dissolve no azul-noite; o nome e o
     botão ficam no chão escuro, acima da pílula flutuante de "Começar
     grátis", e nunca em cima do rosto.
   · Cada painel entra com a foto fechando o zoom e o nome subindo — conduzido
     pela rolagem (view timeline), não por tempo.
   ========================================================================== */
@media (max-width: 47.99rem) {
    #para-quem .vitrine { display: block; }
    #para-quem .vitrine__item {
        position: sticky; top: 0;
        height: 100svh; aspect-ratio: auto;
        container-type: inline-size;
        background: var(--noite);
        /* a sombra para cima é o que separa o painel que chega do que ficou */
        box-shadow: 0 -28px 50px -18px rgba(0, 0, 0, 0.7);
    }
    #para-quem .vitrine__item + .vitrine__item { box-shadow: 0 -28px 50px -18px rgba(0, 0, 0, 0.7); }
    #para-quem .vitrine__item img {
        inset: 0 0 auto 0; height: 78%;
        object-fit: cover; object-position: 50% 36%;
    }
    #para-quem .vitrine__item::after {
        background: linear-gradient(180deg,
            rgba(6, 18, 31, 0.62) 0%,
            rgba(6, 18, 31, 0) 20%,
            rgba(6, 18, 31, 0) 48%,
            rgba(6, 18, 31, 0.78) 68%,
            var(--noite) 78%,
            var(--noite) 100%);
    }
    #para-quem .vitrine__item::before { content: none; }

    /* o selo "cliente" fica logo abaixo da barra do topo */
    #para-quem .vitrine__selo {
        padding-top: calc(var(--nav-h) + 1rem);
        font-size: 0.8125rem;
    }
    /* nome e botão no chão escuro, acima da pílula flutuante (58px + 12px de
       respiro + a área de segurança do iPhone) */
    #para-quem .vitrine__rotulo {
        inset: auto 0 0;
        padding: 0 var(--gutter) calc(5.5rem + env(safe-area-inset-bottom));
        gap: var(--sp-4);
    }
    #para-quem .vitrine__nome { font-size: min(22cqw, 5.5rem); }
    #para-quem .vitrine__rotulo .vitrine__seta {
        margin-top: 0;
        min-height: 3rem; padding-inline: 1.5rem 1.25rem;
        font-size: 1rem;
    }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        #para-quem .vitrine__item img {
            animation: painel-foto linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }
        @keyframes painel-foto { from { transform: scale(1.14); } to { transform: none; } }
        #para-quem .vitrine__rotulo {
            animation: painel-nome linear both;
            animation-timeline: view();
            animation-range: entry 40% entry 100%;
        }
        @keyframes painel-nome { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
    }
}


/* ------------------------------------------------ OS LOJISTAS EMBARALHAM
   Pedido do Victor (19/09/2026): em vez de subirem como a pilha do "sistema
   por dentro" — a mesma sensação duas vezes na página —, os lojistas entram
   DE LADO, como carta sendo embaralhada.

   Como a rolagem é vertical e o movimento tem de parecer horizontal: cada
   painel tem 100svh, então a fase de ENTRADA dele na tela (view timeline,
   `entry 0%` → `entry 100%`) dura exatamente uma tela de rolagem, e nela o
   painel sobe 100svh sozinho. O `translateY(-100%)` no início da animação
   devolve essa subida inteira: o painel fica desenhado no topo o tempo todo e
   o único movimento que sobra é o lateral. Linear com linear, a conta fecha
   em todos os pontos, não só no começo e no fim.

   · Alternam de lado — o 2º vem da direita, o 3º da esquerda, e assim por
     diante — com 7° de giro que se desfaz na chegada: é o que dá o "embaralhar".
   · O 1º NÃO embaralha: ele entra normal, subindo junto com o título da
     seção. Se entrasse de lado, cobriria o título antes de a pessoa lê-lo.
   · A sombra acompanha o lado de onde a carta chega.
   · `overflow-x: clip` na vitrine segura a carta que está fora da tela sem
     criar contêiner de rolagem — `hidden` mataria o sticky.
   · Com "reduzir movimento", ou sem suporte a scroll timeline, continua a
     pilha que sobe, que já funciona sozinha. */
@media (max-width: 47.99rem) {
    #para-quem .vitrine { overflow-x: clip; }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        #para-quem .vitrine__item:nth-child(n + 2) {
            animation: carta-direita linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
            box-shadow: -34px 0 60px -24px rgba(0, 0, 0, 0.75);
        }
        #para-quem .vitrine__item:nth-child(odd):nth-child(n + 3) {
            animation-name: carta-esquerda;
            box-shadow: 34px 0 60px -24px rgba(0, 0, 0, 0.75);
        }
        @keyframes carta-direita {
            from { transform: translateY(-100%) translateX(108%) rotate(7deg); }
            to   { transform: none; }
        }
        @keyframes carta-esquerda {
            from { transform: translateY(-100%) translateX(-108%) rotate(-7deg); }
            to   { transform: none; }
        }
        /* o giro acontece em torno do pé da carta, como na mão */
        #para-quem .vitrine__item { transform-origin: 50% 100%; }
    }
}


/* O trilho de tópicos sai de cena quando o último painel chega ao topo — o
   JS (cena.js, recolherTrilho) marca `data-some`. Ele sobe para baixo da barra
   do topo e apaga; volta do mesmo jeito ao rolar para cima. */
@media (max-width: 63.99rem) {
    .abas--rolagem .abas__botoes {
        transition: transform 0.32s var(--mola), opacity 0.22s linear;
    }
    .abas--rolagem .abas__botoes[data-some] {
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
    }
}
@media (max-width: 63.99rem) and (prefers-reduced-motion: reduce) {
    .abas--rolagem .abas__botoes { transition: opacity 0.2s linear; }
    .abas--rolagem .abas__botoes[data-some] { transform: none; }
}


/* ==========================================================================
   33. A HERO DO CELULAR COM AR
   --------------------------------------------------------------------------
   Print do Victor (19/09/2026): "tá muito espremido, um em cima do outro; o
   Começar grátis e o Ver planos não estão me agradando; o Mais de 100
   lojistas tem de ficar menor; a hero tem de aproveitar a tela inteira".

   Medido antes (390px):
   · título em 45px com entrelinha de 40px (0,88) — as duas linhas coladas;
   · 16px entre selo e título, 16px entre título e subtítulo, 24px até os
     botões — tudo no mesmo passo curto, nada respira;
   · "Começar grátis" quebrava em DUAS linhas e ficava com 74px de altura, ao
     lado de um "Ver planos" de 56px — dois botões de tamanhos diferentes;
   · prova social em 14px com avatares de 32px, pesando como um parágrafo.

   Agora:
   · Título em quatro linhas de cartaz (76px em 390, 70px em 360) com
     entrelinha de 0,98: as linhas se separam sem perder o bloco.
   · O texto ocupa a primeira tela inteira: o bloco tem a altura da tela menos
     a barra do topo e uma faixa de 5,5rem onde a peça dos aparelhos aparece
     espiando. O espaço que sobra não vai para o meio de tudo — vai para dois
     lugares só: antes dos botões e antes da prova social. Título e subtítulo
     no alto, ação no meio-baixo, prova no pé: três andares.
   · Botões na mesma altura (52px), numa linha só cada, lado a lado; o
     principal leva 58% da largura.
   · Prova social menor: avatares de 24px e texto de 12px.
   ========================================================================== */
@media (max-width: 47.99rem) {
    .hero__conteudo {
        display: flex; flex-direction: column;
        min-height: calc(100svh - var(--nav-h) - 1.25rem - 5.5rem);
    }
    .hero__selo { align-self: flex-start; margin-bottom: var(--sp-5); }

    /* Quatro linhas de cartaz, não duas espremidas: em qualquer tamanho que
       caiba "SUA LOJA INTEIRA" numa linha (46px em 390) o título volta a ser
       uma faixa baixa e apertada. Deixando quebrar em SUA LOJA / INTEIRA /
       EM UMA / TELA SÓ, a letra pode crescer até a linha mais longa ("SUA
       LOJA") ocupar ~80% da largura — 76px em 390, 70px em 360. */
    .hero .display--hero {
        font-size: calc(min(19.5vw, 5.5rem) * var(--display-k));
        line-height: 0.98;
        letter-spacing: -0.005em;
        margin-bottom: 1.25rem;
    }
    .hero__sub {
        font-size: 1.0625rem; line-height: 1.6;
        color: rgba(255, 255, 255, 0.78);
        max-width: 34ch;
        margin-bottom: var(--sp-6);
    }

    /* os dois andares de baixo empurram-se para o pé do bloco */
    .hero .cluster--cta {
        margin-top: auto;
        display: flex; flex-wrap: nowrap; gap: var(--sp-2);
    }
    .hero .cluster--cta .btn {
        min-height: 3.25rem; height: 3.25rem;
        padding-inline: 1rem;
        font-size: 1rem; white-space: nowrap;
    }
    .hero .cluster--cta .btn--acao { flex: 1.4 1 0; }
    .hero .cluster--cta .btn--fantasma-claro { flex: 1 1 0; }

    .hero__nota { margin-top: var(--sp-3); font-size: 0.8125rem; }

    .hero__prova {
        margin-top: auto;
        padding-top: var(--sp-4);
        gap: var(--sp-2);
        border-top-color: rgba(255, 255, 255, 0.1);
    }
    /* o `margin-top: auto` da prova só reparte espaço se o CTA não levar tudo:
       os dois ganham auto e o flex divide o que sobra ao meio */
    .hero .cluster--cta + .hero__nota + .hero__prova { margin-top: auto; }
    .hero__prova-fotos img {
        width: 1.5rem; height: 1.5rem; border-width: 1.5px;
    }
    .hero__prova-fotos img + img { margin-left: -0.4rem; }
    .hero__prova p { font-size: 0.75rem; line-height: 1.45; color: rgba(255, 255, 255, 0.66); }
    .hero__prova strong { font-weight: 600; }
}
/* Em 360px o selo "Novo · Registre a venda falando no WhatsApp" quebrava em
   duas linhas e virava um bloco de 58px no topo da hero. */
@media (max-width: 24.3rem) {
    .hero__selo { font-size: 0.75rem; gap: 0.375rem; padding-right: 0.75rem; }
    .hero__selo b { padding-inline: 0.4rem; }
}


/* --------------------------------------- CABEÇAS DE SEÇÃO CENTRALIZADAS
   Pedido do Victor (19/09/2026): centralizar "O sistema por dentro", "Onde o
   SoftPay já está" e "Quem já usa" no celular, como já estão "Tudo em um lugar
   só", "Planos", "Para quem é" e "Perguntas frequentes". Rótulo, título e
   texto de apoio no centro; no mapa, a lista de estados e o link também, para
   o bloco não ficar metade no centro e metade encostado à esquerda. */
@media (max-width: 47.99rem) {
    #sistema .cabeca-secao,
    #depoimentos .cabeca-secao,
    #onde .mapa__texto { text-align: center; }
    #sistema .cabeca-secao .leitura,
    #onde .mapa__texto .grande { margin-inline: auto; }

    #onde .mapa__lista { justify-items: center; }
    #onde .mapa__lista li { grid-template-columns: auto auto; justify-content: center; text-align: left; }
    #onde .link-seta { justify-content: center; }
}


/* ---------------------------------------- A PEÇA DO CELULAR, NÍTIDA
   "Corrige as imagens que estão dentro do monitor e do celular" (Victor,
   19/09/2026). Eram dois defeitos somados:

   1. CONTEÚDO — o monitor mostrava um recorte do meio do PDV, com cartões de
      produto cortados na esquerda e preços do carrinho na direita; o celular
      mostrava uma captura que já vinha cortada na borda esquerda. Refeito em
      tools/peca-hero-celular.py: o monitor mostra o PDV inteiro e o celular o
      painel do carrinho completo, a mesma venda de R$ 414,60 nos dois.

   2. BORRÃO — medido lado a lado no meio da rolagem (DPR 3): com
      `filter: drop-shadow` numa imagem que está animando em 3D, o Chrome
      rasteriza a camada em baixa resolução e o texto das telas vira mancha.
      Sem o filtro, a mesma animação sai nítida. A sombra sai da imagem e vira
      uma elipse própria embaixo da peça (desfoque por gradiente, não por
      filtro), e o foco de luz atrás continua. Vale até o tablet, onde a mesma
   peça aparece. */
@media (max-width: 61.99rem) {
    .hero__tela img.hero__peca { filter: none; }
    .hero__tela::after {
        content: ""; position: absolute; z-index: -1;
        left: 8%; right: 8%; bottom: 1%; height: 14%;
        border-radius: 50%;
        background: radial-gradient(closest-side,
            rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 55%, transparent);
        pointer-events: none;
    }
    .hero__luz {
        background: radial-gradient(closest-side,
            rgba(29, 161, 242, 0.5), rgba(12, 92, 158, 0.24) 55%, transparent);
    }
}


/* ---------------------------------------------- O CONVITE FINAL (celular)
   Print do Victor (19/09/2026): "deixe intuitivo e minimalista, o do WhatsApp
   deve ficar verde". Medido antes: "Começar grátis" quebrava em duas linhas e
   ficava mais alto que o "WhatsApp" ao lado, e o WhatsApp era um botão cinza
   que não dizia de longe o que era.

   · Os dois na mesma altura (52px), uma linha cada, lado a lado — o mesmo par
     da hero, para o fim da página falar a mesma língua do começo.
   · WhatsApp no verde da marca (#25D366) com o ícone dela: reconhecido antes
     de ser lido. Texto escuro, como no botão azul ao lado — branco sobre esse
     verde dá 2:1 de contraste; o azul-noite dá 10:1.
   · O ícone só aparece aqui: no desktop o botão continua como estava. */
.btn__icone { display: none; }
@media (max-width: 47.99rem) {
    .cta-final .cluster--cta {
        display: flex; flex-wrap: nowrap; gap: var(--sp-2);
        width: 100%;
    }
    .cta-final .cluster--cta .btn {
        min-height: 3.25rem; height: 3.25rem;
        padding-inline: 1rem;
        font-size: 1rem; white-space: nowrap;
        flex: 1 1 0;
    }
    .cta-final .btn--whats {
        gap: 0.5rem;
        background: #25D366; border-color: #25D366;
        color: var(--noite);
        box-shadow: 0 12px 26px -12px rgba(3, 10, 18, 0.6);   /* sombra escura: brilho verde era tell (anti-slop) */
    }
    .cta-final .btn--whats .btn__icone { display: block; flex: none; }
    .cta-final .btn--whats:active { transform: scale(0.97); }
}
@media (max-width: 47.99rem) and (hover: hover) and (pointer: fine) {
    .cta-final .btn--whats:hover { background: #2EE072; border-color: #2EE072; }
}


/* ==========================================================================
   34. PLANOS, GARANTIAS E FAQ MAIS LIMPOS (celular)
   --------------------------------------------------------------------------
   Três prints do Victor (19/09/2026).

   PLANOS — "dá para tornar esses três mais minimalistas e bonitos". Medido
   antes em 390px: 762px só nos três cartões. Nos dois lado a lado (colunas de
   ~150px) tudo quebrava: a descrição em três linhas, cada item da lista em
   duas, e o "Testar grátis" em DUAS linhas num botão de 64px. A etiqueta era
   uma pílula cinza pesando tanto quanto o nome.
   · Etiqueta vira texto pequeno em caixa alta, sem pílula.
   · Nos dois cartões menores a descrição sai da vista: o nome, a etiqueta e a
     lista já dizem o mesmo, e é ela que empurrava o preço para baixo. (Continua
     no HTML; no destaque ela fica.)
   · Lista em 13px, botão de 44px numa linha só.
   · "Nota fiscal" vira faixa compacta: texto em 13px e preço e botão lado a
     lado no pé.
   · O link "Ajuda para configurar no WhatsApp" perde o azul e o sublinhado
     do navegador.

   SEM PEGADINHA — "diferente do desktop, aqui não está legal; sem ocupar
   tanto espaço". Eram quatro itens em duas colunas de ~150px: título em duas
   linhas, texto em cinco a seis, 635px. Vira lista: ícone à esquerda, título e
   texto à direita na largura toda (o texto cai para três linhas), fio fino
   entre os itens — o formato de lista de garantias.

   FAQ — "deixe as linhas divisórias um pouco mais visíveis e coloque uma em
   cima da 1ª pergunta".
   ========================================================================== */
@media (max-width: 47.99rem) {
    /* ---------------- PLANOS ---------------- */
    .planos { gap: var(--sp-2); }
    .plano { gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-md); }
    .plano--destaque { padding: var(--sp-5) var(--sp-4); gap: var(--sp-3); }
    .plano__tag,
    .plano--destaque .plano__tag {
        padding: 0; background: none; border-radius: 0;
        font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
        color: var(--tinta-3);
    }
    .plano--destaque .plano__tag { color: var(--acento); }
    .plano__nome { font-size: calc(1.25rem * var(--display-k)); }
    .plano:not(.plano--destaque) .plano__desc { display: none; }
    .plano--destaque .plano__desc { font-size: 0.875rem; color: rgba(255, 255, 255, 0.72); }
    .plano__preco { font-size: calc(1.875rem * var(--display-k)); margin-top: var(--sp-1); }
    .plano:not(.plano--destaque) .plano__preco { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
    .plano__ciclo { font-size: 0.75rem; }
    .plano__inclui { gap: 0.375rem; margin-block: var(--sp-1); }
    .plano__inclui li { font-size: 0.8125rem; line-height: 1.35; gap: 0.375rem; }
    .plano__inclui svg { width: 13px; height: 13px; margin-top: 0.15rem; }
    .plano .btn {
        min-height: 2.75rem; height: 2.75rem; padding-inline: 0.75rem;
        font-size: 0.875rem; white-space: nowrap;
        margin-top: var(--sp-2);
    }
    .plano--destaque .btn { min-height: 3rem; height: 3rem; font-size: 0.9375rem; }

    .plano-parte {
        display: grid; gap: var(--sp-2);
        margin-top: var(--sp-2);
        padding: var(--sp-4);
    }
    .plano-parte__texto { gap: var(--sp-1); }
    .plano-parte__nome { font-size: calc(1.25rem * var(--display-k)); }
    .plano-parte__texto .apoio { font-size: 0.8125rem; line-height: 1.45; }
    .plano-parte__acao {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--sp-3); margin-top: var(--sp-1);
    }
    .plano-parte__acao .plano__preco { font-size: calc(1.625rem * var(--display-k)); }
    .plano-parte__acao .btn {
        min-height: 2.75rem; height: 2.75rem; padding-inline: 1.25rem;
        font-size: 0.875rem; white-space: nowrap;
    }

    .planos__rodape { font-size: 0.75rem !important; line-height: 1.6; color: var(--tinta-3); }
    .planos__rodape a { color: var(--azul); text-decoration: none; font-weight: 600; white-space: nowrap; }

    /* ---------------- SEM PEGADINHA ---------------- */
    .garantias { padding: var(--sp-4) var(--sp-4) var(--sp-3); gap: var(--sp-2); }
    .garantias__lista { grid-template-columns: 1fr; gap: 0; }
    .garantia {
        grid-template-columns: auto 1fr;
        align-items: start; gap: var(--sp-3);
        padding: var(--sp-3) 0;
    }
    .garantia + .garantia { border-top: 1px solid var(--linha); }
    .garantia:first-child { padding-top: var(--sp-2); }
    .cena { width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); }
    .cena svg { width: 1.5rem; height: 1.5rem; }
    .garantia__texto { font-size: 0.8125rem; line-height: 1.45; }
    .garantia__texto b { font-size: 0.9375rem; margin-bottom: 0.1rem; }
    .garantias__nota { font-size: 0.8125rem; line-height: 1.5; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); margin-top: var(--sp-1); }

    /* ---------------- FAQ ---------------- */
    #duvidas .faq__item { border-bottom-color: var(--linha-forte); }
    #duvidas .faq > .faq__item:first-child { border-top: 1px solid var(--linha-forte); }
}
/* O ritmo do cartão de plano vem só do `gap`: as margens herdadas de camadas
   anteriores abriam ~35px entre o preço e a lista. O botão dos dois cartões
   menores desce para o pé (margin-top: auto), e os dois ficam na mesma linha
   mesmo quando uma lista quebra mais que a outra. */
@media (max-width: 47.99rem) {
    .plano > * { margin-block: 0; }
    .plano { gap: var(--sp-2); }
    .plano__preco { margin-top: var(--sp-1); }
    .plano__inclui { margin-top: var(--sp-2); }
    .plano .btn { margin-top: auto; }
    .plano__inclui + .btn { margin-top: max(var(--sp-3), auto); }
    .plano:not(.plano--destaque) .btn { margin-top: auto; }
    .plano:not(.plano--destaque) .plano__inclui { margin-bottom: var(--sp-3); }
    .plano--destaque .plano__inclui { margin-bottom: var(--sp-2); }
}
/* grade não distribui `margin: auto` entre linhas; em coluna flex, sim — é o
   que leva os dois botões para o pé na mesma altura */
@media (max-width: 47.99rem) {
    .plano:not(.plano--destaque) { display: flex; flex-direction: column; }
    .plano:not(.plano--destaque) .plano__tag { align-self: flex-start; }
}


/* -------------------------------------- SEM PEGADINHA, EM QUATRO BLOCOS
   "Continua ruim; tem que ter uma estratégia para não pegar esse espaço, nem
   que retire" (Victor, 19/09/2026). No desktop o bloco vive ao lado dos vídeos
   do Landim e do Neto e o texto longo cabe; no celular ele virava uma coluna
   de 585px de parágrafos.

   A estratégia: no celular a garantia é a PROMESSA, não a explicação. Ficam o
   ícone e o título de cada uma — "Quem responde é gente", "A loja não fica no
   computador", "Abre e usa, como o WhatsApp Web", "Começar não custa nada" —
   em quatro blocos 2x2, que se leem numa passada de olho. O texto explicativo
   sai da vista (continua no HTML e no leitor de tela) porque o FAQ, logo
   abaixo, responde as mesmas quatro coisas: suporte humano, instalação,
   segurança dos dados e cartão. A ressalva da maquininha fica, em uma frase
   curta: é a informação que evita cliente frustrado. */
@media (max-width: 47.99rem) {
    .garantias { padding: var(--sp-4); gap: var(--sp-3); }
    .garantias__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-2);
    }
    .garantia,
    .garantia:first-child {
        display: grid; grid-template-columns: 1fr;
        align-content: start; gap: var(--sp-2);
        padding: var(--sp-3);
        background: var(--nevoa);
        border-radius: var(--r-sm);
    }
    .garantia + .garantia { border-top: 0; }
    .cena { width: 2rem; height: 2rem; }
    .cena svg { width: 1.375rem; height: 1.375rem; }
    /* só o título: o texto que vem depois do <b> some sem sair do HTML */
    .garantia__texto { font-size: 0; line-height: 0; }
    .garantia__texto b {
        display: block; margin: 0;
        font-size: 0.875rem; line-height: 1.3; font-weight: 700;
        color: var(--tinta);
    }
    .garantias__nota {
        margin-top: 0;
        padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-3);
        font-size: 0.75rem; line-height: 1.5;
    }
}


/* ------------------------------------------ A LOJISTA DA HERO, À VISTA
   "No monitor e no notebook é visível a foto daquela mulher de fundo; no
   mobile não" — e depois: "o conteúdo ficou muito embaixo; ajuste a imagem ao
   que já existia" (Victor, 19/09/2026).

   Por que sumia: a foto é horizontal (1600x668); cobrindo uma hero de celular
   em pé, sobrava uma fatia de ~15% da largura — ombro e braço, sem rosto — sob
   um véu de 72% a 92%.

   A primeira tentativa deu à foto uma faixa própria no topo e empurrou o texto
   para baixo. Errado: o texto estava bem onde estava. Agora a foto se encaixa
   no espaço que o layout JÁ deixa livre: o título em quatro linhas de cartaz
   ocupa ~65% da largura a partir de "INTEIRA", e o terço direito ao lado dele
   fica vago. A lojista entra ali — rosto na altura de "INTEIRA / EM UMA",
   tablet na altura de "TELA SÓ" —, num recorte enquadrado nela (ampliado com
   Real-ESRGAN) com máscara oval que dissolve as bordas no azul-noite. Nada do
   texto se move. */
@media (max-width: 47.99rem) {
    .hero__foto {
        inset: auto; left: 36%; top: calc(var(--nav-h) + 4.75rem);
        width: 78%; height: auto; aspect-ratio: 1170 / 1086;
        object-fit: cover; object-position: 50% 0;
        /* elipse que chega a zero EXATAMENTE nas quatro bordas: o raio é
           metade da caixa e o centro é o meio dela — a borda de cima deixava
           uma linha reta dura atrás de "SUA LOJA" */
        -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 34%, transparent 100%);
        mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 34%, transparent 100%);
        opacity: 0.9;
    }
    /* véu só da esquerda para a direita: escurece o que fica sob o título e
       deixa o rosto aberto */
    .hero__veu {
        background: linear-gradient(90deg,
            rgba(6, 18, 31, 0.62) 0%,
            rgba(6, 18, 31, 0.30) 48%,
            rgba(6, 18, 31, 0) 72%);
    }
}


/* --------------------------------------- "CONTINUE POR AQUI": TÍTULO E LINHA
   Print do Victor (20/09/2026): "Controle de estoqueA baixa automática". O
   cartão era `display: block` com `<strong>` e `<span>` dentro — dois
   elementos EM LINHA, que se emendam sem espaço nenhum. O mesmo markup já
   aparecia certo no `.card-grid`, que é grade com `gap`; aqui faltou. Agora os
   dois viram linhas separadas, com a hierarquia do cartão: nome em corpo de
   texto, descrição menor e em cinza. */
.related-grid a {
    display: grid; gap: 0.35rem; align-content: start;
}
.related-grid strong { font-size: var(--t-md); line-height: 1.3; }
.related-grid span { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5; }

/* ================================================================== 35
   SEM ZOOM NO CELULAR — pedido do Victor (20/09/2026)

   `pan-x pan-y` diz ao navegador: rolagem sim, pinça e toque duplo não.
   É o único caminho que funciona no iPhone, porque o Safari ignora o
   `user-scalable=no` da meta viewport desde o iOS 10. A meta continua lá
   (resolve no Android) e o `efeitos.js` cobre o Safari antigo pelos
   eventos `gesture*`.

   Vale só no ponteiro grosso: no desktop o zoom do navegador continua
   inteiro, e quem usa lupa do sistema operacional não é afetado — o
   `touch-action` só governa o toque na tela.
   ================================================================== */
@media (pointer: coarse) {
    html { touch-action: pan-x pan-y; }
}


/* ------------------------------------- ALVO DE TOQUE SEM MEXER NO DESENHO
   Medido em 21/09/2026, em aparelho de toque: o logotipo do cabeçalho (66×24),
   o selo "Novo" do hero (99×37), a assinatura da VisionX no rodapé (276×35) e
   os links do menu de desktop (38px de altura) ficavam abaixo dos 44px de alvo
   de toque exigidos pela doutrina.

   Aumentar a altura deles moveria o desenho que já foi ajustado à mão — o
   rodapé compacto do celular, inclusive, é decisão registrada (o `min-height:0`
   da linha ~2602 existe de propósito). Então a área clicável cresce POR FORA,
   com um ::after posicionado que não ocupa espaço no fluxo: nenhum pixel
   visível muda de lugar, e o dedo passa a ter os 44px.

   Só em `pointer: coarse` — no mouse não há o que corrigir, e assim não há
   risco de a área invisível roubar clique de vizinho no desktop. */
@media (pointer: coarse) {
    .nav__logo,
    .nav__link,
    .hero__selo,
    .rodape__visionx { position: relative; }

    .nav__logo::after,
    .nav__link::after,
    .hero__selo::after,
    .rodape__visionx::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 100%;
        min-height: 44px;
    }
}


/* ---------------------------------------------- FORMULÁRIO "FALE AGORA"
   Não manda e-mail: monta a mensagem e abre o WhatsApp, que é o canal onde
   eles de fato respondem. Sem servidor, sem chave, sem caixa de spam — e o
   lead cai onde alguém lê. Três campos, dois deles lado a lado no celular:
   campo curto sozinho numa linha de 100% é o que faz formulário cansar. */
.fala { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-5); }

.fala__par {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

.fala__campo { display: grid; gap: var(--sp-1); min-width: 0; }
.fala__campo > span {
    font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--tinta-3);
}
.fala__campo > span i { font-style: normal; opacity: 0.7; letter-spacing: 0; text-transform: none; }

.fala__campo input,
.fala__campo select,
.fala__campo textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-sm);
    background: var(--branco);
    color: var(--tinta);
    font-family: inherit;
    font-size: max(1rem, var(--t-md));   /* 16px: o iOS não dá zoom no foco */
    line-height: 1.4;
}
.fala__campo textarea { resize: vertical; min-height: 4.5rem; }
.fala__campo input::placeholder,
.fala__campo textarea::placeholder { color: var(--tinta-3); }

.fala__campo input:focus-visible,
.fala__campo select:focus-visible,
.fala__campo textarea:focus-visible {
    outline: 3px solid var(--acento); outline-offset: 2px; border-color: var(--azul);
}

/* Campo que o navegador recusou: contorno, não texto novo — a mensagem já
   está no `data-fala-nota`, e duplicar aviso é o que deixa cansativo. */
.fala__campo [aria-invalid="true"] { border-color: var(--erro, #B42318); }

.fala__enviar { gap: var(--sp-2); justify-self: start; }
@media (max-width: 30rem) { .fala__enviar { justify-self: stretch; } }
.fala__enviar svg { flex: none; }

.fala__nota { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); }
.fala__nota[data-erro] { color: var(--erro, #B42318); font-weight: 600; }

/* ==========================================================================
   HERO NO PADRÃO DA STONE (25/09/2026)
   Pedido do Victor: "mude a hero pela da stone" (stone.com.br/?hsd=a). É o clone
   da estrutura medida lá, com o nosso conteúdo:
   - vídeo de cortes em tela cheia, escurecido por filter: brightness(.3), e 87vh
     de altura (a seção seguinte aparece embaixo, como lá);
   - tudo no centro: título em duas linhas no display, 120/108px no computador e
     80/72px no celular, a 1ª linha na cor da marca; apoio 20/26px (16/20,8 no
     celular) a 70% de branco; um botão de 56px de altura, raio 20px, 24px de
     respiro, rótulo 14px — azul com texto branco (regra de 25/09);
   - seta de rolar que pulsa, entrada de 1s em sequência e, ao rolar, o bloco
     encolhe e some (animation-timeline: view(), onde houver).
   O vídeo é nosso (tools/hero-ritmo.py); o da Stone tem gente deles.
   ========================================================================== */
.hero.hero--video {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 87svh;
    /* o bloco fica um pouco acima do meio, como lá (centro a 379px numa hero de 783px) */
    padding: calc(var(--nav-h) + 0.5rem) var(--gutter) 6.5rem;
    text-align: center;
    background: var(--noite);
}
.hero--video .hero__poster,
.hero--video .hero__video {
    position: absolute; inset: 0; z-index: -1;
    width: 100%; height: 100%;
    filter: brightness(0.3);
}
.hero--video .hero__poster img { width: 100%; height: 100%; object-fit: cover; }
.hero--video .hero__video { object-fit: cover; }
.hero--video .hero__centro {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; max-width: 60rem;
}
.hero--video .hero__titulo {
    margin: 0 0 0.5rem;
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(5rem, 4.071rem + 3.81vw, 7.5rem);
    line-height: 0.9; letter-spacing: -0.0036em;
    color: var(--branco);
}
.hero--video .hero__titulo span { display: block; text-wrap: balance; }
.hero--video .hero__marca { color: var(--acento); }
.hero--video .hero__texto {
    margin: 0 0 1.5rem; max-width: 52rem;
    font-size: clamp(1rem, 0.907rem + 0.381vw, 1.25rem); line-height: 1.3;
    color: rgba(255, 255, 255, 0.7);
    text-wrap: balance;
}
.hero--video .hero__cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 56px; padding: 0 24px; border-radius: 20px;
    font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--branco);
    text-decoration: none; text-shadow: 0 1px 0 rgba(3, 10, 18, 0.25);
    background-color: #1570C3;
    background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 60%),
                      linear-gradient(180deg, #1A7FD2 0%, #1570C3 50%, #0D63B0 100%);
    background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 28px -14px rgba(3, 10, 18, 0.8);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.hero--video .hero__cta:active { transform: scale(0.98); }
.hero--video .hero__cta:focus-visible { outline: 3px solid var(--branco); outline-offset: 3px; }
.hero--video .hero__descer {
    position: absolute; left: 50%; bottom: 1.25rem; translate: -50% 0;
    display: grid; place-items: center; width: 44px; height: 44px;
    color: rgba(255, 255, 255, 0.6);
}
.hero--video .hero__descer:focus-visible { outline: 2px solid var(--branco); border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
    .hero--video .hero__cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 18px 32px -14px rgba(3, 10, 18, 0.9); }
    .hero--video .hero__descer:hover { color: var(--branco); }
}
/* celular: como lá, a hero é a tela inteira, o bloco centrado abaixo do menu e o
   botão ocupa a linha */
@media (max-width: 47.99rem) {
    .hero.hero--video { min-height: 100svh; padding: calc(var(--nav-h) + 0.75rem) var(--gutter) 4.5rem; }
    .hero--video .hero__cta { width: 100%; }
}

/* movimento: entrada de 1s em sequência, luz no botão, seta que pulsa e o bloco
   que encolhe e some ao rolar. Com "menos movimento": nada disso, e o vídeo para
   no primeiro quadro (o pôster). */
@media (prefers-reduced-motion: no-preference) {
    .hero--video .hero__centro > * { animation: hero-entra 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .hero--video .hero__centro > :nth-child(2) { animation-delay: 0.12s; }
    .hero--video .hero__centro > :nth-child(3) { animation-delay: 0.24s; }
    .hero--video .hero__cta { animation: hero-entra 1s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both, hero-luz 5s ease-in-out 1.6s infinite; }
    .hero--video .hero__descer svg { animation: hero-descer 2s ease-in-out infinite; }
    @supports (animation-timeline: view()) {
        .hero--video .hero__centro {
            animation: hero-sai linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
        }
    }
}
@keyframes hero-entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hero-luz { 0% { background-position: 130% 0, 0 0; } 32%, 100% { background-position: -30% 0, 0 0; } }
@keyframes hero-descer { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(6px); opacity: 1; } }
@keyframes hero-sai { to { opacity: 0; transform: scale(0.9); } }
@media (prefers-reduced-motion: reduce) {
    .hero--video .hero__video { display: none; }
}

/* ==========================================================================
   PRÉVIA DOS RECURSOS (26/09/2026)
   Cada pílula da esteira abre esta janela com o que o recurso faz: ícone 3D grande,
   nome, o que resolve, três pontos, o plano quando importa, "Testar grátis" e o link
   para a página do recurso. No computador é um cartão no centro; no celular sobe de
   baixo. As setas passam para o recurso ao lado. Esc, o X e o clique fora fecham.
   ========================================================================== */
html:has(.previa[open]) { overflow: hidden; }
.previa {
    width: min(30rem, calc(100% - 2rem)); max-width: none; max-height: min(92vh, 46rem);
    margin: auto; padding: 0; border: 0; background: transparent; color: var(--tinta); overflow: visible;
}
.previa::backdrop { background: rgba(3, 10, 18, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s ease; }
.previa.is-aberta::backdrop { opacity: 1; }
.previa__caixa {
    position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
    padding: 1.5rem 1.5rem 1.25rem; border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--acento-vapor) 0, var(--branco) 10rem);
    box-shadow: 0 40px 80px -30px rgba(3, 10, 18, 0.6);
    opacity: 0; transform: translateY(16px) scale(0.98);
    transition: opacity 0.22s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.previa.is-aberta .previa__caixa { opacity: 1; transform: none; }
.previa__fechar {
    position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2;
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: 50%; background: var(--branco); color: var(--tinta); cursor: pointer;
    box-shadow: 0 0 0 1px var(--linha);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}
.previa__item { display: grid; justify-items: start; }
.previa__item[hidden] { display: none; }
.previa__item:not([hidden]) { animation: previa-entra 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.previa__icone { width: 7.5rem; height: 7.5rem; margin: -0.25rem 0 0.25rem -0.5rem; }
.previa__item:not([hidden]) .previa__icone { animation: previa-icone 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both; }
.previa__grupo { margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul); }
.previa__titulo {
    margin: 0.25rem 0 0.5rem; padding-right: 2.5rem;
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: calc(1.75rem * var(--display-k)); line-height: 0.92; color: var(--noite);
}
.previa__texto { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.previa__lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.previa__lista li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.5rem; align-items: start; font-size: 0.9375rem; line-height: 1.4; color: var(--tinta); }
.previa__lista svg { justify-self: center; margin-top: 0.15rem; color: var(--azul); }
.previa__plano {
    margin: 1rem 0 0; padding: 0.375rem 0.75rem; border-radius: var(--r-pill);
    background: var(--acento-vapor); color: var(--azul); font-size: var(--t-sm); font-weight: 700;
}
.previa__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; width: 100%; margin-top: 1.25rem; }
.previa__cta {
    display: inline-flex; align-items: center; justify-content: center; flex: 1 1 10rem;
    min-height: 48px; padding: 0 1.5rem; border-radius: var(--r-pill);
    font-weight: 700; text-decoration: none; color: var(--branco); text-shadow: 0 1px 0 rgba(3, 10, 18, 0.25);
    background: linear-gradient(180deg, #1A7FD2 0%, #1570C3 50%, #0D63B0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.previa__mais {
    display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px;
    font-weight: 700; color: var(--azul); text-decoration: none;
}
.previa__mais svg { transition: transform 0.2s ease; }
.previa__nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linha);
}
.previa__passo {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--linha); border-radius: 50%; background: var(--branco); color: var(--tinta); cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.previa__conta { font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.previa__fechar:focus-visible, .previa__passo:focus-visible, .previa__cta:focus-visible, .previa__mais:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.previa__cta:active, .previa__passo:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    .previa__fechar:hover { background: var(--acento-vapor); transform: rotate(90deg); }
    .previa__cta:hover { transform: translateY(-2px); }
    .previa__mais:hover svg { transform: translateX(3px); }
    .previa__passo:hover { border-color: var(--azul); color: var(--azul); }
}
/* celular: a prévia sobe de baixo, na largura toda */
@media (max-width: 47.99rem) {
    .previa { width: 100%; max-height: 92dvh; margin: auto 0 0; }
    .previa__caixa { padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 1.5rem 1.5rem 0 0; transform: translateY(40px); }
    .previa__icone { width: 6rem; height: 6rem; }
}
@keyframes previa-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes previa-icone { from { opacity: 0; transform: scale(0.7) rotate(-10deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .previa__caixa { transform: none; transition: opacity 0.15s linear; }
    .previa__item:not([hidden]), .previa__item:not([hidden]) .previa__icone { animation: none; }
}

/* ---------------------------------------------- PRÉVIA AO PASSAR O MOUSE (26/09/2026)
   Pedido do Victor: "só passar o mouse e abrir", sem clique e sem X. Em aparelho com
   mouse, a pílula sob o ponteiro (ou com foco de teclado) mostra este cartão preso a
   ela, acima quando cabe; tirar o mouse some com ele. Dá para levar o mouse até o
   cartão e clicar nos links. No toque continua a janela de baixo. */
.previa-flutua {
    position: fixed; z-index: 150; top: 0; left: 0;
    width: min(26rem, calc(100vw - 2rem));
    padding: 1rem 1.125rem 1rem;
    background: var(--branco); color: var(--tinta);
    border: 1px solid var(--linha); border-radius: 1.25rem;
    box-shadow: 0 24px 48px -20px rgba(6, 18, 31, 0.4);
    opacity: 0; transform: translateY(6px) scale(0.98); transform-origin: var(--bico-x, 50%) 100%;
    transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.previa-flutua.is-abaixo { transform: translateY(-6px) scale(0.98); transform-origin: var(--bico-x, 50%) 0; }
.previa-flutua.is-visivel { opacity: 1; transform: none; pointer-events: auto; }
.previa-flutua__bico {
    position: absolute; left: var(--bico-x, 50%); bottom: -7px; width: 14px; height: 14px;
    margin-left: -7px; background: var(--branco);
    border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
    transform: rotate(45deg);
}
.previa-flutua.is-abaixo .previa-flutua__bico { bottom: auto; top: -7px; transform: rotate(225deg); }
/* o item copiado da janela, em versão compacta: ícone ao lado do título */
.previa-flutua .previa__item {
    display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: 0.875rem; align-items: center;
    animation: none;
}
.previa-flutua .previa__icone { grid-row: 1 / span 2; width: 4rem; height: 4rem; margin: 0; animation: previa-icone 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.previa-flutua .previa__grupo { grid-column: 2; align-self: end; }
.previa-flutua .previa__titulo { grid-column: 2; align-self: start; margin: 0.125rem 0 0; padding: 0; font-size: calc(1.3rem * var(--display-k)); }
.previa-flutua .previa__texto,
.previa-flutua .previa__lista,
.previa-flutua .previa__plano,
.previa-flutua .previa__acoes { grid-column: 1 / -1; }
.previa-flutua .previa__texto { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.45; }
.previa-flutua .previa__lista { margin-top: 0.625rem; gap: 0.3rem; }
.previa-flutua .previa__lista li { font-size: 0.875rem; }
.previa-flutua .previa__plano { justify-self: start; margin-top: 0.75rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
.previa-flutua .previa__acoes { margin-top: 0.875rem; gap: 0.5rem 1rem; }
.previa-flutua .previa__cta { flex: 0 0 auto; min-height: 40px; padding: 0 1.125rem; font-size: 0.9375rem; }
.previa-flutua .previa__mais { min-height: 40px; font-size: 0.9375rem; }
@media (prefers-reduced-motion: reduce) {
    .previa-flutua, .previa-flutua.is-abaixo { transform: none; transition: opacity 0.12s linear; }
    .previa-flutua .previa__icone { animation: none; }
}

/* ==========================================================================
   O ENCONTRO DA VITRINE COM O "A LOJA NA SUA MÃO" (26/09/2026)
   O Victor apontou: "o encontro dessas duas seções não está legal". Eram duas
   fotografias em sangria coladas: o pé dos seis painéis (pernas, cortadas numa
   linha reta) batia direto no alto da foto do celular, que é a parte mais clara
   dela (véu de só 34% no topo). Três saídas pesadas: (a) dissolver as duas no
   azul-noite, (b) virar a foto do celular um cartão com margem, (c) uma faixa
   nova entre as duas. Ficou a (a): mantém as duas peças como são e faz a
   passagem pelo azul-noite, como o hero faz com a seção de baixo; a (b) quebrava
   a sangria que dá fôlego à página e a (c) acrescentava conteúdo.
   ========================================================================== */
/* o pé da vitrine afunda no azul-noite só na fileira única de 6 (≥72rem): no
   tablet a vitrine tem 2 fileiras e o véu apagava o "Ver o sistema" da de baixo;
   no celular cada painel já termina no azul */
@media (min-width: 72rem) {
    #para-quem .vitrine { position: relative; }
    #para-quem .vitrine::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
        height: clamp(6rem, 12vw, 9rem); pointer-events: none;
        background: linear-gradient(180deg, rgba(6, 18, 31, 0) 0%, rgba(6, 18, 31, 0.7) 55%, var(--noite) 100%);
    }
}
/* e a foto do celular nasce dele: o alto dela começa no mesmo azul e abre devagar */
#para-quem + .momento::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1;
    height: 48%; pointer-events: none;
    background: linear-gradient(180deg, var(--noite) 0%, rgba(6, 18, 31, 0.78) 30%, rgba(6, 18, 31, 0.3) 70%, rgba(6, 18, 31, 0) 100%);
}
/* e o pé dela também termina inteiro no azul, para o mapa começar sem linha */
#para-quem + .momento::after {
    background: linear-gradient(0deg, var(--noite) 0%, rgba(6, 18, 31, 0.9) 14%, rgba(6, 18, 31, 0.5) 55%, rgba(6, 18, 31, 0.34) 100%);
}

/* ---------------------------------------------- CTA FINAL: a frase maior (26/09/2026)
   Pedido do Victor: aumentar só "Comece hoje. Sem cartão." Sai do tamanho de título
   de seção (80px a 1440) para o degrau do hero (130px a 1440, 68px a 390); cada
   frase continua numa linha. */
.cta-final .display--secao {
    font-size: calc(var(--t-3xl) * var(--display-k));
    line-height: 0.86;
    margin-bottom: var(--sp-5);
}

/* ======================================================= "VEJA TAMBÉM"
   Links contextuais para as páginas que o Google ainda não indexou (plano em
   tools/interlinks.py). Lista de links em 2 colunas, igual à composição do
   "Continue por aqui": no celular continua lado a lado, sem rolagem lateral. */
.page-mais { margin-top: var(--sp-7); }
.page-mais h2 {
    font-family: var(--display); font-weight: 800;
    font-size: calc(var(--t-lg) * var(--display-k)); margin: 0 0 var(--sp-4);
}
.mais-lista {
    display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem) { .mais-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mais-lista a {
    display: flex; align-items: center; height: 100%; min-height: 2.75rem;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--linha); border-radius: var(--r-md);
    color: inherit; text-decoration: none; font-size: var(--t-sm); line-height: 1.35;
    overflow-wrap: anywhere;
    transition: border-color 0.2s linear, transform 0.2s var(--mola);
}
.mais-lista a:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
    .mais-lista a:hover { border-color: var(--azul); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    .mais-lista a { transition: none; }
}