/* ===== TOKENS ===== */
:root{
  --bg:#08090b;
  --bg-2:#0f1115;
  --panel:#15171c;
  --panel-2:#1b1e24;
  --line:rgba(255,255,255,.09);
  --text:#f4f5f7;
  --muted:#9aa1a9;
  --gold:#e8b23a;
  --gold-2:#f7d071;
  --gold-deep:#b7841f;
  --wa:#25d366;
  --radius:16px;
  --shadow:0 20px 50px rgba(0,0,0,.5);
  --grad-gold:linear-gradient(135deg,var(--gold-2),var(--gold) 45%,var(--gold-deep));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.55;overflow-x:hidden;cursor:none;
}
/* Fondo fibra de carbono */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background-color:#0a0b0d;
  background-image:
    linear-gradient(27deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(-27deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(27deg,rgba(0,0,0,.5) 1px,transparent 1px),
    linear-gradient(-27deg,rgba(0,0,0,.5) 1px,transparent 1px),
    radial-gradient(circle at 50% -10%,rgba(232,178,58,.06),transparent 55%);
  background-size:7px 7px,7px 7px,7px 7px,7px 7px,100% 100%;
  background-position:0 0,3.5px 0,0 3.5px,3.5px 3.5px,0 0;
}
input,select,textarea{cursor:auto}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.gold{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
h1,h2,h3{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.5px;line-height:1.05}

/* ===== BUTTONS ===== */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:none;transition:.2s transform,.2s box-shadow,.2s background,.2s filter;
  white-space:nowrap;
}
.btn>*{position:relative;z-index:1}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:65%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .6s ease;z-index:0}
.btn:hover::after{left:150%}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn:active{transform:scale(.96)}
.btn-gold{background:var(--grad-gold);color:#1a1206;box-shadow:0 8px 24px rgba(232,178,58,.28)}
.btn-gold:hover{box-shadow:0 12px 30px rgba(232,178,58,.45);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.03)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-wa{background:var(--wa);color:#062b13}
.btn-wa:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-clear{background:transparent;border-color:var(--line);color:var(--muted)}
.btn-clear:hover{color:var(--text)}
.btn-share{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--text)}
.btn-share:hover{background:rgba(232,178,58,.14);border-color:rgba(232,178,58,.5)}

/* Cartelito flotante de una línea (link copiado, auto que ya no está) */
.nfr-aviso{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:rgba(20,17,12,.96);border:1px solid rgba(232,178,58,.45);color:var(--text);
  padding:12px 20px;border-radius:999px;font-size:14px;font-weight:600;
  box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:9999;pointer-events:none;
  opacity:0;transition:.35s opacity,.35s transform;max-width:calc(100vw - 32px);text-align:center;
}
.nfr-aviso.show{opacity:1;transform:translate(-50%,0)}

/* ===== INTRO ===== */
.intro{
  position:fixed;inset:0;z-index:1000;background:#0a0a0c;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .7s ease,visibility .7s;
}
.intro.hide{opacity:0;visibility:hidden;pointer-events:none}

/* --- Fondo de fibra de carbono --- */
/* El tejido en diagonal queda quieto; lo que se mueve es la luz de arriba. */
.intro-carbono{
  position:absolute;inset:0;background:#0c0d0f url(/assets/carbono.png) 0 0 repeat;
  background-size:30px 30px;
}
/* Sombra en los bordes: hace que la fibra parezca una chapa curva y no una pared plana. */
.intro-carbono::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(125% 95% at 50% 42%,transparent 22%,rgba(0,0,0,.5) 68%,rgba(0,0,0,.88));
}

/* --- Ondas de luz, como el reflejo corriendo sobre la chapa de un auto --- */
.intro-ondas{position:absolute;inset:0;overflow:hidden}
.onda{position:absolute;border-radius:50%;will-change:transform}
.onda-1{width:150vmax;height:62vmax;left:-30vmax;top:-26vmax;
  background:radial-gradient(closest-side,rgba(232,178,58,.17),rgba(232,178,58,0) 72%);
  animation:onda1 18s ease-in-out infinite alternate}
.onda-2{width:132vmax;height:52vmax;right:-32vmax;bottom:-22vmax;
  background:radial-gradient(closest-side,rgba(150,185,255,.14),rgba(150,185,255,0) 72%);
  animation:onda2 23s ease-in-out infinite alternate}
.onda-3{width:110vmax;height:24vmax;left:50%;top:50%;margin:-12vmax 0 0 -55vmax;
  background:radial-gradient(closest-side,rgba(255,255,255,.11),rgba(255,255,255,0) 72%);
  animation:onda3 13s ease-in-out infinite alternate}
.brillo{position:absolute;top:-30%;bottom:-30%;left:-70%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07) 40%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.07) 60%,transparent);
  transform:skewX(-14deg);will-change:left;
  animation:barrido 8s ease-in-out 1.4s infinite}
@keyframes onda1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(20vmax,11vmax,0) scale(1.16)}}
@keyframes onda2{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-18vmax,-10vmax,0) scale(.9)}}
@keyframes onda3{from{transform:rotate(-13deg) translate3d(-13vmax,-4vmax,0)}to{transform:rotate(-7deg) translate3d(13vmax,5vmax,0)}}
@keyframes barrido{0%{left:-70%}60%,100%{left:135%}}

/* --- El logo, cortado en piezas, que se arma solo --- */
.intro-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px}
.intro-mark{position:relative;width:min(88vw,760px);aspect-ratio:1400/371;
  filter:drop-shadow(0 20px 42px rgba(0,0,0,.7));
  /* El latido va clavado con el reflejo: el brillo arranca a los 2 s y cruza el medio
     del logo a los ~2.42 s; el golpe pega a los 0.13 s de empezar, así que sale a 2.3 s. */
  animation:golpe .6s ease 2.3s}
.pieza{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;will-change:transform,opacity,filter;
  animation:encajar 1.5s cubic-bezier(.17,.92,.24,1) forwards}
.pieza-n{--dx:-90vw;--dy:-12vh;--rot:-16deg;--sc:1.35;animation-delay:.2s}
.pieza-r{--dx:90vw;--dy:12vh;--rot:16deg;--sc:1.35;animation-delay:.45s}
.pieza-f{--dx:0vw;--dy:-80vh;--rot:9deg;--sc:1.2;animation-delay:.7s}
.pieza-m{--dx:0vw;--dy:30vh;--rot:0deg;--sc:1;animation-delay:1.1s;animation-duration:1.2s}

/* --- Modo partículas: manda el lienzo y las imágenes esperan apagadas --- */
/* El lienzo es más grande que el logo a propósito: así se ve el polvo llegando
   desde afuera y no aparece de golpe pegado a las letras. */
.intro-polvo{position:absolute;left:-30%;top:-90%;width:160%;height:280%;display:none;
  pointer-events:none;opacity:0;transition:opacity .9s ease}
.intro-mark.con-polvo .intro-polvo{display:block;opacity:1}
.intro-mark.con-polvo .pieza{animation:none;opacity:0;transition:opacity .9s ease}
/* Mientras vuela el polvo se apaga la sombra: filtrar un lienzo grande en cada
   cuadro es carísimo. Vuelve cuando ya está armado. */
.intro-mark.con-polvo{filter:none;transition:filter .9s ease}
.intro-mark.con-polvo.armado{filter:drop-shadow(0 20px 42px rgba(0,0,0,.7))}
/* El logo nítido asoma MIENTRAS el polvo todavía cae: los dos conviven un rato y
   el reflejo pasa justo en ese cruce. */
.intro-mark.con-polvo.armado .intro-polvo{opacity:0}
.intro-mark.con-polvo.armado .pieza{opacity:1}

.intro-shine{position:absolute;inset:0;overflow:hidden;
  -webkit-mask:url(/assets/logo-nfr.png) center/contain no-repeat;
          mask:url(/assets/logo-nfr.png) center/contain no-repeat}
.intro-shine::after{content:"";position:absolute;top:-15%;bottom:-15%;left:-55%;width:32%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);
  transform:skewX(-18deg);animation:sheen 1.4s ease 2s 1 forwards}
.intro-tagline{font-family:'Oswald',sans-serif;letter-spacing:8px;font-size:15px;color:var(--gold);
  opacity:0;animation:fadeUp .8s ease 3.3s forwards}
.intro-skip{position:absolute;bottom:34px;right:34px;z-index:3;background:none;border:0;color:var(--muted);
  cursor:none;font-size:14px;letter-spacing:1px}
.intro-skip:hover{color:var(--text)}
@keyframes encajar{
  0%{opacity:0;filter:blur(14px);transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot)) scale(var(--sc))}
  30%{opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}
}
/* El sacudón de cuando las piezas terminan de encajar */
@keyframes golpe{0%,100%{transform:none}22%{transform:translate3d(0,5px,0) scale(1.018)}55%{transform:translate3d(0,-2px,0) scale(.996)}}
@keyframes sheen{to{left:150%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .pieza{opacity:1;transform:none;filter:none;animation:none}
  .intro-mark,.onda,.brillo,.intro-shine::after{animation:none}
  .intro-tagline{opacity:1;animation:none}
  .intro-polvo{display:none!important}
  .intro-mark.con-polvo .pieza{opacity:1}
}

/* ===== HEADER ===== */
.header{position:sticky;top:0;z-index:100;padding-bottom:22px;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,9,.97) 0%,rgba(6,7,9,.9) 34%,rgba(6,7,9,.55) 68%,rgba(6,7,9,0) 100%);
  transition:.3s}
.header .header-in{pointer-events:auto}
.header-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand img{height:40px;display:block}
.nav{display:flex;gap:28px}
.nav a{color:var(--muted);font-weight:500;font-size:15px;position:relative;transition:.2s}
.nav a:hover{color:var(--text)}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--grad-gold);transition:.25s}
.nav a:hover::after{width:100%}
.header-cta{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:24px;cursor:pointer}

/* ===== HERO ===== */
.hero{position:relative;padding:90px 0 70px;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1;
  /* Se desvanece contra el fondo: si no, el video termina en un corte recto. */
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0,#000 15%,#000 46%,rgba(0,0,0,.6) 76%,transparent 100%),
    linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:
    linear-gradient(to bottom,transparent 0,#000 15%,#000 46%,rgba(0,0,0,.6) 76%,transparent 100%),
    linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* Velo oscuro arriba del video para que se lean el título y el menú */
body.has-hero-video .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,8,10,.72),rgba(8,8,10,.35) 45%,rgba(8,8,10,.8))}
body.has-hero-video .hero-in{position:relative;z-index:2}
body.has-hero-video .hero h1,
body.has-hero-video .hero-sub,
body.has-hero-video .eyebrow{text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero-glow{position:absolute;top:-25%;left:50%;transform:translateX(-50%);
  width:900px;height:700px;background:radial-gradient(circle,rgba(232,178,58,.16),transparent 62%);
  filter:blur(20px);pointer-events:none}
.hero-in{position:relative;text-align:center}
.eyebrow{letter-spacing:4px;font-size:13px;color:var(--gold);font-weight:600;margin-bottom:18px}
.hero h1{font-size:clamp(38px,6vw,72px);font-weight:700}
.hero h1 .gold{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold-2)}
.hero-sub{max-width:620px;margin:22px auto 30px;color:#fff;font-size:18px}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:56px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 24px;
  min-width:170px;max-width:230px;text-align:center;transition:transform .35s,border-color .35s}
.stat:hover{transform:translateY(-6px);border-color:rgba(232,178,58,.45)}
.stat b{display:block;font-family:'Oswald',sans-serif;font-size:34px;color:var(--gold-2)}
.stat span{display:block;color:#fff;font-size:14px;font-weight:600}
.stat small{display:block;margin-top:7px;color:var(--muted);font-size:12.5px;line-height:1.4}

/* ===== Aparición con movimiento al bajar ===== */
/* Solo se esconden si el JS está vivo: si fallara, todo se ve igual */
.js .reveal{opacity:0;transform:translateY(34px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.js .reveal.from-left{transform:translateX(-46px)}
.js .reveal.from-right{transform:translateX(46px)}
.js .reveal.in{opacity:1;transform:none}
.stats .stat:nth-child(1){transition-delay:.05s}
.stats .stat:nth-child(2){transition-delay:.18s}
.stats .stat:nth-child(3){transition-delay:.31s}
.reviews .review:nth-child(2){transition-delay:.14s}
.reviews .review:nth-child(3){transition-delay:.28s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== SECTION ===== */
.section{padding:80px 0}
.section-head{text-align:center;margin-bottom:40px}
.section-head h2{font-size:clamp(30px,4.5vw,46px)}
.section-head p{color:var(--muted);margin-top:10px}

/* ===== FILTERS ===== */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:22px}
.search{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:0 12px;flex:1;min-width:220px;color:var(--muted)}
.search input{background:none;border:0;outline:0;color:var(--text);padding:12px 0;width:100%;font-size:15px}
.filters select{background:var(--bg-2);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:12px 14px;font-size:14px;cursor:pointer;min-width:150px}
.count{color:var(--muted);font-size:14px;margin-bottom:18px;text-align:center}

/* ===== GRID / CARDS ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;perspective:1100px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s;cursor:none;display:flex;flex-direction:column;
  transform-style:preserve-3d;will-change:transform}
.card:hover{box-shadow:var(--shadow);border-color:rgba(232,178,58,.55)}
/* Cuanto más alto el translateZ, más se despega el contenido de la tarjeta y más
   se corre para los costados cuando la tarjeta gira. Bajo = movimiento suave. */
.card .card-img,.card .card-body,.card .card-foot{transform:translateZ(14px)}
/* Reflejo tipo vidrio (glass) al pasar el cursor */
.card::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:var(--radius);
  background:linear-gradient(125deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 16%,rgba(255,255,255,0) 40%);
  opacity:0;transition:opacity .35s;transform:translateZ(60px)}
.card:hover::after{opacity:1}
.card .card-badges{transform:translateZ(48px)}
/* Arranque: giro de llave */
.card.igniting{animation:ignShake .5s ease}
.card.igniting .card-img::before{content:"";position:absolute;inset:0;z-index:3;
  background:radial-gradient(circle at 50% 60%,rgba(255,240,200,.9),transparent 60%);
  animation:ignFlash .5s ease forwards}
@keyframes ignShake{0%,100%{}20%{transform:translateX(-3px) rotate(-.4deg)}40%{transform:translateX(3px) rotate(.4deg)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes ignFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.card-img{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,#22262e,#0f1115)}
.card-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.6,.2,1)}
/* Antes 1.06: sobre una foto de 300px de ancho eso son casi 20px de movimiento
   y era lo que más se notaba al pasar el mouse. */
.card:hover .card-img img{transform:scale(1.02)}
/* Brillo dorado que cruza la foto */
.card-img::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,225,160,.38),transparent);
  transform:skewX(-18deg);opacity:0}
.card:hover .card-img::after{opacity:1;animation:cardSheen .85s ease}
@keyframes cardSheen{0%{left:-70%}100%{left:130%}}
.card-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;z-index:4;
  display:flex;gap:5px;opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover .card-dots{opacity:1}
.card-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);transition:.25s}
.card-dots i.on{background:var(--gold);transform:scale(1.6)}
.card-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px}
.badge{font-size:11px;font-weight:700;letter-spacing:.5px;padding:5px 10px;border-radius:6px;text-transform:uppercase}
.badge-new{background:var(--grad-gold);color:#1a1206}
.badge-sold{background:#c0392b;color:#fff}
.badge-hot{background:#111;color:var(--gold-2);border:1px solid var(--gold)}
.card-body{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-title{font-family:'Oswald',sans-serif;font-size:20px;font-weight:600}
.card-title small{display:block;color:var(--muted);font-size:13px;font-family:'Inter';font-weight:500;margin-top:2px}
.card-specs{display:flex;flex-wrap:wrap;gap:8px}
.spec{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12px;color:var(--muted);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .3s,color .3s}
/* Los recuadritos ya no saltan: solo se les enciende el borde y el texto.
   Saltaban de a uno (los transition-delay) y era un desfile de cosas moviéndose. */
.card:hover .spec{border-color:rgba(232,178,58,.4);color:var(--text)}
.card-price{margin-top:auto}
.card-price b{font-family:'Oswald',sans-serif;font-size:26px;color:var(--text);display:inline-block;
  transform-origin:left center;transition:transform .3s ease,color .3s}
/* El precio ya no se agranda, solo se pone dorado. */
.card:hover .card-price b{color:var(--gold)}
.card-price small{display:block;color:var(--gold);font-size:13px}
.card-foot{border-top:1px solid var(--line);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-cta{display:flex;align-items:center;gap:6px;color:var(--gold);font-weight:600;font-size:14px}
.card-cta svg{transition:.2s}
.card:hover .card-cta svg{transform:translateX(4px)}
/* Favorito */
.card-fav{position:absolute;top:12px;right:12px;z-index:4;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:none;padding:0;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;
  backdrop-filter:blur(3px);transition:.2s}
.card-fav svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linejoin:round;transition:.2s}
.card-fav:hover{background:rgba(0,0,0,.6);color:#ff7a7a;border-color:#ff7a7a;transform:scale(1.08)}
.card-fav.on{color:#ff4d4d;border-color:#ff4d4d;background:rgba(255,77,77,.18)}
.card-fav.on svg{fill:currentColor;stroke:currentColor}
/* Comparar */
.card-compare{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:none;user-select:none}
.card-compare input{accent-color:var(--gold);width:15px;height:15px}
.card-compare.on{color:var(--gold)}
.card.comparing{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
#favToggle.on{background:rgba(255,90,90,.15);border-color:#ff5a5a;color:#ff8a8a}
#favToggle svg{fill:currentColor}
/* Barra comparador */
.compare-bar{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120%);z-index:180;
  display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--gold);
  border-radius:40px;padding:12px 18px;box-shadow:var(--shadow);transition:transform .3s ease}
.compare-bar.show{transform:translate(-50%,0)}
.compare-bar span{font-size:14px;color:var(--text)} .compare-bar b{color:var(--gold)}
/* Tabla comparativa */
.cmp-scroll{overflow-x:auto;margin-top:18px}
.cmp{width:100%;border-collapse:collapse;min-width:420px}
.cmp th,.cmp td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line);font-size:14px}
.cmp thead th{font-family:'Oswald',sans-serif;font-size:16px;vertical-align:bottom}
.cmp .cmp-lbl{text-align:left;color:var(--muted);font-weight:600}
.cmp-photo{aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin-bottom:8px;background:#14161a}
.cmp-photo img{width:100%;height:100%;object-fit:cover}
.cmp tbody tr:first-child td{color:var(--gold);font-weight:700;font-size:18px}
.empty{text-align:center;color:var(--muted);padding:40px}
.empty button{background:none;border:0;color:var(--gold);cursor:pointer;text-decoration:underline}

/* ===== CALIDAD ===== */
.calidad{background:radial-gradient(circle at 50% 0%,rgba(232,178,58,.10),transparent 60%),var(--bg-2)}
.calidad-in{max-width:720px;margin:0 auto;text-align:center}
.calidad-badge{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  background:var(--panel);border:1px solid var(--line);box-shadow:0 0 0 6px rgba(232,178,58,.08)}
.calidad h2{font-size:clamp(26px,4vw,40px)}
.calidad p{color:var(--muted);margin:16px auto 26px;font-size:18px;max-width:600px}

/* ===== BAND (financiación/contacto) ===== */
.band{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.band-in{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.band-in h2{font-size:clamp(28px,4vw,42px)}
.band-in p{color:var(--muted);margin-top:12px;font-size:17px}
.ticks{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:10px}
.ticks li{padding-left:28px;position:relative;color:var(--text)}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}
.sim{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.sim h3{font-size:22px;margin-bottom:18px}
.sim label{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;margin:16px 0 8px}
.sim label b{color:var(--gold-2)}
.sim input[type=range]{width:100%;accent-color:var(--gold)}
.sim-out{margin-top:24px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.sim-out span{color:var(--muted);font-size:14px}
.sim-out b{display:block;font-family:'Oswald',sans-serif;font-size:38px;color:var(--gold-2);margin:6px 0}
.sim-out small{color:var(--muted);font-size:12px}
#tasacionForm label{display:flex;flex-direction:column;gap:6px;justify-content:flex-start;
  color:var(--muted);font-size:13px;margin:12px 0 0}
#tasacionForm input{background:var(--bg-2);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:11px 13px;font-size:15px;font-family:inherit;width:100%}
#tasacionForm .cfg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){#tasacionForm .cfg-row{grid-template-columns:1fr}}

/* ===== FEATURES ===== */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:20px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;transition:.25s}
.feat:hover{transform:translateY(-5px);border-color:rgba(232,178,58,.4)}
.feat-ic{font-size:34px}
.feat h3{font-size:19px;margin:14px 0 8px}
.feat p{color:var(--muted);font-size:14px}

/* ===== ENTREGAS =====
   Las fotos del día que el cliente se lleva el auto. Son verticales (3:4), así que la
   tarjeta fija esa proporción y la foto se recorta sola: da igual con qué celular la
   sacaron, la grilla queda pareja. */
.entregas{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.entrega{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .35s,border-color .35s}
.entrega:hover{transform:translateY(-6px);border-color:rgba(232,178,58,.4)}
/* `height:auto` es lo que deja mandar a la proporción: sin eso gana el alto que viene
   escrito en el HTML (900x1200) y la foto sale altísima. */
.entrega img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--bg-2)}
.entrega figcaption{padding:14px 16px;color:var(--text);font-size:14.5px;line-height:1.45;text-align:center}
@media(max-width:1000px){.entregas{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.entregas{grid-template-columns:repeat(2,1fr);gap:14px}
  .entrega figcaption{padding:11px 12px;font-size:13.5px}}

/* ===== RESEÑAS ===== */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  /* El carrusel apaga y prende el bloque para cambiar de tanda: nada se desliza. */
  transition:opacity .38s ease}
.reviews.apagada{opacity:0}

/* Los puntitos del carrusel de reseñas */
.rev-dots{display:flex;justify-content:center;gap:9px;margin-top:24px}
.rev-dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:none;
  background:transparent;border:1px solid var(--line);transition:.28s}
.rev-dot:hover{border-color:var(--gold)}
.rev-dot.on{width:26px;border-radius:5px;border-color:transparent;background:var(--grad-gold)}
.review{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin:0;
  transition:transform .35s,border-color .35s}
.review:hover{transform:translateY(-6px);border-color:rgba(232,178,58,.4)}
.review .stars{color:var(--gold);letter-spacing:3px;font-size:16px;margin-top:14px}
.review blockquote{margin:12px 0 0;color:var(--text);font-size:16px;line-height:1.55}
.review figcaption{color:var(--text);font-weight:600;font-size:15px}
.review-top{display:flex;align-items:center;gap:12px}
.review-who small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.g-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--grad-gold);color:#1a1206;font-family:'Oswald',sans-serif;font-size:19px}

/* Resumen de Google */
.g-summary{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 28px;margin-bottom:26px}
.g-logo{flex-shrink:0}
.g-score{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.g-score>b{font-family:'Oswald',sans-serif;font-size:40px;color:var(--gold-2);line-height:1}
.g-score .stars{color:var(--gold);letter-spacing:3px;font-size:19px}
.g-score span{color:var(--muted);font-size:14px}
.g-score span b{color:#fff}
@media(max-width:760px){.g-summary{flex-direction:column;gap:16px;text-align:center}}
@media(max-width:820px){.reviews{grid-template-columns:1fr}}

/* ===== REDES ===== */
.socials{display:flex;gap:14px;justify-content:center;margin-bottom:16px}
.social{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--muted);border:1px solid var(--line);background:var(--panel);transition:.2s}
.social:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-3px)}

/* contacto */
.contact-line{color:var(--text)!important;margin:8px 0!important;font-size:16px!important}
.contact-line+.btn{margin-top:18px}
.map{aspect-ratio:16/11;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.map-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);
  background:repeating-linear-gradient(45deg,#12141a,#12141a 12px,#15181f 12px,#15181f 24px)}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--line);padding:40px 0;background:var(--bg-2)}
.footer-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.foot-logo{height:38px;opacity:.9}
.footer p{color:var(--muted);font-size:14px}
.footer .tiny{font-size:12px;opacity:.6}

/* ===== FLOAT WA ===== */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:90;width:58px;height:58px;border-radius:50%;
  background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.4);animation:pulse 2.4s infinite}
.wa-float:hover{transform:scale(1.08)}
.wa-float-img{width:60%;height:60%;object-fit:contain;display:block}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ===== MODAL ===== */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px)}
.modal-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;
  max-width:900px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);animation:modalIn .3s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:14px;right:14px;z-index:2;background:rgba(0,0,0,.5);border:1px solid var(--line);
  color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px}
.modal-gallery{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#22262e,#0f1115)}
.modal-gallery>img{width:100%;height:100%;object-fit:cover}
.gnav{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.5);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.gnav:hover{background:var(--gold);color:#111;border-color:var(--gold)}
.gprev{left:12px} .gnext{right:12px}
.gcount{position:absolute;top:12px;left:12px;z-index:3;background:rgba(0,0,0,.55);
  border-radius:20px;padding:5px 12px;font-size:13px;color:#fff}
.gcount b{color:var(--gold)}
.gthumbs{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:8px;
  padding:10px 12px;overflow-x:auto;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
.gthumb{flex:0 0 auto;width:64px;height:44px;border-radius:8px;overflow:hidden;
  border:2px solid transparent;background:none;padding:0;cursor:pointer;opacity:.7;transition:.2s}
.gthumb.active{border-color:var(--gold);opacity:1}
.gthumb img{width:100%;height:100%;object-fit:cover}
.modal-content{padding:26px}
.modal-content h2{font-size:30px}
.modal-content .card-price b{font-size:32px}
.modal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:20px 0}
.mspec{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.mspec span{display:block;color:var(--muted);font-size:12px}
.mspec b{font-size:16px}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot.ok{background:#2ecc71}.dot.mid{background:var(--gold)}.dot.bad{background:#e74c3c}
.modal-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* Botón Mercado Libre */
/* Autos parecidos dentro de la ficha */
.similares{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.similares h4{font-family:'Oswald',sans-serif;font-size:17px;color:var(--gold-2);margin-bottom:14px}
.sim-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sim-card{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;cursor:none;
  transition:transform .3s,border-color .3s}
.sim-card:hover{transform:translateY(-5px);border-color:rgba(232,178,58,.5)}
.sim-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.sim-info{display:block;padding:11px 13px 13px}
.sim-info b{display:block;color:var(--text);font-size:14px;line-height:1.3}
.sim-info small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.sim-info em{display:block;font-style:normal;font-family:'Oswald',sans-serif;
  font-size:17px;color:var(--gold-2);margin-top:6px}
@media(max-width:620px){.sim-list{grid-template-columns:1fr 1fr}}

.btn-ml{background:#fff;color:#2d3277;border:1px solid rgba(45,50,119,.18)}
.btn-ml:hover{filter:brightness(.98);transform:translateY(-2px)}
.btn-ml-logo{height:24px;width:auto;display:block;flex-shrink:0}
.btn-ico{height:20px;width:auto;display:block;flex-shrink:0}
/* Calculadora dentro de la ficha */
.ficha-calc{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:18px 0}
.ficha-calc h4{font-family:'Oswald';font-size:16px;color:var(--gold-2);margin-bottom:10px}
.ficha-calc label{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;margin:14px 0 7px}
.ficha-calc label b{color:var(--gold-2)}
.ficha-calc input[type=range]{width:100%;accent-color:var(--gold)}
.fc-out{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;text-align:center}
.fc-out span{color:var(--muted);font-size:13px}
.fc-out b{display:block;font-family:'Oswald',sans-serif;font-size:32px;color:var(--gold-2);margin:4px 0}
.fc-out small{color:var(--muted);font-size:12px}
.fc-usado{display:flex;align-items:flex-start;gap:9px;margin-top:16px;color:var(--text);font-size:14px;cursor:none;line-height:1.35}
.fc-usado input{accent-color:var(--gold);width:17px;height:17px;margin-top:1px;flex-shrink:0}

/* ===== CURSOR LLAVE NFR ===== */
a,button,.btn,.card,.nav a,.card-cta,label,.stat,.feat{cursor:none}
/* El punto de click real es la PUNTA de la llave: el pivote (transform-origin)
   se pone en la punta y se traslada ahi, asi la punta queda fija en el puntero. */
#cursor{position:fixed;top:0;left:0;width:26px;z-index:3000;pointer-events:none;
  transform-origin:50% 1%;
  transform:translate(-50%,-1%) rotate(-16deg);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),width .2s,opacity .25s;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
#cursor img{width:100%;display:block}
#cursor .key-front{display:none}
#cursor.hot{width:32px;transform:translate(-50%,-1%) rotate(-6deg)}
#cursor.turn{transform:translate(-50%,-52%) rotate(94deg) scale(1.08)}
#cursor.hidden{opacity:0}
/* Insertada en la cerradura: cambia a la VISTA FRONTAL (rectangulo negro),
   centrado en la cerradura, y gira sobre su propio centro (encendido) */
#cursor.inserting{width:16px;transform-origin:50% 50%;
  transition:left .32s cubic-bezier(.5,0,.2,1),top .32s cubic-bezier(.5,0,.2,1),transform .4s cubic-bezier(.34,1.2,.5,1),width .2s;
  transform:translate(-50%,-50%) rotate(0deg)}
#cursor.inserting .key-side{display:none}
#cursor.inserting .key-front{display:block}
#cursor.inserting.turn{transform:translate(-50%,-50%) rotate(90deg)}

/* ===== CERRADURA (contacto) en la foto del auto ===== */
.keyhole{position:absolute;left:50%;top:50%;z-index:6;pointer-events:none;
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#26282c 0 34%,#050505 55%,#000 100%);
  box-shadow:0 0 0 1.5px rgba(232,178,58,.55),0 0 0 3px rgba(0,0,0,.6),0 2px 8px 2px rgba(0,0,0,.7);
  transform:translate(-50%,-50%) scale(.3);opacity:0;animation:holeIn .28s ease forwards}
.keyhole::after{content:"";position:absolute;left:50%;top:54%;width:3px;height:7px;
  background:#000;border-radius:2px;transform:translate(-50%,-50%)}
@keyframes holeIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (hover:none),(pointer:coarse){
  #cursor{display:none}
  body{cursor:auto}
  a,button,.btn,.card,.nav a,.card-cta,label,.stat,.feat{cursor:pointer}
}

/* ===== RESPONSIVE ===== */
@media(max-width:820px){
  .nav{position:fixed;top:72px;left:0;right:0;background:var(--bg-2);flex-direction:column;
    padding:8px 20px 14px;gap:0;border-bottom:1px solid var(--line);transform:translateY(-140%);transition:.3s;z-index:99}
  /* Cada renglón ocupa TODO su alto, no solo el texto. Con `gap` el espacio entre
     items no pertenecía a ningún link: el dedo caía ahí y no pasaba nada. Ahora el
     área que responde al toque es de 48 px, que es lo mínimo cómodo en un celular. */
  .nav a{display:flex;align-items:center;min-height:48px;padding:0 4px}
  .nav a::after{bottom:10px;left:4px}
  .nav.open{transform:translateY(0)}
  .nav-toggle{display:block}
  .band-in,.features{grid-template-columns:1fr}
  .features{gap:14px}
}
@media(max-width:520px){
  .stat{min-width:130px;padding:16px 18px}
  .peritaje ul{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════
   PÁGINAS DE ADENTRO (Nosotros, Financiación, Vendé, Experiencia NFR)
   Las arma armar-paginas.py. Reusan casi todo lo de arriba; acá va
   solo lo que esas páginas tienen y la portada no.
   ═══════════════════════════════════════════════════════════════════ */

/* En las internas no está la intro ni el hero con video: el encabezado
   arranca visible y pegado arriba desde el primer momento. */
.interna .header{position:sticky;top:0;opacity:1;transform:none}
.interna .nav a.aqui{color:var(--gold)}
.interna .nav a.aqui::after{width:100%}

.pagina-hero{padding:120px 0 46px;position:relative}
.pagina-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 120% at 50% 0,rgba(232,178,58,.13),transparent 70%);
}
.pagina-hero h1{
  font-family:'Oswald',sans-serif;font-weight:700;line-height:1.05;
  font-size:clamp(2.1rem,6vw,3.6rem);text-transform:uppercase;letter-spacing:.5px;
}
.pagina-sub{color:var(--muted);max-width:640px;margin-top:14px;font-size:1.08rem}

.migas{font-size:.82rem;color:var(--muted);margin-bottom:18px}
.migas a:hover{color:var(--gold)}
.migas span{margin:0 6px;opacity:.5}
.migas b{color:var(--text);font-weight:600}

.bloque-titulo{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(1.4rem,3.4vw,2rem);letter-spacing:.5px;margin-bottom:26px;
}
.bloque-titulo::after{
  content:"";display:block;width:54px;height:3px;margin-top:12px;border-radius:3px;
  background:var(--grad-gold);
}
.interna .section{padding:56px 0}

.prosa{max-width:74ch}
.prosa p{margin-bottom:16px;color:#d7dade;font-size:1.03rem}
.prosa p:last-child{margin-bottom:0}
.prosa b{color:var(--text)}
.prosa a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* Lo que falta que confirme el dueño. Se ve amarillo A PROPÓSITO: la página
   no se publica hasta que no quede ninguno. */
.confirmar{
  background:rgba(232,178,58,.16);color:var(--gold-2);
  border:1px dashed rgba(232,178,58,.55);border-radius:6px;
  padding:1px 7px;font-size:.86em;font-weight:600;
}

/* Pasos numerados */
.pasos{list-style:none;counter-reset:paso;display:grid;gap:14px;margin-top:8px}
.pasos li{
  counter-increment:paso;position:relative;padding:16px 18px 16px 62px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .2s,transform .2s;
}
.pasos li:hover{border-color:rgba(232,178,58,.4);transform:translateX(3px)}
.pasos li::before{
  content:counter(paso);position:absolute;left:16px;top:16px;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-gold);color:#1a1206;font-weight:700;font-size:.92rem;
  font-family:'Oswald',sans-serif;
}
.pasos h3{font-size:1.02rem;margin-bottom:4px}
.pasos p{color:var(--muted);font-size:.96rem}

/* Lista con tilde dorada */
.grilla-check{
  list-style:none;display:grid;gap:10px;margin:20px 0 6px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.grilla-check li{
  position:relative;padding:11px 14px 11px 40px;color:#d7dade;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
}
.grilla-check li::before{
  content:"✓";position:absolute;left:14px;top:11px;color:var(--gold);font-weight:700;
}

.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.dos-tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.tarjeton{
  padding:26px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);transition:transform .22s,border-color .22s;
}
.tarjeton:hover{transform:translateY(-4px);border-color:rgba(232,178,58,.45)}
.tarjeton.destacada{background:linear-gradient(160deg,rgba(232,178,58,.1),var(--panel) 60%);border-color:rgba(232,178,58,.35)}
.tarjeton h3{font-family:'Oswald',sans-serif;font-size:1.3rem;text-transform:uppercase;margin-bottom:10px}
.tarjeton p{color:var(--muted)}

.sim-grande{width:100%}

/* Preguntas frecuentes */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:0 18px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 30px 16px 0;font-weight:600;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:2px;top:13px;color:var(--gold);
  font-size:1.5rem;line-height:1;transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 18px;border-top:1px solid var(--line);padding-top:14px}
.faq details p a{color:var(--gold);text-decoration:underline}

.centrado{text-align:center;margin-top:28px}
.cierre-in{text-align:center}
.cierre-in h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(1.5rem,4vw,2.3rem)}
.cierre-in p{color:var(--muted);margin:10px 0 22px}
.cierre-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.foot-nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:14px 0 6px}
.foot-nav a{color:var(--muted);font-size:.9rem}
.foot-nav a:hover{color:var(--gold)}

/* En la portada, el link para irse a la página con el detalle completo */
.ver-mas{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  color:var(--gold);font-weight:600;font-size:.95rem;
}
.ver-mas::after{content:"→";transition:transform .2s}
.ver-mas:hover::after{transform:translateX(4px)}

@media(max-width:860px){
  .dos-columnas,.dos-tarjetas{grid-template-columns:1fr}
  .pagina-hero{padding:100px 0 34px}
}
/* Cuando se salta a un bloque con un link, que no quede tapado por el encabezado pegado. */
.interna .section,.interna .pagina-hero{scroll-margin-top:90px}
/* Aclaración chica arriba de un formulario (ej: por qué pedimos la patente) */
.sim-nota{color:var(--muted);font-size:.9rem;margin:-4px 0 14px}
/* El cotizador de la ficha es solo para el comprador: se aclara y el "entrego mi usado"
   —que sí viaja en el mensaje— vive en su propio bloque, aparte de la calculadora. */
.fc-privado{color:var(--muted);font-size:12px;margin-top:12px;text-align:center;font-style:italic}
.ficha-consulta{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 18px}
.ficha-consulta .fc-usado{margin-top:0}
/* Descripción del auto en la ficha (reemplaza al viejo bloque de peritaje, que
   mostraba una lista FIJA igual para los 87 autos). El texto lo arma
   descripcionDe() en script.js con los datos reales de cada unidad. */
.ficha-desc{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:18px 0}
.ficha-desc p{color:#d7dade;line-height:1.6}
.ficha-nfr{list-style:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px}
.ficha-nfr li{position:relative;padding-left:24px;color:var(--muted);font-size:14px}
.ficha-nfr li::before{content:"✓";position:absolute;left:4px;color:var(--gold);font-weight:700}
/* "0 km" en la tarjeta: NFR no vende solo usados. Va al lado de "Nuevo ingreso",
   que significa otra cosa (que entró hace poco al salón, no que el auto sea nuevo). */
.badge-cero{background:#f4f5f7;color:#0a0a0c;border:1px solid #fff}
/* Botón "Ver todo el stock" debajo de la muestra de la portada. El listado completo
   con filtros vive en /stock: la portada solo muestra unos pocos para no cargarla. */
.ver-todo{text-align:center;margin-top:34px}