/* ==========================================================
   OKAYCHAT™ — ARQUIVO GERADO NA REFATORAÇÃO ESTRUTURAL
   Organização por componente e página
========================================================== */

/* ==========================================================
   HEADER
============================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--header-height);
  border-bottom: 1px solid rgba(232,233,237,.68);
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(18px);
  transition: height var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.site-header.is-scrolled {
  height: var(--header-height-compact);
  border-color: rgba(224,225,231,.85);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: grid;
  height: 100%;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 38px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-black);
  text-decoration: none;
}
.brand__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  transition: transform var(--transition-base);
}
.brand:hover .brand__icon { transform: translateY(-1px) rotate(-2deg); }
.brand__wordmark {
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: -.045em;
}
.brand__tm {
  margin-left: 1px;
  font-size: .52em;
  vertical-align: super;
}

.desktop-nav { justify-self: center; }
.desktop-nav__list {
  display: flex;
  align-items: center;
  gap: 31px;
}
.desktop-nav__item { position: relative; }
.desktop-nav__trigger,
.desktop-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 0;
  border: 0;
  color: #45464e;
  background: none;
  font-size: .88rem;
  font-weight: 720;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.desktop-nav__trigger::after,
.desktop-nav__link::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-pink);
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-fast);
}
.desktop-nav__trigger:hover,
.desktop-nav__link:hover,
.desktop-nav__trigger[aria-expanded="true"] { color: var(--color-black); }
.desktop-nav__trigger:hover::after,
.desktop-nav__link:hover::after,
.desktop-nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.desktop-nav__chevron {
  width: 15px;
  height: 15px;
  transition: transform var(--transition-fast);
}
.desktop-nav__trigger[aria-expanded="true"] .desktop-nav__chevron { transform: rotate(180deg); }

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.header-actions > .btn {
  min-height: 50px;
  padding-inline: 23px;
  font-size: .86rem;
}

.mega-menu {
  position: fixed;
  top: calc(var(--header-height) - 3px);
  left: 50%;
  width: min(calc(100vw - 48px), 1180px);
  padding-top: 16px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.site-header.is-scrolled .mega-menu { top: calc(var(--header-height-compact) - 3px); }
.desktop-nav__item.is-open .mega-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega-menu__surface {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.15fr;
  gap: 28px;
  padding: 30px;
  border: 1px solid rgba(226,227,232,.9);
  border-radius: 26px;
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow-menu);
}
.mega-menu__group-title {
  margin-bottom: 12px;
  color: var(--color-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mega-menu__links { display: grid; gap: 4px; }
.mega-menu__link {
  display: block;
  padding: 10px 11px;
  border-radius: 12px;
  color: var(--color-ink);
  font-size: .86rem;
  font-weight: 720;
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.mega-menu__link:hover {
  background: var(--color-surface-soft);
  transform: translateX(2px);
}
.mega-menu__description {
  display: block;
  margin-top: 3px;
  color: var(--color-muted);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.45;
}
.mega-menu__highlight {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  justify-content: space-between;
  padding: 25px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #121318 0%, #252733 100%);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.mega-menu__highlight-label {
  color: #ff7add;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mega-menu__highlight strong {
  display: block;
  margin-top: 12px;
  font-size: 1.08rem;
  line-height: 1.25;
}
.mega-menu__highlight p {
  margin-top: 10px;
  color: rgba(255,255,255,.68);
  font-size: .78rem;
  line-height: 1.55;
}
.mega-menu__highlight-link { font-size: .78rem; font-weight: 800; }

.mobile-menu-toggle {
  position: relative;
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.mobile-menu-toggle__icon,
.mobile-menu-toggle__icon::before,
.mobile-menu-toggle__icon::after {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-black);
  content: "";
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.mobile-menu-toggle__icon::before { transform: translateY(-6px); }
.mobile-menu-toggle__icon::after { transform: translateY(4px); }
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__icon { background: transparent; }
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__icon::before { transform: translateY(0) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__icon::after { transform: translateY(-2px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-height-compact) 0 0;
  z-index: 990;
  overflow-y: auto;
  padding: 20px var(--container-padding) 34px;
  visibility: hidden;
  opacity: 0;
  background: rgba(255,255,255,.98);
  transform: translateY(-10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav { display: grid; }
.mobile-nav__item { border-bottom: 1px solid var(--color-line); }
.mobile-nav__row { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__link {
  flex: 1;
  padding: 18px 0;
  color: var(--color-ink);
  font-weight: 780;
  text-decoration: none;
}
.mobile-nav__trigger-icon {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mobile-nav__trigger-icon svg { width: 18px; transition: transform var(--transition-fast); }
.mobile-nav__trigger-icon[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-nav__submenu {
  display: none;
  padding: 0 0 14px 14px;
}
.mobile-nav__submenu.is-open { display: grid; }
.mobile-nav__submenu a {
  padding: 8px 0;
  color: var(--color-muted);
  font-size: .9rem;
  text-decoration: none;
}
.mobile-menu__cta { width: 100%; margin-top: 24px; }
.mobile-menu__footer { margin-top: 20px; text-align: center; color: var(--color-muted); font-size: .8rem; }

/* SPR-045-1A.1 — Header Premium */
.site-header {
  height: 96px;
  border-bottom-color: rgba(255,255,255,.44);
  background: rgba(255,255,255,.68);
  box-shadow: 0 1px 0 rgba(17,18,24,.025);
  -webkit-backdrop-filter: saturate(185%) blur(26px);
  backdrop-filter: saturate(185%) blur(26px);
  transition: height 420ms cubic-bezier(.22,.72,.24,1), background-color 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}
.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17,18,24,.07) 30%, rgba(239,0,184,.09) 50%, rgba(17,18,24,.07) 70%, transparent);
  content: "";
  opacity: .58;
  pointer-events: none;
}
.site-header.is-scrolled {
  height: 74px;
  border-color: rgba(255,255,255,.64);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 38px rgba(14,16,24,.055);
  -webkit-backdrop-filter: saturate(190%) blur(30px);
  backdrop-filter: saturate(190%) blur(30px);
}
.site-header__inner { gap: 46px; }
.brand {
  min-height: 58px;
  gap: 12px;
  padding: 7px 9px 7px 5px;
  border-radius: 18px;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.brand:hover { background: rgba(255,255,255,.46); transform: translateY(-1px); }
.brand__icon { width: 48px; height: 48px; }
.site-header.is-scrolled .brand__icon { width: 42px; height: 42px; }
.brand__wordmark { font-size: 1.18rem; letter-spacing: -.052em; }
.desktop-nav__list { gap: 36px; }
.desktop-nav__trigger,
.desktop-nav__link {
  padding: 14px 0;
  color: #51535c;
  font-size: .875rem;
  font-weight: 690;
  letter-spacing: -.012em;
}
.desktop-nav__trigger::after,
.desktop-nav__link::after {
  bottom: 7px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--color-pink), var(--color-blue));
}
.header-actions > .btn {
  position: relative;
  isolation: isolate;
  min-height: 52px;
  overflow: hidden;
  padding-inline: 25px;
  border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(135deg, #ff18c4 0%, #e500ad 48%, #b917e7 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(76,0,67,.18), 0 13px 32px rgba(227,0,170,.22);
}
.header-actions > .btn::before {
  position: absolute;
  inset: 1px 10% auto;
  z-index: -1;
  height: 48%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.28), transparent);
  content: "";
  pointer-events: none;
}
.header-actions > .btn::after {
  position: absolute;
  top: -80%;
  left: -40%;
  width: 32%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  content: "";
  transform: rotate(18deg);
  transition: left 650ms cubic-bezier(.2,.75,.25,1);
}
.header-actions > .btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 18px 40px rgba(227,0,170,.28);
}
.header-actions > .btn:hover::after { left: 118%; }
.site-header.is-scrolled .header-actions > .btn { min-height: 46px; }
.mega-menu { top: calc(96px - 3px); }
.site-header.is-scrolled .mega-menu { top: calc(74px - 3px); }

/* ==========================================================
   SPR-046 — AJUSTE PONTUAL 03
   Cabeçalho compacto e estável em todo o percurso da página
========================================================== */

.site-header,
.site-header.is-scrolled {
  height: 74px;
  border-color: rgba(255,255,255,.64);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 38px rgba(14,16,24,.045);
  -webkit-backdrop-filter: saturate(190%) blur(30px);
  backdrop-filter: saturate(190%) blur(30px);
}

.brand {
  min-height: 50px;
  padding-block: 4px;
}

.brand__icon,
.site-header.is-scrolled .brand__icon {
  width: 42px;
  height: 42px;
}

.header-actions > .btn,
.site-header.is-scrolled .header-actions > .btn {
  min-height: 46px;
}

.mega-menu,
.site-header.is-scrolled .mega-menu {
  top: calc(74px - 3px);
}

@media (max-width: 980px) {
  .site-header,
  .site-header.is-scrolled {
    height: 74px;
  }
}