/* site.css · Wise Construtora · base compartilhada (reset + base + primitivos + baseline de movimento).
   Parte do base-kit BuildV (static), reskinado no design system. Só tokens: nenhuma cor ou fonte fixa.
   O estilo de cada seção fica no <style> escopado por #id dentro da página. */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px)}
/* scroll suave: Lenis com a configuração do UM Milano (LUX_JS), rodinha e trackpad; sem scroll-behavior:smooth somado. */
/* overflow-x no HTML, nunca no body (body quebra position:sticky) */
html{overflow-x:clip}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--fs-body);font-weight:400;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:400;line-height:var(--lh-title);letter-spacing:-.01em;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):focus-visible{outline:2px solid var(--c-dark);outline-offset:3px}
.is-dark :where(a,button):focus-visible,.on-dark:focus-visible{outline-color:var(--c-primary)}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
em{font-style:italic}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--c-primary);color:var(--c-dark);
  padding:10px 16px;border-radius:var(--r-pill);font-weight:500}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- base ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--px)}
.section{padding-block:clamp(88px,10vw,160px)}
.is-dark{background:var(--c-dark);color:var(--c-bg)}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-body);font-size:var(--fs-eyebrow);
  font-weight:500;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--sp-5)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--c-primary);flex:0 0 auto}
.is-dark .eyebrow{color:color-mix(in srgb,var(--c-bg) 72%,transparent)}

.h2{font-size:var(--fs-h2);line-height:var(--lh-title)}
.h3{font-size:var(--fs-h3);line-height:1.1}
.lead{font-size:var(--fs-lead);font-weight:300;line-height:1.55;max-width:46ch}
.muted{color:var(--c-muted)}
.is-dark .muted{color:color-mix(in srgb,var(--c-bg) 72%,transparent)}

/* marca-texto: realce de uma expressão (limão claro atrás do texto marinho) */
.mark{background-image:linear-gradient(var(--c-accent),var(--c-accent));background-repeat:no-repeat;
  background-position:0 88%;background-size:100% .5em;padding-inline:.06em;color:inherit}
.is-dark .mark{background-image:linear-gradient(var(--c-primary),var(--c-primary));background-size:100% 2px;background-position:0 100%}

/* crédito editorial de obra */
.credit{font-family:var(--font-body);font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-muted);line-height:1.5}
.is-dark .credit{color:color-mix(in srgb,var(--c-bg) 70%,transparent)}
.credit b{font-weight:500;color:var(--c-text)}
.is-dark .credit b{color:var(--c-bg)}

/* ---------- botões (CTA abre o método de conversão via data-cta-merlin; nunca form, nunca wa.me) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:1em;min-height:50px;padding:0 30px;
  border-radius:0;font-family:var(--font-body);font-size:.6875rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.2;text-align:center;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn--primary{background:var(--c-primary);color:var(--c-dark)}
.btn--primary:hover{background:var(--c-primary-dark)}
.btn__arrow{display:inline-block;transition:transform var(--dur-fast) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--line{border:1px solid color-mix(in srgb,currentColor 55%,transparent);color:inherit;background:transparent}
.btn--line:hover{border-color:var(--c-primary)}
.cta-row{margin-top:var(--sp-7)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);display:flex;align-items:center;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);border-bottom:1px solid transparent}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .brand{display:block;position:relative;height:40px;width:133px;flex:0 0 auto}
.site-header .brand img{position:absolute;inset:0;height:40px;width:auto;transition:opacity var(--dur) var(--ease)}
.site-header .brand .logo-navy{opacity:0}
.site-header .btn{min-height:44px;padding:0 22px;font-size:.75rem}
.site-header .btn--line{color:var(--c-bg)}
.site-header.is-solid{background:color-mix(in srgb,var(--c-bg) 94%,transparent);border-bottom-color:var(--c-n200);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-header.is-solid .logo-white{opacity:0}
.site-header.is-solid .logo-navy{opacity:1}
.site-header.is-solid .btn--line{color:var(--c-text)}
.site-header--light{background:var(--c-bg);border-bottom-color:var(--c-n200)}
.site-header--light .logo-white{opacity:0}
.site-header--light .logo-navy{opacity:1}
@media (max-width:560px){.site-header .btn{display:none}.btn{padding:0 20px;letter-spacing:.07em}}

/* ---------- rodapé ---------- */
.site-footer{background:var(--c-dark);color:var(--c-bg);padding-block:var(--sp-8) var(--sp-7)}
.site-footer .container{display:grid;grid-template-columns:1fr auto;gap:var(--sp-6);align-items:end}
.site-footer .brand img{height:44px;width:auto}
.site-footer p{font-size:var(--fs-small);color:color-mix(in srgb,var(--c-bg) 70%,transparent);margin-top:var(--sp-4)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:var(--fs-small)}
.site-footer nav a,.site-footer nav button{color:color-mix(in srgb,var(--c-bg) 80%,transparent);border-bottom:1px solid var(--c-line-dark);padding-bottom:2px}
.site-footer nav a:hover,.site-footer nav button:hover{color:var(--c-bg);border-bottom-color:var(--c-primary)}
@media (max-width:900px){.site-footer .container{grid-template-columns:1fr;align-items:start}}

/* ---------- banner de cookies (SEMPRE à ESQUERDA: o canto inferior direito é do botão do CRM) ---------- */
.cookie{position:fixed;left:20px;bottom:20px;z-index:70;max-width:560px;display:flex;align-items:center;gap:18px;
  background:var(--c-white);color:var(--c-text);border:1px solid var(--c-n200);border-radius:var(--r-md);box-shadow:var(--shadow-md);
  padding:14px 16px 14px 20px;font-size:.8125rem;line-height:1.45}
.cookie[hidden]{display:none}
.cookie a{border-bottom:2px solid var(--c-primary)}
.cookie .actions{display:flex;gap:8px;flex:0 0 auto}
.cookie button{min-height:38px;padding:0 16px;border-radius:var(--r-pill);font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.cookie [data-cookie-accept]{background:var(--c-primary);color:var(--c-dark)}
.cookie [data-cookie-reject]{border:1px solid var(--c-n400)}
@media (max-width:700px){.cookie{left:12px;right:auto;bottom:12px;max-width:calc(100% - 96px);display:block;padding:12px 14px}
  .cookie .actions{margin-top:10px}.cookie button{min-height:36px;padding:0 14px}}

/* ---------- lightbox ---------- */
.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) 96%,transparent);padding:24px;color:var(--c-bg)}
.lb.is-open{display:flex}
.lb__stage{max-width:min(1200px,90vw);display:flex;flex-direction:column;gap:14px;align-items:center}
.lb__stage img{max-height:78vh;width:auto;max-width:100%;border-radius:var(--r-sm)}
.lb__cap{display:flex;gap:18px;align-items:baseline;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c-bg) 78%,transparent)}
.lb__x{position:absolute;top:16px;right:20px;width:48px;height:48px;font-size:2rem;line-height:1;color:var(--c-bg)}
.lb__nav{width:52px;height:52px;font-size:2.4rem;line-height:1;color:var(--c-bg);opacity:.8;flex:0 0 auto}
.lb__nav:hover{opacity:1;color:var(--c-primary)}
.lb :focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
@media (max-width:640px){.lb{padding:72px 12px 88px}.lb__nav{position:absolute;bottom:20px}.lb__prev{left:calc(50% - 64px)}.lb__next{right:calc(50% - 64px)}}

/* ---------- baseline de movimento (ganchos; a camada rica é da etapa 7) ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
html.js [data-reveal].is-in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.12s}[data-delay="2"]{transition-delay:.24s}[data-delay="3"]{transition-delay:.36s}
html.js [data-underline]{background-image:linear-gradient(var(--c-primary),var(--c-primary));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;transition:background-size .9s var(--ease) .2s}
html.js [data-underline].is-in{background-size:100% 2px}
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  html.js [data-underline]{background-size:100% 2px;transition:none}
}

/* ---------- etapa 7 · camada rica (editorial, discreta; só transform/opacity/background-size) ---------- */
/* títulos: o <em> ganha sublinhado que se desenha da esquerda p/ a direita quando o título entra */
/* grifo colado à linha de base (não ao pé da caixa da fonte) e com espessura proporcional ao texto */
.h2 em,.fecho__h em{--ul:max(2px,.045em)}
html.js .h2[data-reveal] em,html.js .fecho__h em{background-image:linear-gradient(var(--c-primary),var(--c-primary));background-repeat:no-repeat;
  background-position:0 84%;background-size:0 var(--ul);transition:background-size 1s var(--ease) .3s}
html.js .h2[data-reveal].is-in em,html.js #fecho .fecho__h.is-in em{background-size:100% var(--ul)}
/* figuras sobem um pouco mais devagar que o texto (ritmo de virar página) */
html.js figure[data-reveal]{transform:translateY(28px);transition-duration:1.1s}
html.js figure[data-reveal].is-in{transform:none}
/* paralaxe sutil (≤5%): o fundo ganha folga p/ deslizar sem expor borda */
html.js #hero .hero__bg,html.js #fecho .fecho__bg{inset:-6% 0;will-change:transform}
@media (prefers-reduced-motion: reduce){
  html.js .h2[data-reveal] em,html.js .fecho__h em{background-size:100% var(--ul);transition:none}
  html.js figure[data-reveal]{transform:none;transition:none}
  html.js #hero .hero__bg,html.js #fecho .fecho__bg{inset:0;transform:none!important}
}