/* ============================================
   HERO VIDEO IMPACTANTE - BASE
   ============================================ */
:root {
    --hero-height-desktop: 90vh; /* Casi pantalla completa en escritorio */
    --hero-height-mobile: 85vh; /* Un poco menos en móvil para ver que hay scroll */
}

.fsw-hero-video {
    position: relative;
    width: 100%;
    /* Altura mínima para garantizar impacto */
    min-height: var(--hero-height-desktop);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--fsw-light, #fff); /* Aseguramos texto blanco */
}

    /* 1. EL CONTENEDOR DEL VIDEO (Al fondo absoluto) */
    .fsw-hero-video .video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* Nivel más bajo */
    }

        /* El tag de video en sí */
        .fsw-hero-video .video-container video {
            width: 100%;
            height: 100%;
            /* "object-fit: cover" es la MAGIA. 
       Asegura que el video cubra todo el espacio sin deformarse, 
       recortando los bordes si es necesario (crucial para responsive). */
            object-fit: cover;
            /* Un ligero filtro para que no sea tan brillante si el video es muy claro */
            filter: brightness(0.9);
            /* Esto ayuda a evitar parpadeos blancos en algunos navegadores al cargar */
            background-color: #171717;
            /* Transición suave si cambias de src dinámicamente */
            transition: opacity 0.5s ease;
        }


    /* 2. EL OVERLAY (Capa de contraste intermedia) */
    .fsw-hero-video .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* Por encima del video */
        /*
       Aquí está el truco del diseño profesional.
       No usamos un negro plano. Usamos un degradado.
       Más oscuro abajo para que los botones resalten, un poco más claro arriba.
       Ajusta los valores rgba si tu video es muy oscuro o muy claro.
    */
        background: linear-gradient( to bottom, rgba(23, 23, 23, 0.5) 0%, /* Arriba: un poco transparente */
        rgba(23, 23, 23, 0.85) 100% /* Abajo: más oscuro para contraste del texto */
        );
        /* Opcional: un poco de textura o desenfoque si quieres */
        /* backdrop-filter: blur(3px); */
    }


    /* 3. EL CONTENIDO (Texto al frente) */
    .fsw-hero-video .hero-content {
        position: relative;
        z-index: 2; /* Por encima de todo */
        padding-top: 6rem; /* Espacio para el navbar si es fixed */
        padding-bottom: 4rem;
    }

    /* Tipografía Dramática */
    .fsw-hero-video h1 {
        font-family: var(--fsw-font-heading, sans-serif);
        /* Usamos clamp para un escalado de texto inmenso pero controlado */
        font-size: clamp(2.5rem, 6vw, 5rem);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 1.5rem;
        text-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Pequeña sombra para separar del fondo */
    }

    .fsw-hero-video p.lead {
        font-size: clamp(1.15rem, 2vw, 1.5rem);
        font-weight: 400;
        opacity: 0.95;
        max-width: 800px; /* Evita que el texto sea demasiado ancho para leer */
        margin-left: auto;
        margin-right: auto;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    /* Botones más grandes para acompañar el impacto */
    .fsw-hero-video .btn-lg {
        padding: 0.8rem 2rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-width: 2px; /* Bordes más gruesos en el outline */
    }

/* ============================================
   ANIMACIONES (Reutilizadas y mejoradas)
   ============================================ */
.animate-fadeUp {
    animation: fadeUpDramatic 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

@keyframes fadeUpDramatic {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
    }

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

/* ============================================
   RESPONSIVE REFINADO
   ============================================ */
@media (max-width: 768px) {
    :root {
        /* Ajustamos la altura en móviles */
        --hero-height-desktop: var(--hero-height-mobile);
    }

    .fsw-hero-video .hero-content {
        padding-top: 8rem; /* Más espacio arriba en móvil si el menú es alto */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* En móviles muy pequeños, apilamos los botones */
    @media (max-width: 450px) {
        .fsw-hero-video .d-flex {
            flex-direction: column;
            width: 100%;
        }

        .fsw-hero-video .btn {
            width: 100%;
            margin-right: 0 !important;
            margin-bottom: 1rem;
        }
    }
}