/* ═══════════════════════════════════════════════════════════════
   CR Core · lenguaje visual "placa de máquina"
   Grafito y acero, ROJO FORJADO del logotipo como único acento,
   cromado en titulares, cantos vivos y referencias en monoespaciada.

   El logotipo no es rojo plano: es acero cromado con calor rojo.
   Por eso el acento es un rojo de temple (--cr-rojo-cl → --cr-rojo-os)
   y los titulares llevan degradado de cromado, no blanco liso.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cr-grafito:  #14171a;
  --cr-carbon:   #1c2126;
  --cr-acero:    #2a3138;
  --cr-acero-cl: #3c454f;
  --cr-linea:    #39424c;
  --cr-texto:    #e8ecf0;
  --cr-tenue:    #93a0ad;

  /* Acento de marca: el rojo del logotipo */
  --cr-rojo:     #e01b24;
  --cr-rojo-cl:  #ff3b30;
  --cr-rojo-os:  #96070f;

  /* Cromado del logotipo, para titulares y filos */
  --cr-cromo-alto: #ffffff;
  --cr-cromo:      #c8d0d8;
  --cr-cromo-bajo: #79838d;
  --cr-cromado: linear-gradient(180deg,
    #ffffff 0%, #e6ebf0 26%, #9aa5b1 52%, #dfe5eb 74%, #aab4be 100%);

  /* Alias: el tema y el plugin siguen pidiendo --cr-amarillo en muchos
     sitios. Se remapea al rojo para que el cambio sea de una sola pieza. */
  --cr-amarillo:    var(--cr-rojo);
  --cr-amarillo-os: var(--cr-rojo-os);

  --cr-verde:    #4ea86b;
  --cr-alerta:   #d2564b;
  --cr-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --cr-cond: "Oswald", "Archivo Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --cr-cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ancho: 1280px;
}

.cr-selector, .cr-ocasion, .cr-form, .cr-ref { font-family: var(--cr-cuerpo); }

/* ── Etiqueta superior: siempre monoespaciada y en versal ── */
.cr-eyebrow {
  font-family: var(--cr-mono);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cr-amarillo); margin: 0 0 .6rem;
}
.cr-eyebrow::before { content: "▚ "; opacity: .7; }

/* ── Selector ── */
.cr-selector {
  background: var(--cr-carbon);
  border: 1px solid var(--cr-linea);
  border-top: 3px solid var(--cr-amarillo);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  color: var(--cr-texto);
  position: relative;
}
/* remaches de esquina: el detalle que lo ata al mundo del taller */
.cr-selector::before, .cr-selector::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  background: var(--cr-acero-cl); border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
}
.cr-selector::before { top: 12px; left: 12px; }
.cr-selector::after  { top: 12px; right: 12px; }

.cr-selector__titulo {
  font-family: var(--cr-cond);
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  line-height: 1.02; letter-spacing: -.01em;
  text-transform: uppercase; margin: 0 0 .5rem; color: #fff;
}
.cr-selector__ayuda { color: var(--cr-tenue); margin: 0 0 1.8rem; max-width: 46ch; }

.cr-pasos { display: grid; gap: 1px; background: var(--cr-linea); border: 1px solid var(--cr-linea); }
@media (min-width: 860px) { .cr-pasos { grid-template-columns: repeat(3, 1fr); } }

.cr-paso {
  background: var(--cr-grafito); padding: 1rem 1.1rem 1.15rem;
  display: block; position: relative; transition: background .18s ease;
}
.cr-paso:focus-within { background: #1a1f24; }
.cr-paso.is-bloqueado { opacity: .48; }
.cr-paso__n {
  font-family: var(--cr-mono); font-size: .68rem; color: var(--cr-amarillo);
  letter-spacing: .14em; display: block; margin-bottom: .25rem;
}
.cr-paso__et {
  display: block; font-family: var(--cr-cond); text-transform: uppercase;
  letter-spacing: .06em; font-size: 1rem; margin-bottom: .55rem; color: #fff;
}

.cr-campo {
  width: 100%; background: var(--cr-acero); color: var(--cr-texto);
  border: 1px solid var(--cr-linea); border-radius: 0;
  font-size: .98rem; font-family: inherit;
  appearance: none;
  /* hueco reservado a la derecha para que la flecha no pise el valor */
  padding: .72rem 2.4rem .72rem .85rem;
  text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--cr-amarillo) 50%),
                    linear-gradient(135deg, var(--cr-amarillo) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
input.cr-campo { background-image: none; }
.cr-campo:focus { outline: 2px solid var(--cr-amarillo); outline-offset: -2px; }
.cr-campo:disabled { cursor: not-allowed; }

.cr-selector__pie {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; margin-top: 1.4rem;
}
.cr-ficha-maquina {
  font-family: var(--cr-mono); font-size: .82rem; color: var(--cr-tenue);
  margin: 0; padding-left: .9rem; border-left: 2px solid var(--cr-amarillo);
}

/* ── Botones ── */
.cr-btn {
  display: inline-block; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--cr-cond); text-transform: uppercase; letter-spacing: .07em;
  font-size: 1rem; padding: .85rem 1.7rem; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.cr-btn--primario {
  background: var(--cr-rojo); color: #fff;
  box-shadow: 3px 3px 0 var(--cr-rojo-os);
}
.cr-btn--primario:hover:not(:disabled) { background: var(--cr-rojo-cl); }
.cr-btn--primario:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--cr-amarillo-os); }
.cr-btn--primario:active:not(:disabled) { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--cr-amarillo-os); }
.cr-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.cr-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ── Resultados ── */
.cr-resultados { margin-top: 2rem; }
.cr-resultados__n {
  font-family: var(--cr-mono); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cr-tenue);
  border-bottom: 1px solid var(--cr-linea); padding-bottom: .6rem; margin: 0 0 1.2rem;
}
.cr-rejilla {
  display: grid; gap: 1px; width: 100%;
  background: var(--cr-linea); border: 1px solid var(--cr-linea);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.cr-pieza { background: var(--cr-grafito); display: flex; flex-direction: column; }
.cr-pieza:hover { background: #191d22; }
.cr-pieza__img { display: block; aspect-ratio: 1; background: #101315; overflow: hidden; }
.cr-pieza__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.cr-pieza:hover .cr-pieza__img img { transform: scale(1.05); }
.cr-pieza__cuerpo { padding: .95rem 1rem 1.15rem; display: flex; flex-direction: column; gap: .38rem; flex: 1; }
.cr-pieza__sku { font-family: var(--cr-mono); font-size: .72rem; color: var(--cr-amarillo); margin: 0; letter-spacing: .05em; }
.cr-pieza__t { font-size: .96rem; line-height: 1.3; margin: 0; font-weight: 600; }
.cr-pieza__t a { color: var(--cr-texto); text-decoration: none; }
.cr-pieza__t a:hover { color: var(--cr-amarillo); }
.cr-pieza__precio { font-family: var(--cr-cond); font-size: 1.35rem; color: #fff; margin: auto 0 0; }
.cr-pieza__precio s { font-size: .8rem; color: var(--cr-tenue); margin-left: .4rem; font-family: var(--cr-cuerpo); }
.cr-pieza__stock { font-family: var(--cr-mono); font-size: .72rem; margin: 0; }
.cr-pieza__stock.es-si { color: var(--cr-verde); }
.cr-pieza__stock.es-si::before { content: "● "; }
.cr-pieza__stock.es-no { color: var(--cr-tenue); }
.cr-pieza__stock.es-no::before { content: "○ "; }

/* ── Estado vacío ── */
.cr-vacio {
  border: 1px dashed var(--cr-linea); padding: 2.2rem 1.5rem; text-align: center;
  color: var(--cr-tenue); background: var(--cr-grafito);
}
.cr-vacio__t { font-family: var(--cr-cond); font-size: 1.3rem; color: #fff; margin: 0 0 .4rem; text-transform: uppercase; }
.cr-vacio .cr-btn { margin-top: 1rem; }

/* ── Buscador por referencia ─────────────────────────────────────
   El desplegable es media compra: si no se ve la pieza, el precio y
   si hay stock, el usuario abandona. Por eso lleva foto, resalta lo
   tecleado y siempre ofrece salida —ver todos o pedir la pieza—.
   ── */
.cr-ref { position: relative; }
.cr-ref__et {
  display: block; font-family: var(--cr-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cr-tenue); margin-bottom: .45rem;
}
.cr-ref__salida {
  position: absolute; z-index: 140; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--cr-carbon); border: 1px solid var(--cr-linea);
  border-top: 3px solid var(--cr-rojo);
  max-height: min(70vh, 32rem); overflow-y: auto;
  /* sombra fuerte: despega el desplegable de la página, que era el
     motivo de que pareciera incrustado en el héroe */
  box-shadow: 0 18px 40px rgba(0,0,0,.62);
  /* Más ancho que el campo solo si la pantalla lo permite: con
     max(100%, 420px) a secas se salía del móvil y cortaba el precio. */
  min-width: 100%; width: min(100%, 100vw - 2rem);
}
@media (min-width: 900px) { .cab__buscar .cr-ref__salida { width: max(100%, 430px); } }
/* En el buscador de móvil la lista va en flujo, no flotando */
.buscar-movil .cr-ref__salida {
  position: static; width: 100%; min-width: 0; max-height: none;
  box-shadow: none; margin-top: .7rem;
}
.cr-ref__salida::-webkit-scrollbar { width: 10px; }
.cr-ref__salida::-webkit-scrollbar-thumb { background: var(--cr-acero-cl); }

.cr-sug__cargando {
  margin: 0; padding: 1.1rem; color: var(--cr-tenue);
  font-family: var(--cr-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
}
.cr-sug__lista { display: grid; }

.cr-sug {
  display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: .8rem; align-items: center;
  padding: .7rem .85rem; text-decoration: none;
  border-bottom: 1px solid var(--cr-linea);
  transition: background .13s ease;
}
.cr-sug:hover, .cr-sug:focus-visible { background: var(--cr-acero); outline: none; }
.cr-sug__foto {
  width: 46px; height: 46px; background: #fff; display: grid; place-items: center;
  overflow: hidden; border: 1px solid var(--cr-linea);
}
.cr-sug__foto img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cr-sug__txt { display: grid; gap: .1rem; min-width: 0; }
.cr-sug__sku { font-family: var(--cr-mono); font-size: .68rem; color: var(--cr-rojo); letter-spacing: .04em; }
.cr-sug__n {
  color: var(--cr-texto); font-size: .9rem; line-height: 1.3; font-weight: 600;
  /* una sola línea: el ajuste a dos líneas descuadraba la fila */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-sug:hover .cr-sug__n { color: #fff; }
.cr-sug__marcas {
  font-family: var(--cr-mono); font-size: .64rem; color: var(--cr-tenue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-sug mark { background: rgba(224,27,36,.28); color: inherit; padding: 0 1px; }
.cr-sug__der { display: grid; justify-items: end; gap: .15rem; text-align: right; }
.cr-sug__p { font-family: var(--cr-cond); font-size: 1.12rem; color: #fff; line-height: 1; }
.cr-sug__stock {
  font-family: var(--cr-mono); font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}
.cr-sug__stock.es-si { color: var(--cr-verde); }
.cr-sug__stock.es-no { color: var(--cr-tenue); }

/* Salida siempre visible: nunca un callejón sin salida */
.cr-sug__mas {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .85rem; text-decoration: none; background: var(--cr-grafito);
  font-family: var(--cr-cond); text-transform: uppercase; letter-spacing: .05em;
  font-size: .9rem; color: var(--cr-texto);
  position: sticky; bottom: 0;
}
.cr-sug__mas b { color: var(--cr-rojo); }
.cr-sug__mas:hover { background: var(--cr-acero); color: #fff; }

.cr-sug__vacio { padding: 1.2rem; display: grid; gap: .5rem; justify-items: start; }
.cr-sug__vacio-t { margin: 0; color: #fff; font-weight: 600; font-size: .95rem; }
.cr-sug__vacio-d { margin: 0; color: var(--cr-tenue); font-size: .86rem; line-height: 1.45; }
.cr-sug__vacio .cr-btn { margin-top: .3rem; }

/* En la cabecera el desplegable se ancla a la derecha para no salirse */
.cab__buscar .cr-ref__salida { right: 0; left: auto; }

/* ── Ocasión ── */
.cr-ocasion { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .cr-ocasion { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cr-ocasion { grid-template-columns: repeat(3, 1fr); } }
.cr-maq { background: var(--cr-carbon); border: 1px solid var(--cr-linea); display: flex; flex-direction: column; }
.cr-maq__foto { display: block; position: relative; aspect-ratio: 4/3; background: var(--cr-grafito); overflow: hidden; }
/* la ilustración es 4:3 con suelo abajo: encuadrar arriba evita la franja muerta */
.cr-maq__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
/* Las horas ya no van sueltas en la esquina: son una chapa más, junto al
   año, para que en un listado de 20 máquinas las dos cifras que se comparan
   estén siempre en el mismo sitio. Ver .cr-maq__chapas más abajo. */
.cr-maq__cuerpo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.cr-maq__marca { font-family: var(--cr-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cr-amarillo); margin: 0; }
.cr-maq__t { font-family: var(--cr-cond); font-size: 1.35rem; text-transform: uppercase; margin: 0; line-height: 1.1; }
.cr-maq__t a { color: #fff; text-decoration: none; }
/* Rótulo encima del valor, no píldoras sueltas: "2.000 kg" sin decir de qué
   obliga al comprador a adivinar si es carga o peso de la máquina. */
.cr-maq__datos { list-style: none; padding: 0; margin: .35rem 0 .2rem; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: .1rem 1px; background: var(--cr-linea);
  border: 1px solid var(--cr-linea); }
.cr-maq__datos li { background: var(--cr-carbon); padding: .4rem .55rem .45rem; }
.cr-maq__datos li span { display: block; font-family: var(--cr-mono); font-size: .55rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cr-tenue); }
.cr-maq__datos li b { font-family: var(--cr-cond); font-weight: 500; font-size: 1.05rem;
  color: var(--cr-cromo); line-height: 1.2; }
.cr-maq__datos:empty { display: none; }

/* Iconos de equipamiento, sin rótulo: en la tarjeta el texto no cabe y el
   icono ya distingue una máquina equipada de una pelada. */
.cr-maq__eq { list-style: none; margin: .1rem 0 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: .3rem; }
.cr-maq__eq li { display: grid; place-items: center; width: 1.85rem; height: 1.85rem;
  border: 1px solid var(--cr-linea); color: var(--cr-rojo-cl); background: var(--cr-grafito); }
.cr-maq__eq-mas { font-family: var(--cr-mono); font-size: .64rem; color: var(--cr-tenue); }

.cr-maq__precio { display: flex; align-items: baseline; gap: .45rem; margin: auto 0 0;
  padding-top: .7rem; border-top: 1px solid var(--cr-linea); }
.cr-maq__precio b { font-family: var(--cr-cond); font-weight: 600; font-size: 1.65rem;
  color: #fff; line-height: 1; }
.cr-maq__precio--consulta { font-size: 1.2rem !important; color: var(--cr-cromo) !important; }
.cr-maq__precio span { font-family: var(--cr-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cr-tenue); }

/* Chapas sobre la foto: mismo lenguaje que el cartel de la ficha, en pequeño. */
.cr-maq__chapas { position: absolute; top: 0; left: 0; z-index: 2; display: grid; gap: 1px; }
.cr-chapa--mini { padding: .32rem .8rem .35rem .55rem; max-width: 9.5rem; }
.cr-chapa--mini .cr-chapa__r { font-size: .5rem; letter-spacing: .11em; }
.cr-chapa--mini .cr-chapa__v { font-size: 1.02rem; }
.cr-maq__foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(transparent, rgba(10,12,14,.72)); pointer-events: none; }

/* ── Formularios ── */
.cr-form { background: var(--cr-carbon); border: 1px solid var(--cr-linea); border-top: 3px solid var(--cr-amarillo); padding: clamp(1.3rem, 4vw, 2.4rem); color: var(--cr-texto); }
.cr-form__t { font-family: var(--cr-cond); font-size: clamp(1.5rem, 3.6vw, 2.2rem); text-transform: uppercase; margin: 0 0 .4rem; color: #fff; }
.cr-form__d { color: var(--cr-tenue); margin: 0 0 1.5rem; max-width: 52ch; }
.cr-form__rejilla { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cr-form__rejilla { grid-template-columns: repeat(2, 1fr); } }
.cr-form label { display: block; }
.cr-form label span { display: block; font-family: var(--cr-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-tenue); margin-bottom: .4rem; }
.cr-form input, .cr-form textarea {
  width: 100%; background: var(--cr-acero); color: var(--cr-texto);
  border: 1px solid var(--cr-linea); border-radius: 0; padding: .72rem .85rem;
  font-family: inherit; font-size: .98rem;
}
.cr-form input:focus, .cr-form textarea:focus { outline: 2px solid var(--cr-amarillo); outline-offset: -2px; }
.cr-form__ancho { margin-top: 1rem; }
.cr-form button { margin-top: 1.3rem; }
.cr-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cr-form__aviso { margin: .9rem 0 0; font-size: .9rem; min-height: 1.2em; }
.cr-form__aviso.es-ok { color: var(--cr-verde); }
.cr-form__aviso.es-error { color: var(--cr-rojo); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Ofertas de la semana · carrusel horizontal
   Piezas rebajadas y máquina de ocasión en la misma fila: son el
   mismo negocio. Cada tarjeta es un solo enlace con una acción
   visible, para que se entienda que se puede pulsar.
   ═══════════════════════════════════════════════════════════════ */
.cr-ofertas {
  padding: clamp(2.6rem, 6vw, 4.2rem) 0;
  border-bottom: 1px solid var(--cr-linea);
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(224,27,36,.08) 0%, transparent 60%),
    var(--cr-grafito);
}
/* Titular único de la sección; debajo cuelgan las dos filas (máquinas y
   piezas), cada una con su propia cabecera y su propio carrusel. */
.cr-ofertas__titular {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem 1.4rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}
.cr-ofertas__vig--top { margin-left: auto; }

/* La 2ª fila necesita aire y una línea que la separe de la 1ª: sin eso las
   dos hileras de tarjetas se leían como un único carrusel de dos alturas. */
.cr-ofertas__grupo + .cr-ofertas__grupo {
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
  padding-top: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid var(--cr-linea);
}
.cr-ofertas__st {
  font-family: var(--cr-cond); font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  text-transform: uppercase; letter-spacing: .02em; margin: .15rem 0 0;
  color: var(--cr-texto); font-weight: 600;
}
.cr-ofertas__cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 1.4rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.cr-ofertas__mandos { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cr-ofertas__vig {
  font-family: var(--cr-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cr-tenue); margin: 0;
  display: flex; align-items: center; gap: .5rem;
}
.cr-ofertas__todo {
  font-family: var(--cr-cond); text-transform: uppercase; letter-spacing: .06em;
  font-size: .95rem; color: var(--cr-texto); text-decoration: none;
  border-bottom: 2px solid var(--cr-rojo); padding-bottom: .1rem;
}
.cr-ofertas__todo:hover { color: var(--cr-rojo); }
.cr-ofertas__flechas { display: flex; gap: .4rem; }
.cr-flecha {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  background: var(--cr-carbon); color: var(--cr-texto);
  border: 1px solid var(--cr-linea); border-radius: 0; padding: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cr-flecha:hover:not(:disabled) { background: var(--cr-rojo); border-color: var(--cr-rojo); color: #fff; }
.cr-flecha:disabled { opacity: .28; cursor: default; }
@media (max-width: 700px) { .cr-ofertas__flechas { display: none; } }

.cr-ofertas__pista {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  scroll-padding-left: max(1.25rem, calc((100vw - var(--ancho, 1280px)) / 2));
  scrollbar-width: none; -ms-overflow-style: none;
}
.cr-ofertas__pista::-webkit-scrollbar { display: none; }
.cr-ofertas__pista:focus-visible { outline: 2px solid var(--cr-rojo); outline-offset: -2px; }
@media (max-width: 640px) { .cr-ofertas__pista { scroll-padding-left: .8rem; } }

.cr-ofertas__fila { display: flex; gap: .9rem; width: max-content; padding-block: 2px; }
/* El aviso de deslizar vale para las dos filas: va una sola vez al final. */
.cr-ofertas__desliza { margin-top: 1.1rem; }
/* Sangría a plomo con el titular; en un contenedor con overflow el padding
   propio queda fuera del área desplazable, por eso van pseudoelementos. */
.cr-ofertas__fila::before,
.cr-ofertas__fila::after {
  content: ""; flex: 0 0 max(1.25rem, calc((100vw - var(--ancho, 1280px)) / 2));
}
@media (max-width: 640px) {
  .cr-ofertas__fila { gap: .7rem; }
  .cr-ofertas__fila::before, .cr-ofertas__fila::after { flex-basis: .8rem; }
}

/* ── Tarjeta ── */
.cr-of {
  scroll-snap-align: start;
  flex: 0 0 clamp(210px, 68vw, 250px);
  display: flex;
}
@media (min-width: 560px) { .cr-of { flex-basis: 250px; } }
.cr-of__enlace {
  display: flex; flex-direction: column; width: 100%;
  background: var(--cr-carbon); border: 1px solid var(--cr-linea);
  text-decoration: none; overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cr-of__enlace:hover {
  border-color: var(--cr-rojo); transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.cr-of__enlace:focus-visible { outline: 2px solid var(--cr-rojo); outline-offset: 2px; }

/* Panel de producto: el blanco es de la foto, así que se enmarca a
   propósito en vez de dejarlo chocar con el fondo oscuro. */
.cr-of__img {
  display: block; position: relative; aspect-ratio: 1/1;
  background: #fff; overflow: hidden;
  border-bottom: 1px solid var(--cr-linea);
}
.cr-of--maquina .cr-of__img { background: linear-gradient(180deg, #232a31, #171b1f); }
.cr-of__img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  padding: 8%; transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.cr-of--maquina .cr-of__img img { object-fit: cover; object-position: center 42%; padding: 0; }
.cr-of__enlace:hover .cr-of__img img { transform: scale(1.05); }

/* Sello: chapa estampada con canto cortado, como el filo del logotipo */
.cr-of__sello {
  position: absolute; top: 0; left: 0;
  background: var(--cr-rojo); color: #fff;
  font-family: var(--cr-cond); font-size: 1.02rem; letter-spacing: .02em;
  text-transform: uppercase; padding: .28rem .7rem .32rem;
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
  clip-path: polygon(0 0, 100% 0, 100% 66%, 84% 100%, 0 100%);
}
.cr-of__sello--oc { background: var(--cr-acero-cl); }

.cr-of__cuerpo { display: flex; flex-direction: column; flex: 1; padding: .85rem .9rem .9rem; gap: .5rem; }
.cr-of__alto { display: flex; flex-direction: column; gap: .28rem; }
.cr-of__etiq {
  font-family: var(--cr-mono); font-size: .64rem; color: var(--cr-rojo);
  letter-spacing: .08em; text-transform: uppercase;
}
.cr-of--maquina .cr-of__etiq { color: var(--cr-tenue); }
/* Dos líneas fijas: con títulos de largo distinto las tarjetas se
   descuadraban y el precio bailaba de altura entre una y otra. */
.cr-of__t {
  color: var(--cr-texto); font-size: .92rem; line-height: 1.32; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.42em;
}
.cr-of__enlace:hover .cr-of__t { color: #fff; }
.cr-of__dato {
  font-family: var(--cr-mono); font-size: .65rem; color: var(--cr-tenue);
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cr-of__pie { margin-top: auto; display: flex; flex-direction: column; gap: .55rem; }
.cr-of__precio { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.cr-of__antes {
  font-family: var(--cr-mono); font-size: .72rem; color: var(--cr-tenue);
  text-decoration: line-through; text-decoration-color: var(--cr-rojo);
}
.cr-of__ahora { font-family: var(--cr-cond); font-size: 1.5rem; color: #fff; line-height: 1; }

/* La acción visible es lo que convierte la tarjeta en algo pulsable */
.cr-of__accion {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  font-family: var(--cr-cond); text-transform: uppercase; letter-spacing: .06em;
  font-size: .82rem; color: var(--cr-tenue);
  border-top: 1px solid var(--cr-linea); padding-top: .55rem;
  transition: color .18s ease;
}
.cr-of__accion svg { transition: transform .18s ease; }
.cr-of__enlace:hover .cr-of__accion { color: var(--cr-rojo); }
.cr-of__enlace:hover .cr-of__accion svg { transform: translateX(3px); }

/* Última tarjeta: salida al catálogo, del mismo tamaño que las demás */
.cr-of--todo {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: .7rem;
  background: var(--cr-carbon); border: 1px solid var(--cr-linea);
  border-left: 3px solid var(--cr-rojo);
  padding: 1.4rem 1.2rem; text-decoration: none;
  transition: background .18s ease;
}
.cr-of--todo:hover { background: var(--cr-acero); }
.cr-of--todo__ic { color: var(--cr-rojo); }
.cr-of--todo__t {
  font-family: var(--cr-cond); text-transform: uppercase; letter-spacing: .03em;
  font-size: 1.3rem; color: #fff; line-height: 1.12;
}
.cr-of--todo__n { font-family: var(--cr-mono); font-size: .66rem; color: var(--cr-tenue); letter-spacing: .06em; }

/* Aviso de deslizar: solo donde no hay flechas */
.cr-ofertas__desliza {
  display: none; margin: .9rem 0 0;
  font-family: var(--cr-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cr-tenue);
  align-items: center; gap: .5rem;
  padding-inline: max(1.25rem, calc((100vw - var(--ancho, 1280px)) / 2));
}
@media (max-width: 700px) {
  .cr-ofertas__desliza { display: flex; }
  .cr-ofertas__desliza { padding-inline: .8rem; }
}
.cr-ofertas__mano { color: var(--cr-rojo); display: grid; place-items: center; animation: desliza 1.9s ease-in-out infinite; }
@keyframes desliza { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .cr-ofertas__mano { animation: none; } }

/* ═══════════════════════════════════════════════════════════════
   Mantenimiento · página de servicio
   Ficha de taller: columnas de checklist con filo rojo, intervalos
   como una escala numerada. Densidad alta a propósito —el lector
   es un jefe de mantenimiento buscando si cubrimos su sistema.
   ═══════════════════════════════════════════════════════════════ */
/* La plantilla de página envuelve el contenido en .prosa (max-width: 68ch),
   pensado para texto corrido. Estas secciones son rejillas de taller y
   necesitan el ancho completo: se sacan del corsé sin tocar la plantilla. */
.prosa:has(.cr-mant-intro) { max-width: none; }
.cr-mant__d { color: var(--cr-tenue); max-width: 62ch; }
.cr-mant__acc { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }

.cr-mant-intro { display: grid; gap: 2.4rem; margin-bottom: clamp(2.6rem, 6vw, 4.2rem); }
@media (min-width: 960px) { .cr-mant-intro { grid-template-columns: 1.15fr .85fr; gap: 3.4rem; align-items: start; } }
.cr-mant-intro__b { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--cr-linea); border: 1px solid var(--cr-linea); }
.cr-mant-intro__b li { background: var(--cr-carbon); padding: 1.1rem 1.2rem; display: grid; gap: .25rem; }
.cr-mant-intro__b b { font-family: var(--cr-cond); text-transform: uppercase; font-size: 1.05rem; color: #fff; letter-spacing: .02em; }
.cr-mant-intro__b span { color: var(--cr-tenue); font-size: .9rem; }

.cr-mant-bloque { margin-bottom: clamp(2.6rem, 6vw, 4.2rem); }
.cr-mant-bloque .cr-mant__d { margin-top: .9rem; }

/* Intervalos: escala de mantenimiento, no lista suelta */
.cr-mant-int { list-style: none; margin: 0; padding: 0; counter-reset: iv; display: grid; gap: 1px; background: var(--cr-linea); border: 1px solid var(--cr-linea); }
@media (min-width: 640px)  { .cr-mant-int { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cr-mant-int { grid-template-columns: repeat(3, 1fr); } }
/* Con el ancho completo caben los cinco intervalos en una fila, que es como
   se lee una escala de mantenimiento: de menos a más horas, sin saltos. */
@media (min-width: 1180px) { .cr-mant-int { grid-template-columns: repeat(5, 1fr); } }
.cr-mant-int li { background: var(--cr-carbon); padding: 1.2rem 1.1rem 1.3rem; display: grid; gap: .4rem; align-content: start; border-top: 3px solid var(--cr-rojo); }
.cr-mant-int li:nth-child(1) { border-top-color: var(--cr-acero-cl); }
.cr-mant-int li:nth-child(2) { border-top-color: #7c4a4a; }
.cr-mant-int li:nth-child(5) { border-top-color: var(--cr-rojo-cl); }
.cr-mant-int__n { font-family: var(--cr-cond); text-transform: uppercase; font-size: 1.24rem; color: #fff; margin: 0; letter-spacing: .02em; line-height: 1.1; }
.cr-mant-int__h { font-family: var(--cr-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cr-rojo); margin: 0; }
.cr-mant-int__d { color: var(--cr-tenue); font-size: .9rem; margin: .2rem 0 0; }

/* Checklist por sistema */
.cr-mant-rejilla { display: grid; gap: 1px; background: var(--cr-linea); border: 1px solid var(--cr-linea); grid-auto-rows: 1fr; }
@media (min-width: 700px)  { .cr-mant-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cr-mant-rejilla { grid-template-columns: repeat(3, 1fr); } }
.cr-mant-g { background: var(--cr-carbon); padding: 1.4rem 1.35rem 1.6rem; }
.cr-mant-g__t { font-family: var(--cr-cond); text-transform: uppercase; font-size: 1.22rem; color: #fff; margin: 0; letter-spacing: .02em; line-height: 1.14; }
.cr-mant-g__pie { font-family: var(--cr-mono); font-size: .68rem; letter-spacing: .06em; color: var(--cr-rojo); margin: .45rem 0 0; }
.cr-mant-g__l { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.cr-mant-g__l li { color: var(--cr-tenue); font-size: .91rem; line-height: 1.45; padding-left: 1.1rem; position: relative; }
/* marca de comprobación: el punto de una hoja de revisión */
.cr-mant-g__l li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--cr-rojo); }
/* El bloque eléctrico es el que se destaca: es el foco del servicio */
.cr-mant-g--electrico { background: #23191b; }
.cr-mant-g--electrico .cr-mant-g__t { color: var(--cr-rojo-cl); }

.cr-mant-cierre { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 960px) { .cr-mant-cierre { grid-template-columns: 1.3fr .7fr; gap: 3.2rem; } }
.cr-mant-cierre .cr-mant__d { margin-top: 1rem; }

/* ---- Maquinaria: filtros por familia y ficha descargable ---------------- */

/* Pestañas de familia. En móvil se desplazan en horizontal en vez de
   apilarse: cinco filas de filtros empujan el catálogo fuera de pantalla. */
/* Las cinco familias no caben a lo ancho y la última quedaba cortada a hueso,
   sin nada que indicara que hay más: se envuelve para desvanecer el borde. */
.cr-filtros-env{position:relative;margin:0 0 22px}
.cr-filtros-env::after{content:"";position:absolute;top:0;right:0;bottom:4px;width:44px;
  pointer-events:none;background:linear-gradient(90deg,rgba(20,24,28,0),var(--cr-grafito,#14181c) 82%)}
.cr-filtros-env--fin::after{opacity:0;transition:opacity .2s}
.cr-filtros{display:flex;gap:8px;margin:0;overflow-x:auto;padding-bottom:4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.cr-filtros::-webkit-scrollbar{display:none}
.cr-filtro{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border:1px solid #2b333b;border-radius:999px;
  background:#151a1f;color:#c6ced6;text-decoration:none;font-size:.88rem;
  font-weight:600;white-space:nowrap;transition:border-color .15s,color .15s}
.cr-filtro:hover{border-color:#4a545e;color:#fff}
.cr-filtro span{display:inline-block;min-width:20px;padding:1px 6px;border-radius:999px;
  background:#232b33;color:#98a3ad;font-size:.74rem;font-weight:700;text-align:center}
.cr-filtro--on{background:#f5c518;border-color:#f5c518;color:#14181c}
.cr-filtro--on span{background:rgba(0,0,0,.16);color:#14181c}

/* Familia en la tarjeta, junto a la marca. */
/* La familia sube a la foto, como en el cartel de la ficha: bajo la marca
   competía con el modelo y alargaba la tarjeta. */
.cr-maq__fam{position:absolute;right:.5rem;bottom:.5rem;z-index:2;
  font-family:var(--cr-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cr-cromo);padding:.24rem .5rem;
  border:1px solid rgba(200,208,216,.3);background:rgba(10,12,14,.55)}

/* Descarga de la ficha técnica. */
.maq-ficha__pdf{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;
  color:var(--cr-tenue);text-decoration:none;font-family:var(--cr-mono);
  font-size:.72rem;letter-spacing:.06em;
  border-bottom:1px solid var(--cr-linea);padding-bottom:.2rem;
  transition:color .15s,border-color .15s}
.maq-ficha__pdf svg{color:var(--cr-rojo)}
.maq-ficha__pdf:hover{color:#fff;border-color:var(--cr-rojo)}

@media (max-width:600px){
  .cr-filtros{margin-bottom:18px}
  .maq-ficha__pdf{justify-content:flex-start}
}

/* ═══════════════════════════════════════════════════════════════
   CARTEL DE VENTA
   La máquina como objeto, no como fila de tabla. La metáfora es la
   PLACA DE CARACTERÍSTICAS remachada al chasis: chapas con la
   esquina achaflanada y filo cromado, atornilladas sobre la foto.
   Nada de píldoras redondeadas: en maquinaria usada lo que vende no
   es el descuento, es que el dato parezca leído de la placa.
   ═══════════════════════════════════════════════════════════════ */

.cr-cartel { margin: 0; }

.cr-cartel__lienzo {
  position: relative; overflow: hidden;
  background: var(--cr-carbon);
  border: 1px solid var(--cr-linea);
  /* Nave industrial: la luz cae del techo, la máquina se recorta contra el
     suelo oscuro. El degradado imita ese rebote sin necesidad de plató. */
  background-image: radial-gradient(120% 85% at 50% 12%, #262e36 0%, #14171a 72%);
}
.cr-cartel__foto { width: 100%; height: auto; display: block; }
.cr-cartel__foto--vacia { aspect-ratio: 4 / 3; }

/* Sombra de pie: sin ella las chapas de la esquina inferior se pierden
   sobre las máquinas claras. Va bajo las chapas, no sobre la foto entera,
   para no ensuciar el producto. */
.cr-cartel__lienzo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(transparent, rgba(10, 12, 14, .78));
  pointer-events: none;
}

/* ── Chapas de datos ──────────────────────────────────────────── */
.cr-cartel__chapas {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: grid; gap: 1px;
  max-width: min(46%, 15.5rem);
}
.cr-chapa {
  position: relative;
  display: block;
  padding: .5rem .95rem .55rem .8rem;
  background: linear-gradient(100deg, #101316 0%, #1e242b 72%, #171c21 100%);
  border-left: 3px solid var(--cr-cromo-bajo);
  /* Chaflán a la derecha: la chapa parece cortada de una plancha, no
     recortada con border-radius. */
  clip-path: polygon(0 0, calc(100% - .85rem) 0, 100% .85rem, 100% 100%, 0 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}
.cr-chapa__r {
  display: block;
  font-family: var(--cr-mono); font-size: .58rem; line-height: 1.2;
  letter-spacing: .13em; text-transform: uppercase; color: var(--cr-tenue);
}
.cr-chapa__v {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--cr-cond); font-weight: 500;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem); line-height: 1.06;
  letter-spacing: .01em;
  /* Cromado del logotipo: el dato se lee como grabado en metal. */
  background: var(--cr-cromado); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* La chapa viva —año y horas— en rojo de temple. Solo dos: si todo
   destaca, no destaca nada. */
.cr-chapa--viva {
  background: linear-gradient(100deg, var(--cr-rojo-os) 0%, var(--cr-rojo) 78%);
  border-left-color: #fff;
}
.cr-chapa--viva .cr-chapa__r { color: rgba(255, 255, 255, .82); }
.cr-chapa--viva .cr-chapa__v {
  background: none; color: #fff; -webkit-text-fill-color: #fff;
}

/* ── Precio troquelado ────────────────────────────────────────── */
.cr-cartel__precio {
  position: absolute; top: 0; right: 0; z-index: 3;
  padding: .6rem 1.15rem .7rem 1.5rem;
  text-align: right;
  background: linear-gradient(115deg, var(--cr-rojo) 0%, var(--cr-rojo-os) 100%);
  /* Chaflán al lado contrario que las chapas: las dos piezas se leen como
     cortadas de la misma plancha, enfrentadas. */
  clip-path: polygon(1.1rem 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: -2px 2px 0 rgba(0, 0, 0, .4);
}
.cr-cartel__precio b {
  display: block;
  font-family: var(--cr-cond); font-weight: 600; color: #fff;
  font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1; letter-spacing: -.01em;
}
.cr-cartel__precio span {
  display: block; margin-top: .18rem;
  font-family: var(--cr-mono); font-size: .58rem; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.cr-cartel__precio--consulta { font-size: clamp(1.1rem, 2.6vw, 1.5rem) !important; }

/* Familia: cinta discreta abajo a la derecha, sobre la sombra de pie. */
.cr-cartel__fam {
  position: absolute; right: .8rem; bottom: .75rem; z-index: 2; margin: 0;
  font-family: var(--cr-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cr-cromo);
  padding: .3rem .6rem; border: 1px solid rgba(200, 208, 216, .3);
  background: rgba(10, 12, 14, .55); backdrop-filter: blur(3px);
}

/* ── Tira de equipamiento ─────────────────────────────────────── */
.cr-cartel__equipo {
  background: linear-gradient(180deg, #232a31, #191e23);
  border: 1px solid var(--cr-linea); border-top: 0;
  border-bottom: 2px solid var(--cr-rojo);
}
.cr-eq {
  list-style: none; margin: 0; padding: .8rem .6rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
  gap: .55rem .2rem;
}
.cr-eq__x {
  display: flex; flex-direction: column; align-items: center; gap: .38rem;
  text-align: center; color: var(--cr-cromo);
  padding: 0 .2rem; position: relative;
  justify-content: flex-start;
}
/* Separadores de troquel entre iconos, como los remaches de una tira. */
.cr-eq__x + .cr-eq__x::before {
  content: ""; position: absolute; left: 0; top: .15rem; height: 2.1rem;
  width: 1px; background: rgba(200, 208, 216, .13);
}
.cr-eq__i { color: var(--cr-rojo-cl); flex: none; }
.cr-eq__x span {
  font-family: var(--cr-mono); font-size: .56rem; line-height: 1.25;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cr-tenue);
  /* Altura de dos líneas para todos: "sin escobillas" envuelve y "cabina" no,
     y sin reservarla la tira quedaba a distinto nivel en cada columna. */
  min-height: 2.2em; display: flex; align-items: flex-start; justify-content: center;
}

/* ── Cuño de verificación ─────────────────────────────────────── */
.cr-cartel__cuno {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .6rem; padding: .65rem .9rem;
  background: var(--cr-grafito);
  border: 1px solid var(--cr-linea); border-top: 0;
  font-size: .78rem; color: var(--cr-tenue); line-height: 1.4;
}
.cr-cartel__cuno svg { color: var(--cr-rojo-cl); flex: none; }
.cr-cartel__cuno b { color: var(--cr-texto); font-weight: 600; }
.cr-cartel__cuno i {
  font-style: normal;
  font-family: var(--cr-mono); font-size: .66rem; letter-spacing: .1em;
  color: var(--cr-cromo); border: 1px solid var(--cr-linea);
  padding: .22rem .5rem; white-space: nowrap;
}

/* En móvil las chapas se comen la máquina: se estrechan y el precio baja
   de cuerpo para que la foto siga siendo el sujeto. */
@media (max-width: 560px) {
  .cr-cartel__chapas { max-width: 52%; }
  .cr-chapa { padding: .4rem .7rem .42rem .6rem; }
  .cr-eq { grid-template-columns: repeat(auto-fit, minmax(4.4rem, 1fr)); }
  .cr-cartel__cuno { grid-template-columns: auto 1fr; }
  .cr-cartel__cuno i { grid-column: 2; justify-self: start; }
}