/* Fuentes incrustadas (woff2 base64) — el boceto funciona 100% offline */
@font-face{font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque.woff2) format('woff2');}
@font-face{font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque.woff2) format('woff2');}
@font-face{font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-italic.woff2) format('woff2');}
@font-face{font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-italic.woff2) format('woff2');}
@font-face{font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-italic.woff2) format('woff2');}
@font-face{font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans.woff2) format('woff2');}
@font-face{font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans.woff2) format('woff2');}
@font-face{font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans.woff2) format('woff2');}
@font-face{font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono.woff2) format('woff2');}
@font-face{font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono.woff2) format('woff2');}

/* =========================================================
   RUBAL 16 — dirección estética: industrial refinado / editorial.
   Palabra: PRECISIÓN. No azul concesionario, no gradiente morado,
   no plantilla Tailwind, no glassmorphism, no lorem ipsum.
   ========================================================= */

/* ===== 1. TOKENS ===== */
:root{
  /* Paleta v3 "asfalto y matrícula" — colores del sector:
     asfalto de carretera, azul de matrícula europea (CTA/confianza),
     ámbar de intermitente (reservado/urgencia), verde de semáforo (disponible) */
  /* v5: colores de MARCA REAL de RUBAL 16 AUTOMOCIÓN (muestreados de su logo) */
  --ink:   #101013;   /* negro del logo */
  --ink-2: #191A1E;
  --ink-3: #25262B;
  --bone:  #F3F0EA;   /* hueso cálido */
  --bone-2:#E9E4D9;
  --lima:  #E08A4E;   /* naranja Rubal (del logo) — acento primario */
  /* El naranja de marca sobre fondo claro se queda en 2,6:1 y no hay tamano
     de letra que lo salve. Este es el mismo tono tostado, que pasa AA sobre
     hueso: se usa SOLO para texto naranja sobre claro, nunca para rellenos. */
  --lima-texto: #A0511A;
  --oxido: #E2544A;   /* rojo señal — vendido/urgencia */
  --verde: #35C06E;   /* verde semáforo — disponible; reservado va en --lima (ámbar) */
  /* Se oscurecio de #767068 a #6A645C: sobre el hueso daba 4,31:1, por
     debajo del minimo de accesibilidad, y es el gris de texto secundario de
     casi toda la web (349 usos sobre fondo claro y NINGUNO sobre oscuro,
     comprobado recorriendo las cinco vistas). Ahora da 5,16:1. */
  --humo:  #6A645C;
  --humo-2:#989187;
  --linea: #2B2C30;
  --linea-bone:#DDD6C9;

  --f-display:'Bricolage Grotesque', Georgia, serif;
  --f-serif:'Fraunces', Georgia, serif;
  --f-text:'Instrument Sans', -apple-system, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --shadow: 0 24px 60px -24px rgb(16 16 19 / .5);
  --shadow-bone: 0 24px 50px -26px rgb(16 16 19 / .35);

  --grain: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== 2. RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit}
ul,ol{list-style:none}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  font-family:var(--f-text);
  background:var(--bone);
  color:var(--ink);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main#app{flex:1;min-width:0}

::selection{background:var(--lima);color:#141414}

:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:2px}

/* ===== 3. TIPOGRAFÍA BASE ===== */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.02}
strong{font-weight:600}
em{font-style:italic}
.mono, .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ===== 4. LABELS UPPERCASE (identidad) ===== */
.label{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--humo);
  display:inline-block;
}
.label--on-ink{color:var(--humo-2)}
.label--lima{color:var(--lima)}
.label--oxido{color:var(--oxido)}

.sec-head{display:flex;align-items:flex-end;gap:1.25rem;margin-bottom:2.5rem}
/* v6: el 01 / 02 gigante en gris se va. Cliché de landing generada. */
.sec-num{display:none}
.sec-head{align-items:flex-end;gap:1.25rem;margin-bottom:2.25rem}

/* ===== 5. BOTONES ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1.05rem 1.7rem;border-radius:8px;
  font-family:var(--f-text);font-weight:600;font-size:.92rem;
  letter-spacing:.01em;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px}
/* v6: la flecha se va de todos los CTA — era el tell nº1 de plantilla. */
.btn .btn-arrow{display:none}
.btn:active{transform:scale(.98)}
.btn[hidden]{display:none}

.btn-primary{background:var(--lima);color:#141414}
.btn-primary:hover{background:#EE9A5C}
/* v7 · Motorway: sobre fondo claro el primario es negro, no naranja */
.bone .btn-primary{background:var(--ink);color:var(--bone)}
.bone .btn-primary:hover{background:#26262B}

/* v6 · Motorway: el segundo CTA deja de ser un botón gemelo y pasa a enlace.
   Dos píldoras iguales lado a lado no son jerarquía, son plantilla. */
.btn-secondary{
  background:transparent;border-color:transparent;border-bottom:1.5px solid currentColor;
  border-radius:0;padding:.5rem .15rem;font-weight:500;
}
.btn-secondary:hover{border-bottom-color:var(--lima);color:var(--lima)}
.ink .btn-secondary{color:var(--bone)}
.bone .btn-secondary{color:var(--ink)}

.btn-block{width:100%}
@media (max-width:480px){
  .btn-block{white-space:normal;text-align:center;line-height:1.3;padding-top:.85rem;padding-bottom:.85rem}
}

/* ===== 6. LINKS SUBRAYADO ANIMADO ===== */
.link-u{
  position:relative;text-decoration:none;font-weight:500;
  background-image:linear-gradient(var(--lima),var(--lima));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s var(--ease);
  padding-bottom:2px;
}
.link-u:hover{background-size:100% 2px}

/* ===== 7. CHIP DE ESTADO DE PLAZA (componente de firma) ===== */
.chip-plaza{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
}
.chip-dot{width:10px;height:10px;border-radius:2px;flex:none;display:inline-block}
.chip-plaza[data-estado="disponible"] .chip-dot{background:var(--verde)}
.chip-plaza[data-estado="reservado"] .chip-dot{background:var(--lima)}
.chip-plaza[data-estado="vendido"] .chip-dot{background:var(--oxido)}
.chip-plaza[data-estado="libre"] .chip-dot{background:transparent;border:1.5px dashed var(--humo-2)}

/* ===== 8. COCHECARD COMPARTIDA ===== */
/* v19 · La tarjeta vuelve a ser un objeto. Con 26 coches sobre fondo hueso las
   fotos se fundían unas con otras y no se veía dónde acababa un coche y
   empezaba el siguiente. Ahora cada coche va sobre SU lámina: papel más claro
   que el fondo, filo cálido, sombra en dos capas teñidas de tinta (nunca negro
   puro) y radios distintos arriba y abajo. Al pasar el ratón, la lámina se
   levanta y el filo se tiñe del naranja de la casa. */
.card-coche{
  display:flex;flex-direction:column;height:100%;
  position:relative;text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,#FFFDFA 0%,#F7F3EB 100%);
  border:1px solid #E2DACB;
  border-radius:16px 16px 10px 10px;
  padding:.55rem .55rem 0;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .9),
    0 1px 2px rgb(58 46 32 / .13),
    0 7px 14px -9px rgb(58 46 32 / .3),
    0 22px 36px -18px rgb(58 46 32 / .5);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card-coche:hover{
  transform:translateY(-6px);
  border-color:rgb(224 138 78 / .5);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    0 2px 5px rgb(58 46 32 / .14),
    0 12px 20px -10px rgb(58 46 32 / .3),
    0 38px 52px -22px rgb(58 46 32 / .55);
}
/* el focus global aplica border-radius:2px — la tarjeta conserva el suyo */
.card-coche:focus-visible{border-radius:16px 16px 10px 10px;outline-offset:4px}
.card-coche .foto{
  aspect-ratio:4/3;background:linear-gradient(150deg,var(--ink),var(--ink-3) 70%);
  position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:11px 11px 4px 4px;flex:none;
  /* filo de pelo: las fotos de estudio son marfil y sin él se funden con la lámina */
  box-shadow:inset 0 0 0 1px rgb(58 46 32 / .09);
}
.card-coche .foto .inicial{
  font-family:var(--f-display);font-weight:800;font-size:6.5rem;
  color:transparent;-webkit-text-stroke:1.5px rgb(238 241 245 / .22);
}
.card-coche .foto .car-side{width:82%;max-width:300px;transition:transform .45s var(--ease)}
.card-coche .foto .foto-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card-coche:hover .foto .foto-img{transform:scale(1.04)}
.card-coche:hover .foto .car-side{transform:translateX(6px)}
.foto-slot-tag{
  position:absolute;right:.7rem;bottom:.55rem;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--humo-2);opacity:.75;
}
/* v19 · Punto de estado SIN texto: la plaza ya no grita dentro de la foto.
   Queda el punto, y late — el coche está vivo en la nave ahora mismo. En el
   stock sigue siendo el atajo al plano (la plaza se cuenta al pasar el ratón). */
.card-coche .foto .chip-punto{
  position:absolute;left:.55rem;bottom:.55rem;top:auto;right:auto;z-index:3;
  width:24px;height:24px;padding:0;gap:0;border-radius:50%;
  display:grid;place-items:center;
  background:rgb(255 253 250 / .82);border:1px solid rgb(58 46 32 / .12);
  backdrop-filter:blur(5px);box-shadow:0 2px 6px -2px rgb(58 46 32 / .35);
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.card-coche .foto .chip-punto .chip-dot{width:8px;height:8px;border-radius:50%;position:relative}
.card-coche .foto .chip-punto .chip-dot::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0;
}
/* solo late lo que está disponible; reservado y vendido se quedan quietos */
.card-coche .foto .chip-punto[data-estado="disponible"] .chip-dot{animation:latido 2.2s var(--ease) infinite}
.card-coche .foto .chip-punto[data-estado="disponible"] .chip-dot::after{animation:onda 2.2s var(--ease) infinite}
@keyframes latido{
  0%,42%,100%{transform:scale(1)}
  10%{transform:scale(1.5)}
  20%{transform:scale(1)}
  30%{transform:scale(1.32)}
}
@keyframes onda{
  0%{transform:scale(1);opacity:.55}
  65%,100%{transform:scale(3.6);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .card-coche .foto .chip-punto .chip-dot,
  .card-coche .foto .chip-punto .chip-dot::after{animation:none}
  .card-coche{transition:none}
  .card-coche:hover{transform:none}
}
/* Pegatina de etiqueta ambiental DGT — arriba a la izquierda, superpuesta sobre
   la foto con la forma redonda y el aro blanco de la pegatina real del
   parabrisas. Se reconoce antes de leerla. */
.chip-etiqueta{
  position:absolute;left:.6rem;top:.6rem;z-index:3;
  width:42px;height:42px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--f-mono);line-height:1;color:#fff;
  background:#0F6FBF;border:2px solid #fff;
  box-shadow:0 4px 12px -3px rgb(16 16 19 / .65), inset 0 -7px 12px -7px rgb(0 0 0 / .5);
  transition:transform .5s var(--ease);
}
.card-coche:hover .chip-etiqueta{transform:rotate(-5deg) scale(1.07)}
.chip-etiqueta .et-let{font-size:1.12rem;font-weight:700;letter-spacing:-.02em}
.chip-etiqueta .et-dgt{font-size:.4rem;letter-spacing:.16em;margin-top:.2rem;opacity:.92}
.chip-etiqueta[data-et="ECO"]{background:linear-gradient(115deg,#0F6FBF 0 50%,#1E9E57 50% 100%)}
.chip-etiqueta[data-et="ECO"] .et-let{font-size:.72rem;letter-spacing:.02em}
/* Verde y amarillo de la DGT, pero legibles: el verde daba 3,43:1 con texto
   blanco y el amarillo 2,21:1. El verde se oscurece y el amarillo pasa a
   texto en tinta, que ademas es como es la pegatina de verdad. */
.chip-etiqueta[data-et="C"]{background:#14743F}
.chip-etiqueta[data-et="B"]{background:#E4A21A;color:#141414}
.chip-etiqueta[data-et="B"] .et-let,
.chip-etiqueta[data-et="B"] .et-dgt{text-shadow:none}
/* el cuerpo estira: en una fila, todas las láminas miden lo mismo y todos los
   precios caen a la misma línea, lleven sello o no */
.card-coche .body{padding:.95rem .35rem 1.05rem;flex:1;display:flex;flex-direction:column}
/* v22 · Justo debajo de la foto, una linea que dice QUE coche es. Quien
   recorre la parrilla de 26 tarjetas ve marca, modelo y numeros, pero no si
   el coche le sirve; esta linea lo resuelve sin abrir la ficha. Va en la
   serif en cursiva, como el pie de foto de una revista, para que no compita
   con el nombre, y se corta a dos lineas: asi todas las tarjetas de una fila
   siguen alineando el precio. */
.card-coche .card-gancho{
  font-family:var(--f-serif);font-style:italic;font-size:.83rem;line-height:1.42;
  color:var(--humo);margin:0 0 .6rem;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.84em;
}
.card-coche:hover .card-gancho{color:var(--ink-3)}
/* v19 · "Muy buen precio" sale de la foto (tapaba el coche) y baja junto al
   precio, que es donde significa algo: pastilla mono con el naranja de la casa,
   filo fino y una flecha que baja. */
.card-coche .tag-precio{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;margin-top:0;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:#9A5620;background:linear-gradient(180deg,rgb(224 138 78 / .18),rgb(224 138 78 / .07));
  border:1px solid rgb(224 138 78 / .45);border-radius:999px;
  padding:.34rem .7rem .34rem .52rem;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .65);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.card-coche:hover .tag-precio{border-color:var(--lima);background:rgb(224 138 78 / .2)}
.card-coche .tag-precio svg{width:13px;height:13px;flex:none;color:#B76A2C}
/* v20 · Misma pastilla, sin color: las tarjetas sin sello no dejan un hueco
   raro encima del precio, y de paso el cambio se lee de un vistazo (es de lo
   primero que se pregunta). El naranja se reserva para el sello de precio. */
.card-coche .tag-neutro{
  align-self:flex-start;display:inline-flex;align-items:center;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--humo);background:rgb(58 46 32 / .04);
  border:1px solid rgb(58 46 32 / .16);border-radius:999px;padding:.34rem .7rem;
}
/* v20 · El nombre del coche pasa a la serif de la casa, la misma con la que lo
   escribe su ficha (.vf-marca-modelo): al hacer clic en la tarjeta la
   tipografia no cambia. La version se queda en la de texto, para que el
   contraste serif/sans separe el nombre del detalle. */
.card-coche h3{font-family:var(--f-serif);font-size:1.12rem;letter-spacing:-.008em;font-weight:600;line-height:1.18}
.card-coche:hover h3{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--lima)}
/* v6: la versión deja de ser un dato suelto y se lee como frase escrita */
.card-coche .version{color:var(--humo);font-size:.84rem;margin-top:.25rem;line-height:1.45}
.card-coche .meta{display:flex;gap:.7rem;font-family:var(--f-mono);font-size:.7rem;color:var(--humo);
  margin-top:.35rem;font-variant-numeric:tabular-nums;flex-wrap:wrap}
/* Sello de kilometraje certificado: el numero manda y el check solo lo respalda,
   asi que va del color del texto y no compite con los chips de la foto. El texto
   "certificados" existe para lector de pantalla; en pantalla lo dice el title. */
.km-cert{display:inline-flex;align-items:center;gap:.28em;white-space:nowrap}
.km-cert-ico{display:inline-flex;align-items:center;color:var(--verde)}
.km-cert-ico svg{width:1.05em;height:1.05em;display:block}
.km-cert-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* v6: sin línea divisoria ni bloque de precio. Precio y cuota, una línea. */
/* v20 · El precio se anclaba al fondo con un hueco delante en las tarjetas sin
   sello, y parecia suelto. Ahora precio y sello viven en un pie: el precio va
   siempre el ultimo —asi todas las tarjetas de una fila lo alinean— y un filo
   de pelo justo encima le da suelo. El sello, cuando lo hay, queda por encima
   de ese filo. */
.card-coche .pie{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;width:100%}
.card-coche .precio-row{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;
  margin-top:0;padding-top:.7rem;border-top:1px solid rgb(58 46 32 / .13)}
/* v21 · Manda la cuota: es como se compra un coche de ocasion hoy y es la
   tesis de la casa. El precio al contado no se esconde —va justo debajo, se
   lee entero— pero deja de ser el numero grande. */
.card-coche .cuota{font-family:var(--f-mono);display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.card-coche .cuota b{font-size:1.2rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.card-coche .cuota-nota{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--humo)}
.card-coche .precio-linea{font-family:var(--f-mono);font-size:.68rem;color:var(--humo);font-variant-numeric:tabular-nums}
.card-coche .precio{font-weight:600;color:var(--humo)}

/* ===== 9. INPUT MATRÍCULA (elemento icónico) ===== */
.plate{
  position:relative;display:flex;align-items:stretch;background:linear-gradient(180deg,#FFFFFF 0%,#F5F3EC 100%);border:2px solid var(--ink);
  border-radius:10px;overflow:hidden;width:100%;max-width:360px;aspect-ratio:520/110;flex:none;
  box-shadow:inset 0 2px 5px rgb(0 0 0 / .16), inset 0 -1px 0 rgb(255 255 255 / .7), 0 14px 26px -18px rgb(0 0 0 / .4);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.plate:focus-within{
  transform:scale(1.015);border-color:var(--lima);
  box-shadow:inset 0 2px 5px rgb(0 0 0 / .16), inset 0 -1px 0 rgb(255 255 255 / .7), 0 0 0 4px rgb(224 138 78 / .2), 0 14px 30px -12px rgb(224 138 78 / .6);
}
.plate__band{
  flex:0 0 clamp(40px,14%,52px);background:linear-gradient(180deg,#0039A6 0%,#002D82 100%);
  display:flex;align-items:center;justify-content:center;padding:7% 5px;
  position:relative;overflow:hidden;
}
.plate__band::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(255 255 255 / .22),transparent 45%);
  pointer-events:none;
}
.plate__euro{position:relative;z-index:1;display:block;width:64%;max-width:23px;height:auto}
.plate__field{
  flex:1;min-width:0;border:0;background:transparent;
  font-family:var(--f-mono);font-weight:700;font-size:clamp(1.55rem,4.8vw,2.05rem);text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink);padding:0 .9rem;text-align:center;
}
.plate__field:focus{outline:none}
.plate__field::placeholder{color:#C7C2B3}
.plate.is-error{border-color:var(--oxido)}
.plate.is-error:focus-within{box-shadow:inset 0 2px 5px rgb(0 0 0 / .16), inset 0 -1px 0 rgb(255 255 255 / .7), 0 0 0 4px rgb(226 84 74 / .18), 0 14px 30px -12px rgb(226 84 74 / .5)}
.cta-llamar-fijo{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;align-items:center;justify-content:center;gap:.6rem;background:var(--lima);color:#141414;font-weight:700;font-size:1.02rem;padding:.95rem 1rem calc(.95rem + env(safe-area-inset-bottom));text-decoration:none;letter-spacing:.01em;box-shadow:0 -8px 24px rgb(0 0 0 / .35)}
.cta-llamar-fijo:active{background:#C87A42}
@media (max-width:760px){
  .cta-llamar-fijo{display:flex}
  body{padding-bottom:60px}
}

/* ===== 10. MARQUESINA (componente de firma) ===== */
/* v6: la marquesina de claims se va. Repetía lo que ya dice el hero
   y el scroll infinito con guiones es firma de plantilla. */
.marquesina{display:none}
.marquesina--off{
  overflow:hidden;background:var(--ink);border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);padding:.9rem 0;
}
.marquesina__track{
  display:flex;width:max-content;gap:0;
  animation:marquee 26s linear infinite;
  font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--humo-2);font-size:.78rem;
}
.marquesina__track span{white-space:nowrap;padding-right:1.4rem}
.marquesina__track span b{color:var(--lima);font-weight:400;padding-right:1.4rem}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .marquesina__track{animation:none} }

/* ===== 11. INK / BONE / GRAIN ===== */
.ink{background:var(--ink);color:var(--bone);position:relative;isolation:isolate}
.ink::before{
  content:'';position:absolute;inset:0;background-image:var(--grain);
  opacity:.035;pointer-events:none;mix-blend-mode:overlay;z-index:0;
}
.ink a{color:inherit}
/* OJO con el orden: ".ink a" (0,1,1) pesa mas que ".btn-primary" (0,1,0) y
   va despues, asi que dentro de cualquier seccion oscura un boton primario
   que fuese un <a> perdia su texto negro y heredaba el hueso: hueso sobre
   naranja son 2,3:1, practicamente ilegible, y le pasaba al boton principal
   de la portada. Se devuelve el color con la misma especificidad. */
.ink a.btn-primary{color:#141414}
.bone a.btn-primary{color:var(--bone)}
.bone{background:var(--bone);color:var(--ink);position:relative}
.ink .humo, .ink .label{color:var(--humo-2)}

/* ===== 12. TOPBAR ===== */
.topbar{
  position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem 2rem;padding:1.15rem clamp(1.25rem,4vw,3rem);background:var(--ink);
  border-bottom:1px solid var(--linea);
}
.logo{font-family:var(--f-display);font-weight:800;font-size:1.35rem;color:var(--bone);
  text-decoration:none;letter-spacing:-.02em}
.logo .n7{color:var(--lima)}
.logo-img-wrap{flex:none;line-height:0}
.logo-img{
  height:62px;width:auto;display:block;
  filter:drop-shadow(0 0 12px rgb(224 138 78 / .25));
  transition:filter .35s var(--ease);
}
.logo-img-wrap:hover .logo-img{filter:drop-shadow(0 0 18px rgb(224 138 78 / .4))}
.footer .logo-img{height:40px;filter:none}
.nav-primary{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.1rem)}
/* v18: el logo más grande deja menos hueco en tablet (~1000-1030px) y el nav
   llegaba a partir texto en dos líneas ahí; se cierra el gap en esa franja
   en vez de encoger el logo. */
@media (max-width:1100px){
  .nav-primary{gap:clamp(.6rem,1.4vw,1.3rem)}
}
.nav-primary a{
  font-family:var(--f-text);font-weight:500;font-size:.86rem;color:var(--humo-2);
  text-decoration:none;position:relative;padding-bottom:5px;letter-spacing:.03em;
  transition:color .25s var(--ease);
}
.nav-primary a::after{
  content:'';position:absolute;left:50%;right:50%;bottom:0;height:2px;background:var(--lima);
  transition:left .32s var(--ease), right .32s var(--ease);
}
.nav-primary a:hover, .nav-primary a[aria-current="page"]{color:var(--bone)}
.nav-primary a:hover::after, .nav-primary a[aria-current="page"]::after{left:0;right:0}

.topbar-ctas{display:flex;align-items:center;gap:.7rem;flex:none}
.btn-tel{
  display:inline-flex;align-items:center;gap:.55rem;border:1.5px solid var(--linea);
  color:var(--humo-2);text-decoration:none;padding:.6rem 1.05rem;border-radius:8px;
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.03em;flex:none;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn-tel svg{width:15px;height:15px;flex:none}
.btn-tel:hover{border-color:var(--lima);color:var(--bone);transform:translateY(-1px)}
.btn-compact{padding:.68rem 1.3rem;font-size:.84rem}

/* ---- Franja superior de promesas (idea Clicars) ---- */
.promo-bar{background:var(--ink-2,#1A1A1F);border-bottom:1px solid var(--linea);overflow:hidden}
.promo-track{display:flex;align-items:center;justify-content:center;gap:2.5rem;padding:.5rem 1rem}
.promo-item{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--humo-2,#9A948B);white-space:nowrap}
.promo-item::before{content:'✓';color:var(--lima);margin-right:.4rem}
@media (max-width:860px){
  .promo-track{position:relative;height:1.5rem;padding:.45rem 1rem;display:block}
  .promo-item{position:absolute;left:0;right:0;text-align:center;opacity:0;animation:promo-rota 14s linear infinite}
  .promo-item:nth-child(2){animation-delay:3.5s}
  .promo-item:nth-child(3){animation-delay:7s}
  .promo-item:nth-child(4){animation-delay:10.5s}
}
@keyframes promo-rota{0%,2%{opacity:0}4%,22%{opacity:1}25%,100%{opacity:0}}

/* ===== 13. FOOTER ===== */
.footer{
  position:relative;color:var(--bone);
  /* Tres capas: halo calido arriba, degradado que se hunde hacia el negro y la
     sombra interior que separa el footer del contenido. */
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(224 138 78 / .10), transparent 62%),
    linear-gradient(180deg, var(--ink-2) 0%, #0B0B0E 62%, #08080A 100%);
  box-shadow:inset 0 24px 44px -34px rgb(0 0 0 / .95);
}
/* Filo superior: una linea que se enciende en el centro */
.footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgb(224 138 78 / .55) 50%,transparent);
}

/* --- franja CTA superior --- */
.footer-cta{position:relative;background:transparent}
.footer-cta::after{
  content:'';position:absolute;bottom:0;left:clamp(1.25rem,4vw,3rem);right:clamp(1.25rem,4vw,3rem);height:1px;
  background:linear-gradient(90deg,transparent,var(--linea) 18%,var(--linea) 82%,transparent);
}
.footer .logo-img-wrap .logo-img{filter:drop-shadow(0 6px 22px rgb(224 138 78 / .28))}
.footer-cta-inner{
  max-width:1280px;margin:0 auto;padding:4rem clamp(1.25rem,4vw,3rem);
  display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:center;justify-content:space-between;
}
.footer-cta-brand{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.footer-claim{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(1.6rem,3.4vw,2.5rem);color:var(--bone);max-width:16ch;
}
.footer-cta-actions{display:flex;flex-wrap:wrap;gap:1rem}

/* --- grid de columnas --- */
.footer-top{
  max-width:1280px;margin:0 auto;padding:4rem clamp(1.25rem,4vw,3rem) 3rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;
}
.footer-col h4{
  position:relative;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--humo-2);margin-bottom:1.2rem;font-weight:400;padding-bottom:.7rem;
}
.footer-col h4::after{
  content:'';position:absolute;left:0;bottom:0;width:1.6rem;height:2px;border-radius:2px;
  background:var(--lima);opacity:.85;
}
.footer-col ul{display:flex;flex-direction:column;gap:.65rem}
.footer-col a{color:var(--bone);text-decoration:none;font-size:.92rem;transition:color .22s var(--ease)}
.footer-col a:hover{color:var(--lima)}
/* La navegacion y lo legal: una flecha que asoma al pasar por encima */
.footer-col ul:not(.footer-chips):not(.footer-datos) a{display:inline-flex;align-items:center;gap:.4rem}
.footer-col ul:not(.footer-chips):not(.footer-datos) a::before{
  content:'';width:0;height:1px;background:var(--lima);
  transition:width .25s var(--ease);
}
.footer-col ul:not(.footer-chips):not(.footer-datos) a:hover::before{width:.85rem}
.footer-col p{color:var(--humo-2);font-size:.9rem}
.footer-col p a{color:var(--bone);font-size:inherit}
.footer-col p a:hover{color:var(--lima)}

/* Datos de la nave con iconos en cajita */
.footer-datos{gap:.95rem !important}
.footer-datos li{display:flex;align-items:flex-start;gap:.65rem;color:var(--humo-2);font-size:.9rem;line-height:1.45}
.footer-ico{
  display:flex;align-items:center;justify-content:center;width:1.65rem;height:1.65rem;flex:none;
  border-radius:8px;background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .08);
  color:var(--lima);margin-top:.05rem;
}
.footer-ico--wa{color:#4BD07A}
.footer-datos a{color:var(--bone)}

/* Chips de confianza en cristal */
.footer-chips{flex-direction:column !important;gap:.5rem !important;align-items:flex-start}
.footer-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.03em;color:var(--humo-2);
  border:1px solid rgb(255 255 255 / .1);border-radius:999px;padding:.45rem .85rem;
  background:rgb(255 255 255 / .05);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
/* Check delante en las garantias; las notas llevan su estrella y no lo necesitan */
.footer-chip:not(.footer-chip--nota)::before{
  content:'';width:11px;height:11px;flex:none;background:var(--lima);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.footer-chip:hover{border-color:rgb(224 138 78 / .45);color:var(--bone);transform:translateX(2px)}
.footer-chip--nota{color:var(--bone)}
.footer-chip--nota i{color:#F5A623;font-style:normal}

/* --- barra inferior --- */
.footer-bottom{
  position:relative;max-width:1280px;margin:0 auto;padding:1.6rem clamp(1.25rem,4vw,3rem);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  align-items:center;justify-content:space-between;
  font-family:var(--f-mono);font-size:11.5px;color:var(--humo-2);letter-spacing:.02em;
}
.footer-bottom::before{
  content:'';position:absolute;top:0;left:clamp(1.25rem,4vw,3rem);right:clamp(1.25rem,4vw,3rem);height:1px;
  background:linear-gradient(90deg,transparent,var(--linea) 18%,var(--linea) 82%,transparent);
}
.footer-arriba{
  order:3;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  color:var(--humo-2);border:1px solid rgb(255 255 255 / .12);border-radius:999px;
  padding:.4rem .8rem;background:rgb(255 255 255 / .04);
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.footer-arriba:hover{color:var(--bone);border-color:rgb(224 138 78 / .5);transform:translateY(-2px)}
.footer-arriba svg{transition:transform .25s var(--ease)}
.footer-arriba:hover svg{transform:translateY(-2px)}

@media (max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;gap:2.5rem 2rem}
}
@media (max-width:520px){
  .footer-cta-inner{padding:3rem 1.1rem}
  .footer-cta-actions{width:100%}
  .footer-cta-actions .btn{flex:1}
}

/* ===== 14. TOAST ===== */
#toast{
  position:fixed;left:50%;bottom:1.75rem;transform:translate(-50%,140%);
  background:var(--ink);color:var(--bone);border:1.5px solid var(--lima);
  padding:.9rem 1.4rem;border-radius:10px;font-family:var(--f-text);font-weight:500;font-size:.9rem;
  box-shadow:var(--shadow);z-index:200;max-width:90vw;transition:transform .4s var(--ease);
  pointer-events:none;
  visibility:hidden;
}
#toast.show{transform:translate(-50%,0);visibility:visible}
@media (prefers-reduced-motion: reduce){ #toast{transition:none} }

/* ===== 15. TRANSICIÓN ENTRE VISTAS ===== */
main#app{transition:opacity .35s var(--ease), transform .35s var(--ease)}
main#app.is-transitioning{opacity:0;transform:translateY(12px)}
@media (prefers-reduced-motion: reduce){
  main#app{transition:none !important}
  main#app.is-transitioning{opacity:1;transform:none}
}

/* ===== 16. DATA-REVEAL (scroll) ===== */
[data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--reveal-delay,0s);
}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
@media print{[data-reveal]{opacity:1 !important;transform:none !important}}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ===== 17. CONTENEDORES GENERALES ===== */
.wrap{max-width:1280px;margin:0 auto;padding-left:clamp(1.25rem,4vw,3rem);padding-right:clamp(1.25rem,4vw,3rem)}
.section{padding:5.5rem 0}
@media (max-width:640px){ .section{padding:3.75rem 0} }

/* ===== 18. VISTA STUB (placeholder para otros ejecutores) ===== */
.v-stub{min-height:60vh;display:flex;align-items:center}
.v-stub .wrap{padding-top:6rem;padding-bottom:6rem}
.v-stub h1{font-size:clamp(2rem,5vw,3.2rem);margin:1rem 0 1.25rem}
.v-stub p{color:var(--humo);max-width:52ch;margin-bottom:1.75rem}
.v-stub .plate{margin:1.75rem 0}

/* ===== 19. 404 ===== */
.v-404{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}
.v-404 .num404{font-family:var(--f-display);font-weight:800;font-size:clamp(5rem,18vw,11rem);
  line-height:.9;color:transparent;-webkit-text-stroke:2px var(--ink)}

/* =========================================================
   VISTA HOME — namespace .v-home
   ========================================================= */
.v-home{display:block}

/* --- Hero --- */
.v-home .hero{
  min-height:min(92vh,860px);display:flex;align-items:center;overflow:hidden;
  padding-top:2rem;padding-bottom:3rem;position:relative;
}
.v-home .hero .wrap{position:relative;z-index:2;width:100%}
/* Foto real de la nave en el hero (anuncio del 5008 con la lona RUBAL 16 de fondo) */
.v-home .hero-bg{position:absolute;inset:0;z-index:0}
.v-home .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:right center}
.v-home .hero-bg-veil{position:absolute;inset:0;background:linear-gradient(90deg, rgb(16 16 19 / .92) 0%, rgb(16 16 19 / .78) 34%, rgb(16 16 19 / .28) 62%, rgb(16 16 19 / .12) 100%), linear-gradient(rgb(16 16 19 / .35), rgb(16 16 19 / .15) 30%, rgb(16 16 19 / .55) 100%)}
.v-home .hero-h1{font-size:clamp(2.4rem,6.2vw,5rem)}
.v-home .hero-sub--compact{max-width:44ch;text-shadow:0 1px 10px rgb(0 0 0 / .5)}
.v-home .hero-trust{position:relative;z-index:2}
.v-home .hero-photo{
  position:absolute;right:3vw;top:50%;transform:translateY(-50%) rotate(1.5deg);z-index:1;
  width:clamp(300px,30vw,460px);border-radius:12px;overflow:hidden;
  border:1px solid var(--linea);box-shadow:0 30px 70px -30px rgb(0 0 0 / .8);
}
.v-home .hero-photo img{display:block;width:100%;height:auto;filter:saturate(1.05)}
.v-home .hero-photo-tag{position:absolute;left:.8rem;bottom:.6rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgb(0 0 0 / .8)}
/* --- v13: CTA secundario, chips de cuota y trust chips sobre la foto de fondo --- */
.v-home .hero-form.hero-ctas{position:relative;z-index:2;align-items:center;margin-bottom:1.5rem}
.v-home .hero-link-plano{text-shadow:0 1px 10px rgb(0 0 0 / .5)}
.v-home .hero-cita-nota{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-bottom:1.1rem}
.v-home .hero-estado{
  display:inline-flex;align-items:center;gap:.45rem;padding:.32rem .7rem;border-radius:999px;
  border:1px solid rgb(53 192 110 / .45);background:rgb(53 192 110 / .14);color:#7BE0A5;
  font-weight:600;letter-spacing:.03em;white-space:nowrap;
}
.v-home .hero-estado[data-abierto="false"]{
  border-color:rgb(224 138 78 / .45);background:rgb(224 138 78 / .14);color:#F0B183;
}
.v-home .hero-estado-luz{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;box-shadow:0 0 0 0 currentColor;animation:hero-latido 2.4s ease-out infinite}
.v-home .hero-estado[data-abierto="false"] .hero-estado-luz{animation:none;opacity:.8}
@keyframes hero-latido{0%{box-shadow:0 0 0 0 rgb(123 224 165 / .55)}70%{box-shadow:0 0 0 7px rgb(123 224 165 / 0)}100%{box-shadow:0 0 0 0 rgb(123 224 165 / 0)}}
.v-home .hero-cita-prom{color:var(--humo-2);letter-spacing:.02em}
/* ---- v25 · Pie del héroe -------------------------------------------
   El botón de cómo llegar era una tarjeta de cristal con un distintivo
   naranja, sombra propia y micro-texto en monoespaciada: tres lenguajes
   distintos peleándose dentro de un héroe que por lo demás es plano y
   tipográfico. Ahora comparte filete, tamaños y colores con la fila de
   datos de debajo, y las dos cosas leen como un solo pie. */
.v-home .hero-pie{
  position:relative;z-index:2;
  padding-top:1.3rem;border-top:1px solid rgb(243 240 234 / .14);
}
.v-home .hero-comollegar{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;margin-bottom:1.05rem}
.v-home .hero-mapa-btn{
  /* Un marco fino y una superficie muy tenue: se lee como control sin volver
     a la tarjeta de cristal de antes (sombra, desenfoque y distintivo
     naranja), que era lo que rompía el héroe. */
  display:inline-flex;align-items:center;gap:.7rem;text-align:left;width:fit-content;
  text-decoration:none;color:var(--bone);
  padding:.7rem .95rem;border-radius:12px;
  border:1px solid rgb(243 240 234 / .19);
  background:rgb(243 240 234 / .045);
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.v-home .hero-mapa-btn:hover{border-color:rgb(224 138 78 / .5);background:rgb(243 240 234 / .08)}
.v-home .hero-mapa-btn:active{background:rgb(243 240 234 / .11)}
.v-home .hero-mapa-btn:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
/* El texto empuja al galón hasta el borde derecho: así el control tiene
   principio y final claros, que es lo que hace que se lea como botón. */
.v-home .hero-mapa-txt{flex:1 1 auto;min-width:0}
/* El acento es el alfiler, no una caja: al pasar por encima se enciende
   el título y el alfiler, que es donde está la acción. */
.v-home .hero-mapa-pin{
  display:flex;align-items:center;justify-content:center;flex:none;
  color:var(--lima);transition:transform .22s var(--ease);
}
.v-home .hero-mapa-btn:hover .hero-mapa-pin{transform:translateY(-1px)}
.v-home .hero-mapa-pin svg{width:18px;height:18px}
.v-home .hero-mapa-txt{display:grid;gap:.15rem;line-height:1.25}
.v-home .hero-mapa-txt b{
  font-family:var(--f-text);font-size:1rem;font-weight:600;letter-spacing:-.005em;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;
  text-underline-offset:.24em;transition:text-decoration-color .22s var(--ease), color .22s var(--ease);
}
.v-home .hero-mapa-btn:hover .hero-mapa-txt b{color:var(--lima);text-decoration-color:var(--lima)}
/* Dirección y hora en la misma línea, y si no cabe, una debajo de otra. */
.v-home .hero-mapa-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem}
.v-home .hero-mapa-txt small{
  font-family:inherit;font-size:.86rem;letter-spacing:0;text-transform:none;color:var(--humo-2);
}
/* Hoja inferior en móvil: el menú se saca al <body> y sube desde abajo, como
   los diálogos del sistema. Sale del hero porque un ancestro con transform o
   backdrop-filter rompería el position:fixed. */
.hero-mapa-menu-tit{display:none}
.hero-mapa-cancelar{display:none}
.mapa-fondo{
  position:fixed;inset:0;z-index:119;border:0;padding:0;
  background:rgb(0 0 0 / .58);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:mapa-fondo-entra .25s var(--ease);
}
@keyframes mapa-fondo-entra{from{opacity:0}to{opacity:1}}
body.mapa-hoja-abierta{overflow:hidden}
.hero-mapa-menu.es-hoja{
  position:fixed;left:0;right:0;bottom:0;top:auto;z-index:120;
  width:100%;min-width:0;margin:0;
  padding:.5rem .8rem calc(.9rem + env(safe-area-inset-bottom));
  border:0;border-top:1px solid rgb(255 255 255 / .14);
  border-radius:22px 22px 0 0;background:rgb(20 20 25 / .99);
  box-shadow:0 -22px 55px -18px rgb(0 0 0 / .9);
  animation:mapa-hoja-sube .3s cubic-bezier(.22,1,.36,1);
}
@keyframes mapa-hoja-sube{from{transform:translateY(100%)}to{transform:none}}
/* En escritorio el menu se saca al <body> y se ancla a la ventana: dentro del
   hero quedaba atrapado en su contexto de apilamiento y lo tapaba lo de abajo. */
.hero-mapa-menu.es-flotante{position:fixed;z-index:200;top:0;left:0;margin:0}
.hero-mapa-menu.es-hoja{will-change:transform;touch-action:none}
.hero-mapa-menu.es-hoja.arrastrando{cursor:grabbing}
.mapa-fondo{will-change:opacity}
.hero-mapa-menu.es-hoja::before{
  content:'';display:block;width:2.6rem;height:4px;border-radius:99px;
  background:rgb(255 255 255 / .28);margin:.4rem auto .55rem;
}
.hero-mapa-menu.es-hoja .hero-mapa-menu-tit{
  display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--humo-2);text-align:center;margin:0 0 .5rem;
}
.hero-mapa-menu.es-hoja .hero-mapa-op{padding:.95rem .85rem;font-size:1rem;border-radius:12px;min-height:52px;color:var(--bone);text-decoration:none;font-weight:500}
.hero-mapa-menu.es-hoja .hero-mapa-op:active{background:rgb(255 255 255 / .14)}
.hero-mapa-menu.es-hoja .hero-mapa-op-ico{width:1.9rem}
.hero-mapa-menu.es-hoja .hero-mapa-op--otras{margin-top:.25rem;padding-top:.9rem}
.hero-mapa-menu.es-hoja .hero-mapa-cancelar{
  display:block;width:100%;margin-top:.5rem;padding:.9rem;border:0;border-radius:12px;cursor:pointer;
  background:rgb(255 255 255 / .07);color:var(--bone);
  font-family:var(--f-text);font-size:.95rem;font-weight:600;
}
.hero-mapa-menu.es-hoja .hero-mapa-cancelar:active{background:rgb(255 255 255 / .13)}
@media (prefers-reduced-motion: reduce){
  .hero-mapa-menu.es-hoja,.mapa-fondo{animation:none}
}
.v-home .hero-mapa-wrap{position:relative}
.v-home .hero-mapa-btn{cursor:pointer;font:inherit;text-align:left}
.v-home .hero-mapa-btn[aria-expanded="true"]{background:rgb(255 255 255 / .16);border-color:rgb(224 138 78 / .55)}
.v-home .hero-mapa-btn[aria-expanded="true"] .hero-mapa-flecha{transform:rotate(180deg)}
.hero-mapa-menu{
  position:absolute;left:0;top:calc(100% + .5rem);z-index:30;min-width:15.5rem;
  display:flex;flex-direction:column;padding:.4rem;border-radius:14px;
  border:1px solid rgb(255 255 255 / .18);background:rgb(22 22 27 / .96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 22px 44px -18px rgb(0 0 0 / .85);
  animation:hero-mapa-abrir .2s var(--ease);
}
.hero-mapa-menu[hidden]{display:none}
@keyframes hero-mapa-abrir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hero-mapa-op{
  display:flex;align-items:center;gap:.65rem;padding:.6rem .7rem;border-radius:10px;
  text-decoration:none;color:var(--bone);font-family:var(--f-text);font-size:.92rem;
  transition:background .2s var(--ease);
}
.hero-mapa-op:hover,.hero-mapa-op:focus-visible{background:rgb(255 255 255 / .1);outline:none}
.hero-mapa-op[hidden]{display:none}
.hero-mapa-op-ico{display:flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;flex:none;border-radius:9px;background:transparent;overflow:visible}
.hero-mapa-op-ico svg{filter:drop-shadow(0 1px 2px rgb(0 0 0 / .35))}
.hero-mapa-op-ico--otras{background:rgb(255 255 255 / .1);color:var(--humo-2)}
.hero-mapa-op-ico--otras svg{width:16px;height:16px}
.hero-mapa-op-nom{flex:1;min-width:0;font-weight:600;letter-spacing:-.005em}
.hero-mapa-op-chev{display:flex;align-items:center;color:rgb(255 255 255 / .3);flex:none}
.hero-mapa-op:hover .hero-mapa-op-chev{color:rgb(255 255 255 / .6)}
.hero-mapa-menu.es-hoja .hero-mapa-op-ico{width:2.4rem;height:2.4rem;border-radius:11px}
.hero-mapa-menu.es-hoja .hero-mapa-op-nom{font-size:1.02rem}
.hero-mapa-op--otras{color:var(--humo-2);font-size:.85rem;border-top:1px solid rgb(255 255 255 / .12);margin-top:.2rem;padding-top:.65rem;border-radius:0 0 10px 10px}
.hero-mapa-op--otras .hero-mapa-op-ico svg{width:15px;height:15px}
@media (max-width:768px){
  .hero-mapa-menu{min-width:min(15rem,78vw)}
  .hero-mapa-op{padding:.7rem .7rem;font-size:.9rem}
}
.v-home .hero-mapa-flecha{display:flex;align-items:center;color:var(--humo-2);transition:transform .28s var(--ease), color .28s var(--ease)}
.v-home .hero-mapa-flecha svg{width:16px;height:16px}
.v-home .hero-mapa-btn:hover .hero-mapa-flecha{color:var(--bone)}
.v-home .hero-mapa-btn[aria-expanded="true"] .hero-mapa-flecha{transform:rotate(180deg);color:var(--bone)}
@media (max-width:768px){
  /* Los tamanos de antes eran para la tarjeta de cristal, con micro-texto en
     monoespaciada; con la tipografia nueva dejaban la direccion en 8,8 px. */
  .v-home .hero-comollegar{margin-bottom:.9rem;gap:.45rem .7rem}
  .v-home .hero-mapa-btn{gap:.55rem}
  .v-home .hero-mapa-pin svg{width:17px;height:17px}
  .v-home .hero-mapa-txt b{font-size:.95rem}
  .v-home .hero-mapa-txt small{font-size:.82rem}
  .v-home .hero-mapa-txt small.hero-mapa-cuando{font-size:.82rem}
  .v-home .hero-mapa-sub{gap:.1rem .6rem}
}
@media (max-width:768px){
  .v-home .hero-cita-nota{gap:.4rem .6rem;margin-bottom:.85rem}
  .v-home .hero-estado{padding:.28rem .6rem;font-size:.62rem}
  .v-home .hero-cita-prom{font-size:.62rem}
}
/* ---- v24 · Héroe: la fila de confianza sustituye a las cuatro pastillas.
   Las pastillas eran cuatro cajitas iguales, que es el contenedor perezoso:
   el dato ya se sostiene solo con una línea y un filete encima. ---- */
.v-home .hero-promesa{
  position:relative;z-index:2;margin:0 0 1.2rem;
  font-size:.88rem;color:var(--humo-2);letter-spacing:.01em;
  text-shadow:0 1px 10px rgb(0 0 0 / .5);
}
.v-home .hero-confianza{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.8rem;
}
.v-home .hero-confianza-dato{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9rem;color:var(--humo-2);text-decoration:none;
  text-shadow:0 1px 10px rgb(0 0 0 / .5);
}
.v-home .hero-confianza-dato b{color:var(--bone);font-weight:600}
a.hero-confianza-dato:hover b,
a.hero-confianza-dato:hover .hero-confianza-nota{color:var(--lima)}
a.hero-confianza-dato:focus-visible{outline:2px solid var(--lima);outline-offset:4px;border-radius:4px}
.v-home .hero-confianza-logo{display:flex;align-items:center}
.v-home .hero-confianza-marca{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--humo-2);
}
.v-home .hero-confianza-nota{
  font-family:var(--f-display);font-weight:800;font-size:1.05rem;line-height:1;
  letter-spacing:-.01em;color:var(--bone);transition:color .2s var(--ease);
}
.v-home .hero-confianza .estrellas{--estrella:14px}
.v-home .hero-confianza .estrellas .hueca,
.v-home .hero-confianza .estrellas .par-hueca{fill:rgb(243 240 234 / .26);stop-color:rgb(243 240 234 / .26)}
.v-home .hero-confianza-check{display:flex;align-items:center;color:var(--verde)}
.v-home .hero-confianza-check svg{width:15px;height:15px}
@media (max-width:700px){
  .v-home .hero-confianza{gap:.5rem 1.1rem;padding-top:1rem}
  .v-home .hero-confianza-dato{font-size:.82rem}
  .v-home .hero-promesa{font-size:.82rem;margin-bottom:1rem}
}

/* ---- La hora, dentro del botón de cómo llegar ---- */
.v-home .hero-mapa-txt small.hero-mapa-cuando{
  display:inline-flex;align-items:center;gap:.42rem;
  color:#7BE0A5;font-weight:500;font-size:.86rem;
}
.v-home .hero-mapa-txt small.hero-mapa-cuando[data-abierto="false"]{color:#F0B183}
.v-home .hero-mapa-cuando .hero-estado-luz{width:6px;height:6px;flex:none}

.v-home .hero-trust-mini{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.55rem;align-items:stretch}
.v-home .hero-trust-item{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  padding:.55rem .9rem;border-radius:8px;color:var(--bone);
  border:1px solid rgb(255 255 255 / .18);
  background:rgb(255 255 255 / .09);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
a.hero-trust-item:hover{background:rgb(255 255 255 / .16);border-color:rgb(255 255 255 / .38);transform:translateY(-1px)}
a.hero-trust-item:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
.v-home .hero-trust-logo{display:flex;align-items:center}
.v-home .hero-trust-marca{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--humo-2)}
.v-home .hero-trust-nota{font-family:var(--f-display);font-weight:800;font-size:1.1rem;line-height:1;letter-spacing:-.01em}
.v-home .hero-trust-item .estrellas{font-size:.8rem;letter-spacing:.05em}
.v-home .hero-trust-item .estrellas-fondo{color:rgb(255 255 255 / .26)}
.v-home .hero-trust-item--dato{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--bone)}
.v-home .hero-trust-check{display:flex;align-items:center;color:var(--verde)}
.v-home .hero-trust-check svg{width:15px;height:15px}
@media (max-width:1100px){ .v-home .hero-bg{position:absolute;inset:0;z-index:0}
.v-home .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:right center}
.v-home .hero-bg-veil{position:absolute;inset:0;background:linear-gradient(90deg, rgb(16 16 19 / .92) 0%, rgb(16 16 19 / .78) 34%, rgb(16 16 19 / .28) 62%, rgb(16 16 19 / .12) 100%), linear-gradient(rgb(16 16 19 / .35), rgb(16 16 19 / .15) 30%, rgb(16 16 19 / .55) 100%)}
.v-home .hero-h1{font-size:clamp(2.4rem,6.2vw,5rem)}
.v-home .hero-sub--compact{max-width:44ch;text-shadow:0 1px 10px rgb(0 0 0 / .5)}
.v-home .hero-trust{position:relative;z-index:2}
.v-home .hero-photo{display:none} }
.v-home .hero-bignum{
  position:absolute;top:50%;right:-4vw;transform:translateY(-50%);
  font-family:var(--f-display);font-weight:800;font-size:clamp(18rem,42vw,34rem);
  line-height:1;color:transparent;-webkit-text-stroke:1.5px rgb(238 241 245 / .06);
  z-index:1;pointer-events:none;user-select:none;
}
.v-home .hero-label{margin-bottom:1.75rem}
.v-home .hero-h1{
  font-size:clamp(2.8rem,8vw,6.5rem);line-height:.95;letter-spacing:-.03em;font-weight:600;
  max-width:16ch;
}
.v-home .reveal-wrap{overflow:hidden;display:block}
.v-home .reveal-line{
  display:block;transform:translateY(112%);
  animation:lineUp .75s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * .11s + .1s);
}
.v-home .hero-h1 .line2{font-family:var(--f-display);font-style:italic;font-weight:600;color:var(--lima)}
@keyframes lineUp{ to{transform:translateY(0)} }
@media (prefers-reduced-motion: reduce){
  .v-home .reveal-line{animation:none;transform:none}
}
.v-home .hero-sub{
  font-size:1.15rem;color:var(--humo-2);max-width:46ch;margin:1.75rem 0 2.5rem;line-height:1.6;
}
.v-home .hero-form{display:flex;flex-wrap:wrap;gap:1rem;align-items:stretch;margin-bottom:2.25rem}
.v-home .hero-form .btn{height:74px}
.v-home .hero-trust{
  display:flex;flex-wrap:wrap;gap:1.75rem;font-size:10.5px;
}
.v-home .hero-trust li{display:flex;align-items:center;gap:.4rem}
.v-home .hero-trust svg{width:13px;height:13px;color:var(--lima)}

/* v21: ESCRITORIO — el bloque del hero se alinea con el logo de la barra.
   El .wrap centrado (1280px) dejaba ~310 px de foto oscura muertos a la
   izquierda; ahora el titular arranca en la misma vertical que el logo y
   el texto ocupa esa zona, que es la parte más oscura del velo.
   Móvil (≤768px) queda intacto: allí el titular ya vive sobre la foto. */
@media (min-width:769px){
  .v-home .hero .wrap{max-width:none}
}
@media (max-width:768px){
  /* Móvil = como escritorio: la foto ENTERA arriba y el titular DENTRO de su zona oscura izquierda */
  /* v26 · Móvil. Antes: banda de foto de 430 px FIJOS, titular clavado a
     206 px y botones a 314 px. Con eso, la mitad de arriba de la foto se veía
     vacía y todo el texto caía apelotonado debajo, con huecos casi iguales
     entre frases, así que se leía como un solo párrafo largo.
     Ahora: la banda se mide en vh, el titular se ancla al BORDE INFERIOR de
     la banda (sin números mágicos, se mueva lo que se mueva), y todo lo demás
     vuelve al flujo normal con un ritmo de espacios que separa los grupos. */
  .v-home .hero{
    --banda:clamp(215px,33vh,300px);
    min-height:0;padding-top:0;padding-bottom:0;
    display:flex;flex-direction:column;align-items:stretch;position:relative;
  }
  .v-home .hero-bg{order:1;position:relative;inset:auto;width:100%;height:var(--banda)}
  .v-home .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:24% center;display:block}
  /* La foto emerge del negro de la barra en vez de empezar de golpe: el
     degradado arranca en tinta PURA arriba y se abre hacia abajo. Junto con
     quitarle el filete a la barra, el canto entre menú y héroe desaparece. */
  .v-home .hero-bg-veil{
    background:
      linear-gradient(90deg, rgb(16 16 19 / .5) 0%, rgb(16 16 19 / .26) 42%, rgb(16 16 19 / 0) 68%),
      linear-gradient(180deg, var(--ink) 0%, rgb(16 16 19 / .94) 5%, rgb(16 16 19 / .6) 14%, rgb(16 16 19 / .26) 26%, rgb(16 16 19 / .1) 44%, rgb(16 16 19 / .82) 74%, var(--ink) 100%);
  }
  .v-home .hero-label{display:none}
  /* El orden se fija aquí y no con posiciones absolutas: titular sobre la
     foto, y debajo botones, argumento, promesa y pie. */
  .v-home .hero .wrap{
    order:2;position:static;padding-top:0;
    display:flex;flex-direction:column;align-items:stretch;
  }
  .v-home .hero-h1{
    position:absolute;z-index:3;left:1.15rem;right:1.15rem;width:auto;max-width:none;
    top:var(--banda);transform:translateY(-100%);margin:0;padding-bottom:.85rem;
    font-size:clamp(25px,7.4vw,34px);line-height:1.07;letter-spacing:-.03em;
    text-shadow:0 2px 14px rgb(0 0 0 / .6);
  }
  .v-home .hero-h1 .line2 em{font-size:1.1em}
  /* Botones a lo ancho: es como se pulsan con el pulgar. */
  .v-home .hero-form.hero-ctas{
    order:1;position:static;margin:1.25rem 0 0;
    flex-direction:column;align-items:stretch;gap:.6rem;
  }
  .v-home .hero-form.hero-ctas .btn{height:auto;padding:.85rem 1.25rem;font-size:15px;width:100%}
  .v-home .hero-link-plano{display:inline-block;font-size:12.5px;color:var(--bone)}
  /* Ritmo: el hueco GRANDE separa grupos, el pequeño une lo que va junto. */
  .v-home .hero-sub--compact{
    order:2;font-size:1rem;line-height:1.55;margin:2.6rem 0 0;
    text-shadow:none;color:var(--humo-2);max-width:36ch;
  }
  .v-home .hero-sub--compact strong, .v-home .hero-sub--compact b{color:var(--bone)}
  .v-home .hero-promesa{order:3;margin:.55rem 0 0}
  .v-home .hero-pie{order:4;margin-top:2.5rem;padding-top:1.35rem;padding-bottom:2.2rem}
  /* En móvil el botón ocupa el ancho entero, con el galón pegado al borde
     derecho: así se distingue de una línea de texto de un vistazo. */
  .v-home .hero-comollegar{margin-bottom:1.15rem}
  .v-home .hero-mapa-btn{width:100%}
  /* Las dos notas caben juntas en la primera línea; cada frase con visto
     bueno va en la SUYA, que si no "Kilómetros certificados" se colaba al
     lado de coches.net y las tres frases no se leían como una lista. */
  .v-home .hero-confianza{gap:.7rem 1.2rem}
  .v-home .hero-confianza span.hero-confianza-dato{flex:1 0 100%}
  .v-home .hero-trust{display:flex;flex-wrap:wrap;gap:.4rem;font-size:0}
  .v-home .hero-trust li{
    font-size:9px;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .14);
    border-radius:999px;padding:.45rem .7rem;line-height:1.1;gap:.3rem;
  }
  .v-home .hero-trust svg{width:10px;height:10px}
  /* v13: chips de cuota y trust chips debajo de la foto, compactos */
  .v-home .hero-trust-mini{padding-bottom:1.9rem}
  .v-home .hero-trust-mini{gap:.4rem}
  .v-home .hero-trust-item{padding:.45rem .7rem;gap:.4rem;border-radius:7px}
  .v-home .hero-trust-nota{font-size:.95rem}
  .v-home .hero-trust-item .estrellas{font-size:.7rem}
  .v-home .hero-trust-marca{font-size:.54rem}
  .v-home .hero-trust-item--dato{font-size:.56rem}
}

/* --- Cómo funciona --- */
.v-home .how{position:relative}
.v-home .how-grid{display:grid;grid-template-columns:7fr 5fr;gap:3.5rem;align-items:start}
.v-home .how-steps{display:flex;flex-direction:column;gap:2.25rem}
.v-home .how-steps li{
  display:grid;grid-template-columns:3.5rem 1fr;gap:1.25rem;align-items:baseline;
  padding-bottom:2.25rem;border-bottom:1px solid var(--linea-bone);
}
.v-home .how-steps li:last-child{border-bottom:none;padding-bottom:0}
.v-home .how-steps li:nth-child(2){margin-left:1.5rem}
.v-home .how-steps li:nth-child(3){margin-left:3rem}
.v-home .how-steps .step-n{font-family:var(--f-mono);color:var(--humo);font-size:.85rem}
.v-home .how-steps h3{font-size:1.5rem;margin-bottom:.4rem}
.v-home .how-steps p{color:var(--humo);font-size:.95rem;max-width:38ch}
.v-home .how-editorial{
  background:var(--ink);color:var(--bone);border-radius:6px;padding:2.5rem;position:relative;overflow:hidden;
}
.v-home .how-editorial::before{
  content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.035;mix-blend-mode:overlay;pointer-events:none;
}
.v-home .how-lead{font-family:var(--f-display);font-weight:600;font-size:1.4rem;line-height:1.25;
  margin-bottom:1.1rem;position:relative}
.v-home .how-editorial p:not(.how-lead){color:var(--humo-2);font-size:1rem;position:relative}
.v-home .how-editorial strong{color:var(--lima)}

/* --- Opiniones: estrellas, tarjetas de fuente y CTA de reseña --- */
/* Estrellas dibujadas. El tamano se controla con --estrella para que la
   misma pieza sirva en el heroe (pequena) y en las opiniones (grande). */
.estrellas{display:inline-flex;gap:2px;vertical-align:-2px;--estrella:17px}
.estrellas svg{width:var(--estrella);height:var(--estrella);display:block}
.estrellas .llena{fill:#F5A623}
.estrellas .hueca{fill:var(--linea-bone)}
.estrellas .par-llena{stop-color:#F5A623}
.estrellas .par-hueca{stop-color:var(--linea-bone)}
.estrella-mini{display:inline-flex;align-items:center;color:#F5A623;vertical-align:-2px}
.estrella-mini svg{width:13px;height:13px;display:block}
.v-home .opiniones-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.v-home .opinion-fuente{
  display:flex;flex-direction:column;gap:.55rem;text-decoration:none;color:var(--ink);
  padding:1.5rem 1.6rem;border-radius:16px;border:1px solid var(--linea-bone);background:#FFFDF9;
  box-shadow:0 1px 2px rgb(16 16 19 / .04);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.v-home .opinion-fuente:hover{transform:translateY(-3px);border-color:var(--lima);box-shadow:var(--shadow-bone)}
.v-home .opinion-cabecera{display:flex;align-items:center;gap:.55rem}
.v-home .opinion-logo{display:flex;align-items:center}
.v-home .opinion-logo--cnet{color:var(--lima)}
.v-home .opinion-fuente-nombre{font-family:var(--f-display);font-weight:700;font-size:1.05rem}
.v-home .opinion-nota-fila{display:flex;align-items:center;gap:.65rem;margin-top:.1rem}
.v-home .opinion-nota{font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1;letter-spacing:-.02em}
.v-home .opinion-cuenta{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--humo)}
.v-home .opinion-cta{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:.35rem;margin-top:.3rem}
.v-home .opinion-fuente:hover .opinion-cta{color:#C87A42}
.v-home .resena-cta{
  position:relative;cursor:pointer;
  margin-top:1.2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem;
  padding:1.8rem 1.9rem;border-radius:18px;background:var(--ink);color:var(--bone);
  border:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
/* Enlace estirado: el botón cubre todo el bloque, así que se puede pulsar en
   cualquier punto. El enlace de coches.net va por encima con z-index. */
.v-home .resena-btn-google::after{content:'';position:absolute;inset:0;z-index:1;border-radius:18px}
.v-home .resena-cta:hover{background:#17171C;border-color:rgb(224 138 78 / .45);transform:translateY(-2px)}
.v-home .resena-cta:focus-within{border-color:var(--lima)}
.v-home .resena-cta:hover .resena-btn-google{background:#C87A42}
.v-home .resena-link-cnet{position:relative;z-index:2}
.v-home .resena-cta-txt{flex:1 1 22rem;max-width:44ch}
.v-home .resena-cta-txt h3{font-family:var(--f-display);font-size:1.5rem;margin:.45rem 0 .5rem;letter-spacing:-.01em}
.v-home .resena-cta-txt p{color:var(--humo-2);line-height:1.55}
.v-home .resena-cta-botones{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.v-home .resena-btn-google{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.v-home .resena-btn-estrella{color:#F5A623;font-size:1.05rem;line-height:1}
.v-home .resena-link-cnet{color:var(--humo-2);font-size:.86rem}
.v-home .resena-link-cnet:hover{color:var(--bone)}
@media (max-width:760px){
  .v-home .opiniones-grid{grid-template-columns:1fr;gap:.75rem}
  .v-home .opinion-fuente{padding:1.2rem 1.2rem}
  .v-home .opinion-nota{font-size:2rem}
  .v-home .resena-cta{padding:1.4rem 1.3rem;gap:1.1rem}
  .v-home .resena-cta-txt h3{font-size:1.28rem}
  .v-home .resena-cta-botones{width:100%}
  .v-home .resena-btn-google{width:100%;justify-content:center}
}

/* --- Búsquedas rápidas (idea OcasionPlus) --- */
.v-home .busq{padding-top:3.4rem;padding-bottom:3.4rem}
.v-home .busq-head{margin-bottom:1.7rem}
.v-home .busq-head h2{margin-top:.5rem}
.v-home .busq-intro{color:var(--humo);margin-top:.5rem;max-width:46ch}
.v-home .busq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.v-home .busq-card{
  cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  text-align:left;padding:1.5rem 1.5rem 1.35rem;border-radius:16px;
  border:1px solid var(--linea-bone);background:#FFFDF9;color:var(--ink);
  box-shadow:0 1px 2px rgb(16 16 19 / .04);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.v-home .busq-card:hover{transform:translateY(-4px);border-color:var(--lima);box-shadow:var(--shadow-bone)}
.v-home .busq-card:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
.v-home .busq-icono{display:flex;color:var(--lima);margin-bottom:.15rem}
.v-home .busq-card:hover .busq-icono{color:#C87A42}
.v-home .busq-txt{font-family:var(--f-display);font-weight:700;font-size:1.12rem;line-height:1.2;letter-spacing:-.01em}
.v-home .busq-sub-card{font-size:.86rem;color:var(--humo);line-height:1.4}
.v-home .busq-n{margin-top:.35rem;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--humo)}
.v-home .busq-n b{color:var(--lima-texto);font-size:1rem;font-weight:700}
/* En escritorio la rejilla es de 3: si la ultima tarjeta cae sola (7, 10...),
   se estira a lo ancho y se tumba en horizontal para cerrar la seccion. */
@media (min-width:901px){
  .v-home .busq-card:last-child:nth-child(3n+1){
    grid-column:1/-1;flex-direction:row;align-items:center;gap:1.1rem;
    padding:1.05rem 1.5rem;
  }
  .v-home .busq-card:last-child:nth-child(3n+1) .busq-icono{margin-bottom:0}
  .v-home .busq-card:last-child:nth-child(3n+1) .busq-sub-card{flex:1}
  .v-home .busq-card:last-child:nth-child(3n+1) .busq-n{margin-top:0;white-space:nowrap}
}
@media (max-width:900px){
  .v-home .busq-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .v-home .busq{padding-top:2.6rem;padding-bottom:2.6rem}
  .v-home .busq-card{padding:1.15rem 1.1rem 1rem;border-radius:14px}
  .v-home .busq-txt{font-size:.98rem}
  .v-home .busq-sub-card{font-size:.78rem}
  .v-home .busq-icono svg{width:26px;height:26px}
  /* Con numero impar de tarjetas, la ultima no se queda coja: ocupa la fila */
  .v-home .busq-card:last-child:nth-child(odd){grid-column:1/-1}
}

/* --- Stock destacado --- */
.v-home .stock-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:2.5rem}
.v-home .stock-head h2{font-size:clamp(1.9rem,4vw,2.6rem)}
.v-home .stock-counter{font-family:var(--f-mono);color:var(--humo);font-size:.85rem;margin-top:.4rem}
.v-home .stock-counter b{color:var(--ink);font-weight:600}
.v-home .stock-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:2.75rem;
}
.v-home .stock-ctas{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}

/* --- Franja permuta --- */
.v-home .permuta{border-top:1px solid var(--linea)}
.v-home .permuta .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem;align-items:center}
.v-home .permuta .wrap > *{min-width:0}
.v-home .permuta h2{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:1.25rem;max-width:12ch}
.v-home .permuta-cards{display:flex;flex-direction:column;gap:1rem}
.v-home .permuta-foto{margin:0}
/* height:auto es obligatorio en cuanto la <img> lleva atributos width y
   height: sin él, el height="900" del HTML gana como pista de presentación,
   deja el alto fijo en 900 px en TODOS los tamaños y anula el aspect-ratio.
   Con los atributos puestos en la auditoria, esta foto se disparo en movil. */
.v-home .permuta-foto img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:1px solid var(--linea)}
.v-home .permuta-card{
  border:1px solid var(--linea);border-radius:8px;padding:1.5rem;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;
}
.v-home .permuta-card.is-plus{border-color:var(--lima);background:rgb(224 138 78 / .05)}
.v-home .permuta-card .t{font-size:.85rem;color:var(--humo-2)}
.v-home .permuta-card .v{font-family:var(--f-mono);font-weight:600;font-size:1.35rem}
.v-home .permuta-card.is-plus .v{color:var(--lima)}
.v-home .permuta p.copy{color:var(--humo-2);margin-bottom:1.75rem;max-width:48ch}

/* --- Franja alertas --- */
.v-home .alertas-cta{border-top:1px solid var(--linea)}
.v-home .alertas-cta .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.v-home .alertas-cta h2{font-size:clamp(1.8rem,4vw,2.6rem);max-width:16ch}
.v-home .alertas-form{display:flex;gap:.75rem;flex-wrap:wrap}
.v-home .alertas-form input{
  background:var(--ink-2);border:1.5px solid var(--linea);border-radius:999px;
  padding:1rem 1.4rem;color:var(--bone);font-size:.95rem;min-width:240px;
}
.v-home .alertas-form input::placeholder{color:var(--humo-2)}
.v-home .alertas-form input:focus{border-color:var(--lima);outline:none}

/* --- Trust local --- */
.v-home .trust{}
.v-home .trust-grid{display:grid;grid-template-columns:5fr 7fr;gap:3.5rem;align-items:start}
.v-home .trust-info h2{font-size:clamp(1.9rem,4vw,2.5rem);margin-bottom:1.5rem}
.v-home .trust-info dl{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:2rem}
.v-home .trust-info dt{display:flex;align-items:center;gap:.6rem;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--humo);margin-bottom:.25rem}
.v-home .trust-info dt svg{width:14px;height:14px;color:var(--oxido)}
.v-home .trust-info dd{font-size:1rem}
/* v24: el mapa se ve siempre y a ras del marco — el iframe llena la caja
   exacta (block + 100%), sin huecos ni el borde punteado del placeholder. */
.v-home .trust-map{
  width:100%;aspect-ratio:16/10;background:var(--bone-2);
  border:1px solid var(--linea-bone);border-radius:14px;overflow:hidden;display:block;
}
.v-home .trust-map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.15) contrast(1.02)}
.v-home .trust-map-link{display:inline-block;margin-top:.85rem;font-size:.9rem}
.v-home .trust-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.v-home .trust-chip{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--linea-bone);border-radius:999px;padding:.5rem .9rem;color:var(--humo);
}
.v-home .reviews{display:flex;flex-direction:column;gap:1.25rem}
.v-home .review{
  background:var(--bone-2);border:1px solid var(--linea-bone);border-radius:8px;padding:1.5rem 1.75rem;
}
.v-home .review .stars{display:flex;gap:2px;color:var(--oxido);margin-bottom:.75rem}
.v-home .review .stars svg{width:14px;height:14px}
.v-home .review p{font-size:.98rem;margin-bottom:.75rem}
.v-home .review .n{font-family:var(--f-mono);font-size:.78rem;color:var(--humo)}

/* --- Valores de empresa --- */
.v-home .valores-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.v-home .valor{border:1px solid var(--linea);border-radius:10px;padding:1.6rem 1.5rem;background:var(--ink-2)}
.v-home .valor-n{display:inline-block;color:var(--lima);font-size:.72rem;letter-spacing:.12em;border:1px solid var(--linea);border-radius:999px;padding:.25rem .6rem;margin-bottom:1rem}
.v-home .valor h3{font-size:1.35rem;margin-bottom:.6rem}
.v-home .valor p{color:var(--humo-2);font-size:.92rem;line-height:1.65}
/* --- Últimas entregas (huecos de foto real) --- */
.v-home .entregas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:.8rem}
.v-home .entrega{position:relative;aspect-ratio:4/3;background:linear-gradient(150deg,var(--ink),var(--ink-3) 75%);border-radius:8px;margin:0;overflow:hidden;display:flex;align-items:flex-end}
.v-home .entrega img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-home .entrega figcaption{position:relative;z-index:1;background:linear-gradient(transparent,rgb(0 0 0 / .75));width:100%;color:#fff !important}
.v-home .entrega figcaption{color:var(--humo-2);font-size:.62rem;letter-spacing:.05em;padding:.6rem .7rem}
.v-home .entrega .foto-slot-tag{top:.5rem;right:.6rem;bottom:auto}
@media (max-width:1024px){ .v-home .valores-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .v-home .valores-grid{grid-template-columns:minmax(0,1fr)} .v-home .entregas-grid{grid-template-columns:minmax(0,1fr)} }

/* --- Responsive home --- */
@media (max-width:1024px){
  .v-home .stock-grid{grid-template-columns:repeat(2,1fr)}
  .v-home .how-grid,.v-home .trust-grid,.v-home .permuta .wrap{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .v-home .how-steps li:nth-child(2){margin-left:.75rem}
  .v-home .how-steps li:nth-child(3){margin-left:1.5rem}
}
@media (max-width:640px){
  .v-home .stock-grid{grid-template-columns:1fr}
  .v-home .hero-bignum{opacity:.6}
  .v-home .hero-form{flex-direction:column}
  .v-home .hero-form .plate{max-width:100%}
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:520px){
  .topbar{padding:.85rem 1.1rem;gap:.6rem .8rem}
  .logo-img{height:50px}
  .topbar-ctas{gap:.5rem}
  .btn-tel-text{display:none}
  .btn-tel{padding:.55rem;border-radius:50%}
  .btn-compact{padding:.55rem .95rem;font-size:.78rem}
  .footer-top{grid-template-columns:1fr;gap:0}
  .footer-col{padding-top:1.6rem;padding-bottom:1.6rem;border-top:1px solid var(--linea)}
  .footer-col:first-child{border-top:0;padding-top:0}
  .footer-col:last-child{padding-bottom:0}
  .footer-cta-inner{padding-top:2.5rem;padding-bottom:2.5rem}
  .footer-claim{font-size:1.5rem}
  .footer-cta-actions{width:100%}
  .footer-cta-actions .btn{flex:1}
}

/* =========================================================
   v7 · REDISEÑO HOME ESTILO MOTOROWAY (marca RUBAL 16)
   Dos voces tipográficas + hero panel naranja con chevrones +
   pasos ilustrados + franja de dato. Namespaced .v-home / .hero-mw.
   ========================================================= */

/* --- Dos voces: los h2 sobre fondo claro pasan a serif editorial --- */
.bone .sec-head h2, .v-home .bone h2{font-family:var(--f-serif);font-weight:500;letter-spacing:-.01em}

/* --- Hero Motorway --- */
.v-home .hero.hero-mw{
  min-height:auto;display:block;overflow:visible;
  padding:3.5rem 0 2.75rem;
}
.v-home .hero-mw-top{display:flex;align-items:stretch;gap:1.4rem;margin-bottom:1.75rem}
.v-home .hero-mw-panel{
  position:relative;
  flex:0 0 58%;max-width:58%;
  background:var(--lima);
  border-radius:20px;
  padding:2.75rem 4.75rem 2.75rem 2.75rem;
}
.v-home .hero-mw-panel::after{
  content:'';position:absolute;top:0;bottom:0;right:-3rem;width:5rem;
  background:var(--lima);
  clip-path:polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%);
}
.v-home .hero-mw-label{color:rgb(20 20 20 / .6);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.1rem}
.v-home .hero-mw-h1{
  font-family:var(--f-display);font-weight:800;color:#141414;
  font-size:clamp(2.4rem,5.5vw,4rem);line-height:1.02;letter-spacing:-.02em;
  margin-bottom:1.25rem;
}
.v-home .hero-mw-h1 .line{display:block}
.v-home .hero-mw-h1 em{font-style:italic;font-weight:600}
.v-home .hero-mw-sub{color:rgb(20 20 20 / .78);font-size:1.02rem;max-width:38ch;line-height:1.5;margin-bottom:1.6rem}
.v-home .hero-mw-form{display:flex;flex-wrap:wrap;gap:.85rem;align-items:stretch}
.v-home .hero-mw-form .btn{height:auto}
.v-home .hero-mw-chevrons{display:flex;align-items:center;justify-content:center;gap:2rem;flex:1;min-width:0;align-self:stretch}
.v-home .hero-mw-chevrons{position:relative;overflow:hidden;border-radius:22px;justify-content:flex-start;gap:1.2rem;padding-left:1.6rem;box-shadow:var(--shadow-bone)}
.v-home .hero-mw-car{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.v-home .hero-mw-chev{position:relative;z-index:2}
/* --- v9: testimonios (carrusel) y FAQ (estilo Motorway) --- */
.v-home .testi-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.v-home .testi-track{display:flex;gap:1.6rem;width:max-content;animation:testi-scroll 55s linear infinite}
.v-home .testi-marquee:focus-within .testi-track,
.v-home .testi-track.is-paused{animation-play-state:paused}
@keyframes testi-scroll{to{transform:translateX(-50%)}}
.v-home .testi-card{margin:0;flex:0 0 340px}
.v-home .testi-card--texto{display:flex;flex-direction:column;justify-content:center;padding:1.6rem;border:1px solid var(--linea-bone);border-radius:14px;background:var(--bone-2)}
.v-home .testi-media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px}
.v-home .testi-quote{font-family:var(--f-serif);font-size:1.22rem;line-height:1.4;margin:1.05rem 0 .55rem;color:var(--ink)}
.v-home .testi-card--texto .testi-quote{margin-top:0}
.v-home .testi-firma{font-size:10.5px;letter-spacing:.08em;color:var(--humo)}
/* El carrusel de testimonios se mueve siempre, incluso con "reducir movimiento" del sistema;
   la pausa se controla solo por :hover/:focus-within y por toque (clase .is-paused) arriba. */
.v-home .faq-list{max-width:760px}
.v-home .faq-item{border-top:1px solid var(--linea-bone)}
.v-home .faq-item:last-child{border-bottom:1px solid var(--linea-bone)}
.v-home .faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0;font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.v-home .faq-item summary::-webkit-details-marker{display:none}
.v-home .faq-item summary::after{content:'+';font-family:var(--f-mono);font-size:1.1rem;color:var(--humo);flex:none;transition:transform .25s var(--ease)}
.v-home .faq-item[open] summary::after{transform:rotate(45deg)}
.v-home .faq-item p{color:var(--humo);max-width:60ch;margin:0 0 1.1rem;line-height:1.55}
.v-home .hero-mw-chev{width:4.4rem;flex:none;clip-path:polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%)}
.v-home .hero-mw-chev--1{background:#EFA36C;height:72%}
.v-home .hero-mw-chev--2{background:#C87A42;height:48%}
.v-home .hero-mw-trust{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.9rem}
.v-home .hero-mw-link{display:inline-block;color:var(--ink);font-weight:500}
/* --- v8: chips-botón de cuota preset, debajo del CTA + enlace del hero --- */
.v-home .hero-mw-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
@media (max-width:900px){
  .v-home .hero-mw-panel{padding-right:3.5rem}
}
@media (max-width:760px){
  .v-home .hero-mw-top{flex-direction:column;gap:0}
  .v-home .hero-mw-chevrons{display:none}
  .v-home .testi-card{flex:0 0 280px}
  .v-home .hero-mw-panel{flex:1 1 100%;max-width:100%;border-radius:20px;padding:2.1rem 1.6rem}
  .v-home .hero-mw-panel::after{display:none}
  .v-home .hero-mw-form{flex-direction:column}
  .v-home .hero-mw-form .plate{max-width:100%}
}

/* --- v8: panel naranja pequeño de "¿Y tu coche de ahora?" — Motorway en miniatura --- */
.v-home .permuta-mini-panel{
  position:relative;background:var(--lima);border-radius:16px;
  padding:1.75rem 3.25rem 1.75rem 1.75rem;margin-top:1.6rem;max-width:440px;
}
.v-home .permuta-mini-panel::after{
  content:'';position:absolute;top:0;bottom:0;right:-1.6rem;width:3rem;
  background:var(--lima);
  clip-path:polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%);
}
.v-home .permuta-mini-panel .permuta-mini-label{color:rgb(20 20 20 / .8);margin-bottom:.6rem}
.v-home .permuta-mini-panel .permuta-mini-h3{
  font-family:var(--f-display);font-weight:800;color:#141414;font-size:1.3rem;margin-bottom:1.25rem;
}
.v-home .permuta-mini-panel .hero-mw-form{display:flex;flex-wrap:wrap;gap:.85rem;align-items:stretch}
.v-home .permuta-mini-panel .hero-mw-form .btn{height:auto}
.v-home .permuta-mini-panel .btn-primary{background:#141414;color:var(--bone)}
.v-home .permuta-mini-panel .btn-primary:hover{background:#000}

/* Las dos vias bajo la matricula heredaban el estilo de .tel-alt, pensado para
   fondos oscuros: texto humo y hueso sobre el naranja del panel, con el
   subrayado del MISMO naranja (invisible) y un hover que los borraba del todo.
   Aqui van en tinta y como chips tocables: contraste de sobra y se leen. */
.v-home .permuta-mini-panel .alt-contacto{gap:.55rem;margin-top:1rem;align-items:stretch}
.v-home .permuta-mini-panel .alt-contacto .alt-sep{display:none}
.v-home .permuta-mini-panel .tel-alt{
  margin-top:0;padding:.5rem .85rem;border-radius:10px;
  background:rgb(20 20 20 / .07);border:1px solid rgb(20 20 20 / .24);
  color:rgb(20 20 20 / .82);font-weight:600;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.v-home .permuta-mini-panel .tel-alt b{color:#141414;border-bottom:none;padding-bottom:0}
.v-home .permuta-mini-panel .tel-alt:hover{background:rgb(20 20 20 / .14);border-color:rgb(20 20 20 / .45)}
.v-home .permuta-mini-panel .tel-alt:hover b{color:#000}
@media (max-width:640px){
  .v-home .permuta-mini-panel{max-width:100%;padding:1.5rem 1.6rem}
  .v-home .permuta-mini-panel::after{display:none}
  .v-home .permuta-mini-panel .hero-mw-form{flex-direction:column}
  .v-home .permuta-mini-panel .hero-mw-form .plate{max-width:100%}
}

/* --- Cómo funciona: 3 pasos ilustrados --- */
.v-home .como-funciona .sec-head{margin-bottom:2rem}
.v-home .como-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.v-home .como-card{background:transparent}
.v-home .como-media{position:relative;border-radius:14px;overflow:hidden;margin-bottom:1.1rem}
.v-home .como-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.v-home .como-tag{
  position:absolute;left:.75rem;bottom:.75rem;background:var(--lima);color:#141414;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:.4rem .65rem;border-radius:6px;
}
.v-home .como-card h3{font-family:var(--f-text);font-weight:600;font-size:1.1rem;margin-bottom:.4rem}
.v-home .como-card p{color:var(--humo);font-size:.92rem;line-height:1.55}
@media (max-width:760px){
  .v-home .como-grid{grid-template-columns:1fr;gap:2.25rem}
}

/* --- Franja de dato --- */
.v-home .franja-dato{padding:0 0 2.5rem}
.v-home .franja-dato-inner{
  background:var(--ink);border-radius:16px;padding:1.6rem 2rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.1rem;
}
.v-home .franja-dato-cifra{color:var(--lima);font-size:1.5rem;font-weight:700;flex:none}
.v-home .franja-dato-txt{color:var(--bone-2);font-size:.92rem}
.v-home .franja-dato-link{color:var(--bone);margin-left:auto;flex:none}
@media (max-width:640px){
  .v-home .franja-dato-inner{padding:1.4rem 1.3rem}
  .v-home .franja-dato-link{margin-left:0}
}


/* =========================================================
   FRAGMENTO: TASADOR (#/tasar) + ALERTAS (#/alertas)
   Namespace estricto: .v-tasar / .v-alertas
   Reutiliza tokens y utilidades del core (.ink, .bone, .btn,
   .label, .mono, .chip-plaza, .plate, .link-u) — no se
   redefinen aquí, solo se consumen.
   ========================================================= */

/* ================= TASAR ================= */
.v-tasar{display:block}
.v-tasar .tasar-shell{max-width:760px;padding-top:6.5rem;padding-bottom:6rem}

.v-tasar .tasar-head{margin-bottom:2.25rem}
.v-tasar .tasar-head h1{font-family:var(--f-serif);font-weight:500;font-size:clamp(2.2rem,5vw,3.4rem);margin:.6rem 0 1rem;letter-spacing:-.01em}
/* Contraste sobre el hueso de la cabecera. Tres textos venian de antes por
   debajo del minimo: el antetitulo naranja (2,33:1 a 11px), los numeros de
   los pasos y este subtitulo (4,31:1). El naranja pasa a una version tostada
   del MISMO tono, que si aguanta sobre claro. */
.v-tasar .label--lima{color:var(--lima-texto)}
/* Pero sobre la tarjeta oscura de la oferta manda el naranja de siempre: ahi
   el tostado es dark-on-dark y baja a 3,33:1. Cada fondo, su tono. */
.v-tasar .ink .label--lima{color:var(--lima)}
.v-tasar .tasar-sub{color:var(--humo);max-width:52ch;margin-bottom:2.25rem;font-size:1.02rem}

.v-tasar .tasar-steps{display:flex;align-items:flex-start;margin-top:.25rem}
.v-tasar .tasar-step{display:flex;flex-direction:column;align-items:center;gap:.55rem;flex:none;width:84px;text-align:center}
.v-tasar .tasar-step-num{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--linea-bone);color:#5F5A53;font-size:.78rem;font-weight:600;
  background:var(--bone);transition:border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.v-tasar .tasar-step.is-active .tasar-step-num{border-color:var(--lima);color:#141414;background:var(--lima);box-shadow:0 0 0 4px rgb(224 138 78 / .18)}
.v-tasar .tasar-step.is-done .tasar-step-num{border-color:var(--lima);color:#A0511A;background:transparent}
.v-tasar .tasar-step-label{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--humo)}
.v-tasar .tasar-step.is-active .tasar-step-label,
.v-tasar .tasar-step.is-done .tasar-step-label{color:var(--ink)}
.v-tasar .tasar-step-line{flex:1;height:2px;background:var(--linea-bone);margin:15px -6px 0;min-width:12px;transition:background-color .4s var(--ease)}
.v-tasar .tasar-step-line.is-done{background:var(--lima)}

.v-tasar .tasar-panel{transition:opacity .28s var(--ease), transform .28s var(--ease)}
.v-tasar .tasar-panel.is-swapping{opacity:0;transform:translateY(10px)}
@media (prefers-reduced-motion: reduce){
  .v-tasar .tasar-panel{transition:none}
  .v-tasar .tasar-panel.is-swapping{opacity:1;transform:none}
}

.v-tasar .tasar-card{
  position:relative;background:#fff;border:1px solid var(--linea-bone);border-radius:14px;
  padding:clamp(1.5rem,4vw,2.75rem);box-shadow:var(--shadow-bone);
}
.v-tasar .tasar-card::before{
  content:'';position:absolute;inset:-1px;border-radius:15px;padding:1px;
  background:linear-gradient(135deg,var(--lima),rgb(224 138 78 / 0) 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* --- Paso 1 --- */
.v-tasar .tasar-p1-label{font-family:var(--f-display);font-weight:600;font-size:1.3rem;margin-bottom:1.4rem}
.v-tasar .tasar-card .plate{margin-bottom:.5rem}
/* v23 · Telefono y consentimiento en el paso 1: la consulta cuesta dinero y
   una matricula identifica el coche de alguien, asi que quien pregunta se
   identifica antes de preguntar. */
.v-tasar .tasar-campo{margin-top:1rem;text-align:left}
.v-tasar .tasar-campo .field-label{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--humo);margin-bottom:.4rem}
.v-tasar .tasar-campo input{width:100%;background:var(--bone);border:1.5px solid var(--linea-bone);border-radius:8px;padding:.8rem .9rem;font-family:var(--f-mono);font-size:1rem;color:var(--ink)}
.v-tasar .tasar-campo input:focus{outline:none;border-color:var(--lima)}
.v-tasar .tasar-consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;text-align:left;font-size:.82rem;line-height:1.5;color:var(--humo);cursor:pointer}
.v-tasar .tasar-consent input{width:18px;height:18px;flex:none;margin-top:.15rem;accent-color:var(--lima)}
.v-tasar .tasar-consent b{color:var(--ink);font-weight:600}
.v-tasar .tasar-sello--demo{background:rgb(226 84 74 / .12);color:var(--oxido);border-color:var(--oxido)}
.v-tasar .tasar-error{
  color:var(--oxido);font-size:.85rem;margin-top:.6rem;display:none;line-height:1.5;
}
.v-tasar .tasar-error b{font-weight:600}
.v-tasar .tasar-error.show{display:block}
.v-tasar .turnstile{
  display:flex;align-items:center;gap:.9rem;border:1px solid var(--linea-bone);border-radius:8px;
  padding:.9rem 1.1rem;margin:1.75rem 0 .5rem;background:var(--bone-2);cursor:pointer;
}
.v-tasar .turnstile input[type="checkbox"]{width:20px;height:20px;accent-color:var(--lima);flex:none;cursor:pointer}
.v-tasar .turnstile .tf-text{font-size:.86rem;line-height:1.3}
.v-tasar .turnstile .tf-text b{
  display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;color:var(--humo);
  text-transform:uppercase;margin-top:.2rem;font-weight:400;
}
.v-tasar .tasar-card > .btn-block{margin-top:1.75rem}

/* --- Paso 2 --- */
.v-tasar .tasar-spinner{display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:2.75rem 0;text-align:center;color:var(--humo)}
.v-tasar .tasar-spinner-ring{
  width:40px;height:40px;border-radius:50%;border:3px solid var(--linea-bone);border-top-color:var(--lima);
  animation:tasarSpin .8s linear infinite;
}
@keyframes tasarSpin{ to{transform:rotate(360deg)} }
@media (prefers-reduced-motion: reduce){
  .v-tasar .tasar-spinner-ring{animation:none;border-top-color:var(--lima)}
}
.v-tasar .tasar-sello{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--humo);border:1px solid var(--linea-bone);
  border-radius:999px;padding:.4rem .8rem;margin-bottom:1.4rem;
}
.v-tasar .tasar-sello::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lima);flex:none}
.v-tasar .tasar-vehiculo h3{font-size:1.7rem;margin-bottom:.2rem}
.v-tasar .tasar-vehiculo .version{color:var(--humo);margin-bottom:1.1rem}
.v-tasar .tasar-datos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.9rem;
}
.v-tasar .tasar-datos > div{border-top:1px solid var(--linea-bone);padding-top:.6rem}
.v-tasar .tasar-datos dt{
  font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--humo);margin-bottom:.3rem;
}
.v-tasar .tasar-datos dd{font-family:var(--f-mono);font-weight:600;font-size:.92rem}
.v-tasar .tasar-confirm-q{font-family:var(--f-display);font-weight:600;font-size:1.15rem;margin-bottom:1.1rem}
.v-tasar .tasar-confirm-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* --- Paso 3 --- */
.v-tasar .tasar-q{margin-bottom:2.25rem;border:0;padding:0}
.v-tasar .tasar-q:last-of-type{margin-bottom:1.5rem}
.v-tasar .tasar-q-label{
  font-family:var(--f-display);font-weight:600;font-size:1.08rem;margin-bottom:1rem;padding:0;
}
.v-tasar .tasar-km-row{display:flex;align-items:center;gap:1.1rem}
.v-tasar .tasar-km-row input[type="range"]{flex:1;accent-color:var(--lima)}
.v-tasar .tasar-km-num{
  width:118px;flex:none;text-align:right;border:1.5px solid var(--linea-bone);border-radius:6px;
  padding:.65rem .75rem;font-weight:600;font-size:.95rem;
}
.v-tasar .tasar-km-num:focus{outline:none;border-color:var(--ink)}
.v-tasar .tasar-km-hint{margin-top:.5rem;color:var(--humo);font-size:.78rem}

.v-tasar .segmented{display:grid;gap:.75rem}
.v-tasar .segmented.cols-3{grid-template-columns:repeat(3,1fr)}
.v-tasar .segmented.cols-2{grid-template-columns:repeat(2,1fr)}
.v-tasar .seg-opt{position:relative}
.v-tasar .seg-opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.v-tasar .seg-opt label{
  display:flex;flex-direction:column;gap:.3rem;border:1.5px solid var(--linea-bone);border-radius:8px;
  padding:1rem 1.1rem;cursor:pointer;height:100%;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.v-tasar .seg-opt label b{font-size:.95rem;font-weight:600}
.v-tasar .seg-opt label span{font-size:.74rem;color:var(--humo);line-height:1.35}
.v-tasar .seg-opt input:checked + label{border-color:var(--ink);background:var(--bone-2)}
.v-tasar .seg-opt input:focus-visible + label{outline:2px solid var(--lima);outline-offset:2px}

.v-tasar .tasar-fotos{margin-top:.5rem;border-top:1px solid var(--linea-bone);padding-top:1.5rem}
.v-tasar .tasar-fotos summary{
  cursor:pointer;font-family:var(--f-mono);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--humo);
}
/* v24 · Version exacta y permiso de circulacion: el catalogo del proveedor
   deja la version vacia y es el campo que mas mueve la tasacion. */
.v-tasar .tasar-detalle-por-que{color:var(--humo);font-size:.82rem;line-height:1.55;margin:.9rem 0 .2rem}
.v-tasar .tasar-campo-pista{color:var(--humo);font-size:.72rem;line-height:1.5;margin-top:.4rem}
.v-tasar .tasar-campo-pista b{color:var(--ink);font-weight:600}
.v-tasar .tasar-campo input[type="file"]{
  width:100%;background:var(--bone-2);border:1.5px dashed var(--linea-bone);border-radius:8px;
  padding:.7rem;font-size:.82rem;color:var(--ink);cursor:pointer;
}
.v-tasar .tasar-campo input[type="file"]:hover{border-color:var(--lima)}
.v-tasar .tasar-detalle-estado{
  margin-top:.9rem;font-family:var(--f-mono);font-size:.72rem;padding:.5rem .7rem;border-radius:8px;
  background:rgb(53 192 110 / .12);color:#1E7A45;
}
.v-tasar .tasar-detalle-estado.es-error{background:rgb(226 84 74 / .1);color:var(--oxido)}
.v-tasar .tasar-dropzone{
  margin-top:1rem;border:1.5px dashed var(--linea-bone);border-radius:8px;padding:2rem 1.5rem;
  text-align:center;color:var(--humo);font-size:.85rem;line-height:1.6;
}
/* v25 · La horquilla se estrecha segun lo que aporte el cliente. Se enseña la
   escalera entera para que se vea que subir el permiso tiene premio. */
.v-tasar .tasar-escala{list-style:none;margin:.9rem 0 1.3rem;display:flex;flex-direction:column;gap:.35rem}
.v-tasar .tasar-escala li{
  display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  font-size:.78rem;padding:.5rem .7rem;border-radius:7px;background:var(--bone-2);color:var(--humo);
}
.v-tasar .tasar-escala li.es-mejor{background:rgb(53 192 110 / .12);color:#1E7A45;font-weight:600}
.v-tasar .tasar-escala-v{font-family:var(--f-mono);font-size:.72rem;white-space:nowrap}
.v-tasar #tasar-p3-next{margin-top:2rem}
/* Desglose: los conceptos que SUMAN se ven distintos de los que restan.
   Antes solo había restas, así que un coche cuidado no veía por ninguna
   parte que su cuidado le estuviera pagando algo. */
.v-tasar .tasar-desglose-row .mono.pos{color:var(--verde)}
.v-tasar .tasar-condicion-t{margin-top:.9rem;font-weight:600;color:var(--bone)}
.v-tasar .tasar-comprueba{
  margin:.6rem 0 .9rem;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:.45rem;
}
.v-tasar .tasar-comprueba li{
  position:relative;padding-left:1.5rem;font-size:.92rem;line-height:1.5;color:var(--humo-2);
}
.v-tasar .tasar-comprueba li::before{
  content:'';position:absolute;left:.35rem;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--lima);
}
.v-tasar .tasar-condicion p + p{margin-top:.75rem}
/* Salida sin cifra: cuando faltan datos para estimar nada con cabeza. */
.v-tasar .tasar-sinprecio-t{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,3vw,1.9rem);
  line-height:1.15;letter-spacing:-.02em;margin:.6rem 0 1rem;color:var(--bone)}
.v-tasar .tasar-sinprecio-p{color:var(--humo-2);max-width:52ch;margin-bottom:1.6rem;line-height:1.6}

/* --- Paso 4: oferta --- */
.v-tasar .tasar-oferta{
  border-radius:14px;padding:clamp(1.75rem,5vw,3rem);position:relative;overflow:hidden;
}
.v-tasar .tasar-oferta > *{position:relative;z-index:1}
.v-tasar .tasar-p4-back{display:inline-block;margin-bottom:1.25rem;font-size:.85rem}
.v-tasar .tasar-oferta > .label{display:block}
/* Es una horquilla, no una cifra: ocupa el doble de ancho y en movil se salia. */
.v-tasar .tasar-oferta-cifra{
  font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,7vw,3.4rem);
  color:var(--lima);line-height:1.05;margin:.7rem 0 .9rem;letter-spacing:-.02em;
  overflow-wrap:break-word;
}
.v-tasar .tasar-oferta-precision{
  font-size:.85rem;line-height:1.6;color:var(--humo-2);margin-bottom:1.9rem;
  border-left:2px solid var(--linea);padding-left:.9rem;
}
.v-tasar .tasar-oferta-precision.precision--alta{border-left-color:var(--lima);color:var(--bone)}
.v-tasar .tasar-doble-row .t small{color:var(--humo-2);font-size:.78em;font-weight:400}

.v-tasar .tasar-afinar{
  display:flex;flex-direction:column;gap:.2rem;width:100%;text-align:left;cursor:pointer;
  border:1.5px dashed var(--lima);border-radius:8px;padding:1rem 1.25rem;margin-bottom:2rem;
  background:rgb(224 138 78 / .07);color:var(--bone);font:inherit;
}
.v-tasar .tasar-afinar:hover{background:rgb(224 138 78 / .14)}
.v-tasar .tasar-afinar-t{font-weight:600;font-size:.92rem;color:var(--lima)}
.v-tasar .tasar-afinar-s{font-size:.8rem;color:var(--humo-2);line-height:1.5}

.v-tasar .tasar-doble{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.9rem}
.v-tasar .tasar-doble-row{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  border:1px solid var(--linea);border-radius:8px;padding:1.1rem 1.3rem;
}
.v-tasar .tasar-doble-row.is-plus{border-color:var(--lima);background:rgb(224 138 78 / .07)}
.v-tasar .tasar-doble-row .t{font-size:.88rem;color:var(--humo-2)}
.v-tasar .tasar-doble-row .v{font-family:var(--f-mono);font-weight:600;font-size:1.3rem;flex:none}
.v-tasar .tasar-doble-row.is-plus .v{color:var(--lima)}

.v-tasar .tasar-desglose{border-top:1px solid var(--linea);padding-top:1.3rem;margin-bottom:1.9rem}
.v-tasar .tasar-desglose h4{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--humo-2);margin-bottom:.9rem;font-weight:400;
}
.v-tasar .tasar-desglose-row{
  display:flex;justify-content:space-between;gap:1rem;font-family:var(--f-mono);font-size:.85rem;
  padding:.45rem 0;color:var(--humo-2);
}
.v-tasar .tasar-desglose-row .neg{color:var(--oxido)}
.v-tasar .tasar-desglose-row.total{
  border-top:1px solid var(--linea);margin-top:.4rem;padding-top:.8rem;color:var(--bone);font-weight:600;
}

.v-tasar .tasar-mercado{margin-bottom:1.9rem}
.v-tasar .tasar-mercado > p{color:var(--humo-2);font-size:.92rem;margin-bottom:1.1rem;line-height:1.6}
.v-tasar .tasar-bar-row{display:flex;align-items:center;gap:1rem;margin-bottom:.65rem}
.v-tasar .tasar-bar-row .label-mini{
  width:76px;flex:none;font-family:var(--f-mono);font-size:.7rem;color:var(--humo-2);
  text-transform:uppercase;letter-spacing:.05em;
}
.v-tasar .tasar-bar-track{flex:1;height:10px;background:var(--ink-3);border-radius:999px;overflow:hidden}
.v-tasar .tasar-bar-fill{display:block;height:100%;border-radius:999px;background:var(--humo-2)}
.v-tasar .tasar-bar-row.is-nave .tasar-bar-fill{background:var(--lima)}
.v-tasar .tasar-bar-value{width:64px;flex:none;text-align:right;font-family:var(--f-mono);font-size:.78rem;color:var(--humo-2)}

.v-tasar .tasar-condicion{
  border:1px solid var(--linea);border-radius:8px;padding:1.25rem 1.5rem;margin-bottom:2rem;
  font-size:.9rem;color:var(--humo-2);line-height:1.65;
}
.v-tasar .tasar-condicion strong{color:var(--bone)}

.v-tasar .tasar-ctas{display:flex;flex-wrap:wrap;gap:1rem}
.v-tasar .tasar-whatsapp{gap:.6rem}

.v-tasar .tasar-cita-form{
  margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid var(--linea);
  display:flex;flex-direction:column;gap:1.1rem;
}
.v-tasar .tasar-field{display:flex;flex-direction:column;gap:.4rem}
.v-tasar .tasar-field label{
  font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--humo-2);
}
.v-tasar .tasar-field input, .v-tasar .tasar-field select{
  background:var(--ink);border:1.5px solid var(--linea);border-radius:8px;padding:.8rem 1rem;
  color:var(--bone);font-size:.92rem;
}
.v-tasar .tasar-field input:focus, .v-tasar .tasar-field select:focus{border-color:var(--lima);outline:none}
.v-tasar .tasar-field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

.v-tasar .tasar-cita-success{
  margin-top:1.75rem;padding:1.15rem 1.4rem;border:1px solid var(--lima);border-radius:8px;
  background:rgb(224 138 78 / .07);display:flex;align-items:center;gap:.75rem;color:var(--bone);font-size:.92rem;
}
.v-tasar .tasar-cita-success svg{color:var(--lima);flex:none}
.v-tasar .tasar-cita-form[hidden], .v-tasar .tasar-cita-success[hidden]{display:none}

.v-tasar .tasar-microcopy{margin-top:1.75rem;text-align:center;display:block}

/* --- Responsive tasar --- */
@media (max-width:640px){
  .v-tasar .tasar-shell{padding-top:5.5rem}
  .v-tasar .tasar-steps{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.2rem}
  .v-tasar .tasar-step{width:72px;gap:.4rem}
  .v-tasar .tasar-step-num{width:32px;height:32px;font-size:.82rem}
  .v-tasar .tasar-step-label{font-size:.62rem;letter-spacing:.03em}
  .v-tasar .tasar-step-line{margin-top:16px}
  .v-tasar .tasar-datos{grid-template-columns:repeat(2,1fr)}
  .v-tasar .segmented.cols-3,.v-tasar .segmented.cols-2{grid-template-columns:1fr}
  .v-tasar .tasar-km-row{flex-direction:column;align-items:stretch}
  .v-tasar .tasar-km-num{width:100%;text-align:left}
  .v-tasar .tasar-ctas{flex-direction:column;align-items:stretch}
  .v-tasar .tasar-field-row{grid-template-columns:1fr}
  .v-tasar .tasar-doble-row{flex-direction:column;align-items:flex-start;gap:.4rem}
}

/* ================= ALERTAS ================= */
.v-alertas{display:block}
.v-alertas .alertas-hero{padding-top:7rem;padding-bottom:4.5rem}
.v-alertas .alertas-shell{display:grid;grid-template-columns:5fr 7fr;gap:3.5rem;align-items:start}
.v-alertas .alertas-intro h1{
  font-family:var(--f-serif);font-weight:500;
  font-size:clamp(2.1rem,5vw,3.1rem);margin:.75rem 0 1.25rem;max-width:15ch;letter-spacing:-.01em;
}
.v-alertas .alertas-intro em{font-style:italic;color:var(--lima);font-family:var(--f-display)}
.v-alertas .alertas-copy{color:var(--humo-2);max-width:44ch;font-size:1rem}

.v-alertas .alertas-panel{
  background:var(--ink-2);border:1px solid var(--linea);border-radius:12px;
  padding:clamp(1.5rem,4vw,2.25rem);display:flex;flex-direction:column;gap:1.4rem;
}
.v-alertas .alertas-field{display:flex;flex-direction:column;gap:.55rem}
.v-alertas .alertas-field input, .v-alertas .alertas-field select{
  background:var(--ink);border:1.5px solid var(--linea);border-radius:8px;padding:.85rem 1rem;
  color:var(--bone);font-size:.95rem;
}
.v-alertas .alertas-field input:focus, .v-alertas .alertas-field select:focus{border-color:var(--lima);outline:none}
.v-alertas .alertas-field input::placeholder{color:var(--humo-2)}
.v-alertas .alertas-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.v-alertas .alertas-slider{display:flex;align-items:center;gap:1rem}
.v-alertas .alertas-slider input[type="range"]{flex:1;accent-color:var(--lima)}
.v-alertas .alertas-cuota-value{font-size:1.05rem;font-weight:600;white-space:nowrap;flex:none}

.v-alertas .alertas-lista{padding-top:1rem;padding-bottom:5.5rem}
.v-alertas .alertas-lista-h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:2rem}
.v-alertas .alertas-list{display:flex;flex-direction:column;gap:1rem}
.v-alertas .alerta-item{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--linea-bone);border-radius:10px;padding:1.25rem 1.5rem;
}
.v-alertas .alerta-chip{flex:none}
.v-alertas .alerta-body{flex:1;min-width:180px}
.v-alertas .alerta-body h3{font-size:1.08rem;margin-bottom:.2rem}
.v-alertas .alerta-filtro{color:var(--humo);font-size:.78rem}
.v-alertas .alerta-avisando{color:var(--humo);font-size:.78rem;flex:none}
.v-alertas .alertas-vacio{color:var(--humo);font-size:.92rem}

/* --- Responsive alertas --- */
@media (max-width:1024px){
  .v-alertas .alertas-shell{grid-template-columns:1fr;gap:2.5rem}
}
@media (max-width:640px){
  .v-alertas .alertas-row{grid-template-columns:1fr}
  .v-alertas .alerta-item{flex-direction:column;align-items:flex-start}
}

/* ---------- Tabs alerta/encargo + seguimiento de encargos ---------- */
.v-alertas .alertas-panel form{display:flex;flex-direction:column;gap:1.4rem}
.v-alertas .alertas-panel form[hidden]{display:none}
.v-alertas .alertas-tabs{display:flex;gap:.4rem;background:var(--ink);border:1px solid var(--linea);border-radius:999px;padding:.35rem}
.v-alertas .alertas-tab{flex:1;appearance:none;background:transparent;border:0;color:var(--humo-2);font-family:var(--f-text);font-weight:600;font-size:.88rem;padding:.65rem 1rem;min-height:44px;border-radius:999px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);line-height:1.25}
.v-alertas .alertas-tab:hover{color:var(--bone)}
.v-alertas .alertas-tab.is-active{background:var(--lima);color:var(--ink)}
@media (max-width:400px){
  .v-alertas .alertas-tab{font-size:.74rem;padding:.65rem .5rem;letter-spacing:-.01em}
}
.v-alertas .encargo-nota{font-size:.72rem;line-height:1.7;color:var(--humo-2);letter-spacing:.02em}
.v-alertas .canal-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.v-alertas .canal-chip{position:relative;cursor:pointer}
.v-alertas .canal-chip input{position:absolute;opacity:0;pointer-events:none}
/* 44 px de alto minimo: son los dos unicos controles de la pagina que se
   pulsan con el dedo y se quedaban en 36 y 40. */
.v-alertas .canal-chip span{display:inline-flex;align-items:center;min-height:44px;border:1.5px solid var(--linea);border-radius:999px;padding:.5rem 1.1rem;font-size:.82rem;color:var(--humo-2);transition:all .2s var(--ease)}
.v-alertas .canal-chip input:checked + span{border-color:var(--lima);color:var(--bone);background:rgb(224 138 78 / .12)}
.v-alertas .canal-chip input:focus-visible + span{outline:2px solid var(--lima);outline-offset:2px}
.v-alertas .encargo-lead{color:var(--humo);margin:.5rem 0 1.75rem;max-width:56ch}
.v-alertas .encargo-track{background:var(--bone-2);border:1px solid var(--linea-bone);border-radius:12px;padding:clamp(1.4rem,3.5vw,2rem);max-width:780px}
.v-alertas .encargo-track + .encargo-track{margin-top:1.25rem}
.v-alertas .encargo-track-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.v-alertas .enc-nombre{font-family:var(--f-display);font-weight:600;font-size:1.15rem;color:var(--ink)}
.v-alertas .enc-meta{color:var(--humo);font-size:.76rem;margin-top:.35rem}
.v-alertas .chip-estado{display:inline-block;background:var(--lima);color:var(--ink);border-radius:999px;padding:.4rem .85rem;font-size:.66rem;letter-spacing:.09em;font-weight:600;white-space:nowrap}
.v-alertas .encargo-timeline{list-style:none;margin:0;padding:0}
.v-alertas .encargo-timeline li{display:flex;gap:.95rem;align-items:flex-start;position:relative;padding-bottom:1.2rem}
.v-alertas .encargo-timeline li:last-child{padding-bottom:0}
.v-alertas .encargo-timeline li::before{content:"";position:absolute;left:6px;top:18px;bottom:2px;width:2px;background:var(--linea-bone)}
.v-alertas .encargo-timeline li:last-child::before{display:none}
.v-alertas .encargo-timeline li.is-done::before{background:var(--lima)}
.v-alertas .enc-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--linea-bone);background:var(--bone);flex:none;margin-top:.12rem;position:relative;z-index:1}
.v-alertas li.is-done .enc-dot{background:var(--lima);border-color:var(--lima)}
.v-alertas li.is-current .enc-dot{border-color:var(--lima);box-shadow:0 0 0 4px rgb(224 138 78 / .25)}
.v-alertas .enc-fase{font-size:.92rem;color:var(--humo);padding-top:0}
.v-alertas li.is-done .enc-fase, .v-alertas li.is-current .enc-fase{color:var(--ink)}
.v-alertas li.is-current .enc-fase{font-weight:600}
.v-home .home-encargo-ctas{display:flex;gap:.9rem;flex-wrap:wrap}


/* =========================================================
   FRAGMENTO — #/nave · #/stock · #/coche/:id
   Namespaces: .v-nave  .v-stock  .v-coche
   Consume tokens/helpers/componentes del core (nave7-boceto.html).
   No se toca nada global — todo prefijado.
   ========================================================= */

/* ---------------------------------------------------------
   .v-nave — EL PLANO DE LA NAVE
   --------------------------------------------------------- */
.v-nave{display:block}
.v-nave .nave-section{padding-top:3.5rem}
.v-nave .nave-head h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:.6rem 0 1rem;max-width:18ch}


.v-nave .nave-plano-wrap{
  position:relative;background:var(--ink-2);border:1px solid var(--linea);
  border-radius:16px;padding:clamp(1rem,3vw,2rem);margin:2rem 0;overflow:hidden;
}
.v-nave .nave-plano-wrap::before{
  content:'';position:absolute;inset:0;background-image:var(--grain);
  opacity:.05;pointer-events:none;mix-blend-mode:overlay;
}
.v-nave .nave-plano-wrap svg{width:100%;height:auto;display:block;position:relative}
/* En pantallas estrechas el plano entero se quedaba en ~290px: plazas de 35px
   imposibles de tocar y sprites invisibles. Se deja a tamaño legible dentro de
   un carril con desplazamiento lateral propio (la pagina no se desborda). */
.v-nave .nave-desliza{display:none}
@media (max-width:640px){
  .v-nave .nave-plano-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
  .v-nave .nave-plano-scroll svg{min-width:560px}
  .v-nave .nave-desliza{display:block;text-align:center;font-size:.68rem;color:var(--humo-2);margin:.6rem 0 0}
}

/* Suelo negro liso: los coches (fotos cenitales) son los que deben resaltar */
/* Suelo: foto cenital real de hormigón + veladura oscura (cohesión con la sección ink) */
.v-nave .nave-suelo{filter:saturate(.85) brightness(.82)}
.v-nave .nave-suelo-tinte{fill:rgb(6 6 7 / .42)}
.v-nave .nave-outline{fill:none;stroke:var(--humo-2);stroke-width:2.5}
.v-nave .nave-zona{fill:rgb(16 16 19 / .62);stroke:var(--linea);stroke-width:1}
.v-nave .nave-zona--entrada{fill:rgb(255 255 255 / .05)}
.v-nave .nave-zona-label{
  font-family:var(--f-mono);font-size:16px;letter-spacing:.16em;
  fill:var(--humo-2);text-transform:uppercase;
}
.v-nave .puerta-hueco{stroke:var(--ink-2);stroke-width:7;stroke-linecap:round}
.v-nave .puerta-arco{fill:none;stroke:var(--linea);stroke-width:1.2;stroke-dasharray:5 5}
.v-nave .puerta-hoja{stroke:var(--humo-2);stroke-width:2.25}
.v-nave .puerta-arrow{fill:var(--lima);filter:drop-shadow(0 2px 6px rgb(224 138 78 / .55))}
.v-nave .puerta-label{font-size:15px;font-weight:600;fill:var(--lima);letter-spacing:.14em}

.v-nave .plaza{cursor:pointer}
.v-nave .plaza-slot{
  fill:rgb(255 255 255 / .04);stroke:rgb(238 241 245 / .22);stroke-width:1.5;
  transition:stroke .25s var(--ease);
}
/* Coche-foto: sombra proyectada sobre el hormigón (el hover ya trae la suya) */
.v-nave .plaza-car--foto{filter:drop-shadow(0 8px 10px rgb(0 0 0 / .55))}
/* Atrezzo del taller y la recepción: decorativo, nunca tapa clics */
.v-nave .nave-prop{pointer-events:none;filter:drop-shadow(0 6px 8px rgb(0 0 0 / .5))}
.v-nave .plaza[data-estado="libre"] .plaza-slot{
  fill:none;stroke:var(--humo-2);stroke-dasharray:6 6;
}
.v-nave .plaza:hover .plaza-slot,
.v-nave .plaza:focus-visible .plaza-slot{stroke:var(--bone);stroke-width:2}

.v-nave .plaza-cod{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;
  fill:var(--humo-2);text-transform:uppercase;pointer-events:none;user-select:none;
}

/* v3: el coche va pintado de SU color real; el estado lo cuenta la plaza */
.v-nave .plaza .car-body{fill:var(--car-color,#8C95A3);stroke:rgb(238 241 245 / .45);stroke-width:1.2}
.v-nave .plaza[data-estado="disponible"] .plaza-slot{stroke:var(--verde);stroke-width:2}
.v-nave .plaza[data-estado="reservado"] .plaza-slot{stroke:var(--lima);stroke-width:2;fill:rgb(224 138 78 / .06)}
.v-nave .plaza[data-estado="vendido"] .plaza-car{filter:grayscale(1) brightness(.6);opacity:.55}
.v-nave .plaza-estado-dot{pointer-events:none}
.v-nave .plaza[data-estado="disponible"] .plaza-estado-dot{fill:var(--verde)}
.v-nave .plaza[data-estado="reservado"] .plaza-estado-dot{fill:var(--lima)}
.v-nave .plaza[data-estado="vendido"] .plaza-estado-dot{fill:var(--oxido)}
.v-nave .car-glass{fill:#101013;opacity:.78}
.v-nave .car-detail{fill:rgb(16 16 19 / .35)}
.v-nave .car-shadow{fill:rgb(0 0 0 / .4)}
.v-nave .plaza-line{stroke:rgb(238 241 245 / .28);stroke-width:2;fill:none;pointer-events:none}

.v-nave .plaza-car{
  transform-box:fill-box;transform-origin:center;
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
.v-nave .plaza:hover .plaza-car,
.v-nave .plaza:focus-visible .plaza-car{
  transform:translateY(-5px) scale(1.08);
  filter:drop-shadow(0 10px 12px rgb(16 16 19 / .55)) brightness(1.14);
}

@keyframes v-nave-blink{0%,100%{opacity:1}50%{opacity:.15}}
.v-nave .plaza.is-blink{animation:v-nave-blink .5s ease-in-out 2}


.v-nave .nave-banner{
  border:1px solid var(--linea);border-radius:10px;background:var(--ink-2);
  padding:1.25rem 1.5rem;max-width:62ch;font-size:.95rem;
}
.v-nave .nave-banner strong{color:var(--lima)}

/* =====================================================================
   FICHA RÁPIDA de una plaza — v27
   Pegajosa arriba del plano. Un solo borde de 1 px y una sombra con
   desplazamiento Y desenfoque: antes llevaba borde naranja, un degradado
   con máscara encima y una sombra plana, tres cosas haciendo el mismo
   trabajo y ninguna del todo bien.
   ===================================================================== */
.v-nave .nave-quick{position:sticky;top:76px;z-index:60;margin-bottom:1.1rem}
.v-nave .nq-card{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;gap:1.25rem;
  background:var(--ink-2);border:1px solid var(--linea);border-radius:14px;
  padding:.85rem;overflow:hidden;
  box-shadow:0 22px 46px -24px rgb(0 0 0 / .9), 0 3px 8px -4px rgb(0 0 0 / .6);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
/* El estado se dice con un filo a la izquierda, no tiñendo la tarjeta entera. */
.v-nave .nq-card[data-estado]{border-left:3px solid var(--verde)}
.v-nave .nq-card[data-estado="reservado"]{border-left-color:var(--lima)}
.v-nave .nq-card[data-estado="vendido"]{border-left-color:var(--humo-2);opacity:.92}
.v-nave .nq-card.nq-enter{opacity:0;transform:translateY(-10px);transition:none}

/* ---- Foto ---- */
.v-nave .nq-foto{
  position:relative;width:190px;aspect-ratio:3/2;border-radius:10px;
  overflow:hidden;background:var(--ink-3);align-self:center;
}
.v-nave .nq-car-img{width:100%;height:100%;object-fit:cover;display:block}
.v-nave .nq-foto .car-side{width:100%;display:block}
.v-nave .nq-plaza{
  position:absolute;left:.45rem;top:.45rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;font-weight:700;
  padding:.22rem .45rem;border-radius:6px;
  background:rgb(16 16 19 / .82);color:var(--bone);border:1px solid rgb(243 240 234 / .22);
}
.v-nave .nq-etiqueta{
  position:absolute;right:.45rem;top:.45rem;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--f-mono);font-size:.74rem;font-weight:700;
  background:#1A6086;color:#fff;border:2px solid rgb(255 255 255 / .85);
}
.v-nave .nq-etiqueta[data-et="B"]{background:#E8B910;color:#141414}
.v-nave .nq-etiqueta[data-et="0"],
.v-nave .nq-etiqueta[data-et="ECO"]{background:#1E7A46;font-size:.6rem}

/* ---- Qué es ---- */
.v-nave .nq-info{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.28rem}
.v-nave .nq-titulo{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.v-nave .nq-modelo{
  font-family:var(--f-display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;
  color:var(--bone);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v-nave .nq-version{color:var(--humo-2);font-size:.88rem;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Fila de datos: valor arriba, etiqueta debajo, separados por filetes. Es lo
   que se mira antes de bajar a verlo, y antes no aparecía por ningún lado. */
.v-nave .nq-datos{display:flex;flex-wrap:wrap;gap:.15rem .85rem;margin-top:.45rem}
.v-nave .nq-dato{display:flex;flex-direction:column;gap:.1rem;padding-right:.85rem;
  border-right:1px solid var(--linea)}
.v-nave .nq-dato:last-child{border-right:0;padding-right:0}
.v-nave .nq-dato b{font-family:var(--f-mono);font-size:.86rem;color:var(--bone);
  font-variant-numeric:tabular-nums;line-height:1.2;font-weight:500}
.v-nave .nq-dato span{font-size:.66rem;letter-spacing:.04em;color:var(--humo-2)}
.v-nave .nq-gancho{
  font-family:var(--f-serif);font-style:italic;font-size:.84rem;line-height:1.4;
  color:var(--humo-2);margin:.5rem 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.v-nave .nq-chip{flex:none}
/* En escritorio manda la pastilla; en móvil, la palabra dentro de la línea de
   versión. Dos formas del mismo dato, cada una donde cabe. */
.v-nave .nq-estado-linea{display:none}

/* ---- Cuánto cuesta y qué hago ---- */
.v-nave .nq-lateral{
  display:flex;flex-direction:column;justify-content:center;gap:.85rem;
  padding-left:1.25rem;border-left:1px solid var(--linea);min-width:300px;
}
.v-nave .nq-precio{display:flex;flex-direction:column;gap:.1rem}
.v-nave .nq-cuota{font-family:var(--f-display);font-weight:800;font-size:1.75rem;
  line-height:1;letter-spacing:-.03em;color:var(--lima)}
.v-nave .nq-cuota-pie{font-size:.72rem;color:var(--humo-2)}
.v-nave .nq-contado{font-family:var(--f-mono);font-size:.8rem;color:var(--bone);
  font-variant-numeric:tabular-nums;margin-top:.3rem}
.v-nave .nq-vendido{font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--humo-2)}
/* Los dos controles en FILA: apilados subían la tarjeta a 263 px, y esto
   flota pegado encima del plano. Cuanto más baja, más nave se ve. */
/* Los dos controles a la MISMA altura (44 px) y con el mismo cuerpo de
   letra. Antes el de llamar medía 78 y el de la ficha 60: dos botones
   juntos con alturas distintas es lo que hacía que cantara tanto. */
.v-nave .nq-acciones{display:flex;align-items:stretch;gap:.5rem}
.v-nave .nq-acciones .nq-contacto{flex:none;border-radius:10px;overflow:hidden}
.v-nave .nq-acciones .bc-tel{
  min-height:44px;padding:.4rem .85rem;font-size:.86rem;gap:.45rem;
  white-space:nowrap;font-weight:600;
}
.v-nave .nq-acciones .bc-tel svg{width:16px;height:16px}
.v-nave .nq-acciones .bc-wa{min-width:44px;padding:0 .75rem}
.v-nave .nq-acciones .bc-wa svg{width:17px;height:17px}
.v-nave .nq-acciones .nq-cta{
  flex:1 1 auto;min-height:44px;height:44px;padding:.4rem 1.1rem;font-size:.88rem;
}
.v-nave .nq-cta{justify-content:center;white-space:nowrap}

/* ---- Plaza libre y estado de partida ---- */
.v-nave .nq-card.is-libre{
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  border-left:1px dashed var(--linea);border-color:var(--linea);border-style:dashed;
  box-shadow:none;
}
.v-nave .nq-card.is-empty{
  grid-template-columns:1fr;justify-items:center;text-align:center;
  border-left:1px solid var(--linea);box-shadow:none;
}
.v-nave .nq-libre-marca{
  display:grid;place-items:center;width:64px;height:64px;border-radius:12px;
  border:1px dashed var(--linea);font-family:var(--f-mono);font-size:1.05rem;
  color:var(--humo-2);letter-spacing:.06em;
}
.v-nave .nq-card.is-libre .nq-version{white-space:normal;max-width:52ch}
.v-nave .nq-hint{color:var(--humo-2);font-size:.8rem;display:flex;align-items:center;
  gap:.6rem;padding:.5rem 0;margin:0}
.v-nave .nq-hint svg{width:18px;height:18px;color:var(--lima)}

.v-nave .plaza.is-sel .plaza-slot{stroke:var(--lima);stroke-width:2.5}
/* Filtro: lo que no cuadra se apaga, no se esconde. Un plano al que le faltan
   trozos deja de ser un plano. */
.v-nave .plaza{transition:opacity .28s var(--ease)}
.v-nave .plaza.is-apagada{opacity:.2;pointer-events:none}

/* ---- Fila de filtros: antes eran tres cajas de cifras MÁS cuatro pastillas
   de leyenda, dos bloques diciendo lo mismo con distinta cara. ---- */
.v-nave .nave-lead{color:var(--humo-2);max-width:64ch;margin:0 0 1.6rem;font-size:1.02rem;line-height:1.6}
.v-nave .nave-filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.v-nave .nave-filtro{
  display:inline-flex;align-items:baseline;gap:.45rem;
  padding:.6rem 1rem;min-height:44px;border-radius:999px;cursor:pointer;
  border:1px solid var(--linea);background:transparent;color:var(--bone);
  font-family:var(--f-text);font-size:.92rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.v-nave .nave-filtro .chip-dot{align-self:center}
.v-nave .nave-filtro b{font-family:var(--f-mono);font-weight:700;font-variant-numeric:tabular-nums}
.v-nave .nave-filtro span{color:var(--humo-2)}
.v-nave .nave-filtro:hover:not([disabled]){border-color:var(--humo-2);background:rgb(243 240 234 / .05)}
.v-nave .nave-filtro[aria-pressed="true"]{border-color:var(--lima);background:rgb(224 138 78 / .13)}
.v-nave .nave-filtro[aria-pressed="true"] span{color:var(--bone)}
.v-nave .nave-filtro[disabled]{opacity:.4;cursor:default}

@media (max-width:900px){
  .v-nave .nq-card{grid-template-columns:auto minmax(0,1fr);gap:.9rem}
  .v-nave .nq-foto{width:132px}
  .v-nave .nq-gancho{display:none}
  .v-nave .nq-lateral{
    grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;
    padding-left:0;padding-top:.85rem;border-left:0;border-top:1px solid var(--linea);
    min-width:0;gap:1rem;
  }
  .v-nave .nq-acciones{flex-direction:row;align-items:center}
}
@media (max-width:767px){
  /* En una pantalla de móvil esta tarjeta flota SOBRE el plano: cada píxel de
     alto es nave que el visitante deja de ver. Así que aquí se queda solo lo
     que hace decidir —qué es, cuánto cuesta y cómo verlo— y se va lo demás.
     Con todo puesto medía 584 px, más de la mitad de la pantalla. */
  .v-nave .nave-quick{top:66px}
  .v-nave .nq-card{padding:.7rem;gap:.7rem .8rem}
  .v-nave .nq-foto{width:104px;align-self:start}
  .v-nave .nq-modelo{font-size:1.02rem}
  .v-nave .nq-version{font-size:.78rem}
  .v-nave .nq-titulo{gap:.45rem;flex-wrap:nowrap}
  /* La pastilla de estado hacía envolver el título y costaba 34 px. Aquí el
     estado se dice con palabra en la línea de abajo y con el filo de color
     del borde izquierdo, que es el mismo código de la leyenda. */
  .v-nave .nq-card .nq-chip{display:none}
  .v-nave .nq-estado-linea{display:inline;color:var(--verde);font-weight:600}
  .v-nave .nq-estado-linea[data-estado="reservado"]{color:#F0B183}
  .v-nave .nq-estado-linea[data-estado="vendido"]{color:var(--oxido)}
  .v-nave .nq-estado-linea::after{content:' · ';color:var(--humo-2);font-weight:400}
  .v-nave .nq-foto{width:96px}
  .v-nave .nq-datos{gap:.35rem;margin-top:.35rem;align-items:baseline}
  .v-nave .nq-dato{flex-direction:row;gap:0;padding-right:0;border-right:0}
  .v-nave .nq-dato span{display:none}
  .v-nave .nq-dato + .nq-dato::before{content:'·';margin-right:.35rem;color:var(--humo-2)}
  .v-nave .nq-dato b{font-size:.78rem;color:var(--humo-2);font-weight:400}
  /* Año, kilómetros y combustible. Cambio y potencia se ven en la ficha. */
  .v-nave .nq-dato:nth-child(n+4){display:none}
  /* El gancho es literatura: en la ficha completa sí, aquí estorba. */
  .v-nave .nq-gancho{display:none}
  .v-nave .nq-cuota{font-size:1.3rem}
  .v-nave .nq-cuota-pie,.v-nave .nq-contado{font-size:.7rem}
  .v-nave .nq-lateral{align-items:center;justify-content:space-between;flex-direction:row;gap:.8rem}
  .v-nave .nq-precio{flex:none}
  /* Llamar y WhatsApp ya viven en la barra fija de abajo en todo el móvil:
     repetirlos aquí era gastar 100 px en decir dos veces lo mismo. */
  .v-nave .nq-acciones .nq-contacto{display:none}
  .v-nave .nq-acciones{flex:1 1 auto;justify-content:flex-end}
  .v-nave .nq-cta{flex:0 1 auto;padding:.6rem 1rem;font-size:.88rem;min-height:44px}
  .v-nave .nave-filtro{font-size:.86rem;padding:.55rem .85rem}
  .v-nave .nave-lead{font-size:.96rem;margin-bottom:1.3rem}
}
@media (max-width:640px){
  .v-nave .nave-plano-wrap{padding:.85rem}
}
@media (max-width:400px){
  .v-nave .nq-foto{width:86px}
  .v-nave .nq-dato b{font-size:.74rem}
  .v-nave .nq-modelo{font-size:.98rem}
}
@media (prefers-reduced-motion: reduce){
  .v-nave .plaza-car{transition:none}
  .v-nave .plaza:hover .plaza-car,
  .v-nave .plaza:focus-visible .plaza-car{transform:none;filter:none}
  .v-nave .plaza.is-blink{animation:none}
  .v-nave .nq-card{transition:none}
}

/* ---------------------------------------------------------
   .v-stock — STOCK
   --------------------------------------------------------- */
.v-stock{display:block}
.v-stock .stock-section{padding-top:3.5rem}
.v-stock .stock-confianza{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.1rem 0 1.4rem}
.v-stock .trust-chip{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--linea-bone);border-radius:999px;padding:.5rem .9rem;color:var(--humo);
}
.v-stock .stock-top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.v-stock .stock-top h1{font-family:var(--f-serif);font-weight:500;letter-spacing:-.01em;font-size:clamp(2.1rem,5vw,3.2rem);margin-top:.5rem}

.v-stock .stock-toggle{
  display:inline-flex;border:1px solid var(--linea-bone);border-radius:999px;
  padding:.25rem;gap:.25rem;flex:none;
}
.v-stock .toggle-btn{
  border:none;background:transparent;font-family:var(--f-mono);font-size:.76rem;
  letter-spacing:.05em;text-transform:uppercase;padding:.6rem 1.05rem;border-radius:999px;
  cursor:pointer;color:var(--humo);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.v-stock .toggle-btn.is-active{background:var(--ink);color:var(--lima)}

.v-stock .stock-filtros{
  display:flex;flex-wrap:wrap;gap:.9rem;align-items:stretch;
  margin:2.25rem 0 1.25rem;padding-bottom:1.75rem;border-bottom:1px solid var(--linea-bone);
  overflow-x:auto;
}
.v-stock .chip-filtro{
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  background:var(--bone-2);border:1px solid var(--linea-bone);border-radius:14px;
  padding:.75rem 1.1rem;min-width:150px;flex:none;
}
.v-stock .chip-filtro--slider{min-width:230px}
.v-stock .chip-filtro select{
  border:none;background:transparent;font-family:var(--f-text);font-size:.92rem;
  padding:0;color:var(--ink);
}
.v-stock .chip-filtro select:focus{outline:none}
.v-stock .chip-filtro-val{font-family:var(--f-mono);font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums}
.v-stock .chip-filtro--check{
  flex-direction:row;align-items:center;gap:.65rem;font-size:.86rem;cursor:pointer;
}
.v-stock .chip-filtro--check input{width:16px;height:16px;accent-color:var(--lima)}

/* --- Filtros del stock: desplegables propios (el <select> nativo sigue
       debajo, oculto, para no tocar la logica de filtrado) --- */
.sel-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Toda la tarjeta ES el botón: el relleno se le pasa a él para que no quede
   ni un borde muerto donde pulsar y no pase nada. */
.v-stock .chip-filtro--boton{padding:0}
.v-stock .sel-boton{
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  width:100%;height:100%;cursor:pointer;
  border:0;background:transparent;padding:.75rem 1.1rem;
  font-family:var(--f-text);font-size:.95rem;color:var(--ink);text-align:left;
  border-radius:14px;
}
.v-stock .sel-boton:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
.v-stock .sel-etiqueta{display:block;pointer-events:none}
.v-stock .sel-fila{display:flex;align-items:center;gap:.6rem}
.v-stock .sel-valor{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-stock .sel-chev{display:flex;color:var(--humo);transition:transform .25s var(--ease)}
.v-stock .chip-filtro:has(.sel-boton[aria-expanded="true"]){border-color:var(--lima)}
.v-stock .sel-boton[aria-expanded="true"] .sel-chev{transform:rotate(180deg)}
.v-stock .chip-filtro:hover{border-color:var(--humo)}

.sel-panel{
  position:fixed;z-index:200;min-width:13rem;max-height:min(60vh,26rem);overflow-y:auto;
  display:flex;flex-direction:column;padding:.4rem;border-radius:14px;
  border:1px solid var(--linea-bone);background:#FFFDF9;
  box-shadow:0 24px 50px -20px rgb(16 16 19 / .45);
  animation:sel-abre .18s var(--ease);
}
@keyframes sel-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sel-panel-tit{display:none}
.sel-op{
  display:flex;align-items:center;gap:.6rem;padding:.62rem .7rem;border:0;border-radius:10px;
  background:transparent;cursor:pointer;font-family:var(--f-text);font-size:.95rem;color:var(--ink);
  text-align:left;width:100%;transition:background .18s var(--ease);
}
.sel-op:hover{background:rgb(20 20 20 / .06)}
.sel-op-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-op-n{
  font-family:var(--f-mono);font-size:.66rem;color:var(--humo);
  background:rgb(20 20 20 / .06);border-radius:999px;padding:.15rem .45rem;
}
.sel-op.is-activa{background:rgb(224 138 78 / .14);font-weight:600}
.sel-op.is-activa .sel-op-n{background:var(--lima);color:#141414}
.sel-op-check{display:flex;color:var(--lima);opacity:0;flex:none}
.sel-op.is-activa .sel-op-check{opacity:1}
.sel-op.sin-coches{opacity:.42;cursor:default}
.sel-op.sin-coches:hover{background:transparent}
.sel-cancelar{display:none}

/* Hoja inferior en movil, igual que la de "Como llegar" */
@media (max-width:768px){
  .sel-panel.es-hoja{
    left:0;right:0;bottom:0;top:auto;width:100%;min-width:0;max-height:72vh;
    padding:.5rem .8rem calc(.9rem + env(safe-area-inset-bottom));
    border:0;border-top:1px solid var(--linea-bone);border-radius:22px 22px 0 0;
    box-shadow:0 -22px 55px -18px rgb(0 0 0 / .5);
    animation:sel-hoja-sube .3s cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }
  @keyframes sel-hoja-sube{from{transform:translateY(100%)}to{transform:none}}
  .sel-panel.es-hoja::before{content:'';display:block;width:2.6rem;height:4px;border-radius:99px;background:rgb(16 16 19 / .18);margin:.4rem auto .55rem;flex:none}
  .sel-panel.es-hoja .sel-panel-tit{
    display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--humo);text-align:center;margin:0 0 .5rem;
  }
  .sel-panel.es-hoja .sel-op{padding:.9rem .8rem;font-size:1rem;min-height:50px}
  .sel-panel.es-hoja .sel-cancelar{
    display:block;width:100%;margin-top:.45rem;padding:.85rem;border:0;border-radius:12px;cursor:pointer;
    background:rgb(16 16 19 / .07);color:var(--ink);font-family:var(--f-text);font-size:.95rem;font-weight:600;flex:none;
  }
}

/* Con "reducir movimiento" activado, una animacion congelada dejaria la hoja
   fuera de pantalla: mejor sin animacion que invisible. */
@media (prefers-reduced-motion: reduce){
  .sel-panel,.sel-panel.es-hoja{animation:none}
}

.v-stock .stock-count{color:var(--humo);font-size:.85rem;margin-bottom:1.25rem}

.v-stock .stock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.9rem 1.75rem;margin-bottom:1rem}
.v-stock .stock-grid[hidden]{display:none}
/* v21 · La tarjeta ya destaca la cuota por defecto, asi que el modo "cuota"
   del selector no tiene que hacer nada. Lo que se invierte es el modo TOTAL:
   ahi manda el precio al contado y la cuota pasa a segunda linea. */
.v-stock .stock-grid[data-modo="total"] .card-coche .cuota b{
  font-size:.72rem;font-weight:400;color:var(--humo);
}
.v-stock .stock-grid[data-modo="total"] .card-coche .precio-linea{font-size:1.2rem}
.v-stock .stock-grid[data-modo="total"] .card-coche .precio{color:var(--ink);font-weight:600;letter-spacing:-.01em}
/* en modo total, el orden visual se invierte sin tocar el HTML */
.v-stock .stock-grid[data-modo="total"] .card-coche .cuota{order:2}
.v-stock .stock-grid[data-modo="total"] .card-coche .precio-linea{order:1}

/* v19 · el punto ya no lleva texto que subrayar: al apuntarlo crece, se aclara
   y coge el filo naranja para decir "soy clicable, te llevo al plano" */
.v-stock .card-wrap .chip-plaza.is-clicable{cursor:pointer}
.v-stock .card-wrap .chip-punto.is-clicable:hover,
.v-stock .card-wrap .chip-punto.is-clicable:focus-visible{
  transform:scale(1.2);background:#FFFDFA;border-color:var(--lima);
  border-radius:50%;outline-offset:3px;
}

.v-stock .stock-empty{
  text-align:center;padding:4.5rem 1.5rem;border:1px dashed var(--linea-bone);border-radius:12px;
}
.v-stock .stock-empty h3{font-size:1.5rem;margin:.85rem 0 .6rem}
.v-stock .stock-empty p{color:var(--humo);max-width:44ch;margin:0 auto 1.75rem}
.v-stock .stock-preset-activo{margin:0 0 1.2rem}
.v-stock .preset-chip{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.5rem .8rem;border-radius:999px;background:var(--lima);color:#141414}
.v-stock .preset-quitar{border:0;background:transparent;cursor:pointer;font-size:1rem;line-height:1;color:#141414;padding:0 .1rem}

@media (max-width:1024px){
  .v-stock .stock-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .v-stock .stock-grid{grid-template-columns:1fr}
  .v-stock .stock-top{flex-direction:column;align-items:flex-start}
}

/* ---------------------------------------------------------
   .v-coche — FICHA
   --------------------------------------------------------- */
.v-coche{display:block}
.v-coche .ficha-section{padding-top:2.5rem}
.v-coche .ficha-grid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3.75rem;align-items:start;padding-top:1.5rem;
}
.v-coche .volver{margin-bottom:1.5rem;display:inline-block}

.v-coche .foto-mock{
  background:linear-gradient(150deg,var(--ink),var(--ink-3) 70%);
  display:flex;align-items:center;justify-content:center;border-radius:6px;
  overflow:hidden;position:relative;
}
.v-coche .foto-mock .inicial{
  font-family:var(--f-display);font-weight:800;color:transparent;
  -webkit-text-stroke:1.5px rgb(238 241 245 / .22);
}
.v-coche .galeria{margin-bottom:2.5rem}
.v-coche .galeria-principal{aspect-ratio:4/3;margin-bottom:.75rem}
.v-coche .galeria-principal .inicial{font-size:7.5rem}
.v-coche .galeria-principal .car-side{width:78%;max-width:min(420px,100%)}
.v-coche .ficha-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-coche .color-tag{position:absolute;left:.8rem;bottom:.6rem;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--humo-2)}
.v-coche .galeria-thumb .thumb-tag{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--humo-2);opacity:.8}
.v-coche .ficha-tasar-link{display:inline-block;margin-top:.35rem;font-size:.85rem}
.v-coche .ficha-atencion{margin-top:1.1rem;padding:1rem 1.1rem;border:1px solid var(--linea-bone);border-radius:10px}
.v-coche .ficha-atencion-title{font-weight:700;margin-bottom:.4rem}
.v-coche .ficha-atencion .mono{font-size:.68rem;letter-spacing:.04em;color:var(--humo);margin:.2rem 0}
.v-coche .ficha-callback{margin-top:.9rem;border:1px solid var(--linea-bone);border-radius:10px;padding:.85rem 1.1rem}
.v-coche .ficha-callback summary{cursor:pointer;font-weight:600;font-size:.92rem}
.v-coche .callback-form{display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem}
.v-coche .callback-form input{border:1px solid var(--linea-bone);border-radius:8px;padding:.65rem .8rem;font-family:var(--f-text);font-size:.95rem;background:#fff;color:var(--ink)}
.v-coche .callback-form input:focus{outline:none;border-color:var(--lima)}
.v-coche .callback-ok{margin-top:.7rem;color:var(--verde)}
/* v22 · Galeria de verdad. Los anuncios traen decenas de fotos por coche, asi
   que la tira va en horizontal con scroll propio: en rejilla serian diez filas
   y el precio acabaria fuera de pantalla. */
.v-coche .galeria-principal{position:relative;overflow:hidden;border-radius:8px}
.v-coche .galeria-img{width:100%;height:100%;object-fit:cover;display:block}
.v-coche .galeria-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  border:1px solid rgb(238 241 245 / .2);background:rgb(16 16 19 / .5);backdrop-filter:blur(5px);
  color:var(--bone);font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  padding:0 0 .18rem;transition:background .25s var(--ease),transform .25s var(--ease);
}
.v-coche .galeria-nav:hover{background:rgb(16 16 19 / .82);transform:translateY(-50%) scale(1.06)}
.v-coche .galeria-prev{left:.7rem}
.v-coche .galeria-next{right:.7rem}
.v-coche .galeria-contador{
  position:absolute;right:.75rem;bottom:.75rem;background:rgb(16 16 19 / .62);color:var(--bone);
  padding:.32rem .65rem;border-radius:999px;font-size:.68rem;backdrop-filter:blur(4px);
  font-variant-numeric:tabular-nums;
}
.v-coche .galeria-contador b{font-weight:600}
.v-coche .galeria-thumbs{
  display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.4rem;
  scrollbar-width:thin;scrollbar-color:var(--linea-bone) transparent;
}
.v-coche .galeria-thumb{
  flex:0 0 88px;aspect-ratio:4/3;padding:0;border:1px solid var(--linea-bone);border-radius:6px;
  overflow:hidden;background:var(--bone-2);cursor:pointer;opacity:.6;
  transition:opacity .25s var(--ease),border-color .25s var(--ease);
}
.v-coche .galeria-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.v-coche .galeria-thumb:hover{opacity:.9}
.v-coche .galeria-thumb.is-activa{opacity:1;border-color:var(--lima);border-width:2px}
@media (prefers-reduced-motion: reduce){ .v-coche .galeria-nav:hover{transform:translateY(-50%)} }

@media (prefers-reduced-motion: reduce){
}

.v-coche .label-eyebrow{margin-bottom:.5rem}
.v-coche .ficha-h2-section{font-size:1.85rem;margin-bottom:1.5rem}
.v-coche .sinsorpresas{margin-bottom:2.75rem}
.v-coche .imperf-list{display:flex;flex-direction:column;gap:1rem}
.v-coche .imperf-item{
  display:flex;gap:1.1rem;align-items:flex-start;padding:1.1rem;
  border:1px solid var(--linea-bone);border-radius:10px;background:var(--bone);
}
.v-coche .imperf-thumb{
  width:58px;height:58px;flex:none;border-radius:8px;
  background:linear-gradient(140deg,var(--oxido),var(--ink-3) 85%);opacity:.9;
}
.v-coche .imperf-item p{margin:0}
.v-coche .imperf-criterio{color:var(--humo);font-size:.78rem;margin-top:.35rem}
.v-coche .imperf-limpio{
  padding:1.35rem;border:1px solid var(--linea-bone);border-radius:10px;background:var(--bone-2);
}
.v-coche .imperf-limpio .mono{color:var(--humo)}

/* v22 · El perfil del modelo, pegado a la foto. Lamina de papel sobre el
   hueso con un filo naranja a la izquierda que lo ata a la marca. El gancho
   entra grande, en serif, y debajo el parrafo largo. */
.v-coche .ficha-perfil{
  position:relative;margin:1.9rem 0 2.5rem;padding:1.5rem 1.6rem 1.6rem;overflow:hidden;
  border:1px solid var(--linea-bone);border-radius:16px;
  background:linear-gradient(180deg,#FFFDF8,var(--bone-2));
  box-shadow:0 18px 40px -30px rgb(16 16 19 / .5), inset 0 1px 0 rgb(255 255 255 / .8);
}
.v-coche .ficha-perfil::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--lima),rgb(224 138 78 / 0) 85%);
}
.v-coche .perfil-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;color:var(--lima)}
.v-coche .perfil-head svg{width:17px;height:17px;flex:none}
.v-coche .perfil-head .label{margin:0;color:#A85E27}
.v-coche .perfil-gancho{
  font-family:var(--f-serif);font-size:1.18rem;line-height:1.35;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 .7rem;text-wrap:balance;
}
.v-coche .perfil-txt{
  font-size:.97rem;line-height:1.72;color:var(--ink-3);margin:0;text-wrap:pretty;
  max-width:62ch;
}

/* v22 · Los sellos dejan de ser pastillas de texto y pasan a ser fichas con
   icono: el mismo contenido, pero se leen de un golpe de vista y aguantan el
   subtitulo con la letra pequena que legalmente conviene decir. */
.v-coche .ficha-trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem;margin-top:1.9rem;
}
.v-coche .trust-chip{
  display:flex;align-items:center;gap:.7rem;text-align:left;text-decoration:none;
  font-family:var(--f-text);font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--ink);
  background:linear-gradient(180deg,#FFFDF8,var(--bone));
  border:1px solid var(--linea-bone);border-radius:13px;padding:.72rem .85rem;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .9), 0 8px 18px -14px rgb(16 16 19 / .45);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.v-coche .trust-chip .tc-ico{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(160deg,rgb(224 138 78 / .24),rgb(224 138 78 / .07));
  border:1px solid rgb(224 138 78 / .34);color:#A85E27;
}
.v-coche .trust-chip .tc-ico svg{width:17px;height:17px}
.v-coche .trust-chip .tc-txt{min-width:0}
.v-coche .trust-chip b{display:block;font-weight:600;line-height:1.2}
.v-coche .trust-chip small{
  display:block;font-family:var(--f-mono);font-size:.61rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--humo);margin-top:.2rem;line-height:1.3;
}
.v-coche a.trust-chip{cursor:pointer}
.v-coche a.trust-chip:hover{
  transform:translateY(-2px);border-color:var(--lima);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .9), 0 16px 26px -16px rgb(16 16 19 / .5);
}
.v-coche a.trust-chip:hover .tc-ico{background:linear-gradient(160deg,rgb(224 138 78 / .34),rgb(224 138 78 / .12))}
@media (prefers-reduced-motion:reduce){
  .v-coche .trust-chip{transition:none}
  .v-coche a.trust-chip:hover{transform:none}
}

.v-coche .ficha-der-sticky{position:sticky;top:6.5rem}
.v-coche .ficha-banner{
  border-radius:10px;padding:1.15rem 1.3rem;margin-bottom:1.5rem;font-size:.92rem;
}
.v-coche .banner-reservado{background:rgb(212 84 30 / .1);border:1px solid var(--lima)}
.v-coche .banner-reservado strong{color:var(--lima-texto)}
.v-coche .banner-vendido{background:var(--bone-2);border:1px solid var(--linea-bone);color:var(--humo)}
.v-coche .ficha-h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-top:.4rem}
.v-coche .ficha-version{color:var(--humo);margin-top:.3rem}
.v-coche .ficha-meta{
  display:flex;gap:.65rem;flex-wrap:wrap;color:var(--humo);font-size:.82rem;margin:1.1rem 0 1.3rem;
}
.v-coche .ficha-badge{
  display:inline-block;border:1px solid var(--lima);color:var(--ink);
  background:rgb(224 138 78 / .14);font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.05em;text-transform:uppercase;padding:.42rem .8rem;border-radius:999px;
  margin-bottom:1.1rem;
}
.v-coche .ficha-precio-block{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.3rem 0;border-top:1px solid var(--linea-bone);border-bottom:1px solid var(--linea-bone);
  margin-bottom:1.6rem;
}
.v-coche .ficha-precio{font-size:2.1rem;font-weight:600}
.v-coche .ficha-cuota{color:var(--humo);font-size:.85rem;text-align:right}
.v-coche .ficha-cuota b{color:var(--ink);font-size:1.2rem}
.v-coche .ficha-vendido-precio{
  font-family:var(--f-display);font-weight:600;font-size:1.9rem;color:var(--humo);margin:1.6rem 0;
}
.v-coche .mini-sim{margin-bottom:1.85rem;display:flex;flex-direction:column;gap:1.15rem}
.v-coche .mini-sim-row label{display:flex;justify-content:space-between;margin-bottom:.55rem}
.v-coche .mini-sim-nota{color:var(--humo);font-size:.72rem}
.v-coche .ficha-ctas{display:flex;flex-direction:column;gap:.85rem}

.v-coche .similares{padding-top:4rem;margin-top:3.5rem;border-top:1px solid var(--linea-bone)}
.v-coche .similares .sec-head{margin-bottom:2rem}
.v-coche .similares-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

@media (max-width:1024px){
  .v-coche .ficha-grid{grid-template-columns:minmax(0,1fr);gap:2.75rem}
  .v-coche .ficha-der-sticky{position:static}
  .v-coche .similares-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .v-coche .similares-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   Controles range compartidos (namespaced por vista)
   --------------------------------------------------------- */
.v-stock input[type="range"],
.v-coche input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:var(--linea-bone);border-radius:999px;outline:none;cursor:pointer;
}
.v-stock input[type="range"]::-webkit-slider-thumb,
.v-coche input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--lima);border:2px solid var(--ink);cursor:pointer;margin-top:-6.5px;
}
.v-stock input[type="range"]::-moz-range-thumb,
.v-coche input[type="range"]::-moz-range-thumb{
  width:17px;height:17px;border-radius:50%;background:var(--lima);border:2px solid var(--ink);cursor:pointer;
}
.v-stock input[type="range"]::-moz-range-track,
.v-coche input[type="range"]::-moz-range-track{height:4px;background:var(--linea-bone);border-radius:999px}


/* =========================================================
   VISTA RESERVA — namespace .v-reserva  (spec 3.6)
   ========================================================= */
.v-reserva{min-height:80vh;padding:4.5rem 0 6rem}
.v-reserva .reserva-layout{max-width:640px}
.v-reserva h1{font-family:var(--f-serif);font-weight:500;letter-spacing:-.01em;font-size:clamp(1.9rem,4.5vw,2.6rem);margin:.75rem 0 1.75rem;max-width:18ch}

/* mini resumen del coche */
.v-reserva .reserva-card{
  display:flex;gap:1.25rem;background:var(--ink-2);border:1px solid var(--linea);
  border-radius:10px;padding:1.25rem;margin-bottom:2rem;align-items:flex-start;
}
.v-reserva .reserva-card-foto{
  flex:none;width:84px;height:84px;border-radius:8px;
  background:linear-gradient(150deg,var(--ink),var(--ink-3) 70%);
  display:flex;align-items:center;justify-content:center;
}
.v-reserva .reserva-card-foto span{
  font-family:var(--f-display);font-weight:800;font-size:2.4rem;
  color:transparent;-webkit-text-stroke:1.5px rgb(238 241 245 / .28);
}
.v-reserva .reserva-card-img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.v-reserva .reserva-card-body{min-width:0;flex:1}
.v-reserva .reserva-card-body h2{font-size:1.3rem;margin:.5rem 0 .1rem}
.v-reserva .reserva-card .version{color:var(--humo-2);font-size:.85rem}
.v-reserva .reserva-gancho{
  font-family:var(--f-serif);font-style:italic;font-size:.82rem;line-height:1.42;
  color:var(--humo-2);margin-top:.45rem;text-wrap:pretty;
}
.v-reserva .reserva-card-meta{color:var(--humo-2);font-size:.76rem;margin-top:.55rem}
.v-reserva .reserva-card-precio{display:flex;align-items:baseline;gap:.9rem;margin-top:.7rem}
.v-reserva .reserva-card-precio .precio{font-weight:600;font-size:1.15rem}
.v-reserva .reserva-card-precio .cuota{font-size:.72rem;color:var(--humo-2)}
.v-reserva .reserva-card-precio .cuota b{color:var(--bone)}

/* las tres condiciones */
.v-reserva .reserva-condiciones{
  border:1px solid var(--linea);border-radius:10px;padding:1.5rem 1.5rem 1.6rem;margin-bottom:2rem;
}
.v-reserva .reserva-condiciones ul{display:flex;flex-direction:column;gap:1rem;margin-top:.9rem}
.v-reserva .reserva-condiciones li{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem;line-height:1.5}
.v-reserva .reserva-condiciones li svg{flex:none;margin-top:.2rem;color:var(--lima)}
.v-reserva .reserva-condiciones b{color:var(--bone)}

/* form */
.v-reserva .reserva-form{display:flex;flex-direction:column;gap:1.1rem}
.v-reserva .field-label{
  display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--humo-2);margin-bottom:.5rem;
}
.v-reserva .reserva-fieldgroup input{
  width:100%;background:var(--ink-2);border:1.5px solid var(--linea);border-radius:8px;
  padding:.9rem 1.05rem;color:var(--bone);font-size:.98rem;
}
.v-reserva .reserva-fieldgroup input::placeholder{color:var(--humo-2)}
.v-reserva .reserva-fieldgroup input:focus{outline:none;border-color:var(--lima)}

.v-reserva .reserva-stripe{
  border:1.5px solid var(--linea);border-radius:10px;padding:1.35rem 1.35rem 1.5rem;
  background:linear-gradient(160deg,var(--ink-2),var(--ink) 120%);margin-top:.25rem;
}
.v-reserva .stripe-head{
  display:flex;align-items:center;gap:.5rem;color:var(--humo-2);margin-bottom:1.1rem;
  font-size:.78rem;letter-spacing:.03em;
}
.v-reserva .stripe-lock{color:var(--lima);display:inline-flex}
.v-reserva .reserva-stripe .reserva-fieldgroup{margin-bottom:1.1rem}
.v-reserva .reserva-stripe .reserva-fieldgroup:last-child{margin-bottom:0}
.v-reserva .stripe-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

.v-reserva #reserva-pagar-btn{margin-top:.4rem}
.v-reserva #reserva-pagar-btn.is-loading{opacity:.75;cursor:progress}

/* success */
.v-reserva .reserva-success{position:relative}
.v-reserva .reserva-sello{
  position:absolute;top:-.5rem;right:0;width:112px;height:112px;border-radius:50%;
  border:2px dashed var(--lima);display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--lima);
  transform:rotate(9deg);line-height:1.3;
}
.v-reserva .reserva-success-copy{color:var(--humo-2);font-size:1rem;max-width:48ch;margin-bottom:1.5rem}
.v-reserva .reserva-success-copy b{color:var(--bone)}
.v-reserva .reserva-sms{
  display:flex;align-items:center;gap:.6rem;color:var(--humo-2);font-size:.82rem;
  padding:.9rem 1.1rem;border:1px solid var(--linea);border-radius:8px;margin-bottom:2rem;
}
.v-reserva .reserva-sms svg{flex:none;color:var(--lima)}
.v-reserva .reserva-success-ctas{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}

/* aviso / not found */
.v-reserva .reserva-aviso p, .v-reserva .reserva-notfound p{color:var(--humo-2);max-width:52ch;margin-bottom:1.75rem}
.v-reserva .reserva-aviso-ctas{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}

@media (max-width:640px){
  .v-reserva .reserva-card{flex-direction:column}
  .v-reserva .stripe-row{grid-template-columns:1fr}
  .v-reserva .reserva-sello{position:static;transform:none;width:auto;height:auto;border-radius:8px;
    padding:.5rem .9rem;display:inline-flex;margin:0 .75rem 1rem 0}
}

/* =========================================================
   VISTA ADMIN — namespace .v-admin  (spec 3.8)
   ========================================================= */
.v-admin{min-height:100vh;display:flex;justify-content:center;padding:3.5rem 1.1rem 5rem}
.v-admin .admin-frame{
  position:relative;width:100%;max-width:430px;background:var(--ink-2);
  border:1px solid var(--linea);border-radius:30px;padding:2.1rem 1.35rem 2rem;
  box-shadow:var(--shadow);
}
.v-admin .admin-frame-notch{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:72px;height:5px;border-radius:999px;background:var(--linea);
}
.v-admin .admin-frame-label{text-align:center;margin-bottom:1.35rem}

.v-admin .admin-tabs{
  display:flex;gap:.3rem;background:var(--ink);border:1px solid var(--linea);border-radius:999px;
  padding:.28rem;margin-bottom:1.6rem;
}
.v-admin .admin-tab{
  /* v20: cinco pestanas en el ancho del movil. Sin envolver el texto: antes
     "Alta rapida" partia en dos lineas y descuadraba la pastilla. */
  flex:1;background:transparent;border:none;border-radius:999px;padding:.6rem .3rem;
  font-family:var(--f-text);font-weight:600;font-size:.78rem;color:var(--humo-2);cursor:pointer;
  white-space:nowrap;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
@media (max-width:380px){ .v-admin .admin-tab{font-size:.72rem;padding:.55rem .2rem} }
.v-admin .admin-tab[aria-selected="true"]{background:var(--lima);color:var(--ink)}

/* ---- Pestana de medicion del panel ---- */
.v-admin .admin-medicion-rango{display:flex;gap:.4rem;margin:.9rem 0 1.1rem}
.v-admin .admin-rango{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.45rem .8rem;border-radius:8px;cursor:pointer;
  background:rgb(255 255 255 / .07);color:var(--humo-2);border:1px solid rgb(255 255 255 / .14);
}
.v-admin .admin-rango[aria-pressed="true"]{background:var(--lima);color:#141414;border-color:var(--lima);font-weight:700}
.v-admin .med-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.6rem;margin-bottom:1.4rem}
.v-admin .med-cifra{
  background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .1);
  border-radius:10px;padding:.8rem .7rem;text-align:center;
}
.v-admin .med-cifra b{display:block;font-family:var(--f-display);font-size:1.55rem;font-weight:800;color:var(--bone);line-height:1.1}
.v-admin .med-cifra span{display:block;margin-top:.25rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--humo-2)}
.v-admin .med-cifra--destaca{background:rgb(224 138 78 / .16);border-color:rgb(224 138 78 / .45)}
.v-admin .med-cifra--destaca b{color:var(--lima)}
.v-admin .med-titulo{margin:1.3rem 0 .45rem;color:var(--humo-2);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
/* La grafica es de barras y no de linea a proposito: con pocas visitas al dia
   una linea sugiere una tendencia que los numeros no sostienen. */
.v-admin .med-grafica{display:flex;align-items:flex-end;gap:2px;height:120px;padding:.5rem;background:rgb(255 255 255 / .04);border-radius:10px}
.v-admin .med-barra{flex:1 1 0;display:flex;align-items:flex-end;height:100%;min-width:3px}
.v-admin .med-barra i{display:block;width:100%;background:var(--lima);border-radius:2px 2px 0 0;opacity:.85}
.v-admin .med-barra:hover i{opacity:1}
.v-admin .med-nota{margin-top:1.1rem;color:var(--humo-2);font-size:.72rem}

/* ---- Pestana de opiniones del panel ---- */
.v-admin .op-ficha{
  background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .1);
  border-radius:12px;padding:1.1rem;margin-bottom:1rem;
}
.v-admin .op-cab{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.v-admin .op-cab b{font-family:var(--f-display);font-size:1.15rem;color:var(--bone)}
.v-admin .op-auto,.v-admin .op-mano{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:999px;
}
.v-admin .op-auto{background:rgb(53 192 110 / .18);color:var(--verde);border:1px solid rgb(53 192 110 / .4)}
.v-admin .op-mano{background:rgb(255 255 255 / .08);color:var(--humo-2);border:1px solid rgb(255 255 255 / .16)}
.v-admin .op-campos{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:.7rem}
.v-admin .op-ficha .field-label{display:block;margin-bottom:.7rem}
.v-admin .op-ficha input{width:100%}
.v-admin .op-guardar{margin-top:.4rem}
.v-admin .op-aviso{margin-top:.6rem;font-size:.78rem}
.v-admin .op-refrescar{margin-top:.4rem}
.v-admin .op-nota-pie{margin-top:.9rem;color:var(--humo-2);font-size:.74rem;line-height:1.55}
.v-admin .op-nota-pie code{font-size:.9em;background:rgb(255 255 255 / .08);padding:.1rem .3rem;border-radius:4px}

/* ---- Pestaña de alertas del panel ---- */
.v-admin .admin-tab-n{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  margin-left:.35rem;padding:0 .3rem;border-radius:999px;
  background:var(--oxido);color:#fff;font-family:var(--f-mono);font-size:.62rem;font-weight:700;
}
.v-admin .av-correo{
  font-size:.82rem;line-height:1.55;padding:.7rem .9rem;border-radius:10px;margin-bottom:1.2rem;
}
.v-admin .av-correo.es-ok{background:rgb(53 192 110 / .12);border:1px solid rgb(53 192 110 / .35);color:#9FE6BE}
.v-admin .av-correo.es-falta{background:rgb(224 138 78 / .12);border:1px solid rgb(224 138 78 / .35);color:#F0C49B}
.v-admin .av-correo b{color:var(--bone)}
.v-admin .av-titulo{
  margin:0 0 .7rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--humo-2);display:flex;align-items:center;gap:.5rem;
}
.v-admin .av-titulo--resto{margin-top:1.8rem}
.v-admin .av-n{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  border-radius:999px;background:rgb(255 255 255 / .1);color:var(--bone);font-size:.68rem;
}
.v-admin .av-lista{display:flex;flex-direction:column;gap:.6rem;margin:0;padding:0;list-style:none}
.v-admin .av-fila{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .1);
  border-left:3px solid rgb(255 255 255 / .12);
  border-radius:10px;padding:.85rem 1rem;
}
/* Lo que espera aviso salta a la vista: es lo único accionable de la lista. */
.v-admin .av-fila.es-pendiente{border-left-color:var(--lima);background:rgb(224 138 78 / .09)}
.v-admin .av-info{flex:1 1 240px;min-width:0}
.v-admin .av-busca{margin:0 0 .2rem;font-size:.95rem;color:var(--bone)}
.v-admin .av-filtro{color:var(--humo-2);font-weight:400;font-size:.85rem}
.v-admin .av-contacto{margin:0;font-size:.76rem;color:var(--humo-2);display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.v-admin .av-canal{
  padding:.12rem .4rem;border-radius:5px;font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;
  background:rgb(255 255 255 / .1);color:var(--bone);
}
.v-admin .av-canal[data-canal="whatsapp"]{background:rgb(37 211 102 / .2);color:#8FE9B4}
.v-admin .av-fecha{color:var(--humo-2)}
.v-admin .av-encaje{margin:.35rem 0 0;font-size:.84rem;color:var(--lima)}
.v-admin .av-encaje b{color:var(--bone)}
.v-admin .av-hecho{margin:.3rem 0 0;font-size:.76rem;color:var(--verde)}
.v-admin .av-acciones{display:flex;align-items:center;gap:.5rem;flex:none}
.v-admin .av-mandar{min-height:44px;padding:.4rem .95rem;font-size:.86rem;white-space:nowrap}
.v-admin .av-borrar{
  min-height:44px;padding:.4rem .8rem;border-radius:9px;cursor:pointer;font-size:.8rem;
  background:transparent;border:1px solid rgb(255 255 255 / .16);color:var(--humo-2);
}
.v-admin .av-borrar:hover{border-color:var(--oxido);color:#F0A9A3}
.v-admin .av-vacio{color:var(--humo-2);font-size:.86rem;line-height:1.6}
@media (max-width:640px){
  .v-admin .av-fila{gap:.7rem}
  .v-admin .av-acciones{flex:1 1 100%}
  .v-admin .av-mandar{flex:1 1 auto;justify-content:center}
}

.v-admin .admin-panel[hidden]{display:none}

/* alta rápida */
.v-admin .admin-crono-wrap{text-align:center;margin-bottom:1.75rem}
.v-admin .admin-crono{font-size:2.6rem;font-weight:600;color:var(--lima);margin-top:.35rem;line-height:1}
.v-admin .admin-form{display:flex;flex-direction:column;gap:1.1rem}
.v-admin .admin-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.v-admin .field-label{
  display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--humo-2);margin-bottom:.45rem;
}
.v-admin .admin-field .plate{max-width:280px;margin-bottom:.75rem}
.v-admin .admin-field input, .v-admin .admin-field select{
  width:100%;background:var(--ink);border:1.5px solid var(--linea);border-radius:8px;
  padding:.75rem .9rem;color:var(--bone);font-size:.92rem;
}
.v-admin .admin-field input::placeholder{color:var(--humo-2)}
.v-admin .admin-field input:focus, .v-admin .admin-field select:focus{outline:none;border-color:var(--lima)}
.v-admin .admin-autofill-btn{margin-top:.15rem}

.v-admin .admin-dropzone{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.v-admin .admin-dz-slot{
  aspect-ratio:1;border:1.5px dashed var(--linea);border-radius:8px;background:var(--ink);
  color:var(--humo-2);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.v-admin .admin-dz-slot:hover{border-color:var(--humo-2)}
.v-admin .admin-dz-slot.is-filled{border-style:solid;border-color:var(--lima);color:var(--lima)}

/* v20 · La ficha tiene ~30 campos: en una sola columna seria un rollo
   infinito en el movil. Van agrupados y solo el primer grupo abierto. */
.v-admin .admin-grupo{border:1px solid var(--linea);border-radius:10px;background:rgb(255 255 255 / .015)}
.v-admin .admin-grupo + .admin-grupo{margin-top:-.25rem}
.v-admin .admin-grupo summary{
  cursor:pointer;list-style:none;padding:.8rem 1rem;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--humo-2);display:flex;align-items:center;justify-content:space-between;
}
.v-admin .admin-grupo summary::-webkit-details-marker{display:none}
.v-admin .admin-grupo summary::after{content:'+';font-size:1rem;color:var(--lima)}
.v-admin .admin-grupo[open] summary::after{content:'–'}
.v-admin .admin-grupo[open] summary{color:var(--bone);border-bottom:1px solid var(--linea)}
.v-admin .admin-grupo-campos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.1rem 1rem 1.25rem}
.v-admin .admin-field--ancho{grid-column:1 / -1}
.v-admin .admin-field--check{grid-column:1 / -1}
.v-admin .admin-check{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.86rem;color:var(--bone)}
.v-admin .admin-check input{width:17px;height:17px;flex:none;accent-color:var(--lima)}
.v-admin .admin-field textarea{
  width:100%;background:var(--ink);border:1.5px solid var(--linea);border-radius:8px;
  padding:.75rem .9rem;color:var(--bone);font-size:.9rem;font-family:var(--f-text);line-height:1.55;resize:vertical;
}
.v-admin .admin-field textarea:focus{outline:none;border-color:var(--lima)}
.v-admin .admin-field textarea::placeholder{color:var(--humo-2)}
.v-admin .admin-field input[type="color"]{height:44px;padding:.25rem;cursor:pointer}
/* el selector de fecha nativo viene con el icono en negro sobre fondo oscuro */
.v-admin .admin-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55;cursor:pointer}
@media (max-width:420px){
  .v-admin .admin-grupo-campos{grid-template-columns:1fr;gap:.9rem}
}

.v-admin .admin-dz-ayuda{color:var(--humo-2);font-size:.72rem;line-height:1.5;margin-top:.55rem}
.v-admin .admin-dropzone.is-sobre{outline:2px dashed var(--lima);outline-offset:4px;border-radius:10px}
.v-admin .admin-dz-previa{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1.5px solid var(--lima)}
.v-admin .admin-dz-previa img{width:100%;height:100%;object-fit:cover}
.v-admin .admin-dz-quitar{
  position:absolute;top:.25rem;right:.25rem;width:22px;height:22px;border-radius:50%;
  border:none;background:rgb(16 16 19 / .8);color:var(--bone);font-size:1rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;
}
.v-admin .admin-dz-quitar:hover{background:var(--oxido)}

/* sesion: quien esta dentro y por donde se sale */
.v-admin .admin-sesion{text-align:center;font-size:.68rem;color:var(--humo-2);margin:-.9rem 0 1.4rem;letter-spacing:.04em}
.v-admin .admin-salir{
  background:none;border:none;padding:0;color:var(--lima);cursor:pointer;
  font-family:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:2px;
}
.v-admin .admin-error{
  color:var(--oxido);font-size:.82rem;border:1px solid var(--oxido);border-radius:8px;
  padding:.6rem .8rem;background:rgb(226 84 74 / .08);
}

/* stock: cada coche se despliega para editarlo ahi mismo */
.v-admin .admin-stock{display:flex;flex-direction:column;gap:.55rem}
.v-admin .admin-stock-row details{border:1px solid var(--linea);border-radius:10px;background:var(--ink)}
.v-admin .admin-stock-row details[open]{border-color:var(--lima)}
.v-admin .admin-stock-row summary{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.85rem 1rem;cursor:pointer;
  list-style:none;
}
.v-admin .admin-stock-row summary::-webkit-details-marker{display:none}
.v-admin .admin-stock-nombre{font-weight:600;font-size:.9rem;flex:1;min-width:8rem}
.v-admin .admin-stock-datos{font-size:.7rem;color:var(--humo-2);font-variant-numeric:tabular-nums}
.v-admin .admin-stock-form{display:flex;flex-direction:column;gap:1rem;padding:0 1rem 1.1rem}
.v-admin .admin-stock-acciones{display:flex;gap:.7rem;flex-wrap:wrap}
.v-admin .admin-stock-acciones .btn{flex:1;min-width:8rem}
.v-admin .admin-stock-acciones .admin-borrar{color:var(--oxido);border-bottom-color:var(--oxido)}

.v-admin .admin-publicado{text-align:center;padding:1.5rem .5rem}
.v-admin .admin-publicado-tiempo{font-size:1.05rem;margin:.6rem 0 .9rem;color:var(--bone)}
.v-admin .admin-publicado p{color:var(--humo-2);font-size:.9rem;margin-bottom:1.5rem}

/* leads */
.v-admin .admin-panel-lead{color:var(--humo-2);font-size:.85rem;margin-bottom:1.25rem}
.v-admin .admin-leads{display:flex;flex-direction:column;gap:1rem}
.v-admin .admin-lead{
  border:1px solid var(--linea);border-radius:10px;padding:1.1rem 1.2rem;
}
.v-admin .admin-lead-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.v-admin .admin-chip{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;
  border-radius:999px;padding:.28rem .6rem;
}
.v-admin .admin-chip[data-tone="oxido"]{color:var(--oxido)}
.v-admin .admin-chip[data-tone="lima"]{color:var(--lima)}
.v-admin .admin-chip[data-tone="humo"]{color:var(--humo-2)}
.v-admin .admin-lead-hora{color:var(--humo-2);font-size:10.5px}
.v-admin .admin-lead-nombre{font-weight:600;font-size:1rem;margin-bottom:.2rem}
.v-admin .admin-lead-vehiculo{color:var(--humo-2);font-size:.78rem}
.v-admin .admin-lead-oferta{color:var(--lima);font-size:.95rem;margin-top:.4rem}
.v-admin .admin-lead-actions{display:flex;gap:.6rem;margin-top:.9rem}
.v-admin .admin-lead-actions .btn{flex:1;padding:.65rem .5rem;font-size:.8rem}
.v-admin .admin-lead-actions svg{width:14px;height:14px}

/* nave */
.v-admin .admin-nave-resumen{color:var(--humo-2);font-size:.78rem;margin-bottom:1.1rem}
.v-admin .admin-plazas{display:flex;flex-direction:column;gap:.5rem;max-height:420px;overflow-y:auto}
.v-admin .admin-plaza-row{
  display:flex;align-items:center;gap:.75rem;border:1px solid var(--linea);border-radius:8px;
  padding:.65rem .8rem;
}
.v-admin .admin-plaza-cod{color:var(--humo-2);font-size:.76rem;flex:none;width:2.4rem}
.v-admin .admin-plaza-row .chip-plaza{flex:1;min-width:0}
.v-admin .admin-plaza-row .chip-plaza span{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.v-admin .admin-plaza-row .btn{flex:none;padding:.4rem .7rem;font-size:.72rem}
.v-admin .admin-empty{color:var(--humo-2);font-size:.85rem}

@media (max-width:480px){
  .v-admin{padding:2.5rem .75rem 4rem}
  .v-admin .admin-frame{padding:1.75rem 1rem 1.75rem;border-radius:22px}
  .v-admin .admin-grid-2{grid-template-columns:1fr}
}

/* =========================================================
   VISTA SPECS — namespace .v-specs  (spec 3.9)
   ========================================================= */
.v-specs{min-height:100vh;padding-bottom:6rem}
.v-specs .specs-hero{padding:5.5rem 0 3.5rem}
.v-specs .specs-hero h1{font-family:var(--f-serif);font-weight:500;letter-spacing:-.01em;font-size:clamp(2.3rem,5.5vw,3.6rem);margin:.9rem 0 1.25rem;max-width:20ch}
.v-specs .specs-intro{color:var(--humo-2);max-width:56ch;font-size:1.05rem}
.v-specs .specs-section{padding:3rem 0;border-top:1px solid var(--linea)}

/* diagrama */
.v-specs .specs-diagram{display:flex;align-items:stretch;gap:.9rem;flex-wrap:wrap;margin-bottom:1rem}
.v-specs .diag-box{
  flex:1 1 150px;border:1px solid var(--linea);border-radius:8px;padding:1.1rem 1.2rem;
  background:var(--ink-2);display:flex;flex-direction:column;gap:.4rem;justify-content:center;
}
.v-specs .diag-box b{font-family:var(--f-display);font-weight:600;font-size:1.05rem}
.v-specs .diag-box--stack b{line-height:1.3}
.v-specs .diag-tag{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--humo-2);
}
.v-specs .diag-link{
  display:flex;align-items:center;justify-content:center;flex:none;color:var(--lima);
  font-size:1.3rem;min-width:1.5rem;
}
@media (max-width:760px){
  .v-specs .specs-diagram{flex-direction:column}
  .v-specs .diag-link{transform:rotate(90deg)}
}

/* tabla mono */
.v-specs .specs-table{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:.85rem}
.v-specs .specs-table th, .v-specs .specs-table td{
  text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--linea);vertical-align:top;
}
.v-specs .specs-table th{
  color:var(--humo-2);font-weight:400;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
}
.v-specs .specs-table td:first-child{color:var(--lima);white-space:nowrap;font-weight:600}
.v-specs .specs-table td:last-child{color:var(--humo-2);font-family:var(--f-text);font-size:.92rem}
@media (max-width:640px){
  .v-specs .specs-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .v-specs .specs-table, .v-specs .specs-table tbody, .v-specs .specs-table tr, .v-specs .specs-table td{display:block;width:auto}
  .v-specs .specs-table tr{padding:1rem 0;border-bottom:1px solid var(--linea)}
  .v-specs .specs-table tr:first-child{padding-top:0}
  .v-specs .specs-table td{padding:0;border-bottom:0}
  .v-specs .specs-table td:first-child{white-space:normal;font-size:.95rem;margin-bottom:.4rem}
  .v-specs .specs-table td:last-child{font-size:.9rem;line-height:1.55}
}

/* modelo de negocio */
.v-specs .specs-negocio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.v-specs .negocio-card{border:1px solid var(--linea);border-radius:10px;padding:1.5rem}
.v-specs .negocio-cifra{font-size:1.8rem;font-weight:600;margin:.6rem 0 .75rem;color:var(--bone)}
.v-specs .negocio-card p:last-child{color:var(--humo-2);font-size:.88rem;line-height:1.55}
@media (max-width:760px){ .v-specs .specs-negocio{grid-template-columns:1fr} }

/* ideas robadas */
.v-specs .specs-ideas{display:flex;flex-direction:column}
.v-specs .specs-ideas li{
  padding:1.15rem 0;border-bottom:1px solid var(--linea);display:flex;gap:1rem;font-size:.98rem;color:var(--humo-2);
}
.v-specs .specs-ideas li:last-child{border-bottom:none}
.v-specs .specs-ideas b{color:var(--bone);flex:none;min-width:9ch}

.v-specs .specs-back{padding-top:3.5rem}

/* ---------------------------------------------------------
   LEGAL — paginas #/legal #/privacidad #/cookies, consentimiento
   de formularios, aviso de cookies y bloque de opiniones reales
   --------------------------------------------------------- */
.v-legal .wrap--legal{max-width:56rem}
.v-legal .legal-head{margin-bottom:2.4rem}
.v-legal .legal-head h1{font-family:var(--f-serif);font-size:clamp(2rem,5vw,3rem);line-height:1.06;margin:.5rem 0 .8rem}
.v-legal .legal-sub{font-size:1.05rem;color:var(--humo);max-width:44rem}
.v-legal .legal-fecha{margin-top:.9rem;font-size:.78rem;color:var(--humo-2);letter-spacing:.06em;text-transform:uppercase}
.v-legal .legal-body{font-size:1rem;line-height:1.65}
.v-legal .legal-body h2{font-family:var(--f-serif);font-size:1.35rem;margin:2.4rem 0 .7rem;padding-top:1.5rem;border-top:1px solid var(--linea-bone)}
.v-legal .legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.v-legal .legal-body p{margin-bottom:.9rem;max-width:52rem}
.v-legal .legal-body ul{margin:0 0 1.1rem;padding-left:1.1rem}
.v-legal .legal-body li{list-style:disc;margin-bottom:.5rem;max-width:52rem}
.v-legal .legal-datos{padding-left:0}
.v-legal .legal-datos li{list-style:none;padding:.55rem 0;border-bottom:1px dashed var(--linea-bone)}
.v-legal .legal-nota{background:var(--bone-2);border-left:3px solid var(--lima);padding:.9rem 1.1rem;border-radius:0 8px 8px 0;font-size:.94rem}
.v-legal mark.pend{background:#FFE9A8;color:#5A4300;padding:.05em .4em;border-radius:4px;font-weight:600;font-size:.9em}
.v-legal .tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.1rem}
.v-legal .legal-tabla{width:100%;border-collapse:collapse;font-size:.88rem;min-width:40rem}
.v-legal .legal-tabla th,.v-legal .legal-tabla td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--linea-bone);vertical-align:top}
.v-legal .legal-tabla th{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--humo);background:var(--bone-2)}
.v-legal .legal-nav{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--linea-bone)}

/* Consentimiento en formularios */
.consent-check{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0 .5rem;font-size:.9rem;line-height:1.45;cursor:pointer}
.consent-check input{margin-top:.25rem;width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--lima)}
.consent-check a{text-decoration:underline}
.consent-info{font-size:.74rem;line-height:1.5;color:var(--humo-2);margin-bottom:1rem}
.consent-info a{text-decoration:underline}
.ink .consent-info,.v-reserva .consent-info{color:var(--humo-2)}

/* Aviso de reserva sin pago online */
.v-reserva .reserva-nota-pago{border:1px solid var(--linea);border-radius:12px;padding:1rem 1.1rem;margin-bottom:.4rem;background:rgb(255 255 255 / .03)}
.v-reserva .reserva-nota-txt{font-size:.9rem;line-height:1.55;color:var(--humo-2);margin-top:.5rem}

/* Opiniones reales */
.opiniones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem;margin-bottom:1.2rem}
.opinion-fuente{display:flex;flex-direction:column;gap:.3rem;padding:1.4rem 1.5rem;border:1px solid var(--linea-bone);border-radius:14px;background:var(--bone-2);transition:transform .25s var(--ease),border-color .25s var(--ease)}
.opinion-fuente:hover{transform:translateY(-3px);border-color:var(--lima)}
.opinion-nota{font-size:2.4rem;line-height:1;font-weight:600}
.opinion-fuente-nombre{font-size:1.05rem;font-weight:600}
.opinion-cta{font-size:.78rem;color:var(--humo);letter-spacing:.04em;margin-top:.5rem;display:inline-flex;align-items:center;gap:.35rem}
.opiniones-legal{font-size:.78rem;line-height:1.55;color:var(--humo);max-width:46rem}

/* Mapa bloqueado hasta consentimiento */
.mapa-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;text-align:center;min-height:14rem;padding:1.5rem;border:1px dashed var(--linea-bone);border-radius:12px;background:var(--bone-2)}
.mapa-placeholder p{font-size:.88rem;color:var(--humo);max-width:24rem;margin:0}

/* Aviso de cookies */
#cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:9999;max-width:44rem;margin:0 auto;background:var(--ink-2);color:var(--bone);border:1px solid var(--linea);border-radius:16px;padding:1.3rem 1.4rem;box-shadow:0 24px 60px -20px rgb(0 0 0 / .6)}
#cookie-banner[hidden]{display:none}
#cookie-banner h2{font-family:var(--f-serif);font-size:1.1rem;margin-bottom:.45rem}
#cookie-banner p{font-size:.86rem;line-height:1.55;color:var(--humo-2);margin-bottom:1rem}
#cookie-banner a{text-decoration:underline;color:var(--bone)}
.ck-acciones{display:flex;flex-wrap:wrap;gap:.7rem}
.ck-acciones .btn{flex:1 1 12rem;justify-content:center}
@media (max-width:520px){
  #cookie-banner{left:.6rem;right:.6rem;bottom:.6rem;padding:1.1rem}
  .ck-acciones .btn{flex:1 1 100%}
}

.v-coche .mini-sim-mas{font-size:.78rem;color:var(--ink-3);margin:.15rem 0 .55rem}
.v-coche .mini-sim-nota{font-size:.75rem;line-height:1.5;color:var(--humo)}
.site-footer .foot-legal-nota{display:block;max-width:60rem;margin-top:.5rem;font-size:.72rem;line-height:1.5;color:var(--humo)}

/* =========================================================
   v27 · FICHA DEL COCHE — FICHA TECNICA Y EQUIPAMIENTO
   El equipo del anuncio deja de ser una tira de texto en gris y pasa a rejilla
   con iconos, encima de la descripcion del modelo. Y los datos duros (ano, km,
   combustible, cambio, potencia y etiqueta) tienen por fin su sitio: hasta
   ahora combustible y cambio no se veian en la ficha por ninguna parte.
   ========================================================= */
.v-coche .ficha-equipo{margin:1.9rem 0 2.4rem}
.v-coche .ficha-equipo .ficha-h2-section{margin-bottom:1.15rem}

.v-coche .datos-clave{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;margin-bottom:1.05rem;
}
.v-coche .dato{
  display:flex;align-items:center;gap:.65rem;min-width:0;
  padding:.65rem .8rem;border:1px solid var(--linea-bone);border-radius:12px;
  background:linear-gradient(180deg,#FFFDF8,var(--bone));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .9);
}
.v-coche .dato-ico{
  width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgb(16 16 19 / .045);border:1px solid var(--linea-bone);color:var(--ink-3);
}
.v-coche .dato-ico svg{width:16px;height:16px}
.v-coche .dato-txt{min-width:0;display:block}
.v-coche .dato-k{
  display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--humo);line-height:1.2;
}
.v-coche .dato-v{
  display:flex;align-items:center;gap:.35rem;margin-top:.14rem;
  font-weight:600;font-size:.95rem;line-height:1.25;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* El disco de la etiqueta DGT, con su color real. */
.v-coche .dgt-punto{
  width:11px;height:11px;flex:none;border-radius:50%;
  border:1px solid rgb(16 16 19 / .18);background:var(--humo-2);
}
.v-coche .dgt-0{background:#0071BC}
.v-coche .dgt-eco{background:linear-gradient(90deg,#0071BC 50%,#009F4D 50%)}
.v-coche .dgt-c{background:#009F4D}
.v-coche .dgt-b{background:#FFD400}

/* Los tres sellos de la nave: la fila verde de arriba, la que se lee primero. */
.v-coche .equipo-sellos{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.v-coche .equipo-sello{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .8rem .45rem .55rem;border-radius:999px;
  border:1px solid rgb(53 192 110 / .38);background:rgb(53 192 110 / .12);
  font-size:.82rem;font-weight:600;line-height:1.25;color:var(--ink);
}
.v-coche .equipo-sello .es-ico{display:grid;place-items:center;flex:none;color:#1E8A4C}
.v-coche .equipo-sello .es-ico svg{width:15px;height:15px}

/* Y el equipamiento, en tantas columnas como quepan. */
.v-coche .equipo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:.45rem;
}
.v-coche .equipo-item{
  display:flex;align-items:center;gap:.6rem;min-width:0;
  padding:.52rem .7rem;border-radius:10px;
  border:1px solid var(--linea-bone);background:var(--bone);
  font-size:.88rem;line-height:1.3;color:var(--ink-3);
}
.v-coche .equipo-item .ei-ico{
  width:24px;height:24px;flex:none;display:grid;place-items:center;
  border-radius:7px;background:rgb(224 138 78 / .14);color:#A85E27;
}
.v-coche .equipo-item .ei-ico svg{width:14px;height:14px}
.v-coche .equipo-item span{min-width:0}

/* "Sin sorpresas" se queda solo con el estado del coche, asi que se aprieta. */
.v-coche .sinsorpresas{margin-bottom:2.4rem}
.v-coche .sinsorpresas .ficha-h2-section{margin-bottom:1.1rem}

/* v27 · "La joya" vive ahora en la columna derecha, debajo de "¿Prefieres que
   te llamemos?". Ahi la columna es mas estrecha, asi que el titular baja de
   tamano y el bloque se separa de lo de arriba con un filo. */
.v-coche .ficha-der-sticky > .sinsorpresas{
  margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--linea-bone);
}
.v-coche .ficha-der-sticky > .sinsorpresas .ficha-h2-section{font-size:1.4rem;margin-bottom:.9rem}
.v-coche .ficha-der-sticky > .sinsorpresas .imperf-limpio{padding:1rem 1.1rem}
.v-coche .imperf-limpio{display:flex;align-items:flex-start;gap:.8rem;padding:1.15rem 1.25rem}
.v-coche .imperf-limpio .il-ico{
  width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgb(53 192 110 / .16);color:#1E8A4C;
}
.v-coche .imperf-limpio .il-ico svg{width:15px;height:15px}
.v-coche .imperf-limpio p{margin:0}

/* El simulador pasa a ser una tarjeta, para que no se confunda con el precio. */
.v-coche .mini-sim{
  gap:1rem;padding:1.05rem 1.15rem;margin-bottom:1.6rem;
  border:1px solid var(--linea-bone);border-radius:14px;
  background:linear-gradient(180deg,#FFFDF8,var(--bone-2));
}
.v-coche .mini-sim-mas{
  margin:0;padding-top:.85rem;border-top:1px solid var(--linea-bone);
  font-size:.78rem;color:var(--ink-3);
}
.v-coche .mini-sim-nota{margin:0;font-size:.7rem;line-height:1.5;color:var(--humo)}
.v-coche .ficha-precio-block{align-items:flex-end}
.v-coche .ficha-cuota{white-space:nowrap}

/* La tira de miniaturas engancha al arrastrar en tactil. */
.v-coche .galeria-thumbs{scroll-snap-type:x proximity}
.v-coche .galeria-thumb{scroll-snap-align:start}

@media (max-width:900px){
  .v-coche .galeria-nav{width:44px;height:44px}
}
@media (max-width:560px){
  .v-coche .ficha-equipo{margin:1.5rem 0 2rem}
  .v-coche .ficha-h2-section{font-size:1.5rem}
  .v-coche .datos-clave{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
  .v-coche .dato{padding:.55rem .6rem;gap:.5rem;border-radius:10px}
  .v-coche .dato-ico{width:26px;height:26px;border-radius:8px}
  .v-coche .dato-ico svg{width:14px;height:14px}
  .v-coche .dato-v{font-size:.86rem}
  .v-coche .equipo-grid{grid-template-columns:1fr}
  .v-coche .equipo-sello{font-size:.76rem;padding:.4rem .7rem .4rem .5rem}
  .v-coche .galeria-thumb{flex-basis:74px}
  .v-coche .mini-sim{padding:.9rem 1rem}
}
@media (max-width:380px){
  .v-coche .ficha-precio{font-size:1.8rem}
  .v-coche .ficha-cuota b{font-size:1.05rem}
}

/* La letra pequena de financiacion: plegada, gris y al final del todo. Tiene
   que estar (la ley la pide junto a una cuota anunciada) pero no compite con
   nada de lo de arriba. */
.v-coche .ficha-financiacion{
  margin-top:2rem;padding-top:.9rem;border-top:1px solid var(--linea-bone);
  font-family:var(--f-mono);color:var(--humo-2);
}
.v-coche .ficha-financiacion summary{
  cursor:pointer;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--humo-2);list-style:none;display:inline-flex;align-items:center;gap:.4rem;
}
.v-coche .ficha-financiacion summary::-webkit-details-marker{display:none}
.v-coche .ficha-financiacion summary::before{
  content:'+';font-size:.8rem;line-height:1;opacity:.7;
}
.v-coche .ficha-financiacion[open] summary::before{content:'–'}
.v-coche .ficha-financiacion summary:hover{color:var(--humo)}
.v-coche .fin-cuerpo{margin-top:.6rem;max-width:60rem}
.v-coche .fin-cuerpo p{font-size:.66rem;line-height:1.6;color:var(--humo-2);margin:0 0 .45rem}
.v-coche .fin-cuerpo p:last-child{margin-bottom:0}
.v-coche .fin-cuerpo b{font-weight:600;color:var(--humo)}
@media (max-width:900px){
  /* La zona tactil de 44 px vale para enlaces, no para esta linea de letra
     pequena: estirarla la convertiria en un boton, que es justo lo contrario
     de lo que se busca. */
  .v-coche .ficha-financiacion summary{min-height:32px}
}

/* =========================================================
   AJUSTES DE MOVIL Y ACCESIBILIDAD (auditoria 18/08/2026)
   1. Menu que no cabia -> boton desplegable
   2. Ficha: lo comercial justo debajo de la foto
   3. Aviso de cookies compacto
   4. Zonas tactiles de 44 px
   ========================================================= */

/* ---- 1. Menu movil ---------------------------------------------------- */
.nav-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;                 /* zona tactil completa */
  margin-left:auto;
  background:transparent;border:1px solid var(--humo-2);border-radius:10px;
  cursor:pointer;color:var(--bone);          /* las barras heredan este color: hueso, no negro */
}
.nav-toggle-barras{display:flex;flex-direction:column;gap:4px;width:18px}
.nav-toggle-barras i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] .nav-toggle-barras i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-barras i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-barras i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:flex;order:3}
  /* El logo se queda a la izquierda y empuja todo lo demas a la derecha,
     donde CTAs y hamburguesa van juntos. Sin esto la hamburguesa quedaba
     suelta en el centro por el space-between. */
  .topbar{flex-wrap:wrap;row-gap:.5rem;justify-content:flex-start;gap:.5rem .6rem}
  .logo{margin-right:auto;order:1}       /* empuja el resto a la derecha */
  .topbar-ctas{order:2}                  /* CTAs y hamburguesa, juntos y pegados */
  .nav-primary{
    display:none;
    flex-direction:column;
    align-items:stretch;                   /* filas completas, no enlaces centrados */
    gap:0;
    width:100%;
    order:10;                              /* baja a su propia fila */
    padding:.4rem 0 .2rem;
    border-top:1px solid var(--linea);
    margin-top:.4rem;
  }
  .nav-primary.is-abierto{display:flex}
  .nav-primary a{
    display:flex;align-items:center;
    min-height:44px;                       /* zona tactil comoda */
    padding:.35rem .3rem;
    font-size:1rem;
  }
  .nav-primary a + a{border-top:1px solid rgb(255 255 255 / .05)}
  .nav-primary a::after{display:none}      /* el subrayado animado es de escritorio */
  .nav-primary a[aria-current="page"]{color:var(--lima)}
}
/* v22: en móvil la barra queda limpia — solo logo y hamburguesa. Llamar y
   Tasar ya viven en los botones fijos de abajo y en el hero. */
@media (max-width:640px){
  .topbar-ctas{display:none}
  /* Fuera el filete. La barra se queda en tinta OPACA a propósito: el fondo
     del body es hueso, así que cualquier transparencia por abajo dejaría ver
     una franja clara justo en la costura, que es lo contrario de lo que se
     busca. El degradado lo hace la foto, que arranca en tinta pura y va
     apareciendo: entre barra y héroe no hay canto que ver. */
  .topbar{border-bottom:0;background:var(--ink)}
  /* La línea que se seguía viendo NO era del héroe: la pintaba la barra de
     promociones de encima del menú, que lleva un filete de 1 px y un fondo
     (#1A1A1F) más claro que la tinta. Con el menú ya sin filete, ese canto
     quedaba como la única raya de toda la zona. En móvil las tres piezas
     —promociones, menú y arranque de la foto— pasan a ser el mismo negro y
     sin cantos, así que el bloque de arriba se lee de una pieza. */
  .promo-bar{background:var(--ink);border-bottom:0}
}

/* =========================================================
   v23 · FEEDBACK TÁCTIL — solo en pantallas táctiles
   Regla de oro: únicamente transform y opacity (van por el
   compositor de la GPU, no disparan layout ni paint → cero
   coste de rendimiento). Nada de sombras/filtros animados.
   ========================================================= */
@media (hover:none) and (pointer:coarse){
  /* touch-action:manipulation quita el retardo de ~350ms del doble-toque de
     zoom en iOS: el click sale al instante dentro del gesto, lo que además
     evita que Safari marque los tel: como "llamada automática" bloqueada. */
  a,button,.btn,.bc-tel,.bc-wa,.cta-fijo-btn,.card-llamar,.card-wa,.nav-toggle{
    touch-action:manipulation;
  }
  .btn,.bc-tel,.bc-wa,.cta-fijo-btn,.nav-toggle,.hero-mapa-btn,
  .card-coche,.galeria-nav,.hero-mapa-op,.nav-primary a{
    -webkit-tap-highlight-color:transparent;   /* el flash gris del sistema sobra: lo sustituye la animación */
  }
  /* Al soltar, vuelve suave; al pulsar, responde al instante (.08s) */
  .btn,.bc-tel,.bc-wa,.cta-fijo-btn,.nav-toggle,.hero-mapa-btn,.galeria-nav{
    transition:transform .24s var(--ease);
  }
  .btn:active,.bc-tel:active,.bc-wa:active,.hero-mapa-btn:active,.galeria-nav:active{
    transform:scale(.96);transition-duration:.08s;
  }
  .cta-fijo-btn:active{transform:scale(.94);transition-duration:.08s}
  .nav-toggle:active{transform:scale(.88);transition-duration:.08s}
  /* Tarjetas de coche: presión sutil, sin marear */
  .card-coche:active{transform:scale(.985)}
  .card-coche:active .foto .foto-img{transform:none}
  /* Enlaces del menú desplegado: se hunden un pelín hacia la derecha */
  .nav-primary a:active{opacity:.55;transform:translateX(5px);transition:transform .1s var(--ease),opacity .1s var(--ease)}
  /* El menú se despliega deslizando, y los enlaces entran en cascada
     (animación one-shot de 300ms: solo corre al abrir, luego nada) */
  .nav-primary.is-abierto{animation:menu-abre .2s var(--ease) both}
  .nav-primary.is-abierto a{animation:menu-item .26s var(--ease) both}
  .nav-primary.is-abierto a:nth-child(2){animation-delay:.035s}
  .nav-primary.is-abierto a:nth-child(3){animation-delay:.07s}
  .nav-primary.is-abierto a:nth-child(4){animation-delay:.105s}
  .nav-primary.is-abierto a:nth-child(5){animation-delay:.14s}
}
@keyframes menu-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes menu-item{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .nav-primary.is-abierto,.nav-primary.is-abierto a{animation:none}
}

/* =========================================================
   v23b · ACCIONES FLUIDAS — los resultados entran, no aparecen
   Mismo criterio que v23: solo opacity/transform, animaciones
   de una sola pasada. Al filtrar, el grid se recrea y las
   tarjetas entran en cascada corta (tope en la 8ª: las demás
   entran a la vez, para que 26 tarjetas no se eternicen).
   ========================================================= */
.v-stock .stock-grid .card-wrap{animation:carta-entra .3s var(--ease) both}
.v-stock .stock-grid .card-wrap:nth-child(2){animation-delay:.04s}
.v-stock .stock-grid .card-wrap:nth-child(3){animation-delay:.08s}
.v-stock .stock-grid .card-wrap:nth-child(4){animation-delay:.12s}
.v-stock .stock-grid .card-wrap:nth-child(5){animation-delay:.16s}
.v-stock .stock-grid .card-wrap:nth-child(6){animation-delay:.2s}
.v-stock .stock-grid .card-wrap:nth-child(7){animation-delay:.24s}
.v-stock .stock-grid .card-wrap:nth-child(n+8){animation-delay:.27s}
/* El aviso de "ningún coche cumple" también entra suave */
.v-stock #stock-empty:not([hidden]){animation:carta-entra .3s var(--ease) both}
@keyframes carta-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .v-stock .stock-grid .card-wrap,.v-stock #stock-empty:not([hidden]){animation:none}
}

/* ---- 2. Ficha del coche: primero lo comercial ------------------------- */
/* display:contents saca a los hijos de .ficha-izq al grid, y asi se puede
   colocar el bloque de precio y botones justo despues de la foto sin tocar
   el HTML ni romper la version de escritorio (dos columnas). */
@media (max-width:900px){
  .v-coche .ficha-izq{display:contents}
  .v-coche .ficha-izq > .volver{order:1}
  .v-coche .ficha-izq > .galeria{order:2}
  .v-coche .ficha-der{order:3}
  /* El perfil del modelo se lee despues del precio y los botones: en movil
     manda lo comercial, y ademas asi no separa la foto de la llamada. */
  .v-coche .ficha-izq > .ficha-equipo{order:4}
  .v-coche .ficha-izq > .ficha-perfil{order:5}
  .v-coche .ficha-izq > .ficha-trust{order:7}
  .v-coche .ficha-izq > .ficha-financiacion{order:8}
  .v-coche .ficha-grid{row-gap:1.6rem}
  .v-coche .ficha-der-sticky{position:static}
}

/* En movil, los botones de contacto suben por delante del simulador: el
   ejemplo representativo de financiacion es obligatorio, pero no tiene por que
   separar el precio de la llamada a la accion. */
@media (max-width:900px){
  .v-coche .ficha-der-sticky{display:flex;flex-direction:column}
  .v-coche .ficha-der-sticky > *{order:2}
  .v-coche .ficha-der-sticky > .ficha-banner,
  .v-coche .ficha-der-sticky > h1{order:0}
  .v-coche .ficha-der-sticky > .ficha-version,
  .v-coche .ficha-der-sticky > .ficha-meta,
  .v-coche .ficha-der-sticky > .ficha-badge,
  .v-coche .ficha-der-sticky > .ficha-precio-block{order:1}
  .v-coche .ficha-der-sticky > .ficha-ctas{order:2}
  .v-coche .ficha-der-sticky > .mini-sim{order:4}
  .v-coche .ficha-der-sticky > .ficha-atencion{order:5}
  .v-coche .ficha-der-sticky > .sinsorpresas{order:6;margin-bottom:0}
}

/* ---- 3. Aviso de cookies compacto en movil ---------------------------- */
@media (max-width:620px){
  #cookie-banner{
    left:.5rem;right:.5rem;bottom:.5rem;
    padding:.9rem 1rem;
    border-radius:14px;
    max-height:42vh;overflow-y:auto;       /* nunca tapa toda la pantalla */
  }
  #cookie-banner h2{font-size:.98rem;margin-bottom:.3rem}
  #cookie-banner p{font-size:.8rem;line-height:1.45;margin-bottom:.7rem}
  #cookie-banner .ck-larga{display:none}   /* el detalle se lee en la pagina */
  .ck-acciones{flex-direction:row;gap:.5rem}
  .ck-acciones .btn{flex:1 1 0;min-height:44px;padding:.5rem .6rem;font-size:.86rem}
}

/* ---- 4. Zonas tactiles de 44 px --------------------------------------- */
@media (max-width:900px){
  .site-footer a,
  .footer-nav a,
  .foot-links a,
  .legal-nav a,
  .v-legal .legal-nav a{
    display:inline-flex;align-items:center;
    min-height:44px;
  }
  .site-footer li{margin-bottom:0}
  /* El :not(.chip-punto) evita estirar el punto de estado de las tarjetas,
     que es un circulo indicador (no una zona tactil) y se volvia ovalo. */
  .chip-plaza:not(.chip-punto),
  .trust-chip{min-height:36px;display:inline-flex;align-items:center}
  .btn,.btn-block{min-height:44px}
  .link-u{min-height:44px;display:inline-flex;align-items:center}
  .btn-tel{min-height:44px}
  .nav-primary a{min-height:44px}
  footer a{min-height:44px;display:inline-flex;align-items:center}
  footer li{margin-bottom:.1rem}
}

/* ---- Tarjeta de stock: enlace a la ficha + boton de llamar ------------- */
/* El enlace invisible cubre toda la tarjeta (patron "stretched link"), y el
   boton de telefono va por encima. Asi toda la tarjeta sigue siendo clicable
   pero la llamada tiene su propio destino, que es el objetivo del negocio. */
.card-enlace{position:absolute;inset:0;z-index:1;border-radius:inherit;text-decoration:none}
.card-enlace:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
.card-llamar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:44px;margin:.7rem 0 .55rem;
  background:var(--lima);color:#141414;
  font-weight:700;font-size:.94rem;letter-spacing:.01em;
  border-radius:10px;text-decoration:none;
  transition:filter .2s var(--ease),transform .2s var(--ease);
}
.card-llamar svg{width:17px;height:17px}
.card-llamar:hover{filter:brightness(1.06);transform:translateY(-1px)}
.card-llamar:active{transform:translateY(0)}
.card-coche .body{position:relative}
.card-coche h3,.card-coche .version,.card-coche .meta,.card-coche .pie{position:relative;z-index:0}

/* Llamada desde la portada: es la conversion que mas vende (ver el coche en la nave) */
.v-home .hero-btn-tel{display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.v-home .hero-btn-tel svg{width:18px;height:18px}
.v-home .hero-cita-nota{margin-top:.6rem;font-size:.78rem;line-height:1.45;color:var(--humo-2);max-width:34rem}
@media (max-width:700px){
  .v-home .hero-form.hero-ctas{flex-direction:column;align-items:stretch;gap:.6rem}
  .v-home .hero-form.hero-ctas .btn{width:100%;justify-content:center}
  .v-home .hero-cita-nota{font-size:.74rem}
}

/* ---- Llamada desde la ficha y desde el plano de la nave ---------------- */
/* El telefono escrito debajo del boton: mucha gente prefiere marcarlo a mano
   o guardarlo, y ver el numero da confianza aunque no se pulse. */
.v-coche .ficha-btn-tel{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-size:1.02rem}
.v-coche .ficha-btn-tel svg{width:19px;height:19px}
.v-coche .ficha-tel-num{margin:-.15rem 0 .25rem;font-size:.82rem;color:var(--humo);text-align:center;line-height:1.5}
.v-coche .ficha-tel-num a{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--lima);padding-bottom:1px}
.v-coche .ficha-tel-num a:hover{color:var(--lima)}

/* Ficha rapida del plano: dos acciones, llamar manda */
.v-nave .nq-acciones{display:flex;gap:.5rem;align-items:center;flex:0 0 auto}
.v-nave .nq-cta--tel{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.v-nave .nq-cta--tel svg{width:16px;height:16px}
@media (max-width:767px){
  .v-nave .nq-acciones{flex:1 1 100%;margin-top:.5rem}
  .v-nave .nq-acciones .btn{flex:1 1 0;justify-content:center;min-height:44px;font-size:.86rem;padding:.45rem .5rem}
  .v-coche .ficha-tel-num{font-size:.78rem}
}

/* ---- Llamadas a la accion de la home ---------------------------------- */
/* Tres momentos de maxima intencion: al entender el proceso, al mirar la
   direccion y al terminar de resolver dudas. */
.v-home .cta-cita{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;
  margin-top:2.6rem;padding:1.9rem 1.4rem;
  background:var(--bone-2);border:1px solid var(--linea-bone);border-radius:18px;
}
.v-home .cta-cita-txt{max-width:34rem;font-size:1.02rem;line-height:1.55;color:var(--ink)}
.v-home .cta-cita-btn,
.v-home .cta-cierre-btn,
.v-home .trust-btn-tel{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;font-size:1rem}
.v-home .cta-cita-btn svg,
.v-home .cta-cierre-btn svg,
.v-home .trust-btn-tel svg{width:19px;height:19px}
.v-home .cta-cita-nota{font-size:.76rem;color:var(--humo)}

.v-home .trust-btn-tel{margin-top:1.3rem}
.v-home .trust-tel-nota{margin-top:.55rem;font-size:.76rem;color:var(--humo);max-width:26rem}

.v-home .cta-cierre{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;
  margin-top:2.4rem;padding-top:2.2rem;border-top:1px solid var(--linea-bone);
}
.v-home .cta-cierre-titulo{font-family:var(--f-serif);font-size:1.5rem;line-height:1.2}
.v-home .cta-cierre-txt{font-size:.95rem;color:var(--humo);margin-bottom:.35rem}

@media (max-width:700px){
  .v-home .cta-cita{padding:1.5rem 1.1rem;margin-top:2rem}
  .v-home .cta-cita-txt{font-size:.95rem}
  .v-home .cta-cita-btn,
  .v-home .cta-cierre-btn,
  .v-home .trust-btn-tel{width:100%;justify-content:center}
  .v-home .cta-cierre-titulo{font-size:1.3rem}
}

/* Telefono como via alternativa en secciones con otra conversion principal
   (alertas y tasacion): visible y tocable, pero sin competir con el boton. */
.v-home .tel-alt{
  display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  min-height:44px;margin-top:.35rem;
  font-size:.9rem;color:var(--humo-2);text-decoration:none;
}
.v-home .tel-alt svg{width:16px;height:16px;flex:0 0 auto}
.v-home .tel-alt b{color:var(--bone);border-bottom:1px solid var(--lima);padding-bottom:1px;font-weight:700}
.v-home .tel-alt:hover b{color:var(--lima)}
@media (max-width:700px){
  .v-home .tel-alt{font-size:.85rem}
}

/* ---- Contacto unificado: un boton, dos vias (llamar | WhatsApp) ------- */
/* Todo en el naranja de la casa: la via se elige dentro del mismo control,
   separada por un filete oscuro. Nada de verdes ajenos a la paleta. */
/* Primer tabulador de la pagina: quien navega con teclado o lector se salta
   la barra de menu de un golpe. Escondido hasta que recibe el foco. */
.saltar-al-contenido{
  position:absolute;left:.75rem;top:-4rem;z-index:200;
  background:var(--lima);color:#141414;font-weight:700;font-size:.9rem;
  padding:.7rem 1.1rem;border-radius:0 0 10px 10px;text-decoration:none;
  transition:top .18s var(--ease);
}
.saltar-al-contenido:focus{top:0}
#app:focus{outline:none}
.btn-contacto{display:flex;align-items:stretch;border-radius:12px;overflow:hidden;width:fit-content;box-shadow:var(--shadow-bone)}
.btn-contacto--bloque{width:100%}
.bc-tel,.bc-wa{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--lima);color:#141414;font-weight:700;transition:filter .2s var(--ease)}
.bc-tel{flex:1 1 auto;gap:.55rem;min-height:48px;padding:.75rem 1.25rem;font-size:1rem;letter-spacing:.01em}
.bc-wa{flex:0 0 auto;min-width:54px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:#25D366;color:#fff;border-left:none}
.bc-wa svg{display:block}
.bc-wa:hover{filter:brightness(1.06)}
.bc-tel svg,.bc-wa svg{width:18px;height:18px}
.bc-tel:hover,.bc-wa:hover{filter:brightness(1.07)}
.bc-tel:active,.bc-wa:active{filter:brightness(.94)}

/* Variante secundaria (sobre fondos oscuros, junto a un primario) */
.btn-contacto--secundario{box-shadow:none}
.btn-contacto--secundario .bc-tel{background:transparent;color:var(--bone);border:1px solid var(--linea);border-right:none;border-radius:12px 0 0 12px;font-weight:600}
.btn-contacto--secundario .bc-wa{background:#25D366;color:#fff;border:1px solid #25D366;border-radius:0 12px 12px 0}
.btn-contacto--secundario .bc-tel:hover{filter:none;border-color:var(--humo-2);color:#fff}

/* Tarjeta de stock: los dos segmentos forman un solo boton */
.card-acciones{display:flex;gap:0;margin:.7rem 0 .55rem;position:relative;z-index:2;border-radius:10px;overflow:hidden}
.card-acciones .card-llamar{flex:1 1 auto;margin:0;border-radius:0}
.card-wa{
  flex:0 0 48px;display:flex;align-items:center;justify-content:center;
  min-height:44px;background:#25D366;color:#fff;text-decoration:none;
  transition:filter .2s var(--ease);
}
.card-wa svg{display:block}
.card-wa svg{width:18px;height:18px}
.card-wa:hover{filter:brightness(1.07)}

/* Plano de la nave: llamar+wa unidos, "Ver ficha" aparte */
.v-nave .nq-contacto{display:inline-flex;align-items:stretch;border-radius:10px;overflow:hidden}
.v-nave .nq-contacto .bc-tel{min-height:44px;padding:.45rem .9rem;font-size:.9rem}
.v-nave .nq-contacto .bc-wa{min-width:46px;padding:0 .7rem;background:#25D366;color:#fff}

/* Enlace alternativo en alertas/tasacion: una sola linea, dos vias */
.alt-contacto{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.35rem}
.alt-contacto .alt-sep{color:var(--humo-2)}

/* Barra fija movil: un unico bloque naranja con dos mitades */
.cta-fijo-doble{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;box-shadow:0 -8px 24px rgb(0 0 0 / .35)}
.cta-fijo-btn{
  flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.98rem;letter-spacing:.01em;text-decoration:none;
  padding:.95rem .5rem calc(.95rem + env(safe-area-inset-bottom));
  background:var(--lima);color:#141414;
}
/* Texto en tinta, no en blanco: blanco sobre el verde de WhatsApp da
   1,98:1 y es la mitad de la barra fija del movil, el sitio mas pulsado de
   toda la web. En tinta da 9,35:1 y ademas iguala a la mitad naranja, que
   ya llevaba tinta. */
.cta-fijo-btn--wa{background:#25D366;color:#141414}
.cta-fijo-btn--wa:active{background:#1EBB58}
.cta-fijo-btn:active{background:#C87A42}
@media (max-width:760px){
  .cta-fijo-doble{display:flex}
}
@media (max-width:700px){
  .btn-contacto{width:100%}
  .btn-contacto--secundario{width:100%}
}