*{
    box-sizing: border-box;
    scroll-behavior: smooth;/*HACE QUE EL SCROLL VALLA MAS LENTO*/
}

body, div, header, nav, ul, li, h1, h2, h3, p, footer{
    margin: 0;
    padding: 0;
    
}
    body{
    --bg-color: rgb(110 110 110);/*ea1a1*/
    --bg-color2: rgb(49 47 48);
    --nav-color: #fff;
    --text-color: #fff;
    --h2-color: #323232;
    --footer-color: #fff;
    --footer_text-color: #000;
    
    font-family: sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    }

/* esta variable de colores es para el boton de prueba del modo noche*/
body.dark-mode {
    --bg-color: #1a1a1a;        /* Un gris casi negro */
    --bg-color2: #000000;
    --nav-color: #686666;
    --text-color: #f0f0f0;
    --h2-color: #bb86fc;        /* Un color que resalte en oscuro */
    --footer-color: #222;
    --footer_text-color: #fff;
}

/* -----header section----------------*/

.header{
    min-height: 100vh;
    background-image:url(./imagenes/IMG2.jpg);
    background-size: cover;
    background-position:center 0px;/*con esto ajustamos el fondo al tamaño que ocupa el contenido*/
    user-select: none;/*esto hace que los iconos y los elementos marcados no se puedan selecionar o subrayar con el mouse que queda feo*/
    background-attachment: fixed;
}

/* esta capa actualmente no la estamos utilizando porque es una capa superpuesta a la cual dandole un color transparente cambia la apariencia de la imagen de fondo

.header_overlay{
    background-color: #; //aqui dariamos un tono semitransparente a la imagen de fondo
    min-height: 100vh;
    width: 100%;
    position: absolute;
    z-index: 1;
    
}
*/


.header_item-container{
    position: relative;
    width: 100%;
    z-index: 10;
    margin: auto;
    max-width: 800px;
    text-align: center;

    /*añadido esto 230325 prueba esto es para el destello del texto H1*/
    filter: drop-shadow( 0px 0px 15px #fff)
    drop-shadow(0px 0px 2px #fff9) drop-shadow(0px 0px 12px #fff9) drop-shadow(0px 0px 1px #fff9);
}

.header_item-container p{
    text-wrap: pretty;
}

.header__h1{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    margin: 50% 0 0;

}

.header__h1 p{
    margin-top: 10px;
    color: var(--bg-color);
}



/*comenzamos con las propiedades del h1 y posteriormente a añadir la animacion del typewriter*/
h1{
    margin:10px;
    color: var(--nav-color);
    letter-spacing: 0px;
    font-size: 40px;
    text-wrap: nowrap;/* con esto el texto se va creando linealmente */
    text-shadow: 1px 2px 2px  var(--bg-color);
    animation: grow 2s both steps(18);/*añadimos la animacion llamada "grow" que durara 2s y se realizara en 18pasos*/
    overflow: hidden;
    position: relative;
}
h1::selection{
    background-color: transparent;
}

/*esto sera lo que añadaños para crear la barra que parpadea*/
h1::before{
    content: '';
    width: 1px;
    height: 100%;
    background-color: #fff;
    position:absolute;
    right:0; /* con el right 0 hacemos que el cursor pase a la derecha en lugar de al principio de texto*/
    border-radius:4px;
    animation: titilar 0.3s infinite; /* creamos la animacion titilar con el keyframes*/
}

@keyframes grow {/*esta animacion es para la aparicion del texto como si se estuviera escribiendo*/
    from{
        width:0%;
    }
    to{
        width: 60%;/*como le hemos dado al container max-width de 700px he achicado el % a menos del 100% total  ya que al tener un texto muy corto hasta completar lo 700px el cursor parpadeando se me iba muy lejos dejando mucho espacio entre el texto y el simbolo /parpadeando*/
    }
}

@keyframes titilar{/*y esta es la animacion del efecto de barra escritura parpadeando*/
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}





.header_logos-redes{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 15px;
    

}
.logos-redes{
    margin: 0;
    
}

.logos-redes:hover{
    transform: scale(1.2);
}

@media screen and (max-width:800px){
    .header_item-container{
        padding:15px; /*le he dado paddin al contenedor para que a poca resolucion el contenido tanto el h1 especialmente se despege de los bordes*/
    }

    @keyframes grow {/*esta animacion es para la aparicion del texto como si se estuviera escribiendo*/
        from{
            width:0%;
        }
        to{
            width: 100%;/*en resoluciones pequeñas le doy hasta el 100% para que el cursor haga el texto entero ya que al en pantalla completa esta a menos porcentaje para que el cursor parpadeando no se valla muy lejos pero en resolucion pequeña no llegaba a escribir todo el nombre a no ser que le diera el 100%*/
        }
    }
}


/*---------NAVBAR SECTION------------------*/

/*primeramente la pusimos debajo del header pero posteriormente le di position relative y lo fije al principio*/

.nav{
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 100;
    position: fixed;
    background-color:transparent;
    display: flex;
    justify-content: space-around;
    padding: 8px 100px 8px 40px;
    flex-wrap: wrap;/*para que se vea bien cuando achicas pantañlla*/
    user-select: none;/*esto hace que los iconos y los elementos marcados no se puedan selecionar o subrayar con el mouse que queda feo*/
    transition: navtransition 0.3s;/*la transicion hecha en JS para ponerle fondo al nav ocurrira en 0.3s*/
}

.nav.navtransition{
    background-color: var(--nav-color);
}




.nav_ul{
    display: flex;
    
    
}
.nav_item{
    list-style: none;
}
.nav_link{
    font-size: 1.2rem;
    color: var(--bg-color2);
    text-decoration: none;/*para quitarle a los elementos li el puntito*/
    display: inline-block;
    padding: 8px 10px;
    border-radius: 20px;
    transition: background-color 0.3s;
    border-radius: 0.24s;
    margin: 10px;
    

}
.nav_link:hover{
    background-color:var(--bg-color);
    border-radius: 20px;
    color: var(--text-color);
    font-size: 1.2rem;
} 


.nav_item span{
    font-size: 0;
}


.link--login{
    background-color: var(--bg-color);
    color: var(--text-color);
    border-radius: 20px;
    padding: 8px 24px;
    margin-left: 10px;
}
.link--login:hover{
    padding: 15px 30px;
    font-size: 20px;
}


.nav_logo{
    width: 80px;
}

@media screen and (max-width:800px){
    .nav{
       
    }

    .nav_link, .link--login{
        display: none;
    }
    .nav_item span{
        color: var(--bg-color2);
        display: ; /*esto no sirve creo*/
        padding: 8px 10px;
        border-radius: 20px;
        margin: 5px;
        font-size: 2rem;
        transition: background-color 0.4, font-size 0.4s;
    }
    
    .material-symbols-outlined:hover{
        background-color: var(--bg-color);
        border-radius: 20px;
        color: var(--text-color);
        font-size: 2.5rem;
    }
    

}

@media screen and (max-width:530px){
    .nav{
        justify-content: center;
    }
    .nav_logo{
        display: none ;
    }

}


.nav_logos-redes{
    display: none;
    transition: displaylogos-redes 0.1s;
}

.nav_logos-redes.displaylogos-redes{
    display: flex;
    gap: 50px;
    
}


/*-- boton whatsapp pero actualmente en pruebas lo he asignado a contacto futuro boton chat---*/

.logo_whatsapp{
    position: relative;
    z-index: 11;
    top: 85%;
    right: 4%;
    position: fixed;
    color: var(--h2-color);
    text-decoration: none;
    font-size: 4rem;
}


/* ---- MAIN SECTION----*/


main{
    max-width: 800px; /*el contenido del main ocupa maximo 800px de la pagina de momento si queremos meter mas elementos le daremos este max-width al p o elemento que haya dentro*/
    margin: auto;
    margin-top: 20px;
    padding: 50px 0px;
    
    
}

@media screen and (max-width:800px){
    main{
        
    }
}

/*--------- FOOTER SECTION -----------*/



.footer{
    text-align: center;
    font-size: 20px;
    background-color: var(--footer-color);
    color: var(--footer_text-color);
    user-select: none;/*esto hace que los iconos y los elementos marcados no se puedan selecionar o subrayar con el mouse que queda feo*/
    padding-bottom: 10px;
}
.footer_logo{
    width: 80px;
    height: 80px;
}
.avisolegal{
    text-decoration: none;
    color: orange;
}



/*________________________________________________________________*/

/*------Pagina principal Index-------------*/


/*actualmente la he dejado limpia en blanco no tiene ningun elemento*/



/*________________________________________________________________________________*/


/*----Pagina PERFIL-----------*/

.h2_aboutme{
    font-size: 50px;
    text-align: center;
    color: var(--h2-color);
    user-select: none;
}

.p_aboutme{
    margin-top: 20px;
    padding: 10px;
    font-size: 30px;
    text-wrap: pretty;
    text-align:justify;
    user-select: none;
}

/* esto esta desastivado en la pagina aboutme
.liaboutme{
    margin:10px;
    text-align: center;
    list-style: none;   
}
.liaficiones{
    list-style: none;
    margin: 15px;
}
*/


.portfolio{
    height: 100%;
    margin-top: 50px;
    background-color: var(--bg-color);
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-evenly;
    container-name: portfolio;/*siempre hay que añadir esta caracteristica  con el nombre del container para posteriormente añadir los media queries*/
    container-type: inline-size;/* tambien hay que poner esta propiedad para las media queries*/
}
.portfolio_tittle{
    font-size: 3rem;
    margin-bottom: 0;
    user-select: none;
}

.portfolio_project-container{
    display: grid;
    grid-template-columns: 1fr;
    max-width: 800px;/*para cuando cresca la resolucion tenga un maximo de este tamaño*/
    margin: auto;/*para que siempre este centrado cuando cresca la resolucion*/
    width: 100%;
    gap: 12px;
    padding: 12px;
    min-height: 80vh;
}

.portfolio_project {
    background-color: var(--h2-color);
    display: grid;
    place-content: center;
    border-radius: 8px;
    animation: aparecer both;/*animamos tambien los elementos del portfolio pero esta vez dependiendo del timeline*/
    animation-timeline: view();/*los elementos van apareciendo conforme se van viendo 19:24)*/
    animation-range:cover 5% cover 48%;/*esto es como si pusieramos los dos rangos animation-range-star:cover 5%; y animation-range-end: cover 48%; agrupados en el mismo, para indicarles que queremos que la animacion de aparecer comiente cuando el contenido aparesca al 5% dela pagina y el efecto termine cuando valla por el 48% del view*/
    outline: 3px solid var(--h2-color)

}
.portfolio_project:first-child{
    background-image:linear-gradient(#0009,#0009), url(./portfolio\ aerografia/imagenes/1.jpg);/* primero ponemos el gradiente y luego la imagen ya que esta esta encima del gradiente si lo hicieramios al reves no funcionaria con esto hemos hecho oscurecer la imagen del fondo para que el titulo se vea mejor*/
    background-position: center;
    background-size:cover;

}

.portfolio_project:nth-child(2){
    background-image:linear-gradient(#0009,#0009), url(./portfolio\ tools/Developer.jpg);
    
}

.portfolio_project:nth-child(3){
    background-image:linear-gradient(#0009,#0009), url(./portfolio\ web\ lugares\ exoticos/imagenes/madagascar.jpg);
}

.portfolio_project:nth-child(4){
     background-image:linear-gradient(#0009,#0009), url(./portfolio\ web\ revista\ coches/gtr.jpg);
     background-size: cover;
     background-position: center;
 
}

.portfolio_project:hover{
    opacity: 0.74;/*al pasar el mouse por encima se marca cada casilla del portfolio mas opaco*/
    outline: 5px solid var(--text-color);/* al pasar por encima el mouse se pone el marco*/

}

.portfolio_project a{
    text-decoration: none;
    
}

.portfolio_project-name{
    font-size: 40px;
    text-transform: capitalize;
    user-select: none;
    color: var(--text-color);
}



 @container portfolio (min-width:400px) {
    .portfolio_project-container {
        grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    }
    .portfolio_project:first-child{
        grid-column: span 2;/*con esta propiedad hemos hecho que al aumentar la resolucion el primer contenedor ocupe dos columnas.*/
        grid-row: span 2;/*para que ocupe tambien dos filas*/
    }

    .portfolio_project:nth-child(6){
        grid-column: span 2;/*con el ultimo contenedor hemos hecho igual al aumentar resolucion espande a 4 columnas*/
        
    }
}

@container portfolio (min-width:600px) {
    .portfolio_project-container {
        grid-template-columns: repeat(auto-fill, minmax(350px,1fr));
    }
    .portfolio_project:first-child{
        grid-column: span 2;/*con esta propiedad hemos hecho que al aumentar la resolucion el primer contenedor ocupe dos columnas.*/
        grid-row: span 2;/*para que ocupe tambien dos filas*/
    }

    .portfolio_project:nth-child(6){
        grid-column: span 2;/*con el ultimo contenedor hemos hecho igual al aumentar resolucion espande a 4 columnas*/
        
    }
}

@keyframes aparecer {/*le vamos a dar esta animacion a lo primero que carga que es la seccion de profile añadiendole el animation:aparecer 2s both;*/

    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

/*___________________________________________________________________*/

/* ----pagina aficiones---------*/

/*aqui voy a poner las propiedades de la prueba de carrousel*/

/* Contenedor principal: debe tener un ancho fijo y ocultar lo que sobra */
.carrousel_container {
    position: relative;
    display: flex;             /* Alinea los items en fila */
    overflow-x: scroll;       /* Permite scroll horizontal */
    scroll-behavior: smooth;   /* Hace que el movimiento sea fluido, no de golpe */
    scroll-snap-type: x mandatory; /* Obliga a que la imagen se detenga justo en el centro */
                  /* O el ancho que desees para tu carrusel */
    max-width: 800px;          /* Ajusta a tu gusto */
    margin: 0 auto;
    


    height: 250px;
    width: 300px;
    margin: auto;
    margin-top: 100px;
    border: 6px solid var(--h2-color);
    border-radius: 20px;
    overflow: hidden
}

/* Ocultar la barra de scroll para que se vea más limpio */
.carrousel_container::-webkit-scrollbar {
    display: none;
}

/* Cada item del carrusel */
.carrousel_item {
    flex: 0 0 100%;           /* Cada item ocupa el 100% del contenedor */
    width: 100%;
    scroll-snap-align: start;  /* Alineación del frenado */
    position: relative;        /* Para posicionar las flechas si quieres */
}


/* Las imágenes */

.carrousel_imagen{
    height: 100%;
    width: 100%;
    align-content: center;
}
.carrousel_imagen-imagen {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Estética básica para las flechas */
.carrousel_flechas {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.flechas {
    background: rgba(0,0,0,0.5);
    color: var(--footer-color);
    padding: 10px;
    text-decoration: none;
    border-radius: 50%;
}








 /*desastivo estas propiedades mias para probar las de google geminis

.carrousel_container{
    position: relative;
    height: 250px;
    width: 300px;
    margin: auto;
    margin-top: 100px;
    border: 6px solid var(--h2-color);
    border-radius: 20px;
    overflow: hidden;   le damos propiedad overflow hidden para que los item no se excedan del espacio total del contenedor y desborden 
}

.carrousel_item{
    position: relative;
    height: 100%; hacemos que cada item ocupe el 100% del container
   
    
}

.carrousel_imagen{
    height: 100%;
    width: 100%;
    align-content: center;
        
    
}

.carrousel_imagen-imagen{
    width: 100%;
    height: 100%;
    
}


.carrousel_flechas{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    
    

}

.flechas{
    text-decoration: none;
    font-size: 30px;
    color: var(--footer-color);
}

*/

/*aqui termina el carrousel primero*/




.h2_aficiones{
    margin:50px;
    text-align: center;
    color:var(--h2-color);
    font-size: 30px;
    user-select: none;
}


.div_aficiones{
    display: flex;
    max-width: 800px;
    margin: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    

}
.img_aficiones{
    
    width: 150px;
    height: 150px;
    border: 4px solid var(--h2-color);
    margin: 0 10px;
    border-radius: 20px;
    align-content: center;
    transition: 0.4s;
    
}
.img_aficiones:hover{
    transform: scale(2);   
    border: 5px solid var(--text-color);
}





/*____________________________________________________________________________________________*/
/*------------pagina contacto-----------------------*/
form{
    background: transparent;
    padding: 20px 0px;
    max-width: 500px;
    border:5px solid var(--h2-color);
    border-radius: 15px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    box-shadow: 0 0 50px #fff;
    
   
}
.div_formulario{
   padding: 6px 20px;
}
input,textarea{
    background: transparent;
    width: 100%;
    box-sizing: border-box;
    margin: 10px;
    padding: 10px 12px;
    border: none;
    box-shadow: 0 0 10px #fff;
    border-radius: 5px;
    color: var(--text-color);
}

input::placeholder,textarea::placeholder{
    color: var(--h2-color);
}
textarea{
    min-width: 100%;
    resize: none;
    min-height: 100px;
    font-family: sans-serif;
}
.textarea_formulario{
    padding: 6px 20px;
}
.h2_formulario{
    text-align: center;
    font-size: 30px;
    color: var(--text-color);
}