/* ==========================================================================
   05 Services (dono: FOTOS). Carrossel em que o cartao ativo cresce e abre o texto.
   Referencia: TopLine Pro, styles.css (.service-carousel, .service-track, .service-card, .service-card.is-active, .service-card__more).
   Sem JS: o carrossel vira uma faixa rolavel com todos os cartoes abertos. Com JS (html.js) so o ativo abre; s-services.js move a trilha.
   ========================================================================== */
.svc{
  --card-w:clamp(260px,23.5vw,340px);
  --card-w-active:clamp(520px,50vw,720px);
  --card-h:clamp(480px,38vw,560px);
  --card-gap:8px;
  padding-bottom:calc(var(--sec-y) * .8);
  overflow:clip;
}
.svc .sec__head{ margin-bottom:clamp(28px,3.4vw,48px) }
.svc__car{ touch-action:pan-y; overflow-x:auto; scrollbar-width:none }
.svc__car::-webkit-scrollbar{ display:none }
.svc__track{ display:flex; gap:var(--card-gap); width:max-content; padding-inline:var(--gutter) }
.js .svc__car{ overflow:hidden }
.js .svc__track{ padding-inline:0; transition:transform .85s var(--ease-out); will-change:transform }

.svc__card{
  position:relative; isolation:isolate; flex:0 0 var(--card-w-active); height:var(--card-h); overflow:hidden;
  border-radius:var(--r-lg); background:var(--profundo); color:#fff;
}
.js .svc__card{ flex-basis:var(--card-w); transition:flex-basis .85s var(--ease-out) }
.js .svc__card.is-active{ flex-basis:var(--card-w-active) }
.svc__card>img,.svc__card>noscript>img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);
  transition:transform 1.3s var(--ease-out);
}
.svc__card::before{ /* veu de leitura embaixo, onde mora o texto */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg,rgba(28,28,27,.92) 0%,rgba(28,28,27,.8) 28%,rgba(28,28,27,.5) 54%,rgba(28,28,27,0) 84%);
}
.js .svc__card:not(.is-active):hover>img{ transform:scale(1.05) }
html:not(.js) .svc__card>img{ display:none }

.svc__body{ position:absolute; left:0; right:0; bottom:0; padding:clamp(22px,2.6vw,36px) clamp(22px,2.6vw,36px) clamp(22px,2.6vw,34px) }
.svc__meta{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--pedra) }
.svc__h{
  margin-top:10px; max-width:15em; font-size:clamp(22px,2.1vw,30px); font-weight:600; line-height:1.12; letter-spacing:-.04em; text-wrap:balance;
}
.js .svc__card.is-active .svc__h{ font-size:clamp(26px,2.7vw,38px) }
.svc__h .pend{ font-size:.5em; font-weight:500; letter-spacing:0; vertical-align:middle; border-bottom-color:rgba(221,219,212,.6) }
.svc__more>div{ min-height:0; overflow:hidden }
.svc__copy{ max-width:34em; padding-top:16px; font-size:17px; line-height:1.5; color:var(--pedra) }
.svc__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding-top:22px }
.svc__est{
  display:inline-flex; align-items:center; min-height:44px; font-size:15.5px; font-weight:600; color:#fff;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; transition:text-underline-offset .3s var(--ease-out);
}
.svc__est:hover{ text-underline-offset:9px }
.svc__hit{ display:none; position:absolute; inset:0; z-index:2; width:100%; border:0; border-radius:inherit; background:transparent; padding:0 }
.js .svc__hit{ display:block }
.js .svc__card.is-active .svc__hit{ display:none }
.svc__card:has(.svc__hit:focus-visible){ outline:2px solid var(--grafite); outline-offset:3px }

/* o texto extra: grid-rows 0fr > 1fr (anima altura sem o JS medir nada). Sem JS fica aberto. */
.svc__more{ display:grid; grid-template-rows:1fr }
.js .svc__more{
  display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden;
  transition:grid-template-rows .6s var(--ease-out), opacity .3s ease, visibility 0s linear .6s;
}
.js .svc__card.is-active .svc__more{
  grid-template-rows:1fr; opacity:1; visibility:visible;
  transition:grid-template-rows .75s var(--ease-out) .12s, opacity .5s ease .26s, visibility 0s;
}

.js .svc__car.is-resizing .svc__card,.js .svc__car.is-resizing .svc__track{ transition:none }
.svc__card img{ -webkit-user-drag:none; user-select:none }

.svc__ctrl{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:clamp(20px,2.4vw,32px) }
.svc__count{ font-size:15px; font-weight:500; color:var(--texto2); letter-spacing:.04em }
.svc__count b{ font-size:22px; font-weight:600; color:var(--grafite); letter-spacing:-.02em }
.svc__btns{ display:flex; gap:10px }
.svc__arrow{
  display:grid; place-items:center; width:52px; height:52px; padding:0; border:1px solid var(--grafite); border-radius:50%; background:transparent; color:var(--grafite);
  transition:background-color .3s, color .3s, transform .4s var(--ease-out);
}
.svc__arrow svg{ width:20px; height:20px }
.svc__arrow:hover{ background:var(--grafite); color:#fff }
.svc__arrow:active{ transform:scale(.94) }
html:not(.js) .svc__ctrl .svc__btns,html:not(.js) .svc__count{ display:none }

@media (max-width:760px){
  .svc{ --card-w:72vw; --card-w-active:84vw; --card-h:500px }
  .svc__copy{ font-size:16px }
}
@media (prefers-reduced-motion:reduce){
  .js .svc__track{ transition:none }
}