/* Seletor imersivo das áreas de atuação (protótipo).
   Os próprios cards da grade viram uma pilha: a seção fica presa na tela
   (sticky) enquanto se rola, e a cada faixa de rolagem o card ativo vem para a
   frente enquanto os outros giram para trás. O visual de cada card é o mesmo
   de hoje. Tudo vale só com .areas--imersivo, classe que o areas-seletor.js
   coloca quando não há "reduzir movimento"; sem JS a grade de site.css segue
   intacta. Só transform e opacity são animados. */

/* overflow: clip (não hidden): hidden viraria o contêiner de rolagem e
   desligaria o position: sticky de .areas__inner. */
.areas--imersivo {
  --altura-faixa: 62;
  height: calc(100vh + (var(--n) - 1) * var(--altura-faixa) * 1vh);
  height: calc(100svh + (var(--n) - 1) * var(--altura-faixa) * 1svh);
  padding: 0;
  overflow: clip;
}

.areas--imersivo .areas__grid-overlay {
  display: none;
}

.areas--imersivo .areas__inner {
  position: sticky;
  top: 0;
  display: grid;
  height: 100vh;
  height: 100svh;
  max-width: none;
  /* Respiro de cima acompanha a altura da tela: em telas baixas o palco inteiro
     (título, card e números) precisa caber, senão o fim é cortado. */
  padding: clamp(4.2rem, 10svh, 5.2rem) clamp(1.4rem, 5vw, 4.5rem) 1.2rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas: "titulo" "pilha" "indice";
  align-content: center;
  justify-items: center;
  row-gap: 1.1rem;
}

/* Grade de linhas da identidade do site, presa junto com o palco. */
.areas--imersivo .areas__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(26, 59, 50, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 59, 50, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, black 0 50%, transparent 86%);
}

.areas--imersivo .areas__heading {
  grid-area: titulo;
  justify-self: start;
  width: 100%;
  margin: 0;
}

.areas--imersivo .section-kicker {
  margin-bottom: 0.4rem;
}

.areas--imersivo .areas__title {
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
}

/* -------------------------------------------------------------------- pilha */

/* Os seis cards ocupam a mesma célula; a altura é a do maior. */
.areas--imersivo .areas__list {
  grid-area: pilha;
  display: grid;
  /* Uma coluna só: a grade de 2 e 3 colunas de site.css não vale aqui. */
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0;
  width: min(100%, 36rem);
  perspective: 1400px;
}

/* --d: distância até o card ativo (negativo = já passou, positivo = vem aí).
   --ad: valor absoluto, limitado a 3. Definidos pelo JS a cada troca. */
.areas--imersivo .area-card {
  grid-area: 1 / 1;
  /* Altura = a do card mais alto. O piso de altura só vale no desktop. */
  min-height: 0;
  /* Fundo sólido: os cards de trás não podem deixar o texto vazar. */
  background: linear-gradient(145deg, #ffffff, #f4f1ea);
  animation: none !important;
  z-index: calc(10 - var(--ad, 0));
  opacity: max(0, calc(1 - var(--ad, 0) * 0.4));
  transform: translate3d(calc(var(--d, 0) * 12%), calc(var(--ad, 0) * 4%), 0)
    rotate(calc(var(--d, 0) * 6deg)) scale(calc(1 - var(--ad, 0) * 0.06));
  transform-origin: 30% 90%;
  transition:
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 600ms ease,
    box-shadow 300ms ease,
    border-color 300ms ease;
  will-change: transform, opacity;
}

/* O hover da grade levanta o card; aqui o movimento é o da pilha. */
.areas--imersivo .area-card:hover {
  transform: translate3d(calc(var(--d, 0) * 12%), calc(var(--ad, 0) * 4%), 0)
    rotate(calc(var(--d, 0) * 6deg)) scale(calc(1 - var(--ad, 0) * 0.06));
}

/* Cards que não são o ativo aparecem só como silhueta: o conteúdo some e eles
   ficam fora do foco e do clique (inert, colocado pelo JS). */
.areas--imersivo .area-card > * {
  transition: opacity 450ms ease;
}

.areas--imersivo .area-card:not(.is-ativo) > * {
  opacity: 0;
}

.areas--imersivo .area-card:not(.is-ativo) {
  pointer-events: none;
}

/* ------------------------------------------------ padrão da marca no card */

/* Uma peça do padrão geométrico oficial no canto superior direito, em verde
   bem suave e esmaecendo para dentro do card. Cada área tem sua cor, escala e
   giro. Só decoração: fica atrás do texto e não recebe clique. O número grande
   fica no canto oposto (esquerdo). */
.areas--imersivo .area-card::before {
  content: "";
  position: absolute;
  /* Caixa quadrada com o CENTRO no canto superior direito do card: só o quarto
     de dentro aparece, e girar a caixa em torno do centro (qualquer ângulo)
     mantém o canto sempre coberto. */
  top: -6.5rem;
  right: -6.5rem;
  width: 13rem;
  height: 13rem;
  background-color: var(--cor, #43ada5);
  opacity: 0.26;
  pointer-events: none;
  -webkit-mask:
    url("/assets/brand/padrao-geometrico.svg") 0 0 / var(--tam, 4.5rem),
    radial-gradient(circle at 50% 50%, #000 0, transparent 68%);
  -webkit-mask-composite: source-in;
  mask:
    url("/assets/brand/padrao-geometrico.svg") 0 0 / var(--tam, 4.5rem),
    radial-gradient(circle at 50% 50%, #000 0, transparent 68%);
  mask-composite: intersect;
  transform: rotate(var(--rot, 0deg));
}

.areas--imersivo .area-card:nth-child(1) { --cor: #43ada5; --tam: 4.2rem; --rot: 0deg; }
.areas--imersivo .area-card:nth-child(2) { --cor: #2c8f89; --tam: 5.4rem; --rot: 90deg; }
.areas--imersivo .area-card:nth-child(3) { --cor: #43ada5; --tam: 3.6rem; --rot: 180deg; }
.areas--imersivo .area-card:nth-child(4) { --cor: #1f635d; --tam: 4.8rem; --rot: 270deg; }
.areas--imersivo .area-card:nth-child(5) { --cor: #43ada5; --tam: 6.2rem; --rot: 45deg; }
.areas--imersivo .area-card:nth-child(6) { --cor: #2c8f89; --tam: 3.9rem; --rot: 135deg; }

/* -------------------------------------- etiqueta da próxima área (espia) */

/* A ponta do card seguinte aparece por trás do ativo, na margem à direita. Ali
   fica o nome da próxima área, em vertical, ao lado do card ativo (e não
   dentro do card de trás, que gira e empurraria o texto para fora da tela).
   Decorativa (aria-hidden): quem usa leitor de tela tem o índice com os nomes. */
.areas--imersivo .areas__list {
  position: relative;
}

.areas__espia {
  position: absolute;
  top: 1.4rem;
  right: -1.05rem;
  z-index: 20;
  writing-mode: vertical-rl;
  font: 600 0.6rem/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1f635d;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.areas__espia[hidden] {
  display: block;
  opacity: 0;
}

@media (min-width: 860px) {
  .areas__espia {
    right: -1.6rem;
    font-size: 0.66rem;
  }
}

/* Espaço do número grande do card: encolhe em telas baixas. */
.areas--imersivo .area-card__body {
  padding-top: clamp(2.6rem, 8svh, 4.4rem);
}

.areas--imersivo .area-card__body h3 {
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
}

/* O botão nunca quebra em duas linhas; em telas estreitas, fonte e folgas menores. */
.areas--imersivo .area-card__mais {
  white-space: nowrap;
}

@media (max-width: 400px) {
  .areas--imersivo .area-card__mais {
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
  }
}

.areas--imersivo .area-card__body p {
  max-width: none;
  font-size: clamp(0.92rem, 2vw, 1rem);
}

/* A régua verde do título se desenha quando o card entra. */
.areas--imersivo .area-card__body h3::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: 0.6rem;
  background: #1f635d;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.areas--imersivo .area-card.is-ativo .area-card__body h3::after {
  transform: scaleX(1);
  transition-delay: 260ms;
}

/* ------------------------------------------------- índice logo abaixo dos cards */

.areas__indice {
  grid-area: indice;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: min(100%, 36rem);
  /* Folga à direita no celular: o botão flutuante do WhatsApp fica nesse canto. */
  padding-right: 3.6rem;
}

/* Os seis números dividem a largura disponível e ficam sempre numa linha só. */
.areas__indice-btn {
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0;
  max-width: 2.75rem;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(31, 99, 93, 0.3);
  border-radius: 999px;
  background: transparent;
  font: 600 0.74rem/1 var(--font-display);
  letter-spacing: 0.04em;
  color: #1f635d;
  cursor: pointer;
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}

.areas__indice-btn:hover,
.areas__indice-btn[aria-current="true"] {
  background: #1f635d;
  border-color: #1f635d;
  color: #fff;
}

.areas__progresso {
  flex: 1 1 100%;
  height: 2px;
  margin-top: 0.3rem;
  background: rgba(31, 99, 93, 0.18);
  overflow: hidden;
}

.areas__progresso > span {
  display: block;
  height: 100%;
  background: #1f635d;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* ------------------------------------------------------------------ desktop */

@media (min-width: 860px) {
  .areas--imersivo .areas__inner {
    padding-top: 6rem;
    padding-bottom: 2rem;
    row-gap: 1.6rem;
  }

  .areas--imersivo .areas__list {
    width: min(100%, 40rem);
  }

  .areas--imersivo .area-card {
    min-height: min(23rem, 46svh);
    padding: 2.2rem;
  }

  .areas__indice {
    width: min(100%, 40rem);
    padding-right: 0;
    gap: 0.5rem;
  }

  .areas__indice-btn {
    flex: 0 0 2.75rem;
    min-height: 2.75rem;
  }
}

/* Celulares: em telas altas sobra espaço, então card, título e texto crescem
   com a altura da tela, até um limite. --folga vai de 0 (tela de 640px ou menos)
   a 220px (860px ou mais). Em telas baixas nada muda. */
@media (min-width: 521px) and (max-width: 859px) {
  /* Tablet: card de tamanho moderado, sem o crescimento dos celulares. */
  .areas--imersivo .area-card {
    min-height: min(20rem, 40svh);
  }
}

@media (max-width: 520px) {
  .areas--imersivo {
    --folga: clamp(0px, calc(100svh - 640px), 220px);
  }

  .areas--imersivo .area-card {
    /* O piso nunca passa de 40% da altura da tela (celular deitado). */
    min-height: min(calc(18rem + var(--folga) * 1.05), 40svh + var(--folga) * 1.05);
  }

  .areas--imersivo .area-card__num {
    font-size: calc(2.4rem + var(--folga) * 0.12);
  }

  .areas--imersivo .area-card__body h3 {
    font-size: calc(1.3rem + var(--folga) * 0.04);
  }

  .areas--imersivo .area-card__body p {
    font-size: calc(0.92rem + var(--folga) * 0.011);
    line-height: 1.58;
  }

  .areas--imersivo .area-card__body {
    padding-top: calc(2.6rem + var(--folga) * 0.2);
  }
}

/* Telas baixas (celular com barras do navegador, ou paisagem): título mais
   enxuto para o palco caber inteiro. */
@media (max-height: 700px) {
  .areas--imersivo .section-kicker {
    display: none;
  }

  .areas--imersivo .areas__title {
    font-size: clamp(1.4rem, 3.6vw, 2rem);
  }

  .areas--imersivo .areas__inner {
    row-gap: 0.8rem;
  }

  .areas--imersivo .area-card {
    padding: 1.1rem 1.3rem;
  }

  .areas--imersivo .area-card__body p {
    margin-top: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.5;
  }
}

/* Telas muito baixas (celular deitado): só o essencial, para tudo caber. */
@media (max-height: 480px) {
  .areas--imersivo .areas__inner {
    padding-top: 3.4rem;
    padding-bottom: 0.6rem;
    row-gap: 0.5rem;
  }

  .areas--imersivo .area-card__num,
  .areas__progresso {
    display: none;
  }

  .areas--imersivo .area-card__body {
    padding-top: 0;
  }

  .areas__indice-btn {
    min-height: 2.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .areas--imersivo .area-card,
  .areas--imersivo .area-card > *,
  .areas--imersivo .area-card__body h3::after {
    transition: none;
  }
}