/* Elimina márgenes de body y html */
  * {
    box-sizing: border-box;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
  }

  /* Sección hero a pantalla completa */
  .hero-fullscreen {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  /* Imagen de fondo que cubre toda la pantalla */
  .hero-background {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
  }

  /* Overlay centrado con texto */
  .hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* oscurece la imagen */
    padding: 2rem;
  }
  .mayusculas{
    text-transform: uppercase;
  }
  .categoria-item {
    cursor: pointer;
  }
  
  .subcategorias-menu {
    display: none;
    min-width: 200px;
    z-index: 1000;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }
  
  .categoria-item:hover .subcategorias-menu {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  
  @media (max-width: 768px) {
    .categoria-menu {
      flex-direction: column;
      align-items: center;
    }
  }
  .menu-item {
    position: relative;
  }
  
  .menu-item:hover .mega-menu {
    display: block;
  }
  
  
  
  .menu-superior {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
  }
  .home_animacion{
    transition: 0.3s;
    transform: scale(1.3);

  }
  /* Estilo para que el video ocupe el 100% del ancho y alto de su contenedor */
    /* MANTENER ESTOS ESTILOS AQUÍ PARA LA SECCIÓN DE VIDEO FULL WIDTH */
    .video-background {
      position: absolute; /* Permite posicionarlo dentro de su padre */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Crucial: asegura que el video cubra el área sin distorsionarse */
      z-index: -1; /* Envía el video al fondo, detrás de cualquier contenido que pongas en la sección */
  }

  /* Opcional: Si quieres una superposición oscura sobre el video para mejorar la legibilidad del texto */
  .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4); /* Capa oscura (ajusta el 0.4 para más o menos oscuridad) */
      z-index: 0; /* Por encima del video, pero debajo del contenido */
  }

  /* Estilo para la sección contenedora del video a pantalla completa */
  .full-width-video-section {
      position: relative; /* Importante: para que el video absoluto se posicione correctamente */
      height: 100vh; /* Ocupa el 100% de la altura del viewport */
      width: 100%; /* Ocupa el 100% del ancho */
      overflow: hidden; /* Oculta cualquier parte del video que se desborde */
      display: flex; /* Para centrar contenido si lo hubiera sobre el video */
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff; /* Asegura que el texto sobre el video sea visible */
      /* Añadido para prevenir que la sección tenga padding extra por defecto */
      padding: 0; 
      margin: 0;
  }
  .zoom {
    transition: transform 1.5s ease;
    
    }
    .zoom:hover {
    transform: scale(1.2);
    cursor: pointer;
    }
.zoom_menor {
    transition: transform 1.5s ease;
   
    }
.zoom_menor:hover {
transform: scale(1.2);
cursor: pointer;
}
.zoom_card {
  transition: transform 1.2s ease;
  
  }
  .zoom_card:hover {
  transform: scale(1.06);
  cursor: pointer;
  }
  /* Efectos animados */
@keyframes backgroundShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.zoom {
  animation: zoomIn 1.2s ease forwards;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.zoom_menor {
  animation: zoomFade 1.3s ease forwards;
}
@keyframes zoomFade {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Botón con animación */
.btn:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.kenburns-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-background-kenburns {
  height: 110%;
  width: 110%;
  object-fit: cover;
  position: absolute;
  animation: kenburnsZoom 20s ease-in-out infinite;
}

@keyframes kenburnsZoom {
  0% {
    transform: scale(1.1) translate(0%, 0%);
  }
  50% {
    transform: scale(1.2) translate(-2%, -2%);
  }
  100% {
    transform: scale(1.1) translate(0%, 0%);
  }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}