body {
  font-family: "Nunito", sans-serif;
  background-color: #f5f4f4;
  color: #020101;
}
nav {
  background-color: #1A1A1A;
}
/* Hero Section */
#Hero-Section {
  background-image: url("../img/bg-hero.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;  /* opcional: efecto scroll */
  background-size: 50%;
  background-position: left 20%;
  background-color: #020101; /* O el color que quieras de fondo */
}
/* Educacion */
#Educacion{
  background-color: #1A1A1A;
}
/* Mis trabajos */
#Mis-trabajos .image-top {
  height: 250px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#Mis-trabajos {
  background-color: #1A1A1A;
}
.card {
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Sombra más pro */
}
/* Contacto */
#Contacto form label {
  font-weight: 700;
  color: #373a3c;
}
footer {
  background-color: #1A1A1A;
}
footer img {
  transition: all 0.3s ease;  /* Transición suave */
}
footer img:hover {
  transform: translateY(-4px) scale(1.2); /* Sube un poquito y crece */
  filter: brightness(1.5); /* Ilumina */
  cursor: pointer;
}
@media (max-width: 768px) {
  #Contacto form label {
    font-weight: 400;
  }
  .navbar-brand{
    width: 100px;
  }
  #Hero-Section {
    background-size: 80%;
    background-position: center;
  }
}
.btn-back-to-top {
  display: none; /* oculta al inicio */
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 2.5rem;
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.btn-back-to-top:hover {
  opacity: 1;
  transform: scale(1.2);
}

.btn-back-to-top {
  font-size: 2.5rem; /* Más grande */
}