/* Meger Engenharia · base compartilhada das LPs (reset + grid + tipografia + utilidades).
   Só tokens (tokens.css). Nenhuma cor ou fonte fixa aqui: cor = var(--c-*), fonte = var(--font-*).
   Origem: base-kit BuildV (site-components/static: reset.css + base.css), reskinado no DS da Meger.
   Ordem de carga: tokens.css > base.css > components.css > motion.css > <style> da página. */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* scroll-behavior:auto de propósito: o suave é só na rodinha do mouse (site.js). Nunca "smooth" aqui (S14). */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;scroll-padding-top:calc(var(--header-h) + 12px)}
/* overflow-x no HTML (clip), nunca no body: overflow no body quebra position:sticky */
html{overflow-x:clip}
body{min-height:100dvh;font-family:var(--font-body);font-weight:var(--fw-body);font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--c-text);background:var(--c-bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-display);line-height:var(--lh-title);
  letter-spacing:var(--tracking-title);text-wrap:balance}
p,li{text-wrap:pretty}
/* img height:auto: senão o atributo height do HTML vence o aspect-ratio (imagem esticada) */
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}
input,select,textarea{font:inherit;color:inherit}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
:where(a,button,input,select,textarea,label,[tabindex]):focus-visible{outline:3px solid var(--c-accent);outline-offset:3px;border-radius:var(--r-sm)}
[hidden]{display:none !important}

/* ---------- Grid padrão BuildV (S13): container 1200, --px, seção --section-y ---------- */
.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--paper{background:var(--c-bg)}
.section--surface{background:var(--c-surface)}
.section--dark{background:var(--c-dark);color:var(--c-white)}
.section--grafite{background:var(--c-primary);color:var(--c-white)}

/* Inversão em fundo escuro (DS §2): texto branco, secundário claro, destaque em ouro */
.section--dark,.section--grafite{--tx-muted:var(--c-on-dark-muted);--tx-hl:var(--c-accent);--line:color-mix(in srgb,var(--c-white) 16%,transparent)}
:root{--tx-muted:var(--c-muted);--tx-hl:var(--c-accent-deep);--line:var(--c-n200)}

/* ---------- Tipografia ---------- */
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2);max-width:30ch;line-height:1.1;letter-spacing:-.018em}
.h3{font-size:var(--fs-h3);font-weight:var(--fw-display-strong);line-height:1.2}
.h2 + p,.h2 + .lead,.sec-head .h2 + *{margin-top:var(--space-5)}
.lead{font-size:var(--fs-lead);color:var(--tx-muted)}
.muted{color:var(--tx-muted)}
.small{font-size:var(--fs-small)}
/* destaque de UMA palavra/trecho por título (cor OU peso, nunca os dois) */
.hl{color:var(--tx-hl)}
.hero .hl{color:var(--c-accent)}
strong,b{font-weight:var(--fw-body-strong)}

/* Eyebrow: só quando ajuda a ler; caixa alta 13 px, sem traço, número ou índice (S02) */
.eyebrow{display:block;font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-body-strong);
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-hl);margin-bottom:var(--space-4)}

/* Cabeçalho de seção: sempre à esquerda, na largura do container (S13) */
.sec-head{max-width:760px}
.sec-head p{max-width:62ch}
.sec-cta{margin-top:var(--space-7)}

/* ---------- Assinatura do DS (máx. 1 por seção) ---------- */
/* Filete 3 px em degradê grafite -> ouro (único degradê permitido) */
.filete{display:block;width:72px;height:3px;border-radius:2px;background:var(--grad-marca);margin-bottom:var(--space-5)}
/* Grafismo "cumeeira" (duas águas da cobertura da logo), 10% sobre grafite, nunca sobre claro */
.cumeeira{position:absolute;inset:0;pointer-events:none;opacity:.08;background:var(--c-white);
  -webkit-mask:url("/assets/img/marca/cumeeira.svg") 0 0/240px 120px repeat;
  mask:url("/assets/img/marca/cumeeira.svg") 0 0/240px 120px repeat}

/* ---------- Mídia ---------- */
.media{position:relative;display:block;overflow:hidden;border-radius:var(--r-sm)}
.media img{width:100%;height:100%;object-fit:cover}
/* .media--fill: a foto acompanha a altura do bloco de texto vizinho (S13), sem distorcer */
.media--fill img{position:absolute;inset:0}

/* ---------- Utilidades ---------- */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:1200;background:var(--c-accent);color:var(--c-dark);
  padding:12px 18px;border-radius:var(--r-pill);font-weight:var(--fw-body-strong)}
.skip:focus{top:16px}
.nowrap{white-space:nowrap}