/* =====================================================
   CONTENEDOR HERO
===================================================== */

.hero-content-wrapper {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    width: 100%;

}


/* =====================================================
   FOTOS LATERALES
===================================================== */

.hero-side-image {

    width: 32%;

}


.hero-side-image img {

    width: 100%;

    height: 450px;

    object-fit: cover;

    border-radius: 12px;

    display: block;

}


.hero-side-image a {

    display: block;

    width: 100%;

    cursor: pointer;

}


/* =====================================================
   FORMULARIO CENTRAL
===================================================== */

.hero-content {

    width: 36%;

    padding: 30px;

}


.hero-content h1 {

    text-align: center;

    margin-bottom: 25px;

}


/* =====================================================
   FORMULARIO
===================================================== */

.search-form {

    width: 100%;

}


.search-form .form-group {

    margin-bottom: 15px;

}


.search-form label {

    display: block;

    margin-bottom: 5px;

}


.search-form input,
.search-form select {

    width: 100%;

    box-sizing: border-box;

}


.search-form button {

    width: 100%;

    margin-top: 10px;

    padding: 10px 15px;

    cursor: pointer;

}


/* =====================================================
   ERRORES
===================================================== */

.search-form .errorlist {

    margin: 5px 0;

    padding: 0;

    list-style: none;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .hero-content-wrapper {

        gap: 15px;

    }


    .hero-side-image {

        width: 30%;

    }


    .hero-content {

        width: 40%;

        padding: 20px;

    }


    .hero-side-image img {

        height: 400px;

    }

}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 900px) {

    /*
       HERO
    */

    .hero {

        width: 100%;

        position: relative;

        overflow: hidden;

        border-radius: 12px;

    }


    /*
       CONTENEDOR

       La primera fotografía ocupará todo
       este espacio como fondo.
    */

    .hero-content-wrapper {

        position: relative;

        display: block;

        width: 100%;

        min-height: 700px;

        padding: 30px 15px;

        box-sizing: border-box;

        overflow: hidden;

        border-radius: 12px;

    }


    /* =================================================
       FOTO DE FONDO
    ================================================= */

    .hero-side-image:first-child {

        display: block;

        position: absolute;

        inset: 0;

        width: 100%;

        height: 100%;

        z-index: 0;

    }


    .hero-side-image:first-child a {

        display: block;

        width: 100%;

        height: 100%;

    }


    .hero-side-image:first-child img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center;

        border-radius: 0;

    }


    /*
       Capa oscura muy ligera sobre la fotografía.
    */

    .hero-side-image:first-child::after {

        content: "";

        position: absolute;

        inset: 0;

        background: rgba(0, 0, 0, 0.15);

        pointer-events: none;

    }


    /* =================================================
       FORMULARIO
    ================================================= */

    .hero-content {

        position: relative;

        z-index: 2;

        width: 100%;

        max-width: 500px;

        margin: 0 auto;

        padding: 10px;

        box-sizing: border-box;

        /*
           Sólo un velo blanco muy ligero.
           La fotografía debe seguir siendo visible.
        */

        background: rgba(255, 255, 255, 0.15);

        border-radius: 12px;

        box-shadow: none;

    }


    /* =================================================
       TÍTULO
    ================================================= */

    .hero-content h1 {

        color: white;

        text-align: center;

        margin-bottom: 25px;

        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);

    }


    /* =================================================
       ETIQUETAS
    ================================================= */

    .search-form label {

        display: inline-block;

        color: white;

        font-weight: 600;

        padding: 3px 7px;

        margin-bottom: 5px;

        background: rgba(0, 0, 0, 0.45);

        border-radius: 5px;

        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);

    }


    /* =================================================
       INPUTS
    ================================================= */

    .search-form input,
    .search-form select {

        width: 100%;

        box-sizing: border-box;

        background: rgba(255, 255, 255, 0.80);

        border: none;

        border-radius: 8px;

        padding: 10px 12px;

    }


    /* =================================================
       BOTÓN
    ================================================= */

    .search-form button {

        width: 100%;

        margin-top: 10px;

        padding: 12px 15px;

        background: rgba(255, 255, 255, 0.80);

        border: none;

        border-radius: 8px;

        font-weight: 600;

        cursor: pointer;

    }


    /* =================================================
       SEGUNDA FOTO
    ================================================= */

    .hero-side-image:last-child {

        display: none;

    }

}


/* =====================================================
   MÓVILES PEQUEÑOS
===================================================== */

@media (max-width: 576px) {

    .hero-content-wrapper {

        min-height: 700px;

        padding: 20px 10px;

    }


    .hero-content {

        padding: 5px;

        background: rgba(255, 255, 255, 0.10);

    }


    .hero-content h1 {

        font-size: 1.6rem;

        margin-bottom: 20px;

    }


    .search-form .form-group {

        margin-bottom: 13px;

    }


    .search-form input,
    .search-form select {

        padding: 10px 12px;

        background: rgba(255, 255, 255, 0.80);

    }


    .search-form button {

        padding: 12px 15px;

        background: rgba(255, 255, 255, 0.80);

    }

}



@media (max-width: 900px) {

    .hero-content,
    .search-form,
    .search-form .form-group {
        background: transparent !important;
    }

}



/* =====================================================
   MENÚ DE USUARIO REGISTRADO EN MÓVIL
===================================================== */

.registered-mobile-menu {

    width: 100%;

    padding: 10px 5px;

    margin-bottom: 10px;

    box-sizing: border-box;

}


.registered-mobile-menu-title {

    text-align: center;

    margin-bottom: 10px;

}


.registered-mobile-menu-links {

    display: flex;

    justify-content: center;

    gap: 8px;

    flex-wrap: wrap;

}


.registered-mobile-menu-links a {

    font-size: 0.85rem;

}


/* =====================================================
   ESCRITORIO
===================================================== */

@media (min-width: 992px) {

    .registered-mobile-menu {

        display: none;

    }

}