/* site.css · Thiago Makioszek, Engenheiro Civil
   Base: site-components/static (reset + base + components + motion), reskinado no DS do cliente.
   Só tokens (tokens.css). Estilos de cada seção ficam no <style> escopado por #id da página. */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h-scrolled) + 16px)}
html{overflow-x:clip} /* nunca no body: quebra position:sticky */
body{min-height:100dvh;font-family:var(--font-body);font-weight:var(--weight-body-regular);font-size:var(--fs-body);
  color:var(--c-text);background:var(--c-bg);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display-strong);line-height:var(--lh-heading);text-wrap:balance}
p{text-wrap:pretty}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:var(--r-sm)}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ---------- layout ---------- */
.container{width:100%;max-width:calc(var(--container) + 2 * var(--px));margin-inline:auto;padding-inline:var(--px)}
.section{padding-block:var(--section-y);position:relative}
.section--dark{background:var(--c-dark);color:var(--c-white)}
.section--surface{background:var(--c-surface)}
.section--soft{background:var(--c-n200)}

/* ---------- tipografia ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-label);font-size:var(--fs-eyebrow);
  font-weight:var(--weight-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--c-accent-ink);margin-bottom:18px}
.eyebrow::before{content:"";width:var(--quadro);height:var(--quadro);border:var(--quadro-traco) solid currentColor;flex:0 0 auto} /* quadrado vazado do símbolo */
.section--dark .eyebrow{color:var(--c-accent)}
.section--soft .eyebrow{color:color-mix(in srgb,var(--c-accent-ink) 85%,var(--c-text))} /* ink puro sobre --c-n200 dá 4,21:1; com 15% de texto: 5,01:1 (AA) */
.h2{font-size:var(--fs-h2);max-width:24ch}
.h3{font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-muted)}
.section--dark .lead{color:color-mix(in srgb,var(--c-white) 78%,transparent)}
.muted{color:var(--c-muted)}
.section--dark .muted{color:color-mix(in srgb,var(--c-white) 70%,transparent)}

/* ---------- botões (CTA abre o Widget CRM via data-cta-merlin; nunca form/wa.me) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1rem 1.8rem;border-radius:var(--r-md);
  font-family:var(--font-body);font-weight:var(--weight-body-medium);font-size:1rem;line-height:1.1;text-align:center;
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn--primary{background:var(--c-primary);color:var(--c-white)}
.btn--primary:hover{background:var(--c-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--lg{padding:1.1rem 2.1rem;font-size:1.05rem}
.btn--line{border:1.5px solid color-mix(in srgb,var(--c-white) 34%,transparent);color:var(--c-white);padding:.7rem 1.2rem;font-size:.95rem}
.btn--line:hover{border-color:var(--c-white);background:color-mix(in srgb,var(--c-white) 8%,transparent)}
.btn .btn__arrow{width:18px;height:18px;flex:0 0 auto}
.btn:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}

/* faixa de CTA no fim de seção: microcopy + botão */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(40px,6vw,64px);padding-top:28px;border-top:1px solid var(--c-n400)}
.cta-row__txt{font-family:var(--font-display);font-weight:var(--weight-display-medium);font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);flex:1 1 280px;max-width:46ch}
.section--dark .cta-row{border-top-color:color-mix(in srgb,var(--c-white) 16%,transparent)}

/* ---------- grafismo técnico do manual (SVG pontual, nunca textura de fundo) ---------- */
.mira{width:28px;height:28px;color:var(--c-accent);flex:0 0 auto}
.pontos{position:absolute;pointer-events:none;color:color-mix(in srgb,var(--c-white) 22%,transparent)}

/* ---------- sistema gráfico da marca (DS "Sistema gráfico da marca") ----------
   Chanfro = o lado aberto do "C": os dois cantos da direita cortados a 45° (--chanfro-ang), comprimento --chanfro.
   Quadrado vazado = o quadrado de dentro do símbolo, como marcador/indicador (.quadro). */
.quadro{display:inline-block;width:var(--quadro);height:var(--quadro);border:var(--quadro-traco) solid currentColor;flex:0 0 auto}
.chanfro,.foto,.duo,.frame,.frame::after,.moldura,.moldura::after,.chanfro-after::after{--c-ch:var(--ch,var(--chanfro));
  clip-path:polygon(0 0,calc(100% - var(--c-ch)) 0,100% var(--c-ch),100% calc(100% - var(--c-ch)),calc(100% - var(--c-ch)) 100%,0 100%)}

/* ---------- render 3D tratado (duotone grafite, DS §6) + filete técnico ---------- */
.duo{position:relative;display:block;overflow:hidden;background:var(--c-dark);isolation:isolate;border-radius:0}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);mix-blend-mode:screen;opacity:.94}
.duo::after{content:"";position:absolute;inset:0;background:var(--c-n400);mix-blend-mode:multiply;pointer-events:none}
/* .moldura = caixa com filete de 1px que acompanha o chanfro (pórtico, ícone da Atuação). --m-line/--m-bg/--m-ch por contexto */
.moldura{--ch:var(--m-ch,var(--chanfro));background:var(--m-line,var(--c-n400));isolation:isolate}
.moldura::after{content:"";position:absolute;inset:1px;z-index:-1;background:var(--m-bg,var(--c-bg));--ch:calc(var(--m-ch,var(--chanfro)) - .5px)}
/* moldura chanfrada: o fundo da .frame é o filete; o ::after (1px para dentro) repinta o fundo da seção.
   Assim o filete acompanha o corte de 45° (borda comum seria cortada pelo clip-path). */
.frame{--frame-line:var(--c-n400);--frame-bg:var(--c-bg);position:relative;display:block;padding:11px;background:var(--frame-line);isolation:isolate}
.frame::after{content:"";position:absolute;inset:1px;z-index:-1;background:var(--frame-bg);--ch:calc(var(--chanfro) - .5px)}
.frame::before{content:"";position:absolute;left:0;top:0;width:28px;height:3px;background:var(--c-accent);z-index:1}
.frame .duo{--ch:calc(var(--chanfro) - 6px)}  /* paralelo ao corte da moldura (recuo de 11px a 45°) */
.section--surface .frame{--frame-bg:var(--c-surface)}
.section--soft .frame{--frame-bg:var(--c-n200)}
.section--dark .frame{--frame-line:color-mix(in srgb,var(--c-white) 18%,transparent);--frame-bg:var(--c-dark)}

/* ---------- foto real em cor (obras Magicon / imagens geradas): máscara leve de preto por token ---------- */
.foto{position:relative;display:block;overflow:hidden;background:var(--c-dark)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto::after{content:"";position:absolute;inset:0;background:var(--photo-mask);pointer-events:none}
.foto-obra{margin:0;min-width:0}
.foto-obra figcaption{display:flex;flex-direction:column;gap:3px;margin-top:12px}
.foto-obra__k{font-family:var(--font-label);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-label);color:var(--c-muted)}
.foto-obra__n{font-family:var(--font-display);font-weight:var(--weight-display-medium);font-size:var(--fs-small);color:var(--c-text)}
.section--dark .foto-obra__k{color:color-mix(in srgb,var(--c-white) 62%,transparent)}
.section--dark .foto-obra__n{color:var(--c-white)}

/* ---------- header (logo amarela sempre sobre escuro; o fundo é que muda) ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);display:flex;align-items:center;color:var(--c-white);
  transition:background var(--dur-base) var(--ease),height var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--c-dark) 62%,transparent),transparent)}
.site-header.is-scrolled,.site-header--solid{background:var(--c-dark);height:var(--header-h-scrolled);box-shadow:var(--shadow-sm)}
.site-header.is-scrolled::before,.site-header--solid::before{opacity:0}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header__brand{display:block;flex:0 0 auto}
.site-header__logo{width:134px;height:auto;transition:width var(--dur-base) var(--ease)}
.site-header.is-scrolled .site-header__logo,.site-header--solid .site-header__logo{width:122px}
.site-header__nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.site-header__nav a{font-size:.92rem;font-weight:var(--weight-body-medium);color:color-mix(in srgb,var(--c-white) 82%,transparent);transition:color var(--dur-fast) var(--ease)}
.site-header__nav a:hover{color:var(--c-white)}
.site-header__act{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.menu-btn span{display:block;width:22px;height:2px;background:currentColor;transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .site-header__nav{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--header-h) + 8px) 28px 28px;background:var(--c-dark);box-shadow:var(--shadow-md);
    transform:translateX(100%);visibility:hidden;transition:transform var(--dur-base) var(--ease),visibility var(--dur-base)}
  .site-header__nav.is-open{transform:none;visibility:visible}
  .site-header__nav a{padding:16px 0;font-size:1.05rem;border-bottom:1px solid color-mix(in srgb,var(--c-white) 12%,transparent)}
  .site-header__act .btn--line{display:none}
  .site-header__brand,.menu-btn{position:relative;z-index:2}
}

/* ---------- footer ---------- */
.site-footer{position:relative;isolation:isolate;overflow:hidden;background:var(--c-dark);color:color-mix(in srgb,var(--c-white) 74%,transparent);padding-block:clamp(56px,7vw,88px) 32px;font-size:var(--fs-small)}
.site-footer__top{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;padding-bottom:40px;border-bottom:1px solid color-mix(in srgb,var(--c-white) 12%,transparent)}
.site-footer__logo{width:180px;height:auto}
.site-footer__id{display:flex;flex-direction:column;gap:4px;justify-self:end;text-align:right}
.site-footer__id strong{font-family:var(--font-display);font-weight:var(--weight-display-medium);color:var(--c-white);font-size:1rem}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:24px}
.site-footer__bottom a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c-white) 30%,transparent);text-underline-offset:3px}
.site-footer__bottom a:hover{color:var(--c-white)}
.site-footer__links{display:flex;flex-wrap:wrap;gap:10px 22px}
@media (max-width:700px){.site-footer__top{grid-template-columns:1fr}.site-footer__id{justify-self:start;text-align:left}}

/* ---------- banner de cookies: SEMPRE À ESQUERDA (o canto direito é do botão do Widget CRM) ---------- */
.cookie{position:fixed;left:20px;bottom:20px;z-index:70;max-width:360px;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:16px 18px;font-size:.88rem;line-height:1.5}
.cookie a{text-decoration:underline;text-underline-offset:2px}
.cookie__actions{display:flex;gap:10px;margin-top:12px}
.cookie__actions button{padding:.6em 1.1em;border-radius:var(--r-sm);font-weight:var(--weight-body-medium);font-size:.85rem}
.cookie__ok{background:var(--c-primary);color:var(--c-white)}
.cookie__ok:hover{background:var(--c-primary-dark)}
.cookie__no{border:1px solid var(--c-n400)}
@media (max-width:560px){.cookie{left:12px;right:84px;bottom:12px;max-width:none;padding:12px 14px;font-size:.8rem}.cookie__actions{margin-top:8px}}

/* ---------- lightbox (renders também em duotone) ---------- */
.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}
.lb.is-open{display:flex}
.lb__stage{max-width:min(1100px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:12px;align-items:center}
.lb__stage img{max-height:78vh;width:auto;border-radius:var(--r-sm);filter:grayscale(1) contrast(1.05)}
.lb__count{color:var(--c-white);font-size:.85rem;opacity:.8}
.lb__x{position:absolute;top:16px;right:20px;color:var(--c-white);font-size:2rem;line-height:1;width:44px;height:44px}
.lb__nav{color:var(--c-white);font-size:2.4rem;line-height:1;width:48px;height:48px;opacity:.8}
.lb__nav:hover{opacity:1}
@media (max-width:640px){.lb__nav{position:absolute;bottom:18px}.lb__prev{left:28%}.lb__next{right:28%}}

/* ---------- loader curto (só com JS; some no DOMContentLoaded, rede de 1,2s) ---------- */
.loader{display:none}
html.js .loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--c-dark);transition:opacity .4s var(--ease),visibility .4s}
html.js .loader.is-done{opacity:0;visibility:hidden}
.loader .mira{width:40px;height:40px}

/* ---------- movimento (baseline; a etapa 7 enriquece) ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
html.js [data-reveal].is-in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.1s}[data-delay="2"]{transition-delay:.2s}[data-delay="3"]{transition-delay:.3s}
html.js .hero-media{transform:scale(1.06);transition:transform 1.6s var(--ease)}
html.js .hero-media.is-in{transform:scale(1)}
[data-underline]{background-image:linear-gradient(var(--c-accent),var(--c-accent));background-repeat:no-repeat;background-position:0 96%;background-size:0 3px;transition:background-size .9s var(--ease) .3s}
html:not(.js) [data-underline],[data-underline].is-in{background-size:100% 3px}
.marquee{overflow:hidden}
.marquee__track{display:inline-flex;align-items:center;gap:2rem;white-space:nowrap;width:max-content;animation:tm-mq 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes tm-mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal],html.js .hero-media{transition:none !important;transform:none !important;opacity:1 !important}
  [data-underline]{transition:none;background-size:100% 3px}
  .marquee__track{animation:none !important}
}