/* body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: radial-gradient(circle at center, #0d1b2a, #000);
      color: white;
      padding-top: 90px;
    } */

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(circle at center, #0d1b2a, #000);
    color: white;
    padding-top: 90px;
  }
/* 
  reglas nuevas  */

  .navbar {
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
}

.navbar-brand {
  flex-shrink: 0;
}

.navbar-toggler {
  flex-shrink: 0;
  margin-left: auto;
}

.navbar-collapse {
  min-width: 0;
  max-width: 100%;
}

.navbar-nav,
.navbar-nav .nav-item,
.navbar-nav .nav-link {
  max-width: 100%;
}

/* hasta aqui */

    .navbar-nav .nav-link {
      position: relative;
      color: white;
      padding-bottom: 5px;
      transition: color 0.3s;
    }

    .navbar-nav .nav-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3px;
      width: 0;
      background: linear-gradient(90deg, #0052D4, #4364F7, #6FB1FC, #2AFADF, #00FFCB);
      transition: width 0.3s ease;
    }

    .navbar-nav .nav-link:hover::after,
    .navbar-nav .nav-link.active::after {
      width: 100%;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
      color: #6FB1FC;
      /* Opcional: cambia el color del texto al pasar */
    }

    .navbar-brand img {
      transition: transform 0.3s ease;
    }

    .navbar-brand:hover img {
      transform: scale(1.15);
    }

    .hero {
      min-height: calc(100vh - 90px);
      /* altura mínima, permite crecer si el contenido es mucho */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      box-sizing: border-box;
      position: relative;
      padding: 0 20px 80px;
      z-index: 1;
      /* espacio inferior para la flechita */
    }


    .hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:
        url('/img/circuito.jpg') center/cover no-repeat,
        linear-gradient(90deg, #000000, #000000);
      /* fondo negro */
      opacity: 0.15;
      /* ajusta según lo que quieras que se vea */
      z-index: 0;
      pointer-events: none;
      /* para que no bloquee clics */
    }



    .nombre-gradiente {
      font-weight: 700;
      font-size: 2.5rem;
      background: linear-gradient(90deg, #0052D4 0%, #4364F7 25%, #6FB1FC 50%, #2AFADF 75%, #00FFCB 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      display: inline-block;
    }



    .profile-border {
      display: block;
      margin: 0 auto 1rem auto;
      /* centrado y separación hacia abajo */
      padding: 4px;
      background: linear-gradient(90deg, #0052D4, #4364F7, #6FB1FC, #2AFADF, #00FFCB);
      border-radius: 50%;
      width: fit-content;
    }



    .profile-img {
      width: 203px;
      height: 203px;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }

    .navbar-brand img {
      transition: transform 0.3s ease;
    }

    .navbar-brand:hover img {
      transform: scale(1.20);
    }

    .tech-tags .badge {
      font-size: 1rem;
      margin: 0.25rem;
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
      padding: 0.6em 1em;
      border-radius: 50px;
      border: 1px solid #17a2b8;
      transition: transform 0.3s ease;
    }

    .tech-tags .badge:hover {
      transform: scale(1.18);
    }

    .scroll-indicator {
      animation: bounce 2s infinite;
      margin-top: 30px;
    }



    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(10px);
      }
    }


    .projects-section,
    .skills-section,
    .about-section,
    .testimonios-section {
      background-color: #0a0f1a;
    }

    .progress-bar {
      background: linear-gradient(90deg, #0052D4 0%, #4364F7 25%, #6FB1FC 50%, #2AFADF 75%, #00FFCB 100%);
      color: white;
      font-weight: bold;
      text-align: center;
    }

    .progress {
      background-color: #1e1e1e;
      height: 1.2rem;
      border-radius: 50px;
      overflow: hidden;
    }
    .skills .progress {
      background-color: #2b2b2b;
    }

    .skills .progress-bar {
      background-color: #00FFCB;
    }

    .whatsapp-fijo {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 999;
    }

    .proyectos img {
      width: 100%;
      height: auto;
      transition: transform 0.3s ease;
    }

    .proyectos img:hover {
      transform: scale(1.08);
    }

    .gradient-text {
      background: linear-gradient(90deg, #0052D4, #4364F7, #6FB1FC, #2AFADF, #00FFCB);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .btn-linkedin {
      background: none;
      border: none;
      padding: 0;
    }

    .btn-linkedin img,
    .btn-primary,
    .btn-secondary {
      transition: transform 0.3s ease;
    }

    .btn-linkedin:hover img,
    .btn-primary:hover,
    .btn-secondary:hover {
      transform: scale(1.18);
    }

    .redes-contacto {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      margin-top: 20px;
    }

    .redes-contacto a img {
      width: 50px;
      transition: transform 0.3s ease;
    }

    .redes-contacto a img:hover {
      transform: scale(1.1);
    }


    #contacto {
      background: radial-gradient(circle at center, #041b2d, #050a1e);
      /* fondo diferente */
      padding: 4rem 1rem;
    }

    .contact-card {
      background-color: rgba(255, 255, 255, 0.02);
      /* fondo suave tipo glass */
      border-radius: 20px;
      padding: 2.5rem;
      max-width: 600px;
      margin: 0 auto;
      box-shadow: 0 0 15px rgba(0, 255, 203, 0.1);
      /* sombra luminosa sutil */
      backdrop-filter: blur(4px);
    }

    .site-footer{
  background:#0b0e13;
  color:#b6c2cf;
  border-top:1px solid rgba(255,255,255,.06);
  padding:12px 0;
  font-size:.95rem;
}
.site-footer .container{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.site-footer .sep{ color:#6b7681; opacity:.6; }
.site-footer .brand{ color:#9cc3ff; font-weight:600; }
.site-footer .footer-link{ color:#79b8ff; text-decoration:none; }
.site-footer .footer-link:hover{ color:#2afadf; text-decoration:underline; }




/* adicional */

/* Avatar recortado al rostro */
.avatar-face {
  width: 203px;             /* igual que tu .profile-img */
  height: 203px;
  border-radius: 50%;
  object-fit: cover;        /* recorta sin deformar */
  object-position: 50% 28%; /* ← ajusta aquí el “encuadre” al rostro */
  display: block;
}

/* Marco con degradado (puedes reusar tu .profile-border si prefieres) */
.avatar-border {
  display: inline-block;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(90deg,#0052D4,#4364F7,#6FB1FC,#2AFADF,#00FFCB);
  transition: transform .25s ease;
}
.avatar-border:hover { transform: scale(1.03); cursor: pointer; }

.profile-img{
  /* ya tienes width/height/border-radius/object-fit */
  object-position: 50% 28%; /* ajusta el encuadre al rostro */
}

.profile-border{ cursor: pointer; } /* opcional: mano al pasar */

/* Modal reducido para foto */
.modal-dialog.foto-perfil {
  max-width: 30%;   /* ancho limitado */
}

.modal-content.foto-perfil {
  background: transparent;  /* sin fondo extra */
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content.foto-perfil img {
  width: 100%;
  height: auto;
  border-radius: 12px; /* esquinas redondeadas */
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
}



/* Modal reducido para la foto */
.modal-dialog.foto-perfil {
  max-width: 40%;   /* PC */
  margin: auto;
}

.modal-content.foto-perfil {
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content.foto-perfil img {
  width: 100%;
  height: auto;
  border-radius: 12px; /* esquinas redondeadas */
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  .modal-dialog.foto-perfil {
    max-width: 90%; /* se expande en móvil */
  }
}

/* agrrgamos tambien  */

@media (max-width: 991.98px) {
  body {
    padding-top: 66px;
  }

  .navbar {
    padding-left: 15px;
    padding-right: 15px;
  }

  .navbar-collapse {
    width: 100%;
    overflow-x: hidden;
  }

  .navbar-nav {
    width: 100%;
    padding-top: 10px;
  }

  .navbar-nav .nav-link {
    width: 100%;
    white-space: normal;
  }

  .hero {
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 66px);
    padding: 30px 15px 60px;
    overflow-x: hidden;
  }

  section,
  header,
  footer,
  .container,
  .row {
    max-width: 100%;
  }

  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: translate3d(0, 30px, 0);
  }
}

@media (max-width: 576px) {
  .nombre-gradiente {
    max-width: 100%;
    font-size: 2rem;
    overflow-wrap: anywhere;
  }

  .profile-img,
  .avatar-face {
    width: 170px;
    height: 170px;
  }

  #contacto {
    padding: 3rem 15px;
  }

  .contact-card {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1rem;
  }

  .contact-card .btn {
    white-space: normal;
  }

  .redes-contacto {
    flex-wrap: wrap;
    max-width: 100%;
    gap: 14px;
  }
}

/* hasta aqui */

.skill-55{width:55%}
.skill-60{width:60%}
.skill-80{width:80%}
.skill-85{width:85%}
.skill-90{width:90%}
.skill-95{width:95%}