/* =====================================================================
   Quality Car - Base (reset, tipografia, layout, botões)
   Depende de tokens.css
   ===================================================================== */

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-default);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}

p { line-height: var(--lh-body); }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); }

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

button { font-family: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(16, 30, 152, 0.15); }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--transition);
}
.skip-link:focus-visible { transform: translateY(0); }
body.has-open-dialog { overflow: hidden; }
body.has-open-nav { overflow: hidden; }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--space-8) 0; }
.section--alt { background: var(--color-bg-neutral); }

.section__head { text-align: center; max-width: 720px; margin: 0 auto var(--space-6); }
.section__eyebrow {
  color: var(--color-support);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-small);
  margin-bottom: var(--space-2);
}
.section__title { font-size: var(--fs-h2); }
.section__lead { font-size: var(--fs-body-lg); color: var(--text-default); margin-top: var(--space-3); }
.prose { max-width: 820px; margin: 0 auto; font-size: var(--fs-body-lg); color: var(--text-default); }

/* ---- Ícones ---- */
.ic { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: middle; flex-shrink: 0; color: inherit; }
.ic--xs { width: 1em; height: 1em; }
.ic--accent { color: var(--color-accent); }
.ic--wa-green { color: var(--color-whatsapp); width: 1.6em; height: 1.6em; }

/* ---- Botões ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 1;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { cursor: wait; opacity: .7; transform: none; }

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); color: #fff; }

.btn--wa { background: var(--color-whatsapp); color: #fff; }
.btn--wa:hover { background: #1ebe5d; color: #fff; }

.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--gray-200); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn--lg { padding: 16px 28px; font-size: var(--fs-body-lg); }
.btn--block { width: 100%; }

/* ---- Acessibilidade: respeitar reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}