/* Navegación fija y desplegables responsivos de SEPRIM */
header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}

.nav-submenu {
  transform-origin: top center;
  animation: seprim-menu-down 180ms ease-out both;
}

.portal-access {
  align-items: center;
  background: rgba(255, 122, 26, 0.1);
  border: 1px solid rgba(255, 122, 26, 0.82);
  border-radius: 3px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 750;
  gap: 11px;
  justify-content: center;
  min-height: 44px;
  padding: 0 17px;
  white-space: nowrap;
}

.portal-access:hover,
.portal-access:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: #211208;
  outline: none;
}

.page-visual-hero {
  background-color: var(--deep);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.page-visual-hero::after {
  background:
    linear-gradient(90deg, rgba(3, 16, 23, 0.98) 0%, rgba(3, 16, 23, 0.86) 37%, rgba(3, 16, 23, 0.2) 76%),
    linear-gradient(180deg, rgba(3, 16, 23, 0.12), rgba(3, 16, 23, 0.72));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.hero-nosotros {
  background-image: url("pages/nosotros-seprim.webp");
  background-position: center 12%;
}

.hero-contacto {
  background-image: url("pages/contacto-seprim.webp");
  background-position: center 12%;
}

.hero-bolsa {
  background-image: url("pages/bolsa-empleo-seprim.webp");
  background-position: center 12%;
}

@keyframes seprim-menu-down {
  from {
    opacity: 0;
    transform: translateY(-12px) scaleY(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@media (max-width: 800px) {
  .portal-access {
    display: none;
  }

  .mobile {
    position: static;
  }

  .mobile summary {
    align-items: center;
    display: flex;
    gap: 9px;
    min-height: 44px;
    user-select: none;
  }

  .mobile summary::after {
    color: var(--orange);
    content: "⌄";
    font-size: 17px;
    line-height: 1;
    transition: transform 180ms ease;
  }

  .mobile[open] summary {
    background: var(--orange);
    border-color: var(--orange);
    color: #211208;
  }

  .mobile[open] summary::after {
    color: #211208;
    transform: rotate(180deg);
  }

  .mobile nav {
    animation: seprim-mobile-down 220ms ease-out both;
    background:
      linear-gradient(180deg, rgba(6, 26, 34, 0.99), rgba(3, 16, 23, 0.99));
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.48);
    display: flex;
    flex-direction: column;
    inset: 76px 0 auto;
    max-height: calc(100dvh - 76px);
    overscroll-behavior: contain;
    overflow-y: auto;
    padding: 14px 16px 24px;
    position: fixed;
    width: 100%;
    z-index: 1001;
  }

  .mobile nav a,
  .mobile nav > span {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    flex: 0 0 auto;
    font-size: 14px;
    min-height: 48px;
    padding: 12px 10px;
  }

  .mobile nav > span {
    min-height: 42px;
  }

  .mobile nav a.mobile-service {
    min-height: 44px;
    padding: 10px 10px 10px 28px;
  }

  .mobile nav a.mobile-portal {
    background: var(--orange);
    border: 1px solid var(--orange);
    border-radius: 3px;
    color: #211208;
    font-weight: 800;
    justify-content: space-between;
    margin-top: 14px;
    min-height: 50px;
    padding: 12px 16px;
  }

  .mobile nav a:active,
  .mobile nav a:focus-visible {
    background: rgba(255, 122, 26, 0.14);
    color: #fff;
    outline: 1px solid rgba(255, 122, 26, 0.5);
  }

  .page-visual-hero {
    background-position: 64% top;
  }

  .page-visual-hero::after {
    background:
      linear-gradient(180deg, rgba(3, 16, 23, 0.68), rgba(3, 16, 23, 0.94)),
      linear-gradient(90deg, rgba(3, 16, 23, 0.9), rgba(3, 16, 23, 0.18));
  }

  @keyframes seprim-mobile-down {
    from {
      opacity: 0;
      transform: translateY(-18px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 420px) {
  .wrap {
    width: min(100% - 24px, 1180px);
  }

  .logo {
    width: 142px;
  }

  .mobile nav {
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-submenu,
  .mobile nav {
    animation: none;
  }
}