:root{
  --primary:#7C3AED; --accent:#F472B6; --bg:#F8FAFC; --surface:#FFFFFF; --text:#111827; --muted:#6B7280;
  --ok:#059669; --warn:#D97706; --danger:#DC2626;
  --radius:16px; --maxw:1200px;
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:40px;
  --border:rgba(17,24,39,.08);
  --shadow:0 10px 30px rgba(17,24,39,.08);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:radial-gradient(800px 400px at 10% -10%, rgba(124,58,237,.12), transparent 50%),
          radial-gradient(800px 400px at 90% -10%, rgba(244,114,182,.12), transparent 50%),
          var(--bg);
  color:var(--text)
}
a{color:var(--primary);text-decoration:none}
a:hover,a:focus{text-decoration:underline}

header{position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);background:var(--surface/.6);background:rgba(255,255,255,.8);border-bottom:1px solid var(--border)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--space-3) var(--space-4)}
.nav{display:flex;align-items:center;gap:var(--space-4)}
.brand{font-weight:800;letter-spacing:.2px}
.pill{padding:6px 10px;border:1px solid var(--border);border-radius:999px;font-size:.85rem;color:var(--muted);background:#fff}
.grow{flex:1}

.btn{appearance:none;border:1px solid transparent;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700;background:var(--primary);color:#fff;box-shadow:var(--shadow)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn.secondary{background:var(--accent);color:#fff}
.btn.warn{background:var(--warn);color:#fff}
.btn.danger{background:var(--danger);color:#fff}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

main{min-height:100%}
.grid{display:grid;gap:var(--space-4)}
@media(min-width:960px){.grid-2{grid-template-columns:1.2fr .8fr}}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .hd{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.card .bd{padding:var(--space-4)}

h1{font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem);margin:0}
h2{font-size:clamp(1.15rem,1.05rem + 1.2vw,1.6rem);margin:0 0 var(--space-3)}
p{line-height:1.6;color:var(--muted)}

.row{display:grid;gap:10px}
@media(min-width:720px){.row.cols-2{grid-template-columns:1fr 1fr}}
label{font-weight:700;font-size:.95rem}
input,textarea,select{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text)}
textarea{min-height:120px;resize:vertical}
small.hint{color:var(--muted)}

.select{
  appearance:none;width:100%;padding:12px 36px 12px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text);font-weight:600;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
      calc(100% - 20px) calc(1em + 2px),
      calc(100% - 15px) calc(1em + 2px),
      calc(100% - 2.5em) 0.5em;
  background-size:5px 5px, 5px 5px, 1px 1.5em;
  background-repeat:no-repeat;
}
.select:focus { outline: 3px solid rgba(124,58,237,.25); }

.steps{display:flex;gap:6px;flex-wrap:wrap}
.step{padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:.85rem;background:#fff}
.step.active{border-color:var(--primary);color:var(--text);box-shadow:0 0 0 2px rgba(124,58,237,.12) inset}

.preview{border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#fff}
.preview .hero{
  position:relative; padding:30px; background:var(--surface);
  min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border-bottom:1px solid var(--border)
}
.preview .hero .badge{align-self:flex-start}
.preview .hero .overlay{content:""; position:absolute; inset:0; pointer-events:none; border-radius:0; background:none;}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#fff;color:var(--text);font-size:.8rem}

.progress{height:10px;background:#EEF2FF;border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.progress>i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .25s ease}

.toast{position:fixed;right:16px;bottom:16px;z-index:9999;padding:12px 14px;background:#111827;color:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(17,24,39,.2);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:8px;font-weight:700}
.toast.show{opacity:1;transform:translateY(0)} .toast i{display:inline-flex;width:20px;height:20px;border-radius:999px;background:var(--ok)}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:8px;background:#F472B6;color:#fff;border-radius:8px}

.color-picker{display:flex;align-items:center;gap:10px}
.swatch{width:36px;height:36px;border-radius:999px;border:1px solid var(--border);box-shadow:var(--shadow);cursor:pointer;display:inline-block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.palette-mini { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.palette-chip { width:18px; height:18px; border-radius:4px; border:1px solid var(--border); }

.avatar{width:28px;height:28px;border-radius:999px;border:1px solid var(--border);object-fit:cover}

/* Landing (video + CTA) */
.landing{position:relative;min-height:calc(100vh - 70px);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--border)}
.landing iframe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.landing .overlay{position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 20%, rgba(0,0,0,.25), transparent), linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 100%)}
.landing .content{position:relative;z-index:2;max-width:900px;margin:auto;text-align:center;color:#fff;padding:0 20px}
.landing h1{font-size:clamp(2rem,1.3rem + 4vw,3.5rem);color:#fff}
.landing p{color:#E5E7EB}
.landing .cta{margin-top:16px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Modal (Mis sitios) */
dialog{border:none;border-radius:16px;padding:0;max-width:900px;width:95vw;box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.35)}
.modal{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.modal .hd{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal .bd{padding:16px 20px}
.sites{display:grid;gap:12px}
.site-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.thumb{width:56px;height:40px;border-radius:8px;border:1px solid var(--border);background:linear-gradient(135deg,var(--bg),#fff)}
.kbd{display:inline-block;padding:2px 6px;border:1px solid var(--border);border-radius:6px;background:#fff;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;font-size:.8rem;color:var(--muted)}

/* Helper for dev-only badge */
.dev{display:none}