nav ul li {
  opacity: 0;
  transform: translateY(5px);
}
nav ul li:nth-child(1) { animation: slideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.1s; }
nav ul li:nth-child(2) { animation: slideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.2s; }
nav ul li:nth-child(3) { animation: slideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.3s; }
nav ul li:nth-child(4) { animation: slideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.4s; }
nav ul li:nth-child(5) { animation: slideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.5s; }
nav ul li:nth-child(6) { animation: slideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.6s; }
nav ul li:nth-child(7) { animation: slideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.7s; }

a.correo-link {
  color: inherit; 
  text-decoration: none;  
  font-weight: 500;
  cursor: pointer;
}

a[href^="tel:"] {
  color: inherit;          
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.redes-sociales {
  display: flex;
  gap: 25px;
}


.red-social {
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 0.3s ease;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeIn 0.6s ease-out forwards 0.2s;
}
  /* Menú en desktop */
  .nav-menu {
    display: flex;
    gap: 1.5rem;
  }

  .nav-menu.active .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* un poquito más abajo */
    transition: all 0.3s ease;
    display: block; /* 👈 mantenemos block para que se pueda animar */
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 6px;
    min-width: 180px;
    z-index: 1000;
    pointer-events: none; /* evita clics mientras está oculto */
  }
  
  .nav-item.dropdown {
    position: relative;
  }

  .nav-item:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  nav ul li::before, nav ul li ul .dropdown-menu::before {
    display: none;
    content: none; /* aseguras que no genere nada */
  }

  .dropdown-menu li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: #333;
  }

  .dropdown-menu li a:hover {
    background: #f5f5f5;
    text-decoration: none;
  }

  .dropdown-menu li a::before {
    content: none !important;
  }

  .nav-item .dropdown-icon {
    margin-left: 6px;
    font-size: 0.7rem;
    transition: transform 0.3s;
  }

  .nav-item:hover .dropdown-icon {
    transform: rotate(180deg); /* gira la flechita al pasar el mouse */
  }
    
  /* Hamburguesa oculta en desktop */
  .menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #333;
    cursor: pointer;
  }

  .always-visible {
    display: block;
  }
  
  .hidden-medium {
    display: block;
  }
  
  .menu-toggle {
    display: none;
  }

  @media (max-width: 1327px) {
  
    /* Botón hamburguesa visible */
    .menu-toggle {
      display: block;
    }
  
    /* ==== Menú hamburguesa oculto por defecto ==== */
    .nav-menu {
      position: absolute;
      top: 70px;
      right: 0;
      background: white;
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
      display: none; /* Oculto al inicio */
      z-index: 999;
    }
  
    /* Cuando se abre con JS */
    .nav-menu.active {
      display: flex;
    }
  
    /* ==== SOLO los que NO son always-visible van dentro del menú ==== */
    .nav-item:not(.always-visible) {
      display: none;
    }
  
    /* Cuando el menú está activo, aparecen SOLO los que no son always-visible */
    .nav-menu.active .nav-item:not(.always-visible) {
      display: block;
    }
  
    /* ==== Mantener siempre visibles los always-visible fuera del toggle ==== */
    .always-visible {
      display: block !important;
      position: relative;
      z-index: 1000; /* Asegura que estén encima si hay superposición */
    }
  
    /* ===== Dropdown dentro de responsive ===== */
    .dropdown-menu {
      display: block;
      position: static;
      box-shadow: none;
      padding-left: 1rem;
    }
  
    nav ul li::before,
    nav ul li a::before {
      display: none;
      content: none;
    }
  }  
  
  /* --- Responsive --- */
  @media (max-width: 992px) ,
    (max-width: 1010px){

    .contenedor-nav nav {
        display: flex;
        justify-content: space-between; /* Logo a la izq, menú/hamburguesa a la der */
        align-items: center;
        padding: 0 20px;
      }

    .menu-toggle {
        display: block;
      }
    
      /* Menú oculto por defecto */
      .nav-menu {
        position: absolute;
        top: 70px;     /* debajo del nav */
        right: 0;
        background: white;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    
        display: none; /* oculto */
      }
    
      /* Cuando se abre (ej: con JS añades la clase "active") */
      .nav-menu.active {
        display: flex;
      }

      .nav-item {
        position: relative;
      }
    
      .dropdown-menu {
        display: block;
        position: static;
        top: 100%;
        left: 0;
        background: white;
        min-width: 200px;
        border-radius: 6px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        z-index: 1;
      }

      .nav-item > a {
        display: inline-block;   /* o block si quieres que ocupe toda la fila */
        position: relative;
        z-index: 2;  /* asegúrate de que quede encima del dropdown */
      }
    
      .nav-item:hover > .dropdown-menu {
        display: block;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
      }
    }
    @media (max-width: 992px) ,
    (max-width: 1010px){
        .dropdown-menu {
            display: block;       /* siempre visible */
            position: static;     /* que ya no sea absoluto */
            box-shadow: none;
            padding-left: 1rem;
          }
      
        .nav-item.open > .dropdown-menu {
          display: block; /* se abre al hacer click */
        }

        nav ul li::before, nav ul li a::before {
            display: none;
            content: none; /* aseguras que no genere nada */
          }
      }

      @media (max-width: 992px) {
        .contenedor-barra-contacto .contacto-derecha .btn-cotizar {
            margin-left: auto !important;
          }

        .contenedor-barra-contacto {
            padding: 35px 0; /* aún más compacto en pantallas chicas */
          }

        /* Ocultar correo y teléfono */
        .contacto-izquierda {
            display: none; /* ocultar correo/teléfono */
          }
        
          .contacto-derecha {
            display: flex;
            margin-right: 0 !important;
            justify-content: space-between; /* redes a la izq, botón a la der */
            align-items: center;
            width: 100%;
            padding: 0;
          }
        
          /* Redes sociales a la izquierda */
          .contacto-derecha .redes-sociales {
            order: 1;
            margin-left: 15px; /* pegadas a la izq */
          }
        
          /* Botón cotizar a la derecha */
          .contacto-derecha .btn-cotizar {
            order: 2;
            margin-right: 15px;
        }

        @media (max-width: 360px) {
        .contenedor-barra-contacto .contacto-derecha .btn-cotizar {
            margin-left: auto !important;
          }

        .contenedor-barra-contacto {
            padding: 35px 0; /* aún más compacto en pantallas chicas */
          }

        /* Ocultar correo y teléfono */
        .contacto-izquierda {
            display: none; /* ocultar correo/teléfono */
          }
        
          .contacto-derecha {
            display: flex;
            margin-right: 0 !important;
            justify-content: space-between; /* redes a la izq, botón a la der */
            align-items: center;
            width: 100%;
            padding: 0;
          }
        
          /* Redes sociales a la izquierda */
          .contacto-derecha .redes-sociales {
            order: 1;
            margin-left: 5px; /* pegadas a la izq */
          }
        
          /* Botón cotizar a la derecha */
          .contacto-derecha .btn-cotizar {
            order: 2;
            margin-right: 5px;
        }
      }

    }