:root{
  --brand:#ffd400;
  --brand-hover:#ffe14a;
  --brand-deep:#cda900;
  --success:#168754;
  --danger:#c43a30;
  --wa:#25d366;
  --radius:10px;
  --radius-lg:18px;
  --max:1260px;
  --shadow:0 16px 44px rgba(0,0,0,.12);
  --shadow-soft:0 8px 24px rgba(0,0,0,.08);
  --bg:#0b0b0b;
  --surface:#121212;
  --surface-2:#181818;
  --surface-3:#202020;
  --text:#f6f6f3;
  --muted:#aaa9a3;
  --line:#30302d;
  --header:#0d0d0d;
  --topbar:#050505;
  --input:#151515;
  --inverse:#111;
  --inverse-text:#fff;
}
html[data-theme="light"]{
  --bg:#fff;
  --surface:#fff;
  --surface-2:#f5f5f3;
  --surface-3:#ededeb;
  --text:#111;
  --muted:#696964;
  --line:#ddddD8;
  --header:#fff;
  --topbar:#080808;
  --input:#fff;
  --inverse:#111;
  --inverse-text:#fff;
  --shadow:0 16px 44px rgba(0,0,0,.09);
  --shadow-soft:0 8px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
main{min-height:55vh}
.container{width:min(var(--max),calc(100% - 42px));margin-inline:auto}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:18px;top:18px;z-index:9999;background:#fff;color:#000;padding:10px 14px;border:2px solid #000}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:var(--header);border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(0,0,0,.1)}
.site-topbar{background:var(--topbar);color:#d8d8d3;font-size:11px;letter-spacing:.04em}
.topbar-inner{min-height:30px;display:flex;justify-content:flex-end;align-items:center;gap:9px}
.topbar-phone{font-weight:900;color:var(--brand);margin-left:8px}
.header-inner{min-height:78px;display:flex;align-items:center;gap:24px}
.brand{display:block;flex:0 0 auto}
.brand img{width:178px;height:auto}
.main-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.main-nav a{font-size:12px;font-weight:800;color:var(--text);position:relative;padding:30px 0;white-space:nowrap}
.main-nav a:after{content:"";position:absolute;height:3px;left:0;right:100%;bottom:0;background:var(--brand);transition:right .2s ease}
.main-nav a:hover:after,.main-nav a.active:after{right:0}
.header-actions{display:flex;align-items:center;gap:9px}
.nav-toggle{display:none;border:0;background:transparent;padding:8px;margin-left:auto}
.nav-toggle span{width:25px;height:2px;background:var(--text);display:block;margin:5px;border-radius:2px}
.theme-toggle{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 11px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:6px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;transition:.18s}
.theme-toggle:hover{border-color:var(--brand);transform:translateY(-1px)}
.theme-icon{width:16px;height:16px;fill:currentColor}
.theme-icon-moon{display:none}
html[data-theme="light"] .theme-icon-sun{display:none}
html[data-theme="light"] .theme-icon-moon{display:block}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid transparent;padding:11px 18px;border-radius:6px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.035em;transition:transform .18s,background .18s,border-color .18s,color .18s}
.btn:hover{transform:translateY(-1px)}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#111}
.btn-brand:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn-dark{background:var(--inverse);border-color:var(--inverse);color:var(--inverse-text)}
html[data-theme="dark"] .btn-dark{background:#f3f3f0;border-color:#f3f3f0;color:#111}
.btn-outline{background:transparent;border-color:var(--text);color:var(--text)}
.btn-outline:hover{background:var(--text);color:var(--bg)}
.btn-lg{min-height:52px;padding:14px 24px;font-size:13px}
.btn-sm{min-height:36px;padding:8px 12px;font-size:10px}
.section-link{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--brand);padding-bottom:3px}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--surface);padding:70px 0 62px;min-height:500px;display:flex;align-items:center;border-bottom:0}
.hero:after{content:"";position:absolute;width:650px;height:650px;border-radius:50%;right:-240px;top:-300px;background:var(--brand);opacity:.95}
.hero:before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:290px;bottom:-260px;background:var(--text);opacity:.04}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px}
.eyebrow{display:inline-block;color:var(--text);font-size:10px;line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:.16em;border-left:4px solid var(--brand);padding-left:10px}
.hero h1{font-size:clamp(43px,5.5vw,75px);line-height:.96;letter-spacing:-.055em;max-width:760px;margin:17px 0 21px;text-transform:uppercase}
.hero h1 span{display:block}
.hero-copy{font-size:17px;color:var(--muted);max-width:640px;margin-bottom:27px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-visual{min-height:300px;display:grid;place-items:center;position:relative}
.hero-logo{position:relative;z-index:2;width:min(550px,100%);filter:drop-shadow(0 18px 28px rgba(0,0,0,.4))}
.hero-visual:after{content:"";position:absolute;width:90%;height:72px;bottom:42px;border-radius:50%;background:rgba(0,0,0,.22);filter:blur(28px)}

/* Search */
.search-shell{position:relative;z-index:4;background:var(--bg);padding:30px 0 44px;border-bottom:1px solid var(--line)}
.vehicle-search{display:grid;grid-template-columns:minmax(210px,1.15fr) minmax(210px,1.15fr) minmax(155px,.72fr) minmax(170px,.82fr) 170px;align-items:stretch;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-soft);overflow:hidden;border-radius:12px}
.vehicle-search .field{min-width:0;min-height:88px;padding:15px 18px 13px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:7px}
.field{display:grid;gap:7px}
.field label{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--input);color:var(--text);border-radius:6px;padding:11px 12px;outline:none}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--muted) 82%,transparent)}
.vehicle-search .field input,.vehicle-search .field select{height:30px;border:0;padding:2px 22px 2px 0;background:transparent;color:var(--text);font-size:15px;font-weight:800;line-height:1.2;box-shadow:none}
.vehicle-search .field input:focus,.vehicle-search .field select:focus{box-shadow:none}
.vehicle-search .field input::placeholder{color:var(--muted);opacity:.9}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(255,212,0,.18)}
.field textarea{min-height:130px;resize:vertical}
.vehicle-search .btn{min-width:0;min-height:88px;border:0;border-left:1px solid color-mix(in srgb,var(--brand-deep) 60%,transparent);border-radius:0;font-size:12px;letter-spacing:.06em}
select option{background:var(--surface);color:var(--text)}

/* Sections */
.section{padding:70px 0}
.section-soft{background:var(--surface-2)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:29px}
.section-head h2{font-size:clamp(29px,3.4vw,45px);line-height:1.02;letter-spacing:-.04em;margin:11px 0 0;text-transform:uppercase}
.section-head p{color:var(--muted);max-width:650px;margin:0}

/* Vehicle cards */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.vehicle-card{background:var(--surface);border:1px solid var(--line);min-width:0;border-radius:8px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.vehicle-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 55%,var(--line))}
.vehicle-card-media{position:relative;display:block;aspect-ratio:4/3;background:var(--surface-3);overflow:hidden}
.vehicle-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .32s}
.vehicle-card:hover .vehicle-card-media img{transform:scale(1.025)}
.badge-row{position:absolute;left:0;top:0;display:flex;gap:5px;flex-wrap:wrap;padding:10px;z-index:2}
.badge{display:inline-flex;align-items:center;background:#111;color:#fff;padding:6px 8px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;border-radius:3px}
.badge-brand{background:var(--brand);color:#111}
.badge-sold{background:var(--surface-3);color:var(--text);border:1px solid var(--line)}
.vehicle-card-body{padding:17px 17px 15px}
.vehicle-status-text{color:var(--success);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}
.status-reserved .vehicle-status-text{color:#b58719}.status-sold .vehicle-status-text{color:var(--muted)}
.vehicle-type-text{font-size:10px;color:var(--muted);text-transform:uppercase;margin-bottom:5px}
.vehicle-card h3{font-size:18px;line-height:1.15;margin:4px 0 11px;text-transform:uppercase;min-height:42px}
.vehicle-card h3 a:hover{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:3px}
.vehicle-meta{display:flex;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:11px;margin-bottom:13px}
.vehicle-meta span:not(:last-child):after{content:"·";margin-left:7px}
.vehicle-price{font-size:22px;font-weight:900;letter-spacing:-.025em}
.vehicle-price:before{content:"Desde ";font-size:10px;letter-spacing:.03em;font-weight:700;color:var(--muted);vertical-align:middle}
.vehicle-footer{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.vehicle-financing{display:block;font-size:9px;font-weight:900;letter-spacing:.08em;margin-bottom:7px;color:var(--muted);text-transform:uppercase}
.vehicle-branch{display:block;font-size:10px;color:var(--muted);margin-bottom:7px}
.vehicle-footer .section-link{display:inline-block}
.empty-state{grid-column:1/-1;border:1px dashed var(--line);background:var(--surface);padding:52px 28px;text-align:center;color:var(--muted);border-radius:8px}
.empty-state strong{display:block;font-size:20px;color:var(--text);margin-bottom:7px}

/* Categories */
.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.category-card{background:var(--surface);min-height:138px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;transition:.18s}
.category-card:hover{background:var(--brand);color:#111}
.category-icon{width:42px;height:42px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:24px;line-height:1;font-weight:300}
.category-card h3{font-size:16px;text-transform:uppercase;margin:18px 0 3px}
.category-card span:last-child{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.category-card:hover span:last-child{color:#3d3500}

/* Promos and trust */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.promo{position:relative;overflow:hidden;min-height:325px;padding:38px;border:1px solid var(--line);background:#0d0d0d;color:#fff;display:flex;flex-direction:column;justify-content:center;border-radius:8px}
.promo:after{content:"";position:absolute;width:280px;height:280px;right:-120px;bottom:-130px;border-radius:50%;border:58px solid rgba(255,255,255,.07)}
.promo .eyebrow{color:#fff}
.promo h2{font-size:37px;line-height:1.03;letter-spacing:-.04em;text-transform:uppercase;max-width:520px;margin:14px 0}
.promo p{color:#cfcfcb;max-width:550px}
.promo .btn{align-self:flex-start;margin-top:12px;position:relative;z-index:2}
.promo-brand{background:var(--brand);color:#111;border-color:var(--brand)}
.promo-brand .eyebrow{color:#111;border-left-color:#111}
.promo-brand p{color:#373200}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.trust-item{padding:27px 28px;background:var(--surface);border-right:1px solid var(--line)}
.trust-item:last-child{border-right:0}
.trust-num{display:block;font-size:11px;font-weight:900;color:var(--muted);letter-spacing:.12em}
.trust-item h3{font-size:18px;text-transform:uppercase;margin:14px 0 7px}
.trust-item p{margin:0;color:var(--muted);font-size:13px}

/* Branches and maps */
.branches-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.branch-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-soft)}
.branch-card-content{padding:26px}
.branch-card h3{font-size:25px;line-height:1.05;text-transform:uppercase;margin:14px 0 8px}
.branch-card p{color:var(--muted);margin-bottom:10px}
.branch-map{height:220px;background:var(--surface-3);border-bottom:1px solid var(--line)}
.branch-map iframe{width:100%;height:100%;border:0;display:block}
.branch-map-large{height:310px}
.branch-phone a{font-size:19px;font-weight:900;color:var(--brand)}
.branch-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.branches-grid-full{align-items:start}

/* Inner pages */
.page-hero{background:#0c0c0c;color:#fff;padding:46px 0 40px;border-bottom:5px solid var(--brand)}
.page-hero .eyebrow{color:#fff}
.page-hero h1{font-size:clamp(35px,4.5vw,57px);line-height:1;letter-spacing:-.045em;text-transform:uppercase;margin:14px 0 10px}
.page-hero p{max-width:780px;color:#c8c8c3;font-size:16px;margin-bottom:0}
.page-hero .section-link{color:#fff}
.catalog-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:31px;align-items:start}
.filters{position:sticky;top:126px;border:1px solid var(--line);border-top:4px solid var(--brand);background:var(--surface);padding:0 18px 17px;border-radius:6px}
.filters h2{font-size:19px;text-transform:uppercase;margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.filters form{display:grid}
.filters .field{padding:14px 0;border-bottom:1px solid var(--line)}
.filters .field label{font-size:10px;color:var(--text);margin-bottom:3px}
.filters .field select,.filters .field input{padding:7px 9px}
.filters .btn{margin-top:16px;width:100%}
.filter-clear{display:block;text-align:center;padding:12px 0 0;font-size:10px;text-transform:uppercase;font-weight:800;color:var(--muted)}
.catalog-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.catalog-top h2{font-size:23px;text-transform:uppercase;margin:0}
.sort-select{width:200px;border:1px solid var(--line);border-radius:6px;padding:10px;background:var(--input);color:var(--text)}
.pager{display:flex;justify-content:center;gap:9px;margin-top:34px}.pager .disabled{opacity:.35;pointer-events:none}

/* Vehicle detail */
.detail-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:33px;align-items:start}
.gallery-main{background:var(--surface-3);border:1px solid var(--line);aspect-ratio:4/3;overflow:hidden;border-radius:8px}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}
.thumb{border:2px solid transparent;background:var(--surface-3);padding:0;aspect-ratio:4/3;overflow:hidden;border-radius:5px}
.thumb img{width:100%;height:100%;object-fit:cover}.thumb.active,.thumb:hover{border-color:var(--brand)}
.detail-card{position:sticky;top:126px;border-top:6px solid var(--brand);background:var(--surface);padding:22px;border-radius:8px;box-shadow:var(--shadow-soft)}
.detail-card>.badge-row{position:static;padding:0;margin:0 0 14px!important}
.detail-card h1{font-size:33px;line-height:1.02;text-transform:uppercase;letter-spacing:-.035em;margin:8px 0 13px}
.detail-price{font-size:37px;font-weight:900;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:16px 0}
.detail-summary{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.spec{padding:12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:68px}
.spec small{display:block;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:5px}.spec strong{font-size:13px}
.detail-actions{display:grid;gap:8px;margin-top:19px}.detail-content{padding-top:35px}.detail-content h2{font-size:24px;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:10px}.description{white-space:pre-line;color:var(--muted)}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}.feature{background:var(--surface);padding:13px 14px;font-size:13px}.feature:before{content:"✓";font-weight:900;margin-right:8px;color:var(--brand)}

/* Forms and content */
.form-card,.box,.info-box,.prose{background:var(--surface);border:1px solid var(--line);padding:29px;border-radius:8px}
.form-card{max-width:900px;margin:auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid .full{grid-column:1/-1}.form-note,.note{font-size:12px;color:var(--muted);margin-top:12px}.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.prose h2,.box h2,.info-box h2{font-size:26px;text-transform:uppercase}.prose p,.box p,.info-box p{color:var(--muted)}.check-list{display:grid;gap:10px;padding:0;list-style:none}.check-list li{border-bottom:1px solid var(--line);padding:9px 0}.check-list li:before{content:"✓";font-weight:900;margin-right:9px;color:var(--brand)}
.error,.error-panel{color:#ffbbb5;background:#2c1412;border:1px solid #6e342f;padding:13px;border-radius:6px}.success-panel,.ok{color:#a9efca;background:#10271a;border:1px solid #2c6243;padding:13px;border-radius:6px}
html[data-theme="light"] .error,html[data-theme="light"] .error-panel{color:var(--danger);background:#fff5f4;border-color:#f1c1bd}
html[data-theme="light"] .success-panel,html[data-theme="light"] .ok{color:#0d6a3c;background:#f1fbf5;border-color:#bfe5ce}
.honeypot{position:absolute!important;left:-9999px!important}

/* Footer */
.site-footer{background:#050505;color:#fff;padding-top:52px;border-top:7px solid var(--brand)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}.footer-brand img{width:190px;margin-bottom:17px}.footer-brand p{color:#aaa;max-width:390px;font-size:13px}.footer-phone{font-size:20px;font-weight:900;color:var(--brand)}.footer-grid h3{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8b8b86;margin-bottom:16px}.footer-grid>div:not(.footer-brand) a{display:block;color:#d0d0cc;font-size:13px;margin:9px 0}.footer-grid>div:not(.footer-brand) a:hover{color:var(--brand)}.footer-bottom{border-top:1px solid #292929;display:flex;justify-content:space-between;gap:16px;padding:20px 0 24px;color:#7f7f7a;font-size:11px}
.floating-wa{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;background:var(--wa);display:grid;place-items:center;z-index:99;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .18s}.floating-wa:hover{transform:translateY(-2px) scale(1.02)}.floating-wa svg{width:29px;height:29px;fill:#fff}
.flash-wrap{position:fixed;z-index:999;top:122px;left:50%;transform:translateX(-50%);width:min(690px,calc(100% - 28px))}.flash{padding:13px 15px;background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:6px}.flash-success{border-left:5px solid var(--success)}.flash-error{border-left:5px solid var(--danger)}

@media(max-width:1180px){
  .main-nav{gap:14px}.main-nav a{font-size:11px}.header-cta{display:none}.theme-toggle-label{display:none}.cards{grid-template-columns:repeat(3,1fr)}
  .hero-inner{grid-template-columns:1fr 1fr;gap:28px}.vehicle-search{grid-template-columns:1fr 1fr}.vehicle-search .field{border-bottom:1px solid var(--line)}.vehicle-search .field:nth-of-type(even){border-right:0}.vehicle-search .btn{grid-column:1/-1;min-height:58px;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:900px){
  .container{width:min(var(--max),calc(100% - 28px))}.topbar-inner{justify-content:center}.header-inner{min-height:68px}.brand img{width:150px}.nav-toggle{display:block;order:2}.header-actions{order:3}.main-nav{position:absolute;left:0;right:0;top:99px;display:none;flex-direction:column;align-items:stretch;background:var(--header);border-bottom:1px solid var(--line);padding:8px 20px 20px;gap:0;box-shadow:0 12px 18px rgba(0,0,0,.16)}.main-nav.open{display:flex}.main-nav a{padding:12px 0}.main-nav a:after{bottom:6px}
  .hero{padding:52px 0 45px}.hero-inner{grid-template-columns:1fr}.hero-visual{min-height:200px}.hero-logo{width:460px}.hero:after{width:470px;height:470px;right:-260px;top:-220px}.search-shell{padding:22px 0 36px}.vehicle-search{grid-template-columns:1fr 1fr}.vehicle-search .field{min-height:82px;border-bottom:1px solid var(--line)}.vehicle-search .field:nth-child(even){border-right:0}.vehicle-search .btn{grid-column:1/-1;min-height:56px;border-left:0;border-top:1px solid var(--line)}.cards{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:repeat(3,1fr)}
  .catalog-layout{grid-template-columns:1fr}.filters{position:static}.filters form{grid-template-columns:1fr 1fr;gap:0 18px}.filters h2{grid-column:1/-1}.filters .btn,.filter-clear{grid-column:1/-1}.detail-layout{grid-template-columns:1fr}.detail-card{position:static}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
}
@media(max-width:620px){
  .container{width:min(var(--max),calc(100% - 22px))}.site-topbar{font-size:9px}.topbar-dot{display:none}.topbar-inner{gap:7px;flex-wrap:wrap;padding:4px 0}.topbar-phone{width:100%;text-align:center;margin-left:0}.header-inner{gap:10px}.brand img{width:138px}.theme-toggle{min-width:40px;padding:8px}.theme-toggle-label{display:none}.main-nav{top:116px}
  .hero h1{font-size:39px}.hero-copy{font-size:15px}.hero-actions .btn{width:100%}.hero-visual{min-height:160px}.search-shell{padding:18px 0 30px}.vehicle-search{grid-template-columns:1fr;border-radius:10px}.vehicle-search .field{min-height:76px;border-right:0!important;border-bottom:1px solid var(--line)}.vehicle-search .btn{grid-column:auto;min-height:54px;border-left:0;border-top:0}.section{padding:52px 0}.section-head{display:block}.section-link{display:inline-block;margin-top:12px}.cards{grid-template-columns:1fr}.category-grid{grid-template-columns:1fr 1fr}.category-card{min-height:120px}.split{grid-template-columns:1fr}.promo{min-height:285px;padding:27px}.promo h2{font-size:30px}.trust-grid{grid-template-columns:1fr}.trust-item{border-right:0;border-bottom:1px solid var(--line)}.trust-item:last-child{border-bottom:0}.branches-grid{grid-template-columns:1fr}.branch-map{height:210px}.branch-map-large{height:250px}.catalog-top{align-items:flex-start;flex-direction:column}.sort-select{width:100%}.filters form{grid-template-columns:1fr}.filters h2,.filters .btn,.filter-clear{grid-column:auto}.thumbs{grid-template-columns:repeat(4,1fr)}.detail-card h1{font-size:28px}.detail-price{font-size:30px}.detail-summary{grid-template-columns:1fr 1fr}.features{grid-template-columns:1fr}.form-grid,.content-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.form-card,.box,.info-box,.prose{padding:21px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{flex-direction:column}.floating-wa{width:54px;height:54px;right:13px;bottom:13px}.flash-wrap{top:128px}
}

/* ========================================================================== 
   FLACO AUTOMOTORES — PREMIUM VISUAL LAYER
   Solo CSS. No altera estructura, contenido, enlaces ni funcionalidades.
   Inspiración: concesionarias premium / performance / luxury automotive.
   ========================================================================== */

:root{
  --ease-premium:cubic-bezier(.22,1,.36,1);
  --ease-snappy:cubic-bezier(.2,.8,.2,1);
  --shadow-premium:0 24px 70px rgba(0,0,0,.28);
  --shadow-card:0 12px 34px rgba(0,0,0,.18);
  --shadow-card-hover:0 28px 70px rgba(0,0,0,.32);
  --gold-glow:0 0 0 1px rgba(255,212,0,.18),0 16px 42px rgba(255,212,0,.08);
  --glass:rgba(18,18,18,.76);
  --glass-strong:rgba(12,12,12,.9);
  --glass-line:rgba(255,255,255,.1);
  --radius:12px;
  --radius-lg:22px;
}

html[data-theme="light"]{
  --shadow-premium:0 24px 70px rgba(20,20,18,.14);
  --shadow-card:0 10px 30px rgba(20,20,18,.09);
  --shadow-card-hover:0 24px 55px rgba(20,20,18,.16);
  --gold-glow:0 0 0 1px rgba(205,169,0,.16),0 14px 34px rgba(205,169,0,.08);
  --glass:rgba(255,255,255,.78);
  --glass-strong:rgba(255,255,255,.93);
  --glass-line:rgba(10,10,10,.08);
}

html{
  scrollbar-width:thin;
  scrollbar-color:var(--brand) var(--surface-2);
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--surface-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand),var(--brand-deep));border:2px solid var(--surface-2);border-radius:99px}
::selection{background:var(--brand);color:#111}

body{
  font-family:Inter,"SF Pro Display","Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  letter-spacing:-.006em;
  background:
    radial-gradient(circle at 10% -10%,rgba(255,212,0,.055),transparent 26rem),
    radial-gradient(circle at 92% 22%,rgba(255,255,255,.025),transparent 24rem),
    var(--bg);
}

html[data-theme="light"] body{
  background:
    radial-gradient(circle at 8% -10%,rgba(255,212,0,.095),transparent 28rem),
    linear-gradient(180deg,#fff 0%,#fbfbf8 44%,#fff 100%);
}

body,a,button,input,select,textarea{transition-color:color .24s var(--ease-premium)}

.container{width:min(var(--max),calc(100% - 48px))}

/* Header premium */
.site-header{
  background:color-mix(in srgb,var(--header) 88%,transparent);
  border-bottom-color:color-mix(in srgb,var(--line) 72%,transparent);
  box-shadow:0 10px 34px rgba(0,0,0,.12);
  backdrop-filter:saturate(145%) blur(16px);
  -webkit-backdrop-filter:saturate(145%) blur(16px);
}

.site-topbar{
  background:linear-gradient(90deg,#050505 0%,#111 50%,#050505 100%);
  border-bottom:1px solid rgba(255,255,255,.055);
}

.topbar-inner{min-height:32px}
.topbar-phone{text-shadow:0 0 22px rgba(255,212,0,.24)}

.header-inner{min-height:82px}

.brand img{
  width:184px;
  transition:transform .55s var(--ease-premium),filter .55s var(--ease-premium);
  filter:drop-shadow(0 7px 18px rgba(0,0,0,.18));
}
.brand:hover img{transform:translateY(-1px) scale(1.025);filter:drop-shadow(0 10px 22px rgba(255,212,0,.11))}

.main-nav{gap:25px}
.main-nav a{
  letter-spacing:.045em;
  opacity:.86;
  transition:opacity .3s var(--ease-premium),color .3s var(--ease-premium),transform .3s var(--ease-premium);
}
.main-nav a:hover,.main-nav a.active{opacity:1;color:var(--text);transform:translateY(-1px)}
.main-nav a:after{
  height:2px;
  right:100%;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand),#fff7aa);
  box-shadow:0 0 14px rgba(255,212,0,.35);
  transition:right .42s var(--ease-premium);
}

.theme-toggle{
  border-radius:999px;
  border-color:color-mix(in srgb,var(--line) 75%,transparent);
  background:color-mix(in srgb,var(--surface-2) 88%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.08);
  transition:transform .35s var(--ease-premium),border-color .35s var(--ease-premium),background .35s var(--ease-premium),box-shadow .35s var(--ease-premium);
}
.theme-toggle:hover{transform:translateY(-2px);border-color:rgba(255,212,0,.65);box-shadow:var(--gold-glow)}

.nav-toggle{border-radius:10px;transition:background .25s var(--ease-premium),transform .25s var(--ease-premium)}
.nav-toggle:hover{background:var(--surface-2);transform:scale(1.03)}
.nav-toggle span{transition:transform .3s var(--ease-premium),opacity .3s var(--ease-premium)}

/* Buttons */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:10px;
  letter-spacing:.07em;
  box-shadow:0 7px 18px rgba(0,0,0,.08);
  transition:transform .34s var(--ease-premium),box-shadow .34s var(--ease-premium),background .34s var(--ease-premium),border-color .34s var(--ease-premium),color .34s var(--ease-premium);
}
.btn:before{
  content:"";
  position:absolute;
  inset:-2px auto -2px -45%;
  width:38%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  opacity:0;
  z-index:-1;
  transition:left .65s var(--ease-premium),opacity .25s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.17)}
.btn:hover:before{left:110%;opacity:.85}
.btn:active{transform:translateY(-1px) scale(.985);transition-duration:.08s}
.btn-brand{box-shadow:0 10px 26px rgba(255,212,0,.15)}
.btn-brand:hover{box-shadow:0 16px 34px rgba(255,212,0,.24)}
.btn-outline:hover{box-shadow:0 12px 30px rgba(0,0,0,.13)}
.section-link{transition:color .28s var(--ease-premium),border-color .28s var(--ease-premium),letter-spacing .28s var(--ease-premium)}
.section-link:hover{color:var(--brand);letter-spacing:.085em}

/* Cinematic hero */
.hero{
  min-height:540px;
  padding:82px 0 72px;
  background:
    linear-gradient(120deg,rgba(0,0,0,.08),transparent 45%),
    radial-gradient(circle at 82% 48%,rgba(255,212,0,.105),transparent 28%),
    linear-gradient(145deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 92%,#000) 100%);
  isolation:isolate;
}

.hero:after{
  width:680px;
  height:680px;
  right:-255px;
  top:-320px;
  background:
    radial-gradient(circle at 38% 38%,#fff9b8 0 4%,var(--brand) 18%,#d7ae00 57%,rgba(255,212,0,.72) 72%,transparent 73%);
  opacity:.88;
  filter:blur(.15px);
  box-shadow:0 0 90px rgba(255,212,0,.14);
  animation:heroOrb 14s ease-in-out infinite alternate;
}

.hero:before{
  width:420px;
  height:420px;
  right:250px;
  bottom:-330px;
  background:radial-gradient(circle,rgba(255,255,255,.08),transparent 68%);
  opacity:.8;
  filter:blur(1px);
  animation:heroAmbient 10s ease-in-out infinite alternate;
}

.hero-inner{gap:70px}
.eyebrow{letter-spacing:.2em;border-left-width:3px;padding-left:12px}
.hero h1{
  font-size:clamp(46px,5.8vw,82px);
  letter-spacing:-.062em;
  text-wrap:balance;
  text-shadow:0 10px 28px rgba(0,0,0,.15);
}
.hero-copy{font-size:18px;line-height:1.7;max-width:610px}
.hero-actions{gap:12px}
.hero-visual{perspective:1200px}
.hero-logo{
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.42));
  transform:translateZ(0);
  transition:transform .8s var(--ease-premium),filter .8s var(--ease-premium);
  animation:logoFloat 6s ease-in-out infinite;
}
.hero-visual:hover .hero-logo{transform:translateY(-7px) scale(1.018);filter:drop-shadow(0 34px 42px rgba(0,0,0,.48))}
.hero-visual:after{height:82px;bottom:36px;opacity:.72;transition:transform .8s var(--ease-premium),opacity .8s var(--ease-premium)}
.hero-visual:hover:after{transform:scaleX(.88);opacity:.52}

/* Search bar */
.search-shell{
  padding:34px 0 52px;
  background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 94%,var(--surface-2)));
}
.vehicle-search{
  position:relative;
  border-radius:18px;
  border-color:color-mix(in srgb,var(--line) 86%,transparent);
  box-shadow:0 20px 55px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
  background:color-mix(in srgb,var(--surface) 93%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .45s var(--ease-premium),box-shadow .45s var(--ease-premium),border-color .45s var(--ease-premium);
}
.vehicle-search:hover{transform:translateY(-2px);box-shadow:0 26px 68px rgba(0,0,0,.23);border-color:color-mix(in srgb,var(--brand) 22%,var(--line))}
.vehicle-search .field{
  min-height:92px;
  transition:background .28s var(--ease-premium),box-shadow .28s var(--ease-premium);
}
.vehicle-search .field:focus-within{background:color-mix(in srgb,var(--brand) 5%,var(--surface));box-shadow:inset 0 -2px 0 var(--brand)}
.vehicle-search .field label{letter-spacing:.12em}
.vehicle-search .field input,.vehicle-search .field select{font-size:15.5px;transition:color .25s ease,transform .25s var(--ease-premium)}
.vehicle-search .field:focus-within input,.vehicle-search .field:focus-within select{transform:translateX(2px)}
.vehicle-search .btn{border-radius:0 17px 17px 0;box-shadow:none}

/* Section hierarchy */
.section{padding:84px 0}
.section-soft{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 96%,transparent),var(--surface-2));
  border-block:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.section-head{margin-bottom:36px}
.section-head h2{font-size:clamp(31px,3.7vw,50px);letter-spacing:-.052em;text-wrap:balance}
.section-head p{line-height:1.75}

/* Vehicle cards */
.cards{gap:24px}
.vehicle-card{
  position:relative;
  border-radius:18px;
  border-color:color-mix(in srgb,var(--line) 84%,transparent);
  box-shadow:var(--shadow-card);
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .55s var(--ease-premium),box-shadow .55s var(--ease-premium),border-color .45s var(--ease-premium),background .35s ease;
}
.vehicle-card:before{
  content:"";
  position:absolute;
  z-index:5;
  inset:0 18% auto;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:0;
  transform:scaleX(.55);
  transition:opacity .45s var(--ease-premium),transform .55s var(--ease-premium);
}
.vehicle-card:hover{
  transform:translateY(-9px);
  box-shadow:var(--shadow-card-hover);
  border-color:color-mix(in srgb,var(--brand) 48%,var(--line));
}
.vehicle-card:hover:before{opacity:1;transform:scaleX(1)}
.vehicle-card-media{aspect-ratio:16/11;background:linear-gradient(145deg,var(--surface-3),var(--surface-2))}
.vehicle-card-media:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 54%,rgba(0,0,0,.27) 100%);
  opacity:.62;
  pointer-events:none;
  transition:opacity .5s var(--ease-premium);
}
.vehicle-card-media img{
  transform:scale(1.001);
  transition:transform .8s var(--ease-premium),filter .65s var(--ease-premium);
}
.vehicle-card:hover .vehicle-card-media img{transform:scale(1.065);filter:saturate(1.05) contrast(1.02)}
.vehicle-card:hover .vehicle-card-media:after{opacity:.38}
.badge-row{padding:12px}
.badge{padding:7px 9px;border-radius:999px;box-shadow:0 7px 16px rgba(0,0,0,.2);backdrop-filter:blur(8px)}
.badge:not(.badge-brand){background:rgba(16,16,16,.78);border:1px solid rgba(255,255,255,.1)}
.badge-brand{box-shadow:0 8px 20px rgba(255,212,0,.18)}
.vehicle-card-body{padding:21px 20px 19px}
.vehicle-status-text{letter-spacing:.13em}
.vehicle-card h3{font-size:19px;letter-spacing:-.02em;margin-top:6px;transition:color .28s ease}
.vehicle-card:hover h3{color:color-mix(in srgb,var(--text) 88%,var(--brand))}
.vehicle-card h3 a:hover{text-decoration:none;color:var(--brand)}
.vehicle-meta{gap:8px;margin-bottom:15px}
.vehicle-price{font-size:24px;line-height:1.1}
.vehicle-footer{margin-top:17px;padding-top:15px}

/* Categories */
.category-grid{gap:10px;background:transparent;border:0;border-radius:0;overflow:visible}
.category-card{
  position:relative;
  min-height:154px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 7px 22px rgba(0,0,0,.06);
  transition:transform .48s var(--ease-premium),box-shadow .48s var(--ease-premium),background .38s var(--ease-premium),border-color .38s var(--ease-premium),color .38s var(--ease-premium);
}
.category-card:after{content:"";position:absolute;width:100px;height:100px;border:24px solid currentColor;border-radius:50%;right:-52px;bottom:-58px;opacity:.035;transition:transform .55s var(--ease-premium),opacity .55s ease}
.category-card:hover{transform:translateY(-6px);background:var(--brand);color:#111;border-color:var(--brand);box-shadow:0 22px 45px rgba(0,0,0,.16)}
.category-card:hover:after{transform:scale(1.3);opacity:.07}
.category-icon{transition:transform .45s var(--ease-premium),background .35s ease}
.category-card:hover .category-icon{transform:rotate(-8deg) scale(1.07);background:rgba(255,255,255,.2)}

/* Promo / trust */
.split{gap:24px}
.promo{
  min-height:350px;
  padding:44px;
  border-radius:20px;
  box-shadow:var(--shadow-card);
  transition:transform .55s var(--ease-premium),box-shadow .55s var(--ease-premium),border-color .4s ease;
}
.promo:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.promo:after{transition:transform .8s var(--ease-premium),opacity .6s ease}
.promo:hover:after{transform:translate(-22px,-18px) scale(1.08)}
.promo h2{font-size:clamp(31px,3.1vw,42px)}
.promo-brand{box-shadow:0 20px 50px rgba(255,212,0,.11)}
.trust-grid{gap:10px;background:transparent;border:0;border-radius:0;overflow:visible}
.trust-item{
  position:relative;
  border:1px solid var(--line)!important;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition:transform .45s var(--ease-premium),box-shadow .45s var(--ease-premium),border-color .35s ease;
}
.trust-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--brand),var(--brand-deep));transform:scaleY(.35);opacity:.45;transform-origin:center;transition:transform .45s var(--ease-premium),opacity .45s ease}
.trust-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))!important}
.trust-item:hover:before{transform:scaleY(1);opacity:1}

/* Branches and maps */
.branches-grid{gap:24px}
.branch-card{
  border-radius:18px;
  border-color:color-mix(in srgb,var(--line) 85%,transparent);
  box-shadow:var(--shadow-card);
  transition:transform .5s var(--ease-premium),box-shadow .5s var(--ease-premium),border-color .4s ease;
}
.branch-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);border-color:color-mix(in srgb,var(--brand) 34%,var(--line))}
.branch-map{height:235px;overflow:hidden}
.branch-map iframe{filter:saturate(.9) contrast(1.02);transition:filter .45s ease,transform .8s var(--ease-premium);transform:scale(1.001)}
.branch-card:hover .branch-map iframe{filter:saturate(1.02) contrast(1.03);transform:scale(1.012)}
.branch-card-content{padding:29px}
.branch-phone a{transition:color .25s ease,text-shadow .25s ease}
.branch-phone a:hover{text-shadow:0 0 18px rgba(255,212,0,.28)}

/* Inner page hero */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:58px 0 50px;
  background:
    radial-gradient(circle at 86% 30%,rgba(255,212,0,.16),transparent 24rem),
    linear-gradient(130deg,#080808,#151515 68%,#0b0b0b);
  border-bottom-width:4px;
}
.page-hero:after{content:"";position:absolute;right:-80px;top:-120px;width:330px;height:330px;border:65px solid rgba(255,212,0,.09);border-radius:50%;pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-size:clamp(38px,4.8vw,64px);letter-spacing:-.056em;text-shadow:0 12px 30px rgba(0,0,0,.3)}

/* Filters / catalog */
.catalog-layout{gap:38px}
.filters{
  top:132px;
  border-radius:16px;
  border-top-width:3px;
  padding:0 20px 20px;
  box-shadow:var(--shadow-card);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(12px);
}
.filters .field input,.filters .field select,.sort-select{
  border-radius:10px;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease,transform .3s var(--ease-premium);
}
.filters .field input:focus,.filters .field select:focus,.sort-select:focus{transform:translateY(-1px)}
.catalog-top{padding-bottom:16px}

/* Vehicle detail */
.gallery-main{
  border-radius:18px;
  box-shadow:var(--shadow-card);
  transition:box-shadow .5s var(--ease-premium),border-color .45s ease;
}
.gallery-main:hover{box-shadow:var(--shadow-card-hover);border-color:color-mix(in srgb,var(--brand) 28%,var(--line))}
.gallery-main img{transition:transform 1s var(--ease-premium)}
.gallery-main:hover img{transform:scale(1.018)}
.thumbs{gap:9px;margin-top:11px}
.thumb{border-radius:9px;opacity:.78;transition:transform .34s var(--ease-premium),opacity .34s ease,border-color .34s ease,box-shadow .34s ease}
.thumb:hover,.thumb.active{opacity:1;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.14)}
.detail-card{
  top:132px;
  border-top-width:4px;
  border-radius:18px;
  padding:27px;
  box-shadow:var(--shadow-premium);
}
.detail-card h1{font-size:36px;letter-spacing:-.045em}
.detail-price{font-size:40px}
.detail-summary{border-radius:12px;overflow:hidden}
.spec{transition:background .28s ease}
.spec:hover{background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.features{border-radius:12px;gap:1px}
.feature{transition:background .25s ease,transform .25s var(--ease-premium)}
.feature:hover{background:color-mix(in srgb,var(--brand) 5%,var(--surface));transform:translateX(2px)}

/* Forms / content */
.form-card,.box,.info-box,.prose{
  border-radius:18px;
  box-shadow:var(--shadow-card);
  border-color:color-mix(in srgb,var(--line) 86%,transparent);
}
.field input,.field select,.field textarea{
  border-radius:10px;
  transition:border-color .28s ease,box-shadow .28s ease,background .28s ease,transform .28s var(--ease-premium);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:color-mix(in srgb,var(--brand) 28%,var(--line))}
.field input:focus,.field select:focus,.field textarea:focus{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(255,212,0,.12),0 8px 22px rgba(0,0,0,.08)}

/* Footer */
.site-footer{
  position:relative;
  background:
    radial-gradient(circle at 8% 0%,rgba(255,212,0,.07),transparent 25rem),
    linear-gradient(180deg,#080808 0%,#030303 100%);
  border-top-width:5px;
}
.footer-brand img{filter:drop-shadow(0 10px 18px rgba(0,0,0,.26))}
.footer-grid>div:not(.footer-brand) a{position:relative;width:max-content;max-width:100%;transition:color .28s ease,transform .28s var(--ease-premium)}
.footer-grid>div:not(.footer-brand) a:hover{transform:translateX(4px)}

/* Floating WhatsApp */
.floating-wa{
  width:60px;
  height:60px;
  box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 0 0 rgba(37,211,102,.28);
  transition:transform .42s var(--ease-premium),box-shadow .42s var(--ease-premium),filter .42s ease;
  animation:waPulse 4s ease-in-out infinite;
}
.floating-wa:hover{transform:translateY(-5px) scale(1.055);filter:saturate(1.08);box-shadow:0 18px 38px rgba(0,0,0,.35),0 0 0 8px rgba(37,211,102,.09)}

.flash{border-radius:12px;backdrop-filter:blur(12px)}

/* Light theme refinements */
html[data-theme="light"] .site-header{box-shadow:0 10px 30px rgba(25,25,20,.08)}
html[data-theme="light"] .hero{
  background:
    radial-gradient(circle at 82% 45%,rgba(255,212,0,.16),transparent 28%),
    linear-gradient(145deg,#fff 0%,#f5f5f1 100%);
}
html[data-theme="light"] .hero h1{text-shadow:none}
html[data-theme="light"] .vehicle-search{box-shadow:0 20px 50px rgba(35,35,28,.11)}
html[data-theme="light"] .vehicle-card-media:after{background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.16) 100%)}
html[data-theme="light"] .page-hero{background:linear-gradient(130deg,#111,#252525 72%,#151515)}

/* Motion */
@keyframes heroOrb{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-18px,20px,0) scale(1.035)}
}
@keyframes heroAmbient{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(18px,-12px,0) scale(1.08)}
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes waPulse{
  0%,72%,100%{box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 0 0 rgba(37,211,102,.25)}
  84%{box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 0 9px rgba(37,211,102,0)}
}

/* Responsive premium */
@media(max-width:1180px){
  .container{width:min(var(--max),calc(100% - 36px))}
  .main-nav{gap:15px}
  .vehicle-search .btn{border-radius:0 0 17px 17px}
  .cards{gap:19px}
}

@media(max-width:900px){
  .container{width:min(var(--max),calc(100% - 30px))}
  .site-header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .main-nav{
    top:101px;
    padding:12px 24px 24px;
    background:color-mix(in srgb,var(--header) 94%,transparent);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 22px 42px rgba(0,0,0,.2);
  }
  .main-nav a{padding:14px 2px;font-size:12px}
  .hero{min-height:auto;padding:62px 0 52px}
  .hero-inner{gap:34px}
  .hero h1{font-size:clamp(42px,8vw,64px)}
  .hero-logo{animation-duration:7s}
  .vehicle-search{border-radius:16px}
  .vehicle-search .btn{border-radius:0 0 15px 15px}
  .section{padding:68px 0}
  .category-grid{gap:12px}
  .promo{padding:34px}
  .detail-card{box-shadow:var(--shadow-card)}
}

@media(max-width:620px){
  .container{width:min(var(--max),calc(100% - 20px))}
  .site-header{box-shadow:0 8px 26px rgba(0,0,0,.14)}
  .header-inner{min-height:70px}
  .brand img{width:142px}
  .main-nav{top:118px;padding-inline:18px}
  .hero{padding:44px 0 38px;min-height:auto}
  .hero:after{width:390px;height:390px;right:-265px;top:-205px;opacity:.72}
  .hero:before{display:none}
  .hero-inner{gap:22px}
  .hero h1{font-size:38px;line-height:.98;letter-spacing:-.052em;margin:14px 0 18px}
  .hero-copy{font-size:15px;line-height:1.62;margin-bottom:22px}
  .hero-actions{gap:9px}
  .hero-actions .btn{min-height:49px}
  .hero-visual{min-height:145px}
  .hero-logo{width:min(390px,94%);animation:none}
  .hero-visual:hover .hero-logo{transform:none}
  .search-shell{padding:16px 0 34px}
  .vehicle-search{border-radius:15px;box-shadow:0 16px 38px rgba(0,0,0,.17)}
  .vehicle-search:hover{transform:none}
  .vehicle-search .field{min-height:74px;padding:13px 16px}
  .vehicle-search .btn{min-height:56px;border-radius:0 0 14px 14px}
  .section{padding:56px 0}
  .section-head{margin-bottom:26px}
  .section-head h2{font-size:32px;line-height:1.04}
  .cards{gap:18px}
  .vehicle-card{border-radius:16px}
  .vehicle-card:hover{transform:translateY(-4px)}
  .vehicle-card-body{padding:18px 17px 17px}
  .vehicle-card h3{min-height:auto;font-size:18px}
  .vehicle-price{font-size:23px}
  .category-grid{gap:9px}
  .category-card{min-height:126px;padding:17px;border-radius:14px}
  .category-card:hover{transform:translateY(-3px)}
  .category-icon{width:38px;height:38px;font-size:21px}
  .promo{min-height:290px;padding:28px;border-radius:16px}
  .promo:hover{transform:translateY(-3px)}
  .trust-item{border-radius:14px;padding:24px 22px}
  .branch-card{border-radius:16px}
  .branch-card:hover{transform:translateY(-3px)}
  .branch-card-content{padding:23px}
  .branch-map{height:205px}
  .page-hero{padding:44px 0 38px}
  .page-hero h1{font-size:36px}
  .filters{border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.1)}
  .gallery-main{border-radius:14px}
  .detail-card{border-radius:16px;padding:22px}
  .detail-card h1{font-size:29px}
  .detail-price{font-size:31px}
  .form-card,.box,.info-box,.prose{border-radius:15px}
  .floating-wa{width:55px;height:55px;right:13px;bottom:13px;animation:none}
}

@media(max-width:390px){
  .container{width:min(var(--max),calc(100% - 16px))}
  .brand img{width:128px}
  .header-actions{gap:5px}
  .theme-toggle{min-width:38px;min-height:38px}
  .hero h1{font-size:34px}
  .hero-actions .btn{padding-inline:14px}
  .category-grid{grid-template-columns:1fr}
  .category-card{min-height:112px}
  .detail-summary{grid-template-columns:1fr}
  .spec{min-height:61px}
}

/* Respect accessibility preferences and keep the page lightweight */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* =========================================================
   FLACO AUTOMOTORES — HERO CINEMATOGRÁFICO + GALERÍA 10 FOTOS
   ========================================================= */
.hero{
  position:relative;
  isolation:isolate;
  min-height:clamp(560px,70vh,760px);
  padding:clamp(72px,9vw,120px) 0 clamp(64px,8vw,100px);
  overflow:hidden;
  background:#050505;
  border-bottom:1px solid color-mix(in srgb,var(--brand) 16%,var(--line));
}
.hero::before{
  content:"";
  position:absolute;
  inset:-4%;
  z-index:-3;
  width:auto;
  height:auto;
  border-radius:0;
  background-image:url('../img/hero-flaco-premium.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  opacity:1;
  filter:saturate(1.05) contrast(1.04) brightness(.92);
  transform:scale(1.035);
  animation:flacoHeroDrift 16s cubic-bezier(.2,.65,.2,1) infinite alternate;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  width:auto;
  height:auto;
  border-radius:0;
  opacity:1;
  filter:none;
  box-shadow:none;
  background:
    radial-gradient(circle at 68% 48%,rgba(255,204,55,.11),transparent 31%),
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 30%,rgba(0,0,0,.38) 49%,rgba(0,0,0,.04) 72%),
    linear-gradient(180deg,rgba(0,0,0,.16) 0%,transparent 35%,rgba(0,0,0,.28) 100%);
  animation:flacoGoldBreath 7s ease-in-out infinite alternate;
}
.hero-inner{
  grid-template-columns:minmax(0,780px) 1fr;
  align-items:center;
  min-height:inherit;
}
.hero-inner>div:first-child{
  position:relative;
  padding:30px 0;
  animation:flacoHeroContent .9s cubic-bezier(.16,1,.3,1) both;
}
.hero-visual{display:none!important}
.hero .eyebrow{color:#f4d35d;text-shadow:0 2px 18px rgba(255,196,40,.18)}
.hero h1{
  color:#fff;
  max-width:720px;
  text-shadow:0 8px 42px rgba(0,0,0,.62);
}
.hero h1 span{
  color:#ffd44d;
  text-shadow:0 0 26px rgba(255,194,36,.12),0 8px 42px rgba(0,0,0,.56);
}
.hero-copy{
  color:rgba(255,255,255,.77);
  max-width:610px;
  text-shadow:0 3px 18px rgba(0,0,0,.55);
}
.hero-actions .btn{
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.hero-actions .btn-dark{
  background:rgba(12,12,12,.78);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 16px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-actions .btn-outline{
  color:#fff;
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-actions .btn:hover{border-color:rgba(255,212,0,.58)}

.gallery-main{position:relative;isolation:isolate}
.gallery-main img{object-fit:cover;object-position:center;transition:opacity .22s ease,transform .75s var(--ease-premium),filter .4s ease}
.gallery-main img.is-switching{opacity:.35;transform:scale(1.018);filter:brightness(.82)}
.gallery-nav{
  position:absolute;
  z-index:4;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:rgba(7,7,7,.55);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  transition:transform .3s var(--ease-premium),background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.gallery-prev{left:16px}.gallery-next{right:16px}
.gallery-nav:hover{background:rgba(255,212,0,.92);color:#090909;border-color:#ffd400;box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 24px rgba(255,212,0,.18)}
.gallery-prev:hover{transform:translateY(-50%) translateX(-3px)}
.gallery-next:hover{transform:translateY(-50%) translateX(3px)}
.gallery-counter{
  position:absolute;
  z-index:4;
  right:14px;
  bottom:14px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(5,5,5,.58);
  color:#fff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.thumbs{
  display:flex;
  grid-template-columns:none;
  gap:9px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:3px 2px 8px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--brand) transparent;
}
.thumb{flex:0 0 112px;scroll-snap-align:center;object-fit:cover}
.thumb img{object-fit:cover;object-position:center}
.thumbs::-webkit-scrollbar{height:5px}.thumbs::-webkit-scrollbar-thumb{background:var(--brand);border-radius:99px}.thumbs::-webkit-scrollbar-track{background:transparent}

@keyframes flacoHeroDrift{
  0%{transform:scale(1.035) translate3d(-.3%,0,0)}
  100%{transform:scale(1.075) translate3d(.65%,-.45%,0)}
}
@keyframes flacoGoldBreath{
  0%{opacity:.88}
  100%{opacity:1}
}
@keyframes flacoHeroContent{
  from{opacity:0;transform:translate3d(0,24px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

@media(max-width:900px){
  .hero{min-height:590px;padding:70px 0 62px}
  .hero::before{background-position:66% center;transform:scale(1.05)}
  .hero::after{background:linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.72) 53%,rgba(0,0,0,.16) 100%),linear-gradient(180deg,rgba(0,0,0,.18),transparent 40%,rgba(0,0,0,.34))}
  .hero-inner{grid-template-columns:1fr;min-height:auto}
  .hero-inner>div:first-child{max-width:650px}
}
@media(max-width:620px){
  .hero{min-height:610px;padding:76px 0 58px;align-items:flex-end}
  .hero::before{inset:-2%;background-size:auto 100%;background-position:68% center;animation:none;transform:scale(1.02)}
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.34) 32%,rgba(0,0,0,.88) 70%,rgba(0,0,0,.97) 100%),linear-gradient(90deg,rgba(0,0,0,.46),transparent 75%)}
  .hero-inner{align-items:end;min-height:470px}
  .hero-inner>div:first-child{padding:0 0 8px}
  .hero h1{color:#fff;text-shadow:0 8px 30px rgba(0,0,0,.72)}
  .hero-copy{color:rgba(255,255,255,.78)}
  .gallery-nav{width:40px;height:40px;font-size:26px}
  .gallery-prev{left:9px}.gallery-next{right:9px}
  .gallery-counter{right:9px;bottom:9px}
  .thumb{flex-basis:88px}
}
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.hero-inner>div:first-child{animation:none!important}
  .gallery-main img,.gallery-nav{transition:none!important}
}

/* =========================================================
   HERO PERFORMANCE FIX v2 — desktop + mobile optimizados
   ========================================================= */
.hero::before{
  inset:0;
  background-image:url('../img/hero-flaco-desktop.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.012);
  filter:saturate(1.04) contrast(1.03) brightness(.94);
  will-change:transform;
}

@media (max-width:900px){
  .hero::before{
    background-image:url('../img/hero-flaco-mobile.jpg');
    background-size:cover;
    background-position:center top;
    transform:none;
    animation:none;
    will-change:auto;
    filter:saturate(1.03) contrast(1.02) brightness(.96);
  }
  .hero::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.13) 30%,rgba(0,0,0,.74) 62%,rgba(0,0,0,.96) 100%),
      linear-gradient(90deg,rgba(0,0,0,.18),transparent 76%);
    animation:none;
  }
}

@media (max-width:620px){
  .hero{
    min-height:640px;
    padding:72px 0 46px;
    background:#050505;
  }
  .hero::before{
    inset:0;
    background-image:url('../img/hero-flaco-mobile.jpg');
    background-size:cover;
    background-position:center top;
    opacity:1;
    transform:none;
    animation:none;
  }
  .hero-inner{
    min-height:520px;
    align-items:end;
  }
  .hero-inner>div:first-child{
    padding:0 0 4px;
  }
}

/* =========================================================
   HERO MOBILE VISIBILITY FIX v3
   Corrige la capa del fondo: el pseudo-elemento quedaba
   detrás del fondo negro del propio .hero en algunos móviles.
   ========================================================= */
.hero{
  position:relative;
  isolation:isolate;
  background:#050505;
}
.hero::before{
  z-index:0 !important;
  pointer-events:none;
  display:block;
  background-image:url('../img/hero-flaco-desktop-v3.jpg') !important;
}
.hero::after{
  z-index:1 !important;
  pointer-events:none;
}
.hero .hero-inner{
  position:relative;
  z-index:2 !important;
}
@media (max-width:900px){
  .hero::before{
    z-index:0 !important;
    background-image:url('../img/hero-flaco-mobile-v3.jpg') !important;
    background-size:cover !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    filter:saturate(1.03) contrast(1.03) brightness(.98) !important;
  }
  .hero::after{z-index:1 !important;}
  .hero .hero-inner{z-index:2 !important;}
}
@media (max-width:620px){
  .hero{
    min-height:640px;
    background:#050505;
  }
  .hero::before{
    inset:0 !important;
    background-position:center top !important;
  }
}

/* =========================================================
   MOBILE IMAGE / OVERFLOW FIX v4
   Evita que galerías, miniaturas o imágenes de publicaciones
   ensanchen el viewport en móviles.
   ========================================================= */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
@supports not (overflow-x:clip){
  html,body{overflow-x:hidden}
}

main,
section,
.container,
.detail-layout,
.detail-layout > *,
.gallery-main,
.thumbs,
.detail-content,
.detail-card,
.cards,
.vehicle-card,
.vehicle-card-media{
  min-width:0;
  max-width:100%;
}

img,
picture,
video,
iframe{
  max-width:100%;
}

.gallery-main{
  width:100%;
  max-width:100%;
  margin-inline:auto;
  overflow:hidden;
}
.gallery-main img{
  display:block;
  width:100%;
  max-width:100%;
  height:100%;
}

.thumbs{
  width:100%;
  max-width:100%;
  min-width:0;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.thumb{
  min-width:0;
  max-width:112px;
}
.thumb img{
  display:block;
  width:100%;
  max-width:100%;
  height:100%;
}

.vehicle-card-media,
.vehicle-card-media img{
  max-width:100%;
}
.vehicle-card-media img{
  width:100%;
  height:100%;
}

@media(max-width:620px){
  .container{
    width:calc(100% - 24px);
    max-width:100%;
    margin-inline:auto;
  }

  .detail-layout{
    width:100%;
    max-width:100%;
    gap:18px;
  }

  .gallery-main{
    width:100%;
    max-width:100%;
    aspect-ratio:4/3;
    margin:0;
    border-radius:14px;
  }
  .gallery-main img{
    width:100%;
    max-width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:#050505;
  }

  .thumbs{
    width:100%;
    max-width:100%;
    margin:0;
    padding:8px 0 5px;
    gap:8px;
  }
  .thumb{
    flex:0 0 78px;
    width:78px;
    max-width:78px;
    aspect-ratio:4/3;
  }
  .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .vehicle-card,
  .vehicle-card-media,
  .vehicle-card-body,
  .detail-card,
  .detail-content{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .vehicle-card-media img{
    width:100%;
    max-width:100%;
    height:100%;
    object-fit:cover;
  }
}

@media(max-width:390px){
  .container{width:calc(100% - 20px)}
  .thumb{
    flex-basis:72px;
    width:72px;
    max-width:72px;
  }
}