/* ==========================================================================
   História Cantada — reset, tipografia base e utilitários
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* trava rolagem lateral no mobile */
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-3xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); font-weight: 600; }
h3 { font-size: var(--text-xl);  font-weight: 600; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-ink); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

/* Foco: sempre visível. Nunca remover — é como quem navega por teclado
   sabe onde está. */
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* --- utilitários --------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--sp-8); }
}

.container-funnel {
  width: 100%;
  max-width: var(--container-funnel);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.section { padding-block: var(--sp-12); }

@media (min-width: 768px) {
  .section { padding-block: var(--sp-16); }
}

.section-warm { background: var(--bg-warm); }

/* Rótulo pequeno em maiúsculas usado acima dos títulos de seção */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 var(--sp-2);
}

.text-center { text-align: center; }
.text-muted  { color: var(--ink-muted); }

.lead {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  max-width: 60ch;
}

/* Números que mudam (preços, cronômetros) usam largura fixa por dígito,
   senão o layout "pula" quando o valor muda. */
.tabular { font-variant-numeric: tabular-nums; }

/* Visível apenas para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Pular direto para o conteúdo — aparece só ao receber foco por teclado */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: var(--z-overlay);
  background: var(--surface);
  color: var(--ink);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-field);
  box-shadow: var(--shadow-lift);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-enter);
}
.skip-link:focus { top: var(--sp-4); }

.hidden { display: none !important; }

/* --- placeholder de mídia -------------------------------------------------
   Fotos e vídeo ainda não existem. Em vez de deixar buraco, ocupamos o
   espaço exato com uma marcação discreta, para a troca futura não mexer
   no layout. */
.media-ph {
  position: relative;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(
      45deg,
      var(--bg-warm) 0 10px,
      #F0E9DC 10px 20px
    );
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-align: center;
  padding: var(--sp-4);
  overflow: hidden;
}
.media-ph[data-ratio="16/9"] { aspect-ratio: 16 / 9; }
.media-ph[data-ratio="4/3"]  { aspect-ratio: 4 / 3; }
.media-ph[data-ratio="1/1"]  { aspect-ratio: 1 / 1; }

/* --- movimento reduzido ---------------------------------------------------
   Quem pede menos movimento no sistema recebe menos movimento. A barra de
   progresso continua funcionando: ela informa, não decora. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}