/* ==========================================================================
   Upanema ON · camada responsiva
   - Celular/tablet pequeno (< 768px): menu inferior (bottom nav) como antes.
   - Tablet e desktop (>= 768px): cabeçalho fixo com navegação superior.
   - Animações sutis, respeitando prefers-reduced-motion.
   ========================================================================== */

:root {
  --uo-header-h: 4.5rem;
  --uo-ease: cubic-bezier(.22, 1, .36, 1);
}

html, body { max-width: 100%; }
body { overflow-x: clip; }
img, video, iframe, svg { max-width: 100%; }

/* Itens de navegação superior: ocultos no celular */
.desktop-nav { display: none; }

/* Destaque do cabeçalho ao rolar a página */
#main-header { transition: box-shadow .35s var(--uo-ease), background-color .35s var(--uo-ease); }
#main-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0, 45, 100, .45); }

/* ---------- Tablet e desktop ---------- */
@media (min-width: 768px) {
  #bottom-nav { display: none !important; }

  #main-header {
    display: block !important;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 60;
    background-color: #007AFF;
  }
  #main-header nav {
    height: var(--uo-header-h) !important;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem !important;
    gap: 1.5rem;
  }
  #header-title { font-size: 1.25rem; letter-spacing: -.01em; white-space: nowrap; }

  .desktop-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    margin-right: .75rem;
  }
  .desktop-nav .dn-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 2.5rem;
    padding: 0 .85rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, .86);
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap;
    transition: background-color .25s var(--uo-ease), color .25s var(--uo-ease), transform .2s var(--uo-ease);
  }
  .desktop-nav .dn-item i, .desktop-nav .dn-item svg { width: 1rem; height: 1rem; }
  .desktop-nav .dn-item:hover { background-color: rgba(255, 255, 255, .16); color: #fff; }
  .desktop-nav .dn-item:active { transform: scale(.97); }
  .desktop-nav .dn-item.active { background-color: #fff; color: #0051a8; box-shadow: 0 6px 16px -8px rgba(0, 40, 90, .5); }
  .desktop-nav .dn-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  body { padding-top: var(--uo-header-h); }
  .page-view { padding-bottom: 3rem; }
  .page-view.active { min-height: calc(100vh - var(--uo-header-h)); }

  /* Subpáginas: cabeçalho próprio logo abaixo do menu fixo */
  .page-header { top: var(--uo-header-h) !important; }

  .container { max-width: min(1200px, 92vw) !important; }

  /* Início */
  #inicio.premium-hero { height: min(74vh, 44rem) !important; min-height: 30rem !important; border-radius: 0 0 2.75rem 2.75rem; }
  #inicio h1 { font-size: clamp(2.6rem, 4.2vw, 4rem) !important; line-height: 1.05 !important; }
  #quick-access .grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1.25rem !important; }
  #quick-access .ios-card { min-height: 10.5rem; }
}

@media (min-width: 1024px) {
  .desktop-nav .dn-item span { display: inline; }
  #quick-access .grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Tablet estreito: só ícones no menu superior para caber */
@media (min-width: 768px) and (max-width: 1023px) {
  .desktop-nav .dn-item span { display: none; }
  .desktop-nav .dn-item { padding: 0; width: 2.5rem; justify-content: center; }
  #main-header nav { gap: .75rem; padding: 0 1.25rem !important; }
}

/* Celular: garante que o menu inferior não some e o conteúdo não fique escondido */
@media (max-width: 767px) {
  .desktop-nav { display: none !important; }
  #bottom-nav { display: block; }
}

/* ---------- Animações de entrada (somente quando o JS estiver ativo) ---------- */
html.uo-reveal .page-view.active .uo-rv:not(.uo-rv-in) {
  opacity: 0;
  transform: translateY(18px);
}
.uo-rv {
  transition: opacity .6s var(--uo-ease), transform .6s var(--uo-ease);
  transition-delay: var(--uo-delay, 0ms);
}
.uo-rv.uo-rv-in { opacity: 1; transform: none; }

/* Micro-interações em dispositivos com mouse */
@media (hover: hover) and (pointer: fine) {
  .ios-card, .award-quick-card {
    transition: transform .35s var(--uo-ease), box-shadow .35s var(--uo-ease);
  }
  .ios-card:hover, .award-quick-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px -22px rgba(0, 45, 100, .45);
  }
}

/* Foco visível consistente */
:focus-visible { outline: 3px solid #007AFF; outline-offset: 3px; border-radius: 10px; }

/* Acessibilidade: reduz movimento quando o usuário pedir */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.uo-reveal .uo-rv { opacity: 1 !important; transform: none !important; }
}