/* =========================================
   VARIABLES
========================================= */

:root {
  --black: #080808;
  --black-soft: #111111;
  --dark: #181818;

  --white: #ffffff;
  --off-white: #f5f5f3;

  --gray: #777777;
  --light-gray: #dddddd;

  --red: #d71920;

  --border: #d9d9d7;
}


/* =========================================
   RESET
========================================= */

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


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: var(--black);
  background: var(--off-white);

  line-height: 1.6;
}


body.menu-open {
  overflow: hidden;
}


a {
  color: inherit;
  text-decoration: none;
}


img {
  display: block;
  width: 100%;
}


button,
input,
select,
textarea {
  font: inherit;
}


button {
  border: 0;
}


.container {
  width: min(1200px, 90%);
  margin: auto;
}


.section {
  padding: 120px 0;
}


/* =========================================
   GENERALES
========================================= */

.section-label {
  display: block;

  color: var(--red);

  font-size: 0.7rem;
  font-weight: 800;

  letter-spacing: 2.5px;

  margin-bottom: 20px;
}


.section-label.light {
  color: #aaaaaa;
}


.btn {
  min-height: 52px;

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

  padding: 0 27px;

  font-size: 0.8rem;
  font-weight: 800;

  letter-spacing: 0.5px;

  transition: 0.25s;

  cursor: pointer;
}


.btn-white {
  background: white;
  color: black;
}


.btn-white:hover {
  background: var(--red);
  color: white;
}


.btn-outline {
  color: white;

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


.btn-outline:hover {
  background: white;
  color: black;
}


/* =========================================
   HEADER
========================================= */

.header {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 100;

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


.navbar {
  min-height: 90px;

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


.logo {
  color: white;

  font-size: 1rem;
  font-weight: 900;

  letter-spacing: 3px;
}


.logo span {
  color: var(--red);
}


.nav-links {
  list-style: none;

  display: flex;
  align-items: center;

  gap: 32px;

  color: white;
}


.nav-links a {
  font-size: 0.78rem;
  font-weight: 600;

  letter-spacing: 0.5px;
}


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


.nav-cta {
  padding: 12px 18px;

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


.nav-links .nav-cta:hover {
  background: white;
  color: black;
}


.menu-btn {
  display: none;

  background: transparent;

  color: white;

  font-size: 1.8rem;

  cursor: pointer;
}


/* =========================================
   HERO
========================================= */

.hero {
  min-height: 100vh;

  position: relative;

  display: flex;
  align-items: center;

  color: white;

  background: black;

  overflow: hidden;
}


.hero-bg {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.68) 42%,
      rgba(0,0,0,.10) 100%
    ),
    url(
      "https://images.unsplash.com/photo-1494976388531-d1058494cdd8?auto=format&fit=crop&w=2000&q=90"
    )
    center / cover;

  transform: scale(1.02);
}


.hero-content {
  position: relative;
  z-index: 2;

  padding-top: 120px;
}


.hero-copy {
  max-width: 800px;
}


.eyebrow {
  display: block;

  color: #bbbbbb;

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

  letter-spacing: 3px;

  margin-bottom: 25px;
}


.hero h1 {
  font-size:
    clamp(4rem, 8.5vw, 8.5rem);

  line-height: 0.85;

  letter-spacing: -7px;

  font-weight: 700;

  margin-bottom: 35px;
}


.hero h1 span {
  display: block;

  color: transparent;

  -webkit-text-stroke:
    1px rgba(255,255,255,.7);
}


.hero-copy > p {
  max-width: 590px;

  color: #c8c8c8;

  font-size: 1.05rem;

  margin-bottom: 32px;
}


.hero-actions {
  display: flex;

  gap: 12px;

  flex-wrap: wrap;
}


.hero-bottom {
  display: flex;

  margin-top: 90px;

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

  max-width: 850px;
}


.hero-stat {
  display: flex;

  gap: 15px;

  width: 33.333%;

  padding:
    20px 30px 0 0;

  margin-right: 30px;

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


.hero-stat:last-child {
  border-right: 0;
}


.hero-stat > span {
  color: var(--red);

  font-size: 0.68rem;

  font-weight: 900;
}


.hero-stat strong {
  display: block;

  font-size: 0.88rem;
}


.hero-stat small {
  color: #888;

  font-size: 0.7rem;
}


.scroll-indicator {
  position: absolute;

  right: 30px;
  bottom: 50px;

  display: flex;
  align-items: center;

  gap: 15px;

  writing-mode: vertical-rl;

  color: #aaa;

  font-size: 0.6rem;

  letter-spacing: 2px;

  z-index: 3;
}


.scroll-indicator span {
  width: 1px;
  height: 55px;

  background: #777;
}


/* =========================================
   VEHÍCULOS
========================================= */

.vehicles {
  background: var(--off-white);
}


.section-top {
  display: grid;

  grid-template-columns:
    1.1fr .9fr;

  gap: 100px;

  align-items: end;

  margin-bottom: 80px;
}


.section-top h2 {
  font-size:
    clamp(3rem, 6vw, 6rem);

  line-height: .9;

  letter-spacing: -5px;

  font-weight: 500;
}


.section-description > p {
  max-width: 450px;

  color: var(--gray);

  margin-bottom: 30px;
}


.filters {
  display: flex;

  gap: 10px;

  flex-wrap: wrap;
}


.filter {
  background: transparent;

  border-bottom:
    1px solid #aaa;

  padding: 7px 3px;

  margin-right: 18px;

  color: #777;

  font-size: .75rem;

  cursor: pointer;
}


.filter.active,
.filter:hover {
  color: black;

  border-color: var(--red);
}


.vehicle-list {
  display: grid;

  gap: 100px;
}


.vehicle {
  display: grid;

  grid-template-columns:
    1.25fr .75fr;

  min-height: 520px;

  background: white;
}


.vehicle.reverse {
  grid-template-columns:
    .75fr 1.25fr;
}


.vehicle.reverse
.vehicle-image {
  order: 2;
}


.vehicle-image {
  position: relative;

  overflow: hidden;

  min-height: 520px;
}


.vehicle-image img {
  height: 100%;

  object-fit: cover;

  transition: .6s;
}


.vehicle:hover
.vehicle-image img {
  transform: scale(1.03);
}


.vehicle-tag {
  position: absolute;

  left: 25px;
  top: 25px;

  background: white;

  padding: 8px 12px;

  font-size: .62rem;
  font-weight: 900;

  letter-spacing: 1.5px;
}


.vehicle-info {
  padding: 55px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.model-year {
  color: var(--red);

  font-size: .65rem;
  font-weight: 900;

  letter-spacing: 2px;
}


.vehicle-info h3 {
  font-size:
    clamp(2.5rem, 4vw, 4.2rem);

  line-height: 1;

  letter-spacing: -3px;

  margin: 10px 0 18px;
}


.vehicle-info p {
  color: var(--gray);

  max-width: 400px;
}


.vehicle-specs {
  display: grid;

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

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

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

  padding: 20px 0;

  margin: 30px 0;
}


.vehicle-specs span {
  display: block;

  color: #999;

  font-size: .62rem;

  text-transform: uppercase;

  margin-bottom: 3px;
}


.vehicle-specs strong {
  font-size: .78rem;
}


.arrow-link {
  display: flex;
  justify-content: space-between;

  font-size: .7rem;
  font-weight: 900;

  letter-spacing: 1px;
}


.arrow-link span {
  font-size: 1.2rem;
}


.vehicle.hidden {
  display: none;
}


/* =========================================
   EXPERIENCIA
========================================= */

.experience {
  min-height: 800px;

  position: relative;

  display: flex;
  align-items: center;

  overflow: hidden;

  color: white;
}


.experience::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.9),
      rgba(0,0,0,.35)
    );
}


.experience-image {
  position: absolute;
  inset: 0;
}


.experience-image img {
  height: 100%;

  object-fit: cover;
}


.experience-content {
  position: relative;

  z-index: 2;
}


.experience-content h2 {
  max-width: 850px;

  font-size:
    clamp(3.5rem, 7vw, 7rem);

  line-height: .9;

  letter-spacing: -6px;

  font-weight: 500;

  margin-bottom: 30px;
}


.experience-content h2 span {
  display: block;

  color: var(--red);
}


.experience-content p {
  max-width: 530px;

  color: #ccc;

  margin-bottom: 30px;
}


/* =========================================
   BENEFICIOS
========================================= */

.benefits {
  background: white;
}


.benefits-heading {
  display: grid;

  grid-template-columns:
    1.3fr .7fr;

  gap: 100px;

  margin-bottom: 70px;
}


.benefits-heading h2 {
  font-size:
    clamp(2.8rem, 5vw, 5rem);

  line-height: .98;

  letter-spacing: -4px;

  font-weight: 500;
}


.benefits-heading p {
  color: var(--gray);

  max-width: 420px;
}


.benefits-grid {
  display: grid;

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

  border-top:
    1px solid var(--border);
}


.benefit {
  min-height: 300px;

  padding:
    30px 30px 30px 0;

  margin-right: 30px;

  border-right:
    1px solid var(--border);
}


.benefit:last-child {
  border-right: 0;
}


.benefit > span {
  color: var(--red);

  font-size: .7rem;
  font-weight: 900;
}


.benefit h3 {
  margin-top: 90px;

  font-size: 1.25rem;
}


.benefit p {
  color: var(--gray);

  font-size: .88rem;

  margin-top: 10px;
}


/* =========================================
   FINANCIAMIENTO
========================================= */

.finance {
  background: var(--black);

  color: white;

  padding: 120px 0;
}


.finance-grid {
  display: grid;

  grid-template-columns:
    1fr .8fr;

  gap: 100px;

  align-items: center;
}


.finance-copy h2 {
  font-size:
    clamp(3rem, 5vw, 5.5rem);

  line-height: .95;

  letter-spacing: -5px;

  font-weight: 500;

  max-width: 700px;
}


.finance-copy > p {
  color: #999;

  max-width: 500px;

  margin: 25px 0 45px;
}


.finance-points {
  display: flex;

  gap: 35px;
}


.finance-points div {
  border-top:
    1px solid #333;

  padding-top: 15px;

  min-width: 130px;
}


.finance-points strong {
  display: block;

  color: var(--red);

  font-size: .65rem;

  margin-bottom: 5px;
}


.finance-points span {
  color: #aaa;

  font-size: .75rem;
}


.calculator {
  background: white;

  color: black;

  padding: 45px;
}


.calculator-label {
  color: var(--red);

  font-size: .65rem;
  font-weight: 900;

  letter-spacing: 2px;
}


.calculator h3 {
  font-size: 2rem;

  line-height: 1.1;

  margin:
    8px 0 35px;
}


.form-group {
  margin-bottom: 20px;
}


.form-group label {
  display: block;

  font-size: .7rem;
  font-weight: 700;

  margin-bottom: 7px;
}


.form-group input,
.form-group select {
  width: 100%;

  padding: 14px;

  background: #f4f4f2;

  border:
    1px solid #ddd;

  outline: none;
}


.form-group input:focus,
.form-group select:focus {
  border-color: var(--red);
}


.payment-result {
  margin-top: 30px;

  padding-top: 25px;

  border-top:
    1px solid var(--border);
}


.payment-result span {
  display: block;

  color: #777;

  font-size: .7rem;
}


.payment-result strong {
  display: block;

  font-size: 3rem;

  letter-spacing: -2px;
}


.calculator-note {
  display: block;

  color: #999;

  font-size: .62rem;

  line-height: 1.4;

  margin-top: 15px;
}


/* =========================================
   CONTACTO
========================================= */

.contact {
  background: var(--off-white);
}


.contact-heading {
  max-width: 1000px;

  margin-bottom: 80px;
}


.contact-heading h2 {
  font-size:
    clamp(3rem, 6vw, 6rem);

  line-height: .92;

  letter-spacing: -5px;

  font-weight: 500;
}


.contact-heading h2 span {
  color: var(--red);
}


.contact-grid {
  display: grid;

  grid-template-columns:
    .65fr 1.35fr;

  gap: 100px;
}


.contact-details > p {
  color: var(--gray);

  max-width: 350px;

  margin-bottom: 50px;
}


.contact-data {
  display: grid;

  gap: 25px;
}


.contact-data div {
  padding-bottom: 20px;

  border-bottom:
    1px solid var(--border);
}


.contact-data span {
  display: block;

  color: #999;

  font-size: .62rem;
  font-weight: 900;

  letter-spacing: 1px;

  margin-bottom: 5px;
}


.contact-data strong {
  font-size: .85rem;
}


.test-drive-form {
  background: white;

  padding: 50px;
}


.input-row {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 20px;
}


.field {
  margin-bottom: 22px;
}


.field label {
  display: block;

  font-size: .67rem;
  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .5px;

  margin-bottom: 8px;
}


.field input,
.field select,
.field textarea {
  width: 100%;

  border: 0;

  border-bottom:
    1px solid #bbb;

  background: transparent;

  padding: 12px 0;

  outline: none;
}


.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--red);
}


.field textarea {
  min-height: 100px;

  resize: vertical;
}


.submit-btn {
  width: 100%;

  min-height: 58px;

  margin-top: 10px;

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

  padding: 0 25px;

  background: black;
  color: white;

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: 1px;

  cursor: pointer;

  transition: .25s;
}


.submit-btn:hover {
  background: var(--red);
}


/* =========================================
   FOOTER
========================================= */

footer {
  background: black;

  color: #777;
}


.footer {
  min-height: 120px;

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

  gap: 30px;

  font-size: .7rem;
}


.socials {
  display: flex;

  gap: 20px;
}


.socials a:hover {
  color: white;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 950px) {

  .menu-btn {
    display: block;
  }


  .nav-links {
    display: none;

    position: absolute;

    top: 90px;
    left: 0;

    width: 100%;

    min-height:
      calc(100vh - 90px);

    padding: 50px 5%;

    background: black;

    flex-direction: column;

    align-items: flex-start;
  }


  .nav-links.active {
    display: flex;
  }


  .nav-links a {
    font-size: 1.2rem;
  }


  .section-top,
  .benefits-heading,
  .finance-grid,
  .contact-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }


  .vehicle,
  .vehicle.reverse {
    grid-template-columns: 1fr;
  }


  .vehicle.reverse
  .vehicle-image {
    order: 0;
  }


  .benefits-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 650px) {

  .section {
    padding: 80px 0;
  }


  .hero {
    min-height: 800px;
  }


  .hero h1 {
    font-size: 4rem;

    letter-spacing: -4px;
  }


  .hero-bottom {
    flex-direction: column;

    gap: 15px;

    border: 0;

    margin-top: 55px;
  }


  .hero-stat {
    width: 100%;

    border-right: 0;

    border-left:
      2px solid var(--red);

    padding:
      0 0 0 15px;
  }


  .scroll-indicator {
    display: none;
  }


  .section-top {
    margin-bottom: 45px;
  }


  .section-top h2 {
    letter-spacing: -3px;
  }


  .vehicle-list {
    gap: 45px;
  }


  .vehicle-image {
    min-height: 300px;
    height: 300px;
  }


  .vehicle-info {
    padding: 30px 22px;
  }


  .vehicle-specs {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .experience {
    min-height: 650px;
  }


  .experience-content h2 {
    letter-spacing: -4px;
  }


  .benefits-grid {
    grid-template-columns: 1fr;
  }


  .benefit {
    min-height: 220px;

    border-right: 0;

    border-bottom:
      1px solid var(--border);
  }


  .benefit h3 {
    margin-top: 50px;
  }


  .finance {
    padding: 80px 0;
  }


  .finance-copy h2 {
    letter-spacing: -3px;
  }


  .finance-points {
    flex-direction: column;
  }


  .calculator {
    padding: 30px 22px;
  }


  .input-row {
    grid-template-columns: 1fr;
  }


  .test-drive-form {
    padding: 30px 22px;
  }


  .footer {
    padding: 35px 0;

    flex-direction: column;

    text-align: center;
  }

}