*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --gold:#c6a06a;
  --gold-soft:#8b6d45;
  --bg:#050505;
  --card:#0b0b0b;
  --text:#f5f5f5;
  --muted:#979797;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}

/* NAVBAR */

.navbar{

  position:fixed;
  top:0;
  left:0;
  width:100%;

  z-index:9999;

  background:
  rgba(0,0,0,.45);

  backdrop-filter:
  blur(14px);

  border-bottom:
  1px solid
  rgba(255,255,255,.04);
}

.nav-wrapper{

  max-width:1450px;

  margin:auto;

  padding:
  22px 5%;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand{

  display:flex;
  align-items:center;
  gap:14px;

  text-decoration:none;
  color:white;
}

.brand:visited{
  color:white;
}

.logo-box{

  width:56px;
  height:56px;

  border-radius:14px;

  border:
  1px solid
  rgba(198,160,106,.18);

  display:flex;
  justify-content:center;
  align-items:center;

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:2rem;
  font-weight:700;

  color:var(--gold);
}

.brand-text h1{

  color:#f5f5f5;

  font-size:1.9rem;

  letter-spacing:4px;
}

.brand-text span{

  color:var(--gold);

  letter-spacing:5px;

  font-size:.74rem;
}

/* NAV */

.nav-links{

  display:flex;
  gap:40px;
}

.nav-links a{

  text-decoration:none;
  color:#ddd;

  transition:.3s;
}

.nav-links a:hover{
  color:var(--gold);
}

/* HERO */

.hero{

  height:620px;

  position:relative;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:

  linear-gradient(
    90deg,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.72) 30%,
    rgba(0,0,0,.42) 55%,
    rgba(0,0,0,.12) 100%
  ),

  url("images/hero-premium.jpg");

  background-size:cover;
  background-position:center right;

  animation:
  heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom{

  from{
    background-size:100%;
  }

  to{
    background-size:104%;
  }
}
.hero-wrapper{

  width:100%;

  max-width:1450px;

  margin:auto;

  padding:
  0 5%;
}

.hero-content{

  max-width:500px;

  margin-top:30px;
}

.hero-tag{

  color:var(--gold);

  letter-spacing:4px;

  font-size:.85rem;

  margin-bottom:18px;

  display:block;
}

.hero h2{

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:4.9rem;

  line-height:.92;

  font-weight:500;

  margin-bottom:24px;
}

.hero p{

  color:#b3b3b3;

  line-height:1.9;

  max-width:430px;

  margin-bottom:32px;
}

.hero-btn,
.card-btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;

  border:
  1px solid var(--gold);

  color:var(--gold);

  padding:
  16px 28px;

  transition:.3s;
}

.hero-btn:hover,
.card-btn:hover{

  background:
  var(--gold);

  color:black;
}

/* STOCK */

.stock{

  padding:
  60px 5%;
}

.section-header{

  display:flex;
  align-items:center;
  gap:16px;

  margin-bottom:28px;
}

.gold-line{

  width:48px;
  height:2px;

  background:
  var(--gold);
}

.section-header span{

  color:#d5d5d5;

  letter-spacing:4px;
}

/* GRID */

.cars-grid{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:24px;
}

.car-card{

  background:
  #0a0a0a;

  border:
  1px solid
  rgba(255,255,255,.05);

  border-radius:20px;

  overflow:hidden;

  display:grid;

  grid-template-columns:
  54% 46%;

  min-height:300px;
}

.car-image{

  background-size:cover;
  background-position:center;

  filter:
  brightness(.92)
  contrast(1.06);
}

.car-info{

  padding:34px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.car-brand{

  color:var(--gold);

  letter-spacing:4px;

  font-size:.78rem;

  margin-bottom:16px;
}

.car-info h3{

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:2.2rem;

  line-height:1.05;

  font-weight:500;

  margin-bottom:16px;
}

.car-price{

  color:var(--gold);

  font-size:2rem;
  font-weight:600;

  margin-bottom:14px;
}

.car-meta{

  color:#8b8b8b;

  margin-bottom:24px;
}

/* PREMIUM SEARCH */

.premium-search{

  padding:
  0 5% 55px;
}

.premium-container{

  background:#090909;

  border:
  1px solid
  rgba(255,255,255,.05);

  border-radius:22px;

  overflow:hidden;

  display:grid;

  grid-template-columns:
  28% 44% 28%;

  min-height:300px;
}

.premium-image{

  position:relative;

  overflow:hidden;

  background:

  linear-gradient(
    rgba(0,0,0,.18),
    rgba(0,0,0,.18)
  ),

  url("images/hero.jpg");

  background-size:cover;
  background-position:center;

  transition:
  transform .7s ease;
}


/* ZOOM PREMIUM */

.premium-container:hover .premium-image{

  transform:
  scale(1.03);
}


/* GLOW DORADO */

.premium-image::after{

  content:"";

  position:absolute;

  inset:0;

  background:
  radial-gradient(
    circle at center,
    rgba(198,160,106,.05),
    transparent 65%
  );

  pointer-events:none;
}

.premium-content{

  padding:42px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.premium-content h3{

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:3rem;

  font-weight:500;

  margin-bottom:18px;
}

.premium-content p{

  color:#aaa;

  line-height:1.8;

  margin-bottom:26px;
}

/* PANEL DERECHO */

.premium-right{

  display:grid;

  grid-template-columns:1fr;

  gap:14px;

  width:100%;

  max-width:340px;

  margin-left:auto;
}


/* PILLS */

.brand-pill{

  display:flex;
  align-items:center;
  gap:14px;

  width:100%;

  padding:18px 24px;

  border:1px solid rgba(255,255,255,.08);

  border-radius:999px;

  background:rgba(255,255,255,.01);

  transition:.25s ease;

  cursor:pointer;

  box-sizing:border-box;
}

.brand-pill:hover{

  border-color:rgba(198,160,106,.35);

  background:rgba(198,160,106,.03);

  transform:translateY(-2px);
}


/* ICONOS */

.brand-pill img,
.brand-icon{

  width:28px;
  height:28px;

  min-width:28px;

  flex-shrink:0;

  object-fit:contain;

  opacity:.95;
}


/* TEXTO */

.brand-pill span{

  color:#fff;

  font-size:1.05rem;

  font-weight:500;

  white-space:nowrap;
}
/* TRUST SECTION */

.trust-section{

  max-width:1600px;
  margin:26px auto 0;
  padding:0 40px;
}

.trust-card{

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:0;

  border:1px solid rgba(255,255,255,.06);

  border-radius:28px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.015),
    rgba(255,255,255,.005)
  );
}

.trust-item{

  display:flex;
  align-items:flex-start;
  gap:18px;

  padding:34px;

  border-right:
  1px solid rgba(255,255,255,.06);
}

.trust-item:last-child{
  border-right:none;
}

.trust-icon{

  width:52px;
  height:52px;

  border-radius:50%;

  border:
  1px solid rgba(198,160,106,.35);

  color:#C6A06A;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1.2rem;

  flex-shrink:0;
}

.trust-item h4{

  color:#fff;

  margin:0 0 6px;

  font-size:1rem;
}

.trust-item p{

  color:#9d9d9d;

  margin:0;

  line-height:1.5;
}

@media(max-width:1100px){

  .trust-card{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:768px){

  .trust-card{
    grid-template-columns:1fr;
  }

  .trust-item{
    border-right:none;
    border-bottom:
    1px solid rgba(255,255,255,.06);
  }
}
/* FOOTER */

.footer{

  margin-top:80px;

  border-top:
  1px solid rgba(255,255,255,.06);

  padding:38px 40px;

  background:#050505;
}

.footer-container{

  max-width:1600px;

  margin:auto;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.footer-logo{

  display:flex;
  align-items:center;
  gap:16px;
}

.footer-logo img{

  width:52px;
}

.footer-logo h3{

  color:#fff;

  margin:0;

  font-size:1.2rem;

  letter-spacing:.12em;
}

.footer-logo span{

  color:#C6A06A;

  font-size:.8rem;

  letter-spacing:.35em;
}

.footer-links{

  display:flex;
  gap:34px;
}

.footer-links a{

  color:#a5a5a5;

  text-decoration:none;

  transition:.2s ease;
}

.footer-links a:hover{

  color:#C6A06A;
}
/* ==========================
   PREMIUM CARDS
========================== */

.car-card{

  transition:
  transform .35s ease,
  border-color .35s ease,
  box-shadow .35s ease;

  will-change:transform;
}

.car-card:hover{

  transform:
  translateY(-8px);

  border-color:
  rgba(198,160,106,.22);

  box-shadow:
  0 28px 70px rgba(0,0,0,.42);
}


/* FOTO */

.car-image{

  overflow:hidden;

  transition:.5s ease;
}

.car-card:hover .car-image{

  filter:
  brightness(.98)
  contrast(1.08);
}


/* EFECTO SHINE MUY PREMIUM */

.car-card::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:70%;
  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.03),
    transparent
  );

  transform:
  skewX(-18deg);

  transition:
  .9s ease;
}

.car-card:hover::before{

  left:140%;
}


/* BOTON PREMIUM */

.card-btn{

  transition:
  all .3s ease;
}

.card-btn:hover{

  box-shadow:
  0 0 24px rgba(198,160,106,.12);
}
/* PREMIUM SEARCH CINEMATIC */

.premium-container{

  position:relative;

  transition:
  transform .4s ease,
  box-shadow .4s ease,
  border-color .4s ease;
}

.premium-container:hover{

  transform:
  translateY(-4px);

  border-color:
  rgba(198,160,106,.16);

  box-shadow:
  0 30px 80px rgba(0,0,0,.45);
}


/* TEXTO MÁS PREMIUM */

.premium-content h3{

  line-height:.95;

  letter-spacing:-.02em;
}

.premium-content p{

  max-width:500px;
}


/* BOTÓN MÁS CARO */

.premium-content .hero-btn{

  width:fit-content;
}

.premium-content .hero-btn:hover{

  box-shadow:
  0 0 28px rgba(198,160,106,.14);
}
/* ==========================
   VEHICLE STATUS
========================== */

.car-card{

  position:relative;
}

.vehicle-status{

  position:absolute;

  top:22px;

  left:22px;

  z-index:20;

  padding:10px 18px;

  border-radius:999px;

  font-size:.78rem;

  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;

  backdrop-filter:
  blur(14px);

  border:1px solid;

  box-shadow:
  0 12px 28px
  rgba(0,0,0,.18);
}

/* DISPONIBLE */

.vehicle-status.available{

  color:#8AE89C;

  background:
  rgba(18,70,28,.28);

  border-color:
  rgba(138,232,156,.2);
}

/* RESERVADO */

.vehicle-status.reserved{

  color:#F3C96D;

  background:
  rgba(84,64,17,.26);

  border-color:
  rgba(243,201,109,.22);
}

/* VENDIDO */

.vehicle-status.sold{

  color:#FF8D8D;

  background:
  rgba(80,18,18,.28);

  border-color:
  rgba(255,141,141,.22);
}
/* ==========================
   SOLD VEHICLE EFFECT
========================== */

.sold-car{

  position:relative;
}

.sold-car .car-image{

  filter:
  grayscale(.75)
  brightness(.68)
  contrast(.95);
}

.sold-car::after{

  content:"";

  position:absolute;

  inset:0;

  background:
  rgba(0,0,0,.18);

  pointer-events:none;

  border-radius:20px;
}

.sold-car:hover .car-image{

  filter:
  grayscale(.55)
  brightness(.78)
  contrast(.98);
}