/* ============================================= */
/* 0. FUNDAÇÃO E VARIÁVEIS GLOBAIS               */
/* ============================================= */
:root {
    --color-black: #000000;
    --color-white: #000000;
    --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('/produtos/_comum/fontes/Museo500-Regular.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Museo';
    src: url('/produtos/_comum/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;
    color: #000;
}

.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;
}


.text-gradient-red-dark {
    background: linear-gradient(90deg, #782222 0%, #db3b3b 100%) ;
    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;
}

/* 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);
}

/* 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; /* Espaço para o header fixo */
    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: 20px;
    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;
    }


}




/* ============================================= */
/* 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;
}

.features-v3-section__subtitle {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 300;
    max-width: 800px;
     margin: 5rem 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);
}

.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); }
}

.features-v3-panel h3 {
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: 1rem;
}
.features-v3-panel p {
    font-size: 1.125rem;
    line-height: 1.7;
    font-weight: 300;
    /* max-width: 500px; */
    margin-bottom: 2rem;
}
.features-v3-panel img {
    border-radius: 8px;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */
}

/* --- 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;
}



/* ... (os estilos de título e subtítulo continuam os mesmos) ... */

/* ESTILOS MOBILE-FIRST (COMPORTAMENTO DE ACORDEÃO) */
.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 {
    /* ... (estilo do número continua o mesmo) ... */
}
.tab-title {
    /* ... (estilo do título da aba continua o mesmo) ... */
}

/* Efeito da Aba Ativa */
.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);
}

/* Comportamento do Painel de Conteúdo */
.features-v3-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    padding: 0 1rem; /* Padding lateral quando fechado */
}
.features-v3-panel.active {
    max-height: 1000px; /* Um valor alto para permitir a expansão */
    padding: 1.5rem 1rem 0; /* Padding superior quando aberto */
}

.features-v3-panel h3 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
}
.features-v3-panel p {
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 1.5rem;
}
.features-v3-panel img {
    border-radius: 8px;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */
}

/* O wrapper da direita fica escondido no mobile */
.features-v3-content-wrapper-desktop {
    display: none;
}

/* --- Media Query para Desktop (Layout de duas colunas) --- */
@media (min-width: 992px) {
    .features-v3-interactive-wrapper {
        display: grid;
        grid-template-columns: 35% 1fr; /* Coluna de abas e coluna de conteúdo */
        gap: 2rem;
        align-items: flex-start;
    }

    /* No desktop, o grupo de acordeão vira apenas a lista de abas */
    .features-v3-accordion-group {
        gap: 1rem;
    }
    
    /* Esconde os painéis que estão dentro do grupo de acordeão no desktop */
    .features-v3-accordion-item .features-v3-panel {
        display: none;
    }

    /* Mostra o wrapper da direita 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 {
        /* ... (estilo do gradiente de fundo continua o mesmo) ... */
    }

    .features-v3-content-desktop {
        padding: 1rem;
    }
}

:root {
    --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%);
    --active-gradient: var(--gradient-green);
}


.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 p { font-size: 1rem; line-height: 1.7; font-weight: 300; margin-bottom: 1.5rem; }
.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; }
}
/* ============================================= */
/* 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: 3rem; /* 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: 2rem;
    }
}




/* ======================================================= */
/* 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, rgb(0 55 144 / 10%), 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 {
    margin-bottom: 4rem;
    animation: flutuar 5s ease-in-out infinite;
    max-width: 800px; 
    margin: auto;
        margin-bottom: 60px;
}

/* 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: 120px 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: rgb(0 36 237 / 15%);
    color: #1c3595;
    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%;
    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.75rem; font-weight: 900; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid; }
.profile-v3-title--positive { color: #009d63; border-color: rgba(52, 211, 153, 0.3); }
.profile-v3-title--negative { color: #bb2a2a; 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:009d63; }
.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, rgb(0 121 237 / 28%), 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%; */
        left: 40%;
        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: rgb(1 30 76 / 10%); color: var(--color-brand-primary);
    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; }
.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; }
.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: 100%; font-size: 1.25rem; margin-bottom: 1.5rem;  }
.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: 0;
    position: relative;
    overflow: hidden;
    padding-bottom: 0px;
}

.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;
}



.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: 65%; 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, #000000, transparent);
}

/* Sombra da Direita (Transparente -> Preto) */
.course-internal-slider-section::after {
    right: 0;
    background: linear-gradient(to left, #000000, 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 rgba(255,255,255,0.2) !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 */
}



.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; /* Força a exibição no desktop */
    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 */
.card-action-new .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 0 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: #172B85;
    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; */
    color: #ffe500
}

/* 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: #1CA3EC;
    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 #1CA3EC;
    color: #1CA3EC;
    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 #1CA3EC;
}

.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 #1CA3EC;
    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); }
}


/* =============================================
   FAIXA DE URGÊNCIA NO TOPO
   ============================================= */

.urgency-bar-top {
   /* position: fixed; */ /* Fixa no topo da tela */
   /* top: 0; */
    left: 0;
    width: 100%;
    height: 40px; /* Altura fixa */
    background-color: #D90429; /* Vermelho de Urgência */
    z-index: 9999; /* Acima de tudo */
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.urgency-scrolling-content {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    animation: scrollUrgency 20s linear infinite;
}

.urgency-scrolling-content span {
    color: #fff;
    font-family: var(--font-main, sans-serif); /* Usa a fonte do seu site */
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-right: 2rem; /* Espaço entre as repetições */
}

/* Animação de Rolagem Infinita */
@keyframes scrollUrgency {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Ajuste para o corpo da página não ficar escondido atrás da barra */

/* =============================================
   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 #282828;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

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

.e-n-accordion-item[open] {
    background: rgba(255, 255, 255); /* 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:  #172c85 ; /* 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;
}


/* ============================================= */
/* 0. VARIÁVEIS E FUNDAÇÃO (TEMA LIGHT/CLEAN)    */
/* ============================================= */
:root {
    /* Paleta de Cores - Universo Narrado Clean */
    --color-bg-body: #F9FAFB;       /* Fundo geral (off-white) */
    --color-bg-section: #FFFFFF;    /* Fundo de seções de destaque */
    --color-bg-card: #FFFFFF;       /* Fundo dos cards */
    
    /* Paleta Azul (Solicitada) */
    --color-brand-darkest: #050a1f; /* Texto principal / Títulos */
    --color-brand-dark: #101c5c;    /* Elementos secundários */
    --color-brand-primary: #172c86; /* Botões / Destaques */
    --color-brand-light: #3b5bdb;   /* Hover / Detalhes */

    /* Textos */
    --color-text-main: #050a1f;
    --color-text-body: #475467;     /* Cinza para leitura confortável */
    --color-text-light: #FFFFFF;    /* Texto sobre fundos escuros */

    /* Acentos */
    --color-accent-green: #00bfa5;  /* Verde mais sóbrio que o neon */
    --color-accent-gold: #b49348;   /* Dourado premium */
    --color-accent-red: #d92e2e;

    /* Sombras (O segredo do design clean) */
    --shadow-sm: 0 1px 2px 0 rgba(16, 28, 92, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(16, 28, 92, 0.1), 0 2px 4px -1px rgba(16, 28, 92, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(16, 28, 92, 0.1), 0 4px 6px -2px rgba(16, 28, 92, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(16, 28, 92, 0.1), 0 10px 10px -5px rgba(16, 28, 92, 0.04);

    /* Fontes */
    --font-main: 'Museo', sans-serif;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-bold: 900;
}

/* Reset e Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-body);
    color: var(--color-text-body);
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* ============================================= */
/* 1. UTILITÁRIOS E TIPOGRAFIA                   */
/* ============================================= */
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.container--small { max-width: 800px; }

/* Títulos */
.section__title, .headline-group__main {
    color: var(--color-brand-darkest);
    font-weight: var(--fw-bold);
    line-height: 1.1;
}

.section--dark {
    /* Inversão: Agora as seções "dark" são brancas ou cinza claro */
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
}

/* Gradiente de Texto (Adaptado para fundo branco) */
.text-gradient {
    background: linear-gradient(90deg, var(--color-brand-primary) 0%, var(--color-brand-light) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
    background: linear-gradient(90deg, #b49348, #d4af37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* Botões */
.cta-button {
    display: inline-block;
    font-weight: var(--fw-bold);
    text-align: center;
    padding: 18px 40px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.cta-button--primary {
    background: var(--color-brand-primary); /* Azul forte */
    color: #ffffff;
}
.cta-button--primary:hover {
    background: var(--color-brand-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Efeito Gradiente no Botão */
.btn-gradiente {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-dark) 100%);
    position: relative;
    overflow: hidden;
}

/* ============================================= */
/* 2. HEADER E HERO (Clean Style)                */
/* ============================================= */
.urgency-bar-top {
    background-color: var(--color-brand-darkest); /* Azul quase preto */
    color: #fff;
    font-size: 0.8rem;
    padding: 10px 0;
}

.hero {
    padding-top: 80px;
    padding-bottom: 60px;
    /* Fundo sutil em vez de imagem escura */
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F4FF 100%); 
    text-align: center;
}

.hero__logo {
    /* Se o logo for branco, precisamos inverter ou usar filtro */
    filter: invert(1) brightness(0.2); /* Torna o logo branco em preto/azul escuro */
    width: 200px;
    margin-bottom: 2rem;
}

.hero__bullets span {
    color: var(--color-brand-primary);
    background-color: rgba(23, 44, 134, 0.05); /* Azul muito claro */
    border: 1px solid rgba(23, 44, 134, 0.1);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
}

.hero__headline {
    font-size: 3rem;
    color: var(--color-brand-darkest);
    margin-bottom: 1.5rem;
}

.hero__subheadline {
    color: var(--color-text-body);
    font-size: 1.125rem;
    max-width: 700px;
    margin: 0 auto 2rem;
}

/* Logo Carousel Clean */
.logo-carousel {
    margin-top: 4rem;
    opacity: 0.6;
    filter: grayscale(100%); /* Logos em preto e branco para ficar clean */
}
.logo-carousel::before { background: linear-gradient(to right, #F0F4FF, transparent); }
.logo-carousel::after { background: linear-gradient(to left, #F0F4FF, transparent); }


/* ============================================= */
/* 3. VÍDEO E SEÇÕES GERAIS                      */
/* ============================================= */
.video-section {
    background-color: #FFFFFF;
    padding: 80px 0;
}

.video-player-wrapper {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-xl); /* Sombra elegante */
    padding: 10px;
    border-radius: 20px;
}

.video-background-glow {
    /* Remove o glow neon, usa um gradiente sutil */
    background: radial-gradient(circle, rgba(23, 44, 134, 0.08), transparent 70%);
}

/* Títulos de Seção */
.headline-group__intro {
    color: var(--color-brand-primary);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* ============================================= */
/* 4. CARDS DE CURSOS (Estilo Apple/Stripe)      */
/* ============================================= */
.ecosystem-section {
    background-color: var(--color-bg-body);
    padding: 80px 0;
}

.course-card__frame {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05); /* Borda sutil */
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform 0.3s ease;
    /* Removemos as bordas coloridas grossas do dark mode */
    border-top: 6px solid var(--course-color, var(--color-brand-primary)); 
}

.course-card__frame:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* Cores específicas para a borda superior */
.course-card__frame--dmat { --course-color: #06ABE7; }
.course-card__frame--lm { --course-color: #172B85; }
.course-card__frame--lf { --course-color: #229074; }
.course-card__frame--lc { --course-color: #B19856; }

.course-card__content {
    color: var(--color-text-body);
    padding: 3rem;
}

/* Header Box dentro do Card */
.course-card__header_box {
    background-color: #F5F7FA !important; /* Cinza muito claro */
    border: 1px solid rgba(0,0,0,0.05);
    color: var(--color-text-main);
    border-radius: 12px;
}

.header-description { color: var(--color-text-body); }
.header-price p { color: var(--color-text-body); }
.header-price span { color: var(--color-accent-red); }

.course-title-large {
    color: var(--color-brand-darkest);
    font-weight: 900;
}

.course-list-title {
    color: var(--color-brand-primary);
    font-weight: 700;
    margin-top: 1rem;
}

.lista_detalhes_curso li {
    color: var(--color-text-body);
    margin-bottom: 0.8rem;
}
.lista_detalhes_curso li span {
    color: var(--color-brand-dark);
}

/* Títulos Verticais (Desktop) */
.course-vertical-title {
    background: #FFFFFF !important;
    border-right: 1px solid rgba(0,0,0,0.05);
}
.course-vertical-title img {
    /* Inverter cor se for imagem branca */
    filter: invert(1); 
}

/* ============================================= */
/* 5. FEATURES / ACCORDION (Clean)               */
/* ============================================= */
.features-v3-section { background-color: #FFFFFF; }

.features-v3-tab {
    background: #F9FAFB;
    border: 1px solid #EAECF0;
    color: var(--color-text-body);
}

.features-v3-tab:hover {
    background: #F0F4FF;
    border-color: var(--color-brand-primary);
}

.features-v3-tab.active {
    background: #EFF4FF;
    border-color: var(--color-brand-primary);
}
.features-v3-tab.active .tab-title { color: var(--color-brand-primary); }
.features-v3-tab.active .tab-number {
    background: var(--color-brand-primary);
    color: #fff;
    border-color: var(--color-brand-primary);
}

.tab-number {
    color: var(--color-text-body);
    border-color: #D0D5DD;
}

/* Painel de Conteúdo Desktop */
.features-v3-content-wrapper-desktop {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
}
.features-v3-content-bg {
    /* Gradientes muito sutis para o fundo branco */
    opacity: 0.15; 
}
.features-v3-panel h3 { color: var(--color-brand-darkest); }
.features-v3-panel p { color: var(--color-text-body); }

/* ============================================= */
/* 6. GPE & GPQ (Seções de Tecnologia)           */
/* ============================================= */
.gpe-final-section{
 /*    background-color: #F2F4F7; */ /* Fundo levemente destacado */
        /* background: linear-gradient(180deg, #b2fbff, transparent); */
            background: linear-gradient(180deg, #b2fbff 0%, #b2fbff 50%, transparent 100%);
}


 .gpq-bonus-section {
 /*    background-color: #F2F4F7; */ /* Fundo levemente destacado */
        background: linear-gradient(180deg, #a78cfa, transparent);
}




.gpe-final-features-grid li, .bonus-grid li {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-body);
}

.gpe-final-features-grid strong, .bonus-grid strong {
    color: var(--color-brand-dark);
}

/* ============================================= */
/* 7. OFERTA (Preço e Checkout)                  */
/* ============================================= */
.offer-section-final {
    background: #FFFFFF;
    padding: 80px 0;
}

.offer-details-column {
    background: #F9FAFB;
    border: 1px solid #EAECF0;
    color: var(--color-text-body);
}
.offer-accordion-item { border-bottom: 1px solid #EAECF0; }
.offer-accordion-item summary { color: var(--color-brand-darkest); }
.offer-accordion-item summary::after { color: var(--color-brand-primary); }

/* Card de Preço (Destaque) */
.vertical-offer-card {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: var(--shadow-xl);
}

.card-student-stack {
    border: 2px solid var(--color-accent-gold); /* Destaque Dourado */
}

.main-price { color: var(--color-brand-darkest); }
.discount-label { color: var(--color-text-body); }
.installments { color: var(--color-text-body); }
.cents { color: var(--color-brand-primary); }

/* Formulário */
.input-dark {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    color: var(--color-text-main);
}
.input-dark:focus {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 4px rgba(23, 44, 134, 0.1);
    background: #c0ffd1;
}
.input-dark::placeholder { color: #98A2B3; }

/* ============================================= */
/* 8. FAQ & FOOTER                               */
/* ============================================= */
.faq-section { background-color: #F9FAFB; }

.e-n-accordion-item {
    background: #FFFFFF;
    border: 1px solid #757575;
    box-shadow: var(--shadow-sm);
}
.e-n-accordion-item summary { color: var(--color-brand-darkest); }
.accordion-content { color: var(--color-text-body); }

.footer {
    background-color: var(--color-brand-darkest); /* Footer mantém escuro para contraste */
    color: rgba(255,255,255,0.7);
}

/* ============================================= */
/* 9. AJUSTES ESPECÍFICOS DE IMAGENS             */
/* ============================================= */
/* Como as imagens originais podem ter texto branco, 
   aplicamos um filtro em imagens que parecem ser logos/ícones brancos 
   para que fiquem visíveis no fundo branco */

.hero__logo, 
.footer__main-logo,
.course-mobile-title img,
.course-vertical-title img {
    /* Se as imagens forem PNGs transparentes com cor branca, isso as torna escuras */
    /* filter: invert(1) brightness(0);  <-- ATIVE ISSO SE OS LOGOS SUMIREM */ 
}

/* Mas o footer é escuro, então o logo do footer não precisa de inversão */
.footer__main-logo { filter: none !important; }

/* Mockups e Imagens de Curso */

/* ============================================= */
/* 10. CORREÇÕES DE LAYOUT                       */
/* ============================================= */
.marquee-wrapper {
    background: #EFF4FF;
    border-color: #D1E0FF;
}
.marquee-track span { color: var(--color-brand-primary); }

.updates-gold-background-glow {
    background: radial-gradient(circle, rgba(180, 147, 72, 0.15), transparent 60%);
}
.updates-gold-tag {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #B45309;
    box-shadow: none;
    animation: none; /* Remove pulso neon */
}

/* Ajuste do Slider de Prova Social */
.swiper-slide { opacity: 1; transform: scale(1); } /* Remove efeito de fade escuro */
.social-proof-section { background: #FFFFFF; }

/*
.swiper-container-wrapper::before { background: linear-gradient(to right, #FFFFFF 0%, transparent 100%); }
.swiper-container-wrapper::after { background: linear-gradient(to left, #FFFFFF 0%, transparent 100%); }    
*/


/* ============================================= */
/* 0. VARIÁVEIS E FUNDAÇÃO (TEMA LIGHT/CLEAN)    */
/* ============================================= */
:root {
    /* Paleta de Cores - Universo Narrado Clean */
    --color-bg-body: #F9FAFB;       /* Fundo geral (off-white) */
    --color-bg-section: #FFFFFF;    /* Fundo de seções de destaque */
    --color-bg-card: #FFFFFF;       /* Fundo dos cards */
    
    /* Paleta Azul (Solicitada) */
    --color-brand-darkest: #050a1f; /* Texto principal / Títulos */
    --color-brand-dark: #101c5c;    /* Elementos secundários */
    --color-brand-primary: #172c86; /* Botões / Destaques */
    --color-brand-light: #3b5bdb;   /* Hover / Detalhes */

    /* Textos */
    --color-text-main: #050a1f;
    --color-text-body: #475467;     /* Cinza para leitura confortável */
    --color-text-light: #FFFFFF;    /* Texto sobre fundos escuros */

    /* Acentos */
    --color-accent-green: #00bfa5;  /* Verde mais sóbrio que o neon */
    --color-accent-gold: #b49348;   /* Dourado premium */
    --color-accent-red: #d92e2e;

    /* Sombras (O segredo do design clean) */
    --shadow-sm: 0 1px 2px 0 rgba(16, 28, 92, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(16, 28, 92, 0.1), 0 2px 4px -1px rgba(16, 28, 92, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(16, 28, 92, 0.1), 0 4px 6px -2px rgba(16, 28, 92, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(16, 28, 92, 0.1), 0 10px 10px -5px rgba(16, 28, 92, 0.04);

    /* Fontes */
    --font-main: 'Museo', sans-serif;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-bold: 900;
}

/* Reset e Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-body);
    color: var(--color-text-body);
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* ============================================= */
/* 1. UTILITÁRIOS E TIPOGRAFIA                   */
/* ============================================= */
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.container--small { max-width: 800px; }

/* Títulos */
.section__title, .headline-group__main {
    color: var(--color-brand-darkest);
    font-weight: var(--fw-bold);
    line-height: 1.1;
}

.section--dark {
    /* Inversão: Agora as seções "dark" são brancas ou cinza claro */
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
}

/* Gradiente de Texto (Adaptado para fundo branco) */
.text-gradient {
    background: linear-gradient(90deg, var(--color-brand-primary) 0%, var(--color-brand-light) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
    background: linear-gradient(90deg, #b49348, #d4af37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* Botões */
.cta-button {
    display: inline-block;
    font-weight: var(--fw-bold);
    text-align: center;
    padding: 18px 40px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.cta-button--primary {
    background: var(--color-brand-primary); /* Azul forte */
    color: #ffffff;
}
.cta-button--primary:hover {
    background: var(--color-brand-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Efeito Gradiente no Botão */
.btn-gradiente {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-dark) 100%);
    position: relative;
    overflow: hidden;
}

/* ============================================= */
/* 2. HEADER E HERO (Clean Style)                */
/* ============================================= */
.urgency-bar-top {
    background-color: var(--color-brand-darkest); /* Azul quase preto */
    color: #fff;
    font-size: 0.8rem;
    padding: 30px 0;
}

.hero {
    padding-top: 80px;
    padding-bottom: 60px;
    /* Fundo sutil em vez de imagem escura */
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F4FF 100%); 
    text-align: center;
}

.hero__logo {
    /* Se o logo for branco, precisamos inverter ou usar filtro */
    filter: invert(1) brightness(0.2); /* Torna o logo branco em preto/azul escuro */
    width: 200px;
    margin-bottom: 2rem;
}

.hero__bullets span {
    color: var(--color-brand-primary);
    background-color: rgba(23, 44, 134, 0.05); /* Azul muito claro */
    border: 1px solid rgba(23, 44, 134, 0.1);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
}

.hero__headline {
    font-size: 3rem;
    color: var(--color-brand-darkest);
    margin-bottom: 1.5rem;
}

.hero__subheadline {
    color: var(--color-text-body);
    font-size: 1.125rem;
    max-width: 700px;
    margin: 0 auto 2rem;
}

/* Logo Carousel Clean */
.logo-carousel {
    margin-top: 4rem;
    opacity: 0.6;
    filter: grayscale(100%); /* Logos em preto e branco para ficar clean */
}
.logo-carousel::before { background: linear-gradient(to right, #F0F4FF, transparent); }
.logo-carousel::after { background: linear-gradient(to left, #F0F4FF, transparent); }


/* ============================================= */
/* 3. VÍDEO E SEÇÕES GERAIS                      */
/* ============================================= */
.video-section {
    background-color: #FFFFFF;
    padding: 80px 0;
}

.video-player-wrapper {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-xl); /* Sombra elegante */
    padding: 10px;
    border-radius: 20px;
}

.video-background-glow {
    /* Remove o glow neon, usa um gradiente sutil */
    background: radial-gradient(circle, rgba(23, 44, 134, 0.08), transparent 70%);
}

/* Títulos de Seção */
.headline-group__intro {
    color: var(--color-brand-primary);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* ============================================= */
/* 4. CARDS DE CURSOS (Estilo Apple/Stripe)      */
/* ============================================= */
.ecosystem-section {
    background-color: var(--color-bg-body);
    padding: 80px 0;
}




.course-card__frame {
    background: #FFFFFF;
    border: 3px solid rgba(0,0,0,0.05);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform 0.3s ease;

    border-top: 6px solid var(--course-color, var(--color-brand-primary)); 
}
    

.course-card__frame:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* Cores específicas para a borda superior */
.course-card__frame--dmat { --course-color: #06ABE7; }
.course-card__frame--lm { --course-color: #172B85; }
.course-card__frame--lf { --course-color: #229074; }
.course-card__frame--lc { --course-color: #B19856; }

.course-card__content {
    color: var(--color-text-body);
    padding: 3rem;
}

/* Header Box dentro do Card */
.course-card__header_box {
    background-color: #F5F7FA !important; /* Cinza muito claro */
    border: 1px solid rgba(0,0,0,0.05);
    color: var(--color-text-main);
    border-radius: 12px;
}

.header-description { color: var(--color-text-body); }
.header-price p { color: var(--color-text-body); }
.header-price span { color: var(--color-accent-red); }

.course-title-large {
    color: var(--color-brand-darkest);
    font-weight: 900;
}

.course-list-title {
    color: var(--color-brand-primary);
    font-weight: 700;
    margin-top: 1rem;
}

.lista_detalhes_curso li {
    color: var(--color-text-body);
    margin-bottom: 0.8rem;
}
.lista_detalhes_curso li span {
    color: var(--color-brand-dark);
}

/* Títulos Verticais (Desktop) */
.course-vertical-title {
    background: #FFFFFF !important;
    border-right: 1px solid rgba(0,0,0,0.05);
}
.course-vertical-title img {
    /* Inverter cor se for imagem branca */
    filter: invert(1); 
}

/* ============================================= */
/* 5. FEATURES / ACCORDION (Clean)               */
/* ============================================= */
.features-v3-section { background-color: #FFFFFF; }

.features-v3-tab {
    background: #F9FAFB;
    border: 1px solid #EAECF0;
    color: var(--color-text-body);
}

.features-v3-tab:hover {
    background: #F0F4FF;
    border-color: var(--color-brand-primary);
}

.features-v3-tab.active {
    background: #EFF4FF;
    border-color: var(--color-brand-primary);
}
.features-v3-tab.active .tab-title { color: var(--color-brand-primary); }
.features-v3-tab.active .tab-number {
    background: var(--color-brand-primary);
    color: #fff;
    border-color: var(--color-brand-primary);
}

.tab-number {
    color: var(--color-text-body);
    border-color: #D0D5DD;
}


.features-v3-content-bg {
    /* Gradientes muito sutis para o fundo branco */
    opacity: 0.15; 
}
.features-v3-panel h3 { color: var(--color-brand-darkest); }
.features-v3-panel p { color: var(--color-text-body); }




.gpe-final-features-grid li, .bonus-grid li {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-body);
}

.gpe-final-features-grid strong, .bonus-grid strong {
    color: var(--color-brand-dark);
}

/* ============================================= */
/* 7. OFERTA (Preço e Checkout)                  */
/* ============================================= */
.offer-section-final {
    background: #FFFFFF;
    padding: 80px 0;
}

.offer-details-column {
    background: #F9FAFB;
    border: 1px solid #EAECF0;
    color: var(--color-text-body);
}
.offer-accordion-item { border-bottom: 1px solid #EAECF0; }
.offer-accordion-item summary { color: var(--color-brand-darkest); }
.offer-accordion-item summary::after { color: var(--color-brand-primary); }

/* Card de Preço (Destaque) */
.vertical-offer-card {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: var(--shadow-xl);
}

.card-student-stack {
    border: 2px solid var(--color-accent-gold); /* Destaque Dourado */
}

.main-price { color: var(--color-brand-darkest); }
.discount-label { color: var(--color-text-body); }
.installments { color: var(--color-text-body); }
.cents { color: var(--color-brand-primary); }

/* Formulário */
.input-dark {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    color: var(--color-text-main);
}
.input-dark:focus {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 4px rgba(23, 44, 134, 0.1);
}
.input-dark::placeholder { color: #98A2B3; }

/* ============================================= */
/* 8. FAQ & FOOTER                               */
/* ============================================= */
.faq-section { background-color: #F9FAFB; }

.e-n-accordion-item {
    background: #FFFFFF;
    border: 1px solid #cbcbcb;
    box-shadow: var(--shadow-sm);
}
.e-n-accordion-item summary { color: var(--color-brand-darkest); }
.accordion-content { color: var(--color-text-body); }

.footer {
    background-color: #192e85; /* Footer mantém escuro para contraste */
    color: rgba(255,255,255,0.7);
}

/* ============================================= */
/* 9. AJUSTES ESPECÍFICOS DE IMAGENS             */
/* ============================================= */
/* Como as imagens originais podem ter texto branco, 
   aplicamos um filtro em imagens que parecem ser logos/ícones brancos 
   para que fiquem visíveis no fundo branco */

.hero__logo, 
.footer__main-logo,
.course-mobile-title img,
.course-vertical-title img {
    /* Se as imagens forem PNGs transparentes com cor branca, isso as torna escuras */
    /* filter: invert(1) brightness(0);  <-- ATIVE ISSO SE OS LOGOS SUMIREM */ 
}

/* Mas o footer é escuro, então o logo do footer não precisa de inversão */
.footer__main-logo { filter: none !important; }


/* ============================================= */
/* 10. CORREÇÕES DE LAYOUT                       */
/* ============================================= */
.marquee-wrapper {
    background: #EFF4FF;
    border-color: #D1E0FF;
}
.marquee-track span { color: var(--color-brand-primary); }

.updates-gold-background-glow {
    background: radial-gradient(circle, rgba(180, 147, 72, 0.15), transparent 60%);
}
.updates-gold-tag {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #B45309;
    box-shadow: none;
    animation: none; /* Remove pulso neon */
}

/* Ajuste do Slider de Prova Social */
.swiper-slide { opacity: 1; transform: scale(1); } /* Remove efeito de fade escuro */
.social-proof-section { background: #FFFFFF; }
/*
.swiper-container-wrapper::before { background: linear-gradient(to right, #FFFFFF 0%, transparent 100%); }
.swiper-container-wrapper::after { background: linear-gradient(to left, #FFFFFF 0%, transparent 100%); }
*/


.course-card.mat-basica .course-card__frame{
    border-color:#e44c4d;
    
}

.course-card.mat-basica .course-vertical-title,
.course-card.mat-basica .course-mobile-title{
background:#2eabe7;
background: #e44c4d !important;
}







/* --- VARIÁVEIS E RESET --- */
:root {
    --un-blue: #172B85;
    --un-green: #00ED7B;
    --un-green-hover: #00C76B;
    --un-dark: #0A1218;
    --un-white: #ffffff;
    --un-text: #000000;
    --un-bg-light: #F7F8FF;
    --font-main: 'museo', sans-serif;
    --container-width: 1140px;
    --radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main);
    color: var(--un-text);
    background-color: var(--un-white);
    line-height: 1.5;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- TIPOGRAFIA GERAL --- */
.section-title {
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-align: center;
}

h3.section-subtitle {
    font-weight: 900;
    font-size: 2rem;
    line-height: 1.2;;
}


.section-title.dark { color: var(--un-dark) !important; }
.section-subtitle.dark { color: var(--un-dark) !important; }
.section-title.light { color: var(--un-white); }


.section-subtitle {
    font-size: 1.5rem;
   /* font-weight: 700; */
    color: #000;
    margin-bottom: 20px;
        width: 100%;
    margin: auto;
}

    @media (min-width: 991px) {
            .section-subtitle{
                width: 700px;
             }
    }




.text-blue { color: var(--un-blue); }
.bold-900 { font-weight: 900; }

.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; }
.badge-pill.red { background-color: #FFE4E4; color: #E34B4D; }
.badge-pill.green { background-color: #E8FFF9; color: #079670; }
.badge-pill.yellow { background-color: #FFEFAB; color: #A18300; }

/* --- BOTÕES --- */
.btn-cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--un-green);
    color: #000;
    font-weight: 900;
    padding: 16px 32px;
    border-radius: 4px;
    transition: transform 0.3s ease;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
    border: none;
}

.btn-glow {
    background: radial-gradient(165.91% 647.63% at 45.92% -308.33%, #00ED7B 0%, #00C76B 100%);
    position: relative;
    overflow: hidden;
}
.btn-glow:hover { transform: scale(1.05); }
.full-width { width: 100%; }

/* --- 1. HERO SECTION --- */
.hero-section {
    background-color: var(--un-blue);
    background-image: url('/produtos/licoes-de-matematica/01_Desktop_BG_Hero_LM_UN.webp');
    background-size: cover;
    background-position: center top;
    /* padding: 100px 0; */
    color: var(--un-white);
    min-height: 85vh;
    display: flex;
    align-items: center;
}
.hero-content { max-width: 650px ; }
.logo-hero { width: 180px; margin-bottom: 24px; }
.headline { font-size: 3.2rem; font-weight: 900; margin-bottom: 20px; line-height: 1.1; }
.subheadline { font-size: 1.1rem; font-weight: 500; margin-bottom: 40px; max-width: 500px; opacity: 0.9; }
.cta-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* --- 2. VSL SECTION --- */
.vsl-section { padding: 60px 0; text-align: center; }
.logo-mobile-only { display: none; margin: 0 auto 20px; width: 150px; }
.video-wrapper {
    max-width: 900px;
    margin: 30px auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.video-placeholder {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}
.play-button {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    background: rgba(255,0,0,0.9);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.play-button svg { width: 40px; height: 40px; }
.play-button:hover { transform: translate(-50%, -50%) scale(1.1); }
.caption-text { margin-top: 20px; font-size: 0.9rem; color: #666; }

/* --- 3. TESTIMONIALS --- */
.testimonials-section { padding: 60px 0; background: #fff; }
.section-header { text-align: center; margin-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto; }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}
.testimonial-card {
    padding: 20px;
    border-left: 4px solid var(--un-blue);
    background: #f9f9f9;
}
.testimonial-card h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--un-blue); }
.video-grid-testimonials {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.video-thumb {
    width: 300px;
    height: 170px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- 4. MODULES --- */
.modules-section { padding: 80px 0; background: #fff; }
.module-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 100px;
}
.module-row.reverse { flex-direction: row-reverse; }
.module-content { flex: 1; }
.module-img { flex: 1; }
.module-img img { border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.module-name { font-size: 2.5rem; font-weight: 900; margin: 10px 0; }
.module-topics {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    background: #f4f4f4;
    border-radius: 8px;
    margin-top: 20px;
}
.module-topics.active { max-height: 1000px; padding: 20px; }
.module-topics ul li { margin-bottom: 10px; border-bottom: 1px solid #e0e0e0; padding-bottom: 5px; }
.btn-expand {
    margin-top: 20px;
    background: transparent;
    border: 1px solid #000;
    padding: 10px 30px;
    font-weight: 900;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-expand:hover { background: #000; color: #fff; }
.center-cta-box { text-align: center; margin-top: 40px; }

/* --- 5. FEATURES (GPQ) --- */
.features-section { background-color: var(--un-dark); padding: 80px 0; color: #fff; }
.light-text { color: #ccc; font-size: 1.2rem; margin-top: 10px; }
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 60px;
}
.feature-card {
    background-color: #151f28;
    border-radius: var(--radius);
    padding: 250px 30px 40px; /* Espaço para imagem de fundo */
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    border: 1px solid #2a3b4c;
}
/* Backgrounds específicos para cada card (usando as imagens originais) */
.bg-listas { background-image: url('https://universonarrado.com/wp-content/uploads/2025/10/01_Desktop_BG_Card_Listas_GPQ.webp'); }
.bg-acesso { background-image: url('https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Acesso_BG_Feature_GPQ_Plataforma_UN.webp'); }
.bg-revisao { background-image: url('https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Revisao_BG_Feature_GPQ_Plataforma_UN.webp'); }
.bg-simulados { background-image: url('https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Simulados_BG_Feature_GPQ_Plataforma_UN.webp'); }
.bg-cronometro { background-image: url('https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Cronometrar_BG_Feature_GPQ_Plataforma_UN.webp'); }
.bg-dados { background-image: url('https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Dados_BG_Feature_GPQ_Plataforma_UN.webp'); }

.badge-feature {
    background-color: var(--un-blue);
    padding: 5px 15px;
    font-weight: 900;
    font-size: 0.8rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 15px;
}
.mt-50 { margin-top: 50px; }

/* --- 6. COMPARISON --- */
.comparison-section { padding: 80px 0; background: #fff; }
.comparison-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}
.comparison-col {
    padding: 40px;
    border-radius: var(--radius);
}
.comparison-col.bad { background-color: #FFF9F9; border: 1px solid #FFE4E4; }
.comparison-col.good { background-color: #E8FFF9; border: 1px solid #00ED7B; }
.comparison-col h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 20px; text-align: center; }
.comparison-col.bad h3 { color: #FE5B5D; }
.comparison-col.good h3 { color: #279540; }
.comparison-col ul li { margin-bottom: 15px; font-size: 1rem; display: flex; gap: 10px; }

/* --- 7. TEACHERS --- */
.teachers-section { padding: 80px 0; }
.teachers-grid {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}
.teacher-img { flex: 1; }
.teacher-info { flex: 1; }
.signature { width: 200px; margin-top: 20px; }
.team-block { text-align: center; }
.team-photo { margin-top: 30px; border-radius: var(--radius); }

/* --- 8. CHECKLIST (PARA QUEM É) --- */
.checklist-section { padding: 80px 0; background: #fff; }
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 40px 0;
}
.check-item {
    padding: 20px;
    /* background: #f9f9f9; */
    border-left: 3px solid var(--un-blue);
    font-size: 1.1rem;
}
.mb-20 { margin-bottom: 20px; font-weight: 900; font-size: 1.5rem; }

/* --- 9. OFFER --- */
.offer-section { padding: 80px 0; 
    /* background: #f4f4f4;  */
        background: linear-gradient(180deg, #a9ffbb, transparent);
}
.offer-card {
    background: #fff;
    border: 2px solid var(--un-blue);
    border-top: 10px solid var(--un-blue);
    border-radius: var(--radius);
    max-width: 550px;
    margin: 0 auto;
    padding: 50px 30px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}
.offer-header { text-align: center; margin-bottom: 30px; position: relative; }
.badge-popular {
    position: absolute;
    top: -75px; left: 50%; transform: translateX(-50%);
    background: var(--un-blue); color: #fff;
    padding: 8px 20px; font-weight: 900; font-size: 0.9rem;
    border-radius: 0 0 8px 8px;
}
.badge-discount {
    position: absolute;
    top: -65px; right: -40px;
    background: #E31212; color: #fff;
    padding: 5px 15px; font-weight: 900; font-size: 0.8rem;
    transform: rotate(15deg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.offer-logo { width: 250px; margin: 0 auto; }

.price-block { text-align: center; margin: 30px 0; }
.old-price { text-decoration: line-through; color: #999; font-size: 1.1rem; }
.current-label { font-weight: 900; margin-bottom: 5px; }
.price-value { color: var(--un-blue); font-weight: 900; display: flex; justify-content: center; align-items: baseline; }
.installments { font-size: 1.5rem; margin-right: 5px; }
.big-number { font-size: 4rem; line-height: 1; }
.cents { font-size: 1.5rem; }
.cash-price { font-size: 0.9rem; color: #666; margin-top: 5px; }

.benefits-list { margin: 30px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 20px 0; }
.benefits-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.95rem; }
.benefits-list img { width: 20px; }

.offer-footer { text-align: center; }
.access-info { font-weight: 900; margin-bottom: 15px; color: var(--un-blue); }
.payment-icons { width: 250px; margin: 20px auto 0; opacity: 0.7; }

/* --- 10. GARANTIA --- */
.guarantee-section { padding: 60px 0; text-align: center; background: #fff; }
.guarantee-box {
    max-width: 600px;
    margin: 0 auto;
   /* background-image: url('https://universonarrado.com/wp-content/uploads/2025/10/01_Mobile_Garantia_LM_UN.webp'); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 100px 20px; /* Ajuste conforme a imagem */
}

.guarantee-box{
    background-image: url(https://universonarrado.com/wp-content/uploads/2025/10/01_Desktop_Garantia_LM_UN.webp);
    background-position: top center;
    background-repeat: no-repeat;
}

/* --- 11. FAQ --- */
.faq-section { padding: 80px 0; background: var(--un-blue); color: #fff; }
.faq-list { max-width: 800px; margin: 40px auto; }
details {
    background: #fff;
    color: #000;
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
}
summary {
    padding: 20px;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
summary::after { content: '+'; font-size: 1.5rem; color: var(--un-blue); }
details[open] summary::after { content: '-'; }
.faq-answer { padding: 0 20px 20px; color: #555; line-height: 1.6; }

.whatsapp-cta { text-align: center; margin-top: 40px; }
.btn-whatsapp {
    display: inline-flex; align-items: center; gap: 10px;
    background: #13B601; color: #fff;
    padding: 15px 30px; border-radius: 4px; font-weight: 900;
}

/* --- 12. FOOTER --- */
.site-footer { padding: 40px 0; text-align: center; background: #fff; font-size: 0.9rem; }
.footer-content { display: flex; flex-direction: column; gap: 15px; align-items: center; }
.back-to-top { display: flex; align-items: center; gap: 5px; color: var(--un-blue); font-weight: 900; }

/* Floating WhatsApp */
.whatsapp-float {
    position: fixed; bottom: 20px; right: 20px;
    width: 60px; height: 60px;
    background: #25D366; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 999;
    transition: transform 0.3s;
}
.whatsapp-float:hover { transform: scale(1.1); }

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .headline { font-size: 2.2rem; }
/*   .hero-section { background-image: url('https://universonarrado.com/wp-content/uploads/2025/10/01_Mobile_BG_Hero_LM_UN.webp'); padding: 60px 0; } */
/*    .logo-hero { display: none; } */ /* Oculta logo desktop no mobile */
    .logo-mobile-only { display: block; }
    
    .module-row, .module-row.reverse { flex-direction: column; gap: 30px; }
    .teachers-grid { flex-direction: column; }
    .comparison-wrapper { grid-template-columns: 1fr; }
    
    .feature-card { padding-top: 200px; } /* Ajuste para imagem mobile */
}
/* --- SEÇÃO DE DEPOIMENTOS (SOCIAL PROOF) --- */
.social-proof-section {
    padding: 80px 0;
    /* background-color: var(--un-white); */
    background: linear-gradient(180deg, #63e3ff, transparent);
}


/* Grid Superior (2 Colunas) */
.testimonials-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* Espaço entre as colunas */
    margin-bottom: 60px;
    align-items: start;
}

.testimonial-col {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaço entre texto e vídeo */
}

/* Tipografia dos Depoimentos */
.story-headline {
    font-size: 1.25rem; /* ~20px */
    font-weight: 900;
    color: #000;
    line-height: 1.3;
    margin-bottom: 10px;
}

.story-text {
    font-size: 0.95rem; /* ~15px */
    color: #333;
    line-height: 1.6;
    font-weight: 300; /* Fonte levemente mais fina para leitura */
}

/* Alinhamento Centralizado (para o bloco inferior) */
.story-headline.center,
.story-text.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.story-headline.center { max-width: 800px; }
.story-text.center { max-width: 900px; }

/* Bloco Inferior (Compilado) */
.testimonial-full-width {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

/* --- VÍDEO WRAPPERS --- */
.video-wrapper-clean {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: #000;
    position: relative;
}

.video-wrapper-clean.wide {
    max-width: 900px; /* Largura máxima do vídeo de baixo */
}

.video-facade {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    cursor: pointer;
}

.video-facade img.video-thumb {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.video-facade video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* Botão de Play Vermelho (Estilo YouTube/Imagem) */
.play-btn-red {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 40px;
    background-color: #FF0000;
    border: none;
    border-radius: 10px; /* Bordas arredondadas estilo YT */
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.play-btn-red svg {
    width: 24px; height: 24px;
    fill: #fff;
}

.play-btn-red:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: #cc0000;
}

/* Botão maior para o vídeo grande */
.play-btn-red.large {
    width: 80px; height: 55px;
}
.play-btn-red.large svg { width: 32px; height: 32px; }

/* Ajuste do CTA e Trust Badge */
.trust-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.trust-badge-small {
    height: 18px;
    opacity: 0.8;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .testimonials-split-grid {
        grid-template-columns: 1fr; /* Vira 1 coluna no mobile */
        gap: 50px;
    }
    
    .story-headline { font-size: 1.1rem; }
    
    /* No mobile, o vídeo grande ocupa 100% da tela */
    .video-wrapper-clean.wide { width: 100%; }
}



/* --- 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;
}

/* POSICIONAMENTO FINAL (Onde elas vão parar) */
/* Ajustei para valores menos extremos para garantir visibilidade */

/* ESQUERDA */
.pos-1 { top: -5%;   left: -10%; z-index: 1; }
.pos-2 { top: 20%;   left: -15%; z-index: 2; }
.pos-3 { bottom: 20%; left: -12%; z-index: 3; }
.pos-4 { bottom: -15%; left: 0%;  z-index: 4; }

/* DIREITA */
.pos-5 { top: -10%;  right: -5%;  z-index: 1; }
.pos-6 { top: 15%;   right: -18%; z-index: 2; }
.pos-7 { bottom: 15%; right: -15%; z-index: 3; }
.pos-8 { bottom: -20%; right: 5%;  z-index: 4; }

/* 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; }
}   




/* --- SEÇÃO MÓDULOS V2 (AJUSTADO) --- */
.modules-section-v2 {
    padding: 80px 0;
    background-color: #fff;
    padding-bottom: 0px;
    overflow: hidden; /* Evita scroll lateral na animação */


}

/* Container do Bloco de Módulo */
.module-block {
    display: grid;
    grid-template-columns: 1fr 340px; /* Texto flexível, Imagem fixa em 340px */
    gap: 50px;
    margin: 0 auto 120px; /* Centraliza o bloco na página */
    max-width: 900px; /* Largura máxima solicitada */
    align-items: start;
    
    /* Estado inicial da animação (invisível e deslocado) */
    /* opacity: 0; */
    transform: translateY(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Classe ativada pelo JS para animar */
.module-block.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Inverte a ordem visual (Imagem esquerda, Texto direita) */
.module-block.reverse {
    direction: rtl;
    /* grid-template-columns: 340px 1fr; */ /* Inverte o grid também */
}
.module-block.reverse .module-text {
    direction: ltr;
}

/* Coluna de Texto */
.module-text {
    position: relative;
    width: 100%;
}

.module-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin: 5px 0 20px;
    color: var(--un-text);
}

.module-description {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.list-label {
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

/* Coluna da Imagem (Sticky) */
.module-image-wrapper {
    position: sticky;
    top: 100px;
    text-align: center;
    z-index: 2;
    width: 100%; /* Garante que ocupe a coluna do grid */
}

.module-poster {
    width: 100%;
    max-width: 340px; /* Largura solicitada */
    height: auto;
    border-radius: 16px;
    /* SEM SOMBRA */
    box-shadow: none; 
    transition: transform 0.3s ease;
}

.module-poster:hover {
    transform: scale(1.02); /* Efeito sutil ao passar o mouse */
}

/* --- LISTA COM EXPANSÃO (ACCORDION) --- */
.module-list {
    background: #F7F8FF;
    border-radius: 12px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: max-height 0.6s ease-in-out;
    /* SEM SOMBRA */
    box-shadow: none; 
}

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

.module-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 0.95rem;
    color: #333;
    line-height: 1.4;
}
.module-list li:last-child { border-bottom: none; }

/* Estado Recolhido */
.module-list.collapsed {
    max-height: 180px;
}

/* Fade Out no fundo da lista recolhida */
.list-fade {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgba(247,248,255,0), #FFFFFF);
    pointer-events: none;
    transition: opacity 0.3s;
}

.module-list.expanded {
    max-height: 2500px;
}
.module-list.expanded .list-fade {
    opacity: 0;
}

/* Botão Ver Mais */
.btn-toggle-list {
    margin-top: 15px;
    background: transparent;
    border: 2px solid #000;
    color: #000;
    padding: 10px 25px;
    font-weight: 900;
    font-size: 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-toggle-list:hover {
    background: #000;
    color: #fff;
}

/* Badges */
.badge-pill.pink { background-color: #FFE4E4; color: #E34B4D; }
.badge-pill.blue-dark { background-color: #172B85; color: #fff; }
.badge-pill.purple { background-color: #E8E4FF; color: #624BE3; }
.badge-pill.yellow { background-color: #FFEFAB; color: #A18300; }

/* --- RESPONSIVIDADE --- */
@media (max-width: 991px) {
    .module-block, .module-block.reverse {
        grid-template-columns: 1fr; /* 1 Coluna no mobile */
        gap: 30px;
        direction: ltr; /* Remove inversão */
        margin-bottom: 80px;
        text-align: center; /* Centraliza texto no mobile */
    }
    
    .module-text { text-align: left; } /* Lista alinhada a esquerda */
    .module-block .module-title,
    .module-block .module-description { text-align: center; }

    .module-image-wrapper {
        position: relative;
        top: 0;
        order: -1; /* Imagem acima do texto */
        margin-bottom: 10px;
    }

    .module-poster {
        max-width: 280px; /* Menor no mobile */
        margin: 0 auto;
    }

    .module-title { font-size: 2.2rem; }
}

/* --- SEÇÃO DE RECURSOS (FEATURES) --- */
.resources-section {
    padding: 80px 0 100px;
    background-color: #fff;
    overflow: hidden;
}

 

.resources-section .container{
   max-width: 900px;
}

.intro-text {
    font-size: 1.2rem;
    color: #555;
    margin: auto;
    margin-bottom: 40px;
    margin-top: 40px;
    max-width: 600px;
    text-align: center;
}

/* Linha de Recurso (Layout Zigue-Zague) */
.resource-row {
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 100px;
}

/* Inverte a ordem visual */
.resource-row.reverse {
    direction: rtl; /* Truque para inverter grid visualmente */
}
.resource-row.reverse .resource-content {
    direction: ltr; /* Texto volta ao normal */
}

/* Conteúdo */
.resource-visual img {
    width: 100%;
    height: auto;
    display: block;
    /* Sem sombras conforme solicitado */
    border-radius: 12px; 
}

.resource-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.1;
    color: #000;
    margin-bottom: 20px;
}

.resource-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
}

.bold-dark {
    font-weight: 900;
    color: #000;
}

/* --- BLOCO DE MONITORIA E NPS --- */
.monitoria-block {
    margin-top: 120px;
}

.nps-section {
    max-width: 800px;
    margin: 0 auto;
}

.nps-intro {
    font-size: 1.8rem;
    margin-bottom: 15px;
        width: 500px;
    margin: auto;
    text-align: center;
}

.text-blue-bold {
    color: #172B85;
    font-weight: 900;
}

.nps-sub {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;

        margin-bottom: 40px;
    text-align: center;
    margin-top: 20px;
}

.nps-graph {
    max-width: 100%;
    height: auto;
}

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

/* --- ALERTA 2026 --- */
.alert-box-2026 {
    max-width: 600px;
    margin: 80px auto 50px;
    border: 2px solid #172B85;
    background-color: #F7F8FF;
    border-radius: 12px;
    padding: 20px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

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

.alert-text {
    font-size: 1.1rem;
    color: #333;
    margin: 0;
}

@keyframes pulseAlert {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* --- ANIMAÇÃO DE SCROLL (REVEAL) --- */
.scroll-reveal {
   /* opacity: 0; */
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); /* Curva suave */
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 991px) {
    .resource-row, 
    .resource-row.reverse {
        grid-template-columns: 1fr;
        direction: ltr; /* Remove inversão no mobile */
        gap: 30px;
        text-align: center;
        margin-bottom: 80px;
    }

    /* Imagem sempre em cima no mobile */
    .resource-visual {
        order: -1;
    }

    .resource-title {
        font-size: 1.8rem;
    }

    .alert-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* --- SEÇÃO GPE (REFINADA) --- */
.gpe-section {
    padding: 80px 0 120px;
    background-color: #fff;
    overflow: hidden; /* Importante para as linhas não vazarem */
}

/* Badge e Títulos */
.badge-pill.blue-light {
    background-color: #E8E4FF;
    color: #172B85;
    font-weight: 700;
    /* margin-bottom: 20px; */
    display: inline-block;
}

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

/* --- GRID DO VÍDEO (HERO GPE) --- */
.gpe-hero-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;

    margin-top: 60px;
    flex-wrap: wrap;
}

.pricing-grid-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 90px;
    margin-top: 60px;
    align-items: center;
}

.gpe-side-text {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
}

.gpe-side-text.left { text-align: right; }
.gpe-side-text.right { text-align: left; }

.gpe-feature { margin-bottom: 30px; }
.feat-title { font-weight: 900; color: #000; font-size: 1.05rem; margin-bottom: 5px; }
.feat-desc { font-size: 0.95rem; color: #555; line-height: 1.4; }

/* Wrapper do Vídeo (Estilo Celular) */
.gpe-phone-wrapper {
    position: relative;
    width: 850px; /* Largura fixa de celular */
    flex-shrink: 0;
}

.phone-frame {
    width: 100%;
    border-radius: 30px; /* Borda arredondada forte */
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Sombra elegante */
    border: 8px solid #fff; /* Moldura branca */
    background: #000;
    line-height: 0;
    position: relative;
    z-index: 2;
}

.phone-video {
    width: 100%;
    height: auto;
    display: block;
}

/* Bolhas de fundo (Decoração) */
.blob {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    filter: blur(40px);
    opacity: 0.5;
}
.blob-1 { width: 200px; height: 200px; background: #E8E4FF; top: -20px; left: -50px; }
.blob-2 { width: 180px; height: 180px; background: #CCFBF1; bottom: -20px; right: -40px; }


/* --- BOTÃO VERDE --- */
.btn-cta.btn-green {
    background: linear-gradient(90deg, #00C853 0%, #00E676 100%);
    box-shadow: 0 0 20px rgba(0, 200, 83, 0.4);
    color: #fff;
    border: none;
}
.btn-cta.btn-green:hover {
    box-shadow: 0 0 30px rgba(0, 200, 83, 0.6);
    transform: translateY(-2px);
}

/* --- ESTATÍSTICAS --- */
.gpe-stats-block { max-width: 850px; margin: 80px auto 60px; }
.stat-title { font-size: 1.6rem; color: #333; margin-bottom: 20px; font-weight: 400; }
.text-blue-bold { color: #172B85; font-weight: 900; }
.stat-text { font-size: 1.1rem; color: #555; line-height: 1.6; }


/* --- PASSO A PASSO (ZIGUE-ZAGUE) --- */
.gpe-steps-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.steps-flow-container {
    position: relative;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;
    padding-bottom: 20px;
}

.steps-flow-container.collapsed { max-height: 600px; } /* Mostra os primeiros */
.steps-flow-container.expanded { max-height: 4000px; }

/* Linhas e Cards */
.step-row {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 40px;
}

.step-card img {
    max-width: 380px; /* Tamanho contido das imagens */
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none !important; /* Remove sombras */
}

/* Posicionamento das Linhas Conectoras */
.step-line {
    width: 300px; /* Largura da linha SVG */
    position: absolute;
    z-index: -1;
}

/* Ajustes Específicos por Linha */
.row-1 { justify-content: space-between; max-width: 900px; margin: 0 auto 40px; }
.row-1 .step-line { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; }

.row-2.right-align { justify-content: flex-end; max-width: 900px; margin: 0 auto 40px; padding-right: 20px; }

.row-3 { justify-content: flex-start; max-width: 900px; margin: 0 auto 40px; padding-left: 20px; }
/* Linha conectando 3 ao 4 (Flip horizontal) */
.row-3 .line-2 { 
    right: 10%; 
    top: -80px; 
    transform: scaleX(-1) rotate(20deg); /* Ajuste manual para conectar */
    width: 350px;
}

.row-4.left-align { justify-content: flex-start; max-width: 900px; margin: 0 auto 40px; padding-left: 20px; }

.row-5 { justify-content: flex-end; max-width: 900px; margin: 0 auto 40px; padding-right: 20px; }
.row-5 .line-3 { left: 10%; top: -60px; width: 350px; transform: rotate(-10deg); }

.row-6.center-align { justify-content: center; margin-top: 60px; }
.row-6 .step-card img { max-width: 500px; } /* Passo 7 é maior */


/* Fade Overlay */
.steps-fade-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    transition: opacity 0.3s;
}
.steps-flow-container.expanded .steps-fade-overlay { opacity: 0; }

/* Botão Ver Mais */
.btn-toggle-steps {
    background: transparent;
    border: 2px solid #000;
    color: #000;
    padding: 12px 35px;
    font-weight: 900;
    font-size: 0.9rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-toggle-steps:hover {
    background: #000;
    color: #fff;
}


/* --- GRÁFICOS COMPARATIVOS --- */
.gpe-comparison-block {
    max-width: 1100px;
    margin: 100px auto 0;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.comp-item img {
    width: 100%;
    border-radius: 12px;
    box-shadow: none !important;
}

/* Utilitários */
.no-shadow { box-shadow: none !important; }

/* --- RESPONSIVIDADE --- */
@media (max-width: 991px) {
    .gpe-hero-grid {
        padding: 40px;
        flex-direction: column;
        gap: 30px;
    }
    
    .gpe-phone-wrapper { order: -1; width: 260px; }
    .gpe-side-text { text-align: center !important; max-width: 100%; }

    /* Steps Mobile: Tudo empilhado e centralizado */
    .step-row, .row-1, .row-2, .row-3, .row-4, .row-5, .row-6 {
        justify-content: center !important;
        padding: 0 !important;
        margin-bottom: 30px;
        flex-direction: column;
    }
    
    .step-line { display: none; } /* Esconde linhas no mobile */
    .step-card img { max-width: 100%; }
    
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}



/* --- SEÇÃO UNI & GPQ --- */
.uni-section {
    padding: 80px 0 120px;
    background-color: #fff;
    overflow: hidden; /* Evita scroll lateral por causa do robô */
}


.uni-block {
    text-align: center;
}
/* Tipografia Específica */
.uni-big-title {
    font-size: 5rem; /* Título bem grande */
    font-weight: 900;
    line-height: 1;
    margin: 20px 0 30px;
    color: #000;
    text-align: center;
}

.text-uni-blue {
    color: #5B7CFA; /* Azul da UNI (baseado na imagem) */
}

.uni-subtitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
        width: 700px;
    margin: auto;
}

.uni-text {
    font-size: 1.1rem;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- SHOWCASE (ROBÔ + TELA) --- */
.uni-showcase-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 60px auto 0;
    /* Padding left para dar espaço ao robô no desktop */
    padding-left: 150px; 
}

/* O Robô */
.uni-robot {
    position: absolute;
    bottom: -40px; /* Fica um pouco abaixo da linha do vídeo */
    left: -80px;   /* Sai para a esquerda */
    width: 320px;  /* Tamanho grande */
    height: auto;
    z-index: 2;    /* Fica na frente do vídeo */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); /* Sombra no SVG */
    animation: floatRobot 6s ease-in-out infinite;
}

@keyframes floatRobot {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* A Tela do Computador */
.uni-screen-frame {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15); /* Sombra elegante */
    border: 1px solid #e0e0e0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Barra Decorativa (Estilo Browser Mac) */
.browser-bar {
    background: #f5f5f5;
    padding: 12px 15px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #FF5F56; }
.dot.yellow { background: #FFBD2E; }
.dot.green { background: #27C93F; }

/* Vídeo */
.video-container-uni {
    width: 100%;
    line-height: 0;
    background: #fff;
}

.uni-video {
    width: 100%;
    height: auto;
    display: block;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 1200px) {
    .uni-showcase-wrapper {
        padding-left: 100px; /* Reduz espaço lateral */
    }
    .uni-robot {
        width: 250px;
        left: -50px;
    }
}

@media (max-width: 991px) {
    .uni-big-title { font-size: 3.5rem; }
    
    .uni-showcase-wrapper {
        padding-left: 0; /* Remove padding lateral */
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Robô no Mobile */
    .uni-robot {
        position: relative; /* Deixa de ser absoluto */
        bottom: auto;
        left: auto;
        width: 200px;
        margin-bottom: -30px; /* Sobrepõe levemente o topo do vídeo */
        z-index: 3;
    }

    .uni-screen-frame {
        width: 100%;
    }
}


/* --- SEÇÃO GPQ DEEP DIVE --- */
.gpq-deep-dive-section {
    padding: 60px 0 100px;
    background-color: #fff;
}

/* --- ESTILOS DOS CARDS --- */
.gpq-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    color: #fff;
/*    box-shadow: 0 20px 40px rgba(23, 43, 133, 0.15); */
    transition: transform 0.3s ease;
}
.gpq-card:hover { transform: translateY(-5px); }

/* Variantes de Gradiente */
.blue-gradient {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); /* Azul Claro Vibrante */
    background: linear-gradient(105deg, #5B7CFA 0%, #3655D6 100%); /* Azul Universo */
}
.purple-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.cyan-gradient {
    background: linear-gradient(135deg, #2AF598 0%, #009EFD 100%);
}

/* Card Largo (Wide) */
.gpq-card.wide {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    /* padding: 50px; */
        padding: 40px 0px 50px 40px;
    gap: 40px;
    /* min-height: 400px; */
}

/* Card Vertical (Split) */
.gpq-card.vertical {
    padding: 40px 30px 0; /* Padding bottom 0 para imagem colar embaixo */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 500px;
}

/* Conteúdo Interno */
.gpq-card-content { position: relative; z-index: 2; }

.badge-feature-dark {
    background-color: #172B85; /* Azul Escuro */
    color: #fff;
    font-size: 0.8rem;
    font-weight: 900;
    padding: 6px 14px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.gpq-title-large {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
}

.gpq-title-medium {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 15px;
}

.gpq-text {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.95;
}
.gpq-text-sm {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.95;
}

/* Imagens de Interface (UI) */
.gpq-card-visual {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gpq-ui-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.gpq-ui-img.floating {
    animation: floatUI 6s ease-in-out infinite;
}

.gpq-ui-small {
    width: 100%;
    height: auto;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
    margin-top: 30px;
    display: block;
}

/* UI do Cronômetro (Customizada) */
.timer-ui {
    background: #fff;
    padding: 20px 40px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.timer-time {
    font-size: 2.5rem;
    font-weight: 900;
    color: #3655D6;
    font-family: monospace;
}
.btn-timer {
    background: #00E676;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 900;
    cursor: default;
}

/* --- INTERJEIÇÕES (QUOTES) --- */
.interjection-box {
    text-align: center;
    max-width: 700px;
    margin: 60px auto;
    font-size: 1.3rem;
    color: #444;
}

/* --- GRID LAYOUT --- */
.gpq-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

/* --- LÓGICA DE EXPANSÃO (ACCORDION) --- */
.gpq-hidden-content {
    position: relative;
    overflow: hidden;
    transition: max-height 1s ease-in-out;
}

.gpq-hidden-content.collapsed {
    max-height: 0; /* Esconde tudo */
    opacity: 0;
}
.gpq-hidden-content.expanded {
    max-height: 5000px; /* Altura suficiente */
    opacity: 1;
}

/* Botão Toggle */
.btn-toggle-gpq {
    background: transparent;
    border: 2px solid #172B85;
    color: #172B85;
    padding: 15px 40px;
    font-weight: 900;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}
.btn-toggle-gpq:hover {
    background: #172B85;
    color: #fff;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 991px) {
    .gpq-card.wide {
        grid-template-columns: 1fr;
        padding: 30px;
        text-align: center;
        gap: 30px;
    }
    
    .gpq-grid-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .gpq-card.vertical {
        min-height: auto;
        text-align: center;
    }

    .gpq-title-large { font-size: 2rem; }
    .gpq-title-medium { font-size: 1.8rem; }
    
    .interjection-box {
        font-size: 1.1rem;
        padding: 0 20px;
        margin: 40px auto;
    }
}

@keyframes floatUI {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}


/* --- SEÇÕES DE DEPOIMENTOS E RESULTADOS (GALERIAS) --- */
.reviews-general-section,
.results-proof-section {
    padding: 0px 0 80px;
    background-color: #fff;
}

/* Container da Galeria */
.expandable-gallery {
    position: relative;
    overflow: hidden;
    transition: max-height 1s ease-in-out;
    max-width: 1000px; /* Largura máxima do conteúdo */
    margin: 0 auto;
}

/* Estado Recolhido */
.expandable-gallery.collapsed {
    max-height: 600px; /* Altura do corte inicial */
}

/* Estado Expandido */
.expandable-gallery.expanded {
    max-height: 8000px; /* Altura suficiente para imagens longas */
}

/* Imagens */
.gallery-desktop img,
.gallery-mobile img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* No mobile, removemos margem inferior para as partes se juntarem */
.gallery-mobile img.mb-0 {
    margin-bottom: -1px; /* Evita linha branca entre imagens fatiadas */
}

/* Fade Overlay (Gradiente Branco) */
.gallery-fade {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    transition: opacity 0.5s;
    z-index: 2;
}

.expandable-gallery.expanded .gallery-fade {
    opacity: 0; /* Some quando expande */
}

/* Botão Ver Mais (Estilo Clean) */
.btn-toggle-gallery {
    background: transparent;
    border: 2px solid #000;
    color: #000;
    padding: 12px 30px;
    font-weight: 900;
    font-size: 0.9rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.btn-toggle-gallery:hover {
    background: #000;
    color: #fff;
}

.btn-toggle-gallery svg {
    transition: transform 0.3s;
}

/* Botão Gradiente (Solicitado no Elementor) */
.btn-cta.btn-gradiente {
    background: linear-gradient(90deg, #172B85 0%, #3655D6 100%); /* Gradiente Azul UN */
    color: #fff;
    box-shadow: 0 10px 25px rgba(23, 43, 133, 0.3);
    border: none;
}


.btn-gradiente-green {
    background: linear-gradient(90deg, #00C853 0%, #00E676 100%); /* Gradiente Azul UN */
    color: #fff;
    box-shadow: 0 10px 25px rgba(23, 43, 133, 0.3);
    border: none;
}


.btn-cta.btn-gradiente:hover {
    box-shadow: 0 15px 35px rgba(23, 43, 133, 0.5);
    transform: translateY(-2px);
}

/* Utilitário */
.no-shadow { box-shadow: none !important; }

/* --- RESPONSIVIDADE --- */
@media (max-width: 991px) {
    .expandable-gallery.collapsed {
        max-height: 500px; /* Corte um pouco menor no mobile */
    }
    
    .gallery-mobile img {
        width: 100%;
        max-width: 500px; /* Limita largura no mobile para não estourar */
    }
}


/* --- SEÇÃO DEDICAÇÃO (BASTIDORES) --- */
.dedication-section {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden; /* Para as setas não vazarem a tela */
}

/* Intro */
.intro-image-wrapper {
    position: relative;
    display: inline-block;
    max-width: 900px;
    width: 100%;
}

.main-hero-img {
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1); /* Sombra suave na intro */
}

/* Layout das Linhas (Story Rows) */
.story-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 100px;
}

.story-ap-row{
        display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: center;
    margin-top: 100px;
}

/* Inversão (Imagem na Direita, Texto na Esquerda) */
.story-row.reverse {
    direction: rtl;
}
.story-row.reverse .story-content {
    direction: ltr;
}

/* Conteúdo */
.story-visual {
    position: relative; /* Importante para as setas */
}

.story-big-title {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    color: #000;
    margin: 20px 0 25px;
}

.story-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
}

/* Imagens Arredondadas */
.rounded-img {
    border-radius: 16px;
    display: block;
    width: 100%;
    height: auto;
}

/* --- SETAS FLUTUANTES (HAND-DRAWN ARROWS) --- */
.arrow-float {
    position: absolute;
    z-index: 2;
    pointer-events: none; /* Não interfere no clique */
}

/* Seta 1: Biblioteca (Aponta da direita para esquerda, no topo) */
.arrow-library {
    top: 20%;
    right: -120px;
    width: 180px;
    transform: rotate(-10deg);
}

/* Seta 2: Equipe (Aponta da esquerda para direita, embaixo) */
.arrow-team {
    bottom: -50px;
    left: -80px;
    width: 140px;
}

/* Seta 3: Apartamento (Aponta da direita para esquerda, topo) */
.arrow-apartment {
    top: -40px;
    right: -100px;
    width: 150px;
}

/* --- BOTÃO VERDE (Reutilizável) --- */
.btn-cta.btn-green {
    background: linear-gradient(90deg, #00C853 0%, #00E676 100%);
    box-shadow: 0 5px 20px rgba(0, 200, 83, 0.3);
    color: #fff;
    border: none;
}
.btn-cta.btn-green:hover {
    box-shadow: 0 10px 30px rgba(0, 200, 83, 0.5);
    transform: translateY(-2px);
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 1200px) {
    /* Ajuste das setas em telas médias */
    .arrow-library { right: -50px; width: 140px; }
    .arrow-team { left: -40px; }
    .arrow-apartment { right: -40px; }
}

@media (max-width: 991px) {
    .story-row, .story-ap-row, .story-row.reverse {
        grid-template-columns: 1fr;
        direction: ltr; /* Remove inversão */
        gap: 40px;
        text-align: center;
        margin-top: 60px;
    }
    
    .story-visual {
        order: -1; /* Imagem sempre em cima */
        max-width: 600px;
        margin: 0 auto;
    }

    .story-big-title {
        font-size: 2rem;
    }
    
    .team-panorama {
        margin-top: 20px;
    }
    
    /* Esconde setas no mobile para limpar o visual */
    .arrow-float { display: none; }
}

/* --- SEÇÃO CHECKLIST (PARA QUEM É) --- */
.checklist-section {
    padding: 80px 0 100px;
    background-color: #172B85; /* Azul Escuro da Marca */
    color: #fff;
}

.badge-pill.white-transp {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title.white {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
}

/* Grid de Itens */
.checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 50px;
}

.check-item {
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px; /* Borda Pill */
    padding: 20px 30px;
    font-size: 1rem;
    line-height: 1.5;
    transition: transform 0.3s ease, background 0.3s ease;
}

.check-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
    border-color: #fff;
}

.check-item strong {
    font-weight: 900;
    color: #fff;
}

/* Footer Checklist */
.sim-text {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 20px;
    color: #fff;
}

.trust-wrapper-white img {
    margin-top: 15px;
    height: 20px;
    filter: brightness(0) invert(1); /* Torna o SVG branco */
    opacity: 0.8;
}

/* --- SEÇÃO COMPARATIVO --- */
.comparison-section {
    padding: 100px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

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

/* Cabeçalhos dos Cards */
.comp-header-card {
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.comp-header-card h3 {
    color: #fff;
    font-weight: 900;
    font-size: 1.5rem;
    margin: 0;
}

.comp-header-card.red { background-color: #FF5252; }
.comp-header-card.green { background-color: #2E7D32; } /* Verde UN */

/* Itens da Lista */
.comp-item {
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
}

/* Cores de Fundo dos Itens */
.comp-item.red {
    background-color: #FFF5F5; /* Vermelho bem claro */
    border-left: 4px solid #FF5252;
    color: #D32F2F;
}

.comp-item.green {
    background-color: #E8F5E9; /* Verde bem claro */
    border-left: 4px solid #2E7D32;
    color: #1B5E20;
}

/* Seta Flutuante */
.arrow-comparison {
    position: absolute;
    bottom: 150px;
    right: -50px;
    width: 250px;
    z-index: 2;
    pointer-events: none;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 991px) {
    /* Checklist Mobile */
    .checklist-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .check-item {
        border-radius: 20px; /* Menos arredondado no mobile para caber mais texto */
        padding: 15px 20px;
        font-size: 0.95rem;
    }
    .section-title.white { font-size: 2rem; }

    /* Comparativo Mobile */
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .arrow-comparison { display: none; } /* Esconde seta no mobile */
}


/* --- SEÇÃO DE OFERTA (PRICING) --- */
.offer-section {
    padding: 80px 0 120px;
    background-color: #fff;
}

/* Grid de Cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 60px;
    align-items: center; /* Alinha verticalmente */
}

/* --- CARD PADRÃO (BRANCO) --- */
.pricing-card {
    background-color: #F7F8FF; /* Fundo levemente cinza/azul */
    border-radius: 20px;
    padding: 30px 20px;
    position: relative;
    transition: transform 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Header do Card */
.card-header {
    text-align: center;
    margin-bottom: 20px;
    height: 60px; /* Altura fixa para alinhar logos */
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-logo {
    max-width: 250px;
    height: auto;
}

/* Preço */
.card-price {
    text-align: center;
    margin-bottom: 30px;
}

.old-price {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 5px;
}
.strike {
    text-decoration: line-through;
    color: #FF5252;
    font-weight: 700;
}
.price-label {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 5px;
    font-weight: 700;
}

.price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: #3655D6; /* Azul UN */
    line-height: 1;
}

.currency { font-size: 1.5rem; font-weight: 700; margin-right: 5px; }
.value { font-size: 4.5rem; font-weight: 900; letter-spacing: -2px; }
.cents { font-size: 1.5rem; font-weight: 700; }

.cash-price {
    font-size: 0.9rem;
    color: #555;
    margin-top: 5px;
}

/* Lista de Features (Tabela) */
.card-features {
    margin-bottom: 30px;
}

.feature-header {
    display: grid;
    grid-template-columns: 1fr 40px 40px; /* Nome | Mat | Fis */
    gap: 10px;
    font-weight: 900;
    font-size: 0.85rem;
    color: #000;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-align: center;
}
.feature-header span:first-child { text-align: left; }

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

.feature-list li {
    display: grid;
    grid-template-columns: 1fr 40px 40px;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 0.9rem;
    color: #444;
}

.feature-list li:last-child { border-bottom: none; }

.feat-name {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    line-height: 1.3;
}
.feat-name .icon { width: 16px; margin-top: 2px; }

.status {
    width: 22px;
    height: 22px;
    margin: 0 auto;
    display: block;
}

/* Footer do Card */
.card-footer { text-align: center; }

.access-time {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 15px;
}

.payment-methods {
    margin: auto;
    margin-top: 15px;
    height: 25px;
    opacity: 0.8;
}

/* Botão Indisponível */
.btn-cta.btn-disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
}
.btn-cta.btn-disabled:hover { transform: none; }


/* --- CARD DESTAQUE (CENTRAL - AZUL ESCURO) --- */
.pricing-card.featured {
    background-color: #172B85; /* Azul Escuro UN */
    color: #fff;
    transform: scale(1.05); /* Levemente maior */
    z-index: 2;
    box-shadow: 0 30px 60px rgba(23, 43, 133, 0.4);
    border: none;
}

.pricing-card.featured:hover { transform: scale(1.05) translateY(-5px); }

/* Ajustes de Cor no Card Destaque */
.pricing-card.featured .price-row { color: #fff; }
.pricing-card.featured .price-label,
.pricing-card.featured .cash-price,
.pricing-card.featured .access-time,
.pricing-card.featured .old-price { color: rgba(255,255,255,0.8); }

.pricing-card.featured .feature-header {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.2);
}

.pricing-card.featured .feature-list li {
    color: rgba(255,255,255,0.9);
    border-bottom-color: rgba(255,255,255,0.1);
}

.pricing-card.featured .feat-name .icon {
    filter: brightness(0) invert(1); /* Ícones brancos */
}

.pricing-card.featured .payment-methods {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

/* Badges do Destaque */
.card-badges {
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.badge-popular {
    background-color: #172B85;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 5px 15px;
    border-radius: 20px;
    border: 2px solid #fff;
    text-transform: uppercase;
}

.badge-discount {
    background-color: #FF5252;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 5px 15px;
    border-radius: 20px;
    border: 2px solid #fff;
}


/* --- RESPONSIVIDADE --- */
@media (max-width: 1100px) {
    .pricing-grid {
        gap: 10px;
    }
    .pricing-card { padding: 20px 10px; }
    .value { font-size: 3.5rem; }
}

@media (max-width: 991px) {
    .pricing-grid {
        grid-template-columns: 1fr; /* 1 Coluna */
        gap: 50px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

        .pricing-grid-two {
        grid-template-columns: 1fr; /* 1 Coluna */
        gap: 50px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-card.featured {
        transform: scale(1); /* Remove escala no mobile */
        order: -1; /* Joga o destaque para o topo */
    }
    .pricing-card.featured:hover { transform: translateY(-5px); }
}


/* --- SEÇÃO CARROSSEL (SLIDER) --- */
.carousel-section {
    padding: 60px 0;
    background-color: #fff; /* Ou #F7F8FF se quiser destacar */
    overflow: hidden;
}

.testimonial-swiper {
    width: 100%;
    padding-bottom: 20px; /* Espaço extra se precisar de paginação */
}

.swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-img {
    width: 100%;
    max-width: 230px; /* Tamanho médio das imagens no original */
    height: auto;
    border-radius: 12px;
    display: block;
    /* Sem sombra conforme padrão anterior */
    box-shadow: none; 
    transition: transform 0.3s ease;
    cursor: grab;
}

.carousel-img:active {
    cursor: grabbing;
}

.carousel-img:hover {
    transform: scale(1.03); /* Leve zoom ao passar o mouse */
}


/* --- SEÇÃO GARANTIA --- */
.guarantee-section {
    padding: 80px 0;
    background-color: #F7F8FF;
}

.guarantee-box {
    max-width: 800px;
    margin: 0 auto;
}

/* --- SEÇÃO PROFESSORES --- */
.teachers-section {
    padding: 100px 0 0 0;
    background-color: #fff;
}

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

.teacher-img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.teacher-bio p {
    font-size: 1.05rem;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.6;
}

.teacher-story {
    margin-top: 30px;
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.signature-img {
    margin-top: 30px;
    max-width: 200px;
    opacity: 0.8;
}

/* --- SEÇÃO FAQ & VERIFICADOR --- */
.faq-section {
    padding: 100px 0;
    background-color: #fff;
}

.faq-grid {
    display: grid;
    grid-template-columns: 350px 1fr; /* Sidebar fixa, FAQ flexível */
    gap: 60px;
    margin-top: 60px;
    align-items: start;
}

/* Sidebar de Suporte */
.support-box {
    background: #F7F8FF;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(23, 43, 133, 0.1);
}

.support-box h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 15px; }
.support-box p { font-size: 0.95rem; color: #555; margin-bottom: 25px; }

.btn-whatsapp-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #25D366;
    color: #fff;
    font-weight: 900;
    padding: 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s;
}
.btn-whatsapp-full:hover { background-color: #20bd5a; transform: translateY(-2px); }

/* Verificador de WhatsApp */
.verifier-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.verifier-box h4 { font-size: 1.1rem; font-weight: 900; margin-bottom: 10px; }
.small-text { font-size: 0.85rem; color: #777; margin-bottom: 20px; line-height: 1.4; }

.verifier-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.verifier-input-group input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.verifier-input-group button {
    background: #172B85;
    color: #fff;
    border: none;
    padding: 0 15px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}
.verifier-input-group button:hover { background: #0f1e63; }

.msg-box {
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    display: none; /* Oculto por padrão */
    margin-top: 10px;
}
.msg-box.error { background: #FFE4E4; color: #D32F2F; }
.msg-box.success { background: #E8F5E9; color: #2E7D32; }

/* Acordeão FAQ */
.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.faq-item summary {
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
}

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

.faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    color: #172B85;
    font-weight: 400;
}

.faq-item[open] summary::after {
    content: '-';
}

.faq-answer {
    margin-top: 15px;
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
    padding-right: 20px;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 991px) {
    .teachers-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .teacher-bio, .teacher-story { text-align: left; }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .verifier-input-group {
        flex-direction: column;
    }
    .verifier-input-group button {
        padding: 12px;
        width: 100%;
    }
}


.module-list.mb {
    background: #ffedee;
}

.module-list.ar{
    background: #dfe3ff;
}


.module-list.al {
    background: #adffe4;
}

.module-list.ge {
    background: #fff7d6;
}

.gpq-card.exercicios{
    background-image: url(https://universonarrado.com/wp-content/uploads/2025/10/01_Desktop_BG_Card_Listas_GPQ.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}


.gpq-card.acesso{
    background-image: url(https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Acesso_BG_Feature_GPQ_Plataforma_UN.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}



.gpq-card.revisoes{

    background-image: url(https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Revisao_BG_Feature_GPQ_Plataforma_UN.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 105% auto;
}



.gpq-card.simulados{

    background-image: url(https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Simulados_BG_Feature_GPQ_Plataforma_UN.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 105% auto;

}


.gpq-card.timer{
    background-image: url(https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Cronometrar_BG_Feature_GPQ_Plataforma_UN.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}



.gpq-card.estatisticas{
    background-image: url(https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Dados_BG_Feature_GPQ_Plataforma_UN.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.gpq-card.dicas{
    background-image: url(https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Dicas_BG_Feature_GPQ_Plataforma_UN.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 105% auto;
}


.gpq-card.resolucao{
    background-image: url(https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Resolucoes_BG_Feature_GPQ_Plataforma_UN.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 105% auto;
}


.gpq-card.duvidas{
    background-image: url(https://universonarrado.com/wp-content/uploads/2025/09/01_Desktop_Monitoria_BG_Feature_GPQ_Plataforma_UN.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}


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

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

.mt-30{
    margin-top: 30px
}



.faq-section{
   /*
    background-color: #172B85;
    background-image: url(https://universonarrado.com/wp-content/uploads/2025/10/01_Desktop_BG_FAQ_LM_UN.webp);
    */
    background: linear-gradient(360deg, #67e4fe, transparent);
    background-position: bottom center;
    background-repeat: no-repeat;
}


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

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

    background: linear-gradient(
  360deg,
  #b2fbff 0%,
  #b2fbff 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; }
}



/* ============================================= */
/* 5. FEATURES / ACCORDION (Clean)               */
/* ============================================= */
.features-v3-section { background-color: #FFFFFF; 

}

.features-v3-tab {
    background: #F9FAFB;
    border: 1px solid #EAECF0;
    color: var(--color-text-body);
}

.features-v3-tab:hover {
    background: #F0F4FF;
    border-color: var(--color-brand-primary);
}

.features-v3-tab.active {
    background: #EFF4FF;
    border-color: var(--color-brand-primary);
}
.features-v3-tab.active .tab-title { color: var(--color-brand-primary); }
.features-v3-tab.active .tab-number {
    background: var(--color-brand-primary);
    color: #fff;
    border-color: var(--color-brand-primary);
}

.tab-number {
    color: var(--color-text-body);
    border-color: #D0D5DD;
}


.features-v3-content-bg {
    /* Gradientes muito sutis para o fundo branco */
    opacity: 0.15; 
}
.features-v3-panel h3 { color: var(--color-brand-darkest); }
.features-v3-panel p { color: var(--color-text-body); }



.gpe-final-tag {
    background-color: rgba(23, 44, 134, 0.1);
    color:#3756d1;
    border: none;
}

.gpe-final-tag.branca{
    background-color: rgb(255 255 255);
    color: #3652cc;
    border: none;
}

.gpe-final-tag.red{
  background-color: rgb(255 235 235);
    color: #cc3636;
    border: none;
}


  

.gpe-final-tag.purple{
    background-color: rgb(255 255 255 / 60%);
    color: #4b3689;
    border: none;
}



.gpe-final-features-grid li, .bonus-grid li {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-body);
}

.gpe-final-features-grid strong, .bonus-grid strong {
    color: var(--color-brand-dark);
}



/* ============================================= */
/* PREMIUM NAV SECTION (APPLE STYLE - CENTERED)  */
/* ============================================= */

.premium-nav-section {
    padding: 80px 0;
    /* background-color: #F5F5F7; */  /* Fundo cinza Apple */
    background: linear-gradient(0deg, #F5F5F7, transparent);
    position: relative; /* Necessário para o gradiente absoluto */
}

.premium-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Colunas */
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Fica acima do gradiente */
}

/* --- O CARD --- */
.premium-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 30px 20px; /* Mais padding vertical */
    display: flex;
    flex-direction: column;
    align-items: center; /* CENTRALIZA HORIZONTALMENTE (ÍCONE) */
    justify-content: flex-start;
    gap: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Borda inicial transparente para não pular no hover */
    border: 2px solid transparent; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* Hover Effect: Levanta + Borda Colorida */
.premium-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: var(--un-blue); /* Borda Azul da Marca */
}

/* --- ÍCONES (APP ICON STYLE) --- */
.card-icon-box {
    width: 64px; /* Ícones um pouco maiores */
    height: 64px;
    border-radius: 20px; /* Squircle mais suave */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}

.premium-card:hover .card-icon-box {
    transform: scale(1.1) rotate(-3deg);
}

.icon-svg {
    width: 32px;
    height: 32px;
}

/* Cores de Fundo dos Ícones */
.bg-blue-light   { background: #E3F2FD; }
.bg-purple-light { background: #F3E5F5; }
.bg-cyan-light   { background: #E0F7FA; }
.bg-orange-light { background: #FFF3E0; }
.bg-red-light    { background: #FFEBEE; }
.bg-dark-light   { background: #ECEFF1; }
.bg-gold-light   { background: #FFF8E1; }

/* Cores dos Ícones */
.text-blue   { color: #1976D2; }
.text-purple { color: #7B1FA2; }
.text-cyan   { color: #0097A7; }
.text-orange { color: #F57C00; }
.text-red    { color: #D32F2F; }
.text-dark   { color: #455A64; }
.text-gold   { color: #FBC02D; }

/* --- CONTEÚDO DE TEXTO (CENTRALIZADO) --- */
.card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center; /* CENTRALIZA O TEXTO */
    width: 100%;
}

.premium-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #111;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.premium-card p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
    max-width: 220px; /* Limita largura para quebrar linha bonito */
    margin: 0 auto; /* Centraliza o bloco de texto limitado */
}

/* --- CARD DE MATRÍCULA (CTA) --- */
.premium-card.cta-highlight {
    background: var(--color-primary-green); /* Verde UN */
    border-color: transparent; /* Remove borda no hover deste card */
}

.premium-card.cta-highlight:hover {
    border-color: #00c76b; /* Borda verde mais escura no hover */
}

.premium-card.cta-highlight .card-icon-box {
    background: #000;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.premium-card.cta-highlight .icon-svg {
    color: #fff;
}

.premium-card.cta-highlight h3 {
    color: #000;
    font-size: 1.3rem;
}

.premium-card.cta-highlight p {
    color: rgba(0,0,0,0.7);
    font-weight: 800;
}

/* Efeito de Brilho no CTA */
.shine-effect {
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
    pointer-events: none;
}
.premium-card.cta-highlight:hover .shine-effect {
    left: 150%;
    transition: 0.7s;
}

/* --- RESPONSIVIDADE --- */

/* Tablet (2 Colunas) */
@media (max-width: 991px) {
    .premium-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 10px;
    }
}

/* Mobile (1 Coluna ou 2 Compactas) */
@media (max-width: 600px) {
    .premium-nav-section { padding: 40px 0; }
    
    .premium-grid {
        /* Mantém 1 coluna para leitura confortável no mobile */
        grid-template-columns: 1fr; 
        gap: 15px;
    }

    .premium-card {
        /* No mobile, volta para layout horizontal (ícone esquerda) */
        flex-direction: row; 
        text-align: left; /* Texto alinhado à esquerda */
        padding: 16px;
        align-items: center;
    }

    .card-content {
        text-align: left; /* Texto alinhado à esquerda */
        align-items: flex-start;
    }
    
    .premium-card p {
        margin: 0; /* Remove margem auto */
        max-width: 100%;
    }

    .card-icon-box {
        margin-bottom: 0;
        width: 50px; height: 50px;
        flex-shrink: 0;
    }
    
    .icon-svg { width: 24px; height: 24px; }
}

.section_estutdos{
    text-align: center;
    font-size: 1.25rem;
    font-weight: 300;
    max-width: 800px;
    margin: 1rem auto 2rem;
}


.dedication-section-b {
    padding: 100px 0 40px;
  /*  background-color: #3652cc; */


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

    overflow: hidden;
}


.dedication-section-b .section__title, 
.dedication-section-b .headline-group__main {
    color: #1a308c;
}


.dedication-section-b .text-gradient {
    /* background: linear-gradient(90deg, #ffef76 0%, #ffe100 100%); */
    /*    background: linear-gradient(90deg, #69e4ff 0%, #67e4fe 100%); */
     /*   background: linear-gradient(90deg, #ff6969 0%, #fe6767 100%); */

    background: linear-gradient(90deg, #cc3636 0%, #cc3636 100%);

        background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dedication-section-b h1,
.dedication-section-b h2{
    color: #1a318c;
}


.dedication-section-b .story-text{
    color: #000;
}

a.cta-button.whatsapp {
    background: #28d366;
    border: 0px;
}

.guarantee-subtitle{
    color: #000;
}

.un-marquee-offer{
  position: relative;
  overflow: hidden;
      background: #79ef91;
  /*
  background: linear-gradient(
    180deg,
    #e8ffe8 0%,
    #c9facc 100%
  );
  
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  */
}

.un-marquee-track{
  display: flex;
  width: max-content;
  animation: un-marquee-scroll 38s linear infinite;
}

.un-marquee-content{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  white-space: nowrap;
}

.un-marquee-content span{
  font-family: 'Museo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0f2a1f;
  opacity: .9;
  letter-spacing: .01em;
}

/* animação */
@keyframes un-marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* mobile: mais lento e mais compacto */
@media (max-width: 620px){
  .un-marquee-track{
    animation-duration: 55s;
  }
  .un-marquee-content span{
    font-size: 14px;
  }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .un-marquee-track{
    animation: none;
  }
}








/* ======================================================= */
/* CSS PARA NOVA SEÇÃO DE OFERTA E MODAL (ADICIONAR)     */
/* ======================================================= */

/* 1. GRID DAS 3 OPÇÕES DE OFERTA */
.offer-grid-3-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1100px;
    margin: 3rem auto 0;
}

@media (min-width: 768px) {
    .offer-grid-3-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2. CARD DE OFERTA INDIVIDUAL */
.offer-card-v3 {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.offer-card-v3:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.offer-card-v3__header h3 {
    font-size: 1.5rem;
    color: #111827;
    margin-bottom: 0.5rem;
}

.offer-card-v3__header p {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.offer-card-v3__price {
    margin-bottom: 2rem;
    flex-grow: 1;
}

.offer-card-v3 .price-installments {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4b5563;
}

.offer-card-v3 .price-main {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: #111827;
    margin: 0 0.25rem;
}

.offer-card-v3 .price-cents {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4b5563;
}

.offer-card-v3 .price-subtext {
    margin-top: 0.5rem;
    color: #6b7280;
}

.offer-card-v3 .btn-cta {
    width: 100%;
}

/* 3. CARD DE DESTAQUE */
.offer-card-v3--highlight {
    border-color: #172B85;
    border-width: 2px;
    transform: scale(1.05);
}

.offer-card-v3__badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #172B85;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 700;
}

.text-gradient-gold {
    background: linear-gradient(90deg, #FFD700, #FBBF24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 4. MODAL DE CHECKOUT */
#checkout-modal {
    /* Herda de .modal-overlay, mas garantimos visibilidade */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#checkout-modal.active {
    opacity: 1;
    visibility: visible;
}

#checkout-modal .modal-container {
    /* Herda de .modal-container, mas podemos ajustar */
    max-width: 450px;
    width: 90%;
    background: #1a1a1a; /* Fundo escuro para contraste */
    padding: 2.5rem;
    border-radius: 16px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#checkout-modal.active .modal-container {
    transform: scale(1);
}

#checkout-modal .form-group {
    margin-bottom: 1rem;
}

#checkout-modal .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #ccc;
    font-size: 0.875rem;
}

#checkout-modal .input-dark {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #444;
    background-color: #2a2a2a;
    color: white;
    border-radius: 8px;
    font-size: 1rem;
}

#checkout-modal .input-dark.input-error {
    border-color: #ef4444;
}

#checkout-modal .error-message {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: none;
}

#checkout-modal .input-error + .error-message {
    display: block;
}

#checkout-modal .modal-submit-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    margin-top: 1rem;
}

:target {
  scroll-margin-top: 90px; /* ajuste para sua header */
}