/* Gesso Camargo · página Serviços (/servicos/)
   Usa tokens e componentes de styles.css. Cada capítulo cabe na janela abaixo do header + barra de serviços. */
:root{--snav-h:52px}
html.has-snav{scroll-padding-top:calc(var(--hdr,var(--header-h)) + var(--snav-h))}

/* ---------- hero com imagem full width ---------- */
.shero{position:relative;display:flex;align-items:center;min-height:min(88svh,880px);padding-top:var(--header-h);overflow:hidden;background:var(--surface-dark);color:var(--text-on-dark)}
.shero__media{position:absolute;inset:0;transition:transform 2.2s var(--ease-out)}
.shero__media img{position:absolute;left:0;top:-6%;width:100%;height:112%;max-width:none;object-fit:cover;object-position:62% 40%;will-change:transform}
.shero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,32,22,.9) 0%,rgba(11,32,22,.78) 34%,rgba(11,32,22,.32) 64%,rgba(11,32,22,.08) 100%)}
.shero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1;background:url(../patterns/mascara-linear-floresta.svg) center/100% 100% no-repeat;opacity:.8}
.shero__content{position:relative;z-index:2;padding-block:clamp(32px,7vh,88px)}
.shero__title{margin:0 0 clamp(14px,2.4vh,22px);max-width:14ch;font:500 clamp(2.3rem,min(1.1rem + 4.6vw,8.8vh),5.2rem)/.98 var(--font-display);letter-spacing:-.032em;text-wrap:balance}
.shero__lead{max-width:46ch;margin:0 0 clamp(20px,3.6vh,32px);font-size:var(--type-lead);line-height:var(--lh-lead);color:#D3E0D8}
.shero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
html[data-motion="on"] .shero__media{transform:scale(1.06)}
html[data-motion="on"] .shero [data-hero-in]{opacity:0;transform:translate3d(0,18px,0)}
/* mesma especificidade do estado inicial (html[data-motion] ...), senão a revelação perde a disputa */
html[data-motion="on"] .shero.is-in .shero__media{transform:none}
html[data-motion="on"] .shero.is-in [data-hero-in]{opacity:1;transform:none;transition:opacity .9s var(--ease-out) .35s,transform .9s var(--ease-out) .35s}
html[data-motion="on"] .shero.is-in .shero__lead{transition-delay:.5s}
html[data-motion="on"] .shero.is-in .shero__actions{transition-delay:.62s}

/* ---------- barra de serviços (fixa sob o header) ---------- */
.snav{position:sticky;top:var(--hdr,var(--header-h));z-index:40;background:var(--background);box-shadow:0 1px 0 var(--border);transition:top .45s var(--ease-ui)}
.snav__in{height:var(--snav-h);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.snav__in::-webkit-scrollbar{display:none}
.snav__list{display:flex;align-items:stretch;gap:clamp(18px,2.4vw,34px);height:100%;margin:0;padding:0;list-style:none;white-space:nowrap}
.snav__list a{display:flex;align-items:center;height:100%;font:500 .875rem/1 var(--font-sans);color:var(--text-secondary);text-decoration:none;box-shadow:inset 0 -2px 0 transparent;transition:color .18s var(--ease-ui),box-shadow .25s var(--ease-ui)}
.snav__list a:hover{color:var(--foreground)}
.snav__list a.is-active{color:var(--foreground);font-weight:600;box-shadow:inset 0 -2px 0 var(--primary)}
.snav__list a:focus-visible{outline-offset:-3px}

/* ---------- capítulos ---------- */
.cap{--cap-pad:clamp(28px,6vh,88px);--row-pad:clamp(10px,1.8vh,18px);padding-block:var(--cap-pad)}
.cap--light{background:var(--background)}
.cap--dark{background:var(--surface-dark);color:var(--text-on-dark)}
.cap--paper{background:#FBFAF7}
.cap__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px clamp(32px,4.5vw,72px);align-items:start}
.cap--dark .cap__grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.cap--dark .cap__head{order:2}
.cap__head{padding-top:var(--row-pad)}
.cap__head .h2{max-width:13ch;font-size:clamp(1.7rem,min(1rem + 2.5vw,5.8vh),3.1rem)}
.cap__lead{max-width:36ch;margin:clamp(14px,2.4vh,22px) 0 0;font-size:var(--type-small);line-height:1.55;color:var(--text-secondary)}
.cap--dark .cap__lead{color:var(--text-on-dark-secondary)}
.cap__list{display:grid}

/* ficha de serviço (catálogo: foto + texto, separadas por linha fina) */
.srv{--fig-h:clamp(120px,calc((100svh - var(--header-h) - var(--snav-h) - var(--cap-pad) * 2) / 3 - var(--row-pad) * 2),196px);display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,7fr);gap:clamp(16px,2vw,28px);align-items:start;padding-block:var(--row-pad);border-top:1px solid var(--border)}
.srv:first-child{border-top:0}
.cap--dark .srv{border-top-color:var(--border-on-dark)}
.srv__fig{height:var(--fig-h);margin:0;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-1)}
.cap--dark .srv__fig{background:var(--surface-dark-2)}
.srv__fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.srv__body{display:flex;flex-direction:column;gap:8px}
.srv__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 20px}
.srv__title{margin:0 0 4px;font:500 clamp(1.15rem,1rem + .5vw,1.4rem)/1.2 var(--font-display);letter-spacing:-.012em}
.srv__sub{margin:0;font:500 .875rem/1.3 var(--font-sans);color:var(--text-secondary)}
.cap--dark .srv__sub{color:var(--text-on-dark-secondary)}
.srv__desc{margin:0;max-width:68ch;font-size:.9063rem;line-height:1.5;color:var(--text-secondary)}
.cap--dark .srv__desc{color:var(--text-on-dark-secondary)}
.srv__tipos{display:flex;flex-wrap:wrap;gap:2px 0;margin:0;padding:0;list-style:none;font-size:.8125rem;line-height:1.45;color:var(--foreground)}
.cap--dark .srv__tipos{color:var(--text-on-dark)}
.srv__tipos li+li::before{content:"·";margin:0 .5em;color:var(--primary)}
.cap--dark .srv__tipos li+li::before{color:var(--text-on-dark-secondary)}
.srv__cta{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-top:-2px;font-weight:600;font-size:.9375rem;color:var(--primary);text-decoration:none;white-space:nowrap}
.cap--dark .srv__cta{color:var(--text-on-dark)}
.srv__cta .btn__wa{width:16px;height:16px}
.srv__cta span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease-out)}
@media (hover:hover){
  .srv__cta:hover span{background-size:100% 1px}
  .srv__cta:hover .btn__arrow{transform:translateX(4px)}
  .srv:hover .srv__fig img{transform:scale(1.035)}
}
.srv:target .srv__title{color:var(--primary)}
.cap--dark .srv:target .srv__title{color:var(--text-on-dark)}

/* desktop: coluna do capítulo mais estreita, texto das fichas com mais largura */
@media (min-width:981px){
  .cap__grid{grid-template-columns:minmax(0,3.3fr) minmax(0,8.7fr)}
  .cap--dark .cap__grid{grid-template-columns:minmax(0,8.7fr) minmax(0,3.3fr)}
}
/* notebooks baixos: menos respiro vertical para as 3 fichas caberem */
@media (min-width:981px) and (max-height:860px){
  .cap{--cap-pad:clamp(20px,3.6vh,40px);--row-pad:10px}
  .srv__desc{font-size:.875rem;line-height:1.45}
  .srv__body{gap:6px}
  .cap__lead{display:none}
}
/* 981 a 1199 px: menos espaço horizontal, texto um pouco menor */
@media (min-width:981px) and (max-width:1199px){
  .cap{--row-pad:6px;--cap-pad:clamp(16px,2.8vh,40px)}
  .srv{grid-template-columns:minmax(0,3fr) minmax(0,7fr)}
  .srv__desc{font-size:.8438rem;line-height:1.42}
  .srv__tipos{font-size:.75rem}
}

/* tablet: cabeçalho do capítulo em cima, fichas em linhas */
@media (max-width:980px){
  .cap__grid,.cap--dark .cap__grid{grid-template-columns:1fr}
  .cap--dark .cap__head{order:0}
  .cap__head .h2{max-width:none}
  .srv{--fig-h:clamp(120px,calc((100svh - var(--header-h) - var(--snav-h) - var(--cap-pad) * 2 - 170px) / 3 - var(--row-pad) * 2),190px);grid-template-columns:minmax(0,3fr) minmax(0,7fr)}
  .cap__lead{display:none}
  .cap__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 24px}
  .cap__head .eyebrow{flex-basis:100%}
  .shero{min-height:min(80svh,760px)}
}

/* celular: fichas deslizam na horizontal, o capítulo inteiro cabe em uma tela */
@media (max-width:560px){
  :root{--snav-h:48px}
  .cap{--cap-pad:clamp(28px,5vh,44px)}
  .cap__head{padding-top:0}
  .cap__lead{margin-top:10px;font-size:.875rem}
  .cap__list{display:flex;gap:12px;margin-inline:calc(var(--space-page-x) * -1);padding:4px var(--space-page-x) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--space-page-x);scrollbar-width:none;overscroll-behavior-x:contain}
  .cap__list::-webkit-scrollbar{display:none}
  .srv{flex:none;width:min(82vw,330px);grid-template-columns:1fr;gap:12px;padding:0;border:0;scroll-snap-align:start}
  .srv__fig{height:auto;aspect-ratio:16/10}
  .srv__desc{font-size:.875rem}
  .srv__top{flex-direction:column;gap:2px}
  .shero{min-height:max(78svh,520px);align-items:flex-end}
  .shero::before{background:linear-gradient(180deg,rgba(11,32,22,.35) 0%,rgba(11,32,22,.55) 35%,rgba(11,32,22,.9) 70%,rgba(11,32,22,.94) 100%)}
  .shero__media img{object-position:40% 40%}
  .shero__actions .btn{flex:1 1 auto}
}
@media (max-width:560px) and (max-height:780px){
  .cap{--cap-pad:22px}
  .srv__fig{aspect-ratio:2.1/1}
  .srv__desc{font-size:.8125rem;line-height:1.42}
  .srv__tipos{font-size:.75rem}
}
@media (max-width:560px) and (max-height:700px){
  .srv__sub{display:none}
  .srv__title{margin-bottom:0}
}