/* components.css · base-kit BuildV reskinado (Roncati) · visual dos PRIMITIVOS. Só tokens.
   Header, rodapé, banner de cookies e WhatsApp flutuante ficam em chrome.css. */

/* Loader */
[data-loader]{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--c-bg);
  transition:opacity .5s ease,visibility .5s}
[data-loader].is-done{opacity:0;visibility:hidden}

/* Lightbox (galeria por categoria/projeto) */
.lb{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;gap:12px;
  background:color-mix(in srgb,var(--c-dark) 94%,transparent);padding:24px;color:var(--c-white)}
.lb.is-open{display:flex}
.lb__stage{max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:12px;align-items:center;margin:0}
.lb__stage img{max-height:80vh;width:auto;max-width:100%;border-radius:var(--r-sm)}
.lb__count{color:var(--c-on-dark-muted);font-size:var(--fs-small);font-family:var(--font-display);letter-spacing:.08em}
.lb__x{position:absolute;top:14px;right:16px;width:48px;height:48px;display:grid;place-items:center;color:var(--c-white);font-size:2rem;line-height:1;border-radius:var(--r-pill)}
.lb__nav{color:var(--c-white);font-size:2.4rem;line-height:1;width:52px;height:52px;display:grid;place-items:center;opacity:.85;border-radius:var(--r-pill)}
.lb__nav:hover,.lb__x:hover{opacity:1;background:color-mix(in srgb,var(--c-white) 12%,transparent)}
.lb__x:focus-visible,.lb__nav:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
@media (max-width:640px){.lb__nav{position:absolute;bottom:18px}.lb__prev{left:calc(50% - 64px)}.lb__next{right:calc(50% - 64px)}}

/* Scroll horizontal pinado: fallback nativo fora do desktop com ponteiro fino */
[data-hscroll][data-hscroll-native] .track{overflow-x:auto;scroll-snap-type:x mandatory;flex-wrap:nowrap}
[data-hscroll][data-hscroll-native] .track > *{scroll-snap-align:start}

/* trava de scroll com lightbox/menu aberto (o html tem overflow-x:clip, então o body sozinho não basta) */
html.is-locked{overflow:hidden}

/* =====================================================================
   PORTFÓLIO EM ABAS + MOSAICO (compartilhado: MCMV #mc-obras e residencial #obras-a)
   Abre em Projetos; Em obra mostra 5 fotos e o último quadro leva às outras na galeria.
   ===================================================================== */
.mco--abas{background:var(--c-bg)}
.mco--abas .mco__top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5) var(--sp-6);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.mco--abas .mco__tabs{position:relative;display:inline-flex;padding:5px;background:var(--c-surface);border:1px solid var(--c-n200);border-radius:var(--r-pill)}
.mco--abas .mco__ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:var(--r-pill);background:var(--c-dark);
  transition:transform .55s var(--ease-out),width .55s var(--ease-out)}
.mco--abas .mco__tab{position:relative;z-index:1;min-height:46px;padding:0 22px;border-radius:var(--r-pill);font-family:var(--font-display);
  font-weight:600;font-size:.95rem;color:var(--c-text);transition:color .4s var(--ease-out)}
.mco--abas .mco__tab em{font-style:normal;margin-left:8px;color:var(--c-muted);transition:color .4s var(--ease-out)}
.mco--abas .mco__tab[aria-selected="true"]{color:var(--c-white)}
.mco--abas .mco__tab[aria-selected="true"] em{color:var(--c-primary)}
.mco--abas .mco__tab:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
html:not(.js) .mco--abas .mco__tab[aria-selected="true"]{background:var(--c-dark)}
.mco--abas .mco__bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);height:clamp(440px,46vw,620px)}
.mco--abas .mco__bento[hidden]{display:none}
.mco--abas .mco__card{position:relative;display:block;min-width:0;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  color:var(--c-white);text-decoration:none;background:var(--c-n200)}
.mco--abas .mco__card--1{grid-column:1 / 7;grid-row:1 / 3}
.mco--abas .mco__card--2{grid-column:7 / 10;grid-row:1}
.mco--abas .mco__card--3{grid-column:10 / 13;grid-row:1}
.mco--abas .mco__card--4{grid-column:7 / 10;grid-row:2}
.mco--abas .mco__card--5{grid-column:10 / 13;grid-row:2}
.mco--abas #mco-proj .mco__card--2{grid-column:7 / 13}
.mco--abas #mco-proj .mco__card--3{grid-column:7 / 10;grid-row:2}
.mco--abas #mco-proj .mco__card--4{grid-column:10 / 13;grid-row:2}
.mco--abas .mco__ph{position:absolute;inset:0;display:block}
.mco--abas .mco__ph img{width:100%;height:100%;object-fit:cover}
.mco--abas .mco__card:hover .mco__ph img{transform:scale(1.06)}
.mco--abas .mco__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:56px clamp(16px,1.8vw,24px) clamp(14px,1.6vw,20px);
  font-family:var(--font-display);font-weight:600;font-size:clamp(.95rem,.85rem + .3vw,1.1rem);line-height:1.3;
  background:linear-gradient(0deg,color-mix(in srgb,var(--c-dark) 82%,transparent),transparent);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.mco--abas .mco__cap::after{content:"\2192";flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-pill);
  background:var(--c-primary);color:var(--c-dark);font-size:1rem;opacity:0;transform:translateX(-8px) scale(.8);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.mco--abas .mco__card:hover .mco__cap::after,.mco--abas .mco__card:focus-visible .mco__cap::after{opacity:1;transform:none}
.mco--abas .mco__card--1 .mco__cap{font-size:clamp(1.1rem,.95rem + .6vw,1.45rem);padding-bottom:clamp(18px,2vw,26px)}
.mco--abas .mco__more{position:absolute;inset:0;z-index:2;display:grid;place-content:center;gap:4px;text-align:center;
  background:color-mix(in srgb,var(--c-dark) 66%,transparent);color:var(--c-white);font-family:var(--font-display);font-weight:600;
  transition:background-color .45s var(--ease-out)}
.mco--abas .mco__more b{font-size:clamp(2rem,1.4rem + 1.8vw,3rem);font-weight:700;line-height:1;color:var(--c-primary)}
.mco--abas .mco__card:hover .mco__more{background:color-mix(in srgb,var(--c-dark) 52%,transparent)}
.mco--abas .mco__card:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px}
/* troca de aba: os quadros entram em cascata */
.mco--abas .mco__bento.is-anim .mco__card{animation:mcoIn .8s var(--ease-out) both;animation-delay:calc(var(--k,0) * 70ms)}
.mco--abas .mco__bento.is-wait .mco__card{opacity:0}
@keyframes mcoIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:760px){
  /* celular: trilho com encaixe, um quadro e meio na tela */
  .mco--abas .mco__bento{display:flex;height:auto;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--px));padding-inline:var(--px);scroll-padding-inline:var(--px);scrollbar-width:none}
  .mco--abas .mco__bento::-webkit-scrollbar{display:none}
  .mco--abas .mco__bento[hidden]{display:none}
  .mco--abas .mco__card{flex:0 0 78%;aspect-ratio:4/5;scroll-snap-align:start}
  .mco--abas .mco__cap::after{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.mco--abas .mco__bento.is-anim .mco__card{animation:none}.mco--abas .mco__ind{transition:none}}

.mco--abas .mco__ph img{transition:transform 1.1s var(--ease-out)}
/* 3 abas de 4 fotos (residencial): 1 grande + 3 */
.mco--abas .mco__bento--4 .mco__card--2{grid-column:7 / 13}
.mco--abas .mco__bento--4 .mco__card--3{grid-column:7 / 10;grid-row:2}
.mco--abas .mco__bento--4 .mco__card--4{grid-column:10 / 13;grid-row:2}
@media (max-width:760px){.mco--abas .mco__tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}.mco--abas .mco__tab{padding:0 16px;white-space:nowrap}}

/* =====================================================================
   QUEM RESPONDE MINIMALISTA (compartilhado: MCMV #mc-engenheiro e residencial #responsavel-a)
   Canteiro (piscina em obra) e acabamento (banheiro) em velocidades diferentes; selo que gira;
   números numa linha só, sem caixa. Fotos sobem por clip-path ao entrar.
   ===================================================================== */
.mce--min{background:var(--c-surface);overflow:hidden}
.mce--min .mce__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,112px);align-items:center}
.mce--min .mce__stmt{font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem);line-height:1.08;max-width:14ch}
.mce--min .mce__body{margin-top:var(--sp-5);max-width:48ch}
/* números em linhas finas: rótulo à esquerda, dado à direita */
.mce--min .mce__strip{margin:var(--sp-7) 0 0;padding:0;max-width:520px;border-top:1px solid var(--c-n200)}
.mce--min .mce__c{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--c-n200)}
.mce--min .mce__c dt{font-size:var(--fs-small);color:var(--c-muted)}
.mce--min .mce__c dd{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,.95rem + .6vw,1.45rem);line-height:1.15;color:var(--c-text)}
.mce--min .mce__c.is-key dd{font-weight:700;font-size:clamp(1.15rem,.95rem + .6vw,1.45rem);color:var(--c-primary-dark)}
.mce--min .mc-cta{margin-top:var(--sp-6)}
/* colagem */
.mce--min .mce__art{position:relative;height:clamp(460px,46vw,640px)}
.mce--min .mce__a,.mce--min .mce__b{position:absolute;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--c-n200)}
.mce--min .mce__a{right:0;top:0;width:70%;height:86%}
.mce--min .mce__b{left:0;bottom:0;width:46%;height:50%;z-index:1;outline:10px solid var(--c-surface);box-shadow:var(--shadow-lg)}
.mce--min .mce__art img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;will-change:transform}
.mce--min .mce__art figure[data-reveal]{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease-out)}
.mce--min .mce__art figure[data-reveal][data-delay="2"]{transition-delay:.35s}
.mce--min .mce__art figure.is-in{clip-path:inset(0 0 0 0)}
html:not(.js) .mce--min .mce__art figure{clip-path:none}
.mce--min .mce__seal{position:absolute;left:4%;top:6%;width:clamp(96px,9vw,128px);height:auto;overflow:visible;animation:mceSpin 22s linear infinite}
.mce--min .mce__seal text{font-family:var(--font-display);font-weight:600;font-size:9.6px;letter-spacing:.12em;fill:var(--c-text)}
.mce--min .mce__seal circle{fill:var(--c-accent)}
@keyframes mceSpin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .mce--min .mce__grid{grid-template-columns:1fr}
  .mce--min .mce__art{height:clamp(380px,100vw,520px)}
  .mce--min .mce__a{width:76%}
  .mce--min .mce__b{width:52%;outline-width:8px}
}
@media (max-width:560px){.mce--min .mce__seal{width:84px;left:2%}}
@media (prefers-reduced-motion:reduce){.mce--min .mce__seal{animation:none}.mce--min .mce__art figure[data-reveal]{clip-path:none;transition:none}}

.mce--min .mce__c dd{text-align:right}


/* =====================================================================
   CTA IMERSIVO (compartilhado: MCMV #mc-cta e residencial #cta-a) · refino 28/10
   Palco sticky: a foto começa recortada (moldura com canto) e cresce até a tela inteira conforme
   a rolagem (--e de 0 a 1, app.js); marinho forte só do lado do texto; etapas correndo no pé.
   Sem JS, --e = 1 (foto inteira).
   ===================================================================== */
.cti.section{padding-block:0}
.cti__track{position:relative;height:175vh}
.cti__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;isolation:isolate}
.cti__media{position:absolute;inset:0;z-index:-2;
  clip-path:inset(calc((1 - var(--e,1)) * 11%) calc((1 - var(--e,1)) * 8%) round calc((1 - var(--e,1)) * 36px))}
.cti__media img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.24 - var(--e,1) * .24));will-change:transform}
.cti__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:calc(.45 + var(--e,1) * .55);background:
  linear-gradient(90deg,color-mix(in srgb,var(--c-dark) 90%,transparent) 0%,color-mix(in srgb,var(--c-dark) 62%,transparent) 48%,color-mix(in srgb,var(--c-dark) 12%,transparent) 100%),
  linear-gradient(0deg,color-mix(in srgb,var(--c-dark) 85%,transparent) 0%,transparent 38%)}
.cti__in{padding-top:var(--header-h);padding-bottom:96px}
.cti__in .h2{max-width:15ch;font-size:clamp(2.2rem,1.2rem + 3.6vw,4.4rem);line-height:1.04;color:var(--c-white)}
.cti__lead{margin-top:var(--sp-5);max-width:46ch;font-size:var(--fs-lead);line-height:1.55;color:var(--c-on-dark)}
.cti__go{margin-top:var(--sp-6)}
.cti__go .btn{box-shadow:0 18px 40px color-mix(in srgb,var(--c-primary) 35%,transparent)}
.cti__mq{position:absolute;left:0;right:0;bottom:0;padding-block:clamp(16px,2.4vw,24px);border-top:1px solid color-mix(in srgb,var(--c-white) 14%,transparent);
  background:color-mix(in srgb,var(--c-dark) 45%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cti__mq .marquee__track{gap:clamp(24px,4vw,56px);animation-duration:32s}
.cti__mq span{display:inline-flex;align-items:center;gap:clamp(24px,4vw,56px);font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,.9rem + 1.6vw,2.2rem);line-height:1;color:var(--c-white)}
.cti__mq span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--c-white) 70%,transparent)}
.cti__mq span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-primary);flex:0 0 auto}
@media (max-width:900px){
  .cti__track{height:160vh}
  .cti__veil{background:linear-gradient(180deg,color-mix(in srgb,var(--c-dark) 55%,transparent) 0%,color-mix(in srgb,var(--c-dark) 82%,transparent) 55%,color-mix(in srgb,var(--c-dark) 92%,transparent) 100%)}
  .cti__stage{align-items:flex-end}
  .cti__in{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){.cti__track{height:auto}.cti__stage{position:relative}.cti__media{clip-path:none}.cti__media img{transform:none}}