body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0b1220;
    color: #e8f1ff;
}

.topbar {
    background: #0f172a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.topbar-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    font-weight: 700;
    color: #e8f1ff;
    text-decoration: none;
}

.nav-main a {
    color: #9fb6d8;
    margin-left: 16px;
    text-decoration: none;
    font-size: 14px;
}

.nav-main a.active,
.nav-main a:hover {
    color: #2f72ff;
}

.page {
    max-width: 960px;
    margin: 40px auto;
    padding: 0 20px 60px;
}

.page-hero h1 {
    margin-bottom: 10px;
}

.page-hero p {
    color: #9fb6d8;
}

.page-section {
    margin-top: 32px;
}

.page-section h2 {
    font-size: 20px;
    margin-bottom: 8px;
}

.site-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: center;
    padding: 20px;
    font-size: 13px;
    color: #9fb6d8;
}

.site-footer a {
    color: #9fb6d8;
}

.contact-form {
    display: grid;
    gap: 10px;
    max-width: 480px;
}

.contact-form input,
.contact-form textarea {
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #0f172a;
    color: #e8f1ff;
    padding: 8px 10px;
}

.btn-primary {
    background: linear-gradient(135deg,#2f72ff,#00b4ff);
    border-radius: 999px;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
}

/* Blog */
.post-card {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07);
    padding: 18px;
    margin-bottom: 16px;
    background: #0f172a;
}

/* Cookie banner */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15,23,42,0.97);
    color: #e8f1ff;
    padding: 12px 20px;
    font-size: 13px;
    display: none;
    z-index: 9999;
}

.cookie-banner p {
    margin: 0 0 8px 0;
}

.cookie-banner button {
    border-radius: 999px;
    border: none;
    padding: 6px 14px;
    background: #2f72ff;
    color: #fff;
    cursor: pointer;
}

:root{
    --bg:#0b1220;           /* fondo base muy oscuro azul */
    --panel:#0f1a2b;        /* paneles */
    --panel-2:#12233a;      /* hover/alt */
    --text:#e8f1ff;         /* texto */
    --muted:#9fb6d8;        /* texto secundario */
    --brand:#2f72ff;        /* azul vivo */
    --brand-2:#00b4ff;      /* cian */
    --ok:#2ecc71;
    --danger:#ff5577;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#0a1120,#091222 40%,#0b1426 100%);color:var(--text)}
a{color:var(--brand)}
.app{
    display:grid;grid-template-columns: 360px 1fr;gap:20px;min-height:100vh;padding:24px;align-items:start;
}
@media (max-width: 960px){.app{grid-template-columns:1fr;}}

.card{background:linear-gradient(180deg,#101a2e,#0e1730); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); box-shadow:var(--shadow)}
.panel{padding:18px}
.panel h2{margin:0 0 10px;font-size:18px;font-weight:700}
.panel .sub{font-size:12px;color:var(--muted);margin-bottom:14px}

.group{display:grid; gap:10px; margin-bottom:16px}
label{font-size:12px;color:var(--muted)}
input[type=text], input[type=number], select{
    width:100%;background:#0f1a2b;border:1px solid rgba(255,255,255,.08);color:var(--text);
    padding:10px 12px;border-radius:10px;outline:none;transition:.2s border-color, .2s background;
}
input[type=color]{width:44px;height:32px;border:none;background:transparent}
input[type=range]{width:100%}
input[type=text]:focus, input[type=number]:focus, select:focus{border-color:var(--brand)}

.row{display:flex;gap:10px;align-items:center}
.row.stretch> *{flex:1}
.btn{appearance:none;border:none;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:white;
    padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(47,114,255,.35);
    transition:transform .06s ease, filter .2s ease}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#14223a;border:1px solid rgba(255,255,255,.08);box-shadow:none}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.12)}
.btn.small{padding:8px 10px;border-radius:10px;font-size:12px}

.preview{
    padding:22px; display:grid; gap:18px; height:100%; grid-template-rows:auto 1fr auto;
}
.preview-head{display:flex;align-items:center;justify-content:space-between}
.checker{background: repeating-conic-gradient(#2a3550 0% 25%, transparent 0% 50%) 50% / 20px 20px;
    background-color:#0d1629; border-radius:14px; border:1px solid rgba(255,255,255,.06); padding:22px; display:grid; place-items:center; min-height:420px}
.qr-wrap{position:relative; display:inline-grid}
#qrCanvas{display:block}

details{background:#0f1a2b;border:1px solid rgba(255,255,255,.06);border-radius:12px}
details>summary{cursor:pointer;list-style:none;padding:12px 14px;color:var(--muted);font-weight:600}
details[open]>summary{border-bottom:1px solid rgba(255,255,255,.06);color:#cfe1ff}
details .panel{padding:14px}

.pill{background:#132544;color:#cfe0ff;padding:4px 8px;border-radius:999px;font-size:11px;border:1px solid rgba(255,255,255,.08)}

.toolbar{display:flex;gap:10px;flex-wrap:wrap}

.modal{position:fixed;inset:0;background:rgba(3,8,18,.75);backdrop-filter: blur(4px);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal.open{display:flex}
.modal-card{background:#0f1a2b;border:1px solid rgba(255,255,255,.08);border-radius:16px;max-width:920px;width:100%;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 320px}
@media (max-width: 860px){.modal-card{grid-template-columns:1fr}}
.modal-body{padding:16px}
.cropper-container{max-height:60vh}
.icon-preview{display:grid;place-items:center;background:#0c1527;border:1px dashed rgba(255,255,255,.15);border-radius:12px;min-height:200px}

.hint{font-size:12px;color:#9fb6d8}