/* ==========================================================
   VKMOTOTRAVEL — HERO
   Archivo: assets/css/hero.css
   Versión: 0.1.4
   Video MP4 nativo
   ========================================================== */


/* ----------------------------------------------------------
   1. CONTENEDOR PRINCIPAL
   ---------------------------------------------------------- */

.hero {
    position: relative;
    width: 100%;
    height: clamp(440px, 36vw, 640px);
    overflow: hidden;
    background-color: #3a4d4b;
    isolation: isolate;
}


/* ----------------------------------------------------------
   2. VIDEO MP4
   ---------------------------------------------------------- */

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 20%;
}


/* ----------------------------------------------------------
   3. IMAGEN ALTERNATIVA
   ---------------------------------------------------------- */

.hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* Imagen provisional cuando no hay fotografía */

.hero-placeholder {
    background: linear-gradient(
        125deg,
        #233730 0%,
        #829581 43%,
        #45564b 70%,
        #1a2b2c 100%
    );
}


/* ----------------------------------------------------------
   4. OSCURECIMIENTO DEL VIDEO
   ---------------------------------------------------------- */

.hero-shade {
    position: absolute;
    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        180deg,
        transparent 35%,
        rgba(0, 0, 0, 0.54) 100%
    );

    pointer-events: none;
}


/* ----------------------------------------------------------
   5. CONTENIDO DEL HERO
   ---------------------------------------------------------- */

.hero-copy {
    position: absolute;
    bottom: 12%;
    left: 5%;
    right: 5%;
    z-index: 3;

    color: #fff;
    text-align: center;

    pointer-events: none;
}


/* ----------------------------------------------------------
   6. TÍTULO ESTILO MANUSCRITO
   ---------------------------------------------------------- */

.hero-script {
    margin: 0;

    font-family: cursive;
    font-size: clamp(34px, 5vw, 75px);
    font-style: italic;
    font-weight: 400;
    line-height: 1;
}


/* ----------------------------------------------------------
   7. TÍTULO PRINCIPAL
   ---------------------------------------------------------- */

.hero h1 {
    margin: 1px 0 16px;

    font-size: clamp(19px, 2.6vw, 39px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   8. LÍNEA DECORATIVA
   ---------------------------------------------------------- */

.hero-line {
    width: 300px;
    max-width: 70%;
    height: 2px;
    margin: 0 auto 18px;

    background-color: #fff;
}


/* ----------------------------------------------------------
   9. TEXTO SECUNDARIO
   ---------------------------------------------------------- */

.hero-copy p {
    margin: 0;

    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 1em;
    text-indent: 1em;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */


/* ----------------------------------------------------------
   10. TABLET
   ---------------------------------------------------------- */

@media (max-width: 1023px) {

    .hero-video {
        object-position: center 20%;
    }

}


/* ----------------------------------------------------------
   11. MÓVIL
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .hero {
        height: 480px;
    }

    .hero-video {
        object-position: center center;
    }

    .hero-copy {
        bottom: 12%;
        left: 6%;
        right: 6%;
    }

    .hero h1 {
        letter-spacing: 0.1em;
    }

    .hero-copy p {
        letter-spacing: 0.5em;
        text-indent: 0.5em;
    }

}


/* ----------------------------------------------------------
   12. ACCESIBILIDAD
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .hero-video {
        display: none;
    }

}