/* Hero Slider */
.hero-slider {
    width: 100%;
    height: 100vh; /* Ajusta la altura según tus necesidades */
    overflow-x: hidden; /* Oculta el desbordamiento horizontal */
  }
  
  .hero-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
  }
  
  .hero-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Swiper Navigation */
  .swiper-button-next,
  .swiper-button-prev {
    color: var(--contrast-color);
    background-color: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 20px;
  }
  
  /* Swiper Pagination */
  .swiper-pagination-bullet {
    background-color: var(--contrast-color);
    opacity: 0.5;
  }
  
  .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
    opacity: 1;
  }

  .swiper-container {
    overflow: hidden; /* Asegura que el contenedor de Swiper no tenga desbordamiento */
  }

  .hero-slider .swiper-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Superposición oscura */
    z-index: 1;
  }

 /* Contenedor del logo, slogan y nombre del sitio */
.logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    width: 100%;
    max-width: 800px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* Contenedor del logo */
  .logo-container {
    perspective: 1000px; /* Agrega perspectiva para un efecto 3D */
  }
  
  /* Logo */
  .logo-img {
    max-width: 150px; /* Ajusta este valor según el tamaño deseado */
    height: auto; /* Mantiene la proporción del logo */
    transform-style: preserve-3d; /* Conserva el efecto 3D */
  }
  
  /* Animación de giro sobre el eje Y */
  @keyframes spinY {
    0% {
      transform: rotateY(0deg); /* Comienza sin rotación */
    }
    100% {
      transform: rotateY(360deg); /* Gira 360 grados sobre el eje Y */
    }
  }
  
  /* Clase para activar la animación */
  .spin-animation {
    animation: spinY 2s ease-in-out; /* Animación de giro sobre el eje Y */
  }
  
  /* Contenedor del texto (slogan y nombre del sitio) */
  .text-container {
    margin-top: 1rem; /* Espacio entre el logo y el texto */
  }
  
  /* Slogan */
  .slogan {
    color: var(--contrast-color);
    font-size: 1.5rem;
    margin-bottom: 0.5rem; /* Espacio entre el slogan y el nombre del sitio */
  }
  
  /* Nombre del sitio */
  .site {
    color: var(--contrast-color);
    font-size: 1.2rem;
    font-weight: bold; /* Destaca el nombre del sitio */
  }
  
  /* Ajustes para pantallas pequeñas */
  @media (max-width: 768px) {
    .logo-img {
      max-width: 100px; /* Reduce el tamaño del logo en móviles */
    }
  
    .slogan {
      font-size: 1.2rem; /* Reduce el tamaño del slogan en móviles */
    }
  
    .site-name {
      font-size: 1rem; /* Reduce el tamaño del nombre del sitio en móviles */
    }
  }