/* Fonts */

/* Familia font Futura Std */

@font-face {
    font-family: "Futura Std Medium";
    src: url("assets/fonts/FuturaStdMedium/Futura StdMedium.otf");
}

/* Familia font Mont */

/* Incluida en la carpeta de la familia está el especimen muestra para guía futura de uso de fonts.

Están el resto de fonts también en la carpeta en caso de futuro uso.*/

@font-face {
    font-family: "Mont Thin";
    src: url("assets/fonts/Mont/Mont-Thin.otf");
}

@font-face {
    font-family: "Mont Light";
    src: url("assets/fonts/Mont/Mont-Light.otf");
}

@font-face {
    font-family: "Mont Regular";
    src: url("assets/fonts/Mont/Mont-Regular.otf");
}

@font-face {
    font-family: "Mont SemiBold";
    src: url("assets/fonts/Mont/Mont-SemiBold.otf");
}

@font-face {
    font-family: "Mont Bold";
    src: url("assets/fonts/Mont/Mont-Bold.otf");
}

@font-face {
    font-family: "Mont Heavy";
    src: url("assets/fonts/Mont/Mont-Heavy.otf");
}


/* Estilizado general */

*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Mont Heavy";
}

html,body{
    height: 100%;
    width: 100%;
    /* 1 rem = 10px */
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
}

a{
    color: #000;
    text-decoration: none;
}
a:visited{
    color: #000;
}

img{
    max-height: 100%;
    max-width: 100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.fade{
    opacity: 0;
    transition: opacity 1s;
}

.fade-in{
    opacity: 0;
    animation: fadeIn ease 1s;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}
@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.fade-right{
    opacity: 0;
    animation: fadeRight ease 1s;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}
@keyframes fadeRight {
    0% {
        opacity:0;
        transform: translateX(100px);
    }
    100% {
        opacity:1;
        transform: translateX(0);
    }
}
.fade-left{
    opacity: 0;
    animation: fadeLeft ease 1s;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
}
@keyframes fadeLeft {
    0% {
        opacity:0;
        transform: translateX(-100px);
    }
    100% {
        opacity:1;
        transform: translateX(0);
    }
}

/* Estilizado específico */

/* Estilizado del header-nav */

#container-header{
    height: 10vh;
    width: 100%;
    display: flex;
    position: fixed;
    justify-content: space-evenly;
    align-items: center;
    transition: top .5s ease-in-out .15s;
    z-index: 1;
}

#header-img{
    height: 85%;
    width: auto;
    cursor: pointer;
}

#container-nav{
    height: 100%;
    width: 80%;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    gap: 2.5%;
    top:10px;
}

.nav-anchor{
    font-size: 1.5rem;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.header-off{
    top: -20%;
}
.header-on{
    top: 0;
}

/* Estilizado del main */

#container-main{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#container-main-text{
    height: 100%;
    width: 45%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 3.5%
}

#main-heading{
    white-space: nowrap;
}

.text{
    padding-top: 2.5rem;
}

.heading{
    font-size: 5.75rem;
    line-height: 5.5rem;
    letter-spacing: -.35rem;
}
.heading:hover{
    color: #ED4136;
    transition: all 225ms ease-in-out;
}

.paragraph{
    width: 70%;
    font-family: "Futura Std Medium";
    font-size: 2.75rem;
}

#img-hero{
    width: auto;
    height: 100%;
    image-rendering: auto;
}

#img-hero-tablet{
    display: none;
}

#img-hero-mobile{
    display: none;
}

/* Estilizado de popup */

#container-popup{
    min-height: 18rem;
    height: 24vh;
    min-width: 30rem;
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    /* center position */
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, 0%);
    /* bottom: 5vh;
    left: 5vw; */
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 0 1rem #00000040;
    z-index: 3;
    transition: all .5s ease-in-out;
}

.popup-off{
    display: none;
    animation: disappear .5s ease-in-out;
}
@keyframes disappear{
    0%{
        opacity: 1;
        transform: scale(1), translate(-50%, 0%);
    }
    100%{
        opacity: 0;
        transform: scale(0), translate(-50%, 0%);
    }
}

.popup-on{
    display: flex;
    animation: appear .5s ease-in-out;
}
@keyframes appear{
    0%{
        opacity: 0;
        transform: scale(0), translate(-50%, 0%);
    }
    100%{
        opacity: 1;
        transform: scale(1), translate(-50%, 0%);
    }
}



#popup{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: radial-gradient( 150.65% 28.28% at 50% 17.26%, #aeddff36 0%, #bed9ed00 100% ), radial-gradient( 152.15% 29.04% at 10.16% 24.65%, #ddbcf756 0%, #ffffff00 100% ), radial-gradient( 155.47% 39.97% at 0% 87.49%, #e3c5fb8f 0%, #ffffff00 100% ), #f9faff;;
}
#popup::before{
    position: absolute;
    content: "";
    top: .5rem;
    right: .5rem;
    bottom: 0;
    left: .5rem;
    background: conic-gradient(from 147.14deg at 50% 50%,#0294fe -55.68deg,#ff2136 113.23deg,#9b4dff 195deg,#0294fe 304.32deg,#ff2136 473.23deg);
    z-index: -1;
    border-radius: .6rem;
    filter: blur(2rem);
    opacity: .6;
}

#img-popup{
    height: 60%;
    width: auto;
    position: absolute;
    top: -50%;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#heading-popup{
    font-size: 2.6rem;
    line-height: 2.5rem;
    letter-spacing: -.15rem;
    text-align: center;
}

#text-popup{
    font-size: 2.2rem;
    font-family: "Futura Std Medium";
    letter-spacing: -.1rem;
    text-align: center;
}

#container-btn-popup{
    height: 20%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}


.btn-popup{
    height: 4.4rem;
    width: 100%;
    margin-top: 1rem;
    border: none;
    border-radius: .5rem;
    background-color: #ED4136;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.5rem;
    letter-spacing: -.1rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 225ms ease-in-out;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-popup:hover{
    background-color: #fff;
    color: #ED4136;
    box-shadow: 0 0 1rem #00000040;
}
.btn-popup:active{
    background-color: #dadada;
    color: #ff1100;
    transition-duration: 100ms;
    box-shadow: 0 0 .5rem #00000040;
}

/* Estilizado de artículos*/

.article{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
}

/* Estilizado del primer artículo */

#container-article{
    justify-content: flex-end;
    align-items: center;
    background-color: #FBFBFB;
}

#container-first-art-text{
    height: 100%;
    width: 45%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#first-art-img{
    height: 100%;
    width: auto;
}

#first-art-img-tablet{
    display: none;
}

#first-art-img-mobile{
    display: none;
}

/* Estilizado del segundo artículo */

#container-second-art{
    height: 200vh;
    flex-direction: row-reverse;
    justify-content: space-around;
    align-items: flex-start;
    padding: 30vh 0;
    background-color: #FBFBFB;
}

#container-sec-text{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.second-text-card{
    height: 25%;
    width: 100%;
}

#second-art-img{
    height: 35%;
    width: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 35%;
    transition: all .25s ease-in-out;
}
#second-art-img:hover{
    transform: scale(1.2);
}

/* Estilizado del tercer artículo */

#container-third-art{
    height: 120vh;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background: linear-gradient(#FBFBFB,#c5c5c5);
}

#container-third-art-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.third-art-heading{
    font-size: 3.8rem;
    letter-spacing: 0rem;
}

.third-art-paragraph{
    width: 50%;
    font-family: "Mont Bold";
    font-size: 2rem;
    text-align: center;
}

#container-third-art-info{
    height: 70%;
    width: 100%;
    display: flex;
    margin-bottom: 5%;
}

.third-art-sect-info{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#third-art-frame{
    height: 95%;
    width: 90%;
    margin: auto;
    border: 0;
    border-radius: 5% 5%;
}

.third-art-sect-heading{
    font-size: 3.5rem;
    letter-spacing: 0rem;
}

.third-art-sect-paragraph{
    width: 75%;
    margin: 1% 0;
    font-size: 2.5rem;
}

/* selector para ganarle a la especificidad del estilizado general de a tags */
.third-art-sect-info .third-art-sect-anchor{
    color: #ED4136;
    transition: all 250ms ease-in-out;
} 
.third-art-sect-anchor:hover{
    color: #ff1100;
}

/* Estilizado del footer */

#container-footer{
    height: 30vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #BA1319;
    /* background: #F7493B; */
}

.section-footer{
    height: 100%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-footer:nth-child(1){
    align-items: flex-start;
}

#footer-span-copyright{
    margin-top: 1.5rem;
    color: #FFF;
    font-family: "Mont Regular";
    font-size: 1.55rem;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#footer-img{
    height: auto;
    width: 70%;
    image-rendering: auto;
    cursor: pointer;
}

.footer-text {
    color: #fff;
    margin: 1% 0;
    font-family: "Futura Std Medium";
    font-size: 2rem;
}

.footer-anchor{
    font-family: "Mont Bold";
    transition: all 250ms ease-in-out;
}
.footer-anchor:hover{
    color: #fff;
}

#footer-container-media{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5%;
}

.footer-media{
    cursor: pointer;
    transition: all 200ms ease-in-out;
}

.footer-media:hover{
    filter: invert(100%);
}

#footer-img-logo{
    height: 85%;
    width: auto;
    filter: opacity(.4);
}

@media screen and (max-width: 1200px){
    #container-main-text{
        width: 40%;
        padding-left: 0;
    }
    
    #container-second-art{
        padding: 10vh 0;
    }

    #second-art-img{
        height: 25%;
    }
    
    #container-sec-text{
        justify-content: space-evenly;
    }
    
    #container-third-art-info{
        justify-content: space-around
    }

    .third-art-sect-info{
        width: 55%;
    }
    
    .third-art-sect-info:nth-child(2){
        width: 40%;
    }

    #third-art-frame{
        height: 100%;
        width: 100%;
    }
}   

@media screen and (max-width: 1050px){
    
    #container-main{
        height: 130vh;
        flex-direction: column;
        align-items: flex-end;
    }

    #container-main-text{
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
    }

    #main-paragraph{
        text-align: center;
    }

    #img-hero{
        height: auto;
        width: 100%;
        display: none;
    }

    #img-hero-tablet{
        display: block;
    }

    #container-first-art-text{
        margin: 0;
        padding-left: 7.5rem;
    }

    .second-text-card{
        height: 30%;
    }
}

@media screen and (max-width: 850px){
    
    .heading{
        font-size: 4.8rem;
    }

    .paragraph{
        font-size: 2.5rem;
    }

    #container-article {
        justify-content: space-between;
    }
    
    #container-first-art-text{
        padding-left: 3rem;
    }

    #first-art-img{
        display: none;
    }
    
    #first-art-img-tablet{
        display: block;
    }
    
    .second-text-card p{
        width: 90%;
    }

    #second-art-img{
        height: 20%;
    }
    
    #container-third-art{
        height: 150vh;
    }
    
    #container-footer{
        height: 35vh;
    }
}

@media screen and (max-width: 600px){
    #img-hero-mobile{
        height: auto;
        width: 100%;
        display: block;
    }

    #img-hero-tablet{
        display: none;
    }

    .heading{
        font-size: 4.45rem;
    }
    
    .paragraph {
        font-size: 2.35rem;
    }

    #container-main-text{
        justify-content: flex-end;
        padding-left: 0;
    }

    #main-heading{
        width: 70%;
        position: absolute;
        top: 20%;
        padding: 0;
    }

    #main-paragraph{
        text-align: left;
        width: 80%;
        padding-bottom: 5rem;
    }

    #container-article{
        flex-direction: column;
        justify-content: center;
    }

    #container-first-art-text{
        height: 55%;
        width: 100%;
        padding-left: 5rem;
    }

    #first-art-img-mobile{
        height: auto;
        width: 80%;
        display: block;
    }

    #first-art-img-tablet{
        display: none;
    }

    #first-art-paragraph{
        width: 90%;
        text-align: center;
    }
    
    #container-second-art{
        height: 250vh;
        flex-direction: column;
        align-items: center;
        padding: 7.5vh 0; 
    }
    
    #container-sec-text{
        width: 80%;
    }

    .second-text-card{
        height: 25%;
        width: 100%;
    }
    
    /* Para los paragraphs dentro de las cards de texto */
    .second-text-card p{
        width: 90%;
    }
    
    #second-art-img{
        height: 17.5%;
        position: unset;
    }
    #second-art-img:hover{
        transform: scale(1.1);
    }

    #container-third-art-info {
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    #container-third-art {
        height: 220vh;
    }

    #container-third-art-info{
        height: 75%;
    }

    #container-third-art-text{
        align-items: flex-start;
        padding-left: 10%;
    }

    .third-art-paragraph{
        text-align: left;
        width: 85%;
    }

    .third-art-sect-paragraph{
        text-align: left;   
        width: 90%;
    }

    .third-art-sect-info{
        width: 90%;
    }
    .third-art-sect-info:nth-child(2) {
        width: 100%;
        padding-left: 10%;
    }

    #container-footer {
        height: 100vh;
        flex-direction: column;
    }

    .section-footer{
        width: 100%;
    }
    .section-footer:nth-child(1){
        align-items: center;
    }
    .section-footer:nth-child(2){
        flex-direction: column-reverse;
        justify-content: space-evenly;
    }

    #footer-img-logo {
        height: 75%;
    }
}

@media screen and (max-width: 375px){
    #main-heading {
        width: 85%;
    }

    #first-art-img-mobile{
        margin-top: 15%;
    }
    
    #first-art-heading{
        width: 90%;
    }

    .second-text-card p {
        width: 100%;
    }

    #second-art-img{
        margin-top: 10rem;
    }
    #second-art-img:hover{
        transform: scale(1);
    }
}