/* ==========================================================
     Paginas de servico (F3 em diante; molde: servicos/esgoto, 2026-09-27)
     Gerado com purgecss sobre lab/_build/servico_bruto.css, que e a soma de lab/esgoto/_estilo5 a _estilo8,
     lab/vaso/_estilo.css, lab/vaso/_movel.css, lab/gordura/_estilo.css, lab/servicos/_estilo.css e
     lab/servicos-index/_estilo.css, contra as paginas de servico, a pagina Servicos e o site.js (sh lab/servicos/_css.sh).
     Prefixos: e5- (sistema de pagina), e6- (ajuste a tela do notebook), e7- (palco curto, bilhetes),
     e8- (chat do servico), v- (pecas do vaso sanitario), g- (caminho da gordura), s- (paginas de 4 fotos), sv- (pagina Servicos). Fundos: bg-a espresso, bg-b fundo-2.
     Ao criar outra pagina de servico, somar o estilo dela ao bruto e regerar contra todas as paginas de servico.
     ========================================================== */
  /* ============ Esgoto, rodada 5 (prefixo e5-) ============ */
  /* fundos: a = espresso, b = fundo-2, t = tijolo (texto espresso), f = foto */
  .bg-a{background:var(--espresso)}
  .bg-b{background:var(--fundo-2)}
  .e5{position:relative}
  .e5-sec{padding:clamp(100px,calc(15vh / var(--zoom)),140px) 0}
  .interna .e5 h2{font-size:clamp(1.8rem,3.5vw,2.7rem);color:var(--claro);max-width:22ch;line-height:1.12}
  .e5 .klead{margin-top:22px;max-width:64ch}
  .e5 .kdet{margin-top:18px;max-width:66ch}
  .e5-lim{max-width:760px}
  .e5-ctx{font-family:var(--titulo);font-weight:600;font-size:.95rem;color:var(--salmao);margin-bottom:14px}

  /* ---------- topo: faixa com canto suave, foto, B da marca, brilho e traco ---------- */
  .e5-hero{padding:96px 0 64px}
  .e5-faixa{position:relative;padding:0 0 22px 22px}
  .e5-faixa-tij{position:absolute;left:0;bottom:0;width:28%;height:48%;border-radius:12px;background:var(--tijolo)}
  .e5-faixa-in{position:relative;border-radius:14px;overflow:hidden;min-height:calc(68vh / var(--zoom));display:flex;align-items:center;box-shadow:0 30px 60px rgba(8,4,2,.5)}
  .e5-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
  .e5-faixa-in::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,16,11,.96) 0%,rgba(29,16,11,.84) 40%,rgba(29,16,11,.18) 100%)}
  .e5-brilho{position:absolute;z-index:1;width:900px;aspect-ratio:1;left:-260px;top:50%;translate:0 -50%;background:radial-gradient(circle,rgba(208,108,66,.22) 0%,rgba(208,108,66,.06) 40%,transparent 68%);pointer-events:none}
  .e5-b{position:absolute;z-index:1;right:5%;top:50%;translate:0 -50%;width:min(380px,34vw);opacity:.14;filter:brightness(1.5);pointer-events:none}
  .e5-faixa-txt{position:relative;z-index:2;max-width:640px;padding:60px clamp(24px,5vw,72px)}
  .interna .e5-hero h1{max-width:13ch}
  .e5-traco{display:block;width:120px;height:4px;border-radius:4px;background:var(--tijolo);margin-top:36px;transform-origin:left}
  .e5-luz{position:absolute;z-index:1;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(246,237,229,.14) 50%,transparent 65%);transform:translateX(-100%);pointer-events:none}
  @media(prefers-reduced-motion:no-preference){
    .e5-traco{transform:scaleX(0);transition:transform 1.2s var(--ease) 1s}
    .seq.in .e5-traco{transform:none}
    .e5-b{opacity:0;transition:opacity 1.6s var(--ease) .5s}
    .seq.in .e5-b{opacity:.14}
    .e5-hero-img{transform:scale(1.07);transition:transform 2.6s var(--ease)}
    .seq.in .e5-hero-img{transform:none}
    .e5-faixa-tij{transform:translate(-20px,20px);opacity:0;transition:transform .9s var(--ease) .6s,opacity .9s var(--ease) .6s}
    .seq.in .e5-faixa-tij{transform:none;opacity:1}
    .seq.in .e5-luz{animation:e5Luz 2.2s var(--ease) .8s both}
    @keyframes e5Luz{to{transform:translateX(100%)}}
  }
  @media(max-width:639px){.e5-hero{padding:84px 0 40px}.e5-faixa{padding:0 0 14px 14px}.e5-faixa-in::after{background:linear-gradient(180deg,rgba(29,16,11,.62),rgba(29,16,11,.95))}.e5-b{width:44vw;top:auto;bottom:18px;translate:none}}

  /* ---------- pecas comuns ---------- */
  .e5-ck{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;border:2px solid var(--tijolo);color:var(--tijolo)}
  .e5-ck .lucide{width:15px;height:15px}
  @media(prefers-reduced-motion:no-preference){
    .e5-ck{transform:scale(.5);opacity:.3;transition:transform .45s cubic-bezier(.34,1.5,.64,1),opacity .35s var(--ease);transition-delay:calc(.6s + var(--c) * 200ms)}
    .e5-ck .lucide path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s var(--ease);transition-delay:calc(.8s + var(--c) * 200ms)}
    .seq.in .e5-ck{transform:none;opacity:1;background:var(--tijolo);color:var(--espresso)}
    .seq.in .e5-ck .lucide path{stroke-dashoffset:0}
  }
  .e5-checks{list-style:none;display:grid;gap:22px;margin-top:36px}
  .e5-checks li{display:flex;gap:16px;align-items:flex-start}
  .e5-checks strong{display:block;font-family:var(--titulo);font-weight:600;font-size:1.12rem;color:var(--claro)}
  .e5-checks li span:not(.e5-ck){display:block;margin-top:4px;color:var(--texto-suave);line-height:1.7}
  .e5-fora{margin-top:56px}
  .e5-fora h3{font-family:var(--titulo);font-weight:600;font-size:1.3rem;color:var(--claro)}
  .e5-fora-g{display:grid;margin-top:12px}
  @media(min-width:900px){.e5-fora-g{grid-template-columns:1fr 1fr;column-gap:48px}}
  .e5-cap .e5-fora-g{grid-template-columns:1fr}
  .e5-fora-g a{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--linha)}
  .e5-fora-g strong{font-family:var(--titulo);font-weight:600;color:var(--claro);transition:color .3s var(--ease)}
  .e5-fora-g span{grid-column:1;color:var(--texto-suave);font-size:.94rem}
  .e5-fora-g .lucide{grid-row:1/3;grid-column:2;width:18px;height:18px;color:var(--salmao);transition:transform .3s var(--ease)}
  .e5-fora-g a:hover strong{color:var(--salmao)}.e5-fora-g a:hover .lucide{transform:translateX(4px)}
  .e5-papel{position:relative;padding:28px;border-radius:14px;background:var(--claro);color:var(--espresso);box-shadow:0 30px 60px rgba(8,4,2,.45)}
  .e5-papel-t{font-family:var(--titulo);font-weight:600;font-size:1.25rem;padding-bottom:14px;border-bottom:1px dashed rgba(29,16,11,.22)}
  .e5-papel strong{color:var(--espresso)!important}
  .e5-papel .e5-checks strong{font-size:1.02rem}
  .e5-papel .e5-checks li span:not(.e5-ck),.e5-papel .e5-esp-l span span{color:#4a2e20}
  .e5-papel .e5-checks{gap:16px;margin-top:18px}
  .e5-pfic{rotate:1.5deg}
  .e5-pfic ul{list-style:none;display:grid;gap:16px;margin-top:18px}
  .e5-pfic li{display:flex;gap:14px;align-items:flex-start}
  .e5-pfic b{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--tijolo);color:var(--espresso);font:700 .9rem var(--titulo)}
  .e5-pfic strong{display:block;font-family:var(--titulo);font-weight:600}
  .e5-pfic span{display:block;margin-top:2px;font-size:.94rem;color:#4a2e20}
  .e5-papel-pe{margin-top:18px;padding-top:14px;border-top:1px dashed rgba(29,16,11,.22);font-family:var(--titulo);font-weight:600;font-size:1.02rem;line-height:1.35;color:var(--espresso)}
  .e5-papel-pe em{font-style:normal;color:#a24e2a}
  @media(prefers-reduced-motion:no-preference){
    .e5-pfic li{opacity:0;transform:translateX(-10px);transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(.6s + var(--c) * 200ms)}
    .seq.in .e5-pfic li,.e5-vis.on .e5-pfic li{opacity:1;transform:none}
  }
  .e5-onde-p{display:flex;gap:16px;align-items:flex-start;margin-top:24px;color:var(--texto-suave);line-height:1.8}
  .e5-onde-p .lucide{width:26px;height:26px;flex:none;margin-top:3px;color:var(--tijolo)}
  .e5-onde-p strong{display:block;color:var(--claro);font-family:var(--titulo);font-weight:600;font-size:1.12rem;margin-bottom:6px}
  .e5-esp-l{list-style:none;display:grid;gap:16px;margin-top:28px}
  .e5-esp-l li{display:flex;gap:14px;align-items:flex-start;line-height:1.6;color:var(--texto-suave)}
  .e5-esp-l strong{color:var(--claro)}
  .e5-faq{margin-top:40px}
  .e5-rels{display:grid;margin-top:32px}
  @media(min-width:1000px){.e5-rels{grid-template-columns:repeat(3,1fr);column-gap:40px}}
  .e5-rel{display:grid;grid-template-columns:auto 1fr auto;gap:2px 14px;align-items:center;padding:20px 0;border-bottom:1px solid var(--linha)}
  .e5-rel>.lucide:first-child{grid-row:1/3;width:24px;height:24px;color:var(--tijolo)}
  .e5-rel strong{font-family:var(--titulo);font-weight:600;color:var(--claro);transition:color .3s var(--ease)}
  .e5-rel span{grid-column:2;font-size:.92rem;color:var(--texto-suave)}
  .e5-rel-s{grid-row:1/3;grid-column:3;width:18px;height:18px;color:var(--salmao);transition:transform .3s var(--ease)}
  .e5-rel:hover strong{color:var(--salmao)}.e5-rel:hover .e5-rel-s{transform:translateX(4px)}
  .ar3.bg-b{background:var(--fundo-2)}

  /* foto que se revela para o lado, com bloco tijolo */

  /* ================= V1 fio condutor ================= */
  @media(min-width:980px){
  }
  .e5-tl{list-style:none;position:relative;display:grid;gap:36px;margin-top:52px}
  @media(min-width:1000px){.e5-tl{grid-template-columns:repeat(4,1fr);gap:32px;padding-top:34px}}
  .e5-tl-fio{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(29,16,11,.2);display:none}
  @media(min-width:1000px){.e5-tl-fio{display:block}}
  .e5-tl-fio i{position:absolute;inset:0;background:var(--espresso);transform-origin:left}
  .e5-tl>li{position:relative}
  .e5-tl-no{display:none}
  @media(min-width:1000px){.e5-tl-no{display:block;position:absolute;top:-42px;left:0;width:16px;height:16px;border-radius:50%;background:var(--tijolo);border:2px solid var(--espresso)}}
  .e5-tl b{font-family:var(--titulo);font-weight:600;font-size:clamp(2rem,3.2vw,2.8rem);line-height:1;color:var(--espresso)}
  .e5-tl h3{margin-top:14px;font-family:var(--titulo);font-weight:600;font-size:1.15rem;line-height:1.25}
  .e5-tl p{margin-top:8px;line-height:1.65}
  .e5-tl ul{list-style:none;display:grid;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(29,16,11,.2)}
  .e5-tl ul li{font-size:.92rem;line-height:1.5;color:rgba(29,16,11,.8)!important}
  @media(prefers-reduced-motion:no-preference){
    .e5-tl-fio i{transform:scaleX(0);transition:transform 1.8s var(--ease) .4s}
    .seq.in .e5-tl-fio i{transform:none}
    .e5-tl-no{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.5,.64,1);transition-delay:calc(.3s + var(--i) * 300ms)}
    .seq.in .e5-tl-no{transform:none;background:var(--espresso)}
  }

  /* ================= V2 palco fixo ================= */
  .e5-guia{padding:40px 0 60px}
  .e5-guia-g{display:grid;gap:40px}
  @media(min-width:980px){.e5-guia-g{grid-template-columns:6fr 5fr;gap:80px}}
  .e5-cap{padding:clamp(70px,12vh,110px) 0;border-bottom:1px solid var(--linha);opacity:.4;transition:opacity .6s var(--ease)}
  .e5-cap:last-child{border-bottom:0}
  .e5-cap.on{opacity:1}
  .e5-cap h2{margin-bottom:4px}
  .e5-cap-m{margin-bottom:26px}
  .e5-cap-m .e5-palco-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
  .e5-palco{display:none}
  @media(min-width:980px){
    .e5-cap-m{display:none}
    .e5-palco{display:block;position:sticky;top:calc(50vh / var(--zoom) - 250px);align-self:start;height:500px;margin-top:80px}
    .e5-vis{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .7s var(--ease),transform .7s var(--ease)}
    .e5-vis.on{opacity:1;transform:none}
    .e5-palco-foto{width:100%;height:100%;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(8,4,2,.5)}
    .e5-palco-foto img{width:100%;height:100%;object-fit:cover}
    .e5-vis .e5-pfic{width:100%;max-width:420px}
  }
  .e5-vis.on .e5-ck{transform:none;opacity:1;background:var(--tijolo);color:var(--espresso)}
  .e5-vis.on .e5-ck .lucide path{stroke-dashoffset:0}
  .e5-mcs{display:grid;gap:14px;margin-top:44px}
  @media(min-width:760px){.e5-mcs{grid-template-columns:1fr 1fr}}
  @media(min-width:1100px){.e5-mcs{grid-template-columns:repeat(4,1fr)}}
  .e5-mc{display:flex;flex-direction:column;gap:12px;padding:28px 24px;border-radius:14px;background:var(--fundo-2);border:1px solid var(--linha);min-height:300px}
  .e5-mc-tag{font-family:var(--titulo);font-weight:600;font-size:.95rem;color:var(--salmao)}
  .e5-mc .lucide{width:30px;height:30px;color:var(--tijolo);margin-top:auto}
  .e5-mc h3{font-family:var(--titulo);font-weight:600;font-size:1.18rem;color:var(--claro);line-height:1.25}
  .e5-mc p{color:var(--texto-suave);line-height:1.65;font-size:.97rem}
  .e5-mc.top{background:var(--tijolo);border-color:var(--tijolo)}
  .e5-mc.top .e5-mc-tag,.e5-mc.top .lucide,.e5-mc.top h3,.e5-mc.top p{color:var(--espresso)}

  /* ================= V3 documento e conversa ================= */
  .e5-pares{display:grid;gap:12px;margin-top:44px}
  .e5-par{display:grid;border-radius:12px;overflow:hidden;border:1px solid var(--linha)}
  @media(min-width:860px){.e5-par{grid-template-columns:5fr 7fr}}
  .e5-par-a,.e5-par-b{display:flex;gap:12px;align-items:center;padding:20px 24px}
  .e5-par-a{background:#140b07;color:rgba(246,237,229,.5)}
  .e5-par-a .lucide{width:18px;height:18px;flex:none;color:var(--tijolo)}
  .e5-par-b{background:var(--fundo-2);color:var(--texto-suave)}
  .e5-par-b .lucide{width:20px;height:20px;flex:none;color:var(--tijolo)}
  .e5-par-b strong{color:var(--claro)}
  .e5-par:first-child .e5-par-b{background:var(--tijolo);color:var(--espresso)}
  .e5-par:first-child .e5-par-b strong,.e5-par:first-child .e5-par-b .lucide{color:var(--espresso)}

  /* ================= V4 faixas ================= */
  .e5-mqs{display:grid;gap:14px;margin-top:44px}
  @media(min-width:760px){.e5-mqs{grid-template-columns:1fr 1fr}}
  .e5-mq{position:relative;overflow:hidden;padding:36px 32px;border-radius:14px;background:var(--fundo-2);border:1px solid var(--linha);min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
  .e5-mq-bg{position:absolute;right:-8px;top:-14px;font-family:var(--titulo);font-weight:600;font-size:clamp(4.5rem,9vw,7.5rem);line-height:1;color:rgba(208,108,66,.12);pointer-events:none}
  .e5-mq .lucide{position:relative;width:30px;height:30px;color:var(--tijolo);margin-bottom:auto}
  .e5-mq h3{position:relative;font-family:var(--titulo);font-weight:600;font-size:1.3rem;color:var(--claro)}
  .e5-mq p{position:relative;color:var(--texto-suave);line-height:1.7}
  @media(prefers-reduced-motion:no-preference){.e5-mq-bg{transform:translateX(30px);opacity:0;transition:transform 1.2s var(--ease),opacity 1.2s var(--ease);transition-delay:calc(.4s + var(--i) * 150ms)}.seq.in .e5-mq-bg{transform:none;opacity:1}}

  @media(prefers-reduced-motion:reduce){.e5-traco,.e5-b,.e5-hero-img,.e5-faixa-tij,.e5-ck,.e5-pfic li,.e5-tl-no,.e5-mq-bg{opacity:1!important;transform:none!important;clip-path:none!important}.e5-b{opacity:.14!important}.e5-ck .lucide path{stroke-dashoffset:0!important}.e5-tl-fio i{transform:none!important}.e5-cap{opacity:1}}

  /* ============ Esgoto, rodada 6: a versao 2 cabendo na tela do notebook (1366x768) ============
     Regra do doc 11, secao 2: cada secao (fora listas longas) cabe na area abaixo do menu, cerca de 700 px.
     Alturas acompanham a altura da tela (vh dividido pelo zoom), com teto em px. */
  .e6-sec{padding:clamp(64px,calc(10vh / var(--zoom)),120px) 0}
  .e5-hero{padding:clamp(72px,calc(11vh / var(--zoom)),96px) 0 clamp(36px,calc(6vh / var(--zoom)),64px)}
  .e5-faixa-in{min-height:min(560px,calc(58vh / var(--zoom)))}
  .e5-faixa-txt{padding:clamp(36px,calc(6vh / var(--zoom)),60px) clamp(24px,5vw,72px)}
  .e5-guia{padding:0}
  .e5-cap{padding:clamp(56px,calc(9vh / var(--zoom)),100px) 0}
  @media(min-width:980px){
    .e5-palco{height:min(460px,calc(60vh / var(--zoom)));top:calc(50vh / var(--zoom) - min(230px,30vh / var(--zoom)) + 30px);margin-top:calc(10vh / var(--zoom))}
  }
  .e6-mcs .e5-mc{min-height:0;padding:24px 22px}
  .e6-mcs .e5-mc .lucide{margin-top:18px}
  .gcta{min-height:min(480px,calc(54vh / var(--zoom)));padding:clamp(72px,calc(10vh / var(--zoom)),120px) 0}
  .ar3-faixa{min-height:min(460px,calc(50vh / var(--zoom)))}

  /* telas baixas (notebook): texto e listas um pouco mais compactos */
  @media(min-width:980px) and (max-height:900px){
    .interna .e5 h2{font-size:clamp(1.7rem,3vw,2.3rem)}
    .interna .e5-hero h1{font-size:clamp(2.2rem,4.4vw,3.3rem)}
    .e5 .klead{margin-top:16px;font-size:1.05rem;line-height:1.65}
    .e5 .kdet{margin-top:12px;line-height:1.7}
    .e5-hero .gresp{font-size:1.02rem;line-height:1.6;margin-top:18px}
    .e5-cap .e5-fora{margin-top:28px}
    .e5-cap .e5-fora-g a{padding:11px 0}
    .e5-onde-p{margin-top:16px;line-height:1.65}
    .e6-mcs,.e6-tl{margin-top:32px}
    .e6-pares{margin-top:30px}
    .e6-pares .e5-par-a,.e6-pares .e5-par-b{padding:14px 20px}
    .e5-faq summary{padding-top:20px;padding-bottom:20px}
  }

  /* versao 2: indice dos capitulos no alto do palco e barra no capitulo ativo */
  .e6-guia-idx{display:none}
  @media(min-width:980px){
    .e6-guia-idx{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;position:absolute;left:0;right:0;top:-44px;z-index:2;font:600 .85rem var(--titulo);color:var(--texto-suave)}
    .e6-guia-idx li{transition:color .4s var(--ease)}
    .e6-guia-idx li.on{color:var(--salmao)}
    .e6-cap-barra{position:relative;padding-left:26px}
    .e6-cap-barra::before{content:"";position:absolute;left:0;top:clamp(56px,calc(9vh / var(--zoom)),100px);bottom:clamp(56px,calc(9vh / var(--zoom)),100px);width:3px;border-radius:3px;background:var(--tijolo);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
    .e6-cap-barra.on::before{transform:none}
  }

  /* versao 3: linha do tempo sobre o fundo escuro */
  .e6-tl .e5-tl-fio{background:var(--linha)}
  .e6-tl .e5-tl-fio i{background:var(--tijolo)}
  .e6-tl .e5-tl-no{background:var(--espresso);border-color:var(--tijolo)}
  .seq.in .e6-tl .e5-tl-no{background:var(--tijolo)}
  .e6-tl b{color:var(--tijolo)}
  .e6-tl li:not(:first-of-type) b{color:var(--salmao)}
  .e6-tl h3{color:var(--claro)}
  .e6-tl p{color:var(--texto-suave)}

  /* versao 4: prevencao deslizando sobre o fundo claro da secao */

  /* ============ Esgoto, rodada 7 (prefixo e7-) ============ */
  /* palco: o papel do "incluido" e curto e cabe sempre na tela; a lista completa esta no texto */
  .e7-checks{margin-top:26px}
  .e7-palco-papel{width:100%;max-width:400px;rotate:-1.5deg}
  .e7-curta{list-style:none;display:grid;gap:14px;margin-top:18px}
  .e7-curta li{display:flex;gap:12px;align-items:center;font-family:var(--titulo);font-weight:600;font-size:1rem;color:var(--espresso)}
  .e7-papel-pe{margin-top:18px;padding-top:12px;border-top:1px dashed rgba(29,16,11,.22);font:600 .85rem var(--titulo);color:#a24e2a;text-align:right}
  .e5-vis.on .e7-curta .e5-ck{transform:none;opacity:1;background:var(--tijolo);color:var(--espresso)}
  .e5-vis.on .e7-curta .e5-ck .lucide path{stroke-dashoffset:0}
  @media(min-width:980px){.e5-vis>*{max-height:100%}}
  @media(min-width:980px) and (max-height:900px){.e5-pfic{padding:22px}.e5-pfic ul{gap:10px;margin-top:12px}.e5-pfic span{font-size:.88rem}.e5-papel-pe{margin-top:12px;padding-top:10px;font-size:.95rem}}

  /* rotulo de canto da casa, em salmao */
  .e7-canto{display:inline-flex;align-items:center;gap:8px;font:600 .85rem var(--titulo);color:var(--salmao)}
  .e7-canto .lucide{width:18px;height:18px}

  /* ---------- imoveis: faixas que abrem ---------- */

  /* ---------- imoveis: abas ---------- */
  @keyframes e7Painel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* ---------- prevencao: mosaico com as cores da marca ---------- */

  /* ---------- prevencao: bilhetes presos com fita ---------- */
  .e7-bls{display:grid;gap:22px;margin-top:48px}
  @media(min-width:760px){.e7-bls{grid-template-columns:1fr 1fr}}
  @media(min-width:1100px){.e7-bls{grid-template-columns:repeat(4,1fr)}}
  .e7-bl{position:relative;padding:34px 24px 26px;border-radius:6px;background:var(--claro);box-shadow:0 24px 48px rgba(8,4,2,.45);rotate:var(--r)}
  .e7-bl:nth-child(2){background:#F2DCC8}
  .e7-bl:nth-child(4){background:#F2DCC8}
  .e7-fita{position:absolute;left:50%;top:-12px;width:88px;height:24px;translate:-50% 0;rotate:-3deg;border-radius:3px;background:rgba(208,108,66,.85)}
  .e7-bl .e7-canto{color:#a24e2a}
  .e7-bl h3{margin-top:12px;font-family:var(--titulo);font-weight:600;font-size:1.12rem;color:var(--espresso);line-height:1.25}
  .e7-bl p{margin-top:8px;color:#4a2e20;font-size:.95rem;line-height:1.65}
  @media(prefers-reduced-motion:no-preference){
    .e7-bl.seq-i{transform:translateY(-40px) rotate(calc(var(--r) * 4));transition:opacity .6s var(--ease),transform .9s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(var(--i) * 160ms)}
    .seq.in .e7-bl.seq-i{transform:none}
  }
  /* lista do capitulo: marca quando o capitulo acende */
  .e5-cap.on .e7-checks .e5-ck{transform:none;opacity:1;background:var(--tijolo);color:var(--espresso)}
  .e5-cap.on .e7-checks .e5-ck .lucide path{stroke-dashoffset:0}

  /* ============ pagina final: chat do servico e ajustes ============ */
  .servico .ar3-faixa img{filter:brightness(.5) saturate(.9)}
  .e8-esp{display:grid;gap:44px;align-items:center}
  @media(min-width:980px){.e8-esp{grid-template-columns:5fr 6fr;gap:80px}}
  .e8-chat{justify-self:center;width:100%;max-width:440px}
  /* o chat do servico usa o visual do chat flutuante (site.css), mas fica na pagina */
  .chat.chat-servico{position:relative;right:auto;bottom:auto;z-index:auto;width:100%;height:min(470px,calc(58vh / var(--zoom)));min-height:400px;max-height:none;
    opacity:1;transform:none;pointer-events:auto;box-shadow:0 30px 60px rgba(8,4,2,.5)}
  .chat-recomeca{margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--linha);background:none;color:var(--texto-suave);cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease)}
  .chat-recomeca:hover{color:var(--claro);border-color:var(--tijolo)}
  .chat-recomeca .lucide{width:16px;height:16px}
  .chat-servico .chat-pe:empty{display:none}
  .chat.chat-servico{display:flex!important}
  /* fundos dos convites (ChatGPT do dono): o assunto fica embaixo, a direita */
  .servico .gcta>img{object-position:72% 78%}
  /* ============ vaso sanitario (F4a): pecas que variam em relacao ao esgoto ============ */
  /* momentos com a palavra grande ao fundo, em uma linha no computador */
  @media(min-width:1100px){.v-mqs{grid-template-columns:repeat(4,1fr)}.v-mqs .e5-mq{min-height:min(300px,calc(38vh / var(--zoom)));padding:30px 26px}}
  .v-mqs .e5-mq:first-child{background:var(--tijolo);border-color:var(--tijolo)}
  .v-mqs .e5-mq:first-child h3,.v-mqs .e5-mq:first-child p,.v-mqs .e5-mq:first-child .lucide{color:var(--espresso)}
  .v-mqs .e5-mq:first-child .e5-mq-bg{color:rgba(29,16,11,.14)}

  /* prevencao B2: foto da lixeira com bloco tijolo e lista aberta */

  /* prevencao B3: vaso ou lixeira, os itens saem do vaso e entram na lixeira */
  .v-sort{display:grid;gap:14px;margin-top:32px}
  @media(min-width:980px){.v-sort{grid-template-columns:8fr 3fr}}
  .v-sort-p{border-radius:14px;padding:26px 28px;border:1px solid var(--linha);background:var(--fundo-2)}
  .v-sort-h{display:flex;align-items:center;gap:12px;font-family:var(--titulo);font-weight:600;font-size:1.2rem;color:var(--claro)}
  .v-sort-h .lucide{width:22px;height:22px;color:var(--tijolo)}
  .v-sort-g{list-style:none;display:grid;gap:10px;margin-top:18px}
  @media(min-width:760px){.v-sort-g{grid-template-columns:1fr 1fr}}
  .v-sort-g li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:14px 16px;border-radius:10px;background:rgba(29,16,11,.55);border:1px solid var(--linha)}
  .v-sort-g li .lucide{width:18px;height:18px;margin-top:2px;color:var(--tijolo)}
  .v-sort-g strong{display:block;font-family:var(--titulo);font-weight:600;color:var(--claro)}
  .v-sort-g span{display:block;margin-top:4px;font-size:.93rem;line-height:1.55;color:var(--texto-suave)}
  .v-sort-vaso{background:var(--tijolo);border-color:var(--tijolo);display:flex;flex-direction:column}
  .v-sort-vaso .v-sort-h,.v-sort-vaso .v-sort-h .lucide{color:var(--espresso)}
  .v-sort-vaso p{margin-top:auto;padding-top:18px;color:var(--espresso);line-height:1.6}
  .v-sort-vaso strong{display:block;font-family:var(--titulo);font-weight:600;font-size:1.35rem;margin-top:18px}
  @media(prefers-reduced-motion:no-preference){
    .v-sort-g li{opacity:0;transform:translateX(60px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(.7s + var(--c) * 140ms)}
    .seq.in .v-sort-g li{opacity:1;transform:none}
  }
  @media(prefers-reduced-motion:reduce){.v-sort-g li{opacity:1!important;transform:none!important}}

  /* topo: "vaso sanitario" e mais longo que "esgoto"; o titulo cabe em duas linhas */
  .servico-vaso .e5-faixa-txt{max-width:720px}
  .servico-vaso.interna .e5-hero h1{max-width:19ch}
  @media(min-width:1024px){.servico-vaso.interna .e5-hero h1{font-size:clamp(2.2rem,3.9vw,3.05rem)}}
  /* palavra ao fundo em quatro colunas: texto no alto, palavra embaixo, sem atropelar a vizinha */
  .v-mqs .e5-mq{justify-content:flex-start}
  .v-mqs .e5-mq .lucide{margin-bottom:14px}
  .v-mqs .e5-mq-bg{top:auto;bottom:-10px;right:-2px;font-size:clamp(2.6rem,4.3vw,4.1rem)}
  .v-sort-vaso p{margin-top:10px;padding-top:0}
  .v-sort-vaso .v-sort-dica{margin-top:auto;padding-top:18px;border-top:1px solid rgba(29,16,11,.25);font-size:.93rem}
  /* ============ Celular (ate 979px): paginas de servico mais leves e sem peca parada no estado inicial ============
     Pedidos do dono em 2026-09-27, na revisao do vaso: os papeis do palco ficavam vazios no celular (so animavam com
     o palco da direita, que nao existe no celular); o texto corrido estava grande demais (17 a 19 px, entrelinha de
     30 px), o topo passava da tela e os quatro momentos ficavam "jogados". Aqui: escala propria de celular, topo que
     cabe numa tela, momentos numa linha vertical que se desenha e animacao curta. */
  @media(max-width:639px){
    /* escala de texto do celular */
    .servico main{font-size:15px;line-height:1.6}
    .interna.servico .e5 h2{font-size:1.5rem;line-height:1.16}
    .servico .e5 .klead{margin-top:12px;font-size:15.5px;line-height:1.6}
    .servico .e5 .kdet{margin-top:10px;font-size:14.5px;line-height:1.65}
    .servico .e5-checks{gap:14px;margin-top:22px}
    .servico .e5-checks strong{font-size:15.5px}
    .servico .e5-checks li span:not(.e5-ck){font-size:14.5px;line-height:1.55}
    .servico .e5-ck{width:24px;height:24px}
    .servico .e5-fora{margin-top:32px}
    .servico .e5-fora h3{font-size:1.1rem}
    .servico .e5-fora-g a{padding:12px 0}
    .servico .e5-fora-g span{font-size:13.5px}
    .servico .e5-onde-p{margin-top:16px;font-size:14.5px;line-height:1.6}
    .servico .e5-onde-p strong{font-size:15.5px}
    .servico .e5-esp-l{gap:12px;margin-top:20px}
    .servico .e5-esp-l li{font-size:14.5px;line-height:1.55}
    .servico .e5-papel{padding:22px}
    .servico .e5-papel-t{font-size:1.1rem}
    .servico .duvidas-in summary{font-size:15px;line-height:1.45}
    .servico .duvidas-in .resp p{font-size:14.5px;line-height:1.6}
    .servico .e5-rel span{font-size:13.5px}
    .servico .v-sort-p{padding:20px 18px}
    .servico .v-sort-g li{padding:12px 14px}
    .servico .v-sort-g span{font-size:13.5px}
    .servico .gcta h2{font-size:1.5rem}
    .servico .gcta p,.servico .ar3-in p{font-size:14.5px;line-height:1.6}
    .servico .ar3-in h2{font-size:1.45rem}
    /* respiro largo entre as secoes (2a revisao do dono: "conteudo encurtado e esmagado") */
    .servico .e6-sec{padding:92px 0}
    .servico .e5-cap{padding:64px 0}
    .servico .e5-cap-m{margin-bottom:24px}
    .servico .gcta{min-height:0;padding:96px 0}
    /* convites: a foto aparece (o assunto fica a direita) e o escurecimento e mais leve que o das internas */
    .servico .gcta>img{object-position:86% 70%}
    .servico .gcta-espresso::after{background:linear-gradient(180deg,rgba(29,16,11,.5) 0%,rgba(29,16,11,.72) 45%,rgba(29,16,11,.9) 100%)}

    /* titulos e aberturas das secoes ao centro; listas e texto corrido seguem a esquerda */
    .servico .e6-sec>.wrap>h2,.servico .e5-sec>.wrap>h2,.servico .e8-esp h2{margin-inline:auto;text-align:center}
    .servico .e6-sec>.wrap>.klead,.servico .e8-esp .klead{margin-inline:auto;text-align:center}
    .servico .gcta-in{text-align:center}
    .servico .gcta-in h2,.servico .gcta-in p{margin-inline:auto}
    .servico .gcta-bts{justify-content:center}
    .servico .ar3-in,.servico .ar3-tipos{text-align:center}
    .servico .ar3-in h2{margin-inline:auto}

    /* topo: preenche a tela ate a barra do WhatsApp (cerca de 91% da altura); a foto ocupa o que sobra acima do texto */
    .e5-hero{padding:72px 0 16px;min-height:calc(100svh - 74px);display:flex;flex-direction:column}
    .e5-hero>.wrap{flex:1;display:flex;flex-direction:column}
    .e5-faixa{flex:1;display:flex;flex-direction:column;padding:0 0 12px 12px}
    .e5-faixa-in{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--espresso)}
    .e5-hero-img{position:relative;inset:auto;display:block;flex:1 1 auto;height:auto;min-height:48vw;object-position:74% 60%}
    .e5-faixa-in::after{display:none}
    .e5-brilho,.e5-ctx,.e5-traco{display:none}
    .e5-b{width:16vw;top:14px;left:14px;right:auto;bottom:auto;translate:none}
    .e5-faixa-txt{margin-top:-72px;padding:72px 18px 24px;text-align:center;background:linear-gradient(180deg,rgba(29,16,11,0) 0,rgba(29,16,11,.85) 44px,var(--espresso) 72px)}
    .interna .e5-hero h1,.servico-vaso.interna .e5-hero h1{margin-inline:auto}
    .e5-hero .gresp{margin-inline:auto}

    /* ---- revisao de estetica (taste skill, 3a revisao do dono: "celular muito jogado") ---- */
    /* topo: moldura reta; o bloco tijolo deslocado entortava o quadro com o texto ao centro */
    .e5-faixa{padding:0}
    .e5-faixa-tij{display:none}
    /* secoes centralizadas: um traco tijolo curto sobre o titulo da o mesmo ponto de apoio a todas */
    .servico .e6-sec>.wrap>h2::before,.servico .e5-sec>.wrap>h2::before,.servico .e8-esp h2::before{content:"";display:block;width:34px;height:3px;border-radius:3px;background:var(--tijolo);margin:0 auto 18px}
    /* capitulos do palco: cada um abre com a imagem inteira e o titulo marcado por uma barra tijolo, como no computador */
    .servico .e5-cap{border-bottom:0}
    .servico .e5-cap+.e5-cap{border-top:1px solid var(--linha)}
    .servico .e5-cap h2{position:relative;padding-left:16px}
    .servico .e5-cap h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.12em;width:3px;border-radius:3px;background:var(--tijolo)}
    .servico .e5-cap-m .e5-palco-foto img{aspect-ratio:16/10;border-radius:14px;box-shadow:0 20px 40px rgba(8,4,2,.45)}
    .servico .e5-cap-m .e5-papel{rotate:0deg;margin-inline:4px}
    /* vaso ou lixeira: sem caixa dentro de caixa; os itens ficam soltos sob o rotulo */
    .servico .v-sort-p:not(.v-sort-vaso){padding:0;border:0;background:none}
    .servico .v-sort-h{justify-content:center}
    .servico .v-sort-g li{background:var(--fundo-2)}
    .servico .v-sort-vaso{text-align:center;padding:26px 22px}
    /* convites e botoes: mesma largura, um embaixo do outro */
    .servico .gcta-bts{flex-direction:column;align-items:center}
    .servico .gcta-bts .btn{width:100%;max-width:300px;justify-content:center}
    /* onde atendemos: os tipos de imovel em duas colunas, sem virar cartaz */
    .servico .ar3-tipos{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-top:22px}
    .servico .ar3-tipos li{font-size:1.12rem}
    /* dois botoes do topo com o mesmo peso visual */
    .e5-hero .qh-bts .btn{min-height:46px}
    .interna .e5-hero h1,.servico-vaso.interna .e5-hero h1{font-size:1.9rem;line-height:1.08;max-width:none}
    .e5-hero .gresp{font-size:14.5px;line-height:1.55;margin-top:12px}
    .e5-hero .qh-bts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
    .e5-hero .qh-bts .btn{justify-content:center;padding:12px 10px;font-size:.84rem;white-space:nowrap}
  }
  @media(max-width:999px){
    /* quatro momentos: linha vertical tijolo que se desenha e acende uma etapa por vez */
    .e6-tl{gap:26px;padding-left:34px}
    .e6-tl .e5-tl-fio{display:block;left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
    .e6-tl .e5-tl-fio i{transform-origin:top}
    .e6-tl li{position:relative}
    .e6-tl .e5-tl-no{display:block;position:absolute;left:-34px;top:4px;width:16px;height:16px;border-radius:50%;border:2px solid var(--tijolo);background:var(--espresso)}
    .seq.in .e6-tl .e5-tl-no{background:var(--tijolo)}
    .e6-tl b{font-size:1.5rem}
    .e6-tl h3{margin-top:6px;font-size:1.02rem}
    .e6-tl p{margin-top:4px;font-size:14.5px;line-height:1.55}
  }
  @media(max-width:999px) and (prefers-reduced-motion:no-preference){
    .e6-tl .e5-tl-fio i{transform:scaleY(0);transition:transform 1.4s var(--ease) .2s}
    .seq.in .e6-tl .e5-tl-fio i{transform:none}
    .e6-tl .e5-tl-no{transform:scale(0);transition:transform .4s cubic-bezier(.34,1.5,.64,1),background .4s var(--ease);transition-delay:calc(.3s + var(--i) * 220ms)}
    .seq.in .e6-tl .e5-tl-no{transform:none}
  }
  @media(max-width:979px){
    /* capitulos: sem o apagado do palco, que so faz sentido com o palco ao lado */
    .e5-cap{opacity:1}
    /* a lista do capitulo marcava so com o capitulo ativo e voltava a esvaziar ao passar dele; no celular fica marcada */
    .e5-cap .e7-checks .e5-ck{transform:none;opacity:1;background:var(--tijolo);color:var(--espresso)}
    .e5-cap .e7-checks .e5-ck .lucide path{stroke-dashoffset:0}
    /* entrada mais curta e leve */
    .seq-i{transform:translateY(12px);transition-duration:.55s;transition-delay:calc(min(var(--i,0),4) * 70ms)}
    .e5-ck{transition-delay:calc(.2s + var(--c) * 90ms)}
    .e5-ck .lucide path{transition-delay:calc(.3s + var(--c) * 90ms)}
    .e5-pfic li{transform:none;transition-delay:calc(.2s + var(--c) * 90ms)}
    .e7-bl.seq-i{transform:translateY(12px)}
    .v-sort-g li{transform:translateY(8px);transition-delay:calc(.15s + var(--c) * 60ms)}
    .e5-hero-img{transform:none}
  }
  /* ============ caixa de gordura (F4a): o caminho da gordura (prefixo g-) ============
     Pia, cano, caixa e esgoto numa linha tijolo; uma gota percorre a linha uma vez e cada etapa acende. Cada etapa diz o que
     acontece e o gesto que evita. No celular a linha fica vertical (doc 11, secao 11). */
  .g-cam{position:relative;list-style:none;display:grid;gap:30px;margin-top:40px}
  @media(min-width:1000px){.g-cam{grid-template-columns:repeat(4,1fr);gap:28px;padding-top:46px}}
  .g-cam-fio{position:absolute;overflow:visible;background:var(--linha)}
  .g-cam-fio>i{position:absolute;inset:0;background:var(--tijolo)}
  .g-cam-gota{position:absolute;inset:0}
  .g-cam-gota::after{content:"";position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--salmao);box-shadow:0 0 14px rgba(229,160,119,.7)}
  @media(min-width:1000px){
    .g-cam-fio{left:18px;right:18px;top:17px;height:2px;overflow:visible}
    .g-cam-fio>i{transform-origin:left}
    .g-cam-gota{overflow:visible}
    .g-cam-gota::after{right:-6px;top:-5px;rotate:-45deg}
  }
  .g-cam li{position:relative}
  .g-cam-no{position:absolute;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--espresso);border:2px solid var(--tijolo);color:var(--tijolo)}
  .g-cam-no .lucide{width:17px;height:17px}
  @media(min-width:1000px){.g-cam-no{left:0;top:-46px}}
  .g-cam h3{font-family:var(--titulo);font-weight:600;font-size:1.3rem;color:var(--claro)}
  .g-cam p{margin-top:6px;color:var(--texto-suave);line-height:1.6}
  .g-cam-gesto{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding-top:12px;border-top:1px dashed var(--linha);color:var(--claro);line-height:1.5}
  .g-cam-gesto .lucide{flex:none;width:18px;height:18px;margin-top:2px;color:var(--tijolo)}
  .g-cam li:first-of-type h3{color:var(--salmao)}
  .seq.in .g-cam-no{background:var(--tijolo);color:var(--espresso)}
  @media(max-width:999px){
    .g-cam{padding-left:48px}
    .g-cam-fio{left:17px;top:18px;bottom:18px;width:2px}
    .g-cam-fio>i{transform-origin:top}
    .g-cam-gota::after{left:-5px;bottom:-6px;rotate:0deg;border-radius:50% 0 50% 50%}
    .g-cam-no{left:-48px;top:-4px}
  }
  @media(prefers-reduced-motion:no-preference){
    .g-cam-no{transform:scale(.4);opacity:.3;transition:transform .45s cubic-bezier(.34,1.5,.64,1),opacity .35s var(--ease),background .4s var(--ease),color .4s var(--ease);transition-delay:calc(.5s + var(--c) * 420ms)}
    .seq.in .g-cam-no{transform:none;opacity:1}
    .g-cam-fio>i{transition:transform 1.9s var(--ease) .35s}
    @media(min-width:1000px){.g-cam-fio>i{transform:scaleX(0)}.g-cam-gota{transform:translateX(-100%);transition:transform 1.9s var(--ease) .35s}}
    @media(max-width:999px){.g-cam-fio>i{transform:scaleY(0)}.g-cam-gota{transform:translateY(-100%);transition:transform 1.9s var(--ease) .35s}}
    .seq.in .g-cam-fio>i,.seq.in .g-cam-gota{transform:none}
  }
  @media(max-width:639px){
    .servico .g-cam h3{font-size:1.1rem}
    .servico .g-cam p,.servico .g-cam-gesto{font-size:14.5px}
  }
  @media(prefers-reduced-motion:reduce){.g-cam-no,.g-cam-fio>i,.g-cam-gota{transform:none!important;opacity:1!important}}
  /* ============ paginas de servico de 4 fotos (prefixo s-, 2026-09-28, doc 16 secao 3.3) ============ */
  /* capitulo 4 sem foto: papel da Brel com dois casos lado a lado (o que e deste servico e o que pede outro) */
  .s-duo{width:100%;max-width:420px;rotate:1deg}
  .s-duo-b{display:flex;gap:14px;align-items:flex-start;padding:16px 0}
  .s-duo-b+.s-duo-b{border-top:1px dashed rgba(29,16,11,.22)}
  .s-duo-b .lucide{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--tijolo);color:var(--espresso)}
  .s-duo-b+.s-duo-b .lucide{background:none;border:2px solid var(--tijolo);color:#a24e2a;padding:4px}
  .s-duo-b strong{display:block;font-family:var(--titulo);font-weight:600;font-size:1.02rem;line-height:1.3}
  .s-duo-b span{display:block;margin-top:4px;font-size:.93rem;line-height:1.5;color:#4a2e20}
  @media(prefers-reduced-motion:no-preference){
    .s-duo-b{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
    .s-duo-b+.s-duo-b{transition-delay:.25s}
    .e5-vis.on .s-duo-b,.seq.in .s-duo-b{opacity:1;transform:none}
  }
  @media(max-width:979px){.e5-cap-m .s-duo{rotate:0deg;max-width:none}}

  /* onde atendemos sem foto: texto ao centro com o B da marca apagado atras e os tipos de imovel com icone */
  .s-at{overflow:hidden;text-align:center}
  .s-at-b{position:absolute;right:-6%;top:50%;translate:0 -50%;width:min(520px,48vw);opacity:.06;filter:brightness(1.6);pointer-events:none}
  .s-at h2,.s-at .klead{margin-inline:auto}
  .s-at-tipos{list-style:none;display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:18px 64px;margin-top:48px}
  .s-at-tipos li{display:grid;justify-items:center;gap:14px;font-family:var(--titulo);font-weight:600;font-size:1.2rem;color:var(--claro)}
  .s-at-tipos span{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;border:1.5px solid var(--linha);background:var(--espresso);color:var(--tijolo);transition:background .4s var(--ease),color .4s var(--ease)}
  .s-at-tipos li:first-child span{background:var(--tijolo);color:var(--espresso);border-color:var(--tijolo)}
  .s-at-tipos .lucide{width:30px;height:30px}
  @media(max-width:639px){
    .s-at-b{width:80vw;right:-30%}
    .s-at-tipos{grid-template-columns:repeat(2,1fr);gap:22px 12px;margin-top:30px}
    .s-at-tipos li{font-size:1rem}
    .s-at-tipos span{width:50px;height:50px}
  }
  @media(prefers-reduced-motion:reduce){.s-duo-b{opacity:1!important;transform:none!important}}
  /* ============ Pagina Servicos (F5, prefixo sv-) ============
     Indice das 11 paginas. Reaproveita o topo das paginas de servico (e5-hero), o trilho da historia de Quem Somos (sd-), o
     palco fixo (e5-guia), a conversa (ui-chat) e a lista que se marca (ui-check). Celular no padrao do doc 11, secao 11. */
  .sv-cab{text-align:center;max-width:760px;margin:0 auto}
  .sv-cab h2{margin-inline:auto}
  .sv-cab .klead{margin-inline:auto}
  .sv-cab h2::before{content:"";display:block;width:34px;height:3px;border-radius:3px;background:var(--tijolo);margin:0 auto 18px}

  /* linhas de servico (icone, nome, frase, seta) */

  /* conversa ao lado do capitulo */
  @media(prefers-reduced-motion:no-preference){
    .e5-vis.on .ui-b{animation:uiMsg .45s var(--ease) forwards;animation-delay:calc(.5s + var(--b) * .8s)}
  }

  /* versao 3: o que esta acontecendo ai (escolha a frase, a pagina responde) */
  @keyframes svEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* versao 4: capitulos com foto (a foto da ui-foto de Quem Somos) */
  .sv-foto{width:100%;max-width:440px;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px rgba(8,4,2,.5);aspect-ratio:4/3}
  .sv-foto img{width:100%;height:100%;object-fit:cover}
  @media(min-width:900px){.sd-dir .sv-foto{margin-left:auto}}

  /* o mesmo jeito em qualquer servico */
  .sv-jeito{display:grid;gap:44px;align-items:center}
  @media(min-width:980px){.sv-jeito{grid-template-columns:6fr 5fr;gap:80px}}
  .sv-jeito .ui-check{margin-top:26px}
  .sv-jeito .ui-check li{font-size:1.02rem;line-height:1.4}
  .sv-jeito .ui-chat{width:100%;max-width:380px;justify-self:center}

  @media(max-width:639px){
    .sv-jeito .ui-check li{font-size:14.5px}
  }
  /* versao 2: titulo de comodo com o visual do titulo de capitulo (h3 abaixo do h2 do bloco) */
  /* topo: o titulo e mais longo que o das paginas de servico; cabe em duas linhas no computador */
  @media(min-width:640px){.pag-servicos .e5-faixa-txt{max-width:800px}.pag-servicos.interna .e5-hero h1{max-width:24ch}}

  /* ============ rodada 2: a historia enquadra os 11 servicos ============ */
  /* versao 5: onze capitulos; as quatro paradas abrem centradas, com a foto larga sobre a linha */

  /* versao 6: dentro de cada parada, uma linha menor com um no por servico */
  .sv-mini{list-style:none;position:relative;display:grid;gap:18px;margin-top:22px;padding-left:30px;max-width:480px;text-align:left}
  @media(min-width:900px){.sd-esq .sv-mini{margin-left:auto}}
  .sv-mini::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--linha)}
  .sv-mini li{position:relative}
  .sv-mini-no{position:absolute;left:-30px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--espresso);border:2px solid var(--tijolo);transition:background .4s var(--ease)}
  .sd-cap.in .sv-mini-no{background:var(--tijolo)}
  .sv-mini a{display:block}
  .sv-mini em{display:block;font-style:italic;font-size:.9rem;color:var(--texto-suave)}
  .sv-mini strong{display:inline-flex;align-items:center;gap:8px;margin-top:2px;font-family:var(--titulo);font-weight:600;font-size:1.08rem;color:var(--claro);transition:color .3s var(--ease)}
  .sv-mini strong .lucide{width:16px;height:16px;color:var(--salmao);transition:transform .3s var(--ease)}
  .sv-mini a:hover strong{color:var(--salmao)}
  .sv-mini a:hover strong .lucide{transform:translateX(4px)}
  @media(prefers-reduced-motion:no-preference){
    .sv-mini-no{transform:scale(.4);opacity:.4;transition:transform .45s cubic-bezier(.34,1.5,.64,1),opacity .35s var(--ease),background .4s var(--ease);transition-delay:calc(.7s + var(--c) * 260ms)}
    .sd-cap.in .sv-mini-no{transform:none;opacity:1}
  }
  @media(max-width:639px){.sv-mini em{font-size:13.5px}.sv-mini strong{font-size:1rem}}
  @media(prefers-reduced-motion:reduce){.sv-mini-no{transform:none!important;opacity:1!important;background:var(--tijolo)!important}}
  /* a parada interrompe a linha, como uma estacao: o texto nunca fica riscado pela linha */
  /* a foto das conexoes de cobre tem fundo creme: tom quente e escuro para caber no tema */
  .sv-escura img{filter:brightness(.6) saturate(1.15) sepia(.3)}