/* ============================================================
   REFERÊNCIA — Hill & Associates (Seções 1–3)
   Portado de referencia/site/styles.css.
   Todas as classes e variáveis receberam o prefixo "ref-" para
   não colidirem com o CSS da ElevaSign (.hero, .is-active,
   --ink, --white já existem neste arquivo).
   ============================================================ */
/* ============================================================
   Hill & Associates — Law Firm Corporate Template (Red Theme)
   Sections 1–3. Values transcribed 1:1 from the Figma file.
   Design canvas: 1920 x 4423. The stage is scaled to the
   viewport by script.js, so the layout stays pixel-exact.
   ============================================================ */

:root {
    /* Paleta remapeada para as cores predominantes da ElevaSign.
     Os papeis do template original foram mantidos; so o matiz mudou
     de vermelho para o roxo/lilas da marca. */
    --ref-red-500: #5932c1;
    /* primario  — era rgb(230, 57, 70)  | --purple */
    --ref-red-600: #8967db;
    /* destaque  — era rgb(234, 30, 48)  | --lilac */
    --ref-red-700: #5932c1;
    /* botao/painel — era rgb(186, 24, 27) | --purple */
    --ref-red-800: #40208a;
    /* hover     — era rgb(164, 22, 26) */
    --ref-red-900: #27115f;
    /* profundo  — era rgb(102, 7, 8)   | --purple-dark */
    --ref-ink: #151327;
    /* titulos   — era rgb(69, 72, 74)  | --ink */
    --ref-white: #fff;
    --ref-off-white: #f5f3fb;
    /* painel claro — era rgb(245, 243, 244) | --soft */
    --ref-mauve: #b1a7ce;
    /* bloco + labels — era rgb(177, 167, 166) */
    --ref-grey-strip: #ddd6ec;
    /* faixa da equipe — era rgb(211, 211, 211) */

    --ref-font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ref-font-ui: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Global rules of the original template, scoped to the stage so the
   rest of the ElevaSign page is untouched. */
.ref-stage-viewport,
.ref-stage-viewport * {
    box-sizing: border-box;
}

.ref-stage-viewport {
    margin: 0;
    padding: 0;
    background: var(--ref-white);
    font-family: var(--ref-font-display);
    -webkit-font-smoothing: antialiased;
}

/* :where() zera a especificidade do escopo, para estas regras continuarem
   valendo 0,0,1 como o "a { }" solto do template original — senao elas
   venceriam a cor propria dos links do bloco (.ref-ai__btn,
   .ref-practice__link) e sobrescreveriam o texto deles. */
:where(.ref-stage-viewport) a {
    color: var(--ref-red-500);
    text-decoration: none;
}

:where(.ref-stage-viewport) a:hover {
    color: var(--ref-red-800);
}

/* ---------- scaled fixed canvas ---------- */
.ref-stage-viewport {
    width: 100%;
    background: var(--ref-white);
    /* nos dois eixos: com "overflow-x" sozinho o overflow-y vira "auto" e
     aparece uma barra de rolagem interna que rouba ~15px da largura. */
    overflow: hidden;
}

.ref-stage {
    /* sobrescrito pelo script; 0 = comportamento do design original */
    --ref-bleed: 0px;
    position: relative;
    width: 1920px;
    height: 4090px;
    /* visivel de proposito: os fundos avancam alem do canvas para encostar
     nas bordas da tela. Quem recorta e o .ref-stage-viewport. */
    overflow: visible;
    transform-origin: 0 0;
    background: transparent;
}

/* ============================================================
   BACKDROPS
   ============================================================ */
.ref-bg-white-band {
    position: absolute;
    top: 80px;
    left: calc(-1 * var(--ref-bleed));
    width: calc(1920px + 2 * var(--ref-bleed));
    height: 1000px;
    background: var(--ref-white);
}

.ref-hero-bg {
    position: absolute;
    top: 0;
    left: calc(-1 * var(--ref-bleed));
    width: calc(1920px + 2 * var(--ref-bleed));
    height: 1080px;
    overflow: hidden;
}

.ref-hero-bg__red {
    position: absolute;
    left: calc(960px + var(--ref-bleed));
    top: 248px;
    width: calc(960px + var(--ref-bleed));
    height: 832px;
    border-radius: 437.729px 0 0 0;
    background: linear-gradient(180deg,
            var(--ref-red-600) -61.3%,
            var(--ref-red-500) 25.09%,
            var(--ref-red-900) 100%);
}

.ref-results-bg-dark {
    position: absolute;
    left: 633px;
    top: 1080px;
    width: calc(1287px + var(--ref-bleed));
    height: 1080px;
    border-radius: 0 0 40px 0;
    background: var(--ref-red-900);
}

.ref-results-bg-mauve {
    position: absolute;
    left: calc(-1 * var(--ref-bleed));
    top: 1080px;
    width: calc(960px + var(--ref-bleed));
    height: 1080px;
    border-radius: 0 0 437.729px 40px;
    background: var(--ref-mauve);
}

.ref-practice-bg {
    position: absolute;
    top: 3140px;
    left: calc(-1 * var(--ref-bleed));
    width: calc(1920px + 2 * var(--ref-bleed));
    height: 1283px;
    border-radius: 40px;
    /* mesmo tom profundo do painel de resultados da secao acima
     (era --ref-red-700/#5932c1; o pedido foi igualar as bandas) */
    background: var(--ref-red-900);
}

.ref-practice-bg__waves {
    position: absolute;
    top: 3140px;
    left: calc(-1 * var(--ref-bleed));
    width: calc(1920px + 2 * var(--ref-bleed));
    height: 1283px;
    opacity: 0.6;
    mix-blend-mode: multiply;
    border-radius: 40px;
    background: url("../../referencia/site/assets/waves-red.png") center / cover no-repeat;
}

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.ref-hero {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
}

/* Mesmo padrao do .features__title ("Todos os recursos que a sua empresa
   precisa..."): peso 500 no roxo escuro, com o trecho de abertura em
   <strong> no roxo da marca.

   O corpo precisa de conversao. Aquele titulo renderiza em px reais e o
   clamp dele para no teto de 46px; este vive no palco, escalado por
   1320/1560 = 0.84615 — dai 46 / 0.84615 = 54.36px de design. */
.ref-hero__title {
    position: absolute;
    left: 180px;
    top: 56px;
    width: 1560px;
    margin: 0;
    font-family: "Plus Jakarta Sans", "Space Grotesk", Nunito, sans-serif;
    font-size: 54.36px;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -.02em;
    text-align: center;
    text-wrap: pretty;
    color: var(--purple-dark);
}

.ref-hero__title strong {
    font-weight: 700;
    color: var(--purple);
}

/* ============================================================
   SECTION 2 — RESULTS
   ============================================================ */
.ref-results__ghost {
    position: absolute;
    left: 85px;
    top: 1286px;
    width: 1750px;
    height: 660px;
    opacity: 0.1;
    font-weight: 800;
    font-size: 886.048px;
    line-height: 100%;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
    color: var(--ref-white);
    text-box: trim-both cap alphabetic;
}

.ref-results__over {
    position: absolute;
    left: 180px;
    top: 1386px;
    width: 157px;
    height: 70px;
    font-weight: 800;
    font-size: 64px;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--ref-white);
}

.ref-results__amount {
    position: absolute;
    left: 182px;
    top: 1469px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 20px;
    background: var(--ref-red-600);
}

.ref-results__amount span {
    font-weight: 800;
    font-size: 112px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    color: var(--ref-white);
}

.ref-results__sub {
    position: absolute;
    left: 179px;
    top: 1645px;
    width: 695px;
    height: 62px;
    font-weight: 800;
    font-size: 56px;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--ref-white);
}

.ref-results__grid {
    position: absolute;
    left: 1026px;
    top: 1288px;
    width: 712px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 90px 64px;
}

.ref-stat {
    /* Passou a fluir em vez de posicionar cada peca de forma absoluta: os
     numeros e rotulos da ElevaSign tem larguras diferentes das do
     template, e as coordenadas cravadas nao serviam mais. */
    position: relative;
    width: 281px;
    flex-shrink: 0;
}

.ref-stat__value {
    display: block;
    font-weight: 800;
    font-size: 72px;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--ref-off-white);
}

.ref-stat__cur {
    font-size: 0.72em;
    vertical-align: super;
}

.ref-stat__unit {
    margin-left: 4px;
    font-size: 0.4em;
    font-weight: 600;
}

.ref-stat__label {
    display: block;
    margin-top: 8px;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    color: var(--ref-mauve);
}

/* ============================================================
   SECTION 3 — PRACTICE AREAS
   ============================================================ */
.ref-practice__panel {
    position: absolute;
    left: calc(-1 * var(--ref-bleed));
    top: 2170px;
    width: calc(960px + var(--ref-bleed));
    height: 960px;
    border-radius: 40px 0 0 40px;
    background: var(--ref-off-white);
}

.ref-practice__office {
    position: absolute;
    left: 960px;
    top: 2170px;
    width: calc(960px + var(--ref-bleed));
    height: 960px;
    border-radius: 0 40px 40px 0;
    /* era a foto do escritorio do template; virou superficie lilas para a
     janela da Eleva IA se destacar sobre ela */
    background: linear-gradient(160deg, #ded3f7, #f2edfc);
}

/* meet the team strip */
.ref-team {
    position: absolute;
    left: 181px;
    top: 2045px;
    width: 1539px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.ref-team__title {
    position: relative;
    width: 312px;
    height: 230px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 20px 0 0 20px;
    background: var(--ref-white);
}

.ref-team__title span {
    position: absolute;
    left: 36px;
    top: 54px;
    width: 240px;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.2;
    color: var(--ref-red-800);
}

.ref-team__strip {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 18.971px;
    padding: 32px;
    border-radius: 20px;
    background: var(--ref-grey-strip);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
}

.ref-team__seal {
    display: grid;
    place-items: center;
    width: 148.995px;
    height: 166px;
    flex-shrink: 0;
    padding: 22px;
    border-radius: 10px;
    /* placa branca: os selos vem em cores proprias e precisam de fundo neutro */
    background: var(--ref-white);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ref-team__seal:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 22px rgba(20, 8, 60, 0.14);
}

.ref-team__seal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* eyebrow pill + headings */
.ref-practice__copyblock {
    /* 790 e o maximo antes de encostar na janela do produto (x=1000).
     Com a fonte de titulos o titulo precisa dessa largura para nao quebrar
     em tres linhas e invadir o texto de fundo. */
    position: absolute;
    left: 180px;
    /* 2296 alinhava o topo do texto com o topo da janela do produto, mas o
     bloco e mais baixo que ela (449 contra 593), e ficava puxado para
     cima. 2372 alinha os centros dos dois. */
    top: 2372px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 790px;
}

.ref-practice__pill {
    height: 64px;
    display: inline-flex;
    align-items: center;
    padding-right: 28px;
    border-radius: 100px;
    background: var(--ref-red-600);
    box-shadow: inset 0 0 0 1px rgb(231, 226, 240);
}

.ref-practice__pill span {
    padding-left: 28px;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--ref-white);
    text-transform: uppercase;
}

.ref-practice__heading {
    /* era 26px para afastar da pill "Eleva IA", que saiu do markup */
    margin: 0;
    font-weight: 700;
    /* mesmo tamanho final dos outros titulos de secao (42px na tela):
     este vive no palco, escalado por 0.84615, dai 42 / 0.84615. */
    font-size: 49.64px;
    line-height: 1.04;
    /* lilas do bloco (--ref-red-600, o mesmo valor de --lilac), que ja
       aparece no texto de fundo e na pill: o titulo inteiro vai nele */
    color: var(--ref-red-600);
}

.ref-practice__copy {
    margin: 24px 0 0;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5;
    color: var(--ref-ink);
    text-wrap: pretty;
}

/* inline, nao block: o titulo e curto e fica numa linha so — o bloco
   era quem forcava a quebra em duas. A cor vem do h2: o titulo deixou
   de ser bicolor. */
.ref-practice__heading em {
    display: inline;
    font-style: normal;
    color: inherit;
}

.ref-practice__list {
    display: grid;
    gap: 20px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.ref-practice__list li {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    line-height: 1.4;
    color: var(--ref-ink);
}

.ref-practice__list i {
    flex: 0 0 auto;
    font-size: 30px;
    line-height: 1;
    color: var(--purple);
}

/* Os quatro selos de seguranca, recuperados do markup original
   (.security-badges, removido no historico). So o conteudo veio de la:
   o CSS antigo era para fundo escuro — borda e texto em branco
   translucido — e aqui o fundo e claro, entao a pele e nova, seguindo
   o .ref-ai__card do mesmo palco.

   Sao 2x2, nao os 4 em linha do original: a coluna aqui tem 790px de
   design, e quatro lado a lado dariam 190px cada, estreito demais para
   o titulo e a descricao. */
.ref-practice__badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    margin: 30px 0 0;
}

.ref-practice__badges article {
    padding: 17px 20px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 2px 6px rgba(20, 8, 60, .05), 0 14px 30px rgba(20, 8, 60, .08);
}

.ref-practice__badges strong {
    display: block;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--purple);
}

.ref-practice__badges span {
    display: block;
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.42;
    color: var(--muted);
    text-wrap: pretty;
}

.ref-practice__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    font-size: 24px;
    font-weight: 700;
    color: var(--purple) !important;
}

.ref-practice__link:hover {
    color: #40208a !important;
}

.ref-practice__ghost {
    position: absolute;
    left: 43px;
    top: 2964px;
    width: 1792px;
    height: 127px;
    opacity: 0.3;
    font-weight: 800;
    /* eram 170px: com "Segurança Certificada" o texto media 1724px de
       design, quase a largura da caixa (1792), e encostava nas bordas
       visiveis do palco. 150px o descolam das pontas. */
    font-size: 150px;
    line-height: 100%;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
    color: var(--ref-red-600);
    text-box: trim-both cap alphabetic;
}

.ref-practice__areas-heading {
    position: absolute;
    left: 180px;
    top: 3830px;
    width: 1560px;
    margin: 0;
    font-weight: 700;
    font-size: 64px;
    line-height: 1.1;
    text-align: center;
    color: var(--ref-white);
}

.ref-practice__areas-sub {
    position: absolute;
    left: 180px;
    top: 3922px;
    width: 1560px;
    margin: 0;
    font-weight: 400;
    font-size: 23px;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
}

/* practice-area cards — 5 "stories" das areas de atuacao.
   Geometria do canvas de 1920px: 5 x 296 + 4 x 20 = 1560, a mesma
   mesma largura da coluna de conteudo (1560). Altura 520, compacta. */
.ref-cards {
    position: absolute;
    left: 182px;
    top: 3268px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.ref-story {
    position: relative;
    display: flex;
    flex-direction: column;
    /* so resta o bloco de texto: na base do card */
    justify-content: flex-end;
    width: 296px;
    height: 520px;
    flex-shrink: 0;
    overflow: hidden;
    padding: 20px;
    border-radius: 28px;
    /* sombra ambiente + fio claro: sobre a banda escura (#27115f) o
     pe do card Juridico termina na mesma cor do fundo e derreteria */
    box-shadow:
        0 16px 36px rgba(9, 3, 23, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ref-story:hover {
    transform: translateY(-10px);
    box-shadow:
        0 26px 48px rgba(9, 3, 23, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* capas: combinacoes da paleta, uma tonalidade por area */
.ref-story--juridico {
    background: linear-gradient(165deg, #5932c1, #27115f);
}

.ref-story--rh {
    background: linear-gradient(165deg, #8967db, #5932c1);
}

.ref-story--financeiro {
    background: linear-gradient(165deg, #12d154, #0b7a53);
}

.ref-story--compras {
    background: linear-gradient(165deg, #b661da, #7436e7);
}

.ref-story--saude {
    background: linear-gradient(165deg, #b661da, #27115f);
}

/* ilustracao vertical do nicho: SVG duotone em traco branco, cobre o
   card inteiro (a cena e desenhada na faixa central do viewBox, com
   folga para o anel acima e o texto abaixo). Fica sob o scrim. */
.ref-story__art {
    position: absolute;
    inset: 0;
    background: center / cover no-repeat;
    pointer-events: none;
}

/* Juridico usa FOTO (Justitia, dominio publico/CC0 - Wikimedia Commons):
   a imagem vai em P&B e o roxo entra por este gradiente de overlay,
   fechando o duotone da marca por cima da foto. */
.ref-story--juridico .ref-story__art {
    background-image:
        linear-gradient(165deg, rgba(89, 50, 193, 0.55), rgba(39, 17, 95, 0.8)),
        url("../assets/images/area-juridico.webp");
}

/* RH tambem em foto (aperto de maos, CC0 - Wikimedia Commons),
   mesmo tratamento duotone do card Juridico. */
.ref-story--rh .ref-story__art {
    background-image:
        linear-gradient(165deg, rgba(137, 103, 219, 0.55), rgba(64, 32, 138, 0.8)),
        url("../assets/images/area-rh.webp");
}

/* Financeiro em foto (pilhas de moedas, CC0 - Wikimedia Commons).
   Overlay VERDE, nao roxo: este card sempre foi o acento verde da
   fileira e a foto nao deve apagar essa diferenciacao. */
.ref-story--financeiro .ref-story__art {
    background-image:
        linear-gradient(165deg, rgba(18, 209, 84, 0.5), rgba(11, 122, 83, 0.85)),
        url("../assets/images/area-financeiro.webp");
}

/* Compras em foto (trabalhador de armazem com caixas, dominio
   publico - Wikimedia Commons), duotone rosa->violeta do card. */
.ref-story--compras .ref-story__art {
    background-image:
        linear-gradient(165deg, rgba(182, 97, 218, 0.5), rgba(116, 54, 231, 0.8)),
        url("../assets/images/area-compras.webp");
}

/* Saude em foto (medico examinando com estetoscopio, dominio
   publico - Wikimedia Commons), duotone rosa->roxo-escuro do card. */
.ref-story--saude .ref-story__art {
    background-image:
        linear-gradient(165deg, rgba(182, 97, 218, 0.5), rgba(39, 17, 95, 0.82)),
        url("../assets/images/area-saude.webp");
}

/* scrim de base: assenta o texto como nas capas de stories */
.ref-story::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    background: linear-gradient(to top, rgba(9, 3, 23, 0.5), transparent);
    pointer-events: none;
}

.ref-story__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ref-story__body strong {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    color: var(--ref-white);
}

.ref-story__body small {
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
}

/* ============================================================
   REFERÊNCIA — mockup do produto no hero
   Composicao em coordenadas do canvas de 1920px, como o resto do
   bloco: o palco escala tudo junto. Usa a paleta da ElevaSign.
   ============================================================ */
.ref-mock {
    /* A composicao e desenhada num sistema proprio de 1000x565. O script
     ancora a borda direita na borda da tela (--ref-mock-right) e calcula
     a ampliacao pelo espaco livre ate o titulo (--ref-mock-scale). Os
     valores padrao abaixo valem se o script nao rodar. */
    position: absolute;
    right: var(--ref-mock-right, 180px);
    top: 268px;
    width: 1000px;
    height: 565px;
    transform: scale(var(--ref-mock-scale, 0.95));
    transform-origin: right top;
    font-family: Nunito, Arial, sans-serif;
}

/* fios tracejados entre os cartoes e o notebook */
.ref-mock__wires {
    position: absolute;
    inset: 0;
    width: 1000px;
    height: 565px;
    pointer-events: none;
}

.ref-mock__wires path {
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
}

.ref-mock__wires circle {
    fill: var(--white);
    opacity: 0.85;
}

/* ---------- notebook ---------- */
.ref-mock__laptop {
    position: absolute;
    left: 220px;
    top: 55px;
    width: 470px;
}

.ref-mock__screen {
    width: 470px;
    height: 340px;
    padding: 9px 9px 12px;
    border-radius: 14px 14px 5px 5px;
    background: linear-gradient(160deg, #3a3a44, #17171d 45%);
    box-shadow: 0 26px 50px rgba(20, 8, 60, 0.38);
}

.ref-mock__ui {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: #f7f6fb;
}

.ref-mock__base {
    position: absolute;
    left: -70px;
    top: 340px;
    width: 610px;
    height: 15px;
    border-radius: 3px 3px 8px 8px;
    background: linear-gradient(180deg, #d5d8e2, #a6acbc);
    box-shadow: 0 14px 26px rgba(20, 8, 60, 0.3);
}

.ref-mock__base span {
    position: absolute;
    left: 50%;
    top: 0;
    width: 86px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 0 0 4px 4px;
    background: #7f8698;
}

/* ---------- barra lateral da interface ---------- */
.ref-mock__side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 92px;
    flex-shrink: 0;
    padding: 9px 7px;
    background: var(--white);
    border-right: 1px solid var(--line);
}

.ref-mock__brand {
    margin-bottom: 7px;
    padding-left: 3px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--purple);
}

.ref-mock__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3.5px 5px;
    border-radius: 4px;
    font-size: 7px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.ref-mock__nav i {
    font-size: 8.5px;
}

.ref-mock__nav--on {
    background: var(--soft);
    color: var(--purple);
}

/* ---------- area principal ---------- */
.ref-mock__main {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
}

.ref-mock__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ref-mock__topbar strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
}

.ref-mock__tools {
    display: flex;
    gap: 6px;
    font-size: 9px;
    color: var(--muted);
}

.ref-mock__kpis {
    display: flex;
    gap: 6px;
}

.ref-mock__kpi {
    flex: 1;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
}

.ref-mock__kpi small {
    display: block;
    font-size: 5.5px;
    font-weight: 600;
    color: var(--muted);
}

.ref-mock__kpi b {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
}

.ref-mock__kpi em {
    font-size: 5.5px;
    font-style: normal;
    font-weight: 700;
    color: var(--green);
}

.ref-mock__kpi-down {
    color: var(--pink) !important;
}

.ref-mock__panels {
    display: flex;
    gap: 6px;
    flex: 1;
    min-height: 0;
}

.ref-mock__panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
}

.ref-mock__panel-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 7px;
    font-weight: 800;
    color: var(--ink);
}

.ref-mock__panel-title em {
    font-size: 5px;
    font-style: normal;
    font-weight: 600;
    color: var(--muted);
}

.ref-mock__row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 3.5px 0;
    border-bottom: 1px solid var(--soft2);
}

.ref-mock__row>i {
    display: grid;
    place-items: center;
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--soft);
    font-size: 6.5px;
    color: var(--purple);
}

.ref-mock__row-txt {
    flex: 1;
    min-width: 0;
}

.ref-mock__row-txt b {
    display: block;
    overflow: hidden;
    font-size: 5.5px;
    font-weight: 700;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ref-mock__row-txt small {
    display: block;
    overflow: hidden;
    font-size: 4.5px;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ref-mock__ago {
    font-size: 4.5px;
    color: var(--muted);
    white-space: nowrap;
}

.ref-mock__more {
    padding-top: 5px;
    font-size: 5px;
    font-weight: 700;
    color: var(--purple);
}

.ref-mock__chip {
    padding: 1.5px 4px;
    border-radius: 100px;
    font-size: 4.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ref-mock__chip--ok {
    background: #e4faec;
    color: #0f9b45;
}

.ref-mock__chip--wait {
    background: #fff3df;
    color: #b4700c;
}

.ref-mock__chip--sent {
    background: var(--soft);
    color: var(--purple);
}

.ref-mock__chart {
    width: 100%;
    flex: 1;
    min-height: 0;
}

.ref-mock__grid {
    stroke: var(--line);
    stroke-width: 1;
}

.ref-mock__area {
    fill: rgba(89, 50, 193, 0.1);
}

.ref-mock__line {
    stroke: var(--purple);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ref-mock__pts circle {
    fill: var(--purple);
}

.ref-mock__months {
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
}

.ref-mock__months i {
    font-size: 4.5px;
    font-style: normal;
    color: var(--muted);
}

/* ---------- cartoes flutuantes ---------- */
.ref-mock__step,
.ref-mock__note {
    position: absolute;
    display: flex;
    border-radius: 12px;
    background: var(--white);
    /* sombra um pouco mais firme: com a composicao ampliada os tres
     primeiros cartoes caem sobre o fundo branco do hero, e so a sombra
     os separa dele. */
    box-shadow: 0 2px 6px rgba(20, 8, 60, 0.06), 0 18px 38px rgba(20, 8, 60, 0.2);
}

.ref-mock__step {
    align-items: center;
    gap: 9px;
    padding: 12px;
}

.ref-mock__note {
    align-items: flex-start;
    gap: 9px;
    padding: 13px;
    flex-direction: row;
}

.ref-mock__ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--purple);
    font-size: 16px;
    color: var(--white);
}

.ref-mock__ico--soft {
    background: var(--soft);
    color: var(--purple);
}

.ref-mock__ico--ok {
    background: #e4faec;
    color: #0f9b45;
}

.ref-mock__step-txt b,
.ref-mock__note-txt b {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ink);
}

.ref-mock__step-txt small,
.ref-mock__note-txt small {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    color: var(--muted);
}

.ref-mock__step--1 {
    left: 4px;
    top: 65px;
    width: 182px;
}

.ref-mock__step--2 {
    left: 4px;
    top: 175px;
    width: 182px;
}

.ref-mock__step--3 {
    left: 4px;
    top: 290px;
    width: 182px;
}

/* os dois de baixo empilham titulo, legenda e ilustracao */
.ref-mock__step--4,
.ref-mock__step--5 {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    top: 415px;
}

.ref-mock__step--4 {
    left: 220px;
    width: 180px;
}

.ref-mock__step--5 {
    left: 455px;
    width: 195px;
}

.ref-mock__step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ref-mock__step-head b {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ink);
}

.ref-mock__step-head i {
    font-size: 13px;
    color: var(--green);
}

.ref-mock__step--4>small,
.ref-mock__step--5>small {
    font-size: 9px;
    color: var(--muted);
}

.ref-mock__sign {
    width: 100%;
    height: 34px;
}

.ref-mock__sign path {
    stroke: var(--purple);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ref-mock__track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0 2px;
}

.ref-mock__track::before {
    content: '';
    position: absolute;
    left: 5px;
    right: 7px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--line);
}

.ref-mock__track i {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--green);
}

.ref-mock__track em {
    position: relative;
    margin-left: auto;
    font-size: 13px;
    line-height: 1;
    color: var(--green);
}

.ref-mock__note--a {
    left: 730px;
    top: 70px;
    width: 190px;
}

.ref-mock__note--b {
    left: 730px;
    top: 220px;
    width: 190px;
}

.ref-mock__note--c {
    left: 730px;
    top: 380px;
    width: 190px;
    flex-direction: column;
    gap: 3px;
}

.ref-mock__who {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.ref-mock__who em {
    padding: 2px 6px;
    border-radius: 100px;
    background: var(--soft);
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    color: var(--purple);
}

.ref-mock__note--b .ref-mock__chip {
    align-self: flex-start;
    margin-top: 6px;
    font-size: 8px;
    padding: 3px 7px;
}

.ref-mock__note--c b {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
}

.ref-mock__note--c strong {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--purple);
}

.ref-mock__eff {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    color: var(--muted);
    white-space: nowrap;
}

.ref-mock__eff i {
    font-size: 13px;
    color: var(--green);
}

/* ============================================================
   REFERÊNCIA — painel da Eleva IA, a esquerda do mockup
   Ocupa a coluna livre entre a margem do conteudo (x=180) e a
   borda esquerda do mockup, que o script mantem em x>=788.
   ============================================================ */
.ref-ai {
    /* posicao e largura vem do script; os padroes valem se ele nao rodar */
    position: absolute;
    left: var(--ref-ai-left, 180px);
    top: 290px;
    display: flex;
    flex-direction: column;
    width: var(--ref-ai-width, 590px);
    padding: 24px;
    border-radius: 28px;
    background: var(--soft);
    box-shadow: 0 3px 8px rgba(20, 8, 60, 0.05), 0 26px 56px rgba(20, 8, 60, 0.13);
    font-family: Nunito, Arial, sans-serif;
}

/* item aberto */
.ref-ai__card {
    padding: 24px 26px;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 2px 6px rgba(20, 8, 60, 0.05), 0 14px 30px rgba(20, 8, 60, 0.1);
}

.ref-ai__card h3 {
    margin: 0 0 10px;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--purple);
}

.ref-ai__card p {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--muted);
    text-wrap: pretty;
}

/* itens fechados */
.ref-ai__row {
    padding: 20px 26px;
    font-size: 22px;
    font-weight: 500;
    color: var(--muted);
}

/* chamada */
.ref-ai__btn {
    align-self: flex-start;
    margin: 12px 0 4px 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 20px 34px;
    border-radius: 100px;
    background: var(--purple);
    font-size: 18px;
    font-weight: 700;
    color: var(--white) !important;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ref-ai__btn:hover {
    background: #40208a;
    transform: translateY(-2px);
}

/* ---------- flutuacao dos cartoes ao redor do notebook ----------
   Cada cartao tem duracao e defasagem proprias, para nao subirem e
   descerem em bloco. As defasagens sao negativas de proposito: os
   cartoes ja entram em pontos diferentes do ciclo, sem espera inicial. */
@keyframes ref-mock-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.ref-mock__step,
.ref-mock__note {
    animation: ref-mock-float 6s ease-in-out infinite;
}

.ref-mock__step--1 {
    animation-duration: 5.4s;
    animation-delay: -0.0s;
}

.ref-mock__step--2 {
    animation-duration: 6.2s;
    animation-delay: -1.2s;
}

.ref-mock__step--3 {
    animation-duration: 5.8s;
    animation-delay: -2.4s;
}

.ref-mock__step--4 {
    animation-duration: 6.6s;
    animation-delay: -0.8s;
}

.ref-mock__step--5 {
    animation-duration: 6.0s;
    animation-delay: -2.0s;
}

.ref-mock__note--a {
    animation-duration: 5.6s;
    animation-delay: -1.6s;
}

.ref-mock__note--b {
    animation-duration: 6.4s;
    animation-delay: -0.4s;
}

.ref-mock__note--c {
    animation-duration: 5.9s;
    animation-delay: -2.8s;
}

/* quem pediu menos movimento no sistema nao recebe a flutuacao */
@media (prefers-reduced-motion: reduce) {

    .ref-mock__step,
    .ref-mock__note {
        animation: none;
    }
}

/* janela do produto, no lado direito da secao */
.ref-practice__product {
    /* borda direita em 1740 = fim da coluna de conteudo. Alem disso a
     janela era cortada pela borda da tela em janelas de ~1440px. */
    position: absolute;
    left: 1000px;
    top: 2300px;
    width: 740px;
}

/* o recuo existia para a grade de duas colunas da secao antiga */
.ref-practice__product .ai-product {
    padding-left: 0;
}

/* ancora invisivel: os links do menu apontam para #eleva-ia, e a <section>
   do bloco portado tem altura zero (todo o conteudo dela e absoluto). */
.ref-anchor {
    position: absolute;
    left: 0;
    top: 2170px;
    width: 1px;
    height: 1px;
}

/* ---------- contagem dos numeros da secao de resultados ----------
   O esmaecimento so entra depois que o script marca a secao como pronta:
   sem JS os numeros continuam visiveis normalmente. */
.ref-results.ref-count-ready .ref-num {
    opacity: 0;
    transition: opacity 0.7s ease;
}

.ref-results.ref-count-ready.is-counting .ref-num {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ref-results.ref-count-ready .ref-num {
        opacity: 1;
        transition: none;
    }
}


/* ============================================================
   MENSAGEM AUTOMATICA DO WHATSAPP ("Aceite Digital")
   Componente autonomo: nao depende do hero. A posicao, a escala e
   a elevacao 3D ficam no bloco .wa-float, mais abaixo.
   Fonte: o projeto ja carrega Roboto no Google Fonts (a mesma do
   WhatsApp no Android). "Open Sans" nao esta na folha carregada,
   entao entra so como fallback declarativo.
   ============================================================ */
.wa-msg {
    --teal: #128c7e;
    --ink: #111b21;
    --muted: #667781;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 340px;
    font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.wa-msg__bubble {
    position: relative;
    background: #fff;
    border-radius: 8px 8px 8px 0;
    padding: 8px 10px 6px;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.wa-msg__bubble::after {
    /* cauda da bolha */
    content: "";
    position: absolute;
    left: -7px;
    bottom: 0;
    width: 8px;
    height: 13px;
    background: #fff;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.wa-msg__title {
    margin: 0 0 8px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}

.wa-msg__text {
    margin: 0 0 11px;
    font-size: 14.2px;
    line-height: 1.48;
    color: var(--ink);
    word-break: break-word;
    text-wrap: pretty;
}

.wa-msg__text strong {
    font-weight: 700;
}

.wa-msg__id {
    word-break: break-all;
}

.wa-msg a {
    color: var(--teal);
    text-decoration: underline;
    text-decoration-color: rgba(18, 140, 126, .55);
}

.wa-msg a:hover {
    color: #0e7568;
}

.wa-msg__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.4px;
    line-height: 1.3;
    color: var(--muted);
}

.wa-msg__time {
    flex: 0 0 auto;
    font-size: 11.5px;
}

.wa-msg__actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wa-msg__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
    color: var(--teal);
    font: inherit;
    font-size: 14.5px;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease;
}

.wa-msg__btn:hover {
    background: #f5f6f6;
}

.wa-msg__btn:active {
    background: #eceff1;
}


/* ============================================================
   RESPOSTA DO DESTINATARIO ("Aceitar")
   Balao de saida do WhatsApp, com o trecho citado da mensagem
   original. Componente autonomo, como o .wa-msg.
   ============================================================ */
.wa-reply {
    display: flex;
    justify-content: flex-end;
    /* mesma coluna de 340px do .wa-msg: e isso que alinha a borda
     direita dos dois baloes, como numa conversa real */
    width: 340px;
    font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.wa-reply__bubble {
    position: relative;
    max-width: 300px;
    background: #d9fdd3;
    border-radius: 8px 8px 0 8px;
    padding: 4px 8px 6px 6px;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.wa-reply__bubble::after {
    /* cauda a direita */
    content: "";
    position: absolute;
    right: -7px;
    bottom: 0;
    width: 8px;
    height: 13px;
    background: #d9fdd3;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* bloco citado - display:block para o clamp funcionar */
.wa-reply__quote {
    position: relative;
    margin-bottom: 4px;
    padding: 6px 8px 7px 10px;
    border-radius: 5px;
    background: rgba(4, 20, 4, .055);
    overflow: hidden;
    cursor: pointer;
}

.wa-reply__quote::before {
    /* barra de destaque */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #6a4ff5;
}

.wa-reply__sender {
    display: block;
    font-size: 12.8px;
    font-weight: 700;
    line-height: 1.3;
    color: #6a4ff5;
}

.wa-reply__quote-title {
    display: block;
    margin-top: 2px;
    font-size: 12.6px;
    font-weight: 700;
    line-height: 1.35;
    color: #1f2c19;
}

.wa-reply__quote-body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 2px;
    font-size: 12.6px;
    line-height: 1.38;
    color: #3b4a35;
}

.wa-reply__line {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 0 2px 0 4px;
}

.wa-reply__text {
    flex: 1 1 auto;
    font-size: 14.6px;
    line-height: 1.4;
    color: #111b21;
}

.wa-reply__meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    padding-bottom: 1px;
    color: #667781;
}

.wa-reply__time {
    font-size: 11.5px;
    line-height: 1.3;
}

.wa-reply__meta svg {
    display: block;
}


/* ============================================================
   HERO - elevacao 3D dos baloes sobre o mockup do celular

   Geometria: no fig-hand-phone.webp (1350x1080) a tela do aparelho
   ocupa ~x 390-900 e ~y 200-895. Convertido para o sistema do
   .hero-visual (heroX% = 0.1285*nx - 39.3 / heroY% = 0.0921*ny),
   a tela cai em ~11%-76% na horizontal e ~18%-82% na vertical.

   O aparelho na foto esta deitado a -21graus. Os baloes vem a
   -23, dois graus alem do eixo do aparelho. A profundidade 3D vem
   sobretudo do rotateY(24) com perspective(850) - o lado esquerdo
   da pilha avanca em direcao ao leitor - somado a escala (.60) e
   ao drop-shadow. Para mais profundidade, mexer no rotateY ou nos
   raios da sombra, nao neste angulo.

   A perspectiva vai na transform dos PROPRIOS baloes, nunca em
   .hero-visual: perspectiva no pai reprojetaria .fig-pill e
   .fig-photo-cut, que precisam continuar exatamente no mesmo plano
   (a emenda entre a foto mascarada e o recorte abriria).

   Os baloes tambem NAO podem morar dentro de .fig-pill - a capsula
   tem overflow:hidden e cortaria as pecas na borda.

   Os dois baloes ficam numa pilha unica (.wa-chat), nao em camadas
   .wa-float separadas: o vao entre eles tem de ser px que escalam
   com a transform. Em % da altura do .hero-visual o afastamento
   encolhia mais rapido que os baloes e eles se sobrepunham no
   mobile.
   ============================================================ */
.wa-float {
    position: absolute;
    /* caixa de referencia: com place-items:center o centro da pilha cai
     no centro da caixa - inset: TOPO DIREITA 0 0 */
    inset: 9.5% 18.4% 0 0;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;
    --wa-scale: .60;
}

/* A pilha da conversa. O vao vai aqui, em px na escala nativa do
   componente, para escalar junto com a transform - foi o que resolveu
   a sobreposicao dos baloes no mobile. */
.wa-chat {
    display: flex;
    flex-direction: column;
    /* mesma coluna de 340px dos dois baloes: e isso que alinha a borda
     direita da resposta com a do cartao de cima, como numa conversa */
    width: 340px;
    gap: 10px;
    transform:
        perspective(850px)
        /* elevacao uniforme: empurra o plano inteiro em direcao ao leitor
       (o unico jeito de "levantar" tambem o canto que as rotacoes
       afastam). Vem ANTES das rotacoes para agir no eixo do olhar. */
        translateZ(70px) rotateX(13deg) rotateY(24deg) rotate(-23deg) scale(var(--wa-scale));
    /* A conversa e um conjunto de formas soltas (bolha + cauda + botoes),
     entao a sombra tem de seguir o alpha real: box-shadow desenharia um
     retangulo unico em volta de tudo. Duas camadas - contato curto e
     ambiente longo - com tinta roxa do fundo em vez de preto neutro,
     para assentar sobre a capsula. Uma unica filter na pilha, e nao uma
     por balao: os dois estao na mesma altura, entao a sombra do cartao
     de cima deve mesmo cair sobre a resposta. */
    filter:
        drop-shadow(0 8px 10px rgba(14, 4, 38, .45)) drop-shadow(0 30px 44px rgba(14, 4, 38, .55));
}

/* ---- Ajustes de exibicao: o componente nativo e fiel ao WhatsApp,
   mas aqui ele roda a ~60% do tamanho e inclinado - nesta condicao
   alguns valores precisam de correcao, sempre scoped em .wa-chat
   para nao contaminar o componente base. ---- */

/* separacao bolha/botoes: os 2px nativos viram ~1px na escala e as
   pecas brancas se fundem num bloco unico */
.wa-chat .wa-msg,
.wa-chat .wa-msg__actions {
    gap: 4px;
}

/* Botoes mais densos: com 340px de largura e rotulo minusculo
   centralizado, a metade vazia do botao lia como uma "tira branca
   solta" na composicao inclinada. Menos padding e rotulo maior
   reduzem a area morta. */
.wa-chat .wa-msg__btn {
    padding: 10px 14px;
    font-size: 16px;
}

/* texto um pouco mais denso: encurta a coluna e afasta a resposta
   da barra de digitacao da foto */
.wa-chat .wa-msg__text {
    margin-bottom: 9px;
}

/* Resposta: a ~60% os tamanhos nativos (12.6-14.6px) viram ~7-8px,
   ilegiveis. "Aceitar" e a palavra-chave da cena - sobe para 16/600. */
.wa-chat .wa-reply__sender,
.wa-chat .wa-reply__quote-title {
    font-size: 13.5px;
}

.wa-chat .wa-reply__quote-body {
    font-size: 13.2px;
}

.wa-chat .wa-reply__text {
    font-size: 16px;
    font-weight: 600;
}

.wa-chat .wa-reply__time {
    font-size: 12px;
}

/* tiques azuis de "visualizada": e a visualizacao que firma o aceite,
   entao o estado de leitura faz parte da narrativa */
.wa-chat .wa-reply__meta svg {
    color: #53bdeb;
}

/* resposta deslocada para a direita, transbordando a coluna dos
   baloes de cima - reforca a leitura de "outra voz" na conversa.
   translateX (e nao margin) para nao mexer no layout da pilha; o
   deslocamento segue o eixo local do plano inclinado. O rotate
   positivo desenclina so a resposta uns graus em relacao a pilha
   (-23), como um papel que assentou num angulo proprio. */
.wa-chat .wa-reply {
    /* perspectiva propria: dentro do plano achatado do .wa-chat, uma
     rotacao de filho sem perspective viraria so um achatamento afim.
     O kit 3D local: translateZ aproxima a peca inteira do olho,
     rotateX positivo traz a base a frente e rotateY POSITIVO recua a
     metade direita - o balao fica com a esquerda alta e a direita
     assentando, como um papel pousando pela borda. Pivo no centro:
     com origin na borda direita o rotateY nao teria como mover a
     propria direita (pivo nao sai do lugar). O translateX foi de 24
     para 38px porque o scale(.92) ancorado no centro puxa a borda
     direita ~14px para dentro - os 38 devolvem o deslocamento. */
    transform: translateX(38px) perspective(600px) translateZ(30px) rotateX(6deg) rotateY(8deg) rotate(-1.5deg) scale(.92);
    transform-origin: center center;
}

/* Estica SO o canto superior-direito da bolha da MENSAGEM para cima,
   com os outros tres cantos pregados: mesma homografia corner-pin da
   resposta (ver abaixo). Calculada para a bolha de 340x312 subindo
   o canto 12px: g=-12/324, m11=1+g, m21=-12(1+g)/340, m14=g/340. */
.wa-chat .wa-msg__bubble {
    transform-origin: 0 0;
    transform: matrix3d(0.96296296, -0.03398693, 0, -0.00010893,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1);
}

/* Estica SO o canto inferior-direito da bolha da resposta, com os
   outros tres cantos pregados no lugar: homografia corner-pin via
   matrix3d (o termo -0.000392 na 4a coluna e a componente
   perspectiva que torna isso possivel - transform afim nao move um
   canto sozinho). Calculada para a bolha de 300x120 com o canto
   descendo 16px: g=-16/136, m11=1+g, m14=g/300. Origin 0 0 porque
   a matriz pina os cantos nas coordenadas locais do elemento. */
.wa-chat .wa-reply__bubble {
    transform-origin: 0 0;
    transform: matrix3d(0.88235294, 0, 0, -0.00039216,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1);
}

/* Flutuacao dos baloes: anima a propriedade independente translate,
   NUNCA transform - a bolha da mensagem carrega o matrix3d do
   corner-pin e a resposta o kit 3D local; keyframes de transform
   substituiriam tudo isso. Periodos diferentes e delay negativo
   dessincronizam as duas pecas: flutuam como objetos independentes,
   nao como uma bandeja rigida (o vao entre elas respira). */
@keyframes waBob {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -8px;
    }
}

.wa-chat .wa-msg {
    animation: waBob 5.2s ease-in-out infinite;
}

.wa-chat .wa-reply {
    animation: waBob 4.3s ease-in-out -1.6s infinite;
}

@media (prefers-reduced-motion: reduce) {

    .wa-chat .wa-msg,
    .wa-chat .wa-reply {
        animation: none;
    }
}

/* contorno proprio de cada peca: sobre a foto do aparelho o
   box-shadow original (alpha .13) desaparecia */
.wa-chat .wa-msg__bubble,
.wa-chat .wa-msg__btn,
.wa-chat .wa-reply__bubble {
    box-shadow: 0 1px 2px rgba(11, 20, 26, .22);
}

/* Elementos decorativos: o cursor nao deve virar "clicavel" sobre eles
   (o inert no HTML ja os tira do foco e da arvore de acessibilidade). */
.wa-chat .wa-msg__btn,
.wa-chat .wa-reply__quote {
    cursor: default;
}

@media (max-width: 1080px) {
    .wa-float {
        --wa-scale: .55;
    }
}

@media (max-width: 640px) {

    /* escala menor que a proporcao das outras larguras de proposito:
     no mobile a conversa deve caber com folga dentro da tela do
     aparelho da foto, lendo como um app rodando no celular - nao
     como um cartaz sobreposto a ele */
    .wa-float {
        --wa-scale: .42;
    }

    /* selo ICP no mobile: sobe para o alto da composicao (embaixo ele
     disputava espaco com a resposta, o dedo e o botao do WhatsApp)
     e encolhe mais um degrau. Origin no canto SUPERIOR-direito -
     a ancora de encolhimento acompanha o lado que fixa a posicao. */
    .hero-visual .security-float {
        top: 12%;
        bottom: auto;
        right: -12%;
        scale: .74;
        transform-origin: 100% 0;
    }

    /* No mobile o .hero-visual tem so ~437px de altura e a pilha inteira
     (528px na escala nativa) transbordava 54px por baixo do aparelho.
     Encolher a escala resolveria a geometria mas levaria o corpo do
     texto para ~6px - ilegivel. Some-se entao as duas linhas de
     boilerplate (os links de Termos e Privacidade), que sao as menos
     informativas do balao: a pilha cai para ~422px nativos e volta a
     caber sobre a tela sem perder legibilidade. */
    .wa-chat .wa-msg__text--link {
        display: none;
    }

    /* a bolha da mensagem e mais curta sem os links (~206px): a matriz
     do corner-pin superior-direito precisa de coeficientes proprios,
     senao o canto inferior-direito sairia ~4px do lugar */
    .wa-chat .wa-msg__bubble {
        transform: matrix3d(0.94495413, -0.03335132, 0, -0.00016190,
                0, 1, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1);
    }

    /* a borda direita ja quase encosta no limite do .hero-visual */
    .wa-chat .wa-reply {
        transform: translateX(48px) perspective(600px) translateZ(22px) rotateX(5deg) rotateY(6deg) rotate(-1.5deg) scale(.92);
    }

    /* angulos mais suaves: no tamanho pequeno a inclinacao come
     legibilidade sem devolver profundidade equivalente */
    .wa-chat {
        /* o translateX inicial move a conversa para a esquerda no eixo da
       PAGINA (vem antes das rotacoes). E o unico jeito confiavel aqui:
       no mobile a pilha (340px) e mais larga que a caixa do inset, e
       nesse regime o grid ancora pela esquerda - mexer no inset
       direito nao produz efeito nenhum. */
        transform:
            translateX(-58px) perspective(800px) translateZ(55px) rotateX(10deg) rotateY(18deg) rotate(-20deg) scale(var(--wa-scale));
        filter:
            drop-shadow(0 6px 8px rgba(14, 4, 38, .45)) drop-shadow(0 20px 28px rgba(14, 4, 38, .55));
    }
}
/* ============================================================
   REF-HERO ("Do envio a assinatura, com inteligencia") - MOBILE
   No palco de 1920px escalado a ~23%, o layout desktop virava
   miniatura ilegivel. Aqui a MESMA secao e recomposta em unidades
   do canvas, so que com pecas ~3x maiores: titulo livre do header,
   cartao da Eleva IA em largura cheia e dashboard reapresentado
   como um CELULAR. A UI interna do mock e a
   mesma do desktop, ampliada pelo truque de contra-escala
   (transform scale + width/height compensados).
   ============================================================ */
@media (max-width: 640px) {

  .ref-stage { height: 5410px; }

  .ref-hero,
  .ref-hero-bg { height: 1960px; }

  .ref-bg-white-band { height: 1900px; }

  .ref-hero-bg__red {
    left: calc(760px + var(--ref-bleed));
    top: 900px;
    width: calc(1160px + var(--ref-bleed));
    height: 1060px;
    border-radius: 360px 0 0 0;
  }

  .ref-hero__title {
    left: 180px;
    width: 1560px;
    top: 300px;
    font-size: 112px;
    line-height: 1.02;
    text-align: left;
  }

  /* ---- cartao da Eleva IA: bloco principal, legivel no canvas mobile ---- */
  .ref-ai {
    left: 180px;
    top: 560px;
    width: 1560px;
    padding: 48px;
    border-radius: 48px;
  }
  .ref-ai__card {
    padding: 42px 46px;
    border-radius: 34px;
  }
  .ref-ai__card h3 { font-size: 70px; }
  .ref-ai__card p  { font-size: 50px; line-height: 1.36; }
  /* os tres itens fechados saem: sem eles o cartao cabe na faixa
     da hero (o palco tem altura fixa; crescer para baixo invadiria
     a secao de resultados) */
  .ref-ai__row { display: none; }
  .ref-ai__btn {
    margin: 36px 0 0;
    padding: 34px 58px;
    font-size: 48px;
  }

  /* ---- mock: de notebook a celular ---- */
  .ref-mock {
    left: 600px;
    right: auto;
    top: 1180px;
    width: 720px;
    height: 560px;
    transform: none;
  }
  .ref-mock__wires,
  .ref-mock__base,
  .ref-mock__side,
  .ref-mock__note--a,
  .ref-mock__note--b,
  .ref-mock__note--c,
  .ref-mock__step--1,
  .ref-mock__step--2,
  .ref-mock__step--3,
  .ref-mock__step--5 { display: none; }

  .ref-mock__laptop {
    left: 130px;
    top: 0;
    width: 460px;
  }
  .ref-mock__screen {
    width: 460px;
    height: 740px;
    padding: 16px;
    border-radius: 64px;
    /* moldura de smartphone: aro continuo, sem a base de notebook */
    background: linear-gradient(160deg, #3a3a44, #17171d 45%);
    box-shadow: 0 40px 80px rgba(20, 8, 60, 0.42);
  }
  /* pilula de camera (dynamic island) sobre a tela */
  .ref-mock__screen::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 34px;
    width: 120px;
    height: 34px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #17171d;
    z-index: 2;
  }
  .ref-mock__screen { position: relative; }
  .ref-mock__ui {
    display: block;
    border-radius: 48px;
    /* contra-escala: a UI e desenhada no tamanho do desktop e
       ampliada 2.1x; width/height compensados para o layout
       continuar preenchendo a tela do aparelho */
    transform: scale(2.1);
    transform-origin: 0 0;
    width: calc(100% / 2.1);
    height: calc(100% / 2.1);
  }
  .ref-mock__kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .ref-mock__panels { display: block; }
  /* o painel do grafico fica de fora: numa tela de celular o app
     mostra KPIs + atividade; o corte e coberto pelo aro */
  .ref-mock__panel + .ref-mock__panel { display: none; }

  /* unico cartao flutuante que sobrevive: a assinatura, pousada
     sobre o pe do aparelho (mantem a animacao de flutuacao) */
  .ref-mock__step--4 {
    left: -70px;
    top: 560px;
    transform-origin: 0 0;
    scale: 2;
  }

  .ref-results-bg-dark,
  .ref-results-bg-mauve { top: 1960px; }

  .ref-results__ghost { top: 2166px; }
  .ref-results__over { top: 2266px; }
  .ref-results__amount { top: 2349px; }
  .ref-results__sub { top: 2525px; }
  .ref-results__grid { top: 2168px; }

  .ref-team { top: 2925px; }
  .ref-practice__panel,
  .ref-practice__office { top: 3050px; }
}

/* ============================================================
   ELEVA IA ("Inteligencia que trabalha por voce") - MOBILE
   Mesma recomposicao aplicada a hero da referencia: no palco
   escalado a ~22% o bloco virava miniatura. Aqui a coluna de
   texto cresce ~3x e a janela do produto e reapresentada como um
   CELULAR (aspecto de app movel).

   As coordenadas abaixo ja consideram a hero mobile ampliada; a
   altura final continua lida pelo script direto do CSS.
   ============================================================ */
@media (max-width: 640px) {

  /* painel claro mais alto para caber a composicao ampliada */
  .ref-practice__panel,
  .ref-practice__office { height: 1400px; }

  /* ---- coluna de texto ---- */
  /* left 180 = margem da coluna de conteudo: o script desloca o
     palco para casar esse x com a margem do container. Valores
     menores sangram para fora da area visivel. */
  .ref-practice__copyblock {
    left: 180px;
    top: 3130px;
    width: 940px;
  }
  .ref-practice__pill {
    height: 96px;
    padding-right: 44px;
  }
  .ref-practice__pill span {
    padding-left: 44px;
    font-size: 40px;
  }
  .ref-practice__heading {
    /* era 44px para afastar da pill "Eleva IA", que saiu do markup */
    margin-top: 0;
    /* 92px pediam ~1005px de design e a coluna aqui tem 940: o titulo
       quebrava em duas linhas. 82px o poem numa linha so, com folga. */
    font-size: 82px;
  }
  .ref-practice__copy {
    margin-top: 36px;
    font-size: 46px;
  }
  .ref-practice__list {
    gap: 34px;
    margin-top: 52px;
  }
  .ref-practice__list li {
    gap: 26px;
    font-size: 44px;
  }
  .ref-practice__list i { font-size: 56px; }
  .ref-practice__link {
    margin-top: 52px;
    font-size: 48px;
  }

  /* a marca d'agua "Inteligencia artificial" sai: com a coluna de
     texto ~3x mais alta ela cairia por cima do bloco */
  .ref-practice__ghost { display: none; }

  /* ---- janela do produto vira celular ----
     .ai-product e a moldura (aro escuro) e .ai-window a tela: a
     estrutura de dois elementos ja existia, so muda o papel. */
  .ref-practice__product {
    left: auto;
    right: 90px;
    top: 3130px;
    width: 620px;
  }
  .ref-practice__product .ai-product {
    position: relative;
    width: 620px;
    height: 1180px;
    padding: 22px;
    border-radius: 84px;
    background: linear-gradient(160deg, #3a3a44, #17171d 45%);
    box-shadow: 0 46px 90px rgba(20, 8, 60, 0.42);
  }
  /* a linha vertical decorativa da grade antiga nao cabe aqui */
  .ref-practice__product .ai-product::before { display: none; }
  /* pilula de camera (dynamic island) */
  .ref-practice__product .ai-product::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46px;
    width: 156px;
    height: 44px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #17171d;
    z-index: 2;
  }
  .ref-practice__product .ai-window {
    height: 100%;
    min-height: 0;
    padding: 104px 30px 30px;
    border: none;
    border-radius: 64px;
    background: #fff;
    box-shadow: none;
  }

  /* tipografia interna do app, ~2.6x */
  .ref-practice__product .ai-header { padding: 0 4px 34px; }
  .ref-practice__product .ai-header-title { gap: 24px; }
  .ref-practice__product .ai-header-title strong { font-size: 42px; }
  .ref-practice__product .ai-header-title small  { font-size: 28px; }
  .ref-practice__product .ai-status-dot {
    width: 26px;
    height: 26px;
  }
  /* o rotulo de status nao cabe na largura do aparelho */
  .ref-practice__product .ai-processing { display: none; }

  .ref-practice__product .ai-file {
    gap: 26px;
    padding: 30px;
    border-radius: 30px;
  }
  .ref-practice__product .ai-file i { font-size: 64px; }
  .ref-practice__product .ai-file strong { font-size: 34px; }
  .ref-practice__product .ai-file span   { font-size: 26px; line-height: 1.35; }

  .ref-practice__product .ai-animation,
  .ref-practice__product .ai-animation img {
    min-height: 0;
  }
  .ref-practice__product .ai-animation { border-radius: 40px; }
  .ref-practice__product .ai-animation img { object-position: center; }

  /* ---- tudo abaixo acompanha a hero mobile ampliada ---- */
  .ref-practice-bg,
  .ref-practice-bg__waves { top: 4460px; }
  .ref-cards { top: 4588px; }
  .ref-practice__areas-heading { top: 5150px; }
  .ref-practice__areas-sub { top: 5242px; }
  .ref-stage { height: 5410px; }
}

/* ============================================================
   .features — visual portado da secao KEYNOTE SPEAKERS da
   referencia nexus-landing: cabecalho com titulo grande a
   esquerda e texto curto a direita, grade de quatro colunas
   com cards altos alternando claro e escuro, e uma pilula
   fantasma abaixo. Paleta e tipografia sao nossas.
   ============================================================ */
.features__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
    text-align: center;
}
.features__head .features__title {
    max-width: 24ch;
    margin: 0;
    text-align: center;
}
.features__lead {
    max-width: 62ch;
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
}

/* Fileira unica em esteira infinita, mesma mecanica da faixa de logos:
   a trilha tem duas metades identicas (montadas pelo script) e a
   animacao anda -50%, entao a volta e continua. */
.features__track {
    margin: 44px 0 0;
    padding: 4px 0 10px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.features__docs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    max-width: none;
    margin: 0;
    padding: 0;
    animation: features-marquee 58s linear infinite;
    will-change: transform;
    /* sem isto o flex-shrink comprime a trilha ate a largura da tela e o
       -50% passa a ser calculado sobre a largura errada */
    flex: 0 0 auto;
    width: max-content;
}
/* para ao passar o mouse (desktop) ou ao tocar (celular): sao cards com
   texto para ler, e no toque nao existe hover */
.features__docs:hover,
.features__docs:active { animation-play-state: paused; }

@keyframes features-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .features__docs { animation: none; }
    /* sem o movimento automatico, a rolagem manual toma o lugar */
    .features__track { overflow-x: auto; scrollbar-width: none; }
}

.features__doc {
    display: flex;
    flex-direction: column;
    flex: 0 0 246px;
    min-height: 348px;
    padding: 26px 24px;
    border-radius: 30px;
}
/* o xadrez claro/escuro da referencia */
.features__doc--claro {
    background: var(--soft2);
    color: var(--ink);
}
.features__doc--escuro {
    background: var(--purple-dark);
    color: #fff;
}

.features__doc h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}
.features__doc p {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}
.features__doc--escuro p {
    color: rgba(255, 255, 255, .74);
}

/* as duas duplas de meta descem para o rodape do card, como o cargo
   do palestrante na referencia */
.features__doc dl {
    display: grid;
    gap: 11px;
    margin: auto 0 0;
    padding-top: 20px;
}
.features__doc dt {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.features__doc--escuro dt {
    color: rgba(255, 255, 255, .56);
}
.features__doc dd {
    margin: 4px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
}

.features__nivel {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
}
.features__nivel--baixa { background: #e4faec; color: #0f9b45; }
.features__nivel--media { background: #fff3df; color: #b4700c; }
.features__nivel--alta  { background: #e0d4fb; color: #4a25a6; }
/* no card claro (--soft2, #eeebf7) o lilas do selo quase some: usa branco */
.features__doc--claro .features__nivel--alta { background: #fff; color: var(--purple); }

/* pilula fantasma, como o "And more" da referencia */
.features__more {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 62px;
    margin: 28px auto 0;
    padding: 0 30px;
    border-radius: 100px;
    box-shadow: inset 0 0 0 1px rgba(39, 17, 95, .28);
    font-size: 16px;
    font-weight: 700;
    color: var(--purple-dark);
    white-space: nowrap;
    transition: background-color .2s ease;
}
.features__more:hover { background: rgba(89, 50, 193, .07); color: var(--purple-dark); }
.features__more svg { flex-shrink: 0; }
/* o .features e um bloco: sem isto a pilula nao centraliza */
.features { text-align: center; }
/* so a fileira volta a alinhar a esquerda; o cabecalho fica centralizado */
.features__docs { text-align: left; }

@media (max-width: 700px) {
    .features { padding: 90px 22px 110px; }

    /* cards mais largos: a 226px o texto quebrava em tres palavras por
       linha. Com ~76vw entra um card inteiro mais a borda do seguinte,
       que e o que sinaliza que a fileira continua. */
    .features__doc {
        flex-basis: min(76vw, 290px);
        min-height: 316px;
        padding: 24px 22px;
    }
    .features__doc h3 { font-size: 19px; }
    .features__doc p { font-size: 14px; }
    .features__doc dd { font-size: 13px; }

    /* menos cards visiveis por vez pede um passo mais lento para dar
       tempo de ler cada um */
    .features__docs { animation-duration: 78s; gap: 14px; }
    .features__track {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    }

    .features__more { width: 100%; justify-content: center; }
}