/* ============================================================================
   "Estilo @nicoaldetips · Viñeta" (2026-10-10) — ver el encabezado de estiloNicoVineta.js (pedido de Nico, qué dibuja y cómo es
   exclusivo por datos).
   Todo scopeado a `.crsl-slide.nvi` (la clase la pone el JS SOLO con el tema activo y la cuenta habilitada).

   REGLA DE ORO (igual que el resto de los temas): lo que se ve tiene que salir igual con el respaldo html2canvas 1.4.1.
     · cero box-shadow / filter / mask / clip-path / blend / gradientes repetidos: las sombras duras son un bloque desplazado
       (la pieza decor:2 o un pseudo-elemento) y los grosores «de sombra» son bordes más anchos a la derecha y abajo;
     · el contorno de letras (-webkit-text-stroke) NO se usa: el número fantasma es un relleno de poca opacidad;
     · bordes en longhands donde hay var() y se pisa después.
   Variables por lámina (las pone el JS en el style de la raíz): --nvi-fuera/panel/borde/sombra/texto/texto2/fuera-tx/hlbg/hltx/
   puntos/cel/celdura/acento/globo/tinta/papel2/sol.
   ============================================================================ */

/* ---------- lienzo ---------- */
.crsl-slide.nvi{background:var(--nvi-fuera);}
.crsl-slide.nvi .crsl-card{inset:0; border:0; border-radius:0; box-shadow:none; background:transparent; padding:128px 48px 112px;}
.crsl-slide.nvi .crsl-card::before, .crsl-slide.nvi .crsl-card::after{display:none;}
.crsl-card > .crslx-decor.nvi-bajo{z-index:0;}
.crslx-decor.nvi-p{line-height:1;}
.crsl-slide.nvi .crsl-progress-track, .crsl-slide.nvi .crsl-counter, .crsl-slide.nvi .crsl-handle{display:none !important;}
.crsl-slide.nvi .crsl-underline, .crsl-slide.nvi .crsl-step-underline{height:10px; width:150px; background:var(--nvi-acento); border-radius:0; box-shadow:none; margin:6px 0 30px;}
.crsl-slide.nvi .crsl-footer-handle{bottom:38px; font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:700; font-size:28px; letter-spacing:.2em; text-transform:uppercase; color:var(--nvi-fuera-tx);}

/* ---------- piezas ---------- */
.nvi-sombra{position:absolute; display:block; left:18px; top:16px; right:-18px; bottom:-16px;}
.nvi-hoja{position:absolute; display:block; left:0; top:0; right:0; bottom:0; border-style:solid; border-width:8px; box-sizing:border-box; overflow:hidden;}
.nvi-banda{position:absolute; display:block; left:0; right:0; bottom:0; height:27%;}
.nvi-fantasma{font-family:'Anton','Impact',sans-serif; font-weight:400; font-size:420px; line-height:1; letter-spacing:-.02em; opacity:.1; white-space:nowrap;}
.nvi-firma{display:flex; align-items:center; height:100%;}
.nvi-firma b{font-family:'Anton','Impact',sans-serif; font-weight:400; font-size:40px; letter-spacing:.07em; text-transform:uppercase; line-height:1; white-space:nowrap;}
.nvi-numero{display:flex; align-items:baseline; justify-content:flex-end; height:100%; gap:12px; padding-top:6px; box-sizing:border-box;}
.nvi-numero b{font-family:'Anton','Impact',sans-serif; font-weight:400; font-size:54px; line-height:1;}
.nvi-numero span{font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:700; font-size:30px; letter-spacing:.12em; opacity:.75;}
.nvi-cartel{display:flex; align-items:center; justify-content:center; height:100%; border-style:solid; border-width:5px; border-right-width:12px; border-bottom-width:12px; box-sizing:border-box;}
.nvi-cartel span{font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:700; font-size:34px; letter-spacing:.22em; text-transform:uppercase; line-height:1; white-space:nowrap;}

/* ---------- tipografía ---------- */
.crsl-slide.nvi .crsl-headline, .crsl-slide.nvi .crsl-step-title, .crsl-slide.nvi .crsl-quote, .crsl-slide.nvi .crsl-ff-title, .crsl-slide.nvi .crsl-photo-title, .crsl-slide.nvi .crsl-meme-title, .crsl-slide.nvi .crsl-feature-title{
  font-family:'Anton','Impact',sans-serif; font-weight:400; font-style:normal; letter-spacing:.006em; text-transform:uppercase; text-shadow:none; -webkit-text-stroke:0; color:var(--nvi-texto);}
.crsl-slide.nvi .crsl-box, .crsl-slide.nvi .crsl-check-list, .crsl-slide.nvi .crsl-step-sub, .crsl-slide.nvi .crsl-feature-desc, .crsl-slide.nvi .crsl-body-txt, .crsl-slide.nvi .crsl-ad-item, .crsl-slide.nvi .crsl-meme-caption, .crsl-slide.nvi .crsl-ff-sub, .crsl-slide.nvi .crsl-photo-caption, .crsl-slide.nvi .crsl-flow-label{
  font-family:'Archivo','Inter',sans-serif; font-weight:600; font-style:normal;}
/* palabra clave: caja de color tipo marcador (un span por palabra) */
.crsl-slide.nvi .nvi-hl{display:inline; padding:0 .16em; margin:0 -.04em; background:linear-gradient(var(--nvi-hlbg), var(--nvi-hlbg)) 0 64%/100% 76% no-repeat; color:var(--nvi-hltx); text-shadow:none; font-style:normal;}
.crsl-slide.nvi .crsl-hlbox{background:linear-gradient(var(--nvi-hlbg), var(--nvi-hlbg)) 0 64%/100% 76% no-repeat; color:var(--nvi-hltx); padding:0 .16em;}
.crsl-slide.nvi .crsl-step-sub .nvi-hl, .crsl-slide.nvi .crsl-box .nvi-hl, .crsl-slide.nvi .crsl-check-list .nvi-hl, .crsl-slide.nvi .crsl-body-txt .nvi-hl{font-family:'Archivo',sans-serif; font-weight:800; text-transform:none;}

/* ---------- portada ---------- */
.crsl-slide.nvi .crsl-portada-body{align-items:flex-start; text-align:left; justify-content:center; padding:150px 96px 150px;}
.crsl-slide.nvi .crsl-headline{font-size:170px; line-height:.98; padding:0; max-width:880px; margin:0;}
.crsl-slide.nvi .crsl-headline.nvi-l2{font-size:140px;}
.crsl-slide.nvi .crsl-headline.nvi-l3{font-size:114px;}
.crsl-slide.nvi .crsl-headline .o, .crsl-slide.nvi .crsl-headline .y{display:inline-block; padding:.02em .14em .07em; margin:.05em 0 0 -.04em; background:var(--nvi-hlbg); color:var(--nvi-hltx); font-style:normal;}
.crsl-slide.nvi .crsl-headline .y::after, .crsl-slide.nvi .crsl-headline .y:empty{display:none;}
.crsl-slide.nvi .crsl-headline .o .nvi-hl, .crsl-slide.nvi .crsl-headline .y .nvi-hl{background:none; padding:0; margin:0; color:inherit;}
.crsl-slide.nvi .crsl-body-txt{margin:46px 0 0; max-width:780px; padding:0 0 0 30px; border-left:12px solid var(--nvi-acento); font-weight:600; font-size:38px; line-height:1.34; color:var(--nvi-texto2);}
.crsl-slide.nvi .crsl-cta-pill{right:96px; bottom:168px; left:auto; display:flex; align-items:center; gap:18px; background:var(--nvi-tinta); color:var(--nvi-sol); border:0; border-radius:0; box-shadow:none; transform:none; padding:20px 30px 20px 36px;
  font-family:'Archivo','Inter',sans-serif; font-weight:800; font-size:30px; letter-spacing:.18em; text-transform:uppercase;}
.crsl-slide.nvi .crsl-cta-pill svg{width:56px; height:16px; flex:none; display:block;}

/* ---------- láminas del medio ---------- */
.crsl-slide.nvi .crsl-badge, .crsl-slide.nvi .crsl-badge.o{align-self:flex-start; margin:46px 0 0 82px; background:var(--nvi-hlbg); color:var(--nvi-hltx); border-style:solid; border-color:var(--nvi-borde); border-width:4px; border-right-width:9px; border-bottom-width:9px; border-radius:0; box-shadow:none; transform:none; padding:10px 22px; gap:10px;
  font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:700; font-size:28px; letter-spacing:.17em; text-transform:uppercase;}
.crsl-slide.nvi .crsl-badge svg{display:none;}
.crsl-slide.nvi .crsl-center-wrap{flex:1; padding:34px 96px 70px; box-sizing:border-box;}
.crsl-slide.nvi .crsl-step-title, .crsl-slide.nvi .crsl-step-title.o{font-size:100px; line-height:1.02; margin:0 0 14px; color:var(--nvi-texto); max-width:100%;}
.crsl-slide.nvi .crsl-step-title.nvi-l2{font-size:82px;}
.crsl-slide.nvi .crsl-step-title.nvi-l3{font-size:66px;}
.crsl-slide.nvi .crsl-step-sub{font-size:38px; line-height:1.32; color:var(--nvi-texto2); margin:6px 0 30px; max-width:760px;}
.crsl-slide.nvi .crsl-step-icon-big, .crsl-slide.nvi .crsl-step-icon-big.o{width:124px; height:124px; border-radius:6px; margin:0 0 30px; transform:rotate(-4deg); background:var(--nvi-hlbg); border-style:solid; border-color:var(--nvi-borde); border-width:5px; border-right-width:12px; border-bottom-width:12px; box-shadow:none;}
.crsl-slide.nvi .crsl-step-icon-big svg{width:62px; height:62px;}
.crsl-slide.nvi .crsl-step-icon-big svg *{stroke:var(--nvi-hltx);}

/* globo de diálogo con cola (la cola sale de un lado u otro según la lámina) */
.crsl-slide.nvi .crsl-box, .crsl-slide.nvi .crsl-box.o{position:relative; width:auto; max-width:100%; box-sizing:border-box; margin:30px 0 56px; padding:30px 40px; text-align:left;
  background:var(--nvi-globo); color:var(--nvi-tinta); border-style:solid; border-color:var(--nvi-borde); border-width:6px; border-radius:12px; box-shadow:none; font-weight:700; font-size:37px; line-height:1.3;}
.crsl-slide.nvi .crsl-box::before, .crsl-slide.nvi .crsl-box::after{content:""; position:absolute; width:0; height:0; border-style:solid;}
.crsl-slide.nvi .crsl-box::after{left:64px; bottom:-50px; border-width:50px 14px 0 46px; border-color:var(--nvi-borde) transparent transparent transparent;}
.crsl-slide.nvi .crsl-box::before{left:72px; bottom:-34px; z-index:2; border-width:36px 8px 0 32px; border-color:var(--nvi-globo) transparent transparent transparent;}
.crsl-slide.nvi.nvi-der .crsl-box::after{left:auto; right:64px; border-width:50px 46px 0 14px;}
.crsl-slide.nvi.nvi-der .crsl-box::before{left:auto; right:72px; border-width:36px 32px 0 8px;}

/* lista con tildes: cada fila es un recuadro de viñeta */
.crsl-slide.nvi .crsl-check-list{width:100%; font-size:38px; line-height:1.28; color:var(--nvi-tinta);}
.crsl-slide.nvi .crsl-check-row{align-items:center; gap:22px; margin-bottom:20px; padding:16px 24px; background:var(--nvi-globo); color:var(--nvi-tinta); border-style:solid; border-color:var(--nvi-borde); border-width:4px; border-right-width:11px; border-bottom-width:11px; border-radius:6px; box-shadow:none; font-weight:700;}
.crsl-slide.nvi .crsl-check-icon{width:54px; height:54px; margin:0; border-radius:4px; background:var(--nvi-hlbg); border:4px solid var(--nvi-tinta); box-shadow:none;}
.crsl-slide.nvi .crsl-check-icon svg{width:26px; height:26px;}
.crsl-slide.nvi .crsl-check-icon svg *{stroke:var(--nvi-hltx);}
.crsl-slide.nvi .crsl-save-hint{font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:700; font-size:32px; letter-spacing:.18em; text-transform:uppercase; color:var(--nvi-texto); margin-top:30px;}

/* ---------- las cinco composiciones: alineación y altura del texto ---------- */
.crsl-slide.nvi-papel .crsl-center-wrap{align-items:flex-start; text-align:left; justify-content:center;}
.crsl-slide.nvi-marino .crsl-center-wrap{align-items:center; text-align:center; justify-content:center;}
.crsl-slide.nvi-marino .crsl-badge{align-self:center; margin-left:0;}
.crsl-slide.nvi-marino .crsl-step-underline{margin-left:auto; margin-right:auto;}
.crsl-slide.nvi-marino .crsl-step-sub, .crsl-slide.nvi-marino .crsl-box{margin-left:auto; margin-right:auto;}
.crsl-slide.nvi-sol .crsl-center-wrap{align-items:flex-end; text-align:right; justify-content:flex-end; padding-bottom:96px;}
.crsl-slide.nvi-sol .crsl-badge{align-self:flex-end; margin:46px 82px 0 0;}
.crsl-slide.nvi-sol .crsl-step-icon-big{margin-left:auto; transform:rotate(5deg);}
.crsl-slide.nvi-sol .crsl-step-underline{margin-left:auto;}
.crsl-slide.nvi-sol .crsl-box{text-align:right;}
.crsl-slide.nvi-mitad .crsl-center-wrap{align-items:flex-start; text-align:left; justify-content:flex-start; padding-top:70px;}
.crsl-slide.nvi-mitad .crsl-check-row, .crsl-slide.nvi-mitad .crsl-box{background:var(--nvi-globo);}
.crsl-slide.nvi-naranja .crsl-center-wrap{align-items:center; text-align:center; justify-content:center;}
.crsl-slide.nvi-naranja .crsl-badge{align-self:flex-end; margin:46px 82px 0 0; background:var(--nvi-tinta); color:var(--nvi-sol);}
.crsl-slide.nvi-naranja .crsl-step-icon-big{margin-left:auto; margin-right:auto; transform:rotate(3deg); background:var(--nvi-papel2);}
.crsl-slide.nvi-naranja .crsl-step-underline{margin-left:auto; margin-right:auto; background:var(--nvi-tinta);}
.crsl-slide.nvi-naranja .crsl-step-sub, .crsl-slide.nvi-naranja .crsl-box{margin-left:auto; margin-right:auto;}
/* el pie de la lámina sobre la franja marino de «mitad» no puede ser tinta sobre tinta: la firma/@ ya van en el margen */

/* ---------- cierre ---------- */
.crsl-slide.nvi-r-cierre .crsl-step-title{font-size:112px;}
.crsl-slide.nvi-r-cierre .crsl-step-title.nvi-l2{font-size:90px;}

/* ---------- láminas con foto: sin viñeta, la foto a sangre ---------- */
.crsl-slide.nvi.nvi-t-foto_fondo .crsl-card, .crsl-slide.nvi.nvi-t-foto_personal .crsl-card, .crsl-slide.nvi.nvi-t-producto_real .crsl-card, .crsl-slide.nvi.nvi-t-foto_galeria .crsl-card{padding:0;}

/* ============================================================================
   CELULARES CON CAPTURAS (láminas 📱): toman el estilo solas; acá solo el marco de tinta, la sombra dura, la tarjeta y el sello
   ============================================================================ */
.crsl-slide.nvi .ccel-cel{background:var(--nvi-cel);}
.crsl-slide.nvi .ccel-borde{border:8px solid var(--nvi-cel);}
.crsl-slide.nvi .ccel-dura{display:block; transform:translate(18px,18px); background:var(--nvi-celdura);}
.crsl-slide.nvi .ccel-sombra, .crsl-slide.nvi .ccel-refl{display:none;}
.crsl-slide.nvi .ccel-boton{background:var(--nvi-cel);}
.crsl-slide.nvi .ccel-isla{background:var(--nvi-cel);}
.crsl-slide.nvi .ccel-cinta{display:none;}
.crsl-slide.nvi .ccel-tit.crsl-step-title{color:var(--nvi-texto);}
.crsl-slide.nvi.ccel .ccel-col .ccel-tit{font-size:inherit;}
.crsl-slide.nvi.ccel .ccel-hl{--ccel-hl:var(--nvi-hlbg); color:var(--nvi-hltx); padding:0 .12em; font-family:'Anton','Impact',sans-serif; font-weight:400; text-transform:uppercase;}
.crsl-slide.nvi .ccel-sub{color:var(--nvi-texto2);}
.crsl-slide.nvi .ccel-lista{color:var(--nvi-texto); font-weight:700;}
.crsl-slide.nvi .ccel-fila .crsl-check-icon{width:50px; height:50px; background:var(--nvi-hlbg); border:4px solid var(--nvi-tinta);}
.crsl-slide.nvi .ccel-chip-num{color:var(--nvi-hltx); font-family:'Anton','Impact',sans-serif; font-weight:400;}
.crsl-slide.nvi .ccel-etq.crsl-badge{margin:18px 0 0;}
.crsl-slide.nvi .ccel-rotulo.crsl-badge{margin:0;}
.crsl-slide.nvi .ccel-col.centro{padding-top:22px;} /* el título centrado quedaba pegado al marco de la viñeta */
.crsl-slide.nvi .ccel-halo{display:none;} /* el resplandor del celu se ve como una mancha pálida sobre el papel */
/* tarjeta flotante = globo de diálogo, sin cola */
.crsl-slide.nvi .ccel-tarjeta-w{border-radius:12px; background:var(--nvi-globo);}
.crsl-slide.nvi .ccel-tarjeta.crsl-box::before, .crsl-slide.nvi .ccel-tarjeta.crsl-box::after{display:none;}
.crsl-slide.nvi .ccel-tarjeta-t{font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:700; font-size:22px; letter-spacing:.2em; color:var(--nvi-tinta);}
/* cierre con palabra clave */
.crsl-slide.nvi.ccel .ccel-palabra-w .ccel-palabra.crsl-cta-pill{background:var(--nvi-hlbg); color:var(--nvi-hltx); border-radius:0; border-style:solid; border-color:var(--nvi-borde); border-width:.06em; border-right-width:.14em; border-bottom-width:.14em; font-family:'Anton','Impact',sans-serif; font-weight:400; letter-spacing:.02em; text-transform:uppercase; transform:none;}
.crsl-slide.nvi .ccel-kicker{font-family:'Archivo Narrow','Archivo',sans-serif; color:var(--nvi-acento); letter-spacing:.2em;}
.crsl-slide.nvi .ccel-pill{background:var(--nvi-globo); color:var(--nvi-tinta); border-radius:6px; border-style:solid; border-color:var(--nvi-borde); border-width:5px; border-right-width:12px; border-bottom-width:12px;}
.crsl-slide.nvi .ccel-pill .bola{border-radius:4px; background:var(--nvi-hlbg);}
/* sello: ráfaga de tinta con borde y sombra duros */
.crsl-slide.nvi .ccel-sello{--ccel-sb:var(--nvi-hlbg); --ccel-st:var(--nvi-hltx);}
.crsl-slide.nvi .ccel-sello-capa.sh, .crsl-slide.nvi .ccel-sello-capa.borde{display:block;}
.crsl-slide.nvi .ccel-sello-capa.borde{transform:scale(1.07);}
.crsl-slide.nvi .ccel-sello-capa.sh{transform:translate(10px,10px) scale(1.07);}
.crsl-slide.nvi .ccel-sello-capa.sh i{background:var(--nvi-celdura);}
.crsl-slide.nvi .ccel-sello-capa.borde i{background:var(--nvi-borde);}
.crsl-slide.nvi .ccel-sello-centro{font-family:'Anton','Impact',sans-serif; font-weight:400;}