/* ============================================================
   PÁGINAS DE SERVIÇO — mesma linguagem da home
   (fundo de papel, blocos escuros arredondados, verde/laranja)
   ============================================================ */

.pg-servico main{ display:block; }

.rotulo{
  font-size:clamp(11px,.9vw,13px); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--laranja);
  text-align:center; margin-bottom:.9em;
}
.rotulo--claro{ color:var(--verde); }

/* ---------- HERO ---------- */
.sh{
  position:relative;
  margin:0;
  padding:clamp(120px,12vw,190px) clamp(20px,5vw,72px) clamp(56px,6vw,96px);
  background:linear-gradient(165deg, #0b0b0b 0%, #000 45%, #03211e 100%);
  border-radius:0 0 var(--raio-bloco) var(--raio-bloco);
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
/* foto do serviço compondo com o fundo escuro */
.sh__foto{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  opacity:.5;
}
/* o véu garante contraste do texto por cima da foto */
.sh__veu{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.3) 100%),
    linear-gradient(180deg, rgba(0,0,0,.75) 0%, transparent 34%, rgba(3,33,30,.6) 100%);
}
@media (max-width:760px){
  .sh__foto{ opacity:.42; }
  .sh__veu{ background:linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.58) 45%, rgba(3,33,30,.8) 100%); }
}
.sh__n{
  position:absolute; right:clamp(14px,2.6vw,44px); top:clamp(40px,5vw,70px); z-index:2;
  font-size:clamp(150px,26vw,380px); font-weight:800; line-height:.8;
  letter-spacing:-.04em; pointer-events:none; user-select:none;
  background:linear-gradient(180deg, rgba(114,191,141,.34) 0%, rgba(114,191,141,0) 88%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.sh__inner{ position:relative; z-index:3; max-width:860px; }

.sh__trilha{
  font-size:clamp(11px,.97vw,14px); color:rgba(255,255,255,.42);
  display:flex; gap:.55em; align-items:center; flex-wrap:wrap;
  margin-bottom:clamp(18px,2.4vw,34px);
}
.sh__trilha a{ transition:color .3s; }
.sh__trilha a:hover{ color:var(--verde); }
.sh__trilha strong{ color:rgba(255,255,255,.8); font-weight:600; }

.sh__tag{
  display:inline-block;
  font-size:clamp(11px,.97vw,14px); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  padding:.5em 1.1em; border-radius:999px;
  background:rgba(114,191,141,.14); color:var(--verde);
  box-shadow:inset 0 0 0 1px rgba(114,191,141,.35);
  margin-bottom:clamp(18px,2.2vw,30px);
}

.sh__titulo{
  display:flex; flex-direction:column;
  font-size:clamp(32px,5.2vw,74px); font-weight:800; line-height:1.02;
  letter-spacing:-.02em;
}
.sh__titulo .en{ color:var(--verde); }

.sh__sub{
  margin:clamp(18px,2.2vw,32px) 0 clamp(26px,3vw,42px);
  max-width:640px;
  font-size:clamp(14px,1.32vw,19px); font-weight:500; line-height:1.55;
  color:rgba(255,255,255,.7);
}

/* ---------- FAIXA CORRENDO ---------- */
.faixa{
  margin:clamp(14px,1.6vw,22px) 0 0;
  background:var(--verde-esc);
  overflow:hidden;
  padding:clamp(11px,1.2vw,17px) 0;
}
.faixa__track{
  display:flex; align-items:center; gap:clamp(20px,3vw,46px);
  width:max-content;
  animation:faixa 26s linear infinite;
  font-size:clamp(11px,1.11vw,16px); font-weight:600; color:#fff;
  white-space:nowrap;
}
.faixa__track span{ display:flex; align-items:center; gap:clamp(20px,3vw,46px); }
.faixa__track span::after{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--verde); flex:0 0 auto;
}
@keyframes faixa{ to{ transform:translateX(-50%); } }
.faixa:hover .faixa__track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .faixa__track{ animation:none; } }

/* ---------- NÚMEROS ---------- */
.snum{ padding:clamp(44px,5.5vw,86px) var(--pad) clamp(30px,4vw,60px); }
.snum__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,36px);
  text-align:center;
}
.snum__i{ display:flex; flex-direction:column; gap:.45em; align-items:center; }
.snum__v{
  font-size:clamp(28px,4.1vw,58px); font-weight:800; line-height:1;
  letter-spacing:-.03em; color:var(--verde-esc);
  font-variant-numeric:tabular-nums;
}
.snum__l{
  font-size:clamp(11px,1.04vw,15px); font-weight:500; line-height:1.35;
  color:#3d5b57; max-width:15ch;
}

/* ---------- O QUE ESTÁ INCLUSO ---------- */
.sinc{ padding:clamp(30px,4vw,60px) var(--pad) clamp(40px,5vw,80px); }
.sinc__titulo{
  max-width:900px; margin:0 auto clamp(28px,3.6vw,56px);
  text-align:center;
  font-size:clamp(24px,3.6vw,52px); font-weight:800; line-height:1.1;
  letter-spacing:-.02em; color:var(--verde-esc);
}
.sinc__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,22px);
}
.inc{
  background:var(--claro);
  border-radius:clamp(18px,2.2vw,32px);
  padding:clamp(22px,2.5vw,36px);
  box-shadow:0 12px 34px rgba(0,0,0,.09);
  transition:transform .5s var(--easing), box-shadow .5s var(--easing);
}
.inc:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(0,0,0,.16); }
.inc__icone{
  display:grid; place-items:center;
  width:clamp(42px,3.9vw,56px); height:clamp(42px,3.9vw,56px);
  border-radius:16px;
  background:rgba(4,74,68,.08); color:var(--verde-esc);
  margin-bottom:clamp(14px,1.6vw,22px);
}
.inc__icone svg{ width:52%; height:52%; }
.inc h3{ font-size:clamp(15px,1.53vw,22px); font-weight:700; color:#000; margin-bottom:.5em; }
.inc p{ font-size:clamp(12px,1.11vw,16px); line-height:1.55; color:#41504e; }

/* ---------- COMO FUNCIONA ---------- */
.spas{
  margin:0;
  padding:clamp(46px,5.6vw,92px) clamp(20px,4vw,70px) clamp(46px,5.6vw,88px);
  background:linear-gradient(180deg, #000 0%, #03211e 70%, var(--verde-esc) 100%);
  border-radius:var(--raio-bloco);
}
.spas__titulo{
  max-width:900px; margin:0 auto clamp(30px,4vw,60px);
  text-align:center;
  font-size:clamp(24px,3.6vw,52px); font-weight:800; line-height:1.1;
  letter-spacing:-.02em; color:#fff;
}
.spas__lista{ max-width:960px; margin:0 auto; display:flex; flex-direction:column; gap:clamp(12px,1.5vw,20px); }
.passo{
  display:flex; gap:clamp(16px,2.2vw,34px); align-items:flex-start;
  background:rgba(255,255,255,.045);
  border-radius:clamp(18px,2.2vw,30px);
  padding:clamp(20px,2.4vw,34px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:background-color .4s, box-shadow .4s;
}
.passo:hover{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(114,191,141,.35); }
.passo__n{
  flex:0 0 auto;
  font-size:clamp(34px,4.9vw,70px); font-weight:800; line-height:.86; letter-spacing:-.04em;
  background:linear-gradient(180deg, var(--verde) 10%, rgba(114,191,141,.15) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.passo h3{ font-size:clamp(16px,1.8vw,26px); font-weight:700; color:#fff; margin-bottom:.45em; }
.passo p{ font-size:clamp(12px,1.18vw,17px); line-height:1.6; color:rgba(255,255,255,.68); }

/* ---------- FECHO ---------- */
.sfim{ padding:clamp(40px,5vw,80px) var(--pad) clamp(30px,4vw,60px); }
.sfim__box{
  max-width:var(--max); margin:0 auto;
  text-align:center;
  padding:clamp(36px,5vw,80px) clamp(24px,4vw,60px);
}
.sfim__titulo{
  display:flex; flex-direction:column;
  font-size:clamp(26px,4.2vw,60px); font-weight:800; line-height:1.06;
  letter-spacing:-.02em; color:var(--verde-esc);
}
.sfim__titulo .en{ color:var(--laranja); }
.sfim__sub{
  max-width:660px; margin:clamp(16px,2vw,28px) auto clamp(24px,3vw,40px);
  font-size:clamp(13px,1.32vw,19px); line-height:1.55; color:#41504e;
}

/* ---------- OUTROS SERVIÇOS ---------- */
.soutros{ padding:clamp(20px,3vw,50px) var(--pad) clamp(44px,5vw,80px); }
.soutros__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,14px);
}
.soutros__grid a{
  display:flex; align-items:center; gap:.6em;
  padding:clamp(14px,1.6vw,22px) clamp(16px,1.8vw,26px);
  background:var(--claro); border-radius:999px;
  font-size:clamp(12px,1.11vw,16px); font-weight:600; color:var(--verde-esc);
  box-shadow:0 6px 18px rgba(0,0,0,.07);
  transition:background-color .35s, color .35s, transform .4s var(--easing);
}
.soutros__grid a:hover{ background:var(--verde-esc); color:#fff; transform:translateY(-3px); }
.soutros__grid span{ font-weight:800; opacity:.45; }
.soutros__grid em{ margin-left:auto; font-style:normal; transition:transform .35s var(--easing); }
.soutros__grid a:hover em{ transform:translateX(4px); }

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .sinc__grid{ grid-template-columns:repeat(2,1fr); }
  .soutros__grid{ grid-template-columns:repeat(2,1fr); }
  .snum__grid{ grid-template-columns:repeat(2,1fr); gap:26px; }
}
@media (max-width:560px){
  .sinc__grid{ grid-template-columns:1fr; }
  .soutros__grid{ grid-template-columns:1fr; }
  /* O resto da seção (rótulo, título e fecho) é centrado. Empilhado à esquerda,
     o card numerado era o único bloco fora do eixo. No celular tudo vai ao meio. */
  .passo{ flex-direction:column; gap:10px; align-items:center; text-align:center; }
  /* o número gigante desce pra não brigar com o header */
  .sh__n{ top:96px; opacity:.7; }
}
