/* ==========================================================================
   EZEMTECH · SHELL PÚBLICO Y PORTADA — diseño «neón» (29/10/2026)
   --------------------------------------------------------------------------
   Orden del dueño con sus dos maquetas: todo el diseño visual nuevo (estilo,
   formas, colores) alineado con ellas, conservando conexiones y catálogos.
   Sustituye entera a la hoja del 13/10 (respaldo en
   backups/WEB-REDISENO-20261029/). Una sola versión viva (Ley 33).

   · Oscuro por defecto (`html.dark`, convención del sitio). El claro se
     conserva con la luna: mismas formas, superficies claras.
   · `.ezhome-*` y `.ezo-*` se conservan donde los usan app.js y las pruebas;
     lo nuevo es `.ezx-*`.
   · Movimiento: solo transform/opacity, se detiene fuera de pantalla, con la
     pestaña oculta, con el botón de pausa y con «reducir movimiento».
   ========================================================================== */

/* ---------- 1. Fichas del diseño (tokens) ------------------------------- */
body.ez-public-root{
  --x-bg:#f3f6fc;
  --x-bg2:#e8eef9;
  --x-surface:#ffffff;
  --x-surface2:#f6f8fd;
  --x-glass:rgba(255,255,255,.86);
  --x-line:#d9e2f1;
  --x-line-strong:#b9c7e2;
  --x-ink:#0b1533;
  --x-ink2:#26335a;
  --x-muted:#55627f;
  --x-cyan:#0b8fe0;
  --x-cyan-text:#0b63d6;
  --x-mag:#9a1dbf;
  --x-head:rgba(255,255,255,.9);
  --x-shadow:0 14px 34px rgba(16,36,90,.10);
  --x-glow:0 0 0 transparent;
  /* Degradados de marca: cian → azul → magenta (botón principal) y
     cian → azul (botón «Contacto» de la cabecera), como en la maqueta. */
  --x-grad:linear-gradient(90deg,#0b8df2 0%,#5a63ff 55%,#d23cf0 100%);
  --x-grad-cta:linear-gradient(90deg,#0aa6f0 0%,#2a6dff 100%);
  --x-grad-text:linear-gradient(90deg,#0a86e0,#2b6bff);
  --x-radius:18px;
  --x-radius-lg:24px;
  --x-max:1440px;
  --x-pad:clamp(16px,3.4vw,48px);
  --x-space:clamp(48px,6vw,96px);
  --x-ease:cubic-bezier(.22,.61,.36,1);
  --x-head-h:76px;
  /* WEB-COLOR-PREMIUM-20261030: tríos RGB de los azules noche, neutros de tema
     (velos sobre foto en ambos temas), para rgba(var(--…-rgb),a) — Ley 16. */
  --x-night-rgb:3,7,20;
  --x-bg-rgb:5,10,24;
  --x-deep-rgb:4,9,26;
  --x-card-rgb:7,15,40;
  /* Puente con las vistas heredadas de app.js (tienda, ficha, carrito,
     cuenta): leen estas variables, así toman la paleta nueva sin tocar
     sus contratos. */
  --ezh-navy:#060c1f;--ezh-navy-2:#0b1530;
  --ezh-blue:var(--x-cyan-text);--ezh-cyan:#36d6ff;--ezh-violet:#7a5cff;--ezh-green:#10d7a0;
  --ezh-ink:var(--x-ink);--ezh-muted:var(--x-muted);--ezh-line:var(--x-line);
  --ezh-canvas:var(--x-bg);--ezh-surface:var(--x-surface);--ezh-on-dark:#b9c8ea;
  --ezh-max:var(--x-max);--ezh-radius:var(--x-radius-lg);--ezh-section-space:var(--x-space);--ezh-ease:var(--x-ease);
  --ez-azul:var(--x-cyan-text);--ez-azul-hondo:var(--x-cyan-text);--ez-azul-btn:var(--acento);
  --ez-tinta:var(--x-ink);--ez-tinta-2:var(--x-ink2);--ez-tinta-3:var(--x-muted);
  --ez-papel:var(--x-surface);--ez-papel-2:var(--x-bg);--ez-noche:var(--x-bg);
  --ez-linea:var(--x-line);--ez-linea-2:var(--x-line-strong);
}
html.dark body.ez-public-root{
  --x-bg:#050a18;
  --x-bg2:#081126;
  --x-surface:#0b1530;
  --x-surface2:#0e1a3a;
  --x-glass:rgba(10,20,46,.78);
  --x-line:rgba(80,160,255,.26);
  --x-line-strong:rgba(70,175,255,.55);
  /* Borde neón de la maqueta: cian → violeta → magenta. */
  --x-neon:linear-gradient(135deg,#22e1ff 0%,#4d7bff 45%,#e244f5 100%);
  --x-neon-glow:0 0 0 1px rgba(34,211,255,.08),0 0 18px rgba(34,190,255,.28),0 0 34px rgba(200,70,245,.14);
  --x-ink:#f2f6ff;
  --x-ink2:#d3ddf4;
  --x-cyan:#22d3ff;
  --x-cyan-text:#5cd6ff;
  --x-mag:#ee8bff;
  --x-head:rgba(var(--x-bg-rgb),.84);
  --x-shadow:0 18px 44px rgba(0,0,0,.38);
  --x-glow:0 0 22px rgba(34,160,255,.22);
  --x-grad-text:linear-gradient(90deg,#16d8ff,#3d8bff 60%,#9a6bff);
  --ezh-blue:var(--x-cyan-text);
  --ez-azul:var(--x-cyan-text);--ez-azul-hondo:var(--x-cyan-text);
  /* WEB-COLOR-PREMIUM-20261030 — el dueño: «en vivo le falta color y brillo,
     se ve como copia en papel». Paleta de la maqueta en un solo lugar (Ley 16):
     dos acentos de neón (cian eléctrico y magenta/violeta), vidrio oscuro y
     luz. Solo color, contraste y luz: ni textos ni estructura cambian. */
  --x-neo-cyan:#14d8ff;
  --x-neo-cyan-2:#00e5ff;
  --x-neo-blue:#2a6dff;
  --x-neo-violet:#b44bff;
  --x-neo-mag:#ff2bd6;
  --x-neo-cyan-rgb:20,216,255;
  --x-neo-mag-rgb:255,43,214;
  --x-neo-violet-rgb:180,75,255;
  --x-neo-blue-rgb:42,109,255;
  --x-lead:#e6eeff;
  --x-muted:#b4c2e2;
  --x-grad:linear-gradient(90deg,var(--x-neo-cyan) 0%,#3f8cff 34%,#7a5cff 62%,var(--x-neo-mag) 100%);
  --x-grad-emp:linear-gradient(90deg,var(--x-neo-blue) 0%,#1f9dff 30%,var(--x-neo-cyan) 62%,var(--x-neo-cyan-2) 100%);
  --x-btn-glow:0 0 22px rgba(var(--x-neo-cyan-rgb),.42),0 0 30px rgba(var(--x-neo-mag-rgb),.38),0 12px 30px rgba(var(--x-neo-violet-rgb),.28),inset 0 1px 0 rgba(255,255,255,.35);
  --x-btn-cta:linear-gradient(90deg,#0bbcff 0%,#1f8bff 60%,var(--x-neo-blue) 100%);
  --x-btn-cta-glow:0 0 20px rgba(var(--x-neo-cyan-rgb),.55),0 6px 18px rgba(0,120,255,.35),inset 0 1px 0 rgba(255,255,255,.35);
  /* Vidrio oscuro: azul noche translúcido + reflejo superior + borde cian. */
  --x-glass-bg:linear-gradient(160deg,rgba(11,24,60,.82) 0%,rgba(5,11,30,.92) 100%);
  --x-glass-sheen:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 34%,rgba(255,255,255,0) 55%);
  --x-glass-edge:linear-gradient(140deg,rgba(var(--x-neo-cyan-rgb),.85) 0%,rgba(var(--x-neo-cyan-rgb),.35) 45%,rgba(var(--x-neo-violet-rgb),.6) 100%);
  --x-glass-edge-mag:linear-gradient(140deg,rgba(var(--x-neo-mag-rgb),.75) 0%,rgba(var(--x-neo-violet-rgb),.4) 50%,rgba(var(--x-neo-cyan-rgb),.7) 100%);
  --x-glass-glow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(var(--x-neo-cyan-rgb),.06),0 0 18px rgba(var(--x-neo-cyan-rgb),.20),0 12px 30px rgba(0,0,0,.45);
  --x-logo-glow:drop-shadow(0 0 3px rgba(var(--x-neo-mag-rgb),.6)) drop-shadow(0 0 9px rgba(var(--x-neo-mag-rgb),.3));
  --x-hero-bg:radial-gradient(120% 90% at 68% 32%,#0a1c48 0%,#060f2b 45%,#050a18 100%);
}

/* ---------- 2. Base del shell ------------------------------------------ */
body.ez-public-root{margin:0;padding-bottom:0!important;background:var(--x-bg)!important;color:var(--x-ink)}
body.ez-public-root .app-shell{min-height:100vh;background:var(--x-bg)!important}
body.ez-public-root .toast{bottom:24px}
body.ez-public-root .update-banner{bottom:24px}
body.ez-public-root .wa-float{right:22px;bottom:22px;box-shadow:0 10px 26px rgba(16,200,120,.35)}
.ezhome-shell{min-width:320px;overflow-x:clip;background:var(--x-bg);color:var(--x-ink)}
.ezhome-shell a{text-decoration:none}
.ezhome-shell button,.ezhome-shell input,.ezhome-shell summary{font:inherit}
.ezhome-shell summary{list-style:none}
.ezhome-shell summary::-webkit-details-marker{display:none}
.ezhome-shell :focus-visible{outline:3px solid var(--x-cyan);outline-offset:3px;border-radius:10px}
.ezhome-icon{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ezx-defs{position:absolute;width:0;height:0;overflow:hidden}
/* Iconos de módulo: relleno con el degradado de marca; `.s` = trazo. */
.ezx-ic{display:block;width:28px;height:28px;flex:0 0 auto;fill:url(#ezxGrad);overflow:visible}
.ezx-ic .s{fill:none;stroke:url(#ezxGrad);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ezx-ic .w{stroke-width:2.3}
.ezx-ic path:not(.s),.ezx-ic circle:not(.s),.ezx-ic rect:not(.s){filter:drop-shadow(0 0 3px rgba(40,190,255,.35))}

/* ---------- 3. Botones --------------------------------------------------- */
.ezx-btn{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:999px;padding:12px 24px;font-size:15px;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;cursor:pointer;transition:transform .22s var(--x-ease),box-shadow .22s,filter .22s,background .22s}
.ezx-btn .ezhome-icon{width:18px;height:18px}
.ezx-btn-grad{background:var(--x-grad);color:#fff!important;box-shadow:0 10px 28px rgba(90,80,255,.32),inset 0 1px 0 rgba(255,255,255,.25);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ezx-btn-cta{background:var(--x-grad-cta);color:#fff!important;box-shadow:0 8px 22px rgba(20,130,255,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.ezx-btn-ghost{border:1.5px solid rgba(255,255,255,.72);background:rgba(4,10,26,.25);color:#fff!important}
.ezx-btn-line{border:1px solid var(--x-line-strong);background:transparent;color:var(--x-ink)!important}
.ezx-btn-sm{min-height:42px;padding:9px 18px;font-size:14px}
@media(hover:hover) and (pointer:fine){
  .ezx-btn:hover{transform:translateY(-2px)}
  .ezx-btn-grad:hover,.ezx-btn-cta:hover{filter:brightness(1.08);box-shadow:0 14px 34px rgba(90,80,255,.45),inset 0 1px 0 rgba(255,255,255,.3)}
  .ezx-btn-line:hover{border-color:var(--x-cyan);color:var(--x-cyan-text)!important;box-shadow:var(--x-glow)}
  .ezx-btn-ghost:hover{background:rgba(255,255,255,.1)}
}
:is(.ezx-btn,.ezo-cta1,.ezo-cta2):active:not(:disabled){transform:scale(.98)}
:is(.ezx-btn,.ezo-cta1,.ezo-cta2):disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
html:not(.dark) .ezx-btn-ghost{border-color:var(--x-line-strong);background:rgba(255,255,255,.7);color:var(--x-ink)!important}

/* ---------- 4. Cabecera -------------------------------------------------- */
.ezhome-header{position:sticky;top:0;z-index:100;background:var(--x-head);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px)}
.ezhome-header:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';background:linear-gradient(90deg,transparent,rgba(34,200,255,.55) 30%,rgba(210,60,240,.5) 70%,transparent);opacity:.75}
.ezhome-head-main{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);max-width:var(--x-max);height:var(--x-head-h);margin:0 auto;padding:0 var(--x-pad)}
.ezhome-brand{display:block;flex:0 0 auto}
.ezhome-logo{position:relative;display:block;width:212px;aspect-ratio:447/112;overflow:hidden;white-space:nowrap}
.ezhome-logo-image{position:absolute;top:-115.18%;left:-17.9%;display:block;width:134.23%;max-width:none;height:auto;filter:drop-shadow(0 0 10px rgba(80,120,255,.25))}
.ezhome-nav{display:flex;align-items:center;gap:clamp(14px,2vw,34px);margin:0 auto}
.ezhome-nav>a,.ezhome-nav summary{position:relative;display:flex;align-items:center;gap:7px;min-height:44px;color:var(--x-ink);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:color .2s}
.ezhome-nav details summary:after{content:'';width:6px;height:6px;margin-left:3px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-3px);opacity:.8}
.ezhome-nav>a:hover,.ezhome-nav summary:hover,.ezhome-nav details[open]>summary{color:var(--x-cyan-text)}
.ezhome-nav>a.is-active,.ezhome-nav>details.is-active>summary{color:var(--x-cyan-text)}
.ezhome-nav>a.is-active:before,.ezhome-nav>details.is-active>summary:before{position:absolute;right:0;bottom:4px;left:0;height:2px;content:'';border-radius:2px;background:var(--x-cyan);box-shadow:0 0 10px var(--x-cyan)}
.ezhome-nav>details.is-active>summary:before{right:14px}
.ezhome-nav details{position:relative}
.ezhome-nav-pop{position:absolute;top:50px;left:-18px;z-index:5;display:grid;min-width:240px;gap:2px;border:1px solid var(--x-line-strong);border-radius:16px;background:var(--x-surface);padding:10px;box-shadow:var(--x-shadow)}
.ezhome-nav-pop a{border-radius:10px;padding:11px 12px;color:var(--x-ink2);font-size:14px;font-weight:600}
.ezhome-nav-pop a:hover{background:rgba(34,180,255,.1);color:var(--x-cyan-text)}
.ezhome-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ezhome-mobile-actions{display:none;align-items:center;gap:6px;margin-left:auto}
.ezx-iconbtn{position:relative;display:grid;width:42px;height:42px;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--x-ink);cursor:pointer;transition:background .2s,color .2s}
.ezx-iconbtn .ezhome-icon{width:21px;height:21px}
.ezx-iconbtn:hover{background:rgba(34,180,255,.1);color:var(--x-cyan-text)}
.ezx-iconbtn>b{position:absolute;top:2px;right:0;display:grid;min-width:18px;height:18px;place-items:center;border-radius:999px;background:var(--x-grad);padding:0 4px;color:#fff;font-size:10px;font-weight:800;box-shadow:0 0 10px rgba(200,60,240,.45)}
.ezhome-lang{display:flex;height:42px;align-items:center;gap:7px;border:1px solid var(--x-line-strong);border-radius:999px;background:transparent;padding:0 13px;color:var(--x-ink);font-size:14px;font-weight:700;cursor:pointer;margin-right:4px}
.ezhome-lang .ezhome-icon{width:20px;height:20px}
.ezhome-lang .ezhome-lang-caret{width:14px;height:14px;opacity:.75}
.ezhome-lang:hover{border-color:var(--x-cyan);color:var(--x-cyan-text)}
.ezhome-contact{min-height:46px;margin-left:8px;padding:10px 20px}
.ezhome-account-menu{position:relative}
.ezhome-account-menu .ez-cuenta-pop{border-color:var(--x-line-strong);background:var(--x-surface);color:var(--x-ink)}
.ezhome-account-menu .ez-cuenta-pop a,.ezhome-account-menu .ez-cuenta-pop button{color:var(--x-ink2)}

/* Mega menú de Software (contenido real de EZEM ONE) */
.ezhome-nav .ezhome-software-menu{position:static}
.ezhome-mega{position:absolute;z-index:10;top:calc(var(--x-head-h) - 6px);right:var(--x-pad);left:var(--x-pad);display:grid;max-width:calc(var(--x-max) - 2*var(--x-pad));margin:0 auto;grid-template-columns:240px minmax(0,1fr);overflow:hidden;border:1px solid rgba(70,169,255,.3);border-radius:22px;background:#071025;color:#fff;box-shadow:0 30px 80px rgba(0,6,24,.55),0 0 40px rgba(40,120,255,.12)}
.ezhome-mega-tabs{display:flex;max-height:540px;flex-direction:column;gap:3px;overflow-y:auto;border-right:1px solid rgba(116,176,255,.14);background:#08142e;padding:13px}
.ezhome-mega-tabs button{display:flex;min-height:40px;align-items:center;justify-content:space-between;gap:8px;border:0;border-radius:10px;background:transparent;padding:9px 11px;color:#c8d8ed;font-size:13px;font-weight:650;text-align:left;cursor:pointer}
.ezhome-mega-tabs button:hover,.ezhome-mega-tabs button.is-active{background:linear-gradient(100deg,rgba(0,170,255,.24),rgba(200,60,240,.18));color:#fff;box-shadow:inset 0 0 0 1px rgba(84,210,255,.2)}
.ezhome-mega-tabs button .ezhome-icon{width:14px;height:14px}
.ezhome-mega-panels{min-width:0}
.ezhome-mega-panel{display:grid;min-height:540px;grid-template-columns:minmax(280px,.8fr) minmax(400px,1.2fr)}
.ezhome-mega-panel[hidden]{display:none}
.ezhome-mega-copy{display:flex;min-width:0;flex-direction:column;padding:30px 28px}
.ezhome-mega-copy>p{margin:0 0 8px;color:#4de8ff;font-size:11px;font-weight:800;letter-spacing:.2em}
.ezhome-mega-copy h3{margin:0;color:#fff;font-size:30px;line-height:1.05;letter-spacing:-.03em}
.ezhome-mega-copy ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;margin:22px 0 0;padding:0;list-style:none}
.ezhome-mega-copy li{display:flex;align-items:flex-start;gap:7px;color:#d8e6f5;font-size:13px;line-height:1.3}
.ezhome-mega-copy li .ezhome-icon{width:15px;height:15px;color:#36d6ff}
.ezhome-mega-copy>div{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:22px}
.ezhome-mega-copy>div>a:last-child:not(.ezx-btn){color:#80e8ff;font-size:13px;font-weight:700}
.ezhome-mega-panel figure{position:relative;min-width:0;margin:0;overflow:hidden;background:#030b19}
.ezhome-mega-panel figure:after{position:absolute;inset:0;content:'';background:linear-gradient(90deg,#071025 0%,rgba(7,16,37,.1) 30%,transparent 60%);pointer-events:none}
.ezhome-mega-panel figure img{width:100%;height:100%;object-fit:cover}
.ezhome-mega-panel figcaption{position:absolute;z-index:1;right:18px;bottom:15px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(2,15,33,.8);padding:7px 10px;color:#c8d9ed;font-size:11px}

/* ---------- 5. Héroe: el globo y la órbita ------------------------------
   Escritorio (≥1100 px): el lienzo conserva la proporción del arte
   (1672×845) y todo se mide en `cqw` (1 % del ancho del lienzo), así el
   centro del globo (63,88 % · 20,04 %) cae siempre en el mismo píxel del
   dibujo, a 1100 px o a 1920 px. */
.ezx-hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 70% 30%,#0d2a6b 0%,#071434 45%,#050a18 100%);color:#fff;isolation:isolate}
html:not(.dark) .ezx-hero{background:radial-gradient(120% 90% at 70% 30%,#ffffff 0%,#eef4ff 55%,#e3ecfb 100%);color:var(--x-ink)}
.ezx-hero-stage{position:relative;width:100%;max-width:1672px;margin:0 auto;aspect-ratio:1672/845;container-type:inline-size}
.ezx-hero-art{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
/* 30/10: el arte publicado se veía apagado («como copia de impresión»): más saturación y contraste en oscuro.
   WEB-COLOR-PREMIUM-20261030: el brillo 1.08 aclaraba la neblina azul y lavaba la foto. El arte se
   regradó en el propio archivo (negro real, contraste local, luces cálidas, viñeta); aquí solo un
   empujón de saturación, sin subir el brillo. */
html.dark .ezx-art-dark{filter:saturate(1.08) contrast(1.03)}
.ezx-art-light{display:none}
html:not(.dark) .ezx-art-dark{display:none}
html:not(.dark) .ezx-art-light{display:block}
@media(min-width:1673px){.ezx-hero-art{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent)}}
.ezx-hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,8,24,.82) 0%,rgba(4,10,30,.5) 26%,rgba(4,10,30,0) 44%),linear-gradient(0deg,rgba(var(--x-bg-rgb),.6) 0%,transparent 12%);pointer-events:none}
html:not(.dark) .ezx-hero-shade{background:linear-gradient(90deg,rgba(243,246,252,.96) 0%,rgba(243,246,252,.78) 28%,rgba(243,246,252,0) 48%),linear-gradient(0deg,rgba(243,246,252,.9) 0%,transparent 14%)}
.ezx-hero-copy{position:absolute;top:0;bottom:0;left:max(var(--x-pad),calc((100cqw - var(--x-max))/2 + var(--x-pad)));z-index:4;display:flex;width:min(35.5cqw,580px);flex-direction:column;justify-content:center;padding-bottom:2cqw}
.ezx-eyebrow{margin:0 0 18px;color:#f0f5ff;font-size:clamp(11px,.92cqw,15px);font-weight:600;letter-spacing:.34em;line-height:1.55}
html:not(.dark) .ezx-eyebrow{color:var(--x-ink2)}
.ezx-h1{margin:0;color:#fff;font-size:clamp(44px,4.85cqw,84px);font-weight:800;line-height:1.02;letter-spacing:-.035em}
html:not(.dark) .ezx-h1{color:var(--x-ink)}
.ezx-h1>span{display:block}
.ezx-h1 em{font-style:normal}
.ezx-emp{background:linear-gradient(90deg,#2a7cff 0%,#1fa4ff 25%,#16d6ff 55%,#62f2ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(22,210,255,.55)) drop-shadow(0 0 30px rgba(40,120,255,.35))}
html:not(.dark) .ezx-emp{background:linear-gradient(90deg,#0a86e0,#0aa6f0);-webkit-background-clip:text;background-clip:text;filter:none}
.ezx-lead{max-width:30em;margin:22px 0 0;color:#e2eaff;font-size:clamp(16px,1.36cqw,22px);line-height:1.45}
html:not(.dark) .ezx-lead{color:var(--x-ink2)}
.ezx-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
.ezx-ctas .ezx-btn{min-height:58px;padding:14px 30px;font-size:19px}
.ezx-ctas .ezx-btn .ezhome-icon{width:22px;height:22px}
.ezx-play{width:30px;height:30px;flex:0 0 auto}

/* La órbita: centro del globo y radios de la elipse */
.ezx-orbit-zone{position:absolute;left:63.88cqw;top:20.04cqw;z-index:3;width:0;height:0;--rx:18.4cqw;--ry:15.3cqw;--T:42s;--ease:cubic-bezier(.37,0,.63,1)}
.ezx-rings{position:absolute;left:calc(var(--rx) * -1);top:calc(var(--ry) * -1);width:calc(var(--rx) * 2);height:calc(var(--ry) * 2);overflow:visible;pointer-events:none}
.ezx-rings ellipse{fill:none;stroke:rgba(70,190,255,.38);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:2 10;animation:ezx-dash 30s linear infinite}
.ezx-rings .ezx-ring-2{stroke:rgba(210,80,255,.22);stroke-dasharray:60 340;stroke-width:2;transform:scale(1.07);animation-duration:22s;animation-direction:reverse}
@keyframes ezx-dash{to{stroke-dashoffset:-400}}
.ezx-orbit{position:absolute;left:0;top:0;margin:0;padding:0;list-style:none}
.ezx-node{position:absolute;left:0;top:0;animation:ezx-x var(--T) var(--ease) var(--dx) infinite alternate;will-change:transform}
.ezx-node-y{animation:ezx-y var(--T) var(--ease) var(--dy) infinite alternate;will-change:transform}
@keyframes ezx-x{from{transform:translate3d(calc(var(--rx) * -1),0,0)}to{transform:translate3d(var(--rx),0,0)}}
@keyframes ezx-y{from{transform:translate3d(0,calc(var(--ry) * -1),0)}to{transform:translate3d(0,var(--ry),0)}}
.ezx-mod{position:absolute;left:0;top:0;display:flex;align-items:center;gap:.7cqw;transform:translate(-50%,-50%);border:1.5px solid transparent;border-radius:14px;background:linear-gradient(155deg,#132a66,#0a1638) padding-box,var(--x-neon) border-box;padding:.62cqw 1.05cqw .62cqw .8cqw;color:#fff;font-size:clamp(11px,.86cqw,15px);font-weight:700;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 26px rgba(0,0,0,.4),0 0 16px rgba(34,200,255,.35),0 0 30px rgba(190,70,245,.18)}
.ezx-mod .ezx-ic{width:clamp(20px,1.75cqw,30px);height:clamp(20px,1.75cqw,30px)}
.ezx-mod b{font-weight:700}
html:not(.dark) .ezx-mod{border-color:rgba(80,130,230,.3);background:rgba(255,255,255,.95);color:var(--x-ink);box-shadow:0 10px 26px rgba(20,50,120,.16)}
/* Se detiene: botón, fuera de pantalla, pestaña oculta y ratón encima. */
.ezx-hero:is(.is-paused,.is-offscreen,.is-hidden) :is(.ezx-node,.ezx-node-y,.ezx-rings ellipse){animation-play-state:paused}
@media(hover:hover) and (pointer:fine){.ezx-orbit:hover :is(.ezx-node,.ezx-node-y){animation-play-state:paused}}
.ezx-orbit-toggle{position:absolute;left:calc(63.88cqw - 21px);top:40.6cqw;z-index:5;display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(110,200,255,.45);border-radius:50%;background:rgba(4,14,36,.7);color:#dff4ff;cursor:pointer;backdrop-filter:blur(8px)}
.ezx-orbit-toggle .ezhome-icon{width:17px;height:17px}
.ezx-orbit-toggle:hover{border-color:var(--x-cyan);box-shadow:var(--x-glow)}
html:not(.dark) .ezx-orbit-toggle{background:rgba(255,255,255,.85);color:var(--x-ink)}

/* Video de presentación (diálogo) */
.ezo-dlg{width:min(960px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid rgba(90,170,255,.35);border-radius:20px;background:#030916;padding:0;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ezo-dlg::backdrop{background:rgba(2,6,18,.78);backdrop-filter:blur(6px)}
.ezo-dlg video{display:block;width:100%;max-height:calc(100dvh - 34px);background:#000}
.ezo-x{position:absolute;top:10px;right:10px;z-index:2;display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.ezo-x svg{width:20px;height:20px}
.ezo-dlg-msg{margin:0;padding:40px 24px;text-align:center;color:#dbe6ff}
.ezo-dlg-msg a{color:#5cd6ff;font-weight:700}

/* ---------- 6. Baldosas, cifras y tarjetas ------------------------------ */
.ezx-tiles{display:none}
.ezx-tile{display:flex;min-height:118px;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--x-line-strong);border-radius:16px;background:linear-gradient(160deg,var(--x-surface2),var(--x-surface));padding:12px 6px;color:var(--x-ink);text-align:center;box-shadow:var(--x-glow);transition:transform .22s var(--x-ease),border-color .22s}
.ezx-tile:nth-child(4n+2),.ezx-tile:nth-child(4n+4){border-color:rgba(200,80,255,.4)}
.ezx-tile .ezx-ic{width:38px;height:38px}
.ezx-tile b{font-size:14px;font-weight:650;line-height:1.2}
.ezx-tile:active{transform:scale(.97)}

.ezx-stats{max-width:var(--x-max);margin:0 auto;padding:22px var(--x-pad)}
.ezx-stats ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}
.ezx-stats li{display:flex;align-items:center;gap:16px;padding:10px clamp(10px,1.8vw,30px)}
.ezx-stats li+li{border-left:1px solid var(--x-line)}
.ezx-stats li:first-child{padding-left:0}
.ezx-stats .ezx-ic{width:40px;height:40px}
.ezx-stats p{display:grid;gap:3px;margin:0}
.ezx-stats b{color:var(--x-ink);font-size:clamp(17px,1.35vw,21px);font-weight:700;letter-spacing:-.01em}
.ezx-stats span{color:var(--x-muted);font-size:14px}

.ezx-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:var(--x-max);margin:0 auto;padding:8px var(--x-pad) 0}
.ezx-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--x-line-strong);border-radius:var(--x-radius-lg);background:linear-gradient(180deg,var(--x-surface2),var(--x-surface));box-shadow:var(--x-shadow);transition:transform .3s var(--x-ease),border-color .3s,box-shadow .3s}
.ezx-card-media{position:relative;height:170px;overflow:hidden}
.ezx-card-media:after{position:absolute;inset:0;content:'';background:linear-gradient(0deg,var(--x-surface2) 0%,transparent 55%)}
.ezx-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--x-ease)}
.ezx-card-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:4px 24px 24px}
.ezx-card h3{margin:0;color:var(--x-ink);font-size:21px;font-weight:700;letter-spacing:-.01em}
.ezx-card p{margin:10px 0 18px;color:var(--x-muted);font-size:15px;line-height:1.5}
.ezx-card .ezx-btn{margin-top:auto}
.ezx-card-brand{display:none}
@media(hover:hover) and (pointer:fine){
  .ezx-card:hover{transform:translateY(-5px);border-color:rgba(60,200,255,.6);box-shadow:var(--x-shadow),0 0 28px rgba(40,170,255,.22)}
  .ezx-card:hover .ezx-card-media img{transform:scale(1.04)}
  .ezx-tile:hover{transform:translateY(-3px);border-color:var(--x-cyan)}
}

/* ---------- 7. Secciones de la portada --------------------------------- */
.ezhome-main{display:block;background:var(--x-bg)}
.ezhome-section-head{text-align:center}
.ezhome-section-head>p{margin:0 0 10px;color:var(--x-cyan-text);font-size:12px;font-weight:800;letter-spacing:.28em}
.ezhome-section-head h2{margin:0;color:var(--x-ink);font-size:clamp(30px,3.2vw,48px);font-weight:800;line-height:1.1;letter-spacing:-.03em}
.ezhome-section-head h2 span{background:var(--x-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ezhome-section-head>span{display:block;max-width:640px;margin:14px auto 0;color:var(--x-muted);font-size:16px;line-height:1.6}

/* Vitrinas de catálogo real: servicios y productos */
.ezhome-servicios,.ezx-productos{display:flex;max-width:var(--x-max);margin:0 auto;flex-direction:column;align-items:center;padding:var(--x-space) var(--x-pad) 0}
.ezhome-servicios-grid{display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.ezhome-servicio{display:flex;min-height:200px;flex-direction:column;align-items:flex-start;gap:10px;border:1px solid var(--x-line);border-radius:var(--x-radius);background:linear-gradient(160deg,var(--x-surface2),var(--x-surface));padding:24px;color:var(--x-ink);transition:transform .25s var(--x-ease),border-color .25s,box-shadow .25s}
.ezhome-servicio-icon{display:grid;width:50px;height:50px;place-items:center;border:1px solid rgba(60,190,255,.35);border-radius:14px;background:linear-gradient(140deg,rgba(20,180,255,.16),rgba(200,60,240,.14));color:var(--x-cyan-text)}
.ezhome-servicio-icon .ezhome-icon{width:24px;height:24px}
.ezhome-servicio b{font-size:18px;font-weight:700;line-height:1.25}
.ezhome-servicio-txt{color:var(--x-muted);font-size:14px;line-height:1.5}
.ezhome-servicio em{display:flex;align-items:center;gap:6px;margin-top:auto;color:var(--x-cyan-text);font-size:14px;font-style:normal;font-weight:700}
.ezhome-servicio em .ezhome-icon{width:16px;height:16px}
.ezhome-servicios-cta{margin-top:30px}
.ezx-productos-grid{display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:36px}
.ezx-prod{display:flex;flex-direction:column;gap:6px;border:1px solid var(--x-line);border-radius:var(--x-radius);background:linear-gradient(160deg,var(--x-surface2),var(--x-surface));padding:14px 14px 18px;color:var(--x-ink);transition:transform .25s var(--x-ease),border-color .25s,box-shadow .25s}
.ezx-prod-img{display:grid;aspect-ratio:1;margin-bottom:8px;place-items:center;overflow:hidden;border-radius:14px;background:radial-gradient(circle at 50% 40%,rgba(40,170,255,.18),transparent 70%),var(--x-bg2)}
.ezx-prod-img img{width:86%;height:86%;object-fit:contain;transition:transform .5s var(--x-ease)}
.ezx-prod-img .ezx-ic{width:56px;height:56px}
.ezx-prod small{color:var(--x-cyan-text);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ezx-prod b{font-size:16px;font-weight:700;line-height:1.3}
.ezx-prod em{margin-top:4px;color:var(--x-ink);font-size:18px;font-style:normal;font-weight:800}
@media(hover:hover) and (pointer:fine){
  .ezhome-servicio:hover,.ezx-prod:hover{transform:translateY(-4px);border-color:rgba(60,200,255,.55);box-shadow:0 0 26px rgba(40,170,255,.18)}
  .ezx-prod:hover .ezx-prod-img img{transform:scale(1.05)}
}

/* EZEM ONE en movimiento */
.ezhome-sentinel-showcase{max-width:var(--x-max);margin:0 auto;padding:var(--x-space) var(--x-pad) 0}
.ezhome-showcase-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:24px}
.ezhome-showcase-head>div:first-child>p:first-child{margin:0 0 10px;color:var(--x-cyan-text);font-size:12px;font-weight:800;letter-spacing:.28em}
.ezhome-showcase-head h2{margin:0;color:var(--x-ink);font-size:clamp(30px,3.2vw,48px);font-weight:800;line-height:1.1;letter-spacing:-.03em}
.ezhome-showcase-head h2 span{background:var(--x-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ezhome-showcase-head>div:first-child>p:last-child{max-width:640px;margin:14px 0 0;color:var(--x-muted);font-size:16px;line-height:1.6}
.ezhome-showcase-nav{display:flex;align-items:center;gap:8px}
.ezhome-showcase-nav button{display:grid;width:44px;height:44px;place-items:center;border:1px solid var(--x-line-strong);border-radius:50%;background:transparent;color:var(--x-ink);cursor:pointer;transition:border-color .2s,color .2s}
.ezhome-showcase-nav button:first-child .ezhome-icon{transform:rotate(180deg)}
.ezhome-showcase-nav button:hover{border-color:var(--x-cyan);color:var(--x-cyan-text)}
.ezhome-showcase-nav>span{min-width:50px;color:var(--x-muted);font-size:13px;text-align:center}
.ezhome-showcase-nav>span b{color:var(--x-ink)}
.ezhome-showcase-nav [data-ezhome-pause]{display:flex;width:auto;gap:7px;border-radius:999px;padding:0 14px}
.ezhome-showcase-nav [data-ezhome-pause] .ezhome-icon{width:16px}
.ezhome-showcase-nav [data-ezhome-pause] span{font-size:13px;font-weight:700}
.ezhome-showcase-nav [data-ezhome-pause][hidden]{display:none!important}
/* Las diapositivas comparten una celda: la más larga decide la altura. */
.ezhome-showcase-stage{position:relative;display:grid;min-height:560px;overflow:hidden;border:1px solid rgba(74,149,239,.3);border-radius:var(--x-radius-lg);background:#061026;box-shadow:var(--x-shadow),0 0 40px rgba(30,120,255,.12);outline:0;isolation:isolate}
.ezhome-showcase-slide{position:relative;grid-area:1/1;min-width:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.85fr);opacity:0;visibility:hidden;transform:translateX(12px);transition:opacity .45s ease,transform .45s var(--x-ease),visibility 0s linear .45s;pointer-events:none}
.ezhome-showcase-slide.is-active{z-index:2;opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
.ezhome-showcase-visual{position:relative;min-width:0;overflow:hidden;background:#020a17}
.ezhome-showcase-visual:after{position:absolute;inset:0;content:'';background:linear-gradient(90deg,transparent 62%,#061026);pointer-events:none}
.ezhome-showcase-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ezhome-slide-demo-badge{position:absolute;z-index:2;top:18px;left:18px;display:flex;align-items:center;gap:7px;border:1px solid rgba(91,222,255,.35);border-radius:999px;background:rgba(3,16,38,.82);padding:7px 11px;color:#bcefff;font-size:11px;font-weight:800;letter-spacing:.13em}
.ezhome-slide-demo-badge:before{width:7px;height:7px;border-radius:50%;background:#27e1a8;box-shadow:0 0 9px rgba(39,225,168,.72);content:''}
.ezhome-showcase-copy{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(140deg,#061026,#0a1838);padding:40px 36px;color:#fff}
.ezhome-showcase-copy>p{margin:0 0 9px;color:#5cd6ff;font-size:12px;font-weight:800;letter-spacing:.22em}
.ezhome-showcase-copy h3{margin:0;font-size:36px;font-weight:800;line-height:1.05;letter-spacing:-.03em}
.ezhome-showcase-copy>span{margin-top:15px;color:#c9d6ee;font-size:15px;line-height:1.55}
.ezhome-showcase-copy ul{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.ezhome-showcase-copy li{display:flex;align-items:center;gap:5px;border:1px solid rgba(86,209,255,.25);border-radius:999px;background:rgba(15,104,191,.14);padding:7px 11px;color:#e7f8ff;font-size:12px;font-weight:700}
.ezhome-showcase-copy li .ezhome-icon{width:14px;height:14px;color:#36d6ff}
.ezhome-showcase-copy>div:last-child{display:grid;gap:10px;margin-top:26px}
.ezhome-showcase-copy .ezx-btn{width:100%}
.ezhome-demo-board{margin-top:17px;border:1px solid rgba(72,214,255,.22);border-radius:14px;background:rgba(3,16,36,.5);padding:13px 14px}
.ezhome-demo-label{display:flex;align-items:center;gap:6px;color:#85eaff;font-size:11px;font-weight:800;letter-spacing:.14em}
.ezhome-demo-label>span{width:7px;height:7px;border-radius:50%;background:#25e3a8;box-shadow:0 0 9px rgba(37,227,168,.72)}
.ezhome-demo-stats{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:8px;margin-top:11px}
.ezhome-demo-stats>div{border-radius:9px;background:rgba(255,255,255,.05);padding:9px 10px}
.ezhome-demo-stats small,.ezhome-demo-stats b{display:block}
.ezhome-demo-stats small{color:#a9bdd5;font-size:11px}
.ezhome-demo-stats b{margin-top:2px;color:#fff;font-size:16px}
.ezhome-demo-chart{margin-top:11px}
.ezhome-demo-chart>div{display:flex;align-items:center;justify-content:space-between}
.ezhome-demo-chart>div b{color:#dcecff;font-size:12px}
.ezhome-demo-chart>div span{color:#35e5a9;font-size:12px;font-weight:800}
.ezhome-demo-chart svg{display:block;width:100%;height:58px;margin-top:6px}
.ezhome-chart-grid{fill:none;stroke:rgba(255,255,255,.07)}
.ezhome-chart-area{fill:url(#ezhChartFill)}
.ezhome-chart-line{fill:none;stroke:#18d9f4;stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;animation:ezhome-draw 1.6s var(--x-ease) .3s forwards}
@keyframes ezhome-draw{to{stroke-dashoffset:0}}
.ezhome-showcase-dots{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:16px}
.ezhome-showcase-dots button{position:relative;width:34px;height:44px;border:0;background:transparent;padding:0;cursor:pointer}
.ezhome-showcase-dots button:before{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:999px;background:var(--x-line-strong);content:'';transform:translate(-50%,-50%);transition:width .3s,background .3s}
.ezhome-showcase-dots button.is-active:before{width:24px;background:var(--x-grad)}

/* Divisiones */
.ezhome-divisions{max-width:var(--x-max);margin:0 auto;padding:var(--x-space) var(--x-pad) 0}
.ezhome-division-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px}
.ezhome-division{position:relative;min-height:340px;overflow:hidden;border:1px solid var(--x-line-strong);border-radius:var(--x-radius-lg);background:#071530;color:#fff;isolation:isolate;transition:transform .3s var(--x-ease),border-color .3s,box-shadow .3s}
.ezhome-division>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--x-ease)}
.ezhome-division-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(var(--x-deep-rgb),.96) 0%,rgba(var(--x-deep-rgb),.6) 50%,rgba(var(--x-deep-rgb),.1) 100%)}
.ezhome-division-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:24px}
.ezhome-division-icon{display:grid;width:46px;height:46px;place-items:center;border:1px solid rgba(110,210,255,.45);border-radius:13px;background:linear-gradient(140deg,rgba(20,170,255,.3),rgba(200,60,240,.25));color:#8ff0ff}
.ezhome-division-icon .ezhome-icon{width:25px;height:25px}
.ezhome-division h3{margin:16px 0 8px;font-size:23px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.ezhome-division p{margin:0;color:#dbe6fb;font-size:15px;line-height:1.5}
.ezhome-division a{display:inline-flex;min-height:44px;align-items:center;gap:8px;margin-top:18px;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:10px 18px;color:#fff;font-size:14px;font-weight:700;transition:background .2s,border-color .2s}
.ezhome-division a .ezhome-icon{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){
  .ezhome-division:hover{transform:translateY(-4px);border-color:rgba(60,200,255,.55);box-shadow:0 0 28px rgba(40,170,255,.2)}
  .ezhome-division:hover>img{transform:scale(1.04)}
  .ezhome-division a:hover{border-color:#5cd6ff;background:rgba(92,214,255,.12)}
}

/* Marcas */
.ezhome-brands{display:grid;max-width:var(--x-max);margin:var(--x-space) auto 0;grid-template-columns:200px 1fr auto;align-items:center;gap:26px;border-top:1px solid var(--x-line);border-bottom:1px solid var(--x-line);padding:22px var(--x-pad)}
.ezhome-brands>p{margin:0;color:var(--x-cyan-text);font-size:12px;font-weight:800;letter-spacing:.16em;line-height:1.3}
.ezhome-brands>div{display:flex;align-items:center;justify-content:space-around;gap:30px}
.ezhome-brands>div span{display:flex;align-items:center;gap:9px;color:var(--x-ink2)}
.ezhome-brands img{width:30px;height:30px;object-fit:contain}
html.dark .ezhome-brands img{filter:brightness(0) invert(1);opacity:.85}
.ezhome-brands b{font-size:14px;font-weight:650}
.ezhome-brands>a{display:flex;align-items:center;gap:6px;color:var(--x-cyan-text);font-size:14px;font-weight:700;white-space:nowrap}
.ezhome-brands>a .ezhome-icon{width:16px}

/* Mundo conectado */
.ezhome-global{position:relative;min-height:440px;margin-top:var(--x-space);overflow:hidden;background:#050d22;color:#fff;isolation:isolate}
.ezhome-global>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ezhome-global-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(var(--x-deep-rgb),.97),rgba(var(--x-deep-rgb),.75) 34%,rgba(var(--x-deep-rgb),.15) 70%),linear-gradient(0deg,rgba(var(--x-deep-rgb),.6),transparent 40%)}
.ezhome-global-inner{position:relative;z-index:2;display:flex;min-height:440px;align-items:center;justify-content:space-between;gap:40px;max-width:var(--x-max);margin:0 auto;padding:48px var(--x-pad)}
.ezhome-global-copy{max-width:440px}
.ezhome-global-copy h2{margin:0;font-size:clamp(34px,3.4vw,48px);font-weight:800;line-height:1.04;letter-spacing:-.03em}
.ezhome-global-copy p{margin:16px 0 24px;color:#d6e2fa;font-size:16px;line-height:1.55}
.ezhome-global-panel{width:390px;border:1px solid rgba(60,210,255,.5);border-radius:18px;background:rgba(6,20,52,.82);padding:22px 24px;box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 30px rgba(30,150,255,.15)}
.ezhome-global-badge{display:flex;align-items:center;gap:12px}
.ezhome-global-badge>.ezhome-icon{width:38px;height:38px;color:#5cd6ff}
.ezhome-global-badge b,.ezhome-global-badge small{display:block}
.ezhome-global-badge b{font-size:16px}
.ezhome-global-badge small{margin-top:4px;color:#b9d5f2;font-size:12px;line-height:1.35}
.ezhome-global-panel ul{display:grid;gap:9px;margin:18px 0 0;padding:0;list-style:none}
.ezhome-global-panel li{display:flex;align-items:center;gap:8px;color:#eaf7ff;font-size:14px}
.ezhome-global-panel li .ezhome-icon{width:16px;height:16px;color:#36d6ff}
.ezhome-global-panel>p{margin:14px 0 0;color:#fff;font-size:18px;font-style:italic;text-align:right;line-height:1.1}
.ezhome-global-panel>p em{background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:26px;font-weight:800}

/* Novedades del CMS (contrato de app.js intacto) */
.ezhome-cms{max-width:var(--x-max);margin:0 auto;padding:var(--x-space) var(--x-pad) 0}
.ezhome-cms>.carr{margin-top:26px;border-radius:var(--x-radius-lg);box-shadow:var(--x-shadow)}

/* ---------- 8. Pie ------------------------------------------------------- */
.ezhome-footer{position:relative;margin-top:var(--x-space);background:linear-gradient(180deg,#060c20,#040814);color:#fff}
.ezhome-footer:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';background:linear-gradient(90deg,transparent,rgba(34,200,255,.6),rgba(210,60,240,.55),transparent)}
html:not(.dark) .ezhome-footer{background:linear-gradient(180deg,#0b1533,#081027)}
.ezhome-footer-grid{display:grid;grid-template-columns:1.3fr repeat(4,.8fr) 1.2fr;gap:28px;max-width:var(--x-max);margin:0 auto;padding:60px var(--x-pad) 44px}
.ezhome-footer-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ezhome-footer-grid>div>b{margin-bottom:8px;color:#fff;font-size:13px;font-weight:800;letter-spacing:.08em}
.ezhome-footer-grid a,.ezhome-footer-grid p{margin:0;color:#b9c7e4;font-size:14px;line-height:1.55}
.ezhome-footer-grid a{padding-block:3px;transition:color .2s}
.ezhome-footer-grid a:hover{color:#5cd6ff}
.ezhome-footer-brand .ezhome-logo{width:200px}
.ezhome-footer-brand>p{margin:2px 0 8px}
.ezhome-social,.ezhome-social .soc-row{display:flex;gap:8px}
.ezhome-social .soc{display:grid;width:34px;height:34px;place-items:center;border:1px solid rgba(110,170,255,.3);border-radius:10px;background:rgba(255,255,255,.04)}
.ezhome-social .soc-svg{width:16px;height:16px}
.ezhome-footer-cta{border-left:1px solid rgba(110,170,255,.2);padding-left:26px}
.ezhome-footer-cta .ezx-btn{margin:6px 0 4px}
.ezhome-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:var(--x-max);margin:0 auto;border-top:1px solid rgba(110,170,255,.16);padding:22px var(--x-pad);color:#9fb0d0;font-size:13px}
.ezhome-footer-bottom>div{display:flex;gap:18px}
.ezhome-footer-bottom a{color:#9fb0d0}
.ezhome-footer-bottom a:hover{color:#5cd6ff}
.ezhome-footer-bottom button{display:flex;align-items:center;gap:7px;min-height:40px;border:1px solid rgba(110,170,255,.3);border-radius:999px;background:transparent;padding:0 14px;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.ezhome-footer-bottom button .ezhome-icon{width:18px;height:18px}

/* ---------- 9. Barra inferior del teléfono ------------------------------ */
.ezx-tabbar{display:none}

/* ---------- 10. Páginas internas (tienda, servicios, cuenta…) ------------
   Solo se les da el marco: fondo, superficies y bordes del diseño nuevo a
   través de las variables puente de arriba. Su maquetación sigue en
   app.css y paginas.css. */
.ezhome-secondary-main{min-height:60vh;background:var(--x-bg)}
html.dark .ezhome-secondary-main :is(.product-card,.service-card,.card,.panel,.box,.checkout-card,.cart-item,.summary,.filter-panel){border-color:var(--x-line)}

/* ---------- 11. Adaptable ------------------------------------------------ */
@media(max-width:1380px){
  .ezhome-favorites{display:none}
  .ezhome-nav{gap:20px}
  .ezhome-nav>a,.ezhome-nav summary{font-size:14px}
  .ezhome-logo{width:190px}
}
@media(max-width:1220px){
  .ezhome-search-link{display:none}
  .ezhome-contact{padding:10px 16px}
  .ezx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ezhome-division-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ezx-productos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ezhome-footer-grid{grid-template-columns:1.2fr repeat(4,.8fr)}
  .ezhome-footer-cta{grid-column:1/-1;display:grid!important;grid-template-columns:1fr auto auto;align-items:center!important;gap:6px 24px!important;border-top:1px solid rgba(110,170,255,.2);border-left:0;padding:22px 0 0}
  .ezhome-footer-cta>b,.ezhome-footer-cta>p{grid-column:1}
  .ezhome-footer-cta .ezx-btn{grid-column:2;grid-row:1/3}
  .ezhome-footer-cta>a:last-child{grid-column:3;grid-row:1/3}
}

/* Cabecera compacta (logo · idioma · tema · carrito · menú) por debajo de 1280 px:
   medido el 29/10, la cabecera completa necesita 1280 px y a 1100 se salía 88 px. */
@media(max-width:1279px){
  :root body.ez-public-root{--x-head-h:68px}
  .ezhome-nav,.ezhome-actions{display:none}
  .ezhome-mobile-actions{display:flex}
  .ezhome-logo{width:172px}
  .ezhome-mobile-actions .ezhome-lang{height:44px;padding:0 12px;margin-right:2px}
  .ezhome-mobile-menu{position:relative}
  .ezhome-mobile-menu>summary{display:grid;width:48px;height:48px;place-items:center;border:1px solid var(--x-line-strong);border-radius:14px;color:var(--x-ink);cursor:pointer}
  .ezhome-mobile-menu>summary .ezhome-icon{width:24px;height:24px}
  .ezhome-mobile-menu[open]>summary{border-color:var(--x-cyan);color:var(--x-cyan-text);box-shadow:var(--x-glow)}
  .ezhome-mobile-panel{position:fixed;z-index:110;top:calc(var(--x-head-h) + 8px + env(safe-area-inset-top));right:12px;display:grid;width:min(320px,calc(100vw - 24px));max-height:calc(100dvh - var(--x-head-h) - 96px - env(safe-area-inset-top));gap:3px;overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(84,190,255,.35);border-radius:20px;background:rgba(6,14,36,.98);padding:12px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
  .ezhome-mobile-panel a,.ezhome-mobile-panel>button{display:flex;min-height:46px;align-items:center;justify-content:space-between;gap:9px;border:0;border-radius:12px;background:transparent;padding:10px 12px;color:#eaf2ff;font-size:15px;font-weight:600;text-align:left;cursor:pointer}
  .ezhome-mobile-panel a:hover,.ezhome-mobile-panel>button:hover{background:rgba(65,200,255,.12)}
  .ezhome-mobile-panel>button .ezhome-icon{width:19px;height:19px;color:#5cd6ff}
  .ezhome-mobile-panel a b{display:grid;min-width:24px;height:24px;place-items:center;border-radius:999px;background:var(--x-grad);font-size:11px}
  .ezhome-mobile-sentinel{border:1px solid rgba(82,190,255,.2);border-radius:12px;background:rgba(255,255,255,.03)}
  .ezhome-mobile-sentinel>summary{display:flex;min-height:46px;align-items:center;justify-content:space-between;padding:10px 12px;color:#eaf2ff;font-size:15px;font-weight:650;cursor:pointer}
  .ezhome-mobile-sentinel>summary:after,.ezhome-mobile-sentinel>div>details>summary:after{content:'+';color:#5cd6ff}
  .ezhome-mobile-sentinel[open]>summary:after,.ezhome-mobile-sentinel>div>details[open]>summary:after{content:'−'}
  .ezhome-mobile-sentinel>div{display:grid;gap:4px;border-top:1px solid rgba(83,190,255,.15);padding:7px}
  .ezhome-mobile-sentinel>div>details{border-radius:9px;background:rgba(2,10,28,.4)}
  .ezhome-mobile-sentinel>div>details>summary{display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:8px 10px;color:#cfe0ff;font-size:14px;font-weight:600;cursor:pointer}
  .ezhome-mobile-sentinel ul{display:grid;gap:6px;margin:0;padding:2px 12px 10px;list-style:none}
  .ezhome-mobile-sentinel li{display:flex;align-items:flex-start;gap:6px;color:#a9bcdc;font-size:13px;line-height:1.35}
  .ezhome-mobile-sentinel li .ezhome-icon{width:13px;height:13px;color:#36d6ff}
  .ezhome-mobile-sentinel>div>a{margin-top:3px;background:rgba(22,125,239,.18);color:#64e8ff!important;font-size:14px!important}
  .ezhome-mobile-sentinel>div>a .ezhome-icon{width:16px;height:16px}

}

/* Tableta y teléfono: héroe apilado como la maqueta móvil (texto a la
   izquierda, globo a la derecha detrás del texto). */
@media(max-width:1099px){
  /* Héroe apilado: el arte se coloca de modo que el centro del globo caiga
     en --gx, --gy. El arte completo mide 1,9787 veces su alto y el globo
     está a 1,2640 alturas del borde izquierdo y a 0,3964 del superior. */
  .ezx-hero-stage{--ah:640px;--gx:68%;--at:24px;aspect-ratio:auto;min-height:calc(var(--ah) * .86 + var(--at));container-type:normal;padding:clamp(28px,6vw,56px) var(--x-pad) 40px;box-sizing:border-box}
  .ezx-hero-art{inset:auto;top:var(--at);left:calc(var(--gx) - var(--ah) * 1.264);width:auto;height:var(--ah);max-width:none;object-fit:fill;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%)}
  .ezx-emp{filter:drop-shadow(0 2px 8px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(30,200,255,.3))}
  .ezx-h1{text-shadow:0 2px 14px rgba(0,0,0,.6)}
  html:not(.dark) .ezx-h1{text-shadow:0 1px 10px rgba(255,255,255,.9)}
  .ezx-hero-shade{background:linear-gradient(90deg,rgba(var(--x-deep-rgb),.88) 0%,rgba(var(--x-deep-rgb),.55) 38%,rgba(var(--x-deep-rgb),0) 62%),linear-gradient(0deg,var(--x-bg) 0%,transparent 18%)}
  html:not(.dark) .ezx-hero-shade{background:linear-gradient(90deg,rgba(243,246,252,.94) 0%,rgba(243,246,252,.6) 40%,rgba(243,246,252,0) 64%),linear-gradient(0deg,var(--x-bg) 0%,transparent 18%)}
  .ezx-hero-copy{position:relative;top:auto;bottom:auto;left:auto;width:auto;max-width:52%;padding:0}
  .ezx-eyebrow{max-width:22em;font-size:12px}
  .ezx-h1{font-size:clamp(40px,7.4vw,66px)}
  .ezx-lead{max-width:24em;font-size:17px}
  .ezx-ctas{flex-direction:column;align-items:flex-start;gap:14px;margin-top:28px}
  .ezx-ctas .ezx-btn{min-width:min(300px,100%);min-height:56px;justify-content:center;padding:12px 26px;font-size:19px}
  .ezx-orbit-zone{left:var(--gx);top:calc(var(--at) + var(--ah) * .3964);--rx:calc(var(--ah) * .275);--ry:calc(var(--ah) * .30)}
  .ezx-mod{gap:0;border-radius:50%;padding:9px;font-size:0}
  .ezx-mod .ezx-ic{width:24px;height:24px}
  .ezx-mod b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ezx-orbit-toggle{left:auto;right:var(--x-pad);top:auto;bottom:18px}

  .ezx-tiles{display:grid;max-width:var(--x-max);margin:0 auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:6px var(--x-pad) 0}
  .ezx-stats li:nth-child(5){display:none}
  .ezx-stats ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ezx-cards{padding-top:6px}
  .ezhome-servicios-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ezhome-showcase-slide{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}
  .ezhome-showcase-copy{padding:30px 26px}
  .ezhome-showcase-copy h3{font-size:30px}
  .ezhome-brands{grid-template-columns:150px 1fr}
  .ezhome-brands>a{display:none}
  .ezhome-brands>div{justify-content:flex-start;overflow-x:auto;padding:4px 0;scrollbar-width:none}
  .ezhome-brands>div span{flex:0 0 auto}
  .ezhome-footer-grid{grid-template-columns:1.3fr repeat(2,1fr)}
}

/* Teléfono */
@media(max-width:760px){
  .ezhome-shell{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  body.ez-public-root .wa-float{right:14px;bottom:calc(86px + env(safe-area-inset-bottom));width:50px;height:50px}
  body.ez-public-root .toast{bottom:calc(90px + env(safe-area-inset-bottom))}
  body.ez-public-root .update-banner{right:12px;bottom:calc(90px + env(safe-area-inset-bottom));left:12px}
  .ezhome-head-main{height:calc(var(--x-head-h) + env(safe-area-inset-top));gap:8px;padding:env(safe-area-inset-top) 14px 0}
  .ezhome-logo{width:150px}
  .ezhome-cart-tablet{display:none}
  .ezhome-mobile-actions{gap:4px}
  .ezhome-mobile-actions .ezhome-lang{padding:0 10px;gap:5px}
  .ezhome-mobile-actions .ezhome-lang .ezhome-icon{width:18px;height:18px}

  .ezx-hero-stage{--ah:340px;--gx:62%;--at:28px;min-height:0;padding:26px 18px 30px}
  .ezx-hero-copy{max-width:100%}
  .ezx-eyebrow{max-width:16em;margin-bottom:12px;font-size:11px;letter-spacing:.3em}
  .ezx-h1{font-size:clamp(38px,11.4vw,48px);line-height:1.03}
  .ezx-h1>span:first-child{max-width:5.2em}
  .ezx-lead{max-width:58vw;margin-top:16px;font-size:16px;text-shadow:0 2px 12px rgba(0,0,0,.55)}
  html:not(.dark) .ezx-lead{text-shadow:0 1px 8px rgba(255,255,255,.9)}
  /* En claro, el globo brillante resta contraste al titular: el arte se atenúa. */
  html:not(.dark) .ezx-hero-art{opacity:.6}
  html:not(.dark) .ezx-emp{filter:drop-shadow(0 1px 6px rgba(255,255,255,.95))}
  .ezx-ctas{margin-top:24px;gap:12px}
  .ezx-ctas .ezx-btn{min-width:0;width:min(78vw,300px);min-height:54px;font-size:18.7px}
  .ezx-orbit-zone{--rx:116px;--ry:104px}
  .ezx-orbit{opacity:.92}
  .ezx-mod{padding:7px}
  .ezx-mod .ezx-ic{width:22px;height:22px}
  .ezx-orbit-toggle{width:38px;height:38px;right:14px;bottom:14px}

  .ezx-tiles{gap:9px;padding-top:4px}
  .ezx-tile{min-height:104px;gap:8px;border-radius:14px;padding:10px 4px}
  .ezx-tile .ezx-ic{width:34px;height:34px}
  .ezx-tile b{font-size:12.5px}

  .ezx-stats{padding:20px 14px 10px}
  .ezx-stats li{flex-direction:column;align-items:flex-start;gap:6px;padding:4px 8px}
  .ezx-stats li:first-child{padding-left:0}
  .ezx-stats .ezx-ic{width:28px;height:28px}
  .ezx-stats b{font-size:14px}
  .ezx-stats span{font-size:11.5px;line-height:1.3}

  /* La primera tarjeta es el cartel ancho «EZEM ONE» de la maqueta. */
  .ezx-cards{grid-template-columns:1fr 1fr;gap:12px;padding:12px 14px 0}
  .ezx-card-one{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.05fr;min-height:200px}
  .ezx-card-one .ezx-card-media{order:2;height:auto}
  .ezx-card-one .ezx-card-media:after{background:linear-gradient(90deg,var(--x-surface2) 0%,transparent 45%)}
  .ezx-card-one .ezx-card-body{order:1;justify-content:center;padding:18px 0 18px 18px}
  .ezx-card-one h3{display:none}
  .ezx-card-brand{display:block!important;margin:0!important;color:var(--x-ink)!important;font-size:30px!important;font-weight:800;line-height:1!important;letter-spacing:-.02em}
  .ezx-card-brand span{color:var(--x-cyan-text)}
  .ezx-card-one p{margin:8px 0 14px;font-size:14px}
  .ezx-card-support{display:none}
  .ezx-card-ai,.ezx-card-cloud{min-height:190px}
  .ezx-card-ai .ezx-card-media,.ezx-card-cloud .ezx-card-media{position:absolute;inset:0;height:auto}
  .ezx-card-ai .ezx-card-media:after,.ezx-card-cloud .ezx-card-media:after{background:linear-gradient(0deg,rgba(var(--x-deep-rgb),.95) 10%,rgba(var(--x-deep-rgb),.35) 70%)}
  .ezx-card-ai .ezx-card-body,.ezx-card-cloud .ezx-card-body{position:relative;justify-content:flex-end;height:100%;padding:14px;color:#fff}
  .ezx-card-ai h3,.ezx-card-cloud h3{color:#fff;font-size:16px}
  .ezx-card-ai p,.ezx-card-cloud p{margin:4px 0 10px;color:#d6e2fa;font-size:12.5px;line-height:1.35}
  .ezx-card-ai .ezx-btn,.ezx-card-cloud .ezx-btn{min-height:38px;border-color:rgba(255,255,255,.55);padding:7px 12px;color:#fff!important;font-size:12.5px}
  .ezx-card .ezx-btn-sm{min-height:40px}

  .ezhome-servicios,.ezx-productos,.ezhome-sentinel-showcase,.ezhome-divisions,.ezhome-cms{padding-right:14px;padding-left:14px}
  .ezhome-section-head h2,.ezhome-showcase-head h2{font-size:30px}
  .ezhome-section-head>span,.ezhome-showcase-head>div:first-child>p:last-child{font-size:15px}
  .ezhome-servicios-grid{grid-template-columns:1fr;gap:12px;margin-top:26px}
  .ezhome-servicio{min-height:0;padding:18px}
  .ezx-productos-grid{gap:12px;margin-top:26px}
  .ezx-prod{padding:10px 10px 14px}
  .ezx-prod b{font-size:14px}
  .ezx-prod em{font-size:16px}
  .ezhome-servicios-cta{width:100%}
  .ezhome-showcase-head{display:block;margin-bottom:20px}
  .ezhome-showcase-nav{margin-top:16px}
  .ezhome-showcase-nav [data-ezhome-pause]{margin-left:auto}
  .ezhome-showcase-stage{min-height:0}
  .ezhome-showcase-slide{grid-template-columns:1fr;grid-template-rows:280px auto}
  .ezhome-showcase-visual:after{background:linear-gradient(0deg,#061026 0%,transparent 45%)}
  .ezhome-showcase-copy{padding:24px 18px}
  .ezhome-showcase-copy h3{font-size:28px}
  .ezhome-showcase-dots{flex-wrap:wrap;gap:0}
  .ezhome-division-grid{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .ezhome-division{min-height:300px}
  .ezhome-brands{display:block;padding:18px 14px}
  .ezhome-brands>p{margin-bottom:12px}
  .ezhome-global{min-height:600px}
  .ezhome-global>img{object-position:62% center}
  .ezhome-global-shade{background:linear-gradient(180deg,rgba(var(--x-deep-rgb),.9),rgba(var(--x-deep-rgb),.5) 50%,rgba(var(--x-deep-rgb),.95))}
  .ezhome-global-inner{display:block;min-height:600px;padding:44px 18px 30px}
  .ezhome-global-copy h2{font-size:36px}
  .ezhome-global-panel{position:absolute;right:18px;bottom:30px;left:18px;width:auto;padding:18px}
  .ezhome-footer-grid{grid-template-columns:1fr 1fr;gap:26px 18px;padding:40px 18px 28px}
  .ezhome-footer-brand{grid-column:1/-1}
  .ezhome-footer-cta{grid-column:1/-1!important;display:flex!important;align-items:flex-start!important;border-top:1px solid rgba(110,170,255,.2);padding:22px 0 0}
  .ezhome-footer-cta .ezx-btn{width:100%}
  .ezhome-footer-bottom{display:grid;justify-items:center;gap:16px;padding:22px 18px;text-align:center}
  .ezhome-footer-bottom>div{order:-1;flex-wrap:wrap;justify-content:center;gap:14px}

  /* Barra inferior fija, como la maqueta */
  .ezx-tabbar{position:fixed;right:0;bottom:0;left:0;z-index:105;display:grid;grid-template-columns:repeat(5,1fr);height:calc(68px + env(safe-area-inset-bottom));border-top:1px solid var(--x-line-strong);background:var(--x-head);padding:0 6px env(safe-area-inset-bottom);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px)}
  .ezx-tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--x-ink2);font-size:12px;font-weight:600}
  .ezx-tabbar .ezhome-icon{width:24px;height:24px}
  .ezx-tabbar a.is-active{color:var(--x-cyan-text)}
  .ezx-tabbar a.is-active .ezhome-icon{filter:drop-shadow(0 0 6px rgba(34,200,255,.75))}
  .ezx-tabbar a>b{position:absolute;top:8px;left:calc(50% + 6px);display:grid;min-width:17px;height:17px;place-items:center;border-radius:999px;background:var(--x-grad);padding:0 4px;color:#fff;font-size:10px}
  .ezx-tabbar a>b:empty{display:none}
}
@media(max-width:380px){
  .ezhome-logo{width:132px}
  .ezhome-mobile-actions .ezhome-lang .ezhome-lang-caret{display:none}
  .ezx-hero-stage{--ah:310px;--gx:62%}
  .ezx-orbit-zone{--rx:104px;--ry:96px}
  .ezx-h1{font-size:36px}
  .ezx-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .ezx-tile b{font-size:11.5px}
  .ezx-cards{grid-template-columns:1fr}
  .ezx-card-one{grid-template-columns:1fr}
  .ezx-card-one .ezx-card-media{display:none}
}

/* «Reducir movimiento»: todo quieto; las tarjetas en su sitio de la elipse. */
@media(prefers-reduced-motion:reduce){
  .ezhome-shell *{scroll-behavior:auto!important;transition-duration:.01ms!important}
  .ezx-node,.ezx-node-y,.ezx-rings ellipse,.ezhome-chart-line{animation:none!important}
  .ezhome-chart-line{stroke-dashoffset:0}
  .ezx-node{transform:translate3d(calc(var(--sx) * var(--rx)),calc(var(--sy) * var(--ry)),0)}
  .ezx-orbit-toggle{display:none}
}

/* ---------- 12. Neón en oscuro (30/10/2026) -----------------------------
   El dueño, tras publicar: «los colores se ven como copia de impresión».
   La maqueta tiene bordes de neón cian → magenta y brillo; aquí se les da a
   baldosas, cifras, tarjetas y vitrinas solo en el tema oscuro. */
html.dark .ezx-tile,html.dark .ezx-card,html.dark .ezhome-servicio,html.dark .ezx-prod,html.dark .ezhome-division{border:1.5px solid transparent;background:linear-gradient(160deg,#0f1f4a,#081333) padding-box,var(--x-neon) border-box;box-shadow:var(--x-neon-glow)}
html.dark .ezx-tile:nth-child(4n+2),html.dark .ezx-tile:nth-child(4n+4){background:linear-gradient(160deg,#0f1f4a,#081333) padding-box,linear-gradient(135deg,#e244f5,#7a5cff 55%,#22e1ff) border-box}
html.dark .ezhome-division{background:#071530 padding-box,var(--x-neon) border-box}
html.dark .ezx-card-media:after{background:linear-gradient(0deg,#0f1f4a 0%,transparent 55%)}
html.dark .ezx-ic path:not(.s),html.dark .ezx-ic circle:not(.s),html.dark .ezx-ic rect:not(.s){filter:drop-shadow(0 0 4px rgba(40,200,255,.6))}
html.dark .ezx-ic .s{filter:drop-shadow(0 0 3px rgba(40,200,255,.55))}
html.dark .ezx-stats b,html.dark .ezx-card h3,html.dark .ezx-tile b{color:#fff}
html.dark .ezx-stats li+li{border-left-color:rgba(70,175,255,.35)}
html.dark .ezhome-nav>a.is-active,html.dark .ezhome-nav>details.is-active>summary{text-shadow:0 0 10px rgba(34,211,255,.6)}
html.dark .ezx-btn-cta{background:linear-gradient(90deg,#00c2ff,#2f6dff);box-shadow:0 0 18px rgba(0,180,255,.55),inset 0 1px 0 rgba(255,255,255,.3)}
html.dark .ezx-btn-grad{box-shadow:0 0 22px rgba(120,90,255,.5),0 10px 26px rgba(255,60,240,.22),inset 0 1px 0 rgba(255,255,255,.3)}
html.dark .ezx-btn-ghost{border-color:rgba(255,255,255,.85)}
@media(max-width:1099px){
  html.dark .ezx-hero-shade{background:linear-gradient(90deg,rgba(3,8,24,.78) 0%,rgba(3,8,24,.4) 40%,rgba(3,8,24,0) 62%),linear-gradient(0deg,var(--x-bg) 0%,transparent 16%)}
  html.dark .ezx-mod{background:linear-gradient(155deg,#16306f,#0a1638) padding-box,var(--x-neon) border-box}
}

/* ---------- 13. Color premium: neón, vidrio y luz (WEB-COLOR-PREMIUM-20261030)
   El dueño: «el mismo diseño, pero en la foto se ve hermoso y en vivo le falta
   color y brillo». Solo tema oscuro; mismo HTML, mismos textos. Todo con
   las variables del bloque de tokens (Ley 16). Sin animaciones nuevas: la
   luz es estática (gradientes y sombras), así que «reducir movimiento» no
   cambia nada aquí. */
/* Fondo casi negro azulado (#050a18) en vez del azul medio que lavaba la foto. */
html.dark .ezx-hero{background:var(--x-hero-bg)}
/* Viñeta y profundidad: bordes al azul noche, el centro (globo) libre. */
html.dark .ezx-hero-shade{background:
  radial-gradient(ellipse 70% 85% at 64% 46%,rgba(var(--x-night-rgb),0) 52%,rgba(var(--x-night-rgb),.55) 100%),
  linear-gradient(90deg,rgba(var(--x-night-rgb),.86) 0%,rgba(var(--x-night-rgb),.55) 26%,rgba(var(--x-night-rgb),0) 44%),
  linear-gradient(0deg,rgba(var(--x-bg-rgb),.85) 0%,transparent 14%),
  linear-gradient(180deg,rgba(var(--x-bg-rgb),.55) 0%,transparent 10%)}
/* Halo del holograma (bloom cian + magenta) y resplandor de los anillos de la
   plataforma. --H = alto del arte: el globo está a 0,3964 H y la plataforma a ~0,84 H. */
.ezx-orbit-zone{--H:50.54cqw}
html.dark .ezx-orbit-zone:before,html.dark .ezx-orbit-zone:after{position:absolute;content:'';pointer-events:none;mix-blend-mode:screen;border-radius:50%}
html.dark .ezx-orbit-zone:before{left:calc(var(--H) * -.5);top:calc(var(--H) * -.5);width:var(--H);height:var(--H);
  background:radial-gradient(circle at 50% 50%,rgba(var(--x-neo-cyan-rgb),.20) 0%,rgba(var(--x-neo-cyan-rgb),.10) 30%,transparent 44%),
  radial-gradient(circle at 50% 50%,transparent 36%,rgba(var(--x-neo-mag-rgb),.16) 43%,rgba(var(--x-neo-violet-rgb),.08) 50%,transparent 62%)}
html.dark .ezx-orbit-zone:after{left:calc(var(--H) * -.46);top:calc(var(--H) * .36);width:calc(var(--H) * .92);height:calc(var(--H) * .2);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(var(--x-neo-cyan-rgb),.30) 0%,rgba(var(--x-neo-cyan-rgb),.12) 45%,rgba(var(--x-neo-mag-rgb),.10) 70%,transparent 80%)}
html.dark .ezx-rings ellipse{stroke:rgba(var(--x-neo-cyan-rgb),.5);filter:drop-shadow(0 0 3px rgba(var(--x-neo-cyan-rgb),.7))}
html.dark .ezx-rings .ezx-ring-2{stroke:rgba(var(--x-neo-mag-rgb),.42);filter:drop-shadow(0 0 4px rgba(var(--x-neo-mag-rgb),.75))}
/* Fichas que flotan: vidrio oscuro con reflejo, borde cian y brillo suave. */
html.dark .ezx-mod{border-width:1px;background:var(--x-glass-sheen) padding-box,var(--x-glass-bg) padding-box,var(--x-glass-edge) border-box;box-shadow:var(--x-glass-glow)}
html.dark .ezx-mod .ezx-ic{filter:drop-shadow(0 0 5px rgba(var(--x-neo-cyan-rgb),.55))}
/* Titular: «tu empresa» de azul a cian eléctrico. */
html.dark .ezx-emp{background:var(--x-grad-emp);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(var(--x-neo-cyan-rgb),.5)) drop-shadow(0 0 28px rgba(var(--x-neo-blue-rgb),.35))}
html.dark .ezx-h1{color:var(--x-ink)}
/* La sombra del titular (teléfono) se pintaba ENCIMA del degradado recortado
   al texto y lo dejaba turbio: «tu empresa» lleva solo su propio brillo. */
html.dark .ezx-emp{text-shadow:none}
html.dark .ezx-lead{color:var(--x-lead)}
/* Botón principal: cian → magenta con resplandor; «Contacto»: cian. */
html.dark .ezx-btn-grad{background:var(--x-grad);box-shadow:var(--x-btn-glow);text-shadow:0 1px 3px rgba(10,10,60,.45)}
html.dark .ezx-btn-cta{background:var(--x-btn-cta);box-shadow:var(--x-btn-cta-glow);text-shadow:0 1px 2px rgba(0,30,80,.45)}
@media(hover:hover) and (pointer:fine){
  html.dark .ezx-btn-grad:hover,html.dark .ezx-btn-cta:hover{filter:brightness(1.1) saturate(1.1);box-shadow:var(--x-btn-glow),0 0 44px rgba(var(--x-neo-cyan-rgb),.3)}
}
/* Logo de neón: resplandor rosa más vivo. El brillo va en la caja, no en la
   imagen recortada: dentro del recorte (overflow:hidden) el halo se veía como
   un rectángulo morado. */
html.dark .ezhome-logo-image{filter:saturate(1.4)}
html.dark .ezhome-logo{filter:var(--x-logo-glow)}
/* Menú: subrayado activo en cian eléctrico. */
html.dark .ezhome-nav>a.is-active,html.dark .ezhome-nav>details.is-active>summary{color:var(--x-neo-cyan)}
html.dark .ezhome-nav>a.is-active:before,html.dark .ezhome-nav>details.is-active>summary:before{background:var(--x-neo-cyan);box-shadow:0 0 8px var(--x-neo-cyan),0 0 16px rgba(var(--x-neo-cyan-rgb),.6)}
html.dark .ezhome-header:after{background:linear-gradient(90deg,transparent,rgba(var(--x-neo-cyan-rgb),.6) 30%,rgba(var(--x-neo-mag-rgb),.55) 70%,transparent)}
/* Iconos: degradado cian → violeta con luz. */
html.dark .ezx-ic path:not(.s),html.dark .ezx-ic circle:not(.s),html.dark .ezx-ic rect:not(.s){filter:drop-shadow(0 0 5px rgba(var(--x-neo-cyan-rgb),.6))}
/* Baldosas, tarjetas y vitrinas: el mismo vidrio que las fichas. */
html.dark :is(.ezx-tile,.ezx-card,.ezhome-servicio,.ezx-prod){border-width:1px;background:var(--x-glass-sheen) padding-box,var(--x-glass-bg) padding-box,var(--x-glass-edge) border-box;box-shadow:var(--x-glass-glow)}
html.dark .ezx-tile:nth-child(4n+2),html.dark .ezx-tile:nth-child(4n+4){background:var(--x-glass-sheen) padding-box,var(--x-glass-bg) padding-box,var(--x-glass-edge-mag) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 18px rgba(var(--x-neo-mag-rgb),.16),0 12px 30px rgba(0,0,0,.45)}
html.dark .ezx-card-media:after{background:linear-gradient(0deg,rgba(var(--x-card-rgb),1) 0%,rgba(var(--x-card-rgb),.55) 30%,transparent 60%)}
html.dark .ezx-card-media img{filter:saturate(1.15) contrast(1.06)}
/* Banda de cifras: separadores con luz cian. */
html.dark .ezx-stats li+li{border-left-color:rgba(var(--x-neo-cyan-rgb),.28)}
/* Barra inferior del teléfono: activo en cian con luz. */
html.dark .ezx-tabbar{background:rgba(var(--x-bg-rgb),.9);border-top-color:rgba(var(--x-neo-cyan-rgb),.3);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
html.dark .ezx-tabbar a.is-active{color:var(--x-neo-cyan);text-shadow:0 0 10px rgba(var(--x-neo-cyan-rgb),.6)}
/* Tableta y teléfono: el arte se mide por --ah y el globo cae sobre el texto. */
@media(max-width:1099px){
  .ezx-orbit-zone{--H:var(--ah)}
  html.dark .ezx-hero-shade{background:
    linear-gradient(90deg,rgba(var(--x-night-rgb),.80) 0%,rgba(var(--x-night-rgb),.45) 40%,rgba(var(--x-night-rgb),0) 64%),
    linear-gradient(0deg,var(--x-bg) 0%,transparent 16%),
    linear-gradient(180deg,var(--x-bg) 0%,transparent 10%)}
  html.dark .ezx-emp{filter:drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(var(--x-neo-cyan-rgb),.5))}
  html.dark .ezx-lead{text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.75)}
  html.dark .ezx-mod{background:var(--x-glass-sheen) padding-box,var(--x-glass-bg) padding-box,var(--x-glass-edge) border-box}
}
/* Teléfono: las tarjetas con foto de fondo (IA, Nube) y el cartel EZEM ONE
   tienen su propio velo; el velo general de arriba (y el de la sección 12) lo
   pisaba y el texto quedaba sobre la foto clara. Se les devuelve el suyo. */
@media(max-width:760px){
  html.dark .ezx-card-one .ezx-card-media:after{background:linear-gradient(90deg,rgba(var(--x-card-rgb),1) 0%,rgba(var(--x-card-rgb),0) 45%)}
  html.dark :is(.ezx-card-ai,.ezx-card-cloud) .ezx-card-media:after{background:linear-gradient(0deg,rgba(var(--x-deep-rgb),.96) 14%,rgba(var(--x-deep-rgb),.84) 58%,rgba(var(--x-deep-rgb),.5) 100%)}
}

/* ---------- 14. Teléfono como la maqueta (WEB-COLOR-PREMIUM-20261030, rondas 2 y 3)
   Ronda 2 (coordinador): las fichas de la órbita caían sobre el titular y el
   subtítulo. Ronda 3 (el dueño, con la maqueta del teléfono: «asiiiii»):
   héroe compacto, globo grande a la derecha con su plataforma, cuadrícula de
   8 módulos compacta, cifras en una fila, tarjeta EZEM ONE y las dos tarjetas
   lado a lado, WhatsApp sin tapar baldosas. Solo CSS y solo ≤768 px; el
   escritorio aprobado no cambia. Mismo HTML y mismos textos. */
@media(max-width:768px){
  /* --- Héroe compacto --- */
  /* Sin órbita: el globo de la maqueta va sin fichas (ni anillos ni pausa). */
  .ezx-orbit,.ezx-rings,.ezx-orbit-toggle{display:none}
  html.dark .ezx-orbit-zone:before,html.dark .ezx-orbit-zone:after{display:none}
  /* Globo a la derecha y a media altura: centro en --gx y en --at + 0,3964·--ah; radio ≈0,25·--ah. */
  .ezx-hero-stage{--ah:300px;--gx:70%;--at:118px;padding:18px 18px 22px}
  .ezx-hero-art{-webkit-mask-image:radial-gradient(ellipse 58% 50% at 63.9% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 58% 50% at 63.9% 50%,#000 60%,transparent 100%)}
  /* Etiqueta en 2 líneas. */
  .ezx-eyebrow{width:min(19.5em,100%);max-width:none;margin-bottom:8px;font-size:10.5px;letter-spacing:.24em;line-height:1.6}
  /* Titular en 3 líneas, «Control / total de / tu empresa»: los dos spans
     fluyen en línea y «tu empresa» no se parte. */
  .ezx-h1{max-width:5.15em;font-size:clamp(34px,10.2vw,42px);line-height:1.04}
  .ezx-h1>span{display:inline}
  .ezx-h1>span:first-child{max-width:none}
  .ezx-emp{display:inline-block;white-space:nowrap}
  .ezx-lead{max-width:calc(var(--gx) - 92px);margin-top:12px;font-size:15px;line-height:1.42}
  @media(max-width:370px){.ezx-hero-stage{--gx:74%}.ezx-lead{max-width:calc(var(--gx) - 80px);font-size:14px}.ezx-card-ai .ezx-btn,.ezx-card-cloud .ezx-btn{font-size:11.5px;padding:6px 8px}}
  /* Botones de ancho automático, los dos iguales (el más ancho manda). */
  .ezx-ctas{display:grid;width:max-content;max-width:100%;gap:10px;margin-top:18px}
  .ezx-ctas .ezx-btn{width:auto;min-width:0;min-height:48px;padding:10px 24px;font-size:16px}
  .ezx-ctas .ezx-btn .ezhome-icon{width:19px;height:19px}
  .ezx-play{width:24px;height:24px}
  /* Velo oscuro tras la columna de texto: AA aunque el halo del globo se acerque. */
  html.dark .ezx-hero-shade{background:
    radial-gradient(ellipse 70% 62% at 16% 44%,rgba(var(--x-night-rgb),.72) 0%,rgba(var(--x-night-rgb),.35) 60%,rgba(var(--x-night-rgb),0) 100%),
    linear-gradient(0deg,var(--x-bg) 0%,transparent 14%),
    linear-gradient(180deg,var(--x-bg) 0%,transparent 10%)}
  /* «Ver video» sobre la plataforma: fondo casi opaco para que el rótulo del arte no lo cruce. */
  html.dark .ezx-btn-ghost{background:rgba(var(--x-night-rgb),.82)}

  /* --- Cuadrícula de 8 módulos compacta (2 filas de 4) --- */
  .ezx-tiles{gap:8px;padding:4px 12px 0}
  .ezx-tile{min-height:80px;gap:6px;border-radius:13px;padding:8px 3px}
  .ezx-tile .ezx-ic{width:30px;height:30px}
  .ezx-tile b{font-size:12.5px;line-height:1.15}

  /* --- Cifras en una fila de 4, letra pequeña, con separadores --- */
  .ezx-stats{padding:16px 12px 6px}
  .ezx-stats li{flex-direction:row;align-items:center;gap:5px;padding:2px 5px;min-width:0}
  .ezx-stats li:first-child{padding-left:0}
  .ezx-stats .ezx-ic{width:22px;height:22px}
  .ezx-stats p{min-width:0;gap:1px}
  .ezx-stats b{font-size:12.5px;line-height:1.15}
  .ezx-stats span{font-size:10px;line-height:1.2}
  @media(max-width:370px){.ezx-stats li{gap:4px;padding:2px 3px}.ezx-stats .ezx-ic{width:18px;height:18px}.ezx-stats b{font-size:11.5px}.ezx-stats span{font-size:9.5px}}

  /* --- Tarjetas: EZEM ONE ancha y las dos de abajo lado a lado --- */
  .ezx-cards{grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px 0}
  .ezx-card-one{grid-template-columns:1fr 1.05fr}
  .ezx-card-one .ezx-card-media{display:block}
  .ezx-card-one{min-height:170px}
  .ezx-card-one .ezx-card-body{padding:14px 0 14px 16px}
  .ezx-card-brand{font-size:27px!important}
  .ezx-card-one p{margin:6px 0 12px;font-size:13.5px;line-height:1.4}
  .ezx-card-ai,.ezx-card-cloud{min-height:170px}
  .ezx-card-ai .ezx-card-body,.ezx-card-cloud .ezx-card-body{padding:12px}
  .ezx-card-ai h3,.ezx-card-cloud h3{font-size:15px}
  .ezx-card-ai p,.ezx-card-cloud p{font-size:12px}
  .ezx-card .ezx-btn-sm{min-height:36px;max-width:100%;gap:6px;padding:6px 12px;font-size:12.5px}
  .ezx-card-ai .ezx-btn,.ezx-card-cloud .ezx-btn{padding:6px 10px;font-size:12px}
  .ezx-card .ezx-btn-sm .ezhome-icon{width:15px;height:15px}

  /* --- WhatsApp: abajo tapaba la 4.ª cifra (390 px) o una baldosa (360 px) en la
     primera pantalla. Va arriba a la derecha, bajo la cabecera, donde el héroe
     compacto deja un hueco libre (junto a la etiqueta), y algo más pequeño. --- */
  body.ez-public-root .wa-float{top:calc(var(--x-head-h) + env(safe-area-inset-top) + 12px);right:10px;bottom:auto;width:42px;height:42px}
  body.ez-public-root .wa-float::after{inset:-4px}

  /* --- Barra inferior: activo en cian con su luz --- */
  html.dark .ezx-tabbar a.is-active .ezhome-icon{color:var(--x-neo-cyan);filter:drop-shadow(0 0 6px rgba(var(--x-neo-cyan-rgb),.8))}
}