/* =============================================================
   QR3D — 1. Tokens
   ============================================================= */
:root{
  --bg:#0f1115;
  --panel:#161922;
  --panel-2:#1d212c;
  --line:#2a3040;
  --ink:#eef1f7;
  --ink-2:#a6afc2;
  --accent:#5eead4;
  --accent-2:#22d3ee;
  --warn:#fbbf24;
  --danger:#fb7185;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap:1180px;
  --r:14px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --shadow:0 18px 50px rgba(0,0,0,.35);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;tab-size:2;scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:16px;line-height:1.6;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
  background-image:radial-gradient(1100px 520px at 78% -8%, rgba(34,211,238,.10), transparent 60%),
                   radial-gradient(900px 480px at 8% 4%, rgba(94,234,212,.08), transparent 62%);
}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance;line-height:1.12;letter-spacing:-.02em}
::selection{background:var(--accent);color:#0b0d11}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* =============================================================
   3. Utilities
   ============================================================= */
.wrap{width:min(100% - 2rem, var(--wrap));margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:1rem;padding:.6rem 1rem;background:var(--accent);color:#0b0d11;z-index:9999;border-radius:8px;font-weight:600}
.skip-link:focus{top:1rem}

/* =============================================================
   4. Header / footer
   ============================================================= */
.site-head{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);background:rgba(15,17,21,.78);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800;letter-spacing:-.03em;font-size:1.15rem;color:var(--accent)}
.brand span{color:var(--ink)}
.brand b{color:var(--accent)}
.head-nav{display:none;gap:1.3rem;font-size:.94rem;color:var(--ink-2)}
.head-nav a:hover{color:var(--ink)}
@media(min-width:720px){.head-nav{display:flex}}
.lang{display:flex;gap:.2rem;align-items:center;font-size:.8rem;font-weight:700;letter-spacing:.04em}
.lang a,.lang span{padding:.28rem .5rem;border-radius:7px;border:1px solid var(--line);color:var(--ink-2)}
.lang a:hover{border-color:var(--accent);color:var(--accent)}
.lang span[aria-current]{background:var(--accent);border-color:var(--accent);color:#0b0d11}

.site-foot{border-top:1px solid var(--line);margin-top:4rem;padding:2.4rem 0 3rem;color:var(--ink-2);font-size:.92rem}
.foot-inner{display:grid;gap:.9rem}
.site-foot nav{display:flex;gap:1.2rem}
.site-foot a{text-decoration:underline;text-underline-offset:3px}
.site-foot a:hover{color:var(--ink)}
.credits{font-size:.8rem;opacity:.65}

/* =============================================================
   5. Hero
   ============================================================= */
.hero{padding:1.25rem 0 .9rem;max-width:820px}
@media(min-width:720px){.hero{padding:2.2rem 0 1.3rem}}
h1{font-size:clamp(1.5rem,5.2vw,2.85rem);font-weight:800}
.hero .sub{margin-top:.6rem;color:var(--ink-2);font-size:clamp(.94rem,2.4vw,1.1rem)}
.hero .sub b{color:var(--ink);font-weight:600}

/* =============================================================
   6. Tool card
   ============================================================= */
.tool-card{
  background:linear-gradient(180deg,var(--panel),#12151d);
  border:1px solid var(--line);border-radius:calc(var(--r) + 6px);
  padding:clamp(.9rem,2.4vw,1.5rem);box-shadow:var(--shadow);
}
.tool-grid{display:grid;gap:1.1rem}
@media(min-width:960px){.tool-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem;align-items:start}}

.panel{border:1px solid var(--line);border-radius:var(--r);padding:1rem;background:var(--panel-2);margin:0 0 .9rem}
.panel:last-child{margin-bottom:0}
.panel legend{padding:0 .5rem;font-weight:700;font-size:.9rem;color:var(--accent);letter-spacing:.01em}
.fl{display:block;font-size:.83rem;font-weight:600;color:var(--ink-2);margin:.85rem 0 .35rem;text-transform:uppercase;letter-spacing:.04em}
.panel > .fl:first-of-type,.panel div > .fl:first-child{margin-top:.2rem}
.hint{font-size:.82rem;color:var(--ink-2);margin-top:.4rem;opacity:.85}
.hint code{background:#0d1017;padding:.05rem .3rem;border-radius:4px}

input[type=text],select{
  width:100%;padding:.68rem .8rem;border-radius:10px;background:#0d1017;
  border:1px solid var(--line);color:var(--ink);font:inherit;font-size:.98rem;
  transition:border-color .2s var(--ease-out);
}
input[type=text]:focus,select:focus{border-color:var(--accent);outline:none}
input[type=text]::placeholder{color:#5b657b}
input[type=range]{width:100%;accent-color:var(--accent);margin-top:.2rem}
output{float:right;font-weight:700;color:var(--accent);text-transform:none;letter-spacing:0}

.seg{display:flex;gap:.4rem;background:#0d1017;padding:.28rem;border-radius:11px;border:1px solid var(--line)}
.seg-btn{flex:1;padding:.5rem;border-radius:8px;font-size:.9rem;font-weight:600;color:var(--ink-2);transition:.2s var(--ease-out)}
.seg-btn.is-on{background:var(--accent);color:#0b0d11}

.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.style-btn{padding:.55rem .2rem;border-radius:9px;border:1px solid var(--line);background:#0d1017;font-size:.8rem;font-weight:600;color:var(--ink-2);transition:.2s var(--ease-out)}
.style-btn.is-on{border-color:var(--accent);color:var(--accent);background:rgba(94,234,212,.08)}

.colors{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.2rem}
.swatch{display:block;border:1px solid var(--line);border-radius:10px;padding:.3rem;background:#0d1017}
input[type=color]{width:100%;height:38px;border:0;background:none;padding:0;cursor:pointer;border-radius:7px}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}

.center-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.emojis{display:flex;flex-wrap:wrap;gap:.3rem}
.emoji-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:#0d1017;font-size:1.05rem;line-height:1;transition:.18s var(--ease-out)}
.emoji-btn:hover{transform:translateY(-2px)}
.emoji-btn.is-on{border-color:var(--accent);background:rgba(94,234,212,.12)}
.btn-file{position:relative;overflow:hidden}

.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.fmt-btn{display:grid;justify-items:center;gap:.15rem;padding:.7rem .3rem;border-radius:11px;border:1px solid var(--line);background:#0d1017;color:var(--ink-2);transition:.2s var(--ease-out)}
.fmt-btn span{font-size:.83rem;font-weight:700;color:var(--ink);text-align:center;line-height:1.2}
.fmt-btn em{font-size:.72rem;font-style:normal;opacity:.7;text-align:center}
.fmt-btn.is-on{border-color:var(--accent);color:var(--accent);background:rgba(94,234,212,.08)}
.fmt-btn.is-on span{color:var(--accent)}

.check{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;font-weight:600;font-size:.95rem;padding:.2rem 0}
.check input{width:20px;height:20px;flex:none;accent-color:var(--accent);margin-top:.1rem;cursor:pointer}
#nfc-write{width:100%;margin-top:.6rem}

.two{display:grid;grid-template-columns:1fr;gap:.6rem}
@media(min-width:540px){.two{grid-template-columns:1fr 1fr;gap:1rem}}

.warn{display:block;margin-top:.6rem;padding:.55rem .7rem;border-radius:9px;font-size:.85rem;
  background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);color:#fde68a}
.warn[data-level=bad]{background:rgba(251,113,133,.1);border-color:rgba(251,113,133,.4);color:#fecdd3}

/* preview column */
.preview{display:grid;gap:1.1rem;align-content:start}
.prev-block{border:1px solid var(--line);border-radius:var(--r);padding:1rem;background:var(--panel-2)}
.prev-title{font-size:.9rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.7rem}
.prev-title small{float:right;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink-2);opacity:.8}
.qr-holder{display:grid;place-items:center;min-height:220px;background:#0d1017;border-radius:11px;padding:.9rem}
.qr-holder canvas,.qr-holder svg{border-radius:6px;width:100%;max-width:250px;height:auto}
.viewer{position:relative;height:clamp(230px,42vw,300px);background:#0d1017;border-radius:11px;overflow:hidden;display:grid;place-items:center;touch-action:none}
.viewer canvas{width:100%;height:100%;display:block}
.viewer-msg{position:absolute;inset:0;display:grid;place-items:center;padding:1.2rem;text-align:center;color:var(--ink-2);font-size:.9rem}
.legend{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:.6rem;font-size:.82rem;color:var(--ink-2)}
.legend span{display:flex;align-items:center;gap:.35rem}
.chip{width:13px;height:13px;border-radius:4px;border:1px solid var(--line);display:inline-block}
.legend .mm{margin-left:auto;font-weight:600;color:var(--ink)}

.dl-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.dl-status{margin-top:.55rem;font-size:.84rem;color:var(--accent);min-height:1.2em}
.dl-status[data-level=err]{color:var(--danger)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.68rem 1.05rem;border-radius:10px;font-weight:700;font-size:.92rem;transition:.2s var(--ease-out);border:1px solid transparent}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#0a1014}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(34,211,238,.24)}
.btn-ghost{border-color:var(--line);background:#0d1017;color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-big{flex:1 1 100%}
.btn[disabled]{opacity:.55;cursor:progress;transform:none;box-shadow:none}

.privacy{margin-top:1rem;padding:.75rem .9rem;border-radius:11px;background:rgba(94,234,212,.07);border:1px solid rgba(94,234,212,.22);font-size:.88rem;color:#bff3e9}

/* =============================================================
   7. Content sections
   ============================================================= */
.section{padding:2.6rem 0 .5rem}
.section h2{font-size:clamp(1.35rem,3.6vw,1.9rem);margin-bottom:1.2rem}
.steps{list-style:none;display:grid;gap:1rem;padding:0}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{position:relative;padding:1.3rem 1.2rem 1.2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.step-n{position:absolute;top:-14px;left:1.1rem;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#0a1014;font-weight:800}
.steps h3{font-size:1.05rem;margin:.35rem 0 .45rem}
.steps p{color:var(--ink-2);font-size:.93rem}
.steps b{color:var(--ink)}

.cards{display:grid;gap:.9rem}
@media(min-width:660px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{padding:1.15rem;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);transition:.25s var(--ease-out)}
.card:hover{border-color:var(--accent);transform:translateY(-3px)}
.card h3{font-size:1rem;margin-bottom:.4rem}
.card p{color:var(--ink-2);font-size:.91rem}

.prose{max-width:820px}
.prose h3{font-size:1.1rem;margin:1.6rem 0 .5rem;color:var(--accent)}
.prose p{color:var(--ink-2);margin-bottom:.8rem}
.prose b{color:var(--ink)}

/* Bloque de compra con enlaces de afiliado */
.buy-box{margin:1.5rem 0;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(94,234,212,.06),rgba(94,234,212,.02))}
.buy-t{font-weight:800;font-size:1rem;color:var(--ink);margin-bottom:.7rem}
.buy-box ul{list-style:none;padding:0;display:grid;gap:.6rem}
.buy-box li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2);font-size:.93rem}
.buy-box li::before{content:"🛒";flex:none}
.buy-box a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.buy-box a:hover{color:var(--accent-2)}
.buy-note{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:.79rem;color:var(--ink-2);opacity:.9}

.faq{display:grid;gap:.55rem;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:11px;background:var(--panel);overflow:hidden}
.faq summary{padding:.9rem 1rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:800;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 1rem 1rem;color:var(--ink-2);font-size:.93rem}

/* =============================================================
   8. Ad slots (placeholders — vacíos a propósito)
   ============================================================= */
.ad-slot{display:grid;place-items:center;border:1px dashed #3a4359;border-radius:11px;background:rgba(255,255,255,.015);color:#5f6a80;font-size:.75rem;font-weight:700;letter-spacing:.22em}
.ad-leaderboard{min-height:96px;margin:1.6rem 0 .4rem}
.ad-incontent{min-height:250px;margin:1.8rem 0}
.ad-corner{min-height:100px;width:100%}
.ad-modal-slot{min-height:250px;width:100%;margin:.9rem 0 1rem}

.ad-toast{position:fixed;right:12px;bottom:12px;z-index:60;width:min(300px,calc(100vw - 24px));
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:.75rem;box-shadow:var(--shadow)}
.ad-toast-x{position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-size:1rem;line-height:1;display:grid;place-items:center}

.ad-modal{border:0;padding:0;background:transparent;max-width:min(94vw,420px);color:var(--ink)}
.ad-modal::backdrop{background:rgba(5,7,10,.72)}
.ad-modal-in{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.2rem 1.2rem;text-align:center;box-shadow:var(--shadow)}
.ad-modal-x{position:absolute;top:.5rem;right:.6rem;width:30px;height:30px;border-radius:50%;font-size:1.2rem;color:var(--ink-2)}
.ad-modal-x:hover{color:var(--ink)}
.ad-modal-t{font-weight:700;font-size:1rem}
.ad-modal .btn{width:100%}

/* =============================================================
   9. Legal pages
   ============================================================= */
.legal{max-width:760px;padding:2.4rem 0}
.legal h1{font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:1rem}
.legal h2{font-size:1.1rem;margin:1.7rem 0 .5rem;color:var(--accent)}
.legal p,.legal li{color:var(--ink-2);margin-bottom:.7rem}
.legal ul{padding-left:1.2rem}
.legal .todo{border:1px dashed var(--warn);color:#fde68a;padding:.7rem .9rem;border-radius:10px;font-size:.88rem}

/* =============================================================
   10. Reduced motion — solo efectos intrusivos
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* =============================================================
   11. Página NFC (herramienta de grabado)
   ============================================================= */
.nfc-card{background:linear-gradient(180deg,var(--panel),#12151d);border:1px solid var(--line);
  border-radius:calc(var(--r) + 6px);padding:clamp(1rem,3vw,1.8rem);box-shadow:var(--shadow);max-width:720px}
.nfc-card .fl{margin-top:0}
.nfc-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.nfc-actions .btn{flex:1 1 auto}
#nfc-status{margin-top:.9rem;min-height:1.4em;font-size:.95rem;font-weight:600;color:var(--ink-2)}
#nfc-status[data-level=ok]{color:var(--accent)}
#nfc-status[data-level=err]{color:var(--danger)}
.nfc-alt{border:1px dashed var(--line);border-radius:var(--r);padding:1rem 1.1rem;background:#0d1017}
.nfc-alt h3{font-size:1rem;margin-bottom:.5rem;color:var(--accent)}
.nfc-alt ol{padding-left:1.2rem;color:var(--ink-2);font-size:.93rem;display:grid;gap:.35rem}
.cross{display:block;margin:1.6rem 0;padding:1.1rem 1.2rem;border:1px solid var(--accent);border-radius:var(--r);
  background:rgba(94,234,212,.07);transition:.25s var(--ease-out)}
.cross:hover{background:rgba(94,234,212,.13);transform:translateY(-2px)}
.cross b{display:block;color:var(--accent);font-size:1.02rem;margin-bottom:.25rem}
.cross span{color:var(--ink-2);font-size:.92rem}