/* Las variables de color (--bg, --card, --line, --orange, --cream, --muted…) viven en tokens.css
     como alias de la paleta nueva. --modo-color la sigue cambiando setModo en tiempo de ejecución. */
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--cream);
    overflow-x:hidden;
  }
  ::selection{background:var(--orange);color:#fff}
  .px{font-family:'Silkscreen',monospace}

  /* ---- cabecera de contexto por función (ambiente) ---- */
  #modo-banner{
    position:sticky;top:60px;z-index:30;margin:0 0 34px;
    background:color-mix(in srgb, var(--modo-color) 15%, var(--bg));
    border:1px solid color-mix(in srgb, var(--modo-color) 38%, transparent);
    border-left:5px solid var(--modo-color);
    border-radius:15px;backdrop-filter:blur(9px);
  }
  .mb-inner{display:flex;align-items:center;gap:16px;padding:13px 20px}
  .mb-emoji{font-size:30px;line-height:1;flex-shrink:0}
  .mb-txt{flex:1;min-width:0}
  .mb-nombre{font-size:18px;font-weight:800;color:var(--cream);letter-spacing:-.3px}
  .mb-desc{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
  .mb-volver{white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--modo-color);text-decoration:none;
    border:1px solid color-mix(in srgb, var(--modo-color) 45%, transparent);border-radius:999px;padding:8px 15px;transition:.2s;flex-shrink:0}
  .mb-volver:hover{background:color-mix(in srgb, var(--modo-color) 18%, transparent)}
  @media(max-width:640px){ .mb-desc{display:none} .mb-nombre{font-size:16px} }
  /* tinte del color del modo en toda la sección de trabajo (no en los modales) */
  .step .panel{
    border-color:color-mix(in srgb, var(--modo-color) 32%, var(--line));
    background:color-mix(in srgb, var(--modo-color) 7%, var(--card));
  }
  .step .panel h3 .dot{background:var(--modo-color)}
  .step .step-head .tag{color:var(--modo-color)}
  .step .step-head .tag .n{background:var(--modo-color)}
  .step .step-head h2{color:var(--cream)}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 28px;border-radius:14px;font-weight:700;font-size:15px;
    text-decoration:none;cursor:pointer;border:none;font-family:'Sora',sans-serif;
    transition:transform .2s, box-shadow .2s, background .2s;
  }
  .btn-orange{background:var(--orange);color:#fff;box-shadow:0 10px 35px rgba(236,106,46,.35)}
  .btn-orange:hover{transform:translateY(-3px);box-shadow:0 16px 45px rgba(236,106,46,.45)}
  .btn-ghost{background:transparent;color:var(--cream);border:1px solid var(--line)}
  .btn-ghost:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-3px)}
  .btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}

  /* escena 3D del hero */
  .scene{position:relative;height:480px;transform-style:preserve-3d}
  @media(max-width:900px){.scene{height:340px}}
  .chip{
    position:absolute;width:86px;height:86px;border-radius:24px;
    background:linear-gradient(145deg,#241c14,#171109);
    border:1.5px solid var(--orange);
    display:flex;align-items:center;justify-content:center;
    font-size:34px;
    box-shadow:0 24px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(244,239,230,.08);
    will-change:transform;
  }
  .chip span{filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
  .hub{
    position:absolute;left:6%;top:42%;
    font-family:'Silkscreen',monospace;font-size:30px;color:var(--orange);
    background:rgba(236,106,46,.1);border:1.5px solid var(--orange);
    padding:14px 22px;border-radius:18px;
    box-shadow:0 0 60px rgba(236,106,46,.25);
    will-change:transform;
  }
  svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  svg.wires path{stroke:var(--orange);stroke-width:1.6;fill:none;opacity:.65}

  /* ---------- secciones ---------- */
  section.step{padding:110px 7vw;position:relative}
  .step-head{margin-bottom:44px;max-width:760px}
  .step-head .tag{
    display:inline-flex;align-items:center;gap:10px;
    color:var(--orange);font-size:12px;letter-spacing:3.5px;font-weight:700;
    margin-bottom:16px;text-transform:uppercase;
  }
  .step-head .tag .n{
    font-family:'Silkscreen',monospace;
    background:var(--orange);color:#fff;border-radius:8px;
    padding:3px 9px;font-size:13px;letter-spacing:0;
  }
  .step-head h2{font-size:clamp(28px,3.6vw,48px);font-weight:800;letter-spacing:-1px;line-height:1.08}
  .step-head p{color:var(--muted);margin-top:14px;font-size:16px;line-height:1.6}

  /* ---------- paso 1 : banco de ángulos ---------- */
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
  .filters button{
    background:var(--card);border:1px solid var(--line);color:var(--muted);
    padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;
    cursor:pointer;font-family:'Sora',sans-serif;transition:.2s;
  }
  .filters button:hover{color:var(--cream);border-color:var(--orange-soft)}
  .filters button.on{background:var(--orange);border-color:var(--orange);color:#fff}
  .angle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
  .angle{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    padding:22px;cursor:pointer;position:relative;
    transition:border-color .2s, background .2s;
    transform-style:preserve-3d;will-change:transform;
  }
  .angle:hover{border-color:var(--orange-soft);background:var(--card2)}
  .angle.sel{border-color:var(--orange);background:rgba(236,106,46,.1);box-shadow:0 0 0 1px var(--orange), 0 18px 40px rgba(236,106,46,.12)}
  .angle .pilar{font-size:10.5px;letter-spacing:2.5px;color:var(--orange);font-weight:700;text-transform:uppercase;margin-bottom:10px}
  .angle h3{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.2px}
  .angle p{color:var(--muted);font-size:13px;margin-top:9px;line-height:1.55}
  .angle .usado{
    position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;
    color:#0c0a07;background:var(--good);border-radius:6px;padding:3px 8px;
    letter-spacing:1px;
  }
  .angle .addsem, .angle .borrar, .hook .borrar{
    margin-top:12px;font-size:11.5px;font-weight:700;font-family:'Sora',sans-serif;
    padding:6px 12px;border-radius:999px;border:1px solid var(--line);
    background:var(--bg2);color:var(--muted);cursor:pointer;transition:.2s;
  }
  .angle .addsem:hover{border-color:var(--orange);color:var(--orange)}
  .angle .addsem.on{background:var(--orange);border-color:var(--orange);color:#fff}
  .angle .borrar{margin-left:8px;padding:6px 10px}
  .angle .borrar:hover, .hook .borrar:hover{border-color:var(--bad);color:var(--bad)}

  /* hooks */
  .hook-row{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 18px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .hook{
    min-width:215px;background:var(--card);border:1px solid var(--line);
    border-radius:16px;padding:18px;cursor:pointer;transition:.2s;flex-shrink:0;
  }
  .hook:hover{border-color:var(--orange-soft)}
  .hook.sel{border-color:var(--orange);background:rgba(236,106,46,.1)}
  .hook .num{font-family:'Silkscreen',monospace;color:var(--orange);font-size:15px}
  .hook h4{font-size:14.5px;margin-top:8px;font-weight:700}
  .hook p{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}

  .subhead{font-size:13px;letter-spacing:3px;color:var(--muted);font-weight:700;text-transform:uppercase;margin:38px 0 16px}

  /* ---------- paso 2 : editor ---------- */
  .editor-wrap{display:grid;grid-template-columns:380px 1fr;gap:34px;align-items:start}
  @media(max-width:1000px){.editor-wrap{grid-template-columns:1fr}}
  .panel{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    padding:26px;
  }
  .panel h3{font-size:15px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:8px}
  .panel h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:11.5px;letter-spacing:1.5px;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:7px}
  .field input,.field select,.field textarea{
    width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;
    color:var(--cream);padding:12px 14px;font-size:14px;font-family:'Sora',sans-serif;
    outline:none;transition:border-color .2s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange)}
  .field textarea{resize:vertical;min-height:74px;line-height:1.5}
  .slide-cards{display:flex;flex-direction:column;gap:14px}
  .slide-card{
    background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;
    display:grid;grid-template-columns:46px 1fr;gap:16px;
  }
  .slide-card .idx{
    font-family:'Silkscreen',monospace;color:var(--orange);font-size:19px;
    background:rgba(236,106,46,.1);border:1px solid rgba(236,106,46,.35);
    border-radius:12px;height:46px;display:flex;align-items:center;justify-content:center;
  }
  .slide-card .rol{font-size:10.5px;letter-spacing:2px;color:var(--orange);font-weight:700;text-transform:uppercase;margin-bottom:8px}
  .slide-card input.t{
    width:100%;background:transparent;border:none;border-bottom:1px dashed var(--line);
    color:var(--cream);font-size:16.5px;font-weight:700;font-family:'Sora',sans-serif;
    padding:4px 0 8px;outline:none;
  }
  .slide-card input.t:focus{border-bottom-color:var(--orange)}
  .slide-card textarea.b{
    width:100%;background:transparent;border:none;color:var(--muted);
    font-size:13.5px;font-family:'Sora',sans-serif;line-height:1.55;
    margin-top:8px;outline:none;resize:vertical;min-height:54px;
  }

  /* ---------- paso 3 : preview carrusel ---------- */
  .preview-grid{display:grid;grid-template-columns:minmax(300px,470px) minmax(280px,400px);gap:34px;justify-content:center;align-items:start}
  @media(max-width:900px){.preview-grid{grid-template-columns:1fr}}
  .preview-zone{display:flex;flex-direction:column;align-items:center;gap:26px}
  .carousel-frame{
    position:relative;width:min(460px,86vw);aspect-ratio:1080/1350;
    perspective:1400px;
  }
  .slide-view{
    position:absolute;inset:0;border-radius:22px;overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,.6);
    transform-style:preserve-3d;backface-visibility:hidden;
  }
  .car-nav{display:flex;align-items:center;gap:18px}
  .car-nav button{
    width:52px;height:52px;border-radius:50%;border:1px solid var(--line);
    background:var(--card);color:var(--cream);font-size:20px;cursor:pointer;transition:.2s;
  }
  .car-nav button:hover{border-color:var(--orange);color:var(--orange);transform:scale(1.08)}
  .car-dots{display:flex;gap:7px}
  .car-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.25s}
  .car-dots i.on{background:var(--orange);transform:scale(1.3)}

  /* ---- la lámina en sí (preview escalado y render 1080x1350) — colores por variables ---- */
  .lam{
    width:1080px;height:1350px;background:var(--lbg,#15100a);color:var(--ltx,#f4efe6);
    font-family:'Sora',sans-serif;position:relative;display:flex;flex-direction:column;
    padding:96px 84px 150px;overflow:hidden;
  }
  .lam .glow{position:absolute;width:900px;height:700px;border-radius:50%;filter:blur(120px);background:var(--lac14,rgba(236,106,46,.14));top:-300px;right:-250px}
  .lam .kick{position:relative;color:var(--lac,#ec6a2e);font-size:26px;letter-spacing:8px;font-weight:700;text-transform:uppercase;margin-bottom:46px}
  .lam .tit{position:relative;font-size:88px;font-weight:800;line-height:1.06;letter-spacing:-2.5px;white-space:pre-wrap}
  .lam .tit em{font-style:normal;color:var(--lac,#ec6a2e)}
  .lam .tit.pixel{font-family:'Silkscreen',monospace;font-size:72px;color:var(--lac,#ec6a2e);letter-spacing:0;font-weight:700}
  .lam .body{position:relative;margin-top:56px;font-size:34px;line-height:1.6;color:var(--lmt,#cfc6b8);white-space:pre-wrap}
  .lam ul.list{position:relative;margin-top:56px;list-style:none;display:flex;flex-direction:column;gap:34px}
  .lam ul.list li{display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start;font-size:34px;line-height:1.45;color:var(--ltx,#e8e1d4)}
  .lam ul.list li .b{
    font-family:'Silkscreen',monospace;color:var(--lac,#ec6a2e);font-size:30px;
    background:var(--lac14,rgba(236,106,46,.12));border-radius:14px;height:60px;
    display:flex;align-items:center;justify-content:center;
  }
  .lam .foot{
    position:absolute;left:0;right:0;bottom:0;height:108px;
    background:var(--lfoot,rgba(0,0,0,.35));display:flex;align-items:center;justify-content:space-between;
    padding:0 84px;font-size:28px;
  }
  .lam .foot .who{display:flex;align-items:center;gap:18px;font-weight:700}
  .lam .foot .who .av{width:56px;height:56px;border-radius:50%;background:var(--lac,#ec6a2e);display:flex;align-items:center;justify-content:center;color:var(--lbg,#fff);font-size:26px;font-weight:800}
  .lam .foot .pg{color:var(--lac,#ec6a2e);font-weight:700}
  .lam .frame{position:absolute;inset:42px;border:2.5px solid var(--lac);border-radius:10px;pointer-events:none}
  .lam .bgimg{position:absolute;inset:0;background-size:cover;background-position:center}
  .lam .bgvelo{position:absolute;inset:0}
  .lam .foot .logoimg{height:62px;max-width:240px;object-fit:contain}
  .lam .cierre{
    position:absolute;left:0;right:0;bottom:150px;
    display:flex;flex-direction:column;align-items:center;gap:22px;
  }
  .lam .logo4l{width:310px;height:310px;object-fit:contain;filter:drop-shadow(0 12px 34px rgba(0,0,0,.4))}
  .lam .cuatro{
    text-align:center;color:var(--lac);font-size:27px;letter-spacing:5px;
    font-weight:700;text-transform:uppercase;padding:0 60px;
  }

  /* ---- layout foto a sangre (portada + contenido con imagen) ---- */
  .lam.lam-foto{justify-content:flex-end}
  .lam .lam-photo{position:absolute;inset:0;width:1080px;height:1350px;object-fit:cover;z-index:0}
  .lam.lam-foto .glow{display:none}
  .lam .lam-scrim{position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 18%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.12) 58%,rgba(0,0,0,0) 72%)}
  .lam .foto-text{position:relative;z-index:2;margin-bottom:34px}
  .lam .foto-text .foto-meta{color:var(--lac,#ec6a2e);font-size:30px;letter-spacing:6px;
    font-weight:800;text-transform:uppercase;margin-bottom:22px}
  .lam.lam-foto .tit{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.55)}
  .lam.lam-foto .tit em{color:var(--lac,#ec6a2e)}
  .lam.lam-foto .body{margin-top:24px;font-size:37px;line-height:1.4;color:rgba(255,255,255,.95);
    text-shadow:0 1px 18px rgba(0,0,0,.6);white-space:pre-wrap}
  .lam.lam-foto .foot{background:transparent;z-index:2;color:#fff}
  .lam.lam-foto .foot .who{color:#fff}

  /* ---- estilos de plantilla ---- */
  /* editorial: serif elegante, regla bajo el kicker */
  .lam.est-editorial .tit{font-family:'Playfair Display',serif;font-weight:800;letter-spacing:-1px}
  .lam.est-editorial .tit.pixel{font-family:'Playfair Display',serif;font-style:italic;font-size:86px;letter-spacing:-1px}
  .lam.est-editorial .kick{letter-spacing:12px;display:inline-block;align-self:flex-start;border-bottom:4px solid var(--lac);padding-bottom:14px}
  .lam.est-editorial .glow{opacity:.5}
  .lam.est-editorial ul.list li .b{border-radius:50%;width:60px}
  /* brutal: marco grueso, kicker en bloque, títulos en mayúsculas condensadas */
  .lam.est-brutal{border:16px solid var(--lac)}
  .lam.est-brutal .glow{display:none}
  .lam.est-brutal .kick{background:var(--lac);color:var(--lbg);display:inline-block;align-self:flex-start;padding:12px 22px;letter-spacing:5px}
  .lam.est-brutal .tit{font-family:'Bebas Neue',sans-serif;text-transform:uppercase;font-size:110px;letter-spacing:1px;font-weight:400;line-height:.98}
  .lam.est-brutal .tit.pixel{font-family:'Silkscreen',monospace;font-size:72px}
  .lam.est-brutal ul.list li .b{border-radius:0;border:3px solid var(--lac);background:transparent}
  .lam.est-brutal .foot{background:var(--lac);color:var(--lbg)}
  .lam.est-brutal .foot .pg{color:var(--lbg)}
  .lam.est-brutal .foot .who .av{background:var(--lbg);color:var(--lac)}
  /* gradiente: fondo diagonal hacia el acento */
  .lam.est-gradiente{background:linear-gradient(150deg,var(--lbg) 35%,var(--lac45) 160%)}
  .lam.est-gradiente .glow{width:1100px;height:900px;top:auto;bottom:-400px;left:-300px;right:auto}
  /* marco: borde fino, composición centrada */
  .lam.est-marco{padding:130px 110px 180px;text-align:center;align-items:center}
  .lam.est-marco .kick{letter-spacing:10px}
  .lam.est-marco .glow{top:-350px;left:50%;right:auto;margin-left:-450px}
  .lam.est-marco ul.list{text-align:left}

  /* render off-screen */
  #render-stage{position:fixed;left:-3000px;top:0;z-index:-10}

  /* ---------- paso 4 : export / publicar ---------- */
  .pub-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  @media(max-width:1000px){.pub-grid{grid-template-columns:1fr}}
  .nets{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
  .net{
    display:flex;align-items:center;gap:9px;
    background:var(--bg2);border:1px solid var(--line);border-radius:12px;
    padding:11px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.2s;user-select:none;
  }
  .net:hover{border-color:var(--orange-soft)}
  .net.on{border-color:var(--orange);background:rgba(236,106,46,.12);color:var(--orange)}
  .status{
    margin-top:18px;font-size:13.5px;line-height:1.6;padding:14px 16px;border-radius:12px;
    background:var(--bg2);border:1px solid var(--line);color:var(--muted);
    white-space:pre-wrap;max-height:220px;overflow:auto;display:none;
  }
  .status.show{display:block}
  .status.ok{border-color:rgba(125,201,143,.4);color:var(--good)}
  .status.err{border-color:rgba(224,106,106,.4);color:var(--bad)}

  /* ---------- modal de configuración ---------- */
  .modal-bg{
    position:fixed;inset:0;background:rgba(10,8,5,.7);backdrop-filter:blur(8px);
    z-index:95;display:none;align-items:flex-start;justify-content:center;
    overflow:auto;padding:70px 20px 40px;
  }
  .modal-bg.open{display:flex}
  .modal-panel{max-width:540px;width:100%;box-shadow:0 40px 100px rgba(0,0,0,.6)}

  /* ---- modelo de PANTALLAS: una vista a la vez, sin scroll entre funciones ----
     Inicio (body.home) = tablero + selector de funciones.
     Cualquier función = solo su pantalla, desde arriba (el inicio se oculta). */
  body:not(.home) header.hero, body:not(.home) #modo{display:none}
  body.home #paso1, body.home #paso2, body.home #paso3, body.home #paso4{display:none}
  body.home #modo-banner{display:none}

  /* visibilidad según el modo */
  #paso-video{display:none}
  body.modo-post #sem-panel{display:none}
  body.modo-post .angle .addsem{display:none}
  body.modo-semana #pub-single-campos{display:none}
  body.modo-semana #paso3{display:none}
  body.modo-semana #slide-cards{display:none}
  body.modo-semana #btn-claude, body.modo-semana #btn-generar,
  body.modo-semana #btn-prompt, body.modo-semana #btn-import-toggle,
  body.modo-semana #import-box{display:none}
  body.modo-video #paso-video{display:block}
  body.modo-video #paso1, body.modo-video #paso2,
  body.modo-video #paso3, body.modo-video #sem-panel,
  body.modo-video #pub-formato-wrap{display:none}
  #paso-anuncio{display:none}
  body.modo-anuncio #paso-anuncio{display:block}
  body.modo-anuncio #paso1, body.modo-anuncio #paso2,
  body.modo-anuncio #paso3,
  body.modo-anuncio #paso-video, body.modo-anuncio #sem-panel{display:none}
  body.modo-anuncio #paso4{display:none}   /* la cola de pendientes vive en Revisar */
  /* modo Fotografías con postura (espejo del anuncio: cabina propia, sin el paso4) */
  #paso-fotos{display:none}
  body.modo-fotos #paso-fotos{display:block}
  body.modo-fotos #paso1, body.modo-fotos #paso2,
  body.modo-fotos #paso3,
  body.modo-fotos #paso-video, body.modo-fotos #paso-anuncio, body.modo-fotos #sem-panel{display:none}
  body.modo-fotos #paso4{display:none}
  /* modo Carrusel con imágenes (espejo de fotos: cabina propia, sin el paso4) */
  #paso-carrimg{display:none}
  body.modo-carrimg #paso-carrimg{display:block}
  body.modo-carrimg #paso1, body.modo-carrimg #paso2,
  body.modo-carrimg #paso3,
  body.modo-carrimg #paso-video, body.modo-carrimg #paso-anuncio,
  body.modo-carrimg #paso-fotos, body.modo-carrimg #sem-panel{display:none}
  body.modo-carrimg #paso4{display:none}

  #paso-libros{display:none}
  body.modo-libros #paso-libros{display:block}
  body.modo-libros #paso1, body.modo-libros #paso2, body.modo-libros #paso3,
  body.modo-libros #paso-video, body.modo-libros #paso-anuncio, body.modo-libros #paso-fotos,
  body.modo-libros #paso-carrimg, body.modo-libros #sem-panel{display:none}
  body.modo-libros #paso4{display:none}
  /* Rendimiento: #paso-metricas lo muestra shell.css por pantalla (body.pantalla-rendimiento) */
  #paso-metricas{display:none}
  .met-tabla{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
  .met-tabla th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line)}
  .met-tabla td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--cream);vertical-align:top}
  .met-tabla td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace;color:var(--muted)}
  .met-tabla tr:hover td{background:rgba(255,255,255,.02)}
  .met-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:4px 6px 2px}
  /* swatches de tema */
  .swatches{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
  .sw{width:36px;height:36px;border-radius:50%;cursor:pointer;border:2px solid var(--line);transition:.2s;position:relative}
  .sw:hover{transform:scale(1.12)}
  .sw.on{border-color:#fff;box-shadow:0 0 0 2.5px var(--orange)}
  .sw span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px}
  .custom-colors{display:flex;gap:10px;margin-top:10px;align-items:center}
  .custom-colors input[type=color]{width:46px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);cursor:pointer;padding:3px}
  .custom-colors label{font-size:11px;color:var(--muted)}
  /* rejilla de opciones del post (paso 02) — 2 columnas, los anchos ocupan fila completa */
  .opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px;grid-auto-flow:row dense;align-items:start}
  .opt-grid > .field{margin:0}
  .opt-grid .span2{grid-column:1 / -1}
  @media(max-width:560px){.opt-grid{grid-template-columns:1fr}}

  /* historial */
  .hist{display:flex;flex-direction:column;gap:10px;margin-top:8px}
  .hist .h-item{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;
    font-size:13px;color:var(--muted);
  }
  .hist .h-item b{color:var(--cream);font-weight:600}

  footer{padding:60px 7vw;border-top:1px solid var(--line);color:var(--muted);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
  footer .px{color:var(--orange)}

  .toast{
    position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);
    background:var(--card2);border:1px solid var(--orange);color:var(--cream);
    border-radius:14px;padding:14px 24px;font-size:14px;font-weight:600;z-index:99;
    box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;pointer-events:none;
  }