#c3a-comic-tool{
  --bristol:#f5f5f2;      /* cartulina bristol */
  --bristol-2:#2b2b2b;
  --tarjeta:#ffffff;
  --tinta:#181818;
  --humo:#666666;
  --hair:#d8d8d8;
  --hair-2:#e9e9e6;
  --azul:#4d92c0;         /* azul no reproducible, el de la plancha */
  --azul-txt:#3a7ea9;
  --azul-suave:rgba(77,146,192,.09);
  --verde:#3f6b4d;
  --verde-suave:#edf3ee;
  --ambar:#9a6717;
  --ambar-suave:#f8f1e4;
  --corte:#c9256e;
}
#c3a-comic-tool,
#c3a-comic-tool *{box-sizing:border-box}
#c3a-comic-tool{-webkit-text-size-adjust:100%}
#c3a-comic-tool{
  margin:0;background:var(--bristol);color:var(--tinta);
  font-family:"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
#c3a-comic-tool h1,
#c3a-comic-tool h2,
#c3a-comic-tool h3{margin:0;font-weight:700;letter-spacing:-.015em}
#c3a-comic-tool h1{font-size:clamp(29px,4.2vw,44px);line-height:1.07;font-weight:800}
#c3a-comic-tool h2{font-size:21px}
#c3a-comic-tool h3{font-size:15px;font-weight:700}
#c3a-comic-tool p{margin:0 0 13px}
#c3a-comic-tool .mono{font-family:"Courier New",Courier,monospace}
#c3a-comic-tool .wrap{max-width:1200px;margin:0 auto;padding:0 26px}
#c3a-comic-tool .rot{           /* rótulo de plancha: mayúsculas pequeñas en azul */
  font-family:"Courier New",Courier,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul-txt);
}

#c3a-comic-tool /* ---------- portada ---------- */
.hero{padding:52px 0 30px}
#c3a-comic-tool .hero .rot{display:flex;align-items:center;gap:10px;margin-bottom:15px}
#c3a-comic-tool .hero .rot::after{content:'';flex:1;height:1px;background:var(--hair);max-width:180px}
#c3a-comic-tool .hero p{max-width:66ch;color:var(--humo);font-size:16px;margin-top:15px}
#c3a-comic-tool .hero .fine{
  max-width:66ch;font-size:13.5px;color:var(--humo);
  background:var(--azul-suave);border-left:3px solid var(--azul);
  padding:11px 14px;border-radius:0 3px 3px 0;
}

#c3a-comic-tool /* ---------- taller ---------- */
.taller{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;padding:8px 0 0;align-items:start}
#c3a-comic-tool .mesa{position:sticky;top:20px}
#c3a-comic-tool .tablero{background:var(--bristol-2);border:1px solid var(--hair);border-radius:3px;padding:18px}
#c3a-comic-tool .hoja{position:relative}
#c3a-comic-tool .hoja svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(21,20,15,.18))}
#c3a-comic-tool .pnl{cursor:pointer}
#c3a-comic-tool .pnl .hit{transition:fill .12s ease}
#c3a-comic-tool .pnl:hover .hit{fill:rgba(77,146,192,.12)}
#c3a-comic-tool .pnl:focus{outline:none}
#c3a-comic-tool .pnl:focus-visible .hit{fill:rgba(77,146,192,.18)}
#c3a-comic-tool .divider-hit{cursor:ew-resize;touch-action:none;fill:transparent}
#c3a-comic-tool .divider-line{pointer-events:none;stroke:var(--tinta);stroke-width:.4;opacity:.28}
#c3a-comic-tool .divider-grip{pointer-events:none;fill:var(--tinta);opacity:.42}
#c3a-comic-tool .divider-hit:hover + .divider-line,
#c3a-comic-tool .divider-hit:focus + .divider-line{opacity:.78;stroke-width:.65}

#c3a-comic-tool .vista{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:13px}
#c3a-comic-tool .vista .rot{margin-right:3px}
#c3a-comic-tool .pill{
  border:1px solid var(--hair);background:var(--tarjeta);color:var(--humo);
  font:inherit;font-size:12px;padding:4px 10px;border-radius:2px;cursor:pointer;
}
#c3a-comic-tool .pill:hover{border-color:var(--tinta);color:var(--tinta)}
#c3a-comic-tool .pill[aria-pressed="true"]{background:var(--azul-txt);border-color:var(--azul-txt);color:#fff}
#c3a-comic-tool .historial{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}
#c3a-comic-tool .historial span{margin-left:auto;font-family:"Courier New",Courier,monospace;font-size:11px;color:var(--humo)}

#c3a-comic-tool /* globo de la viñeta */
.pop{
  position:absolute;z-index:6;transform:translate(-50%,-7px);
  background:var(--tinta);color:#fff;border-radius:3px;padding:6px 7px;
  display:flex;gap:5px;align-items:center;white-space:normal;flex-wrap:wrap;max-width:min(96%,470px);
  box-shadow:0 8px 22px rgba(21,20,15,.3);
}
#c3a-comic-tool .pop::after{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--tinta)}
#c3a-comic-tool .pop.abajo{transform:translate(-50%,7px)}
#c3a-comic-tool .pop.abajo::after{bottom:auto;top:-5px;border-top:0;border-bottom:6px solid var(--tinta)}
#c3a-comic-tool .pop b{font-family:"Courier New",Courier,monospace;font-size:11px;font-weight:400;opacity:.6;padding:0 4px}
#c3a-comic-tool .pop button{font:inherit;font-size:12px;background:#37352d;color:#fff;border:0;padding:5px 9px;border-radius:2px;cursor:pointer}
#c3a-comic-tool .pop button:hover:not([disabled]){background:#545145}
#c3a-comic-tool .pop button[disabled]{opacity:.38;cursor:default}
#c3a-comic-tool .pop .x{background:transparent;padding:4px 5px;font-size:15px;line-height:1}

#c3a-comic-tool /* ---------- fichas de control ---------- */
.ficha{background:var(--tarjeta);border:1px solid var(--hair);border-radius:3px;margin-bottom:14px}
#c3a-comic-tool .ficha > header{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 16px;border-bottom:1px solid var(--hair-2);
}
#c3a-comic-tool .ficha > header .rot{color:var(--humo)}
#c3a-comic-tool .ficha > div{padding:15px 16px 17px}
#c3a-comic-tool .ficha .sub{font-size:12.5px;color:var(--humo);margin:-4px 0 14px}
#c3a-comic-tool .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px 11px}
#c3a-comic-tool .g2.full{grid-template-columns:1fr}
#c3a-comic-tool label.f{display:block;font-family:"Courier New",Courier,monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--humo);margin-bottom:4px}
#c3a-comic-tool .field{position:relative}
#c3a-comic-tool .field .u{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-family:"Courier New",Courier,monospace;font-size:11px;color:var(--hair);pointer-events:none}
#c3a-comic-tool input,
#c3a-comic-tool select{
  width:100%;font:inherit;font-size:13.5px;color:var(--tinta);background:#fff;
  border:1px solid var(--hair);border-radius:2px;padding:7px 9px;
}
#c3a-comic-tool input[type="number"]{font-family:"Courier New",Courier,monospace;padding-right:28px}
#c3a-comic-tool input[type="text"]{font-family:"Courier New",Courier,monospace}
#c3a-comic-tool select{appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 49%,var(--humo) 50%),linear-gradient(-45deg,transparent 49%,var(--humo) 50%);
  background-size:5px 5px;background-position:calc(100% - 15px) 55%,calc(100% - 11px) 55%;background-repeat:no-repeat}
#c3a-comic-tool input:hover,
#c3a-comic-tool select:hover{border-color:var(--humo)}
#c3a-comic-tool input:focus-visible,
#c3a-comic-tool select:focus-visible,
#c3a-comic-tool button:focus-visible,
#c3a-comic-tool .pnl:focus-visible{outline:2px solid var(--tinta);outline-offset:1px}
#c3a-comic-tool input[type="range"]{width:100%;accent-color:var(--azul-txt);height:20px;padding:0;border:0;background:none}

#c3a-comic-tool /* composiciones */
.comps{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:16px}
#c3a-comic-tool .comp{border:1px solid var(--hair);background:#fff;border-radius:2px;padding:6px 4px 5px;
  cursor:pointer;text-align:center;font:inherit;color:var(--azul)}
#c3a-comic-tool .comp svg{width:100%;height:auto;display:block;margin-bottom:4px}
#c3a-comic-tool .comp svg rect{fill:none;stroke:currentColor;stroke-width:1.2}
#c3a-comic-tool .comp span{font-family:"Courier New",Courier,monospace;font-size:9.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--humo);display:block;line-height:1.25}
#c3a-comic-tool .comp:hover{border-color:var(--tinta)}
#c3a-comic-tool .comp:hover span{color:var(--tinta)}
#c3a-comic-tool .comp[aria-pressed="true"]{border-color:var(--azul-txt);background:var(--azul-suave);color:var(--azul-txt)}
#c3a-comic-tool .comp[aria-pressed="true"] span{color:var(--azul-txt)}

#c3a-comic-tool /* tiras */
.tira{display:grid;grid-template-columns:auto auto 1fr auto;gap:9px;align-items:center;
  padding:7px 0;border-top:1px solid var(--hair-2)}
#c3a-comic-tool .tira:first-of-type{border-top:0}
#c3a-comic-tool .tira .t{font-family:"Courier New",Courier,monospace;font-size:10.5px;letter-spacing:.06em;color:var(--humo);width:52px;text-transform:uppercase}
#c3a-comic-tool .step{display:flex;align-items:center;border:1px solid var(--hair);border-radius:2px;background:#fff}
#c3a-comic-tool .step button{width:25px;height:25px;border:0;background:transparent;cursor:pointer;color:var(--tinta);font-size:14px;line-height:1;padding:0}
#c3a-comic-tool .step button:hover:not([disabled]){background:var(--bristol)}
#c3a-comic-tool .step button[disabled]{color:var(--hair);cursor:default}
#c3a-comic-tool .step .n{font-family:"Courier New",Courier,monospace;font-size:12px;min-width:20px;text-align:center}
#c3a-comic-tool .del{border:0;background:transparent;color:var(--hair);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px}
#c3a-comic-tool .del:hover{color:var(--tinta)}
#c3a-comic-tool .add{margin-top:9px;width:100%;border:1px dashed var(--hair);background:transparent;border-radius:2px;
  padding:7px;font:inherit;font-size:12.5px;color:var(--humo);cursor:pointer}
#c3a-comic-tool .add:hover{border-color:var(--tinta);color:var(--tinta)}

#c3a-comic-tool /* acciones y datos */
.acts{display:grid;gap:7px}
#c3a-comic-tool .b{font:inherit;font-size:14px;font-weight:600;border-radius:2px;padding:10px 13px;cursor:pointer;
  border:1px solid var(--tinta);background:#fff;color:var(--tinta);text-align:center}
#c3a-comic-tool .b:hover{background:var(--bristol)}
#c3a-comic-tool .b--main{background:var(--tinta);color:#fff}
#c3a-comic-tool .b--main:hover{background:#33302a}
#c3a-comic-tool .b--quiet{border-color:var(--hair);color:var(--humo);font-weight:400}
#c3a-comic-tool .b--quiet:hover{border-color:var(--humo);color:var(--tinta);background:#fff}
#c3a-comic-tool .dosb{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#c3a-comic-tool .b--compact{min-height:34px;padding:6px 11px;font-size:12px}
#c3a-comic-tool .print-note{margin:13px 0 0;padding:11px 13px;border-left:3px solid var(--tinta);
  background:var(--bristol);font-size:12.5px;color:var(--humo)}
#c3a-comic-tool .print-note b{color:var(--tinta)}
#c3a-comic-tool .datos{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair-2);display:grid;gap:4px}
#c3a-comic-tool .dato{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:12.5px;color:var(--humo)}
#c3a-comic-tool .dato b{font-family:"Courier New",Courier,monospace;font-weight:400;color:var(--tinta);font-size:12px}
#c3a-comic-tool .dato.alta b{color:var(--azul-txt);font-weight:700}
#c3a-comic-tool .linea{font-family:"Courier New",Courier,monospace;font-size:11.5px;color:var(--humo);min-height:18px;margin-top:9px}

#c3a-comic-tool /* revisión */
.revision{margin-top:30px;padding:30px 0 38px;border-top:1px solid var(--hair)}
#c3a-comic-tool .revision ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;max-width:90ch}
#c3a-comic-tool .revision li{font-size:14px;padding:11px 14px 11px 42px;position:relative;border-radius:3px;line-height:1.5}
#c3a-comic-tool .revision li::before{position:absolute;left:14px;top:10px;font-family:"Courier New",Courier,monospace;font-size:12px;font-weight:700}
#c3a-comic-tool li.w{background:var(--ambar-suave);color:#654816}#c3a-comic-tool li.w::before{content:'!';color:var(--ambar)}
#c3a-comic-tool li.g{background:var(--verde-suave);color:#2c4f38}#c3a-comic-tool li.g::before{content:'OK';font-size:9px;letter-spacing:.06em;color:var(--verde);top:13px}
#c3a-comic-tool .nota{max-width:80ch;font-size:13px;color:var(--humo);margin-top:24px;padding-top:16px;border-top:1px solid var(--hair-2)}
#c3a-comic-tool .nota b{color:var(--tinta);font-weight:600}
#c3a-comic-tool .c3a-comic-footer{padding:0 0 44px;font-family:"Courier New",Courier,monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--humo)}
#c3a-comic-tool .c3a-comic-footer span{color:var(--hair);margin:0 8px}

@media (max-width:960px){
  #c3a-comic-tool .taller{grid-template-columns:1fr;gap:24px}
  #c3a-comic-tool .mesa{position:static}
}
@media (max-width:560px){
  #c3a-comic-tool .wrap{padding:0 16px}
  #c3a-comic-tool .hero{padding:32px 0 22px}
  #c3a-comic-tool .g2{grid-template-columns:1fr}
  #c3a-comic-tool .comps{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){#c3a-comic-tool,
#c3a-comic-tool *{transition:none!important}}

/* Color3arte® · adaptación visual 18 % y aislamiento para Divi */
#c3a-comic-tool {
  --c3a-black:#181818;
  --c3a-dark:#2b2b2b;
  --c3a-gray-900:#3a3a3a;
  --c3a-gray-700:#666666;
  --c3a-gray-500:#9a9a9a;
  --c3a-gray-300:#d8d8d8;
  --c3a-gray-200:#e9e9e6;
  --c3a-gray-100:#f5f5f2;
  --c3a-white:#ffffff;
  --c3a-blue:#3a7ea9;
  --c3a-blue-soft:rgba(77,146,192,.09);
  --c3a-green:#2d7a46;
  --c3a-amber:#c78316;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(24px,4vw,52px);
  background:linear-gradient(180deg,var(--c3a-white),var(--c3a-gray-100));
  border:1px solid rgba(0,0,0,.06);
  border-radius:28px;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
  color:var(--c3a-black);
  font-family:"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#c3a-comic-tool .wrap{max-width:none;padding:0}
#c3a-comic-tool .hero{padding:0 0 30px;text-align:center}
#c3a-comic-tool .hero .rot{justify-content:center;margin-bottom:10px;color:var(--c3a-gray-700)}
#c3a-comic-tool .hero .rot::after{display:none}
#c3a-comic-tool .hero h2{
  max-width:860px;margin:0 auto;
  font-family:Eurostile,"Montserrat","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(30px,4vw,52px);line-height:1.02;font-weight:800;letter-spacing:-.035em
}
#c3a-comic-tool .hero>p{margin:16px auto 0;max-width:760px}
#c3a-comic-tool .hero .fine{
  margin-top:18px;padding:14px 17px;text-align:left;
  background:var(--c3a-gray-100);border-left:4px solid var(--c3a-black);
  border-radius:0 12px 12px 0;color:var(--c3a-dark)
}
#c3a-comic-tool .taller{
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.75fr);
  gap:clamp(20px,3vw,34px)
}
#c3a-comic-tool .mesa{top:18px}
#c3a-comic-tool .tablero{
  padding:clamp(14px,2vw,24px);background:var(--c3a-dark);
  border-color:rgba(255,255,255,.08);border-radius:22px;
  box-shadow:0 14px 34px rgba(0,0,0,.14)
}
#c3a-comic-tool .hoja{min-height:300px;display:flex;align-items:center;justify-content:center}
#c3a-comic-tool .hoja>div:first-child{width:100%}
#c3a-comic-tool .hoja svg{max-height:73vh;filter:drop-shadow(0 8px 22px rgba(0,0,0,.3))}
#c3a-comic-tool .vista{margin-top:14px;gap:8px}
#c3a-comic-tool .pill{
  padding:7px 11px;border-radius:999px;background:var(--c3a-white);
  color:var(--c3a-gray-700);font-size:12px;line-height:1.2
}
#c3a-comic-tool .pill[aria-pressed="true"]{
  background:var(--c3a-black);border-color:var(--c3a-black);color:var(--c3a-white)
}
#c3a-comic-tool .ficha{
  margin-bottom:16px;background:rgba(255,255,255,.92);
  border-color:rgba(0,0,0,.07);border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.055);overflow:hidden
}
#c3a-comic-tool .ficha>header{padding:14px 17px;background:var(--c3a-gray-100)}
#c3a-comic-tool .ficha>div{padding:17px}
#c3a-comic-tool .ficha>header h3{
  font-family:Eurostile,"Montserrat","Helvetica Neue",Arial,sans-serif;
  font-size:16px;font-weight:800
}
#c3a-comic-tool .rot{color:var(--c3a-gray-700);font-weight:700}
#c3a-comic-tool input,
#c3a-comic-tool select{
  min-height:42px;border-radius:10px;border-color:var(--c3a-gray-300);
  background-color:var(--c3a-white);font-size:14px
}
#c3a-comic-tool input:focus-visible,
#c3a-comic-tool select:focus-visible,
#c3a-comic-tool button:focus-visible,
#c3a-comic-tool .pnl:focus-visible{
  outline:3px solid rgba(24,24,24,.22);outline-offset:2px;border-color:var(--c3a-black)
}
#c3a-comic-tool input[type="range"]{min-height:24px;accent-color:var(--c3a-black)}
#c3a-comic-tool .comps{gap:8px}
#c3a-comic-tool .comp{padding:7px 5px;border-radius:10px;color:var(--c3a-gray-900)}
#c3a-comic-tool .comp[aria-pressed="true"]{
  background:var(--c3a-gray-100);border-color:var(--c3a-black);color:var(--c3a-black)
}
#c3a-comic-tool .comp[aria-pressed="true"] span{color:var(--c3a-black)}
#c3a-comic-tool .step{border-radius:8px}
#c3a-comic-tool .step button:hover:not([disabled]){background:var(--c3a-gray-100)}
#c3a-comic-tool .add{border-radius:10px;min-height:42px}
#c3a-comic-tool .b{
  min-height:46px;padding:10px 15px;border-radius:999px;
  border-color:var(--c3a-black);font-weight:700
}
#c3a-comic-tool .b--main{
  background:var(--c3a-black);border-color:var(--c3a-black);color:var(--c3a-white);
  box-shadow:0 12px 26px rgba(0,0,0,.16)
}
#c3a-comic-tool .b--main:hover:not([disabled]){
  background:var(--c3a-gray-900);border-color:var(--c3a-gray-900)
}
#c3a-comic-tool .b[disabled]{opacity:.52;cursor:not-allowed;box-shadow:none}
#c3a-comic-tool .datos{gap:7px}
#c3a-comic-tool .dato{padding:8px 0;border-bottom:1px solid var(--c3a-gray-200)}
#c3a-comic-tool .dato:last-child{border-bottom:0}
#c3a-comic-tool .dato.alta b{color:var(--c3a-black);font-weight:700}
#c3a-comic-tool .linea{color:var(--c3a-gray-900);font-weight:700}
#c3a-comic-tool .revision{
  margin-top:28px;padding:24px;border:1px solid rgba(0,0,0,.07);
  border-radius:18px;background:rgba(255,255,255,.72)
}
#c3a-comic-tool .revision h2{
  font-family:Eurostile,"Montserrat","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(22px,2.4vw,30px)
}
#c3a-comic-tool .revision li{border-radius:12px}
#c3a-comic-tool li.w{background:#f8f1e4;color:#654816}
#c3a-comic-tool li.g{background:rgba(45,122,70,.09);color:#244c32}
#c3a-comic-tool .c3a-comic-footer{padding:24px 0 0;text-align:center}
#c3a-comic-tool .pop{border-radius:10px}
#c3a-comic-tool .pop button{border-radius:7px}
#c3a-comic-tool .meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#c3a-comic-tool .meta-grid>div:nth-child(5){grid-column:span 2}
#c3a-comic-tool .historial{padding:1px 2px}
#c3a-comic-tool .historial .b{width:auto;border-radius:999px}
#c3a-comic-tool .print-note{border-radius:0 10px 10px 0}
@media (max-width:960px){
  #c3a-comic-tool{padding:24px 18px;border-radius:22px}
  #c3a-comic-tool .taller{grid-template-columns:1fr}
  #c3a-comic-tool .mesa{position:static}
  #c3a-comic-tool .hoja svg{max-height:none}
}
@media (max-width:560px){
  #c3a-comic-tool{padding:20px 12px;border-radius:18px}
  #c3a-comic-tool .hero h2{font-size:32px}
  #c3a-comic-tool .g2,
  #c3a-comic-tool .g2[style]{grid-template-columns:1fr!important}
  #c3a-comic-tool .meta-grid>div:nth-child(5){grid-column:auto}
  #c3a-comic-tool .comps{grid-template-columns:repeat(2,1fr)}
  #c3a-comic-tool .dosb{grid-template-columns:1fr}
  #c3a-comic-tool .revision{padding:18px 14px}
}