/* ============================================
   ESTILOS DEL MENÚ / NAVBAR
   ============================================ */

/* === NAVBAR: altura fija y contenedor === */
.navbar {
  background: linear-gradient(to right, #000000 0%, #9f0e0e 100%);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  padding: 0 !important;
  min-height: 70px; /* Altura del navbar */
  height: 70px;     /* FORZAR ALTURA */
  display: flex;
  align-items: stretch;
}

/* === CONTENEDOR DEL MENÚ: altura completa === */
.navbar-collapse {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 0 !important;
}

/* === LISTA: altura 100%, flex === */
.navbar-nav {
  display: flex;
  height: 100% !important;     /* FORZAR ALTURA */
  margin: 0;
  padding: 0;
  list-style: none;
  margin-right: -15px !important;
  align-items: stretch !important;
}

.dropdown-nav {
  height: 100% !important;     /* FORZAR ALTURA */
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch !important;
  background-color: rgb(0 0 0 / 0%) !important;
  border: 0;
}

/* === CADA ÍTEM: altura 100% === */
.navbar-nav .nav-item {
  height: 100% !important;     /* FORZAR */
  flex: 1;
  display: flex;
  margin-left: -14px;
  background-color: rgb(0 0 0 / 0%) !important;
}

.dropdown-nav .dropdown-item {
  height: 100% !important;     /* FORZAR */
  flex: 1;
  display: flex;
  margin-left: -30px;
  padding: 0px 40px !important;
}

/* === ENLACES: altura 100% === */
.clipped-link,
.clipped-contac,
.dropdown-link {
  position: relative;
  height: 100% !important;
  width: 100%;
  padding: 0 2rem !important;
  color: #011226;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s ease;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === clip-path: AMBOS LADOS === */
.dropdown-link::before,
.clipped-link::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  color: #011226;
  clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);
  z-index: -1;
  transition: all 0.3s ease;
}

/* === Contacto: SOLO IZQUIERDO === */
.clipped-contac::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  color: #011226;
  clip-path: polygon(15px 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: -1;
  transition: all 0.3s ease;
}

/* === HOVER & ACTIVE: TODOS LOS ÍTEMS (CON CLIP-PATH) === */
.dropdown-link:hover::before,
.dropdown-link.active::before,
.clipped-link:hover::before,
.clipped-link.active::before {
  background-color: #011226 !important;
  border-bottom: 7px solid #ff2713;
  top: 0; left: 0; right: 0; bottom: 0;
  color: white !important;
  clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);
  transform: scale(1.03);
  z-index: -1;
  transition: all 0.3s ease;
}

/* === CONTACTO: HOVER & ACTIVE (SOLO CORTE IZQUIERDO) === */
.clipped-contac:hover::before,
.clipped-contac.active::before {
  background: #011226 !important;
  border-bottom: 7px solid #ff2713;
  color: white !important;
  clip-path: polygon(15px 0%, 100% 0%, 100% 100%, 0% 100%);
  transform: scale(1.03);
  z-index: -1;
}

/* === DROPDOWN === */
.dropdown-toggle.clipped-link {
  padding-right: 3.5rem !important;
}

.dropdown-toggle.clipped-link::after {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid white;
  pointer-events: none;
  z-index: 2;
}

.dropdown-toggle::after {
  filter: brightness(0) saturate(100%) invert(25%) sepia(98%) saturate(7460%) hue-rotate(357deg) brightness(105%) contrast(119%);
  transform: scale(5); /* aumentar tamaño */
}

/* === CONTENEDOR DEL LOGO: EFECTO CLIPPED-CONTAC === */
.clipped-logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-right: -15px; /* Superposición 15px al menú */
  z-index: 1;
  overflow: visible;
  padding: 0 1rem;
  transition: all 0.3s ease;
}

.clipped-logo-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 100%, 0% 100%);
  z-index: -1;
  transition: all 0.3s ease;
}

/* === HOVER: cambia fondo y escala === */
.clipped-logo-container:hover::before {
  background: rgba(80, 74, 74, 1);
  clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 100%, 0% 100%);
  transform: scale(1.03);
}

/* === EL <a> SOLO ES CLICABLE, SIN ESTILOS === */
.clipped-logo-container .navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

/* === AJUSTE: PRIMER ÍTEM DEL MENÚ (para superposición) === */
.navbar-nav .nav-item:first-child {
  margin-left: 0 !important;
  z-index: 0;
}

/* === MÓVIL: ANULAR TODO (logo) === */
@media (max-width: 991.98px) {
  .clipped-logo-container {
    margin-right: 0 !important;
    width: auto;
    padding: 0 0.5rem;
  }
  .clipped-logo-container::before {
    clip-path: none !important;
    background: transparent !important;
    transform: none !important;
  }
}

/* === MÓVIL: ANULAR TODOS LOS EFECTOS DEL MENÚ === */
@media (max-width: 768px) {

  .navbar {
    background: linear-gradient(to right, #0000 0%, #9f0e0e 100%);
  }

  /* === 1. ANULAR clip-path === */
  .clipped-link::before,
  .clipped-contac::before {
    clip-path: none !important;
    background: #011226;
    border-bottom: 7px solid #ff2713;
    transform: none !important;
    color: white;
  }

  /* === 2. ANULAR hover/active (no se aplica en móvil) === */
  .clipped-link:hover::before,
  .clipped-link.active::before,
  .clipped-contac:hover::before,
  .clipped-contac.active::before {
    background: #011226;
    color: white;
    border-bottom: 7px solid #ff2713;
    clip-path: none !important;
    transform: none !important;
  }

  /* === 3. ANULAR superposición (margin-left: -15px) === */
  .navbar-nav .nav-item {
    margin-left: 0 !important;
    z-index: auto !important;
    background: #333;
    color: white;
  }

  /* === 4. ANULAR width extendido === */
  .clipped-link,
  .clipped-contac {
    width: 100% !important;
    padding: 0.75rem 1.5rem !important;
    justify-content: flex-start !important;
    color: white;
  }

  /* === 5. ANULAR escala y transiciones complejas === */
  .clipped-link,
  .clipped-contac {
    transform: none !important;
    transition: none !important;
  }
  .clipped-link:hover,
  .clipped-contac:hover {
    background: var(--primary);
  }

  /* === 6. ANULAR z-index y overflow === */
  .clipped-link,
  .clipped-contac {
    z-index: auto !important;
    overflow: visible !important;
  }

  /* === 7. Flecha del dropdown más pequeña y alineada === */
  .dropdown-toggle.clipped-link::after {
    right: 1rem !important;
    font-size: 0.8rem;
  }

  .navbar-collapse {
    z-index: 10;
    display: block;
  }
}