/* ============================================================================
   Láminas "📱 Celular y capturas" (2026-09-30) — ver public/lib/laminasCelular.js.
   El marco de la lámina, los títulos (.crsl-step-title), la etiqueta (.crsl-badge), la tarjeta (.crsl-box), los
   íconos de la lista (.crsl-check-icon) y la palabra clave (.crsl-cta-pill) los dibuja CADA ESTILO con sus propias
   reglas (index.html, carruselTemas.css, estiloNicoAldeTips.css). Acá va:
     · el acomodo (posiciones, tamaños, márgenes) — sin tocar colores/bordes de las clases del estilo;
     · lo propio de estas láminas (celular, sello, resaltado, pastilla del número), adaptado por estilo con la clase
       crsl-tema-<id> de la raíz y las variables --crsl-* de la lámina.
   html2canvas 1.4.1: sin box-shadow (se borran al exportar) → sombras duras = bloque desplazado detrás; sin filter ni
   mask; sin object-fit (la imagen se ubica en px desde el JS); SVG con colores ya resueltos.
   Especificidad: los ajustes de acomodo usan .crsl-slide.ccel (0,3,0)+ para ganarle a los temas (0,2,0) y, cuando
   hace falta, al estilo «Nico Alde Tips» (.crsl-slide.natx …, que se carga después).
   ============================================================================ */

/* ---------- capa del cuerpo y piezas ---------- */
.ccel-cuerpo{position:absolute; left:0; top:0; width:1080px; height:1350px; z-index:4; pointer-events:none; text-align:left;}
.ccel-cuerpo *{box-sizing:border-box;}
.ccel-cuerpo [data-el]{pointer-events:auto;}
.crsl-slide.ccel [data-ccel-oculta]{display:none !important;}
.ccel-p{position:absolute; transform-origin:center center;}
.ccel-r{position:relative; width:100%; height:100%; transform-origin:center center;}
.ccel-cuerpo i, .ccel-cuerpo b{font-style:normal;}
.ccel-cuerpo svg{display:block;}

/* ---------- columna de textos ---------- */
.ccel-col{position:absolute; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left;}
.ccel-col.arriba{justify-content:flex-start;}
.ccel-col.centro{align-items:center; text-align:center; justify-content:flex-start;}
.ccel-col.cta{justify-content:center;}
.ccel-col.cta .ccel-cta-abajo{margin-top:64px;}
.crsl-slide.ccel .ccel-col .ccel-etq-w{margin:0 0 20px;}
.crsl-slide.ccel .ccel-col .ccel-etq.crsl-badge, .crsl-slide.ccel .ccel-rotulo.crsl-badge{margin:0; display:inline-flex; white-space:nowrap;}
.crsl-slide.ccel .ccel-col .ccel-tit{margin:0; padding:0; line-height:1.03; text-align:inherit; max-width:100%; overflow-wrap:break-word;}
.crsl-slide.ccel.ccel .ccel-col .ccel-tit.crsl-step-title{padding-right:0;}
.crsl-slide.ccel .ccel-col.medir .ccel-tit{overflow-wrap:normal; overflow:hidden;} /* solo para medir si una palabra no entra a lo ancho */ /* el estilo Nico Alde Tips le deja lugar al sello en la última lámina: acá el sello es otro */
.crsl-slide.ccel .ccel-col .ccel-linea{margin:22px 0 4px;}
.crsl-slide.ccel .ccel-col.centro .ccel-linea{margin:22px auto 4px;}
.crsl-slide.ccel .ccel-col .ccel-sub{margin:22px 0 0; font-size:32px; line-height:1.35; text-align:inherit;}
.crsl-slide.ccel .ccel-lista{margin:34px 0 0; width:100%; font-size:32px; line-height:1.28; display:flex; flex-direction:column; gap:20px;}
.crsl-slide.ccel .ccel-col.arriba .ccel-lista{margin-top:0; font-size:30px;}
.ccel-fila{display:flex; align-items:center; gap:20px;}
.ccel-fila > span{flex:1; min-width:0;}
.crsl-slide.ccel .ccel-fila .crsl-check-icon{width:54px; height:54px; margin:0; flex:none;}
.crsl-slide.ccel .ccel-fila .crsl-check-icon svg{width:28px; height:28px;}
.crsl-slide.ccel .ccel-chip-num{font-family:var(--crsl-font-display),sans-serif; font-weight:800; font-size:22px; line-height:1; color:var(--crsl-accent-oncolor,#000); letter-spacing:0;}
.crsl-slide.ccel.crsl-lineal .ccel-chip-num, .crsl-slide.ccel.crsl-sinIconos .ccel-chip-num{color:var(--crsl-accent-text);}
.crsl-slide.ccel .ccel-chip-emoji{font-size:30px; line-height:1; background:var(--crsl-accent-a25);}

/* ---------- resaltado *palabra* (un span inline por palabra; las cajas se tocan sobre el espacio) ----------
   La caja es un degradé liso con background-size (no background-color): el fondo de un inline cubre todo el "content
   area" de la letra (~1,3 em) y con el interlineado apretado de los títulos (1,03) pisaba el renglón de arriba (visto
   exportando con Anton). Al 74 % del alto, corrida hacia abajo, queda a la altura de las letras en todas las tipografías. */
.crsl-slide.ccel .ccel-hl{display:inline; padding:0 .14em; margin:0 -.04em; border-radius:0; --ccel-hl:var(--crsl-accent);
  background:linear-gradient(var(--ccel-hl), var(--ccel-hl)) 0 64%/100% 74% no-repeat; color:var(--crsl-accent-oncolor,#000); text-shadow:none; -webkit-text-stroke:0;}
.crsl-slide.ccel .ccel-hl.c{padding-right:.26em; margin-right:-.2em;}
/* por estilo (la raíz trae crsl-tema-<id>; el de fábrica no tiene clase y usa la caja del acento de arriba) */
.crsl-tema-pop.ccel .ccel-hl{--ccel-hl:#FFE14D; color:#111;}
.crsl-tema-comic.ccel .ccel-hl{--ccel-hl:#FFD400; color:#111;}
.crsl-tema-rock.ccel .ccel-hl{color:#fff;}
.crsl-tema-premium.ccel .ccel-hl, .crsl-tema-clasico.ccel .ccel-hl, .crsl-tema-wellness.ccel .ccel-hl{background:linear-gradient(var(--crsl-accent2), var(--crsl-accent2)) 0 94%/100% .07em no-repeat; color:var(--crsl-accent-text); border-radius:0; padding:0 .04em;}
.crsl-tema-premium.ccel .ccel-hl{background-image:linear-gradient(var(--crsl-accent), var(--crsl-accent));}
.crsl-tema-clasico.ccel .ccel-hl, .crsl-tema-editorial.ccel .ccel-hl{font-style:italic;}
.crsl-tema-editorial.ccel .ccel-hl{background:none; color:var(--crsl-accent2-text); padding:0 .04em;}
.crsl-tema-neon.ccel .ccel-hl{background:none; color:var(--crsl-accent2); text-shadow:0 0 12px var(--crsl-accent2), 0 0 26px var(--crsl-accent2-a60); padding:0 .04em;}
.crsl-tema-mistico.ccel .ccel-hl{background:none; color:var(--crsl-accent-text); text-shadow:0 0 18px var(--crsl-accent-a60); padding:0 .04em;}
.crsl-tema-zen.ccel .ccel-hl, .crsl-tema-boho.ccel .ccel-hl{--ccel-hl:var(--crsl-accent2-a35); color:var(--crsl-text-main);}
.crsl-tema-minimal.ccel .ccel-hl{background:linear-gradient(var(--crsl-accent2), var(--crsl-accent2)) 0 90%/100% .16em no-repeat; color:var(--crsl-text-main); border-radius:0; padding:0 .04em;}
.crsl-tema-estiloGpt.ccel .ccel-hl{background:none; color:var(--crsl-accent2-text); padding:0 .04em;}
.crsl-tema-scrapbook.ccel .ccel-hl{--ccel-hl:var(--crsl-accent2-a35); color:var(--crsl-text-main);}
.crsl-tema-brutalista.ccel .ccel-hl{--ccel-hl:var(--crsl-accent2); color:#0a0a0a;}
.crsl-tema-y2k.ccel .ccel-hl{background-image:linear-gradient(90deg, var(--crsl-accent), var(--crsl-accent2)); color:#0b0b1a;}

/* ---------- celular ---------- */
.ccel-celw{position:relative;}
.ccel-halo{position:absolute; display:block; pointer-events:none;}
.ccel-sombra{position:absolute; display:block; left:6%; right:6%; bottom:-4.5%; height:9%; background:radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,0));}
.ccel-dura{position:absolute; display:none; left:0; top:0; width:100%; height:100%; transform:translate(18px,18px); background:#111;}
.ccel-anillo{position:absolute; display:none; left:-12px; top:-12px; right:-12px; bottom:-12px; border:1.5px solid var(--crsl-accent-a45);}
.ccel-cel{position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(145deg,#2c2c2c,#0b0b0b 40%,#1a1a1a);}
.ccel-pant{position:absolute; overflow:hidden; background:#000;}
.ccel-pant .ccel-img{position:absolute; display:block; max-width:none;}
.ccel-isla{position:absolute; display:block; left:36%; width:28%; border-radius:99px; background:#000;}
.ccel-refl{position:absolute; display:block; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%);}
.ccel-borde{position:absolute; display:block; left:0; top:0; right:0; bottom:0; border:2px solid #3a3a3a; pointer-events:none;}
.ccel-boton{position:absolute; display:block; right:-7px; top:24%; width:6px; height:11%; border-radius:0 4px 4px 0; background:#2a2a2a;}
.ccel-cinta{position:absolute; display:none; width:38%; height:6.5%; background:rgba(214,120,60,.86); border-left:3px dashed rgba(255,255,255,.7); border-right:3px dashed rgba(255,255,255,.7);}
.ccel-cinta.a{left:-12%; top:3%; transform:rotate(-38deg);}
.ccel-cinta.b{right:-12%; bottom:3%; transform:rotate(-38deg); background:rgba(47,107,87,.82);}
/* recorte del celular grande (se funde con el fondo antes del pie) */
.ccel-recorte{position:absolute; overflow:hidden;}
.ccel-fundido{position:absolute; display:block; pointer-events:none;}

/* pantalla de ejemplo neutra (sin captura): tamaños en em (font-size de la pantalla = ancho/18) */
.ccel-demo{position:absolute; left:0; top:0; right:0; bottom:0; background:#f5f4f0; padding:2.7em .9em 0; display:flex; flex-direction:column; gap:.7em; font-family:'Inter',sans-serif;}
.ccel-demo s{display:block; height:.55em; border-radius:9px; background:#dcd9cf; text-decoration:none;}
.ccel-demo s.m{width:62%;} .ccel-demo s.c{width:38%;}
.ccel-demo .d-bar{position:absolute; left:1.2em; right:1.2em; top:.75em; display:flex; justify-content:space-between; align-items:center; font-size:.8em; color:#222;}
.ccel-demo .d-bar b{font-weight:700;} .ccel-demo .d-bar span{display:flex; gap:.25em;} .ccel-demo .d-bar i{width:.42em; height:.42em; border-radius:50%; background:#222; display:block;}
.ccel-demo .d-head{display:flex; align-items:center; gap:.6em; padding:.2em 0 .3em;}
.ccel-demo .d-av{width:2.2em; height:2.2em; border-radius:50%; background:var(--crsl-accent); display:block; flex:none;}
.ccel-demo .d-hl{flex:1; display:flex; flex-direction:column; gap:.4em;}
.ccel-demo .d-kpis{display:flex; gap:.6em;}
.ccel-demo .d-kpis > div{flex:1; background:#fff; border:1px solid #e6e3da; border-radius:.7em; padding:.7em; display:flex; flex-direction:column; gap:.45em;}
.ccel-demo .d-kpis s.k{height:1.1em; width:70%; background:#2a2a2a;}
.ccel-demo .d-kpis .on s.k{background:var(--crsl-accent);}
.ccel-demo .d-graf{height:5.2em; background:#fff; border:1px solid #e6e3da; border-radius:.7em; padding:.7em .8em; display:flex; align-items:flex-end; gap:.45em;}
.ccel-demo .d-graf i{flex:1; display:block; background:var(--crsl-accent); border-radius:.25em .25em 0 0;}
.ccel-demo .d-card{background:#fff; border:1px solid #e6e3da; border-radius:.7em; padding:.75em; display:flex; align-items:center; gap:.6em;}
.ccel-demo .d-dot{width:1.5em; height:1.5em; border-radius:.45em; background:#e9e6dc; display:block; flex:none;}

/* --- el celular según el estilo --- */
.crsl-tema-pop .ccel-cel{background:var(--crsl-accent2);}
.crsl-tema-pop .ccel-borde{border:6px solid #111;}
.crsl-tema-pop .ccel-dura, .crsl-tema-comic .ccel-dura{display:block;}
.crsl-tema-pop .ccel-sombra, .crsl-tema-comic .ccel-sombra, .crsl-tema-brutalista .ccel-sombra{display:none;}
.crsl-tema-pop .ccel-boton, .crsl-tema-comic .ccel-boton{background:#111;}
.crsl-tema-comic .ccel-cel{background:#fff;}
.crsl-tema-comic .ccel-borde{border:6px solid #111;}
.crsl-tema-comic .ccel-dura{transform:translate(14px,14px);}
.crsl-tema-comic .ccel-refl, .crsl-tema-pop .ccel-refl{display:none;}
.crsl-tema-rock .ccel-cel{background:#0d0d0d;}
.crsl-tema-rock .ccel-borde{border:4px solid var(--crsl-accent);}
.crsl-tema-clasico .ccel-cel{background:#2a211c;}
.crsl-tema-clasico .ccel-borde{border:2px solid var(--crsl-accent2);}
.crsl-tema-clasico .ccel-anillo{display:block; border-color:var(--crsl-accent2);}
.crsl-tema-premium .ccel-cel{background:#0b0b0c;}
.crsl-tema-premium .ccel-borde{border:1.5px solid var(--crsl-accent);}
.crsl-tema-premium .ccel-anillo{display:block; left:-14px; top:-14px; right:-14px; bottom:-14px; border-width:1px;}
.crsl-tema-neon .ccel-cel{background:#07051a;}
.crsl-tema-neon .ccel-borde{border:4px solid var(--crsl-accent);}
.crsl-tema-neon .ccel-anillo{display:block; border:3px solid var(--crsl-accent2); left:-11px; top:-11px; right:-11px; bottom:-11px;}
.crsl-tema-scrapbook .ccel-cel{background:#262626;}
.crsl-tema-scrapbook .ccel-cinta{display:block;}
.crsl-tema-mistico .ccel-cel{background:#140a2c;}
.crsl-tema-mistico .ccel-borde{border:2px solid var(--crsl-accent-a55);}
.crsl-tema-mistico .ccel-anillo{display:block; border-color:var(--crsl-accent-a25);}
.crsl-tema-zen .ccel-cel{background:#f7f4ec;}
.crsl-tema-zen .ccel-borde{border:2px solid var(--crsl-accent-a45);}
.crsl-tema-zen .ccel-boton, .crsl-tema-wellness .ccel-boton{background:#d9d3c2;}
.crsl-tema-wellness .ccel-borde{border:1.5px solid var(--crsl-accent);}
.crsl-tema-minimal .ccel-cel, .crsl-tema-editorial .ccel-cel{background:#141414;}
.crsl-tema-minimal .ccel-borde, .crsl-tema-editorial .ccel-borde{border:0;}
.crsl-tema-minimal .ccel-refl, .crsl-tema-minimal .ccel-sombra, .crsl-tema-brutalista .ccel-refl{display:none;}
.crsl-tema-estiloGpt .ccel-cel{background:#0a0a0a;}
.crsl-tema-estiloGpt .ccel-borde{border:2px solid var(--crsl-accent);}
.crsl-tema-estiloGpt .ccel-anillo{display:block; border-color:var(--crsl-accent-a25);}
.crsl-tema-brutalista .ccel-cel{background:#0a0a0a;}
.crsl-tema-brutalista .ccel-borde{border:6px solid #0a0a0a;}
.crsl-tema-brutalista .ccel-dura{display:block; background:var(--crsl-accent2);}
.crsl-tema-boho .ccel-cel{background:#4a3426;}
.crsl-tema-boho .ccel-borde{border:3px solid var(--crsl-accent2);}
.crsl-tema-y2k .ccel-cel{background:linear-gradient(145deg,#f7f7fb,#a6acc2 45%,#eceef6);}
.crsl-tema-y2k .ccel-borde{border:3px solid var(--crsl-accent);}
.crsl-tema-y2k .ccel-boton{background:#a6acc2;}

/* ---------- tarjeta flotante (usa .crsl-box: forma y color del estilo; acá solo el tamaño) ----------
   Varios estilos tienen la caja semitransparente (Premium, Místico, Neón, Zen) o sin fondo (Minimal): encima del celular
   el texto no se leía (visto exportando). Va sobre una base opaca del color de fondo de la lámina, con el radio de la
   caja de cada estilo (los de carruselTemas.css). */
.ccel-tarjeta-w{position:relative; border-radius:26px; background:var(--crsl-bg);}
.crsl-tema-pop .ccel-tarjeta-w, .crsl-tema-neon .ccel-tarjeta-w{border-radius:22px;}
.crsl-tema-rock .ccel-tarjeta-w, .crsl-tema-minimal .ccel-tarjeta-w, .crsl-tema-brutalista .ccel-tarjeta-w{border-radius:0;}
.crsl-tema-clasico .ccel-tarjeta-w, .crsl-tema-premium .ccel-tarjeta-w, .crsl-tema-scrapbook .ccel-tarjeta-w{border-radius:4px;}
.crsl-tema-comic .ccel-tarjeta-w{border-radius:44px;}
.crsl-tema-mistico .ccel-tarjeta-w{border-radius:30px;}
.crsl-tema-zen .ccel-tarjeta-w{border-radius:38px;}
.crsl-tema-estiloGpt .ccel-tarjeta-w{border-radius:20px;}
.crsl-tema-minimal .ccel-tarjeta.crsl-box{border-top:1px solid var(--crsl-card-border); border-right:1px solid var(--crsl-card-border); border-bottom:1px solid var(--crsl-card-border);}
.crsl-slide.ccel .ccel-p .ccel-tarjeta.crsl-box{width:100%; margin:0; padding:28px 32px; font-size:30px; line-height:1.36; text-align:left;}
.ccel-tarjeta-t{font-family:var(--crsl-font-display),sans-serif; font-weight:800; font-size:20px; letter-spacing:.2em; text-transform:uppercase; line-height:1.2; margin-bottom:10px; color:var(--crsl-accent2-text, var(--crsl-accent2));}
.crsl-tema-pop .ccel-tarjeta-t, .crsl-tema-comic .ccel-tarjeta-t{color:#111;}
.crsl-slide.natx .ccel-tarjeta-t{font-family:'Montserrat',sans-serif; color:var(--crsl-accent);}
.crsl-slide.natx.natx-claro .ccel-tarjeta-t, .crsl-slide.natx.natx-amarillo .ccel-tarjeta-t{color:#050505;}

/* ---------- rótulos de los dos celulares ---------- */
.ccel-rotulo-w{position:absolute; display:flex; justify-content:center; z-index:3;}

/* ---------- cierre: palabra clave, kicker y pastilla del número ---------- */
.ccel-cta-arriba, .ccel-cta-abajo{display:flex; flex-direction:column; align-items:flex-start; width:100%;}
.ccel-kicker{font-family:'Inter',sans-serif; font-weight:800; font-size:22px; letter-spacing:.24em; text-transform:uppercase; line-height:1.3; color:var(--crsl-accent2-text, var(--crsl-accent2)); margin-bottom:22px;}
.crsl-slide.ccel .ccel-cta-arriba .ccel-tit{line-height:1;}
.ccel-palabra-w{margin:18px 0 22px;}
.crsl-slide.ccel .ccel-palabra-w .ccel-palabra.crsl-cta-pill{position:relative; right:auto; bottom:auto; left:auto; top:auto; display:inline-block; padding:.12em .34em .14em; line-height:1; white-space:nowrap; letter-spacing:-.01em; border-radius:.28em;}
.crsl-tema-pop.ccel .ccel-palabra, .crsl-tema-comic.ccel .ccel-palabra{border-radius:.16em;}
.crsl-tema-rock.ccel .ccel-palabra, .crsl-tema-premium.ccel .ccel-palabra, .crsl-tema-minimal.ccel .ccel-palabra, .crsl-tema-brutalista.ccel .ccel-palabra{border-radius:0;}
.crsl-tema-mistico.ccel .ccel-palabra, .crsl-tema-y2k.ccel .ccel-palabra, .crsl-tema-zen.ccel .ccel-palabra, .crsl-tema-estiloGpt.ccel .ccel-palabra{border-radius:999px; padding-left:.5em; padding-right:.5em;}
/* «Nico Alde Tips»: la pastilla negra con letra amarilla y el borde de "sombra dura" del acento 2, como las piezas */
.crsl-slide.natx.ccel .ccel-palabra-w .ccel-palabra.crsl-cta-pill{background:#050505; color:var(--crsl-accent); border:0; border-right:.07em solid var(--crsl-accent2); border-bottom:.07em solid var(--crsl-accent2); border-radius:.28em; transform:none; font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:-.01em;}
.ccel-pill-w{margin-top:26px;}
.crsl-slide.ccel .ccel-cta-abajo .ccel-sub{margin:0;}
.ccel-pill{display:flex; align-items:center; gap:22px; background:var(--crsl-text-main); color:var(--crsl-bg); border-radius:999px; padding:14px 44px 14px 14px; width:fit-content; max-width:100%;}
.ccel-pill .bola{flex:none; width:78px; height:78px; border-radius:50%; background:var(--crsl-accent); display:flex; align-items:center; justify-content:center;}
.ccel-pill .txt{display:flex; flex-direction:column; gap:4px; min-width:0;}
.ccel-pill small{font-family:'Inter',sans-serif; font-weight:800; font-size:17px; letter-spacing:.22em; text-transform:uppercase; opacity:.62; line-height:1.1;}
.ccel-pill strong{font-family:var(--crsl-font-display),sans-serif; font-weight:800; font-size:42px; line-height:1.05; white-space:nowrap; overflow:hidden;}
.crsl-tema-pop .ccel-pill, .crsl-tema-comic .ccel-pill{background:#fff; color:#111; border:5px solid #111; border-right-width:12px; border-bottom-width:12px;}
.crsl-tema-pop .ccel-pill{border-radius:20px;}
.crsl-tema-rock .ccel-pill, .crsl-tema-minimal .ccel-pill, .crsl-tema-brutalista .ccel-pill{border-radius:0;}
.crsl-tema-rock .ccel-pill .bola, .crsl-tema-minimal .ccel-pill .bola, .crsl-tema-brutalista .ccel-pill .bola{border-radius:0;}
.crsl-tema-premium .ccel-pill, .crsl-tema-editorial .ccel-pill{background:transparent; color:var(--crsl-text-main); border:1.5px solid var(--crsl-accent); border-radius:0;}
.crsl-tema-clasico .ccel-pill{background:transparent; color:var(--crsl-text-main); border:2px solid var(--crsl-accent2); border-radius:4px;}
.crsl-tema-neon .ccel-pill{background:transparent; color:#fff; border:3px solid var(--crsl-accent);}
.crsl-tema-brutalista .ccel-pill{border:6px solid #0a0a0a;}
.crsl-tema-scrapbook .ccel-pill{background:#FBF7EC; color:#3a2c1b; border-radius:4px; border:2px dashed rgba(90,60,30,.45);}
.crsl-slide.natx .ccel-pill{background:#fdfdfb; color:#050505; border:3px solid #050505;}
.crsl-slide.natx .ccel-pill .bola{background:#050505;}
.crsl-slide.natx .ccel-pill strong{font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic;}

/* ---------- sello circular (CSS puro: cuadrados girados = estrella; un círculo = sello redondo) ---------- */
.ccel-sello{position:relative; width:100%; height:100%; --ccel-sb:var(--crsl-accent); --ccel-st:var(--crsl-accent-oncolor,#000); color:var(--ccel-st);}
.ccel-sello-capa{position:absolute; left:0; top:0; width:100%; height:100%;}
.ccel-sello-capa i{position:absolute; display:block; left:14.65%; top:14.65%; width:70.7%; height:70.7%; background:var(--ccel-sb);}
.ccel-sello.f-rafaga .ccel-sello-capa i{left:12%; top:12%; width:76%; height:76%;}
.ccel-sello.f-circulo .ccel-sello-capa i{left:2%; top:2%; width:96%; height:96%; border-radius:50%;}
.ccel-sello-capa.sh, .ccel-sello-capa.borde{display:none;}
.ccel-sello-capa.sh i, .ccel-sello-capa.borde i{background:#111;}
.ccel-sello-aro{position:absolute; display:block; left:18%; top:18%; width:64%; height:64%; border-radius:50%; border:2px dotted var(--ccel-st); opacity:.75;}
.ccel-sello-anillo b{position:absolute; left:50%; top:50%; display:block; font-family:'Inter',sans-serif; font-weight:800; line-height:1; letter-spacing:0; white-space:pre; color:var(--ccel-st);}
.ccel-sello-centro{position:absolute; left:0; right:0; text-align:center; font-family:var(--crsl-font-display),sans-serif; font-weight:900; line-height:1; letter-spacing:-.01em; white-space:nowrap; color:var(--ccel-st);}
.ccel-sello-sub{position:absolute; left:0; right:0; text-align:center; font-family:'Inter',sans-serif; font-weight:800; line-height:1; white-space:nowrap; color:var(--ccel-st);}
/* sello según el estilo */
.crsl-tema-pop .ccel-sello, .crsl-tema-comic .ccel-sello{--ccel-sb:#FFE14D; --ccel-st:#111;}
.crsl-tema-comic .ccel-sello{--ccel-sb:#FFD400;}
.crsl-tema-pop .ccel-sello-capa.sh, .crsl-tema-pop .ccel-sello-capa.borde, .crsl-tema-comic .ccel-sello-capa.sh, .crsl-tema-comic .ccel-sello-capa.borde{display:block;}
.crsl-tema-pop .ccel-sello-capa.borde, .crsl-tema-comic .ccel-sello-capa.borde{transform:scale(1.07);}
.crsl-tema-pop .ccel-sello-capa.sh, .crsl-tema-comic .ccel-sello-capa.sh{transform:translate(10px,10px) scale(1.07);}
.crsl-tema-rock .ccel-sello{--ccel-st:#fff;}
.crsl-tema-premium .ccel-sello, .crsl-tema-editorial .ccel-sello, .crsl-tema-neon .ccel-sello{--ccel-sb:var(--crsl-bg); --ccel-st:var(--crsl-accent-text);}
.crsl-tema-premium .ccel-sello-capa.main i, .crsl-tema-editorial .ccel-sello-capa.main i{border:2px solid var(--crsl-accent);}
.crsl-tema-neon .ccel-sello-capa.main i{border:5px solid var(--crsl-accent2);}
.crsl-tema-neon .ccel-sello{--ccel-st:var(--crsl-accent);}
.crsl-tema-minimal .ccel-sello{--ccel-sb:var(--crsl-text-main); --ccel-st:var(--crsl-bg);}
.crsl-tema-brutalista .ccel-sello{--ccel-sb:var(--crsl-accent2); --ccel-st:#0a0a0a;}
.crsl-tema-brutalista .ccel-sello-capa.sh{display:block; transform:translate(12px,12px);}
.crsl-tema-brutalista .ccel-sello-capa.sh i{background:#0a0a0a;}
.crsl-tema-scrapbook .ccel-sello{--ccel-sb:var(--crsl-accent); --ccel-st:#fff;}
.crsl-tema-zen .ccel-sello, .crsl-tema-wellness .ccel-sello, .crsl-tema-boho .ccel-sello{--ccel-st:#fff;}
.crsl-slide.natx .ccel-sello{--ccel-sb:var(--crsl-accent); --ccel-st:#050505;}
.crsl-slide.natx.natx-amarillo .ccel-sello{--ccel-sb:#050505; --ccel-st:var(--crsl-accent);}
.crsl-slide.natx .ccel-sello-centro{font-family:'Montserrat',sans-serif; font-style:italic;}

/* ---------- panel de edición: captura (subir / pantallas de la app / recursos) ---------- */
.ccel-campo{display:flex; flex-direction:column; gap:8px; min-width:0;}
.ccel-img-fila{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.ccel-img-fila img{max-height:90px; max-width:120px; border-radius:8px; object-fit:cover; object-position:top; display:block;}
.ccel-caps{display:grid; grid-template-columns:repeat(auto-fill, minmax(62px, 1fr)); gap:6px; margin-top:6px;}
.ccel-caps button{padding:0; border-radius:8px; overflow:hidden; cursor:pointer; background:#000; border:2px solid transparent; height:96px; position:relative; min-width:0;}
.ccel-caps button.on{border-color:var(--yellow);}
.ccel-caps button img{display:block; width:100%; height:100%; object-fit:cover; object-position:top;}
.ccel-caps button span{position:absolute; left:0; right:0; bottom:0; font-size:9.5px; line-height:1.2; padding:2px 3px; background:rgba(0,0,0,.72); color:#fff; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ccel-ayuda{font-size:11px; margin:0; color:var(--muted);}