/* DeAutos.com — Argentine marketplace
   Palette: celeste argentino (#74ACDF), sol amarillo (#FCBF49), azul profundo (#0B2A4A)
*/
:root{
  --ar-blue:#74ACDF;
  --ar-blue-2:#5A95CC;
  --ar-blue-deep:#0B2A4A;
  --ar-yellow:#FCBF49;
  --ar-yellow-2:#F4A52A;
  --white:#FFFFFF;
  --bg:#F5F8FC;
  --line:#E3EAF2;
  --text:#0F1B2D;
  --muted:#6B7A8F;
  --green:#1EA672;
  --red:#E5484D;
  --shadow: 0 4px 14px rgba(11,42,74,.08);
  --shadow-hover: 0 10px 28px rgba(11,42,74,.14);
  --radius:14px;
  --radius-sm:8px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.45;
}
a{color:var(--ar-blue-deep);text-decoration:none}
a:hover{color:var(--ar-blue-2)}
button{font-family:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden}

/* ---------- Trust strip (above topbar) ---------- */
.trust-strip{
  background: linear-gradient(90deg, var(--ar-blue-deep), #143862);
  color:#E8F0F8;
  font-size:12.5px;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.trust-strip-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:8px 20px;
}
.trust-strip-inner > span{display:inline-flex; align-items:center; gap:6px}
.trust-strip-inner svg{color:var(--ar-yellow); flex-shrink:0}
.trust-phone{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  color:#fff; font-weight:700;
  padding:3px 10px; border-radius:6px;
  background: rgba(37, 211, 102, .18); border:1px solid rgba(37, 211, 102, .4);
}
.trust-phone:hover{background: rgba(37, 211, 102, .3); color:#fff}
.trust-phone svg{color:#25D366}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  box-shadow: 0 1px 0 rgba(11,42,74,.04);
}
.topbar-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:18px;
  padding:10px 20px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ar-blue-deep); line-height:1}
.brand-mark{display:inline-flex; flex-shrink:0}
.brand-text{display:flex; flex-direction:column; gap:2px}
.brand-name{font-weight:800; font-size:22px; color:var(--ar-blue-deep); line-height:1}
.brand-tld{color:var(--ar-blue-2); font-weight:700}
.brand-tag{font-size:11px; color:var(--muted); font-weight:500; line-height:1; letter-spacing:.2px}
.topnav{display:flex; gap:6px; margin-left:18px}
.topnav a{
  font-weight:600; color:var(--text);
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:8px;
}
.topnav a::before{
  width:16px; height:16px; flex-shrink:0;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  display:inline-block; content:"";
}
.topnav a[data-icon="buy"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 11l1-5h12l1 5M5 11h14v8H5zM7 19v2M17 19v2'/><circle cx='8.5' cy='14.5' r='1.5'/><circle cx='15.5' cy='14.5' r='1.5'/></svg>")}
.topnav a[data-icon="sell"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41L13.42 20.58a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z'/><line x1='7' y1='7' x2='7.01' y2='7'/></svg>")}
.topnav a[data-icon="finance"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>")}
.topnav a[data-icon="warranty"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l9 4v6c0 5-3.6 9.5-9 10-5.4-.5-9-5-9-10V6l9-4z'/></svg>")}
.topnav a[data-icon="help"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>")}
.topnav a[data-icon="news"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h12a2 2 0 012 2v12a2 2 0 002-2V8h-4'/><path d='M4 4v14a2 2 0 002 2h12'/><line x1='8' y1='10' x2='14' y2='10'/><line x1='8' y1='14' x2='14' y2='14'/></svg>")}
.topnav a:hover{color:var(--ar-blue-2); background:#F0F4FA}
.topbar-actions{margin-left:auto; display:flex; gap:10px; align-items:center}

/* Language switcher */
.lang-switch{position:relative}
.lang-toggle{
  background:transparent; border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; font-size:13px; font-weight:700; color:var(--ar-blue-deep);
  display:inline-flex; align-items:center; gap:6px;
}
.lang-toggle:hover{background:#F0F4FA}
.lang-menu{
  position:absolute; top:calc(100% + 6px); right:0;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow: 0 10px 28px rgba(11,42,74,.14);
  list-style:none; margin:0; padding:6px; min-width:170px;
  opacity:0; pointer-events:none; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  z-index:30;
}
.lang-switch.open .lang-menu{opacity:1; pointer-events:auto; transform: translateY(0)}
.lang-menu li{margin:0}
.lang-menu button{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:8px 10px; background:transparent; border:0;
  font-size:14px; color:var(--text); border-radius:8px; text-align:left;
}
.lang-menu button:hover{background:#F0F4FA}
.lang-menu button.active{background:#E2ECF7; color:var(--ar-blue-deep); font-weight:700}
.lang-menu button span{font-size:18px}

/* ---------- Auth modal ---------- */
.auth-modal{
  position:fixed; inset:0; background:rgba(11,42,74,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:50; padding:18px;
  opacity:0; transition:opacity .15s ease;
}
.auth-modal.open{opacity:1}
.auth-modal[hidden]{display:none}
.auth-card{
  background:#fff; border-radius:16px;
  width:100%; max-width:440px; max-height:92vh; overflow:auto;
  box-shadow: 0 20px 60px rgba(11,42,74,.35);
  position:relative; padding:28px;
}
.auth-close{
  position:absolute; top:10px; right:12px;
  width:32px; height:32px; border-radius:50%;
  background:transparent; border:0; color:var(--muted);
  font-size:24px; line-height:1; cursor:pointer;
}
.auth-close:hover{background:#F0F4FA; color:var(--ar-blue-deep)}
.auth-header{text-align:center; margin-bottom:18px}
.auth-logo{display:inline-flex; margin-bottom:8px}
.auth-header h2{margin:0 0 4px; color:var(--ar-blue-deep); font-size:20px}
.auth-header p{margin:0; color:var(--muted); font-size:14px}

.auth-tabs{
  display:grid; grid-template-columns: 1fr 1fr;
  background:#F0F4FA; border-radius:10px; padding:4px; margin-bottom:18px;
}
.auth-tabs button{
  background:transparent; border:0; padding:8px 12px;
  font-weight:700; font-size:14px; color:var(--muted);
  border-radius:8px; cursor:pointer; transition: all .15s ease;
}
.auth-tabs button.active{background:#fff; color:var(--ar-blue-deep); box-shadow: 0 1px 2px rgba(11,42,74,.08)}

.auth-pane .field{margin-bottom:10px}
.auth-row{
  display:flex; justify-content:space-between; align-items:center;
  margin:6px 0 12px; font-size:13px;
}
.auth-check{display:inline-flex; align-items:flex-start; gap:8px; color:var(--muted); font-size:13px}
.auth-check input{margin-top:2px; width:16px; height:16px; accent-color: var(--ar-blue)}
.auth-link{color:var(--ar-blue-2); font-weight:600}
.auth-link:hover{color:var(--ar-blue-deep)}
.auth-submit{width:100%; margin-top:6px}
.auth-footer-line{margin:14px 0 0; text-align:center; font-size:13.5px; color:var(--muted)}
.auth-footer-line a{color:var(--ar-blue-2); font-weight:700; margin-left:4px}
.auth-error{
  background:#FEEBEC; color:#A0181D;
  border:1px solid #F4C7CA; border-radius:8px;
  padding:8px 12px; font-size:13px; margin:8px 0;
}

/* ---------- User chip (logged-in topbar) ---------- */
.auth-slot{display:inline-flex; align-items:center}
.user-chip{position:relative}
.user-toggle{
  background:transparent; border:1px solid var(--line); border-radius:30px;
  padding:4px 12px 4px 4px; font-size:13px; font-weight:700; color:var(--ar-blue-deep);
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.user-toggle:hover{background:#F0F4FA}
.user-avatar{
  width:28px; height:28px; border-radius:50%;
  background:var(--ar-blue-deep); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800; letter-spacing:.3px;
}
.user-name{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.user-menu{
  position:absolute; top:calc(100% + 6px); right:0;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow: 0 10px 28px rgba(11,42,74,.14);
  list-style:none; margin:0; padding:6px; min-width:220px;
  opacity:0; pointer-events:none; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  z-index:25;
}
.user-chip.open .user-menu{opacity:1; pointer-events:auto; transform: translateY(0)}
.user-menu li{margin:0}
.user-menu-head{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:4px;
}
.user-menu-head strong{color:var(--ar-blue-deep); font-size:14px}
.user-menu-head span{color:var(--muted); font-size:12.5px}
.user-menu a, .user-menu button{
  display:block; width:100%; text-align:left;
  padding:8px 12px; background:transparent; border:0;
  font-size:14px; color:var(--text); border-radius:8px; cursor:pointer;
}
.user-menu a:hover, .user-menu button:hover{background:#F0F4FA; color:var(--ar-blue-deep)}
.user-menu button#logoutBtn{color:#A0181D}
.user-menu button#logoutBtn:hover{background:#FEEBEC}

/* RTL adjustments */
html[dir="rtl"] .topbar-actions{margin-left:0; margin-right:auto}
html[dir="rtl"] .topnav{margin-left:0; margin-right:18px}
html[dir="rtl"] .lang-menu{right:auto; left:0}
html[dir="rtl"] .lang-menu button{text-align:right}
html[dir="rtl"] .card-img .card-badges{left:auto; right:10px}
html[dir="rtl"] .pager{flex-direction:row-reverse}
html[dir="rtl"] body{font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif}
html[dir="rtl"] .user-menu{right:auto; left:0}
html[dir="rtl"] .user-menu a, html[dir="rtl"] .user-menu button{text-align:right}
html[dir="rtl"] .trust-phone{margin-left:0; margin-right:auto}

.btn{
  border:1px solid transparent; border-radius:10px;
  padding:10px 16px; font-weight:700; font-size:14px;
  transition: all .15s ease;
}
.btn-primary{background:var(--ar-blue-deep); color:#fff}
.btn-primary:hover{background:#143862}
.btn-ghost{background:transparent; color:var(--ar-blue-deep); border-color:var(--line)}
.btn-ghost:hover{background:#F0F4FA}
.btn-lg{padding:14px 22px; font-size:16px}
.btn-search{padding:12px 22px}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1200px 400px at 20% 0%, rgba(116,172,223,.35), transparent 60%),
    radial-gradient(900px 300px at 90% 10%, rgba(252,191,73,.18), transparent 60%),
    linear-gradient(180deg, #EAF3FB 0%, #F5F8FC 100%);
  border-bottom:1px solid var(--line);
}
.hero-inner{max-width:1240px; margin:0 auto; padding:48px 20px 36px}
.hero h1{font-size:42px; line-height:1.1; margin:0 0 12px; color:var(--ar-blue-deep); letter-spacing:-.5px}
.hero h1 .accent{color:var(--ar-blue-2)}
.hero-sub{color:var(--muted); font-size:17px; margin:0 0 24px; max-width:760px}
.hero-stats{display:flex; gap:28px; margin-top:22px; flex-wrap:wrap}
.hero-stats > div{display:flex; flex-direction:column}
.hero-stats strong{font-size:22px; color:var(--ar-blue-deep)}
.hero-stats span{color:var(--muted); font-size:13px}

/* ---------- Search ---------- */
.search{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.search-row{display:grid; grid-template-columns: repeat(5, 1fr) auto; gap:10px}
.search-row select, .search-row input{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; font-size:14px; color:var(--text);
  min-width:0;
}
.search-row select:focus, .search-row input:focus{outline:2px solid var(--ar-blue); outline-offset:1px}
.search-row-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; grid-template-columns:none}
.chip{
  background:#F0F4FA; color:var(--ar-blue-deep);
  border:1px solid transparent; border-radius:999px;
  padding:7px 14px; font-size:13px; font-weight:600;
}
.chip:hover{background:#E2ECF7}
.chip.active{background:var(--ar-blue-deep); color:#fff}

/* ---------- Listings ---------- */
.listings{max-width:1240px; margin:0 auto; padding:32px 20px 48px}
.listings-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; margin-bottom:18px; flex-wrap:wrap;
}
.listings h2{margin:0; font-size:24px; color:var(--ar-blue-deep)}
.listings-controls{display:flex; gap:10px; flex-wrap:wrap}
.listings-controls select{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; font-size:14px;
}

.grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
}
.loading{color:var(--muted); padding:40px; text-align:center; grid-column:1/-1}

/* ---------- Card ---------- */
.card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(11,42,74,.04);
  position:relative;
}
.card:hover{transform: translateY(-2px); box-shadow:var(--shadow-hover)}
.card-img{
  aspect-ratio: 16/10;
  background:#F0F4FA;
  position:relative; overflow:hidden;
}
.card-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease}
.card:hover .card-img img{transform:scale(1.045)}
.card-img .fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:22px; letter-spacing:.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.card-badges{position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap}
.badge{
  background:rgba(11,42,74,.85); color:#fff;
  padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700;
  letter-spacing:.3px;
}
.badge-seller{background:rgba(255,255,255,.95); color:var(--ar-blue-deep)}
.badge-good{background:var(--green)}
.badge-yellow{background:var(--ar-yellow); color:#3A2A00}

.card-body{padding:12px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1}
.card-toprow{display:flex; align-items:center; justify-content:space-between; min-height:22px}
.card-km{color:var(--muted); font-size:12.5px; font-weight:600}
.card-title{font-weight:700; font-size:16.5px; color:var(--text); margin:2px 0 0; line-height:1.25}
.card-version{color:var(--muted); font-size:13px; min-height:1.1em}
.card-meta{
  display:flex; gap:10px; color:var(--muted); font-size:12.5px;
  margin-top:4px; flex-wrap:wrap;
}
.card-meta span{display:inline-flex; align-items:center; gap:4px}
.card-price{
  margin-top:8px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.card-price .usd{font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.3px}
.card-price .mo-payment{font-size:12.5px; color:var(--green); font-weight:700}
.card-ars{font-size:12px; color:var(--muted)}
.card-dealer{
  display:flex; align-items:center; gap:6px;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dealer-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0}
.dealer-name{font-weight:700; color:var(--ar-blue-deep)}
.dealer-loc{overflow:hidden; text-overflow:ellipsis}
.card-loc{color:var(--muted); font-size:12px; margin-top:2px}

/* Deal badges — cars.com signature */
.deal-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:800; letter-spacing:.2px;
  padding:3px 9px; border-radius:5px;
}
.deal-great{background:#0C8A50; color:#fff}
.deal-good{background:#E8F8F0; color:#0A5436; border:1px solid #BDE7D2}

/* Favorite heart */
.fav-btn{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); border:0;
  display:flex; align-items:center; justify-content:center;
  color:#6B7A8F; cursor:pointer;
  box-shadow:0 1px 4px rgba(11,42,74,.18);
  transition: transform .12s ease, color .12s ease;
  z-index:2;
}
.fav-btn:hover{transform:scale(1.12); color:#E5484D}
.fav-btn.fav-on{color:#E5484D}

/* Photo count chip */
.img-count{
  position:absolute; bottom:8px; left:10px;
  background:rgba(11,42,74,.75); color:#fff;
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px;
}

/* ---------- Body-style browse row (cars.com) ---------- */
.bodystyle{background:#fff; border-bottom:1px solid var(--line)}
.bodystyle-inner{max-width:1240px; margin:0 auto; padding:26px 20px 22px}
.bodystyle h2{margin:0 0 14px; font-size:20px; color:var(--ar-blue-deep)}
.bodystyle-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:10px;
}
.bs-tile{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#fff; border:1.5px solid var(--line); border-radius:12px;
  padding:16px 8px 12px; cursor:pointer;
  color:var(--ar-blue-deep); font-weight:700; font-size:13px;
  transition: all .14s ease;
}
.bs-tile svg{color:var(--ar-blue-2)}
.bs-tile:hover{border-color:var(--ar-blue); background:#F5FAFF; transform:translateY(-2px); box-shadow:0 6px 16px rgba(11,42,74,.10)}
.bs-tile.active{border-color:var(--ar-blue-deep); background:var(--ar-blue-deep); color:#fff}
.bs-tile.active svg{color:var(--ar-yellow)}
.card-cta{
  margin-top:12px; display:flex; gap:8px;
}
.card-cta .btn{flex:1; padding:9px 12px; font-size:13px}
.card-cta .btn-link{background:transparent; color:var(--ar-blue-2); border-color:transparent}

/* ---------- AdSense slots ---------- */
.ad-slot{
  max-width:1240px; margin:24px auto; padding:0 20px;
  text-align:center;
}
.ad-slot-banner{margin-top:32px; margin-bottom:8px}
.ad-slot .adsbygoogle{min-height:120px; display:block; background:#F5F8FC; border-radius:12px}
.card-ad{
  display:flex; flex-direction:column; justify-content:center; align-items:stretch;
  padding:14px; background:#FAFBFD; min-height:280px;
  border:1px dashed var(--line);
}
.card-ad::before{
  content:'Publicidad'; display:block;
  font-size:10.5px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:8px;
  text-align:center;
}
.card-ad .adsbygoogle{background:transparent}

/* ---------- Pager ---------- */
.pager{display:flex; justify-content:center; gap:6px; margin-top:28px; flex-wrap:wrap}
.pager button{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; font-weight:600; color:var(--ar-blue-deep);
}
.pager button.active{background:var(--ar-blue-deep); color:#fff; border-color:var(--ar-blue-deep)}
.pager button:disabled{opacity:.5; cursor:not-allowed}

.finance-disclaimer{
  margin:18px auto 0; max-width:760px;
  text-align:center; color:var(--muted); font-size:11.5px; line-height:1.5;
}

/* ---------- Strip / CTA ---------- */
.strip{background:var(--ar-blue-deep); color:#fff; margin-top:24px}
.strip-inner{
  max-width:1240px; margin:0 auto; padding:28px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.strip h2{margin:0 0 4px; font-size:22px}
.strip p{margin:0; opacity:.85}
.strip .btn-primary{background:var(--ar-yellow); color:#3A2A00}
.strip .btn-primary:hover{background:var(--ar-yellow-2)}

/* ---------- Vender mi auto (sell form) ---------- */
.sell{
  background: linear-gradient(180deg, #EAF3FB 0%, #F5F8FC 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sell-inner{
  max-width:1240px; margin:0 auto; padding:48px 20px;
  display:grid; grid-template-columns: 5fr 7fr; gap:36px;
}
.sell-copy .kicker{
  display:inline-block; background:var(--ar-yellow); color:#3A2A00;
  font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.sell-copy h2{
  font-size:32px; line-height:1.15; margin:14px 0 12px;
  color:var(--ar-blue-deep); letter-spacing:-.4px;
}
.sell-copy > p{color:var(--muted); font-size:16px; margin:0 0 18px}
.sell-bullets{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.sell-bullets li{
  display:flex; align-items:flex-start; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:14px;
}
.sell-bullets li span{font-size:18px}

.sell-form{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.sell-form h3{margin:0 0 16px; color:var(--ar-blue-deep); font-size:20px}

.form-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.field span{font-weight:600; color:var(--ar-blue-deep)}
.field input, .field select, .field textarea{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:14px; color:var(--text); font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--ar-blue); outline-offset:1px;
}
.field-wide{grid-column: 1 / -1}
.field.check{flex-direction:row; align-items:flex-start; gap:8px}
.field.check input{margin-top:3px; width:16px; height:16px}
.field.check span{font-weight:400; color:var(--muted)}
.field input:invalid:not(:placeholder-shown), .field select:invalid:not(:focus){
  border-color:var(--red);
}

.divider{grid-column:1/-1; height:1px; background:var(--line); margin:6px 0}

.form-actions{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:16px;
}
.form-actions .btn-primary{background:var(--ar-yellow); color:#3A2A00; border-color:var(--ar-yellow)}
.form-actions .btn-primary:hover{background:var(--ar-yellow-2); border-color:var(--ar-yellow-2)}
.form-hint{color:var(--muted); font-size:12.5px}

.form-success{
  margin-top:14px; padding:14px;
  background:#E8F8F0; color:#0A5436;
  border:1px solid #BDE7D2; border-radius:10px; font-size:14px;
}
.form-success strong{color:#0A5436}

/* ---------- Cities (SEO) ---------- */
.cities{background:#fff; border-bottom:1px solid var(--line)}
.cities-inner{max-width:1240px; margin:0 auto; padding:36px 20px}
.cities h2{margin:0 0 4px; color:var(--ar-blue-deep); font-size:22px}
.cities-sub{color:var(--muted); margin:0 0 16px}
.cities-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:8px;
}
.cities-grid a{
  display:block; padding:10px 12px;
  background:#F0F4FA; border:1px solid var(--line); border-radius:10px;
  font-size:14px; color:var(--ar-blue-deep); font-weight:600;
}
.cities-grid a:hover{background:#E2ECF7; color:var(--ar-blue-deep)}

/* ---------- FAQ ---------- */
.faq{background:#F5F8FC; border-bottom:1px solid var(--line)}
.faq-inner{max-width:900px; margin:0 auto; padding:36px 20px}
.faq h2{color:var(--ar-blue-deep); margin:0 0 18px; font-size:24px; text-align:center}
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  margin-bottom:10px; padding:14px 18px; transition: box-shadow .15s ease;
}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{
  font-weight:700; color:var(--ar-blue-deep); cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+'; font-size:22px; color:var(--ar-blue-2); transition: transform .15s ease;
}
.faq details[open] summary::after{content:'−'}
.faq p{margin:10px 0 0; color:var(--text); line-height:1.5}

/* ---------- Features ---------- */
.features{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.features-inner{
  max-width:1240px; margin:0 auto; padding:36px 20px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:22px;
}
.features article{display:flex; flex-direction:column; gap:8px}
.ft-icon{
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.features h3{margin:6px 0 2px; color:var(--ar-blue-deep); font-size:16px}
.features p{margin:0; color:var(--muted); font-size:14px}

/* ---------- Footer ---------- */
.footer{background:#0B2A4A; color:#CFDBE8}

/* Brand chips strip across the top */
.footer-brands{background:#081F38; border-bottom:1px solid rgba(255,255,255,.06)}
.footer-brands-inner{
  max-width:1240px; margin:0 auto; padding:18px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.footer-brands-label{
  color:#9BB0C6; font-size:12px; letter-spacing:.4px; text-transform:uppercase; font-weight:700;
  flex-shrink:0;
}
.brand-chips{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.brand-chips li{
  background:rgba(255,255,255,.06); color:#E8F0F8;
  padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:600;
  border:1px solid rgba(255,255,255,.08);
  cursor:default;
}
.brand-chips li:hover{background:rgba(252,191,73,.15); color:var(--ar-yellow); border-color:rgba(252,191,73,.4)}

.footer-inner{
  max-width:1240px; margin:0 auto; padding:40px 20px 24px;
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:32px;
}
.footer-col{display:flex; flex-direction:column}
.footer h4{
  color:#fff; margin:0 0 10px; font-size:13px;
  letter-spacing:.4px; text-transform:uppercase; font-weight:700;
}
.footer a{display:flex; align-items:center; gap:6px; color:#CFDBE8; padding:5px 0; font-size:14px}
.footer a:hover{color:var(--ar-yellow)}
.brand-footer{margin-bottom:12px}
.brand-footer .brand-name{color:#fff; font-size:22px}
.brand-footer .brand-tld{color:var(--ar-yellow)}
.footer p{margin:8px 0; font-size:14px; color:#CFDBE8}
.footer .small{font-size:13px; opacity:.85; display:flex; align-items:center; gap:6px}
.footer .small a{display:inline; padding:0}

.footer-social{display:flex; gap:8px; margin-top:14px}
.footer-social a{
  width:34px; height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border-radius:50%;
  color:#CFDBE8;
}
.footer-social a:hover{background:var(--ar-yellow); color:var(--ar-blue-deep)}

/* Trust + payment strip */
.footer-trust{border-top:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02)}
.footer-trust-inner{
  max-width:1240px; margin:0 auto; padding:18px 20px;
  display:grid; grid-template-columns: 1.6fr 1.4fr 1fr; gap:24px;
}
.trust-block{display:flex; flex-direction:column; gap:8px}
.trust-label{color:#9BB0C6; font-size:11px; letter-spacing:.5px; text-transform:uppercase; font-weight:700}
.pay-icons{display:flex; flex-wrap:wrap; gap:6px}
.pay{
  background:#fff; color:#0B2A4A; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:6px; letter-spacing:.3px;
}
.pay-bank{background:rgba(255,255,255,.95)}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:14px 20px;
  max-width:1240px; margin:0 auto;
  color:#9BB0C6; font-size:12.5px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.footer-legal a{display:inline; color:#9BB0C6; padding:0}
.footer-legal a:hover{color:var(--ar-yellow)}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .topnav{display:none}
  .hero h1{font-size:32px}
  .search-row{grid-template-columns: 1fr 1fr; }
  .search-row .btn-search{grid-column: 1 / -1}
  .features-inner{grid-template-columns: repeat(2, 1fr)}
  .footer-inner{grid-template-columns: 1fr 1fr; gap:24px}
  .footer-trust-inner{grid-template-columns: 1fr; gap:16px}
  .sell-inner{grid-template-columns: 1fr; gap:24px}
  .cities-grid{grid-template-columns: repeat(2, 1fr)}
  .topnav a span{display:none}
  .brand-tag{display:none}
}
@media (max-width: 560px){
  .topbar-actions .btn-ghost{display:none}
  .hero-inner{padding:30px 16px 24px}
  .hero h1{font-size:26px}
  .search-row{grid-template-columns: 1fr}
  .hero-stats{gap:16px}
  .hero-stats strong{font-size:18px}
  .form-grid{grid-template-columns: 1fr}
  .sell-copy h2{font-size:24px}
  .cities-grid{grid-template-columns: 1fr}
  .trust-strip-inner{font-size:11.5px; gap:12px; padding:6px 16px}
  .trust-strip-inner > span:nth-child(n+3){display:none}
  .trust-phone{margin-left:0; margin-right:0}
  .footer-inner{grid-template-columns: 1fr}
  .footer-brands-inner{padding:14px 16px}
  .brand-chips li{font-size:11.5px; padding:4px 9px}
}

/* ---------- /perfil — Search profile page ---------- */
.profile-page{background:linear-gradient(180deg, #EAF3FB 0%, #F5F8FC 200px, #F5F8FC 100%); min-height:100vh}
.profile-main{max-width:920px; margin:0 auto; padding:40px 20px 60px}
.profile-hero{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:32px; margin-bottom:24px;
  box-shadow:0 4px 14px rgba(11,42,74,.08);
}
.profile-hero-inner{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.profile-avatar{position:relative; flex-shrink:0}
.profile-verified{
  position:absolute; bottom:-4px; right:-4px;
  width:28px; height:28px; border-radius:50%;
  background:#1EA672; color:#fff; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  border:3px solid #fff;
}
.profile-id h1{margin:0 0 6px; font-size:32px; color:var(--ar-blue-deep); letter-spacing:-.3px}
.profile-tag{margin:0 0 8px; color:var(--muted); font-size:15px}
.profile-meta{margin:0 0 14px; color:var(--muted); font-size:13.5px}
.profile-meta span{display:inline}
.profile-actions{display:flex; gap:8px; flex-wrap:wrap}

.profile-section{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:24px; margin-bottom:14px;
}
.profile-section h2{
  margin:0 0 12px; color:var(--ar-blue-deep);
  font-size:18px; letter-spacing:-.2px;
}
.profile-section p{margin:8px 0; line-height:1.55; color:var(--text); font-size:14.5px}
.profile-section a{color:var(--ar-blue-2); font-weight:600}
.profile-section a:hover{color:var(--ar-blue-deep)}

.profile-social-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;
}
.profile-social-grid a{
  display:flex; align-items:center; gap:10px;
  background:#F0F4FA; padding:12px 14px; border-radius:10px;
  color:var(--ar-blue-deep); font-weight:600; font-size:14px;
}
.profile-social-grid a:hover{background:#E2ECF7}
.profile-social-grid a span{font-size:18px}
.profile-social-grid a small{margin-left:auto; color:var(--muted); font-weight:500; font-size:12px}

.profile-pills{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.profile-pills li{
  background:#F0F4FA; color:var(--ar-blue-deep);
  padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600;
}

.profile-contact{display:grid; grid-template-columns: 1fr 2fr; gap:6px 18px; margin:0}
.profile-contact dt{font-weight:700; color:var(--ar-blue-deep); font-size:13.5px}
.profile-contact dd{margin:0; font-size:13.5px; color:var(--text)}
.profile-contact dd a{font-weight:600}
@media (max-width: 560px){
  .profile-contact{grid-template-columns: 1fr}
  .profile-contact dd{margin-bottom:8px}
  .profile-hero-inner{flex-direction:column; align-items:flex-start}
  .profile-id h1{font-size:24px}
}

/* =====================================================================
   v7 UI upgrade: typography, mobile menu, hero, provinces, SEO pages,
   car detail page. Later rules intentionally override earlier ones.
   ===================================================================== */
body{font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.02em}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none}
.btn-block{display:flex; width:100%; margin-top:10px}
.btn-wa{background:#25D366; color:#fff; border:0}
.btn-wa:hover{background:#1EBE5B; color:#fff}
.topnav a[data-icon="map"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/><circle cx='12' cy='10' r='3'/></svg>")}

/* ---- mobile menu (no JS: <details>) ---- */
.mnav{display:none; position:relative}
.mnav > summary{list-style:none; cursor:pointer; width:42px; height:42px; border-radius:10px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ar-blue-deep); background:#fff}
.mnav > summary::-webkit-details-marker{display:none}
.mnav[open] > summary{background:#F0F4FA}
.mnav-panel{position:absolute; right:0; top:calc(100% + 8px); min-width:240px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 14px 34px rgba(11,42,74,.18); padding:8px; display:flex; flex-direction:column; z-index:60}
.mnav-panel a{padding:11px 12px; border-radius:9px; font-weight:600; color:var(--text); text-decoration:none}
.mnav-panel a:hover{background:#F0F4FA}
@media (max-width: 980px){ .mnav{display:block} }
@media (max-width: 560px){ .hide-sm{display:none !important} }

a.card-link{color:inherit; text-decoration:none}
a.card-link:hover{color:inherit}

/* ---- hero ---- */
.hero{background:
  radial-gradient(900px 420px at 12% -10%, rgba(116,172,223,.42), transparent 60%),
  radial-gradient(700px 360px at 95% 0%, rgba(252,191,73,.20), transparent 60%),
  linear-gradient(180deg, #EAF3FB 0%, #F5F8FC 100%)}
.hero-inner{padding:44px 20px 34px}
.hero-split{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:34px; align-items:center}
.hero-split:has(> .hero-feature[hidden]){grid-template-columns:1fr}
.hero-main{min-width:0}
.eyebrow{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); color:var(--ar-blue-deep);
  font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; box-shadow:0 1px 2px rgba(11,42,74,.05)}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(30,166,114,.18)}
.hero h1{font-size:46px; line-height:1.05; margin:14px 0 12px; font-weight:800}
.hero h1 .accent{display:block}
.hero-sub{font-size:16.5px; line-height:1.55; max-width:640px}
.search{padding:14px; border-radius:18px; box-shadow:0 10px 30px rgba(11,42,74,.10)}
.search-top{display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:12px; padding:6px 6px 6px 14px; color:var(--muted); background:#fff}
.search-top:focus-within{border-color:var(--ar-blue)}
.search-top input{flex:1; min-width:0; border:0; outline:0; font:inherit; font-size:15.5px; color:var(--text); background:transparent; padding:8px 0}
.search-top .btn-search{padding:11px 22px; border-radius:9px}
.search-top + .search-row{grid-template-columns:repeat(5, minmax(0,1fr)); margin-top:10px}
.hero-stats{gap:32px; margin-top:24px}
.hero-stats strong{font-size:24px; font-weight:800}

.hero-feature{align-self:stretch; display:flex}
.hero-feature[hidden]{display:none}
.hf-card{display:flex; flex-direction:column; width:100%; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 18px 44px rgba(11,42,74,.16); color:inherit; text-decoration:none; transition:transform .15s, box-shadow .15s}
.hf-card:hover{transform:translateY(-3px); box-shadow:0 22px 50px rgba(11,42,74,.2); color:inherit}
.hf-img{position:relative; aspect-ratio:16/10; background:#0B2A4A}
.hf-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hf-kicker{position:absolute; top:12px; left:12px; z-index:2; background:var(--ar-yellow); color:#3A2A00; font-size:11.5px; font-weight:800;
  letter-spacing:.3px; text-transform:uppercase; padding:4px 10px; border-radius:999px}
.hf-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px}
.hf-body strong{font-size:18px; color:var(--ar-blue-deep)}
.hf-ver{color:var(--muted); font-size:13px}
.hf-price{display:flex; align-items:baseline; gap:10px; margin-top:6px; flex-wrap:wrap}
.hf-price b{font-size:26px; font-weight:800}
.hf-price em{font-style:normal; color:var(--green); font-weight:700; font-size:13px}
.hf-deal{margin-top:6px; font-size:12.5px; color:#0A5436; background:#E8F8F0; border:1px solid #BDE7D2; border-radius:8px; padding:6px 10px}

/* ---- provinces + link clouds ---- */
.prov-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(165px, 1fr)); gap:10px; margin:6px 0 18px}
.prov-tile{display:flex; flex-direction:column; gap:2px; padding:13px 15px; background:#fff; border:1px solid var(--line); border-radius:12px;
  color:var(--ar-blue-deep); text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s}
.prov-tile strong{font-size:14.5px}
.prov-tile span{font-size:12.5px; color:var(--muted); font-weight:500}
.prov-tile:hover{border-color:var(--ar-blue); transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,42,74,.08); color:var(--ar-blue-deep)}
.chip-links{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0}
.chip-links-center{justify-content:center}
.chip-links a, .chip-links span{display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; font-size:13.5px;
  font-weight:600; background:#F0F4FA; color:var(--ar-blue-deep); border:1px solid transparent; text-decoration:none}
.chip-links span{color:var(--muted); background:#fff; border-color:var(--line); font-weight:500}
.chip-links a:hover{background:#E2ECF7}
.chip-links a.on{background:#fff; border-color:var(--line)}
.chip-links a.on:hover{border-color:var(--ar-blue)}
.chip-links b{font-size:11.5px; background:#E2ECF7; color:var(--ar-blue-deep); padding:1px 7px; border-radius:999px}
.cities{background:#F5F8FC}
.cities h2, .popular h2{font-size:26px}
.popular{background:#fff; border-bottom:1px solid var(--line)}
.popular-inner{max-width:1240px; margin:0 auto; padding:34px 20px}
.popular h2{margin:0 0 10px; color:var(--ar-blue-deep)}
.brand-chips{display:flex; flex-wrap:wrap; gap:6px}
.brand-chips a{background:rgba(255,255,255,.06); color:#E8F0F8; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:600;
  border:1px solid rgba(255,255,255,.08); display:inline-block; text-decoration:none}
.brand-chips a:hover{background:rgba(252,191,73,.15); color:var(--ar-yellow); border-color:rgba(252,191,73,.4)}
.footer-prov-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.footer .footer-prov-grid a{padding:3px 0; font-size:13px}
.footer-inner-wide{grid-template-columns:1.2fr 2fr 1fr 1fr}
.footer-provs .footer-prov-grid{grid-template-columns:repeat(3, 1fr)}

/* ---- SEO listing pages (province, city, brand, model, hub) ---- */
.seo-hero{background:linear-gradient(180deg,#EAF3FB,#F5F8FC); border-bottom:1px solid var(--line)}
.seo-hero-in{max-width:1240px; margin:0 auto; padding:26px 20px}
.seo-hero h1{margin:12px 0 6px; font-size:36px; color:var(--ar-blue-deep); font-weight:800; line-height:1.1}
.crumbs{font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.crumbs a{color:var(--ar-blue-2); font-weight:600}
.crumbs .sep{color:#B8C4D2}
.seo-stats{display:flex; flex-wrap:wrap; gap:28px; margin-top:14px}
.seo-stats div{display:flex; flex-direction:column}
.seo-stats strong{font-size:22px; font-weight:800; color:var(--ar-blue-deep)}
.seo-stats span{font-size:12.5px; color:var(--muted)}
.seo-wrap{max-width:1240px; margin:0 auto; padding:26px 20px 48px}
.seo-intro{max-width:860px; font-size:16px; line-height:1.65; color:var(--text); margin:0 0 20px}
.seo-h2{font-size:22px; color:var(--ar-blue-deep); margin:30px 0 14px}
.seo-note{color:var(--muted); font-size:13px; margin:-6px 0 14px}
.seo-facts{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:14px; margin-top:30px}
.fact{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.fact h3{margin:0 0 10px; font-size:16px; color:var(--ar-blue-deep)}
.fact ol, .fact ul{margin:0; padding-left:18px}
.fact li{padding:3px 0}
.fact li span{color:var(--muted); font-size:12.5px; margin-left:4px}
.fact p{margin:0 0 8px; line-height:1.55}
.seo-steps{margin-top:30px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 24px}
.seo-steps h2{margin:0 0 10px; font-size:20px; color:var(--ar-blue-deep)}
.seo-steps ol{margin:0; padding-left:20px; line-height:1.6}
.seo-steps li{padding:4px 0}
.seo-table{overflow-x:auto}
.seo-table table{width:100%; max-width:640px; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.seo-table th, .seo-table td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:14px}
.seo-table th{background:#F5F8FC; color:var(--ar-blue-deep); font-size:12.5px; text-transform:uppercase; letter-spacing:.3px}
.seo-faq{max-width:860px; margin-top:34px}
.seo-faq h2{font-size:20px; color:var(--ar-blue-deep)}
.seo-faq details{background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; padding:13px 16px}
.seo-faq summary{font-weight:700; color:var(--ar-blue-deep); cursor:pointer}
.seo-faq p{margin:8px 0 0; color:var(--muted); line-height:1.55}
.seo-back{margin-top:20px}
.seo-back a{font-weight:700; color:var(--ar-blue-2)}

/* ---- car detail page ---- */
.detail-wrap{max-width:1240px; margin:0 auto; padding:18px 20px 50px}
.detail-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr); gap:26px; margin-top:14px; align-items:start}
.detail-media{display:flex; flex-direction:column; gap:16px; min-width:0}
.detail-img{position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:#0B2A4A}
.detail-img > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.detail-img .fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:26px; z-index:0}
.detail-badges{position:absolute; top:14px; left:14px; z-index:2}
.detail-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px}
.detail-card h2{margin:0 0 12px; font-size:18px; color:var(--ar-blue-deep)}
.detail-specs dl{margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:0 22px}
.detail-specs dl div{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.detail-specs dt{color:var(--muted); font-size:13.5px}
.detail-specs dd{margin:0; font-weight:600; font-size:14px; text-align:right}
.detail-perks{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.detail-perks li{background:#F5F8FC; border-radius:10px; padding:11px 13px; font-size:13.5px; line-height:1.4}
.detail-side{position:sticky; top:86px}
.detail-buy h1{margin:0; font-size:26px; line-height:1.15; color:var(--ar-blue-deep)}
.detail-sub{margin:6px 0 14px; color:var(--muted); font-size:14px}
.detail-price{font-size:34px; font-weight:800; letter-spacing:-.02em}
.detail-ars{color:var(--muted); font-size:13px; margin-bottom:14px}
.calc{background:#F5F8FC; border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; margin-bottom:6px}
.calc-row{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13.5px}
.calc-row input[type=range]{flex:1; max-width:170px; accent-color:var(--ar-blue-deep)}
.calc-row select{border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:inherit; font-size:13.5px; background:#fff}
.calc-out{display:flex; align-items:baseline; gap:6px; padding-top:8px; border-top:1px dashed var(--line); font-size:13.5px; color:var(--muted)}
.calc-out strong{font-size:22px; color:var(--green)}
.detail-fine{font-size:11.5px; color:var(--muted); line-height:1.5; margin:12px 0 0}
.detail-fine a{color:var(--ar-blue-2)}
.detail-similar{margin-top:36px}
.detail-similar h2{font-size:22px; color:var(--ar-blue-deep)}
.detail-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.detail-links a{padding:8px 14px; border-radius:999px; background:#F0F4FA; color:var(--ar-blue-deep); font-weight:600; font-size:13.5px; text-decoration:none}
.detail-links a:hover{background:#E2ECF7}
#favBtn.fav-on{color:#E5484D; border-color:#F4C7CA; background:#FEF3F3}

@media (max-width: 980px){
  .hero-split{grid-template-columns:1fr}
  .hero h1{font-size:36px}
  .search-top + .search-row{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr}
  .detail-side{position:static}
  .footer-inner-wide{grid-template-columns:1fr 1fr}
  .footer-provs .footer-prov-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .hero-inner{padding:26px 16px 22px}
  .hero h1{font-size:30px}
  .search-top{flex-wrap:wrap; padding:8px}
  .search-top .btn-search{width:100%}
  .search-top + .search-row{grid-template-columns:1fr 1fr}
  .seo-hero h1{font-size:27px}
  .seo-stats{gap:18px}
  .detail-perks{grid-template-columns:1fr}
  .detail-price{font-size:30px}
  .footer-inner-wide{grid-template-columns:1fr}
}
.card-img > img{position:relative; z-index:1}
.card-img .card-badges, .card-img .img-count, .card-img .fav-btn{z-index:2}
.card-img-link{display:block; width:100%; height:100%}
.card-img img{position:relative; z-index:1}
.card-title a{color:inherit; text-decoration:none}
.card-title a:hover{color:var(--ar-blue-2)}
.card-title a::after{content:""; position:absolute; inset:0; z-index:1}
.card .card-cta, .card .fav-btn{position:relative; z-index:3}
.card .fav-btn{position:absolute}