/* ============================================================
   COMPONENTS — NAV, HERO, SEÇÕES, FOOTER, WHATSAPP
   ============================================================ */

/* Desktop: usa o botão padrão do widget CRM (verde flutuante).
   Esconde nosso .wa pra não duplicar. */
.wa { display: none !important; }

/* Mobile/tablet (≤1023px): esconde o FAB do widget e usa nosso .wa-bar
   (barra inferior horizontal) que dispara o popup via classe .CTAPP. */
@media (max-width: 1023px) {
    #p2-widget-fab,
    #p2-widget-fab.p2-widget-fab { display: none !important; }
}

/* ============================================================
   NAV — flutuante / mega-menu
   ============================================================ */
.nav {
    /* Nav no fluxo (rola junto com a página), não mais fixed. 'relative' mantém
       o contexto de posicionamento pros submenus absolutos sem grudar no topo. */
    position: relative;
    z-index: var(--z-nav);
    padding: var(--space-3) var(--pad-x) 0;
    transition: padding var(--t-med) var(--ease);
}

.nav.scrolled {
    padding-top: clamp(6px, 0.7vw, 12px);
}

.nav-inner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(12px, 1.8vw, 28px);
    max-width: var(--container-max);
    margin-inline: auto;
    height: clamp(60.8px, 6.85vw, 107px);
    padding: 0 clamp(7.5px, 0.9vw, 16px) 0 clamp(13.5px, 1.7vw, 28px);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(4, 18, 46, 0.05);
    border-radius: var(--radius-lg);
    box-shadow:
        0 1px 2px rgba(4, 18, 46, 0.03),
        0 10px 26px -16px rgba(4, 18, 46, 0.14);
    transition: box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease);
}

.nav.scrolled .nav-inner {
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 1px 2px rgba(4, 18, 46, 0.04),
        0 16px 38px -18px rgba(4, 18, 46, 0.2);
}

.nav-logo {
    height: clamp(21.8px, 2.26vw, 42px);
    width: auto;
}

/* ---------- Nav links ---------- */
.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(3px, 0.5vw, 10px);
    justify-content: flex-start;
}

.nav-links > a,
.nav-trigger {
    font-family: var(--font-body);
    font-size: clamp(10.5px, 1.04vw, 18px);
    font-weight: 500;
    color: var(--color-heading);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: clamp(6px, 0.65vw, 12px) clamp(7.5px, 1vw, 16px);
    border-radius: var(--radius-sm);
    position: relative;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
    cursor: pointer;
    white-space: nowrap;
}

/* Ponte invisível entre o trigger e o mega-inner.
   Mantém o hover ativo enquanto o mouse atravessa o gap (padding-top do .mega),
   evitando que o mega-menu feche. Mesma altura do padding-top do .mega. */
.nav-trigger::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: clamp(20px, 2vw, 40px);
    pointer-events: auto;
}

.nav-links > a:hover,
.nav-trigger:hover {
    color: var(--color-violet);
    background: rgba(0, 114, 206, 0.07);
}

.nav-trigger .chev {
    width: clamp(9px, 0.95vw, 16px);
    height: clamp(9px, 0.95vw, 16px);
    transition: transform var(--t-med) var(--ease);
}

.nav-item {
    position: static;
}

.nav-item.open .nav-trigger,
.nav-item:hover .nav-trigger {
    color: var(--color-violet);
    background: rgba(0, 114, 206, 0.07);
}

.nav-item.open .nav-trigger .chev {
    transform: rotate(180deg);
}

/* ---------- Mega-menu ---------- */
/* Mega ancorado no .nav-inner (não mais no trigger): respeita os limites
   laterais do nav e nunca estoura. Centralizado horizontalmente no nav,
   logo abaixo do header, com largura limitada pelo container do nav. */
.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: translateY(6px);
    /* Espaço entre o nav e o mega: 2vw com mín/máx (iPad → 4K) */
    padding-top: clamp(20px, 2vw, 40px);
    width: min(clamp(680px, 58vw, 1200px), 100%);
    z-index: var(--z-mega);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

/* Alias mantido pra compat */
.mega.mega-right { left: 0; right: 0; }

/* Mega SEO (com CORE) é maior pra acomodar bloco principal + CORE + imagem
   com folga, mas ainda dentro dos limites do nav. */
.mega:has(.mega-section + .mega-section) {
    width: min(clamp(900px, 75vw, 1280px), 100%);
}

.nav-item:hover .mega,
.nav-item.open .mega,
.nav-item:focus-within .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-inner {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    /* Altura padrão (mega com 1 section): 25% menor que a do SEO */
    min-height: clamp(255px, 19.5vw, 345px);
}

/* Quando o mega tem 2 sections (SEO com CORE), altura proporcional aos links.
   grid-template-rows: 1fr força a row a respeitar o max-height do container,
   impedindo que a imagem da feature estique o grid. */
.mega-inner:has(.mega-section + .mega-section) {
    min-height: clamp(340px, 26vw, 460px);
    max-height: clamp(340px, 26vw, 460px);
    grid-template-rows: 1fr;
}

/* Sections dentro do mega.
   Conteúdo sempre começa do topo, independente da quantidade de itens.
   2+ sections: lado a lado, esticam pra preencher altura (CORE bleed). */
.mega-sections {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    min-width: 0;
}

.mega-sections:has(> .mega-section + .mega-section) {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    align-content: stretch;
}

.mega-section {
    border-radius: var(--radius-md);
    padding: clamp(6px, 0.6vw, 12px);
}

/* CORE sem fundo próprio: o background azul é pintado no .mega-inner abaixo,
   ocupando todo o lado direito (cobrindo também a área da feature). */
.mega-section--core {
    background: transparent;
    border: 0;
    margin: 0;
    padding: clamp(10px, 1vw, 16px);
    border-radius: 0;
}

/* Quando o mega tem CORE: lado esquerdo branco, lado direito com fundo
   neutro do design system (--color-bg-alt) — alinhado com o tom usado
   no resto do site, sem o azul-bebê fora do padrão. */
.mega-inner:has(.mega-section--core) {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.96) 0% 32%,
        var(--color-bg-alt) 32% 100%
    );
}

/* Feature mais à direita: encosta na borda do mega-inner e mantém
   o padrão listrado do placeholder, em cinza neutro do design system. */
.mega-inner:has(.mega-section--core) .mega-feature {
    margin-right: calc(-1 * var(--space-3));
    margin-block: calc(-1 * var(--space-3));
    padding: var(--space-3);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    background: repeating-linear-gradient(
        135deg,
        var(--line) 0 2px,
        transparent 2px 12px
    );
    border: 0;
}

.mega-inner:has(.mega-section--core) .mega-feature::before {
    display: none;
}

/* Quando a feature tem imagem real: img preenche, padrão listrado some, label some.
   Figure (mega-feature) é contida dentro do mega — sem bleed, sem padding. */
.mega-feature.has-image {
    background: transparent !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Cancela bleeds e paddings da regra .mega-inner:has(--core) .mega-feature */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: var(--radius-md, clamp(7.5px, 0.9vw, 16px)) !important;
    overflow: hidden;
    min-height: 0;
    max-height: 100%;
    max-width: 100%;
    min-width: 0;
}

.mega-feature.has-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

.mega-feature.has-image[data-fit="cover"] img {
    object-fit: cover;
    object-position: center center;
}

.mega-feature.has-image .mf-tag {
    display: none;
}

.mega-feature.has-image::before {
    display: none !important;
}

.mega-inner:has(.mega-section--core) .mega-feature .mf-tag {
    justify-self: end;
}

.mega-section-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(6px, 0.6vw, 10px);
    margin-bottom: clamp(8px, 0.8vw, 14px);
    padding-inline: clamp(6px, 0.6vw, 10px);
}

/* Badge "Core" segue padrão das .sector-tags
   (font display, fundo surface, borda line-strong, radius-md) */
.mega-section-eye {
    font-family: var(--font-display);
    font-size: clamp(10px, 0.85vw, 12px);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--color-heading);
    margin: 0;
    background: var(--color-surface);
    border: 1px solid var(--line-strong);
    padding: clamp(3px, 0.35vw, 6px) clamp(8px, 0.8vw, 12px);
    border-radius: var(--radius-md);
}

.mega-section-sub {
    font-size: clamp(11px, 0.95vw, 13px);
    color: var(--color-text-soft);
    margin: 0;
    font-weight: 500;
    white-space: nowrap;
}

.mega-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    align-content: start;
    min-width: 0;
}

/* Quando 2 sections lado a lado, cada coluna interna fica 1fr só
   (mais legível e respira melhor) */
.mega-sections:has(> .mega-section + .mega-section) .mega-col {
    grid-template-columns: 1fr;
}

.mega-link {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: clamp(6.8px, 0.75vw, 14px) clamp(7.5px, 0.8vw, 14px);
    border-radius: var(--radius-sm);
    transition: background var(--t-fast) var(--ease);
}

.mega-link .mi {
    width: clamp(22.5px, 2.4vw, 38px);
    height: clamp(22.5px, 2.4vw, 38px);
    border-radius: clamp(5.3px, 0.6vw, 10px);
    display: grid;
    place-items: center;
    background: var(--grad-soft);
    color: var(--color-violet);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.mega-link .mi svg {
    width: clamp(11.3px, 1.2vw, 19px);
    height: clamp(11.3px, 1.2vw, 19px);
}

.mega-link .mt {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-heading);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.mega-link:hover {
    background: var(--color-bg-alt);
}

.mega-link:hover .mi {
    background: var(--grad);
    color: #fff;
    transform: translateY(-2px);
}

.mega-feature {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: clamp(135px, 16vw, 260px);
    border: 1px solid var(--line);
    display: grid;
    align-items: end;
    background:
        repeating-linear-gradient(135deg, #E6E9F1 0 2px, transparent 2px 12px),
        var(--color-bg-alt);
}

.mega-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-soft);
    opacity: 0.45;
    pointer-events: none;
}

.mega-feature .mf-tag {
    position: relative;
    margin: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--color-navy);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    padding: 5px 9px;
    border-radius: var(--radius-sm);
}

/* ---------- Nav CTA ---------- */
.nav-cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nav-cta .btn {
    padding: clamp(7.5px, 0.76vw, 13px) clamp(15.8px, 1.9vw, 34px);
    font-size: var(--fs-sm);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle .fa {
    font-size: clamp(20px, 2vw, 26px);
    color: var(--color-heading);
    line-height: 1;
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    /* nav agora é estático (no fluxo), então o hero não precisa mais compensar
       a altura de um nav fixo — só uma folga pequena depois do nav. */
    padding-top: clamp(14px, 2.4vw, 36px);
    padding-bottom: var(--space-8);
    overflow: hidden;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(17.3px, 3.6vw, 63px);
    align-items: center;
}

.hero-text {
    display: grid;
    gap: clamp(10px, 1.35vw, 22px);
    align-content: start;
}

.hero-text h1 {
    margin: 0;
}

.hero .lead {
    max-width: 87%;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.hero-meta {
    margin-top: var(--space-3);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.hero-meta .num {
    font-size: clamp(15px, 1.84vw, 32px);
    font-weight: 800;
    color: var(--color-heading);
    letter-spacing: -0.03em;
    line-height: 1;
}

.hero-meta .lbl {
    font-size: clamp(9px, 0.85vw, 15px);
    color: var(--color-text-soft);
    margin-top: 6px;
    max-width: 22ch;
}

/* Moldura/contorno: define o aspect quadrado próprio.
   A imagem dentro fica menor e sem background, deixando as bordas verdes
   (::before/::after) visíveis sem sobrepor a imagem. */
.hero-visual {
    position: relative;
    aspect-ratio: 5 / 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: var(--radius-md);
}

.hero-visual > .hero-ph {
    width: 80%;
    height: 85%;
    max-width: 85%;
    max-height: 94%;
    margin-left: 7.5%;
    margin-top: 5%;
}

.hero-visual > .ph,
.hero-visual > .hero-ph {
    position: relative;
    z-index: 1;
}

.hero-visual > .hero-badge {
    z-index: 3;
}

.hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translate(22px, 22px);
    z-index: 0;
    border-radius: 18px;
    padding: 1.5px;
    background: var(--grad);
    opacity: 0.85;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translate(22px, 22px);
    z-index: 0;
    border-radius: 18px;
    background: var(--grad-soft);
    opacity: 0.5;
    pointer-events: none;
}

/* ================== HOME · cores verdes da bandeira do Brasil ==================
   Aplicado SOMENTE na Home (body[data-screen-label="Home · Próximo Passo"]).
   Outras páginas mantêm a paleta azul original.
   - .hero-badge border-top: linha azul horizontal interna vira verde escuro
   - bordas externas (::before/::after) viram verde nos dois tons
*/
body[data-screen-label^="Home"] .hero-badge {
    border-top: 2px solid var(--color-brasil-green-deep, #006B2E);
}

body[data-screen-label^="Home"] .hero-visual::before {
    background: var(--color-brasil-green, #009C3B);
    transform: translate(14px, 14px);
}

body[data-screen-label^="Home"] .hero-visual::after {
    /* vira borda também, mais escura e mais afastada */
    background: var(--color-brasil-green-deep, #006B2E);
    opacity: 0.9;
    transform: translate(28px, 28px);
    padding: 1.5px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

@media (max-width: 880px) {
    body[data-screen-label^="Home"] .hero-visual::before { transform: translate(8px, 8px); }
    body[data-screen-label^="Home"] .hero-visual::after { transform: translate(18px, 18px); }
}

/* --- OCULTO TEMPORARIAMENTE (linhas verdes do hero da Home) ---
   Preserva regras originais acima. Pra reativar, remover este bloco. */
body[data-screen-label^="Home"] .hero-visual::before,
body[data-screen-label^="Home"] .hero-visual::after {
    display: none !important;
}

.hero-ph {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
    background: transparent;
    display: block;
}

.hero-badge {
    position: absolute;
    left: clamp(-30px, -1.6vw, -16px);
    bottom: clamp(18px, 2.8vw, 44px);
    background: var(--color-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    max-width: clamp(165px, 20vw, 280px);
}

.hero-badge .dot {
    width: clamp(27px, 3vw, 46px);
    height: clamp(27px, 3vw, 46px);
    border-radius: var(--radius-sm);
    background: var(--grad);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
}

.hero-badge .t {
    font-size: var(--fs-xs);
    line-height: 1.35;
}

.hero-badge .t b {
    display: block;
    color: var(--color-heading);
}


/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust {
    padding-block: var(--space-8);
    border-block: 1px solid var(--line);
    background: var(--color-bg-alt);
}

.trust .eyebrow {
    margin-bottom: var(--space-5);
}

.trust-statement {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(9px, 1.6vw, 28px);
    max-width: 1100px;
}

.trust-statement .sct {
    font-size: clamp(11px, 2.48vw, 34px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--color-heading);
    transition: background var(--t-med) var(--ease);
    cursor: default;
}

.trust-statement .sct:hover {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.trust-statement .arr {
    font-style: normal;
    font-size: clamp(7px, 0.92vw, 15px);
    line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transform: translateY(-0.08em);
    opacity: 0.9;
}

.trust-note {
    margin-top: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

.trust-note .ln {
    height: 1px;
    width: clamp(24px, 3vw, 56px);
    background: var(--color-accent);
}


/* ============================================================
   POSITIONING + STATS
   ============================================================ */
.pos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(27px, 6vw, 96px);
    align-items: start;
}

.pos-statement {
    font-size: clamp(9px, 1.44vw, 23px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    margin-top: var(--space-5);
}

.pos-body {
    font-size: var(--fs-base);
    display: grid;
    gap: var(--space-3);
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(15px, 3vw, 48px);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.stat .n {
    font-size: clamp(18.8px, 4.05vw, 58px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--color-heading);
}

.stat .n .grad-text {
    display: inline;
}

.stat .l {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.4;
}


/* ============================================================
   PROBLEMS GRID
   ============================================================ */
.prob-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.prob {
    background: var(--color-surface);
    padding: clamp(16.5px, 2vw, 40px);
    transition: background var(--t-med) var(--ease);
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.prob:hover {
    background: #fff;
}

.prob-ico {
    width: clamp(30px, 3.2vw, 54px);
    height: clamp(30px, 3.2vw, 54px);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--grad-soft);
    color: var(--color-violet);
    transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.prob-ico svg {
    width: clamp(15px, 1.6vw, 26px);
    height: clamp(15px, 1.6vw, 26px);
}

.prob:hover .prob-ico {
    background: var(--grad);
    color: #fff;
    transform: translateY(-3px);
}

.prob h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.28;
    color: var(--color-heading);
}

.prob p {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.5;
}


/* ============================================================
   MÉTODO — tabs
   ============================================================ */
.method-layout {
    display: grid;
    grid-template-columns: clamp(210px, 26vw, 380px) 1fr;
    gap: clamp(21px, 4vw, 72px);
    align-items: start;
}

.method-tabs {
    display: grid;
    gap: var(--space-2);
}

.m-tab {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-4);
    text-align: left;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--line-dark);
    background: rgba(255, 255, 255, 0.03);
    transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
    color: rgba(255, 255, 255, 0.6);
}

.m-tab .mi {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    font-weight: 600;
    opacity: 0.6;
}

.m-tab .mt {
    font-weight: 600;
    font-size: var(--fs-base);
    color: #fff;
    letter-spacing: -0.01em;
}

.m-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.m-tab.active {
    background: var(--grad);
    border-color: transparent;
}

.m-tab.active .mi {
    opacity: 0.85;
}

.method-panel {
    position: relative;
    min-height: clamp(240px, 28vw, 480px);
}

.m-pane {
    display: none;
    animation: fadeUp var(--t-slow) var(--ease);
}

.m-pane.active {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.m-pane .pi {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--color-lilac);
    letter-spacing: 0.04em;
}

.m-pane h3 {
    font-size: var(--fs-2xl);
    color: #fff;
    letter-spacing: -0.025em;
}

.m-pane p {
    color: rgba(255, 255, 255, 0.7);
    max-width: 60ch;
}

.m-list {
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-5);
}

.m-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
}

.m-list li svg {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: var(--color-lilac);
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}


/* ============================================================
   AUTORIDADE — split + grafo
   ============================================================ */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(27px, 6vw, 96px);
    align-items: center;
}

.split-text {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.auth-points {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-4);
}

.auth-point {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
}

.auth-point .ap-i {
    width: clamp(27px, 2.8vw, 48px);
    height: clamp(27px, 2.8vw, 48px);
    border-radius: var(--radius-sm);
    background: var(--grad-soft);
    color: var(--color-violet);
    display: grid;
    place-items: center;
}

.auth-point .ap-i svg {
    width: clamp(13.5px, 1.4vw, 22px);
    height: clamp(13.5px, 1.4vw, 22px);
}

.auth-point h4 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 5px;
}

.auth-point p {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.5;
}

/* Grafo de autoridade */
.graph-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: radial-gradient(125% 120% at 50% 0%, #fff 0%, var(--color-bg-alt) 100%);
    aspect-ratio: 5 / 4;
}

.graph-card svg.graph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.graph-card .gtag {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    z-index: 2;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.04em;
    color: var(--color-navy);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
}

.g-edge {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 1.4;
}

.g-edge.grad {
    stroke: url(#gEdge);
    stroke-width: 2.2;
}

.g-node {
    fill: #fff;
    stroke: var(--color-violet);
    stroke-width: 1.6;
}

.g-hub { fill: url(#gHub); stroke: none; }
.g-sec { fill: var(--color-violet); }

.g-lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    fill: var(--color-heading);
}

.g-orbit {
    fill: none;
    stroke: rgba(0, 114, 206, 0.26);
    stroke-width: 1;
    stroke-dasharray: 2 7;
}

/* Ghost — outros canais de marketing (sem destaque) */
.g-ghost-edge {
    fill: none;
    stroke: rgba(0, 114, 206, 0.28);
    stroke-width: 1.2;
    stroke-dasharray: 3 5;
}

.g-ghost-node {
    fill: rgba(255, 255, 255, 0.7);
    stroke: rgba(0, 114, 206, 0.45);
    stroke-width: 1.2;
}

.g-ghost-sec {
    fill: rgba(0, 114, 206, 0.35);
}

.g-hub-lbl {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    fill: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .graph-card .g-edge {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset 1s var(--ease) var(--gd, 0s);
    }
    .graph-card .g-node,
    .graph-card .g-sec,
    .graph-card .g-lbl,
    .graph-card .g-hub,
    .graph-card .g-hub-lbl,
    .graph-card .g-orbit,
    .graph-card .g-ghost-node,
    .graph-card .g-ghost-sec,
    .graph-card .g-ghost-edge {
        opacity: 0;
        transform: scale(0.5);
        transform-box: fill-box;
        transform-origin: center;
        transition:
            opacity var(--t-slow) var(--ease) var(--gd, 0s),
            transform var(--t-slow) var(--ease) var(--gd, 0s);
    }
    .graph-card.in .g-edge { stroke-dashoffset: 0; }
    .graph-card.in .g-node,
    .graph-card.in .g-sec,
    .graph-card.in .g-lbl,
    .graph-card.in .g-hub,
    .graph-card.in .g-hub-lbl,
    .graph-card.in .g-orbit { opacity: 1; transform: none; }
    .graph-card.in .g-ghost-edge { opacity: 0.55; transform: none; }
    .graph-card.in .g-ghost-node { opacity: 0.75; transform: none; }
    .graph-card.in .g-ghost-sec { opacity: 0.6; transform: none; }
}


/* ============================================================
   RESULTADOS
   ============================================================ */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(27px, 6vw, 88px);
    align-items: center;
}

.res-ph {
    aspect-ratio: 16 / 11;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}

.res-text {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.res-callouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-4);
}

.res-callout .n {
    font-size: clamp(16.5px, 3.15vw, 43px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
}

.res-callout .l {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.6);
}

/* Trend (gráfico ascendente) */
.trend {
    position: relative;
    margin-top: var(--space-4);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-3) var(--space-2);
    background: rgba(255, 255, 255, 0.03);
}

.trend svg {
    width: 100%;
    height: clamp(60px, 8vw, 130px);
    display: block;
    overflow: visible;
}

.trend .t-tag {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(233, 237, 247, 0.55);
}

.trend .t-tag b {
    color: #fff;
    font-weight: 600;
}

.t-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.t-area { fill: url(#gArea); }
.t-line { fill: none; stroke: url(#gLine); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.t-dot { fill: #0A1F55; stroke: var(--color-lilac); stroke-width: 2; }

@media (prefers-reduced-motion: no-preference) {
    .t-line {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset 1.5s var(--ease);
    }
    .t-area, .t-dot {
        opacity: 0;
        transition: opacity 0.8s var(--ease) 0.5s;
    }
    .trend.in .t-line { stroke-dashoffset: 0; }
    .trend.in .t-area, .trend.in .t-dot { opacity: 1; }
}


/* ============================================================
   SERVIÇOS
   ============================================================ */
.serv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.serv {
    background: var(--color-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: clamp(16.5px, 2vw, 40px);
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
    position: relative;
    overflow: hidden;
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.serv::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: var(--grad);
    transition: width var(--t-slow) var(--ease);
}

.serv:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.serv:hover::after {
    width: 100%;
}

.serv-ico {
    width: clamp(31.5px, 3.2vw, 56px);
    height: clamp(31.5px, 3.2vw, 56px);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--grad-soft);
    color: var(--color-violet);
    transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

.serv-ico svg {
    width: clamp(16.5px, 1.7vw, 28px);
    height: clamp(16.5px, 1.7vw, 28px);
}

.serv:hover .serv-ico {
    background: var(--grad);
    color: #fff;
}

.serv h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-heading);
}

.serv p {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.5;
}


/* ============================================================
   EQUIPE
   ============================================================ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(15px, 2.2vw, 36px);
}

.member {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.member-ph {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 0;
}

.member-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.member .name {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-heading);
    letter-spacing: -0.02em;
}

.member .role {
    font-size: var(--fs-xs);
    color: var(--color-accent);
    margin-top: 4px;
    font-weight: 500;
}

.member .bio {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.55;
    margin-top: var(--space-3);
}

/* Variantes para fundo escuro (usado na consultoria) */
.section.on-dark .member .name { color: #fff; }
.section.on-dark .member .role { color: var(--color-lilac); }
.section.on-dark .member .bio { color: rgba(255, 255, 255, 0.62); }


/* ============================================================
   FAQ — usa <details>/<summary>
   ============================================================ */
.faq-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(21px, 5vw, 80px);
    align-items: start;
}

.faq-intro {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-q {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-4);
    text-align: left;
    padding: var(--space-5) 0;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-heading);
    transition: color var(--t-fast);
    list-style: none;
    cursor: pointer;
}

.faq-q::-webkit-details-marker {
    display: none;
}

.faq-q::marker {
    content: "";
}

.faq-q:hover {
    color: var(--color-violet);
}

.faq-ic {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
}

.faq-ic::before,
.faq-ic::after {
    content: "";
    position: absolute;
    background: var(--color-violet);
    border-radius: 2px;
    transition: transform var(--t-med) var(--ease);
}

.faq-ic::before {
    top: 50%;
    left: 3px;
    right: 3px;
    height: 2px;
    transform: translateY(-50%);
}

.faq-ic::after {
    left: 50%;
    top: 3px;
    bottom: 3px;
    width: 2px;
    transform: translateX(-40%);
}

.faq-item[open] .faq-ic::after {
    transform: translateX(-40%) scaleY(0);
}

.faq-a {
    padding-bottom: var(--space-5);
    color: var(--color-text-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
    max-width: 62ch;
}


/* ============================================================
   CTA FINAL
   ============================================================ */
.cta {
    position: relative;
    overflow: hidden;
}

.cta-glow {
    position: absolute;
    width: clamp(390px, 60vw, 880px);
    height: clamp(390px, 60vw, 880px);
    border-radius: 50%;
    background: var(--grad);
    filter: blur(150px);
    opacity: 0.32;
    bottom: clamp(-440px, -30vw, -260px);
    left: 50%;
    transform: translateX(-40%);
    pointer-events: none;
}

.cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: clamp(420px, 60vw, 840px);
    margin-inline: auto;
    display: grid;
    gap: var(--space-4);
    justify-items: center;
}

.cta h2 {
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.cta p {
    max-width: 50ch;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-md);
}

.cta-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}


/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: var(--color-navy-deep);
    color: rgba(255, 255, 255, 0.6);
    padding-block: var(--space-8) var(--space-5);
}

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-6);
    padding-bottom: var(--space-7);
    border-bottom: 1px solid var(--line-dark);
}

.footer-brand .fb-logo {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.footer-brand .fb-logo img {
    height: clamp(27px, 3vw, 48px);
    width: auto;
}

.footer-brand .fb-logo .fb-word {
    font-weight: 800;
    font-size: var(--fs-md);
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 0.95;
}

.footer-brand p {
    font-size: var(--fs-sm);
    max-width: 34ch;
    line-height: 1.6;
}

.footer-meta {
    margin-top: var(--space-4);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.7;
    font-style: normal;
}

.footer-col h5 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: var(--space-4);
    font-weight: 600;
}

.footer-col a {
    display: block;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.72);
    padding: 7px 0;
    transition: color var(--t-fast), transform var(--t-fast);
}

.footer-col a:hover {
    color: #fff;
    transform: translateX(3px);
}

.footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-5);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.4);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 0.8vw, 12px);
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--space-4);
    font-size: clamp(11px, 0.85vw, 13.5px);
    color: rgba(255, 255, 255, 0.55);
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: var(--color-accent-tint, #E5F0FA);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-legal span {
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 720px) {
    .footer-legal {
        justify-content: flex-start;
    }
}

.footer-social {
    display: flex;
    gap: var(--space-2);
}

.footer-social a {
    width: clamp(25.5px, 2.6vw, 42px);
    height: clamp(25.5px, 2.6vw, 42px);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-dark);
    display: grid;
    place-items: center;
    transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.footer-social a:hover {
    background: var(--grad);
    border-color: transparent;
    transform: translateY(-2px);
}

.footer-social svg {
    width: clamp(12px, 1.3vw, 20px);
    height: clamp(12px, 1.3vw, 20px);
}


/* ============================================================
   WHATSAPP — float (desktop) e barra (mobile)
   ============================================================ */
.wa {
    position: fixed;
    right: clamp(12px, 1.6vw, 28px);
    bottom: clamp(12px, 1.6vw, 28px);
    z-index: var(--z-wa);
    width: clamp(36px, 4vw, 60px);
    height: clamp(36px, 4vw, 60px);
    border-radius: 50%;
    background: #1DA851;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 22px rgba(29, 168, 81, 0.32);
    transition: transform var(--t-med) var(--ease);
    transform: translateY(120px);
}

.wa.in {
    transform: none;
}

.wa:hover {
    transform: translateY(-3px) scale(1.05);
}

.wa svg {
    width: clamp(18px, 1.9vw, 32px);
    height: clamp(18px, 1.9vw, 32px);
    color: #fff;
}

.wa .fa {
    font-size: clamp(20px, 2.2vw, 34px);
    color: #fff;
    line-height: 1;
}

/* Barra WhatsApp mobile — escondida no desktop, revelada após primeiro scroll no mobile */
.wa-bar {
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    background: #1DA851;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 22px -10px rgba(29, 168, 81, 0.45);
    opacity: 0;
    transform: translateY(60px);
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.wa-bar.in {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wa-bar .wa-bar-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: grid;
    place-items: center;
    flex: none;
}

.wa-bar svg {
    width: 14px;
    height: 14px;
    color: #fff;
    flex: none;
}

.wa-bar .fa {
    font-size: 15px;
    color: #fff;
    line-height: 1;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Tablets / notebooks pequenos */
@media (max-width: 1023px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--space-7); }
    .hero-visual { max-width: 520px; }
    .hero-ph { aspect-ratio: 16 / 11; }
    .pos-grid { grid-template-columns: 1fr; gap: var(--space-5); }
    .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); }
    .prob-grid { grid-template-columns: repeat(2, 1fr); }
    .method-layout { grid-template-columns: 1fr; gap: var(--space-5); }
    .method-tabs {
        grid-auto-flow: column;
        grid-auto-columns: minmax(200px, 1fr);
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .method-tabs::-webkit-scrollbar { display: none; }
    .split, .results-grid, .faq-layout { grid-template-columns: 1fr; gap: var(--space-5); }
    .serv-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: 1fr; gap: var(--space-7); max-width: 460px; margin-inline: auto; }
    .member { grid-template-columns: clamp(105px, 18vw, 200px) 1fr; gap: var(--space-4); align-items: center; }
    .member-ph { aspect-ratio: 1 / 1; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
    .footer-brand { grid-column: 1 / -1; }
}

/* Nav vira barra inferior em telas pequenas */
@media (max-width: 1023px) {
    .nav {
        top: auto;
        bottom: 0;
        padding: 0 var(--pad-x) calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .nav-inner {
        background: rgba(255, 255, 255, 0.93);
        gap: 10px;
        grid-template-columns: auto 1fr auto;
    }
    .nav-logo { height: 24px; }
    .nav.scrolled .nav-inner { background: rgba(255, 255, 255, 0.96); }
    .nav-links { display: none; }
    .nav-links.open {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        justify-items: stretch;
        align-items: stretch;
        text-align: left;
        position: absolute;
        bottom: calc(100% + 12px);
        left: 0;
        right: 0;
        gap: 2px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(18px);
        padding: var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        /* Fallback pra navegadores sem suporte a dvh */
        max-height: 78vh;
        /* dvh = viewport dinâmico (descontando URL bar). Subtrai nav (~60px) + gap (12) + margem (40) */
        max-height: calc(100dvh - 112px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    .nav-links.open > a,
    .nav-links.open .nav-trigger {
        padding: 13px 14px;
        width: 100%;
        border-radius: var(--radius-sm);
        justify-content: space-between;
        display: flex;
    }
    .nav-item { width: 100%; }
    .mega, .mega.mega-right {
        position: static;
        transform: none;
        left: auto;
        right: auto;
        width: 100%;
        padding-top: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--t-med) var(--ease);
    }
    .nav-item.open .mega { max-height: 3200px; }
    /* Scroll INTERNO fica no .mega-inner (não no .mega) pra não conflitar com a transição. */
    .nav-item.open .mega-inner {
        max-height: 60vh;
        max-height: calc(100dvh - 220px);
        overflow-y: auto;
        /* auto = scroll chaining ativo: ao chegar no fim, passa pro pai (.nav-links) */
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    .mega-inner {
        grid-template-columns: 1fr;
        box-shadow: none;
        border: none;
        padding: 4px 0 8px;
        background: transparent;
        gap: 4px;
    }
    .mega-col { grid-template-columns: 1fr; }
    .mega-feature { min-height: 150px; margin-top: var(--space-2); }

    /* Mobile/tablet: sem mascote (só desktop) */
    .mega-feature,
    .mega-feature.has-image {
        display: none !important;
    }

    /* Mobile/tablet: mega-sections empilhadas em 1 coluna (não 2) */
    .mega-sections {
        grid-template-columns: 1fr !important;
        gap: clamp(6px, 1vw, 12px) !important;
    }

    /* Mobile/tablet: zera o gradient branco/cinza do mega com CORE (não faz sentido sem 2 colunas) */
    .mega-inner,
    .mega-inner:has(.mega-section--core) {
        background: transparent !important;
    }

    /* Mobile: section CORE vira accordion (header clicável → expande links) */
    .mega-section--core .mega-section-head {
        cursor: pointer;
        user-select: none;
        padding: clamp(10px, 1.4vw, 16px) clamp(12px, 1.6vw, 18px);
        background: var(--color-accent-tint, #E5F0FA);
        border-radius: var(--radius-md, clamp(7.5px, 0.9vw, 16px));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: clamp(8px, 1vw, 14px);
        position: relative;
    }
    .mega-section--core .mega-section-head::after {
        content: "";
        width: clamp(7px, 0.8vw, 10px);
        height: clamp(7px, 0.8vw, 10px);
        border-right: 1.5px solid var(--color-navy, #001E62);
        border-bottom: 1.5px solid var(--color-navy, #001E62);
        transform: rotate(45deg) translateY(-2px);
        transition: transform 0.22s ease;
        flex-shrink: 0;
    }
    .mega-section--core.open .mega-section-head::after {
        transform: rotate(-135deg) translateY(2px);
    }
    /* Lista CORE: simplesmente esconde/mostra (sem max-height/transição pra evitar scroll fantasma) */
    .mega-section--core .mega-col {
        display: none;
    }
    .mega-section--core.open .mega-col {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: clamp(6px, 0.8vw, 10px);
        padding-bottom: clamp(4px, 0.6vw, 8px);
        max-height: none;
        overflow: visible;
    }
    .nav-cta {
        gap: 10px;
        justify-content: flex-end;
        margin-left: auto;
    }
    .nav-cta .btn-primary { display: none; }
    .nav-toggle { margin-left: auto; }

    /* Mobile: submenu aberto e hovers do nav em azul (em vez do roxo padrão) */
    .nav-links.open > a:hover,
    .nav-links.open .nav-trigger:hover,
    .nav-links.open .nav-item.open .nav-trigger,
    .nav-links.open .nav-item:hover .nav-trigger {
        color: var(--color-blue);
        background: rgba(0, 114, 206, 0.08);
    }
    .nav-links.open .mega-link:hover {
        background: rgba(0, 114, 206, 0.06);
    }
    .nav-links.open .mega-link:hover .mt {
        color: var(--color-blue);
    }
    .nav-links.open .mega-link:hover .mi {
        color: var(--color-blue);
        background: rgba(0, 114, 206, 0.10);
    }
    .wa-bar {
        display: flex;
        position: fixed;
        left: var(--pad-x);
        right: var(--pad-x);
        z-index: 95;
        /* Posicionada acima do .nav com gap mínimo de 8px */
        bottom: calc(22px + clamp(60.8px, 6.85vw, 107px) + env(safe-area-inset-bottom, 0px));
        padding: 11px 15px;
        border-radius: var(--radius-md);
    }
    .wa { display: none; }
    .nav-toggle { display: flex; }
    .hero { padding-top: clamp(10px, 3vw, 24px); }
    body { padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }

    body:has(.nav-links.open) .wa-bar {
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
    }
}

/* Smartphones */
@media (max-width: 640px) {
    body { font-size: 16px; }
    .m-list { grid-template-columns: 1fr; }
    .prob-grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr 1fr; }
    .serv-grid { grid-template-columns: 1fr; }
    .res-callouts { grid-template-columns: 1fr 1fr; }
    .hero-meta { grid-template-columns: 1fr; gap: var(--space-3); }
    .hero-badge { left: 0; }
    .member { grid-template-columns: 1fr; max-width: 320px; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-bottom { grid-template-columns: 1fr; justify-items: start; }
    .hero-visual::before, .hero-visual::after { transform: translate(14px, 14px); }
}

/* QHD/4K — só permite container respirar mais */
@media (min-width: 2200px) {
    :root {
        --container-max: 1840px;
    }
}


/* ============================================================
   V4 — CORREÇÕES ANTI-CLICHÊ
   1. Gradiente vira cor chapada (accent), preservado só no .cta-glow
   2. Eyebrow em Gantari + traço (não mono + triângulo)
   3. Tiles lavanda removidos → numeral serifado ou ícone navy seco
   4. Headline: contraste tipográfico (.serifx) substitui gradiente
   5. Hero-badge ancorado à base da imagem
   ============================================================ */

/* ---------- HERO: badge ancorado, moldura sólida ---------- */
.hero-visual { display: block; }

.hero-badge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    margin: 0;
    border: none;
    border-top: 2px solid var(--color-accent);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none;
    padding: clamp(9px, 1.1vw, 20px) clamp(12px, 1.5vw, 26px);
    gap: clamp(7.5px, 0.9vw, 16px);
    z-index: 3;
}

.hero-badge .dot {
    width: auto;
    height: auto;
    background: none;
    color: var(--color-accent);
    border-radius: 0;
    font-size: clamp(12px, 1.17vw, 22px);
    font-weight: 700;
    flex: none;
}

.hero-badge .t {
    font-size: clamp(8.3px, 0.77vw, 14px);
}

.hero-badge .t b {
    color: var(--color-heading);
}

/* ---------- PROBLEMAS: numeral serifado ancorado ---------- */
.prob-grid { counter-reset: prob; }

.prob {
    counter-increment: prob;
    padding-top: clamp(16.5px, 2vw, 36px);
}

.prob-ico { display: none; }

.prob::before {
    content: counter(prob, decimal-leading-zero);
    display: block;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(18.8px, 2.34vw, 40px);
    line-height: 1;
    color: var(--color-heading);
    margin-bottom: clamp(9px, 1.2vw, 22px);
    letter-spacing: -0.02em;
}

.prob::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 3px;
    background: var(--color-accent);
    transition: width var(--t-med) var(--ease);
}

.prob:hover::after { width: 100%; }


/* ---------- SERVIÇOS: ícone navy seco (sem tile lavanda) ---------- */
.serv-ico {
    width: auto;
    height: auto;
    background: none !important;
    border-radius: 0;
    color: var(--color-heading) !important;
    margin-bottom: clamp(9px, 1.2vw, 22px);
    transform: none !important;
}

.serv-ico svg {
    width: clamp(16.5px, 1.7vw, 30px);
    height: clamp(16.5px, 1.7vw, 30px);
    stroke-width: 1.6;
}

.serv:hover .serv-ico { color: var(--color-accent) !important; }

.serv::after { background: var(--color-accent); }
.serv:hover { border-color: var(--color-accent); }


/* ---------- AUTORIDADE: numeral serifado em vez de tile lavanda ---------- */
.auth-points { counter-reset: auth; }
.auth-point { counter-increment: auth; }

.auth-point .ap-i {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: var(--color-heading);
}

.auth-point .ap-i svg { display: none; }

.auth-point .ap-i::before {
    content: counter(auth, decimal-leading-zero);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(13.5px, 1.53vw, 27px);
    line-height: 1;
    color: var(--color-accent);
}


/* ---------- MÉTODO TABS: numeral serifado ---------- */
.m-tab .mi {
    font-family: var(--font-serif);
    font-size: clamp(12px, 1.35vw, 23px);
    font-weight: 500;
    opacity: 0.5;
    letter-spacing: -0.02em;
}

.m-tab.active {
    background: var(--color-accent);
    border-color: transparent;
}

.m-tab.active .mi {
    opacity: 0.9;
    color: #fff;
}

.m-pane .pi {
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--fs-eyebrow);
    color: var(--color-lilac-soft);
}


/* ---------- NAV: ícone navy seco no mega + hover accent chapado ---------- */
.mega-link .mi {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: var(--color-heading);
}

.mega-link .mi svg {
    width: clamp(12.8px, 1.4vw, 22px);
    height: clamp(12.8px, 1.4vw, 22px);
}

.mega-link:hover { background: var(--color-bg-alt); }

.mega-link:hover .mi {
    background: none;
    color: var(--color-accent);
    transform: none;
}

.nav-links > a:hover,
.nav-trigger:hover,
.nav-item.open .nav-trigger,
.nav-item:hover .nav-trigger {
    color: var(--color-accent);
    background: var(--color-accent-tint);
}


/* ---------- TRUST: tipografia Gantari (não mono) ---------- */
.trust-note {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.1em;
}

.trust-note .ln { background: var(--color-accent); }

.trust-statement .sct:hover {
    color: var(--color-accent);
    -webkit-text-fill-color: var(--color-accent);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

.trust-statement .arr {
    color: var(--color-accent);
    -webkit-text-fill-color: var(--color-accent);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}


/* ---------- TREND + GTAG: cor accent + tipografia Gantari ---------- */
.trend .t-tag {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.gtag {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.04em;
}


/* ---------- GRAFO DE AUTORIDADE: cor accent chapada ---------- */
.g-hub { fill: var(--color-accent); }
.g-edge.grad { stroke: var(--color-accent); }
.g-node { stroke: var(--color-accent); }
.g-sec { fill: var(--color-accent); }
.g-orbit { stroke: rgba(0, 114, 206, 0.3); }


/* ---------- TRAJETÓRIA: cor accent chapada ---------- */
.t-line { stroke: var(--color-accent); }
.t-area { fill: rgba(0, 114, 206, 0.16); }
.t-dot { stroke: var(--color-lilac-soft); }


/* ---------- FAQ + LINKS em acento ---------- */
.faq-q:hover { color: var(--color-accent); }
.faq-ic::before,
.faq-ic::after { background: var(--color-accent); }

.link-arrow { color: var(--color-accent); }


/* ---------- STATS: peso, não cor ---------- */
.stat .n { color: var(--color-heading); }


/* ---------- ÚNICO momento de gradiente preservado: brilho do CTA ---------- */
.cta-glow { background: var(--grad-moment); }


/* ---------- ::selection ---------- */
::selection {
    background: var(--color-accent);
    color: #fff;
}


/* ============================================================
   FERRAMENTAS (stack que usamos) — marquee edge-to-edge
   ============================================================ */
.section-tools {
    padding-block: var(--space-9) var(--space-8);
    overflow-x: clip;
}

/* Layout 40/60: texto à esquerda, marquee à direita */
.tools-layout {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
}

.tools-layout .section-head { max-width: 100%; }

.tools-marquee {
    overflow: hidden;
    padding-block: var(--space-3);
    /* Fade nas pontas */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.tools-track {
    display: flex;
    gap: var(--space-4);
    width: max-content;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: tools-scroll 60s linear infinite;
    will-change: transform;
}

.tools-track:hover {
    animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
    .tools-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.tool {
    flex: 0 0 clamp(195px, 22vw, 360px);
    background: var(--color-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: clamp(15px, 1.6vw, 32px);
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
    display: grid;
    gap: var(--space-2);
    align-content: start;
    position: relative;
    overflow: hidden;
}

.tool::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: var(--color-accent);
    transition: width var(--t-slow) var(--ease);
}

.tool:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.tool:hover::after {
    width: 100%;
}

.tool h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-heading);
    letter-spacing: -0.01em;
}

.tool p {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1023px) {
    /* Volta pra 1 coluna: header em cima, marquee embaixo edge-to-edge */
    .tools-layout {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        align-items: stretch;
    }
    .tools-layout .tools-marquee {
        /* Edge-to-edge sem causar scroll horizontal:
           expande pros lados pelo valor exato do padding do .container */
        margin-inline: calc(-1 * var(--pad-x));
        width: auto;
        transform: none;
    }
}

@media (max-width: 640px) {
    .tool { flex-basis: clamp(165px, 70vw, 280px); }
    .tools-track { animation-duration: 45s; }
}


/* ============================================================
   QUEM SOMOS — Redesign Claude Design
   2 colunas topo + 2 cards (claro listrado / dark Visão+Missão)
   Cores e radius alinhados ao design system do site
   ============================================================ */
.section-quem {
    padding-block: clamp(48px, 5.5vw, 100px);
}

.quem-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 64px);
    margin-bottom: clamp(28px, 3.5vw, 56px);
}

@media (max-width: 880px) {
    .quem-top { grid-template-columns: 1fr; }
}

.quem-head .h2 {
    margin-block: clamp(8px, 1vw, 16px) 0;
}

.quem-head .h2 em {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-accent);
    font-weight: 500;
}

.quem-intro {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2vw, 32px);
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(8px, 1vw, 18px);
}

.quem-intro p {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.6;
}

/* Botão "Conhecer o método" no padrão do site (radius-md, navy → accent no hover) */
.quem-btn {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 0.8vw, 12px);
    background: var(--color-navy);
    color: #fff;
    padding: clamp(12px, 1.3vw, 18px) clamp(20px, 2vw, 32px);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 16px);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.quem-btn:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
}

.quem-btn svg {
    width: clamp(14px, 1.1vw, 18px);
    height: clamp(14px, 1.1vw, 18px);
}

/* Grid dos 2 cards */
.quem-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 32px);
    margin-bottom: clamp(32px, 4vw, 60px);
}

@media (max-width: 880px) {
    .quem-cards { grid-template-columns: 1fr; }
}

.quem-card {
    border-radius: var(--radius-lg);
    padding: clamp(20px, 2.4vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 28px);
    overflow: hidden;
    position: relative;
    min-height: clamp(380px, 36vw, 520px);
}

/* Card claro: fundo bg-alt com padrão listrado neutro (var(--line), não violeta) */
.quem-card--light {
    background:
        repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 14px),
        var(--color-bg-alt);
    border: 1px solid var(--line);
}

.quem-card--dark {
    background: var(--color-navy);
    border: 1px solid var(--color-navy);
    color: rgba(255, 255, 255, 0.8);
    justify-content: flex-start;
    padding: clamp(24px, 2.8vw, 40px);
}

/* Tag "Atendimento nacional" no padrão das sector-tags (radius-md, surface, borda line-strong) */
.quem-tag {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.6vw, 10px);
    align-self: flex-start;
    background: var(--color-surface);
    color: var(--color-heading);
    border: 1px solid var(--line-strong);
    padding: clamp(6px, 0.7vw, 10px) clamp(12px, 1.2vw, 18px);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(12px, 1vw, 15px);
    letter-spacing: -0.005em;
}

.quem-tag svg {
    width: clamp(14px, 1.1vw, 17px);
    height: clamp(14px, 1.1vw, 17px);
    color: var(--color-accent);
}

/* Imagem placeholder do card claro */
.quem-card-img {
    margin: 0;
    flex: 1;
    display: grid;
    place-items: center;
    min-height: clamp(160px, 20vw, 280px);
}

.quem-card-img .ph-tag {
    font-family: var(--font-mono);
    color: var(--color-text-soft);
    font-size: clamp(11px, 0.95vw, 14px);
    background: rgba(255, 255, 255, 0.65);
    padding: clamp(4px, 0.4vw, 6px) clamp(10px, 1vw, 14px);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}

/* Pílula de stat "5M+ cliques orgânicos gerados" */
.quem-stat {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 0.8vw, 12px);
    align-self: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--line-strong);
    padding: clamp(8px, 0.9vw, 14px) clamp(14px, 1.4vw, 22px);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: clamp(13px, 1.05vw, 16px);
    color: var(--color-heading);
}

.quem-stat strong {
    font-weight: 800;
    color: var(--color-accent);
    font-size: clamp(15px, 1.25vw, 19px);
}

/* Card dark: Visão + Missão */
.quem-block {
    display: grid;
    gap: clamp(10px, 1.2vw, 16px);
    align-content: start;
}

.quem-block-icon {
    display: inline-grid;
    place-items: center;
    width: clamp(40px, 3.4vw, 56px);
    height: clamp(40px, 3.4vw, 56px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-md);
    color: var(--color-lilac);
}

.quem-block-icon svg {
    width: 55%;
    height: 55%;
}

.quem-block h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: clamp(18px, 1.7vw, 26px);
    margin: 0;
    letter-spacing: -0.01em;
}

.quem-block p {
    margin: 0;
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

.quem-divider {
    height: 1px;
    background: var(--line-dark);
    margin-block: clamp(4px, 0.8vw, 14px);
}

.quem-fechamento {
    margin: 0 0 clamp(28px, 3.5vw, 56px);
    color: var(--color-text-soft);
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.65;
    max-width: clamp(640px, 70vw, 920px);
}

.quem-fechamento strong {
    color: var(--color-heading);
    font-weight: 700;
}


/* ============================================================
   SETORES B2B MADURO — Redesign on-dark (5/5)
   Topo: 2 colunas iguais (head + nota), embaixo: faixa de logos
   Fundo escuro navy com contraste invertido em todos os textos
   ============================================================ */
.section-sectors {
    background: var(--color-navy);
    color: var(--color-lilac);
    padding-block: clamp(36px, 4vw, 72px) !important;
}

.sectors-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 64px);
    align-items: end;
    margin-bottom: clamp(28px, 3.5vw, 56px);
}

@media (max-width: 880px) {
    .sectors-top { grid-template-columns: 1fr; }
}

.sectors-head .eyebrow {
    color: var(--color-lilac);
}

.sectors-head .h2 {
    color: #fff;
    margin-block: clamp(8px, 1vw, 16px) clamp(16px, 1.8vw, 24px);
}

.sectors-head .h2 em {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-lilac);
    font-weight: 500;
}

/* Tags on-dark: fundo translúcido, borda branca sutil, texto branco */
.section-sectors .sector-tags li {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line-dark);
    color: #fff;
}

.section-sectors .sector-tags li:hover {
    background: #fff;
    color: var(--color-navy);
    border-color: #fff;
}

.sectors-note {
    max-width: clamp(280px, 36vw, 520px);
    padding-bottom: clamp(8px, 1vw, 14px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 880px) {
    .sectors-note { max-width: 100%; padding-bottom: 0; }
}

.sectors-logos {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(20px, 2.5vw, 44px);
    align-items: center;
    padding-top: clamp(20px, 2.4vw, 36px);
    border-top: 1px solid var(--line-dark);
}

@media (max-width: 700px) {
    .sectors-logos {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

.sectors-logos-label {
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.85vw, 12px);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-lilac);
    margin: 0;
    white-space: nowrap;
    font-weight: 600;
}

/* Logos on-dark: texto claro, fade nas pontas com mask escura */
.section-sectors .logos-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.section-sectors .logo-name {
    color: rgba(255, 255, 255, 0.45);
}

.section-sectors .logo-name:hover {
    color: #fff;
    opacity: 1;
}

/* Tags dos setores no header esquerdo */
.sector-tags {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 0.7vw, 10px);
}

.sector-tags li {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(13px, 1.05vw, 17px);
    color: var(--color-heading);
    background: var(--color-surface);
    border: 1px solid var(--line-strong);
    padding: clamp(5px, 0.5vw, 8px) clamp(11px, 1vw, 18px);
    border-radius: var(--radius-md);
    letter-spacing: -0.005em;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.sector-tags li:hover {
    background: var(--color-navy);
    color: var(--color-surface);
    border-color: var(--color-navy);
}

/* Marquee dos logos */
.logos-marquee {
    overflow: hidden;
    padding-block: var(--space-3);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.logos-track {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 32px);
    width: max-content;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: logos-scroll 50s linear infinite;
    will-change: transform;
}

.logos-track:hover {
    animation-play-state: paused;
}

/* Fluxo da ESQUERDA pra DIREITA (oposto do tools-marquee) */
@keyframes logos-scroll {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .logos-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Logos como texto puro (sem boxes) — usado em mega-menu legado */
.logo-name {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(18px, 1.7vw, 28px);
    letter-spacing: -0.01em;
    color: var(--color-text-soft);
    opacity: 0.6;
    transition: opacity var(--t-med) var(--ease), color var(--t-med) var(--ease);
    cursor: default;
    user-select: none;
}

.logo-name:hover {
    opacity: 1;
    color: var(--color-navy);
}

/* Logos de clientes como imagens (carrossel da seção sectors on-dark).
   As imagens vêm com canvas quadrado (600x600) e a logo centralizada com
   espaço em volta. Dimensionamos largo o suficiente pra logo aparecer
   inteira sem corte. */
.logo-img {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(140px, 13vw, 200px);
    height: clamp(80px, 7vw, 110px);
}

.logo-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    /* Logos vêm em cinza escuro: inverter pra branco e atenuar pra ficarem suaves no fundo navy */
    filter: brightness(0) invert(1);
    opacity: 0.55;
    transition: opacity var(--t-med) var(--ease);
}

.logo-img:hover img {
    opacity: 1;
}

/* No marquee on-dark, deixa o conteúdo respirar verticalmente sem cortar */
.section-sectors .logos-marquee {
    padding-block: clamp(8px, 1vw, 18px);
}

@media (max-width: 640px) {
    .logos-track { animation-duration: 38s; gap: clamp(10px, 3vw, 20px); }
    .logo-img { width: clamp(110px, 32vw, 170px); height: clamp(60px, 16vw, 90px); }
}


/* ============================================================
   MÉTODO 3 TEMPOS — sub-blocos dentro de cada Tempo (home)
   ============================================================ */
.m-subblocks {
    margin-top: var(--space-5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-5);
}

.m-subblock h4 {
    font-size: var(--fs-md);
    color: #fff;
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    line-height: 1.25;
}

.m-subblock p {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 1023px) {
    .m-subblocks { grid-template-columns: 1fr; }
}

.method-closer {
    margin-top: var(--space-7);
    text-align: center;
    font-size: clamp(13.5px, 1.8vw, 29px);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.02em;
    max-width: 720px;
    margin-inline: auto;
}

.method-closer .serifx {
    color: var(--color-lilac-soft);
}


/* ============================================================
   VALORES (Clareza, Evolução, Estrutura) — home
   ============================================================ */
.section-values {
    padding-block: var(--space-9);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(15px, 2vw, 36px);
}

.value {
    background: var(--color-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: clamp(18px, 2.2vw, 44px);
    display: grid;
    gap: var(--space-3);
    align-content: start;
    position: relative;
}

.value-tag {
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(16.5px, 2.16vw, 36px);
    line-height: 1;
    color: var(--color-accent);
    margin: 0;
    letter-spacing: -0.02em;
}

.value h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
    line-height: 1.2;
}

.value p {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 1023px) {
    .values-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}


/* ============================================================
   TEMPO BLOCKS — consultoria de SEO (3 tempos como seções)
   ============================================================ */
.tempo-block {
    padding-block: clamp(21px, 2.6vw, 56px);
    border-bottom: 1px solid var(--line);
}

.tempo-block:first-of-type {
    border-top: 1px solid var(--line);
}

.tempo-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(15px, 2vw, 36px);
    align-items: start;
    margin-bottom: var(--space-5);
}

.tempo-mark {
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(27px, 4.05vw, 72px);
    line-height: 1;
    color: var(--color-accent);
    margin: 0;
    letter-spacing: -0.03em;
}

.tempo-title-wrap {
    display: grid;
    gap: var(--space-2);
}

.tempo-title-wrap .eyebrow {
    margin: 0;
}

.h3-tempo {
    font-size: clamp(15px, 1.98vw, 34px);
    font-weight: 800;
    color: var(--color-heading);
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0;
}

.tempo-desc {
    font-size: var(--fs-md);
    color: var(--color-text);
    line-height: 1.55;
    margin: 0;
    max-width: 70ch;
}

.tempo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-5);
    margin-left: clamp(0px, 3vw, 60px);
}

.tempo-entrega h4 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-heading);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.25;
}

.tempo-entrega p {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 1023px) {
    .tempo-head { grid-template-columns: 1fr; gap: var(--space-3); }
    .tempo-grid { grid-template-columns: 1fr; margin-left: 0; }
}


/* ============================================================
   CONSULTORIA DE SEO v5 — Claude Design A1..A6
   Motivos de coerência:
   - numeral Newsreader itálica como âncora (A1, A3, A4)
   - alternância de fundos (branco / bg-alt / navy-deep)
   - acento chapado, zero card-clone
   ============================================================ */

/* Cabeçalho da página (limpa o nav flutuante na primeira seção) */
.svc-top {
    padding-top: clamp(116px, 15vh, 168px);
}

.svc-crumb {
    display: flex;
    align-items: center;
    gap: clamp(5.3px, 0.6vw, 12px);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-soft);
    margin-bottom: clamp(15px, 2vw, 32px);
    flex-wrap: wrap;
}

.svc-crumb a {
    color: var(--color-text-soft);
    transition: color var(--t-fast) var(--ease);
}

.svc-crumb a:hover { color: var(--color-accent); }
.svc-crumb .sep { opacity: 0.45; }
.svc-crumb .cur { color: var(--color-heading); }

/* ============================================================
   A1 — SETORES ATENDIDOS (índice editorial em 3 colunas)
   ============================================================ */
.sectors {
    margin-top: 8px;
    border-top: 1px solid var(--line-strong);
}

.sector {
    position: relative;
    display: grid;
    grid-template-columns: clamp(40.5px, 6vw, 100px) minmax(190px, 1.05fr) 1.55fr;
    gap: clamp(12px, 3vw, 46px);
    padding: clamp(19.5px, 3.4vw, 44px) 0;
    border-bottom: 1px solid var(--line);
    transition: background var(--t-med) var(--ease);
}

.sector::before {
    content: "";
    position: absolute;
    inset: 0 clamp(-28px, -1.8vw, -16px);
    z-index: 0;
    border-radius: var(--radius-sm);
    background: var(--color-accent-tint);
    opacity: 0;
    transition: opacity var(--t-med) var(--ease);
    pointer-events: none;
}

.sector:hover::before { opacity: 0.5; }
.sector > * { position: relative; z-index: 1; }

.sec-idx {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: clamp(24px, 4.5vw, 63px);
    line-height: 0.82;
    color: var(--color-heading);
    transition: color var(--t-med) var(--ease);
}

.sector:hover .sec-idx { color: var(--color-accent); }

.sec-label { align-self: start; }

.sec-foco {
    display: block;
    font-size: var(--fs-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-label);
    margin-bottom: clamp(4.5px, 0.6vw, 12px);
}

.sec-foco::before { content: "Foco \2192 "; opacity: 0.5; }

.sec-name {
    font-size: clamp(13.5px, 1.89vw, 27px);
    font-weight: 700;
    color: var(--color-heading);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
}

.sec-body {
    align-self: start;
    border-left: 1px solid var(--line);
    padding-left: clamp(12px, 2.5vw, 40px);
}

.sec-desc {
    font-size: var(--fs-base);
    color: var(--color-text);
    line-height: 1.55;
    margin: 0;
}

.sec-tags {
    margin-top: clamp(9px, 1.2vw, 20px);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.7;
}

.sec-tags .tg { white-space: nowrap; }
.sec-tags .tg:not(:last-child)::after {
    content: "\00b7";
    margin: 0 0.6em;
    color: var(--color-accent);
    font-weight: 700;
}

/* Imagem editorial ao lado do cabeçalho dos Setores */
.setores-intro {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(24px, 5vw, 72px);
    align-items: center;
    margin-bottom: clamp(33px, 5vw, 68px);
}

.sectors-img {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-md);
}

/* Prova visual do Método 3 Tempos: 3 prints reais (IA, Google, AI Overview) */
.proofs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10.5px, 1.4vw, 26px);
    margin-bottom: clamp(21px, 3vw, 48px);
}

.proof-slot {
    display: grid;
    gap: clamp(7.5px, 0.8vw, 14px);
    margin: 0;
}

.proof-slot img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--line);
    border-radius: clamp(9px, 1vw, 18px);
    box-shadow: 0 20px 50px -32px rgba(4, 22, 64, 0.22);
    /* Placeholder: chrome de janela mockada (mostrado quando img ainda não foi adicionada) */
    background-color: var(--color-surface);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='130' viewBox='0 0 200 130'%3E%3Crect width='200' height='26' fill='%23001E620D'/%3E%3Ccircle cx='16' cy='13' r='3.2' fill='%235151EB66'/%3E%3Ccircle cx='28' cy='13' r='3.2' fill='%23001E621F'/%3E%3Ccircle cx='40' cy='13' r='3.2' fill='%23001E621F'/%3E%3Crect x='22' y='46' width='156' height='15' rx='7.5' stroke='%23001E621F' stroke-width='1' fill='none'/%3E%3Crect x='22' y='78' width='130' height='5' rx='2.5' fill='%23001E6214'/%3E%3Crect x='22' y='92' width='110' height='4' rx='2' fill='%23001E6210'/%3E%3Crect x='22' y='104' width='88' height='4' rx='2' fill='%23001E6210'/%3E%3C/svg%3E"),
        linear-gradient(165deg, var(--color-bg-alt) 0%, var(--color-surface) 100%);
    background-repeat: no-repeat;
    background-position: center 18%, center;
    background-size: 78% auto, 100% 100%;
    /* Esconde o alt text quando a imagem ainda não existe */
    color: transparent;
    font-size: 0;
    text-indent: 100%;
    overflow: hidden;
}

.proof-slot figcaption {
    font-family: var(--font-mono);
    font-size: clamp(6.8px, 0.65vw, 11px);
    color: var(--color-text-soft);
    letter-spacing: 0.04em;
    text-align: center;
}

@media (max-width: 1000px) {
    .proofs-grid { grid-template-columns: 1fr; gap: clamp(9px, 2vw, 18px); }
}


/* ============================================================
   MÉTODO 3 TEMPOS (movimentos T⁻ T⁰ T⁺ com marca tipográfica)
   ============================================================ */
.tempos5 { border-top: 1px solid var(--line-strong); }

.tempo-row {
    display: grid;
    grid-template-columns: minmax(248px, 330px) 1fr;
    gap: clamp(19.5px, 4vw, 68px);
    padding: clamp(27px, 4.6vw, 64px) 0;
    border-bottom: 1px solid var(--line);
}

.tm-eyebrow {
    display: inline-block;
    font-size: var(--fs-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-label);
    margin-bottom: clamp(7.5px, 1vw, 16px);
}

.tm-glyph {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.03em;
    font-size: clamp(36.8px, 5.85vw, 90px);
    line-height: 0.8;
    color: var(--color-heading);
    margin-bottom: clamp(10.5px, 1.4vw, 22px);
}

.tm-glyph sup {
    font-size: 0.46em;
    font-weight: 500;
    margin-left: 0.02em;
}

.tempo-mark h3 {
    font-family: var(--font-body);
    font-style: normal;
    font-size: clamp(13.5px, 1.71vw, 25px);
    font-weight: 700;
    color: var(--color-heading);
    letter-spacing: -0.025em;
    line-height: 1.16;
    margin: 0 0 clamp(7.5px, 1vw, 15px) 0;
}

.tm-desc {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-base);
    color: var(--color-text-soft);
    line-height: 1.55;
    max-width: 40ch;
    margin: 0;
    letter-spacing: 0.01em;
    word-spacing: 0.04em;
}

.tempo-deliv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16.5px, 2.6vw, 38px) clamp(18px, 3vw, 44px);
    align-content: start;
}

.deliv {
    padding-top: clamp(9.8px, 1.2vw, 20px);
    border-top: 2px solid var(--color-accent);
}

.deliv h4 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-heading);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 clamp(5.3px, 0.7vw, 11px) 0;
}

.deliv p {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.55;
    margin: 0;
}


/* ============================================================
   ICP (atendemos vs não atendemos — painéis com badges)
   ============================================================ */
.icp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(13.5px, 2.5vw, 28px);
    margin-top: 8px;
}

.icp-card {
    border: 1px solid var(--line-strong);
    border-radius: clamp(10.5px, 1.2vw, 22px);
    padding: clamp(19.5px, 3vw, 44px);
    background: var(--color-surface);
}

.icp-card.yes {
    border-color: var(--color-accent);
    box-shadow: 0 24px 60px -34px rgba(0, 114, 206, 0.5);
}

.icp-head {
    display: flex;
    align-items: center;
    gap: clamp(7.5px, 1vw, 16px);
    padding-bottom: clamp(10.5px, 1.4vw, 22px);
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.icp-badge {
    width: clamp(24px, 2.8vw, 42px);
    height: clamp(24px, 2.8vw, 42px);
    border-radius: clamp(5.3px, 0.7vw, 12px);
    display: grid;
    place-items: center;
    flex: none;
}

.icp-card.yes .icp-badge { background: var(--color-accent); color: #fff; }
.icp-card.no .icp-badge { background: var(--color-bg-alt); color: var(--color-text-soft); }

.icp-badge svg {
    width: clamp(12.8px, 1.4vw, 22px);
    height: clamp(12.8px, 1.4vw, 22px);
}

.icp-head h3 {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-heading);
    margin: 0;
}

.icp-card.no .icp-head h3 { color: var(--color-text-soft); }

.icp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.icp-list li {
    display: flex;
    gap: clamp(7.5px, 1vw, 16px);
    align-items: flex-start;
    padding: clamp(9px, 1.2vw, 18px) 0;
    border-top: 1px solid var(--line);
    font-size: var(--fs-base);
    line-height: 1.45;
}

.icp-list li:first-child { border-top: none; }

.icp-list .ic {
    width: clamp(13.5px, 1.5vw, 22px);
    height: clamp(13.5px, 1.5vw, 22px);
    flex: none;
    margin-top: 2px;
    display: grid;
    place-items: center;
}

.icp-list .ic svg { width: 100%; height: 100%; }

.icp-card.yes .icp-list li { color: var(--color-text); }
.icp-card.yes .ic { color: var(--color-accent); }
.icp-card.no .icp-list li { color: var(--color-text-soft); }
.icp-card.no .ic { color: var(--color-text-soft); opacity: 0.65; }


/* ============================================================
   GLOSSÁRIO (2 colunas, termo serifado + definição)
   ============================================================ */
.glossary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(30px, 5vw, 80px);
    border-top: 1px solid var(--line-strong);
    margin-top: 8px;
}

.gloss {
    padding: clamp(12px, 2vw, 26px) 0;
    border-bottom: 1px solid var(--line);
}

.gloss-term {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(12px, 1.35vw, 22px);
    color: var(--color-heading);
    letter-spacing: -0.01em;
    margin: 0 0 clamp(3.8px, 0.5vw, 9px) 0;
}

.gloss-def {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.5;
    margin: 0;
}


/* ============================================================
   A2 — STACK TÉCNICA (marquee + grupos em chips, em navy escuro)
   ============================================================ */
.tool-marquee {
    position: relative;
    margin: 0 0 clamp(21px, 4vw, 52px);
    overflow: hidden;
    border-block: 1px solid var(--line-dark);
    padding-block: clamp(10.5px, 1.2vw, 22px);
    -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.tool-track {
    display: flex;
    width: max-content;
    animation: tmarq 42s linear infinite;
}

.tool-marquee:hover .tool-track { animation-play-state: paused; }

.tool-track .tm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(36px, 4vw, 68px);
    min-width: clamp(105px, 14vw, 200px);
    margin: 0 clamp(5.3px, 0.7vw, 12px);
    padding: 0 clamp(13.5px, 1.8vw, 30px);
    border: 1px solid var(--line-dark);
    border-radius: clamp(6px, 0.85vw, 14px);
    background: rgba(255, 255, 255, 0.03);
    font-size: clamp(9.8px, 0.99vw, 16px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: border-color var(--t-fast) var(--ease);
}

.tool-marquee:hover .tm { border-color: rgba(255, 255, 255, 0.22); }

@keyframes tmarq { to { transform: translateX(-40%); } }

.stack {
    border-top: 1px solid var(--line-dark);
}

.stack-row {
    display: grid;
    grid-template-columns: minmax(clamp(120px, 16vw, 240px), clamp(135px, 18vw, 280px)) 1fr;
    gap: clamp(12px, 2.5vw, 44px);
    align-items: start;
    padding: clamp(15px, 2.6vw, 36px) 0;
    border-bottom: 1px solid var(--line-dark);
}

.stack-label {
    display: flex;
    align-items: baseline;
    gap: clamp(7.5px, 1vw, 16px);
    font-size: var(--fs-md);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.stack-label .stk-n {
    flex: none;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--color-lilac-soft);
    font-size: var(--fs-md);
}

.stack-chips {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(5.3px, 0.7vw, 11px);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: clamp(4.5px, 0.6vw, 10px);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-dark);
    padding: clamp(5.3px, 0.65vw, 11px) clamp(8.3px, 1vw, 18px);
    border-radius: clamp(5.3px, 0.6vw, 10px);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.chip::before {
    content: "";
    width: clamp(3px, 0.4vw, 6px);
    height: clamp(3px, 0.4vw, 6px);
    border-radius: 50%;
    background: var(--color-lilac-soft);
    opacity: 0.7;
    transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.chip.soft { font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.chip:hover { border-color: var(--color-accent); background: rgba(0, 114, 206, 0.18); color: #fff; }
.chip:hover::before { background: #fff; opacity: 1; }


/* ============================================================
   A3 — ROADMAP 90 DIAS (curva de crescimento composto + 3 fases)
   ============================================================ */
.rm { margin-top: clamp(9px, 1.2vw, 24px); }

.rm-chart {
    position: relative;
    border-bottom: 1px solid var(--line);
    padding-bottom: clamp(7.5px, 1vw, 18px);
}

.rm-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.rm-base { stroke: var(--line-strong); stroke-width: 1.5; }
.rm-grid-h { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 6; opacity: 0.65; }
.rm-grid-v { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 7; opacity: 0.5; }
.rm-area { fill: var(--color-accent); opacity: 0.09; }
.rm-line {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rm-line.future { stroke-width: 2.5; stroke-dasharray: 3 7; opacity: 0.55; }
.rm-node { fill: var(--color-bg); stroke: var(--color-accent); stroke-width: 3; }
.rm-node.future { stroke-width: 2; opacity: 0.65; }
.rm-mk {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    fill: var(--color-heading);
    letter-spacing: -0.02em;
}
.rm-mk.future {
    font-size: 14px;
    font-weight: 600;
    fill: var(--color-text-soft);
}
.rm-cap {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    fill: var(--color-text-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rm-y {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    fill: var(--color-text-soft);
    letter-spacing: 0.02em;
}
.rm-note {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 400;
    fill: var(--color-text-soft);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rm-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16.5px, 3vw, 48px);
    margin-top: clamp(16.5px, 2.6vw, 36px);
}

/* Quando há exatamente 4 cards, troca pra 2x2 (evita órfão na 2ª linha) */
.rm-phases:has(> .phase:nth-child(4):nth-last-child(1)) {
    grid-template-columns: repeat(2, 1fr);
}
/* 5 cards: mantém 3 colunas (3 em cima + 2 embaixo, ok visualmente) */
/* 6 cards: 3+3 (default já cobre) */

.phase { position: relative; }

@media (prefers-reduced-motion: no-preference) {
    .rm-chart .rm-line:not(.future) {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset 1.6s var(--ease) 0.15s;
    }
    .rm-chart .rm-area,
    .rm-chart .rm-node,
    .rm-chart .rm-mk {
        opacity: 0;
        transition: opacity 0.7s var(--ease) 0.55s;
    }
    .rm-chart .rm-line.future {
        opacity: 0;
        transition: opacity 0.7s var(--ease) 0.9s;
    }
    .rm.in .rm-chart .rm-line:not(.future) { stroke-dashoffset: 0; }
    .rm.in .rm-chart .rm-area { opacity: 0.09; }
    .rm.in .rm-chart .rm-node,
    .rm.in .rm-chart .rm-mk { opacity: 1; }
    .rm.in .rm-chart .rm-line.future { opacity: 0.55; }
}

.ph-head {
    display: flex;
    gap: clamp(7.5px, 1.1vw, 18px);
    align-items: flex-start;
}

.ph-idx {
    flex: none;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: clamp(24px, 3.06vw, 50px);
    line-height: 0.8;
    color: var(--color-accent);
}

.ph-kicker {
    font-size: var(--fs-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-soft);
}

.ph-foco {
    font-size: clamp(12px, 1.44vw, 23px);
    font-weight: 700;
    color: var(--color-heading);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: 4px;
}

.ph-list {
    margin-top: clamp(13.5px, 1.8vw, 28px);
    display: flex;
    flex-direction: column;
    gap: clamp(7.5px, 1vw, 16px);
    list-style: none;
    padding: 0;
}

.ph-list li {
    display: flex;
    gap: clamp(6.8px, 0.9vw, 14px);
    align-items: flex-start;
    font-size: var(--fs-sm);
    color: var(--color-text);
    line-height: 1.45;
}

.ph-list li svg {
    width: clamp(11.3px, 1.3vw, 20px);
    height: clamp(11.3px, 1.3vw, 20px);
    flex: none;
    margin-top: 3px;
    color: var(--color-accent);
}


/* ============================================================
   A4 — INVESTIMENTO (ledger executivo em navy escuro)
   ============================================================ */
.ledger {
    border-top: 1px solid var(--line-dark);
    margin-top: 6px;
}

.led-row {
    display: grid;
    grid-template-columns: clamp(31.5px, 5vw, 80px) minmax(clamp(142.5px, 18vw, 240px), 1fr) 1.2fr;
    gap: clamp(12px, 3vw, 52px);
    align-items: center;
    padding: clamp(19.5px, 3.4vw, 52px) 0;
    border-bottom: 1px solid var(--line-dark);
}

.led-idx {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: clamp(17.3px, 2.34vw, 40px);
    line-height: 1;
    color: var(--color-lilac-soft);
}

.led-tag {
    display: block;
    font-size: var(--fs-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-lilac-soft);
    margin-bottom: clamp(6px, 0.8vw, 14px);
}

.led-fig-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: clamp(3px, 0.4vw, 8px) clamp(7.5px, 1vw, 16px);
}

.led-big {
    font-size: clamp(18.8px, 3.6vw, 50px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
}

.led-sub {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-lilac-soft);
    letter-spacing: -0.01em;
}

.led-desc {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.55;
    max-width: 50ch;
}


/* ============================================================
   A5 — SELOS (faixa única dividida, discreta)
   ============================================================ */
.seals {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
    margin-top: 4px;
}

.seal {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4.5px, 0.6vw, 12px);
    text-align: center;
    padding: clamp(21px, 3vw, 50px) clamp(13.5px, 1.6vw, 30px);
    border-left: 1px solid var(--line);
}

.seal:first-child { border-left: none; }

.seal-name {
    font-size: clamp(10.5px, 1.17vw, 20px);
    font-weight: 700;
    color: var(--color-heading);
    letter-spacing: -0.01em;
}

.seal-status {
    font-size: var(--fs-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-label);
}

.seals-note {
    margin-top: clamp(10.5px, 1.4vw, 24px);
    text-align: center;
    font-size: var(--fs-mono);
    letter-spacing: 0.04em;
    color: var(--color-text-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ============================================================
   A6 — SERVIÇOS RELACIONADOS (lista editorial com seta)
   ============================================================ */
.rel-list {
    border-top: 1px solid var(--line-strong);
    margin-top: 6px;
}

.rel-link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(clamp(120px, 18vw, 280px), clamp(135px, 20vw, 300px)) 1fr auto;
    gap: clamp(9px, 2.5vw, 44px);
    align-items: center;
    padding: clamp(15px, 2.6vw, 36px) clamp(10.5px, 1.4vw, 24px);
    border-bottom: 1px solid var(--line);
    transition: background var(--t-fast) var(--ease);
}

.rel-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-accent-tint);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
    pointer-events: none;
}

.rel-link:hover::before { opacity: 0.6; }
.rel-link > * { position: relative; z-index: 1; }

.rl-name {
    font-size: clamp(12px, 1.53vw, 25px);
    font-weight: 700;
    color: var(--color-heading);
    letter-spacing: -0.02em;
    line-height: 1.12;
    transition: color var(--t-fast) var(--ease);
}

.rel-link:hover .rl-name { color: var(--color-accent); }

.rl-desc {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.5;
    max-width: 62ch;
}

.rl-arrow {
    display: grid;
    place-items: center;
    color: var(--color-accent);
    transition: transform var(--t-fast) var(--ease);
}

.rl-arrow svg {
    width: clamp(13.5px, 1.6vw, 26px);
    height: clamp(13.5px, 1.6vw, 26px);
}

.rel-link:hover .rl-arrow { transform: translateX(6px); }


/* ============================================================
   RESPONSIVO v5
   ============================================================ */
@media (max-width: 1000px) {
    .icp-grid { grid-template-columns: 1fr; gap: clamp(10.5px, 1.8vw, 22px); }
}

@media (max-width: 860px) {
    .sector { grid-template-columns: auto 1fr; gap: 8px 22px; }
    .sec-idx { grid-row: 1 / 2; font-size: clamp(21.8px, 7.2vw, 40px); }
    .sec-label { grid-column: 2 / 3; }
    .sec-body { grid-column: 1 / 3; border-left: none; padding-left: 0; margin-top: 6px; }
    .tempo-row { grid-template-columns: 1fr; gap: clamp(13.5px, 3vw, 28px); }
    .tempo-deliv { grid-template-columns: 1fr; }
    .stack-row { grid-template-columns: 1fr; gap: 14px; }
    .sectors-img { aspect-ratio: 16 / 10; }
    .setores-intro { grid-template-columns: 1fr; gap: clamp(16.5px, 3vw, 32px); margin-bottom: clamp(24px, 5vw, 48px); }
    .rm-chart { display: none; }
    .rm-phases {
        grid-template-columns: 1fr;
        gap: 0;
        position: relative;
        margin-top: clamp(6px, 1vw, 16px);
    }
    .rm-phases::before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 30px;
        left: 7px;
        width: 2px;
        background: linear-gradient(180deg, var(--color-accent), var(--color-accent) 70%, var(--line-strong));
    }
    .phase { padding: 0 0 36px 38px; }
    .phase:last-child { padding-bottom: 0; }
    .phase::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        width: clamp(10.5px, 1.2vw, 18px);
        height: clamp(10.5px, 1.2vw, 18px);
        border-radius: 50%;
        background: var(--color-bg);
        border: 3px solid var(--color-accent);
        box-shadow: 0 0 0 5px var(--color-bg);
    }
    .led-row { grid-template-columns: 1fr; gap: 8px; }
    .led-idx { font-size: clamp(16.5px, 5.4vw, 29px); }
    .glossary { grid-template-columns: 1fr; }
    .rel-link { grid-template-columns: 1fr auto; row-gap: 7px; }
    .rl-arrow { grid-row: 1 / 3; }
}

@media (max-width: 560px) {
    .seals { flex-direction: column; }
    .seal { border-left: none; border-top: 1px solid var(--line); }
    .seal:first-child { border-top: none; }
}


/* ============================================================
   SERVIÇOS RELACIONADOS (consultoria — internal linking)
   ============================================================ */
.section-related {
    padding-block: var(--space-9);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(15px, 2vw, 36px);
}

.related-card {
    background: var(--color-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: clamp(16.5px, 2vw, 36px);
    display: grid;
    gap: var(--space-3);
    align-content: start;
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}

.related-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.related-card h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
    line-height: 1.2;
}

.related-card p {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 1023px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .related-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   ORIGEM (cidade-natal Sorocaba)
   ============================================================ */
.section-origem {
    padding-block: var(--space-8) var(--space-9);
}

.origem-card {
    max-width: clamp(465px, 60vw, 900px);
    margin-inline: auto;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--space-4);
}

.origem-title {
    line-height: 1.12;
}

.origem-text {
    max-width: 56ch;
    font-size: var(--fs-md);
    color: var(--color-text);
    line-height: 1.55;
}


/* ==================================================================
   HEADER + FOOTER · preservar tamanho original
   Restaura os valores PRE-redução -10% global dos tokens nos seletores
   do menu (.nav, .mega) e rodapé (.footer-*, .fb-*), além do WhatsApp.
   ================================================================== */

/* Header / menu */
.mega-link .mt              { font-size: clamp(9.8px, 0.92vw, 16px); }
.mega-feature .mf-tag       { font-size: clamp(8.3px, 0.78vw, 14px); }
.nav-cta .btn               { font-size: clamp(9.8px, 0.92vw, 16px); }

/* Footer */
.footer-brand .fb-logo .fb-word { font-size: clamp(12px, 1.15vw, 20px); }
.footer-brand p             { font-size: clamp(9.8px, 0.92vw, 16px); }
.footer-meta                { font-size: clamp(9px, 0.85vw, 15px); }
.footer-col h5              { font-size: clamp(9px, 0.85vw, 15px); }
.footer-col a               { font-size: clamp(9.8px, 0.92vw, 16px); }
.footer-bottom              { font-size: clamp(9px, 0.85vw, 15px); }

/* WhatsApp widget */
.wa-bar                     { font-size: clamp(11.3px, 1.05vw, 18px); }


/* ============================================================
   MOBILE (≤640px) — overrides finais
   Bloco no FIM do components.css porque é o último CSS carregado.
   Vence o cascade sobre as regras desktop declaradas antes neste
   mesmo arquivo (que tinham clamps com px-min calibrados pra
   desktop e degradavam pra valores ilegíveis no smartphone).
   ============================================================ */
@media (max-width: 640px) {
    /* Números de destaque (5M+, B2B, 6 anos, 14,6%, 3 a 5) — todos no mesmo tamanho */
    .hero-meta .num,
    .stat .n                { font-size: clamp(22px, 6.3vw, 27px); line-height: 1; letter-spacing: -0.035em; }
    .res-callout .n         { font-size: clamp(22px, 6.3vw, 27px); line-height: 1; letter-spacing: -0.035em; }

    /* Labels que acompanham os números */
    .hero-meta .lbl         { font-size: clamp(13px, 3.6vw, 16px); margin-top: 8px; line-height: 1.35; }
    .stat .l                { font-size: clamp(13px, 3.6vw, 16px); line-height: 1.4; }

    /* Trust statement: SaaS · Indústria · Fintech · Consultoria B2B */
    .trust-statement .sct   { font-size: clamp(18px, 5vw, 34px); }
    .trust-statement .arr   { font-size: clamp(13px, 3.6vw, 18px); }

    /* Card relacionado */
    .rl-name                { font-size: clamp(17px, 4.4vw, 19px); line-height: 1.18; }
}

/* ============================================================
   LANG SWITCH (bandeiras) — só aparece em páginas que injetam
   $langSwitcherHtml (preview de idiomas). Zero impacto na produção PT.
   ============================================================ */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, .4vw, 5px);
    margin-right: clamp(4px, .8vw, 10px);
}
.lang-opt {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: clamp(10.5px, .95vw, 12px);
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    color: var(--color-text-soft, #727F97);
    padding: clamp(5px, .6vw, 7px) clamp(7px, .8vw, 9px);
    border-radius: var(--radius-pill, 999px);
    transition: background .2s ease, color .2s ease;
}
.lang-opt span { letter-spacing: .02em; }
.lang-opt:hover { background: var(--color-bg-alt, #F1F3F8); color: var(--color-navy, #001E62); }
.lang-opt.active { background: var(--color-navy, #001E62); color: #fff; }

@media (max-width: 1023px) {
    .lang-switch {
        order: -1;
        width: 100%;
        justify-content: center;
        gap: clamp(6px, 2vw, 10px);
        padding-bottom: clamp(8px, 2vw, 12px);
        margin-right: 0;
        margin-bottom: clamp(6px, 1.5vw, 10px);
        border-bottom: 1px solid var(--line, rgba(4, 22, 64, .10));
    }
}