/* ============================================================
   STORIES — modal estilo Instagram para os vídeos "Como funciona"
   Casa com a identidade (global.css :root — ouro escuro, grafite).
   ============================================================ */

/* Overlay */
.stories-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(var(--dark-rgb), 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s var(--ease, ease);
}

body.stories-lock button[aria-label="Abrir formulário de contato"],
body.stories-lock button[aria-label*="Fale conosco"],
body.stories-lock [title*="Fale conosco"],
body.stories-lock iframe[src*="linkminer.app"],
body.stories-lock [style*="2147483646"] {
  display: none !important;
}

body.hero-in-view button[aria-label="Abrir formulário de contato"],
body.hero-in-view button[aria-label*="Fale conosco"],
body.hero-in-view [title*="Fale conosco"],
body.hero-in-view iframe[src*="linkminer.app"],
body.hero-in-view [style*="2147483646"] {
  display: none !important;
}

body.how-in-view button[aria-label="Abrir formulário de contato"],
body.how-in-view button[aria-label*="Fale conosco"],
body.how-in-view [title*="Fale conosco"],
body.how-in-view iframe[src*="linkminer.app"],
body.how-in-view [style*="2147483646"] {
  display: none !important;
}

.stories-overlay.is-open { display: flex; opacity: 1; }

.stories-backdrop { position: absolute; inset: 0; }

/* Palco vertical 9:16 */
.stories-stage {
  position: relative;
  height: min(92vh, 920px);
  aspect-ratio: 9 / 16;
  background: var(--dark);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--dark-border), 0 30px 90px rgba(var(--shadow-rgb), 0.6),
    0 0 80px var(--gold-glow);
}
.stories-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--dark);
}

/* Barras de progresso */
.stories-progress {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.stories-progress i {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(var(--white-rgb), 0.28);
  overflow: hidden;
}
.stories-progress i b {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--gold);
}

/* Cabeçalho (logo + título + fechar) */
.stories-head {
  position: absolute;
  top: 28px;
  left: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stories-id { display: flex; align-items: center; gap: 10px; }
.stories-id img { height: 24px; }
.stories-id span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(var(--shadow-rgb), 0.6);
}
.stories-close {
  appearance: none;
  border: none;
  background: rgba(var(--shadow-rgb), 0.35);
  color: var(--white);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s var(--ease, ease);
}
.stories-close:hover { background: rgba(var(--shadow-rgb), 0.6); }

/* Ações à direita do cabeçalho (som + fechar) */
.stories-actions { display: flex; align-items: center; gap: 10px; }
.stories-mute {
  appearance: none;
  border: none;
  background: rgba(var(--shadow-rgb), 0.35);
  color: var(--white);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s var(--ease, ease);
}
.stories-mute:hover { background: rgba(var(--shadow-rgb), 0.6); }
.stories-mute svg { width: 18px; height: 18px; }

/* Zonas de toque (voltar / avançar) */
.stories-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  width: 35%;
}
.stories-nav.prev { left: 0; }
.stories-nav.next { right: 0; width: 65%; }

/* Legenda inferior */
.stories-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 26px;
  z-index: 3;
  text-align: center;
  color: rgba(var(--white-rgb), 0.85);
  font-size: 0.86rem;
  pointer-events: none;
  text-shadow: 0 1px 10px rgba(var(--shadow-rgb), 0.7);
}

body.stories-lock { overflow: hidden; }

@media (max-width: 600px) {
  .stories-overlay { background: var(--dark); }
  .stories-stage {
    height: 100dvh;
    width: 100vw;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
}