:root {
  --red: #ff4c4c;
  --ink: #262626;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Barlow", system-ui, sans-serif;
  --pad: clamp(20px, 6vw, 86px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }

/* Hero */
.hero { position: relative; height: clamp(520px, 57vw, 730px); overflow: hidden; color: #fff; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .45)); }
.hero h1 {
  position: absolute;
  z-index: 1;
  right: clamp(16px, 2vw, 30px);
  top: 50%;
  transform: translateY(-38%);
  width: min(560px, 46%);
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(56px, 7.3vw, 94px);
  line-height: .98;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.hero-note {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 1.4vw, 20px);
  bottom: 6px;
  margin: 0;
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(18px, 1.9vw, 24px);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* About */
.about { padding: clamp(48px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 8vw, 120px); }
.about h2 {
  font-family: var(--cond);
  font-weight: 600;
  color: var(--red);
  font-size: clamp(44px, 5.3vw, 68px);
  line-height: 1;
  text-transform: uppercase;
  max-width: 440px;
  margin-top: 20px;
}
.about-left img { width: 100%; max-width: 400px; aspect-ratio: 640 / 760; object-fit: cover; margin-top: 34px; }
.about-right img { width: 100%; aspect-ratio: 900 / 600; object-fit: cover; }
.about-right p { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; text-align: justify; hyphens: auto; letter-spacing: .02em; margin: clamp(40px, 5vw, 70px) 0 0; }

/* Vehicles */
.vehicles { padding: 10px 0 clamp(48px, 5vw, 64px); }
.vehicles-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(24px, 6vw, 90px); align-items: start; }
.vehicles h2 { font-family: var(--cond); font-weight: 600; color: var(--red); font-size: clamp(54px, 5.8vw, 74px); text-transform: uppercase; margin: clamp(40px, 7vw, 86px) 0 26px; }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(24px, 5vw, 64px); margin: 0; padding: 0; }
.steps li { counter-increment: step; max-width: 300px; }
.steps li::before { content: counter(step); display: block; font-family: var(--cond); font-weight: 600; font-size: 36px; color: var(--red); margin-bottom: 14px; }
.steps h3 { font-family: var(--sans); font-weight: 600; font-size: 21px; color: var(--red); margin-bottom: 8px; }
.steps p { margin: 0; font-size: 18px; line-height: 1.45; letter-spacing: .01em; }
.vehicles-grid > img { width: 100%; aspect-ratio: 800 / 880; object-fit: cover; margin-right: calc(-1 * var(--pad) + 20px); }

/* Contact */
.contact { position: relative; color: #fff; background: #0c0c0c url("../img/contacto-fondo.webp") center / cover no-repeat; padding: clamp(80px, 13vw, 180px) 0 clamp(56px, 6vw, 70px); }
.contact-inner { padding-left: calc(var(--pad) + clamp(0px, 9vw, 106px)); }
.contact h2 { font-family: var(--cond); font-weight: 700; font-size: clamp(54px, 5.8vw, 74px); text-transform: uppercase; margin-bottom: 36px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); grid-auto-flow: row; gap: 24px clamp(24px, 4vw, 48px); }
.contact h3 { font-family: var(--sans); font-weight: 600; font-size: 21px; color: var(--red); margin-bottom: 10px; }
.contact address, .contact p { font-style: normal; font-size: 18px; line-height: 1.45; margin: 0; }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; }

/* Footer */
.site-footer { background: #0c0c0c; color: #bdbdbd; font-size: 15px; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 22px; padding-bottom: 24px; border-top: 1px solid #2a2a2a; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* Legal pages */
.legal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px var(--pad); background: var(--ink); color: #fff; }
.legal-brand { font-family: var(--cond); font-weight: 700; font-size: 34px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; color: var(--red); }
.legal-header a:not(.legal-brand) { font-family: var(--cond); font-weight: 600; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.legal { padding: 56px 0 80px; }
.legal .wrap { max-width: 820px; }
.legal h1 { font-family: var(--cond); font-weight: 700; font-size: clamp(44px, 5vw, 64px); text-transform: uppercase; color: var(--red); }
.legal h2 { font-size: 21px; font-weight: 600; margin: 36px 0 10px; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal .updated { font-size: 14px; color: #666; }
.legal .back { display: inline-block; margin-top: 36px; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

@media (max-width: 760px) {
  .hero { height: 86vh; min-height: 520px; max-height: 700px; }
  .hero::after { background: rgba(0, 0, 0, .38); }
  .hero h1 { left: 16px; right: 16px; width: auto; top: auto; bottom: 26px; transform: none; text-align: center; font-size: clamp(44px, 13vw, 60px); }
  .hero-note { left: 16px; right: 16px; bottom: auto; top: 42%; text-align: center; }
  .about-grid, .vehicles-grid { grid-template-columns: 1fr; }
  .about-left img { max-width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .vehicles-grid > img { margin-right: 0; }
  .contact-inner { padding-left: var(--pad); }
  .contact-grid { grid-template-columns: 1fr; }
  .site-footer .wrap { flex-direction: column; }
}