:root { --paper:#f6f5f1; --white:#fff; --ink:#111318; --graphite:#252930; --muted:#626872; --line:#d9dbde; --soft:#ececea; --red:#d71920; --red-dark:#a90f15; --shadow:0 24px 70px rgba(18,23,31,.16); }
*,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:var(--paper);font-family:"Manrope",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} button,input{font:inherit} a{color:inherit;text-underline-offset:4px} ::selection{background:var(--red);color:white} :focus-visible{outline:3px solid rgba(215,25,32,.35);outline-offset:3px}
.shell{width:min(1240px,calc(100% - 48px));margin-inline:auto}.skip-link{position:fixed;left:20px;top:-80px;z-index:100;padding:12px 18px;background:var(--ink);color:white}.skip-link:focus{top:16px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,245,241,.94);border-bottom:1px solid rgba(17,19,24,.12);backdrop-filter:blur(16px)}.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand img{display:block;width:176px;height:auto}.nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:700}.nav>a:not(.nav-cta){text-decoration:none;color:var(--graphite)}.nav>a:not(.nav-cta):hover{color:var(--red)}.nav-cta{text-decoration:none;color:white;background:var(--ink);padding:13px 20px;border-radius:10px}.nav-cta:hover{background:var(--red)}
.hero{position:relative;min-height:730px;overflow:hidden;background:var(--paper)}.hero-photo{position:absolute;inset:0 0 0 52%}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:58% center;display:block}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 46%,rgba(246,245,241,.92) 53%,rgba(246,245,241,.18) 68%,rgba(246,245,241,0) 82%)}.hero-layout{position:relative;min-height:730px;display:flex;align-items:flex-start;padding-top:74px}.hero-copy{width:58%;max-width:760px}.hero h1{font-family:"Barlow Condensed",sans-serif;font-size:clamp(4rem,6.3vw,5.8rem);line-height:.91;letter-spacing:-.025em;margin:0;max-width:720px;text-wrap:balance}.hero h1 em{color:var(--red);font-style:normal}.hero-lede{max-width:590px;margin:26px 0 24px;color:var(--graphite);font-size:18px;line-height:1.6}.hero-trust{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--muted);font-size:14px}.hero-trust span{position:relative;padding-left:15px}.hero-trust span::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--red)}.hero-trust strong{color:var(--ink)}
.quick-calculator{position:absolute;left:24px;right:24px;bottom:34px;display:grid;grid-template-columns:auto 2.2fr 1fr auto;align-items:end;gap:0;padding:20px 22px 18px;background:rgba(255,255,255,.98);box-shadow:var(--shadow);border-radius:14px}.quick-heading{align-self:center;padding-right:24px}.quick-heading h2{margin:0;font-family:"Barlow Condensed",sans-serif;font-size:30px;line-height:1}.quick-heading p{margin:5px 0 0;color:var(--muted);font-size:14px}.field-block{display:grid;gap:7px;padding:0 20px;border-left:1px solid var(--line);color:var(--graphite);font-size:13px;font-weight:800}.field-input{display:flex;align-items:center;gap:9px;min-height:50px;background:var(--paper);border:1px solid transparent;border-radius:9px;padding:0 14px}.field-input:focus-within{border-color:var(--red);background:white}.field-input input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:15px}.field-input input::placeholder{color:#8a8f97}.money-input b{color:var(--red);font-size:22px;font-family:"Barlow Condensed",sans-serif}.field-input .material-symbols-outlined{color:var(--red);font-size:21px}.primary-action{min-height:50px;border:0;border-radius:9px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:12px;color:white;background:var(--red);font-weight:800;cursor:pointer;box-shadow:0 9px 22px rgba(169,15,21,.25)}.primary-action:hover{background:var(--red-dark)}.primary-action .material-symbols-outlined{font-size:21px;transition:transform .18s ease}.primary-action:hover .material-symbols-outlined{transform:translateX(4px)}.bid-rail{grid-column:2/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:17px 0 0 20px}.rail-stop{display:grid}.rail-stop small{color:var(--muted);font-size:12px}.rail-stop strong{font-family:"Barlow Condensed",sans-serif;font-size:22px;line-height:1.1}.rail-result strong{color:var(--red)}.rail-line{height:1px;background:#c9cbd0;position:relative}.rail-line::before,.rail-line::after,.rail-line i{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;transform:translateY(-50%);background:var(--red)}.rail-line::before{left:0}.rail-line::after{right:0}.rail-line i{left:58%;width:5px;height:5px;background:var(--graphite)}
.difference{background:var(--ink);color:white;padding:110px 0}.difference-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:110px;align-items:start}.difference-statement>p{margin:0 0 18px;color:#babdc3;font-size:15px}.difference h2{margin:0;font-family:"Barlow Condensed",sans-serif;font-size:clamp(3rem,5vw,4.8rem);line-height:.98;letter-spacing:-.02em}.comparison{border-top:1px solid #444850}.comparison-row{display:grid;grid-template-columns:145px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid #444850}.comparison-row span{font-family:"Barlow Condensed",sans-serif;font-size:20px;font-weight:700}.comparison-row p{margin:0;color:#b6bac1;font-size:16px}.active-row span{color:#ff4a4f}.active-row p{color:white;font-weight:600}.comparison-note{margin:24px 0 0;color:#9499a2;font-size:14px;max-width:62ch}
.process{padding:112px 0;background:white}.process-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:120px}.process-heading{position:sticky;top:120px;align-self:start}.process h2,.recent h2,.closing h2{font-family:"Barlow Condensed",sans-serif;letter-spacing:-.02em}.process-heading h2{margin:0;font-size:clamp(3rem,4.5vw,4.4rem);line-height:.98}.process-heading p{margin:20px 0 28px;color:var(--muted);font-size:17px;max-width:36ch}.process-heading a{color:var(--red);font-weight:800;text-decoration:none}.process-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.process-list li{display:grid;grid-template-columns:62px 1fr;gap:30px;padding:34px 0;border-bottom:1px solid var(--line)}.process-list>li>span{color:var(--red);font-family:"Barlow Condensed",sans-serif;font-size:34px;font-weight:800}.process-list h3{margin:0 0 7px;font-size:24px}.process-list p{margin:0;color:var(--muted);font-size:16px;max-width:54ch}
.recent{padding:96px 0 110px;background:var(--paper)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:34px}.section-heading h2{margin:0;font-size:clamp(2.6rem,4vw,4rem);line-height:1}.section-heading p{margin:12px 0 0;color:var(--muted)}.section-heading>a{color:var(--red);font-weight:800;text-decoration:none;white-space:nowrap}.vehicle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:white;border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(25,29,35,.08)}.card .ph{display:block;aspect-ratio:16/10;background:#e9eaeb;color:#9ca1a9}.card .ph img{width:100%;height:100%;object-fit:cover;display:block}.card .ph>span{width:100%;height:100%;display:grid;place-items:center;font-size:44px}.card .body{padding:18px}.card .row{display:flex;align-items:center;gap:9px;margin-bottom:10px}.card .house{padding:4px 7px;border-radius:5px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.card .house.copart{color:#174c9c;background:#ebf1fa}.card .house.iaai{color:#a1181d;background:#f9e9e9}.card .lot,.card small{color:var(--muted);font-size:13px}.card .name{color:var(--ink);font-size:17px;font-weight:800;line-height:1.35;text-decoration:none}.card .body>small{display:block;margin-top:5px}.card .acts{display:flex;align-items:center;gap:12px;padding-top:15px;margin-top:16px;border-top:1px solid var(--soft)}.card .acts a{font-size:13px;font-weight:800;text-decoration:none}.card .act-red{color:var(--red)}.card .act-out{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--muted)}.card .act-out .material-symbols-outlined{font-size:15px}.recent-empty{min-height:150px;padding:32px 38px;display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:24px;background:white;border-radius:14px;box-shadow:0 12px 30px rgba(25,29,35,.06)}.recent-empty[hidden]{display:none}.recent-empty>.material-symbols-outlined{font-size:44px;color:var(--red)}.recent-empty strong{font-size:19px}.recent-empty p{margin:4px 0 0;color:var(--muted)}.recent-empty a{padding:12px 17px;border-radius:9px;color:white;background:var(--ink);text-decoration:none;font-weight:800}
.closing{background:var(--red);color:white;padding:76px 0}.closing-layout{display:flex;align-items:center;justify-content:space-between;gap:40px}.closing h2{margin:0;max-width:800px;font-size:clamp(3rem,5.3vw,5rem);line-height:.96}.closing-action{min-width:250px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 20px;color:var(--ink);background:white;border-radius:10px;font-weight:800;text-decoration:none}footer{background:var(--ink);color:#b6bac1;padding:30px 0}.footer-inner{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:34px;font-size:13px}.footer-inner img{width:160px;filter:brightness(0) invert(1)}.footer-inner p{margin:0;text-align:center}
@media(max-width:980px){.hero{min-height:920px}.hero-photo{inset:0 0 auto 34%;height:500px}.hero-shade{background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 42%,rgba(246,245,241,.55) 67%,rgba(246,245,241,.05) 100%),linear-gradient(0deg,var(--paper) 0%,rgba(246,245,241,0) 48%)}.hero-layout{min-height:920px;padding-top:60px}.hero-copy{width:62%}.quick-calculator{grid-template-columns:.8fr 1.8fr 1fr;bottom:32px}.quick-heading{grid-column:1/-1;padding:0 0 16px}.primary-action{grid-column:1/-1;margin-top:16px}.bid-rail{grid-column:1/-1;padding-left:0}.difference-layout,.process-layout{gap:64px}.vehicle-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.shell{width:min(100% - 32px,1240px)}.header-inner{min-height:68px}.brand img{width:148px}.nav>a:not(.nav-cta){display:none}.nav-cta{padding:11px 14px;font-size:13px}.hero{min-height:1040px}.hero-photo{inset:360px 0 auto 0;height:330px}.hero-photo img{object-position:68% center}.hero-shade{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 35%,rgba(246,245,241,.12) 54%,var(--paper) 67%)}.hero-layout{min-height:1040px;padding-top:44px}.hero-copy{width:100%}.hero h1{font-size:clamp(3.65rem,17vw,5rem)}.hero-lede{font-size:17px;margin-top:20px}.hero-trust{display:none}.quick-calculator{left:16px;right:16px;bottom:24px;display:grid;grid-template-columns:1fr;padding:22px 18px}.quick-heading,.field-block,.lot-field,.primary-action{grid-column:1}.field-block{border-left:0;border-top:1px solid var(--line);padding:16px 0 0;margin-top:16px}.primary-action{margin-top:18px}.bid-rail{padding-top:19px;gap:9px}.rail-stop small{font-size:10px}.rail-stop strong{font-size:18px}.difference,.process,.recent{padding:76px 0}.difference-layout,.process-layout{grid-template-columns:1fr;gap:48px}.difference h2{font-size:clamp(3.2rem,15vw,4.5rem)}.comparison-row{grid-template-columns:1fr;gap:8px}.process-heading{position:static}.process-list li{grid-template-columns:42px 1fr;gap:18px}.section-heading{align-items:start;flex-direction:column}.vehicle-grid{grid-template-columns:1fr}.recent-empty{grid-template-columns:44px 1fr;padding:28px 22px}.recent-empty a{grid-column:1/-1;text-align:center}.closing-layout{align-items:flex-start;flex-direction:column}.closing-action{width:100%}.footer-inner{grid-template-columns:1fr;text-align:center}.footer-inner img{margin-inline:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Functional copy never drops below the legibility floor. */
.field-block,
.rail-stop small,
.card .house,
.card .lot,
.card small,
.card .acts a,
.footer-inner { font-size: 14px; }

@media(max-width:720px){
  .nav-cta,
  .rail-stop small { font-size:14px; }
  .rail-stop strong { font-size:20px; }
}

/* Recent public lookups sit close to the main promise. Four cards maximum;
   on narrow screens the row becomes a touch-friendly snap carousel. */
.recent {
  position: relative;
  overflow: hidden;
  padding: 68px 0 76px;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(215,25,32,.035) 25%, transparent 25%) 0 0 / 42px 42px,
    linear-gradient(315deg, rgba(17,19,24,.025) 25%, transparent 25%) 0 0 / 42px 42px,
    #f5f4f0;
}
.recent .section-heading { align-items: end; margin-bottom: 28px; }
.recent .section-heading > div:first-child { max-width: 760px; }
.section-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.recent .section-heading h2 { font-size: clamp(2.8rem, 4.6vw, 4.35rem); }
.recent .section-heading p { max-width: 690px; font-size: 16px; }
.recent-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.recent-actions > a { margin-left: 7px; color: var(--red); font-weight: 850; text-decoration: none; white-space: nowrap; }
.carousel-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.carousel-button:hover { color: white; border-color: var(--red); background: var(--red); }
.carousel-button:focus-visible { outline: 3px solid rgba(215,25,32,.24); outline-offset: 3px; }
.carousel-button:disabled { color: var(--muted); border-color: var(--line); background: rgba(255,255,255,.64); cursor: default; opacity: .55; }
.carousel-button[hidden] { display: none; }
.recent-viewport { overflow: hidden; }
.recent .vehicle-grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 4px 22px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.recent .vehicle-grid::-webkit-scrollbar { display: none; }
.recent .card {
  flex: 0 0 calc((100% - 54px) / 4);
  min-width: 250px;
  scroll-snap-align: start;
  border: 1px solid rgba(17,19,24,.08);
  box-shadow: 0 16px 42px rgba(17,19,24,.10);
}
.recent[data-count="1"] .card { max-width: 305px; }
.recent .card .ph { aspect-ratio: 16 / 9; }
.recent .card .body { min-height: 190px; display: flex; flex-direction: column; }
.recent .card .acts { margin-top: auto; }

@media(max-width:980px){
  .recent .card { flex-basis: calc((100% - 18px) / 2); }
}

@media(max-width:720px){
  .recent { padding: 52px 0 58px; }
  .recent .section-heading { margin-bottom: 22px; }
  .recent-actions { width: 100%; justify-content: flex-start; }
  .recent-actions > a { margin-left: auto; }
  .recent .card { flex-basis: 86%; min-width: 268px; }
}

.guides { padding: 84px 0 96px; background: var(--ink); color: white; }
.guides .section-heading h2 { color: white; }
.guides .section-heading p { color: #b9bdc4; }
.guides .section-heading > a { color: #ff4a50; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.guide-card { min-height: 300px; display: flex; flex-direction: column; padding: 26px; border: 1px solid #3b3f47; border-radius: 14px; background: #171a20; }
.guide-card > span { color: #ff4a50; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.guide-card h3 { margin: 38px 0 12px; font-family: "Barlow Condensed", sans-serif; font-size: 31px; line-height: 1.02; }
.guide-card p { margin: 0; color: #b9bdc4; font-size: 15px; }
.guide-card a { margin-top: auto; padding-top: 24px; color: white; font-weight: 850; text-decoration: none; }
.guide-card a:hover { color: #ff4a50; }

@media(max-width:900px){ .guide-grid { grid-template-columns: 1fr; } .guide-card { min-height: 230px; } }
@media(max-width:720px){ .guides { padding: 58px 0 68px; } }

/* Hero composition: use the complete editorial photograph instead of cropping
   the vehicle into a narrow right-hand column. */
@media(min-width:981px){
  .hero-photo { inset:0; }
  .hero-photo img { object-position:center center; }
  .hero-shade {
    background:linear-gradient(90deg,
      var(--paper) 0%,
      var(--paper) 27%,
      rgba(246,245,241,.96) 38%,
      rgba(246,245,241,.68) 48%,
      rgba(246,245,241,.08) 65%,
      rgba(246,245,241,0) 78%);
  }
}

/* Distilled proof band: keep the red/black AutoCosto signature without
   repeating the hero promise in a full editorial section. */
.proof-band {
  background: var(--ink);
  color: white;
  padding: 38px 0;
  border-top: 4px solid var(--red);
}
.proof-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.proof-lede {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2.2rem, 3.4vw, 3.35rem);
  line-height: .94;
  letter-spacing: -.02em;
}
.proof-lede strong { color: var(--red); }
.proof-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 24px;
  color: #d5d7dc;
  font-size: 14px;
  font-weight: 700;
}
.proof-points span { position: relative; padding-left: 14px; }
.proof-points span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}
.recent[hidden] { display: none; }
.process { padding-block: 88px 96px; }
.process-layout { gap: 82px; }
.process-list li { padding-block: 26px; }

@media(max-width:720px){
  .proof-band { padding: 30px 0; }
  .proof-band-inner { display: grid; gap: 22px; }
  .proof-lede { font-size: 2.55rem; }
  .proof-points { justify-content: flex-start; gap: 10px 18px; }
  .process { padding-block: 58px 68px; }
  .process-list li { padding-block: 22px; }
}

/* On phones the photograph becomes its own scene between the message and the
   calculator; the form intentionally rises over the lower body/tires. */
@media(max-width:720px){
  .hero,
  .hero-layout { min-height:1130px; }
  .hero-photo {
    inset:285px 0 auto;
    height:360px;
  }
  .hero-photo img { object-position:66% center; }
  .hero-shade {
    background:linear-gradient(180deg,
      var(--paper) 0%,
      var(--paper) 24%,
      rgba(246,245,241,.86) 31%,
      rgba(246,245,241,.18) 42%,
      rgba(246,245,241,.02) 51%,
      var(--paper) 61%,
      var(--paper) 100%);
  }
  .quick-calculator {
    top:560px;
    bottom:auto;
  }
}

/* Lotes cuya subasta termino: se conservan como referencia, sin invitar a ofertar. */
.recent .card .ph { position: relative; }
.card.is-closed .ph img { filter: grayscale(.7); opacity: .8; }
.card .ph > .status-flag { width: auto; height: auto; display: block; position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: 6px; background: rgba(25,29,35,.86); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.card .body > small.closed-note { margin-top: 8px; line-height: 1.4; }
.card .act-ref { color: var(--ink); }

/* El placeholder trae su propio marco: se amplia para que no se vea un doble borde. */
.card .ph img[src*="/vehicle-placeholder-"] { transform: scale(1.08); object-position: center 48%; }

/* Guias en fondo claro: el oscuro queda solo para el footer, que cierra la pagina.
   Antes ambos compartian --ink y se leian como un solo bloque. */
.guides { background: var(--paper); color: var(--ink); border-top: 1px solid var(--soft); }
.guides .section-heading h2 { color: var(--ink); }
.guides .section-heading p { color: var(--muted); }
.guides .section-heading > a { color: var(--red); }
.guide-card { background: white; border-color: var(--soft); box-shadow: 0 12px 30px rgba(25,29,35,.06); transition: transform .15s ease, box-shadow .15s ease; }
.guide-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(25,29,35,.1); }
.guide-card > span { color: var(--red); }
.guide-card h3 { color: var(--ink); }
.guide-card p { color: var(--muted); }
.guide-card a { color: var(--ink); }
.guide-card a:hover { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .guide-card { transition: none; } .guide-card:hover { transform: none; } }