:root{--bg:#fff;--text:#111;--muted:#666;--line:#e7e7e7}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:#111;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:28px 16px}
.top{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:10px 16px;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{width:40px;height:40px;border-radius:8px;object-fit:contain}
.top nav a{margin:0 10px;color:#111}
.top nav a:hover{opacity:.7}
.btn{background:#111;color:#fff;padding:10px 16px;border:0;border-radius:999px;font-weight:600}
.btn-outline{border:1px solid var(--line);padding:10px 16px;border-radius:999px;background:#fff}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.hero-copy h1{font-size:32px;margin:0 0 12px}
.hero-art .hero-car{width:100%;max-height:420px;object-fit:contain;border-radius:16px;background:#fff;border:1px solid var(--line)}

/* Benefits row (pills) */
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:10px}
.benefit{background:#fafafa;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:#333;text-align:center}
@media (max-width:980px){ .benefits{grid-template-columns:1fr} }

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cards.one{grid-template-columns:1fr}
.card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.card .media{height:240px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);background:#fff}
.card .media img{max-height:220px;width:100%;object-fit:contain}
.card .body{padding:12px}
.title{font-weight:700}
.meta{color:var(--muted);font-size:14px}
.price{font-weight:700;margin-top:6px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{background:#f2f2f3;border:1px solid #e5e5e7;padding:3px 8px;border-radius:999px;font-size:12px;color:#333}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form input,.form textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px}
.filters{display:flex;gap:10px;margin:12px 0}
.empty{padding:14px;color:var(--muted)}
.detalle{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.gallery-main{border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;height:460px}
.gallery-main img{max-height:440px;width:100%;object-fit:contain}
.gallery-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:8px}
.gallery-thumbs img{width:100%;height:96px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.specs{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.specs table{width:100%;border-collapse:collapse}
.specs td{padding:6px 6px;border-bottom:1px solid #f0f0f0}
.photos-manager .thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.photos-manager .thumb{position:relative}
.photos-manager img{width:110px;height:90px;object-fit:cover;border:1px solid var(--line);border-radius:8px}
.thumb .tools{position:absolute;bottom:4px;left:4px;right:4px;display:flex;gap:4px;justify-content:space-between}
.thumb .tools button{font-size:11px;padding:2px 6px;border-radius:8px;border:1px solid #ddd;background:#fff}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:50}
.lightbox img{max-width:92vw;max-height:88vh}
.lb-close,.lb-prev,.lb-next{position:fixed;background:#fff;border:0;border-radius:999px;width:38px;height:38px;font-size:24px;display:flex;align-items:center;justify-content:center}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px}
.lb-next{right:16px}
.foot{margin-top:32px;border-top:1px solid var(--line);background:#fafafa}
.foot .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.copy{text-align:center;color:#888;padding:8px 0}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#111;color:#fff;padding:8px 12px;border-radius:999px;opacity:0;transition:.3s}
.toast.show{opacity:1}
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .grid.two,.grid.three{grid-template-columns:1fr}
  .detalle{grid-template-columns:1fr}
  .gallery-main{height:360px}
  .gallery-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* --- ICR PATCH: fix Ver ficha + price spacing (do not overlap) --- */
.card .body .price { margin-top: 6px; }
.card .body .actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.card .body .actions .btn, 
.card .body .actions .btn-outline { position: static; }



/* ===== Smooth baseline & page transitions ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
body.page-enter{opacity:0; transform:translateY(8px); filter:saturate(0.98);}
body.page-enter.page-enter-active{opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1), filter .5s;}
body.page-exit{opacity:1; transform:none}
body.page-exit.page-exit-active{opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease}

/* Reveal-up utility */
.reveal-up{transform:translateY(22px); opacity:.001; will-change:transform,opacity; transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s cubic-bezier(.22,.61,.36,1)}
.reveal-up.in-view{transform:none; opacity:1}

/* Subtle image float */
.card .media img, .gallery-main img{transition:transform .6s cubic-bezier(.22,.61,.36,1), filter .6s; will-change:transform}
.card:hover .media img{transform:scale(1.02)}

/* Lightbox polish + flash fix */
.lightbox{backdrop-filter: blur(2px)}
[hidden]{display:none !important}
.lightbox[hidden]{display:none !important}

/* Hide-on-scroll header */
.top{transition:transform .3s ease}
.top--hidden{transform:translateY(-110%)}

/* Cookie banner */
#cookie-banner{position:fixed;left:0;right:0;bottom:0;background:#111;color:#fff;padding:12px;display:flex;gap:12px;align-items:center;z-index:60}
#cookie-banner .msg{flex:1}
#cookie-banner .btns button{border:0;border-radius:8px;padding:8px 12px;margin-left:6px}
#cookie-banner[hidden]{display:none}

/* Subtle legal links in footer */
.legal-links{
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  opacity: .7;
}
.legal-links a{
  color: inherit;
  text-decoration: none;
  padding: 0 2px;
}
.legal-links a:hover{ text-decoration: underline; opacity: .95; }
@media (min-width: 800px){
  .legal-links{ font-size: 11.5px; }
}

/* Instagram button */
.nav-actions{ margin-left:auto; display:flex; align-items:center; gap:8px }
.nav-ig{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; text-decoration:none;
         background: var(--text, #111); color: var(--bg,#fff); font-weight:500; font-size:14px; line-height:1 }
.nav-ig:hover{ opacity:.9 }
.nav-ig svg{ display:block }
@media (max-width: 760px){
  .nav-ig span{ display:none }
  .nav-ig{ padding:8px }
}

/* === Apple-like top bar + Instagram button === */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(22,22,23,.84);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .wrap, .site-header{ display: flex; align-items: center; gap: 16px; min-height: 48px; }
.site-header .site-nav{ display:flex; align-items:center; justify-content:center; gap: clamp(14px, 3vw, 28px); margin: 0 auto; }
.site-header a, .site-header nav a{ color: #f5f5f7; text-decoration: none; font-weight: 500; }
.site-header a:hover{ color:#fff; }
.site-header .brand, .site-header .logo{ color:#fff }
.nav-actions{ margin-left: auto; display:flex; align-items:center; gap:10px }

/* Instagram circular gradient button */
.nav-ig{
  width: 34px; height: 34px; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: radial-gradient(45% 45% at 30% 30%, #FEDA77 0%, #F58529 25%, #DD2A7B 55%, #8134AF 78%, #515BD4 100%);
  color:#fff; text-decoration:none; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.nav-ig:hover{ transform: translateY(-1px) scale(1.04); box-shadow: 0 6px 18px rgba(17,17,17,.35); filter: saturate(1.1); }
.nav-ig span{ display:none } /* icon-only by default */
.nav-ig svg{ width:18px; height:18px; color:#fff }
@media (min-width: 960px){
  /* On wide screens, show label next to a pill if desired */
  .nav-ig{ border-radius: 999px; padding: 0 12px; width:auto; height:32px; gap:8px }
  .nav-ig span{ display:inline; font-weight:600 }
  .nav-ig svg{ width:16px; height:16px }
}

/* Push page content below sticky header if needed */
.site-header + *{ scroll-margin-top: 56px }
body{ padding-top: env(safe-area-inset-top, 0px); }

/* === Cookie consent (minimal) === */
.cookie-banner{
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  background: #fff; color:#111; border:1px solid rgba(0,0,0,.08);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display:flex; gap:12px; align-items:center; padding:12px 14px;
  max-width: 860px; margin: 0 auto;
}
.cookie-banner p{ margin:0; font-size: 14px; line-height:1.4; flex:1 }
.cookie-actions{ display:flex; gap:8px; flex-wrap:wrap }
.cookie-btn{ appearance:none; border-radius:999px; padding:8px 14px; font-weight:600; font-size:14px; cursor:pointer; border:1px solid rgba(0,0,0,.1); background:#f5f5f7 }
.cookie-btn.primary{ background:#111; color:#fff; border-color:#111 }
.cookie-btn:hover{ opacity:.92 }
@media (max-width:640px){
  .cookie-banner{ flex-direction:column; align-items:flex-start; padding:12px }
  .cookie-actions{ width:100% }
}

/* Smooth page transitions + hidden reload */
body{ transition: opacity .18s ease; }
html.is-leaving body{ opacity: 0; }
html.is-reloading body{ opacity: 0; background: var(--bg, #fff); }
@media (prefers-reduced-motion: reduce){
  body{ transition: none !important; }
  html.is-leaving body, html.is-reloading body{ opacity: 1 !important; }
}

/* WhatsApp button (brand style) */
.nav-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:32px; padding:0 12px; border-radius:999px; text-decoration:none; color:#fff; font-weight:600;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.nav-wa:hover{ transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 18px rgba(0,0,0,.32); filter: saturate(1.05); }
.nav-wa svg{ width:16px; height:16px; color:#fff }
@media (max-width: 760px){
  .nav-wa span{ display:none }
  .nav-wa{ width:34px; height:34px; padding:0; border-radius:50% }
}
/* Space with IG button */
.nav-actions{ display:flex; align-items:center; gap:8px }

/* === Social chips: Apple-like glass pill with brand badge === */
.nav-actions{ display:flex; align-items:center; gap:10px }

.nav-social{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  height:32px; padding:0 12px 0 40px; border-radius:999px;
  text-decoration:none; color:#fff; font-weight:600; line-height:1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.18);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.nav-social:hover{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 26px rgba(0,0,0,.26); filter:saturate(1.05) }
.nav-social:active{ transform: translateY(0) scale(.98) }
.nav-social span{ white-space:nowrap }

/* brand badge (left) */
.nav-social::before{
  content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
/* place SVG over the badge */
.nav-social svg{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:#fff; pointer-events:none;
}

/* brand-specific badge fills */
.nav-ig::before{
  background: radial-gradient(45% 45% at 30% 30%, #FEDA77 0%, #F58529 25%, #DD2A7B 55%, #8134AF 78%, #515BD4 100%);
}
.nav-wa::before{
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

/* compact on mobile: icon-only */
@media (max-width: 760px){
  .nav-social{ width:36px; height:36px; padding:0; }
  .nav-social span{ display:none }
  .nav-social::before{ left:6px; width:24px; height:24px }
  .nav-social svg{ left:10px; width:16px; height:16px }
}

/* === Encargo Slider (Apple-like) === */
.encargo{ margin-top: clamp(24px, 6vw, 64px); }
.encargo-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 12px; }
.encargo-head h2{ margin:0; font-size: clamp(20px, 2.4vw, 28px) }
.encargo-head p{ margin:0; opacity:.8 }
.encargo-slider{
  position:relative; border-radius:18px; overflow:hidden;
  background: linear-gradient(180deg, #f5f5f7 0%, #ededf0 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  aspect-ratio: 16/7; /* responsive height */
}
.encargo-slides{ position:absolute; inset:0; }
.encargo-slide{ position:absolute; inset:0; opacity:0; transform: scale(1.01); transition: opacity .6s ease, transform .6s ease; display:flex; align-items:center; justify-content:center; }
.encargo-slide img{ width:100%; height:100%; object-fit: contain; display:block; }
.encargo-slide.is-active{ opacity:1; transform: scale(1.0); }

.encargo-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:6px; }
.encargo-dots button{ width:24px; height:6px; border-radius:999px; border:none; background: rgba(0,0,0,.15); overflow:hidden; position:relative; cursor:pointer; }
.encargo-dots button .bar{ position:absolute; left:0; top:0; bottom:0; width:0%; background: rgba(0,0,0,.6); transition: width .2s linear; }
.encargo-dots button.is-active .bar{ width:100%; }

.encargo-prev, .encargo-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(255,255,255,.75); box-shadow: 0 2px 8px rgba(0,0,0,.2);
  font-size:24px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.encargo-prev{ left:10px } .encargo-next{ right:10px }
.encargo-prev:hover, .encargo-next:hover{ background:#fff }

@media (max-width: 860px){
  .encargo-slider{ aspect-ratio: 16/10; }
}

/* --- Slider controls fix --- */
.encargo-prev, .encargo-next{ z-index: 5; pointer-events:auto; }
.encargo-dots{ z-index: 4; }
.encargo-dots button{ background: rgba(0,0,0,.22); }

/* === Pedir vehículo form === */
.pedir-head{ margin: clamp(12px,3vw,24px) 0; }
.pedir-form{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding: clamp(12px,3vw,24px); box-shadow: 0 10px 30px rgba(0,0,0,.06) }
.pedir-form fieldset{ border:none; padding:0; margin:0 0 16px }
.pedir-form legend{ font-weight:700; margin-bottom:8px; }
.pedir-form .grid{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.pedir-form label{ display:flex; flex-direction:column; gap:6px; font-weight:600; }
.pedir-form input, .pedir-form select, .pedir-form textarea{
  border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:10px 12px; font:inherit; background:#fafafa;
}
.pedir-form textarea{ resize:vertical }
.pedir-form .equip{ margin-top:8px }
.pedir-form .equip summary{ cursor:pointer; font-weight:600 }
.pedir-form .equip .checks{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; padding-top:8px }
.pedir-form .consent{ display:flex; align-items:center; gap:10px; font-weight:500; margin-top:8px }
.pedir-form .actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap }
@media (max-width: 760px){
  .pedir-form .grid{ grid-template-columns: 1fr; }
}

/* === Zuletzt verkauft === */
.sold{ margin: clamp(28px,6vw,64px) auto; }
.sold-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px }
.sold-head h2{ margin:0; font-size: clamp(20px,2.4vw,28px) }
.sold-head p{ margin:0; opacity:.75 }
.sold-grid{ display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.sold-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:10px; box-shadow: 0 8px 20px rgba(0,0,0,.05); transition: transform .14s ease, box-shadow .14s ease }
.sold-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.08) }
.sold-figure{ position:relative; aspect-ratio: 16/9; border-radius:10px; overflow:hidden; background:#f5f5f7 }
.sold-figure img{ width:100%; height:100%; object-fit: contain; display:block }
.sold-badge{
  position:absolute; left:10px; top:10px; padding:6px 10px; border-radius:999px; font-weight:800; letter-spacing:.04em;
  background: linear-gradient(135deg, #111, #444); color:#fff; font-size:12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.sold-card h3{ margin:10px 4px 2px; font-size:16px }
.sold-card small{ margin:0 4px 6px; display:block; opacity:.7 }
@media (max-width: 980px){ .sold-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .sold-grid{ grid-template-columns: 1fr; } }