/*!
 * © 2026 Weimar Armando Chávez García. Todos los derechos reservados.
 * Proyecto: QR Personalizado — creadorqrpersonalizado.universopráctico.com
 * Queda prohibida la reproducción, distribución o modificación total o
 * parcial de estos estilos sin autorización expresa y por escrito del autor.
 * fingerprint: WACG-QRP-2026-CSS
 */
:root{--bg:#faf9f6;--surface:#ffffff;--ink:#1b1b22;--ink-soft:#4a4a55;--border:#e4e1d8;--accent:#d8622f;--accent-ink:#ffffff;--cream:#f2f1ec;--success:#2f7a4f;--radius:14px;--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--display:"Manrope",var(--sans);--ease-out:cubic-bezier(0.16, 1, 0.3, 1);--shadow:0 2px 10px rgba(20, 20, 24, 0.06),0 1px 2px rgba(20,20,24,.05)}
@media (prefers-color-scheme:dark){
:root{--bg:#16161a;--surface:#1f1f25;--ink:#f2f1ec;--ink-soft:#b8b6ae;--border:#33333c;--cream:#26262d}
}
*,::after,::before{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;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
canvas,img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:0 0}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);text-wrap:balance;line-height:1.15;letter-spacing:-.01em}
p{text-wrap:pretty}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip-link{position:fixed;top:-100px;left:1rem;padding:.6rem 1rem;background:var(--ink);color:var(--bg);z-index:9999;border-radius:8px;font-weight:600}
.skip-link:focus{top:1rem}
.container{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.container-narrow{max-width:760px}
.section{padding:3.5rem 0}
.section-title{font-size:clamp(1.5rem, 3vw, 2.1rem);margin-bottom:1.75rem}
.accent{color:var(--accent)}
.site-header{border-bottom:1px solid var(--border);background:var(--surface)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:700;color:var(--ink)}
.header-nav{display:flex;gap:1.5rem}
.header-nav a{font-size:.93rem;font-weight:500;color:var(--ink-soft);transition:color .2s var(--ease-out)}
.header-nav a:hover{color:var(--ink)}
@media (max-width:720px){
.header-nav{display:none}
}
.hero{padding:2.75rem 0 1.75rem;text-align:center}
.hero h1{font-size:clamp(1.9rem, 4.4vw, 3rem);max-width:820px;margin:0 auto}
.hero-sub{max-width:620px;margin:1rem auto 0;color:var(--ink-soft);font-size:1.08rem}
.tool-section{padding-bottom:2rem}
.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:clamp(1.1rem,2.5vw,2rem);box-shadow:var(--shadow)}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
@media (max-width:860px){
.tool-grid{grid-template-columns:1fr}
}
.field-group{margin-bottom:1.35rem}
.field-label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:.4rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
input[type=text],select{width:100%;padding:.7rem .85rem;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);font-size:.96rem;transition:border-color .2s var(--ease-out)}
input[type=text]:focus,select:focus{border-color:var(--accent)}
input[type=color]{width:100%;height:42px;padding:3px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);cursor:pointer}
input[type=range]{width:100%;accent-color:var(--accent)}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem;background:var(--cream);padding:.3rem;border-radius:12px}
.tab{flex:1 1 auto;padding:.55rem .6rem;border-radius:9px;font-size:.85rem;font-weight:600;color:var(--ink-soft);white-space:nowrap;transition:all .2s var(--ease-out)}
.tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
@media (max-width:420px){
.style-grid{grid-template-columns:repeat(2,1fr)}
}
.style-btn{padding:.6rem .4rem;border:1.5px solid var(--border);border-radius:10px;font-size:.82rem;font-weight:600;text-align:center;transition:all .18s var(--ease-out);background:var(--bg)}
.style-btn:hover{border-color:var(--accent)}
.style-btn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg));color:var(--accent)}
.emoji-row{display:flex;flex-wrap:wrap;gap:.45rem}
.emoji-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:10px;font-size:1.15rem;background:var(--bg);transition:all .18s var(--ease-out);cursor:pointer}
.emoji-btn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
.emoji-picker-wrap,.emoji-upload{position:relative}
.emoji-popover{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;width:min(320px,calc(100vw - 3rem));max-height:320px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:.6rem}
.emoji-popover-grid{display:flex;flex-direction:column;gap:.2rem}
.emoji-cat-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin:.6rem .1rem .2rem}
.emoji-cat-label:first-child{margin-top:0}
.emoji-cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.25rem}
.emoji-cat-grid button{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:1.1rem;border-radius:8px;transition:background .15s var(--ease-out)}
.emoji-cat-grid button:focus-visible,.emoji-cat-grid button:hover{background:var(--cream)}
.tool-preview{display:flex;flex-direction:column;gap:.9rem}
.qr-preview-wrap{background:var(--cream);border-radius:var(--radius);padding:1rem;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;position:relative;overflow:hidden}
#qr-canvas{width:100%;height:100%;object-fit:contain;border-radius:6px}
.privacy-badge{font-size:.82rem;color:var(--ink-soft)}
.download-row{display:flex;gap:.6rem;flex-wrap:wrap}
.btn{padding:.75rem 1.15rem;border-radius:10px;font-weight:700;font-size:.92rem;transition:all .18s var(--ease-out)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--ink)}
.btn-secondary{background:var(--cream);color:var(--ink);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.print-warnings{display:flex;flex-direction:column;gap:.45rem;margin-top:.5rem}
.warning-line{font-size:.82rem;padding:.5rem .7rem;border-radius:8px;display:flex;gap:.5rem;align-items:flex-start}
.warning-ok{background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success)}
.warning-bad{background:color-mix(in srgb,#c94f3d 14%,transparent);color:#c94f3d}
.promo-slot{display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:.8rem;letter-spacing:.06em;flex-direction:column;gap:.4rem}
.promo-label{display:none;font-weight:700;letter-spacing:.12em;opacity:.55}
/* La etiqueta y el espacio solo aparecen cuando AdSense entrega un anuncio real */
.promo-slot:has(ins.adsbygoogle[data-ad-status="filled"]) .promo-label{display:block}
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.promo-slot-banner{max-width:1180px;margin:1.5rem auto 0}
.promo-slot-incontent{max-width:760px;margin:0 auto 2.5rem}
.promo-slot-corner{min-height:0}
.promo-slot-popup{min-height:250px;width:100%;margin:1rem 0}
.promo-slot .adsbygoogle{width:100%}
.corner-toast{position:fixed;right:1rem;bottom:1rem;z-index:500;width:min(300px,calc(100vw - 2rem));padding:.9rem 1.1rem;box-shadow:var(--shadow);animation:toast-in .3s var(--ease-out)}
@keyframes toast-in{
from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:none}
}
.corner-toast-close{position:absolute;top:.3rem;right:.4rem;width:22px;height:22px;border-radius:50%;font-size:.75rem;color:var(--ink-soft)}
.corner-toast-close:hover{background:var(--border)}
.download-dialog{border:none;border-radius:18px;padding:0;max-width:420px;width:calc(100vw - 2rem);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.download-dialog::backdrop{background:rgba(15,15,18,.5)}
.download-dialog-inner{padding:1.5rem;position:relative;text-align:center}
.dialog-close{position:absolute;top:.7rem;right:.7rem;width:30px;height:30px;border-radius:50%;font-size:.9rem}
.dialog-close:hover{background:var(--cream)}
.download-dialog-inner .btn{margin-top:1rem;width:100%}
.download-dialog-inner .promo-label{display:block;margin-bottom:.6rem}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:760px){
.steps-grid{grid-template-columns:1fr}
}
.step-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem}
.step-num{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:.8rem}
.step-card h3{font-size:1.05rem;margin-bottom:.4rem}
.step-card p{color:var(--ink-soft);font-size:.92rem}
.section-seo p{color:var(--ink-soft);margin-bottom:1.1rem}
.ideas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:860px){
.ideas-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.ideas-grid{grid-template-columns:1fr}
}
.idea-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem}
.idea-icon{font-size:1.6rem;margin-bottom:.6rem;display:block}
.idea-card h3{font-size:1rem;margin-bottom:.35rem}
.idea-card p{color:var(--ink-soft);font-size:.88rem}
.faq-list{display:flex;flex-direction:column;gap:.6rem}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.2rem .3rem}
.faq-item summary{padding:.9rem 1rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-weight:400;color:var(--ink-soft);flex-shrink:0}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding:0 1rem 1rem;color:var(--ink-soft);font-size:.92rem}
.site-footer{border-top:1px solid var(--border);padding:1.75rem 0;margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;font-size:.85rem;color:var(--ink-soft)}
.footer-nav{display:flex;gap:1.2rem}
.footer-nav a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
.corner-toast{animation:none}
html{scroll-behavior:auto}
}