/* FN2 Hub · estilos. Mundo: Civic Type R FN2. Rojo Milano + negro, insignia roja con esquina cortada, tipografía condensada de salpicadero. */
:root{
  --bg:#060606;--s1:#0e0e10;--s2:#151517;--s3:#1d1d20;
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --ink:#f4f2ee;--ink2:#cfccc6;--mut:#9b978f;
  --red:#d6001c;--red2:#ff2d2d;--redd:#5c0710;--amber:#ffb21a;--ok:#4fd18b;--warn:#ffb21a;--bad:#ff4b4b;
  --gx:clamp(16px,2.6vw,48px);--top:64px;--sub:52px;--tab:0px;
  --cut:14px;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;--body:"Barlow","Segoe UI",system-ui,sans-serif;--mono:"Michroma","Barlow Condensed",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.7,0,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scrollbar-width:none;-webkit-text-size-adjust:100%}
html::-webkit-scrollbar,*::-webkit-scrollbar{display:none;width:0;height:0}
*{scrollbar-width:none}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--body);min-height:100vh;min-height:100dvh;overflow-x:hidden;font-variant-numeric:tabular-nums}
::selection{background:var(--red);color:#fff}
img{display:block;max-width:100%}
a{color:var(--red2);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#fff}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--red2);outline-offset:2px}
input,select,textarea{font:500 16px var(--body);color:var(--ink);caret-color:var(--red2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Fondo fijo con fotos reales (versión pequeña y desenfocada: ligera en móvil) */
#bg{position:fixed;inset:0;z-index:-2;background:#050505;overflow:hidden}
#bg i{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease;filter:brightness(.42) saturate(1.2);transform:scale(1.04)}
#bg i.on{opacity:1;animation:drift 46s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translate3d(-1.2%,0,0)}to{transform:scale(1.1) translate3d(1.2%,-1%,0)}}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(1100px 600px at 88% -10%,rgba(214,0,28,.28),transparent 65%),
  linear-gradient(180deg,rgba(6,6,6,.35),rgba(6,6,6,.86) 60%,rgba(6,6,6,.94))}

/* ---------- Barra superior + navegación principal */
#top{position:fixed;top:0;left:0;right:0;z-index:60;height:calc(var(--top) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gx) 0;display:flex;align-items:center;gap:24px;
  background:linear-gradient(180deg,rgba(6,6,6,.92),rgba(6,6,6,.78));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none}
.badge{width:38px;height:38px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 66%,66% 100%,0 100%);display:grid;place-items:center;font:800 22px/1 var(--cond);color:#fff;position:relative;overflow:hidden}
.badge::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:shine 5s 1.2s ease-in-out infinite}
@keyframes shine{0%,70%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.logo b{font:800 19px/1 var(--cond);letter-spacing:.2em;display:block}
.logo small{font:600 10px/1.2 var(--cond);letter-spacing:.32em;color:var(--mut);display:block;margin-top:3px}
#mainnav{position:fixed;z-index:61;top:env(safe-area-inset-top);right:var(--gx);height:var(--top);display:flex;align-items:center;gap:4px}
#mainnav button{display:flex;align-items:center;gap:9px;background:none;border:0;color:var(--mut);padding:10px 16px;font:700 15px var(--cond);letter-spacing:.16em;text-transform:uppercase;position:relative;transition:color .25s}
#mainnav svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#mainnav button::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
#mainnav button:hover{color:var(--ink)}
#mainnav button.on{color:#fff}#mainnav button.on::after{transform:scaleX(1)}
#mainnav button.on svg{stroke:var(--red2)}
.topkm{flex:none;margin-left:6px;font:700 14px var(--cond);letter-spacing:.12em;color:var(--ink2);border:1px solid var(--line2);padding:6px 12px;background:rgba(255,255,255,.03);text-decoration:none;white-space:nowrap}
.topkm em{font-style:normal;color:var(--mut);font-weight:600;margin-left:4px}
.topkm:empty{display:none}

/* ---------- Estructura */
main{padding-top:calc(var(--top) + env(safe-area-inset-top))}
.sec{display:none;min-height:calc(100vh - var(--top))}
.sec.on{display:block}
.wrap{padding:0 var(--gx)}
.banner{position:relative;height:clamp(200px,24vw,340px);overflow:hidden;display:flex;align-items:flex-end;padding:0 var(--gx) 26px}
.banner img{position:absolute;inset:0;width:100%;height:118%;object-fit:cover;will-change:transform}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,rgba(6,6,6,.55) 45%,rgba(6,6,6,.15)),linear-gradient(90deg,rgba(6,6,6,.85),transparent 70%)}
.banner>div{position:relative;z-index:1;max-width:1100px}
.banner h1{font:800 clamp(44px,6.4vw,104px)/.88 var(--cond);text-transform:uppercase;letter-spacing:-.01em}
.banner h1 span{color:var(--red2)}
.banner p{color:var(--ink2);margin-top:10px;max-width:62ch;font-size:clamp(15px,1.15vw,18px)}
.sec.on .banner img{animation:kb 1.6s var(--ease) both}
@keyframes kb{from{transform:scale(1.12);filter:brightness(.4)}to{transform:scale(1);filter:none}}
.sec.on .banner h1{animation:rise .9s .08s var(--ease) both}
.sec.on .banner p{animation:rise .9s .18s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(28px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

/* sub-navegación (pestañas dentro de la sección) */
.subnav{position:sticky;top:calc(var(--top) + env(safe-area-inset-top));z-index:40;display:flex;gap:2px;padding:0 var(--gx);overflow-x:auto;background:rgba(6,6,6,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);scroll-behavior:smooth}
.subnav button{flex:none;background:none;border:0;color:var(--mut);height:var(--sub);padding:0 18px;font:700 15px var(--cond);letter-spacing:.14em;text-transform:uppercase;position:relative;transition:color .2s}
.subnav button::before{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;background:var(--red);clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%);transform:scaleX(0);transition:transform .4s var(--ease)}
.subnav button:hover{color:var(--ink)}
.subnav button.on{color:#fff}.subnav button.on::before{transform:scaleX(1)}
.sub{display:none;padding:28px var(--gx) 64px}
.sub.on{display:block}
.sub.on>*{animation:enter .7s var(--ease) both}
.sub.on>*:nth-child(2){animation-delay:.06s}.sub.on>*:nth-child(3){animation-delay:.12s}.sub.on>*:nth-child(4){animation-delay:.18s}.sub.on>*:nth-child(n+5){animation-delay:.22s}
@keyframes enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
h2.h{font:800 clamp(30px,3.2vw,50px)/.95 var(--cond);text-transform:uppercase;letter-spacing:.01em;margin-bottom:8px}
h2.h span{color:var(--red2)}
.lead{color:var(--ink2);max-width:72ch;margin-bottom:24px}
h3{font:700 21px/1.15 var(--cond);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
h4{font:700 14px var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--red2);margin:18px 0 8px}

/* rejillas: columnas que se igualan en altura */
.grid{display:grid;gap:18px;align-items:stretch}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.g12{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}.g321{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:18px}.stack>.grow{flex:1}
@media(max-width:1180px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g321{grid-template-columns:repeat(2,minmax(0,1fr))}.g321>:first-child{grid-column:1/-1}}
@media(max-width:820px){.g2,.g3,.g4,.g21,.g12,.g321{grid-template-columns:minmax(0,1fr)}.g321>:first-child{grid-column:auto}}

/* paneles: superficie sólida con esquina cortada (la forma de la insignia Type R) */
.pn{background:linear-gradient(180deg,rgba(24,24,27,.92),rgba(12,12,14,.94));border:1px solid var(--line);padding:22px;position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);transition:border-color .3s,transform .5s var(--ease)}
.pn::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--red),transparent);transform:scaleX(.18);transform-origin:left;transition:transform .7s var(--ease)}
.pn:hover::before{transform:scaleX(1)}
.pn p,.pn li{color:var(--ink2)}.pn ul{padding-left:18px}.pn li{margin:5px 0}.pn li::marker{color:var(--red)}
.pn.photo{padding:0;overflow:hidden;min-height:240px;background:#000}
.pn.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pn.photo:hover img{transform:scale(1.05)}
.tag{display:inline-block;font:700 11px/1.5 var(--cond);letter-spacing:.14em;text-transform:uppercase;padding:1px 7px;border:1px solid var(--line2);color:var(--mut);margin-left:6px;vertical-align:middle;white-space:nowrap}
.tag.ok{color:var(--ok);border-color:rgba(79,209,139,.35)}.tag.q{color:var(--amber);border-color:rgba(255,178,26,.4)}.tag.r{color:var(--red2);border-color:rgba(255,45,45,.4)}
sup a{text-decoration:none;font:700 11px var(--cond);margin-left:1px}
.note{color:var(--mut);font-size:13.5px;margin-top:12px;max-width:80ch}
.quote{border-left:2px solid var(--red);padding:2px 0 2px 16px;font:600 24px/1.25 var(--cond);color:#fff}
.quote small{display:block;font:400 13px var(--body);color:var(--mut);margin-top:6px}

/* tablas */
table.spec{width:100%;border-collapse:collapse}
.spec td,.spec th{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.spec td:first-child{color:var(--mut);font:600 13px/1.4 var(--cond);letter-spacing:.12em;text-transform:uppercase;width:42%}
.spec th{font:700 12px var(--cond);letter-spacing:.2em;color:var(--mut);text-transform:uppercase}
.spec tr{transition:background .2s}.spec tbody tr:hover{background:rgba(214,0,28,.08)}
.spec td b{font-weight:600;color:#fff}

/* botones y campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;border:0;padding:14px 24px;font:700 16px var(--cond);letter-spacing:.16em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% 68%,calc(100% - 12px) 100%,0 100%);transition:background .2s,transform .15s;user-select:none;position:relative;overflow:hidden;text-decoration:none}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover{background:#a80017;color:#fff}.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line2);clip-path:none}
.btn.ghost:hover{background:rgba(214,0,28,.25);border-color:var(--red)}
.btn.sm{padding:9px 14px;font-size:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.mini{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--ink);padding:8px 13px;font:700 13px var(--cond);letter-spacing:.12em;text-transform:uppercase;transition:background .2s,border-color .2s;white-space:nowrap}
.mini:hover,.mini.on{background:rgba(214,0,28,.28);border-color:var(--red)}
.mini.x{color:var(--mut);border-color:transparent;background:none;padding:6px 8px}.mini.x:hover{color:var(--red2);background:none}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fld{display:block;min-width:0}
.fld>span{display:block;font:700 12px var(--cond);letter-spacing:.18em;color:var(--mut);text-transform:uppercase;margin-bottom:5px}
.fld input,.fld select,.fld textarea,.inp{width:100%;background:rgba(0,0,0,.5);border:1px solid var(--line2);color:var(--ink);padding:11px 12px;border-radius:0;transition:border-color .2s,background .2s;min-width:0}
.fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus{outline:none;border-color:var(--red);background:rgba(0,0,0,.7)}
.fld input::placeholder,.fld textarea::placeholder{color:#77736c}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%)!important;background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%!important;background-size:5px 5px!important;background-repeat:no-repeat!important;padding-right:34px!important}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ck{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s;color:var(--ink2)}
.ck:hover{border-color:var(--line2)}
.ck input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;border:1.5px solid var(--line2);margin-top:1px;display:grid;place-items:center;transition:background .2s,border-color .2s}
.ck input::after{content:"";width:10px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-3px;transition:transform .25s var(--ease)}
.ck input:checked{background:var(--red);border-color:var(--red)}.ck input:checked::after{transform:rotate(-45deg) scale(1)}
.ck:has(input:checked){border-color:rgba(214,0,28,.45);background:rgba(214,0,28,.07)}
.ck:has(input:checked) .t{color:var(--mut);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.ck .t{flex:1;min-width:0}
input[type=range]{width:100%;accent-color:var(--red);height:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 12px;border:1px solid var(--line2);font:700 13px var(--cond);letter-spacing:.08em;color:var(--mut);background:none;transition:all .2s}
.chip.on,.chip:hover{color:#fff;border-color:var(--red);background:rgba(214,0,28,.18)}

/* números grandes tipo salpicadero */
.big{display:flex;gap:28px;flex-wrap:wrap}
.big>div{min-width:0}
.big b{font:800 clamp(34px,3.4vw,58px)/1 var(--cond);display:block;color:#fff}
.big b i{font-style:normal;font-size:.45em;color:var(--mut);margin-left:4px;font-weight:700}
.big .r b{color:var(--red2)}
.big span{font:700 11px var(--cond);letter-spacing:.24em;color:var(--mut);text-transform:uppercase}
.empty{border:1px dashed var(--line2);padding:20px;color:var(--mut);text-align:center}

/* =============== INICIO =============== */
.hero{position:relative;min-height:calc(100vh - var(--top));min-height:calc(100svh - var(--top) - env(safe-area-inset-top));display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:20px;padding:0 var(--gx) 40px;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;object-position:50% 62%;z-index:-1;will-change:transform}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg) 2%,rgba(6,6,6,.45) 38%,rgba(6,6,6,.08) 70%),linear-gradient(90deg,rgba(6,6,6,.9),rgba(6,6,6,.55) 32%,rgba(6,6,6,.05) 62%,rgba(6,6,6,.45))}
.hero h1{font:800 clamp(60px,10vw,172px)/.82 var(--cond);text-transform:uppercase;letter-spacing:-.02em;text-shadow:0 10px 50px rgba(0,0,0,.6)}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .l span{display:block;animation:up 1.1s var(--ease) both}
.hero h1 .l:nth-child(2) span{animation-delay:.12s;color:var(--red2)}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
.hero .sl{font:700 clamp(14px,1.3vw,20px) var(--cond);letter-spacing:.3em;color:var(--ink2);text-transform:uppercase;margin-top:18px;animation:fade 1s .5s both}
.hero .cta{margin-top:26px;animation:fade 1s .7s both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.dash{position:relative;justify-self:end;width:min(100%,560px);animation:fade 1.2s .3s both}
.dash svg{width:100%;height:auto;display:block;overflow:visible}
.dash{width:min(100%,600px);filter:drop-shadow(0 24px 50px rgba(0,0,0,.7))}
/* cuadro del FN2 (cuadro.js) */
.cq-wrap{position:relative;margin:-4px -4px 0;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 50% 70%,#1a0306 0%,#070707 60%)}
.cuadro{display:block;width:100%;height:auto;max-height:68vh;margin:0 auto}
.cq-read{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px}
.cq-read>div>small,.cq-gear small{display:block;font:700 11px var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.cq-read b{font:800 32px/1 var(--cond);min-width:3.2ch;display:inline-block}
.cq-tag{font:800 13px var(--cond);letter-spacing:.14em;padding:5px 9px;border:1px solid var(--line2);color:var(--mut);transition:.15s}
#snd-vt.on{color:#ff2450;border-color:#ff2450;box-shadow:0 0 16px rgba(255,36,80,.45)}
#snd-cut.on{color:#fff;background:var(--red);border-color:var(--red)}
.cq-gear{margin-left:auto}
@media(max-width:600px){.cq-gear{margin-left:0;flex-basis:100%}#snd-gear button{flex:1}.cq-read b{font-size:28px}}
#snd-gear{display:flex;gap:4px}
#snd-gear button{width:34px;height:34px;border:1px solid var(--line2);background:var(--s2);font:800 16px var(--cond)}
#snd-gear button.on{background:var(--red);border-color:var(--red)}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(8,8,9,.86)}
.strip>div{padding:20px var(--gx);border-right:1px solid var(--line);min-width:0}
.strip>div:last-child{border-right:0}
.strip b{font:800 clamp(30px,3.4vw,58px)/1 var(--cond);display:block}
.strip b i{font-style:normal;font-size:.42em;color:var(--red2);margin-left:5px}
.strip span{font:700 11.5px var(--cond);letter-spacing:.22em;color:var(--mut);text-transform:uppercase}
@media(max-width:820px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.strip>div:nth-child(2){border-right:0}.strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.home{padding:32px var(--gx) 64px}
.home h2.h{margin-bottom:16px}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.stat:last-child{border-bottom:0}
.stat>span{color:var(--ink2);min-width:0}
.stat b{font:700 20px var(--cond);white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:1180px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;min-height:230px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;text-decoration:none;color:var(--ink);border:1px solid var(--line);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);background:#000}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:transform 1.2s var(--ease),opacity .4s}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(6,6,6,.95) 10%,rgba(6,6,6,.15))}
.tile>*:not(img){position:relative;z-index:2}
.tile b{font:800 26px/1 var(--cond);text-transform:uppercase;letter-spacing:.03em}
.tile span{color:var(--ink2);font-size:14px;margin-top:6px}
.tile i{position:absolute;right:18px;top:18px;width:38px;height:38px;border:1px solid var(--line2);display:grid;place-items:center;transition:background .3s,transform .5s var(--ease)}
.tile i svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.tile:hover img{transform:scale(1.07);opacity:.9}.tile:hover i{background:var(--red);transform:rotate(-45deg)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);background:rgba(10,10,12,.9)}
.facts>div{padding:24px;border-right:1px solid var(--line)}.facts>div:last-child{border-right:0}
.facts b{font:800 46px/1 var(--cond);color:var(--red2);display:block;margin-bottom:6px}
.facts p{color:var(--ink2)}
@media(max-width:820px){.facts{grid-template-columns:1fr}.facts>div{border-right:0;border-bottom:1px solid var(--line)}.facts>div:last-child{border-bottom:0}}

/* =============== GARAJE =============== */
.kmbox{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.kmbox .fld{flex:1;min-width:160px}
.kmbox input{font:800 34px/1 var(--cond)!important;letter-spacing:.04em;padding:10px 12px!important}
.task{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.task:last-child{border-bottom:0}
.task h5{font:700 18px/1.2 var(--cond);letter-spacing:.04em;text-transform:uppercase}
.task small{display:block;color:var(--mut);font-size:13px;margin-top:2px}
.task .bar{grid-column:1/-1;height:6px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.task .bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ok);transition:width 1.1s var(--ease)}
.task.warn .bar i{background:var(--warn)}.task.bad .bar i{background:var(--bad)}
.task .st{font:700 14px var(--cond);letter-spacing:.08em;text-transform:uppercase;text-align:right;white-space:nowrap}
.task.ok .st{color:var(--ok)}.task.warn .st{color:var(--warn)}.task.bad .st{color:var(--bad)}.task.none .st{color:var(--mut)}
.task .acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.task form{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;padding:12px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.task form .row{grid-column:1/-1}
.hist{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.hist>div{min-width:0}.hist b{color:#fff;font-weight:600}.hist small{display:block;color:var(--mut)}
.hist .mini.x{align-self:flex-start}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:18px}
.kpis>div{background:rgba(10,10,12,.94);padding:16px}
.kpis b{font:800 clamp(26px,2.4vw,40px)/1.05 var(--cond);display:block;color:#fff}
.kpis b i{font-style:normal;font-size:.5em;color:var(--mut);margin-left:3px}
.kpis span{font:700 11px var(--cond);letter-spacing:.2em;color:var(--mut);text-transform:uppercase}
.kpis .r b{color:var(--red2)}
.chart{width:100%;height:260px;display:block}
.catbar{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr) auto;gap:10px;align-items:center;margin:9px 0;font:600 15px var(--cond);letter-spacing:.04em}
.catbar div{height:12px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.catbar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--redd),var(--red2));transition:width 1.1s var(--ease)}
.catbar b{white-space:nowrap}

/* pasaporte */
.pcard{background:#0a0a0c;border:1px solid var(--line2);max-width:460px;margin:0 auto;overflow:hidden}
.pph{height:230px;background-size:cover;background-position:center;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.pph::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0a0a0c,transparent 70%)}.pph>*{position:relative}
.pph h3{font:800 36px/1 var(--cond);margin:0}.pbadge{font:700 12px var(--cond);letter-spacing:.3em;color:var(--red2);margin-bottom:6px}
.pbody{padding:6px 16px 18px}.pbody>small,.prow small{display:block;font:700 11px var(--cond);letter-spacing:.24em;color:var(--mut)}
.prow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}.prow.one{grid-template-columns:1fr 1fr}.prow b{font:700 20px/1.15 var(--cond);color:#fff;overflow-wrap:anywhere}
.pchips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}.pchips span{border:1px solid var(--red);padding:3px 10px;font:600 13px var(--cond);letter-spacing:.06em}
.pmt{width:100%;font-size:13px;border-collapse:collapse;margin:6px 0 12px}.pmt td{padding:5px 4px;border-bottom:1px solid var(--line)}.pnote{font-size:14px;color:var(--ink2);margin:4px 0 12px}
.pqr{text-align:center;margin-top:10px}.pqr canvas{width:190px;height:190px;image-rendering:pixelated;margin:0 auto}.pqr p{font-size:12px;color:var(--mut)}
.psticky{position:sticky;top:calc(var(--top) + var(--sub) + 18px);align-self:start}
@media(max-width:820px){.psticky{position:static}}
#pform .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fgrid3{display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1.4fr);gap:8px;margin-bottom:8px}
#hlist .hrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
#hlist .hrow button{background:none;border:0;color:var(--red2);font-size:18px;padding:4px 8px}
@media(max-width:560px){#pform .fgrid,.checks{grid-template-columns:1fr}.fgrid3{grid-template-columns:minmax(0,1fr) 90px}.fgrid3 input:last-child{grid-column:1/3}}

/* =============== GUÍA =============== */
.refs td:nth-child(2){font:600 16px var(--cond);letter-spacing:.06em;color:#fff;white-space:nowrap}
.refs .cp{margin-left:8px;padding:4px 9px;font-size:12px}
.refs td{vertical-align:middle}
.tl{position:relative;padding-left:28px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--red),rgba(214,0,28,.05))}
.tl .ev{position:relative;margin-bottom:22px}
.tl .ev::before{content:"";position:absolute;left:-28px;top:6px;width:14px;height:14px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%)}
.tl .ev b{font:800 28px/1.05 var(--cond);color:var(--red2);display:block}
.progress{height:8px;background:rgba(255,255,255,.07);position:relative;overflow:hidden;margin:10px 0 4px}
.progress i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--redd),var(--red2));transition:width .6s var(--ease)}
.buylist{display:grid;gap:6px}
.buylist .ck small{display:block;color:var(--mut);font-size:12.5px;margin-top:2px}
.ok-box{border:1px solid rgba(79,209,139,.3);background:rgba(79,209,139,.05)}

/* =============== TALLER =============== */
canvas{display:block;width:100%}
.gas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
#snd-gas{min-width:240px;padding:20px 26px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#snd-gas.on{background:#a80017;box-shadow:0 0 40px rgba(255,45,45,.45)}
.rpmrow.act{background:rgba(214,0,28,.22)}.rpmrow.act td{color:#fff}
.track{height:54px;background:#0b0b0e;border:1px solid var(--line);margin:12px 0;position:relative;overflow:hidden}
.track i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#3a0000,var(--red))}
.track.rv2 i{background:linear-gradient(90deg,#1c1c20,#6b6b78)}
.track em{position:absolute;left:14px;top:14px;font:700 15px var(--cond);letter-spacing:.14em;z-index:1;font-style:normal}
.track u{position:absolute;right:12px;top:14px;font:700 15px var(--cond);z-index:1;text-decoration:none;color:#fff}
.res{margin-top:10px;font:700 20px var(--cond);letter-spacing:.06em}
.rb{display:grid;grid-template-columns:minmax(110px,210px) minmax(0,1fr) 54px;gap:12px;align-items:center;margin:11px 0;font:600 14.5px var(--cond);letter-spacing:.04em}
.rb div{height:18px;background:#0b0b0e;border:1px solid var(--line);position:relative;overflow:hidden}
.rb i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#222,#666);transition:width 1.2s var(--ease)}
.rb.me i{background:linear-gradient(90deg,#3a0000,var(--red2))}.rb.me{color:var(--red2)}
.rb b{text-align:right}
@media(max-width:560px){.rb{grid-template-columns:96px minmax(0,1fr) 44px;font-size:13px}}
.mod{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.mod:last-child{border:0}.mod small{display:block;color:var(--mut);font-size:12.5px}
.sw{width:46px;height:26px;background:#2a2a30;position:relative;flex:none;transition:background .25s;clip-path:polygon(0 0,100% 0,100% 70%,calc(100% - 7px) 100%,0 100%)}
.sw::after{content:"";position:absolute;top:4px;left:4px;width:18px;height:18px;background:#777;transition:left .35s var(--ease),background .25s}
.mod.on .sw{background:var(--red)}.mod.on .sw::after{left:24px;background:#fff}
.crbig{text-align:center;padding:10px 0 4px}.crbig small,.crrow small{display:block;font:700 12px var(--cond);letter-spacing:.26em;color:var(--mut)}
#cr-time{font:800 clamp(60px,10vw,150px)/1 var(--cond);color:#fff;letter-spacing:.02em}
.crrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:14px 0}
.crrow.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.crrow>div{background:rgba(9,9,11,.92);padding:14px 12px;min-width:0}.crrow b{font:800 clamp(22px,2.8vw,40px)/1.1 var(--cond);color:#fff}.crrow b i{font:600 13px var(--cond);color:var(--mut);font-style:normal}
.crstat{font:700 18px var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:6px 0 14px;text-align:center}.crstat.ok{color:var(--ok)}.crstat.bad{color:var(--red2)}
.crbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.crbtns .btn{width:100%;padding:18px 10px;clip-path:none}
.crlaps td:first-child{width:36%}.crlaps tr.bestlap td{color:var(--ok)}.crlaps td:last-child{text-align:right}
@media(max-width:560px){.crrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tyre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:16px 0}
.cmp>div{background:rgba(10,10,12,.94);padding:14px}
.cmp b{font:800 30px/1.05 var(--cond);display:block}
.cmp span{font:700 11px var(--cond);letter-spacing:.2em;color:var(--mut);text-transform:uppercase}
.speedo{font:800 clamp(30px,3vw,46px)/1.1 var(--cond)}
.speedo em{font-style:normal;color:var(--red2)}

/* =============== GALERÍA =============== */
.xp{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:stretch}
@media(max-width:1100px){.xp{grid-template-columns:minmax(0,1fr)}}
.xview{position:relative;overflow:hidden;background:#000;border:1px solid var(--line);aspect-ratio:3/2;max-height:calc(100vh - var(--top) - var(--sub) - 120px);width:100%;touch-action:pan-y}
.xcam{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.1s var(--ease2);will-change:transform}
.xcam img{width:100%;height:100%;object-fit:cover}
.xcam svg.dims{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dims line,.dims path{stroke:#fff;stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
.dims .d{stroke-dasharray:1000;stroke-dashoffset:1000}
.xview.dim .dims .d{animation:draw 1.4s var(--ease) forwards}
.xview.dim .dims .d:nth-of-type(2){animation-delay:.3s}.xview.dim .dims .d:nth-of-type(3){animation-delay:.6s}
@keyframes draw{to{stroke-dashoffset:0}}
.dlab{position:absolute;transform:translate(-50%,-50%);font:800 clamp(14px,1.5vw,22px)/1 var(--cond);letter-spacing:.06em;background:rgba(6,6,6,.82);border:1px solid var(--red);padding:5px 9px;white-space:nowrap;opacity:0;transition:opacity .6s .9s}
.dlab small{display:block;font:700 10px var(--cond);letter-spacing:.2em;color:var(--mut)}
.xview.dim .dlab{opacity:1}
.hs{position:absolute;width:0;height:0;border:0;background:none;padding:0;z-index:3}
.hs i{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;background:rgba(214,0,28,.92);border:2px solid #fff;display:grid;place-items:center;font:800 14px var(--cond);color:#fff;font-style:normal;box-shadow:0 4px 14px rgba(0,0,0,.5);transition:transform .3s var(--ease),background .3s}
.hs i::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--red2);animation:ping 2.2s infinite;opacity:.8}
.hs:hover i,.hs.on i{transform:scale(1.18);background:#fff;color:var(--red)}
@keyframes ping{from{transform:scale(1);opacity:.8}to{transform:scale(2.2);opacity:0}}
@media(pointer:coarse){.hs i{left:-19px;top:-19px;width:38px;height:38px}}
.xview.zoom .hs:not(.on){opacity:0;pointer-events:none}
.hs{transition:opacity .4s}
.xinfo{display:flex;flex-direction:column}
.xinfo .body{flex:1;min-height:170px}
.xinfo .body>*{animation:enter .55s var(--ease) both}
.xlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:14px}
.xlist button{text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:9px 10px;font:700 14px var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);transition:all .2s;display:flex;gap:8px;align-items:center;min-width:0}
.xlist button i{font-style:normal;width:20px;height:20px;flex:none;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:12px}
.xlist button:hover,.xlist button.on{border-color:var(--red);color:#fff;background:rgba(214,0,28,.18)}
.xback{position:absolute;left:12px;top:12px;z-index:4;opacity:0;pointer-events:none;transition:opacity .3s}
.xview.zoom .xback{opacity:1;pointer-events:auto}
.gal{columns:4 300px;column-gap:14px}
.gal figure{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;cursor:zoom-in;background:#000;border:1px solid var(--line)}
.gal img{width:100%;transition:transform 1s var(--ease),filter .5s}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 10px;background:linear-gradient(0deg,rgba(0,0,0,.92),transparent);font-size:12.5px;color:#ddd;transform:translateY(100%);transition:transform .45s var(--ease)}
.gal figure:hover figcaption{transform:none}
@media(hover:none){.gal figcaption{transform:none}}
#lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center;flex-direction:column;padding:16px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
#lb.on{display:flex;animation:fade .3s}
#lb img{max-height:80vh;max-width:100%;object-fit:contain;transition:transform .5s var(--ease);touch-action:pinch-zoom}
#lb p{margin-top:12px;color:#bbb;font-size:13px;text-align:center}
#lb .lbb{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;background:rgba(255,255,255,.07);border:1px solid var(--line2);display:grid;place-items:center}
#lb .lbb svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
#lb .lbb:hover{background:var(--red)}
#lb .prev{left:14px}#lb .next{right:14px}
#lb .close{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top))}
.src li{margin:8px 0;font-size:14.5px;overflow-wrap:anywhere}
.src b{color:var(--red2);font-family:var(--cond)}

/* transición entre secciones: barrido rojo con el nombre */
#wipe{position:fixed;inset:0;z-index:90;pointer-events:none;display:grid;place-items:center;visibility:hidden}
#wipe::before{content:"";position:absolute;inset:0;background:var(--red);clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%)}
#wipe span{position:relative;font:800 clamp(56px,12vw,200px)/1 var(--cond);text-transform:uppercase;letter-spacing:-.01em;color:#fff;opacity:0}
#wipe.go{visibility:visible}
#wipe.go::before{animation:wipe .78s var(--ease2) forwards}
#wipe.go span{animation:wtxt .78s var(--ease2) forwards}
@keyframes wipe{0%{clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%)}45%,55%{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}100%{clip-path:polygon(120% 0,120% 0,100% 100%,100% 100%)}}
@keyframes wtxt{0%,20%{opacity:0;transform:translateX(-6%)}45%,58%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateX(6%)}}

.toast{position:fixed;left:50%;bottom:calc(24px + var(--tab) + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:#111;border:1px solid var(--red);padding:12px 18px;font:700 15px var(--cond);letter-spacing:.08em;z-index:120;opacity:0;transition:opacity .3s,transform .4s var(--ease);pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
footer{padding:26px var(--gx) calc(30px + var(--tab) + env(safe-area-inset-bottom));color:var(--mut);font-size:13px;border-top:1px solid var(--line);display:flex;gap:10px 24px;flex-wrap:wrap;justify-content:space-between;background:rgba(6,6,6,.85)}

/* =============== MÓVIL: barra inferior con 5 iconos =============== */
@media(max-width:900px){
  :root{--top:56px;--sub:46px;--tab:64px}
  #top{gap:12px}
  .logo small{display:none}.logo b{font-size:17px}.badge{width:32px;height:32px;font-size:19px}
  #mainnav{position:fixed;left:0;right:0;bottom:0;top:auto;height:calc(var(--tab) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);margin:0;gap:0;justify-content:space-around;align-items:stretch;
    background:rgba(8,8,9,.94);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-top:1px solid var(--line);z-index:70}
  #mainnav button{flex:1;flex-direction:column;gap:4px;padding:9px 2px 6px;font-size:11.5px;letter-spacing:.1em;justify-content:center;min-width:0}
  #mainnav svg{width:24px;height:24px;transition:transform .4s var(--ease)}
  #mainnav button.on svg{transform:translateY(-2px)}
  #mainnav button::after{left:28%;right:28%;top:0;bottom:auto}
  .topkm{margin-left:auto;font-size:13px;padding:5px 10px}
  .subnav button{padding:0 13px;font-size:14px}
  .sub{padding:22px var(--gx) 40px}
  .banner{height:clamp(150px,40vw,230px);padding-bottom:16px}
  .banner p{display:none}
  .hero{grid-template-columns:minmax(0,1fr);align-content:end;padding-bottom:26px;min-height:calc(100svh - var(--top) - var(--tab) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .hero>img{object-position:28% 60%}
  .dash{position:absolute;top:10px;left:0;right:0;margin:0 auto;width:min(84vw,420px,calc(31svh * 1.28))}
  .hero h1{font-size:clamp(52px,15vw,96px)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{min-height:170px;padding:14px}.tile b{font-size:21px}.tile span{font-size:13px}.tile i{width:30px;height:30px;right:10px;top:10px}
  .xlist{grid-template-columns:minmax(0,1fr)}
  .pn{padding:18px}
}
@media(max-width:420px){.tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tile span{display:none}.kmbox input{font-size:28px!important}.cmp b{font-size:24px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  #wipe{display:none}
}
.task .tag{white-space:normal;margin-left:0;margin-top:4px}
.task>div:first-child{min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){
  .refs thead{display:none}
  .refs tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .refs td{border:0!important;padding:0!important;width:auto!important}
  .refs td:nth-child(2){grid-column:1/-1;white-space:normal;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .refs td:nth-child(3){grid-column:1/-1;color:var(--mut);font-size:13px}
}
.hero h1 .l{padding-top:.14em;margin-top:-.14em}
@media(max-width:900px){.hero::before{background:linear-gradient(0deg,var(--bg) 0%,rgba(6,6,6,.88) 34%,rgba(6,6,6,.25) 62%,rgba(6,6,6,.1))}}
@media(min-width:1300px){
  #m-tasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  #m-tasks .task:nth-last-child(2):nth-child(odd){border-bottom:0}
  #b-list{columns:2;column-gap:24px}
  #b-list .grp{break-inside:avoid-column;padding-bottom:4px}
}
.task .tag{text-transform:none;letter-spacing:.02em;font:600 12.5px/1.35 var(--body);padding:2px 7px}
@media(max-width:600px){.hs i{left:-13px!important;top:-13px!important;width:26px!important;height:26px!important;font-size:12px}}
.spec .tag,.pn p .tag,.pn li .tag{white-space:normal}.spec td{overflow-wrap:anywhere}