/* =========================================================
   FILM TECH - TEMA CLARO ROXO
   Landing Page - acabamento final
   ========================================================= */

:root {
    --ft-roxo: #6d28d9;
    --ft-roxo-forte: #5b21b6;
    --ft-roxo-claro: #8b5cf6;
    --ft-lilas: #f5f3ff;
    --ft-lilas-borda: #ddd6fe;

    --ft-texto: #18181b;
    --ft-texto-secundario: #64748b;

    --ft-branco: #ffffff;
    --ft-fundo: #fafaff;
    --ft-borda: #e7e5ef;
}


/* ===== FUNDO GERAL ===== */

html,
body {
    background: #ffffff !important;
    color: var(--ft-texto) !important;
}

main {
    background: #ffffff !important;
}


/* ===== CABECALHO ===== */

.landing-header {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid #ece9f5 !important;
    box-shadow: 0 4px 20px rgba(91, 33, 182, 0.05) !important;
}

.landing-header-conteudo {
    background: transparent !important;
}

.landing-menu a {
    color: #475569 !important;
}

.landing-menu a:hover {
    color: var(--ft-roxo) !important;
}

.landing-entrar {
    color: var(--ft-roxo) !important;
    background: #ffffff !important;
    border: 1px solid var(--ft-lilas-borda) !important;
}

.landing-entrar:hover {
    background: var(--ft-lilas) !important;
    border-color: var(--ft-roxo-claro) !important;
}

.landing-cta-pequeno {
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        #7c3aed,
        #5b21b6
    ) !important;

    border-color: transparent !important;

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


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

.landing-hero {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(139, 92, 246, 0.10),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfaff 48%,
            #f5f3ff 100%
        ) !important;

    color: var(--ft-texto) !important;
}

.landing-hero-brilho {
    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.12),
            transparent 68%
        ) !important;
}

.landing-etiqueta {
    color: var(--ft-roxo) !important;
}

.landing-hero h1 {
    color: #18181b !important;
}

.landing-hero h1 strong {
    color: var(--ft-roxo) !important;
}

.landing-hero-texto > p {
    color: #64748b !important;
}

.landing-hero-beneficios span {
    color: #64748b !important;
}


/* ===== BOTOES DO HERO ===== */

.landing-botao-principal {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #5b21b6
        ) !important;

    border-color: transparent !important;

    box-shadow:
        0 12px 28px rgba(109, 40, 217, 0.20) !important;
}

.landing-botao-video {
    color: #475569 !important;
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

.landing-botao-video span {
    color: var(--ft-roxo) !important;
}


/* =========================================================
   CARD DE PESQUISA
   ERA A PRINCIPAL AREA ESCURA DA TELA
   ========================================================= */

.landing-produto {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 65%,
            #faf8ff 100%
        ) !important;

    border:
        1px solid rgba(124, 58, 237, 0.20) !important;

    box-shadow:
        0 28px 70px rgba(76, 29, 149, 0.13),
        0 6px 20px rgba(15, 23, 42, 0.06) !important;

    color: var(--ft-texto) !important;
}


/* ===== TOPO DO CARD ===== */

.landing-produto-topo {
    background: #ffffff !important;

    border-bottom:
        1px solid #ede9fe !important;
}

.landing-produto-marca > span {
    color: var(--ft-roxo) !important;

    border-color:
        rgba(124, 58, 237, 0.45) !important;

    background: #f5f3ff !important;
}

.landing-produto-marca strong {
    color: #18181b !important;
}

.landing-produto-marca small {
    color: #94a3b8 !important;
}

.landing-produto-status {
    color: #15803d !important;

    background:
        rgba(34, 197, 94, 0.08) !important;

    border-color:
        rgba(34, 197, 94, 0.25) !important;
}


/* ===== CORPO DO CARD ===== */

.landing-produto-corpo {
    background: #ffffff !important;
}

.landing-produto-etiqueta {
    color: var(--ft-roxo) !important;
}

.landing-produto-corpo h2 {
    color: #18181b !important;
}


/* ===== CAMPO DE PESQUISA ===== */

.landing-pesquisa-demo {
    background: #ffffff !important;

    color: #1e293b !important;

    border:
        1px solid #d8d3e8 !important;

    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.025) !important;
}

.landing-texto-digitado {
    color: #334155 !important;
}

.landing-cursor {
    background: var(--ft-roxo) !important;
}


/* ===== BOTAO PESQUISAR ===== */

.landing-produto-corpo > button {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #5b21b6
        ) !important;

    border-color: transparent !important;

    box-shadow:
        0 10px 24px rgba(109, 40, 217, 0.20) !important;
}

.landing-produto-corpo > button:hover {
    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #4c1d95
        ) !important;
}


/* ===== RESULTADO ===== */

.landing-resultado-demo {
    background: #faf9ff !important;

    border:
        1px solid #e8e3f5 !important;

    color: #334155 !important;
}

.landing-resultado-demo small {
    color: #94a3b8 !important;
}

.landing-resultado-demo strong {
    color: #18181b !important;
}

.landing-resultado-demo > span {
    color: var(--ft-roxo) !important;
}


/* ===== FAIXA ABAIXO DO HERO ===== */

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

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

    border-color:
        #ede9fe !important;
}

.landing-faixa-confianca strong {
    color: #18181b !important;
}

.landing-faixa-confianca span {
    color: #64748b !important;
}


/* ===== RESPONSIVO ===== */

@media (max-width: 900px) {

    .landing-menu {
        background: #ffffff !important;
        border-color: #ede9fe !important;
        box-shadow:
            0 18px 40px rgba(76, 29, 149, 0.12) !important;
    }

    .landing-menu-botao {
        color: var(--ft-roxo) !important;
        background: #f5f3ff !important;
        border-color: #ddd6fe !important;
    }
}


/* ==========================================================
   CLUBE DE VANTAGENS - TEMA BRANCO + ROXO
   ========================================================== */

.landing-vantagens {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaff 55%,
            #f7f4ff 100%
        ) !important;

    color: #211a35 !important;
}


/* CABECALHO DA SECAO */

.landing-vantagens .landing-secao-cabecalho h2 {
    color: #211a35 !important;
}

.landing-vantagens .landing-secao-cabecalho p {
    color: #6f6980 !important;
}

.landing-vantagens .landing-etiqueta {
    color: #7c3aed !important;

    background:
        #f3e8ff !important;

    border-color:
        #e9d5ff !important;
}


/* CARDS */

.landing-vantagem-fornecedores,
.landing-vantagem-digital {
    background:
        #ffffff !important;

    color:
        #211a35 !important;

    border:
        1px solid #e8e1f5 !important;

    box-shadow:
        0 16px 42px rgba(76, 29, 149, 0.08) !important;
}


/* TITULOS DOS CARDS */

.landing-vantagem-fornecedores h3,
.landing-vantagem-digital h3,
.landing-vantagem-fornecedores h2,
.landing-vantagem-digital h2 {
    color:
        #211a35 !important;
}


/* TEXTOS DOS CARDS */

.landing-vantagem-fornecedores p,
.landing-vantagem-digital p {
    color:
        #6f6980 !important;
}


/* LISTAS */

.landing-vantagem-fornecedores li,
.landing-vantagem-digital li {
    color:
        #5f5870 !important;
}


/* DESTAQUES */

.landing-vantagem-fornecedores strong,
.landing-vantagem-digital strong {
    color:
        #211a35 !important;
}


/* LINKS E BOTOES */

.landing-vantagem-fornecedores a,
.landing-vantagem-digital a {
    color:
        #6d28d9 !important;
}

.landing-vantagem-fornecedores button,
.landing-vantagem-digital button {
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #5b21b6
        ) !important;

    color:
        #ffffff !important;

    border-color:
        transparent !important;
}


/* DETALHES DOURADOS ANTIGOS VIRAM LILAS */

.landing-vantagens .dourado {
    color:
        #7c3aed !important;

    background:
        #f3e8ff !important;
}


/* ==========================================================
   CLUBE DE VANTAGENS - TEMA BRANCO + ROXO
   ========================================================== */

.landing-vantagens {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaff 55%,
            #f7f4ff 100%
        ) !important;

    color: #211a35 !important;
}


/* CABECALHO DA SECAO */

.landing-vantagens .landing-secao-cabecalho h2 {
    color: #211a35 !important;
}

.landing-vantagens .landing-secao-cabecalho p {
    color: #6f6980 !important;
}

.landing-vantagens .landing-etiqueta {
    color: #7c3aed !important;

    background:
        #f3e8ff !important;

    border-color:
        #e9d5ff !important;
}


/* CARDS */

.landing-vantagem-fornecedores,
.landing-vantagem-digital {
    background:
        #ffffff !important;

    color:
        #211a35 !important;

    border:
        1px solid #e8e1f5 !important;

    box-shadow:
        0 16px 42px rgba(76, 29, 149, 0.08) !important;
}


/* TITULOS DOS CARDS */

.landing-vantagem-fornecedores h3,
.landing-vantagem-digital h3,
.landing-vantagem-fornecedores h2,
.landing-vantagem-digital h2 {
    color:
        #211a35 !important;
}


/* TEXTOS DOS CARDS */

.landing-vantagem-fornecedores p,
.landing-vantagem-digital p {
    color:
        #6f6980 !important;
}


/* LISTAS */

.landing-vantagem-fornecedores li,
.landing-vantagem-digital li {
    color:
        #5f5870 !important;
}


/* DESTAQUES */

.landing-vantagem-fornecedores strong,
.landing-vantagem-digital strong {
    color:
        #211a35 !important;
}


/* LINKS E BOTOES */

.landing-vantagem-fornecedores a,
.landing-vantagem-digital a {
    color:
        #6d28d9 !important;
}

.landing-vantagem-fornecedores button,
.landing-vantagem-digital button {
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #5b21b6
        ) !important;

    color:
        #ffffff !important;

    border-color:
        transparent !important;
}


/* DETALHES DOURADOS ANTIGOS VIRAM LILAS */

.landing-vantagens .dourado {
    color:
        #7c3aed !important;

    background:
        #f3e8ff !important;
}


/* ==========================================================
   LANDING - FINALIZACAO DO TEMA CLARO
   CTA FINAL + FAQ + FOOTER
   ========================================================== */


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

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

.landing-faq .landing-secao-cabecalho h2 {
    color: #1e1b2e !important;
}

.landing-faq .landing-secao-cabecalho p {
    color: #6b687a !important;
}

.landing-faq details {
    background: #ffffff !important;

    border:
        1px solid #e8e1f5 !important;

    color:
        #1e1b2e !important;

    box-shadow:
        0 8px 24px rgba(76, 29, 149, 0.05) !important;
}

.landing-faq summary {
    color:
        #1e1b2e !important;

    background:
        #ffffff !important;
}

.landing-faq summary:hover {
    color:
        #6d28d9 !important;

    background:
        #faf8ff !important;
}

.landing-faq summary::after {
    color:
        #7c3aed !important;
}

.landing-faq details p {
    color:
        #6b687a !important;
}


/* ==========================================================
   CTA FINAL
   "PARE DE PERDER TEMPO..."
   ========================================================== */

.landing-cta-final {
    border-top:
        1px solid #eee9f6 !important;

    background:
        radial-gradient(
            circle at center,
            rgba(124, 58, 237, 0.09),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f5ff 100%
        ) !important;
}

.landing-cta-final h2 {
    color:
        #1e1b2e !important;
}

.landing-cta-final p {
    color:
        #6b687a !important;
}

.landing-cta-final .landing-etiqueta {
    color:
        #7c3aed !important;

    background:
        #f3e8ff !important;

    border-color:
        #e9d5ff !important;
}


/* Botao principal da chamada final */

.landing-cta-final .landing-botao-principal {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #5b21b6
        ) !important;

    border-color:
        transparent !important;

    box-shadow:
        0 12px 28px rgba(109, 40, 217, 0.20) !important;
}


/* Botao secundario */

.landing-cta-final .landing-botao-secundario {
    color:
        #6d28d9 !important;

    background:
        #ffffff !important;

    border:
        1px solid #d9cdf4 !important;
}

.landing-cta-final .landing-botao-secundario:hover {
    background:
        #f5f3ff !important;

    border-color:
        #8b5cf6 !important;
}


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

.landing-footer {
    background:
        #ffffff !important;

    border-top:
        1px solid #e8e5f0 !important;

    color:
        #1e1b2e !important;
}

.landing-footer h2,
.landing-footer h3,
.landing-footer strong {
    color:
        #1e1b2e !important;
}

.landing-footer p,
.landing-footer small {
    color:
        #777284 !important;
}

.landing-footer a {
    color:
        #6b687a !important;
}

.landing-footer a:hover {
    color:
        #6d28d9 !important;
}


/* Linha inferior do footer */

.landing-footer-rodape,
.landing-footer-final {
    border-color:
        #e8e5f0 !important;

    color:
        #8b8795 !important;
}


/* ==========================================================
   GARANTIA DE FUNDO CLARO ENTRE SECOES
   ========================================================== */

.landing-secao,
.landing-faq,
.landing-cta-final,
.landing-footer {
    color:
        #1e1b2e;
}


/* ==========================================================
   FILM TECH - DESIGN SYSTEM VISUAL FINAL
   PADRONIZACAO DA LANDING
   ========================================================== */

:root {
    --ft-bg: #f8f7fc;
    --ft-card: #ffffff;
    --ft-card-soft: #fbfaff;

    --ft-purple: #6d28d9;
    --ft-purple-2: #7c3aed;
    --ft-purple-3: #8b5cf6;
    --ft-purple-soft: #f3e8ff;

    --ft-text: #1f1b2d;
    --ft-text-2: #686274;
    --ft-text-3: #8f8a99;

    --ft-border: #e8e3f1;
    --ft-border-strong: #d8cdf1;

    --ft-shadow:
        0 10px 30px rgba(76, 29, 149, 0.07);

    --ft-shadow-hover:
        0 18px 42px rgba(109, 40, 217, 0.13);

    --ft-radius: 20px;
}


/* ==========================================================
   FUNDO E SECOES
   ========================================================== */

body,
main,
.landing-secao,
.landing-recursos,
.landing-demonstracao,
.landing-vantagens,
.landing-planos,
.landing-faq,
.landing-cta-final,
.landing-footer {
    background: var(--ft-bg) !important;
}


/* ==========================================================
   TITULOS E TEXTOS
   ========================================================== */

.landing-secao h2,
.landing-secao h3,
.landing-secao h4,
.landing-cta-final h2,
.landing-footer h2,
.landing-footer h3 {
    color: var(--ft-text) !important;
}

.landing-secao p,
.landing-secao li,
.landing-secao small,
.landing-footer p,
.landing-footer small {
    color: var(--ft-text-2) !important;
}


/* ==========================================================
   ETIQUETAS / BADGES
   ========================================================== */

.landing-etiqueta,
.landing-plano-tag,
.landing-plano-destaque,
.landing-badge,
.landing-selo {
    background: var(--ft-purple-soft) !important;
    color: var(--ft-purple) !important;
    border-color: #e9d5ff !important;
}


/* ==========================================================
   CARDS GERAIS
   ========================================================== */

.landing-recurso,
.landing-passo,
.landing-vantagem-fornecedores,
.landing-vantagem-digital,
.landing-plano,
.landing-faq details,
.landing-seguranca-planos > div,
.landing-produto,
.landing-faixa-confianca > div {
    background: var(--ft-card) !important;

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

    border-radius:
        var(--ft-radius) !important;

    box-shadow:
        var(--ft-shadow) !important;

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


/* hover uniforme */

.landing-recurso:hover,
.landing-passo:hover,
.landing-vantagem-fornecedores:hover,
.landing-vantagem-digital:hover,
.landing-plano:hover,
.landing-faq details:hover {
    transform: translateY(-3px);

    border-color:
        var(--ft-border-strong) !important;

    box-shadow:
        var(--ft-shadow-hover) !important;
}


/* ==========================================================
   ICONES
   ========================================================== */

.landing-recurso-icone,
.landing-passo > span,
.landing-seguranca-planos > div > span,
.landing-vantagem-fornecedores > span,
.landing-vantagem-digital > span {
    background:
        var(--ft-purple-soft) !important;

    color:
        var(--ft-purple) !important;

    border:
        1px solid #e9d5ff !important;
}


/* ==========================================================
   BOTOES PRINCIPAIS
   ========================================================== */

.landing-botao-principal,
.landing-cta-pequeno,
.landing-plano-botao,
.landing-vantagem-digital button,
.landing-vantagem-fornecedores button,
.landing-produto-corpo > button {
    background:
        linear-gradient(
            135deg,
            var(--ft-purple-2),
            var(--ft-purple)
        ) !important;

    color:
        #ffffff !important;

    border:
        1px solid transparent !important;

    box-shadow:
        0 10px 24px rgba(109, 40, 217, 0.18) !important;
}

.landing-botao-principal:hover,
.landing-cta-pequeno:hover,
.landing-plano-botao:hover,
.landing-vantagem-digital button:hover,
.landing-vantagem-fornecedores button:hover,
.landing-produto-corpo > button:hover {
    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #5b21b6
        ) !important;
}


/* ==========================================================
   BOTOES SECUNDARIOS
   ========================================================== */

.landing-entrar,
.landing-botao-video,
.landing-botao-secundario {
    background:
        #ffffff !important;

    color:
        var(--ft-purple) !important;

    border:
        1px solid var(--ft-border-strong) !important;
}

.landing-entrar:hover,
.landing-botao-video:hover,
.landing-botao-secundario:hover {
    background:
        #f8f5ff !important;

    border-color:
        var(--ft-purple-3) !important;
}


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

.landing-plano {
    border:
        1px solid var(--ft-border) !important;
}

.landing-plano.destaque {
    border:
        2px solid var(--ft-purple-2) !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf7ff 100%
        ) !important;
}

.landing-preco,
.landing-preco strong {
    color:
        var(--ft-text) !important;
}


/* remove aparencia dourada antiga */

.landing-plano-botao.principal,
.landing-plano.destaque .landing-plano-botao,
.landing-plano-anual .landing-plano-botao {
    background:
        linear-gradient(
            135deg,
            var(--ft-purple-2),
            var(--ft-purple)
        ) !important;

    color:
        #ffffff !important;

    border-color:
        transparent !important;
}


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

.landing-faq details {
    overflow: hidden;
}

.landing-faq summary {
    background:
        #ffffff !important;

    color:
        var(--ft-text) !important;

    border-radius:
        var(--ft-radius) !important;
}

.landing-faq summary:hover {
    background:
        #faf8ff !important;

    color:
        var(--ft-purple) !important;
}

.landing-faq details[open] summary {
    color:
        var(--ft-purple) !important;

    border-bottom:
        1px solid var(--ft-border) !important;
}


/* ==========================================================
   SEGURANCA DOS PLANOS
   ========================================================== */

.landing-seguranca-planos {
    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

    gap:
        14px !important;
}

.landing-seguranca-planos > div {
    min-height:
        82px !important;
}


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

.landing-footer {
    border-top:
        1px solid var(--ft-border) !important;
}

.landing-footer a {
    color:
        var(--ft-text-2) !important;
}

.landing-footer a:hover {
    color:
        var(--ft-purple) !important;
}


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

/* mantém o verde oficial do WhatsApp */
.whatsapp-flutuante,
.whatsapp-global {
    background:
        #25D366 !important;

    color:
        #ffffff !important;
}


/* ==========================================================
   PLANOS - PADRAO VISUAL ROXO DEFINITIVO
   ========================================================== */

.landing-planos {
    background:
        linear-gradient(
            180deg,
            #f8f7fc 0%,
            #fbfaff 100%
        ) !important;
}


/* GRADE */

.landing-planos-grade {
    gap: 24px !important;
    align-items: stretch !important;
}


/* TODOS OS CARDS */

.landing-plano {
    position: relative !important;

    background:
        #ffffff !important;

    border:
        1px solid #e7e1f1 !important;

    border-radius:
        22px !important;

    padding:
        38px 28px 30px !important;

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

    color:
        #1f1b2d !important;

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


.landing-plano:hover {
    transform:
        translateY(-5px) !important;

    border-color:
        #cbbcf2 !important;

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


/* ==========================================================
   CARD DE DESTAQUE
   ========================================================== */

.landing-plano.destaque {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf8ff 100%
        ) !important;

    border:
        2px solid #7c3aed !important;

    box-shadow:
        0 22px 52px
        rgba(109, 40, 217, 0.17) !important;

    transform:
        translateY(-6px) !important;
}


.landing-plano.destaque:hover {
    transform:
        translateY(-9px) !important;
}


/* ==========================================================
   ROTULOS MENSAL / TRIMESTRAL / ANUAL
   ========================================================== */

.landing-plano-tipo,
.landing-plano > span:not(.landing-plano-tag) {
    color:
        #7c3aed !important;
}


/* ==========================================================
   TITULOS
   ========================================================== */

.landing-plano h3 {
    color:
        #1d182a !important;

    font-weight:
        800 !important;
}


/* ==========================================================
   DESCRICOES
   ========================================================== */

.landing-plano p {
    color:
        #6f697b !important;
}


/* ==========================================================
   PRECO
   ========================================================== */

.landing-preco {
    color:
        #1d182a !important;
}


.landing-preco strong {
    color:
        #1d182a !important;

    font-weight:
        850 !important;
}


.landing-preco span,
.landing-preco small {
    color:
        #777183 !important;
}


/* ==========================================================
   ECONOMIA
   ========================================================== */

.landing-economia,
.landing-plano-economia {
    display:
        inline-flex !important;

    align-items:
        center !important;

    width:
        fit-content !important;

    padding:
        7px 11px !important;

    border:
        1px solid #ddd0fa !important;

    border-radius:
        999px !important;

    background:
        #f5f0ff !important;

    color:
        #6d28d9 !important;

    font-weight:
        750 !important;
}


/* ==========================================================
   BENEFICIOS
   ========================================================== */

.landing-plano ul {
    margin-top:
        24px !important;
}


.landing-plano li {
    color:
        #5f596a !important;
}


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


/* ==========================================================
   SELOS SUPERIORES
   REMOVE AMARELO E AZUL
   ========================================================== */

.landing-plano-tag,
.landing-plano-selo,
.landing-plano-destaque,
.landing-plano > .destaque,
.landing-plano > .principal {
    background:
        #f3e8ff !important;

    color:
        #6d28d9 !important;

    border:
        1px solid #e2d3fa !important;

    box-shadow:
        none !important;
}


/* CARD TRIMESTRAL */

.landing-plano.destaque .landing-plano-tag,
.landing-plano.destaque .landing-plano-selo,
.landing-plano.destaque .landing-plano-destaque {
    background:
        #7c3aed !important;

    color:
        #ffffff !important;

    border-color:
        #7c3aed !important;

    box-shadow:
        0 6px 16px
        rgba(109, 40, 217, 0.18) !important;
}


/* ==========================================================
   BOTOES DOS PLANOS
   ========================================================== */

.landing-plano-botao,
.landing-plano-botao.principal,
.landing-plano.destaque .landing-plano-botao,
.landing-plano-anual .landing-plano-botao {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        50px !important;

    border:
        1px solid transparent !important;

    border-radius:
        13px !important;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #5b21b6
        ) !important;

    color:
        #ffffff !important;

    font-weight:
        800 !important;

    box-shadow:
        0 10px 24px
        rgba(109, 40, 217, 0.18) !important;
}


.landing-plano-botao:hover {
    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #4c1d95
        ) !important;

    transform:
        translateY(-1px) !important;
}


/* ==========================================================
   RODAPE DOS CARDS
   ========================================================== */

.landing-plano-rodape {
    display:
        block !important;

    margin-top:
        14px !important;

    color:
        #817b8b !important;

    text-align:
        center !important;
}


/* ==========================================================
   SEGURANCA DOS PLANOS
   ========================================================== */

.landing-seguranca-planos {
    gap:
        14px !important;

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;
}


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

    border:
        1px solid #e7e1f1 !important;

    border-radius:
        16px !important;

    box-shadow:
        0 8px 24px
        rgba(76, 29, 149, 0.05) !important;
}


.landing-seguranca-planos > div > span {
    background:
        #f3e8ff !important;

    color:
        #7c3aed !important;

    border:
        1px solid #e2d3fa !important;
}


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


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


/* ==========================================================
   REMOVE RESIDUOS VISUAIS AZUIS E DOURADOS NOS PLANOS
   ========================================================== */

.landing-planos .dourado,
.landing-planos .azul,
.landing-planos [class*="gold"],
.landing-planos [class*="blue"] {
    color:
        #6d28d9 !important;

    border-color:
        #ddd0fa !important;

    background:
        #f5f0ff !important;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 900px) {

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

    .landing-plano.destaque:hover {
        transform:
            translateY(-4px) !important;
    }
}




/* ==========================================================
   RECURSOS - CARDS MAIS VIVOS
   ========================================================== */

.landing-recursos-grade {
    gap: 18px !important;
}


/* CARD BASE */

.landing-recurso {
    position: relative !important;
    overflow: hidden !important;

    min-height: 245px !important;

    padding: 28px 26px !important;

    background:
        linear-gradient(
            160deg,
            #ffffff 0%,
            #ffffff 72%,
            #faf7ff 100%
        ) !important;

    border:
        1px solid #e5def2 !important;

    border-radius:
        22px !important;

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

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


/* faixa inferior */

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

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 4px !important;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #a855f7
        ) !important;

    opacity: .85 !important;
}


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

    border-color:
        #cdbdf1 !important;

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


/* ==========================================================
   ICONES
   remove os simbolos antigos
   ========================================================== */

.landing-recurso-icone {
    display: grid !important;

    width: 54px !important;
    height: 54px !important;

    margin-bottom: 20px !important;

    place-items: center !important;

    border:
        1px solid #dfd1fb !important;

    border-radius:
        15px !important;

    background:
        linear-gradient(
            145deg,
            #f6f0ff,
            #eee5ff
        ) !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    box-shadow:
        0 7px 18px rgba(109, 40, 217, 0.10) !important;
}


.landing-recurso-icone::before {
    content: "" !important;

    display: block !important;

    width: 27px !important;
    height: 27px !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        contain !important;
}


/* 1 - PESQUISA */

.landing-recurso:nth-child(1)
.landing-recurso-icone::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' 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;
}


/* 2 - ATUALIZACAO */

.landing-recurso:nth-child(2)
.landing-recurso-icone::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.34 5.66'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") !important;
}


/* 3 - FORNECEDORES */

.landing-recurso:nth-child(3)
.landing-recurso-icone::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") !important;
}


/* 4 - EQUIPE */

.landing-recurso:nth-child(4)
.landing-recurso-icone::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}


/* ==========================================================
   TITULOS
   ========================================================== */

.landing-recurso h3 {
    margin-bottom:
        10px !important;

    color:
        #201a2e !important;

    font-size:
        19px !important;

    font-weight:
        800 !important;
}


/* TEXTO */

.landing-recurso p {
    color:
        #686174 !important;

    font-size:
        14px !important;

    line-height:
        1.65 !important;
}


/* ==========================================================
   VARIACAO SUAVE ENTRE OS CARDS
   todos continuam dentro da mesma paleta
   ========================================================== */

.landing-recurso:nth-child(1) {
    background:
        linear-gradient(
            160deg,
            #ffffff 0%,
            #ffffff 70%,
            #f7f2ff 100%
        ) !important;
}

.landing-recurso:nth-child(2) {
    background:
        linear-gradient(
            160deg,
            #ffffff 0%,
            #ffffff 70%,
            #f5f3ff 100%
        ) !important;
}

.landing-recurso:nth-child(3) {
    background:
        linear-gradient(
            160deg,
            #ffffff 0%,
            #ffffff 70%,
            #faf5ff 100%
        ) !important;
}

.landing-recurso:nth-child(4) {
    background:
        linear-gradient(
            160deg,
            #ffffff 0%,
            #ffffff 70%,
            #f6f3ff 100%
        ) !important;
}


/* pequenas diferencas na faixa inferior */

.landing-recurso:nth-child(1)::after {
    background:
        linear-gradient(90deg, #6d28d9, #8b5cf6) !important;
}

.landing-recurso:nth-child(2)::after {
    background:
        linear-gradient(90deg, #7c3aed, #a855f7) !important;
}

.landing-recurso:nth-child(3)::after {
    background:
        linear-gradient(90deg, #8b5cf6, #c084fc) !important;
}

.landing-recurso:nth-child(4)::after {
    background:
        linear-gradient(90deg, #6d28d9, #9333ea) !important;
}




/* ==========================================================
   RECURSOS PREMIUM V2
   ========================================================== */

.landing-recursos {
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(124, 58, 237, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(168, 85, 247, 0.06),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #fbfaff 0%,
            #f8f6fc 100%
        ) !important;
}


/* grade */

.landing-recursos-grade {
    gap: 20px !important;
    align-items: stretch !important;
}


/* ==========================================================
   CARD PREMIUM
   ========================================================== */

.landing-recurso {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    min-height: 300px !important;

    padding:
        30px 27px 26px !important;

    border:
        1px solid rgba(124, 58, 237, 0.13) !important;

    border-radius:
        24px !important;

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.98) 60%,
            rgba(249,247,255,1) 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(39, 24, 70, 0.055),
        0 2px 6px rgba(39, 24, 70, 0.025) !important;

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


/* brilho decorativo */

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

    position: absolute !important;

    width: 150px !important;
    height: 150px !important;

    top: -78px !important;
    right: -70px !important;

    border-radius:
        50% !important;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.11),
            rgba(124, 58, 237, 0) 68%
        ) !important;

    pointer-events:
        none !important;

    z-index:
        -1 !important;
}


/* faixa inferior */

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

    position: absolute !important;

    left: 22px !important;
    right: 22px !important;
    bottom: 0 !important;

    height: 4px !important;

    border-radius:
        6px 6px 0 0 !important;

    background:
        linear-gradient(
            90deg,
            #6d28d9,
            #8b5cf6,
            #c084fc
        ) !important;
}


/* hover */

.landing-recurso:hover {
    transform:
        translateY(-8px) !important;

    border-color:
        rgba(124, 58, 237, 0.30) !important;

    box-shadow:
        0 24px 50px rgba(76, 29, 149, 0.13),
        0 6px 16px rgba(39, 24, 70, 0.05) !important;
}


/* ==========================================================
   ICONES PREMIUM
   ========================================================== */

.landing-recurso-icone {
    position: relative !important;

    display: grid !important;

    width: 60px !important;
    height: 60px !important;

    place-items:
        center !important;

    margin-bottom:
        22px !important;

    border-radius:
        18px !important;

    border:
        1px solid rgba(124, 58, 237, .14) !important;

    background:
        linear-gradient(
            145deg,
            #faf7ff,
            #eee7ff
        ) !important;

    box-shadow:
        0 10px 25px rgba(109, 40, 217, 0.10) !important;

    color:
        transparent !important;

    font-size:
        0 !important;
}


/* pequeno brilho do icone */

.landing-recurso-icone::after {
    content: "" !important;

    position: absolute !important;

    inset: 7px !important;

    border-radius:
        12px !important;

    border:
        1px solid rgba(255,255,255,.75) !important;

    pointer-events:
        none !important;
}


/* ==========================================================
   TITULOS
   ========================================================== */

.landing-recurso h3 {
    margin:
        0 0 10px !important;

    color:
        #1e1929 !important;

    font-size:
        20px !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -0.015em !important;
}


/* descricao */

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

    color:
        #686174 !important;

    font-size:
        14px !important;

    line-height:
        1.67 !important;
}


/* ==========================================================
   MINI BLOCO DE BENEFICIO
   ========================================================== */

.landing-recurso p::after {
    display: block !important;

    margin-top:
        25px !important;

    padding:
        13px 14px !important;

    border:
        1px solid #ebe4f7 !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            135deg,
            #faf7ff,
            #f6f1ff
        ) !important;

    color:
        #6d28d9 !important;

    font-size:
        12.5px !important;

    font-weight:
        750 !important;

    line-height:
        1.35 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}


/* card 1 */

.landing-recurso:nth-child(1) p::after {
    content:
        "?  Economize tempo  ?  encontre em segundos" !important;
}


/* card 2 */

.landing-recurso:nth-child(2) p::after {
    content:
        "?  Base em evolu??o  ?  novos modelos" !important;
}


/* card 3 */

.landing-recurso:nth-child(3) p::after {
    content:
        "?  Fornecedores selecionados  ?  mais confian?a" !important;
}


/* card 4 */

.landing-recurso:nth-child(4) p::after {
    content:
        "?  Organiza??o e controle  ?  sua equipe" !important;
}


/* ==========================================================
   PERSONALIDADE SUAVE POR CARD
   ========================================================== */

.landing-recurso:nth-child(1) {
    --card-accent: #6d28d9;
}

.landing-recurso:nth-child(2) {
    --card-accent: #7c3aed;
}

.landing-recurso:nth-child(3) {
    --card-accent: #8b5cf6;
}

.landing-recurso:nth-child(4) {
    --card-accent: #6938d3;
}


/* ?cones recebem leve varia??o */

.landing-recurso:nth-child(1)
.landing-recurso-icone {
    background:
        linear-gradient(
            145deg,
            #f8f4ff,
            #eee7ff
        ) !important;
}

.landing-recurso:nth-child(2)
.landing-recurso-icone {
    background:
        linear-gradient(
            145deg,
            #faf5ff,
            #f0e7ff
        ) !important;
}

.landing-recurso:nth-child(3)
.landing-recurso-icone {
    background:
        linear-gradient(
            145deg,
            #fbf7ff,
            #f1eaff
        ) !important;
}

.landing-recurso:nth-child(4)
.landing-recurso-icone {
    background:
        linear-gradient(
            145deg,
            #f7f4ff,
            #ece7ff
        ) !important;
}


/* ==========================================================
   DESTAQUE NO HOVER DO BLOCO DE BENEFICIO
   ========================================================== */

.landing-recurso:hover p::after {
    border-color:
        #d9cdf2 !important;

    background:
        linear-gradient(
            135deg,
            #f8f3ff,
            #efe7ff
        ) !important;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 820px) {

    .landing-recurso {
        min-height:
            auto !important;

        padding:
            25px 22px !important;
    }

    .landing-recurso p::after {
        margin-top:
            20px !important;
    }
}




/* ==========================================================
   FILM TECH
   RECURSOS PREMIUM FINAL V3
   ========================================================== */


/* ----------------------------------------------------------
   SECAO
   ---------------------------------------------------------- */

.landing-recursos {
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 7% 48%,
            rgba(124, 58, 237, .075),
            transparent 24%
        ),
        radial-gradient(
            circle at 93% 38%,
            rgba(59, 130, 246, .055),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #fcfbff 0%,
            #f8f6ff 100%
        ) !important;
}


/* pequenos pontos decorativos */

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

    position: absolute !important;

    width: 125px !important;
    height: 125px !important;

    top: 125px !important;
    left: -20px !important;

    opacity: .42 !important;

    background-image:
        radial-gradient(
            #bca6f9 2px,
            transparent 2px
        ) !important;

    background-size:
        15px 15px !important;

    pointer-events: none !important;
}


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

.landing-recursos
.landing-secao-cabecalho {
    position: relative !important;
    z-index: 2 !important;

    max-width: 840px !important;

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

    text-align: center !important;
}


.landing-recursos
.landing-secao-cabecalho h2 {
    max-width: 780px !important;

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

    color: #181427 !important;

    font-size:
        clamp(38px, 4vw, 58px) !important;

    line-height: 1.04 !important;

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


.recursos-titulo-destaque {
    display: block !important;

    color: #6d28d9 !important;
}


.landing-recursos
.landing-secao-cabecalho p {
    max-width: 720px !important;

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

    color: #5f5871 !important;

    font-size: 17px !important;

    line-height: 1.65 !important;
}


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

.landing-recursos-grade {
    position: relative !important;
    z-index: 2 !important;

    display: grid !important;

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

    gap: 26px !important;

    align-items: stretch !important;

    margin-top: 54px !important;
}


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

.landing-recurso {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    min-height: 440px !important;

    padding:
        58px 29px 28px !important;

    overflow: visible !important;

    border:
        1px solid rgba(32, 25, 50, .09) !important;

    border-radius:
        24px !important;

    background:
        linear-gradient(
            160deg,
            #ffffff 0%,
            #ffffff 70%,
            #faf9ff 100%
        ) !important;

    box-shadow:
        0 14px 34px rgba(36, 25, 65, .07),
        0 2px 8px rgba(36, 25, 65, .025) !important;

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


/* linha superior colorida */

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

    position: absolute !important;

    top: -1px !important;
    left: 0 !important;
    right: 0 !important;

    height: 5px !important;

    border-radius:
        24px 24px 0 0 !important;

    background:
        var(--recurso-cor) !important;
}


/* hover */

.landing-recurso:hover {
    transform:
        translateY(-8px) !important;

    box-shadow:
        0 25px 55px var(--recurso-sombra),
        0 6px 18px rgba(36, 25, 65, .045) !important;

    border-color:
        var(--recurso-borda) !important;
}


/* ----------------------------------------------------------
   CORES DOS QUATRO CARDS
   ---------------------------------------------------------- */

.landing-recurso:nth-child(1) {
    --recurso-cor: #7c3aed;
    --recurso-cor2: #5b21b6;

    --recurso-claro: #f3e8ff;

    --recurso-borda:
        rgba(124, 58, 237, .32);

    --recurso-sombra:
        rgba(124, 58, 237, .16);
}


.landing-recurso:nth-child(2) {
    --recurso-cor: #22c55e;
    --recurso-cor2: #059669;

    --recurso-claro: #ecfdf3;

    --recurso-borda:
        rgba(34, 197, 94, .30);

    --recurso-sombra:
        rgba(34, 197, 94, .14);
}


.landing-recurso:nth-child(3) {
    --recurso-cor: #f97316;
    --recurso-cor2: #ea580c;

    --recurso-claro: #fff4ea;

    --recurso-borda:
        rgba(249, 115, 22, .32);

    --recurso-sombra:
        rgba(249, 115, 22, .14);
}


.landing-recurso:nth-child(4) {
    --recurso-cor: #1687ff;
    --recurso-cor2: #2563eb;

    --recurso-claro: #edf6ff;

    --recurso-borda:
        rgba(22, 135, 255, .30);

    --recurso-sombra:
        rgba(22, 135, 255, .14);
}


/* ----------------------------------------------------------
   NUMERO 01 / 02 / 03 / 04
   ---------------------------------------------------------- */

.recurso-numero {
    position: absolute !important;

    top: -1px !important;
    left: 15px !important;

    min-width: 48px !important;
    height: 40px !important;

    display: flex !important;

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

    padding:
        0 11px !important;

    border-radius:
        0 0 13px 13px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--recurso-cor),
            var(--recurso-cor2)
        ) !important;

    font-size: 16px !important;

    font-weight: 850 !important;

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


/* ----------------------------------------------------------
   ICONE GRANDE
   ---------------------------------------------------------- */

.landing-recurso-icone {
    display: grid !important;

    width: 72px !important;
    height: 72px !important;

    place-items: center !important;

    margin-bottom: 28px !important;

    border:
        none !important;

    border-radius:
        19px !important;

    background:
        linear-gradient(
            145deg,
            var(--recurso-cor),
            var(--recurso-cor2)
        ) !important;

    box-shadow:
        0 13px 27px var(--recurso-sombra) !important;

    color:
        transparent !important;

    font-size:
        0 !important;
}


.landing-recurso-icone::before {
    width: 37px !important;
    height: 37px !important;
}


/* ?cones brancos */

.landing-recurso:nth-child(1)
.landing-recurso-icone::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;
}


.landing-recurso:nth-child(2)
.landing-recurso-icone::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 11a8 8 0 1 0-2.34 5.66'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") !important;
}


.landing-recurso:nth-child(3)
.landing-recurso-icone::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='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E") !important;
}


.landing-recurso:nth-child(4)
.landing-recurso-icone::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 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}


/* ----------------------------------------------------------
   TITULO
   ---------------------------------------------------------- */

.landing-recurso h3 {
    margin:
        0 0 12px !important;

    color:
        #171322 !important;

    font-size:
        21px !important;

    font-weight:
        850 !important;

    line-height:
        1.18 !important;

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


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

.landing-recurso > p {
    color:
        #5d566b !important;

    font-size:
        14.5px !important;

    line-height:
        1.65 !important;
}


/* remove o bloco antigo criado via CSS */

.landing-recurso > p::after {
    content:
        none !important;

    display:
        none !important;
}


/* ----------------------------------------------------------
   LINHA PEQUENA COLORIDA
   ---------------------------------------------------------- */

.recurso-linha {
    width: 90px !important;
    height: 3px !important;

    margin:
        20px 0 22px !important;

    border-radius:
        999px !important;

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


/* ----------------------------------------------------------
   BENEFICIO INTERNO
   ---------------------------------------------------------- */

.recurso-beneficio {
    display: grid !important;

    grid-template-columns:
        42px 1fr !important;

    gap:
        13px !important;

    align-items:
        center !important;

    margin-top:
        auto !important;

    padding:
        16px !important;

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

    border-radius:
        16px !important;

    background:
        var(--recurso-claro) !important;
}


.recurso-beneficio-icone {
    display:
        grid !important;

    width:
        42px !important;

    height:
        42px !important;

    place-items:
        center !important;

    color:
        var(--recurso-cor2) !important;
}


.recurso-beneficio-icone svg {
    width:
        30px !important;

    height:
        30px !important;

    stroke:
        currentColor !important;
}


.recurso-beneficio strong {
    display:
        block !important;

    margin-bottom:
        4px !important;

    color:
        var(--recurso-cor2) !important;

    font-size:
        13.5px !important;

    font-weight:
        850 !important;
}


.recurso-beneficio small {
    display:
        block !important;

    color:
        #60596d !important;

    font-size:
        11.5px !important;

    line-height:
        1.4 !important;
}


/* ----------------------------------------------------------
   FAIXA INFERIOR DE CONFIANCA
   ---------------------------------------------------------- */

.recursos-confianca {
    position:
        relative !important;

    z-index:
        2 !important;

    display:
        grid !important;

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

    max-width:
        1180px !important;

    margin:
        30px auto 0 !important;

    overflow:
        hidden !important;

    background:
        rgba(255,255,255,.96) !important;

    border:
        1px solid #e8e2f3 !important;

    border-radius:
        20px !important;

    box-shadow:
        0 12px 32px rgba(44, 29, 77, .06) !important;
}


.recursos-confianca-item {
    display:
        grid !important;

    grid-template-columns:
        48px 1fr !important;

    gap:
        13px !important;

    align-items:
        center !important;

    min-height:
        92px !important;

    padding:
        18px 22px !important;

    border-right:
        1px solid #ece7f3 !important;
}


.recursos-confianca-item:last-child {
    border-right:
        none !important;
}


.recursos-confianca-icone {
    display:
        grid !important;

    width:
        44px !important;

    height:
        44px !important;

    place-items:
        center !important;

    border-radius:
        13px !important;

    color:
        #6d28d9 !important;

    background:
        #f3e8ff !important;
}


.recursos-confianca-icone svg {
    width:
        24px !important;

    height:
        24px !important;

    stroke:
        currentColor !important;
}


.recursos-confianca strong {
    display:
        block !important;

    color:
        #261d38 !important;

    font-size:
        13px !important;

    margin-bottom:
        3px !important;
}


.recursos-confianca small {
    display:
        block !important;

    color:
        #777083 !important;

    font-size:
        11.5px !important;

    line-height:
        1.4 !important;
}


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

@media (max-width: 1000px) {

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

    .recursos-confianca {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }
}


@media (max-width: 640px) {

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

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

    .recursos-confianca {
        grid-template-columns:
            1fr !important;
    }

    .recursos-confianca-item {
        border-right:
            none !important;

        border-bottom:
            1px solid #ece7f3 !important;
    }

    .recursos-confianca-item:last-child {
        border-bottom:
            none !important;
    }
}




/* ==========================================================
   FILM TECH - CARDS APROVADOS
   PATCH FINAL DE ALTA PRIORIDADE
   ========================================================== */


/* grade mais parecida com a refer?ncia */

.landing-recursos .landing-recursos-grade {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;

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

    gap: 28px !important;
}


/* ==========================================================
   CARDS
   ========================================================== */

.landing-recursos .landing-recurso {
    min-height: 470px !important;

    padding:
        62px 28px 27px !important;

    border-radius:
        24px !important;

    background:
        #ffffff !important;

    border:
        1px solid #ebe7f1 !important;

    box-shadow:
        0 15px 38px rgba(37, 28, 66, .075) !important;
}


/* ==========================================================
   LINHAS SUPERIORES
   agora uma cor real para cada card
   ========================================================== */

.landing-recursos
.landing-recurso:nth-child(1)::after {
    background:
        #7c3aed !important;
}

.landing-recursos
.landing-recurso:nth-child(2)::after {
    background:
        #16c864 !important;
}

.landing-recursos
.landing-recurso:nth-child(3)::after {
    background:
        #ff6b0b !important;
}

.landing-recursos
.landing-recurso:nth-child(4)::after {
    background:
        #1687ff !important;
}


/* ==========================================================
   ICONES PRINCIPAIS
   for?a os blocos s?lidos da refer?ncia
   ========================================================== */

.landing-recursos
.landing-recurso:nth-child(1)
.landing-recurso-icone {
    background:
        linear-gradient(
            145deg,
            #8b3cf2,
            #5b19ca
        ) !important;

    border:
        none !important;

    box-shadow:
        0 14px 27px rgba(124,58,237,.25) !important;
}


.landing-recursos
.landing-recurso:nth-child(2)
.landing-recurso-icone {
    background:
        linear-gradient(
            145deg,
            #29d66f,
            #00a94f
        ) !important;

    border:
        none !important;

    box-shadow:
        0 14px 27px rgba(22,200,100,.22) !important;
}


.landing-recursos
.landing-recurso:nth-child(3)
.landing-recurso-icone {
    background:
        linear-gradient(
            145deg,
            #ff9d00,
            #ff4e00
        ) !important;

    border:
        none !important;

    box-shadow:
        0 14px 27px rgba(255,107,11,.23) !important;
}


.landing-recursos
.landing-recurso:nth-child(4)
.landing-recurso-icone {
    background:
        linear-gradient(
            145deg,
            #239aff,
            #1456e6
        ) !important;

    border:
        none !important;

    box-shadow:
        0 14px 27px rgba(22,135,255,.23) !important;
}


/* remove molduras claras antigas */

.landing-recursos
.landing-recurso
.landing-recurso-icone::after {
    display:
        none !important;
}


/* SVG branco e maior */

.landing-recursos
.landing-recurso
.landing-recurso-icone::before {
    width:
        39px !important;

    height:
        39px !important;

    filter:
        none !important;

    opacity:
        1 !important;
}


/* ==========================================================
   NUMEROS
   ========================================================== */

.landing-recursos
.landing-recurso:nth-child(1)
.recurso-numero {
    background:
        linear-gradient(135deg,#8b3cf2,#5b19ca) !important;
}

.landing-recursos
.landing-recurso:nth-child(2)
.recurso-numero {
    background:
        linear-gradient(135deg,#24cf69,#00a94f) !important;
}

.landing-recursos
.landing-recurso:nth-child(3)
.recurso-numero {
    background:
        linear-gradient(135deg,#ff9700,#ff5100) !important;
}

.landing-recursos
.landing-recurso:nth-child(4)
.recurso-numero {
    background:
        linear-gradient(135deg,#299cff,#155be5) !important;
}


/* ==========================================================
   TITULOS
   ========================================================== */

.landing-recursos
.landing-recurso h3 {
    font-size:
        21px !important;

    line-height:
        1.18 !important;

    color:
        #171424 !important;
}


/* ==========================================================
   DESCRICAO
   ========================================================== */

.landing-recursos
.landing-recurso > p {
    min-height:
        92px !important;

    font-size:
        14px !important;

    line-height:
        1.65 !important;

    color:
        #5d5869 !important;
}


/* ==========================================================
   RISQUINHO COLORIDO
   ========================================================== */

.landing-recursos
.landing-recurso:nth-child(1)
.recurso-linha {
    background:
        linear-gradient(90deg,#7c3aed,#c4a4ff,transparent) !important;
}

.landing-recursos
.landing-recurso:nth-child(2)
.recurso-linha {
    background:
        linear-gradient(90deg,#16c864,#8fe5b3,transparent) !important;
}

.landing-recursos
.landing-recurso:nth-child(3)
.recurso-linha {
    background:
        linear-gradient(90deg,#ff6b0b,#ffbd88,transparent) !important;
}

.landing-recursos
.landing-recurso:nth-child(4)
.recurso-linha {
    background:
        linear-gradient(90deg,#1687ff,#9dcbff,transparent) !important;
}


/* ==========================================================
   BENEFICIO INFERIOR
   maior e com leitura melhor
   ========================================================== */

.landing-recursos
.recurso-beneficio {
    grid-template-columns:
        48px minmax(0, 1fr) !important;

    min-height:
        105px !important;

    padding:
        17px 16px !important;

    gap:
        14px !important;

    border-radius:
        17px !important;
}


.landing-recursos
.recurso-beneficio strong {
    font-size:
        13px !important;

    line-height:
        1.28 !important;

    margin-bottom:
        5px !important;
}


.landing-recursos
.recurso-beneficio small {
    font-size:
        11.5px !important;

    line-height:
        1.45 !important;
}


/* card 1 */

.landing-recursos
.landing-recurso:nth-child(1)
.recurso-beneficio {
    background:
        #f5edff !important;

    border-color:
        #dec8ff !important;
}

.landing-recursos
.landing-recurso:nth-child(1)
.recurso-beneficio strong,
.landing-recursos
.landing-recurso:nth-child(1)
.recurso-beneficio-icone {
    color:
        #6d28d9 !important;
}


/* card 2 */

.landing-recursos
.landing-recurso:nth-child(2)
.recurso-beneficio {
    background:
        #eafbf1 !important;

    border-color:
        #bcefd0 !important;
}

.landing-recursos
.landing-recurso:nth-child(2)
.recurso-beneficio strong,
.landing-recursos
.landing-recurso:nth-child(2)
.recurso-beneficio-icone {
    color:
        #00a94f !important;
}


/* card 3 */

.landing-recursos
.landing-recurso:nth-child(3)
.recurso-beneficio {
    background:
        #fff2e9 !important;

    border-color:
        #ffd0ad !important;
}

.landing-recursos
.landing-recurso:nth-child(3)
.recurso-beneficio strong,
.landing-recursos
.landing-recurso:nth-child(3)
.recurso-beneficio-icone {
    color:
        #ef5b00 !important;
}


/* card 4 */

.landing-recursos
.landing-recurso:nth-child(4)
.recurso-beneficio {
    background:
        #eaf4ff !important;

    border-color:
        #bedcff !important;
}

.landing-recursos
.landing-recurso:nth-child(4)
.recurso-beneficio strong,
.landing-recursos
.landing-recurso:nth-child(4)
.recurso-beneficio-icone {
    color:
        #096ce0 !important;
}


/* ==========================================================
   BORDA INFERIOR COLORIDA
   igual ? refer?ncia
   ========================================================== */

.landing-recursos
.landing-recurso {
    border-bottom-width:
        4px !important;
}

.landing-recursos
.landing-recurso:nth-child(1) {
    border-bottom-color:
        #7c3aed !important;
}

.landing-recursos
.landing-recurso:nth-child(2) {
    border-bottom-color:
        #16c864 !important;
}

.landing-recursos
.landing-recurso:nth-child(3) {
    border-bottom-color:
        #ff6b0b !important;
}

.landing-recursos
.landing-recurso:nth-child(4) {
    border-bottom-color:
        #1687ff !important;
}


/* ==========================================================
   HOVER INDIVIDUAL
   ========================================================== */

.landing-recursos
.landing-recurso:nth-child(1):hover {
    border-color:
        #c7a7ff !important;

    border-bottom-color:
        #7c3aed !important;
}

.landing-recursos
.landing-recurso:nth-child(2):hover {
    border-color:
        #aee8c4 !important;

    border-bottom-color:
        #16c864 !important;
}

.landing-recursos
.landing-recurso:nth-child(3):hover {
    border-color:
        #ffc99f !important;

    border-bottom-color:
        #ff6b0b !important;
}

.landing-recursos
.landing-recurso:nth-child(4):hover {
    border-color:
        #acd3ff !important;

    border-bottom-color:
        #1687ff !important;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 1050px) {

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


@media (max-width: 650px) {

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


.recurso-numero {
    display: none !important;
}

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

/* ÁREA */

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

    background: transparent !important;
}


/* ==========================================================
   CARDS
   ========================================================== */

.landing-passos article {
    --ft-cor: #7c3aed;
    --ft-cor2: #5b21b6;
    --ft-soft: #f5efff;
    --ft-borda: #ded0ff;
    --ft-sombra: rgba(124, 58, 237, .14);

    position: relative !important;

    min-height: 265px !important;

    padding: 28px 25px 26px !important;

    overflow: hidden !important;

    border: 1px solid var(--ft-borda) !important;
    border-radius: 24px !important;

    color: #171426 !important;

    background:
        radial-gradient(
            circle at 100% 100%,
            var(--ft-soft),
            transparent 42%
        ),
        #ffffff !important;

    box-shadow:
        0 16px 38px rgba(37, 27, 70, .08) !important;

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


/* CORES INDIVIDUAIS */

.landing-passos article:nth-child(1) {
    --ft-cor: #7c3aed;
    --ft-cor2: #5b21b6;
    --ft-soft: #f4eaff;
    --ft-borda: #dcc7ff;
    --ft-sombra: rgba(124, 58, 237, .16);
}

.landing-passos article:nth-child(2) {
    --ft-cor: #1687ff;
    --ft-cor2: #2563eb;
    --ft-soft: #eaf5ff;
    --ft-borda: #c6e1ff;
    --ft-sombra: rgba(22, 135, 255, .16);
}

.landing-passos article:nth-child(3) {
    --ft-cor: #10b981;
    --ft-cor2: #059669;
    --ft-soft: #e8fbf3;
    --ft-borda: #bfefd9;
    --ft-sombra: rgba(16, 185, 129, .16);
}

.landing-passos article:nth-child(4) {
    --ft-cor: #f97316;
    --ft-cor2: #ea580c;
    --ft-soft: #fff0e5;
    --ft-borda: #ffd2b3;
    --ft-sombra: rgba(249, 115, 22, .16);
}


/* LINHA SUPERIOR */

.landing-passos article::before {
    content: "" !important;

    position: absolute !important;

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

    height: 5px !important;

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


/* BRILHO DE FUNDO */

.landing-passos article::after {
    content: "" !important;

    position: absolute !important;

    width: 150px !important;
    height: 150px !important;

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

    border-radius: 50% !important;

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

    opacity: .8 !important;

    pointer-events: none !important;
}


/* ==========================================================
   NÚMERO
   ========================================================== */

.landing-passos article > span:first-child {
    position: relative !important;
    z-index: 2 !important;

    display: inline-flex !important;

    width: 52px !important;
    height: 52px !important;

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

    margin-bottom: 18px !important;

    border: 1px solid var(--ft-borda) !important;
    border-radius: 15px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--ft-cor),
            var(--ft-cor2)
        ) !important;

    font-size: 13px !important;
    font-weight: 900 !important;

    box-shadow:
        0 9px 22px var(--ft-sombra) !important;
}


/* ==========================================================
   ÍCONE
   ========================================================== */

.landing-passos article h3 {
    position: relative !important;
    z-index: 2 !important;

    margin: 0 0 10px !important;

    padding-top: 47px !important;

    color: #171426 !important;

    font-size: 19px !important;
    font-weight: 850 !important;

    line-height: 1.2 !important;
    letter-spacing: -.025em !important;
}


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

    position: absolute !important;

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

    width: 38px !important;
    height: 38px !important;

    border-radius: 11px !important;

    background-color: var(--ft-soft) !important;

    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 23px !important;

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


/* 01 - PLANO */

.landing-passos article: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='%237c3aed' 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;
}


/* 02 - ACESSO */

.landing-passos article: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='%231687ff' 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;
}


/* 03 - PESQUISA */

.landing-passos article: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='%2310b981' 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;
}


/* 04 - VANTAGENS */

.landing-passos article: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='%23f97316' 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%3C/svg%3E") !important;
}


/* ==========================================================
   TEXTOS
   ========================================================== */

.landing-passos article p {
    position: relative !important;
    z-index: 2 !important;

    margin: 0 !important;

    color: #676071 !important;

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


/* ==========================================================
   HOVER
   ========================================================== */

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

    border-color: var(--ft-cor) !important;

    box-shadow:
        0 22px 45px var(--ft-sombra) !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-passos article {
        min-height: auto !important;
    }
}

/* ==========================================================
   COMO FUNCIONA
   REMOVE SOMENTE OS NUMEROS 01 / 02 / 03 / 04
   ========================================================== */

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




/* ==========================================================
   FILM TECH ? PLANOS PREMIUM V12
   Padrao visual alinhado ao restante da landing
   ========================================================== */

.landing-planos {
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(124, 58, 237, .055),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 65%,
            rgba(22, 135, 255, .045),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #fbfaff 0%,
            #f8f6fc 100%
        ) !important;
}


/* ==========================================================
   CABECALHO
   ========================================================== */

.landing-planos .landing-secao-cabecalho {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 44px !important;
    text-align: center !important;
}

.landing-planos .landing-secao-cabecalho h2 {
    color: #171426 !important;

    font-size:
        clamp(
            38px,
            4vw,
            54px
        ) !important;

    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
}

.landing-planos .landing-secao-cabecalho p {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    color: #686174 !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
}


/* ==========================================================
   GRADE
   ========================================================== */

.landing-planos-grade {
    display: grid !important;

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

    gap: 24px !important;

    align-items: stretch !important;
}


/* ==========================================================
   VARIAVEIS DE CADA PLANO
   ========================================================== */

.landing-plano {
    --plano-cor: #7c3aed;
    --plano-cor2: #5b21b6;
    --plano-soft: #f4edff;
    --plano-borda: #dfd0fa;
    --plano-sombra: rgba(124, 58, 237, .13);
}


/* MENSAL */

.landing-plano-mensal {
    --plano-cor: #7c3aed;
    --plano-cor2: #6d28d9;
    --plano-soft: #f4edff;
    --plano-borda: #dfd0fa;
    --plano-sombra: rgba(124, 58, 237, .14);
}


/* TRIMESTRAL */

.landing-plano.destaque {
    --plano-cor: #6d28d9;
    --plano-cor2: #10b981;
    --plano-soft: #f4efff;
    --plano-borda: #cdb9f7;
    --plano-sombra: rgba(109, 40, 217, .17);
}


/* ANUAL */

.landing-plano-anual {
    --plano-cor: #1687ff;
    --plano-cor2: #2563eb;
    --plano-soft: #edf6ff;
    --plano-borda: #cae2ff;
    --plano-sombra: rgba(22, 135, 255, .14);
}


/* ==========================================================
   CARDS
   ========================================================== */

.landing-plano {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    min-height: 610px !important;

    padding:
        38px 28px 28px !important;

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

    border-radius:
        25px !important;

    background:
        radial-gradient(
            circle at 100% 100%,
            var(--plano-soft),
            transparent 35%
        ),
        #ffffff !important;

    box-shadow:
        0 16px 38px rgba(38, 27, 67, .075) !important;

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


/* faixa superior colorida */

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

    position: absolute !important;
    z-index: 1 !important;

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

    height: 5px !important;

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


/* brilho decorativo inferior */

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

    position: absolute !important;
    z-index: -1 !important;

    width: 180px !important;
    height: 180px !important;

    right: -80px !important;
    bottom: -90px !important;

    border-radius: 50% !important;

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

    opacity: .72 !important;

    pointer-events: none !important;
}


/* destaque trimestral */

.landing-plano.destaque {
    border:
        2px solid #7c3aed !important;

    transform:
        translateY(-7px) !important;

    box-shadow:
        0 23px 52px rgba(109, 40, 217, .15) !important;
}


/* hover */

.landing-plano:hover {
    transform:
        translateY(-5px) !important;

    border-color:
        var(--plano-cor) !important;

    box-shadow:
        0 24px 52px var(--plano-sombra) !important;
}

.landing-plano.destaque:hover {
    transform:
        translateY(-10px) !important;
}


/* ==========================================================
   LABEL MENSAL / TRIMESTRAL / ANUAL
   ========================================================== */

.landing-plano-etiqueta {
    display: inline-flex !important;
    align-items: center !important;

    gap: 8px !important;

    width: fit-content !important;

    margin-bottom: 13px !important;

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

    background:
        transparent !important;

    border:
        none !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    letter-spacing: .08em !important;

    text-transform: uppercase !important;
}


/* pequeno ponto colorido */

.landing-plano-etiqueta::before {
    content: "" !important;

    width: 9px !important;
    height: 9px !important;

    flex: 0 0 9px !important;

    border-radius: 50% !important;

    background:
        var(--plano-cor) !important;

    box-shadow:
        0 0 12px var(--plano-sombra) !important;
}


/* ==========================================================
   SELOS SUPERIORES
   ========================================================== */

.landing-plano-promocao,
.landing-plano-selo {
    display: inline-flex !important;

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

    min-height: 28px !important;

    padding:
        6px 13px !important;

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

    border-radius:
        999px !important;

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

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

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

    font-size: 9.5px !important;
    font-weight: 900 !important;

    letter-spacing: .04em !important;

    text-transform: uppercase !important;
}


/* remove amarelo antigo */

.landing-plano-promocao {
    color:
        var(--plano-cor) !important;

    background:
        var(--plano-soft) !important;
}


/* destaque do trimestral */

.landing-plano.destaque
.landing-plano-selo {
    color:
        #ffffff !important;

    border-color:
        transparent !important;

    background:
        linear-gradient(
            100deg,
            #7c3aed,
            #6d28d9
        ) !important;

    box-shadow:
        0 8px 20px rgba(109, 40, 217, .20) !important;
}


/* anual: elimina a antiga aparencia azul forte */

.landing-plano-promocao.azul {
    color:
        #1673d8 !important;

    border-color:
        #c9e2ff !important;

    background:
        #edf6ff !important;
}


/* ==========================================================
   TITULOS
   ========================================================== */

.landing-plano h3 {
    margin-top: 6px !important;
    margin-bottom: 8px !important;

    color:
        #171426 !important;

    font-size: 27px !important;
    font-weight: 850 !important;

    line-height: 1.12 !important;

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


.landing-plano-descricao {
    margin-bottom: 22px !important;

    color:
        #70697c !important;

    font-size: 13px !important;

    line-height: 1.5 !important;
}


/* ==========================================================
   ECONOMIA
   ========================================================== */

.landing-economia,
.landing-economia.azul {
    display: inline-flex !important;

    width: fit-content !important;

    margin-bottom: 18px !important;

    padding:
        7px 12px !important;

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

    border-radius:
        999px !important;

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

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

    font-size:
        10px !important;

    font-weight:
        850 !important;
}


/* ==========================================================
   PRECO
   ========================================================== */

.landing-preco {
    display: flex !important;

    align-items: baseline !important;

    gap: 7px !important;

    margin-top: 4px !important;
    margin-bottom: 0 !important;

    color:
        #1c1829 !important;
}


.landing-preco-prefixo {
    color:
        var(--plano-cor) !important;

    font-size: 17px !important;

    font-weight: 850 !important;
}


.landing-preco strong {
    color:
        #1b1728 !important;

    font-size:
        clamp(
            50px,
            4vw,
            61px
        ) !important;

    line-height: 1 !important;

    font-weight:
        900 !important;

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


.landing-preco-periodo,
.landing-preco-parcelado,
.landing-preco-depois {
    color:
        #716a7d !important;

    font-size:
        11px !important;

    line-height:
        1.5 !important;
}


.landing-preco-depois strong,
.landing-preco-parcelado strong {
    color:
        #312a40 !important;
}


/* ==========================================================
   ECONOMIA ANUAL
   ========================================================== */

.landing-economia-anual {
    display: inline-flex !important;

    width: fit-content !important;

    margin:
        11px 0 2px !important;

    padding:
        8px 11px !important;

    border-radius:
        11px !important;

    color:
        #1673d8 !important;

    background:
        #edf6ff !important;

    border:
        1px solid #cce3ff !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;
}


/* ==========================================================
   BENEFICIOS
   ========================================================== */

.landing-plano ul {
    display: grid !important;

    gap: 11px !important;

    margin:
        24px 0 26px !important;

    padding: 0 !important;

    list-style:
        none !important;
}


.landing-plano li {
    position: relative !important;

    padding-left:
        29px !important;

    color:
        #575161 !important;

    font-size:
        12.5px !important;

    line-height:
        1.45 !important;
}


/* circulo colorido com check */

.landing-plano li::before {
    content:
        "?" !important;

    position:
        absolute !important;

    left:
        0 !important;

    top:
        0 !important;

    display:
        grid !important;

    place-items:
        center !important;

    width:
        19px !important;

    height:
        19px !important;

    border-radius:
        50% !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--plano-cor),
            var(--plano-cor2)
        ) !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    box-shadow:
        0 5px 13px var(--plano-sombra) !important;
}


/* ==========================================================
   BOTOES
   ========================================================== */

.landing-plano-botao,
.landing-plano-botao.principal,
.landing-plano.destaque .landing-plano-botao,
.landing-plano-anual .landing-plano-botao {
    display: flex !important;

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

    width: 100% !important;

    min-height: 50px !important;

    margin-top: auto !important;

    border:
        1px solid transparent !important;

    border-radius:
        14px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            105deg,
            var(--plano-cor),
            var(--plano-cor2)
        ) !important;

    box-shadow:
        0 10px 24px var(--plano-sombra) !important;

    font-size:
        13.5px !important;

    font-weight:
        850 !important;

    text-decoration:
        none !important;
}


.landing-plano-botao:hover {
    filter:
        brightness(.96) !important;

    transform:
        translateY(-2px) !important;
}


/* ==========================================================
   RODAPE DO CARD
   ========================================================== */

.landing-plano-rodape {
    display: block !important;

    margin-top:
        12px !important;

    color:
        #85808f !important;

    font-size:
        10px !important;

    text-align:
        center !important;
}


/* ==========================================================
   SEGURANCA
   ========================================================== */

.landing-seguranca-planos {
    display: grid !important;

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

    gap:
        14px !important;

    margin-top:
        34px !important;

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;
}


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

    align-items: center !important;

    gap:
        13px !important;

    min-height:
        76px !important;

    padding:
        15px 18px !important;

    border:
        1px solid #e7e1f1 !important;

    border-radius:
        16px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 8px 22px rgba(76, 29, 149, .045) !important;
}


/* ICONE SEGURANCA */

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

    width:
        40px !important;

    height:
        40px !important;

    flex:
        0 0 40px !important;

    place-items:
        center !important;

    border:
        1px solid #ddcff8 !important;

    border-radius:
        12px !important;

    color:
        #6d28d9 !important;

    background:
        #f4edff !important;

    font-size:
        17px !important;
}


/* SEGUNDO BLOCO */

.landing-seguranca-planos > div:nth-child(2) > span {
    color:
        #1687ff !important;

    border-color:
        #cce3ff !important;

    background:
        #edf6ff !important;
}


/* TERCEIRO BLOCO */

.landing-seguranca-planos > div:nth-child(3) > span {
    color:
        #10a66b !important;

    border-color:
        #c9ebdc !important;

    background:
        #ecfaf4 !important;
}


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


.landing-seguranca-planos strong {
    display:
        block !important;

    color:
        #272131 !important;

    font-size:
        11.5px !important;

    font-weight:
        800 !important;
}


.landing-seguranca-planos small {
    display:
        block !important;

    margin-top:
        2px !important;

    color:
        #817a8b !important;

    font-size:
        9.5px !important;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 900px) {

    .landing-planos-grade {
        grid-template-columns:
            1fr !important;

        max-width:
            620px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

    .landing-plano,
    .landing-plano.destaque {
        min-height:
            auto !important;

        transform:
            none !important;
    }

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