/* =============================================================
   HOME.CSS — ImobiForce CRM
   Ordem: globals → hero → trust-bar → problema-real → integracoes
            → feat-modern → ecossistema → para-quem → por-que-confiar
            → planos → faq → cta-demo → footer → responsivo
   ============================================================= */

@import url('style.css');

/* Aplica padding-top antes do fullPage.js inicializar — evita flash de layout */
#fullpage .section:not(.footer-section),
#fullpage .fp-section:not(.footer-section) {
    padding-top: 150px;
}

/* Remove padding-top do fullPage.js no wrapper do footer */
#fullpage .footer-section {
    padding-top: 0 !important;
}

/* Remove badge "Made with fullPage.js" */
.fp-watermark {
    display: none !important;
}

/* ─── fullPage.js modo responsivo (mobile ≤ 900px) ─── */
/* Quando fullPage entra em modo responsivo, as seções scrollam livremente */
@media (max-width: 900px) {

    /* Override do paddingTop:'150px' injetado pelo fullPage.js como inline style.
       60px é neutro — as seções têm seus próprios paddings via CSS.
       Hero recebe 80px para cobrir a altura do navbar fixo. */
    #fullpage .section:not(.footer-section):not(.hero),
    #fullpage .fp-section:not(.footer-section):not(.hero) {
        padding-top: 80px !important;
    }

    /* Hero: padding-top = altura do navbar no mobile (~70px) + folga */
    #fullpage .hero {
        padding-top: 110px !important;
        min-height: unset !important;
    }

    /* Garante que todas as seções tenham altura automática.
       NÃO use overflow:visible — libera orbs/gradientes absolutos e causa scroll horizontal. */
    .fp-responsive #fullpage .section,
    .fp-responsive #fullpage .fp-section,
    .fp-responsive .section,
    .fp-responsive .fp-section {
        height: auto !important;
        min-height: unset !important;
    }

    /* Seções com height:100vh explícito — resetar no mobile.
       Mantemos overflow:hidden para conter elementos absolutos largos. */
    .problema-real,
    .integracoes,
    .ecossistema,
    .para-quem,
    .por-que-confiar,
    .planos,
    .faq,
    .cta-demo {
        height: auto !important;
        min-height: unset !important;
        overflow: hidden !important;
    }

    /* Remove fundo branco padrão do fullPage no scroll mobile */
    .fp-overflow {
        background: transparent;
    }

    /* Bg-groups no mobile: transição mais rápida que o desktop */
    .bg-group {
        transition: opacity .2s ease;
    }

    /* Navegação do fullPage (pontos laterais) — ocultar no mobile */
    #fp-nav {
        display: none !important;
    }

    /* Remove fundo branco padrão do fullPage no scroll mobile */
    .fp-overflow {
        background: var(--color-navy-deep, #171d36);
    }

    /* Previne scroll horizontal de elementos absolutos/fixos largos */
    html,
    body {
        overflow-x: hidden !important;
    }

    .site-wrapper {
        overflow-x: hidden;
    }
}

.bg-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--bg-section-dark);
    height: 1080px;
}

.bg-orb-main {
    position: absolute;
    width: 1400px;
    height: 1600px;
    top: -300px;
    left: -245px;
    border-radius: 0 55% 55% 0;
    background: radial-gradient(circle at 35% 40%, rgba(120, 170, 255, .22) 0%, rgba(80, 140, 240, .13) 30%, rgba(40, 90, 200, .06) 60%, transparent 100%);
    border: 6px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(30px)
}

.bg-orb-main::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15), rgba(180, 210, 255, .08), transparent 70%)
}

.bg-orb-main::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .4);
    mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%)
}

.fp-tableCell {
    display: flex;
    align-items: center;
}

@media (max-width: 900px) {
    .fp-tableCell {
        display: block !important;
        height: auto !important;
    }
}


/* ── HERO ───────────────────────────────────────────────────── */
.hero {
    min-height: clamp(600px, calc(100vh - 59px - 107px), 914px);
    display: block !important;
    padding: 0px 0 150px;
    background: var(--bg-section-dark);
    overflow: hidden;
}

.hero .fp-tableCell {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.hero__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 60px;
}

.hero__content {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 20px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-white);
    background: #ffffff24;
    opacity: 0;
    animation: fade-up .6s .1s ease forwards;
}

.hero__headline {
    font-size: clamp(2.95rem, 3vw, 2.75rem);
    font-weight: 400;
    line-height: 1;
    color: var(--text-white);
    opacity: 0;
    animation: fade-up .6s .2s ease forwards
}

.hero__headline .hl-white {
    font-weight: 600;
    color: var(--text-white)
}

.hero__headline .hl-grad {
    color: var(--color-blue-light);
    font-weight: 600;
}

.hero__subline {
    font-size: 15px;
    font-weight: 300;
    line-height: 1;
    color: var(--text-white);
    opacity: 0;
    animation: fade-up .6s .32s ease forwards
}

.hero__cta-group {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    opacity: 0;
    animation: fade-up .6s .44s ease forwards;
    flex-direction: column
}

.hero__cta-group .btn-primary {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 9px 30px;
    border-radius: 6px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-white) !important;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 9px;
    background: #ffffff16;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-ghost:hover {
    color: var(--text-white);
    border-color: rgba(255, 255, 255, .25)
}

.hero__visual {
    position: relative;
    opacity: 0;
    display: flex;
    justify-content: flex-end;
}

/* ── Banner Scene: composição em camadas ── */
.banner-scene {
    position: relative;
    width: 620px;
    height: 435px;
    flex-shrink: 0;
}

/* Notebook — base, ocupa o centro/direita */
.bs-notebook {
    width: 100%;
}

/* Celular — esquerda, sobreposto à borda do notebook */
/* Gráfico — topo esquerda */
/* Card dados do lead — topo direita */
/* Notificação — sobreposta na base, centro-baixo direita */

/* ── TRUST BAR (marquee) ───────────────────────────────────── */
.trust-bar {
    background: #1a4592b3;
    padding: 20px 0;
    overflow: hidden;
    height: 59px;
    position: relative;
    margin-top: -59px;
}

.trust-bar::before,
.trust-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none
}

.trust-bar::before {
    left: 0;
    background: linear-gradient(to right, rgb(28 60 121 / 80%), transparent)
}

.trust-bar::after {
    right: 0;
    background: linear-gradient(to left, rgb(28 60 121 / 80%), transparent)
}

.trust-track {
    display: flex;
    width: max-content;
    animation: marquee 22s linear infinite
}

.trust-track:hover {
    animation-play-state: paused
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, .9);
    letter-spacing: .3px;
    white-space: nowrap;
    padding: 0 30px
}

.trust-check {
    color: #2dd4bf;
    font-size: 13px
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fade-right {
    from {
        opacity: 0;
        transform: translateX(30px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.bg-orb-features {
    position: absolute;
    width: 1167px;
    height: 1167px;
    bottom: -615px;
    right: -100px;
    border-radius: 100%;
    background: radial-gradient(circle at 35% 40%, rgba(120, 170, 255, .18) 0%, rgba(80, 140, 240, .10) 30%, rgba(40, 90, 200, .05) 60%, transparent 100%);
    border: 6px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(30px)
}

.bg-orb-features::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15), rgba(180, 210, 255, .08), transparent 70%)
}

.bg-orb-features::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .4);
    mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%)
}

.bg-orb-eco {
    position: absolute;
    width: 1167px;
    height: 1167px;
    bottom: -290px;
    left: -826px;
    border-radius: 100%;
    background: radial-gradient(circle at 35% 40%, rgba(120, 170, 255, .22) 0%, rgba(80, 140, 240, .13) 30%, rgba(40, 90, 200, .06) 60%, transparent 100%);
    border: 6px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(30px)
}

.bg-orb-eco::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15), rgba(180, 210, 255, .08), transparent 70%)
}

.bg-orb-eco::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .4);
    mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%)
}

.bg-orb-para-quem {
    position: absolute;
    width: 1316px;
    height: 1316px;
    bottom: -800px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100%;
    background: radial-gradient(circle at 35% 40%, rgba(120, 170, 255, .22) 0%, rgba(80, 140, 240, .13) 30%, rgba(40, 90, 200, .06) 60%, transparent 100%);
    border: 6px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(30px)
}

.bg-orb-para-quem::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15), rgba(180, 210, 255, .08), transparent 70%)
}

.bg-orb-para-quem::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .4);
    mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%)
}

.bg-orb-planos {
    position: absolute;
    width: 1316px;
    height: 1316px;
    bottom: -800px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100%;
    background: radial-gradient(circle at 35% 40%, rgba(120, 170, 255, .22) 0%, rgba(80, 140, 240, .13) 30%, rgba(40, 90, 200, .06) 60%, transparent 100%);
    border: 6px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(30px)
}

.bg-orb-planos::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15), rgba(180, 210, 255, .08), transparent 70%)
}

.bg-orb-planos::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .4);
    mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%)
}

.bg-orb-contato-right {
    position: absolute;
    width: 900px;
    height: 900px;
    right: -615px;
    bottom: 50%;
    transform: translateY(50%);
    border-radius: 100%;
    background: radial-gradient(circle at 35% 40%, rgba(120, 170, 255, .22) 0%, rgba(80, 140, 240, .13) 30%, rgba(40, 90, 200, .06) 60%, transparent 100%);
    border: 4px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(30px);
}

.bg-orb-contato-right::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15), rgba(180, 210, 255, .08), transparent 70%)
}

.bg-orb-contato-right::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .4);
    mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%)
}

.bg-orb-contato-left {
    position: absolute;
    width: 900px;
    height: 900px;
    left: -615px;
    bottom: 50%;
    transform: translateY(50%);
    border-radius: 100%;
    background: radial-gradient(circle at 35% 40%, rgba(120, 170, 255, .22) 0%, rgba(80, 140, 240, .13) 30%, rgba(40, 90, 200, .06) 60%, transparent 100%);
    border: 4px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(30px);
}

.bg-orb-contato-left::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15), rgba(180, 210, 255, .08), transparent 70%)
}

.bg-orb-contato-left::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .4);
    mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, transparent 10%, white 50%, transparent 90%)
}

.bg-group {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1);
}

.bg-group--visible {
    opacity: 1;
}

.bg-group--dark {
    background: var(--bg-section-dark);
}

.bg-group--features {
    background: var(--bg-section-dark);
}

.bg-group--eco {
    background: #0f1729;
}

.bg-group--para-quem {
    background: var(--bg-section-dark);
}

.bg-group--planos {
    background: var(--color-gray-soft);
}

.bg-group--contato {
    background: var(--bg-section-dark);
}


/* ── PROBLEMA REAL ─────────────────────────────────────────── */
.problema-real {
    position: relative;
    padding: 200px 0 120px;
    background: transparent;
    overflow: hidden;
    height: 100vh;
}

.problema-real__header {
    text-align: center;
    margin-bottom: 60px
}

.problema-real__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 48px;
    border-radius: 999px;
    background: #a5d3ff41;
    color: var(--text-white);
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.problema-real__title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    font-weight: 400;
    color: var(--text-white);
    margin-bottom: 14px
}

.problema-real__title strong {
    font-weight: 600
}

.problema-real__title .grad {
    background: var(--gradient-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.problema-real__subtitle {
    font-size: 1.33rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--text-white)
}

.problema-real__grid {
    display: grid;
    grid-template-columns: repeat(4, 278px);
    gap: 10px;
}

.problema-card {
    background: transparent;
    border-radius: 20px;
    padding: 50px 15px 30px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 0 1px rgba(110, 168, 255, .15),
        0 20px 50px -20px rgba(58, 130, 255, .5);
    border-color: rgba(110, 168, 255, .45);
    position: relative;
    min-height: 306px;
    transition: transform var(--transition), box-shadow var(--transition);
    text-align: center
}

.problema-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15px;
    width: 90%;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: var(--gradient-light)
}

.problema-card:hover {
    transform: translateY(-4px);
}

.problema-card__top {
    display: block
}

.problema-card__number {
    font-size: clamp(2.6rem, 4vw, 2.7rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.04em;
    margin-bottom: 20px;
    background: var(--gradient-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.problema-card__text {
    font-size: 1.1rem;
    line-height: 1.18;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 18px
}

.problema-card__text strong {
    text-decoration: underline;
    font-weight: 700;
    background: var(--gradient-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.problema-card__desc {
    font-size: 0.9rem;
    line-height: 1.2;
    color: var(--text-white)
}

.problema-real__footer-title {
    font-size: 1.05rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--text-white);
    text-align: center;
    margin-top: 35px;
}


/* ── INTEGRAÇÕES ───────────────────────────────────────────── */
.integracoes {
    position: relative;
    padding: 180px 0 120px;
    background: transparent;
    overflow: hidden;
    height: 100vh;
}

.integracoes__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
    position: relative;
    z-index: 1
}

.integracoes__title {
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.02;
    font-weight: 300;
    color: var(--text-white);
    letter-spacing: -.03em;
    margin-bottom: 18px;
    text-align: center;

}

.integracoes__title strong {
    font-weight: 700;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.integracoes__text {
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 300;
    color: rgba(255, 255, 255, .78);
    max-width: 555px;
    text-align: center;
}

.integracoes__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 470px;
    position: relative
}

.integracoes-diagrama {
    position: relative;
    width: 400px;
    height: 400px
}

.integracoes-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 155px;
    height: 155px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-white);
    z-index: 3
}

.integracoes-centro__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1
}

.integracoes-centro__logo img {
    height: 35px !important
}

.orbita {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    opacity: 1
}

.orbita--1 {
    transform: rotate(-40deg) scaleX(.55) scaleY(1.30)
}

.orbita--2 {
    transform: rotate(90deg) scaleX(.55) scaleY(1.30)
}

.orbita--3 {
    transform: rotate(40deg) scaleX(.55) scaleY(1.30)
}

.integracao-item {
    position: absolute;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(17, 24, 39, .20);
    z-index: 4
}

.integracao-item img {
    width: 40px;
    height: 30px;
    object-fit: contain;
    display: block
}

.integracao-item span {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-mid);
    line-height: 1;
    text-transform: lowercase
}

.integracao-item--1 {
    top: 35px;
    left: 50%;
    transform: translateX(-50%)
}

.integracao-item--2 {
    top: 90px;
    right: 160px
}

.integracao-item--3 {
    top: 120px;
    right: 10px
}

.integracao-item--4 {
    top: 220px;
    right: 55px
}

.integracao-item--5 {
    bottom: 120px;
    right: 10px
}

.integracao-item--6 {
    bottom: 95px;
    right: 160px
}

.integracao-item--7 {
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%)
}

.integracao-item--8 {
    bottom: 95px;
    left: 160px
}

.integracao-item--9 {
    bottom: 120px;
    left: 10px
}

.integracao-item--10 {
    bottom: 220px;
    left: 55px
}

.integracao-item--11 {
    top: 120px;
    left: 10px
}

.integracao-item--12 {
    top: 90px;
    left: 160px
}


/* ── ECOSSISTEMA ───────────────────────────────────────────── */
.ecossistema {
    position: relative;
    padding: 150px 0 65px;
    background: transparent;
    overflow: hidden;
    height: 100vh;
}

.ecossistema__header {
    text-align: center;
    margin: 0 auto 70px
}

.ecossistema__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 48px;
    border-radius: 999px;
    background: #a5d3ff41;
    color: var(--text-white);
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.ecossistema__title {
    font-size: clamp(2.1rem, 4vw, 3.3rem);
    line-height: 1.08;
    font-weight: 400;
    color: var(--text-white);
    margin-bottom: 20px;
}

.ecossistema__title .grad {
    background: var(--gradient-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.ecossistema__subtitle {
    font-size: 1.4rem;
    line-height: 1.1;
    font-weight: 300;
    color: var(--text-white);
    margin: 0 auto
}

.ecossistema__subtitle strong {
    font-weight: 700;
    color: var(--text-white)
}

.ecossistema__flow {
    display: grid;
    grid-template-columns: repeat(4, 240px);
    gap: 42px;
    align-items: start;
    position: relative;
    padding-top: 56px;
    padding-bottom: 80px;
    justify-content: center
}

.ecossistema-card-wrap {
    position: relative;
    height: 100%
}

/* dot de conexão no topo de cada card */
.ecossistema-card-wrap::after {
    content: "";
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gradient-secondary);
    box-shadow: 0 0 0 4px rgba(115, 225, 233, .25);
    z-index: 1
}

/* linha do centro deste card até o centro do próximo (cobre 100% do card + gap) */
.ecossistema-card-wrap:not(:last-child)::before {
    content: "";
    position: absolute;
    top: -42px;
    left: 50%;
    width: calc(100% + 42px);
    height: 2px;
    background: var(--gradient-accent);
}

.ecossistema-card {
    min-height: 255px;
    border-radius: 22px;
    padding: 18px 21px;
    color: var(--color-gray-light);
    background: transparent;
    border-color: rgba(110, 168, 255, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 0 1px rgba(110, 168, 255, .15),
        0 20px 50px -20px rgba(58, 130, 255, .5);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative
}

/* linha vertical do dot até o topo do card */
.ecossistema-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 2px;
    height: 42px;
    background: var(--gradient-accent)
}

.ecossistema-card__step {
    font-size: .78rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .95;
    margin-bottom: 18px
}

.ecossistema-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 1.6rem;
    padding: 8px;
    backdrop-filter: blur(4px);
}

.ecossistema-card__title {
    font-size: 1.5rem;
    line-height: 1.02;
    font-weight: 700;
    margin-bottom: 16px;
}

.ecossistema-card__title img {
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto
}

.ecossistema-card__desc {
    font-size: 0.95rem;
    line-height: 1.12;
    font-weight: 400;
    max-width: 220px;
    margin: 0 auto
}

.ecossistema__bar {
    background: var(--gradient-primary);
    padding: 8px 0px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.ecossistema__bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px
}

.ecossistema__bar-text {
    font-size: 1rem;
    line-height: 1;
    font-weight: 500;
    color: var(--text-white);
    text-align: center
}

.ecossistema__bar-text strong {
    font-weight: 700
}

.ecossistema__bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--gradient-primary);
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition)
}

.ecossistema__bar-btn:hover {
    opacity: .92;
    transform: translateY(-1px)
}


/* ── PARA QUEM ─────────────────────────────────────────────── */
.para-quem {
    position: relative;
    overflow: hidden;
    background: var(--gradient-purple-blue-v);
    padding: 80px 0 80px;
    padding-top: 120px !important
}

.para-quem .container {
    position: relative;
    z-index: 2
}

.para-quem__header {
    text-align: center;
    margin-bottom: 20px
}

.para-quem__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: var(--text-white);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px
}

.para-quem__icon {
    width: 28px;
    height: 28px;
    margin: 0 auto 10px;
    color: var(--text-blue);
    display: flex;
    align-items: center;
    justify-content: center
}

.para-quem__icon svg {
    width: 100%;
    height: 100%;
    display: block
}

.para-quem__title {
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    line-height: 1.1;
    font-weight: 300;
    color: var(--text-white);
    letter-spacing: -.03em;
    margin: 0 auto 4px
}

.para-quem__title strong {
    font-weight: 700;
    color: var(--color-blue-light)
}

.para-quem__tabs {
    margin: 16px auto 0
}

.para-quem__tab-list {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    position: relative
}

.para-quem__tab {
    appearance: none;
    border: none;
    border-bottom: none;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    font-size: .95rem;
    font-weight: 500;
    padding: 8px 26px 10px;
    cursor: pointer;
    position: relative;
    transition: color .2s ease;
    letter-spacing: .01em;
}

.para-quem__tab:hover {
    color: var(--text-white)
}

.para-quem__tab.is-active {
    color: var(--color-blue-light);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(166, 217, 255, .4);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

.para-quem__tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    border-radius: 999px;
    background: var(--gradient-blue)
}

.para-quem__panels {
    margin-top: 20px;
    position: relative
}

.para-quem__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease
}

.para-quem__panel.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto
}

/* ── Para quem: layout principal ── */
.para-quem__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
}

/* ── Coluna esquerda ── */
.para-quem__left-title {
    font-size: .9rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
}

.para-quem__benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* card → linha compacta */
.para-quem-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: background .15s ease;
}

/* linha icon + título */
.para-quem-card div {
    display: flex;
    align-items: center;
    gap: 10px
}

.para-quem-card__icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(165, 211, 255, .15);
    border: 1px solid rgba(165, 211, 255, .22);
    display: block;
    flex-shrink: 0
}

.para-quem-card__title {
    font-size: .88rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-white);
}

.para-quem-card__desc {
    font-size: .74rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .55);
    padding-left: 42px
}

/* ── Coluna direita ── */
.para-quem__right {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* imagem do sistema */
.para-quem-lead {
    border-radius: 12px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 40px 0 rgba(10, 0, 60, .5), 0 0 0 1px rgba(255, 255, 255, .1);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(255, 255, 255, .04)
}

.para-quem-lead img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block
}

/* depoimento */



/* ── POR QUE CONFIAR ───────────────────────────────────────── */
.por-que-confiar {
    position: relative;
    padding: 120px 0;
    background: transparent;
    overflow: hidden
}

.por-que-confiar__topo {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 45px;
    align-items: center;
    margin-bottom: 85px;
}

.por-que-confiar__texto {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.por-que-confiar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 48px;
    border-radius: 999px;
    background: #a5d3ff41;
    color: var(--text-white);
    font-size: 17px;
    height: 40px;
    font-weight: 400;
    text-transform: uppercase;
    width: max-content;
}

.por-que-confiar__editorial {
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1.1;
    font-weight: 400;
    color: var(--text-white)
}

.por-que-confiar__editorial .grad {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700
}

.por-que-confiar__editorial .grad-2 {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700
}

.por-que-confiar__desc {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-white);
    font-weight: 400;
    letter-spacing: 1px
}

.por-que-confiar__desc strong {
    font-weight: 700;
    color: var(--text-white)
}

.por-que-confiar__stat-anos {
    background: var(--gradient-vertical);
    border-radius: 18px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 200px;
}

.por-que-confiar__stat-numero {
    font-size: clamp(3.8rem, 5vw, 5.5rem);
    font-weight: 500;
    line-height: 1;
    color: var(--text-white);
    margin-bottom: 10px
}

.por-que-confiar__stat-label {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-white);
    line-height: 1
}

.por-que-confiar__stat-presenca {
    background: var(--gradient-vertical);
    border-radius: 18px;
    padding: 22px 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    box-shadow: 0 14px 36px rgba(80, 99, 217, .22)
}

.por-que-confiar__mapa-img {
    width: 110px;
    height: auto;
    opacity: .85
}

.por-que-confiar__presenca-texto {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.por-que-confiar__presenca-titulo {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-white);
    line-height: 1
}

.por-que-confiar__presenca-desc {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-white);
    line-height: 1
}

.por-que-confiar__depoimentos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .por-que-confiar__depoimentos {
        display: block;
    }
}

.depoimento-card {
    background: var(--text-white);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(17, 24, 39, .06);
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition)
}

.depoimento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover)
}

.depoimento-card__pendente {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-mid);
    text-align: start;
    margin-bottom: 22px
}

.depoimento-card__autor {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    align-items: center
}

.depoimento-card__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-blue-light);
    flex-shrink: 0
}

.depoimento-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.depoimento-card__nome {
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 600;
    color: var(--text-blue);
    margin-bottom: 8px
}

.depoimento-card__cargo {
    font-size: 0.9rem;
    line-height: 1;
    color: var(--text-mid)
}


/* ── PLANOS ─────────────────────────────────────────────────── */
.planos {
    position: relative;
    padding: 110px 0 110px;
    background: transparent;
    overflow: hidden
}

.planos__header {
    text-align: center;
    margin-bottom: 70px
}

.planos__title {
    font-size: clamp(2rem, 3vw, 3.3rem);
    line-height: 1.08;
    font-weight: 400;
    color: var(--text-white);
    margin-bottom: 28px;
    letter-spacing: -.03em
}

.planos__title strong {
    font-weight: 700
}

.planos__title .grad {
    background: var(--gradient-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.planos__toggle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.planos__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 0 1px rgba(110, 168, 255, .15),
        0 20px 50px -20px rgba(58, 130, 255, .5);
    border-color: rgba(110, 168, 255, .45);
    border-radius: 6px;
    gap: 0
}

.planos__toggle-btn {
    min-width: 100px;
    height: 35px;
    border: none;
    background: #ffffff29;
    color: #ffffff82;
    font-size: 1.25rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    z-index: 2;
    padding: 0 10px
}

.planos__toggle-btn:hover {
    background: #ffffff5e;
    color: #fff;
}

.planos__toggle-btn.is-active {
    background: var(--gradient-primary);
    color: var(--text-white)
}

.planos__toggle-economia {
    position: absolute;
    left: -120px;
    top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-white);
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap
}

.planos-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    transform: rotate(-6deg);
    font-size: 1.5rem;
    font-family: var(--font-display);
    font-weight: 300
}

.planos__toggle-economia img {
    height: 50px;
    transform: rotate(-100deg);
    position: relative;
    left: 60px;
    top: -20px;
    filter: brightness(5);
}

.planos__grid {
    display: grid;
    grid-template-columns: repeat(4, 265px);
    gap: 20px;
    align-items: start
}

.plano-card {
    position: relative;
    background: transparent;
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 0 1px rgba(110, 168, 255, .15),
        0 20px 50px -20px rgba(58, 130, 255, .5);
    border-color: rgba(110, 168, 255, .45);
    padding: 20px 30px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    overflow: visible
}

.plano-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    width: calc(100% - 20px);
    height: 3px;
    border-radius: 999px;
    background: var(--gradient-light)
}

.plano-card--popular {
    background: var(--gradient-vertical);
    border-color: var(--color-blue-light)
}

.plano-card__popular {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 158px;
    height: 32px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(93, 74, 211, .22)
}

.plano-card__nome {
    text-align: center;
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 24px;
    margin-top: 2px
}

.plano-card__preco {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 26px;
    background: var(--gradient-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plano-card__moeda {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 700;
    background: var(--gradient-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.plano-card__valor {
    font-size: clamp(2.3rem, 4vw, 2.9rem);
    line-height: .9;
    font-weight: 700;
    letter-spacing: -.04em;
    background: var(--gradient-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.plano-card__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 6px;
    background: var(--gradient-primary);
    color: var(--text-white);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 30px;
    transition: var(--transition);
    padding: 10px 16px
}

.plano-card__botao:hover {
    opacity: .92;
    transform: translateY(-1px)
}

.plano-card__lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.plano-card__lista li {
    position: relative;
    padding-left: 20px;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-white)
}

.plano-card__lista li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--color-success);
    color: var(--text-white);
    font-size: .5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center
}

.plano-card__lista strong {
    font-weight: 700;
    color: var(--text-white)
}

#planosGrid .planos__grupo {
    display: contents;
}

@media (max-width: 768px) {
    #planosGrid .planos__grupo {
        display: block;
    }
}

#planosGrid[data-periodo="anual"] .planos__grupo--mensal {
    display: none
}

#planosGrid[data-periodo="mensal"] .planos__grupo--anual {
    display: none
}


/* ── FAQ ────────────────────────────────────────────────────── */
.faq {
    padding: 110px 0 110px;
    background: transparent
}

.faq__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-bottom: 50px
}

.faq__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-info-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-blue);
    font-size: 1.4rem
}

.faq__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--text-blue);
    background: var(--gradient-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.faq__box {
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-gray-light);
    border-radius: 24px;
    padding: 30px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px
}

.faq__item:last-child {
    border-bottom: none
}

.faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-blue);
    text-align: left;
    gap: 20px;
    height: 42px
}

.faq__icon-plus {
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--text-blue);
    transition: transform 0.3s ease;
    flex-shrink: 0
}

.faq__item.active .faq__icon-plus {
    transform: rotate(45deg)
}

.faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease
}

.faq__answer p {
    padding: 5px 0 18px;
    font-size: 0.95rem;
    color: var(--text-mid)
}

.faq__item.active .faq__answer {
    max-height: 200px
}


/* ── CTA DEMO ──────────────────────────────────────────────── */
.cta-demo {
    position: relative;
    overflow: hidden;
    background: transparent;
    padding: 110px 0
}

.cta-demo .container {
    position: relative;
    z-index: 2
}

.cta-demo__inner {
    display: grid;
    grid-template-columns: .95fr .82fr;
    gap: 70px;
    align-items: center
}

.cta-demo__content {
    padding-top: 18px;
    position: relative;
    z-index: 2
}

.cta-demo__title {
    font-size: clamp(2.4rem, 4vw, 4.1rem);
    line-height: 1;
    font-weight: 300;
    color: var(--text-white);
    margin-bottom: 34px
}

.cta-demo__title strong {
    font-weight: 700;
    color: var(--color-blue-light)
}

.cta-demo__desc {
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 300;
    color: var(--text-white);
    margin-bottom: 34px
}

.cta-demo__whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 46px;
    padding: 3px 22px;
    border-radius: 8px;
    background: var(--gradient-primary);
    color: var(--text-white);
    font-size: 1.7rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(26, 61, 30, .18);
    transition: var(--transition)
}

.cta-demo__whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(26, 61, 30, .24)
}

.cta-demo__whatsapp-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    flex-shrink: 0
}

.cta-demo__whatsapp-icon svg {
    width: 100%;
    height: 100%;
    display: block
}

.cta-demo__form-wrap {
    position: relative;
    z-index: 2
}

.cta-demo__form {
    background: var(--text-white);
    border-radius: 18px;
    padding: 36px;
    box-shadow: 0 18px 42px rgba(8, 20, 49, .16)
}

.cta-demo__form-title {
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px
}

.cta-demo__form-subtitle {
    font-size: 0.9rem;
    line-height: 1.25;
    color: var(--color-navy);
    margin-bottom: 26px
}

.cta-demo__field {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 16px
}

.cta-demo__field label {
    font-size: .95rem;
    line-height: 1;
    font-weight: 700;
    color: var(--text-mid)
}

.cta-demo__field input,
.cta-demo__field select {
    width: 100%;
    height: 48px;
    border: 1px solid var(--color-gray-mid);
    border-radius: 8px;
    background: var(--text-white);
    padding: 0 14px;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--text-mid);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition)
}

.cta-demo__field input::placeholder {
    color: var(--color-gray-mid)
}

.cta-demo__field input:focus,
.cta-demo__field select:focus {
    border-color: var(--text-blue);
    box-shadow: 0 0 0 3px rgba(26, 69, 146, .10)
}

.cta-demo__submit {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 8px;
    background: var(--text-blue);
    color: var(--text-white);
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    transition: var(--transition)
}

.cta-demo__submit:hover {
    background: var(--color-navy);
    transform: translateY(-1px)
}

.cta-demo__note {
    text-align: center;
    font-size: .92rem;
    line-height: 1.3;
    color: var(--color-navy);
    margin-top: 14px
}

.cta-demo__orb {
    position: absolute;
    left: -35px;
    bottom: -490px;
    width: 1150px;
    height: 730px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .16);
    background: radial-gradient(circle at 50% 20%, rgba(154, 216, 255, .28) 0%, rgba(116, 188, 255, .18) 28%, rgba(67, 143, 218, .08) 52%, transparent 72%);
    pointer-events: none;
    z-index: 1
}

.cta-demo__orb::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .07)
}

@media (max-width:1400px) {
    .hero__headline {
        font-size: 3.2rem
    }

    .banner-scene {
        width: 460px;
        height: 360px
    }

    .integracoes-diagrama {
        width: 460px;
        height: 460px
    }

    .ecossistema__flow {
        grid-template-columns: repeat(4, 1fr);
        gap: 28px
    }

    .ecossistema-card-wrap:not(:last-child)::before {
        width: calc(100% + 28px)
    }

    .para-quem__content {
        gap: 40px
    }

    .para-quem__title {
        font-size: 2.2rem
    }

    .por-que-confiar__topo {
        padding: 0 30px
    }

}

@media (max-width:1199px) {
    .hero__headline {
        font-size: 2.9rem
    }

    .hero__subline {
        font-size: 1.25rem
    }

    .banner-scene {
        width: 400px;
        height: 310px
    }

    .problema-real__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px
    }

    .integracoes__inner {
        grid-template-columns: 1fr 1fr;
        gap: 30px
    }

    .integracoes__title {
        font-size: 2.6rem
    }

    .integracoes__text {
        font-size: 1.3rem
    }

    .integracoes-diagrama {
        width: 400px;
        height: 400px
    }

    .ecossistema-card {
        min-height: 230px;
        padding: 16px 14px
    }

    .para-quem__title {
        font-size: 2rem
    }

    .para-quem__content {
        gap: 32px
    }

    .para-quem-card {
        padding: 16px 0
    }

    .para-quem__tab {
        font-size: .98rem;
        padding: 10px 24px 12px
    }

    .por-que-confiar__topo {
        grid-template-columns: 0.85fr auto auto;
        gap: 28px;
        padding: 0 20px
    }

    .por-que-confiar__editorial {
        font-size: 2.8rem
    }

    .por-que-confiar__depoimentos {
        gap: 24px
    }

    .planos__grid {
        gap: 14px
    }

    .plano-card {
        padding: 28px 18px
    }

    .plano-card__valor {
        font-size: 2.8rem
    }

    .cta-demo__inner {
        gap: 50px
    }

    .cta-demo__title {
        font-size: 3.2rem
    }
}

@media (max-width:1024px) {
    .hero {
        padding: 50px 0 70px;
        min-height: auto
    }

    .hero__inner {
        gap: 30px
    }

    .hero__headline {
        font-size: 2.5rem
    }

    .hero__subline {
        font-size: 1.1rem
    }

    .banner-scene {
        width: 360px;
        height: 278px
    }

    .hero__content {
        gap: 26px
    }

    .hero__cta-group .btn-primary {
        font-size: 1.3rem;
        padding: 12px 22px
    }

    .trust-item {
        padding: 0 18px;
        font-size: 13px
    }

    .problema-real {
        padding: 90px 0
    }

    .problema-real__header {
        margin-bottom: 60px
    }

    .problema-real__grid {
        gap: 24px
    }

    .integracoes {
        padding: 90px 0
    }

    .integracoes__inner {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center
    }

    .integracoes__content {
        max-width: 600px;
        margin: 0 auto
    }

    .integracoes-diagrama {
        width: 380px;
        height: 380px
    }

    .integracoes-centro__logo img {
        height: 28px !important
    }

    .ecossistema__flow {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px
    }

    .ecossistema-card-wrap::after,
    .ecossistema-card-wrap:not(:last-child)::before {
        display: none
    }

    .para-quem__content {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .para-quem__right {
        align-items: stretch
    }

    .para-quem-lead {
        aspect-ratio: 16 / 7
    }

    .por-que-confiar__topo {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 0;
        margin-bottom: 60px
    }

    .por-que-confiar__texto {
        grid-column: 1 / -1;
        text-align: center;
        align-items: center;
    }

    .por-que-confiar__editorial {
        font-size: 2.4rem
    }

    .por-que-confiar__depoimentos {
        gap: 20px
    }

    .planos__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px
    }

    .cta-demo__inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px
    }

    .cta-demo__title {
        font-size: 2.8rem
    }

}

@media (max-width:991px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
        justify-items: center
    }

    .hero__content {
        align-items: center
    }

    .hero__cta-group {
        flex-direction: column;
        align-items: center;
        gap: 14px
    }

    .hero__visual {
        justify-content: center;
        margin-top: 0
    }

    .banner-scene {
        width: 90%;
        max-width: 440px;
        height: 260px
    }

    .hero__subline {
        font-size: 1.15rem;
        line-height: 1.4
    }

    .integracoes-diagrama {
        width: 340px;
        height: 340px
    }

    .integracao-item {
        width: 46px;
        height: 46px
    }

    .integracao-item img {
        width: 32px;
        height: 24px
    }

    .ecossistema-card-wrap:not(:last-child)::after,
    .ecossistema-card-wrap:not(:last-child)::before {
        display: none
    }

    .para-quem__tab {
        font-size: .95rem;
        padding: 8px 20px 10px
    }

    .por-que-confiar__topo {
        grid-template-columns: 1fr auto
    }

    .por-que-confiar__stat-anos,
    .por-que-confiar__stat-presenca {
        max-width: 400px
    }

    .por-que-confiar__depoimentos {
        grid-template-columns: 1fr 1fr;
        gap: 18px
    }

    .planos__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .cta-demo__inner {
        grid-template-columns: 1fr;
        gap: 36px
    }

}

@media (max-width:768px) {
    .hero {
        padding: 40px 0 60px
    }

    .hero__headline {
        font-size: 2.2rem;
        line-height: 1.05
    }

    .hero__badge {
        font-size: .9rem;
        padding: 7px 16px
    }

    .hero__subline {
        font-size: 1rem;
        line-height: 1.5
    }

    .hero__cta-group {
        flex-direction: column;
        align-items: center;
        gap: 14px
    }

    .hero__cta-group .btn-primary {
        font-size: 1.2rem;
        padding: 13px 24px;
        width: 100%;
        max-width: 320px;
        text-align: center
    }

    .btn-ghost {
        font-size: 1rem;
        width: 100%;
        max-width: 320px;
        text-align: center
    }

    .banner-scene {
        width: 100%;
        max-width: 380px;
        height: 230px
    }

    .trust-item {
        padding: 0 16px;
        font-size: 11px
    }

    .problema-real {
        padding: 70px 0 80px
    }

    .problema-real__header {
        margin-bottom: 50px
    }

    .problema-real__title {
        font-size: 2rem
    }

    .problema-real__subtitle {
        font-size: 1.05rem
    }

    .problema-real__grid {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .problema-card {
        min-height: auto;
        padding: 24px 20px 22px;
        text-align: left
    }

    .problema-card__top {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 11px;
    }

    .problema-card__number {
        flex-shrink: 0;
        font-size: 2.8rem;
        margin-bottom: 0
    }

    .problema-card__text {
        font-size: 1rem;
        line-height: 1;
        margin-bottom: 0
    }

    .problema-card__desc {
        font-size: .88rem;
        line-height: 1.45;
        padding-top: 0
    }

    .integracoes {
        padding: 70px 0
    }

    .integracoes__title {
        font-size: 2rem
    }

    .integracoes__text {
        font-size: 1rem
    }

    .integracoes__visual {
        min-height: auto
    }

    .integracoes-diagrama {
        width: 300px;
        height: 300px
    }

    .integracoes-centro {
        width: 100px;
        height: 100px
    }

    .integracoes-centro__logo img {
        height: 22px !important
    }

    .integracao-item {
        width: 38px;
        height: 38px
    }

    .integracao-item img {
        width: 26px;
        height: 20px
    }

    .ecossistema {
        padding: 70px 0 0
    }

    .ecossistema__header {
        margin-bottom: 40px
    }

    .ecossistema__title {
        font-size: 2rem;
        margin-bottom: 14px
    }

    .ecossistema__subtitle {
        font-size: 1rem;
        line-height: 1.45
    }

    .ecossistema__flow {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding-bottom: 40px
    }

    .ecossistema-card {
        min-height: auto;
        padding: 20px 18px 22px;
        border-radius: 18px
    }

    .ecossistema__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .ecossistema__bar-text {
        font-size: .92rem
    }

    .ecossistema__bar-btn {
        width: 100%;
        text-align: center
    }

    .para-quem {
        padding: 70px 0
    }

    .para-quem__title {
        font-size: 1.85rem
    }

    .para-quem__tab-list {
        flex-wrap: wrap;
        gap: 8px;
        border-bottom: none;
        justify-content: center
    }

    .para-quem__tab {
        padding: 8px 18px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .12);
        font-size: .95rem;
        border: none !important
    }

    .para-quem__tab.is-active::after {
        display: none
    }

    .para-quem__tab.is-active {
        background: rgba(166, 217, 255, .22);
        color: var(--text-white);
        border-radius: 999px !important
    }

    .para-quem__panels {
        margin-top: 24px
    }

    .para-quem__left-title {
        font-size: 1rem;
        margin-bottom: 14px
    }

    .para-quem-card {
        padding: 14px 0
    }

    .para-quem-card__title {
        font-size: .88rem
    }

    .para-quem-card__desc {
        font-size: .76rem;
        line-height: 1.4
    }

    .para-quem-lead {
        aspect-ratio: 16 / 9
    }

    .por-que-confiar {
        padding: 70px 0 80px
    }

    .por-que-confiar__topo {
        gap: 20px;
        padding: 0;
        margin-bottom: 50px
    }

    .por-que-confiar__editorial {
        font-size: 2.2rem
    }

    .por-que-confiar__desc {
        font-size: 1.2rem
    }

    .por-que-confiar__stat-anos,
    .por-que-confiar__stat-presenca {
        min-height: auto;
        padding: 28px 22px;
        max-width: 100%
    }

    .por-que-confiar__stat-numero {
        font-size: 3.5rem
    }

    .por-que-confiar__depoimentos {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .depoimento-card {
        padding: 24px 20px
    }

    .planos {
        padding: 70px 0 80px
    }

    .planos__header {
        margin-bottom: 40px
    }

    .planos__title {
        font-size: 2rem;
        margin-bottom: 22px
    }

    .planos__toggle-wrap {
        align-items: center;
        gap: 60px
    }

    .planos__toggle-economia {
        position: static;
        transform: none
    }

    .planos__grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .plano-card {
        padding: 28px 20px 22px
    }

    .plano-card__popular {
        font-size: .88rem;
        min-width: 140px;
        height: 28px;
        top: -16px
    }

    .plano-card__valor {
        font-size: 2.7rem
    }

    .plano-card__botao {
        font-size: 1rem;
        min-height: 44px;
        margin-bottom: 20px
    }

    .faq {
        padding: 70px 0 80px
    }

    .faq__header {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 30px
    }

    .faq__title {
        font-size: 1.85rem;
        text-align: center
    }

    .faq__box {
        padding: 20px;
        border-radius: 18px
    }

    .faq__question {
        font-size: .95rem;
        height: auto;
        padding: 8px 0
    }

    .faq__icon-plus {
        font-size: 2.2rem
    }

    .cta-demo {
        padding: 70px 0 0
    }

    .cta-demo__title {
        font-size: 2.4rem;
        margin-bottom: 22px
    }

    .cta-demo__desc {
        font-size: 1rem;
        line-height: 1.45;
        margin-bottom: 22px
    }

    .cta-demo__whatsapp {
        width: 100%;
        font-size: 1.1rem;
        padding: 12px 14px;
        border-radius: 999px;
    }

    .cta-demo__form {
        padding: 24px 20px;
        border-radius: 16px
    }

    .cta-demo__form-title {
        font-size: 1.45rem;
        margin-bottom: 10px
    }

    .cta-demo__form-subtitle {
        font-size: .9rem;
        margin-bottom: 20px
    }

    .cta-demo__field input,
    .cta-demo__field select {
        height: 46px;
        font-size: .95rem
    }

    .cta-demo__submit {
        min-height: 50px;
        font-size: 1rem
    }

    .cta-demo__orb {
        width: 480px;
        height: 340px;
        left: -140px;
        bottom: -200px;
        border-width: 2px
    }

    .footer {
        padding: 40px 0 28px
    }

    .para-quem__benefits {
        grid-template-columns: 1fr 1fr;
    }


}

@media (max-width:560px) {
    .hero {
        padding: 40px 0 60px
    }

    .bg-orb-main {
        display: none;
    }

    .hero__headline {
        font-size: 2.1rem;
        line-height: 1.08
    }

    .hero__badge {
        font-size: .8rem;
        padding: 6px 14px
    }

    .hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
        justify-items: center;
    }

    /* Notebook — base, ocupa o centro/direita */
    .bs-notebook {
        width: 100%;
    }

    .trust-bar {
        padding: 15px 0;
        height: 45px;
        margin-top: -45px;
    }

    .hero__subline {
        font-size: .95rem
    }

    .hero__content {
        gap: 20px;
        align-items: center;
    }

    .hero__cta-group .btn-primary {
        font-size: 1.1rem;
        padding: 12px 20px;
        max-width: 100%
    }

    .para-quem__benefits {
        grid-template-columns: 1fr;
    }

    .btn-ghost {
        font-size: .9rem;
        max-width: 100%
    }

    .banner-scene {
        max-width: 100%
    }

    .trust-item {
        padding: 0 12px;
        font-size: 11px
    }

    .problema-real {
        padding: 70px 0 80px
    }

    .problema-real__title {
        font-size: 1.9rem
    }

    .problema-real__badge {
        font-size: .8rem;
        padding: 6px 14px
    }

    .problema-real__header {
        margin-bottom: 20px
    }

    .problema-card__number {
        font-size: 2.4rem
    }

    .problema-card__text {
        font-size: 1.05rem
    }

    .problema-card__desc {
        font-size: .85rem;
        line-height: 1.45;
    }

    .problema-real__footer-title {
        font-size: 0.8rem;
        line-height: 1.45;
        font-weight: 400;
        color: var(--text-white);
        text-align: center;
        margin-top: 21px;
    }

    .integracoes {
        padding: 70px 0 80px
    }

    .integracoes__title {
        font-size: 1.8rem
    }

    .integracoes__text {
        font-size: .95rem
    }

    .integracoes-diagrama {
        width: 280px;
        height: 280px
    }

    .integracoes-centro {
        width: 90px;
        height: 90px
    }

    .integracoes-centro__logo img {
        height: 18px !important
    }

    .integracao-item {
        width: 34px;
        height: 34px
    }

    .integracao-item img {
        width: 22px;
        height: 18px
    }

    .ecossistema {
        padding: 70px 0 0
    }

    .ecossistema__title {
        font-size: 2rem;
        max-width: 260px;
        margin: 0 auto 30px;
    }

    .ecossistema__subtitle {
        font-size: .95rem
    }

    .ecossistema__flow {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 40px
    }

    .ecossistema-card {
        padding: 18px 16px
    }

    .ecossistema-card__title {
        font-size: 1.4rem
    }

    .ecossistema-card__desc {
        font-size: .9rem
    }

    .para-quem {
        padding: 70px 0 80px
    }

    .para-quem__title {
        font-size: 1.75rem
    }

    .para-quem__tab {
        padding: 8px 14px;
        font-size: .9rem
    }

    .para-quem__left-title {
        font-size: .95rem
    }

    .para-quem-card {
        padding: 13px 0
    }

    .para-quem-card__icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 7px
    }

    .para-quem-card__title {
        font-size: .9rem
    }

    .para-quem-card__desc {
        padding-left: 42px
    }

    .para-quem-card__desc {
        font-size: .85rem;
        line-height: 1.45
    }

    .para-quem-lead {
        aspect-ratio: 16 / 9
    }

    .por-que-confiar {
        padding: 70px 0 80px
    }

    .por-que-confiar__editorial {
        font-size: 1.9rem
    }

    .por-que-confiar__desc {
        font-size: 1.05rem
    }

    .por-que-confiar__badge {
        font-size: .82rem
    }

    .por-que-confiar__stat-numero {
        font-size: 3rem
    }

    .por-que-confiar__stat-label {
        font-size: .9rem
    }

    .por-que-confiar__stat-presenca {
        gap: 14px;
        padding: 20px 18px
    }

    .por-que-confiar__mapa-img {
        width: 60px
    }

    .por-que-confiar__presenca-titulo {
        font-size: 2rem
    }

    .por-que-confiar__presenca-desc {
        font-size: 1rem
    }

    .depoimento-card {
        padding: 20px 16px
    }

    .depoimento-card__nome {
        font-size: 1.1rem;
        text-align: start;
    }

    .depoimento-card__cargo {
        font-size: .88rem;
        text-align: start;
    }

    .planos {
        padding: 60px 0 70px
    }

    .planos__title {
        font-size: 1.75rem
    }

    .plano-card {
        padding: 24px 16px 20px
    }

    .plano-card__valor {
        font-size: 2.4rem
    }

    .plano-card__lista li {
        font-size: .9rem
    }

    .faq {
        padding: 70px 0 80px
    }

    .faq__title {
        font-size: 1.6rem
    }

    .faq__question {
        font-size: .88rem;
        gap: 14px
    }

    .faq__icon-plus {
        font-size: 1.9rem
    }

    .faq__box {
        padding: 16px;
        border-radius: 14px
    }

    .cta-demo {
        padding: 70px 0 80px
    }

    .cta-demo__title {
        font-size: 2rem
    }

    .cta-demo__desc {
        font-size: .95rem
    }

    .cta-demo__form {
        padding: 20px 16px;
        border-radius: 14px
    }

    .cta-demo__form-title {
        font-size: 1.3rem
    }

    .cta-demo__whatsapp {
        font-size: 1.1rem;
        padding: 12px 14px;
        border-radius: 999px;
    }

    .cta-demo__field input,
    .cta-demo__field select {
        height: 44px;
        font-size: .92rem
    }

    .cta-demo__submit {
        min-height: 48px;
        font-size: .95rem
    }

    .cta-demo__orb {
        width: 380px;
        height: 280px;
        left: -120px;
        bottom: -160px
    }
}

@media (max-width:440px) {
    .hero__headline {
        font-size: 2.65rem
    }

    .hero__badge {
        font-size: .75rem;
        padding: 6px 12px
    }

    .hero__subline {
        font-size: .9rem;
        line-height: 1.55
    }

    .hero__content {
        gap: 18px
    }

    .hero__cta-group .btn-primary {
        font-size: 1rem;
        padding: 11px 18px
    }

    .btn-ghost {
        font-size: .85rem;
        padding: 8px 14px
    }

    .trust-item {
        padding: 0 10px;
        font-size: 11px
    }

    .problema-real__title {
        font-size: 1.9rem
    }

    .problema-real__subtitle {
        font-size: .9rem
    }

    .problema-card {
        padding: 18px 16px
    }

    .problema-card__number {
        font-size: 2.1rem
    }

    .integracoes-diagrama {
        width: 250px;
        height: 250px
    }

    .integracoes-centro {
        width: 78px;
        height: 78px
    }

    .integracoes-centro__logo img {
        height: 16px !important
    }

    .integracao-item {
        width: 30px;
        height: 30px
    }

    .integracao-item img {
        width: 18px;
        height: 14px
    }

    .ecossistema__subtitle {
        font-size: .9rem;
        line-height: 1.5
    }

    .ecossistema-card {
        padding: 16px 14px;
        border-radius: 14px
    }

    .ecossistema-card__title {
        font-size: 1.25rem
    }

    .para-quem__title {
        font-size: 1.6rem
    }

    .para-quem__badge {
        font-size: .78rem;
        padding: 7px 12px
    }

    .para-quem__tab-list {
        gap: 6px
    }

    .para-quem__tab {
        padding: 7px 12px;
        font-size: .85rem
    }

    .para-quem__left-title {
        font-size: .9rem;
        margin-bottom: 12px
    }

    .para-quem-card {
        padding: 12px 0
    }

    .para-quem-card__icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 9px;
        padding: 7px
    }

    .para-quem-card__title {
        font-size: .88rem
    }

    .para-quem-card__desc {
        font-size: .83rem;
        line-height: 1.4
    }

    .para-quem-lead {
        aspect-ratio: 16 / 9
    }

    .por-que-confiar__editorial {
        font-size: 1.7rem
    }

    .por-que-confiar__stat-numero {
        font-size: 2.6rem
    }

    .por-que-confiar__presenca-titulo {
        font-size: 1.7rem
    }

    .por-que-confiar__presenca-desc {
        font-size: .9rem
    }

    .depoimento-card {
        padding: 18px 14px
    }

    .depoimento-card__autor {
        grid-template-columns: 55px 1fr;
        gap: 14px
    }

    .depoimento-card__avatar {
        width: 55px;
        height: 55px
    }

    .depoimento-card__nome {
        font-size: 1rem;
        margin-bottom: 10px;
        text-align: start;
    }

    .depoimento-card__cargo {
        font-size: .82rem;
        text-align: start;
    }

    .planos__title {
        font-size: 1.6rem
    }

    .plano-card {
        padding: 22px 14px 18px
    }

    .plano-card__valor {
        font-size: 2.1rem
    }

    .plano-card__botao {
        font-size: .95rem;
        min-height: 42px
    }

    .plano-card__lista li {
        font-size: .85rem
    }

    .plano-card__popular {
        font-size: .8rem;
        min-width: 120px;
        height: 26px;
        top: -14px
    }

    .faq__title {
        font-size: 1.45rem
    }

    .faq__question {
        font-size: .83rem;
        gap: 12px
    }

    .faq__icon-plus {
        font-size: 1.7rem
    }

    .faq__box {
        padding: 14px;
        border-radius: 12px;
        gap: 6px
    }

    .cta-demo__title {
        font-size: 1.75rem
    }

    .cta-demo__desc {
        font-size: .9rem
    }

    .cta-demo__form {
        padding: 18px 14px;
        border-radius: 12px
    }

    .cta-demo__form-title {
        font-size: 1.2rem
    }

    .cta-demo__field input,
    .cta-demo__field select {
        height: 42px;
        font-size: .88rem;
        padding: 0 12px
    }

    .cta-demo__field label {
        font-size: .82rem
    }

    .cta-demo__submit {
        min-height: 46px;
        font-size: .9rem
    }

    .cta-demo__note {
        font-size: .78rem
    }

    .cta-demo__orb {
        width: 300px;
        height: 220px;
        left: -100px;
        bottom: -130px
    }
}

@media (max-width:400px) {
    .hero {
        padding: 40px 0 60px
    }

    .hero__headline {
        font-size: 1.9rem;
        letter-spacing: -.01em
    }

    .hero__badge {
        font-size: .7rem;
        padding: 5px 11px
    }

    .hero__subline {
        font-size: .85rem;
        line-height: 1.6
    }

    .hero__content {
        gap: 16px
    }

    .hero__cta-group .btn-primary {
        font-size: .95rem;
        padding: 10px 16px
    }

    .btn-ghost {
        font-size: .82rem;
        padding: 8px 12px
    }

    .trust-item {
        padding: 0 8px;
        font-size: 10px
    }

    .problema-real__header {
        margin-bottom: 15px
    }

    .problema-real__title {
        font-size: 1.9rem
    }

    .problema-real__subtitle {
        font-size: .85rem
    }

    .problema-card {
        padding: 20px 14px 18px
    }

    .problema-card__number {
        font-size: 1.9rem;
        margin-bottom: 14px
    }

    .problema-card__text {
        font-size: .95rem;
        margin-bottom: 12px
    }

    .problema-card__desc {
        font-size: .85rem
    }

    .integracoes-diagrama {
        width: 230px;
        height: 230px
    }

    .integracoes-centro {
        width: 70px;
        height: 70px
    }

    .integracoes-centro__logo img {
        height: 14px !important
    }

    .integracao-item {
        width: 28px;
        height: 28px
    }

    .integracao-item img {
        width: 16px;
        height: 12px
    }

    .ecossistema-card {
        padding: 14px 12px
    }

    .ecossistema-card__title {
        font-size: 1.15rem
    }

    .ecossistema-card__desc {
        font-size: .85rem
    }

    .ecossistema__bar-text {
        font-size: .82rem
    }

    .para-quem__title {
        font-size: 1.45rem
    }

    .para-quem__left-title {
        font-size: .88rem;
        margin-bottom: 10px
    }

    .para-quem-card {
        padding: 11px 0
    }

    .para-quem-card__icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 8px;
        padding: 6px
    }

    .para-quem-card__title {
        font-size: .86rem
    }

    .para-quem-card__desc {
        font-size: .82rem;
        line-height: 1.4
    }

    .para-quem-lead {
        aspect-ratio: 16 / 9
    }


    .por-que-confiar__editorial {
        font-size: 1.55rem
    }

    .por-que-confiar__desc {
        font-size: .95rem;
        letter-spacing: 0
    }

    .por-que-confiar__stat-anos {
        padding: 20px 16px
    }

    .por-que-confiar__stat-numero {
        font-size: 2.4rem
    }

    .por-que-confiar__stat-label {
        font-size: 1rem
    }

    .por-que-confiar__stat-presenca {
        grid-template-columns: 70px 1fr;
        gap: 12px;
        padding: 16px 14px
    }

    .por-que-confiar__presenca-titulo {
        font-size: 1.5rem
    }

    .por-que-confiar__presenca-desc {
        font-size: .85rem
    }

    .depoimento-card {
        padding: 16px 12px
    }

    .depoimento-card__autor {
        grid-template-columns: 48px 1fr;
        gap: 12px
    }

    .depoimento-card__avatar {
        width: 48px;
        height: 48px
    }

    .depoimento-card__nome {
        font-size: .95rem;
        margin-bottom: 8px;
        text-align: start;
    }

    .depoimento-card__cargo {
        font-size: .78rem;
        text-align: start;
    }

    .planos__title {
        font-size: 1.45rem
    }

    .plano-card {
        padding: 20px 12px 16px
    }

    .plano-card__nome {
        font-size: .95rem
    }

    .plano-card__valor {
        font-size: 1.9rem
    }

    .plano-card__moeda {
        font-size: 1.3rem
    }

    .plano-card__botao {
        font-size: .88rem;
        min-height: 40px;
        margin-bottom: 16px
    }

    .plano-card__lista li {
        font-size: .82rem
    }

    .faq__title {
        font-size: 1.3rem
    }

    .faq__question {
        font-size: .8rem;
        gap: 10px
    }

    .faq__icon-plus {
        font-size: 1.5rem
    }

    .faq__box {
        padding: 12px
    }

    .faq__answer p {
        font-size: .82rem
    }

    .cta-demo__title {
        font-size: 1.6rem
    }

    .cta-demo__desc {
        font-size: .85rem
    }

    .cta-demo__whatsapp {
        font-size: 1.1rem;
        padding: 12px 14px;
        border-radius: 999px;
    }

    .cta-demo__form {
        padding: 16px 12px
    }

    .cta-demo__form-title {
        font-size: 1.1rem
    }

    .cta-demo__form-subtitle {
        font-size: .82rem
    }

    .cta-demo__field {
        gap: 6px;
        margin-bottom: 12px
    }

    .cta-demo__field label {
        font-size: .78rem
    }

    .cta-demo__field input,
    .cta-demo__field select {
        height: 40px;
        font-size: .85rem;
        padding: 0 10px
    }

    .cta-demo__submit {
        min-height: 44px;
        font-size: .88rem
    }

    .cta-demo__note {
        font-size: .75rem
    }

    .cta-demo__orb {
        width: 260px;
        height: 190px;
        left: -90px;
        bottom: -110px
    }

}

/* ══════════════════════════════════════════════
   RESPONSIVE FIXES — correções gerais de layout,
   fonts, espaçamentos e overflow
══════════════════════════════════════════════ */

/* Evita que o hero fique muito alto em tablets sem fullPage */
@media (max-width: 1024px) {
    .hero {
        min-height: unset;
    }

    /* Features accordion: painel à direita ocupa largura toda */
}

/* 768px — Hero single-column bem centralizado */
@media (max-width: 768px) {
    .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .hero__content {
        align-items: center;
    }

    /* Garante que o subline não quebre mal em mobile */
    .hero__subline br {
        display: none;
    }

    /* Banner scene: altura auto para manter proporção */
    .banner-scene {
        height: auto;
        min-height: unset;
    }

    /* Accordion: evita overflow no texto da descrição */
    /* Problema real: garante que o grid não estoure */
    .problema-real__grid {
        justify-items: center;
    }

    /* Integracoes: diagrama centralizado */
    .integracoes__visual {
        display: flex;
        justify-content: center;
    }

}

/* ══════════════════════════════════════════════
   FA MOBILE STACK — cards combinados (só mobile)
══════════════════════════════════════════════ */
.fa-mobile-stack {
    display: none;
}

@media (max-width: 768px) {
    .fa-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 24px 0 0;
    }

    .fa-mobile-card {
        background: var(--color-gray-light);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
        padding: 20px 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .fa-mobile-card__header {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: center;
    }

    .fa-mobile-card__icon {
        width: 44px;
        height: 44px;
        object-fit: contain;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .fa-mobile-card__label {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-gray-dark);
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .fa-mobile-card__screen {
        border-radius: 10px;
        overflow: hidden;
        background: #f1f5f9;
    }

    .fa-mobile-card__screen img {
        width: 100%;
        height: auto;
        display: block;
    }

    .fa-mobile-card__title {
        font-size: 1.35rem;
        font-weight: 400;
        line-height: 1.15;
        color: var(--text-dark);
        margin: 0;
        text-align: center;
    }

    .fa-mobile-card__title strong {
        font-weight: 700;
        color: var(--color-gray-dark);
    }

    .fa-mobile-card__list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .fa-mobile-card__list li {
        font-size: 0.8rem;
        line-height: 1.4;
        color: var(--text-mid);
        padding-left: 22px;
        position: relative;
    }

    .fa-mobile-card__list li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 2px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--color-blue-bright);
        color: #fff;
        font-size: .5rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════
   FEATURES ACCORDION — OCULTO NO MOBILE (≤ 768px)
   Substituído pelos fa-mobile-card combinados
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .fa-carousel-controls {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════
   ECOSSISTEMA — TIMELINE VERTICAL MOBILE (≤ 768px)
   Linha e dots na esquerda, cards empilhados
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ecossistema {
        min-height: 100vh;
    }

    /* Bar oculto no mobile */
    .ecossistema__bar {
        display: none;
    }

    /* Flow vira coluna, espaço à esquerda para linha */
    .ecossistema__flow {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-top: 16px;
        padding-bottom: 40px;
        padding-left: 40px;
        position: relative;
    }

    /* Linha vertical contínua na esquerda */
    .ecossistema__flow::before {
        content: "";
        position: absolute;
        left: 13px;
        top: 80px;
        bottom: 100px;
        width: 2px;
        background: var(--gradient-accent);
    }

    /* Mata todos os pseudo-elementos originais do card-wrap */
    .ecossistema-card-wrap::after,
    .ecossistema-card-wrap::before,
    .ecossistema-card-wrap:not(:last-child)::before {
        display: none !important;
    }

    /* Card: grid — ícone e título na linha 1, descrição na linha 2 */
    .ecossistema-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 8px;
        align-items: center;
        text-align: left;
        padding: 18px 20px;
        min-height: unset;
        border-radius: 16px;
        overflow: visible;
    }

    /* Mata linha vertical do desktop */
    .ecossistema-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50%, -100%);
        width: 30px;
        height: 2px;
        background: var(--gradient-accent);
        z-index: -1;
    }

    /* Dot à esquerda de cada card */
    .ecossistema-card::after {
        content: "";
        position: absolute;
        left: -33px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--gradient-secondary);
        box-shadow: 0 0 0 4px rgba(115, 225, 233, .25);
        z-index: 1;
    }

    /* Step oculto mas mantém grid limpo */
    .ecossistema-card__step {
        display: none;
    }

    /* Ícone: linha 1, coluna 1 */
    .ecossistema-card__icon {
        grid-column: 1;
        grid-row: 1;
        width: 44px;
        height: 44px;
        margin-bottom: 0;
    }

    /* Título: linha 1, coluna 2 */
    .ecossistema-card__title {
        grid-column: 2;
        grid-row: 1;
        font-size: 1.2rem;
        margin-bottom: 0;
        line-height: 1.2;
    }

    /* Descrição: linha 2, ocupa as 2 colunas */
    .ecossistema-card__desc {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: .9rem;
        line-height: 1.45;
        max-width: none;
        margin: 0;
    }
}

/* 560px — Ajustes finos */
@media (max-width: 560px) {

    /* Features accordion mobile: espaçamento */
    /* Garante que botões CTA sejam clicáveis */
    .hero__cta-group .btn-primary,
    .btn-ghost {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Texto do ecossistema __bar legível */
    .ecossistema__bar-text {
        font-size: .88rem;
        line-height: 1.5;
    }

    /* Depoimento: texto principal legível */
    .para-quem-depoimento__top {
        font-size: .85rem;
        line-height: 1.1;
    }

    /* FAQ: resposta legível */
    .faq__answer p {
        font-size: .88rem;
        line-height: 1.3;
    }

    /* Problema card: número não muito grande */
    .problema-card__number {
        font-size: 2.2rem;
    }

    /* Plano card: lista mais legível */
    .plano-card__lista li {
        font-size: .88rem;
        line-height: 1.5;
    }
}

/* 400px — mínimos absolutos */
@media (max-width: 400px) {

    /* Garante que nenhum texto body fique menor que .8rem */
    .faq__answer p,
    .ecossistema-card__desc,
    .plano-card__lista li {
        font-size: .82rem;
        line-height: 1.5;
    }

    /* Badges: mínimo legível */
    .hero__badge,
    .problema-real__badge,
    .para-quem__badge,
    .ecossistema__badge,
    .por-que-confiar__badge {
        font-size: .72rem;
    }

    /* Accordion: item ativo sem height fixo */
    /* CTA demo: campos de form confortáveis no toque */
    .cta-demo__field input,
    .cta-demo__field select {
        min-height: 40px;
    }

    /* Botão CTA mínimo clicável */
    .cta-demo__submit,
    .plano-card__botao {
        min-height: 44px;
    }
}

/* ══════════════════════════════════════════════
   BG-IMAGE — um bg-group por section
   Desktop e mobile usam o mesmo sistema de transição.
   Para trocar a imagem: substitua a URL.
   Convenção de arquivos sugerida: bg-[nome]-desktop.jpg / bg-[nome]-mobile.jpg
══════════════════════════════════════════════ */

/* Propriedades comuns a todos os bg-groups com imagem */
.bg-group--problema,
.bg-group--integracoes,
.bg-group--features,
.bg-group--eco,
.bg-group--para-quem,
.bg-group--confiar,
.bg-group--perguntas,
.bg-group--planos,
.bg-group--contato {
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Hero — background direto na section */
.hero {
    background-image: url('../img/paginas/home/bg/bg-1.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.hero .bg-orb-main {
    display: none;
}

/* Problema Real */
.bg-group--problema {
    background-image: url('../img/paginas/home/bg/bg-2.jpg');
}

/* Integrações */
.bg-group--integracoes {
    background-image: url('../img/paginas/home/bg/bg-2.jpg');
}

/* Funcionalidades */
.bg-group--features {
    background-image: url('../img/paginas/home/bg/bg-3.jpg');
}

.bg-group--features .bg-orb-features {
    display: none;
}

/* Ecossistema */
.bg-group--eco {
    background-image: url('../img/paginas/home/bg/bg-4.jpg');
}

.bg-group--eco .bg-orb-eco {
    display: none;
}

/* Para Quem */
.bg-group--para-quem {
    background-image: url('../img/paginas/home/bg/bg-5.jpg');
}

.bg-group--para-quem .bg-orb-para-quem {
    display: none;
}

/* Por que Confiar */
.bg-group--confiar {
    background-image: url('../img/paginas/home/bg/bg-3.jpg');
}

/* Planos */
.bg-group--planos {
    background-image: url('../img/paginas/home/bg/bg-2.jpg');
}

.bg-group--planos .bg-orb-planos {
    display: none;
}

/* FAQ */
.bg-group--perguntas {
    background-image: url('../img/paginas/home/bg/bg-3.jpg');
}

/* CTA Demo + Footer */
.bg-group--contato {
    background-image: url('../img/paginas/home/bg/bg-7.jpg');
}

.bg-group--contato .bg-orb-contato-left,
.bg-group--contato .bg-orb-contato-right {
    display: none;
}

/* ── Para quem: label de seção (só mobile) ── */
.para-quem__mobile-section-label {
    display: none;
}

/* ── Para quem: wrapper do carrossel ── */
.para-quem__benefits-wrap {
    position: relative;
}

.para-quem__carousel-dots {
    display: none;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.para-quem__carousel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    transition: background .2s, transform .2s;
    cursor: pointer;
    border: none;
    padding: 0;
}

.para-quem__carousel-dots .dot.is-active {
    background: var(--color-blue-light);
    transform: scale(1.25);
}

/* Setas do carrossel */
.para-quem__arrow {
    display: none;
    position: absolute;
    top: calc(50% - 10px);
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background .2s, opacity .2s;
    backdrop-filter: blur(6px);
}

.para-quem__arrow svg {
    width: 18px;
    height: 18px;
    display: block;
}

.para-quem__arrow--prev {
    left: 5px;
}

.para-quem__arrow--next {
    right: 5px;
}

.para-quem__arrow:disabled {
    opacity: .3;
    cursor: default;
}

/* ── Generic: carousel label (só mobile) ── */
.carousel-mobile-label {
    display: none;
}

/* ── Generic: wrapper do carrossel ── */
.carousel-wrap {
    display: contents;
}

.carousel-inner {
    display: contents;
}

/* Preservar grid de depoimentos no desktop */
.carousel-inner.por-que-confiar__depoimentos {
    display: grid;
}

.carousel-dots {
    display: none;
    justify-content: center;
    gap: 6px;
    margin: 12px 0;
}

.carousel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    transition: background .2s, transform .2s;
    cursor: pointer;
    border: none;
    padding: 0;
}

.carousel-dots .dot.is-active {
    background: var(--color-blue-light);
    transform: scale(1.25);
}

/* Setas do carrossel */
@media (max-width: 768px) {

    /* Ocultar tabs e mostrar todos os panels */
    .para-quem__tabs {
        display: none !important;
    }

    .para-quem__panel {
        position: relative !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: block !important;
        text-align: center;
    }

    .para-quem__panel+.para-quem__panel {
        margin-top: 48px;
        padding-top: 40px;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    /* Label do perfil */
    .para-quem__mobile-section-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 5px 22px;
        border-radius: 999px;
        background: rgba(166, 217, 255, .18);
        border: 1px solid rgba(166, 217, 255, .35);
        color: var(--color-blue-light);
        font-size: .85rem;
        font-weight: 600;
        letter-spacing: .06em;
        margin-bottom: 20px;
    }

    /* Cards: carrossel horizontal */
    .para-quem__benefits-wrap {
        position: relative;
        margin: 0 -20px;
        /* anula o padding do content para ir full-width */
        left: 50%;
        width: 100vw;
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
    }

    .para-quem__benefits {
        --pq-card-width: min(428px, calc(100vw - 136px));
        --pq-card-gap: 18px;
        --pq-index: 0;
        display: flex !important;
        flex-direction: row !important;
        overflow: visible;
        scroll-snap-type: none;
        -webkit-overflow-scrolling: touch;
        gap: var(--pq-card-gap);
        width: max-content;
        padding: 6px 0 2px;
        transform: translateX(calc((100vw - var(--pq-card-width)) / 2 - (var(--pq-index) * (var(--pq-card-width) + var(--pq-card-gap)))));
        transition: transform .32s ease;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .para-quem__benefits::-webkit-scrollbar {
        display: none;
    }

    .para-quem-card {
        flex: 0 0 var(--pq-card-width);
        min-height: 112px;
        scroll-snap-align: none;
        background: #fff;
        border: none;
        border-bottom: none;
        border-radius: 14px;
        padding: 16px 28px 16px 30px;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
    }

    .para-quem-card__title {
        color: #1f5bb1;
        font-size: 1rem;
        line-height: 1.15;
        text-align: start;
    }

    .para-quem-card__desc {
        color: #485065;
        padding-left: 46px;
        font-size: .94rem;
        line-height: 1.1;
        margin-top: 2px;
    }

    .para-quem-card div {
        align-items: center;
        gap: 12px;
    }

    .para-quem-card .para-quem-card__icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        background: rgba(40, 142, 205, .12);
        border-color: rgba(40, 142, 205, .2);
    }

    /* Dots do carrossel */
    .para-quem__carousel-dots {
        display: flex;
    }

    /* Setas do carrossel */
    .para-quem__arrow {
        display: flex;
        top: 50%;
        width: 50px;
        height: 50px;
        background: #fff;
        border: 3px solid #9ed7ff;
        color: #288ecd;
        box-shadow: 0 10px 24px rgba(10, 22, 48, .18);
    }

    .para-quem__arrow svg {
        width: 24px;
        height: 24px;
    }

    .para-quem__arrow--prev {
        left: 22px;
    }

    .para-quem__arrow--next {
        right: 22px;
    }

    .para-quem__arrow:disabled {
        opacity: .45;
    }

}

@media (min-width: 1141px) {
    .carousel-arrow,
    .para-quem__arrow {
        display: none !important;
    }
}

@media (max-width: 1140px) {

    /* Label do perfil */
    .carousel-mobile-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 5px 22px;
        border-radius: 999px;
        background: rgba(166, 217, 255, .18);
        border: 1px solid rgba(166, 217, 255, .35);
        color: var(--color-blue-light);
        font-size: .85rem;
        font-weight: 600;
        letter-spacing: .06em;
        margin-bottom: 20px;
    }

    /* Cards: carrossel horizontal */
    .carousel-wrap {
        display: block;
        position: relative;
        margin: 0 -20px;
        /* anula o padding do content para ir full-width */
        left: 50%;
        width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
        overflow: hidden;
    }

    .carousel-inner {
        --carousel-card-width: min(428px, calc(100vw - 60px));
        --carousel-card-gap: 18px;
        --carousel-index: 0;
        display: flex !important;
        flex-direction: row !important;
        overflow: visible;
        scroll-snap-type: none;
        -webkit-overflow-scrolling: touch;
        gap: var(--carousel-card-gap);
        width: max-content;
        padding: 20px 0 6px !important;
        transform: translateX(calc((100vw - var(--carousel-card-width)) / 2 - (var(--carousel-index) * (var(--carousel-card-width) + var(--carousel-card-gap)))));
        transition: transform .32s ease;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .carousel-inner::-webkit-scrollbar {
        display: none;
    }

    .carousel-card {
        flex: 0 0 var(--carousel-card-width);
        min-height: 112px;
        scroll-snap-align: none;
        border-radius: 14px;
        padding: 16px 28px 16px 30px;
        transition: transform .32s ease;
    }

    /* Estilo específico para cards brancos (como Para Quem e Depoimentos) */
    .carousel-card--light {
        background: #fff;
        border: none;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
    }

    /* Dots do carrossel */
    .carousel-dots {
        display: flex;
    }

    /* Setas do carrossel */
    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 30;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid rgba(110, 168, 255, .45);
        background: rgba(255, 255, 255, .12);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .2s, border-color .2s;
        backdrop-filter: blur(6px);
    }

    .carousel-arrow svg {
        width: 20px;
        height: 20px;
        pointer-events: none;
    }

    .carousel-arrow--prev { left: 8px; }
    .carousel-arrow--next { right: 8px; }

    .carousel-arrow:hover {
        background: rgba(255, 255, 255, .22);
        border-color: rgba(255, 255, 255, .6);
    }

    /* Reordenar elementos: imagem → título → depoimento → cards */
    .para-quem__content {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
    }

    .para-quem__left,
    .para-quem__right {
        display: contents;
    }

    .para-quem-lead {
        order: 1;
    }

    .para-quem__left-title {
        order: 2;
    }

    .depoimento-card {
        order: 3;
    }

    .para-quem__benefits-wrap {
        order: 4;
    }

    .para-quem-lead {
        aspect-ratio: 16 / 9;
        display: block;
    }
}

/* ── Mobile: trocar imagens por versões mobile ──
   Descomente e aponte para o arquivo correto.     */
@media (max-width: 768px) {
    .hero {
        background-image: url('../img/paginas/home/bg/bg-1-mobile.jpg');
    }

    .bg-group--problema {
        background-image: url('../img/paginas/home/bg/bg-2-mobile.jpg');
    }

    .bg-group--integracoes {
        background-image: url('../img/paginas/home/bg/bg-2-mobile.jpg');
    }

    .bg-group--features {
        background-image: url('../img/paginas/home/bg/bg-3-mobile.jpg');
    }

    .bg-group--eco {
        background-image: url('../img/paginas/home/bg/bg-4-mobile.jpg');
    }

    .bg-group--para-quem {
        background-image: url('../img/paginas/home/bg/bg-5-mobile.jpg');
    }

    .bg-group--confiar {
        background-image: url('../img/paginas/home/bg/bg-6-mobile.jpg');
    }

    .bg-group--planos {
        background-image: url('../img/paginas/home/bg/bg-3-mobile.jpg');
    }

    .bg-group--perguntas {
        background-image: url('../img/paginas/home/bg/bg-2-mobile.jpg');
    }

    .bg-group--contato {
        background-image: url('../img/paginas/home/bg/bg-9-mobile.jpg');
    }
}

@media (max-width: 768px) {
    .para-quem__benefits-wrap {
        left: 0% !important;
        width: 100vw !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .para-quem__benefits {
        --pq-card-width: min(428px, calc(100vw - 80px));
        --pq-card-gap: 18px;
        display: flex !important;
        grid-template-columns: none !important;
        gap: var(--pq-card-gap) !important;
        width: max-content !important;
        padding: 6px 0 2px !important;
        overflow: visible !important;
        transform: translateX(calc((100vw - var(--pq-card-width)) / 2 - (var(--pq-index, 0) * (var(--pq-card-width) + var(--pq-card-gap))))) !important;
        transition: transform .32s ease !important;
    }

    .para-quem-card {
        flex: 0 0 var(--pq-card-width) !important;
        width: var(--pq-card-width) !important;
        min-height: 112px !important;
        padding: 16px 26px 16px 26px !important;
        border-radius: 14px !important;
    }

    .para-quem-card__desc {
        padding-left: 46px !important;
        text-align: start;
    }

    .para-quem__arrow {
        display: flex !important;
        z-index: 30 !important;
    }

    .cta-demo__content {
        text-align: center;
    }

    .carousel-card {
        flex: 0 0 var(--carousel-card-width) !important;
        width: var(--carousel-card-width) !important;
        min-height: 112px !important;
        padding: 16px 26px 16px 26px !important;
        border-radius: 14px !important;
    }

    /* Manter estilos específicos para os cards de Para Quem */
    .para-quem-card__title {
        color: #1f5bb1;
        font-size: 1rem;
        line-height: 1.15;
        text-align: start;
    }

    .para-quem-card__desc {
        color: #485065;
        padding-left: 46px !important;
        font-size: .94rem;
        line-height: 1.1;
        margin-top: 2px;
        text-align: start;
    }

    .para-quem-card div {
        align-items: center;
        gap: 12px;
    }

    .para-quem-card .para-quem-card__icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        background: rgba(40, 142, 205, .12);
        border-color: rgba(40, 142, 205, .2);
    }
}

/* ══════════════════════════════════════════════
   FEAT-MODERN — Funcionalidades modernizadas
══════════════════════════════════════════════ */

/* --- Section wrapper --- */

/* ── FUNCIONALIDADES (feat-modern) ─────────────────────────── */
.feat-modern {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    isolation: isolate;
}

/* --- Background --- */
.feat-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 600px at 78% -10%, rgba(58, 130, 255, .20), transparent 60%),
        radial-gradient(900px 700px at -10% 30%, rgba(70, 200, 255, .08), transparent 60%),
        radial-gradient(900px 900px at 50% 110%, rgba(120, 90, 255, .09), transparent 60%),
        linear-gradient(180deg, #04070d 0%, #060b16 40%, #04070d 100%);
    z-index: 0;
}

.feat-bg__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(1100px 650px at 50% 30%, black 35%, transparent 75%);
    mask-image: radial-gradient(1100px 650px at 50% 30%, black 35%, transparent 75%);
}

.feat-bg__noise {
    position: absolute;
    inset: 0;
    opacity: .45;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.feat-bg__blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.feat-bg__blob--tr {
    width: 520px;
    height: 520px;
    top: -110px;
    right: -130px;
    background: radial-gradient(closest-side, rgba(58, 130, 255, .50), transparent);
    opacity: .55;
}

.feat-bg__blob--bl {
    width: 440px;
    height: 440px;
    bottom: -150px;
    left: -110px;
    background: radial-gradient(closest-side, rgba(120, 90, 255, .40), transparent);
    opacity: .42;
}

.feat-bg__blob--mid {
    width: 340px;
    height: 340px;
    top: 38%;
    left: 44%;
    background: radial-gradient(closest-side, rgba(70, 200, 255, .26), transparent);
    opacity: .32;
}

/* --- Container override --- */
.feat-modern__inner {
    position: relative;
    z-index: 1;
}

/* --- Two-column grid --- */
.feat-layout {
    display: grid;
    grid-template-columns: minmax(0, 380px) 1fr;
    gap: 28px;
    align-items: start;
}

/* --- Module cards (left) --- */
.feat-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.feat-card {
    position: relative;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 16px;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 40px -20px rgba(0, 0, 0, .45);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s, border-color .25s, box-shadow .25s;
    overflow: visible;
}

.feat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(110, 168, 255, .20);
}

.feat-card.is-active {
    padding: 18px 20px;
    background: transparent;
    border-color: rgba(110, 168, 255, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 0 1px rgba(110, 168, 255, .15),
        0 20px 50px -20px rgba(58, 130, 255, .5);
}

/* accent bar */
.feat-card__bar {
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(110, 168, 255, 0), rgba(110, 168, 255, 1), rgba(110, 168, 255, 0));
    opacity: 0;
    transition: opacity .25s;
}

.feat-card.is-active .feat-card__bar {
    opacity: 1;
}

/* icon + label row */
.feat-card__row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.feat-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgb(255 255 255 / 78%), rgb(255 255 255 / 62%));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
    overflow: hidden;
    padding: 8px;
}

.feat-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feat-card:hover .feat-card__icon,
.feat-card.is-active .feat-card__icon {
    transform: translateY(-1px) scale(1.04);
    width: 44px;
    height: 44px;
    background: linear-gradient(180deg, rgb(255 255 255 / 78%), rgb(255 255 255 / 62%));
    box-shadow: 0 0 0 1px rgba(110, 168, 255, .30), 0 0 20px rgba(58, 130, 255, .35);
}

.feat-card__label {
    flex: 1;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e9eef7;
    font-family: var(--font-primary);
    line-height: 1.2;
}

/* pulse dot — only when active */
.feat-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6ea8ff;
    opacity: 0;
    transition: opacity .25s;
    position: relative;
}

.feat-card__dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    box-shadow: 0 0 0 0 #6ea8ff;
    animation: feat-pulse 2.2s ease-out infinite;
}

@keyframes feat-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(110, 168, 255, .6);
        opacity: .6;
    }

    70% {
        box-shadow: 0 0 0 9px transparent;
        opacity: 0;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
        opacity: 0;
    }
}

.feat-card.is-active .feat-card__dot {
    opacity: 1;
}

/* chevron */
.feat-card__chev {
    color: rgba(255, 255, 255, .30);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .25s, transform .25s;
}

.feat-card:hover .feat-card__chev,
.feat-card.is-active .feat-card__chev {
    opacity: 1;
    transform: translateX(0);
}

/* expandable description */
.feat-card__desc {
    display: block;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--text-white);
    font-family: var(--font-primary);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease, opacity .35s ease, margin-top .35s ease;
    margin-top: 0;
    pointer-events: none;
}

.feat-card.is-active .feat-card__desc {
    max-height: 120px;
    opacity: 1;
    margin-top: 12px;
}

/* --- Right panel --- */
.feat-stage {
    position: relative;
}

.feat-stage__glow {
    position: absolute;
    inset: -20px;
    border-radius: 28px;
    pointer-events: none;
    background: radial-gradient(60% 60% at 50% 0%, rgba(58, 130, 255, .28), transparent 70%);
    filter: blur(30px);
    opacity: .5;
}

.feat-panel {
    display: none;
    animation: feat-panel-in .5s cubic-bezier(.2, .7, .2, 1) both;
    position: relative;
    min-width: 0;
}

.feat-panel.is-active {
    display: block;
}

@keyframes feat-panel-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.996);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.feat-panel__glass {
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .014));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 0 0 1px rgba(255, 255, 255, .04),
        0 30px 60px -30px rgba(0, 0, 0, .55);
    overflow: hidden;
}

/* screenshot */
.feat-panel__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(180deg, rgba(8, 14, 28, .6), rgba(8, 14, 28, .2));
    overflow: hidden;
}

.feat-panel__screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.02) contrast(1.01);
    display: block;
    background: rgba(0, 0, 0, 0.2);
}

.feat-panel__fade-top {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 40px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 14, 28, .55), transparent);
}

.feat-panel__fade-bot {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 64px;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(8, 14, 28, .85), transparent);
}

/* story below screenshot */
.feat-panel__story {
    padding: 24px 28px 28px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.feat-panel__title {
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #e9eef7;
    font-family: var(--font-primary);
    margin: 0 0 20px;
    background: linear-gradient(180deg, #fff 0%, #cdd6ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feat-panel__title em {
    font-style: italic;
    font-weight: 500;
    background: linear-gradient(120deg, #9cc1ff 0%, #6ea8ff 35%, #c9b6ff 70%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feat-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

.feat-panel__list li {
    font-size: .84375rem;
    line-height: 1.4;
    color: #d1d9e8;
    font-family: var(--font-primary);
    padding-left: 22px;
    position: relative;
}

.feat-panel__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(160deg, #6ea8ff, #3a82ff 65%, #2358d6);
    box-shadow: 0 0 0 1px rgba(110, 168, 255, .35), 0 4px 12px -4px rgba(58, 130, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .30);
    color: #fff;
    font-size: .5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* AI chip */
.feat-chip {
    position: absolute;
    bottom: -14px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .014));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 40px -10px rgba(58, 130, 255, .40);
    font-size: .71875rem;
    color: #d1d9e8;
    font-family: var(--font-primary);
    white-space: nowrap;
}

.feat-chip svg {
    flex-shrink: 0;
}

.feat-chip__dots {
    display: flex;
    gap: 3px;
    align-items: center;
}

.feat-chip__dots span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #9cc1ff;
    animation: feat-blink 1.4s ease-in-out infinite;
}

.feat-chip__dots span:nth-child(2) {
    animation-delay: .15s;
}

.feat-chip__dots span:nth-child(3) {
    animation-delay: .30s;
}

@keyframes feat-blink {

    0%,
    100% {
        opacity: .3;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@media (max-width: 1100px) and (min-width: 769px) {
    .feat-layout {
        grid-template-columns: minmax(0, 320px) 1fr;
        gap: 20px;
    }
}

/* --- Mobile stacked cards --- */
.feat-mobile-stack {
    display: none;
}

@media (max-width: 768px) {
    .feat-modern {
        padding: 60px 0;
    }

    .feat-layout {
        display: none;
    }

    .feat-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }

    .feat-mobile-card {
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .014));
        border: 1px solid rgba(255, 255, 255, .09);
        box-shadow: 0 20px 60px rgba(0, 0, 0, .40);
        padding: 20px 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .feat-mobile-card__header {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: center;
    }

    .feat-mobile-card__icon {
        width: 40px;
        height: 40px;
        object-fit: contain;
        border-radius: 10px;
        flex-shrink: 0;
        padding: 6px;
        background: linear-gradient(180deg, rgb(255 255 255 / 52%), rgb(255 255 255 / 59%));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    }

    .feat-mobile-card__label {
        font-size: 1rem;
        font-weight: 700;
        color: #e9eef7;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-family: var(--font-primary);
    }

    .feat-mobile-card__screen {
        border-radius: 10px;
        overflow: hidden;
        background: rgba(8, 14, 28, .6);
    }

    .feat-mobile-card__screen img {
        width: 100%;
        height: auto;
        display: block;
    }

    .feat-mobile-card__title {
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.18;
        color: #e9eef7;
        margin: 0;
        text-align: center;
        font-family: var(--font-primary);
        background: linear-gradient(180deg, #fff, #cdd6ea);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .feat-mobile-card__title em {
        font-style: italic;
        background: linear-gradient(120deg, #9cc1ff, #6ea8ff 40%, #c9b6ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .feat-mobile-card__list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .feat-mobile-card__list li {
        font-size: .8125rem;
        line-height: 1.4;
        color: #a8b4c8;
        font-family: var(--font-primary);
        padding-left: 22px;
        position: relative;
    }

    .feat-mobile-card__list li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 1px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: linear-gradient(160deg, #6ea8ff, #3a82ff 65%, #2358d6);
        color: #fff;
        font-size: .5rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── BREAKPOINT LAPTOP — 901px a 1470px (Mac 1470×956,
   Windows 1920×1080 em 125% → 1536px e 150% → 1280px) ── */

/* ── 1470px: ajusta fontes grandes para Macs com tela nativa 1470px ── */
@media (max-width: 1470px) and (min-width: 1401px) {
    .hero__headline        { font-size: clamp(2.6rem, 2.8vw, 3.5rem) }
    .integracoes__title    { font-size: clamp(2.2rem, 2.4vw, 3rem) }
    .por-que-confiar__editorial { font-size: clamp(2.6rem, 2.8vw, 3.4rem) }
    .cta-demo__title       { font-size: clamp(2.6rem, 2.8vw, 3.4rem) }

    .banner-scene {
        width: 430px;
        height: 335px
    }
    .integracoes-diagrama {
        width: 430px;
        height: 430px
    }
}

/* ── AJUSTES POR ALTURA DE VIEWPORT (max-height) ───────────────
   Mantém fullPage ativo e comprime o conteúdo.
   Cobre: 956px (Mac 1470), 864px (1920×1080@125%),
          768px (1366×768), 614px (1366×768@125% zoom)
   ─────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   VARIÁVEIS DE TIPOGRAFIA — SISTEMA DE ESCALA POR ALTURA
   ──────────────────────────────────────────────────────────
   Padrão (desktop ≥ 901px de altura):
     --fs-title  → títulos h2 de todas as seções
     --fs-sub    → subtítulos / leads
     --fs-badge  → badges / labels de seção
     --fs-body   → texto de card / depoimento / FAQ

   Os valores mudam nos @media (max-height) abaixo.
   Aplicados de uma vez em todos os seletores logo após.
   ════════════════════════════════════════════════════════════ */
:root {
    --fs-title : clamp(2rem, 4vw, 3.3rem);
    --fs-sub   : clamp(1rem, 1.4vw, 1.4rem);
    --fs-badge : 17px;
    --fs-body  : 1rem;
}

/* Nível 1 — ≤ 900px de altura (Mac 1470×956, 1920×1080@125% OS) */
@media (max-height: 900px) and (min-width: 901px) {
    :root {
        --fs-title : clamp(1.9rem, 2.3vw, 2.6rem);
        --fs-sub   : clamp(.9rem, 1.1vw, 1.1rem);
        --fs-badge : 13px;
        --fs-body  : .88rem;
    }
}

/* Nível 2 — ≤ 768px de altura (1366×768 nativo, 1920×1080@125% zoom) */
@media (max-height: 768px) and (min-width: 901px) {
    :root {
        --fs-title : clamp(1.6rem, 2vw, 2.2rem);
        --fs-sub   : clamp(.82rem, 1vw, 1rem);
        --fs-badge : 12px;
        --fs-body  : .83rem;
    }
}

/* Nível 3 — ≤ 650px de altura (1366×768@125% zoom → 614px CSS) */
@media (max-height: 650px) and (min-width: 901px) {
    :root {
        --fs-title : clamp(1.35rem, 1.8vw, 1.9rem);
        --fs-sub   : clamp(.75rem, .9vw, .9rem);
        --fs-badge : 11px;
        --fs-body  : .78rem;
    }
}

/* ── Aplica as variáveis a todos os títulos de seção de uma vez ── */
.hero__headline,
.problema-real__title,
.integracoes__title,
.ecossistema__title,
.para-quem__title,
.por-que-confiar__editorial,
.planos__title,
.faq__title,
.cta-demo__title {
    font-size: var(--fs-title) !important;
}

.hero__subline,
.problema-real__subtitle,
.integracoes__text,
.ecossistema__subtitle,
.para-quem__subtitle,
.planos__subtitle,
.faq__subtitle,
.cta-demo__subtitle {
    font-size: var(--fs-sub) !important;
}

.ecossistema__badge,
.problema-real__badge,
.integracoes__badge,
.para-quem__badge,
.planos__badge,
.faq__badge,
.cta-demo__badge {
    font-size: var(--fs-badge) !important;
}


/* ── NÍVEL 1: espaçamentos ≤ 900px de altura ── */
@media (max-height: 900px) and (min-width: 901px) {
    #fullpage .section:not(.footer-section),
    #fullpage .fp-section:not(.footer-section) { padding-top: 80px !important }

    .hero                         { padding-bottom: 60px }
    .hero__inner                  { gap: 40px }
    .hero__content                { gap: 22px }
    .hero__cta-group              { gap: 14px }
    .integracoes-diagrama         { width: 360px; height: 360px }

    .problema-real                { padding: 55px 0 }
    .problema-real__header        { margin-bottom: 30px }
    .problema-real__grid          { gap: 20px }
    .problema-real__card          { padding: 20px 18px }

    .integracoes                  { padding: 55px 0 }
    .integracoes__inner           { gap: 28px }

    .feat-modern                  { padding: 70px 0 }
    .feat-nav                     { gap: 7px }
    .feat-panel__story            { padding: 18px 22px 22px }
    .feat-panel__title            { font-size: 1.15rem; margin-bottom: 12px }
    .feat-panel__list li          { font-size: var(--fs-body) }
    .feat-layout                  { gap: 22px; grid-template-columns: minmax(0, 400px) 1fr }

    .ecossistema                  { padding: 80px 0 50px }
    .ecossistema__header          { margin-bottom: 28px }
    .ecossistema__badge           { padding: 5px 32px; margin-bottom: 12px }
    .ecossistema__flow            { gap: 22px }
    .ecossistema-card-wrap:not(:last-child)::before {
        width: calc(100% + 24px);
    }
    .ecossistema-card             { min-height: 185px; padding: 14px }
    .ecossistema-card__icon       { width: 44px; height: 44px; margin-bottom: 10px }
    .ecossistema-card__title      { font-size: 1.05rem; margin-bottom: 8px }
    .ecossistema-card__desc       { font-size: var(--fs-body) }
    .ecossistema-card__step       { margin-bottom: 10px }
    .ecossistema__bar-text        { font-size: var(--fs-body) }
    .ecossistema__bar-btn         { font-size: var(--fs-body) }

    .para-quem__content           { gap: 28px }

    .por-que-confiar__topo        { margin-bottom: 32px }
    .por-que-confiar__depoimentos { gap: 16px }
    .depoimento-card              { padding: 20px 16px }
    .depoimento-card__texto       { font-size: var(--fs-body) }

    .plano-card                   { padding: 20px 14px }
    .plano-card__valor            { font-size: clamp(1.9rem, 2.1vw, 2.4rem) }

    .faq__list                    { gap: 10px }
    .faq__question                { font-size: var(--fs-body) }

    .cta-demo__inner              { gap: 40px }
}

/* ── NÍVEL 2: espaçamentos ≤ 768px de altura ── */
@media (max-height: 768px) and (min-width: 901px) {
    #fullpage .section:not(.footer-section),
    #fullpage .fp-section:not(.footer-section) { padding-top: 60px !important }

    .hero                         { padding-bottom: 44px }
    .hero__inner                  { gap: 30px }
    .hero__content                { gap: 16px }
    .hero__cta-group              { gap: 10px }
    .hero__cta-group .btn-primary { font-size: 1.05rem; padding: 10px 18px }
    .banner-scene                 { width: 500px; height: 340px }
    .integracoes-diagrama         { width: 300px; height: 300px }

    .problema-real                { padding: 38px 0 }
    .problema-real__header        { margin-bottom: 22px }
    .problema-real__grid          { gap: 16px }
    .problema-real__card          { padding: 16px 14px }
    .ecossistema-card-wrap:not(:last-child)::before {
        top: -30px;
        width: calc(100% + 24px);
    }
    .integracoes                  { padding: 38px 0 }
    .integracoes__inner           { gap: 22px }

    .feat-modern                  { padding: 55px 0 }
    .feat-nav                     { gap: 5px }
    .feat-card.is-active          { padding: 14px 16px }
    .feat-panel__story            { padding: 14px 18px 18px }
    .feat-panel__title            { font-size: 1rem; margin-bottom: 10px }
    .feat-panel__list             { gap: 5px 18px }
    .feat-panel__list li          { font-size: var(--fs-body) }
    .feat-layout                  { gap: 18px; grid-template-columns: minmax(0, 350px) 1fr }

    .ecossistema                  { padding: 58px 0 45px }
    .ecossistema__header          { margin-bottom: 18px }
    .ecossistema__badge           { padding: 4px 24px; margin-bottom: 8px }
    .ecossistema__flow            {
                                    grid-template-columns: repeat(4, 200px) }
    .ecossistema-card             { min-height: 155px; padding: 12px 10px }
    .ecossistema-card__icon       { width: 36px; height: 36px; margin-bottom: 7px }
    .ecossistema-card__title      { font-size: .95rem; margin-bottom: 6px }
    .ecossistema-card__desc       { font-size: var(--fs-body) }
    .ecossistema-card__step       { font-size: .7rem; margin-bottom: 7px }
    .ecossistema-card::before     { height: 28px }
    .ecossistema-card-wrap::after { top: -36px; width: 11px; height: 11px }
    .ecossistema__bar-text        { font-size: var(--fs-body) }
    .ecossistema__bar-btn         { font-size: var(--fs-body); padding: 5px 12px }

    .para-quem__content           { gap: 22px }

    .por-que-confiar__topo        { margin-bottom: 24px }
    .por-que-confiar__depoimentos { gap: 12px }
    .depoimento-card              { padding: 14px 12px }
    .depoimento-card__texto       { font-size: var(--fs-body) }

    .plano-card                   { padding: 16px 12px }
    .plano-card__valor            { font-size: clamp(1.6rem, 1.9vw, 2.1rem) }
    .plano-card__nome             { font-size: var(--fs-body) }

    .faq__list                    { gap: 8px }
    .faq__question                { font-size: var(--fs-body); padding: 12px 14px }

    .cta-demo__inner              { gap: 28px }
    .cta-demo__list               { gap: 8px }
}

/* ── NÍVEL 3: espaçamentos ≤ 650px de altura ── */
@media (max-height: 650px) and (min-width: 901px) {
    #fullpage .section:not(.footer-section),
    #fullpage .fp-section:not(.footer-section) { padding-top: 50px !important }

    .hero                         { padding-bottom: 36px }
    .hero__badge                  { display: none }
    .hero__inner                  { gap: 22px }
    .hero__content                { gap: 12px }
    .hero__cta-group              { gap: 8px }
    .banner-scene                 { width: 260px; height: 200px }
    .integracoes-diagrama         { width: 260px; height: 260px }

    .problema-real                { padding: 28px 0 }
    .problema-real__header        { margin-bottom: 16px }
    .problema-real__grid          { gap: 12px }
    .problema-real__card          { padding: 12px }

    .integracoes                  { padding: 28px 0 }
    .integracoes__inner           { gap: 16px }

    .feat-modern                  { padding: 42px 0 }
    .feat-nav                     { gap: 4px }
    .feat-card.is-active          { padding: 10px 14px }
    .feat-card__desc              { font-size: var(--fs-body) }
    .feat-panel__story            { padding: 10px 14px 14px }
    .feat-panel__title            { font-size: .9rem; margin-bottom: 7px }
    .feat-panel__list             { gap: 4px 14px }
    .feat-panel__list li          { font-size: var(--fs-body) }
    .feat-layout                  { gap: 14px; grid-template-columns: minmax(0, 400px) 1fr }

    .ecossistema                  { padding: 42px 0 40px }
    .ecossistema__header          { margin-bottom: 12px }
    .ecossistema__badge           { padding: 3px 18px; margin-bottom: 6px }
    .ecossistema__flow            { padding-top: 18px; padding-bottom: 6px; gap: 12px;
                                    grid-template-columns: repeat(4, 165px) }
    .ecossistema-card             { min-height: 125px; padding: 10px 8px }
    .ecossistema-card__icon       { width: 30px; height: 30px; margin-bottom: 5px }
    .ecossistema-card__title      { font-size: .85rem; margin-bottom: 5px }
    .ecossistema-card__desc       { font-size: var(--fs-body) }
    .ecossistema-card__step       { font-size: .62rem; margin-bottom: 5px }
    .ecossistema-card::before     { height: 20px }
    .ecossistema-card-wrap::after { top: -28px; width: 9px; height: 9px }
    .ecossistema__bar-text        { font-size: var(--fs-body) }
    .ecossistema__bar-btn         { font-size: var(--fs-body); padding: 4px 10px }

    .para-quem__content           { gap: 16px }

    .por-que-confiar__topo        { margin-bottom: 16px }
    .por-que-confiar__depoimentos { gap: 10px }
    .depoimento-card              { padding: 12px 10px }
    .depoimento-card__texto       { font-size: var(--fs-body) }

    .plano-card                   { padding: 12px 10px }
    .plano-card__valor            { font-size: clamp(1.35rem, 1.7vw, 1.8rem) }
    .plano-card__nome             { font-size: var(--fs-body) }
    .planos__header               { margin-bottom: 16px }

    .faq__list                    { gap: 6px }
    .faq__question                { font-size: var(--fs-body); padding: 10px 12px }

    .cta-demo__inner              { gap: 20px }
    .cta-demo__list               { gap: 6px }
}