/* home.css: estilos da home nova (dono: L3, casca e home; 24/10/2026).
   Carregado pelo head.html só em page.url == "/". Só var(--ra-*) de ra-tokens.css; nenhum hex.
   Celular primeiro; quebra em 768 px. Sem imagem acima da dobra no celular. */

.ra-home .container { max-width: 1040px; }

/* Hero: H1, subtítulo, 2 CTAs e o microtexto "O que acontece depois" */
.ra-home-hero {
  margin-top: 72px; /* cabeçalho fixo */
  padding: 2rem 0 2.25rem;
  background: var(--ra-superficie);
  border-top: 4px solid var(--ra-dourado);
  border-bottom: 1px solid var(--ra-gray-200);
}
.ra-home-hero__titulo {
  margin: 0 0 0.875rem;
  max-width: 18ch;
  color: var(--ra-azul);
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ra-home-hero__sub { margin: 0 0 1.5rem; max-width: 40rem; color: var(--ra-gray-700); }
.ra-home-hero__ctas { display: flex; flex-direction: column; gap: 0.75rem; }
.ra-home-hero__ctas .cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 52px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--ra-raio-botao);
  font-size: 1.0625rem;
  text-align: center;
}
/* Secundário: WhatsApp com contorno verde escuro (tokens de WhatsApp com contraste) */
.ra-home-hero__ctas .cta-button.whatsapp-btn {
  background: transparent;
  color: var(--ra-whatsapp-texto);
  border: 2px solid var(--ra-whatsapp-borda);
}
.ra-home-hero__ctas .cta-button.whatsapp-btn:hover {
  background: var(--ra-whatsapp-fundo);
  color: var(--ra-whatsapp-fundo-texto);
}
.ra-home-hero__depois { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--ra-gray-700); }
.ra-home-hero__depois-rotulo { margin: 0; font-weight: 600; color: var(--ra-gray-800); }

/* Seções */
.ra-home-secao { padding: 2.25rem 0; }
.ra-home-secao--alt { background: var(--ra-tinta-azul-2); }
.ra-home-secao__titulo {
  margin: 0 0 1rem;
  color: var(--ra-azul);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
}
.ra-home-secao .ra-como, .ra-home-secao .ra-faq { margin: 0; }
.ra-home .ra-como__titulo, .ra-home .ra-faq__titulo { font-size: 1.5rem; line-height: 1.25; }
/* cartões de área um pouco mais largos na home: o nome não encosta na seta */
@media (min-width: 768px) { .ra-home .ra-areas { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } }
.ra-home-mais { margin: 0.5rem 0 0; }
.ra-home-mais a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ra-azul-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ra-home-mais a:hover { color: var(--ra-azul); }

/* O que somos / O que não somos */
.ra-home-somos { display: grid; gap: 1rem; }
.ra-home-somos__bloco {
  padding: 1.25rem 1rem;
  background: var(--ra-superficie);
  border: 1px solid var(--ra-gray-200);
  border-radius: var(--ra-raio-card);
}
.ra-home-somos__bloco .ra-home-secao__titulo { font-size: 1.25rem; margin-bottom: 0.75rem; }
.ra-home-somos__bloco ul { margin: 0; padding-left: 1.25rem; }
.ra-home-somos__bloco li + li { margin-top: 0.5rem; }
.ra-home-somos__bloco--nao { background: var(--ra-dourado-claro); border-color: var(--ra-dourado); }

@media (min-width: 768px) {
  .ra-home-hero { padding: 4rem 0; }
  .ra-home-hero__titulo { font-size: 3rem; }
  .ra-home-hero__sub { font-size: 1.125rem; }
  .ra-home-hero__ctas { flex-direction: row; flex-wrap: wrap; }
  .ra-home-hero__ctas .cta-button { min-width: 15rem; }
  .ra-home-secao { padding: 3.5rem 0; }
  .ra-home-secao__titulo, .ra-home .ra-como__titulo, .ra-home .ra-faq__titulo { font-size: 1.875rem; }
  .ra-home-somos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .ra-home-somos__bloco { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-home .cta-button { transition: none; }
  .ra-home .cta-button:hover { transform: none; }
}