/* ==========================================================================
   Pedra da Alma — componentes sob medida
   ------------------------------------------------------------------------
   So o que NAO existe no Bootstrap. Botao, card, formulario, tabela, badge,
   navbar e alerta sao componentes nativos, tematizados em bootstrap-theme.css.
   Aqui fica o que e proprio do produto: a marca, o hero da pedra, a sequencia
   de revelacao, os blocos do relatorio, o indice e o rodape.
   ========================================================================== */

/* Garante o empilhamento: o rodape nunca fica atras do conteudo, e nenhum
   decorativo/sticky do corpo passa por cima dele. */
main { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- marca --- */

.pa-brand {
  font-family: var(--pa-font-display);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  color: var(--pa-text-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.pa-brand:hover { color: var(--pa-gold-soft); }

.pa-brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
}

/* -------------------------------------------- cards das quatro dimensoes -- */

/* Modificador de .card na landing: um fio roxo no topo. */
.pa-dimension {
  position: relative;
  overflow: hidden;
}

.pa-dimension::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--pa-primary), transparent);
  opacity: 0.7;
}

.pa-dimension .pa-eyebrow { color: var(--pa-primary-soft); }

/* ---------------------------------------------------- hero da pedra da alma */

.pa-stone-hero {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem;
  border-radius: 28px;
  background:
    radial-gradient(560px 380px at 50% 0%, rgba(124, 92, 255, 0.22), transparent 70%),
    linear-gradient(180deg, var(--pa-surface-light), var(--pa-bg-deep));
  border: 1px solid var(--pa-border-strong);
  overflow: hidden;
}

.pa-stone-hero::after {
  content: "";
  position: absolute;
  inset: -40% 30% auto;
  height: 70%;
  background: radial-gradient(closest-side, var(--pa-glow), transparent);
  filter: blur(30px);
  pointer-events: none;
}

.pa-stone-hero__image {
  width: min(280px, 62vw);
  height: auto;
  margin-inline: auto;
  display: block;
  filter: drop-shadow(0 24px 60px var(--pa-glow));
  animation: pa-float 9s ease-in-out infinite;
}

@keyframes pa-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.pa-stone-hero__name {
  font-family: var(--pa-font-display);
  font-size: clamp(2.8rem, 9vw, 5.2rem);
  letter-spacing: 0.02em;
  margin: 1.2rem 0 0.4rem;
  color: var(--pa-text-strong);
}

.pa-stone-hero__tagline {
  font-family: var(--pa-font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  color: var(--pa-gold-soft);
  font-style: italic;
  max-width: 40ch;
  margin-inline: auto;
}

/* --------------------------------------------------- cards de outras pedras */

/* Modificador de .card: media horizontal (imagem + texto). O fundo, a borda
   e o raio vem do proprio .card. */
.pa-stone-card {
  flex-direction: row;
  gap: 1.4rem;
  align-items: flex-start;
  padding: 1.6rem;
}

.pa-stone-card__image {
  width: 78px;
  height: 78px;
  flex: none;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
}

.pa-stone-card__label {
  font-size: 0.7rem;
  letter-spacing: var(--pa-tracking-wide);
  text-transform: uppercase;
  color: var(--pa-primary-soft);
}

.pa-stone-card__name {
  font-family: var(--pa-font-display);
  font-size: 1.7rem;
  color: var(--pa-text-strong);
  margin: 0.15rem 0 0.5rem;
}

/* ------------------------------------------------- badges por elemento --- */

/* Modificadores de .badge: cor e borda por elemento simbolico. */
.pa-badge--fogo  { color: var(--pa-fogo);  border-color: rgba(210, 100, 58, 0.42); }
.pa-badge--terra { color: var(--pa-terra); border-color: rgba(138, 122, 78, 0.42); }
.pa-badge--ar    { color: var(--pa-ar);    border-color: rgba(111, 143, 181, 0.42); }
.pa-badge--agua  { color: var(--pa-agua);  border-color: rgba(74, 127, 150, 0.42); }

/* -------------------------------------------------- sequencia de descoberta */

.pa-reveal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  place-items: center;
  background: var(--pa-bg-deep);
  text-align: center;
  padding: 2rem;
}

.pa-reveal[data-active="true"] { display: grid; }

.pa-reveal__orb {
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--pa-primary-soft), transparent 62%),
              radial-gradient(circle at 68% 72%, var(--pa-secondary), transparent 60%);
  box-shadow: 0 0 80px var(--pa-glow);
  animation: pa-pulse 2.6s ease-in-out infinite;
}

@keyframes pa-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.07); opacity: 1; }
}

.pa-reveal__text {
  font-family: var(--pa-font-display);
  font-size: clamp(1.3rem, 3.6vw, 2rem);
  color: var(--pa-text-strong);
  min-height: 2.6em;
}

/* ----------------------------------------------------- secoes do relatorio */

.pa-report-section { scroll-margin-top: 90px; }

.pa-report-section__heading {
  font-size: 0.74rem;
  letter-spacing: var(--pa-tracking-wide);
  text-transform: uppercase;
  color: var(--pa-gold);
  margin-bottom: 0.7rem;
}

.pa-report-block + .pa-report-block { margin-top: 2rem; }

.pa-report-block h4 {
  font-family: var(--pa-font-body);
  font-size: 0.74rem;
  letter-spacing: var(--pa-tracking-wide);
  text-transform: uppercase;
  color: var(--pa-muted);
  margin-bottom: 0.55rem;
}

.pa-report-block p { max-width: 68ch; }

.pa-final-message {
  border-left: 2px solid var(--pa-gold);
  padding: 0.4rem 0 0.4rem 1.6rem;
}

.pa-final-message p {
  font-family: var(--pa-font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height: 1.6;
  color: var(--pa-text-strong);
}

/* --------------------------------------------------------------- indice -- */

/* No celular (col-12 .d-lg-none) o indice e uma lista comum antes do texto.
   No desktop (.d-none .d-lg-block dentro da coluna lateral) ele gruda no topo.
   O max-height + overflow garante que um indice longo nunca escape da tela
   nem alcance o rodape. */
/* O indice de desktop e o mesmo template do indice de celular, incluido de
   novo dentro da coluna lateral. O invólucro nao pode virar um bloco de
   altura exata do filho: um pai desse tamanho tira do position:sticky o
   espaco que ele precisa percorrer. display:contents remove o invólucro do
   layout e devolve o .pa-toc ao fluxo da coluna. */
.pa-toc-desktop { display: none; }

@media (min-width: 992px) {
  .pa-toc-desktop { display: contents; }
}

.pa-toc {
  border-left: 1px solid var(--pa-border);
  padding-left: 1.2rem;
}

@media (min-width: 992px) {
  .pa-toc {
    position: sticky;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}

.pa-toc a {
  display: block;
  color: var(--pa-muted);
  font-size: 0.92rem;
  padding: 0.65rem 0;   /* ~44px de alvo no celular */
}

@media (min-width: 992px) {
  .pa-toc a {
    font-size: 0.86rem;
    padding: 0.32rem 0;
  }
}

.pa-toc a:hover { color: var(--pa-gold-soft); }

/* ---------------------------------------------------------- compartilhar -- */

.pa-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* --------------------------------------------------------------- rodape -- */

.pa-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--pa-border);
  padding: 1.5rem 0 1.2rem;
  color: var(--pa-faint);
  font-size: 0.86rem;
  background: var(--pa-bg);
}

/* No rodape os links ficam empilhados e proximos. Com a altura de linha
   normal, cada alvo tem uns 22px — metade do que um polegar acerta sem
   esforco. O padding vertical vale so no celular. */
.pa-footer a {
  color: var(--pa-muted);
  display: inline-block;
  padding: 0.55rem 0;
}

.pa-footer a:hover { color: var(--pa-gold-soft); }

@media (min-width: 768px) {
  .pa-footer { padding: 3rem 0 2.5rem; }
  .pa-footer a { padding: 0.15rem 0; }
}

@media (max-width: 767.98px) {
  .pa-footer .row { gap: 1.5rem !important; }

  .pa-footer .pa-eyebrow {
    margin-bottom: 0.8rem;
    font-size: 0.7rem;
  }

  .pa-footer .pa-brand {
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
  }
}

.pa-disclaimer {
  font-size: 0.8rem;
  color: var(--pa-faint);
  max-width: 62ch;
  line-height: 1.65;
}

/* --------------------------------------------------------------- toast --- */

.pa-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(140%);
  background: var(--pa-surface-hi);
  border: 1px solid var(--pa-border-strong);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  box-shadow: var(--pa-shadow);
  /* Invisivel e fora do fluxo enquanto nao ha mensagem: sem isso a pilula
     vazia fica aparecendo no rodape de todas as paginas. */
  opacity: 0;
  visibility: hidden;
  transition: transform 260ms ease, opacity 200ms ease, visibility 0s linear 260ms;
  z-index: 1090;
}

.pa-toast[data-visible="true"] {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 260ms ease, opacity 200ms ease, visibility 0s;
}

/* ------------------------------------------------------ input de data --- */

input[type="date"] {
  /* Remove o visual de "botao de vidro" nativo do iOS e corrige a largura. */
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  /* O Safari da ao campo de data uma largura minima propria, maior que a
     coluna em telas de 360-390px: sem isto o campo vaza pela borda do card. */
  min-width: 0;
  max-width: 100%;
  /* Vazio, o campo do iOS encolhe para a altura de zero linhas. */
  min-height: calc(1.5em + 1.9rem + 2px);
}

/* Corrige o desalinhamento e a altura interna oculta do iOS. */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.2em;
}

/* Zera o espacamento interno fantasma que o Safari adiciona. */
input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  display: inline-block;
}

/* ------------------------------------------------ card de descoberta (home) */

/* Filhos de um flex nao encolhem abaixo do proprio conteudo por padrao; o
   campo de data tem conteudo largo no iOS. min-width:0 libera o encolhimento. */
.pa-descobrir .card-body > * { min-width: 0; }

/* 1.9rem de respiro lateral e o certo no desktop; num celular de 360px
   rouba quase um quinto da largura util do campo. */
@media (max-width: 575.98px) {
  .pa-descobrir {
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.5rem;
  }
}