/* ===== Fonte Gilroy ===== */
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Medium.woff2') format('woff2');
  font-weight: 500; /* medium */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700; /* bold */
  font-style: normal;
  font-display: swap;
}

/* ===== Padrões do projeto ===== */
* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1c1c; /* fundo neutro em volta da tela */
  font-family: 'Gilroy', system-ui, sans-serif;
  font-weight: 500; /* texto padrão = Gilroy Medium */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* evita scroll horizontal durante a animação dos slides */
}

/* Títulos: Gilroy Bold */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* Links: Gilroy Bold */
a {
  font-weight: 700;
}

/* ==========================================================================
   STORY (tela estilo stories do Instagram)
   ========================================================================== */

/* Tema padrão (claro / bege) */
.upgr-story {
  --upgr-lime: #c8d92c;           /* accent verde-limão da marca */

  --upgr-bg:#EEEAE3;
  --upgr-text: #141414;
  --upgr-text-soft: #1a1a1a;
  --upgr-muted: #8a887f;
  --upgr-btn-bg: #111111;         /* círculo da seta (preto) */
  --upgr-btn-text: var(--upgr-lime);
  --upgr-progress-active: #1a1a1a;
  --upgr-progress-inactive: rgba(0, 0, 0, 0.16);
  --upgr-cta-bg: var(--upgr-lime);
  --upgr-cta-text: #111111;
  --upgr-footer-bg: var(--upgr-lime); /* barra do rodapé (limão no bege) */

  position: relative;
  z-index: 1; /* acima do vídeo de fundo fixo */
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Mobile: ocupa a tela toda e cresce com o conteúdo (mostra tudo) */
  min-height: 100dvh;
  background: var(--upgr-bg);
  color: var(--upgr-text);
}

/* Tema escuro (fundo preto) */
.upgr-story--dark {
  --upgr-bg: #000000;
  --upgr-text: #ffffff;
  --upgr-text-soft: rgba(255, 255, 255, 0.92);
  --upgr-muted: rgba(255, 255, 255, 0.5);
  --upgr-btn-bg: var(--upgr-lime); /* círculo da seta (limão) */
  --upgr-btn-text: #111111;
  --upgr-progress-active: #ffffff;
  --upgr-progress-inactive: rgba(255, 255, 255, 0.3);
  --upgr-cta-bg: var(--upgr-lime);
  --upgr-cta-text: #111111;
  --upgr-footer-bg: transparent; /* funde ao fundo preto */
}

/* Tema limão (fundo verde-limão) */
.upgr-story--lime {
  --upgr-bg: var(--upgr-lime);
  --upgr-text: #111111;
  --upgr-text-soft: #111111;
  --upgr-muted: rgba(0, 0, 0, 0.5);
  --upgr-btn-bg: #111111;         /* círculo da seta (preto) */
  --upgr-btn-text: var(--upgr-lime);
  --upgr-progress-active: #111111;
  --upgr-progress-inactive: rgba(0, 0, 0, 0.22);
  --upgr-cta-bg: #111111;
  --upgr-cta-text: #ffffff;
  --upgr-footer-bg: transparent; /* já é limão pelo fundo do slide */
}

/* --- Barras de progresso --- */
.upgr-story__progress {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 16px 16px 0;
}

.upgr-bullet {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 2px;
  background: var(--upgr-progress-inactive);
  transition: background 0.2s ease;
}

.upgr-bullet--active {
  background: var(--upgr-progress-active);
}

/* --- Identidade / avatar estilo Instagram --- */
.upgr-story__identity {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 0;
}

/* Anel com gradiente ao redor do avatar (como nos stories) */
.upgr-avatar {
  display: inline-flex;
  padding: 2.5px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.upgr-avatar__img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid var(--upgr-bg); /* folga entre o anel e a imagem */
  background: #fff;
}

.upgr-story__handle {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--upgr-text);
}

/* --- Área de slides --- */
.upgr-story__stage {
  flex: 1 1 auto;
  display: flex;
}

.upgr-slide {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 34px 34px;
  /* mobile: nada é cortado (a página inteira rola se preciso) */
}

.upgr-slide.is-active {
  display: flex;
}

/* Durante a transição os dois slides ficam sobrepostos (um entra, o outro sai) */
.upgr-story__stage.is-animating {
  position: relative;
  overflow: hidden;
}

.upgr-story__stage.is-animating .upgr-slide.is-active {
  position: absolute;
  inset: 0;
}

/* Entrada */
.upgr-slide--from-right { animation: upgrSlideFromRight 0.35s ease both; }
.upgr-slide--from-left  { animation: upgrSlideFromLeft 0.35s ease both; }

/* Saída */
.upgr-slide--to-left  { animation: upgrSlideToLeft 0.35s ease both; }
.upgr-slide--to-right { animation: upgrSlideToRight 0.35s ease both; }

@keyframes upgrSlideFromRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes upgrSlideFromLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes upgrSlideToLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-28px); }
}

@keyframes upgrSlideToRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(28px); }
}

/* Respeita quem prefere menos animações */
@media (prefers-reduced-motion: reduce) {
  .upgr-slide--from-right,
  .upgr-slide--from-left,
  .upgr-slide--to-left,
  .upgr-slide--to-right {
    animation: none;
  }
}

/* Alinhamento vertical do conteúdo (controlado por data-align no HTML) */
.upgr-slide[data-align="center"] {
  justify-content: center;
}

.upgr-slide[data-align="bottom"] {
  justify-content: flex-end;
}

.upgr-story__title {
  margin: 0 0 24px;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: bold;
}

.upgr-story__text {
  margin: 0 0 20px;
  font-size: 23px;
  line-height: 1.35;
  color: var(--upgr-text);
}

.upgr-story__text:last-child {
  margin-bottom: 0;
}

/* Fade de entrada do conteúdo (título, textos e CTA), escalonado via JS */
.upgr-fade-in {
  animation: upgrFadeIn 0.5s ease both;
}

@keyframes upgrFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .upgr-fade-in { animation: none; }
}

/* --- CTA (slide final) --- */
.upgr-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--upgr-cta-bg);
  color: var(--upgr-cta-text);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.2s ease;
}

.upgr-cta i {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.upgr-cta:hover {
  filter: brightness(0.95);
}

.upgr-cta:hover i {
  transform: translateX(3px);
}

/* --- Utilitários de conteúdo --- */

/* Palavra/trecho com destaque rosa (ex.: "Simão.") */
.upgr-highlight {
  background: var(--upgr-highlight);
  color: #1c1b19;
  padding: 0 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Frase de ênfase (negrito, geralmente com seta) */
.upgr-text--emphasis {
  color: var(--upgr-text);
  font-weight: 700;
}

/* Citação em itálico */
.upgr-text--quote {
  font-style: italic;
}

/* --- Assinatura da igreja (tagline + marca), discreta acima do rodapé --- */
.upgr-story__signature {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 22px 14px;
  font-size: 0.55rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--upgr-muted);
}

.upgr-signature__tagline {
  margin: 0;
  max-width: 62%;
}

.upgr-signature__brand {
  font-weight: 700;
  white-space: nowrap;
}

/* --- Rodapé (linha única: texto à esquerda + seta à direita) --- */
.upgr-story__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  background: var(--upgr-footer-bg);
  color: var(--upgr-text);
}

/* Remove do fluxo: "Voltar" e "continuar" ocupam o MESMO lugar (só um por vez) */
.is-hidden {
  display: none !important;
}

/* Texto do rodapé — "Voltar" e "continuar" compartilham posição e tipografia */
.upgr-story__back,
.upgr-story__next-label {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.upgr-story__next-label {
  color: var(--upgr-text);
}

.upgr-story__back {
  color: var(--upgr-text);
  opacity: 0.95;
}

.upgr-story__back:hover {
  opacity: 1;
}

/* Botão circular da seta (sempre avança) */
.upgr-story__next {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.upgr-story__next-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--upgr-btn-bg);
  color: var(--upgr-btn-text);
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.upgr-story__next:hover .upgr-story__next-icon {
  transform: translateX(3px);
}

/* --- Tablet / Desktop: card centralizado com respiro no topo e no rodapé --- */
@media (min-width: 640px) {
  body {
    padding: 40px 24px;
  }

  .upgr-story {
    min-height: 0;
    height: calc(100dvh - 80px); /* 80px = respiro (40px topo + 40px base) */
    max-height: 760px;
    max-width: 390px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }

  /* Dentro do card, o slide rola internamente se for grande */
  .upgr-story__stage {
    min-height: 0;
  }

  .upgr-slide {
    min-height: 0;
    overflow-y: auto;
  }
}