:root{
 --bg:#0a0a0b;--bg2:#111113;--surface:#141416;--surface2:#1a1a1d;--surface3:#212126;
 --text:#f7f7f8;--muted:#a2a2ac;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.18);
 --orange:#e01b24;--orange2:#ff3b3b;--teal:#e01b24;--lime:#e01b24;--gold:#f2c14e;--red:#e01b24;
 --brand:#e01b24;--brand-dark:#a50e15;
 --max:1320px;--radius:20px;--shadow:0 26px 70px rgba(0,0,0,.5)
}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth;overflow-x:hidden}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(900px 520px at 85% -5%,rgba(224,27,36,.16),transparent 62%),linear-gradient(180deg,#0a0a0b,#0e0e10 68%,#0a0a0b);color:var(--text);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}:focus-visible{outline:3px solid #ff767c;outline-offset:3px}.wrap{width:min(var(--max),calc(100% - 34px));margin:auto}
.boot{min-height:100vh;display:grid;place-items:center;padding:24px;text-align:center}.boot-panel{width:min(360px,100%);display:grid;justify-items:center;gap:12px;padding:30px;border:1px solid var(--line2);border-radius:24px;background:linear-gradient(180deg,#1d1916,#121112);box-shadow:var(--shadow)}.boot-panel .brand-logo{height:76px;max-width:260px}.boot span{display:block;color:var(--muted);font-size:12px}
.topline{height:32px;background:#0b0a09;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}.topline .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}.live{display:inline-flex;align-items:center;gap:7px}.dot{width:8px;height:8px;border-radius:50%;background:#777}.live.online .dot{background:var(--teal);box-shadow:0 0 0 4px rgba(35,213,196,.08)}.live.pending .dot{background:var(--gold)}
.header{position:sticky;top:0;z-index:60;background:rgba(17,16,15,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{height:72px;display:flex;align-items:center;gap:18px}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,var(--orange),#a63107);display:grid;place-items:center;font-size:13px;font-weight:1000;box-shadow:0 10px 30px rgba(255,106,43,.18)}.brand strong,.brand small{display:block}.brand strong{font-size:13px;letter-spacing:.08em}.brand small{font-size:8px;letter-spacing:.18em;color:var(--orange2);margin-top:4px}
.navlinks{margin-left:auto;display:flex;gap:5px}.navdrop{position:relative}.navdrop>button{border:0;background:transparent;color:#e1d7cf;padding:9px 10px;border-radius:10px;font-weight:800;font-size:12px;cursor:pointer}.navdrop>button:hover,.navdrop.open>button{background:#28221e;color:#fff}.mega{display:none;position:absolute;top:45px;left:50%;transform:translateX(-50%);width:560px;padding:12px;background:#171513;border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow)}.navdrop.open .mega{display:grid;grid-template-columns:1fr 1fr;gap:6px}.mega a{padding:12px;border-radius:12px;border:1px solid transparent}.mega a:hover{background:#24201d;border-color:var(--line)}.mega b,.mega small{display:block}.mega b{font-size:12px}.mega small{font-size:9px;color:var(--muted);margin-top:3px}
.actions{display:flex;align-items:center;gap:8px}.btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:#211d1a;color:#fff;font-weight:900;font-size:11px;cursor:pointer}.btn:hover{border-color:rgba(224,27,36,.6)}.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-dark));border-color:#ff4d54;box-shadow:0 10px 28px rgba(224,27,36,.28);color:#fff}.btn.teal{background:transparent;border-color:var(--brand);color:#ff6a70}.btn.ghost{background:transparent}.lang{height:40px;background:#211d1a;color:#fff;border:1px solid var(--line);border-radius:11px;padding:0 8px}.hamb,.nav-mobile-head,.mega-back,.nav-backdrop{display:none}
.hero{padding:78px 0 58px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;right:-160px;top:-220px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(35,213,196,.10),transparent 66%);pointer-events:none}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:1}.eyebrow{font-size:9px;letter-spacing:.22em;color:var(--teal);font-weight:1000}/* Capped at 62px, not 82px. At 82px the Spanish headline ("Reparación automotriz que
   empieza con el diagnóstico correcto.") wrapped to six lines and pushed the CTA row and
   the workshop address off the first screen — the exact information the owner reported as
   too hard to find. The cap is set by the LONGEST of the three languages, not by English. */
.hero h1{font-size:clamp(40px,4.4vw,62px);line-height:.98;letter-spacing:-.045em;
  margin:12px 0 16px;text-wrap:balance}.hero h1 em{font-style:normal;color:var(--orange2)}.hero .lead{font-size:20px;font-weight:800;margin:0 0 8px}.hero p{color:var(--muted);max-width:760px}.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}.proofs{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;font-size:9.5px;color:#8f8278}
.hero-3d-link{display:inline-flex;align-items:center;gap:7px;min-height:32px;margin-top:10px;color:#ff767c;
  font-size:11px;font-weight:900;letter-spacing:.02em;text-decoration:underline;text-decoration-color:rgba(255,118,124,.42);text-underline-offset:4px}
.hero-3d-link:hover{color:#fff;text-decoration-color:#fff}
.command{padding:19px;border:1px solid var(--line2);border-radius:24px;background:linear-gradient(180deg,#221e1a,#171412);box-shadow:var(--shadow)}.command-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:10px}.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;border:1px solid var(--line2);font-size:8px;font-weight:1000;letter-spacing:.08em}.chip.teal{color:#8ff8ef;border-color:rgba(35,213,196,.32)}.context{margin-top:12px;padding:12px;border:1px solid var(--line);background:#12100f;border-radius:13px}.context small,.context b{display:block}.context small{font-size:8px;color:var(--muted)}.context b{font-size:12px;margin-top:4px}.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.cmd-tile{padding:13px;border:1px solid var(--line);border-radius:13px;background:#1a1715}.cmd-tile:hover{border-color:rgba(255,145,77,.5)}.cmd-tile span,.cmd-tile b,.cmd-tile small{display:block}.cmd-tile span{font-size:7px;color:var(--orange2);font-weight:1000}.cmd-tile b{font-size:12px;margin-top:4px}.cmd-tile small{font-size:9px;color:var(--muted);margin-top:3px}
.quick{border-bottom:1px solid var(--line);background:#0e0d0c}.quick .wrap{display:grid;grid-template-columns:repeat(5,1fr)}.quick a{padding:15px;border-right:1px solid var(--line)}.quick a:first-child{border-left:1px solid var(--line)}.quick b,.quick span{display:block}.quick b{font-size:9px;letter-spacing:.08em}.quick span{font-size:9px;color:var(--muted);margin-top:3px}
.section{padding:68px 0}.section.alt{background:linear-gradient(180deg,#151311,#181512);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:26px;margin-bottom:24px}.section-head h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.04em;margin:8px 0 6px}.section-head p{color:var(--muted);margin:0;max-width:760px}.section-kicker{font-size:9px;letter-spacing:.18em;color:var(--orange2);font-weight:1000}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.grid.three{grid-template-columns:repeat(3,1fr)}.card{min-height:184px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#1d1916,#151210);display:flex;flex-direction:column}.card:hover{transform:translateY(-3px);border-color:rgba(255,145,77,.42)}.card .code{font-size:8px;letter-spacing:.14em;color:var(--teal);font-weight:1000}.card h3{font-size:18px;margin:15px 0 7px}.card p{font-size:11px;color:var(--muted);margin:0}.card .go{font-size:10px;color:#ffb184;margin-top:auto;padding-top:16px}.card.orange{border-color:rgba(255,106,43,.28)}.card.gold{border-color:rgba(242,193,78,.26)}.card.teal{border-color:rgba(35,213,196,.25)}
.bento{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}.bento .big{grid-row:span 2;min-height:330px;padding:25px;border:1px solid rgba(35,213,196,.25);border-radius:20px;background:radial-gradient(circle at 100% 0,rgba(35,213,196,.10),transparent 45%),#1b1714;display:flex;flex-direction:column}.big h3{font-size:32px;margin:18px 0 9px}.big p{color:var(--muted)}.big .go{margin-top:auto;color:#9cf7ed;font-size:11px}.mini{padding:20px;border:1px solid var(--line);border-radius:18px;background:#1a1714}.mini b,.mini span{display:block}.mini b{font-size:16px}.mini span{font-size:10px;color:var(--muted);margin-top:5px}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.feed .card{min-height:210px}.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.tag{padding:4px 7px;border-radius:999px;background:#2a241f;border:1px solid var(--line);font-size:8px;color:#c8b8aa}
.subhero{padding:54px 0 34px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 85% 0,rgba(255,106,43,.10),transparent 42%)}.subhero h1{font-size:clamp(38px,5vw,62px);letter-spacing:-.05em;margin:9px 0 7px}.subhero p{color:var(--muted);max-width:820px}.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin:17px 0}.input,.select,.textarea{min-height:42px;border:1px solid var(--line2);background:#14110f;color:#fff;border-radius:11px;padding:0 12px}.textarea{padding:11px;min-height:110px;resize:vertical}.input{min-width:240px}
.toolpanel{padding:18px;border:1px solid var(--line);border-radius:18px;background:#171412}.result{margin-top:13px}.notice{padding:13px 14px;border:1px solid var(--line2);border-radius:13px;background:#1a1715;color:#d3c7bd;font-size:11px}.notice.warn{border-color:rgba(242,193,78,.30);background:rgba(85,61,17,.16)}.notice.ok{border-color:rgba(35,213,196,.26);background:rgba(13,77,69,.15)}
.empty-state{display:grid;justify-items:start;gap:10px;padding:24px;border:1px dashed var(--line2);border-radius:18px;background:linear-gradient(180deg,#191614,#121112)}.empty-state h3,.empty-state p{margin:0}.empty-state p,.empty-state small{color:var(--muted);line-height:1.6}.empty-icon{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line2);border-radius:50%;color:var(--orange2);font-weight:1000}.error-state{border-color:rgba(242,193,78,.34)}
.customer-guide{margin-bottom:18px;padding:24px;border:1px solid rgba(224,27,36,.35);border-radius:20px;background:radial-gradient(circle at 100% 0,rgba(224,27,36,.14),transparent 46%),#171412}.customer-guide h2{max-width:780px;margin:9px 0;font-size:clamp(25px,4vw,38px)}.customer-guide>p{max-width:850px;color:var(--muted);line-height:1.7}.social-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:9px;color:#d0c3ba}.panel,.card,.service-card,[id^="admin-"]{scroll-margin-top:104px}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:14px}.table{width:100%;border-collapse:collapse;min-width:720px}.table th,.table td{text-align:left;padding:11px;border-bottom:1px solid var(--line);font-size:10px}.table th{background:#211d1a;color:#c9bbb0}.table td{color:#e8ded7}.table tr:last-child td{border-bottom:0}
.network-view{display:grid;grid-template-columns:1fr 1fr;gap:13px}.network-card{padding:17px;border:1px solid var(--line);border-radius:17px;background:#171412}.bus{height:5px;background:linear-gradient(90deg,var(--orange),var(--teal));border-radius:999px;margin:22px 12px}.modules{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.module{padding:9px 10px;border:1px solid var(--line2);border-radius:10px;background:#211d1a;font-size:9px}.module.gateway{border-color:rgba(35,213,196,.4);color:#a1f7ef}
.topology-beta-notice{margin-bottom:12px}.topology-embed{display:block;width:100%;height:min(1220px,calc(100vh - 150px));min-height:760px;border:1px solid var(--line2);border-radius:18px;background:#0b0e12}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.filebox{padding:18px;border:1px dashed var(--line2);border-radius:16px;background:#15120f}.filebox strong,.filebox small{display:block}.filebox small{color:var(--muted);font-size:9px;margin-top:4px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}.metric{padding:13px;border:1px solid var(--line);border-radius:13px;background:#181512}.metric span,.metric b{display:block}.metric span{font-size:8px;color:var(--muted)}.metric b{font-size:15px;margin-top:4px}
.dashboard{display:grid;grid-template-columns:230px 1fr;gap:16px}.sidebar{height:max-content;position:sticky;top:120px;padding:13px;border:1px solid var(--line);border-radius:16px;background:#171412}.sidebar strong{display:block;padding:6px 8px 12px}.sidebar a{display:block;padding:9px 10px;border-radius:9px;color:#baa99d;font-size:10px}.sidebar a:hover,.sidebar a.active{background:#26211d;color:#fff}.panel{padding:18px;border:1px solid var(--line);border-radius:17px;background:#171412}.panel+.panel{margin-top:12px}.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.admin-card{padding:16px;border:1px solid var(--line);border-radius:15px;background:#1b1714;min-height:130px}.admin-card:hover{border-color:rgba(255,145,77,.42)}.admin-card b{font-size:13px}.admin-card p{font-size:10px;color:var(--muted)}.admin-card .icon{width:36px;height:36px;border-radius:10px;background:#2a211b;display:grid;place-items:center;color:var(--orange2);font-size:9px;font-weight:1000;margin-bottom:12px}
.footer{border-top:1px solid var(--line);background:#0a0908}.footer-main{display:grid;grid-template-columns:1.4fr auto auto;gap:25px;align-items:center;padding:21px 0}.footer b,.footer small{display:block}.footer small{font-size:9px;color:var(--muted);margin-top:4px}.footer nav{display:flex;gap:14px;font-size:9px;color:#a99a8f}.footer-contact{text-align:right;font-size:9px;color:#a99a8f}.footer-bottom{padding:10px 0 16px;border-top:1px solid rgba(255,244,234,.06);display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:#a99a8f}
@media(max-width:1040px){
 .header.nav-overlay-open{-webkit-backdrop-filter:none;backdrop-filter:none}
 .navlinks{display:none}
 .hamb{display:inline-flex;margin-left:auto;min-width:44px;min-height:44px}
 .actions .account,.actions .book{display:none}
 .nav-backdrop{position:fixed;inset:0;z-index:110;display:none;margin:0;padding:0;border:0;border-radius:0;background:rgba(0,0,0,.68);backdrop-filter:blur(4px);cursor:default}
 .nav.mobile-open .nav-backdrop{display:block}
 .nav.mobile-open .navlinks{
  position:fixed;inset-block:0;inset-inline-end:0;z-index:111;display:flex;width:min(420px,100vw);height:100vh;height:100dvh;max-height:100dvh;
  flex-direction:column;gap:4px;margin:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  border:0;border-inline-start:1px solid var(--line2);border-radius:0;background:#121110;box-shadow:-24px 0 70px rgba(0,0,0,.62);isolation:isolate;transform:none!important;perspective:none!important}
 .nav-mobile-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:4px 0 10px;border-bottom:1px solid var(--line2);background:#121110}
 .nav-mobile-head>strong{font-size:15px;letter-spacing:.03em}
 .nav-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid var(--line2);border-radius:12px;background:#211d1a;color:#fff;font-weight:900;cursor:pointer}
 .nav-close span[aria-hidden]{font-size:22px;line-height:1}
 .nav.mobile-open .navdrop{display:block;border-bottom:1px solid rgba(255,255,255,.07)}
 .nav.mobile-open .navdrop>button{min-height:52px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;text-align:left;font-size:15px}
 .nav.mobile-open .navdrop>button::after{content:"+";flex:0 0 auto;font-size:22px;font-weight:500;color:var(--muted)}
 .nav.mobile-open .navdrop.open>button::after{content:"−";color:#fff}
 .nav.mobile-open .navdrop.open .mega{position:static;display:grid;width:100%;grid-template-columns:minmax(0,1fr);gap:4px;margin:0 0 8px;padding:4px 0 8px 12px;transform:none!important;border:0;border-left:2px solid rgba(224,27,36,.48);border-radius:0;background:transparent;box-shadow:none;animation:none!important}
 .nav.mobile-open .mega a{min-height:56px;display:flex;flex-direction:column;justify-content:center;padding:9px 12px;border-radius:12px}
 .nav.mobile-open .mega b{font-size:14px}.nav.mobile-open .mega small{font-size:11px;line-height:1.35}
 .nav.mobile-open .mega-back{min-height:44px;display:inline-flex;align-items:center;padding:7px 12px;border:0;border-radius:10px;background:transparent;color:#ff8a8f;font-size:12px;font-weight:900;text-align:left;cursor:pointer}
 .nav.mobile-open .navlinks>.btn{width:100%;min-height:52px;justify-content:flex-start;margin-top:4px;font-size:15px}
 .nav.mobile-open .navlinks :is(.depth-scene,.depth-surface){transform:none!important;will-change:auto!important;perspective:none!important}
 html.nav-lock,html.nav-lock body{overscroll-behavior:none}
 html.nav-lock body{position:fixed;top:var(--nav-scroll-top,0);inset-inline:0;width:100%;overflow:hidden}
 html.nav-lock .mobile-conversion{visibility:hidden;pointer-events:none}
 .hero-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:1fr 1fr}.bento{grid-template-columns:1fr 1fr}.bento .big{grid-column:1/-1;grid-row:auto}.feed{grid-template-columns:1fr 1fr}.dashboard{grid-template-columns:1fr}.sidebar{position:static}.admin-grid{grid-template-columns:1fr 1fr}.footer-main{grid-template-columns:1fr}.footer-contact{text-align:left}
}
@media(max-width:650px){.wrap{width:min(var(--max),calc(100% - 22px))}.actions .account{display:none}.hero{padding:50px 0 36px}.hero h1{font-size:46px}.cmd-grid,.grid,.grid.three,.bento,.feed,.network-view,.compare,.metrics,.admin-grid{grid-template-columns:1fr}.quick .wrap{grid-template-columns:1fr 1fr}.section{padding:48px 0}.section-head{align-items:flex-start;flex-direction:column}.footer nav{flex-wrap:wrap}.topology-embed{height:900px;min-height:900px;border-radius:13px}}

.brand-logo{height:46px;width:auto;max-width:180px;border-radius:8px;object-fit:contain;border:0;box-shadow:none}
.actionrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.server-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.server-metric{padding:14px;border:1px solid var(--line);border-radius:14px;background:#181512}
.server-metric span,.server-metric b{display:block}.server-metric span{font-size:8px;color:var(--muted)}.server-metric b{font-size:18px;margin-top:5px}
@media(max-width:900px){.server-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.server-grid{grid-template-columns:1fr}}

.mobile-conversion{display:none}
@media(max-width:650px){
 body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
 .mobile-conversion{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:90;display:grid;grid-template-columns:repeat(3,1fr);background:#16120f;border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
 .mobile-conversion a{min-height:50px;display:grid;place-items:center;padding:10px 8px;text-align:center;font-size:10px;font-weight:1000;border-right:1px solid var(--line)}
 .mobile-conversion a:last-child{border-right:0}
 .footer-bottom{padding-bottom:20px}
}

/* v5.1.7 service catalog */
.catalog-hero{position:relative;overflow:hidden;padding:72px 0 58px;border-bottom:1px solid var(--line);background:radial-gradient(700px 500px at 90% 10%,rgba(35,213,196,.13),transparent 66%),linear-gradient(150deg,#11100f,#1a1512)}
.catalog-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,106,43,.04),transparent 38%);pointer-events:none}
.catalog-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:48px;align-items:center}
.catalog-hero h1{max-width:850px;margin:12px 0 18px;font-size:clamp(44px,6vw,76px);line-height:.98;letter-spacing:-.055em}
.catalog-hero p{max-width:760px;color:var(--muted);font-size:16px;line-height:1.7}
.catalog-specialty{padding:25px;border:1px solid rgba(35,213,196,.28);border-radius:24px;background:linear-gradient(180deg,rgba(32,47,44,.72),rgba(18,17,15,.88));box-shadow:var(--shadow)}
.catalog-specialty h2{margin:18px 0 10px;font-size:27px;line-height:1.15}
.catalog-specialty p{font-size:12px;line-height:1.65}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#1d1916,#151210);box-shadow:0 16px 44px rgba(0,0,0,.20);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.service-card:hover{transform:translateY(-5px);border-color:rgba(255,145,77,.48);box-shadow:0 24px 58px rgba(0,0,0,.34)}
.service-card.featured{border-color:rgba(35,213,196,.28)}
.service-card-media{position:relative;display:block;height:230px;overflow:hidden;background:#0b0a09}
.service-card-media:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.68));pointer-events:none}
.service-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.service-card:hover .service-card-media img{transform:scale(1.035)}
.service-card-media .service-category,.service-detail-copy>.service-category{position:absolute;left:16px;bottom:15px;z-index:1;display:inline-flex;padding:7px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(8,8,8,.74);backdrop-filter:blur(10px);color:#fff;font-size:9px;font-weight:1000;letter-spacing:.10em;text-transform:uppercase}
.service-card-body{display:flex;min-height:265px;flex-direction:column;padding:20px}
.service-card-body h3{margin:0 0 10px;font-size:22px;line-height:1.15;letter-spacing:-.025em}
.service-card-body p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.service-tags{display:flex;flex-wrap:wrap;gap:6px;margin:17px 0}
.service-tags span{display:inline-flex;padding:6px 8px;border:1px solid var(--line);border-radius:999px;background:#241f1b;color:#c5b9b0;font-size:8px;font-weight:900;letter-spacing:.04em}
.service-tags span.accent{border-color:rgba(242,193,78,.34);color:#f7d984}
.service-card-link{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);color:#ffb184;font-size:11px;font-weight:1000}
.shop-cta,.service-policy{display:flex;justify-content:space-between;gap:28px;align-items:center;margin-top:28px;padding:24px 26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#1e1916,#161310)}
.shop-cta h2,.service-policy h2{margin:7px 0 4px;font-size:29px}.shop-cta p,.service-policy p{margin:0;color:var(--muted)}
.service-detail-hero{padding:34px 0 58px;border-bottom:1px solid var(--line);background:radial-gradient(750px 460px at 84% 10%,rgba(255,106,43,.11),transparent 67%)}
.service-back{display:inline-flex;margin-bottom:18px;color:#c7bbb3;font-size:10px;font-weight:900}
.service-detail-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(380px,.94fr);gap:42px;align-items:center}
.service-detail-media{height:590px;overflow:hidden;border:1px solid var(--line2);border-radius:28px;background:#0b0a09;box-shadow:var(--shadow)}
.service-detail-media img{display:block;width:100%;height:100%;object-fit:cover}
.service-detail-copy{position:relative}.service-detail-copy>.service-category{position:static;margin-bottom:16px;background:#241f1b}
.service-detail-copy h1{margin:0 0 17px;font-size:clamp(43px,5.3vw,72px);line-height:.98;letter-spacing:-.055em}
.service-detail-copy>p{margin:0;color:var(--muted);font-size:17px;line-height:1.72}
.service-price-note{display:grid;gap:5px;margin-top:22px;padding:16px;border:1px solid rgba(242,193,78,.24);border-radius:16px;background:rgba(95,67,14,.12)}
.service-price-note b{color:#f4d476;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.service-price-note span{color:#cfc2b6;font-size:11px;line-height:1.5}
.service-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.service-info-panel{padding:24px;border:1px solid var(--line);border-radius:20px;background:#171412}.service-info-panel.highlight{border-color:rgba(35,213,196,.28);background:linear-gradient(180deg,rgba(24,55,50,.34),#171412)}
.service-info-panel h2{margin:0 0 17px;font-size:21px}.service-info-panel ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}.service-info-panel li{position:relative;padding-left:20px;color:#d3c7bd;font-size:12px;line-height:1.5}.service-info-panel li:before{content:"";position:absolute;left:0;top:.48em;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(35,213,196,.08)}
.service-gallery{margin-top:58px}.service-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.service-gallery-item{height:280px;overflow:hidden;padding:0;border:1px solid var(--line);border-radius:18px;background:#0b0a09;cursor:zoom-in}.service-gallery-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}.service-gallery-item:hover img{transform:scale(1.03)}
.service-lightbox{width:min(1100px,calc(100% - 28px));max-width:none;padding:0;border:1px solid var(--line2);border-radius:22px;background:#0c0b0a;box-shadow:var(--shadow)}.service-lightbox::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(6px)}.service-lightbox img{display:block;width:100%;max-height:82vh;object-fit:contain}.service-lightbox button{position:absolute;right:12px;top:12px;z-index:2;width:42px;height:42px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font-size:25px;cursor:pointer}
.service-policy small{display:block;max-width:820px;margin-top:10px;color:#82776f;font-size:9px;line-height:1.5}
.appointment-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}.appointment-aside{position:sticky;top:116px;padding:24px;border:1px solid rgba(35,213,196,.24);border-radius:19px;background:linear-gradient(180deg,rgba(24,55,50,.29),#171412)}.appointment-aside h2{margin:12px 0;font-size:26px}.appointment-aside p{color:var(--muted);font-size:12px;line-height:1.6}.consent-row{display:block;margin:12px 0;color:#cfc4bb;font-size:11px;line-height:1.5}
.admin-service-copy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.admin-service-copy>div{display:grid;gap:7px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#14110f}.admin-service-copy h3{margin:0 0 4px}.admin-service-copy .input,.admin-service-copy .textarea{width:100%;min-width:0}.admin-service-copy .textarea{min-height:86px}
@media(max-width:1040px){.catalog-hero-grid,.service-detail-grid{grid-template-columns:1fr}.service-detail-media{height:520px}.service-grid,.service-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.service-info-grid{grid-template-columns:1fr 1fr}.service-gallery-grid{grid-template-columns:1fr 1fr}.admin-service-copy{grid-template-columns:1fr}}
@media(max-width:720px){.catalog-hero{padding:48px 0 38px}.catalog-hero h1{font-size:43px}.catalog-specialty{padding:20px}.service-grid,.service-grid.compact,.service-info-grid,.service-gallery-grid,.appointment-layout{grid-template-columns:1fr}.service-card-media{height:225px}.service-card-body{min-height:0}.service-detail-hero{padding-top:24px}.service-detail-grid{gap:24px}.service-detail-media{height:430px;border-radius:20px}.service-detail-copy h1{font-size:42px}.service-detail-copy>p{font-size:14px}.service-gallery-item{height:250px}.shop-cta,.service-policy{align-items:flex-start;flex-direction:column;padding:20px}.appointment-aside{position:static}}

/* v5.1.7-fm2 brand + fixes */
.live .dot{background:var(--brand)}
.hxd-tool{margin-bottom:16px}
.brand small{color:var(--orange2)}
@media(max-width:520px){
 .nav{gap:10px}
 .actions{gap:6px;flex-shrink:1;min-width:0}
 .header .book{display:none}
 .brand small{display:none}
 .brand-logo{height:38px}
 .topline{font-size:9px}
 .topline .wrap{gap:8px}
 .hero{padding:40px 0 30px}.hero-grid{gap:28px}.hero h1{font-size:38px;line-height:1}.hero .lead{font-size:17px}.subhero{padding:38px 0 27px}.subhero h1{font-size:34px;line-height:1.05}.section{padding:38px 0}.section-head{gap:10px;margin-bottom:18px}.section-head h2{font-size:31px}.card,.feed .card{min-height:0}.command{padding:15px}.topology-embed{height:760px;min-height:760px}
}


/* v5.1.8: distinct service visuals replace repeated generic workshop photography. */
.service-visual{
  width:100%;height:100%;min-height:220px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;gap:6px;padding:22px;
  background:
    radial-gradient(circle at 78% 22%,rgba(255,255,255,.12),transparent 24%),
    linear-gradient(135deg,#101820,#23313b);
  color:#fff;position:relative;overflow:hidden
}
.service-visual::before{
  content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.18);
  border-radius:18px;pointer-events:none
}
.service-visual strong{font-size:clamp(1.45rem,3vw,2.3rem);letter-spacing:.05em;z-index:1}
.service-visual span{font-size:.92rem;opacity:.82;z-index:1}
.service-visual-no-start{background:linear-gradient(135deg,#111820,#32251d)}
.service-visual-electrical-repair{background:linear-gradient(135deg,#101820,#153444)}
.service-visual-engine-repair{background:linear-gradient(135deg,#151a1d,#2f2d29)}
.service-visual-brake-service{background:linear-gradient(135deg,#15181d,#302222)}
.service-visual-transmission-service{background:linear-gradient(135deg,#121820,#252d38)}
.service-visual-oil-maintenance{background:linear-gradient(135deg,#121a18,#26362f)}
.service-detail-media .service-visual{min-height:420px;border-radius:22px}

/* v5.2.1 independent dynamic UX */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease}
.reveal.reveal-visible,.reveal-visible{opacity:1;transform:none}
.skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,#181512 25%,#29231f 45%,#181512 65%);background-size:240% 100%;animation:skeleton-shift 1.25s ease-in-out infinite}
@keyframes skeleton-shift{to{background-position:-160% 0}}
.workflow-list{display:grid;gap:12px;margin:18px 0;padding-left:24px}.workflow-list li{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#1a1715;color:#d7ccc4}
.catalog-item .actionrow{margin-top:auto;padding-top:16px}.catalog-item{min-height:250px}
.brand-region,.training-group{margin:28px 0}.brand-region>.section-kicker,.training-group>.section-kicker{margin-bottom:11px}
.brand-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.brand-card,.resource-card{display:flex;min-height:92px;flex-direction:column;justify-content:space-between;gap:10px;padding:16px;border:1px solid var(--line);border-radius:15px;background:#171412}.brand-card:hover,.resource-card:hover,.system-card:hover{border-color:rgba(255,145,77,.46);transform:translateY(-2px)}.brand-card b,.resource-card b{font-size:14px}.brand-card span,.resource-card span{color:var(--muted);font-size:9px;line-height:1.45}
.system-grid,.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.system-card{display:flex;min-height:190px;flex-direction:column;padding:20px;border:1px solid var(--line);border-radius:18px;background:#171412;transition:transform .2s,border-color .2s}.system-card h3{margin:12px 0 8px;font-size:21px}.system-card p{color:var(--muted);font-size:11px}.system-card .go{margin-top:auto}
.knowledge-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;color:var(--muted);font-size:10px}.knowledge-breadcrumb a{color:var(--orange2)}.knowledge-breadcrumb b{color:#fff}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px}.audience-panel{padding:21px;border:1px solid var(--line);border-radius:18px;background:#171412}.audience-panel ul{display:grid;gap:11px;margin:14px 0 0;padding-left:20px}.audience-panel li{color:#d4c9c0;font-size:11px;line-height:1.6}
.catalog-filters .select,.catalog-filters .input{min-width:170px}.training-module{max-width:980px}.payment-methods{display:grid;gap:9px;margin:16px 0}.payment-method{display:grid;grid-template-columns:170px 1.2fr 110px 120px 1.5fr 1.5fr;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;background:#14110f}.payment-method .input,.payment-method .select{width:100%;min-width:0}
@media(max-width:1040px){.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.payment-method{grid-template-columns:1fr 1fr 100px}.payment-method [data-field="publicUrl"],.payment-method [data-field="instructions"]{grid-column:span 2}}
@media(max-width:650px){.brand-grid,.system-grid,.resource-grid,.audience-grid{grid-template-columns:1fr}.brand-card{min-height:76px}.payment-method{grid-template-columns:1fr}.payment-method [data-field="publicUrl"],.payment-method [data-field="instructions"]{grid-column:auto}.catalog-filters>*{width:100%;min-width:0!important}}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
 .reveal{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   BLOQUE 13 — Motion system (tokens) + BLOQUE 12 information hierarchy
   Premium, restrained, automotive. No perpetual animation. No motion library.
   Every animated property is transform/opacity only, so nothing triggers layout.
   ========================================================================== */
:root{
  --duration-fast:140ms;
  --duration-medium:260ms;
  --duration-slow:460ms;
  --easing-standard:cubic-bezier(.2,0,.2,1);
  --easing-emphasized:cubic-bezier(.16,1,.3,1);
  --lift:translateY(-3px);
}

/* --- Section reveal (single shared IntersectionObserver, already in main.js) --- */
/* Hidden ONLY when JS has proven it can reveal again (html.js-motion). Without JS, without
   IntersectionObserver, or under reduced motion, content renders at full opacity. */
.reveal{transition:opacity var(--duration-slow) var(--easing-emphasized),transform var(--duration-slow) var(--easing-emphasized)}
html.js-motion .reveal{opacity:0;transform:translateY(16px)}
html.js-motion .reveal-visible,.reveal-visible{opacity:1;transform:none}

/* --- Interactive feedback --- */
.btn{transition:transform var(--duration-fast) var(--easing-standard),
  border-color var(--duration-fast) var(--easing-standard),
  box-shadow var(--duration-fast) var(--easing-standard),
  background-color var(--duration-fast) var(--easing-standard)}
.btn:hover{transform:var(--lift)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:60ms}
.btn:focus-visible,.soc:focus-visible,a:focus-visible{outline:2px solid var(--brand,#e01b24);outline-offset:3px;border-radius:8px}
.card,.service-card,.cmd-tile,.brand-card,.system-card{
  transition:transform var(--duration-medium) var(--easing-standard),
  border-color var(--duration-medium) var(--easing-standard),
  box-shadow var(--duration-medium) var(--easing-standard)}
.card:hover,.service-card:hover,.cmd-tile:hover{transform:var(--lift)}
.navdrop>button{transition:background-color var(--duration-fast) var(--easing-standard),color var(--duration-fast) var(--easing-standard)}
.mega{transition:opacity var(--duration-fast) var(--easing-standard)}
.soc{transition:transform var(--duration-fast) var(--easing-standard),border-color var(--duration-fast) var(--easing-standard),color var(--duration-fast) var(--easing-standard)}
.soc:hover{transform:var(--lift)}

/* --- Loading skeleton: finite context, never a perpetual page-wide animation --- */
.skeleton{position:relative;overflow:hidden}
.skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  transform:translateX(-100%);animation:skeleton-shift 1.4s var(--easing-standard) infinite}

/* --- BLOQUE 12: above-the-fold commercial identity --- */
.hero-contact{margin-top:22px;padding-top:18px;border-top:1px solid var(--line,rgba(255,255,255,.1));
  display:flex;flex-direction:column;gap:12px}
.hero-contact-line{display:flex;align-items:center;gap:8px;color:var(--text,#f7f7f8);font-weight:700;font-size:13px}
.hero-contact-line svg{flex:0 0 auto;color:var(--brand,#e01b24)}
.hero-contact-actions{display:flex;flex-wrap:wrap;gap:8px}
.btn.sm{min-height:34px;padding:0 12px;font-size:10.5px}
.social-row{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.soc{width:34px;height:34px;border-radius:10px;border:1px solid var(--line2,rgba(255,255,255,.18));
  display:inline-flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.03)}
.soc:hover{border-color:var(--brand,#e01b24);color:#ff6a70}
.topline-right{display:flex;align-items:center;gap:12px}
.topline-social .soc{width:24px;height:24px;border-radius:7px;border-color:transparent}
.topline-social .soc svg{width:14px;height:14px}

/* --- BLOQUE 12: location + trust block, first third of Home --- */
.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.location-info{display:flex;flex-direction:column;gap:10px}
.loc-line{display:flex;align-items:center;gap:8px;font-size:14px}
.loc-line svg{color:var(--brand,#e01b24);flex:0 0 auto}
.loc-rating{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.loc-rating b{font-size:24px}
.loc-rating span{color:var(--muted,#a2a2ac);font-size:12px}
.loc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.loc-social{display:flex;align-items:center;gap:10px;margin-top:6px;color:var(--muted,#a2a2ac);font-size:12px}
.location-map{display:block;position:relative;min-height:230px;border-radius:18px;
  border:1px solid var(--line2,rgba(255,255,255,.18));
  background:linear-gradient(135deg,#1a1a1d,#0e0e10);overflow:hidden;
  transition:border-color var(--duration-medium) var(--easing-standard),transform var(--duration-medium) var(--easing-standard)}
.location-map:hover{border-color:var(--brand,#e01b24);transform:var(--lift)}
.map-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:20px}
.map-inner b{font-size:18px}
.map-inner span{color:var(--muted,#a2a2ac);font-size:12px}
.map-inner .map-open{color:#ff6a70;font-weight:800;margin-top:8px}

@media(max-width:820px){
  .location-grid{grid-template-columns:1fr}
  .hero-contact-actions .btn{flex:1 1 auto}
}

/* --- Accessibility: reduced motion disables movement without hiding content --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
  .btn:hover,.card:hover,.soc:hover,.location-map:hover,.service-card:hover,.cmd-tile:hover{transform:none !important}
  .skeleton::after{animation:none !important;opacity:.06}
  .hero h1,.hero .lead,.hero-actions,.hero-contact{opacity:1 !important;transform:none !important;animation:none !important}
  .service-card:hover .service-card-media img{transform:none !important}
}

/* ==========================================================================
   PROBLEM 7/8 — depth and commercial motion. Original Full Motors language:
   dark, technical, automotive. transform/opacity only; no motion library.
   ========================================================================== */

/* Hero entrance. Staggered, runs once, and every element is fully visible by 0.6s. */
@keyframes fm-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.js-motion .hero h1,
html.js-motion .hero .lead,
html.js-motion .hero-actions,
html.js-motion .hero-contact,
html.js-motion .command{animation:fm-rise var(--duration-slow) var(--easing-emphasized) backwards}
html.js-motion .hero .lead{animation-delay:60ms}
html.js-motion .hero-actions{animation-delay:120ms}
html.js-motion .hero-contact{animation-delay:180ms}
html.js-motion .command{animation-delay:120ms}

/* Service cards: image lift plus a brand edge on hover. Reads as depth, not decoration. */
.service-card{position:relative;overflow:hidden}
.service-card-media{overflow:hidden}
.service-card-media img{transition:transform var(--duration-slow) var(--easing-emphasized)}
.service-card:hover .service-card-media img{transform:scale(1.045)}
.service-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--brand,#e01b24),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--duration-medium) var(--easing-emphasized)}
.service-card:hover::after,.service-card:focus-within::after{transform:scaleX(1)}

/* Primary CTA: a single restrained sheen on hover. No perpetual movement. */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18),transparent 70%);
  transform:translateX(-120%);transition:transform var(--duration-slow) var(--easing-emphasized)}
.btn.primary:hover::after{transform:translateX(120%)}

/* Command tiles and quick strip: technical, precise feedback. */
.cmd-tile,.quick a{transition:background-color var(--duration-fast) var(--easing-standard),
  border-color var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard)}
.quick a:hover{background:rgba(224,27,36,.06)}

/* Dropdown entrance. The panel toggles display, which cannot transition, so a one-shot
   keyframe is used instead. Layout and the existing display rules are untouched. */
@keyframes fm-drop{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
html.js-motion .navdrop.open .mega{animation:fm-drop var(--duration-fast) var(--easing-standard) both}

/* Staggered reveal for grids: rhythm without a per-element observer. */
html.js-motion .grid>.reveal:nth-child(2),
html.js-motion .service-grid>.reveal:nth-child(2){transition-delay:60ms}
html.js-motion .grid>.reveal:nth-child(3),
html.js-motion .service-grid>.reveal:nth-child(3){transition-delay:120ms}
html.js-motion .grid>.reveal:nth-child(n+4),
html.js-motion .service-grid>.reveal:nth-child(n+4){transition-delay:160ms}

@media (prefers-reduced-motion: reduce){
  html.js-motion .navdrop.open .mega{animation:none !important}
  html.js-motion .grid>.reveal,html.js-motion .service-grid>.reveal{transition-delay:0ms !important}
  html.js-motion .hero h1,html.js-motion .hero .lead,html.js-motion .hero-actions,
  html.js-motion .hero-contact,html.js-motion .command{animation:none !important;opacity:1 !important;transform:none !important}
  .btn.primary::after{display:none !important}
}

/* --- BLOQUE 15: diagnostics panel (staging only, opt-in via ?debug=1) --- */
.fm-debug{position:fixed;right:12px;bottom:12px;z-index:9999;max-width:min(420px,calc(100vw - 24px));
  background:rgba(10,10,11,.97);border:1px solid var(--line2,rgba(255,255,255,.18));border-radius:14px;
  padding:12px 14px;font-size:11px;color:var(--text,#f7f7f8);box-shadow:0 20px 50px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);max-height:70vh;overflow:auto}
.fm-debug-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line,rgba(255,255,255,.1))}
.fm-debug-head button{background:transparent;border:0;color:var(--muted,#a2a2ac);font-size:18px;line-height:1;cursor:pointer}
.fm-debug-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.fm-debug-row span{color:var(--muted,#a2a2ac);flex:0 0 auto}
.fm-debug-row code{font-size:10px;word-break:break-all;text-align:right}
.fm-debug-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line,rgba(255,255,255,.1));
  color:var(--muted,#a2a2ac);font-size:9.5px}

/* ==========================================================================
   PART G/H — brand discovery. The owner's report was "no cambio por marca":
   switching brands produced no visible state change. Selection is now explicit.
   ========================================================================== */
.facet-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.facet-chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;
  border-radius:999px;border:1px solid var(--line2,rgba(255,255,255,.18));
  background:rgba(255,255,255,.03);color:var(--text,#f7f7f8);font-weight:800;font-size:11.5px;cursor:pointer;
  transition:transform var(--duration-fast) var(--easing-standard),
             border-color var(--duration-fast) var(--easing-standard),
             background-color var(--duration-fast) var(--easing-standard),
             color var(--duration-fast) var(--easing-standard)}
.facet-chip:hover{transform:var(--lift);border-color:rgba(224,27,36,.55)}
.facet-chip:focus-visible{outline:2px solid var(--brand,#e01b24);outline-offset:3px}
.facet-chip.is-active{background:linear-gradient(135deg,var(--brand,#e01b24),var(--brand-dark,#a50e15));
  border-color:#ff4d54;color:#fff;box-shadow:0 8px 22px rgba(224,27,36,.28)}
.facet-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;background:rgba(255,255,255,.10);font-size:10px;font-weight:900}
.facet-chip.is-active .facet-count{background:rgba(0,0,0,.28)}
.facet-status{color:var(--muted,#a2a2ac);font-size:12px;margin:0 0 14px;min-height:18px}
.tag.warn{border-color:rgba(242,193,78,.45);color:#f2c14e}
.training-card .tagrow{margin-top:10px}
@media (prefers-reduced-motion: reduce){.facet-chip:hover{transform:none !important}}

/* ==========================================================================
   PART C — two audiences. A local vehicle owner and a professional technician
   arrive at the same URL with different intent. Both journeys are now explicit.
   ========================================================================== */
.audience-band{padding-top:44px;padding-bottom:44px}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.audience-card{position:relative;padding:26px;border-radius:22px;overflow:hidden;
  border:1px solid var(--line2,rgba(255,255,255,.18));
  background:linear-gradient(180deg,#17171a,#101012);
  display:flex;flex-direction:column;gap:10px;
  transition:transform var(--duration-medium) var(--easing-standard),
             border-color var(--duration-medium) var(--easing-standard)}
.audience-card:hover{transform:var(--lift);border-color:rgba(224,27,36,.5)}
.audience-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand,#e01b24),transparent)}
.audience-card h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:6px 0 2px}
.audience-card p{color:var(--muted,#a2a2ac);margin:0;font-size:13px}
.audience-points{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.audience-points li{position:relative;padding-left:18px;font-size:12.5px;color:var(--text,#f7f7f8)}
.audience-points li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--brand,#e01b24)}
.audience-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:16px}
.audience-tech{background:linear-gradient(180deg,#141419,#0e0e11)}
.audience-workshop{grid-column:1/-1;background:linear-gradient(105deg,#151216,#0e0e11 64%,rgba(224,27,36,.08))}
@media(max-width:820px){.audience-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.audience-card:hover{transform:none !important}}

/* --- PART B/E: quantified scope. Counters animate once, via the existing [data-count]
   helper, which already short-circuits under prefers-reduced-motion. --- */
.scope-band{padding:26px 0;border-top:1px solid var(--line,rgba(255,255,255,.1));
  border-bottom:1px solid var(--line,rgba(255,255,255,.1));
  background:linear-gradient(180deg,#0e0e10,#0a0a0b)}
.scope-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.scope-stat{display:flex;flex-direction:column;gap:4px;padding:14px 12px;border-radius:14px;
  border:1px solid transparent;
  transition:border-color var(--duration-fast) var(--easing-standard),
             background-color var(--duration-fast) var(--easing-standard),
             transform var(--duration-fast) var(--easing-standard)}
.scope-stat:hover{border-color:rgba(224,27,36,.4);background:rgba(224,27,36,.05);transform:var(--lift)}
.scope-stat b{font-size:clamp(24px,2.6vw,34px);line-height:1;letter-spacing:-.03em}
.scope-stat span{font-size:10.5px;color:var(--muted,#a2a2ac);letter-spacing:.04em}
.scope-note{margin:14px 0 0;font-size:10.5px;color:var(--muted,#a2a2ac);max-width:760px}
@media(max-width:980px){.scope-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.scope-grid{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion: reduce){.scope-stat:hover{transform:none !important}}

/* --- PHASE 4: interactive vehicle systems map (inline SVG + CSS, no WebGL) ---------
   Layout reserves its own space via aspect-ratio, so the diagram cannot cause CLS.
   Every hotspot is a real <button>; the .vm-list mirrors the same controls so touch
   and keyboard users never depend on hitting a small target on the diagram. */
.vehicle-map{border-top:1px solid var(--line,rgba(255,255,255,.1));
  background:radial-gradient(120% 90% at 20% 0%,rgba(224,27,36,.07),transparent 60%),#0a0a0b}
.vm-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:start;perspective:1400px}
.vm-stage{position:relative;aspect-ratio:200/110;width:100%;border-radius:18px;overflow:hidden;
  border:1px solid var(--line,rgba(255,255,255,.1));background:#0c0c0f;contain:layout paint;
  perspective:1200px;transform:perspective(1200px) rotateX(var(--vm-tilt-x,0deg)) rotateY(var(--vm-tilt-y,0deg));
  transform-style:preserve-3d;box-shadow:0 32px 80px rgba(0,0,0,.54),0 0 0 1px rgba(224,27,36,.05) inset;
  transition:transform 180ms var(--easing-standard,ease),border-color 180ms var(--easing-standard,ease),box-shadow 180ms var(--easing-standard,ease)}
.vm-stage:hover{border-color:rgba(224,27,36,.36);box-shadow:0 38px 90px rgba(0,0,0,.62),0 0 32px rgba(224,27,36,.08)}
.vm-stage svg{display:block;width:100%;height:100%;transform:translateZ(8px)}
.vm-hotspots{position:absolute;inset:0;transform:translateZ(22px)}
.vm-3d-badge{align-self:flex-start;color:#ff8d92;border-color:rgba(224,27,36,.45);background:rgba(224,27,36,.08)}
.vm-hotspot{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;
  padding:0;margin:0;background:none;border:0;cursor:pointer;color:inherit;z-index:2}
.vm-dot{position:relative;display:block;width:14px;height:14px;border-radius:50%;flex:none;
  background:#e01b24;box-shadow:0 0 0 3px rgba(224,27,36,.22),0 0 12px rgba(224,27,36,.5);
  transition:box-shadow var(--duration-fast,140ms) var(--easing-standard,ease),
             transform var(--duration-fast,140ms) var(--easing-standard,ease)}
.vm-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(224,27,36,.55);animation:vm-pulse 2.6s var(--easing-standard,ease) infinite}
.vm-hotspot:hover .vm-dot,.vm-hotspot:focus-visible .vm-dot{transform:scale(1.18)}
.vm-hotspot.is-active .vm-dot{background:#fff5f5;
  box-shadow:0 0 0 4px rgba(224,27,36,.45),0 0 18px rgba(224,27,36,.7)}
.vm-hotspot.is-active .vm-dot::after{animation:none;border-color:rgba(255,255,255,.6)}
.vm-hotspot:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:20px}
.vm-tip{white-space:nowrap;font-size:10.5px;letter-spacing:.03em;padding:4px 9px;border-radius:999px;
  background:rgba(8,8,10,.92);border:1px solid rgba(224,27,36,.45);
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  color:var(--muted,#a2a2ac);opacity:0;transform:translateX(-4px);pointer-events:none;
  transition:opacity var(--duration-fast,140ms) var(--easing-standard,ease),
             transform var(--duration-fast,140ms) var(--easing-standard,ease)}
.vm-hotspot:hover .vm-tip,.vm-hotspot:focus-visible .vm-tip,.vm-hotspot.is-active .vm-tip{
  opacity:1;transform:translateX(0);color:#fff}
@keyframes vm-pulse{0%{transform:scale(.85);opacity:.9}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
/* The sweep and the bus flow only run while the diagram is on screen; the
   IntersectionObserver in wireVehicleMap adds .vm-live. Off-screen they cost no frames. */
.vm-scan{animation:vm-sweep 7s var(--easing-standard,ease-in-out) infinite;mix-blend-mode:screen;
  animation-play-state:paused}
.vm-stage.vm-live .vm-scan,.vm-stage.vm-live .vm-bus{animation-play-state:running}
@keyframes vm-sweep{0%{opacity:0;transform:translateX(0)}
  8%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(216px)}}
/* Schematic bus runs. A slow dash offset reads as data moving through the network; it is
   illustrative of architecture and is never presented as live vehicle telemetry. */
.vm-bus{animation:vm-flow 3.4s linear infinite;animation-play-state:paused}
@keyframes vm-flow{to{stroke-dashoffset:-16}}
.vm-panel{display:flex;flex-direction:column;gap:14px;min-width:0}
.vm-list{display:flex;flex-wrap:wrap;gap:8px}
.vm-listitem{font:inherit;font-size:12px;padding:8px 12px;border-radius:999px;cursor:pointer;
  color:var(--muted,#a2a2ac);background:rgba(255,255,255,.03);
  border:1px solid var(--line,rgba(255,255,255,.12));
  transition:color var(--duration-fast,140ms) var(--easing-standard,ease),
             border-color var(--duration-fast,140ms) var(--easing-standard,ease),
             background-color var(--duration-fast,140ms) var(--easing-standard,ease)}
.vm-listitem:hover{color:#fff;border-color:rgba(224,27,36,.45)}
.vm-listitem.is-active{color:#fff;background:rgba(224,27,36,.16);border-color:var(--brand,#e01b24)}
.vm-listitem:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vm-detail{padding:18px;border-radius:16px;min-width:0;
  border:1px solid var(--line,rgba(255,255,255,.1));background:rgba(255,255,255,.02)}
.vm-detail[hidden]{display:none}
.vm-detail h3{margin:6px 0 8px;font-size:clamp(17px,2vw,21px);letter-spacing:-.02em}
.vm-detail p{margin:0 0 14px;color:var(--muted,#a2a2ac);font-size:13px;line-height:1.55}
@media(max-width:900px){
  /* Stage stacks above the controls; the list becomes the primary way to choose a system. */
  .vm-layout{grid-template-columns:1fr}
  .vm-tip{display:none}
  .vm-dot{width:18px;height:18px}
  .vm-hotspot{padding:6px}
}
@media(max-width:520px){
  /* Small screens get the lighter experience: the list only. The diagram is decorative
     there and its hotspots are below a comfortable touch target, so it is removed
     rather than shipped as a frustrating control surface. */
  .vm-stage{display:none}
}
@media (prefers-reduced-motion: reduce){
  .vm-stage{transform:none !important;transition:none !important}
  .vm-scan{animation:none !important;opacity:.25;transform:translateX(88px)}
  .vm-bus{animation:none !important}
  .vm-dot::after{animation:none !important}
  .vm-dot,.vm-tip{transition:none !important}
  .vm-hotspot:hover .vm-dot,.vm-hotspot:focus-visible .vm-dot{transform:none !important}
  .vm-tip{opacity:1;transform:none !important}
}

/* --- Persistent in-page motion switch -------------------------------------------------
   Mirrors the prefers-reduced-motion block, but driven by an explicit visitor choice that
   is remembered. `prefers-reduced-motion` is an OS setting many people never find, and it
   cannot express a situational need. Content is never hidden here — only movement. */
html.fm-motion-off *,html.fm-motion-off *::before,html.fm-motion-off *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important}
html.fm-motion-off .reveal{opacity:1 !important;transform:none !important}
html.fm-motion-off .btn:hover,html.fm-motion-off .card:hover,html.fm-motion-off .soc:hover,
html.fm-motion-off .location-map:hover,html.fm-motion-off .service-card:hover,
html.fm-motion-off .cmd-tile:hover,html.fm-motion-off .scope-stat:hover,
html.fm-motion-off .audience-card:hover,html.fm-motion-off .facet-chip:hover{transform:none !important}
html.fm-motion-off .hero h1,html.fm-motion-off .hero .lead,html.fm-motion-off .hero-actions,
html.fm-motion-off .hero-contact{opacity:1 !important;transform:none !important;animation:none !important}
html.fm-motion-off .skeleton::after{animation:none !important;opacity:.06}
html.fm-motion-off .vm-scan{animation:none !important;opacity:.25;transform:translateX(88px)}
html.fm-motion-off .vm-bus,html.fm-motion-off .vm-dot::after{animation:none !important}
html.fm-motion-off .vm-stage{transform:none !important;transition:none !important}
html.fm-motion-off .vm-hotspot:hover .vm-dot,
html.fm-motion-off .vm-hotspot:focus-visible .vm-dot{transform:none !important}

.motion-toggle{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:11px;
  padding:5px 11px;border-radius:999px;cursor:pointer;color:var(--muted,#a2a2ac);
  background:rgba(255,255,255,.03);border:1px solid var(--line,rgba(255,255,255,.12));
  transition:color var(--duration-fast,140ms) var(--easing-standard,ease),
             border-color var(--duration-fast,140ms) var(--easing-standard,ease)}
.motion-toggle:hover{color:#fff;border-color:rgba(224,27,36,.45)}
.motion-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.motion-toggle b{color:#fff;font-weight:600}
.motion-dot{width:7px;height:7px;border-radius:50%;background:var(--brand,#e01b24);flex:none}
.motion-toggle[aria-pressed="true"] .motion-dot{background:#5a5a66}

/* --- Mobile hero ordering ---------------------------------------------------------
   Measured at 390px: the capability paragraph pushed the primary CTA below the fold in
   every language. Reordering with flex `order` puts the buttons directly after the lead
   and demotes the capability list beneath them. The DOM order is unchanged, so reading
   order for assistive tech still follows the source and no test depends on markup moving. */
@media(max-width:650px){
  .hero-copy{display:flex;flex-direction:column}
  .hero-copy .eyebrow{order:1}
  .hero-copy h1{order:2}
  .hero-copy .lead{order:3}
  .hero-copy .hero-actions{order:4;margin-bottom:14px}
  /* Address and phone sit directly under the CTAs on mobile: the owner's complaint was that
     the workshop location was hard to find, and this is the first screen a phone shows. */
  .hero-copy .hero-3d-link{order:5}
  .hero-copy .hero-contact{order:6}
  .hero-copy p:not(.lead){order:7}
  .hero-copy .proofs{order:8}
  .hero h1{font-size:40px;line-height:1}
  .hero .lead{font-size:16px;margin-bottom:14px}
}

/* --- Top strip on narrow screens ---------------------------------------------------
   Measured at 390px: the ES/PT slogan wraps to two lines inside a fixed 32px bar, so the
   social icons overlapped it and one was clipped by the header edge. The bar now sizes to
   its content and wraps as a row. Nothing is hidden — the slogan, social links, city and
   phone all remain reachable, which is what the owner asked for. */
@media(max-width:760px){
  .topline{height:auto;min-height:32px;padding:5px 0}
  .topline .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
  .topline .live{flex:1 1 100%;min-width:0}
  .topline .live b{white-space:normal;line-height:1.25}
  .topline-right{flex:1 1 100%;justify-content:flex-start;gap:10px;flex-wrap:wrap}
  .topline-social{gap:8px}
  .topline-tel{margin-left:auto;white-space:nowrap}
}

/* --- Mobile navigation completeness -------------------------------------------------
   Measured (PHASE 29, persona D): a technician on a 390px screen had NO reachable account
   control. Account and booking now move into the drawer at its 1040px breakpoint, so the
   compact header never duplicates them and desktop keeps its original controls. */
.nav-account-mobile,.nav-book-mobile{display:none}
@media(max-width:1040px){
  .nav.mobile-open .nav-account-mobile,.nav.mobile-open .nav-book-mobile{
    display:inline-flex;width:100%;justify-content:flex-start;margin-top:6px}
}

/* --- Skip to content ----------------------------------------------------------------
   Measured (PHASE 1/21): every route required a keyboard user to tab through the entire
   top strip and navigation before reaching the page body. Visually hidden until focused. */
.skip-link{position:absolute;left:10px;top:-60px;z-index:200;padding:10px 16px;border-radius:0 0 12px 12px;
  background:var(--brand,#e01b24);color:#fff;font-size:13px;font-weight:700;text-decoration:none;
  transition:top var(--duration-fast,140ms) var(--easing-standard,ease)}
.skip-link:focus{top:0;outline:2px solid #fff;outline-offset:2px}
#mainContent:focus{outline:none}

/* --- Tap targets in dense link strips ------------------------------------------------
   Measured: the top strip (city, phone, social) and the footer navigation rendered as
   standalone controls under 24px tall, below the WCAG 2.2 Target Size (Minimum) floor.
   Padding raises the hit area without changing the visual density of the text. */
.topline a,.topline-place,.topline-tel{display:inline-flex;align-items:center;min-height:24px;padding:2px 2px}
.topline-social .soc{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
.footer nav a{display:inline-flex;align-items:center;min-height:24px;padding:3px 0}
.footer .social-links a{display:inline-flex;align-items:center;min-height:24px;padding:3px 0}
.footer-contact a{display:inline-flex;align-items:center;min-height:24px}
.service-back{display:inline-flex;align-items:center;min-height:24px}

/* Screen-reader-only. Used to name a content region without altering the visual design —
   e.g. the listing section on interior pages, which previously jumped h1 -> h3. */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Tap targets: measured shortfalls ------------------------------------------------
   Measured at 1366px and 390px against the WCAG 2.2 Target Size (Minimum) 24px floor:
   vehicle-map hotspots were 22px tall, the hero address line 15px, footer nav links
   marginal, and the software filter checkbox 13px. Hit area is raised without changing
   the visual weight of the text. */
.vm-hotspot{min-height:24px}
.hero-contact-line a,.hero-contact-line span{display:inline-flex;align-items:center;min-height:24px}
.footer nav a{padding:5px 5px;margin:0 -5px}  /* width, not height, was the shortfall:
  the shortest label ("Inicio") measured 23.8px wide at 9px type. Horizontal padding
  clears the 24px floor; the negative margin keeps the visual spacing unchanged. */
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;accent-color:var(--brand,#e01b24)}

/* Location block: the address and phone links rendered 16px tall (display:block, no
   padding), below the 24px target floor. These are primary conversion controls on Home. */
.loc-line a{display:inline-flex;align-items:center;min-height:24px}

/* --- 320px header fit ----------------------------------------------------------------
   Measured at 320px: brand 202px + Menu 64px + language select 61px exceeded the viewport,
   so the language switcher was pushed off the right edge. It was invisible in testing only
   because html/body set overflow-x:hidden, which CLIPS the control instead of revealing the
   problem — the switcher was genuinely unreachable on a 320px phone. */
@media(max-width:400px){
  .brand small{display:none}
  .brand strong{font-size:12px;letter-spacing:.01em}
  .brand-logo{width:32px;height:32px}
  .brand{gap:8px}
  .wrap.nav{gap:6px}
  .nav .actions{gap:5px;min-width:0}
  .actions .lang{font-size:12px;padding:0 2px;min-width:46px}
  .hamb{padding:0 8px}
}
/* Form controls must never force their container wider than the viewport. A label in the
   software submission grid measured 347px inside a 298px wrap at 320px. */
.grid,.grid>*{min-width:0}
label{max-width:100%}
input,select,textarea{max-width:100%;min-width:0}

/* The BIN Analyzer file pickers overflowed their grid column: a native file input reports a
   wide intrinsic size, and the dashed box carried 18px padding on top of it. */
.filebox{min-width:0;max-width:100%;overflow-wrap:anywhere}
.filebox input[type="file"]{max-width:100%;width:100%;min-width:0;box-sizing:border-box}

/* `.input{min-width:240px}` forced two fields plus gaps past the wrap at 768px. The intent
   (a comfortable minimum) is preserved, but it can never exceed the column it sits in. */
.input{min-width:min(240px,100%);max-width:100%;box-sizing:border-box}

/* --- v5.2.3: memberships are real, expandable access explanations ------------------ */
.membership-current{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:18px;
  padding:22px;border:1px solid rgba(224,27,36,.34);border-radius:20px;
  background:radial-gradient(70% 150% at 100% 0,rgba(224,27,36,.14),transparent 62%),linear-gradient(145deg,#1b1718,#111113)}
.membership-current h2{margin:7px 0 5px;font-size:clamp(24px,3vw,36px)}
.membership-current p{margin:0;color:var(--muted);line-height:1.55}
.membership-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.membership-card{border:1px solid var(--line2);border-radius:20px;background:linear-gradient(155deg,#1b191d,#111114);overflow:hidden}
.membership-card[open]{border-color:rgba(224,27,36,.45);box-shadow:0 22px 58px rgba(0,0,0,.34)}
.membership-card summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:164px;padding:22px;
  cursor:pointer;list-style:none}.membership-card summary::-webkit-details-marker{display:none}
.membership-card summary:focus-visible{outline:2px solid #ff767c;outline-offset:-4px;border-radius:16px}
.membership-card summary>span:first-child{display:grid;gap:8px}.membership-card summary strong{font-size:clamp(20px,2.4vw,29px);letter-spacing:-.025em}
.membership-card summary small{max-width:560px;color:var(--muted);font-size:12px;line-height:1.55}
.membership-open{display:inline-flex;align-items:center;white-space:nowrap;color:#ff8d92;font-size:10px;font-weight:900}
.membership-open::after{content:'+';display:grid;place-items:center;width:26px;height:26px;margin-left:9px;border:1px solid rgba(224,27,36,.42);border-radius:50%;font-size:16px}
.membership-card[open] .membership-open::after{content:'−'}
.membership-body{padding:0 22px 22px;border-top:1px solid var(--line)}
.membership-body h3{margin:20px 0 8px;font-size:14px}.membership-body ul{display:grid;gap:8px;margin:0;padding-left:20px;color:#ddd6da;font-size:12px;line-height:1.5}
.membership-audience{color:#fff}.membership-plan-status{display:grid;gap:5px;margin-top:18px;padding:13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025)}
.membership-plan-status span{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.membership-plan-status b{font-size:12px}
.membership-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.membership-honesty{margin-top:15px}
.textarea-label{display:grid;gap:7px;margin-top:12px;color:#e8ded7;font-size:11px}.textarea-label .textarea{width:100%;margin:0}
.integration-status{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:11px 12px;border:1px solid rgba(242,193,78,.28);border-radius:12px;background:rgba(85,61,17,.14);color:#d8cba8;font-size:10.5px;line-height:1.5}
.integration-status .status-dot{width:8px;height:8px;margin-top:4px;flex:none;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(242,193,78,.08)}
@media(max-width:760px){.membership-grid{grid-template-columns:1fr}.membership-current{align-items:flex-start;flex-direction:column}.membership-card summary{min-height:0}.membership-open{white-space:normal}}

/* --- Managed software catalog and Admin product editor -----------------------------
   Product access is decided by the API. Cards expose server state without pretending a
   disabled checkout, expired license or pending approval is an active download. */
.software-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.software-product-card{min-width:0;overflow:hidden;border:1px solid var(--line2);border-radius:20px;background:linear-gradient(155deg,#1c1918,#111113);box-shadow:0 16px 36px rgba(0,0,0,.26)}
.software-product-media{height:190px;background:#0d0c0c;border-bottom:1px solid var(--line)}
.software-product-media img{display:block;width:100%;height:100%;object-fit:cover}
.software-product-body{display:flex;flex-direction:column;min-height:330px;padding:19px}
.software-product-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.software-product-head .code{color:var(--teal);font-size:9px;letter-spacing:.12em;font-weight:1000}
.software-product-card h3{margin:14px 0 8px;font-size:22px}.software-product-card p{margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.55}
.software-product-card .actionrow{margin-top:auto;padding-top:17px}.software-product-card .btn[disabled]{cursor:not-allowed;opacity:.52;box-shadow:none}
.software-distributor{display:grid;gap:5px;margin-top:14px;padding:12px;border:1px solid rgba(242,193,78,.24);border-radius:12px;background:rgba(74,54,18,.12)}
.software-distributor b{font-size:11px}.software-distributor span,.software-action-reason{color:var(--muted);font-size:10px;line-height:1.5}
.software-integrity{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;overflow-wrap:anywhere}.software-integrity summary{cursor:pointer;font-size:10px;font-weight:900}.software-integrity code,.software-integrity small{display:block;margin-top:7px;font-size:9px;color:var(--muted)}
.membership-variants{display:grid;gap:6px;margin-top:14px;padding:12px;border-left:2px solid var(--brand);background:rgba(224,27,36,.055)}.membership-variants span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.membership-variants b{font-size:11px}
.membership-actions .btn[disabled]{cursor:not-allowed;opacity:.52;box-shadow:none}

.admin-software-manager>p{max-width:980px}.admin-software-editor{display:grid;gap:14px;margin-top:16px}
.admin-software-editor fieldset{min-width:0;margin:0;padding:16px;border:1px solid var(--line2);border-radius:16px;background:rgba(255,255,255,.018)}
.admin-software-editor legend{padding:0 8px;color:#fff;font-size:12px;font-weight:1000;letter-spacing:.04em}
.admin-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.admin-form-grid>label,.admin-localized-copy>label{display:grid;align-content:start;gap:6px;min-width:0;color:#d7cdc7;font-size:10px;font-weight:800}
.admin-form-grid .consent-row{display:flex;align-items:center;align-self:end;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
.admin-localized-copy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:11px}.admin-localized-copy .textarea,.admin-form-grid .textarea{width:100%;min-height:108px}
.admin-software-editor input[type="file"]{width:100%;min-height:42px;padding:7px;border:1px solid var(--line);border-radius:11px;background:#201b18;color:#fff;font-size:10px}
@media(max-width:1040px){.software-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-form-grid,.admin-localized-copy{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.software-product-grid,.admin-form-grid,.admin-localized-copy{grid-template-columns:minmax(0,1fr)}.software-product-media{height:210px}.software-product-body{min-height:0}.admin-software-editor fieldset{padding:13px}.admin-software-editor .toolbar,.membership-actions{align-items:stretch;flex-direction:column}.admin-software-editor .btn,.membership-actions .btn{width:100%}}

/* --- v5.2.4: routed immersive depth --------------------------------------------------
   Every page participates in one bounded scene. Nothing is made larger: depth comes from
   perspective, light, shadow and a few pixels of opposing parallax. Forms stay level. */
#app{position:relative;z-index:1;isolation:isolate}
body::before,body::after{content:"";position:fixed;left:0;top:0;z-index:3;pointer-events:none;border-radius:50%;will-change:transform;mix-blend-mode:screen}
body::before{width:560px;height:560px;background:radial-gradient(circle,rgba(224,27,36,.16),rgba(224,27,36,.055) 34%,transparent 70%);opacity:.58;transform:translate3d(var(--depth-light-x,calc(78vw - 280px)),var(--depth-light-y,calc(12vh - 280px)),0)}
body::after{width:460px;height:460px;background:radial-gradient(circle,rgba(35,213,196,.105),rgba(35,213,196,.035) 36%,transparent 70%);opacity:.42;transform:translate3d(var(--depth-light2-x,calc(18vw - 230px)),var(--depth-light2-y,calc(72vh - 230px)),0)}
main{perspective:1600px;perspective-origin:50% 22vh}
.subhero,.catalog-hero,.service-detail-hero{box-shadow:inset 0 1px 0 rgba(255,255,255,.035),inset 0 -28px 56px rgba(0,0,0,.22),0 18px 42px rgba(0,0,0,.18)}
.depth-scene{transform:none;transform-style:preserve-3d;transform-origin:50% 38%;transition:transform 180ms var(--easing-standard,ease);backface-visibility:hidden}
.depth-capable .depth-scene{transform:perspective(1500px) translate3d(var(--depth-scene-x,0),var(--depth-scene-y,0),0) rotateX(var(--depth-scene-rx,0deg)) rotateY(var(--depth-scene-ry,0deg));will-change:transform}
.depth-capable .subhero .depth-scene>h1,.depth-capable .subhero .depth-scene>.eyebrow{transform:translate3d(var(--depth-scene-x,0),var(--depth-scene-y,0),0);transition:transform 180ms var(--easing-standard,ease)}
.depth-surface{--depth-rx:0deg;--depth-ry:0deg;--depth-tx:0px;--depth-ty:0px;--depth-content-x:0px;--depth-content-y:0px;--depth-local-x:50%;--depth-local-y:50%;position:relative;
  transform:none;transform-style:preserve-3d;
  transition:transform 150ms var(--easing-standard,ease),border-color 180ms ease,box-shadow 180ms ease;
  will-change:auto;backface-visibility:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.5)}
.depth-surface:not(.audience-card)::before,.depth-surface.audience-card::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(360px circle at var(--depth-local-x) var(--depth-local-y),rgba(255,255,255,.13),transparent 61%),linear-gradient(145deg,rgba(255,255,255,.035),transparent 38%,rgba(224,27,36,.035));
  opacity:.46;transition:opacity 180ms ease}
/* Idle cards answer the page scene; hovered leaf cards receive a stronger local angle. */
.depth-capable .depth-surface.depth-ready[data-depth-mode="tilt"]{transform:perspective(1120px) translate3d(var(--depth-ambient-x,0),var(--depth-ambient-y,0),0) rotateX(var(--depth-ambient-rx,0deg)) rotateY(var(--depth-ambient-ry,0deg))}
.depth-capable .depth-surface.depth-ready[data-depth-mode="tilt"]:is(:hover,:focus-visible){
  transform:perspective(1050px) translate3d(var(--depth-tx),var(--depth-ty),0) rotateX(var(--depth-rx)) rotateY(var(--depth-ry));
  will-change:transform;border-color:rgba(255,145,77,.48);
  box-shadow:0 30px 64px rgba(0,0,0,.46),0 10px 22px rgba(224,27,36,.10),inset 0 1px 0 rgba(255,255,255,.095),inset 0 -1px 0 rgba(0,0,0,.62)}
.depth-capable .depth-surface.depth-ready[data-depth-mode="glow"]:is(:hover,:focus-within){border-color:rgba(255,145,77,.42);box-shadow:0 25px 56px rgba(0,0,0,.4),0 0 0 1px rgba(35,213,196,.08),inset 0 1px 0 rgba(255,255,255,.085)}
.depth-surface:not(.audience-card):is(:hover,:focus-within)::before,.depth-surface.audience-card:is(:hover,:focus-within)::after{opacity:.9}
.depth-surface>*{transform-style:preserve-3d}
.depth-surface>:is(.code,.section-kicker,.chip,h2,h3,strong,.go,.actionrow,.service-card-body){transition:transform 150ms var(--easing-standard,ease)}
.depth-capable .depth-surface[data-depth-mode="tilt"]:is(:hover,:focus-visible)>:is(.code,.section-kicker,.chip,h2,h3,strong,.go,.actionrow,.service-card-body){transform:translate3d(var(--depth-content-x),var(--depth-content-y),0)}
.depth-capable .depth-surface.depth-pressed[data-depth-mode="tilt"]{transform:perspective(1050px) translate3d(var(--depth-tx),-1px,0) rotateX(var(--depth-rx)) rotateY(var(--depth-ry));box-shadow:0 10px 24px rgba(0,0,0,.34),inset 0 2px 7px rgba(0,0,0,.38)}
html.fm-motion-off body::before,html.fm-motion-off body::after{opacity:0!important;transition:none!important}
html.fm-motion-off{scroll-behavior:auto}
html.fm-motion-off .depth-scene,html.fm-motion-off .depth-surface{transform:none!important;transition:none!important;will-change:auto}
html.fm-motion-off .depth-surface:not(.audience-card)::before,html.fm-motion-off .depth-surface.audience-card::after{opacity:.42!important;transition:none!important}
@media (hover:none),(pointer:coarse){
  body::before,body::after{display:none}
  .depth-scene,.depth-surface{transform:none!important;will-change:auto}
  .depth-surface:not(.audience-card)::before,.depth-surface.audience-card::after{opacity:.42}
  .depth-surface.depth-pressed{transform:translateY(2px)!important;box-shadow:0 6px 16px rgba(0,0,0,.28),inset 0 2px 7px rgba(0,0,0,.42)}
}
@media (prefers-reduced-motion: reduce){
  body::before,body::after{display:none!important}
  .depth-scene,.depth-surface{transform:none!important;transition:none!important;will-change:auto}
  .depth-surface:not(.audience-card)::before,.depth-surface.audience-card::after{opacity:.42!important;transition:none!important}
}