/* ==========================================================
   FILM TECH — LANDING PAGE
   ========================================================== */

:root {
    --bg: #030914;
    --bg-claro: #071321;
    --superficie: #0b1929;
    --card: #0d1d30;
    --card-claro: #112641;

    --borda: #1d3855;
    --borda-azul: #286fc2;

    --azul: #1687ff;
    --azul-claro: #52acff;
    --azul-suave: rgba(22, 135, 255, 0.12);

    --dourado: #f4b400;
    --dourado-claro: #ffda6a;
    --dourado-suave: rgba(244, 180, 0, 0.11);

    --verde: #14c780;

    --texto: #ffffff;
    --texto-suave: #a9bacd;
    --texto-apagado: #71849a;

    --raio: 20px;
    --sombra: 0 24px 70px rgba(0, 0, 0, 0.38);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    min-height: 100vh;

    overflow-x: hidden;

    color: var(--texto);

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(22, 135, 255, 0.13),
            transparent 25%
        ),
        var(--bg);

    font-family:
        Inter,
        Arial,
        sans-serif;
}


body.modal-aberto {
    overflow: hidden;
}


button,
input,
textarea,
select {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


a {
    color: inherit;
}


.landing-container {
    width: min(1180px, calc(100% - 36px));

    margin-inline: auto;
}


/* ==========================================================
   HEADER
   ========================================================== */

.landing-header {
    position: sticky;
    top: 0;
    z-index: 100;

    border-bottom:
        1px solid rgba(40, 83, 126, 0.66);

    background:
        rgba(3, 9, 20, 0.87);

    backdrop-filter:
        blur(18px);
}


.landing-header-conteudo {
    display: grid;
    grid-template-columns:
        minmax(240px, 1fr)
        auto
        minmax(210px, 1fr);

    width: min(1240px, calc(100% - 28px));
    min-height: 76px;

    align-items: center;
    gap: 24px;

    margin: 0 auto;
}


.landing-marca {
    display: inline-flex;
    width: fit-content;

    align-items: center;
    gap: 12px;

    text-decoration: none;
}


.landing-logo {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    object-fit: cover;

    border:
        1px solid rgba(244, 180, 0, 0.72);

    border-radius: 50%;

    box-shadow:
        0 0 24px rgba(22, 135, 255, 0.2),
        0 0 17px rgba(244, 180, 0, 0.11);
}


.landing-marca-texto strong,
.landing-marca-texto small {
    display: block;
}


.landing-marca-texto strong {
    font-size: 18px;
    font-weight: 950;

    letter-spacing: 0.025em;
}


.landing-marca-texto strong em {
    color: var(--azul-claro);
    font-style: normal;
}


.landing-marca-texto small {
    margin-top: 2px;

    color: var(--dourado-claro);

    font-size: 7px;
    font-weight: 850;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.landing-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}


.landing-menu a {
    padding: 9px 12px;

    border-radius: 9px;

    color: #b8c8da;

    font-size: 12px;
    font-weight: 750;

    text-decoration: none;

    transition:
        color 0.18s ease,
        background 0.18s ease;
}


.landing-menu a:hover {
    color: #ffffff;
    background:
        rgba(22, 135, 255, 0.1);
}


.landing-header-acoes {
    display: flex;

    justify-self: end;

    align-items: center;
    gap: 9px;
}


.landing-entrar,
.landing-cta-pequeno {
    display: inline-flex;
    min-height: 42px;

    align-items: center;
    justify-content: center;

    padding: 9px 15px;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 850;

    text-decoration: none;
}


.landing-entrar {
    border: 1px solid var(--borda);

    color: #d5e0ec;
    background:
        rgba(13, 29, 48, 0.72);
}


.landing-cta-pequeno {
    border: 1px solid var(--azul);

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--azul),
            #0c5ec6
        );

    box-shadow:
        0 10px 25px
            rgba(22, 135, 255, 0.22);
}


.landing-menu-botao {
    display: none;

    width: 42px;
    height: 42px;

    place-items: center;

    border: 1px solid var(--borda);
    border-radius: 10px;

    color: #ffffff;
    background: var(--card);

    cursor: pointer;
}


/* ==========================================================
   ELEMENTOS GERAIS
   ========================================================== */

.landing-secao {
    padding: 100px 0;
}


.landing-etiqueta {
    display: inline-flex;
    width: fit-content;

    align-items: center;
    gap: 7px;

    color: var(--azul-claro);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.landing-etiqueta::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--azul);

    box-shadow:
        0 0 10px
            rgba(22, 135, 255, 0.7);
}


.landing-etiqueta.dourada {
    color: var(--dourado-claro);
}


.landing-etiqueta.dourada::before {
    background: var(--dourado);

    box-shadow:
        0 0 10px
            rgba(244, 180, 0, 0.7);
}


.landing-secao-cabecalho {
    max-width: 760px;

    margin: 0 auto 48px;

    text-align: center;
}


.landing-secao-cabecalho .landing-etiqueta {
    margin-inline: auto;
}


.landing-secao-cabecalho h2 {
    margin: 15px 0 13px;

    font-size:
        clamp(
            31px,
            5vw,
            48px
        );

    line-height: 1.08;
    letter-spacing: -0.04em;
}


.landing-secao-cabecalho p {
    margin: 0;

    color: var(--texto-suave);

    font-size: 16px;
    line-height: 1.7;
}


.landing-botao-principal,
.landing-botao-secundario,
.landing-botao-video {
    display: inline-flex;
    min-height: 52px;

    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 12px 22px;

    border-radius: 13px;

    font: inherit;
    font-size: 13px;
    font-weight: 900;

    text-decoration: none;
    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}


.landing-botao-principal {
    border: 1px solid var(--azul);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--azul),
            #0b5fc8
        );

    box-shadow:
        0 14px 32px
            rgba(22, 135, 255, 0.24);
}


.landing-botao-secundario,
.landing-botao-video {
    border: 1px solid var(--borda);

    color: #d8e4f0;

    background:
        rgba(13, 29, 48, 0.72);
}


.landing-botao-principal:hover,
.landing-botao-secundario:hover,
.landing-botao-video:hover {
    transform: translateY(-3px);
    filter: brightness(1.07);
}


/* ==========================================================
   HERO
   ========================================================== */

.landing-hero {
    position: relative;

    min-height: calc(100vh - 76px);

    overflow: hidden;

    padding: 76px 0 35px;

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(22, 135, 255, 0.18),
            transparent 28%
        );
}


.landing-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.35;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 85%
        );

    pointer-events: none;
}


.landing-hero-brilho {
    position: absolute;

    top: -200px;
    left: -120px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        rgba(22, 135, 255, 0.11);

    filter: blur(70px);
}


.landing-hero-grid {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(430px, 0.88fr);

    gap: 70px;
    align-items: center;
}


.landing-hero-texto h1 {
    max-width: 730px;

    margin: 21px 0 21px;

    font-size:
        clamp(
            47px,
            6vw,
            76px
        );

    line-height: 0.99;
    letter-spacing: -0.055em;
}


.landing-hero-texto h1 strong {
    display: block;

    color: var(--azul-claro);
}


.landing-hero-texto > p {
    max-width: 660px;

    margin: 0;

    color: var(--texto-suave);

    font-size: 18px;
    line-height: 1.72;
}


.landing-hero-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 31px;
}


.landing-hero-beneficios {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;

    margin-top: 24px;

    color: #91a7be;

    font-size: 12px;
}


.landing-produto {
    position: relative;

    overflow: hidden;

    border: 1px solid var(--borda-azul);
    border-top-color:
        rgba(244, 180, 0, 0.56);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #0e2238,
            #071421
        );

    box-shadow:
        0 34px 85px rgba(0, 0, 0, 0.48),
        0 0 40px rgba(22, 135, 255, 0.08);

    transform:
        perspective(1100px)
        rotateY(-4deg)
        rotateX(2deg);
}


.landing-produto::after {
    content: "";

    position: absolute;

    right: -110px;
    bottom: -110px;

    width: 320px;
    height: 250px;

    border-radius: 50%;

    background:
        rgba(22, 135, 255, 0.12);

    filter: blur(42px);
}


.landing-produto-topo {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 17px 19px;

    border-bottom:
        1px solid var(--borda);
}


.landing-produto-marca {
    display: flex;
    align-items: center;
    gap: 10px;
}


.landing-produto-marca > span {
    display: grid;

    width: 36px;
    height: 36px;

    place-items: center;

    border: 1px solid var(--dourado);
    border-radius: 50%;

    color: var(--dourado-claro);

    font-size: 11px;
    font-weight: 900;
}


.landing-produto-marca strong,
.landing-produto-marca small {
    display: block;
}


.landing-produto-marca strong {
    font-size: 12px;
}


.landing-produto-marca small {
    margin-top: 2px;

    color: var(--texto-apagado);

    font-size: 8px;
}


.landing-produto-status {
    display: inline-flex;

    padding: 6px 9px;

    border: 1px solid
        rgba(20, 199, 128, 0.32);

    border-radius: 999px;

    color: #6be1ad;
    background:
        rgba(20, 199, 128, 0.07);

    font-size: 9px;
    font-weight: 850;
}


.landing-produto-corpo {
    position: relative;
    z-index: 1;

    padding: 31px 28px;
}


.landing-produto-etiqueta {
    color: var(--azul-claro);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.landing-produto-corpo h2 {
    margin: 9px 0 21px;

    font-size: 27px;
    letter-spacing: -0.035em;
}


.landing-pesquisa-demo {
    display: flex;
    min-height: 57px;

    align-items: center;

    padding: 0 17px;

    border: 1px solid #315473;
    border-radius: 13px;

    color: #ffffff;

    background: #06111e;
}


.landing-texto-digitado {
    font-size: 14px;
}


.landing-cursor {
    width: 1px;
    height: 18px;

    margin-left: 2px;

    background: var(--azul-claro);

    animation:
        landingCursor 0.8s infinite;
}


.landing-produto-corpo > button {
    width: 100%;
    min-height: 49px;

    margin-top: 11px;

    border: 1px solid var(--azul);
    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--azul),
            #0a5dc6
        );

    font-weight: 850;
}


.landing-resultado-demo {
    display: flex;

    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: 18px;
    padding: 16px;

    border: 1px solid var(--borda);
    border-radius: 13px;

    background:
        rgba(13, 29, 48, 0.83);
}


.landing-resultado-demo small,
.landing-resultado-demo strong {
    display: block;
}


.landing-resultado-demo small {
    margin-bottom: 4px;

    color: var(--texto-apagado);

    font-size: 8px;
}


.landing-resultado-demo strong {
    font-size: 12px;
}


.landing-resultado-demo > span {
    color: #76b9ff;

    font-size: 9px;
}


.landing-faixa-confianca {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1px;

    margin-top: 70px;

    overflow: hidden;

    border: 1px solid var(--borda);
    border-radius: 17px;

    background: var(--borda);
}


.landing-faixa-confianca > div {
    padding: 18px 20px;

    background:
        rgba(8, 22, 36, 0.96);
}


.landing-faixa-confianca strong,
.landing-faixa-confianca span {
    display: block;
}


.landing-faixa-confianca strong {
    margin-bottom: 4px;

    font-size: 12px;
}


.landing-faixa-confianca span {
    color: var(--texto-apagado);

    font-size: 10px;
}


/* ==========================================================
   RECURSOS
   ========================================================== */

.landing-recursos {
    background:
        linear-gradient(
            180deg,
            #040b15,
            #06111e
        );
}


.landing-recursos-grade {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 17px;
}


.landing-recurso {
    padding: 26px;

    border: 1px solid var(--borda);
    border-radius: var(--raio);

    background:
        linear-gradient(
            145deg,
            var(--card),
            #081522
        );

    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.2);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}


.landing-recurso:hover {
    transform: translateY(-6px);

    border-color:
        rgba(38, 145, 255, 0.5);
}


.landing-recurso-icone {
    display: grid;

    width: 52px;
    height: 52px;

    place-items: center;

    border-radius: 14px;

    color: var(--azul-claro);
    background: var(--azul-suave);

    font-size: 23px;
}


.landing-recurso-icone.dourado {
    color: var(--dourado-claro);
    background: var(--dourado-suave);
}


.landing-recurso h3 {
    margin: 19px 0 9px;

    font-size: 19px;
}


.landing-recurso p {
    margin: 0;

    color: var(--texto-suave);

    font-size: 13px;
    line-height: 1.65;
}


/* ==========================================================
   DEMONSTRAÇÃO
   ========================================================== */

.landing-demonstracao {
    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(22, 135, 255, 0.11),
            transparent 27%
        ),
        var(--bg);
}


.landing-demonstracao-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(430px, 1.15fr);

    gap: 70px;
    align-items: center;
}


.landing-demonstracao-texto h2 {
    margin: 15px 0 17px;

    font-size:
        clamp(
            35px,
            5vw,
            51px
        );

    line-height: 1.08;
    letter-spacing: -0.045em;
}


.landing-demonstracao-texto p {
    color: var(--texto-suave);

    line-height: 1.7;
}


.landing-demonstracao-texto ul {
    display: grid;
    gap: 11px;

    margin: 25px 0 28px;
    padding: 0;

    list-style: none;
}


.landing-demonstracao-texto li {
    position: relative;

    padding-left: 25px;

    color: #d2dfec;

    font-size: 13px;
}


.landing-demonstracao-texto li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: var(--azul-claro);

    font-weight: 900;
}


.landing-video-capa {
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;

    overflow: hidden;

    border: 1px solid var(--borda-azul);
    border-radius: 24px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #0f2741,
            #071421
        );

    box-shadow: var(--sombra);

    cursor: pointer;
}


.landing-video-interface {
    min-height: 390px;
}


.landing-video-barra {
    display: flex;
    gap: 6px;

    padding: 14px 16px;

    border-bottom:
        1px solid var(--borda);
}


.landing-video-barra span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #29455f;
}


.landing-video-conteudo {
    display: flex;
    min-height: 340px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    background:
        radial-gradient(
            circle at center,
            rgba(22, 135, 255, 0.18),
            transparent 30%
        );
}


.landing-video-play {
    display: grid;

    width: 82px;
    height: 82px;

    place-items: center;

    margin-bottom: 20px;

    border: 1px solid var(--azul-claro);
    border-radius: 50%;

    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--azul),
            #0b5bbd
        );

    box-shadow:
        0 0 38px rgba(22, 135, 255, 0.34);

    font-size: 27px;
}


.landing-video-conteudo strong {
    font-size: 18px;
}


.landing-video-conteudo small {
    margin-top: 7px;

    color: var(--texto-apagado);
}


/* ==========================================================
   CLUBE DE VANTAGENS
   ========================================================== */

.landing-vantagens {
    background:
        linear-gradient(
            180deg,
            #06111e,
            #030914
        );
}


.landing-vantagens-grade {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


.landing-vantagem-fornecedores,
.landing-vantagem-digital {
    min-height: 100%;

    padding: 31px;

    border-radius: 25px;

    box-shadow: var(--sombra);
}


.landing-vantagem-fornecedores {
    display: grid;
    grid-template-columns:
        135px minmax(0, 1fr);

    gap: 28px;
    align-items: center;

    border:
        1px solid
            rgba(244, 180, 0, 0.55);

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(244, 180, 0, 0.15),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #171d28,
            #081522
        );
}


.landing-medalha {
    display: flex;

    width: 115px;
    height: 115px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    border: 2px solid var(--dourado-claro);
    border-radius: 50%;

    color: #2b1b00;

    background:
        radial-gradient(
            circle at 35% 23%,
            #fff0aa,
            #f4c84f 42%,
            #bd7f0b 100%
        );

    box-shadow:
        0 18px 44px
            rgba(244, 180, 0, 0.25);
}


.landing-medalha span {
    font-size: 27px;
}


.landing-medalha strong,
.landing-medalha small {
    color: #2b1b00;

    font-weight: 950;
    text-transform: uppercase;
}


.landing-medalha strong {
    margin-top: 3px;

    font-size: 11px;
}


.landing-medalha small {
    margin-top: 2px;

    font-size: 8px;
    letter-spacing: 0.09em;
}


.landing-vantagem-conteudo > span,
.landing-digital-etiqueta {
    color: var(--dourado-claro);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.landing-vantagem-conteudo h3,
.landing-vantagem-digital h3 {
    margin: 8px 0 5px;

    font-size: 29px;
    letter-spacing: -0.035em;
}


.landing-vantagem-conteudo h4,
.landing-vantagem-digital h4 {
    margin: 0 0 14px;

    color: var(--dourado-claro);

    font-size: 15px;
}


.landing-vantagem-conteudo p,
.landing-vantagem-digital p {
    color: var(--texto-suave);

    font-size: 13px;
    line-height: 1.65;
}


.landing-vantagem-conteudo ul,
.landing-vantagem-digital ul {
    display: grid;
    gap: 9px;

    margin: 20px 0 0;
    padding: 0;

    list-style: none;
}


.landing-vantagem-conteudo li,
.landing-vantagem-digital li {
    position: relative;

    padding-left: 22px;

    color: #d7e3ef;

    font-size: 12px;
}


.landing-vantagem-conteudo li::before,
.landing-vantagem-digital li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: var(--dourado-claro);

    font-weight: 950;
}


.landing-vantagem-digital {
    position: relative;

    overflow: hidden;

    border:
        1px solid
            rgba(44, 148, 255, 0.72);

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(38, 147, 255, 0.23),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #0d2137,
            #071421
        );
}


.landing-digital-topo {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}


.landing-digital-icone {
    display: grid;

    width: 68px;
    height: 68px;

    place-items: center;

    border: 1px solid var(--azul-claro);
    border-radius: 17px;

    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--azul),
            #0b428d
        );

    box-shadow:
        0 15px 35px
            rgba(22, 135, 255, 0.25);

    font-weight: 950;
}


.landing-desconto {
    display: inline-flex;

    min-height: 42px;

    align-items: center;
    justify-content: center;

    padding: 8px 15px;

    border: 1px solid var(--dourado-claro);
    border-radius: 11px;

    color: #271800;

    background:
        linear-gradient(
            135deg,
            #ffe17c,
            #d99b17
        );

    box-shadow:
        0 10px 25px
            rgba(244, 180, 0, 0.23);

    font-size: 16px;
    font-weight: 950;
}


.landing-vantagem-digital h4 {
    color: var(--azul-claro);
}


.landing-vantagem-digital li::before {
    color: var(--azul-claro);
}


.landing-digital-botao {
    width: 100%;
    min-height: 50px;

    margin-top: 24px;

    border: 1px solid var(--azul-claro);
    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--azul),
            #0b5fc6
        );

    font-weight: 900;

    cursor: pointer;
}


/* ==========================================================
   COMO FUNCIONA
   ========================================================== */

.landing-como-funciona {
    background: #050d18;
}


.landing-passos {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.landing-passos article {
    padding: 26px;

    border: 1px solid var(--borda);
    border-radius: var(--raio);

    background:
        linear-gradient(
            145deg,
            var(--card),
            #081522
        );
}


.landing-passos article > span {
    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    border: 1px solid var(--azul);
    border-radius: 13px;

    color: var(--azul-claro);
    background: var(--azul-suave);

    font-size: 12px;
    font-weight: 900;
}


.landing-passos h3 {
    margin: 18px 0 8px;

    font-size: 18px;
}


.landing-passos p {
    margin: 0;

    color: var(--texto-suave);

    font-size: 12px;
    line-height: 1.6;
}


/* ==========================================================
   PLANOS
   ========================================================== */

.landing-planos {
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(22, 135, 255, 0.1),
            transparent 30%
        ),
        var(--bg);
}


.landing-planos-grade {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
    align-items: stretch;
}


.landing-plano {
    position: relative;

    display: flex;
    min-height: 100%;

    flex-direction: column;

    padding: 29px;

    border: 1px solid var(--borda);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            var(--card),
            #081522
        );

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.23);
}


.landing-plano.destaque {
    border-color:
        rgba(244, 180, 0, 0.64);

    background:
        radial-gradient(
            circle at top right,
            rgba(244, 180, 0, 0.1),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #132136,
            #081522
        );

    transform: translateY(-10px);
}


.landing-plano-selo {
    position: absolute;

    top: -14px;
    left: 50%;

    padding: 7px 13px;

    transform: translateX(-50%);

    border: 1px solid var(--dourado-claro);
    border-radius: 999px;

    color: #291a00;
    background:
        linear-gradient(
            135deg,
            #ffe17b,
            #dca019
        );

    font-size: 9px;
    font-weight: 950;

    text-transform: uppercase;
    white-space: nowrap;
}


.landing-plano-etiqueta {
    color: var(--azul-claro);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.landing-plano.destaque
.landing-plano-etiqueta {
    color: var(--dourado-claro);
}


.landing-plano h3 {
    margin: 10px 0 7px;

    font-size: 26px;
}


.landing-plano > p {
    margin: 0;

    color: var(--texto-suave);

    font-size: 13px;
}


.landing-plano ul {
    display: grid;
    gap: 12px;

    margin: 27px 0;
    padding: 0;

    list-style: none;
}


.landing-plano li {
    position: relative;

    padding-left: 24px;

    color: #d5e1ed;

    font-size: 12px;
}


.landing-plano li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: var(--azul-claro);

    font-weight: 950;
}


.landing-plano.destaque li::before {
    color: var(--dourado-claro);
}


.landing-plano-botao {
    display: flex;
    min-height: 49px;

    align-items: center;
    justify-content: center;

    margin-top: auto;

    border: 1px solid var(--borda-azul);
    border-radius: 12px;

    color: #ffffff;
    background:
        rgba(22, 135, 255, 0.08);

    font-size: 12px;
    font-weight: 900;

    text-decoration: none;
}


.landing-plano-botao.principal {
    border-color: var(--dourado-claro);

    color: #281900;
    background:
        linear-gradient(
            135deg,
            #ffe17c,
            #dca019
        );
}


.landing-planos-aviso {
    max-width: 720px;

    margin: 35px auto 0;

    color: var(--texto-apagado);

    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}


/* ==========================================================
   FAQ
   ========================================================== */

.landing-faq {
    background:
        linear-gradient(
            180deg,
            #050d18,
            #030914
        );
}


.landing-faq-container {
    max-width: 900px;
}


.landing-faq-lista {
    display: grid;
    gap: 11px;
}


.landing-faq details {
    border: 1px solid var(--borda);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            var(--card),
            #081522
        );
}


.landing-faq summary {
    position: relative;

    padding: 18px 52px 18px 20px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    list-style: none;
    cursor: pointer;
}


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


.landing-faq summary::after {
    content: "+";

    position: absolute;

    top: 50%;
    right: 19px;

    transform: translateY(-50%);

    color: var(--azul-claro);

    font-size: 22px;
}


.landing-faq details[open]
summary::after {
    content: "−";
}


.landing-faq details p {
    margin: 0;
    padding: 0 20px 19px;

    color: var(--texto-suave);

    font-size: 12px;
    line-height: 1.7;
}


/* ==========================================================
   CTA FINAL
   ========================================================== */

.landing-cta-final {
    padding: 100px 0;

    border-top:
        1px solid var(--borda);

    background:
        radial-gradient(
            circle at center,
            rgba(22, 135, 255, 0.18),
            transparent 35%
        ),
        #040b15;
}


.landing-cta-final-conteudo {
    max-width: 900px;

    text-align: center;
}


.landing-cta-final-conteudo
.landing-etiqueta {
    margin-inline: auto;
}


.landing-cta-final h2 {
    margin: 15px auto;

    font-size:
        clamp(
            36px,
            5vw,
            58px
        );

    line-height: 1.03;
    letter-spacing: -0.05em;
}


.landing-cta-final p {
    max-width: 650px;

    margin: 0 auto 28px;

    color: var(--texto-suave);

    line-height: 1.7;
}


.landing-cta-final-conteudo > div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.landing-footer {
    padding: 60px 0 24px;

    border-top:
        1px solid var(--borda);

    background: #02070e;
}


.landing-footer-grade {
    display: grid;
    grid-template-columns:
        1.6fr repeat(3, 1fr);

    gap: 55px;
}


.landing-footer-grade > div {
    display: grid;
    align-content: start;
    gap: 10px;
}


.landing-footer-grade p {
    max-width: 310px;

    color: var(--texto-apagado);

    font-size: 11px;
    line-height: 1.6;
}


.landing-footer h3 {
    margin: 0 0 8px;

    font-size: 12px;
}


.landing-footer-grade a,
.landing-footer-grade span {
    color: var(--texto-apagado);

    font-size: 11px;
    text-decoration: none;
}


.landing-footer-grade a:hover {
    color: #ffffff;
}


.landing-footer-final {
    display: flex;

    justify-content: space-between;
    gap: 18px;

    margin-top: 45px;
    padding-top: 21px;

    border-top:
        1px solid #12253a;

    color: #5f7288;

    font-size: 10px;
}


/* ==========================================================
   MODAIS
   ========================================================== */

.landing-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
}


.landing-modal-fundo {
    position: absolute;
    inset: 0;

    background:
        rgba(1, 7, 14, 0.84);

    backdrop-filter: blur(8px);
}


.landing-modal-caixa {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(560px, calc(100% - 28px));
    max-height: calc(100vh - 34px);

    overflow-y: auto;

    padding: 33px;

    transform:
        translate(-50%, -50%);

    border: 1px solid var(--borda-azul);
    border-top-color:
        rgba(244, 180, 0, 0.7);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at top right,
            rgba(22, 135, 255, 0.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #10243a,
            #071421
        );

    box-shadow:
        0 32px 90px
            rgba(0, 0, 0, 0.68);
}


.landing-modal-caixa h2 {
    margin: 15px 45px 13px 0;

    font-size: 29px;
}


.landing-modal-caixa > p {
    color: var(--texto-suave);

    line-height: 1.7;
}


.landing-modal-fechar {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 39px;
    height: 39px;

    border: 1px solid var(--borda);
    border-radius: 10px;

    color: #d4dfeb;
    background: #081827;

    font-size: 23px;

    cursor: pointer;
}


.landing-video-placeholder {
    display: flex;
    min-height: 280px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    margin-top: 21px;

    border: 1px solid var(--borda);
    border-radius: 17px;

    background:
        radial-gradient(
            circle at center,
            rgba(22, 135, 255, 0.17),
            transparent 31%
        ),
        #06111e;

    text-align: center;
}


.landing-video-placeholder > span {
    display: grid;

    width: 64px;
    height: 64px;

    place-items: center;

    margin-bottom: 15px;

    border: 1px solid var(--azul-claro);
    border-radius: 50%;

    background: var(--azul);

    font-size: 22px;
}


.landing-video-placeholder strong {
    font-size: 17px;
}


.landing-video-placeholder p {
    max-width: 330px;

    color: var(--texto-apagado);

    font-size: 11px;
    line-height: 1.6;
}


.landing-modal-observacao,
.landing-modal-aviso {
    padding: 12px 14px;

    border: 1px solid
        rgba(244, 180, 0, 0.26);

    border-radius: 11px;

    color: #cdb879 !important;
    background:
        rgba(244, 180, 0, 0.05);

    font-size: 10px;
}


.landing-modal-observacao code {
    color: #ffffff;
}


.landing-modal-beneficios {
    display: grid;
    gap: 11px;

    margin: 22px 0;
    padding: 0;

    list-style: none;
}


.landing-modal-beneficios li {
    position: relative;

    padding-left: 24px;

    color: #d6e2ef;

    font-size: 12px;
}


.landing-modal-beneficios li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: var(--azul-claro);

    font-weight: 950;
}


[hidden] {
    display: none !important;
}


/* ==========================================================
   ANIMAÇÕES
   ========================================================== */

@keyframes landingCursor {
    0%,
    45% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}


/* ==========================================================
   RESPONSIVIDADE
   ========================================================== */

@media (max-width: 1050px) {
    .landing-header-conteudo {
        grid-template-columns:
            auto 1fr auto;

        gap: 14px;
    }

    .landing-marca-texto {
        display: none;
    }

    .landing-menu a {
        padding-inline: 8px;
    }

    .landing-hero-grid,
    .landing-demonstracao-grid {
        gap: 40px;
    }

    .landing-recursos-grade {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 820px) {
    .landing-header-conteudo {
        display: flex;
    }

    .landing-menu-botao {
        display: grid;

        margin-left: auto;
    }

    .landing-menu {
        position: absolute;

        top: 76px;
        right: 10px;
        left: 10px;

        display: none;

        align-items: stretch;
        flex-direction: column;

        padding: 12px;

        border: 1px solid var(--borda);
        border-radius: 0 0 15px 15px;

        background: #071421;

        box-shadow: var(--sombra);
    }

    .landing-menu.aberto {
        display: flex;
    }

    .landing-menu a {
        padding: 12px 14px;
    }

    .landing-entrar {
        display: none;
    }

    .landing-hero {
        padding-top: 55px;
    }

    .landing-hero-grid,
    .landing-demonstracao-grid {
        grid-template-columns: 1fr;
    }

    .landing-produto {
        width: min(650px, 100%);

        margin-inline: auto;

        transform: none;
    }

    .landing-vantagens-grade,
    .landing-planos-grade {
        grid-template-columns: 1fr;
    }

    .landing-plano.destaque {
        transform: none;
    }

    .landing-passos {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .landing-footer-grade {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 620px) {
    .landing-container {
        width: min(100% - 22px, 1180px);
    }

    .landing-header-conteudo {
        width: calc(100% - 14px);
    }

    .landing-logo {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }

    .landing-cta-pequeno {
        display: none;
    }

    .landing-secao {
        padding: 72px 0;
    }

    .landing-hero-texto {
        text-align: center;
    }

    .landing-hero-texto
    .landing-etiqueta {
        margin-inline: auto;
    }

    .landing-hero-texto h1 {
        font-size: 45px;
    }

    .landing-hero-texto > p {
        font-size: 15px;
    }

    .landing-hero-acoes {
        flex-direction: column;
    }

    .landing-hero-acoes > * {
        width: 100%;
    }

    .landing-hero-beneficios {
        justify-content: center;
    }

    .landing-faixa-confianca,
    .landing-recursos-grade,
    .landing-passos,
    .landing-footer-grade {
        grid-template-columns: 1fr;
    }

    .landing-produto-corpo {
        padding: 24px 17px;
    }

    .landing-resultado-demo {
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-video-interface {
        min-height: 290px;
    }

    .landing-video-conteudo {
        min-height: 245px;
    }

    .landing-vantagem-fornecedores {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .landing-medalha {
        margin-inline: auto;
    }

    .landing-vantagem-conteudo ul {
        width: min(310px, 100%);

        margin-inline: auto;

        text-align: left;
    }

    .landing-footer-final {
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-modal-caixa {
        padding: 26px 20px;
    }
}
/* ==========================================================
   PLANOS — PREÇOS E ACABAMENTO COMERCIAL
   ========================================================== */

.landing-planos-grade {
    gap: 24px;
}


.landing-plano {
    overflow: visible;

    padding-top: 34px;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


.landing-plano:hover {
    transform: translateY(-8px);

    border-color:
        rgba(59, 157, 255, 0.68);

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.42),
        0 0 35px rgba(22, 135, 255, 0.08);
}


.landing-plano.destaque:hover {
    transform: translateY(-17px);
}


.landing-plano-promocao {
    position: absolute;
    top: -13px;
    left: 25px;

    display: inline-flex;
    min-height: 28px;

    align-items: center;
    justify-content: center;

    padding: 5px 12px;

    border: 1px solid var(--dourado-claro);
    border-radius: 999px;

    color: #2b1b00;

    background:
        linear-gradient(
            135deg,
            #ffe17b,
            #dca019
        );

    box-shadow:
        0 8px 22px rgba(244, 180, 0, 0.2);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.landing-plano-promocao.azul {
    border-color: var(--azul-claro);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2192ff,
            #0b5dbd
        );

    box-shadow:
        0 8px 22px rgba(22, 135, 255, 0.22);
}


.landing-plano-descricao {
    min-height: 21px;
}


.landing-economia {
    display: inline-flex;
    width: fit-content;

    align-items: center;

    margin-top: 21px;
    padding: 6px 10px;

    border: 1px solid
        rgba(244, 180, 0, 0.36);

    border-radius: 999px;

    color: var(--dourado-claro);

    background:
        rgba(244, 180, 0, 0.07);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.landing-economia.azul {
    border-color:
        rgba(65, 162, 255, 0.38);

    color: #73bbff;

    background:
        rgba(22, 135, 255, 0.08);
}


.landing-preco {
    display: flex;

    align-items: flex-start;
    gap: 5px;

    margin-top: 22px;

    color: #ffffff;
}


.landing-preco-prefixo {
    margin-top: 8px;

    color: #c3d1df;

    font-size: 16px;
    font-weight: 850;
}


.landing-preco strong {
    font-size:
        clamp(
            43px,
            5vw,
            55px
        );

    line-height: 0.95;
    letter-spacing: -0.055em;
}


.landing-plano.destaque
.landing-preco strong {
    color: var(--dourado-claro);

    text-shadow:
        0 0 24px rgba(244, 180, 0, 0.15);
}


.landing-preco-periodo {
    margin: 7px 0 0 !important;

    color: var(--texto-apagado) !important;

    font-size: 10px !important;
    font-weight: 750;
}


.landing-preco-depois,
.landing-preco-parcelado {
    margin: 10px 0 0 !important;

    color: #91a6bc !important;

    font-size: 11px !important;
}


.landing-preco-depois strong,
.landing-preco-parcelado strong {
    color: #ffffff;
}


.landing-economia-anual {
    margin: 14px 0 0 !important;
    padding: 10px 12px;

    border: 1px solid
        rgba(244, 180, 0, 0.28);

    border-radius: 10px;

    color: var(--dourado-claro) !important;

    background:
        rgba(244, 180, 0, 0.05);

    font-size: 10px !important;
    font-weight: 850;
}


.landing-plano ul {
    margin-top: 27px;
}


.landing-plano-botao {
    min-height: 53px;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}


.landing-plano-botao:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);

    box-shadow:
        0 14px 32px rgba(22, 135, 255, 0.22);
}


.landing-plano-botao.principal:hover {
    box-shadow:
        0 16px 36px rgba(244, 180, 0, 0.28);
}


.landing-plano-rodape {
    display: block;

    margin-top: 12px;

    color: #667d94;

    font-size: 9px;
    font-weight: 700;

    text-align: center;
}


.landing-seguranca-planos {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1px;

    margin-top: 38px;

    overflow: hidden;

    border: 1px solid var(--borda);
    border-radius: 16px;

    background: var(--borda);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.2);
}


.landing-seguranca-planos > div {
    display: flex;

    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 78px;

    padding: 15px 20px;

    background:
        linear-gradient(
            145deg,
            #0c1d30,
            #071421
        );
}


.landing-seguranca-planos > div > span {
    display: grid;

    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    place-items: center;

    border: 1px solid
        rgba(51, 153, 255, 0.44);

    border-radius: 10px;

    color: var(--azul-claro);

    background:
        rgba(22, 135, 255, 0.08);

    font-size: 15px;
}


.landing-seguranca-planos p {
    margin: 0;
}


.landing-seguranca-planos strong,
.landing-seguranca-planos small {
    display: block;
}


.landing-seguranca-planos strong {
    color: #ffffff;

    font-size: 11px;
}


.landing-seguranca-planos small {
    margin-top: 3px;

    color: var(--texto-apagado);

    font-size: 9px;
}


@media (max-width: 820px) {
    .landing-plano.destaque:hover {
        transform: translateY(-8px);
    }

    .landing-seguranca-planos {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 620px) {
    .landing-preco strong {
        font-size: 48px;
    }

    .landing-seguranca-planos > div {
        justify-content: flex-start;
    }
}

/* ==========================================================
   PLANOS — PREÇOS E ACABAMENTO COMERCIAL
   ========================================================== */

.landing-planos-grade {
    gap: 24px;
}


.landing-plano {
    overflow: visible;

    padding-top: 34px;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


.landing-plano:hover {
    transform: translateY(-8px);

    border-color:
        rgba(59, 157, 255, 0.68);

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.42),
        0 0 35px rgba(22, 135, 255, 0.08);
}


.landing-plano.destaque:hover {
    transform: translateY(-17px);
}


.landing-plano-promocao {
    position: absolute;
    top: -13px;
    left: 25px;

    display: inline-flex;
    min-height: 28px;

    align-items: center;
    justify-content: center;

    padding: 5px 12px;

    border: 1px solid var(--dourado-claro);
    border-radius: 999px;

    color: #2b1b00;

    background:
        linear-gradient(
            135deg,
            #ffe17b,
            #dca019
        );

    box-shadow:
        0 8px 22px rgba(244, 180, 0, 0.2);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.landing-plano-promocao.azul {
    border-color: var(--azul-claro);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2192ff,
            #0b5dbd
        );

    box-shadow:
        0 8px 22px rgba(22, 135, 255, 0.22);
}


.landing-plano-descricao {
    min-height: 21px;
}


.landing-economia {
    display: inline-flex;
    width: fit-content;

    align-items: center;

    margin-top: 21px;
    padding: 6px 10px;

    border: 1px solid
        rgba(244, 180, 0, 0.36);

    border-radius: 999px;

    color: var(--dourado-claro);

    background:
        rgba(244, 180, 0, 0.07);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.landing-economia.azul {
    border-color:
        rgba(65, 162, 255, 0.38);

    color: #73bbff;

    background:
        rgba(22, 135, 255, 0.08);
}


.landing-preco {
    display: flex;

    align-items: flex-start;
    gap: 5px;

    margin-top: 22px;

    color: #ffffff;
}


.landing-preco-prefixo {
    margin-top: 8px;

    color: #c3d1df;

    font-size: 16px;
    font-weight: 850;
}


.landing-preco strong {
    font-size:
        clamp(
            43px,
            5vw,
            55px
        );

    line-height: 0.95;
    letter-spacing: -0.055em;
}


.landing-plano.destaque
.landing-preco strong {
    color: var(--dourado-claro);

    text-shadow:
        0 0 24px rgba(244, 180, 0, 0.15);
}


.landing-preco-periodo {
    margin: 7px 0 0 !important;

    color: var(--texto-apagado) !important;

    font-size: 10px !important;
    font-weight: 750;
}


.landing-preco-depois,
.landing-preco-parcelado {
    margin: 10px 0 0 !important;

    color: #91a6bc !important;

    font-size: 11px !important;
}


.landing-preco-depois strong,
.landing-preco-parcelado strong {
    color: #ffffff;
}


.landing-economia-anual {
    margin: 14px 0 0 !important;
    padding: 10px 12px;

    border: 1px solid
        rgba(244, 180, 0, 0.28);

    border-radius: 10px;

    color: var(--dourado-claro) !important;

    background:
        rgba(244, 180, 0, 0.05);

    font-size: 10px !important;
    font-weight: 850;
}


.landing-plano ul {
    margin-top: 27px;
}


.landing-plano-botao {
    min-height: 53px;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}


.landing-plano-botao:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);

    box-shadow:
        0 14px 32px rgba(22, 135, 255, 0.22);
}


.landing-plano-botao.principal:hover {
    box-shadow:
        0 16px 36px rgba(244, 180, 0, 0.28);
}


.landing-plano-rodape {
    display: block;

    margin-top: 12px;

    color: #667d94;

    font-size: 9px;
    font-weight: 700;

    text-align: center;
}


.landing-seguranca-planos {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1px;

    margin-top: 38px;

    overflow: hidden;

    border: 1px solid var(--borda);
    border-radius: 16px;

    background: var(--borda);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.2);
}


.landing-seguranca-planos > div {
    display: flex;

    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 78px;

    padding: 15px 20px;

    background:
        linear-gradient(
            145deg,
            #0c1d30,
            #071421
        );
}


.landing-seguranca-planos > div > span {
    display: grid;

    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    place-items: center;

    border: 1px solid
        rgba(51, 153, 255, 0.44);

    border-radius: 10px;

    color: var(--azul-claro);

    background:
        rgba(22, 135, 255, 0.08);

    font-size: 15px;
}


.landing-seguranca-planos p {
    margin: 0;
}


.landing-seguranca-planos strong,
.landing-seguranca-planos small {
    display: block;
}


.landing-seguranca-planos strong {
    color: #ffffff;

    font-size: 11px;
}


.landing-seguranca-planos small {
    margin-top: 3px;

    color: var(--texto-apagado);

    font-size: 9px;
}


@media (max-width: 820px) {
    .landing-plano.destaque:hover {
        transform: translateY(-8px);
    }

    .landing-seguranca-planos {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 620px) {
    .landing-preco strong {
        font-size: 48px;
    }

    .landing-seguranca-planos > div {
        justify-content: flex-start;
    }
}

/* ==========================================================
   WHATSAPP FLUTUANTE
   ========================================================== */

.whatsapp-flutuante {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 16px;

    background: #25D366;
    color: #ffffff;

    text-decoration: none;

    border-radius: 999px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.whatsapp-flutuante:hover {
    transform: translateY(-2px);

    background: #1ebe5d;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.25);
}

.whatsapp-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.16);

    font-size: 20px;
}

.whatsapp-texto {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

.whatsapp-texto strong {
    font-size: 14px;
    font-weight: 700;
}

.whatsapp-texto small {
    margin-top: 3px;

    font-size: 11px;

    opacity: 0.85;
}

@media (max-width: 640px) {
    .whatsapp-flutuante {
        right: 14px;
        bottom: 14px;

        padding: 10px 12px;
    }

    .whatsapp-texto {
        display: none;
    }

    .whatsapp-icone {
        width: 42px;
        height: 42px;

        font-size: 22px;
    }
}


/* ==========================================================
   TEMA CLARO ROXO - LANDING PAGE
   Override final
   ========================================================== */

/* Segunda seção - recursos */
.landing-recursos {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaff 55%,
            #f7f4ff 100%
        ) !important;
}

/* Títulos da seção */
.landing-recursos h2,
.landing-recursos h3 {
    color: #211a35 !important;
}

/* Textos */
.landing-recursos p {
    color: #6f6980 !important;
}

/* Cards dos recursos */
.landing-recurso {
    background: #ffffff !important;
    border: 1px solid #e8e1f5 !important;

    box-shadow:
        0 12px 32px rgba(76, 29, 149, 0.07) !important;
}

/* Etiqueta */
.landing-recursos .landing-etiqueta {
    color: #7c3aed !important;
    background: #f3e8ff !important;
    border-color: #e9d5ff !important;
}

/* Ícones */
.landing-recurso-icone {
    color: #7c3aed !important;
    background: #f3e8ff !important;
}

/* Próxima seção: demonstração */
.landing-demonstracao {
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(124, 58, 237, 0.08),
            transparent 30%
        ),
        #ffffff !important;
}

.landing-demonstracao h2 {
    color: #211a35 !important;
}

.landing-demonstracao p,
.landing-demonstracao-texto li {
    color: #6f6980 !important;
}

.landing-demonstracao-texto li::before {
    color: #7c3aed !important;
}

/* Faixa que ainda estava azul escuro */
.landing-faixa-confianca {
    background: #ffffff !important;
    border-color: #e8e1f5 !important;
}

.landing-faixa-confianca > div {
    background: #ffffff !important;
}

.landing-faixa-confianca strong {
    color: #211a35 !important;
}

.landing-faixa-confianca span {
    color: #746d82 !important;
}


/* ==========================================================
   FILM TECH — TEMA CLARO FINAL
   ========================================================== */

/* COMO FUNCIONA */
.landing-como-funciona,
.landing-funcionamento {
    background: #ffffff !important;
}

.landing-passos {
    background: transparent !important;
}

.landing-passo {
    background: #ffffff !important;
    border: 1px solid #e8e2f5 !important;
    box-shadow: 0 12px 35px rgba(76, 29, 149, 0.08) !important;
}

.landing-passo h3,
.landing-passo strong {
    color: #171426 !important;
}

.landing-passo p,
.landing-passo span {
    color: #667085 !important;
}


/* PLANOS */
.landing-planos {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf8ff 100%
        ) !important;
}

.landing-plano {
    background: #ffffff !important;
    border: 1px solid #e5def2 !important;
    color: #171426 !important;
    box-shadow:
        0 18px 50px rgba(76, 29, 149, 0.08) !important;
}

.landing-plano:hover {
    border-color: #8b5cf6 !important;
    box-shadow:
        0 22px 55px rgba(109, 40, 217, 0.14) !important;
}

.landing-plano h3,
.landing-plano h4,
.landing-plano strong {
    color: #171426 !important;
}

.landing-plano p,
.landing-plano li,
.landing-plano small {
    color: #667085 !important;
}

.landing-preco,
.landing-preco strong {
    color: #171426 !important;
}


/* PLANO EM DESTAQUE */
.landing-plano.destaque {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf7ff 100%
        ) !important;

    border: 2px solid #7c3aed !important;

    box-shadow:
        0 22px 55px rgba(109, 40, 217, 0.16) !important;
}


/* SEGURANÇA ABAIXO DOS PLANOS */
.landing-seguranca-planos {
    background: #e8e2f5 !important;
    border-color: #e8e2f5 !important;

    box-shadow:
        0 14px 35px rgba(76, 29, 149, 0.07) !important;
}

.landing-seguranca-planos > div {
    background: #ffffff !important;
}

.landing-seguranca-planos > div > span {
    color: #7c3aed !important;
    border-color: #ddd0fa !important;
    background: #f4efff !important;
}

.landing-seguranca-planos strong {
    color: #171426 !important;
}

.landing-seguranca-planos small {
    color: #667085 !important;
}


/* FAQ */
.landing-faq {
    background:
        linear-gradient(
            180deg,
            #faf8ff 0%,
            #ffffff 100%
        ) !important;
}

.landing-faq h2,
.landing-faq h3,
.landing-faq strong {
    color: #171426 !important;
}

.landing-faq p {
    color: #667085 !important;
}




/* ==========================================================
   FILM TECH - COMO FUNCIONA PREMIUM
   ========================================================== */

.landing-como-funciona,
.landing-funcionamento {
    position: relative !important;
    overflow: hidden !important;

    padding-top: 72px !important;
    padding-bottom: 78px !important;

    background:
        radial-gradient(
            circle at 10% 40%,
            rgba(124, 58, 237, .06),
            transparent 24%
        ),
        radial-gradient(
            circle at 90% 55%,
            rgba(22, 135, 255, .045),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaff 100%
        ) !important;
}


/* ----------------------------------------------------------
   CABECALHO
   ---------------------------------------------------------- */

.landing-como-funciona .landing-secao-cabecalho,
.landing-funcionamento .landing-secao-cabecalho {
    max-width: 820px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 44px !important;

    text-align: center !important;
}


.landing-como-funciona h2,
.landing-funcionamento h2 {
    color: #171426 !important;

    font-size:
        clamp(
            36px,
            3.8vw,
            52px
        ) !important;

    line-height: 1.04 !important;

    letter-spacing: -.045em !important;
}


.landing-como-funciona .landing-secao-cabecalho p,
.landing-funcionamento .landing-secao-cabecalho p {
    max-width: 690px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    color: #676071 !important;

    font-size: 15px !important;

    line-height: 1.6 !important;
}


/* ----------------------------------------------------------
   GRADE
   ---------------------------------------------------------- */

.landing-passos {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 22px !important;

    max-width: 1180px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    background: transparent !important;
}


/* ----------------------------------------------------------
   VARIAVEIS DOS CARDS
   ---------------------------------------------------------- */

.landing-passo:nth-child(1) {
    --passo-cor: #7c3aed;
    --passo-cor2: #5b21b6;
    --passo-soft: #f3e8ff;
    --passo-borda: #dfccff;
    --passo-sombra: rgba(124, 58, 237, .13);
}


.landing-passo:nth-child(2) {
    --passo-cor: #1687ff;
    --passo-cor2: #2563eb;
    --passo-soft: #eaf4ff;
    --passo-borda: #c7e0ff;
    --passo-sombra: rgba(22, 135, 255, .13);
}


.landing-passo:nth-child(3) {
    --passo-cor: #10b981;
    --passo-cor2: #059669;
    --passo-soft: #eafbf3;
    --passo-borda: #c4efda;
    --passo-sombra: rgba(16, 185, 129, .13);
}


.landing-passo:nth-child(4) {
    --passo-cor: #f97316;
    --passo-cor2: #ea580c;
    --passo-soft: #fff2e8;
    --passo-borda: #ffd5b8;
    --passo-sombra: rgba(249, 115, 22, .13);
}


/* ----------------------------------------------------------
   CARD
   ---------------------------------------------------------- */

.landing-passo {
    position: relative !important;

    min-height: 250px !important;

    padding:
        30px 25px 25px !important;

    overflow: hidden !important;

    border:
        1px solid var(--passo-borda) !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            155deg,
            #ffffff 0%,
            #ffffff 76%,
            var(--passo-soft) 160%
        ) !important;

    box-shadow:
        0 15px 34px
        rgba(31, 24, 51, .07) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}


.landing-passo:hover {
    transform:
        translateY(-6px) !important;

    box-shadow:
        0 24px 48px
        var(--passo-sombra) !important;
}


/* linha colorida superior */

.landing-passo::after {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    height: 5px !important;

    background:
        linear-gradient(
            90deg,
            var(--passo-cor),
            var(--passo-cor2)
        ) !important;
}


/* ----------------------------------------------------------
   NUMERO
   ---------------------------------------------------------- */

.landing-passo-numero,
.landing-passo > span:first-child {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 48px !important;

    margin-bottom: 20px !important;

    border:
        1px solid var(--passo-borda) !important;

    border-radius: 14px !important;

    color:
        var(--passo-cor) !important;

    background:
        var(--passo-soft) !important;

    font-size: 13px !important;

    font-weight: 850 !important;

    box-shadow:
        0 7px 18px var(--passo-sombra) !important;
}


/* ----------------------------------------------------------
   ICONE VISUAL
   ---------------------------------------------------------- */

.landing-passo h3 {
    position: relative !important;

    margin:
        0 0 10px !important;

    padding-top: 47px !important;

    color:
        #171426 !important;

    font-size:
        19px !important;

    font-weight:
        850 !important;

    line-height:
        1.22 !important;

    letter-spacing:
        -.02em !important;
}


.landing-passo h3::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 37px !important;
    height: 37px !important;

    background-color:
        var(--passo-cor) !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        25px 25px !important;

    border-radius:
        11px !important;

    box-shadow:
        0 7px 16px var(--passo-sombra) !important;
}


/* PLANO */

.landing-passo:nth-child(1) h3::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h5M8 15h8'/%3E%3C/svg%3E") !important;
}


/* LOGIN */

.landing-passo:nth-child(2) h3::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E") !important;
}


/* PESQUISA */

.landing-passo:nth-child(3) h3::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
}


/* VANTAGENS */

.landing-passo:nth-child(4) h3::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v8H4v-8'/%3E%3Cpath d='M2 7h20v5H2z'/%3E%3Cpath d='M12 7v13'/%3E%3Cpath d='M12 7H7.5A2.5 2.5 0 1 1 10 4.5C10 7 12 7 12 7Z'/%3E%3Cpath d='M12 7h4.5A2.5 2.5 0 1 0 14 4.5C14 7 12 7 12 7Z'/%3E%3C/svg%3E") !important;
}


/* ----------------------------------------------------------
   TEXTO
   ---------------------------------------------------------- */

.landing-passo p {
    margin: 0 !important;

    color:
        #676071 !important;

    font-size:
        12.5px !important;

    line-height:
        1.6 !important;
}


/* ----------------------------------------------------------
   DETALHE INFERIOR
   ---------------------------------------------------------- */

.landing-passo::before {
    content: "" !important;

    position: absolute !important;

    right: -35px !important;
    bottom: -35px !important;

    width: 110px !important;
    height: 110px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            var(--passo-soft) 0%,
            transparent 70%
        ) !important;

    pointer-events: none !important;
}


/* ----------------------------------------------------------
   RESPONSIVO
   ---------------------------------------------------------- */

@media (max-width: 1000px) {

    .landing-passos {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


@media (max-width: 620px) {

    .landing-passos {
        grid-template-columns:
            1fr !important;
    }

    .landing-passo {
        min-height:
            auto !important;
    }
}

/* ==========================================================
   FILM TECH — COMO FUNCIONA
   AJUSTE FINAL: REMOVER SOMENTE 01 / 02 / 03 / 04
   ========================================================== */

/*
 * Mantém integralmente o layout atual da seção "Como funciona".
 * Remove somente os indicadores numéricos dos quatro cards.
 */

.landing-passo > span:first-child {
    display: none !important;
}



/* ==========================================================
   GANHE MAIS - LANDING
========================================================== */

.landing-ganhe-mais {
    padding: 96px 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(124, 58, 237, 0.09),
            transparent 42%
        ),
        #ffffff;
}


.landing-ganhe-mais-grade {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;

    max-width: 1040px;

    margin:
        46px auto 0;
}


.landing-ganhe-mais-card {
    position: relative;

    padding: 32px;

    border:
        1px solid #e8e1f5;

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaff 100%
        );

    box-shadow:
        0 16px 45px
        rgba(62, 39, 96, 0.08);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


.landing-ganhe-mais-card:hover {
    transform:
        translateY(-6px);

    border-color:
        #8b5cf6;

    box-shadow:
        0 22px 55px
        rgba(109, 40, 217, 0.14);
}


.landing-ganhe-mais-card.destaque {
    border-color:
        rgba(244, 180, 0, 0.55);
}


.landing-ganhe-mais-icone {
    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    margin-bottom: 20px;

    border-radius: 16px;

    color: #6d28d9;

    background:
        #f3e8ff;

    font-size: 25px;
}


.landing-ganhe-mais-card.destaque
.landing-ganhe-mais-icone {
    color: #8a5700;

    background:
        #fff4cf;
}


.landing-ganhe-mais-tipo {
    display: inline-block;

    margin-bottom: 9px;

    color: #7c3aed;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.12em;
}


.landing-ganhe-mais-card h3 {
    margin:
        0 0 12px;

    color: #211a35;

    font-size: 23px;
}


.landing-ganhe-mais-card > p {
    margin:
        0 0 22px;

    color: #6f6980;

    line-height: 1.65;
}


.landing-ganhe-mais-card ul {
    display: grid;

    gap: 11px;

    margin:
        0 0 24px;

    padding: 0;

    list-style: none;
}


.landing-ganhe-mais-card li {
    position: relative;

    padding-left: 24px;

    color: #514b60;
}


.landing-ganhe-mais-card li::before {
    content: "\2713";

    position: absolute;

    left: 0;

    color: #7c3aed;

    font-weight: 900;
}


.landing-ganhe-mais-parceiro {
    padding-top: 18px;

    border-top:
        1px solid #eee9f6;

    color: #777080;

    font-size: 13px;
}


.landing-ganhe-mais-parceiro strong {
    color: #332b43;
}


.landing-ganhe-mais-premium {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 20px;

    max-width: 1040px;

    margin:
        24px auto 0;

    padding:
        22px 25px;

    border:
        1px solid
        rgba(244, 180, 0, 0.45);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

    box-shadow:
        0 14px 40px
        rgba(92, 63, 15, 0.07);
}


.landing-ganhe-mais-premium-icone {
    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 14px;

    color: #9a6200;

    background:
        #ffedb3;

    font-size: 21px;
}


.landing-ganhe-mais-premium strong {
    display: block;

    color: #332714;

    margin-bottom: 4px;
}


.landing-ganhe-mais-premium p {
    margin: 0;

    color: #786d5c;

    font-size: 14px;
}


@media (max-width: 800px) {

    .landing-ganhe-mais {
        padding:
            70px 0;
    }


    .landing-ganhe-mais-grade {
        grid-template-columns:
            1fr;
    }


    .landing-ganhe-mais-premium {
        grid-template-columns:
            auto 1fr;
    }


    .landing-ganhe-mais-premium
    .landing-botao-principal {
        grid-column:
            1 / -1;

        width: 100%;
    }

}


@media (max-width: 520px) {

    .landing-ganhe-mais-card {
        padding: 24px;
    }


    .landing-ganhe-mais-premium {
        grid-template-columns:
            1fr;

        text-align: center;
    }


    .landing-ganhe-mais-premium-icone {
        margin:
            0 auto;
    }

}


/* Icone Apple - Ganhe Mais */
.landing-icone-apple {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 25px;
    font-weight: 600;
}

/* Apple - Ganhe Mais */
.landing-icone-apple svg {
    width: 27px;
    height: 27px;
    display: block;
}

.landing-icone-apple {
    color: #8a5700;
}