/* ═══════════════════════════════════════════════════════════════
   CR Taller · tema industrial
   Rejilla de plano, cantos vivos, Oswald condensada en titulares,
   JetBrains Mono para toda referencia técnica.

   Identidad tomada del logotipo Carretillas Álvarez RYE:
   acero cromado + rojo de temple sobre negro. Los titulares no van
   en blanco liso sino con el degradado de cromado (.cromado), igual
   que las letras del logotipo. La paleta vive en el plugin (cr.css).
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cr-grafito); color: var(--cr-texto);
  font-family: var(--cr-cuerpo); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.sin-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cr-amarillo); }

:root {
  --cr-cond: "Oswald", "Arial Narrow", sans-serif;
  --cr-cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cr-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ancho: 1280px;
}

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
@media (max-width: 640px) { .contenedor { width: min(100% - 1.6rem, var(--ancho)); } }

.saltar {
  position: absolute; left: -9999px; background: var(--cr-rojo); color: #fff;
  padding: .7rem 1.2rem; z-index: 200; font-weight: 600;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* ── Franja de confianza ──────────────────────────────────────────
   Fondo casi negro con un filo rojo arriba: separa del navegador y
   ata la franja al logotipo. Los avales rotan de uno en uno para
   caber sin amontonarse; si el usuario prefiere menos movimiento,
   se muestran todos quietos. ── */
.franja {
  background: #0b0e10; font-size: .8rem; position: relative;
  border-bottom: 1px solid var(--cr-linea);
}
.franja::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--cr-rojo) 0%, var(--cr-rojo-os) 38%, transparent 78%);
}
.franja__int {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .5rem 0; flex-wrap: nowrap;
}

/* Rotador de avales: una sola línea de alto, las demás apiladas debajo */
.franja__avales {
  list-style: none; margin: 0; padding: 0;
  position: relative; flex: 1 1 auto; min-width: 0;
  height: 1.35rem;
}
.franja__aval {
  position: absolute; inset: 0; display: flex; align-items: center; gap: .55rem;
  color: var(--cr-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(45%);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.franja__aval.es-visible { opacity: 1; transform: none; pointer-events: auto; }
.franja__aval b { color: var(--cr-texto); font-weight: 600; }
.franja__ic { color: var(--cr-rojo); display: grid; place-items: center; flex: 0 0 auto; }

.franja__c { margin: 0; display: flex; align-items: center; gap: .9rem; flex: 0 0 auto; }
.franja__24 {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--cr-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cr-tenue);
}
/* Teléfono como línea directa: encuadrado, no un enlace más */
.franja__tel {
  display: flex; align-items: center; gap: .45rem;
  color: #fff; text-decoration: none; font-family: var(--cr-mono);
  font-size: .82rem; letter-spacing: .02em;
  border: 1px solid var(--cr-linea); padding: .2rem .65rem;
  transition: background .15s ease, border-color .15s ease;
}
.franja__tel svg { color: var(--cr-rojo); }
.franja__tel:hover { background: var(--cr-rojo); border-color: var(--cr-rojo); color: #fff; }
.franja__tel:hover svg { color: #fff; }

.pip {
  width: 7px; height: 7px; background: var(--cr-verde); border-radius: 50%;
  display: inline-block; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(78,168,107,.18);
}
/* El punto late solo en el 24/7: es la promesa de "hay alguien ahora" */
.pip--vivo { animation: pip-late 2.4s ease-in-out infinite; }
@keyframes pip-late {
  0%, 100% { box-shadow: 0 0 0 3px rgba(78,168,107,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(78,168,107,.04); }
}

@media (max-width: 860px) {
  .franja { font-size: .74rem; }
  .franja__24 { display: none; }
  .franja__tel { padding: .18rem .5rem; font-size: .76rem; }
}
.franja__mas { font-style: normal; }
@media (max-width: 860px) {
  /* La coletilla se corta a media palabra en móvil: mejor enseñar solo
     el titular del aval, que ya dice lo esencial. */
  .franja__mas { display: none; }
  .franja__avales { height: 1.2rem; }
  .franja__aval { font-size: .76rem; }
  .franja__aval b { color: #fff; }
}

/* Quien pide menos movimiento ve los avales quietos, no uno solo */
@media (prefers-reduced-motion: reduce) {
  .franja__avales { height: auto; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
  .franja__aval { position: static; opacity: 1; transform: none; transition: none; pointer-events: auto; }
  .pip--vivo { animation: none; }
}

/* ── Cabecera ── */
.cab { position: sticky; top: 0; z-index: 120; background: rgba(20,23,26,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cr-linea); }
.cab.es-fija { box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.cab__int { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 1.4rem; align-items: center; padding: .85rem 0; }
@media (max-width: 1080px) { .cab__int { grid-template-columns: auto 1fr auto; } .nav { display: none; } }
@media (max-width: 760px) { .cab__int { grid-template-columns: auto auto; justify-content: space-between; } .cab__buscar { display: none; } }

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
/* Logotipo real: se sirve a 3x para pantalla retina, así que hay que fijarle
   el alto aquí o entra a su ancho natural y revienta la cabecera. El logotipo
   es apaisado (3.3:1), por eso se limita por alto y el ancho va solo. */
.custom-logo-link { display: block; line-height: 0; }
img.custom-logo {
  height: clamp(38px, 4vw, 58px); width: auto; max-width: none;
  object-fit: contain; display: block;
}
/* El logotipo es muy apaisado (3.3:1): a 58 px de alto ocupa ~191 px de
   ancho. Quien cede ese espacio es el buscador, que es elástico; por eso
   la cabecera sigue en una sola fila. Entre 1080 y 1200 px el menú ya va
   justo, así que ahí el logotipo no crece tanto. */
@media (max-width: 1200px) { img.custom-logo { height: 46px; } }
@media (max-width: 1080px) { img.custom-logo { height: 44px; } }
@media (max-width: 400px)  { img.custom-logo { height: 38px; } }
.marca__txt { display: flex; flex-direction: column; line-height: 1; font-family: var(--cr-cond); text-transform: uppercase; }
.marca__txt strong { font-size: 1.16rem; letter-spacing: .04em; color: #fff; font-weight: 600; }
.marca__txt em { font-size: .74rem; letter-spacing: .3em; color: var(--cr-amarillo); font-style: normal; }
.marca__icono { display: grid; place-items: center; }

.nav__lista { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.nav__lista a {
  color: var(--cr-texto); text-decoration: none; font-family: var(--cr-cond);
  text-transform: uppercase; letter-spacing: .05em; font-size: .95rem;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.nav__lista a:hover, .nav__lista .current-menu-item > a { color: var(--cr-amarillo); border-bottom-color: var(--cr-amarillo); }

.cab__acc { display: flex; align-items: center; gap: .9rem; }
.carro { position: relative; color: var(--cr-texto); display: grid; place-items: center; padding: .4rem; min-width: 44px; min-height: 44px; }
.carro:hover { color: var(--cr-amarillo); }
.carro__n {
  position: absolute; top: -2px; right: -6px; background: var(--cr-rojo); color: #fff;
  font-family: var(--cr-mono); font-size: .66rem; font-weight: 700;
  min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 3px;
}
/* 44x44 es el mínimo cómodo para el pulgar; a .5rem se quedaba en 38 */
.hamb { display: none; background: none; border: 0; cursor: pointer; padding: .7rem; min-width: 44px; min-height: 44px; }
.hamb span { display: block; width: 22px; height: 2px; background: var(--cr-texto); margin: 4px 0; transition: transform .22s ease, opacity .22s ease; }
.hamb.es-abierto span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamb.es-abierto span:nth-child(2) { opacity: 0; }
.hamb.es-abierto span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1080px) { .hamb { display: block; } }

.menu-movil { border-top: 1px solid var(--cr-linea); background: var(--cr-carbon); }
.menu-movil__lista { list-style: none; margin: 0; padding: .5rem 0; }
.menu-movil__lista a {
  display: block; padding: .95rem 1.3rem; color: var(--cr-texto); text-decoration: none;
  font-family: var(--cr-cond); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--cr-linea);
}
.menu-movil__lista a:hover { background: var(--cr-acero); color: var(--cr-amarillo); }

/* ── Héroe ── */
.heroe {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--cr-linea);
  background:
    radial-gradient(80% 120% at 78% 50%, rgba(224,27,36,.16) 0%, transparent 58%),
    radial-gradient(120% 90% at 15% 0%, #1d2228 0%, transparent 62%),
    var(--cr-grafito);
}
/* La máquina a sangre, no una rejilla decorativa: en una web de carretillas
   el producto es el fondo. La foto va a la derecha y el titular ocupa la
   izquierda, así que el encuadre se ancla al 72% para no partir la máquina. */
.heroe__foto { position: absolute; inset: 0; z-index: 0; display: block; }
.heroe__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% center;
  display: block;
}
/* Velo de lectura: la foto es oscura pero no lo bastante bajo el titular.
   Se degrada desde la izquierda para no apagar la máquina de la derecha. */
.heroe__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,12,14,.94) 0%, rgba(10,12,14,.82) 34%,
                    rgba(10,12,14,.35) 62%, rgba(10,12,14,.55) 100%),
    linear-gradient(rgba(10,12,14,.5), transparent 30%);
}
.heroe__texto, .heroe__selector { position: relative; z-index: 1; }

/* Sello de cobertura: una línea de crédito antes del titular, con el punto
   rojo vivo del logotipo. Da contexto sin robarle tamaño al H1. */
.heroe__sello {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem;
  padding: .42rem .95rem .45rem .8rem;
  border: 1px solid rgba(200,208,216,.22); background: rgba(10,12,14,.5);
  font-family: var(--cr-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cr-cromo);
  backdrop-filter: blur(4px);
}
.heroe__sello span {
  width: .48rem; height: .48rem; background: var(--cr-rojo); flex: none;
  box-shadow: 0 0 8px 1px rgba(224,27,36,.75);
}
.heroe__acc { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 2rem; }
/* barra de peligro: cierra el bloque y ata la marca al mundo de la máquina */
.heroe::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: repeating-linear-gradient(-45deg,
    var(--cr-rojo) 0 14px, #14171a 14px 28px);
  opacity: .9;
}
.heroe__int {
  position: relative; display: grid; gap: 2.6rem;
  padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 5.4rem);
  align-items: center;
}
/* Ya no hay dos columnas: la derecha es la máquina de la foto. El texto se
   limita para que nunca se meta sobre ella.

   `min-height` da presencia al bloque, pero el que manda es el CONTENIDO: la
   foto es un fondo absoluto y no empuja nada, así que el héroe mide lo que
   miden titular, botones y cifras. Sin el tope de `max-height` una pantalla
   muy alta estiraba el bloque y dejaba el texto flotando en el vacío. */
.heroe__int {
  min-height: clamp(26rem, 56vh, 36rem);
  max-height: 46rem;
}
@media (min-width: 1000px) { .heroe__texto { max-width: 33rem; } }

/* Titular cromado: mismo material que las letras del logotipo.
   El degradado se pinta sobre el texto; si el navegador no soporta
   background-clip:text, se queda el blanco del color de respaldo. */
.cromado, .heroe__t, .seccion__t, .pagina__t {
  color: var(--cr-cromo-alto);
  background: var(--cr-cromado);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* el filo oscuro del logotipo, que despega las letras del fondo */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 3px 6px rgba(0,0,0,.45));
}
.heroe__t {
  font-family: var(--cr-cond); font-weight: 600;
  /* Sobre fotografía el titular tiene que ganar a la máquina: sube de cuerpo
     y pierde el cromado a favor del blanco macizo, que aguanta el contraste
     variable de la foto donde el degradado metálico se emborrona. */
  font-size: clamp(2.7rem, 7.6vw, 5.1rem); line-height: .96;
  text-transform: uppercase; margin: .2rem 0 1rem; letter-spacing: -.02em;
  background: none; -webkit-text-fill-color: #fff; color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.8));
}
.heroe__d { text-shadow: 0 1px 8px rgba(0,0,0,.8); }
/* La palabra caliente va en rojo macizo, no cromada: es el acento del logotipo */
.heroe__t-ac {
  background: none; -webkit-text-fill-color: var(--cr-rojo); color: var(--cr-rojo);
  text-shadow: 0 0 26px rgba(224,27,36,.4);
}
.heroe__d { color: var(--cr-tenue); font-size: 1.06rem; max-width: 44ch; margin: 0 0 1.6rem; }
.heroe__puntos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.heroe__puntos li { font-family: var(--cr-mono); font-size: .78rem; color: var(--cr-tenue); text-transform: uppercase; letter-spacing: .1em; }
.heroe__puntos b { display: block; font-family: var(--cr-cond); font-size: 1.7rem; color: #fff; letter-spacing: 0; }

/* ── Secciones ── */
.seccion__cab { margin-bottom: 2rem; }
.seccion__t {
  font-family: var(--cr-cond); font-size: clamp(1.8rem, 4.4vw, 2.9rem); line-height: 1.02;
  text-transform: uppercase; margin: 0;
}
.familias { padding: clamp(3rem, 7vw, 5rem) 0; border-bottom: 1px solid var(--cr-linea); }
.familias__rejilla { display: grid; gap: 1px; background: var(--cr-linea); border: 1px solid var(--cr-linea); }
@media (min-width: 520px) { .familias__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .familias__rejilla { grid-template-columns: repeat(3, 1fr); } }
.familia {
  background: var(--cr-carbon); padding: 1.5rem 1.4rem; text-decoration: none;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  color: var(--cr-texto); transition: background .16s ease;
}
.familia:hover { background: var(--cr-acero); }
.familia__icono { color: var(--cr-amarillo); display: grid; place-items: center; }
.familia__n { font-family: var(--cr-cond); text-transform: uppercase; font-size: 1.06rem; letter-spacing: .02em; line-height: 1.15; }
.familia__c { font-family: var(--cr-mono); font-size: .7rem; color: var(--cr-tenue); }

/* ── Proceso ── */
.proceso { padding: clamp(3rem, 7vw, 5rem) 0; border-bottom: 1px solid var(--cr-linea); }
.proceso__int { display: grid; gap: 2.6rem; }
@media (min-width: 960px) { .proceso__int { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }
.proceso__d { color: var(--cr-tenue); max-width: 46ch; margin: 1rem 0 1.6rem; }
.proceso__pasos { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.proceso__pasos li {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.2rem;
  padding: 1.15rem 0; border-top: 1px solid var(--cr-linea); align-items: baseline;
}
.proceso__pasos li:last-child { border-bottom: 1px solid var(--cr-linea); }
.proceso__n { font-family: var(--cr-mono); color: var(--cr-amarillo); font-size: .82rem; grid-row: span 2; }
.proceso__pasos b { font-family: var(--cr-cond); font-size: 1.16rem; text-transform: uppercase; color: #fff; letter-spacing: .02em; }
.proceso__pasos span:not(.proceso__n) { color: var(--cr-tenue); font-size: .94rem; }

/* ── Ocasión ── */
.ocasion-cta { padding: clamp(3rem, 7vw, 5rem) 0; background: var(--cr-carbon); border-bottom: 1px solid var(--cr-linea); }
.ocasion-cta__int { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 960px) { .ocasion-cta__int { grid-template-columns: 1.25fr .75fr; gap: 3.4rem; } }
.ocasion-cta__a p { color: var(--cr-tenue); max-width: 54ch; }
.ocasion-cta__botones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.4rem; }
.cr-btn--linea { background: transparent; color: var(--cr-cromo); border: 1px solid var(--cr-linea); box-shadow: none; }
.cr-btn--linea:hover { background: var(--cr-rojo); border-color: var(--cr-rojo); color: #fff; }
.dato {
  border-left: 3px solid var(--cr-amarillo); padding: 1.1rem 0 1.1rem 1.3rem;
  color: var(--cr-tenue); font-size: 1rem; margin: 0; background: rgba(224,27,36,.06);
}
.dato b { color: #fff; }

/* ── Páginas internas ── */
.pagina { padding: clamp(2rem, 5vw, 3.6rem) 0 clamp(3rem, 7vw, 5rem); }
.pagina__t { font-family: var(--cr-cond); font-size: clamp(2rem, 5vw, 3.2rem); text-transform: uppercase; margin: .6rem 0 1.4rem; line-height: 1.03; }
.prosa { color: var(--cr-tenue); max-width: 68ch; }
.prosa h2, .prosa h3 { font-family: var(--cr-cond); text-transform: uppercase; color: #fff; margin-top: 2rem; }
.pagina__acc { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.6rem; }
.pagina--404 { text-align: center; }
.pagina--404 .prosa { margin-inline: auto; }
.pagina--404 .pagina__acc { justify-content: center; }

.migas { font-family: var(--cr-mono); font-size: .74rem; color: var(--cr-tenue); letter-spacing: .04em; }
.migas a { color: var(--cr-tenue); text-decoration: none; }
.migas a:hover { color: var(--cr-amarillo); }
.migas span { opacity: .4; margin: 0 .3rem; }

/* ── Pie ── */
.pie { background: #0f1214; border-top: 1px solid var(--cr-linea); padding-top: clamp(2.6rem, 6vw, 4rem); }
.pie__int { display: grid; gap: 2.2rem; padding-bottom: 2.6rem; }
@media (min-width: 720px)  { .pie__int { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pie__int { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.8rem; } }
.marca__txt--pie { display: block; margin: 0 0 .8rem; }
.pie__logo { margin: 0 0 1rem; }
.pie__logo img { height: auto; width: 100%; max-width: 230px; display: block; }
.marca__txt--pie strong { font-size: 1.3rem; display: block; }
.pie__d { color: var(--cr-tenue); font-size: .92rem; max-width: 34ch; margin: 0 0 1.3rem; }
.pie__t { font-family: var(--cr-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cr-amarillo); margin: 0 0 .9rem; }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie__lista a { color: var(--cr-tenue); text-decoration: none; font-size: .92rem; }
.pie__lista a:hover { color: var(--cr-amarillo); }
.pie__lista--datos li { color: var(--cr-tenue); font-size: .92rem; }
.pie__legal { border-top: 1px solid var(--cr-linea); padding: 1.2rem 0; }
.pie__legal-int { display: flex; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.pie__legal p { margin: 0; font-size: .78rem; color: var(--cr-tenue); }
.pie__nota { max-width: 62ch; opacity: .8; }

/* ── WooCommerce: llevar la tienda al mismo idioma ── */
.woocommerce .products ul, .woocommerce ul.products { display: grid; gap: 1px; background: var(--cr-linea); border: 1px solid var(--cr-linea); margin: 0; padding: 0; }
@media (min-width: 560px) { .woocommerce ul.products { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1200px){ .woocommerce ul.products { grid-template-columns: repeat(4,1fr); } }
.woocommerce ul.products li.product {
  background: var(--cr-carbon); margin: 0 !important; width: auto !important;
  padding: 0 0 1.1rem; float: none !important; text-align: left;
}
.woocommerce ul.products li.product:hover { background: var(--cr-acero); }
.woocommerce ul.products li.product a img { margin: 0 0 .9rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: .96rem !important; padding: 0 1rem; color: var(--cr-texto); font-weight: 600; line-height: 1.3;
}
.woocommerce ul.products li.product .price { color: #fff !important; font-family: var(--cr-cond); font-size: 1.3rem; padding: 0 1rem; display: block; }
.woocommerce ul.products li.product .price del { color: var(--cr-tenue); font-size: .8rem; font-family: var(--cr-cuerpo); }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart {
  margin: .7rem 1rem 0; background: var(--cr-rojo); color: #fff; border-radius: 0;
  font-family: var(--cr-cond); text-transform: uppercase; letter-spacing: .05em; display: inline-block;
}
.woocommerce span.onsale {
  background: var(--cr-rojo); color: #fff; border-radius: 0; font-family: var(--cr-mono);
  font-size: .7rem; font-weight: 700; padding: .3rem .6rem; min-height: 0; min-width: 0; line-height: 1.2; top: 0; left: 0;
}
.woocommerce div.product .product_title { font-family: var(--cr-cond); text-transform: uppercase; font-size: clamp(1.6rem,4vw,2.4rem); color: #fff; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--cr-amarillo); font-family: var(--cr-cond); font-size: 2rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--cr-carbon); border-color: var(--cr-linea); border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--cr-acero); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--cr-texto); font-family: var(--cr-cond); text-transform: uppercase; }
.woocommerce table.shop_attributes th { color: var(--cr-texto); font-family: var(--cr-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.woocommerce table.shop_attributes td { color: var(--cr-tenue); font-style: normal; }
.woocommerce table.shop_attributes tr:nth-child(even) th, .woocommerce table.shop_attributes tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.woocommerce .quantity .qty { background: var(--cr-acero); color: var(--cr-texto); border: 1px solid var(--cr-linea); border-radius: 0; padding: .6rem; }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--cr-amarillo); color: #14171a; border-radius: 0;
  font-family: var(--cr-cond); text-transform: uppercase; letter-spacing: .05em; font-size: 1rem;
}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info {
  background: var(--cr-carbon); border-top-color: var(--cr-amarillo); color: var(--cr-texto);
}
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--cr-amarillo); }
.woocommerce-breadcrumb { font-family: var(--cr-mono); font-size: .74rem; color: var(--cr-tenue) !important; }
.woocommerce-breadcrumb a { color: var(--cr-tenue) !important; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering select { color: var(--cr-tenue); }
.woocommerce nav.woocommerce-pagination ul { border: 1px solid var(--cr-linea); }
.woocommerce nav.woocommerce-pagination ul li { border-color: var(--cr-linea); }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { color: var(--cr-texto); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--cr-amarillo); color: #14171a; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--cr-amarillo); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Páginas-herramienta (selector, ocasión, formularios): ancho completo */
.pagina--ancha .pagina__cuerpo { max-width: none; }
.pagina--ancha .pagina__cuerpo > * + * { margin-top: 1.6rem; }

/* ── Ficha de producto ── */
.prod { padding: 1.4rem 0 clamp(3rem, 7vw, 5rem); }
.prod__int { display: grid; gap: 2.4rem; margin-top: 1.4rem; }
@media (min-width: 900px) { .prod__int { grid-template-columns: 1fr 1fr; gap: 3.4rem; align-items: start; } }
.prod__media { position: relative; background: var(--cr-carbon); border: 1px solid var(--cr-linea); }
.prod__img { width: 100%; height: auto; display: block; }
.prod__img--vacia { aspect-ratio: 1; background: repeating-linear-gradient(45deg, #1a1e22 0 12px, #16191d 12px 24px); }
.prod__oferta {
  position: absolute; top: 0; left: 0; background: var(--cr-amarillo); color: #14171a;
  font-family: var(--cr-mono); font-size: .72rem; font-weight: 700; padding: .35rem .8rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.prod__sku { font-family: var(--cr-mono); color: var(--cr-amarillo); font-size: .84rem; letter-spacing: .08em; margin: 0 0 .4rem; }
.prod__t { font-family: var(--cr-cond); font-size: clamp(1.7rem, 4.2vw, 2.7rem); text-transform: uppercase; color: #fff; line-height: 1.04; margin: 0 0 1rem; }
.prod__resumen { color: var(--cr-tenue); margin: 0 0 1.4rem; max-width: 52ch; }
.prod__precio { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.prod__precio .price, .prod__precio .amount { font-family: var(--cr-cond); font-size: 2.2rem; color: var(--cr-amarillo); }
.prod__precio del .amount { font-size: 1.1rem; color: var(--cr-tenue); font-family: var(--cr-cuerpo); }
.prod__precio ins { text-decoration: none; }
.prod__iva { font-family: var(--cr-mono); font-size: .72rem; color: var(--cr-tenue); text-transform: uppercase; letter-spacing: .1em; }
.prod__stock { font-family: var(--cr-mono); font-size: .82rem; margin: 0 0 1.4rem; }
.prod__stock.es-si { color: var(--cr-verde); } .prod__stock.es-si::before { content: "● "; }
.prod__stock.es-no { color: var(--cr-tenue); } .prod__stock.es-no::before { content: "○ "; }

.prod__compat { margin-top: 2rem; border-top: 1px solid var(--cr-linea); padding-top: 1.4rem; }
.prod__compat-t { font-family: var(--cr-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cr-amarillo); margin: 0 0 .7rem; }
.prod__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; padding: 0; }
.prod__chips li {
  font-family: var(--cr-mono); font-size: .76rem; color: var(--cr-texto);
  border: 1px solid var(--cr-linea); background: var(--cr-carbon); padding: .26rem .6rem;
}
.prod__compat-n { font-size: .86rem; color: var(--cr-tenue); margin: 0 0 .8rem; }
.prod__compat-aviso { font-size: .86rem; color: var(--cr-tenue); margin: 0; }

.prod__tecnica, .prod__desc, .prod__rel { margin-top: clamp(2.6rem, 6vw, 4rem); }
.prod__tecnica .seccion__t, .prod__desc .seccion__t, .prod__rel .seccion__t { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 1.2rem; }
.prod__specs { display: grid; gap: 1px; background: var(--cr-linea); border: 1px solid var(--cr-linea); margin: 0; }
@media (min-width: 700px) { .prod__specs { grid-template-columns: repeat(2, 1fr); } }
.prod__spec { background: var(--cr-carbon); display: grid; grid-template-columns: minmax(9rem, 40%) 1fr; gap: 1rem; padding: .85rem 1.1rem; }
.prod__spec dt { font-family: var(--cr-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cr-tenue); }
.prod__spec dd { margin: 0; color: var(--cr-texto); font-size: .94rem; }

/* Añadir al carrito dentro de la ficha */
.prod__datos form.cart { display: flex; gap: .7rem; align-items: stretch; flex-wrap: wrap; margin: 0 0 .5rem; }
.prod__datos form.cart .quantity .qty { width: 5rem; height: 100%; text-align: center; }
.prod__datos form.cart .button { padding: .85rem 1.7rem; box-shadow: 3px 3px 0 var(--cr-amarillo-os); }

/* Sin barra lateral en la tienda */
.woocommerce-page .widget-area, .woocommerce-page #secondary, .single-product #secondary { display: none; }

/* Woo ya pinta su propio aviso de stock dentro del formulario: sobra */
.prod__datos .stock { display: none; }
/* Relacionados: no estirar cuando hay menos de 4 */
.prod__rel .cr-rejilla { grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); justify-content: start; }

.menu-movil__buscar { padding: 1rem 1.3rem .4rem; border-bottom: 1px solid var(--cr-linea); }
.menu-movil__buscar .cr-ref__salida { position: static; border-top: 1px solid var(--cr-linea); margin-top: .6rem; }

/* ── Carrito y pago (shortcodes clásicos) ── */
.woocommerce table.shop_table {
  border: 1px solid var(--cr-linea); border-radius: 0; border-collapse: collapse; color: var(--cr-texto);
}
.woocommerce table.shop_table th {
  font-family: var(--cr-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cr-tenue); background: var(--cr-carbon); border-bottom: 1px solid var(--cr-linea); padding: .9rem 1rem;
}
.woocommerce table.shop_table td { border-top: 1px solid var(--cr-linea); padding: 1rem; background: var(--cr-grafito); }
.woocommerce table.shop_table td.product-name a { color: var(--cr-texto); text-decoration: none; font-weight: 600; }
.woocommerce table.shop_table td.product-name a:hover { color: var(--cr-amarillo); }
.woocommerce table.shop_table .amount { color: #fff; font-family: var(--cr-cond); font-size: 1.1rem; }
.woocommerce table.cart img { width: 64px; border: 1px solid var(--cr-linea); }
.woocommerce a.remove { color: var(--cr-rojo) !important; font-weight: 700; }
.woocommerce a.remove:hover { background: var(--cr-rojo); color: #fff !important; }
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3, .woocommerce-billing-fields h3, #order_review_heading {
  font-family: var(--cr-cond); text-transform: uppercase; color: #fff; font-size: 1.3rem;
}
.woocommerce .cart_totals table.shop_table { width: 100%; }
.woocommerce-checkout .form-row label { font-family: var(--cr-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-tenue); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container .select2-selection {
  background: var(--cr-acero); color: var(--cr-texto); border: 1px solid var(--cr-linea);
  border-radius: 0; padding: .7rem .85rem; height: auto;
}
.woocommerce form .form-row input.input-text:focus { outline: 2px solid var(--cr-amarillo); outline-offset: -2px; }
.woocommerce-checkout #payment { background: var(--cr-carbon); border: 1px solid var(--cr-linea); border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--cr-linea); }
.woocommerce-checkout #payment div.payment_box { background: var(--cr-acero); color: var(--cr-tenue); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--cr-acero); }
.woocommerce .cart-collaterals { width: 100%; }
@media (min-width: 900px) { .woocommerce .cart-collaterals .cart_totals { width: 46%; float: right; } }
.woocommerce .quantity input[type=number] { background: var(--cr-acero); color: var(--cr-texto); border: 1px solid var(--cr-linea); }

/* ── Cabecera de catálogo y archivos de producto ── */
.woocommerce-products-header, .woocommerce .term-description { padding-top: 1.6rem; }
.woocommerce-products-header__title, .woocommerce-page h1.page-title,
.woocommerce h1.woocommerce-products-header__title {
  font-family: var(--cr-cond); font-size: clamp(2rem, 5vw, 3.2rem);
  text-transform: uppercase; color: #fff; line-height: 1.03; margin: .4rem 0 .8rem;
}
.woocommerce .woocommerce-result-count {
  font-family: var(--cr-mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cr-tenue);
}
.woocommerce .woocommerce-ordering select {
  background: var(--cr-acero); color: var(--cr-texto); border: 1px solid var(--cr-linea);
  border-radius: 0; padding: .55rem .8rem; font-family: var(--cr-cuerpo);
}
.woocommerce .term-description { color: var(--cr-tenue); max-width: 68ch; }
/* el contenedor de la tienda respeta el ancho del sitio */
.woocommerce-page:not(.single-product) .site-main,
.woocommerce-page .woocommerce-notices-wrapper,
.post-type-archive-product .site-main {
  width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto;
}

/* El fondo de la rejilla asoma en las celdas que sobran: darle el mismo tono
   que la tarjeta para que la retícula se lea como una tabla continua. */
.woocommerce ul.products { background: var(--cr-carbon); }
.woocommerce ul.products li.product { outline: 1px solid var(--cr-linea); outline-offset: 0; }
.cr-rejilla { background: var(--cr-carbon); }

/* Woo marca .first/.last pensando en float; en grid provocan saltos de celda */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last { clear: none !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; }

/* La cabecera es sticky: el héroe necesita aire arriba para que la etiqueta
   superior no quede debajo de ella al cargar en móvil. */
@media (max-width: 760px) {
  .heroe__int { padding-top: 2rem; }
  .cr-eyebrow { line-height: 1.5; }
  /* En vertical la máquina no cabe al lado del texto: el encuadre se centra
     y el velo pasa a ser de arriba abajo, con el titular sobre la parte
     oscura y la carretilla asomando bajo los botones. */
  .heroe__int { min-height: 0; max-height: none; padding-bottom: min(11rem, 26vh); }
  .heroe__foto img { object-position: 62% center; }
  .heroe__foto::after {
    background:
      linear-gradient(rgba(10,12,14,.92) 0%, rgba(10,12,14,.86) 38%,
                      rgba(10,12,14,.34) 70%, rgba(10,12,14,.5) 100%);
  }
  .heroe__acc .cr-btn { flex: 1 1 100%; text-align: center; }
  .heroe__puntos { gap: 1.1rem; }
}

/* ── Texto de categoría: Woo lo mete en un solo <p> con <br>, hay que darle aire ── */
.woocommerce .term-description {
  color: var(--cr-tenue); max-width: 72ch; margin: 0 0 2rem;
  font-size: 1rem; line-height: 1.7;
}
.woocommerce .term-description p { margin: 0 0 1.1rem; }
.woocommerce .term-description br + br { line-height: 2.2; }
/* separación real entre los bloques del texto */
.woocommerce .term-description p br { display: block; content: ""; margin-top: .9rem; }

/* ── Mantenimiento: llamada desde la portada ── */
.mant-cta { padding: clamp(3rem, 7vw, 5rem) 0; border-bottom: 1px solid var(--cr-linea); background: var(--cr-carbon); }
.mant-cta__int { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 960px) { .mant-cta__int { grid-template-columns: 1.1fr .9fr; gap: 3.4rem; } }
.mant-cta__d { color: var(--cr-tenue); max-width: 54ch; margin: 1rem 0 0; }
.mant-cta__acc { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
/* Los intervalos como escala: es la información que busca quien mantiene flota */
.mant-cta__b { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--cr-linea); border: 1px solid var(--cr-linea); }
.mant-cta__b li { background: var(--cr-grafito); padding: 1rem 1.2rem; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: baseline; }
.mant-cta__b b { font-family: var(--cr-cond); font-size: 1.4rem; color: var(--cr-rojo); letter-spacing: .01em; }
.mant-cta__b span { color: var(--cr-tenue); font-size: .9rem; }
@media (max-width: 460px) { .mant-cta__b li { grid-template-columns: 1fr; gap: .2rem; } }

/* ── Horarios del pie: dos promesas distintas, separadas ── */
.pie__horarios { margin: 1.2rem 0 0; display: grid; gap: .75rem; }
.pie__horario { display: grid; gap: .1rem; padding-left: .85rem; border-left: 2px solid var(--cr-linea); }
.pie__horario--247 { border-left-color: var(--cr-verde); }
.pie__horario dt {
  font-family: var(--cr-mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cr-tenue);
  display: flex; align-items: center; gap: .45rem;
}
.pie__horario dd { margin: 0; color: var(--cr-texto); font-size: .92rem; }
.pie__horario--247 dd { color: #fff; font-weight: 600; }
.pie__tel { font-family: var(--cr-mono); }
.pie__dir { line-height: 1.5; white-space: pre-line; }

/* ═══════════════════════════════════════════════════════════════
   Móvil · barra fija de acción y buscador a pantalla completa
   El usuario está en la nave, con la máquina parada y el móvil en
   la mano. Llamar y WhatsApp no pueden estar a un scroll de
   distancia, y el buscador de la cabecera no cabe a 390 px.
   ═══════════════════════════════════════════════════════════════ */
.barra-movil { display: none; }
.buscar-movil { display: none; }

@media (max-width: 860px) {
  .barra-movil {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
    background: rgba(15,18,20,.97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--cr-linea);
    /* respeta la barra de gestos del iPhone */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 22px rgba(0,0,0,.5);
  }
  .barra-movil__b {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .18rem; padding: .6rem .3rem .65rem;
    background: none; border: 0; cursor: pointer;
    color: var(--cr-texto); text-decoration: none;
    font-family: var(--cr-cond); text-transform: uppercase;
    font-size: .76rem; letter-spacing: .05em;
    /* objetivo táctil holgado: se pulsa con guante */
    min-height: 58px;
  }
  .barra-movil__b + .barra-movil__b { border-left: 1px solid var(--cr-linea); }
  .barra-movil__b:active { background: var(--cr-acero); }
  .barra-movil__b--tel { color: #fff; background: var(--cr-rojo); }
  .barra-movil__b--tel:active { background: var(--cr-rojo-cl); }
  .barra-movil__b--wa svg { color: #25d366; }
  /* Distintivo 24/7: es la promesa que diferencia, no un adorno */
  .barra-movil__24 {
    position: absolute; top: .3rem; right: 50%; transform: translateX(2.1rem);
    font-family: var(--cr-mono); font-style: normal; font-size: .54rem;
    background: #fff; color: var(--cr-rojo); padding: .06rem .22rem;
    letter-spacing: .04em; font-weight: 700;
  }

  /* El contenido no debe quedar tapado por la barra. El alto real lo fija
     el propio botón (min-height + padding), así que se reserva ese hueco
     con la misma cuenta en vez de un número suelto que se desincroniza. */
  .barra-movil { --barra-alto: 64px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* El buscador se abre por encima de la barra: no hace falta ese hueco */
  .buscar-movil { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* ── Buscador a pantalla completa ── */
  .buscar-movil {
    display: block; position: fixed; inset: 0; z-index: 200;
    background: var(--cr-grafito);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .buscar-movil[hidden] { display: none; }
  .buscar-movil__cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.1rem; border-bottom: 1px solid var(--cr-linea);
    position: sticky; top: 0; background: var(--cr-grafito); z-index: 2;
  }
  .buscar-movil__t { margin: 0; font-family: var(--cr-cond); text-transform: uppercase; font-size: 1.15rem; color: #fff; letter-spacing: .03em; }
  .buscar-movil__x {
    background: none; border: 1px solid var(--cr-linea); color: var(--cr-texto);
    width: 40px; height: 40px; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 0 4px;
  }
  .buscar-movil__x:active { background: var(--cr-acero); }
  .buscar-movil__cuerpo { padding: 1.2rem 1.1rem 3rem; }
  /* Campo grande: es lo primero que ve y donde va el pulgar */
  .buscar-movil .cr-campo { font-size: 1.05rem; padding: .95rem 1rem; }
  /* el desplegable de móvil lo estiliza cr.css; aquí solo el campo */
  .buscar-movil__ayuda { color: var(--cr-tenue); font-size: .86rem; margin: .8rem 0 0; }
  .buscar-movil__atajos { margin-top: 1.8rem; display: grid; gap: 1px; background: var(--cr-linea); border: 1px solid var(--cr-linea); }
  .buscar-movil__at-t {
    grid-column: 1 / -1; margin: 0; background: var(--cr-carbon); padding: .7rem .9rem;
    font-family: var(--cr-mono); font-size: .66rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--cr-tenue);
  }
  .buscar-movil__atajos a {
    background: var(--cr-carbon); padding: 1rem .9rem; text-decoration: none;
    color: var(--cr-texto); font-family: var(--cr-cond); text-transform: uppercase;
    font-size: 1rem; letter-spacing: .03em;
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  }
  .buscar-movil__atajos a::after { content: "→"; color: var(--cr-rojo); }
  .buscar-movil__atajos a:active { background: var(--cr-acero); }
}

/* La barra fija estorba al imprimir */
@media print { .barra-movil, .buscar-movil { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════
   Ficha de carretilla de ocasión
   Foto grande a un lado y datos al otro. En máquina usada la
   compra la deciden las horas y el estado, así que van arriba,
   y el formulario ya sabe de qué máquina se habla.
   ═══════════════════════════════════════════════════════════════ */
.maq-ficha { display: grid; gap: 2rem; margin: 1.4rem 0 clamp(2.6rem, 6vw, 4rem); }
@media (min-width: 900px) { .maq-ficha { grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: start; } }

.maq-ficha__foto { background: var(--cr-carbon); border: 1px solid var(--cr-linea); overflow: hidden; }
.maq-ficha__foto img { width: 100%; height: auto; display: block; }
.maq-ficha__foto--vacia { aspect-ratio: 4/3; }
.maq-ficha__horas {
  margin: 0; border: 1px solid var(--cr-linea); border-top: 0;
  padding: .8rem 1rem; color: var(--cr-tenue); font-size: .9rem;
  background: var(--cr-carbon);
}
.maq-ficha__horas b { font-family: var(--cr-cond); font-size: 1.5rem; color: #fff; margin-right: .4rem; }

.maq-ficha__t {
  font-family: var(--cr-cond); font-size: clamp(1.8rem, 4.4vw, 2.8rem);
  text-transform: uppercase; line-height: 1.04; margin: .2rem 0 1rem;
  color: var(--cr-cromo-alto); background: var(--cr-cromado);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.85));
}
.maq-ficha__precio {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  border-top: 1px solid var(--cr-linea); border-bottom: 1px solid var(--cr-linea);
  padding: .9rem 0; margin-bottom: 1.2rem;
}
.maq-ficha__precio b { font-family: var(--cr-cond); font-size: clamp(1.9rem, 4vw, 2.5rem); color: #fff; line-height: 1; }
.maq-ficha__precio span { font-family: var(--cr-mono); font-size: .72rem; color: var(--cr-tenue); text-transform: uppercase; letter-spacing: .08em; }
.maq-ficha__cond {
  font-family: var(--cr-mono); font-size: .74rem; line-height: 1.5;
  color: var(--cr-tenue); margin: 0 0 1.3rem; padding-left: .8rem;
  border-left: 2px solid var(--cr-rojo); max-width: 44ch;
}
.maq-ficha__d { color: var(--cr-tenue); margin-bottom: 1.4rem; }
.maq-ficha__d p { margin: 0 0 .7rem; }

.maq-ficha__st { font-family: var(--cr-cond); text-transform: uppercase; font-size: 1.2rem; color: #fff; margin: 0 0 .7rem; letter-spacing: .02em; }
.maq-tec { margin: 0 0 1.5rem; display: grid; gap: 1px; background: var(--cr-linea); border: 1px solid var(--cr-linea); }
@media (min-width: 560px) { .maq-tec { grid-template-columns: repeat(2, 1fr); } }
.maq-tec__f { background: var(--cr-carbon); padding: .7rem .9rem; display: grid; gap: .1rem; }
.maq-tec__f dt { font-family: var(--cr-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-tenue); }
.maq-tec__f dd { margin: 0; color: var(--cr-texto); font-size: .95rem; font-weight: 600; }

/* Tres botones en la columna estrecha de la ficha se partían en dos filas
   con un hueco feo. Se ordenan en rejilla: la acción principal ocupa la
   fila entera y las dos de contacto se reparten la siguiente. */
/* ── Contacto de la ficha ─────────────────────────────────────────
   Eran cuatro botones apilados —PDF, solicitar, llamar, WhatsApp— con
   pesos parecidos: el comprador no distinguía cuál era EL botón. Ahora
   hay una sola acción principal y, bajo ella, las dos vías directas
   presentadas como tarjetas de contacto: no compiten con el CTA, dan
   el teléfono a la vista y se tocan bien con el pulgar. ── */
.maq-ficha__acc {
  margin-bottom: 1.5rem; padding: 1.1rem; background: var(--cr-carbon);
  border: 1px solid var(--cr-linea);
}

/* El CTA ocupa el ancho completo y lleva su propia letra pequeña: decir
   qué pasa al pulsar quita más fricción que cualquier verbo. */
.maq-ficha__cta {
  display: block; width: 100%; text-align: center; padding: .95rem 1.2rem;
  line-height: 1.25;
}
.maq-ficha__cta small {
  display: block; margin-top: .2rem; text-wrap: balance;
  font-family: var(--cr-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .8); font-weight: 400;
}

.maq-ficha__odir {
  display: block; text-align: center; margin: .95rem 0 .7rem;
  font-family: var(--cr-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cr-tenue);
  position: relative;
}
/* Filetes a los lados del "o": separa las dos alternativas sin una línea
   entera, que partiría la tarjeta en dos bloques inconexos. */
.maq-ficha__odir::before, .maq-ficha__odir::after {
  content: ""; position: absolute; top: 50%; width: 15%; height: 1px;
  background: var(--cr-linea);
}
.maq-ficha__odir::before { left: 0; }
.maq-ficha__odir::after { right: 0; }

.maq-ficha__vias { display: grid; gap: .55rem; }
@media (min-width: 520px) { .maq-ficha__vias { grid-template-columns: 1fr 1fr; } }

/* Cada vía es una tarjeta, no un botón: el dato (el número, el canal) manda
   sobre el verbo, que es lo que el comprador busca al llamar. */
.maq-via {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .8rem; text-decoration: none;
  background: var(--cr-grafito); border: 1px solid var(--cr-linea);
  transition: border-color .15s, background .15s;
}
.maq-via:hover { border-color: var(--cr-rojo); background: #1b2126; }
.maq-via svg { flex: none; color: var(--cr-rojo); }
.maq-via--wa svg { color: #25d366; }
.maq-via b {
  display: block; color: #fff; font-family: var(--cr-cond); font-weight: 500;
  font-size: 1.02rem; letter-spacing: .01em; line-height: 1.15;
}
.maq-via i {
  display: block; font-style: normal;
  font-family: var(--cr-mono); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--cr-tenue); margin-top: .12rem;
}

.maq-ficha__avales { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.maq-ficha__avales li { color: var(--cr-tenue); font-size: .9rem; padding-left: 1.2rem; position: relative; }
.maq-ficha__avales li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px;
  background: var(--cr-verde);
}

/* Solicitud */
.maq-solicitar {
  background: var(--cr-carbon); border: 1px solid var(--cr-linea);
  border-top: 3px solid var(--cr-rojo);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  margin-bottom: clamp(2.6rem, 6vw, 4rem);
  /* compensa el ancla al saltar desde el botón, que si no queda bajo la cabecera */
  scroll-margin-top: 90px;
}
.maq-solicitar__int { display: grid; gap: 2rem; }
@media (min-width: 900px) { .maq-solicitar__int { grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; } }
.maq-solicitar__d { color: var(--cr-tenue); margin: 1rem 0 1.4rem; }
.maq-solicitar__ref { margin: 0; display: grid; gap: .15rem; border-left: 3px solid var(--cr-rojo); padding-left: .9rem; }
.maq-solicitar__ref span { font-family: var(--cr-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cr-tenue); }
.maq-solicitar__ref b { color: #fff; font-size: 1rem; line-height: 1.3; }
.maq-solicitar__ref i { font-style: normal; font-family: var(--cr-mono); font-size: .72rem; color: var(--cr-tenue); }
/* dentro del bloque el formulario ya va enmarcado: quitamos el doble marco */
.maq-solicitar .cr-form { background: transparent; border: 0; padding: 0; }
.cr-form__legal { font-size: .78rem; color: var(--cr-tenue); margin: .7rem 0 0; }

.maq-otras { margin-bottom: clamp(2rem, 5vw, 3rem); }

/* ── Portada: stock y piezas ─────────────────────────────────────
   Reordenación de 09-2026: la web pasa a presentarse como web de
   carretillas, con el recambio como servicio que la sostiene. El stock
   sube justo debajo del héroe —una web de maquinaria enseña máquina
   antes de contar nada de sí misma— y el bloque de piezas conserva
   íntegro el eslogan "Tu máquina parada cuesta más que la pieza",
   que es la mejor frase del proyecto, con su selector.  ── */

.port-stock { padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(2rem, 5vw, 3.4rem); }
/* Cabecera de sección con la acción a la derecha: en el listado de stock el
   "ver todo" es lo segundo que se busca tras las máquinas. */
.seccion__cab--fila {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap;
}
.seccion__cab--fila .cr-btn { flex: none; }

/* Piezas: fondo levemente más claro y filo rojo arriba, para que se lea como
   un cambio de negocio dentro de la misma página y no como más de lo mismo. */
.port-piezas {
  position: relative; background: var(--cr-carbon);
  border-top: 1px solid var(--cr-linea);
  padding: clamp(2.8rem, 6vw, 4.6rem) 0;
}
.port-piezas::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--cr-rojo) 0%, var(--cr-rojo-os) 42%, transparent 82%);
}
.port-piezas__int { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 1000px) {
  .port-piezas__int { grid-template-columns: .92fr 1.08fr; gap: 3.6rem; }
}
/* El eslogan mantiene el cuerpo grande que tenía como H1: al bajar de sección
   no debe leerse como un titular menor, solo dejar de ser el primero. */
.port-piezas__t {
  font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.02;
  text-transform: uppercase; margin: .2rem 0 1rem;
}
.port-piezas__d { color: var(--cr-tenue); font-size: 1.04rem; max-width: 44ch; margin: 0 0 1.6rem; }