/* ============================================================
   Minimart 24hrs — tema compartilhado das páginas de apoio.
   Mesmos tokens do index.html. Leis de contraste medidas:
     ink sobre cyan = 10.07:1 OK · branco sobre cyan = 2.08:1 PROIBIDO
     cyan sobre paper = 1.92:1 PROIBIDO (superfície, nunca tinta)
   ============================================================ */
:root{
  --cyan: oklch(0.7600 0.1524 230.5);
  --ink: oklch(0.1452 0.0021 286.1);
  --ink-soft: oklch(0.3600 0.0090 250.0);
  --paper: oklch(0.9719 0.0025 228.8);
  --paper-2: oklch(0.9380 0.0040 228.0);
  --hairline: color-mix(in oklch, var(--ink) 14%, transparent);
  --hairline-2: color-mix(in oklch, var(--ink) 26%, transparent);

  --display:'Quicksand', ui-rounded,'Trebuchet MS',sans-serif;
  --body:'Archivo','Helvetica Neue',Helvetica,sans-serif;

  --t-h1: clamp(2.25rem,1.3rem + 4vw,4rem);
  --t-h2: clamp(1.6rem,1.1rem + 2vw,2.4rem);
  --t-h3: clamp(1.2rem,1.05rem + .6vw,1.5rem);
  --t-lead: clamp(1.05rem,.98rem + .35vw,1.25rem);
  --t-sm:.875rem; --t-label:.75rem;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px;
  --r-xs:4px; --r-sm:8px; --r-md:16px; --r-lg:24px; --r-full:9999px;
  --e-out:cubic-bezier(0.22,1,0.36,1); --d-fast:160ms;
  --wrap:1360px; --pad:clamp(16px,3.2vw,52px);
  --z-sticky:30;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; color-scheme:light; scroll-padding-top:96px; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:1rem; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  touch-action:manipulation; min-height:100dvh;
  display:flex; flex-direction:column;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.1;
  letter-spacing:-0.03em; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:var(--r-xs); }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
main{ position:relative; z-index:1; flex:1 0 auto; }

/* ---------- header ---------- */
.hdr{ position:sticky; top:0; z-index:var(--z-sticky);
  background:color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--hairline); }
.hdr-in{ display:flex; align-items:center; gap:var(--s2); min-height:68px; }
.hdr-in > *{ min-width:0; }
.brand{ display:inline-flex; align-items:center; gap:var(--s1); text-decoration:none;
  margin-right:auto; background:var(--ink); color:var(--paper);
  border-radius:var(--r-full); padding:8px var(--s2) 8px 10px; }
.brand-mark{ width:30px; height:30px; flex:none; }
.brand-txt{ font-family:var(--display); font-weight:700; font-size:1.15rem;
  letter-spacing:-0.02em; line-height:1; white-space:nowrap; }
.brand-txt span{ color:var(--cyan); }
.brand-sfx{ font-family:var(--body); font-size:.5rem; font-weight:700; font-style:normal;
  letter-spacing:.08em; vertical-align:super;
  color:color-mix(in oklch, var(--paper) 70%, transparent); }
@media (max-width:520px){
  .brand{ padding:6px 12px 6px 8px; gap:6px; }
  .brand-mark{ width:26px; height:26px; } .brand-txt{ font-size:1rem; }
}

/* ---------- botões ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s1);
  font-family:var(--body); font-weight:600; font-size:var(--t-sm);
  padding:12px var(--s3); border-radius:var(--r-full);
  border:1px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out),
             color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out); }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--ink); color:var(--cyan); }
.btn-primary:hover{ background:var(--cyan); color:var(--ink); }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--hairline-2); }
.btn-line:hover{ background:var(--ink); color:var(--cyan); border-color:var(--ink); }
.btn-lg{ font-size:1rem; padding:16px var(--s4); }

/* ---------- fita da marca ----------
   Padrão abstrato virava ruído ou bandeirinha. Fita com o próprio wordmark
   é inequívoca: lê como fita de embalagem da marca, não como enfeite.      */
.hero-rail, .rail{
  background:var(--ink); overflow:hidden; height:52px;
  display:flex; align-items:center; border-block:2px solid var(--ink);
  margin-block:var(--s4);
}
.rail-in{
  display:flex; align-items:center; gap:var(--s3);
  white-space:nowrap; width:max-content;
  animation:rail 46s linear infinite;
}
.rail-in .dup{ display:flex; align-items:center; gap:var(--s3); }
.rail-in span{
  font-family:var(--display); font-weight:700; font-size:.9rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
}
.rail-in svg{ width:24px; height:24px; flex:none; }
@keyframes rail{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce){ .rail-in{ animation:none; } }
@media (max-width:640px){
  .hero-rail, .rail{ height:44px; }
  .rail-in span{ font-size:.8rem; letter-spacing:.12em; }
  .rail-in svg{ width:20px; height:20px; }
}

/* ---------- rodapé ---------- */
.ft{ background:var(--ink); color:var(--paper); position:relative; z-index:1; margin-top:var(--s8); }
.ft-in{ display:grid; gap:var(--s6); padding-block:var(--s8); }
@media (min-width:900px){ .ft-in{ grid-template-columns:5fr 3fr 4fr; gap:var(--s8); } }
.ft h4{ font-size:var(--t-sm); letter-spacing:.1em; text-transform:uppercase;
  font-family:var(--body); font-weight:700; color:var(--cyan); margin:0 0 var(--s2); }
.ft a{ color:var(--paper); text-decoration:none; }
.ft a:hover{ color:var(--cyan); text-decoration:underline; }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s1); font-size:var(--t-sm); }
.ft-brand{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-0.02em; }
.ft-brand span{ color:var(--cyan); }
.ft .legal{ border-top:1px solid color-mix(in oklch, var(--paper) 20%, transparent);
  padding-block:var(--s3); padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));
  font-size:.75rem; color:color-mix(in oklch, var(--paper) 66%, transparent);
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); justify-content:space-between; }

/* ---------- conteúdo de texto longo ---------- */
.doc{ padding-block:var(--s8); }
.doc-head{ max-width:60ch; }
.doc-head h1{ font-size:var(--t-h1); }
.doc-head .meta{ margin-top:var(--s2); font-size:var(--t-sm); color:var(--ink-soft); }
.doc-body{ margin-top:var(--s8); max-width:72ch; display:grid; gap:var(--s6); }
.doc-body h2{ font-size:var(--t-h2); padding-top:var(--s3); border-top:2px solid var(--ink); }
.doc-body h3{ font-size:var(--t-h3); margin-top:var(--s3); }
.doc-body p, .doc-body li{ color:var(--ink-soft); max-width:70ch; }
.doc-body p + p{ margin-top:var(--s2); }
.doc-body ul{ margin:var(--s2) 0 0; padding-left:1.15em; display:grid; gap:8px; }
.doc-body a{ font-weight:600; color:var(--ink); }
.doc-body section{ display:grid; gap:var(--s2); }
.callout{ background:var(--ink); color:var(--paper); border-radius:var(--r-md);
  padding:var(--s4); display:grid; gap:var(--s2); }
.callout h3{ color:var(--paper); }
.callout p{ color:color-mix(in oklch, var(--paper) 80%, transparent); }
.callout a{ color:var(--cyan); font-weight:600; }

/* ---------- páginas centradas (404 / obrigado) ---------- */
.center{ display:grid; place-items:center; padding-block:var(--s12); text-align:left; }
.center-in{ max-width:60ch; display:grid; gap:var(--s3); }
.kicker{ justify-self:start; font-size:var(--t-label); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--hairline-2);
  padding:6px var(--s2); border-radius:var(--r-full); }
.center h1{ font-size:var(--t-h1); }
.center .lead{ font-size:var(--t-lead); color:var(--ink-soft); }
.actions{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2); }
.steps{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:var(--s2); }
.steps li{ display:flex; gap:var(--s2); align-items:flex-start;
  padding:var(--s3); border:1px solid var(--hairline-2); border-radius:var(--r-md); }
.steps b{ font-family:var(--display); background:var(--cyan); color:var(--ink);
  width:32px; height:32px; border-radius:var(--r-full); flex:none;
  display:grid; place-content:center; font-size:.95rem; }
.steps span{ font-size:var(--t-sm); color:var(--ink-soft); }
.steps strong{ display:block; color:var(--ink); font-size:1rem; margin-bottom:2px; }

@media (prefers-reduced-motion: reduce){
  .rail i{ animation:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* rodapé: era <h4> depois de <h2>, pulando nível de heading. Virou <h2>
   com o mesmo peso visual — hierarquia semântica correta, aparência igual. */
.ft .ft-h{ font-size:var(--t-sm); letter-spacing:.1em; text-transform:uppercase;
  font-family:var(--body); font-weight:700; color:var(--cyan); margin:0 0 var(--s2);
  line-height:1.4; }
/* alvo de toque mínimo de 44px em controles isolados (medido: 33px e 42.8px) */
.ticker-btn{ min-height:44px; }
.hdr .btn{ min-height:44px; }
/* links inline de rodapé tinham 15px de caixa: padding dá área clicável real */
.ft ul a{ display:inline-flex; align-items:center; min-height:44px; }
.ft .legal a{ display:inline-flex; align-items:center; min-height:44px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }