/* hero-cla.css */
* {
    font-family: 'Mantri', sans-serif !important;
}

.cla-hero {
    font-family: 'Mantri', sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-top: 80px; /* offset for header */
    z-index: 1; /* Garantir que o hero fique acima do vídeo */
}

.cla-hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: radial-gradient(ellipse at bottom left, rgba(54, 12, 17, 0.95) 0%, rgba(54, 12, 17, 0) 60%);
    z-index: -1;
    pointer-events: none;
}

.cla-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align bottom */
    height: 100%;
    padding-bottom: 80px;
}

/* Left Content */
.cla-left-content {
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.cla-subtitle {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 8px;
}

.cla-title {
    font-size: 64px;
    font-weight: 500;
    line-height: 1.1;
    color: #fff;
}

.cla-description {
    font-size: 18px;
    font-weight: 400;
    color: #eaeaea;
    line-height: 1.5;
    max-width: 600px;
}

/* Buttons */
.cla-buttons {
    display: flex;
    gap: 16px;
}

.cla-btn {
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cla-btn-solid {
    background-color: #f1f1f1;
    color: #000;
    border: 1px solid #f1f1f1;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Reflexo espelhado */
.cla-btn-solid::after {
    content: '';
    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.8) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    z-index: 2;
    transition: none;
}

.cla-btn-solid:hover {
    background-color: #fff;
    /* Efeito Neon */
    box-shadow: 0 0 15px rgba(255,255,255,0.8), 0 0 30px rgba(255,255,255,0.6), 0 0 45px rgba(255,255,255,0.4);
    transform: translateY(-2px);
}

.cla-btn-solid:hover::after {
    left: 200%;
    transition: left 0.7s ease-in-out;
}

.cla-btn-outline {
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cla-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* Right Content - Cards */
.cla-right-content {
    display: flex;
    align-items: flex-end;
}

.cla-cards-container {
    display: flex;
    gap: 24px;
}

.cla-glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px 24px;
    min-width: 160px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: transform 0.3s ease;
}

.cla-glass-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
}

.cla-card-value {
    margin-bottom: 4px;
}

.cla-card-value .val {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
}

.cla-card-value .unit {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ccc;
    margin-left: 4px;
}

.cla-card-label {
    font-size: 13px;
    color: #aaa;
    font-weight: 400;
}

/* Scroll Indicator */
.cla-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 24px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-10px) translateX(-50%);
    }
    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

/* Navbar Overrides */
.nav {
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 24px auto !important;
    width: 100% !important;
    max-width: 499px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: fixed !important;
    top: 0 !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    height: auto !important;
    min-height: 64px !important;
    padding: 16px 32px !important;
    z-index: 100 !important;
}

.active-nav {
    border-radius: 32px !important; 
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
}

/* Hamburger Menu Override */
.bx {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 32px !important;
    height: 20px !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
}

.bx::before, .bx::after {
    display: none !important;
}

.bx .point {
    width: 100% !important;
    height: 2px !important;
    background-color: #fff !important;
    border-radius: 2px !important;
    position: absolute !important;
    left: 0 !important;
    transition: all 0.3s ease !important;
}

.bx .point-1 {
    top: 0 !important;
}

.bx .point-2, .bx .point-3 {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.bx .point-4 {
    top: 100% !important;
    transform: translateY(-100%) !important;
}

/* Hamburger Active State Override */
.bx .point-1.point-1-active, .bx .point-4.point-4-active {
    opacity: 0 !important;
}

.bx .point-2.point-2-active {
    transform: translateY(-50%) rotate(45deg) !important;
}

.bx .point-3.point-3-active {
    transform: translateY(-50%) rotate(-45deg) !important;
}

/* Responsiveness for mobile */
@media screen and (max-width: 960px) {
    .cla-hero-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .cla-left-content {
        align-items: center;
        margin-bottom: 40px;
    }

    .cla-title {
        font-size: 3rem;
    }

    .cla-cards-container {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Esconder marca d'água no canto do vídeo */
#product-video {
    transform: scale(1.1);
    transform-origin: center center;
}

/* Substituir fundo escuro/sombra do menu original por janela com blur idêntica à navbar */
.menu {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, padding 0.5s ease !important;
}

.active-menu {
    max-height: 500px !important;
    opacity: 1 !important;
    padding: 24px 0 16px 0 !important;
    pointer-events: auto !important;
}

.menu::before {
    display: none !important;
}

/* Novos estilos para o Menu */
.cla-menu {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.cla-menu-links {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: left;
    width: auto;
}

.cla-menu-links .menu-link {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cla-menu-links .menu-link:hover {
    opacity: 0.7;
    transform: translateX(10px);
}

.cla-menu-links .menu-link .icon {
    width: 20px;
    height: 20px;
    fill: #fff;
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* Tamanhos Customizados para a Introdução */
.cla-intro-h6 {
    font-size: 16px !important;
}

.cla-intro-h2 {
    font-size: 58px !important;
}

.cla-intro-h4 {
    font-size: 24px !important;
}

/* Modificação do Fundo Geral do Site e Sombras de Fade */
.bg-black {
    background-color: #000000 !important;
}

.border-fade-y::after {
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%) !important;
}

.border-fade-y::before {
    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%) !important;
}

.div-js-slideshow::after {
    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%) !important;
}

.div-js-slideshow::before {
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%) !important;
}

/* ===== MERCEDES CAR COLOURS ===== */

/* Ruby Red */
.option-ruby {
    border: 2px solid #E8354A;
    background: radial-gradient(circle at 38% 32%, #F04458 0%, #C41230 45%, #7A0B1E 100%);
    box-shadow: 0 0 10px rgba(196, 18, 48, 0.5);
}

/* Sky Blue Metallic */
.option-skyblue {
    border: 2px solid #4A9FD4;
    background: radial-gradient(circle at 38% 32%, #6AB8E8 0%, #1565C0 45%, #0C3A7A 100%);
    box-shadow: 0 0 10px rgba(21, 101, 192, 0.5);
}

/* Liquid Crystal Green */
.option-crystalgreen {
    border: 2px solid #82B89A;
    background: radial-gradient(circle at 38% 32%, #A5CEAF 0%, #4E8C6A 45%, #2A5E3F 100%);
    box-shadow: 0 0 10px rgba(78, 140, 106, 0.5);
}

/* ===== VIDEO SLOT NEON EFFECTS ===== */
.car-video-slot {
    border-radius: 16px;
    transition: box-shadow 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
    transform: scale(0.97);
    opacity: 0.75;
    will-change: transform, box-shadow;
    cursor: pointer;
}

/* Hover neon por cor - puro CSS, zero JavaScript */
.car-slot-ruby:hover {
    transform: scale(1);
    opacity: 1;
    box-shadow:
        0 0 0 2px rgba(196, 18, 48, 0.8),
        0 0 20px 4px rgba(196, 18, 48, 0.6),
        0 0 60px 12px rgba(196, 18, 48, 0.25);
}

.car-slot-skyblue:hover {
    transform: scale(1);
    opacity: 1;
    box-shadow:
        0 0 0 2px rgba(21, 101, 192, 0.9),
        0 0 20px 4px rgba(21, 101, 192, 0.6),
        0 0 60px 12px rgba(21, 101, 192, 0.25);
}

.car-slot-green:hover {
    transform: scale(1);
    opacity: 1;
    box-shadow:
        0 0 0 2px rgba(78, 140, 106, 0.9),
        0 0 20px 4px rgba(78, 140, 106, 0.6),
        0 0 60px 12px rgba(78, 140, 106, 0.25);
}

/* ===== COLOUR BAR - MERCEDES COLOURS ===== */
.color-ruby-red {
    background: linear-gradient(90deg, #7A0B1E 0%, #C41230 40%, #E8354A 70%, #F04458 100%);
    background-size: 200%;
    background-position: left;
    transition: background-position 0.8s ease, opacity 0.5s ease;
    border-color: rgba(196, 18, 48, 0.6) !important;
}
.color-ruby-red:hover { background-position: right; }

.color-sky-blue {
    background: linear-gradient(90deg, #0C3A7A 0%, #1565C0 40%, #4A9FD4 70%, #6AB8E8 100%);
    background-size: 200%;
    background-position: left;
    transition: background-position 0.8s ease, opacity 0.5s ease;
    border-color: rgba(21, 101, 192, 0.6) !important;
}
.color-sky-blue:hover { background-position: right; }

.color-crystal-green {
    background: linear-gradient(90deg, #2A5E3F 0%, #4E8C6A 40%, #82B89A 70%, #A5CEAF 100%);
    background-size: 200%;
    background-position: left;
    transition: background-position 0.8s ease, opacity 0.5s ease;
    border-color: rgba(78, 140, 106, 0.6) !important;
}
.color-crystal-green:hover { background-position: right; }