/* Poner todas las reglas a cero para márgenes, padding y box-sizing */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Definición de variables globales para colores y medidas */
:root {
  --h2-size: 16px;
  --color-body:        #F9FAFB;      
  --color-principal:   #FFFFFF;      
  --color-header:      #E2E8F0;    
  --color-tarjetas:    #E2E8F0;
  --color-enlaces:     #F1F5F9;  
  --color-barraProgeso:#E2e8f0; 
  --accent:            #64748B;      
  --accent-hover:      #475569;   
  --texto-principal:   #0F172A;
  --color-lluvia: rgba(100,116,139,0.4);           
  --fuente-principal: 'Arial', sans-serif;
  --radio-grande: 2.5rem;
  --padding: 2rem;
  --margin:1.5rem;
  --tamaño-letra-tarjetas:0.85rem;
  --desplazamiento:2rem;
  --tamaño-letra-enlaces:0.90rem;
  --radio-pequeño:1rem;
  
}


/* Eliminación de estilos de lista por defecto en toda la página */
ul {
  list-style: none;
  padding: 0;  
  margin: 0;   
}



/*configuracion general de la pagina: tamaño,fondo flex y sombra*/
body {
width: 70vw;
min-height: 94vh;
margin: 4vh auto;
font-family: var(--fuente-principal);
background-color: var(--color-body);
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
box-shadow: 0 15px 25px rgba(15, 23, 42, 0.5), 
            0 30px 60px rgba(30, 58, 138,
            0.4), 0 50px 100px rgba(59, 130, 246, 0.3),
            0 0 120px rgba(30, 58, 138, 0.2);
overflow-y: auto;
border: 2px solid rgba(148, 163, 184, 0.1);
border-radius: var(--radio-grande);
color: var(--texto-principal);
}

/* Estilos de la cabecera lateral: alineación vertical de elementos y fondo diferenciado */
header {
display: flex;
flex-direction: column;
padding: var(--padding);
align-items: center;
text-align: center;
background-color: var(--color-header);
flex: 0 0 30%; /* 30% fijo */
border-top-left-radius: var(--radio-grande);
box-shadow: 0 1rem 3rem rgba(180, 6, 6, 0.1);
}

/* Estilo de la imagen de perfil: forma circular y borde destacado */
header div img {
  margin-top: 1rem;
  padding: 1rem;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 6px solid var(--color-principal);
}

/* Contenedor de la navegación principal para espaciado interno */
nav{
    margin-top:1rem;
    padding:1rem;
    
 }

 /* Estilo de los botones del menú: fondo claro y bordes redondeados */
 nav ul li {
  background-color:var(--color-enlaces);
  padding: 1rem;
  margin:0.8rem 0;
  font-size:var( --tamaño-letra-enlaces);
   border-radius:var( --radio-pequeño); 
}
/* Efecto visual al pasar el ratón por los botones del menú */
nav ul li:hover {
  background-color: var(--accent);
}

/* Cambio de color del texto del menú al activarse el hover */
nav ul li:hover a {
  color: var(--color-principal);
}
/* Estilo de los enlaces dentro del menú: quitar subrayado y heredar color */
nav ul li a {
  text-decoration: none;
  color: inherit;
}


/* poner flex para colocar el contenido en columna,alineado central*/
main {
display: flex;
flex-direction: column;
padding: var(--padding);
align-items: stretch;
text-align: left;
background-color: var(--color-principal);
flex: 0 0 70%; /* 70% fijo */
border-top-right-radius: var(--radio-grande);
color: var(--texto-principal);
}

/* Estilo general de los títulos de sección y tarjetas */
h2, h3 {
  color: var(--texto-principal);
  margin-bottom: 1.2rem;
   width: 100%;
  margin-top:1rem;
}

/* Sección de perfil: ajuste de márgenes para separación visual */
#perfil{
  margin-bottom: var( --margin);
  margin-top: var( --desplazamiento);
}


/* colocar flex, alinear al principio,wrap para q sea responsive,dar margenes*/

#formacion{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:5rem;
  gap: 1.5rem;
   margin-top: var( --desplazamiento);

  
}
/* Diseño de tarjetas de formación: fondo, centrado y transición de animación */

#formacion article{
  background-color: var(--color-tarjetas);
  flex:1 1 15rem;
  text-align: center;
   border-radius: var(--radio-grande);
   margin-top: 3rem;
   transition: transform 0.3s ease;
  padding: 1.2rem;
  font-size: var(--tamaño-letra-tarjetas);

}


/* hover para ampliar, efecto lupa,*/
#formacion article:hover {
    transform: translateY(-0.5rem) scale(1.10);
}

/* añadir flex,margen,flex wrap para salto de linea,alienado,*/
#Tecnicos{
display:flex;
flex-wrap:wrap;
gap: 1.5rem;
width: 100%;
align-items: stretch;
 margin-top: var( --desplazamiento);

}
  
/* Fondo de la barra de progreso: utiliza variables para coherencia de color */
.barra-progreso {
    background-color:var( --color-barraProgeso); 
    width: 100%;
    height: 0.8rem;           
    border-radius:var( --radio-pequeño);       
    margin-top: 0.5rem;
    overflow: hidden;         
}

/* Parte activa de la barra: indica el nivel y define la animación de carga */
.nivel {
    background-color: var(--accent);
    height: 100%;
   border-radius:var( --radio-pequeño); 
    transition: width 1s ease-in-out; 
}

/* Contenedor individual de cada habilidad */
.Tecnicos-articulo {
   flex: 0 0 calc(50% - 0.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem;
}

/* contenedor general de la barra de habilidades */
.contenedor {
  width: 100%;
  margin-top:1rem;
}

/* añadir flex,margen,flex wrap para salto de linea,alienado, */
#experiencia{
 display:flex;
 flex-wrap:wrap;
 gap: 1.5rem;
 width: 100%;
 align-items: stretch;
 margin-top: var( --desplazamiento);
}


/* colocacion de parametros de la tarjetas */
.habilidad-experiencia{
  background-color: var(--color-tarjetas);
  flex:1 1 20rem;
  text-align: center;
  border-radius: var(--radio-grande);
   margin-bottom: 3rem;
 
  font-size: var(--tamaño-letra-tarjetas);

}



/* hover para ampliar, efecto lupa,*/
.habilidad-experiencia:hover {
    transform: translateY(-0.5rem) scale(1.10);
}


/* Sección de prácticas: cuadrícula flexible para mostrar proyectos realizados */
#practica{
display:flex;
 flex-wrap:wrap;
 gap: 1.5rem;
 width: 100%;
 align-items: stretch;
 margin-top: var( --desplazamiento);
}

/* colocacion de parametros de la tarjetas */
.habilidad-practica{
  background-color: var(--color-tarjetas);
  flex:1 1 auto;
  text-align: center;
  border-radius: var(--radio-grande);
   margin-bottom: 3rem;
  transition: transform 0.3s ease;
  font-size: var(--tamaño-letra-tarjetas);
  width: 100px;
 
}


/* hover para ampliar, efecto lupa,*/
.habilidad-practica:hover {
    transform: translateY(-0.5rem) scale(1.10);
}

/* añadir flex,margen,flex wrap para salto de linea,alienado, */
#habilidad{
display:flex;
 flex-wrap:wrap;
 gap: 1.5rem;
 width: 100%;
 align-items: stretch;
 margin-top: var( --desplazamiento);

}

/* colocacion de parametros de la tarjetas de habilidades*/
.habilidad-article{
  background-color: var(--color-tarjetas);
  flex:1 1 auto;
  text-align: center;
  border-radius: var(--radio-grande);
   margin-bottom: var(--desplazamiento);
  transition: transform 0.3s ease;
  font-size: var(--tamaño-letra-tarjetas);
  width: 100px;

}

/* hover para ampliar, efecto lupa,*/
.habilidad-article:hover {
    transform: translateY(-0.5rem) scale(1.10);
}

/* Estilos del pie de página: alineación horizontal y fondo oscuro */
footer {
flex: 0 0 100%; 
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 20px;
margin-top: 3.5rem;
background-color: var(--color-header);
border-bottom-left-radius: var(--radio-grande);
border-bottom-right-radius: var(--radio-grande);

}
/* enlaces del footer */
footer a{
  padding:0.5rem;
  font-size:var(--tamaño-letra-enlaces);

}

/* Definición del movimiento de caída */
@keyframes fall {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(110vh); /* Cae hasta pasar el final de la pantalla */
    }
}

/* efecto lluvia */
.raindrop {
    position: fixed; 
    top: -20px;       
    width: 2px;
    height: 15px;
    background: var(--color-lluvia);
    animation: fall linear infinite;
}
/* cambio de tamaño de las imagenes*/
img{
  width: 10rem;
  height: 10rem;
}

  

   /*Media query para pantallas medianas (hasta 1024px)*/
@media (max-width: 1024px) {

  /* Coloca toda la página en columna y ajusta márgenes */
  body {
    flex-direction: column;
    flex-wrap: wrap;
    width: 96vw;
    max-width: none;
    margin: 1.5vh auto;
    min-height: auto;
    overflow-y: auto;
    border-radius: 1.5rem;
  }

  /* Ajusta la cabecera a ancho completo */
  header {
    flex: 0 0 auto;
    width: 100%;
    padding: 1.8rem 1.2rem;
    border-radius: var(--radio-grande) var(--radio-grande) 0 0;
    box-shadow: none;
  }

  /* Ajusta el contenido principal a ancho completo */
  main {
    flex: 0 0 auto;
    width: 100%;
    padding: 1.5rem 1.2rem;
    border-radius: 0 0 var(--radio-grande) var(--radio-grande);
  }

  /* Coloca las secciones en columna */
  #formacion,
  #habilidad,
  #experiencia,
  #practica {
    flex-direction: column;
    gap: 1.2rem;
  }

  /* Fuerza todas las tarjetas a ocupar el 100% */
  #formacion article,
  .habilidad-article,
  .habilidad-experiencia,
  .habilidad-practica {
    flex: 0 0 100%;
    width: 100%;
  }

  /* Aumenta la altura de la barra de progreso en pantallas pequeñas */
  .barra-progreso {
    height: 1rem;            
  }

  /* Ajusta el pie de página a disposición vertical */
  footer {
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 0 0 var(--radio-grande) var(--radio-grande);
  }
}

 /*Media query para pantallas medianas (hasta 900px)*/

@media (max-width: 900px) { 

    /* Ajusta el contenedor principal a disposición vertical */
    body {
        width: 94vw;          
        margin: 3vh auto;
        flex-direction: column;  
        min-height: auto;
        border-radius: 1.5rem;    
    }

    /* Ajusta la cabecera a ancho completo */
    header {
        flex: 0 0 auto;        
        width: 100%;
        padding: 1.5rem 1rem;
        border-radius: var(--radio-grande) var(--radio-grande) 0 0;
        box-shadow: none;
    }

    /* Ajusta el área principal a ancho completo */
    main {
        flex: 0 0 auto;
        width: 100%;
        border-radius: 0 0 var(--radio-grande) var(--radio-grande);
        padding: 1.5rem 1rem;    
    }

    /* Reduce el espacio entre tarjetas en secciones principales */
    #formacion,
    #habilidad,
    #experiencia,
    #practica {
        gap: 1rem;
    }

    /* Fuerza las tarjetas de habilidades a ocupar toda la fila */
    .habilidad-article {
        flex: 0 0 100%;         
    }

    /* Fuerza las tarjetas principales a ocupar toda la fila */
    .habilidad-experiencia,
    #formacion article,
    .habilidad-practica {
        flex: 0 0 100%;          
    }

    /* Coloca el footer en columna */
    footer {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
        border-radius: 0 0 var(--radio-grande) var(--radio-grande);
    }
}


/* Media query para pantallas medianas (hasta 650px)  */
@media (max-height: 650px) {

  /* Reduce márgenes verticales generales */
  body {
    margin: 1vh auto;
  }

  /* Reduce el padding de la cabecera */
  header {
    padding: 1.2rem 1rem;
  }

  /* Reduce el padding del contenido principal */
  main {
    padding: 1rem;
  }

  /* Ajusta el tamaño y separación de los títulos */
  h2 {
    margin-bottom: 0.8rem;
    font-size: 1.4rem;
  }

  /* Reduce el espacio superior entre secciones */
  section {
    margin-top: 1rem;
  }
}