/* ============================================================
   CriarQR.com.br – shared.css  |  v2.0  |  2025
   Light mode padrão · Dark mode via [data-theme="dark"]
   AdSense ready · Mobile-first · Acessível
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;border:0;outline:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
html{scroll-behavior:smooth}

/* ══════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
══════════════════════════════════════════════════════════ */
:root{
  /* ─ Surface ─ */
  --bg:       #F8FAFC;
  --s0:       #FFFFFF;
  --s1:       #F1F5F9;
  --s2:       #E2E8F0;
  --border:   rgba(0,0,0,0.07);
  --border-h: rgba(0,0,0,0.13);

  /* ─ Brand ─ */
  --v:   #7C3AED;
  --vl:  #8B5CF6;
  --vd:  #6D28D9;
  --vg:  rgba(124,58,237,0.12);

  --em:  #059669;
  --eml: #10B981;
  --emg: rgba(5,150,105,0.1);

  --go:  #D97706;
  --gol: #F59E0B;
  --gog: rgba(217,119,6,0.1);

  --sky: #0284C7;
  --pk:  #DB2777;

  /* ─ Text ─ */
  --tx:  #0F172A;
  --txm: #475569;
  --txs: #94A3B8;
  --txx: #CBD5E1;

  /* ─ Shadow ─ */
  --sh0: 0 1px 2px rgba(0,0,0,0.05);
  --sh1: 0 1px 4px rgba(0,0,0,0.07),0 2px 8px rgba(0,0,0,0.05);
  --sh2: 0 4px 16px rgba(0,0,0,0.09);
  --sh3: 0 8px 32px rgba(0,0,0,0.11);
  --sh4: 0 20px 60px rgba(0,0,0,0.13);

  /* ─ Radius ─ */
  --r:   10px;
  --rl:  16px;
  --rxl: 24px;

  /* ─ Transition ─ */
  --t: .17s ease;

  /* ─ Fonts ─ */
  --fd: 'Sora',sans-serif;
  --fb: 'Inter',sans-serif;
}

[data-theme="dark"]{
  --bg:      #050712;
  --s0:      #0C0F1F;
  --s1:      #141829;
  --s2:      #1E2340;
  --border:  rgba(255,255,255,0.07);
  --border-h:rgba(255,255,255,0.13);

  --vl: #A67FFB;
  --vg: rgba(124,58,237,0.22);

  --eml:#34D399;
  --emg:rgba(16,185,129,0.16);

  --go: #FBBF24;
  --gol:#FCD34D;
  --gog:rgba(251,191,36,0.14);

  --sky:#38BDF8;
  --pk: #EC4899;

  --tx: #F1F5F9;
  --txm:#94A3B8;
  --txs:#475569;
  --txx:#334155;

  --sh0:0 1px 2px rgba(0,0,0,0.25);
  --sh1:0 2px 8px rgba(0,0,0,0.35);
  --sh2:0 4px 16px rgba(0,0,0,0.45);
  --sh3:0 8px 32px rgba(0,0,0,0.55);
  --sh4:0 20px 60px rgba(0,0,0,0.65);
}

/* ══════════════════════════════════════════════════════════
   BASE TYPOGRAPHY
══════════════════════════════════════════════════════════ */
body{
  font-family:var(--fb);
  background:var(--bg);
  color:var(--tx);
  line-height:1.65;
  min-height:100vh;
  transition:background var(--t),color var(--t);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{font-family:var(--fd);font-weight:700;line-height:1.18;color:var(--tx)}
p{color:var(--txm)}
small{font-size:.78rem;color:var(--txs)}

/* ══════════════════════════════════════════════════════════
   COPY PROTECTION
══════════════════════════════════════════════════════════ */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text!important;user-select:text!important}

/* ══════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:200;
  height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:0 clamp(.875rem,4vw,2.25rem);
  background:var(--s0);
  border-bottom:1px solid var(--border);
  box-shadow:var(--sh0);
  transition:background var(--t),border-color var(--t),box-shadow var(--t);
}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:.45rem;font-family:var(--fd);font-size:1.05rem;font-weight:800;color:var(--tx);white-space:nowrap;flex-shrink:0}
.nav-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,var(--v),var(--eml));border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Desktop menu */
.nav-menu{display:flex;align-items:center;gap:.1rem;flex:1;justify-content:center}

/* Dropdown wrapper */
.nav-dd-wrap{position:relative}
.nav-dd-btn{
  display:flex;align-items:center;gap:.3rem;
  padding:.38rem .65rem;border-radius:8px;
  background:transparent;border:0;cursor:pointer;
  font-size:.825rem;font-weight:500;color:var(--txm);
  transition:color var(--t),background var(--t);
}
.nav-dd-btn svg{width:13px;height:13px;transition:transform var(--t)}
.nav-dd-btn:hover{color:var(--tx);background:var(--s1)}
.nav-dd-wrap:hover .nav-dd-btn svg,.nav-dd-wrap:focus-within .nav-dd-btn svg{transform:rotate(180deg)}

.nav-dd{
  position:absolute;top:calc(100% + 8px);left:0;
  min-width:195px;
  background:var(--s0);border:1px solid var(--border);
  border-radius:var(--rl);box-shadow:var(--sh3);
  padding:.4rem;
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity var(--t),transform var(--t);
  z-index:300;
}
.nav-dd-wrap:hover .nav-dd,.nav-dd-wrap:focus-within .nav-dd{opacity:1;pointer-events:all;transform:translateY(0)}
.nav-dd a{
  display:flex;align-items:center;gap:.45rem;
  padding:.5rem .7rem;border-radius:8px;
  font-size:.8rem;font-weight:500;color:var(--txm);
  transition:color var(--t),background var(--t);
}
.nav-dd a:hover{color:var(--tx);background:var(--s1)}
.nav-dd-sep{height:1px;background:var(--border);margin:.35rem 0}

/* Simple nav link */
.nav-link{
  display:inline-block;padding:.38rem .65rem;border-radius:8px;
  font-size:.825rem;font-weight:500;color:var(--txm);
  transition:color var(--t),background var(--t);
}
.nav-link:hover{color:var(--tx);background:var(--s1)}
.nav-link.active{color:var(--v);background:var(--vg)}

/* Nav actions */
.nav-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}

/* Theme toggle */
.theme-btn{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
  background:var(--s1);color:var(--txm);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);flex-shrink:0;
}
.theme-btn:hover{background:var(--s2);color:var(--tx);border-color:var(--border-h)}
.theme-btn svg{width:15px;height:15px}
.theme-btn .t-sun{display:none}
[data-theme="dark"] .theme-btn .t-moon{display:none}
[data-theme="dark"] .theme-btn .t-sun{display:block}

/* CTA button nav */
.nav-cta{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.45rem .9rem;border-radius:8px;
  font-size:.8rem;font-weight:700;font-family:var(--fd);
  color:#fff;background:linear-gradient(135deg,var(--v),var(--vl));
  box-shadow:0 3px 10px var(--vg);
  transition:transform var(--t),box-shadow var(--t),opacity var(--t);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(124,58,237,.4)}
.nav-cta svg{width:13px;height:13px}

/* Hamburger */
.nav-ham{
  display:none;flex-direction:column;justify-content:center;
  gap:4px;width:34px;height:34px;border-radius:8px;
  border:1px solid var(--border);background:var(--s1);
  cursor:pointer;padding:7px;transition:background var(--t);flex-shrink:0;
}
.nav-ham span{display:block;width:100%;height:1.5px;background:var(--txm);border-radius:2px;transition:all .25s ease}
.nav-ham.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-ham.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* Responsive nav */
@media(max-width:900px){
  .nav-menu{
    display:none;flex-direction:column;align-items:flex-start;
    position:absolute;top:62px;left:0;right:0;
    background:var(--s0);border-bottom:1px solid var(--border);
    padding:.75rem;box-shadow:var(--sh3);gap:.2rem;z-index:199;
  }
  .nav-menu.open{display:flex}
  .nav-ham{display:flex}
  .nav-dd-wrap{width:100%}
  .nav-dd-btn{width:100%;font-size:.875rem;padding:.5rem .7rem}
  .nav-dd{
    position:static;opacity:1;pointer-events:none;transform:none;
    box-shadow:none;border:none;
    background:var(--s1);border-radius:var(--r);
    margin:.2rem 0 0 .5rem;display:none;padding:.3rem;
  }
  .nav-dd-wrap.open .nav-dd{display:block;pointer-events:all}
  .nav-dd-wrap.open .nav-dd-btn svg{transform:rotate(180deg)}
  .nav-link{width:100%;padding:.5rem .7rem;font-size:.875rem}
}

/* ══════════════════════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════════════════════ */
.breadcrumb{
  padding:.65rem clamp(1rem,5vw,2.5rem);
  font-size:.76rem;color:var(--txs);
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  border-bottom:1px solid var(--border);background:var(--s1);
}
.breadcrumb a{color:var(--txm);transition:color var(--t)}
.breadcrumb a:hover{color:var(--v)}
.breadcrumb svg{width:11px;height:11px;flex-shrink:0}

/* ══════════════════════════════════════════════════════════
   ADSENSE SLOTS
   Para ativar: substitua ca-pub-XXXXXXXX pelo seu Publisher ID
   e os data-ad-slot pelos slot IDs do AdSense
══════════════════════════════════════════════════════════ */
.ad-slot{
  width:100%;
  padding:.5rem clamp(1rem,5vw,2.5rem);
  background:var(--s1);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-align:center;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.25rem;
  transition:background var(--t);
}
.ad-slot-label{
  font-size:.6rem;color:var(--txs);
  text-transform:uppercase;letter-spacing:.09em;
}
.ad-slot ins{display:block;width:100%;max-width:728px}
/* Placeholder visual (remover ao ativar o AdSense) */
.ad-ph{
  width:100%;max-width:728px;height:90px;
  background:var(--s2);border:1px dashed var(--border-h);
  border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  font-size:.75rem;color:var(--txs);gap:.4rem;
}
.ad-ph-rect{width:100%;max-width:336px;height:280px}

/* ══════════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════════ */
.sec{padding:clamp(2.5rem,5vw,4.5rem) clamp(1rem,5vw,2.5rem)}
.sec-alt{background:var(--s0)}
.sec-hd{text-align:center;max-width:560px;margin:0 auto 2.5rem}
.sec-ey{
  display:inline-block;font-size:.7rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--vl);margin-bottom:.5rem;
}
.sec-title{font-size:clamp(1.4rem,3.5vw,2.15rem);letter-spacing:-.025em;margin-bottom:.6rem}
.sec-sub{font-size:.925rem;color:var(--txm);line-height:1.78}

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.62rem 1.15rem;border-radius:var(--r);cursor:pointer;
  font-family:var(--fd);font-size:.855rem;font-weight:600;
  white-space:nowrap;transition:all var(--t);border:0;
}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-full{width:100%}
.btn-lg{padding:.78rem 1.65rem;font-size:.95rem}
.btn-sm{padding:.35rem .75rem;font-size:.75rem;border-radius:7px}

.btn-primary{color:#fff;background:linear-gradient(135deg,var(--v),var(--vl));box-shadow:0 4px 12px var(--vg)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px rgba(124,58,237,.42)}

.btn-secondary{color:var(--txm);background:var(--s1);border:1px solid var(--border)}
.btn-secondary:hover:not(:disabled){color:var(--tx);background:var(--s2);border-color:var(--border-h)}

.btn-ghost{color:var(--vl);background:transparent;border:1px solid rgba(124,58,237,.3)}
.btn-ghost:hover:not(:disabled){background:var(--vg)}

.btn-green{color:#fff;background:linear-gradient(135deg,var(--em),var(--eml));box-shadow:0 4px 12px var(--emg)}
.btn-green:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px rgba(5,150,105,.35)}

/* ══════════════════════════════════════════════════════════
   FORM ELEMENTS
══════════════════════════════════════════════════════════ */
.fg{margin-bottom:.85rem}
.fg label{
  display:block;font-size:.71rem;font-weight:700;
  color:var(--txm);margin-bottom:.32rem;
  letter-spacing:.04em;text-transform:uppercase;
}
.fg input,.fg select,.fg textarea{
  width:100%;padding:.6rem .82rem;
  background:var(--s0);border:1.5px solid var(--border);
  border-radius:var(--r);color:var(--tx);
  font-size:.875rem;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--v);
  box-shadow:0 0 0 3px var(--vg);
}
.fg input::placeholder,.fg textarea::placeholder{color:var(--txx)}
.fg select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;
  padding-right:2.1rem;
}
.fg textarea{resize:vertical;min-height:88px;line-height:1.6}
.fg-hint{font-size:.7rem;color:var(--txs);margin-top:.22rem}
.fg-row-2{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.fg-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.65rem}
@media(max-width:480px){.fg-row-2,.fg-row-3{grid-template-columns:1fr}}

/* Radio pills */
.radio-pills{display:flex;gap:.3rem;flex-wrap:wrap}
.rpill{position:relative}
.rpill input{position:absolute;opacity:0;width:0;height:0}
.rpill label{
  display:inline-flex;align-items:center;
  padding:.38rem .75rem;border:1.5px solid var(--border);border-radius:100px;
  font-size:.78rem;font-weight:600;color:var(--txm);cursor:pointer;
  transition:all var(--t);text-transform:none;letter-spacing:0;
}
.rpill input:checked + label{border-color:var(--v);color:var(--vl);background:var(--vg)}

/* Checkboxes */
.check-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chk-item{display:flex;align-items:center;gap:.35rem;cursor:pointer;font-size:.83rem;color:var(--txm)}
.chk-item input{width:15px;height:15px;accent-color:var(--v);cursor:pointer;flex-shrink:0}

/* ══════════════════════════════════════════════════════════
   QR GENERATOR WIDGET
══════════════════════════════════════════════════════════ */
.gen-card{
  max-width:1020px;margin:0 auto;
  background:var(--s0);border:1px solid var(--border);
  border-radius:var(--rxl);overflow:hidden;box-shadow:var(--sh2);
}

/* Tabs */
.tabs-scroll{
  padding:1rem 1.25rem 0;
  border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;
  background:var(--s1);
}
.tabs-scroll::-webkit-scrollbar{display:none}
.tabs{display:flex;gap:.15rem;min-width:max-content}
.tab{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.45rem .8rem;border-radius:8px 8px 0 0;
  font-size:.78rem;font-weight:600;font-family:var(--fd);
  color:var(--txm);background:transparent;cursor:pointer;
  border:1px solid transparent;border-bottom:0;
  transition:all var(--t);position:relative;bottom:-1px;
}
.tab:hover{color:var(--tx);background:rgba(124,58,237,.07)}
.tab.active{color:var(--tx);background:var(--s0);border-color:var(--border);border-bottom-color:var(--s0)}
.tab-ic{font-size:.9rem}
@media(max-width:480px){.tab span:not(.tab-ic){display:none}}

/* Gen body */
.gen-body{display:grid;grid-template-columns:1fr 280px;min-height:440px}
@media(max-width:680px){.gen-body{grid-template-columns:1fr}}

/* Form panel */
.gen-form{padding:1.75rem;border-right:1px solid var(--border)}
@media(max-width:680px){.gen-form{border-right:0;border-bottom:1px solid var(--border)}}

.fsec{display:none}
.fsec.active{display:block}
.fsec-title{font-family:var(--fd);font-size:.88rem;font-weight:600;color:var(--tx);margin-bottom:1.1rem}

/* Pix badge */
.pix-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;color:var(--go);padding:.25rem .6rem;
  border:1px solid rgba(217,119,6,.3);border-radius:100px;
  background:var(--gog);margin-bottom:.9rem;
}

/* Preview panel */
.gen-preview{
  padding:1.5rem;display:flex;flex-direction:column;
  align-items:center;gap:.85rem;background:var(--s1);
}
.preview-lbl{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txs);align-self:flex-start}

.qr-frame{
  width:188px;height:188px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;box-shadow:var(--sh2);background:#fff;
  transition:box-shadow var(--t);position:relative;
}
.qr-frame.empty{background:var(--bg);border:2px dashed var(--border-h)}
.qr-ph{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  color:var(--txs);font-size:.75rem;text-align:center;
}
.qr-ph svg{width:36px;height:36px;opacity:.3}
#qr-out{display:none}
/* Canvas gerado na mesma dimensão do frame — sem redimensionamento CSS para evitar cortes */
#qr-out canvas,#qr-out img{
  display:block;
  border-radius:6px;
  image-rendering:pixelated;   /* crisp em HiDPI */
  max-width:188px;
  max-height:188px;
}

@keyframes qr-pulse{
  0%{box-shadow:var(--sh2)}
  50%{box-shadow:var(--sh2),0 0 0 6px rgba(124,58,237,.18)}
  100%{box-shadow:var(--sh2)}
}
.qr-frame.pulse{animation:qr-pulse 1.1s ease-out}

/* Color pickers */
.clr-row{display:flex;gap:.5rem;width:100%}
.clr-f{flex:1}
.clr-f label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--txm);margin-bottom:.28rem}
.clr-inp{
  display:flex;align-items:center;gap:.4rem;
  padding:.36rem .5rem;background:var(--s0);
  border:1.5px solid var(--border);border-radius:8px;cursor:pointer;
  transition:border-color var(--t);
}
.clr-inp:hover{border-color:var(--border-h)}
.clr-inp input[type="color"]{width:20px;height:20px;border:0;border-radius:4px;cursor:pointer;padding:0;background:0}
.clr-hex{font-size:.72rem;font-family:monospace;color:var(--txm)}

/* EC */
.ec-wrap{width:100%}
.ec-wrap label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--txm);margin-bottom:.28rem}
.ec-wrap select{
  width:100%;padding:.42rem 2rem .42rem .55rem;
  background:var(--s0);border:1.5px solid var(--border);border-radius:8px;
  color:var(--txm);font-size:.78rem;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5rem center;
  transition:border-color var(--t);
}
.ec-wrap select:focus{border-color:var(--v)}

/* Action buttons */
.gen-btns{display:flex;flex-direction:column;gap:.4rem;width:100%}

/* ══════════════════════════════════════════════════════════
   CARDS / GRIDS
══════════════════════════════════════════════════════════ */
.card{
  background:var(--s0);border:1px solid var(--border);
  border-radius:var(--rl);padding:1.3rem;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.card:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:var(--sh2)}

.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.9rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════
   STEPS
══════════════════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:1.25rem;max-width:820px;margin:0 auto}
.step{text-align:center;padding:1rem}
.step-n{
  width:46px;height:46px;border-radius:50%;margin:0 auto .9rem;
  background:var(--vg);border:1px solid rgba(124,58,237,.3);
  color:var(--vl);font-family:var(--fd);font-size:1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.step h3{font-family:var(--fd);font-size:.9rem;font-weight:600;margin-bottom:.35rem}
.step p{font-size:.82rem;color:var(--txm);line-height:1.65}

/* ══════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════ */
.faq-list{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:.38rem}
.faq-item{background:var(--s0);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color var(--t)}
.faq-item.open{border-color:var(--border-h)}
.faq-q{
  width:100%;padding:.9rem 1.1rem;background:0;border:0;
  color:var(--tx);font-family:var(--fd);font-size:.85rem;font-weight:600;
  text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:.65rem;
  transition:background var(--t);
}
.faq-q:hover{background:var(--s1)}
.faq-q svg{flex-shrink:0;width:15px;height:15px;color:var(--txs);transition:transform .3s ease}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-body{max-height:0;overflow:hidden;transition:max-height .33s ease}
.faq-item.open .faq-body{max-height:380px}
.faq-inner{padding:.05rem 1.1rem .9rem;font-size:.83rem;color:var(--txm);line-height:1.78}

/* ══════════════════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════════════════ */
.stats-bar{
  display:flex;flex-wrap:wrap;justify-content:center;
  background:var(--s0);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.stat-item{
  flex:1;min-width:130px;max-width:220px;
  padding:.9rem 1.25rem;border-right:1px solid var(--border);
  display:flex;align-items:center;gap:.55rem;
}
.stat-item:last-child{border-right:0}
.stat-em{font-size:1rem}
.stat-t strong{display:block;font-family:var(--fd);font-size:.82rem;color:var(--tx)}
.stat-t span{font-size:.72rem;color:var(--txm)}

/* ══════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.22rem .6rem;border-radius:100px;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
}
.badge-v{background:var(--vg);color:var(--vl);border:1px solid rgba(124,58,237,.25)}
.badge-g{background:var(--emg);color:var(--eml);border:1px solid rgba(16,185,129,.25)}
.badge-go{background:var(--gog);color:var(--gol);border:1px solid rgba(251,191,36,.25)}

/* ══════════════════════════════════════════════════════════
   TOOL OUTPUT / COPY ROW
══════════════════════════════════════════════════════════ */
.output-box{
  background:var(--s1);border:1.5px solid var(--border);
  border-radius:var(--r);padding:.78rem .88rem;
  font-family:monospace;font-size:.865rem;
  color:var(--tx);word-break:break-all;
  min-height:58px;line-height:1.6;
  transition:border-color var(--t),background var(--t);
}
.copy-row{display:flex;align-items:stretch;gap:.45rem}
.copy-row input{
  flex:1;padding:.6rem .82rem;
  background:var(--s1);border:1.5px solid var(--border);border-radius:var(--r);
  color:var(--tx);font-size:.86rem;
  transition:border-color var(--t);
}
.copy-row input:focus{border-color:var(--v);outline:0}

/* Password strength bar */
.strength-bar{height:4px;border-radius:2px;background:var(--s2);margin-top:.45rem;overflow:hidden}
.strength-fill{height:100%;border-radius:2px;width:0;transition:width .3s ease,background .3s ease}
.sf1{width:25%;background:#EF4444}
.sf2{width:50%;background:var(--go)}
.sf3{width:75%;background:var(--eml)}
.sf4{width:100%;background:var(--em)}

/* ══════════════════════════════════════════════════════════
   CONTENT BODY (artigos/páginas de texto)
══════════════════════════════════════════════════════════ */
.content-body{max-width:760px;margin:0 auto}
.content-body h2{font-size:clamp(1.15rem,2.8vw,1.55rem);margin:2rem 0 .65rem}
.content-body h3{font-size:1rem;margin:1.4rem 0 .45rem}
.content-body p{margin-bottom:.9rem;font-size:.9rem;line-height:1.82;color:var(--txm)}
.content-body ul,.content-body ol{margin:.65rem 0 .9rem 1.4rem;list-style:disc}
.content-body li{font-size:.9rem;color:var(--txm);margin-bottom:.3rem;line-height:1.7}
.content-body a{color:var(--vl);text-decoration:underline;text-decoration-color:var(--vg)}
.content-body a:hover{color:var(--v)}
.content-body strong{color:var(--tx);font-weight:600}
.content-body table{width:100%;border-collapse:collapse;font-size:.85rem;margin:1rem 0}
.content-body th{background:var(--s1);padding:.6rem .85rem;text-align:left;font-weight:600;color:var(--tx);border-bottom:1px solid var(--border)}
.content-body td{padding:.55rem .85rem;border-bottom:1px solid var(--border);color:var(--txm)}
.content-body tr:hover td{background:var(--s1)}

/* ══════════════════════════════════════════════════════════
   RELATED TOOLS
══════════════════════════════════════════════════════════ */
.tool-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.tool-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .85rem;background:var(--s1);
  border:1px solid var(--border);border-radius:100px;
  font-size:.8rem;font-weight:500;color:var(--txm);
  transition:all var(--t);
}
.tool-chip:hover{background:var(--s0);border-color:var(--border-h);color:var(--tx);box-shadow:var(--sh1);transform:translateY(-1px)}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer{
  background:var(--s0);
  border-top:1px solid var(--border);
  padding:2.75rem clamp(1rem,5vw,2.5rem) 1.75rem;
  transition:background var(--t);
}
.footer-grid{
  display:grid;
  grid-template-columns:200px repeat(3,1fr);
  gap:2rem;max-width:1080px;margin:0 auto 2rem;
}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footer-grid{grid-template-columns:1fr}}

.footer-brand{display:flex;flex-direction:column;gap:.65rem}
.footer-brand-logo{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--fd);font-weight:800;font-size:1rem;color:var(--tx);
}
.footer-brand-desc{font-size:.8rem;color:var(--txm);line-height:1.7}

.footer-col-h{
  font-family:var(--fd);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx);margin-bottom:.75rem;
}
.footer-links{display:flex;flex-direction:column;gap:.35rem}
.footer-links a{
  font-size:.8rem;color:var(--txm);
  display:flex;align-items:center;gap:.3rem;
  transition:color var(--t);
}
.footer-links a:hover{color:var(--vl)}

.footer-bottom{
  max-width:1080px;margin:0 auto;
  padding-top:1.25rem;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;flex-wrap:wrap;
}
.footer-copy{font-size:.75rem;color:var(--txs)}
.footer-legal{display:flex;gap:1.1rem}
.footer-legal a{font-size:.75rem;color:var(--txs);transition:color var(--t)}
.footer-legal a:hover{color:var(--txm)}

/* ══════════════════════════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════════════════════════ */
.back-top{
  position:fixed;bottom:1.35rem;right:1.35rem;z-index:150;
  width:38px;height:38px;border-radius:50%;border:0;
  background:var(--v);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px var(--vg);
  opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:all .3s ease;
}
.back-top.show{opacity:1;pointer-events:all;transform:translateY(0)}
.back-top:hover{background:var(--vl);transform:translateY(-2px)}
.back-top svg{width:17px;height:17px}

/* ══════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════ */
#_toast{
  position:fixed;bottom:1.35rem;left:50%;z-index:9999;
  transform:translateX(-50%) translateY(130%);
  background:var(--s0);border:1px solid var(--border);
  border-radius:var(--rl);padding:.68rem 1.15rem;
  color:var(--tx);font-size:.83rem;font-weight:500;
  box-shadow:var(--sh4);
  display:flex;align-items:center;gap:.45rem;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  max-width:92vw;white-space:nowrap;
}
#_toast.show{transform:translateX(-50%) translateY(0)}
#_toast.ok{border-color:var(--em)}
#_toast.err{border-color:#EF4444}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero{
  position:relative;text-align:center;overflow:hidden;
  padding:clamp(3rem,7vw,5.5rem) clamp(1rem,5vw,2.5rem) clamp(2rem,5vw,4rem);
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 65% 55% at 50% -10%,rgba(124,58,237,.12) 0%,transparent 70%),
             radial-gradient(ellipse 40% 35% at 82% 60%,rgba(16,185,129,.07) 0%,transparent 65%);
}
[data-theme="dark"] .hero::before{
  background:radial-gradient(ellipse 65% 55% at 50% -10%,rgba(124,58,237,.22) 0%,transparent 70%),
             radial-gradient(ellipse 40% 35% at 82% 60%,rgba(16,185,129,.12) 0%,transparent 65%);
}
.hero-ey{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--eml);padding:.27rem .7rem;margin-bottom:1.1rem;
  border:1px solid rgba(52,211,153,.25);border-radius:100px;
  background:rgba(16,185,129,.07);
}
[data-theme="dark"] .hero-ey{background:rgba(16,185,129,.1)}
.hero-h1{
  position:relative;
  font-size:clamp(1.9rem,5.5vw,3.75rem);font-weight:800;
  letter-spacing:-.03em;margin-bottom:1rem;
  background:linear-gradient(160deg,var(--tx) 45%,rgba(15,23,42,.5));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-theme="dark"] .hero-h1{background:linear-gradient(160deg,#fff 40%,rgba(255,255,255,.5));-webkit-background-clip:text;background-clip:text}
.hero-h1 em{
  font-style:normal;
  background:linear-gradient(130deg,var(--vl),var(--eml));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{position:relative;font-size:clamp(.95rem,2.2vw,1.1rem);color:var(--txm);max-width:500px;margin:0 auto 1.5rem;line-height:1.78}
.hero-badges{position:relative;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:2rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.75rem;color:var(--txm);padding:.27rem .65rem;
  border:1px solid var(--border);border-radius:100px;background:var(--s0);
}
.hero-badge svg{width:11px;height:11px;color:var(--em);flex-shrink:0}
.hero-btn{
  position:relative;display:inline-flex;align-items:center;gap:.45rem;
  padding:.82rem 1.9rem;border-radius:100px;
  font-family:var(--fd);font-size:.95rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--v),var(--vl));
  box-shadow:0 6px 24px var(--vg);
  transition:transform var(--t),box-shadow var(--t);
}
.hero-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(124,58,237,.42)}
.hero-btn svg{width:17px;height:17px}

/* ══════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════ */
@media print{
  .nav,.footer,.ad-slot,.back-top,#_toast{display:none!important}
}