/* ===================================
   RESPONSIVE HERO SECTION STYLES
   ===================================
   
   Este archivo contiene los estilos responsivos para la sección hero,
   preservando todas las propiedades específicas del diseño original.
*/

.hero-section {
    position: relative; /* Needed for video positioning */
    overflow: hidden; /* Hide video overflow */
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area without distortion */
    z-index: -1; /* Place it behind the content */
}

/* Tablet Styles - 1010px and below */
@media screen and (max-width: 1010px) {
    .responsive-hero {
        width: 100%;
        max-width: 1010px;
        height: auto;
        min-height: 500px;
        padding: 0 20px;
    }
    
    .responsive-hero-bg {
        width: 100%;
        height: auto;
        margin-left: 0;
        object-fit: cover;
    }
    
    /* Hide grid lines on smaller screens */
    .responsive-grid-bg {
        display: none;
    }

    section.hero-section.responsive-hero {
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
        min-height: 775px;
    }
    
    .responsive-hero-content {
        width: 100%;
        margin: 60px 0 0 0;
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        gap: 40px;
        display: flex;
    }
    
    .responsive-hero-left {
        max-width: 100%;
        align-items: center;
    }
    
    .responsive-hero-title {
        width: 100%;
        max-width: 700px;
        font-size: 36px;
        text-align: center;
    }
    
    .responsive-hero-subtitle {
        width: 100%;
        max-width: 600px;
        font-size: 16px;
        text-align: center;
    }
    
    .responsive-hero-form {
        width: 100%;
        max-width: 450px;
        margin-top: 25px;
    }
    
    .responsive-hero-device {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-top: 0;
    }
}

/* Mobile Styles - 768px and below */
@media screen and (max-width: 768px) {
    .responsive-hero {
        padding: 0 15px;
        min-height: 400px;
    }
    
    .responsive-hero-content {
        margin: 40px 0 0 0;
        gap: 30px;
    }
    
    .responsive-hero-title {
        font-size: 28px;
        line-height: 1.2em;
    }
    
    .responsive-hero-subtitle {
        font-size: 14px;
        line-height: 1.4em;
    }
    
    .form-text {
        font-size: 16px;
        text-align: center;
    }
    
    .form-button {
        padding: 15px 20px;
    }

    section.hero-section.responsive-hero {
        min-height: 615px;
    }
    
}

/* Small Mobile Styles - 480px and below */
@media screen and (max-width: 480px) {
    .responsive-hero {
        padding: 0 10px;
    }
    
    .responsive-hero-content {
        margin: 30px 0 0 0;
        gap: 25px;
    }
    
    .responsive-hero-title {
        font-size: 24px;
    }
    
    .responsive-hero-subtitle {
        font-size: 13px;
    }
    
    .responsive-hero-form {
        padding: 15px;
    }
    
    .form-text {
        font-size: 14px;
    }
    
    .form-button {
        padding: 12px 16px;
        font-size: 13px;
    }
    
    h2.why-section-title {
        text-align: center;
    }

    .why-invertox-content {
        margin-top: 100px;
    }
    
}

/* Landscape Mobile Styles */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .responsive-hero {
        min-height: 300px;
    }
    
    .responsive-hero-left {
        flex: 1;
        align-items: flex-start;
    }
    
    .responsive-hero-title {
        font-size: 24px;
        text-align: left;
    }
    
    .responsive-hero-subtitle {
        text-align: left;
    }
    
    .responsive-hero-form {
        flex-direction: row;
        height: 45px;
        padding: 5px 5px 5px 15px;
        gap: 10px;
    }
    
    .form-text {
        text-align: left;
        font-size: 14px;
    }
    
    .form-button {
        width: 120px;
        padding: 10px 15px;
        font-size: 12px;
    }
}

/* Video responsive para desktop y móvil */
.hero-video-desktop {
    display: block;
}

.hero-video-mobile {
    display: none;
}

/* Media query para mostrar video móvil cuando la resolución sea menor a 650px */
@media screen and (max-width: 650px) {
    .hero-video-desktop {
        display: none;
    }
    
    .hero-video-mobile {
        display: block;
        height: 120vh; /* Mayor altura que el video desktop */
        min-height: 800px; /* Altura mínima mayor para móvil */
        object-fit: cover;
    }
}

/* Ajustes adicionales para tabletas */
@media screen and (max-width: 768px) and (min-width: 651px) {
    .hero-video-desktop {
        display: block;
    }
    
    .hero-video-mobile {
        display: none;
    }
}

/* Ensure responsive elements don't break on larger screens */
@media screen and (min-width: 1011px) {
    .responsive-hero,
    .responsive-hero-bg,
    .responsive-hero-content,
    .responsive-hero-left,
    .responsive-hero-title,
    .responsive-hero-subtitle,
    .responsive-hero-form,
    .responsive-hero-device {
        /* Inherit original styles on larger screens */
    }
    
    .responsive-grid-bg {
        display: flex;
    }
}