/* ==========================================================================
   Base — escala responsiva proporcional, tipografia e estrutura de slide
   ==========================================================================

   Estratégia de fidelidade:
   O projeto foi entregue em frames de 1440×810px (16:9). Para reproduzir as
   proporções EXATAS, 1rem = 16px em 1440px e a raiz escala proporcionalmente
   com a viewport (calc(100vw/90)) de 1024px PARA CIMA — assim o frame 16:9
   preenche telas grandes (1600/1920/2560) sem margens vazias nem "página
   pequena centralizada", mantendo espaçamentos e proporções idênticos ao
   design. A escala é travada acima de 2560px para o texto não crescer demais.
   Abaixo de 1024px o layout se reorganiza (ver responsive.css).
   -------------------------------------------------------------------------- */
html { font-size: 16px; scroll-behavior: smooth; }

@media (min-width: 1024px) {
  html { font-size: calc(100vw / 90); } /* 1440→16px · 1920→21.33px · 2560→28.44px */
}
@media (min-width: 2560px) {
  html { font-size: 28.44px; }           /* trava a escala em telas ultra-largas */
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  overflow-x: hidden;          /* proteção contra rolagem horizontal */
}

/* --- Acessibilidade: link de pulo --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brown);
  color: var(--cream);
  padding: .75rem 1.25rem;
  border-radius: 0 0 .5rem 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Foco de teclado visível (usa a cor do próprio texto p/ contrastar em qualquer fundo) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Respeita a preferência de redução de movimento --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Slide — cada seção reproduz um frame do material de referência
   ========================================================================== */
.slide {
  position: relative;
  width: 100%;
  min-height: var(--slide-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-margin-top: var(--masthead-h);   /* âncoras param abaixo do header fixo */
}
/* Hero: o cabeçalho (transparente no topo) SOBREPÕE o herói, para a imagem
   sangrar até o topo da página como na referência. A altura do header é
   devolvida como padding, mantendo a área de conteúdo do design. */
@media (min-width: 1024px) {
  #hero {
    min-height: var(--slide-h);
    margin-top: calc(-1 * var(--masthead-h));
    padding-top: var(--masthead-h);
  }
}

/* Temas de fundo por seção */
.theme-light  { background: var(--cream); color: var(--ink); }
.theme-dark   { background: var(--brown); color: var(--ink-invert); }
.theme-orange { background: var(--amber); color: var(--ink); }

/* Corpo do slide: área de conteúdo abaixo do cabeçalho.
   position:static para que as imagens que sangram (position:absolute)
   se ancorem no .slide (largura total), enquanto o texto fica no container. */
.slide__body {
  position: static;
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
}

/* Blocos de texto ficam acima das imagens de fundo/sangria */
.hero__content,
.split__text,
.produto__text,
.comparativo__text,
.historia .split__text,
.mercado,
.investir,
.passos,
.contato__text {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Tipografia utilitária
   ========================================================================== */
.h-display {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.body-lg { font-size: var(--fs-lg); font-weight: 500; line-height: 1.45; }  /* Inconsolata Medium — subtítulo */
.body-md { font-size: var(--fs-md); line-height: 1.5; }
.body-sm { font-size: var(--fs-sm); line-height: 1.5; }

.strong { font-weight: 900; }
.upper  { text-transform: uppercase; }
.nowrap { white-space: nowrap; }   /* mantém compostos/números juntos (evita quebra ruim) */

strong, b { font-weight: 900; }