/* ============================================================
   ROLO · Wizard de creación — sistema visual
   Editorial cálido. Crema + dorado. Cormorant + Outfit.
   ============================================================ */
:root{
  --cream:#faf7f2;
  --cream-2:#f2ede3;
  --cream-3:#e9e2d3;
  --gold:#c9a84c;
  --gold-deep:#a4842c;
  --gold-soft:rgba(201,168,76,.14);
  --gold-line:rgba(201,168,76,.32);
  --gold-ghost:rgba(201,168,76,.06);
  --ink:#1a1410;
  --ink-2:#4a3f33;
  --ink-3:#6e6052;
  --ink-4:#9c8d7d;
  --line:rgba(26,20,16,.08);
  --line-strong:rgba(26,20,16,.16);
  --blue:#3b7dd8;
  --purple:#7b3fd9;
  --ok:#5aa46e;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--cream-2);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--cream)}
button{font-family:inherit}
#root{height:100vh;height:100dvh;overflow:hidden}

/* ── Generic buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 22px;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;
  border-radius:999px;border:1px solid transparent;
  transition:all .25s ease;white-space:nowrap;
}
.btn-primary{background:var(--gold);color:#1a1410;box-shadow:0 8px 22px -10px rgba(201,168,76,.55)}
.btn-primary:hover{background:var(--gold-deep);color:var(--cream)}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn .arrow{width:12px;height:12px;transition:transform .25s ease}
.btn:hover:not(:disabled) .arrow{transform:translateX(3px)}
.btn-sm{padding:8px 16px;font-size:11px}

/* ── App frame ── */
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--cream-2)}

/* Top bar */
.topbar{
  height:64px;flex:0 0 64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;border-bottom:1px solid var(--line);background:var(--cream);
  position:relative;z-index:30;
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:22px}
.logo-mark{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);cursor:pointer}
.logo-mark__lockup{display:inline-flex;align-items:center;gap:4px}
.logo-mark .word{
  font-family:var(--serif);font-style:italic;font-weight:600;font-size:32px;letter-spacing:-.01em;
  background:linear-gradient(110deg,#c9a84c 0%,#a4842c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.logo-mark .paw{height:36px;width:auto;display:block;object-fit:contain}
.logo-mark .tag{font-family:var(--sans);font-size:8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,20,16,.55)}
.breadcrumb{
  display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3);
  border-left:1px solid var(--line);padding-left:22px;
}
.breadcrumb .cur{color:var(--ink);font-weight:500}
.breadcrumb .sep{color:var(--ink-4);font-size:11px}
.save-state{font-size:12px;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px}
.save-state .pulse{width:6px;height:6px;background:var(--ok);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(90,164,110,.5)}70%{box-shadow:0 0 0 6px rgba(90,164,110,0)}100%{box-shadow:0 0 0 0 rgba(90,164,110,0)}}

/* device toggle in topbar */
.dev-switch{display:flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;background:var(--cream)}
.dev-switch button{
  padding:7px 15px;background:transparent;border:none;font-size:11px;font-weight:600;
  letter-spacing:.06em;color:var(--ink-3);cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:all .2s ease;
}
.dev-switch button svg{width:13px;height:13px}
.dev-switch button.active{background:var(--ink);color:var(--cream)}

/* ── Wizard stepper (5 pantallas) ── */
.wizbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 28px;background:var(--cream);border-bottom:1px solid var(--line);
  position:relative;z-index:20;
}
.wstep{
  display:flex;align-items:center;gap:11px;padding:8px 16px;border-radius:999px;cursor:pointer;
  color:var(--ink-3);transition:all .2s ease;background:transparent;border:1px solid transparent;
}
.wstep:hover{background:var(--cream-2)}
.wstep .wn{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--serif);font-style:italic;font-weight:600;font-size:13px;color:var(--ink-3);background:var(--cream);
}
.wstep .wn svg{width:11px;height:11px;display:none}
.wstep .wt{font-size:13px;font-weight:500;white-space:nowrap}
.wstep.active{background:var(--gold-ghost);border-color:var(--gold-line)}
.wstep.active .wn{border-color:var(--gold);color:var(--gold-deep)}
.wstep.active .wt{color:var(--ink);font-weight:600}
.wstep.done .wn{background:var(--gold);border-color:var(--gold);color:var(--cream)}
.wstep.done .wn span{display:none}
.wstep.done .wn svg{display:block;color:var(--cream)}
.wstep.done .wt{color:var(--ink-2)}
.wstep-sep{width:22px;height:1px;background:var(--line-strong);flex:0 0 auto}

/* ── Stage that holds each screen ── */
.stage{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;background:var(--cream-2)}
.screen{position:absolute;inset:0;overflow:hidden}

/* generic centered scroll screen (Evento, Paquete, Estilo) */
.scroll-screen{height:100%;overflow-y:auto;background:
  radial-gradient(ellipse 70% 40% at 50% 0%,rgba(201,168,76,.05),transparent 60%),var(--cream);}
.canvas{max-width:1080px;margin:0 auto;padding:56px 40px 96px}
.canvas-head{text-align:center;max-width:620px;margin:0 auto 44px}
.canvas-head .eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.canvas-head h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:52px;line-height:1.02;letter-spacing:-.025em;margin-top:10px}
.canvas-head p{margin-top:14px;color:var(--ink-2);font-size:15px;line-height:1.55}

/* footer nav bar shared by simple screens */
.screen-foot{
  position:sticky;bottom:0;left:0;right:0;margin-top:8px;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;background:rgba(250,247,242,.9);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.screen-foot .meta{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.screen-foot .btns{display:flex;gap:12px}

/* ============================================================
   EVENT GRID (pantalla 1)
   ============================================================ */
.event-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.event-card{
  position:relative;background:var(--cream);border:1px solid var(--line);border-radius:14px;
  padding:26px 22px 22px;cursor:pointer;transition:all .22s ease;overflow:hidden;text-align:left;
}
.event-card:hover{border-color:var(--gold-line);transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(26,20,16,.28)}
.event-card.sel{border-color:var(--gold);background:var(--gold-ghost);box-shadow:0 0 0 3px var(--gold-soft)}
.event-card .ic{
  width:54px;height:54px;border-radius:13px;background:var(--cream-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--gold-deep);margin-bottom:16px;
}
.event-card.sel .ic{background:var(--cream);border-color:var(--gold-line)}
.event-card .ic svg{width:26px;height:26px}
.event-card h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:25px;line-height:1.08;color:var(--ink)}
.event-card .desc{font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.45}
.event-card .pet{
  position:absolute;top:16px;right:16px;font-size:10px;color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:5px;opacity:.7;
}
.event-card .pet svg{width:14px;height:14px}
.event-card .check{
  position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;background:var(--gold);
  display:none;align-items:center;justify-content:center;color:var(--cream);
}
.event-card.sel .check{display:flex}
.event-card.sel .pet{display:none}
.event-card .check svg{width:13px;height:13px}

/* ============================================================
   PACKAGE CARDS (pantalla 2)
   ============================================================ */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;max-width:900px;margin:0 auto}
.pkg-card{
  position:relative;display:flex;flex-direction:column;background:var(--cream);
  border:1px solid var(--line);border-radius:16px;padding:28px 24px;cursor:pointer;transition:all .22s ease;
}
.pkg-card:hover{border-color:var(--gold-line);transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(26,20,16,.3)}
.pkg-card.sel{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.pkg-card.feat{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.pkg-card.feat.sel{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold)}
/* Rolo One: acento suave diferenciador */
.pkg-card.rolo-one{background:radial-gradient(ellipse 100% 52% at 50% 0%,rgba(201,168,76,.07),var(--cream))}
.pkg-ribbon{
  position:absolute;top:14px;right:14px;background:var(--gold);color:#1a1410;
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
}
.pkg-tag{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.pkg-name{font-family:var(--serif);font-style:italic;font-weight:600;font-size:32px;line-height:1;margin-top:8px;color:var(--ink)}
.pkg-price{margin-top:14px;display:flex;align-items:baseline;gap:5px}
.pkg-price .cur{font-size:15px;color:var(--ink-3);font-weight:500}
.pkg-price .amt{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1;color:var(--ink)}
.pkg-price .per{font-size:12px;color:var(--ink-3)}
.pkg-sub{font-size:12.5px;color:var(--ink-3);margin-top:10px;line-height:1.45;min-height:36px}
.pkg-feat{list-style:none;margin:20px 0 0;display:flex;flex-direction:column;gap:11px;flex:1 1 auto}
.pkg-feat li{font-size:13px;color:var(--ink-2);display:flex;align-items:flex-start;gap:9px;line-height:1.35}
.pkg-feat li svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--gold-deep)}
.pkg-feat li.off{opacity:.55}
.pkg-feat li .x{color:var(--ink-4);flex-shrink:0;width:15px;text-align:center;margin-top:1px}
.pkg-pick{
  margin-top:22px;text-align:center;padding:11px;border-radius:999px;border:1px solid var(--line-strong);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);transition:all .2s ease;
}
.pkg-card:hover .pkg-pick{border-color:var(--gold)}
.pkg-card.sel .pkg-pick{background:var(--gold);border-color:var(--gold);color:#1a1410}
/* Styles count badge */
.pkg-styles-badge{display:inline-flex;align-items:center;gap:5px;margin-top:14px;padding:5px 12px;border-radius:999px;background:var(--gold-ghost);border:1px solid var(--gold-line);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--gold-deep);width:fit-content}
/* Combos hook */
.combos-hook{text-align:center;margin:32px 0 0;padding:16px 24px;border-radius:14px;background:var(--gold-ghost);border:1px solid var(--gold-line)}
.combos-hook .ch-nums{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--gold-deep);font-weight:600;letter-spacing:.01em}
.combos-hook .ch-sub{font-size:11px;color:var(--ink-3);margin-top:4px;letter-spacing:.12em;text-transform:uppercase}
/* Locked style option hint */
.style-lock-hint{font-size:11px;color:var(--ink-3);margin-top:6px;padding:0 2px}

/* ============================================================
   PANTALLA 3 · Datos + preview (3 columnas)
   ============================================================ */
.shell{display:grid;grid-template-columns:288px 1fr 468px;height:100%;background:var(--cream)}
@media(max-width:1340px){.shell{grid-template-columns:262px 1fr 412px}}

/* sidebar de secciones */
aside.secs{border-right:1px solid var(--line);background:var(--cream);display:flex;flex-direction:column;min-height:0}
.secs-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:26px 0 12px}
.secs-head{padding:0 24px 20px;border-bottom:1px solid var(--line);margin-bottom:16px}
.secs-head .eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.secs-head h2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:28px;letter-spacing:-.02em;margin-top:4px}
.secs-head .progress{margin-top:14px;height:3px;background:var(--cream-3);border-radius:2px;overflow:hidden}
.secs-head .progress-bar{height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:2px;transition:width .4s ease}
.secs-head .progress-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:9px}

.sec-item{display:flex;gap:13px;padding:11px 24px;cursor:pointer;border-left:2px solid transparent;transition:background .18s ease;width:100%;text-align:left;background:transparent;border-top:none;border-right:none;border-bottom:none}
.sec-item:hover{background:var(--cream-2)}
.sec-item.active{border-left-color:var(--gold);background:var(--gold-ghost)}
.sec-item .sn{
  width:25px;height:25px;border-radius:50%;border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--cream);
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:12px;color:var(--ink-3);
}
.sec-item .sn svg{width:11px;height:11px;display:none;color:var(--cream)}
.sec-item.done .sn{background:var(--gold);border-color:var(--gold)}
.sec-item.done .sn span{display:none}
.sec-item.done .sn svg{display:block}
.sec-item.active .sn{border-color:var(--gold);color:var(--gold-deep)}
.sec-item .lbl{min-width:0}
.sec-item .lbl .t{display:block;font-size:13px;font-weight:500;color:var(--ink);line-height:1.3}
.sec-item .lbl .d{display:block;font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.35}
.sec-item.locked{opacity:.5}
.sec-item .lock{margin-left:auto;color:var(--ink-4);align-self:center}
.sec-item .lock svg{width:13px;height:13px}

/* mascota en sidebar */
.sidebar-dog{
  position:relative;flex:0 0 auto;height:280px;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background:var(--cream);border-top:1px solid var(--line);
}
.sidebar-dog .dogwrap{width:150px;flex:0 0 auto}

/* globo de diálogo — pegado encima de Rocky */
.sidebar-dog .cheer{
  display:block;
  align-self:center;
  flex:0 0 auto;
  position:relative;
  margin-bottom:6px;
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:13px;
  color:var(--ink-2);
  background:var(--cream);
  padding:6px 15px;
  border-radius:18px;
  border:1px solid var(--gold-line);
  box-shadow:0 3px 14px -6px rgba(201,168,76,.45);
  white-space:nowrap;
}
/* colita: rombo centrado cuya mitad superior queda dentro del globo */
.sidebar-dog .cheer::after{
  content:'';
  position:absolute;
  bottom:-7px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px;
  background:var(--cream);
  border-right:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}

/* editor central */
main.editor{overflow-y:auto;padding:0;background:
  radial-gradient(ellipse 60% 28% at 50% 0%,rgba(201,168,76,.05),transparent 60%),var(--cream);
  display:flex;flex-direction:column;min-height:0;}
.appearance-bar{
  position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 48px;background:rgba(250,247,242,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.appearance-bar .ab-group{display:flex;align-items:center;gap:10px}
.appearance-bar .ab-lbl{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.pal-row{display:flex;gap:6px}
.pal-dot{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;position:relative;transition:transform .15s ease}
.pal-dot:hover{transform:scale(1.12)}
.pal-dot.sel{border-color:var(--ink)}
.font-sel{font-family:var(--sans);font-size:12px;color:var(--ink);background:var(--cream);border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px;cursor:pointer;outline:none}
.editor-body{flex:1 1 auto;padding:40px 48px 64px}
.editor-head{margin-bottom:32px;max-width:640px}
.editor-head .eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.editor-head h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:48px;letter-spacing:-.025em;margin-top:6px;line-height:1}
.editor-head p{margin-top:12px;color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:540px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px;max-width:680px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;display:block;line-height:1.5}
.field label .opt{margin-left:6px}
.field label .opt{color:var(--ink-4);letter-spacing:.04em;text-transform:none;font-weight:400;font-size:11px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--cream);
  border:1px solid var(--line);border-radius:7px;padding:13px 15px;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;resize:vertical;
}
.field textarea{min-height:96px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.field .helper{font-size:12px;color:var(--ink-3)}
.field-serif input{font-family:var(--serif);font-style:italic;font-weight:500;font-size:23px;padding:9px 14px}
.date-row{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px}
.date-row input{text-align:center;font-family:var(--serif);font-style:italic;font-size:22px;padding:13px 8px;font-weight:500}
.uploader{
  grid-column:1/-1;border:1.5px dashed var(--gold-line);border-radius:11px;padding:30px 26px;
  display:flex;align-items:center;gap:22px;background:var(--gold-ghost);transition:all .25s ease;cursor:pointer;
}
.uploader:hover{border-color:var(--gold);background:var(--gold-soft)}
.uploader .uic{width:64px;height:64px;border-radius:13px;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--gold-deep);border:1px solid var(--gold-line);flex-shrink:0}
.uploader .uic svg{width:28px;height:28px}
.uploader .text strong{font-family:var(--serif);font-style:italic;font-weight:500;font-size:23px;color:var(--ink);display:block}
.uploader .text p{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.uploader .text .formats{font-size:11px;color:var(--ink-3);margin-top:6px;letter-spacing:.05em}
/* ── Modo de portada (cover / contain) ── */
.foto-modo-row{display:flex;gap:8px;margin-bottom:2px}
.foto-modo-btn{
  flex:1;padding:9px 0;border-radius:8px;border:1.5px solid var(--line-strong);
  background:transparent;font-family:var(--sans);font-size:12.5px;font-weight:600;
  color:var(--ink-3);cursor:pointer;transition:all .18s ease;
}
.foto-modo-btn:hover{border-color:var(--gold);color:var(--ink)}
.foto-modo-btn.foto-modo-active{background:var(--gold);border-color:var(--gold);color:#1a1410}
/* ── Selector de punto focal ── */
.focal-wrap{grid-column:1/-1;display:flex;flex-direction:column;gap:8px}
.focal-label{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.focal-preview{
  width:100%;height:140px;border-radius:10px;background-size:cover;background-repeat:no-repeat;
  border:1px solid var(--gold-line);display:flex;align-items:center;justify-content:center;
  transition:background-position .25s ease;
}
.focal-grid{display:grid;grid-template-columns:repeat(3,36px);gap:4px}
.focal-btn{
  width:36px;height:36px;border-radius:7px;border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.32);backdrop-filter:blur(4px);cursor:pointer;
  font-size:16px;display:flex;align-items:center;justify-content:center;
  color:#fff;transition:all .15s;line-height:1;
}
.focal-btn:hover{border-color:var(--gold);background:rgba(201,168,76,.55)}
.focal-btn.focal-active{background:var(--gold);border-color:var(--gold);color:#1a1410;font-weight:700}
.focal-preview--contain{background-color:var(--cream-3)}
.chips{display:flex;gap:9px;flex-wrap:wrap;grid-column:1/-1}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:var(--cream);border:1px solid var(--line-strong);font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:all .2s ease}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.chip.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip .swatch{width:10px;height:10px;border-radius:50%}
.editor-actions{margin-top:42px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;max-width:680px}
.editor-actions .meta{font-size:12px;color:var(--ink-3)}
.editor-actions .btns{display:flex;gap:12px}

/* repeater rows (itinerario / historia) */
.repeater{grid-column:1/-1;display:flex;flex-direction:column;gap:12px}
.rep-row{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;background:var(--cream-2);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.rep-row input{background:var(--cream)}
.rep-row .del{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);background:var(--cream);color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.rep-row .del:hover{border-color:#c0564a;color:#c0564a}
.rep-add{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--gold-deep);background:none;border:1px dashed var(--gold-line);border-radius:999px;padding:9px 16px;cursor:pointer}
.rep-add:hover{background:var(--gold-ghost)}

/* ── Barra de estilos en el preview (ahora dentro del preview-head) ── */
.pv-styles-bar{
  display:flex;gap:6px;overflow-x:auto;
  padding:10px 18px 10px;scrollbar-width:none;
}
.pv-styles-bar::-webkit-scrollbar{display:none}
.pv-style-chip{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--cream);font-size:11px;font-weight:500;color:var(--ink-3);
  cursor:pointer;transition:all .18s ease;white-space:nowrap;
}
.pv-style-chip:hover{border-color:var(--gold-line);color:var(--ink)}
.pv-style-chip.active{border-color:var(--gold);background:var(--gold-ghost);color:var(--ink);font-weight:600}
.pv-swatch{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(26,20,16,.12);
}

/* preview pane */
aside.preview{border-left:1px solid var(--line);background:var(--cream-2);position:relative;overflow:hidden;display:flex;flex-direction:column;}
.preview-head{position:absolute;top:0;left:0;right:0;z-index:3;border-bottom:1px solid var(--line);background:rgba(242,237,227,.95);backdrop-filter:blur(8px)}
/* Variante de 2 filas: toggle + selector de estilos */
.preview-head.pv-head-2rows{display:flex;flex-direction:column}
.pv-head-row1{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.preview-head .label{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.preview-head .pv-toggle{display:flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.preview-head .pv-toggle button{padding:6px 13px;background:transparent;border:none;font-size:11px;font-weight:500;color:var(--ink-3);cursor:pointer;letter-spacing:.04em}
.preview-head .pv-toggle button.active{background:var(--ink);color:var(--cream)}
/* chip deshabilitado (template cargando) */
.pv-chip-loading{opacity:.45;cursor:not-allowed}
/* el stage ahora necesita más padding top para los dos rows del header (~100px) */
.preview-stage{position:relative;flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:100px 24px 56px}
.preview-bg-mandala{position:absolute;width:520px;height:520px;color:rgba(201,168,76,.15);animation:spinSlow 160s linear infinite;pointer-events:none}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* phone in preview */
.preview-phone{position:relative;width:296px;height:600px;background:linear-gradient(165deg,#1f1814,#0a0705);border-radius:46px;border:1px solid rgba(201,168,76,.5);box-shadow:0 38px 80px -20px rgba(26,20,16,.4),0 16px 32px -8px rgba(26,20,16,.18),inset 0 0 0 5px #0a0705,inset 0 0 0 6px rgba(201,168,76,.18);padding:12px;z-index:2}
.preview-phone .notch{position:absolute;top:19px;left:50%;transform:translateX(-50%);width:92px;height:25px;background:#050403;border-radius:14px;z-index:3}
.preview-screen{width:100%;height:100%;border-radius:34px;overflow:hidden;position:relative}
.preview-dog{position:absolute;bottom:48px;right:8px;width:96px;z-index:4;pointer-events:none}
/* desktop browser preview variant */
.pv-desktop{width:430px;height:540px;background:#0a0705;border:1px solid rgba(201,168,76,.42);border-radius:14px;overflow:hidden;box-shadow:0 38px 80px -20px rgba(26,20,16,.4),0 16px 32px -8px rgba(26,20,16,.18);z-index:2;display:flex;flex-direction:column}
.pv-desktop .bar{height:32px;flex:0 0 auto;background:#16100b;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid rgba(201,168,76,.18)}
.pv-desktop .bar i{width:9px;height:9px;border-radius:50%;background:rgba(240,236,230,.28)}
.pv-desktop .bar .u{margin-left:12px;font-size:10px;color:rgba(240,236,230,.5);letter-spacing:.08em}
.pv-desktop .win{flex:1 1 auto;overflow:hidden}
.pv-desktop .win .inv-sec{max-width:330px;margin-left:auto;margin-right:auto}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
.preview-foot{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:12px 16px;
  border-top:1px solid var(--line);background:rgba(242,237,227,.95);backdrop-filter:blur(8px)}
.preview-foot .url{font-family:var(--sans);font-size:11px;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px}
.preview-foot .url b{color:var(--ink);font-weight:600}
/* Variante con acciones */
.pf-acciones{display:flex;flex-direction:column;gap:8px}
.pf-url-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pf-btn-row{display:flex;gap:8px}
.pf-btn{flex:1;justify-content:center;font-size:11px!important;padding:8px 10px!important}
.pf-result{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;font-size:11px}
.pf-result.ok{background:rgba(90,164,110,.1);color:#2d7a45;border:1px solid rgba(90,164,110,.25)}
.pf-result.error{background:rgba(192,57,43,.08);color:#c0392b;border:1px solid rgba(192,57,43,.18)}

/* ── Invitation render (inside phone & thumbnails) — driven by --acc/--bg/--ink ── */
.inv{--acc:#c9a84c;--bg:#1a1410;--ink:#f0ece6;--ink-soft:rgba(240,236,230,.7);background:linear-gradient(170deg,var(--bg),color-mix(in srgb,var(--bg) 78%,#000));color:var(--ink);min-height:100%;font-family:var(--sans);position:relative}
.inv .inv-sec{padding:34px 24px;position:relative;border-bottom:1px solid color-mix(in srgb,var(--acc) 18%,transparent)}
.inv-hero{padding-top:46px;text-align:center}
.inv .eyb{font-size:8px;letter-spacing:.42em;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:14px}
.inv .nm{font-family:var(--serif);font-style:italic;font-weight:500;font-size:42px;line-height:.96;letter-spacing:-.02em}
.inv .amp{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--acc);margin:1px 0}
.inv .divider{width:34px;height:1px;background:var(--acc);margin:18px auto}
.inv .meta{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);line-height:1.9}
.inv .photo{margin-top:20px;height:138px;border-radius:4px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 6px,rgba(255,255,255,.07) 6px,rgba(255,255,255,.07) 12px),color-mix(in srgb,var(--bg) 60%,#000);border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);display:flex;align-items:center;justify-content:center}
.inv .photo span{font-size:8px;letter-spacing:.32em;color:var(--ink-soft);text-transform:uppercase}
.inv .stitle{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;text-align:center;margin-bottom:10px}
.inv .stext{font-size:11.5px;color:var(--ink-soft);text-align:center;line-height:1.7}
.inv .cd{display:flex;justify-content:center;gap:14px;margin-top:4px}
.inv .cd div{text-align:center}
.inv .cd .v{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1;color:var(--acc)}
.inv .cd .u{font-size:7px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.inv .iti{display:flex;flex-direction:column;gap:9px}
.inv .iti-row{display:flex;gap:12px;align-items:baseline;justify-content:center}
.inv .iti-row .h{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--acc);min-width:54px;text-align:right}
.inv .iti-row .a{font-size:11px;color:var(--ink-soft);letter-spacing:.06em}
.inv .gal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:4px}
.inv .gal i{aspect-ratio:1;background:repeating-linear-gradient(45deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 5px,rgba(255,255,255,.07) 5px,rgba(255,255,255,.07) 10px);border:1px solid color-mix(in srgb,var(--acc) 22%,transparent)}
.inv .rsvp-mini{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.inv .rsvp-mini .ri{background:color-mix(in srgb,var(--bg) 55%,#000);border:1px solid color-mix(in srgb,var(--acc) 24%,transparent);border-radius:6px;padding:9px 11px;font-size:10px;color:var(--ink-soft);letter-spacing:.06em;text-align:left}
.inv .cta{margin-top:14px;background:var(--acc);color:#1a1410;text-align:center;padding:11px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.26em;text-transform:uppercase}
/* fixed rolo footer (never inherits palette) */
.inv-footer{background:#100a06;padding:22px 20px;text-align:center;border-top:1px solid rgba(201,168,76,.3)}
.inv-footer .rolo{font-family:var(--serif);font-style:italic;font-weight:600;font-size:22px;color:#c9a84c}
.inv-footer .paws{display:flex;justify-content:center;gap:6px;margin:6px 0;color:rgba(201,168,76,.7)}
.inv-footer .paws svg{width:13px;height:13px}
.inv-footer .sub{font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:rgba(240,236,230,.45)}

/* ============================================================
   PANTALLA 4 · Estilo (thumbnails)
   ============================================================ */
.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.style-card{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;transition:all .22s ease;position:relative}
.style-card:hover{border-color:var(--gold-line);transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(26,20,16,.3)}
.style-card.sel{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.style-thumb{height:330px;border-radius:9px;overflow:hidden;position:relative;background:#100a06}
.style-thumb .inv{transform:scale(.92);transform-origin:top center}
.style-card .meta-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:0 4px 2px}
.style-card .meta-row .nm{font-family:var(--serif);font-style:italic;font-weight:600;font-size:21px}
.style-card .meta-row .tg{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.style-card .check{position:absolute;top:24px;right:24px;width:26px;height:26px;border-radius:50%;background:var(--gold);display:none;align-items:center;justify-content:center;color:var(--cream);z-index:3}
.style-card.sel .check{display:flex}
.style-card .badge{position:absolute;top:24px;left:24px;background:rgba(16,10,6,.7);backdrop-filter:blur(4px);color:#f0ece6;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;z-index:3}

/* ============================================================
   PANTALLA 5 · Publicar
   ============================================================ */
.publish-wrap{display:grid;grid-template-columns:300px 1fr;gap:56px;max-width:980px;margin:0 auto;align-items:center}
.publish-left{position:relative}
.confetti-dog{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.pub-eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.pub-title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:60px;line-height:1.05;letter-spacing:-.025em}
.pub-sub{color:var(--ink-2);font-size:15px;line-height:1.6;max-width:380px}
.link-box{display:flex;align-items:center;gap:12px;background:var(--cream);border:1px solid var(--line-strong);border-radius:11px;padding:6px 6px 6px 18px;max-width:420px}
.link-box .lk{flex:1;font-size:14px;color:var(--ink)}
.link-box .lk b{color:var(--gold-deep);font-weight:600}
.share-grid{display:flex;gap:12px;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;border:1px solid var(--line-strong);background:var(--cream);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .2s ease}
.share-btn:hover{border-color:var(--gold);color:var(--ink);transform:translateY(-2px)}
.share-btn.wa{background:#25d366;border-color:#25d366;color:#fff}
.share-btn.wa:hover{background:#1da851;border-color:#1da851}
.share-btn svg{width:17px;height:17px}
.qr-card{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center;box-shadow:0 24px 50px -28px rgba(26,20,16,.3)}
.qr-card .qr{width:200px;height:200px;margin:0 auto;background:var(--cream);border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:16px}
.qr-card .qr svg{width:100%;height:100%;color:var(--ink)}
.qr-card .qr-cap{font-size:12px;color:var(--ink-3);margin-top:14px;letter-spacing:.04em}
.qr-card .qr-name{font-family:var(--serif);font-style:italic;font-weight:600;font-size:22px;margin-top:4px}

/* ============================================================
   MOBILE FRAME (toggle móvil)
   ============================================================ */
.stage.mobile{display:flex;align-items:center;justify-content:center;background:
  radial-gradient(ellipse 60% 50% at 50% 20%,rgba(201,168,76,.06),transparent 60%),var(--cream-2);padding:24px}
.mphone{width:390px;height:100%;max-height:780px;background:linear-gradient(165deg,#1f1814,#0a0705);border-radius:50px;border:1px solid rgba(201,168,76,.5);box-shadow:0 50px 110px -30px rgba(26,20,16,.5),inset 0 0 0 5px #0a0705,inset 0 0 0 6px rgba(201,168,76,.16);padding:13px;position:relative;flex:0 0 auto}
.mphone .notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:120px;height:28px;background:#050403;border-radius:16px;z-index:30}
.mscreen{width:100%;height:100%;border-radius:38px;overflow:hidden;background:var(--cream);position:relative;display:flex;flex-direction:column}
.mtop{flex:0 0 auto;padding:30px 20px 14px;background:var(--cream);border-bottom:1px solid var(--line)}
.mtop-row{display:flex;align-items:center;justify-content:space-between}
.mtop .logo-mark .word{font-size:20px}
.mtop .logo-mark .paw{height:24px}
.mtop .mstep-meta{font-size:11px;color:var(--ink-3);font-weight:500}
.mprogress{margin-top:12px;height:4px;background:var(--cream-3);border-radius:2px;overflow:hidden}
.mprogress .bar{height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:2px;transition:width .4s ease}
.mstep-title{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.mstep-title .n{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold-deep)}
.mstep-title .t{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px}
.mbody{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:20px;background:var(--cream)}
.mbody .share-grid{flex-direction:column}
.mbody .share-btn{justify-content:center;width:100%}
.mfoot{flex:0 0 auto;padding:14px 20px;padding-bottom:max(env(safe-area-inset-bottom,0px),14px);border-top:1px solid var(--line);background:var(--cream);display:flex;gap:10px}
.mfoot .btn{flex:1;justify-content:center}
.m-event-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-event-grid .event-card{padding:18px 14px}
.m-event-grid .event-card .ic{width:42px;height:42px;margin-bottom:11px}
.m-event-grid .event-card .ic svg{width:21px;height:21px}
.m-event-grid .event-card h3{font-size:20px}
.m-event-grid .event-card .desc{display:none}
.m-pkg-list{display:flex;flex-direction:column;gap:12px}
.m-secs{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.m-sec-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;margin-bottom:6px;scrollbar-width:none}
.m-sec-strip::-webkit-scrollbar{display:none}
.m-sec-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1px solid var(--line-strong);background:var(--cream);font-size:12px;font-weight:500;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.m-sec-chip .n{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--gold-deep)}
.m-sec-chip.done{border-color:var(--gold-line)}
.m-sec-chip.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.m-sec-chip.active .n{color:var(--gold)}
.m-fab{position:absolute;right:18px;bottom:80px;z-index:25;box-shadow:0 14px 30px -10px rgba(26,20,16,.55)}
.m-preview-btn{position:sticky;bottom:0;width:100%;justify-content:center;margin-top:8px}
.m-form .form-grid{grid-template-columns:1fr;max-width:none;gap:18px}
.m-style-grid{display:grid;grid-template-columns:1fr;gap:16px}
.m-style-grid .style-thumb{height:300px}

/* mobile preview overlay (slide up sheet) */
.m-pv-sheet{position:absolute;inset:0;z-index:40;background:var(--cream-2);display:flex;flex-direction:column;animation:sheetUp .3s ease}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.m-pv-sheet .sheet-top{flex:0 0 auto;padding:30px 20px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--cream)}
.m-pv-sheet .sheet-top .label{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.m-pv-sheet .sheet-top .close{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);background:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.m-pv-sheet .sheet-body{flex:1 1 auto;overflow-y:auto;background:#100a06}

/* responsive: real small screens use the desktop layout collapsing */
@media(max-width:980px){
  .event-grid{grid-template-columns:repeat(2,1fr)}
  .pkg-grid{grid-template-columns:1fr 1fr}
  .style-grid{grid-template-columns:1fr 1fr}
  .shell{grid-template-columns:1fr}
  aside.secs,aside.preview{display:none}
  .wizbar .wt{display:none}
  .publish-wrap{grid-template-columns:1fr}
}

/* ── Móvil real: pantalla completa sin frame ── */
.app.real-mobile{
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;background:var(--cream);
}
.real-screen{
  flex:1 1 auto;display:flex;flex-direction:column;
  min-height:0;overflow:hidden;
  background:var(--cream);
}
/* mismo contenido que .mscreen pero sin bordes ni scroll oculto forzado */
.real-screen .mtop{
  flex:0 0 auto;padding:env(safe-area-inset-top,12px) 20px 14px;
  padding-top:max(env(safe-area-inset-top),14px);
  background:var(--cream);border-bottom:1px solid var(--line);
}
.real-screen .mbody{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px 20px 0;background:var(--cream);
}
.real-screen .mfoot{
  flex:0 0 auto;padding:14px 20px;
  padding-bottom:max(env(safe-area-inset-bottom),14px);
  border-top:1px solid var(--line);background:var(--cream);
  display:flex;gap:10px;
}
.real-screen .mfoot .btn{flex:1;justify-content:center;height:52px;font-size:13px}
/* inputs más grandes en móvil real */
.real-screen .field input,
.real-screen .field select,
.real-screen .field textarea{
  font-size:16px!important; /* evita zoom en iOS */
  padding:15px 16px!important;
  border-radius:10px!important;
  min-height:52px;
}
.real-screen .field label{font-size:11px}
.real-screen .form-grid{grid-template-columns:1fr;gap:18px;max-width:none}
/* cards de evento en 2 cols */
.real-screen .m-event-grid{grid-template-columns:1fr 1fr;gap:12px}
/* paquetes en lista */
.real-screen .m-pkg-list .pkg-card{padding:20px 18px}
/* fab de preview */
.real-screen .m-fab{
  position:fixed;right:18px;
  bottom:calc(env(safe-area-inset-bottom) + 80px);
  z-index:25;box-shadow:0 14px 30px -10px rgba(26,20,16,.55);
}
/* sheet de preview */
.real-screen .m-pv-sheet{position:fixed;inset:0;z-index:40;background:var(--cream-2);display:flex;flex-direction:column}
.real-screen .m-pv-sheet .sheet-top{flex:0 0 auto;padding:max(env(safe-area-inset-top),16px) 20px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--cream)}
.real-screen .m-pv-sheet .sheet-body{flex:1;overflow-y:auto;background:#100a06}
/* sec chips scroll horizontal */
.real-screen .m-sec-strip{padding-bottom:14px}

/* ── Eventos desactivados (próximamente) ── */
.event-card.soon{
  opacity:.45;cursor:not-allowed;
  pointer-events:none;
}
.event-card.soon:hover{
  transform:none!important;box-shadow:none!important;
  border-color:var(--line)!important;
}
.event-card.soon .check{display:none!important}
.pronto-badge{
  position:absolute;top:11px;right:11px;
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--cream-2);border:1px solid var(--line-strong);color:var(--ink-3);
  padding:3px 8px;border-radius:999px;
}
.promo-badge{
  position:absolute;top:11px;right:11px;
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(100deg,#e9c877,#c9a84c);color:#14100b;
  padding:4px 9px;border-radius:999px;box-shadow:0 4px 12px rgba(201,168,76,.3);
}

/* ── Paquete row en Publicar ── */
.pub-pkg-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border:1px solid var(--gold-line);border-radius:12px;
  background:var(--gold-ghost);cursor:pointer;margin-bottom:16px;
}
.pub-pkg-info{display:flex;flex-direction:column;gap:2px}
.pub-pkg-label{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.pub-pkg-name{font-size:14px;font-weight:600;color:var(--ink)}
/* estilos en 1 col */
.real-screen .m-style-grid{grid-template-columns:1fr;gap:14px}
.real-screen .m-style-grid .style-thumb{height:260px}
/* publicar */
.real-screen .publish-wrap{grid-template-columns:1fr;gap:24px}
.real-screen .share-grid{flex-direction:column}
.real-screen .share-btn{justify-content:center}
.real-screen .qr-card{margin-top:0}