/* EuVendo X — landing page. Identidade visual alinhada ao app: Archivo,
   sacola+X em laranja/âmbar, semáforo de cores para status de cobrança. */

:root{
  --bg:#FFF8F1; --surface:#FFFFFF; --surface-sunken:#FFF1E2;
  --border:#FBE1C0; --border-strong:#F6CE9B;
  --ink:#35291C; --ink-soft:#7C6A58; --ink-faint:#A8927B;
  --accent:#F97316; --accent-deep:#EA580C; --accent-soft:#FFEDD5;
  --verde:#16A34A; --verde-soft:#DCFCE7;
  --amarelo:#D97706; --amarelo-soft:#FEF3C7;
  --vermelho:#DC2626; --vermelho-soft:#FEE2E2;
  --shadow-sm: 0 1px 2px rgba(53,41,28,.04);
  --shadow-md: 0 8px 24px rgba(53,41,28,.08);
  --shadow-lg: 0 24px 60px -12px rgba(53,41,28,.18);
}
/* Landing sempre clara (2026-09-11): a pagina publica nao segue mais o
   prefers-color-scheme do visitante — marca pede branco/laranja/caramelo
   consistente pra todo mundo, sem depender do SO. O tema escuro fica so
   como opt-in manual via [data-theme="dark"], caso algum dia haja um
   alternador na propria pagina; hoje nenhum JS aciona esse atributo. */
:root[data-theme="dark"]{
  --bg:#241A10; --surface:#2E2213; --surface-sunken:#362811;
  --border:#4A3618; --border-strong:#5E4318;
  --ink:#FBEEE0; --ink-soft:#D1BBA0; --ink-faint:#9C876E;
  --accent:#FB923C; --accent-deep:#F97316; --accent-soft:#4A2C12;
  --verde:#4ADE80; --verde-soft:#0F3324;
  --amarelo:#FBBF24; --amarelo-soft:#3A2C08;
  --vermelho:#F87171; --vermelho-soft:#3B1414;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.55);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *{ animation-duration:.001ms !important; transition-duration:.001ms !important } }

body{
  font-family:"Archivo",system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  font-variant-numeric:tabular-nums;
  line-height:1.5;
}
::selection{ background:var(--accent); color:#fff }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }
p{ max-width:68ch }

.wrap{ max-width:1160px; margin-inline:auto; padding-inline:20px }
@media (min-width:820px){ .wrap{ padding-inline:40px } }
section{ padding-block:64px }
@media (min-width:820px){ section{ padding-block:96px } }

.eyebrow{
  font-family:"Archivo Narrow",sans-serif; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; font-size:.78rem; color:var(--accent-deep);
}
h1,h2,h3{ font-family:"Archivo",sans-serif; font-weight:800; color:var(--ink); text-wrap:balance }
h1{ font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.08; letter-spacing:-.01em }
h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.15; margin-bottom:8px }
h3{ font-size:1.1rem; font-weight:700 }
.lead{ font-size:1.08rem; color:var(--ink-soft); line-height:1.6 }
.diz{ font-size:.98rem; color:var(--ink-soft); line-height:1.6 }
.mini{ font-size:.82rem; color:var(--ink-faint) }

/* A lacuna do X: largura travada para a linha nunca refluir. */
.slot{
  display:inline-block; text-align:left; color:var(--accent-deep);
  border-bottom:4px solid var(--accent); padding-bottom:1px;
}
.regua{ position:absolute; visibility:hidden; white-space:pre; font-size:clamp(2.1rem,5vw,3.4rem); font-weight:800 }

/* Header */
.topo{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; border-bottom:1px solid var(--border); padding-block:18px;
}
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none }
.marca .bag{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
}
.marca .word{ font-weight:800; font-size:1.08rem; color:var(--ink); display:flex; align-items:center }
.marca .x{
  margin-left:.15em; padding:0 .32em; border-radius:.3em;
  background:var(--accent-soft); color:var(--accent-deep);
}
.menu{ display:flex; gap:26px; order:3; flex-basis:100%; }
@media (min-width:820px){ .menu{ order:0; flex-basis:auto } }
.menu a{ font-size:.92rem; font-weight:600; color:var(--ink-soft); text-decoration:none }
.menu a:hover{ color:var(--ink) }
.entrar{
  font-size:.9rem; font-weight:700; color:var(--ink); text-decoration:none;
  padding:9px 18px; border:1.5px solid var(--border-strong); border-radius:10px;
}
.entrar:hover{ border-color:var(--accent); color:var(--accent-deep) }

/* Botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#fff; text-decoration:none; font-weight:700; font-size:1rem;
  padding:14px 26px; border-radius:12px; border:none;
  box-shadow:var(--shadow-md);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg) }
.btn.larga{ display:flex; width:100% }
@media (min-width:560px){ .btn.larga{ display:inline-flex; width:auto } }
.btn-vazio{ background:var(--surface); color:var(--accent-deep); border:1.5px solid var(--border-strong); box-shadow:none }
.btn-vazio:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm) }

/* Hero */
.heroi{ padding-top:56px }
@media (min-width:820px){ .heroi{ padding-top:88px } }
.heroi .lead{ font-size:1.15rem; max-width:34ch; margin-top:18px }
.acao{ margin-top:26px; display:flex; flex-wrap:wrap; gap:16px; align-items:center }
.corpo-heroi{ display:grid; gap:48px; margin-top:8px }
@media (min-width:1040px){
  .corpo-heroi{ grid-template-columns:minmax(22rem,1fr) minmax(0,27rem); gap:56px; align-items:start; margin-top:20px }
}

/* Cartão de demonstração (recebimentos com semáforo) */
.demo{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.demo-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border); background:var(--surface-sunken);
}
.demo-head span{ font-family:"Archivo Narrow",sans-serif; font-weight:600; font-size:.82rem; color:var(--ink-soft); letter-spacing:.03em }
.demo-badge{
  font-family:"Archivo Narrow",sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  color:var(--verde); background:var(--verde-soft); padding:3px 10px; border-radius:999px;
}
.demo-badge.armado{ opacity:0; transform:scale(.7) }
.demo-badge.pousou{ animation:pousa .45s cubic-bezier(.16,1,.3,1) forwards }
@keyframes pousa{ to{ opacity:1; transform:scale(1) } }
.linha{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center;
  padding:13px 20px; border-bottom:1px solid var(--border); font-size:.94rem;
}
.linha:last-child{ border-bottom:none }
.linha .dot{ width:9px; height:9px; border-radius:50%; background:var(--verde) }
.linha.atrasou .dot{ background:var(--vermelho) }
.linha .nome{ font-weight:600; color:var(--ink) }
.linha .qdo{ font-family:"Archivo Narrow",sans-serif; font-size:.82rem; color:var(--ink-faint) }
.linha .val{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums }
.linha.atrasou .val{ color:var(--vermelho) }
.exemplo{ padding:12px 20px 0; font-size:.78rem; color:var(--ink-faint) }
.saida{ margin-top:18px; font-size:.94rem; color:var(--ink-soft); max-width:46ch }
.saida b{ color:var(--ink); font-weight:700 }

/* Passos */
.passos{ margin-top:36px; display:grid; gap:32px }
@media (min-width:820px){ .passos{ grid-template-columns:repeat(3,1fr); gap:36px } }
.passo{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start }
.passo .n{
  font-weight:800; font-size:1.7rem; color:var(--accent);
  width:46px; height:46px; border-radius:12px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.passo h3{ margin-bottom:6px }

/* Funcionalidades */
.entradas{ margin-top:32px; display:grid; gap:16px }
@media (min-width:640px){ .entradas{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .entradas{ grid-template-columns:repeat(3,1fr) } }
.entrada{
  padding:22px; border:1px solid var(--border); border-radius:14px; background:var(--surface);
}
.entrada h3{ margin-bottom:8px }
.entrada p{ font-size:.92rem; color:var(--ink-soft) }

/* Preços */
.precos{ margin-top:32px; display:grid; gap:20px }
@media (min-width:700px){ .precos{ grid-template-columns:repeat(2,minmax(0,25rem)) } }
.talao{
  border:1px solid var(--border); border-radius:18px; padding:32px 26px;
  background:var(--surface); box-shadow:var(--shadow-sm); position:relative;
}
.talao.marcado{ border:2px solid var(--accent); box-shadow:var(--shadow-md) }
.talao.marcado::before{
  content:"Mais escolhido"; position:absolute; top:-13px; left:26px;
  font-family:"Archivo Narrow",sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--accent-deep); padding:4px 12px; border-radius:999px;
}
.talao .qto{ font-weight:800; font-size:2.4rem; color:var(--ink); margin-top:14px; line-height:1.2 }
.talao .qto small{ font-size:.9rem; font-weight:600; color:var(--ink-soft) }
.talao .antes{ font-size:.86rem; color:var(--ink-faint); margin-top:2px }
.talao ul{ list-style:none; margin-block:22px; display:grid; gap:11px }
.talao li{ display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:.92rem; color:var(--ink-soft); align-items:start }
.talao li svg{ margin-top:3px; flex-shrink:0 }
.rodape-preco{ font-size:.82rem; color:var(--ink-faint); margin-top:22px; max-width:60ch }

/* Fechamento e rodapé */
.fecha{
  margin-top:16px; padding-block:64px; border-top:1px solid var(--border);
  background:var(--surface-sunken); border-radius:24px;
  padding-inline:32px; text-align:center;
}
.fecha .lead{ margin:16px auto 0; max-width:44ch }
.fecha .acao{ justify-content:center }
.rodape{ margin-top:24px; padding-block:32px; border-top:1px solid var(--border) }
.rodape-topo{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px }
.rodape nav{ display:flex; flex-wrap:wrap; gap:4px 22px }
.rodape a{ color:var(--ink-soft); text-decoration:none; font-size:.9rem }
.rodape a:hover{ color:var(--accent-deep) }
.rodape .legal{ color:var(--ink-faint); font-size:.82rem; margin-top:18px }