/* Landing do Dominium. Identidade da apresentação comercial (petróleo + jade, Fraunces + IBM Plex).
   Cores, raios e espaços só por variável do :root, com nome por papel. Tema único de propósito:
   é peça de marca, não muda com o modo claro/escuro do aparelho. */
:root {
  --cor-fundo: #0B1F1D;
  --cor-fundo-fundo: #050D0C;
  --cor-superficie: #12302C;
  --cor-borda: #1A423C;
  --cor-acao: #35C79A;
  --cor-acao-suave: #1E5E4C;
  --cor-acao-clara: #7FD8BC;
  --cor-faixa-clara: #EFEBE1;
  --cor-cartao-claro: #E3DED1;
  --cor-borda-clara: #CFC8B8;
  --cor-texto-claro: #EFEBE1;
  --cor-texto-escuro: #0A1917;
  --cor-texto-suave: #9FB0AA;
  --cor-texto-suave-escuro: #5E706B;
  --cor-falha: #F08A7E;

  --fonte-titulo: Fraunces, ui-serif, Georgia, serif;
  --fonte-texto: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, monospace;

  --raio: 10px;
  --raio-pequeno: 6px;
  --lateral: clamp(16px, 5vw, 64px);
  --largura: 1120px;
  --faixa: clamp(56px, 9vw, 112px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto-claro);
  font-family: var(--fonte-texto);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--cor-acao); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cor-acao);
  outline-offset: 3px;
}

.lp-interno { max-width: var(--largura); margin: 0 auto; padding: 0 var(--lateral); }
.lp-faixa { padding: var(--faixa) 0; }
.lp-faixa--clara { background: var(--cor-faixa-clara); color: var(--cor-texto-escuro); }

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.12; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.02em; max-width: 26ch; }
h3 { font-size: 22px; }
p { margin: 0; }

.lp-sobrancelha {
  font-family: var(--fonte-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-acao);
  margin: 0 0 14px;
}
.lp-faixa--clara .lp-sobrancelha { color: var(--cor-acao-suave); }
.lp-apoio { color: var(--cor-texto-suave); margin-top: 16px; max-width: 62ch; }
.lp-faixa--clara .lp-apoio { color: var(--cor-texto-suave-escuro); }

/* ── Topo ─────────────────────────────────────────── */
.lp-topo {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--cor-fundo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cor-borda);
}
.lp-topo .lp-interno { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.lp-marca { display: flex; align-items: center; gap: 10px; color: var(--cor-texto-claro); text-decoration: none; }
.lp-marca svg { width: 34px; height: 34px; }
.lp-marca span { font-family: var(--fonte-titulo); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.lp-menu { display: flex; gap: 22px; align-items: center; }
.lp-menu a { color: var(--cor-texto-suave); text-decoration: none; font-size: 16px; }
.lp-menu a:hover { color: var(--cor-texto-claro); }
@media (max-width: 760px) { .lp-menu a:not(.lp-botao) { display: none; } }

.lp-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cor-acao); color: var(--cor-fundo) !important;
  font-family: var(--fonte-texto); font-weight: 600; font-size: 16px;
  border: 0; border-radius: var(--raio-pequeno);
  padding: 12px 20px; text-decoration: none; cursor: pointer;
}
.lp-botao:hover { background: var(--cor-acao-clara); }
.lp-botao--contorno { background: transparent; color: var(--cor-texto-claro) !important; border: 1px solid var(--cor-borda); }
.lp-botao--contorno:hover { background: var(--cor-superficie); }

/* ── Capa ─────────────────────────────────────────── */
.lp-capa { position: relative; overflow: hidden; padding: clamp(72px, 12vw, 150px) 0; }
.lp-capa::before {
  content: ""; position: absolute; right: -260px; top: -200px;
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle at 30% 40%, var(--cor-superficie) 0%, var(--cor-fundo) 68%);
  pointer-events: none;
}
.lp-capa .lp-interno { position: relative; }
.lp-assinatura { font-family: var(--fonte-mono); font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cor-acao); }
.lp-slogan { font-size: clamp(40px, 7vw, 76px); letter-spacing: -0.03em; margin-top: 18px; max-width: 14ch; }
.lp-slogan em { font-style: normal; color: var(--cor-acao); }
.lp-capa-texto { color: var(--cor-texto-suave); font-size: clamp(18px, 2.2vw, 21px); margin-top: 24px; max-width: 46ch; }
.lp-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ── Grades e cartões ─────────────────────────────── */
.lp-grade { display: grid; gap: 14px; margin-top: 34px; grid-template-columns: repeat(4, 1fr); }
.lp-grade--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .lp-grade, .lp-grade--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-grade, .lp-grade--3 { grid-template-columns: 1fr; } }

.lp-cartao {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
}
.lp-cartao p { color: var(--cor-texto-suave); font-size: 17px; }
.lp-faixa--clara .lp-cartao { background: var(--cor-cartao-claro); border-color: var(--cor-borda-clara); }
.lp-faixa--clara .lp-cartao p { color: var(--cor-texto-suave-escuro); }
.lp-cartao--destaque { border-color: var(--cor-acao-suave); }
.lp-etiqueta {
  align-self: flex-start; font-family: var(--fonte-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cor-fundo); background: var(--cor-acao); padding: 3px 8px; border-radius: 3px;
}
.lp-sigla {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cor-acao); color: var(--cor-fundo);
  font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700;
}

/* ── A volta ─────────────────────────────────────── */
.lp-volta { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; margin-top: 34px; }
@media (max-width: 860px) { .lp-volta { grid-template-columns: 1fr; } }
.lp-volta figure { margin: 0; }
.lp-volta svg { width: 100%; height: auto; display: block; }
.lp-sentidos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .lp-sentidos { grid-template-columns: 1fr; } }
.lp-sentido-titulo { font-family: var(--fonte-mono); font-size: 13px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cor-acao); margin: 0 0 10px; }
.lp-sentido-titulo--sul { color: var(--cor-acao-clara); }
.lp-paradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-parada {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline;
  padding: 9px 12px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 8px; font-size: 16px;
}
.lp-parada b { font-family: var(--fonte-mono); color: var(--cor-acao); }
.lp-parada span:last-child { font-family: var(--fonte-mono); color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.lp-parada--longe { border-color: var(--cor-acao-suave); }
.lp-parada--longe span:last-child { color: var(--cor-acao); }
.lp-comparativo { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 26px; font-family: var(--fonte-mono); }
.lp-comparativo div { display: flex; flex-direction: column; }
.lp-comparativo strong { font-size: 32px; font-weight: 500; color: var(--cor-acao); font-variant-numeric: tabular-nums; }
.lp-comparativo .lp-antes strong { color: var(--cor-texto-suave); text-decoration: line-through; }
.lp-comparativo small { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor-texto-suave); }

/* ── Integrações ─────────────────────────────────── */
.lp-porta { border: 1px dashed var(--cor-borda); border-radius: var(--raio); padding: 22px; }
.lp-porta strong { font-family: var(--fonte-mono); font-size: 14px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cor-acao); display: block; margin-bottom: 8px; }
.lp-porta p { color: var(--cor-texto-suave); font-size: 17px; }
.lp-convergencia { margin-top: 22px; text-align: center; font-family: var(--fonte-mono); font-size: 14px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cor-texto-suave); }
.lp-convergencia strong { color: var(--cor-acao); font-weight: 600; }

/* ── Estoque ─────────────────────────────────────── */
.lp-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 30px; }
@media (max-width: 860px) { .lp-duas { grid-template-columns: 1fr; } }
.lp-conta { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-conta li {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px;
  background: var(--cor-cartao-claro); border: 1px solid var(--cor-borda-clara); border-radius: 8px;
}
.lp-conta strong { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.lp-conta .lp-perda { border-color: var(--cor-acao-suave); }
.lp-conta .lp-perda strong { color: var(--cor-acao-suave); }
.lp-nota { font-size: 16px; color: var(--cor-texto-suave-escuro); margin-top: 12px; }
.lp-atipico { background: var(--cor-fundo); color: var(--cor-texto-claro); border-radius: var(--raio); padding: 22px; display: grid; gap: 8px; justify-items: start; }
.lp-atipico .lp-nota { color: var(--cor-texto-suave); margin: 0; }
.lp-atipico h3 { font-size: 28px; }

/* ── Código do entregador ────────────────────────── */
.lp-codigo-caixa { border: 1px solid var(--cor-acao-suave); border-radius: var(--raio); padding: 26px; background: var(--cor-superficie); }
.lp-codigo { font-family: var(--fonte-mono); font-size: clamp(30px, 5vw, 42px); font-weight: 600; letter-spacing: 0.16em; margin: 8px 0 14px; }
.lp-marcada { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-marcada li {
  display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 8px; padding: 14px 16px;
}
.lp-marcada li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cor-acao); margin-top: 8px; }

/* ── Contato ─────────────────────────────────────── */
.lp-contato { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .lp-contato { grid-template-columns: 1fr; } }
.lp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-form .lp-largo { grid-column: 1 / -1; }
@media (max-width: 520px) { .lp-form { grid-template-columns: 1fr; } }
.lp-form label { display: grid; gap: 6px; font-size: 15px; color: var(--cor-texto-suave); }
.lp-form input, .lp-form textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--cor-texto-claro);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno);
  padding: 12px 14px;
}
.lp-form textarea { min-height: 110px; resize: vertical; }
.lp-escondido { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-aviso { border-radius: var(--raio-pequeno); padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--cor-acao-suave); background: var(--cor-superficie); }
.lp-aviso--erro { border-color: var(--cor-falha); color: var(--cor-falha); }

/* ── Rodapé ──────────────────────────────────────── */
.lp-rodape { border-top: 1px solid var(--cor-borda); background: var(--cor-fundo-fundo); padding: 28px 0; color: var(--cor-texto-suave); font-size: 15px; }
.lp-rodape .lp-interno { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }