*{
    box-sizing: border-box; /*hace que cuando yo agrego margin a los elementos no crezcan al tamaño que yo le di*/
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*cambia el color de la tipogtrafia*/
    margin: 0; /*saca el margen de la pagina*/
}

h1{font-size: 3em;}
h2{font-size: 2.2em;}
h3{font-size: 1.3em;}
p{font-size: 1em;}
ul{list-style: none;}

button{
    font-size: 1em; /*tamaño del boton*/
    font-weight: bold; /*para hacer el boton en negrita*/
    padding: 8px 17px; /*para poner el ancho y alto del boton*/
    border-radius: 15px; /*para hacer los botones circulares*/
    border: 2px solid rgba(0,0,0,0.5); /*mejora los bordes del boton, y el 0.5 lo hace un poco transparente*/
    box-shadow: 2px 2px 10px rgb(201, 79, 201); /*sirve para poner posicionamente x, y, expansión de la sombra y color de la sombra*/
    color: white;
    background-color: rgb(201, 79, 201);
} 

button:hover{
    background-color: rgb(218, 162, 218); /*hace que cuando pases el cursor por encima cambie el color*/
}

.container{
    max-width: 1200px;
    margin: auto;
}

.colorAcento{color:rgb(201, 79, 201);} /*para ponerle color solo a una letra*/

header{
    background-color: rgb(245, 245, 245)
    
}

header .logo{
    margin: 0;
    padding: 25px 30px;
    font-weight: bold;
    color: rgb(159, 96, 218);
    font-size: 1.45em;
    display: flex;
    align-items: center;
}

header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo img {
    height: 30px;
    margin-left: 10px;
}

header nav{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-bottom: 25px;
    align-items: center;
}

header a{
    padding: 5px 12px;
    text-decoration: none;
    font-weight: bold;
    color:black;
}

header a:hover{
    color: rgb(159, 96, 218);;
}

#hero{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 99vh; /*espacio para el hero*/
    color: white;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)) 
    ,url(imagenes/prog.webp); /*sirve para que la imagen de fondo sea un poco negra así se ve la tipografía*/
    background-repeat: no-repeat; /*para que no repita la foto*/
    background-size: cover; /*para que la foto cubra todas las esquinas*/
    background-position: center center; /*para que la foto esté posicionada en el centro*/
}


#miHistoria .container{ /*si o si tiene que haber un espacio*/
    text-align: center;
    padding: 200px 12px;
}

#misHabilidades{
    background-color: rgb(30,30,30); /*fondo de color negro*/
    color: white;
    text-align: center;
    padding: 150px 100px;
}

#misHabilidades .container{
    padding: 100px, 0px;
}

#misHabilidades h2{
    margin-top: 0; /*para sacarle al h2 el margen de arriba ya que vienen predeterminados*/
}

#misHabilidades p{ /*para ocultar los párrafos*/
    display: none;
}

#misHabilidades .carta{
    background-position: center center;
    background-size: cover;
    padding: 1px; /* es el ancho*/   
    margin: 12px;
    border-radius: 15px;
}


.carta:first-child{
    background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.9)) 
    ,url(imagenes/back.jpg);
}

.carta:nth-child(2){
    background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.9)) 
    ,url(imagenes/front.jpg);
}

.carta:nth-child(3){
    background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.9)) 
    ,url(imagenes/grafico.jpg);
}

#caracteristicas .container{
    text-align: center;
    padding: 200px;
}

#caracteristicas li{ /*no se le pone punto porque no es un clase*/
    margin: 12px 0px;
    font-weight: bold;
}

#final{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 80vh; /*espacio para el hero*/
    background-color: rgb(30,30,30);
    color: white;
}

#final h2{
    font-size: 7vw;
}
/*----------------------------------------------------------------------*/
.modal{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #111111bd;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s .9s;
    --transform: translateY(-100vh);
    --transition: transform .8s;
}

.modal--show{
    opacity: 1;
    pointer-events: unset;
    transition: opacity .6s;
    --transform: translateY(0vh);
    --transition: transform .5s .5s;
}

.modal_container{
    margin: auto;
    width: 90%;
    max-width: 600px;
    max-height: 90%;
    background-color: #fff;
    border-radius: 6px;
    padding: 3em 2.5em;
    display: grid;
    gap: 1em;
    place-items: center;
    grid-auto-columns: 100%;
    transform: var(--transform);
    transition: var(--transition);
}

.modal_back{
    font-size: 1.5rem;
    margin-bottom: 0;
    color: rgb(201, 79, 201);
}

.modal_p{
    margin-bottom: 1px; /* Puedes ajustar según sea necesario */
    margin-top: 0;
}

.modal_img{
    width: 90%;
    max-width: 300px;
}

.modal_close{
    text-decoration: none;
    color:#fff;
    background-color: rgb(201, 79, 201);
    padding: 0.5em 2em;
    border: 1px solid;
    border-radius: 6px;
    display: inline-block;
    font-weight: 300;
    transition: background-color .3s;
}

.modal_close:hover{
    color: rgb(201, 79, 201);
    background-color: #fff;
}
/*----------------------------------------------------------------------*/
.modal2{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #111111bd;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s .9s;
    --transform: translateY(-100vh);
    --transition: transform .8s;
}


.modal--show2{
    opacity: 1;
    pointer-events: unset;
    transition: opacity .6s;
    --transform: translateY(0vh);
    --transition: transform .5s .5s;
}

.modal_container2{
    margin: auto;
    width: 90%;
    max-width: 600px;
    max-height: 90%;
    background-color: #fff;
    border-radius: 6px;
    padding: 3em 2.5em;
    display: grid;
    gap: 1em;
    place-items: center;
    grid-auto-columns: 100%;
    transform: var(--transform);
    transition: var(--transition);
}

.modal_back2{
    font-size: 1.5rem;
    margin-bottom: 0;
    color: rgb(201, 79, 201);
}

.modal_p2{
    margin-bottom: 1px; /* Puedes ajustar según sea necesario */
    margin-top: 0;
}

.modal_img2{
    width: 90%;
    max-width: 300px;
}

.modal_close2{
    text-decoration: none;
    color:#fff;
    background-color: rgb(201, 79, 201);
    padding: 0.5em 2em;
    border: 1px solid;
    border-radius: 6px;
    display: inline-block;
    font-weight: 300;
    transition: background-color .3s;
}

.modal_close2:hover{
    color: rgb(201, 79, 201);
    background-color: #fff;
}
/*----------------------------------------------------------------------*/
.modal3{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #111111bd;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s .9s;
    --transform: translateY(-100vh);
    --transition: transform .8s;
}


.modal--show3{
    opacity: 1;
    pointer-events: unset;
    transition: opacity .6s;
    --transform: translateY(0vh);
    --transition: transform .5s .5s;
}

.modal_container3{
    margin: auto;
    width: 90%;
    max-width: 600px;
    max-height: 90%;
    background-color: #fff;
    border-radius: 6px;
    padding: 3em 2.5em;
    display: grid;
    gap: 1em;
    place-items: center;
    grid-auto-columns: 100%;
    transform: var(--transform);
    transition: var(--transition);
}

.modal_back3{
    font-size: 1.5rem;
    margin-bottom: 0;
    color: rgb(201, 79, 201);
}

.modal_p3{
    margin-bottom: 1px; /* Puedes ajustar según sea necesario */
    margin-top: 0;
}

.modal_img3{
    width: 90%;
    max-width: 300px;
}

.modal_close3{
    text-decoration: none;
    color:#fff;
    background-color: rgb(201, 79, 201);
    padding: 0.5em 2em;
    border: 1px solid;
    border-radius: 6px;
    display: inline-block;
    font-weight: 300;
    transition: background-color .3s;
}

.modal_close3:hover{
    color: rgb(201, 79, 201);
    background-color: #fff;
}
/*----------------------------------------------------------------------*/
footer{
    background-color: rgb(201, 79, 201);
}

footer p{
    margin: 0;
    color: white;
}

footer .container{
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: flex-end; /*se pega al fondo*/
}



@media (min-width: 768px){ /*cuando se superen los 7px van a haber estos cambios*/
    
    header{ /*para que mientras baje en el escritorio el header se quede en el lugar*/
        position: fixed;
        width: 100%;
    }
    
    header .container{
        flex-direction: row;
        justify-content: space-between;
    }

    header nav{
        flex-direction: row;
        padding-bottom: 0;
        padding-right: 20px;
    }

    .modal_container{
        padding: 3em 1.5em;
    }

    .modal_back{
        font-size: 1rem;
    }
    
    .modal_container2{
        padding: 3em 1.5em;
    }

    .modal_back2{
        font-size: 1rem;
    }

    .modal_container3{
        padding: 3em 1.5em;
    }

    .modal_back3{
        font-size: 1rem;
    }

    #miHistoria .imgContainer{
        background-image: url(imagenes/programacion.jpg);
        background-position: center center;
        height: 350px;
        width: 390px;
        background-repeat: no-repeat;
    }

    #miHistoria .texto{
        width: 50%;
        max-width: 600px;
        text-align: initial;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;

    }

    #miHistoria h2{
        margin: 0;
    }

    #miHistoria .container{
        display: flex;
        justify-content: space-evenly; /*hace que haya lugares proporcionados para cada h2, p y img*/
    }

    #misHabilidades .programas{
        display: flex;
        justify-content: center;
    }

    #misHabilidades p{
        display: block;
        margin-bottom: 30px;
        font-weight: bold;
        
    }

    #misHabilidades .carta{
        padding: 50px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        
    }

    #misHabilidades h3{
        margin-top: 0;
    }

    #caracteristicas{
        background-image: url(imagenes/girl.jpg);
        background-repeat: no-repeat;
        background-size: 400px 300px;
        background-position: 200px 60px;
        
    }
    

    #catacteristicas .container{
        text-align: initial;
    }

    #caracteristicas ul{
        margin-left: 100px;
    }

    #final h2{
        font-size: 4em;
    }

    #final .fin {
        display: flex;
        align-items: center; /* Centra verticalmente los elementos hijos */
    }
    
    #final .fin img {
        margin-right: 6px; /* Ajusta el margen derecho según sea necesario */
    }
    
    #footer .container{
        justify-content: flex-start;
    }

}