/*
    -------------------------------------------------------
        HERO
    -------------------------------------------------------
*/
.hero {
    width: 100%;
    height: 100vh;

    background-image: url("../image/hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;

    position: relative;
}


/*
    -------------------------------------------------------
        ESTILOS SECCION ABOUT US
    -------------------------------------------------------
*/

.about-us {
    background-color: black;

    width: 100%;
    height: 100%;

    display: flex;
    flex-wrap: nowrap;

    background-image: url("../image/HexagonoPatron.svg");
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: right bottom;
}

.contendio-about {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;

    width: 70%;
    color: white;
}

.texto-about,
.imagen-about {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 2rem;
    padding: 2rem;
}

/*
    -------------------------------------------------------
        ESTILOS SECCION NUESTRA INSPIRACION
    -------------------------------------------------------
*/

.our-inspiration {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    margin-top: 2rem;
    margin-bottom: 2rem;
}

.cartaIMG1 {
    background-image: url("../image/Cassini.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.cartaIMG2 {
    background-image: url("../image/Charles_Messier.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.cartaIMG3 {
    background-image: url("../image/herschel-portada.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}



.btn-carta {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: .7rem;
}

.btn-carta img {
    display: none;
}

.btn-carta:hover img {
    display: block;
}

/*
    -------------------------------------------------------
        ESTILOS SECCION LINEA DEL TIEMPO
    -------------------------------------------------------
*/

.linea-tiempo {
    width: 100%;
    height: 100%;
    position: relative;
}
.particulas{
    position: absolute;
    z-index: -1;

    width: 100%;
    height: 100%;
}
.titulo-linea-tiempo {
    text-transform: uppercase;
    text-align: center;
    font-weight: var(--extraBoldCabecera);
    font-family: var(--titulosEXO);
    font-size: var(--cabeceraSize);

    color: var(--mainColor);
    opacity: .6;

    width: 100%;

}
.contenedor-tiempos{
    width: 70%;
    margin: 0 auto;
    overflow: hidden;

    z-index: 2;

    background-color: transparent;
    backdrop-filter: blur(5px);

    margin-top: 4rem;
    margin-bottom: 4rem;
}
.primeras-dos {
    display: flex;
    flex-direction: column;

    background-image: url("../image/HexagonoPatron.svg");
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: center center;
}

.segundas-dos {
    background-image: url("../image/HexagonoPatron2.svg");
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: center center;
}

.terceras-dos {
    background-image: url("../image/HexagonoPatron.svg");
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: center center;
}

.historia-derecha,
.historia-izquierda {
    width: 50%;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: 2rem;
}

.historia-derecha img,
.historia-izquierda img {
    width: clamp(20rem, 16.5rem + 17.5vw, 37.5rem);
}

.historia-derecha {
    margin-right: auto;
}

.historia-izquierda {
    margin-left: auto;

    align-items: end;
}


/*
    -------------------------------------------------------
        ESTILOS SECCION CALENDARIO
    -------------------------------------------------------
*/

.calendario-eventos {
    background-color: black;

    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    background-image: url("../image/HexagonoPatron.svg");
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: right top;
}

.contenido-calendario {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 80%;

    color: white;
}

.explicacion-calendario {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*
    -------------------------------------------------------
        MEDIA QUERYS
    -------------------------------------------------------
*/



@media screen and (max-width:1270px) {
 

    .imagen-about img {
        width: clamp(20rem, 17.413rem + 12.937vw, 32.938rem);
        height: clamp(7.5rem, 5.037rem + 12.313vw, 19.813rem);
    }

    .explicacion-calendario {
        width: 80%;
    }
}


@media screen and (max-width:1000px) {
    .contendio-about {
        display: flex;
        flex-direction: column;
        gap: 0rem;
    }

    .contenido-calendario {
        align-items: center;
        justify-content: center;
    }
}

@media screen and (max-width:850px) {

    .historia-derecha,
    .historia-izquierda {
        margin: 0;
        width: 70%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .historia-derecha p,
    .historia-izquierda p {
        text-align: justify;
    }

    .primeras-dos,
    .segundas-dos,
    .terceras-dos {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }



    .palabra-vertical {
        padding: 1rem;
    }
}

@media screen and (max-width:650px) {

    .carta {
        width: 300px;
        height: 400px;
    }

    .contenedor-cartas {
        padding: 1rem;
    }

}

@media screen and (max-width:600px) {

    .historia-derecha,
    .historia-izquierda {
        width: 80%;
    }

    .about-us {
        flex-direction: column;
    }

    .palabra-vertical {
        flex-direction: row;
    }
    .palabra-vertical::after, .palabra-vertical::before{
        display: none;
    }
    .contendio-about {
        width: 100%;
    }

    .calendario-eventos {
        flex-direction: column;
    }
}

@media screen and (max-width:420px) {

    .calendar__dates,
    .calendar__week,
    .calendar__info {
        grid-gap: 0;
        padding: 0;
    }

    .cabecera-seccion {
        width: 70%;
    }

    .texto-about,
    .imagen-about {
        padding: 0;
        width: 80%;
    }

    .contendio-about {
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .palabra-vertical {
        padding: 0;
        margin: 1rem 0;
    }

    .palabra-vertical span {
        font-size: var(--mainSize);
    }
}

@media screen and (max-width:380px) {

    .historia-derecha img,
    .historia-izquierda img {
        width: 220px;
        height: 120px;
    }
    .carta{
        width: 200px;
        height: 300px;
    }
}