/* =========================================================
   Home – novas opções de layout (mesma identidade visual)
   menta #02D1AE · verde #00A185 · marinho #3F3D56 · Montserrat
   ========================================================= */
.hx{ --menta:#02d1ae; --verde:#00a185; --verde-esc:#008a72; --marinho:#3f3d56; --marinho-esc:#2c2a3e; --tinta:#1f1e2b;
  --ease:cubic-bezier(.16,1,.3,1); font-family:Montserrat,sans-serif; color:var(--tinta); overflow-x:clip }
.hx *{ box-sizing:border-box }
.hx b{ font-weight:700 }
.hx .hx-in{ width:min(1140px,100% - 40px); margin:0 auto }
.hx h1,.hx h2{ font-family:Montserrat,sans-serif; font-weight:700; margin:0; text-wrap:balance; text-transform:uppercase; letter-spacing:.01em }
.hx p{ margin:0; text-wrap:pretty }
.hx .hx-traco{ display:block; width:56px; height:3px; background:var(--menta); border-radius:2px; margin:18px 0 26px; transform-origin:left; }
.hx .hx-centro{ text-align:center } .hx .hx-centro .hx-traco{ margin-left:auto; margin-right:auto; transform-origin:center }
.hx .hx-video{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:18px; background:#fff }
.hx .hx-quadro{ position:relative; background:#fff; border-radius:22px; padding:10px;
  box-shadow:0 30px 60px -30px rgba(31,30,43,.35), 0 8px 18px -10px rgba(31,30,43,.18) }

/* revelação ao rolar (um único gesto, do mesmo jeito em todo lugar) */
.hx [data-rev]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.hx [data-rev].hx-vis{ opacity:1; transform:none }
.hx [data-rev] .hx-traco{ transform:scaleX(0); transition:transform 1s var(--ease) .25s }
.hx [data-rev].hx-vis .hx-traco{ transform:scaleX(1) }
@keyframes hx-flutua{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes hx-gira{ to{ transform:rotate(360deg) } }
@keyframes hx-pulso{ 0%,100%{ transform:scale(1); opacity:.55 } 50%{ transform:scale(1.12); opacity:.9 } }
.hx .hx-bolha{ position:absolute; border-radius:50%; pointer-events:none; animation:hx-flutua 9s ease-in-out infinite }
.hx .hx-anel{ position:absolute; border-radius:50%; border:2px dashed rgba(2,209,174,.55); pointer-events:none; animation:hx-gira 40s linear infinite }

/* ---------- herói comum ---------- */
.hx-heroi{ position:relative; color:#fff; isolation:isolate }
.hx-heroi .hx-foto{ position:absolute; inset:0; background:url('../../imagens/2022/06/bg_instituto.jpg') center/cover no-repeat; z-index:-2 }
.hx-heroi h1{ color:var(--menta); font-weight:700; font-size:clamp(30px,4.2vw,52px) }
.hx-heroi .hx-frase{ font-size:clamp(18px,1.9vw,24px); line-height:1.55; font-weight:400; max-width:820px }
.hx-heroi .hx-frase b{ font-weight:700 }

/* ===================== OPÇÃO 1 – Clássico renovado ===================== */
.hx1 .hx-heroi{ padding:clamp(90px,12vw,150px) 0; text-align:center }
.hx1 .hx-heroi::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(0,0,0,.74) }
.hx1 .hx-heroi .hx-foto{ filter:blur(4px); transform:scale(1.06) }
.hx1 .hx-heroi{ overflow:hidden }
.hx1 .hx-heroi .hx-frase{ margin:0 auto }
.hx1 .hx-heroi .hx-traco{ margin:20px auto 28px }
.hx1 .hx-missao{ padding:clamp(70px,9vw,120px) 0; position:relative }
.hx1 .hx-missao .hx-in{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,5vw,80px); align-items:center }
.hx1 .hx-missao h2{ font-size:clamp(26px,2.6vw,34px); font-weight:700; color:var(--marinho) }
.hx1 .hx-missao p{ font-size:18px; line-height:1.7; color:#2b2a36 }
.hx1 .hx-assim{ background:var(--verde); color:#fff; padding:clamp(70px,9vw,120px) 0; position:relative }
.hx1 .hx-assim h2{ font-size:clamp(24px,2.6vw,34px); font-weight:700; color:#fff; margin-bottom:0 }
.hx1 .hx-assim .hx-traco{ background:#fff }
.hx1 .hx-assim .hx-grade{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; margin-top:10px }
.hx1 .hx-assim p{ font-size:18px; line-height:1.7 } .hx1 .hx-assim p + p{ margin-top:18px }

/* ===================== OPÇÃO 2 – Editorial ===================== */
.hx2 .hx-heroi{ color:var(--tinta); padding:clamp(60px,8vw,110px) 0 }
.hx2 .hx-heroi .hx-in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center }
.hx2 .hx-heroi .hx-foto{ position:relative; inset:auto; z-index:0; aspect-ratio:4/5; border-radius:28px 28px 28px 120px;
  box-shadow:0 40px 70px -40px rgba(31,30,43,.5) }
.hx2 .hx-heroi h1{ color:var(--verde); font-size:clamp(34px,5vw,64px) }
.hx2 .hx-heroi .hx-frase{ color:#2b2a36 }
.hx2 .hx-heroi .hx-bolha{ width:120px; height:120px; background:var(--menta); opacity:.18; right:42%; top:12% }
.hx2 .hx-missao{ background:var(--marinho); color:#fff; padding:clamp(70px,9vw,120px) 0 0; position:relative }
.hx2 .hx-missao h2{ color:var(--menta); font-size:clamp(26px,2.6vw,34px) }
.hx2 .hx-missao p{ font-size:clamp(20px,2.1vw,28px); line-height:1.5; font-weight:500; max-width:900px; margin:0 auto }
.hx2 .hx-missao p b{ color:var(--menta) }
.hx2 .hx-missao .hx-quadro{ max-width:760px; margin:60px auto 0; transform:translateY(80px) }
.hx2 .hx-assim{ padding:calc(80px + clamp(60px,8vw,110px)) 0 clamp(70px,9vw,120px) }
.hx2 .hx-assim h2{ color:var(--marinho); font-size:clamp(24px,2.6vw,34px) }
.hx2 .hx-assim .hx-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); margin-top:10px }
.hx2 .hx-assim .hx-cols p{ font-size:18px; line-height:1.75; padding-top:22px; border-top:2px solid var(--menta) }
.hx2 .hx-assim .hx-quadro{ max-width:820px; margin:50px auto 0 }

/* ===================== OPÇÃO 3 – Imersivo ===================== */
.hx3 .hx-heroi{ background:var(--marinho-esc); padding:clamp(100px,13vw,170px) 0 clamp(80px,10vw,130px) }
.hx3 .hx-heroi .hx-foto{ opacity:.35; filter:grayscale(1) contrast(1.1); mix-blend-mode:luminosity }
.hx3 .hx-heroi::after{ content:""; position:absolute; inset:auto 0 0 0; height:120px; z-index:-1;
  background:linear-gradient(180deg,transparent,var(--marinho-esc)) }
.hx3 .hx-heroi .hx-anel{ width:520px; height:520px; right:-140px; top:-120px }
.hx3 .hx-heroi .hx-anel.b{ width:300px; height:300px; left:-100px; bottom:-120px; animation-direction:reverse }
.hx3 .hx-heroi h1{ font-size:clamp(40px,6vw,82px); line-height:1 }
.hx3 .hx-heroi .hx-frase{ font-size:clamp(20px,2.2vw,30px); line-height:1.45; max-width:900px }
.hx3 .hx-faixa{ background:var(--marinho-esc); color:#fff; padding:0 0 clamp(80px,10vw,130px) }
.hx3 .hx-faixa .hx-in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center }
.hx3 .hx-faixa h2{ color:var(--menta); font-size:clamp(26px,2.6vw,34px) }
.hx3 .hx-faixa p{ font-size:18px; line-height:1.75; color:#e9e8f2 }
.hx3 .hx-faixa .hx-quadro{ background:#fff }
.hx3 .hx-assim{ background:linear-gradient(160deg,var(--verde) 0%,var(--verde-esc) 100%); color:#fff; padding:clamp(80px,10vw,130px) 0; position:relative }
.hx3 .hx-assim .hx-bolha{ width:260px; height:260px; background:rgba(255,255,255,.08); right:6%; top:-60px }
.hx3 .hx-assim h2{ font-size:clamp(26px,3vw,40px) }
.hx3 .hx-assim .hx-traco{ background:#fff }
.hx3 .hx-assim .hx-grade{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:center }
.hx3 .hx-assim p{ font-size:18px; line-height:1.75 } .hx3 .hx-assim p + p{ margin-top:18px }

/* ===================== OPÇÃO 4 – Rolagem com ilustração fixa ===================== */
.hx4 .hx-heroi{ padding:clamp(90px,12vw,150px) 0; text-align:center }
.hx4 .hx-heroi::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(0,161,133,.86) }
.hx4 .hx-heroi h1{ color:#fff }
.hx4 .hx-heroi .hx-traco{ background:#fff; margin:20px auto 28px }
.hx4 .hx-heroi .hx-frase{ margin:0 auto }
.hx4 .hx-heroi .hx-palavra{ display:inline-block; opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.hx4 .hx-heroi.hx-vis .hx-palavra{ opacity:1; transform:none }
.hx4 .hx-trilha{ padding:clamp(60px,8vw,110px) 0 }
.hx4 .hx-trilha .hx-in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px) }
.hx4 .hx-fixo{ position:sticky; top:110px; align-self:start }
.hx4 .hx-fixo .hx-quadro{ transition:opacity .6s var(--ease) }
.hx4 .hx-fixo .hx-tela{ position:absolute; inset:10px; opacity:0; transition:opacity .7s var(--ease) }
.hx4 .hx-fixo .hx-tela.ativa{ opacity:1 } .hx4 .hx-fixo .hx-tela:first-child{ position:relative; inset:auto }
.hx4 .hx-passo{ min-height:70vh; display:flex; flex-direction:column; justify-content:center }
.hx4 .hx-passo h2{ font-size:clamp(26px,2.6vw,34px); color:var(--marinho) }
.hx4 .hx-passo p{ font-size:18px; line-height:1.75 } .hx4 .hx-passo p + p{ margin-top:18px }
.hx4 .hx-passo.assim h2{ color:var(--verde) }
.hx4 .hx-indic{ display:flex; gap:8px; margin-top:16px; justify-content:center }
.hx4 .hx-indic i{ width:28px; height:4px; border-radius:2px; background:#d8dbe4; transition:background .4s }
.hx4 .hx-indic i.ativa{ background:var(--menta) }

/* ---------- tablet e celular ---------- */
@media (max-width:1024px){
  .hx1 .hx-missao .hx-in, .hx1 .hx-assim .hx-grade, .hx2 .hx-heroi .hx-in, .hx3 .hx-faixa .hx-in, .hx3 .hx-assim .hx-grade{ grid-template-columns:1fr }
  .hx2 .hx-heroi .hx-foto{ aspect-ratio:16/10; border-radius:24px 24px 24px 80px }
  .hx2 .hx-assim .hx-cols{ grid-template-columns:1fr }
  .hx4 .hx-trilha .hx-in{ grid-template-columns:1fr }
  .hx4 .hx-fixo{ position:relative; top:auto; display:none }
  .hx4 .hx-passo{ min-height:0; padding:30px 0 }
  .hx4 .hx-passo .hx-quadro-m{ display:block!important; margin-top:28px }
}
@media (max-width:767px){
  .hx .hx-in{ width:calc(100% - 32px) }
  .hx p, .hx1 .hx-missao p, .hx1 .hx-assim p, .hx2 .hx-assim .hx-cols p, .hx3 .hx-faixa p, .hx3 .hx-assim p, .hx4 .hx-passo p{ font-size:16.5px }
  .hx2 .hx-missao .hx-quadro{ transform:translateY(50px) }
  .hx2 .hx-assim{ padding-top:110px }
  .hx3 .hx-heroi .hx-anel{ width:320px; height:320px }
}
.hx4 .hx-quadro-m{ display:none }
@media (prefers-reduced-motion:reduce){
  .hx [data-rev], .hx4 .hx-heroi .hx-palavra{ opacity:1!important; transform:none!important; transition:none!important }
  .hx .hx-bolha, .hx .hx-anel{ animation:none!important }
}