/* =====================================================================
   INFOBITE ACOLHE · sistema visual (paleta Infobite Studio + base Artero)
   ===================================================================== */
@font-face{font-family:"Outfit";src:url(../fonts/Outfit.woff) format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/DMSans.woff) format("woff");font-weight:100 1000;font-display:swap}
:root{
  --acc:#ff5a1f;--acc2:#ff4d0d;--accHi:#ff7a3d;--accInk:#fff;--glow:255,90,31;
  --alert:#e5484d;--alertRGB:229,72,77;--ok:#22e07a;--warn:#f5b544;--info:#5aa9ff;
  --head:"Outfit",system-ui,sans-serif;--sans:"DM Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);--r:26px;--wrap:1280px;--gut:clamp(16px,5vw,80px);
  /* claro (padrão) */
  --ink:#121212;--mute:#5f5b57;--dim:#8f8b86;--bg:#ececea;--card:#f7f7f5;--card2:#e3e3e0;
  --line:rgba(0,0,0,.09);--line2:rgba(0,0,0,.22);--glass:rgba(255,255,255,.62);--glassb:rgba(0,0,0,.08);--glassEdge:rgba(255,255,255,.8);
  --chip:rgba(0,0,0,.05);--solid:#121212;--solidInk:#fff;--shadow:0 20px 50px rgba(0,0,0,.10);--accText:#c2410c;--field:#fff;
}
.t-escuro,.escuro{
  --ink:#f4f3f1;--mute:#a29d97;--dim:#5c5854;--bg:#0a0a0b;--card:#131315;--card2:#1d1d20;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.22);--glass:rgba(255,255,255,.05);--glassb:rgba(255,255,255,.10);--glassEdge:rgba(255,255,255,.12);
  --chip:rgba(255,255,255,.07);--solid:#f4f3f1;--solidInk:#0a0a0b;--shadow:0 20px 50px rgba(0,0,0,.45);--accText:#ff8a5c;--field:#1a1a1d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.in{width:min(var(--wrap),calc(100% - 2*var(--gut)));margin:0 auto;position:relative}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
::selection{background:rgba(var(--glow),.3)}

/* ---------- tipografia ---------- */
.t{font-family:var(--head);font-weight:200;letter-spacing:-.035em;line-height:1.02;margin:0}
.t b{font-weight:700}.t .o{color:var(--acc)}.t .g{color:var(--dim)}
.h-xl{font:600 clamp(44px,6.4vw,92px)/.95 var(--head);text-transform:uppercase;letter-spacing:-.03em;margin:0}
.h-xl .g{color:var(--dim)}.h-xl .o{color:var(--acc)}
.h1{font-size:clamp(46px,7vw,104px)}.h2{font-size:clamp(38px,5.2vw,78px)}.h3{font-size:clamp(30px,3.6vw,52px)}
.tt{font:600 clamp(22px,2.2vw,30px)/1.15 var(--head);letter-spacing:-.015em;margin:0}
.eyebrow,.eb{display:inline-flex;align-items:center;gap:12px;font:600 12.5px var(--sans);letter-spacing:2.4px;text-transform:uppercase;color:var(--mute)}
.eyebrow .bar,.eb .bar{width:44px;height:1px;background:currentColor;opacity:.35}
.eyebrow .n,.eb .n{font-weight:700;color:var(--accText)}
.lead{font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:var(--mute)}
.muted{color:var(--mute)}.dim{color:var(--dim)}.small{font-size:13.5px}.tiny{font-size:12px}
.acc-t{color:var(--accText)}

/* ---------- botões (guia visual) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:14px;padding:14px 14px 14px 22px;font:600 15.5px var(--sans);white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,filter .3s;cursor:pointer;border:1px solid transparent;line-height:1.2;text-align:center}
.btn i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;transition:transform .35s var(--ease);flex:none}
.btn i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-2px)}.btn:hover i{transform:translateX(3px)}.btn:active{transform:translateY(0) scale(.98)}
.btn.noi{padding:14px 22px}
.btn-solid{background:var(--solid);color:var(--solidInk);box-shadow:0 18px 30px -16px rgba(0,0,0,.55)}.btn-solid i{background:var(--acc);color:#fff}
.btn-acc{background:linear-gradient(160deg,var(--accHi),var(--acc) 45%,var(--acc2));color:#fff;border-color:rgba(255,255,255,.18);box-shadow:0 16px 32px -14px rgba(var(--glow),.95),0 0 30px rgba(var(--glow),.35)}
.btn-acc:hover{box-shadow:0 22px 40px -12px rgba(var(--glow),1),0 0 50px rgba(var(--glow),.55)}.btn-acc i{background:rgba(255,255,255,.18)}
.btn-ghost{border-color:var(--line2);color:var(--ink)}.btn-ghost i{background:var(--chip)}.btn-ghost:hover{background:var(--chip)}
.btn-glass{background:var(--glass);border-color:var(--glassEdge);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);box-shadow:inset 0 -10px 24px rgba(var(--glow),.14)}.btn-glass i{background:var(--chip)}
.btn-alert{background:linear-gradient(160deg,#f26a6e,var(--alert));color:#fff;box-shadow:0 16px 30px -14px rgba(var(--alertRGB),.9)}.btn-alert i{background:rgba(255,255,255,.18)}
.btn-ok{background:var(--ok);color:#06301a}.btn-ok i{background:rgba(0,0,0,.12)}
.btn-pill{border-radius:999px;padding:9px 9px 9px 20px;font-size:14px}.btn-pill i{border-radius:50%;width:30px;height:30px}
.btn-pill.noi{padding:10px 18px}
.btn-sm{padding:9px 9px 9px 15px;font-size:13.5px;border-radius:11px;gap:10px}.btn-sm i{width:24px;height:24px;border-radius:7px}.btn-sm.noi{padding:9px 15px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.round{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#fff;box-shadow:0 12px 24px -10px rgba(var(--glow),.9);transition:transform .35s var(--ease);flex:none}
.round svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.round.out{background:transparent;border:1px solid var(--line2);color:var(--ink);box-shadow:none}.round.sm{width:40px;height:40px}.round.sm svg{width:16px;height:16px}
.round:hover{transform:rotate(-45deg)}
.icbtn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--chip);border:1px solid var(--line);position:relative;transition:background .3s,transform .3s var(--ease)}
.icbtn:hover{background:var(--card2);transform:translateY(-1px)}
.icbtn .badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--acc);color:#fff;font:700 11px/20px var(--sans);text-align:center;box-shadow:0 0 0 3px var(--bg);transform:scale(0);transition:transform .35s var(--ease)}
.icbtn .badge.on{transform:scale(1)}.icbtn .badge.urg{background:var(--alert);animation:pulsarA 1.6s ease-out infinite}

/* ---------- chips / tags ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;font:700 12.5px var(--sans);padding:7px 13px;border-radius:999px;background:rgba(var(--glow),.12);color:var(--accText);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:pisca 2.2s ease-in-out infinite}
.chip.off{background:var(--chip);color:var(--mute)}.chip.off .dot{background:var(--dim);box-shadow:none;animation:none}
.chip.solid{background:var(--solid);color:var(--solidInk)}
.chip.alert{background:rgba(var(--alertRGB),.14);color:var(--alert)}.chip.alert .dot{background:var(--alert);box-shadow:0 0 10px var(--alert)}
.chip.ok{background:rgba(34,224,122,.14);color:#0e9f52}.t-escuro .chip.ok{color:var(--ok)}.chip.ok .dot{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.chip.warn{background:rgba(245,181,68,.18);color:#a86a00}.t-escuro .chip.warn{color:var(--warn)}.chip.warn .dot{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.chip.info{background:rgba(90,169,255,.15);color:#1f6fc5}.t-escuro .chip.info{color:var(--info)}.chip.info .dot{background:var(--info);box-shadow:0 0 10px var(--info)}
.chip.acc .dot{background:var(--acc)}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--sans);padding:6px 12px;border-radius:10px;background:var(--chip);color:var(--ink);border:1px solid var(--line)}
@keyframes pisca{50%{opacity:.35}}

/* ---------- vidro / cards (guia) ---------- */
.glass{border-radius:22px;padding:18px 20px;background:var(--glass);border:1px solid var(--glassEdge);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--shadow)}
.glass small{display:flex;justify-content:space-between;gap:10px;font:500 12.5px var(--sans);color:var(--mute)}.glass small em{font-style:normal;color:var(--accText);font-weight:700}
.glass .dig{font:600 40px/1.1 var(--head);letter-spacing:-.02em;margin:6px 0 2px}
.glass .s{display:block;font-size:13px;color:var(--mute)}
.glass .u,.stat .u{display:block;height:3px;border-radius:3px;margin-top:14px;background:linear-gradient(90deg,var(--acc),transparent)}
.glass .row{display:flex;gap:12px;align-items:center}
.ok-ic{width:40px;height:40px;border-radius:50%;background:var(--ok);color:#06301a;display:grid;place-items:center;flex:none;box-shadow:0 0 22px rgba(34,224,122,.45)}
.ok-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.card{position:relative;border-radius:var(--r);background:var(--card);border:1px solid var(--line);padding:26px;overflow:hidden}
.card>.top{display:flex;justify-content:space-between;font:600 13px var(--sans);color:var(--dim)}
.card h3{font:600 26px/1.08 var(--head);letter-spacing:-.01em;margin:30px 0 10px;text-transform:uppercase}
.card p{color:var(--mute);margin:0;font-size:15px}
.card .ar{position:absolute;right:22px;bottom:22px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:.4s var(--ease)}
.card .ar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card:hover .ar{background:var(--acc);color:#fff;border-color:transparent;transform:rotate(-45deg)}
.card.acc{background:linear-gradient(160deg,var(--accHi),var(--acc) 45%,var(--acc2));color:#fff;border-color:transparent;box-shadow:0 30px 50px -26px rgba(var(--glow),.9)}
.card.acc p,.card.acc>.top{color:rgba(255,255,255,.85)}.card.acc .ar{border-color:rgba(255,255,255,.4)}
.card.dark{background:#0a0a0b;color:#f4f3f1;border-color:rgba(255,255,255,.08)}.card.dark p{color:#a29d97}.card.dark .ar{border-color:rgba(255,255,255,.22)}
.card.glow{box-shadow:inset 0 -40px 60px -40px rgba(var(--glow),.45)}
.card.glow::after{content:"";position:absolute;left:10%;right:10%;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--acc),transparent)}
.stat{border-radius:22px;padding:20px 22px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.stat small{display:block;font:500 13px var(--sans);color:var(--mute)}
.stat b{display:block;font:600 44px/1.05 var(--head);letter-spacing:-.03em;margin-top:6px}
.stat.acc{background:linear-gradient(160deg,var(--accHi),var(--acc) 45%,var(--acc2));color:#fff;border-color:transparent}.stat.acc small{color:rgba(255,255,255,.85)}.stat.acc .u{background:linear-gradient(90deg,#fff,transparent)}
.stat.alert b{color:var(--alert)}.stat.alert .u{background:linear-gradient(90deg,var(--alert),transparent)}
.stat .ico-s{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--chip);color:var(--accText)}
.stat.acc .ico-s{background:rgba(255,255,255,.18);color:#fff}
.ring{--p:50%;--a:180deg;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--acc) var(--a),var(--card2) 0);position:relative}
.ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--card)}
.ring b{position:relative;font:600 26px var(--head)}
.num{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font:700 15px var(--sans);background:var(--acc);color:#fff;box-shadow:0 0 22px rgba(var(--glow),.45);flex:none}
.num.out{background:var(--chip);color:var(--ink);box-shadow:none}
.ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(var(--glow),.12);color:var(--accText);flex:none}
.ico svg{width:25px;height:25px}
.ico.sm{width:42px;height:42px;border-radius:13px}.ico.sm svg{width:20px;height:20px}
.check{display:flex;align-items:center;gap:12px;font-weight:500}
.check i{width:28px;height:28px;border-radius:50%;background:rgba(var(--glow),.14);color:var(--accText);display:grid;place-items:center;flex:none}
.check i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* selo giratório */
.seal{position:relative;width:132px;height:132px;flex:none}
.seal .r{position:absolute;inset:0;width:100%;height:100%;animation:girar 18s linear infinite}
.seal .r text{font:700 9.6px var(--sans);letter-spacing:2.2px;fill:var(--ink)}
.seal .c{position:absolute;inset:30px;border-radius:50%;background:linear-gradient(160deg,var(--accHi),var(--acc2));display:grid;place-items:center;box-shadow:0 0 30px rgba(var(--glow),.55)}
@keyframes girar{to{transform:rotate(360deg)}}
/* card recortado */
.cut{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:30px;border-radius:var(--r);background:linear-gradient(160deg,var(--accHi),var(--acc) 45%,var(--acc2));color:#fff;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,0 26%);min-height:200px;box-shadow:0 30px 60px -30px rgba(var(--glow),.9)}
.cut .t2{font:600 clamp(28px,3vw,40px)/1 var(--head);text-transform:uppercase;letter-spacing:-.02em}
.cut .go{width:64px;height:64px;border-radius:50%;background:#fff;color:var(--acc2);display:grid;place-items:center;flex:none;transition:transform .4s var(--ease)}
.cut:hover .go{transform:rotate(-45deg)}.cut .go svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* faq */
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;font:600 clamp(17px,1.6vw,21px) var(--head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font:400 22px var(--sans);transition:transform .4s var(--ease),background .3s;flex:none}
.faq[open] summary span{transform:rotate(45deg);background:var(--acc);color:#fff;border-color:transparent}
.faq p{margin:0 0 22px;color:var(--mute);max-width:820px}

/* ---------- chave liga/desliga ---------- */
.sw{position:relative;display:inline-block;width:78px;height:36px;border-radius:999px;background:var(--chip);border:1px solid var(--line2);flex:none;transition:background .4s;cursor:pointer}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:2}
.sw .k{position:absolute;top:3px;bottom:3px;left:3px;width:34px;border-radius:999px;background:var(--dim);transition:left .45s var(--ease),background .45s,box-shadow .45s}
.sw .l{position:absolute;right:11px;top:50%;transform:translateY(-50%);font:700 10px var(--sans);color:var(--mute);transition:.3s}
.sw .l::before{content:"OFF"}
.sw.on,.sw:has(input:checked){background:rgba(var(--glow),.14);border-color:rgba(var(--glow),.4)}
.sw.on .k,.sw:has(input:checked) .k{left:39px;background:radial-gradient(circle at 35% 30%,#ffd2bd,var(--accHi) 50%,var(--acc2));box-shadow:0 0 16px rgba(var(--glow),.9)}
.sw.on .k::after,.sw:has(input:checked) .k::after{content:"";position:absolute;inset:9px 10px;background-image:radial-gradient(rgba(0,0,0,.3) 1px,transparent 1.5px);background-size:5px 5px}
.sw.on .l,.sw:has(input:checked) .l{left:12px;right:auto;color:var(--accText)}
.sw.on .l::before,.sw:has(input:checked) .l::before{content:"ON"}
.sw input:focus-visible+.k{outline:2px solid var(--acc);outline-offset:3px}
.trow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.trow:first-child{border-top:0}
.trow b{display:block;font-weight:600}.trow span.d{display:block;font-size:13px;color:var(--mute)}

/* ---------- formulários ---------- */
.form{display:grid;gap:14px}
.f{display:grid;gap:6px;font:600 13.5px var(--sans);color:var(--ink)}
.f small{font-weight:400;color:var(--mute)}
.inp,.f input:not([type=checkbox]):not([type=radio]):not([type=file]),.f select,.f textarea{width:100%;min-width:0;font:16px var(--sans);color:var(--ink);background:var(--field);border:1px solid var(--line2);border-radius:14px;padding:13px 15px;transition:border-color .3s,box-shadow .3s;appearance:none}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8b86' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.f textarea{min-height:120px;resize:vertical;line-height:1.55}
.inp:focus,.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(var(--glow),.16)}
.f input[type=file]{font:14px var(--sans);color:var(--mute)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.ckb{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--mute)}
.ckb input{width:20px;height:20px;accent-color:var(--acc);flex:none;margin-top:2px}
/* escolhas em pílula */
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opts span{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--field);font:600 14px var(--sans);transition:.3s var(--ease);cursor:pointer}
.opts input:checked+span{background:var(--solid);color:var(--solidInk);border-color:var(--solid);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.opts input:focus-visible+span{outline:2px solid var(--acc);outline-offset:3px}
.opts span svg{width:17px;height:17px}

/* ---------- alertas / toast ---------- */
.msg{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;font-size:14.5px;border:1px solid}
.msg.ok{background:rgba(34,224,122,.1);border-color:rgba(34,224,122,.35)}
.msg.erro{background:rgba(var(--alertRGB),.1);border-color:rgba(var(--alertRGB),.35)}
.msg.info{background:rgba(var(--glow),.08);border-color:rgba(var(--glow),.3)}
.toasts{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:300;display:grid;gap:10px;width:min(460px,calc(100% - 32px))}
.toast{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--glass);border:1px solid var(--glassEdge);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:var(--shadow);animation:toastIn .6s var(--ease) both;font-size:14.5px}
.toast.sai{animation:toastOut .5s var(--ease) both}
.toast .ti{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--ok);color:#06301a}
.toast.erro .ti{background:var(--alert);color:#fff}.toast.info .ti{background:var(--acc);color:#fff}
.toast .ti svg{width:17px;height:17px}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-12px) scale(.96)}}

/* ---------- modal / leitor ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(5,5,6,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal.on{display:flex;animation:fade .35s ease both}
.modal .caixa{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:28px;background:var(--card);border:1px solid var(--line);box-shadow:0 40px 80px rgba(0,0,0,.5);padding:26px;animation:subir .5s var(--ease) both}
.modal .fecha{position:absolute;top:16px;right:16px;z-index:5}
.modal.leitor{padding:0;background:rgba(5,5,6,.9)}
.modal.leitor iframe{width:100%;height:100%;border:0}
.modal.leitor .fecha{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.15)}
@keyframes fade{from{opacity:0}}
@keyframes subir{from{opacity:0;transform:translateY(24px)}}

/* ---------- prateleira de cartilhas (livros 3D) ---------- */
.estante{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:30px 24px;perspective:1400px}
.livro{display:block;text-align:left;cursor:pointer;width:100%}
.livro .capa3d{position:relative;aspect-ratio:1026/1450;border-radius:4px 14px 14px 4px;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(2deg);transition:transform .7s var(--ease),box-shadow .7s var(--ease);box-shadow:18px 22px 40px -12px rgba(0,0,0,.45);background:var(--card2)}
.livro .capa3d img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.livro .capa3d::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;border-radius:4px 0 0 4px;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.18) 45%,rgba(0,0,0,.12));z-index:2}
.livro .capa3d::after{content:"";position:absolute;right:-9px;top:5px;bottom:5px;width:10px;transform:rotateY(70deg);transform-origin:left;background:repeating-linear-gradient(90deg,#fdfcf9 0 1px,#dcd9d2 1px 2px);border-radius:0 3px 3px 0}
.livro .brilho3d{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position 1s var(--ease);z-index:3;pointer-events:none}
.livro:hover .capa3d,.livro:focus-visible .capa3d{transform:rotateY(0) rotateX(0) translateY(-8px);box-shadow:0 34px 60px -18px rgba(var(--glow),.55)}
.livro:hover .brilho3d{background-position:-40% 0}
.livro .ler{position:absolute;left:50%;bottom:14px;transform:translate(-50%,10px);opacity:0;transition:.45s var(--ease);z-index:4}
.livro:hover .ler{opacity:1;transform:translate(-50%,0)}
.livro b{display:block;font:600 16.5px/1.25 var(--head);margin-top:18px}
.livro small{display:block;font-size:12.5px;color:var(--mute);margin-top:4px}
.livro .org{display:inline-block;margin-top:8px}

/* ---------- linha do tempo (acompanhamento) ---------- */
.tl{position:relative;display:grid;gap:14px;padding-left:28px}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--acc),var(--line))}
.tl .it{position:relative}
.tl .it::before{content:"";position:absolute;left:-24px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--card);border:3px solid var(--acc)}
.tl .it.note::before{border-color:var(--dim)}.tl .it.minha::before{border-color:var(--ok)}
.tl .bolha{border-radius:18px;padding:14px 16px;background:var(--card);border:1px solid var(--line)}
.tl .it.minha .bolha{background:rgba(var(--glow),.08);border-color:rgba(var(--glow),.25)}
.tl .it.note .bolha{background:repeating-linear-gradient(-45deg,var(--card) 0 10px,var(--card2) 10px 11px)}
.tl .meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--dim);margin-bottom:4px}
.tl .meta b{color:var(--mute);font-weight:600}
.tl p{margin:0;white-space:pre-wrap;word-break:break-word}

/* ---------- utilidades ---------- */
.row{display:flex;gap:12px;align-items:center}.row.w{flex-wrap:wrap}.row.sb{justify-content:space-between}.row.end{justify-content:flex-end}
.stack{display:grid;gap:14px}.stack.s{gap:8px}.stack.l{gap:22px}
.mt{margin-top:18px}.mt2{margin-top:30px}.mb{margin-bottom:18px}.m0{margin:0}
.av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accHi),var(--acc2));display:grid;place-items:center;font:700 15px var(--head);color:#fff;flex:none;object-fit:cover}
.av.sm{width:34px;height:34px;font-size:13px}
.hr{height:1px;background:var(--line);border:0;margin:20px 0}
.vazio{text-align:center;padding:40px 20px;color:var(--mute)}
.vazio .ico{margin:0 auto 14px}
.pulsa{animation:pulsar 2.4s ease-out infinite}
@keyframes pulsar{0%,100%{box-shadow:0 0 0 0 rgba(var(--glow),.55)}50%{box-shadow:0 0 0 14px rgba(var(--glow),0)}}
@keyframes pulsarA{0%{box-shadow:0 0 0 0 rgba(var(--alertRGB),.7),0 0 0 3px var(--bg)}70%{box-shadow:0 0 0 12px rgba(var(--alertRGB),0),0 0 0 3px var(--bg)}}
@keyframes flutuar{50%{translate:0 -12px}}
.flutua{animation:flutuar 6s ease-in-out infinite}
.linha-luz{height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--acc),transparent) 0 0/50% 100% no-repeat;animation:passa 3s linear infinite}
@keyframes passa{0%{background-position:-100% 0}100%{background-position:200% 0}}

/* revelar ao rolar + tilt */
.rv{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}.rv.d5{transition-delay:.5s}
.rv.vis{opacity:1;transform:none}
.rv-3d{opacity:0;transform:perspective(1200px) rotateX(16deg) translateY(56px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv-3d.vis{opacity:1;transform:none}
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease)}
.tilt .brilho{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 45%);opacity:0;transition:opacity .4s;z-index:4}
.tilt:hover .brilho{opacity:1}

/* saída rápida */
.saida{position:fixed;left:16px;bottom:16px;z-index:150;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--solid);color:var(--solidInk);font:700 12.5px var(--sans);box-shadow:0 12px 28px -10px rgba(0,0,0,.6);transition:transform .3s var(--ease)}
.saida:hover{transform:translateY(-2px)}
.saida svg{width:15px;height:15px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,.rv-3d{opacity:1!important;transform:none!important}
}
.livro{align-self:start}
[hidden]{display:none!important}
.escuro-b .btn-glass,.ola .btn-glass{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.painel .saida{left:auto;right:16px}
@media (max-width:600px){.estante{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.livro b{font-size:14.5px}.livro .ler{display:none}}
.stat small{padding-right:48px}