/* ==========================================================================
   APPSA Industrial — Experiencia inmersiva
   Materiales: acero cepillado · cromo/espejo · vidrio templado
   ========================================================================== */
html{font-size:80%}  /* escala general de la interfaz: 80 % = dos pasos de zoom hacia afuera */
:root{
  --blue:#0052D4; --blueB:#2E7BFF; --blueD:#003FA6;
  --carbon:#11151A; --steel:#2D3642; --gray:#6B727C; --silver:#D7DCE0;
  --ink:#EDF2F8; --muted:#97A2B1; --muted2:#C3CDDA;
  --disp:"Eurostile Extended","Eurostile","Michroma",system-ui,sans-serif;
  --ui:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --panelW:27.5rem;
  --foot:3.375rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --easeIO:cubic-bezier(.65,0,.35,1);
  /* Acero cepillado: ruido muy estirado en X = vetas del cepillado */
  --brushed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.82' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Grano fino del vidrio */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--ui);color:var(--ink);background:#080B0E;overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--blueB);outline-offset:0.1875rem;border-radius:0.375rem}
.eyebrow{margin:0;font-size:max(0.6562rem,9.6px);font-weight:700;letter-spacing:0.1625rem;text-transform:uppercase;color:var(--blueB)}

/* ---------------------------- Cromo / espejo ---------------------------- */
.chrome{
  background:
    linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) -160% 0/240% 100% no-repeat,
    linear-gradient(180deg,#FFFFFF 0%,#E9EEF4 20%,#B5C0CC 44%,#5E6A79 50%,#C7D0DA 57%,#F5F8FB 78%,#9AA6B4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep 7s var(--easeIO) infinite;
}
@keyframes sweep{0%,55%{background-position:-160% 0,0 0}85%,100%{background-position:260% 0,0 0}}
/* Reflejo tipo piso pulido / espejo (Chrome) */
.reflect{-webkit-box-reflect:none}   /* sitio solo en versión clara: sin reflejo */

/* ---------------------------- Acero cepillado ---------------------------- */
.steel{
  position:relative;
  background:var(--brushed),linear-gradient(180deg,#3B4450 0%,#283039 46%,#1D232B 100%);
  background-size:32.5rem 32.5rem,100% 100%;
  background-blend-mode:overlay,normal;
  border:1px solid #4C5765;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.55),0 0.625rem 1.75rem rgba(0,0,0,.45);
}
.steel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(12.5rem circle at var(--mx,-62.4375rem) var(--my,-62.4375rem),rgba(255,255,255,.22),transparent 60%);mix-blend-mode:overlay}
.spec .v.chrome,.stat-v.chrome,.ov-stats .chrome,.proc .big.chrome{background:
    linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) -160% 0/240% 100% no-repeat,
    linear-gradient(180deg,#FFFFFF 0%,#E1E8EF 42%,#A7B5C4 54%,#F2F6FA 76%,#BFCAD6 100%);
  -webkit-background-clip:text;background-clip:text}
.steel-bezel{
  position:relative;padding:0.625rem;border-radius:0.875rem;
  background:var(--brushed),linear-gradient(160deg,#5A6573 0%,#2E3640 35%,#4A5461 60%,#1E242C 100%);
  background-size:32.5rem 32.5rem,100% 100%;background-blend-mode:overlay,normal;
  border:1px solid #6B7787;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.6),0 1.5rem 3.75rem rgba(0,0,0,.6);
}
.steel-bezel::before{ /* luz especular que sigue el cursor sobre el metal */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(15rem circle at var(--mx,-62.4375rem) var(--my,-62.4375rem),rgba(255,255,255,.28),transparent 60%);
  mix-blend-mode:overlay;
}
.screw{position:absolute;width:0.4375rem;height:0.4375rem;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 30%,#F0F4F8 0 18%,#8C97A4 45%,#2B323B 100%);
  box-shadow:0 1px 1px rgba(0,0,0,.6)}
.screw::after{content:"";position:absolute;left:1px;right:1px;top:0.1875rem;height:1px;background:#2A3038;transform:rotate(35deg)}
.screw.tl{top:2px;left:2px}.screw.tr{top:2px;right:2px}.screw.bl{bottom:2px;left:2px}.screw.br{bottom:2px;right:2px}

/* ---------------------------- Vidrio templado ---------------------------- */
.glass{
  position:relative;isolation:isolate;
  background:
    var(--grain),
    linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.035) 38%,rgba(255,255,255,.015) 60%,rgba(255,255,255,.07) 100%),
    rgba(14,19,26,.52);
  background-size:13.75rem 13.75rem,100% 100%,100% 100%;
  -webkit-backdrop-filter:blur(1.375rem) saturate(150%);backdrop-filter:blur(1.375rem) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.45),
    inset 0 0 1.625rem rgba(120,200,185,.07),   /* espesor del vidrio: tono verdoso del canto */
    0 1.375rem 3.75rem rgba(0,0,0,.45);
  border-radius:1rem;
}
.glass::before{ /* patrón de templado (quench) + especular: solo visible bajo la "luz" del cursor */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    radial-gradient(23.75rem circle at var(--mx,-62.4375rem) var(--my,-62.4375rem),rgba(255,255,255,.16),transparent 45%),
    radial-gradient(circle,transparent 0 26%,rgba(120,175,255,.30) 34%,rgba(255,160,225,.16) 42%,transparent 54%) 0 0/2.75rem 2.75rem,
    radial-gradient(circle,rgba(130,255,215,.20) 0 20%,transparent 46%) 1.375rem 1.375rem/2.75rem 2.75rem;
  -webkit-mask:radial-gradient(16.25rem circle at var(--mx,-62.4375rem) var(--my,-62.4375rem),#000 0%,transparent 72%);
          mask:radial-gradient(16.25rem circle at var(--mx,-62.4375rem) var(--my,-62.4375rem),#000 0%,transparent 72%);
  opacity:.9;mix-blend-mode:screen;
}
.glass::after{ /* canto pulido del vidrio: borde degradado, frío/verdoso */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.62),rgba(165,225,212,.26) 28%,rgba(255,255,255,.05) 55%,rgba(150,215,205,.30) 82%,rgba(255,255,255,.46));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}

/* ---------------------------- Botones ---------------------------- */
.btn{text-decoration:none;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;
  padding:0.9375rem 1.5rem;border-radius:0.75rem;font-weight:700;font-size:0.7812rem;letter-spacing:1.4px;text-transform:uppercase;
  transition:transform .2s var(--ease),filter .2s,box-shadow .2s}
.btn-sm{padding:0.6875rem 1.125rem;font-size:max(0.6875rem,9.6px);border-radius:0.625rem}
.btn-block{width:100%}
.btn-primary{color:#fff;
  background:linear-gradient(180deg,#4A90FF 0%,#2370F0 30%,#0052D4 50%,#0049BF 54%,#1A63E0 100%);
  border:1px solid #5B9BFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25),0 0.75rem 2.125rem rgba(0,82,212,.45)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:left .6s var(--ease)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1rem 2.5rem rgba(0,82,212,.6)}
.btn-primary:hover::after{left:120%}
.btn-glass{color:#E4ECF6;border-radius:0.75rem}
.btn-glass:hover{transform:translateY(-1px)}

/* ======================= MUNDO / PLANTA ======================= */
#world{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(115% 75% at 50% -12%,rgba(0,82,212,.30) 0%,rgba(17,21,26,0) 58%),
    radial-gradient(80% 55% at 50% 112%,rgba(0,82,212,.12) 0%,rgba(17,21,26,0) 70%),
    linear-gradient(180deg,#0A0D11 0%,#11151A 46%,#080B0E 100%)}
#stage{position:absolute;inset:0;transition:filter 1.1s var(--ease),transform 1.4s var(--ease)}
#scene{width:100%;height:100%;display:block;touch-action:none}
.world-grade{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(150,180,225,.16) 1px,transparent 1px);background-size:1.625rem 1.625rem;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 62%);mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 62%);opacity:.5}
#world::after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity 1s var(--ease);
  background:linear-gradient(90deg,rgba(8,11,14,.92) 0%,rgba(8,11,14,.72) 32%,rgba(8,11,14,.12) 62%,rgba(8,11,14,0) 100%);opacity:0}
.mode-intro #world::after{opacity:1}
.mode-intro #stage{filter:brightness(.7) saturate(.92);transform:scale(1.02)}
.mode-intro #stage, .mode-station #stage{pointer-events:none}
.mode-intro #pins, .mode-intro .flowline-g{opacity:0}
#pins,.flowline-g{transition:opacity .8s var(--ease) .3s}
#scan{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,#9CC8FF 20%,#fff 50%,#9CC8FF 80%,transparent);
  box-shadow:0 0 1.125rem 0.25rem rgba(46,123,255,.55)}
#scan.run{animation:scan 1.5s var(--easeIO) forwards}
@keyframes scan{0%{opacity:0;transform:translateY(8vh)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(92vh)}}

/* elementos SVG interactivos */
[data-station]{cursor:pointer;transition:opacity .35s ease}
body.hovering [data-station]:not([data-active]){opacity:.35}
.pin{cursor:pointer}
.pin .pin-ring{transition:.2s}
.pin:hover .pin-ring,.pin[data-active] .pin-ring{fill:#2E7BFF;stroke:#BBD8FF}
.flowline{stroke-dasharray:2 9;animation:dash 22s linear infinite}
.flowline.sp{stroke-dasharray:1 7;animation-duration:30s}
@keyframes dash{to{stroke-dashoffset:-220}}
.lamp{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
.pulse{animation:pulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{opacity:.55;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}

/* ======================= HEADER ======================= */
#top{position:fixed;z-index:40;top:1rem;left:1rem;right:1rem;height:3.875rem;display:flex;align-items:center;gap:1.375rem;padding:0 0.75rem 0 1.25rem;border-radius:1rem}
.brand{display:flex;align-items:center;gap:0.75rem;text-decoration:none;color:#fff;margin-right:auto}
.brand svg{width:2.125rem;height:1.6875rem}
.brand .wm{display:flex;flex-direction:column;gap:0.1875rem;padding-left:0.75rem;border-left:1px solid rgba(174,199,232,.25)}
.brand b{font-family:var(--disp);font-weight:400;font-size:1rem;letter-spacing:0.1625rem;line-height:1}
.brand .wm span{font-weight:600;font-size:max(0.4688rem,9.6px);letter-spacing:0.375rem;color:var(--blueB)}
.nav{display:flex;gap:0.25rem}
.nav a,.nav button{text-decoration:none;padding:0.625rem 0.875rem;border-radius:0.5625rem;font-size:0.75rem;font-weight:600;letter-spacing:.6px;color:#C9D4E2;transition:.18s}
.nav a:hover,.nav button:hover,.nav button.on{color:#fff;background:rgba(255,255,255,.07)}
.menu-btn{display:none;width:2.625rem;height:2.625rem;border-radius:0.625rem;flex-direction:column;align-items:center;justify-content:center;gap:0.3125rem}
.menu-btn span{width:1.125rem;height:2px;background:#DCE5F0;border-radius:2px;transition:.25s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(0.2188rem) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-0.2188rem) rotate(-45deg)}

/* ======================= HUD ======================= */
#hud{position:fixed;z-index:40;top:5.75rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0.625rem;
  padding:0.5rem 0.875rem;border-radius:62.4375rem;font-size:max(0.6562rem,9.6px);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
  transition:opacity .5s,transform .5s var(--ease)}
.hud-step{text-decoration:none;display:flex;align-items:center;gap:0.4375rem;color:var(--muted);transition:color .3s}
.hud-step i{width:0.4375rem;height:0.4375rem;border-radius:50%;border:1px solid #6C7A8C;transition:.3s}
.hud-step em{font-style:normal}
.hud-sep{width:1.375rem;height:1px;background:linear-gradient(90deg,#4A5666,#2E7BFF)}
.mode-intro [data-step="intro"],.mode-plant [data-step="plant"],.mode-station [data-step="station"]{color:#fff}
.mode-intro [data-step="intro"] i,.mode-plant [data-step="plant"] i,.mode-station [data-step="station"] i{background:#2E7BFF;border-color:#9CC8FF;box-shadow:0 0 0.625rem #2E7BFF}
.mode-intro [data-step="station"],.mode-plant [data-step="station"]{opacity:.45}
.mode-intro #hud{opacity:0;pointer-events:none;transform:translate(-50%,-0.375rem)}

/* ======================= PORTADA ======================= */
#intro{position:fixed;inset:0 0 var(--foot) 0;z-index:5;display:flex;align-items:center;padding:6.875rem 6vw 5.625rem;pointer-events:none}
.intro-copy{max-width:47.5rem;pointer-events:auto}
.intro-copy>*{transition:opacity .7s var(--ease),transform .9s var(--ease)}
#introTitle{font-family:var(--disp);font-weight:400;font-size:clamp(1.75rem,3.9vw,3.75rem);line-height:1.04;letter-spacing:.5px;margin:1.125rem 0 0;padding-bottom:.32em}
#intro .lead{margin:0;max-width:32.5rem;font-size:clamp(0.875rem,1.15vw,1.0312rem);line-height:1.7;color:var(--muted2)}
.intro-ctas{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.75rem}
.stats{list-style:none;padding:0;margin:2.375rem 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.625rem;max-width:42.5rem}
.stats li{padding:1rem 1rem 0.875rem;border-radius:0.875rem}
.stat-v{display:block;font-family:var(--disp);font-size:clamp(1.0625rem,1.65vw,1.5rem);line-height:1;white-space:nowrap}
.stat-v small{font-size:.52em;letter-spacing:1px;margin-left:0.1875rem}
.stat-l{display:block;margin-top:0.5625rem;font-size:max(0.6562rem,9.6px);line-height:1.35;color:var(--muted);font-weight:500}
.scroll-cue{position:absolute;left:50%;bottom:1.125rem;text-decoration:none;transform:translateX(-50%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:0.625rem;
  font-size:max(0.625rem,9.6px);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);transition:opacity .5s}
.scroll-cue span{width:1.375rem;height:2.25rem;border-radius:0.75rem;border:1.5px solid rgba(195,205,218,.5);position:relative}
.scroll-cue span::after{content:"";position:absolute;left:50%;top:0.4375rem;width:0.1875rem;height:0.4375rem;margin-left:-1.5px;border-radius:2px;background:#9CC8FF;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(0.75rem)}}
body:not(.mode-intro) #intro{visibility:hidden;transition:visibility 0s .9s}
body:not(.mode-intro) .intro-copy>*{opacity:0;transform:translateX(-2.875rem)}
body:not(.mode-intro) .intro-copy>*:nth-child(2){transition-delay:.05s}
body:not(.mode-intro) .intro-copy>*:nth-child(3){transition-delay:.1s}
body:not(.mode-intro) .intro-copy>*:nth-child(4){transition-delay:.15s}
body:not(.mode-intro) .intro-copy>*:nth-child(5){transition-delay:.2s}
body:not(.mode-intro) .scroll-cue{opacity:0}
.mode-intro .intro-copy>*{opacity:1;transform:none}
.mode-intro .intro-copy>*:nth-child(2){transition-delay:.12s}
.mode-intro .intro-copy>*:nth-child(3){transition-delay:.22s}
.mode-intro .intro-copy>*:nth-child(4){transition-delay:.32s}
.mode-intro .intro-copy>*:nth-child(5){transition-delay:.42s}
body.booting .intro-copy>*{opacity:0;transform:translateY(1.125rem)}

/* ======================= MONITOR ======================= */
#monitor{position:fixed;z-index:6;right:1.5rem;bottom:calc(var(--foot) + 1.125rem);width:16.875rem;
  transition:right .9s var(--ease),bottom .9s var(--ease),width .9s var(--ease),opacity .5s}
.mode-plant #monitor{right:1.5rem;bottom:calc(var(--foot) + 1.125rem);width:16.875rem}
.mode-station #monitor,.mode-intro #monitor{opacity:0;pointer-events:none;transform:translateY(0.75rem)}
.screen{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:0.375rem;overflow:hidden;background:#05070A;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 0 1.875rem rgba(0,0,0,.8)}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.1s var(--ease),transform 6s linear;filter:saturate(.85) contrast(1.06) brightness(.9)}
.screen img.on{opacity:1;transform:scale(1.08)}
.screen img:not(.on){opacity:0;transform:scale(1)}
.mon-grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,82,212,.18),rgba(0,0,0,0) 40%,rgba(0,0,0,.45)),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 0.1875rem);mix-blend-mode:normal}
.mon-scan{position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(180deg,transparent,rgba(140,190,255,.10),transparent);animation:monscan 4.5s linear infinite}
@keyframes monscan{to{top:110%}}
.bracket{position:absolute;width:0.875rem;height:0.875rem;border-color:rgba(200,225,255,.8);border-style:solid;border-width:0}
.b1{top:0.5625rem;left:0.5625rem;border-top-width:1.5px;border-left-width:1.5px}.b2{top:0.5625rem;right:0.5625rem;border-top-width:1.5px;border-right-width:1.5px}
.b3{bottom:0.5625rem;left:0.5625rem;border-bottom-width:1.5px;border-left-width:1.5px}.b4{bottom:0.5625rem;right:0.5625rem;border-bottom-width:1.5px;border-right-width:1.5px}
.mon-hud{position:absolute;left:1.875rem;right:1.875rem;top:0.8125rem;display:flex;justify-content:space-between;font-size:max(0.5625rem,9.6px);font-weight:700;letter-spacing:1.6px;color:#DCE9FF;text-shadow:0 1px 0.25rem #000}
.mon-hud b{font-weight:700}
.mon-hud b::before{content:"";display:inline-block;width:0.375rem;height:0.375rem;border-radius:50%;background:#2E7BFF;box-shadow:0 0 0.5rem #2E7BFF;margin-right:0.4375rem;vertical-align:1px;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.mon-foot{display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.25rem 0;font-size:max(0.7188rem,9.6px);font-weight:600;color:#E4ECF6}
.mon-num{font-family:var(--disp);font-size:max(0.625rem,9.6px);padding:0.25rem 0.4375rem;border-radius:0.3125rem;background:linear-gradient(180deg,#2E7BFF,#0052D4);color:#fff}
.mon-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-go{color:var(--blueB)}

/* ======================= VISTA GENERAL ======================= */
#overview{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.mode-plant #overview{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
/* tarjeta corporativa (vista de planta) */
.ov-highlight{position:absolute;left:1.5rem;top:6.5rem;width:min(26.5rem,calc(100vw - 3rem));max-height:calc(100vh - 6.5rem - var(--foot) - 8.5rem);
  display:flex;flex-direction:column;padding:1.375rem 1.5rem 1.25rem;pointer-events:auto;
  transform:translateX(-1.25rem);opacity:0;transition:transform .8s var(--ease) .35s,opacity .8s var(--ease) .35s}
.mode-plant .ov-highlight{transform:none;opacity:1}
.ov-highlight .ov-title{font-family:var(--disp);font-weight:400;font-size:1.25rem;line-height:1.32;margin:0.625rem 0 0.875rem;text-wrap:balance;flex:none}
.ov-body{min-height:0;overflow-y:auto;margin-right:-0.625rem;padding-right:0.625rem;scrollbar-width:thin;scrollbar-color:rgba(120,135,155,.45) transparent}
.ov-body.more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 2.25rem),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 2.25rem),transparent)}
.ov-body>p{margin:0 0 0.625rem;color:var(--muted2);font-size:0.8125rem;line-height:1.65}
.ov-body>p:first-child{color:var(--ink);font-weight:500}
.ov-highlight b{color:#fff}
.ov-brands{margin-top:1rem;padding-top:0.875rem;border-top:1px solid rgba(174,199,232,.14)}
.ov-brands-t{margin:0 0 0.625rem;font-size:max(0.5938rem,9.6px);font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.brands{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem}
.brands li{flex:0 0 calc((100% - 1rem) / 3);height:3.25rem;display:grid;place-items:center;border-radius:0.625rem;background:rgba(255,255,255,.95);box-shadow:inset 0 0 0 1px rgba(174,199,232,.2)}
.brands img{height:var(--h,1.5rem);width:auto;max-width:84%;object-fit:contain;transition:transform .25s var(--ease)}
.brands li:hover img{transform:scale(1.06)}
.ov-more{display:none}
/* procesos: título + chips */
.flow-wrap{position:absolute;left:1.5rem;bottom:calc(var(--foot) + 1.125rem);max-width:calc(100vw - 21.25rem);pointer-events:auto;
  opacity:0;transform:translateY(0.5rem);transition:opacity .7s var(--ease) .45s,transform .7s var(--ease) .45s}
.mode-plant .flow-wrap{opacity:1;transform:none}
.flow-title{display:flex;align-items:center;gap:0.625rem;margin:0 0 0.6875rem 0.125rem;font-family:var(--disp);font-weight:400;font-size:1.0625rem;letter-spacing:.02em;color:#fff;text-shadow:0 1px 0.75rem rgba(0,0,0,.45)}
.flow-dot{flex:none;width:0.5rem;height:0.5rem;border-radius:50%;background:#2E7BFF;animation:flowPulse 2.2s ease-in-out infinite}
@keyframes flowPulse{0%,100%{box-shadow:0 0 0 0.1875rem rgba(46,123,255,.28)}50%{box-shadow:0 0 0 0.5rem rgba(46,123,255,0)}}
.flow{display:flex;flex-wrap:wrap;gap:0.4375rem}
@media (max-width:1200px) and (min-width:901px){.ov-highlight{top:8.75rem;width:min(24rem,calc(100vw - 3rem));max-height:calc(100vh - 8.75rem - var(--foot) - 8.5rem)}}
.flow-group{display:flex;flex-wrap:wrap;gap:0.4375rem;align-items:center}
.flow-label{font-size:max(0.5938rem,9.6px);font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin:0 0.25rem 0 0.375rem}
.chip{text-decoration:none;font-size:max(0.7188rem,9.6px);font-weight:600;color:#C9D4E2;padding:0.5625rem 0.75rem;border-radius:0.5625rem;display:flex;align-items:center;gap:0.5rem;white-space:nowrap;transition:transform .18s,color .18s}
.chip b{font-family:var(--disp);font-weight:400;font-size:max(0.5938rem,9.6px);color:var(--blueB)}
.chip:hover,.chip.on{color:#fff;transform:translateY(-2px)}
.chip.on{background:linear-gradient(180deg,rgba(46,123,255,.9),rgba(0,82,212,.9))}
.chip.on b{color:#fff}

#tip{position:fixed;z-index:7;display:flex;gap:0.75rem;align-items:center;padding:0.5rem 0.875rem 0.5rem 0.5rem;border-radius:0.75rem;pointer-events:none;
  opacity:0;transform:translate(-50%,calc(-100% - 1.375rem)) scale(.96);transition:opacity .15s,transform .2s var(--ease)}
#tip.show{opacity:1;transform:translate(-50%,calc(-100% - 1.375rem)) scale(1)}
.tip-img{width:5.25rem;height:3.375rem;border-radius:0.4375rem;overflow:hidden;background:#0B0F14;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tip-img img{width:100%;height:100%;object-fit:cover}
.tip-txt{display:flex;flex-direction:column;gap:0.1875rem;font-size:0.7812rem;font-weight:700;color:#fff;white-space:nowrap}
.tip-txt b{font-family:var(--disp);font-weight:400;font-size:max(0.625rem,9.6px);color:var(--blueB)}
.tip-txt em{font-style:normal;font-size:max(0.625rem,9.6px);font-weight:600;color:var(--muted);letter-spacing:.4px}

/* ======================= PROCESO ======================= */
#svc{position:fixed;inset:0;z-index:20;background:#080B0E;visibility:hidden;clip-path:inset(0 100% 0 0)}
#svc.open{visibility:visible}
.svc-blur{position:absolute;inset:-3.75rem;background-size:cover;background-position:center;filter:blur(2.625rem) brightness(.38) saturate(1.1);transform:scale(1.1);transition:background-image .6s}
.svc-media{position:absolute;inset:0;overflow:hidden}
.svc-stage{position:absolute;inset:0;transform:translate3d(var(--px,0),var(--py,0),0) scale(var(--kb,1.035));transition:transform 1.2s var(--ease)}
.svc-stage img{position:absolute;max-width:none;transition:opacity .8s var(--ease);filter:saturate(.92) contrast(1.06) brightness(.86)}
.svc-stage img:not(.on){opacity:0}
.svc-grade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,11,14,.55) 0%,rgba(8,11,14,0) 22%,rgba(8,11,14,0) 55%,rgba(8,11,14,.88) 100%),
    linear-gradient(90deg,rgba(8,11,14,.35),transparent 30%,transparent 80%,rgba(8,11,14,.55)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 0.1875rem)}
.svc-grade::after{content:"";position:absolute;inset:0;background:#0052D4;mix-blend-mode:soft-light;opacity:.32}
.svc-title{position:absolute;left:4vw;bottom:calc(var(--foot) + 6.5rem);display:flex;align-items:flex-end;gap:1.375rem;pointer-events:none;max-width:calc(100% - 8vw)}
.svc-num{font-family:var(--disp);font-size:clamp(4rem,9vw,8rem);line-height:.8;letter-spacing:-2px}
#svcBigTitle{font-family:var(--disp);font-weight:400;font-size:clamp(1.375rem,2.8vw,2.5rem);line-height:1.12;margin:0.625rem 0 0;padding-bottom:.3em;text-shadow:none}
.svc-gallery{position:absolute;left:calc(4vw + 8.25rem);bottom:calc(var(--foot) + 1rem);display:flex;gap:0.625rem;max-width:calc(100% - var(--panelW) - 8vw - 8.25rem);overflow-x:auto;padding:0.25rem 2px 0.375rem;scrollbar-width:thin;scrollbar-color:#2E3A49 transparent}
.thumb{flex:none}
.thumb{width:5.875rem;height:3.75rem;padding:0.1875rem;border-radius:0.5625rem}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:0.375rem;filter:grayscale(.3) brightness(.75);transition:.25s}
.thumb.on img,.thumb:hover img{filter:none}
.thumb.on{border-color:#5B9BFF;box-shadow:0 0 0 1px #2E7BFF,0 0.5rem 1.375rem rgba(0,82,212,.45)}
.svc-arrow{position:absolute;top:50%;width:2.875rem;height:2.875rem;margin-top:-1.4375rem;border-radius:50%;font-size:1.375rem;line-height:1;color:#fff;display:grid;place-items:center}
.svc-arrow.prev{left:1.125rem}.svc-arrow.next{right:calc(var(--panelW) + 0.25rem)}
.svc-arrow:hover{transform:scale(1.06)}

/* hotspots */
.hotspots{position:absolute;inset:0}
.hs{position:absolute;transform:translate(-0.9375rem,-50%);display:flex;align-items:center;gap:0.625rem;z-index:2}
.hs.flip{transform:translate(calc(-100% + 0.9375rem),-50%)}
.hs-dot{position:relative;width:1.875rem;height:1.875rem;border-radius:50%;flex:none;
  background:radial-gradient(circle,#fff 0 18%,#2E7BFF 22% 42%,rgba(0,82,212,.35) 46% 100%);
  box-shadow:0 0 0 1.5px rgba(220,235,255,.9),0 0 1.125rem rgba(46,123,255,.9);transition:transform .2s var(--ease)}
.hs-dot::before,.hs-dot::after{content:"";position:absolute;inset:-0.375rem;border-radius:50%;border:1.5px solid rgba(156,200,255,.8);animation:hsPulse 2.6s ease-out infinite}
.hs-dot::after{animation-delay:1.3s}
@keyframes hsPulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2);opacity:0}}
.hs-label{padding:0.375rem 0.625rem;border-radius:0.5rem;font-size:max(0.6875rem,9.6px);font-weight:700;letter-spacing:.5px;white-space:nowrap;color:#fff;
  opacity:0;transform:translateX(-0.375rem);transition:.25s var(--ease)}
.hs:hover .hs-label,.hs:focus-visible .hs-label,.hs.on .hs-label,.labels .hs-label{opacity:1;transform:none}
.hs:hover .hs-dot,.hs.on .hs-dot{transform:scale(1.15)}
.hs.flip{flex-direction:row-reverse}
.hs.flip .hs-label{transform:translateX(0.375rem)}
.hs.out{display:none}
.hs-card{position:absolute;z-index:5;width:18.75rem;padding:1.125rem 1.25rem 1.125rem;opacity:0;pointer-events:none;transform:translateY(0.5rem) scale(.98);transition:opacity .25s,transform .3s var(--ease)}
.hs-card.show{opacity:1;pointer-events:auto;transform:none}
.hs-card h4{margin:0.5rem 0 0.375rem;font-family:var(--disp);font-weight:400;font-size:0.9375rem;line-height:1.3;color:#fff}
.hs-card p:not(.eyebrow){margin:0;font-size:0.7812rem;line-height:1.6;color:var(--muted2)}
.x{position:absolute;top:0.75rem;right:0.75rem;width:1.875rem;height:1.875rem;border-radius:50%;display:grid;place-items:center;font-size:0.75rem;color:#DCE5F0;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(174,199,232,.2);transition:.18s;z-index:2}
.x:hover{background:var(--blue);color:#fff}

/* panel */
.svc-panel{position:absolute;top:5.75rem;right:1rem;bottom:calc(var(--foot) + 0.75rem);width:calc(var(--panelW) - 2rem);display:flex;flex-direction:column;border-radius:1.125rem;overflow:hidden}
.svc-close{color:inherit;text-decoration:none;position:absolute;top:1rem;right:1rem;width:2.125rem;height:2.125rem;border-radius:50%;display:grid;place-items:center;font-size:0.8125rem;z-index:3;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(174,199,232,.22);transition:.18s}
.svc-close:hover{background:var(--blue)}
.svc-scroll{flex:1;overflow:auto;padding:1.625rem 1.625rem 1.125rem;scrollbar-width:thin;scrollbar-color:#2E3A49 transparent}
.svc-scroll>*{animation:rise .6s var(--ease) both}
.svc-scroll>*:nth-child(2){animation-delay:.05s}.svc-scroll>*:nth-child(3){animation-delay:.1s}
.svc-scroll>*:nth-child(4){animation-delay:.15s}.svc-scroll>*:nth-child(5){animation-delay:.2s}
.svc-scroll>*:nth-child(n+6){animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(0.75rem)}to{opacity:1;transform:none}}
.p-eyebrow{display:flex;align-items:center;gap:0.625rem;padding-right:2.5rem}
.badge{font-family:var(--disp);font-size:max(0.6562rem,9.6px);padding:0.3125rem 0.5625rem;border-radius:0.375rem;color:#fff;letter-spacing:.6px;
  background:linear-gradient(180deg,#2E7BFF,#0052D4);box-shadow:0 0.25rem 0.875rem rgba(0,82,212,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.p-title{font-family:var(--disp);font-weight:400;font-size:1.3125rem;line-height:1.32;margin:1rem 0 0.75rem;color:#fff;letter-spacing:.2px}
.p-lead{margin:0;font-size:0.8438rem;line-height:1.72;color:var(--muted2)}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0.5625rem;margin:1.375rem 0 0.25rem}
.spec{border-radius:0.6875rem;padding:0.875rem 0.875rem 0.75rem}
.spec .v{display:block;font-family:var(--disp);font-size:1rem;line-height:1.1}
.spec .l{display:block;margin-top:0.4375rem;font-size:max(0.6875rem,9.6px);line-height:1.4;color:#AEB9C7}
.p-sec{margin-top:1.5rem}
.p-sec h3{margin:0 0 0.75rem;font-size:max(0.625rem,9.6px);font-weight:700;letter-spacing:0.1375rem;text-transform:uppercase;color:#8EA0B6;display:flex;align-items:center;gap:0.625rem}
.p-sec h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(174,199,232,.25),transparent)}
.how{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.75rem}
.how li{position:relative;padding-left:1.25rem;font-size:0.8125rem;line-height:1.65;color:#D0D9E4}
.how li::before{content:"";position:absolute;left:0;top:.62em;width:0.5625rem;height:2px;background:#2E7BFF;box-shadow:0 0 0.5rem #2E7BFF}
.why{position:relative;margin:1.5rem 0 0;padding:1rem 1.125rem 1rem 1.375rem;border-radius:0.75rem;font-size:0.8125rem;line-height:1.7;color:#E6EDF6;
  background:linear-gradient(135deg,rgba(46,123,255,.13),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(174,199,232,.14)}
.why::before{content:"";position:absolute;left:0;top:0.875rem;bottom:0.875rem;width:0.1875rem;border-radius:2px;background:linear-gradient(180deg,#9CC8FF,#0052D4)}
.why b{display:block;font-size:max(0.5938rem,9.6px);letter-spacing:2px;text-transform:uppercase;color:var(--blueB);margin-bottom:0.375rem}
.equip{list-style:none;margin:0;padding:0}
.equip li{display:flex;flex-direction:column;gap:0.1875rem;padding:0.6875rem 0;border-top:1px solid rgba(174,199,232,.09)}
.equip li:first-child{border-top:0;padding-top:0}
.equip b{font-size:0.8125rem;color:#fff;font-weight:600}
.equip span{font-size:0.75rem;color:var(--muted)}
.apps{display:flex;flex-direction:column;gap:0.5rem}
.app{display:flex;flex-direction:column;gap:0.25rem;padding:0.6875rem 0.8125rem;border-radius:0.625rem;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(174,199,232,.1)}
.app b{font-size:0.7812rem;color:#fff;font-weight:600}
.app span{font-size:max(0.6875rem,9.6px);color:var(--muted)}
.app i{font-style:normal;color:#9CC8FF}
.svc-foot{padding:1rem 1.375rem 1.125rem;border-top:1px solid rgba(174,199,232,.10);background:rgba(0,0,0,.18)}
.svc-nav{display:flex;justify-content:space-between;margin-top:0.75rem}
.svc-nav a{text-decoration:none;font-size:max(0.7188rem,9.6px);font-weight:600;color:var(--muted);padding:0.375rem 0.25rem;transition:color .15s}
.svc-nav a:hover{color:var(--blueB)}
.rail{position:absolute;left:4vw;top:6rem;display:flex;gap:0.375rem;z-index:3}
.rail a{text-decoration:none;display:flex;flex-direction:column;gap:0.375rem;font-family:var(--disp);font-size:max(0.5625rem,9.6px);color:#8796A9;padding:0.25rem 0;transition:color .2s}
.rail a i{display:block;width:1.875rem;height:0.1875rem;border-radius:2px;background:rgba(195,205,218,.25);transition:.3s}
.rail a:hover{color:#fff}
.rail a.done i{background:rgba(46,123,255,.55)}
.rail a.on{color:#fff}
.rail a.on i{background:#2E7BFF;box-shadow:0 0 0.625rem #2E7BFF}

/* esquema técnico (hojalatería) */
.schematic{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:radial-gradient(90% 70% at 50% 40%,#122236 0%,#0A0F16 70%);overflow:hidden}
.schematic.on{display:flex}
.schematic::before{content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(120,170,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.12) 1px,transparent 1px);background-size:2rem 2rem}
.schematic svg{position:relative;width:min(86%,68.75rem);height:auto;margin-top:-6%}
@media (min-width:901px){.schematic{padding-right:var(--panelW)}}

/* ======================= TRANSICIÓN CORTE LÁSER ======================= */
#cut{position:fixed;inset:0;z-index:60;pointer-events:none}
#cut .beam{position:absolute;top:0;bottom:0;left:0;width:2px;opacity:0;background:#fff;
  box-shadow:0 0 0.375rem 1px #fff,0 0 1.125rem 0.25rem #8FBBFF,0 0 3.75rem 0.875rem rgba(46,123,255,.55)}
#sparks{position:absolute;inset:0;width:100%;height:100%}

/* ======================= HOJAS / MODALES ======================= */
.overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:6rem 1.5rem calc(var(--foot) + 1rem);
  background:rgba(5,7,10,.55);-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.overlay.open{opacity:1;visibility:visible;transition:opacity .35s}
.sheet-card,.quote-card{width:min(70rem,100%);max-height:100%;display:flex;flex-direction:column;border-radius:1.25rem;overflow:hidden;
  transform:translateY(1.125rem) scale(.985);transition:transform .45s var(--ease)}
.overlay.open .sheet-card,.overlay.open .quote-card{transform:none}
.sheet-card>header,.quote-card>header{position:relative;padding:1.625rem 1.875rem 1.125rem;border-bottom:1px solid rgba(174,199,232,.10)}
.sheet-card h3,.quote-card h3{font-family:var(--disp);font-weight:400;font-size:1.5rem;margin:0.625rem 0 0;padding-bottom:0.25rem}
.sheet-card .x,.quote-card .x{top:1.375rem;right:1.375rem}
.sheet-body{overflow:auto;padding:1.5rem 1.875rem 1.875rem}
.proc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.375rem,1fr));gap:0.875rem}
.proc{text-decoration:none;color:inherit;text-align:left;border-radius:0.875rem;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease)}
.proc:hover{transform:translateY(-0.1875rem)}
.proc .ph{position:relative;height:8rem;overflow:hidden;background:#0B1119}
.proc .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.8);transition:transform .6s var(--ease)}
.proc:hover .ph img{transform:scale(1.06)}
.proc .ph .big{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:2.75rem}
.proc .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,11,14,.85))}
.proc .ph .n{position:absolute;left:0.75rem;bottom:0.625rem;z-index:1}
.proc .tx{padding:0.875rem 1rem 1rem}
.proc b{display:block;font-size:0.8438rem;color:#fff}
.proc .ph,.proc .tx{display:block}
.proc .tx span{display:block;margin-top:0.375rem;font-size:0.75rem;line-height:1.5;color:var(--muted)}
.proc .ph .badge{color:#fff;line-height:1.2}
.arg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.625rem,1fr));gap:0.75rem}
.arg{text-decoration:none;color:inherit;text-align:left;border-radius:0.8125rem;padding:1.125rem;display:flex;flex-direction:column;gap:0.625rem;transition:transform .25s var(--ease)}
.arg:hover{transform:translateY(-0.1875rem)}
.arg .need{font-size:max(0.625rem,9.6px);font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--blueB)}
.arg .a{font-size:0.8438rem;line-height:1.6;color:#E6EDF6}
.arg .go{font-size:max(0.6875rem,9.6px);font-weight:600;color:var(--muted);margin-top:auto}
.app-table{width:100%;border-collapse:collapse;font-size:0.8125rem}
.app-table th{text-align:left;font-size:max(0.5938rem,9.6px);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8EA0B6;padding:0 0.875rem 0.75rem}
.app-table td{padding:0.875rem;border-top:1px solid rgba(174,199,232,.09);color:#D0D9E4;vertical-align:top}
.app-table td b{color:#fff;font-weight:600}
.app-table td em{display:block;font-style:normal;color:#9CC8FF;font-size:max(0.7188rem,9.6px);margin-top:0.1875rem}
.app-table tr{cursor:pointer;transition:background .2s}
.app-table tbody tr:hover{background:rgba(46,123,255,.08)}
.tag{display:inline-block;padding:0.25rem 0.5625rem;border-radius:62.4375rem;font-size:max(0.6562rem,9.6px);font-weight:600;color:#C9D8EC;background:rgba(46,123,255,.12);box-shadow:inset 0 0 0 1px rgba(46,123,255,.3)}
.claims{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.375rem}
.claims span{font-size:0.75rem;padding:0.5rem 0.75rem;border-radius:62.4375rem;color:#DCE5F0;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(174,199,232,.14)}

/* cotización */
.quote-card{width:min(47.5rem,100%)}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem;padding:1.5rem 1.875rem 0.375rem;overflow:auto}
.q-grid label{display:flex;flex-direction:column;gap:0.4375rem;font-size:max(0.625rem,9.6px);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#8EA0B6}
.q-grid .full{grid-column:1/-1}
.q-grid input,.q-grid select,.q-grid textarea{font:inherit;font-size:0.875rem;letter-spacing:0;text-transform:none;color:#fff;padding:0.75rem 0.875rem;border-radius:0.625rem;
  background:rgba(5,8,12,.45);border:1px solid rgba(174,199,232,.18);box-shadow:inset 0 1px 2px rgba(0,0,0,.4);transition:border-color .2s,box-shadow .2s;resize:vertical}
.q-grid select option{background:#11151A}
.q-grid input:focus,.q-grid select:focus,.q-grid textarea:focus{outline:none;border-color:#2E7BFF;box-shadow:0 0 0 0.1875rem rgba(46,123,255,.25)}
.q-grid input::placeholder,.q-grid textarea::placeholder{color:#5D6B7C}
.q-err{min-height:1.125rem;margin:0.375rem 1.875rem 0;font-size:0.75rem;color:#FF9D9D}
.q-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.125rem;padding:0.75rem 1.875rem 1.625rem}
.q-direct{display:flex;flex-wrap:wrap;gap:0.875rem;font-size:0.7812rem}
.q-direct a{color:#C9D8EC;text-decoration:none;font-weight:600}
.q-direct a:hover{color:#fff}

/* menú móvil */
#mnav{position:fixed;z-index:39;top:5.375rem;right:1rem;width:13.75rem;padding:0.625rem;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-0.375rem);transition:.25s}
#mnav.open{opacity:1;visibility:visible;transform:none}
#mnav a,#mnav button{text-decoration:none;color:inherit;text-align:left;padding:0.75rem 0.875rem;border-radius:0.5625rem;font-size:0.8125rem;font-weight:600}
#mnav a:hover,#mnav button:hover{background:rgba(255,255,255,.07)}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1180px){
  :root{--panelW:25rem}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:27.5rem}
  #monitor{width:16.25rem;bottom:9vh}
  .rail{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

/* ======================= PORTADA: foto panorámica ======================= */
#hero{position:fixed;inset:0;z-index:3;overflow:hidden;background:#080B0E;transition:opacity 1.1s var(--ease),visibility 0s 1.1s}
#hero img{position:absolute;inset:-2%;width:104%;height:104%;max-width:none;object-fit:cover;object-position:50% 55%;
  filter:saturate(.92) contrast(1.06) brightness(.8);animation:heroPan 34s ease-in-out infinite alternate;
  transition:filter 1.1s var(--ease),transform 1.1s var(--ease)}
@keyframes heroPan{from{transform:scale(1.04) translate3d(1.2%,0,0)}to{transform:scale(1.1) translate3d(-1.2%,-.6%,0)}}
.hero-grade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,11,14,.94) 0%,rgba(8,11,14,.78) 30%,rgba(8,11,14,.25) 62%,rgba(8,11,14,.1) 100%),
    linear-gradient(180deg,rgba(8,11,14,.55) 0%,rgba(8,11,14,0) 24%,rgba(8,11,14,0) 70%,rgba(8,11,14,.85) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 0.1875rem)}
.hero-grade::after{content:"";position:absolute;inset:0;background:#0052D4;mix-blend-mode:soft-light;opacity:.35}
#hero::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;opacity:.0;
  background:linear-gradient(90deg,transparent,#9CC8FF 30%,#fff 50%,#9CC8FF 70%,transparent);box-shadow:0 0 1rem 0.1875rem rgba(46,123,255,.5);
  animation:heroScan 9s var(--easeIO) 1.5s infinite}
@keyframes heroScan{0%{opacity:0;transform:translateY(12vh)}6%{opacity:.7}40%{opacity:.7}46%{opacity:0;transform:translateY(88vh)}100%{opacity:0;transform:translateY(88vh)}}
body:not(.mode-intro) #hero{opacity:0;visibility:hidden}
.mode-intro #hero{transition:opacity 1.1s var(--ease),visibility 0s}
/* regreso a la portada: la foto entra como telón por encima del proceso y la planta (bajo header y footer) */
body.to-intro #hero{z-index:25;transition:opacity .5s var(--ease),visibility 0s}
body:not(.mode-intro) #hero img{filter:saturate(.9) brightness(.6) blur(0.5rem);transform:scale(1.16)}

/* ======================= FOOTER: placa de acero ======================= */
#foot{position:fixed;z-index:30;left:0;right:0;bottom:0;height:var(--foot);display:flex;align-items:center;gap:1.75rem;padding:0 1.75rem;
  background:var(--brushed),linear-gradient(180deg,#3A434F 0%,#252C35 48%,#1A2027 100%);background-size:32.5rem 32.5rem,100% 100%;background-blend-mode:overlay,normal;
  border-top:1px solid #5A6574;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 -0.75rem 1.875rem rgba(0,0,0,.45)}
#foot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(16.25rem circle at var(--mx,-62.4375rem) var(--my,-62.4375rem),rgba(255,255,255,.2),transparent 60%);mix-blend-mode:overlay}
#foot::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#0052D4 0 18%,#2D3642 18% 22%,#6B727C 22% 24%,transparent 24%)}
#foot .screw.tl{top:0.375rem;left:0.5rem}#foot .screw.bl{bottom:0.375rem;left:0.5rem;top:auto}#foot .screw.tr{top:0.375rem;right:0.5rem}#foot .screw.br{bottom:0.375rem;right:0.5rem;top:auto}
.foot-brand{display:flex;align-items:center;gap:0.6875rem;color:#fff;text-decoration:none;padding-right:1.625rem;border-right:1px solid rgba(174,199,232,.18);height:1.875rem}
.foot-brand svg{width:1.6875rem;height:1.3125rem}
.foot-brand .wm{display:flex;flex-direction:column;gap:2px}
.foot-brand b{font-family:var(--disp);font-weight:400;font-size:0.8125rem;letter-spacing:0.1375rem;line-height:1}
.foot-brand .wm span{font-weight:600;font-size:max(0.4062rem,9.6px);letter-spacing:0.3125rem;color:var(--blueB)}
.foot-info{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 1.875rem;font-style:normal;font-size:0.7812rem;font-weight:600;letter-spacing:.3px}
.foot-info a{display:inline-flex;align-items:center;gap:0.5625rem;color:#D7DEE7;text-decoration:none;transition:color .2s}
.foot-info a:hover{color:#fff}
.foot-info svg{width:1rem;height:1rem;fill:none;stroke:#6FA3FF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;filter:drop-shadow(0 0 0.25rem rgba(46,123,255,.5))}

/* ======================= KIT DESTACADO (plegado) ======================= */
.kit{margin:1rem 0 0.25rem;padding:1rem 1rem 1rem;border-radius:0.875rem;border-color:#5B9BFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(46,123,255,.35),0 0.75rem 2.125rem rgba(0,82,212,.35)}
.kit-badge{position:absolute;top:-0.5625rem;left:0.875rem;z-index:2;font-size:max(0.5625rem,9.6px);font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#fff;padding:0.25rem 0.5625rem;border-radius:62.4375rem;
  background:linear-gradient(180deg,#2E7BFF,#0052D4);box-shadow:0 0.25rem 0.875rem rgba(0,82,212,.55)}
.kit-row{position:relative;z-index:1;display:flex;gap:0.875rem;align-items:flex-start}
.kit-img{flex:none;width:6rem;height:6rem;border-radius:0.5625rem;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 0.375rem 1rem rgba(0,0,0,.4);transition:transform .2s}
.kit-img:hover{transform:scale(1.04)}
.kit-img img{width:100%;height:100%;object-fit:cover}
.kit-t{margin:2px 0 0.375rem;font-family:var(--disp);font-weight:400;font-size:0.9375rem;line-height:1.25}
.kit p{margin:0;font-size:0.75rem;line-height:1.6;color:#C9D3DF}

/* accesibilidad */
.skip{position:fixed;left:1rem;top:-3.75rem;z-index:100;padding:0.625rem 0.875rem;border-radius:0.5rem;background:#0052D4;color:#fff;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem}
.noscript{position:fixed;inset:auto 0 var(--foot) 0;z-index:90;margin:0;padding:0.875rem;background:#0052D4;color:#fff;text-align:center}
.app-table td a{color:inherit;text-decoration:none}
.app-table td a:hover b{color:#9CC8FF}

/* ======================= ROTACIÓN AUTOMÁTICA DE FOTOS (5 s) ======================= */
.thumb{position:relative}
.thumb .prog{position:absolute;left:0.375rem;right:0.375rem;bottom:0.3125rem;height:2px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;opacity:0;transition:opacity .3s}
.thumb.on .prog{opacity:1}
.thumb .prog::after{content:"";position:absolute;inset:0;background:#6FA3FF;box-shadow:0 0 0.375rem #2E7BFF;transform-origin:left center;transform:scaleX(0)}
.svc-gallery.run .thumb.on .prog::after{animation:rotProg 5s linear forwards}
@keyframes rotProg{to{transform:scaleX(1)}}
.svc-stage img{transition:opacity 1s var(--ease)}
.rot-bar{position:absolute;z-index:3;left:4vw;bottom:calc(var(--foot) + 1.25rem);width:7.5rem;height:3.5rem;display:flex;align-items:center;gap:0.75rem;padding:0 0.75rem;border-radius:0.75rem}
.rot-bar[hidden]{display:none}
.rot-btn{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(174,199,232,.25);transition:.2s}
.rot-btn:hover{background:var(--blue)}
.ic-pause{position:relative;width:0.625rem;height:0.6875rem}
.ic-pause::before,.ic-pause::after{content:"";position:absolute;top:0;bottom:0;width:0.1875rem;border-radius:1px;background:#E4ECF6}
.ic-pause::before{left:0}.ic-pause::after{right:0}
.rot-btn.paused .ic-pause::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:0.3438rem 0 0.3438rem 0.5625rem;border-color:transparent transparent transparent #E4ECF6;border-radius:0}
.rot-btn.paused .ic-pause::after{display:none}
.rot-count{font-family:var(--disp);font-size:max(0.6562rem,9.6px);letter-spacing:.8px;color:#C9D4E2;white-space:nowrap}

/* ======================= APLICACIONES ======================= */
.apps-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.625rem;align-items:center;margin-bottom:1.5rem}
.apps-photo{margin:0;padding:0.5625rem;border-radius:0.875rem}
.apps-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:0.4375rem;filter:saturate(.95) contrast(1.04)}
.apps-photo figcaption{position:absolute;left:1.25rem;bottom:1.25rem;z-index:2;font-size:max(0.5938rem,9.6px);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#fff;
  padding:0.4375rem 0.6875rem;border-radius:0.4375rem;background:rgba(8,11,14,.72);-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem);box-shadow:inset 0 0 0 1px rgba(174,199,232,.2)}
.apps-intro h4{font-family:var(--disp);font-weight:400;font-size:1.3125rem;line-height:1.3;margin:0.75rem 0 0.75rem}
.apps-intro>p:not(.eyebrow){margin:0;color:var(--muted2);font-size:0.8438rem;line-height:1.75}
.apps-kpis{display:flex;flex-wrap:wrap;gap:0.625rem;margin-top:1.25rem}
.apps-kpis span{display:flex;flex-direction:column;gap:0.25rem;padding:0.75rem 0.875rem;border-radius:0.6875rem;min-width:6rem;font-size:max(0.6562rem,9.6px);color:#AEB9C7}
.apps-kpis b{font-family:var(--disp);font-weight:400;font-size:1.25rem;line-height:1;
  background:linear-gradient(180deg,#FFFFFF 0%,#E1E8EF 42%,#A7B5C4 54%,#F2F6FA 76%,#BFCAD6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:none}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.375rem,1fr));gap:0.75rem}
.app-card{display:flex;flex-direction:column;align-items:flex-start;gap:0.625rem;padding:1rem 1rem 0.875rem;border-radius:0.8125rem;text-decoration:none;color:inherit;transition:transform .25s var(--ease)}
.app-card:hover{transform:translateY(-0.1875rem)}
.app-card b{font-size:0.875rem;line-height:1.45;color:#fff;font-weight:600}
.app-card .via{margin-top:auto;display:flex;align-items:center;gap:0.5rem;font-size:max(0.7188rem,9.6px);color:var(--muted);width:100%}
.app-card .via i{font-style:normal;font-family:var(--disp);font-size:max(0.5938rem,9.6px);color:#fff;padding:0.1875rem 0.375rem;border-radius:0.3125rem;background:linear-gradient(180deg,#2E7BFF,#0052D4)}
.app-card .via em{font-style:normal;margin-left:auto;color:var(--blueB);transition:transform .2s}
.app-card:hover .via em{transform:translateX(0.1875rem)}

/* ==========================================================================
   TEMA CLARO — industrial limpio (blancos y grises, acento azul APPSA)
   Se activa con <html data-theme="light"> (predeterminado). El tema oscuro
   original sigue disponible con data-theme="dark".
   ========================================================================== */
[data-theme="light"]{--ink:#11151A;--muted:#5B6573;--muted2:#3B4452;--blueB:#0052D4;color-scheme:light}
[data-theme="light"] body{background:#F3F5F8;color:#11151A}
[data-theme="light"] :focus-visible{outline-color:#0052D4}
/* sin cromo, reflejos ni brillos */
[data-theme="light"] .chrome,[data-theme="light"] .spec .v.chrome,[data-theme="light"] .stat-v.chrome,[data-theme="light"] .ov-stats .chrome,
[data-theme="light"] .proc .big.chrome,[data-theme="light"] .apps-kpis b{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  color:#11151A!important;-webkit-text-fill-color:currentColor;animation:none!important}
[data-theme="light"] .reflect{-webkit-box-reflect:none}
/* superficies */
[data-theme="light"] .glass{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(0.875rem) saturate(115%);backdrop-filter:blur(0.875rem) saturate(115%);
  box-shadow:0 1px 2px rgba(17,21,26,.05),0 0.625rem 1.75rem rgba(17,21,26,.08)}
[data-theme="light"] .glass::before{display:none}
[data-theme="light"] .glass::after{background:#DCE2E9}
[data-theme="light"] .steel{background:#F3F5F8;border:1px solid #E1E6EC;box-shadow:none}
[data-theme="light"] .steel::before{display:none}
[data-theme="light"] .steel-bezel{background:#FFFFFF;border:1px solid #DCE2E9;box-shadow:0 0.5rem 1.5rem rgba(17,21,26,.08)}
[data-theme="light"] .steel-bezel::before,[data-theme="light"] .screw{display:none}
/* botones */
[data-theme="light"] .btn-primary{background:#0052D4;border:1px solid #0052D4;box-shadow:none}
[data-theme="light"] .btn-primary:hover{background:#0046B8;filter:none;box-shadow:0 0.375rem 1.125rem rgba(0,82,212,.22)}
[data-theme="light"] .btn-primary::after{display:none}
[data-theme="light"] .btn-glass{color:#11151A}
/* header */
[data-theme="light"] .brand,[data-theme="light"] .foot-brand{color:#11151A}
[data-theme="light"] .brand svg polygon:last-child,[data-theme="light"] .foot-brand svg polygon:last-child{fill:#11151A}
[data-theme="light"] .brand .wm{border-left-color:#DCE2E9}
[data-theme="light"] .nav a,[data-theme="light"] .nav button{color:#3B4452}
[data-theme="light"] .nav a:hover,[data-theme="light"] .nav button:hover,[data-theme="light"] .nav .on{color:#0052D4;background:#EEF3FA}
[data-theme="light"] .menu-btn span{background:#11151A}
[data-theme="light"] .theme-btn{color:#3B4452}
[data-theme="light"] .theme-btn:hover{background:#EEF3FA;color:#0052D4}
/* HUD */
[data-theme="light"] .hud-step{color:#8A94A3}
[data-theme="light"] .mode-intro [data-step="intro"],[data-theme="light"] .mode-plant [data-step="plant"],[data-theme="light"] .mode-station [data-step="station"]{color:#11151A}
[data-theme="light"] .hud-step i{border-color:#AAB3BF}
[data-theme="light"] .mode-intro [data-step="intro"] i,[data-theme="light"] .mode-plant [data-step="plant"] i,[data-theme="light"] .mode-station [data-step="station"] i{background:#0052D4;border-color:#0052D4;box-shadow:none}
[data-theme="light"] .hud-sep{background:#DCE2E9}
/* planta */
[data-theme="light"] #world{background:linear-gradient(180deg,#FFFFFF 0%,#F2F5F8 55%,#E8EDF2 100%)}
[data-theme="light"] .world-grade{background-image:radial-gradient(rgba(17,21,26,.07) 1px,transparent 1px);opacity:.55}
[data-theme="light"] #world::after{display:none}
[data-theme="light"] .mode-intro #stage{filter:none}
[data-theme="light"] #scan{height:1px;background:linear-gradient(90deg,transparent,#0052D4 50%,transparent);box-shadow:none}
/* portada: foto natural con velo blanco a la izquierda */
[data-theme="light"] #hero{background:#F3F5F8}
[data-theme="light"] #hero img{filter:none}
[data-theme="light"] .hero-grade{background:
  linear-gradient(90deg,rgba(244,246,249,.80) 0%,rgba(244,246,249,.66) 24%,rgba(244,246,249,.30) 44%,rgba(244,246,249,0) 60%),
  linear-gradient(180deg,rgba(244,246,249,.38) 0%,rgba(244,246,249,0) 13%),
  linear-gradient(0deg,rgba(17,21,26,.16) 0%,rgba(17,21,26,0) 18%)}
/* vidrio esmerilado detrás del texto: se lee bien sin tapar la foto con blanco */
@media (min-width:901px){
  [data-theme="light"] .hero-grade::before{content:"";position:absolute;inset:0 auto 0 0;width:58%;
    -webkit-backdrop-filter:blur(0.625rem) saturate(1.04);backdrop-filter:blur(0.625rem) saturate(1.04);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 100%)}
}
[data-theme="light"] #introTitle{color:#0B0F14!important;text-shadow:0 1px 1.5rem rgba(255,255,255,.55)}
[data-theme="light"] #intro .lead{color:#1F2630;font-weight:500;text-shadow:0 0 1rem rgba(255,255,255,.7)}
[data-theme="light"] #intro .eyebrow{text-shadow:0 0 0.75rem rgba(255,255,255,.8)}
[data-theme="light"] .scroll-cue{color:#11151A;text-shadow:0 0 0.75rem rgba(255,255,255,.9)}
[data-theme="light"] .hero-grade::after,[data-theme="light"] #hero::after{display:none}
[data-theme="light"] body:not(.mode-intro) #hero img{filter:blur(0.375rem)}
[data-theme="light"] .scroll-cue span{border-color:#AAB3BF}
[data-theme="light"] .scroll-cue span::after{background:#0052D4}
/* vista general */
[data-theme="light"] .ov-highlight b{color:#11151A}
[data-theme="light"] .ov-brands{border-top-color:#E6EAF0}
[data-theme="light"] .brands li{background:#FFFFFF;box-shadow:inset 0 0 0 1px #E3E8EE}
[data-theme="light"] .brands li:hover{box-shadow:inset 0 0 0 1px #C9D3DF,0 0.375rem 1rem rgba(17,21,26,.06)}
[data-theme="light"] .flow-title{color:#11151A;text-shadow:0 0 0.75rem rgba(255,255,255,.9),0 0 0.25rem rgba(255,255,255,.9)}
[data-theme="light"] .flow-dot{background:#0052D4}
[data-theme="light"] .ov-body{scrollbar-color:#C9D3DF transparent}
[data-theme="light"] .ov-stats{border-top-color:#E6EAF0}
[data-theme="light"] .chip{color:#3B4452}
[data-theme="light"] .chip:hover{color:#0052D4}
[data-theme="light"] .chip.on{color:#FFFFFF;background:#0052D4}
[data-theme="light"] .tip-txt{color:#11151A}
[data-theme="light"] .tip-img{background:#E9EDF1;box-shadow:inset 0 0 0 1px #DCE2E9}
/* monitor: tarjeta de foto simple */
[data-theme="light"] .screen{background:#E9EDF1;box-shadow:none}
[data-theme="light"] .screen img{filter:none}
[data-theme="light"] .mon-grade,[data-theme="light"] .mon-scan,[data-theme="light"] .bracket,[data-theme="light"] .mon-hud{display:none}
[data-theme="light"] .mon-foot{color:#11151A}
[data-theme="light"] .mon-num{background:#0052D4}
/* capa de proceso */
[data-theme="light"] #svc{background:#F3F5F8}
[data-theme="light"] .svc-blur{filter:blur(2.5rem) brightness(1.3) saturate(.45);opacity:.5}
[data-theme="light"] .svc-stage img{filter:none}
[data-theme="light"] .svc-grade{background:linear-gradient(180deg,rgba(248,250,252,0) 52%,rgba(248,250,252,.94) 100%),linear-gradient(90deg,rgba(248,250,252,.35),transparent 26%)}
[data-theme="light"] .svc-grade::after{display:none}
[data-theme="light"] .svc-num.chrome{color:#0052D4!important}
[data-theme="light"] .svc-title .eyebrow{color:#0052D4}
[data-theme="light"] .hs-dot{background:radial-gradient(circle,#0052D4 0 30%,#FFFFFF 34% 100%);box-shadow:0 0 0 2px #0052D4,0 0.25rem 0.75rem rgba(17,21,26,.25)}
[data-theme="light"] .hs-dot::before,[data-theme="light"] .hs-dot::after{border-color:rgba(0,82,212,.55)}
[data-theme="light"] .hs-label{color:#11151A}
[data-theme="light"] .hs-card h4{color:#11151A}
[data-theme="light"] .hs-card p:not(.eyebrow){color:#3B4452}
[data-theme="light"] .x,[data-theme="light"] .svc-close{color:#3B4452;background:#EEF2F6;box-shadow:inset 0 0 0 1px #DCE2E9}
[data-theme="light"] .x:hover,[data-theme="light"] .svc-close:hover{background:#0052D4;color:#FFFFFF}
[data-theme="light"] .svc-panel{background:rgba(255,255,255,.97)}
[data-theme="light"] .badge{background:#0052D4;box-shadow:none}
[data-theme="light"] .p-title{color:#11151A}
[data-theme="light"] .spec .l{color:#5B6573}
[data-theme="light"] .p-sec h3{color:#5B6573}
[data-theme="light"] .p-sec h3::after{background:#E1E6EC}
[data-theme="light"] .how li{color:#2B3340}
[data-theme="light"] .how li::before{background:#0052D4;box-shadow:none}
[data-theme="light"] .why{color:#1E2530;background:#EEF4FD;box-shadow:inset 0 0 0 1px #D6E3F8}
[data-theme="light"] .why::before{background:#0052D4}
[data-theme="light"] .equip li{border-top-color:#E6EAF0}
[data-theme="light"] .equip b,[data-theme="light"] .app b{color:#11151A}
[data-theme="light"] .app{background:#F3F5F8;box-shadow:inset 0 0 0 1px #E1E6EC}
[data-theme="light"] .app i{color:#0052D4}
[data-theme="light"] .svc-foot{background:#F7F9FB;border-top-color:#E6EAF0}
[data-theme="light"] .svc-nav a{color:#5B6573}
[data-theme="light"] .svc-nav a:hover{color:#0052D4}
[data-theme="light"] .svc-scroll{scrollbar-color:#C9D1DA transparent}
[data-theme="light"] .rail{background:rgba(255,255,255,.9);padding:0.375rem 0.625rem 0.25rem;border-radius:0.5rem;box-shadow:0 0.25rem 0.875rem rgba(17,21,26,.08)}
[data-theme="light"] .rail a{color:#5B6573}
[data-theme="light"] .rail a i{background:rgba(17,21,26,.14)}
[data-theme="light"] .rail a.done i{background:rgba(0,82,212,.4)}
[data-theme="light"] .rail a.on,[data-theme="light"] .rail a:hover{color:#0052D4}
[data-theme="light"] .rail a.on i{background:#0052D4;box-shadow:none}
[data-theme="light"] .svc-arrow{color:#11151A}
[data-theme="light"] .rot-btn{background:#EEF2F6;box-shadow:inset 0 0 0 1px #DCE2E9}
[data-theme="light"] .rot-btn:hover{background:#DDE7F6}
[data-theme="light"] .ic-pause::before,[data-theme="light"] .ic-pause::after{background:#11151A}
[data-theme="light"] .rot-btn.paused .ic-pause::before{background:none;border-color:transparent transparent transparent #11151A}
[data-theme="light"] .rot-count{color:#3B4452}
[data-theme="light"] .thumb img{filter:none;opacity:.72}
[data-theme="light"] .thumb.on img,[data-theme="light"] .thumb:hover img{opacity:1}
[data-theme="light"] .thumb.on{border-color:#0052D4;box-shadow:0 0 0 1px #0052D4}
[data-theme="light"] .thumb .prog{background:rgba(17,21,26,.15)}
[data-theme="light"] .thumb .prog::after{background:#0052D4;box-shadow:none}
[data-theme="light"] .kit{border-color:#0052D4;box-shadow:0 0 0 1px rgba(0,82,212,.22),0 0.5rem 1.375rem rgba(0,82,212,.08)}
[data-theme="light"] .kit-badge{background:#0052D4;box-shadow:none}
[data-theme="light"] .kit p{color:#3B4452}
[data-theme="light"] .kit-img{box-shadow:inset 0 0 0 1px #DCE2E9}
/* transición: barrido limpio (sin chispas) */
[data-theme="light"] #cut .beam{background:#0052D4;box-shadow:0 0 0 1px rgba(0,82,212,.15)}
/* hojas y cotización */
[data-theme="light"] .overlay{background:rgba(17,21,26,.28)}
[data-theme="light"] .sheet-card,[data-theme="light"] .quote-card{background:#FFFFFF}
[data-theme="light"] .sheet-card>header,[data-theme="light"] .quote-card>header{border-bottom-color:#E6EAF0}
[data-theme="light"] .proc .ph{background:#E9EDF1}
[data-theme="light"] .proc .ph img{filter:none}
[data-theme="light"] .proc .ph::after{background:linear-gradient(180deg,transparent 55%,rgba(17,21,26,.25))}
[data-theme="light"] .proc b{color:#11151A}
[data-theme="light"] .arg .a{color:#1E2530}
[data-theme="light"] .claims span{color:#3B4452;background:#F3F5F8;box-shadow:inset 0 0 0 1px #E1E6EC}
[data-theme="light"] .tag{color:#0052D4;background:#EEF4FD;box-shadow:inset 0 0 0 1px #D6E3F8}
[data-theme="light"] .app-card b{color:#11151A}
[data-theme="light"] .apps-photo figcaption{color:#11151A;background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px #DCE2E9}
[data-theme="light"] .apps-kpis span{color:#5B6573}
[data-theme="light"] .q-grid label{color:#5B6573}
[data-theme="light"] .q-grid input,[data-theme="light"] .q-grid select,[data-theme="light"] .q-grid textarea{color:#11151A;background:#FFFFFF;border-color:#C9D1DA;box-shadow:none}
[data-theme="light"] .q-grid select option{background:#FFFFFF}
[data-theme="light"] .q-grid input::placeholder,[data-theme="light"] .q-grid textarea::placeholder{color:#8A94A3}
[data-theme="light"] .q-err{color:#C62828}
[data-theme="light"] .q-direct a{color:#0052D4}
[data-theme="light"] #mnav a,[data-theme="light"] #mnav button{color:#11151A}
[data-theme="light"] #mnav a:hover,[data-theme="light"] #mnav button:hover{background:#EEF2F6}
[data-theme="light"] .mnav-contact{border-top-color:#E6EAF0}
[data-theme="light"] .mnav-contact a{color:#3B4452!important}
/* footer */
[data-theme="light"] #foot{background:#FFFFFF;border-top:1px solid #DCE2E9;box-shadow:0 -0.375rem 1.25rem rgba(17,21,26,.05)}
[data-theme="light"] #foot::before{display:none}
[data-theme="light"] .foot-brand{border-right-color:#DCE2E9}
[data-theme="light"] .foot-info a{color:#3B4452}
[data-theme="light"] .foot-info a:hover{color:#0052D4}
[data-theme="light"] .foot-info svg{stroke:#0052D4;filter:none}

/* selector de tema (comparar claro / oscuro) */
.theme-btn{flex:none;width:2.375rem;height:2.375rem;border-radius:0.625rem;display:grid;place-items:center;color:#C9D4E2;transition:.18s}
.theme-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.theme-btn svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ov-hint{display:none}
.mnav-contact{display:flex;flex-direction:column;gap:2px;margin-top:0.375rem;padding-top:0.5rem;border-top:1px solid rgba(174,199,232,.14)}
.mnav-contact a{font-size:0.8125rem!important;font-weight:500!important;color:#C9D4E2!important}

/* ==========================================================================
   MÓVIL Y TABLET VERTICAL (≤ 900 px) — diseño propio, a tamaño completo
   ========================================================================== */
@media (max-width:900px){
  html{font-size:100%}
  :root{--panelW:100%;--foot:3.625rem}
  body:not(.mode-intro){--foot:0px}
  body:not(.mode-intro) #foot{display:none}
  /* header y menú */
  #top{left:0.625rem;right:0.625rem;top:0.625rem;height:3.5rem;padding:0 0.375rem 0 0.875rem;gap:0.5rem;border-radius:0.875rem}
  .brand svg{width:1.875rem;height:1.5rem}
  .nav,#hud,#top .theme-btn{display:none}
  .menu-btn{display:flex}
  #top .btn-sm{padding:0.6875rem 0.875rem}
  #mnav{top:4.625rem;left:0.625rem;right:0.625rem;width:auto;padding:0.5rem}
  #mnav a,#mnav button{padding:0.875rem 0.875rem;font-size:0.9375rem}
  /* portada: foto grande arriba; textos y botones compactos, apoyados abajo */
  #intro{align-items:flex-end;padding:5.625rem 1.125rem 0.875rem}
  .intro-copy{max-width:none}
  #intro .eyebrow{font-size:max(0.625rem,9.6px);letter-spacing:1.6px}
  #introTitle{font-size:clamp(1.75rem,7.6vw,2.5rem);margin-top:0.5rem;padding-bottom:.08em}
  #intro .lead{font-size:0.875rem;line-height:1.5}
  .intro-ctas{margin-top:0.875rem;gap:0.5rem;flex-wrap:nowrap}
  .intro-ctas .btn{flex:1 1 0;padding:0.875rem 0.625rem;font-size:0.6875rem;white-space:nowrap}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:0.375rem;margin-top:0.75rem;max-width:none}
  .stats li{padding:0.5rem 0.5rem 0.5625rem;border-radius:0.625rem}
  .stat-v{font-size:1rem}
  .stat-v small{font-size:.5em;margin-left:0.125rem}
  .stat-l{font-size:max(0.625rem,9.6px);margin-top:0.3125rem;line-height:1.25}
  .scroll-cue{display:none}
  /* la foto ocupa todo lo que queda sobre los textos (--introH lo mide app.js) */
  #hero img{inset:0 0 auto 0;width:100%;height:calc(100% - var(--introH, 22rem) - 1rem);min-height:45%;object-position:32% 58%}
  .hero-grade{background:linear-gradient(0deg,rgba(8,11,14,.98) 0,rgba(8,11,14,.95) calc(var(--introH, 22rem) + 4rem),rgba(8,11,14,0) calc(var(--introH, 22rem) + 10rem)),linear-gradient(180deg,rgba(8,11,14,.35) 0,rgba(8,11,14,0) 18%)}
  [data-theme="light"] .hero-grade{background:linear-gradient(0deg,rgba(248,250,252,1) 0,rgba(248,250,252,.97) calc(var(--introH, 22rem) + 4.25rem),rgba(248,250,252,0) calc(var(--introH, 22rem) + 9rem)),linear-gradient(180deg,rgba(248,250,252,.38) 0,rgba(248,250,252,0) 14%)}
  /* footer en portada: 3 accesos directos */
  #foot{gap:0;padding:0 0.375rem env(safe-area-inset-bottom);justify-content:center}
  #foot .screw,.foot-brand{display:none}
  .foot-info{width:100%;flex-wrap:nowrap;justify-content:space-around;gap:0}
  .foot-info a{flex:1;flex-direction:column;justify-content:center;gap:0.25rem;padding:0.5rem 0.25rem;font-size:0;height:var(--foot)}
  .foot-info a::after{content:attr(data-short);font-size:max(0.7188rem,9.6px);font-weight:600;letter-spacing:.3px}
  .foot-info svg{width:1.1875rem;height:1.1875rem}
  /* planta: barra compacta, pines grandes, arrastrar y pellizcar */
  .ov-highlight{top:4.625rem;left:0.625rem;right:0.625rem;width:auto;max-height:calc(100dvh - 4.625rem - 9.25rem);padding:0.75rem 0.875rem 0.625rem;border-radius:0.75rem}
  .ov-highlight .eyebrow{display:none}
  .ov-highlight .ov-title{font-size:0.875rem;line-height:1.35;margin:0}
  .ov-body{display:none;margin-top:0.75rem}
  .ov-highlight.open .ov-body{display:block}
  .ov-highlight.open .ov-hint{display:none}
  .ov-body>p{font-size:0.875rem}
  .brands li{height:3rem}
  .ov-more{display:inline-flex;align-items:center;gap:0.375rem;align-self:flex-start;margin:0.5rem 0 0;padding:0.375rem 0;border:0;background:none;color:var(--blueB);font:600 0.8125rem/1 var(--ui);cursor:pointer}
  .ov-more i{width:0.4375rem;height:0.4375rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
  .ov-highlight.open .ov-more i{transform:rotate(-135deg) translate(-2px,0)}
  .ov-hint{display:block;margin:0.25rem 0 0!important;font-size:0.75rem!important;color:var(--muted)!important}
  .flow-wrap{left:0;right:0;bottom:0;max-width:none}
  .flow-title{margin:0 0 -0.125rem;padding:0 0.875rem;font-size:0.8125rem}
  .flow{flex-wrap:nowrap;overflow-x:auto;gap:0.5rem;padding:0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .flow::-webkit-scrollbar{display:none}
  .flow-group{flex-wrap:nowrap;gap:0.5rem}
  .chip{padding:0.8125rem 0.9375rem;font-size:0.8438rem;scroll-snap-align:start}
  #monitor,#tip{display:none}
  /* proceso: página desplazable — foto arriba, ficha completa debajo */
  #svc{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .svc-blur{position:fixed}
  .svc-media{position:relative;inset:auto;height:60vh;height:60dvh;min-height:20.625rem}
  .svc-stage{transform:none}
  #svc .svc-panel{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .svc-media{touch-action:pan-y}
  .svc-title{left:1rem;right:1rem;bottom:4.5rem;gap:0.75rem;max-width:none}
  .svc-num{font-size:3.25rem}
  #svcBigTitle{font-size:1.375rem;padding-bottom:.15em}
  .rot-bar{left:0.75rem;bottom:0.75rem;width:auto;height:3rem;padding:0 0.625rem;gap:0.5rem}
  .svc-gallery{left:7.375rem;right:0;bottom:0.75rem;max-width:none;padding:0.25rem 0.75rem 0.375rem 2px}
  .thumb{width:3.875rem;height:2.75rem}
  .svc-arrow,.hs-label,.rail{display:none}
  .hs-dot{width:2.125rem;height:2.125rem}
  .hs-card{left:0.75rem!important;right:0.75rem;width:auto}
  .svc-panel{position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;width:auto;display:block;margin:-1.25rem 0 0;border-radius:1.25rem 1.25rem 0 0;overflow:visible;
    -webkit-backdrop-filter:none;backdrop-filter:none;min-height:45vh}
  .svc-close{position:fixed;top:4.875rem;right:0.875rem;width:2.75rem;height:2.75rem;z-index:26;font-size:0.9375rem;background:rgba(17,21,26,.55);color:#fff;box-shadow:0 0.25rem 0.875rem rgba(0,0,0,.25)}
  [data-theme="light"] .svc-close{background:rgba(255,255,255,.95);color:#11151A;box-shadow:0 0.25rem 0.875rem rgba(17,21,26,.18)}
  .svc-scroll{overflow:visible;padding:1.5rem 1.125rem 0.5rem}
  .svc-scroll>*{animation:none}
  .p-eyebrow{padding-right:0}
  .p-title{font-size:1.3125rem}
  .p-lead{font-size:0.9375rem}
  .spec .v{font-size:1.0625rem}
  .spec .l{font-size:0.75rem}
  .p-sec h3{font-size:max(0.6875rem,9.6px)}
  .how li{font-size:0.9062rem}
  .why{font-size:0.875rem}
  .equip b{font-size:0.9062rem}
  .equip span,.app span{font-size:0.8125rem}
  .app b{font-size:0.875rem}
  .kit p{font-size:0.8125rem}
  .kit-t{font-size:1rem}
  .svc-foot{position:sticky;bottom:0;z-index:3;padding:0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));background:#11151A}
  [data-theme="light"] .svc-foot{background:#FFFFFF;box-shadow:0 -0.375rem 1.125rem rgba(17,21,26,.06)}
  .svc-nav a{font-size:0.8125rem;padding:0.5rem 0.25rem}
  /* hojas y cotización a pantalla completa */
  .overlay{padding:0;align-items:stretch}
  .sheet-card,.quote-card{width:100%;max-height:none;height:100%;border-radius:0}
  .sheet-card>header,.quote-card>header{padding:calc(1rem + env(safe-area-inset-top)) 1.125rem 0.75rem}
  .sheet-card h3,.quote-card h3{font-size:1.3125rem}
  .sheet-card .x,.quote-card .x{top:calc(0.875rem + env(safe-area-inset-top));right:0.875rem;width:2.5rem;height:2.5rem}
  .sheet-body{padding:1rem 0.875rem calc(1.75rem + env(safe-area-inset-bottom))}
  .proc-grid{grid-template-columns:1fr 1fr;gap:0.625rem}
  .proc .ph{height:6.25rem}
  .proc .tx{padding:0.6875rem 0.75rem 0.8125rem}
  .proc b{font-size:0.8438rem}
  .arg-grid,.apps-grid{grid-template-columns:1fr}
  .apps-top{grid-template-columns:1fr;gap:1rem}
  .apps-intro h4{font-size:1.125rem}
  .q-grid{grid-template-columns:1fr;padding:1rem}
  .q-grid input,.q-grid select,.q-grid textarea{font-size:1rem}
  .q-actions{padding:0.75rem 1rem calc(1.5rem + env(safe-area-inset-bottom))}
  .q-actions .btn{width:100%}
}
@media (max-width:400px){
  .proc-grid{grid-template-columns:1fr}
  .stat-v{font-size:0.9375rem}
  .intro-ctas .btn{font-size:max(0.625rem,9.6px);padding:0.8125rem 0.5rem;letter-spacing:.8px}
}
/* WhatsApp: el teléfono siempre abre una conversación */
a.wa{display:inline-flex!important;align-items:center;gap:0.4375rem}
a.wa svg{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Acceso clientes (solo en el menú) */
[data-theme="light"] .nav .nav-portal{display:inline-flex;align-items:center;gap:0.375rem;margin-left:0.25rem;padding-left:0.875rem;border-left:1px solid #DCE2E9;border-radius:0;color:#5B6573;font-size:max(0.7188rem,9.6px)}
[data-theme="light"] .nav .nav-portal:hover{background:none;color:#0052D4}
.nav-portal svg{width:0.875rem;height:0.875rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#mnav .mnav-portal{margin-top:0.25rem;border-top:1px solid #E6EAF0;color:#5B6573!important;font-size:0.875rem!important}
/* formulario de cotización: anti-spam, aviso legal, envío y confirmación */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.q-legal{margin:0.25rem 1.875rem 0;font-size:max(0.6875rem,9.6px);color:var(--muted)}
.q-legal a,.q-err a{color:#0052D4;font-weight:600}
.q-ok{display:none}
#quoteForm.sending button[type="submit"]{opacity:.6;cursor:progress}
#quoteForm.sent .q-grid,#quoteForm.sent .q-legal,#quoteForm.sent .q-actions,#quoteForm.sent .q-err{display:none}
#quoteForm.sent .q-ok{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.75rem;padding:2.5rem 1.875rem 2.25rem;outline:none}
.q-ok svg{width:3rem;height:3rem;fill:none;stroke:#0052D4;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.q-ok h4{font-family:var(--disp);font-weight:400;font-size:1.25rem;margin:0}
.q-ok p{margin:0 0 0.5rem;max-width:30rem;color:var(--muted2);line-height:1.6}
@media (max-width:900px){.q-legal{margin:0.25rem 1.125rem 0}}