/* ==========================================================================
   MARKETPLACE  ·  catálogo y fichas          28/09/2026

   Se carga DESPUÉS de styles.css y no repite nada de ella: los tokens, la
   tipografía, los botones, `.eyebrow`, `.wrap`, `.pgrid`, `.tt__sello` y el
   sistema de movimiento (`[data-fit]`, `[data-rise]`) vienen de allí.

   Aquí solo hay lo que el Home no tiene: la tarjeta de máquina, los filtros y
   la ficha técnica.

   Las páginas se GENERAN con `generar-marketplace.py` desde
   `datos/maquinas.json`. No editar el HTML de `marketplace/` a mano.
   ========================================================================== */

/* ==========================================================================
   LA RETÍCULA ES LA DEL HOME
   Juan: «inspírate en el Home y no tengas tanta margen lateral; en el Home es
   muy pequeño».
   Tenía razón y el error era mío de criterio: monté el catálogo dentro del
   contenedor centrado de 1240px con el argumento de que «es una página de
   lectura». Pero el marketplace no es un texto, es una retícula de producto, y
   la retícula de esta marca va A SANGRE con 10px. Meterla en una caja centrada
   la hacía parecer otra web.

   Así que el catálogo usa los mismos tokens que Top ventas y la galería:
     --gap-unit   margen lateral = hueco entre piezas = 10px
     --sangria    la sangría del TEXTO, la misma de todos los titulares
   ========================================================================== */

/* ---------- Oferta del mes: TIRA ----------
   Segunda corrección. La primera tira tenía razón en el tamaño y nada más: los
   elementos iban a pesos y alturas distintas, el aviso de vigencia se caía a una
   segunda fila flotando a la derecha, y debajo venía un alero de 62px comiéndose
   media franja. Juan: «nada tiene sentido en su ubicación, mucho corte
   innecesario».

   Reglas de esta versión:
   · UNA fila, todo alineado a la misma línea base;
   · el alero SE VA. Un alero es la costura entre dos secciones grandes; esto es
     una tira de utilidad de 100px y la costura se la comía. Borde recto;
   · el aviso de vigencia es una nota INTERNA: va al final de la misma fila, sin
     romperla, y desaparece en cuanto George dé la fecha. */
.mtira{
  position:relative;
  padding-top:var(--nav-h);
}
.mtira--enchapado{
  background:linear-gradient(155deg,#1D2758 0%,#101526 52%,#08090F 100%);
  color:var(--white);
}
.mtira--corte{
  background:linear-gradient(155deg,#FFD24D 0%,#FFC629 46%,#F5B912 100%);
  color:var(--graphite);
}
.mtira__in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px clamp(12px,1.6vw,22px);
  padding:16px var(--sangria);
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.mtira__k{
  padding:6px 10px;
  font-family:var(--f-body); font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
}
.mtira--enchapado .mtira__k{ background:var(--yellow); color:var(--graphite); }
.mtira--corte .mtira__k{ background:var(--graphite); color:var(--white); }
/* Modelo y precio, al mismo tamaño y en la misma línea base: son el mismo dato
   («esta máquina cuesta esto»), no dos titulares compitiendo. */
.mtira__q{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:inherit; }
.mtira__q:hover .mtira__t{ text-decoration:underline; }
.mtira__tipo{ font-size:13.5px; opacity:.72; }
.mtira__t{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:19px; line-height:1; letter-spacing:-.015em;
}
.mtira__precio{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--f-body); font-weight:800; font-size:19px; line-height:1;
}
.mtira--enchapado .mtira__precio{ color:var(--yellow); }
.mtira__antes{ font-weight:700; font-size:14px; opacity:.6; }
.mtira__inc{ font-size:13.5px; opacity:.76; }
.mtira--corte .btn--primary{ background:var(--graphite); color:var(--white); }
.mtira--corte .btn--primary:hover{ background:#1a1f2b; }
/* Sin `margin-left:auto`: empujaba la nota al extremo derecho y, al no caber,
   se caía sola a una segunda fila flotando en medio de la nada. Va en la misma
   fila, detrás del botón, como lo que es: una nota al margen. */
.mtira__vig{
  font-family:var(--f-body); font-weight:700; font-size:11px;
  letter-spacing:.11em; text-transform:uppercase; opacity:.66;
}
/* Nota interna. Discreta pero legible: no es para el visitante, es para que no
   se nos publique una promoción sin vigencia. */
.mtira .mtira__vig--falta{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px; opacity:1; letter-spacing:.05em;
  background:rgba(255,211,77,.16); color:var(--yellow);
}
.mtira--corte .mtira__vig--falta{ background:rgba(11,13,18,.1); color:rgba(11,13,18,.7); }
@media (max-width:899px){
  .mtira__inc, .mtira__tipo{ display:none; }
}

/* Lo que incluye. Sin viñeta de disco: un check, porque cada línea es algo que
   el carpintero RECIBE. */
.mincluye{
  list-style:none; margin:4px 0 0; padding:0;
  display:grid; gap:7px; font-size:14.5px; line-height:1.5;
  max-width:50ch;
}
.mincluye li{ position:relative; padding-left:25px; }
.mincluye li::before{
  content:""; position:absolute; left:0; top:.3em;
  width:15px; height:15px; border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* ---------- Cabecera del catálogo ----------
   A LA IZQUIERDA, no centrada. Un titular centrado encima de unos filtros
   alineados a la izquierda encima de una retícula alineada a la izquierda son
   tres lógicas distintas apiladas: eso es lo que hacía que «nada tuviera
   sentido en su ubicación». Ahora la tira, el titular, los filtros y la
   retícula comparten una sola vertical.
   Y más pequeño: esto es la cabecera de una herramienta, no la portada de una
   sección. */
.mcat{ background:var(--paper); padding-block:clamp(30px,3.4vw,48px); }
.mcat__head{
  display:grid; gap:6px; justify-items:start;
  margin:0 0 clamp(16px,2vw,26px);
  padding-inline:var(--sangria);
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.mcat__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(28px,3.4vw,44px); line-height:1.02; letter-spacing:-.02em;
  padding-top:.14em;
}
.mcat__s{ margin:0; font-size:clamp(15px,1.3vw,17px); line-height:1.5; color:var(--slate); }

/* ---------- Filtros ----------
   Píldoras, no un <select>: con seis opciones, un desplegable las esconde
   detrás de un gesto y obliga a leer dos veces. */
/* PEGAJOSOS. Con doce máquinas en dos bloques, quien baja y quiere cambiar de
   línea tenía que volver arriba. Se quedan bajo la barra de navegación. */
.mfiltros{
  position:sticky; top:var(--nav-h); z-index:20;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px clamp(10px,1.4vw,20px);
  padding:10px var(--sangria);
  margin-bottom:clamp(14px,1.8vw,22px);
  background:rgba(246,248,252,.92);
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid rgba(11,13,18,.08);
}
/* Dos grupos y no tres. El de «tamaño de taller» se fue: industrial y caro son
   casi lo mismo, así que el filtro de precio ya respondía esa pregunta, y con
   tres grupos los botones no cabían en una fila y se partían en dos, que era
   parte del desorden. */
.mfiltros__g{ display:flex; flex-wrap:wrap; gap:6px; }
/* 44px y no 40: es el mínimo para tocar con el dedo sin fallar. */
.mfiltro{
  height:44px; padding:0 15px; border-radius:var(--r-in-lg);
  border:1px solid rgba(11,13,18,.14); background:var(--white);
  font-family:var(--f-body); font-weight:700; font-size:13.5px;
  letter-spacing:.01em; color:var(--slate); cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mfiltro:hover{ border-color:rgba(11,13,18,.28); color:var(--graphite); }
.mfiltro.is-on{ background:var(--graphite); border-color:var(--graphite); color:var(--white); }
.mfiltros__cuenta{
  margin:0 0 0 auto; white-space:nowrap;
  font-family:var(--f-body); font-weight:700; font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
}

/* ---------- Los dos bloques de línea ----------
   Juan: «que se dividan mejor las dos líneas, la Titán y la Urus; puede ser con
   unas franjas, para la Titán en azul con un texto grande y para la Urus una
   franja amarilla».

   Es mejor que lo anterior por una razón concreta: antes el color de línea
   estaba en el FONDO DE CADA TARJETA, así que competía con la máquina y
   obligaba a dos tratamientos de foto distintos. Ahora el color vive en la
   franja, que es donde tiene que estar (es un rótulo, no un producto), y todas
   las máquinas se ven sobre el mismo claro. */
.mbloque[hidden]{ display:none; }
.mbloque + .mbloque{ margin-top:var(--gap-unit); }

.mfranja{
  position:relative; overflow:hidden;
  margin-inline:var(--gap-unit);
  margin-bottom:var(--gap-unit);
  padding:clamp(24px,3vw,46px) clamp(22px,2.6vw,44px);
}
.mfranja--enchapado{
  background:linear-gradient(155deg,#1D2758 0%,#101526 52%,#08090F 100%);
  color:var(--white);
}
.mfranja--corte{
  background:linear-gradient(155deg,#FFD24D 0%,#FFC629 46%,#F5B912 100%);
  color:var(--graphite);
}
.mfranja__in{ display:grid; gap:6px; }
@media (min-width:860px){
  .mfranja__in{
    grid-template-columns:auto minmax(0,1fr);
    align-items:baseline; column-gap:clamp(20px,3vw,44px); row-gap:2px;
  }
  .mfranja__t{ grid-row:span 2; }
}
.mfranja__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(44px,7vw,110px); line-height:.86; letter-spacing:-.035em;
  padding-top:.14em;
}
.mfranja__s{
  margin:0;
  font-family:var(--f-body); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
}
.mfranja--enchapado .mfranja__s{ color:var(--yellow); }
.mfranja--corte .mfranja__s{ color:var(--graphite); }
.mfranja__f{ margin:0; font-size:clamp(15px,1.4vw,18px); line-height:1.5; max-width:40ch; }
.mfranja--enchapado .mfranja__f{ color:rgba(255,255,255,.78); }
.mfranja--corte .mfranja__f{ color:rgba(11,13,18,.72); }

/* ---------- La retícula, a sangre ----------
   TRES columnas en portátil, no cuatro. Medido antes: con cuatro, la tarjeta
   medía 344px y la zona de foto 258px de alto, con la máquina ocupando la mitad
   de esa caja. Apple le da a la foto de producto el 70-80% de la pieza.
   En un catálogo de doce, la densidad no es el objetivo: se ven menos máquinas
   por pantalla y cada una el doble de grande. La cuarta columna vuelve solo por
   encima de 1600px, donde de verdad sobra ancho. */
.mgrid{
  display:grid; gap:var(--gap-unit);
  padding-inline:var(--gap-unit);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:700px){  .mgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1600px){ .mgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ---------- La tarjeta ----------
   Panel, no tarjeta: a escuadra, sin borde y sin sombra, como las de Top ventas
   del Home. Y sin descripción: doce resúmenes seguidos son doce párrafos que
   nadie lee, y en celular convierten la retícula en un muro de texto. Lo que
   decide en un catálogo es qué máquina es, cuánto cuesta y si está. */
.mcard{ position:relative; min-width:0; }
.mcard[hidden]{ display:none; }
/* Un solo fondo para las doce: blanco a gris claro. La máquina se recorta mejor
   sobre claro que sobre el color de su línea, y el color de línea ya lo dice la
   franja de arriba. Un degradado y no un plano para que la tarjeta tenga algo
   de cuerpo y no se confunda con el fondo de la página. */
.mcard__link{
  display:grid; grid-template-rows:auto 1fr; height:100%;
  text-decoration:none; color:var(--graphite);
  background:linear-gradient(155deg,#FFFFFF 0%,#E9ECF2 100%);
  border:0; border-radius:0;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
/* En el hover se acerca LA MÁQUINA, no la tarjeta. La caja quieta y el producto
   creciendo un 4% se siente más fino que mover el recuadro entero, y es lo que
   hace Apple en su retícula. */
.mcard__link:hover .mcard__img{ transform:scale(1.04); }
.mcard__img{ transition:transform .5s cubic-bezier(.2,.8,.3,1); }
.mcard__link:focus-visible{ outline:2px solid var(--blue); outline-offset:-3px; }

/* Caja cuadrada y la máquina casi llenándola: es lo que hace que un catálogo
   parezca de producto y no de inventario. */
.mcard__arte{
  position:relative; display:grid; place-items:center;
  aspect-ratio:1/1; overflow:hidden; padding:clamp(14px,1.6vw,26px);
}
.mcard__img{
  width:100%; height:100%; object-fit:contain; display:block;
  /* Sombra de apoyo: sobre claro, una máquina recortada sin sombra parece
     pegada. Es la misma que usan las fichas de línea del Home. */
  filter:drop-shadow(0 14px 18px rgba(11,13,18,.16));
}

/* Sin foto: el nombre grande sobre el color de su línea. NUNCA la foto de otra
   máquina. Es honesto y además se lee: la tarjeta no queda vacía. */
.mcard__sinfoto{ display:grid; gap:6px; place-items:center; text-align:center; padding:10px; }
.mcard__sinfoto span{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(20px,2.2vw,30px); line-height:1; letter-spacing:-.02em;
  opacity:.34;
}
.mcard__sinfoto em{
  font-style:normal;
  font-family:var(--f-body); font-weight:700; font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; opacity:.4;
}
.mcard__sinfoto{ color:var(--graphite); }

/* La marca de foto provisional. Pequeña y en una esquina: tiene que ser legible
   para nosotros y casi invisible para el visitante, porque desaparece en cuanto
   llegue la foto real. */
.mprov{
  position:absolute; left:0; bottom:0; z-index:3;
  padding:4px 8px; background:rgba(11,13,18,.62); color:rgba(255,255,255,.82);
  font-family:var(--f-body); font-weight:700; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; line-height:1;
  pointer-events:none;
}

.mcard__cuerpo{
  display:grid; align-content:start; gap:6px;
  padding:clamp(14px,1.4vw,20px);
}
.mcard__k{
  font-family:var(--f-body); font-weight:700; font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--blue);
  line-height:1.35;
}
/* El MODELO manda y el precio lo acompaña. Antes los dos tenían peso parecido y
   el precio en azul competía con el nombre. Que el precio esté a la vista ya es
   la ventaja: no hace falta que grite. */
.mcard__n{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(22px,2.1vw,32px); line-height:1.02; letter-spacing:-.02em;
  padding-top:.1em;
}
.mcard__pie{ display:grid; gap:3px; margin-top:6px; }
.mcard__precio{
  font-family:var(--f-body); font-weight:700; font-size:clamp(15px,1.3vw,18px);
  line-height:1.2; letter-spacing:0; color:var(--graphite);
}
.mcard__antes{ font-weight:600; font-size:.82em; color:var(--slate); margin-right:4px; }
.mcard__acotar{ font-family:var(--f-body); font-weight:700; font-size:13.5px; color:var(--slate); }
.mcard__estado{
  font-family:var(--f-body); font-weight:700; font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--slate);
}
.mcard--top .tt__sello{ right:12px; z-index:3; }

/* La sangría del texto es la misma de todos los titulares del sitio: el borde
   izquierdo del contenedor de 1240px. Así los antetítulos del marketplace caen
   en la misma vertical que los del Home. */
.mcat__head, .mfiltros, .mpacks__head, .migas, .moferta__in, .cierre__in{
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}

/* Con tres filtros es fácil llegar a cero resultados, y una retícula vacía sin
   explicación se lee como una página rota. */
.mvacio{
  margin:clamp(30px,4vw,56px) 0 0;
  padding-inline:var(--sangria);
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  font-size:16px; line-height:1.6; color:var(--slate); text-align:center;
}
.mvacio[hidden]{ display:none; }
.mvacio a{ color:var(--blue); font-weight:700; }

/* ---------- Migas ---------- */
.migas{
  padding-inline:var(--sangria);
  display:flex; gap:8px; align-items:center;
  margin-bottom:clamp(18px,2.2vw,30px);
  font-family:var(--f-body); font-weight:700; font-size:12px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--slate);
}
.migas a{ color:var(--blue); text-decoration:none; }
.migas a:hover{ text-decoration:underline; }

/* ---------- Cierre del catálogo ---------- */
.mcierre{ background:var(--paper); padding-top:0; }

/* La primera versión de la oferta y de `.mincluye` vivía aquí, al final de la
   hoja, y se quedó duplicada al rehacer la sección como portada a sangre. Dos
   bloques con los mismos selectores y el de abajo ganando: la portada salía en
   claro con el texto en blanco, o sea invisible. Borrado; la versión buena está
   arriba, con el resto de la retícula. */

/* ==========================================================================
   PAQUETES
   ========================================================================== */
.mpacks{ background:var(--paper); padding-top:0; }
.mpacks__head{
  display:grid; gap:14px; justify-items:center; text-align:center;
  max-width:700px; margin:0 auto clamp(26px,3vw,44px);
  padding-inline:var(--gutter);
}
.mpacks__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(28px,3.8vw,48px); line-height:1.02; letter-spacing:-.02em;
  padding-top:.14em;
}
.mpacks__head .lead{ text-align:center; margin-inline:auto; }
.mpacks__grid{
  display:grid; gap:var(--gap-unit);
  padding-inline:var(--gap-unit);
  grid-template-columns:1fr;
}
/* 720 y no 860: en tableta vertical los tres paquetes se apilaban en una sola
   columna y cada uno medía media pantalla. */
@media (min-width:720px){ .mpacks__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* LA TARJETA DE PAQUETE.
   Antes era una lista de texto: nivel, nombre, dos renglones con los modelos y
   un botón fantasma. Juan: «esto debe ser mucho más visual, ver las máquinas y
   más bonito; esos botones están muy sencillos».
   Ahora el arte ES la pareja: dos mitades, cada una con el color de su línea y
   su máquina dentro. Azul oscuro el enchapado, amarillo el corte. Se entiende
   qué es un paquete sin leer una palabra. */
.mpack{
  display:grid; grid-template-rows:auto 1fr; min-width:0;
  background:var(--white); border:0; overflow:hidden;
}
.mpack__arte{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  aspect-ratio:16/10;
}
.mpack__mitad{
  position:relative; display:grid; place-items:center; overflow:hidden; padding:10px;
}
.mpack__mitad--enchapado{ background:linear-gradient(155deg,#1D2758 0%,#101526 52%,#08090F 100%); }
.mpack__mitad--corte{     background:linear-gradient(155deg,#FFD24D 0%,#FFC629 46%,#F5B912 100%); }
.mpack__mitad .mcard__img{ width:100%; height:100%; object-fit:contain; }
.mpack__mitad .mprov{ font-size:8.5px; padding:3px 6px; }

.mpack__cuerpo{
  display:grid; align-content:start; gap:9px;
  grid-template-rows:auto auto auto 1fr auto auto;
  padding:clamp(20px,2.2vw,32px);
}
/* El número va PEGADO al nivel, no suelto y gigante encima: como dato de orden
   pesa poco, y ocupando media tarjeta competía con el nombre del paquete. */
.mpack__k{
  display:flex; align-items:baseline; gap:9px;
  font-family:var(--f-body); font-weight:700; font-size:11.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--blue);
}
.mpack__k b{ font-family:var(--f-display); font-size:19px; font-weight:400; opacity:.45; letter-spacing:0; }
.mpack__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(23px,2.2vw,31px); line-height:1.02; letter-spacing:-.015em;
  padding-top:.12em;
}
.mpack__p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--slate); }

.mpack__lista{
  list-style:none; margin:6px 0 0; padding:0;
  display:grid; border-top:1px solid rgba(11,13,18,.13);
}
.mpack__m{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid rgba(11,13,18,.13);
  font-size:14px;
}
.mpack__m span{ font-weight:600; }
.mpack__m em{ font-style:normal; font-weight:700; font-size:13px; color:var(--blue); white-space:nowrap; }

.mpack__precio{
  margin:10px 0 0; font-family:var(--f-display);
  font-size:clamp(24px,2.4vw,32px); line-height:1; letter-spacing:-.02em; color:var(--blue);
}
/* «Por separado» no es el precio del paquete: es la suma de los dos precios
   publicados. Va discreto justamente para que no se confunda con una oferta. */
.mpack__suelto{
  margin:10px 0 0;
  font-family:var(--f-body); font-weight:700; font-size:13px; color:var(--slate);
}
.mpack__pedir{
  margin:0 0 8px;
  font-family:var(--f-body); font-weight:700; font-size:11.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--blue);
}
/* Botón macizo, no fantasma. Un fantasma al final de una tarjeta con foto se
   lee como un enlace secundario, y aquí es la única acción que hay. */
.mpack .btn{ justify-self:stretch; justify-content:center; }

/* ==========================================================================
   BARRA FIJA DE LA FICHA
   Solo en celular y tableta: en escritorio el bloque principal y la ficha
   técnica caben juntos y la barra sobraría.
   ========================================================================== */
.mbarra{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; align-items:center; justify-content:space-between;
  gap:14px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-top:1px solid rgba(11,13,18,.1);
  box-shadow:0 -10px 26px -18px rgba(11,13,18,.45);
}
@media (max-width:899px){ .mbarra:not([hidden]){ display:flex; } }
.mbarra__q{ display:grid; gap:1px; min-width:0; }
.mbarra__t{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:17px; line-height:1; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mbarra__p{ font-family:var(--f-body); font-weight:700; font-size:14px; color:var(--blue); }
.mbarra .btn{ flex:none; }
/* Con la barra de compra visible, el botón flotante de WhatsApp se esconde.
   La clase la pone el JS en el <body>: el flotante vive fuera de <main> y la
   barra dentro, así que no son hermanos y el selector `~` no los alcanza. */
@media (max-width:899px){
  body.con-barra .wa-float{ opacity:0; visibility:hidden; transform:translateY(16px) scale(.9); pointer-events:none;
    transition:opacity .25s, transform .25s, visibility 0s .25s; }
}

/* ==========================================================================
   ¿NO SABES CUÁL TE SIRVE?
   Para el que llega de un anuncio sin saber qué modelo quiere, que es la
   mayoría. Antes el catálogo solo servía a quien ya sabía el nombre: el que no,
   no tenía por dónde entrar.
   Son atajos de un clic, no un cuestionario. Los tres primeros llevan al
   catálogo ya filtrado, porque los filtros leen la URL.
   ========================================================================== */
.mquehaces{ background:var(--paper); padding-block:clamp(40px,5vw,72px); }
.mquehaces__in{
  padding-inline:var(--sangria);
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.mquehaces__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(26px,3.2vw,42px); line-height:1.02; letter-spacing:-.02em;
  padding-top:.14em;
}
.mquehaces__s{ margin:8px 0 0; font-size:clamp(15px,1.4vw,17px); color:var(--slate); }
.mquehaces__ops{
  margin-top:clamp(18px,2.2vw,30px);
  display:grid; gap:var(--gap-unit);
  grid-template-columns:1fr;
}
@media (min-width:620px){ .mquehaces__ops{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .mquehaces__ops{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mopcion{
  display:grid; gap:4px; align-content:center;
  min-height:96px; padding:18px 20px;
  background:var(--white); text-decoration:none; color:var(--graphite);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.mopcion:hover{ transform:translateY(-3px); }
.mopcion__t{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(17px,1.5vw,21px); line-height:1.05; letter-spacing:-.01em;
  padding-top:.1em;
}
.mopcion__s{ font-size:13.5px; color:var(--slate); }
/* La cuarta es la salida a WhatsApp: se marca con el amarillo de acción. */
.mopcion--wa{
  background:linear-gradient(155deg,#FFD24D 0%,#FFC629 46%,#F5B912 100%);
}
.mopcion--wa .mopcion__s{ color:rgba(11,13,18,.7); }

/* ==========================================================================
   FICHA DE MÁQUINA  ·  v2 (05/10/2026)

   La página que cierra la venta por WhatsApp: tiene que dejar al carpintero
   con TODA la información, en el orden en que la busca. Mismo sistema que el
   Home, ni una pieza nueva de lenguaje:

     portada a sangre en el color de SU línea (Titán marino, Urus amarillo)
     → alero → cifras clave → galería → cómo trabaja (Titán) → videos
     → incluye → ficha técnica → otras de la línea → cierre en color de línea

   Paneles a escuadra con 10px de hueco, texto con --sangria, degradados a
   155°, Fugaz siempre en mayúsculas, nada por debajo de 13px. Movimiento:
   entrada por umbral ([data-fit], [data-rise], .kt), la máquina de la portada
   solo ESCALA con el scroll (es un recorte sin marco), y un único motion
   graphic en bucle: la pieza recorriendo los grupos de trabajo.
   ========================================================================== */
.pdp{
  background:var(--paper);
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --pdp-titan:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%);
  --pdp-urus:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%);
  --pdp-aire:clamp(56px,7vw,112px);
}
.pdp-sec__t{
  margin:0 0 clamp(18px,2.2vw,30px); padding-inline:var(--sangria);
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(30px,3.6vw,52px); line-height:1; letter-spacing:-.02em;
  padding-top:.16em;
}

/* ---------- 1. Página de compra ----------
   v3 (05/10/2026). La v2 era una landing de secciones (portada de color,
   franja de cifras, cajas de «incluye») y Juan la tumbó: «estos no son
   parámetros correctos para ecom de high ticket».
   El estándar de una ficha de producto caro es otro: GALERÍA a la izquierda y
   un BLOQUE DE DECISIÓN fijo a la derecha con todo lo que hace falta para
   decidir junto al botón. Los datos no van sueltos como números gigantes sin
   contexto: van como filas «etiqueta · valor», que es como se comparan. Lo que
   respalda la compra (envío, instalación, capacitación, garantía) va pegado a
   los botones, que es donde se disipa el riesgo. */
.pdp-top{
  display:grid; gap:var(--gap-unit); align-items:start;
  padding:calc(var(--nav-h) + var(--gap-unit)) var(--gap-unit) 0;
}
@media (min-width:980px){
  .pdp-top{ grid-template-columns:minmax(0,1.42fr) minmax(400px,1fr); }
}

/* Galería: la principal grande, debajo detalles y videos en pares. */
.pdp-media{ display:grid; gap:var(--gap-unit); grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; }
.pdp-m{
  position:relative; overflow:hidden; margin:0; padding:0; border:0;
  display:grid; place-items:center; aspect-ratio:1/1; min-width:0;
  font:inherit; color:inherit;
  background:linear-gradient(155deg,#EAECF1 0%,#F6F7FA 78%);
}
button.pdp-m{ cursor:zoom-in; }
.pdp-m--main{ grid-column:1 / -1; aspect-ratio:5/4; }
.pdp-m--enchapado{ background:var(--pdp-titan); }
.pdp-m--corte{ background:var(--pdp-urus); }
/* La imagen se fija al cuadro con posición absoluta. Con `height:100%` dentro
   de un <button> con aspect-ratio la altura no se resolvía: la foto tomaba su
   alto natural, se desbordaba por abajo y la máquina quedaba descentrada. */
.pdp-m__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.3,1); }
.pdp-m__img--main{
  object-fit:contain; padding:clamp(28px,5vw,80px);
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.34));
}
.pdp-m--corte .pdp-m__img--main{ filter:drop-shadow(0 28px 30px rgba(90,60,0,.3)); }
button.pdp-m:hover .pdp-m__img{ transform:scale(1.035); }
button.pdp-m:focus-visible{ outline:2px solid var(--blue); outline-offset:-4px; }
.pdp-m__sin{
  font-family:var(--f-display); text-transform:uppercase; color:var(--white);
  font-size:clamp(48px,7vw,110px); opacity:.16;
}
.pdp-m--corte .pdp-m__sin{ color:var(--graphite); }
.pdp-m--vacio{ background:linear-gradient(155deg,#EAECF1 0%,#F6F7FA 78%); }
.pdp-m__vk{
  font-family:var(--f-body); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate); opacity:.7;
}
.pdp-m--vid{ aspect-ratio:4/5; background:#0B0D18; cursor:pointer; }
.pdp-m__nota{
  position:absolute; left:12px; top:12px; z-index:2;
  padding:6px 10px; font-size:13px; font-weight:600; color:#fff;
  background:rgba(11,13,18,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pdp-lupa{
  position:absolute; right:14px; top:14px; z-index:2;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(11,13,18,.42); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transform:scale(.86);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
.pdp-lupa svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; }
button.pdp-m:hover .pdp-lupa, button.pdp-m:focus-visible .pdp-lupa{ opacity:1; transform:none; }
@media (hover:none){ .pdp-lupa{ opacity:1; transform:none; } }

/* Video: mismo control que el Home. */
.pdp-vid__v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.pdp-vid__play{
  position:absolute; left:50%; top:50%; z-index:2;
  width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.pdp-vid__play span{ width:0; height:0; margin-left:4px; border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; }
.pdp-vid__it:hover .pdp-vid__play{ transform:scale(1.08); }
.pdp-vid__it.is-sonido .pdp-vid__play, .pdp-vid__it.is-sonido .pdp-m__nota{ opacity:0; pointer-events:none; }

/* ---- El bloque de decisión ---- */
.pdp-buy{
  display:grid; gap:14px; align-content:start; min-width:0;
  padding:clamp(22px,2.4vw,38px);
  background:var(--white);
}
@media (min-width:980px){
  .pdp-buy{ position:sticky; top:calc(var(--nav-h) + var(--gap-unit)); }
}
/* Sin migas: repetían el menú y el antetítulo. El antetítulo va pegado al
   nombre, pero con aire suficiente para la tilde de TITÁN, que en Fugaz sube
   por encima de su caja. */
.pdp-buy .eyebrow{ margin-bottom:-2px; }
.pdp-buy__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(44px,4.2vw,68px); line-height:.92; letter-spacing:-.03em; padding-top:.3em;
}
.pdp-buy__r{ margin:0; font-size:16px; line-height:1.6; color:var(--slate); }
.pdp-buy__precio-fila{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  padding-top:14px; border-top:1px solid rgba(11,13,18,.12);
}
.pdp-buy__precio{
  margin:0; font-family:var(--f-display); text-transform:uppercase; color:var(--graphite);
  font-size:clamp(34px,3vw,46px); line-height:1; letter-spacing:-.02em; padding-top:.12em;
}
.pdp-buy__antes{ margin:0; width:100%; font-weight:700; font-size:14px; color:var(--slate); }
.pdp-buy__antes s{ font-weight:600; }
.pdp-buy__precio--nota{ font-family:var(--f-body); font-weight:700; font-size:18px; text-transform:none; letter-spacing:0; }
.pdp-buy__aviso{ margin:0; font-size:14px; line-height:1.5; color:var(--slate); }

.pdp-disp{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:var(--f-body); font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--graphite);
}
.pdp-disp i{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--blue); flex:none; }
.pdp-disp--viaje i{ background:var(--yellow); }
.pdp-disp--viaje i::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--yellow); opacity:0;
  animation:pdpLatido 2s cubic-bezier(.2,.8,.3,1) infinite;
}
.pdp-disp__c{ font-weight:500; letter-spacing:0; text-transform:none; font-size:15px; color:var(--slate); }
@keyframes pdpLatido{ 0%{ transform:scale(.5); opacity:.9; } 100%{ transform:scale(1.9); opacity:0; } }

/* Los datos que deciden: filas etiqueta · valor, como se comparan. */
.pdp-buy__k{ margin:0; display:grid; border-top:1px solid rgba(11,13,18,.12); }
.pdp-k{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:10px 0; border-bottom:1px solid rgba(11,13,18,.12);
}
.pdp-k dt{ font-size:15px; color:var(--slate); }
.pdp-k dd{ margin:0; font-size:15px; font-weight:700; color:var(--graphite); text-align:right; }

.pdp-buy__acc{ display:grid; gap:10px; }
.pdp-buy__acc .btn{ width:100%; justify-content:center; }
.pdp-buy__acc .btn--ghost{ background:transparent; color:var(--graphite); border:1.5px solid rgba(11,13,18,.8); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.pdp-buy__acc .btn--ghost:hover{ background:var(--graphite); color:var(--white); }
.pdp-buy__nota{ margin:0; font-size:14px; line-height:1.5; color:var(--slate); text-align:center; }

.pdp-buy__resp{
  list-style:none; margin:0; padding:14px 0 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px;
  border-top:1px solid rgba(11,13,18,.12);
}
.pdp-buy__resp li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:600; line-height:1.4; }
.pdp-buy__resp svg{ flex:none; color:var(--blue); }
.pdp-buy__hora{ margin:0; font-size:13px; line-height:1.5; color:var(--slate); }

/* Celular: la foto principal primero, luego el bloque de compra y después el
   resto de la galería. */
@media (max-width:979px){
  .pdp-top{ grid-template-columns:minmax(0,1fr); }
  .pdp-media{ display:contents; }
  .pdp-m--main{ order:1; aspect-ratio:1/1; }
  .pdp-buy{ order:2; }
  .pdp-m--det, .pdp-m--vid{ order:3; }
  .pdp-top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pdp-m--main, .pdp-buy{ grid-column:1 / -1; }
}
/* Tableta vertical (iPad, 700-979): foto y compra lado a lado, como en
   escritorio. A todo el ancho, la foto cuadrada medía ~740 px y dejaba el
   precio y el botón de WhatsApp fuera de la primera pantalla. A la izquierda
   la foto con los videos debajo; a la derecha el bloque de compra. */
@media (min-width:700px) and (max-width:979px){
  .pdp-m--main{ grid-column:1; grid-row:1; aspect-ratio:1/1; }
  .pdp-buy{ grid-column:2; grid-row:1 / span 3; }
  .pdp-m--det, .pdp-m--vid{ grid-column:1; }
}

/* Aire entre secciones de abajo. */
.pdp-top + .pdp-rec{ margin-top:calc(clamp(48px,6vw,96px) - var(--seam-h)); }

/* ---------- 4. Cómo trabaja: la máquina vista desde arriba ----------
   v2 (05/10/2026). La primera versión era un paso a paso genérico: circulitos
   sobre una línea fina, nada que se pareciera a una enchapadora, y la pieza
   pasaba de largo del último grupo. Juan: «el concepto es bueno, pero
   mejóralo mucho».

   Ahora es la máquina: un MÓDULO por grupo, cada uno con su cabezal, y debajo
   la BANDA transportadora con sus rodillos girando. El tablero entra por la
   izquierda con el canto en crudo (color aglomerado) y, al pasar el grupo de
   encolado, sale con el canto puesto. El módulo que tiene la pieza debajo se
   enciende y baja su cabezal; los que ya pasó quedan marcados. Arriba a la
   derecha, una lectura grande dice qué grupo está trabajando.

   El JS calcula la posición con la geometría real (no con retardos de CSS), así
   pieza y módulos nunca se desfasan y la pieza se detiene donde termina la
   máquina. Sin JS o con movimiento reducido es una lista numerada legible. */
.pdp-rec{ background:var(--pdp-titan); color:var(--white); }
.pdp-rec.cut-top{ padding-top:var(--seam-h); }
.pdp-rec__in{ padding:clamp(40px,5vw,88px) var(--sangria) clamp(48px,6vw,96px); }
.pdp-rec__head{
  display:grid; gap:24px; align-items:end;
  margin-bottom:clamp(30px,4vw,58px);
}
@media (min-width:900px){ .pdp-rec__head{ grid-template-columns:minmax(0,1fr) auto; } }
.pdp-rec__intro{ display:grid; gap:12px; justify-items:start; max-width:640px; }
.pdp-rec .eyebrow{ color:var(--yellow); }
.pdp-rec__h{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(36px,4.6vw,68px); line-height:.95; letter-spacing:-.025em; padding-top:.14em;
}
.pdp-rec__p{ margin:0; font-size:clamp(16px,1.4vw,18px); line-height:1.6; color:rgba(255,255,255,.72); }

/* La lectura en vivo: qué grupo está trabajando ahora. */
.pdp-rec__vivo{ display:grid; justify-items:end; gap:6px; min-width:min(340px,100%); text-align:right; }
.pdp-rec__cont{
  font-family:var(--f-display); text-transform:uppercase; line-height:.85;
  font-size:clamp(56px,6vw,96px); letter-spacing:-.03em; padding-top:.14em;
}
.pdp-rec__cont b{ font-weight:400; color:var(--yellow); }
.pdp-rec__cont span{ color:rgba(255,255,255,.22); font-size:.42em; letter-spacing:-.01em; }
.pdp-rec__actual{
  font-family:var(--f-body); font-weight:700; font-size:clamp(15px,1.3vw,18px);
  color:rgba(255,255,255,.9); min-height:1.4em;
  transition:opacity .25s ease;
}
.pdp-rec__actual.is-cambio{ opacity:0; }
@media (max-width:899px){ .pdp-rec__vivo{ display:none; } }

/* ---- La máquina ---- */
.pdp-rec__maq{
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 22px 22px,
    rgba(5,8,26,.35);
}
.pdp-rec__est{
  list-style:none; margin:0; padding:0;
  display:grid; position:relative; z-index:1;
}
.pdp-rec__g{
  position:relative; display:grid; align-content:start; gap:10px;
  padding:clamp(16px,1.6vw,24px) clamp(12px,1.2vw,18px);
  transition:background .35s ease;
}
.pdp-rec__n{
  font-family:var(--f-display); text-transform:uppercase; line-height:.9;
  font-size:clamp(34px,3.2vw,52px); letter-spacing:-.03em; padding-top:.12em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.34);
  transition:color .35s ease, -webkit-text-stroke-color .35s ease;
}
.pdp-rec__t{ font-size:15px; font-weight:600; line-height:1.35; color:rgba(255,255,255,.62); transition:color .35s ease; }
/* El cabezal: un bloque del módulo que BAJA hacia la pieza cuando trabaja. */
.pdp-rec__cab{
  position:absolute; background:rgba(255,255,255,.18);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), background .35s ease;
}

/* Grupo trabajando y grupo ya pasado. */
.pdp-rec__g.is-on{ background:rgba(255,198,41,.14); box-shadow:inset 0 0 0 1px rgba(255,198,41,.6); }
.pdp-rec__g.is-on .pdp-rec__n{ color:var(--yellow); -webkit-text-stroke-color:var(--yellow); }
.pdp-rec__g.is-on .pdp-rec__t{ color:var(--white); }
.pdp-rec__g.is-on .pdp-rec__cab{ background:var(--yellow); }
.pdp-rec__g.is-hecho .pdp-rec__n{ color:rgba(255,255,255,.86); -webkit-text-stroke-color:transparent; }
.pdp-rec__g.is-hecho .pdp-rec__t{ color:rgba(255,255,255,.82); }

/* El check: aparece en cada grupo cuando la pieza termina de pasar por él. Al
   final la máquina queda con todos sus grupos chequeados (idea de Juan). */
.pdp-rec__ok{
  position:absolute; top:clamp(14px,1.4vw,20px); right:clamp(10px,1vw,16px);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--yellow);
  transform:scale(0); opacity:0;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.pdp-rec__ok svg{ width:16px; height:16px; fill:none; stroke:var(--graphite); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .35s ease .15s; }
.pdp-rec__g.is-hecho .pdp-rec__ok{ transform:none; opacity:1; }
.pdp-rec__g.is-hecho .pdp-rec__ok svg{ stroke-dashoffset:0; }
@media (max-width:899px){ .pdp-rec__ok{ top:50%; margin-top:-13px; right:14px; } .pdp-rec__g{ padding-right:52px; } }
/* Sin JS o con movimiento reducido, la máquina se muestra completa: todos los
   grupos con su check. */
@media (prefers-reduced-motion:reduce){ .pdp-rec__ok{ transform:none; opacity:1; } .pdp-rec__ok svg{ stroke-dashoffset:0; } }

/* La banda con sus rodillos girando (una franja de rayas que se desplaza). */
.pdp-rec__banda{ position:relative; overflow:hidden; background:rgba(0,0,0,.28); }
.pdp-rec__rod{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 2px, transparent 2px 14px);
}
.pdp-rec__pieza{
  position:absolute; z-index:2; left:0; top:0;
  background:linear-gradient(155deg,#FFFFFF 0%,#E9ECF2 100%);
  box-shadow:0 10px 22px -8px rgba(0,0,0,.7);
  opacity:0; will-change:transform;
}
/* El canto: crudo (aglomerado) hasta que pasa por el encolado. */
.pdp-rec__pieza i{ position:absolute; background:#B98E5A; transition:background .4s ease, box-shadow .4s ease; }
.pdp-rec__pieza.con-canto i{ background:var(--white); box-shadow:0 0 0 1px var(--yellow); }

/* Escritorio: módulos en fila, banda debajo, la pieza viaja a la derecha. */
@media (min-width:900px){
  .pdp-rec__est{ grid-template-columns:repeat(var(--n),minmax(0,1fr)); }
  .pdp-rec__g + .pdp-rec__g{ border-left:1px solid rgba(255,255,255,.1); }
  .pdp-rec__g{ min-height:clamp(150px,13vw,190px); padding-bottom:34px; }
  .pdp-rec__cab{ left:22%; right:22%; bottom:0; height:10px; transform-origin:50% 0; transform:scaleY(.6); }
  .pdp-rec__g.is-on .pdp-rec__cab{ transform:translateY(8px) scaleY(1); }
  .pdp-rec__banda{ height:58px; border-top:1px solid rgba(255,255,255,.14); }
  .pdp-rec.is-viva .pdp-rec__rod{ animation:pdpRodX .7s linear infinite; }
  .pdp-rec__pieza{ top:12px; height:34px; width:var(--pieza, 160px); }
  .pdp-rec__pieza i{ left:0; right:0; top:0; height:4px; }
}
/* Celular: módulos en columna, banda a la izquierda, la pieza baja. */
@media (max-width:899px){
  .pdp-rec__maq{ display:grid; grid-template-columns:46px minmax(0,1fr); }
  .pdp-rec__banda{ grid-column:1; grid-row:1; border-right:1px solid rgba(255,255,255,.14); }
  .pdp-rec__est{ grid-column:2; grid-row:1; grid-auto-rows:1fr; }
  .pdp-rec__g{ grid-template-columns:auto 1fr; align-items:center; gap:14px; padding:14px 16px 14px 20px; }
  .pdp-rec__g + .pdp-rec__g{ border-top:1px solid rgba(255,255,255,.1); }
  .pdp-rec__n{ font-size:30px; min-width:1.6em; }
  .pdp-rec__cab{ left:0; top:26%; bottom:26%; width:7px; transform-origin:100% 50%; transform:scaleX(.6); }
  .pdp-rec__g.is-on .pdp-rec__cab{ transform:translateX(-6px) scaleX(1); }
  .pdp-rec__rod{ background:repeating-linear-gradient(180deg, rgba(255,255,255,.1) 0 2px, transparent 2px 14px); }
  .pdp-rec.is-viva .pdp-rec__rod{ animation:pdpRodY .7s linear infinite; }
  .pdp-rec__pieza{ left:9px; width:26px; height:var(--pieza, 90px); }
  .pdp-rec__pieza i{ top:0; bottom:0; right:0; width:4px; }
}
/* Se reproduce UNA vez (Juan: «que no esté todo el tiempo distrayendo»). Al
   terminar queda la máquina completa y este botón para verlo de nuevo. */
.pdp-rec__play{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(16px,2vw,24px); height:44px; padding:0 18px;
  font:inherit; font-size:15px; font-weight:700; color:var(--white);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); border-radius:10px;
  cursor:pointer; transition:background .25s ease, border-color .25s ease;
}
.pdp-rec__play[hidden]{ display:none; }
.pdp-rec__play:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); }
.pdp-rec__play:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }
.pdp-rec__play-i{ width:0; height:0; border-left:10px solid var(--yellow); border-top:6px solid transparent; border-bottom:6px solid transparent; }
@keyframes pdpRodX{ to{ background-position:14px 0; } }
@keyframes pdpRodY{ to{ background-position:0 14px; } }

/* ---------- 7. Ficha técnica: secciones con su foto de detalle ----------
   v4 (05/10/2026). Juan: «aún la veo muy tipo lista; quiero secciones que den
   claridad y tengan interés», y que las fotos de detalle acompañen el dato
   que muestran. Dos bloques a dos columnas, alternando lados: la foto grande
   (con paralaje dentro de su marco) y al lado el dato, su gráfica y las filas.
   Los grupos de trabajo no se repiten aquí cuando ya tienen su sección. */
.pdp-specs{ background:var(--paper); padding-block:var(--pdp-aire); display:grid; gap:clamp(48px,7vw,120px); }
.pdp-specs.cut-top{ padding-top:calc(var(--pdp-aire) + var(--seam-h)); }
.fb{ display:grid; gap:clamp(24px,3vw,40px); padding-inline:var(--gap-unit); align-items:center; }
@media (min-width:980px){
  .fb{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(40px,6vw,110px); padding-right:var(--sangria); }
  .fb--inv{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); padding-right:var(--gap-unit); padding-left:var(--sangria); }
  .fb--inv .fb__m{ order:2; }
}
@media (max-width:979px){ .fb__c{ padding-inline:calc(var(--sangria) - var(--gap-unit)); } }

.fb__m{ min-width:0; }
/* Las fotos de detalle llegan como PNG SIN FONDO: el hueco es transparente,
   sin panel de color, y la pieza flota sobre la página con su sombra. */
.fb__media{
  position:relative; display:block; width:100%; aspect-ratio:5/4; overflow:hidden;
  margin:0; padding:0; border:0; background:none;
}
button.fb__media{ cursor:zoom-in; }
.fb__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 24px 28px rgba(11,13,18,.18));
  transition:transform .8s cubic-bezier(.2,.8,.3,1);
}
button.fb__media:hover .fb__img{ transform:scale(1.03); }
/* Provisional: la foto principal ampliada sobre una zona concreta de la
   máquina. Al entrar en pantalla el aumento se asienta, como un acercamiento. */
.fb__media--zona .fb__img{ transform-origin:var(--zx) var(--zy); transform:scale(var(--zs)); filter:none; }
.fv-anima .fb:not(.is-visto) .fb__media--zona .fb__img{ transform:scale(calc(var(--zs) * .82)); }
.fb__media--zona .fb__img{ transition:transform 1.4s cubic-bezier(.2,.8,.2,1); }
.fb__media--vacio{ display:grid; place-items:center; text-align:center; border:1px dashed rgba(11,13,18,.18); }
.fb__media .mprov{ left:0; bottom:0; }
.fb__vk{
  font-family:var(--f-body); font-weight:700; font-size:13px; line-height:1.7;
  letter-spacing:.14em; text-transform:uppercase; opacity:.55;
}
.fb__vk b{ letter-spacing:.04em; text-transform:none; font-size:15px; opacity:1; }

.fb__c{ display:grid; gap:14px; align-content:center; min-width:0; }
.fb__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(34px,3.5vw,58px); line-height:.95; letter-spacing:-.025em; padding-top:.16em; text-wrap:balance;
}
.fb__cuerpo{ display:grid; gap:18px; }
.fb__p{ margin:0; font-size:17px; line-height:1.62; color:var(--slate); max-width:52ch; }
.fb__dl{ margin:0; border-top:1px solid rgba(11,13,18,.14); }
.fb-f{
  display:grid; gap:4px; padding:14px 0; border-bottom:1px solid rgba(11,13,18,.14);
}
@media (min-width:600px){ .fb-f{ grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:20px; align-items:baseline; } }
.fb-f dt{ font-family:var(--f-body); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); }
.fb-f dd{ margin:0; font-size:16px; font-weight:600; line-height:1.5; color:var(--graphite); }
.fb__ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.fb__ul li{ position:relative; padding-left:24px; }
.fb__ul li::before{
  content:""; position:absolute; left:0; top:.42em; width:12px; height:7px;
  border-left:2.4px solid var(--blue); border-bottom:2.4px solid var(--blue); transform:rotate(-45deg);
}

/* Regla fina con su escala; el rango se dibuja al entrar. */
.ft-regla{ max-width:520px; }
.ft-regla__pista{ position:relative; height:4px; background:rgba(11,13,18,.1); }
.ft-regla__rango{
  position:absolute; top:-3px; bottom:-3px; left:calc(var(--a) * 1%); width:calc((var(--b) - var(--a)) * 1%);
  background:var(--yellow); transform-origin:0 50%;
  transition:transform 1.1s cubic-bezier(.65,0,.35,1) .25s;
}
.ft-regla__marcas{ position:relative; height:24px; }
.ft-regla__marcas span{
  position:absolute; left:calc(var(--p) * 1%); top:9px; transform:translateX(-50%);
  font-size:13px; font-weight:600; color:var(--slate); opacity:.7;
}
.ft-regla__marcas span:first-child{ transform:none; }
.ft-regla__marcas span:last-child{ transform:translateX(-100%); }

/* Ángulo de corte: la hoja gira de 0 a 45°. */
.fv-angulo{ position:relative; width:150px; height:100px; color:var(--graphite); }
.fv-angulo__base{ position:absolute; left:0; bottom:0; width:146px; height:3px; background:currentColor; opacity:.25; }
.fv-angulo__hoja{
  position:absolute; left:0; bottom:0; width:146px; height:4px; background:var(--blue);
  transform-origin:0 50%; transform:rotate(-45deg);
  transition:transform 1.1s cubic-bezier(.34,1.3,.64,1) .3s;
}
.fv-angulo__arco{
  position:absolute; left:-56px; bottom:-56px; width:112px; height:112px; border-radius:50%;
  background:conic-gradient(from 45deg, rgba(255,198,41,.55) 0 45deg, transparent 45deg);
  transition:opacity .5s ease .9s;
}
.fv-angulo__t{ position:absolute; left:64px; bottom:12px; font-family:var(--f-display); font-size:22px; color:var(--blue); }

/* Dibujado por defecto; el JS lo «desdibuja» solo para animarlo al entrar. */
.fv-anima .fb:not(.is-visto) .ft-regla__rango{ transform:scaleX(0); }
.fv-anima .fb:not(.is-visto) .fv-angulo__hoja{ transform:rotate(0deg); }
.fv-anima .fb:not(.is-visto) .fv-angulo__arco{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .ft-regla__rango, .fv-angulo__hoja{ transition:none !important; } }

/* ---------- Respuestas: franja azul de marca, sin paneles ----------
   Afirmaciones a la vista, no preguntas que hay que abrir (prehandling). Es
   de la EMPRESA, no de una línea, así que va en el azul del hero del Home. */
.pdp-resp{
  background:linear-gradient(155deg,#16226E 0%,#1E31A4 38%,#2C45D6 72%,#1B2A8C 100%);
  color:var(--white); padding-block:var(--pdp-aire);
}
.pdp-resp.cut-top{ padding-top:calc(var(--pdp-aire) + var(--seam-h)); }
.pdp-resp__in{ padding-inline:var(--sangria); display:grid; gap:clamp(30px,4vw,56px); }
.pdp-resp__h{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(32px,3.8vw,60px); line-height:.98; letter-spacing:-.02em; padding-top:.16em; max-width:20ch;
}
.pdp-resp__l{ list-style:none; margin:0; padding:0; display:grid; gap:28px 0; grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){ .pdp-resp__l{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .pdp-resp__l{ grid-template-columns:repeat(var(--c),minmax(0,1fr)); } }
.pdp-r{
  display:grid; gap:12px; align-content:start;
  padding-inline:clamp(16px,1.8vw,28px); border-left:1px solid rgba(255,255,255,.2);
}
.pdp-r:first-child{ border-left:0; padding-left:0; }
@media (max-width:1099px){
  .pdp-r{ border-left:0; padding-left:0; padding-top:22px; border-top:1px solid rgba(255,255,255,.2); }
}
.pdp-r__i{ color:var(--yellow); }
.pdp-r__t{ font-size:clamp(18px,1.4vw,21px); font-weight:800; line-height:1.25; letter-spacing:-.01em; }
.pdp-r__p{ font-size:15px; line-height:1.55; color:rgba(255,255,255,.74); }

/* ---------- Costuras ----------
   El alero va en cada cambio de color, y la línea se elige por lo que hay
   ARRIBA: blanca si arriba es oscuro, filete gris si arriba es claro. */
.pdp-rec.cut-top::before,
.pdp-resp.cut-top::before,
.pdp-cierre.cut-top::before{ background:rgba(11,13,18,.10); }

/* ---------- 8. Otras de la línea ---------- */
.pdp-otras{ background:var(--paper); padding-top:var(--pdp-aire); }
.pdp-otras.cut-top{ padding-top:calc(var(--pdp-aire) + var(--seam-h)); }
/* La sangría se pone en la cabecera y no en el titular: dentro de un flex, el
   100% de `--sangria` se resolvería contra el ancho del propio titular. */
.pdp-otras__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-inline:var(--sangria); margin-bottom:clamp(18px,2.2vw,30px); }
.pdp-otras__head .pdp-sec__t{ margin:0; padding-inline:0; }
.pdp-otras__all{ display:inline-flex; align-items:center; gap:6px; flex:none; font-size:15px; font-weight:700; color:var(--blue); padding-block:12px; }
.pdp-otras__all svg{ transition:transform .25s cubic-bezier(.2,.8,.3,1); }
.pdp-otras__all:hover svg{ transform:translateX(3px); }
@media (min-width:700px){ .pdp-otras__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------- 9. Cierre en el color de la línea ---------- */
.pdp-cierre{ margin-top:var(--pdp-aire); text-align:center; }
.pdp-cierre.cut-top{ padding-top:calc(clamp(56px,7vw,110px) + var(--seam-h)); padding-bottom:clamp(64px,8vw,120px); }
.pdp-cierre--enchapado{ background:var(--pdp-titan); color:var(--white); }
.pdp-cierre--corte{     background:var(--pdp-urus);  color:var(--graphite); }
/* Botón secundario sobre el color de la línea: blanco macizo sobre marino,
   contorno grafito sobre amarillo. Un secundario no se apaga. */
.pdp-cierre--enchapado .btn--ghost{
  background:var(--white); color:var(--blue); border-color:var(--white);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.pdp-cierre--corte .btn--ghost{
  background:transparent; color:var(--graphite); border:1.5px solid var(--graphite);
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
}
.pdp-cierre--corte .btn--ghost:hover{ background:var(--graphite); color:var(--yellow); }
.pdp-cierre__in{ padding-inline:var(--gutter); display:grid; justify-items:center; gap:22px; }
.pdp-cierre__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(30px,4.2vw,60px); line-height:1; letter-spacing:-.02em; padding-top:.16em;
}
.pdp-cierre__acc{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.pdp-cierre__p{ margin:0; max-width:52ch; font-size:15px; line-height:1.6; opacity:.78; }

/* ---------- 10. Visor de fotos ---------- */
.pdp-visor{
  position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:rgba(8,10,22,.95); color:var(--white);
  overflow:hidden;
}
.pdp-visor::backdrop{ background:transparent; }
.pdp-visor[open]{ display:block; animation:pdpVisor .3s ease; }
@keyframes pdpVisor{ from{ opacity:0; } to{ opacity:1; } }
.pdp-visor__lienzo{ position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; touch-action:none; }
.pdp-visor__lienzo img{
  max-width:92vw; max-height:84dvh; object-fit:contain; cursor:zoom-in;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.pdp-visor.is-zoom .pdp-visor__lienzo img{ transform:scale(2.4); cursor:zoom-out; transition:transform .35s cubic-bezier(.2,.8,.3,1), transform-origin 0s; }
.pdp-visor__x,
.pdp-visor__nav{
  position:absolute; z-index:2; display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%; color:#fff; font-size:28px; line-height:1;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.pdp-visor__x{ top:16px; right:16px; }
.pdp-visor__nav{ top:50%; margin-top:-26px; }
.pdp-visor__nav--prev{ left:16px; }
.pdp-visor__nav--next{ right:16px; }
.pdp-visor__nav[hidden]{ display:none; }
.pdp-visor__ayuda{
  position:absolute; left:0; right:0; bottom:18px; margin:0; text-align:center;
  font-size:13px; letter-spacing:.06em; opacity:.6;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .pdp-rec__pieza{ display:none; }
  .pdp-rec__rod, .pdp-disp--viaje i::after{ animation:none !important; }
}

/* ---------- Mínimo de 13px en todo el marketplace ---------- */
.mcard__k, .mcard__estado, .mcard__sinfoto em, .migas{ font-size:13px; }
.mprov{ font-size:13px; letter-spacing:.06em; padding:5px 9px; }

/* ==========================================================================
   LOS DOS BOTONES DE CATEGORÍA · 07/10/2026
   Reemplazan a los filtros. Dos paneles a sangre, cada uno en el color de su
   línea, con la categoría en grande, el precio de entrada y la máquina
   sangrando por la esquina. Toda la pieza es el botón y baja a su bloque.
   ========================================================================== */
.mcats{
  display:grid; gap:var(--gap-unit); padding-inline:var(--gap-unit);
  grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(36px,5vw,72px);
}
@media (min-width:760px){ .mcats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mcat-t{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; align-content:start;
  min-height:clamp(240px,30vw,460px);
  padding:clamp(24px,3vw,48px);
  text-decoration:none;
}
.mcat-t--enchapado{ background:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%); color:var(--white); }
.mcat-t--corte{ background:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%); color:var(--graphite); }
.mcat-t__txt{ position:relative; z-index:2; display:grid; gap:10px; justify-items:start; }
.mcat-t__k{
  font-family:var(--f-body); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
}
.mcat-t--enchapado .mcat-t__k{ color:var(--yellow); }
.mcat-t--corte .mcat-t__k{ color:var(--blue); }
.mcat-t__n{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(38px,4.9vw,86px); line-height:.9; letter-spacing:-.035em; padding-top:.16em;
}
.mcat-t__p{ font-size:clamp(15px,1.3vw,18px); font-weight:700; opacity:.86; }
.mcat-t__ir{
  display:inline-flex; align-items:center; gap:8px; margin-top:clamp(8px,1.4vw,20px);
  height:48px; padding:0 20px; border-radius:12px;
  font-size:15px; font-weight:700;
}
.mcat-t--enchapado .mcat-t__ir{ background:var(--yellow); color:var(--graphite); }
.mcat-t--corte .mcat-t__ir{ background:var(--graphite); color:var(--white); }
.mcat-t__ir svg{ transition:transform .3s cubic-bezier(.2,.8,.3,1); }
/* La máquina sangra por la esquina inferior derecha y se acerca en hover. */
.mcat-t__img{
  position:absolute; z-index:1; right:-4%; bottom:-6%;
  width:min(var(--ancho, 54%), 640px); height:auto; max-height:80%; object-fit:contain; object-position:right bottom;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.35));
  transform-origin:80% 90%;
  transition:transform .8s cubic-bezier(.2,.8,.3,1);
}
/* Tamaño percibido: la sierra es 2:1 y la enchapadora casi 1:1. A la misma
   superficie, la sierra va √2 veces más ancha. */
.mcat-t--enchapado .mcat-t__img{ --ancho:50%; }
.mcat-t--corte .mcat-t__img{ --ancho:72%; filter:drop-shadow(0 26px 30px rgba(90,60,0,.3)); }
.mcat-t:hover .mcat-t__img{ transform:scale(1.05); }
.mcat-t:hover .mcat-t__ir svg{ transform:translateX(4px); }
.mcat-t:focus-visible{ outline:3px solid var(--blue); outline-offset:-6px; }
@media (max-width:520px){
  .mcat-t{ min-height:300px; }
  .mcat-t--enchapado .mcat-t__img{ --ancho:56%; }
  .mcat-t--corte .mcat-t__img{ --ancho:80%; }
}
/* Los botones bajan al bloque de su línea sin quedar tapados por el menú. */
.mbloque{ scroll-margin-top:var(--scroll-offset); }

/* ==========================================================================
   MENOS RECUADROS · 07/10/2026
   Juan: «necesito menos recuadros, eso se ve payaseado, como una feria».
   Eran cinco cajas de color seguidas (oferta, dos paneles de categoría,
   franja de línea y tarjetas) y ninguna mandaba. Ahora todo vive sobre la
   misma superficie clara y manda el producto:
     · categorías sin caja: la máquina flotando, el nombre grande debajo;
     · cabeceras de línea sin franja: titular y una frase sobre la página;
     · tarjetas en blanco liso, sin degradado.
   ========================================================================== */
.mcats{ gap:0; padding-inline:var(--sangria); margin-bottom:clamp(48px,6vw,96px);
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }
.mcat-t,
.mcat-t--enchapado,
.mcat-t--corte{
  background:none; color:var(--graphite);
  min-height:0; padding:0 clamp(20px,3vw,48px) clamp(8px,1vw,16px);
  display:grid; grid-template-rows:auto auto; align-content:start; justify-items:center; text-align:center;
}
.mcat-t:first-child{ padding-left:0; }
.mcat-t:last-child{ padding-right:0; }
@media (min-width:760px){ .mcat-t + .mcat-t{ border-left:1px solid rgba(11,13,18,.12); } }
@media (max-width:759px){
  .mcat-t{ padding:0 0 28px; }
  .mcat-t + .mcat-t{ padding-top:28px; border-top:1px solid rgba(11,13,18,.12); }
}
/* La máquina arriba, flotando, con la misma superficie aparente en las dos. */
.mcat-t__img{
  position:static; order:-1; display:block;
  width:auto; max-width:100%; height:clamp(170px,19vw,290px); max-height:none;
  object-fit:contain; margin-bottom:clamp(14px,1.6vw,24px);
  filter:drop-shadow(0 22px 24px rgba(11,13,18,.18)) !important;
  transform-origin:50% 90%;
}
.mcat-t--enchapado .mcat-t__img{ height:clamp(170px,19vw,290px); }
.mcat-t--corte .mcat-t__img{ height:clamp(120px,13.4vw,205px); margin-top:clamp(50px,5.6vw,85px); }
.mcat-t__txt{ justify-items:center; gap:6px; }
.mcat-t--enchapado .mcat-t__k,
.mcat-t--corte .mcat-t__k{ color:var(--blue); }
.mcat-t__n{ font-size:clamp(34px,3.8vw,64px); }
.mcat-t__p{ opacity:1; color:var(--slate); font-weight:600; }
.mcat-t__ir,
.mcat-t--enchapado .mcat-t__ir,
.mcat-t--corte .mcat-t__ir{
  height:auto; padding:6px 0; margin-top:4px; border-radius:0;
  background:none; color:var(--blue);
}

/* Cabecera de cada línea: sin franja de color. */
.mfranja,
.mfranja--enchapado,
.mfranja--corte{
  background:none; color:var(--graphite);
  margin:0; padding:clamp(28px,3vw,44px) var(--sangria) clamp(18px,2vw,28px);
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  border-top:1px solid rgba(11,13,18,.12);
}
.mfranja--enchapado .mfranja__s,
.mfranja--corte .mfranja__s{ color:var(--blue); }
.mfranja--enchapado .mfranja__f,
.mfranja--corte .mfranja__f{ color:var(--slate); }
.mfranja__t{ font-size:clamp(40px,4.6vw,76px); }
.mbloque + .mbloque{ margin-top:clamp(40px,5vw,80px); }

/* Tarjetas: blanco liso sobre la superficie clara. */
.mcard__link{ background:var(--white); }
/* Sin la franja de oferta arriba, la cabecera tiene que dejar el alto del
   menú: si no, el titular queda debajo de la barra. */
.mcat{ padding-top:calc(var(--nav-h) + clamp(32px,4.4vw,72px)); }

/* Las categorías vuelven a tener fondo de color (Juan: «si los vas a dejar
   así, prefiero que tengan fondo de color»), con la composición centrada:
   máquina arriba, nombre debajo. Paneles a sangre con el hueco de la casa. */
.mcats{ gap:var(--gap-unit); padding-inline:var(--gap-unit); }
.mcat-t,
.mcat-t:first-child,
.mcat-t:last-child{ padding:clamp(28px,3.4vw,56px) clamp(20px,3vw,48px) clamp(30px,3.4vw,52px); }
@media (min-width:760px){ .mcat-t + .mcat-t{ border-left:0; } }
@media (max-width:759px){ .mcat-t + .mcat-t{ border-top:0; padding-top:clamp(28px,3.4vw,56px); } }
.mcat-t--enchapado{ background:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%); color:var(--white); }
.mcat-t--corte{ background:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%); color:var(--graphite); }
.mcat-t--enchapado .mcat-t__k{ color:var(--yellow); }
.mcat-t--corte .mcat-t__k{ color:var(--blue); }
.mcat-t--enchapado .mcat-t__p{ color:rgba(255,255,255,.78); }
.mcat-t--corte .mcat-t__p{ color:rgba(11,13,18,.72); }
.mcat-t--enchapado .mcat-t__ir{ color:var(--yellow); }
.mcat-t--corte .mcat-t__ir{ color:var(--graphite); }
.mcat-t--enchapado .mcat-t__img{ filter:drop-shadow(0 26px 30px rgba(0,0,0,.45)) !important; }
.mcat-t--corte .mcat-t__img{ filter:drop-shadow(0 24px 26px rgba(90,60,0,.3)) !important; }

/* ==========================================================================
   CARRUSEL DE CATEGORÍAS A PANTALLA COMPLETA · 07/10/2026
   Tres secciones (Enchapadoras, Sierras, Paquetes) que se deslizan de lado.
   Scroll-snap nativo: el dedo manda y nada secuestra el scroll vertical.
   Cada una en el color de lo que vende; la máquina entra con un acercamiento
   cuando su sección queda al frente (clase `is-on`, la pone el JS).
   ========================================================================== */
.mslides{
  position:relative; margin-top:var(--nav-h);
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.mslides__pista{
  display:flex; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none;
}
.mslides__pista::-webkit-scrollbar{ display:none; }
.mslides__pista:focus-visible{ outline:3px solid var(--blue); outline-offset:-3px; }
.mslide{
  position:relative; overflow:hidden; flex:0 0 100%; scroll-snap-align:start;
  min-height:max(560px, calc(100svh - var(--nav-h)));
  display:grid; align-items:center; gap:clamp(16px,3vw,48px);
  padding:clamp(40px,6vw,96px) var(--sangria) clamp(96px,10vw,140px);
}
@media (min-width:900px){ .mslide{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); } }
.mslide--enchapado{ background:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%); color:var(--white); }
.mslide--corte{ background:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%); color:var(--graphite); }
.mslide--paquetes{ background:linear-gradient(155deg,#16226E 0%,#1E31A4 38%,#2C45D6 72%,#1B2A8C 100%); color:var(--white); }
.mslide__txt{ position:relative; z-index:2; display:grid; gap:14px; justify-items:start; }
.mslide__k{ font-family:var(--f-body); font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; }
.mslide--enchapado .mslide__k, .mslide--paquetes .mslide__k{ color:var(--yellow); }
.mslide--corte .mslide__k{ color:var(--blue); }
.mslide__n{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(44px,4.6vw,86px); line-height:.88; letter-spacing:-.04em; padding-top:.16em;
}
.mslide__f{ margin:0; max-width:36ch; font-size:clamp(16px,1.5vw,20px); line-height:1.55; opacity:.86; }
.mslide__d{ margin:0; font-size:clamp(17px,1.5vw,21px); font-weight:800; }
.mslide__d s{ font-weight:600; opacity:.6; margin-right:.4em; }
.mslide__txt .btn{ margin-top:8px; }
.mslide__arte{ position:relative; z-index:1; display:grid; place-items:center; min-width:0; }
.mslide__img{
  display:block; width:100%; height:auto; max-height:min(58svh,560px); object-fit:contain;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.4));
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .8s ease;
}
.mslide--corte .mslide__img{ filter:drop-shadow(0 30px 34px rgba(90,60,0,.32)); }
/* Paquetes: la pareja, una delante de la otra. */
.mslide__par{ position:relative; display:block; width:100%; aspect-ratio:16/10; }
.mslide__par .mslide__img{ position:absolute; max-height:none; }
.mslide__par .mslide__img--0{ left:0; top:6%; width:52%; z-index:2; }
.mslide__par .mslide__img--1{ right:0; bottom:4%; width:62%; }
/* Entrada de la sección al frente: la máquina se acerca y el texto sube. */
.mslides.js .mslide:not(.is-on) .mslide__img{ transform:scale(.9) translateY(14px); opacity:.35; }
.mslides.js .mslide__txt > *{ transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s ease; }
.mslides.js .mslide:not(.is-on) .mslide__txt > *{ transform:translateY(16px); opacity:0; }
.mslides.js .mslide.is-on .mslide__txt > :nth-child(2){ transition-delay:.06s; }
.mslides.js .mslide.is-on .mslide__txt > :nth-child(3){ transition-delay:.12s; }
.mslides.js .mslide.is-on .mslide__txt > :nth-child(4){ transition-delay:.18s; }
.mslides.js .mslide.is-on .mslide__txt > :nth-child(5){ transition-delay:.24s; }
@media (max-width:899px){
  .mslide{ align-content:start; padding-top:clamp(32px,8vw,56px); }
  .mslide__img{ max-height:34svh; }
}
@media (prefers-reduced-motion:reduce){
  .mslides__pista{ scroll-behavior:auto; }
  .mslides.js .mslide:not(.is-on) .mslide__img,
  .mslides.js .mslide:not(.is-on) .mslide__txt > *{ transform:none; opacity:1; }
}

/* Controles: flechas y puntos en una cápsula de vidrio, abajo al centro. */
.mslides__ctrl{
  position:absolute; left:50%; bottom:clamp(24px,3.4vw,44px); transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:10px; padding:6px;
  border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
}
.mslides__flecha{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:var(--graphite);
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.mslides__flecha:hover{ transform:scale(1.06); }
.mslides__puntos{ display:flex; gap:8px; padding-inline:4px; }
.mslides__punto{
  width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.55);
  transition:width .35s cubic-bezier(.2,.8,.3,1), background .3s ease;
}
.mslides__punto.is-on{ width:26px; background:var(--white); }
.mslides.en-amarillo .mslides__ctrl{ background:rgba(11,13,18,.12); border-color:rgba(11,13,18,.18); }
.mslides.en-amarillo .mslides__punto{ background:rgba(11,13,18,.35); }
.mslides.en-amarillo .mslides__punto.is-on{ background:var(--graphite); }

/* Con el carrusel arriba, la cabecera del catálogo vuelve a su aire normal. */
.mcat{ padding-top:clamp(48px,6vw,96px); }

/* ==========================================================================
   PROMO DEL MES · 07/10/2026
   Sección grande entre el catálogo y los paquetes. El color sale del dato:
   azul oscuro si la máquina es Titán, amarillo si es Urus.
   ========================================================================== */
.mpromo{
  margin-top:clamp(56px,7vw,110px); padding:clamp(56px,7vw,112px) 0;
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.mpromo--enchapado{ background:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%); color:var(--white); }
.mpromo--corte{ background:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%); color:var(--graphite); }
.mpromo__in{ display:grid; gap:clamp(28px,4vw,64px); align-items:center; padding-inline:var(--sangria); }
@media (min-width:900px){ .mpromo__in{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); } }
.mpromo__txt{ display:grid; gap:14px; justify-items:start; }
.mpromo__k{
  display:inline-block; padding:7px 12px; font-family:var(--f-body); font-weight:800; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase;
}
.mpromo--enchapado .mpromo__k{ background:var(--yellow); color:var(--graphite); }
.mpromo--corte .mpromo__k{ background:var(--graphite); color:var(--yellow); }
.mpromo__tipo{ font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.mpromo__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(56px,8vw,132px); line-height:.88; letter-spacing:-.04em;
}
.mpromo__precio{
  margin:4px 0 0; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  font-family:var(--f-display); font-size:clamp(36px,3.8vw,60px); line-height:1; letter-spacing:-.02em;
}
.mpromo--enchapado .mpromo__precio span{ color:var(--yellow); }
.mpromo__antes{ font-size:.5em; opacity:.6; }
.mpromo__inc{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:10px; }
.mpromo__inc li{ display:flex; gap:10px; align-items:center; font-size:16px; font-weight:600; }
.mpromo--enchapado .mpromo__inc svg{ color:var(--yellow); }
.mpromo--corte .mpromo__inc svg{ color:var(--blue); }
.mpromo__vig{ margin:0; font-size:15px; font-weight:700; opacity:.8; }
.mpromo__acc{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:10px; }
.mpromo__ficha{ display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:700; padding-block:12px; }
.mpromo--enchapado .mpromo__ficha{ color:var(--white); }
.mpromo--corte .mpromo__ficha{ color:var(--graphite); }
.mpromo__ficha svg{ transition:transform .25s cubic-bezier(.2,.8,.3,1); }
.mpromo__ficha:hover svg{ transform:translateX(3px); }
.mpromo__arte{ position:relative; margin:0; display:grid; place-items:center; }
.mpromo__img{ width:100%; height:auto; max-height:min(64vh,620px); object-fit:contain;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.4)); }
.mpromo--corte .mpromo__img{ filter:drop-shadow(0 30px 34px rgba(90,60,0,.32)); }
.mpromo .kt__i.accent{ --wipe-base:currentColor; }
/* Después de la promo, los paquetes arrancan con su propio aire. */
.mpromo + .mpacks{ padding-top:clamp(56px,7vw,110px); }

/* El carrusel, compacto como las fichas de línea del Home (Juan: «no
   pantalla completa, algo más compacto, menos alto»). */
.mslide{
  min-height:clamp(440px, 58svh, 600px);
  padding:clamp(36px,4.4vw,64px) var(--sangria) clamp(84px,7vw,104px);
}
.mslide__img{ max-height:min(44svh,420px); }
.mslides__ctrl{ bottom:clamp(18px,2.4vw,30px); }
@media (max-width:899px){
  .mslide{ min-height:0; padding-bottom:96px; }
  .mslide__img{ max-height:28svh; }
}

/* Las cabeceras de línea vuelven a su color (Juan: «esos títulos deberían ir
   en fondo azul oscuro y amarillo respectivamente»). Franjas a sangre con el
   hueco de la casa, alineadas con las tarjetas de abajo. */
.mfranja{ margin:0 var(--gap-unit) var(--gap-unit); border-top:0; padding:clamp(26px,3vw,44px) clamp(22px,2.6vw,44px); }
.mfranja--enchapado{ background:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%); color:var(--white); }
.mfranja--corte{ background:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%); color:var(--graphite); }
.mfranja--enchapado .mfranja__s{ color:var(--yellow); }
.mfranja--corte .mfranja__s{ color:var(--blue); }
.mfranja--enchapado .mfranja__f{ color:rgba(255,255,255,.78); }
.mfranja--corte .mfranja__f{ color:rgba(11,13,18,.72); }

/* ALINEACIÓN (07/10/2026). El titular del catálogo y el contenido de las
   franjas caen en la MISMA vertical: la sangría del sitio. La franja va a
   sangre con el hueco de la casa, así que su padding es la sangría menos ese
   hueco. Dentro, nombre y texto se centran entre sí en vez de flotar a
   alturas distintas; la frase arranca justo bajo el antetítulo. */
.mfranja{
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding:clamp(26px,3vw,40px) calc(var(--sangria) - var(--gap-unit));
}
@media (min-width:860px){
  .mfranja__in{ align-items:center; column-gap:clamp(28px,3.4vw,56px); row-gap:6px; }
  .mfranja__t{ grid-row:1 / 3; align-self:center; }
  .mfranja__s{ align-self:end; }
  .mfranja__f{ align-self:start; }
}
.mfranja__f{ max-width:46ch; }
.mcat__head{ margin-bottom:clamp(24px,3vw,40px); }

/* ==========================================================================
   FRANJAS DE LÍNEA CON PROFUNDIDAD · 07/10/2026
   Juan: «mejora el diseño de esto, más avanzado». Tres planos:
     fondo   · palabra fantasma a contorno (ENCHAPADO / CORTE), enorme
     medio   · la máquina sangrando por la derecha, recortada por la franja
     frente  · nombre, tipo, frase y el precio de entrada
   La franja recorta, así que la máquina sí puede desplazarse (paralaje con
   marco). Usa modelos distintos a los del carrusel para no repetir foto.
   ========================================================================== */
.mfranja{ position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(220px,22vw,320px); display:grid; align-items:center; }
.mfranja__in{ position:relative; z-index:3; }
@media (min-width:860px){ .mfranja__in{ max-width:62%; } }
.mfranja__fantasma{
  position:absolute; z-index:0; left:calc(var(--sangria) - var(--gap-unit) - .04em); bottom:-.2em;
  font-family:var(--f-display); text-transform:uppercase; white-space:nowrap;
  font-size:clamp(110px,15vw,240px); line-height:.8; letter-spacing:-.04em;
  color:transparent; pointer-events:none;
}
.mfranja--enchapado .mfranja__fantasma{ -webkit-text-stroke:1px rgba(255,255,255,.1); }
.mfranja--corte .mfranja__fantasma{ -webkit-text-stroke:1px rgba(11,13,18,.12); }
.mfranja__img{
  /* Centrado con top/height y no con transform: el transform es del paralaje. */
  position:absolute; z-index:1; right:-3%; top:6%;
  height:92%; width:auto; max-width:48%; object-fit:contain; object-position:right bottom;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.42));
  will-change:transform;
}
.mfranja--corte .mfranja__img{ filter:drop-shadow(0 22px 24px rgba(90,60,0,.3)); }
.mfranja__d{
  grid-column:2; margin:8px 0 0; display:flex; align-items:baseline; gap:10px;
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(24px,2.2vw,34px); line-height:1; letter-spacing:-.01em;
}
.mfranja__d span{ font-family:var(--f-body); font-weight:700; font-size:13px; letter-spacing:.12em; opacity:.7; }
.mfranja--enchapado .mfranja__d{ color:var(--yellow); }
@media (max-width:859px){
  .mfranja{ min-height:0; padding-bottom:clamp(120px,32vw,170px); }
  .mfranja__img{ top:auto; bottom:-8%; transform:none; height:auto; width:min(62%,300px); max-width:none; }
  .mfranja__d{ grid-column:auto; }
  .mfranja__fantasma{ font-size:96px; }
}
@media (min-width:860px){ .mfranja__d{ grid-column:2; } }

/* ==========================================================================
   PAQUETES SIN MEDIAS BANDERAS · 07/10/2026
   Juan: «puede ser fondo azul Maquimaderas para las dos máquinas, así no se
   ve el azul oscuro y amarillo tan apayasado». Un paquete es de la EMPRESA,
   no de una línea: va en el azul de marca. Las dos máquinas juntas sobre un
   solo fondo, como pareja, una un poco delante de la otra.
   El de tope de gama es entero azul de marca (arte y cuerpo), así se distingue
   de los otros dos sin usar el marino, que es de la línea Titán.
   ========================================================================== */
.mpack__arte{
  gap:0; position:relative; overflow:hidden; padding:clamp(14px,1.6vw,24px);
  background:linear-gradient(155deg,#16226E 0%,#1E31A4 38%,#2C45D6 72%,#1B2A8C 100%);
}
.mpack__mitad--enchapado,
.mpack__mitad--corte{ background:none; padding:0; overflow:visible; }
.mpack__mitad .mcard__img{ filter:drop-shadow(0 18px 20px rgba(0,0,0,.4)); }
.mpack__mitad:first-child{ z-index:2; transform:translateX(8%); }
.mpack__mitad:last-child{ transform:translateX(-6%) scale(1.06); }
.mpack__mitad .mprov{ font-size:13px; padding:4px 8px; left:auto; right:-6%; }

/* El paquete de tope de gama va en blanco como los otros (Juan: «el tercero
   no me gusta que sea todo azul»). Lo distingue una etiqueta amarilla sobre
   la foto, no el color de toda la tarjeta. */
.mpack__sello{
  position:absolute; z-index:4; left:clamp(14px,1.6vw,24px); top:clamp(14px,1.6vw,24px);
  padding:7px 12px; background:var(--yellow); color:var(--graphite);
  font-family:var(--f-body); font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
}

/* EL NIVEL ES EL TÍTULO DEL PAQUETE (07/10/2026). Juan: «este texto debe ser
   más importante, es casi el título del paquete». «Nivel inicio / intermedio
   / pro» pasa a titular grande en Fugaz y el nombre del paquete queda como
   línea de apoyo debajo. */
.mpack__k,
.mpack--top .mpack__k{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(32px,3vw,48px); line-height:.95; letter-spacing:-.025em;
  color:var(--graphite); padding-top:.16em;
}
.mpack__t{
  font-family:var(--f-body); text-transform:none; letter-spacing:0;
  font-size:clamp(17px,1.3vw,20px); font-weight:700; line-height:1.3; padding-top:0;
  color:var(--blue);
}

/* ==========================================================================
   CONTROLES DEL CARRUSEL, v2 · 07/10/2026
   Juan: «mejorar el diseño de esto». Los puntos sin texto no decían nada:
   ahora son pestañas con el nombre de cada sección (la activa en cápsula
   rellena, las otras tenues), alineadas con el texto a la izquierda. Las
   flechas, a la derecha, son círculos de contorno fino que se rellenan al
   pasar. Claro sobre azul, grafito sobre amarillo.
   ========================================================================== */
.mslides__ctrl{
  left:var(--sangria); right:var(--sangria); transform:none;
  justify-content:space-between; gap:16px; padding:0;
  background:none; border:0; border-radius:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color:var(--white);
}
.mslides.en-amarillo .mslides__ctrl{ background:none; border:0; color:var(--graphite); }
.mslides__puntos{ display:flex; gap:4px; padding:4px; border-radius:999px;
  background:rgba(255,255,255,.1); }
.mslides.en-amarillo .mslides__puntos{ background:rgba(11,13,18,.08); }
.mslides__punto,
.mslides.en-amarillo .mslides__punto{
  width:auto; height:38px; padding:0 16px; border-radius:999px;
  background:transparent; color:inherit; opacity:.62;
  font-family:var(--f-body); font-weight:700; font-size:14px; letter-spacing:.02em;
  transition:background .3s ease, color .3s ease, opacity .3s ease;
}
.mslides__punto:hover{ opacity:1; }
.mslides__punto.is-on{ width:auto; opacity:1; background:var(--white); color:var(--graphite); }
.mslides.en-amarillo .mslides__punto.is-on{ background:var(--graphite); color:var(--white); }
.mslides__flechas{ display:flex; gap:10px; }
.mslides__flecha{
  width:48px; height:48px; background:transparent; color:inherit;
  border:1.5px solid currentColor; opacity:.8;
  transition:background .25s ease, color .25s ease, opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.mslides__flecha:hover{ opacity:1; background:var(--white); color:var(--graphite); border-color:var(--white); transform:none; }
.mslides.en-amarillo .mslides__flecha:hover{ background:var(--graphite); color:var(--yellow); border-color:var(--graphite); }
.mslides__punto:focus-visible, .mslides__flecha:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
@media (max-width:599px){
  .mslides__flechas{ display:none; }
  .mslides__ctrl{ justify-content:center; }
  .mslides__punto, .mslides.en-amarillo .mslides__punto{ padding:0 12px; font-size:13px; }
}

/* ==========================================================================
   CARRUSEL, v3 · TRANSICIÓN DE PRESENTACIÓN · 07/10/2026
   Juan: «es como feo el efecto de scroll lateral, mejóralo más premium».
   Fuera el desplazamiento lateral nativo. Las tres secciones quedan apiladas
   en la misma celda y se cruzan: el fondo se funde de un color al otro, la
   máquina que sale se aleja desenfocándose y la que entra llega desde la
   derecha, de desenfocada a nítida; el texto sube en cascada. El gesto con
   el dedo lo interpreta el JS (deslizar a un lado cambia de sección).
   ========================================================================== */
.mslides.js .mslides__pista{
  display:grid; overflow:hidden; scroll-snap-type:none; touch-action:pan-y;
}
.mslides.js .mslide{
  grid-area:1 / 1; scroll-snap-align:none;
  opacity:0; visibility:hidden;
  transition:opacity .9s cubic-bezier(.4,0,.2,1), visibility 0s linear .9s;
}
.mslides.js .mslide.is-on{
  opacity:1; visibility:visible; z-index:1;
  transition:opacity .9s cubic-bezier(.4,0,.2,1), visibility 0s;
}
/* La máquina: entra desde la derecha y se enfoca; sale hacia la izquierda. */
.mslides.js .mslide .mslide__img{
  transition:transform 1.2s cubic-bezier(.16,1,.3,1), opacity .9s ease, filter .9s ease;
}
.mslides.js .mslide:not(.is-on) .mslide__img{
  transform:translateX(calc(var(--dir, 1) * 9%)) scale(.94); opacity:0; filter:blur(10px);
}
.mslides.js .mslide.is-on .mslide__img{ transform:none; opacity:1; filter:drop-shadow(0 34px 40px rgba(0,0,0,.4)); }
.mslides.js .mslide--corte.is-on .mslide__img{ filter:drop-shadow(0 30px 34px rgba(90,60,0,.32)); }
/* El texto sube en cascada al entrar. */
.mslides.js .mslide__txt > *{ transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
.mslides.js .mslide:not(.is-on) .mslide__txt > *{ transform:translateY(22px); opacity:0; transition-delay:0s !important; }
.mslides.js .mslide.is-on .mslide__txt > :nth-child(1){ transition-delay:.15s; }
.mslides.js .mslide.is-on .mslide__txt > :nth-child(2){ transition-delay:.22s; }
.mslides.js .mslide.is-on .mslide__txt > :nth-child(3){ transition-delay:.29s; }
.mslides.js .mslide.is-on .mslide__txt > :nth-child(4){ transition-delay:.36s; }
.mslides.js .mslide.is-on .mslide__txt > :nth-child(5){ transition-delay:.43s; }
.mslides__ctrl{ z-index:5; }
@media (prefers-reduced-motion:reduce){
  .mslides.js .mslide, .mslides.js .mslide .mslide__img, .mslides.js .mslide__txt > *{ transition:none !important; }
}

/* El titular de paquetes en un solo renglón donde cabe (Juan: «se ve mal
   distribuido, en un renglón cabe»). La caja de la cabecera tenía tope de
   ancho; el titular lo pasa y no parte línea en escritorio. */
@media (min-width:900px){
  .mpacks__head{ max-width:none; }
  .mpacks__t{ white-space:nowrap; font-size:clamp(30px,3.4vw,52px); }
}

/* ==========================================================================
   PROMO DEL MES, v2 · VITRINA · 07/10/2026
   Juan: «quiero un diseño más exótico, más bonito y que destaque».
     · cinta animada arriba, a todo el ancho, corriendo sin parar;
     · la máquina flotando sobre una tarima con la forma del alero del logo,
       con «OFERTA» gigante a contorno detrás;
     · el precio como sello inclinado pegado a la máquina;
     · el nombre enorme con el barrido amarillo del Home.
   Los colores salen de la línea de la máquina (dato): marino si es Titán,
   amarillo si es Urus.
   ========================================================================== */
.mpromo2{
  position:relative; overflow:hidden; margin-top:clamp(56px,7vw,110px);
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --acento:var(--yellow); --tinta:var(--white);
}
.mpromo2--enchapado{ background:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%); color:var(--white); }
.mpromo2--corte{ background:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%); color:var(--graphite); --acento:var(--graphite); --tinta:var(--graphite); }

/* La cinta. */
.mpromo2__cinta{ overflow:hidden; background:var(--yellow); color:var(--graphite); border-bottom:1px solid rgba(0,0,0,.12); }
.mpromo2--corte .mpromo2__cinta{ background:var(--graphite); color:var(--yellow); }
.mpromo2__pista{ display:flex; width:max-content; animation:mpromoCinta 38s linear infinite; }
.mpromo2__pista span{
  display:inline-flex; align-items:center; gap:22px; padding:13px 22px 13px 0; white-space:nowrap;
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(17px,1.5vw,22px); letter-spacing:.01em;
}
.mpromo2__pista i{ width:9px; height:9px; transform:rotate(45deg); background:currentColor; display:inline-block; }
@keyframes mpromoCinta{ to{ transform:translateX(-50%); } }

.mpromo2__in{
  display:grid; gap:clamp(30px,4vw,64px); align-items:center;
  padding:clamp(48px,6vw,96px) var(--sangria) clamp(56px,7vw,110px);
}
@media (min-width:900px){ .mpromo2__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); } }
.mpromo2__txt{ position:relative; z-index:2; display:grid; gap:16px; justify-items:start; }
.mpromo2__tipo{ font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.mpromo2__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(64px,9vw,150px); line-height:.86; letter-spacing:-.045em;
}
.mpromo2--enchapado .mpromo2__t .kt__i.accent{ --wipe-base:rgba(255,255,255,.22); }
.mpromo2--corte .mpromo2__t .kt__i.accent{
  background-image:linear-gradient(90deg, var(--graphite) 0, var(--graphite) 50%, rgba(11,13,18,.2) 50%, rgba(11,13,18,.2) 100%);
}
.mpromo2__inc{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.mpromo2__inc li{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
  font-size:15px; font-weight:700;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
}
.mpromo2--corte .mpromo2__inc li{ background:rgba(11,13,18,.07); border-color:rgba(11,13,18,.16); }
.mpromo2__inc svg{ color:var(--acento); }
.mpromo2__acc{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:12px; }
.mpromo2__ficha{ display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:700; padding-block:12px; color:inherit; }
.mpromo2__ficha svg{ transition:transform .25s cubic-bezier(.2,.8,.3,1); }
.mpromo2__ficha:hover svg{ transform:translateX(3px); }

/* La escena: fantasma, tarima, máquina y sello. */
.mpromo2__escena{ position:relative; min-height:clamp(320px,36vw,520px); display:grid; place-items:center; }
.mpromo2__fantasma{
  position:absolute; inset:auto -10% 30% auto; z-index:0;
  font-family:var(--f-display); text-transform:uppercase; white-space:nowrap;
  font-size:clamp(120px,16vw,280px); line-height:.8; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.12);
}
.mpromo2--corte .mpromo2__fantasma{ -webkit-text-stroke-color:rgba(11,13,18,.14); }
/* La tarima tiene el perfil del alero del logo, invertido: la máquina se
   apoya en la marca. */
.mpromo2__tarima{
  position:absolute; z-index:1; left:6%; right:6%; bottom:8%; height:clamp(46px,5vw,76px);
  background:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%);
  clip-path:polygon(0 0, 100% 0, 100% 40%, 89.45% 40%, 49.88% 100%, 10.55% 40%, 0 40%);
}
.mpromo2--corte .mpromo2__tarima{ background:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%); }
.mpromo2__arte{ position:relative; z-index:2; margin:0 0 clamp(40px,4.4vw,68px); width:min(100%,640px); }
.mpromo2__arte img{
  display:block; width:100%; height:auto; max-height:min(52vh,460px); object-fit:contain;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.45));
  animation:mpromoFlota 6s ease-in-out infinite;
}
.mpromo2--corte .mpromo2__arte img{ filter:drop-shadow(0 26px 30px rgba(90,60,0,.32)); }
@keyframes mpromoFlota{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.mpromo2__arte .mprov{ left:auto; right:0; bottom:0; }
/* El sello del precio, inclinado, pegado a la máquina. */
.mpromo2__sello{
  position:absolute; z-index:3; right:2%; top:4%; margin:0;
  display:grid; justify-items:center; gap:2px; padding:16px 22px 22px;
  background:var(--yellow); color:var(--graphite);
  clip-path:polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
  transform:rotate(-5deg);
  box-shadow:none; filter:drop-shadow(0 14px 18px rgba(0,0,0,.3));
}
.mpromo2--corte .mpromo2__sello{ background:var(--graphite); color:var(--yellow); }
.mpromo2__sello span{ font-family:var(--f-body); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.mpromo2__sello b{ font-family:var(--f-display); font-weight:400; font-size:clamp(30px,3vw,46px); line-height:1; letter-spacing:-.02em; }
.mpromo2__sello s{ font-family:var(--f-body); font-size:14px; font-weight:700; opacity:.6; }
@media (max-width:899px){
  .mpromo2__escena{ min-height:300px; }
  .mpromo2__sello{ top:-4%; right:0; }
  .mpromo2__fantasma{ font-size:110px; }
}
@media (prefers-reduced-motion:reduce){
  .mpromo2__pista, .mpromo2__arte img{ animation:none; }
}
.mpromo2 + .mpacks{ padding-top:clamp(56px,7vw,110px); }
/* La máquina se apoya en la tarima; la tilde del nombre no toca el tipo. */
.mpromo2__arte{ margin-bottom:clamp(22px,2.6vw,40px); }
.mpromo2__tarima{ bottom:10%; }
.mpromo2__t{ padding-top:.22em; }
/* Sin tarima (Juan: «se ve random»). La máquina flota con una sombra suave de
   piso debajo: es la única excepción de degradado radial del sitio, porque es
   una sombra proyectada y no un fondo. */
.mpromo2__arte{ margin-bottom:0; }
.mpromo2__arte::after{
  content:""; position:absolute; z-index:-1; left:14%; right:14%; bottom:-6%; height:18%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.45), rgba(0,0,0,0) 70%);
  animation:mpromoSombra 6s ease-in-out infinite;
}
.mpromo2--corte .mpromo2__arte::after{ background:radial-gradient(ellipse at center, rgba(90,60,0,.35), rgba(90,60,0,0) 70%); }
@keyframes mpromoSombra{ 0%,100%{ transform:scaleX(1); opacity:1; } 50%{ transform:scaleX(.9); opacity:.75; } }
@media (prefers-reduced-motion:reduce){ .mpromo2__arte::after{ animation:none; } }
/* La ventana de la cortina (overflow:hidden) cortaba la inclinación de Fugaz
   por la derecha: el «2» de TITÁN 2 salía mordido. Se le da aire a la caja y
   se devuelve con margen negativo, así la línea no se mueve. */
.mpromo2__t .kt__l{ padding-right:.14em; margin-right:-.14em; padding-bottom:.06em; margin-bottom:-.06em; }
/* La cinta, más lenta (Juan: «esto sí, pero más lento»). */
.mpromo2__pista{ animation-duration:75s; }
/* Lo que incluye vuelve a ser lista simple, sin cápsulas (Juan: «no me
   gustan esos pills, me gustaba como antes»). */
.mpromo2__inc{ display:grid; gap:10px; }
.mpromo2__inc li,
.mpromo2--corte .mpromo2__inc li{ padding:0; border:0; border-radius:0; background:none; font-size:16px; font-weight:600; gap:10px; }
/* Vitrina más baja (Juan: «toda la sección debe ser menos alta»). */
.mpromo2__in{ padding:clamp(32px,3.6vw,56px) var(--sangria) clamp(36px,4vw,64px); gap:clamp(24px,3vw,48px); }
.mpromo2__escena{ min-height:clamp(260px,26vw,380px); }
.mpromo2__arte img{ max-height:min(40vh,360px); }
.mpromo2__t{ font-size:clamp(56px,7vw,116px); }
.mpromo2__txt{ gap:12px; }

/* Franja de Paquetes, hermana de las de Titán y Urus (07/10/2026). Azul de
   marca; la pareja de máquinas a la derecha. */
.mfranja--paquetes{ background:linear-gradient(155deg,#16226E 0%,#1E31A4 38%,#2C45D6 72%,#1B2A8C 100%); color:var(--white); }
.mfranja--paquetes .mfranja__s{ color:var(--yellow); }
.mfranja--paquetes .mfranja__f{ color:rgba(255,255,255,.8); }
.mfranja--paquetes .mfranja__fantasma{ -webkit-text-stroke:1px rgba(255,255,255,.12); }
.mfranja--paquetes .mfranja__img--a{ right:24%; height:84%; top:10%; z-index:2; }
.mfranja--paquetes .mfranja__img--b{ right:-3%; height:78%; top:14%; }
@media (max-width:859px){
  .mfranja--paquetes .mfranja__img--a{ right:auto; left:4%; width:44%; bottom:-6%; top:auto; height:auto; }
  .mfranja--paquetes .mfranja__img--b{ width:58%; bottom:-4%; top:auto; height:auto; }
}
/* La sección de paquetes arranca con la franja, no con una cabecera
   centrada. */
.mpacks{ padding-top:clamp(40px,5vw,80px); }
.mpromo2 + .mpacks{ padding-top:clamp(40px,5vw,80px); }
.mpacks .mfranja{ margin-bottom:var(--gap-unit); }
/* El barrido amarillo se pinta con background-clip:text, y el fondo termina
   en el borde de la caja: la inclinación de Fugaz se sale por la derecha y
   esa punta quedaba sin pintar (el «2» de TITÁN 2 salía mordido). Se agranda
   la caja del fondo y se devuelve con margen negativo. */
.kt__i.accent{ padding-right:.18em; margin-right:-.18em; }
@media (min-width:860px){
  .mfranja--paquetes .mfranja__in{ max-width:50%; }
  .mfranja--paquetes .mfranja__img--a{ right:24%; height:70%; top:16%; max-width:30%; }
  .mfranja--paquetes .mfranja__img--b{ right:-2%; height:66%; top:20%; max-width:32%; }
}
@media (min-width:860px){
  .mfranja--paquetes .mfranja__in{ max-width:58%; }
  .mfranja--paquetes .mfranja__img--a{ right:21%; max-width:26%; }
  .mfranja--paquetes .mfranja__img--b{ max-width:28%; }
}

/* Franja de Paquetes en claro (Juan: «este sí va con fondo claro, blanco con
   gradiente muy sutil») y sin hueco vacío encima: arranca pegada a la promo,
   con el mismo aire de la retícula. */
.mfranja--paquetes{ background:linear-gradient(155deg,#FFFFFF 0%,#F1F4FA 60%,#E6EBF5 100%); color:var(--graphite); }
.mfranja--paquetes .mfranja__s{ color:var(--blue); }
.mfranja--paquetes .mfranja__f{ color:var(--slate); }
.mfranja--paquetes .mfranja__fantasma{ -webkit-text-stroke:1px rgba(11,13,18,.08); }
.mfranja--paquetes .mfranja__img{ filter:drop-shadow(0 22px 24px rgba(11,13,18,.2)); }
.mpacks,
.mpromo2 + .mpacks{ padding-top:var(--gap-unit); }

/* ==========================================================================
   FICHA EN PREPARACIÓN (07/10/2026)
   Para modelos con `"fichaLista": false`: la misma URL, en el color de su
   línea, con el nombre y la salida a WhatsApp. Sin datos inventados.
   ========================================================================== */
.pdp-prep{
  position:relative; overflow:hidden; margin-top:0; text-align:left;
  min-height:min(78svh,760px); display:flex; align-items:center;
  padding-block:clamp(96px,12vw,170px) clamp(80px,10vw,140px);
}
.pdp-prep__in{ position:relative; z-index:1; padding-inline:var(--sangria); display:grid; gap:18px; max-width:calc(var(--maxw) + 2 * var(--gutter)); width:100%; }
.pdp-prep__k{ margin:0; font-weight:700; font-size:14px; letter-spacing:.11em; text-transform:uppercase; opacity:.78; }
.pdp-prep__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(56px,9vw,132px); line-height:.92; letter-spacing:-.03em; padding-top:.08em;
}
.pdp-prep__p{ margin:0; max-width:34em; font-size:clamp(16px,1.35vw,19px); line-height:1.55; }
.pdp-prep__acc{ justify-content:flex-start; margin-top:8px; }
.pdp-prep__fantasma{
  position:absolute; z-index:0; right:-.06em; bottom:-.18em;
  font-family:var(--f-display); text-transform:uppercase; white-space:nowrap;
  font-size:clamp(150px,26vw,420px); line-height:.8; letter-spacing:-.04em;
  color:transparent; pointer-events:none;
}
.pdp-cierre--enchapado .pdp-prep__fantasma{ -webkit-text-stroke:1px rgba(255,255,255,.1); }
.pdp-cierre--corte .pdp-prep__fantasma{ -webkit-text-stroke:1px rgba(11,13,18,.13); }
.pdp-cierre--enchapado .pdp-prep__k{ color:var(--yellow); opacity:1; }

/* ==========================================================================
   ÚLTIMAS UNIDADES (10/10/2026)
   Lo marca el inventario del portal cuando quedan 1 o 2 en bodega.
   ========================================================================== */
.mcard__estado--ultimas{ color:#B42318; }
.pdp-disp__c--ultimas{ color:#B42318; font-weight:700; }

/* Otras de la línea en celular y tableta: la retícula es de 2 columnas, así que
   la tercera tarjeta quedaba sola con un hueco al lado. Se muestran las dos más
   cercanas en precio; la tercera vuelve desde 700 px, con 3 columnas. */
@media (max-width:699px){
  .pdp-otras__grid > :nth-child(n+3){ display:none; }
}

/* ---------- Oferta del mes: primera diapositiva, en grande (29/10/2026) ----------
   Juan: «le quitaste mucho el estilo, debe verse bien, es un home
   impactante». Vuelve la cinta que corre, el nombre enorme, «OFERTA» a
   contorno detrás de la máquina y el sello del precio. */
.mslide--oferta{ padding-top:clamp(84px,9vw,132px); }
.mslide__cinta{
  position:absolute; z-index:3; left:0; right:0; top:0; overflow:hidden;
  background:var(--yellow); color:var(--graphite);
}
.mslide--corte .mslide__cinta{ background:var(--graphite); color:var(--yellow); }
.mslide__pista{ display:flex; width:max-content; animation:mpromoCinta 75s linear infinite; }
.mslide__pista span{
  display:inline-flex; align-items:center; gap:22px; padding:12px 22px 12px 0; white-space:nowrap;
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(16px,1.4vw,21px);
}
.mslide__pista i{ width:9px; height:9px; transform:rotate(45deg); background:currentColor; display:inline-block; }
.mslide--oferta .mslide__n{ font-size:clamp(64px,8.4vw,148px); line-height:.86; padding-top:.2em; }
.mslide--oferta .mslide__f{ opacity:.8; font-weight:600; }
.mslide__inc{ list-style:none; margin:2px 0 0; padding:0; display:grid; gap:9px; font-size:16px; font-weight:600; }
.mslide__inc li{ display:flex; align-items:center; gap:10px; }
.mslide--enchapado .mslide__inc svg{ color:var(--yellow); }
.mslide--corte .mslide__inc svg{ color:var(--graphite); }
.mslide--oferta .mslide__arte{ min-height:clamp(260px,30vw,460px); }
.mslide--oferta .mslide__img{ position:relative; z-index:2; max-height:min(46svh,440px); }
.mslide__fantasma{
  position:absolute; z-index:0; right:-6%; bottom:26%; white-space:nowrap;
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(110px,15vw,260px);
  line-height:.8; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.14);
}
.mslide--corte .mslide__fantasma{ -webkit-text-stroke-color:rgba(11,13,18,.16); }
.mslide__sello{
  position:absolute; z-index:3; right:2%; top:2%; margin:0;
  display:grid; justify-items:center; gap:2px; padding:16px 22px 24px;
  background:var(--yellow); color:var(--graphite);
  clip-path:polygon(0 0,100% 0,100% 86%,50% 100%,0 86%);
  transform:rotate(-5deg); filter:drop-shadow(0 14px 18px rgba(0,0,0,.3));
}
.mslide--corte .mslide__sello{ background:var(--graphite); color:var(--yellow); }
.mslide__sello span{ font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.mslide__sello b{ font-family:var(--f-display); font-weight:400; font-size:clamp(28px,3vw,46px); line-height:1; letter-spacing:-.02em; }
.mslide__sello s{ font-size:14px; font-weight:700; opacity:.6; }
@media (max-width:899px){
  .mslide--oferta .mslide__arte{ min-height:260px; }
  .mslide__sello{ top:-6%; }
  .mslide__fantasma{ font-size:96px; }
}
@media (prefers-reduced-motion:reduce){ .mslide__pista{ animation:none; } }
/* El nombre de la oferta NUNCA se parte en dos renglones: una sola línea, y
   el tamaño se ajusta al ancho de la columna según cuántas letras tiene
   (`--n`, puesto por el generador). */
.mslide--oferta .mslide__txt{ container-type:inline-size; }
.mslide--oferta .mslide__n{
  white-space:nowrap;
  font-size:min(148px, calc(142cqi / var(--n, 8)));
}

/* Paquetes: el botón siempre al fondo, aunque el nombre ocupe dos renglones. */
.mpack{ display:flex; flex-direction:column; }
.mpack__cuerpo{ flex:1; display:flex; flex-direction:column; gap:12px; }
.mpack__cuerpo .btn{ margin-top:auto; }

/* ---------- Cierre de la tienda (29/10/2026) ----------
   Juan: «esto no se ve bien, mejor diseño, al nivel del Home». Caja a sangre
   con el azul de marca, titular enorme en dos líneas, las dos líneas de
   máquinas a la derecha, botón amarillo y el horario en una placa. */
.mcierre{ background:var(--paper); padding:0 var(--gap-unit) var(--gap-unit); }
.mcierre__caja{
  position:relative; overflow:hidden; isolation:isolate;
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding:clamp(48px,6vw,96px) calc(var(--sangria) - var(--gap-unit));
  min-height:clamp(380px,38vw,560px); display:grid; align-items:center;
  background:linear-gradient(155deg,#16226E 0%,#1E31A4 38%,#2C45D6 72%,#1B2A8C 100%); color:var(--white);
}
.mcierre__txt{ position:relative; z-index:3; display:grid; gap:22px; justify-items:start; }
@media (min-width:900px){ .mcierre__txt{ max-width:58%; } }
.mcierre__t{
  margin:0; font-family:var(--f-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(46px,6.4vw,104px); line-height:.92; letter-spacing:-.03em; padding-top:.14em;
}
.mcierre__t span{ display:block; color:var(--yellow); white-space:nowrap; font-size:.62em; letter-spacing:-.02em; margin-top:.1em; }
.btn--ghost-claro{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.4); }
.btn--ghost-claro:hover{ background:var(--white); color:var(--blue); border-color:var(--white); }
.mcierre__acc{ justify-content:flex-start; margin:0; }
.mcierre__hora{
  display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0; padding:10px 18px;
  font-size:15px; line-height:1.3; border-radius:99px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
}
.mcierre__hora svg{ fill:none; stroke:var(--yellow); stroke-width:1.8; stroke-linecap:round; flex:none; }
.mcierre__hora b{ font-weight:700; }
.mcierre__hora i{ width:1px; height:16px; background:rgba(255,255,255,.3); }
.mcierre__img{
  position:absolute; z-index:1; object-fit:contain; height:auto;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.45));
}
.mcierre__img--a{ right:22%; top:8%; width:min(26%,360px); z-index:2; }
.mcierre__img--b{ right:-2%; bottom:6%; width:min(38%,520px); }
@media (max-width:899px){
  .mcierre__caja{ padding-bottom:clamp(190px,50vw,280px); }
  .mcierre__img--a{ right:auto; left:2%; top:auto; bottom:-4%; width:44%; }
  .mcierre__img--b{ right:-4%; bottom:-2%; width:58%; }
  .mcierre__hora{ border-radius:18px; }
  .mcierre__hora i{ display:none; }
}

/* ==========================================================================
   PRIMERA PANTALLA DE LA TIENDA: CUATRO FRANJAS (29/10/2026)
   Diseñada desde el celular: al entrar se ven las cuatro categorías sin hacer
   scroll (oferta del mes, Titán, Urus, paquetes) y un toque baja a su
   sección. En escritorio pasan a una retícula de 2 × 2 con el mismo hueco de
   10px del resto del sitio. La oferta va en grafito y no en un color propio:
   está, pero no es lo más especial.
   ========================================================================== */
.mbands{
  margin-top:var(--nav-h); padding:var(--gap-unit); display:grid; gap:var(--gap-unit);
  grid-auto-rows:minmax(118px,1fr);
  height:calc(100svh - var(--nav-h)); min-height:520px;
}
.mband{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; padding:16px 20px;
  color:var(--white); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.mband--oferta{ background:linear-gradient(155deg,#1A1D26 0%,#0B0D12 100%); }
.mband--titan{ background:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%); }
.mband--urus{ background:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%); color:var(--graphite); }
.mband--paquetes{ background:linear-gradient(155deg,#16226E 0%,#1E31A4 38%,#2C45D6 72%,#1B2A8C 100%); }
.mband__txt{ position:relative; z-index:2; display:grid; gap:4px; max-width:58%; }
.mband__k{ font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); }
.mband--urus .mband__k{ color:var(--blue); }
.mband__n{
  font-family:var(--f-display); text-transform:uppercase; line-height:.9; letter-spacing:-.02em;
  font-size:clamp(30px,9vw,46px); padding-top:.12em; white-space:nowrap;
}
.mband__n i{ display:block; font-style:inherit; font-size:.42em; letter-spacing:.01em; margin-bottom:.06em; }
.mband__d{ font-weight:800; font-size:15px; margin-top:2px; }
.mband__d s{ font-weight:600; opacity:.55; margin-right:6px; }
.mband--oferta .mband__d{ color:var(--yellow); }
.mband__arte{
  position:absolute; z-index:1; right:44px; top:8%; bottom:8%; width:46%;
  display:flex; align-items:center; justify-content:flex-end; pointer-events:none;
}
.mband__arte img{
  max-width:100%; max-height:100%; object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.4));
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.mband--urus .mband__arte img{ filter:drop-shadow(0 12px 16px rgba(90,60,0,.3)); }
.mband__par{ position:absolute; max-height:80% !important; }
.mband__par--0{ right:34%; top:4%; z-index:2; width:56%; }
.mband__par--1{ right:0; bottom:4%; width:66%; }
.mband__ir{
  position:absolute; z-index:3; right:12px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.35); color:currentColor;
  transition:background .25s, color .25s, transform .25s;
}
.mband__ir svg{ transform:rotate(90deg); }
.mband--urus .mband__ir{ border-color:rgba(11,13,18,.3); }
.mband:hover .mband__arte img, .mband:focus-visible .mband__arte img{ transform:scale(1.05); }
.mband:hover .mband__ir{ background:var(--yellow); color:var(--graphite); border-color:var(--yellow); }
.mband--urus:hover .mband__ir{ background:var(--graphite); color:var(--yellow); border-color:var(--graphite); }
.mband:focus-visible{ outline:3px solid var(--yellow); outline-offset:-3px; }

/* Escritorio: lo mismo, en 2 × 2 y a mayor escala. */
@media (min-width:900px){
  .mbands{ grid-template-columns:1fr 1fr; grid-auto-rows:1fr; min-height:560px; max-height:900px; }
  .mband{ padding:clamp(28px,3vw,48px); align-items:flex-end; }
  .mband__txt{ gap:8px; max-width:52%; }
  .mband__k{ font-size:14px; }
  .mband__n{ font-size:clamp(44px,4.6vw,84px); }
  .mband__d{ font-size:clamp(17px,1.5vw,22px); }
  .mband__arte{ right:4%; top:10%; bottom:10%; width:52%; }
  .mband__ir{ top:auto; bottom:clamp(28px,3vw,48px); right:clamp(28px,3vw,48px); transform:none; width:48px; height:48px; }
}

/* La oferta grande, ahora justo debajo de las franjas. */
.mbands + .mpromo2{ margin-top:0; }
.mpromo2, .mbloque, .mpacks{ scroll-margin-top:var(--nav-h); }
/* Celular: el texto tiene su mitad y la máquina la otra; no se pisan. */
@media (max-width:899px){
  .mband__txt{ max-width:none; width:56%; }
  .mband__k{ font-size:11px; letter-spacing:.08em; white-space:nowrap; }
  .mband__n{ font-size:clamp(28px,8.4vw,42px); }
  .mband__arte{ left:54%; right:50px; width:auto; }
  .mband__par--0{ right:30%; width:62%; }
  .mband__par--1{ width:72%; }
}
/* Escritorio (29/10/2026). Juan: igual que en el celular, cuatro franjas
   apiladas a lo ancho: la oferta del mes arriba y debajo Titán, Urus y
   paquetes. */
@media (min-width:900px){
  .mbands{ grid-template-columns:1fr; grid-auto-rows:1fr; }
  .mband{ align-items:center; padding:0 calc(max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) - var(--gap-unit)); }
  .mband__txt{ max-width:50%; }
  .mband__arte{ left:auto; right:calc(max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) + 60px); top:8%; bottom:8%; width:44%; }
  .mband__ir{ top:50%; bottom:auto; transform:translateY(-50%); right:calc(max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) - var(--gap-unit)); }
  .mband__par--0{ right:42%; width:46%; }
  .mband__par--1{ width:54%; }
}

/* ---------- La franja de la oferta, con el trabajo de su sección (29/10/2026) ----------
   Más alta que las otras tres y completa: cinta que corre, nombre en
   amarillo, lo que incluye, vigencia, botones y sello del precio. Toma el
   color de la línea de su máquina. */
.mbands:has(.mband--of){ grid-template-rows:auto repeat(3,minmax(104px,1fr)); }
.mband--of{
  display:grid; align-items:center; padding:52px 18px 18px; color:var(--white);
  background:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%);
}
.mband--of-corte{ background:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%); color:var(--graphite); }
.mband__cinta{ position:absolute; z-index:3; left:0; right:0; top:0; overflow:hidden; background:var(--yellow); color:var(--graphite); }
.mband--of-corte .mband__cinta{ background:var(--graphite); color:var(--yellow); }
.mband__pista{ display:flex; width:max-content; animation:mpromoCinta 75s linear infinite; }
.mband__pista span{
  display:inline-flex; align-items:center; gap:16px; padding:8px 16px 8px 0; white-space:nowrap;
  font-family:var(--f-display); text-transform:uppercase; font-size:14px;
}
.mband__pista i{ width:7px; height:7px; transform:rotate(45deg); background:currentColor; display:inline-block; }
.mband--of .mband__txt{ width:60%; gap:6px; }
.mband--of .mband__k{ white-space:normal; }
.mband--of .mband__n{ margin:0; color:var(--yellow); font-weight:400; font-size:clamp(40px,12vw,60px); }
.mband--of-corte .mband__n{ color:var(--graphite); }
.mband__inc{ display:none; list-style:none; margin:2px 0 0; padding:0; gap:6px; font-size:14px; font-weight:600; }
.mband__inc li{ display:flex; align-items:center; gap:8px; }
.mband__inc svg{ color:var(--yellow); flex:none; }
.mband--of-corte .mband__inc svg{ color:var(--graphite); }
.mband__vig{ margin:0; font-size:12.5px; font-weight:600; opacity:.75; }
.mband__acc{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:6px; }
.mband__acc .btn{ padding:11px 16px; font-size:14px; }
.mband--of-corte .mband__acc .btn{ background:var(--graphite); color:var(--yellow); }
.mband__ficha{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:inherit; }
.mband--of .mband__arte{ left:auto; right:8px; top:52px; bottom:14px; width:42%; flex-direction:column; justify-content:center; }
.mband__sello{
  position:absolute; z-index:3; right:0; top:-4px; margin:0;
  display:grid; justify-items:center; gap:1px; padding:8px 12px 14px;
  background:var(--yellow); color:var(--graphite);
  clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%);
  transform:rotate(-5deg); filter:drop-shadow(0 10px 14px rgba(0,0,0,.3));
}
.mband--of-corte .mband__sello{ background:var(--graphite); color:var(--yellow); }
.mband__sello span{ font-weight:800; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.mband__sello b{ font-family:var(--f-display); font-weight:400; font-size:20px; line-height:1; }
.mband__sello s{ font-size:11px; font-weight:700; opacity:.6; }
@media (prefers-reduced-motion:reduce){ .mband__pista{ animation:none; } }

@media (min-width:900px){
  .mbands:has(.mband--of){ grid-template-rows:1.9fr 1fr 1fr 1fr; }
  .mband--of{ padding:64px calc(max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) - var(--gap-unit)) 28px; }
  .mband__pista span{ font-size:17px; padding:10px 22px 10px 0; gap:22px; }
  .mband--of .mband__txt{ width:50%; gap:10px; }
  .mband--of .mband__n{ font-size:clamp(56px,6vw,104px); }
  .mband__inc{ display:grid; font-size:15px; }
  .mband__vig{ font-size:14px; }
  .mband__acc .btn{ padding:14px 22px; font-size:15px; }
  .mband--of .mband__arte{ right:calc(max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) - var(--gap-unit)); top:64px; bottom:24px; width:44%; }
  .mband__sello{ right:2%; top:0; padding:14px 22px 22px; }
  .mband__sello span{ font-size:12px; }
  .mband__sello b{ font-size:clamp(28px,2.6vw,42px); }
  .mband__sello s{ font-size:14px; }
}
/* La franja de la oferta mide lo que su contenido; las otras tres, un alto
   fijo. Así nada se corta y las cuatro siguen cabiendo en la primera pantalla. */
.mbands:has(.mband--of){ height:auto; min-height:0; max-height:none; grid-template-rows:none; grid-auto-rows:auto; }
.mbands:has(.mband--of) .mband:not(.mband--of){ min-height:128px; }
@media (min-width:900px){
  .mbands:has(.mband--of){ grid-template-rows:none; }
  .mbands:has(.mband--of) .mband:not(.mband--of){ min-height:clamp(118px,15vh,168px); }
  .mband--of{ padding-top:60px; padding-bottom:26px; }
  .mband--of .mband__n{ font-size:clamp(52px,5vw,88px); }
  .mband__inc{ display:flex; flex-wrap:wrap; gap:6px 22px; }
}
@media (min-width:900px){
  .mbands:has(.mband--of) .mband:not(.mband--of){ padding-top:16px; padding-bottom:16px; }
  .mbands:has(.mband--of) .mband:not(.mband--of) .mband__n{ font-size:clamp(38px,3.4vw,58px); }
  .mbands:has(.mband--of) .mband:not(.mband--of) .mband__txt{ gap:4px; }
  .mbands:has(.mband--of) .mband:not(.mband--of) .mband__d{ font-size:clamp(15px,1.2vw,18px); }
}
@media (min-width:900px){ .mbands:has(.mband--of) .mband:not(.mband--of){ min-height:clamp(110px,14vh,160px); } }
@media (min-width:900px){ .mband--of{ padding-top:54px; padding-bottom:20px; } .mband--of .mband__txt{ gap:8px; } }

/* ---------- Franjas, versión limpia (29/10/2026) ----------
   Juan: «no quiero que se vea tan lleno». La oferta queda en cuatro cosas:
   qué máquina, cuánto te ahorras, un botón y el sello con el precio de antes
   tachado y el de ahora. Las otras tres, con la máquina más grande y más
   cerca del texto: el medio de la franja ya no queda vacío. */
.mband--of{ padding-top:20px; padding-bottom:20px; }
.mband__ahorro{
  justify-self:start; margin:2px 0 0; padding:6px 12px; border-radius:99px;
  background:var(--yellow); color:var(--graphite); font-weight:800; font-size:15px; line-height:1.2;
}
.mband--of-corte .mband__ahorro{ background:var(--graphite); color:var(--yellow); }
.mband__acc{ gap:6px 14px; }
.mband__vig{ font-size:12.5px; font-weight:600; opacity:.7; }
.mband--of .mband__arte{ top:16px; bottom:12px; }
.mband__sello{ padding:8px 12px 14px; gap:0; }
.mband__sello s{ font-size:11px; font-weight:700; opacity:.6; }
@media (min-width:900px){
  .mband--of{ padding-top:30px; padding-bottom:30px; }
  .mband--of .mband__txt{ gap:12px; }
  .mband__ahorro{ font-size:19px; padding:8px 16px; }
  .mband__vig{ font-size:14px; }
  .mband--of .mband__arte{ top:24px; bottom:20px; }
  .mband__sello{ padding:12px 22px 22px; }
  .mband__sello s{ font-size:15px; }
  /* Las tres de categoría: un poco más altas y la máquina grande, pegada
     a la mitad de la franja. */
  .mbands:has(.mband--of) .mband:not(.mband--of),
  .mbands .mband:not(.mband--of){ min-height:clamp(150px,20vh,210px); }
  .mband:not(.mband--of) .mband__arte{ left:38%; right:calc(max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) + 70px); width:auto; top:6%; bottom:6%; justify-content:center; }
}
@media (max-width:899px){ .mband__tipo{ display:none; } .mband--of .mband__arte img{ max-height:70%; } }
.mband__sello span{ font-weight:800; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
@media (min-width:900px){ .mband__sello span{ font-size:12px; } }
@media (max-width:899px){ .mband__ahorro{ font-size:12px; padding:5px 10px; white-space:nowrap; position:relative; z-index:3; } .mband--of .mband__arte{ top:44px; } }

/* ---------- Dentro del catálogo, cabeceras claras (29/10/2026) ----------
   Juan: con las tres franjas de arriba más las de cada línea «ya parecen
   cinco franjas». Las de color se quedan solo arriba; aquí cada línea abre
   con una cabecera sobre el papel: antetítulo, «Serie» y el nombre, y el
   precio de entrada. Sin párrafo, sin máquina y sin palabra de fondo. */
.mcat{ padding-top:clamp(40px,5vw,72px); }
.mfranja,
.mfranja--enchapado,
.mfranja--corte,
.mfranja--paquetes{
  background:none; color:var(--graphite); min-height:0; display:block;
  padding:clamp(28px,3.6vw,56px) calc(max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) - var(--gap-unit)) clamp(14px,1.6vw,22px);
  margin:0;
}
.mfranja__img, .mfranja__fantasma, .mfranja__f{ display:none !important; }
.mfranja__in{ max-width:none !important; display:flex !important; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:6px 24px; }
.mfranja__s, .mfranja--enchapado .mfranja__s, .mfranja--corte .mfranja__s, .mfranja--paquetes .mfranja__s{
  order:-1; flex-basis:100%; color:var(--blue); font-weight:800; font-size:12px; letter-spacing:.12em;
}
.mfranja__t{ font-size:clamp(40px,5vw,72px); color:var(--graphite); grid-row:auto; }
.mfranja__d, .mfranja--enchapado .mfranja__d{ margin:0; color:var(--graphite); grid-column:auto; font-size:clamp(20px,2vw,30px); }
.mfranja__d span{ color:var(--slate); opacity:1; }
.mpacks .mfranja{ margin-bottom:0; }
@media (max-width:899px){ .mfranja, .mfranja--enchapado, .mfranja--corte, .mfranja--paquetes{ padding-inline:20px; } }

/* ---------- Cabeceras de línea con vida, sobre blanco (29/10/2026) ----------
   Juan: «me gusta el blanco pero se ve demasiado plano y aburrido». Siguen
   claras, pero ahora son una placa blanca con borde fino y sombra suave, un
   tinte del color de la línea hacia la derecha, «Serie» sobre el nombre y la
   máquina grande apoyada a la derecha. */
.mfranja,
.mfranja--enchapado,
.mfranja--corte,
.mfranja--paquetes{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center;
  margin:clamp(28px,3.6vw,56px) var(--gap-unit) var(--gap-unit);
  min-height:clamp(190px,19vw,280px);
  padding:clamp(24px,3vw,44px) calc(max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) - var(--gap-unit));
  border:1px solid var(--line); box-shadow:0 18px 40px -28px rgba(14,19,48,.35);
}
.mfranja--enchapado{ background:linear-gradient(100deg,#FFFFFF 38%,#E9EDFA 100%); }
.mfranja--corte{ background:linear-gradient(100deg,#FFFFFF 38%,#FFF1C7 100%); }
.mfranja--paquetes{ background:linear-gradient(100deg,#FFFFFF 38%,#E4E9FF 100%); }
.mfranja__img{
  display:block !important; position:absolute; z-index:1; top:8%; bottom:8%; height:84%; width:auto;
  right:calc(max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) - var(--gap-unit));
  max-width:46%; object-fit:contain; object-position:right center;
  filter:drop-shadow(0 22px 24px rgba(14,19,48,.22));
}
.mfranja--paquetes .mfranja__img--a{ right:30%; height:70%; top:14%; max-width:30%; z-index:2; }
.mfranja--paquetes .mfranja__img--b{ height:78%; top:12%; max-width:30%; }
.mfranja__in{ position:relative; z-index:3; display:grid !important; justify-items:start; gap:6px; max-width:52% !important; }
.mfranja__s, .mfranja--enchapado .mfranja__s, .mfranja--corte .mfranja__s, .mfranja--paquetes .mfranja__s{ order:0; flex-basis:auto; }
.mfranja__t{ order:1; font-size:clamp(46px,5.6vw,92px); line-height:.88; }
.mfranja__serie{ display:block; font-size:.32em; letter-spacing:.01em; line-height:1; margin-bottom:.12em; color:var(--blue); }
.mfranja__d{ order:2; margin-top:8px !important; font-size:clamp(20px,1.8vw,28px); }
@media (max-width:899px){
  .mfranja, .mfranja--enchapado, .mfranja--corte, .mfranja--paquetes{ min-height:170px; padding:22px 20px; }
  .mfranja__img{ max-width:46%; height:70%; top:15%; right:12px; }
  .mfranja--paquetes .mfranja__img--a{ right:26%; max-width:30%; }
  .mfranja--paquetes .mfranja__img--b{ right:10px; max-width:32%; }
  .mfranja__in{ max-width:56% !important; }
  .mfranja__s{ font-size:11px !important; }
}
.mfranja__in{ grid-template-columns:1fr !important; }
.mfranja__in > *{ grid-column:1 !important; grid-row:auto !important; }
/* Sin degradado (Juan: «el gradiente amarillo se ve feo»): las tres placas
   en blanco limpio; el borde y la sombra ya las despegan del fondo. */
.mfranja--enchapado, .mfranja--corte, .mfranja--paquetes{ background:var(--white); }

/* ==========================================================================
   GALERÍA DE LA FICHA, estilo Marketplace (29/10/2026)
   La foto grande sobre su propio desenfoque (las fotos que no llenan el cuadro
   no dejan bordes vacíos), flechas a los lados, contador y miniaturas debajo.
   El contenedor hereda el sitio que tenía la foto principal en la retícula.
   ========================================================================== */
.pdp-gal{ grid-column:1 / -1; display:grid; gap:var(--gap-unit); min-width:0; }
.pdp-gal__escena{ position:relative; overflow:hidden; isolation:isolate; }
.pdp-gal--enchapado .pdp-gal__escena{ background:var(--pdp-titan); }
.pdp-gal--corte .pdp-gal__escena{ background:var(--pdp-urus); }
.pdp-gal__fondo{
  position:absolute; inset:-10%; width:120%; height:120%; object-fit:cover; z-index:0;
  filter:blur(34px) saturate(1.1); opacity:.42; pointer-events:none;
}
.pdp-gal .pdp-m--main{ position:relative; z-index:1; width:100%; background:none; grid-column:auto; }
.pdp-gal__fl{
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--graphite); box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .2s, background .2s;
}
.pdp-gal__fl:hover{ transform:translateY(-50%) scale(1.06); background:var(--white); }
.pdp-gal__fl--prev{ left:14px; }
.pdp-gal__fl--next{ right:14px; }
.pdp-gal__n{
  position:absolute; z-index:3; right:14px; bottom:14px; padding:5px 11px; border-radius:99px;
  background:rgba(11,13,18,.62); color:var(--white); font-size:13px; font-weight:600;
}
.pdp-gal__minis{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px; }
.pdp-gal__minis::-webkit-scrollbar{ display:none; }
.pdp-gal__mini{
  flex:none; width:72px; height:72px; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden;
  background:var(--pdp-titan); cursor:pointer; opacity:.6; transition:opacity .2s, border-color .2s;
}
.pdp-gal--corte .pdp-gal__mini{ background:var(--pdp-urus); }
.pdp-gal__mini img{ width:100%; height:100%; object-fit:contain; display:block; }
.pdp-gal__mini.is-on, .pdp-gal__mini:hover{ opacity:1; border-color:var(--blue); }
@media (max-width:979px){
  .pdp-gal{ order:1; grid-column:1 / -1; }
  .pdp-gal__fl{ width:38px; height:38px; }
  .pdp-gal__mini{ width:58px; height:58px; }
}
@media (min-width:700px) and (max-width:979px){
  .pdp-gal{ grid-column:1; grid-row:1; }
}
/* Sin desenfoque de fondo (Juan: «no me gusta nada ese blur»). */
.pdp-gal__fondo{ display:none; }

/* Un solo botón en el bloque de compra (29/10/2026). Juan: en vez de
   «Apartar» y «Cotizar para empresa», un gran botón amarillo que ocupe el
   espacio de los dos. La cotización para empresa sigue en el cierre. */
.pdp-buy__cta{
  width:100%; justify-content:center; min-height:clamp(64px,6vw,84px);
  font-size:clamp(17px,1.4vw,20px); border-radius:16px; gap:12px;
}
.pdp-buy__cta svg{ width:24px; height:24px; }
/* Con cinco o seis respuestas, tres por fila en escritorio (29/10/2026). */
@media (min-width:1100px){
  .pdp-resp__l{ grid-template-columns:repeat(min(var(--c), 3),minmax(0,1fr)); row-gap:40px; }
  .pdp-r:nth-child(3n+1){ border-left:0; padding-left:0; }
}

/* ---------- Ficha técnica, versión elevada (29/10/2026) ----------
   La regla pasa a ser un flexómetro: cinta blanca con rayitas de milímetro y
   rayas largas en cada número, y el rango en amarillo con sus dos topes. Los
   datos dejan de ser filas de tabla y pasan a fichas con borde fino. */
.ft-regla{ max-width:560px; }
.ft-regla__pista{
  height:34px; border-radius:6px; background:var(--white);
  border:1px solid rgba(11,13,18,.14); box-shadow:0 10px 24px -18px rgba(14,19,48,.45); overflow:hidden;
}
.ft-regla__pista::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(11,13,18,.55) 0 1.5px, transparent 1.5px calc(100% / var(--M))) top left / 100% 62% no-repeat,
    repeating-linear-gradient(90deg, rgba(11,13,18,.28) 0 1px, transparent 1px calc(100% / var(--m))) top left / 100% 32% no-repeat;
}
.ft-regla__rango{
  top:0; bottom:0; z-index:1; background:var(--yellow);
  box-shadow:inset 3px 0 0 var(--graphite), inset -3px 0 0 var(--graphite);
}
.ft-regla__marcas{ height:28px; }
.ft-regla__marcas span{ top:8px; font-weight:700; opacity:.8; }

.fb__dl{
  border-top:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); max-width:640px;
}
.fb-f, .fb-f:last-child{
  display:grid; grid-template-columns:1fr !important; gap:6px !important; align-content:start;
  padding:16px 18px; border:1px solid rgba(11,13,18,.12); border-radius:14px;
  background:var(--white); box-shadow:0 10px 26px -22px rgba(14,19,48,.5);
}
.fb-f dt{ font-size:11.5px; letter-spacing:.12em; color:var(--blue); }
.fb-f dd{ font-size:17px; font-weight:700; line-height:1.35; }
.fb__p{ font-size:16.5px; max-width:56ch; }
.fb__dl{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:420px){ .fb__dl{ grid-template-columns:1fr; } }

/* ---------- Datos técnicos: retícula de filetes, no tarjetas (29/10/2026) ----------
   Juan: las tarjetas redondeadas con sombra «nada que ver con el diseño».
   Vuelven al lenguaje del sitio: esquinas rectas, filetes finos de 1px, sin
   fondo ni sombra. Cada celda: ícono, etiqueta y dato. */
.fb__dl{
  gap:0; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:640px;
  border-top:1px solid rgba(11,13,18,.14);
}
.fb-f, .fb-f:last-child{
  display:grid; grid-template-columns:auto 1fr !important; grid-template-rows:auto auto;
  column-gap:14px !important; row-gap:2px !important; align-items:start;
  padding:16px 18px 16px 0; border:0; border-radius:0; background:none; box-shadow:none;
  border-bottom:1px solid rgba(11,13,18,.14);
}
.fb-f:nth-child(2n){ padding-left:18px; border-left:1px solid rgba(11,13,18,.14); }
.fb-f__i{ grid-row:1 / span 2; color:var(--blue); display:grid; place-items:center; padding-top:2px; }
.fb-f dt{ grid-column:2; font-size:11.5px; letter-spacing:.12em; color:var(--slate); }
.fb-f dd{ grid-column:2; font-size:16px; font-weight:700; line-height:1.35; }
@media (max-width:420px){
  .fb__dl{ grid-template-columns:1fr; }
  .fb-f:nth-child(2n){ padding-left:0; border-left:0; }
}

/* ---------- Datos técnicos: una columna, una frase por dato (29/10/2026) ----------
   Sin íconos ni etiqueta aparte. Cada dato es una frase en negrita, grande,
   con un cuadro amarillo pequeño delante y filete fino entre uno y otro. */
.fb__dl{ display:block; max-width:620px; border-top:1px solid rgba(11,13,18,.14); }
.fb-f, .fb-f:last-child, .fb-f:nth-child(2n){
  display:flex !important; align-items:baseline; gap:14px !important;
  padding:15px 0; border:0; border-left:0; border-bottom:1px solid rgba(11,13,18,.14);
}
.fb-f::before{ content:""; flex:none; width:9px; height:9px; background:var(--yellow); transform:translateY(-2px); }
.fb-f dd{ margin:0; font-size:clamp(18px,1.5vw,21px); font-weight:800; line-height:1.3; letter-spacing:-.01em; color:var(--graphite); }

/* ==========================================================================
   LO QUE TIENES QUE SABER ANTES DE COMPRAR, v2 (29/10/2026)
   Retícula a sangre con el hueco de 10px del sitio. Cada pieza en un color
   de marca (degradados a 155°) y con un solo dato grande en Fugaz:
     garantía  → amarillo Urus, pieza grande con el número de meses
     repuestos → marino Titán
     asesoría  → blanco
     retoma    → azul de marca
     sedes     → grafito, con «Cómo llegar»
     instalación (si la máquina la trae) → blanco
   ========================================================================== */
.pdp-resp2{
  --sangria:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding:clamp(56px,7vw,110px) 0 var(--gap-unit); background:var(--paper);
}
.pdp-resp2__h{
  margin:0 0 clamp(24px,3vw,44px); padding:0 var(--sangria);
  font-family:var(--f-display); text-transform:uppercase; color:var(--graphite);
  font-size:clamp(36px,4.6vw,72px); line-height:.95; letter-spacing:-.025em; padding-top:.16em; max-width:16ch;
  box-sizing:content-box;
}
.pdp-resp2__g{
  list-style:none; margin:0; padding:0 var(--gap-unit); display:grid; gap:var(--gap-unit);
  grid-template-columns:1fr;
}
.pb{
  position:relative; overflow:hidden; display:grid; align-content:end; gap:10px;
  min-height:200px; padding:clamp(24px,2.6vw,40px);
}
.pb__t{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(30px,3vw,48px); line-height:.95; letter-spacing:-.02em; padding-top:.14em; }
.pb__p{ font-size:clamp(15px,1.2vw,17px); line-height:1.5; max-width:34ch; opacity:.86; }
.pb__n{ font-family:var(--f-display); font-size:clamp(120px,15vw,240px); line-height:.8; letter-spacing:-.05em; padding-top:.1em; }
.pb__u{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(26px,2.6vw,42px); line-height:.95; letter-spacing:-.02em; max-width:12ch; }
.pb__ir{ justify-self:start; display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-weight:800; font-size:15px; color:var(--yellow); }
.pb__ir svg{ transition:transform .25s; }
.pb__ir:hover svg{ transform:translateX(3px); }

.pb--garantia{ background:linear-gradient(155deg,#FFD24D 0%,#FFC629 48%,#F5B912 100%); color:var(--graphite); }
.pb--repuestos{ background:linear-gradient(155deg,#1B2557 0%,#0E1330 52%,#0B0D18 100%); color:var(--white); }
.pb--asesoria, .pb--instalacion{ background:var(--white); color:var(--graphite); border:1px solid var(--line); }
.pb--retoma{ background:linear-gradient(155deg,#16226E 0%,#1E31A4 38%,#2C45D6 72%,#1B2A8C 100%); color:var(--white); }
.pb--sedes{ background:var(--graphite); color:var(--white); }
.pb--repuestos .pb__t, .pb--retoma .pb__t{ color:var(--white); }
.pb--asesoria .pb__t, .pb--instalacion .pb__t{ color:var(--blue); }
.pb--sedes .pb__t{ color:var(--yellow); }

@media (min-width:900px){
  .pdp-resp2__g{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(230px,auto); }
  .pb--garantia{ grid-column:span 2; grid-row:span 2; }
  .pb--repuestos{ grid-column:span 2; }
  .pb--sedes{ grid-column:span 4; min-height:180px; }
  .pdp-resp2__g--inst .pb--sedes, .pdp-resp2__g--inst .pb--instalacion{ grid-column:span 2; }
}
@media (min-width:600px) and (max-width:899px){
  .pdp-resp2__g{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pb--garantia, .pb--sedes{ grid-column:span 2; }
}
.pdp-resp2__h{ max-width:22ch; }
@media (max-width:599px){ .pb{ min-height:150px; } .pb--garantia{ min-height:240px; } }
/* El nombre de la máquina en el cierre: amarillo sobre el marino de Titán,
   azul de marca sobre el amarillo de Urus (29/10/2026). */
.pdp-cierre--enchapado .pdp-cierre__m{ color:var(--yellow); }
.pdp-cierre--corte .pdp-cierre__m{ color:var(--blue); }

/* Isotipo de fondo en la foto de la ficha (29/10/2026). Juan: «el isotipo
   sobre el azul, debajo de la máquina, sin relleno, solo los bordes y con
   mucha transparencia, para reforzar la marca con elegancia». Contorno fino,
   al 20%: blanco sobre el marino de Titán, grafito sobre el amarillo de Urus. */
.pdp-gal__escena::before{
  content:""; position:absolute; z-index:0; left:50%; top:50%;
  width:min(86%, 640px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:center / contain no-repeat; opacity:.2; pointer-events:none;
}
.pdp-gal--enchapado .pdp-gal__escena::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20191V106h37.91v-8L200%2070.14%20342.09%2098v8H380v85Z%22/%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20209v85h37.91v8L200%20329.86%20342.09%20302v-8H380v-85Z%22/%3E%3C/g%3E%3C/svg%3E"); }
.pdp-gal--corte .pdp-gal__escena::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230B0D12%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20191V106h37.91v-8L200%2070.14%20342.09%2098v8H380v85Z%22/%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20209v85h37.91v8L200%20329.86%20342.09%20302v-8H380v-85Z%22/%3E%3C/g%3E%3C/svg%3E"); opacity:.22; }

/* Más sutil y con trazo más grueso (Juan, 29/10/2026): 10% de opacidad. */
.pdp-gal--enchapado .pdp-gal__escena::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.5%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20191V106h37.91v-8L200%2070.14%20342.09%2098v8H380v85Z%22/%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20209v85h37.91v8L200%20329.86%20342.09%20302v-8H380v-85Z%22/%3E%3C/g%3E%3C/svg%3E"); opacity:.1; }
.pdp-gal--corte .pdp-gal__escena::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230B0D12%22%20stroke-width%3D%223.5%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20191V106h37.91v-8L200%2070.14%20342.09%2098v8H380v85Z%22/%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20209v85h37.91v8L200%20329.86%20342.09%20302v-8H380v-85Z%22/%3E%3C/g%3E%3C/svg%3E"); opacity:.1; }
/* Más grande: el contorno ocupa casi todo el ancho de la foto (Juan, 29/10/2026). */
.pdp-gal__escena::before{ width:108%; }
/* Punto medio: ni tan pequeño como al principio ni a todo el ancho (Juan). */
.pdp-gal__escena::before{ width:94%; }

/* Trazo aún más grueso (Juan, 29/10/2026). */
.pdp-gal--enchapado .pdp-gal__escena::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20191V106h37.91v-8L200%2070.14%20342.09%2098v8H380v85Z%22/%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20209v85h37.91v8L200%20329.86%20342.09%20302v-8H380v-85Z%22/%3E%3C/g%3E%3C/svg%3E"); }
.pdp-gal--corte .pdp-gal__escena::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230B0D12%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20191V106h37.91v-8L200%2070.14%20342.09%2098v8H380v85Z%22/%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20209v85h37.91v8L200%20329.86%20342.09%20302v-8H380v-85Z%22/%3E%3C/g%3E%3C/svg%3E"); }
.pdp-gal--enchapado .pdp-gal__escena::before, .pdp-gal--corte .pdp-gal__escena::before{ opacity:.05; }
.pdp-gal--enchapado .pdp-gal__escena::before, .pdp-gal--corte .pdp-gal__escena::before{ opacity:.07; }

/* El isotipo en contorno también en el hueco de la pieza de garantía
   (Juan, 29/10/2026). Mismo trazo, grafito sobre el amarillo, al 7 %. */
.pb--garantia{ isolation:isolate; }
.pb--garantia::after{
  content:""; position:absolute; z-index:-1; right:3%; top:50%; transform:translateY(-50%);
  width:min(56%, 460px); aspect-ratio:1; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230B0D12%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20191V106h37.91v-8L200%2070.14%20342.09%2098v8H380v85Z%22/%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20209v85h37.91v8L200%20329.86%20342.09%20302v-8H380v-85Z%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.07; pointer-events:none;
}
@media (max-width:599px){ .pb--garantia::after{ width:70%; right:-12%; } }
/* Sin isotipo en la pieza de garantía (Juan: «mejor este no»). */
.pb--garantia::after{ content:none; }

/* Cierre de la ficha con un solo botón grande (29/10/2026). Juan: «un solo
   botón y más grande el amarillo». */
.pdp-cierre__cta{
  min-height:clamp(64px,6vw,80px); padding-inline:clamp(28px,3vw,44px);
  font-size:clamp(17px,1.4vw,20px); border-radius:16px; gap:12px;
}
.pdp-cierre__cta svg{ width:24px; height:24px; }

/* Trazo un poco más delgado (Juan, 29/10/2026). */
.pdp-gal--enchapado .pdp-gal__escena::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%224.5%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20191V106h37.91v-8L200%2070.14%20342.09%2098v8H380v85Z%22/%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20209v85h37.91v8L200%20329.86%20342.09%20302v-8H380v-85Z%22/%3E%3C/g%3E%3C/svg%3E"); }
.pdp-gal--corte .pdp-gal__escena::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230B0D12%22%20stroke-width%3D%224.5%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20191V106h37.91v-8L200%2070.14%20342.09%2098v8H380v85Z%22/%3E%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M20%20209v85h37.91v8L200%20329.86%20342.09%20302v-8H380v-85Z%22/%3E%3C/g%3E%3C/svg%3E"); }