/* Meger Engenharia · primitivos compartilhados (header, menu, botão de CTA, loader, aviso de cookies,
   lightbox, rodapé, página legal). Só tokens. Comportamento em /assets/js/site.js e /assets/js/cookies.js. */

/* =========================================================
   BOTÕES
   CTA = <button type="button" class="btn btn--primary" data-cta data-cta-local="...">Fale com um especialista</button>
   O site.js monta o .btn--fx (preenchimento circular a partir do cursor, texto que rola, seta que troca,
   leve magnetismo; S10, referência Werlang/Arlen). Sem JS, o botão funciona igual (só sem o efeito).
   ========================================================= */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 28px;border-radius:var(--r-pill);font-family:var(--font-body);
  font-weight:var(--fw-body-strong);font-size:1rem;letter-spacing:.02em;line-height:1.1;text-align:left;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow .4s var(--ease)}
.btn--primary{background:var(--c-accent);color:var(--c-dark);
  box-shadow:0 12px 28px -16px color-mix(in srgb,var(--c-accent) 70%,transparent)}
.btn--primary:hover{background:var(--c-accent)}
.btn--ghost{border:1.5px solid currentColor}
.btn:disabled{background:var(--c-n200);color:var(--c-n500);box-shadow:none;cursor:not-allowed}

/* efeito (montado pelo site.js) */
.btn--fx{isolation:isolate;overflow:hidden;padding:0 8px 0 28px;translate:var(--tx,0) var(--ty,0);
  transition:translate .5s cubic-bezier(.2,.8,.2,1),color .35s var(--ease),box-shadow .45s var(--ease),scale .2s var(--ease);will-change:translate}
.btn--fx:active{scale:.97}
.btn--fx .btn__fill{position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,50%);width:var(--d,260px);height:var(--d,260px);
  border-radius:50%;translate:-50% -50%;scale:0;background:var(--c-primary-dark);transition:scale .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.btn--fx:hover,.btn--fx:focus-visible{color:var(--c-white)}
.btn--fx:hover .btn__fill,.btn--fx:focus-visible .btn__fill{scale:1}
.btn--fx .btn__lbl{position:relative;display:block;overflow:hidden;line-height:1.25;padding-block:.05em}
.btn--fx .btn__t{display:block;transition:translate .55s cubic-bezier(.7,0,.2,1)}
.btn--fx .btn__t--2{position:absolute;inset:0;translate:0 110%}
.btn--fx:hover .btn__t,.btn--fx:focus-visible .btn__t{translate:0 -110%}
.btn--fx:hover .btn__t--2,.btn--fx:focus-visible .btn__t--2{translate:0 0}
.btn--fx .btn__ic{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;overflow:hidden;
  background:var(--c-dark);color:var(--c-accent);transition:background .4s var(--ease),color .4s var(--ease)}
.btn--fx:hover .btn__ic,.btn--fx:focus-visible .btn__ic{background:var(--c-accent);color:var(--c-dark)}
.btn--fx .btn__ic svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:translate .5s cubic-bezier(.7,0,.2,1)}
.btn--fx .btn__ic svg+svg{translate:-150% 150%}
.btn--fx:hover .btn__ic svg,.btn--fx:focus-visible .btn__ic svg{translate:150% -150%}
.btn--fx:hover .btn__ic svg+svg,.btn--fx:focus-visible .btn__ic svg+svg{translate:0 0}
@media (max-width:560px){.btn{min-height:54px;padding:0 22px}.btn--fx{padding:0 7px 0 22px}}
@media (prefers-reduced-motion:reduce){.btn--fx,.btn--fx *{transition:none !important}}

/* =========================================================
   LOADER (pente fino 11/2026): logo original + filete grafite > ouro que enche; sai numa cortina que sobe
   e a página entra em sequência (hero split). Teto ~1,2 s e nunca preso:
   - sem JS: a animação CSS tira o loader sozinha em ~1,2 s;
   - com JS (html.ldr-js): o site.js tira assim que a página está pronta (mín. ~0,55 s, máx. 0,9 s) com .is-done;
   - prefers-reduced-motion: sem loader, conteúdo direto.
   Markup (igual em todas as páginas): <div class="ldr" aria-hidden="true"><img ...><span class="ldr__bar"><i></i></span></div>
   ========================================================= */
.ldr{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--c-dark);pointer-events:none;
  clip-path:inset(0 0 0 0);animation:ldr-out .5s var(--ease) 1.15s forwards}
html.ldr-js .ldr{animation:none;transition:clip-path .62s cubic-bezier(.77,0,.18,1)}
.ldr img{width:clamp(150px,16vw,210px);height:auto;opacity:0;translate:0 10px;animation:ldr-in .5s var(--ease) .05s forwards;transition:opacity .3s var(--ease),translate .45s var(--ease)}
.ldr__bar{position:absolute;left:50%;top:calc(50% + clamp(54px,5vw,70px));width:clamp(120px,12vw,160px);height:2px;translate:-50% 0;
  background:color-mix(in srgb,var(--c-white) 12%,transparent);overflow:hidden;border-radius:2px;transition:opacity .25s var(--ease)}
.ldr__bar i{position:absolute;inset:0;background:var(--grad-marca);transform:scaleX(0);transform-origin:left;animation:ldr-bar .8s cubic-bezier(.65,0,.35,1) .1s forwards}
/* saída: o conteúdo sobe e some, a cortina abre de baixo para cima */
html.ldr-js .ldr.is-done{clip-path:inset(0 0 100% 0)}
html.ldr-js .ldr.is-done img{opacity:0;translate:0 -14px}
html.ldr-js .ldr.is-done .ldr__bar{opacity:0}
html.ldr-js .ldr.is-gone{visibility:hidden}
/* volta ao trocar de página do site (cortina desce) */
.ldr.is-leaving,html.ldr-js .ldr.is-leaving{animation:none;visibility:visible;clip-path:inset(0 0 0 0);pointer-events:auto;transition:clip-path .38s cubic-bezier(.77,0,.18,1)}
.ldr.is-leaving img,.ldr.is-leaving .ldr__bar{opacity:0}
@keyframes ldr-in{to{opacity:1;translate:none}}
@keyframes ldr-bar{to{transform:scaleX(1)}}
@keyframes ldr-out{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@media (prefers-reduced-motion:reduce){.ldr{display:none}}

/* =========================================================
   HEADER (fixo; transparente sobre o hero, grafite sólido ao rolar ou em página sem hero)
   ========================================================= */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--header-h);color:var(--c-white);
  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.site-header::before{content:"";position:absolute;inset:0 0 -40px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--c-dark) 72%,transparent),transparent);transition:opacity .35s var(--ease)}
.site-header.is-solid,.no-hero .site-header{background:color-mix(in srgb,var(--c-dark) 96%,transparent);box-shadow:var(--shadow-md)}
.site-header.is-solid::before,.no-hero .site-header::before{opacity:0}
.site-header__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header__brand{flex:0 0 auto;display:block}
.site-header__brand img{height:60px;width:auto}
@media (min-width:901px){:root{--header-h:100px}.site-header__brand img{height:84px}}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px)}
.site-nav a{position:relative;font-size:.95rem;font-weight:var(--fw-body-strong);color:color-mix(in srgb,var(--c-white) 88%,transparent);padding-block:8px}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--c-accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.site-nav a:hover{color:var(--c-white)}
.site-nav a:hover::after{transform:scaleX(1)}
.site-header__cta{flex:0 0 auto}
.menu-toggle{display:none}
.mnav{display:none}

@media (max-width:1080px){
  .site-nav{display:none}
  .menu-toggle{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--r-pill);
    border:1.5px solid color-mix(in srgb,var(--c-white) 40%,transparent)}
  .menu-toggle span{display:block;width:20px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
  .site-header__in{gap:16px}
  .site-header__cta{margin-left:auto}
}
@media (max-width:900px){.site-header__cta{display:none}}
/* menu mobile: tela cheia, opaco, X por cima, CTA dentro (S20) */
.mnav{position:fixed;inset:0;z-index:80;background:var(--c-dark);color:var(--c-white);flex-direction:column;
  padding:calc(var(--header-h) + 16px) var(--px) 32px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.mnav.is-open{opacity:1;visibility:visible}
.mnav__x{position:absolute;top:calc((var(--header-h) - 48px) / 2);right:var(--px);width:48px;height:48px;border-radius:var(--r-pill);
  border:1.5px solid color-mix(in srgb,var(--c-white) 40%,transparent);display:grid;place-items:center;font-size:1.6rem;line-height:1}
.mnav nav{display:flex;flex-direction:column}
.mnav nav a{padding:16px 0;font-family:var(--font-display);font-size:1.4rem;border-bottom:1px solid color-mix(in srgb,var(--c-white) 14%,transparent)}
.mnav .btn{margin-top:32px;align-self:flex-start}
@media (max-width:1080px){.mnav{display:flex}}

/* =========================================================
   AVISO DE COOKIES (informativo; SEMPRE à ESQUERDA: o canto direito é do botão do widget do CRM)
   Markup injetado por /assets/js/cookies.js
   ========================================================= */
.ck{position:fixed;left:20px;bottom:20px;z-index:70;width:min(380px,calc(100vw - 40px));max-height:calc(100dvh - var(--header-h) - 40px);overflow-y:auto;
  background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-n200);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);padding:18px 20px;font-size:.9rem;line-height:1.5}
.ck p{color:var(--c-muted)}
.ck a{color:var(--c-accent-deep);text-decoration:underline;text-underline-offset:2px}
.ck__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ck__actions button{min-height:44px;padding:0 18px;border-radius:var(--r-pill);font-weight:var(--fw-body-strong);font-size:.88rem}
.ck__ok{background:var(--c-primary);color:var(--c-white)}
.ck__more{border:1.5px solid var(--c-n400);color:var(--c-text)}
.ck__fin{margin-top:12px;padding-top:12px;border-top:1px solid var(--c-n200);display:grid;gap:10px}
.ck__fin strong{display:block;color:var(--c-text);font-size:.88rem}
.ck__fin span{display:block;color:var(--c-muted);font-size:.85rem}
/* desktop/tablet: aviso baixo e largo (texto e botões na mesma linha), reserva menos altura no hero */
@media (min-width:701px){.ck{width:min(620px,calc(100vw - 40px));display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:center}
  .ck__actions{margin-top:0;flex-wrap:nowrap}.ck__fin{grid-column:1 / -1;grid-row:2}}
@media (max-width:560px){.ck{left:12px;right:12px;bottom:12px;width:auto;padding:12px 14px;font-size:.84rem}.ck__actions{margin-top:10px}.ck__actions button{min-height:44px;padding:0 16px}}
/* o hero reserva o espaço do aviso enquanto ele está aberto (o CTA do hero nunca fica coberto) */
html.has-cookie .hero__in{padding-bottom:calc(var(--cookie-h,0px) + 32px)}
/* celular pequeno e baixo (ex.: 320x568): enquanto o aviso está aberto, o hero se compacta para o CTA ficar acima do aviso.
   Só vale com o aviso aberto (html.has-cookie); ao clicar em "Entendi" o hero volta ao tamanho normal. */
@media (max-width:400px) and (max-height:600px){
  html.has-cookie{--header-h:68px}
  html.has-cookie .ck{padding:10px 12px;font-size:.8rem;line-height:1.4}
  html.has-cookie .ck__actions{margin-top:8px;flex-wrap:nowrap}
  html.has-cookie .ck__actions button{padding:0 12px;font-size:.82rem}
  html.has-cookie #inicio .hero__in{padding-top:calc(var(--header-h) + 6px)}
  html.has-cookie #inicio .h1{font-size:1.6rem;line-height:1.12}
  html.has-cookie #inicio .hero__lead{margin-top:10px;font-size:.94rem;line-height:1.4}
  html.has-cookie #inicio .hero__cta{margin-top:14px}
}

/* =========================================================
   LIGHTBOX (galeria por obra; montado pelo site.js)
   ========================================================= */
.lb{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--c-primary-dark) 94%,transparent);padding:clamp(16px,4vw,48px)}
.lb.is-open{display:flex}
.lb__stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(1100px,100%)}
.lb__stage img{max-width:100%;max-height:calc(100dvh - 140px);width:auto;height:auto;border-radius:var(--r-sm);object-fit:contain}
.lb__cap{color:var(--c-on-dark-muted);font-size:.9rem;text-align:center}
.lb__x,.lb__nav{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--c-white) 10%,transparent);color:var(--c-white);font-size:1.8rem;line-height:1;transition:background .25s var(--ease)}
.lb__x:hover,.lb__nav:hover{background:var(--c-accent);color:var(--c-dark)}
.lb__x{top:16px;right:16px}
.lb__prev{left:16px;top:50%;translate:0 -50%}
.lb__next{right:16px;top:50%;translate:0 -50%}
@media (max-width:640px){.lb__prev,.lb__next{top:auto;bottom:16px;translate:none}.lb__prev{left:calc(50% - 64px)}.lb__next{right:calc(50% - 64px)}.lb__stage img{max-height:calc(100dvh - 180px)}}

/* =========================================================
   RODAPÉ (escuro, logo grande, navegação, e-mail, política; sem CTA, sem WhatsApp em LP)
   ========================================================= */
.site-footer{position:relative;background:var(--c-dark);color:var(--c-white);padding-block:clamp(56px,7vw,88px) 28px}
.site-footer::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-marca)}
.site-footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.site-footer__brand img{width:clamp(220px,22vw,280px);height:auto}
.site-footer h2{font-family:var(--font-body);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--c-on-dark-muted);font-weight:var(--fw-body-strong);margin-bottom:var(--space-4)}
.site-footer ul{list-style:none;padding:0;display:grid;gap:10px}
.site-footer a,.site-footer button{color:color-mix(in srgb,var(--c-white) 86%,transparent);transition:color .2s var(--ease)}
.site-footer a:hover,.site-footer button:hover{color:var(--c-accent)}
.site-footer__contato li{color:var(--c-on-dark-muted)}
.site-footer__base{margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:1px solid color-mix(in srgb,var(--c-white) 14%,transparent);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:var(--fs-small);color:var(--c-on-dark-muted)}
.site-footer__base nav{display:flex;flex-wrap:wrap;gap:12px 24px}
@media (max-width:900px){.site-footer__grid{grid-template-columns:1fr 1fr}.site-footer__brand{grid-column:1 / -1}}
@media (max-width:560px){.site-footer__grid{grid-template-columns:1fr}}

/* =========================================================
   PÁGINA LEGAL / 404 (sem hero: body.no-hero)
   ========================================================= */
.page-top{padding-top:calc(var(--header-h) + var(--section-y) * .6)}
.legal{max-width:760px}
.legal h1{font-size:var(--fs-h2);margin-bottom:var(--space-5)}
.legal h2{font-size:var(--fs-h3);font-weight:var(--fw-display-strong);margin:var(--space-7) 0 var(--space-3)}
.legal p,.legal li{color:var(--c-muted);margin-top:var(--space-3)}
.legal ul{padding-left:1.2em}
.legal a{color:var(--c-accent-deep);text-decoration:underline;text-underline-offset:2px}

/* =========================================================
   VISOR (marcas de canto em ouro, assinatura das fotos desde o pente fino 11/2026)
   <span class="visor" aria-hidden="true"></span> dentro de um contêiner com position:relative.
   Só background (8 traços), sem markup extra; cor/tamanho por --vc, --vl, --vw.
   ========================================================= */
.visor{position:absolute;inset:var(--vi,clamp(12px,1.6vw,20px));z-index:2;pointer-events:none;
  --vc:var(--c-accent);--vl:clamp(16px,1.7vw,24px);--vw:2px;
  background:
    linear-gradient(var(--vc),var(--vc)) 0 0/var(--vl) var(--vw),linear-gradient(var(--vc),var(--vc)) 0 0/var(--vw) var(--vl),
    linear-gradient(var(--vc),var(--vc)) 100% 0/var(--vl) var(--vw),linear-gradient(var(--vc),var(--vc)) 100% 0/var(--vw) var(--vl),
    linear-gradient(var(--vc),var(--vc)) 0 100%/var(--vl) var(--vw),linear-gradient(var(--vc),var(--vc)) 0 100%/var(--vw) var(--vl),
    linear-gradient(var(--vc),var(--vc)) 100% 100%/var(--vl) var(--vw),linear-gradient(var(--vc),var(--vc)) 100% 100%/var(--vw) var(--vl);
  background-repeat:no-repeat}

/* =========================================================
   HERO SPLIT (.hsp) · pente fino 11/2026, pedido do operador (vibe do hero da Arlen/projetos complementares,
   no contexto da Meger). Substitui o hero full-bleed nas páginas que o adotam.
   Desktop (>1024): painel grafite à esquerda (cumeeira em filete, H1, apoio, CTA, índice numerado das seções)
   e a foto em altura cheia à direita, com visor em ouro e legenda honesta. Tablet/celular: foto em cima,
   painel embaixo; a altura da foto se ajusta para o CTA ficar na 1ª tela acima do aviso de cookies
   (--hsp-need medido pelo site.js + --cookie-h do cookies.js). Markup no README-base.
   ========================================================= */
.hsp{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:stretch;min-height:100vh;min-height:100svh;
  padding-top:var(--header-h);background:var(--c-dark);color:var(--c-white)}
.hsp__media{position:absolute;top:var(--header-h);right:0;bottom:0;width:50vw;z-index:0}
.hsp__frame{position:absolute;inset:0;overflow:hidden;background:var(--c-primary-dark)}
.hsp__frame picture{display:block;width:100%;height:100%}
.hsp__img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--hsp-pos,50% 50%);transform-origin:50% 62%}
.hsp__frame::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--c-dark) 68%,transparent))}
.hsp__cap{position:absolute;z-index:2;left:clamp(26px,3vw,44px);right:72px;bottom:clamp(28px,3.2vw,46px);margin:0;display:flex;align-items:center;gap:12px;
  font-size:.75rem;line-height:1.4;font-weight:var(--fw-body-strong);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--c-white) 88%,transparent)}
.hsp__cap::before{content:"";flex:0 0 auto;width:30px;height:2px;border-radius:2px;background:var(--grad-marca)}
.hsp__grid{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,5.2vh,64px);
  padding-block:clamp(24px,5vh,72px) clamp(28px,5vh,56px)}
.hsp__txt,.hsp__idx{width:100%;max-width:calc(50vw - max(var(--px),(100vw - var(--container)) / 2) - clamp(40px,5vw,84px))}
.hsp__cume{display:block;width:78px;height:28px;margin-bottom:clamp(16px,2.8vh,28px);overflow:visible}
.hsp__cume path{fill:none;stroke:url(#hspCume);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hsp__cume .s1{stop-color:var(--c-n400)}.hsp__cume .s2{stop-color:var(--c-accent)}.hsp__cume .s3{stop-color:var(--c-copper)}
.hsp .h1{font-size:min(clamp(2.25rem,1rem + 2.75vw,3.35rem),7.4vh);line-height:1.08;letter-spacing:-.022em;color:var(--c-white)}
.hsp__lead{margin-top:clamp(16px,2.6vh,26px);max-width:46ch;font-size:var(--fs-lead);line-height:1.55;color:var(--c-on-dark-muted)}
.hsp__cta{margin-top:clamp(22px,3.8vh,40px)}
/* índice numerado das seções reais (links âncora; o site.js faz deslizar) */
.hsp__idx{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(16px,2vw,28px);
  border-top:1px solid color-mix(in srgb,var(--c-white) 16%,transparent)}
.hsp__idx::before{content:"";position:absolute;left:0;top:-1px;width:72px;height:2px;border-radius:2px;background:var(--grad-marca);transform-origin:left}
.hsp__idx a{position:relative;display:flex;align-items:baseline;gap:12px;min-height:48px;padding:14px 8px 14px 0;
  border-bottom:1px solid color-mix(in srgb,var(--c-white) 12%,transparent);
  font-family:var(--font-display);font-weight:var(--fw-display);font-size:.9375rem;line-height:1.3;color:var(--c-on-dark-muted);transition:color var(--dur-fast) var(--ease)}
.hsp__idx a::after{content:"";position:absolute;left:0;right:8px;bottom:-1px;height:2px;background:var(--c-accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hsp__idx a:hover,.hsp__idx a:focus-visible{color:var(--c-white)}
.hsp__idx a:hover::after,.hsp__idx a:focus-visible::after{transform:scaleX(1)}
.hsp__n{flex:0 0 auto;font-family:var(--font-body);font-size:.75rem;font-weight:var(--fw-body-strong);letter-spacing:.04em;color:var(--c-accent);font-variant-numeric:tabular-nums}
/* H1 por linhas (o site.js embrulha as palavras; sem JS fica o texto puro) */
.hsp-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.hsp-wi{display:inline-block}
@media (max-width:1024px){
  .hsp{display:block;min-height:0;padding-top:0}
  .hsp__media{position:relative;top:auto;width:100%;height:clamp(var(--hsp-min,190px),calc(100vh - var(--hsp-need,440px) - var(--cookie-h,0px) - 12px),62vh);
    height:clamp(var(--hsp-min,190px),calc(100svh - var(--hsp-need,440px) - var(--cookie-h,0px) - 12px),62svh)}
  .hsp__frame::before{content:"";position:absolute;inset:0 0 auto 0;height:calc(var(--header-h) + 40px);z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,color-mix(in srgb,var(--c-dark) 55%,transparent),transparent)}
  .hsp__grid{gap:clamp(28px,5vw,40px);padding-block:clamp(24px,5vw,40px) clamp(40px,8vw,64px)}
  .hsp__txt,.hsp__idx{max-width:640px}
  .hsp .h1{font-size:clamp(1.9rem,1.2rem + 3vw,2.75rem)}
  .hsp__cap{left:var(--px);bottom:18px;right:60px}
  .hsp .visor{top:calc(var(--header-h) + 2px)}
}
@media (max-width:700px){.hsp__idx{display:none}}
/* celular baixo com o aviso de cookies aberto: o painel se compacta e a foto encolhe para o CTA ficar acima do aviso
   (só enquanto o aviso está aberto; ao clicar em "Entendi" volta ao normal e o site.js remede) */
@media (max-width:420px) and (max-height:700px){
  html.has-cookie #inicio.hsp{--hsp-min:96px}
  html.has-cookie #inicio.hsp .hsp__cume{display:none}
  html.has-cookie #inicio.hsp .hsp__grid{padding-top:16px}
  html.has-cookie #inicio.hsp .h1{font-size:1.5rem;line-height:1.12}
  html.has-cookie #inicio.hsp .hsp__lead{margin-top:10px;font-size:.9rem;line-height:1.4}
  html.has-cookie #inicio.hsp .hsp__cta{margin-top:14px}
}
@media (max-width:560px){
  .hsp .h1{font-size:clamp(1.75rem,7.9vw,2.15rem);line-height:1.1}
  .hsp__cume{width:60px;height:22px;margin-bottom:14px}
  .hsp__lead{margin-top:14px;font-size:1rem;line-height:1.5}
  .hsp__cta{margin-top:20px}
  .hsp__cap{font-size:.6875rem;letter-spacing:.08em;right:44px;gap:10px}
  .hsp__cap::before{width:18px}
  .hsp .visor{--vi:12px;--vl:16px}
}
/* entrada da página (html.hsp-wait = o site.js segura até o loader abrir; sem JS ou com RM, tudo já aparece) */
html.js .hsp__cume path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .1s}
html.js .hsp-wi{transition:translate .95s cubic-bezier(.2,.8,.2,1) calc(.18s + var(--l,0) * .09s)}
html.js .hsp__lead,html.js .hsp__cta{transition:opacity .8s var(--ease),translate .9s cubic-bezier(.2,.8,.2,1)}
html.js .hsp__lead{transition-delay:.52s}html.js .hsp__cta{transition-delay:.66s}
html.js .hsp__frame{transition:clip-path 1.25s cubic-bezier(.77,0,.18,1) .12s}
html.js .hsp__img{transition:scale 2.2s cubic-bezier(.16,1,.3,1) .12s}
html.js .hsp .visor{transition:opacity .5s var(--ease) .95s,inset .8s cubic-bezier(.2,.8,.2,1) .95s}
html.js .hsp__cap{transition:opacity .6s var(--ease) 1.1s,translate .8s cubic-bezier(.2,.8,.2,1) 1.1s}
html.js .hsp__idx::before{transition:transform 1s cubic-bezier(.65,0,.35,1) .75s}
html.js .hsp__idx a{transition:opacity .6s var(--ease),translate .7s cubic-bezier(.2,.8,.2,1),color var(--dur-fast) var(--ease)}
html.js .hsp__idx a:nth-child(1){transition-delay:.82s,.82s,0s}html.js .hsp__idx a:nth-child(2){transition-delay:.89s,.89s,0s}
html.js .hsp__idx a:nth-child(3){transition-delay:.96s,.96s,0s}html.js .hsp__idx a:nth-child(4){transition-delay:1.03s,1.03s,0s}
html.js .hsp__idx a:nth-child(5){transition-delay:1.1s,1.1s,0s}html.js .hsp__idx a:nth-child(6){transition-delay:1.17s,1.17s,0s}
html.hsp-wait .hsp__cume path{stroke-dashoffset:1}
html.hsp-wait .hsp-wi{translate:0 108%}
html.hsp-wait .hsp__lead,html.hsp-wait .hsp__cta{opacity:0;translate:0 18px}
html.hsp-wait .hsp__frame{clip-path:inset(0 0 0 100%)}
html.hsp-wait .hsp__img{scale:1.14}
html.hsp-wait .hsp .visor{opacity:0;inset:calc(var(--vi,clamp(12px,1.6vw,20px)) + 14px)}
html.hsp-wait .hsp__cap{opacity:0;translate:-16px 0}
html.hsp-wait .hsp__idx::before{transform:scaleX(0)}
html.hsp-wait .hsp__idx a{opacity:0;translate:0 12px}
html.hsp-wait .hsp [data-underline]{background-size:0 3px}
.hsp [data-underline]{transition-delay:1s}
@media (max-width:1024px){html.hsp-wait .hsp__frame{clip-path:inset(0 0 100% 0)}}

/* =========================================================
   PORTFÓLIO "RESULTADO" (.rs) · pente fino 11/2026: obras concluídas em composição editorial assimétrica.
   Cada obra = foto destaque grande + 1 ou 2 fotos menores + legenda fina (tipo · local · status), título curto
   e "Ver galeria · N fotos". Tudo abre o lightbox da obra; cada foto abre na própria posição (data-gallery-open).
   Variantes: .rs__obra (destaque à esquerda), .rs__obra--inv (destaque à direita), .rs__obra--pan (panorâmica).
   Fotos em /assets/img/resultado/ (manifesto.json). Markup no README-base.
   ========================================================= */
.rs{display:grid;gap:clamp(64px,9vw,128px);margin-top:clamp(36px,5vw,64px)}
.rs__obra{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);align-items:stretch}
.rs__obra--inv{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.rs__obra--inv .rs__f--main{order:2}
.rs__obra--pan{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.rs__f{position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--r-sm);background:var(--c-primary-dark);cursor:zoom-in}
.rs__f img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:scale 1.1s cubic-bezier(.2,.8,.2,1)}
.rs__f--main{aspect-ratio:4/5}
.rs__obra--pan .rs__f--main{aspect-ratio:16/10}
.rs__f .visor{opacity:0;--vi:22px;transition:opacity .45s var(--ease),inset .6s cubic-bezier(.2,.8,.2,1)}
.rs__f:hover img,.rs__f:focus-visible img{scale:1.04}
.rs__f:hover .visor,.rs__f:focus-visible .visor{opacity:1;--vi:14px}
.rs__f:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
.rs__side{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,3vw,40px);min-width:0}
.rs__info{padding-top:clamp(16px,1.6vw,22px);border-top:1px solid var(--line)}
.rs__meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;margin:0;font-size:.75rem;line-height:1.4;font-weight:var(--fw-body-strong);
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-muted)}
.rs__meta span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 .9em;border-radius:50%;background:currentColor;opacity:.55;vertical-align:middle}
.rs__meta .rs__st{margin-left:auto;padding-left:12px;color:var(--tx-hl);white-space:nowrap}
.rs__meta .rs__st::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 0 0;border-radius:50%;background:currentColor;opacity:1;vertical-align:middle}
.rs__t{margin-top:clamp(12px,1.4vw,18px);font-size:clamp(1.75rem,1.15rem + 1.7vw,2.6rem);font-weight:var(--fw-display);line-height:1.06;letter-spacing:-.022em}
.rs__ver{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,2vw,26px);min-height:44px;font-weight:var(--fw-body-strong);font-size:.95rem;color:inherit}
.rs__ver span{position:relative;padding-block:2px}
.rs__ver span::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;opacity:.35;transform-origin:left;transition:opacity .3s var(--ease)}
.rs__ver:hover span::after{opacity:1}
.rs__ver svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--tx-hl);stroke-width:1.8;transition:translate .35s var(--ease)}
.rs__ver:hover svg{translate:3px -3px}
.rs__mini{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1.4vw,20px)}
.rs__mini .rs__f{aspect-ratio:3/4}
.rs__mini--1{grid-template-columns:minmax(0,1fr)}
.rs__mini--1 .rs__f{aspect-ratio:16/10}
@media (max-width:900px){
  .rs__obra,.rs__obra--inv,.rs__obra--pan{grid-template-columns:minmax(0,1fr);gap:20px}
  .rs__obra--inv .rs__f--main{order:0}
  .rs__f--main{aspect-ratio:4/5;max-height:78vh}
  .rs__obra--pan .rs__f--main{aspect-ratio:4/3}
  .rs__side{gap:20px}
}
@media (max-width:560px){.rs__f--main{aspect-ratio:4/5}.rs__mini{gap:10px}.rs__meta{font-size:.6875rem;letter-spacing:.08em}.rs__meta span+span::before{margin:0 .6em}}
@media (prefers-reduced-motion:reduce){.rs__f img,.rs__f .visor{transition:none}}