/* =====================================================
   BSI · Brandan Servicios Industriales — tema NEÓN oscuro (mismo lenguaje visual que la tienda UV)
   Acento por sección con  <html data-accent="...">:
     (sin atributo) = violeta · "3d" = rojo eléctrico · "laser" = plata metálico
   Los colores son variables RGB: cambiá solo este bloque para ajustar la paleta.
   ===================================================== */
:root{
  --bg:10 10 10; --deep:5 5 8; --surface:16 16 22; --card:20 20 30;
  --ink:240 242 248; --muted:148 155 172; --line:255 255 255;
  --c1:139 92 246;  --c2:192 132 252;  --c3:99 102 241;   /* violeta (BSI / UV) */
  --brand:var(--c2); --accent:var(--c1); --on-accent:255 255 255; --on-brand:10 10 10;
  --header:10 10 10; --footer:5 5 8;
  --metal:linear-gradient(90deg,rgb(var(--c1)),rgb(var(--c2)));
}
html[data-accent="3d"]{--c1:255 42 85; --c2:255 106 61; --c3:255 60 120}
html[data-accent="laser"]{--c1:203 213 225; --c2:248 250 252; --c3:148 163 184; --on-accent:15 23 42;
  --metal:linear-gradient(100deg,#94a3b8 0%,#f8fafc 28%,#cbd5e1 50%,#ffffff 64%,#94a3b8 100%)}
/* tarjetas con acento propio (home) */
[data-a="uv"]{--c1:139 92 246;--c2:192 132 252;--on-accent:255 255 255}
[data-a="3d"]{--c1:255 42 85;--c2:255 106 61;--on-accent:255 255 255}
[data-a="laser"]{--c1:203 213 225;--c2:248 250 252;--on-accent:15 23 42}

html{scroll-behavior:smooth;background:rgb(var(--bg))}
body{background:rgb(var(--bg));color:rgb(var(--ink));font-family:Inter,sans-serif;overflow-x:hidden}
::selection{background:rgb(var(--c1)/.5)}
.border-line{border-color:rgb(255 255 255/.09)}
.hex-bg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34zM28 100L0 84V50l28-16 28 16v34z' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.5'/%3E%3C/svg%3E")}
.logo-dark{display:block}.logo-light{display:none}

/* texto neón */
.neon{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%}
html[data-accent="laser"] .neon,.neon-laser{animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.hero-title .neon{filter:drop-shadow(0 0 16px rgb(var(--c1)/.75))}
html[data-accent="laser"] .hero-title .neon{filter:drop-shadow(0 0 14px rgb(226 232 240/.45))}
.glow-box{box-shadow:0 0 40px -10px rgb(var(--c1)/.45);border:1px solid rgb(var(--c1)/.3)}

/* botones */
.btn-primary,.btn-dark,.btn-ghost,.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;border-radius:9999px;transition:.3s;cursor:pointer}
.btn-primary,.btn-dark{background:linear-gradient(90deg,rgb(var(--c1)),rgb(var(--c2)));color:rgb(var(--on-accent))}
html[data-accent="laser"] .btn-primary,[data-a="laser"] .btn-primary{background:var(--metal);background-size:200% 100%;color:#0f172a}
.btn-primary:hover,.btn-dark:hover{transform:translateY(-2px);box-shadow:0 12px 35px -8px rgb(var(--c1)/.85),0 0 22px rgb(var(--c1)/.5)}
.btn-ghost{border:1.5px solid rgb(255 255 255/.18);color:rgb(var(--ink));background:rgb(255 255 255/.03)}
.btn-ghost:hover{border-color:rgb(var(--c2));color:rgb(var(--c2));box-shadow:0 0 22px -6px rgb(var(--c1)/.7)}
.btn-wa{background:#25D366;color:#06210f}
.btn-wa:hover{filter:brightness(1.07);transform:translateY(-2px)}

/* componentes base */
.card-b{background:rgb(var(--card));border:1px solid rgb(255 255 255/.08);border-radius:1.25rem;transition:.4s}
.card-b:hover{transform:translateY(-6px);border-color:rgb(var(--c1)/.55);box-shadow:0 20px 40px -20px rgb(var(--c1)/.55)}
.eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:rgb(var(--c2));background:rgb(var(--c1)/.1);border:1px solid rgb(var(--c1)/.35);border-radius:9999px;padding:.35rem .9rem;box-shadow:0 0 20px -6px rgb(var(--c1)/.6)}
.bar{height:4px;width:56px;border-radius:4px;background:var(--metal);box-shadow:0 0 14px rgb(var(--c1)/.8)}
.field{width:100%;background:rgb(255 255 255/.04);border:1px solid rgb(255 255 255/.12);border-radius:.85rem;padding:.7rem 1rem;font-size:.9rem;color:rgb(var(--ink));outline:none;transition:.2s}
.field::placeholder{color:rgb(var(--muted)/.7)}
.field option{background:#14141e;color:#f0f2f8}
.field:focus{border-color:rgb(var(--c2));box-shadow:0 0 0 3px rgb(var(--c1)/.25)}
.chip{border:1px solid rgb(255 255 255/.15);background:transparent;color:rgb(var(--ink));transition:.2s;white-space:nowrap}
.chip:hover{border-color:rgb(var(--c2));color:rgb(var(--c2))}
.chip.act{background:rgb(var(--c1));color:rgb(var(--on-accent));border-color:rgb(var(--c1));font-weight:600;box-shadow:0 0 18px rgb(var(--c1)/.6)}
html[data-accent="laser"] .chip.act{background:#e2e8f0;color:#0f172a}
.ph{background:linear-gradient(135deg,rgb(var(--surface)),rgb(var(--card)));display:grid;place-items:center;position:relative;overflow:hidden}
.badge{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:9999px;padding:.25rem .65rem}
.badge-ok{background:#22c55e22;color:#4ade80;border:1px solid #22c55e55}
.badge-soon{background:rgb(251 191 36/.14);color:#fbbf24;border:1px solid rgb(251 191 36/.4)}
.badge-sample{background:rgb(var(--c1));color:rgb(var(--on-accent))}
.text-brand{color:rgb(var(--c2))}
.bg-surface{background:rgb(var(--surface))}
.nav a{position:relative;display:inline-flex;align-items:center;gap:.45rem;color:rgb(var(--ink)/.85);transition:.2s}
.nav a:hover,.nav a.cur{color:#fff}
.nav a:after{content:'';position:absolute;left:0;bottom:-8px;height:2px;width:0;background:var(--dot,rgb(var(--c1)));box-shadow:0 0 10px var(--dot,rgb(var(--c1)));transition:.3s}
.nav a:hover:after,.nav a.cur:after{width:100%}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dot);box-shadow:0 0 9px var(--dot)}
.noscroll{scrollbar-width:none}.noscroll::-webkit-scrollbar{display:none}
details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(180deg)}.chev{transition:transform .3s}
body.modal-open{overflow:hidden}
.reveal{opacity:0;transform:translateY(26px);transition:.9s cubic-bezier(.2,.7,.2,1)}
.reveal.on{opacity:1;transform:none}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.float{animation:flt 6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-slow{animation:spin 40s linear infinite}
@keyframes fl{to{transform:translate(40px,-30px) scale(1.15)}}
.orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.42;animation:fl 12s ease-in-out infinite alternate;pointer-events:none}
.tabs-gal .chip{padding:.4rem 1rem;border-radius:9999px;font-size:.85rem}
.ptc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* header / pie */
#hdr{background:rgb(var(--header)/.82);border-bottom:1px solid rgb(255 255 255/.08)}
.foot-line{height:1px;background:linear-gradient(90deg,transparent,#8B5CF6,#FF2A55,#E2E8F0,transparent);box-shadow:0 0 18px rgb(139 92 246/.7)}

/* HERO */
.hero-bg{position:relative;overflow:hidden;background:radial-gradient(70% 60% at 85% 10%,rgb(var(--c1)/.20),transparent 60%),radial-gradient(50% 55% at 0% 100%,rgb(var(--c3)/.14),transparent 60%),rgb(var(--bg))}
.vis-card{position:relative;border-radius:2.5rem;background:linear-gradient(160deg,rgb(var(--card)),rgb(var(--deep)));border:1px solid rgb(var(--c1)/.35);box-shadow:0 30px 90px -25px rgb(var(--c1)/.6),inset 0 0 60px -30px rgb(var(--c1)/.5)}
.vis-ring{position:absolute;inset:12%;border-radius:50%;border:1px dashed rgb(var(--c1)/.35);animation:spin 40s linear infinite}
.vis-ring.r2{inset:26%;animation-direction:reverse;border-color:rgb(var(--c2)/.3)}
.fchip{position:absolute;display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;border-radius:1rem;background:rgb(var(--card)/.92);backdrop-filter:blur(8px);border:1px solid rgb(var(--c1)/.5);box-shadow:0 0 28px -8px rgb(var(--c1)/.7);transition:.3s;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem}
.fchip:hover{transform:scale(1.06);border-color:rgb(var(--c2))}
.fchip svg{width:22px;height:22px;color:rgb(var(--c2))}

/* TARJETAS DE SERVICIO interactivas */
.svc{--mx:50%;--my:0%;position:relative;display:flex;flex-direction:column;border-radius:1.6rem;padding:1.9rem;overflow:hidden;
 background:linear-gradient(160deg,rgb(var(--card)),rgb(var(--deep)));border:1px solid rgb(var(--c1)/.28);
 transition:transform .25s ease,border-color .4s,box-shadow .4s;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.svc:before{content:'';position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgb(var(--c1)/.28),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.svc:hover{border-color:rgb(var(--c2)/.9);box-shadow:0 0 0 1px rgb(var(--c1)/.5),0 25px 70px -20px rgb(var(--c1)/.7)}
.svc:hover:before{opacity:1}
.svc .ico{width:62px;height:62px;border-radius:1.1rem;padding:15px;color:rgb(var(--c2));background:rgb(var(--c1)/.12);border:1px solid rgb(var(--c1)/.4);box-shadow:0 0 28px -6px rgb(var(--c1)/.7)}
.svc h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.65rem;margin-top:1.2rem}
.svc .tag{font-size:.72rem;border-radius:9999px;padding:.25rem .7rem;border:1px solid rgb(var(--c1)/.4);color:rgb(var(--c2));background:rgb(var(--c1)/.08)}
.svc .go{margin-top:auto;padding-top:1.5rem;font-weight:600;color:rgb(var(--c2));display:flex;align-items:center;gap:.5rem}
.svc .go span{transition:.3s}.svc:hover .go span{transform:translateX(6px)}
.svc .spec{font-size:.78rem;color:rgb(var(--muted));border-top:1px solid rgb(255 255 255/.08);margin-top:1.3rem;padding-top:.9rem}
.svc .spec b{color:rgb(var(--ink));font-weight:600}

/* secciones técnicas */
.spec-card{background:rgb(var(--card));border:1px solid rgb(255 255 255/.08);border-radius:1.1rem;padding:1.3rem;transition:.35s}
.spec-card:hover{border-color:rgb(var(--c1)/.6);box-shadow:0 0 30px -10px rgb(var(--c1)/.6);transform:translateY(-4px)}
.spec-card small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--c2));font-weight:700}
.spec-card b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.4rem;margin-top:.35rem}
.spec-card p{font-size:.85rem;color:rgb(var(--muted));margin-top:.3rem}
.cat-card{display:flex;flex-direction:column;gap:.6rem;border-radius:1.3rem;padding:1.4rem;background:linear-gradient(160deg,rgb(var(--card)),rgb(var(--deep)));border:1px solid rgb(255 255 255/.09);text-align:left;transition:.4s;cursor:pointer}
.cat-card:hover{transform:translateY(-6px);border-color:rgb(var(--c2)/.8);box-shadow:0 20px 50px -20px rgb(var(--c1)/.8)}
.cat-card .ci{width:48px;height:48px;border-radius:.9rem;display:grid;place-items:center;font-size:1.5rem;background:rgb(var(--c1)/.12);border:1px solid rgb(var(--c1)/.35)}
.step-n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.4rem;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-alt{background:linear-gradient(180deg,rgb(var(--surface)),rgb(var(--bg)));border-block:1px solid rgb(255 255 255/.06)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.hidden{display:none}
#drawer.translate-x-full{transform:translateX(100%)}
#drawer{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
#toast{opacity:0;pointer-events:none}
@media(min-width:1024px){#mmenu{display:none!important}}
@media print{header,footer,#wsFloat,#drawer,#ov,#toast,.no-print,.orb,.ptc{display:none!important}body{background:#fff!important;color:#000!important}}

/* acento del Inicio: azul neón */
html[data-accent="home"]{--c1:37 120 255;--c2:96 205 255;--c3:56 189 248}
/* submenú de cada área (Inicio · Catálogo · Personalizar …) */
.subnav{border-top:1px solid rgb(255 255 255/.07);background:rgb(var(--header)/.55)}
.subnav>div{height:44px}
.subnav .sub-area{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:rgb(var(--c2));margin-right:.9rem;padding-right:.9rem;border-right:1px solid rgb(255 255 255/.12);white-space:nowrap;text-shadow:0 0 14px rgb(var(--c1)/.9)}
.subnav a{display:flex;align-items:center;height:44px;padding:0 .85rem;font-size:.85rem;font-weight:500;color:rgb(var(--muted));white-space:nowrap;border-bottom:2px solid transparent;transition:.25s}
.subnav a:hover{color:#fff}
.subnav a.cur{color:#fff;border-bottom-color:rgb(var(--c1));box-shadow:0 8px 18px -12px rgb(var(--c1))}
.pg-hero{padding-top:128px}
.engrave{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(100deg,#64748b,#f8fafc 45%,#94a3b8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgb(226 232 240/.35));word-break:break-word}
.mach{filter:drop-shadow(0 30px 50px rgb(var(--c1)/.35))}