*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
     max-width: 100vw;
    /* background-color: #FAF3EC; */
    /* background-color: #FFF6F0; */
    background-color: #FFF9F5;
    font-family: sans-serif;
    color: #1E293B;
    scroll-behavior: smooth;   
}

/*header*/
.hero{
    width: 800px;
    height: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content:space-between;
    margin:0 auto;
   
}



.title{
    font-family: sans-serif;
    font-size:40px;
    color: #1a3047;
}

.nav{
    display: flex;
    align-items: center;
    
}

.nav-list{
    list-style: none;
    display: flex;
    gap: 40px;
}

a{
    text-decoration: none;
    color: #2C3E50;
    font-size: 20px;
    font-weight: semibold;
}



.link a:hover{
    color: #F7C5A0;
}

.nav-icons{
    display:flex;
}

.menu-hamburguesa{
    display: none;
    cursor: pointer;
    margin-left: auto;
    width: 30px;
}





/*perfil*/

.img_perfil{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 20px auto;
    
}

.perfil{
    width: 800px;
    display: flex;
    align-items: center;
    gap: 40px;
    margin:auto;
    
}

.subtitulo{
    
    text-wrap: wrap;
    color: #1E293B;           
    font-size: 1.5rem;        
    font-weight: 700;         
   
}

.texto {
    color: #475569;           /* gris azulado suave para el párrafo */
    font-size: 15px;        /* tamaño para bloques de texto */
    line-height: 1.6;         /* espacio entre líneas para mejor lectura */
    
}

.texto strong {
    color: #F7C5A0;           /* durazno claro para resaltar empresas */
          
}

/*cv y linkedin*/
.botones{
    width: 800px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin:10px auto;
    
}

.logo_linkedin img{
    width: 45px;
    display: flex;
    align-items: center;
    
}

.cv a{  
    padding: 10px 20px;   
    background-color: #F7C5A0;
    transition: background-color 0.3s ease;
}

.cv a:hover{
    background-color: #D9D9D9;
}



/*Experiencia*/

.experiencia{
    width: 800px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*OL*/
.experienciaList{
    border-inline-start:1px solid #1a3047;
    position: relative;
}

.experienciaList{
    list-style: none;
    
    
}

.experienciaTimeLine{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
    
}

.imgExperiencia img{
    display: block;
    width: 300px;
    object-fit: cover;
    animation: bounce 3s infinite;
    
}
time{
    color: #475569;           /* gris azulado suave para el párrafo */
    font-size: 0.9rem;        /* tamaño para bloques de texto */
    margin: 0;
}





@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-15px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(-7px); }
    100% { transform: translateY(0); }
}

.experiencia-item{
    padding-bottom: 40px;
    padding-left: 20px;
    max-width: 350px; /* Ajusta según tu diseño */
    word-wrap: break-word; /* Evita que palabras largas rompan */
    
}


h4{
    margin: 10px 0;
   
}

.toggleText{
    background-color: #F7C5A0;
    padding: 8px 16px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.toggleText:hover{
    background-color: #D9D9D9;
}

.hiden{
    display: none;
    color: #475569;           /* gris azulado suave para el párrafo */
    font-size: 13px;        /* tamaño para bloques de texto */
    line-height: 1.6;         /* espacio entre líneas para mejor lectura */
}

.experiencia-item p{
    margin: 5px 0;
     width: 100%; /* o un valor fijo si prefieres */
}


.experiencia-item h3{
    color: #F7C5A0;
    font-weight: bold;
}

.decorativeCircleList{
    height: 10px;
    width: 10px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    left: -6px;
    
}

/*CARDS EDUCATION*/
.education{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 60px 0;

   
}

.education h1{
    font-size: 35px;
}

.titleEducation{
    display: flex;
    gap: 10px;
}

.iconAlumno{
    width: 30px;
   
}



.sectionCards{
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.card {
    background-color: #FFF9F5; /* Mismo color del body para continuidad */
    color: #f1f5f9;
    margin: 20px 0;
    overflow: hidden;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover{
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 8px 20px rgba(239, 192, 192, 0.25);
}

.card img {
    width: 100%;
    height: 180px;
    object-fit: scale-down;
}

.card-content {
    padding: 16px;
}

.card-content h2 {
    font-size: 1.2rem;
    margin: 0 0 8px 0;
    
}

.card-content p {
    font-size: 0.9rem;
    color: #475569;
    margin-bottom: 16px;
    line-height: 1.6; 
}

.btn {
    display: inline-block;
    background-color: #F7C5A0;
    color: #1a3047;
    text-decoration: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #D9D9D9;
}

/*Habilidades*/

.mainHabilities{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 60px 0;
    margin-bottom: 0;
}

.mainHabilities h2{
    font-size: 35px;

}

.habilities{
    width: 800px;
    display: flex;
    margin:0 auto;
    justify-content: space-around;
    margin-top: 10px;
}

.habilitiesCard {
    display: grid;
    grid-template-columns: repeat(4, 80px); /* 4 columnas iguales */
    grid-template-rows:repeat(3, 80px);
    gap: 1rem; /* espacio entre los elementos */
    padding: 1rem;
    list-style: none; /* quitar viñetas */
}

.itemsHabilities {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    cursor: pointer;
    /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.itemsHabilities:hover{
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 8px 20px rgba(239, 192, 192, 0.25);
}



.itemsHabilities img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.itemsHabilities span {
    font-size: 10px;
    color: #334155;
    text-align: center;
}

/*footer*/
.footer{
    margin: 0 auto;
    width: 800px;
    height: 100px;
    display: flex;
    justify-content:space-around ;

}

.footerOne{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}


.footerItems{
    display: flex;
    align-items: center;
    gap:5px;
    color: #475569;
    line-height:1.6;
}

.footerItems button{
    padding: 10px 20px;
    background-color: #F7C5A0;
    transition: background-color 0.3s ease;
    border-style: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.footerItems :hover{
    cursor: pointer;
    color: #F7C5A0;
}

.footerItems img{
    width: 40px;
}

.footerItems :nth-child(3){
    margin-left: 50px;
}



/*blog about*/

.about{
    width: 800px;
    margin: 0 auto;   
}

.about h2{
    margin:20px;
}

.about img{
    object-fit:cover;
    object-position: center 0;
    float: left; /* hace que el texto rodee la imagen */
    shape-outside: circle(); /* opcional para mejorar el flujo del texto */
    clip-path: circle();     /* recorta la imagen en círculo */
    border-radius: 50%;      /* asegura que la imagen sea redonda */
    width: 150px;            /* tamaño de la imagen */
    height: 150px;
    margin-right: 15px;      /* espacio entre la imagen y el texto */
    margin-bottom: 10px;     /* espacio inferior */
    filter: sepia(1) saturate(2) hue-rotate(320deg);
    
}

.about img:hover{
    filter: none;
}

.about p{
    text-align: justify;

}


/*caminos de una ingeniera*/

.titleCaminos{
    display: flex;
    gap: 10px;
}



.personal{
    margin: 100px auto;
    width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sectionCards2{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}


.card2{
    background-color: #FFF9F5; /* Mismo color del body para continuidad */
    color: #f1f5f9;
    overflow: hidden;
    width: 380px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: solid #F7C5A0 1px;
    
    
}

.card2:hover{
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 8px 20px rgba(239, 192, 192, 0.25);
}

.card2 img {
    width: 100%;
    height: 190px;
    object-fit:cover;
    object-position:center 15%;
    margin:0 auto;
    
}

.card2 img:hover{
    width: 100%;
    height: 100%;

}


.paragraphPersonal{
    display: none;
    color: #475569;           /* gris azulado suave para el párrafo */
    font-size: 13px;        /* tamaño para bloques de texto */
    line-height: 1.6;         /* espacio entre líneas para mejor lectura */
}

.btnPersonal{
    display: inline-block;
    background-color: #F7C5A0;
    color: #1a3047;
    text-decoration: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.btnPersonal:hover {
    background-color: #D9D9D9;
}


/*ocultar y mostrar cards*/
/* Oculta las cards extra */
.card2.hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0; /* elimina márgenes que también pueden causar espacio */
    padding: 0; /* elimina padding interno */
    transition: all 0.5s ease;
}

/* Muestra las cards extra */
.card2.show {
    max-height: 500px; /* o suficiente para mostrar el contenido */
    opacity: 1;
   
}

.btnVerMas{

    background-color: #1a3047;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
    border: none;
}


.btnVerMas:hover {
    background-color: #D9D9D9;
    color: #1a3047;
    font-weight: bold;
    cursor: pointer;
}

@media (max-width: 600px){

    .hero{
        width: 100%;
        height: 80px;
    }

    .nav-list{
        display: none;
        flex-direction: column;
        position: fixed;
        top:100px;
        left:0;       
        width: 100%;
        padding: 20px;
        z-index: 1;
    }

   .title{
    font-size: 25px;
   }
    .nav-list.active{
        display: flex;
        align-items: center;
        height: 100vh;
    }

    .menu-hamburguesa{
        display: block;
    }

    .perfil{
        display: flex;
        flex-direction: column;
        gap: 0;
    }



    .botones{
        width: 100%;
        justify-content: center;
    }

    .texto{
        width: 80%;
        display: flex;
        flex-direction: column;
    }

    .mainHabilities{
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .habilitiesCard{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap:0;
    }

    .itemsHabilities{
        width: 60px;
    }

    .education{
        display: flex;
        flex-direction: column;

    }

    .sectionCards{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .imgExperiencia{
        display: none;
    }

    .experienciaTimeLine{
        display: flex;
        flex-direction: column;
        
    }

    .subtitulo{
        text-align: center;
    }

    .about p{
        width: 70%;
        margin: 0 auto;
    }

    .footer {
        width: 100%;
        height: auto;
        padding: 20px 10px;
    }

    .footerOne{
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 300px){
    .cv a{
        font-size: 15px;
    }
}