/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

body,
html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-padding-top: 50px;
}

body.modal-open {
    overflow: hidden !important;
    touch-action: none;
    -ms-touch-action: none;
}

/* --- Top Bar Marquee --- */
.top-bar-marquee {
    background-color: #00995D;
    /* FECAF Green */
    color: #fff;
    width: 100%;
    height: 35px;
    overflow: hidden;
    position: relative;
    z-index: 1000;
    /* Ensure on top */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.marquee-content {
    display: flex;
    width: max-content;
    /* Allow width to grow based on content */
    animation: marqueeScroll 60s linear infinite;
    /* Slower for better readability */
    will-change: transform;
}

.marquee-content span {
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-right: 50px;
    /* Gap between repetitions */
    display: block;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Mobile styles for marquee in fold 2 */
@media (max-width: 768px) {
    .vip-section .top-bar-marquee {
        margin-top: -45px !important;
        margin-bottom: 15px;
        height: 40px;
        position: relative;
        z-index: 100;
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    .vip-section .marquee-content span {
        font-size: 0.8rem;
    }
}

/* --- Premium Top Banner (New) --- */
.premium-top-banner {
    width: 100%;
    background: linear-gradient(135deg, #031F4B 0%, #00995D 100%);
    color: white;
    text-align: center;
    padding: 15px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
}

.premium-top-banner h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    /* text-transform: uppercase; Removed by user request */
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: neonPulse 3s infinite alternate;
}

.light-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: sweepLight 4s infinite cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

@keyframes neonPulse {
    0% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 0 20px rgba(0, 153, 93, 0.2);
        opacity: 0.9;
    }

    100% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(0, 153, 93, 0.5);
        opacity: 1;
        transform: scale(1.02);
    }
}

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

    10%,
    100% {
        left: 200%;
    }
}

@media (max-width: 768px) {
    .premium-top-banner {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    .premium-top-banner h1 {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    .top-bar-marquee {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    #bg-video {
        display: none !important;
    }

    .video-container {
        height: auto !important;
        min-height: auto !important;
        background-color: #fff !important;
        background-image: none !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 50px !important;
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    .banner-wrapper {
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    .banner-slide.active {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-banner-img {
        width: 100vw !important;
        height: auto !important;
        min-height: 300px !important;
        object-fit: contain !important;
        background: #fff;
        margin-left: calc(50% - 50vw) !important;
    }

    .cta-button {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 30px auto !important;
        display: block !important;
        font-size: 1.3rem !important;
        padding: 18px 25px !important;
        width: 90% !important;
        max-width: 350px;
        text-align: center !important;
        box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4) !important;
        z-index: 10;
        border-radius: 50px !important;
        font-weight: 800 !important;
    }

    .banner-nav {
        display: flex !important;
        top: 50% !important;
        background: rgba(0, 0, 0, 0.3) !important;
        color: #fff !important;
        width: 45px !important;
        height: 45px !important;
        z-index: 15;
        transform: translateY(-50%) !important;
    }

    .banner-nav.prev {
        left: 5px !important;
    }

    .banner-nav.next {
        right: 5px !important;
    }

    .vip-section {
        padding: 40px 10px !important;
    }

    .vip-section .discount-display .big {
        text-shadow: none !important;
    }
}

/* Video Section (Fold 1) */
.video-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 35px);
    /* Top Bar Adjustment */
    overflow: hidden;
    background-color: #000;
    /* Fallback color */
}

#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    /* Ensures video covers the area without distortion */
    z-index: 1;
}

/* Overlay (Optional - for text readability later) */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    /* Slight dark overlay */
    z-index: 2;
}

/* Wave Divider */
.custom-shape-divider-bottom-1689966835 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: 4;
    /* Above banner/overlay */
}

.custom-shape-divider-bottom-1689966835 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1689966835 .shape-fill {
    fill: #031F4B;
    /* Matches solid background */
}

.custom-shape-divider-bottom-1689966835 .shape-fill-white {
    fill: #ffffff;
}

/* Banner Wrapper */
.banner-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Center perfectly */
    width: 90%;
    max-width: 1040px;
    /* Reduced by 10% (was 1155px) */
    z-index: 3;
    overflow: visible;
    /* Modified to allow floating elements if needed, but usually hidden for internal overflow */
    overflow: hidden;
    /* Clean cut */
}

.hero-banner-img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

/* CTA Button */
.cta-button {
    position: absolute;
    /* Positioning relative to the image container */
    bottom: 20%;
    /* Adjusted based on visual estimation */
    left: 17%;
    /* Adjusted based on layout */
    transform: translateX(-50%);

    background-color: #25D366;
    /* Bright Green (similar to WhatsApp) */
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    /* Responsive base size */
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
    white-space: nowrap;
    animation: pulse 2s infinite;
}

.cta-button:hover {
    transform: translateX(-50%) scale(1.05);
    background-color: #20bd5a;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* --- Fold 2: VIP Future Pass Section --- */
.vip-section {
    position: relative;
    padding: 60px 20px 100px;
    background-color: #031F4B;
    /* UnIFECAF Dark Blue */
    overflow: visible;
    font-family: 'Inter', sans-serif;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: auto;
    flex-direction: column;
    /* Allow stacking */
}

.vip-section .container {
    width: 100%;
    max-width: 600px;
    /* Focused Card Width */
    position: relative;
    z-index: 2;
    perspective: 1000px;
}

/* Official Badge - Static (Fixed) */
.official-badge-static {
    display: table;
    /* Centers behave better */
    margin: 0 auto 20px;
    /* Centered with bottom margin */
    background: #00995D;
    /* UniFECAF Green */
    color: #fff;
    font-weight: 900;
    font-size: 1.1rem;
    padding: 12px 30px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 153, 93, 0.4);
    letter-spacing: 1px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
}

/* The VIP Card Container */
.vip-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    backdrop-filter: blur(20px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vip-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 153, 93, 0.3);
    border-color: rgba(0, 153, 93, 0.4);
}

/* Hologram Shine Effect */
.hologram-shine {
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.2),
            transparent);
    transform: skewX(-20deg);
    animation: hologram-swipe 6s infinite;
    pointer-events: none;
}

@keyframes hologram-swipe {

    0%,
    40% {
        left: -150%;
    }

    50% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

/* Header */
.card-header {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    /* Reduced margin */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.vip-status {
    color: #fff;
    /* Changed to White */
    background: rgba(0, 153, 93, 0.2);
    /* Subtle Green bg */
    padding: 5px 10px;
    border-radius: 4px;
    animation: fadePulse 2s infinite;
}

/* Body & Typography */
.vip-card h2 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
    background: linear-gradient(90deg, #fff, #a2a2a2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.discount-display {
    text-align: center;
    margin: 10px 0 15px;
    /* Tighter spacing */
    line-height: 1;
}

.discount-display .small {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #00995D;
    /* UniFECAF Green */
    letter-spacing: 2px;
}

.discount-display .big {
    display: block;
    font-size: 6rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 30px rgba(0, 153, 93, 0.4);
}

.modality-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.modality-text strong {
    color: #00995D;
    font-weight: 800;
}

/* Scarcity Meter */
.scarcity-meter {
    margin-bottom: 30px;
}

.meter-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #ccc;
    font-weight: 600;
}

.blink-text {
    color: #00995D;
    /* UniFECAF Green */
    animation: rapidBlink 1s infinite;
}

.progress-track {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    width: 0%;
    transition: width 1.5s ease-out;
    height: 100%;
    background: linear-gradient(90deg, #00995D, #00C853);
    /* Green Gradient */
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 153, 93, 0.6);
    position: relative;
    overflow: hidden;
}

/* Striped animation on progress bar */
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(-45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent);
    z-index: 1;
    background-size: 20px 20px;
    animation: moveStripes 1s linear infinite;
}

@keyframes moveStripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 20px 20px;
    }
}

.scarcity-detail {
    font-size: 1.1rem;
    /* Increased size */
    text-align: center;
    color: #fff;
    /* Increased contrast */
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* VIP Button */
.vip-btn {
    display: block;
    width: 100%;
    padding: 18px;
    text-align: center;
    background: #00995D;
    /* UniFECAF Green */
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0 0 20px rgba(0, 153, 93, 0.3);
    letter-spacing: 1px;
}

.vip-btn:hover {
    background: #00b36e;
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 153, 93, 0.6);
}

.vip-btn .flare {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
}

.vip-btn:hover .flare {
    left: 200%;
    transition: 0.5s;
}

.secure-lock {
    text-align: center;
    margin-top: 15px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes fadePulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@keyframes rapidBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@media (max-width: 768px) {
    .discount-display .big {
        font-size: 5rem;
    }
}

/* --- Fold 3: ENEM Section --- */
.enem-section {
    width: 100%;
    display: block;
    line-height: 0;
    /* Remove gap */
}

.responsive-banner {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Fold 3: Diferenciais (Animated) --- */
.diferenciais-section {
    padding: 80px 20px;
    background-color: #fff;
    font-family: 'Inter', sans-serif;
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #031F4B;
    margin-bottom: 20px;
}

.section-title span {
    color: #00995D;
    /* UniFECAF Green */
}

.highlight-blue {
    color: #00995D !important;
    /* Force green to match theme or user request? Actually Blue might be better for Stories. But theme is Green. Sticking to Green for consistency or maybe Blue as "Inspiring". Let's stick to Green for now. */
    text-decoration: underline;
    text-decoration-color: rgba(0, 153, 93, 0.3);
}

/* Grid Layout */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Animated Card */
.feature-card {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    /* Smoother, more premium shadow */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 153, 93, 0.15);
    border-color: rgba(0, 153, 93, 0.3);
}

.icon-box {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(0, 153, 93, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00995D;
    transition: transform 0.3s ease, background 0.3s;
}

.feature-card:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
    background: #00995D;
    color: #fff;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #031F4B;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 0.95rem;
    color: #031F4B;
    line-height: 1.5;
}

/* Staggered Animation on Load (Simple Fade Up CSS) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.feature-card {
    animation: fadeInUp 0.8s ease-out backwards;
}

.feature-card:nth-child(1) {
    animation-delay: 0.1s;
}

.feature-card:nth-child(2) {
    animation-delay: 0.2s;
}

.feature-card:nth-child(3) {
    animation-delay: 0.3s;
}

.feature-card:nth-child(4) {
    animation-delay: 0.4s;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
}

/* --- WhatsApp Floating Button --- */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 40px;
    /* Moved slightly left */
    background-color: #25D366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: all 0.3s ease;
    animation: waPulse 2s infinite;
    font-size: 35px;
    /* Size for FontAwesome Icon */
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #128c7e;
}

/* Remove manual SVG style inheritance if any */
.whatsapp-float svg {
    display: none;
}

@keyframes waPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* --- Promo Popup --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease;
    padding: 20px;
}

.popup-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.popup-content {
    background: transparent;
    padding: 0;
    border-radius: 10px;
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    animation: popupIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.popup-image {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #FF4757;
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
    line-height: 35px;
    text-align: center;
    padding: 0;
}

.close-btn:hover {
    transform: scale(1.1);
    background: #ff6b81;
}

@keyframes popupIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Course Grid (Fold 2) --- */
.courses-container {
    width: 100%;
    max-width: 1300px;
    /* Wider container */
    margin: 80px auto 0;
    /* More spacing */
    position: relative;
    z-index: 5;
    padding: 0 40px;
    /* Side padding */
}

.courses-title {
    text-align: center;
    color: #fff;
    font-size: 2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(0, 153, 93, 0.6);
}

.courses-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-top: -15px;
    margin-bottom: 25px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.search-wrapper {
    margin: 0 auto 40px;
    text-align: center;
    max-width: 500px;
    width: 100%;
}

#course-search {
    width: 100%;
    padding: 15px 25px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s;
    text-align: center;
}

#course-search::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

#course-search:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    border-color: #00995D;
    box-shadow: 0 0 15px rgba(0, 153, 93, 0.3);
}

.course-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    /* Tighter padding */
    padding: 20px 20px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centers content block vertically */
    align-items: center;
    min-height: 280px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    gap: 6px;
    /* Tighter spacing */
}

/* ... existing badge styles ... */

.course-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 2px;
    /* Very tight */
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.course-degree {
    font-size: 0.65rem;
    color: #00995D;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 2px;
}

.course-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
    margin: 0;
    max-width: 95%;
    /* Allow more text per line */
    margin-bottom: 2px;
}

.labels {
    margin-bottom: 0px;
    transform: scale(0.9);
    /* Make tags slightly smaller visually */
}

.start-rating {
    margin-bottom: 0px;
    color: #FFD700;
    font-size: 0.75rem;
    margin-top: 2px;
}

.course-btn {
    /* ... existing styles ... */
    margin-top: 5px;
}

/* Best Seller Badge */
.badge-best {
    position: absolute;
    top: 0;
    right: 0;
    background: #FFD700;
    /* Gold */
    color: #031F4B;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 6px 15px;
    border-radius: 0 0 0 15px;
    z-index: 5;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Premium Hover Effect */
.course-card:hover {
    transform: translateY(-10px) scale(1.02);
    background: linear-gradient(145deg, rgba(3, 31, 75, 0.6) 0%, rgba(0, 153, 93, 0.1) 100%);
    /* Blue to Green tint */
    border-color: rgba(0, 153, 93, 0.5);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 153, 93, 0.2);
    /* Glow ring */
}

/* Add a subtle sheen */
.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: 0.5s;
    pointer-events: none;
}

.course-card:hover::before {
    left: 100%;
}

.course-card h3 {
    font-size: 1.3rem;
    /* Larger title */
    color: #fff;
    /* White Text */
    margin-bottom: 5px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
    /* Powerful look */
}

/* Modality Tags */
.labels {
    margin-bottom: 10px;
}

.tag-ead,
.tag-semi {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-ead,
.tag-semi {
    background: rgba(0, 153, 93, 0.2);
    color: #00995D;
    border: 1px solid rgba(0, 153, 93, 0.3);
}

/* Stars */
.start-rating {
    margin-bottom: 20px;
    color: #FFD700;
    /* Gold */
    font-size: 0.9rem;
}

.start-rating i {
    margin: 0 2px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* Button inside card */
.course-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #00995D;
    /* Filled Green */
    border: none;
    color: #fff;
    /* White Text */
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 153, 93, 0.4);
}

.course-btn:hover {
    background: #00b36e;
    /* Lighter Green */
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 153, 93, 0.6);
    transform: scale(1.05);
}

/* Mobile Load More Logic */
.load-more-btn {
    display: none;
    /* Hidden on desktop */
}

@media (max-width: 1024px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cols on tablet */
    }
}

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

    .courses-grid {
        grid-template-columns: 1fr;
        /* Full width on mobile */
    }


    /* Hide items on mobile initially */
    .course-card.mobile-hidden {
        display: none;
    }

    /* Show Load More button */
    .load-more-btn {
        display: block;
        margin: 40px auto 0;
        background: transparent;
        border: 2px solid #fff;
        color: #fff;
        padding: 12px 30px;
        border-radius: 30px;
        font-weight: 700;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 0.9rem;
        transition: all 0.3s;
    }

    .load-more-btn:active {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Mobile CTA Button Fix */
    .cta-button {
        position: relative;
        font-size: 1rem;
        padding: 15px 0;
        margin: 15px 0 0 5%;
        /* Aligned slightly left */
        width: 85%;
        left: auto;
        transform: none;
        top: auto;
        bottom: auto;
        display: block;
        text-align: center;
        z-index: 10;
        box-shadow: 0 4px 15px rgba(0, 153, 93, 0.5);
    }

}

/* --- Fold 4A: Estrutura do Polo (Premium 3D Gallery) --- */
.structure-section {
    padding: 100px 20px;
    background: #f8f9fa;
    /* Light clean background */
    text-align: center;
    overflow: hidden;
}

.section-subtitle {
    color: #031F4B;
    margin-bottom: 50px;
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.gallery-3d-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    height: 500px;
    /* Fixed height for 3D space */
    perspective: 1000px;
    /* The 3D magic */
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-wrapper {
    position: relative;
    width: 600px;
    /* Card width */
    height: 400px;
    /* Card height */
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.gallery-item {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    z-index: 0;
    /* Default Hidden State */
    transform: translateX(0) scale(0.8);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.gallery-item .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s;
    font-weight: 700;
    font-size: 1.2rem;
}

.gallery-item:hover .caption,
.gallery-item.active .caption {
    transform: translateY(0);
}

/* States */
.gallery-item.active {
    opacity: 1;
    z-index: 3;
    transform: translateX(0) scale(1);
    box-shadow: 0 20px 60px rgba(0, 153, 93, 0.3);
    /* Green glow focus */
    border: 2px solid #00995D;
}

.gallery-item.prev {
    opacity: 0.6;
    z-index: 1;
    transform: translateX(-60%) scale(0.85) perspective(100px) rotateY(5deg);
    filter: blur(2px) grayscale(50%);
    cursor: pointer;
}

.gallery-item.next {
    opacity: 0.6;
    z-index: 1;
    transform: translateX(60%) scale(0.85) perspective(100px) rotateY(-5deg);
    filter: blur(2px) grayscale(50%);
    cursor: pointer;
}

/* Navigation Buttons */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #00995D;
    color: #fff;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 153, 93, 0.4);
    transition: all 0.3s;
    z-index: 10;
}

.nav-btn:hover {
    background: #00b36e;
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

/* Dots */
.gallery-dots {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    background: #00995D;
    width: 30px;
    /* Stretch active dot */
    border-radius: 12px;
}

/* Mobile Responsiveness for Gallery */
@media (max-width: 768px) {
    .gallery-3d-container {
        height: 350px;
    }

    .gallery-wrapper {
        width: 100%;
        max-width: 320px;
        height: 250px;
    }

    .gallery-item.prev {
        transform: translateX(-15%) scale(0.8);
        opacity: 0;
        pointer-events: none;
    }

    .gallery-item.next {
        transform: translateX(15%) scale(0.8);
        opacity: 0;
        pointer-events: none;
    }

    /* On mobile, simpler stack */
    .nav-btn {
        width: 40px;
        height: 40px;
    }

    .prev-btn {
        left: 0;
    }

    .next-btn {
        right: 0;
    }
}

/* --- Histórias que Inspiram (Stories Section) --- */
.stories-section {
    padding: 100px 20px;
    background-color: #031F4B;
    /* UnIFECAF Dark Blue (Approximated based on usage) */
    /* Replaced #080f1d with a branded dark blue */
    color: #fff;
    position: relative;
    text-align: center;
    /* Centralize content */
}

.stories-section .section-title {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.stories-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, #fff 0%, transparent 100%);
    opacity: 0.05;
    /* Fade from white section above */
    pointer-events: none;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.story-card {
    background: #0f1729;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.story-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 153, 93, 0.3);
}

.video-container-card {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    background: #000;
}

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

.story-info {
    padding: 25px;
    text-align: center;
}

.story-info h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-weight: 800;
    color: #fff;
}

.story-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

.story-info strong {
    color: #00995D;
    /* Highlight color */
}

/* --- 3D Course Carousel --- */
.courses-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    perspective: 1500px;
    /* Deep perspective */
    height: 500px;
    /* Fixed height for carousel */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
}

.courses-wrapper {
    position: relative;
    width: 320px;
    /* Card Width */
    height: 450px;
    /* Card Height approx */
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

/* Modify Course Card for Carousel Mode */
.courses-wrapper .course-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Override grid styles */
    min-height: auto;
    margin: 0;
    opacity: 0;
    z-index: 0;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateX(0) scale(0.8);
    display: flex;
    /* Ensure flex layout is kept */
}

/* Active State */
.courses-wrapper .course-card.course-active {
    opacity: 1;
    z-index: 5;
    transform: translateX(0) scale(1.1);
    /* Zoom center */
    box-shadow: 0 25px 60px rgba(0, 153, 93, 0.4);
    border: 2px solid #00995D;
}

/* Prev/Next States */
.courses-wrapper .course-card.course-prev {
    opacity: 0.5;
    z-index: 2;
    transform: translateX(-120%) scale(0.85) rotateY(15deg) translateZ(-100px);
    pointer-events: none;
    /* Prevent clicking hidden items */
}

.courses-wrapper .course-card.course-next {
    opacity: 0.5;
    z-index: 2;
    transform: translateX(120%) scale(0.85) rotateY(-15deg) translateZ(-100px);
    pointer-events: none;
}

/* Hidden States (for stack effect) */
.courses-wrapper .course-card.course-hidden-left {
    transform: translateX(-200%) scale(0.5);
    opacity: 0;
    z-index: 0;
}

.courses-wrapper .course-card.course-hidden-right {
    transform: translateX(200%) scale(0.5);
    opacity: 0;
    z-index: 0;
}

/* Navigation Buttons */
.course-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: #00995D;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: all 0.3s;
}

.course-nav:hover {
    background: #00b36e;
    transform: translateY(-50%) scale(1.1);
}

.course-nav.prev {
    left: -60px;
}

.course-nav.next {
    right: -60px;
}

/* --- Search Mode (Grid View restoration) --- */
.courses-carousel-container.search-active {
    height: auto;
    /* Allow auto expansion */
    perspective: none;
    max-width: 1300px;
    /* Full width */
}

.courses-carousel-container.search-active .courses-wrapper {
    width: 100%;
    height: auto;
    transform-style: flat;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Cols */
    gap: 30px;
}

/* When searching, reset card styles to default grid look */
.courses-carousel-container.search-active .course-card {
    position: relative;
    opacity: 1;
    transform: none !important;
    z-index: 1;
    width: auto;
    height: auto;
    left: auto;
    top: auto;
    /* Respect filtered display state */
}

.courses-carousel-container.search-active .course-nav {
    display: none;
    /* Hide arrows when searching */
}

/* Mobile Responsiveness for Carousel */
@media (max-width: 768px) {
    .courses-carousel-container {
        height: 480px;
        perspective: 800px;
    }

    .courses-wrapper {
        width: 280px;
        /* Smaller cards */
        height: 400px;
    }

    .course-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .course-nav.prev {
        left: 0px;
    }

    .course-nav.next {
        right: 0px;
    }

    .courses-carousel-container.search-active {
        height: auto !important;
    }

    .courses-carousel-container.search-active .courses-wrapper {
        grid-template-columns: 1fr;
        /* 1 Col on mobile search */
        height: auto !important;
    }
}

/* --- Main Banner Slider --- */
.banner-wrapper {
    overflow-y: hidden;
    /* Clean cut vertical */
    overflow-x: visible;
    /* But we may want overflow-x hidden? Actually keep it hidden to be safe */
    overflow: hidden;
    position: absolute;
    /* Keep existing pos */
}

.banner-slide {
    display: none;
    /* Hidden by default */
    width: 100%;
    transition: opacity 0.4s ease-out;
    /* Snappier transition */
    position: relative;
    /* Ensure child CTA positioning references this slide */
}

.banner-slide.active {
    display: block;
    /* Show active */
    animation: fadeInSlide 0.6s;
    /* Snappier animation */
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modern Banner Navigation Arrows */
.banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    /* Glass effect */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 20;
    /* Ensure above image */
    transition: all 0.3s ease;
    display: flex;
    /* Centering icon */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.banner-nav:hover {
    background: #00995D;
    /* Brand Green */
    border-color: #00995D;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(0, 153, 93, 0.6);
}

.banner-nav.prev {
    left: 20px;
    /* Inside the banner area */
}

.banner-nav.next {
    right: 20px;
    /* Inside the banner area */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .banner-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        background: rgba(0, 0, 0, 0.4);
        /* Darker for better contrast on mobile */
    }

    .banner-nav.prev {
        left: 10px;
    }

    .banner-nav.next {
        right: 10px;
    }
}

/* --- Main Footer --- */
.main-footer {
    background-color: #031F4B;
    /* Dark Brand Blue */
    width: 100%;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.footer-text {
    margin: 0;
}

.dev-credit {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.85rem;
}

.dev-credit strong {
    color: #00995D;
    /* Brand Green */
    font-weight: 700;
}

.dev-credit:hover {
    color: #00995D;
    transform: translateY(-2px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .main-footer {
        padding-bottom: 90px;
        /* Make space for fixed tracking/Wa button if needed */
    }
}

/* --- Banners Section (Fold 5) --- */
.banners-section {
    background-color: #ffffff;
    padding: 80px 20px;
    position: relative;
    z-index: 5;
}

.banner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.banner-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    cursor: pointer;
    background: #000;
    /* Placeholder bg */
}

.banner-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.banner-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 153, 93, 0.2);
    /* Subtle green glow */
}

.banner-card:hover img {
    transform: scale(1.05);
}

/* Shine Effect */
.shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
    z-index: 2;
}

.banner-card:hover .shine-effect {
    animation: shineMove 0.7s;
}

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

    100% {
        left: 200%;
    }
}

@media (max-width: 768px) {
    .banner-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .banners-section {
        padding: 50px 20px;
    }
}

@media (max-width: 768px) {
    .top-bar-marquee {
        background-color: #00995D !important;
        /* Force Green on Mobile */
        height: 50px;
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
    }
}

/* --- Mobile Fixes (Appended) --- */
.custom-shape-divider-bottom-1689966835 .shape-fill-white {
    fill: #ffffff !important;
}

.marquee-content {
    flex-wrap: nowrap !important;
}

@media (max-width: 768px) {
    .top-bar-marquee {
        background-color: #00995D !important;
        height: auto !important;
        min-height: 40px;
        padding: 10px 0;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .marquee-content span {
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

/* --- Video Enhancement (Override) --- */
/* Filter removed for raw quality */
/* Overlay opacity adjusted in main styles */

/* --- FAQ Section --- */
.faq-section {
    background-color: #f9f9f9;
    padding: 80px 20px;
}

.faq-accordion {
    max-width: 800px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.accordion-item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.accordion-header {
    width: 100%;
    padding: 20px;
    background: #fff;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    transition: all 0.3s ease;
    text-align: left;
}

.accordion-header:hover {
    color: #00995D;
    /* Brand Green */
}

.accordion-header i {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
    color: #00995D;
}

.accordion-header.active i {
    transform: rotate(45deg);
    /* Turn (+) to (x) */
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fff;
}

.accordion-content p {
    padding: 0 20px 20px;
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
}

/* --- Center Text Utility --- */
.center-text {
    text-align: center;
    width: 100%;
    display: block;
}

/* --- Wave Divider Fix & Card Animation Simplification --- */
.custom-shape-divider-bottom-1689966835 {
    bottom: -1px !important;
    /* Fix potential pixel gap */
    width: 101%;
    /* Ensure full coverage */
    left: -1px;
}

.course-card:hover {
    transform: scale(1.02) !important;
    /* Override any complex tilt */
    transition: transform 0.3s ease-out !important;
}

/* --- Atendimento Banner Section --- */
.atendimento-section {
    width: 100%;
    display: block;
    line-height: 0;
}

.atendimento-section picture {
    cursor: pointer;
    display: block;
    transition: filter 0.3s;
}

.atendimento-section picture:hover {
    filter: brightness(0.9);
}

.atendimento-section img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Mobile Fixes Round 2 --- */
@media (max-width: 768px) {

    /* Fold 6 (Conquistas/Banners) */
    .banner-grid {
        grid-template-columns: 1fr;
        padding-left: 10px;
        padding-right: 10px;
    }

    .banners-section {
        padding: 40px 10px;
    }

    /* Fold 7 (Atendimento) - Ensure Mobile Image Shows */
    .atendimento-section picture img {
        width: 100% !important;
        display: block !important;
    }
}

/* --- Deep Mobile Optimization (Appended) --- */
@media (max-width: 768px) {

    /* 1. Global Typography & Spacing */
    .section-title {
        font-size: 1.8rem !important;
        /* Prevent huge headers */
        margin-bottom: 30px;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 2. VIP Section Refinement */
    .vip-section {
        padding: 40px 15px 60px !important;
        /* Reduced padding */
    }

    .vip-card {
        padding: 25px 20px !important;
        /* Compact card */
    }

    .discount-display .big {
        font-size: 4rem !important;
        /* Scale down 55% */
        line-height: 1.1;
    }

    .meter-label {
        flex-direction: column;
        /* Stack label and percent */
        align-items: center;
        gap: 5px;
    }

    /* 3. Gallery (Structure) Navigation */
    .nav-btn {
        width: 50px !important;
        /* Larger touch target */
        height: 50px !important;
        font-size: 1.2rem !important;
        background: rgba(0, 0, 0, 0.6) !important;
        /* Better contrast */
    }

    .nav-btn.prev-btn {
        left: 10px !important;
    }

    .nav-btn.next-btn {
        right: 10px !important;
    }

    /* 4. FAQ Touch Targets */
    .accordion-header {
        padding: 20px 15px !important;
        /* More tap area */
        min-height: 60px;
        /* Standardize height */
    }

    .accordion-header span {
        font-size: 0.95rem;
        /* Readable text */
        max-width: 90%;
        /* Prevent overlap with icon */
    }

    /* 5. General Buttons */
    .cta-button {
        padding: 12px 20px !important;
        font-size: 0.85rem !important;
        width: 85% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 15% !important;
        white-space: normal !important;
        text-align: center !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
    }
}

/* --- Final Wave Fix --- */
.custom-shape-divider-bottom-1689966835 svg {
    height: 120px !important;
    /* Increase height for better coverage */
    transform: none !important;
    /* Reset internal transforms to predictable state */
}

.custom-shape-divider-bottom-1689966835 {
    transform: none !important;
    /* Ensure flat base is bottom */
    bottom: -1px !important;
}

/* --- Lead Capture Popup (WhatsApp Style) --- */
.phone-frame {
    background: #E5DDD5;
    width: 100%;
    max-width: 400px;
    height: auto;
    max-height: 90vh;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    position: relative;
    animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wa-header {
    background: #075E54;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.wa-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid white;
}

.wa-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.wa-info p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.9;
}

.wa-close {
    margin-left: auto;
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.wa-body {
    padding: 20px;
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    background-size: cover;
    flex: 1;
    overflow-y: auto;
}

.date-divider {
    text-align: center;
    margin-bottom: 20px;
}

.date-divider span {
    background: #dbe4ebb8;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: #555;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.chat-bubble {
    background: white;
    padding: 10px 15px;
    border-radius: 0 10px 10px 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #333;
    width: fit-content;
    max-width: 85%;
    position: relative;
}

.chat-bubble.received {
    border-radius: 0 10px 10px 10px;
}

.chat-bubble.received::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid white;
    border-left: 10px solid transparent;
}

/* User Form Styling */
#lead-form {
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    color: #075E54;
    font-weight: 700;
    margin-bottom: 5px;
    text-align: left;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.95rem;
    outline: none;
    transition: border 0.3s;
}

.input-group input:focus,
.input-group select:focus {
    border-color: #075E54;
}

.error-text {
    color: #c0392b;
    font-size: 0.8rem;
    display: block;
    margin-top: 5px;
}

.wa-submit-btn {
    background: #00995D;
    /* Use Brand Green instead of strict WhatsApp teal for brand connection */
    color: white;
    border: none;
    width: 100%;
    padding: 12px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.wa-submit-btn:hover {
    transform: scale(1.02);
    background: #008752;
}

.secure-norton {
    text-align: center;
    font-size: 0.75rem;
    color: #777;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

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

/* --- Wave Separation & Final Fixes --- */
.wave-video,
.wave-vip {
    transform: rotate(180deg) !important;
    bottom: -2px !important;
}

.wave-video svg,
.wave-vip svg {
    transform: rotateY(180deg) !important;
    height: 120px !important;
}

/* Fix Hidden Courses */
@media (max-width: 768px) {
    .course-card.mobile-hidden {
        display: flex !important;
        /* Re-enable visibility */
    }
}

/* --- Conversion Features (CRO) --- */
.conversion-actions-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px auto 40px;
    padding: 0 20px;
    flex-wrap: wrap;
    max-width: 900px;
}

.conversion-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 300px;
    border: 1px solid rgba(0, 153, 93, 0.1);
    transition: transform 0.3s;
}

.conversion-card:hover {
    transform: translateY(-5px);
    border-color: #00995D;
}

.conversion-card i {
    font-size: 2rem;
    color: #00995D;
}

.conversion-card h4 {
    margin: 0 0 5px;
    font-size: 1.1rem;
    color: #031F4B;
}

.conversion-card p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

.conv-btn {
    margin-left: auto;
    background: #00995D;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.pulsate {
    animation: pulsate 2s infinite;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 153, 93, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(0, 153, 93, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 153, 93, 0);
    }
}

/* Scarcity Bar */
.scarcity-bar-container {
    width: 100%;
    background: #eee;
    height: 6px;
    border-radius: 3px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

.scarcity-bar {
    height: 100%;
    background: #ff4757;
    border-radius: 3px;
}

.scarcity-text {
    font-size: 0.7rem;
    color: #ff4757;
    font-weight: 700;
    display: block;
    margin-top: 4px;
    text-align: right;
}

/* --- Vocational Test Modal (Premium Redesign) --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Darker backdrop for focus */
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.popup-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.quiz-content {
    background: #fff;
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: quizPopEntry 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    overflow: visible;
    /* Important for close button */
}

@keyframes quizPopEntry {
    from {
        transform: scale(0.8) translateY(20px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Close Button - Floated Outside/Edge */
.quiz-content .close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: #FF4757;
    color: white;
    border-radius: 50%;
    border: 2px solid #fff;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    line-height: 1;
    z-index: 10;
}

.plugin-back-btn,
.quiz-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    color: #999;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 600;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 5;
}

.quiz-back-btn:hover {
    color: #031F4B;
}

.quiz-content .close-btn:hover {
    transform: scale(1.1) rotate(90deg);
    background: #ff6b81;
}

/* Header */
.quiz-header h3 {
    font-size: 1.4rem;
    color: #031F4B;
    margin-bottom: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 30px;
    overflow: hidden;
}

.progress-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, #00995D, #00C853);
    transition: width 0.5s ease;
}

/* Questions */
.quiz-step h4 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.5;
    font-weight: 700;
}

/* Options Grid */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-option {
    background: #fff;
    border: 2px solid #e0e0e0;
    padding: 18px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    font-weight: 600;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    align-items: center;
    width: 100%;
}

.quiz-option:hover {
    border-color: #00995D;
    background: #f0fdf4;
    /* Light Green tint */
    color: #00995D;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 153, 93, 0.1);
}

.quiz-option:active {
    transform: scale(0.98);
}

/* Result Form */
#quiz-result-form {
    animation: fadeIn 0.5s;
}

#quiz-result-form h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #031F4B;
}

#quiz-result-form p {
    color: #666;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

/* Input Fields */
#quiz-lead-form .input-group {
    margin-bottom: 15px;
    text-align: left;
}

#quiz-lead-form input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1rem;
    transition: border 0.3s;
    background: #f9f9f9;
}

#quiz-lead-form input:focus {
    border-color: #00995D;
    background: #fff;
    outline: none;
}

@media (max-width: 768px) {
    .quiz-content {
        padding: 25px 20px;
        max-width: 90%;
    }

    .quiz-header h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .conversion-actions-container {
        flex-direction: column;
        padding: 0 10px;
    }

    .conversion-card {
        min-width: unset;
        width: 100%;
    }
}

/* --- FIXES (Step 112) --- */

/* Scroll To Top Button - Small, Discrete, Bottom Left */
.scroll-top-btn {
    position: fixed !important;
    bottom: 25px !important;
    left: 25px !important;
    right: auto !important;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(3, 31, 75, 0.8) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 1.2rem !important;
    z-index: 9999 !important;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.scroll-top-btn.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.scroll-top-btn:hover {
    background-color: #00995D !important;
    transform: translateY(-3px);
}

/* Footer Colors - Blue to Green */
.footer-info a,
.contact-phone,
.footer-address {
    color: #4cd137 !important;
}

.footer-info a:hover {
    color: #fff !important;
}

/* WhatsApp Position Fix (Ensure it doesn't overlap if on left) 
   User implied WA is on LEFT. If so, Scroll needs to be next to it.
   If WA is fixed left: 20px, Scroll should be left: 80px.
   If WA is fixed right: 20px, Scroll is fine at left: 25px.
   I will leave Scroll at Left: 25px. 
*/


/* FORCE CTA BUTTON ANIMATION FIX */
@keyframes buttonColorCycle {
    0% {
        background-color: #00995D;
        color: #ffffff;
    }

    33% {
        background-color: #031F4B;
        color: #ffffff;
    }

    /* Blue */
    66% {
        background-color: #ffffff;
        color: #031F4B;
    }

    /* White */
    100% {
        background-color: #00995D;
        color: #ffffff;
    }
}

.cta-button {
    animation: buttonColorCycle 5s infinite ease-in-out, pulse 2s infinite !important;
}


/* PROFESSIONAL FOOTER LAYOUT OVERRIDE */
.footer-emec {
    display: flex;
    justify-content: center;
}

.emec-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    width: 100%;
    max-width: 160px;
    transition: transform 0.3s ease;
}

.emec-box:hover {
    transform: translateY(-5px);
    border-color: #00995D;
}

.emec-header {
    font-size: 0.8rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.emec-header i {
    color: #00995D;
}

.emec-qrcode img {
    width: 100%;
    border-radius: 8px;
    background: #fff;
    padding: 5px;
}

/* Column Distribution - Desktop */
@media (min-width: 992px) {
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.5fr 1fr !important;
        gap: 60px !important;
        align-items: center !important;
    }

    .footer-emec {
        justify-content: flex-start !important;
    }

    .footer-info {
        text-align: center !important;
    }

    .footer-contact {
        align-items: flex-end !important;
        text-align: right !important;
    }
}

/* Responsive Stacking - Tablet/Mobile */
@media (max-width: 991px) {
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        text-align: center !important;
        align-items: center !important;
    }

    .footer-contact {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer-contact .contact-form-wrapper {
        width: 100% !important;
        max-width: 400px !important;
    }
}

/* Professional Social Icons */
.footer-socials {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-icon:hover {
    background: #00995D;
    color: #fff;
    transform: scale(1.15);
}

/* Contact Form Styling - Professional */
.contact-form-wrapper p {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}

#footer-lead-form {
    display: grid;
    gap: 10px;
}

#footer-lead-form input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    width: 100%;
    transition: all 0.3s;
}

#footer-lead-form input:focus {
    border-color: #00995D;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

#footer-lead-form button {
    background: #00995D;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

#footer-lead-form button:hover {
    background: #007a4a;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 153, 93, 0.3);
}

/* Legal Text Distribution */
.footer-legal {
    max-width: 500px;
    margin: 15px auto;
    font-size: 0.75rem;
    opacity: 0.7;
    line-height: 1.5;
}

.footer-cnpj {
    font-size: 0.8rem;
    opacity: 0.8;
    display: block;
    margin-top: 5px;
}




/* --- PROFESSIONAL FOOTER STYLES (Consolidated) --- */
.main-footer {
    background-color: #031F4B;
    color: #fff;
    padding: 60px 0 30px;
    margin-top: 50px;
    position: relative;
    overflow: hidden;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    /* Vertically center the columns */
}

/* Hide e-MEC to match the user's reference image */
.footer-emec {
    display: none;
}

/* Left Column: Info */
.footer-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-info h2 {
    font-size: 2.5rem;
    margin-bottom: 5px;
    font-weight: 800;
    letter-spacing: 1px;
}

.footer-slogan {
    font-style: italic;
    color: #00995D;
    margin-bottom: 25px;
    font-size: 1.1rem;
    font-weight: 500;
}

.footer-address p {
    color: #00995D;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1rem;
}

.footer-legal {
    font-size: 0.75rem;
    color: #00995D;
    /* Matches image text color */
    opacity: 0.8;
    text-transform: uppercase;
    max-width: 350px;
    line-height: 1.4;
    margin-bottom: 5px;
}

.footer-cnpj {
    font-size: 0.75rem;
    color: #00995D;
    opacity: 0.7;
    margin-bottom: 25px;
}

.footer-socials {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.social-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease;
    font-size: 1.2rem;
}

.social-icon:hover {
    background: #00995D;
    transform: translateY(-3px);
}

/* Right Column: Contact */
.footer-contact {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center content in the right column */
}

.contact-header {
    text-align: center;
    margin-bottom: 20px;
}

.contact-header p {
    font-size: 1rem;
    margin-bottom: 5px;
    opacity: 0.9;
}

.contact-phone {
    color: #00995D;
    font-size: 1.6rem;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.contact-form-wrapper {
    width: 100%;
    max-width: 350px;
    /* Limit form width */
}

.contact-form-wrapper p {
    margin-bottom: 15px;
    font-weight: 600;
    text-align: center;
    /* Image shows "Deixe seu contato" centered */
    display: none;
    /* The image has a label "Entre em contato" above phone, and "Deixe seu contato" above form? Actually image shows "Deixe seu contato" above input. I'll keep it. */
    display: block;
}

#footer-lead-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#footer-lead-form input {
    background: rgba(3, 31, 75, 0.6);
    /* Darker blue background for inputs */
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 0.95rem;
    width: 100%;
}

#footer-lead-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#footer-lead-form button {
    background: #00995D;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 6px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: 0.3s;
    margin-top: 5px;
}

#footer-lead-form button:hover {
    background: #00b36e;
    box-shadow: 0 4px 15px rgba(0, 179, 110, 0.3);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 50px;
    padding-top: 25px;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom strong {
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .footer-info,
    .footer-contact {
        align-items: center;
        text-align: center;
    }

    #footer-lead-form button {
        width: 100%;
    }
}

.contact-phone {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 20px;
}

#footer-lead-form {
    display: grid;
    gap: 10px;
    width: 100%;
}

#footer-lead-form input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px;
    border-radius: 8px;
}

#footer-lead-form button {
    background: #00995D;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
}

/* --- FAQ Accordion Sytles --- */

.accordion-item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #eee;
}

.accordion-header {
    width: 100%;
    padding: 20px;
    background: #fff;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    text-align: left;
    transition: background 0.3s;
}

.accordion-header:hover {
    background: #f9f9f9;
}

.accordion-header i {
    color: #00995D;
    transition: transform 0.3s;
}

.accordion-header.active i {
    transform: rotate(180deg);
    /* Optional rotation */
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fff;
}

.accordion-content p {
    padding: 0 20px 20px;
    color: #555;
    margin: 0;
    line-height: 1.6;
}

/* --- New Pro Cards (Why UniFECAF) - Refined Tab Style --- */
.feature-card-pro {
    background: #fff;
    border-radius: 8px;
    /* Slightly sharper corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    border: 2px solid #2A1A5E;
    /* Dark Purple Border */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Uniform height */
    position: relative;
    text-align: left;
}

.feature-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(42, 26, 94, 0.2);
}

.card-title-tag {
    background-color: #2A1A5E;
    /* Dark Purple */
    color: #fff;
    width: auto;
    /* Fit content */
    max-width: 90%;
    /* Prevent overflow */
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    /* Keep natural case */
    border-bottom-right-radius: 8px;
    /* Tab effect */
}

.card-body {
    padding: 20px 20px;
    color: #333;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-desc {
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
    line-height: 1.4;
}

.card-details {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.read-more-bar {
    width: 100%;
    background-color: #2A1A5E;
    color: #fff;
    border: none;
    padding: 8px 0;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.read-more-bar:hover {
    background-color: #3b2580;
}

.read-more-bar i {
    transition: transform 0.3s;
}

.read-more-bar.active i {
    transform: rotate(180deg);
}

/* --- Course Card Buttons (New Layout) --- */
.course-card .buttons-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
}

.course-btn-details {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 100%;
}

.course-btn-details:hover {
    background: #fff;
    color: #031F4B;
}

.course-btn-subscribe {
    background: #00995D;
    border: 2px solid #00995D;
    /* Keep size consistent */
    color: #fff;
    padding: 10px;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 100%;
}

.course-btn-subscribe:hover {
    background: #007a4a;
    border-color: #007a4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 153, 93, 0.3);
}

/* --- Course Details Modal --- */
.course-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.course-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.course-modal {
    background: #fff;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.course-modal-overlay.active .course-modal {
    transform: translateY(0);
}

.course-modal-header {
    background: #031F4B;
    color: #fff;
    padding: 20px;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.course-modal-title h2 {
    font-size: 1.5rem;
    margin: 0;
    font-weight: 800;
}

.course-modal-title span {
    font-size: 0.9rem;
    background: #00995D;
    padding: 3px 10px;
    border-radius: 12px;
    margin-left: 10px;
    font-weight: 600;
    vertical-align: middle;
}

.course-modal-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s;
}

.course-modal-close:hover {
    color: #00995D;
}

.course-modal-body {
    padding: 30px;
}

.course-section-title {
    color: #031F4B;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    border-left: 5px solid #00995D;
    padding-left: 10px;
    margin-top: 20px;
}

.course-section-title:first-child {
    margin-top: 0;
}

.course-market-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
    white-space: pre-line;
    /* Handle line breaks */
}

.curriculum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.curriculum-group {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #eee;
}

.curriculum-group h4 {
    color: #031F4B;
    font-size: 1rem;
    margin-bottom: 10px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

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

.curriculum-list li {
    font-size: 0.9rem;
    color: #666;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

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

.curriculum-list li::before {
    content: "•";
    color: #00995D;
    font-weight: bold;
    margin-right: 8px;
}

@media (max-width: 768px) {
    .curriculum-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Promo Countdown Timer --- */
.promo-timer-container {
    width: 90%;
    max-width: 600px;
    margin: 40px auto 20px;
    background: #fff;
    border: 2px solid #FF5722;
    /* Warning Orange */
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(255, 87, 34, 0.2);
    position: relative;
    overflow: hidden;
}

/* Pulsing warning effect */
@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 87, 34, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
    }
}

.promo-timer-container {
    animation: borderPulse 2s infinite;
}

.promo-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #FF5722;
}

.promo-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.fire-icon {
    font-size: 1.5rem;
    color: #FF5722;
    filter: drop-shadow(0 0 5px rgba(255, 87, 34, 0.5));
    animation: fireFlicker 1.5s infinite alternate;
}

@keyframes fireFlicker {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.countdown-wrapper {
    background: linear-gradient(to bottom, #fff, #fafafa);
    border-radius: 12px;
    padding: 10px;
}

.countdown-label {
    color: #FF5722;
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.countdown-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.countdown-block {
    background: #031F4B;
    /* UniFECAF Navy */
    color: #fff;
    padding: 12px 15px;
    border-radius: 12px;
    min-width: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 10px rgba(3, 31, 75, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

/* Shine effect on blocks */
.countdown-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 12px 12px 0 0;
}

.cd-num {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    /* Monospaced digits */
}

.cd-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-top: 5px;
    opacity: 0.8;
    font-weight: 600;
    letter-spacing: 0.5px;
}

@media (max-width: 480px) {
    .promo-timer-container {
        padding: 15px;
        margin: 30px auto;
        width: 95%;
    }

    .promo-header h3 {
        font-size: 1.1rem;
    }

    .countdown-grid {
        gap: 8px;
    }

    .countdown-block {
        min-width: 60px;
        padding: 10px 8px;
    }

    .cd-num {
        font-size: 1.5rem;
    }

    .cd-label {
        font-size: 0.6rem;
    }
}

/* --- Hero Section & Filter Overhaul --- */

/* Hero Section Container (Replaces Video Container) */
.hero-section {
    position: relative;
    width: 100%;
    /* height: calc(100vh - 35px); Removed to let content dictate height if needed, but keeping consistent for now */
    height: auto;
    min-height: 85vh;
    /* Increased height for fold 1 */
    background-color: #f0f2f5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 100px;
    /* Ensure spacing between filter and next section */
}

/* Adjust Banner Wrapper for Filter Space */
.banner-wrapper {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 90%;
    max-width: 1150px;
    /* Reduced to 1150px */
    margin: 30px auto 0;
    height: auto;
    z-index: 1;
}

.hero-banner-img {
    height: auto;
    min-height: 275px;
    /* Increased by 10% (was 250px) */
    object-fit: cover;
    object-position: center top;
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: opacity 1.2s ease-in-out, transform 1.2s ease-out;
    /* Smooth transitions */
}

/* Remove old video overlay and elements */
.video-container,
.overlay,
#bg-video {
    display: none !important;
}

/* --- Course Filter Component --- */
.hero-course-filter {
    position: relative;
    width: 90%;
    max-width: 1100px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    margin-top: -160px;
    /* Significantly higher to clear green bar */
    z-index: 10;
    padding: 0;
    /* overflow: hidden; Removed to allow dropdowns to overflow */
    /* For tab rounded corners */
    animation: slideUpFade 0.8s ease-out;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Tabs */
.filter-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    border-radius: 20px 20px 0 0;
    /* Added to keep rounded corners at top */
}

.filter-tab {
    flex: 1;
    padding: 20px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 700;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-tab.active {
    background: #fff;
    color: #00995D;
    /* Theme Green */
    box-shadow: 0 -4px 0 #00995D inset;
    /* Top border overlap trick or bottom inset */
    /* Actually bottom border looks standard */
    border-bottom: 3px solid #00995D;
}

.filter-tab:hover:not(.active) {
    background: #e9ecef;
    color: #031F4B;
}

/* Filter Body */
.filter-body {
    padding: 30px 40px;
}

.filter-row {
    display: flex;
    gap: 30px;
    align-items: flex-end;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.filter-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #031F4B;
    margin-bottom: 10px;
    display: block;
}

/* Inputs & Selects */
.select-wrapper,
.searchable-select {
    position: relative;
}

.select-wrapper select,
.searchable-select input {
    width: 100%;
    padding: 15px 15px 15px 45px;
    /* Space for icon */
    border: 2px solid #eee;
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    color: #333;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.select-wrapper select:focus,
.searchable-select input:focus {
    border-color: #00995D;
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 153, 93, 0.1);
}

.select-icon,
.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
}

.select-wrapper .select-icon {
    /* Chevron for select usually on right, but custom design might put on left. 
       Standard UX is right. Let's put a custom chevron on right and maybe an icon on left? 
       Reference image shows no icon on left for "Escolha areas". 
       Let's stick to standard Right Chevron for Select, Left Search Icon for Search. 
    */
    left: auto;
    right: 15px;
}

.select-wrapper select {
    padding-left: 15px;
    /* No left icon */
}

/* Search Suggestions Dropdown */
.suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-height: 350px;
    /* Increased height for grouped view */
    overflow-y: auto;
    z-index: 100;
    margin-top: 10px;
    /* padding: 10px; removed padding to let header flush */
}

.suggestion-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: #333;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #f5f7fa;
    color: #00995D;
    padding-left: 25px;
    /* Slight movement on hover */
}

.suggestion-category-header {
    background-color: #f0f2f5;
    color: #031F4B;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 8px 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: sticky;
    top: 0;
    z-index: 1;
    /* Keep header on top when scrolling within list */
    border-bottom: 1px solid #e0e0e0;
}

.suggestion-badge {
    font-size: 0.75rem;
    background: #031F4B;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
}

/* Button */
.filter-search-btn {
    padding: 16px 40px;
    background: #031F4B;
    /* Dark Blue */
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(3, 31, 75, 0.3);
}

.filter-search-btn:hover {
    background: #00995D;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 153, 93, 0.4);
}

/* Mobile Responsiveness for Filter */
@media (max-width: 768px) {
    .banner-wrapper {
        min-height: auto;
    }

    .hero-banner-img {
        min-height: 250px;
        /* Smaller on mobile */
    }

    .hero-course-filter {
        width: 95%;
        margin-top: -40px;
        /* Less overlap */
    }

    .filter-tabs {
        flex-direction: row;
        /* Keep row */
    }

    .filter-tab {
        font-size: 0.85rem;
        padding: 15px 10px;
    }

    .filter-row {
        flex-direction: column;
        /* Stack inputs */
        gap: 20px;
        align-items: stretch;
        /* Full width */
    }

    .filter-body {
        padding: 25px 20px;
    }

    .filter-search-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Simple Course Info Modal (Added Dynamically) --- */
.simple-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    /* Above hero filter */
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.simple-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.simple-modal-content {
    background: #fff;
    width: 90%;
    max-width: 450px;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.simple-modal-overlay.active .simple-modal-content {
    transform: translateY(0);
}

.simple-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
}

.simple-modal-close:hover {
    color: #333;
}

.simple-modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #031F4B;
    margin-bottom: 5px;
}

.simple-modal-tag {
    display: inline-block;
    background: #e0f2f1;
    color: #00995D;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.simple-modal-btn {
    width: 100%;
    padding: 15px;
    background: #00995D;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.simple-modal-btn:hover {
    background: #007a4a;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 153, 93, 0.3);
}