/* General */
* {
  box-sizing: border-box; /* Asegura que el ancho y alto de los elementos incluya el padding y el borde */
}
body {
   font-family: 'Arial', sans-serif;
   margin: 0;
   padding: 0;
   background-color: #f4f4f4;
   color: #333;
   display: flex;
   flex-direction: column;
   min-height: 100vh; /* Hace que el cuerpo de la página ocupe al menos el 100% de la altura del viewport */
 }

 main {
  flex: 1; /* Permite que el contenido principal crezca y ocupe el espacio disponible */
 }
 
 h1, h2, h3 {
   margin: 0;
 }

 /*Enlaces*/
 a {
   text-decoration: none;
   color: #1494f5;
 }
 
 a:hover {
   color: #221800;
 }

 .a-inicio {
  text-decoration: none;
   color: #ffffff;
 }

 .a-inicio:hover {
  color: #ffee00;
  }
 /* Header */
 .header {
  position: sticky;
  background-color: #1A535C;
  color: white;
  top: 0; 
  left: 0;
  width: 100%;
  max-height: 5%; /* altura del encabezado */
  min-height: 1px;
  transition: opacity 0.3s ease; /* Transición suave */
  z-index: 1000; /* Asegura que el encabezado esté por encima de otros elementos */
 }
 .header.scrolled{
  opacity: 0;
 }
 .header h1 {
  margin-left: 30px;
  margin-top: 5px;
  
 }
 .header nav {
   display: flex;
   justify-content: space-between;
   text-align: center;
   align-items: center;
 }
 
 .nav-links {
   list-style: none;
 }
 
 .nav-links li {
   display: inline-block;
   margin-right: 20px;
 }
 
 .nav-links li a {
   color: white;
   font-weight: bold;
 }
 
 .hero {
   padding: 100px 20px;
   background-color: #54bab3;
   color: white;
   text-align: center;
 }
 
 .hero h2 {
   font-size: 2.5rem;
 }
 
 .hero p {
   font-size: 1.2rem;
 }
 
 .hero-btn {
   background-color: #3a75d4;
   padding: 10px 20px;
   border-radius: 30px;
   color: white;
   font-weight: bold;
   transition: transform 0.3s ease, box-shadow 0.3s ease; /* Añade una transición suave */
 }
 
 .hero-btn:hover {
   background-color: #00a6ff;
   color: rgb(0, 0, 0);
   transform: scale(1.05); /* Agranda la tarjeta en un 5% */
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Aumenta la sombra para el efecto de sobresalir */
 }
 
 /* Secciones */
 section {
   padding: 60px 20px;
   text-align: center;
 }
 
 .sobre-mi, .proyectos, .contacto {
  background-color: white;
  margin: 20px auto; /* Centra los elementos y añade margen vertical */
  max-width: 1200px; /* Ancho máximo de 1200px */
  min-width: 120px; 
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  align-items: center; /* Si usas flexbox, esto funcionará, pero aquí no lo necesitas */
  }
 
 .proyecto-grid {
   display: flex;
   justify-content: space-around;
   max-width: 1200px;
   min-width: 120px;
   margin: 0 auto;
  }
  
  .proyecto-card {
    width: 25%;
    margin-top: 20px;
    max-width: 1200px;
    min-width: 120px;
    padding: 20px;
    background-color: rgb(240, 249, 255);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Añade una transición suave */
  }
  .proyecto-card:hover {
    transform: scale(1.05); /* Agranda la tarjeta en un 5% */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Aumenta la sombra para el efecto de sobresalir */
}
  .proyecto-card ul {
    list-style-type: none; /* Elimina las viñetas */
    padding-left: 0; /* Elimina el espacio de indentación */
  }
  .proyecto-card li {
    margin-bottom: 5px; /* Añade un pequeño margen inferior para espaciado */
    font-size: 20px
  }
 .contacto-btn {
   background-color: #FF6B6B;
   padding: 10px 20px;
   border-radius: 30px;
   color: white;
   font-weight: bold;
   display: inline-block;
   transition: transform 0.3s ease, box-shadow 0.3s ease; /* Añade una transición suave */
 }
 
 .contacto-btn:hover {
   background-color: #813535;
   color: white;
   box-shadow: 0 4px 8px rgba(23, 23, 23, 0.758);
   transform: scale(1.05);
 }
 /* Footer */
 footer {
   background-color: #105c68;
   color: rgb(197, 229, 255);
   padding: 20px 0;
   text-align: center;
   width: 100%; /* Se asegura de que el pie de página ocupe el ancho completo */
   position: relative; /* Garantiza que no tape contenido */
 }
 
 .footer ul {
  list-style-type: none; /* Elimina las viñetas */
  padding-left: 0; /* Elimina el espacio de indentación */
 }

 .footer-table {
   width: 100%;
   max-width: 1200px;
   border-collapse: collapse;
   margin-bottom: 20px;
   margin: auto;
 }
 
 .footer-table th, .footer-table td {
   padding: 10px;
   border: 1px solid #ffffff;
 }
 
 footer p {
   margin: 0;
 }

/* contenedor flotante */
.floating-icon {
  position: fixed;
  bottom: 20px; /* Distancia desde la parte inferior */
  right: 20px; /* Distancia desde la parte derecha */
  z-index: 1000; /* Asegura que esté encima del contenido */
}

/* Botón flotante */
.floating-button {
  background-color: #1A535C;
  color: white;
  border: none;
  border-radius: 50%;
  max-width: 5%;
  min-width: 30px;
  max-height: 5%;
  min-height: 30px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-button:hover {
  transform: scale(1.1); /* Agranda el botón al pasar el cursor */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Aumenta la sombra */
}

/* Menú desplegable */
.floating-menu {
  display: none; /* Oculto por defecto */
  position: absolute;
  bottom: 70px; /* Distancia del menú al botón */
  right: 0;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 200px;
  padding: 10px;
  text-align: left;
  opacity: 0; /* Añadido para transiciones suaves */
  visibility: hidden; /* Inicialmente oculto */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Transición suave */
}

/* Cuando el menú es visible */
.floating-menu.visible {
  display: block; /* Muestra el menú */
  opacity: 1; /* Hace el menú visible */
  visibility: visible; /* Asegura que se muestre correctamente */
  transition: opacity 0.3s ease, visibility 0s linear 0s; /* Transición al aparecer */
}

.floating-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.floating-menu li {
  margin: 10px 0;
}

.floating-menu li a {
  text-decoration: none;
  color: #333;
}

.floating-menu li a:hover {
  color: #1A535C; /* Cambia el color al pasar el cursor */
}