/* ==========================================
   RESPONSIVIDADE - DESKTOP (max-width: 992px)
   ========================================== */

@media (max-width: 992px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .profile-oval {
        width: 140px;
        height: 280px;
    }

    .pricing-card.featured {
        transform: scale(1) !important;
        margin: 20px 0 !important;
    }

    .pricing-price-container .pricing-price {
        font-size: 3rem !important;
    }

    .feature-card,
    .counter-box,
    .pricing-card {
        margin-bottom: 20px;
    }
}

/* ==========================================
   RESPONSIVIDADE - TABLET (max-width: 768px)
   ========================================== */

@media (max-width: 768px) {

    /* ===== VARIÁVEIS RESPONSIVAS ===== */
    :root {
        --radius-lg: 16px;
        --radius-xl: 20px;
    }

    /* ===== HERO SECTION ===== */
    .hero-title {
        font-size: 2.8rem;
    }

    .hero-section {
        padding: 80px 0 60px;
    }

    /* ===== SEÇÕES GERAIS ===== */
    .features-section,
    .numbers-section {
        padding: 60px 0;
    }

    /* ===== PROFILE OVALS ===== */
    .profile-oval {
        width: 110px;
        height: 220px;
    }

    /* ===== COUNTER BOXES ===== */
    .counter-box {
        min-height: 180px;
        padding: 25px 20px;
    }

    .counter-value {
        font-size: 2rem;
    }

    /* ===== PRICING CARDS ===== */
    .pricing-card {
        padding: 40px 25px !important;
    }

    .pricing-price-container .pricing-price {
        font-size: 2.8rem !important;
    }

    /* ===== BOTÕES ===== */
    .btn {
        padding: 12px 24px;
        font-size: 0.95rem;
    }

    /* ===== CONTEÚDO DE LIÇÃO ===== */
    .lesson-content-text {
        text-align: left;
        padding: 0 15px;
    }

    .lesson-content-text h1 {
        font-size: 1.6rem;
        margin-top: 35px;
        margin-bottom: 20px;
    }

    .lesson-content-text h2 {
        font-size: 1.4rem;
        margin-top: 30px;
        margin-bottom: 18px;
    }

    .lesson-content-text h3 {
        font-size: 1.2rem;
        margin-top: 25px;
        margin-bottom: 15px;
    }

    .lesson-content-text p {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 18px;
    }

    /* ===== LISTAS ===== */
    .lesson-content-text ul,
    .lesson-content-text ol {
        padding-left: 25px;
        margin: 20px 0;
    }

    .lesson-content-text ul li,
    .lesson-content-text ol li {
        font-size: 0.95rem;
        margin-bottom: 10px;
        line-height: 1.6;
    }

    /* ===== BLOCOS DE CÓDIGO - MOBILE ===== */
    .copy-code-btn {
        display: none !important;
    }

    .lesson-content-text pre {
        padding: 20px 15px;
        font-size: 0.82rem;
        overflow-x: auto;
        border-radius: 8px;
        margin: 25px 0;
    }

    .lesson-content-text pre code {
        font-size: 0.82rem;
        line-height: 1.5;
    }

    .lesson-content-text code {
        font-size: 0.85em;
        padding: 2px 6px;
    }

    .code-block-wrapper {
        margin: 25px 0;
    }

    /* ===== NAVBAR MOBILE ===== */
    .navbar .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .navbar-collapse {
        margin-top: 15px;
        padding: 15px 0;
    }

    .navbar-nav {
        gap: 8px !important;
    }

    .navbar-nav .nav-item {
        padding: 8px 0;
    }

    /* ===== CONTAINERS ===== */
    .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .hero-section .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    /* ===== HERO - CENTRALIZAÇÃO ===== */
    .hero-section .col-lg-6:first-child {
        text-align: center !important;
    }

    .hero-section .divider-yellow {
        margin: 0 auto;
    }

    .hero-section .hero-subtitle,
    .hero-section .hero-title {
        text-align: center !important;
    }

    /* ===== BOTÕES DO HERO ===== */
    .hero-section .d-flex {
        justify-content: center !important;
        gap: 15px !important;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .hero-section .col-lg-6:last-child {
        margin-top: 30px;
    }

    /* ===== SEÇÕES ===== */
    section.py-5 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    section.my-5 {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }

    /* ===== CARDS ===== */
    .course-card {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 25px;
    }

    .feature-card {
        margin-left: 0;
        margin-right: 0;
        padding: 30px 20px;
    }

    .pricing-card {
        margin-left: 0;
        margin-right: 0;
        padding: 35px 20px !important;
    }

    .counter-box {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 15px;
    }

    /* ===== FOOTER MOBILE ===== */
    footer .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    footer .row>div {
        text-align: center !important;
    }

    footer .d-flex {
        justify-content: center !important;
    }

    footer p {
        justify-content: center !important;
    }

    .newsletter-wrapper {
        max-width: 100%;
        margin: 0 auto;
    }

    .newsletter-form .input-group {
        flex-direction: column;
        border-radius: 12px;
        gap: 10px;
    }

    .newsletter-input {
        border-radius: 12px !important;
        width: 100% !important;
        margin-bottom: 0;
        border: 1px solid #F5F5F5 !important;
    }

    .newsletter-btn {
        border-radius: 12px !important;
        width: 100% !important;
    }

    footer .divider-yellow {
        margin: 0 auto 1rem;
    }

    footer+div .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    footer+div .row>div {
        text-align: center !important;
    }

    footer+div .col-md-6 {
        margin-bottom: 15px;
    }

    footer+div .d-flex {
        justify-content: center !important;
    }

    /* ===== CORREÇÕES TABLET - SEÇÕES TECNOLOGIAS E DEPOIMENTOS ===== */
    section.py-5.my-5 .col-lg-6,
    #testimonials .col-lg-6 {
        text-align: left !important;
    }

    section.py-5.my-5 .divider-yellow,
    #testimonials .divider-yellow {
        margin: 0 0 15px 0 !important;
    }
}

/* ==========================================
   RESPONSIVIDADE - MOBILE (max-width: 576px)
   ========================================== */

@media (max-width: 576px) {

    /* ===== CONTAINERS ===== */
    .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .navbar .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    /* ===== HERO ===== */
    .hero-section .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .hero-title {
        font-size: 2rem;
    }

    /* REDUZ ESPAÇAMENTO ENTRE HERO E SEÇÃO TECNOLOGIAS */
    .hero-section {
        margin-bottom: -30px !important;
        padding-bottom: 10px !important;
    }

    /* Puxa a primeira seção py-5 my-5 para cima */
    section.py-5.my-5:first-of-type {
        margin-top: -30px !important;
        padding-top: 20px !important;
    }

    /* ===== BOTÕES ===== */
    .d-flex.gap-3.flex-wrap {
        flex-direction: column;
        gap: 15px !important;
        align-items: center;
    }

    .d-flex.gap-3.flex-wrap .btn {
        width: auto !important;
        padding: 12px 32px;
        display: inline-flex;
        white-space: nowrap;
    }

    section .btn,
    .card .btn,
    .feature-card .btn,
    .pricing-card .btn,
    .testimonial-card+* .btn {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: fit-content !important;
    }

    div:has(> .btn) {
        display: flex;
        justify-content: center;
    }

    .btn {
        padding: 12px 32px;
        width: auto !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .card .btn,
    .feature-card .btn,
    .pricing-card .btn {
        margin: 0 auto;
        display: flex;
    }

    /* ===== 🔧 CORREÇÃO DOS CARDS DE CURSOS ===== */
    .course-card {
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 20px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Imagem do card */
    .course-card img,
    .course-card-image,
    .course-card>img:first-child {
        width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: cover;
        border-radius: 16px 16px 0 0;
    }

    /* Conteúdo do card */
    .course-card>div,
    .course-card-content,
    .course-card .card-body {
        padding: 18px;
        display: flex;
        flex-direction: column;
    }

    /* Badge de nível */
    .course-card .badge,
    .course-badge {
        display: inline-block;
        width: fit-content;
        margin-bottom: 8px;
    }

    /* Título e descrição */
    .course-card h3,
    .course-title {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .course-card p,
    .course-description {
        font-size: 0.85rem;
        margin-bottom: 16px;
        flex-grow: 1;
    }

    /* 🎯 BOTÃO DO CARD - CORREÇÃO PRINCIPAL */
    .course-card .btn,
    .course-card button,
    .course-card a.btn {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 20px !important;
        margin: 0 !important;
        border-radius: 50px !important;
        font-size: 0.85rem !important;
        text-align: center;
        display: block !important;
    }

    /* Remove qualquer pseudo-elemento estranho */
    .course-card .btn::before,
    .course-card .btn::after,
    .course-card button::before,
    .course-card button::after {
        display: none !important;
        content: none !important;
    }

    /* Remove profile-oval dos cards */
    .course-card .profile-oval,
    .course-card [class*="oval"] {
        display: none !important;
    }

    /* ===== 🎯 PRICING CARDS - MOBILE ===== */
    #pricing {
        overflow: hidden !important;
    }

    .pricing-card {
        position: relative !important;
        text-align: center !important;
        padding: 30px 20px !important;
        margin: 0 auto 20px !important;
        max-width: 380px !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: none !important;
        scale: 1 !important;
    }

    /* Remove destaque do card Featured */
    .pricing-card.featured {
        transform: none !important;
        scale: 1 !important;
        margin: 0 auto 20px !important;
    }

    .pricing-card>* {
        max-width: 100%;
    }

    .pricing-card::before,
    .pricing-card::after {
        display: none !important;
    }

    .pricing-card * {
        position: relative !important;
    }

    .pricing-card h3,
    .pricing-card h4 {
        text-align: center !important;
        margin-bottom: 15px;
    }

    .pricing-card p {
        text-align: center !important;
        margin-bottom: 20px;
    }

    .pricing-price-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        margin: 20px 0 !important;
    }

    .pricing-card .btn {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: 200px !important;
        margin: 20px auto 0 !important;
        padding: 12px 32px !important;
        display: block !important;
        border-radius: 50px !important;
    }

    /* Remove ovals dos pricing cards */
    .pricing-card .profile-oval,
    .pricing-card [class*="oval"] {
        display: none !important;
    }

    /* ===== 🎯 SEÇÃO TECNOLOGIAS - MOBILE (CORRIGIDO) ===== */
    section.py-5.my-5 {
        overflow: hidden !important;
        position: relative !important;
        padding-top: 10px !important;
        margin-top: -20px !important;
    }

    #secao-tecnologias {
        margin-top: -90px !important;
        padding-top: 20px !important;
        padding-bottom: 30px !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        background: white !important;
    }

    section.py-5.my-5 .container {
        padding-top: 0 !important;
    }

    section.py-5.my-5 .row {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    section.py-5.my-5 .col-lg-6 {
        width: 100% !important;
        padding: 0 15px !important;
        margin: 0 !important;
        position: static !important;
        order: 0;
        overflow: hidden !important;
    }

    /* Garante que a imagem vem primeiro */
    section.py-5.my-5 .col-lg-6:has(img) {
        order: 1 !important;
        margin-bottom: 30px !important;
    }

    /* REMOVE O RATIO 16x9 NO MOBILE */
    section.py-5.my-5 .ratio.ratio-16x9 {
        padding-top: 0 !important;
        position: static !important;
        height: auto !important;
    }

    section.py-5.my-5 .ratio.ratio-16x9::before {
        display: none !important;
        padding-top: 0 !important;
    }

    /* Conteúdo de texto vem depois */
    section.py-5.my-5 .col-lg-6:not(:has(img)) {
        order: 2 !important;
        text-align: left !important;
        display: block !important;
    }

    section.py-5.my-5 .col-lg-6.ps-lg-5 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    section.py-5.my-5 .divider-yellow {
        margin: 0 0 15px 0 !important;
        position: static !important;
    }

    section.py-5.my-5 h4,
    section.py-5.my-5 h2,
    section.py-5.my-5 h3 {
        text-align: left !important;
        margin-bottom: 20px;
        margin-top: 0 !important;
        position: static !important;
    }

    section.py-5.my-5 p {
        text-align: left !important;
        margin-bottom: 15px;
        position: static !important;
        max-width: 100% !important;
    }

    /* FORÇA TODOS OS ELEMENTOS A SEREM ESTÁTICOS */
    section.py-5.my-5 * {
        position: static !important;
    }

    /* REMOVE E REPOSICIONA BOTÕES FLUTUANTES */
    section.py-5.my-5 button,
    section.py-5.my-5 .btn,
    section.py-5.my-5 a.btn,
    section.py-5.my-5 button.btn-primary,
    section.py-5.my-5 .btn.btn-primary {
        position: static !important;
        float: none !important;
        margin: 25px auto 0 auto !important;
        display: block !important;
        width: auto !important;
        max-width: 200px !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        padding: 12px 32px !important;
        border-radius: 50px !important;
        text-align: center !important;
    }

    /* Remove ovals e elementos decorativos */
    section.py-5.my-5 .profile-oval,
    section.py-5.my-5 [class*="oval"],
    section.py-5.my-5 .oval-yellow,
    section.py-5.my-5 .oval-green,
    section.py-5.my-5 .oval-blue {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Imagem responsiva - SEM ENCOLHER */
    section.py-5.my-5 img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 16px;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        display: block !important;
        object-fit: cover !important;
    }

    /* ===== 🎯 SEÇÃO DEPOIMENTOS - MOBILE (CORRIGIDO) ===== */
    #testimonials {
        overflow: hidden !important;
        position: relative !important;
    }

    #testimonials .row {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #testimonials .col-lg-6 {
        width: 100% !important;
        padding: 0 15px !important;
        margin-bottom: 30px;
        position: static !important;
        order: 0;
        overflow: hidden !important;
    }

    /* Conteúdo de texto vem primeiro */
    #testimonials .col-lg-6:not(:has(.testimonial-card)) {
        order: 1 !important;
        text-align: left !important;
        display: block !important;
    }

    /* Cards de depoimentos vêm depois */
    #testimonials .col-lg-6:has(.testimonial-card) {
        order: 2 !important;
    }

    #testimonials .divider-yellow {
        margin: 0 0 15px 0 !important;
        position: static !important;
    }

     #testimonials h2,
    #testimonials h4,
    #testimonials h3 {
        text-align: center !important;
        margin-bottom: 20px;
        position: static !important;
    }
    
    #testimonials .divider-yellow {
        margin: 0 auto 15px auto !important;
        position: static !important;
    }

     #testimonials p {
        text-align: left !important;
        margin-bottom: 25px !important;
        position: static !important;
        max-width: 100% !important;
    }
    
    /* FORÇA TODOS OS ELEMENTOS A SEREM ESTÁTICOS */
    #testimonials .col-lg-6:not(:has(.testimonial-card)) * {
        margin-bottom: 10px !important;
        position: static !important;
    }

    /* OCULTA BOTÕES DA SEÇÃO DEPOIMENTOS NO MOBILE */
    #testimonials button,
    #testimonials .btn,
    #testimonials a.btn,
    #testimonials button.btn-primary,
    #testimonials .btn.btn-primary {
        display: none !important;
    }


    /* REMOVE E REPOSICIONA BOTÕES FLUTUANTES */
    #testimonials button,
    #testimonials .btn,
    #testimonials a.btn,
    #testimonials button.btn-primary,
    #testimonials .btn.btn-primary {
        position: static !important;
        float: none !important;
        margin: 25px auto 0 auto !important;
        display: block !important;
        width: auto !important;
        max-width: 200px !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        padding: 12px 32px !important;
        border-radius: 50px !important;
        text-align: center !important;
    }

    /* Cards de depoimentos */
    #testimonials .testimonial-card {
        text-align: left !important;
        margin: 20px 0 0 0 !important;
        margin-bottom: 0 !important;
        padding: 25px;
        border-radius: 16px;
        background: white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        position: static !important;
    }
    
    #testimonials {
        padding-bottom: 30px !important;
        margin-bottom: 0 !important;
    }
    #testimonials .testimonial-card img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-bottom: 15px;
        position: static !important;
    }

    #testimonials .testimonial-card h5,
    #testimonials .testimonial-card h6 {
        text-align: left !important;
        margin-bottom: 8px;
        position: static !important;
    }

    #testimonials .testimonial-card p {
        text-align: left !important;
        font-size: 0.9rem;
        line-height: 1.6;
        position: static !important;
    }

    /* Remove ovals e elementos decorativos */
    #testimonials .profile-oval,
    #testimonials [class*="oval"],
    #testimonials .oval-yellow,
    #testimonials .oval-green,
    #testimonials .oval-blue {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* ===== ACCORDION ===== */
    .accordion-button {
        font-size: 0.95rem;
        padding: 15px 18px;
        text-align: left;
    }

    .accordion-body {
        padding: 18px;
        font-size: 0.9rem;
    }

    /* ===== FOOTER ===== */
    footer .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    footer h3,
    footer h4 {
        font-size: 1.3rem;
    }

    /* ===== DIVISORES ===== */
    .divider-yellow {
        width: 50px;
    }

    /* ===== FEATURE ICONS ===== */
    .feature-icon {
        width: 70px;
        height: 70px;
    }

    .feature-icon i {
        font-size: 1.75rem;
    }

    /* ===== PRICING ===== */
    .pricing-price-container {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .pricing-price-container .pricing-price {
        font-size: 2.5rem !important;
    }

    .pricing-price-container .pricing-badge {
        font-size: 0.8rem !important;
        padding: 6px 16px !important;
    }

    /* ===== 🔥 REMOVE ELEMENTOS FLUTUANTES/ABSOLUTOS ===== */
    .profile-oval,
    .oval-green,
    .oval-yellow,
    .oval-blue,
    [class*="oval"] {
        display: none !important;
    }

    section.py-5,
    #testimonials,
    #pricing {
        position: relative !important;
    }

    /* FORÇA BOTÕES PARA DENTRO */
    section button[class*="btn"],
    section .btn-primary {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateX(0) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================
   ACESSIBILIDADE - REDUÇÃO DE MOVIMENTO
   ========================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}