/* ============================================================
   NBJJ FRAMING INC · services.css — Services / Servicios (§15)
   S1 ZIGZAG ACORDEON (default casa) + leader-lines Familia D +
   proceso como DIVISOR entre unidades 4 y 5 (0704-g6, flechas curvas)
   ============================================================ */

/* ---------- ajustes de banner de ESTA pagina ---------- */
/* base.css resetea ul pero no ol: sin esto el breadcrumb muestra "1. 2. 3."
   (fix global propuesto en PENDING-GLOBAL-services.md; aqui scoped) */
.banner-crumb ol{list-style:none;margin:0;padding:0;}
/* la foto de servicios es reticula clara y ocupada hasta arriba: velo superior
   fino SOLO para legibilidad del nav (no es el scrim lateral, que viene horneado) */
.banner::after{
  content:'';position:absolute;inset:0 0 auto 0;height:clamp(90px,16vh,150px);z-index:1;
  background:linear-gradient(180deg,rgba(22,23,23,.58),rgba(22,23,23,0));pointer-events:none;
}

/* ---------- cuerpo de unidades (abre directo tras banner, 0704-e4) ---------- */
.sunits{background:var(--paper);padding-top:clamp(6rem,7.8vw,7.5rem);padding-bottom:clamp(3.5rem,5vw,6rem);overflow:clip;}
.sunits--b{padding-top:clamp(5.5rem,7vw,7rem);}
.sunits .ghost-n{right:-1%;top:-1%;font-size:min(15vw,210px);}
.sunits-head{position:relative;z-index:2;max-width:1240px;margin:0 auto clamp(36px,5vw,60px);}
.sunits-head h2{font-size:clamp(2rem,3.6vw,3.4rem);color:var(--ink);max-width:20ch;}
.sunits-head p{margin-top:14px;font-size:16.5px;color:var(--steel-1);max-width:56ch;}

.unit{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(280px,50%) minmax(0,1fr);
  gap:clamp(24px,4.4vw,72px);align-items:start;max-width:1240px;margin:0 auto;
  padding:clamp(34px,4.4vw,56px) 0;border-top:1px solid var(--hairline);
}
.unit:last-of-type{padding-bottom:clamp(20px,3vw,36px);}
.unit--flip .unit-media{order:2;}
.unit--flip .unit-copy{order:1;}
.unit-media{position:relative;}
.unit-frame{
  position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 24px 54px rgba(22,23,23,.16);
}
.unit-frame img{
  position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform;
}
.unit-lead{ /* leader-line callout Familia D: se dibuja al abrir el acordeon */
  position:absolute;inset:0;z-index:3;pointer-events:none;
}
.unit-lead svg{width:100%;height:100%;}
.unit-lead polyline{stroke:rgba(249,249,249,.9);stroke-width:1.5;fill:none;}
.unit-lead rect{fill:var(--accent);}
.unit-lead text{
  font-family:'IBM Plex Sans',Arial,sans-serif;font-size:11px;letter-spacing:2.4px;
  fill:rgba(249,249,249,.92);text-transform:uppercase;
}
.unit-ghost{
  position:absolute;left:-14px;top:-34px;z-index:0;
  font-family:var(--display);font-weight:800;font-size:clamp(4.5rem,8vw,7.5rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(116,119,123,.2);
  pointer-events:none;user-select:none;
}
.unit-copy{position:relative;padding-top:6px;}
.unit-ico{width:50px;height:50px;stroke:var(--accent);stroke-width:1.8;fill:none;margin-bottom:16px;}
.unit-h{font-size:clamp(1.7rem,2.7vw,2.7rem);color:var(--ink);max-width:16ch;}
.unit-pitch{margin-top:12px;font-size:16.5px;color:var(--steel-1);max-width:46ch;}
.unit-acc{margin-top:20px;border-top:1px solid var(--hairline);}
.unit-acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 2px;font-family:var(--body);font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel-1);
}
.unit-acc[open] summary{color:var(--accent);}
.unit-spec{display:grid;gap:18px;padding:6px 2px 20px;}
.unit-spec h4{
  font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel-2);margin-bottom:8px;
}
.unit-spec ul{display:grid;gap:7px;}
.unit-spec li{
  position:relative;padding-left:16px;font-size:15px;color:var(--steel-1);
}
.unit-spec li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--accent);}
.unit-spec ol{display:grid;gap:7px;counter-reset:st;}
.unit-spec ol li{padding-left:26px;}
.unit-spec ol li::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:.1em;width:auto;height:auto;background:none;
  font-family:var(--display);font-weight:700;font-size:.95em;color:var(--accent);
}
.unit-note{font-size:14px;color:var(--steel-2);}
.unit-cta{margin-top:22px;display:inline-flex;}

/* ---------- DIVISOR "COMO TRABAJAMOS" (S-④ entre unidades, banda oscura del piso §15) ---------- */
.pdiv{
  position:relative;background:var(--ink-band);color:var(--paper);overflow:clip;
  padding-top:clamp(5rem,7vw,7.5rem);padding-bottom:clamp(5rem,7vw,7.5rem);
}
.pdiv .ghost-n{left:2%;bottom:-4%;font-size:min(16vw,230px);-webkit-text-stroke:1.5px rgba(164,167,170,.10);}
.pdiv-head{position:relative;z-index:2;text-align:center;margin-bottom:clamp(34px,4.5vw,54px);}
.pdiv-head .eyebrow{color:var(--steel-3);margin-bottom:10px;}
.pdiv-head h2{font-size:clamp(2rem,3.4vw,3.2rem);color:var(--paper);}
.pdiv-head p{margin-top:12px;font-size:15.5px;color:var(--steel-3);max-width:52ch;margin-left:auto;margin-right:auto;}
.pdiv-row{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.4vw,30px);max-width:1240px;margin:0 auto;
}
.pstep{position:relative;text-align:center;padding:0 clamp(4px,1vw,14px);}
.pstep:nth-child(2),.pstep:nth-child(3){transform:translateY(24px);} /* silueta de ruta */
.p-n{
  font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,4.4vw,4.2rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--steel-3);
}
.pstep h3{margin-top:10px;font-size:clamp(1.15rem,1.6vw,1.5rem);color:var(--paper);}
.pstep p{margin-top:8px;font-size:14.5px;color:var(--steel-3);max-width:26ch;margin-left:auto;margin-right:auto;}
.p-arrow{ /* flecha curva que se dibuja (0704-g6) */
  position:absolute;top:8px;right:calc(-1 * clamp(14px,2.4vw,30px) - 8px);width:clamp(40px,4.4vw,64px);
  stroke:var(--steel-3);stroke-width:1.5;fill:none;z-index:3;
}
.p-arrow .ahead{fill:var(--steel-3);stroke:none;}
.pstep:last-child .p-arrow{display:none;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .unit{grid-template-columns:1fr;gap:20px;}
  .unit--flip .unit-media{order:1;}
  .unit--flip .unit-copy{order:2;}
  .pdiv-row{grid-template-columns:1fr 1fr;gap:34px clamp(14px,3vw,30px);}
  .pstep:nth-child(2),.pstep:nth-child(3){transform:none;}
  .p-arrow{display:none;}
}
@media (max-width:560px){
  .pdiv-row{grid-template-columns:1fr;}
}