/* =====================================================================
   RANGO CREATIVE STUDIO — /servicios
   Sección aprobada, mudada tal cual desde la home (Fase 3, paso 2).
   ===================================================================== */

/* =====================================================================
   3 · SERVICIOS — tres pilares enhebrados por una espina roja
   ===================================================================== */
.services { padding-block: var(--space-8); background: var(--bg-elev); }

.pillars { list-style: none; position: relative; padding-left: var(--space-6); }
/* Una sola línea recorre los tres: "integrados en un mismo equipo".
   Reposo = dibujada al 100%; GSAP la anima desde scaleY(0) con scrub. */
.pillars__spine { position: absolute; left: 0; top: 0; bottom: 0; width: var(--bw);
  background: var(--red); transform-origin: top; }

/* baseline: el número se asienta en la línea base del título, no flota sobre él */
.pillar { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
  align-items: baseline; padding-block: var(--space-6); }
.pillar + .pillar { border-top: var(--bw-thin) solid var(--line); }
.pillar__n { font-family: var(--font-display); color: var(--ink-faint);
  font-size: var(--fs-400); line-height: 1; }

.pillar__title { font-size: var(--fs-500); line-height: 1; }
.pillar__title span { position: relative; display: inline-block; }
/* Barrido rojo bajo el título, solo donde hay puntero real */
@media (hover: hover) {
  .pillar__title span::after {
    content: ""; position: absolute; left: 0; bottom: -0.12em; height: 0.09em; width: 0;
    background: var(--red); transition: width var(--dur) var(--ease-out-expo);
  }
  .pillar:hover .pillar__title span::after { width: 100%; }
}
.pillar__desc { margin-top: var(--space-4); max-width: 64ch;
  color: var(--ink-muted); font-size: var(--fs-300); line-height: 1.6; }

/* Entregables: texto separado por filetes, nunca tarjetas */
.pillar__subs { list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--space-4) 0; margin-top: var(--space-5); }
.pillar__sub { padding-inline: var(--space-4); border-left: var(--bw-thin) solid var(--line); max-width: 30ch; }
.pillar__sub:first-child { padding-left: 0; border-left: 0; }
.pillar__sub b { display: block; color: var(--red); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: var(--fs-200); }
.pillar__sub span { color: var(--ink-faint); font-size: var(--fs-100); line-height: 1.5; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 680px) {
  /* El número sube sobre el título; los entregables se apilan */
  .pillars { padding-left: var(--space-5); }
  .pillar { grid-template-columns: 1fr; gap: var(--space-3); }
  .pillar__subs { flex-direction: column; gap: var(--space-4); }
  .pillar__sub { max-width: none; padding-inline: 0; padding-left: var(--space-4);
    border-left: var(--bw-thin) solid var(--line); }
  .pillar__sub:first-child { padding-left: var(--space-4); border-left: var(--bw-thin) solid var(--line); }
}