/* =========================================================
   SECÇÃO SERVIÇOS (carrossel) | css/servicos.css
   As cores desta secção mudam aqui, nas variáveis --s-...
   ========================================================= */
.servicos{
  --s-fundo:#E4DAD2; --s-texto:#35201A; --s-suave:#6B5F58; --s-botao:#8B5A3B; --s-escuro:52,33,26;
  background:var(--s-fundo);color:var(--s-texto);
  font-family:var(--texto,"Outfit",system-ui,sans-serif);
}
.servicos-wrap{max-width:1326px;margin:0 auto;padding:0 24px}
.servicos-etq{display:block;font-size:1.05rem;text-transform:uppercase;margin-bottom:22px}

/* Título, texto e setas */
.servicos-cab{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;align-items:start}
.servicos h2{margin:0;font-family:var(--display,"Outfit",system-ui,sans-serif);font-weight:400;font-size:clamp(2rem,3.9vw,3.1rem);line-height:1;letter-spacing:-.015em;text-transform:uppercase}
.servicos-cab p{color:var(--s-suave);line-height:1.85}
.servicos-setas{display:flex;justify-content:flex-end;gap:8px;align-self:center}
.servicos-setas button{position:relative;width:40px;height:40px;border:0;border-radius:50%;background:var(--s-botao);cursor:pointer;transition:background .2s}
.servicos-setas button:hover{background:var(--s-texto)}
.servicos-setas button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border:solid #fff;border-width:2px 2px 0 0;transform:translate(-35%,-50%) rotate(225deg)}
.servicos-setas button+button::before{transform:translate(-65%,-50%) rotate(45deg)}

/* Carrossel: sai da largura do site e mostra os cartões cortados nos lados */
.servicos-trilho{--lado:max(24px,calc((100% - 1278px)/2));
  display:flex;align-items:flex-start;gap:30px;margin-top:44px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 var(--lado);scroll-padding:0 var(--lado)}
.servicos-trilho::-webkit-scrollbar{display:none}
.servicos-trilho.arrasta{scroll-snap-type:none;cursor:grabbing;user-select:none}

/* Cartões: largura entre 250px e 453px; os ímpares são mais altos (troca odd por even, ou apaga a regra, para mudar) */
.servicos-card{position:relative;flex:0 0 clamp(250px,23.6vw,453px);aspect-ratio:453/543;scroll-snap-align:start;overflow:hidden;color:#fff;text-decoration:none;
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.07) 0 2px,transparent 2px 12px),linear-gradient(135deg,#8E6B45,#4F3A25)}
.servicos-card:nth-child(odd){aspect-ratio:453/611}
.servicos-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform .7s}
.servicos-card:hover img{transform:scale(1.06)}
.servicos-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 45%,rgba(var(--s-escuro),.88))}
.servicos-card::after{content:attr(data-foto);position:absolute;z-index:2;left:16px;top:16px;font-size:.78rem;font-weight:700;background:rgba(239,235,229,.92);color:var(--s-texto);padding:4px 10px}
.servicos-card:has(img)::after{display:none}
.servicos-card:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.servicos-card h3{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;margin:0;font-family:var(--display,"Outfit",system-ui,sans-serif);font-weight:400;font-size:clamp(1.4rem,2vw,2.2rem);line-height:1.1;letter-spacing:-.015em;text-transform:uppercase}

/* Telemóvel */
@media (max-width:900px){
  .servicos-cab{grid-template-columns:1fr;gap:20px}
  .servicos-setas{justify-content:flex-start}
  .servicos-card{flex-basis:72vw}
}
@media (prefers-reduced-motion:reduce){.servicos-card img,.servicos-setas button{transition:none}}