/*
   shopilot.css — páginas públicas do Shopilot (shopilot.matheusmorais.com).
   Início, termos e privacidade: o TikTok exige as três URLs para
   registrar o app. Identidade própria, separada do portfólio; usa só a
   fonte do site (fonts.css). Tema segue o sistema, sem JS.
   */

:root{
  color-scheme:light dark;
  --paper:#fbf8f4;
  --wash:#f3ede5;
  --ink:#1c1712;     /* 16:1 sobre o papel */
  --slate:#4f463d;   /* 8.6:1 */
  --quiet:#6b6158;   /* 5.6:1 */
  --rule:#e4dbd0;
  --accent:#b8401f;  /* 5.4:1 */
  --on-accent:#ffffff;
  --font:'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maxw:720px;
  --gut:clamp(1rem, 4vw, 2rem);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#16120e;
    --wash:#201a14;
    --ink:#f2ebe3;   /* 15:1 */
    --slate:#c4b8aa; /* 9:1 */
    --quiet:#a09487; /* 6.2:1 */
    --rule:#33291f;
    --accent:#ff8a63; /* 7.6:1 */
    --on-accent:#16120e;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.0625rem/1.65 var(--font);
}
a{ color:var(--accent); text-underline-offset:.18em; }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; padding:.5rem 1rem; background:var(--ink); color:var(--paper); z-index:10; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }

/* topo */
.top{ border-bottom:1px solid var(--rule); }
.top__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:60px; }
.brand{ font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.brand span{ color:var(--accent); }
.top nav{ display:flex; gap:1.25rem; font-size:.95rem; }
.top nav a{ color:var(--slate); text-decoration:none; }
.top nav a:hover, .top nav a[aria-current="page"]{ color:var(--ink); text-decoration:underline; }

/* início */
.hero{ padding:clamp(3rem, 10vw, 6rem) 0 2.5rem; }
.tag{
  display:inline-block; margin:0 0 1rem; padding:.2rem .7rem;
  border:1px solid var(--rule); border-radius:99px;
  font-size:.85rem; color:var(--slate);
}
.hero h1{ margin:0 0 1rem; font-size:clamp(2rem, 6vw, 3rem); line-height:1.1; letter-spacing:-.03em; font-weight:800; }
.hero p{ margin:0; font-size:1.15rem; color:var(--slate); max-width:36em; }

.steps{ list-style:none; margin:0; padding:0 0 3rem; display:grid; gap:1rem; counter-reset:passo; }
.steps li{
  counter-increment:passo;
  padding:1.1rem 1.25rem 1.1rem 3.5rem; position:relative;
  background:var(--wash); border-radius:8px;
}
.steps li::before{
  content:counter(passo); position:absolute; left:1.25rem; top:1.05rem;
  font-weight:800; color:var(--accent);
}
.steps strong{ display:block; }
.steps span{ color:var(--slate); }

/* documentos */
.doc{ padding:clamp(2rem, 7vw, 4rem) 0 3rem; }
.doc h1{ margin:0 0 .25rem; font-size:clamp(1.75rem, 5vw, 2.4rem); line-height:1.15; letter-spacing:-.02em; font-weight:800; }
.doc .data{ margin:0 0 2rem; color:var(--quiet); font-size:.95rem; }
.doc h2{ margin:2.25rem 0 .5rem; font-size:1.2rem; letter-spacing:-.01em; }
.doc p, .doc ul{ margin:0 0 1rem; }
.doc ul{ padding-left:1.25rem; }
.doc li{ margin-bottom:.35rem; }
.doc table{ width:100%; border-collapse:collapse; margin:0 0 1rem; font-size:.95rem; }
.doc th, .doc td{ text-align:left; vertical-align:top; padding:.55rem .6rem; border-bottom:1px solid var(--rule); }
.doc th{ color:var(--slate); font-weight:600; }
.aviso{ padding:1rem 1.25rem; background:var(--wash); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; }

/* rodapé */
.foot{ border-top:1px solid var(--rule); padding:1.5rem 0 2.5rem; font-size:.9rem; color:var(--quiet); }
.foot p{ margin:0 0 .4rem; }
.foot a{ color:var(--slate); }

@media (max-width:520px){
  .top__in{ flex-direction:column; align-items:flex-start; padding:.75rem 0; gap:.4rem; }
}
@media print{
  .top nav, .skip{ display:none; }
  body{ background:#fff; color:#000; }
}
