/* ==========================================================================
   VueltaMotor · sistema visual (rediseño sept. 2026)
   Editorial monocromo inspirado en theaibusiness.com: tipografía Geist grande
   y apretada, un único acento (cian de marca), rótulos entre paréntesis,
   capítulos claros que pasan a noche al hacer scroll.
   Formas: interactivo = píldora · contenedores y medios = 10px · a sangre = 0.
   Capas: header 50 · barra de lectura 51 · vista previa 55 · menú 60 · grano 70.
   ========================================================================== */

@font-face{font-family:"Geist"; src:url("/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap;}
@font-face{font-family:"Geist Mono"; src:url("/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap;}

/* Tokens animables: al entrar en un capítulo "noche" toda la página cambia de tono con suavidad. */
@property --bg{syntax:"<color>"; inherits:true; initial-value:#ffffff;}
@property --bg-alt{syntax:"<color>"; inherits:true; initial-value:#f4f4f5;}
@property --ink{syntax:"<color>"; inherits:true; initial-value:#0b0b0c;}
@property --ink-soft{syntax:"<color>"; inherits:true; initial-value:#5e6168;}
@property --line{syntax:"<color>"; inherits:true; initial-value:#e6e6e8;}
@property --line-strong{syntax:"<color>"; inherits:true; initial-value:#0b0b0c;}
@property --accent{syntax:"<color>"; inherits:true; initial-value:#00a3c4;}

:root{
  --bg:#ffffff; --bg-alt:#f4f4f5; --ink:#0b0b0c; --ink-soft:#5e6168; --line:#e6e6e8; --line-strong:#0b0b0c;
  --accent:#00a3c4; --accent-2:#0b5f78; --accent-ink:#03151a;
  --danger:#c8414c; --warn:#b88500; --ok:#1c7f53;
  --dark:#0a0a0b; --dark-alt:#141416; --dark-ink:#f3f3f4; --dark-soft:#9b9ea5; --dark-line:#232327;
  --card-shadow:none;
  --radius:10px; --maxw:1440px; --gutter:clamp(16px,3.4vw,48px); --nav-h:64px;
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
  --z-header:50; --z-progress:51; --z-preview:55; --z-menu:60; --z-grain:70;
  transition:--bg 900ms var(--ease-in-out), --bg-alt 900ms var(--ease-in-out), --ink 900ms var(--ease-in-out), --ink-soft 900ms var(--ease-in-out),
    --line 900ms var(--ease-in-out), --line-strong 900ms var(--ease-in-out), --accent 900ms var(--ease-in-out);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0a0b; --bg-alt:#141416; --ink:#f3f3f4; --ink-soft:#9b9ea5; --line:#232327; --line-strong:#f3f3f4; --accent:#27bfdc;
  }
}
:root[data-theme="dark"], :root.is-night{
  --bg:#0a0a0b; --bg-alt:#141416; --ink:#f3f3f4; --ink-soft:#9b9ea5; --line:#232327; --line-strong:#f3f3f4; --accent:#27bfdc;
}
@media (prefers-reduced-motion: reduce){ :root{transition:none;} }

/* Lenis (desplazamiento suave) */
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}

/* Transición entre páginas (navegadores con View Transitions entre documentos) */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:vt-out 320ms var(--ease-out) both;}
::view-transition-new(root){animation:vt-in 520ms var(--ease-out) both;}
@keyframes vt-out{to{opacity:0; transform:translateY(-12px);}}
@keyframes vt-in{from{opacity:0; transform:translateY(18px);}}
@media (prefers-reduced-motion: reduce){ ::view-transition-old(root), ::view-transition-new(root){animation:none;} }

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px); -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip;}
::selection{background:var(--accent); color:var(--accent-ink);}
img{max-width:100%;}
a{color:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 80%, transparent); text-decoration-thickness:1px; text-underline-offset:4px;
  transition:color 160ms ease, text-decoration-color 160ms ease;}
@media (hover:hover){ a:hover{text-decoration-color:currentColor;} }
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
h1,h2,h3,h4{font-weight:500; text-wrap:balance; color:var(--ink); margin:0;}
p{margin:0 0 18px; color:var(--ink); text-wrap:pretty;}
strong{font-weight:600;}
em{font-style:italic;}
.muted{color:var(--ink-soft);}
.small-note{font-size:.88rem; margin-top:14px;}
.spot{display:none;}
.skip{position:fixed; left:12px; top:12px; z-index:100; transform:translateY(-160%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:999px; text-decoration:none; font-size:.85rem; transition:transform 200ms var(--ease-out);}
.skip:focus{transform:none;}

/* Grano de película: capa fija, nunca sobre contenedores que se desplazan. */
body::after{content:""; position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------------- Cabecera ---------------- */
header.site{position:fixed; top:0; left:0; right:0; z-index:var(--z-header); color:var(--ink);
  transition:background-color 400ms ease, border-color 400ms ease, transform 500ms var(--ease-out);
  border-bottom:1px solid transparent;}
header.site.is-scrolled{background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:saturate(1.5) blur(16px); -webkit-backdrop-filter:saturate(1.5) blur(16px);
  border-bottom-color:color-mix(in srgb, var(--line) 80%, transparent);}
header.site.is-hidden{transform:translateY(-100%);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--nav-h);}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:1rem; letter-spacing:-0.02em; text-decoration:none; color:var(--ink);}
.brand-mark{width:28px; height:28px; border-radius:7px; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:0; position:relative; overflow:hidden; transition:transform 400ms var(--ease-out);}
.brand-mark::after{content:""; position:absolute; right:4px; bottom:4px; width:5px; height:5px; border-radius:50%; background:var(--accent);}
@media (hover:hover) and (pointer:fine){ .brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);} }
.nav-links{display:flex; align-items:center; gap:26px; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em;}
.nav-links a{position:relative; text-decoration:none; color:var(--ink-soft); font-weight:500; padding:6px 0; transition:color 160ms ease;}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform 300ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{color:var(--ink);} .nav-links a:hover::after{transform:scaleX(1); transform-origin:left;} }
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
/* Con JS la navegación vive en el menú a pantalla completa, como en la referencia. */
.js .nav-links{display:none;}
html:not(.js) .nav{flex-wrap:wrap; height:auto; min-height:var(--nav-h); padding:12px 0;}
html:not(.js) .nav-links{overflow-x:auto; max-width:100%;}
html:not(.js) .nav-links a{white-space:nowrap;}
html:not(.js) header.site{position:sticky; background:var(--bg);}

/* Botón de menú */
.menu-btn{display:inline-flex; align-items:center; gap:10px; font:500 .74rem/1 var(--font); text-transform:uppercase; letter-spacing:.07em;
  color:inherit; background:none; border:0; padding:12px 0 12px 12px; cursor:pointer;}
.menu-btn .dots{display:grid; grid-template-columns:repeat(2,3px); gap:2px; transition:transform 400ms var(--ease-out);}
.menu-btn .dots b{width:3px; height:3px; background:currentColor; border-radius:1px;}
@media (hover:hover) and (pointer:fine){ .menu-btn:hover .dots{transform:rotate(45deg);} }

/* Barra de lectura */
.read-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:var(--z-progress); background:var(--accent); transform-origin:0 50%; transform:scaleX(0); pointer-events:none;}

/* ---------------- Menú a pantalla completa ---------------- */
.menu{position:fixed; inset:0; z-index:var(--z-menu); background:var(--dark); color:var(--dark-ink);
  display:grid; grid-template-rows:var(--nav-h) 1fr auto; padding:0 var(--gutter) 28px;
  clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path 700ms var(--ease-drawer), visibility 0s linear 700ms;}
.menu.is-open{clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path 700ms var(--ease-drawer), visibility 0s;}
.menu-top{display:flex; align-items:center; justify-content:space-between;}
.menu-top .brand{color:var(--dark-ink);}
.menu-top .brand-mark{background:var(--dark-ink); color:var(--dark);}
.menu-top .menu-btn{color:var(--dark-ink);}
.menu-body{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:48px; align-items:end; padding:32px 0;}
.menu-links{display:flex; flex-direction:column; counter-reset:m;}
.menu-links a{counter-increment:m; display:flex; align-items:baseline; gap:18px; overflow:hidden; color:var(--dark-ink); text-decoration:none;
  font-size:clamp(2.6rem,7.4vw,6.4rem); font-weight:500; letter-spacing:-0.05em; line-height:1.02; padding-bottom:.04em;}
.menu-links a span{display:inline-block; transform:translateY(110%); transition:transform 900ms var(--ease-out), color 200ms ease;}
.menu-links a::before{content:counter(m, decimal-leading-zero); font-family:var(--mono); font-size:.8rem; letter-spacing:0; color:var(--dark-soft); opacity:0; transition:opacity 400ms ease;}
.menu.is-open .menu-links a span{transform:none; transition-delay:calc(160ms + var(--i) * 55ms);}
.menu.is-open .menu-links a::before{opacity:1; transition-delay:calc(300ms + var(--i) * 55ms);}
@media (hover:hover) and (pointer:fine){ .menu-links:hover a span{color:#5b5e64;} .menu-links a:hover span{color:var(--dark-ink);} }
.menu-links a[aria-current="page"] span{color:var(--accent);}
.menu-aside{display:flex; flex-direction:column; gap:14px; font-size:.9rem; color:var(--dark-soft); opacity:0; transform:translateY(16px); transition:opacity 500ms ease, transform 700ms var(--ease-out);}
.menu.is-open .menu-aside{opacity:1; transform:none; transition-delay:450ms;}
.menu-aside p{color:var(--dark-soft); margin:0 0 6px; font-size:.9rem;}
.menu-aside a{color:var(--dark-ink); text-decoration:none; display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--dark-line); font-size:.98rem; letter-spacing:-0.01em;}
.menu-aside a:hover{color:var(--accent);}
.menu-foot{display:flex; justify-content:space-between; gap:16px; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--dark-soft); border-top:1px solid var(--dark-line); padding-top:18px;}
@media (max-width:860px){ .menu-body{grid-template-columns:1fr; align-items:start; align-content:center;} .menu-aside{display:none;} }
body.menu-open .vmsc{visibility:hidden;}

/* ---------------- Tipografía partida en palabras (site.js) ---------------- */
.split .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em;}
.split .wi{display:inline-block; will-change:transform;}
.js .hero h1:not(.split), .js .page-hero h1:not(.split){visibility:hidden; animation:vis-fallback 0s linear 1.4s both;}
@keyframes vis-fallback{to{visibility:visible;}}

/* ---------------- Botones ---------------- */
.btn{position:relative; display:inline-flex; align-items:center; gap:12px; font:500 .76rem/1 var(--font); text-transform:uppercase; letter-spacing:.07em;
  padding:16px 22px; border-radius:999px; text-decoration:none; white-space:nowrap; overflow:hidden; isolation:isolate;
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  transition:color 300ms ease, border-color 300ms ease, transform 160ms var(--ease-out);}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--accent); border-radius:inherit; transform:translateY(101%); transition:transform 500ms var(--ease-out);}
.btn:active{transform:scale(0.97);}
.btn .btn-label{display:inline-block; position:relative; overflow:hidden;}
.btn .btn-label > span{display:inline-block; transition:transform 500ms var(--ease-out);}
.btn .btn-label > span + span{position:absolute; left:0; top:0; transform:translateY(110%);}
@media (hover:hover) and (pointer:fine){
  .btn:hover{color:var(--accent-ink); border-color:var(--accent);}
  .btn:hover::before{transform:none;}
  .btn:hover .btn-label > span:first-child{transform:translateY(-110%);}
  .btn:hover .btn-label > span + span{transform:none;}
  .btn:hover .btn-arrow{transform:translateY(2px);}
}
.btn-arrow{display:inline-block; transition:transform 400ms var(--ease-out);}

/* ---------------- Portada: hero ---------------- */
.hero{position:relative; min-height:100svh; padding-top:var(--nav-h); display:grid; grid-template-rows:1fr auto; overflow:hidden; isolation:isolate;}
.hero-grid{position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; width:100%;}
.hero-copy{grid-column:1 / 7; grid-row:1; position:relative; z-index:2; padding-top:clamp(20px,6vh,72px); align-self:start;}
.hero h1{font-size:clamp(2.2rem,4.1vw,4.3rem); line-height:1.0; letter-spacing:-0.052em; margin:18px 0 36px; max-width:16ch;}
.hero .scene{grid-column:5 / 13; grid-row:1; position:relative; z-index:1; height:calc(100svh - var(--nav-h) - 90px); min-height:420px; margin-right:calc(var(--gutter) * -1);}
.hero > .wrap{width:100%;}
.hero-bar{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:24px; position:relative; z-index:2;}
.hero-bar .meta-row{margin:0; padding:0; border:0; max-width:none;}
@media (max-width:1024px){
  .hero{min-height:0;}
  .hero-copy{grid-column:1 / -1;}
  .hero .scene{grid-column:1 / -1; grid-row:2; height:min(62svh,560px); min-height:320px; margin:0 calc(var(--gutter) * -1);}
  .hero-bar{padding-top:8px;}
}

.eyebrow{display:inline-block; font-size:.9rem; font-weight:400; color:var(--ink-soft); letter-spacing:-0.005em; text-transform:none; background:none; border:0; padding:0;}
.eyebrow::before{content:"( ";} .eyebrow::after{content:" )";}
h1{font-size:clamp(2.35rem,5.4vw,5.4rem); line-height:1.0; letter-spacing:-0.05em; margin:16px 0 28px; font-weight:500;}
.lede{font-size:clamp(1.05rem,1.35vw,1.25rem); line-height:1.55; color:var(--ink-soft); max-width:56ch;}
.meta-row{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:28px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.74rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.02em;}
.meta-row span{display:flex; align-items:center; gap:8px;}

/* Escena 3D: respaldo CSS mientras carga (o si WebGL falla) */
.scene{position:relative; perspective:1200px; display:flex; align-items:center; justify-content:center;}
.scene::before{content:""; position:absolute; inset:10% 8%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);}
.hero .scene::after{content:""; position:absolute; left:28%; right:22%; bottom:4%; height:6%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--ink) 16%, transparent), transparent); filter:blur(6px);}
.rig{position:relative; width:220px; height:220px; transform-style:preserve-3d;}
.gear{position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 35% 30%, #c9ced5, #5d646d 72%); box-shadow:inset 0 0 0 10px rgba(0,0,0,.14);}
.gear::before{content:""; position:absolute; inset:18%; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line);}
.gear::after{content:""; position:absolute; inset:0; border-radius:50%; background-image:repeating-conic-gradient(#3d4249 0deg 8deg, transparent 8deg 24deg);
  mask:radial-gradient(circle, transparent 47%, #000 48%); -webkit-mask:radial-gradient(circle, transparent 47%, #000 48%);}
.gear.g1{width:220px; height:220px; animation:spin 14s linear infinite;}
.gear.g2{width:120px; height:120px; top:8px; left:130px; animation:spin 9s linear infinite reverse;}
.gear.g3{width:80px; height:80px; top:140px; left:20px; animation:spin 7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .gear{animation:none !important;} }
.scene.is-3d{perspective:none;}
.scene.is-3d .rig{display:none;}
.t3d-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; outline:none;}
.scene.is-dragging .t3d-canvas{cursor:grabbing;}
.t3d-hint{position:absolute; right:calc(var(--gutter) + 4px); bottom:14px; white-space:nowrap; pointer-events:none;
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-soft); transition:opacity 300ms var(--ease-out);}
.t3d-hint.is-hidden{opacity:0;}
@media (max-width:1024px){ .t3d-hint{right:auto; left:50%; transform:translateX(-50%); bottom:6px;} }

/* ---------------- Declaración ---------------- */
.statement{padding:clamp(96px,18vh,220px) 0 0;}
.statement-text{font-size:clamp(1.55rem,3.25vw,3.2rem); line-height:1.12; letter-spacing:-0.04em; color:var(--ink); max-width:30em; margin:0 0 clamp(64px,12vh,140px); font-weight:500;}
.statement-text .sw{transition:none;}

/* ---------------- Fotos ---------------- */
figure.photo{margin:clamp(56px,9vw,128px) 0; padding:0;}
figure.photo .ph-clip{position:relative; overflow:hidden; width:100%; height:clamp(340px,78vh,760px); background:#1b1c1f;}
figure.photo img{display:block; width:100%; height:100%; object-fit:cover; will-change:transform; transform-origin:50% 50%;}
figure.photo figcaption{max-width:var(--maxw); margin:0 auto; padding:16px var(--gutter) 0; font-size:.86rem; line-height:1.6; color:var(--ink-soft);}
figure.photo figcaption::before{content:"↳ "; color:var(--accent);}
@media (min-width:1025px){
  figure.photo figcaption{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(32px,4vw,72px);}
  figure.photo figcaption::before{content:none;}
  figure.photo figcaption > .cap{grid-column:2; max-width:68ch;}
}
.statement figure.photo{margin-top:0;}

/* ---------------- Índice ---------------- */
.toc{position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; margin:clamp(40px,8vw,120px) 0 0; padding:28px 0 0; border-top:1px solid var(--line-strong);}
.toc h2{grid-column:1 / 4; margin:0; font-size:.95rem; font-weight:400; color:var(--ink-soft); letter-spacing:0; text-transform:none;}
.toc ol{grid-column:4 / 9; list-style:none; counter-reset:toc; margin:0; padding:0;}
.toc .toc-visual{grid-column:9 / 13; grid-row:1 / span 2; align-self:start; position:relative; aspect-ratio:4 / 5; overflow:hidden; border-radius:var(--radius); background:#101113;}
.toc .toc-visual img{position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; object-position:50% 50%;}
@media (max-width:1024px){
  .toc{grid-template-columns:1fr;}
  .toc h2, .toc ol{grid-column:1;}
  .toc h2{margin-bottom:18px;}
  .toc .toc-visual{grid-column:1; grid-row:auto; aspect-ratio:16 / 9; margin-top:32px;}
}
.toc h2::before, .legal-index h2::before, .related h3::before, .sources h3::before, .section-tag::before{content:"( ";}
.toc h2::after, .legal-index h2::after, .related h3::after, .sources h3::after, .section-tag::after{content:" )";}
.section-tag{font-size:.95rem; color:var(--ink-soft);}
.toc li, .legal-index li{counter-increment:toc; position:relative;}
.toc li::after, .legal-index li::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); transform-origin:0 50%;}
.toc a, .legal-index a{display:grid; grid-template-columns:3.2ch 1fr auto; gap:16px; align-items:baseline; padding:15px 0; text-decoration:none;
  font-size:clamp(1.05rem,1.45vw,1.35rem); font-weight:500; letter-spacing:-0.025em; line-height:1.3; color:var(--ink); transition:color 200ms ease, padding 400ms var(--ease-out);}
.toc a::before, .legal-index a::before{content:counter(toc, decimal-leading-zero); font-family:var(--mono); font-size:.72rem; font-weight:400; letter-spacing:0; color:var(--ink-soft);}
.toc a::after, .legal-index a::after{content:"→"; color:var(--accent); transform:translateX(-10px); opacity:0; transition:transform 400ms var(--ease-out), opacity 250ms ease;}
@media (hover:hover) and (pointer:fine){
  .toc ol:hover a, .legal-index ol:hover a{color:var(--ink-soft);}
  .toc ol a:hover, .legal-index ol a:hover{color:var(--ink); padding-left:10px;}
  .toc a:hover::after, .legal-index a:hover::after{transform:none; opacity:1;}
}
.legal-index{margin:40px 0; padding:24px 0 0; border-top:1px solid var(--line-strong); background:none;}
.legal-index h2{margin:0 0 16px; font-size:.95rem; font-weight:400; color:var(--ink-soft); letter-spacing:0; text-transform:none;}
.legal-index ol{list-style:none; counter-reset:toc; columns:2; column-gap:48px; margin:0; padding:0;}
.legal-index li{break-inside:avoid;}
@media (max-width:760px){ .legal-index ol{columns:1;} }

/* ---------------- Secciones del artículo ---------------- */
section.block{padding:clamp(64px,9vw,144px) 0; border-top:1px solid var(--line); position:relative;}
section.block:first-of-type{border-top:none;}
.toc + section.block{border-top:0;}
h2.h{font-size:clamp(2rem,3.6vw,3.5rem); line-height:1.02; letter-spacing:-0.047em; margin:0 0 32px; font-weight:500;}
h3.h3{font-size:clamp(1.25rem,1.6vw,1.5rem); letter-spacing:-0.025em; margin:40px 0 12px; line-height:1.2;}
@media (min-width:1025px){
  /* Estructura explícita (portada) */
  section.block:has(> .block-head){display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(32px,4vw,72px); align-items:start;}
  .block-head{position:sticky; top:calc(var(--nav-h) + 40px);}
  .block-head h2.h{margin:0; padding-right:8px;}
  /* Estructura plana (guías y páginas): rótulo fijo a la izquierda, contenido a la derecha */
  section.block:not(:has(> .block-head)):has(> h2.h){display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(32px,4vw,72px); align-items:start;}
  section.block:not(:has(> .block-head)):has(> h2.h) > *{grid-column:2; min-width:0;}
  section.block:not(:has(> .block-head)):has(> h2.h) > h2.h{grid-column:1; grid-row:1 / span 60; position:sticky; top:calc(var(--nav-h) + 40px); margin:0; padding-right:8px;}
  section.block:not(:has(> .block-head)) > .cta{grid-column:1 / -1;}
}
.block-body > p, .block-body li, section.block > p, section.block li{max-width:66ch;}
.block-body > p:first-child, section.block > h2.h + p{font-size:clamp(1.08rem,1.25vw,1.22rem); line-height:1.6;}
.head-visual{position:relative; overflow:hidden; border-radius:var(--radius); margin-top:40px; aspect-ratio:4 / 3; max-width:440px; background:#101113;}
.head-visual img{position:absolute; left:0; top:-10%; width:100%; height:120%; object-fit:cover;}
.head-visual-tall{aspect-ratio:3 / 4; max-width:360px;}
@media (max-width:1024px){ .block-head{margin-bottom:8px;} .head-visual{max-width:none; aspect-ratio:16 / 10; margin:0 0 32px;} .head-visual-tall{aspect-ratio:16 / 10;} }

/* ---------------- Motores (capítulo noche) ---------------- */
.engines{padding:clamp(96px,14vw,200px) 0 clamp(80px,10vw,160px); position:relative;}
.engines-head{max-width:1100px; margin-bottom:clamp(56px,8vw,120px);}
.engines-head h2.h{font-size:clamp(2.4rem,6vw,6.2rem); line-height:.98; letter-spacing:-0.055em; margin:0 0 32px; max-width:14ch;}
.engines-head p{font-size:clamp(1.05rem,1.35vw,1.25rem); color:var(--ink-soft); max-width:52ch;}
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(24px,6vw,112px); row-gap:clamp(64px,9vw,144px); margin-top:0;}
.cards .card:nth-child(even){margin-top:clamp(0px,16vw,260px);}
.card{position:relative; background:none; border:0; border-radius:0; padding:0; box-shadow:none; transform:none; outline-offset:8px;}
.card-visual{position:relative; overflow:hidden; aspect-ratio:4 / 3.3; border-radius:var(--radius); background:#101113; margin-bottom:24px; isolation:isolate;}
.card-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08); will-change:transform; z-index:-2;}
.card-visual::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,8,9,.35) 0%, rgba(8,8,9,0) 36%, rgba(8,8,9,.15) 62%, rgba(8,8,9,.82) 100%);}
.card-top{position:absolute; inset:0; display:flex; flex-direction:column-reverse; justify-content:space-between; align-items:flex-start; padding:clamp(18px,2.2vw,32px); margin:0;}
.code{display:block; font-family:var(--font); font-weight:500; font-size:clamp(3rem,7.6vw,8.4rem); letter-spacing:-0.06em; line-height:.86; color:#f3f3f4;}
.badge{align-self:flex-end; font-family:var(--mono); font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; padding:7px 11px; border-radius:999px; white-space:nowrap;
  background:rgba(10,10,11,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.18); color:#f3f3f4;}
.badge::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:8px; vertical-align:1px;}
.badge.high::before{background:#ef5a64;}
.badge.mid::before{background:#e3b23c;}
.card p{font-size:.98rem; margin:0 0 14px; max-width:52ch;}
.card .models{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-soft); line-height:1.6; padding-top:14px; border-top:1px solid var(--line);}
.card:focus-visible .card-visual{outline:2px solid var(--accent); outline-offset:4px;}
.engines-note{font-size:.88rem; margin-top:clamp(56px,8vw,112px); max-width:70ch;}
@media (max-width:760px){ .cards{grid-template-columns:1fr; row-gap:64px;} .cards .card:nth-child(even){margin-top:0;} }
/* En la versión sin cabecera visual (otras guías) las fichas siguen siendo legibles */
.card:not(:has(.card-visual)){border-top:1px solid var(--line-strong); padding-top:18px;}
.card:not(:has(.card-visual)) .card-top{position:static; flex-direction:row; align-items:center; padding:0; margin-bottom:14px;}
.card:not(:has(.card-visual)) .code{font-size:clamp(1.8rem,3vw,2.6rem); color:var(--ink);}
.card:not(:has(.card-visual)) .badge{align-self:center; background:none; backdrop-filter:none; border-color:var(--line); color:var(--ink);}
.block-body .cards, section.block > .cards{column-gap:32px; row-gap:48px;}
.block-body .cards .card:nth-child(even), section.block > .cards .card:nth-child(even){margin-top:56px;}
@media (max-width:760px){ .block-body .cards .card:nth-child(even), section.block > .cards .card:nth-child(even){margin-top:0;} }

/* ---------------- Avisos ---------------- */
.callout{position:relative; border:0; border-radius:var(--radius); padding:24px 28px 24px 30px; margin:32px 0; background:var(--bg-alt); overflow:hidden;}
.callout::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); transform-origin:50% 0;}
.callout.warn::before{background:var(--warn);}
.callout h4{margin:0 0 8px; font-size:1.02rem; font-weight:600; letter-spacing:-0.015em;}
.callout p{margin:0; font-size:.98rem;}
.note{position:relative; background:var(--bg-alt); border:0; border-radius:var(--radius); padding:18px 22px 18px 26px; font-size:.92rem; color:var(--ink-soft); margin:18px 0; overflow:hidden;}
.note::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--warn);}

/* ---------------- Listas ---------------- */
ul.check{list-style:none; padding:0; margin:24px 0; counter-reset:chk;}
ul.check li{position:relative; padding:16px 0 16px 40px; margin:0; counter-increment:chk;}
ul.check li::after{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); transform-origin:0 50%;}
ul.check li:first-child::after{display:none;}
ul.check li::before{content:""; position:absolute; left:2px; top:26px; width:14px; height:8px; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(-45deg); transform-origin:50% 50%;}
ul.check-numbered li{padding-left:56px;}
ul.check-numbered li::before{content:counter(chk, decimal-leading-zero); left:0; top:19px; width:auto; height:auto; border:0; transform:none; font-family:var(--mono); font-size:.78rem; color:var(--accent);}

/* ---------------- Línea de tiempo por kilometraje ---------------- */
.km{position:relative; padding:clamp(80px,10vw,160px) 0; border-top:1px solid var(--line);}
.km-head{margin-bottom:clamp(40px,6vw,80px);}
.km-head h2.h{max-width:14ch; font-size:clamp(2.2rem,5vw,5rem); letter-spacing:-0.055em;}
.km-head p{max-width:56ch; color:var(--ink-soft); font-size:clamp(1.02rem,1.25vw,1.18rem);}
.km-viewport{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
.timeline{position:relative; margin:0; padding:0 0 0 28px;}
.timeline::before{content:""; position:absolute; left:4px; top:10px; bottom:10px; width:1px; background:var(--line);}
.tl-item{position:relative; padding:0 0 40px 16px;}
.tl-item::before{content:""; position:absolute; left:-28px; top:14px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:1px solid var(--line-strong);}
.tl-km{display:inline-block; font-weight:500; font-size:clamp(1.5rem,2.4vw,2.2rem); letter-spacing:-0.04em; line-height:1.1; margin-bottom:10px; font-variant-numeric:tabular-nums;}
.tl-item .muted{display:inline-block; max-width:52ch;}
.km-progress{display:none;}
/* Versión horizontal fijada (escritorio, con animaciones) */
.km.km-h{padding:0; height:auto;}
.km.km-h .km-pin{height:100svh; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; padding:calc(var(--nav-h) + clamp(24px,5vh,56px)) 0 clamp(24px,5vh,48px); overflow:hidden;}
.km.km-h .km-head{margin-bottom:0; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:48px; align-items:end;}
.km.km-h .km-head h2.h{margin:0;}
.km.km-h .km-head p{margin:0;}
.km.km-h .km-viewport{max-width:none; min-width:0; width:100%; margin:0; padding:0; display:flex; align-items:center;}
.km.km-h .km-head, .km.km-h .km-progress{width:100%;}
.km.km-h .timeline{display:flex; gap:0; padding:0 0 0 var(--gutter); will-change:transform;}
.km.km-h .timeline::before{left:var(--gutter); right:0; top:4px; bottom:auto; width:auto; height:1px;}
.km.km-h .tl-item{flex:0 0 min(58vw,880px); padding:44px clamp(40px,5vw,88px) 0 0;}
.km.km-h .tl-item::before{left:0; top:0;}
.km.km-h .tl-km{font-size:clamp(2.4rem,4vw,4.4rem); letter-spacing:-0.06em; line-height:1; margin-bottom:28px; white-space:normal;}
.km.km-h .tl-item br{display:none;}
.km.km-h .tl-item .muted{display:block; font-size:1.02rem; max-width:40ch;}
.km.km-h .km-progress{display:block; position:relative; height:1px; background:var(--line);}
.km.km-h .km-progress span{position:absolute; inset:0; background:var(--line-strong); transform-origin:0 50%; transform:scaleX(0);}

/* ---------------- Tablas ---------------- */
.tablewrap{overflow-x:auto; border:0; border-radius:0; margin-top:28px; border-top:1px solid var(--line-strong); -webkit-overflow-scrolling:touch;}
table{width:100%; border-collapse:collapse; font-size:.95rem; font-variant-numeric:tabular-nums;}
th,td{padding:16px 16px 16px 0; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
thead th{background:none; font-family:var(--mono); font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding-top:14px;}
tbody td:first-child{font-weight:500;}
tbody td:last-child{white-space:nowrap;}
@media (max-width:640px){ tbody td:last-child{white-space:normal;} table{font-size:.9rem;} }
tbody tr{transition:background-color 200ms ease;}
@media (hover:hover){ tbody tr:hover{background:color-mix(in srgb, var(--ink) 3.5%, transparent);} }

/* ---------------- Cierre: llamada a la acción ---------------- */
.closing{padding:clamp(40px,6vw,96px) 0 0;}
.cta{position:relative; overflow:hidden; isolation:isolate; margin:56px 0 8px; padding:clamp(32px,5vw,72px); border-radius:var(--radius);
  background:var(--dark); color:var(--dark-ink); box-shadow:none;
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px 56px; align-items:end;}
.closing .cta{min-height:clamp(420px,72vh,720px); margin-top:0;}
.cta-bg{position:absolute; inset:0; z-index:-1; overflow:hidden;}
.cta-bg img{position:absolute; left:0; top:-12%; width:100%; height:124%; object-fit:cover; object-position:70% 50%; opacity:.9;}
.cta-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,10,11,.94) 0%, rgba(10,10,11,.78) 45%, rgba(10,10,11,.5) 100%), linear-gradient(0deg, rgba(10,10,11,.65), transparent 55%);}
.cta h3{margin:0; font-size:clamp(2rem,4.6vw,4.6rem); line-height:1; letter-spacing:-0.052em; color:var(--dark-ink); grid-column:1; grid-row:1 / span 2; align-self:end; max-width:14ch;}
.cta p{color:#c4c7cd; margin:0; grid-column:2; max-width:40ch;}
.cta .btn{grid-column:2; justify-self:start; background:var(--dark-ink); color:var(--dark); border-color:var(--dark-ink);}
.cta a.btn{margin-top:4px;}
@media (max-width:760px){ .cta{grid-template-columns:1fr;} .cta h3, .cta p, .cta .btn{grid-column:1; grid-row:auto;} .closing .cta{min-height:0; padding-top:160px;} .cta-bg::after{background:linear-gradient(0deg, rgba(10,10,11,.95) 20%, rgba(10,10,11,.35) 100%);} }
:root.is-night .cta, :root[data-theme="dark"] .cta{background:var(--dark-alt); outline:1px solid var(--dark-line); outline-offset:-1px;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cta{background:var(--dark-alt); outline:1px solid var(--dark-line); outline-offset:-1px;} }

/* ---------------- Guías relacionadas ---------------- */
.related{margin:clamp(64px,9vw,128px) 0 0; padding:0; border:0; background:none; border-radius:0;}
.related h3, .sources h3{margin:0 0 18px; font-size:.95rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-soft);}
.related a{position:relative; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; text-decoration:none;
  font-size:clamp(1.15rem,2.1vw,2rem); font-weight:500; letter-spacing:-0.035em; line-height:1.18; color:var(--ink); transition:color 250ms ease, padding 500ms var(--ease-out);}
.related a::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); transform-origin:0 50%;}
.related a:last-child{border-bottom:1px solid var(--line);}
@media (hover:hover) and (pointer:fine){
  .related:hover a{color:var(--ink-soft);}
  .related a:hover{color:var(--ink); padding-left:16px;}
}
.preview{position:fixed; left:0; top:0; z-index:var(--z-preview); width:300px; aspect-ratio:4 / 3; border-radius:var(--radius); overflow:hidden; pointer-events:none;
  opacity:0; transform:translate3d(-50%,-50%,0) scale(.85); transition:opacity 250ms ease; background:#101113;}
.preview img{width:100%; height:100%; object-fit:cover; display:block;}
.preview.is-on{opacity:1;}

.pagelinks{display:flex; flex-wrap:wrap; gap:10px; margin:32px 0 0; padding:0; border:0;}
.pagelinks a{display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--line); border-radius:999px; padding:12px 18px;
  font-size:.88rem; font-weight:500; text-decoration:none; color:var(--ink); box-shadow:none;
  transition:background-color 250ms ease, color 250ms ease, border-color 250ms ease, transform 160ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .pagelinks a:hover{background:var(--ink); color:var(--bg); border-color:var(--ink);} }
.pagelinks a:active{transform:scale(0.97);}
section.block-flat{display:block !important; border-top:0; padding-top:clamp(64px,9vw,128px);}
section.block-flat > h2.h{position:static !important; max-width:none; font-size:clamp(2rem,4.6vw,4.4rem); letter-spacing:-0.052em;}

/* ---------------- Pie ---------------- */
footer{position:relative; margin-top:clamp(64px,10vw,160px); padding:clamp(56px,8vw,112px) 0 24px; background:var(--dark); color:var(--dark-soft); overflow:hidden;}
:root.is-night footer{background:var(--dark);}
.foot-grid{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:24px 48px; font-size:.86rem; color:var(--dark-soft);}
.foot-links{display:flex; gap:10px 26px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.07em; font-size:.72rem;}
.foot-links a{color:var(--dark-ink); text-decoration:none; font-weight:500; transition:color 200ms ease;}
.foot-links a:hover{color:var(--accent);}
footer a{color:var(--dark-ink);}
.disclaimer{font-size:.8rem; color:var(--dark-soft); margin-top:28px; max-width:70ch;}
.wordmark{display:block; margin:clamp(48px,8vw,112px) 0 clamp(12px,2vw,24px); color:var(--dark-ink); font-weight:500; letter-spacing:.02em; line-height:.8;
  white-space:nowrap; text-transform:uppercase; user-select:none; font-size:12vw; overflow:hidden; padding-top:.06em;}
.wordmark .wm-inner{display:inline-block;}
.wordmark .ch{display:inline-block; will-change:transform;}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--dark-soft); border-top:1px solid var(--dark-line); padding-top:18px; margin-top:8px;}
.to-top{background:none; border:0; color:var(--dark-ink); font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; padding:0;}
.to-top:hover{color:var(--accent);}

/* ---------------- Subpáginas ---------------- */
/* Fotos de las guías: a sangre aunque estén dentro de .wrap */
.wrap > figure.photo{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);}
/* La llamada a la acción de las guías ocupa las dos columnas */
@media (min-width:1025px){
  section.block:not(:has(> .block-head)):has(> h2.h) > .cta{grid-column:1 / -1; margin-top:72px;}
}
/* Cabecera de guía con ilustración */
@media (min-width:1025px){
  .page-hero:has(.page-hero-visual){display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(32px,4vw,72px); align-items:end;}
  .page-hero:has(.page-hero-visual) > *{grid-column:1;}
  .page-hero:has(.page-hero-visual) > .page-hero-visual{grid-column:2; grid-row:1 / span 8; align-self:stretch;}
}
.page-hero-visual{position:relative; overflow:hidden; border-radius:var(--radius); background:#101113; min-height:320px; margin-top:32px;}
.page-hero-visual img{position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover;}
@media (max-width:1024px){ .page-hero-visual{aspect-ratio:16 / 10; min-height:0;} }

.page-hero{padding:calc(var(--nav-h) + clamp(48px,10vh,120px)) 0 clamp(40px,6vw,88px); border-bottom:1px solid var(--line);}
.crumbs{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-soft); margin-bottom:24px;}
.crumbs a{color:var(--ink-soft); text-decoration:none;}
.crumbs a:hover{color:var(--ink);}
.crumbs span[aria-current]{color:var(--ink);}
.page-hero h1{margin:14px 0 32px; font-size:clamp(2.4rem,6.2vw,6.4rem); line-height:.98; letter-spacing:-0.055em; max-width:18ch;}
.page-hero .lede{max-width:58ch;}
.updated{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-soft); margin:0;}

.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 32px; margin:28px 0 8px;}
.contact-card{position:relative; background:none; border:0; border-radius:0; padding:22px 0 28px; box-shadow:none;}
.contact-card::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line-strong); transform-origin:0 50%;}
.contact-card h3{margin:16px 0 8px; font-size:1.3rem; letter-spacing:-0.03em;}
.contact-card p{font-size:.96rem; color:var(--ink-soft); margin:0;}
.contact-card .icn{width:42px; height:42px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; border:1px solid var(--line); background:none;}
.contact-card a{font-weight:500;}
.row{display:flex; gap:10px; align-items:center; margin:10px 0;}

.sources{margin-top:48px; padding-top:22px; border-top:1px solid var(--line); font-size:.86rem; color:var(--ink-soft);}
.sources ol{margin:0; padding-left:1.5em;}
.sources li{margin-bottom:8px; overflow-wrap:anywhere;}
.sources li::marker{font-family:var(--mono); font-size:.74rem;}
.spec{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0 28px; margin:28px 0 12px;}
.spec div{position:relative; background:none; border:0; border-radius:0; padding:16px 0;}
.spec div::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); transform-origin:0 50%;}
.spec b{display:block; font-family:var(--mono); font-size:.68rem; font-weight:400; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:6px;}
.spec span{font-weight:500; font-size:1.12rem; letter-spacing:-0.02em;}

/* Listado de guías */
.guide-list{display:grid; grid-template-columns:1fr; gap:0; margin-top:4px;}
.guide-list a{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 32px; align-items:center; text-decoration:none; color:inherit; background:none; border:0; border-radius:0; padding:32px 0; box-shadow:none;}
.guide-list a::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); transform-origin:0 50%;}
.guide-list a:last-child{border-bottom:1px solid var(--line);}
.guide-list .gl-text{min-width:0;}
.guide-list .gl-thumb{grid-column:2; grid-row:1; width:clamp(120px,14vw,200px); aspect-ratio:4 / 3; border-radius:var(--radius); overflow:hidden; background:#101113;}
.guide-list .gl-thumb img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); transition:transform 900ms var(--ease-out);}
.guide-list .eyebrow{margin-bottom:8px; font-size:.85rem;}
.guide-list h3{margin:0 0 12px; font-size:clamp(1.3rem,2.3vw,2.1rem); line-height:1.08; letter-spacing:-0.04em; transition:color 250ms ease;}
.guide-list p{margin:0; font-size:.96rem; color:var(--ink-soft); max-width:62ch;}
.guide-list .meta{margin-top:14px; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-soft);}
@media (hover:hover) and (pointer:fine){
  .guide-list a:hover .gl-thumb img{transform:scale(1.14);}
  .guide-list a:hover h3{color:var(--accent);}
}
@media (max-width:640px){ .guide-list a{grid-template-columns:1fr;} .guide-list .gl-thumb{grid-column:1; grid-row:1; width:100%; aspect-ratio:16 / 9; margin-bottom:16px;} }

/* ---------------- Líneas que se dibujan al aparecer (site.js añade .ln / .ln-in) ---------------- */
.toc li.ln::after, .legal-index li.ln::after, ul.check li.ln::after, .related a.ln::before, .guide-list a.ln::before, .spec div.ln::before, .contact-card.ln::before{
  transform:scaleX(0); transition:transform 1400ms var(--ease-out);}
.toc li.ln-in::after, .legal-index li.ln-in::after, ul.check li.ln-in::after, .related a.ln-in::before, .guide-list a.ln-in::before, .spec div.ln-in::before, .contact-card.ln-in::before{
  transform:scaleX(1);}
.bar-grow::before{transform:scaleY(0); transition:transform 1200ms var(--ease-out) 150ms;}
.bar-grow.bar-in::before{transform:scaleY(1);}

/* ---------------- Pantallas pequeñas ---------------- */
@media (max-width:640px){
  body{font-size:16px;}
  .statement{padding-top:88px;}
  figure.photo .ph-clip{height:min(62svh,460px);}
}

/* ---------------- Movimiento reducido ---------------- */
@media (prefers-reduced-motion: reduce){
  .menu, .menu.is-open{transition:visibility 0s;}
  .menu-links a span, .menu-aside{transform:none !important; opacity:1 !important; transition:none !important;}
  .btn::before, .btn .btn-label > span{transition:none;}
  body::after{display:none;}
}

/* Sin ilustración disponible */
.toc-visual.img-missing, .head-visual.img-missing, .page-hero-visual.img-missing, .gl-thumb.img-missing{display:none;}
.cta-bg.img-missing{background:radial-gradient(120% 90% at 85% 30%, rgba(39,191,220,.16), transparent 60%);}
.card-visual.img-missing{background:radial-gradient(90% 80% at 80% 15%, rgba(39,191,220,.18), transparent 60%), linear-gradient(160deg, #18191c, #0c0c0d);}
@media (min-width:1025px){ .page-hero:has(.page-hero-visual.img-missing){grid-template-columns:1fr;} }

/* ==========================================================================
   Hero con el BMW M3 (m3-hero.js): plató oscuro, humo y derrape
   ========================================================================== */
.hero-m3{--bg:#0a0a0b; --bg-alt:#141416; --ink:#f3f3f4; --ink-soft:#9b9ea5; --line:#26282d; --line-strong:#f3f3f4;
  background:#0a0a0b; color:var(--ink); min-height:100svh;}
.hero-m3 .stage{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.stage-light{position:absolute; inset:0;
  background:
    radial-gradient(42% 38% at 66% 60%, rgba(255,255,255,.11), transparent 70%),
    radial-gradient(70% 55% at 62% 0%, rgba(39,191,220,.07), transparent 70%),
    radial-gradient(120% 80% at 50% 120%, rgba(255,255,255,.05), transparent 60%);}
/* Suelo: pista negra en perspectiva con el charco de luz del foco; se funde con el fondo por los bordes */
.stage-floor{position:absolute; left:-10%; right:-10%; bottom:0; height:58%;
  background:
    radial-gradient(38% 34% at 64% 58%, rgba(255,255,255,.075), transparent 72%),
    radial-gradient(70% 60% at 50% 100%, rgba(255,255,255,.03), transparent 70%),
    linear-gradient(180deg, rgba(10,10,11,0) 0%, #0e0e10 30%, #111113 100%);
  -webkit-mask:linear-gradient(180deg, transparent 0%, #000 28%), linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite:source-in; mask:linear-gradient(180deg, transparent 0%, #000 28%) intersect, linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);}
.stage-floor::after{content:""; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);}
.hero-m3 canvas{position:absolute; inset:0; pointer-events:none;}
.hero-m3 .skid{z-index:1;}
.hero-m3 .smoke-back{z-index:2;}
.hero-m3 .smoke-front{z-index:4;}
.fx-defs{position:absolute; width:0; height:0; overflow:hidden;}
/* Capas del mundo: la cámara las mueve juntas (m3-hero.js) */
.hero-m3 .world{position:absolute; inset:0; transform-origin:50% 50%; will-change:transform; pointer-events:none;}
.hero-m3 .world-car{z-index:3;}
.car-rig{position:absolute; left:0; top:0; width:min(62vw, 1060px); transform-origin:50% 100%; will-change:transform;
  transform:translate3d(120vw, 120vh, 0);}
.car{position:relative; width:100%; aspect-ratio:1102 / 482; pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent;
  perspective:1600px; perspective-origin:50% 60%;}
.car .frame{position:absolute; left:50%; bottom:0; height:100%; transform:translateX(-50%); opacity:0; will-change:opacity, transform; transform-origin:50% 100%; backface-visibility:hidden;}
.car .frame.on{opacity:1;}
.car .frame img{display:block; height:100%; width:auto; max-width:none; user-select:none; -webkit-user-drag:none;}
.car .frame.mirror{transform:translateX(-50%) scaleX(-1);}
.car .em{position:absolute; width:1px; height:1px; pointer-events:none;}
.car-shadow{position:absolute; left:0; right:-2%; bottom:-7%; height:22%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.9), rgba(0,0,0,.45) 55%, transparent); filter:blur(10px);}
/* sombra de contacto: donde las ruedas y los bajos tocan el suelo */
.car-contact{position:absolute; left:6%; right:4%; bottom:1%; height:7%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.95), rgba(0,0,0,.6) 60%, transparent); filter:blur(3px);}
/* reflejo tenue en la pista (Chrome, Safari, Edge) */
.car .frame img{-webkit-box-reflect:below -3px linear-gradient(transparent 74%, rgba(255,255,255,.13));}
.car-rig .car-ghost{position:absolute; inset:0; pointer-events:none; cursor:default; filter:blur(3px);}
.car-rig .car-ghost .car-shadow{display:none;}
.car-rig .car-ghost:first-child{opacity:calc(var(--blur) * .12); transform:translate3d(calc(var(--blur) * -60px), 0, 0);}
.car-rig .car-ghost:nth-child(2){opacity:calc(var(--blur) * .22); transform:translate3d(calc(var(--blur) * -28px), 0, 0);}
.hero-m3 .hero-grid, .hero-m3 .hero-bar{position:relative; z-index:5; pointer-events:none;}
.hero-m3 .hero-copy{pointer-events:auto;}
.hero-m3 .eyebrow{color:#9b9ea5;}
.hero-m3 .meta-row{color:#9b9ea5;}
@media (max-width:1024px){
  .hero-m3{display:flex; flex-direction:column;}
  .hero-m3 .hero-grid{flex:1;}
  .car-rig{width:min(96vw, 760px);}
}
/* Cabecera sobre el plató oscuro */
header.site.on-stage{--ink:#f3f3f4; --ink-soft:#9b9ea5; --bg:#0a0a0b; --line:#26282d;}


html:not(.js) .car-rig{left:auto; right:2vw; top:auto; bottom:12%; transform:none;}