* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@keyframes slideInTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  main {
    grid-template-columns: 1fr;
  }
  nav, .foto-perfil, .info-personal {
    width: 100%;
  }
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 30px;
  padding: 10px;
  background-color: #f4f4f4;
  color: #333;
}

main {
  display: grid;
  grid-template-columns: 100%;  /* Cambiado a 100% para una sola columna */
  gap: 20px;
  padding: 30px;
  max-width: auto;
  margin: auto;
}



.navbar {
  background: linear-gradient(90deg, #003049, #1d3557);
  padding: 15px 25px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  animation: slideInTop 1s ease;
}

.nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.nav-list li a {
  color: #fff;
  text-decoration: none;
  padding: 8px 14px;
  background-color: transparent;
  border-radius: 6px;
  transition: background 0.3s;
  font-weight: bold;
}

.nav-list li a:hover {
  background-color: #f77f00;
  transform: scale(1.05);
}

.fila {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-around;
  padding: 20px;
}
.columna {
  flex: 1 1 300px;
  min-width: 280px;
}
hr {
  border: none;
  height: 1.5px;
  background: linear-gradient(to right, #003049, #fcbf49, #003049);
  margin: 30px 0;
}

.parrafo {
              text-align: justify;
              line-height: 1.5;
              margin: 10px 0;
              width: 95%;
              margin-left: 20px;
            }

.profile-image {
              display: flex;
              margin: 10px;
              border-radius: 50%;
              align-items: center;
              
            }

    .title {
              color: #2c3e50;
              text-align: center;
              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }

.h2 {
              color: #2c3e50;
              text-align: left;
              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
              margin-left: 30px;
            }

            .h3 {
              color: #2c3e50;
              text-align: left;
              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
              margin-left: 1px;
            }

            ul {
              color: #2c3e50;
              text-align: left;
              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
              font-size: 16px;
              margin-left: 70px;
            }

            .li {
              margin-bottom: 10px;
              margin-left: 30px;
            }
   table {
              width: auto;
              border-collapse: collapse;
              margin: 5px 0;
              background-color: rgb(208, 216, 224);
            }