@font-face {
    font-family: 'graficfont';
    src: url('/typo/Graphik Light/Graphik Light.otf');

     font-family: 'zapf';
    src: url('/typo/zapf-humanist-601-bt/zapf-humanist-601-bt.ttf');
    
    }
    body {
      font-family: 'graficfont' , sans-serif;
      font-size: 1.2rem;
    }

    h1, h2, h3 {
      font-family: 'zapf', sans-serif;
      font-weight: 400 !important;
      
      
    }

    /* NAVBAR transparente */
    .navbarra {
      transition: 0.3s;
    }

    .navbarra.scrolled {
      background-color: #000000bb !important;
    }

    .dropdown-menu{
        opacity: 80% !important;
        min-width: 10% !important;
    }

    /* HERO */
    .hero {
      height: 100vh;
      background: url('https://images.unsplash.com/photo-1555992336-03a23c5b1c9b') center/cover no-repeat;
      position: relative;
      color: white;
    }
    .back-video {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1; /* Lo pone detrás del contenido */
    object-fit: cover;
    }
    .hero::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    /* SECCIONES */
    .section {
      padding: 15px 0;
    }

    /* CARDS */
    .card {
      border: none;
      overflow: hidden;
      transition: 0.3s;
    }

    .card img {
      transition: 0.4s;
    }

    .card:hover img {
      transform: scale(1.1);
    }

    .card-body {
      text-align: center;
    }

    /* GALERIA */
    .gallery img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* FOOTER */
    .footer-main {
      background: #ffffff;
      color: #111 ;
    }
     #menu-button{
         color: #cccaca !important;  
          transition: 0.3s !important; 
          cursor: pointer;
    }
    #menu-button:hover{
        color: #ffffff !important;   
         transition: 0.3s !important;
    }
    .btn-menu {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 1001;
      padding: 10px 15px;
      background: #333;
      color: #fff;
      border: none;
      cursor: pointer;
    }

    /* Fondo oscuro */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.493);
      opacity: 0;
      visibility: hidden;
      transition: 0.3s;
      z-index: 1000;
    }

    .overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* Menú lateral */
    .sidebar {
      position: fixed;
      top: 0;
      left: -250px; /* oculto */
      width: 250px;
      height: 100%;
      background: #2222229c;
      color: #fff;
      transition: 0.3s;
      padding-top: 2px;
      z-index: 1002;
    }

    .sidebar.active {
      left: 0;
    }

    .sidebar a {
      display: block;
      padding: 15px;
      color: #fff;
      text-decoration: none;
      border-bottom: 1px solid #444;
       transition: 0.3s;
    }

    .sidebar a:hover {
      background: #444;
       transition: 0.3s;
    }

      .sidebar span {
      display: block;
      padding: 15px;
      color: #4d4c4c;
      text-decoration: none;
      border-bottom: 1px solid #444;
       transition: 0.3s;
       cursor: pointer;
    }

     .fa-x{
          color: #fafafa !important;  
           transition: 0.3s !important;
       cursor: pointer;
     }
     .fa-x:hover{
          color: #a5a4a4 !important;  
           transition: 0.3s !important;
       cursor: pointer;
     }

      ul {
         list-style-type: none !important;
     }
      /* Contenedor para controlar el zoom sin desbordar */
  .hover-container {
    overflow: hidden;
    position: relative;
    cursor: pointer;
  }

  /* Efecto de oscurecer la imagen (overlay) */
  .hover-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.226); /* Ajusta la opacidad aquí */
    z-index: 1;
    transition: background-color 0.3s ease;
  }

  /* Efecto Zoom en la imagen */
  .hover-container img.bg-img {
    transition: transform 0.5s ease;
  }
  
  .hover-container:hover img.bg-img {
    transform: scale(1.1);
  }

  /* Sombra del logo (filtros para PNGs con transparencia) */
  .logo-shadow {
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.6));
    z-index: 2;
  }
  .logo-origen{
    width: 100%;
  }
  .links {
  transition: all 0.3s ease;
}

.links:hover {
  color: #E1306C; /* Instagram */
  transform: translateX(5px);
}
/*responsice*/

     @media (max-width: 768px) {
        .back-video {
            width: auto;
            height: 100vh;
        }
}