/* Design system "Negócio no Automático" (Tork Studio) — tokens compartilhados entre LP, ebook e PDF.
   Documentação viva: ds/index.html */
@import url("fontes.css");
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  /* cor: basalto (neutros quentes) */
  --basalto-950:#080504; --basalto-900:#0c0705; --basalto-850:#110907; --basalto-800:#160c09; --basalto-700:#24160f;
  --basalto-600:#3a2a22; --basalto-500:#5e4639; --basalto-400:#a39186; --basalto-200:#e2d3c8; --basalto-50:#f7f0ea;
  /* cor: lava (marca) */
  --sangue:#b3121c; --lava:#ff4a00; --magma:#ff8c1a; --brasa:#ffd27a;
  --lava-a10:#ff4a001a; --lava-a20:#ff4a0033; --lava-a40:#ff4a0066;
  /* papel (ebook impresso / páginas claras) */
  --papel:#fbf6f1; --papel-2:#f3e9df; --tinta:#1b100b; --tinta-2:#5b4a40; --linha-papel:#e4d5c8;

  /* semânticos */
  --bg:var(--basalto-950); --bg-2:var(--basalto-850); --bg-3:var(--basalto-800);
  --ink:var(--basalto-50); --soft:var(--basalto-200); --mute:var(--basalto-400); --dim:var(--basalto-500); --line:var(--basalto-700);
  --ok:#3ccf8e; --erro:#ff5a5f;
  --hot:linear-gradient(95deg,var(--sangue),var(--lava) 40%,var(--magma) 70%,var(--brasa));

  /* tipo */
  --display:"Clash Display",system-ui,sans-serif;
  --text:Geist,system-ui,sans-serif;
  --ws-display:.1em; /* espaço da Clash é estreito (0,15em) */
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --fs-xs:12.5px; --fs-sm:14.5px; --fs-body:17px; --fs-lg:20px;
  --fs-h3:clamp(22px,2.4vw,28px); --fs-h2:clamp(34px,4.6vw,60px); --fs-h1:clamp(34px,4.1vw,58px);

  /* espaço (base 4) */
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s20:20px; --s24:24px; --s32:32px; --s40:40px; --s56:56px; --s80:80px; --s130:130px;

  /* forma */
  --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --sombra-lava:0 20px 50px -14px var(--lava);
  --sombra-funda:0 40px 100px -30px #000;

  /* movimento */
  --e-out:cubic-bezier(.2,.8,.2,1); --t-fast:.2s; --t:.35s; --t-story:.8s;
}

/* ---------- componentes ---------- */
.hot{background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.kicker{display:inline-flex;gap:10px;align-items:center;font:500 var(--fs-xs)/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--magma)}
.kicker::before{content:"";width:22px;height:1px;background:currentColor}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s12);padding:21px 32px;border-radius:var(--r-pill);cursor:pointer;border:0;
  background:var(--hot);background-size:180% 100%;color:#1a0600;font:600 var(--fs-body)/1 var(--text);text-decoration:none;
  box-shadow:inset 0 1px 0 #ffe2b5aa,inset 0 -2px 6px #8a0d0066,var(--sombra-lava),0 0 0 1px #ff8c1a55;
  transition:transform var(--t-fast) var(--e-out),background-position .6s,box-shadow var(--t)}
.btn:hover{background-position:100% 0;transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6;cursor:progress}
.btn .arr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#1a0600;color:var(--brasa);font-size:15px;transition:transform .25s}
.btn:hover .arr{transform:translateX(3px)}
.ghost{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-pill);border:1px solid #ffffff1f;background:#ffffff08;backdrop-filter:blur(10px);font-weight:500;font-size:15px;color:var(--ink);text-decoration:none;transition:background var(--t-fast),border-color var(--t-fast)}
.ghost:hover{background:#ffffff12;border-color:#ff8c1a66}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;color:var(--soft);background:#ffffff0a;border:1px solid #ffffff17;backdrop-filter:blur(8px)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--magma);box-shadow:0 0 0 4px #ff8c1a33;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px #ff8c1a00}}

.campo{display:grid;gap:6px}
.campo label{font-size:var(--fs-sm);font-weight:500;color:var(--soft)}
.campo input{width:100%;height:56px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:#ffffff06;color:var(--ink);font:500 16px var(--text);
  outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);appearance:none}
.campo input::placeholder{color:var(--dim)}
.campo input:focus{border-color:var(--magma);box-shadow:0 0 0 4px var(--lava-a20);background:#ffffff0a}
.campo[data-erro] input{border-color:var(--erro)}
.campo .msg-erro{font-size:13px;color:var(--erro);min-height:0}

/* select próprio (listbox ARIA): .sel > input[hidden] + .sel-bt + ul.sel-lista[role=listbox] > li[role=option][data-v][data-l] */
.sel{position:relative}
.sel-bt{width:100%;height:56px;padding:0 16px 0 18px;display:flex;align-items:center;gap:12px;border-radius:14px;border:1px solid var(--line);background:#ffffff06;color:var(--ink);
  font:500 16px var(--text);text-align:left;cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.sel-bt:hover{border-color:var(--basalto-600)}
.sel-bt:focus-visible,.sel.on .sel-bt{outline:none;border-color:var(--magma);box-shadow:0 0 0 4px var(--lava-a20);background:#ffffff0a}
.sel-v{flex:1;display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel:not(.tem) .sel-v{color:var(--dim)}
.sel-v i{color:var(--magma);font-size:20px}
.sel-bt .car{color:var(--mute);font-size:16px;transition:transform var(--t) var(--e-out)}
.sel.on .sel-bt .car{transform:rotate(180deg);color:var(--magma)}
.sel-lista{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;list-style:none;margin:0;padding:6px;max-height:min(344px,52vh);overflow:auto;overscroll-behavior:contain;
  border-radius:16px;background:#1a0f0bf5;backdrop-filter:blur(16px);border:1px solid #ffffff14;box-shadow:var(--sombra-funda),0 0 60px -30px var(--lava);outline:none;scrollbar-width:thin;scrollbar-color:var(--basalto-600) transparent;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.98);transform-origin:top center;transition:opacity .14s ease,transform .2s var(--e-out),visibility 0s .2s}
.sel.up .sel-lista{top:auto;bottom:calc(100% + 8px);transform-origin:bottom center;transform:translateY(6px) scale(.98)}
.sel.on .sel-lista{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .14s ease,transform .2s var(--e-out),visibility 0s}
.sel-lista li{display:flex;align-items:center;gap:12px;padding:9px 12px 9px 9px;border-radius:11px;cursor:pointer;color:var(--soft);font-size:15.5px;line-height:1.25;user-select:none}
.sel-lista li>i:first-child{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:19px;background:#ffffff08;color:var(--mute);transition:background var(--t-fast),color var(--t-fast)}
.sel-lista li span{flex:1;min-width:0}
.sel-lista li small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.sel-lista li .ck{color:var(--magma);font-size:16px;opacity:0;transform:scale(.6);transition:opacity var(--t-fast),transform var(--t-fast) var(--e-out)}
.sel-lista li.at{background:#ffffff0d;color:var(--ink)}
.sel-lista li.at>i:first-child,.sel-lista li[aria-selected=true]>i:first-child{background:var(--lava-a20);color:var(--magma)}
.sel-lista li[aria-selected=true]{color:var(--ink)}
.sel-lista li[aria-selected=true] .ck{opacity:1;transform:none}

.cartao{border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line)}
.borda-viva{border-radius:var(--r-xl);padding:1.5px;background:conic-gradient(from var(--a),#3a120a,var(--lava),var(--brasa),var(--lava),#3a120a 40%,#3a120a);animation:spin 7s linear infinite}
@keyframes spin{to{--a:360deg}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}