/* Illustrations · line B «Interfaz real» (markup in tools/ilus.py). build.py appends the keyframes and writes
   assets/ilus.css — edit this file, not the generated one. */
@font-face{font-family:"Nunito Sans";font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-weight:700;font-display:swap;src:url(/assets/fonts/nunito-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-weight:800;font-display:swap;src:url(/assets/fonts/nunito-sans-latin-800-normal.woff2) format("woff2")}
.ilus{--ok:#0acf97;--ok-bg:#d4f7ec;--ok-ink:#067a59;--ui-body:#4c4c5c;--ui-head:#313a46;--ui-muted:#8391a2;--ui-line:#e7e9eb;--ui-light:#eef2f7;
  font-family:"Nunito Sans",system-ui,sans-serif;color:var(--ui-body);zoom:1}
@media (max-width:1400px){.ilus{zoom:.92}}
@media (max-width:1280px){.ilus{zoom:.84}}
@media (max-width:1140px){.ilus{zoom:.74}}
@media (max-width:1000px){.ilus{zoom:.64}}
@media (max-width:880px){.ilus{zoom:.56}}
.ilus .ri{width:18px;height:18px}
.ilus b{font-weight:800}
.ilus .face{width:52px;height:52px;border-radius:50%;background:#DCE6FF;flex-shrink:0;display:block;box-sizing:border-box}
.ilus .face-xl{width:128px;height:128px;border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.ui-eye{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ui-muted);font-weight:700}
.ui-muted{font-size:11px;color:var(--ui-muted)}

/* piece 1 */
.ilus-flow{display:flex;align-items:center;justify-content:center;gap:4px;background:#fff;border-radius:32px;box-shadow:0 30px 80px rgba(11,31,58,.10);padding:44px 40px}
.ui-phone{width:250px;height:500px;border-radius:36px;background:var(--marino);padding:10px;box-shadow:0 24px 60px rgba(11,31,58,.25);flex-shrink:0;box-sizing:border-box}
.ui-screen{position:relative;width:100%;height:100%;border-radius:28px;background:#f3f6f8;overflow:hidden;display:flex;flex-direction:column}
.ui-reg-head{padding:18px 16px 10px;display:flex;flex-direction:column;gap:2px}
.ui-reg-head b{font-size:15px;color:var(--ui-head)}
.ui-progress{height:4px;border-radius:2px;background:var(--ui-light);margin-top:6px;overflow:hidden}
.ui-progress i{display:block;width:40%;height:100%;background:var(--ok)}
.ui-cam{position:relative;margin:4px 12px 0;flex:1;border-radius:14px;background:#111;overflow:hidden}
.ui-bars{position:absolute;top:12px;left:0;right:0;display:flex;gap:5px;justify-content:center}
.ui-bars i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.3)}
.ui-bars i.done{background:var(--ok)}
.ui-bars i.now{background:#fff}
.ui-oval{position:absolute;left:50%;top:46%;width:128px;height:170px;transform:translate(-50%,-50%);border:3px dashed rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 400px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.ui-oval{overflow:hidden}
.ui-oval .live{width:128px;height:160px;margin-top:22px}
.live .skull,.live .feat,.live .hair,.live .hair-back{transform-box:fill-box;transform-origin:50% 50%}
.live .nose-l,.live .nose-r{opacity:0}
.prompt{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.6);opacity:0}
.ui-ok{position:absolute;left:10px;right:10px;bottom:10px;background:var(--ok-bg);color:var(--ok-ink);border-radius:8px;padding:8px 10px;font-size:12px;font-weight:700;display:flex;gap:6px;align-items:center}
.ui-ok .ri{fill:var(--ok-ink);width:16px;height:16px}
.ui-btn{display:block;margin:12px;text-align:center;background:var(--azul);color:#fff;border-radius:6px;padding:9px;font-size:13px;font-weight:700}
.ui-arrow{display:flex;flex-direction:column;align-items:center;gap:8px;width:110px;flex-shrink:0}
.ui-arrow span{font:700 12px/1.2 Inter,sans-serif;color:var(--azul);text-align:center}
.ui-arrow i{display:flex;align-items:center;width:100%}
.ui-arrow i::before{content:"";flex:1;height:3px;border-radius:2px;background:linear-gradient(90deg,#9DB8FF,var(--azul))}
.ui-arrow .ri{width:22px;height:22px;fill:var(--azul)}
.ui-card{width:400px;background:#fff;border-radius:10px;box-shadow:0 0 35px 0 hsla(215,9%,64%,.25);padding:20px;display:flex;flex-direction:column;gap:12px;flex-shrink:0;box-sizing:border-box}
.ui-person{display:flex;align-items:center;gap:12px}
.ui-person>div{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.ui-person b{font-size:16px;color:var(--ui-head)}
.ui-badge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;background:var(--ok-bg);color:var(--ok-ink);display:inline-flex;gap:4px;align-items:center}
.ui-badge .ri{width:12px;height:12px;fill:var(--ok-ink)}
.ui-tiles{display:flex;gap:8px}
.ui-tiles div{flex:1;background:var(--ui-light);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.ui-tiles b{font-size:22px;line-height:1;color:var(--ui-muted)}
.ui-tiles b.ok{color:var(--ok)}
.ui-tiles span{font-size:10px;text-transform:uppercase;color:var(--ui-muted)}
.ui-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ui-checks li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--ui-line);border-radius:8px;font-size:13px;font-weight:700;color:var(--ui-head)}
.ui-checks li>span:first-of-type{flex:1}
.ui-checks .ri{fill:var(--ui-muted)}
.ui-checks .tick .ri{fill:var(--ok)}
.ui-chip{display:flex;align-items:center;gap:8px;background:var(--ok-bg);color:var(--ok-ink);border-radius:8px;padding:10px 12px;font-size:13px;font-weight:700}
.ui-chip .ri{fill:var(--ok-ink)}
.ui-wa{width:290px;border-radius:18px;background:#efeae2;padding:14px;box-shadow:0 18px 44px rgba(11,31,58,.18);flex-shrink:0;box-sizing:border-box}
.ui-wa-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;color:#54656f}
.ui-wa-head .ri{fill:#25D366}
.ui-wa-msg{background:#fff;border-radius:4px 12px 12px 12px;padding:10px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.ui-wa-qr{border:1px solid var(--ui-line);border-radius:8px;padding:10px;display:flex;justify-content:center;margin-bottom:8px}
.ui-wa-qr .qr{width:170px;height:170px;display:block}
.ui-wa-msg p{margin:0;font-size:13px;line-height:1.45;color:#111b21}
.ui-time{display:block;text-align:right;font-size:10px;color:#667781;margin-top:4px}

/* piece 2 */
.ilus-vs{flex:1;display:flex;flex-direction:column;gap:18px}
.lane{display:grid;grid-template-columns:repeat(3,180px);grid-template-rows:auto 1fr;column-gap:28px;row-gap:10px;position:relative;
  padding:18px 20px 20px;border-radius:20px}
.lane-qr{background:rgba(255,255,255,.04);border:1px dashed rgba(157,184,255,.35)}
.lane-x{background:rgba(47,107,255,.16);border:1px solid rgba(47,107,255,.6)}
.lane-label{grid-column:1/-1;font:600 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9DB8FF}
.lane-x .lane-label{color:#fff}
.mini{grid-row:2;display:flex;flex-direction:column;gap:6px;min-height:200px}
.mini-cap{font:600 11px/1.2 Inter,sans-serif;color:#9DB8FF}
.lane-x .mini-cap{color:#fff}
.mini>div{flex:1;background:#fff;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ui-body)}
.mini-arrow{grid-row:2;position:absolute;align-self:center;display:flex;width:28px;justify-content:center}
.lane .mini-arrow:nth-of-type(1){left:calc(20px + 180px)}
.lane .mini-arrow:nth-of-type(2){left:calc(20px + 180px * 2 + 28px)}
.mini-arrow .ri{width:24px;height:24px;fill:#9DB8FF}
.lane-x .mini-arrow .ri{fill:#fff}
.mini-wa{background:#efeae2!important}
.mini-wa .mini-qr{background:#fff;border-radius:6px;padding:6px;align-self:center}
.mini-wa .qr{width:78px;height:78px;display:block}
.mini-wa p{margin:0;background:#fff;border-radius:4px 10px 10px 10px;padding:6px 8px;font-size:11px;color:#111b21}
.mini-gen{background:#e9edf2!important;align-items:center;justify-content:center;text-align:center}
.mini-frame{width:64px;height:64px;border:3px solid #9aa5b4;border-radius:8px}
.mini-gen b{display:flex;align-items:center;gap:4px;color:#3f8f4f;font-size:14px}
.mini-gen b .ri{fill:#3f8f4f}
.mini-gen span{color:#6b7684;font-size:11px}
.mini-unknown{align-items:center;justify-content:center;text-align:center}
.mini-unknown .who{width:58px;height:58px;border-radius:50%;background:#d8dde4;display:flex;align-items:center;justify-content:center}
.mini-unknown .who .ri{width:30px;height:30px;fill:#8391a2}
.mini-unknown b{font-size:15px;color:var(--ui-head)}
.mini-unknown span{color:#c0392b;font-weight:700;font-size:11px;line-height:1.35}
.mini-id{align-items:center;text-align:center}
.ilus .face-md{width:58px;height:58px}
.ilus .face-sm{width:52px;height:52px;border:3px solid #fff}
.mini-id b{font-size:13px;color:var(--ui-head)}
.ok-line{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--ok-ink)}
.ok-line .ri{width:14px;height:14px;fill:var(--ok)}
.mini-rev{justify-content:center}
.mini-rev .ui-tiles{flex-direction:column;gap:6px}
.mini-rev .ui-tiles b{font-size:20px}
.ui-tiles b.warn{color:#d39e00}
.mini-chip{display:flex;align-items:center;gap:6px;background:#fff4d6;color:#8a6100;border-radius:8px;padding:7px 8px;font-size:11px;font-weight:800}
.mini-chip .ri{width:14px;height:14px;fill:#d39e00}
.mini-end>div.mini-door{flex:0 0 auto;background:#fd7e14;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 2px,transparent 2px 18px);color:#fff;align-items:center;flex-direction:row;justify-content:space-between}
.mini-door b{font-size:17px;letter-spacing:.04em}
.mini-end>div.mini-team{flex:1;justify-content:center;gap:8px}
.mini-team .ui-yes,.mini-team .ui-no{font-size:12px;padding:8px;border-radius:8px}
.count29{--n:29;counter-reset:n var(--n);font-size:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important}
.count29::before{content:counter(n)}

/* piece 4: sticky phone + steps */
.ps{display:grid;grid-template-columns:330px 1fr;gap:72px;align-items:start}
.ps-phone-wrap{position:sticky;top:110px;display:flex;justify-content:center}
.ps-phone{width:270px;height:540px}
.ps-s{position:absolute;inset:0;display:flex;flex-direction:column;background:#f3f6f8;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.ps[data-step="1"] .ps-phone .s1,.ps[data-step="2"] .ps-phone .s2,.ps[data-step="3"] .ps-phone .s3,.ps[data-step="4"] .ps-phone .s4,.ps-s.on{opacity:1;transform:none}
.ps-pad{flex:1;padding:18px 14px;display:flex;flex-direction:column;gap:10px}
.ps-pad .ui-person{margin:2px 0}
.ps-pad .ui-checks li{padding:7px 10px;font-size:12px}
.ps-pad .ui-tiles b{font-size:20px}
.ps-pad .ui-tiles .warn,.ui-checks .tick.warn .ri{color:#d39e00;fill:#d39e00}
.ps-consent{display:flex;align-items:center;gap:6px;margin:0 12px 6px;padding:6px 10px;border-radius:8px;background:var(--ok-bg);color:var(--ok-ink);font-size:11px;font-weight:700}
.ps-consent .ri{width:14px;height:14px;fill:var(--ok-ink)}
.ps-prompt{opacity:1}
.ps-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-family:Inter,system-ui,sans-serif}
.ps-step{min-height:430px;padding:28px 0 40px;border-top:2px solid var(--linea);display:flex;flex-direction:column;gap:12px;opacity:.4;transition:opacity .3s,border-color .3s}
.ps[data-step="1"] .ps-step[data-step="1"],.ps[data-step="2"] .ps-step[data-step="2"],.ps[data-step="3"] .ps-step[data-step="3"],.ps[data-step="4"] .ps-step[data-step="4"]{opacity:1;border-top-color:var(--azul)}
.ps-step .num{font-family:"Space Grotesk",sans-serif;font-size:44px;font-weight:600;line-height:1;color:var(--azul)}
.ps-step h3{font-family:"Space Grotesk",sans-serif;font-size:30px;font-weight:600;color:var(--marino);margin:0}
.ps-step p{margin:0;font-size:18px;line-height:1.6;color:var(--texto-2);max-width:56ch}
.ps-mini{display:none}

/* piece 5: school pickup */
.ilus-pickup{display:flex;gap:28px;align-items:flex-start;justify-content:center}
.ilus-pickup figure{margin:0;display:flex;flex-direction:column;gap:12px;align-items:center}
.ilus-pickup figcaption{font:600 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2)}
.pk-s{gap:8px;justify-content:flex-start;padding-top:26px}
.pk-s .ui-v{font-size:34px}
.ilus .pk-adult{width:96px;height:96px}
.pk-role{font-size:12px;font-weight:700;opacity:.9;margin-top:-6px}
.pk-kids{display:flex;gap:14px;margin-top:6px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.14)}
.pk-kid{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px}
.pk-kid b{font-size:13px}
.ilus .face-kid{width:64px;height:64px;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pk-check{position:absolute;top:-2px;right:-4px;width:22px;height:22px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.pk-check .ri{width:15px;height:15px;fill:#198754}
.pk-s .ui-vbtn{margin-top:8px;background:#212529;color:#fff}
.v-green.pk-s{background-color:#198754}
.duo1{opacity:0}
.pk-card{width:300px;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(11,31,58,.14);padding:20px;display:flex;flex-direction:column;gap:10px;box-sizing:border-box}
.pk-card .ui-person>div{gap:2px}
.pk-sub{margin-top:6px}
.pk-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--ui-line);border-radius:10px;background:#fff}
.pk-row.duo0-hl{background:#eaf7f1}
.pk-row .face{width:40px;height:40px}
.pk-row>div{flex:1;display:flex;flex-direction:column}
.pk-row b{font-size:13px;color:var(--ui-head)}
.pk-row span{font-size:11px;color:var(--ui-muted)}
.pk-row>.ri{fill:var(--ok)}

/* piece 6: residential visitor */
.ilus-res{display:flex;align-items:center;justify-content:center;gap:4px;background:#fff;border-radius:32px;box-shadow:0 30px 80px rgba(11,31,58,.10);padding:36px 32px}
.ilus-res figure{margin:0;display:flex;flex-direction:column;gap:12px;align-items:center}
.ilus-res figcaption{font:600 13px/1.2 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-2);text-align:center}
.ilus-res .ui-phone{width:240px;height:480px}
.rs-wa{width:300px}
.rs-wa p{margin:0 0 8px}
.rs-card{border:1px solid var(--ui-line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.rs-card .face{width:40px;height:40px}
.rs-card .ui-person>div{gap:0}
.rs-btns{display:flex;gap:6px}
.rs-btns span{flex:1;font-size:12px!important;padding:8px!important;border-radius:8px!important}
.rs-done{display:flex;align-items:center;gap:6px;margin-top:8px;padding:7px 9px;border-radius:8px;background:var(--ok-bg);color:var(--ok-ink);font-size:12px;font-weight:700}
.rs-done .ri{width:15px;height:15px;fill:var(--ok-ink)}
.rs-pre{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:6px 10px;border-radius:2rem;background:rgba(0,0,0,.18)}
.rs-pre .ri{width:15px;height:15px;fill:#fff}
.ilus-res .ui-phone-door .ui-verdict{gap:10px}

/* piece 7: security company control center */
.ilus-cc{display:flex;gap:32px;align-items:flex-start;justify-content:center}
.ilus-cc figure{margin:0;display:flex;flex-direction:column;gap:12px;align-items:center}
.ilus-cc figcaption{font:600 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2)}
.tri1,.tri2{opacity:0}
.tri0-hl{background:#eaf7f1}
.cc{width:660px;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(11,31,58,.14);padding:20px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
.cc-head{display:flex;justify-content:space-between;align-items:baseline}
.cc-head b{font-size:17px;color:var(--ui-head)}
.cc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cc-stats div{background:var(--ui-light);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.cc-stats b{font-size:20px;line-height:1;color:var(--ui-head)}
.cc-stats b.warn{color:#d39e00}
.cc-stats span{font-size:10px;text-transform:uppercase;color:var(--ui-muted)}
.cc-body{display:grid;grid-template-columns:190px 1fr;gap:14px}
.cc-sites{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cc-sites li{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--ui-line);border-radius:10px;background:#fff}
.cc-sites i{width:8px;height:8px;border-radius:50%;background:var(--ok);margin-top:5px;flex-shrink:0}
.cc-sites div{display:flex;flex-direction:column}
.cc-sites b{font-size:12px;color:var(--ui-head)}
.cc-sites span{font-size:10px;color:var(--ui-muted)}
.cc-feed{display:flex;flex-direction:column;gap:6px}
.cc-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--ui-line);border-radius:10px;background:#fff}
.cc-row .face{width:30px;height:30px}
.cc-row>div{flex:1;display:flex;flex-direction:column;min-width:0}
.cc-row b{font-size:12px;color:var(--ui-head)}
.cc-row div span{font-size:10px;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-time{font-size:10px;color:var(--ui-muted);width:26px}
.cc-chip{font-size:10px;font-weight:800;letter-spacing:.04em;padding:4px 7px;border-radius:6px;color:#fff}
.cc-chip.ok{background:#198754}
.cc-chip.wait{background:#fd7e14}

/* piece 3 */
.ilus-door{display:flex;gap:28px;align-items:flex-start;justify-content:center}
.ilus-door figure{margin:0;display:flex;flex-direction:column;gap:12px;align-items:center}
.ilus-door figcaption{font:600 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2)}
.ilus-door figure>p{margin:0;font:400 13px/1.4 Inter,sans-serif;color:var(--texto-2);max-width:300px;text-align:center}
.ui-phone-door{width:270px;height:540px;border-radius:38px}
.ui-phone-door .ui-screen{border-radius:30px;background:#000}
.ui-verdict{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;
  background-image:radial-gradient(circle at 18% 12%,rgba(255,255,255,.22),transparent 42%),radial-gradient(circle at 85% 92%,rgba(0,0,0,.20),transparent 48%),repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 24px)}
.v-green{background-color:#198754}
.v-orange{background-color:#fd7e14}
.v-red{background-color:#dc3545}
.ui-v{font-size:40px;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.ui-pill{font-size:11px;padding:4px 10px;border-radius:2rem;background:rgba(0,0,0,.18)}
.ui-name{font-size:20px}
.ui-msg{font-size:13px;font-weight:700;text-align:center;padding:0 16px;line-height:1.35}
.ui-vbtn{margin-top:4px;font-size:12px;font-weight:700;padding:7px 16px;border-radius:6px;background:#fff;color:var(--ui-head)}
.ui-panel{position:relative;width:300px;height:420px;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(11,31,58,.14)}
.ui-team{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column}
.ui-team .ui-person{margin:10px 0 12px}
.ui-team .face{border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.ui-kv{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--ui-line);font-size:13px}
.ui-kv span{color:var(--ui-muted)}
.ui-kv b{color:var(--ui-head);text-align:right}
.ui-kv b.g{color:#067a59}
.ui-kv b.o{color:#b8860b}
.ui-kv b.r{color:#c0392b}
.ui-decide{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ui-yes{display:flex;gap:6px;justify-content:center;align-items:center;background:#198754;color:#fff;border-radius:12px;padding:11px;font-size:14px;font-weight:700}
.ui-yes .ri{fill:#fff}
.ui-no{display:flex;justify-content:center;border:1px solid #f1556c;color:#f1556c;border-radius:12px;padding:10px;font-size:14px;font-weight:700}
.ui-note{margin:14px 0 0;font-size:12px;color:var(--ui-muted)}
.st1,.st2{opacity:0}
.legend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:calc(16 * var(--u))}
.legend li{display:flex;align-items:center;gap:12px}
.legend i{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.legend b{font-family:var(--head);letter-spacing:.04em}
.legend span{color:var(--texto-2)}

/* motion, enabled by assets/ilus.js */
/* liveness: the head looks ahead, then turns left, then right — in step with the on-screen prompts (12 s loop) */
/* windows: front 0–13 %, «izquierda» 16–22 %, «derecha» 25–32 %, front again from 35 %. Units are SVG units. */
@keyframes feat{0%,13%{transform:none}16%,22%{transform:translateX(-4px) scaleX(.88)}25%,32%{transform:translateX(4px) scaleX(.88)}35%,100%{transform:none}}
@keyframes hair{0%,13%{transform:none}16%,22%{transform:translateX(-2.6px) scaleX(.96)}25%,32%{transform:translateX(2.6px) scaleX(.96)}35%,100%{transform:none}}
@keyframes skull{0%,13%{transform:none}16%,22%{transform:translateX(-.8px) scaleX(.94)}25%,32%{transform:translateX(.8px) scaleX(.94)}35%,100%{transform:none}}
@keyframes hair-back{0%,13%{transform:none}16%,22%{transform:translateX(1.2px)}25%,32%{transform:translateX(-1.2px)}35%,100%{transform:none}}
@keyframes nose-f{0%,13%{opacity:1}15%,33%{opacity:0}35%,100%{opacity:1}}
@keyframes nose-l{0%,14%{opacity:0}16%,22%{opacity:1}24%,100%{opacity:0}}
@keyframes nose-r{0%,23%{opacity:0}25%,32%{opacity:1}34%,100%{opacity:0}}
.ilus.anim .live .feat{animation:feat 12s infinite ease-in-out}
.ilus.anim .live .hair{animation:hair 12s infinite ease-in-out}
.ilus.anim .live .skull{animation:skull 12s infinite ease-in-out}
.ilus.anim .live .hair-back{animation:hair-back 12s infinite ease-in-out}
.ilus.anim .live .nose-f{animation:nose-f 12s infinite}
.ilus.anim .live .nose-l{animation:nose-l 12s infinite}
.ilus.anim .live .nose-r{animation:nose-r 12s infinite}
/* 0 -> 30 counter */
@property --n{syntax:"<integer>";inherits:false;initial-value:30}
.count{--n:30;counter-reset:n var(--n);font-size:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important}
.count::before{content:counter(n)}

@media (max-width:760px){
  .ilus{zoom:1}
  .ilus-flow{flex-direction:column;padding:28px 16px;gap:8px}
  .ui-arrow{width:auto;flex-direction:row;gap:6px}
  .ui-arrow i{width:auto;transform:rotate(90deg)}
  .ui-arrow i::before{display:none}
  .ui-card,.ui-wa{width:100%;max-width:340px}
  .ilus-door{flex-direction:column;align-items:center}
  .lane{grid-template-columns:1fr;grid-template-rows:auto;row-gap:8px}
  .mini{grid-row:auto;min-height:0}
  .mini-arrow{position:static;grid-row:auto;justify-self:center;transform:rotate(90deg)}
  .ilus-pickup{flex-direction:column;align-items:center}
  .ilus-res{flex-direction:column;padding:28px 16px;gap:8px}
  .ilus-cc{flex-direction:column;align-items:center}
  .cc{width:100%;max-width:360px}
  .cc-stats{grid-template-columns:repeat(2,1fr)}
  .cc-body{grid-template-columns:minmax(0,1fr)}
  .ilus-cc figure{width:100%}
  .cc-feed,.cc-sites{min-width:0}
  .rs-wa{width:100%;max-width:320px}
  .ps{grid-template-columns:1fr;gap:0}
  .ps-phone-wrap{display:none}
  .ps-step{min-height:0;opacity:1;border-top-color:var(--azul)}
  .ps-step h3{font-size:24px}
  .ps-step p{font-size:16px}
  .ps-mini{display:block;width:240px;height:480px;align-self:center;margin-top:8px}
}

/* Generated by tools/build.py from tools/ilus.py — do not edit by hand. */
@keyframes w-i1{0%,2%{opacity:0;transform:translateY(8px)}5%{opacity:1;transform:none}11%{opacity:1;transform:none}13%,100%{opacity:0;transform:none}}.ilus.anim [data-w=i1]{animation:w-i1 12s infinite both}
@keyframes w-i2{0%,13%{opacity:0;transform:translateY(8px)}16%{opacity:1;transform:none}21%{opacity:1;transform:none}23%,100%{opacity:0;transform:none}}.ilus.anim [data-w=i2]{animation:w-i2 12s infinite both}
@keyframes w-i3{0%,23%{opacity:0;transform:translateY(8px)}26%{opacity:1;transform:none}31%{opacity:1;transform:none}33%,100%{opacity:0;transform:none}}.ilus.anim [data-w=i3]{animation:w-i3 12s infinite both}
@keyframes w-listo{0%,33%{opacity:0;transform:translateY(8px)}36%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=listo]{animation:w-listo 12s infinite both}
@keyframes w-a1{0%,34%{opacity:0;transform:translateY(8px)}37%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=a1]{animation:w-a1 12s infinite both}
@keyframes w-card{0%,36%{opacity:0;transform:translateY(8px)}39%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=card]{animation:w-card 12s infinite both}
@keyframes w-c0{0%,41%{opacity:0;transform:translateY(8px)}44%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=c0]{animation:w-c0 12s infinite both}
@keyframes w-c1{0%,45%{opacity:0;transform:translateY(8px)}48%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=c1]{animation:w-c1 12s infinite both}
@keyframes w-c2{0%,49%{opacity:0;transform:translateY(8px)}52%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=c2]{animation:w-c2 12s infinite both}
@keyframes w-c3{0%,53%{opacity:0;transform:translateY(8px)}56%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=c3]{animation:w-c3 12s infinite both}
@keyframes w-c4{0%,57%{opacity:0;transform:translateY(8px)}60%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=c4]{animation:w-c4 12s infinite both}
@keyframes w-chip{0%,67%{opacity:0;transform:translateY(8px)}70%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=chip]{animation:w-chip 12s infinite both}
@keyframes w-a2{0%,71%{opacity:0;transform:translateY(8px)}74%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=a2]{animation:w-a2 12s infinite both}
@keyframes w-wa{0%,75%{opacity:0;transform:translateY(8px)}78%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=wa]{animation:w-wa 12s infinite both}
@keyframes w-qa1{0%,3%{opacity:0;transform:translateY(8px)}6%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=qa1]{animation:w-qa1 12s infinite both}
@keyframes w-qa2{0%,9%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=qa2]{animation:w-qa2 12s infinite both}
@keyframes w-qa3{0%,15%{opacity:0;transform:translateY(8px)}18%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=qa3]{animation:w-qa3 12s infinite both}
@keyframes w-qb1{0%,24%{opacity:0;transform:translateY(8px)}27%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=qb1]{animation:w-qb1 12s infinite both}
@keyframes w-qb2{0%,36%{opacity:0;transform:translateY(8px)}39%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=qb2]{animation:w-qb2 12s infinite both}
@keyframes w-qchip{0%,56%{opacity:0;transform:translateY(8px)}59%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=qchip]{animation:w-qchip 12s infinite both}
@keyframes w-qb3{0%,64%{opacity:0;transform:translateY(8px)}67%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=qb3]{animation:w-qb3 12s infinite both}
@keyframes w-qteam{0%,72%{opacity:0;transform:translateY(8px)}75%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=qteam]{animation:w-qteam 12s infinite both}
@keyframes w-ra1{0%,20%{opacity:0;transform:translateY(8px)}23%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=ra1]{animation:w-ra1 12s infinite both}
@keyframes w-rv{0%,24%{opacity:0;transform:translateY(8px)}27%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=rv]{animation:w-rv 12s infinite both}
@keyframes w-rok{0%,30%{opacity:0;transform:translateY(8px)}33%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=rok]{animation:w-rok 12s infinite both}
@keyframes w-rdec{0%,42%{opacity:0;transform:translateY(8px)}45%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=rdec]{animation:w-rdec 12s infinite both}
@keyframes w-ra2{0%,52%{opacity:0;transform:translateY(8px)}55%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=ra2]{animation:w-ra2 12s infinite both}
@keyframes w-rg{0%,56%{opacity:0;transform:translateY(8px)}59%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=rg]{animation:w-rg 12s infinite both}
@keyframes w-rpre{0%,64%{opacity:0;transform:translateY(8px)}67%{opacity:1;transform:none}94%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}.ilus.anim [data-w=rpre]{animation:w-rpre 12s infinite both}
@keyframes st0{0%{opacity:1}0.0%{opacity:1}1.5%{opacity:1}31.8%{opacity:1}33.4%{opacity:0}100%{opacity:0}}.ilus.anim .st0{animation:st0 15.0s infinite both}
@keyframes st1{0%{opacity:0}33.2%{opacity:0}34.8%{opacity:1}65.1%{opacity:1}66.7%{opacity:0}100%{opacity:0}}.ilus.anim .st1{animation:st1 15.0s infinite both}
@keyframes st2{0%{opacity:0}66.5%{opacity:0}68.1%{opacity:1}98.4%{opacity:1}100.0%{opacity:1}100%{opacity:1}}.ilus.anim .st2{animation:st2 15.0s infinite both}
@keyframes count{0%,41%{--n:0}61%,100%{--n:30}}.ilus.anim .count{animation:count 12s infinite both}
@keyframes count29{0%,38%{--n:0}54%,100%{--n:29}}.ilus.anim .count29{animation:count29 12s infinite both}
@keyframes duo0{0%,46%{opacity:1}50%,96%{opacity:0}100%{opacity:1}}.ilus.anim .duo0{animation:duo0 12s infinite both}@keyframes duo0-hl{0%,46%{background:#eaf7f1}50%,96%{background:#fff}100%{background:#eaf7f1}}.ilus.anim .duo0-hl{animation:duo0-hl 12s infinite both}
@keyframes duo1{0%,46%{opacity:0}50%,96%{opacity:1}100%{opacity:0}}.ilus.anim .duo1{animation:duo1 12s infinite both}@keyframes duo1-hl{0%,46%{background:#fff}50%,96%{background:#eaf7f1}100%{background:#fff}}.ilus.anim .duo1-hl{animation:duo1-hl 12s infinite both}
@keyframes tri0{0%{opacity:1}0.0%{opacity:1}1.5%{opacity:1}31.8%{opacity:1}33.4%{opacity:0}100%{opacity:0}}.ilus.anim .tri0{animation:tri0 15.0s infinite both}
@keyframes tri0-hl{0%{background:#eaf7f1}0.0%{background:#eaf7f1}1.5%{background:#eaf7f1}31.8%{background:#eaf7f1}33.4%{background:#fff}100%{background:#fff}}.ilus.anim .tri0-hl{animation:tri0-hl 15.0s infinite both}
@keyframes tri1{0%{opacity:0}33.2%{opacity:0}34.8%{opacity:1}65.1%{opacity:1}66.7%{opacity:0}100%{opacity:0}}.ilus.anim .tri1{animation:tri1 15.0s infinite both}
@keyframes tri1-hl{0%{background:#fff}33.2%{background:#fff}34.8%{background:#eaf7f1}65.1%{background:#eaf7f1}66.7%{background:#fff}100%{background:#fff}}.ilus.anim .tri1-hl{animation:tri1-hl 15.0s infinite both}
@keyframes tri2{0%{opacity:0}66.5%{opacity:0}68.1%{opacity:1}98.4%{opacity:1}100.0%{opacity:1}100%{opacity:1}}.ilus.anim .tri2{animation:tri2 15.0s infinite both}
@keyframes tri2-hl{0%{background:#fff}66.5%{background:#fff}68.1%{background:#eaf7f1}98.4%{background:#eaf7f1}100.0%{background:#eaf7f1}100%{background:#eaf7f1}}.ilus.anim .tri2-hl{animation:tri2-hl 15.0s infinite both}
.ilus.anim [data-w],.ilus.anim .st0,.ilus.anim .st1,.ilus.anim .st2,.ilus.anim .tri0,.ilus.anim .tri1,.ilus.anim .tri2,.ilus.anim .tri0-hl,.ilus.anim .tri1-hl,.ilus.anim .tri2-hl,.ilus.anim .ui-oval .live *,.ilus.anim .count,.ilus.anim .count29,.ilus.anim .duo0,.ilus.anim .duo1,.ilus.anim .duo0-hl,.ilus.anim .duo1-hl{animation-play-state:paused}
.ilus.anim.run [data-w],.ilus.anim.run .st0,.ilus.anim.run .st1,.ilus.anim.run .st2,.ilus.anim.run .tri0,.ilus.anim.run .tri1,.ilus.anim.run .tri2,.ilus.anim.run .tri0-hl,.ilus.anim.run .tri1-hl,.ilus.anim.run .tri2-hl,.ilus.anim.run .ui-oval .live *,.ilus.anim.run .count,.ilus.anim.run .count29,.ilus.anim.run .duo0,.ilus.anim.run .duo1,.ilus.anim.run .duo0-hl,.ilus.anim.run .duo1-hl{animation-play-state:running}