/* ==========================================================================
   1. Core Variables & Global Styles
   ========================================================================== */
:root {
    --md-sys-color-primary: #8ab4f8; 
    --md-sys-color-on-primary: #1e3a6c;
    --md-sys-color-primary-container: #2c4a7e;
    --md-sys-color-on-primary-container: #d2e3fc;
    
    --md-sys-color-secondary: #bdc1c6;
    --md-sys-color-on-secondary: #303135;
    --md-sys-color-secondary-container: #44474a;
    --md-sys-color-on-secondary-container: #e8eaed;
    
    --md-sys-color-surface: #111111; 
    --md-sys-color-surface-dim: #1a1a1a;
    --md-sys-color-surface-bright: #282828;
    --md-sys-color-on-surface: #e8eaed; 
    --md-sys-color-on-surface-variant: #9aa0a6;
    
    --md-sys-color-outline: #5f6368;
    --md-sys-color-outline-variant: #3c4043;
    
    --gemini-blue: #4285f4;
    --gemini-red: #ea4335;
    --gemini-yellow: #fbbc05;
    --gemini-green: #34a853;

    --color-red-danger: #ef4444; 
    --color-success: var(--gemini-green);
    --color-star: var(--gemini-yellow);
}

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

body {
    font-family: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--md-sys-color-surface); 
    color: var(--md-sys-color-on-surface);
    line-height: 1.6;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
}

/* ==========================================================================
   2. Typography Scale
   ========================================================================== */
.display-large {
    font-family: 'Google Sans', sans-serif;
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.headline-large {
    font-family: 'Google Sans', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.25;
}

.headline-medium {
    font-family: 'Google Sans', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    line-height: 1.25;
}

.body-large {
    font-family: 'Roboto', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
}

.body-medium {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
        
.body-small { 
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    line-height: 1.4;
    opacity: 0.8;
}

.label-large {
    font-family: 'Google Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1px;
}

/* ==========================================================================
   3. Utility & Helper Classes
   ========================================================================== */
.font-weight-600 { font-weight: 600; }
.success-text { color: var(--color-success); }
.error-text { color: var(--color-red-danger); }
.star-icon { color: var(--color-star); margin-right: 2px; } 
.danger-text { color: var(--color-red-danger); font-weight: 600; }

/* Section Dividers */
.section-divider {
    width: 64px;
    height: 4px;
    background: linear-gradient(45deg, 
        var(--gemini-blue) 0%, 
        var(--gemini-red) 25%, 
        var(--gemini-yellow) 50%, 
        var(--gemini-green) 75%, 
        var(--gemini-blue) 100%);
    margin: 16px auto 0;
    border-radius: 2px;
}
        
/* Section Header Common Styles */
.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-header .section-title {
    margin-bottom: 16px;
}

.section-header .section-subtitle {
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.8;
}

/* ==========================================================================
   4. Component Styles (Cards, Buttons, etc.)
   ========================================================================== */
/* Google Material 3 Elevation */
.elevation-1 { 
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 
                0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.elevation-2 { 
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 
                0px 2px 6px 2px rgba(0, 0, 0, 0.15);
}

.elevation-3 { 
    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 
                0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* Google Material 3 Button */
.md-filled-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    border-radius: 24px;
    border: none;
    font-family: 'Google Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    position: relative;
    overflow: hidden;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.md-filled-button:hover {
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 
                0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.md-filled-button:active {
    transform: translateY(0);
}

/* Ripple Effect */
.md-filled-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.md-filled-button:active::before {
    width: 300px;
    height: 300px;
}
        
/* Material Card */
.md-card {
    background-color: var(--md-sys-color-surface-dim);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    border: 1px solid var(--md-sys-color-outline);
}

.md-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 
                0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}        

/* Contador de Vagas Restantes - Posição Inferior Direita */
.vagas-counter {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: linear-gradient(135deg, 
        var(--color-red-danger) 0%, 
        #dc2626 50%, 
        var(--color-red-danger) 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 12px;
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 1001;
    box-shadow: 
        0 4px 12px rgba(239, 68, 68, 0.4),
        0 0 20px rgba(239, 68, 68, 0.3);
    animation: vagasPulse 2s ease-in-out infinite;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform 0.2s ease;
    text-align: center;
    min-width: 160px; /* Aumentado para acomodar o countdown */
}

.vagas-counter:hover {
    transform: scale(1.05);
}

.vagas-counter .vagas-label {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vagas-counter .vagas-numero {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vagas-counter .vagas-texto {
    display: block;
    font-size: 0.7rem;
    opacity: 0.85;
    margin-bottom: 8px; /* Espaço para o countdown */
}

/* NOVO: Countdown dentro do card das vagas */
.vagas-countdown {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 8px;
    margin-top: 8px;
}

.vagas-countdown-label {
    display: block;
    font-size: 0.65rem;
    opacity: 0.8;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vagas-countdown-timer {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    animation: countdownBlink 1s ease-in-out infinite;
}

@keyframes countdownBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.7; }
}

@keyframes vagasPulse {
    0%, 100% { 
        box-shadow: 
            0 4px 12px rgba(239, 68, 68, 0.4),
            0 0 20px rgba(239, 68, 68, 0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 6px 16px rgba(239, 68, 68, 0.6),
            0 0 30px rgba(239, 68, 68, 0.5),
            0 0 40px rgba(239, 68, 68, 0.3);
        transform: scale(1.02);
    }        
}

/* ==========================================================================
   5. NOVOS CTAs - ESTILOS COMPLETOS
   ========================================================================== */

/* 1. Sticky Button Mobile */
.sticky-cta-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(45deg, var(--gemini-blue), var(--gemini-green));
    padding: 12px 16px;
    z-index: 9999;
    display: none;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
    animation: stickySlideUp 0.3s ease-out;
}

@keyframes stickySlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.sticky-cta-link {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-family: 'Google Sans', sans-serif;
}

.sticky-cta-link:hover {
    color: white;
    text-decoration: none;
}

/* 2. Mid-Page Urgency CTA */
.mid-page-cta-section {
    padding: 0;
    margin: 60px 0;
}

.mid-page-cta {
    background: linear-gradient(135deg, #1a1a1a 0%, #2c4a7e 100%);
    padding: 40px 20px;
    text-align: center;
    border-radius: 16px;
    border: 2px solid var(--gemini-blue);
    position: relative;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
}

.mid-page-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(66, 133, 244, 0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.mid-page-cta h3 {
    color: var(--gemini-blue);
    font-size: 1.5rem;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
}

.mid-page-cta p {
    color: var(--md-sys-color-on-surface);
    margin-bottom: 24px;
    font-size: 1.1rem;
    position: relative;
    z-index: 2;
}

.mid-page-cta .cta-button {
    background: linear-gradient(45deg, var(--gemini-blue), var(--gemini-green));
    color: white;
    padding: 16px 32px;
    font-size: 1.1rem;
    margin-bottom: 16px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 2;
    font-family: 'Google Sans', sans-serif;
}

.mid-page-cta .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(66, 133, 244, 0.3);
    color: white;
    text-decoration: none;
}

.mid-page-cta .cta-info {
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 12px;
    position: relative;
    z-index: 2;
}

/* NOVO: Countdown no Mid-Page CTA */
.midpage-countdown-container {
    background: rgba(234, 67, 53, 0.15);
    border: 1px solid var(--color-red-danger);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.midpage-countdown-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(234, 67, 53, 0.1), transparent);
    animation: countdownSweep 2s infinite;
}

.midpage-countdown-label {
    color: var(--color-red-danger);
    font-weight: 600;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    font-family: 'Google Sans', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.midpage-countdown-timer {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-red-danger);
    font-family: 'Courier New', monospace;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 8px rgba(234, 67, 53, 0.5);
    animation: countdownBlink 1s ease-in-out infinite;
}

/* 3. Exit Intent Popup - REMOVIDO COMPLETAMENTE */

/* 4. Countdown Timer */
.countdown-container {
    background: rgba(234, 67, 53, 0.1);
    border: 1px solid var(--color-red-danger);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.countdown-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(234, 67, 53, 0.1), transparent);
    animation: countdownSweep 2s infinite;
}

@keyframes countdownSweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

.countdown-label {
    color: var(--color-red-danger);
    font-weight: 600;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
    font-family: 'Google Sans', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.countdown-timer {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-red-danger);
    font-family: 'Courier New', monospace;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 10px rgba(234, 67, 53, 0.5);
    margin-bottom: 8px;
}

.countdown-note {
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 8px;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   6. Layout & Section Specific Styles (MANTIDOS ORIGINAIS)
   ========================================================================== */

/* App Bar (Header) - ESTILOS AJUSTADOS AQUI! */
.app-bar {
    /* Este é o estado padrão da barra (sem scroll) */
    background-color: var(--md-sys-color-surface); /* Originalmente era #111111 via JS */
    border-bottom: 1px solid var(--md-sys-color-outline-dark);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Para compatibilidade com Webkit */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease; /* Transição para suavidade */
}

/* Nova classe para quando a página for rolada (com mais de 100px) */
.app-bar.scrolled {
    /* Este é o estado da barra com scroll, que era o "rgba(17,17,17,0.95)" do original */
    background-color: rgba(17, 17, 17, 0.95); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Adiciona sombra ao rolar */
    border-bottom: 1px solid var(--md-sys-color-primary); /* Borda mais destacada */
}

.app-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Google Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
}

.logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(45deg, 
        var(--gemini-blue) 0%, 
        var(--gemini-red) 25%, 
        var(--gemini-yellow) 50%, 
        var(--gemini-green) 75%, 
        var(--gemini-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

/* Navigation Menu */
.main-nav {
    display: flex;
    gap: 24px;
}

.main-nav a {
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: var(--md-sys-color-primary);
}

.nav-toggle {
    display: none; 
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--md-sys-color-primary);
}

@media (max-width: 768px) {
    .main-nav {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 70px; 
        left: 0;
        width: 100%;
        background-color: var(--md-sys-color-surface-dim);
        padding: 16px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .main-nav.active {
        display: flex;
    }
    .nav-toggle {
        display: block; 
    }
}


/* Hero Section */
.hero {
    padding: 80px 0 120px;
    text-align: center;
    background: radial-gradient(ellipse at center, 
        rgba(138, 180, 248, 0.1) 0%, 
        transparent 70%);
    position: relative;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 16px;
    background-color: var(--md-sys-color-primary-container);
    border: 1px solid var(--md-sys-color-outline);
    color: var(--md-sys-color-on-primary-container);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 32px;
}

.hero-badge .icon-placeholder { 
    margin-right: 8px; 
    font-size: 1rem;
    line-height: 1; 
}

.hero-title {
    margin-bottom: 24px;
}

/* Efeito de digitação para o sub-headline */
.hero-subtitle {
    max-width: 600px;
    margin: 0 auto 48px;
    opacity: 0.8;
    min-height: 3em; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-subtitle .typing-text {
    min-width: 0; /* Remove largura fixa */
    min-height: 1.5em; /* Garante altura mínima para o cursor */
    display: inline-block;
    overflow: hidden;
    white-space: normal; /* Permite quebra de linha */
    border-right: .15em solid transparent; 
}
.hero-subtitle .typing-text.typing-active { 
    border-right: .15em solid var(--md-sys-color-primary); 
    animation: blink-caret .75s step-end infinite;
}

/* Animação de piscar do cursor (mantida, mas aplicada via JS) */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--md-sys-color-primary); }
}


.hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
        
.hero-cta-button {
    height: 56px; 
    padding: 0 32px; 
    font-size: 1rem;
}
.hero-cta-button .icon-placeholder { 
    margin-right: 8px;
    font-size: 1.2rem;
}

.hero-cta-info {
    opacity: 0.7;
}

@media (min-width: 768px) {
    .hero-cta-group {
        flex-direction: row;
        justify-content: center;
    }
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 32px;
    margin-top: 64px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

.stat-number {
    display: block;
    font-family: 'Google Sans', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--md-sys-color-primary);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Gemini Brand Gradient */
.gemini-text-gradient {
    background: linear-gradient(45deg, 
        var(--gemini-blue), 
        var(--gemini-red), 
        var(--gemini-yellow), 
        var(--gemini-green));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 3s ease-in-out infinite;
}

/* Introduction AI Section (Nova) */
.introduction-ai {
    padding: 80px 0;
    background-color: var(--md-sys-color-surface-dim);
    text-align: center;
}

.introduction-ai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.intro-card {
    text-align: center;
}
.intro-card .icon-large {
    font-size: 3rem;
    color: var(--md-sys-color-primary);
    margin-bottom: 16px;
}
.intro-card .intro-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 8px;
}
.intro-card .intro-description {
    opacity: 0.8;
}

/* Featured Course Section (NOVA VERSÃO SEM IMAGEM) */
.featured-course {
    padding: 80px 0;
    text-align: center;
}
.featured-course-card {
    max-width: 600px; /* Ajuste a largura máxima para o card agora que não tem imagem ao lado */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Sempre em coluna, pois não tem imagem lateral */
    align-items: center;
    gap: 32px; /* Espaçamento interno */
    background-color: var(--md-sys-color-surface-dim);
    border-radius: 16px;
    padding: 48px;
    border: 1px solid var(--md-sys-color-primary-container);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    text-align: center; /* Centraliza o texto interno */
    position: relative; /* Para o badge */
}

.featured-course-card .course-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 16px;
}
.featured-course-card .course-subtitle {
    font-size: 1.125rem;
    opacity: 0.9;
    margin-bottom: 24px;
}

/* Ajustes para o badge de preço */
.featured-course-card .pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, var(--gemini-blue), var(--gemini-red), var(--gemini-yellow), var(--gemini-green));
    color: white;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Estilos de preço */
.featured-course-card .price-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.featured-course-card .price-old {
    font-size: 1.25rem;
    text-decoration: line-through;
    opacity: 0.5;
}

.featured-course-card .price-current {
    font-family: 'Google Sans', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    color: var(--md-sys-color-primary);
}

.featured-course-card .price-discount-badge {
    background-color: var(--color-red-danger);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}
.featured-course-card .price-description {
    opacity: 0.7;
    margin-bottom: 32px;
}

/* Estilos de lista de features */
.featured-course-card .pricing-features { /* Reutiliza a classe */
    list-style: none;
    padding: 0;
    text-align: left; /* Alinha os checks à esquerda */
    width: 100%;
    max-width: 400px; /* Limita a largura da lista */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
}

.featured-course-card .pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.featured-course-card .check-text { /* Reutiliza a classe */
    color: var(--md-sys-color-primary);
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1.1rem;
}

/* Estilos do grupo CTA (botão e segurança) */
.featured-course-card .pricing-cta-group {
    text-align: center;
}

/* ADICIONADO/AJUSTADO: Estilo para o parágrafo de descrição dentro do pricing-cta-group */
.pricing-cta-group .body-medium {
    margin-bottom: 24px;
    text-align: center;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}


.featured-course-card .hero-cta-button { /* Reutiliza a classe de botão */
    height: 56px;
    padding: 0 32px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.featured-course-card .hero-cta-info { /* Reutiliza a classe de info */
    opacity: 0.7;
    margin-top: 16px;
}

/* Estilos da garantia */
.featured-course-card .guarantee-box { /* Reutiliza a classe */
    border-top: 1px solid var(--md-sys-color-outline);
    padding-top: 24px;
    text-align: center;
    margin-top: 32px;
}
.featured-course-card .guarantee-icon-placeholder { /* Reutiliza a classe */
    font-size: 3rem;
    color: var(--color-star);
    margin-bottom: 16px;
}
.featured-course-card .guarantee-title { /* Reutiliza a classe */
    font-family: 'Google Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 8px;
}
.featured-course-card .guarantee-text { /* Reutiliza a classe */
    opacity: 0.8;
}
        
/* NOVO: Estilos para as estatísticas dentro do card do curso */
.course-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Fixed 4 columns instead of auto-fit */
    gap: 12px; /* Reduced gap for better fit */
    margin-bottom: 32px;
    width: 100%;
    max-width: 500px; /* Increased max-width to accommodate 4 columns */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.course-card-stats .stat-item {
    background-color: var(--md-sys-color-surface-bright);
    padding: 8px 4px; /* Reduced padding for better fit */
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    min-width: 0; /* Allow items to shrink below content size */
}
.course-card-stats .stat-number-small {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.25rem; /* Slightly smaller font */
    font-weight: 600;
    color: var(--md-sys-color-primary);
    margin-bottom: 4px;
    display: block;
}
.course-card-stats .stat-label-small {
    font-size: 0.75rem; /* Smaller font for labels */
    opacity: 0.7;
    line-height: 1.2;
}

/* Testimonials Section (Reutilizada, mas com ajustes) */
.testimonials {
    padding: 80px 0;
    background-color: var(--md-sys-color-surface-dim);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

.testimonial-card {
    position: relative;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(45deg, 
        var(--gemini-blue), 
        var(--gemini-red), 
        var(--gemini-yellow), 
        var(--gemini-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    flex-shrink: 0;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 500;
    margin-bottom: 4px;
}

.author-role {
    font-size: 0.875rem;
    color: var(--md-sys-color-primary);
}

.testimonial-rating {
    margin-bottom: 16px;
    font-size: 1.2rem; 
}
        
.testimonial-text {
    line-height: 1.6;
}

.testimonials-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.stat-card {
    text-align: center;
    padding: 24px;
}

/* AI Playground Section (NOVA e Extraordinária) */
.ai-playground {
    padding: 80px 0;
    background-color: var(--md-sys-color-surface);
    text-align: center;
}

.ai-playground-content {
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--md-sys-color-surface-dim);
    border-radius: 16px;
    padding: 40px;
    border: 1px solid var(--md-sys-color-outline);
    box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
}

/* ADICIONADO/AJUSTADO: Estilo para o parágrafo informativo na AI Playground */
.ai-playground-content .label-large {
    margin-top: 24px;
    opacity: 0.7;
}

.ai-playground-input-group {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ai-playground-input-group input {
    flex-grow: 1;
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid var(--md-sys-color-outline);
    background-color: var(--md-sys-color-surface-bright);
    color: var(--md-sys-color-on-surface);
    font-size: 1rem;
}

.ai-playground-input-group button {
    background-color: var(--gemini-blue);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}
.ai-playground-input-group button:hover {
    background-color: var(--md-sys-color-primary);
}

.ai-playground-output {
    background-color: var(--md-sys-color-surface-bright);
    border-radius: 12px;
    padding: 20px;
    min-height: 100px;
    text-align: left;
    border: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
    opacity: 0.9;
    white-space: pre-wrap; 
    font-family: 'Roboto Mono', monospace; 
    font-size: 0.9rem;
    line-height: 1.5;
    overflow: hidden; 
    border-right: .15em solid transparent; 
}
.ai-playground-output.typing-active {
    border-right: .15em solid var(--md-sys-color-primary); 
    animation: blink-caret .75s step-end infinite;
}

.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    justify-content: center;
}
.ai-suggestions button {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: 1px solid var(--md-sys-color-outline);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.ai-suggestions button:hover {
    background-color: var(--md-sys-color-primary-container);
    transform: translateY(-2px);
}

/* Professor Section (NOVA VERSÃO CENTRALIZADA) */
.professor {
    padding: 60px 0; 
    background-color: var(--md-sys-color-surface);
}

.section-header { 
    text-align: center;
    margin-bottom: 40px; 
}

/* Container principal com professor centralizado */
.professor-centered-layout {
    position: relative;
    max-width: 800px; 
    margin: 0 auto;
    min-height: 500px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Professor no centro */
.professor-center {
    position: relative;
    z-index: 10; 
    text-align: center;
    background-color: var(--md-sys-color-surface-dim);
    border-radius: 20px; 
    padding: 32px 24px;
    border: 2px solid var(--md-sys-color-primary);
    box-shadow: 0 8px 32px rgba(138, 180, 248, 0.2);
    max-width: 320px; 
    backdrop-filter: blur(10px); 
}

.professor-image {
    width: 240px; 
    height: 300px; 
    border-radius: 16px; 
    margin: 0 auto 20px;
    border: 4px solid var(--md-sys-color-primary);
    box-shadow: 0 6px 20px rgba(138, 180, 248, 0.3);
    object-fit: cover;
    transition: transform 0.3s ease;
}

.professor-image img {
    width: 100%; 
    height: auto; 
    display: block; 
    border-radius: 8px; 
}

.professor-image:hover {
    transform: scale(1.03); 
}

.professor-name {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.professor-title {
    color: var(--md-sys-color-primary);
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.professor-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat-item {
    text-align: center;
    padding: 8px;
    background-color: rgba(138, 180, 248, 0.1);
    border-radius: 8px;
}

.stat-number {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--md-sys-color-primary);
    display: block;
}

.stat-label {
    font-size: 0.75rem;
    opacity: 0.8;
}

.professor-quote {
    font-style: italic;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 16px;
    padding: 12px;
    background-color: rgba(138, 180, 248, 0.05);
    border-radius: 8px;
}        
/* Certificações posicionadas ao redor */
.certifications-orbit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; 
}

/* Linhas neon conectando certificados ao professor */
.neon-connection {
    position: absolute;
    background: linear-gradient(90deg, 
        transparent, 
        var(--md-sys-color-primary), 
        transparent);
    height: 2px;
    z-index: 5;
    opacity: 0.6;
    animation: neonPulse 3s ease-in-out infinite;
    box-shadow: 
        0 0 5px var(--md-sys-color-primary),
        0 0 10px var(--md-sys-color-primary),
        0 0 15px var(--md-sys-color-primary);
}

@keyframes neonPulse {
    0%, 100% { 
        opacity: 0.4;
        transform: scaleX(0.8);
    }
    50% { 
        opacity: 0.8;
        transform: scaleX(1);
    }
}

/* Linhas específicas para cada certificado */
/* Ajuste de `width` para valores fixos ou mais consistentes */
.connection-1 { top: calc(8% + 65px); left: 85px; width: 120px; animation-delay: 0.5s; }
.connection-2 { top: calc(28% + 65px); left: 85px; width: 110px; animation-delay: 1s; }
.connection-3 { top: calc(48% + 65px); left: 85px; width: 100px; animation-delay: 1.5s; }
.connection-4 { top: calc(68% + 65px); left: 85px; width: 110px; animation-delay: 2s; }
.connection-5 { top: calc(88% + 65px); left: 85px; width: 120px; animation-delay: 2.5s; }

.connection-6 { top: calc(8% + 65px); right: 85px; width: 120px; transform-origin: right center; animation-delay: 3s; }
.connection-7 { top: calc(28% + 65px); right: 85px; width: 110px; transform-origin: right center; animation-delay: 3.5s; }
.connection-8 { top: calc(48% + 65px); right: 85px; width: 100px; transform-origin: right center; animation-delay: 4s; }
.connection-9 { top: calc(68% + 65px); right: 85px; width: 110px; transform-origin: right center; animation-delay: 4.5s; }
.connection-10 { top: calc(88% + 65px); right: 85px; width: 120px; transform-origin: right center; animation-delay: 5s; }


.certification-badge {
    position: absolute;
    width: 130px; 
    height: 130px; 
    background-color: var(--md-sys-color-surface-bright);
    border-radius: 10%; /* Torna o CONTÊINER do badge redondo */
    border: 2px solid var(--md-sys-color-outline);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px; 
    transition: all 0.3s ease;
    pointer-events: auto; 
    cursor: pointer;
    animation: float 6s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); 
}

.certification-badge:hover {
    transform: scale(1.1);
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 4px 12px rgba(138, 180, 248, 0.3);
}

.certification-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ajusta a imagem para caber no contêiner, mantendo proporções */
    border-radius: 10%; /* CORRIGIDO: Torna a IMAGEM do badge redonda */
}        
/* Posicionamento próximo ao professor - sem sobreposição */
/* Lado Esquerdo - Próximos mas sem sobrepor */
.badge-1 { top: 8%; left: -45px; animation-delay: 0s; } 
.badge-2 { top: 28%; left: -45px; animation-delay: 0.5s; }
.badge-3 { top: 48%; left: -45px; animation-delay: 1s; }
.badge-4 { top: 68%; left: -45px; animation-delay: 1.5s; }
.badge-5 { top: 88%; left: -45px; animation-delay: 2s; }
        
/* Lado Direito - Próximos mas sem sobrepor */
.badge-6 { top: 8%; right: -45px; animation-delay: 2.5s; }
.badge-7 { top: 28%; right: -45px; animation-delay: 3s; }
.badge-8 { top: 48%; right: -45px; animation-delay: 3.5s; }
.badge-9 { top: 68%; right: -45px; animation-delay: 4s; }
.badge-10 { top: 88%; right: -45px; animation-delay: 4.5s; }        

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(1deg); }
    50% { transform: translateY(0px) rotate(0deg); }
    75% { transform: translateY(-3px) rotate(-1deg); }
}

/* Linhas Neon de Conexão */
.neon-connection {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--md-sys-color-primary) 20%, 
        var(--gemini-blue) 50%, 
        var(--md-sys-color-primary) 80%, 
        transparent);
    box-shadow: 
        0 0 4px var(--md-sys-color-primary),
        0 0 8px var(--gemini-blue),
        0 0 12px var(--md-sys-color-primary);
    animation: neonPulse 2s ease-in-out infinite;
    transform-origin: left center;
    opacity: 0.8;
    z-index: 5;
}

@keyframes neonPulse {
    0%, 100% { 
        opacity: 0.6; 
        box-shadow: 
            0 0 4px var(--md-sys-color-primary),
            0 0 8px var(--gemini-blue);
    }
    50% { 
        opacity: 1; 
        box-shadow: 
            0 0 6px var(--md-sys-color-primary),
            0 0 12px var(--gemini-blue),
            0 0 18px var(--md-sys-color-primary);
    }
}

/* Posicionamento específico das linhas de conexão */
/* Lado Esquerdo */
.connection-1 { 
    top: calc(8% + 65px); 
    left: 85px; 
    width: 120px;
    animation-delay: 0.5s;
}
.connection-2 { 
    top: calc(28% + 65px); 
    left: 85px; 
    width: 110px;
    animation-delay: 1s;
}
.connection-3 { 
    top: calc(48% + 65px); 
    left: 85px; 
    width: 100px;
    animation-delay: 1.5s;
}
.connection-4 { 
    top: calc(68% + 65px); 
    left: 85px; 
    width: 110px;
    animation-delay: 2s;
}
.connection-5 { 
    top: calc(88% + 65px); 
    left: 85px; 
    width: 120px;
    animation-delay: 2.5s;
}

/* Lado Direito */
.connection-6 { 
    top: calc(8% + 65px); 
    right: 85px; 
    width: 120px;
    transform-origin: right center;
    animation-delay: 3s;
}
.connection-7 { 
    top: calc(28% + 65px); 
    right: 85px; 
    width: 110px;
    transform-origin: right center;
    animation-delay: 3.5s;
}
.connection-8 { 
    top: calc(48% + 65px); 
    right: 85px; 
    width: 100px;
    transform-origin: right center;
    animation-delay: 4s;
}
.connection-9 { 
    top: calc(68% + 65px); 
    right: 85px; 
    width: 110px;
    transform-origin: right center;
    animation-delay: 4.5s;
}
.connection-10 { 
    top: calc(88% + 65px); 
    right: 85px; 
    width: 120px;
    transform-origin: right center;
    animation-delay: 5s;
}

/* Seção de informações abaixo */
.professor-info-below {
    margin-top: 60px;
    text-align: center;
}

/* ADICIONADO/AJUSTADO: Estilos para elementos dentro de professor-info-below */
.professor-info-below .headline-medium {
    margin-bottom: 24px;
}

.professor-info-below .body-medium {
    max-width: 600px;
    margin: 24px auto;
    opacity: 0.9;
}

/* CTA */
.professor-cta {
    text-align: center;
    margin-top: 40px;
}

/* FAQ Section */
.faq {
    padding: 80px 0;
    background-color: var(--md-sys-color-surface-dim);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-question:hover {
    background-color: rgba(138, 180, 248, 0.05); 
}

.faq-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    padding-right: 16px;
}

.faq-icon { 
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--md-sys-color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    font-weight: bold; 
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 24px;
}

.faq-answer.active {
    max-height: 200px; 
    padding: 0 24px 24px;
}

.faq-answer p {
    margin: 0;
    opacity: 0.8;
    line-height: 1.6;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg); 
}

/* Common CSS for lists (bullets, checks) */
.bullet-text { 
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
    color: inherit; 
}
.bullet-text.error { color: var(--color-red-danger); }
.bullet-text.success { color: var(--color-success); }
        
.check-text { 
    color: var(--md-sys-color-primary);
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1.1rem; 
}

/* Footer */
.footer {
    background-color: var(--md-sys-color-surface-dim);
    padding: 60px 0 40px;
    border-top: 1px solid var(--md-sys-color-outline);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
}

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

.footer-description {
    margin: 16px 0;
    opacity: 0.8;
}

.footer-contact {
    opacity: 0.8;
}

.contact-link {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid var(--md-sys-color-outline);
}

.footer-legal {
    font-size: 0.875rem;
    opacity: 0.7;
    line-height: 1.6;
}

.footer-legal p {
    margin-bottom: 8px;
}

.creator-name {
    color: var(--md-sys-color-primary);
    font-weight: 500;
}

/* ==========================================================================
   7. Animations
   ========================================================================== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    transform: translateY(40px);
    opacity: 0;
    animation: slideUp 0.8s ease-out forwards;
}

@keyframes slideUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Intersection Observer Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/* Initial state for elements controlled by Intersection Observer */
.fade-in, .slide-up {
    animation-play-state: paused;
}
.loaded .fade-in, .loaded .slide-up {
    animation-play-state: running;
}

/* ==========================================================================
   8. RESPONSIVE ADJUSTMENTS COMPLETOS
   ========================================================================== */

/* Responsive Adjustments */        
@media (max-width: 768px) {
    /* Vagas Counter Mobile */
    .vagas-counter {
        bottom: 16px;
        right: 16px;
        padding: 8px 12px;
        font-size: 0.8rem;
        min-width: 140px; /* Ajustado para mobile */
        border-radius: 10px;
        z-index: 1002; /* Maior que sticky button */
    }
            
    .vagas-counter .vagas-label {
        font-size: 0.65rem;
    }
            
    .vagas-counter .vagas-numero {
        font-size: 1.2rem;
    }
            
    .vagas-counter .vagas-texto {
        font-size: 0.6rem;
    }
    
    /* NOVO: Countdown mobile */
    .vagas-countdown-label {
        font-size: 0.55rem !important;
    }
    
    .vagas-countdown-timer {
        font-size: 0.7rem !important;
    }

    /* Novos CTAs - Responsividade */
    .sticky-cta-mobile {
        padding: 10px 12px;
    }
    
    .sticky-cta-link {
        font-size: 14px;
        gap: 6px;
    }
    
    .mid-page-cta {
        padding: 24px 16px;
        margin: 40px 0;
    }
    
    .mid-page-cta h3 {
        font-size: 1.25rem;
    }
    
    .mid-page-cta p {
        font-size: 1rem;
    }
    
    .mid-page-cta .cta-button {
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    /* NOVO: Mid-page countdown responsivo */
    .midpage-countdown-container {
        padding: 12px;
        margin: 16px 0;
    }
    
    .midpage-countdown-label {
        font-size: 0.75rem;
    }
    
    .midpage-countdown-timer {
        font-size: 1.1rem;
    }
    
    /* Exit Intent Popup - REMOVIDO COMPLETAMENTE */
    
    .countdown-timer {
        font-size: 1.25rem;
    }
    
    .countdown-label {
        font-size: 0.8rem;
    }

    /* Layout Geral */
    .hero { padding: 60px 0 80px; }
    .introduction-ai, .featured-course, .testimonials, .professor, .ai-playground, .faq {
        padding: 60px 0;
    }
    .introduction-ai-grid, .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .display-large { font-size: 2.5rem; }
    .headline-large { font-size: 1.75rem; }
            
    .featured-course-card {
        padding: 24px; /* Menor padding em mobile */
    }
    .featured-course-card .course-title {
        font-size: 1.5rem;
    }
    .featured-course-card .course-subtitle {
        font-size: 1rem;
    }
    .featured-course-card .price-current {
        font-size: 2.5rem;
    }
    .featured-course-card .course-card-stats {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em mobile */
        gap: 8px;
        max-width: 400px;
    }

    .professor-content { grid-template-columns: 1fr; text-align: center; }
    .professor-image { width: 100%; max-width: 200px; margin: 0 auto 24px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .testimonials-stats { grid-template-columns: 1fr; }            
    .app-bar-content { flex-direction: row; justify-content: space-between; }
    .hero-cta-group { flex-direction: column; gap: 16px; }
    .section-header { margin-bottom: 32px; }
    .faq-title { font-size: 1rem; }
    .faq-answer.active { padding: 0 16px 16px; }
    .ai-playground-content { padding: 24px; }
    .ai-playground-input-group { flex-direction: column; }

    /* Certifications Section */
    .professor-centered-layout { 
        min-height: 400px;
        margin: 20px auto;
    }

    .professor-center {
        max-width: 280px;
        padding: 24px 20px;
    }

    .professor-image {
        width: 180px; 
        height: 225px; 
        border-radius: 12px; 
    }

    .certification-badge {
        width: 100px; /* Ajustado para caber melhor em telas menores */
        height: 100px; /* Ajustado para caber melhor em telas menores */
        padding: 10px;
    }

    /* Reposicionar badges para mobile - AINDA MAIS PRÓXIMOS */
    .badge-1 { top: 8%; left: -25px; } 
    .badge-2 { top: 24%; left: -25px; }
    .badge-3 { top: 40%; left: -25px; }
    .badge-4 { top: 56%; left: -25px; }
    .badge-5 { top: 72%; left: -25px; }
            
    .badge-6 { top: 8%; right: -25px; }
    .badge-7 { top: 24%; right: -25px; }
    .badge-8 { top: 40%; right: -25px; }
    .badge-9 { top: 56%; right: -25px; }
    .badge-10 { top: 72%; right: -25px; }

    /* Ajustar linhas de conexão para mobile (opcionalmente pode ocultá-las) */
    .neon-connection {
        display: none; /* Ocultar para simplificar no mobile */
    }
}

@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .hero-stats { grid-template-columns: 1fr; }
    .price-current { font-size: 2.5rem; }
    
    /* Novos CTAs - Telas muito pequenas */
    .sticky-cta-link {
        font-size: 13px;
        flex-direction: column;
        gap: 2px;
        line-height: 1.2;
    }
    
    .mid-page-cta {
        padding: 20px 12px;
    }
    
    .mid-page-cta h3 {
        font-size: 1.1rem;
    }
    
    .mid-page-cta .cta-button {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
    
    /* Exit Intent Popup - REMOVIDO COMPLETAMENTE */
    
    .countdown-container {
        padding: 16px;
    }
    
    .countdown-timer {
        font-size: 1.1rem;
    }
            
    /* Certifications Section */
    .professor-centered-layout {
        min-height: 350px;
    }

    .professor-center {
        max-width: 240px;
        padding: 20px 16px;
    }

    .professor-image {
        width: 150px; 
        height: 188px; 
        border-radius: 10px; 
    }

    .certification-badge {
        width: 86px; 
        height: 86px; 
        padding: 8px;
    }
            
    .badge-1, .badge-2, .badge-3, .badge-4, .badge-5 { left: -14px; }
    .badge-6, .badge-7, .badge-8, .badge-9, .badge-10 { right: -14px; }

    .professor-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .featured-course-card .course-card-stats {
        grid-template-columns: 1fr; /* 1 coluna para stats em telas muito pequenas */
    }
}

/* ==========================================================================
   9. ESTILOS CUSTOMIZADOS HOTMART (MANTIDOS)
   ========================================================================== */

/* Estilos personalizados para o botão de checkout da Hotmart (MOVIDO DO HTML) */
.hotmart-fb.hotmart__button-checkout.md-filled-button.hero-cta-button,
.hotmart-fb.hotmart__button-checkout.cta-button {
    background: linear-gradient(90deg, #00c6fb 0%, #005bea 100%);
    color: #fff !important;
    border: none;
    box-shadow: 0 0 16px 2px #00c6fb80, 0 0 32px 4px #005bea40;
    text-shadow: 0 1px 8px #005bea80;
    font-weight: 700;
    font-size: 1.15rem;
    border-radius: 8px;
    transition: box-shadow 0.2s, transform 0.2s;
    text-decoration: none;
    display: inline-block;
    padding: 16px 32px;
    font-family: 'Google Sans', sans-serif;
}
.hotmart-fb.hotmart__button-checkout.md-filled-button.hero-cta-button:hover,
.hotmart-fb.hotmart__button-checkout.cta-button:hover {
    box-shadow: 0 0 32px 8px #00c6fbcc, 0 0 48px 12px #005bea80;
    transform: scale(1.04);
    filter: brightness(1.1);
    color: #fff !important;
    text-decoration: none;
}
.hotmart-fb.hotmart__button-checkout .icon-placeholder {
    color: #fff;
}