/* ============================================= */
/* 0. FUNDAÇÃO E VARIÁVEIS GLOBAIS               */
/* ============================================= */
:root {
    --color-black: #062241;
    --color-white: #FFFFFF;
    --color-highlight: #f7d44e;
    --color-primary-green: #00ED7B;
    --color-primary-red: #FF0000;
    --color-text-light: #FFFFFF;
    --color-text-dark: #000000;
    --color-gradient: linear-gradient(90deg, #FD3A3A 0%, #F6D94F 100%);


    --card-background: #000000;
    --card-color-text: #FFFFF;
    --card-gradient-color: #000000;

      --active-gradient: var(--gradient-green); 


    --session-superiores-backgorund: #071937;
    
    --font-main: 'Museo', sans-serif;
    --font-secondary: 'Nitti', sans-serif; /* Fallback */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-bold: 900;


}

@font-face {
    font-family: 'Museo';
    src: url('../fontes/Museo500-Regular.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Museo';
    src: url('../fontes/Museo900-Regular.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}


/* Reset Básico e Padrões */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-black);
    color: var(--color-text-light);
    line-height: 1.6;
    overflow-x: hidden; /* Previne scroll horizontal */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ============================================= */
/* 1. COMPONENTES E CLASSES UTILITÁRIAS          */
/* ============================================= */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.container--small {
    max-width: 800px;
}

.section__pre-title {
    font-size: 1.25rem;
    font-weight: var(--fw-light);
    text-align: center;
    margin-bottom: 0.5rem;
}

.section__title {
    font-size: 2.5rem;
    font-weight: var(--fw-bold);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 2.5rem;
}

.section__title--decorated {
    position: relative;
    text-transform: uppercase;
    font-size: 3.375rem;
    margin-bottom: 4rem;
}
.section__title--decorated::before {
    content: 'para quem é'; /* Texto de fundo */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8rem;
    font-weight: var(--fw-bold);
    color: #262626;
    z-index: 0;
    white-space: nowrap;
    opacity: 0.5;
}

.section--dark {
    /* background-color: var(--color-black); */
    /*color: var(--color-white); */
}

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





.bold-900 {
    font-weight: var(--fw-bold);
}

.secure-badge {
    margin: 1rem auto 0;
}

.mt-40{
    margin-top: 40px;
}

/* Botão de Ação Principal (CTA) */
.cta-button {
    display: inline-block;
    font-weight: var(--fw-bold);
    text-align: center;
    padding: 16px 40px;
    border-radius: 4px;
    transition: transform 0.3s ease;
}
.cta-button:hover {
    transform: scale(1.05);
}
.cta-button--primary {
    background-color: var(--color-primary-green);
    color: var(--color-text-dark);
}

.cta-button--secundary {
    background-color: var(--color-highlight);
    color: var(--color-text-dark);
}

/* Efeito de brilho para o botão gradiente */
.btn-gradiente {
    position: relative;
    overflow: hidden;
}
.btn-gradiente::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-30deg);
    animation: brilho 3.5s linear infinite;
}




@keyframes brilho {
    0% { left: -100%; }
    100% { left: 200%; }
}


/* ============================================= */
/* 2. HEADER - FAIXA DE URGÊNCIA                 */
/* ============================================= */
.urgency-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-primary-red);
    padding: 12px 0;
    z-index: 1000;
    overflow: hidden;
    white-space: nowrap;
}

.scrolling-text {
    display: flex;
    animation: rolarFaixa 20s linear infinite;
}

.scrolling-text span {
    font-weight: var(--fw-bold);
    font-size: 0.75rem;
    color: var(--color-white);
    letter-spacing: 4px;
    text-transform: uppercase;
    padding-right: 2rem;
}

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

/* ============================================= */
/* 3. HERO SECTION                               */
/* ============================================= */

/*
.hero {
    padding-top: 100px;
    padding-bottom: 50px;
    background-color: var(--color-black);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.hero__logo {
    width: 256px;
    margin-bottom: 1rem;
}

.hero__bullets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.hero__bullets span {
    font-family: 'Museo', sans-serif;
    font-weight: var(--fw-bold);
    font-size: 0.75rem;
    color: var(--color-white);
    background-color: transparent;
    border: 1px solid var(--color-white);
    padding: 4px 15px;
    border-radius: 99px;
}

.hero__headline {
    font-size: 2.25rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    max-width: 800px;
    text-transform: uppercase;
}

.hero__subheadline {
    max-width: 700px;
    font-size: 1rem;
    font-weight: var(--fw-light);
    opacity: 0.9;
}

.hero__cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
    */

/* Carrossel de logos */
.logo-carousel {
    width: 100%;
    overflow: hidden;
    margin-top: 3rem;
    position: relative;
}
.logo-carousel::before,
.logo-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 150px;
    z-index: 2;
}
.logo-carousel::before { left: 0; background: linear-gradient(to right, var(--color-black), transparent); }
.logo-carousel::after { right: 0; background: linear-gradient(to left, var(--color-black), transparent); }

.logo-carousel__track {
    display: flex;
    gap: 40px;
    align-items: center;
    width: max-content;
    animation: moverFaixa 25s linear infinite;
}
.logo-carousel__track img {
    height: 45px;
    width: auto;
    opacity: 0.8;
}

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


/* ============================================= */
/* 4. VIDEO SECTION                              */
/* ============================================= */
.video-section {
    padding: 60px 0;
    /* background-color: var(--color-white); */
    /* color: var(--color-text-dark); */
}

.video-player {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}
.video-player .video-thumbnail {
    width: 100%;
    transition: transform 0.3s ease;
}
.video-player:hover .video-thumbnail {
    transform: scale(1.03);
}
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    width: 100px;
    height: 100px;
    color: white;
    transition: transform 0.3s ease, color 0.3s ease;
}
.play-button::before { /* Usando pseudo-elemento para o ícone SVG */
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="white" filter="drop-shadow(1px 0 6px rgba(0,0,0,.3))"><path d="M838 162C746 71 633 25 500 25 371 25 258 71 163 162 71 254 25 367 25 500 25 633 71 746 163 837 254 929 367 979 500 979 633 979 746 933 838 837 929 746 975 633 975 500 975 367 929 254 838 162M808 192C892 279 933 379 933 500 933 621 892 725 808 808 725 892 621 938 500 938 379 938 279 896 196 808 113 725 67 621 67 500 67 379 108 279 196 192 279 108 383 62 500 62 621 62 721 108 808 192M438 392V642L642 517 438 392Z"></path></svg>');
}
.video-player:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

/* ============================================= */
/* 5. AUDIENCE SECTION                           */
/* ============================================= */
.audience-section {
    padding: 90px 0;
}
.audience-columns {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}
.audience-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.audience-column__title {
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    font-size: 1.375rem;
    font-weight: var(--fw-light);
}
.audience-column__title--negative {
    background-color: #FE5B5D;
    color: var(--color-white);
}
.audience-column__title--positive {
    background-color: #279540;
    color: var(--color-white);
}
.audience-column ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.audience-column ul li {
    padding: 1.5rem 1rem;
    border-radius: 6px;
    font-weight: var(--fw-light);
}
.audience-column--negative ul li {
    background-color: #FFF9F9;
    color: #FE5B5D;
}
.audience-column--positive ul li {
    background-color: #E8F6EB;
    color: #279540;
    font-weight: 500;
}

/* ============================================= */
/* 12. FOOTER                                    */
/* ============================================= */
.footer {
    background-color: var(--color-black);
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.footer__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.footer__social-logo, .footer__main-logo {
    max-width: 200px;
}
.footer__info {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}
.footer__back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1rem;
    font-weight: var(--fw-bold);
}
.footer__back-to-top img {
    display: inline;
}

/* ============================================= */
/* 13. WHATSAPP FLUTUANTE                        */
/* ============================================= */
.whatsapp-float {
    position: fixed;
    bottom: 100px;
    left: 20px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: transform 0.3s ease;
}
.whatsapp-float:hover {
    transform: scale(1.1);
}
.whatsapp-float img {
    width: 30px;
    height: 30px;
}

/* ============================================= */
/* 14. ANIMAÇÕES DE SCROLL                       */
/* ============================================= */
[data-animation] {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animation="scroll-bottom"] { transform: translateY(50px); }
[data-animation="scroll-top"] { transform: translateY(-50px); }
[data-animation="scroll-left"] { transform: translateX(-50px); }
[data-animation="scroll-right"] { transform: translateX(50px); }

[data-animation].is-visible {
    opacity: 1;
    transform: translate(0, 0);
}


/* ============================================= */
/* MEDIA QUERIES (TABLET E DESKTOP)              */
/* ============================================= */
@media (min-width: 768px) {
    .hero__headline {
        font-size: 3rem;
    }
    .audience-columns {
        flex-direction: row;
    }
    .audience-column {
        flex: 1;
    }
    .section__title {
        font-size: 3.375rem;
    }
    .footer__container {
        flex-direction: row;
        justify-content: space-between;
    }
    .footer__info {
        text-align: right;
    }

  
 


}


/* ============================================= */
/* 7. ECOSSISTEMA DE CURSOS                      */
/* ============================================= */
.ecosystem-section {
    padding: 0px 0;
    background-color: var(--color-black);
}

.course-card {
    margin-bottom: 4rem;
}

.course-card__frame {
    /* padding: 2.5rem 1rem; */
    border-radius: 20px;
    border-style: solid;
    /* border-width: 40px 15px 40px 15px;  */ /* Padrão Mobile */
}
/* Cores específicas de cada curso */
.course-card__frame--dmat { border-color: #06ABE7; /* background-color: #06ABE7; */ }
.course-card__frame--lm   { border-color: #172B85; /* background-color: #172B85; */ }
/* Adicionar as outras cores para LF e LC aqui */


.course-card__content {
    /* background-color: var(--card-background); */
    color: var(--card-color-text);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.course-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 4rem;
    width: 100%;
        padding: 30px;
    border-radius: 12px;
}

.course-card__logo {
    max-width: 250px;
}

.course-card__price {
    text-align: center;
    font-size: 0.75rem;
    font-weight: var(--fw-light);
}
.course-card__price span {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: var(--fw-bold);
    color: #ff0000;
    text-decoration: line-through;
}

.course-card__description {
    text-align: left;
    max-width: 660px;
   /*  margin-bottom: 2.5rem; */
}

/* Container dos Módulos */
.modules-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    position: relative;
    max-height: 300px;
    overflow: hidden;
    transition: max-height 1.5s ease-in-out;
}
/* Gradiente para o efeito "Ver Mais" */
.modules-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    /* background: linear-gradient(to bottom, transparent 0%, var(--color-white) 90%); */
     /* background: linear-gradient(to bottom, transparent 0%, var(--card-gradient-color) 90%); */
     background: linear-gradient(to bottom, transparent 0%, var(--card-gradient-color) 70%);
    pointer-events: none;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
/* Classe para expandir */
.modules-container.expandir {
    max-height: 20000px; /* Um valor alto para caber todo o conteúdo */
}
.modules-container.expandir::after {
    opacity: 0;
}

.module-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.module-row__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.module-tag {
    display: inline-block;
    padding: 2px 15px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    background-color: var(--tag-bg, #eee);
    color: var(--tag-color, #333);
}
.module-row h3 {
    font-size: 2rem;
    line-height: 1.2;
}
.module-row h4 {
    font-size: 0.875rem;
    margin-top: 1rem;
}
.module-row ul {
    list-style-type: none;
    font-size: 0.875rem;
    font-weight: var(--fw-light);
    line-height: 1.8;
}

/* Botão Ver Mais */
.ver-mais-wrapper {
    position: relative;
    width: 100%;
    height: 60px; /* Altura para posicionar o botão */
    margin-top: -60px; /* Puxa para cima do gradiente */
    z-index: 5;
}
.modules-container.expandir + .ver-mais-wrapper {
    margin-top: 2rem; /* Espaçamento quando expandido */
}

.ver-mais-button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-white);
    color: var(--color-text-dark);
    border: 1px solid var(--color-text-dark);
    border-radius: 4px;
    padding: 6px 30px;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: all 0.3s ease;
}
.ver-mais-button:hover {
    background-color: var(--color-text-dark);
    color: var(--color-white);
}

/* Seção de Depoimentos */
.testimonial-section {
    width: 100%;
    text-align: center;
    padding: 60px 0;
    font-family: var(--font-main);
}
.testimonial-section__intro {
    font-size: 1.5rem;
    font-weight: 500;
}
.testimonial-section__sub-intro {
    font-size: 0.875rem;
    font-weight: var(--fw-light);
    margin-bottom: 1.5rem;
}
.testimonial-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2rem;
}
.testimonial-filter__button {
    border: none;
    cursor: pointer;
    padding: 4px 30px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 99px;
    background: #e5e5e5;
    color: #000;
    transition: all 0.3s ease;
}
.testimonial-filter__button:hover,
.testimonial-filter__button.active {
    background-color: #6f47e5;
    color: #fff;
    box-shadow: 0 4px 12px rgba(111, 71, 229, 0.25);
}
.testimonial-content__panel {
    display: none; /* Escondido por padrão */
}
.testimonial-content__panel.is-visible {
    display: block; /* Visível quando a classe é adicionada */
}


/* Media Query para Desktop */
@media (min-width: 768px) {
    .course-card__header {
        flex-direction: row;
        justify-content: space-between;
    }
    .course-card__price {
        text-align: right;
    }
    .module-row {
        flex-direction: row;
        /* align-items: center; */
         align-items: flex-start;
    }
    .module-row__content {
        flex: 1;
    }
    .module-row__image {
        flex-basis: 310px;
    }
    /* Inverte a ordem para alguns módulos */
    .module-row:nth-child(even) {
        flex-direction: row-reverse;
    }
}



/*
 * Por padrão, esconde todos os módulos que NÃO SÃO o primeiro.
 * A pseudo-classe :not(:first-child) é perfeita para isso.
*/
.modules-container .module-row:not(:first-child) {
    display: none;
}

/*
 * Quando o container tiver a classe .expandir, nós mudamos a regra
 * e mandamos exibir TODOS os módulos como flex (seu estado original).
*/
.modules-container.expandir .module-row {
    display: flex;
}

.course-card__frame--lf   { border-color: #229074; background-color: #000000; }
.course-card__frame--lc   { border-color: #B19856; background-color: #000000; /*  #B19856; */ }

.course-name-card{
    float: left;
    padding: 30px 20px ;
}




.origina-desativado-temporariamente{
    display: none;
}


.button-group {
    display: flex;            /* Este é o comando mágico que alinha os itens. */
    justify-content: center;  /* Centraliza os botões no espaço disponível. */
    align-items: center;      /* Alinha os botões verticalmente (caso tenham alturas diferentes). */
    flex-wrap: wrap;          /* IMPORTANTE: Permite que os botões quebrem a linha em telas pequenas. */
    gap: 1rem;                /* Cria um espaçamento de 16px entre os botões. */
    margin-left: -60px;
}

/* Estilo para o botão secundário */
.cta-button--secondary {
    background-color: transparent;
    color: var(--color-white); /* Ou a cor que preferir */
    border: 1px solid var(--color-white); /* Ou outra cor da sua paleta */
}

.cta-button--secondary:hover {
    background-color: var(--color-white);
    color: var(--color-black);
}


.modules-container .module-row:last-child {
    margin-bottom: 7rem;
}




article#lc .course-card__header{
    background: #312a18;

}


article#lf .course-card__header{
    background: #18312f;
}


article#lm .course-card__header{
    background: #070e30;
}


article#dmat .course-card__header{
    background: #00455d;
}


/* ============================================= */
/* 20. SEÇÃO ECOSSISTEMA INTRO                   */
/* ============================================= */

.ecosystem-intro-section {
    padding: 90px 0;
    position: relative; /* Necessário para posicionar o texto de fundo */
    text-align: center;
    overflow: hidden; /* Garante que o texto gigante não cause scroll horizontal */
}

/* O texto "ECOSISTEMA UN" no fundo */
.section__background-text {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11rem; /* Equivalente a 178px */
    font-weight: 900;
    color: #262626;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 0;
    user-select: none; /* Impede que o texto decorativo seja selecionado */
}

/* O título principal da seção */
.ecosystem-intro-section .section__title {
    position: relative; /* Para ficar acima do texto de fundo */
    z-index: 1;
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -30px; /* Puxa o título para cima, sobrepondo o texto de fundo */
    margin-bottom: 2.5rem;
    text-transform: uppercase;
}

.ecosystem-mockup {
    max-width: 800px; /* Largura máxima da imagem original */
    margin: 40px auto 0;
}

/* --- Media Query para Mobile (Ajustes de Responsividade) --- */
@media (max-width: 767px) {
    .ecosystem-intro-section {
        padding: 60px 20px;
    }

    /* Em telas pequenas, o texto de fundo some para não poluir */
    .section__background-text {
        display: none; 
    }

    .ecosystem-intro-section .section__title {
        margin-top: 0;
        font-size: 2.25rem; /* 36px */
        line-height: 1.3;
        text-align: center; /* Centralizado no mobile */
    }

    .qualification-v3-section{
        padding-bottom: 40px !important;
        padding-top: 60px !important;
    }


}




/* ============================================= */
/* 21. SEÇÃO "DENTRO DOS CURSOS" (FEATURES)      */
/* ============================================= */

.features-section {
    padding: 90px 0;
    background-color: var(--color-black);
}

.features-section .section__title {
    font-size: 2.25rem; /* 36px */
    font-weight: 300;
    max-width: 715px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
}

.feature-item {
    display: flex;
    flex-direction: column; /* Padrão Mobile: imagem em cima, texto embaixo */
    gap: 2rem;
    align-items: center;
    margin-bottom: 5rem;
}

.feature-item__image img {
    border-radius: 4px;

}

.feature-item__content {
    text-align: center; /* Padrão Mobile */
}

.feature-item__content h3 {
    font-size: 2.625rem; /* 42px */
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--color-white);
}

.feature-item__content p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    max-width: 500px; /* Limita a largura do texto para melhor leitura */
    margin: 0 auto;
}

/* --- Media Query para Desktop (Layout de duas colunas) --- */
@media (min-width: 768px) {
    .feature-item {
        flex-direction: row; /* Lado a lado no desktop */
        gap: 2.25rem; /* 36px */
    }

    .feature-item__image {
        flex-basis: 50%;
    }

    .feature-item__content {
        flex-basis: 50%;
        text-align: left; /* Alinha o texto à esquerda no desktop */
    }
    .feature-item__content p {
        margin: 0; /* Remove a margem automática do mobile */
    }

    /* Regra para inverter a ordem */
    .feature-item.feature-item--reverse {
        flex-direction: row-reverse;
    }
}

/* --- Media Query para Mobile (Ajustes finos) --- */
@media (max-width: 767px) {
    .features-section .section__title {
        font-size: 1.75rem; /* Título menor no mobile */
    }
    .feature-item__content h3 {
        font-size: 2rem; /* Título do benefício menor no mobile */
    }
}


/* ============================================= */
/* 22. SEÇÃO BÔNUS - CURSOS SUPERIORES           */
/* ============================================= */
.future-courses-section {
    padding-top: 90px;
    padding-bottom: 90px;
    background-color: var(--session-superiores-backgorund)
}
.future-courses-section .text-center {
    text-align: center;
}
.future-courses__stop-icon {
    width: 143px;
    margin: 0 auto;
    margin-bottom: 30px;;
}
.future-courses__intro-text {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.5;
    margin-top: 1rem;
}
.future-courses__main-title {
    font-size: 3.125rem;
    font-weight: 900;
    line-height: 1.2;
    margin-top: 1rem;
    margin-bottom: 4rem;
}
.future-courses__launch-banner {
    padding: 60px 20px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}
.future-courses__launch-banner img {
    max-width: 60%;
    margin: 0 auto;
}
.future-courses__offer-title {
    font-size: 2.25rem;
    line-height: 1.3;
    /* max-width: 950px; */
    margin-top: 60px;
    margin-bottom: 1rem;
}
.future-courses__offer-subtitle {
    max-width: 850px;
    margin: 0 auto 4rem;
    font-weight: 300;
    text-align: center;
}
.future-courses__grid {
    display: flex;
    flex-direction: column;
    gap: 4.5rem; /* 70px */
    max-width: 900px;
    margin: auto;
}
.future-course-card {
    /*  background-color: #fff; */
    color: #FFF;
    border-radius: 12px;
    padding: 20px 12px 40px;
}
.future-course-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.future-course-card__logo {
    max-width: 230px;
}
.future-course-card__price {
    font-size: 0.75rem;
    font-weight: 300;
    text-align: center;
}
.future-course-card__price span {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 900;
    color: #ff0000;
    text-decoration: line-through;
}
.future-course-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.future-course-card__content {
    text-align: center;
}
.future-course-card__tag {
    display: inline-block;
    padding: 2px 15px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 900;
    background-color: #10a39a;
    color: #061937;
    margin-bottom: 1rem;
}
.future-course-card__content h3 {
    font-size: 2.375rem; /* 38px */
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.future-course-card__content p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
}
.future-course-card__launch-info {
    font-size: 0.75rem;
    line-height: 1.8;
    margin-top: 1rem;
}
.future-course-card__image {
    max-width: 340px;
}

/* --- Media Query para Desktop --- */
@media (min-width: 768px) {
    .future-course-card {
       /* padding: 20px 60px 40px; */
    }
    .future-course-card__header {
        flex-direction: row;
        justify-content: space-between;
    }
    .future-course-card__price {
        text-align: right;
    }
    .future-course-card__body {
        flex-direction: row;
        align-items: center;
        gap: 2.25rem;
    }
    .future-course-card__content {
        flex: 1;
        text-align: left;
    }
    .future-course-card__image {
        flex-basis: 340px;
    }
    /* Alterna a ordem para o segundo e quarto card */

    /*
    .future-course-card:nth-of-type(even) .future-course-card__body {
        flex-direction: row-reverse;
    }
        */
}

/* --- Media Query para Mobile (Ajustes finos) --- */
@media (max-width: 767px) {
    .future-courses__main-title {
        font-size: 2.25rem;
    }
    .future-courses__offer-title {
        font-size: 1.75rem;
    }
    .future-course-card__content h3 {
        font-size: 2rem;
    }

    .future-courses__launch-banner {
        padding: 0px 20px;
    }

    .double-offer-card{
        padding: 1rem !important;
    }

    /*
    .hero{
            padding-top: 0px !important;
            margin-top: -40px;
    }

    .hero__bullets {
        display: none;
    }

    .hero__headline {
        font-size: 1.8rem;
    }

    */

        .card-action-new .payment-methods img {
            max-width: 100% !important;
        }

        .double-offer-section{
            padding-bottom: 0rem !important;
        }


    
}

/* --- Media Query para Mobile (Ajustes finos) --- */
@media (max-width: 767px) {
    .future-courses__main-title {
        font-size: 2.25rem;
    }
    .future-courses__offer-title {
        font-size: 1.75rem;
    }
    .future-course-card__content h3 {
        font-size: 2rem;
    }
}




/* ============================================= */
/* 23. SEÇÃO DE TRANSIÇÃO (SURPRESA)             */
/* ============================================= */
.transition-section {
    position: relative;
    padding: 0px 0;
    text-align: center;
    color: #fff;
    margin-top: 4rem;
    padding-bottom: 5rem;
   

    /* GRADIENTE */
    background: linear-gradient(180deg, #000000 0%, #2a0a0a 100%); 
   /* background: #2a0a0a; */
}
.transition-section__title {
    font-size: 3.375rem; /* 54px */
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.transition-section__subtitle {
    font-size: 1.25rem; /* 20px */
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Novo Gradiente Dourado/Black Friday */
.text-gradient-gold {
    background: linear-gradient(90deg, #FFD700, #F0A500);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}




/* Estilo das Formas Onduladas (SVGs) */
.transition-section__shape {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0; 
}

.transition-section__shape--top {
    top: -80px; 
}

.transition-section__shape--bottom {
    bottom: -60px;
}

.transition-section__shape svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px; 
}

.transition-section__shape path {
    fill: #2a0a0a; 
}


.transition-section__shape--bottom path {
    fill: #2a0a0a !important;

}




/* --- Media Query para Mobile --- */
@media (max-width: 767px) {
    .transition-section {
        padding: 0px 20px 50px 0px;
    }
    .transition-section__title {
        font-size: 2rem; /* Título menor no mobile */
    }
    .transition-section__subtitle {
        font-size: 1rem;
    }
    .transition-section__shape svg {
        height: 50px; /* Ondas menores no mobile */
    }


}


/* ============================================= */
/* 24. SEÇÃO "DENTRO DOS CURSOS" (VERSÃO 2 - INTERATIVA) */
/* ============================================= */
.features-v2-section {
    padding: 90px 0;
}
.features-v2-section__subtitle {
    max-width: 600px;
    margin: -2rem auto 3rem;
    font-size: 1.25rem;
    font-weight: 300;
    text-align: center;
}
.features-v2-mockup {
    max-width: 1000px;
    margin: 0 auto 3rem;
    padding: 0 20px;
}
.features-v2-interactive-wrapper {
    display: flex;
    flex-direction: column; /* Padrão Mobile */
    gap: 2rem;
}
.features-v2-tabs {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Para quebrar linha no mobile */
    gap: 0.5rem;
    justify-content: center; /* Centraliza no mobile */
}
.features-v2-tab {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    font-weight: 500;
}
.features-v2-tab .tab-icon {
    display: none; /* Escondido por enquanto, podemos adicionar SVGs depois */
}
.features-v2-tab:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.features-v2-tab.active {
    background-color: var(--color-primary-green);
    color: var(--color-black);
    border-color: var(--color-primary-green);
    font-weight: 900;
}
.features-v2-content {
    position: relative;
    min-height: 150px; /* Evita "pulos" de layout */
}
.features-v2-panel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-out, visibility 0.4s;
    position: absolute; /* Todos os painéis ocupam o mesmo espaço */
    top: 0;
    left: 0;
    width: 100%;
}
.features-v2-panel.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* O painel ativo ocupa seu espaço natural */
}
.features-v2-panel h3 {
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: 1rem;
}
.features-v2-panel p {
    font-size: 1.125rem;
    line-height: 1.7;
    font-weight: 300;
}

/* --- Media Query para Desktop --- */
@media (min-width: 992px) {
    .features-v2-interactive-wrapper {
        flex-direction: row;
        gap: 4rem;
        align-items: flex-start;
    }
    .features-v2-tabs {
        flex-direction: column;
        flex-basis: 35%; /* Largura da coluna de abas */
    }
    .features-v2-tab {
        padding: 20px;
    }
    .features-v2-content {
        flex-basis: 65%; /* Largura da coluna de conteúdo */
        min-height: 300px;
    }
}


/* ======================================================= */
/* 25. SEÇÃO "DENTRO DOS CURSOS" (VERSÃO 3 - HUB INTERATIVO) */
/* ======================================================= */

:root {
    /* Cores dos gradientes para o fundo dinâmico */
    --gradient-green: radial-gradient(circle at 70% 30%, rgba(0, 237, 123, 0.15), transparent 40%);
    --gradient-blue: radial-gradient(circle at 70% 30%, rgba(6, 171, 231, 0.15), transparent 40%);
    --gradient-purple: radial-gradient(circle at 70% 30%, rgba(111, 71, 229, 0.15), transparent 40%);
    --gradient-yellow: radial-gradient(circle at 70% 30%, rgba(240, 165, 0, 0.15), transparent 40%);
    --gradient-red: radial-gradient(circle at 70% 30%, rgba(254, 91, 93, 0.15), transparent 40%);
    --gradient-cyan: radial-gradient(circle at 70% 30%, rgba(24, 168, 175, 0.15), transparent 40%);
    /* Variável que será alterada pelo JS */
    --active-gradient: var(--gradient-green); 
}

.features-v3-section {
    padding: 0;
    margin-top: 80px;
}

.features-v3-section__subtitle {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 300;
    max-width: 800px;
    margin: 2rem auto 5rem;
}

.features-v3-mockup {
    max-width: 1000px;
    margin: 0 auto 4rem;
    padding: 0 20px;
}

.features-v3-interactive-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 120px;;
}

.features-v3-tabs {
    list-style: none;
    display: flex;
    flex-direction: column; /* Pilha vertical por padrão */
    gap: 1rem;
}

.features-v3-tab {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    background-color: rgba(255, 255, 255, 0.05);
}

.tab-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 700;
    font-size: 0.875rem;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.tab-title {
    font-weight: 500;
}

.features-v3-tab:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.features-v3-tab.active {
    border-color: var(--color-primary-green);
    background-color: rgba(0, 237, 123, 0.1);
}
.features-v3-tab.active .tab-number {
    background-color: var(--color-primary-green);
    color: var(--color-black);
    border-color: var(--color-primary-green);
}
.features-v3-tab.active .tab-title {
    font-weight: 900;
    color: var(--color-primary-green);
}

.features-v3-content-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden; /* Importante para o efeito do gradiente */
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.03); /* Fundo sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.features-v3-content-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: var(--active-gradient);
    transition: background-image 0.5s ease-in-out;
}

.features-v3-content {
    position: relative;
    z-index: 1;
}

.features-v3-panel {
    display: none; /* Mais simples que opacity para este caso */
}
.features-v3-panel.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}



/* --- Media Query para Desktop --- */
@media (min-width: 992px) {
    .features-v3-interactive-wrapper {
        display: grid;
        grid-template-columns: 300px 1fr; /* Coluna de abas fixa, conteúdo flexível */
        gap: 2rem;
    }
    .features-v3-tabs {
        flex-direction: column;
    }
    .features-v3-content-wrapper {
        min-height: 500px; /* Garante altura mínima para o efeito visual */
    }
}

/* ============================================= */
/* 25. CSS PARA PLAYER DE VÍDEO RESPONSIVO       */
/* ============================================= */

.video-container-ajuste {
    position: relative;
    width: 100%;
    /* 
     * Fallback para navegadores antigos: o "padding-top hack". 
     * 56.25% é o resultado de 9 / 16, que é a proporção de um vídeo 16:9 (widescreen).
     * Isso força a altura do container a ser proporcional à sua largura.
    */
    padding-top: 56.25%; 
    height: 0;
    overflow: hidden;
    background-color: #000; /* Fundo preto enquanto o vídeo carrega */
    border-radius: 8px; /* Opcional: para bordas arredondadas */
}

/* 
 * A abordagem mais moderna com aspect-ratio. 
 * Navegadores que entendem isso ignorarão o padding-top hack.
*/
@supports (aspect-ratio: 16 / 9) {
    .video-container-ajuste {
        aspect-ratio: 16 / 8;
        /* Reseta as propriedades do fallback */
        padding-top: 0;
        height: auto;
    }
}

.video-container-ajuste video,
.video-container-ajuste iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



@media (min-width: 992px) {
    .features-v3-interactive-wrapper { display: grid; grid-template-columns: 35% 1fr; gap: 2rem; align-items: flex-start; }
    .features-v3-accordion-item .features-v3-panel { display: none !important; } /* Esconde painéis no desktop */
    .features-v3-content-wrapper-desktop { display: block; position: relative; border-radius: 12px; overflow: hidden; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); min-height: 500px; }
    .features-v3-content-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-image: var(--active-gradient); transition: background-image 0.5s ease-in-out; }
    .features-v3-content-desktop { padding: 2rem; position: relative; z-index: 1; }
    .features-v3-content-desktop .features-v3-panel { display: block; animation: fadeIn 0.5s ease-in-out forwards; }
}
/* ============================================= */
/* 26. ESTILO PARA TÍTULO COM HIERARQUIA VISUAL  */
/* ============================================= */

.headline-group {
    text-align: center;
    margin-bottom: 2.5rem; /* Espaçamento que antes era da h2 */
}

.headline-group__intro {
    font-size: 1.75rem; /* Tamanho menor que o título principal */
    font-weight: 300;   /* Fonte mais leve */
    line-height: 1.5;
    opacity: 0.8;       /* Levemente mais sutil */
    margin-bottom: 0.5rem; /* Pequeno espaço entre as frases */
   
   margin-top: 4rem; /* Pequeno espaço entre as frases */
   
    
}

.headline-group__main {
    font-size: 2.5rem; /* Tamanho grande e de impacto */
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

/* --- Ajustes para Mobile --- */
@media (max-width: 767px) {
    .headline-group__intro {
        font-size: 1.25rem;
    }
    .headline-group__main {
        font-size: 2.25rem;
    }
}




/* ======================================================= */
/* 28. SEÇÃO GPE (VERSÃO FINAL - HUB DE FEATURES)          */
/* ======================================================= */

.gpe-final-section {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho sutil no topo */
.gpe-final-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 50%;
    background: radial-gradient(circle, rgba(0, 237, 123, 0.1), transparent 70%);
    filter: blur(100px);
    pointer-events: none;
}

/* Tag ajustada com a fonte maior */
.gpe-final-tag {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    background-color: rgba(0, 237, 123, 0.1);
    color: var(--color-primary-green);
    font-weight: 700;
    font-size: 1.2rem; /* <<< AJUSTE FEITO CONFORME SOLICITADO */
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.gpe-final-subtitle {
    text-align: center;
    font-size: 1.125rem;
    font-weight: 300;
    max-width: 800px;
    margin: -1.5rem auto 4rem;
    opacity: 0.9;
}

.gpe-final-mockup-wrapper {
    
    max-width: 800px;
    margin: auto auto 60px;margin-bottom: 4rem;


    animation: flutuar 5s ease-in-out infinite;
}

/* Imagem centralizada e sem borda */
.gpe-final-mockup-wrapper img {
    border-radius: 12px;
    /* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); */
    border: none; /* <<< REMOÇÃO DA BORDA */
    margin: 0 auto; /* <<< CENTRALIZAÇÃO DA IMAGEM */
}

/* Grid de duas colunas para as features */
.gpe-final-features-grid , .bonus-grid{
    list-style: none;
    display: grid;
    grid-template-columns: 1fr; /* Padrão Mobile: uma coluna */
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.gpe-final-features-grid li ,
.bonus-grid li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gpe-final-features-grid .feature-icon,
.bonus-grid .feature-icon {
    font-size: 1.5rem;
    margin-top: 2px;
}

.gpe-final-features-grid strong ,
.bonus-grid strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--color-white);
}

.gpe-final-features-grid p,
.bonus-grid p {
    font-weight: 300;
    opacity: 0.8;
    margin: 0;
}

.gpe-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* --- Media Query para Desktop --- */
@media (min-width: 768px) {
    .gpe-final-features-grid {
        /* Layout de duas colunas para tablet e desktop */
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }


 .bonus-grid {
        /* Layout de duas colunas para tablet e desktop */
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

}

.new-badge {
    display: inline-block;
    margin-left: 0.4em; /* Espaçamento do texto anterior */
    padding: 2px 6px;
    font-size: 0.65rem; /* Bem pequeno para não poluir */
    font-weight: 900;
    line-height: 1;
    color: #000; /* Texto preto */
    background-color: var(--color-primary-green); /* Verde principal da sua marca */
    border-radius: 4px;
    text-transform: uppercase;
    vertical-align: middle; /* Alinha o badge com o meio do texto */
    position: relative;
    top: -1px; /* Ajuste fino de posicionamento vertical */
    margin-top:15px;
}


/* ======================================================= */
/* 29. NOVA SEÇÃO DE ATUALIZAÇÕES (NOVAS TRILHAS)          */
/* ======================================================= */

.updates-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.updates-section__subtitle {
    text-align: center;
    font-size: 1.125rem;
    font-weight: 300;
    max-width: 700px;
    margin: -1.5rem auto 4rem;
    opacity: 0.9;
}

.updates-grid {
    display: grid;
    grid-template-columns: 1fr; /* Padrão Mobile: uma coluna */
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.update-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    padding: 2rem 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.update-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.update-card__icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.update-card__content h3 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.update-card__content p {
    font-weight: 300;
    opacity: 0.8;
    line-height: 1.7;
}

.updates-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* --- Media Query para Desktop --- */
@media (min-width: 992px) {
    .updates-grid {
        /* Layout de três colunas para desktop */
        grid-template-columns: repeat(3, 1fr);
    }
    .update-card {
        text-align: left; /* Alinha o texto à esquerda no desktop */
    }
}


/* ======================================================= */
/* 29. SEÇÃO ATUALIZAÇÕES (VERSÃO GOLD REFINADA)           */
/* ======================================================= */

.updates-gold-section {
    padding-top: 0; /* Removemos o padding superior para o marquee encostar no topo */
    padding-bottom: 120px;
    position: relative;
    overflow: hidden;
}

/* 1. Gradiente Radial Dourado posicionado no TOPO */
.updates-gold-background-glow {
    position: absolute;
    top: -250px; /* Puxa o brilho para cima, começando fora da tela */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 500px;
    background: radial-gradient(circle, rgba(240, 165, 0, 0.15), transparent 60%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0; /* Fica atrás de tudo */
}

/* 2. Faixa Animada (Marquee) no TOPO */
.marquee-wrapper {
    width: 100%;
    padding: 1rem 0;
    background-color: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    margin-bottom: 4rem;
    white-space: nowrap;
    overflow: hidden;
    position: relative; /* Garante que fique acima do brilho de fundo */
    z-index: 1;
}

.marquee-track {
    display: flex;
    animation: marquee-scroll 20s linear infinite;
}

.marquee-track span {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFD700;
    padding: 0 2rem;
    flex-shrink: 0;
}

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

/* Centralização do conteúdo principal */
.updates-gold-section .headline-group {
    position: relative;
    z-index: 1;
}
.updates-gold-section .updates-gold-subtitle {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 300;
    max-width: 700px;
    margin: -1.5rem auto 4rem;
    opacity: 0.9;
}

/* 3. Tag com Efeito de Brilho Pulsante */
.updates-gold-tag {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: rgba(255, 215, 0, 0.1);
    color: #FFD700;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 215, 0, 0.3);
    animation: pulse-glow 2.5s infinite ease-in-out;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.2), 0 0 20px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.4), 0 0 50px rgba(255, 215, 0, 0.2);
    }
}

/* Grid de Cards */
.updates-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 4rem;
    position: relative; /* Garante que fique acima do brilho de fundo */
    z-index: 1;
}

.update-card h3 {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza no mobile */
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* O CSS da classe .new-badge que já criamos antes vai funcionar aqui automaticamente */

/* --- Media Query para Desktop --- */
@media (min-width: 992px) {
    .updates-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .update-card h3 {
        justify-content: flex-start; /* Alinha à esquerda no desktop */
    }
}



/* ======================================================= */
/* 31. SEÇÃO "PARA QUEM É" (VERSÃO B - LAYOUT "HERO")      */
/* ======================================================= */

.qualification-v3-section {
    padding: 80px 0;
    background-color: var(--color-black);
    position: relative;
    overflow: hidden;
}

/* Os estilos para tag, subtítulo, etc., permanecem os mesmos */
.qualification-v3-tag {
    display: inline-block; padding: 6px 12px; border-radius: 6px;
   background-color: #6b7256;
    color: #ffffff;
    font-weight: 700; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1.5rem;
}
.qualification-v3-subtitle {
    text-align: center; font-size: 1.125rem; font-weight: 300;
    max-width: 800px; margin: -1.5rem auto 4rem; opacity: 0.9;
}

/* --- Layout Mobile-First --- */
.qualification-v3-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.qualification-v3-image-wrapper {
    width: 100%;
    max-width: 500px;
    order: 1; /* Imagem aparece primeiro no mobile */
    margin-bottom: -2rem; /* Leve sobreposição para conectar com o texto */
}
.qualification-v3-image-wrapper img {
    max-width: 100%;
    margin: 0 auto;
}

.qualification-v3-profiles {
    width: 100%;
    order: 2; /* Texto aparece depois */
    position: relative; /* Garante que fique sobre o brilho de fundo */
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Estilos dos itens da lista (mantidos) */
.profile-v3-item h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid; }
.profile-v3-title--positive { color: #00ED7B; border-color: rgba(52, 211, 153, 0.3); }
.profile-v3-title--negative { color: #ff4d4d; border-color: rgba(248, 113, 113, 0.3); }
.profile-v3-item ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.profile-v3-item ul li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.bullet { font-weight: 900; font-size: 1.25rem; }
.bullet--positive { color: #34D399; }
.bullet--negative { color: #F87171; }
.profile-v3-divider { height: 1px; width: 100%; background-color: rgba(255, 255, 255, 0.15); margin: 1rem 0; }
.qualification-v3-cta-group { text-align: center; margin-top: 4rem; }

/* 1. O GRANDE GRADIENTE RADIAL NO FUNDO */
.qualification-v3-background-glow {
    position: absolute;
    top: -300px; /* Posicionado bem acima para criar um efeito de "luz vindo de cima" */
    left: 50%;
    transform: translateX(-50%);
    width: 150%; /* Bem largo para cobrir toda a área */
    max-width: 1600px;
    height: 600px;
    background: radial-gradient(circle, #00b6de6e, transparent 65%); /* Verde para transparente */
    filter: blur(120px);
    pointer-events: none; /* Garante que não interfira com cliques */
    z-index: 0; /* Camada mais baixa */
}




/* --- Media Query para Desktop (onde a mágica da sobreposição acontece) --- */
@media (min-width: 992px) {
    .qualification-v3-grid {
        /* Usamos Grid para controle preciso da sobreposição */
        display: grid;
        grid-template-columns: repeat(12, 1fr); /* Grid de 12 colunas */
        align-items: center;
        position: relative; /* Âncora para a imagem absoluta */
        padding: 4rem 0; /* Espaçamento extra para a imagem "respirar" */
    }

    .qualification-v3-profiles {
        /* O conteúdo de texto ocupa da coluna 1 à 7 */
        grid-column: 1 / span 7;
        grid-row: 1; /* Fica na primeira linha do grid */
        z-index: 2; /* Fica NA FRENTE */
        order: initial; /* Reseta a ordem do mobile */
    }
    
    /* Remove a divisória horizontal no desktop */
    .profile-v3-divider {
        display: none;
    }

    .qualification-v3-image-wrapper {
        /* A imagem é posicionada de forma absoluta em relação ao grid */
        position: absolute;
      /*  top: 50%; */
        right: 0;
        width: 80%; /* A imagem terá 80% da largura do grid */
       /* transform: translate(-50%, -50%); *//* Centraliza a imagem perfeitamente */
        z-index: 1; /* Fica ATRÁS do texto */
        order: initial;
        margin-bottom: 0;
    }

    .qualification-v3-image-wrapper img {
        width: 100%;
        /* Efeito de esmaecer nas bordas para integrar melhor com o fundo */
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    }
}

/* ======================================================= */
/* 29. NOVA SEÇÃO DE ATUALIZAÇÕES (NOVAS TRILHAS)          */
/* ======================================================= */

.updates-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.updates-section__subtitle {
    text-align: center;
    font-size: 1.125rem;
    font-weight: 300;
    max-width: 700px;
    margin: -1.5rem auto 4rem;
    opacity: 0.9;
}

.updates-grid {
    display: grid;
    grid-template-columns: 1fr; /* Padrão Mobile: uma coluna */
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.update-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    padding: 2rem 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.update-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.update-card__icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.update-card__content h3 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.update-card__content p {
    font-weight: 300;
    opacity: 0.8;
    line-height: 1.7;
}

.updates-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* --- Media Query para Desktop --- */
@media (min-width: 992px) {
    .updates-grid {
        /* Layout de três colunas para desktop */
        grid-template-columns: repeat(3, 1fr);
    }
    .update-card {
        text-align: left; /* Alinha o texto à esquerda no desktop */
    }
}

/* ======================================================= */
/* 32. SEÇÃO PROVA SOCIAL (VERSÃO "RIO DE IMAGENS")        */
/* ======================================================= */

.social-proof-section {
    padding: 80px 0;
    text-align: center;
    overflow: hidden;
}

.social-proof-tag {
    display: inline-block; padding: 6px 12px; border-radius: 6px;
    background-color: rgba(0, 237, 123, 0.1); color: var(--color-primary-green);
    font-weight: 700; font-size: 1rem; margin-bottom: 1.5rem;
}

.swiper-container-wrapper {
    position: relative;
    width: 100%;
    margin-top: 2rem;
}

.social-proof-slider {
    width: 100%;
    height: 560px;
    padding: 2rem 0;
}

/* CORREÇÃO: Alinha todos os slides verticalmente ao centro */
.swiper-wrapper {
    align-items: center;
}

.swiper-slide {
    width: 260px !important; 
    height: auto !important; /* MUDANÇA: Deixa a altura automática para respeitar o scale */
    max-height: 510px; /* Define uma altura máxima */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0.5;
    transform: scale(0.85);
     transition: 0.3s;
}

/* ... o resto das suas regras .swiper-slide-next, .swiper-slide-active, etc. permanecem as mesmas ... */

.swiper-slide-next,
.swiper-slide-prev {
    opacity: 0.7;
    transform: scale(0.9);
}

.swiper-slide-active {
    opacity: 1;
    transform: scale(1.05);
    z-index: 1;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 3px solid transparent;
    transition: border-color 0.4s ease;
}

.swiper-slide-active img {
    border-color: var(--color-primary-green);
}

/* Estilização das Setas */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-primary-green);
    top: 50%;
    transform: translateY(-50%);
    --swiper-navigation-size: 30px;
}

/* --- Media Query para Mobile --- */
@media (max-width: 767px) {
    .social-proof-slider {
        height: 500px;
    }
    .swiper-slide {
        width: 300px;
    }
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
}

/* ======================================================= */
/* 34. EFEITO DE FADE NAS LATERAIS DO CARROSSEL            */
/* ======================================================= */

/*
 * O wrapper principal precisa ser a referência de posicionamento
 * para as sobreposições de degradê.
*/
.swiper-container-wrapper {
    position: relative;
}

/*
 * Criamos os pseudo-elementos ::before (esquerda) e ::after (direita).
 * Eles são blocos posicionados absolutamente sobre o carrossel.
*/
.swiper-container-wrapper::before,
.swiper-container-wrapper::after {
    content: '';          /* Essencial para que pseudo-elementos apareçam */
    position: absolute;   /* Posicionamento sobreposto */
    top: 0;
    bottom: 0;
    width: 150px;         /* Largura do degradê */
    z-index: 2;           /* Garante que fiquem ACIMA dos slides */
    pointer-events: none; /* Impede que eles bloqueiem cliques ou o arrastar do mouse */
}

/* Sobreposição da Esquerda */
.swiper-container-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--color-black) 0%, transparent 100%);
}

/* Sobreposição da Direita */
.swiper-container-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--color-black) 0%, transparent 100%);
}


/* --- Media Query para Mobile (degradê menor) --- */
@media (max-width: 767px) {
    .swiper-container-wrapper::before,
    .swiper-container-wrapper::after {
        width: 50px; /* Largura menor do degradê em telas pequenas */
    }

    .transition-section__shape--bottom {
       bottom: -50px;
    }
}




/* ======================================================= */
/* 36. SEÇÃO DE OFERTA FINAL (VERSÃO DEFINITIVA E COMPLETA) */
/* ======================================================= */

.offer-section-final {
    padding-top: 0;
    padding-bottom: 0px;
    position: relative;
    overflow: hidden;
}

/* Marquee de Destaques */
.offer-marquee-wrapper {
    padding: 0.8rem 0;
    background-color: rgba(0, 237, 123, 0.1);
    border-top: 1px solid rgba(0, 237, 123, 0.2);
    border-bottom: 1px solid rgba(0, 237, 123, 0.2);
    margin-bottom: 4rem;
    white-space: nowrap;
    overflow: hidden;
}
.offer-marquee-track { display: flex; animation: offer-marquee-scroll 25s linear infinite; }
.offer-marquee-track span { font-size: 1.1rem; font-weight: 700; color: var(--color-primary-green); padding: 0 1.5rem; flex-shrink: 0; }
@keyframes offer-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Título e Subtítulo */
.offer-section-final .headline-group__main { font-size: 3rem; }
.offer-final-subtitle { text-align: center; font-size: 1.125rem; max-width: 600px; margin: -1.5rem auto 4rem; opacity: 0.9; }

/* Grid Principal da Oferta */
.offer-final-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Coluna Esquerda: Detalhes da Oferta */
.offer-details-column {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
}
.offer-package h3 { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; text-align: center; margin-bottom: 2rem; color: var(--color-primary-green); }
.offer-accordion-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 1rem; }
.offer-accordion-item summary { font-size: 1.125rem; font-weight: 700; padding: 1rem 0; cursor: pointer; list-style: none; position: relative; 
color: #58ff92;
}
.offer-accordion-item summary::-webkit-details-marker { display: none; }
.offer-accordion-item summary::after {
    content: '+'; /* Ícone para o estado ABERTO (padrão) */
    position: absolute; right: 0; font-size: 1.5rem;
     color: var(--color-primary-green);
    transition: transform 0.3s ease, color 0.3s ease;
}
.offer-accordion-item:not([open]) summary::after {
    content: 'o'; /* Ícone para o estado FECHADO */
       color: #ffffff; /* Vermelho */

   /* color: var(--color-primary-green); */
}
.offer-accordion-content { animation: fadeIn 0.4s ease-out forwards; }
.offer-accordion-content ul { list-style: none; padding: 0 0 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.offer-accordion-content ul li, .offer-accordion-content ul li a { display: flex; justify-content: space-between; align-items: center; opacity: 0.8; transition: opacity 0.3s ease; 
color: #fff;
}
.offer-accordion-content ul li a:hover { opacity: 1; }
.price-tag { font-weight: 700; color: #da0000; }
.details-link { font-size: 0.9rem; color: var(--color-primary-green); text-decoration: underline; font-weight: 500; }


/* Coluna Direita: CTA e Formulário */
.offer-cta-column {
    background-color: #001703; /* COR DE FUNDO AJUSTADA */
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
}
.offer-condition { font-size: 1.25rem; color: var(--color-primary-green); margin-bottom: 1rem; }
.discount-value { font-size: 1.5rem; margin-bottom: 1.5rem; color: #FFF; }
.text-gradient-red { background: linear-gradient(90deg, #F87171 0%, #FFD700 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.offer-price-box { margin-bottom: 0.5rem; }
.installments { font-size: 1.5rem; font-weight: 300; margin-right: 0.5rem; }
.main-price { font-size: 4rem; font-weight: 900; line-height: 1; color: #fff; }
.cents { font-size: 2rem; }
.price-alternative { opacity: 0.8; margin-bottom: 2rem; }
.offer-form { margin-bottom: 2rem; }
.form-instruction { font-size: 1rem; opacity: 0.9; margin-bottom: 1rem; }
.offer-form input { width: 100%; padding: 14px 18px; margin-bottom: 1rem; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: #fff; font-size: 1rem; }
.offer-form input::placeholder { color: rgba(255, 255, 255, 0.6); }
.offer-form input:focus { outline: none; border-color: var(--color-primary-green); }
.cta-main-offer { width: 90%; font-size: 1.25rem; margin-bottom: 1.5rem; 
/*padding: 30px 40px; */
padding: 20px;
}
.aluno-un-promo { background-color: rgba(0, 237, 123, 0.1); border: 1px solid var(--color-primary-green); border-radius: 8px; padding: 1rem; font-size: 0.95rem; line-height: 1.5; }
.secure-badge-offer { margin: 1.5rem auto 0; }

/* Box de Garantia */
.guarantee-box-wrapper { width: 100%; }
.guarantee-box { display: flex; align-items: center; justify-content: center; gap: 1rem; background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 1rem 1.5rem; }
.guarantee-icon { width: 30px; height: 30px; }
.guarantee-content { text-align: left; }
.guarantee-content strong { display: block; font-size: 1rem; margin-bottom: 0.25rem; color: #FFF; }
.guarantee-content p { font-size: 0.85rem; opacity: 0.7; margin: 0; }
.guarantee-content p strong { font-weight: 700; color: rgba(255,255,255,0.9); }
.guarantee-content a { text-decoration: underline; color: var(--color-primary-green); }

/* --- Media Query para Desktop --- */
@media (min-width: 992px) {
    .offer-final-grid {
        grid-template-columns: 1fr 450px;
        grid-template-rows: auto auto; 
        gap: 0 2rem;
        align-items: flex-start;
    }
    .offer-details-column { grid-column: 1 / 2; grid-row: 1 / span 2; }
    .offer-cta-column { grid-column: 2 / 3; grid-row: 1 / 2; }
    .guarantee-box-wrapper { grid-column: 2 / 3; grid-row: 2 / 3; padding-top: 1.5rem; }
}

/* --- Medi



/* ======================================================= */
/* 37. SEÇÃO BÔNUS ESPECIAL: GPQ                         */
/* ======================================================= */

.gpq-bonus-section {
    padding: 0px 0;
    position: relative;
    overflow: hidden;
    padding-bottom: 0px;
    background: #280747;
}

.gpq-bonus-subtitle {
    text-align: center;
    font-size: 1.125rem;
    font-weight: 300;
    max-width: 800px;
    margin: -1.5rem auto 4rem;
    opacity: 0.9;
}

.gpq-bonus-grid {
    display: grid;
    grid-template-columns: 1fr; /* Padrão Mobile */
    gap: 3rem;
}

.gpq-bonus-mockup img {
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gpq-bonus-features {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.feature-highlight {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-highlight .feature-icon {
    font-size: 2rem;
    margin-top: 5px;
}

.feature-highlight strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-primary-green);
}

.feature-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr; /* Padrão Mobile */
    gap: 1rem;
}

.feature-list li {
    background-color: rgba(255, 255, 255, 0.03);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 500;
}

/* --- Media Query para Desktop --- */
@media (min-width: 992px) {
    .gpq-bonus-grid {
        grid-template-columns: 1.2fr 1fr; /* Coluna da imagem um pouco maior */
        gap: 4rem;
        align-items: center;
    }

    .feature-list {
        grid-template-columns: repeat(2, 1fr); /* Duas colunas para os itens menores */
    }
}


.lista_detalhes_curso{
    padding: 20px;
    font-size: 14px;
    margin-bottom: 10px;
}

/* =============================================
   FIX: LAYOUT HÍBRIDO (MOBILE TOP / DESKTOP SIDE)
   ============================================= */

/* --- MOBILE (Padrão) --- */

/* Frame do Card */
.course-card__frame {
    display: flex;
    flex-direction: column;
    border: 3px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: var(--color-black);
    overflow: hidden;
    margin-bottom: 4rem;
}

/* Título Mobile (Horizontal no Topo) */
.course-mobile-title {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.course-mobile-title img {
    max-height: 50px; /* Altura controlada */
    width: auto;
    display: block;
}

/* Esconde Título Vertical no Mobile */
.course-vertical-title {
    display: none;
}

/* Conteúdo */
.course-card__content {
    padding: 1.5rem;
    width: 100%;
}

/* Header Azul */
.course-card__header_box {
    background-color: #0d2b3e;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255,255,255,0.1);
    width: 100% !important;
}

.header-box-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.header-description { font-size: 1rem; line-height: 1.5; color: #fff; }
.header-price { text-align: right; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; }
.header-price span { font-size: 2rem; font-weight: 900; color: #FF0000; text-decoration: line-through; }

/* Grid Corpo (Mobile: Coluna) */
.course-body-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
    
}
.course-text-col { order: 2; }
.course-image-col { order: 1; text-align: center; }
.course-cover-3d { max-width: 80%; margin: 0 auto; transform: rotate(2deg); /* box-shadow: 0 10px 30px rgba(0,0,0,0.4); */ }

/* Slider Interno */
.course-internal-slider-section {
    width: 100%; overflow: hidden; padding: 20px 0; margin-bottom: 20px;
    /* background: rgba(255,255,255,0.02); border-radius: 8px; */
}
.internal-course-slider { width: 100%; padding-bottom: 70px; }
.internal-course-slider .swiper-slide { width: 280px; margin-right: 15px; flex-shrink: 0; }
.internal-course-slider img { width: 100%; border-radius: 8px; display: block; }


/* --- DESKTOP (Telas Grandes) --- */
@media (min-width: 992px) {
    
    /* Card vira Linha */
    .course-card__frame {
        flex-direction: row;
        align-items: stretch;
        overflow: visible; /* Permite sombras */
    }

    /* Esconde Título Mobile */
    .course-mobile-title {
        display: none;
    }

    /* Mostra Título Vertical (Lateral Esquerda) */
    .course-vertical-title {
        display: flex;
        align-items: flex-start; /* Alinhado ao TOPO */
        justify-content: center;
        
        width: 80px; /* Largura fixa */
        min-width: 80px;
        flex-shrink: 0;
        
        background: #000;
        border-right: 4px solid rgba(255,255,255,0.1);
        padding-top: 2.5rem; /* Alinhamento visual com o header */
                /* border-radius: 12px; */
                border-top-left-radius: 12px;
                border-bottom-left-radius: 12px;
    }
    
    .course-vertical-title img {
        max-height: 600px;
        width: auto;
        object-fit: contain;
    }

    /* Conteúdo (Ocupa o resto) */
    .course-card__content {
        flex: 1;
        width: calc(100% - 80px); /* Previne estouro */
        padding: 2.5rem;
        overflow: hidden;
    }

    /* Header Box (Lado a Lado) */
    .header-box-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .header-description { max-width: 75%; text-align: left; }
    .header-price { border-top: none; padding-top: 0; margin-top: 0; }

    /* Grid Corpo (Lado a Lado com minmax para segurança) */
    .course-body-grid {
        display: grid;

        gap: 3rem;
        align-items: start;
          grid-template-columns: 65% 1fr; 
    }

    .course-text-col { order: 1; text-align: left; min-width: 0; }
    .course-image-col { order: 2; display: flex; justify-content: center; }
    .course-cover-3d { max-width: 350px; width: 100%;  margin-left: -35px;}
}


.course-title-large{
    font-size: 2rem;
    line-height: 1.2;
}

.internal-slider-title{
   font-size: 1.5rem;
    line-height: 1.2; 
        text-align: center;
        margin-bottom: 30px;;
}

/* Wrapper do Slider Interno */
.course-internal-slider-section {
    position: relative; /* Necessário para posicionar as sombras */
    overflow: hidden;
    /* ... suas outras propriedades ... */
}

/* Cria as sombras laterais */
.course-internal-slider-section::before,
.course-internal-slider-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px; /* Largura do efeito de fade (ajuste se quiser maior) */
    z-index: 2; /* Fica acima das imagens */
    pointer-events: none; /* Permite clicar através da sombra */
}

/* Sombra da Esquerda (Preto -> Transparente) */
.course-internal-slider-section::before {
    left: 0;
    background: linear-gradient(to right, var(--color-black), transparent);
}

/* Sombra da Direita (Transparente -> Preto) */
.course-internal-slider-section::after {
    right: 0;
    background: linear-gradient(to left,  var(--color-black), transparent);
}

/* =============================================
   AJUSTES FINAIS DO SLIDER INTERNO
   ============================================= */

/* 1. Alinhamento das Imagens (Topo) */
.internal-course-slider .swiper-wrapper {
    align-items: flex-start !important; /* Garante que alinhem pelo topo */
}

.internal-course-slider .swiper-slide {
    height: auto !important; /* Altura automática baseada na imagem */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* 2. Remover Borda do Slide Ativo (Herdada do outro slider) */
.internal-course-slider .swiper-slide-active img {
    border: 1px solid var( --color-primary-green) !important; /* Borda discreta padrão */
    box-shadow: none !important; /* Remove brilho verde se houver */
      z-index: 10 !important; /* Garante que fique acima de qualquer slide */
}

/* 3. Estilização das Bolinhas (Paginação) */
.internal-course-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5); /* Cinza claro (inativo) */
    opacity: 1; /* Remove opacidade padrão do Swiper */
    margin: 0 4px !important;
    transition: all 0.3s ease;
}

.internal-course-slider .swiper-pagination-bullet-active {
    background: var(--color-primary-green) !important; /* Verde (ativo) */
    transform: scale(1.2); /* Leve destaque de tamanho */
}

.swiper-pagination{
    position: relative !important;
    margin-top: 30px !important;

}





.features-v3-content-wrapper-desktop h3,
.features-v3-panel h3
{
font-size: 1.5rem;
    margin-bottom: 20px;
    margin-top: 1rem;

}

/* =============================================
   PROVAS SOCIAIS GPE (IMAGEM RESPONSIVA)
   ============================================= */
.gpe-social-proof-wrapper {
    width: 100%;
    margin-top: 3rem;    /* Espaço acima */
    margin-bottom: 3rem; /* Espaço abaixo */
    text-align: center;
}

.gpe-social-proof-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px; /* Bordas arredondadas padrão */
  
}



.bonus-gpe-style-section {
    /* Herda o mesmo estilo base das outras seções dark */
    padding: 0px 0;
    background-color: var(--color-black);
}

/* =============================================
   ESTILOS DA SEÇÃO BÔNUS FÍSICOS
   ============================================= */

/* Grid de 2 Colunas para Box e Jaleco */
.bonus-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 1.5rem;
    margin-bottom: 2rem;
    list-style: none;
}

.bonus-grid li {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* Mensagens de Rodapé da Seção */
.bonus-footer-message {
    text-align: center;
    margin-bottom: 3rem;
}

.shipping-text {
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.disclaimer-text {
    font-size: 0.75rem;
    opacity: 0.5;
    font-weight: 300;
    margin: 0;
}

/* --- Ajustes Desktop --- */
@media (min-width: 992px) {
    .bonus-grid {
        grid-template-columns: 1fr 1fr; /* Desktop: 2 colunas lado a lado */
        gap: 2rem;
    }
}

/* CORREÇÃO DE VISIBILIDADE DO GPQ */

#gpq-bonus .features-v3-content-desktop .features-v3-panel {
    display: block !important; 
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    animation: fadeIn 0.5s ease-in-out;
}

/* Garante que a aba ativa tenha a cor correta */
#gpq-bonus .features-v3-tab.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: currentColor !important;
}



/* 1. O GRANDE GRADIENTE RADIAL NO FUNDO */
.gpq-background-glow {
    position: absolute;
    top: -300px; /* Posicionado bem acima para criar um efeito de "luz vindo de cima" */
    left: 50%;
    transform: translateX(-50%);
    width: 150%; /* Bem largo para cobrir toda a área */
    max-width: 1600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 237, 122, 0.277), transparent 65%); /* Verde para transparente */
    filter: blur(120px);
    pointer-events: none; /* Garante que não interfira com cliques */
    z-index: 0; /* Camada mais baixa */
}


/* --- BOX DE AVISO (LANÇAMENTO) --- */
.launch-notice-box {
    background: #05152f /* rgba(255, 215, 0, 0.15) */; /* Fundo dourado transparente */
    border: 1px solid #00cee9 ;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 0 auto 3rem;
    max-width: 900px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    text-align: left;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

.notice-icon { font-size: 2rem; }
.notice-content h3 { color: #fd3c3b; font-size: 1.1rem; font-weight: 900; margin-bottom: 0.5rem; text-transform: uppercase; }
.notice-content p { font-size: 0.95rem; line-height: 1.5; color: rgba(255,255,255,0.9); }

/* --- GRID DE CARDS (2 COLUNAS) --- */
.future-courses-grid-cards {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 2rem;
}

.new-future-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.new-future-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.3); }

.new-future-card__image {
    width: 100%;
    height: 250px; /* Altura fixa para padronizar */
    overflow: hidden;
}

.new-future-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.new-future-card:hover .new-future-card__image img { transform: scale(1.05); }

.new-future-card__content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.new-future-card__content h3 { font-size: 1.5rem; font-weight: 900; margin: 0.5rem 0 1rem; line-height: 1.2; }
.new-future-card__content p { font-size: 0.95rem; opacity: 0.8; margin-bottom: 1.5rem; flex: 1; }

.new-future-card__price {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.new-future-card__price p { margin: 0; font-size: 0.8rem; text-transform: uppercase; font-weight: 700; opacity: 0.6; }
.new-future-card__price span { font-size: 1.5rem; font-weight: 900; color: #FF0000; text-decoration: line-through; }


/* --- SLIDER INFERIOR (PREMIUM BLUE) --- */
.blue-fade-wrapper { position: relative; overflow: hidden; }

/* Gradiente Lateral com a cor #071937 */
.blue-fade-wrapper::before,
.blue-fade-wrapper::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
}
.blue-fade-wrapper::before { left: 0; background: linear-gradient(to right, #071937, transparent); }
.blue-fade-wrapper::after { right: 0; background: linear-gradient(to left, #071937, transparent); }

/* Estilo dos Slides */
.internal-course-slider .swiper-slide {
    width: 260px; /* Largura mobile */
    opacity: 0.4; /* Inativos ficam apagados */
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.internal-course-slider .swiper-slide img {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Slide Ativo (Centro) */
.internal-course-slider .swiper-slide-active {
    opacity: 1;
    transform: scale(1.1); /* Zoom no ativo */
    z-index: 10;
}

/* Setas de Navegação */
.internal-prev, .internal-next {
    color: #fff;
    background: rgba(0,0,0,0.5);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10; cursor: pointer;
}
.internal-prev::after, .internal-next::after { font-size: 1.2rem; font-weight: 900; }
.internal-prev { left: 10px; }
.internal-next { right: 10px; }


/* --- MEDIA QUERY DESKTOP (992px+) --- */
@media (min-width: 992px) {
    .future-courses-grid-cards {
        grid-template-columns: 1fr 1fr; /* 2 Cards lado a lado */
        gap: 3rem;
    }
    
    .internal-course-slider .swiper-slide {
        width: 300px; /* Maior no desktop */
    }
    
    .blue-fade-wrapper::before, .blue-fade-wrapper::after { width: 200px; } /* Fade maior */
}

/* --- SLIDER EXCLUSIVO "EM BREVE" --- */

/* O Wrapper segura o gradiente lateral */
.blue-fade-wrapper {
    position: relative;
    overflow: hidden; /* Garante que nada vase para os lados */
}

/* Gradiente Lateral #071937 */
.blue-fade-wrapper::before,
.blue-fade-wrapper::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px; /* Largura do fade */
    z-index: 20;
    pointer-events: none;
}
.blue-fade-wrapper::before { left: 0; background: linear-gradient(to right, #071937, transparent); }
.blue-fade-wrapper::after { right: 0; background: linear-gradient(to left, #071937, transparent); }

/* O Slider em si */
.future-slider-unique {
    width: 100%;
    /* O PULO DO GATO: Espaço extra vertical para o zoom não cortar */
    padding: 40px 0 !important; 
}

/* Slides */
.future-slider-unique .swiper-slide {
    width: 240px; /* Largura base Mobile */
    height: auto;
    opacity: 0.4; /* Itens laterais apagados */
    transform: scale(0.9); /* Itens laterais menores */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Transição suave */
    position: relative;
    z-index: 1;
}

.future-slider-unique .swiper-slide img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: block;
}

/* Slide Ativo (Centro) */
.future-slider-unique .swiper-slide-active {
    opacity: 1;
    transform: scale(1.15); /* Zoom maior (15%) */
    z-index: 10; /* Fica por cima dos outros */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Sombra mais forte no destaque */
}

/* Setas Exclusivas */
.future-prev, .future-next {
    color: #fff;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 30; /* Acima do gradiente azul */
}
.future-prev:after, .future-next:after { font-size: 1.2rem; font-weight: 900; }
.future-prev { left: 10px; }
.future-next { right: 10px; }

/* Desktop Ajustes */
@media (min-width: 992px) {
    .future-slider-unique .swiper-slide {
        width: 300px; /* Maior no desktop */
    }
    .blue-fade-wrapper::before, .blue-fade-wrapper::after { width: 200px; }
}


.titulo-curso-tamanho{
    max-width: 50px;
}



/* ======================================================= */
/* ESTILOS DA NOVA DOBRA DUPLA (DOUBLE OFFER)              */
/* ======================================================= */

.double-offer-section {
    position: relative;
    padding-top: 6rem;
    padding-bottom: 6rem;
    /* O fundo dark já vem da classe section--dark */
}

/* Gradiente no Topo */
.fade-gradient-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, #000 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* Subtítulo Específico */
.double-offer-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
}

/* GRID DUPLO */
.double-offer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 2rem;
    max-width: 850px;
    
    margin: 0 auto;
}

/* CARD BASE */
.double-offer-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.double-offer-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Card de Aluno (Destaque) */
.card-highlight {
    border: 1px solid var(--color-gold, #FFD700);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.05);
    background: rgba(255, 215, 0, 0.02);
}

/* Header do Card */
.card-header-new h3 {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: #fff;
}

.card-header-new p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1.5rem;
    min-height: 60px; /* Alinha alturas */
}

/* Preços */
.card-price-new {
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.price-label {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.strike-red {
    text-decoration: line-through;
    color: #FF4D4D;
    font-weight: 700;
    font-size: 1.1rem;
}

.price-sub-label {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.price-value-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.installments { font-size: 1.2rem; font-weight: 300; color: #ccc; }
.big-price { font-size: 3.5rem; font-weight: 900; color: #fff; line-height: 1;
    color: var(--color-primary-green);
}
.cents { font-size: 1.5rem; font-weight: 700; 
color: var(--color-primary-green);
}
.cash-price { font-size: 0.85rem; opacity: 0.6; margin-top: 8px; }

/* Ações e Footer do Card */
.offer-section .payment-methods img {
    max-width: 180px;
    margin: 1rem auto;
    opacity: 0.7;
    filter: invert();
}

.warning-text {
    font-size: 0.75rem;
    color: #FFD700;
    line-height: 1.4;
    margin-top: 0.5rem;
}

/* Helpers */
.text-gold { 
   /*  color: #FFD700 !important;  */
    color: var(--color-primary-green);
}
.text-gradient-gold {
    background: linear-gradient(90deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Desktop */
@media (min-width: 992px) {
    .double-offer-grid {
        grid-template-columns: 1fr 1fr; /* Lado a lado no PC */
        gap: 3rem;
    }
    
    /* Ajuste fino para o card de destaque ficar levemente maior se quiser */
    /* .card-highlight { transform: scale(1.02); } */
}

.oferta-final-gradient{
      position: absolute;
    top: -300px; /* Posicionado bem acima para criar um efeito de "luz vindo de cima" */
    left: 50%;
    transform: translateX(-50%);
    width: 150%; /* Bem largo para cobrir toda a área */
    max-width: 1600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 237, 122, 0.277), transparent 65%); /* Verde para transparente */
    filter: blur(120px);
    pointer-events: none; /* Garante que não interfira com cliques */
    z-index: 0; /* Camada mais baixa */
}

/* ======================================================= */
/* ESTILOS DOS BOXES DA COLUNA DIREITA                     */
/* ======================================================= */

.benefits-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: Empilhado */
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Estilo Base do Box */
.benefit-box {
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.benefit-icon {
    font-size: 1.5rem;
    flex-shrink: 0; /* Impede o ícone de esmagar */
}

.benefit-content strong {
    display: block;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 0.3rem;
}

.benefit-content p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.3;
    margin: 0;
}

/* --- CORES ESPECÍFICAS --- */

/* 1. Kit Presente (Dourado Sutil) */
.box-kit {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
}

/* 2. Seguro Aprovação (#000d17 - Azul Muito Escuro) */
.box-seguro {
    background-color: #000d17; 
    border-color: rgba(0, 150, 255, 0.2); /* Borda azul sutil */
}

/* 3. Garantia (#170000 - Vermelho Muito Escuro) */
.box-garantia {
    background-color: #170000;
    border-color: rgba(255, 50, 50, 0.2); /* Borda vermelha sutil */
}

/* 4. WhatsApp (Estilo Verde) */
.box-whatsapp {
    background: rgba(37, 211, 102, 0.1); /* Verde WhatsApp Transparente */
    border: 1px solid #25D366;
    text-decoration: none; /* Remove sublinhado do link */
    align-items: center; /* Centraliza verticalmente */
}

.box-whatsapp:hover {
    background: rgba(37, 211, 102, 0.2);
}

.whatsapp-btn-text {
    display: inline-block;
    background: #25D366;
    color: #000;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    margin-top: 4px;
    text-transform: uppercase;
}

/* --- DESKTOP (GRID 2x2) --- */
@media (min-width: 992px) {
    .benefits-grid-wrapper {
        grid-template-columns: 1fr 1fr; /* 2 Colunas */
    }
}



/* ======================================================= */
/* CARDS VERTICAIS ESTILO "BLACK INFINITA" (PRINT)         */
/* ======================================================= */

.offer-cta-column {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Espaço entre os dois cards empilhados */
}

.vertical-offer-card {
    background: #020d05; /* Fundo verde quase preto */
    border: 1px solid rgba(0, 255, 100, 0.1); /* Borda verde sutil */
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    margin-bottom: 30px;;
}

/* Imagem no Topo */
.card-image-top {
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-image-top img {
    max-width: 80%;
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.6));
}

/* Corpo do Conteúdo */
.card-content-body {
    padding: 2rem;
}

/* Tipografia */
.text-neon-green {
    color: #00FF88;
    font-weight: 900;
    text-transform: uppercase;
}

.discount-label {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 5px;
}

.discount-amount {
    font-size: 1.8rem;
    font-weight: 900;
    color: #FF4D4D; /* Vermelho destaque */
    margin-bottom: 1.5rem;
}

/* Preço */
.offer-price-box {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 5px;
}

.installments {
    font-size: 1.2rem;
    color: #ccc;
}

.main-price {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.cents {
    font-size: 1.5rem;
}

.price-alternative {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 2rem;
}

/* Formulário Escuro */
.offer-form {
    margin-bottom: 1.5rem;
    text-align: left;
}

.form-instruction {
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-align: center;
    opacity: 0.9;
}

.input-dark {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
}

.input-dark:focus {
    outline: none;
    border-color: #00FF88;
    background: rgba(255, 255, 255, 0.1);
}

.w-100 { width: 100%; }

/* --- Estilos Específicos do Card de Aluno --- */
.card-student-stack {
    border-color: #0e4f04; /* Borda Dourada */
}

.student-badge-top {
    background: #FFD700;
    color: #000;
    font-weight: 900;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.text-gold { color: #FFD700 !important; }

/* ======================================================= */
/* SEÇÃO GARANTIA PREMIUM (UN STYLE)                       */
/* ======================================================= */

.guarantee-un-section {
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.guarantee-subtitle {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
}

/* Wrapper Principal (O Card Unificado) */
.guarantee-premium-wrapper {
    display: flex;
    flex-direction: column; /* Mobile: Empilhado */
    /* background: #080808; */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    max-width: 1100px;
    margin: 0 auto;
}

/* Lados Comuns */
.guarantee-side {
    padding: 2.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* --- LADO ESQUERDO (SEGURANÇA - CIANO) --- */
.side-security {
    background: linear-gradient(180deg, rgba(0, 195, 255, 0.03) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.icon-badge {
    width: 60px; height: 60px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.5rem;
}

.badge-cyan { background: rgba(0, 195, 255, 0.1); }
.secure-gif { width: 100%; border-radius: 12px; }

.guarantee-header h3 {
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.5rem;
}

.guarantee-tag {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 1.5rem;
}
.tag-cyan { color: #00C3FF; }

.guarantee-body p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1rem;
}

.check-box {
    display: flex; gap: 10px; align-items: center;
    background: rgba(0, 195, 255, 0.05);
    border: 1px solid rgba(0, 195, 255, 0.2);
    padding: 12px; border-radius: 8px;
    color: #fff; font-weight: 600; font-size: 0.9rem;
    margin-top: auto;
}

/* --- DIVISOR --- */
.guarantee-divider {
    width: 100%; height: 1px;
    background: rgba(255,255,255,0.1);
}

/* --- LADO DIREITO (MÉRITO - DOURADO) --- */
.side-merit {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.03) 0%, transparent 100%);
    position: relative;
}

.badge-gold { background: rgba(255, 215, 0, 0.1); }
.trophy-emoji { font-size: 2rem; }
.tag-gold { color: #FFD700; }
.text-gold { color: #FFD700 !important; }

.small-note {
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.6;
}

/* Timeline Vertical */
.merit-timeline {
    margin-top: 2rem;
    position: relative;
    padding-left: 10px;
}

/* Linha conectora */
.merit-timeline::before {
    content: ''; position: absolute;
    left: 14px; top: 5px; bottom: 25px;
    width: 1px; background: rgba(255, 215, 0, 0.3);
}

.timeline-step {
    display: flex; gap: 15px; margin-bottom: 1.2rem;
    position: relative; z-index: 1;
}
.timeline-step:last-child { margin-bottom: 0; }

.step-marker {
    width: 28px; height: 28px;
    background: #000;
    border: 1px solid #FFD700;
    color: #FFD700;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.step-text {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
}
.step-text strong { color: #fff; }

/* --- DESKTOP (LADO A LADO) --- */
@media (min-width: 992px) {
    .guarantee-premium-wrapper {
        flex-direction: row; /* Lado a lado */
    }
    
    .guarantee-divider {
        width: 1px; height: auto;
        background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent);
    }
    
    .guarantee-side {
        padding: 3.5rem;
    }
    
    .side-security { border-bottom: none; }
}


/* ======================================================= */
/* SEÇÃO SOBRE O UN (WIDE LAYOUT)                          */
/* ======================================================= */

.about-un-wide-section {
    padding: 5rem 0;
    /* background: #050505; */
}

.text-gradient-blue {
    background: linear-gradient(90deg, #1CA3EC, #00E0FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

/* --- 1. IMAGEM HERO (GRANDE) --- */
.team-hero-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 4rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
}

.team-hero-img {
    width: 100%;
    height: auto;
    display: block;
    /* Opcional: Altura máxima para não ocupar a tela toda em monitores gigantes */
    max-height: 600px; 
    object-fit: cover;
}

/* Legenda Barra Inferior */
.image-caption-bar {
   /* background: rgba(0, 0, 0, 0.8); */
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.image-caption-bar p {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
}
.image-caption-bar em {
    color: rgba(255,255,255,0.6);
    font-style: normal;
    font-size: 0.85rem;
    margin-left: 10px;
}

/* --- 2. GRID DE CONTEÚDO --- */
.about-content-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 4rem;
}

.col-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.blue-divider {
    width: 50px;
    height: 4px;
    background: var(--color-highlight);
    margin-bottom: 2rem;
    border-radius: 2px;
}

.about-col p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1.5rem;
}

.highlight-text {
    font-size: 1.1rem;
    color: #fff !important;
    font-weight: 500;
}

/* Badges Tech */
.tech-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.tech-badges span {
    background: rgba(28, 163, 236, 0.1);
    border: 1px solid var(--color-highlight);
    color: var(--color-highlight);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Perfil do Fundador */
.founder-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 1.5rem;
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 12px;
    width: fit-content;
}

.founder-img {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-highlight);
}

.founder-info h4 {
    margin: 0; font-size: 1.1rem; color: #fff; font-weight: 800;
}
.founder-info span {
    font-size: 0.8rem; color: rgba(255,255,255,0.6);
}

.quote-box {
    border-left: 3px solid var(--color-highlight);
    padding-left: 15px;
    font-style: italic;
    color: #fff !important;
    background: linear-gradient(90deg, rgba(28, 163, 236, 0.05), transparent);
    padding: 15px;
    border-radius: 0 8px 8px 0;
}

/* Desktop */
@media (min-width: 992px) {
    .about-content-grid {
        grid-template-columns: 1fr 1fr; /* Lado a Lado */
        gap: 5rem; /* Mais espaço entre colunas */
    }
}

/* ======================================================= */
/* CONTROLE DE IMAGENS GPE (DESKTOP VS MOBILE)             */
/* ======================================================= */

/* --- MOBILE (Padrão) --- */

/* Esconde a imagem Desktop no celular */
.gpe-img-desktop {
    display: none;
}

/* Mostra e organiza as imagens Mobile */
.gpe-img-mobile-group {
    display: flex;
    flex-direction: column; /* Empilha uma abaixo da outra */
    gap: 1.5rem; /* Espaço entre as duas imagens */
    width: 100%;
}

.gpe-img-mobile-group img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.3); */
    /* border: 1px solid rgba(255,255,255,0.1); (Opcional, se quiser borda) */
}

/* --- DESKTOP (Telas a partir de 768px) --- */
@media (min-width: 768px) {
    
    /* Mostra a imagem Desktop */
    .gpe-img-desktop {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
        /* box-shadow: 0 20px 50px rgba(0,0,0,0.5); */
        margin: 0 auto;
    }

    /* Esconde o grupo Mobile */
    .gpe-img-mobile-group {
        display: none;
    }
}



/* ========================================== */
/* ESTILOS DO MODAL                           */
/* ========================================== */
.modal-overlay {
    display: none; /* Escondido por padrão */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex !important;
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-container {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    max-width: 450px;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 237, 123, 0.15);
}

.modal-close {
    position: absolute; top: 15px; right: 15px;
    background: none; border: none; color: #fff;
    font-size: 2rem; cursor: pointer; line-height: 1;
}

.modal-header { text-align: center; margin-bottom: 1.5rem; }
.modal-header h3 { color: #fff; font-size: 1.5rem; margin-bottom: 5px; }
.modal-header p { color: #ccc; font-size: 0.9rem; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; color: #fff; margin-bottom: 5px; font-size: 0.85rem; }

.input-dark {
    width: 100%; padding: 12px;
    border-radius: 8px;
    border: 1px solid #333;
    background: #111;
    color: #fff; font-size: 1rem;
}
.input-dark:focus { outline: none; border-color: #00ED7B; }

.modal-submit-btn {
    width: 100%; padding: 15px;
    border: none; border-radius: 8px;
    font-weight: 900; font-size: 1.1rem;
    cursor: pointer; margin-top: 10px; color: #000;
    font-family: var(--font-main);
}

.modal-security-text {
    text-align: center; font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5); margin-top: 1rem;
}



/* Estilo da Mensagem de Erro */
.error-message {
    color: #ff4d4d; /* Vermelho */
    font-size: 0.75rem;
    margin-top: 5px;
    display: none; /* Escondido */
    font-weight: 600;
}

/* Classe para Input com Erro */
.input-error {
    border-color: #ff4d4d !important; /* Borda vermelha */
    background-color: rgba(255, 77, 77, 0.05) !important; /* Fundo levemente vermelho */
    animation: shake 0.3s ease-in-out;
}

/* Animação de "Tremidinha" */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}







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


/* =============================================
   ESTILOS DO FAQ (ACORDEÃO)
   ============================================= */
.faq-section {
    padding: 80px 0;
 /*   background-color: #050505; */ /* Fundo escuro */
}

.faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.e-n-accordion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.e-n-accordion-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.e-n-accordion-item[open] {
    background: rgba(0, 237, 123, 0.05); /* Leve tom verde quando aberto */
    border-color: rgba(0, 237, 123, 0.3);
}

.e-n-accordion-item summary {
    padding: 1.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 3rem; /* Espaço para o ícone */
    color: #fff;
}

/* Remove o triângulo padrão do navegador */
.e-n-accordion-item summary::-webkit-details-marker {
    display: none;
}

/* Ícone Personalizado (+ / -) */
.e-n-accordion-item summary::after {
    content: '+';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--color-primary-green);
    font-weight: 300;
    transition: transform 0.3s ease;
}

.e-n-accordion-item[open] summary::after {
    content: '-';
    color: #fff;
    transform: translateY(-50%) rotate(180deg);
}

.accordion-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.6;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================= */
/* SEÇÃO DE VÍDEO PREMIUM                        */
/* ============================================= */

.video-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Glow de Fundo (Luz Verde/Azul) */
.video-background-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 237, 123, 0.08), transparent 60%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

/* Wrapper para dar a Borda/Sombra */
.video-player-wrapper {
    position: relative;
    z-index: 1;
    border-radius: 16px;
    padding: 10px; /* Espaço para a borda dupla */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* O Player em si */
.video-player {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Aspect Ratio 16:9 */
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
    cursor: pointer;
}

.video-thumbnail, 
.video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.video-player:hover .video-thumbnail {
    transform: scale(1.03);
}

/* Overlay para escurecer levemente a thumb */
.video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.3s;
}
.video-player:hover .video-overlay {
    background: rgba(0, 0, 0, 0.1);
}

/* Botão Play Moderno */
.play-button-container {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button-modern {
    width: 80px; height: 80px;
    background: rgba(0, 237, 123, 0.9); /* Verde da Marca */
    border-radius: 50%;
    border: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.play-icon {
    width: 35px; height: 35px;
    margin-left: 5px; /* Ajuste ótico */
}

.video-player:hover .play-button-modern {
    transform: scale(1.1);
    background: #fff;
}

/* Animação de Pulso */
.pulse-animation {
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(0, 237, 123, 0.4);
    border-radius: 50%;
    z-index: 1;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* Badge "Gravação da Live" */
.live-replay-badge {
    position: absolute;
    top: 20px; left: 20px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    padding: 6px 12px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.2);
}

.recording-dot {
    width: 8px; height: 8px;
    background-color: #ff0000;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 8px #ff0000;
}

/* ============================================= */
/* INDICADOR DE SCROLL (SETINHA ANIMADA)         */
/* ============================================= */

.scroll-down-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
}

.scroll-arrow-icon {
    fill: #00ED7B; /* Cor Verde Neon do Universo Narrado */
    animation: scrollBounce 2s infinite ease-in-out; /* Animação infinita */
    filter: drop-shadow(0 0 8px rgba(0, 237, 123, 0.4)); /* Brilho suave */
    cursor: pointer;
}

/* Definição da Animação (Sobe e Desce suavemente) */
@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}


.riscado {
    text-decoration: line-through;
}


.riscado-gradient {
    position: relative;
    display: inline-block;
    background: var(--color-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Badge de Lote no Topo do Card */
.batch-status-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 215, 0, 0.1); /* Fundo Dourado Suave */
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 8px 15px;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FFD700; /* Dourado */
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background-color: #FFD700;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 0 rgba(255, 215, 0, 0.4);
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

.batch-percentage {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
}


.riscado-gradient {
    position: relative;
    display: inline-block;
    font-weight: 900;
    background: linear-gradient(90deg, #ff4d4d, #ff00b9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.riscado-gradient::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    height: 1px; /* super fina */
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-50%);
    pointer-events: none;
}



/* =========================================
   SEÇÃO SUPORTE (PROFILE STYLE)
   ========================================= */

.support-profile-section {
    /* padding: 100px 0; */
    /* background-color: #b2fbff; */
/*    background: linear-gradient(0deg, #b2fbff, transparent); */

/*  
background: linear-gradient(
  360deg,
  #fff2b2 0%,
  #fff2b2 50%,
  transparent 100%
);
*/

        padding-bottom: 100px;
}

/* --- O CARD PRINCIPAL --- */
.profile-card-wrapper {
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(16, 28, 92, 0.08); /* Sombra suave e elegante */
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto 60px;
}

/* Coluna da Imagem */
.profile-image-col {
    flex: 1.2; /* Ocupa um pouco mais da metade */
    position: relative;
    min-height: 400px;
    padding-top: 30px;
}

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

/* Badge "Time Online" */
.status-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgb(179 255 199 / 95%);
    padding: 8px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #101c5c;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(4px);
}

.status-dot {
    width: 10px; height: 10px;
    background-color: #00e676;
    border-radius: 50%;
}

.pulse {
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0, 230, 118, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}

/* Coluna das Estatísticas */
.profile-stats-col {
    flex: 1;
    padding: 50px;
    gap: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.stats-header h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #101c5c;
    margin: 0;
    line-height: 1;
}

.role {
    font-size: 1rem;
    color: #666;
    margin-top: 5px;
    font-weight: 500;
}

/* Grid de Dados */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.stat-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    color: #101c5c;
    line-height: 1;
    margin-bottom: 5px;
}

.text-green { color: #00e676; }

.stat-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
}

.stat-desc {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

/* Barra de Progresso Decorativa */
.feature-progress {
    margin-bottom: 30px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    color: #101c5c;
    margin-bottom: 8px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #101c5c, #00e676);
    border-radius: 4px;
}

/* Alerta Upgrade */
.next-level-alert {
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.alert-icon { font-size: 1.5rem; }

.alert-info {
    font-size: 0.9rem;
    color: #101c5c;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 992px) {
    .profile-card-wrapper {
        flex-direction: column;
        max-width: 500px;
    }

    .profile-image-col {
        min-height: 250px;
        max-height: 300px;
    }

    .profile-stats-col {
        padding: 30px;
    }

    .stats-grid {
        grid-template-columns: 1fr; /* Empilha as stats no mobile */
        gap: 20px;
    }
    
    .stats-header h3 { font-size: 1.8rem; }
}




.badge-pill {
    display: inline-block;
    padding: 4px 15px;
    border-radius: 99px;
    font-size: 0.8rem;
    /* font-weight: 900; */
    text-transform: uppercase;
    /* margin-bottom: 15px; */
    text-align: center;
    letter-spacing: 1px;
}
.badge-pill.blue {   
/*    background-color: #e9eefa;
    color: #0056d3; 
    */
 background-color: #cef0f5; color: #02839a;

}



.badge-pill.green {  
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    background-color: rgba(0, 237, 123, 0.1);
    color: var(--color-primary-green);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}



.badge-pill.red { background-color: #FFE4E4; color: #E34B4D; }

/* .badge-pill.green { background-color: #E8FFF9; color: #079670; } */

.badge-pill.yellow { background-color: #FFEFAB; color: #A18300; }
.badge-pill.cyan { background-color: #cef0f5;
    color: #02839a; }


    .alert-icon {
    width: 50px;
    height: auto;
    animation: pulseAlert 2s infinite;
}



/* --- SEÇÃO PLATAFORMA --- */
.platform-section {
    padding: 100px 0 50px;
    background-color: var(--un-white);
    /* IMPORTANTE: overflow visible para as imagens laterais não serem cortadas */
    overflow: visible; 
    position: relative;
}

.platform-visuals {
    position: relative;
    margin-top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    /* Garante que o conteúdo não vaze a largura da tela no mobile */
    max-width: 100vw; 
}

/* Principal */
.main-platform-wrapper {
    position: relative;
    z-index: 20; 
    max-width: 800px;
    width: 100%;
    transition: transform 0.1s linear;
}
.main-img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}

/* Mobile */
.mobile-only { display: none; }
.main-img-mobile { width: 100%; max-width: 400px; margin: 0 auto; border-radius: 12px; }

/* --- CARDS FLUTUANTES --- */
.float-card {
    position: absolute;
    width: 220px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 3px solid #fff;
    
    /* Começam invisíveis e no centro (controlado pelo JS) */
    /* opacity: 0; */
    will-change: transform, opacity;
    z-index: 1;
}


.section-subtitle-text {
    font-size: 1.5rem;
    color: #fff;
    max-width: 900px;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Mural de Depoimentos */
.testimonials-wall {
    width: 100%;
    text-align: center;
}
.wall-img {
    width: 100%;
    border-radius: 12px;
}

/* Responsividade */
@media (max-width: 1400px) {
    /* Aproxima um pouco em telas médias */
    .pos-1 { left: -5%; } .pos-2 { left: -8%; } .pos-3 { left: -6%; }
    .pos-5 { right: -2%; } .pos-6 { right: -8%; } .pos-7 { right: -6%; }
    .float-card { width: 180px; }
}

@media (max-width: 991px) {
    .desktop-only { display: none; }
    .mobile-only { display: block; }
    .float-card { display: none !important; } /* Força sumir no mobile */
    .platform-section { padding: 60px 0; overflow: hidden; } /* No mobile pode cortar */
    .platform-visuals { min-height: auto; margin-top: 30px; }
}   


.features-v3-mockup { max-width: 1000px; margin: 0 auto 4rem; padding: 0 20px; }
.features-v3-accordion-group { display: flex; flex-direction: column; gap: 1rem; }
.features-v3-tab { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer; transition: background-color 0.3s, border-color 0.3s; background-color: rgba(255, 255, 255, 0.05); }
.tab-number { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); font-weight: 700; font-size: 0.875rem; transition: all 0.3s; }
.tab-title { font-weight: 500; }
.features-v3-tab:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.features-v3-tab.active { border-color: var(--color-primary-green); background-color: rgba(0, 237, 123, 0.1); }
.features-v3-tab.active .tab-number { background-color: var(--color-primary-green); color: var(--color-black); border-color: var(--color-primary-green); }
.features-v3-tab.active .tab-title { font-weight: 900; color: var(--color-primary-green); }

.features-v3-panel { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out, padding 0.5s ease-out; padding: 0 1rem; }
.features-v3-panel.active { max-height: 1500px; /* Valor alto para garantir que todo conteúdo caiba */ 
   /* padding: 1.5rem 1rem 0;  */
}
.features-v3-panel h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 1rem; }

.features-v3-panel img { border-radius: 8px; /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */ }
.features-v3-content-wrapper-desktop { display: none; } /* Escondido por padrão (mobile-first) */

@media (min-width: 992px) {
    .features-v3-interactive-wrapper { display: grid; grid-template-columns: 35% 1fr; gap: 2rem; align-items: flex-start; }
    .features-v3-accordion-item .features-v3-panel { display: none !important; } /* Esconde painéis no desktop */
    .features-v3-content-wrapper-desktop { display: block; position: relative; border-radius: 12px; overflow: hidden; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); min-height: 500px; }
    .features-v3-content-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-image: var(--active-gradient); transition: background-image 0.5s ease-in-out; }
    .features-v3-content-desktop { /*  padding: 2rem; */ position: relative; z-index: 1; }
    .features-v3-content-desktop .features-v3-panel { display: block; animation: fadeIn 0.5s ease-in-out forwards; }
}




.un-proof-masonry { 
    padding-bottom: 70px;
 }
.un-proof-logo-wrap { display: flex; justify-content: center; margin-bottom: 24px; 
max-width: 800px;
        margin: auto;
        margin-bottom: 60px;
}
.un-masonry-wrap { position: relative; overflow: hidden; max-height: 560px; transition: max-height .6s; }
.un-masonry-wrap[data-collapsed="false"] { max-height: 5200px; }

.un-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.un-masonry__card { background: #fff; border: 1px solid rgba(20,40,70,.12); border-radius: 22px; padding: 10px; box-shadow: 0 10px 30px rgba(14,20,30,0.1); }
.un-masonry__card.is-wide { grid-column: span 2; }
.un-masonry-fade { position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: linear-gradient(to bottom, transparent, var(--color-black)); pointer-events: none; }
.un-masonry-actions { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }

.un-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.un-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-radius: 999px; font-weight: 900; cursor: pointer; border: none;
}
.un-btn--soft { background: rgba(47, 100, 255, .12); color: var(--un-blue); }
.un-btn--ghost { background: #fff; border: 1px solid #ddd; color: #333; }

@media (max-width: 980px) { .un-masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .un-masonry { grid-template-columns: 1fr; } .un-masonry__card.is-wide { grid-column: span 1; } }

/* ============================================= */
/* 12. OFERTA E PREÇOS                           */
/* ============================================= */
.un-marquee-offer { background: var(--un-green); overflow: hidden; }
.un-marquee-track { display: flex; animation: un-marquee-scroll 38s linear infinite; }
.un-marquee-content { display: flex; gap: 18px; padding: 18px 0; white-space: nowrap; font-weight: 700; color: #0f2a1f; }
@keyframes un-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.pre-offer-section { padding: 60px 0; background: #bcffca; color: #000;

}


.offer-section { padding: 60px 0; 

}

.pricing-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 40px; align-items: center; }

.pricing-card {
    background: var(--un-bg-light);
     border-radius: 20px; border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s;
}
.pricing-card:hover { transform: translateY(-5px); }

/* Card Destaque */

.pricing-card.featured {
    /*  
      background:var(--un-green-dark); color: #fff; transform: scale(1.05); 
    */
        border: var(--un-green-dark) solid 5px;
    /*
    box-shadow: 0 30px 60px rgba(23, 43, 133, 0.4);
    */

}
.pricing-card.featured .card-header{
  background-color:  #00ee7b;
  padding: 30px 20px 30px 30px;
}

.pricing-card .card-header {
  
    padding: 30px 20px 30px 30px;

}

.pricing-card.featured .card-logo { filter: brightness(0) invert(1);
margin: auto;
}
.pricing-card.featured .feature-list li { 
  color: var(--un-green-dark);
   border-bottom-color: var(--un-green-dark);;
   }

.card-header { text-align: center; margin-bottom: 20px; 
   /* height: 80px; display: flex; align-items: center; justify-content: center;  */
  }
.card-logo { max-width: 200px; }

.pricing-card .card-features{
 padding: 0px 20px;
}

.feature-gpq{
  background-color: #000;     background-color: #dfd4ff;
                        padding: 0.75rem 1rem;
                        border-radius: 8px;
                        font-weight: 500;  margin-bottom: 20px;
}

.card-price { text-align: center; margin-bottom: 30px; }
.old-price { font-size: 0.9rem; text-decoration: line-through; color: #777; }
.pricing-card.featured .old-price { color: #aaa; }

.price-row { display: flex; justify-content: center; align-items: baseline; line-height: 1; margin-top: 10px; }
.value { font-size: 4rem; font-weight: 900; 
color: var(--color-primary-green);
}
.currency { 
font-size: 1.5rem;
    font-weight: 700;
    margin-right: 5px;
}

.feature-header { display: grid; grid-template-columns: 1fr 40px 40px; font-weight: 900; font-size: 0.85rem; padding-bottom: 10px; border-bottom: 1px solid #ddd; margin-bottom: 15px; }
.feature-list li { display: grid; grid-template-columns: 1fr 40px 40px; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 0.9rem; align-items: center; }
.feat-name img.icon { width: 16px; display: inline-block; margin-right: 8px; vertical-align: middle; }
.status { width: 20px; margin: 0 auto; }

.card-footer { text-align: center; margin-top: 20px; }
.payment-methods { height: 35px; margin: 15px auto 25px; opacity: 0.8; }

@media (max-width: 991px) {
    .pricing-grid-two { grid-template-columns: 1fr; max-width: 500px; margin: 40px auto; }
    .pricing-card.featured { transform: scale(1); order: -1; }


    

}






.feature-gpq{
  background: #dfd4ff;
  border: 1px solid rgba(5, 10, 31, .10);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;

  display: flex;
  align-items: center;
  gap: 14px;

  text-decoration: none;
  color: #050a1f;

  box-shadow: 0 10px 24px rgba(16, 28, 92, .08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.feature-gpq:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(16, 28, 92, .12);
  border-color: rgba(5, 10, 31, .18);
}

.feature-gpq__icon{
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  display: grid;
  place-items: center;
  flex: 0 0 52px;
}

.feature-gpq__icon img{
  width: 34px;
  height: 34px;
  display: block;
  filter: hue-rotate(45deg);
}

.feature-gpq__text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.feature-gpq__title{
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.05;
}

.feature-gpq__desc{
  font-weight: 500;
  opacity: .86;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-gpq__action{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.feature-gpq__cta{
  font-weight: 900;
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(5, 10, 31, .12);
}

.feature-gpq__chev{
  font-size: 22px;
  opacity: .8;
  transform: translateY(-1px);
}

/* Mobile: quebra bonito */
@media (max-width: 520px){
  .feature-gpq{
    align-items: flex-start;
  }
  .feature-gpq__desc{
    white-space: normal;
  }
  .feature-gpq__action{
    margin-top: 6px;
  }
}



/* Tabela Comparativa GPQ */
.gpq-compare { border: 1px solid rgba(0,0,0,0.1); border-radius: 16px; background: #fff; margin-top: 20px; overflow: hidden; }
.gpq-compare__row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(0,0,0,0.05); }
.gpq-compare__cell { padding: 12px; font-size: 14px; display: flex; gap: 10px; align-items: center; color: #000; }
.gpq-compare__cell--head.is-left { background: rgba(239, 68, 68, .10); color: #7f1d1d; font-weight: 800; }
.gpq-compare__cell--head.is-right { background: rgba(34, 197, 94, .12); color: #14532d; font-weight: 800; }
.ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 12px; }
.ico--ok { background: rgba(34, 197, 94, .18); color: green; }
.ico--minus { background: rgba(239, 68, 68, .14); color: red; }



      /* BLOCO 2 */
      .gpq-diff-compare {
        display: grid;
        gap: 18px;
        margin-bottom: 26px;
      }

      .gpq-compare-card {
        border-radius: 14px;
        padding: 18px;
        font-size: 15px;
      }

      .gpq-compare-card ul {
        margin: 0;
        padding-left: 18px;
      }

      .gpq-compare-card li {
        margin-bottom: 6px;
      }

      .gpq-compare-card.negative {
        background: #f8fafc;
        border: 1px solid rgba(15, 23, 42, .08);
      }

      .gpq-compare-card.positive {
        background: linear-gradient(180deg, #eef4ff, #ffffff);
        border: 1px solid rgba(37, 99, 235, .25);
      }


      .gpq-diff-eyebrow {
            font-size: 12px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            opacity: 0.6;
            color: #fff;
        }

        .gpq-diff-hero h3 {
            font-size: 26px;
            line-height: 1.2;
            font-weight: 600;
            color: #FFF;
        }

        .gpq-diff-hero span {
                /* color: rgb(6, 138, 164); */
                    background: var(--color-gradient);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }


.gpq-legend-grid {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.gpq-legend-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    padding: 10px;
    background: #ffffff0d;
    border-radius: 14px;
}

.gpq-badge {
    width: 36px;
    height: 36px;
    background: #00ee7b;
    color: #000000;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}


.gpq-legend-text strong {
   /* display: block; */
    font-size: 13px;
    color: #fff;
}

.gpq-legend-text p {
    font-size: 12.5px;
    opacity: .85;
    margin: 0;
}

.center-cta-box {
    text-align: center;
    margin-top: 40px;
}


.text-gradient-red-dark {
    background: linear-gradient(90deg, #FFEB3B, #db3b3b);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gpq-compare {
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 16px;
    background: #fff;
    margin-top: 20px;
    overflow: hidden;
}

.gpq-compare__cell--head.is-left {
    background: #ef44441a;
    color: #7f1d1d;
    font-weight: 800;
}

.gpq-compare__cell--head.is-right {
    background: #22c55e1f;
    color: #14532d;
    font-weight: 800;
}

.features-v3-tab {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #EAECF0;
    border-radius: 12px;
    cursor: pointer;
    background: #f9fafb;
    color: #000;
    transition: all .3s;
}




@media (min-width: 768px) {
    .gpq-diff-eyebrow {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}


/* ============================================= */
/* MELHORIA UX TOGGLE MOBILE (HTML + CSS)        */
/* ============================================= */

/* Configuração base da aba */
.features-v3-tab {
    position: relative;
    transition: all 0.3s ease;
    /* Garante que o span absoluto se posicione em relação à aba */
}

/* 1. O ÍCONE (Seta dentro de um círculo) - Mantido via CSS pois é decoração */
.features-v3-tab::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /*
    background-color: white;
    border: 1px solid #ddd;
    */
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

/* Estado Ativo: Ícone verde e girado */
.features-v3-tab.active::after {
    background-color: var(--un-green-dark);
    border-color: var(--un-green-dark);
    transform: translateY(-50%) rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Esconde o texto de ajuda no Desktop (telas grandes) */
.tab-hint {
    display: none;
}

/* 2. ESTILOS APENAS PARA MOBILE */
@media (max-width: 991px) {
    
    .features-v3-tab {
        padding-right: 55px; /* Espaço para o ícone */
        padding-bottom: 28px; /* Espaço reservado para o texto embaixo */
        align-items: flex-start;
    }

    .tab-title {
        margin-top: 4px;
        line-height: 1.3;
    }

    /* Estilização do texto que agora está no HTML */
    .tab-hint {
        display: block; /* Mostra no mobile */
        position: absolute;
        bottom: 18px; /* Fixo na parte inferior da aba */
        left: 60px; /* Alinhado visualmente com o Título */
        
        font-size: 11px;
        font-weight: 200;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #94a3b8; /* Cinza */
        
        pointer-events: none; /* Não interfere no clique */
        opacity: 1;
        transition: opacity 0.2s ease;
    }

    /* Quando a aba estiver aberta (active), esconde o texto */
    .features-v3-tab.active .tab-hint {
        opacity: 0;
    }
}




/* Adicione ou atualize isso no seu CSS */

html {
    scroll-behavior: smooth;
}

/* Zona de respiro para quando o scroll parar */
#oferta, 
#garantia,
#faq,
#gpe,
#gpq-bonus,
#matricular { /* Adicionei matricular caso use esse ID */
    scroll-margin-top: 140px; /* Aumentei para 140px para dar mais segurança */
}

/* Ajuste para Mobile (telas menores geralmente tem headers menores) */
@media (max-width: 768px) {
    #oferta, 
    #garantia,
    #faq,
    #gpe,
    #gpq-bonus {
        scroll-margin-top: 100px;
    }
}



.btn-toggle-gallery {
    background: transparent;
    border: 2px solid #000;
    color: #000;
    padding: 12px 30px;
    font-weight: 900;
    font-size: .9rem;
    border-radius: 50px;
    margin: 30px auto auto;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
}

/* ============================================= */
/* AJUSTE MOBILE - CARD GPQ (Botão Abaixo)       */
/* ============================================= */
@media (max-width: 520px) {
  
  .featured .feature-gpq {
    display: grid;
    /* Define duas colunas: uma para o ícone (auto) e outra para o texto (resto) */
    grid-template-columns: auto 1fr; 
    gap: 12px;
    align-items: center; /* Alinha verticalmente ícone e texto */
    padding: 16px;
  }

  /* 1. Ícone fica na esquerda */
  .featured .feature-gpq__icon {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0; /* Remove margens antigas se houver */
  }

  /* 2. Texto fica na direita */
  .featured .feature-gpq__text {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }
  
  /* Ajuste no título para não quebrar feio */
  .featured .feature-gpq__title {
      font-size: 1rem;
      line-height: 1.2;
  }

  /* 3. Ação (Botão) vai para a linha de baixo e ocupa tudo */
  .featured .feature-gpq__action {
    grid-column: 1 / -1; /* Ocupa de ponta a ponta */
    grid-row: 2;
    
    width: 100%;
    margin-left: 0;
    margin-top: 8px; /* Espaço entre texto e botão */
  }

  /* Estilo do botão para parecer um "Block Button" */
  .featured .feature-gpq__cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8); /* Um pouco mais de destaque */
  }

  /* Ajuste da setinha dentro do botão */
  .featured .feature-gpq__chev {
    margin-left: 8px;
    transform: none; /* Reseta posição */
  }
}

/* ============================================= */
/* AJUSTE SOBRE A EQUIPE (Mobile Stack)          */
/* ============================================= */
@media (max-width: 992px) {
  
  /* Força a direção vertical mesmo se tiver a classe 'reverse' */
  .story-row, 
  .story-row.reverse {
    flex-direction: column !important; 
    gap: 30px; /* Espaço entre a imagem e o texto */
    text-align: center; /* Centraliza o texto */
    margin-top: 40px !important; /* Ajuste de margem */
  }

  /* Garante que a imagem ocupe a largura e fique centralizada */
  .story-visual {
    width: 100%;
    max-width: 500px; /* Limita para não ficar gigante em tablets */
    margin: 0 auto 20px auto; /* Centraliza a imagem */
  }

  /* Garante que o texto ocupe a largura */
  .story-content {
    width: 100%;
    padding: 0 15px; /* Margem lateral para não colar na borda */
  }

  /* 
     DICA: Se você quiser que a imagem fique EM BAIXO do texto no mobile, 
     descomente a linha 'order: 2' abaixo. 
     Do jeito que está agora (padrão), a imagem fica em CIMA.
  */
  /* 
  .story-visual { order: 2; }
  .story-content { order: 1; }
  */
}


     .gpe-final-tag.exclusivo{
            margin-top: 2.5rem; 
             background: rgba(75, 54, 137, 0.1);
        }




        
/* ========================================= */
/* MODAL ULTRA-COMPACTO PARA MOBILE          */
/* ========================================= */
@media (max-width: 480px) {
    

    .social-proof-section{
            padding: 50px 0;
    }

        .headline-group__main br {
            display: none; /* Oculta a quebra de linha no mobile */
        }
        
        /* Opcional: Adiciona um espaço caso o texto fique colado */
        .headline-group__main br::after {
            content: ' '; 
        }

        .headline-group__intro{
            font-size: 1.2rem;
        }

        .gpq-diff-eyebrow{
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .features-v3-section{
              margin-bottom: 0px;
            padding-bottom: 20px;
        }

        .section-subtitle-text{
            font-size: 1.2rem;
        }

        .offer-section,
        .dedication-section-b,
        .reviews-general-section,
        .un-proof-masonry
        {
            padding:30px 0px 30px;
        }

        .gpe-final-tag.exclusivo{
            margin-top: 0px;; 

        }


        .profile-stats-col{
            padding: 25px;
        }
        .stats-header h3 {
            font-size: 1.5rem;
        }
 


    /* 1. Remove margens externas do container para ganhar espaço */
    .modal-container {
        width: 95%;
        padding: 15px; /* Menos padding interno */
        max-height: 90vh; /* Garante que cabe na tela */
        overflow-y: auto; /* Scroll interno se precisar muito */
    }

    /* 2. Oculta a descrição do topo (Texto cinza) */
    .modal-header p {
        display: none;
    }
    
    /* Ajusta o título */
    .modal-header h3 {
        margin-bottom: 5px;
        font-size: 1.4rem;
    }
    .modal-header {
        padding-bottom: 10px; /* Menos espaço entre título e form */
    }

    /* 3. OCULTA OS RÓTULOS (LABELS) */
    /* Deixa apenas o input visível */
    .form-group label {
        display: none;
    }

    /* 4. Aproxima os campos */
    .form-group {
        margin-bottom: 12px; /* Era 20px */
    }

    /* 5. Ajusta altura dos Inputs */
    .input-dark {
        padding: 12px 14px; /* Um pouco mais baixo */
        font-size: 0.95rem;
                margin-top: 15px;
    }

    /* 6. Compacta o Box do Parceiro (Aquele verde) */
    #partner-summary-box {
        padding: 8px 12px !important;
        margin-bottom: 15px !important;
    }
    #partner-summary-box img {
        width: 32px !important;
        height: 32px !important;
    }
    #partner-summary-box span {
        font-size: 0.8rem !important;
    }

    /* 7. Botão de Enviar */
    .modal-submit-btn {
        padding: 14px;
        margin-top: 5px;
        font-size: 1rem;
    }

    /* 8. Texto de Segurança (Footer) */
    .modal-security-text {
        margin-top: 10px;
        margin-bottom: 0;
    }


    .un-masonry-actions{
        display: grid;
    }
    
    .un-btn--soft{
    margin: auto;
    }

    .swiper-slide {
    width: 200px !important;
    }
    .social-proof-slider {
    height: 400px;
    }


}

.hero .trust-badge {
    margin-top: 20px;
}

.un-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    border: none;
}

.un-btn--soft {
    background: #2fff341f;
    color: var(--un-blue);
}


.gpq-feature-box {
    background: #0f172a08;
    border-radius: 16px;
    padding-top: 40px;
    margin-bottom: 30px;
    position: relative;
}


.gpq-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.gpq-checklist-grid li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: #58ff92;
    font-weight: 500;
}

.check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #58ff92;
    color: #044c1e;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
    flex-shrink: 0;
}

.gpq-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
    margin-top: 20px;
}

.method-icon {
    width: 56px;
    height: 56px;
    background: #00000038;
    color: #58ff92;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    transition: transform .3s ease;
}



.method-content p {
    margin: 0;
    font-size: .95rem;
    color: #FFF;
    line-height: 1.5;
    max-width: 280px;
}


.un-marquee-offer{
    background: #79ef91;
    overflow: hidden;
}



.pricing-card.featured {
    border: #00ee7b solid 5px;
    /* background-color: var(--color-white); */
}



.offer-package .card-header {
background-color: #1a201d;
    padding: 20px 20px 20px 30px;
    border-radius: 20px;
}


@media (max-width: 768px) {
    .value{
        font-size: 3rem;
    }

    .payment-option-card{
            padding: 15px !important;
    }
    .selector-header h3{
            line-height: 110%;
                font-weight: 300 !important;
    }
    .opt-desc{
            min-height: 0px !important;
            display:none;
    }
    
    .payment-option-card h4{
        margin-bottom: 0px !important;
        font-weight: 300 !important;
    }

    .hero .trust-badge {
            margin: auto;
            margin-top: 20px;
        }


    

}