/* Animación de fade-in */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body {
  font-family: Poppins, sans-serif;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* <-- este cambio */
  padding: 0rem 0rem 0rem;       /* <-- ajusta el padding superior */
  align-items: center;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      overflow: auto;
      background: linear-gradient(315deg, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 38%, rgb(255, 255, 255) 68%, rgb(228, 228, 228) 98%);
      animation: gradient 10s ease infinite;
      background-size: 400% 400%;
      background-attachment: fixed;
  }

  .main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
  
  @keyframes gradient {
      0% {
          background-position: 0% 0%;
      }
      50% {
          background-position: 100% 100%;
      }
      100% {
          background-position: 0% 0%;
      }
  }
  
  .wave {
      background: rgba(83, 145, 216, 0.644);
      border-radius: 1000% 1000% 0 0;
      position: fixed;
      width: 200%;
      height: 12em;
      animation: wave 10s -3s linear infinite;
      transform: translate3d(0, 0, 0);
      opacity: 0.8;
      bottom: 0;
      left: 0;
      z-index: -1;
  }
  
  .wave:nth-of-type(2) {
      bottom: 4rem;
      animation: wave 18s linear reverse infinite;
      opacity: 0.8;
  }
  
  .wave:nth-of-type(3) {
      bottom: -2rem;
      animation: wave 20s -1s reverse infinite;
      opacity: 0.9;
  }
  
  @keyframes wave {
      2% {
          transform: translateX(1);
      }
  
      25% {
          transform: translateX(-25%);
      }
  
      50% {
          transform: translateX(-50%);
      }
  
      75% {
          transform: translateX(-25%);
      }
  
      100% {
          transform: translateX(1);
      }
  }

.logo-container {
  text-align: center; /* Centra el contenedor */
  margin-top: 15px; /* Espacio debajo del logo */
  margin-bottom: 40px; /* Espacio debajo del logo */
}

.logo {
  max-width: 400px; /* Limita el tamaño del logo */
  height: auto; /* Mantiene la proporción original del logo */
}


.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0.5;
  animation: fadeIn 1.5s ease-in-out forwards;
  gap: 2rem;
}

a {
  text-decoration: none; /* Elimina el subrayado del enlace */
  color: inherit; /* Hereda el color del texto del elemento padre */
}

.card {
  width: 320px;  /* Relación 16:9 */
  height: 180px; /* Relación 16:9 */
  margin: 10px 5px;  /* Reducido el espacio horizontal (izquierda y derecha) */
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 0px 20px rgba(0, 13, 56, 0.685);
  transition: transform 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* Centrar el texto */
}

#pagina-principal {
  background-image: url('./img/1.png'); /* Imagen específica para Página Principal */
  background-size: cover;
  background-position: center;
}

#tienda {
  background-image: url('./img/2.png'); /* Imagen específica para Tienda */
  background-size: cover;
  background-position: center;
}

#redes-sociales {
  background-image: url('./img/3.png'); /* Imagen específica para Redes Sociales */
  background-size: cover;
  background-position: center;
}

#contacto {
  background-image: url('./img/main.png'); /* Imagen específica para Contacto */
  background-size: cover;
  background-position: center;
}

.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(106, 128, 226, 0.10); /* Color negro con opacidad */
  z-index: 0; /* Coloca la capa encima de la imagen de fondo, pero debajo del contenido */
}

.card-content {
  position: relative; /* Hace que el contenido quede encima de la capa de opacidad */
  color: rgb(243, 243, 243);
  font-size: 20px;
  z-index: 1;
  padding: 10px;
  background: rgba(0, 0, 0, 0); /* Fondo semitransparente para mejorar la visibilidad */
  border-radius: 10px;
  text-shadow: 0px 1px 5px rgb(14, 25, 119), 
  0 0 1px rgb(0, 0, 0), 
  0 0 1px rgb(8, 22, 214);
}

.card:hover {
  transform: scale(1.05);
}

.social-icons a {
  font-size: 50px; /* Aumenté el tamaño de los íconos */
  margin: 0 10px;
  transition: transform 0.3s, color 0.3s;
}

/* Colores específicos para cada red social */
.social-icons .facebook {
  color: #ffffff; /* Azul de Facebook */
}

.social-icons .instagram {
  color: #e4405f; /* Rosa de Instagram */
}

.social-icons .tiktok {
  color: #dadada; /* Blanco de TikTok */
}

.social-icons .youtube {
  color: #ff0000; /* Rojo de YouTube */
}

.social-icons .whatsapp {
  color: #75db14; /* Verde Whatsapp */
}