/* ============================================================================
   JM ELETRO MOTORES · DESIGN SYSTEM · 02 BASE
   Reset, tipografia e primitivas de layout. Sem componente aqui.
   ========================================================================= */

*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;   /* topo sticky não cobre a âncora */
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--sf-base);
  color:var(--ink-c-forte);
  font-family:var(--f-txt);
  font-weight:400;
  font-size:var(--t-corpo);
  line-height:var(--lh-corpo);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

img, svg, canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:none; }

/* --- Tipografia ----------------------------------------------------------- */
h1, h2, h3, h4{
  font-family:var(--f-tit);
  font-weight:700;
  line-height:var(--lh-tit);
  letter-spacing:var(--ls-tit);
  color:inherit;
  text-wrap:balance;
}
h1{ font-size:var(--t-display); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); font-weight:600; letter-spacing:0; }
p{ text-wrap:pretty; }

strong{ font-weight:400; color:var(--ink-c-forte); }

/* utilitário de dado técnico: todo texto em mono usa este tratamento */
.mono{
  font-family:var(--f-mono);
  font-size:var(--t-dado);
  letter-spacing:var(--ls-mono);
  font-weight:400;
}

/* --- Layout --------------------------------------------------------------- */
.wrap{ width:var(--wrap); margin-inline:auto; }

.secao{ padding-block:var(--secao-y); position:relative; }

/* superfície escura: inverte a tinta de todo o conteúdo dentro */
.inverso{
  background:var(--sf-escura);
  color:var(--ink-e-forte);
}
.inverso h1, .inverso h2, .inverso h3, .inverso h4{ color:var(--ink-e-forte); }
.inverso strong{ color:var(--ink-e-forte); }

/* abertura de seção (parágrafo logo abaixo do H2) */
.abre{
  font-weight:300;
  color:var(--ink-c-corpo);
  max-width:58ch;
  margin-top:var(--s-3);
  margin-bottom:var(--s-7);
}
.inverso .abre{ color:var(--ink-e-corpo); }

/* --- Acessibilidade ------------------------------------------------------- */
.pular{
  position:absolute; left:var(--s-4); top:var(--s-2);
  z-index:calc(var(--z-flutua) + 1);
  transform:translateY(-150%);
  background:var(--brand-cobre);
  color:var(--brand-azul);
  font-family:var(--f-tit); font-weight:600; font-size:var(--t-corpo-p);
  padding:var(--s-2) var(--s-4);
  transition:transform var(--dur-1) var(--ease-ui);
}
.pular:focus{ transform:none; }

:where(a, button, [tabindex]):focus-visible{
  outline:2px solid var(--brand-cobre);
  outline-offset:3px;
}
.inverso :where(a, button):focus-visible{ outline-color:var(--brand-cobre); }

.so-leitor{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* --- Estado inicial dos blocos animados -----------------------------------
   Só vale quando o JS assumiu (html.js). Sem JS, tudo já está visível — a
   página é legível com o script bloqueado. */
.js [data-surge],
.js [data-surge-grupo] > *{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js [data-surge],
  .js [data-surge-grupo] > *{ opacity:1 !important; transform:none !important; }
}