/* ══════════════════════════════════════════════════
   Elobra — site comercial (www.elobra.com.br)
   Paleta e tipografia da identidade visual do produto.
   Motivo da marca: o "tijolo" (retângulo arredondado),
   usado nos marcadores de seção, passos e cards.
   ══════════════════════════════════════════════════ */

:root {
  --aco-escuro: #1C2B3A;
  --aco-medio:  #3A6B8A;
  --aco-claro:  #A9C5D8;
  --ambar:      #C8A96E;
  --concreto:   #E8E4DC;
  --offwhite:   #F8F7F4;
  --texto-sec:  #5C6E7E; /* era #6B7B8A; escurecido p/ contraste AA (4.9:1 no off-white) */
  --verde:      #2f7f5a; /* era #3b9c6e; escurecido p/ contraste AA em texto pequeno */
  --vermelho:   #b94a4a;
}

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

/* o atributo hidden vence qualquer display definido aqui
   (sem isto, .campo { display:grid } atropela o hidden) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--offwhite);
  color: var(--aco-escuro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

h1, h2, h3 { line-height: 1.18; font-weight: 700; letter-spacing: -0.02em; }

h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }

a { color: inherit; }

/* ── Marcador de seção: fiada de tijolos + rótulo ── */

.kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin-bottom: 1rem;
}

/* Marcador derivado da logo: duas fiadas em aparelho cruzado (running bond),
   tijolos de tamanhos diferentes, tons de azul do claro ao escuro — sem âmbar.
   Renderizado como SVG de fundo; os <i> do HTML ficam ocultos. */
.tijolos {
  display: inline-block;
  flex: none;
  width: 32px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 21'%3E%3Crect x='0' y='0' width='26' height='9' rx='1.5' fill='%23A9C5D8'/%3E%3Crect x='29' y='0' width='15' height='9' rx='1.5' fill='%233A6B8A'/%3E%3Crect x='0' y='12' width='15' height='9' rx='1.5' fill='%233A6B8A'/%3E%3Crect x='18' y='12' width='26' height='9' rx='1.5' fill='%231C2B3A'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tijolos i { display: none; }

/* ── Botões ─────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primario {
  background: var(--ambar);
  color: var(--aco-escuro);
  padding: 0.95rem 1.9rem;
  font-size: 1.05rem;
}

.btn-primario:hover { background: #b8985a; }

/* ── Topbar ─────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 58px;
  padding: 0 1.25rem;
  background: var(--offwhite);
  border-bottom: 1px solid rgba(28, 43, 58, 0.08);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-icon { width: 24px; height: 24px; }

.logo-wordmark {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.4px;
  color: var(--aco-escuro);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.link-entrar {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--texto-sec);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.link-entrar:hover { color: var(--aco-escuro); }

.btn-topbar {
  background: var(--aco-escuro);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.55rem 1rem;
  border-radius: 6px;
}

.btn-topbar:hover { background: var(--aco-medio); }

/* no celular o CTA continua no topo (a topbar é sticky e acompanha a
   rolagem inteira) — só encolhe para caber ao lado do Entrar */
@media (max-width: 560px) {
  .btn-topbar { font-size: 0.8rem; padding: 0.45rem 0.7rem; }
  .link-entrar { font-size: 0.8rem; padding: 0.5rem 0.4rem; }
  .topbar { padding: 0 1rem; }
}

/* em telas muito estreitas o wordmark sai; ficam o tijolo e os botões */
@media (max-width: 360px) {
  .logo-wordmark { display: none; }
}

/* ── 1. Hero ────────────────────────────────────── */

.hero {
  background-color: var(--aco-escuro);
  /* fiada de tijolos sutil ao fundo (aparelho corrido) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cpath d='M0 0.5 H96 M0 24.5 H96 M48.5 0 V24 M0.5 24 V48 M95.5 24 V48' stroke='%23F8F7F4' stroke-opacity='0.045' fill='none'/%3E%3C/svg%3E");
  color: #fff;
  padding: 4rem 0 4.5rem;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  .hero { padding: 5rem 0 5.5rem; }
}

.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.15rem);
  max-width: 22ch;
}

.hero .destaque { color: var(--ambar); }

.hero-sub {
  margin-top: 1.4rem;
  max-width: 560px;
  font-size: clamp(1.02rem, 2.2vw, 1.15rem);
  color: var(--aco-claro);
}

.hero .btn { margin-top: 2.2rem; }

/* reforço sob o CTA: reduz o custo percebido do clique */
.hero-nota {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--aco-claro);
}

/* janela do app — o produto visto de fora: processo e economia,
   nunca o mecanismo (dados fictícios) */

.janela {
  background: #fff;
  color: var(--aco-escuro);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.janela-chrome {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  background: #EDEAE4;
  border-bottom: 1px solid var(--concreto);
}

.janela-dots { display: inline-flex; gap: 5px; }

.janela-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C9C4BA;
}

.janela-url {
  flex: 1;
  max-width: 220px;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  font-size: 0.68rem;
  color: var(--texto-sec);
  padding: 0.15rem 0.7rem;
  text-align: center;
}

/* espaço fantasma à direita para a url ficar centrada em relação aos dots */
.janela-chrome::after { content: ""; width: 28px; }

.janela-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--concreto);
}

.janela-marca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.2px;
}

.janela-marca svg { width: 15px; height: 15px; }

.janela-obra {
  font-size: 0.72rem;
  color: var(--texto-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.janela-obra strong { color: var(--aco-escuro); }

.janela-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.7rem 1rem 0.25rem;
}

.janela-chip {
  font-size: 0.68rem;
  font-weight: 500;
  border: 1px solid var(--concreto);
  border-radius: 999px;
  background: var(--offwhite);
  padding: 0.14rem 0.55rem;
  white-space: nowrap;
}

.janela-chip strong { color: var(--verde); }

.janela-lista {
  list-style: none;
  padding: 0.35rem 0 0.25rem;
}

.janela-lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
}

.janela-lista li + li { border-top: 1px solid #F0EDE7; }

.jc-compra { min-width: 0; }

.jc-compra strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jc-compra small {
  display: block;
  font-size: 0.66rem;
  color: var(--texto-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jc-status {
  justify-self: start; /* pílulas alinhadas pela esquerda, não centradas na coluna */
  font-size: 0.66rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  white-space: nowrap;
}

.jc-status.ok        { color: var(--verde); background: rgba(47, 127, 90, 0.09); }
.jc-status.agora     { color: #8a6d3b; background: rgba(200, 169, 110, 0.18); }
.jc-status.andamento { color: var(--aco-medio); background: rgba(58, 107, 138, 0.10); }
.jc-status.neutro    { color: var(--texto-sec); background: #F1EFEA; }

.jc-eco {
  min-width: 58px;
  text-align: right;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--verde);
  white-space: nowrap;
}

.jc-eco small {
  display: block;
  font-weight: 500;
  font-size: 0.62rem;
  color: var(--texto-sec);
}

.jc-eco.vazio { color: #C9C4BA; font-weight: 400; }

.painel-legenda {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--aco-claro);
  text-align: center;
}

/* em tela estreita a linha fica de altura única: some o detalhe
   da economia e aperta os espaços para o nome da compra respirar */
@media (max-width: 460px) {
  .jc-eco small { display: none; }
  .janela-lista li { gap: 0.45rem; padding: 0.55rem 0.8rem; }
  .jc-status { font-size: 0.62rem; }
  .janela-obra strong { font-weight: 500; }
}

/* ── 2. O problema ──────────────────────────────── */

.problema { padding: 4rem 0; }

.problema-grid {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
}

@media (min-width: 720px) {
  .problema-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* barrinha-tijolo acima do título: as três colunas repetem as fiadas da
   logo (claro → médio → escuro) */
.prob::before {
  content: "";
  display: block;
  width: 34px;
  height: 8px;
  border-radius: 2px;
  background: var(--aco-claro);
  margin-bottom: 0.8rem;
}

.problema-grid .prob:nth-child(2)::before { background: var(--aco-medio); }
.problema-grid .prob:nth-child(3)::before { background: var(--aco-escuro); }

.prob-lead {
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.prob p:last-child { color: var(--texto-sec); max-width: 30ch; }

/* ── 3. Como funciona ───────────────────────────── */

.passos {
  background: #fff;
  border-top: 1px solid var(--concreto);
  border-bottom: 1px solid var(--concreto);
  padding: 4rem 0 4.5rem;
}

.passos-lista {
  list-style: none;
  display: grid;
  gap: 2.5rem;
  margin-top: 2.25rem;
}

@media (min-width: 720px) {
  .passos-lista { grid-template-columns: repeat(3, 1fr); }
}

/* número do passo em formato de tijolo, nas cores da marca */
.passo-tijolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 30px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.passo-tijolo.t1 { background: var(--aco-claro); color: var(--aco-escuro); }
.passo-tijolo.t2 { background: var(--aco-medio); color: #fff; }
.passo-tijolo.t3 { background: var(--aco-escuro); color: #fff; }

/* coluna flex: a caixinha (.mini) desce até a base e alinha entre os 3 passos,
   mesmo quando as descrições têm alturas diferentes */
.passos-lista li { display: flex; flex-direction: column; }

.passos-lista h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }

.passos-lista li > p { color: var(--texto-sec); max-width: 40ch; margin-bottom: 1rem; }

/* mini-artefato: um pedacinho concreto da tela em cada passo */
.mini {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.65rem 0.75rem;
  background: var(--offwhite);
  border: 1px solid var(--concreto);
  border-radius: 8px;
}

.mini-chip {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--aco-escuro);
  background: #fff;
  border: 1px solid var(--concreto);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  white-space: nowrap;
}

.mini-chip.ok {
  color: var(--verde);
  border-color: rgba(59, 156, 110, 0.35);
  background: rgba(59, 156, 110, 0.07);
  font-weight: 700;
}

.mini-seta { color: var(--texto-sec); font-size: 0.85rem; }

/* ── 4. Por que Elobra ──────────────────────────── */

.porque { padding: 4rem 0 4.5rem; }

.cards {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--concreto);
  border-radius: 10px;
  padding: 1.75rem;
}

.card-tijolo {
  display: block;
  width: 44px;
  height: 12px;
  border-radius: 3px;
  margin-bottom: 1.1rem;
}

.tj-claro  { background: var(--aco-claro); }
.tj-medio  { background: var(--aco-medio); }
.tj-escuro { background: var(--aco-escuro); }

.card h3 { font-size: 1.12rem; margin-bottom: 0.6rem; }

.card p { color: var(--texto-sec); font-size: 0.97rem; }

/* ── 5. Para quem ───────────────────────────────── */

.paraquem {
  background: var(--concreto);
  padding: 3.25rem 0;
  text-align: center;
}

.paraquem p {
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 500;
  line-height: 1.45;
  max-width: 36ch;
  margin: 0 auto;
}

/* ── 6. Perguntas diretas ───────────────────────── */

.faq { padding: 4rem 0 4.25rem; }

.faq-lista { max-width: 720px; margin-top: 0.5rem; }

.faq-item { padding: 1.15rem 0; border-bottom: 1px solid var(--concreto); }

.faq-item:last-child { border-bottom: none; padding-bottom: 0; }

.faq-item h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }

.faq-item p { color: var(--texto-sec); max-width: 62ch; }

/* ── 7. Chamada final (página principal) ────────── */

.cta-final {
  background-color: var(--aco-escuro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cpath d='M0 0.5 H96 M0 24.5 H96 M48.5 0 V24 M0.5 24 V48 M95.5 24 V48' stroke='%23F8F7F4' stroke-opacity='0.045' fill='none'/%3E%3C/svg%3E");
  color: #fff;
  padding: 4.5rem 0 5rem;
  text-align: center;
}

.cta-final p {
  margin: 0.8rem auto 2rem;
  max-width: 46ch;
  color: var(--aco-claro);
}

/* ── Página /agendar ────────────────────────────── */

.agendar {
  min-height: calc(100vh - 58px);
  display: flex;
  align-items: center;
  background-color: var(--aco-escuro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cpath d='M0 0.5 H96 M0 24.5 H96 M48.5 0 V24 M0.5 24 V48 M95.5 24 V48' stroke='%23F8F7F4' stroke-opacity='0.045' fill='none'/%3E%3C/svg%3E");
  color: #fff;
  padding: 2.5rem 0 3rem;
}

.agendar .wrap { width: 100%; }

.form-card {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 2rem;
}

.form-card h1 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  text-align: center;
}

.agendar-sub {
  margin: 0.5rem auto 0;
  max-width: 44ch;
  text-align: center;
  color: var(--aco-claro);
  font-size: 0.95rem;
}

.expectativas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.4rem;
  margin: 0.9rem auto 0;
  font-size: 0.86rem;
  color: var(--aco-claro);
}

.expectativas li::before {
  content: "✓";
  color: var(--ambar);
  font-weight: 700;
  margin-right: 0.4rem;
}

#lead-form {
  margin-top: 1.6rem;
  display: grid;
  gap: 1rem;
}

.form-grade { display: grid; gap: 1rem; }

@media (min-width: 640px) {
  .form-grade { grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
  .campo-largo { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .form-card { padding: 1.5rem 1.25rem; }
}

.campo { display: grid; gap: 0.35rem; }

.campo label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--aco-claro);
}

.campo input,
.campo select {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: #fff;
  color: var(--aco-escuro);
  font: inherit;
  font-size: 1rem;
}

.campo select:invalid { color: var(--texto-sec); }

.campo input:focus-visible,
.campo select:focus-visible,
.btn:focus-visible,
.link-entrar:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}

.campo input::placeholder { color: var(--texto-sec); opacity: 0.7; }

/* honeypot fora da tela — não usar display:none, robôs detectam */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn-enviar { width: 100%; margin-top: 0.4rem; }

.btn-enviar:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.consent {
  font-size: 0.85rem;
  color: var(--aco-claro);
  text-align: center;
}

.form-msg {
  padding: 1rem 1.2rem;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
}

.form-sucesso {
  background: rgba(59, 156, 110, 0.16);
  border: 1px solid var(--verde);
  color: #cdebdb;
  font-size: 1.05rem;
}

.form-sucesso .voltar {
  display: inline-block;
  margin-top: 0.6rem;
  color: #fff;
  font-weight: 700;
}

.form-erro {
  background: rgba(185, 74, 74, 0.16);
  border: 1px solid var(--vermelho);
  color: #f2d3d3;
}

.form-erro a { color: #fff; }

/* ── 7. Footer ──────────────────────────────────── */

.footer {
  background: #16222E;
  color: var(--aco-claro);
  padding: 2.5rem 0;
  font-size: 0.9rem;
}

.footer .wrap { display: grid; gap: 0.45rem; }

.footer-marca { font-weight: 700; font-size: 1.05rem; color: #fff; }

.footer a {
  color: var(--aco-claro);
  text-decoration: none;
}

.footer a:hover { color: #fff; text-decoration: underline; }

.footer-docs, .footer-legal { color: var(--texto-sec); }

/* links de documentos no rodapé precisam se destacar do cinza-apagado */
.footer-docs a { color: var(--aco-claro); }

.footer-copy { color: var(--texto-sec); margin-top: 0.75rem; }

/* ── Páginas legais (/termos, /privacidade) ──────── */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
}

.legal-doc .kicker { margin-bottom: 0.9rem; }

.legal-doc h1 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.2;
  text-wrap: balance;
}

.legal-versao {
  margin-top: 0.5rem;
  color: var(--texto-sec);
  font-size: 0.92rem;
}

.legal-doc h2 {
  font-size: 1.12rem;
  margin: 2.4rem 0 0.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--concreto);
  letter-spacing: -0.01em;
}

/* o primeiro h2 não precisa de traço acima (vem logo após a versão) */
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1.8rem; }

.legal-doc p {
  margin-top: 0.7rem;
  color: #3a4a5a;
  max-width: 68ch;
  font-size: 0.98rem;
}

.legal-doc .alineas {
  list-style: none;
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
  max-width: 68ch;
}

.legal-doc .alineas li {
  position: relative;
  color: #3a4a5a;
  font-size: 0.98rem;
  padding-left: 0.3rem;
}

.legal-doc .alineas li::before {
  content: "";
  position: absolute;
  left: -0.8rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--ambar);
}

.legal-rodape-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--concreto);
  font-weight: 500;
  font-size: 0.95rem;
}

.legal-rodape-nav a { color: var(--aco-medio); text-decoration: none; }
.legal-rodape-nav a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .legal { padding: 2rem 1.1rem 3rem; }
  .legal-doc h2 { font-size: 1.05rem; }
}