/* ==========================================================
   LIVREIMAGE · Design tokens
   Tema escuro por padrão + tema claro opcional ([data-theme]).
========================================================== */
:root{
  --paper:#07080D;          /* fundo geral (quase preto, tom azulado) */
  --paper-2:#0A0C13;        /* faixas alternadas */
  --card:#10131C;           /* cartões */
  --card-2:#151926;         /* cartões elevados / inputs */
  --ink:#F2F4FB;            /* texto principal */
  --ink-2:#9BA3BC;          /* texto secundário */
  --line:#1E2333;           /* bordas */
  --line-2:#2A3147;         /* bordas hover */
  --chk:#151A28;            /* xadrez de transparência */
  --magenta:#FF4D8D;        /* ação */
  --magenta-deep:#E03A77;
  --magenta-soft:rgba(255,77,141,.13);
  --cyan:#41C9EC;           /* informação */
  --cyan-soft:rgba(65,201,236,.13);
  --yellow:#FFD166;         /* economia */
  --yellow-soft:rgba(255,209,102,.13);
  --ok:#34D399;
  --err:#FB7185;
  --scrollthumb:#232A3D;
  --bar:rgba(10,12,19,.62);          /* barra do topo translúcida (deixa a aurora passar) */
  --aura1:rgba(255,77,141,.22);
  --aura2:rgba(65,201,236,.18);
  --aura3:rgba(255,209,102,.14);
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -14px rgba(0,0,0,.55);
  --glow-m:0 0 0 1px rgba(255,77,141,.25),0 10px 36px -10px rgba(255,77,141,.35);
  --font-d:"Bricolage Grotesque",system-ui,sans-serif;
  --font-b:"Instrument Sans",system-ui,sans-serif;
  --font-m:"Spline Sans Mono","JetBrains Mono",ui-monospace,monospace;
}
/* ---- TEMA CLARO ---- */
:root[data-theme="light"]{
  --paper:#F4F6FC;
  --paper-2:#EAEEF7;
  --card:#FFFFFF;
  --card-2:#F1F4FB;
  --ink:#13172A;
  --ink-2:#5A6178;
  --line:#E4E8F2;
  --line-2:#D2D8E6;
  --chk:#E9ECF5;
  --magenta:#D6336C;
  --magenta-deep:#B02458;
  --magenta-soft:rgba(214,51,108,.10);
  --cyan:#0E94B5;
  --cyan-soft:rgba(14,148,181,.10);
  --yellow:#B5790A;
  --yellow-soft:rgba(246,196,69,.20);
  --scrollthumb:#C2C9DA;
  --bar:rgba(255,255,255,.72);
  --aura1:rgba(214,51,108,.16);
  --aura2:rgba(14,148,181,.13);
  --aura3:rgba(246,196,69,.16);
  --shadow:0 1px 2px rgba(22,26,46,.05),0 10px 28px -14px rgba(22,26,46,.18);
  --glow-m:0 0 0 1px rgba(214,51,108,.20),0 12px 36px -12px rgba(214,51,108,.30);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-b);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;max-width:100%;
  overscroll-behavior-x:none;            /* mata o "puxar pro lado" no iOS */
  touch-action:manipulation;             /* mata o "zoom no toque duplo" no iOS */
  -webkit-tap-highlight-color:transparent;
  transition:background .25s ease,color .25s ease;
}
button,a,.drop,.seg button,.tool,summary{touch-action:manipulation}

/* fundo aurora desfocado que se move suavemente atrás de tudo */
body::before{
  content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 38% at 18% 28%, var(--aura1), transparent 70%),
    radial-gradient(34% 34% at 82% 22%, var(--aura2), transparent 70%),
    radial-gradient(46% 46% at 65% 82%, var(--aura3), transparent 72%),
    radial-gradient(30% 30% at 40% 60%, var(--aura2), transparent 70%);
  filter:blur(70px) saturate(1.15);
  will-change:transform;
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(-3%,-2%,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(3%,2%,0) scale(1.08) rotate(2deg)}
  100%{transform:translate3d(-2%,3%,0) scale(1.05) rotate(-2deg)}
}
img{max-width:100%;display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--magenta);color:#fff}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}
.wrap{
  max-width:1060px;margin:0 auto;width:100%;
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
}
@media(max-width:480px){.wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}

/* barra de rolagem discreta */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--scrollthumb);border-radius:8px;border:2px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{filter:brightness(1.2)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--bar);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
  /* iPhone com notch/Dynamic Island (app instalado): empurra a barra pra baixo da câmera */
  padding-top:env(safe-area-inset-top);
}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:62px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-d);font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.02em;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{flex:none;display:block;filter:drop-shadow(0 2px 10px rgba(255,77,141,.25))}
.brand-word b{font-weight:800;color:var(--magenta)}
.topnav{display:flex;gap:20px;margin-left:auto;font-weight:500;font-size:15px}
.topnav a{color:var(--ink-2)}
.topnav a:hover{color:var(--ink);text-decoration:none}
.langs{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card);flex:none}
.langs button,.langs a{
  border:0;background:transparent;padding:6px 13px;cursor:pointer;
  font:600 13px var(--font-b);color:var(--ink-2);text-decoration:none;line-height:1.4;
}
.langs button.on,.langs a.on{background:var(--magenta);color:#fff}
.langs a:hover{text-decoration:none;color:var(--ink)}
.themebtn{
  flex:none;width:38px;height:38px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  display:grid;place-items:center;transition:border-color .15s,color .15s;
}
.themebtn:hover{border-color:var(--magenta);color:var(--ink)}
.themebtn svg{width:18px;height:18px}
.themebtn .ico-sun{display:none}
.themebtn .ico-moon{display:block}
:root[data-theme="light"] .themebtn .ico-sun{display:block}
:root[data-theme="light"] .themebtn .ico-moon{display:none}
@media(max-width:680px){.topnav{display:none}}

/* ---------- Hero + Dropzone ---------- */
.hero{padding:54px 0 18px;text-align:center;position:relative}
.hero::before{
  content:"";position:absolute;left:50%;top:-120px;transform:translateX(-50%);
  width:min(820px,120vw);height:420px;max-width:120vw;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,var(--magenta-soft),var(--cyan-soft) 55%,transparent 75%);
  filter:blur(8px);
}
.hero h1{
  font-family:var(--font-d);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(32px,5.4vw,54px);line-height:1.06;margin:0 0 14px;
}
.hero h1 em{
  font-style:normal;position:relative;white-space:nowrap;
  background:linear-gradient(92deg,var(--magenta),#FF7DA8 55%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .sub{max-width:620px;margin:0 auto 22px;color:var(--ink-2);font-size:17.5px}
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 30px}
.badge{
  font:500 13px var(--font-b);padding:6px 12px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;
}
.badge .dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot-m{background:var(--magenta);box-shadow:0 0 8px rgba(255,77,141,.8)}
.dot-c{background:var(--cyan);box-shadow:0 0 8px rgba(65,201,236,.8)}
.dot-y{background:var(--yellow);box-shadow:0 0 8px rgba(255,209,102,.8)}

.drop{
  position:relative;cursor:pointer;
  border:2.5px dashed #303A55;border-radius:22px;
  padding:58px 24px;margin:0 0 14px;
  background:
    linear-gradient(45deg,var(--chk) 25%,transparent 25%),
    linear-gradient(-45deg,var(--chk) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--chk) 75%),
    linear-gradient(-45deg,transparent 75%,var(--chk) 75%),var(--card);
  background-size:26px 26px;background-position:0 0,0 13px,13px -13px,-13px 0;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.drop:hover{border-color:var(--magenta);box-shadow:0 0 0 1px rgba(255,77,141,.15),0 18px 50px -22px rgba(255,77,141,.35)}
.drop.drag{border-color:var(--magenta);transform:scale(1.012);box-shadow:var(--glow-m)}
.drop-inner{display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.drop-ico{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--magenta),var(--magenta-deep));
  box-shadow:0 10px 30px -8px rgba(255,77,141,.6);
}
.drop-ico svg{width:28px;height:28px;stroke:#fff}
.drop-title{font-family:var(--font-d);font-weight:700;font-size:21px}
.drop-hint{color:var(--ink-2);font-size:14.5px}
.drop-hint .kbd{font:500 12px var(--font-m);background:var(--card-2);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;padding:1px 7px;color:var(--ink)}
.drop-btn{
  pointer-events:none;margin-top:2px;
  background:linear-gradient(92deg,var(--magenta),var(--magenta-deep));color:#fff;border:0;border-radius:999px;
  font:600 15px var(--font-b);padding:12px 26px;
  box-shadow:0 8px 24px -8px rgba(255,77,141,.55);
}
.formats{font:500 12px var(--font-m);color:var(--ink-2);letter-spacing:.04em}

/* ---------- Settings panel ---------- */
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;margin:0 0 26px;
  display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;
}
.field{display:flex;flex-direction:column;gap:7px;min-width:150px}
.field>label{font:600 12px var(--font-b);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.seg{display:flex;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;max-width:100%}
.seg button{
  border:0;background:transparent;border-radius:7px;cursor:pointer;
  font:600 13.5px var(--font-b);color:var(--ink-2);padding:7px 13px;
}
.seg button.on{background:var(--magenta);color:#fff}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.field-q{flex:1;min-width:200px}
.qrow{display:flex;align-items:center;gap:12px}
.qrow input[type=range]{flex:1;accent-color:var(--magenta);height:28px}
.qval{font:500 14px var(--font-m);background:var(--magenta-soft);color:var(--magenta);border-radius:8px;padding:3px 9px;min-width:46px;text-align:center}
.field input[type=number]{
  border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;width:130px;
  font:500 14px var(--font-m);color:var(--ink);background:var(--card-2);
}
.field input[type=number]::placeholder{color:#5A6178}
.reapply{
  margin-left:auto;border:1.5px solid var(--line-2);background:transparent;color:var(--ink);
  border-radius:999px;font:600 14px var(--font-b);padding:10px 18px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.reapply:hover{border-color:var(--magenta);background:var(--magenta-soft)}
@media(max-width:640px){.reapply{margin-left:0;width:100%}}

/* ---------- Opção juntar em 1 PDF ---------- */
.mergeopt{display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;
  font:600 14px var(--font-b);color:var(--ink);
  background:var(--card-2);border:1px solid var(--line-2);border-radius:10px;padding:11px 14px;margin-top:4px}
.mergeopt input{width:18px;height:18px;accent-color:var(--magenta);flex:none}

/* ---------- Área de imagens geradas ---------- */
.results{margin:6px 0 4px}
.results-h{font-family:var(--font-d);font-weight:800;font-size:17px;margin:0 0 12px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px}
.results-h::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--magenta);box-shadow:0 0 10px var(--magenta)}
.card-in{opacity:.96}

/* ---------- Botão Gerar (fluxo config-first) ---------- */
.genbar{display:none;margin:0 0 22px}
.genbar.show{display:block}
.genbtn{
  width:100%;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(92deg,var(--magenta),var(--magenta-deep));color:#fff;
  font:700 16px var(--font-b);padding:16px 22px;
  box-shadow:0 12px 30px -10px rgba(255,77,141,.6);
  transition:filter .15s,transform .1s;
}
.genbtn:hover{filter:brightness(1.07)}
.genbtn:active{transform:translateY(1px)}
.genbtn:disabled{opacity:.6;cursor:wait}

/* ---------- Results ---------- */
.queue{display:flex;flex-direction:column;gap:12px;margin:0 0 16px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:13px 15px;
  display:flex;align-items:center;gap:14px;
  animation:rise .35s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.thumb{
  width:60px;height:60px;flex:none;border-radius:10px;border:1px solid var(--line);
  background:
    linear-gradient(45deg,var(--chk) 25%,transparent 25%),
    linear-gradient(-45deg,var(--chk) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--chk) 75%),
    linear-gradient(-45deg,transparent 75%,var(--chk) 75%),var(--card-2);
  background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;
  overflow:hidden;display:grid;place-items:center;color:var(--ink-2);
}
.thumb img{width:100%;height:100%;object-fit:cover}
.meta{flex:1;min-width:0}
.fname{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.sizes{font:500 12.5px var(--font-m);color:var(--ink-2)}
.sizes b{color:var(--ink);font-weight:500}
.tag{font:600 11px var(--font-m);letter-spacing:.05em;border-radius:6px;padding:2px 7px}
.tag-fmt{background:var(--cyan-soft);color:var(--cyan)}
.pct{font:600 12.5px var(--font-m);border-radius:8px;padding:3px 9px;background:var(--yellow-soft);color:var(--yellow)}
.pct.flat{background:var(--card-2);color:var(--ink-2)}
.spin{width:18px;height:18px;border:2.5px solid var(--line-2);border-top-color:var(--magenta);border-radius:50%;animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.actions{display:flex;gap:8px;flex:none}
.icobtn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--card-2);cursor:pointer;display:grid;place-items:center;color:var(--ink-2);
}
.icobtn:hover{border-color:var(--magenta);color:var(--ink)}
.icobtn svg{width:18px;height:18px}
.dlbtn{
  height:38px;border-radius:10px;border:0;
  background:linear-gradient(92deg,var(--magenta),var(--magenta-deep));color:#fff;
  font:600 14px var(--font-b);padding:0 16px;cursor:pointer;display:flex;align-items:center;gap:7px;
  box-shadow:0 6px 18px -8px rgba(255,77,141,.6);
}
.dlbtn:hover{filter:brightness(1.08)}
.dlbtn svg{width:16px;height:16px}
.cerr{color:var(--err);font:500 13px var(--font-b)}
@media(max-width:560px){
  .card{flex-wrap:wrap}
  .actions{width:100%;justify-content:flex-end}
}

/* ---------- Bulk bar (assinatura: economia total) ---------- */
.bulkbar{
  display:none;align-items:center;flex-wrap:wrap;gap:16px;
  background:linear-gradient(135deg,#161A2B,#11131E 60%);color:#fff;
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:16px 20px;margin:0 0 30px;box-shadow:var(--shadow);
}
.bulkbar.show{display:flex}
.saved-label{font:600 11px var(--font-b);text-transform:uppercase;letter-spacing:.1em;color:#ABB2C9}
.saved-num{font-family:var(--font-d);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em}
.saved-num small{font-size:16px;font-weight:700;color:var(--yellow)}
.zipbtn{
  margin-left:auto;border:0;border-radius:999px;
  background:linear-gradient(92deg,var(--yellow),#F4B83A);color:#2A2003;
  font:700 15px var(--font-b);padding:13px 24px;cursor:pointer;display:flex;align-items:center;gap:8px;
  box-shadow:0 8px 26px -10px rgba(255,209,102,.45);
}
.zipbtn:hover{filter:brightness(1.06)}
.zipbtn:disabled{opacity:.6;cursor:wait}
.clearbtn{border:1px solid #3A405C;background:transparent;color:#C8CDE0;border-radius:999px;font:600 13.5px var(--font-b);padding:11px 18px;cursor:pointer}
.clearbtn:hover{border-color:#fff;color:#fff}
@media(max-width:640px){.zipbtn{margin-left:0;width:100%;justify-content:center}.clearbtn{width:100%}}

/* ---------- Ad slots ---------- */
.ad{margin:34px 0;text-align:center}
.ad-label{display:block;font:500 10px var(--font-b);text-transform:uppercase;letter-spacing:.14em;color:#5C6378;margin-bottom:6px}
.ad-box{
  min-height:100px;border:1px dashed var(--line);border-radius:12px;background:var(--card);
  display:grid;place-items:center;color:#5C6378;font:500 13px var(--font-b);padding:14px;
}
@media(min-width:740px){.ad-box.tall{min-height:120px}}
.ad ins.adsbygoogle{display:block;border-radius:12px;overflow:hidden}

/* ---------- Content blocks ---------- */
.block{padding:46px 0}
.block h2{font-family:var(--font-d);font-weight:800;letter-spacing:-.02em;font-size:clamp(24px,3.4vw,32px);margin:0 0 10px}
.block .lead{color:var(--ink-2);max-width:640px;margin:0 0 28px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.step:hover{border-color:var(--line-2);transform:translateY(-2px)}
.step .s-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px}
.step:nth-child(1) .s-ico{background:var(--magenta-soft);color:var(--magenta)}
.step:nth-child(2) .s-ico{background:var(--cyan-soft);color:var(--cyan)}
.step:nth-child(3) .s-ico{background:var(--yellow-soft);color:var(--yellow)}
.step .s-ico svg{width:20px;height:20px}
.step h3{font-family:var(--font-d);font-weight:700;font-size:17.5px;margin:0 0 6px}
.step p{margin:0;color:var(--ink-2);font-size:14.5px}

.why{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:700px){.why{grid-template-columns:1fr}}
.why-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);transition:border-color .15s}
.why-item:hover{border-color:var(--line-2)}
.why-item h3{font-family:var(--font-d);font-size:16.5px;font-weight:700;margin:0 0 5px;display:flex;align-items:center;gap:8px}
.why-item h3 .dot{width:8px;height:8px;border-radius:50%;flex:none}
.why-item p{margin:0;color:var(--ink-2);font-size:14.5px}

.toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.toolgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.toolgrid{grid-template-columns:1fr}}
.tool{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;font-weight:600;font-size:14.5px;color:var(--ink);
  display:flex;align-items:center;gap:10px;cursor:pointer;
  transition:border-color .15s,transform .15s;
}
.tool:hover{border-color:var(--magenta);text-decoration:none;transform:translateY(-2px)}
.tool .arr{margin-left:auto;color:var(--magenta);font-family:var(--font-m)}

.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:0 18px;margin-bottom:10px;box-shadow:var(--shadow);
}
.faq summary{
  cursor:pointer;list-style:none;font-weight:600;font-size:15.5px;
  padding:16px 0;display:flex;align-items:center;gap:10px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font:700 18px var(--font-m);color:var(--magenta)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--ink-2);font-size:14.5px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:34px 0 44px;margin-top:20px;color:var(--ink-2);font-size:13.5px;background:var(--paper-2)}
footer .frow2{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.privbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 16px;margin:0 0 22px}
.privbox summary{cursor:pointer;font-weight:600;color:var(--ink);padding:13px 0;list-style:none}
.privbox summary::-webkit-details-marker{display:none}
.privbox summary::before{content:"›";display:inline-block;margin-right:8px;color:var(--magenta);font-weight:700;transition:transform .15s}
.privbox[open] summary::before{transform:rotate(90deg)}
.privbox p{margin:0 0 14px;font-size:13.5px}

/* ---------- Botão / banner Instalar App (PWA) ---------- */
.installbtn{
  position:fixed;right:18px;bottom:18px;z-index:90;
  display:none;align-items:center;gap:8px;
  border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(92deg,var(--magenta),var(--magenta-deep));color:#fff;
  font:600 14px var(--font-b);padding:12px 18px;
  box-shadow:0 12px 34px -10px rgba(255,77,141,.65);
  animation:rise .4s ease both;
}
.installbtn.show{display:flex}
.installbtn svg{width:17px;height:17px;flex:none}
@media(max-width:640px){.installbtn{right:14px;bottom:14px}}
.iosguide{
  position:fixed;inset:0;z-index:110;display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.66);padding:18px;
}
.iosguide.open{display:flex}
.iosguide .gbox{
  background:var(--card-2);border:1px solid var(--line-2);border-radius:18px;
  max-width:420px;width:100%;padding:22px;margin-bottom:24px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.iosguide h3{font-family:var(--font-d);font-size:18px;margin:0 0 10px}
.iosguide ol{margin:0 0 14px;padding-left:20px;color:var(--ink-2);font-size:14.5px}
.iosguide ol b{color:var(--ink)}
.iosguide .gclose{width:100%;border:1px solid var(--line-2);background:transparent;color:var(--ink);border-radius:999px;font:600 14px var(--font-b);padding:11px;cursor:pointer}

/* ---------- Compare modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.78);padding:18px}
.modal.open{display:flex}
.mbox{background:var(--card-2);border:1px solid var(--line-2);border-radius:18px;max-width:860px;width:100%;padding:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.mhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mhead h3{font-family:var(--font-d);font-size:18px;font-weight:700;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp{
  position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:
    linear-gradient(45deg,var(--chk) 25%,transparent 25%),
    linear-gradient(-45deg,var(--chk) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--chk) 75%),
    linear-gradient(-45deg,transparent 75%,var(--chk) 75%),var(--card);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;
}
.cmp img{width:100%;height:auto;max-height:62vh;object-fit:contain;display:block}
.cmp .after{position:absolute;inset:0}
.cmp .after img{height:100%}
.cmp-line{position:absolute;top:0;bottom:0;width:3px;background:var(--magenta);transform:translateX(-1.5px);pointer-events:none}
.cmp-handle{
  position:absolute;top:50%;width:34px;height:34px;border-radius:50%;
  background:var(--magenta);transform:translate(-50%,-50%);pointer-events:none;
  display:grid;place-items:center;color:#fff;font:700 13px var(--font-m);
  box-shadow:0 6px 18px -4px rgba(255,77,141,.7);
}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp-tag{position:absolute;top:10px;font:600 11px var(--font-m);letter-spacing:.05em;background:rgba(0,0,0,.72);color:#fff;border-radius:7px;padding:4px 9px;pointer-events:none}
.cmp-tag.l{left:10px}.cmp-tag.r{right:10px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);
  background:var(--card-2);border:1px solid var(--line-2);color:var(--ink);border-radius:12px;padding:12px 18px;
  font:500 14px var(--font-b);box-shadow:0 14px 40px -10px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:.25s;z-index:120;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- intro das paginas de ferramenta ---------- */
.seo-intro{max-width:780px;margin:0 auto;padding:0 20px 8px;color:var(--ink-2);font-size:15.5px}
.seo-intro p{margin:0 0 12px}

/* ---------- cookie banner ---------- */
.cookiebar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:115;
  margin:0 auto;max-width:760px;
  background:var(--card-2);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 18px 50px -16px rgba(0,0,0,.7);
  padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  transform:translateY(140%);transition:transform .3s ease;
  padding-bottom:max(14px,env(safe-area-inset-bottom));
}
.cookiebar.show{transform:translateY(0)}
.cookiebar p{margin:0;flex:1;min-width:220px;color:var(--ink-2);font-size:13.5px;line-height:1.5}
.cbtns{display:flex;gap:8px;flex:none}
.cbtn{border-radius:999px;font:600 13.5px var(--font-b);padding:10px 18px;cursor:pointer;border:1px solid var(--line-2);background:transparent;color:var(--ink-2)}
.cbtn-no:hover{border-color:var(--ink-2);color:var(--ink)}
.cbtn-ok{border:0;background:linear-gradient(92deg,var(--magenta),var(--magenta-deep));color:#fff}
.cbtn-ok:hover{filter:brightness(1.08)}
@media(max-width:520px){.cookiebar{flex-direction:column;align-items:stretch}.cbtns{justify-content:stretch}.cbtn{flex:1}}

/* ---------- buscas relacionadas (SEO) ---------- */
.related{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.related li{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;color:var(--ink-2);font:500 13.5px var(--font-b);
}
.related li::before{content:"🔎 ";opacity:.7}