/* 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:user-invalid, .field select:user-invalid, .field textarea:user-invalid{ /* red only after the person has touched the field */
  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}

/* ---- "What car are you looking for?" popup (lead-popup.js) ---- */
.lp-backdrop{position:fixed; inset:0; z-index:1000; background:rgba(11,42,74,.55); display:flex; align-items:center; justify-content:center;
  padding:16px; opacity:0; transition:opacity .2s ease}
.lp-backdrop.in{opacity:1}
body.lp-open{overflow:hidden}
.lp-dialog{position:relative; width:100%; max-width:520px; max-height:calc(100vh - 32px); overflow:auto; background:#fff; border-radius:20px;
  box-shadow:0 24px 60px rgba(11,42,74,.35); transform:translateY(12px) scale(.98); transition:transform .2s ease}
.lp-backdrop.in .lp-dialog{transform:none}
.lp-body{padding:26px 26px 22px}
.lp-x{position:absolute; top:10px; inset-inline-end:10px; width:36px; height:36px; border:0; border-radius:50%; background:#F0F4FA; color:var(--ar-blue-deep);
  font-size:22px; line-height:1; cursor:pointer}
.lp-x:hover{background:#E2ECF7}
.lp-icon{width:48px; height:48px; border-radius:14px; background:#EAF3FB; color:var(--ar-blue-deep); display:flex; align-items:center; justify-content:center; margin-bottom:12px}
.lp-icon.lp-ok{background:#E8F8F0; color:var(--green)}
.lp-dialog h2{margin:0 0 6px; font-size:23px; color:var(--ar-blue-deep); line-height:1.2}
.lp-sub{margin:0 0 16px; color:var(--muted); font-size:14.5px; line-height:1.5}
.lp-form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.lp-form label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; color:var(--ar-blue-deep); min-width:0}
.lp-form .lp-full{grid-column:1 / -1}
.lp-form input, .lp-form select{font:inherit; font-size:15px; font-weight:500; color:var(--text); border:1.5px solid var(--line); border-radius:10px;
  padding:10px 12px; background:#fff; width:100%}
.lp-form input:focus, .lp-form select:focus{outline:none; border-color:var(--ar-blue)}
.lp-hp{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0}
.lp-err{grid-column:1 / -1; margin:0; color:#B42318; background:#FEF3F2; border:1px solid #FECDCA; border-radius:8px; padding:8px 10px; font-size:13px}
.lp-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px}
.lp-later{border:0; background:none; color:var(--muted); font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:8px 4px}
.lp-later:hover{color:var(--ar-blue-deep); text-decoration:underline}
@media (max-width: 560px){
  .lp-backdrop{align-items:flex-end; padding:0}
  .lp-dialog{max-width:none; border-radius:20px 20px 0 0; max-height:92vh}
  .lp-body{padding:22px 18px 18px}
  .lp-form{grid-template-columns:1fr}
  .lp-actions .btn{width:100%}
}

/* ---- Daily articles (/guias) ---- */
.guide-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px}
.guide-card{display:flex; flex-direction:column; gap:6px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:14px; color:var(--text);
  text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s}
.guide-card:hover{border-color:var(--ar-blue); transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,42,74,.08); color:var(--text)}
.guide-card strong{font-size:16.5px; line-height:1.3; color:var(--ar-blue-deep)}
.guide-type{font-size:12px; font-weight:700; color:var(--ar-blue-2); text-transform:uppercase; letter-spacing:.3px}
.guide-desc{font-size:14px; color:var(--muted); line-height:1.5}
.guides-home{background:#F5F8FC}
.art-hero h1{max-width:900px; font-size:34px; line-height:1.15}
.art-lead{max-width:820px; font-size:17px; line-height:1.6; color:var(--text); margin:6px 0 8px}
.art-meta{font-size:13px; color:var(--muted); margin:0 0 10px}
.art-langs{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px}
.art-langs span{color:var(--muted); margin-inline-end:4px}
.art-langs a{padding:4px 10px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ar-blue-deep); font-weight:600; text-decoration:none}
.art-langs a:hover{border-color:var(--ar-blue)}
.art-wrap{max-width:860px}
.art-body{font-size:17px; line-height:1.75; color:var(--text)}
.art-body h2{font-size:24px; color:var(--ar-blue-deep); margin:34px 0 10px; line-height:1.25}
.art-body h3{font-size:19px; color:var(--ar-blue-deep); margin:24px 0 8px}
.art-body p{margin:0 0 16px}
.art-body ul, .art-body ol{margin:0 0 18px; padding-inline-start:22px}
.art-body li{margin:6px 0}
.art-body a{color:var(--ar-blue-2); font-weight:600}
.art-body blockquote{margin:18px 0; padding:12px 18px; border-inline-start:4px solid var(--ar-yellow); background:#FFFBF0; border-radius:8px}
.art-body table{width:100%; border-collapse:collapse; margin:10px 0 22px; font-size:15px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:block; overflow-x:auto}
.art-body th, .art-body td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:start; white-space:nowrap}
.art-body th{background:#F5F8FC; color:var(--ar-blue-deep); font-size:13px}
.art-cta{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:30px 0; padding:20px 22px; border-radius:16px;
  background:linear-gradient(135deg, #EAF3FB, #F5F8FC); border:1px solid var(--line)}
.art-cta strong{font-size:18px; color:var(--ar-blue-deep)}
.art-cta p{margin:4px 0 0; color:var(--muted)}
[dir="rtl"] .crumbs .sep{transform:scaleX(-1); display:inline-block}
@media (max-width: 560px){ .art-hero h1{font-size:27px} .art-body{font-size:16px} .art-cta .btn{width:100%} }

/* ---- User listing page (/publicacion/{id}) ---- */
.ul-thumbs{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.ul-thumbs button{flex:0 0 auto; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; background:none; cursor:pointer}
.ul-thumbs button:hover, .ul-thumbs button:focus-visible{border-color:var(--ar-blue)}
.ul-thumbs img{display:block; width:120px; height:80px; object-fit:cover}
.ul-desc{margin:0; line-height:1.65; white-space:normal}
.ul-contact{display:flex; flex-direction:column; gap:0}
.ul-seller{margin:4px 0 2px; font-size:14px; color:var(--muted)}
.ul-seller strong{color:var(--ar-blue-deep)}
.ul-free{margin:12px 0 0; padding:10px 12px; border-radius:10px; background:#E8F8F0; color:#0A5436; font-size:13px; line-height:1.45}

/* ---- Share row on listing pages ---- */
.share-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.share-row > span{font-size:13px; font-weight:700; color:var(--muted); margin-inline-end:2px}
.share-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:#fff;
  color:var(--ar-blue-deep); font:inherit; font-size:13px; font-weight:700; text-decoration:none; cursor:pointer}
.share-btn:hover{border-color:var(--ar-blue)}
.share-btn.share-wa{background:#25D366; border-color:#25D366; color:#fff}
.share-btn.share-wa:hover{background:#1EBE5B; color:#fff}
.share-btn.share-fb{background:#1877F2; border-color:#1877F2; color:#fff}
.share-btn.share-fb:hover{background:#166FE5; color:#fff}

/* ---- Ad view counter ---- */
.ad-views{display:inline-flex; align-items:center; gap:6px; margin:0 0 12px; padding:5px 11px; border-radius:999px; background:#F0F4FA;
  color:var(--ar-blue-deep); font-size:13px; font-weight:600}
.ad-views svg{flex:0 0 auto}
.ad-views b{font-weight:800}
.card-views{display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); font-weight:600}
.mine-views{font-size:13px; color:var(--muted); margin:2px 0 4px}
.mine-views b{color:var(--ar-blue-deep)}
.mine-link{display:inline-block; font-size:13px; font-weight:700; color:var(--ar-blue-2); margin-bottom:6px}

/* ---- Most viewed this week (homepage) ---- */
.most-viewed{background:#FFFBF0; border-bottom:1px solid var(--line)}
.most-viewed-inner{max-width:1240px; margin:0 auto; padding:30px 20px}
.mv-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.mv-head h2{margin:0; font-size:24px; color:var(--ar-blue-deep)}
.mv-head h2::before{content:"🔥 "}
.mv-all{border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px; font:inherit; font-size:13.5px; font-weight:700;
  color:var(--ar-blue-deep); cursor:pointer}
.mv-all:hover{border-color:var(--ar-blue)}

/* ---------- Filters bar, favorites, compare (2026-09-27) ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin:-4px 0 14px}
.filter-bar select{background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:14px; max-width:100%}
.filter-clear{background:none; border:0; color:var(--ar-blue-2); font-weight:700; font-size:14px; cursor:pointer; padding:9px 4px}
.filter-clear:hover{text-decoration:underline}
.filter-note{margin:-6px 0 14px; color:var(--muted); font-size:12.5px}
.fav-toggle{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:14px; font-weight:600; color:var(--ar-blue-deep); cursor:pointer}
.fav-toggle span[aria-hidden]{color:#E5484D}
.fav-toggle b{background:var(--bg); border-radius:20px; padding:0 8px; font-size:12.5px}
.fav-toggle.on{background:#FEF3F3; border-color:#F4C7CA}
.badge-dealer{background:#0B2A4A; color:#fff}
a.dealer-name{color:inherit; text-decoration:underline; text-underline-offset:2px}
.cmp-check{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin:2px 0 8px; cursor:pointer; position:relative; z-index:3}
.cmp-check input{width:15px; height:15px; accent-color:var(--ar-blue-deep); margin:0}
.compare-bar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(11,42,74,.12)}
.compare-bar-in{max-width:1240px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.compare-thumbs{display:flex; gap:8px; flex:1 1 auto; min-width:0; overflow-x:auto}
.compare-thumb{position:relative; display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:4px 26px 4px 4px; font-size:13px; white-space:nowrap}
.compare-thumb img{width:44px; height:30px; object-fit:cover; border-radius:6px}
.compare-thumb button{position:absolute; right:4px; top:50%; transform:translateY(-50%); border:0; background:none; font-size:17px; line-height:1; color:var(--muted); cursor:pointer}
.compare-count{font-size:13.5px; color:var(--muted)}
.compare-count b{color:var(--ar-blue-deep)}
body.has-compare{padding-bottom:72px}
.compare-dlg{width:min(980px, calc(100vw - 24px)); max-height:calc(100vh - 40px); border:0; border-radius:16px; padding:0; box-shadow:0 20px 60px rgba(11,42,74,.3)}
.compare-dlg::backdrop{background:rgba(11,42,74,.45)}
.compare-dlg-head{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:1}
.compare-dlg-head h2{margin:0; font-size:19px; color:var(--ar-blue-deep)}
.compare-close{border:0; background:none; font-size:26px; line-height:1; cursor:pointer; color:var(--muted)}
.compare-scroll{overflow-x:auto; padding:6px 12px 14px}
.compare-table{width:100%; border-collapse:collapse; font-size:14px; min-width:560px}
.compare-table th, .compare-table td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.compare-table thead th{border-bottom:0}
.compare-table thead a{display:flex; flex-direction:column; gap:6px; color:var(--ar-blue-deep); font-weight:700; text-decoration:none}
.compare-table thead img{width:100%; max-width:220px; aspect-ratio:16/10; object-fit:cover; border-radius:10px}
.compare-table tbody th{color:var(--muted); font-weight:600; width:150px; white-space:nowrap}
.cmp-best{color:var(--green); font-weight:800}
.cmp-foot{font-size:12.5px; color:var(--muted); margin:10px 4px 0}
@media (max-width:640px){
  .filter-bar{display:grid; grid-template-columns:1fr 1fr}
  .filter-bar select{width:100%}
  .compare-bar-in{gap:8px}
  .compare-count{display:none}
  .compare-table tbody th{width:auto; white-space:normal}
}

/* ---------- Sold cars, dealers, seller panel (2026-09-27) ---------- */
.gone-box{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin:10px 0 22px}
.gone-box h1{margin:0 0 8px; font-size:24px; color:var(--ar-blue-deep)}
.gone-box p{margin:0 0 6px; color:var(--text)}
.gone-meta{color:var(--muted); font-size:14px}
.ul-seller a{color:inherit}

.dl-page .dl-head{display:flex; gap:18px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:10px 0 18px}
.dl-logo{width:96px; height:96px; flex:0 0 96px; border-radius:16px; object-fit:contain; background:#fff; border:1px solid var(--line)}
.dl-initials{display:inline-flex; align-items:center; justify-content:center; background:var(--ar-blue-deep); color:#fff; font-weight:800; font-size:30px; border-radius:16px}
.dl-head h1{margin:0 0 4px; font-size:26px; color:var(--ar-blue-deep)}
.dl-sub{margin:0 0 6px; color:var(--muted)}
.dl-count{margin:0; font-size:14.5px}
.dl-grid{display:grid; grid-template-columns:320px 1fr; gap:22px; align-items:start}
.dl-side{display:flex; flex-direction:column; gap:16px}
.dl-contact h2, .dl-stock h2{margin:0 0 12px; font-size:19px; color:var(--ar-blue-deep)}
.dl-contact .btn{margin-bottom:8px}
.dl-info{margin:10px 0 0}
.dl-info div{padding:7px 0; border-top:1px solid var(--line)}
.dl-info dt{font-size:12px; color:var(--muted); font-weight:600}
.dl-info dd{margin:2px 0 0; overflow-wrap:anywhere}
.dl-map{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff}
.dl-map iframe{display:block; width:100%; height:220px; border:0}
.dl-map a{display:block; padding:8px 12px; font-size:13.5px; font-weight:600}
.dl-dir h1{margin:6px 0 6px; color:var(--ar-blue-deep)}
.dl-lead{color:var(--muted); max-width:760px}
.dl-prov h2{font-size:18px; color:var(--ar-blue-deep); margin:22px 0 10px}
.dl-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px}
.dl-tile{display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; color:inherit; text-decoration:none}
.dl-tile:hover{box-shadow:var(--shadow-hover)}
.dl-tile img, .dl-tile .dl-initials{width:56px; height:56px; flex:0 0 56px; border-radius:12px; object-fit:contain; font-size:20px}
.dl-tile-txt{display:flex; flex-direction:column; min-width:0}
.dl-tile-txt span{color:var(--muted); font-size:13.5px}
.dl-pitch{background:var(--ar-blue-deep); color:#fff; border-radius:var(--radius); padding:24px; margin:30px 0 10px}
.dl-pitch h2{margin:0 0 10px; font-size:21px}
.dl-pitch ul{margin:0 0 16px; padding-left:20px; line-height:1.7}
@media (max-width:860px){ .dl-grid{grid-template-columns:1fr} .dl-page .dl-head{align-items:flex-start} .dl-logo{width:72px; height:72px; flex-basis:72px} }

.pn-wrap{max-width:1180px; margin:0 auto; padding:24px 16px 56px}
.pn-hero h1{margin:0 0 4px; color:var(--ar-blue-deep)}
.pn-hero p{margin:0 0 18px; color:var(--muted)}
.pn-tabs{display:flex; gap:6px; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--line); margin-bottom:18px}
.pn-tabs button{background:none; border:0; border-bottom:3px solid transparent; padding:10px 14px; font-size:15px; font-weight:700; color:var(--muted); cursor:pointer}
.pn-tabs button.on{color:var(--ar-blue-deep); border-bottom-color:var(--ar-yellow)}
.pn-new{margin-left:auto}
.pn-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px}
.pn-card h2{margin:0 0 10px; font-size:20px; color:var(--ar-blue-deep)}
.pn-kpis{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; margin-bottom:16px}
.pn-kpi{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.pn-kpi span{color:var(--muted); font-size:13px; font-weight:600}
.pn-kpi strong{font-size:26px; color:var(--ar-blue-deep)}
.pn-kpi small{color:var(--muted); font-size:12.5px}
.pn-chart-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px}
.pn-chart-head h3{margin:0; font-size:16px; color:var(--ar-blue-deep)}
.pn-chart-head span{font-size:12.5px; color:var(--muted)}
.pn-bars{display:flex; align-items:flex-end; gap:1px; height:140px; margin-top:12px; border-bottom:1px solid var(--line)}
.pn-col{flex:1 1 0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; min-width:0}
.pn-col b{display:block; width:100%; background:var(--ar-blue); border-radius:3px 3px 0 0; min-height:0}
.pn-col:hover b{background:var(--ar-blue-2)}
.pn-dot{display:block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-bottom:3px; flex:0 0 7px}
.pn-axis{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:4px}
.pn-key-bar, .pn-key-dot{display:inline-block; width:10px; height:10px; vertical-align:-1px; margin:0 3px 0 8px; background:var(--ar-blue); border-radius:2px}
.pn-key-dot{background:var(--green); border-radius:50%}
.pn-top h3{margin:0 0 8px; font-size:16px; color:var(--ar-blue-deep)}
.pn-top ol{margin:0; padding-left:20px; line-height:1.9}
.pn-top li span{color:var(--muted); font-size:13px}
.pn-top:empty{display:none}
.pn-table-wrap{overflow-x:auto}
.pn-table{width:100%; border-collapse:collapse; font-size:14px}
.pn-table th, .pn-table td{padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
.pn-table th{font-size:12.5px; color:var(--muted); font-weight:700; white-space:nowrap}
.pn-table .num{text-align:right}
.pn-table td.num small{display:block; color:var(--muted); font-size:11.5px}
.pn-car{display:flex; gap:10px; align-items:center; min-width:220px}
.pn-car img, .pn-noimg{width:64px; height:44px; object-fit:cover; border-radius:6px; background:var(--bg); flex:0 0 64px}
.pn-car span{display:flex; flex-direction:column}
.pn-car small{color:var(--muted); font-size:12px}
.pn-price{display:flex; gap:6px; align-items:center}
.pn-price input{width:110px; padding:7px 8px; border:1px solid var(--line); border-radius:8px; font-size:14px}
.pn-actions{white-space:nowrap}
.pn-actions a, .pn-actions button{background:none; border:0; color:var(--ar-blue-2); font-weight:700; font-size:13px; cursor:pointer; padding:4px 6px; text-decoration:none}
.pn-actions .danger{color:var(--red)}
.pn-note{color:var(--muted); font-size:12.5px; margin:10px 0 0}
.pn-banner{border-radius:10px; padding:10px 14px; margin:0 0 14px; font-size:14px}
.pn-banner-wait{background:#FFF7E6; border:1px solid #F8DDA4}
.pn-banner-ok{background:#E9F8F1; border:1px solid #BDE8D3}
.pn-banner-bad{background:#FDECEC; border:1px solid #F5C2C4}
.pn-intro p{color:var(--muted); margin-top:0}
.pn-form .full{grid-column:1/-1}
.pn-form textarea{width:100%}
.pn-logo{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.pn-logo-prev img{width:72px; height:72px; object-fit:contain; border:1px solid var(--line); border-radius:12px; background:#fff}
.pn-msg{border-radius:10px; padding:10px 14px; font-size:14px; margin:12px 0}
.pn-msg.ok{background:#E9F8F1; border:1px solid #BDE8D3}
.pn-msg.bad{background:#FDECEC; border:1px solid #F5C2C4}
.pn-steps{padding-left:20px; line-height:1.7; margin:0 0 12px}
.pn-paste{width:100%; margin:12px 0; padding:10px; border:1px solid var(--line); border-radius:10px; font-family:ui-monospace, Consolas, monospace; font-size:12.5px}
.pn-bulk-table tr.bad td{background:#FFF5F5}
.pn-bulk-table small{color:var(--muted)}
#pnBulkSend{margin-top:12px}
@media (max-width:640px){ .pn-new{margin-left:0} .pn-tabs button{padding:9px 10px; font-size:14px} }
.pn-wrap .pub-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--shadow);margin-top:8px}
.pn-wrap .gate{text-align:center;padding:40px 20px}
.pn-wrap .gate h2{margin:0 0 8px;color:var(--ar-blue-deep)}
.pn-wrap .gate p{color:var(--muted);margin:8px auto 18px;max-width:560px}
.pn-wrap .st{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.pn-wrap .st-pending{background:#FFF6DA;color:#7A5A00}
.pn-wrap .st-approved{background:#E8F8F0;color:#0A5436}
.pn-wrap .st-rejected{background:#FEEBEC;color:#A0181D}
.pn-wrap .st-sold{background:#E2EBF7;color:var(--ar-blue-deep)}

/* ---------- Public ad traffic: today, 7 and 90 days (2026-09-29) ---------- */
.ad-traffic h2{margin:0 0 12px}
.tr-kpis{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px}
.tr-kpis div{background:var(--bg); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column}
.tr-kpis b{font-size:22px; color:var(--ar-blue-deep); line-height:1.2}
.tr-kpis span{font-size:12.5px; color:var(--muted)}
.tr-bars{display:flex; align-items:flex-end; gap:1px; height:70px; border-bottom:1px solid var(--line)}
.tr-bars span{flex:1 1 0; height:100%; display:flex; align-items:flex-end; min-width:0}
.tr-bars b{display:block; width:100%; background:var(--ar-blue); border-radius:2px 2px 0 0}
.tr-bars span:hover b{background:var(--ar-blue-2)}
.tr-axis{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:4px}
.tr-note{font-size:12px; color:var(--muted); margin:8px 0 0}

/* ---------- Header fit (2026-09-29): never wrap, collapse in steps ---------- */
.topnav a, .topbar-actions .btn, .lang-toggle, .brand-name, .brand-tag, .user-toggle{white-space:nowrap}
.topnav{gap:2px; margin-left:10px; flex-shrink:0}
.topnav a{padding:8px 9px; font-size:14.5px}
.topbar-inner{gap:14px}
.topbar-actions{gap:8px; flex-shrink:0}
.lang-toggle{padding:8px 10px}
.lang-globe{flex-shrink:0}
.user-name{max-width:110px}
.topbar .topbar-inner{max-width:1440px}
@media (max-width: 1400px){
  .topnav a::before{display:none}
  .topnav .nav-extra{display:none}
  .brand-tag{display:none}
  .user-name{max-width:90px}
}
@media (max-width: 1180px){
  .user-name{display:none}
  .user-toggle{padding:4px 8px 4px 4px}
}
@media (max-width: 1000px){
  .topnav{display:none}
  .mnav{display:block}
}

@media (max-width: 560px){
  .topbar .topbar-inner{padding:10px 14px; gap:8px}
  .topbar .brand{gap:8px}
  .topbar .brand-mark svg{width:34px; height:34px}
  .topbar .brand-name{font-size:19px}
  .topbar-actions{gap:6px}
  .lang-toggle{padding:7px 8px; gap:4px}
  .lang-globe{display:none}
  .user-toggle{padding:3px 6px 3px 3px; gap:4px}
  .mnav > summary{width:38px; height:38px}
}
html[dir="rtl"] .mnav-panel{right:auto; left:0}
.ad-slot{overflow:hidden; max-width:100%}

/* ---------- Logo (2026-09-29) ---------- */
.brand picture{display:block; line-height:0}
.brand-logo{display:block; height:44px; width:auto}
.brand-logo-footer{display:block; height:36px; width:auto}
@media (max-width: 1100px){ .brand-logo{height:38px} }
@media (max-width: 560px){ .brand-logo{height:30px} }
@media (max-width: 360px){ .brand-logo{height:34px} }
.admin .brand-mark img, .sidebar .brand-mark img{display:block; width:38px; height:auto}

.pn-cur{font-size:12.5px; font-weight:700; color:var(--muted)}

/* Public visitor counter under the hero numbers (live.js) */
.live-visitors{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:18px 0 0; padding:9px 14px; border-radius:999px; background:#ecfdf3; border:1px solid #bbf7d0; color:#14532d; font-size:14px; line-height:1.4; width:fit-content; max-width:100%}
.live-visitors strong{font-weight:800; font-variant-numeric:tabular-nums}
.live-visitors .lv-sep{opacity:.5}
.live-visitors .lv-dot{width:9px; height:9px; border-radius:50%; background:#22c55e; flex:none; animation:lvPulse 1.8s infinite}
@keyframes lvPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (max-width:640px){.live-visitors{border-radius:14px; font-size:13px}}
@media (prefers-reduced-motion: reduce){.live-visitors .lv-dot{animation:none}}

/* ================= Finder hero (hatla2ee-style search, DeAutos colors) ================= */
.hero-v2{background:var(--bg); border-bottom:0}
.hero-v2 .hero-inner{padding:22px 20px 10px}
.hero-v2 .hero-split{align-items:stretch}
.hero-card{position:relative; background:
    radial-gradient(520px 260px at 100% 0%, rgba(116,172,223,.30), transparent 65%),
    radial-gradient(420px 220px at 0% 100%, rgba(252,191,73,.14), transparent 60%),
    linear-gradient(135deg, #0B2A4A 0%, #133B66 100%);
  color:#fff; border-radius:24px; padding:34px 34px 26px; box-shadow:0 18px 44px rgba(11,42,74,.20)}
.hero-v2 .eyebrow{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:#fff; box-shadow:none}
.hero-v2 h1{color:#fff; font-size:42px; margin:14px 0 10px}
.hero-v2 h1 .accent{color:var(--ar-yellow)}
.hero-v2 .hero-sub{color:rgba(255,255,255,.80); font-size:16px; margin-bottom:22px}
.hero-v2 .hero-stats strong{color:#fff}
.hero-v2 .hero-stats span{color:rgba(255,255,255,.72)}
.hero-v2 .hero-stats{margin-top:20px}

.finder{position:relative; background:transparent; padding:0; border:0; box-shadow:none}
.finder-box{display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:6px 6px 6px 16px; color:var(--muted);
  box-shadow:0 8px 24px rgba(0,0,0,.18); border:2px solid transparent; transition:border-color .15s}
.finder-box:focus-within{border-color:var(--ar-yellow)}
.finder-box input{flex:1; min-width:0; border:0; outline:0; font:inherit; font-size:16.5px; color:var(--text); background:transparent; padding:12px 0}
.finder-box input::-webkit-search-cancel-button{cursor:pointer}
.finder-filters{display:inline-flex; align-items:center; gap:7px; border:1px solid #CFE0F1; background:#EEF5FC; color:var(--ar-blue-deep);
  font:inherit; font-weight:700; font-size:14.5px; padding:10px 14px; border-radius:10px; cursor:pointer; white-space:nowrap}
.finder-filters:hover{background:#E1EEFA}
.finder-filters b{background:var(--ar-yellow); color:#3A2A00; border-radius:999px; min-width:20px; height:20px; display:inline-grid; place-items:center; font-size:12px; padding:0 6px}
.finder-filters b[hidden]{display:none}
.finder-cta{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:12px; border:0; cursor:pointer;
  background:var(--ar-yellow); color:#2A1E00; font:inherit; font-size:16.5px; font-weight:800; padding:14px 18px; border-radius:12px;
  box-shadow:0 6px 16px rgba(252,191,73,.35); transition:background .15s, transform .15s}
.finder-cta:hover{background:var(--ar-yellow-2); transform:translateY(-1px)}
.finder-cta b{font-weight:800}
.finder-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.finder-pills:empty{display:none}
.fpill{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:6px 12px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer}
.fpill:hover{background:rgba(255,255,255,.24)}
.fpill span{font-size:16px; line-height:1; opacity:.8}

/* suggestions popover */
.finder-pop{position:absolute; inset-inline:0; top:64px; z-index:40; background:#fff; color:var(--text); border-radius:14px;
  box-shadow:0 18px 44px rgba(11,42,74,.25); border:1px solid var(--line); max-height:min(70vh, 520px); overflow:auto; padding:6px}
.finder-pop[hidden]{display:none}
.fo-list{list-style:none; margin:0; padding:0}
.fo{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer}
.fo:hover, .fo[aria-selected="true"]{background:#F0F6FC}
.fo-main{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px}
.fo-kind{font-size:12px; color:var(--muted); background:#F2F5F9; border-radius:999px; padding:2px 8px}
.fo-n{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:28px; text-align:end}
.fp-sec{padding:10px 8px 6px}
.fp-sec h3{margin:0 0 10px; font-size:14px; color:var(--ar-blue-deep)}
.fp-models{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px}
.fp-model{display:flex; flex-direction:column; align-items:flex-start; gap:2px; border:1px solid var(--line); background:#fff; border-radius:12px; padding:6px 6px 8px; cursor:pointer; text-align:start; font:inherit; color:inherit; min-width:0}
.fp-model:hover{border-color:var(--ar-blue); background:#F7FBFF}
.fp-img{position:relative; width:100%; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:#EEF3F8; display:grid; place-items:center; margin-bottom:4px}
.fp-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.fp-img .bl{position:relative; z-index:0; width:34px; height:34px}
.fp-img img + .bl{display:none}
.fp-name{font-size:13px; font-weight:700; color:var(--ar-blue-deep); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fp-n{font-size:12px; color:var(--muted)}
.fp-prices{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px}
.fp-cur{font-size:12px; font-weight:700; color:var(--muted); min-width:56px}
.fp-price{display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); background:#F8FAFD; border-radius:10px; padding:6px 12px; cursor:pointer; font:inherit; color:var(--text)}
.fp-price span{font-size:11.5px; color:var(--muted)}
.fp-price strong{font-size:14px; color:var(--ar-blue-deep)}
.fp-price:hover{border-color:var(--ar-blue); background:#F0F6FC}

/* brand mark (simple-icons SVG as a mask in the brand color) */
.bl{flex:none; width:26px; height:26px; background:var(--bc, var(--ar-blue-deep)); -webkit-mask:var(--bl) center/contain no-repeat; mask:var(--bl) center/contain no-repeat}
.bl-txt{-webkit-mask:none; mask:none; background:#E7EEF6; color:var(--ar-blue-deep); border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; letter-spacing:-.3px}
.bl-pin{-webkit-mask:none; mask:none; background:none; border:2.5px solid var(--ar-blue-2); border-radius:50% 50% 50% 0; transform:rotate(-45deg) scale(.7)}
.bl-q{-webkit-mask:none; mask:none; background:none; border:2.5px solid var(--muted); border-radius:50%; transform:scale(.6)}

/* filters dialog */
.finder-dlg{border:0; padding:0; border-radius:18px; width:min(560px, calc(100vw - 32px)); box-shadow:0 30px 80px rgba(11,42,74,.35); color:var(--text)}
.finder-dlg::backdrop{background:rgba(11,42,74,.45)}
.fd-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line)}
.fd-head h2{margin:0; font-size:19px; color:var(--ar-blue-deep)}
.fd-close{border:0; background:#F2F5F9; width:34px; height:34px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; color:var(--ar-blue-deep)}
.fd-body{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:18px 20px}
.fd-field{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:700; color:var(--ar-blue-deep); min-width:0}
.fd-field select{width:100%; font:inherit; font-weight:500; font-size:15px; padding:11px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--text)}
.fd-field select:focus{outline:0; border-color:var(--ar-blue)}
.fd-wide{grid-column:1 / -1}
.fd-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-top:1px solid var(--line); background:#FAFCFE}
.fd-clear{border:0; background:none; color:var(--muted); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline}
.fd-apply{border:0; background:var(--ar-blue-deep); color:#fff; font:inherit; font-weight:800; font-size:15.5px; padding:12px 26px; border-radius:11px; cursor:pointer}
.fd-apply:hover{background:#133B66}

/* ================= Explorá ================= */
.explore{background:var(--bg)}
.explore-inner{max-width:1240px; margin:0 auto; padding:22px 20px 26px}
.explore h2{margin:0 0 12px; font-size:22px; color:var(--ar-blue-deep)}
.ex-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; margin-bottom:16px}
.ex-tabs::-webkit-scrollbar{display:none}
.ex-tab{flex:none; border:0; background:none; font:inherit; font-size:15px; font-weight:700; color:var(--muted); padding:10px 14px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px}
.ex-tab[aria-selected="true"]{color:var(--ar-blue-deep); border-bottom-color:var(--ar-blue-deep)}
.ex-tab:hover{color:var(--ar-blue-deep)}
.ex-grid{display:grid; gap:10px}
.ex-brands{grid-template-columns:repeat(6, minmax(0,1fr))}
.ex-brand{display:flex; flex-direction:column; align-items:center; gap:4px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 8px 12px; cursor:pointer; font:inherit; color:var(--text); transition:border-color .15s, transform .15s, box-shadow .15s}
.ex-brand:hover, .ex-model:hover, .ex-prov:hover, .ex-price:hover{border-color:var(--ar-blue); transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,42,74,.10)}
.ex-brand .bl{width:48px; height:48px; margin-bottom:6px}
.ex-brand .bl-txt{width:48px; height:48px}
.ex-name{font-size:14.5px; font-weight:700; color:var(--ar-blue-deep); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.ex-name strong{font-weight:800}
.ex-n{font-size:12.5px; color:var(--muted)}
.ex-more{display:block; margin:14px auto 0; border:1px solid var(--line); background:#fff; color:var(--ar-blue-deep); font:inherit; font-weight:700; padding:10px 18px; border-radius:999px; cursor:pointer}
.ex-models{grid-template-columns:repeat(4, minmax(0,1fr))}
.ex-model{display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px 8px 12px; cursor:pointer; font:inherit; text-align:start; transition:border-color .15s, transform .15s, box-shadow .15s; min-width:0}
.ex-model .ex-name{text-align:start; padding:4px 4px 0; font-weight:600}
.ex-model .ex-n{padding:0 4px}
.ex-img{position:relative; width:100%; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:#EEF3F8}
.ex-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ex-provs{grid-template-columns:repeat(4, minmax(0,1fr))}
.ex-prov, .ex-price{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 14px; cursor:pointer; font:inherit; color:var(--text); text-align:start; transition:border-color .15s, transform .15s, box-shadow .15s; min-width:0}
.ex-prov .ex-name{text-align:start}
.ex-prices{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.ex-pcol{display:flex; flex-direction:column; gap:8px}
.ex-pcol h3{margin:0 0 2px; font-size:15px; color:var(--ar-blue-deep)}
.ex-price strong{color:var(--ar-blue-deep)}
.ex-body .bodystyle-row{margin:0}

@media (max-width:1000px){
  .ex-brands{grid-template-columns:repeat(4, minmax(0,1fr))}
  .ex-models, .ex-provs{grid-template-columns:repeat(3, minmax(0,1fr))}
  .fp-models{grid-template-columns:repeat(3, minmax(0,1fr))}
  .fp-models .fp-model:nth-child(n+7){display:none}
}
@media (max-width:640px){
  .hero-v2 .hero-inner{padding:12px 12px 6px}
  .hero-card{padding:22px 16px 18px; border-radius:20px}
  .hero-v2 h1{font-size:30px}
  .hero-v2 .hero-sub{font-size:14.5px; margin-bottom:16px}
  .finder-box{padding:5px 5px 5px 12px}
  .finder-box input{font-size:16px; padding:10px 0}
  .finder-filters{padding:9px 10px}
  .finder-filters span{display:none}
  .finder-pop{top:58px}
  .fp-models{grid-template-columns:repeat(2, minmax(0,1fr))}
  .fp-models .fp-model:nth-child(n+5){display:none}
  .finder-dlg{width:100vw; max-width:100vw; max-height:92vh; margin:auto 0 0; border-radius:18px 18px 0 0}
  .fd-body{grid-template-columns:1fr; max-height:60vh; overflow:auto}
  .ex-brands{grid-template-columns:repeat(3, minmax(0,1fr))}
  .ex-models, .ex-provs{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ex-prices{grid-template-columns:1fr}
  .explore-inner{padding:16px 12px 20px}
}
@media (prefers-reduced-motion: reduce){
  .finder-cta, .ex-brand, .ex-model, .ex-prov, .ex-price{transition:none}
}
.live-visitors[hidden]{display:none}
@media (max-width:640px){.fo-kind{display:none}}
.bl.bl-wide{width:46px}
.ex-brand .bl.bl-wide{width:96px}
.fp-img .bl.bl-wide{width:60px}

/* Cars published directly on DeAutos.com, above gathered listings (ulgrid.js) */
.ul-block{margin-bottom:8px}
.ul-block[hidden]{display:none}
.ul-block .seo-note{margin-top:-4px}
.card-ul{border-color:#BDE7D2; box-shadow:0 0 0 1px #BDE7D2, var(--shadow)}
.badge-ul{display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; color:#0A5436; background:#E8F8F0; border:1px solid #BDE7D2; border-radius:999px; padding:2px 9px}
.ul-more{margin:14px 0 0; font-weight:700}

/* Sold listings: owner bar on the listing page, sold notice, buttons in Mis publicaciones */
.owner-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:0 0 16px; padding:12px 16px; border-radius:14px; background:#EEF5FC; border:1px solid #CFE0F1; color:var(--ar-blue-deep)}
.owner-bar[hidden]{display:none}
.owner-bar .ob-text{font-size:14.5px; line-height:1.4}
.owner-bar .ob-actions{display:flex; flex-wrap:wrap; gap:8px}
.owner-bar .btn{padding:9px 16px; font-size:14px}
.badge-sold{background:#B42318; color:#fff}
.ul-sold-box{border:1px solid #F5C2BE; background:#FEF3F2; border-radius:14px; padding:16px}
.ul-sold-box p{margin:0 0 12px; color:#55160C}
.ul-sold-box .ul-sold-title{font-size:18px; font-weight:800; color:#B42318; margin-bottom:6px}
.mine-actions .mine-sold{background:var(--ar-blue-deep); color:#fff; border-color:var(--ar-blue-deep)}

/* Hero side card: space for sellers ("Tu auto acá"), in place of the featured deal */
.hf-sell .hf-slot{display:grid; place-items:center; background:
    radial-gradient(260px 160px at 85% 15%, rgba(252,191,73,.22), transparent 70%),
    linear-gradient(135deg, #133B66, #0B2A4A)}
.hf-slot-in{display:flex; flex-direction:column; align-items:center; gap:6px; color:#fff; border:2px dashed rgba(255,255,255,.45); border-radius:14px; padding:18px 30px}
.hf-slot-in svg{color:var(--ar-yellow)}
.hf-slot-t{font-size:24px; font-weight:800; letter-spacing:-.3px}
.hf-sell .hf-body strong{font-size:19px}
.hf-points{list-style:none; margin:6px 0 4px; padding:0; display:flex; flex-direction:column; gap:7px}
.hf-points li{position:relative; padding-inline-start:24px; font-size:14px; line-height:1.4; color:var(--text)}
.hf-points li::before{content:""; position:absolute; inset-inline-start:0; top:3px; width:16px; height:16px; border-radius:50%; background:#E8F8F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%231EA672' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.hf-sell .hf-cta{margin-top:8px; text-align:center; width:100%}
.hf-note{font-size:12.5px; color:var(--muted); text-align:center}
.hf-sell:hover .hf-cta{background:#133B66}

/* ================= Phones (2026-11-01) =================
   Keep the page inside the screen on every phone, show several cars per
   screen, and keep the filters out of the way until asked for. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%} /* no automatic font inflation (Samsung Internet, in-app browsers) */
body{overflow-x:clip}
img, svg, video, iframe{max-width:100%}
.hero-card, .finder, .finder-box, .finder-pop, .explore-inner, .listings, .seo-wrap, .detail-wrap{min-width:0}
.hero-v2 h1, .hero-v2 .hero-sub, .hero-v2 .eyebrow, .card-title, .card-version, .dealer-loc{overflow-wrap:anywhere}

.filter-toggle{display:none}

@media (max-width:640px){
  /* filters behind one button */
  .filter-toggle{display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ar-blue-deep); font:inherit; font-weight:700; font-size:14.5px; cursor:pointer}
  .filter-toggle b{background:var(--ar-yellow); color:#3A2A00; border-radius:999px; min-width:20px; height:20px; display:inline-grid; place-items:center; font-size:12px; padding:0 6px}
  .filter-toggle[aria-expanded="true"]{background:#EEF5FC; border-color:#CFE0F1}
  #filterBar{display:none}
  #filterBar.open{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  #filterBar.open select{width:100%; min-width:0}

  /* compact horizontal car cards: photo left, details right */
  .grid{grid-template-columns:1fr; gap:10px}
  .grid .card{display:grid; grid-template-columns:40% minmax(0, 1fr); align-items:stretch}
  .grid .card:hover{transform:none}
  .grid .card .card-img{aspect-ratio:auto; height:100%; min-height:128px}
  .grid .card .card-img img{position:absolute; inset:0; width:100%; height:100%}
  .grid .card .card-img .fallback{font-size:14px; padding:6px; text-align:center}
  .grid .card .card-badges{top:6px; left:6px; gap:4px}
  .grid .card .card-badges .badge{font-size:10px; padding:2px 7px}
  .grid .card .card-badges .badge:nth-child(n+2){display:none}
  .grid .card .fav-btn{width:30px; height:30px; top:6px; right:6px}
  .grid .card .img-count, .grid .card .cmp-check, .grid .card .card-ars{display:none}
  .grid .card .card-body{padding:9px 11px 10px; gap:2px}
  .grid .card .card-toprow{font-size:11.5px; gap:6px; flex-wrap:wrap}
  .grid .card .card-title{font-size:15px; line-height:1.25; margin:0}
  .grid .card .card-version{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .grid .card .card-price .usd{font-size:18px}
  .grid .card .card-dealer{font-size:11.5px; margin-top:2px; padding-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .grid .card .card-cta{margin-top:6px; gap:6px}
  .grid .card .card-cta .btn{padding:7px 10px; font-size:12.5px}
  .grid .card .card-cta .btn-primary{display:none} /* the photo and the title already open the car */
  .grid .card .card-cta .btn-link{padding-left:0; text-align:start; justify-content:flex-start}
  html[dir="rtl"] .grid .card .card-badges{left:auto; right:6px}
  html[dir="rtl"] .grid .card .fav-btn{right:auto; left:6px}
}

/* Right-to-left pages (Arabic): prices, km and places keep their own left-to-right order ("$ 47.732.297", "1.002 km") */
html[dir="rtl"] .card-price .usd, html[dir="rtl"] .card-km, html[dir="rtl"] .hf-price b, html[dir="rtl"] .detail-price, html[dir="rtl"] .fp-price strong, html[dir="rtl"] .ex-price strong{direction:ltr; unicode-bidi:isolate; display:inline-block}
html[dir="rtl"] .dealer-loc, html[dir="rtl"] .card-version{unicode-bidi:plaintext}

/* ================= Car page on phones and tablets (2026-11-01) =================
   One column: photo, then the price box (title, price, contact), then the
   specs and the rest. Before, the price box came after all the specs. */
@media (max-width: 980px){
  .detail-grid{display:flex; flex-direction:column; align-items:stretch; gap:14px}
  .detail-media{display:contents}
  .detail-img{order:1}
  .ul-thumbs{order:2}
  .detail-side{order:3; position:static; width:100%}
  .detail-media > :not(.detail-img):not(.ul-thumbs){order:4}
  .detail-grid > *{min-width:0}
}
@media (max-width: 640px){
  .detail-wrap{padding-bottom:84px}
  .detail-img{border-radius:14px}
  .detail-buy h1{font-size:22px; line-height:1.2}
  .detail-buy .detail-price{font-size:28px}
  .detail-card{padding:16px}
  .detail-specs dl > div{gap:12px}
  .detail-specs dd{overflow-wrap:anywhere}
  /* bar fixed at the bottom with price + contact (detail-bar.js) */
  .detail-bar{position:fixed; inset-inline:0; bottom:0; z-index:60; display:flex; align-items:center; gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(11,42,74,.12)}
  .detail-bar[hidden]{display:none}
  .detail-bar .db-price{flex:1; min-width:0; font-size:19px; font-weight:800; color:var(--ar-blue-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  html[dir="rtl"] .detail-bar .db-price{direction:ltr; text-align:end}
  .detail-bar .db-btn{flex:none; padding:12px 18px; font-size:15px; border-radius:12px; margin:0; width:auto}
  body.has-detail-bar .asst-launcher{bottom:84px}
}

/* ================= Forms on phones (publish, panel, filters) (2026-11-01) =================
   Grid cells may shrink below their content (a long province name pushed the
   fields past the screen), and every field is 16px so iPhones do not zoom in
   when it is tapped. */
.form-grid > *, .fd-body > *{min-width:0}
.field input, .field select, .field textarea{width:100%; max-width:100%; min-width:0; box-sizing:border-box}
@media (max-width:640px){
  input, select, textarea{font-size:16px}
  .field input, .field select, .field textarea{font-size:16px; padding:11px 12px}
  .pub-card{padding:18px 16px}
  .pub-card h2{font-size:19px}
  #pubForm .form-actions{flex-direction:column; align-items:stretch; gap:10px}
  #pubForm .form-actions .btn{width:100%}
  #pubForm .form-hint{text-align:center}
  .photo-drop{padding:18px 12px}
}
/* Price row: the amount gets the room, the currency only what it needs */
.field .price-cur select{width:auto; max-width:42%; flex:0 0 auto}
.field .price-cur input{flex:1 1 auto; width:auto; min-width:0}

/* Seller panel on phones: the car table becomes one card per car */
@media (max-width:640px){
  .pn-wrap{padding:16px 12px 48px}
  .pn-hero h1{font-size:26px}
  .pn-tabs{gap:0 2px}
  .pn-tabs .pn-new{order:-1; flex:1 0 100%; margin:0 0 8px; text-align:center; justify-content:center}
  .pn-tabs button{flex:1 1 auto; padding:9px 6px; font-size:13.5px; white-space:nowrap}
  .pn-card{padding:14px 12px}
  .pn-kpis{grid-template-columns:1fr 1fr; gap:8px}
  .pn-kpi{padding:10px 12px; min-width:0}
  .pn-kpi strong{font-size:21px}
  .pn-kpi:last-child:nth-child(odd){grid-column:1/-1}
  .pn-kpi small{font-size:11.5px}
  .pn-chart-head span{font-size:11.5px}
  .pn-bars{height:110px}
  .pn-top ol{padding-left:18px; line-height:1.5}
  .pn-top li{margin-bottom:8px}
  .pn-top li span{display:block}
  .pn-wrap .pub-card{padding:20px 16px}

  .pn-autos, .pn-autos tbody{display:block}
  .pn-autos thead{display:none}
  .pn-autos tr{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-areas:"car car st" "price price price" "views wa tel" "act act act";
    gap:10px 8px; padding:12px 0; border-bottom:1px solid var(--line)}
  .pn-autos tr:first-child{padding-top:0}
  .pn-autos td{display:block; padding:0; border:0; min-width:0}
  .pn-autos .pn-td-car{grid-area:car}
  .pn-autos .pn-td-st{grid-area:st; justify-self:end; align-self:start}
  .pn-autos .pn-td-price{grid-area:price}
  .pn-autos .pn-td-views{grid-area:views}
  .pn-autos .pn-td-wa{grid-area:wa}
  .pn-autos .pn-td-tel{grid-area:tel}
  .pn-autos .pn-actions{grid-area:act}
  .pn-autos .pn-car{min-width:0}
  .pn-autos .pn-car span{min-width:0}
  .pn-autos .pn-car strong{font-size:14.5px; line-height:1.25}
  .pn-autos .pn-car img, .pn-autos .pn-noimg{width:64px; height:48px; flex:0 0 64px}
  .pn-autos td.num{text-align:left; background:var(--bg); border-radius:8px; padding:7px 8px; font-weight:700}
  .pn-autos td.num::before{content:attr(data-label); display:block; font-size:11px; font-weight:600; color:var(--muted)}
  .pn-autos td.num small{font-weight:500; line-height:1.3}
  .pn-price input{flex:1 1 auto; width:auto; min-width:0; font-size:16px}
  .pn-price .btn{flex:0 0 auto}
  .pn-autos .pn-actions{display:flex; flex-wrap:wrap; gap:6px; white-space:normal}
  .pn-autos .pn-actions a, .pn-autos .pn-actions button{flex:1 1 auto; text-align:center; border:1px solid var(--line); border-radius:8px; padding:8px 7px; font-size:12.5px; background:#fff}
  .pn-autos .pn-actions .danger{color:var(--red)}
  .pn-bulk-table{font-size:13px}
  .pn-steps{padding-left:18px}
  .pn-card > label.btn, #pnBulkSend{width:100%}
}

/* Country bar: DeAutos Argentina <-> DeAutos España, by the visitor's location (lead-popup.js, es-geo.js) */
.geo-bar{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; background:#FFF6DA; border-bottom:1px solid #F3DE9B; padding:8px 40px 8px 16px; font-size:14px; position:relative}
.geo-bar a{font-weight:700; color:var(--ar-blue-deep)}
.geo-bar button{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:0; font-size:20px; cursor:pointer; color:var(--muted); line-height:1}