/* ============================================================
   Deck / Propuesta visual — estilos de marca Abeja Reina.
   Todo va SCOPED bajo .deck-scope para que el deck se vea con
   su propia identidad (negro + acentos) sin importar el tema de
   la app. Se usa en el editor, el visor in-app y propuesta.html.
   Tipografías: Archivo (display) + Hanken Grotesk (cuerpo).
   ============================================================ */
.deck-scope{
  --dk-bg:#08080b; --dk-panel:#111117; --dk-panel2:#191921; --dk-line:#2a2a35; --dk-line2:#3a3a48;
  --dk-ink:#ffffff; --dk-muted:#9a9aa6; --dk-dim:#6c6c78;
  --dk-azul:#00a2ff; --dk-teal:#16e7cf; --dk-verde:#61d836; --dk-amar:#ffd932; --dk-coral:#ff644e; --dk-rosa:#ff42a1;
  --dk-disp:'Archivo',system-ui,sans-serif; --dk-body:'Hanken Grotesk',system-ui,sans-serif;
}

/* El lienzo 16:9 y la slide (contenedor de container-queries) */
.deck-canvas{width:100%;aspect-ratio:16/9;position:relative}
.deck-slide{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#000;container-type:size;
  font-family:var(--dk-body);color:var(--dk-ink);box-shadow:0 24px 60px -20px #000,0 0 0 1px var(--dk-line)}
.deck-slide *{box-sizing:border-box}

/* Contenido interno con unidades de container (cqw/cqh) para escalar a cualquier tamaño */
.deck-slide .s{position:absolute;inset:0;padding:7cqh 8cqw;display:flex;flex-direction:column;color:var(--dk-ink)}
.deck-slide .eyebrow{font-family:var(--dk-disp);font-weight:700;font-size:2.4cqh;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:1.4cqw}
.deck-slide .eyebrow .sq{width:2.4cqh;height:2.4cqh;border-radius:2px;flex-shrink:0}
.deck-slide .foot{position:absolute;left:8cqw;right:8cqw;bottom:5cqh;display:flex;justify-content:space-between;align-items:center;font-size:2cqh;color:var(--dk-dim);font-family:var(--dk-disp);font-weight:600;letter-spacing:.04em;gap:2cqw}
.deck-slide h1.big{font-family:var(--dk-disp);font-weight:900;line-height:.98;letter-spacing:-.02em;text-wrap:balance;margin:0}
.deck-slide .lede{font-size:3cqh;line-height:1.45;color:#e6e6ec;max-width:66cqw;font-weight:400}
.deck-slide .kicker{font-family:var(--dk-disp);font-weight:800;letter-spacing:-.01em;line-height:1.02;margin:0}

/* cover */
.deck-slide .cover{justify-content:space-between}
.deck-slide .cover .hello{font-family:var(--dk-disp);font-weight:900;font-size:11cqh;line-height:.92;letter-spacing:-.03em}
.deck-slide .cover .sub{font-family:var(--dk-disp);font-weight:700;font-size:4.4cqh;color:var(--dk-amar)}
.deck-slide .cover .meta{display:flex;gap:2.6cqw;font-size:2.3cqh;color:var(--dk-muted);font-family:var(--dk-disp);font-weight:600;letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap}
.deck-slide .bees{position:absolute;right:7cqw;top:8cqh;display:flex;gap:1cqw}
.deck-slide .bees i{width:3.4cqh;height:3.4cqh;border-radius:50%}

/* grids / imágenes */
.deck-slide .imgrid{display:grid;gap:1.4cqw;flex:1;margin-top:3cqh}
.deck-slide .ph{background:linear-gradient(135deg,#17171f,#101016);border:1px solid var(--dk-line);border-radius:1.4cqh;display:grid;place-items:center;color:var(--dk-dim);font-size:1.9cqh;font-family:var(--dk-disp);font-weight:600;letter-spacing:.03em;text-align:center;padding:1cqh;overflow:hidden}
.deck-slide .ph img{width:100%;height:100%;object-fit:cover}
.deck-slide .fullimg{position:absolute;inset:0;background:#0c0c11}
.deck-slide .fullimg img{width:100%;height:100%;object-fit:cover}
.deck-slide .fullimg .cap{position:absolute;left:8cqw;bottom:6cqh;font-family:var(--dk-disp);font-weight:800;font-size:4cqh;text-shadow:0 2px 20px #000}

/* team */
.deck-slide .team{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;flex:1;margin-top:3cqh}
.deck-slide .person{display:flex;flex-direction:column;gap:1.4cqh}
.deck-slide .person .pic{aspect-ratio:1;border-radius:2cqh;background:linear-gradient(150deg,#1d1d26,#111117);border:1px solid var(--dk-line);max-height:32cqh;display:grid;place-items:center;color:var(--dk-dim);font-size:6cqh;overflow:hidden}
.deck-slide .person .pic img{width:100%;height:100%;object-fit:cover}
.deck-slide .person .nm{font-family:var(--dk-disp);font-weight:800;font-size:3.4cqh}
.deck-slide .person .rl{font-size:2.3cqh;font-weight:600}
.deck-slide .person .bio{font-size:2.1cqh;color:var(--dk-muted);line-height:1.4}

/* steps */
.deck-slide .steps{display:flex;flex-direction:column;gap:2cqh;flex:1;margin-top:2cqh;justify-content:center}
.deck-slide .step{display:grid;grid-template-columns:auto 1fr;gap:2.4cqw;align-items:start}
.deck-slide .step .n{font-family:var(--dk-disp);font-weight:900;font-size:5cqh;line-height:1;width:8cqh}
.deck-slide .step .tl{font-family:var(--dk-disp);font-weight:800;font-size:2.9cqh;margin-bottom:.5cqh}
.deck-slide .step .ds{font-size:2.1cqh;color:var(--dk-muted);line-height:1.4;max-width:72cqw}

/* package */
.deck-slide .pkg{display:grid;grid-template-columns:1.4fr 1fr;gap:5cqw;flex:1;margin-top:2cqh}
.deck-slide .pkg ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1.3cqh}
.deck-slide .pkg li{font-size:2.35cqh;color:#e2e2e8;padding-left:3.2cqw;position:relative;line-height:1.32}
.deck-slide .pkg li::before{content:"";position:absolute;left:0;top:.85cqh;width:1.5cqh;height:1.5cqh;border-radius:3px;background:var(--dk-b,#fff)}
.deck-slide .pricebox{align-self:end;text-align:right;display:flex;flex-direction:column;gap:.6cqh}
.deck-slide .pricebox .wk{font-family:var(--dk-disp);font-weight:700;font-size:2.4cqh;color:var(--dk-muted);text-transform:uppercase;letter-spacing:.08em}
.deck-slide .pricebox .lbl{font-size:2.2cqh;color:var(--dk-dim)}
.deck-slide .pricebox .amt{font-family:var(--dk-disp);font-weight:900;font-size:9cqh;line-height:.9;letter-spacing:-.02em}

/* timeline */
.deck-slide .tl4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw;flex:1;margin-top:3cqh}
.deck-slide .etapa{border-top:.5cqh solid;padding-top:1.6cqh;display:flex;flex-direction:column;gap:1cqh}
.deck-slide .etapa .et{font-family:var(--dk-disp);font-weight:800;font-size:2.5cqh}
.deck-slide .etapa .ed{font-size:1.95cqh;color:var(--dk-muted);line-height:1.36}

/* terms */
.deck-slide .terms{font-size:2.15cqh;color:#cfcfd6;line-height:1.6;max-width:80cqw;margin-top:2cqh;white-space:pre-wrap}

/* closing */
.deck-slide .closing{align-items:center;justify-content:center;text-align:center;gap:3cqh}
.deck-slide .closing .x{font-family:var(--dk-disp);font-weight:900;font-size:8cqh;letter-spacing:-.02em;line-height:1}
.deck-slide .closing .team-row{display:flex;gap:1.2cqw;flex-wrap:wrap;justify-content:center;margin-top:1cqh}
.deck-slide .chiprole{font-size:1.9cqh;color:var(--dk-ink);background:#ffffff10;border:1px solid var(--dk-line2);border-radius:100px;padding:.7cqh 1.8cqw;font-weight:600}

/* merge + edición inline */
.deck-slide .mg{border-bottom:1.5px dashed currentColor;padding-bottom:.02em}
.deck-slide .mg.empty{opacity:.55;font-style:italic}
.deck-slide.editing [data-f]{cursor:text;border-radius:3px;transition:box-shadow .12s}
.deck-slide.editing [data-f]:hover{box-shadow:0 0 0 2px #ffffff22}
.deck-slide.editing [data-f]:focus{outline:none;box-shadow:0 0 0 2px var(--dk-azul)}

/* ============================================================
   Editor / lista in-app (usa los tokens de la app: --bg-*, --border…)
   ============================================================ */
.deck-editor{display:flex;flex-direction:column;height:calc(100vh - 92px);min-height:520px}
.de-top{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--bg-1)}
.de-top .nm{font-weight:700;font-size:15px;border:1px solid transparent;background:transparent;color:var(--text);padding:6px 9px;border-radius:8px;min-width:200px;flex:0 1 auto}
.de-top .nm:focus{border-color:var(--border);outline:none;background:var(--bg-2)}
.de-merge{display:flex;gap:6px;align-items:center;background:var(--bg-2);border:1px solid var(--border);border-radius:9px;padding:4px 8px}
.de-merge label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700}
.de-merge input{width:120px;background:transparent;border:0;color:var(--text);font-weight:600;font-size:13px;padding:3px 4px}
.de-merge input:focus{outline:none}
.de-status{font-size:12px;color:var(--text-3);min-width:66px}
.de-body{flex:1;display:flex;min-height:0}
.de-rail{width:156px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;padding:10px 9px;display:flex;flex-direction:column;gap:8px;background:var(--bg-1)}
.de-thumb{position:relative;border:1.5px solid var(--border);border-radius:9px;overflow:hidden;aspect-ratio:16/9;cursor:pointer;background:#000;flex-shrink:0}
.de-thumb.active{border-color:var(--accent,#c79a3b);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#c79a3b) 30%,transparent)}
.de-thumb .mini{position:absolute;inset:0;transform:scale(.132);transform-origin:top left;width:758%;height:758%;pointer-events:none}
.de-thumb .n{position:absolute;top:3px;left:5px;font-size:9px;font-weight:700;background:#000a;color:#fff;border-radius:3px;padding:0 4px;z-index:2}
.de-addslide{border:1.5px dashed var(--border);border-radius:9px;padding:9px;text-align:center;color:var(--text-3);cursor:pointer;font-size:12px;font-weight:600;background:transparent}
.de-addslide:hover{color:var(--text);border-color:var(--text-3)}
.de-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px;gap:12px;overflow:auto}
.de-stage{width:100%;max-width:min(1000px,calc((100vh - 300px)*1.7778));margin:0 auto}
.de-tools{max-width:1000px;margin:0 auto;width:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--text-2)}
.de-tools .grp{display:flex;gap:6px;align-items:center;background:var(--bg-1);border:1px solid var(--border);border-radius:9px;padding:5px 9px}
.de-swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.de-swatch.on{border-color:var(--text)}
.de-hint{max-width:1000px;margin:0 auto;width:100%;font-size:12px;color:var(--text-3)}

/* slide "HTML" importada (Claude Design, lienzo 2560×1440 escalado) */
.deck-slide .htmlstage{position:absolute;top:0;left:0;transform-origin:top left;overflow:hidden;background:#000}
.deck-slide .htmlstage > section{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;overflow:hidden}
.deck-slide.editing .htmlstage{outline:none}
.deck-slide.editing .htmlstage [data-mg]{box-shadow:0 0 0 2px #ffd93255}

/* selección de elementos en slide HTML (editor avanzado) */
.deck-slide.editing .dk-sel{outline:8px solid #00a2ff!important;outline-offset:0;cursor:move}
.deck-slide.editing .dk-sel[contenteditable="true"]{cursor:text;outline-color:#16e7cf!important}
.deck-slide.editing .htmlstage{cursor:default}