/* ==========================================================================
   Base — reset + primitivos. Nenhum hex literal aqui: só var(--token).
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:128px}
body{
  margin:0;
  background:var(--gray-25);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--teal-600);text-decoration:none}
a:hover{color:var(--teal-800);text-decoration:underline}

h1,h2,h3,h4{font-family:var(--font-display);margin:0;color:var(--ink-900)}
.eyebrow{
  font-family:var(--font-body);font-weight:700;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-700);
}

/* Foco visível — obrigatório em todo elemento interativo, sem exceção */
:focus-visible{
  outline:3px solid var(--focus-color);
  outline-offset:2px;
  border-radius:4px;
}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:var(--z-modal);
  background:var(--teal-700);color:var(--white);
  padding:12px 20px;border-radius:var(--radius-btn);
  font-weight:600;transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{top:16px}

.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter)}

/* Botões */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  min-height:44px;padding:12px 24px;border-radius:var(--radius-btn);
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;
  border:none;cursor:pointer;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--teal-700);color:var(--white)}
.btn-primary:hover{background:var(--teal-800);box-shadow:var(--shadow-sm);color:var(--white)}
.btn-donate{background:var(--orange-500);color:var(--ink-900)}
.btn-donate:hover{background:var(--orange-700);color:var(--white);box-shadow:var(--shadow-sm)}
.btn-whatsapp{background:var(--whatsapp);color:var(--ink-900)}
.btn-whatsapp:hover{filter:brightness(.92);color:var(--ink-900)}
.btn-secondary{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.7)}
.btn-secondary:hover{background:rgba(255,255,255,.12);color:var(--white)}

/* Card — borda em repouso, nunca sombra + borda ao mesmo tempo */
.card{
  background:var(--white);border:1px solid var(--gray-100);
  border-radius:var(--radius-card);overflow:hidden;
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover{box-shadow:var(--shadow-md);border-color:transparent}

.badge{
  display:inline-block;font-family:var(--font-mono);font-weight:700;
  font-size:.6875rem;letter-spacing:.06em;color:var(--orange-700);
  background:var(--orange-100);padding:4px 10px;border-radius:var(--radius-pill);
}

.section{padding-block:var(--section-y-tight)}
@media (min-width:1024px){ .section{padding-block:var(--section-y)} }

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}