/* ============================================================
   JOGO DA JORNADA — estilos específicos
   ============================================================ */

/* ---------- HERO ---------- */
.jornada-hero {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}

.jornada-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 800px) {
  .jornada-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .jornada-hero__pyramid { margin: 0 auto; order: -1; }
}

.jornada-hero__pyramid {
  width: clamp(160px, 20vw, 240px);
  flex-shrink: 0;
  filter: drop-shadow(0 14px 36px rgba(0,0,0,0.35));
  animation: floatY 5s ease-in-out infinite;
}
.jornada-hero__pyramid img { width: 100%; height: auto; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .jornada-hero__pyramid { animation: none; }
}

.jornada-hero h1 { margin-bottom: 1rem; }
.jornada-hero .lead { margin-bottom: 1.8rem; }

/* ---------- O QUE É (com arquétipos) ---------- */
.arquetipos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
@media (max-width: 860px) {
  .arquetipos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .arquetipos { grid-template-columns: 1fr; }
}
.arquetipo-card {
  text-align: center;
  padding: 1.6rem 1.2rem;
  border-radius: var(--radius);
  background: var(--branco);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.arquetipo-card svg {
  width: 36px; height: 36px;
  color: var(--dourado-escuro);
  margin: 0 auto 0.8rem;
}
.arquetipo-card span {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--verde-floresta);
  letter-spacing: 0.04em;
}

/* Variante com imagem real */
.arquetipo-card--img {
  padding: 1.2rem 1rem 1.4rem;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.arquetipo-card--img:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.arquetipo-card--img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: top center;
  border-radius: calc(var(--radius) - 2px);
  display: block;
}
@media (max-width: 860px) {
  .arquetipo-card--img img { height: 150px; }
}
@media (max-width: 480px) {
  .arquetipo-card--img img { height: 130px; }
  .arquetipo-card--img { padding: 1rem 0.8rem 1.1rem; }
}

/* ---------- COMO FUNCIONA (jornada do herói) ---------- */
.jornada-passos {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.jornada-passo {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.6rem;
  padding-bottom: 2.6rem;
  position: relative;
}
.jornada-passo:last-child { padding-bottom: 0; }
.jornada-passo::before {
  content: '';
  position: absolute;
  left: 31px;
  top: 64px;
  bottom: 0;
  width: 1.5px;
  background: linear-gradient(to bottom, var(--dourado), transparent);
}
.jornada-passo:last-child::before { display: none; }

.jornada-passo__num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--verde-floresta);
  color: var(--dourado);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  flex-shrink: 0;
  z-index: 1;
}
.jornada-passo__body h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.jornada-passo__body p { color: rgba(26,38,32,0.78); }

/* ---------- TEMAS / QUESTÕES ---------- */
.temas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.tema-chip {
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  border: 1.5px solid var(--dourado);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--verde-floresta);
  background: rgba(193,162,101,0.08);
}

/* ---------- BENEFÍCIOS DUPLOS ---------- */
.beneficios-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 760px) {
  .beneficios-duplo { grid-template-columns: 1fr; }
}
.beneficios-duplo h3 {
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
  color: var(--pergaminho);
}
.beneficios-duplo ul { display: flex; flex-direction: column; gap: 0.8rem; }
.beneficios-duplo li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.96rem;
  color: rgba(246,241,230,0.85);
}
.beneficios-duplo li svg {
  width: 18px; height: 18px;
  color: var(--dourado);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ---------- DEPOIMENTOS (vídeo) ---------- */
.depoimentos {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) {
  .depoimentos { grid-template-columns: 1fr; }
  .depoimentos__video { margin: 0 auto; }
}

.depoimentos__video {
  position: relative;
  max-width: 300px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.45);
  border: 6px solid var(--carvao);
}
.depoimentos__video video {
  width: 100%;
  display: block;
  aspect-ratio: 392/848;
  object-fit: cover;
  background: #000;
}
.depoimentos__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 25, 20, 0.25);
  cursor: pointer;
  transition: background var(--t-fast);
}
.depoimentos__play.is-hidden { display: none; }
.depoimentos__play svg {
  width: 64px; height: 64px;
  color: #fff;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.depoimentos__play:hover { background: rgba(10, 25, 20, 0.4); }

/* ---------- TRILOGIA HAGALL ---------- */
.trilogia {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) {
  .trilogia { grid-template-columns: 1fr; }
  .trilogia__img { order: -1; }
}
.trilogia__img img {
  width: 100%;
  border-radius: var(--radius-lg);
}
.trilogia__list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.trilogia__item {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.trilogia__item .roman {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--dourado-escuro);
  flex-shrink: 0;
  width: 2.4ch;
}
.trilogia__item h4 { font-size: 1.08rem; margin-bottom: 0.3rem; }
.trilogia__item p { font-size: 0.93rem; color: rgba(26,38,32,0.75); }

/* ---------- RELATÓRIO ---------- */
.relatorio-banner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 2.2rem;
  border-radius: var(--radius-lg);
  background: var(--salvia);
}
@media (max-width: 600px) {
  .relatorio-banner { flex-direction: column; text-align: center; }
}
.relatorio-banner svg {
  width: 48px; height: 48px;
  color: var(--dourado-escuro);
  flex-shrink: 0;
}
.relatorio-banner h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.relatorio-banner p { font-size: 0.95rem; color: rgba(26,38,32,0.78); margin: 0; }

/* ============================================================
   SESSÃO ÚNICA — badge na página do Jogo
   ============================================================ */
.sessao-unica-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding: 0.65rem 1.2rem;
  background: rgba(193,162,101,0.12);
  border: 1px solid rgba(193,162,101,0.4);
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--verde-floresta);
}
.sessao-unica-badge svg { flex-shrink: 0; color: var(--dourado-escuro); }
.sessao-unica-badge strong { color: var(--verde-floresta); }

/* ============================================================
   HERÓIS — vitrine de teaser
   ============================================================ */
.herois-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
@media (max-width: 900px) {
  .herois-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
}
@media (max-width: 540px) {
  .herois-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}

.heroi-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-med), box-shadow var(--t-med);
  background: #fff;
}
.heroi-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--shadow-hover);
}
.heroi-card img {
  width: 100%;
  height: auto;
  display: block;
}

.herois-nota {
  text-align: center;
  margin-top: 2rem;
  font-style: italic;
  color: var(--dourado-escuro);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

/* ============================================================
   PIRÂMIDE 3D — cena e sombra
   ============================================================ */

/* Remove a animação CSS simples anterior */
.jornada-hero__pyramid { animation: none; }

/* A nova cena da pirâmide */
.pyramid-scene {
  position: relative;
  width: clamp(160px, 22vw, 270px);
  flex-shrink: 0;
  /* Perspectiva de contexto para os filhos */
  perspective: 1000px;
  perspective-origin: 50% 40%;
}

#pyramid-container {
  transform-style: preserve-3d;
  will-change: transform;
  /* Transição suave de saída para quando a LERP "chega" */
  cursor: pointer;
  position: relative;
}

#pyramid-container img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.35));
  transition: filter 0.4s ease;
}
#pyramid-container:hover img {
  filter: drop-shadow(0 18px 44px rgba(193,162,101,0.45)) drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* Sombra projetada — oval difusa abaixo */
#pyramid-shadow {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(16,56,44,0.38) 0%, rgba(16,56,44,0) 80%);
  border-radius: 50%;
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Fundo ondulado no hero do Jogo da Jornada */
.jornada-hero__fundo {
  position: absolute;
  inset: 0;
  background-image: url('../img/fundo-site.jpeg');
  background-size: cover;
  background-position: center right;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}
.jornada-hero__inner { position: relative; z-index: 1; }

/* Responsive: sem perspectiva pesada no mobile */
@media (max-width: 800px) {
  .pyramid-scene { width: clamp(130px, 50vw, 210px); margin: 0 auto; }
}

/* ============================================================
   PIRÂMIDE 3D — cena e sombra
   ============================================================ */

/* Remove a animação CSS simples anterior */
.jornada-hero__pyramid { animation: none; }

/* A nova cena da pirâmide */
.pyramid-scene {
  position: relative;
  width: clamp(160px, 22vw, 270px);
  flex-shrink: 0;
  perspective: 1000px;
  perspective-origin: 50% 40%;
}

#pyramid-container {
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
  position: relative;
}

#pyramid-container img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.35));
  transition: filter 0.4s ease;
}
#pyramid-container:hover img {
  filter: drop-shadow(0 18px 44px rgba(193,162,101,0.45)) drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

#pyramid-shadow {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(16,56,44,0.38) 0%, rgba(16,56,44,0) 80%);
  border-radius: 50%;
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}

.jornada-hero__fundo {
  position: absolute;
  inset: 0;
  background-image: url(../img/fundo-site.jpeg);
  background-size: cover;
  background-position: center right;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}
.jornada-hero__inner { position: relative; z-index: 1; }

@media (max-width: 800px) {
  .pyramid-scene { width: clamp(130px, 50vw, 210px); margin: 0 auto; }
}

/* ============================================================
   MOBILE — Correções jogo da jornada
   ============================================================ */

/* Hero: padding menor no mobile */
@media (max-width: 640px) {
  .jornada-hero {
    padding-top: 1rem;
  }
  .jornada-hero__inner {
    padding: 6rem 0 3rem;
    gap: 1.5rem;
  }
  .jornada-hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .sessao-unica-badge {
    text-align: center;
  }
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-row .btn {
    text-align: center;
    justify-content: center;
  }
}

/* Depoimentos: vídeo em tela cheia no mobile */
@media (max-width: 760px) {
  .depoimentos {
    flex-direction: column;
  }
  .depoimentos__video {
    width: 100%;
  }
}

/* Trilogia: empilhar no mobile */
@media (max-width: 800px) {
  .trilogia {
    flex-direction: column;
    text-align: center;
  }
  .trilogia__img {
    max-width: 280px;
    margin: 0 auto;
  }
  .trilogia__item {
    text-align: left;
  }
}

/* Benefícios: empilhar no mobile */
@media (max-width: 640px) {
  .beneficios-duplo {
    grid-template-columns: 1fr;
  }
}

/* FAQ: padding menor no mobile */
@media (max-width: 480px) {
  .faq__question {
    font-size: 0.95rem;
    padding: 1rem 1.1rem;
  }
  .faq__answer-inner {
    padding: 0 1.1rem 1rem;
  }
}