/* ============================================================
   base.css — Reset + estilos base + componentes da landing.
   Consome os design tokens do tokens.css (cores, tipografia,
   medidas). Mobile-first. Landing única por enquanto: reset,
   elementos base e componentes do hero/form numa folha só —
   dividimos em componentes quando surgir a 2ª página.
   ============================================================ */

/* ===== Reset mínimo ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

body {
  font-family: var(--fonte-base);
  font-size: var(--texto-body);
  font-weight: var(--peso-regular);
  line-height: var(--lh-corpo);
  color: var(--cor-branco);
  background: var(--cor-preto);
  -webkit-font-smoothing: antialiased;
}

/* ===== Hero ===== */
.hero {
  min-height: 100svh;          /* viewport cheia; svh não "pula" com a barra mobile */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.hero > svg {                  /* o logo inline (SVG animado) */
  width: min(280px, 70vw);
  height: auto;
}

/* O logo embute um <rect> de fundo #000 (um "cartão") que destoa do hero
   #0A0A0A. Neutralizamos só esse fundo, escopado — sem tocar o SVG master
   nem o preto do hero. O combinador filho-direto pega apenas o rect de
   fundo; os outros 2 <rect> do SVG vivem dentro de <clipPath> (netos). */
.hero > svg > rect { fill: transparent; }

.hero__conteudo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 34rem;
}

.hero__titulo {
  font-size: var(--texto-h1);
  font-weight: var(--peso-bold);
  line-height: var(--lh-titulo);
}

.destaque { color: var(--cor-verde); }   /* "barbearia" e "no automático" */

.hero__subtexto {
  font-size: var(--texto-body);
  color: var(--cor-cinza-claro);
}

/* ===== Card de captura de lead ===== */
.captura {
  width: 100%;
  max-width: 26rem;
  padding: 1.5rem;
  background: var(--cor-cinza-escuro);
  border-radius: var(--raio-card);
  text-align: left;
}

.captura__titulo {
  margin-bottom: 1.25rem;
  font-size: var(--texto-h2);
  font-weight: var(--peso-semibold);
  text-align: center;
}

/* ===== Form (#form-lead vem do partials/lead_form.html) ===== */
#form-lead { display: flex; flex-direction: column; gap: 1rem; }

.campo { display: flex; flex-direction: column; gap: 0.375rem; }

.campo label {
  font-size: var(--texto-small);
  font-weight: var(--peso-medium);
  color: var(--cor-cinza-claro);
}

.campo input,
.campo select {
  width: 100%;
  padding: 0.75rem;
  font-size: var(--texto-body);   /* 16px: evita o zoom automático do iOS */
  color: var(--cor-branco);
  background: var(--cor-preto);
  border: 1px solid var(--cor-cinza-medio);
  border-radius: var(--raio-botao);
}

.campo input::placeholder { color: var(--cor-cinza-suave); }

.campo input:focus,
.campo select:focus {
  outline: 2px solid var(--cor-verde);
  outline-offset: 1px;
  border-color: var(--cor-verde);
}

.erro {
  font-size: var(--texto-small);
  color: var(--cor-alerta);
}

#form-lead button[type="submit"] {
  margin-top: 0.25rem;
  padding: 0.875rem 1rem;
  font-weight: var(--peso-semibold);
  color: var(--cor-preto);
  background: var(--cor-verde);
  border: none;
  border-radius: var(--raio-botao);
  cursor: pointer;
}

#form-lead button[type="submit"]:hover { filter: brightness(1.08); }
#form-lead button[type="submit"]:focus-visible {
  outline: 2px solid var(--cor-branco);
  outline-offset: 2px;
}

/* ===== Mensagens de resposta (htmx troca #form-lead por estas) ===== */
.lead-resultado {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}
.lead-resultado p { color: var(--cor-cinza-claro); }
.lead-erro p:first-child { color: var(--cor-alerta); font-weight: var(--peso-medium); }

/* ===== Acessibilidade: respeita quem pediu menos movimento ===== */
/* Cobre animações/transições CSS. O logo usa SMIL e NÃO é alcançado por
   esta media query — o gating do SMIL é tratado à parte (ver report). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}