/* Baniski Auto — direção visual premium 2026.
   Este arquivo é carregado por último e concentra apenas apresentação.
   Não altera a lógica do estoque, API, filtros ou financiamento. */

:root{
  --premium-bg:#07090c;
  --premium-panel:#10141a;
  --premium-panel-2:#151a21;
  --premium-line:rgba(208,217,229,.16);
  --premium-line-strong:rgba(222,229,238,.28);
  --premium-text:#f7f8fa;
  --premium-muted:#9ba4b0;
  --premium-silver:#d8dde5;
  --premium-blue:#0f2c48;
  --premium-shadow:0 24px 70px rgba(0,0,0,.38);
}

html{background:var(--premium-bg)}
body{
  background:
    radial-gradient(circle at 50% -10%,rgba(28,66,101,.20),transparent 34rem),
    linear-gradient(180deg,#07090c 0%,#090b0f 45%,#06080a 100%);
  color:var(--premium-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* HEADER */
.site-header{
  min-height:86px!important;
  background:rgba(7,9,12,.80)!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.14);
  backdrop-filter:blur(22px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
}
.brand-logo-image{
  width:205px!important;
  filter:drop-shadow(0 5px 15px rgba(0,0,0,.35));
}
.header-tabs{
  gap:7px!important;
  padding:5px!important;
  border-radius:15px!important;
  background:rgba(21,25,31,.78)!important;
  border:1px solid rgba(218,225,235,.19)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 10px 30px rgba(0,0,0,.22)!important;
}
.header-tab{
  min-height:44px!important;
  padding-inline:20px!important;
  border-radius:11px!important;
  letter-spacing:-.01em;
}
.header-tab.active{
  background:linear-gradient(145deg,#f1f3f6 0%,#c3c9d2 100%)!important;
  color:#0d1116!important;
  box-shadow:0 5px 17px rgba(0,0,0,.25),inset 0 1px #fff!important;
}
.nav a{position:relative;color:#c7ccd4!important}
.nav a:after{
  content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;
  background:#eef1f5;transition:right .22s ease;
}
.nav a:hover:after{right:0}
.menu-button{border:1px solid rgba(255,255,255,.12)!important;border-radius:11px!important;width:44px;height:44px;background:rgba(255,255,255,.035)!important}

/* HERO */
.hero{
  isolation:isolate;
  min-height:660px!important;
  background-position:center 66%!important;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 77% 28%,rgba(50,110,164,.17),transparent 28%),
    linear-gradient(180deg,transparent 56%,rgba(6,8,10,.48) 100%);
}
.hero:after{
  content:"";position:absolute;inset:auto 0 0;height:32%;z-index:0;opacity:1!important;
  background:linear-gradient(180deg,transparent,rgba(6,8,10,.74));
  transform:none!important;filter:none!important;width:auto!important;right:0!important;bottom:0!important;
}
.hero-shade{
  z-index:1!important;
  background:linear-gradient(90deg,rgba(4,7,10,.82) 0%,rgba(4,7,10,.58) 38%,rgba(4,7,10,.17) 71%,rgba(4,7,10,.08) 100%)!important;
}
.hero-content{z-index:2;max-width:760px;padding-block:92px!important}
.hero .kicker{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:18px!important;padding:8px 11px;
  border:1px solid rgba(230,235,242,.20);border-radius:999px;
  background:rgba(11,15,20,.42);backdrop-filter:blur(10px);
  color:#dce1e8!important;font-size:11px!important;letter-spacing:.18em!important;
}
.hero .kicker:before{content:"";width:6px;height:6px;border-radius:50%;background:#dce3eb;box-shadow:0 0 12px rgba(226,234,244,.55)}
.hero h1{
  max-width:720px!important;
  font-size:clamp(52px,7.5vw,86px)!important;
  line-height:.95!important;
  letter-spacing:-.052em!important;
  text-shadow:0 5px 26px rgba(0,0,0,.35)!important;
}
.hero h1 span{
  color:#f4f6f9!important;
  background:linear-gradient(180deg,#fff 10%,#c7ced7 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-copy{
  max-width:530px!important;margin:25px 0 31px!important;
  color:#d5dae1!important;font-size:18px!important;line-height:1.55!important;
  text-shadow:0 2px 14px rgba(0,0,0,.4)!important;
}
.hero-explore-button{
  min-height:56px;padding:0 24px!important;border-radius:999px!important;
  border:1px solid rgba(255,255,255,.62)!important;
  background:linear-gradient(145deg,rgba(24,29,36,.91),rgba(7,10,14,.96))!important;
  color:#fff!important;font-size:15px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 14px 34px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.04)!important;
}
.hero-explore-button:hover{transform:translateY(-2px)!important;background:linear-gradient(145deg,#27303a,#0c1117)!important}
.hero-explore-button span{font-size:21px}

/* FAIXA DE CONTATO — visual de atalhos de app */
.quick-contact{
  position:relative;z-index:5;padding:0 0 18px!important;margin-top:-42px;
  background:transparent!important;border:0!important;
}
.quick-contact>.page-width{
  padding:24px 24px 18px;
  border:1px solid var(--premium-line);
  border-radius:25px;
  background:linear-gradient(145deg,rgba(17,21,27,.94),rgba(8,11,15,.96));
  box-shadow:var(--premium-shadow),inset 0 1px rgba(255,255,255,.045);
  backdrop-filter:blur(22px);
}
.quick-contact-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:16px}
.quick-contact-heading .kicker{margin:0!important;color:#9ea8b4!important}
.quick-contact-heading h2{margin:0!important;font-size:20px!important;letter-spacing:-.025em;color:#eef1f5}
.quick-contact-icons{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;padding:0!important;
}
.quick-social{
  min-width:0!important;min-height:104px;padding:13px 8px!important;
  justify-content:center;border:1px solid rgba(255,255,255,.095);
  border-radius:17px;background:linear-gradient(145deg,rgba(28,33,40,.78),rgba(13,16,21,.88));
  color:#e9edf2!important;font-size:12px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  transition:transform .2s,border-color .2s,background .2s!important;
}
.quick-social:not(.disabled):hover{transform:translateY(-3px);border-color:rgba(220,228,238,.28);background:linear-gradient(145deg,#242a32,#11151b)}
.quick-social-symbol{
  width:49px!important;height:49px!important;border-radius:14px!important;
  box-shadow:0 9px 22px rgba(0,0,0,.30)!important;
}
.quick-social.whatsapp .quick-social-symbol{border-radius:14px!important}
.quick-social.location .quick-social-symbol{background:linear-gradient(145deg,#e7ebf0,#8f9aa7)!important;color:#101419!important}
.quick-contact-meta{
  margin-top:16px!important;padding-top:15px;border-top:1px solid rgba(255,255,255,.075);
  justify-content:center!important;color:#919ba8!important;font-size:12px!important;
}
.quick-contact-meta strong{color:#dfe4eb!important}

/* CATÁLOGO */
.inventory{padding-top:66px!important;padding-bottom:92px!important}
.section-heading{margin-bottom:25px!important}
.section-heading>div{position:relative;padding-left:17px}
.section-heading>div:before{content:"";position:absolute;left:0;top:5px;bottom:4px;width:3px;border-radius:5px;background:linear-gradient(#e8edf3,#667788)}
.section-heading .kicker{margin-bottom:8px!important;color:#8f9aa7!important}
.section-heading h2{font-size:clamp(30px,4vw,46px)!important;letter-spacing:-.045em!important}
.section-note{padding:8px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.025);font-size:12px!important}
.filter-panel{
  gap:14px!important;padding:18px!important;border-radius:24px!important;
  background:linear-gradient(145deg,rgba(21,26,33,.96),rgba(10,13,17,.98))!important;
  border:1px solid rgba(207,217,229,.16)!important;
  box-shadow:0 22px 65px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04)!important;
}
.filter-panel .search-field>span:first-child,.filter-panel .field>span:first-child{color:#9ba5b1!important;letter-spacing:.08em;text-transform:uppercase;font-size:10px!important}
.premium-search-control{
  min-height:62px!important;border-radius:16px!important;
  border:1px solid rgba(207,216,228,.23)!important;
  background:#0a0d11!important;
  box-shadow:inset 0 1px rgba(255,255,255,.03)!important;
}
.premium-search-control:focus-within{border-color:#cfd6df!important;box-shadow:0 0 0 3px rgba(202,211,224,.09)!important}
.filter-panel .field:not(.search-field) input{
  min-height:62px!important;border-radius:16px!important;background:#0a0d11!important;
  border-color:rgba(207,216,228,.20)!important;color:#f1f4f7!important;
}
.clear-button{
  min-height:62px!important;border-radius:16px!important;
  background:linear-gradient(145deg,#f1f3f6,#b8c0ca)!important;color:#0b0e12!important;
  border:1px solid #eef1f5!important;box-shadow:0 10px 24px rgba(0,0,0,.25)!important;
}
.inventory-toolbar{
  margin:20px 2px 24px!important;padding:0 4px;color:#8f99a5!important;
}
.link-button{padding:9px 13px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:999px!important;background:rgba(255,255,255,.025)!important;color:#d6dce4!important}

/* Cards brancos, com proporções próximas à simulação */
.vehicle-grid{gap:22px!important}
.vehicle-grid .vehicle-card{
  border-radius:22px!important;border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 17px 46px rgba(0,0,0,.31)!important;overflow:hidden;
  animation:premium-card-in .42s ease both;
}
.vehicle-grid .vehicle-card:hover,.vehicle-grid .vehicle-card:focus-visible{
  transform:translateY(-5px)!important;box-shadow:0 25px 66px rgba(0,0,0,.42)!important;
}
.vehicle-photo{aspect-ratio:16/9!important;background:#11161c!important}
.vehicle-photo img{transition:transform .45s ease,filter .3s ease}
.vehicle-card:hover .vehicle-photo img{transform:scale(1.025)}
.vehicle-photo::after{height:28%!important;background:linear-gradient(transparent,rgba(0,0,0,.24))!important}
.gallery-arrow{
  width:39px!important;height:39px!important;border-radius:50%!important;
  border:1px solid rgba(255,255,255,.42)!important;background:rgba(5,8,11,.62)!important;
  font-size:30px!important;backdrop-filter:blur(8px);
}
.gallery-counter{right:11px!important;top:11px!important;bottom:auto!important;padding:6px 9px!important;background:rgba(5,8,11,.72)!important;border:1px solid rgba(255,255,255,.16)!important}
.vehicle-grid .vehicle-body{padding:18px 19px 19px!important}
.vehicle-grid .vehicle-title{
  min-height:0!important;font-size:18px!important;text-transform:none!important;letter-spacing:-.035em!important;
}
.vehicle-grid .vehicle-summary{
  margin:13px 0 14px!important;padding-top:12px!important;gap:8px!important;
}
.vehicle-grid .vehicle-summary span{font-size:11px!important;gap:4px!important}
.vehicle-grid .vehicle-summary strong{font-size:14px!important}
.vehicle-grid .vehicle-price-label{font-size:9px!important;letter-spacing:.16em!important}
.vehicle-grid .vehicle-price{font-size:27px!important;letter-spacing:-.04em!important}
.vehicle-grid .vehicle-more{margin-top:14px!important;padding-top:12px!important;font-size:12px!important}

/* FINANCIAMENTO */
.finance-section{
  min-height:calc(100vh - 86px)!important;
  padding:76px 0 96px!important;
  background:
    radial-gradient(circle at 85% 10%,rgba(28,72,112,.36),transparent 32rem),
    radial-gradient(circle at 4% 92%,rgba(115,127,142,.11),transparent 28rem),
    #070a0e!important;
  border:0!important;
}
.finance-layout{
  gap:34px!important;align-items:stretch!important;
}
.finance-copy{
  border:1px solid rgba(208,218,230,.13);border-radius:26px;padding:34px;
  background:linear-gradient(150deg,rgba(25,31,39,.92),rgba(9,12,16,.94));
  box-shadow:var(--premium-shadow);position:relative;overflow:hidden;
}
.finance-copy:after{
  content:"BANISKI";position:absolute;right:-26px;bottom:-23px;
  font:900 72px Montserrat,sans-serif;letter-spacing:-.06em;color:rgba(255,255,255,.025);pointer-events:none;
}
.finance-copy h2{font-size:clamp(36px,5vw,56px)!important;line-height:1.03!important;letter-spacing:-.055em!important}
.finance-copy p{color:#b5bdc8!important}
.finance-form{
  border-radius:26px!important;padding:28px!important;
  background:linear-gradient(145deg,rgba(20,25,32,.96),rgba(8,11,15,.98))!important;
  border:1px solid rgba(211,221,233,.16)!important;
  box-shadow:var(--premium-shadow)!important;
}
.finance-form .field input,.finance-form .field select,.finance-form .fieldset{
  min-height:54px;background:#090c10!important;border:1px solid rgba(211,220,232,.18)!important;border-radius:14px!important;color:#f1f4f8!important;
}
.finance-form .field input:focus,.finance-form .field select:focus{border-color:#bcc6d1!important;box-shadow:0 0 0 3px rgba(185,198,213,.08)!important}
.form-submit{min-height:56px!important;border-radius:14px!important;background:linear-gradient(145deg,#f4f5f7,#b7c0ca)!important;color:#0a0d11!important}

/* RODAPÉ */
footer{
  padding:48px 0!important;background:#05070a!important;border-top:1px solid rgba(255,255,255,.07)!important;
  color:#929ca8!important;
}
.footer-brand{padding-bottom:7px}
.footer-layout{align-items:center!important}
.footer-layout>p{padding:10px 14px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.02);font-size:12px}

/* MODAIS */
.vehicle-modal{
  border-radius:25px!important;border:1px solid rgba(217,225,235,.20)!important;
  box-shadow:0 40px 120px rgba(0,0,0,.70)!important;
}
.modal-close{backdrop-filter:blur(10px)!important;box-shadow:0 8px 22px rgba(0,0,0,.25)!important}
.seller-dialog{border-radius:24px!important;box-shadow:0 35px 100px rgba(0,0,0,.66)!important}

@keyframes premium-card-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* TABLET */
@media(max-width:900px){
  .site-header{min-height:80px!important}
  .brand-logo-image{width:170px!important}
  .hero{min-height:610px!important}
  .hero-content{padding-block:75px!important}
  .quick-contact{margin-top:-34px}
  .quick-contact>.page-width{padding:18px}
  .quick-contact-heading{display:none}
  .finance-copy{padding:26px}
}

/* CELULAR — composição fiel à simulação, mas preservando legibilidade real */
@media(max-width:720px){
  .page-width{width:min(100% - 22px,1180px)!important}
  .site-header{min-height:76px!important;padding-inline:12px!important;gap:6px!important}
  .brand-logo-image{width:137px!important;max-width:34vw!important}
  .header-tabs{margin-right:3px!important;gap:3px!important;padding:3px!important;border-radius:12px!important}
  .header-tab{min-height:38px!important;padding-inline:11px!important;font-size:11px!important;border-radius:9px!important}
  .menu-button{width:39px;height:39px;font-size:20px!important}
  .nav{top:76px!important;background:rgba(7,9,12,.97)!important;backdrop-filter:blur(20px);border-bottom-color:rgba(255,255,255,.10)!important}

  .hero{
    position:relative!important;min-height:620px!important;background-position:center 76%!important;
  }
  .hero-shade{
    background:linear-gradient(180deg,rgba(4,7,10,.22) 0%,rgba(4,7,10,.18) 25%,rgba(4,7,10,.58) 51%,rgba(4,7,10,.67) 74%,rgba(4,7,10,.35) 100%)!important;
  }
  .hero-content{position:static!important;padding-top:52px!important;padding-bottom:120px!important}
  .hero-content>.kicker,.hero-content>h1,.hero-content>.hero-copy{position:relative;z-index:2}
  .hero .kicker{font-size:9px!important;margin-bottom:13px!important;padding:7px 9px!important}
  .hero h1{font-size:clamp(43px,13vw,60px)!important;line-height:.94!important;max-width:94%!important}
  .hero-copy{font-size:15px!important;line-height:1.48!important;max-width:86%!important;margin-top:18px!important}
  .hero-explore-button{
    position:absolute!important;z-index:5!important;left:16px!important;bottom:27px!important;top:auto!important;
    margin:0!important;transform:none!important;min-height:53px!important;padding-inline:20px!important;
  }
  .hero-explore-button:hover{transform:none!important}

  .quick-contact{margin-top:-15px!important;padding-bottom:5px!important}
  .quick-contact>.page-width{width:calc(100% - 16px)!important;padding:10px!important;border-radius:20px!important}
  .quick-contact-icons{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
  .quick-social{min-height:85px!important;padding:9px 3px!important;border-radius:14px!important;font-size:10px!important;gap:7px!important}
  .quick-social-symbol{width:42px!important;height:42px!important;border-radius:12px!important}
  .quick-social-symbol svg{width:23px!important;height:23px!important}
  .quick-contact-meta{display:none!important}

  .inventory{padding-top:46px!important;padding-bottom:64px!important}
  .section-heading{align-items:end!important;margin-bottom:18px!important}
  .section-heading h2{font-size:29px!important}
  .section-heading>div{padding-left:13px}
  .section-note{display:none!important}
  .filter-panel{padding:12px!important;gap:11px!important;border-radius:20px!important}
  .premium-search-control{min-height:58px!important;border-radius:14px!important}
  .filter-panel .field:not(.search-field) input{min-height:55px!important;border-radius:14px!important}
  .clear-button{min-height:55px!important;border-radius:14px!important}
  .inventory-toolbar{margin:15px 0 18px!important;font-size:12px!important}
  .vehicle-grid{grid-template-columns:1fr!important;gap:19px!important}
  .vehicle-grid .vehicle-card{border-radius:20px!important}
  .vehicle-photo{aspect-ratio:16/9!important}
  .vehicle-grid .vehicle-body{padding:17px!important}
  .vehicle-grid .vehicle-title{font-size:19px!important}
  .vehicle-grid .vehicle-price{font-size:28px!important}

  .financing-view .finance-section{padding-top:28px!important}
  .finance-section{padding:35px 0 70px!important}
  .finance-layout{gap:15px!important}
  .finance-copy{padding:23px!important;border-radius:21px!important}
  .finance-copy h2{font-size:34px!important}
  .finance-copy ul{font-size:13px!important;padding-left:16px!important}
  .finance-form{padding:16px!important;border-radius:21px!important}
  .form-submit{min-height:53px!important}

  footer{padding:34px 0!important}
  .footer-layout{gap:16px!important}
  .footer-layout>p{border-radius:14px!important;line-height:1.55!important}
}

@media(max-width:390px){
  .brand-logo-image{width:120px!important}
  .header-tab{padding-inline:8px!important;font-size:10px!important}
  .hero h1{font-size:42px!important}
  .quick-social{font-size:9px!important}
}

@media(prefers-reduced-motion:reduce){
  .vehicle-grid .vehicle-card{animation:none!important}
  .vehicle-photo img,.vehicle-card,.quick-social,.hero-explore-button{transition:none!important}
}