/* ==========================================================================
   GRUPO IFT — layout exclusivo do PWA instalado em celulares
   ========================================================================== */

.pwa-tabbar,
.pwa-tabbar-shade,
.pwa-splash { display: none; }

/* Atalho da home web. O JavaScript usa o prompt nativo quando disponível e
   oferece a orientação do sistema nos demais navegadores. */
.pwa-install-shortcut {
  position: fixed;
  z-index: 1050;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: calc(100vw - 100px);
  padding: 10px 15px 10px 10px;
  border: 1px solid rgba(212, 191, 104, .3);
  border-radius: 16px;
  color: #fff;
  background: rgba(13, 19, 25, .94);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .32);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pwa-install-shortcut[hidden] { display: none; }

.pwa-install-shortcut:hover {
  border-color: rgba(212, 191, 104, .65);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
  transform: translateY(-2px);
}

.pwa-install-shortcut__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #17140a;
  background: var(--gold-soft, #d4bf68);
}

.pwa-install-shortcut__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pwa-install-shortcut small,
.pwa-install-shortcut strong { display: block; }
.pwa-install-shortcut small { color: rgba(255, 255, 255, .58); font: 500 10px/1.3 var(--font-body, system-ui, sans-serif); }
.pwa-install-shortcut strong { margin-top: 2px; font: 700 13px/1.2 var(--font-body, system-ui, sans-serif); }

.pwa-install-hint {
  position: fixed;
  z-index: 1400;
  left: 20px;
  bottom: 88px;
  width: min(330px, calc(100vw - 40px));
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  color: rgba(255, 255, 255, .78);
  background: #11181e;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .5);
  font: 500 13px/1.5 var(--font-body, system-ui, sans-serif);
}

.pwa-install-hint strong { display: block; margin-bottom: 4px; color: var(--gold-soft, #d4bf68); }

.pwa-install-guide-backdrop {
  position: fixed;
  z-index: 1390;
  inset: 0;
  opacity: 0;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: opacity .2s ease;
}

.pwa-install-guide-backdrop.is-open { opacity: 1; }

.pwa-install-guide {
  position: fixed;
  z-index: 1400;
  top: 50%;
  left: 50%;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 28px;
  overflow-y: auto;
  border: 1px solid rgba(212, 191, 104, .25);
  border-radius: 24px;
  opacity: 0;
  color: #fff;
  background: #11181e;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .6);
  transform: translate(-50%, calc(-50% + 16px)) scale(.98);
  transition: opacity .2s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}

.pwa-install-guide.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.pwa-install-guide > img {
  width: 58px;
  height: 58px;
  margin-bottom: 15px;
  border-radius: 15px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.pwa-install-guide__eyebrow {
  display: block;
  color: var(--gold-soft, #d4bf68);
  font: 700 10px/1.2 var(--font-body, system-ui, sans-serif);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.pwa-install-guide h2 {
  margin: 7px 38px 7px 0;
  color: #fff;
  font: 800 25px/1.12 var(--font-display, var(--font-body, system-ui, sans-serif));
}

.pwa-install-guide > p {
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font: 500 13px/1.5 var(--font-body, system-ui, sans-serif);
}

.pwa-install-guide ol {
  display: grid;
  gap: 9px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
  counter-reset: pwa-install-step;
}

.pwa-install-guide li {
  position: relative;
  min-height: 42px;
  padding: 11px 12px 11px 48px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .035);
  font: 500 12px/1.45 var(--font-body, system-ui, sans-serif);
  counter-increment: pwa-install-step;
}

.pwa-install-guide li::before {
  position: absolute;
  top: 9px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 9px;
  color: #17140a;
  background: var(--gold-soft, #d4bf68);
  content: counter(pwa-install-step);
  font: 800 11px var(--font-body, system-ui, sans-serif);
}

.pwa-install-guide__share {
  width: 18px;
  height: 18px;
  margin: 0 2px -4px;
  fill: none;
  stroke: #68aef0;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pwa-install-guide__close {
  position: absolute;
  top: 17px;
  right: 17px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
  font: 400 24px/1 sans-serif;
}

.pwa-install-guide__done {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 13px;
  color: #17140a;
  background: var(--gold-soft, #d4bf68);
  cursor: pointer;
  font: 800 13px var(--font-body, system-ui, sans-serif);
}

@media (max-width: 820px) {
  html.is-pwa {
    min-height: 100%;
    background: var(--ink-deep, #0d1319);
  }

  html.is-pwa body {
    min-height: 100dvh;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
    overscroll-behavior-y: none;
  }

  html.is-pwa .pwa-install-shortcut,
  html.is-pwa .pwa-install-hint { display: none !important; }

  html.pwa-splash-pending body {
    overflow: hidden;
    background: #030303 !important;
  }

  html.pwa-splash-pending body > * { visibility: hidden !important; }
  html.pwa-splash-pending body > .pwa-splash { visibility: visible !important; }

  html.is-pwa .pwa-splash {
    position: fixed;
    z-index: 3000;
    inset: 0;
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
    opacity: 1;
    background: #030303;
    transition: opacity .4s ease;
  }

  html.is-pwa .pwa-splash__content {
    width: min(84vw, 350px);
    display: grid;
    justify-items: center;
    gap: 34px;
  }

  html.is-pwa .pwa-splash__brand {
    position: relative;
    width: 100%;
    opacity: 0;
    filter: blur(18px);
    transform: translateY(12px) scale(.92);
    clip-path: inset(0 49% 0 49% round 12px);
    transition:
      opacity .72s cubic-bezier(.22, .7, .25, 1),
      filter .82s cubic-bezier(.22, .7, .25, 1),
      transform .9s cubic-bezier(.16, 1, .3, 1),
      clip-path .86s cubic-bezier(.16, 1, .3, 1);
  }

  html.is-pwa .pwa-splash__brand::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 16% 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 191, 104, .16), transparent 68%);
    filter: blur(20px);
    transform: scale(.72);
    transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
  }

  html.is-pwa .pwa-splash.is-visible .pwa-splash__brand {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0 round 0);
  }

  html.is-pwa .pwa-splash.is-visible .pwa-splash__brand::before {
    transform: scale(1);
  }

  html.is-pwa .pwa-splash__brand img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .32));
  }

  html.is-pwa .pwa-splash__tagline {
    display: grid;
    justify-items: center;
    gap: 7px;
    margin: 0;
    text-align: center;
  }

  html.is-pwa .pwa-splash__tagline span,
  html.is-pwa .pwa-splash__tagline strong {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(9px);
    transition:
      opacity .55s ease,
      filter .65s ease,
      transform .7s cubic-bezier(.16, 1, .3, 1);
  }

  html.is-pwa .pwa-splash__tagline span {
    color: rgba(255, 255, 255, .52);
    font: 600 10px/1.2 var(--font-body, system-ui, sans-serif);
    letter-spacing: .2em;
    text-transform: uppercase;
    transition-delay: .34s;
  }

  html.is-pwa .pwa-splash__tagline strong {
    color: var(--gold-soft, #d4bf68);
    font: 700 16px/1.25 var(--font-display, var(--font-body, system-ui, sans-serif));
    letter-spacing: .025em;
    transition-delay: .44s;
  }

  html.is-pwa .pwa-splash.is-visible .pwa-splash__tagline span,
  html.is-pwa .pwa-splash.is-visible .pwa-splash__tagline strong {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  html.is-pwa .pwa-splash.is-leaving { opacity: 0; }
  html.is-pwa .pwa-splash.is-leaving .pwa-splash__brand {
    opacity: 0;
    filter: blur(11px);
    transform: translateY(-3px) scale(1.025);
  }

  html.is-pwa .pwa-splash.is-leaving .pwa-splash__tagline span,
  html.is-pwa .pwa-splash.is-leaving .pwa-splash__tagline strong {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(-4px);
    transition-delay: 0s;
  }

  html.is-pwa.pwa-site-entering body > .nav,
  html.is-pwa.pwa-site-entering body > main {
    animation: pwa-site-in .46s cubic-bezier(.22, .7, .25, 1) both;
  }

  html.is-pwa .announce { display: none; }

  html.is-pwa .nav {
    top: 0;
    padding-top: env(safe-area-inset-top);
    background: rgba(9, 14, 18, .94);
    border-bottom-color: rgba(255, 255, 255, .08);
  }

  html.is-pwa .nav__inner {
    min-height: 62px;
    padding-block: .7rem;
  }

  html.is-pwa .nav__logo { height: 31px; }
  html.is-pwa .nav__menu,
  html.is-pwa .nav__burger,
  html.is-pwa .nav__cta { display: none !important; }

  html.is-pwa main section[id] {
    scroll-margin-top: calc(72px + env(safe-area-inset-top));
  }

  html.is-pwa .hero {
    min-height: calc(100dvh - 62px - env(safe-area-inset-top));
  }

  html.is-pwa .pwa-tabbar {
    position: fixed;
    z-index: 1200;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 70px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 22px;
    background: rgba(13, 19, 25, .92);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .05);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    view-transition-name: pwa-tabbar;
  }

  html.is-pwa .pwa-tabbar-shade {
    position: fixed;
    z-index: 1190;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: calc(max(8px, env(safe-area-inset-bottom)) + 18px);
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(13, 19, 25, 0) 0,
      rgba(13, 19, 25, .9) 38%,
      #0d1319 100%
    );
  }

  html.is-pwa .pwa-tabbar__link {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 16px;
    color: rgba(255, 255, 255, .58);
    font: 600 10px/1 var(--font-body, system-ui, sans-serif);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background .18s ease, transform .18s ease;
  }

  html.is-pwa .pwa-tabbar__link svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html.is-pwa .pwa-tabbar__link.is-active {
    color: var(--gold-soft, #d4bf68);
    background: rgba(183, 159, 62, .12);
  }

  html.is-pwa .pwa-tabbar__link.is-active::before {
    content: "";
    position: absolute;
    top: 3px;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 12px rgba(212, 191, 104, .55);
  }

  html.is-pwa .pwa-tabbar__link:active { transform: scale(.94); }

  html.is-pwa .pwa-notification-prompt {
    position: fixed;
    z-index: 1250;
    left: 14px;
    right: 14px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid rgba(212, 191, 104, .25);
    border-radius: 18px;
    color: #fff;
    background: rgba(13, 19, 25, .97);
    box-shadow: 0 18px 52px rgba(0, 0, 0, .48);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: pwa-notification-in .42s cubic-bezier(.16, 1, .3, 1) both;
  }

  html.is-pwa .pwa-notification-prompt__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--gold-soft, #d4bf68);
    background: rgba(212, 191, 104, .1);
  }

  html.is-pwa .pwa-notification-prompt__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html.is-pwa .pwa-notification-prompt p { margin: 0; color: rgba(255, 255, 255, .62); font: 500 11px/1.35 var(--font-body, system-ui, sans-serif); }
  html.is-pwa .pwa-notification-prompt strong { display: block; margin-bottom: 2px; color: #fff; font-size: 13px; }
  html.is-pwa .pwa-notification-prompt__actions { display: flex; align-items: center; gap: 5px; }
  html.is-pwa .pwa-notification-prompt button { border: 0; cursor: pointer; }
  html.is-pwa .pwa-notification-prompt__allow {
    padding: 9px 11px;
    border-radius: 10px;
    color: #17140a;
    background: var(--gold-soft, #d4bf68);
    font: 700 11px var(--font-body, system-ui, sans-serif);
  }
  html.is-pwa .pwa-notification-prompt__close {
    width: 30px;
    height: 30px;
    color: rgba(255, 255, 255, .5);
    background: transparent;
    font-size: 20px;
  }

  html.is-pwa .whats-float {
    right: 14px;
    bottom: calc(94px + env(safe-area-inset-bottom));
    width: 50px;
    height: 50px;
  }

  html.is-pwa.pwa-page-entering body > main {
    animation: pwa-page-in .34s cubic-bezier(.22, .7, .25, 1) both;
  }

  html.is-pwa.pwa-page-leaving body > main {
    pointer-events: none;
    animation: pwa-page-out .17s ease both;
  }
}

@keyframes pwa-site-in {
  from { opacity: 0; filter: blur(7px); transform: translateY(5px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes pwa-notification-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pwa-page-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pwa-page-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-3px); }
}

@view-transition { navigation: auto; }

::view-transition-group(pwa-tabbar) {
  z-index: 1200;
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(.22, .7, .25, 1);
}

@media (max-width: 600px) {
  .pwa-install-shortcut { left: 12px; bottom: 12px; max-width: calc(100vw - 86px); }
  .pwa-install-shortcut small { display: none; }
  .pwa-install-hint { left: 12px; bottom: 76px; width: min(330px, calc(100vw - 24px)); }

  .pwa-install-guide {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 26px 20px calc(20px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
  }

  .pwa-install-guide.is-open { transform: translateY(0); }
}

@media (max-width: 370px) {
  html.is-pwa .pwa-tabbar {
    left: 6px;
    right: 6px;
    gap: 0;
  }

  html.is-pwa .pwa-tabbar__link { font-size: 9px; }
  html.is-pwa .pwa-tabbar__link svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-tabbar__link { transition: none !important; }
  .pwa-splash,
  .pwa-splash__brand,
  .pwa-splash__brand::before,
  .pwa-splash__tagline span,
  .pwa-splash__tagline strong { transition: none !important; }
  html.is-pwa.pwa-site-entering body > .nav,
  html.is-pwa.pwa-site-entering body > main,
  html.is-pwa.pwa-page-entering body > main,
  html.is-pwa.pwa-page-leaving body > main { animation: none !important; }
}