/* ============================================================
   Do Meu Jeito — base
   Reset curto, tipografia, foco e utilitários de acessibilidade.
   ============================================================ */

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

/* display:flex e display:grid vencem o atributo hidden. Sem esta linha,
   faixas de erro escondidas continuariam ocupando espaço na tela. */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  min-height:100dvh;
  background:var(--creme);
  color:var(--tinta);
  font-family:var(--fonte);
  font-size:calc(17px * var(--escala));
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[data-legivel="1"] body{ font-family:var(--fonte-legivel); letter-spacing:.01em; }

h1,h2,h3,h4{ margin:0; line-height:1.2; font-weight:800; letter-spacing:-.02em; }
h1{ font-size:calc(1.75rem * var(--escala)); }
h2{ font-size:calc(1.3rem  * var(--escala)); }
h3{ font-size:calc(1.05rem * var(--escala)); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }

a{ color:var(--roxo-escuro); text-underline-offset:3px; }
a:hover{ color:var(--roxo); }

/* Foco sempre visível — regra não negociável do design system. */
:focus-visible{
  outline:3px solid var(--roxo-escuro);
  outline-offset:2px;
  border-radius:var(--r-pequeno);
}
html[data-contraste="alto"] :focus-visible{ outline-color:#150A24; outline-width:4px; }

/* Só para leitores de tela. */
.so-leitor{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Pular para o conteúdo: primeiro alvo do teclado em toda tela. */
.pular{
  position:absolute; left:var(--e3); top:-100px; z-index:200;
  background:var(--roxo); color:#fff; font-weight:700;
  padding:var(--e3) var(--e4); border-radius:var(--r-pequeno);
  transition:top var(--transicao);
}
.pular:focus{ top:var(--e3); color:#fff; }

/* ---------- estrutura da página ---------- */

.tela{
  /* Uma variável só para a margem lateral: os blocos que sangram até a borda
     (hero, tira de frase) usam o mesmo valor negativo e nunca vazam. */
  --margem-tela:var(--e4);
  max-width:560px;
  margin:0 auto;
  padding:0 var(--margem-tela);
  padding-bottom:calc(var(--barra-altura) + var(--e6) + env(safe-area-inset-bottom));
}
.tela--larga{ max-width:900px; }
.tela--sem-barra{ padding-bottom:var(--e6); }

/* Respiro entre blocos: mínimo --e4, como manda o design system. */
.secao{ margin-top:var(--e5); }
.secao--solta{ margin-top:var(--e6); }

.secao-titulo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e3); margin-bottom:var(--e3);
}
.secao-titulo h2{ font-size:calc(1.15rem * var(--escala)); }
.secao-titulo a{ font-size:calc(.9rem * var(--escala)); font-weight:600; }

.texto-suave{ color:var(--tinta-suave); }
.texto-pequeno{ font-size:calc(.875rem * var(--escala)); }
.texto-centro{ text-align:center; }
.negrito{ font-weight:700; }

.empilha  { display:flex; flex-direction:column; gap:var(--e3); }
.empilha--solta{ gap:var(--e4); }
.linha    { display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap; }
.linha--fim{ justify-content:flex-end; }
.cresce   { flex:1 1 auto; min-width:0; }

/* Em telas estreitas — e no zoom de 200%, que equivale a 320px de largura —
   a margem encolhe, e os blocos sangrados acompanham. */
@media (max-width:420px){
  .tela{ --margem-tela:var(--e3); }
}