/* H&S — process (parte de la antigua home.css). Depende de tokens.css y base.css. */
/* ---------- Proceso + banda CTA ---------- */
.hs-process { display: grid; gap: 20px; }
@media (min-width: 768px) { .hs-process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hs-process { grid-template-columns: repeat(4, 1fr); } }
.hs-step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 22px; overflow: visible; }
.hs-step__num { position: absolute; top: 12px; right: 16px; font-family: var(--font-display); font-size: 46px; font-weight: 800; font-style: italic; line-height: 1; color: var(--blue-soft); }
.hs-step h3 { width: fit-content; max-width: 100%; padding-bottom: 8px; font-size: 16px; font-weight: 700; background: linear-gradient(90deg, var(--lime), var(--lime-bright)) no-repeat left bottom / 100% 3px; }
/* Subrayado secuencial: main.js arma (.is-armed) y lo dispara (.is-drawn) al entrar en pantalla.
   Cada paso tarda 1.6 s y el siguiente empieza al terminar; sin JS queda todo dibujado. */
.hs-process.is-armed .hs-step h3 { background-size: 0 3px; }
.hs-process.is-drawn .hs-step h3 { background-size: 100% 3px; transition: background-size 1.6s cubic-bezier(.4, 0, .2, 1); }
.hs-process.is-drawn .hs-step:nth-child(1) h3 { transition-delay: .2s; }
.hs-process.is-drawn .hs-step:nth-child(2) h3 { transition-delay: 2.2s; }
.hs-process.is-drawn .hs-step:nth-child(3) h3 { transition-delay: 4.2s; }
.hs-process.is-drawn .hs-step:nth-child(4) h3 { transition-delay: 6.2s; }
.hs-step p { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
@media (min-width: 1024px) {
  .hs-step:not(:last-child)::after { content: ""; position: absolute; top: 50px; right: -21px; width: 22px; height: 3px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 10px rgba(150, 220, 0, .6); transform-origin: left center; }
  .hs-process.is-armed .hs-step:not(:last-child)::after { transform: scaleX(0); }
  .hs-process.is-drawn .hs-step:not(:last-child)::after { transform: scaleX(1); transition: transform .4s ease-out; }
  .hs-process.is-drawn .hs-step:nth-child(1)::after { transition-delay: 1.8s; }
  .hs-process.is-drawn .hs-step:nth-child(2)::after { transition-delay: 3.8s; }
  .hs-process.is-drawn .hs-step:nth-child(3)::after { transition-delay: 5.8s; }
}
.hs-band { position: relative; display: flex; flex-direction: column; gap: 24px; margin-top: 48px; padding: 48px 32px; overflow: hidden; border-radius: var(--radius-xl); background: radial-gradient(circle at 85% 10%, rgba(27, 182, 230, .35), transparent 45%), linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); box-shadow: var(--shadow-band), inset 0 1px 0 rgba(124, 188, 255, .35); border: 1px solid var(--line-lime); }
.hs-band h2 { color: var(--on-navy); font-size: clamp(24px, 20px + 1.2vw, 34px); line-height: 1.2; font-weight: 800; font-style: italic; }
.hs-band p { color: var(--on-navy-muted); max-width: 40rem; margin-top: 8px; }
@media (min-width: 1024px) { .hs-band { flex-direction: row; align-items: center; justify-content: space-between; padding: 52px 56px; } .hs-band .hs-actions { flex-shrink: 0; } }

/* ---------- Cierre de "Cómo trabajamos": fotos del equipo ---------- */
.hs-closing { display: grid; gap: 20px; margin-top: 48px; }
@media (min-width: 900px) { .hs-closing { max-width: 760px; margin-inline: auto; } }
.hs-closing figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--line-strong); box-shadow: var(--shadow-band); background: var(--navy); }
.hs-closing img { display: block; width: 100%; height: 100%; aspect-ratio: 6 / 5; object-fit: cover; transition: transform .8s; }
@media (min-width: 900px) { .hs-closing img { aspect-ratio: auto; min-height: 460px; } }
.hs-closing figure:hover img { transform: scale(1.03); }
.hs-closing figcaption { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 4px; padding: 56px 24px 22px; background: linear-gradient(180deg, transparent 0%, rgba(0, 20, 60, .88) 70%); color: var(--on-navy); }
.hs-closing__kicker { font-family: var(--font-wide); font-size: 11px; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; color: var(--lime-bright); }
.hs-closing figcaption strong { font-family: var(--font-display); font-size: clamp(18px, 16px + .6vw, 24px); line-height: 1.25; font-weight: 800; font-style: italic; }