:root {
    /* COLORES */
    --whiteColor: #ffffff;
    --whiteColor-70: #ffffffb3;
  
    --yellowColor: rgba(255, 255, 0, 0.886);
    --blueColor: rgba(0, 128, 255, 0.909);
    --redColor: rgba(255, 38, 0, 0.909);
    --buttonSocialColor: #222222;
    --buttonSocialColor__hover: rgba(54, 54, 54, 0.297);
  
    /* TAMAÑO DE TEXTO */
    --navLink__textSize: clamp(14px, 4vw, 22px);
    --principalTitleSize: clamp(1.8rem, 6vw, 3rem);
    --principalParagraphSize: clamp(1rem, 3vw, 1.3rem);
  
    --SectionTitleSize: clamp(1.9rem, 6vw, 2.3rem);
    --ExperienciaTitleSize: clamp(1.3rem, 5vw, 1.9rem);
    --ExperienceParagraphSixe: clamp(1rem, 4vw, 1.3rem);
  }


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

  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: Arial, sans-serif;
    padding-top: 90px;
    min-height: 100dvh;
    
    
     background: -webkit-linear-gradient(to top, #434343, #000000); 
    
     background: linear-gradient(to top, #434343, #000000); 

   
 
  
    font-family: system-ui;
    scroll-behavior: smooth;
  }

  a {
    border: 3px;
    height: auto;
  }


  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Un poco más pequeño para móviles */
    z-index: 1000;
    /*background: rgba(255, 255, 255, 0.9); /* Un poco de transparencia */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }

  .navbar-nav .nav-link {
    color: var(--whiteColor); /* Color inicial */
    transition: color 0.3s ease-in-out, border-bottom 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover {
    color: var(--redColor) !important; /* Cambio de color con mayor prioridad */
    border-bottom: 2px solid var(--redColor); /* Subrayado elegante */
    padding-bottom: 3px;
}



  .navbar-toggler {
    border: none;
    outline: none;
  }

  img {
    max-width: 100%;
  }
  
  .container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    
  }
  
   /*----------------- SECCION SOBRE MI ------------------------*/

  .principalSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 80px;
    padding: 30px 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  .principalSection h1 {
  font-size: var(--principalTitleSize);
  color: var(--whiteColor);
  margin-bottom: 10px;
  }

.principalSection h2 {
  font-size: var(--principalParagraphSize);
  color: antiquewhite;
  margin-bottom: 20px;
}

.principalSection p {
  color: var(--whiteColor);
  font-size: var(--principalParagraphSize);
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}


.principalSection .container {
  display: flex;
  flex-direction: row; /* Distribuye en dos columnas */
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

.principalSection h1 {
  font-size: var(--principalTitleSize);
  color: var(--whiteColor);
}

.principalSection h2 {
  font-size: var(--principalParagraphSize);
  color: antiquewhite;
}
 
.principalSection .imagen {
  flex: 1;
  display: flex;
  justify-content: center;
} 


  .principalSection ul {
    display: flex;
    justify-content: center;
    align-items: center; /* Asegura alineación vertical */
    gap: 10px;
    flex-wrap: wrap;
    list-style: none; /* Elimina los estilos por defecto de la lista */
    padding: 0; /* Evita margen adicional en algunos navegadores */
    margin: 0 auto; /* Centra la lista */
    max-width: 90%; /* Asegura que no se desborde */
  }


.socialButton:hover svg {
  fill: whitesmoke !important; /* Cambia el color del icono en hover */
}
  
  .principalSection ul a {
    background-color: var(--buttonSocialColor);
    color: var(--whiteColor);
    padding: 7px 25px;
    border: 1px solid rgba(255, 255, 255, 0.308);
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .principalSection P {
    color: var(--whiteColor);
  }

  /*------------------------- ESTUDIO SECTION ----------------------*/
  .estudiosSection {
    margin: 50px auto;
    scroll-margin-top: 90px;
  }

  .estudiosSection h2 {
    color: var(--whiteColor);
    font-size: var(--SectionTitleSize);
    margin-bottom: 30px;
  }
  
  .estudiosSection h2 svg {
    width: 20px;
    height: 20px;
  }

  .estudio-item {
    color: var(--whiteColor);
  }

  .estudio-grade {
    color: rgb(82, 152, 196);
  }
  
  /* EXPERIENCE SECTION */
  
  .experienceSection {
    margin: 50px auto;
    scroll-margin-top: 90px;
  }
  
  .experienceSection h2 {
    color: var(--whiteColor);
    font-size: var(--SectionTitleSize);
    margin-bottom: 30px;
  }
  
  .experienceSection h2 svg {
    width: 20px;
    height: 20px;
  }
  
  
  .experienceList {
    border-inline-start: 1px solid white;
    position: relative;
  }
  
  .experienceItemList {
    padding-left: 20px;
    padding-bottom: 40px;
  }
  
  .experienceItemList time {
    color: rgba(213, 213, 213, 0.639);
  }
  
  .experienceItemList h3 {
    color: rgb(82, 152, 196);
    font-size: var(--ExperienciaTitleSize);
    text-wrap: pretty;
  }
  
  .experienceItemList p {
    color: white;
    margin: 0 0 30px 0;
    font-size: var(--ExperienceParagraphSixe);
  }
  
  .experienceItemList a {
    background-color: var(--whiteColor);
    padding: 10px 25px;
    border-radius: 10px;
  
    font-weight: 700;
    color: black;
  
    width: max-content;
  
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .experienceItemList a:hover {
    color: rgb(82, 152, 196);
  }
  
  
  .decorativeCircleList {
    height: 10px;
    width: 10px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
  
    left: -5px;
    margin-top: 7px;
  }

    
  /* STACK TECNOLÓGICO */
  .StackSection {
    margin: 50px auto;
    scroll-margin-top: 90px;
  }

  .StackSection h2 {
    color: var(--whiteColor);
    font-size: var(--SectionTitleSize);
    margin-bottom: 30px;
  }

  .StackSection h2 svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  .StackSection h3 {
    color: rgb(82, 152, 196);
    font-size: var(--ExperienciaTitleSize);
    margin-bottom: 10px;
  }

  .StackSection ul {
    list-style: none;
    padding-left: 0;
  }


  .StackSection ul li {
  color: var(--whiteColor);
  font-size: var(--ExperienceParagraphSixe);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.StackSection ul li i {
  min-width: 20px;
  color: var(--whiteColor-70);
}

  .StackSection ul li::before {
    /* content: "✔️"; */
    position: absolute;
    left: 0;
  }
  
  
  /* PROJECT SECTION */
  .projectsSection {
    scroll-margin-top: 90px;
  }
  
  .projectsSection h2 {
    color: var(--whiteColor);
    font-size: var(--SectionTitleSize);
    margin-bottom: 30px;
  }
  
  .projectsSection h2 svg {
    width: 20px;
    height: 20px;
  }

  .project-img-small {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}


  /* Experience Section*/
  
  .experienceItem {
    margin-bottom: 40px;
  }
  
  .experienceItem h3 {
    font-size: var(--ExperienciaTitleSize);
    color: rgb(82, 152, 196);
  }
  
  .experienceItem p {
    font-size: var(--ExperienceParagraphSixe);
    color: var(--whiteColor);
    margin-bottom: 20px;
  }
  
  .experienceItem .containerIcons {
    display: flex;
    align-items: center;
    gap: 10px;
  
    margin-bottom: 20px;
  }
  
  .experienceItem .containerIcons span {
    display: flex;
    align-items: center;
    color: var(--whiteColor);
    border: 1px solid rgba(255, 255, 255, 0.598);
    padding: 4px 20px;
    border-radius: 30px;
  }
  
  .experienceItem .containerIcons span svg {
    width: 40px;
    height: 40px;
  }
  
  .htmlIcon {
    color: orange;
  }
  
  .cssIcon {
    color: rgb(50, 138, 232);
  }
 

  /* Estilos para moviles */
  @media (min-width: 700px) {
    .navLink {
      font-size: var(--navLink__textSize);
      font-weight: 600;
      color: var(--whiteColor);
      
    }   
   
  }


  @media (max-width: 991px) { /* Aplica en pantallas menores a 992px (Bootstrap lg) */

    /* .header {
      background-color: #000000;
    } */
      
    .navbar-nav {
      width: 100%;
      /*background: rgba(32, 31, 31, 0.95); */
      padding: 10px 0;
    }

    .navbar-nav .nav-item {
      padding: 10px 0;
    }

    .navbar-toggler {
      border: none;
      outline: none;
      background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
      padding: 10px;
      border-radius: 5px;
    }

  }  
  @media (max-width: 768px) {
    .principalSection .container {
        flex-direction: column-reverse; 
        text-align: center; /* Centra el contenido */
    }

    .imagen img {
        max-width: 100%;
        height: auto;
    }

    .project-img-small {
        max-width: 80%;
    }


    .navbar-nav .nav-link {
      color: var(--whiteColor); /* Color inicial */
      transition: color 0.3s ease-in-out, border-bottom 0.3s ease-in-out;
  }
  
  .navbar-nav .nav-link:hover {
      color: var(--redColor) !important; /* Cambio de color con mayor prioridad */
      border-bottom: 2px solid var(--redColor); /* Subrayado elegante */
      padding-bottom: 3px;
  }
  }


  .navbar-toggler-icon {
      filter: invert(1); /* Hace el icono blanco */
  }

  .navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
    
  
    .navLink:nth-child(1):hover {
      color: var(--yellowColor);
    }
  
    .navLink:nth-child(2):hover {
      color: var(--blueColor);
    }
  
    .navLink:nth-child(3):hover {
      color: var(--redColor);
    }
  
    .principalSection p {
      margin: 25px 0;
    }
  
    .principalSection ul {
      gap: 20px;
    }
  
    .principalSection ul a {
      transition: transform, background-color, 0.3s;
    }
  
    .principalSection ul a:hover {
      background-color: var(--buttonSocialColor__hover);
      transform: scale(1.1);
    }

    /* footer Section*/

    /* .footer {
      text-align: center;
      padding: 20px;
      background-color: #f8f9fa;
      color: #333;
      font-size: 14px;
      border-top: 1px solid #ddd;
  }
  
  .footer .social-links {
      margin-top: 10px;
      display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  .social-links ul {
    display: flex;
    justify-content: center; 
    gap: 20px; 
    list-style: none;
    padding: 0;
  }
  
  .footer .social-links a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
  }
  
  .footer .social-links a:hover {
      text-decoration: underline;
      color: #0056b3 !important;
  }
   */
    .footer {
  text-align: center;
  padding: 20px;
  background-color: #f8f9fa;
  color: #333;
  font-size: 14px;
  border-top: 1px solid #ddd;
}



    .footer-social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 0;
  list-style: none;
}

.footer-social-buttons li {
  display: inline-block;
}

.socialButton {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all 0.3s ease-in-out;
  background-color: #222;
  color: white;
}

.socialButton i {
  font-size: 1.2rem;
}

/* Colores por marca */
.socialButton.email {
  background-color: #0072C6;
}

.socialButton.github {
  background-color: #181717;
}

.socialButton.linkedin {
  background-color: #0A66C2;
}

.socialButton.whatsapp {
  background-color: #25D366;
}

/* Hover */
.socialButton:hover {
  transform: scale(1.08);
  background-color: white;
  color: #000;
  border: 2px solid currentColor;
}

.botoncv:hover {
  transform: scale(1.08);
  background-color: gray;
  color: #000;
  border: 2px solid currentColor;
}


  @media (max-width: 600px) {
    .footer {
      background-color: #f8f9fa;
      color: #333;
  }
    .footer .social-links {
        /* flex-direction: column;
        gap: 5px; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .social-links ul {
      display: flex;
      justify-content: center;
      padding: 0;
    }

    .social-links a.socialButton {
      margin: 0 10px; /* Espacio entre los botones */
    }
    .footer .social-links a:hover {
      color: #00bfff !important; /* Cambio de color más visible en hover */
  }

  .project-gallery img {
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.project-gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

  }