/* =============================================================================================
   Autos Rucab · sistema de diseño v5 (octubre 2026)
   Dirección D «Catálogo claro» (referencia: Samara) en toda la web + la portada «Showroom» (C, VanMoof).
   - Blanco roto, tinta casi negra, titulares en dos tonos («En venta ahora. Uno es el tuyo.»).
   - Coches siempre en su foto de estudio gris claro (fotos reales editadas: el coche no se toca).
   - Granate del logo = la acción principal. Verde solo en WhatsApp.
   - Una sola tipografía (Inter), botones en píldora, paneles #f0f0eb, líneas finas #e3e3dc.
   Móvil primero; :hover solo con ratón.
   ============================================================================================= */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --bg: #fafaf7;
  --surface: #ffffff;
  --panel: #f0f0eb;
  --panel-2: #e7e7e0;
  --line: #e3e3dc;
  --line-2: #cfcfc6;
  --ink: #151515;
  --text: #3d3d3a;
  --mute: #6f6f68;
  --soft: #a3a39c;
  --brand: #941f2b;
  --brand-2: #7c1823;
  --brand-soft: #f6e9ea;
  --on-brand: #ffffff;
  --dark: #0b0b0b;
  --dark-2: #161616;
  --on-dark: #f4f4f1;
  --on-dark-mute: #9a9a94;
  --wa: #25d366;
  --wa-ink: #0b5a2e;
  --ok: #2f7d4f;
  --ok-soft: #e6f2ea;
  --warn-soft: #fbf1d6;
  --warn-ink: #6b5a2a;
  --error: #b3261e;

  --sans: "Inter", "Inter fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);
  --fs-xs: .8125rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem;
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
  --section: clamp(3.5rem, 6.4vw, 5.75rem);
  --gutter: clamp(1rem, 3.6vw, 6rem);
  --max: 110rem;
  --r: 0.875rem; --r-sm: 0.625rem; --r-xs: 0.375rem; --r-pill: 62.4375rem;
  --shadow: 0 1.5rem 3rem -28px rgba(21, 21, 21, .35);
  --header-h: 4rem; --topbar-h: 2rem;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-q: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 200ms;

  /* alias que usan la calculadora (tasacion.css) y el asistente */
  --color-primary: var(--brand); --primary: var(--brand); --primary-fill: var(--brand); --on-primary: #fff;
  --primary-2: var(--brand-2); --primary-hi: var(--brand); --accent: var(--brand); --accent-2: var(--brand-2); --accent-hi: var(--brand);
  --navy: var(--ink); --navy-2: var(--dark-2); --navy-3: #2a2a2a; --dark-3: var(--dark-2);
  --paper: var(--surface); --white: var(--surface); --bg-2: var(--panel); --tint: var(--brand-soft);
  --cream: #f4f4f1; --cream-2: var(--mute); --warm: #e8a3a9; --rose: var(--warm);
  --ink-soft: var(--text); --line-strong: var(--line-2); --green: var(--ok);
  --serif: var(--sans); --hand: var(--sans);
  --radius: var(--r); --radius-s: var(--r-sm); --radius-btn: var(--r-pill);
  --ease-out: var(--ease); --ease-out-quint: var(--ease-q); --ease-bounce: var(--ease); --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-ui: var(--dur); --dur-press: 120ms;
  --sunken: var(--panel); --sunken-2: var(--panel-2); --night: var(--dark); --on-night: var(--on-dark); --on-night-mute: var(--on-dark-mute);
  --hue: 20;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { font-size: 100%; }
@media (min-width: 1500px) { html { font-size: min(calc(16px + (100vw - 1440px) * .0062), 22px); } }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; overflow-x: clip; }
body { background: var(--bg); color: var(--text); font: 400 var(--fs-md)/1.55 var(--sans); letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; overflow-x: clip; font-feature-settings: "cv11", "ss03"; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
input, select, textarea { font-size: max(1rem, 1em); }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
a, button, label { touch-action: manipulation; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
b, strong { font-weight: 600; color: var(--ink); }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 0.1875rem; border-radius: 0.25rem; }
[id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 100; padding: .6rem 1rem; background: var(--ink); color: #fff; border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { top: 1rem; }
.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section-sunken { background: var(--panel); }
.section-tight { padding-block: calc(var(--section) * .5); }
.section-promos { padding-top: 0; padding-bottom: calc(var(--section) * .5); }

/* ---------------------------------------------------------------- tipo */
.display, .h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.035em; }
.h2 { font-size: var(--fs-h2); line-height: 1.04; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; }
.tt { color: var(--soft); }
.lead { margin-top: var(--s4); font-size: var(--fs-lg); line-height: 1.5; color: var(--text); max-width: 40em; }
.eyebrow { font-size: var(--fs-sm); color: var(--mute); }
.eyebrow-light { color: var(--on-dark-mute); }
.muted { color: var(--mute); }
.small { font-size: var(--fs-sm); }
.micro { font-size: var(--fs-xs); color: var(--mute); line-height: 1.5; }
.micro a, .link { color: var(--ink); text-decoration: underline; text-underline-offset: 0.1875rem; }
.label, .persona-role, .price-label, .specs dt, .fgroup legend, .info-list small, .footer-h { font-size: var(--fs-xs); font-weight: 400; color: var(--mute); letter-spacing: 0; text-transform: none; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s6); margin-bottom: var(--s6); }
.section-head.is-center { flex-direction: column; align-items: center; text-align: center; }
.section-sub { margin-top: var(--s3); color: var(--mute); max-width: 40em; }
.more { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-weight: 500; color: var(--ink); }
.more i { font-style: normal; transition: transform var(--dur) var(--ease); }
.linkbtn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 0.1875rem; }
.linkbtn svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tag { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.5625rem; border: 1px solid var(--ink); border-radius: var(--r-xs); font-size: 0.75rem; font-weight: 500; color: var(--ink); line-height: 1.4; }
.tag-demo { border-color: var(--warn-ink); color: var(--warn-ink); background: var(--warn-soft); }
.tag-row { margin-top: var(--s4); }
.btn-row, .pills { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: var(--s5); }

/* ---------------------------------------------------------------- botones (píldora) */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.5rem; border-radius: var(--r-pill); border: 0; font: 500 .9375rem/1 var(--sans); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur), box-shadow var(--dur), transform 120ms var(--ease); }
.btn:active { transform: scale(.97); }
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn i { font-style: normal; }
.btn-sm { min-height: 2.5rem; padding: 0 1rem; font-size: var(--fs-sm); }
.btn-lg { min-height: 3.375rem; padding: 0 1.75rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-line, .btn-soft { background: var(--panel); color: var(--ink); }
.btn-ghost { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.btn-wa { background: var(--wa); color: #06331b; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn[aria-busy="true"] { opacity: .8; cursor: progress; }

/* chips */
.chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0 0.9375rem; border-radius: var(--r-pill); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); white-space: nowrap; cursor: pointer; transition: background var(--dur), color var(--dur), box-shadow var(--dur), transform 120ms var(--ease); }
.chip:active { transform: scale(.96); }
.chip small { font: inherit; font-weight: 400; color: var(--mute); font-variant-numeric: tabular-nums; }
.chip.is-on, .chip[aria-pressed="true"], .chip:has(input:checked) { background: var(--ink); box-shadow: none; color: #fff; }
.chip.is-on small, .chip:has(input:checked) small, .chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .65); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.chip.is-zero { color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.chip-x { padding-right: 0.625rem; }
.chip-x svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ---------------------------------------------------------------- barra superior y cabecera */
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.375rem 1.125rem; min-height: var(--topbar-h); padding: 0.375rem var(--gutter); background: var(--panel); color: var(--text); font-size: 0.7812rem; text-align: center; }
.topbar a { text-decoration: underline; text-underline-offset: 0.1875rem; white-space: nowrap; color: var(--ink); }
.topbar-status { display: inline-flex; align-items: center; gap: 0.5rem; }
.status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--ink); }
.status-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--soft); flex: none; }
.status-dot.is-on { background: var(--ok); box-shadow: 0 0 0 0.1875rem rgba(47, 125, 79, .2); }
.nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 250, 247, .97); box-shadow: 0 1px 0 var(--line); padding-top: env(safe-area-inset-top); }
.nav-inner { display: flex; align-items: center; gap: var(--s3); height: var(--header-h); }
.nav-logo { flex: none; margin-right: auto; }
.nav-logo img { height: 1.625rem; width: auto; }
.nav-logo .logo-light { display: none; }
.nav-links { display: none; }
.nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--fs-sm); color: var(--text); white-space: nowrap; transition: color var(--dur); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav-cur, .nav-links.has-ind .nav-ind { position: absolute; left: 0; bottom: 0.5rem; height: 1.5px; background: var(--ink); border-radius: 2px; }
.nav-cur { right: 0; view-transition-name: nav-ind; }
.nav-ind { display: none; }
.nav-links.has-ind .nav-cur { display: none; }
.nav-links.has-ind .nav-ind { display: block; width: 6.25rem; transform-origin: 0 50%; opacity: 0; pointer-events: none; transition: transform 280ms var(--ease-io), opacity 180ms var(--ease); }
.nav-links.has-ind .nav-ind.is-cur { view-transition-name: nav-ind; }
.nav-actions { display: flex; align-items: center; gap: var(--s2); }
.nav-phone { display: none; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: var(--fs-sm); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav-phone svg, .nav-icon svg { width: 1.1875rem; height: 1.1875rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-cta { display: none; }
.nav-icon { display: grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: 50%; background: var(--panel); color: var(--ink); }
.nav-toggle svg path { transform-box: view-box; transform-origin: 0.75rem 0.75rem; transition: transform 220ms var(--ease), opacity 160ms var(--ease); }
.nav-toggle[aria-expanded="true"] .m1 { transform: translateY(0.3125rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .m2 { opacity: 0; transform: scaleX(.3); }
.nav-toggle[aria-expanded="true"] .m3 { transform: translateY(-5px) rotate(-45deg); }
.menu { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0; z-index: 49; display: grid; align-content: start; gap: 2px; padding: var(--s4) var(--gutter) calc(var(--s7) + env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease), transform 260ms var(--ease-drawer), visibility 0s 260ms; }
.menu.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.menu > * { opacity: 0; transform: translateY(-6px); transition: opacity 140ms var(--ease), transform 200ms var(--ease); }
.menu.is-open > * { opacity: 1; transform: none; transition: opacity 260ms var(--ease-q), transform 340ms var(--ease-q); transition-delay: calc(40ms + var(--i, 0) * 35ms); }
.menu > :nth-child(2) { --i: 1; } .menu > :nth-child(3) { --i: 2; } .menu > :nth-child(4) { --i: 3; } .menu > :nth-child(5) { --i: 4; } .menu > :nth-child(6) { --i: 5; }
.menu a:not(.btn) { display: flex; align-items: center; justify-content: space-between; min-height: 3.75rem; border-bottom: 1px solid var(--line); font-size: 1.625rem; letter-spacing: -0.03em; color: var(--ink); }
.menu a i { font-style: normal; color: var(--soft); }
.menu a[aria-current="page"] { color: var(--brand); }
.menu-contact { margin-top: var(--s5); display: grid; gap: var(--s2); }
html.menu-lock, html.menu-lock body { overflow: hidden; }

/* cabecera oscura de la portada (encima del showroom) */
.page-home .topbar { background: var(--dark); color: var(--on-dark-mute); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07); }
.page-home .topbar a { color: #fff; }
.nav { transition: background 260ms var(--ease), box-shadow 260ms var(--ease); }
.nav a, .nav-icon { transition: color 260ms var(--ease), background 260ms var(--ease); }
.page-home:not(.is-past-hero) .nav { background: var(--dark); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.page-home:not(.is-past-hero) .nav-links a { color: rgba(255, 255, 255, .72); }
.page-home:not(.is-past-hero) .nav-links a[aria-current="page"], .page-home:not(.is-past-hero) .nav-phone { color: #fff; }
.page-home:not(.is-past-hero) .nav-cur, .page-home:not(.is-past-hero) .nav-links.has-ind .nav-ind { background: #fff; }
.page-home:not(.is-past-hero) .nav-logo .logo-dark { display: none; }
.page-home:not(.is-past-hero) .nav-logo .logo-light { display: block; }
.page-home:not(.is-past-hero) .nav-icon { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------------------------------------------------------------- estrellas */
.stars { position: relative; display: inline-flex; flex: none; vertical-align: -2px; }
.stars-base, .stars-fill { display: inline-flex; gap: 2px; }
.stars-base { color: var(--line-2); }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--ink); }
.stars svg { flex: none; width: 0.875rem; height: 0.875rem; fill: currentColor; }
.rating-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: var(--fs-sm); color: var(--text); }
.rating-line > span:last-child { text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-color: var(--line-2); }
.rating-line-sm { font-size: var(--fs-xs); }

/* lista con marcas */
.checks { display: grid; gap: 0.625rem; }
.checks li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.625rem; align-items: start; }
.checks li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: 1px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.75rem no-repeat; }
.checks li.is-aparte::before { background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f68' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 0.75rem no-repeat; }
.checks li.is-aparte b { color: var(--mute); }
.checks b { display: block; font-weight: 500; }
.checks span { display: block; font-size: var(--fs-sm); color: var(--mute); }
.checks-sm { gap: 0.5rem; font-size: var(--fs-sm); }
.checks-sm b { font-weight: 400; }

/* ================================================================ PORTADA */
.hero { position: relative; display: flex; flex-direction: column; background: var(--dark); color: #fff; overflow: hidden; isolation: isolate; }
.hero-bg { position: relative; aspect-ratio: 3 / 2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 60%; }
.hero-bg::after { content: ""; position: absolute; inset: -1px 0 -2px; background: linear-gradient(180deg, var(--dark) 0%, rgba(11, 11, 11, 0) 20%, rgba(11, 11, 11, 0) 70%, var(--dark) 99%); pointer-events: none; }
.hero-in { position: relative; z-index: 2; padding-block: 0 var(--s5); }
.hero .eyebrow { margin-bottom: var(--s3); }
.hero .display { color: #fff; max-width: 11em; }
.hero .display .tt { color: rgba(255, 255, 255, .42); }
.hero-sub { margin-top: var(--s4); max-width: 32em; font-size: var(--fs-lg); line-height: 1.5; color: rgba(255, 255, 255, .72); }
.hero .pills { margin-top: var(--s5); }
.hero-foot { position: relative; z-index: 3; padding-bottom: var(--s5); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem 1.5rem; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .1); }
.hero-tag { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); }
.hero-tag b { font-weight: 500; color: #fff; }
.hero-tag i { font-style: normal; transition: transform var(--dur) var(--ease); }
/* buscador */
.finder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; padding: 0.5rem; border-radius: var(--r); background: #fff; box-shadow: 0 1.875rem 3.75rem -30px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); }
.finder-f { position: relative; display: grid; gap: 1px; padding: 0.5625rem 0.875rem; border-radius: var(--r-sm); background: var(--panel); cursor: pointer; transition: background var(--dur); }
.finder-f:first-child { grid-column: 1 / -1; }
.finder-f span { font-size: 0.75rem; color: var(--mute); }
.finder-f select { appearance: none; -webkit-appearance: none; width: 100%; border: 0; padding: 0 1.375rem 0 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23151515' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 2px center; color: var(--ink); font-weight: 500; font-size: 1rem; cursor: pointer; }
.finder-f select:focus { outline: none; }
.finder-f:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.finder-go { grid-column: 1 / -1; min-height: 3.375rem; }
.finder-go b { display: inline-block; color: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
.finder-go b.is-bump { animation: bump 380ms var(--ease-q); }
@keyframes bump { 40% { transform: translateY(-3px) scale(1.18); } }
.finder-go.is-zero { background: #5a5a56; }
.finder-dark { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.finder-dark .finder-f { background: rgba(255, 255, 255, .06); }
.finder-dark .finder-f span { color: rgba(255, 255, 255, .55); }
.finder-dark .finder-f select { color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.finder-dark .finder-f select option { color: var(--ink); background: #fff; }
.finder-dark .finder-f:focus-within { box-shadow: inset 0 0 0 1.5px #fff; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.375rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, .62); }
.hero-trust li, .hero-trust a { display: inline-flex; align-items: center; gap: 0.375rem; }
.hero-trust b { font-weight: 500; color: #fff; }
.hero-trust .stars-base { color: rgba(255, 255, 255, .22); }
.hero-trust .stars-fill { color: #fff; }

/* entrada: la foto se aclara y el texto sube */
@keyframes heroImg { from { opacity: 0; transform: scale(1.03); } }
@keyframes heroTxt { from { opacity: 0; transform: translateY(0.875rem); } }
.js .hero-bg img { animation: heroImg 1300ms var(--ease-q) both; }
.js .hero-in > * { animation: heroTxt 760ms var(--ease-q) both; }
.js .hero-foot > * { animation: heroTxt 760ms var(--ease-q) 260ms both; }
.js .hero-foot > :nth-child(2) { animation-delay: 360ms; }
.js .hero-in > :nth-child(2) { animation-delay: 70ms; } .js .hero-in > :nth-child(3) { animation-delay: 140ms; } .js .hero-in > :nth-child(4) { animation-delay: 210ms; }

/* por qué aquí */
.why { padding: var(--s8) 0 0; }
.why-grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
.why-grid li { display: grid; grid-template-columns: 2.5rem 1fr; align-content: start; column-gap: 0.875rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.why-ico { grid-row: span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--panel); color: var(--ink); }
.why-ico svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.why-grid h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.015em; }
.why-grid p { margin-top: 2px; font-size: var(--fs-sm); color: var(--mute); }

/* ================================================================ TARJETA DE COCHE (catálogo claro) */
.cars-sec { padding: var(--s8) 0 var(--section); }
.quick { display: flex; gap: 0.5rem; margin: 0 calc(var(--gutter) * -1) var(--s6); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.cars { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.car { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.375rem 0 1.625rem; border-bottom: 1px solid var(--line); }
.car-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.625rem; }
.car-flag { font-size: 0.75rem; color: var(--mute); text-align: right; }
.car-title { margin-top: 0.75rem; font-size: 1.5rem; font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; }
.car-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.car-title a:focus-visible { outline: none; }
.car:has(.car-title a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 0.25rem; border-radius: var(--r-sm); }
.car-version { margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--mute); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.car-media { position: relative; margin-top: 0.875rem; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: #d9d9dc; }
.car-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-q), opacity 320ms var(--ease); }
.car-specs { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin-top: 0.75rem; font-size: var(--fs-xs); color: var(--text); font-variant-numeric: tabular-nums; }
.car-specs li { display: inline-flex; align-items: center; gap: 0.3125rem; }
.car-specs li:not(:last-child)::after { content: "·"; margin: 0 0.4375rem; color: var(--soft); }
.dgt-mini { width: 1rem; height: 1rem; }
.car-price { margin-top: 0.875rem; font-size: var(--fs-xs); color: var(--mute); }
.car-price .price-row { display: flex; align-items: center; gap: 0.375rem; min-width: 0; white-space: nowrap; }
.car-price .price-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); color: var(--mute); }
.car-price .price-main { display: inline-block; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.car-price .price-sub { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* distintivo ambiental DGT de las tarjetas: la imagen oficial, a la derecha del precio */
.car-price .dgt { width: 2rem; height: 2rem; margin-left: auto; }
.car-btns { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.car-btns .btn { min-height: 2.5rem; padding: 0 0.75rem; font-size: 0.8438rem; }
.car-wa svg { width: 1rem; height: 1rem; color: #1aa851; }
.cars-home .car:nth-child(n + 7) { display: none; }
.cars-all { display: flex; justify-content: center; margin-top: var(--s6); }
.cars-note { margin-top: var(--s5); max-width: 110ch; }
.rail-note { margin-top: var(--s3); max-width: 110ch; }
.dgt { display: block; width: 2.25rem; height: 2.25rem; flex: none; }

/* promos (tasación y financiación) con foto real */
.promos { display: grid; gap: var(--s4); }
.promo { position: relative; display: block; min-height: 18.75rem; border-radius: var(--r); overflow: hidden; color: #fff; isolation: isolate; background: var(--dark); }
.promo-art { transition: transform 700ms var(--ease-q); }
.promo img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-q); }
.promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 11, 11, .72) 0%, rgba(11, 11, 11, .25) 55%, rgba(11, 11, 11, .55) 100%); }
.promo-in { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); height: 100%; min-height: inherit; padding: clamp(1.375rem, 3vw, 2.125rem); }
.promo-t { display: block; margin-top: 0.625rem; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; max-width: 14em; }
.promo-t span { color: rgba(255, 255, 255, .6); }
.promo .eyebrow { display: block; }
.promo-in > span { display: block; }
.promo-light { background: var(--panel); color: var(--ink); }
.promo-light::after { display: none; }
.promo-light .eyebrow { color: var(--mute); }
.promo-light .promo-t { color: var(--ink); max-width: 8.6em; }
.promo-light .promo-t span { color: var(--soft); }
.promo-light .promo-p { color: var(--text); max-width: 17em; }
.promo-light .go i { background: var(--brand); color: #fff; }
.promo-light .promo-in { position: relative; z-index: 1; }
.promo-art { position: absolute; right: clamp(1.125rem, 5%, 3rem); top: 50%; z-index: 0; width: auto; height: min(74%, 23.75rem); transform: translateY(-50%) rotate(-8deg); }
.promo-art .b { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.promo-art .g { fill: var(--panel-2); }
.promo-art .w { fill: var(--ink); }
.promo-art .z { fill: transparent; stroke: rgba(21, 21, 21, .28); stroke-width: 1.4; stroke-dasharray: 4 3; }
.promo-art .s { fill: rgba(242, 176, 74, .8); stroke: #b27414; stroke-dasharray: none; }
.promo-art .d { fill: rgba(210, 59, 42, .8); stroke: #8f2215; stroke-dasharray: none; }
.promo-p { display: block; max-width: 28em; color: rgba(255, 255, 255, .8); font-size: var(--fs-sm); }
.promo .go { display: flex; width: fit-content; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-weight: 500; }
.promo .go i { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: #fff; color: var(--ink); font-style: normal; transition: transform var(--dur) var(--ease); }

/* así se compra */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: none; }
.steps li { display: grid; grid-template-columns: 3.5rem 1fr; align-content: start; column-gap: 0.75rem; padding: 1.375rem 0; border-bottom: 1px solid var(--line); }
.step-n { grid-row: span 2; font-size: 1rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 1.375rem; font-weight: 400; letter-spacing: -0.025em; }
.steps p { margin-top: 0.375rem; color: var(--text); max-width: 32em; }

/* qué incluye */
.incl { display: grid; gap: var(--s6); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r); background: var(--panel); }
.incl-list { border-top: 1px solid var(--line-2); }
.incl-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4); padding: 1rem 0; border-bottom: 1px solid var(--line-2); }
.incl-list b { display: block; font-weight: 500; }
.incl-list span { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--mute); }
.incl-list i { font-style: normal; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.625rem; border-radius: var(--r-pill); background: var(--ink); color: #fff; }
.incl-list .is-aparte i { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--mute); }

/* Equipo y opiniones */
.person-grid { display: grid; gap: var(--s4); }
.person-card { display: flex; flex-direction: column; gap: var(--s4); padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--r); background: var(--panel); }
.person-card .h2 .tt { display: block; }
.person-card p { color: var(--text); max-width: 34em; }
.person-card .pills { margin-top: auto; padding-top: var(--s4); }
.quotes { display: grid; align-content: start; gap: 0; }
.quotes-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; padding-bottom: var(--s4); font-size: var(--fs-sm); color: var(--mute); border-bottom: 1px solid var(--line); }
.quotes-head b { font-size: 2.25rem; font-weight: 400; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.review { display: grid; gap: 0.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.review blockquote { font-size: 1.125rem; line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); }
.review.is-big blockquote { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.18; letter-spacing: -0.025em; }
.review figcaption { display: flex; flex-wrap: wrap; gap: 0.25rem 0.625rem; font-size: var(--fs-xs); color: var(--mute); }
.review figcaption b { font-weight: 500; color: var(--ink); }
.quotes .more { margin-top: var(--s3); }

/* aviso cuando entre */
.alert-grid { display: grid; gap: var(--s6); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.alert-form { display: grid; gap: var(--s5); }
.fgroup { border: 0; padding: 0; min-width: 0; }
.fgroup legend { margin-bottom: var(--s2); }
.fchips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.alert-form .micro { margin-top: calc(var(--s3) * -1); }

/* preguntas */
.faq-grid { display: grid; gap: var(--s5); grid-template-areas: "title" "faq" "aside"; }
.faq-title { grid-area: title; } .faq { grid-area: faq; } .faq-aside { grid-area: aside; }
.faq-grid > * { min-width: 0; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 4.25rem; padding: 0.875rem 0; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 0.8125rem no-repeat; transition: transform 220ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--s7) var(--s5) 0; color: var(--text); }
.faq-aside { display: grid; gap: var(--s2); align-self: start; padding: var(--s5); border-radius: var(--r); background: var(--panel); }
.faq-aside > p:nth-child(2) { margin-bottom: var(--s2); }
.faq-bot { justify-self: start; font-size: var(--fs-sm); }

/* visita */
.visit-grid { display: grid; gap: var(--s6); }
.visit-grid > * { min-width: 0; }
.info-list { display: grid; gap: 0; margin-top: var(--s5); border-top: 1px solid var(--line); }
.info-list li { display: grid; grid-template-columns: 1.375rem 1fr; gap: var(--s3); padding: 1rem 0; border-bottom: 1px solid var(--line); }
.info-list svg { width: 1.25rem; height: 1.25rem; margin-top: 2px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.info-list small { display: block; margin-bottom: 2px; }
.info-list b { font-weight: 500; }
.map { position: relative; min-height: 18.75rem; border-radius: var(--r); overflow: hidden; background: var(--panel); display: grid; }
.map iframe { width: 100%; height: 100%; min-height: 21.25rem; border: 0; }
.map { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.map-face { position: relative; display: grid; align-content: end; gap: var(--s3); min-height: 23.75rem; padding: var(--s5); }
.map-plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-plan .rd { fill: none; stroke: #ecece6; stroke-linecap: round; }
.map-plan .rd-m { stroke: #e2e2da; }
.map-plan text { font: 500 0.6875rem var(--sans); fill: var(--mute); letter-spacing: .02em; }
.map-face > :not(svg) { position: relative; }
.map-face > p:first-of-type { max-width: 30em; padding: 0.875rem 1rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px var(--line); }
.map-face .btns { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ================================================================ PÁGINAS INTERIORES */
.page-head { padding-block: clamp(1.75rem, 5vw, 4rem) var(--s6); }
.page-head .lead { color: var(--mute); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: var(--s4); font-size: var(--fs-xs); color: var(--mute); }
.crumbs a { display: inline-flex; align-items: center; min-height: 2rem; text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-color: var(--line-2); }
.crumbs [aria-current] { color: var(--ink); }
.page-hero { padding-block: clamp(1.75rem, 5vw, 4rem) var(--section); }

/* listado */
.listing-head { padding-block: clamp(1.75rem, 4vw, 3.5rem) var(--s5); }
.listing-head .h2 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.035em; max-width: 14em; }
.listing-head .lead { margin-top: var(--s3); color: var(--mute); font-size: var(--fs-md); }
.list-layout { display: grid; gap: var(--s5); padding-bottom: var(--section); }
.list-main { min-width: 0; }
.toolbar { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top)); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 calc(var(--gutter) * -1); padding: var(--s2) var(--gutter); background: rgba(250, 250, 247, .98); }
.count { font-size: 1.0625rem; color: var(--ink); white-space: nowrap; }
.count b { font-weight: 500; font-variant-numeric: tabular-nums; }
.toolbar-r { display: flex; align-items: center; gap: var(--s2); }
.sort select { min-height: 2.5rem; max-width: 42vw; padding: 0 2rem 0 0.875rem; border: 0; border-radius: var(--r-pill); background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23151515' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.75rem center; font-size: 0.875rem; font-weight: 500; appearance: none; -webkit-appearance: none; }
.fbtn { gap: 0.375rem; }
.fbadge { display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 0.6875rem; font-style: normal; }
.active-chips { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) 0 var(--s4); }
.active-chips .chip { min-height: 2.25rem; font-size: var(--fs-xs); }
.empty { padding: var(--s7) var(--s4); text-align: center; border-radius: var(--r); background: var(--panel); }
.empty .btn-row { justify-content: center; }
.ask { display: grid; gap: var(--s4); align-items: center; margin-top: var(--s6); padding: var(--s5); border-radius: var(--r); background: var(--panel); }
.ask p { margin-top: 0.25rem; }
.car.is-out { display: none; }
html:not(.js) .fpanel, html:not(.js) .fbtn { display: none; }
.fpanel { position: fixed; inset: 0; z-index: 70; visibility: hidden; pointer-events: none; }
.fpanel::before { content: ""; position: absolute; inset: 0; background: rgba(11, 11, 11, .46); opacity: 0; transition: opacity 240ms var(--ease); }
.fpanel-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: min(88dvh, 45rem); background: var(--bg); border-radius: 1.125rem 1.125rem 0 0; box-shadow: 0 -12px 2.5rem rgba(0, 0, 0, .18); transform: translateY(100%); transition: transform 280ms var(--ease-drawer); padding-bottom: env(safe-area-inset-bottom); }
.fpanel.is-open { visibility: visible; pointer-events: auto; }
.fpanel.is-open::before { opacity: 1; }
.fpanel.is-open .fpanel-sheet { transform: none; }
.fpanel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s4) var(--s2) var(--s5); }
.fpanel-head::before { content: ""; position: absolute; left: 50%; top: 0.5rem; width: 2.375rem; height: 0.25rem; margin-left: -19px; border-radius: 2px; background: var(--line-2); }
.fpanel-t { font-size: 1.25rem; font-weight: 500; }
.fpanel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s5) var(--s4); display: grid; gap: var(--s5); align-content: start; }
.fgroup .micro { margin-top: var(--s2); }
.fpanel-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--line); }
.fpanel-foot .btn { min-width: 10rem; }
html.sheet-lock, html.sheet-lock body { overflow: hidden; }

/* ficha */
.ficha { padding: var(--s4) 0 var(--section); }
.ficha-grid { display: grid; gap: var(--s5); grid-template-areas: "g" "a" "d"; }
.ficha-grid > * { min-width: 0; }
.ficha-gallery { grid-area: g; } .ficha-aside { grid-area: a; } .ficha-details { grid-area: d; }
.ficha-aside { display: grid; gap: var(--s4); align-content: start; }
.ficha-head .tag { margin-bottom: var(--s3); }
.ficha-title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; }
.ficha-version { margin-top: 0.375rem; color: var(--mute); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.specs div { display: grid; gap: 2px; align-content: start; padding: 0.75rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.specs dd { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.specs dd .muted { font-weight: 400; font-size: var(--fs-xs); }
.price-box { padding: var(--s5); border-radius: var(--r); background: var(--panel); }
.price-label { display: flex; align-items: center; gap: 0.5rem; }
.unico { display: inline-flex; padding: 2px 0.5rem; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font-size: 0.6875rem; font-weight: 500; }
.price-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: 0.25rem; }
.price-box .price-main { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); font-weight: 400; letter-spacing: -0.04em; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.price-line .dgt { width: 2.75rem; height: 2.75rem; }
.price-alt, .price-fee { margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--text); }
.price-cash { margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--mute); font-variant-numeric: tabular-nums; }
.price-note { margin-top: var(--s3); }
.price-fee b { font-variant-numeric: tabular-nums; }
.price-fee a { color: var(--mute); text-decoration: underline; text-underline-offset: 0.1875rem; }
.price-cta { display: grid; gap: var(--s2); margin-top: var(--s4); }
.next-slot { text-align: center; font-size: var(--fs-xs); color: var(--mute); }
.price-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.price-box .checks { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-2); }
.ficha-trade { display: grid; grid-template-columns: 2.5rem 1fr 1.25rem; gap: var(--s3); align-items: center; padding: var(--s4); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--dur); }
.ficha-trade b { display: block; font-weight: 500; }
.ficha-trade span span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--mute); }
.ficha-trade-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--brand); color: #fff; }
.ficha-trade svg { width: 1.1875rem; height: 1.1875rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ficha-person { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r); background: var(--panel); }
.persona-name { font-weight: 500; color: var(--ink); }
.ficha-details { display: grid; gap: var(--s7); }
.fsec { padding-top: var(--s5); border-top: 1px solid var(--line); }
.fsec .h3 { margin-bottom: var(--s4); }
.datos { display: grid; }
.datos > div { display: flex; justify-content: space-between; gap: var(--s4); padding: 0.6875rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.datos dt { color: var(--mute); }
.datos dd { font-weight: 500; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: var(--s4); }
.tags li { padding: 0.25rem 0.625rem; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--ink); font-size: 0.75rem; font-weight: 500; color: var(--ink); }
.equip { display: grid; gap: 0.5rem 1.5rem; }
.equip li { position: relative; padding-left: 1rem; font-size: var(--fs-sm); }
.equip li::before { content: ""; position: absolute; left: 0; top: .6em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--soft); }
.acc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; gap: var(--s4); min-height: 4.25rem; cursor: pointer; list-style: none; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; margin-left: auto; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 0.8125rem no-repeat; transition: transform 220ms var(--ease); }
.acc[open] summary::after { transform: rotate(45deg); }
.acc-body { padding: 0 0 var(--s5); display: grid; gap: var(--s3); }
.fin-legal { font-size: var(--fs-xs); color: var(--mute); line-height: 1.5; }
.others { margin-top: var(--section); }

/* galería */
.gal { position: relative; margin: 0 calc(var(--gutter) * -1); background: #d9d9dc; }
.gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; aspect-ratio: 4 / 3; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: block; height: 100%; cursor: zoom-in; }
.gal-slide img { width: 100%; height: 100%; object-fit: cover; transition: opacity 320ms var(--ease); }
.gal-btn { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 2.75rem; height: 2.75rem; margin-top: -22px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); transition: background var(--dur), color var(--dur), transform 120ms var(--ease); }
.gal-btn:active { transform: scale(.92); }
.gal-btn svg, .lb-btn svg, .lb-close svg { width: 1.1875rem; height: 1.1875rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gal-prev { left: 0.75rem; } .gal-next { right: 0.75rem; }
.gal-count { position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 2; padding: 0.25rem 0.625rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); color: var(--ink); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; pointer-events: none; }
.gal-count b { font-weight: 500; }
.gal-all { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0 0.875rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); font-size: var(--fs-xs); font-weight: 500; color: var(--ink); }
.gal-all svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
html:not(.js) .gal-btn, html:not(.js) .gal-all { display: none; }
.gal-thumbs { display: none; }
.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(11, 11, 11, .96); color: #fff; }
.lightbox[open] { display: grid; place-items: center; animation: fadeIn .25s ease; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: min(96vw, 75rem); max-height: 86dvh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); }
.lightbox[open] img { animation: lbIn 240ms var(--ease-q); }
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } }
.lb-btn, .lb-close { position: fixed; display: grid; place-items: center; width: 3.125rem; height: 3.125rem; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.lb-prev { left: max(0.75rem, env(safe-area-inset-left)); top: 50%; margin-top: -25px; }
.lb-next { right: max(0.75rem, env(safe-area-inset-right)); top: 50%; margin-top: -25px; }
.lb-close { top: max(0.75rem, env(safe-area-inset-top)); right: 0.75rem; }
.lb-count { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: var(--fs-sm); color: rgba(255, 255, 255, .8); }
.lb-count b { color: #fff; font-weight: 500; }
@keyframes fadeIn { from { opacity: 0; } }

/* reserva de visita */
.booking { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--r); background: var(--panel); }
.booking-head p { margin-top: var(--s2); color: var(--mute); font-size: var(--fs-sm); }
.bk-sum { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s3); align-items: center; margin-top: var(--s4); padding: 0.625rem; border-radius: var(--r-sm); background: #fff; }
.bk-sum img { width: 4.5rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.375rem; }
.bk-sum-ico { display: grid; place-items: center; width: 4.5rem; height: 3.375rem; border-radius: 0.375rem; background: var(--panel); color: var(--mute); }
.bk-sum-ico svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bk-sum b { display: block; font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; }
.bk-sum span { display: block; font-size: var(--fs-xs); color: var(--mute); }
.bk-sum span.is-set { color: var(--ink); font-weight: 500; }
.booking form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s5); }
.booking fieldset { border: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.booking legend { display: flex; align-items: center; gap: 0.625rem; margin-bottom: var(--s3); font-weight: 500; color: var(--ink); }
.bk-n { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 500; }
.days { max-width: 100%; display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding: 0.1875rem; margin: -3px; }
.days::-webkit-scrollbar { display: none; }
.day { position: relative; flex: none; display: grid; justify-items: center; gap: 1px; min-width: 3.75rem; padding: 0.5625rem 0.375rem; border-radius: var(--r-sm); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background var(--dur), box-shadow var(--dur), color var(--dur), transform 120ms var(--ease); }
.day:active, .slot:active { transform: scale(.96); }
.day small { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.day b { font-size: 1.25rem; font-weight: 500; }
.day input, .slot input { position: absolute; opacity: 0; pointer-events: none; }
.day:has(input:checked) { background: var(--ink); box-shadow: none; color: #fff; }
.day:has(input:checked) small, .day:has(input:checked) b { color: #fff; }
.day:has(input:focus-visible), .slot:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.slot { position: relative; display: grid; gap: 1px; padding: 0.6875rem 0.875rem; border-radius: var(--r-sm); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: box-shadow var(--dur), transform 120ms var(--ease); }
.slot b { font-weight: 500; }
.slot span { font-size: var(--fs-sm); color: var(--mute); font-variant-numeric: tabular-nums; }
.slot:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.slot:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.bk-more summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--ink); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 0.1875rem; list-style: none; }
.bk-more summary::-webkit-details-marker { display: none; }
.bk-alt { margin-top: calc(var(--s3) * -1); text-align: center; font-size: var(--fs-sm); color: var(--mute); }
.booking .micro { margin-top: calc(var(--s3) * -1); }
.booking-done { margin-top: var(--s5); padding: var(--s5); border-radius: var(--r-sm); background: var(--ok-soft); }
.booking-done h3 { display: flex; align-items: center; gap: 0.625rem; }
.booking-done h3::before { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.9375rem no-repeat; animation: pop 320ms var(--ease); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.booking-done > p { margin-top: var(--s2); }
.booking-done dl { display: grid; gap: 0.375rem; margin-top: var(--s4); }
.booking-done dl div { display: flex; gap: 0.5rem; }
.booking-done dt { min-width: 4rem; color: var(--mute); }
.booking-done dd { font-weight: 500; color: var(--ink); }
.booking-done .btns { display: grid; gap: var(--s2); margin-top: var(--s5); }
.booking-done.booking-fail { background: var(--warn-soft); }
p.booking-fail { padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-sm); }
.booking::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--ink); opacity: 0; pointer-events: none; }
.booking:target::after { animation: aqui 1.6s var(--ease) .35s both; }
@keyframes aqui { 18% { opacity: 1; } 100% { opacity: 0; } }

/* formularios */
.field { display: grid; gap: 0.375rem; }
.field > span { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; min-height: 3.125rem; padding: 0.75rem 0.875rem; font-size: 1rem; background: #fff; border: 0; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow var(--dur); appearance: none; -webkit-appearance: none; }
.field select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23151515' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.875rem center; padding-right: 2.375rem; }
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input::placeholder, .field textarea::placeholder { color: #8a8a83; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea, .is-invalid .day, .is-invalid .slot { box-shadow: inset 0 0 0 2px var(--error); }
.form-row { display: grid; gap: var(--s4); }
.check { display: flex; gap: 0.625rem; align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 1px; accent-color: var(--ink); }
.check a { text-decoration: underline; text-underline-offset: 0.1875rem; }
.check.is-invalid { color: var(--error); }
.form-error { color: var(--error); font-size: var(--fs-sm); font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* financiación */
.fin-grid { display: grid; gap: var(--s6); align-items: start; }
.fin-grid > * { min-width: 0; }
.fin-top { grid-template-areas: "intro" "form" "req"; }
.fin-intro { grid-area: intro; } .fin-top .calc-fin { grid-area: form; } .fin-req { grid-area: req; }
.fin-req .checks { margin-top: var(--s4); }
.calc-fin { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r); background: var(--panel); display: grid; gap: var(--s4); }
.range { display: grid; gap: 0.375rem; }
.range-top { display: flex; justify-content: space-between; gap: var(--s3); font-weight: 500; color: var(--ink); }
.range output { font-variant-numeric: tabular-nums; }
.range input[type="range"] { width: 100%; accent-color: var(--ink); min-height: 2rem; }
.fee-out { display: grid; gap: 0.25rem; padding: var(--s4); border-radius: var(--r-sm); background: #fff; text-align: center; }
.fee-out b { display: block; font-size: clamp(2rem, 1.7rem + 1.2vw, 2.75rem); font-weight: 400; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.example { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.example .fin-legal { margin-top: var(--s4); }

/* contacto */
.contact-grid { display: grid; gap: var(--s6); grid-template-areas: "intro" "form" "info"; }
.contact-intro { grid-area: intro; } .contact-form { grid-area: form; min-width: 0; } .contact-info { grid-area: info; min-width: 0; }
.contact-info .info-list { margin-top: 0; }
.directions-t { margin-top: var(--s6); }
.directions { display: grid; gap: var(--s2); margin: var(--s3) 0 var(--s5); font-size: var(--fs-sm); }

/* legales */
.legal { padding: var(--s4) 0 var(--section); }
.legal-wrap { max-width: 48.75rem; }
.legal h1, .legal .h2 { font-size: var(--fs-h2); }
.legal h2 { margin: var(--s6) 0 var(--s2); font-size: var(--fs-h3); font-weight: 500; }
.legal p, .legal li { margin-top: var(--s2); }
.legal .lead { margin-top: var(--s4); }
.legal-list { display: grid; gap: 0.625rem; }
.legal-list li { position: relative; padding-left: 1rem; }
.legal-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--soft); }
.legal a { text-decoration: underline; }
.legal .btn { text-decoration: none; }
.legal-draft { margin: var(--s4) 0; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- pie (oscuro, cierra como la portada) */
.footer { padding: var(--section) 0 calc(var(--s6) + 4.625rem + env(safe-area-inset-bottom)); background: var(--dark); color: var(--on-dark-mute); }
.footer a:not(.btn), .footer b { color: var(--on-dark); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.footer-logo img { width: 11.875rem; height: auto; }
.footer-types { display: flex; flex-wrap: wrap; gap: 2px 1.625rem; margin-top: var(--s7); padding-bottom: var(--s6); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-types a { display: inline-flex; align-items: flex-start; gap: 0.25rem; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); letter-spacing: -0.035em; line-height: 1.15; color: var(--on-dark); transition: color var(--dur); }
.footer-types sup { font-size: .3em; letter-spacing: 0; color: var(--on-dark-mute); margin-top: .5em; }
.footer-grid { display: grid; gap: var(--s6); margin-top: var(--s6); }
.footer-h { margin-bottom: var(--s3); color: var(--on-dark-mute); }
.footer-big { display: block; font-size: 1.75rem; letter-spacing: -0.03em; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.footer-col p + p, .footer-col a + a, .footer-col p + a { margin-top: 0.25rem; }
.footer-col a:not(.footer-big) { display: inline-flex; align-items: center; min-height: 2.5rem; text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-color: rgba(255, 255, 255, .3); }
.footer-status .status { color: var(--on-dark); }
.footer-status .status-dot { background: var(--on-dark-mute); }
.footer-status .status-dot.is-on { background: #5bc489; box-shadow: 0 0 0 0.1875rem rgba(91, 196, 137, .2); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); font-size: var(--fs-xs); }
.footer-legal a { text-decoration: underline; text-underline-offset: 0.1875rem; }
.footer :focus-visible { outline-color: #fff; }

/* barra móvil */
.mbar { position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0.375rem; padding: 0.5rem max(0.5rem, env(safe-area-inset-left)) calc(0.5rem + env(safe-area-inset-bottom)); background: rgba(250, 250, 247, .98); box-shadow: 0 -1px 0 var(--line); transition: transform 280ms var(--ease-drawer); view-transition-name: site-mbar; }
.mbar a { display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 3.125rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); background: var(--panel); transition: transform 120ms var(--ease); }
.mbar a:active { transform: scale(.96); }
.mbar a.is-main { background: var(--brand); color: #fff; }
.mbar a.is-wa { background: var(--wa); color: #06331b; }
.mbar svg { width: 1.1875rem; height: 1.1875rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mbar.is-away { transform: translateY(110%); }
.mbar-car { grid-template-columns: 1fr auto auto; align-items: center; }
.mbar-car .mbar-price { display: grid; line-height: 1.15; min-width: 0; padding-left: 0.375rem; }
.mbar-car .mbar-price b { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mbar-car .mbar-price span { font-size: var(--fs-xs); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar-car a { padding: 0 1rem; }
.mbar-car a.is-wa { width: 3.125rem; padding: 0; }

/* asistente */
html:not(.js) .chat { display: none; }
.chat-panel { position: fixed; z-index: 60; inset: 0; display: flex; flex-direction: column; height: var(--vvh, 100dvh); background: var(--bg); color: var(--text); animation: chatIn .35s var(--ease); }
.chat-panel[hidden] { display: none; }
.chat-panel.is-closing { animation: chatOut .2s ease forwards; }
@keyframes chatIn { from { opacity: 0; transform: translateY(1.25rem) scale(.97); } }
@keyframes chatOut { to { opacity: 0; transform: translateY(0.75rem) scale(.98); } }
.chat-head { display: flex; align-items: center; gap: 0.75rem; padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem 0.75rem 1rem; background: var(--dark); color: #fff; }
.chat-avatar { display: block; flex: none; width: 2.625rem; height: 2.625rem; padding: 0.375rem; border-radius: 50%; background: #fff; }
.chat-avatar img { width: 1.875rem; height: 1.875rem; object-fit: contain; }
.chat-head-text { flex: 1; min-width: 0; }
.chat-title { font-weight: 500; color: #fff; }
.chat-sub { display: flex; align-items: center; gap: 0.375rem; margin-top: 2px; font-size: 0.75rem; color: var(--on-dark-mute); }
.chat-sub-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--ok); }
.chat-icon-btn { display: grid; place-items: center; flex: none; width: 2.625rem; height: 2.625rem; border-radius: 50%; color: #fff; }
.chat-icon-btn svg { width: 1.1875rem; height: 1.1875rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.625rem; padding: 1.125rem 0.875rem 0.625rem; }
.msg { max-width: 86%; padding: 0.6875rem 0.875rem; border-radius: 1.125rem; font-size: 0.9375rem; line-height: 1.5; animation: msgIn .35s var(--ease); overflow-wrap: anywhere; }
.msg p + p, .msg p + ul, .msg ul + p { margin-top: 0.5rem; }
.msg ul { display: grid; gap: 0.25rem; }
.msg li { position: relative; padding-left: 0.875rem; }
.msg li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--ink); }
.msg a { color: var(--ink); font-weight: 500; text-decoration: underline; }
.msg-bot { align-self: flex-start; background: var(--panel); border-bottom-left-radius: 0.375rem; }
.msg-user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 0.375rem; }
.msg-user a { color: #fff; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; }
.msg-actions a { display: inline-flex; align-items: center; min-height: 2.375rem; padding: 0 0.875rem; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 0.8125rem; font-weight: 500; text-decoration: none; }
.msg-actions a.wa { background: var(--wa); color: #06331b; }
.typing { display: inline-flex; gap: 0.3125rem; align-items: center; padding: 0.875rem 1rem; }
.typing i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--mute); animation: dot 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(0.375rem); } }
.chat-quick { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding: 0.5rem 0.875rem 0.25rem; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick button { flex: none; min-height: 2.375rem; padding: 0 0.875rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 0.8438rem; font-weight: 500; color: var(--ink); }
.chat-form { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.625rem 0.75rem 0.375rem; border-top: 1px solid var(--line); }
.chat-form textarea { flex: 1; min-height: 2.875rem; max-height: 7.5rem; padding: 0.75rem 0.875rem; resize: none; overflow-y: hidden; font-size: 1rem; line-height: 1.35; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 1.375rem; background: #fff; }
.chat-form textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.chat-send { display: grid; place-items: center; flex: none; width: 2.875rem; height: 2.875rem; border-radius: 50%; background: var(--ink); color: #fff; }
.chat-send:disabled { opacity: .4; cursor: default; }
.chat-send svg { width: 1.1875rem; height: 1.1875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.chat-note { padding: 0.25rem 1rem max(0.625rem, env(safe-area-inset-bottom)); font-size: 0.7188rem; line-height: 1.45; color: var(--mute); }
.chat-note a { color: var(--ink); text-decoration: underline; }
html.chat-lock, html.chat-lock body { overflow: hidden; }

/* ---------------------------------------------------------------- movimiento */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: vtOut 160ms var(--ease) both; }
::view-transition-new(root) { animation: vtIn 300ms var(--ease-q) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(0.5rem); } }
::view-transition-group(car-photo) { animation-duration: 420ms; animation-timing-function: var(--ease-io); border-radius: var(--r-sm); overflow: hidden; }
::view-transition-old(car-photo), ::view-transition-new(car-photo) { height: 100%; width: 100%; object-fit: cover; animation-duration: 420ms; animation-timing-function: var(--ease-io); }
::view-transition-group(nav-ind) { animation-duration: 300ms; animation-timing-function: var(--ease-io); }
::view-transition-group(site-nav), ::view-transition-group(site-mbar) { animation-duration: 240ms; }
.rv-wait { opacity: 0; transform: translateY(1rem); }
.rv-run { transition: opacity 520ms var(--ease-q) var(--rv-d, 0ms), transform 680ms var(--ease-q) var(--rv-d, 0ms) !important; }
.is-loading::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .45) 50%, transparent 75%); transform: translateX(-100%); animation: shimmer 1.3s var(--ease-io) infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
img.img-wait { opacity: 0; }
@media print { .rv-wait { opacity: 1 !important; transform: none !important; } }

/* ---------------------------------------------------------------- tamaños mayores */
@media (min-width: 600px) {
  .cars .car { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .car-price { align-self: end; }
  .cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cars .car { padding-inline: 1.25rem; border-right: 1px solid var(--line); }
  .cars .car:nth-child(2n) { border-right: 0; }
  .cars .car:nth-child(2n + 1) { padding-left: 0; }
  .cars .car:nth-child(2n) { padding-right: 0; }
  .promos { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
  .finder { grid-template-columns: 1.3fr 1fr 1fr auto; }
  .finder-f:first-child { grid-column: auto; }
  .finder-go { grid-column: auto; padding: 0 1.75rem; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .equip { grid-template-columns: 1fr 1fr; }
  .gal { margin: 0; border-radius: var(--r); overflow: hidden; }
  .gal-btn { display: grid; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .ask { grid-template-columns: 1fr auto; }
  .booking-done .btns { grid-auto-flow: column; justify-content: start; }
  .chat-panel { inset: auto max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) auto; width: 24.5rem; height: min(40rem, calc(100dvh - 2rem)); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
  .fpanel-sheet { left: 50%; right: auto; width: 35rem; margin-left: -280px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: var(--s5); }
  .steps li { display: block; padding: 1.25rem 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .step-n { display: block; margin-bottom: var(--s6); }
}
@media (min-width: 900px) {
  :root { --header-h: 4.5rem; }
  .footer { padding-bottom: var(--s6); }
  .mbar { display: none; }
  .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s6); }
  .nav-logo { grid-column: 2; grid-row: 1; margin: 0; }
  .nav-links { grid-column: 1; grid-row: 1; justify-content: flex-start !important; }
  .nav-actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav-logo img { height: 1.75rem; }
  .nav-links { position: relative; display: flex; justify-content: center; gap: 1.75rem; }
  .nav-cta { display: inline-flex; }
  .nav-toggle, .nav-call, .menu { display: none; }
  /* portada: la foto ocupa el fondo, el texto a la izquierda en la parte vacía del estudio */
  .hero { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: calc(100svh - var(--header-h) - var(--topbar-h)); min-height: 33.75rem; max-height: 67.5rem; }
  /* la caja de la foto tiene la proporción de la foto (2,62:1): a lo ancho nunca se recorta y el coche queda a la derecha */
  .hero-bg { position: absolute; inset: 0 0 auto 0; height: min(100%, 38.1vw); aspect-ratio: auto; }
  .hero-bg img { object-position: 100% 50%; }
  .hero-bg::after { background: linear-gradient(180deg, var(--dark) 0%, rgba(11, 11, 11, 0) 16%), linear-gradient(90deg, rgba(11, 11, 11, .55) 0%, rgba(11, 11, 11, 0) 40%), linear-gradient(0deg, var(--dark) 0%, rgba(11, 11, 11, 0) 28%); }
  .hero-in { align-self: center; padding-block: clamp(1rem, 4vh, 3.5rem) 0; }
  .hero-in > * { max-width: min(35rem, 42vw); }
  .hero .display { font-size: min(clamp(2.25rem, 1rem + 3.2vw, 4.25rem), 9.4vh); max-width: 9em; }
  .hero-sub { font-size: min(var(--fs-lg), 2.5vh + 2px); margin-top: min(var(--s4), 2vh); }
  .hero .pills { margin-top: min(var(--s5), 3.4vh); }
  .hero-foot { padding-bottom: clamp(0.875rem, 3vh, 1.875rem); }
  .hero-meta { margin-top: clamp(0.625rem, 2vh, 1.125rem); padding-top: clamp(0.625rem, 2vh, 1.125rem); }
  .why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-top: 0; }
  .why-grid li { padding: 0.25rem 1.5rem; border-bottom: 0; border-left: 1px solid var(--line); }
  .why-grid li:first-child { padding-left: 0; border-left: 0; }
  .cars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cars .car, .cars .car:nth-child(n) { padding-inline: 1.25rem; border-right: 1px solid var(--line); }
  .cars .car:nth-child(3n) { border-right: 0; padding-right: 0; }
  .cars .car:nth-child(3n + 1) { padding-left: 0; }
  .incl { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); }
  .person-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); }
  .alert-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: start; }
  .faq-grid { grid-template-columns: 1fr 2fr; grid-template-rows: auto 1fr; grid-template-areas: "title faq" "aside faq"; column-gap: var(--s8); row-gap: var(--s5); }
  .visit-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
  .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "intro info" "form info"; column-gap: var(--s8); row-gap: var(--s5); align-items: start; }
  .list-layout { grid-template-columns: 16.25rem minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .fpanel { position: sticky; top: calc(var(--header-h) + 1.25rem); inset: auto; z-index: 1; visibility: visible; pointer-events: auto; }
  .fpanel::before, .fpanel-head::before, .fpanel-x, .fpanel-foot .btn { display: none; }
  .fpanel-sheet { position: static; width: auto; margin: 0; max-height: none; transform: none; border-radius: var(--r); box-shadow: none; background: var(--panel); transition: none; padding-bottom: 0; }
  .fpanel-head { padding: var(--s4) var(--s5) var(--s2); }
  .fpanel-foot { padding: var(--s2) var(--s5) var(--s3); justify-content: flex-start; border-top-color: var(--line-2); }
  .fpanel .chip { background: #fff; box-shadow: none; }
  .fpanel .chip:has(input:checked) { background: var(--ink); }
  .fbtn { display: none; }
  .toolbar { position: static; margin: 0; padding: 0 0 var(--s3); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .list-main .cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-main .cars .car:nth-child(n) { padding-inline: 1.25rem; border-right: 1px solid var(--line); }
  .list-main .cars .car:nth-child(2n) { border-right: 0; padding-right: 0; }
  .list-main .cars .car:nth-child(2n + 1) { padding-left: 0; }
  .ficha { padding-top: var(--s5); }
  .ficha-grid { grid-template-columns: minmax(0, 1.55fr) minmax(21.25rem, 1fr); grid-template-areas: "g a" "d a"; grid-template-rows: auto 1fr; column-gap: var(--s7); row-gap: var(--s7); align-items: start; }
  .ficha-aside { position: sticky; top: calc(var(--header-h) + 1.25rem); }
  .others .car:nth-child(4) { display: none; }
  .gal-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 5.5rem; gap: 0.5rem; margin-top: var(--s2); overflow-x: auto; padding: 0.1875rem 0.1875rem 0.5rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .gal-thumbs button { display: block; width: 100%; border-radius: 0.375rem; overflow: hidden; opacity: .55; transition: opacity var(--dur); scroll-snap-align: start; }
  .gal-thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 0.2188rem var(--ink); }
  .gal-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .fin-grid { grid-template-columns: 1.1fr 1fr; gap: var(--s8); }
  .fin-top { grid-template-areas: "intro form" "req form"; grid-template-rows: auto 1fr; row-gap: var(--s6); }
}
@media (min-width: 1180px) {
  .nav-phone { display: inline-flex; }
  .cars-home .car:nth-child(n + 7) { display: grid; }
  .promo { min-height: 26.25rem; }
  .cars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cars .car:nth-child(n) { padding-inline: 1.25rem; border-right: 1px solid var(--line); }
  .cars .car:nth-child(3n) { border-right: 1px solid var(--line); padding-right: 1.25rem; }
  .cars .car:nth-child(3n + 1) { padding-left: 1.25rem; }
  .cars .car:nth-child(4n) { border-right: 0; padding-right: 0; }
  .cars .car:nth-child(4n + 1) { padding-left: 0; }
  .others .car:nth-child(4) { display: grid; }
  .list-main .cars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .list-main .cars .car:nth-child(n) { padding-inline: 1.25rem; border-right: 1px solid var(--line); }
  .list-main .cars .car:nth-child(3n) { border-right: 0; padding-right: 0; }
  .list-main .cars .car:nth-child(3n + 1) { padding-left: 0; }
}

/* ---------------------------------------------------------------- hover (ratón) */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--brand-2); }
  .btn-dark:hover { background: #333; }
  .btn-light:hover { background: var(--panel); }
  .btn-line:hover, .btn-soft:hover { background: var(--panel-2); }
  .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
  .btn-wa:hover { background: #1fbd5a; }
  .chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .chip.is-on:hover, .chip:has(input:checked):hover { background: #333; }
  .nav-links a:hover { color: var(--ink); }
  .page-home:not(.is-past-hero) .nav-links a:hover { color: #fff; }
  .nav-icon:hover { background: var(--panel-2); }
  .car:hover .car-media img { transform: scale(1.035); }
  .car:hover .car-title a { text-decoration: underline; text-underline-offset: 0.25rem; text-decoration-thickness: 1px; }
  .promo:hover img { transform: scale(1.04); }
  .promo-light:hover .promo-art { transform: translateY(-50%) rotate(-5deg); }
  .promo:hover .go i, .hero-tag:hover i, .more:hover i { transform: translateX(0.1875rem); }
  .finder-dark .finder-f:hover { background: rgba(255, 255, 255, .1); }
  .hero-tag:hover { color: #fff; }
  .finder-f:hover { background: var(--panel-2); }
  .footer-types a:hover { color: #fff; }
  .footer-types:hover a:not(:hover) { color: var(--on-dark-mute); }
  .faq summary:hover, .acc summary:hover { color: var(--mute); }
  .gal-btn:hover { background: var(--ink); color: #fff; }
  .gal-thumbs button:hover { opacity: 1; }
  .lb-btn:hover, .lb-close:hover { background: rgba(255, 255, 255, .28); }
  .day:hover, .slot:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .ficha-trade:hover { background: var(--panel); }
  .chat-quick button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .chat-icon-btn:hover { background: rgba(255, 255, 255, .12); }
}

/* ---------------------------------------------------------------- movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv-wait { transform: none; }
  .rv-run { transition: opacity 260ms var(--ease) var(--rv-d, 0ms) !important; }
  ::view-transition-group(*) { animation-duration: 0s; }
  .js .hero-bg img, .js .hero-in > *, .js .hero-foot > * { animation: fadeIn 300ms var(--ease) both; }
  .car:hover .car-media img, .promo:hover img { transform: none; }
  .menu, .menu > * { transform: none !important; }
  .is-loading::after { animation: none; transform: none; background: rgba(255, 255, 255, .25); }
  .mbar.is-away { transform: none; opacity: 0; pointer-events: none; }
  .msg, .booking-done h3::before, .lightbox[open] img { animation-name: fadeIn; }
  .typing i { animation: none; }
}


/* =============================================================================================
   v6 · pantallas completas, carril de coches, opiniones en movimiento y animaciones suaves
   En ordenador cada bloque de la portada ocupa una pantalla y se ve entero (de 1280 × 650 a 1920 × 1080);
   el scroll es libre (sin «imán» entre bloques: Oriol no lo quiere). Animaciones solo con transform y opacity.
   ============================================================================================= */
.screen { padding-block: var(--section); }

/* carril horizontal de coches (portada) */
.rail { position: relative; }
.rail-ui { display: flex; align-items: center; gap: 0.5rem; }
.rail-ui .more { margin-right: 0.625rem; }
.rail-btn { display: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); transition: background var(--dur), color var(--dur), box-shadow var(--dur), opacity var(--dur), transform 120ms var(--ease); }
.rail-btn:active { transform: scale(.92); }
.rail-btn svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn[disabled] { opacity: .3; pointer-events: none; }
.cars.cars-home { display: grid; grid-template-columns: none; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); border-top: 1px solid var(--line); cursor: grab; }
.cars-home::-webkit-scrollbar { display: none; }
.cars-home.is-drag { cursor: grabbing; scroll-snap-type: none; }
.cars-home.is-drag .car { pointer-events: none; }
.cars-home .car, .cars-home .car:nth-child(n) { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; padding-inline: 1.25rem; border-right: 1px solid var(--line); border-bottom: 0; scroll-snap-align: start; }
.cars-home .car:first-child { padding-left: 0; }
.cars-home .car-media img { -webkit-user-drag: none; user-select: none; }
.rail-bar { height: 2px; margin-top: var(--s3); border-radius: 2px; background: var(--line); overflow: hidden; }
.rail-bar i { display: block; height: 100%; width: 25%; border-radius: 2px; background: var(--ink); transform-origin: 0 50%; will-change: transform; }

/* opiniones: sección oscura, nota grande y dos filas de opiniones reales que se deslizan despacio */
.rv-sec { background: var(--dark); color: var(--on-dark-mute); overflow: hidden; }
.rv-sec .eyebrow { color: var(--on-dark-mute); }
.rv-sec .h2 { color: #fff; }
.rv-sec .h2 .tt { color: rgba(255, 255, 255, .4); }
.rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5) var(--s7); }
.rv-score { display: flex; align-items: center; gap: 1rem; color: #fff; }
.rv-score > b { color: #fff; font-size: clamp(3.5rem, 2.4rem + 3vw, 5.5rem); font-weight: 300; letter-spacing: -0.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.rv-score > span { display: grid; gap: 0.375rem; font-size: var(--fs-sm); color: var(--on-dark-mute); max-width: 17em; }
.rv-score > span i { font-style: normal; color: #fff; }
.rv-score .stars svg { width: 1.125rem; height: 1.125rem; }
.rv-score .stars-base, .rv .stars-base { color: rgba(255, 255, 255, .2); }
.rv-score .stars-fill, .rv .stars-fill { color: #fff; }
.rv-rows { display: grid; gap: 0.875rem; margin-top: var(--s6); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rv-row { overflow: hidden; }
.rv-track { display: flex; width: max-content; animation: rvMove 70s linear infinite; }
.rv-row-b .rv-track { animation-duration: 85s; animation-direction: reverse; }
.rv-row:hover .rv-track, .rv-row:focus-within .rv-track { animation-play-state: paused; }
@keyframes rvMove { to { transform: translateX(-50%); } }
.rv { display: flex; flex-direction: column; gap: 0.75rem; width: 18.75rem; margin: 0 0.875rem 0 0; padding: 1.25rem 1.375rem; border-radius: var(--r); background: var(--dark-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rv-txt { width: 23.75rem; }
.rv-wide { width: 27.5rem; }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; font-size: var(--fs-xs); color: var(--on-dark-mute); }
.rv blockquote { font-size: 1.125rem; line-height: 1.4; letter-spacing: -0.015em; color: #fff; }
.rv-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.rv-tags li { padding: 0.25rem 0.625rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); font-size: 0.7812rem; color: #fff; }
.rv figcaption { margin-top: auto; font-size: var(--fs-xs); color: var(--on-dark-mute); }
.rv figcaption b { font-weight: 500; color: #fff; }
.rv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .1); }
.rv-person { display: flex; align-items: center; gap: 0.875rem; max-width: 40em; }
.rv-person p { color: var(--on-dark-mute); }
.rv-person b { font-weight: 500; color: #fff; }
.rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.375rem; }
.rv-sec .more { color: #fff; }
.rv-sec :focus-visible { outline-color: #fff; }

/* así se compra + qué incluye, en una pantalla */
.buy-grid { display: grid; gap: var(--s7); }
.buy-steps .steps { margin: var(--s5) 0 var(--s5); }
.incl-t { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; }
.incl-sub { margin-top: 0.375rem; font-size: var(--fs-sm); color: var(--mute); }
.buy-grid .incl { display: block; }
.buy-grid .incl-list { margin-top: var(--s4); }
.buy-grid .incl-list li { padding: 0.75rem 0; }

/* animaciones del listado (las salidas las pone main.js) */
.active-chips .chip { animation: chipIn 260ms var(--ease-q) both; }
@keyframes chipIn { from { opacity: 0; transform: scale(.9); } }
.empty:not([hidden]) { animation: fadeUp 320ms var(--ease-q) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(0.5rem); } }
.count b { display: inline-block; }

/* ficha: lo que incluye, en una línea */
.incl-inline { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--text); }
.incl-inline li { display: inline-flex; align-items: center; gap: 0.3125rem; }
.incl-inline li::before { content: ""; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.5625rem no-repeat; }
.incl-inline li.is-aparte { color: var(--mute); }
.incl-inline li.is-aparte::before { background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f68' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 0.5625rem no-repeat; }

@media (max-width: 599px) {
  .promo-art { top: 1.125rem; right: 0.875rem; height: 9.375rem; transform: rotate(-8deg); }
  .promo-light:hover .promo-art { transform: rotate(-5deg); }
  .promo-light .promo-t { max-width: 7.4em; }
  .promo-light .promo-in { gap: var(--s5); }
}
@media (min-width: 600px) {
  .cars.cars-home { grid-auto-columns: 50%; }
  .rv-txt { width: 26.25rem; }
}
@media (min-width: 900px) {
  .rail-btn { display: grid; }
  .cars.cars-home { grid-auto-columns: 33.333%; }
  .buy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s8); align-items: center; }
  .buy-steps .steps { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .buy-steps .steps li { display: grid; grid-template-columns: 3.5rem 1fr; padding: 1rem 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .buy-steps .step-n { display: block; margin-bottom: 0; }
  .buy-steps .steps h3 { font-size: 1.25rem; }
  .buy-steps .steps p { margin-top: 0.25rem; font-size: var(--fs-sm); }
  .ficha-aside { top: var(--aside-top, calc(var(--header-h) + 1.25rem)); }
}
@media (min-width: 1180px) {
  .cars.cars-home { grid-auto-columns: 25%; }
}
@media (min-width: 1680px) {
  .cars.cars-home { grid-auto-columns: 20%; }
}

/* pantallas completas en ordenador */
@media (min-width: 900px) and (min-height: 560px) {
  html:has(> body.page-home) { scroll-padding-top: var(--header-h); }
  .page-home [id] { scroll-margin-top: 0; }
  .screen { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h)); padding-block: clamp(1.25rem, 4.4vh, 4rem); }
  .screen > .container { width: 100%; }
  .screen .section-head { margin-bottom: clamp(0.875rem, 3vh, 2rem); }
  .screen .h2 { font-size: min(var(--fs-h2), 6.6vh); }
  .screen .section-sub { margin-top: 0.375rem; }
  .cars-home .car { padding-block: clamp(0.75rem, 2.2vh, 1.375rem); }
  .cars-home .car-media { aspect-ratio: auto; height: clamp(8.125rem, 29vh - 1.875rem, 16.875rem); }
  .cars-home .car-title { margin-top: min(0.75rem, 1.4vh); }
  .cars-home .car-price { margin-top: min(0.875rem, 1.6vh); }
  .cars-home .car-btns { margin-top: min(1rem, 1.8vh); }
  .rv-rows { margin-top: clamp(1rem, 3.4vh, 2.5rem); }
  .rv-foot { margin-top: clamp(1rem, 3.4vh, 2.5rem); padding-top: clamp(0.875rem, 2.6vh, 1.75rem); }
  .rv { gap: 0.625rem; padding: clamp(0.75rem, 2vh, 1.125rem) 1.25rem; }
  .rv-txt { width: 28.75rem; }
  .rv:not(.rv-txt) { width: 21.875rem; }
  .rv.rv-wide { width: 33.125rem; }
  .rv blockquote { font-size: min(1.0625rem, 2.5vh); }
  .rv-tags li { padding: 0.1875rem 0.5625rem; font-size: 0.75rem; }
  .rv-rows { gap: 0.75rem; }
  .rv-score > b { font-size: min(5.5rem, 11vh); }
  .promos-sec .promos { height: min(38.75rem, calc(100svh - var(--header-h) - 2 * clamp(1.25rem, 4.4vh, 4rem))); }
  .promos-sec .promo { min-height: 0; }
  .promos-sec .promo-in { height: 100%; }
  .buy-steps .steps { margin-block: clamp(0.75rem, 2.6vh, 1.75rem); }
  .buy-grid .incl { padding: clamp(1.125rem, 3.4vh, 2.75rem) clamp(1.375rem, 3vw, 2.75rem); }
  .buy-grid .incl-list li { padding-block: clamp(0.5rem, 1.4vh, 0.875rem); }
  .faq summary { min-height: clamp(3rem, 8.4vh, 4.25rem); padding-block: clamp(0.5rem, 1.4vh, 0.875rem); }
  .alert-grid { padding-block: clamp(1.375rem, 4.4vh, 3rem); }
  .visit-grid .info-list li { padding-block: clamp(0.625rem, 1.8vh, 1rem); }
  .map-face { min-height: min(23.75rem, 52vh); }
}

/* pantallas bajas (portátiles con la barra del navegador): se aprieta un poco para que cada bloque siga entrando entero */
@media (min-width: 900px) and (min-height: 560px) and (max-height: 760px) {
  .cars-sec .section-sub { display: none; }
  .rv-head .eyebrow { display: none; }
  .rv-rows { margin-top: 0.875rem; }
  .rv-foot { margin-top: 0.875rem; padding-top: 0.75rem; }
  .visit-grid .cars-note { display: none; }
  .incl-sub { display: none; }
}
@media (min-width: 900px) and (min-height: 560px) and (max-height: 680px) {
  .buy-steps .steps p { font-size: 0.8125rem; }
  .buy-grid .incl-list span { font-size: 0.7812rem; }
  .buy-grid .incl-list li { padding-block: 0.375rem; }
  .rv-txt { width: 32.5rem; }
  .info-list small { display: none; }
  .cars-home .car-media { height: clamp(7.5rem, 27vh - 2.125rem, 16.875rem); }
}
@media (min-width: 900px) and (max-width: 1179px) and (min-height: 560px) {
  .rv-head { flex-wrap: nowrap; }
  .rv-score > b { font-size: min(4rem, 9vh); }
  .rv-score > span { font-size: var(--fs-xs); }
  .buy-steps .steps p { font-size: 0.8125rem; }
  .buy-grid .incl-list li { padding-block: 0.4375rem; }
  .buy-grid .incl-list span { font-size: 0.7812rem; }
  .buy-grid { gap: var(--s6); }
}

/* movimiento ligado al scroll (solo navegadores que lo admiten; sin JavaScript) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .hero-bg { animation: heroPar linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-in, .hero-foot { animation: heroOut linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
    @keyframes heroPar { to { transform: translateY(14%) scale(1.03); } }
    @keyframes heroOut { to { opacity: .15; transform: translateY(-36px); } }
  }
}

@media (hover: hover) and (pointer: fine) {
  .rail-btn:hover { background: var(--ink); color: #fff; box-shadow: none; }
  .rv:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-track { animation: none; }
  .rv-row { overflow-x: auto; scrollbar-width: none; }
  .rv[aria-hidden="true"] { display: none; }
  .active-chips .chip, .empty:not([hidden]) { animation: none; }
}