:root {
  --premium-paper: #f6f5f1;
  --premium-white: #ffffff;
  --premium-ink: #111318;
  --premium-graphite: #292d34;
  --premium-muted: #676d76;
  --premium-line: #dcdde0;
  --premium-red: #d71920;
  --premium-red-dark: #a90f15;
  --premium-soft-red: #faeaea;
}

html.bg-slate-50,
body {
  background: var(--premium-paper) !important;
  color: var(--premium-ink) !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 16px;
}

html, body { max-width: 100%; overflow-x: hidden; }

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 420px;
  background: linear-gradient(132deg, rgba(215,25,32,.055), transparent 58%);
  pointer-events: none;
}

body > header,
body > header.bg-white\/95 {
  background-color: rgba(255,255,255,.96) !important;
  background-image: none !important;
  border-color: rgba(17,19,24,.11) !important;
  box-shadow: none !important;
}

body > header > div { max-width: 1240px !important; min-height: 78px; }
header img[alt="AutoCosto"] { filter: none !important; width: clamp(148px, 15vw, 178px) !important; }
header .border-l { border-color: var(--premium-line) !important; }
header .text-slate-500,
header .text-slate-400 { color: var(--premium-muted) !important; }

header .bg-slate-50 {
  background: var(--premium-paper) !important;
  background-image: none !important;
  border-color: var(--premium-line) !important;
  box-shadow: none !important;
  padding: 9px 12px !important;
}

header input {
  background: transparent !important;
  border: 0 !important;
  color: var(--premium-ink) !important;
  font-size: 14px !important;
}

main { position: relative; max-width: 1240px !important; padding-top: 42px !important; padding-bottom: 72px !important; }

.calculator-intro {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  align-items: end;
  margin: 0 0 32px;
}

.calculator-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--premium-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 8px;
}

.calculator-back:hover { color: var(--premium-red); }
.calculator-back .material-symbols-outlined { font-size: 19px; }

.calculator-intro h1 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(3.3rem, 5.2vw, 5.1rem);
  line-height: .94;
  letter-spacing: -.025em;
  color: var(--premium-ink);
}

.calculator-intro p { margin: 12px 0 0; color: var(--premium-muted); font-size: 17px; }

.calculator-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 22px;
  color: var(--premium-muted);
  font-size: 14px;
  font-weight: 700;
}
.calculator-proof-row span { display: inline-flex; align-items: center; gap: 7px; }
.calculator-proof-row strong { color: var(--premium-red); font-family: "Barlow Condensed", sans-serif; font-size: 19px; line-height: 1; }

.bg-white {
  background: var(--premium-white) !important;
  background-image: none !important;
  color: var(--premium-ink) !important;
  border-color: transparent !important;
  box-shadow: 0 18px 54px rgba(24,29,36,.09) !important;
}

.bg-slate-50,
.bg-slate-100,
.bg-slate-100\/70,
.bg-slate-200 {
  background: var(--premium-paper) !important;
  background-image: none !important;
}

.border-slate-200,
.border-slate-300,
.border-slate-800 { border-color: var(--premium-line) !important; }

.text-slate-900,
.text-slate-800,
.text-slate-700 { color: var(--premium-ink) !important; }
.text-slate-600,
.text-slate-500 { color: var(--premium-muted) !important; }
.text-slate-400,
.text-slate-300 { color: #8b9098 !important; }

#entry-console {
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1.12fr .88fr;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 16px !important;
  border: 0 !important;
}

.ec-step,
.ec-step > div,
#section-budget-input,
#budget-presets-container,
#smart-input { min-width: 0 !important; max-width: 100% !important; }

.grid:has(#post-detect.hidden) > .lg\:col-span-7 { grid-column: 1 / -1 !important; }
.grid:has(#post-detect.hidden) #entry-console { margin-top: 0 !important; }

.ec-step { display: block !important; padding: 34px 36px; }
.ec-step ~ .ec-step { border-left: 1px solid var(--premium-line); }
.ec-n, .ec-rule { display: none !important; }
.ec-lbl {
  color: var(--premium-ink) !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 29px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
}
/* El encabezado de cada paso es una sola linea: titulo a la izquierda y, en el
   presupuesto, el selector de moneda a la derecha. Reserva su alto aunque el
   paso 02 no tenga control, para que ambas columnas compartan el mismo ritmo
   vertical y los dos campos queden a nivel. */
.ec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Reserva el alto del selector de moneda. Si el encabezado del paso 02 mide
     menos, su campo sube y los dos dejan de estar a nivel. */
  min-height: 40px;
}
.ec-head .ec-lbl { margin: 0 !important; }

.ec-hint {
  margin: 8px 0 19px !important;
  color: var(--premium-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  /* Dos lineas reservadas: si una ayuda envuelve y la otra no, los campos
     vuelven a desnivelarse. */
  min-height: calc(2 * 1.55em);
}

#section-budget-input { gap: 12px !important; }
#switch-budget-currency {
  background: var(--premium-paper) !important;
  border-color: var(--premium-line) !important;
  border-radius: 9px !important;
  /* Piso de legibilidad del sistema: ningun control funcional baja de 14px. */
  font-size: 14px !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}
#switch-budget-currency button { min-width: 48px; padding: 6px 10px !important; }
#btn-budget-curr-hnl.bg-brand-red,
#btn-budget-curr-usd.bg-brand-red { background: var(--premium-red) !important; }

input, select, textarea {
  background: var(--premium-paper) !important;
  border-color: var(--premium-line) !important;
  color: var(--premium-ink) !important;
  opacity: 1 !important;
}
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -webkit-text-fill-color: var(--premium-ink) !important;
  text-indent: 0 !important;
  line-height: 1.25 !important;
  padding-right: 36px !important;
  background-image: none !important;
}
select option { color: var(--premium-ink) !important; background: #fff !important; }
select option:disabled { color: #9a9ea5 !important; }
.select-control { position: relative; min-height: 44px; }
.select-control::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--premium-muted);
  border-bottom: 2px solid var(--premium-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
input::placeholder { color: #9a9ea5 !important; }
input:focus, select:focus, textarea:focus { border-color: var(--premium-red) !important; background: white !important; }

#input-budget {
  /* Misma altura que el campo del enlace: los dos datos de entrada pesan igual
     en la retícula, aunque la cifra siga siendo la voz dominante. */
  min-height: 48px;
  height: 48px;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.015em !important;
  border-radius: 11px !important;
}
#symbol-budget-currency { color: var(--premium-red) !important; font-family: "Barlow Condensed", sans-serif !important; font-size: 20px !important; }

#budget-presets-container { gap: 7px !important; }
.budget-preset-chip {
  background: transparent !important;
  color: var(--premium-graphite) !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
.budget-preset-chip:hover { color: white !important; background: var(--premium-red) !important; border-color: var(--premium-red) !important; }
.budget-note { margin: 0; color: var(--premium-muted); font-size: 13px; }

#smart-input {
  /* 48px: por encima del piso tactil de 44px y sin el aire de sobra que hacia
     nadar al texto dentro de una caja de 54. */
  min-height: 48px;
  height: 48px;
  padding: 11px 44px 11px 14px !important;
  border-radius: 11px !important;
  font-family: "Manrope", sans-serif !important;
  /* 16px = token body del sistema. Ademas, iOS Safari hace zoom al enfocar
     cualquier campo por debajo de 16px, asi que 15 era un defecto real. */
  font-size: 16px !important;
}

#btn-auto-detect {
  /* Acompana la altura del campo que tiene al lado. */
  min-height: 48px;
  height: 48px;
  background: var(--premium-red) !important;
  border-radius: 11px !important;
  padding-inline: 20px !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 14px !important;
  box-shadow: 0 10px 24px rgba(169,15,21,.22) !important;
}
#btn-auto-detect:hover { background: var(--premium-red-dark) !important; }
#btn-manual-start { display: inline-block; margin-top: 12px; color: var(--premium-muted) !important; font-size: 13px !important; text-underline-offset: 4px; }
.calculator-secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid var(--premium-line);
  border-radius: 9px;
  background: var(--premium-paper);
  color: var(--premium-graphite);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.calculator-secondary-action:hover { border-color: var(--premium-red); color: var(--premium-red); background: white; }
.calculator-secondary-action .material-symbols-outlined { font-size: 17px; }

/* El resultado conserva su estructura funcional, pero adopta el expediente claro. */
main > .grid:not(:has(#post-detect.hidden)) { gap: 28px !important; }
.grid:not(:has(#post-detect.hidden)) #entry-console { display: none !important; }
.grid:not(:has(#post-detect.hidden)) > .lg\:col-span-7 { grid-column: span 7 / span 7 !important; }
.grid:not(:has(#post-detect.hidden)) > .lg\:col-span-5 { grid-column: span 5 / span 5 !important; }

/* Con la cotizacion en pantalla el titular y los pasos 01-02-03 ya no
   explican nada: el carro y el resultado ocupan ese lugar. Queda "Inicio". */
.calculator-intro:has(+ .grid #post-detect:not(.hidden)) { margin-bottom: 14px; }
.calculator-intro:has(+ .grid #post-detect:not(.hidden)) > div { display: none; }

/* Solo las tarjetas de primer nivel. Con descendiente (espacio) el relleno de
   24px caia tambien en botones y tarjetas anidadas: el boton "Comparar" y las
   opciones de naviera se inflaban y desbordaban en movil. */
#post-detect > .bg-white,
.lg\:col-span-5 > .bg-white { border-radius: 14px !important; padding: 24px !important; }
#adv-settings { display: flex; flex-direction: column; gap: 8px; }
.adv-item { background: #fff; border: 1px solid var(--premium-line); border-radius: 14px; }
.adv-body { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 16px; }
#sheet-conditions summary { list-style: none; }
#sheet-conditions summary::-webkit-details-marker { display: none; }
#sheet-conditions details[open] .adv-chev { transform: rotate(180deg); }
/* El detalle arranca alineado con el titulo, no con el icono. */
.sheet-condition-text { padding: 0 12px 12px 39px; line-height: 1.45; }
/* Titulo y oxido: el texto secundario sigue el color de la tarjeta (verde,
   ambar o rojo) en vez de quedar verde fijo. */
#badge-title-desc, #badge-rust-desc { color: inherit !important; opacity: .8; }

/* Movil: tarjeta dentro de tarjeta dentro de tarjeta gasta ~50px de ancho en
   bordes y rellenos. Dentro de los ajustes las secciones pasan a separarse con
   un filete, sin caja propia. */
@media (max-width: 640px) {
  #post-detect > .bg-white,
  .lg\:col-span-5 > .bg-white { padding: 18px 16px !important; }
  .adv-item > .adv-sum { padding: 14px 16px; }
  .adv-body { padding: 0 16px 16px; }
}
#vehicle-card-img-wrap { border: 0 !important; border-radius: 12px !important; box-shadow: none !important; }
#post-detect h2 { font-family: "Barlow Condensed", sans-serif !important; font-size: 29px !important; }

.bg-brand-navy {
  background: var(--premium-ink) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 55px rgba(17,19,24,.2) !important;
}
.bg-brand-navy::before { display: none !important; }
#hero-primary-val { color: #ff4a4f !important; font-family: "Barlow Condensed", sans-serif !important; font-size: clamp(3.7rem,5vw,5.3rem) !important; text-shadow: none !important; }
#hero-secondary-val { color: white !important; }
.bg-brand-navy .text-slate-300,
.bg-brand-navy .text-slate-400 { color: #b8bcc3 !important; }

.rounded-3xl { border-radius: 16px !important; }
.rounded-2xl { border-radius: 14px !important; }
.rounded-xl { border-radius: 11px !important; }

/* El pie es asfalto, segun el sistema. La clase utilitaria .bg-white que trae
   el marcado gana por especificidad a un selector de dos tipos, asi que la
   regla la nombra explicitamente: sin esto el fondo quedaba blanco mientras el
   texto ya era blanco, y "AutoCosto" desaparecia. */
body > footer,
body > footer.bg-white {
  background: var(--premium-ink) !important;
  background-image: none !important;
  border: 0 !important;
  color: #b8bcc3 !important;
  padding-block: 28px !important;
}
body > footer .text-slate-800,
body > footer .text-slate-700 { color: white !important; }
body > footer .text-brand-red { color: var(--premium-red) !important; }
/* Evita que una sola palabra quede colgando en su propio renglon. */
body > footer p, body > footer span { text-wrap: pretty; }

/* Mismo tratamiento que el pie de la portada: el logotipo va en imagen y se
   blanquea por filtro sobre el asfalto, en vez de repetir la palabra en texto. */
body > footer .footer-logo {
  width: 120px;
  height: auto;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}

/* Movil: la fila del nombre no cabe en 375px y dejaba la vinneta huerfana al
   inicio de la segunda linea. Se apila y la vinneta desaparece, porque separa
   dos cosas que ya no comparten renglon. */
@media (max-width: 640px) {
  body > footer > div { gap: 14px !important; text-align: center; }
  body > footer > div > div:first-child {
    flex-direction: column !important;
    gap: 4px !important;
    text-align: center;
  }
  body > footer > div > div:first-child > span:nth-child(2) { display: none !important; }
  body > footer .footer-logo { width: 128px; margin-inline: auto; }
}

::-webkit-scrollbar-track { background: var(--premium-paper); }
::-webkit-scrollbar-thumb { background: #aaaeb5; }
::-webkit-scrollbar-thumb:hover { background: #777c85; }
html { scrollbar-color: #aaaeb5 var(--premium-paper); }

@media (max-width: 900px) {
  .calculator-intro { grid-template-columns: 1fr; gap: 14px; }
  .calculator-intro h1 { font-size: clamp(3.2rem, 11vw, 4.7rem); }
  #entry-console { grid-template-columns: 1fr; }
  .ec-step ~ .ec-step { border-left: 0; border-top: 1px solid var(--premium-line); }
  .grid:not(:has(#post-detect.hidden)) > .lg\:col-span-7,
  .grid:not(:has(#post-detect.hidden)) > .lg\:col-span-5 { grid-column: 1 / -1 !important; }
}

@media (max-width: 640px) {
  main { padding: 28px 16px 54px !important; }
  body > header > div { width: 100% !important; min-height: 68px; padding-inline: 16px !important; gap: 10px !important; }
  header img[alt="AutoCosto"] { width: 142px !important; }
  header .md\:flex { display: none !important; }
  header .flex.items-center.gap-3 { min-width: 0; gap: 5px !important; }
  header .bg-slate-50 { min-width: 0; padding: 7px 8px !important; gap: 4px !important; font-size: 12px !important; }
  .calculator-intro { margin-bottom: 24px; }
  .calculator-intro h1 { max-width: 100%; overflow-wrap: normal; }
  .calculator-intro p { font-size: 16px; }
  .calculator-proof-row { gap: 9px 15px; margin-top: 18px; font-size: 14px; }
  .ec-step { padding: 27px 22px; }
  .ec-lbl { font-size: 26px !important; }
  #input-budget { font-size: 26px !important; }
  /* El campo ya es 16px en todos los anchos: iOS no debe hacer zoom nunca. */
  #btn-auto-detect { width: 100%; }
  #budget-presets-container { width: 100%; flex-wrap: wrap !important; }
  .budget-preset-chip { flex: 0 0 auto; }

  /* El selector de modo y la moneda no comparten una fila en pantallas
     estrechas: al intentar encajarlos juntos los textos se montaban. El modo
     ocupa todo el ancho y la moneda queda debajo, alineada a la derecha. */
  .ec-head {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
  }
  .ec-head > .grid {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ec-head > .grid button {
    min-width: 0;
    width: 100%;
    padding-inline: 7px !important;
    gap: 4px !important;
    font-size: 14px !important;
  }
  .ec-head > .grid button > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #switch-budget-currency {
    order: 2;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-left: 0;
    padding: 3px !important;
    border-radius: 10px !important;
  }
  #switch-budget-currency button {
    min-width: 0;
    width: 100%;
    padding-block: 7px !important;
    border-radius: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Critical labels, alerts and actions stay readable on every viewport. */
body [class~="text-xs"]:not(.material-symbols-outlined),
body [class~="text-[9px]"]:not(.material-symbols-outlined),
body [class~="text-[10px]"]:not(.material-symbols-outlined),
body [class~="text-[11px]"]:not(.material-symbols-outlined),
body [class~="text-[12px]"]:not(.material-symbols-outlined),
body [class~="text-[13px]"]:not(.material-symbols-outlined) { font-size: 14px !important; }

/* Ficha de datos del lote. Rejilla de pares etiqueta/valor con filete, al
   estilo de una hoja de especificaciones. app.js solo inyecta las filas que el
   scraper devolvio, asi que aqui no hay estados vacios que resolver. */
/* Titulo del vehiculo: con este minimo, en movil el badge de estado baja de
   linea en vez de estrujar el nombre a 90px. */
.vehicle-title { min-width: 12rem; }

.vehicle-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
}
.vehicle-specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--premium-line);
}
.vehicle-specs dt {
  margin: 0;
  color: var(--premium-muted);
  font-size: 14px;
}
.vehicle-specs dd {
  margin: 0;
  color: var(--premium-ink);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .vehicle-specs { grid-template-columns: 1fr; gap: 0; }
}

/* Tarjeta de precios en vivo: cuando el lote no trae puja ni "comprar ahora",
   se queda sin un solo hijo visible y deja un rectangulo blanco de 50px que no
   significa nada. Una tarjeta vacia es ruido, no estructura. */
#lot-prices-card:has(#live-prices.hidden) { display: none !important; }

/* Formulario de datos manuales y selectores de logistica. La regla general de
   campos usa el relleno del presupuesto, que es una cifra grande; aplicado a un
   select de 14px da cajas de 66-71px y un formulario de 771px de alto.
   Aqui los campos vuelven a una densidad de formulario, sin bajar del minimo
   tactil de 44px. */
#manual-vehicle-form input,
#manual-vehicle-form select,
#adv-settings input,
#adv-settings select {
  min-height: 44px !important;
  height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-inline: 12px !important;
  font-size: 14px !important;
  border-radius: 9px !important;
}
#manual-vehicle-form select,
#adv-settings select { padding-right: 36px !important; }
/* Campos con prefijo o icono a la izquierda ("L", lupa): el relleno de 12px
   de arriba metia el texto debajo del prefijo. */
#adv-settings input[class*="pl-"],
#manual-vehicle-form input[class*="pl-"] { padding-left: 36px !important; }
#manual-vehicle-form { gap: 8px 16px !important; }
#manual-vehicle-form label { margin-bottom: 2px; }

/* Iconos del buscador: centrados respecto al campo de 44px, no pegados arriba. */
#input-yard-search ~ .material-symbols-outlined,
#input-yard-search ~ #btn-clear-yard-search {
  top: 50% !important;
  transform: translateY(-50%);
}
#input-yard-search ~ #btn-clear-yard-search:not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* El selector de modo ES el encabezado del paso 01: dice que dato se pide, asi
   que un titulo aparte repetiria lo mismo y agregaria una fila que desnivela
   las dos columnas. Se le da el alto del encabezado para que el campo del
   presupuesto siga arrancando a la misma altura que el del enlace. */
.ec-head > .grid { flex: 0 1 auto; margin: 0; gap: 2px !important; padding: 3px !important; border-radius: 10px !important; }
.ec-head > .grid button { padding: 7px 10px !important; font-size: 13.5px !important; white-space: nowrap; border-radius: 8px !important; }
.ec-head > .grid button .material-symbols-outlined { font-size: 16px !important; }
#input-bid { min-height: 48px; height: 48px; padding-top: 6px !important; padding-bottom: 6px !important; font-size: 28px !important; font-family: "Barlow Condensed", sans-serif !important; }

/* Llegada con ?lote: se oculta el formulario hasta que termine la deteccion
   (ver js/cotizador-preload.js) para no mostrar la caja y luego saltar. */
.auto-detecting main > * { display: none !important; }
/* Cargador de marca: la aguja del isotipo sube como un velocimetro
   (animacion dentro de assets/brand/autocosto-loader.svg). Aparece solo si la
   carga pasa de 0.3 s; un lote ya guardado responde antes y no parpadea. */
.auto-detecting main { position: relative; min-height: 70vh; }
.auto-detecting main::before,
.auto-detecting main::after { position: absolute; left: 50%; top: 110px; opacity: 0; animation: ac-loader-in .25s ease .3s forwards; }
.auto-detecting main::before {
  content: "";
  width: 148px; height: 148px; margin-left: -74px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 32px rgba(17,19,24,.09);
}
.auto-detecting main::after {
  content: "Preparando tu cotización…";
  width: 280px; margin-left: -140px;
  padding-top: 176px;
  background: url("/assets/brand/autocosto-loader.svg") no-repeat center 4px / 140px 140px;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 26px;
  color: var(--premium-muted, #64748b);
}
@keyframes ac-loader-in { to { opacity: 1; } }

/* Deslizador de ajuste rapido en la tarjeta de resultado (fondo oscuro). */
.hero-slider { margin-top: 18px; padding: 12px 14px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.hero-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 12px; color: #cbd5e1; }
.hero-slider-head output { color: #fff; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
#hero-slider-input { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--premium-red, #ef3b3b) var(--fill, 0%), rgba(255,255,255,.18) var(--fill, 0%)); }
#hero-slider-input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--premium-red, #ef3b3b); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#hero-slider-input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--premium-red, #ef3b3b); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#hero-slider-input:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media print { .hero-slider { display: none; } }

/* --- Ficha de resultado: presupuesto -> oferta -> en que se va el dinero --- */
.hero-kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b8bcc3; }
.hero-budget { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.hero-budget-val { font-family: "Barlow Condensed", sans-serif; font-size: 34px; font-weight: 700; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
#hero-secondary-val.hero-explain { margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.45; color: #d7dade !important; }
.hero-lines { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.hero-lines-title { margin: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8d929a; }
.hero-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: #b8bcc3; }
.hero-line > span:last-child { color: #f1f2f4; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-line small { font-size: 11px; color: #8d929a; }
.hero-line-bid > span { color: #fff !important; font-weight: 700; }
.hero-totals { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #d7dade; }
.hero-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hero-total-row > :last-child { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.hero-total-row strong { font-size: 18px; color: #fff; }
.hero-total-margin > :last-child { font-size: 15px; }
.hero-summary { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 13px; line-height: 1.5; color: #e6e8eb; }

/* Confianza: discreto, nunca compite con el campo ni con el resultado. */
.trust-note { margin: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #8a9098; }
.trust-note .material-symbols-outlined { font-size: 14px; }

.listing-closed { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 11px; background: #f1f2f4; border: 1px solid var(--premium-line); color: var(--premium-graphite); font-size: 13px; }
.listing-closed.hidden { display: none; }
.listing-closed .material-symbols-outlined { font-size: 20px; color: var(--premium-muted); }
.listing-closed strong { display: block; color: var(--premium-ink); }
.listing-closed p { margin: 2px 0 0; line-height: 1.4; }
.hero-budget.hidden, .hero-total-row.hidden { display: none; }

/* Lo que se le paga a la subasta al ganar: oferta + sus fees. */
.hero-pay { margin-top: 12px; padding: 10px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.hero-pay.hidden { display: none; }
.hero-pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: #d7dade; }
.hero-pay-row strong { font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
#hero-pay-detail { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: #9aa0a8; }

/* Accion unica del formulario inicial, a todo el ancho debajo de los dos datos. */
.ec-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 36px 28px; border-top: 1px solid var(--premium-line); }
.ec-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 30px; border: 0; border-radius: 12px; background: var(--premium-red); color: #fff; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 10px 24px rgba(215,25,32,.22); transition: background .15s ease, transform .1s ease; }
.ec-cta:hover { background: var(--premium-red-dark); }
.ec-cta:active { transform: scale(.98); }
.ec-cta .material-symbols-outlined { font-size: 20px; }
@media (max-width: 760px) {
  .ec-foot { padding: 18px 20px 22px; }
  .ec-cta { width: 100%; }
}
.ec-foot { flex-direction: column; justify-content: center; gap: 10px; text-align: center; }
.ec-cta { min-width: 300px; }
@media (max-width: 760px) { .ec-cta { min-width: 0; } }