@import url("../fonts/fonts.css");

/* ============================================================
   ARBIDE MOTOR — sistema de diseño
   Dirección de arte: tinta profunda + papel cálido + cobre.
   Tipografía: Archivo (display) · Inter Tight (texto) · JetBrains Mono (datos)
   ============================================================ */

:root{
  --ink:      #0A0B0D;
  --ink-2:    #101115;
  --ink-3:    #16181D;
  --ink-4:    #1E2128;
  --paper:    #F3F1EC;
  --paper-2:  #E7E4DC;
  --txt:      #EDEBE6;
  --txt-dim:  #A5A8AD;
  --txt-ink:  #14161A;
  --txt-ink-dim:#5B6068;
  --accent:   #D2673A;
  --accent-hi:#E8916A;
  --accent-dk:#A8461F;
  --line:     rgba(237,235,230,.12);
  --line-2:   rgba(237,235,230,.22);
  --line-ink: rgba(20,22,26,.14);

  --f-display:"Archivo", system-ui, sans-serif;
  --f-text:   "Inter Tight", system-ui, sans-serif;
  --f-mono:   "JetBrains Mono", ui-monospace, monospace;

  --gut: clamp(20px, 4.2vw, 72px);
  --maxw: 1440px;
  --r: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .7s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--txt);
  font-family:var(--f-text); font-size:17px; line-height:1.6;
  font-weight:350; letter-spacing:.001em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select{font:inherit; color:inherit}
::selection{background:var(--accent); color:#0A0B0D}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,10vw,152px)}
.sec--tight{padding-block:clamp(56px,7vw,104px)}
.paper{background:var(--paper); color:var(--txt-ink)}
.paper .lbl{color:var(--accent-dk)}
.paper .dim{color:var(--txt-ink-dim)}
.grid{display:grid; gap:clamp(20px,2.4vw,34px)}

/* ---------- tipografía ---------- */
.lbl{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--accent-hi);
  display:flex; align-items:center; gap:12px;
}
.lbl::before{content:""; width:26px; height:1px; background:currentColor; opacity:.55; flex:none}
.lbl--plain::before{display:none}

h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; letter-spacing:-.028em; line-height:1.03; margin:0}
.d1{font-size:clamp(2.9rem, 7.2vw, 6.6rem)}
.d2{font-size:clamp(2.2rem, 4.6vw, 4rem); line-height:1.05}
.d3{font-size:clamp(1.5rem, 2.3vw, 2.15rem); line-height:1.12; letter-spacing:-.022em}
.d4{font-size:clamp(1.12rem,1.35vw,1.32rem); line-height:1.25; letter-spacing:-.015em; font-weight:600}
.lead{font-size:clamp(1.05rem,1.35vw,1.32rem); line-height:1.55; color:var(--txt-dim); font-weight:350; max-width:60ch}
.paper .lead{color:var(--txt-ink-dim)}
.mono{font-family:var(--f-mono); font-size:13px; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.dim{color:var(--txt-dim)}

/* ---------- botones ---------- */
.btn{
  --bg:var(--accent); --fg:#0A0B0D;
  display:inline-flex; align-items:center; gap:14px;
  padding:17px 30px; background:var(--bg); color:var(--fg);
  font-family:var(--f-mono); font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; border-radius:var(--r);
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease-out), background .35s var(--ease);
}
.btn span{position:relative; z-index:1}
.btn svg{width:15px; height:15px; position:relative; z-index:1; transition:transform .45s var(--ease-out)}
.btn::after{
  content:""; position:absolute; inset:0; background:#fff; z-index:0;
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out);
}
.btn:hover::after{transform:scaleX(1); transform-origin:left}
.btn:hover{color:var(--ink)}
.btn:hover svg{transform:translateX(5px)}
.btn--ghost{--bg:transparent; --fg:var(--txt); box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{color:var(--ink)}
.paper .btn--ghost{--fg:var(--txt-ink); box-shadow:inset 0 0 0 1px var(--line-ink)}
.paper .btn--ghost::after{background:var(--ink)}
.paper .btn--ghost:hover{color:var(--paper)}
.btn--sm{padding:12px 20px; font-size:11px}

.link-u{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:6px; border-bottom:1px solid var(--line-2); transition:border-color .3s, color .3s;
}
.link-u:hover{border-color:var(--accent); color:var(--accent-hi)}
.paper .link-u{border-color:var(--line-ink)}
.paper .link-u:hover{color:var(--accent-dk); border-color:var(--accent-dk)}

/* ---------- cabecera ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:20px var(--gut);
  transition:background .5s var(--ease), backdrop-filter .5s, padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(10,11,13,.93); border-bottom-color:var(--line); padding-block:13px}
.mark{display:flex; align-items:baseline; gap:11px; flex:none}
.mark b{font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:.16em; text-transform:uppercase}
.mark i{font-family:var(--f-mono); font-style:normal; font-size:9.5px; letter-spacing:.26em; color:var(--txt-dim); text-transform:uppercase}
.nav{display:flex; align-items:center; gap:clamp(18px,2vw,34px)}
.nav a{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--txt-dim); padding:6px 0; position:relative; transition:color .3s;
}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out)}
.nav a:hover,.nav a[aria-current]{color:var(--txt)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1); transform-origin:left}
.hdr .btn{padding:12px 22px; font-size:11px}
.burger{display:none; width:42px; height:42px; align-items:center; justify-content:center}
.burger span{display:block; width:20px; height:1px; background:var(--txt); position:relative; transition:.3s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:1px; background:var(--txt); transition:.3s}
.burger span::before{top:-6px} .burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:26px;
    background:rgba(10,11,13,.985);
    opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
  }
  .nav a{font-size:15px; letter-spacing:.2em}
  body.menu-open .nav{opacity:1; pointer-events:auto}
  .burger{display:flex; z-index:90}
  .hdr .btn{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img,.hero__media video{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroZoom 14s var(--ease-out) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,11,13,.86) 0%, rgba(10,11,13,.30) 34%, rgba(10,11,13,.55) 66%, rgba(10,11,13,.94) 100%),
    linear-gradient(90deg, rgba(10,11,13,.70) 0%, rgba(10,11,13,.12) 62%);
}
.hero__in{width:100%; padding-block:clamp(96px,12vh,150px) clamp(28px,5vh,56px)}
.hero h1{max-width:16ch; margin:26px 0 0}
.hero .lead{margin:26px 0 0; color:#CFCEC9}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}

.hero__strip{
  margin-top:clamp(44px,7vh,84px); padding-top:26px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,34px);
}
.hero__strip div span{display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--txt-dim)}
.hero__strip div b{display:block; font-family:var(--f-display); font-weight:600; font-size:clamp(1.4rem,2.2vw,2rem); letter-spacing:-.02em; margin-top:8px}
@media (max-width:720px){.hero__strip{grid-template-columns:repeat(2,1fr); gap:22px}}

.scroll-hint{
  position:absolute; right:var(--gut); bottom:clamp(28px,5vh,56px); z-index:2;
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-dim);
}
.scroll-hint i{display:block; width:1px; height:46px; background:linear-gradient(var(--accent),transparent); animation:hint 2.4s infinite}
@keyframes hint{0%{transform:scaleY(.2); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
@media (max-width:900px){.scroll-hint{display:none}}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.rv.in{opacity:1; transform:none}
.rv-line{overflow:hidden; display:block}
.rv-line > span{display:block; transform:translateY(105%); transition:transform 1s var(--ease-out)}
.in .rv-line > span, .rv-line.in > span{transform:none}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-line>span{opacity:1 !important; transform:none !important; transition:none !important}
  .hero__media img,.hero__media video{animation:none; transform:none}
  html{scroll-behavior:auto}
}

/* ---------- cabecera de sección ---------- */
.shead{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px,4.5vw,64px)}
.shead h2{max-width:20ch}
.shead p{margin:14px 0 0}

/* ---------- barra de búsqueda ---------- */
.finder{
  display:grid; grid-template-columns:repeat(4,1fr) auto; gap:0;
  border:1px solid var(--line-ink); background:var(--paper);
  color:var(--txt-ink); border-radius:var(--r); overflow:hidden;
}
.finder label{display:block; padding:16px 22px; border-right:1px solid var(--line-ink)}
.finder span{display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-ink-dim); margin-bottom:5px}
.finder select{width:100%; max-width:100%; border:0; background:none; font-size:15.5px; font-weight:500; padding:0; outline:none; text-overflow:ellipsis}
.finder .btn{border-radius:0; height:100%}
@media (max-width:900px){
  .finder{grid-template-columns:1fr 1fr}
  .finder label:nth-child(2n){border-right:0}
  .finder .btn{grid-column:1/-1; justify-content:center}
}

/* ---------- tarjeta de coche ---------- */
.cars{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:clamp(18px,2vw,30px)}
.car{
  display:block; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; position:relative;
  transition:transform .6s var(--ease-out), border-color .4s, background .4s;
}
.car:hover{transform:translateY(-6px); border-color:var(--line-2); background:var(--ink-3)}
.car__img{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ink-3)}
.car__img img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out)}
.car:hover .car__img img{transform:scale(1.045)}
.car__tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 10px; background:rgba(10,11,13,.78); color:var(--txt);
  border:1px solid var(--line);
}
.car__tag--acc{background:var(--accent); border-color:transparent; color:#0A0B0D}
.car__body{padding:22px 22px 24px}
.car__body h3{font-size:1.14rem; font-weight:600; letter-spacing:-.02em; line-height:1.22}
.car__meta{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-family:var(--f-mono); font-size:11.5px; color:var(--txt-dim); letter-spacing:.03em}
.car__foot{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.car__price b{display:block; font-family:var(--f-display); font-weight:600; font-size:1.5rem; letter-spacing:-.025em}
.car__price span{font-family:var(--f-mono); font-size:10.5px; color:var(--txt-dim); letter-spacing:.1em; text-transform:uppercase}
.car__go{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%; transition:.4s var(--ease-out);
}
.car:hover .car__go{background:var(--accent); border-color:var(--accent); transform:rotate(-45deg)}
.car__go svg{width:14px; height:14px}

/* ---------- escena orbital (momento firma) ---------- */
.orbit{position:relative; height:420svh; background:var(--ink)}
.orbit__stick{position:sticky; top:0; height:100svh; overflow:hidden}
.orbit__bg{position:absolute; inset:0; background:radial-gradient(62% 62% at 50% 48%, #1A1D24 0%, var(--ink) 74%)}
.orbit__word{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--f-display); font-weight:700; letter-spacing:-.05em;
  font-size:clamp(5rem,20vw,18rem); color:#fff; opacity:.07; white-space:nowrap; user-select:none;
}
.orbit__canvas{position:absolute; inset:0}
.orbit__canvas canvas{width:100%; height:100%; display:block}
.orbit__stick::before{
  content:""; position:absolute; inset:0 0 auto; height:42%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.55) 42%, transparent 100%);
}
.orbit__stick::after{
  content:""; position:absolute; inset:auto 0 0; height:38%; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.55) 46%, transparent 100%);
}
.orbit__head{position:absolute; top:clamp(96px,14vh,150px); left:0; right:0; z-index:3; padding-inline:var(--gut); text-align:center}
.orbit__head h2{margin-top:16px}
.orbit__head .lbl{justify-content:center}
.orbit__ui{position:absolute; inset:auto 0 clamp(26px,5vh,58px); z-index:3; padding-inline:var(--gut)}
.orbit__specs{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,34px); border-top:1px solid var(--line-2); padding-top:24px; max-width:var(--maxw); margin:0 auto}
.orbit__specs div span{display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-dim)}
.orbit__specs div b{display:block; font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem,2.8vw,2.5rem); letter-spacing:-.03em; margin-top:10px}
@media (max-width:720px){
  .orbit{height:340svh}
  .orbit__specs{grid-template-columns:repeat(2,1fr); gap:16px 14px}
  .orbit__specs div b{font-size:1.35rem}
}

/* ---------- banda de cifras ---------- */
.band{position:relative; overflow:hidden; isolation:isolate}
.band__bg{position:absolute; inset:0; z-index:-2}
.band__bg img{width:100%; height:100%; object-fit:cover}
.band::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(10,11,13,.90),rgba(10,11,13,.80))}
.figs{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,44px)}
.figs > div{border-top:1px solid var(--line); padding-top:20px}
.figs b{display:block; font-family:var(--f-display); font-weight:600; font-size:clamp(2.4rem,5vw,4.4rem); letter-spacing:-.04em; line-height:1}
.figs span{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--txt-dim); margin-top:12px; max-width:22ch}
@media (max-width:840px){.figs{grid-template-columns:repeat(2,1fr)}}

/* ---------- proceso ---------- */
.steps{counter-reset:s; display:grid; gap:0}
.steps li{
  counter-increment:s; list-style:none; display:grid;
  grid-template-columns:auto 1fr; gap:clamp(22px,4vw,64px);
  padding:clamp(26px,3.4vw,44px) 0; border-top:1px solid var(--line-ink);
  align-items:start;
}
.steps li:last-child{border-bottom:1px solid var(--line-ink)}
.steps li::before{
  content:"0" counter(s); font-family:var(--f-mono); font-size:12px; letter-spacing:.16em;
  color:var(--accent-dk); padding-top:8px;
}
.steps h3{font-size:clamp(1.35rem,2.3vw,2rem); letter-spacing:-.025em}
.steps p{margin:12px 0 0; max-width:56ch; color:var(--txt-ink-dim)}
.steps .st{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start}
.steps .st img{width:clamp(140px,18vw,260px); aspect-ratio:3/2; object-fit:cover; border-radius:var(--r)}
@media (max-width:760px){.steps .st{grid-template-columns:1fr} .steps .st img{width:100%}}

/* ---------- testimonio ---------- */
.testi{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px); align-items:center}
.testi__img{position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r)}
.testi__img img{width:100%; height:100%; object-fit:cover}
.testi blockquote{margin:0; font-family:var(--f-display); font-weight:500; font-size:clamp(1.5rem,2.7vw,2.5rem); line-height:1.24; letter-spacing:-.025em}
.testi cite{display:block; margin-top:26px; font-style:normal; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--txt-dim)}
.paper .testi cite{color:var(--txt-ink-dim)}
@media (max-width:860px){.testi{grid-template-columns:1fr}}

/* ---------- financiación ---------- */
.calc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(28px,4vw,72px); align-items:start}
.calc__panel{background:var(--ink-2); border:1px solid var(--line); padding:clamp(24px,3vw,40px); border-radius:var(--r)}
.field{margin-bottom:30px}
.field:last-child{margin-bottom:0}
.field__top{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px}
.field__top span{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--txt-dim)}
.field__top b{font-family:var(--f-display); font-weight:600; font-size:1.35rem; letter-spacing:-.02em}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--line-2); outline:none; border-radius:2px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent);
  cursor:pointer; border:3px solid var(--ink); box-shadow:0 0 0 1px var(--accent); transition:transform .25s
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
input[type=range]::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--accent); border:3px solid var(--ink); cursor:pointer}
.calc__out{border-top:1px solid var(--line); margin-top:32px; padding-top:26px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.calc__out b{font-family:var(--f-display); font-weight:600; font-size:clamp(2.4rem,4.6vw,3.6rem); letter-spacing:-.04em; line-height:1; color:var(--accent-hi)}
.calc__out b em{font-style:normal; font-size:.42em; letter-spacing:-.01em; color:var(--txt-dim)}
.calc__note{font-family:var(--f-mono); font-size:10.5px; line-height:1.7; color:var(--txt-dim); margin-top:18px; letter-spacing:.02em}
@media (max-width:900px){.calc{grid-template-columns:1fr}}

/* ---------- equipo ---------- */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(16px,2vw,28px)}
.team figure{margin:0}
.team img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r); filter:grayscale(1) contrast(1.05); transition:filter .7s var(--ease-out), transform .7s var(--ease-out)}
.team figure:hover img{filter:none; transform:translateY(-4px)}
.team figcaption{margin-top:16px}
.team b{display:block; font-family:var(--f-display); font-weight:600; font-size:1.05rem; letter-spacing:-.015em}
.team span{display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--txt-dim); margin-top:6px}
.paper .team span{color:var(--txt-ink-dim)}

/* ---------- media a sangre ---------- */
.bleed{position:relative; height:clamp(340px,62vh,680px); overflow:hidden}
.bleed img{width:100%; height:100%; object-fit:cover}
.bleed__cap{
  position:absolute; left:var(--gut); bottom:clamp(22px,4vh,44px); right:var(--gut);
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
}

/* ---------- CTA final ---------- */
.cta{position:relative; text-align:center; overflow:hidden}
.cta h2{max-width:26ch; margin-inline:auto}
.cta .lead{margin:22px auto 0}
.cta__row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px}

/* ---------- pie ---------- */
.ftr{background:var(--ink-2); border-top:1px solid var(--line); padding-block:clamp(52px,6vw,84px) 34px}
.ftr__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(26px,3vw,52px)}
.ftr h3{font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.19em; text-transform:uppercase; color:var(--txt-dim); margin:0 0 18px}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.ftr a{color:var(--txt-dim); transition:color .3s; font-size:15px}
.ftr a:hover{color:var(--accent-hi)}
.ftr__bot{margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; color:var(--txt-dim)}
@media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}}

/* ---------- avisos demo ---------- */
.demo-note{
  background:var(--ink-3); border:1px dashed var(--line-2); border-radius:var(--r);
  padding:16px 20px; font-family:var(--f-mono); font-size:11px; line-height:1.7;
  color:var(--txt-dim); letter-spacing:.03em;
}
.paper .demo-note{background:var(--paper-2); border-color:var(--line-ink); color:var(--txt-ink-dim)}

/* ---------- utilidades ---------- */
.mt-s{margin-top:18px}.mt-m{margin-top:30px}.mt-l{margin-top:clamp(34px,4vw,60px)}
.center{text-align:center}
.hide{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:2px solid var(--accent-hi); outline-offset:3px}