/* ============================================================================
   Estilos visuales del carrusel (2026-09-20) — pedido de Nico: "dejame elegir estilos de carrusel: nicoaldetips
   (cuadraditos de fondo), Pop, Rock, Clásico, Oscuro Premium, tipo cómic… y armate algún otro".
   Cada estilo es una clase `crsl-tema-{id}` en la raíz de la lámina (la pone /lib/carruselTemas.js) que pisa el
   look de la tarjeta, los títulos y las cajas. El de fábrica ("nicoaldetips") NO tiene reglas acá: es el look de siempre.

   REGLA DE ORO al tocar este archivo: lo que se ve en pantalla tiene que salir igual en la imagen exportada, y la
   exportación (html2canvas) NO dibuja `box-shadow` (crslGenerarArchivos las borra a propósito), ni `-webkit-text-stroke`,
   ni `clip-path`, ni filtros. Por eso:
     · la "sombra dura" de Pop/Cómic son bordes más gruesos abajo y a la derecha (no box-shadow);
     · los contornos de letra son `text-shadow` de 8 direcciones (sí se exportan);
     · los marcos interiores son el ::before con borde (no un inset box-shadow).
   Tampoco se ponen `transform` en las piezas (el editor de piezas los pisa): salvo badge/botón, que ya lo tenían.

   BUG REAL corregido 2026-09-24 (Nico posteó un carrusel real con el tema Cómic
   y el tramado de puntos de fondo no salió en la imagen subida a Instagram —
   confirmado con html2canvas real fuera de la app, en un HTML de prueba
   aislado, no solo mirando el código): html2canvas 1.4.1 NUNCA repite un
   `radial-gradient()` de fondo, sea como `repeating-radial-gradient()` o como
   un `radial-gradient()` normal "tileado" con `background-size` chico (shorthand
   o propiedades separadas, da igual) — dibuja como mucho una sola instancia y
   el resto queda con el color plano. Tampoco dibuja `repeating-linear-gradient()`.
   Un `linear-gradient()` normal tileado con `background-size` SÍ se repite bien
   (la rejilla de public/index.html y el fondo de Scrappbook usan justo esa
   técnica — confirmados con el mismo test real). Por eso los tramados de
   puntos de Pop/Rock/Cómic/Místico ya NO están en el CSS de estos temas: el
   color de marca es dinámico por carrusel, así que el patrón se arma en JS
   (con los colores YA resueltos, mismo criterio que la decoración en SVG) como
   `background-image:url("data:image/svg+xml,…")` — una imagen SÍ tilea bien
   en html2canvas — y se inyecta inline sobre `.crsl-card` en el wrap de
   `renderCarruselSlideHTML` (ver `PATRON_FONDO` en carruselTemas.js). Estas
   reglas de acá solo dejan el `background-color` de base.
   PENDIENTE (no arreglado en esta pasada, mismo bug): "Fondo abstracto" →
   variantes Ondas (`repeating-radial-gradient`) y Rayas (`repeating-linear-gradient`)
   en public/index.html (`.crsl-abs-ondas`/`.crsl-abs-rayas`) — confirmado roto
   con el mismo test, pero convertirlas a imagen es más laborioso (son anillos/
   diagonales, no un punto suelto) y no era lo que Nico reportó. "Puntos" de
   esa misma sección SÍ se corrigió (mismo patrón que acá, ver renderCarruselSlideHTML).
   ============================================================================ */

/* ---------- tipografías nuevas (las fuentes se cargan desde lib/carruselTemas.js) ---------- */
.crsl-font-comic .crsl-headline, .crsl-font-comic .crsl-step-title, .crsl-font-comic .crsl-feature-title, .crsl-font-comic .crsl-meme-title, .crsl-font-comic .crsl-meme-crudo-title, .crsl-font-comic .crsl-ff-title, .crsl-font-comic .crsl-quote, .crsl-font-comic .crsl-photo-title{text-transform:uppercase; letter-spacing:.03em; font-weight:400;}
.crsl-font-comic .crsl-headline{font-size:118px; line-height:.98;}
.crsl-font-comic .crsl-step-title{font-size:96px; line-height:1.02;}
.crsl-font-comic .crsl-badge, .crsl-font-comic .crsl-cta-pill, .crsl-font-comic .crsl-counter, .crsl-font-comic .crsl-handle{font-weight:400; letter-spacing:.06em; text-transform:uppercase;}
/* .crsl-meme-crudo-caption sumado acá (auditoría 2026-09-29, mejora #25): quedó afuera de esta lista cuando
   se agregó (nació varios días después) — sin esto, el pie de un meme "crudo" se seguía viendo en la
   tipografía de impacto del tema (Bangers/Permanent Marker/Cormorant Garamond) en vez de pasar a Inter. */
.crsl-font-comic .crsl-box, .crsl-font-comic .crsl-check-list, .crsl-font-comic .crsl-step-sub, .crsl-font-comic .crsl-feature-desc, .crsl-font-comic .crsl-body-txt, .crsl-font-comic .crsl-meme-crudo-caption{font-family:'Inter',sans-serif; font-weight:700;}

.crsl-font-marcador .crsl-headline, .crsl-font-marcador .crsl-step-title, .crsl-font-marcador .crsl-feature-title, .crsl-font-marcador .crsl-meme-title, .crsl-font-marcador .crsl-meme-crudo-title, .crsl-font-marcador .crsl-ff-title, .crsl-font-marcador .crsl-quote, .crsl-font-marcador .crsl-photo-title{text-transform:uppercase; letter-spacing:.01em; font-weight:400;}
.crsl-font-marcador .crsl-headline{font-size:92px; line-height:1.05;}
.crsl-font-marcador .crsl-step-title{font-size:74px; line-height:1.08;}
.crsl-font-marcador .crsl-badge, .crsl-font-marcador .crsl-cta-pill, .crsl-font-marcador .crsl-counter, .crsl-font-marcador .crsl-handle{font-weight:400; letter-spacing:.03em;}
.crsl-font-marcador .crsl-box, .crsl-font-marcador .crsl-check-list, .crsl-font-marcador .crsl-step-sub, .crsl-font-marcador .crsl-feature-desc, .crsl-font-marcador .crsl-body-txt, .crsl-font-marcador .crsl-meme-crudo-caption{font-family:'Inter',sans-serif; font-weight:700;}

.crsl-font-elegante .crsl-headline, .crsl-font-elegante .crsl-step-title, .crsl-font-elegante .crsl-feature-title, .crsl-font-elegante .crsl-meme-title, .crsl-font-elegante .crsl-meme-crudo-title, .crsl-font-elegante .crsl-ff-title, .crsl-font-elegante .crsl-quote, .crsl-font-elegante .crsl-photo-title{font-weight:700; letter-spacing:.01em; text-transform:none;}
.crsl-font-elegante .crsl-headline{font-size:108px; line-height:1;}
.crsl-font-elegante .crsl-step-title{font-size:88px; line-height:1.05;}
.crsl-font-elegante .crsl-quote{font-size:92px; font-style:italic;}
.crsl-font-elegante .crsl-box, .crsl-font-elegante .crsl-check-list, .crsl-font-elegante .crsl-step-sub, .crsl-font-elegante .crsl-feature-desc, .crsl-font-elegante .crsl-body-txt, .crsl-font-elegante .crsl-meme-crudo-caption{font-family:'Inter',sans-serif; font-weight:600;}

/* ---------- piezas de decoración que arma cada estilo (ver lib/carruselTemas.js) ---------- */
.crslx-decor{position:absolute; line-height:1; transform-origin:center center; z-index:3;}
.crslx-decor svg{display:block; width:100%; height:100%;}
.crslx-decor .crslx-dtxt{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; white-space:nowrap;}
.crsl-card > .crslx-decor{position:absolute;}

/* ============================== POP ============================== */
.crsl-tema-pop .crsl-card{border:9px solid #111; border-right-width:24px; border-bottom-width:24px; border-radius:34px; box-shadow:none;
  background-color:var(--crsl-bg);} /* el tramado de puntos se inyecta inline desde carruselTemas.js — ver REGLA DE ORO arriba */
.crsl-tema-pop .crsl-card::before{border-radius:24px; background-image:linear-gradient(135deg, var(--crsl-accent) 0 130px, transparent 130px), linear-gradient(315deg, var(--crsl-accent2) 0 100px, transparent 100px); background-size:100% 100%; background-repeat:no-repeat; background-position:0 0;}
.crsl-tema-pop .crsl-card::after{display:none;}
.crsl-tema-pop .crsl-headline, .crsl-tema-pop .crsl-step-title, .crsl-tema-pop .crsl-meme-title, .crsl-tema-pop .crsl-meme-crudo-title, .crsl-tema-pop .crsl-quote, .crsl-tema-pop .crsl-ff-title, .crsl-tema-pop .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal;
  text-shadow:4px 0 #111, -4px 0 #111, 0 4px #111, 0 -4px #111, 3px 3px #111, -3px 3px #111, 3px -3px #111, -3px -3px #111, 8px 8px 0 #111;}
.crsl-tema-pop .crsl-headline .o, .crsl-tema-pop .crsl-headline .y{color:var(--crsl-accent);} .crsl-tema-pop .crsl-headline .o{color:var(--crsl-accent2);}
.crsl-tema-pop .crsl-headline .y::after{display:none;}
.crsl-tema-pop .crsl-headline, .crsl-tema-pop .crsl-quote, .crsl-tema-pop .crsl-meme-title, .crsl-tema-pop .crsl-meme-crudo-title{color:#fff;}
.crsl-tema-pop .crsl-step-title{color:var(--crsl-accent);} .crsl-tema-pop .crsl-step-title.o{color:var(--crsl-accent2);}
.crsl-tema-pop .crsl-box, .crsl-tema-pop .crsl-feature-box, .crsl-tema-pop .crsl-check-row, .crsl-tema-pop .crsl-ad-col, .crsl-tema-pop .crsl-dato-frame, .crsl-tema-pop .crsl-sticker-wrap, .crsl-tema-pop .crsl-box.o{background:#fff; color:#111; border:5px solid #111; border-right-width:13px; border-bottom-width:13px; border-radius:22px; box-shadow:none;}
.crsl-tema-pop .crsl-feature-desc, .crsl-tema-pop .crsl-ad-item, .crsl-tema-pop .crsl-ad-tit, .crsl-tema-pop .crsl-check-list, .crsl-tema-pop .crsl-feature-title{color:#111;}
.crsl-tema-pop .crsl-badge, .crsl-tema-pop .crsl-cta-pill, .crsl-tema-pop .crsl-badge.o{background:#FFE14D; color:#111; border:4px solid #111; border-right-width:9px; border-bottom-width:9px; box-shadow:none; border-radius:16px;}
.crsl-tema-pop .crsl-badge svg *{stroke:#111;}
.crsl-tema-pop .crsl-counter{background:#fff; color:#111; border:4px solid #111; box-shadow:none;}
.crsl-tema-pop .crsl-progress-track{background:#fff; border:3px solid #111; height:16px; border-radius:0 0 10px 10px;} .crsl-tema-pop .crsl-progress-fill{height:10px; background:var(--crsl-accent);}
.crsl-tema-pop .crsl-step-underline, .crsl-tema-pop .crsl-underline{height:12px; background:#111; box-shadow:none;}
.crsl-tema-pop .crsl-footer-handle{color:#111; font-weight:800;}

/* ============================== ROCK ============================== */
.crsl-tema-rock .crsl-card{border:7px solid #f2f2f2; border-radius:0; box-shadow:none;
  background-color:var(--crsl-bg);} /* el ruido de puntos + el brillo diagonal se inyectan inline desde carruselTemas.js — ver REGLA DE ORO arriba */
.crsl-tema-rock .crsl-card::before{inset:16px; border:3px solid var(--crsl-accent); border-radius:0; background:none;}
.crsl-tema-rock .crsl-card::after{display:none;}
.crsl-tema-rock .crsl-headline, .crsl-tema-rock .crsl-step-title, .crsl-tema-rock .crsl-meme-title, .crsl-tema-rock .crsl-meme-crudo-title, .crsl-tema-rock .crsl-quote, .crsl-tema-rock .crsl-ff-title, .crsl-tema-rock .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal; text-shadow:6px 6px 0 var(--crsl-accent);}
.crsl-tema-rock .crsl-headline .y::after{display:none;}
.crsl-tema-rock .crsl-headline .o{color:var(--crsl-accent2-text);} .crsl-tema-rock .crsl-headline .y{color:var(--crsl-accent-text);}
.crsl-tema-rock .crsl-step-title{color:var(--crsl-text-main);} .crsl-tema-rock .crsl-step-title.o{color:var(--crsl-text-main);}
.crsl-tema-rock .crsl-box, .crsl-tema-rock .crsl-feature-box, .crsl-tema-rock .crsl-check-row, .crsl-tema-rock .crsl-ad-col, .crsl-tema-rock .crsl-sticker-wrap, .crsl-tema-rock .crsl-box.o{background:#141414; color:#f2f2f2; border:0; border-left:16px solid var(--crsl-accent); border-radius:0; box-shadow:none;}
.crsl-tema-rock .crsl-feature-desc, .crsl-tema-rock .crsl-ad-item, .crsl-tema-rock .crsl-ad-tit, .crsl-tema-rock .crsl-check-list{color:#f2f2f2;} .crsl-tema-rock .crsl-feature-title{color:var(--crsl-accent2-text);}
.crsl-tema-rock .crsl-badge, .crsl-tema-rock .crsl-badge.o, .crsl-tema-rock .crsl-cta-pill{background:var(--crsl-accent); color:#fff; border:0; border-radius:0; box-shadow:none; transform:rotate(-3deg);}
.crsl-tema-rock .crsl-badge svg *{stroke:#fff;}
.crsl-tema-rock .crsl-counter{background:#141414; color:#f2f2f2; border:2px solid var(--crsl-accent); border-radius:0;}
.crsl-tema-rock .crsl-progress-track{background:#222; height:10px; border-radius:0;} .crsl-tema-rock .crsl-progress-fill{height:10px; background:var(--crsl-accent); border-radius:0;}
.crsl-tema-rock .crsl-step-underline, .crsl-tema-rock .crsl-underline{background:var(--crsl-accent); box-shadow:none; border-radius:0; height:12px;}
.crsl-tema-rock .crsl-footer-handle{color:#bdbdbd; letter-spacing:.14em;}

/* ============================== CLÁSICO ============================== */
.crsl-tema-clasico .crsl-card{border:3px solid var(--crsl-accent2); border-radius:8px; box-shadow:none;
  background:radial-gradient(1000px 820px at 50% 42%, transparent 58%, rgba(140,100,40,.16) 100%), var(--crsl-bg);}
.crsl-tema-clasico .crsl-card::before{inset:15px; border:1.5px solid var(--crsl-accent2); border-radius:3px; background:none;}
.crsl-tema-clasico .crsl-card::after{display:none;}
.crsl-tema-clasico .crsl-headline, .crsl-tema-clasico .crsl-step-title, .crsl-tema-clasico .crsl-meme-title, .crsl-tema-clasico .crsl-meme-crudo-title, .crsl-tema-clasico .crsl-quote, .crsl-tema-clasico .crsl-ff-title, .crsl-tema-clasico .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal; text-shadow:none;}
.crsl-tema-clasico .crsl-headline .y::after{display:none;}
.crsl-tema-clasico .crsl-step-underline, .crsl-tema-clasico .crsl-underline{height:3px; width:130px; background:var(--crsl-accent2); box-shadow:none; border-radius:0;}
.crsl-tema-clasico .crsl-box, .crsl-tema-clasico .crsl-feature-box, .crsl-tema-clasico .crsl-check-row, .crsl-tema-clasico .crsl-ad-col, .crsl-tema-clasico .crsl-dato-frame, .crsl-tema-clasico .crsl-sticker-wrap, .crsl-tema-clasico .crsl-box.o{background:transparent; color:var(--crsl-text-main); border:2px solid var(--crsl-accent2); border-radius:4px; box-shadow:none;}
.crsl-tema-clasico .crsl-feature-box{border-left-width:2px;}
.crsl-tema-clasico .crsl-badge, .crsl-tema-clasico .crsl-badge.o{background:transparent; color:var(--crsl-accent-text); border:2px solid var(--crsl-accent2); border-radius:2px; letter-spacing:.14em; text-transform:uppercase; transform:none; box-shadow:none; font-size:20px;}
.crsl-tema-clasico .crsl-badge svg *{stroke:var(--crsl-accent-text);}
.crsl-tema-clasico .crsl-cta-pill{background:var(--crsl-accent); color:#fff; border-radius:3px; box-shadow:none; transform:none; letter-spacing:.1em;}
.crsl-tema-clasico .crsl-counter{background:transparent; border:0; color:var(--crsl-accent2-text); font-style:italic;}
.crsl-tema-clasico .crsl-progress-track{background:transparent; border-bottom:2px solid var(--crsl-accent2); height:5px; border-radius:0;} .crsl-tema-clasico .crsl-progress-fill{display:none;}

/* ============================== OSCURO PREMIUM ============================== */
.crsl-tema-premium .crsl-card{border:1px solid var(--crsl-accent); border-radius:0; box-shadow:none;
  background:radial-gradient(1100px 760px at 50% -8%, var(--crsl-accent-a10), transparent 62%), var(--crsl-bg);}
.crsl-tema-premium .crsl-card::before{inset:16px; border:1px solid var(--crsl-accent-a45); border-radius:0; background:none;}
.crsl-tema-premium .crsl-card::after{display:none;}
.crsl-tema-premium .crsl-headline, .crsl-tema-premium .crsl-step-title, .crsl-tema-premium .crsl-meme-title, .crsl-tema-premium .crsl-meme-crudo-title, .crsl-tema-premium .crsl-quote, .crsl-tema-premium .crsl-ff-title, .crsl-tema-premium .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal; text-shadow:none; letter-spacing:.03em;}
.crsl-tema-premium .crsl-headline .y::after{display:none;}
.crsl-tema-premium .crsl-step-underline, .crsl-tema-premium .crsl-underline{height:2px; width:110px; background:var(--crsl-accent); box-shadow:none; border-radius:0;}
.crsl-tema-premium .crsl-box, .crsl-tema-premium .crsl-feature-box, .crsl-tema-premium .crsl-check-row, .crsl-tema-premium .crsl-ad-col, .crsl-tema-premium .crsl-dato-frame, .crsl-tema-premium .crsl-sticker-wrap, .crsl-tema-premium .crsl-box.o{background:var(--crsl-accent-a10); color:var(--crsl-text-main); border:1px solid var(--crsl-accent-a45); border-radius:2px; box-shadow:none;}
.crsl-tema-premium .crsl-feature-box{border-left-width:1px;}
.crsl-tema-premium .crsl-badge, .crsl-tema-premium .crsl-badge.o{background:transparent; color:var(--crsl-accent-text); border:1px solid var(--crsl-accent); border-radius:0; letter-spacing:.24em; text-transform:uppercase; transform:none; box-shadow:none; font-size:19px;}
.crsl-tema-premium .crsl-badge svg *{stroke:var(--crsl-accent);}
.crsl-tema-premium .crsl-cta-pill{background:transparent; color:var(--crsl-accent-text); border:1.5px solid var(--crsl-accent); border-radius:0; box-shadow:none; transform:none; letter-spacing:.2em; text-transform:uppercase; font-size:26px;}
.crsl-tema-premium .crsl-counter{background:transparent; border:0; color:var(--crsl-accent-text); letter-spacing:.3em;}
.crsl-tema-premium .crsl-progress-track{background:transparent; border-bottom:1px solid var(--crsl-accent-a45); height:4px; border-radius:0;} .crsl-tema-premium .crsl-progress-fill{height:2px; background:var(--crsl-accent); border-radius:0;}
.crsl-tema-premium .crsl-footer-handle{letter-spacing:.3em; text-transform:uppercase; font-size:20px;}

/* ============================== CÓMIC ============================== */
.crsl-tema-comic .crsl-card{border:10px solid #111; border-right-width:22px; border-bottom-width:22px; border-radius:6px; box-shadow:none;
  background-color:var(--crsl-bg);} /* el tramado de puntos se inyecta inline desde carruselTemas.js — ver REGLA DE ORO arriba */
.crsl-tema-comic .crsl-card::before{border-radius:0; background-image:linear-gradient(to bottom, var(--crsl-accent2-a25) 0 26px, transparent 26px); background-size:100% 100%; background-repeat:no-repeat;}
.crsl-tema-comic .crsl-card::after{display:none;}
.crsl-tema-comic .crsl-headline, .crsl-tema-comic .crsl-step-title, .crsl-tema-comic .crsl-meme-title, .crsl-tema-comic .crsl-meme-crudo-title, .crsl-tema-comic .crsl-quote, .crsl-tema-comic .crsl-ff-title, .crsl-tema-comic .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal;
  text-shadow:4px 0 #111, -4px 0 #111, 0 4px #111, 0 -4px #111, 3px 3px #111, -3px 3px #111, 3px -3px #111, -3px -3px #111, 7px 7px 0 #111;}
.crsl-tema-comic .crsl-headline, .crsl-tema-comic .crsl-quote, .crsl-tema-comic .crsl-meme-title, .crsl-tema-comic .crsl-meme-crudo-title{color:#fff;} .crsl-tema-comic .crsl-headline .o{color:var(--crsl-accent);} .crsl-tema-comic .crsl-headline .y{color:#FFD400;} .crsl-tema-comic .crsl-headline .y::after{display:none;}
.crsl-tema-comic .crsl-step-title{color:var(--crsl-accent);} .crsl-tema-comic .crsl-step-title.o{color:var(--crsl-accent2);}
.crsl-tema-comic .crsl-box, .crsl-tema-comic .crsl-box.o{position:relative; background:#fff; color:#111; border:6px solid #111; border-radius:44px; box-shadow:none; margin-bottom:38px;}
.crsl-tema-comic .crsl-box::after{content:""; position:absolute; left:96px; bottom:-46px; width:0; height:0; border-left:10px solid transparent; border-right:38px solid transparent; border-top:46px solid #111;}
.crsl-tema-comic .crsl-feature-box, .crsl-tema-comic .crsl-check-row, .crsl-tema-comic .crsl-ad-col, .crsl-tema-comic .crsl-dato-frame, .crsl-tema-comic .crsl-sticker-wrap{background:#fff; color:#111; border:5px solid #111; border-radius:18px; box-shadow:none;}
.crsl-tema-comic .crsl-feature-box{border-left-width:5px;}
.crsl-tema-comic .crsl-feature-desc, .crsl-tema-comic .crsl-ad-item, .crsl-tema-comic .crsl-ad-tit, .crsl-tema-comic .crsl-check-list, .crsl-tema-comic .crsl-feature-title{color:#111;}
.crsl-tema-comic .crsl-badge, .crsl-tema-comic .crsl-badge.o, .crsl-tema-comic .crsl-cta-pill{background:#FFD400; color:#111; border:5px solid #111; border-radius:12px; box-shadow:none; transform:rotate(-3deg);}
.crsl-tema-comic .crsl-badge svg *{stroke:#111;}
.crsl-tema-comic .crsl-counter{background:#fff; color:#111; border:4px solid #111; box-shadow:none; border-radius:10px;}
.crsl-tema-comic .crsl-progress-track{background:#fff; border:3px solid #111; height:16px; border-radius:0;} .crsl-tema-comic .crsl-progress-fill{height:10px; background:var(--crsl-accent); border-radius:0;}
.crsl-tema-comic .crsl-step-underline, .crsl-tema-comic .crsl-underline{height:10px; background:#111; box-shadow:none; border-radius:0;}
.crsl-tema-comic .crsl-footer-handle{color:#111;}

/* ============================== NEÓN ============================== */
.crsl-tema-neon .crsl-card{border:4px solid var(--crsl-accent2); border-radius:28px; box-shadow:none;
  background:linear-gradient(to bottom, transparent 55%, var(--crsl-accent2-a25) 100%), var(--crsl-bg);}
.crsl-tema-neon .crsl-card::before{border-radius:24px; background-image:linear-gradient(to right, var(--crsl-accent-a10) 2px, transparent 2px), linear-gradient(to bottom, var(--crsl-accent-a10) 2px, transparent 2px); background-size:90px 90px;}
.crsl-tema-neon .crsl-card::after{display:none;}
.crsl-tema-neon .crsl-headline, .crsl-tema-neon .crsl-step-title, .crsl-tema-neon .crsl-meme-title, .crsl-tema-neon .crsl-meme-crudo-title, .crsl-tema-neon .crsl-quote, .crsl-tema-neon .crsl-ff-title, .crsl-tema-neon .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal; text-shadow:0 0 10px var(--crsl-accent), 0 0 30px var(--crsl-accent-a60);}
.crsl-tema-neon .crsl-headline{color:#fff;} .crsl-tema-neon .crsl-headline .o{color:var(--crsl-accent2); text-shadow:0 0 10px var(--crsl-accent2), 0 0 30px var(--crsl-accent2-a60);} .crsl-tema-neon .crsl-headline .y{color:var(--crsl-accent);} .crsl-tema-neon .crsl-headline .y::after{display:none;}
.crsl-tema-neon .crsl-step-title{color:var(--crsl-accent);} .crsl-tema-neon .crsl-step-title.o{color:var(--crsl-accent2); text-shadow:0 0 10px var(--crsl-accent2), 0 0 30px var(--crsl-accent2-a60);}
.crsl-tema-neon .crsl-box, .crsl-tema-neon .crsl-feature-box, .crsl-tema-neon .crsl-check-row, .crsl-tema-neon .crsl-ad-col, .crsl-tema-neon .crsl-dato-frame, .crsl-tema-neon .crsl-sticker-wrap, .crsl-tema-neon .crsl-box.o{background:var(--crsl-accent-a10); color:#fff; border:3px solid var(--crsl-accent); border-radius:22px; box-shadow:none;}
.crsl-tema-neon .crsl-feature-box{border-left-width:3px;}
.crsl-tema-neon .crsl-feature-desc, .crsl-tema-neon .crsl-ad-item, .crsl-tema-neon .crsl-ad-tit, .crsl-tema-neon .crsl-check-list{color:#fff;}
.crsl-tema-neon .crsl-badge, .crsl-tema-neon .crsl-badge.o{background:transparent; color:var(--crsl-accent2); border:3px solid var(--crsl-accent2); box-shadow:none; text-shadow:0 0 12px var(--crsl-accent2);}
.crsl-tema-neon .crsl-badge svg *{stroke:var(--crsl-accent2);}
.crsl-tema-neon .crsl-cta-pill{background:var(--crsl-accent); color:#02040a; box-shadow:none;}
.crsl-tema-neon .crsl-counter{background:transparent; border:2px solid var(--crsl-accent); color:var(--crsl-accent);}
.crsl-tema-neon .crsl-step-underline, .crsl-tema-neon .crsl-underline{box-shadow:none; height:8px;}

/* ============================== SCRAPBOOK / COLLAGE ============================== */
.crsl-tema-scrapbook .crsl-card{border:20px solid #FBF7EC; border-radius:6px; box-shadow:none;
  background:linear-gradient(rgba(120,84,40,.08) 1px, transparent 1px) 0 0/100% 10px, var(--crsl-bg);}
.crsl-tema-scrapbook .crsl-card::before{inset:0; border-radius:0; border:2px dashed rgba(90,60,30,.4); background:none;}
.crsl-tema-scrapbook .crsl-card::after{display:none;}
.crsl-tema-scrapbook .crsl-headline, .crsl-tema-scrapbook .crsl-step-title, .crsl-tema-scrapbook .crsl-meme-title, .crsl-tema-scrapbook .crsl-meme-crudo-title, .crsl-tema-scrapbook .crsl-quote, .crsl-tema-scrapbook .crsl-ff-title, .crsl-tema-scrapbook .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal; text-shadow:none;}
.crsl-tema-scrapbook .crsl-headline .y::after{display:none;}
.crsl-tema-scrapbook .crsl-box, .crsl-tema-scrapbook .crsl-feature-box, .crsl-tema-scrapbook .crsl-check-row, .crsl-tema-scrapbook .crsl-ad-col, .crsl-tema-scrapbook .crsl-dato-frame, .crsl-tema-scrapbook .crsl-sticker-wrap, .crsl-tema-scrapbook .crsl-box.o{background:#FFF6CF; color:#3a2c1b; border:0; border-bottom:8px solid rgba(120,84,40,.35); border-radius:3px; box-shadow:none;}
.crsl-tema-scrapbook .crsl-feature-desc, .crsl-tema-scrapbook .crsl-ad-item, .crsl-tema-scrapbook .crsl-ad-tit, .crsl-tema-scrapbook .crsl-check-list, .crsl-tema-scrapbook .crsl-feature-title{color:#3a2c1b;}
.crsl-tema-scrapbook .crsl-badge, .crsl-tema-scrapbook .crsl-badge.o, .crsl-tema-scrapbook .crsl-cta-pill{background:var(--crsl-accent); color:#fff; border:0; border-radius:3px; box-shadow:none; transform:rotate(-3deg);}
.crsl-tema-scrapbook .crsl-badge svg *{stroke:#fff;}
.crsl-tema-scrapbook .crsl-counter{background:#FBF7EC; color:#3a2c1b; border:2px dashed rgba(90,60,30,.45);}
.crsl-tema-scrapbook .crsl-progress-track{display:none;}
.crsl-tema-scrapbook .crsl-step-underline, .crsl-tema-scrapbook .crsl-underline{background:var(--crsl-accent2); box-shadow:none; height:7px; border-radius:2px;}
.crsl-tema-scrapbook .crsl-footer-handle{color:#3a2c1b;}

/* ============================== MÍSTICO ============================== */
.crsl-tema-mistico .crsl-card{border:2px solid var(--crsl-accent-a55); border-radius:110px 110px 36px 36px; box-shadow:none;
  background-color:var(--crsl-bg);} /* las estrellas + el brillo se inyectan inline desde carruselTemas.js — ver REGLA DE ORO arriba */
.crsl-tema-mistico .crsl-card::before{inset:14px; border:1px solid var(--crsl-accent-a25); border-radius:98px 98px 26px 26px; background:none;}
.crsl-tema-mistico .crsl-card::after{display:none;}
.crsl-tema-mistico .crsl-headline, .crsl-tema-mistico .crsl-step-title, .crsl-tema-mistico .crsl-meme-title, .crsl-tema-mistico .crsl-meme-crudo-title, .crsl-tema-mistico .crsl-quote, .crsl-tema-mistico .crsl-ff-title, .crsl-tema-mistico .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal; text-shadow:0 0 22px var(--crsl-accent-a45);}
.crsl-tema-mistico .crsl-headline .y::after{display:none;}
.crsl-tema-mistico .crsl-step-underline, .crsl-tema-mistico .crsl-underline{height:3px; width:120px; background:var(--crsl-accent); box-shadow:none; border-radius:2px;}
.crsl-tema-mistico .crsl-box, .crsl-tema-mistico .crsl-feature-box, .crsl-tema-mistico .crsl-check-row, .crsl-tema-mistico .crsl-ad-col, .crsl-tema-mistico .crsl-dato-frame, .crsl-tema-mistico .crsl-sticker-wrap, .crsl-tema-mistico .crsl-box.o{background:var(--crsl-accent2-a25); color:var(--crsl-text-main); border:2px solid var(--crsl-accent-a55); border-radius:30px; box-shadow:none;}
.crsl-tema-mistico .crsl-feature-box{border-left-width:2px;}
.crsl-tema-mistico .crsl-badge, .crsl-tema-mistico .crsl-badge.o{background:transparent; color:var(--crsl-accent-text); border:2px solid var(--crsl-accent); border-radius:999px; letter-spacing:.16em; text-transform:uppercase; transform:none; box-shadow:none; font-size:20px;}
.crsl-tema-mistico .crsl-badge svg *{stroke:var(--crsl-accent);}
.crsl-tema-mistico .crsl-cta-pill{background:var(--crsl-accent); color:#1a0f33; box-shadow:none; transform:none;}
.crsl-tema-mistico .crsl-counter{background:transparent; border:1.5px solid var(--crsl-accent-a55); color:var(--crsl-accent-text);}
.crsl-tema-mistico .crsl-progress-track{background:transparent; height:3px; border-radius:0;} .crsl-tema-mistico .crsl-progress-fill{height:3px; background:var(--crsl-accent);}

/* ============================== ZEN / NATURAL ============================== */
.crsl-tema-zen .crsl-card{border:2px solid var(--crsl-accent-a45); border-radius:64px; box-shadow:none;
  background:radial-gradient(700px 520px at 100% 0%, var(--crsl-accent-a10), transparent 65%), radial-gradient(760px 560px at 0% 100%, var(--crsl-accent2-a10), transparent 65%), var(--crsl-bg);}
.crsl-tema-zen .crsl-card::before{inset:auto; right:-90px; top:-90px; width:380px; height:380px; border-radius:50%; background:var(--crsl-accent-a10);}
.crsl-tema-zen .crsl-card::after{display:block; left:-110px; bottom:-120px; width:420px; height:360px; transform:none; border-radius:58% 42% 55% 45% / 48% 55% 45% 52%; background:var(--crsl-accent2-a10);}
.crsl-tema-zen .crsl-headline, .crsl-tema-zen .crsl-step-title, .crsl-tema-zen .crsl-meme-title, .crsl-tema-zen .crsl-meme-crudo-title, .crsl-tema-zen .crsl-quote, .crsl-tema-zen .crsl-ff-title, .crsl-tema-zen .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal; text-shadow:none;}
.crsl-tema-zen .crsl-headline .y::after{display:none;}
.crsl-tema-zen .crsl-step-underline, .crsl-tema-zen .crsl-underline{height:5px; width:90px; background:var(--crsl-accent2); box-shadow:none; border-radius:4px;}
.crsl-tema-zen .crsl-box, .crsl-tema-zen .crsl-feature-box, .crsl-tema-zen .crsl-check-row, .crsl-tema-zen .crsl-ad-col, .crsl-tema-zen .crsl-dato-frame, .crsl-tema-zen .crsl-sticker-wrap, .crsl-tema-zen .crsl-box.o{background:rgba(255,255,255,.6); color:var(--crsl-text-main); border:2px solid var(--crsl-accent-a45); border-radius:38px; box-shadow:none;}
.crsl-tema-zen .crsl-feature-box{border-left-width:2px;}
.crsl-tema-zen .crsl-badge, .crsl-tema-zen .crsl-badge.o{background:var(--crsl-accent-a10); color:var(--crsl-accent-text); border:2px solid var(--crsl-accent-a45); border-radius:999px; transform:none; box-shadow:none;}
.crsl-tema-zen .crsl-badge svg *{stroke:var(--crsl-accent-text);}
.crsl-tema-zen .crsl-cta-pill{background:var(--crsl-accent); color:#fff; box-shadow:none; transform:none;}
.crsl-tema-zen .crsl-counter{background:transparent; border:2px solid var(--crsl-accent-a45);}
.crsl-tema-zen .crsl-progress-track{background:var(--crsl-accent-a10); height:6px; border-radius:6px;}

/* ============================== MINIMAL ============================== */
.crsl-tema-minimal .crsl-card{border:2px solid var(--crsl-text-main); border-radius:0; box-shadow:none; background:var(--crsl-bg);}
.crsl-tema-minimal .crsl-card::before{inset:0; border:0; border-top:14px solid var(--crsl-accent2); border-radius:0; background:none; height:0;}
.crsl-tema-minimal .crsl-card::after{display:none;}
.crsl-tema-minimal .crsl-headline, .crsl-tema-minimal .crsl-step-title, .crsl-tema-minimal .crsl-meme-title, .crsl-tema-minimal .crsl-meme-crudo-title, .crsl-tema-minimal .crsl-quote, .crsl-tema-minimal .crsl-ff-title, .crsl-tema-minimal .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal; text-shadow:none; letter-spacing:-.02em;}
.crsl-tema-minimal .crsl-headline, .crsl-tema-minimal .crsl-step-title{color:var(--crsl-text-main);} .crsl-tema-minimal .crsl-headline .o{color:var(--crsl-accent2-text);} .crsl-tema-minimal .crsl-headline .y{color:var(--crsl-text-main);} .crsl-tema-minimal .crsl-headline .y::after{display:none;}
.crsl-tema-minimal .crsl-step-title.o{color:var(--crsl-text-main);}
.crsl-tema-minimal .crsl-step-underline, .crsl-tema-minimal .crsl-underline{height:10px; width:60px; background:var(--crsl-accent2); box-shadow:none; border-radius:0;}
.crsl-tema-minimal .crsl-box, .crsl-tema-minimal .crsl-feature-box, .crsl-tema-minimal .crsl-check-row, .crsl-tema-minimal .crsl-ad-col, .crsl-tema-minimal .crsl-dato-frame, .crsl-tema-minimal .crsl-sticker-wrap, .crsl-tema-minimal .crsl-box.o{background:transparent; color:var(--crsl-text-main); border:0; border-left:10px solid var(--crsl-accent2); border-radius:0; box-shadow:none; text-align:left;}
.crsl-tema-minimal .crsl-feature-box{border-left-width:10px;}
.crsl-tema-minimal .crsl-badge, .crsl-tema-minimal .crsl-badge.o{background:var(--crsl-text-main); color:var(--crsl-bg); border:0; border-radius:0; transform:none; box-shadow:none; letter-spacing:.12em; text-transform:uppercase; font-size:20px;}
.crsl-tema-minimal .crsl-badge svg *{stroke:var(--crsl-bg);}
.crsl-tema-minimal .crsl-cta-pill{background:var(--crsl-text-main); color:var(--crsl-bg); border-radius:0; box-shadow:none; transform:none;}
.crsl-tema-minimal .crsl-counter{background:transparent; border:0; color:var(--crsl-text-faint);}
.crsl-tema-minimal .crsl-progress-track{background:transparent; height:0;} .crsl-tema-minimal .crsl-progress-fill{display:none;}

/* ============================== ESTILO GPT ============================== */
/* Calca el look de los infográficos "estilo gpt/" (fondo negro, título
   condensado blanco + amarillo/naranja, cajas redondeadas de borde fino sin
   relleno, flechas conectando bloques). Decoración propia (ícono "objetivo"
   + flechita angular) sumada en la auditoría 2026-09-29 (mejora #4), ver
   la entrada en carruselTemas.js. */
.crsl-tema-estiloGpt .crsl-card{border:3px solid var(--crsl-accent); border-radius:26px; box-shadow:none; background:var(--crsl-bg);}
.crsl-tema-estiloGpt .crsl-card::before{inset:18px; border:1px solid var(--crsl-accent-a25); border-radius:18px; background:none;}
.crsl-tema-estiloGpt .crsl-card::after{display:none;}
.crsl-tema-estiloGpt .crsl-headline, .crsl-tema-estiloGpt .crsl-step-title, .crsl-tema-estiloGpt .crsl-meme-title, .crsl-tema-estiloGpt .crsl-meme-crudo-title, .crsl-tema-estiloGpt .crsl-quote, .crsl-tema-estiloGpt .crsl-ff-title, .crsl-tema-estiloGpt .crsl-photo-title{-webkit-text-stroke:0; paint-order:normal; text-shadow:none; letter-spacing:.01em;}
.crsl-tema-estiloGpt .crsl-headline, .crsl-tema-estiloGpt .crsl-quote, .crsl-tema-estiloGpt .crsl-meme-title, .crsl-tema-estiloGpt .crsl-meme-crudo-title{color:#fff;}
.crsl-tema-estiloGpt .crsl-headline .o{color:var(--crsl-accent2-text);} .crsl-tema-estiloGpt .crsl-headline .y{color:var(--crsl-accent-text);} .crsl-tema-estiloGpt .crsl-headline .y::after{display:none;}
.crsl-tema-estiloGpt .crsl-step-title{color:var(--crsl-accent-text);} .crsl-tema-estiloGpt .crsl-step-title.o{color:var(--crsl-accent2-text);}
.crsl-tema-estiloGpt .crsl-step-underline, .crsl-tema-estiloGpt .crsl-underline{height:5px; width:150px; background:linear-gradient(90deg, var(--crsl-accent2), var(--crsl-accent)); box-shadow:none; border-radius:3px;}
.crsl-tema-estiloGpt .crsl-box, .crsl-tema-estiloGpt .crsl-feature-box, .crsl-tema-estiloGpt .crsl-check-row, .crsl-tema-estiloGpt .crsl-ad-col, .crsl-tema-estiloGpt .crsl-dato-frame, .crsl-tema-estiloGpt .crsl-sticker-wrap{background:var(--crsl-accent-a10); color:#fff; border:2px solid var(--crsl-accent); border-radius:20px; box-shadow:none;}
.crsl-tema-estiloGpt .crsl-box.o, .crsl-tema-estiloGpt .crsl-feature-box.o{border-color:var(--crsl-accent2); background:var(--crsl-accent2-a10);}
.crsl-tema-estiloGpt .crsl-feature-box{border-left-width:2px;}
.crsl-tema-estiloGpt .crsl-feature-desc, .crsl-tema-estiloGpt .crsl-ad-item, .crsl-tema-estiloGpt .crsl-check-list{color:#fff;}
.crsl-tema-estiloGpt .crsl-feature-title, .crsl-tema-estiloGpt .crsl-ad-tit{color:var(--crsl-accent-text);}
.crsl-tema-estiloGpt .crsl-badge, .crsl-tema-estiloGpt .crsl-badge.o{background:transparent; color:var(--crsl-accent-text); border:2px solid var(--crsl-accent); border-radius:999px; letter-spacing:.1em; text-transform:uppercase; transform:none; box-shadow:none;}
.crsl-tema-estiloGpt .crsl-badge svg *{stroke:var(--crsl-accent);}
.crsl-tema-estiloGpt .crsl-cta-pill{background:var(--crsl-accent); color:#0a0a0a; border-radius:999px; box-shadow:none; transform:none; font-weight:800;}
.crsl-tema-estiloGpt .crsl-counter{background:transparent; border:1px solid var(--crsl-accent-a45); color:var(--crsl-accent-text); border-radius:999px;}
.crsl-tema-estiloGpt .crsl-progress-track{background:#141414; height:8px; border-radius:999px;} .crsl-tema-estiloGpt .crsl-progress-fill{height:8px; background:var(--crsl-accent); border-radius:999px;}
.crsl-tema-estiloGpt .crsl-footer-handle{color:var(--crsl-accent-text); letter-spacing:.06em;}

/* ============================== SOY ASTRAL ============================== */
/* Auditoría 2026-09-29 (mejora #7): de los 12 temas no-fábrica, "Soy Astral" era el único sin forma propia —
   tenía su color, su tipografía "redonda" y sus 3 piezas de decoración (luna/brillo/cristal) + su tramado de
   estrellitas (PATRON_FONDO.soyAstral, ya en carruselTemas.js), pero caja/badge/CTA/contador caían en las
   reglas de FÁBRICA sin ningún override acá. Forma "burbuja" kawaii: esquinas muy redondeadas, sin ángulos
   duros — coherente con el look místico-pastel del sitio real de la clienta (investigado el 2026-09-28). */

/* Etiqueta de precio de "Producto real de mi tienda" con forma propia por tema (auditoría 2026-09-29, mejora
   #6): antes era una placa negra fija en los 13 temas. Se mantiene el fondo oscuro semitransparente y el
   texto blanco/de acento (`.crsl-precio-nombre`/`.crsl-precio-num`, index.html) — ES la etiqueta que sigue
   encima de una FOTO real, necesita contraste garantizado sin importar el tema — pero el borde y el radio sí
   se adaptan a la identidad de cada uno, igual que ya hacen `.crsl-box`/`.crsl-dato-frame`. */
/* Pop/Cómic usan #111 (negro) de borde en el resto de sus cajas, pero ESAS cajas tienen fondo blanco — acá
   el fondo sigue siendo la placa oscura semitransparente de siempre (necesita contraste garantizado sobre
   cualquier foto), así que un borde #111 casi no se distingue del propio fondo oscuro (verificado exportando
   de verdad: se ve, pero muy sutil). Con el acento del tema en vez de negro, el borde SÍ se nota. */
.crsl-tema-pop .crsl-precio-tag{border-radius:16px; border:4px solid var(--crsl-accent);}
.crsl-tema-rock .crsl-precio-tag{border-radius:0; border:0; border-left:10px solid var(--crsl-accent);}
.crsl-tema-clasico .crsl-precio-tag{border-radius:4px; border:2px solid var(--crsl-accent2);}
.crsl-tema-premium .crsl-precio-tag{border-radius:0; border:1px solid var(--crsl-accent);}
.crsl-tema-comic .crsl-precio-tag{border-radius:18px; border:4px solid var(--crsl-accent2);}
.crsl-tema-neon .crsl-precio-tag{border-radius:20px; border:2px solid var(--crsl-accent2);}
.crsl-tema-scrapbook .crsl-precio-tag{border-radius:4px; border:2px dashed rgba(255,255,255,.65);}
.crsl-tema-mistico .crsl-precio-tag{border-radius:999px; border:1.5px solid var(--crsl-accent);}
.crsl-tema-zen .crsl-precio-tag{border-radius:30px; border:1.5px solid var(--crsl-accent2);}
.crsl-tema-minimal .crsl-precio-tag{border-radius:0; border:0; border-left:6px solid var(--crsl-accent2);}
.crsl-tema-estiloGpt .crsl-precio-tag{border-radius:20px; border:2px solid var(--crsl-accent);}

/* la fila "Estilo visual" queda a la vista aunque los ajustes del carrusel estén plegados (la regla de index.html oculta del hijo 3 en adelante) */
#crslEstiloCard.colapsada > #crslxTemaFila{display:flex !important;}

/* ---------- selector de estilos (modal) ---------- */
#crslxTemaModal{position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.78); display:flex; align-items:center; justify-content:center; padding:14px;}
#crslxTemaModal .crslx-tm-card{width:min(980px,100%); max-height:94vh; overflow:auto; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px 18px 18px;}
/* Miniaturas más grandes (auditoría 2026-09-29, mejora #23): 150px dejaba temas con detalle fino (filetes de
   Premium, borde punteado de Scrapbook, cuadrícula de Estilo GPT) casi indistinguibles antes de tocarlos —
   el paso de zoom que ya existe (mejora #3 de una auditoría previa) sirve para CONFIRMAR el detalle, no para
   recién empezar a distinguir un tema de otro. Modal del editor, nunca pasa por html2canvas. */
#crslxTemaModal .crslx-tm-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-top:12px;}
#crslxTemaModal .crslx-tm-item{border:2px solid var(--border); border-radius:12px; padding:8px; background:var(--panel-2); cursor:pointer; text-align:left; color:var(--text); font-family:'Inter',sans-serif;}
#crslxTemaModal .crslx-tm-item.sel{border-color:var(--yellow);}
#crslxTemaModal .crslx-tm-item:hover{border-color:var(--muted);}
#crslxTemaModal .crslx-tm-thumb{width:100%; aspect-ratio:1080/1350; overflow:hidden; border-radius:8px; position:relative; background:#050505; pointer-events:none;}
#crslxTemaModal .crslx-tm-thumb-in{width:1080px; height:1350px; transform-origin:top left;}
#crslxTemaModal .crslx-tm-thumb .crsl-slide{transform:none !important; margin:0 !important;}
#crslxTemaModal .crslx-tm-nom{font-weight:800; font-size:13px; margin:8px 2px 2px;}
#crslxTemaModal .crslx-tm-desc{font-size:11px; color:var(--muted); line-height:1.35; margin:0 2px;}

/* ---------- miniatura agrandada antes de confirmar (auditoría 2026-09-29, mejora #3) ---------- */
#crslxZoomModal{position:fixed; inset:0; z-index:9600; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; padding:14px;}
#crslxZoomModal .crslx-tz-card{width:min(420px,100%); max-height:94vh; overflow:auto; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px 18px 18px;}
#crslxZoomModal .crslx-tz-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px;}
#crslxZoomModal .crslx-tz-thumb{width:100%; aspect-ratio:1080/1350; overflow:hidden; border-radius:12px; position:relative; background:#050505; pointer-events:none; border:1px solid var(--border);}
#crslxZoomModal .crslx-tz-thumb-in{width:1080px; height:1350px; transform-origin:top left;}
#crslxZoomModal .crslx-tz-thumb .crsl-slide{transform:none !important; margin:0 !important;}