/* =========================================================================
   AgentCars · Front público (vanilla, themeable, mobile-first)
   Un solo archivo. Sin Bootstrap, sin jQuery. Poppins.
   Para white-label: cambiá las variables de :root (color, logo) por cliente.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Marca (esto es lo único que cambia por concesionaria) */
  --primary:      #EC0C0C;
  --primary-600:  #c90a0a;
  --primary-050:  #fdecec;

  /* Neutros */
  --ink:      #111214;   /* casi negro: header, footer, títulos */
  --ink-2:    #1c1e22;
  --body:     #2b2e33;
  --muted:    #6b7075;
  --line:     #e9e9ec;
  --soft:     #f5f5f7;
  --white:    #ffffff;

  --radius:   14px;
  --radius-sm:10px;
  --shadow:   0 1px 2px rgba(17,18,20,.04), 0 8px 30px rgba(17,18,20,.06);
  --shadow-lg:0 20px 60px rgba(17,18,20,.14);
  --container:1200px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--body); background:var(--white); line-height:1.6;
  font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,h5,h6{ margin:0 0 .4em; color:var(--ink); font-weight:700; line-height:1.2; letter-spacing:-.02em; }
p{ margin:0 0 1rem; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 22px; }
.section{ padding:84px 0; }
.section--soft{ background:var(--soft); }
.section--dark{ background:var(--ink); color:#c7c9ce; }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }
.center{ text-align:center; }
.grid{ display:grid; gap:24px; }

.sec_head{ max-width:640px; margin:0 auto 46px; text-align:center; }
.sec_head .eyebrow{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--primary); margin-bottom:12px;
}
.sec_head h2{ font-size:clamp(26px,3.4vw,40px); }
.sec_head p{ color:var(--muted); margin-bottom:0; }
.section--dark .sec_head p{ color:#9aa0a6; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15px; line-height:1; padding:14px 24px;
  border-radius:999px; border:1.5px solid transparent; transition:.2s var(--ease);
  white-space:nowrap;
}
.btn i,.btn span[class^="flaticon"]{ font-size:1.05em; }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 8px 22px rgba(236,12,12,.28); }
.btn--primary:hover{ background:var(--primary-600); transform:translateY(-2px); box-shadow:0 12px 28px rgba(236,12,12,.34); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:var(--soft); transform:translateY(-2px); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.btn--outline-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn--lg{ padding:16px 30px; font-size:16px; }
.btn--block{ width:100%; }

/* =========================================================================
   EFECTOS (scroll reveal + hero cinematográfico)
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }

/* Hero: zoom lento del fondo + entrada escalonada del contenido */
.hero_bg img{ animation:heroZoom 16s ease-out forwards; }
@keyframes heroZoom{ from{ transform:scale(1.14); } to{ transform:scale(1); } }
.hero_inner > *{ opacity:0; animation:heroUp .85s var(--ease) forwards; }
.hero_inner > .hero_badge{ animation-delay:.15s; }
.hero_inner > h1{ animation-delay:.28s; }
.hero_inner > .hero_sub{ animation-delay:.42s; }
.hero_inner > .hero_actions{ animation-delay:.56s; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
/* El buscador sube sobre el hero */
.searchbar{ opacity:0; animation:heroUp .8s var(--ease) .7s forwards; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero_bg img, .hero_inner > *, .searchbar{ animation:none; opacity:1; }
}

/* =========================================================================
   PRELOADER
   ========================================================================= */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .55s var(--ease), visibility .55s;
}
.preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.pl_inner{ text-align:center; width:300px; max-width:80vw; }
.pl_logo img{ height:54px; width:auto; margin:0 auto 30px; display:block; animation:pl_pulse 1.7s ease-in-out infinite; }
@keyframes pl_pulse{ 0%,100%{ opacity:.82; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-5px); } }
.pl_scene{ position:relative; height:52px; }
.pl_car{ position:absolute; left:50%; bottom:9px; transform:translateX(-50%); font-size:34px; line-height:1; animation:pl_bob .45s ease-in-out infinite; }
.pl_car span[class^="flaticon"]{ color:var(--primary); }
@keyframes pl_bob{ 0%,100%{ transform:translateX(-50%) translateY(0) rotate(0); } 50%{ transform:translateX(-50%) translateY(-3px) rotate(-1deg); } }
.pl_road{ position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.pl_road::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:200%;
  background:repeating-linear-gradient(90deg, var(--primary) 0 16px, transparent 16px 34px);
  animation:pl_move .5s linear infinite;
}
@keyframes pl_move{ to{ transform:translateX(-34px); } }
.pl_text{ margin-top:22px; color:#9aa0a6; font-size:13px; letter-spacing:.03em; }
.pl_text .dots::after{ content:""; animation:pl_dots 1.4s steps(4,end) infinite; }
@keyframes pl_dots{ 0%{ content:""; } 25%{ content:"·"; } 50%{ content:"··"; } 75%{ content:"···"; } 100%{ content:""; } }

/* =========================================================================
   HEADER
   ========================================================================= */
.site_header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:transparent; transition:.3s var(--ease);
}
.site_header.solid,.site_header.scrolled{
  background:var(--ink); box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:78px; transition:height .3s var(--ease);
}
.scrolled .nav{ height:66px; }
.nav_logo img{ height:40px; width:auto; transition:height .3s var(--ease); }
.scrolled .nav_logo img{ height:34px; }

/* Evita el flash del logo por defecto hasta resolver la concesionaria (tenant.js) */
.nav_logo img, .footer_logo img, .mobile_logo img, .nav_drawer_top img{ opacity:0; transition:opacity .25s ease, height .3s var(--ease); }
.pl_logo img{ visibility:hidden; }
html.tenant-ready .nav_logo img, html.tenant-ready .footer_logo img,
html.tenant-ready .mobile_logo img, html.tenant-ready .nav_drawer_top img{ opacity:1; }
html.tenant-ready .pl_logo img{ visibility:visible; }
.nav_menu{ display:flex; align-items:center; gap:34px; }
.nav_menu a{
  color:#eceef1; font-size:15px; font-weight:500; position:relative; padding:6px 0;
  transition:color .2s;
}
.nav_menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--primary); transition:width .25s var(--ease);
}
.nav_menu a:hover,.nav_menu a.active{ color:#fff; }
.nav_menu a:hover::after,.nav_menu a.active::after{ width:100%; }
.nav_cta{ display:flex; align-items:center; gap:14px; }
.nav_burger{
  display:none; width:44px; height:44px; border:none; background:transparent;
  color:#fff; font-size:22px; align-items:center; justify-content:center;
}

/* Drawer mobile */
.nav_drawer{
  position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background:var(--ink);
  z-index:80; transform:translateX(100%); transition:transform .32s var(--ease);
  padding:26px 24px; display:flex; flex-direction:column;
}
.nav_drawer.open{ transform:translateX(0); }
.nav_drawer_top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:34px; }
.nav_drawer_top img{ height:34px; }
.nav_drawer_close{ background:transparent; border:none; color:#fff; font-size:26px; }
.nav_drawer a{ color:#d7d9dd; font-size:18px; font-weight:500; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.nav_drawer a:hover{ color:#fff; }
.nav_drawer .btn{ margin-top:26px; }
.nav_overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:70; opacity:0;
  visibility:hidden; transition:.3s;
}
.nav_overlay.open{ opacity:1; visibility:visible; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative; min-height:640px; display:flex; align-items:center;
  color:#fff; padding:130px 0 70px; overflow:hidden;
  background:linear-gradient(180deg,#0d0e10,#17181c);
}
.hero_bg{ position:absolute; inset:0; z-index:0; }
.hero_bg img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(13,14,16,.94) 0%,rgba(13,14,16,.66) 55%,rgba(13,14,16,.4) 100%);
}
.hero .container{ position:relative; z-index:2; width:100%; }
.hero_inner{ max-width:680px; }
.hero_badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16); padding:7px 16px; border-radius:999px;
  font-size:13px; font-weight:500; margin-bottom:22px; backdrop-filter:blur(6px);
}
.hero_badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(236,12,12,.25); }
.hero h1{ color:#fff; font-size:clamp(32px,5.2vw,58px); font-weight:800; margin-bottom:18px; }
.hero h1 em{ color:var(--primary); font-style:normal; }
.hero_sub{ font-size:clamp(16px,2vw,19px); color:#c9ccd1; max-width:540px; margin-bottom:30px; }
.hero_actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Buscador */
.searchbar{
  position:relative; z-index:3; margin-top:-46px;
}
.searchbar_card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:22px; display:grid; gap:14px;
  grid-template-columns:1.2fr 1.2fr 1fr auto;
}
.searchbar_field{ display:flex; flex-direction:column; gap:6px; }
.searchbar_field label{ font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.searchbar_field select,.searchbar_field input{
  width:100%; height:50px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:0 14px; font-family:inherit; font-size:15px; color:var(--ink); background:#fff;
  transition:.2s; appearance:none;
}
.searchbar_field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7075' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; }
.searchbar_field select:focus,.searchbar_field input:focus{ border-color:var(--primary); outline:none; }
.searchbar .btn{ align-self:flex-end; height:50px; }

/* =========================================================================
   MARCAS
   ========================================================================= */
.brands{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.brand_chip{
  display:inline-flex; align-items:center; gap:9px; background:#fff; border:1.5px solid var(--line);
  border-radius:999px; padding:12px 22px; font-weight:600; font-size:15px; color:var(--ink);
  transition:.2s var(--ease);
}
.brand_chip:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow); }

/* =========================================================================
   CARDS de auto
   ========================================================================= */
.cars_grid{ grid-template-columns:repeat(4,1fr); }
.car_card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:.25s var(--ease);
}
.car_card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.car_thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--soft); }
.car_thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.car_card:hover .car_thumb img{ transform:scale(1.06); }
.car_tag{
  position:absolute; top:12px; left:12px; background:var(--primary); color:#fff;
  font-size:11px; font-weight:600; padding:5px 12px; border-radius:999px; letter-spacing:.03em;
}
.car_tag--sold{ background:var(--ink); }
.car_tag--consig{ top:auto; bottom:12px; left:12px; background:#0f8a4c; }
.cd_consig{ display:inline-block; margin-left:10px; vertical-align:middle; background:#0f8a4c; color:#fff; font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px; letter-spacing:.02em; }
.car_fav{
  position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:15px;
}
.car_body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.car_price{ color:var(--primary); font-size:20px; font-weight:700; line-height:1; margin-bottom:6px; }
.car_name{ font-size:16px; font-weight:600; color:var(--ink); margin-bottom:2px; }
.car_name a:hover{ color:var(--primary); }
.car_ver{ font-size:13px; color:var(--muted); margin-bottom:14px; }
.car_specs{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:auto; padding-top:14px;
  border-top:1px solid var(--line); font-size:13px; color:var(--muted);
}
.car_specs li{ display:inline-flex; align-items:center; gap:6px; }
.car_specs i,.car_specs span[class^="flaticon"]{ color:var(--primary); font-size:14px; }

/* Skeleton de carga de las cards (evita el flash del catálogo demo) */
.car_sk{ pointer-events:none; }
.car_sk:hover{ transform:none; box-shadow:var(--shadow); border-color:var(--line); }
.sk_shimmer{ display:block; background:linear-gradient(90deg,#eef0f2 25%,#e4e7eb 50%,#eef0f2 75%); background-size:200% 100%; animation:gal_sk 1.3s ease-in-out infinite; border-radius:6px; }
.car_sk .car_thumb .sk_shimmer{ width:100%; height:100%; border-radius:0; }
.sk_price{ width:38%; height:20px; margin-bottom:10px; }
.sk_title{ width:70%; height:16px; margin-bottom:8px; }
.sk_sub{ width:45%; height:13px; margin-bottom:16px; }
.sk_specs{ width:85%; height:13px; margin-top:auto; }
@media (prefers-reduced-motion: reduce){ .sk_shimmer{ animation:none; } }

/* =========================================================================
   FRANJA (banner CTA)
   ========================================================================= */
.strip{
  position:relative; color:#fff; padding:90px 0; text-align:center; overflow:hidden;
  background:var(--ink);
}
.strip_bg{ position:absolute; inset:0; z-index:0; }
.strip_bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.strip::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,14,16,.7),rgba(13,14,16,.86)); z-index:1; }
.strip .container{ position:relative; z-index:2; }
.strip h2{ color:#fff; font-size:clamp(26px,3.6vw,42px); max-width:760px; margin:0 auto 14px; }
.strip p{ color:#c9ccd1; max-width:560px; margin:0 auto 28px; }

/* =========================================================================
   FEATURES / por qué elegirnos
   ========================================================================= */
.features{ grid-template-columns:repeat(3,1fr); }
.feature{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; transition:.25s var(--ease); }
.feature:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.feature_ico{
  width:56px; height:56px; border-radius:14px; background:var(--primary-050); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:18px;
}
.feature h4{ font-size:19px; margin-bottom:8px; }
.feature p{ color:var(--muted); margin-bottom:0; font-size:15px; }

/* =========================================================================
   PASOS (cómo funciona la consignación)
   ========================================================================= */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; position:relative; }
.step .num{ width:46px; height:46px; border-radius:13px; background:var(--ink); color:#fff; font-weight:700; font-size:19px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.step h4{ font-size:17px; margin-bottom:8px; }
.step p{ color:var(--muted); font-size:14.5px; margin:0; }

/* =========================================================================
   0KM (grilla de modelos sin foto)
   ========================================================================= */
.zerokm_grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.zerokm_card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; transition:.25s var(--ease); }
.zerokm_card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:transparent; }
.zerokm_card .tag0{ align-self:flex-start; background:var(--primary); color:#fff; font-size:11px; font-weight:600; padding:4px 11px; border-radius:999px; letter-spacing:.05em; margin-bottom:14px; }
.zerokm_card h4{ font-size:19px; margin:0 0 3px; }
.zerokm_card .sub{ color:var(--muted); font-size:14px; margin-bottom:18px; }
.zerokm_card .btn{ margin-top:auto; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } .zerokm_grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } .zerokm_grid{ grid-template-columns:1fr; } }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site_footer{ background:var(--ink); color:#9aa0a6; padding:66px 0 0; }
.footer_grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; }
.footer_logo img{ height:46px; margin-bottom:18px; }
.footer_about{ font-size:14.5px; max-width:320px; }
.footer_col h5{ color:#fff; font-size:15px; font-weight:600; margin-bottom:20px; letter-spacing:.02em; }
.footer_col ul li{ margin-bottom:11px; }
.footer_col a{ font-size:14.5px; transition:color .2s; }
.footer_col a:hover{ color:var(--primary); }
.footer_contact li{ display:flex; gap:11px; margin-bottom:14px; font-size:14.5px; }
.footer_contact i,.footer_contact span[class^="flaticon"]{ color:var(--primary); font-size:16px; margin-top:2px; }
.footer_social{ display:flex; gap:11px; margin-top:6px; }
.footer_social a{
  width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; transition:.2s;
}
.footer_social a:hover{ background:var(--primary); transform:translateY(-3px); }
.footer_bottom{
  border-top:1px solid rgba(255,255,255,.08); padding:22px 0; display:flex;
  justify-content:space-between; align-items:center; gap:12px; font-size:13.5px; flex-wrap:wrap;
}
.footer_bottom a:hover{ color:#fff; }

/* =========================================================================
   WHATSAPP flotante
   ========================================================================= */
.wa_float{
  position:fixed; right:22px; bottom:22px; z-index:55; width:58px; height:58px;
  border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:28px; box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:.25s var(--ease); animation:wa_pulse 2.6s infinite;
}
.wa_float:hover{ transform:scale(1.08); color:#fff; }
@keyframes wa_pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* =========================================================================
   PAGE HEADER (listado / detalle)
   ========================================================================= */
.page_head{ background:var(--ink); color:#fff; padding:130px 0 46px; text-align:center; }
.page_head h1{ color:#fff; font-size:clamp(28px,4vw,44px); margin-bottom:8px; }
.crumbs{ font-size:14px; color:#9aa0a6; }
.crumbs a:hover{ color:#fff; }
.crumbs span{ color:var(--primary); }

/* =========================================================================
   LISTADO (filtros + grilla)
   ========================================================================= */
.listing_layout{ display:grid; grid-template-columns:288px 1fr; gap:32px; align-items:start; }
.filters{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  position:sticky; top:96px;
}
.filters h4{ font-size:17px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.filter_group{ margin-bottom:18px; }
.filter_group label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.filter_group select,.filter_group input{
  width:100%; height:46px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:0 13px; font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff; appearance:none;
}
.filter_group select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7075' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:32px; }
.filter_group select:focus,.filter_group input:focus{ border-color:var(--primary); outline:none; }
.listing_toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.listing_toolbar .count{ font-size:15px; color:var(--muted); }
.listing_toolbar .count b{ color:var(--ink); }
.cars_grid--3{ grid-template-columns:repeat(3,1fr); }
.empty_state{ text-align:center; padding:70px 20px; color:var(--muted); }
.empty_state .flaticon-car,.empty_state i{ font-size:44px; color:var(--line); display:block; margin-bottom:14px; }
.filters_toggle{ display:none; }

/* =========================================================================
   DETALLE
   ========================================================================= */
.detail_layout{ display:grid; grid-template-columns:1fr 380px; gap:38px; align-items:start; }
.gallery_main{ border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; background:var(--soft); border:1px solid var(--line); }
.gallery_main img{ width:100%; height:100%; object-fit:cover; }
/* Placeholder de carga neutro (evita el flash de la foto demo con los píxeles) */
.gallery_skeleton{ width:100%; height:100%; background:linear-gradient(90deg,#eef0f2 25%,#e4e7eb 50%,#eef0f2 75%); background-size:200% 100%; animation:gal_sk 1.3s ease-in-out infinite; }
@keyframes gal_sk{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){ .gallery_skeleton{ animation:none; } }
.gallery_thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:12px; }
.gallery_thumbs img{ aspect-ratio:4/3; object-fit:cover; border-radius:10px; cursor:pointer; border:2px solid transparent; opacity:.7; transition:.2s; }
.gallery_thumbs img:hover,.gallery_thumbs img.on{ opacity:1; border-color:var(--primary); }
.detail_block{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-top:26px; }
.detail_block h3{ font-size:20px; margin-bottom:18px; }
.specs_grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
.specs_grid li{ display:flex; justify-content:space-between; gap:12px; padding:13px 4px; border-bottom:1px solid var(--line); font-size:14.5px; }
.specs_grid li .k{ color:var(--muted); }
.specs_grid li .v{ color:var(--ink); font-weight:600; text-align:right; }
.detail_desc p{ color:var(--body); }
/* Sidebar precio */
.buy_card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:sticky; top:96px; box-shadow:var(--shadow); }
.buy_card .b_name{ font-size:22px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.buy_card .b_ver{ font-size:14px; color:var(--muted); margin-bottom:18px; }
.buy_card .b_price{ font-size:32px; font-weight:800; color:var(--primary); line-height:1; margin-bottom:4px; letter-spacing:-.02em; }
.buy_card .b_price_lbl{ font-size:13px; color:var(--muted); margin-bottom:22px; }
.buy_card .b_actions{ display:grid; gap:11px; margin-bottom:22px; }
.buy_seller{ border-top:1px solid var(--line); padding-top:18px; font-size:14px; }
.buy_seller .s_name{ font-weight:600; color:var(--ink); }
.buy_seller .s_tel{ color:var(--muted); margin-top:4px; display:flex; align-items:center; gap:7px; }
.buy_seller .s_tel span[class^="flaticon"],.buy_seller .s_tel i{ color:var(--primary); }

/* =========================================================================
   NOSOTROS / CONTACTO
   ========================================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.split img{ border-radius:var(--radius); box-shadow:var(--shadow); width:100%; }
.split .eyebrow{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:12px; }
.split h2{ font-size:clamp(24px,3vw,36px); margin-bottom:16px; }
.split p{ color:var(--muted); }
.stats_row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat_box{ text-align:center; padding:14px; }
.stat_box .n{ font-size:clamp(30px,4vw,44px); font-weight:800; color:var(--primary); line-height:1; letter-spacing:-.02em; }
.stat_box .l{ font-size:14px; color:var(--muted); margin-top:8px; }

.contact_grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:38px; align-items:start; }
.info_card{ display:flex; gap:16px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:16px; }
.info_card .ico{ width:48px; height:48px; flex:none; border-radius:12px; background:var(--primary-050); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:20px; }
.info_card h5{ font-size:16px; margin-bottom:4px; }
.info_card p,.info_card a{ color:var(--muted); font-size:14.5px; margin:0; }
.info_card a:hover{ color:var(--primary); }
.contact_form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.form_row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form_field{ margin-bottom:16px; }
.form_field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.form_field input,.form_field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:13px 14px;
  font-family:inherit; font-size:15px; color:var(--ink); background:#fff; transition:.2s;
}
.form_field textarea{ min-height:130px; resize:vertical; }
.form_field input:focus,.form_field textarea:focus{ border-color:var(--primary); outline:none; }
.map_wrap{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); line-height:0; }
.map_wrap iframe{ width:100%; height:360px; border:0; }
/* Varias sucursales: mapas lado a lado */
.map_grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:20px; }
.map_grid .map_wrap iframe{ height:320px; }
/* Lista de sucursales en la tarjeta de contacto */
.suc_list{ display:flex; flex-direction:column; gap:12px; }
.suc_item{ display:flex; flex-direction:column; line-height:1.35; }
.suc_item strong{ color:var(--ink); font-size:14.5px; font-weight:600; }
.suc_item span{ color:var(--muted); font-size:14px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1100px){
  .cars_grid{ grid-template-columns:repeat(3,1fr); }
  .footer_grid{ grid-template-columns:1.4fr 1fr 1.2fr; }
  .footer_col--links:nth-child(3){ display:none; }
}
@media (max-width:900px){
  .nav_menu{ display:none; }
  .nav_cta .btn--login{ display:none; }
  .nav_burger{ display:flex; }
  .searchbar_card{ grid-template-columns:1fr 1fr; }
  .searchbar .btn{ grid-column:1/-1; }
  .listing_layout{ grid-template-columns:1fr; }
  .filters{ position:static; }
  .filters_toggle{
    display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
    padding:12px 18px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
    background:#fff; font-weight:600; color:var(--ink); width:100%; justify-content:center;
  }
  .filters.collapsed{ display:none; }
  .detail_layout{ grid-template-columns:1fr; }
  .buy_card{ position:static; }
  .features{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:30px; }
  .contact_grid{ grid-template-columns:1fr; gap:28px; }
  .stats_row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .section{ padding:58px 0; }
  .form_row{ grid-template-columns:1fr; }
  .cars_grid,.cars_grid--3{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .hero{ min-height:auto; padding:120px 0 50px; text-align:left; }
  .searchbar{ margin-top:-30px; }
  .searchbar_card{ grid-template-columns:1fr; padding:18px; }
  .footer_grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .footer_col--links:nth-child(3){ display:block; }
  .footer_about{ grid-column:1/-1; }
  .footer_bottom{ justify-content:center; text-align:center; }
  .specs_grid{ grid-template-columns:1fr; }
  .gallery_thumbs{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:460px){
  .cars_grid,.cars_grid--3{ grid-template-columns:1fr; }
  .features{ grid-template-columns:1fr; }
  .footer_grid{ grid-template-columns:1fr; }
  .car_thumb{ aspect-ratio:16/10; }
  .hero h1{ font-size:30px; }
  .wa_float{ width:52px; height:52px; font-size:25px; right:16px; bottom:16px; }
}

/* ===== Mobile: que ningún texto largo (emails, URLs) rompa el layout ===== */
.info_card a, .info_card p, .info_card h5,
.foot_col a, .foot_col p, [data-tenant="email"], [data-tenant="direccion"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== Feed de Instagram (home) ===== */
.ig_sec{ padding:66px 0 74px; background:var(--soft); }
.ig_sec[hidden]{ display:none; }
.ig_head{ text-align:center; margin-bottom:30px; }
.ig_kicker{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; padding:7px 15px; border-radius:999px; background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#bc1888); }
.ig_kicker i{ font-size:14px; }
.ig_title{ margin:14px 0 6px; font-size:clamp(24px,3.2vw,34px); font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.ig_user{ display:inline-block; color:var(--primary); font-weight:600; font-size:15px; }
.ig_user:hover{ text-decoration:underline; }
.ig_grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ig_item{ position:relative; display:block; aspect-ratio:1; border-radius:16px; overflow:hidden; background:#e9eaee; box-shadow:0 1px 2px rgba(17,18,20,.05),0 10px 26px rgba(17,18,20,.06); }
.ig_item img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.ig_item:hover img{ transform:scale(1.07); }
.ig_ov{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; background:rgba(17,18,20,.32); opacity:0; transition:opacity .2s var(--ease); }
.ig_item:hover .ig_ov{ opacity:1; }
.ig_badge{ position:absolute; top:9px; right:11px; color:#fff; font-size:12px; text-shadow:0 1px 4px rgba(0,0,0,.5); z-index:2; }
@media (max-width:900px){ .ig_grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .ig_grid{ grid-template-columns:repeat(2,1fr); gap:10px; } .ig_sec{ padding:48px 0 54px; } }

/* ===== Pestañas de categoría (listado) ===== */
.cat_tabs{ display:flex; gap:9px; margin:0 0 20px; flex-wrap:wrap; }
.cat_tab{ border:1.5px solid var(--line); background:#fff; color:var(--ink); font-family:inherit; font-weight:600; font-size:14px; padding:9px 18px; border-radius:999px; cursor:pointer; transition:.16s var(--ease); white-space:nowrap; }
.cat_tab:hover{ border-color:var(--ink); }
.cat_tab.is-active{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 6px 16px rgba(236,12,12,.24); }
@media (max-width:600px){
  .cat_tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; }
  .cat_tabs::-webkit-scrollbar{ display:none; }
  .cat_tab{ flex:none; font-size:13.5px; padding:8px 15px; }
}