/* ============================================================================
   Láminas "Nico Alde Tips" (2026-09-30) — las 8 láminas de las piezas de los recursos gratuitos
   (scripts/piezas-recursos/ → clientas/nicoaldetips/piezas-recursos/*.png) como tipos propios del editor de
   Carrusel. Ver public/lib/estiloNicoAldeTipsLaminas.js.

   Todo se exporta con html2canvas 1.4.1 (crslGenerarArchivos). Cómo se resolvió cada efecto del original:
     · grilla con mask-image radial → grilla con linear-gradient tileado + un velo radial-gradient encima (sin tilear);
     · halo con filter:blur → radial-gradient sin tilear;
     · grano con mix-blend-mode → la misma imagen de ruido (SVG feTurbulence) a opacidad baja, en un div aparte;
     · resaltado/tachado con box-decoration-break → un <span> INLINE por palabra (inline-block corre el texto);
     · celular/tarjeta: object-fit NO existe en html2canvas → <img width:100%> adentro de una caja con overflow:hidden
       (recorta desde arriba = el "cover + top" del original para capturas de celular);
     · sombras duras (box-shadow) → un bloque de color desplazado DETRÁS (crslGenerarArchivos borra todas las box-shadow);
     · SVG siempre DENTRO de un div, con width/height explícitos y colores ya resueltos (nada de var() adentro);
     · texto dentro de dibujos (escáner, ticket, sello) en HTML encima del SVG (las fuentes web no entran a un SVG-imagen).
   Todo scopeado a .natp: no toca ninguna otra lámina.
   ============================================================================ */
.natp{--y:#FFE000; --negro:#050505; --blanco:#fdfdfb; --acc:#FF5500;
  --fg:#fdfdfb; --cuerpo:#cfcfcf; --gris:#9a9a9a; --gris2:#6b6b6b; --linea:#262626; --grid:rgba(255,255,255,.035);
  --prog-off:rgba(255,255,255,.14); --prog-on:#FFE000; --dot:#FFE000; --bgc:#050505;
  background:var(--bgc) !important; color:var(--fg); font-family:'Inter',sans-serif; text-align:left; line-height:1.2;}
.natp *{box-sizing:border-box;}
.natp p, .natp h1, .natp h2, .natp h3, .natp ul{margin:0; padding:0;}
.natp ul{list-style:none;}
.natp i, .natp b, .natp em{font-style:normal;}
.natp svg{display:block;}
.natp.natp-claro{--fg:#050505; --cuerpo:#2b2a24; --gris:#6b6b6b; --linea:rgba(0,0,0,.13); --grid:rgba(0,0,0,.05); --prog-off:rgba(0,0,0,.14); --prog-on:#050505; --bgc:#f3f1ea;}
.natp.natp-amarillo{--fg:#050505; --cuerpo:#2b2a24; --gris:#3a382f; --linea:rgba(0,0,0,.16); --grid:rgba(0,0,0,.06); --prog-off:rgba(0,0,0,.14); --prog-on:#050505; --dot:#050505; --bgc:#FFE000;}

/* ---------- lienzo: grilla, velo, grano ---------- */
.natp-grid{position:absolute; left:0; top:0; width:1080px; height:1350px; z-index:0; pointer-events:none;
  background-image:linear-gradient(to right, var(--grid) 1px, rgba(0,0,0,0) 1px), linear-gradient(to bottom, var(--grid) 1px, rgba(0,0,0,0) 1px);
  background-size:90px 90px, 90px 90px; background-position:-1px -1px, -1px -1px; background-repeat:repeat, repeat;}
.natp-velo{position:absolute; left:0; top:0; width:1080px; height:1350px; z-index:0; pointer-events:none;}
.natp-grano{position:absolute; left:0; top:0; width:1080px; height:1350px; z-index:60; pointer-events:none; opacity:.10;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/320px 320px repeat;}
.natp-claro .natp-grano, .natp-amarillo .natp-grano{opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.natp-halo{position:absolute; z-index:1; pointer-events:none;}

/* ---------- piezas (movibles con el editor de piezas: el data-el va en .natp-p, el giro de fábrica en .natp-r) ---------- */
.natp-p{position:absolute; z-index:10; transform-origin:center center;}
.natp-r{width:100%; height:100%; transform-origin:center center; position:relative;}

/* ---------- cabecera y pie ---------- */
.natp-prog{position:absolute; top:56px; left:72px; right:72px; display:flex; gap:10px; z-index:30; pointer-events:none;}
.natp-prog i{flex:1; height:6px; border-radius:9px; background:var(--prog-off); display:block;}
.natp-prog i.on{background:var(--prog-on);}
.natp-cab{position:absolute; top:92px; left:72px; right:72px; height:34px; display:flex; justify-content:space-between; align-items:center; z-index:30; pointer-events:none;}
.natp-num{font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; font-size:26px; letter-spacing:.02em; line-height:1; white-space:nowrap;}
.natp-num span{opacity:.4;}
.natp-etq{font-family:'Montserrat',sans-serif; font-weight:800; font-size:21px; letter-spacing:.24em; text-transform:uppercase; color:var(--acc); white-space:nowrap; line-height:1;}
.natp-cab .natp-etq{margin-left:auto; max-width:760px; overflow:hidden;}
.natp-claro .natp-cab .natp-etq, .natp-amarillo .natp-cab .natp-etq{color:var(--fg); opacity:.7;}
.natp-claro .natp-etq{color:var(--negro);}
.natp-pie{position:absolute; left:72px; right:72px; top:1250px; height:40px; display:flex; justify-content:space-between; align-items:center; z-index:30; pointer-events:none;}
.natp-marca{display:flex; align-items:center; gap:12px; white-space:nowrap; font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; font-size:26px; letter-spacing:.04em; line-height:1;}
.natp-marca i{width:13px; height:13px; border-radius:50%; background:var(--dot); display:block; flex:none;}
.natp-desliza{display:flex; align-items:center; gap:14px; white-space:nowrap; font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; letter-spacing:.2em; text-transform:uppercase; line-height:1;}
.natp-handle{font-family:'Inter',sans-serif; font-weight:700; font-size:24px; color:var(--gris); white-space:nowrap;}

/* ---------- tipografía ---------- */
.natp .tit{font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; letter-spacing:-.035em; line-height:.94; color:var(--fg);}
.natp .cuerpo{font-size:34px; line-height:1.35; color:var(--cuerpo); font-weight:500;}
.natp .kicker{font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; letter-spacing:.26em; text-transform:uppercase; line-height:1.2;}
/* resaltado tipo marcador (amarillo con letra negra; en la lámina amarilla: negro con letra amarilla) */
.natp .natp-hl{color:#050505; padding:0 .14em 0 .08em; margin:0 -.04em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.5 14 C 18 9, 40 12, 62 9 S 92 8, 99 11 L 98.5 90 C 80 94, 55 90, 34 93 S 8 92, 1 89 Z' fill='%23FFE000'/%3E%3C/svg%3E") 0 .06em/100% 92% no-repeat;}
.natp.natp-amarillo .natp-hl{color:#FFE000;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.5 14 C 18 9, 40 12, 62 9 S 92 8, 99 11 L 98.5 90 C 80 94, 55 90, 34 93 S 8 92, 1 89 Z' fill='%23050505'/%3E%3C/svg%3E");}
/* palabra seguida de otra resaltada/tachada: la caja se estira sobre el espacio (html2canvas no le pinta fondo al espacio del final) */
.natp .natp-hl.c{padding-right:.22em; margin-right:-.16em;}
.natp .natp-tach.c{padding-right:.2em; margin-right:-.2em;}
/* tachado a mano (naranja), una raya por palabra */
.natp .natp-tach{padding:0 .02em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='80' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1 12 C 30 9, 60 11, 99 7' stroke='%23FF5500' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 0 52%/100% .32em no-repeat;}

/* ---------- celular con captura ---------- */
.natp-cel{position:relative; width:100%; height:100%; border-radius:64px; padding:14px; background:linear-gradient(145deg,#2c2c2c,#0b0b0b 40%,#1a1a1a); border:2px solid #3a3a3a;}
.natp-pant{position:relative; width:100%; height:100%; border-radius:51px; overflow:hidden; background:#000;}
.natp-pant img{display:block; width:100%; height:auto;}
.natp-isla{position:absolute; top:26px; left:35%; width:30%; height:34px; border-radius:99px; background:#000; z-index:2;}
.natp-refl{position:absolute; left:14px; top:14px; right:14px; bottom:14px; border-radius:51px; z-index:3; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%);}
.natp-boton{position:absolute; right:-7px; top:24%; width:5px; height:11%; border-radius:0 4px 4px 0; background:#2a2a2a;}
.natp-vacio{position:absolute; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px; color:#6b6b6b; font-family:'Montserrat',sans-serif; font-weight:800; font-size:26px; letter-spacing:.12em; text-transform:uppercase; line-height:1.4;}
/* tarjeta recortada de la página, flotando, con borde amarillo */
.natp-flota{position:relative; width:100%; border-radius:26px; overflow:hidden; border:3px solid #FFE000; background:#101010;}
.natp-flota img{display:block; width:100%; height:auto;}

/* ---------- sello circular ---------- */
.natp-sello{position:relative; width:100%; height:100%;}
.natp-sello > .natp-sello-svg{position:absolute; left:0; top:0; width:100%; height:100%;}
.natp-sello-anillo b{position:absolute; left:50%; top:50%; display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-style:normal; line-height:1; letter-spacing:0; white-space:pre;}
.natp-sello-centro{position:absolute; left:0; right:0; text-align:center; font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; line-height:1; letter-spacing:-.02em; white-space:nowrap;}
.natp-sello-sub{position:absolute; left:0; right:0; text-align:center; font-family:'Montserrat',sans-serif; font-weight:800; line-height:1; white-space:nowrap;}

/* ---------- motivos ---------- */
.natp-motivo{position:relative; width:100%;}
.natp-motivo-txt{position:absolute; left:0; right:0; text-align:center; font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; white-space:nowrap; line-height:1;}
.natp-ticket{position:relative;}
.natp-ticket-in{position:absolute; left:0; top:0; width:400px; height:500px; transform-origin:top left;}
.natp-ticket-in > div, .natp-ticket-in > span{position:absolute;}
.natp-ticket-tit{left:0; right:0; top:34px; text-align:center; font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; font-size:30px; color:#050505; line-height:1;}
.natp-ticket-fila{left:30px; right:30px; display:flex; justify-content:space-between; align-items:flex-end; height:44px;}
.natp-ticket-fila span{font-family:'Inter',sans-serif; font-weight:700; font-size:19px; letter-spacing:1px; color:#050505; line-height:1; padding-bottom:6px; white-space:nowrap; overflow:hidden; max-width:290px;}
.natp-ticket-fila b{font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; font-size:36px; line-height:1;
  text-shadow:1.4px 0 #050505, -1.4px 0 #050505, 0 1.4px #050505, 0 -1.4px #050505, 1px 1px #050505, -1px 1px #050505, 1px -1px #050505, -1px -1px #050505;}
.natp-ticket-pie{left:0; right:0; top:424px; text-align:center; font-family:'Montserrat',sans-serif; font-weight:800; font-size:17px; letter-spacing:4px; color:#050505; opacity:.6; line-height:1;}

/* ---------- escena ---------- */
.natp-lineas{border-left:6px solid var(--negro); padding-left:40px; display:flex; flex-direction:column; gap:14px;}
.natp-lineas .tit{font-weight:800; color:#6f6c62; line-height:1.02;}
.natp-amarillo .natp-lineas .tit{color:#3a382f;}
.natp-negro .natp-lineas{border-left-color:var(--y);}
.natp-negro .natp-lineas .tit{color:#9a9a9a;}
.natp-semana{display:flex; gap:12px;}
.natp-dia{flex:1; height:136px; border-radius:22px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:20px 6px 18px; background:#050505; color:#fdfdfb;}
.natp-negro .natp-dia{background:#161616; border:2px solid #262626;}
.natp-dia .tit{font-size:44px; color:#fdfdfb;}
.natp-dia span{font-family:'Inter',sans-serif; font-weight:700; font-size:17px; color:#bdbdbd; line-height:1; white-space:nowrap;}
.natp-dia.ult{background:transparent; border:4px dashed var(--acc);}
.natp-dia.ult .tit, .natp-dia.ult span{color:var(--acc);}
.natp-post{background:#fff; border-radius:32px; padding:38px 40px; border:2px solid rgba(0,0,0,.08); display:flex; gap:26px; align-items:flex-start;}
.natp-post-av{flex:none; width:74px; height:74px; border-radius:50%; background:linear-gradient(135deg,#d9d6ca,#b9b5a6);}
.natp-post-cu{font-family:'Inter',sans-serif; font-weight:800; font-size:24px; color:#050505; line-height:1.2;}
.natp-post-cu span{font-weight:500; color:#8a877c;}
.natp-post p{font-family:'Inter',sans-serif; font-size:36px; line-height:1.35; color:#2b2a24; margin-top:10px; font-weight:400;}
.natp-chips{display:flex; flex-wrap:wrap; gap:16px 14px;}
.natp-chip{display:inline-flex; align-items:center; gap:14px; background:#050505; color:#fdfdfb; border-radius:99px; padding:18px 20px 18px 32px; font-family:'Inter',sans-serif; font-weight:700; font-size:36px; line-height:1;}
.natp-negro .natp-chip{background:#161616; border:2px solid #2a2a2a;}
.natp-chip b{display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--acc); color:#050505; font-family:'Montserrat',sans-serif; font-style:italic; font-weight:900; font-size:28px;}

/* ---------- qué es ---------- */
.natp-capas{display:flex; flex-direction:column; gap:10px;}
.natp-capa{display:flex; align-items:baseline; gap:18px; padding:10px 0; border-top:2px solid #222;}
.natp-claro .natp-capa, .natp-amarillo .natp-capa{border-top-color:rgba(0,0,0,.14);}
.natp-capa .tit{font-size:26px; color:var(--acc); width:42px; flex:none;}
.natp-capa span{font-family:'Montserrat',sans-serif; font-weight:800; font-size:28px; line-height:1.15;}
.natp-capas.chips{flex-direction:row; flex-wrap:wrap; gap:10px;}
.natp-capas.chips .natp-capa{border:2px solid #2a2a2a; border-radius:99px; padding:10px 20px; gap:10px;}
.natp-capas.chips .natp-capa .tit{font-size:20px; width:auto;}
.natp-capas.chips .natp-capa span{font-size:26px;}
.natp-datos{display:flex; gap:46px; align-items:flex-end;}
.natp-dato{display:flex; flex-direction:column;}
.natp-dato b{font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; font-size:120px; line-height:.9; letter-spacing:-.05em; color:var(--y); white-space:nowrap;}
.natp-claro .natp-dato b, .natp-amarillo .natp-dato b{color:var(--negro);}
.natp-dato span{font-family:'Montserrat',sans-serif; font-weight:800; font-size:21px; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); margin-top:12px; white-space:nowrap;}

/* ---------- cómo funciona ---------- */
.natp-pasos{display:flex; flex-direction:column; height:100%;}
.natp-paso{flex:1; display:flex; gap:30px; align-items:center; padding:30px 0; border-top:2px solid var(--linea);}
.natp-paso:last-child{border-bottom:2px solid var(--linea);}
.natp-paso .n{flex:none; width:150px; font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; font-size:150px; line-height:.8; letter-spacing:-.05em; color:var(--acc);}
.natp-paso .pt{font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; font-size:54px; letter-spacing:-.02em; line-height:1.02;}
.natp-paso .pd{font-size:30px; color:var(--gris); margin-top:10px; line-height:1.35;}

/* ---------- qué te devuelve ---------- */
.natp-checks{display:flex; flex-direction:column; gap:18px;}
.natp-checks li{display:flex; gap:16px; align-items:flex-start; font-size:29px; line-height:1.28; font-weight:600;}
.natp-checks li i{flex:none; width:34px; height:34px; border-radius:50%; background:var(--y); display:flex; align-items:center; justify-content:center; margin-top:2px;}
.natp-amarillo .natp-checks li i{background:var(--negro);}
.natp .natp-nota{font-family:'Montserrat',sans-serif; font-weight:800; font-size:17px; letter-spacing:.18em; text-transform:uppercase; color:var(--gris2); line-height:1.5; margin-top:26px;}
.natp-fundido{position:absolute; left:0; right:0; bottom:0; height:260px; z-index:25; pointer-events:none;}

/* ---------- para quién es ---------- */
.natp-q{border-radius:30px; padding:46px 48px;}
.natp-q h3{font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; font-size:52px; letter-spacing:-.02em; margin-bottom:26px; line-height:1;}
.natp-q ul{display:flex; flex-direction:column; gap:24px;}
.natp-q li{display:flex; gap:18px; font-size:34px; line-height:1.3; font-weight:500;}
.natp-q li .ic{flex:none; width:46px; padding-top:2px;}
.natp-q.si{background:#050505; color:#fdfdfb;}
.natp-negro .natp-q.si{background:#161616; border:2px solid #2a2a2a;}
.natp-q.no{background:transparent; border:3px dashed rgba(0,0,0,.28); color:#2b2a24;}
.natp-negro .natp-q.no{border-color:rgba(255,255,255,.25); color:#cfcfcf;}

/* ---------- cierre ---------- */
.natp-palabra-w{position:relative; display:inline-block; line-height:1;}
.natp-palabra-sh{position:absolute; left:.08em; top:.08em; width:100%; height:100%; border-radius:.3em; background:var(--acc); display:block;}
.natp-palabra{position:relative; display:inline-flex; align-items:center; gap:.25em; background:#050505; color:#FFE000; border-radius:.3em; padding:.12em .34em .14em .3em;
  font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; letter-spacing:-.01em; line-height:1; white-space:nowrap;}
.natp-palabra .ic{width:.62em; height:.62em; flex:none; display:block;}
.natp-input-w{position:relative;}
.natp-input-sh{position:absolute; left:8px; top:8px; width:100%; height:100%; border-radius:99px; background:#050505; display:block;}
.natp-input{position:relative; display:flex; align-items:center; gap:22px; background:#fdfdfb; border:3px solid #050505; border-radius:99px; padding:14px 40px 14px 14px; color:#050505;}
.natp-input .bola{flex:none; width:78px; height:78px; border-radius:50%; background:#050505; display:flex; align-items:center; justify-content:center;}
.natp-input .txt{flex:1; display:flex; flex-direction:column; gap:4px; min-width:0;}
.natp-input small{font-family:'Montserrat',sans-serif; font-weight:800; font-size:17px; letter-spacing:.22em; text-transform:uppercase; opacity:.6; line-height:1.1;}
.natp-input strong{font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; font-size:44px; letter-spacing:-.01em; line-height:1; white-space:nowrap;}
.natp-input.privado{padding:14px 14px 14px 36px;}
.natp-input .caret{display:inline-block; width:4px; height:40px; background:var(--acc); margin-left:6px; vertical-align:-6px;}

/* ---------- panel de edición: color de acento y capturas listas ---------- */
.natp-campo{display:flex; flex-direction:column; gap:8px;}
.natp-colores{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.natp-colores button.natp-sw{width:30px; height:30px; border-radius:50%; border:2px solid var(--border); cursor:pointer; padding:0;}
.natp-colores button.natp-sw.on{border-color:var(--text, #fff); box-shadow:0 0 0 2px var(--yellow);}
.natp-colores input[type=color]{width:42px; height:32px; padding:0; border:1px solid var(--border); border-radius:8px; background:transparent; cursor:pointer;}
.natp-caps{display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:6px;}
.natp-caps button{padding:0; border-radius:8px; overflow:hidden; cursor:pointer; background:#000; border:2px solid transparent; height:84px; position:relative;}
.natp-caps button.on{border-color:var(--yellow);}
.natp-caps button img{display:block; width:100%; height:100%; object-fit:cover; object-position:top;}
.natp-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;}
.natp-img-fila{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.natp-img-fila img{max-height:90px; max-width:120px; border-radius:8px; object-fit:cover; object-position:top; display:block;}
.natp-ayuda{font-size:11px; margin:0; color:var(--muted);}