/* =========================================================
   Sections — hero-intro, hero, demandas, sobre, cta, etc.
   ========================================================= */

/* ---------- herói intro (scroll steps) ---------- */
.heroi-intro { position: relative; height: calc(4 * 100vh); background: var(--noite) }
@media (max-width:920px) { .heroi-intro { height: calc(2.2 * 100vh) } }

.heroi-intro-pin {
  position: sticky; top: var(--altura-topo, 8.5rem);
  height: calc(100vh - var(--altura-topo, 8.5rem));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem clamp(1.25rem,5vw,4rem);
}
@media (max-width:920px) { .heroi-intro-pin { padding-bottom: 5.5rem } }

.heroi-intro-passos { display: grid }

.heroi-intro-seta {
  flex: none; margin-top: 2.75rem; color: var(--salvia-clara);
  opacity: 1; transition: opacity .35s var(--curva);
  animation: heroi-intro-seta-quicar 1.8s ease-in-out infinite;
}
.heroi-intro-seta.escondida { opacity: 0 }

.heroi-intro-passo {
  grid-area: 1/1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; max-width: 26ch; margin: 0;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--curva), transform .5s var(--curva);
  position: relative;
}
.heroi-intro-passo.ativo { opacity: 1; transform: none }
.heroi-intro-passo p { margin: 0 }

/* número decorativo gigante ao fundo */
.heroi-intro-passo[data-passo]:not(:first-child)::before {
  content: attr(data-num);
  position: absolute; inset: 50% 0 auto; transform: translateY(-50%);
  font-family: var(--display); font-size: 20rem; font-weight: 800;
  color: var(--areia); opacity: .04; pointer-events: none; user-select: none;
  line-height: 1; z-index: 0;
}
.heroi-intro-avatar { width: 9rem; height: auto; margin-bottom: 1.6rem; object-fit: contain; position: relative; z-index: 1 }
.heroi-intro-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; margin-bottom: 1.6rem; border-radius: 50%;
  border: 1.5px solid var(--salvia-clara);
  font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--areia);
  position: relative; z-index: 1;
}

.heroi-intro-frase {
  font-family: var(--display-serif);
  font-size: clamp(1.5rem, 4.2vw, 2.6rem); line-height: 1.3;
  color: var(--areia); position: relative; z-index: 1;
}
.heroi-intro-destaque { color: var(--salvia-clara); font-style: italic }

/* ---------- herói principal ---------- */
.heroi {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(760px, calc(100svh - 8rem));
  padding: clamp(3.5rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem);
  background:
    radial-gradient(circle at 75% 35%, rgba(107,135,106,.16), transparent 31rem),
    linear-gradient(180deg, #0A140D 0%, #071009 100%);
  color: var(--areia);
}
.heroi::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 100% 5.5rem;
}
.heroi-grade {
  width: min(100% - 2.5rem, 1280px); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(22rem,.95fr);
  gap: clamp(2.5rem,6vw,6rem); align-items: center;
  min-height: clamp(32rem,68vh,42rem);
}

.heroi-texto { position: relative; z-index: 2; max-width: 44rem }
.heroi-sobrancelha {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1.45rem; color: #A7CF55;
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.heroi-sobrancelha::before { content: ""; width: 2.25rem; height: 1px; background: currentColor }
.heroi-texto h1 {
  max-width: 13ch; margin: 0 0 1.55rem;
  color: #FFFFFF; font-size: clamp(3.3rem,4.8vw,5.2rem);
  font-weight: 800; letter-spacing: -.065em; line-height: .92;
}
.heroi-texto h1 em { color: #A7CF55; font-family: var(--display-serif); font-weight: 400; letter-spacing: -.035em }
.heroi-titulo-mobile,.heroi-resumo-mobile { display: none }
.heroi-resumo {
  max-width: 37rem; margin: 0 0 2rem;
  color: rgba(247,242,230,.72); font-size: clamp(1rem,1.35vw,1.18rem); line-height: 1.65;
}
.heroi .botao-lima { background: #A7CF55; color: var(--noite); box-shadow: 0 12px 32px rgba(0,0,0,.24) }
.heroi .botao-lima:hover { background: #B9DF69; color: var(--noite) }
.heroi-atendimento {
  display: flex; flex-wrap: wrap; gap: .65rem 1.4rem;
  margin-top: 1.8rem; color: rgba(247,242,230,.62); font-size: .78rem;
}
.heroi-atendimento span { display: inline-flex; align-items: center; gap: .5rem }
.heroi-atendimento span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #A7CF55 }

.heroi-foto { margin: 0; position: relative; align-self: end; min-height: 32rem }
.heroi-foto::after {
  content: ""; position: absolute; inset: auto -4rem -4rem -2rem; height: 48%; z-index: 1;
  background: linear-gradient(180deg, transparent, #071009 78%); pointer-events: none;
}
.heroi-foto-arco {
  position: absolute; inset: 2rem -1.5rem 1rem 1.5rem;
  border: 1px solid rgba(169,196,166,.28); border-radius: 15rem 15rem 1rem 1rem;
  transform: rotate(3deg); z-index: -1;
}
.heroi-foto video {
  width: 100%; height: clamp(32rem,64vh,42rem); object-fit: cover; object-position: 54% center;
  border-radius: 15rem 15rem 1.5rem 1.5rem;
  filter: saturate(.82) contrast(1.04); border: 1px solid rgba(237,228,207,.2);
}
.heroi-foto figcaption {
  position: absolute; right: -1rem; bottom: 2rem; z-index: 2;
  display: grid; padding: .8rem 1rem; min-width: 12rem;
  background: rgba(13,31,20,.9); border: 1px solid rgba(237,228,207,.18); border-radius: 10px;
  backdrop-filter: blur(12px); color: var(--areia);
}
.heroi-foto figcaption strong { font-family: var(--display); font-size: .9rem }
.heroi-foto figcaption span { color: var(--salvia-clara); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase }
.heroi-linha-decorativa { position: absolute; right: -3rem; top: 5%; width: min(22vw,24rem); height: 82%; opacity: .5; z-index: -1 }
.heroi-linha-decorativa svg { width: 100%; height: 100% }
.heroi-linha-decorativa path { fill: none; stroke: var(--salvia-clara); stroke-width: 1.25; vector-effect: non-scaling-stroke }

.linha-respiro { display: block; position: absolute; inset: auto 0 0; width: 100%; height: clamp(38px,4vw,60px) }
.linha-respiro path { fill: none; stroke: var(--salvia-clara); stroke-width: 1; opacity: .24; vector-effect: non-scaling-stroke }

@media (max-width:920px) {
  .heroi { min-height: 0; padding-top: 3.5rem }
  .heroi-grade { grid-template-columns: 1fr; min-height: 0; gap: 3rem }
  .heroi-texto { max-width: 42rem }
  .heroi-texto h1 { max-width: 12ch; font-size: clamp(3.15rem,12vw,5.5rem) }
  .heroi-foto  { max-width: 34rem; min-height: 0; margin-inline: auto; width: 100% }
  .heroi-foto video { height: auto; aspect-ratio: 4/5; border-radius: 12rem 12rem 1.25rem 1.25rem }
  .heroi-foto figcaption { right: .75rem; bottom: 1.25rem }
  .heroi-linha-decorativa { width: 45vw; opacity: .28 }
  .titulo-secao,.apoio { margin-inline: auto }
}

@media (max-width:560px) {
  .heroi { padding: 2rem 0 0; min-height: calc(100svh - 6rem) }
  .heroi-grade { width: min(100% - 2rem, 1280px) }
  .heroi-grade { gap: 1.5rem }
  .heroi-texto { text-align: center }
  .heroi-sobrancelha { display: none }
  .heroi-titulo-desktop,.heroi-resumo-desktop { display: none }
  .heroi-titulo-mobile,.heroi-resumo-mobile { display: inline }
  .heroi-texto h1 { max-width: 100%; font-size: clamp(2.65rem,12.8vw,4.1rem); line-height: .98; margin: 0 auto 1.3rem }
  .heroi-resumo { max-width: 31rem; margin: 0 auto 1.65rem; font-size: clamp(.98rem,4.45vw,1.08rem); line-height: 1.5 }
  .heroi .botao { width: 100%; min-height: 4.3rem; font-size: clamp(.82rem,4vw,1rem) }
  .heroi-atendimento { display: none }
  .heroi-foto { width: calc(100% + 2rem); max-width: none; margin: .5rem -1rem 0 }
  .heroi-foto-arco { inset: 1rem 1.4rem 0; border-radius: 14rem 14rem 0 0 }
  .heroi-foto video {
    width: 100%; height: min(55svh,31rem); aspect-ratio: auto;
    object-position: 54% center; border-radius: 12rem 12rem 0 0;
    border-bottom: 0;
  }
  .heroi-foto::after { inset: auto -1rem -1px; height: 30% }
  .heroi-foto figcaption { display: none }
  .heroi-linha-decorativa { display: none }
  .linha-respiro { display: none }
}

/* ---------- demandas ---------- */
/* (carrossel já em components) */

/* ---------- processo ---------- */
/* (carrossel já em components) */

/* ---------- atendimento ---------- */
.dupla {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2.5rem,5vw,4.5rem); align-items: start;
}
@media (max-width:860px) { .dupla { grid-template-columns: 1fr } }

.modos { margin-top: clamp(3rem,6vw,4.5rem) }
.modos-grade { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: clamp(1.2rem,2.5vw,1.8rem) }
.modo-cartao {
  padding: 2.2rem 2rem; border-radius: 16px;
  background: linear-gradient(155deg, var(--musgo) 0%, var(--folha) 100%);
  box-shadow: 0 8px 24px rgba(13,31,20,.2);
  transition: transform .25s var(--curva), box-shadow .25s;
}
.modo-cartao:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(13,31,20,.28) }
.modo-cartao h4 { margin: 0 0 .9rem; font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--areia) }
.modo-cartao p  { margin: 0; color: var(--salvia-clara); font-size: .95rem; line-height: 1.6 }
.modos-cta { display: flex; justify-content: center; margin-top: clamp(1.8rem,3.5vw,2.4rem) }

/* ---------- sobre ---------- */
.perfil {
  display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1fr);
  gap: clamp(2.2rem,5vw,4.5rem); align-items: start;
}
@media (max-width:880px) { .perfil { grid-template-columns: 1fr } }

.retrato { margin: 0; position: sticky; top: 6rem }
@media (max-width:880px) { .retrato { position: static; max-width: 22rem; margin-inline: auto } }
.retrato video {
  width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; background: var(--musgo);
  border-radius: 16px;
  /* moldura editorial */
  border: 3px solid var(--areia);
  box-shadow: 8px 8px 0 var(--folha), 0 20px 40px rgba(13,31,20,.2);
}
@media (max-width:880px) { .retrato video { aspect-ratio: 1/1; object-fit: cover; object-position: top center } }
.perfil-texto p { color: var(--texto-suave); max-width: 58ch }

/* ---------- cta final ---------- */
.cta {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
  gap: clamp(2rem,5vw,4rem); align-items: center;
  width: min(100% - 2.5rem, 1320px); margin-inline: auto;
  padding-block: clamp(3rem,6vw,5rem);
  position: relative; overflow: hidden; border-radius: 20px;
}
.cta::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 55%;
  background: var(--noite); border-radius: 0;
}
.cta-foto { margin: 0; order: 2; max-width: 88%; margin-inline: auto; position: relative; z-index: 1 }
.cta-texto { order: 1; padding-left: clamp(1.5rem,4vw,3rem); position: relative; z-index: 1 }
.cta-foto img {
  width: 100%; height: min(52vh,420px); object-fit: cover; object-position: top center;
  border-radius: 20px; border: 1px solid var(--linha);
}
.cta-texto h2 {
  font-family: var(--display-serif);
  font-size: clamp(2.2rem,5vw,4rem); font-weight: 400;
  letter-spacing: -.02em; line-height: 1.1; color: var(--areia); margin: 0 0 1.1rem;
}
.cta-texto > p { color: var(--salvia-clara); max-width: 46ch; margin: 0 0 2.2rem }
.avisos { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: .9rem; max-width: 52ch }
.avisos li { color: var(--salvia-clara); font-size: .88rem; line-height: 1.5; padding-left: 1.1rem; position: relative }
.avisos li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--salvia) }
.avisos strong { color: var(--areia); font-weight: 600 }

@media (max-width:880px) {
  .cta { grid-template-columns: 1fr; text-align: center }
  .cta::before { display: none }
  .cta-foto { order: 1; max-width: 20rem; margin-inline: auto }
  .cta-foto img { height: auto; aspect-ratio: 9/11 }
  .cta-texto { order: 2; padding-left: 0; background: var(--noite); padding: 2rem 1.5rem; border-radius: 16px }
  .cta-texto > p,.avisos { margin-inline: auto }
  .avisos li { padding-left: 0 }
  .avisos li::before { display: none }
}