/*
Theme Name: Mantis IA
Theme URI: https://mantisia.com
Author: Mantis IA
Description: Tema a medida para Mantis IA — agencia de diseño, desarrollo y monitoreo de sitios web.
Version: 4.0
Text Domain: mantis-ia
*/



:root{
  --ink:#06110D;--ink2:#0B1B15;--ink3:#12271F;
  --bone:#EDE6D8;
  --grn:#3BE39F;--grn2:#12D488;--grn-dim:rgba(59,227,159,.10);--grn-br:rgba(59,227,159,.30);
  --amb:#FF7A45;--amb-dim:rgba(255,122,69,.10);--amb-br:rgba(255,122,69,.34);
  --txt:#F1ECE2;--txt2:#93A69C;--txt3:#5C6E66;
  --line:rgba(241,236,226,.10);--line2:rgba(241,236,226,.22);
  --disp:'Bricolage',-apple-system,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
body{background:var(--ink);margin:0}
#mia{background:var(--ink);color:var(--txt);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
html,body{overflow-x:clip}
#mia *{box-sizing:border-box}
#mia .wrap{max-width:1180px;margin:0 auto;padding:0 2.2rem}
#mia h1,#mia h2,#mia h3,#mia .disp{font-family:var(--disp);font-weight:800;letter-spacing:-.04em;line-height:.9;margin:0}
#mia .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt3)}
#mia .grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* NAV minimal */
#mia nav{position:fixed;top:0;left:0;right:0;z-index:70;padding:1.4rem 2.2rem;display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference}
#mia .logo{display:flex;align-items:baseline;gap:.35em;text-decoration:none;color:#fff}
#mia .logo b{font-family:var(--disp);font-size:1.35rem;font-weight:800;letter-spacing:-.05em}
#mia .logo i{font-style:normal;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em}
#mia .nav-r{display:flex;align-items:center;gap:1.6rem}
#mia .nav-r a{color:#fff;text-decoration:none;font-size:.82rem;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ===== MENU ===== */
#mia .burger{width:30px;height:14px;position:relative;cursor:pointer;background:none;border:0;padding:0}
#mia .burger span{position:absolute;left:0;right:0;height:1.5px;background:#fff;transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .25s}
#mia .burger span:first-child{top:0}
#mia .burger span:last-child{bottom:0}
#mia.menu-abierto .burger span:first-child{transform:translateY(6px) rotate(45deg)}
#mia.menu-abierto .burger span:last-child{transform:translateY(-6px) rotate(-45deg)}
#mia .menu{position:fixed;inset:0;z-index:65;background:var(--ink);display:flex;align-items:center;
  opacity:0;visibility:hidden;transition:opacity .45s cubic-bezier(.16,1,.3,1),visibility .45s}
#mia.menu-abierto .menu{opacity:1;visibility:visible}
#mia .menu-in{max-width:1180px;margin:0 auto;padding:0 2.2rem;width:100%}
#mia .menu a{display:block;font-family:var(--disp);font-weight:800;letter-spacing:-.04em;text-transform:uppercase;
  font-size:clamp(1.9rem,5.8vw,4.2rem);line-height:1.05;color:var(--txt);text-decoration:none;padding:.35rem 0;
  opacity:0;transform:translateY(26px);transition:opacity .5s,transform .5s,color .3s}
#mia.menu-abierto .menu a{opacity:1;transform:none}
#mia.menu-abierto .menu a:nth-child(1){transition-delay:.1s}
#mia.menu-abierto .menu a:nth-child(2){transition-delay:.17s}
#mia.menu-abierto .menu a:nth-child(3){transition-delay:.24s}
#mia.menu-abierto .menu a:nth-child(4){transition-delay:.31s}
#mia .menu a:hover{color:var(--grn)}
#mia .menu-pie{margin-top:2.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--txt3);
  opacity:0;transition:opacity .5s .32s}
#mia.menu-abierto .menu-pie{opacity:1}

/* ===== STAGE / HERO ===== */
#mia .stage{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--ink)}
#mia .wall{position:absolute;inset:-6% -3%;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:1.2rem;padding:1.2rem;animation:drift 26s linear infinite;will-change:transform}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-1.6%,-1.9%,0) scale(1.035)}
  66%{transform:translate3d(1.1%,-2.6%,0) scale(1.055)}
  100%{transform:translate3d(0,0,0) scale(1)}}
#mia .wall-lit{-webkit-mask-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,42%),#000 0%,#000 52%,transparent 100%);
               mask-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,42%),#000 0%,#000 52%,transparent 100%)}
#mia .sc.ancha{grid-column:span 2}
#mia .sc.alta{grid-row:span 2}
#mia .sc.grande{grid-column:span 2;grid-row:span 2}
@media(max-width:900px){#mia .sc.ancha,#mia .sc.grande{grid-column:span 1}#mia .sc.alta,#mia .sc.grande{grid-row:span 1}}
/* profundidad: no todo en el mismo plano */
#mia .sc.p1{opacity:.34;filter:blur(2px);transform:scale(.97)}
#mia .sc.p2{opacity:.66;filter:blur(.6px)}
#mia .sc.p3{opacity:1}
/* corte de edicion: una ventana se enciende de golpe */
#mia .sc.corte{animation:corte .55s ease-out}
@keyframes corte{
  0%{filter:brightness(2.6) saturate(1.5);border-color:rgba(59,227,159,.9);transform:scale(1.015)}
  100%{filter:none;border-color:var(--line);transform:none}}
/* barrido de luz sobre TODO el muro, no sobre cada pieza */
#mia .wall-luz{position:absolute;inset:-25%;pointer-events:none;z-index:3;
  background:linear-gradient(102deg,transparent 40%,rgba(59,227,159,.09) 47%,rgba(241,236,226,.055) 50%,rgba(255,122,69,.05) 53%,transparent 60%);
  animation:barrido 13s linear infinite}
@keyframes barrido{0%{transform:translateX(-58%)}100%{transform:translateX(58%)}}
/* vineta: junta todo en una sola imagen */
#mia .wall-vin{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 120% 95% at 50% 45%,transparent 35%,rgba(6,17,13,.55) 78%,rgba(6,17,13,.9) 100%)}
#mia .wall-frame{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 87%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 87%,transparent 100%)}

/* ===== VENTANAS: cada una hace algo distinto ===== */
#mia .sc{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:rgba(241,236,226,.02);height:100%;min-height:150px;opacity:0;
  animation:life var(--dur,17s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes life{0%{opacity:0;transform:scale(.97)}6%{opacity:1;transform:none}82%{opacity:1}93%,100%{opacity:0;transform:scale(.99)}}
#mia .sc-bar{height:17px;background:rgba(241,236,226,.04);display:flex;align-items:center;gap:3px;padding:0 7px;border-bottom:1px solid var(--line)}
#mia .sc-bar s{width:4px;height:4px;border-radius:50%;background:rgba(241,236,226,.18);text-decoration:none}
#mia .sc-bar b{margin-left:5px;font-family:var(--mono);font-size:6.5px;font-weight:400;color:var(--txt3);letter-spacing:.06em}
#mia .sc-b{padding:9px;position:relative;height:calc(100% - 17px)}
#mia .u{--d:0.00s}

/* 01 lineas que se dibujan */
#mia .ln2{height:5px;border-radius:3px;background:rgba(241,236,226,.1);margin-bottom:6px;transform:scaleX(0);transform-origin:left;
  animation:draw var(--dur,17s) linear infinite;animation-delay:calc(var(--dl,0s) + var(--d))}
@keyframes draw{0%{transform:scaleX(0)}12%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(1)}}
/* 02 bloques que aparecen */
#mia .bx{border-radius:5px;background:rgba(241,236,226,.07);opacity:0;
  animation:popin var(--dur,17s) linear infinite;animation-delay:calc(var(--dl,0s) + var(--d))}
@keyframes popin{0%{opacity:0;transform:translateY(5px) scale(.96)}10%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
/* 03 filas de chequeo */
#mia .ck{display:flex;align-items:center;gap:5px;padding:4px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:7px;color:var(--txt3);opacity:0;
  animation:popin var(--dur,17s) linear infinite;animation-delay:calc(var(--dl,0s) + var(--d))}
#mia .ck s{text-decoration:none;width:11px;height:11px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:6px;flex-shrink:0;
  background:rgba(241,236,226,.08);color:var(--txt3)}
/* 04 cursor que hace click */
#mia .clk{position:absolute;width:9px;height:9px;pointer-events:none;opacity:0;
  animation:clickpath var(--dur,17s) linear infinite;animation-delay:calc(var(--dl,0s) + var(--d))}
#mia .clk::before{content:'';position:absolute;inset:0;border-left:1.4px solid #fff;border-top:1.4px solid #fff;transform:rotate(-45deg)}
@keyframes clickpath{
  0%,26%{opacity:0;transform:translate(10px,50px)}
  32%{opacity:.85;transform:translate(14px,44px)}
  46%{opacity:.85;transform:translate(46px,22px)}
  50%{opacity:.85;transform:translate(44px,24px) scale(.8)}
  56%,84%{opacity:.85;transform:translate(46px,22px)}
  92%,100%{opacity:0}}
/* 05 barra de progreso */
#mia .pb{height:3px;border-radius:3px;background:rgba(241,236,226,.08);overflow:hidden;margin-top:7px}
#mia .pb i{display:block;height:100%;width:100%;background:var(--grn);transform-origin:left;transform:scaleX(0);
  animation:fill var(--dur,17s) linear infinite;animation-delay:calc(var(--dl,0s) + var(--d))}
@keyframes fill{0%,8%{transform:scaleX(0)}62%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(1)}}
/* 06 pulso de uptime */
#mia .ecg{width:100%;height:38px;margin-top:8px;overflow:hidden}
#mia .ecg svg{width:200%;height:100%;animation:ecgmove var(--dur,17s) linear infinite}
@keyframes ecgmove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* 07 log que se escribe */
#mia .lg{font-family:var(--mono);font-size:6.5px;color:var(--txt3);line-height:1.9;white-space:nowrap;overflow:hidden;opacity:0;
  animation:popin var(--dur,17s) linear infinite;animation-delay:calc(var(--dl,0s) + var(--d))}
/* 08 alerta */
#mia .al{margin-top:7px;border:1px solid rgba(255,85,85,.35);background:rgba(255,85,85,.08);border-radius:6px;padding:6px;
  font-family:var(--mono);font-size:6.5px;color:#FF7A7A;opacity:0;
  animation:alertin var(--dur,17s) linear infinite;animation-delay:calc(var(--dl,0s) + var(--d))}
@keyframes alertin{0%,54%{opacity:0;transform:translateY(4px)}60%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
/* 09 vista celular */
#mia .ph{width:52px;height:96px;border:1px solid var(--line2);border-radius:8px;margin:6px auto 0;padding:5px;position:relative}
#mia .ph::before{content:'';position:absolute;top:3px;left:50%;transform:translateX(-50%);width:14px;height:2px;border-radius:2px;background:rgba(241,236,226,.2)}
/* sello */
#mia .ok{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;color:var(--grn);opacity:0;
  animation:stamp var(--dur,17s) linear infinite;animation-delay:var(--dl,0s)}
#mia .sc.err .ok{color:#FF5555}
@keyframes stamp{0%,70%{opacity:0;transform:scale(.7)}76%,88%{opacity:1;transform:none}96%,100%{opacity:0}}

/* capa iluminada */
#mia .wall-lit .sc{border-color:rgba(59,227,159,.5);background:rgba(59,227,159,.06);box-shadow:0 0 34px rgba(59,227,159,.1)}
#mia .wall-lit .sc.err{border-color:rgba(255,85,85,.45);box-shadow:0 0 34px rgba(255,85,85,.1)}
#mia .wall-lit .sc-bar{background:rgba(59,227,159,.09)}
#mia .wall-lit .sc-bar s{background:var(--grn)}
#mia .wall-lit .ln2{background:rgba(241,236,226,.68)}
#mia .wall-lit .ln2.a{background:var(--amb)}
#mia .wall-lit .bx{background:linear-gradient(135deg,rgba(255,122,69,.8),rgba(59,227,159,.45))}
#mia .wall-lit .ck{color:var(--txt2)}
#mia .wall-lit .ck s.g{background:rgba(59,227,159,.2);color:var(--grn)}
#mia .wall-lit .ck s.y{background:rgba(255,189,46,.18);color:#FFBD2E}
#mia .wall-lit .ck s.r{background:rgba(255,85,85,.2);color:#FF5555}
#mia .wall-lit .lg{color:var(--txt2)}
#mia .wall-lit .lg .g{color:var(--grn)}
#mia .wall-lit .lg .r{color:#FF5555}
#mia .wall-dim .ok{opacity:0!important}
#mia .wall-dim .al{border-color:var(--line);background:rgba(241,236,226,.03);color:var(--txt3)}

#mia .stage-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 46%,rgba(6,17,13,.93) 0%,rgba(6,17,13,.72) 45%,rgba(6,17,13,.5) 100%)}
#mia .stage-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;pointer-events:none;padding:5rem 0 3.5rem}
#mia .stage-copy .wrap{width:100%;pointer-events:none}
#mia .kick{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grn);margin-bottom:1.6rem;opacity:0;animation:fadeUp .9s .15s forwards}
#mia .kick s{text-decoration:none;width:5px;height:5px;border-radius:50%;background:var(--grn);animation:blip 2.2s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#mia h1{font-size:clamp(2.4rem,7vw,6.2rem);text-transform:uppercase;line-height:.88}
#mia h1 .ln{display:block;overflow:hidden}
#mia h1 .ln>span{display:block;transform:translateY(102%);animation:rise 1.05s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{to{transform:translateY(0)}}
#mia h1 .hollow{color:transparent;-webkit-text-stroke:1.5px var(--txt2)}
#mia h1 .fill{color:var(--txt)}
#mia h1 em{font-style:normal;color:var(--grn)}
#mia .stage-foot{position:absolute;left:0;right:0;bottom:0;padding:0 2.2rem 2rem;display:flex;justify-content:flex-end;align-items:flex-end;gap:2rem;opacity:0;animation:fadeUp .9s .85s forwards}
#mia .stage-lede{max-width:44ch;font-size:1.06rem;line-height:1.65;color:var(--txt);margin:1.9rem 0 0;
  text-shadow:0 2px 22px rgba(6,17,13,.95),0 1px 3px rgba(6,17,13,.9);opacity:0;animation:fadeUp .9s .7s forwards}
#mia .scroll-cue{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt3);display:flex;align-items:center;gap:.6rem}
#mia .scroll-cue s{text-decoration:none;display:block;width:1px;height:34px;background:linear-gradient(var(--grn),transparent);animation:drop 1.9s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* CURSOR */
#mia.cursor-propio,#mia.cursor-propio *{cursor:none}
#mia .cur{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--grn);pointer-events:none;z-index:99;transform:translate3d(-50%,-50%,0);will-change:transform}
#mia .cur-ring{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--grn-br);pointer-events:none;z-index:98;transform:translate3d(-50%,-50%,0);will-change:transform;transition:width .2s cubic-bezier(.16,1,.3,1),height .2s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s}
#mia .cur-ring.big{width:72px;height:72px;background:rgba(59,227,159,.12);border-color:var(--grn)}
@media(hover:none),(pointer:coarse),(max-width:820px){#mia .cur,#mia .cur-ring{display:none!important}}

/* MARQUEE */
#mia .mq{padding:.7rem 0;overflow:hidden;background:var(--ink2)}
#mia .mq-in{display:flex;gap:2.2rem;width:max-content;animation:slide 34s linear infinite}
#mia .mq-in span{font-family:var(--disp);font-size:1.05rem;font-weight:600;color:var(--txt3);white-space:nowrap;text-transform:uppercase;letter-spacing:-.01em;display:flex;align-items:center;gap:2.2rem}
#mia .mq-in i{font-style:normal;color:var(--amb);width:4px;height:4px;border-radius:50%;background:var(--amb);display:inline-block;flex-shrink:0}
@keyframes slide{to{transform:translateX(-50%)}}

/* ===== INTERRUPTOR con / sin Mantis ===== */
#mia .sw{padding:8rem 0}
#mia .sw-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center}
#mia .sw h2{font-size:clamp(2rem,4.6vw,3.4rem);text-transform:uppercase;margin:1rem 0 1.8rem}
#mia .sw h2 .g{color:var(--grn)}

#mia .toggle{display:inline-flex;align-items:center;gap:1rem;background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
#mia .toggle:focus-visible{outline:2px solid var(--grn);outline-offset:6px;border-radius:100px}
#mia .tg-hint{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);transition:color .3s}
#mia .sw-wrap.mon-on .tg-hint{color:var(--grn)}
#mia .tg-track{width:88px;height:42px;border-radius:100px;background:rgba(255,85,85,.16);border:1px solid rgba(255,85,85,.4);position:relative;transition:background .35s,border-color .35s;flex-shrink:0}
#mia .tg-knob{position:absolute;top:4px;left:4px;width:34px;height:34px;border-radius:50%;background:#FF5555;transition:transform .38s cubic-bezier(.34,1.4,.5,1),background .35s;animation:latir 2.4s infinite}
#mia .sw-wrap.mon-on .tg-knob{animation:none}
@keyframes latir{0%,100%{box-shadow:0 0 0 0 rgba(255,85,85,.45)}60%{box-shadow:0 0 0 12px rgba(255,85,85,0)}}
#mia .sw-wrap.mon-on .tg-track{background:var(--grn-dim);border-color:var(--grn-br)}
#mia .sw-wrap.mon-on .tg-knob{transform:translateX(46px);background:var(--grn)}
#mia .sw-cap{margin-top:2rem;min-height:5.4rem;max-width:38ch}
#mia .sw-cap .st{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.5rem;color:#FF7A7A;transition:color .3s}
#mia .sw-wrap.mon-on .sw-cap .st{color:var(--grn)}
#mia .sw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
#mia .sw-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--txt2);line-height:1.55}
#mia .sw-list li s{text-decoration:none;width:7px;height:7px;border-radius:50%;background:#FF5555;flex-shrink:0;margin-top:.5rem;transition:background .35s}
#mia .sw-wrap.mon-on .sw-list li s{background:var(--grn)}

/* la web de muestra */
#mia .demo{background:var(--ink2);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .4s,box-shadow .4s}
#mia .sw-wrap.mon-on .demo{border-color:var(--grn-br);box-shadow:0 0 60px rgba(59,227,159,.09)}
#mia .demo-bar{background:var(--ink3);padding:.6rem .9rem;display:flex;align-items:center;gap:.4rem;border-bottom:1px solid var(--line)}
#mia .demo-url{flex:1;text-align:center;font-family:var(--mono);font-size:.62rem;color:var(--txt3);background:rgba(0,0,0,.28);border-radius:5px;padding:.22rem}
#mia .demo-alert{padding:.55rem .9rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  background:rgba(255,85,85,.1);color:#FF7A7A;border-bottom:1px solid rgba(255,85,85,.22);transition:all .4s}
#mia .sw-wrap.mon-on .demo-alert{background:var(--grn-dim);color:var(--grn);border-bottom-color:var(--grn-br)}
#mia .demo-b{padding:1.3rem}
#mia .demo-nav{display:flex;align-items:center;gap:.5rem;margin-bottom:1.4rem}
#mia .demo-logo{width:46px;height:9px;border-radius:2px;background:var(--amb)}
#mia .demo-nav .l{width:26px;height:5px;border-radius:2px;background:rgba(241,236,226,.16)}
#mia .demo-nav .cart{margin-left:auto;width:18px;height:18px;border-radius:5px;border:1px solid var(--line2)}
#mia .demo-h{height:13px;border-radius:3px;background:rgba(241,236,226,.75);width:64%;margin-bottom:.5rem}
#mia .demo-h.s{width:42%;height:8px;background:rgba(241,236,226,.28)}
#mia .demo-btn{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.1rem;border-radius:100px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(241,236,226,.1);color:var(--txt3);transition:all .4s}
#mia .sw-wrap.mon-on .demo-btn{background:var(--grn);color:var(--ink)}
#mia .demo-btn s{text-decoration:none;font-size:.6rem}
#mia .demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.3rem;align-items:start}
#mia .demo-card{transition:transform .45s cubic-bezier(.16,1,.3,1)}
#mia .demo-img{transition:height .45s cubic-bezier(.16,1,.3,1),opacity .4s,background .4s}
/* imagenes de distinto tamano = tienda descuadrada */
#mia .sw-wrap:not(.mon-on) .demo-card.d1{transform:translateY(20px)}
#mia .sw-wrap:not(.mon-on) .demo-card.d1 .demo-img{height:108px}
#mia .sw-wrap:not(.mon-on) .demo-card.d3 .demo-img{height:50px}
#mia .demo-card{border-radius:8px;overflow:hidden;border:1px solid var(--line)}
#mia .demo-img{height:70px;background:linear-gradient(135deg,rgba(255,122,69,.75),rgba(59,227,159,.4));position:relative;transition:opacity .4s}
#mia .demo-img.roto{background:rgba(241,236,226,.04);border:1px dashed rgba(255,85,85,.4)}
#mia .sw-wrap.mon-on .demo-img.roto{background:linear-gradient(135deg,rgba(255,122,69,.75),rgba(59,227,159,.4));border:0}
#mia .demo-img.roto::after{content:'?';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.8rem;color:rgba(255,85,85,.7)}
#mia .sw-wrap.mon-on .demo-img.roto::after{content:''}
#mia .demo-meta{padding:.5rem .55rem}
#mia .demo-m{height:5px;border-radius:2px;background:rgba(241,236,226,.2);margin-bottom:.3rem}
#mia .demo-m.p{width:52%;background:var(--amb)}
/* temblor sutil cuando esta roto */
#mia .demo{transition:filter .55s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s,transform .4s}
#mia .sw-wrap:not(.mon-on) .demo{animation:jit 4.5s infinite;filter:grayscale(.88) brightness(.68) contrast(.92)}
#mia .sw-wrap.mon-on .demo{filter:none}
#mia .chin{position:absolute;width:22px;height:22px;border-radius:50%;background:#FF5555;color:#fff;
  font-family:var(--mono);font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px rgba(255,85,85,.22);opacity:0;transform:scale(.5);transition:opacity .4s,transform .4s;z-index:4}
#mia .sw-wrap:not(.mon-on) .chin{opacity:1;transform:none}
#mia .chin::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(255,85,85,.5);
  animation:pulsoChin 2s infinite}
@keyframes pulsoChin{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.7);opacity:0}}
#mia .demo{position:relative}
#mia .demo-wrap{position:relative}
@keyframes jit{0%,97%,100%{transform:translate(0,0)}97.6%{transform:translate(-1px,1px)}98.4%{transform:translate(1px,-1px)}99.2%{transform:translate(-1px,0)}}
#mia .sw-wrap:not(.mon-on) .demo-btn{opacity:.55}

@media(max-width:900px){#mia .sw-grid{grid-template-columns:1fr;gap:2.5rem}#mia .sw-cap{min-height:0}}

/* SECCIONES */
#mia section{padding:8rem 0;position:relative;scroll-margin-top:2rem}
#mia .rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
#mia .rv.on{opacity:1;transform:none}

/* STATEMENT */
#mia .stmt h2{font-size:clamp(2.4rem,6.6vw,5.2rem);text-transform:uppercase;max-width:15ch}
#mia .stmt h2 .g{color:var(--grn)}
#mia .stmt .said{font-size:1.05rem;color:var(--txt2);max-width:50ch;margin:2.2rem 0 0;line-height:1.75}

/* SERVICIOS numerados */
#mia .svc{margin-top:4.5rem;border-top:1px solid var(--line)}
#mia .sv{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:2.5rem;align-items:center;padding:2.6rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--txt);overflow:hidden;transition:padding-left .45s cubic-bezier(.16,1,.3,1)}
#mia .sv:hover{padding-left:1.8rem}
#mia .sv::before{content:'';position:absolute;left:0;top:0;bottom:0;right:0;background:linear-gradient(90deg,rgba(59,227,159,.20),rgba(59,227,159,.05) 45%,transparent 78%);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1);pointer-events:none}
#mia .sv.a::before{background:linear-gradient(90deg,rgba(255,122,69,.24),rgba(255,122,69,.06) 45%,transparent 78%)}
#mia .sv:hover::before{transform:scaleX(1)}
#mia .sv>*{position:relative}
#mia .sv-n{font-family:var(--mono);font-size:.7rem;color:var(--txt3);transition:color .3s}
#mia .sv:hover .sv-n{color:var(--grn)}
#mia .sv.a:hover .sv-n{color:var(--amb)}
#mia .sv h3{font-size:clamp(1.8rem,4.4vw,3.4rem);text-transform:uppercase;transition:transform .45s cubic-bezier(.16,1,.3,1),color .35s}
#mia .sv:hover h3{color:var(--grn)}
#mia .sv.a:hover h3{color:var(--amb)}
#mia .sv p{font-size:.9rem;color:var(--txt2);margin:.6rem 0 0;max-width:46ch}
#mia .sv-arw{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .35s;color:var(--txt2)}
#mia .sv:hover .sv-arw{background:var(--grn);border-color:var(--grn);color:var(--ink);transform:rotate(-45deg)}
#mia .sv.a:hover .sv-arw{background:var(--amb);border-color:var(--amb)}
/* preview que sigue al mouse */

/* PROCESO horizontal */
#mia .proc{height:195vh;position:relative}
#mia .proc-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:0;overflow:hidden}
#mia .stmt{padding-bottom:1.5rem}
#mia .proc-head{padding:0 2.2rem;max-width:1180px;margin:0 auto 2rem;width:100%}
#mia .proc-head h2{font-size:clamp(2rem,5vw,3.6rem);text-transform:uppercase;margin-top:.8rem}
#mia .proc-track{display:flex;gap:1.4rem;padding:0 2.2rem;will-change:transform}
#mia .pc{flex:0 0 380px;background:var(--ink2);border:1px solid var(--line);border-radius:18px;padding:2rem;min-height:330px;display:flex;flex-direction:column}
#mia .pc-n{font-family:var(--disp);font-size:3.4rem;font-weight:800;color:var(--ink3);line-height:1;margin-bottom:1.6rem;-webkit-text-stroke:1px var(--grn-br)}
#mia .pc h4{font-family:var(--disp);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin:0 0 .6rem;text-transform:uppercase}
#mia .pc p{font-size:.9rem;color:var(--txt2);margin:0;line-height:1.7}

/* CTA */
#mia .cta{text-align:center;padding:4.5rem 0 4rem;border-top:1px solid var(--line)}
#mia .cta h2{font-size:clamp(2.8rem,8vw,6.4rem);text-transform:uppercase;margin-bottom:2.4rem}
#mia .mag{position:relative;display:inline-flex;align-items:center;gap:1rem;padding:1rem 1.2rem 1rem 2rem;border-radius:100px;
  border:1px solid var(--line2);color:var(--txt);font-weight:600;font-size:1rem;text-decoration:none;overflow:hidden;
  transition:border-color .35s,color .35s}
#mia .mag::before{content:'';position:absolute;inset:0;background:var(--grn);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);border-radius:100px}
#mia .mag span{position:relative;z-index:1;transition:color .35s}
#mia .mag i{position:relative;z-index:1;font-style:normal;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;transition:all .35s}
#mia .mag:hover{border-color:var(--grn)}
#mia .mag:hover::before{transform:scaleX(1)}
#mia .mag:hover span{color:var(--ink)}
#mia .mag:hover i{background:var(--ink);border-color:var(--ink);color:var(--grn);transform:rotate(-45deg)}
#mia footer{border-top:1px solid var(--line);padding:1.6rem 0}
#mia .f-in{max-width:1180px;margin:0 auto;padding:0 2.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
#mia .f-in small{color:var(--txt3);font-size:.75rem;font-family:var(--mono);letter-spacing:.08em}

@media(max-width:900px){
  #mia .wall{grid-template-columns:repeat(2,1fr)}
  #mia .sv{grid-template-columns:auto 1fr;gap:1rem 1.4rem}
  #mia .sv-arw{display:none}
  #mia .stage-foot{flex-direction:column;align-items:flex-start;gap:1.2rem}
}
@media(max-width:700px){
  #mia .wrap,#mia .f-in,#mia .proc-head{padding-left:1.3rem;padding-right:1.3rem}
  #mia nav{padding:1.1rem 1.3rem}
  #mia section{padding:4.5rem 0}
  #mia .stage-foot{padding:0 1.3rem 1.6rem}
  #mia .proc{height:auto}
  #mia .proc-pin{position:static;height:auto;padding:1rem 0}
  #mia .proc-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;transform:none!important}
  #mia .pc{flex:0 0 82vw;scroll-snap-align:center;min-height:280px}
}
@media(prefers-reduced-motion:reduce){
  #mia *{animation:none!important;transition:none!important}
  #mia .rv{opacity:1;transform:none}
  #mia h1 .ln>span{transform:none}
  #mia .kick,#mia .stage-foot{opacity:1}
  #mia .wall-lit{-webkit-mask-image:none;mask-image:none;opacity:.5}
}