/* ==========================================================================
   uOS · CABEÇALHO E MEGA MENU  (v0.42.0)

   Dois estados:
   · SÓLIDO (padrão em todas as páginas): barra clara, logo colorido, texto preto,
     CTA laranja visível.
   · OVERLAY (somente quando <body> tem .uos-header-overlay — hoje a Home — e a
     página está no topo): transparente sobre o Hero, logo branco, texto branco,
     sem CTA. Medidas em vw, calibradas sobre a referência 1920×1080.
   A transição para o estado sólido é feita pelo JS existente, que marca
   [data-scrolled] (scroll > 12px) e [data-mega-open] (mega menu aberto).
   Marcação, ids e atributos data-uos-* do mega menu NÃO mudaram.
   ========================================================================== */

:root {
  --uos-gutter: clamp(20px, 4.8vw, 150px);
}

body.uos-nav-is-open {
  overflow: hidden;
}

.uos-skip-link {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: var(--uos-radius-sm);
  background: var(--uos-white);
  color: var(--uos-black);
  transform: translateY(-160%);
}

.uos-skip-link:focus {
  transform: translateY(0);
}

/* ---------- Barra (estado sólido) ---------- */

.uos-header {
  position: sticky;
  z-index: var(--uos-z-header);
  top: 0;
  height: var(--uos-header-height);
  border-bottom: 1px solid var(--uos-line);
  background: rgba(240, 238, 233, 0.97);
  color: var(--uos-black);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease;
}

.uos-header[data-mega-open] {
  background: var(--uos-paper);
}

.admin-bar .uos-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .uos-header {
    top: 46px;
  }
}

.uos-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-inline: var(--uos-gutter);
  gap: clamp(20px, 3vw, 48px);
}

/* ---------- Marca: dois logos empilhados, troca por opacidade ---------- */

.uos-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.uos-brand .custom-logo-link {
  display: inline-flex;
}

.uos-brand .custom-logo {
  width: auto;
  max-height: 40px;
}

.uos-brand__image {
  flex: none;
  width: auto;
  max-width: none;
  height: 44px;
  transition: opacity 260ms ease, height 280ms var(--uos-ease);
}

/* o logo branco só existe sobre o Hero */
.uos-header .uos-brand__image--on-dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.uos-brand__image--footer {
  height: 52px;
}

.uos-brand__wordmark {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* ---------- Navegação principal ---------- */

.uos-nav {
  justify-self: start;
  font-size: 15px;
}

.uos-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 38px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.uos-nav__item {
  display: flex;
  align-items: center;
  height: var(--uos-header-height);
}

.uos-nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  gap: 0.4em;
  border: 0;
  background: transparent;
  color: var(--uos-black);
  font: inherit;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms ease;
}

/* chevron: dois lados de um quadrado girado (proporção 2:1, como na referência) */
.uos-nav__trigger::after {
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: translateY(-0.18em) rotate(45deg);
  transition: transform 220ms var(--uos-ease);
}

.uos-nav__trigger:hover,
.uos-nav__trigger[aria-expanded="true"] {
  color: var(--uos-red);
}

.uos-nav__trigger[aria-expanded="true"]::after {
  transform: translateY(0.14em) rotate(225deg);
}

.uos-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: opacity 240ms ease;
}

.uos-nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  color: inherit;
}

.uos-nav__mobile-cta {
  display: none;
}

/* ---------- Estado OVERLAY (Home, topo da página) ---------- */

.uos-header-overlay .uos-header {
  position: fixed;
  right: 0;
  left: 0;
}

.uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) {
  border-bottom-color: transparent;
  background: transparent;
  color: var(--uos-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-brand__image--on-light {
  opacity: 0;
}

.uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-brand__image--on-dark {
  opacity: 1;
  pointer-events: auto;
}

.uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-nav__trigger {
  color: var(--uos-white);
}

.uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-nav__trigger:hover {
  color: rgba(255, 255, 255, 0.78);
}

.uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-header__actions {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.uos-header-overlay .uos-header:not([data-scrolled], [data-mega-open]) :focus-visible {
  outline-color: var(--uos-white);
}

/* ---------- Mega menu (estrutura preservada; visual claro) ---------- */

.uos-mega {
  position: fixed;
  z-index: 1001;
  top: var(--uos-header-height);
  left: 0;
  width: 100%;
  max-height: calc(100dvh - var(--uos-header-height));
  overflow: auto;
  border-top: 1px solid var(--uos-line);
  background: var(--uos-paper-2);
  box-shadow: var(--uos-shadow-lg);
  color: var(--uos-black);
  font-size: var(--uos-type-body);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  visibility: hidden;
  transition: opacity 190ms ease, transform 230ms var(--uos-ease), visibility 0s linear 230ms;
}

.uos-mega[data-open] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.uos-mega__inner {
  width: min(calc(100% - 2 * var(--uos-gutter)), var(--uos-shell-wide));
  padding-block: clamp(34px, 4vw, 52px);
  margin-inline: auto;
}

.uos-mega__layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 0.98fr);
  align-items: stretch;
  gap: clamp(28px, 4vw, 58px);
}

.uos-mega__layout--platform,
.uos-mega__layout--audiences,
.uos-mega__layout--results {
  grid-template-columns: minmax(0, 1.08fr) repeat(2, minmax(0, 1fr)) minmax(240px, 0.95fr);
}

.uos-mega__layout--content,
.uos-mega__layout--about {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(270px, 0.95fr);
}

.uos-mega__group {
  min-width: 0;
}

.uos-mega__kicker {
  margin: 0 0 17px;
  color: var(--uos-gray-600);
  font-size: var(--uos-type-label);
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.uos-mega-link {
  position: relative;
  display: block;
  padding: 7px 18px 10px 0;
  color: var(--uos-black);
  text-decoration: none;
}

.uos-mega-link + .uos-mega-link {
  margin-top: 2px;
}

.uos-mega-link::after {
  position: absolute;
  top: 13px;
  right: 0;
  color: var(--uos-red);
  content: "→";
  font-size: 14px;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 160ms ease, transform 180ms var(--uos-ease);
}

.uos-mega-link:hover::after,
.uos-mega-link:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.uos-mega-link strong,
.uos-mega-link span {
  display: block;
}

.uos-mega-link strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.22;
  transition: color 150ms ease;
}

.uos-mega-link:hover strong,
.uos-mega-link:focus-visible strong {
  color: var(--uos-red);
}

.uos-mega-link span {
  max-width: 290px;
  margin-top: 5px;
  color: var(--uos-gray-600);
  font-size: var(--uos-type-secondary);
  line-height: 1.4;
}

.uos-mega-link--primary strong {
  max-width: 310px;
  font-family: var(--uos-font-display);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Cartões de destaque */

.uos-mega-feature {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 238px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--uos-line);
  border-radius: 22px;
  background: var(--uos-white);
}

.uos-mega-feature::before {
  position: absolute;
  top: -90px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 135, 36, 0.28), transparent 68%);
  content: "";
  pointer-events: none;
}

.uos-mega-feature > * {
  position: relative;
  z-index: 1;
}

.uos-mega-feature__eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--uos-red);
  font-size: var(--uos-type-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uos-mega-feature > strong {
  display: block;
  font-family: var(--uos-font-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.uos-mega-feature > p {
  margin: 12px 0 18px;
  color: var(--uos-gray-600);
  font-size: var(--uos-type-secondary);
  line-height: 1.45;
}

.uos-mega-feature > a {
  color: var(--uos-red);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.uos-mega-feature > a:hover,
.uos-mega-feature > a:focus-visible {
  text-decoration: underline;
}

/* preto */
.uos-mega-feature--navy,
.uos-mega-feature--group {
  border-color: var(--uos-black);
  background: var(--uos-black);
  color: var(--uos-white);
}

.uos-mega-feature--navy .uos-mega-feature__eyebrow,
.uos-mega-feature--group .uos-mega-feature__eyebrow,
.uos-mega-feature--navy > a,
.uos-mega-feature--group > a {
  color: var(--uos-orange);
}

.uos-mega-feature--navy > p,
.uos-mega-feature--group > p {
  color: rgba(255, 255, 255, 0.72);
}

/* laranja */
.uos-mega-feature--blue {
  border-color: transparent;
  background: linear-gradient(145deg, var(--uos-orange), #F4731A);
  color: var(--uos-black);
}

.uos-mega-feature--blue::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 68%);
}

.uos-mega-feature--blue .uos-mega-feature__eyebrow,
.uos-mega-feature--blue > a {
  color: var(--uos-black);
}

.uos-mega-feature--blue > p {
  color: rgba(0, 0, 0, 0.74);
}

.uos-mega-feature--blue > a {
  text-decoration: underline;
}

.uos-mega-feature--result > strong {
  max-width: 100%;
  color: var(--uos-red);
  font-size: clamp(1.9rem, 2vw, 2.35rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.uos-mega-feature .uos-mega-feature__secondary {
  margin-top: 12px;
  color: var(--uos-gray-600);
  font-size: 13px;
  font-weight: 500;
}

.uos-mega-feature--split {
  justify-content: center;
}

.uos-mega-feature--split > div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  padding-block: 12px;
  gap: 13px;
  border-top: 1px solid var(--uos-line);
}

.uos-mega-feature--split > div strong {
  color: var(--uos-black);
  font-family: var(--uos-font-display);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.uos-mega-feature--split > div span {
  color: var(--uos-gray-600);
  font-size: 13px;
  line-height: 1.35;
}

.uos-mega-feature--split > small {
  margin-top: 10px;
  color: var(--uos-gray-600);
  font-size: 11px;
  line-height: 1.4;
}

.uos-mega-feature--article {
  background: linear-gradient(145deg, var(--uos-white), var(--uos-orange-15));
}

.uos-mega-feature--group img {
  width: min(100%, 170px);
  height: auto;
  margin: 0 0 auto;
  opacity: 0.92;
}

.uos-mega-backdrop {
  position: fixed;
  z-index: 900;
  inset: var(--uos-header-height) 0 0;
  background: rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 190ms ease, visibility 0s linear 190ms;
}

.uos-mega-backdrop[data-open] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

/* ==========================================================================
   DESKTOP: geometria do overlay (referência 1920×1080, unidades em vw)
   ========================================================================== */

@media (min-width: 1025px) {
  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-header__inner {
    align-items: start;
    height: var(--uos-header-overlay-height);
    column-gap: 3vw;
  }

  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-brand {
    flex: none;
    margin-top: 3.75vw;
  }

  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-brand__image {
    height: auto;
    width: clamp(112px, 9.4vw, 240px);
  }

  /* v0.88.2 · sete itens no menu: fonte e espaços proporcionais à tela para a barra terminar antes do rosto da foto */
  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-nav {
    margin-top: calc(7.24vw - 1.2em);
    font-size: clamp(14px, 0.95vw, 22px);
  }

  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-nav__list {
    gap: clamp(14px, 1.6vw, 34px);
  }

  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-nav__item {
    height: 2.4em;
  }

  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-nav__trigger {
    gap: 0.4em;
  }
}

/* v0.88.2 · telas de 1025 a 1439px: o menu de sete itens não cabe ao lado do logo sem passar por cima da foto.
   O logo mantém o tamanho cheio e o menu desce para uma segunda linha, alinhada à esquerda. */
@media (min-width: 1025px) and (max-width: 1439px) {
  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-header__inner {
    height: auto;
    row-gap: 1.3vw;
  }

  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    font-size: 14px;
  }

  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-header__actions {
    grid-column: 3;
    grid-row: 1;
  }
}

/* v0.87.0 · estado sólido (barra clara) com sete itens: em telas estreitas de desktop, fonte e espaços menores para a barra não passar da tela */
@media (min-width: 1025px) and (max-width: 1240px) {
  .uos-nav {
    font-size: 14px;
  }

  .uos-nav__list {
    gap: 14px;
  }
}

/* ==========================================================================
   MOBILE E TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  /* Safari/iOS cria um bloco de posicionamento para descendentes fixed quando
     o ancestral usa backdrop-filter. Sem o filtro, o painel ocupa o viewport. */
  .uos-header,
  .uos-header[data-scrolled],
  .uos-header[data-mega-open] {
    background: var(--uos-paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .uos-header__inner {
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
  }

  .uos-brand,
  .uos-header__actions,
  .uos-nav-toggle {
    grid-row: 1;
  }

  .uos-brand {
    grid-column: 1;
  }

  .uos-brand__image {
    height: 38px;
  }

  .uos-header__actions {
    grid-column: 3;
  }

  .uos-nav-toggle {
    grid-column: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 4px;
    cursor: pointer;
  }

  .uos-nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .uos-nav-toggle__lines,
  .uos-nav-toggle__lines::before,
  .uos-nav-toggle__lines::after {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    content: "";
    transition: transform 180ms ease;
  }

  .uos-nav-toggle__lines::before {
    transform: translateY(-6px);
  }

  .uos-nav-toggle__lines::after {
    transform: translateY(5px);
  }

  .uos-nav-toggle[aria-expanded="true"] .uos-nav-toggle__lines {
    background: transparent;
  }

  .uos-nav-toggle[aria-expanded="true"] .uos-nav-toggle__lines::before {
    transform: translateY(0) rotate(45deg);
  }

  .uos-nav-toggle[aria-expanded="true"] .uos-nav-toggle__lines::after {
    transform: translateY(-1.5px) rotate(-45deg);
  }

  /* Hero sob o cabeçalho transparente */
  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) {
    background: transparent;
  }

  .uos-header-overlay:not(.uos-nav-is-open) .uos-header:not([data-scrolled], [data-mega-open]) .uos-brand__image {
    height: 38px;
    width: auto;
  }

  .uos-nav {
    position: fixed;
    z-index: 1002;
    top: var(--uos-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100vh - var(--uos-header-height));
    height: calc(100dvh - var(--uos-header-height));
    padding: 20px max(24px, calc((100vw - 720px) / 2)) calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--uos-paper);
    font-size: inherit;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    visibility: hidden;
    -webkit-overflow-scrolling: touch;
    justify-self: stretch;
    transition: opacity 180ms ease, transform 220ms var(--uos-ease), visibility 0s linear 220ms;
  }

  .uos-nav[data-open] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .uos-nav__list {
    display: grid;
    gap: 0;
  }

  .uos-nav__item {
    display: block;
    height: auto;
    border-bottom: 1px solid var(--uos-line);
  }

  .uos-nav__trigger {
    width: 100%;
    min-height: 62px;
    justify-content: space-between;
    padding: 16px 3px;
    color: var(--uos-black);
    font-size: 23px;
    letter-spacing: -0.02em;
  }

  .uos-nav__trigger::after {
    width: 9px;
    height: 9px;
  }

  .uos-mega {
    position: static;
    width: auto;
    max-height: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--uos-black);
    opacity: 1;
    transform: none;
    transition: max-height 440ms var(--uos-ease), visibility 0s linear 440ms;
  }

  .uos-mega[data-open] {
    max-height: 2400px;
    transition-delay: 0s;
  }

  .uos-mega__inner {
    width: 100%;
    padding: 4px 3px 30px;
  }

  .uos-mega__layout,
  .uos-mega__layout--platform,
  .uos-mega__layout--audiences,
  .uos-mega__layout--results,
  .uos-mega__layout--content,
  .uos-mega__layout--about {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .uos-mega__group + .uos-mega__group {
    padding-top: 24px;
    border-top: 1px solid var(--uos-line);
  }

  .uos-mega-link {
    padding: 7px 26px 10px 0;
  }

  .uos-mega-link span {
    max-width: 520px;
    font-size: 14px;
  }

  .uos-mega-link--primary strong {
    font-size: 24px;
  }

  .uos-mega-feature {
    min-height: 210px;
  }

  .uos-nav__mobile-cta {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    margin-top: 26px;
    border-radius: var(--uos-pill);
    background: var(--uos-orange);
    color: var(--uos-black);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }

  .uos-mega-backdrop {
    display: none;
  }
}

@media (max-width: 760px) {
  .uos-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: 16px;
  }

  .uos-nav-toggle {
    grid-column: 3;
  }

  .uos-header__actions {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uos-header,
  .uos-brand__image,
  .uos-header__actions,
  .uos-nav__trigger,
  .uos-nav__trigger::after,
  .uos-mega {
    transition: none;
  }
}