/* C:\laragon\www\toricesguard\wp-content\themes\toricesguard\assets\css\style-flotilla.css */

/* EL PADRE JEFE QUE OBLIGA AL LAYOUT */
.hero-premium-flotilla {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

.hero-premium-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* Mata el mosaico */
    z-index: 1;
}

.hero-premium-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Arriba, Centro, Abajo */
    align-items: center;
    padding: 80px 0; /* Espacio para el menú y el pie */
}

/* --- TÍTULOS PREMIUM --- */
.hero-premium-info { text-align: center; }

/* REPLICANDO LOS ESTILOS LITERALES DE TU MOCKUP */
.hero-premium-title.BMW-X5 {
    font-family: 'Michroma', sans-serif !important;
    font-size: clamp(40px, 8vw, 60px) !important; /* Escalado perfecto */
    color: #fff !important;
    -webkit-text-stroke: 1.5px #fff !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.hero-premium-sub.Blindaje-Sub {
    font-family: 'Helvetica Neue', sans-serif !important;
    font-size: clamp(16px, 2.5vw, 20px) !important;
    color: #fff !important;
    font-weight: 300 !important;
    text-align: center !important;
    margin-top: 15px !important;
}

/* --- ESCENA DE FLECHAS --- */
.hero-premium-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1400px; /* Amarra las flechas para que no se escapen */
}

.hero-premium-spacer.spacer-car {
    width: 700px; /* Este hueco deja ver el carro del fondo */
}

/* FLECHAS CORREGIDAS */
.hero-premium-arrow.v-arrow-svg {
    width: 40px !important; /* Evita flechas Godzilla */
    height: auto;
    cursor: pointer;
    filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.4)); /* Les da profundidad */
    transition: 0.3s ease;
}

.hero-premium-arrow.v-arrow-svg:hover { transform: scale(1.1); }

/* --- BOTÓN DE VIDRIO AZUL --- */
.hero-premium-actions {
    display: flex;
    justify-content: center;
}

/* Aseguramos que herede tu estilo .hero__btn--primary */
.hero-premium-actions .hero__btn--primary {
    position: relative;
    z-index: 15;
    background-color: transparent !important; /* Transparente para el vidrio */
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(10px) !important; /* El efecto de vidrio */
    padding: 12px 35px !important;
    border-radius: 50px !important;
}

.hero-premium-actions .hero__btn--primary:hover {
    background-color: rgba(255,255,255,0.1) !important;
}