@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --navy:#17243b; --blue:#5a73ef; --sky:#eef2ff; --paper:#f8faf9; --muted:#7b8798; --line:#e5e8ed; --coral:#ff806c; --lime:#d7f36d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--navy); font-family:'DM Sans',sans-serif; }
button { font:inherit; cursor:pointer; }
.minimal-header { max-width:1160px; height:78px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none; font:700 22px 'Space Grotesk',sans-serif; letter-spacing:-.05em; }.brand strong { color:var(--blue); }.brand-symbol { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--lime); font-size:18px; }
.workspace-state { color:#738096; font-size:11px; display:flex; align-items:center; gap:7px; }.state-dot { width:7px; height:7px; border-radius:50%; background:#6dca9b; }.help { width:30px; height:30px; border:1px solid var(--line); color:var(--navy); background:#fff; border-radius:50%; font-weight:700; }
.page-shell { width:min(1120px,calc(100% - 40px)); margin:22px auto 0; }.hero-row { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; margin-bottom:34px; }.hero-copy { max-width:610px; }.eyebrow,.panel-kicker,.flow-kicker { margin:0 0 13px; color:var(--coral); font-size:10px; font-weight:700; letter-spacing:.16em; }.hero-copy h1 { margin:0; font:700 clamp(38px,5vw,59px)/1.02 'Space Grotesk',sans-serif; letter-spacing:-.065em; }.hero-copy h1 em { color:var(--blue); font-style:normal; }.hero-text { max-width:510px; color:var(--muted); font-size:15px; line-height:1.55; margin:18px 0 0; }
.flow-card { width:290px; flex:0 0 290px; padding:19px 20px; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 10px 32px rgba(23,36,59,.04); }.flow-kicker { color:var(--blue); font-size:9px; margin-bottom:15px; }.flow-card ol { list-style:none; padding:0; margin:0; display:grid; gap:13px; }.flow-card li { display:flex; gap:10px; align-items:center; color:#9aa5b4; }.flow-card li > span { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; border:1px solid #dbe1eb; font-size:10px; font-weight:700; }.flow-card li.active { color:var(--navy); }.flow-card li.active > span { background:var(--blue); border-color:var(--blue); color:#fff; }.flow-card strong,.flow-card small { display:block; }.flow-card strong { font-size:11px; }.flow-card small { margin-top:2px; font-size:10px; color:#a5aebb; }
.panel { border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 15px 45px rgba(23,36,59,.05); }.panel-heading,.leads-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }.panel-kicker { color:var(--blue); margin-bottom:8px; }.panel h2 { margin:0; font:700 22px/1.15 'Space Grotesk',sans-serif; letter-spacing:-.04em; }.gallery-count,.leads-badge { color:#738096; font-size:10px; padding:7px 10px; border-radius:20px; background:#f3f5f8; white-space:nowrap; }
.entry-panel { padding:24px; margin-bottom:20px; }.entry-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }.entry-option { min-width:0; display:flex; align-items:center; gap:12px; padding:17px; border:1px solid var(--line); border-radius:14px; color:var(--navy); text-decoration:none; text-align:left; background:#fff; transition:.2s; }.entry-option:hover { border-color:var(--blue); box-shadow:0 8px 18px rgba(90,115,239,.1); transform:translateY(-1px); }.campaign-entry { font:inherit; cursor:pointer; }.entry-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:10px; background:var(--sky); color:var(--blue); font-weight:700; }.landing-entry .entry-icon { color:#fff; background:var(--navy); }.entry-option strong { display:block; font:700 13px 'Space Grotesk',sans-serif; }.entry-option p { margin:4px 0 0; color:var(--muted); font-size:10px; line-height:1.4; }.entry-arrow { margin-left:auto; color:var(--blue); font-size:18px; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.56fr) minmax(290px,.8fr); gap:20px; align-items:stretch; }.gallery-panel { padding:24px; }.campaign-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }.campaign-card { min-width:0; padding:0; text-align:left; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; color:var(--navy); transition:.2s; }.campaign-card:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(23,36,59,.1); }.campaign-card.selected { border:2px solid var(--blue); box-shadow:0 8px 22px rgba(90,115,239,.16); }.campaign-image { height:145px; background-size:cover; background-position:center; position:relative; }.campaign-image::after { content:'Seleccionada'; position:absolute; right:8px; top:8px; padding:5px 8px; border-radius:15px; background:var(--blue); color:#fff; font-size:9px; opacity:0; transition:.2s; }.campaign-card.selected .campaign-image::after { opacity:1; }.campaign-info { padding:13px 13px 14px; }.campaign-category { color:var(--coral); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.campaign-info h3 { margin:6px 0 5px; font:700 15px 'Space Grotesk',sans-serif; letter-spacing:-.02em; }.campaign-info p { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
.action-panel { padding:24px; display:flex; flex-direction:column; }.action-panel h2 { margin-bottom:17px; }.selected-preview { border:1px solid var(--line); border-radius:13px; overflow:hidden; background:#fafbff; }.preview-media { height:115px; background-size:cover; background-position:center; }.preview-copy { padding:12px; }.preview-copy strong { display:block; font:700 14px 'Space Grotesk',sans-serif; }.preview-copy p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }.network-label { margin:19px 0 8px; color:#66748b; font-size:11px; font-weight:600; }.network-row { display:flex; flex-wrap:wrap; gap:6px; }.network { border:1px solid #d8dee9; background:#fff; border-radius:17px; padding:7px 10px; color:#647187; font-size:10px; }.network.active { background:var(--sky); border-color:var(--blue); color:var(--blue); font-weight:700; }.primary-action,.secondary-action { width:100%; border-radius:10px; font-size:11px; font-weight:700; }.primary-action { margin-top:19px; border:0; padding:14px 15px; color:#fff; background:var(--navy); }.primary-action span { float:right; color:var(--lime); font-size:16px; }.primary-action:hover { background:#243b5c; }.secondary-action { margin-top:8px; padding:10px 15px; border:1px solid var(--line); background:#fff; color:#63718a; }.action-note { margin:15px 0 0; color:#a0aaba; font-size:10px; line-height:1.4; }.action-note span { color:var(--lime); margin-right:4px; }
.leads-panel { margin-top:20px; padding:24px; }.leads-heading h2 { max-width:500px; }.lead-empty { margin-top:18px; padding:22px; border:1px dashed #d7dde7; border-radius:14px; display:flex; align-items:center; gap:14px; }.lead-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--blue); background:var(--sky); font-size:17px; }.lead-empty h3 { margin:0; font:700 14px 'Space Grotesk',sans-serif; }.lead-empty p { max-width:610px; margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }.empty-link { margin-left:auto; flex:0 0 auto; padding:9px 12px; border:0; background:none; color:var(--blue); font-size:11px; font-weight:700; }.empty-link span { margin-left:5px; font-size:15px; }.bottom-note { margin:28px auto 20px; text-align:center; color:#a5adba; font-size:10px; }
.toast { position:fixed; bottom:20px; left:50%; transform:translate(-50%,10px); opacity:0; pointer-events:none; padding:11px 15px; border-radius:10px; background:var(--navy); color:#fff; font-size:11px; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media(max-width:850px) { .hero-row { align-items:flex-start; flex-direction:column; gap:22px; }.flow-card { width:100%; flex:initial; }.flow-card ol { grid-template-columns:repeat(3,1fr); gap:8px; }.flow-card li { align-items:flex-start; flex-direction:column; gap:6px; }.workspace-grid { grid-template-columns:1fr; }.action-panel { order:-1; }.selected-preview { display:grid; grid-template-columns:120px 1fr; }.preview-media { height:100%; min-height:100px; }.preview-copy { align-self:center; } }
@media(max-width:560px) { .minimal-header { height:66px; padding:0 16px; }.brand { font-size:19px; }.help { display:none; }.page-shell { width:calc(100% - 24px); margin-top:20px; }.hero-copy h1 { font-size:39px; }.hero-text { font-size:14px; }.gallery-panel,.action-panel,.leads-panel,.entry-panel { padding:18px; }.entry-options { grid-template-columns:1fr; }.campaign-grid { grid-template-columns:1fr; }.campaign-image { height:170px; }.flow-card ol { display:grid; grid-template-columns:1fr; gap:10px; }.flow-card li { flex-direction:row; align-items:center; }.selected-preview { display:block; }.preview-media { height:130px; }.lead-empty { align-items:flex-start; flex-wrap:wrap; }.empty-link { margin-left:50px; padding-left:0; }.workspace-state { margin-left:auto; margin-right:13px; }.panel h2 { font-size:20px; } }