/* ===================================
MOBILE PEQUENO
até 480px
=================================== */
@media (max-width: 480px) {

    /* RESET DE OVERFLOW */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
        margin: 0;
        padding: 0;
    }

    /* TOP BAR */
    .top-bar {
        flex-direction: column !important;
        height: auto !important;
        padding: 10px 15px !important;
        gap: 8px !important;
        width: 100% !important;
        left: 0 !important;
    }

    /* HERO - REGRA 100VH */
    .hero-gradient {
        height: 100vh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 130px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }

    /* Container Interno */
    .hero-gradient .max-w-6xl {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 20px !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }

    /* Conteúdo de Texto e Botões */
    .hero-gradient div.pb-24 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        z-index: 5 !important;
    }

    .hero-gradient h1 {
        font-size: 1.6rem !important;
        line-height: 1.1 !important;
        margin-bottom: 12px !important;
    }

    .hero-gradient h1 span.block.mt-6 {
        font-size: 1rem !important;
        margin-top: 8px !important;
    }

    .nova-turma-container {
        width: 125px !important;
        height: 38px !important;
        margin: 0 auto 15px auto !important;
    }

    .nova-turma-box span {
        font-size: 11px !important;
    }

    .flex.flex-col.items-start.gap-4 {
        align-items: center !important;
        width: 100% !important;
    }

    .btn-cta {
        width: 100% !important;
        max-width: 280px !important;
        padding: 14px 10px !important;
        font-size: 14px !important;
        margin: 0 auto !important;
    }

    .hero-gradient p.text-gray-500 {
        font-size: 11px !important;
        margin-top: 10px !important;
        margin-bottom: 5px !important;
    }

    /* IMAGEM DA DRA - ESCALADA E COLADA NA BASE */
    .hero-image-wrapper {
        height: 45vh !important;
        width: 100% !important;
        margin-top: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        position: relative !important;
        overflow: visible !important;
    }

    .hero-dra {
        height: 130% !important;
        width: auto !important;
        max-width: none !important;
        object-fit: contain !important;
        transform-origin: bottom center !important;
        position: relative !important;
        bottom: 0 !important;
        z-index: 1 !important;
    }

    /* PLAYER DE VÍDEO - ESTILO DA SUA FOTO */
    .video-overlay-card {
        display: block !important;
        /* Reativado */
        position: absolute !important;
        bottom: 20px !important;
        /* Ajuste para ficar sobre a Dra como na imagem */
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* Centraliza o player horizontalmente */
        width: 260px !important;
        /* Largura proporcional ao mobile */
        aspect-ratio: 16/9 !important;
        border: 3px solid white !important;
        /* Borda branca idêntica */
        border-radius: 8px !important;
        z-index: 50 !important;
        /* Fica acima da imagem da Dra */
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
    }

    .video-play-btn-small {
        width: 40px !important;
        height: 40px !important;
    }

    .dra-caption-name {
        right: 20px !important;
        bottom: 5px !important;
        z-index: 2 !important;
    }

    .dra-caption-name p {
        font-size: 9px !important;
    }

    /* ===================================
    SEÇÃO DE STATS (FAIXA DOURADA)
    =================================== */
    section.bg-\[\#B8966A\] {
        padding: 30px 0 !important;
        height: auto !important;
    }

    section.bg-\[\#B8966A\] .max-w-6xl {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    /* Transforma 4 colunas em um grid 2x2 */
    section.bg-\[\#B8966A\] div.w-1\/2.w-1\/4 {
        width: 50% !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding: 20px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Linha vertical central */
    section.bg-\[\#B8966A\] div.w-1\/2.w-1\/4:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* Remove a borda de baixo na última linha */
    section.bg-\[\#B8966A\] div.w-1\/2.w-1\/4:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    section.bg-\[\#B8966A\] p.text-2xl {
        font-size: 1.1rem !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 4px !important;
        white-space: nowrap !important;
        /* Evita quebra de palavras curtas */
    }

    section.bg-\[\#B8966A\] p.text-xs {
        font-size: 9px !important;
        opacity: 0.9 !important;
        letter-spacing: 1px !important;
    }

    /* ===================================
    SEÇÃO SOBRE A DRA. MARIA CLARA
    =================================== */
    .about-section {
        padding: 60px 20px !important;
        background-color: #FDFBF9 !important;
    }

    .about-section .max-w-6xl {
        display: flex !important;
        flex-direction: column !important;
        /* Foto em cima, texto embaixo */
        align-items: center !important;
        gap: 40px !important;
    }

    /* Ajuste da Moldura da Foto */
    .about-photo-wrapper {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .photo-frame {
        max-width: 280px !important;
        /* Tamanho confortável no mobile */
        padding: 10px !important;
        margin: 0 auto !important;
    }

    /* Conteúdo de Texto */
    .about-content {
        text-align: center !important;
        width: 100% !important;
    }

    .about-main-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    .about-subtitle {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }

    .about-description-box {
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    .about-text {
        font-size: 15px !important;
        margin-bottom: 12px !important;
        padding: 0 5px !important;
    }

    /* Lista de Checkmarks */
    .about-highlights {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Centraliza os itens na tela */
        text-align: center !important;
        /* Centraliza o texto de cada linha */
        margin: 0 auto !important;
        padding: 0 !important;
        list-style: none !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .about-highlights li {
        font-size: 14px !important;
        line-height: 1.4 !important;
        max-width: 90% !important;
        /* Evita que o texto toque as bordas */
        position: relative !important;
        display: block !important;
    }

    /* Ajuste para remover o bullet padrão ou ícone solto se houver */
    .about-highlights li::before {
        content: none !important;
    }

    /* ===================================
    SEÇÃO: PARA QUEM É ESTA CAPACITAÇÃO?
    =================================== */
    .py-24.px-6.bg-white {
        padding: 60px 20px !important;
    }

    /* Ajuste do Título para caber em uma linha */
    .py-24.px-6.bg-white h2.reveal-text {
        font-size: 1.6rem !important;
        /* Tamanho reduzido para evitar quebra */
        white-space: nowrap !important;
        /* Força a ficar em uma linha */
        margin-bottom: 15px !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Ajuste do Grid para uma coluna */
    .max-w-7xl.mx-auto.grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* Ajuste dos Cards Individuais */
    .card-shadow {
        width: 100% !important;
        max-width: 100% !important;
        padding: 30px 20px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .card-shadow h3 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    .card-shadow p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Centralização do botão CTA dessa seção */
    .mt-16.flex.justify-center {
        margin-top: 40px !important;
    }

    .mt-16.flex.justify-center a.btn-pulse {
        width: 100% !important;
        max-width: 300px !important;
        font-size: 13px !important;
        padding: 18px 10px !important;
    }

    /* ===================================
    SEÇÃO: CONTEÚDO PROGRAMÁTICO (MÓDULOS)
    =================================== */
    .program-section {
        padding-top: 80px !important;
        padding-bottom: 60px !important;
        margin-top: 60px !important;
    }

    /* Ajuste da Tab de Título */
    .title-tab {
        padding: 1.2rem !important;
        min-width: 90% !important;
        border-radius: 12px !important;
    }

    .title-tab h2 {
        font-size: 0.9rem !important;
    }

    /* Forçar Swiper a ocupar a largura total e centralizar cards */
    .modulesSwiper {
        width: 100% !important;
        padding-bottom: 40px !important;
        overflow: visible !important;
        /* Permite ver um pouco do próximo card se desejar */
    }

    .modulesSwiper .swiper-slide {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .module-card {
        width: 90% !important;
        /* Card ocupa quase toda a largura */
        margin: 0 auto !important;
        background: #4A4A4A !important;
    }

    .module-content {
        padding: 20px !important;
        height: auto !important;
        /* No mobile, deixamos o conteúdo ditar a altura */
        min-height: 220px !important;
    }

    .module-content h3 {
        font-size: 1.3rem !important;
        min-height: auto !important;
        -webkit-line-clamp: unset !important;
        /* Mostra o título todo no mobile */
    }

    /* Setas de Navegação - Melhor posicionamento no mobile */
    .modulesSwiper .swiper-button-next,
    .modulesSwiper .swiper-button-prev {
        display: none !important;
        /* Ocultamos setas no mobile para usar o deslize (touch) */
    }

    /* BOTÃO CTA CENTRALIZADO */
    .program-section .btn-pulse {
        width: 100% !important;
        max-width: 320px !important;
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 18px 10px !important;
    }

    /* ===================================
    SEÇÃO: DEPOIMENTOS (FORCE 1 SLIDE)
    =================================== */
    .mySwiper .swiper-wrapper {
        display: flex !important;
    }

    .mySwiper .swiper-slide {
        /* Força cada slide a ocupar a largura total da tela */
        width: 100% !important;
        flex-shrink: 0 !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0 10px !important;
    }

    .mySwiper .bg-white.p-8.rounded-2xl {
        width: 100% !important;
        max-width: 320px !important;
        /* Limita a largura do card para não esticar demais */
        padding: 25px 20px !important;
        margin: 0 auto !important;
        min-height: 420px !important;
        text-align: center !important;
    }

    /* Esconde as setas que poluem o mobile */
    .mySwiper .swiper-button-next,
    .mySwiper .swiper-button-prev {
        display: none !important;
    }

    /* Ajuste de fontes para caber no card unitário */
    .mySwiper h4 {
        font-size: 1.1rem !important;
    }

    .mySwiper p.text-gray-600 {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* ===================================
    SEÇÃO: OFERTA ESPECIAL (PREÇO)
    =================================== */
    section#oferta {
        padding: 60px 15px !important;
    }

    /* Container Escuro Principal */
    section#oferta div.bg-\[\#3D3D3D\] {
        padding: 40px 15px !important;
        border-radius: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Título da Oferta */
    section#oferta h3 {
        font-size: 1.2rem !important;
        text-align: center !important;
    }

    /* Card de Preço (Dourado) */
    .price-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 40px 20px !important;
        height: auto !important;
    }

    /* Ajuste dos Números (12x de 197) */
    .price-card p.text-6xl {
        font-size: 2.8rem !important;
        /* Reduzi um pouco para dar respiro */
        line-height: 1 !important;
    }

    .price-card p span.text-7xl {
        font-size: 3.8rem !important;
    }

    /* BOTÃO CTA - AJUSTE DE "APERTO" */
    .price-card button {
        width: 100% !important;
        min-height: 70px !important;
        /* Força uma altura maior para o texto respirar */
        padding: 15px 10px !important;
        /* Mais padding interno */
        font-size: 12px !important;
        /* Fonte ligeiramente menor para caber em 2 linhas se necessário */
        line-height: 1.4 !important;
        display: flex !important;
        flex-direction: column !important;
        /* Empilha o texto e a seta se necessário */
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border-radius: 10px !important;
    }

    .price-card button span.text-xl {
        display: inline-block !important;
        margin-top: 5px !important;
    }

    /* ===================================
    BTN CTA DE PREÇO 
    =================================== */
    /* Usando seletores baseados na estrutura HTML para máxima especificidade */
    section#oferta .price-card button {
        display: flex !important;
        flex-direction: column !important;
        /* Texto centralizado em coluna se quebrar */
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 280px !important;
        /* Limita a largura para não esticar */
        margin: 15px auto !important;
        /* Centraliza o botão na price-card */

        /* Aumento radical do padding para o texto respirar */
        padding: 20px 10px !important;

        /* Ajuste de Fonte e Espaçamento */
        font-size: 13px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        font-weight: bold !important;
        letter-spacing: 0.5px !important;

        background-color: #3D3D3D !important;
        /* Força a cor escura */
        color: white !important;
        border-radius: 8px !important;
    }

    /* MATA A SETA - ABORDAGEM AGRESSIVA */
    /* Direciona especificamente o span que contém a seta */
    section#oferta .price-card button span.text-xl,
    section#oferta .price-card button span {
        display: none !important;
        /* Remove a seta completamente */
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ===================================
    FOOTER - PADRÃO MOBILE
    =================================== */
    footer.bg-\[\#3D3D3D\] {
        padding-top: 50px !important;
        padding-bottom: 30px !important;
        text-align: center !important;
    }

    footer .max-w-6xl.grid {
        display: flex !important;
        flex-direction: column !important;
        /* Empilha as 3 colunas */
        gap: 40px !important;
        align-items: center !important;
    }

    footer h3 {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }

    footer p,
    footer ul,
    footer li {
        text-align: center !important;
        max-width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Links de Políticas e Copyright */
    footer .mt-12.pt-8 {
        margin-top: 40px !important;
        padding-top: 30px !important;
    }

    footer .flex.flex-wrap.justify-center {
        flex-direction: column !important;
        /* Links um embaixo do outro */
        gap: 15px !important;
        margin-bottom: 30px !important;
    }

    footer .text-center.mt-3 {
        font-size: 11px !important;
        line-height: 1.6 !important;
        padding: 0 15px !important;
    }
}

/* ===================================
   MOBILE GRANDE / TABLET PEQUENO
   de 481px até 640px (AJUSTE DE POSIÇÃO)
   =================================== */
@media (min-width: 481px) and (max-width: 640px) {

    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .hero-gradient {
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 60px !important;
        /* Reduzi o topo para dar mais espaço */
        overflow: hidden !important;
    }

    .hero-gradient .max-w-6xl {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        z-index: 30 !important;
    }

    .hero-gradient h1 {
        font-size: 2.2rem !important;
        margin-bottom: 15px !important;
    }

    .nova-turma-container {
        width: 150px !important;
        height: 45px !important;
        margin: 0 auto 10px auto !important;
    }

    .flex.flex-col.items-start.gap-4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    .btn-cta {
        width: 100% !important;
        max-width: 360px !important;
        padding: 18px !important;
        font-size: 15px !important;
        margin-bottom: 5px !important;
    }

    .hero-gradient p.text-gray-500 {
        font-size: 13px !important;
        margin: 5px 0 0 0 !important;
        text-align: center !important;
    }

    /* AQUI ESTÁ O AJUSTE PARA SUBIR A FOTO */
    .hero-image-wrapper {
        height: 45vh !important;
        /* Comprime o container para eliminar o espaço */
        width: 100% !important;
        /* Valor máximo para eliminar o buraco branco */
        margin-top: -145px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        position: relative !important;
        overflow: visible !important;
    }

    .hero-dra {
        height: 125% !important;
        /* Aumenta a escala para preencher o espaço subindo */
        width: auto !important;
        object-fit: contain !important;
        transform-origin: bottom center !important;
        z-index: 1 !important;
    }

    .video-overlay-card {
        display: block !important;
        position: absolute !important;
        bottom: 45px !important;
        /* Ajustado para acompanhar a nova altura */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 250px !important;
        aspect-ratio: 16/9 !important;
        border: 4px solid white !important;
        border-radius: 12px !important;
        z-index: 50 !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
    }

    .dra-caption-name {
        position: absolute !important;
        right: 10px !important;
        bottom: 15px !important;
        z-index: 10 !important;
        display: block !important;
    }

    .dra-caption-name p {
        font-size: 10px !important;
        color: #3D3D3D !important;
        margin: 0 !important;
        text-align: right !important;
    }

    /* ===================================
       FAIXA DE BENEFÍCIOS (640px) - GRADE EM CRUZ
       =================================== */

    /* 1. Ajuste do fundo e remoção de paddings que esmagam o conteúdo */
    section.bg-\[\#B8966A\].py-8 {
        padding: 60px 0 !important;
        width: 100% !important;
    }

    /* 2. Forçar o Grid 2x2 ignorando o flex-wrap do HTML */
    section.bg-\[\#B8966A\].py-8 .max-w-6xl {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* Duas colunas iguais */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        /* Gap zero para as linhas da cruz se tocarem */
    }

    /* 3. Reset de cada item (Anulando w-1/2 e bordas do Tailwind) */
    section.bg-\[\#B8966A\].py-8 .max-w-6xl>div {
        width: 100% !important;
        max-width: 100% !important;
        /* Reseta todas as bordas laterais do desktop */
        border: none !important;
        padding: 40px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* 4. CONSTRUÇÃO DA CRUZ (Linhas finas e elegantes) */

    /* Linha Vertical: Adiciona borda direita no 1º e 3º item */
    section.bg-\[\#B8966A\].py-8 .max-w-6xl>div:nth-child(1),
    section.bg-\[\#B8966A\].py-8 .max-w-6xl>div:nth-child(3) {
        border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* Linha Horizontal: Adiciona borda inferior no 1º e 2º item */
    section.bg-\[\#B8966A\].py-8 .max-w-6xl>div:nth-child(1),
    section.bg-\[\#B8966A\].py-8 .max-w-6xl>div:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* 5. Ajuste de Tipografia para não encavalar */
    section.bg-\[\#B8966A\].py-8 p.text-2xl {
        font-size: 1.15rem !important;
        /* Tamanho ideal para 640px */
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    section.bg-\[\#B8966A\].py-8 p.text-xs {
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
        opacity: 0.9 !important;
    }

    /* ===================================
       SEÇÃO SOBRE (640px)
       =================================== */
    .about-section {
        padding: 60px 20px !important;
    }

    .about-section .max-w-6xl {
        display: flex !important;
        flex-direction: column !important;
        /* Empilha foto e texto */
        align-items: center !important;
        gap: 40px !important;
    }

    /* Ajuste da Foto */
    .about-photo-wrapper {
        width: 100% !important;
        justify-content: center !important;
        /* Centraliza a foto */
        margin-bottom: 20px !important;
    }

    .photo-frame {
        max-width: 320px !important;
        /* Tamanho controlado para tablet/mobile */
    }

    /* Ajuste do Conteúdo de Texto */
    .about-content {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .about-main-title {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    .about-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 25px !important;
    }

    .about-description-box {
        text-align: center !important;
        width: 100% !important;
        max-width: 500px !important;
    }

    .about-text {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    /* CENTRALIZAÇÃO DA LISTA SEM QUEBRAS ESTÚPIDAS */
    .about-highlights {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 30px 0 0 0 !important;
        padding: 0 !important;
    }

    .about-highlights li {
        display: flex !important;
        align-items: center !important;
        /* Check alinhado ao meio da linha */
        gap: 12px !important;
        text-align: left !important;

        /* Largura automática para não esmagar o texto */
        width: fit-content !important;
        max-width: 95% !important;

        margin-bottom: 12px !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        /* Força o texto a ficar em uma linha só */
    }

    /* Ajuste para o check não sumir */
    .about-highlights li::before {
        flex-shrink: 0 !important;
    }

    /* ===================================
       PARA QUEM É (640px) - UM EMBAIXO DO OUTRO
       =================================== */

    /* 1. Forçar o container a virar uma coluna única */
    .max-w-7xl.mx-auto.grid.grid-cols-4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        /* Espaço entre um card e outro */
        padding: 0 20px !important;
    }

    /* 2. Ajuste dos Cards Individuais */
    .max-w-7xl.mx-auto.grid.grid-cols-4>div {
        width: 100% !important;
        max-width: 450px !important;
        /* Limita a largura para não ficar gigante em tablets */
        min-height: auto !important;
        padding: 30px !important;
        text-align: center !important;
        /* Centraliza o conteúdo interno */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 3. Tipografia nos cards */
    .max-w-7xl.mx-auto.grid.grid-cols-4 h3 {
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
    }

    .max-w-7xl.mx-auto.grid.grid-cols-4 p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        max-width: 90% !important;
    }

    /* 4. Ajuste do título da seção */
    .reveal-text.text-3xl.text-4xl {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        padding: 0 15px !important;
    }

    /* ===================================
       MÓDULOS SWIPER (640px) - UM POR VEZ
       =================================== */
    .modulesSwiper {
        width: 100% !important;
        padding: 0 20px 50px 20px !important;
        overflow: visible !important;
        /* Permite ver a sombra do card */
    }

    /* Força cada slide a ocupar a largura total do container */
    .modulesSwiper .swiper-slide {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Ajuste do Card Interno */
    .modulesSwiper .module-card {
        width: 100% !important;
        max-width: 400px !important;
        /* Card imponente no centro */
        margin: 0 auto !important;
        height: auto !important;
    }

    /* Títulos sem cortes (...) */
    .modulesSwiper h3 {
        font-size: 1.6rem !important;
        white-space: normal !important;
        /* Remove o corte do título */
        line-height: 1.2 !important;
        min-height: auto !important;
    }

    .modulesSwiper p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    /* Setas de navegação maiores para facilitar o toque */
    .modulesSwiper .swiper-button-next,
    .modulesSwiper .swiper-button-prev {
        display: flex !important;
        top: 40% !important;
        width: 45px !important;
        height: 45px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 50% !important;
    }

    .modulesSwiper .swiper-button-next::after,
    .modulesSwiper .swiper-button-prev::after {
        font-size: 18px !important;
        color: #fff !important;
    }

    /* Paginação (as bolinhas embaixo) */
    .modulesSwiper .swiper-pagination {
        bottom: 10px !important;
    }

    /* ===================================
       MÓDULOS SWIPER (640px) - REMOVER SETAS
       =================================== */

    /* 1. Esconde as setas completamente */
    .modulesSwiper .swiper-button-next,
    .modulesSwiper .swiper-button-prev {
        display: none !important;
    }

    /* 2. Ajusta o container para ocupar a largura total novamente */
    .modulesSwiper {
        width: 100% !important;
        padding: 0 20px 50px 20px !important;
        /* Padding normal sem corredor de setas */
        margin: 0 auto !important;
    }

    /* 3. Garante que o card fique imponente no centro */
    .modulesSwiper .module-card {
        width: 100% !important;
        max-width: 400px !important;
        /* Aumentei de novo já que não tem setas */
        margin: 0 auto !important;
    }

    /* 4. Mantém os bullets visíveis para o usuário saber que tem mais slides */
    .modulesSwiper .swiper-pagination {
        bottom: 10px !important;
        display: block !important;
    }

    /* ===================================
       DEPOIMENTOS (640px) - UM POR VEZ E SEM SETAS
       =================================== */

    /* 1. Esconde as setas de navegação */
    .mySwiper .swiper-button-next,
    .mySwiper .swiper-button-prev {
        display: none !important;
    }

    /* 2. Ajuste do container para centralizar o card único */
    .mySwiper {
        width: 100% !important;
        padding: 0 20px 50px 20px !important;
    }

    /* 3. Força um slide por vez ocupando a largura total */
    .mySwiper .swiper-slide {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        height: auto !important;
    }

    /* 4. Ajuste do Card de Depoimento */
    .mySwiper .bg-white.p-8.rounded-2xl {
        width: 100% !important;
        max-width: 380px !important;
        /* Card imponente no centro */
        margin: 0 auto !important;
        min-height: 400px !important;
        /* Garante altura consistente */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* 5. Ajuste do Título da Seção (evitar quebra feia) */
    .reveal-title {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
    }

    /* 6. Bolinhas de Paginação (Bullets) */
    .mySwiper .swiper-pagination {
        bottom: 10px !important;
        display: block !important;
    }

    .mySwiper .swiper-pagination-bullet-active {
        background: #B8966A !important;
    }

    /* ===================================
       FOOTER (640px) - COLUNA ÚNICA
       =================================== */

    /* 1. Ajuste do Container Principal */
    footer.bg-\[\#3D3D3D\] {
        padding: 50px 20px 30px 20px !important;
        text-align: center !important;
    }

    /* 2. Transformar o Grid de 3 colunas em Flex Coluna */
    footer .max-w-6xl.grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
        /* Espaço entre os blocos */
    }

    /* 3. Ajuste das Colunas Individuais */
    footer .max-w-6xl>div {
        width: 100% !important;
        max-width: 400px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    footer h3 {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }

    footer p,
    footer ul {
        text-align: center !important;
        line-height: 1.6 !important;
    }

    footer ul.space-y-2 li {
        margin-bottom: 10px !important;
        /* Mais espaço para o clique */
    }

    /* 4. Links Legais (Política, Termos, etc) */
    footer .flex.flex-wrap.justify-center.gap-6 {
        flex-direction: column !important;
        /* Um embaixo do outro ou 2 a 2 */
        gap: 15px !important;
        margin-top: 40px !important;
    }

    /* 5. Texto de Copyright e Disclaimer */
    footer .max-w-6xl.mt-12.pt-8 {
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-top: 30px !important;
        margin-top: 40px !important;
    }

    footer p.text-center.mt-3 {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }

    /* RESET E CENTRALIZAÇÃO TOTAL DOS LINKS LEGAIS */
    footer .mt-12.pt-8 div.flex.flex-wrap.justify-center.gap-6 {
        display: flex !important;
        flex-direction: column !important;
        /* Força um embaixo do outro */
        align-items: center !important;
        /* Centraliza no meio da tela */
        justify-content: center !important;
        width: 100% !important;
        gap: 15px !important;
        margin: 0 auto 20px auto !important;
    }

    /* Garante que cada link individual não tenha margens laterais sobrando */
    footer .mt-12.pt-8 div.flex.flex-wrap.justify-center.gap-6 a {
        width: auto !important;
        display: inline-block !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 5px 0 !important;
    }

    /* Centraliza o texto de copyright que vem logo abaixo */
    footer p.text-center.text-gray-500 {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-top: 20px !important;
    }



}

/* ===================================
   TABLET (768px) - HERO SECTION
   =================================== */
@media (min-width: 641px) and (max-width: 768px) {

    .hero-gradient {
        height: 100vh !important;
        padding-top: 100px !important;
        padding-bottom: 0 !important;
        /* MATA O ESPAÇO NO CHÃO */
        display: flex !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    /* Grid de Duas Colunas */
    .hero-gradient .max-w-6xl {
        display: grid !important;
        grid-template-columns: 1.2fr 0.8fr !important;
        gap: 20px !important;
        align-items: center !important;
        text-align: left !important;
    }

    /* Ajuste de Textos */
    .hero-gradient h1 {
        font-size: 2.8rem !important;
        line-height: 1.1 !important;
    }

    .hero-gradient h1 span.text-2xl {
        font-size: 1.5rem !important;
    }

    /* FAXINA TOTAL NO BADGE (768px) */
    .nova-turma-container {
        display: flex !important;
        justify-content: flex-start !important;
        margin: 0 0 25px 0 !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        width: fit-content !important;
        overflow: hidden !important;
        /* MATA O EFEITO QUE ESTÁ GIRANDO FORA */
    }

    .nova-turma-box {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #ffffff !important;
        /* BRANCO PURO */
        padding: 8px 20px !important;
        border-radius: 6px !important;
        width: fit-content !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        overflow: hidden !important;
        /* GARANTE QUE NADA SAI DO BOTÃO */
    }

    /* MATA QUALQUER ANIMAÇÃO OU GRADIENTE GIRATÓRIO (PSEUDO-ELEMENTOS) */
    .nova-turma-box::before,
    .nova-turma-box::after {
        display: none !important;
        content: none !important;
        animation: none !important;
    }

    .nova-turma-box span {
        color: #000000 !important;
        /* FONTE PRETA PORRA */
        font-size: 13px !important;
        font-weight: 800 !important;
        /* MAIS NEGRITO */
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;
        position: relative !important;
        z-index: 10 !important;
        line-height: 1 !important;
    }

    /* BOTÃO CTA */
    .btn-cta {
        width: fit-content !important;
        min-width: 280px !important;
        white-space: nowrap !important;
        /* SEM QUEBRA */
        padding: 16px 32px !important;
        font-size: 15px !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* TEXTO DE APOIO VAGAS LIMITADAS */
    .hero-gradient p.text-gray-500.text-sm {
        text-align: left !important;
        width: 100% !important;
        white-space: nowrap !important;
        /* SEM QUEBRA */
        margin-left: 5px !important;
        font-size: 0.85rem !important;
        opacity: 0.8 !important;
        display: block !important;
    }

    /* CONTAINER DOS BOTÕES */
    .hero-gradient .flex.flex-col.items-start.gap-4 {
        align-items: flex-start !important;
        width: 100% !important;
    }

    /* POSICIONAMENTO DA DRA (768px) */
    .hero-image-wrapper {
        height: 100% !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        /* Traz o wrapper para o centro */
        position: relative !important;
        width: 100% !important;
    }

    .hero-dra {
        height: 92vh !important;
        width: auto !important;
        object-fit: contain !important;
        object-position: bottom !important;
        /* AJUSTE: Valor negativo traz ela mais para a esquerda/centro */
        transform: translateX(-5%) !important;
    }

    /* PLAYER DE VÍDEO (768px) - FORÇANDO MOVIMENTO PARA DIREITA */
    .video-overlay-card {
        display: block !important;
        position: absolute !important;

        /* 1. Resetamos o left para garantir que o right funcione */
        left: auto !important;

        /* 2. Diminuímos o right. Quanto menor o número, mais para a DIREITA ele vai */
        right: 50% !important;

        bottom: 160px !important;
        /* Subi um pouco para não cobrir as mãos */
        width: 300px !important;
        z-index: 100 !important;
        border: 4px solid white !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    }

    /* NOME DA DRA */
    .dra-caption-name {
        right: 15% !important;
        /* Afasta da borda da tela */
        bottom: 30px !important;
    }

    section.bg-\[\#B8966A\].py-8 .max-w-6xl {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* FORÇA 2 COLUNAS */
        gap: 0 !important;
        padding: 40px 0 !important;
        flex-wrap: nowrap !important; /* Mata o flex-wrap do tailwind */
        flex-direction: row !important;
    }

    /* Cada item da faixa */
    section.bg-\[\#B8966A\].py-8 .max-w-6xl > div {
        width: 100% !important;
        border-left: none !important; /* Reseta bordas do desktop */
        padding: 30px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* LINHA VERTICAL DA CRUZ */
    section.bg-\[\#B8966A\].py-8 .max-w-6xl > div:nth-child(1),
    section.bg-\[\#B8966A\].py-8 .max-w-6xl > div:nth-child(3) {
        border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    /* LINHA HORIZONTAL DA CRUZ */
    section.bg-\[\#B8966A\].py-8 .max-w-6xl > div:nth-child(1),
    section.bg-\[\#B8966A\].py-8 .max-w-6xl > div:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    /* ===================================
       QUEM É (768px) - CENTRALIZADO
       =================================== */
    
    /* 1. Container Principal em Coluna */
    .max-w-6xl.mx-auto.flex.flex-col.md\:flex-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 60px 20px !important;
        gap: 40px !important;
    }

    /* 2. Ajuste da Moldura da Imagem */
    .relative.inline-block.group {
        width: 100% !important;
        max-width: 400px !important; /* Tamanho imponente no tablet */
        margin: 0 auto !important;
    }

    .relative.inline-block.group img {
        width: 100% !important;
        height: auto !important;
    }

    /* 3. Bloco de Texto */
    .md\:w-1\/2.space-y-6 {
        width: 100% !important;
        max-width: 600px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centraliza o conteúdo interno */
    }

    /* 4. Títulos e Subtítulos */
    .reveal-text.text-4xl.text-5xl {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }

    .text-gray-500.text-lg.font-medium {
        font-size: 1.1rem !important;
        margin-bottom: 20px !important;
    }

    /* 5. Centralização dos Parágrafos e Lista */
    .md\:w-1\/2.space-y-6 p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .space-y-3.pt-4 {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centraliza os itens com check */
        text-align: center !important;
    }

    .space-y-3.pt-4 div {
        justify-content: center !important; /* Centraliza o Check + Texto */
        width: 100% !important;
        max-width: 500px !important;
    }

    /* Ajuste da margem do avatar se houver */
    .user-avatar-wrapper {
        margin-top: 11px !important;
    }

  /* ===================================
       SEÇÃO: PARA QUEM É ESTA CAPACITAÇÃO
       =================================== */
    
    /* Força o Grid 2x2 nos cards brancos */
    section.py-24.bg-white .max-w-7xl.grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* FORÇA 2 COLUNAS */
        gap: 20px !important;
        padding: 0 20px !important;
    }

    /* Ajuste dos cards para não ficarem gigantes */
    section.py-24.bg-white .card-shadow {
        height: 100% !important;
        min-height: 250px !important;
        padding: 30px 20px !important;
    }

    /* Centraliza o botão de inscrição abaixo dos cards */
    section.py-24.bg-white .mt-16.flex.justify-center {
        margin-top: 40px !important;
    }

    section.py-24.bg-white .btn-pulse {
        width: fit-content !important;
        min-width: 300px !important;
        text-align: center !important;
    }

    /* ===================================
       CONTEÚDO PROGRAMÁTICO (768px) - CORRIGIDO
       =================================== */
    
    /* 1. MANTÉM A NAVEGAÇÃO POR TOUCH ATIVA */
    .program-section .modulesSwiper {
        width: 100% !important;
        max-width: 480px !important; /* Tamanho bom para tablet */
        margin: 0 auto !important;
        overflow: hidden !important; /* Permite o deslize interno */
        cursor: grab !important;
    }

    .program-section .swiper-wrapper {
        display: flex !important; /* Deixa os slides lado a lado para o JS mover */
    }

    .program-section .swiper-slide {
        width: 100% !important; /* Um módulo por vez na tela */
        flex-shrink: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* 2. MATA SÓ AS SETAS (AS DESGRAÇADAS QUE VOCÊ NÃO QUER) */
    .program-section .swiper-button-next,
    .program-section .swiper-button-prev {
        display: none !important;
    }

    /* 3. MANTÉM AS BOLINHAS (PAGINAÇÃO) SE VOCÊ QUISER, OU TIRA TAMBÉM: */
    .program-section .swiper-pagination {
        bottom: 0px !important;
        display: block !important; /* Deixa as bolinhas para o usuário saber que tem mais */
    }

    /* 4. AJUSTE DO CARD PARA CENTRALIZAR */
    .program-section .module-card {
        width: 100% !important;
        max-width: 400px !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* ===================================
       DEPOIMENTOS (768px) - CARD ÚNICO E SEM SETAS
       =================================== */
    
    /* 1. Container Principal do Swiper de Depoimentos */
    .mySwiper {
        width: 100% !important;
        max-width: 450px !important; /* Limita largura do card de depoimento */
        margin: 0 auto !important;
        overflow: hidden !important;
        cursor: grab !important;
    }

    /* 2. Garante um card por vez */
    .mySwiper .swiper-wrapper {
        display: flex !important;
    }

    .mySwiper .swiper-slide {
        width: 100% !important;
        height: auto !important;
        flex-shrink: 0 !important;
        display: flex !important;
        justify-content: center !important;
        padding: 10px !important; /* Respiro para a sombra não cortar */
    }

    /* 3. Ajuste do Card Interno */
    .mySwiper .bg-white.p-8.rounded-2xl {
        width: 100% !important;
        min-height: 420px !important; /* Mantém uma altura mínima consistente */
        text-align: center !important;
    }

    /* 4. MATA AS SETAS DE DEPOIMENTOS */
    .mySwiper .swiper-button-next,
    .mySwiper .swiper-button-prev {
        display: none !important;
    }

    /* 5. MANTÉM AS BOLINHAS (PAGINAÇÃO) */
    .mySwiper .swiper-pagination {
        position: relative !important;
        margin-top: 30px !important;
        display: block !important;
    }
}

/* ===================================
NOTEBOOK / TABLET GRANDE
até 1024px
=================================== */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Move a foto para a direita para não tampar o botão */
    .hero-dra {
        transform: translateX(15%) !important; /* Empurra ela para a direita */
        height: 95vh !important; /* Mantém a imponência */
        object-position: bottom right !important;
    }

    /* Ajusta o vídeo para acompanhar o movimento e não ficar isolado */
    .video-overlay-card {
        right: 5% !important; /* Cola o vídeo mais perto da borda direita */
        bottom: 180px !important;
    }

    /* Ajusta o nome da Dra para acompanhar a foto */
    .dra-caption-name {
        right: 5% !important;
        bottom: 40px !important;
    }

    /* Garante que o container de texto não se espalhe demais */
    .hero-gradient .max-w-6xl {
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 0 !important;
    }

    /* AJUSTE DO BOTÃO CTA (1024px) */
    .btn-cta {
        width: fit-content !important; /* Deixa o botão crescer conforme o texto */
        white-space: nowrap !important; /* PROÍBE A QUEBRA DE LINHA */
        padding: 18px 35px !important; /* Espaçamento interno para ficar elegante */
        font-size: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 1. Traz a Dra mais para dentro da tela */
    .hero-dra {
        transform: translateX(10%) !important; /* Estava 30%, agora 10% volta ela para dentro */
        height: 95vh !important;
        object-position: bottom !important;
    }

    /* 2. Joga o Player de Vídeo no limite da direita */
    .video-overlay-card {
        left: auto !important; /* Garante que o left não trave o movimento */
        right: 30% !important;  /* Cola ele na borda direita */
        bottom: 160px !important;
        width: 400px !important; /* Levemente menor para não bater no botão */
        z-index: 50 !important;
    }

    /* 3. Ajuste do Botão (Uma linha só) */
    .btn-cta {
        white-space: nowrap !important;
        width: fit-content !important;
        padding: 18px 30px !important;
    }

    /* 4. Nome da Dra acompanha o corpo */
    .dra-caption-name {
        right: 8% !important;
        bottom: 40px !important;
    }
}

/* ===================================
DESKTOP MÉDIO
até 1280px
=================================== */
@media (max-width: 1280px) {}