/* ─────────────────────────────────────────────────────────────
   Serviços (/servicos e /servicos/<slug>): complementos do molde.
   Usa só os tokens de pages.css. Toda medida fluida tem teto.
   ───────────────────────────────────────────────────────────── */

/* mosaico do hero: 3 imagens em vez de uma foto larga (as fotos têm até 1600px) */
.sv-mosaic{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(10px,1.2vw,20px);
  margin-top:clamp(40px,5vw,80px);height:clamp(280px,32vw,600px)}
.sv-mosaic figure{margin:0;min-width:0;border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.sv-mosaic img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  .sv-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));height:auto}
  .sv-mosaic figure{aspect-ratio:4/5}
  .sv-mosaic figure:first-child{grid-column:1/-1;aspect-ratio:16/10}
}

/* navegação entre serviços (pílulas) */
.sv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,2.4vw,40px)}
.sv-tabs .sv-tab{text-decoration:none;white-space:nowrap;cursor:pointer}
.sv-tabs .sv-tab:hover{border-color:var(--ink)}
.sv-tabs .sv-tab[aria-current]{background:var(--ink);color:var(--page)}
@media (max-width:760px){
  .sv-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);padding-bottom:4px}
  .sv-tabs::-webkit-scrollbar{display:none}
}

/* texto corrido do bloco "ponto de partida" */
.sv-prose p{margin:0}
.sv-prose p+p{margin-top:1.1em}
.sv-prose p:first-child{font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
.sv-facts{margin-top:clamp(40px,4.5vw,72px)}
.sv-facts--big dd{font-size:clamp(22px,2vw,34px)}

/* lista editorial do "o que inclui": uma coluna, item com descrição */
.sv-list{gap:0}
.sv-list li{padding:clamp(14px,1.4vw,22px) 0}
.sv-list .t{font-size:clamp(22px,2vw,34px)}
.sv-list .d{max-width:56ch}
.sv-others a .t::after{content:"";display:inline-block;width:.38em;height:.38em;margin-left:.45em;vertical-align:.12em;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:0;transition:opacity .3s}
.sv-others li:hover .t::after{opacity:1}

/* cards dos serviços na visão geral */
.sv-card h3{margin-top:2px}
.sv-more{display:inline-flex;align-items:center;gap:.6em;font-size:var(--fs-small);color:var(--ink)}
.sv-more svg{width:12px;height:12px;transition:transform .4s var(--ease)}
.sv-card:hover .sv-more svg{transform:translateX(4px)}

/* feed de posts verticais (1080x1350) */
.sv-feed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,20px)}
.sv-feed figure{margin:0;min-width:0}
.sv-feed img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-md);background:var(--card);display:block}
.sv-feed figcaption{margin-top:10px;font-size:var(--fs-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--body);font-family:var(--mono)!important}
@media (max-width:900px){.sv-feed{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* "para quem é": segundo card com marcador neutro */
.sv-fit .pg-card{gap:20px}
.sv-fit .pg-card ul{gap:14px;font-size:var(--fs-body)}
.sv-not li::before{background:var(--muted)!important}

/* pacotes dentro do painel pastel */
.sv-packs .pg-card{background:#ffffffb3;color:#121212}
.sv-packs .pg-card h3{color:#121212}
.sv-packs .pg-card p{color:#3d3d48}
.sv-packs .pg-card:hover{background:#fff}
.sv-packs .pg-card--dark{background:#121212;color:#fff}
.sv-packs .pg-card--dark h3{color:#fff}
.sv-packs .pg-card--dark p{color:#ffffffb3}
.sv-packs .pg-card--dark:hover{background:#000}
.sv-packs .pg-label{color:#3d3d48}
.sv-packs .sv-label-inv{color:#ffffffb3}
.pg-panel .pg-head .pg-h2{color:#121212}
.pg-panel .pg-head{margin-bottom:clamp(28px,3vw,56px)}

/* tema escuro: painel e cards claros mantêm texto escuro */
:root:not([data-v2-theme=light]) .sv-packs .pg-card:not(.pg-card--dark){background:#ffffffcc}

/* hero dos serviços termina nas pílulas: menos respiro antes da primeira seção */
.sv-hero{padding-bottom:clamp(8px,1.5vw,24px)}

/* posts do blog relacionados: vários includes de 1 post viram uma grade só */
.sv-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(12px,1.4vw,24px)}
.sv-posts>.bl-grid{display:contents}
@media (max-width:1000px){.sv-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sv-posts{grid-template-columns:1fr}}