/* ============================================================
   ALLIED — Programa Trainee 2026
   style.css
   ============================================================ */

/* ------------------------------------------------------------
   BASE
------------------------------------------------------------ */
html { scroll-behavior: smooth; font-size: 18px; }

img { display: block; max-width: 100%; height: auto; }

/* ------------------------------------------------------------
   HEADER — transparente sobre hero, azul ao rolar
------------------------------------------------------------ */
#main-header {
  background: transparent;
}

#main-header.scrolled {
  background: #00558f;
  box-shadow: 0 2px 20px rgba(0,0,0,0.18);
}

#main-header.scrolled #header-logo {
  height: 2rem;
}

/* Logo invisível quando header transparente */
#header-logo {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#main-header.scrolled #header-logo {
  opacity: 1;
}

/* Nav links — sublinhado animado */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: #00AEEF;
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ------------------------------------------------------------
   MENU MOBILE
------------------------------------------------------------ */
#mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

#main-header.menu-open {
  background: #00558f !important;
}

/* Hamburger → X */
#mobile-toggle.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#mobile-toggle.open .hamburger-line:nth-child(2) {
  opacity: 0;
}
#mobile-toggle.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------------
   BENEFÍCIOS — ícones coloridos
------------------------------------------------------------ */

/* Todos os ícones de benefícios — rosa #FF125C */
.beneficio-icon,
.beneficio-icon-svg {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
  filter:
    brightness(0)
    saturate(100%)
    invert(18%)
    sepia(96%)
    saturate(5000%)
    hue-rotate(330deg)
    brightness(105%);
}

/* ------------------------------------------------------------
   HERO — mobile responsivo
------------------------------------------------------------ */
@media (max-width: 767px) {
  #hero {
    height: 100vh !important;
    min-height: 600px;
    aspect-ratio: unset;
  }
}