/* ==========================================================================
   Maquinaria — dirección de arte propia
   Idea: objeto, ciclo y línea. Dos materiales: negro (texto, planos) y acero claro
   (donde viven las fotos de los equipos; el multiply funde su fondo blanco). Líneas
   de plano, cotas sin cifras, esquinas rectas. Es la página más "técnica" del set.
   CACHÉ: se sirve "immutable"; si lo editas, sube su ?v= en la página.
   ========================================================================== */

/* ===== 1. HERO: negro + bahía de acero ===== */
.phero--maq{background:var(--jenn-negro-onix);}
.phero--maq .phero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);align-items:stretch;}
.phero--maq .phero__copy{grid-column:1 / span 5;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s5);padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem) clamp(3.5rem,2rem + 4vw,6rem);padding-right:var(--s4);}
.phero--maq .phero__title{font-size:clamp(2.25rem,1.2rem + 2.6vw,3.25rem);margin-block:var(--s2) var(--s1);}
.mq-marcas{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7);margin-top:var(--s3);padding-top:var(--s5);border-top:1px solid var(--linea-oscura);align-self:stretch;}
.mq-marcas dt{font-weight:700;font-size:.9375rem;letter-spacing:.06em;color:var(--jenn-blanco-marfil);}
.mq-marcas dd{font-size:.9375rem;color:var(--jenn-gris-perla);}
/* Bahía de acero: ocupa toda la altura del hero y sangra a la derecha */
.mq-bahia{--bleed:max(var(--gutter), calc((100vw - var(--maxw)) / 2));grid-column:6 / -1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--s4);margin:0 calc(var(--bleed) * -1) 0 0;padding:clamp(1.5rem,1rem + 2vw,3rem) var(--bleed) clamp(1.5rem,1rem + 2vw,2.5rem) clamp(1.5rem,1rem + 2vw,3rem);color:var(--jenn-negro-onix);background:
  linear-gradient(90deg, color-mix(in srgb, var(--jenn-gris-grafito) 9%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
  linear-gradient(color-mix(in srgb, var(--jenn-gris-grafito) 9%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
  var(--jenn-acero);}
.mq-foto{position:relative;width:min(100%, 34rem);margin-inline:auto;aspect-ratio:1;}
.mq-foto > img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.02);}
.mq-cotas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:var(--jenn-dorado-tinta);stroke-width:1.1;}
.mq-cotas path{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;}
/* Marcas numeradas sobre la foto (estilo manual técnico) */
.mk{position:absolute;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);background:var(--jenn-negro-onix);color:var(--jenn-blanco-marfil);font-size:.8125rem;font-weight:700;box-shadow:0 0 0 4px color-mix(in srgb, var(--jenn-dorado) 45%, transparent);transition:box-shadow var(--dur-hover) ease, background-color var(--dur-hover) ease;}
.mk.is-on{background:var(--jenn-dorado);color:var(--jenn-negro-onix);box-shadow:0 0 0 8px color-mix(in srgb, var(--jenn-dorado) 30%, transparent);}
.mk--static{position:static;flex:none;width:26px;height:26px;transform:none;font-size:.75rem;background:var(--jenn-dorado);color:var(--jenn-negro-onix);box-shadow:none;}
.mk--claro{background:var(--jenn-blanco-marfil);}
.mk-leyenda{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s5);border-top:1px solid color-mix(in srgb, var(--jenn-gris-grafito) 30%, transparent);padding-top:var(--s4);}
.mk-leyenda li{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;line-height:1.45;color:var(--jenn-gris-grafito);transition:color var(--dur-hover) ease;}
.mk-leyenda b{color:var(--jenn-negro-onix);font-weight:600;}
.mk-leyenda li.is-on{color:var(--jenn-negro-onix);}
.mq-bahia .figcap{margin-top:0;color:var(--jenn-gris-grafito);}
.mq-bahia .figcap b{color:var(--jenn-dorado-tinta);}
/* Ciclo del panel: tres fases que se encienden en orden (sin tiempos ni cifras) */
.mq-ciclo{display:flex;align-items:center;gap:var(--s4);align-self:center;padding:10px 16px;background:var(--jenn-negro-onix);color:var(--jenn-gris-perla);font-size:.8125rem;}
.mq-ciclo__t{font-weight:600;color:var(--jenn-dorado);}
.mq-ciclo ol{display:flex;gap:var(--s4);}
.mq-ciclo li{display:flex;align-items:center;gap:7px;transition:color var(--dur-panel) ease;}
.mq-ciclo i{width:8px;height:8px;border-radius:50%;background:var(--jenn-dorado);box-shadow:0 0 0 3px color-mix(in srgb, var(--jenn-dorado) 25%, transparent);transition:background-color var(--dur-panel) ease, box-shadow var(--dur-panel) ease;}
.mq-ciclo li{color:var(--jenn-blanco-marfil);}
.mq-ciclo.is-live li{color:var(--jenn-gris-perla);}
.mq-ciclo.is-live i{background:color-mix(in srgb, var(--jenn-blanco-marfil) 25%, transparent);box-shadow:none;}
.mq-ciclo.is-live li.is-on{color:var(--jenn-blanco-marfil);}
.mq-ciclo.is-live li.is-on i{background:var(--jenn-dorado);box-shadow:0 0 0 3px color-mix(in srgb, var(--jenn-dorado) 25%, transparent);}
@media (prefers-reduced-motion: no-preference){
  .intro-pending .mq-cotas path{stroke-dashoffset:1;}
  .intro-pending .mq-foto .mk{opacity:0;}
}

/* ===== 2. LA LÍNEA (acero claro) ===== */
.mq-linea{background:var(--jenn-acero);padding-bottom:0;overflow:clip;}
.mq-linea__marco{position:relative;display:flex;flex-direction:column;gap:clamp(2rem,1.4rem + 2vw,3.5rem);padding-bottom:var(--sec);}
.mq-linea__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s4);align-items:end;}
.mq-linea__head .h2{grid-column:1 / span 6;}
.mq-linea__head .lede{grid-column:8 / span 5;}
.mq-pista{position:relative;}
.estacion{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(1.5rem,1rem + 2.5vw,4rem);align-items:center;}
/* Fondo propio + isolation: el multiply funde el blanco de la foto aunque la pista
   esté en su propia capa (transform del scroll horizontal) */
.estacion__foto{aspect-ratio:3 / 2;background:var(--jenn-acero);isolation:isolate;}
.estacion__foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.02);}
.estacion__info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);}
.estacion__verbo{font-family:var(--jenn-font-heading);font-weight:500;font-size:clamp(2.5rem,1.6rem + 3vw,4.25rem);line-height:.95;letter-spacing:-.02em;color:var(--jenn-dorado-tinta);margin-bottom:var(--s2);}
.estacion__marca{font-size:.8125rem;font-weight:700;letter-spacing:.08em;color:var(--jenn-gris-grafito);}
.estacion__txt{color:var(--jenn-gris-grafito);max-width:34em;text-wrap:pretty;}
.estacion__entra{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-top:var(--s3);border-top:1px dashed color-mix(in srgb, var(--jenn-gris-grafito) 45%, transparent);align-self:stretch;font-size:.9375rem;}
.ficha-tec{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:var(--s2);padding:var(--s4);border:1px solid color-mix(in srgb, var(--jenn-gris-grafito) 30%, transparent);background:color-mix(in srgb, var(--jenn-blanco-marfil) 55%, transparent);align-self:stretch;}
.ficha-tec__campos{font-size:.9375rem;font-weight:500;}
.ficha-tec__nota{font-size:.875rem;color:var(--jenn-gris-grafito);margin-bottom:var(--s2);}
.estacion__toma{font-size:.8125rem;line-height:1.5;color:var(--jenn-gris-grafito);max-width:36em;}
.estacion__toma .toma__tag{margin-right:4px;}
/* Riel: solo tiene sentido en la versión horizontal */
.mq-riel{display:none;}

/* Versión horizontal (la activa maquinaria.js en escritorio alto) */
/* Fijada: el bloque entero cabe en la pantalla (menos aire arriba que una sección normal) */
/* La sección mide una pantalla más el recorrido horizontal; el contenido queda fijo con
   sticky (sin pin de GSAP: no hay saltos de layout) */
.mq-linea.is-horizontal{padding-block:0;height:calc(100vh + var(--recorrido, 0px));}
.mq-linea.is-horizontal .mq-linea__sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--subnav-h) + clamp(1rem,.5rem + 1vw,1.75rem));}
.mq-linea.is-horizontal .mq-linea__marco{padding-bottom:clamp(1.5rem,1rem + 1.5vw,2.5rem);gap:clamp(1.5rem,1rem + 1.5vw,2.5rem);}
.mq-linea.is-horizontal .mq-pista{display:flex;width:max-content;gap:clamp(3rem,2rem + 4vw,7rem);padding-inline:max(var(--gutter), calc((100vw - var(--maxw)) / 2));will-change:transform;}
.mq-linea.is-horizontal .estacion{width:min(1080px, calc(100vw - 2 * max(var(--gutter), calc((100vw - var(--maxw)) / 2))));}
.mq-linea.is-horizontal .estacion__foto{max-height:calc(100vh - 380px);width:100%;}
.mq-linea.is-horizontal .mq-linea__head .h2{font-size:clamp(2rem,1.4rem + 1.5vw,2.75rem);grid-column:1 / span 7;}
.mq-linea.is-horizontal .mq-linea__head .lede{grid-column:8 / -1;font-size:1rem;}
.mq-linea.is-horizontal .estacion__verbo{font-size:clamp(2.25rem,1.5rem + 2.2vw,3.5rem);}
.mq-linea.is-horizontal .estacion__info{gap:10px;}
.mq-linea.is-horizontal .ficha-tec{padding:12px var(--s4);}
.mq-linea.is-horizontal .mq-riel{display:block;position:relative;height:44px;width:min(var(--maxw), calc(100% - 2 * var(--gutter)));margin:0 auto;}
.mq-riel__linea{position:absolute;left:0;right:0;top:9px;height:2px;background:color-mix(in srgb, var(--jenn-gris-grafito) 30%, transparent);}
.mq-riel__avance{position:absolute;inset:0;background:var(--jenn-dorado);transform:scaleX(var(--p, 0));transform-origin:left center;}
.mq-riel__nodo{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);font-size:.8125rem;font-weight:600;color:var(--jenn-gris-grafito);transition:color var(--dur-panel) ease;}
.mq-riel__nodo::before{content:"";width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb, var(--jenn-gris-grafito) 45%, transparent);background:var(--jenn-acero);transition:background-color var(--dur-panel) ease, border-color var(--dur-panel) ease;}
.mq-riel__nodo:nth-of-type(2){left:0;}
.mq-riel__nodo:nth-of-type(3){left:50%;}
.mq-riel__nodo:nth-of-type(4){left:100%;}
.mq-riel__nodo.is-on{color:var(--jenn-negro-onix);}
.mq-riel__nodo.is-on::before{background:var(--jenn-dorado);border-color:var(--jenn-dorado);}

/* ===== 3. BOLSA + MÁQUINA (plano oscuro, interactivo) ===== */
.mq-pareja__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s6);align-items:center;}
.mq-pareja__copy{grid-column:1 / span 5;display:flex;flex-direction:column;gap:var(--s5);}
.mq-pareja__fig{grid-column:7 / -1;position:relative;margin:0;}
.pa-lienzo{position:relative;}
.pareja__svg{width:100%;height:auto;}
.pareja__leyenda{border-bottom:1px solid var(--linea-oscura);}
.pareja__leyenda li{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--linea-oscura);font-size:.9375rem;line-height:1.55;color:var(--jenn-gris-perla);}
.pareja__leyenda b{color:var(--jenn-blanco-marfil);font-weight:600;}
.pa-rot{position:absolute;left:50%;transform:translateX(-50%);font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--jenn-gris-perla);white-space:nowrap;pointer-events:none;}
.pa-rot--ancho{top:0;}
.pa-rot--barra{top:81%;}
.pa-falla{opacity:0;transition:opacity var(--dur-hover) ease;}
.pa-control{margin-top:var(--s4);display:grid;gap:var(--s3);}
.pa-control label{font-size:.9375rem;font-weight:600;}
.pa-control input[type="range"]{width:100%;accent-color:var(--jenn-dorado);height:28px;}
.pa-estado{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--jenn-blanco-marfil);}
.pa-estado::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--jenn-dorado);}
.mq-pareja__fig[data-cabe="no"] .pa-falla{opacity:1;}
.mq-pareja__fig[data-cabe="no"] .pa-barra{opacity:.45;}
.mq-pareja__fig[data-cabe="no"] .pa-estado::before{background:transparent;border:2px solid var(--jenn-blanco-marfil);}

/* ===== 4. CÓMO ELEGIR — hoja de requerimientos ===== */
.mq-elegir__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s6);align-items:start;}
.mq-elegir__copy{grid-column:1 / span 4;display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:calc(var(--subnav-h) + 40px);}
.mq-elegir__nota{padding-top:var(--s4);border-top:1px solid var(--linea);font-size:.9375rem;color:var(--jenn-gris-grafito);}
.hoja{grid-column:6 / -1;margin:0;border:1px solid var(--linea-fuerte);background:var(--jenn-plate);box-shadow:var(--sombra-1);}
.hoja__cab{display:flex;justify-content:space-between;gap:var(--s4);padding:12px var(--s5);background:var(--jenn-negro-onix);color:var(--jenn-gris-perla);font-size:.8125rem;font-weight:600;}
.hoja__cab span:first-child{color:var(--jenn-blanco-marfil);}
.hoja__fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--linea);}
.hoja__crit{padding:var(--s5);border-right:1px solid var(--linea);}
.hoja__crit .h3{font-size:1.0625rem;}
.hoja__crit p{margin-top:6px;font-size:.875rem;line-height:1.55;color:var(--jenn-gris-grafito);text-wrap:pretty;}
.hoja__resp{display:flex;flex-direction:column;justify-content:center;padding:var(--s4) var(--s5);border:0;margin:0;min-width:0;}
.hoja__resp input[type="text"]{width:100%;padding:12px 0;border:0;border-bottom:1.5px solid var(--linea-fuerte);background:transparent;font-size:1rem;color:var(--jenn-negro-onix);transition:border-color var(--dur-hover) ease;}
.hoja__resp input[type="text"]::placeholder{color:color-mix(in srgb, var(--jenn-gris-grafito) 80%, transparent);}
.hoja__resp input[type="text"]:focus{outline:none;border-bottom-color:var(--jenn-dorado-tinta);}
.hoja__resp .opciones{gap:6px;}
.hoja__envio{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:end;padding:var(--s5);}
.hoja__envio .btn{width:auto;}
.hoja__preview p{margin-top:6px;white-space:pre-line;font-size:.8125rem;line-height:1.55;color:var(--jenn-gris-grafito);}

/* ===== 6. CIERRE (variante maquinaria): plano de fondo y pasos de asesoría ===== */
.cierre--maq{background:
  linear-gradient(90deg, color-mix(in srgb, var(--jenn-blanco-marfil) 4%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
  linear-gradient(color-mix(in srgb, var(--jenn-blanco-marfil) 4%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
  var(--jenn-negro-onix);}
.cierre__pasos{display:grid;gap:var(--s3);counter-reset:paso;margin-top:var(--s2);}
.cierre__pasos li{display:grid;grid-template-columns:2rem 1fr;column-gap:var(--s3);counter-increment:paso;}
.cierre__pasos li::before{content:counter(paso);grid-row:span 2;font-family:var(--jenn-font-heading);font-size:1.5rem;line-height:1.1;color:var(--jenn-dorado);}
.cierre__pasos h3{font-size:1rem;font-weight:600;color:var(--jenn-blanco-marfil);}
.cierre__pasos p{font-size:.9375rem;color:var(--jenn-gris-perla);}

@media (min-width:961px) and (max-width:1180px){
  .mk-leyenda{grid-template-columns:1fr;}
}
@media (max-width:960px){
  /* Hero móvil: título → equipo → texto */
  .phero--maq .phero__grid{display:flex;flex-direction:column;align-items:stretch;}
  .phero--maq .phero__copy{display:contents;}
  .phero--maq .crumbs{order:1;align-self:flex-start;margin-top:var(--s6);}
  .phero--maq .phero__title{order:2;margin:var(--s4) 0 var(--s5);}
  .mq-bahia{order:3;margin:0 calc(var(--gutter) * -1);padding:var(--s5) var(--gutter);}
  .phero--maq .phero__lede{order:4;margin-top:var(--s6);}
  .phero--maq .phero__actions{order:5;margin-top:var(--s5);}
  .mq-marcas{order:6;margin-block:var(--s5) var(--s7);}
  .mk-leyenda{grid-template-columns:1fr;}
  .mq-linea__head .h2,.mq-linea__head .lede{grid-column:1 / -1;}
  /* La línea en vertical: un riel a la izquierda une las tres estaciones */
  .mq-pista{display:flex;flex-direction:column;gap:var(--s8);padding-inline:var(--gutter);}
  .estacion{grid-template-columns:1fr;row-gap:var(--s4);padding-left:var(--s6);}
  .estacion::before{content:"";position:absolute;left:7px;top:0;bottom:calc(var(--s8) * -1);width:2px;background:color-mix(in srgb, var(--jenn-gris-grafito) 25%, transparent);}
  .estacion:last-of-type::before{bottom:0;}
  .estacion::after{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--jenn-dorado);}
  .mq-pareja__copy,.mq-pareja__fig{grid-column:1 / -1;}
  .mq-elegir__copy,.hoja{grid-column:1 / -1;}
  .mq-elegir__copy{position:static;}
}
@media (max-width:640px){
  .hoja__fila{grid-template-columns:1fr;}
  .hoja__crit{border-right:0;padding-bottom:0;}
  .hoja__resp{padding-top:var(--s2);}
  .hoja__envio{grid-template-columns:1fr;}
  .hoja__envio .btn{width:100%;}
  .hoja__cab span:last-child{display:none;}
  .mq-ciclo{gap:var(--s3);padding:8px 12px;font-size:.75rem;}
  .mq-ciclo ol{gap:var(--s3);}
  .pa-rot{font-size:.6875rem;}
  .mk{width:26px;height:26px;font-size:.75rem;}
}
@media (prefers-reduced-motion: reduce){
  .mk,.mk-leyenda li,.mq-ciclo li,.mq-ciclo i{transition:none;}
}
