/* ==========================================================================
   GIA Health · home.css
   Seções da Home (frame "Home · Versionamento 16/10", sem as seções HIDE).
   ========================================================================== */

/* 01 · Hero --------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: var(--noite); padding: 152px 20px 0; text-align: center;
}
.hero__titulo { margin-top: 14px; max-width: 1040px; }
.hero__lead {
  margin-top: 24px; max-width: 600px;
  font-size: 16px; line-height: 26px; letter-spacing: -0.03em; color: var(--mauve);
}
.hero__acoes { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero__link { color: var(--mauve); transition: color .25s; }
.hero__link:hover { color: #fff; }

/* Ilustração: 1564 x 748 no frame de 1440 */
.hero-arte {
  position: relative; z-index: -1; flex: none; pointer-events: none;
  width: clamp(820px, 108.62vw, 1564px);
  margin-top: 48px; margin-bottom: calc(clamp(820px, 108.62vw, 1564px) * -0.17);
}
.hero-arte img { width: 100%; height: auto; display: block; }
.js .hero-arte img {
  opacity: 0; transform: translateY(48px);
  transition: opacity 1.6s var(--ease) .5s, transform 1.8s var(--ease) .5s;
}
.js .hero-pronto .hero-arte img { opacity: 1; transform: translateY(var(--parallax, 0px)); }
.js .hero-pronto .hero-arte img.sem-transicao { transition: none; }

@media (min-width: 640px) {
  .hero__acoes { flex-direction: row; gap: 28px; }
}
@media (min-width: 768px) {
  .hero__lead { font-size: 18px; line-height: 28px; }
}
@media (min-width: 1024px) {
  .hero { height: 1096px; padding-top: 166px; }
  .hero-arte {
    position: absolute; left: 50%; transform: translateX(-50%); margin: 0;
    bottom: calc(clamp(820px, 108.62vw, 1564px) * -0.1509);
  }
}

/* Cabeçalho de seção (título + lead) -------------------------------------- */
.cab { margin-top: 72px; display: flex; flex-direction: column; gap: 24px; }
.cab--centro { align-items: center; text-align: center; }
@media (min-width: 1024px) {
  .cab--lado { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* 02 · Quem somos --------------------------------------------------------- */
.espectro { margin-top: 72px; }
.espectro__palco { position: relative; height: 250px; }
.espectro__simbolo { position: absolute; left: 50%; top: 20px; width: 180px; transform: translateX(-50%); }
.espectro__simbolo img { width: 100%; height: auto; }
.espectro__linha { position: absolute; left: 0; right: 0; top: 220px; }
.espectro__base { height: 1px; width: 100%; background: var(--linha); }
.espectro__grad {
  position: absolute; left: 50%; top: 0; height: 2px; width: 360px; max-width: 70%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(242,94,98,0) 0%, var(--coral) 50%, rgba(242,94,98,0) 100%);
}
.espectro__ponta {
  position: absolute; top: -5px; width: 11px; height: 11px; border-radius: 999px;
  border: 1.5px solid var(--t3); background: var(--off);
}
.espectro__ponta--esq { left: 0; }
.espectro__ponta--dir { right: 0; }
.espectro__centro {
  position: absolute; left: 50%; top: -6px; width: 13px; height: 13px; border-radius: 999px;
  background: var(--coral); transform: translateX(-50%);
}
.espectro .ping { left: 50%; top: .5px; width: 13px; height: 13px; }

.js .espectro__base { transform: scaleX(0); transition: transform 1.6s var(--ease) .2s; }
.js .is-in .espectro__base { transform: scaleX(1); }
.js .espectro__grad { transform: translateX(-50%) scaleX(0); transition: transform 1.6s var(--ease) .5s; }
.js .is-in .espectro__grad { transform: translateX(-50%) scaleX(1); }

.espectro__polos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
.espectro__polo { display: flex; flex-direction: column; gap: 8px; }
.espectro__polo--gia { order: 3; grid-column: span 2; align-items: center; text-align: center; }
.espectro__polo--gia .t-h4 { font-weight: 500; }
.espectro__polo--gia ul { display: flex; flex-direction: column; gap: 8px; color: var(--coral); }
.espectro__polo--dir { align-items: flex-end; text-align: right; }

.mvv { margin-top: 64px; display: grid; gap: 32px; }
.mvv > div { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--linha); padding-top: 24px; }

@media (min-width: 768px) {
  .espectro__palco { height: 318px; }
  .espectro__simbolo { top: 49px; width: 250px; }
  .espectro__linha { top: 290px; }
  .espectro__polos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .espectro__polo--gia { order: 0; grid-column: auto; }
  .mvv { margin-top: 70px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 03 · Contexto ----------------------------------------------------------- */
.overflow-hidden { overflow: hidden; }
.contexto__titulo { max-width: 620px; }
.contexto__lead { max-width: 380px; }
.problemas { margin-top: 72px; }
.problemas__grade { margin-top: 24px; display: grid; gap: 48px; }
.problema { display: flex; flex-direction: column; gap: 32px; }
.problema img { width: 100%; height: auto; aspect-ratio: 357 / 352; }
.problema__txt { display: flex; max-width: 306px; flex-direction: column; gap: 8px; }
.problema__txt .t-h4 { color: #161719; }
@media (min-width: 768px) { .problemas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 1024px) { .problemas__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Faixa · GIA integra (fundo de pontos com deriva lenta) */
@keyframes deriva { from { background-position: 50% 50%; } to { background-position: 46% 54%; } }
.faixa {
  position: relative; margin-top: 72px; min-height: 320px;
  display: flex; align-items: center; justify-content: center; padding: 40px 20px;
  background: #fff url("../assets/faixa-pontos.webp") center / cover no-repeat;
  animation: deriva 24s ease-in-out infinite alternate;
}
.faixa p {
  max-width: 918px; border: 1px solid var(--linha); background: #fff; padding: 24px;
  text-align: center; font-family: var(--inter); font-weight: 400; color: var(--t1);
  font-size: 22px; line-height: 30px; letter-spacing: -0.035em;
}
[data-scrub] .sw { color: #c9cdd2; transition: color .35s ease; }
[data-scrub] .sw.on { color: var(--t1); }
@media (min-width: 768px) {
  .faixa p { padding: 28px 48px; font-size: 32px; line-height: 40px; }
}

.desafios { margin-top: 72px; display: grid; gap: 32px; }
.desafio { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--linha); padding-top: 24px; }
.desafio__rotulo { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; color: var(--coral); }
@media (min-width: 768px) { .desafios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Ciclo de etapas (destaca um item por vez) */
[data-ciclo] > li { transition: opacity .5s var(--ease); }
[data-ciclo] > li .ciclo-icone, [data-ciclo] > li h3 { transition: color .5s var(--ease); }
[data-ciclo].ciclando > li:not(.ativo) { opacity: .55; }
[data-ciclo] > li.ativo h3, [data-ciclo] > li.ativo .ciclo-icone { color: var(--coral); }

/* 04 · Onde atuamos ------------------------------------------------------- */
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.onde__titulo { max-width: 640px; }
.onde__lead { max-width: 360px; }
.onde__corpo { margin-top: 72px; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.esferas { width: 100%; max-width: 480px; flex: none; }
.esferas img { width: 100%; height: auto; aspect-ratio: 1; animation: respira 7s ease-in-out infinite; }
.esferas-lista { width: 100%; }
.esferas-lista li { display: flex; gap: 16px; padding-block: 28px; }
.esferas-lista li + li { border-top: 1px solid var(--linha); }
.esferas-lista li > div { display: flex; flex-direction: column; gap: 8px; }
.esferas-lista .ciclo-icone { font-size: 24px; color: var(--t4); }
@media (min-width: 1024px) {
  .onde__corpo { flex-direction: row; gap: 96px; }
  .esferas-lista { max-width: 560px; }
}

/* 05 · Como atuamos ------------------------------------------------------- */
.como__titulo { margin: 72px auto 0; max-width: 860px; text-align: center; }
.esteira { position: relative; margin-top: 72px; }
.esteira__rolagem { overflow-x: auto; scrollbar-width: none; }
.esteira__rolagem::-webkit-scrollbar { display: none; }
.esteira__palco { position: relative; margin-inline: auto; width: 1008px; height: 420px; }
.esteira__palco img { width: 100%; height: 100%; }
.esteira__dica { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--t3); }
.esteira__dica .ms { font-size: 16px; }
@media (min-width: 768px) {
  .esteira__palco { width: 1440px; height: 600px; }
  .esteira__dica { display: none; }
}

.frentes-cab { margin-top: 72px; }
.frentes-cab .t-h3 { max-width: 620px; }
.frentes-cab .t-lead { max-width: 380px; }
.frentes { margin-top: 64px; display: grid; gap: 48px; }
.frente { display: flex; flex-direction: column; justify-content: space-between; }
.frente__topo { display: flex; flex-direction: column; gap: 32px; padding-bottom: 24px; }
.frente__topo img { width: 124px; height: 124px; }
.frente__topo > div { display: flex; flex-direction: column; gap: 8px; }
.frente .link-seta { color: var(--t1); }
.frente .link-seta .ms { color: var(--coral); }
@media (min-width: 640px) { .frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 1024px) {
  .frentes-cab { margin-top: 120px; }
  .frentes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 06 · Por que a GIA ------------------------------------------------------ */
.porque__corpo { margin-top: 72px; display: flex; flex-direction: column; gap: 64px; }
.porque__esq { display: flex; width: 100%; flex-direction: column; gap: 48px; }
.porque__esq .cab-bloco { display: flex; flex-direction: column; gap: 24px; }
.porque__esq .t-lead { max-width: 440px; }
.motivos { display: flex; flex-direction: column; gap: 20px; }
.motivos li { display: flex; gap: 16px; padding-block: 20px; }
.motivos li > div { display: flex; flex-direction: column; gap: 8px; }
.motivos .ms { color: var(--coral); }
.orbita { position: relative; width: 100%; }
.orbita__img { position: relative; margin-inline: auto; width: 100%; max-width: 780px; }
.orbita__img img { width: 100%; height: auto; }
.orbita .ping { left: 51.28%; top: 48.67%; width: 18.46%; aspect-ratio: 1; }
@media (min-width: 1024px) {
  .porque__corpo { flex-direction: row; align-items: flex-start; }
  .porque__esq { width: 540px; flex: none; }
  .orbita { margin-top: 70px; height: 640px; width: 532px; flex: none; }
  .orbita__img { position: absolute; left: 0; top: -45px; width: 780px; max-width: none; }
}

/* 07 · CTA ---------------------------------------------------------------- */
.cta__linha { margin-top: 72px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.cta__titulo {
  font-family: var(--inter); font-weight: 400; color: var(--t1);
  font-size: 60px; line-height: 58px; letter-spacing: -0.055em;
}
.cta__seta {
  display: flex; width: 64px; height: 64px; flex: none; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--coral); color: #fff;
  transition: transform .5s var(--ease); will-change: transform;
}
.cta__seta .ms { font-size: 32px; transition: transform .35s var(--ease); }
.cta__seta:hover .ms { transform: translateX(4px); }
.cta__info { margin-top: 72px; display: grid; }
.cta__info > div { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--linha); padding-block: 24px; }
.cta__info p:last-child, .cta__info a {
  font-size: 18px; line-height: 28px; letter-spacing: -0.03em; color: var(--t1);
}
.cta__info a { transition: color .25s; }
.cta__info a:hover { color: var(--coral); }
@media (min-width: 640px) {
  .cta__linha { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .cta__titulo { font-size: 96px; line-height: 94px; }
  .cta__seta { width: 88px; height: 88px; }
}
@media (min-width: 768px) {
  .cta__info { grid-template-columns: 363fr 387fr 387fr; }
  .cta__info > div { padding-bottom: 0; }
  .cta__info > div:first-child { padding-right: 24px; }
  .cta__info > div + div { padding-inline: 24px; }
}
@media (min-width: 1024px) {
  .cta__titulo { font-size: 128px; line-height: 124px; }
  .cta__seta { width: 112px; height: 112px; }
  .cta__seta .ms { font-size: 48px; }
}