/* =====================================================================
   MC SYSTEMS COMPANY · services.css — SOLO /services/ + /es/servicios/
   F4 Services · arquetipo S1 zigzag (cap. 13 §15) + banner B1 (§13)
   Familia D Swiss Industrial Blueprint · dualidad FRIO/CALOR
   Dueño exclusivo: este archivo pertenece a la página Services.
   ===================================================================== */

/* anclas con aire (el header global es position:absolute, no fijo; el índice
   NO es sticky — 0720-a #7): sólo un respiro cómodo al saltar a un ancla */
html { scroll-padding-top: 32px; }

/* =====================================================================
   S-① BANNER B1 «PILL ROMPE-MARCO» (§13) — scrim HORNEADO en el asset
   ===================================================================== */
.banner { position:relative; min-height:clamp(360px,46vh,560px); overflow:hidden;
  background:var(--ink); display:flex; align-items:center; justify-content:center; }
.banner-media { position:absolute; inset:-10% 0; z-index:0; }
.banner-media img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.banner-content { position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding-top:clamp(3.2rem,7vh,5rem); }
.banner-eyebrow { color:var(--steel); }
.banner-eyebrow .d { color:#FF6B71; }
.banner-h1 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.6rem,5.5vw,5.6rem); line-height:1; color:var(--paper);
  letter-spacing:.015em; }
.banner-sub { max-width:52ch; font-size:15px; line-height:1.65; color:var(--steel); }
/* ghost del gremio detras del H1 (capa deco lenta) */
.banner-ghost { position:absolute; z-index:1; top:8%; right:3vw;
  font-family:var(--fd); font-weight:700; font-size:min(13vw,220px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(245,247,251,.14);
  pointer-events:none; user-select:none; }
/* pill breadcrumb cortada ~50% por el borde inferior (gesto firma B1);
   su color = superficie de la seccion siguiente (marquee ink-2) = puente literal */
.banner-deco { position:absolute; z-index:3; left:50%; bottom:0;
  transform:translate(-50%,50%); }
.banner-crumb { display:flex; align-items:center; gap:12px; white-space:nowrap;
  background:var(--ink-2); border:1px solid #262E44; border-radius:999px;
  padding:13px 26px; font-family:var(--fu); font-weight:600; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
  box-shadow:0 14px 30px rgba(14,18,32,.35); }
.banner-crumb a { color:var(--paper); text-decoration:none; position:relative; }
.banner-crumb a::after { content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:1.5px; background:var(--ice); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .25s var(--ease); }
.banner-crumb a:hover::after, .banner-crumb a:focus-visible::after { transform:scaleX(1); }
.banner-crumb .d { color:var(--heat); font-family:var(--fd); }
.banner-crumb [aria-current] { color:#8E96A8; }

/* =====================================================================
   ÍNDICE ESTÁTICO DE SECCIÓN (7 unidades ≥6 → obligatorio, §15 S1)
   0720-a #7: JAMÁS sticky. Vive en su bloque bajo el banner y hace de
   fondo claro a la pill breadcrumb; el header global no muta al scrollear.
   ===================================================================== */
.svc-nav { position:relative; z-index:1; background:var(--paper);
  border-bottom:1px solid var(--hairline); }
.svc-nav-in { width:min(92vw,1360px); margin:0 auto; display:flex; align-items:center;
  gap:clamp(10px,1.6vw,22px); overflow-x:auto; scrollbar-width:none;
  padding:34px 0 16px; }
.svc-nav-in::-webkit-scrollbar { display:none; }
.svc-nav .lbl { font-family:var(--fd); font-weight:600; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cold-deep);
  white-space:nowrap; flex:0 0 auto; }
.sn { flex:0 0 auto; display:flex; align-items:center; gap:7px; text-decoration:none;
  font-weight:500; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); padding:6px 2px; white-space:nowrap; }
.sn i { font-family:var(--fd); font-weight:600; font-style:normal; font-size:11px;
  color:var(--steel); font-variant-numeric:tabular-nums; }
.sn u { text-decoration:none; position:relative; }
.sn u::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--heat); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .25s var(--ease); }
.sn:hover u::after, .sn:focus-visible u::after, .sn.on u::after { transform:scaleX(1); }
.sn.on { color:var(--heat-deep); }
.sn.on i { color:var(--heat); }

/* =====================================================================
   S-② INTERSTICIAL: MARQUEE «SERVICE Δ MAINTENANCE Δ INSTALLATION»
   (banda oscura del piso §15; GSAP mueve, transform-only, pausado fuera)
   ===================================================================== */
.svc-marquee { position:relative; background:var(--ink-2); overflow:hidden;
  padding:clamp(2.6rem,5vw,4rem) 0; }
.mq-track { display:flex; white-space:nowrap; will-change:transform; }
.mq-seg { display:flex; align-items:baseline; flex:0 0 auto; padding-right:.7em;
  font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.2rem,5vw,4.4rem); line-height:1; letter-spacing:.02em; }
.mq-seg .w { color:var(--paper); }
.mq-seg .o { color:transparent; -webkit-text-stroke:1.5px rgba(245,247,251,.35); }
.mq-seg .d { color:var(--heat); font-size:.55em; padding:0 .55em; align-self:center; }
.svc-marquee .mq-cap { width:min(92vw,1360px); margin:clamp(1.2rem,2.4vw,1.8rem) auto 0;
  font-size:13.5px; color:var(--steel); display:flex; gap:18px; flex-wrap:wrap;
  justify-content:space-between; }
.svc-marquee .mq-cap b { color:var(--paper); font-weight:600; }

/* =====================================================================
   S-③ CUERPO — UNIDAD-SERVICIO S1 ZIGZAG (7 puntos, §15)
   ===================================================================== */
.svc-body { position:relative; background:var(--paper);
  padding:clamp(4.5rem,8vw,7.5rem) 0 clamp(3rem,6vw,5rem); }
/* regla de ticks de termometro en el borde izquierdo (P7 — detalle del oficio) */
.svc-body::before { content:""; position:absolute; left:calc(4vw - 1px); top:4%; bottom:4%;
  width:1px; background:repeating-linear-gradient(180deg,
    var(--hairline) 0 2px, transparent 2px 26px); pointer-events:none; }
/* 0720-a #9: cada servicio abarca buen alto de pantalla (min-height cómodo)
   y respira; nada de tarjeta apretada */
.unit { position:relative; width:min(92vw,1280px); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,45%) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4.75rem); align-items:center;
  min-height:clamp(520px,64vh,660px);
  padding:clamp(3.4rem,5.5vw,5rem) 0; }
.unit + .unit { border-top:1px solid var(--hairline); }
.unit.alt { grid-template-columns:minmax(0,1fr) minmax(0,45%); }
.unit.alt .u-photo { order:2; }
/* foto: panel radius + sombra + micro-parallax interior (img oversized) */
.u-photo { position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 22px 44px rgba(16,20,31,.14); background:var(--paper-2); }
.u-photo img { position:absolute; inset:-8% 0; width:100%; height:116%;
  object-fit:cover; }
/* numeral ghost hueco de la unidad (tratamiento 2 de la display) */
.u-num { position:absolute; z-index:0; top:clamp(1.2rem,2.4vw,2rem); right:0;
  font-family:var(--fd); font-weight:700; font-size:min(9vw,150px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(44,49,153,.16);
  pointer-events:none; user-select:none; font-variant-numeric:tabular-nums; }
.unit.alt .u-num { right:auto; left:0; }
.u-copy { position:relative; z-index:1; }
.u-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.u-icon { flex:0 0 auto; width:46px; height:46px; border:1.5px solid var(--cold);
  border-radius:12px; display:grid; place-items:center; color:var(--cold); }
.unit.hot-u .u-icon { border-color:var(--heat); color:var(--heat-deep); }
.u-icon svg { width:26px; height:26px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:square; stroke-linejoin:miter; }
.u-copy h3 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.45rem,2.4vw,2.1rem); line-height:1.06; color:var(--ink); }
.u-pitch { font-size:16px; line-height:1.62; color:#39404F; max-width:54ch;
  margin-bottom:18px; }
.u-pitch b { color:var(--heat-deep); font-weight:600; }
/* fila de chips: equipo/entregables concretos del rubro (detalle específico) */
.u-tags { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px;
  max-width:56ch; }
.u-tags li { font-family:var(--fu); font-weight:500; font-size:12px; letter-spacing:.02em;
  line-height:1; color:var(--cold-deep); background:rgba(44,49,153,.06);
  border:1px solid rgba(44,49,153,.16); border-radius:999px; padding:6px 13px; }
.unit.hot-u .u-tags li { color:var(--heat-deep); background:rgba(214,1,10,.05);
  border-color:rgba(214,1,10,.18); }
.u-bullets { list-style:none; margin:0 0 24px; display:grid; gap:11px; max-width:58ch; }
.u-bullets li { position:relative; padding-left:24px; font-size:14.5px; line-height:1.55;
  color:var(--ink); }
/* end-cap cuadrado blueprint como viñeta */
.u-bullets li::before { content:""; position:absolute; left:0; top:.44em;
  width:7px; height:7px; background:var(--cold); }
.unit.hot-u .u-bullets li::before { background:var(--heat); }
.u-cta { display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--fu); font-weight:600; font-size:14px; color:var(--heat-deep); }
.u-cta .arr2 { display:inline-block; font-style:normal; color:var(--heat); }
.u-cta u { text-decoration:none; position:relative; }
.u-cta u::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--heat); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .25s var(--ease); }
.u-cta:hover u::after, .u-cta:focus-visible u::after { transform:scaleX(1); }
/* subtitulo-pregunta AEO (respuesta directa primero, 0718-i) */
.u-q { font-family:var(--fd); font-weight:600; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cold-deep); margin-bottom:8px; }

/* =====================================================================
   S-④ «HOW WE WORK» — 4 pasos, verbos del gremio (④ compacto §6)
   ===================================================================== */
.how { position:relative; background:var(--paper-2); overflow:hidden;
  padding:clamp(4.5rem,8vw,7rem) 0; }
/* patron filtro-plisado tone-on-tone 6% (P7) */
.how::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg,
    rgba(44,49,153,.05) 0 2px, transparent 2px 26px); }
.how-ghost { position:absolute; top:6%; left:2vw; font-family:var(--fd); font-weight:700;
  font-size:min(14vw,230px); line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(44,49,153,.10); pointer-events:none; user-select:none; }
.how-in { position:relative; width:min(92vw,1280px); margin:0 auto; }
.how-head { max-width:60ch; margin-bottom:clamp(2.4rem,4.5vw,3.6rem); }
.how-head .kicker { color:var(--cold-deep); margin-bottom:12px; }
.how-head h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.05; color:var(--ink); }
.how-head h2 em { font-style:normal; color:var(--heat); }
.how-grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,2.4vw,2rem); }
/* camino punteado que se dibuja (SVG detras de los pasos) */
.how-path { position:absolute; left:0; right:0; top:34px; height:2px; z-index:0; }
.how-path path { stroke:var(--cold); stroke-width:2; stroke-dasharray:6 8; fill:none;
  opacity:.45; }
.step { position:relative; z-index:1; }
.step-badge { width:68px; height:68px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--fd); font-weight:700; font-size:19px;
  font-variant-numeric:tabular-nums; background:var(--paper);
  border:1.5px solid var(--cold); color:var(--cold-deep); margin-bottom:16px;
  box-shadow:0 10px 22px rgba(16,20,31,.10); }
.step:last-child .step-badge { background:var(--heat); border-color:var(--heat);
  color:#fff; box-shadow:0 12px 26px rgba(214,1,10,.28); }
.step h3 { font-family:var(--fd); font-weight:600; text-transform:uppercase;
  font-size:15.5px; letter-spacing:.04em; color:var(--ink); margin-bottom:8px; }
.step p { font-size:13.5px; line-height:1.55; color:#39404F; max-width:26ch; }

/* =====================================================================
   S-⑤ CTA (⑤ íntegro — mismas clases y receta del bloque del sitio)
   ===================================================================== */
.cta-band { position:relative; height:64vh; min-height:460px; overflow:hidden;
  background:var(--ink-2); }
.cta-photo { position:absolute; inset:-10% 0; }
.cta-photo img { width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.cta-scrim { position:absolute; inset:0; background:rgba(14,18,32,.8); }
.cta-inner { position:relative; z-index:3; width:min(92vw,1200px); margin:0 auto;
  height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:20px; }
.cta-inner .kicker { color:var(--steel); }
.cta-inner .kicker .d { color:#FF6B71; }
.cta-inner h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.1rem,4.6vw,3.9rem); line-height:1.03; color:var(--paper); }
.cta-inner h2 em { font-style:normal; color:var(--ice); }
.cta-inner p { font-size:15px; color:var(--steel); max-width:52ch; }
.cta-btns { display:flex; gap:14px; flex-wrap:nowrap; }
.cta-eco { position:absolute; right:3vw; bottom:-4%; z-index:2; width:min(22vw,300px);
  opacity:.9; pointer-events:none; }

/* =====================================================================
   MQ (ley l) — 1080 / 900 / 760 / 560
   ===================================================================== */
@media (max-width:1080px) {
  .svc-nav .lbl { display:none; }
}
@media (max-width:900px) {
  .unit, .unit.alt { grid-template-columns:1fr; gap:1.6rem;
    min-height:0; padding:clamp(2.8rem,7vw,3.6rem) 0; }
  .unit.alt .u-photo { order:0; }
  .u-num { top:auto; bottom:100%; transform:translateY(58%); font-size:min(16vw,110px); }
  .how-grid { grid-template-columns:1fr 1fr; gap:2rem 1.4rem; }
  .how-path { display:none; }
}
@media (max-width:760px) {
  html { scroll-padding-top:76px; }
  .banner { min-height:clamp(320px,52svh,460px); }
  .banner-h1 { font-size:clamp(2.3rem,11vw,3.2rem); }
  .banner-sub { max-width:88vw; font-size:14px; }
  .banner-ghost { font-size:26vw; top:5%; }
  .banner-crumb { padding:11px 20px; font-size:11.5px; gap:9px; }
  .svc-body { padding-top:3.4rem; }
  .svc-body::before { display:none; }
  .u-photo img { inset:0; height:100%; } /* sin parallax interior en mobile */
  .cta-band { height:auto; min-height:0; padding:clamp(4rem,14vw,6rem) 0; }
  .cta-inner { padding:0; }
  .cta-btns { flex-direction:column; width:min(78vw,320px); }
  .cta-eco { display:none; }
}
@media (max-width:560px) {
  .how-grid { grid-template-columns:1fr; }
  .step p { max-width:none; }
  .mq-seg { font-size:clamp(1.7rem,8vw,2.2rem); }
}

/* reduced-motion: la pagina compone estatica (base.css ya libera .rv/[data-pre]) */
@media (prefers-reduced-motion: reduce) {
  .mq-track { transform:none!important; }
  .u-photo img { inset:0; height:100%; }
}