:root{
  --primary:#005EFF;
  --primary2:#2F7BFF;
  --wa:#25D366;
  --bg:#F5F7FB;
  --card:#FFFFFF;
  --surface:rgba(255,255,255,.76);
  --text:#0B1220;
  --muted:#607087;
  --line:rgba(15,23,42,.10);
  --shadow:0 24px 80px rgba(0,35,92,.13);
  --shadow-soft:0 14px 40px rgba(0,35,92,.09);
  --radius:30px;
  --max:1220px;
}
body.dark{
  --bg:#05070D;
  --card:#0F172A;
  --surface:rgba(15,23,42,.72);
  --text:#F8FAFC;
  --muted:#A9B6CC;
  --line:rgba(255,255,255,.13);
  --shadow:0 28px 90px rgba(0,0,0,.40);
  --shadow-soft:0 18px 45px rgba(0,0,0,.26);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 8%,rgba(0,94,255,.18),transparent 28rem),
    radial-gradient(circle at 88% 6%,rgba(37,211,102,.12),transparent 24rem),
    linear-gradient(135deg,var(--bg),color-mix(in srgb,var(--bg) 75%,#fff));
  overflow-x:hidden;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.noise{position:fixed;inset:0;pointer-events:none;z-index:-4;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.orb{position:fixed;border-radius:999px;filter:blur(56px);opacity:.34;z-index:-3;pointer-events:none;animation:orb 12s ease-in-out infinite alternate}
.orb-a{width:340px;height:340px;background:var(--primary);left:-130px;top:80px}.orb-b{width:300px;height:300px;background:var(--wa);right:-120px;top:30px;animation-delay:-4s}
.cursor-light{position:fixed;left:0;top:0;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(0,94,255,.18),rgba(37,211,102,.08) 36%,transparent 68%);z-index:-2;pointer-events:none;filter:blur(8px);transform:translate(-50%,-50%)}
@keyframes orb{to{transform:translate3d(26px,-20px,0) scale(1.08)}}

/* HEADER FULL WIDTH */
.site-header{
  position:sticky;top:0;z-index:120;
  width:100%;
  min-height:82px;
  display:grid;
  grid-template-columns:170px 1fr auto;
  align-items:center;
  gap:16px;
  padding:12px clamp(16px,4.6vw,76px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(22px);
}
.scroll-line{position:absolute;left:0;bottom:-1px;width:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--wa),var(--primary2));box-shadow:0 0 18px rgba(0,94,255,.55)}
.brand{display:flex;align-items:center;min-width:0;height:54px}
.logo-img{width:auto;max-width:150px;max-height:52px;object-fit:contain}
.logo-fallback{display:none;font-weight:900;color:var(--primary);font-size:1.25rem}
.logo-img[style*="display: none"] + .logo-fallback{display:block}
.main-nav{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:6px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-soft)
}
.nav-link,.dropdown-trigger{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 13px;border-radius:999px;
  color:var(--muted);font-weight:900;font-size:.9rem;
  transition:.24s ease;
}
.nav-link:hover,.nav-link.active,.dropdown-trigger:hover,.dropdown-trigger.active{color:var(--primary);background:rgba(0,94,255,.08)}
.nav-dropdown{position:relative}
.dropdown-panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  width:310px;max-height:min(70vh,520px);overflow:auto;
  padding:10px;border-radius:22px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(24px);
  opacity:0;visibility:hidden;pointer-events:none;transition:.22s ease;
}
.nav-dropdown.open .dropdown-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dropdown-item{
  display:block;width:100%;
  text-align:left;
  padding:13px 14px;border-radius:14px;
  color:var(--text);font-weight:900;background:transparent;
  border:1px solid transparent;transition:.2s ease;
}
.dropdown-item:hover{background:linear-gradient(90deg,rgba(0,94,255,.10),transparent);border-color:rgba(0,94,255,.18);color:var(--primary);transform:translateX(4px)}
.dropdown-item.all-systems{background:rgba(0,94,255,.10);color:var(--primary)}
.header-actions{display:flex;align-items:center;gap:10px}
.round-btn,.mobile-toggle{
  width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--text);box-shadow:var(--shadow-soft)
}
.mobile-toggle{display:none;gap:4px;flex-direction:column}.mobile-toggle span{width:18px;height:2px;background:currentColor;border-radius:999px}

/* BUTTONS */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 18px;border-radius:999px;font-weight:950;white-space:nowrap;
  transition:.25s ease;border:1px solid transparent
}
.btn::after{content:"";position:absolute;inset:-140% auto auto -60%;width:45%;height:300%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:rotate(28deg);transition:.48s ease}
.btn:hover::after{left:125%}.btn:hover{transform:translateY(-3px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 18px 38px rgba(0,94,255,.26)}
.btn-whatsapp{background:linear-gradient(135deg,var(--wa),#18B957);color:#fff;box-shadow:0 18px 38px rgba(37,211,102,.24)}
.btn-soft{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:var(--shadow-soft)}

/* LAYOUT */
.stage,.global-contact,.site-footer{max-width:var(--max);margin:0 auto;padding-left:20px;padding-right:20px}
.page,.service-page{display:none;animation:pageIn .38s ease both}.page.active,.service-page.active{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(18px);transition:.65s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.14s}
.eyebrow{margin:0 0 14px;color:var(--primary);font-weight:950;letter-spacing:.12em;font-size:.78rem}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2.7rem,6.2vw,5.75rem);line-height:.92;letter-spacing:-.075em;margin-bottom:22px}
h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.02;letter-spacing:-.055em;margin-bottom:16px}
p{color:var(--muted);line-height:1.7}
.hero{min-height:calc(100vh - 98px);display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center;padding:48px 0 34px}
.hero h1 span{background:linear-gradient(135deg,var(--primary),var(--wa));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text{font-size:1.12rem;max-width:690px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}
.hero-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:610px}.hero-kpis article{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow-soft)}.hero-kpis strong{font-size:1.7rem;color:var(--primary);display:block}.hero-kpis span{font-weight:800;color:var(--muted);font-size:.86rem}
.hero-visual{position:relative;min-height:640px;display:grid;place-items:center}
.floating-card{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft);font-weight:900;color:var(--text);animation:floatY 4.8s ease-in-out infinite}.floating-card i{color:var(--primary)}.card-1{top:30px;right:50px}.card-2{left:10px;bottom:70px;animation-delay:-1.4s}.card-3{right:0;bottom:180px;animation-delay:-2.3s}
.dashboard-panel{position:absolute;left:0;top:70px;width:360px;padding:18px;border-radius:30px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(20px);transform:rotate(-4deg);animation:floatY 5.2s ease-in-out infinite}
.panel-top{display:flex;gap:7px;align-items:center;margin-bottom:16px}.panel-top span{width:10px;height:10px;border-radius:999px;background:var(--line)}.panel-top b{margin-left:auto;color:var(--muted);font-size:.82rem}.live-bars{height:190px;display:flex;align-items:end;gap:14px;padding:20px;border-radius:24px;background:linear-gradient(180deg,rgba(0,94,255,.08),rgba(37,211,102,.08))}.live-bars i{flex:1;height:var(--h);border-radius:999px;background:linear-gradient(180deg,var(--primary),#9ec2ff);animation:barPulse 2.6s ease-in-out infinite alternate}.live-bars i:nth-child(even){background:linear-gradient(180deg,var(--wa),#A7F3C0);animation-delay:.35s}.live-status{display:flex;align-items:center;gap:9px;margin-top:14px;font-weight:900}.live-status span{width:12px;height:12px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:pulse 1.8s infinite}
.phone-mock{position:relative;z-index:3;width:325px;min-height:575px;padding:18px;border-radius:44px;background:linear-gradient(180deg,#111827,#050505);border:10px solid #080808;color:#fff;box-shadow:0 30px 90px rgba(0,0,0,.42);animation:phoneFloat 5.8s ease-in-out infinite}
.phone-notch{width:80px;height:6px;background:#303744;border-radius:999px;margin:0 auto 16px}.phone-head{height:48px;border-radius:18px;background:rgba(255,255,255,.08);display:flex;align-items:center;gap:9px;padding:0 13px;margin-bottom:12px}.phone-head i{color:var(--wa);font-size:1.25rem}.phone-head small{margin-left:auto;color:#9CA3AF}.phone-feed{display:flex;flex-direction:column;gap:10px;max-height:470px;overflow:hidden}.bubble{max-width:84%;padding:11px 13px;border-radius:18px;font-size:.87rem;line-height:1.35;animation:bubbleIn .38s ease}.bubble.client{align-self:flex-start;background:#F3F4F6;color:#111827;border-bottom-left-radius:6px}.bubble.bot{align-self:flex-end;background:linear-gradient(135deg,var(--wa),#10bd5a);color:#fff;border-bottom-right-radius:6px}.bubble.typing{display:flex;gap:4px;width:56px}.bubble.typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;animation:typing 1s infinite}.bubble.typing i:nth-child(2){animation-delay:.2s}.bubble.typing i:nth-child(3){animation-delay:.4s}
@keyframes floatY{50%{transform:translateY(-12px)}}@keyframes phoneFloat{50%{transform:translateY(-10px) rotate(1deg)}}@keyframes barPulse{to{transform:scaleY(.92);filter:brightness(1.14)}}@keyframes pulse{70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}@keyframes bubbleIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}@keyframes typing{50%{transform:translateY(-4px)}}

/* BLOCKS AND CARDS */
.section-block{padding:68px 0}.section-head{margin-bottom:26px}.section-head.center{text-align:center;max-width:780px;margin-left:auto;margin-right:auto}.split{display:grid;grid-template-columns:.86fr 1.14fr;gap:32px;align-items:center}
.systems-preview,.systems-grid,.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.system-card,.pricing-card,.contact-card,.contact-form,.dygi-card,.process-ui,.map-card,.city-list article,.quick-contact a,.service-hero,.info-card,.demo-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(22px)}
.system-card{position:relative;overflow:hidden;padding:22px;transition:.28s ease;isolation:isolate}.system-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,20%),rgba(0,94,255,.18),transparent 42%);opacity:0;transition:.22s ease;z-index:-1}.system-card:hover{transform:translateY(-7px) scale(1.01);border-color:rgba(0,94,255,.38)}.system-card:hover::before{opacity:1}.system-icon{width:52px;height:52px;border-radius:19px;display:grid;place-items:center;background:rgba(0,94,255,.10);color:var(--primary);font-size:1.35rem;margin-bottom:14px;transition:.25s ease}.system-card:hover .system-icon{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 18px 40px rgba(0,94,255,.25);transform:rotate(-4deg) scale(1.06)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.tag{font-size:.72rem;font-weight:950;color:var(--primary);padding:7px 9px;border-radius:999px;background:rgba(0,94,255,.10)}.card-actions{display:flex;flex-wrap:wrap;gap:9px}.card-actions .btn{padding:11px 14px;font-size:.86rem}
.page-hero{padding:66px 0 26px;max-width:860px}.page-hero h1{font-size:clamp(2.4rem,5vw,4.6rem)}
.logo-marquee{overflow:hidden;border-radius:26px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-soft)}.logo-track{display:flex;width:max-content;animation:marquee 26s linear infinite}.logo-item{position:relative;overflow:hidden;width:190px;height:94px;margin:12px;border-radius:22px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font-weight:950}.logo-item img{width:132px;height:58px;object-fit:contain}.logo-item::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,rgba(0,94,255,.08),transparent);transform:translateX(-100%);animation:shine 3.8s infinite}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes shine{70%,100%{transform:translateX(100%)}}

/* DYGI */
.dygi-card{padding:24px;position:relative;overflow:hidden}.dygi-card.big{min-height:380px}.dygi-progress{height:9px;background:rgba(0,94,255,.10);border-radius:999px;margin:14px 0 20px;overflow:hidden}.dygi-progress span{display:block;height:100%;width:var(--p);border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--wa));transition:.3s ease}.dygi-question{font-size:1.25rem;color:var(--text);font-weight:950;margin-bottom:14px}.dygi-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.dygi-option{padding:15px;border-radius:18px;background:var(--card);border:1px solid var(--line);font-weight:850;text-align:left;transition:.22s ease}.dygi-option:hover{transform:translateY(-3px);border-color:rgba(0,94,255,.42);box-shadow:var(--shadow-soft)}.dygi-actions{display:flex;flex-wrap:wrap;gap:10px}.dygi-reset{color:var(--primary);font-weight:950}
.dygi-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px;align-items:center;padding-bottom:62px}.dygi-orbit{height:410px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);position:relative;display:grid;place-items:center;overflow:hidden}.orbit-core{width:104px;height:104px;border-radius:34px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--wa));color:#fff;font-weight:950;box-shadow:0 20px 50px rgba(0,94,255,.28);z-index:2}.dygi-orbit span{position:absolute;width:58px;height:46px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft);display:grid;place-items:center;color:var(--primary);font-weight:950;animation:orbit 16s linear infinite}.dygi-orbit span:nth-child(2){animation-delay:0s}.dygi-orbit span:nth-child(3){animation-delay:-3.2s}.dygi-orbit span:nth-child(4){animation-delay:-6.4s}.dygi-orbit span:nth-child(5){animation-delay:-9.6s}.dygi-orbit span:nth-child(6){animation-delay:-12.8s}@keyframes orbit{from{transform:rotate(0) translateX(145px) rotate(0)}to{transform:rotate(360deg) translateX(145px) rotate(-360deg)}}

/* SERVICE PAGES */
.service-page{padding-bottom:68px}.service-hero{display:grid;grid-template-columns:.94fr 1.06fr;gap:28px;align-items:center;padding:32px;margin-top:28px}.service-copy h1{font-size:clamp(2.3rem,5vw,4.8rem)}.service-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.service-details{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;margin-top:20px}.info-card{padding:22px}.info-card ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}.info-card li{display:flex;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--line)}.info-card li::before{content:"✓";color:var(--primary);font-weight:950}.demo-card{padding:20px;overflow:hidden}.demo-stage{min-height:360px;border-radius:24px;background:linear-gradient(135deg,rgba(0,94,255,.08),rgba(37,211,102,.08));display:grid;place-items:center;padding:16px}.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.flow span{padding:14px 10px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:center;font-weight:850;font-size:.84rem;animation:floatStep 4s ease-in-out infinite}.flow span:nth-child(2){animation-delay:.25s}.flow span:nth-child(3){animation-delay:.5s}.flow span:nth-child(4){animation-delay:.75s}.flow span:nth-child(5){animation-delay:1s}@keyframes floatStep{50%{transform:translateY(-6px)}}

/* DEMOS */
.demo-whatsapp{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}.wa-mini{position:relative;padding:16px;border-radius:20px;background:color-mix(in srgb,var(--wa) 10%,var(--card));border:1px solid color-mix(in srgb,var(--wa) 24%,var(--line));overflow:hidden}.wa-mini b{color:var(--wa)}.wa-mini i{display:block;height:11px;border-radius:999px;background:rgba(37,211,102,.28);margin:9px 0;animation:typingLine 2.2s infinite}.wa-mini i:nth-child(3){width:76%}.wa-mini i:nth-child(4){width:60%}@keyframes typingLine{50%{width:62%}}
.demo-pos,.demo-store,.demo-pay,.demo-mobile{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.demo-box,.app-side{padding:18px;border-radius:22px;background:var(--card);border:1px solid var(--line)}.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.product-grid span{height:72px;border-radius:16px;background:linear-gradient(135deg,rgba(0,94,255,.12),rgba(37,211,102,.08));border:1px solid var(--line)}.scan{height:8px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--primary),transparent);animation:scan 2.4s linear infinite;margin:16px 0}@keyframes scan{to{transform:translateX(110%)}}
.demo-crm{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}.pipeline{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px}.lead{padding:10px;border-radius:12px;background:var(--surface);margin-top:8px;animation:floatStep 4s infinite}
.demo-erp{display:grid;place-items:center;position:relative;min-height:330px;width:100%}.erp-core{width:132px;height:132px;border-radius:30px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;display:grid;place-items:center;font-weight:950;box-shadow:0 20px 50px rgba(0,94,255,.25)}.erp-node{position:absolute;padding:13px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft);font-weight:900}.erp-node.n1{top:4px}.erp-node.n2{right:4%;top:38%}.erp-node.n3{right:20%;bottom:8px}.erp-node.n4{left:20%;bottom:8px}.erp-node.n5{left:4%;top:38%}
.demo-custom{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}.module{padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--line)}.pay-method{padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-top:10px;font-weight:900;animation:payGlow 3s infinite}@keyframes payGlow{50%{outline:2px solid rgba(0,94,255,.25)}}
.auto-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%}.auto-flow span{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:center;font-weight:900;animation:floatStep 3.5s infinite}
.app-phone{width:215px;margin:auto;background:#07152D;color:#fff;border-radius:32px;padding:12px;box-shadow:0 18px 55px rgba(0,0,0,.26)}.app-screen{background:#102545;border-radius:20px;padding:14px;min-height:245px;position:relative}.app-line{height:42px;border-radius:13px;background:#1D3967;margin:9px 0}.offline{position:absolute;left:14px;bottom:14px;padding:8px 10px;border-radius:999px;background:#F59E0B;color:#231200;font-weight:950;animation:offline 4s infinite}@keyframes offline{0%,45%{background:#25D366;color:#052e16}50%,95%{background:#F59E0B;color:#231200}100%{background:#25D366;color:#052e16}}

/* OTHER SECTIONS */
.process-ui{padding:20px;margin-bottom:62px}.process-nav{display:flex;gap:10px;overflow-x:auto;padding-bottom:12px}.process-tab{flex:0 0 auto;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);font-weight:950}.process-tab.active{background:var(--primary);color:#fff}.process-card{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px}.process-number{width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,var(--primary),var(--primary2));display:grid;place-items:center;color:#fff;font-weight:950;font-size:1.45rem}
.mexico-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;padding-bottom:62px}.map-card{position:relative;min-height:420px;overflow:hidden}.map-card::before{content:"";position:absolute;inset:44px;border:2px dashed rgba(0,94,255,.25);border-radius:48% 52% 44% 56%;transform:rotate(-12deg)}.map-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:22px 26px;border-radius:22px;background:var(--card);box-shadow:var(--shadow-soft);font-weight:950;color:var(--primary);text-align:center}.city{position:absolute;padding:8px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft);font-weight:900;font-size:.83rem}.c1{left:34%;top:55%}.c2{left:55%;top:28%}.c3{left:12%;top:22%}.c4{right:12%;top:52%}.c5{right:20%;top:41%}.city-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-content:center}.city-list article{padding:22px;font-weight:950;color:var(--primary)}
.pricing-card{padding:22px}.price{font-size:1.75rem;font-weight:950;color:var(--primary);margin:10px 0}.quick-contact{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding-bottom:62px}.quick-contact a{padding:20px;font-weight:950;display:flex;align-items:center;gap:12px}

/* FORM */
.global-contact{padding-top:30px;padding-bottom:20px}.contact-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:22px}.contact-card,.contact-form{padding:24px}.contact-icon{width:70px;height:70px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--wa));color:#fff;font-size:1.6rem;box-shadow:0 18px 45px rgba(0,94,255,.22)}.mini-note{padding:14px;border-radius:16px;background:var(--card);font-weight:900;color:var(--primary)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid label{display:grid;gap:7px;font-weight:850}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:13px 14px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--text)}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:2px solid rgba(0,94,255,.25);border-color:var(--primary)}.send-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.send-options p{grid-column:1/-1;margin:0;font-weight:950}.method-card{padding:15px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-align:left;display:grid;gap:6px;transition:.22s ease}.method-card:hover,.method-card.active{transform:translateY(-3px);border-color:rgba(0,94,255,.38);box-shadow:var(--shadow-soft)}.method-card i{color:var(--primary);font-size:1.25rem}.form-submit{width:100%}.form-message{min-height:24px;font-weight:850;color:var(--muted)}.form-message.success{color:var(--wa)}.form-message.error{color:#EF4444}
.site-footer{padding:26px 20px 40px}.footer-grid{display:grid;grid-template-columns:1.25fr .75fr 1fr;gap:24px;padding:28px;border-radius:30px;background:#05070D;color:#fff;box-shadow:var(--shadow)}.footer-logo{width:auto;max-width:150px;max-height:56px;object-fit:contain;margin-bottom:14px}.footer-grid p,.footer-grid a,.footer-link{color:#B8C3D7}.footer-link{display:block;text-align:left;margin:8px 0}
.floating-wa{position:fixed;right:22px;bottom:22px;z-index:130;height:60px;padding:0 18px;border-radius:999px;background:linear-gradient(135deg,var(--wa),#18B957);color:#fff;display:flex;align-items:center;gap:10px;font-weight:950;box-shadow:0 18px 42px rgba(37,211,102,.35);animation:waPulse 1.8s infinite}.floating-wa i{font-size:1.55rem}.floating-wa:hover{transform:translateY(-4px) scale(1.02)}@keyframes waPulse{50%{box-shadow:0 18px 42px rgba(37,211,102,.32),0 0 0 16px rgba(37,211,102,.08)}}

@media(max-width:1080px){
  .site-header{grid-template-columns:auto auto 1fr;padding-inline:14px}.mobile-toggle{display:flex;grid-column:3;justify-self:end}.main-nav{position:absolute;left:12px;right:12px;top:calc(100% + 10px);display:none;flex-direction:column;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:12px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.nav-link,.dropdown-trigger{justify-content:space-between}.dropdown-panel{position:static;transform:none!important;width:100%;max-height:340px;box-shadow:none;background:var(--surface);margin-top:8px;display:none;opacity:1;visibility:visible;pointer-events:auto}.nav-dropdown.open .dropdown-panel{display:block}.header-actions{grid-column:1/-1;justify-content:space-between}.header-cta{flex:1}.hero,.split,.dygi-layout,.service-hero,.service-details,.mexico-layout,.contact-layout{grid-template-columns:1fr}.hero-visual{min-height:590px}.systems-preview,.systems-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}.demo-whatsapp,.demo-crm,.demo-custom,.auto-flow,.flow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .stage,.global-contact,.site-footer{padding-left:14px;padding-right:14px}.site-header{min-height:74px}.logo-img{max-width:132px;max-height:46px}.header-cta span{display:none}.hero{padding-top:32px}.hero h1{font-size:clamp(2.36rem,14vw,3.8rem)}h2{font-size:clamp(1.8rem,9vw,2.6rem)}.hero-visual{min-height:520px}.dashboard-panel{width:280px;left:0;top:30px}.phone-mock{width:278px;min-height:520px}.floating-card{font-size:.77rem}.card-1{right:4px}.card-2{left:0;bottom:36px}.card-3{right:0;bottom:120px}.hero-kpis,.systems-preview,.systems-grid,.pricing-grid,.dygi-options,.form-grid,.send-options,.quick-contact,.city-list,.footer-grid,.demo-whatsapp,.demo-pos,.demo-store,.demo-pay,.demo-mobile,.demo-crm,.demo-custom,.auto-flow,.flow{grid-template-columns:1fr}.service-hero,.section-block{padding-top:28px}.demo-stage{min-height:auto}.process-card{grid-template-columns:1fr}.map-card{min-height:360px}.floating-wa{width:60px;padding:0;justify-content:center}.floating-wa span{display:none}.cursor-light{display:none}
}


/* =========================
   V8: PROCESS + MEXICO + AI PHONES
========================= */

/* Proceso más moderno y contenido dentro de la pestaña */
.process-ui{
  padding:22px;
  margin-bottom:62px;
  overflow:hidden;
}
.process-v8-layout{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:18px;
  align-items:stretch;
}
.process-console{
  position:relative;
  min-height:430px;
  border-radius:28px;
  padding:20px;
  background:
    radial-gradient(circle at 20% 8%,rgba(0,94,255,.18),transparent 42%),
    linear-gradient(145deg,color-mix(in srgb,var(--card) 88%,transparent),color-mix(in srgb,var(--surface) 86%,transparent));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.process-console::before{
  content:"";
  position:absolute;
  inset:42px;
  border:1px dashed rgba(0,94,255,.20);
  border-radius:34px;
}
.console-header{
  display:flex;
  align-items:center;
  gap:7px;
  position:relative;
  z-index:2;
}
.console-header span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--line);
}
.console-header span:first-child{background:#FF5C7A}
.console-header span:nth-child(2){background:#FFD166}
.console-header span:nth-child(3){background:#25D366}
.console-header b{
  margin-left:auto;
  color:var(--muted);
  font-size:.82rem;
}
.process-meter{
  position:relative;
  z-index:2;
  height:10px;
  border-radius:999px;
  background:rgba(0,94,255,.10);
  overflow:hidden;
  margin:26px 0;
}
.process-meter i{
  display:block;
  height:100%;
  width:16.66%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--wa));
  transition:.35s ease;
}
.process-stage-preview{
  position:relative;
  z-index:2;
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.process-stage-preview i{
  width:76px;
  height:76px;
  border-radius:24px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 20px 48px rgba(0,94,255,.25);
  font-size:1.8rem;
  margin-bottom:18px;
  animation:processFloat 4s ease-in-out infinite;
}
.process-stage-preview h3{
  font-size:clamp(1.7rem,3vw,2.4rem);
  margin-bottom:8px;
}
.process-stage-preview p{
  max-width:430px;
}
.process-list{
  display:grid;
  gap:10px;
}
.process-item{
  width:100%;
  display:grid;
  grid-template-columns:54px 48px 1fr;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line);
  text-align:left;
  box-shadow:var(--shadow-soft);
  transition:.22s ease;
}
.process-item span{
  font-weight:950;
  color:var(--primary);
}
.process-item > i{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(0,94,255,.10);
  color:var(--primary);
  transition:.22s ease;
}
.process-item b{
  display:block;
  margin-bottom:3px;
}
.process-item small{
  display:block;
  color:var(--muted);
  line-height:1.35;
}
.process-item:hover,.process-item.active{
  transform:translateX(4px);
  border-color:rgba(0,94,255,.34);
  background:linear-gradient(90deg,rgba(0,94,255,.10),var(--card));
}
.process-item.active > i{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  box-shadow:0 15px 30px rgba(0,94,255,.20);
}
@keyframes processFloat{50%{transform:translateY(-8px) rotate(2deg)}}

/* Presencia en México más estructurada */
.mexico-v8{
  grid-template-columns:1.05fr .95fr;
  align-items:stretch;
}
.mexico-map-panel,.presence-dashboard{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px);
}
.mexico-map-panel{
  position:relative;
  min-height:460px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,94,255,.16),transparent 42%),
    linear-gradient(145deg,color-mix(in srgb,var(--card) 88%,transparent),color-mix(in srgb,var(--surface) 92%,transparent));
}
.map-ring{
  position:absolute;
  border-radius:50%;
  border:1px dashed rgba(0,94,255,.22);
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  animation:spinMap 24s linear infinite;
}
.ring-1{width:280px;height:280px}
.ring-2{width:390px;height:390px;animation-direction:reverse}
.mexico-v8 .map-core{
  display:grid;
  gap:2px;
  min-width:150px;
  z-index:3;
}
.mexico-v8 .map-core strong{
  color:var(--primary);
  letter-spacing:.04em;
}
.city-pin{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  color:var(--text);
  font-weight:950;
  font-size:.82rem;
  transition:.22s ease;
}
.city-pin span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--wa);
  box-shadow:0 0 0 7px rgba(37,211,102,.12);
}
.city-pin:hover{
  transform:translateY(-4px) scale(1.03);
  border-color:rgba(0,94,255,.35);
  color:var(--primary);
}
.pin-gdl{left:30%;top:57%}
.pin-mty{left:55%;top:26%}
.pin-tij{left:11%;top:23%}
.pin-cun{right:9%;top:54%}
.pin-mer{right:17%;top:42%}
.route-line{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  opacity:.32;
  transform-origin:left center;
}
.route-a{width:270px;left:31%;top:59%;transform:rotate(-28deg)}
.route-b{width:250px;left:45%;top:50%;transform:rotate(-7deg)}
.route-c{width:230px;left:20%;top:35%;transform:rotate(22deg)}
.presence-dashboard{
  padding:20px;
  display:grid;
  gap:14px;
}
.presence-main-card{
  padding:22px;
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0,rgba(0,94,255,.16),transparent 42%),
    var(--card);
  border:1px solid var(--line);
}
.presence-main-card h3{
  font-size:clamp(1.5rem,3vw,2rem);
  margin-bottom:8px;
}
.presence-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.presence-cards article{
  padding:16px;
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line);
  transition:.22s ease;
}
.presence-cards article:hover{
  transform:translateY(-4px);
  border-color:rgba(0,94,255,.34);
  box-shadow:var(--shadow-soft);
}
.presence-cards b{
  display:block;
  color:var(--primary);
  margin-bottom:4px;
}
.presence-cards span{
  color:var(--muted);
  font-size:.88rem;
}
@keyframes spinMap{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Asistente IA: dos celulares vendiendo y agendando */
.demo-ai-phones{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:center;
}
.ai-phone{
  position:relative;
  min-height:390px;
  border-radius:34px;
  padding:14px;
  background:linear-gradient(180deg,#111827,#050505);
  color:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
  border:8px solid #090909;
  overflow:hidden;
}
.ai-phone-top{
  width:78px;
  height:7px;
  border-radius:999px;
  background:#303744;
  margin:0 auto 12px;
}
.ai-phone-head{
  height:44px;
  border-radius:17px;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  margin-bottom:12px;
}
.ai-phone-head i{color:var(--wa)}
.ai-chat{
  display:grid;
  gap:10px;
}
.ai-chat p{
  max-width:88%;
  margin:0;
  padding:10px 12px;
  border-radius:16px;
  font-size:.82rem;
  line-height:1.35;
  color:#fff;
  animation:bubbleIn .5s ease both;
}
.ai-chat .client{
  justify-self:start;
  background:#F3F4F6;
  color:#111827;
  border-bottom-left-radius:5px;
}
.ai-chat .bot{
  justify-self:end;
  background:linear-gradient(135deg,var(--wa),#10bd5a);
  border-bottom-right-radius:5px;
}
.ai-chat .pay,.ai-chat .calendar{
  box-shadow:0 0 0 6px rgba(37,211,102,.10);
}
.phone-status{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  padding:10px;
  border-radius:16px;
  text-align:center;
  background:rgba(255,255,255,.08);
  color:#dbeafe;
  font-weight:950;
}
.sale-phone{animation:phoneFloat 5.4s ease-in-out infinite}
.schedule-phone{animation:phoneFloat 5.4s ease-in-out infinite reverse}
@media(max-width:1080px){
  .process-v8-layout,.mexico-v8{grid-template-columns:1fr}
  .process-console{min-height:340px}
  .mexico-map-panel{min-height:420px}
}
@media(max-width:720px){
  .process-ui{padding:16px}
  .process-v8-layout{gap:14px}
  .process-console{min-height:320px}
  .process-item{grid-template-columns:44px 42px 1fr;padding:12px}
  .process-item > i{width:42px;height:42px}
  .presence-cards,.demo-ai-phones{grid-template-columns:1fr}
  .mexico-map-panel{min-height:390px}
  .city-pin{font-size:.75rem;padding:8px 10px}
  .pin-tij{left:5%;top:21%}
  .pin-mty{left:50%;top:25%}
  .pin-gdl{left:24%;top:58%}
  .pin-cun{right:4%;top:55%}
  .pin-mer{right:10%;top:43%}
  .route-line{display:none}
  .ai-phone{min-height:350px}
}


/* =========================
   V9: compact menu + ES/EN + dark default
========================= */
.site-header{
  grid-template-columns:minmax(92px,138px) minmax(0,auto) auto;
  justify-content:center;
  column-gap:12px;
  padding-inline:clamp(12px,3vw,42px);
}
.brand{
  justify-self:start;
  width:auto;
  max-width:138px;
  overflow:hidden;
}
.logo-img{
  max-width:130px;
  max-height:48px;
}
.main-nav{
  justify-self:center;
  width:auto;
  max-width:max-content;
  padding:4px;
  gap:2px;
}
.nav-link,.dropdown-trigger{
  padding:10px 11px;
  font-size:.84rem;
}
.header-actions{
  justify-self:end;
}
.round-btn.lang-toggle{
  width:auto;
  min-width:44px;
  padding:0 12px;
  font-weight:950;
  letter-spacing:.03em;
}
.dropdown-panel{
  width:286px;
}
.header-cta{
  padding-inline:15px;
}
body.dark .main-nav{
  background:rgba(15,23,42,.72);
}
body.dark .site-header{
  background:rgba(5,7,13,.88);
}
@media(max-width:1080px){
  .site-header{
    grid-template-columns:auto 1fr auto;
  }
  .brand{
    max-width:132px;
  }
  .main-nav{
    max-width:none;
    width:auto;
  }
  .header-actions{
    grid-column:auto;
    justify-content:end;
  }
}
@media(max-width:720px){
  .site-header{
    grid-template-columns:1fr auto auto;
  }
  .logo-img{
    max-width:118px;
  }
  .round-btn.lang-toggle{
    min-width:40px;
    height:40px;
  }
  .header-actions{
    gap:7px;
  }
}


/* =========================
   V10: logo slots + modern system demos
========================= */

/* Logo inside hero chatbot */
.phone-logo{
  width:28px;
  height:28px;
  object-fit:contain;
  border-radius:8px;
}
.phone-fallback-icon{
  display:inline-flex;
}

/* DYGI orbit logo */
.orbit-core{
  overflow:hidden;
  padding:10px;
}
.orbit-logo{
  width:100%;
  max-width:76px;
  max-height:76px;
  object-fit:contain;
}
.orbit-fallback{
  display:none;
}

/* Contact logo replacing robot if available */
.contact-icon{
  overflow:hidden;
  padding:10px;
}
.contact-logo{
  width:100%;
  height:100%;
  object-fit:contain;
}
.contact-fallback-icon{
  display:grid;
}

/* Footer white logo support */
.footer-logo{
  object-fit:contain;
}

/* Shared demo state */
.cycle-item{
  transition:.28s ease;
}
.cycle-item.active{
  transform:translateY(-4px) scale(1.035);
  outline:2px solid rgba(37,211,102,.38);
  box-shadow:0 16px 36px rgba(0,94,255,.18);
}

/* AI two phones refinement */
.demo-ai-phones{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:center;
}
.ai-phone{
  position:relative;
  min-height:390px;
  border-radius:34px;
  padding:14px;
  background:linear-gradient(180deg,#111827,#050505);
  color:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
  border:8px solid #090909;
  overflow:hidden;
}
.ai-phone-top{
  width:78px;
  height:7px;
  border-radius:999px;
  background:#303744;
  margin:0 auto 12px;
}
.ai-phone-head{
  height:44px;
  border-radius:17px;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  margin-bottom:12px;
}
.ai-phone-head i{color:var(--wa)}
.ai-chat{display:grid;gap:10px}
.ai-chat p{
  max-width:88%;
  margin:0;
  padding:10px 12px;
  border-radius:16px;
  font-size:.82rem;
  line-height:1.35;
  color:#fff;
  animation:bubbleIn .5s ease both;
}
.ai-chat .client{
  justify-self:start;
  background:#F3F4F6;
  color:#111827;
  border-bottom-left-radius:5px;
}
.ai-chat .bot{
  justify-self:end;
  background:linear-gradient(135deg,var(--wa),#10bd5a);
  border-bottom-right-radius:5px;
}
.phone-status{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  padding:10px;
  border-radius:16px;
  text-align:center;
  background:rgba(255,255,255,.08);
  color:#dbeafe;
  font-weight:950;
}
.sale-phone{animation:phoneFloat 5.4s ease-in-out infinite}
.schedule-phone{animation:phoneFloat 5.4s ease-in-out infinite reverse}

/* Modern POS */
.demo-pos-modern{
  width:100%;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}
.pos-screen,.pos-terminal{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  box-shadow:var(--shadow-soft);
}
.pos-top{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
}
.pos-top span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--line);
}
.pos-top b{margin-left:auto;color:var(--muted);font-size:.78rem}
.pos-products{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.pos-products button{
  min-height:74px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(0,94,255,.10),rgba(37,211,102,.07));
  border:1px solid var(--line);
  color:var(--text);
  font-weight:900;
  padding:12px;
  text-align:left;
}
.pos-products b{
  display:block;
  color:var(--primary);
  margin-top:6px;
}
.pos-cart{
  margin-top:12px;
  border-radius:18px;
  background:var(--surface);
  border:1px solid var(--line);
  padding:14px;
}
.pos-cart p{
  display:flex;
  justify-content:space-between;
  margin:8px 0;
}
.pos-pay{
  margin-top:12px;
  padding:12px;
  border-radius:15px;
  text-align:center;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  font-weight:950;
}
.scanner-line{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--wa),transparent);
  animation:scan 2.2s linear infinite;
  margin:18px 0;
}
.ticket-live{
  display:grid;
  gap:10px;
}
.ticket-live span{
  padding:10px;
  border-radius:14px;
  background:var(--surface);
  border:1px dashed var(--line);
}

/* CRM */
.demo-crm-modern{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.crm-column{
  min-height:280px;
  padding:12px;
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line);
}
.crm-column b{
  display:block;
  margin-bottom:10px;
  color:var(--primary);
}
.crm-card{
  padding:11px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--line);
  margin-bottom:8px;
  font-weight:850;
}

/* ERP */
.demo-erp-modern{
  position:relative;
  width:100%;
  min-height:360px;
  display:grid;
  place-items:center;
}
.erp-core-modern{
  position:relative;
  z-index:3;
  width:130px;
  height:130px;
  border-radius:32px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:950;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 22px 55px rgba(0,94,255,.28);
}
.erp-module{
  position:absolute;
  z-index:3;
  min-width:112px;
  padding:13px 14px;
  border-radius:17px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  text-align:center;
  font-weight:950;
}
.erp-module.m1{top:10px;left:50%;transform:translateX(-50%)}
.erp-module.m2{right:2%;top:30%}
.erp-module.m3{right:9%;bottom:16px}
.erp-module.m4{left:9%;bottom:16px}
.erp-module.m5{left:2%;top:30%}
.erp-module.m6{left:50%;bottom:0;transform:translateX(-50%)}
.erp-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.erp-lines path{
  fill:none;
  stroke:rgba(0,94,255,.34);
  stroke-width:3;
  stroke-dasharray:8 8;
  animation:dashFlow 8s linear infinite;
}
@keyframes dashFlow{to{stroke-dashoffset:-160}}

/* Custom system */
.demo-custom-modern{
  width:100%;
}
.custom-dashboard{
  display:grid;
  grid-template-columns:80px 1fr;
  min-height:340px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.custom-sidebar{
  background:linear-gradient(180deg,rgba(0,94,255,.18),rgba(37,211,102,.12));
  padding:16px;
  display:grid;
  align-content:start;
  gap:12px;
}
.custom-sidebar span{
  width:42px;
  height:42px;
  border-radius:15px;
  background:rgba(255,255,255,.35);
}
.custom-main{padding:18px}
.custom-header{
  padding:14px;
  border-radius:17px;
  background:var(--surface);
  border:1px solid var(--line);
  margin-bottom:14px;
  font-weight:950;
}
.custom-modules{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.custom-modules article{
  min-height:98px;
  padding:14px;
  border-radius:18px;
  background:var(--surface);
  border:1px solid var(--line);
}
.custom-modules b{display:block;color:var(--primary)}
.custom-modules small{color:var(--muted)}

/* Online store */
.demo-store-modern{
  width:100%;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}
.store-window,.checkout-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  box-shadow:var(--shadow-soft);
}
.store-banner{
  padding:14px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  font-weight:950;
  margin-bottom:14px;
}
.store-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.store-grid article{
  padding:10px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--line);
}
.store-grid i{
  display:block;
  height:72px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(0,94,255,.12),rgba(37,211,102,.10));
  margin-bottom:8px;
}
.store-grid b,.store-grid span{display:block}

/* Payments */
.demo-pay-modern{
  width:100%;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:16px;
  align-items:center;
}
.payment-card{
  min-height:190px;
  border-radius:26px;
  padding:22px;
  color:#fff;
  background:linear-gradient(135deg,#111827,var(--primary));
  box-shadow:0 22px 60px rgba(0,94,255,.24);
  display:grid;
  align-content:space-between;
}
.payment-card .chip{
  width:44px;
  height:32px;
  border-radius:8px;
  background:linear-gradient(135deg,#F8D36A,#B88A1D);
}
.payment-methods{
  display:grid;
  gap:10px;
}
.payment-methods div,.payment-status{
  padding:14px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  font-weight:950;
}
.payment-status{
  grid-column:1/-1;
  text-align:center;
  color:var(--primary);
}

/* Automations */
.demo-auto-modern{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
.auto-node{
  min-height:140px;
  display:grid;
  place-items:center;
  gap:8px;
  padding:14px;
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line);
  text-align:center;
}
.auto-node i{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
}

/* Mobile app */
.demo-app-modern{
  width:100%;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:18px;
  align-items:center;
}
.app-phone-modern{
  width:220px;
  margin:auto;
  min-height:350px;
  border-radius:34px;
  padding:14px;
  background:#07152D;
  border:8px solid #050505;
  color:#fff;
  position:relative;
  box-shadow:0 22px 70px rgba(0,0,0,.30);
}
.app-notch{
  width:78px;
  height:7px;
  border-radius:999px;
  background:#303744;
  margin:0 auto 14px;
}
.app-card{
  padding:13px;
  border-radius:16px;
  background:#102545;
  margin-bottom:10px;
  font-weight:850;
}
.offline-badge{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  padding:10px;
  border-radius:16px;
  background:#F59E0B;
  color:#241300;
  font-weight:950;
  text-align:center;
  animation:offline 4s infinite;
}
.sync-panel{
  padding:18px;
  border-radius:22px;
  background:var(--card);
  border:1px solid var(--line);
}
.sync-bar{
  height:10px;
  border-radius:999px;
  background:rgba(0,94,255,.12);
  overflow:hidden;
  margin-top:14px;
}
.sync-bar i{
  display:block;
  width:72%;
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--wa));
  animation:syncPulse 3s infinite;
}
@keyframes syncPulse{50%{width:94%}}

@media(max-width:1080px){
  .demo-pos-modern,.demo-store-modern,.demo-pay-modern,.demo-app-modern{
    grid-template-columns:1fr;
  }
  .demo-crm-modern{
    grid-template-columns:repeat(2,1fr);
  }
  .demo-auto-modern{
    grid-template-columns:repeat(3,1fr);
  }
}
@media(max-width:720px){
  .demo-ai-phones,.demo-crm-modern,.custom-modules,.store-grid,.demo-auto-modern{
    grid-template-columns:1fr;
  }
  .ai-phone{min-height:350px}
  .erp-module{
    position:static;
    transform:none!important;
    width:100%;
  }
  .demo-erp-modern{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .erp-core-modern{
    width:100%;
    height:auto;
    padding:18px;
  }
  .erp-lines{display:none}
  .custom-dashboard{
    grid-template-columns:1fr;
  }
  .custom-sidebar{
    grid-template-columns:repeat(4,1fr);
  }
  .custom-sidebar span{
    width:100%;
  }
}


/* =========================
   V11: logo light/dark formats + clean logo slots
========================= */

/* Header logo larger and clean */
.brand{
  max-width:190px;
}
.logo-img{
  max-width:188px;
  max-height:64px;
  object-fit:contain;
}
.site-header{
  grid-template-columns:minmax(150px,200px) minmax(0,auto) auto;
}

/* Remove any colored box under logo areas */
.orbit-core.logo-only{
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
  border-radius:0!important;
  padding:0!important;
  width:150px!important;
  height:110px!important;
}
.orbit-core.logo-only .orbit-logo{
  width:100%;
  max-width:150px;
  max-height:105px;
  object-fit:contain;
}
.orbit-core.logo-only .orbit-fallback{
  color:var(--primary);
  font-weight:950;
  font-size:1.3rem;
}

/* Contact area: no green/gradient box. Logo only. */
.contact-icon.logo-only-contact{
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
  border-radius:0!important;
  padding:0!important;
  width:150px!important;
  height:96px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.contact-logo{
  width:100%!important;
  height:100%!important;
  max-width:150px;
  max-height:96px;
  object-fit:contain;
}
.contact-fallback-icon{
  display:none!important;
}

/* Chatbot header logo: no WhatsApp icon, brand only */
.phone-head{
  gap:10px;
}
.phone-logo{
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:0;
  background:transparent;
}
.phone-head b{
  letter-spacing:.01em;
}
.phone-fallback-icon{
  display:none!important;
}

/* AI phone headers: remove WhatsApp visual, use logo if available */
.ai-phone-logo{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:0;
}
.ai-phone-head i.fa-whatsapp,
.ai-phone-head .fa-whatsapp{
  display:none!important;
}

/* Footer dark logo size and no colored background */
.footer-logo{
  max-width:190px;
  max-height:72px;
  object-fit:contain;
  background:transparent!important;
}

/* Fallback text when logo missing, no colored background */
.logo-fallback{
  background:transparent!important;
  color:var(--primary);
}

/* Ensure clear logo areas do not inherit gradients */
.logo-only,
.logo-only-contact,
.phone-logo,
.orbit-logo,
.contact-logo,
.footer-logo{
  filter:none;
}

@media(max-width:1080px){
  .site-header{
    grid-template-columns:minmax(130px,180px) 1fr auto;
  }
  .logo-img{
    max-width:168px;
    max-height:58px;
  }
}
@media(max-width:720px){
  .site-header{
    grid-template-columns:1fr auto auto;
  }
  .brand{
    max-width:160px;
  }
  .logo-img{
    max-width:154px;
    max-height:52px;
  }
  .orbit-core.logo-only{
    width:130px!important;
    height:90px!important;
  }
  .contact-icon.logo-only-contact{
    width:130px!important;
    height:84px!important;
  }
}

/* =========================
   V12: compact system information + contained animations
========================= */
.service-page{padding-bottom:52px}
.service-hero{min-height:auto;align-items:stretch}
.demo-card{max-width:100%;overflow:hidden}
.demo-stage{
  min-height:clamp(280px,38vw,420px);
  max-height:none;
  overflow:hidden;
  align-content:center;
}
.system-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}
.info-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px);
  padding:20px;
  overflow:hidden;
}
.panel-title{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:16px;
}
.panel-title > span{
  width:52px;
  height:52px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 16px 36px rgba(0,94,255,.22);
  flex:0 0 auto;
}
.panel-title h3{margin:0}
.panel-title .eyebrow{margin:0 0 4px;font-size:.7rem}
.feature-chips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.feature-chip{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  font-weight:850;
  line-height:1.25;
  transition:.22s ease;
}
.feature-chip b{
  width:32px;height:32px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(0,94,255,.10);
  color:var(--primary);
  font-size:.78rem;
  flex:0 0 auto;
}
.feature-chip:hover{
  transform:translateY(-3px);
  border-color:rgba(0,94,255,.34);
  box-shadow:var(--shadow-soft);
}
.modern-flow{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
}
.modern-flow-step{
  position:relative;
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:12px;
  border-radius:18px;
  background:var(--card);
  border:1px solid var(--line);
  overflow:hidden;
  transition:.22s ease;
  animation:flowLift 4s ease-in-out infinite;
  animation-delay:calc(var(--i) * .18s);
}
.modern-flow-step::after{
  content:"";
  position:absolute;
  inset:auto 10px 8px 10px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--wa));
  opacity:.65;
}
.modern-flow-step b{color:var(--primary);font-size:.88rem}
.modern-flow-step span{font-weight:850;line-height:1.25;font-size:.88rem}
.modern-flow-step:hover{
  transform:translateY(-5px);
  border-color:rgba(37,211,102,.34);
}
@keyframes flowLift{50%{transform:translateY(-4px)}}
.service-details{display:none!important}
.info-card{overflow:hidden}

/* Contain system demos and avoid lateral overflow */
.demo-pos-modern,.demo-store-modern,.demo-pay-modern,.demo-app-modern,.demo-ai-phones,.demo-crm-modern,.demo-custom-modern,.demo-auto-modern,.demo-erp-modern{
  max-width:100%;
  min-height:0;
}
.demo-erp-modern{min-height:clamp(260px,34vw,360px)}
.demo-crm-modern .crm-column{min-height:clamp(190px,25vw,280px)}
.ai-phone{min-height:clamp(315px,35vw,390px)}
.pos-screen,.pos-terminal,.store-window,.checkout-panel,.payment-card,.sync-panel{min-width:0}

/* Remove central blue/boxed Todo México */
.mexico-v8 .map-core,.map-core{
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
  color:var(--text)!important;
  padding:0!important;
  border-radius:0!important;
}
.mexico-v8 .map-core strong,.map-core strong{color:var(--text)!important}
.mexico-v8 .map-core small,.map-core small{color:var(--muted)!important}
.mexico-layout{padding-bottom:42px}
.mexico-map-panel{min-height:clamp(360px,42vw,460px)}
.presence-dashboard{align-self:stretch}
.presence-cards article{min-height:86px}

@media(max-width:1120px){
  .system-info-grid{grid-template-columns:1fr}
  .modern-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .service-hero{padding:20px}
  .system-info-grid{gap:14px}
  .info-panel{padding:16px}
  .feature-chips{grid-template-columns:1fr}
  .modern-flow{grid-template-columns:1fr}
  .modern-flow-step{min-height:72px}
  .demo-stage{min-height:auto;padding:12px}
  .demo-pos-modern,.demo-store-modern,.demo-pay-modern,.demo-app-modern{gap:12px}
  .pos-products,.store-grid{grid-template-columns:1fr}
}


/* =========================
   V13: bigger system demos + clean logo placement + no prices
========================= */

/* Header logo: no text fallback, larger usable area */
.logo-fallback{
  display:none!important;
}
.site-header{
  grid-template-columns:minmax(175px,230px) minmax(0,auto) auto;
}
.brand{
  max-width:220px;
}
.logo-img{
  max-width:210px;
  max-height:72px;
}

/* Hero chatbot brand logo */
.brand-chat-head{
  min-height:54px;
}
.brand-chat-head .phone-logo{
  width:auto;
  max-width:132px;
  height:38px;
  max-height:40px;
  object-fit:contain;
}
.brand-chat-head small{
  margin-left:auto;
}

/* Make system animation area visibly complete */
.service-hero{
  grid-template-columns:.82fr 1.18fr;
  gap:24px;
  align-items:stretch;
}
.demo-card{
  min-height:clamp(460px,48vw,620px);
  display:flex;
  flex-direction:column;
}
.demo-stage{
  flex:1;
  min-height:clamp(420px,44vw,560px)!important;
  display:grid;
  place-items:center;
  padding:22px;
  overflow:visible;
}
.service-copy{
  align-self:center;
}
.service-copy h1{
  font-size:clamp(2.1rem,4.6vw,4.25rem);
}

/* Give CRM and store enough space */
.demo-crm-modern{
  min-height:420px;
  align-items:stretch;
}
.demo-crm-modern .crm-column{
  min-height:390px!important;
  display:flex;
  flex-direction:column;
}
.crm-card{
  min-height:58px;
  display:flex;
  align-items:center;
}
.demo-store-modern{
  min-height:430px;
  align-items:stretch;
}
.store-window,.checkout-panel{
  min-height:400px;
}
.store-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  height:calc(100% - 64px);
}
.store-grid article{
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.store-grid i{
  flex:1;
  min-height:126px;
}
.checkout-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* POS more complete */
.demo-pos-modern{
  min-height:430px;
  align-items:stretch;
}
.pos-screen,.pos-terminal{
  min-height:400px;
}
.pos-products button{
  min-height:96px;
}
.ticket-live span{
  min-height:48px;
  display:flex;
  align-items:center;
}

/* Other demos contained but larger */
.demo-ai-phones{min-height:430px}
.ai-phone{min-height:420px}
.demo-erp-modern{min-height:430px}
.demo-custom-modern .custom-dashboard{min-height:430px}
.demo-pay-modern{min-height:430px}
.demo-auto-modern{min-height:420px}
.demo-app-modern{min-height:430px}

/* Pricing: no numeric price */
.scope-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(0,94,255,.10);
  color:var(--primary);
  font-weight:950;
  margin:8px 0 12px;
}
.price{
  display:none!important;
}

/* Modern left side of form */
.contact-card-v13{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 0, rgba(0,94,255,.16), transparent 42%),
    radial-gradient(circle at 100% 35%, rgba(37,211,102,.12), transparent 36%),
    var(--surface);
}
.contact-logo-wrap{
  width:100%;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:16px;
}
.contact-logo-main{
  max-width:220px;
  max-height:86px;
  object-fit:contain;
}
.contact-city-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:18px 0;
}
.contact-city-grid span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 10px;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  font-weight:850;
  font-size:.84rem;
}
.contact-city-grid i{
  color:var(--primary);
}
.contact-dygi-btn{
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  font-weight:950;
  box-shadow:0 16px 38px rgba(0,94,255,.24);
  transition:.22s ease;
}
.contact-dygi-btn:hover{
  transform:translateY(-3px);
}

/* Modern form prompt before fields */
.form-intro-v13{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:18px;
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(0,94,255,.12),rgba(37,211,102,.10)),
    var(--card);
  border:1px solid var(--line);
  margin-bottom:18px;
}
.form-intro-v13 h3{
  margin:0 0 6px;
  font-size:clamp(1.2rem,2.5vw,1.75rem);
}
.form-intro-v13 p{
  margin:0;
}
.form-intro-v13 .btn{
  flex:0 0 auto;
}

/* Keep DYGI center logo visible and unboxed */
.orbit-core.logo-only{
  width:180px!important;
  height:120px!important;
}
.orbit-core.logo-only .orbit-logo{
  max-width:180px;
  max-height:116px;
}

/* Responsive fit */
@media(max-width:1120px){
  .service-hero{
    grid-template-columns:1fr;
  }
  .demo-card{
    min-height:auto;
  }
  .demo-stage{
    min-height:clamp(360px,58vw,520px)!important;
  }
}
@media(max-width:720px){
  .site-header{
    grid-template-columns:1fr auto auto;
  }
  .brand{
    max-width:170px;
  }
  .logo-img{
    max-width:160px;
    max-height:58px;
  }
  .demo-stage{
    min-height:auto!important;
    overflow:hidden;
  }
  .demo-card{
    min-height:auto;
  }
  .demo-crm-modern,
  .demo-store-modern,
  .demo-pos-modern,
  .demo-pay-modern,
  .demo-auto-modern,
  .demo-app-modern,
  .demo-ai-phones{
    min-height:auto;
  }
  .crm-column,
  .store-window,
  .checkout-panel,
  .pos-screen,
  .pos-terminal{
    min-height:auto!important;
  }
  .store-grid article{
    min-height:150px;
  }
  .form-intro-v13{
    flex-direction:column;
    align-items:stretch;
  }
  .contact-city-grid{
    grid-template-columns:1fr;
  }
  .contact-logo-main{
    max-width:190px;
  }
}


/* =========================
   V14: balanced demos + only two global logos
========================= */

/* Single logo pair for the whole site */
.theme-logo{
  object-fit:contain;
}

/* Balanced demo frame: not too tall, not too wide */
.service-hero{
  grid-template-columns:.9fr 1.1fr;
  gap:22px;
  align-items:stretch;
}
.demo-card{
  min-height:auto!important;
  display:flex;
  flex-direction:column;
}
.demo-stage{
  width:100%;
  min-height:clamp(340px,36vw,470px)!important;
  max-height:520px;
  padding:18px;
  overflow:hidden!important;
  display:grid;
  place-items:center;
}
.demo-stage > *{
  max-width:100%;
  max-height:100%;
}

/* Two-column demos should keep a compact proportion */
.demo-pos-modern,
.demo-store-modern,
.demo-pay-modern,
.demo-app-modern{
  min-height:clamp(320px,34vw,450px)!important;
  align-items:stretch;
}
.pos-screen,.pos-terminal,
.store-window,.checkout-panel{
  min-height:clamp(280px,32vw,420px)!important;
}
.demo-ai-phones{
  min-height:clamp(330px,34vw,430px)!important;
}
.ai-phone{
  min-height:clamp(320px,32vw,410px)!important;
}
.demo-crm-modern{
  min-height:clamp(310px,32vw,420px)!important;
}
.demo-crm-modern .crm-column{
  min-height:clamp(260px,29vw,360px)!important;
}
.demo-erp-modern,
.demo-custom-modern,
.demo-pay-modern,
.demo-auto-modern,
.demo-app-modern{
  min-height:clamp(320px,34vw,440px)!important;
}

/* Avoid excessive height in online store */
.store-grid article{
  min-height:clamp(140px,17vw,220px)!important;
}
.store-grid i{
  min-height:clamp(80px,10vw,126px)!important;
}
.checkout-panel{
  justify-content:center;
}

/* Better CRM compact distribution */
.crm-card{
  min-height:48px!important;
  padding:10px;
}
.crm-column{
  justify-content:flex-start;
}

/* ERP modules stay compact */
.erp-module{
  min-width:104px;
  padding:11px 12px;
}

/* Modern flow panels keep a compact layout */
.system-info-grid{
  align-items:start;
}
.info-panel{
  min-height:auto;
}
.modern-flow{
  grid-template-columns:repeat(5,minmax(90px,1fr));
}
.modern-flow-step{
  min-height:80px;
}

/* Logos: just two filenames:
   img/logo-claro.png and img/logo-obscuro.png */
.logo-img,
.phone-logo,
.ai-phone-logo,
.orbit-logo,
.contact-logo-main,
.footer-logo{
  object-fit:contain!important;
}

/* Responsive: no side scrolling and no over-stretching */
@media(max-width:1120px){
  .service-hero{
    grid-template-columns:1fr;
  }
  .demo-stage{
    min-height:clamp(320px,52vw,470px)!important;
  }
}
@media(max-width:780px){
  .demo-stage{
    min-height:auto!important;
    max-height:none!important;
    padding:12px;
  }
  .demo-pos-modern,
  .demo-store-modern,
  .demo-pay-modern,
  .demo-app-modern,
  .demo-ai-phones,
  .demo-crm-modern,
  .demo-auto-modern{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }
  .ai-phone,
  .pos-screen,.pos-terminal,
  .store-window,.checkout-panel,
  .crm-column{
    min-height:auto!important;
  }
  .demo-erp-modern{
    min-height:auto!important;
  }
  .modern-flow{
    grid-template-columns:1fr;
  }
}


/* =========================
   V15: Online store full layout + compact automations + full ES/EN mockup fit
========================= */

/* Keep all demos inside the same visual cup */
.demo-stage{
  min-height:clamp(340px,34vw,460px)!important;
  max-height:500px!important;
  overflow:hidden!important;
}
.demo-stage > *{
  width:100%;
}

/* Online store: more products, better distribution, no empty space */
.demo-store-modern{
  grid-template-columns:1.15fr .85fr;
  gap:14px;
  min-height:clamp(340px,34vw,450px)!important;
}
.store-window,
.checkout-panel{
  min-height:0!important;
  height:100%;
}
.store-window{
  display:flex;
  flex-direction:column;
}
.store-banner{
  flex:0 0 auto;
  margin-bottom:12px;
}
.store-grid-v15{
  flex:1;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px;
  height:auto!important;
}
.store-grid-v15 article{
  min-height:0!important;
  height:auto!important;
  padding:9px;
  display:grid;
  grid-template-rows:1fr auto auto;
  gap:6px;
}
.store-grid-v15 i{
  min-height:74px!important;
  height:auto!important;
  margin-bottom:2px!important;
}
.store-grid-v15 b{
  font-size:.82rem;
  line-height:1.15;
}
.store-grid-v15 span{
  font-size:.8rem;
  color:var(--primary);
  font-weight:950;
}
.checkout-panel-v15{
  justify-content:space-between!important;
  gap:12px;
}
.checkout-panel-v15 h4{
  margin-bottom:2px;
}
.checkout-panel-v15 p{
  margin:0;
}
.mini-cart-lines{
  display:grid;
  gap:8px;
  margin:8px 0;
}
.mini-cart-lines span{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:13px;
  background:var(--surface);
  border:1px solid var(--line);
  font-size:.84rem;
  font-weight:850;
}
.mini-cart-lines b{
  color:var(--primary);
}

/* Automations: compact dashboard, not tall */
.demo-auto-modern.auto-compact-v15{
  min-height:clamp(280px,28vw,380px)!important;
  display:grid!important;
  grid-template-columns:1fr;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  align-content:center;
}
.auto-header-v15{
  padding:14px 16px;
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.auto-header-v15 b{
  display:block;
  color:var(--primary);
  margin-bottom:4px;
}
.auto-header-v15 small{
  color:var(--muted);
}
.auto-flow-v15{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
}
.auto-flow-v15 .auto-node{
  min-height:116px!important;
  padding:12px;
}
.auto-flow-v15 .auto-node i{
  width:42px;
  height:42px;
}
.auto-flow-v15 .auto-node b{
  font-size:.86rem;
}
.auto-log-v15{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.auto-log-v15 span{
  padding:10px;
  border-radius:14px;
  background:var(--card);
  border:1px dashed var(--line);
  color:var(--muted);
  font-weight:850;
  font-size:.82rem;
  text-align:center;
}

/* Reduce old excessive automation height */
.demo-auto-modern{
  min-height:0!important;
}
.auto-node{
  min-height:auto;
}

/* Balance all system cards */
.demo-pos-modern,
.demo-crm-modern,
.demo-erp-modern,
.demo-custom-modern,
.demo-pay-modern,
.demo-app-modern,
.demo-ai-phones{
  max-height:100%;
}

/* CRM not overly tall */
.demo-crm-modern{
  min-height:clamp(300px,30vw,400px)!important;
}
.demo-crm-modern .crm-column{
  min-height:clamp(230px,25vw,330px)!important;
}

/* Mobile app remains compact style reference */
.demo-app-modern{
  min-height:clamp(310px,31vw,410px)!important;
}

/* Responsiveness */
@media(max-width:980px){
  .demo-store-modern{
    grid-template-columns:1fr;
  }
  .store-grid-v15{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .auto-flow-v15{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:720px){
  .demo-stage{
    max-height:none!important;
    min-height:auto!important;
  }
  .store-grid-v15{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .auto-flow-v15,
  .auto-log-v15{
    grid-template-columns:1fr;
  }
  .auto-flow-v15 .auto-node{
    min-height:76px!important;
    grid-template-columns:42px 1fr;
    display:grid;
    text-align:left;
    justify-content:start;
  }
}


/* =========================
   V16: fixed dark logos + square main logo slot
========================= */

/* Header: bigger square-ready logo area */
.site-header{
  grid-template-columns:minmax(104px,128px) minmax(0,auto) auto;
  min-height:92px;
}
.brand{
  width:104px;
  height:104px;
  max-width:104px;
  min-width:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.logo-img{
  width:96px!important;
  height:96px!important;
  max-width:96px!important;
  max-height:96px!important;
  object-fit:contain!important;
  border-radius:0!important;
}

/* Dark WhatsApp mockup always receives the white/light logo */
.brand-chat-head{
  justify-content:flex-start;
}
.phone-logo-fixed-dark,
.ai-phone-logo-fixed-dark{
  object-fit:contain!important;
  filter:none!important;
}
.phone-logo-fixed-dark{
  width:auto!important;
  height:42px!important;
  max-width:148px!important;
  max-height:42px!important;
}
.ai-phone-logo-fixed-dark{
  width:auto!important;
  height:34px!important;
  max-width:112px!important;
  max-height:34px!important;
}

/* Footer is always dark, so use fixed white/light logo */
.footer-logo-fixed{
  width:auto!important;
  max-width:210px!important;
  max-height:78px!important;
  object-fit:contain!important;
  filter:none!important;
}

/* Make footer logo breathe better in dark block */
.footer-grid > div:first-child{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.footer-logo-fixed + p{
  margin-top:10px;
}

/* Keep menu balanced after square header logo */
.main-nav{
  margin-left:4px;
}

@media(max-width:1080px){
  .site-header{
    grid-template-columns:minmax(90px,108px) 1fr auto;
    min-height:84px;
  }
  .brand{
    width:88px;
    height:88px;
    max-width:88px;
    min-width:88px;
  }
  .logo-img{
    width:82px!important;
    height:82px!important;
    max-width:82px!important;
    max-height:82px!important;
  }
}
@media(max-width:720px){
  .site-header{
    grid-template-columns:86px auto auto;
    min-height:82px;
  }
  .brand{
    width:82px;
    height:82px;
    max-width:82px;
    min-width:82px;
  }
  .logo-img{
    width:76px!important;
    height:76px!important;
    max-width:76px!important;
    max-height:76px!important;
  }
  .phone-logo-fixed-dark{
    max-width:124px!important;
    height:36px!important;
  }
}