/**
 * SEVEN — sistema de diseño del rediseño 2026.
 *
 * Puerto fiel de los tokens y utilidades de kimitest (src/app/globals.css),
 * sin Tailwind: aquí cada utilidad es CSS plano. Este archivo es la fuente de
 * verdad visual del tema; las plantillas nuevas usan estas clases y NO estilos
 * de Elementor. Cualquier ajuste de color/espaciado se hace aquí, no en las
 * plantillas.
 *
 * Alcance: se carga en todo el sitio (pesa poco y así las páginas aún servidas
 * por Elementor pueden ir adoptando botones y tipografía sin esperar a su
 * plantilla propia). Todo va bajo prefijo .sv- o dentro de [data-seven] para
 * no pisar estilos de Elementor de las páginas no portadas.
 */

/* ---------- Tokens ---------- */
:root {
  --sv-ink: #0c0c0c;
  --sv-ink-soft: #161615;
  --sv-ink-2: #121212;
  --sv-ink-3: #1a1a19;
  --sv-paper: #fafaf9;
  --sv-paper-2: #f5f4f1;
  --sv-mist: #f1f0ed;
  --sv-line: #e4e2dd;
  --sv-mute: #6e6c66;
  /* El azul es SOLO el anillo de foco, nunca un acento de marca. */
  --sv-accent: #2e4bff;
  --sv-brand: #7ab51d;
  --sv-brand-soft: #a8ce7e;
  --sv-brand-dark: #5a8c0f;
  --sv-star: #f5b301;

  --sv-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --sv-font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;

  --sv-radius-card: 1.25rem;
  --sv-radius-card-lg: 2rem;
  --sv-radius-pill: 9999px;

  --sv-shadow-card: 0 1px 2px rgb(12 12 12 / 0.04), 0 8px 24px -12px rgb(12 12 12 / 0.12);
  --sv-shadow-float: 0 2px 4px rgb(12 12 12 / 0.06), 0 24px 60px -20px rgb(12 12 12 / 0.28);

  --sv-success: #3f8f5f;

  /* Las tres curvas del sistema, con los nombres del original. --sv-ease es
     la de salida (out-expo), la que usa casi todo. */
  --sv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sv-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --sv-ease-io: cubic-bezier(0.87, 0, 0.13, 1);
  /* La de los cambios de tamaño del panel de precios, más suave que la de
     entrada y con la misma aceleración a los dos lados. */
  --sv-ease-tam: cubic-bezier(0.65, 0, 0.35, 1);

  --sv-blur-glass: 16px;

  /* Escala display: idéntica a kimitest (clamp con piso legible y techo a 1400px). */
  --sv-display-0: 0.75rem;
  --sv-display-1: clamp(1.75rem, 3.5vw, 3.0625rem);
  --sv-display-2: clamp(2.25rem, 5vw, 4.375rem);
  --sv-display-3: clamp(2.75rem, 7vw, 6.125rem);
  --sv-display-4: clamp(3.25rem, 10vw, 8.75rem);
  --sv-display-5: clamp(3.75rem, 14vw, 12.25rem);
  --sv-display-6: clamp(4.5rem, 20vw, 17.5rem);
  --sv-display-7: clamp(5.5rem, 28vw, 24.5rem);
  /* Excepción declarada: cifras de fondo deliberadamente monstruosas. Sin
     clamp a propósito: su función es ocupar sitio, no seguir la jerarquía. */
  --sv-display-max: 36vw;

  /* Corte diagonal de los botones: 14px de inclinación hacia el mismo lado. */
  --sv-corte: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

/* ---------- Base (solo dentro de zonas seven) ---------- */
[data-seven] {
  background: var(--sv-paper);
  color: var(--sv-ink);
  font-family: var(--sv-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-seven] ::selection { background: var(--sv-ink); color: var(--sv-paper); }
[data-seven] :focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
[data-seven] img { max-width: 100%; height: auto; }

/* ---------- Contenedor y tipografía ---------- */
/* El tema padre no aplica border-box a todo, y sin esto el relleno lateral
   del contenedor se suma al 100 % de ancho y la página se desborda. */
[class^="sv-"], [class*=" sv-"], [class^="sv-"] *, [class*=" sv-"] * { box-sizing: border-box; }

/* ---------- El velo de los modales ----------
 *
 * `.sv-explica__fondo` es un <button> a pantalla completa —así se cierra el
 * modal con teclado y con clic fuera—, y por eso le llegaba también el gris:
 * el velo se veía opaco mientras el puntero estaba sobre él y translúcido al
 * pasar a la tarjeta. El fondo se fija en los tres estados. */
.sv-explica__fondo,
.sv-explica__fondo:hover,
.sv-explica__fondo:focus {
  background-color: color-mix(in oklab, var(--sv-ink) 55%, transparent);
}

.sv-container {
  margin-inline: auto;
  width: 100%;
  max-width: 88rem;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .sv-container { padding-inline: 2.5rem; } }

.seven h1, .seven h2, .seven h3, .seven h4, .seven h5, .seven h6,
[class^="sv-"] h1, [class^="sv-"] h2, [class^="sv-"] h3,
[class*=" sv-"] h1, [class*=" sv-"] h2, [class*=" sv-"] h3 {
  font-weight: 400;
}

.sv-display {
  font-family: var(--sv-font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
}
.sv-d0 { font-size: var(--sv-display-0); }
.sv-d1 { font-size: var(--sv-display-1); }
.sv-d2 { font-size: var(--sv-display-2); }
.sv-d3 { font-size: var(--sv-display-3); }
.sv-d4 { font-size: var(--sv-display-4); }
.sv-d5 { font-size: var(--sv-display-5); }
.sv-d6 { font-size: var(--sv-display-6); }
.sv-d7 { font-size: var(--sv-display-7); }
.sv-dmax { font-size: var(--sv-display-max); }

.sv-eyebrow {
  font-size: var(--sv-display-0);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sv-mute);
}
.sv-numeral {
  font-family: var(--sv-font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -0.02em;
}

/* ---------- Titular con rotulador ----------
 *
 * Estado en reposo: el resaltado es un fondo verde plano sobre la palabra, de
 * modo que sin JS el titular ya se lee marcado. Con JS, seven.js parte el
 * titular en palabras y líneas y sustituye esto por la caja animada de abajo.
 */
.sv-marca-hl {
  background: var(--sv-brand);
  color: var(--sv-ink);
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Cada palabra, ya repartida por el JS. El fondo va DETRÁS del texto y se
   barre con scaleX desde la izquierda. */
.sv-palabra, .sv-hl { display: inline-block; }
.sv-hl { position: relative; padding: 0 0.12em; }
.sv-hl__fondo {
  position: absolute; inset: 0.06em 0;
  transform-origin: left center;
  background: var(--sv-brand);
}
.sv-hl__texto { position: relative; color: var(--sv-ink); }

/* La máscara de cada línea. La holgura evita que recorte tildes y
   descendentes, y el margen negativo la devuelve a su sitio. */
.sv-tit-mascara {
  display: block; overflow: hidden;
  padding-bottom: 0.12em; margin-bottom: -0.12em;
}
.sv-tit-linea { display: block; }

/* ---------- Botones: tres y no más ----------
   brand  = verde → negro (principal)
   dark   = negro → verde
   light  = blanco → negro
   El barrido de hover sube desde abajo, como en kimitest. */
.sv-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  clip-path: var(--sv-corte);
  padding: 0.75rem 2rem;
  font: 500 0.875rem/1.2 var(--sv-font-sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  transition: color 0.3s var(--sv-ease), transform 0.3s var(--sv-ease);
}
.sv-btn:active { transform: scale(0.97); }
.sv-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--sv-ease);
}
.sv-btn:hover::before { transform: scaleY(1); }
.sv-btn--lg { padding: 1rem 2.5rem; font-size: 1rem; }
.sv-btn--sm { padding: 0.5rem 1.5rem; font-size: 0.875rem; }

.sv-btn--brand { background: var(--sv-brand); color: var(--sv-ink); }
.sv-btn--brand::before { background: var(--sv-ink); }
.sv-btn--brand:hover { color: var(--sv-paper); }

.sv-btn--dark { background: var(--sv-ink); color: var(--sv-paper); }
.sv-btn--dark::before { background: var(--sv-brand); }
.sv-btn--dark:hover { color: var(--sv-ink); }

.sv-btn--light { background: var(--sv-paper); color: var(--sv-ink); }
.sv-btn--light::before { background: var(--sv-ink); }
.sv-btn--light:hover { color: var(--sv-paper); }

/* Blanco que se rellena de verde al pasar el ratón (no de tinta como --light).
   El texto se queda oscuro, legible sobre el verde. Para el par del hero:
   uno verde sólido y este que vira a verde. */
.sv-btn--claro { background: var(--sv-paper); color: var(--sv-ink); }
.sv-btn--claro::before { background: var(--sv-brand); }
.sv-btn--claro:hover { color: var(--sv-ink); }

/* ---------- Tarjeta de vehículo (la de kimitest) ---------- */
.sv-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--sv-radius-card-lg);
  border: 1px solid color-mix(in oklab, var(--sv-line) 70%, transparent);
  background: var(--sv-paper);
  text-decoration: none;
  color: inherit;
  transition: transform 0.5s var(--sv-ease), box-shadow 0.5s var(--sv-ease), border-color 0.5s var(--sv-ease);
}
.sv-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--sv-brand) 40%, transparent);
  box-shadow: var(--sv-shadow-float);
}
.sv-card__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sv-mist); }
.sv-card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--sv-ease); }
.sv-card:hover .sv-card__foto img { transform: scale(1.05); }
.sv-card__cuerpo { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.sv-card__marca {
  font-size: var(--sv-display-0);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sv-brand-dark);
}
.sv-card__nombre {
  margin: 0.25rem 0 0;
  font-family: var(--sv-font-display);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.sv-card__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
  padding: 0.625rem 0;
  border-radius: var(--sv-radius-card);
  background: color-mix(in oklab, var(--sv-mist) 60%, transparent);
  text-align: center;
}
.sv-card__datos > div + div { border-left: 1px solid color-mix(in oklab, var(--sv-brand) 40%, transparent); }
/* El tema padre pone los `dt` en negrita; aquí son rótulos, no titulares. */
.sv-card__datos dt, .sv-visitanos__datos dt { font-weight: 400; }
.sv-card__datos dt { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-mute); }
.sv-card__datos dd { margin: 0.125rem 0 0; font-size: 0.875rem; }
.sv-card__pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1.25rem; }
.sv-card__precio { font-size: 1.5rem; line-height: 1; }
.sv-card__garantia { margin-top: 0.375rem; font-size: 0.75rem; color: var(--sv-mute); }
.sv-card__cuota {
  flex-shrink: 0;
  clip-path: var(--sv-corte);
  background: var(--sv-brand);
  color: var(--sv-ink);
  padding: 0.5rem 1.5rem;
  text-align: right;
}
.sv-card__cuota small { display: block; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; }
.sv-card__cuota strong { display: block; margin-top: 0.25rem; font-size: 1rem; line-height: 1; font-weight: 400; }

/* ---------- Deslizador con pista de ayuda ---------- */
.sv-slider { position: relative; height: 1.25rem; }
.sv-slider__via, .sv-slider__lleno {
  position: absolute; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 999px;
}
.sv-slider__via { inset-inline: 0; background: color-mix(in oklab, var(--sv-ink) 8%, transparent); }
.sv-slider__lleno { left: 0; background: var(--sv-ink); }
.sv-slider__pomo {
  position: absolute; top: 50%; width: 1rem; height: 1rem;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--sv-ink); box-shadow: 0 0 0 4px var(--sv-paper);
  pointer-events: none;
}
.sv-slider input[type="range"] {
  position: absolute; inset: 0; width: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.sv-aro-pista {
  position: absolute; inset: -0.375rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--sv-ink) 40%, transparent);
  animation: sv-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.sv-texto-pista { margin-top: 0.375rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; color: var(--sv-mute); }
.sv-texto-pista::before { content: "↔"; animation: sv-pulse 2s ease-in-out infinite; }
@keyframes sv-ping { 75%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes sv-pulse { 50% { opacity: 0.4; } }

/* ---------- Carrusel arrastrable ---------- */
.sv-pista {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 0.5rem 0.5rem 1.5rem;
  margin-inline: -0.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  user-select: none;
  -webkit-user-select: none;
}
.sv-pista::-webkit-scrollbar { display: none; }
.sv-pista > * { flex-shrink: 0; scroll-snap-align: start; width: 17rem; }
@media (min-width: 640px) { .sv-pista > * { width: 21rem; } }
@media (pointer: fine) { .sv-pista { cursor: grab; } }

.sv-flecha {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--sv-line); background: transparent; color: var(--sv-ink);
  cursor: pointer; transition: all 0.3s var(--sv-ease);
}
.sv-flecha:hover { border-color: var(--sv-ink); background: var(--sv-ink); color: var(--sv-paper); }

/* ---------- Marquesina ---------- */
.sv-marquee { overflow: hidden; }
.sv-marquee__pista { display: flex; width: max-content; animation: sv-marquee 40s linear infinite; }
.sv-marquee:hover .sv-marquee__pista { animation-play-state: paused; }
@keyframes sv-marquee { to { transform: translateX(-50%); } }

/* ---------- Extras ---------- */
.sv-grain { position: relative; }
.sv-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.04; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sv-oscuro { background: var(--sv-ink); color: var(--sv-paper); }
.sv-oscuro .sv-eyebrow { color: color-mix(in oklab, var(--sv-paper) 50%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .sv-marquee__pista { animation: none; }
  .sv-aro-pista, .sv-texto-pista::before { animation: none; }
  .sv-btn, .sv-card, .sv-card__foto img { transition: none; }
}

/* =========================================================================
 * CABECERA
 * Flotante sobre el contenido, en cápsula clara. Sobre banda oscura se
 * invierte con .sv-cabecera--oscura (lo pone seven.js midiendo qué hay
 * debajo, no adivinando por página).
 * ========================================================================= */
.sv-cabecera {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
}

/* La cabecera es siempre fija y de ancho completo; lo que se transforma en
   píldora es la barra interior. Animar el ancho del propio elemento fijo
   obliga al navegador a recalcular el layout en cada fotograma del scroll.
   Arranca plana y a sangre, y sólo al bajar 80 px se recoge en la cápsula:
   sobre la portada de una ficha o el hero de la home tiene que dejar ver la
   foto, no plantarle una barra encima. */
.sv-cabecera__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-inline: auto;
  height: 4rem;
  max-width: 88rem;
  padding-inline: 1.25rem;
  border: 1px solid transparent;
  border-bottom-color: transparent;
  pointer-events: auto;
  transition:
    max-width 0.5s var(--sv-ease),
    padding 0.5s var(--sv-ease),
    margin 0.5s var(--sv-ease),
    height 0.5s var(--sv-ease),
    border-radius 0.5s var(--sv-ease),
    background-color 0.5s var(--sv-ease),
    border-color 0.5s var(--sv-ease);
}
@media (min-width: 768px) {
  .sv-cabecera__caja { height: 5rem; padding-inline: 2.5rem; }
}
.sv-cabecera--oscura .sv-cabecera__caja {
  border-bottom-color: color-mix(in oklab, var(--sv-paper) 10%, transparent);
  color: var(--sv-paper);
}

/* Recogida: la cápsula. */
.sv-cabecera--pegada .sv-menu { gap: 1.5rem; }
.sv-cabecera--pegada .sv-cabecera__acciones { gap: 1rem; }
.sv-cabecera--pegada .sv-cabecera__caja {
  margin-top: 0.75rem;
  height: 3.5rem;
  max-width: 64rem;
  padding-inline: 1.5rem;
  border-radius: var(--sv-radius-pill);
  box-shadow: var(--sv-shadow-float);
  /* glass-paper del sistema. */
  background: color-mix(in oklab, var(--sv-paper) 72%, transparent);
  backdrop-filter: blur(var(--sv-blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--sv-blur-glass)) saturate(140%);
  border-color: color-mix(in oklab, var(--sv-ink) 8%, transparent);
}
@media (min-width: 768px) { .sv-cabecera--pegada .sv-cabecera__caja { height: 4rem; } }
/* Y sobre banda oscura, el mismo vidrio en tinta. */
.sv-cabecera--pegada.sv-cabecera--oscura .sv-cabecera__caja {
  background: color-mix(in oklab, var(--sv-ink) 60%, transparent);
  border-color: color-mix(in oklab, var(--sv-paper) 10%, transparent);
}

.sv-cabecera__marca {
  display: flex; align-items: center; gap: 0.625rem;
  text-decoration: none; color: inherit; flex-shrink: 0;
}
.sv-cabecera__marca img { height: 1.75rem; width: auto; transition: transform 0.5s var(--sv-ease); }
.sv-cabecera__marca:hover img { transform: scale(1.05); }
.sv-cabecera__marca span {
  font-family: var(--sv-font-display);
  font-weight: 600; font-size: 1.125rem; letter-spacing: 0.18em;
  transition: color 0.3s var(--sv-ease);
}
.sv-cabecera__nav { display: none; }
@media (min-width: 1024px) { .sv-cabecera__nav { display: flex; align-items: center; gap: 2rem; } }
.sv-menu { display: flex; align-items: center; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.sv-menu a {
  position: relative;
  /* El menú real tiene más entradas que la maqueta y dentro de la cápsula se
     partían en dos líneas. */
  white-space: nowrap;
  font-size: 0.875rem; text-decoration: none;
  color: var(--sv-mute);
  transition: color 0.3s var(--sv-ease);
}
.sv-menu a:hover { color: var(--sv-ink); }
/* El filete que crece bajo el enlace: el subrayado del original. */
.sv-menu a::after {
  content: ""; position: absolute; left: 0; bottom: -0.25rem;
  height: 1px; width: 0; background: currentColor;
  transition: width 0.3s var(--sv-ease);
}
.sv-menu a:hover::after { width: 100%; }
.sv-menu .current-menu-item > a { color: var(--sv-ink); }
.sv-menu .current-menu-item > a::after { width: 100%; }
.sv-cabecera--oscura .sv-menu a { color: color-mix(in oklab, var(--sv-paper) 70%, transparent); }
.sv-cabecera--oscura .sv-menu a:hover,
.sv-cabecera--oscura .sv-menu .current-menu-item > a { color: var(--sv-paper); }

.sv-cabecera__acciones { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.sv-cabecera__tel {
  display: none; text-decoration: none; color: inherit; font-size: 0.875rem;
  transition: color 0.3s var(--sv-ease);
}
@media (min-width: 768px) { .sv-cabecera__tel { display: inline; } }
/* El CTA de cabecera es una píldora, no un botón cortado: los cortados son
   los de las secciones, y aquí conviven con una barra redondeada. */
.sv-cabecera__cta {
  border-radius: var(--sv-radius-pill);
  background: var(--sv-brand); color: var(--sv-ink);
  padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.3s var(--sv-ease), transform 0.2s var(--sv-ease);
}
.sv-cabecera__cta:hover { background: var(--sv-brand-soft); }
.sv-cabecera__cta:active { transform: scale(0.98); }

.sv-cabecera__hamburguesa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem;
  width: 2.75rem; height: 2.75rem;
  border: 0; background: none; cursor: pointer; color: inherit;
}
@media (min-width: 1024px) { .sv-cabecera__hamburguesa { display: none; } }
.sv-cabecera__hamburguesa span { display: block; width: 1.5rem; height: 1px; background: currentColor; transition: transform 0.3s var(--sv-ease); }
.sv-cabecera--abierta .sv-cabecera__hamburguesa span:first-child { transform: translateY(3.5px) rotate(45deg); }
.sv-cabecera--abierta .sv-cabecera__hamburguesa span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* El contenido arranca por debajo de la cabecera flotante. */
[data-seven] .sv-inicio-pagina { padding-top: 7.5rem; }

/* =========================================================================
 * PIE
 * ========================================================================= */
.sv-pie { position: relative; background: var(--sv-ink); color: var(--sv-paper); }
.sv-pie__cinta { padding: 2.5rem 0; border-bottom: 1px solid color-mix(in oklab, var(--sv-paper) 12%, transparent); }
@media (min-width: 768px) { .sv-pie__cinta { padding: 3.5rem 0; } }
.sv-pie__lema, .sv-pie__punto { padding-inline: 2rem; font-weight: 600; letter-spacing: 0.12em; white-space: nowrap; }
.sv-pie__punto { color: var(--sv-brand); }

.sv-pie__cols {
  display: grid; gap: 3rem; padding-block: 4rem;
}
@media (min-width: 768px) { .sv-pie__cols { grid-template-columns: repeat(3, 1fr); padding-block: 5rem; } }
.sv-pie .sv-eyebrow { color: color-mix(in oklab, var(--sv-paper) 55%, transparent); }
.sv-pie__lista { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; font-size: 0.875rem; }
.sv-pie__lista a { color: color-mix(in oklab, var(--sv-paper) 70%, transparent); text-decoration: none; transition: color 0.3s var(--sv-ease); }
.sv-pie__lista a:hover { color: var(--sv-paper); }
.sv-pie__lista li { color: color-mix(in oklab, var(--sv-paper) 70%, transparent); }
.sv-pie__dias { color: color-mix(in oklab, var(--sv-paper) 45%, transparent); }

.sv-pie__provincias { border-top: 1px solid color-mix(in oklab, var(--sv-paper) 10%, transparent); padding-block: 3rem; }
.sv-pie__mapa {
  display: grid; gap: 0.5rem 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(2, 1fr); font-size: 0.8125rem;
}
@media (min-width: 640px) { .sv-pie__mapa { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .sv-pie__mapa { grid-template-columns: repeat(6, 1fr); } }
.sv-pie__mapa a { color: color-mix(in oklab, var(--sv-paper) 55%, transparent); text-decoration: none; }
.sv-pie__mapa a:hover { color: var(--sv-paper); }

.sv-pie__legal { border-top: 1px solid color-mix(in oklab, var(--sv-paper) 10%, transparent); }
.sv-pie__legal-caja {
  display: flex; flex-direction: column; gap: 0.75rem; padding-block: 1.5rem;
  font-size: 0.75rem; color: color-mix(in oklab, var(--sv-paper) 40%, transparent);
}
@media (min-width: 768px) { .sv-pie__legal-caja { flex-direction: row; align-items: center; justify-content: space-between; } }
.sv-pie__legal-enlaces { display: flex; flex-wrap: wrap; gap: 1rem; }
.sv-pie__legal-enlaces a { color: inherit; text-decoration: none; }
.sv-pie__legal-enlaces a:hover { color: var(--sv-paper); }

/* =========================================================================
 * FICHA DE VEHÍCULO
 * ========================================================================= */

.sv-oculto { display: none !important; }

/* ---------- Portada de la ficha ----------
 *
 * La capa va FIJA y con su tamaño puesto por JS fotograma a fotograma: aquí
 * sólo se declara su estado de partida (pantalla entera) y lo que no cambia.
 * Sin JS no se ve nada de esto —la pista mide 0 y la capa se oculta—, así que
 * la ficha empieza directamente por la galería. */
.sv-pista-portada { display: none; }
.sv-portada, .sv-portada__rotulo, .sv-portada__pie { display: none; }

/* Sólo hay portada en escritorio: en el móvil la ficha arranca por la
   cabecera, que es lo que se espera de un producto en el teléfono. */
@media (min-width: 1024px) {
  .sv-ficha--con-portada .sv-pista-portada { display: block; height: 100svh; }
  /* Cada uno con su display propio: poner block a los tres tumbaba el flex
     que baja el rótulo al pie de la pantalla y centra la invitación. */
  .sv-ficha--con-portada .sv-portada { display: block; }
  .sv-ficha--con-portada .sv-portada__rotulo { display: flex; }
  .sv-ficha--con-portada .sv-portada__pie { display: flex; }
}

.sv-portada {
  position: fixed; top: 0; left: 0; z-index: 5;
  width: 100vw; height: 100svh;
  overflow: hidden; background: var(--sv-mist);
  pointer-events: none;
}
.sv-portada__foto { width: 100%; height: 100%; object-fit: cover; }
.sv-portada__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    var(--sv-ink),
    color-mix(in oklab, var(--sv-ink) 55%, transparent) 50%,
    color-mix(in oklab, var(--sv-ink) 15%, transparent));
}

.sv-portada__rotulo {
  position: fixed; inset: 0; z-index: 6;
  display: flex; align-items: flex-end; padding-bottom: 9rem;
  pointer-events: none; color: var(--sv-paper);
}
.sv-portada__marca { color: color-mix(in oklab, var(--sv-paper) 60%, transparent); }
.sv-portada__nombre {
  margin: 0.75rem 0 0;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.92; letter-spacing: -0.02em;
}
.sv-portada__specs {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem 2.5rem;
  margin: 2rem 0 0; padding: 0; list-style: none;
}
.sv-portada__spec-valor { display: block; font-size: 2.25rem; line-height: 1; letter-spacing: -0.02em; }
.sv-portada__spec-label {
  display: block; margin-top: 0.5rem;
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sv-paper) 50%, transparent);
}
.sv-portada__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; margin: 1.75rem 0 0; }
.sv-portada__precio-cifra { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -0.02em; }
.sv-portada__precio-desde { font-size: 1rem; color: color-mix(in oklab, var(--sv-paper) 60%, transparent); }
.sv-portada__sellos {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  margin: 1.75rem 0 0; padding: 0; list-style: none;
  font-size: 0.875rem; color: color-mix(in oklab, var(--sv-paper) 65%, transparent);
}
.sv-portada__sellos li { display: flex; align-items: center; gap: 0.5rem; }
.sv-portada__sellos svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--sv-brand); }

.sv-portada__pie {
  position: fixed; inset-inline: 0; bottom: 2rem; z-index: 7;
  display: flex; justify-content: center; pointer-events: none;
}
.sv-portada__pie button {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  border: 0; background: none; cursor: pointer; pointer-events: auto;
  padding: 0.5rem 1rem; border-radius: var(--sv-radius-card);
  font: inherit; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sv-paper) 80%, transparent);
  transition: opacity 0.3s var(--sv-ease);
}
.sv-portada__pie button:hover { opacity: 0.7; }
/* El hilo verde que recorre la línea: la misma señal de scroll que la home. */
.sv-portada__hilo {
  position: relative; display: block; width: 1px; height: 3rem; overflow: hidden;
  background: color-mix(in oklab, var(--sv-paper) 20%, transparent);
}
.sv-portada__hilo span { position: absolute; inset-inline: 0; top: 0; display: block; height: 1.25rem; background: var(--sv-brand); }

/* ---------- Rejilla de la ficha ---------- */
.sv-ficha__grid {
  display: grid;
  gap: 2.5rem;
  padding-top: 3rem;
}
@media (min-width: 1024px) {
  .sv-ficha__grid { grid-template-columns: 1.55fr 1fr; gap: 3rem; padding-top: 7rem; }
}
.sv-ficha__contenido, .sv-ficha__lateral { min-width: 0; }

.sv-ficha__grande {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden;
  border: 0; padding: 0; cursor: zoom-in;
  border-radius: var(--sv-radius-card-lg);
  background: var(--sv-mist);
}
.sv-ficha__grande img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sv-ease); }
.sv-ficha__grande:hover img { transform: scale(1.05); }
.sv-ficha__contador {
  position: absolute; top: 1rem; right: 1rem;
  border-radius: var(--sv-radius-pill);
  background: color-mix(in oklab, var(--sv-ink) 70%, transparent);
  padding: 0.375rem 0.75rem; font-size: 0.75rem; color: var(--sv-paper);
  backdrop-filter: blur(4px);
}
.sv-ficha__resumen {
  position: absolute; inset-inline: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem;
  padding: 6rem 1.5rem 1.5rem; text-align: left;
  background: linear-gradient(to top, var(--sv-ink), color-mix(in oklab, var(--sv-ink) 70%, transparent) 45%, transparent);
}
@media (min-width: 640px) { .sv-ficha__resumen { grid-template-columns: repeat(4, 1fr); } }
.sv-ficha__resumen-valor { display: block; font-size: 1.6rem; line-height: 1; letter-spacing: -0.02em; color: var(--sv-paper); }
.sv-ficha__resumen-label {
  display: block; margin-top: 0.375rem;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sv-paper) 55%, transparent);
}

.sv-ficha__miniaturas {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.375rem;
  margin: 0.375rem 0 0; padding: 0; list-style: none;
}
.sv-ficha__miniaturas button {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  overflow: hidden; border: 0; padding: 0; cursor: pointer;
  border-radius: 3px; background: var(--sv-mist);
  transition: opacity 0.3s var(--sv-ease);
}
.sv-ficha__miniaturas button:hover { opacity: 0.7; }
.sv-ficha__miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.sv-bloque { padding-top: 4rem; scroll-margin-top: 6rem; }
@media (min-width: 768px) { .sv-bloque { padding-top: 5rem; } }
.sv-ficha__titulo { margin: 0.5rem 0 0; font-size: 2rem; line-height: 1.05; }

/* ---------- Ficha técnica ---------- */
.sv-specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
  margin: 2rem 0 0; padding: 0; list-style: none;
}
@media (min-width: 640px) { .sv-specs { grid-template-columns: repeat(3, 1fr); } }
.sv-spec {
  display: grid; justify-items: center; gap: 0.5rem;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card);
  background: var(--sv-paper); padding: 1.25rem 1rem; text-align: center;
}
.sv-spec__icono { width: 1.9rem; height: 1.9rem; color: var(--sv-brand-dark); }
/* El label va ARRIBA del valor y más pequeño: se lee «potencia: 115 CV». */
.sv-spec__label { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-mute); }
.sv-spec__valor { font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.01em; }

.sv-equipamiento { margin-top: 2rem; font-size: 0.95rem; line-height: 1.7; color: var(--sv-ink-2); }
.sv-equipamiento ul { padding-left: 1.1rem; }

/* ---------- Panel de precio ---------- */
.sv-ficha__lateral { position: relative; }
.sv-panel {
  overflow: hidden;
  margin-top: 1.5rem;
  border-radius: var(--sv-radius-card-lg);
  background: var(--sv-paper);
  box-shadow: var(--sv-shadow-card);
  transition: top 0.9s var(--sv-ease-tam);
}
@media (min-width: 1024px) { .sv-panel { position: sticky; top: 6rem; } }
.sv-panel--abierto { max-height: calc(100vh - 8rem); overflow-y: auto; }

/* Sobre el verde de marca el texto va en tinta: en blanco se queda en 2,3:1. */
.sv-panel__cabeza { background: var(--sv-brand); color: var(--sv-ink); padding: 1.25rem 1.5rem; }
.sv-panel__precios { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 0.75rem; }
.sv-panel__rotulo {
  margin: 0; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sv-ink) 70%, transparent);
}
.sv-panel__cifra { margin: 0.25rem 0 0; font-size: 1.85rem; line-height: 1; letter-spacing: -0.03em; }
.sv-panel__cifra--flojo { color: color-mix(in oklab, var(--sv-ink) 60%, transparent); }
.sv-panel__contado { text-align: right; }
.sv-panel__ahorro {
  display: inline-flex; align-items: center; margin: 0.5rem 0 0;
  border-radius: var(--sv-radius-pill); background: var(--sv-ink);
  padding: 0.25rem 0.625rem; font-size: 0.7rem; color: var(--sv-paper);
}
.sv-panel__vs {
  margin-top: 0.75rem; border-radius: var(--sv-radius-pill);
  border: 1px solid color-mix(in oklab, var(--sv-ink) 30%, transparent);
  padding: 0.125rem 0.5rem; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sv-ink) 70%, transparent);
}
.sv-panel__barra {
  display: flex; height: 6px; overflow: hidden; margin-top: 1.25rem;
  border-radius: 999px; background: color-mix(in oklab, var(--sv-ink) 15%, transparent);
}
.sv-panel__barra span { height: 100%; background: var(--sv-ink); transition: width 0.7s var(--sv-ease); }
.sv-panel__cuota { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; }
.sv-panel__cuota p { margin: 0; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; }
.sv-panel__mes { font-size: 0.875rem; color: color-mix(in oklab, var(--sv-ink) 75%, transparent); }
.sv-panel__plazo { font-size: 0.75rem; color: color-mix(in oklab, var(--sv-ink) 75%, transparent); }

.sv-panel__mandos { padding: 1.25rem 1.5rem 0; }
.sv-mando__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.sv-mando__label { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sv-mute); }
.sv-mando__valor { font-size: 1rem; }
.sv-mando .sv-slider { margin-top: 0.625rem; }

.sv-plazos { margin: 1.25rem 0 0; border: 0; padding: 0; }
.sv-plazos__botones { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.625rem; }
.sv-plazo {
  border: 0; border-radius: var(--sv-radius-pill); cursor: pointer;
  background: var(--sv-mist); color: var(--sv-mute);
  padding: 0.375rem 0.75rem; font-size: 0.875rem;
  transition: background-color 0.3s var(--sv-ease), color 0.3s var(--sv-ease);
}
.sv-plazo:hover { color: var(--sv-ink); }
.sv-plazo--activo { background: var(--sv-ink); color: var(--sv-paper); }

/* grid-template-rows 0fr→1fr sí interpola: no hace falta medir alturas. */
.sv-panel__desglose {
  display: grid; grid-template-rows: 1fr;
  margin-top: 1.5rem; padding: 0 1.5rem;
  transition: grid-template-rows 0.9s var(--sv-ease-tam), margin 0.9s var(--sv-ease-tam);
}
.sv-panel__desglose > * { overflow: hidden; }
.sv-panel__desglose-interior { border-top: 1px solid var(--sv-line); padding-top: 1.5rem; transition: opacity 0.5s var(--sv-ease-tam) 0.2s; }
.sv-panel--compacto .sv-panel__desglose { grid-template-rows: 0fr; margin-top: 0; }
.sv-panel--compacto .sv-panel__desglose-interior { opacity: 0; transition-delay: 0s; }

.sv-lineas { margin: 0; padding: 0; list-style: none; }
.sv-linea {
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 1px solid var(--sv-line); padding: 1rem 0;
  font-size: 0.875rem;
}
.sv-linea--partida { justify-content: space-between; margin-top: 1rem; }
.sv-linea__vacio { border-bottom: 1px solid var(--sv-line); padding: 1rem 0; font-size: 0.875rem; line-height: 1.6; color: var(--sv-mute); }
.sv-linea__importe { flex-shrink: 0; color: var(--sv-ink); transition: color 0.3s var(--sv-ease); }
.sv-interruptor--off ~ .sv-linea__importe { color: var(--sv-mute); text-decoration: line-through; }
.sv-linea__info {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.5rem; height: 1.5rem; cursor: pointer;
  border: 1px solid var(--sv-line); border-radius: 50%; background: none;
  font-size: 0.7rem; color: var(--sv-mute);
  transition: border-color 0.3s, color 0.3s;
  padding: 0; margin: 0; box-sizing: border-box;
}
/* El :focus va aquí junto al :hover porque GeneratePress pinta
   `button:focus { color:#fff }`: al cerrar el modal el foco vuelve al
   botón y el interrogante se quedaba blanco sobre blanco. */
.sv-linea__info:hover, .sv-linea__info:focus { border-color: var(--sv-ink); color: var(--sv-ink); }
.sv-linea__si { display: flex; align-items: center; gap: 0.75rem; }
.sv-linea__si svg { width: 1rem; height: 1rem; color: var(--sv-brand-dark); }
.sv-linea--garantia { justify-content: space-between; }
.sv-linea__nota { color: var(--sv-mute); }

.sv-interruptor {
  display: flex; flex: 1; align-items: center; gap: 1rem; min-width: 0;
  border: 0; padding: 0; background: none; cursor: pointer; text-align: left;
}
.sv-interruptor__mando {
  position: relative; flex-shrink: 0; width: 2.5rem; height: 1.5rem;
  border-radius: 999px; background: color-mix(in oklab, var(--sv-ink) 12%, transparent);
  transition: background-color 0.3s var(--sv-ease);
}
.sv-interruptor--on .sv-interruptor__mando { background: var(--sv-brand); }
.sv-interruptor__mando span {
  position: absolute; top: 0.25rem; left: 0.25rem; width: 1rem; height: 1rem;
  border-radius: 50%; background: var(--sv-paper); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: left 0.3s var(--sv-ease);
}
.sv-interruptor--on .sv-interruptor__mando span { left: 1.25rem; }
.sv-interruptor__texto { min-width: 0; flex: 1; }
.sv-interruptor__label { display: block; color: var(--sv-mute); transition: color 0.3s var(--sv-ease); }
.sv-interruptor--on .sv-interruptor__label { color: var(--sv-ink); }
.sv-interruptor__nota { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--sv-mute); }

.sv-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 1.25rem; border-radius: var(--sv-radius-card);
  background: var(--sv-brand); color: var(--sv-ink);
  padding: 1rem 1.25rem; font-size: 0.875rem; font-weight: 500;
}
.sv-total span:last-child { font-size: 1.5rem; letter-spacing: -0.02em; font-weight: 400; }
.sv-panel__entrega-rotulo { display: block; margin-top: 1.5rem; }

.sv-entregas { display: grid; gap: 0.375rem; margin-top: 1rem; }
.sv-entrega {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card);
  background: none; cursor: pointer; padding: 0.75rem 1rem; text-align: left;
  transition: border-color 0.3s var(--sv-ease), background-color 0.3s var(--sv-ease);
}
.sv-entrega:hover { border-color: color-mix(in oklab, var(--sv-ink) 25%, transparent); }
.sv-entrega--activa { border-color: var(--sv-ink); background: color-mix(in oklab, var(--sv-ink) 4%, transparent); }
.sv-entrega__punto {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--sv-ink) 25%, transparent);
}
.sv-entrega--activa .sv-entrega__punto { border-color: var(--sv-ink); }
.sv-entrega__punto span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sv-ink); transform: scale(0); transition: transform 0.3s var(--sv-ease); }
.sv-entrega--activa .sv-entrega__punto span { transform: scale(1); }
.sv-entrega__texto { flex: 1; min-width: 0; }
.sv-entrega__label { display: block; font-size: 0.875rem; }
.sv-entrega__nota { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--sv-mute); }
.sv-entrega__importe { flex-shrink: 0; font-size: 0.875rem; color: var(--sv-mute); }

.sv-panel__acciones { display: grid; gap: 0.5rem; margin-top: 1.5rem; padding: 0 1.5rem 1.5rem; }
.sv-panel__acciones .sv-btn { width: 100%; }
.sv-panel__reserva { margin: 0.25rem 0 0; text-align: center; font-size: 0.75rem; line-height: 1.6; color: var(--sv-mute); }
.sv-panel__ver-desglose {
  border: 0; background: none; cursor: pointer;
  font-size: 0.75rem; color: var(--sv-mute); text-underline-offset: 4px;
}
.sv-panel__ver-desglose:hover { color: var(--sv-ink); text-decoration: underline; }

/* ---------- Garantía comparada ---------- */
.sv-garantia {
  display: grid; gap: 2rem; margin-top: 2rem;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card-lg);
  background: var(--sv-paper); padding: 1.5rem;
}
@media (min-width: 768px) { .sv-garantia { grid-template-columns: 1fr 1.3fr; gap: 2.5rem; padding: 2rem; } }
.sv-garantia__titular { margin: 0.75rem 0 0; font-size: 1.6rem; line-height: 1.15; }
.sv-garantia__texto { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; color: var(--sv-mute); }
.sv-garantia__texto strong { color: var(--sv-ink); font-weight: 500; }
.sv-garantia__planes { display: grid; gap: 0.5rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .sv-garantia__planes { grid-template-columns: 1fr 1fr; } }
.sv-garantia__plan { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card); background: var(--sv-paper-2); padding: 0.875rem 1rem; }
.sv-garantia__plan--premium { border-color: var(--sv-ink); background: var(--sv-ink); color: var(--sv-paper); }
.sv-garantia__plan--premium .sv-eyebrow { color: var(--sv-brand); }
.sv-garantia__precio { margin: 0.375rem 0 0; font-size: 1.125rem; }
.sv-garantia__pie { margin-top: 1.25rem; font-size: 0.75rem; line-height: 1.6; color: var(--sv-mute); }

.sv-garantia__encabezado, .sv-garantia__filas li {
  display: grid; grid-template-columns: 1fr 5rem 5rem; align-items: center; gap: 0.5rem;
}
.sv-garantia__encabezado { border-bottom: 1px solid var(--sv-line); padding-bottom: 0.75rem; align-items: end; }
.sv-garantia__col { text-align: center; }
.sv-garantia__col--premium { border-radius: var(--sv-radius-card) var(--sv-radius-card) 0 0; background: var(--sv-ink); color: var(--sv-brand); padding: 0.375rem 0; }
.sv-garantia__filas { margin: 0; padding: 0; list-style: none; }
.sv-garantia__filas li { border-bottom: 1px solid var(--sv-line); }
.sv-garantia__que { font-size: 0.875rem; padding: 0.625rem 0; }
.sv-garantia__col--sombra { background: color-mix(in oklab, var(--sv-ink) 4%, transparent); padding: 0.5rem 0; }
.sv-garantia__filas svg { width: 1rem; height: 1rem; }
.sv-marca-si { color: var(--sv-brand-dark); }
.sv-marca-no { color: color-mix(in oklab, var(--sv-ink) 22%, transparent); }

/* ---------- Secciones con borde diagonal ---------- */
.sv-seccion { position: relative; padding: 6rem 0 1rem; }
@media (min-width: 768px) { .sv-seccion { padding-top: 8rem; } }
.sv-seccion--papel { background: var(--sv-paper); }
.sv-seccion--papel2 { background: var(--sv-paper-2); }
/* El corte diagonal que separa una banda de la siguiente. */
.sv-seccion::before {
  content: ""; position: absolute; inset-inline: 0; top: -3.5rem; height: 3.5rem;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.sv-seccion--papel::before { background: var(--sv-paper); }
.sv-seccion--papel2::before { background: var(--sv-paper-2); }
.sv-seccion:last-of-type { padding-bottom: 6rem; }

.sv-rejilla-coches {
  display: grid; gap: 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none;
}
@media (min-width: 640px) { .sv-rejilla-coches { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sv-rejilla-coches { grid-template-columns: repeat(3, 1fr); } }
.sv-rejilla-coches > li { min-width: 0; }

/* Vela con el «Ver vehículo» que asoma al pasar por encima de la tarjeta. */
.sv-card__vela {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 1rem; background: transparent; transition: background-color 0.5s var(--sv-ease);
}
.sv-card:hover .sv-card__vela { background: color-mix(in oklab, var(--sv-ink) 20%, transparent); }
.sv-card__ver {
  clip-path: var(--sv-corte);
  background: var(--sv-brand); color: var(--sv-ink);
  padding: 0.5rem 1.5rem; font-size: 0.875rem; font-weight: 500;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--sv-ease), transform 0.5s var(--sv-ease);
}
.sv-card:hover .sv-card__ver { opacity: 1; transform: translateY(0); }
.sv-card--vendido { opacity: 0.6; }
.sv-insignia {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  border-radius: var(--sv-radius-pill); padding: 0.25rem 0.75rem;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.sv-insignia--vendido { background: var(--sv-ink); color: var(--sv-paper); }

/* ---------- Comparador ---------- */
.sv-comparador__caja {
  margin-top: 2.5rem; overflow: hidden;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card-lg);
  background: var(--sv-paper);
}
.sv-comparador__cabeza {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  border-bottom: 1px solid var(--sv-line); padding: 1.5rem;
}
.sv-comparador__coche img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--sv-radius-card); background: var(--sv-mist);
}
.sv-comparador__coche .sv-eyebrow { display: block; margin-top: 0.75rem; }
.sv-comparador__nombre { margin: 0.25rem 0 0; font-size: 1.125rem; line-height: 1.2; }
.sv-comparador__vs {
  border-radius: var(--sv-radius-pill); border: 1px solid var(--sv-line);
  padding: 0.25rem 0.625rem; font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sv-mute);
}
.sv-comparador__selector {
  width: 100%; margin-top: 0.25rem;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card);
  background: var(--sv-paper); padding: 0.5rem 0.75rem;
  font: inherit; font-size: 0.95rem; color: var(--sv-ink); cursor: pointer;
}
.sv-comparador__filas { margin: 0; padding: 0; list-style: none; }
.sv-comparador__filas li {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  border-bottom: 1px solid var(--sv-line); padding: 0.875rem 1.5rem;
}
.sv-comparador__que {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sv-mute); text-align: center;
}
.sv-comparador__dato { font-size: 1rem; color: var(--sv-mute); }
.sv-comparador__dato:last-child { text-align: right; }
/* Sólo se destaca el que gana: si se marcaran los dos no diría nada. */
.sv-comparador__dato--gana { color: var(--sv-ink); font-weight: 500; }
.sv-comparador__dato--gana::after {
  content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: 0.4rem;
  border-radius: 50%; background: var(--sv-brand); vertical-align: middle;
}
.sv-comparador__ir { margin: 1.5rem; }

/* ---------- Acordeón ---------- */
.sv-acordeon { margin-top: 2.5rem; border-top: 1px solid var(--sv-line); }
.sv-acordeon__item { border-bottom: 1px solid var(--sv-line); }
.sv-acordeon__boton {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem 1.5rem;
  width: 100%; border: 0; background: none; cursor: pointer;
  padding: 1.5rem 0; text-align: left;
}
.sv-acordeon__titulo { grid-column: 1; grid-row: 1; font-family: var(--sv-font-display); font-size: 1.25rem; line-height: 1.2; }
.sv-acordeon__resumen { grid-column: 1; grid-row: 2; font-size: 0.8rem; color: var(--sv-mute); }
.sv-acordeon__mas {
  position: relative; grid-column: 2; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem;
  transition: transform 0.5s var(--sv-ease);
}
.sv-acordeon__mas::before, .sv-acordeon__mas::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--sv-ink);
  transform: translate(-50%, -50%);
}
.sv-acordeon__mas::before { width: 1.25rem; height: 1.5px; }
.sv-acordeon__mas::after { width: 1.5px; height: 1.25rem; }
.sv-acordeon__item--abierto .sv-acordeon__mas { transform: rotate(45deg); }
.sv-acordeon__panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.6s var(--sv-ease-tam), opacity 0.4s var(--sv-ease-tam);
}
.sv-acordeon__panel > div { overflow: hidden; }
.sv-acordeon__item--abierto .sv-acordeon__panel { grid-template-rows: 1fr; opacity: 1; }
.sv-acordeon__panel p { margin: 0 0 0.75rem; max-width: 62ch; font-size: 0.9rem; line-height: 1.7; color: var(--sv-ink-2); }
.sv-acordeon__panel > div > *:last-child { margin-bottom: 1.5rem; }
/* Sólo las listas sin clase propia: las que ya tienen la suya —como las seis
   comprobaciones de la ficha— traen su propia retícula y no hay que indentarlas. */
.sv-acordeon__panel ul:not([class]), .sv-acordeon__panel ol:not([class]) {
  margin: 0 0 0.75rem; padding-left: 1.25rem;
  max-width: 62ch; font-size: 0.9rem; line-height: 1.7; color: var(--sv-ink-2);
}
.sv-acordeon__panel ul:not([class]) li + li,
.sv-acordeon__panel ol:not([class]) li + li { margin-top: 0.375rem; }
.sv-comprobaciones { display: grid; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
@media (min-width: 640px) { .sv-comprobaciones { grid-template-columns: 1fr 1fr; } }
.sv-comprobaciones li { display: flex; gap: 0.75rem; font-size: 0.9rem; line-height: 1.5; }
.sv-comprobaciones span { flex-shrink: 0; color: var(--sv-mute); }

/* ---------- Visítanos ---------- */
.sv-visitanos { display: grid; gap: 2.5rem; padding-top: 5rem; padding-bottom: 6rem; }
@media (min-width: 900px) { .sv-visitanos { grid-template-columns: 1fr 1.1fr; align-items: center; } }
.sv-visitanos__intro { margin-top: 1.25rem; max-width: 46ch; line-height: 1.7; color: var(--sv-mute); }
.sv-visitanos__datos { margin: 2rem 0; display: grid; gap: 0.875rem; }
.sv-visitanos__datos > div { display: grid; gap: 0.125rem; border-top: 1px solid var(--sv-line); padding-top: 0.875rem; }
.sv-visitanos__datos dt { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sv-mute); }
.sv-visitanos__datos dd { margin: 0; font-size: 0.95rem; }
.sv-visitanos__mapa {
  overflow: hidden; border-radius: var(--sv-radius-card-lg);
  box-shadow: var(--sv-shadow-card); aspect-ratio: 4 / 3; background: var(--sv-mist);
}
.sv-visitanos__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Barra inferior ----------
 *
 * Píldora centrada, no banda a todo lo ancho. En verde de marca: el texto va
 * en tinta porque el blanco sobre este verde se queda en 2,3:1.
 * ========================================================================= */
.sv-barra {
  position: fixed; inset-inline: 0; bottom: 1rem; z-index: 50;
  padding-inline: 1rem;
  transform: translateY(140%);
  transition: transform .35s var(--sv-ease);
}
@media (min-width: 768px) { .sv-barra { bottom: 1.5rem; } }
.sv-barra--visible { transform: translateY(0); }
.sv-barra__caja {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; max-width: 48rem; margin-inline: auto;
  border-radius: var(--sv-radius-pill);
  background: var(--sv-brand); color: var(--sv-ink);
  box-shadow: var(--sv-shadow-float);
  padding: .75rem .75rem .75rem 1.5rem;
}
.sv-barra__texto { min-width: 0; flex: 1; }
.sv-barra__nombre {
  margin: 0; font-size: .875rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv-barra__datos {
  margin: 0; font-size: .75rem;
  color: color-mix(in oklab, var(--sv-ink) 70%, transparent);
}
.sv-barra__precio { display: none; flex-shrink: 0; text-align: right; }
@media (min-width: 640px) { .sv-barra__precio { display: block; } }
.sv-barra__cifra { margin: 0; font-size: 1.125rem; line-height: 1; }
.sv-barra__desde {
  margin: .25rem 0 0; font-size: .75rem;
  color: color-mix(in oklab, var(--sv-ink) 70%, transparent);
}
.sv-barra__acciones { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.sv-barra__mas {
  display: none;
  border: 1px solid color-mix(in oklab, var(--sv-ink) 25%, transparent);
  border-radius: var(--sv-radius-pill);
  padding: .625rem 1rem; font-size: .875rem;
  color: var(--sv-ink); text-decoration: none;
  transition: border-color .3s var(--sv-ease), background-color .3s var(--sv-ease), color .3s var(--sv-ease);
}
@media (min-width: 768px) { .sv-barra__mas { display: inline-block; } }
.sv-barra__mas:hover { border-color: var(--sv-ink); background: var(--sv-ink); color: var(--sv-paper); }
.sv-barra__wasap {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: var(--sv-radius-pill);
  background: var(--sv-ink); color: var(--sv-paper);
  padding: .625rem 1.25rem; font-size: .875rem; font-weight: 500;
  text-decoration: none;
  transition: transform .3s var(--sv-ease);
}
.sv-barra__wasap:hover { transform: translateY(-2px); }
.sv-barra__wasap svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---------- Visor de fotos ---------- */
.sv-visor {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  background: rgb(12 12 12 / 0.96);
  padding: 3.5rem 1rem;
}
.sv-visor[hidden] { display: none; }
.sv-visor__marco { margin: 0; display: grid; gap: 0.75rem; justify-items: center; min-width: 0; }
.sv-visor__marco img { max-width: 100%; max-height: 82svh; object-fit: contain; border-radius: var(--sv-radius-card); }
.sv-visor__marco figcaption { font-size: 0.8rem; color: color-mix(in oklab, var(--sv-paper) 60%, transparent); }
.sv-visor__cerrar, .sv-visor__flecha {
  border: 0; background: color-mix(in oklab, var(--sv-paper) 12%, transparent);
  color: var(--sv-paper); cursor: pointer; border-radius: 50%;
  transition: background-color 0.3s var(--sv-ease);
}
.sv-visor__cerrar:hover, .sv-visor__flecha:hover,
.sv-visor__cerrar:focus, .sv-visor__flecha:focus { background: color-mix(in oklab, var(--sv-paper) 25%, transparent); }
.sv-visor__cerrar { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; }
.sv-visor__cerrar svg { width: 1rem; height: 1rem; }
.sv-visor__flecha { width: 2.75rem; height: 2.75rem; font-size: 1.5rem; line-height: 1; }

/* ---------- Qué es cada descuento ---------- */
.sv-explica { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1.25rem; }
.sv-explica__fondo {
  position: absolute; inset: 0; border: 0; cursor: pointer;
  background: color-mix(in oklab, var(--sv-ink) 55%, transparent);
  backdrop-filter: blur(2px);
}
.sv-explica__caja {
  position: relative; width: 100%; max-width: 28rem;
  border-radius: var(--sv-radius-card-lg); background: var(--sv-paper);
  box-shadow: var(--sv-shadow-float); padding: 1.75rem;
}
.sv-explica__titulo { margin: 0.375rem 0 0; font-size: 1.5rem; line-height: 1.2; }
.sv-explica__importe {
  display: inline-flex; margin: 1.25rem 0 0;
  border-radius: var(--sv-radius-pill); background: var(--sv-brand); color: var(--sv-ink);
  padding: 0.25rem 0.75rem; font-size: 0.875rem;
}
.sv-explica__texto { margin: 1rem 0 0; font-size: 0.9rem; line-height: 1.7; }
.sv-explica__boton-cerrar {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 1.75rem; height: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; color: var(--sv-mute);
  transition: color 0.2s var(--sv-ease);
  padding: 0;
}
/* El fondo y el color se repiten en :hover y :focus por lo mismo de
   siempre: GeneratePress pinta todo <button> de gris con texto blanco en
   esos dos estados, y aquí la aspa se quedaba sobre un cuadrado gris o,
   con el foco puesto, blanca sobre blanco. */
.sv-explica__boton-cerrar:hover, .sv-explica__boton-cerrar:focus {
  background: none; color: var(--sv-ink);
}
.sv-explica__boton-cerrar:focus { outline: 2px solid var(--sv-brand); outline-offset: 2px; }
.sv-explica__boton-cerrar svg { width: 100%; height: 100%; }


/* =========================================================================
 * El ancho del tema padre
 *
 * GeneratePress mete todo dentro de un contenedor de 1100 px. El diseño nuevo
 * maneja su propio ancho con .sv-container y necesita bandas a sangre —la
 * portada, las secciones oscuras—, así que en las vistas que controlamos ese
 * contenedor se anula. Sólo ahí: las páginas que aún sirve Elementor lo
 * necesitan intacto.
 * ========================================================================= */
body.seven .site.grid-container,
body.seven .site-content,
body.seven .content-area,
body.seven .site-main {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
body.seven .site-content { display: block; }
body.seven { background: var(--sv-paper); }
.sv-panel__ahorro { gap: 0.3rem; }
.sv-ficha__mas {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in oklab, var(--sv-ink) 55%, transparent);
  color: var(--sv-paper); font-size: 1rem;
}
.sv-ficha__miniaturas button { position: relative; }
/* El «volver arriba» del tema padre estorba sobre la barra fija. */
body.seven .generate-back-to-top { display: none; }
.sv-entrega, .sv-interruptor, .sv-acordeon__boton, .sv-linea__info,
.sv-panel__ver-desglose, .sv-portada__desliza { color: var(--sv-ink); font: inherit; }
.sv-plazo { font: inherit; font-size: 0.875rem; }
.sv-plazo--activo { background: var(--sv-ink); color: var(--sv-paper); }
.sv-entrega__nota, .sv-interruptor__nota, .sv-entrega__importe { color: var(--sv-mute); }

/* =========================================================================
 * CATÁLOGO
 * ========================================================================= */
.sv-catalogo__cabeza { padding-top: 8rem; }
.sv-catalogo__cabeza .sv-d1 { margin: 0.5rem 0 0; }

.sv-buscador {
  display: flex; align-items: center; gap: 0.75rem;
  max-width: 30rem; margin-top: 2rem;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-pill);
  background: var(--sv-paper); padding: 0.75rem 1.25rem;
}
.sv-buscador svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--sv-mute); }
.sv-buscador input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--sv-ink); }
.sv-buscador input:focus { outline: none; }
.sv-buscador:focus-within { border-color: var(--sv-ink); }

.sv-carrocerias {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 2rem 0 0; padding: 0; list-style: none;
}
.sv-carroceria {
  display: flex; align-items: center; gap: 0.625rem;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-pill);
  background: var(--sv-paper); padding: 0.5rem 1rem;
  font-size: 0.875rem; color: var(--sv-ink); text-decoration: none;
  transition: border-color 0.3s var(--sv-ease), background-color 0.3s var(--sv-ease), color 0.3s var(--sv-ease);
}
.sv-carroceria:hover { border-color: var(--sv-ink); }
.sv-carroceria--activa { background: var(--sv-ink); border-color: var(--sv-ink); color: var(--sv-paper); }
.sv-silueta { width: 2.25rem; height: 1.125rem; }
.sv-carroceria__cuenta { font-size: 0.75rem; color: var(--sv-mute); }
.sv-carroceria--activa .sv-carroceria__cuenta { color: color-mix(in oklab, var(--sv-paper) 60%, transparent); }
.sv-carroceria__todo { padding: 0 0.25rem; }

.sv-catalogo__grid { display: grid; gap: 2rem; padding-top: 3rem; padding-bottom: 4rem; }
@media (min-width: 1024px) { .sv-catalogo__grid { grid-template-columns: 17rem 1fr; gap: 3rem; } }
.sv-filtros { display: none; }
@media (min-width: 1024px) { .sv-filtros { display: block; position: sticky; top: 7rem; align-self: start; } }
.sv-filtros__caja {
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card-lg);
  background: var(--sv-paper); padding: 1.25rem;
}
.sv-filtros__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sv-filtros__limpiar {
  border: 0; background: none; cursor: pointer;
  font-size: 0.75rem; color: var(--sv-brand-dark); text-underline-offset: 3px;
}
.sv-filtros__limpiar:hover { text-decoration: underline; }

.sv-filtro { border-bottom: 1px solid var(--sv-line); padding: 0.875rem 0; }
.sv-filtro:last-child { border-bottom: 0; padding-bottom: 0; }
.sv-filtro__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.sv-filtro__label { font-size: 0.8rem; font-weight: 500; color: var(--sv-ink); }
.sv-filtro__valor { font-size: 0.75rem; color: var(--sv-mute); }
.sv-filtro__valor--tocado { color: var(--sv-brand-dark); }

/* Dos mandos sobre la misma vía. El contenedor no recibe puntero y sí los
   pulgares: sin eso el de arriba tapa al de abajo y uno de los dos no se
   puede agarrar nunca. */
.sv-rango { position: relative; height: 1.25rem; margin-top: 0.75rem; }
.sv-rango__via, .sv-rango__lleno {
  position: absolute; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 999px;
}
.sv-rango__via { inset-inline: 0; background: color-mix(in oklab, var(--sv-ink) 10%, transparent); }
.sv-rango__lleno { background: var(--sv-brand); }
.sv-rango__mando {
  position: absolute; inset-inline: 0; top: 50%; width: 100%; height: 1rem; margin: 0;
  transform: translateY(-50%);
  pointer-events: none; appearance: none; background: transparent;
}
.sv-rango__mando::-webkit-slider-thumb {
  pointer-events: auto; appearance: none;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--sv-paper); background: var(--sv-ink);
  box-shadow: var(--sv-shadow-card); cursor: pointer;
}
.sv-rango__mando::-moz-range-thumb {
  pointer-events: auto; appearance: none;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--sv-paper); background: var(--sv-ink); cursor: pointer;
}
.sv-aro-pista--rango { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }

.sv-pildoras { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.625rem; }
.sv-pildora {
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-pill);
  background: var(--sv-paper); cursor: pointer;
  padding: 0.3rem 0.75rem; font: inherit; font-size: 0.8rem; color: var(--sv-mute);
  transition: border-color 0.3s var(--sv-ease), background-color 0.3s var(--sv-ease), color 0.3s var(--sv-ease);
}
.sv-pildora:hover { border-color: var(--sv-ink); color: var(--sv-ink); }
.sv-pildora--activa { background: var(--sv-ink); border-color: var(--sv-ink); color: var(--sv-paper); }

.sv-catalogo__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--sv-line); padding-bottom: 1rem;
}
.sv-catalogo__cuenta { margin: 0; font-size: 0.875rem; color: var(--sv-mute); }
.sv-catalogo__orden { display: flex; align-items: center; gap: 0.625rem; }
.sv-catalogo__orden select {
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-pill);
  background: var(--sv-paper); padding: 0.4rem 0.875rem;
  font: inherit; font-size: 0.85rem; color: var(--sv-ink); cursor: pointer;
}
.sv-rejilla-coches--catalogo { margin-top: 1.5rem; }
.sv-catalogo__vacio { margin-top: 3rem; text-align: center; line-height: 1.7; color: var(--sv-mute); }
.sv-catalogo__vacio a { color: var(--sv-brand-dark); }

/* Los filtros en móvil: un cajón, no una columna que empuja la rejilla. */
.sv-filtros__abrir { width: 100%; justify-content: center; }
.sv-filtros__cerrar { display: none; width: 100%; margin-top: 1.25rem; justify-content: center; }
@media (min-width: 1024px) {
  .sv-filtros__abrir { display: none; }
}
@media (max-width: 1023px) {
  .sv-filtros--abierto { display: block; position: fixed; inset: 0; z-index: 80; overflow-y: auto; padding: 1rem; background: var(--sv-paper); }
  .sv-filtros--abierto .sv-filtros__cerrar { display: inline-flex; }
}

/* =========================================================================
 * PORTADA
 *
 * El paso de una banda a la siguiente NO es un corte recto: cada sección se
 * pinta del color de la ANTERIOR y `.sv-diagonal` pinta el suyo propio de una
 * diagonal hacia abajo. De ahí que haya secciones «en papel» que se ven
 * oscuras: lo que manda es el tono de su diagonal.
 * ========================================================================= */

.sv-diagonal {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  /* Inclinación de reposo; el JS la endereza con el scroll. */
  clip-path: polygon(0 190px, 100% 0, 100% 100%, 0 100%);
}
.sv-diagonal--ink { background: var(--sv-ink); }
.sv-diagonal--paper { background: var(--sv-paper); }
.sv-diagonal--paper-2 { background: var(--sv-paper-2); }
.sv-diagonal--brand { background: var(--sv-brand); }

/* Etiqueta de sección: número, filete y texto. */
.sv-eyebrow--linea { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.sv-eyebrow__num { font-size: 0.7rem; opacity: 0.7; }
.sv-eyebrow__filete { height: 1px; width: 1.5rem; background: currentColor; opacity: 0.4; }
.sv-eyebrow--paper { color: color-mix(in oklab, var(--sv-paper) 50%, transparent); }
.sv-eyebrow--brand { color: var(--sv-brand); }

.sv-cabecera-seccion { display: flex; flex-direction: column; gap: 1.25rem; max-width: 48rem; }

/* ---------- 1. Hero ---------- */
.sv-hero {
  position: sticky; top: 0; z-index: 0;
  height: 100svh; min-height: 36rem; overflow: hidden;
  background: var(--sv-ink); color: var(--sv-paper);
}
.sv-hero__mascara { position: absolute; inset: 0; }
.sv-hero__foto { width: 100%; height: 100%; object-fit: cover; }
/* Dos velos: uno plano no daba contraste al subtitular sobre las zonas claras
   de la foto. Estos caen sobre el texto, no sobre el coche. */
.sv-hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--sv-ink) 4%, color-mix(in oklab, var(--sv-ink) 45%, transparent) 50%, transparent 82%);
}
.sv-hero__velo--lateral {
  background: linear-gradient(to right, color-mix(in oklab, var(--sv-ink) 65%, transparent), transparent 60%);
}
.sv-hero__cuerpo {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; gap: 2rem; padding-top: 7rem; padding-bottom: 2rem;
}
.sv-hero__texto { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.sv-hero__titular { margin: 0; line-height: 0.88; }
/* Cada línea, en su caja con recorte: es lo que permite que suban desde
   debajo sin asomar por encima de la anterior. */
.sv-hero__linea-caja { display: block; overflow: hidden; }
.sv-hero__linea { display: block; font-size: clamp(3rem, 12vw, 10.5rem); }
.sv-hero__linea--menor {
  font-size: clamp(1.4rem, 5vw, 3rem);
  color: color-mix(in oklab, var(--sv-paper) 80%, transparent);
}
.sv-hero__entrada {
  max-width: 28rem; margin-top: 1.25rem; font-size: 0.95rem; line-height: 1.7;
  color: color-mix(in oklab, var(--sv-paper) 60%, transparent);
}
.sv-hero__botones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

.sv-hero__confianza {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2.5rem;
  border-top: 1px solid color-mix(in oklab, var(--sv-paper) 12%, transparent);
  padding-top: 1.5rem;
}
.sv-hero__cifras { display: flex; flex-wrap: wrap; gap: 1.5rem 3.5rem; }
.sv-cifra__valor { margin: 0; font-size: var(--sv-display-1); line-height: 1; color: var(--sv-brand); }
.sv-cifra__label {
  margin: 0.25rem 0 0; font-size: 0.75rem; line-height: 1.375;
  color: color-mix(in oklab, var(--sv-paper) 50%, transparent);
}
.sv-hero__marcas { min-width: 0; flex: 1; max-width: 34rem; }
.sv-hero__marcas-rotulo {
  margin: 0 0 0.75rem; text-align: right; font-size: 0.65rem;
  color: color-mix(in oklab, var(--sv-paper) 30%, transparent);
}
.sv-hero__marca {
  padding-inline: 1.25rem; font-family: var(--sv-font-display);
  font-size: 1rem; letter-spacing: 0.16em; white-space: nowrap;
  color: color-mix(in oklab, var(--sv-paper) 45%, transparent);
}
.sv-marquee--corta .sv-marquee__pista { animation-duration: 28s; }

.sv-hero__desplazar {
  position: absolute; right: 2.5rem; bottom: 6rem;
  display: none; flex-direction: column; align-items: center; gap: 0.75rem;
}
@media (min-width: 1024px) { .sv-hero__desplazar { display: flex; } }
.sv-hero__desplazar-texto {
  writing-mode: vertical-rl; font-size: 0.65rem;
  color: color-mix(in oklab, var(--sv-paper) 40%, transparent);
}
.sv-hero__hilo {
  position: relative; display: block; width: 1px; height: 2.5rem; overflow: hidden;
  background: color-mix(in oklab, var(--sv-paper) 15%, transparent);
}
.sv-hero__hilo span { position: absolute; inset-inline: 0; top: 0; display: block; height: 0.75rem; background: var(--sv-brand); }

/* La capa que tapa el hero. Sin fondo opaco, el hero fijo se transparenta. */
.sv-home__encima { position: relative; z-index: 10; background: var(--sv-paper); }

/* ---------- 2. Últimos ingresos ---------- */
.sv-seccion-home { position: relative; padding: 5rem 0; }
@media (min-width: 768px) { .sv-seccion-home { padding: 7rem 0; } }
.sv-seccion-home--tapa { z-index: 10; background: var(--sv-paper); }
.sv-carrusel { margin-top: 3.5rem; }
.sv-carrusel__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 0.5rem;
}
.sv-pista {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0; list-style: none; cursor: grab; scrollbar-width: none;
  /* La primera tarjeta se alinea con el contenedor, pero la pista va a sangre
     para que la siguiente asome por el borde. */
  padding: 0.5rem max(1.25rem, calc((100% - 88rem) / 2 + 2.5rem)) 1.5rem;
}
.sv-pista::-webkit-scrollbar { display: none; }
.sv-pista > li { flex: 0 0 21rem; max-width: 82vw; scroll-snap-align: start; }
.sv-flechas { display: flex; gap: 0.5rem; }
.sv-flecha {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--sv-line); background: var(--sv-paper); color: var(--sv-ink);
  transition: border-color 0.3s var(--sv-ease), background-color 0.3s var(--sv-ease), color 0.3s var(--sv-ease);
}
.sv-flecha svg { width: 1rem; height: 1rem; }
.sv-flecha:hover { background: var(--sv-ink); border-color: var(--sv-ink); color: var(--sv-paper); }

/* ---------- 3. Cinta de vendidos ---------- */
.sv-cinta-vendidos {
  position: relative; z-index: 10; overflow: hidden;
  border-block: 1px solid color-mix(in oklab, var(--sv-paper) 10%, transparent);
  background: var(--sv-ink); color: var(--sv-paper);
  padding-block: 2rem;
}
.sv-cinta-vendidos__cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.25rem;
}
.sv-cinta-vendidos__rotulo {
  margin: 0; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sv-brand);
}
.sv-cinta-vendidos__medio { margin: 0; font-size: 0.75rem; color: color-mix(in oklab, var(--sv-paper) 60%, transparent); }
.sv-cinta-vendidos__medio .sv-numeral { color: var(--sv-paper); }
.sv-vendido {
  display: flex; align-items: center; gap: 1rem; flex-shrink: 0;
  width: 19rem; margin-right: 1rem;
  border: 1px solid color-mix(in oklab, var(--sv-paper) 12%, transparent);
  border-radius: var(--sv-radius-card);
  background: color-mix(in oklab, var(--sv-paper) 6%, transparent);
  padding: 0.75rem;
}
.sv-vendido__foto {
  display: block; width: 5rem; height: 3.5rem; flex-shrink: 0; overflow: hidden;
  border-radius: 6px; background: color-mix(in oklab, var(--sv-paper) 10%, transparent);
}
.sv-vendido__foto img { width: 100%; height: 100%; object-fit: cover; }
.sv-vendido__texto { min-width: 0; flex: 1; }
.sv-vendido__nombre { display: block; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-vendido__precio { display: block; margin-top: 0.125rem; font-size: 0.875rem; }
.sv-vendido__cuando { display: block; margin-top: 0.125rem; font-size: 0.7rem; color: color-mix(in oklab, var(--sv-paper) 55%, transparent); }
.sv-vendido__punto { width: 0.5rem; height: 0.5rem; flex-shrink: 0; border-radius: 50%; background: var(--sv-brand); }

/* ---------- 4. Tipografía contraria ---------- */
.sv-contraria { position: relative; }
.sv-contraria__escena {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; height: 100svh; width: 100%; overflow: hidden;
  background: var(--sv-paper); color: var(--sv-ink);
}
@media (min-width: 768px) { .sv-contraria__escena { gap: 2.5rem; } }
.sv-contraria__carril { width: 100%; overflow: hidden; }
.sv-contraria__linea {
  width: max-content; white-space: nowrap; margin: 0;
  font-size: var(--sv-display-5); line-height: 1; letter-spacing: -0.02em;
}
@media (min-width: 768px) { .sv-contraria__linea { font-size: var(--sv-display-4); } }

/* ---------- 5. Buscador por cuota ---------- */
.sv-cuota {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 100svh; background: var(--sv-paper);
  padding-top: 8rem; padding-bottom: 2rem;
}
.sv-cuota__interior { position: relative; width: 100%; }
.sv-cuota__cabeza {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2.5rem;
}
.sv-cuota__titulo { margin: 0.75rem 0 0; max-width: 32rem; font-size: 2.15rem; line-height: 1.05; }
.sv-cuota__intro { margin: 0.625rem 0 0; max-width: 28rem; font-size: 0.875rem; line-height: 1.7; color: var(--sv-mute); }

.sv-marcador {
  position: relative; overflow: hidden; width: 100%;
  border-radius: var(--sv-radius-card-lg); background: var(--sv-ink); color: var(--sv-paper);
  box-shadow: var(--sv-shadow-float); padding: 1.25rem;
}
@media (min-width: 640px) { .sv-marcador { width: auto; min-width: 21rem; padding: 1.25rem 1.5rem; } }
.sv-marcador__brillo {
  position: absolute; top: -4rem; right: -4rem; width: 10rem; height: 10rem;
  border-radius: 50%; background: color-mix(in oklab, var(--sv-brand) 20%, transparent);
  filter: blur(40px);
}
.sv-marcador__rotulo {
  position: relative; display: flex; align-items: center; gap: 0.625rem; margin: 0;
  color: color-mix(in oklab, var(--sv-paper) 50%, transparent);
}
/* El punto avisa de que la cifra es viva y responde a las barras. */
.sv-marcador__pulso { position: relative; display: flex; width: 0.375rem; height: 0.375rem; }
.sv-marcador__pulso::before, .sv-marcador__pulso::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sv-brand);
}
.sv-marcador__pulso::before { animation: sv-pulso 1.6s var(--sv-ease-io) infinite; opacity: 0.7; }
@keyframes sv-pulso { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
.sv-marcador__cuerpo { position: relative; display: flex; align-items: center; gap: 1.25rem; margin-top: 0.625rem; }
.sv-marcador__cifra { display: flex; align-items: baseline; gap: 0.25rem; margin: 0; flex-shrink: 0; }
.sv-marcador__cifra .sv-display { font-size: 3rem; line-height: 0.8; color: var(--sv-brand); }
.sv-marcador__total { font-size: 1rem; color: color-mix(in oklab, var(--sv-paper) 40%, transparent); }
.sv-marcador__detalle { min-width: 0; flex: 1; border-left: 1px solid color-mix(in oklab, var(--sv-paper) 12%, transparent); padding-left: 1.25rem; }
.sv-marcador__label { margin: 0; font-size: 0.75rem; color: color-mix(in oklab, var(--sv-paper) 60%, transparent); }
.sv-marcador__barra { height: 4px; overflow: hidden; margin-top: 0.5rem; border-radius: 999px; background: color-mix(in oklab, var(--sv-paper) 15%, transparent); }
.sv-marcador__barra span { display: block; height: 100%; border-radius: 999px; background: var(--sv-brand); transition: width 0.5s var(--sv-ease); }
.sv-marcador__desde { margin: 0.5rem 0 0; font-size: 0.75rem; white-space: nowrap; color: color-mix(in oklab, var(--sv-paper) 70%, transparent); }
.sv-marcador__desde .sv-numeral { color: var(--sv-paper); font-weight: 500; }

.sv-cuota__grid { display: grid; gap: 1.25rem; margin-top: 1rem; }
@media (min-width: 1024px) { .sv-cuota__grid { grid-template-columns: 19rem 1fr; gap: 2.25rem; } }
.sv-mandos {
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card-lg);
  background: var(--sv-paper); box-shadow: var(--sv-shadow-card); padding: 1.25rem;
  /* El grid estira sus columnas a la misma altura; sin esto la tarjeta de cuota
     se alarga hasta igualar la de los coches y queda medio panel vacío. */
  align-self: start;
}
.sv-mandos__cifra { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }
.sv-mandos__cifra .sv-display { font-size: 3rem; line-height: 1; }
.sv-mandos__unidad { font-size: 1rem; color: var(--sv-mute); }
.sv-mandos__lista { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.25rem; }
.sv-mandos__aviso { margin: 1.25rem 0 0; border-top: 1px solid var(--sv-line); padding-top: 1rem; font-size: 0.875rem; }
.sv-mandos__nota { margin: 1rem 0 0; border-top: 1px solid var(--sv-line); padding-top: 0.75rem; font-size: 0.75rem; line-height: 1.6; color: var(--sv-mute); }
.sv-slider--verde .sv-slider__via { height: 6px; background: color-mix(in oklab, var(--sv-ink) 10%, transparent); }
.sv-slider--verde .sv-slider__lleno { height: 6px; background: var(--sv-brand); }
.sv-slider--verde .sv-slider__pomo {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--sv-paper); background: var(--sv-ink); box-shadow: var(--sv-shadow-card);
}
.sv-cuota__resultados { min-width: 0; }
.sv-cuota__pista { padding-inline: 0.5rem; }
.sv-cuota__pista > li { flex: 0 0 21rem; }
.sv-cuota__vacio {
  display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--sv-line); border-radius: var(--sv-radius-card-lg);
  padding: 5rem 1.5rem;
}
.sv-cuota__vacio-titulo { margin: 0; font-size: 1.5rem; }
.sv-cuota__vacio-texto { margin: 0.5rem 0 0; max-width: 24rem; font-size: 0.875rem; color: var(--sv-mute); }
.sv-cuota__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }

/* ---------- 6. La revisión ---------- */
.sv-revision {
  position: relative; background: var(--sv-paper-2); color: var(--sv-paper);
  padding-top: 10rem; padding-bottom: 7rem;
}
@media (min-width: 768px) { .sv-revision { padding-top: 12rem; padding-bottom: 9rem; } }
.sv-revision__interior { position: relative; }
.sv-revision__intro { margin: 0; max-width: 36rem; line-height: 1.7; color: color-mix(in oklab, var(--sv-paper) 60%, transparent); }
.sv-revision__grid { display: grid; gap: 3rem; margin-top: 4rem; }
@media (min-width: 1024px) { .sv-revision__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
/* Sticky y no pin: el pin congela la página y obliga a gastar scroll antes de
   poder seguir; así la página nunca deja de avanzar y el panel sólo acompaña. */
@media (min-width: 1024px) {
  .sv-revision__panel { position: sticky; top: 7rem; height: 70svh; align-self: start; }
}
.sv-revision__marco {
  position: relative; height: 52svh; overflow: hidden;
  border-radius: var(--sv-radius-card-lg); background: var(--sv-ink-2);
}
@media (min-width: 1024px) { .sv-revision__marco { height: 100%; } }
.sv-revision__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity 0.9s var(--sv-ease-quart), transform 0.9s var(--sv-ease-quart);
}
.sv-revision__foto--activa { opacity: 1; transform: scale(1); }
.sv-revision__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in oklab, var(--sv-ink) 85%, transparent), color-mix(in oklab, var(--sv-ink) 20%, transparent) 55%, transparent);
}
.sv-revision__contador { position: absolute; left: 1.5rem; bottom: 1.5rem; display: flex; align-items: center; gap: 1.25rem; }
@media (min-width: 768px) { .sv-revision__contador { left: 2rem; bottom: 2rem; } }
.sv-revision__anillo { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; }
.sv-revision__anillo svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sv-revision__pista-anillo { color: color-mix(in oklab, var(--sv-paper) 15%, transparent); }
.sv-revision__trazo { color: var(--sv-brand); }
.sv-revision__num { font-size: 1.25rem; }
.sv-revision__de { font-size: 0.875rem; color: color-mix(in oklab, var(--sv-paper) 70%, transparent); }

.sv-revision__pasos { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.sv-revision__paso { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding-block: 1.75rem; }
@media (min-width: 1024px) { .sv-revision__paso { min-height: 62svh; padding-block: 2rem; } }
.sv-revision__paso-num { font-size: 0.875rem; color: color-mix(in oklab, var(--sv-paper) 30%, transparent); transition: color 0.5s var(--sv-ease); }
.sv-revision__paso--activo .sv-revision__paso-num { color: var(--sv-brand); }
.sv-revision__paso-titulo {
  margin: 0; max-width: 32rem; font-size: 1.5rem; line-height: 1.15;
  color: color-mix(in oklab, var(--sv-paper) 35%, transparent);
  transition: color 0.5s var(--sv-ease);
}
@media (min-width: 768px) { .sv-revision__paso-titulo { font-size: var(--sv-display-1); } }
.sv-revision__paso--activo .sv-revision__paso-titulo { color: var(--sv-paper); }
.sv-revision__checks { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; padding: 0; max-width: 32rem; list-style: none; }
.sv-revision__checks li {
  display: flex; gap: 0.75rem; font-size: 0.9rem; line-height: 1.7;
  color: color-mix(in oklab, var(--sv-paper) 25%, transparent);
  transition: color 0.5s var(--sv-ease);
}
.sv-revision__paso--activo .sv-revision__checks li { color: color-mix(in oklab, var(--sv-paper) 70%, transparent); }
.sv-revision__checks svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; margin-top: 0.35rem; color: color-mix(in oklab, var(--sv-paper) 20%, transparent); transition: color 0.5s var(--sv-ease); }
.sv-revision__paso--activo .sv-revision__checks svg { color: var(--sv-brand); }

.sv-revision__pie { display: flex; flex-direction: column; gap: 2rem; margin-top: 4rem; }
@media (min-width: 768px) { .sv-revision__pie { flex-direction: row; align-items: center; justify-content: space-between; } }
.sv-revision__reclamos { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 0; padding: 0; list-style: none; }
.sv-revision__reclamos li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: color-mix(in oklab, var(--sv-paper) 70%, transparent); }
.sv-revision__reclamos svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--sv-brand); }

/* ---------- 7. Comprobaciones ---------- */
.sv-checklist { position: relative; background: var(--sv-paper); padding-block: 6rem; }
@media (min-width: 768px) { .sv-checklist { padding-block: 8rem; } }
.sv-checklist__interior { max-width: 42rem; }
.sv-checklist__titulo { margin: 0.75rem 0 0; font-size: 2.25rem; font-weight: 600; }
@media (min-width: 768px) { .sv-checklist__titulo { font-size: 3.75rem; } }
.sv-checklist__barra {
  height: 8px; width: 100%; overflow: hidden; margin-top: 2.5rem;
  border-radius: 999px; background: color-mix(in oklab, var(--sv-ink) 10%, transparent);
}
.sv-checklist__barra span { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--sv-brand); transform-origin: left center; }
.sv-checklist__pct { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--sv-mute); }
.sv-checklist__pct .sv-numeral { color: var(--sv-ink); }
.sv-checklist__lista { display: flex; flex-direction: column; gap: 1rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.sv-checklist__item { display: flex; align-items: center; gap: 1rem; }
.sv-checklist__aro {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--sv-ink) 20%, transparent);
}
.sv-checklist__aro svg { width: 1rem; height: 1rem; color: var(--sv-brand-dark); }
.sv-checklist__que { font-size: 1rem; }
@media (min-width: 768px) { .sv-checklist__que { font-size: 1.125rem; } }

/* ---------- 8. Por qué SevenCars ---------- */
.sv-porque { position: relative; background: var(--sv-paper); padding-top: 10rem; padding-bottom: 6rem; }
@media (min-width: 768px) { .sv-porque { padding-top: 12rem; padding-bottom: 8rem; } }
.sv-porque__interior { position: relative; color: var(--sv-paper); }
.sv-pilares { display: grid; gap: 1.5rem; margin: 4rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .sv-pilares { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .sv-pilares { grid-template-columns: repeat(4, 1fr); } }
.sv-pilar {
  display: flex; flex-direction: column; gap: 1.5rem;
  border: 1px solid color-mix(in oklab, var(--sv-line) 60%, transparent);
  border-radius: var(--sv-radius-card-lg);
  background: var(--sv-paper); color: var(--sv-ink);
  box-shadow: var(--sv-shadow-card); padding: 2rem;
  transition: box-shadow 0.5s var(--sv-ease);
}
@media (min-width: 768px) { .sv-pilar { padding: 2.5rem; } }
.sv-pilar:hover { box-shadow: var(--sv-shadow-float); }
.sv-pilar__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--sv-radius-card);
  background: color-mix(in oklab, var(--sv-brand) 12%, transparent); color: var(--sv-brand-dark);
  transition: transform 0.5s var(--sv-ease);
}
.sv-pilar:hover .sv-pilar__icono { transform: scale(1.1); }
.sv-pilar__icono svg { width: 1.5rem; height: 1.5rem; }
.sv-pilar__nombre { margin: 0; font-size: var(--sv-display-1); }
.sv-pilar__texto { margin: 0.75rem 0 0; line-height: 1.7; color: var(--sv-mute); }
.sv-pilar--verde { background: var(--sv-brand); border-color: var(--sv-brand); }
.sv-pilar--verde .sv-pilar__icono { background: color-mix(in oklab, var(--sv-ink) 12%, transparent); color: var(--sv-ink); }
.sv-pilar--verde .sv-pilar__texto { color: color-mix(in oklab, var(--sv-ink) 75%, transparent); }

/* ---------- 9. Lo que dicen ---------- */
.sv-opiniones { position: relative; background: var(--sv-ink); padding-top: 10rem; padding-bottom: 3rem; }
@media (min-width: 768px) { .sv-opiniones { padding-top: 12rem; padding-bottom: 4rem; } }
.sv-opiniones__interior { position: relative; }
.sv-prueba {
  display: grid; align-items: center; gap: 2rem; overflow: hidden; margin-top: 2.5rem;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card-lg);
  background: var(--sv-paper);
}
@media (min-width: 1024px) { .sv-prueba { grid-template-columns: 1.2fr 1fr; gap: 0; } }
.sv-prueba__foto { position: relative; width: 100%; aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .sv-prueba__foto { aspect-ratio: 16 / 10; } }
.sv-prueba__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Una sola capa verde en multiply tiñe la mitad que cubre y deja la otra en
   color real; con dos capas de imagen el verde sale sucio. */
.sv-prueba__diagonal {
  position: absolute; inset: 0; background: var(--sv-brand-soft);
  mix-blend-mode: multiply; clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%);
}
.sv-prueba__tarjeta { padding: 1.5rem; }
@media (min-width: 768px) { .sv-prueba__tarjeta { padding: 2.5rem; } }
@media (min-width: 1024px) { .sv-prueba__tarjeta { padding-left: 1rem; } }
.sv-prueba__caja {
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card-lg);
  background: var(--sv-paper-2); box-shadow: var(--sv-shadow-card); padding: 2rem;
}
@media (min-width: 768px) { .sv-prueba__caja { padding: 2.5rem; } }
.sv-prueba__frase { margin: 0; font-size: 1.125rem; line-height: 1.35; }
@media (min-width: 768px) { .sv-prueba__frase { font-size: 1.25rem; } }
.sv-prueba__frase strong { font-weight: 600; }
.sv-prueba__nota { margin-top: 2rem; }
.sv-prueba__valor { margin: 0; font-size: var(--sv-display-1); line-height: 1; color: var(--sv-brand-dark); }
.sv-prueba__valor-label { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--sv-mute); }
.sv-estrellas { display: inline-flex; gap: 0.25rem; margin-top: 1.5rem; color: var(--sv-star); }
.sv-estrellas svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.sv-estrellas--pequenas { margin-top: 0; }
.sv-estrellas--pequenas svg { width: 1rem; height: 1rem; }
.sv-prueba__fuente { display: flex; align-items: center; gap: 0.5rem; margin: 1.5rem 0 0; font-size: 0.875rem; color: var(--sv-mute); }
.sv-prueba__fuente svg { width: 1.25rem; height: 1.25rem; }

.sv-resenas { display: grid; gap: 1.5rem; margin: 4rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .sv-resenas { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.sv-resena {
  display: flex; flex-direction: column; gap: 1.5rem;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card-lg);
  background: var(--sv-paper); box-shadow: var(--sv-shadow-card); padding: 1.75rem;
}
@media (min-width: 768px) { .sv-resena { padding: 2rem; } }
/* El tema padre pone las citas en cursiva y con filete a la izquierda; aquí
   la tarjeta ya es el continente y la cursiva estorba a la lectura. */
.sv-resena__texto {
  flex: 1; margin: 0; padding: 0; border: 0;
  font-size: 0.875rem; font-style: normal; line-height: 1.7;
}
.sv-resena__firma { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.sv-resena__inicial {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--sv-brand); color: var(--sv-ink); font-size: 0.875rem;
}
.sv-resena__nombre { display: block; font-size: 0.875rem; font-weight: 500; }
.sv-resena__coche { display: block; font-size: 0.75rem; color: var(--sv-mute); }

/* ---------- 10. Vende tu coche ---------- */
.sv-vender {
  position: relative; display: flex; align-items: center; overflow: hidden;
  background: var(--sv-ink); color: var(--sv-paper); padding-block: 5rem;
}
@media (min-width: 1024px) { .sv-vender { height: 100svh; padding-block: 0; } }
.sv-vender__fondo { position: absolute; inset: 0; }
.sv-vender__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.2; }
.sv-vender__velo { position: absolute; inset: 0; background: linear-gradient(to right, var(--sv-ink), color-mix(in oklab, var(--sv-ink) 85%, transparent), color-mix(in oklab, var(--sv-ink) 40%, transparent)); }
.sv-vender__tinte { position: absolute; inset: 0; display: none; background: color-mix(in oklab, var(--sv-brand) 10%, transparent); clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%); }
@media (min-width: 1024px) { .sv-vender__tinte { display: block; } }
.sv-vender__interior { position: relative; display: grid; align-items: center; gap: 2.5rem; width: 100%; }
@media (min-width: 1024px) { .sv-vender__interior { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; } }
.sv-vender__reclamo { margin: 1rem 0 0; font-size: 1.25rem; font-weight: 500; color: var(--sv-brand); }
@media (min-width: 768px) { .sv-vender__reclamo { font-size: 1.5rem; } }
.sv-vender__texto { margin: 0.75rem 0 0; max-width: 28rem; font-size: 0.95rem; line-height: 1.7; color: color-mix(in oklab, var(--sv-paper) 60%, transparent); }
.sv-vender__pasos { display: flex; flex-direction: column; gap: 0.75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.sv-vender__pasos li { display: flex; align-items: baseline; gap: 1rem; }
.sv-vender__pasos .sv-numeral { width: 1.5rem; flex-shrink: 0; font-size: 0.875rem; color: var(--sv-brand); }
.sv-vender__paso-titulo { flex-shrink: 0; font-size: 1rem; color: color-mix(in oklab, var(--sv-paper) 85%, transparent); }
@media (min-width: 768px) { .sv-vender__paso-titulo { width: 11rem; } }
.sv-vender__filete { display: none; height: 1px; flex: 1; align-self: center; background: color-mix(in oklab, var(--sv-paper) 15%, transparent); }
.sv-vender__paso-texto { display: none; max-width: 20rem; font-size: 0.875rem; color: color-mix(in oklab, var(--sv-paper) 45%, transparent); }
@media (min-width: 768px) { .sv-vender__filete, .sv-vender__paso-texto { display: block; } }

.sv-glass {
  background: color-mix(in oklab, var(--sv-ink) 60%, transparent);
  backdrop-filter: blur(var(--sv-blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--sv-blur-glass)) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--sv-paper) 10%, transparent);
}
.sv-tasacion { border-radius: var(--sv-radius-card-lg); padding: 1.5rem; }
@media (min-width: 768px) { .sv-tasacion { padding: 2rem; } }
.sv-tasacion__rotulo { margin: 0; color: color-mix(in oklab, var(--sv-paper) 50%, transparent); }
.sv-tasacion__titulo { margin: 0.5rem 0 0; font-size: var(--sv-display-1); }
.sv-tasacion__campos { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.sv-tasacion__campo { display: flex; flex-direction: column; gap: 0.375rem; }
.sv-tasacion__campo span { font-size: 0.875rem; color: color-mix(in oklab, var(--sv-paper) 70%, transparent); }
.sv-tasacion__campo input {
  width: 100%; border-radius: var(--sv-radius-pill);
  border: 1px solid color-mix(in oklab, var(--sv-paper) 20%, transparent);
  background: color-mix(in oklab, var(--sv-paper) 5%, transparent);
  padding: 0.75rem 1.25rem; font: inherit; font-size: 1rem; letter-spacing: 0.04em;
  color: var(--sv-paper); transition: border-color 0.3s var(--sv-ease);
}
.sv-tasacion__campo input::placeholder { color: color-mix(in oklab, var(--sv-paper) 30%, transparent); }
.sv-tasacion__campo input:focus { outline: none; border-color: color-mix(in oklab, var(--sv-paper) 50%, transparent); }
.sv-tasacion .sv-btn { width: 100%; margin-top: 1.25rem; justify-content: center; }
.sv-tasacion__garantias {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; padding-top: 1rem;
  border-top: 1px solid color-mix(in oklab, var(--sv-paper) 12%, transparent); list-style: none;
}
.sv-tasacion__garantias li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: color-mix(in oklab, var(--sv-paper) 60%, transparent); }
.sv-tasacion__garantias svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--sv-brand); }


/* =========================================================================
 * LANDING DE PROVINCIA
 * ========================================================================= */
.sv-provincia__cabeza { padding-top: 8rem; padding-bottom: 1rem; }
.sv-migas { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; color: var(--sv-mute); }
.sv-migas a { color: var(--sv-mute); }
.sv-migas a:hover { color: var(--sv-ink); }
.sv-provincia__cabeza .sv-eyebrow { margin-top: 1.5rem; }
.sv-provincia__cabeza .sv-d1 { margin: 0.5rem 0 0; max-width: 18ch; }
.sv-provincia__entrada { margin-top: 1.5rem; max-width: 62ch; line-height: 1.8; color: var(--sv-mute); }
.sv-provincia__datos { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin-top: 2.5rem; }
.sv-provincia__dato { margin: 0; font-size: 1.75rem; line-height: 1; }
.sv-provincia__dato-label {
  margin: 0.375rem 0 0; font-size: 0.65rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sv-mute);
}
.sv-provincia__botones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.sv-provincia__envio { display: grid; gap: 3rem; }
@media (min-width: 900px) { .sv-provincia__envio { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.sv-provincia__texto { margin-top: 1.25rem; max-width: 58ch; line-height: 1.8; color: var(--sv-mute); }
.sv-provincia__texto strong { color: var(--sv-ink); font-weight: 500; }
.sv-provincia__pasos { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sv-provincia__pasos li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1.25rem;
  border-top: 1px solid var(--sv-line); padding-top: 1.25rem;
}
.sv-provincia__pasos .sv-numeral { grid-row: 1 / span 2; color: var(--sv-brand-dark); }
.sv-provincia__pasos strong { font-weight: 500; }
.sv-provincia__pasos span:last-child { font-size: 0.875rem; line-height: 1.6; color: var(--sv-mute); }

/* En móvil el botón de «Vende tu coche» partía en tres líneas y se comía la
   cabecera: ahí vive dentro del menú, no al lado del logo. */
@media (max-width: 767px) {
  .sv-cabecera__acciones .sv-btn { display: none; }
}
.sv-cabecera__acciones .sv-btn { white-space: nowrap; }

/* El menú desplegado en móvil. */
@media (max-width: 1023px) {
  .sv-cabecera--abierta .sv-cabecera__nav {
    display: block; position: fixed; inset: 5.5rem 1rem auto;
    border-radius: var(--sv-radius-card-lg); background: var(--sv-paper);
    box-shadow: var(--sv-shadow-float); padding: 1.25rem;
  }
  .sv-cabecera--abierta .sv-menu { display: grid; gap: 0.25rem; }
  /* El panel es blanco aunque la cabecera esté en modo oscuro: los enlaces
     heredaban el color claro y quedaban invisibles sobre él. */
  .sv-cabecera--abierta .sv-menu a { display: block; padding: 0.625rem 0; font-size: 1.05rem; color: var(--sv-ink); }
  .sv-cabecera--abierta .sv-cabecera__nav .sv-menu li + li { border-top: 1px solid var(--sv-line); }
}
.sv-cabecera__vender-movil { display: none; }
@media (max-width: 1023px) {
  .sv-cabecera--abierta .sv-cabecera__vender-movil {
    display: flex; justify-content: center; width: 100%; margin-top: 1rem;
  }
}
.sv-portada__linea-marca { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.sv-insignia--destacado {
  position: static; background: var(--sv-paper); color: var(--sv-ink);
  font-size: 0.62rem; letter-spacing: 0.14em;
}

/* ---------- Lo que no entra en el precio ---------- */
.sv-linea--aparte { justify-content: space-between; align-items: flex-start; }
.sv-linea__nota-mini { display: block; margin-top: .125rem; font-size: .75rem; color: var(--sv-mute); }
.sv-panel__aparte {
  margin: .5rem 0 0; text-align: center; font-size: .75rem; line-height: 1.6;
  color: var(--sv-mute);
}
.sv-panel__aparte .sv-numeral { color: var(--sv-ink); }

/* =========================================================================
 * FORMULARIO DE CONTACTO
 * ========================================================================= */
.sv-hablamos { position: relative; background: var(--sv-paper-2); padding-block: 5rem; }
@media (min-width: 768px) { .sv-hablamos { padding-block: 7rem; } }
.sv-hablamos__caja {
  display: grid; gap: 2.5rem;
  max-width: 88rem; margin-inline: auto; padding-inline: 1.25rem;
}
@media (min-width: 768px) { .sv-hablamos__caja { padding-inline: 2.5rem; } }
@media (min-width: 900px) { .sv-hablamos__caja { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }
.sv-hablamos__titulo { margin: .75rem 0 0; font-size: var(--sv-display-1); }
.sv-hablamos__intro { margin: 1rem 0 0; max-width: 40ch; line-height: 1.7; color: var(--sv-mute); }
.sv-hablamos__vias { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.sv-hablamos__vias a { display: grid; gap: .25rem; text-decoration: none; color: inherit; }
.sv-hablamos__vias .sv-numeral { font-size: 1.5rem; line-height: 1; transition: color .3s var(--sv-ease); }
.sv-hablamos__vias a:hover .sv-numeral { color: var(--sv-brand-dark); }

.sv-hablamos__form {
  display: grid; gap: 1rem;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card-lg);
  background: var(--sv-paper); box-shadow: var(--sv-shadow-card); padding: 1.5rem;
}
@media (min-width: 768px) { .sv-hablamos__form { padding: 2rem; } }
/* El cebo para robots: fuera de pantalla, no oculto con display:none —hay
   rellenadores automáticos que ignoran los campos ocultos y caen igual. */
.sv-hablamos__cebo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sv-hablamos__campos { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sv-hablamos__campos { grid-template-columns: 1fr 1fr; } }
.sv-campo { display: grid; gap: .375rem; }
.sv-campo:first-child { grid-column: 1 / -1; }
.sv-campo > span { font-size: .8rem; color: var(--sv-mute); }
.sv-campo input {
  width: 100%; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-pill);
  background: var(--sv-paper); padding: .75rem 1.25rem;
  font: inherit; font-size: 1rem; color: var(--sv-ink);
  transition: border-color .3s var(--sv-ease);
}
.sv-campo input:focus { outline: none; border-color: var(--sv-ink); }
.sv-casilla { display: flex; align-items: flex-start; gap: .75rem; font-size: .85rem; line-height: 1.6; color: var(--sv-mute); }
.sv-casilla input { margin-top: .25rem; accent-color: var(--sv-brand-dark); width: 1rem; height: 1rem; flex-shrink: 0; }
.sv-casilla a { color: var(--sv-brand-dark); }
.sv-hablamos__form .sv-btn { justify-content: center; }
.sv-hablamos__aviso {
  margin: 0; border-radius: var(--sv-radius-card); padding: .75rem 1rem; font-size: .875rem;
}
.sv-hablamos__aviso--ok { background: color-mix(in oklab, var(--sv-brand) 15%, transparent); color: var(--sv-ink); }
.sv-hablamos__aviso--mal { background: color-mix(in oklab, #b4471f 12%, transparent); color: #8f3a18; }

/* ---------- Accesos por carrocería en el hero ---------- */
.sv-hero__carrocerias {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.75rem;
}
.sv-hero__carrocerias a {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid color-mix(in oklab, var(--sv-paper) 20%, transparent);
  border-radius: var(--sv-radius-pill);
  background: color-mix(in oklab, var(--sv-ink) 45%, transparent);
  backdrop-filter: blur(8px);
  padding: .45rem .9rem;
  font-size: .82rem; color: var(--sv-paper); text-decoration: none;
  transition: background-color .3s var(--sv-ease), border-color .3s var(--sv-ease), color .3s var(--sv-ease);
}
.sv-hero__carrocerias a:hover {
  background: var(--sv-brand); border-color: var(--sv-brand); color: var(--sv-ink);
}
.sv-hero__carrocerias .sv-silueta { width: 1.9rem; height: .95rem; }
.sv-hero__carroceria-cuenta { font-size: .7rem; opacity: .6; }
@media (max-width: 640px) {
  /* En el móvil el hero ya va justo de alto: se enseñan las primeras. */
  .sv-hero__carrocerias a:nth-child(n+5) { display: none; }
}

/* =========================================================================
 * #SEVENCARSCLUB
 *
 * No estaba en el diseño de referencia: viene de la web publicada, donde es la
 * prueba social más propia que tienen. Se maqueta con el mismo sistema.
 * ========================================================================= */
.sv-club { position: relative; background: var(--sv-paper); padding-top: 5rem; padding-bottom: 6rem; }
@media (min-width: 768px) { .sv-club { padding-top: 6rem; padding-bottom: 8rem; } }
.sv-club__interior { position: relative; }
.sv-club__cabeza { max-width: 42rem; }
.sv-club__intro { margin: 0; font-size: 1.125rem; color: var(--sv-mute); }
.sv-club__rejilla {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;
  margin: 3rem 0 0; padding: 0; list-style: none;
}
@media (min-width: 640px) { .sv-club__rejilla { grid-template-columns: repeat(4, 1fr); } }
.sv-club__rejilla li { margin: 0; }
.sv-club__rejilla img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--sv-radius-card); background: var(--sv-mist);
  transition: transform .5s var(--sv-ease);
}
.sv-club__rejilla li:hover img { transform: scale(1.03); }
.sv-club__boton { margin-top: 2.5rem; }

/* ---------- Llamada a financiación ---------- */
.sv-financiar { position: relative; background: var(--sv-brand); color: var(--sv-ink); padding-block: 4rem; }
@media (min-width: 768px) { .sv-financiar { padding-block: 5rem; } }
.sv-financiar__interior {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2rem;
}
.sv-financiar .sv-eyebrow--linea { color: color-mix(in oklab, var(--sv-ink) 70%, transparent); }
.sv-financiar__reclamo { margin: 1rem 0 0; font-size: 1.125rem; }
@media (min-width: 768px) { .sv-financiar__reclamo { font-size: 1.25rem; } }

/* ---------- Chips de filtros activos ---------- */
.sv-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.sv-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-pill);
  background: var(--sv-paper); cursor: pointer;
  padding: .3rem .75rem; font: inherit; font-size: .8rem; color: var(--sv-ink);
  transition: border-color .3s var(--sv-ease), background-color .3s var(--sv-ease);
}
.sv-chip:hover { border-color: var(--sv-ink); background: var(--sv-mist); }
.sv-chip span { font-size: 1rem; line-height: 1; color: var(--sv-mute); }

/* =========================================================================
 * BANDAS PROMOCIONALES DEL CATÁLOGO
 *
 * Ocupan dos columnas de la rejilla: si midieran lo mismo que una ficha se
 * leerían como un coche más, que es justo lo contrario de lo que hacen.
 * ========================================================================= */
.sv-promo {
  position: relative; overflow: hidden;
  grid-column: span 1;
  border-radius: var(--sv-radius-card-lg);
  min-height: 22rem;
}
@media (min-width: 640px) { .sv-promo { grid-column: span 2; min-height: 0; } }
.sv-promo--brand { background: var(--sv-brand); color: var(--sv-ink); }
.sv-promo--oscuro { background: var(--sv-ink); color: var(--sv-paper); }
.sv-promo__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.sv-promo__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--sv-ink), color-mix(in oklab, var(--sv-ink) 70%, transparent) 60%, transparent);
}
.sv-promo__cuerpo {
  position: relative; display: flex; flex-direction: column; height: 100%;
  gap: 1.5rem; padding: 1.75rem;
}
@media (min-width: 768px) { .sv-promo__cuerpo { padding: 2.25rem; } }
.sv-promo__tag {
  margin: 0; font-family: var(--sv-font-display);
  font-size: 1.5rem; letter-spacing: -.02em; line-height: 1;
}
.sv-promo__tag span { opacity: .55; }
.sv-promo__items {
  display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; flex: 1;
}
@media (min-width: 640px) { .sv-promo__items { grid-template-columns: repeat(3, 1fr); align-content: center; } }
.sv-promo__titulo {
  display: block; font-family: var(--sv-font-display);
  font-size: 1.125rem; line-height: 1.15; letter-spacing: -.01em;
}
.sv-promo__titulo .sv-numeral { font-size: 1.75rem; }
.sv-promo__nota { display: block; margin-top: .25rem; font-size: .8rem; opacity: .65; }
.sv-promo .sv-btn { align-self: flex-start; }

/* =========================================================================
 * El hover de los botones del tema padre
 *
 * GeneratePress pinta un gris oscuro (#3f3f3f) al pasar por encima de
 * CUALQUIER <button>, y su regla (`button:hover`) alcanza a todos los nuestros:
 * el interrogante del desglose, el acordeón, los plazos, las opciones de
 * entrega, la hamburguesa… En este sistema el fondo lo decide cada componente,
 * así que aquí se le devuelve el suyo. Un solo selector de clase basta para
 * ganar en especificidad.
 * ========================================================================= */
.sv-acordeon__boton:hover, .sv-acordeon__boton:focus,
.sv-linea__info:hover, .sv-linea__info:focus,
.sv-interruptor:hover, .sv-interruptor:focus,
.sv-entrega:hover, .sv-entrega:focus,
.sv-panel__ver-desglose:hover, .sv-panel__ver-desglose:focus,
.sv-cabecera__hamburguesa:hover, .sv-cabecera__hamburguesa:focus,
.sv-filtros__limpiar:hover, .sv-filtros__limpiar:focus,
.sv-portada__pie button:hover, .sv-portada__pie button:focus {
  background: none;
}
/* Estos dos sí tienen fondo propio, y es el que deben conservar. */
.sv-plazo:hover, .sv-plazo:focus { background: var(--sv-mist); }
.sv-plazo--activo:hover, .sv-plazo--activo:focus { background: var(--sv-ink); }
.sv-pildora:hover, .sv-pildora:focus { background: var(--sv-paper); }
.sv-pildora--activa:hover, .sv-pildora--activa:focus { background: var(--sv-ink); }
/* Y la opción de entrega elegida mantiene su realce al pasar por encima. */
.sv-entrega--activa:hover, .sv-entrega--activa:focus {
  background: color-mix(in oklab, var(--sv-ink) 4%, transparent);
}
.sv-total__nota {
  margin: .625rem 0 0; font-size: .72rem; line-height: 1.6; color: var(--sv-mute);
}

/* ---------- Página retirada (410) ---------- */
.sv-410 { display: flex; align-items: center; min-height: 70svh; }
.sv-410__caja { max-width: 40rem; padding-block: 6rem; }
.sv-410__texto { margin: 1.25rem 0 2rem; line-height: 1.7; color: var(--sv-mute); }
.sv-410__botones { display: flex; flex-wrap: wrap; gap: 1rem; }