header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(224, 224, 224); /* Color de fondo del encabezado */
    color: black;
    padding: 10px 0; /* Espacio alrededor del contenido del encabezado */
    display: flex; /* Activate Flexbox layout */
    justify-content: space-between; /* Distribute elements horizontally */
    align-items: center; /* Align elements vertically */
    font-family: Arial;
    font-size: 13;
    background-size: cover; /* Ensures image covers the entire header */
    background-position: center; /* Centers the image horizontally and vertically */
    border: 1px solid #000000;
  }

  .imagen {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
    -webkit-box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
    -moz-box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
    box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
  }
  
  .imagen.visible {
    opacity: 1;
    transform: scale(1);
    -webkit-box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
    -moz-box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
    box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
  }
  
  nav ul {
    list-style: none; /* Elimina los puntos de viñeta predeterminados */
    margin: 0;
    padding: 0;
    text-align: center; /* Centra los elementos horizontalmente */
    background-color: rgb(224, 224, 224);
    color: black;
  }
  
  nav li {
    display: inline-block; /* Permite que los elementos se ubiquen uno al lado del otro */
    margin: 13px; /* Agrega espacio entre los elementos del menú */
    background-color: rgb(224, 224, 224);
    color: black;
  }
  
  nav a {
    text-decoration: none; /* Elimina la decoración de subrayado */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Añade una transición suave */
    background-color: rgb(224, 224, 224);
  }
  
  nav a:hover {
    color: black; /* Cambia el color al pasar el ratón */
    font-weight: bold; /* Vuelve negritas el texto al pasar el ratón */
    background-color: rgba(224, 224, 224, 0.8);
  }
  
  nav a.active {
    text-decoration: underline; /* Subraya el enlace activo */
    font-weight: bold; /* Opcional: también puedes hacer el texto negrita */
    background-color: rgb(224, 224, 224);
  }
  
  
  .header-left,
  .header-nav,
  .header-right {
    display: flex; /* Make individual sections flexible */
    align-items: center; /* Align content within each section vertically */
    background-color: rgb(224, 224, 224);
    color: black;
  }

  /* Optional: Remove unnecessary margins */
  .header-left,
  .header-nav,
  .header-right {
    margin: 0;
  }

  .header-right a{
    color: #000000;
  }

  .row {
    display: flex;
    justify-content: space-around; /* Alinea los elementos horizontalmente con espacio alrededor */
  }
  
  a {
    color: black;
  }
  
  .servicio {
    margin: 20px; /* Ajusta el valor según tus necesidades */
  }
  
  h2{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 30;
  }

  h3{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 25;
  }

  h1{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 40;
  }

  .card {
    align-items: center; /* Align content within each section vertically */
    width: 400px;
    text-align: center;
    background-color: white;
    justify-content: space-around;
    margin: 20px;
    border: 1px solid #000000;
    -webkit-box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
    -moz-box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
    box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
    padding: 20px; /* Añade espacio entre el borde y el contenido */
  }
  
  .cards {
    border: 1px solid #000000;
    align-items: center; /* Align content within each section vertically */
    text-align: justify;
    justify-content: space-around; /* Alinea los elementos horizontalmente con espacio alrededor */
    -webkit-box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
    -moz-box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);
    box-shadow: 21px 21px 16px -13px rgba(0,0,0,0.39);

  }
  

  *{
    
    color: rgba(0, 0, 0, 0.825);
    font-size: 20;
    font-family: Arial;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgb(224, 224, 224);
    /*background-image: 'imagenes\fondo-blanco-elegante-lineas-brillantes_361591-4356.avif';*/
  }

  .contenedor-galeria {
    display: grid;
    place-items: center;
    width: 900px;
  }

  .galeria {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      max-width: 1400px;
  }

  .contenedor-imagen {
      left: 0;
      border-radius: 5px;
      overflow: hidden;
      background-color: rgb(224, 224, 224);
      transition: 0.5s ease-in-out;
      box-shadow: 0 5px 12px rgb(0, 0, 0, 0.5);
      flex: 0.25;
  }

  .contenedor-imagen img {
      height: 498px;
      width: 600px;
  }

  .contenedor-imagen:hover {
      flex: 2;
      cursor: pointer;
      border-radius: 8px;
  }

  body {
    background-image: url('imagenes/fondo-blanco-elegante-lineas-brillantes_361591-4356.avif'); /* Añade una textura de fondo */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir el elemento */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; /* Hace que la imagen de fondo permanezca fija al hacer scroll */
    background-position: center; /* Centra la imagen de fondo */
    margin: 0; /* Elimina el margen por defecto del body */
    padding: 0; /* Elimina el padding por defecto del body */
  }


  
  .imgapa {
    animation: fadein 3s; 
}
@keyframes fadein {
    0% {
        opacity:0;
    }
    5% {
      opacity: 0.05;
    }
    10% {
      opacity: 0.1;
    }
    15% {
      opacity: 0.15;
    }
    20% {
      opacity: 0.2;
    }
    25% {
      opacity: 0.25;
    }
    30% {
      opacity: 0.3;
    }
    35% {
      opacity: 0.35;
    }
    40% {
      opacity: 0.4;
    }
    45% {
      opacity: 0.45;
    }
    50%{
        opacity:0.5;
    }
    55% {
      opacity: 0.55;
    }
    60% {
      opacity: 0.6;
    }
    65% {
      opacity: 0.65;
    }
    70% {
      opacity: 0.7;
    }
    75% {
      opacity: 0.75;
    }
    80% {
      opacity: 0.8;
    }
    85% {
      opacity: 0.85;
    }
    90% {
      opacity: 0.9;
    }
    95% {
      opacity: 0.95;
    }
    100% {
        opacity:1;
    }
}

.feet
{
  background-color: black;
  color: white;
  
}