/* ARMADOR DE PLANTILLAS -- el CSS de la maqueta que aprobo Gustavo (maqueta_armador_plantillas.html),
   SIN cambiarle ninguna regla. Solo dos cosas, hechas por maquina: cada selector empieza con `.arm`
   (para no pisar nada de la app) y las animaciones se llaman arm_* (para no chocar con otras).
   Lo que se agrego despues, a mano, esta en `CSS_PROPIO` de armador.js. NO EDITAR: se genera con
   deploy/css_de_la_maqueta.py y una prueba lo compara. */
.arm .ui{font-family:'Manrope',system-ui,sans-serif}
.arm .tab{font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;padding:10px 16px;border-radius:999px;border:1px solid #2a2d35;cursor:pointer;min-height:44px}
.arm .card{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:16px;border:2px solid #2a2d35;background:#17181C;cursor:pointer;text-align:left;color:#EDEDED;font-family:'Manrope',sans-serif}
.arm .card:hover{background:#1E2026}
.arm .thumb{position:relative;width:150px;height:267px;border-radius:12px;overflow:hidden;align-self:center;background:#000}
.arm .inner{position:absolute;left:0;top:0;width:360px;height:640px;transform:scale(.4167);transform-origin:0 0;overflow:hidden}
.arm .phone{position:relative;width:360px;height:640px;border-radius:34px;overflow:hidden;border:6px solid #23252c;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.arm .ph{position:absolute;left:0;top:0;width:360px;height:640px;overflow:hidden}
.arm .scene{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,#5b6170 0%,#2a2e37 55%,#15171c 100%)}
.arm .head{position:absolute;left:50%;top:150px;width:120px;height:150px;margin-left:-60px;border-radius:50% 50% 46% 46%;background:#c9a58c}
.arm .body{position:absolute;left:50%;top:290px;width:280px;height:420px;margin-left:-140px;border-radius:140px 140px 0 0;background:#2f4a6b}
.arm .w{display:inline-block;margin:0 4px}
.arm .w2{animation-delay:.45s!important}.w3{animation-delay:.9s!important}.w4{animation-delay:1.35s!important}
.arm .sub{position:absolute;left:20px;right:20px;top:430px;text-align:center;font-size:30px;font-weight:800;color:var(--sfg,var(--pr));line-height:1.15;text-transform:uppercase;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.arm .sub .key{color:var(--skey,var(--ac))}
.arm .sub-pop .w{opacity:0;animation:arm_pop 3.6s infinite}.sub-pop .key{font-size:44px}
.arm .sub-grande .key{display:block;font-size:58px;animation:arm_bump 1.8s infinite}
.arm .sub-caja{text-transform:none;font-size:26px;text-shadow:none}.sub-caja .w{background:color-mix(in srgb,var(--sbg,#000) var(--asub),transparent);color:var(--sfg,var(--pr));padding:4px 8px;border-radius:6px;animation:arm_hl 3.6s infinite}
.arm .sub-neon{color:var(--sfg,#fff);text-shadow:0 0 6px var(--skey,var(--ac)),0 0 16px var(--skey,var(--ac)),0 0 28px var(--skey,var(--ac));animation:arm_flick 2.4s infinite}.sub-neon .key{color:var(--sfg,#fff)}
.arm .sub-maquina{right:auto;left:24px;text-align:left;white-space:nowrap;overflow:hidden;width:0;border-right:3px solid var(--skey,var(--ac));animation:arm_type 3.6s steps(22) infinite}
.arm .sub-resaltador .w{background-image:linear-gradient(var(--skey,var(--ac)),var(--skey,var(--ac)));background-repeat:no-repeat;background-size:0% 38%;background-position:0 88%;animation:arm_mark 3.6s infinite}
.arm .sub-resaltador .key{color:var(--sfg,var(--pr))}
.arm .enf{position:absolute}
.arm .enf-titulo{left:20px;right:20px;top:360px;text-align:center;font-size:54px;line-height:1;color:var(--ekey,var(--ac));font-weight:900;text-transform:uppercase;text-shadow:0 4px 0 rgba(0,0,0,.35);animation:arm_drop 3s infinite}
.arm .enf-plenoblanco{inset:0;background:var(--epbg,#fff);color:var(--epfg,#111);display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;font-size:50px;font-weight:900;line-height:1.05;animation:arm_fadeio 3s infinite}
.arm .enf-plenonegro{inset:0;background:var(--epbg,#000);color:var(--epfg,#fff);display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;font-size:50px;font-weight:900;line-height:1.05;animation:arm_fadeio 3s infinite}
.arm .enf-plenonegro .kw, .arm .enf-plenoblanco .kw{color:var(--ekey,var(--ac))}
.arm .enf-cabeza{left:40px;right:40px;top:36px;background:color-mix(in srgb,var(--cbg,var(--bg)) var(--acaja),transparent);color:var(--cfg,var(--pr));border:3px solid var(--ekey,var(--ac));border-radius:18px;padding:16px;text-align:center;font-size:28px;font-weight:800;animation:arm_drop 3s infinite}
.arm .enf-palabra{left:0;right:0;top:420px;text-align:center;font-size:76px;font-weight:900;color:var(--ekey,var(--ac));text-transform:uppercase;text-shadow:0 4px 0 rgba(0,0,0,.4);animation:arm_bump 1.8s infinite}
.arm .enf-palabra .rest{display:none}
.arm .caja{position:absolute;left:40px;right:40px;top:44px;padding:16px 18px;font-size:26px;font-weight:800;text-align:center;line-height:1.15;animation:arm_boxin 3.4s infinite}
.arm .caja-globo{background:color-mix(in srgb,var(--cbg,#fff) var(--acaja),transparent);color:var(--cfg,#111);border-radius:22px}
.arm .caja-globo::after{content:'';position:absolute;bottom:-16px;left:50%;margin-left:-14px;border-left:14px solid transparent;border-right:14px solid transparent;border-top:16px solid color-mix(in srgb,var(--cbg,#fff) var(--acaja),transparent)}
.arm .caja-pildora{background:color-mix(in srgb,var(--cbg,var(--ac)) var(--acaja),transparent);color:var(--cfg,#111);border-radius:999px}
.arm .caja-vidrio{background:color-mix(in srgb,var(--cbg,#fff) 20%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.4);color:var(--cfg,#fff);border-radius:18px}
.arm .caja-nota{background:color-mix(in srgb,var(--cbg,#FFE66D) var(--acaja),transparent);color:var(--cfg,#222);border-radius:4px;rotate:-3deg;box-shadow:0 8px 16px rgba(0,0,0,.35)}
.arm .caja-etiqueta{background:color-mix(in srgb,var(--cbg,var(--bg)) var(--acaja),transparent);color:var(--cfg,var(--pr));clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%);text-align:left;padding-right:40px}
.arm .caja-esquinas{background:color-mix(in srgb,var(--cbg,#000) var(--acaja),transparent);color:var(--cfg,#fff)}
.arm .caja-esquinas::before{content:'';position:absolute;left:-6px;top:-6px;width:28px;height:28px;border-left:4px solid var(--cacc,var(--ac));border-top:4px solid var(--cacc,var(--ac))}
.arm .caja-esquinas::after{content:'';position:absolute;right:-6px;bottom:-6px;width:28px;height:28px;border-right:4px solid var(--cacc,var(--ac));border-bottom:4px solid var(--cacc,var(--ac))}
.arm .ico{position:absolute;right:16px;top:330px;width:190px;font-family:'Manrope',sans-serif;animation:arm_whoosh 3.4s infinite}
.arm .ico-tarjeta{background:color-mix(in srgb,var(--ibg,#fff) var(--aico),transparent);color:var(--ifg,#111);border-radius:16px;padding:10px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.arm .ico-burbuja{background:color-mix(in srgb,var(--ibg,var(--ac)) var(--aico),transparent);color:var(--ifg,#111);border-radius:24px;padding:10px}
.arm .ico-minimal{color:var(--ifg,#fff);padding:8px;border:2px solid var(--ifg,rgba(255,255,255,.7));border-radius:12px;background:color-mix(in srgb,var(--ibg,#000) 25%,transparent)}
.arm .ico-etiqueta{background:color-mix(in srgb,var(--ibg,var(--bg)) var(--aico),transparent);color:var(--ifg,var(--pr));border-radius:6px 20px 20px 6px;padding:10px;border-left:6px solid var(--ipin,var(--ac))}
.arm .map{position:relative;height:110px;border-radius:10px;overflow:hidden;background-color:#EDE8DC;background-image:repeating-linear-gradient(90deg,transparent 0 28px,#ffffff 28px 34px),repeating-linear-gradient(0deg,transparent 0 30px,#ffffff 30px 36px)}
.arm .park{position:absolute;left:12px;top:60px;width:50px;height:34px;background:#BFD8A8;border-radius:6px}
.arm .pin{position:absolute;left:50%;top:26px;width:26px;height:26px;margin-left:-13px;border-radius:50% 50% 50% 0;background:var(--ipin,var(--ac));border:3px solid #111;rotate:-45deg;animation:arm_pinb 1.6s infinite}
.arm .lbl{display:flex;align-items:center;gap:6px;margin-top:8px;font-weight:800;font-size:18px}
.arm .big{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
.arm .nom{position:absolute;left:16px;top:540px;font-weight:800;font-size:20px;color:var(--pr);animation:arm_slidein 3.4s infinite}
.arm .nom small{display:block;font-size:13px;font-weight:600;opacity:.85}
.arm .nom-barra{background:color-mix(in srgb,var(--nbg,var(--bg)) var(--anom),transparent);color:var(--nfg,var(--pr));padding:8px 14px;border-left:6px solid var(--nacc,var(--ac))}
.arm .nom-pildora{background:color-mix(in srgb,var(--nbg,var(--bg)) var(--anom),transparent);color:var(--nfg,var(--pr));padding:8px 18px;border-radius:999px;border:2px solid var(--nacc,var(--ac))}
.arm .nom-lateral{background:color-mix(in srgb,var(--nbg,var(--ac)) var(--anom),transparent);color:var(--nfg,#111);padding:10px 14px;border-radius:4px}
.arm .nom-subrayado{color:var(--nfg,var(--pr));text-shadow:0 2px 6px rgba(0,0,0,.6)}
.arm .nom-subrayado::after{content:'';display:block;height:4px;background:var(--nacc,var(--ac));margin-top:4px;animation:arm_line 3.4s infinite}
.arm .trans{position:absolute;inset:0;overflow:hidden}
.arm .ta, .arm .tb{position:absolute;inset:0;display:flex;align-items:flex-end;padding:24px;font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:#fff}
.arm .ta{background:linear-gradient(160deg,#8a5a44,#3b2a24)}
.arm .tb{background:linear-gradient(160deg,#3d6e8f,#1c2f3f);opacity:0}
.arm .flash{position:absolute;inset:0;background:#fff;opacity:0}
.arm .tr-corte .tb{animation:arm_cut 3s infinite}
.arm .tr-zoom .ta{animation:arm_zA 3s infinite}.tr-zoom .tb{animation:arm_zB 3s infinite}
.arm .tr-fundido .tb{animation:arm_fade 3s infinite}
.arm .tr-destello .tb{animation:arm_cut 3s infinite}.tr-destello .flash{animation:arm_flash 3s infinite}
.arm .tr-deslizar .tb{opacity:1;animation:arm_slide 3s infinite}
.arm .tr-rife .ta{animation:arm_blurA 3s infinite}.tr-rife .tb{animation:arm_morph 3s infinite}
.arm .cie{position:absolute;inset:0;background:var(--cfbg,var(--bg));display:flex;align-items:center;justify-content:center;color:var(--cffg,var(--pr));overflow:hidden}
.arm .cbox{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}
.arm .logo{width:120px;height:120px;border-radius:28px;background:var(--lbg,var(--ac));color:#111;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:34px;letter-spacing:1px}
.arm .cnom{font-weight:800;font-size:24px}.cmar{font-size:15px;opacity:.85}
.arm .wipe{position:absolute;inset:0;background:var(--lbg,var(--ac));display:none}
.arm .cie-logo .cnom, .arm .cie-logo .cmar{display:none}
.arm .cie-logo .cbox, .arm .cie-logonombre .cbox{animation:arm_pop2 3s infinite}
.arm .cie-barrido .wipe{display:block;animation:arm_wipe 3s infinite}
.arm .cie-barrido .cbox{animation:arm_late 3s infinite}
.arm .vid{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:absolute;inset:0;background:#111;color:#fff;font-family:'Manrope',sans-serif;text-align:center;padding:30px}
.arm .vid .play{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}
.arm .cie-video .vid{display:flex}.cie-video .cbox{display:none}
.arm .cie-tarjeta .cbox{background:#fff;color:#111;border-radius:22px;padding:26px 34px;animation:arm_pop2 3s infinite}
.arm .ftxt{position:absolute;left:16px;right:16px;top:400px;text-align:center;font-size:56px;color:var(--sfg,var(--pr));line-height:1;text-shadow:0 3px 8px rgba(0,0,0,.6)}
.arm .ftxt .key{color:var(--skey,var(--ac))}
.arm .sw{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
.arm .pulse{animation:arm_pulse .9s ease-out 1}
.arm .gx{position:absolute;left:20px;right:20px;top:330px;padding:14px;border-radius:16px;background:color-mix(in srgb,var(--gbg,#fff) var(--agraf),transparent);color:var(--gfg,#111);font-family:'Manrope',sans-serif;box-shadow:0 10px 24px rgba(0,0,0,.3);animation:arm_whoosh 3.4s infinite}
.arm .gtitle{font-size:14px;font-weight:800;opacity:.8;margin-bottom:8px}
.arm .bars{display:flex;align-items:flex-end;gap:10px;height:110px}
.arm .bar{flex:1;background:var(--gac,var(--ac));border-radius:6px 6px 0 0;transform-origin:bottom;animation:arm_grow 3.4s infinite}
.arm .b2{animation-delay:.15s}.b3{animation-delay:.3s}.b4{animation-delay:.45s}
.arm .draw{fill:none;stroke:var(--gac,var(--ac));stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;animation:arm_draw 3.4s infinite}
.arm .draw.slow{stroke-dasharray:1400;animation-name:arm_drawS}
.arm .draw.arc{stroke-width:14;stroke-dasharray:260;animation-name:arm_drawA}
.arm .needle{stroke:var(--gfg,#111);transform-box:view-box;transform-origin:100px 100px;animation:arm_needle 3.4s infinite}
.arm .chk{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;margin:6px 0;opacity:0;animation:arm_appear 3.4s infinite}
.arm .c2{animation-delay:.5s}.c3{animation-delay:1s}
.arm .tick{width:26px;height:26px;border-radius:50%;background:var(--gac,var(--ac));color:#111;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.arm .steps{display:flex;justify-content:space-between;gap:4px}
.arm .st{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;font-weight:800}
.arm .dot{width:18px;height:18px;border-radius:50%;background:#cfcfcf;animation:arm_lit 3.4s infinite}
.arm .s2 .dot{animation-delay:.35s}.s3 .dot{animation-delay:.7s}.s4 .dot{animation-delay:1.05s}.s5 .dot{animation-delay:1.4s}
.arm .gx-cmp{background:transparent;box-shadow:none}
.arm .cmp{display:flex;align-items:center;gap:8px}
.arm .ca, .arm .cb{flex:1;padding:18px 8px;border-radius:12px;text-align:center;font-weight:900;font-size:20px}
.arm .ca{background:var(--gac,var(--ac));color:#111;animation:arm_inL 3.4s infinite}
.arm .cb{background:color-mix(in srgb,var(--gbg,#111) var(--agraf),transparent);color:var(--gfg,#fff);animation:arm_inR 3.4s infinite}
.arm .vs{font-weight:900;color:#fff;font-size:18px}
.arm .gx-notif{top:36px;animation:arm_drop 3.4s infinite}
.arm .nrow{display:flex;gap:10px;align-items:center}
.arm .napp{width:40px;height:40px;border-radius:10px;background:var(--gac,var(--ac));color:#111;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0}
.arm .nt{font-weight:800;font-size:15px}.nb{font-size:13px;opacity:.8}
.arm .gx-sello{background:transparent;box-shadow:none;display:flex;justify-content:center;animation:none}
.arm .stamp{border:6px solid var(--gac,var(--ac));color:var(--gac,var(--ac));font-family:'Anton',sans-serif;font-size:54px;padding:6px 22px;border-radius:10px;rotate:-12deg;animation:arm_stamp 3s infinite}
@keyframes arm_grow{0%,8%{transform:scaleY(0)}30%,100%{transform:scaleY(1)}}
@keyframes arm_draw{0%,8%{stroke-dashoffset:420}45%,100%{stroke-dashoffset:0}}
@keyframes arm_drawS{0%,5%{stroke-dashoffset:1400}60%,100%{stroke-dashoffset:0}}
@keyframes arm_drawA{0%,8%{stroke-dashoffset:260}45%,100%{stroke-dashoffset:0}}
@keyframes arm_needle{0%,8%{transform:rotate(-80deg)}45%,100%{transform:rotate(55deg)}}
@keyframes arm_appear{0%{opacity:0;transform:translateX(-20px)}12%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes arm_lit{0%,10%{background:#cfcfcf;transform:scale(1)}18%{transform:scale(1.3)}22%,90%{background:var(--gac,var(--ac));transform:scale(1)}100%{background:#cfcfcf}}
@keyframes arm_inL{0%{transform:translateX(-130%)}15%,100%{transform:none}}
@keyframes arm_inR{0%{transform:translateX(130%)}15%,100%{transform:none}}
@keyframes arm_stamp{0%{opacity:0;transform:scale(2.4)}12%{opacity:1;transform:scale(.95)}16%{transform:scale(1)}88%{opacity:1}100%{opacity:0}}
@keyframes arm_pop{0%{opacity:0;transform:scale(.3)}6%{opacity:1;transform:scale(1.18)}10%{transform:scale(1)}80%{opacity:1;transform:scale(1)}92%,100%{opacity:0}}
@keyframes arm_bump{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}}
@keyframes arm_hl{0%,20%{background:var(--skey,var(--ac));color:#111}21%,100%{background:color-mix(in srgb,var(--sbg,#000) var(--asub),transparent);color:var(--sfg,var(--pr))}}
@keyframes arm_flick{0%,47%,53%,100%{opacity:1}50%{opacity:.35}}
@keyframes arm_type{0%{width:0}60%,92%{width:300px}100%{width:300px;opacity:0}}
@keyframes arm_mark{0%{background-size:0% 38%}25%,90%{background-size:100% 38%}100%{background-size:0% 38%}}
@keyframes arm_drop{0%{opacity:0;transform:translateY(-40px) scale(1.2)}12%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
@keyframes arm_fadeio{0%{opacity:0}10%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes arm_boxin{0%{opacity:0;transform:translateY(-20px) scale(.9)}10%{opacity:1;transform:translateY(0) scale(1.04)}14%{transform:none}88%{opacity:1}100%{opacity:0}}
@keyframes arm_whoosh{0%{opacity:0;transform:translateX(140px)}10%{opacity:1;transform:translateX(-8px)}14%{transform:none}88%{opacity:1}100%{opacity:0}}
@keyframes arm_pinb{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes arm_slidein{0%{opacity:0;transform:translateX(-60px)}12%{opacity:1;transform:none}88%{opacity:1}100%{opacity:0}}
@keyframes arm_line{0%{width:0}20%,88%{width:100%}100%{width:0}}
@keyframes arm_cut{0%,49.9%{opacity:0}50%,100%{opacity:1}}
@keyframes arm_zA{0%{transform:scale(1)}48%,100%{transform:scale(1.35)}}
@keyframes arm_zB{0%,49.9%{opacity:0;transform:scale(1.3)}50%{opacity:1;transform:scale(1.3)}75%,100%{opacity:1;transform:scale(1)}}
@keyframes arm_fade{0%,35%{opacity:0}60%,100%{opacity:1}}
@keyframes arm_flash{0%,44%{opacity:0}50%{opacity:1}62%,100%{opacity:0}}
@keyframes arm_slide{0%,40%{transform:translateX(100%)}60%,100%{transform:translateX(0)}}
@keyframes arm_blurA{0%,30%{filter:blur(0)}55%,100%{filter:blur(10px)}}
@keyframes arm_morph{0%,40%{opacity:0;filter:blur(10px);transform:scale(1.06)}65%,100%{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes arm_pop2{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.08)}22%{transform:scale(1)}90%{opacity:1}100%{opacity:0}}
@keyframes arm_wipe{0%{transform:translateX(-100%)}30%{transform:translateX(0)}55%,100%{transform:translateX(100%)}}
@keyframes arm_late{0%,35%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.05)}58%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes arm_pulse{0%{box-shadow:0 0 0 0 rgba(43,196,232,.7)}100%{box-shadow:0 0 0 18px rgba(43,196,232,0)}}