/* Home: sección "Cómo funciona" (4 pasos conectados, UI nativa). Hoja propia de index.html */
.hw { --ink: #0B1028; --violet: #5B2CFF; --lav: #EEE9FF; --canvas: #F4F3FB; position: relative; padding: 96px 0 84px; overflow-x: clip; background: radial-gradient(900px 420px at 12% 8%, rgba(123,77,255,.09), transparent 70%), radial-gradient(900px 420px at 92% 12%, rgba(123,77,255,.08), transparent 70%), #fbfaff; scroll-margin-top: 84px; }
.hw-head { display: grid; justify-items: center; text-align: center; margin-bottom: 52px; }
.hw-eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 20px; color: var(--violet); font: 600 .8rem/1 Inter, "Segoe UI", Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.hw-eyebrow span { width: 34px; height: 1px; background: currentColor; }
.hw-head h2 { margin: 0 0 20px; max-width: 900px; font-family: Manrope, "Segoe UI", Arial, sans-serif; font-weight: 600; font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.04em; color: var(--ink); }
.hw-head h2 em { display: block; font-style: normal; color: var(--violet); }
.hw-head p:last-child { max-width: 780px; margin: 0; color: #667092; font: 400 1.15rem/1.6 Inter, "Segoe UI", Arial, sans-serif; }

.hw-flow { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1.05fr) 44px minmax(0, 1fr); align-items: stretch; margin: 0; padding: 0; list-style: none; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.hw-flow.reveal, .hw-flow.reveal.visible { opacity: 1; transform: none; transition: none; }
.hw-step { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 20px 20px; border: 1px solid #e9e5fb; border-radius: 24px; background: #fff; box-shadow: 0 24px 50px rgba(56,41,142,.08), 0 2px 8px rgba(56,41,142,.04); }
.hw-arrow { position: relative; display: grid; align-content: start; justify-items: center; padding-top: 118px; }
.hw-arrow::before { content: ""; position: absolute; top: 137px; left: -6px; right: -6px; border-top: 1px dashed #d4cbf7; }
.hw-arrow span { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #e3ddfb; border-radius: 50%; color: var(--violet); background: #fff; box-shadow: 0 8px 20px rgba(91,44,255,.14); font-size: 1.1rem; font-weight: 600; }

.hw-sh { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.hw-num { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #5B2CFF, #8a5cff); font: 600 1.25rem/1 Manrope, "Segoe UI", Arial, sans-serif; box-shadow: 0 10px 22px rgba(91,44,255,.28); }
.hw-sh small { display: block; margin: 2px 0 4px; color: var(--violet); font: 600 .68rem/1 Inter, "Segoe UI", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.hw-sh h3 { margin: 0; color: var(--ink); font: 600 1.3rem/1.15 Manrope, "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; }
.hw-txt { min-height: 5.6em; margin: 0 0 16px; color: #6a7394; font-size: .95rem; line-height: 1.5; }

.hw-ui { flex: 1; padding: 14px; border: 1px solid #eee9fb; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(56,41,142,.06); font-size: .74rem; color: var(--ink); }
.hw-ui strong { display: block; font-weight: 600; }
.hw-ui small { display: block; color: #7a84a5; font-size: .68rem; line-height: 1.35; }
.hw-dots { margin-left: auto; padding: 0 6px; border: 1px solid #eee9fb; border-radius: 8px; color: #7a84a5; font-style: normal; letter-spacing: .1em; }
.hw-logo { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--ink); font: 600 1rem/1 Manrope, "Segoe UI", Arial, sans-serif; }
.hw-logo.sm { width: 22px; height: 22px; border-radius: 6px; font-size: .7rem; }
.hw-acct { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hw-acct strong { font-size: .85rem; }
.hw-tabs { display: flex; gap: 14px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #eee9fb; color: #6a7394; font-size: .7rem; }
.hw-tabs .on { position: relative; color: var(--violet); font-weight: 600; }
.hw-tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--violet); }
.hw-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.hw-kpis > div { padding: 8px; border: 1px solid #eee9fb; border-radius: 10px; background: #fbfaff; }
.hw-kpis small { font-size: .62rem; }
.hw-kpis strong { margin: 1px 0; font: 600 1.05rem/1.2 Inter, "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; }
.hw-kpis em { font-style: normal; font-size: .64rem; font-weight: 600; }
.hw-kpis .up { color: #1f9d55; }
.hw-ui h4 { margin: 0 0 8px; font-size: .78rem; font-weight: 600; }
.hw-list, .hw-tl, .hw-sigs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hw-list li, .hw-tl li { display: flex; align-items: center; gap: 10px; }
.hw-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--violet); background: var(--lav); }
.hw-ic.ok { color: #1a9a8b; background: #dff5f1; }

.hw-pulse-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #f0edfb; }
.hw-pulse-h strong { display: inline; font-size: .74rem; letter-spacing: .03em; white-space: nowrap; }
.hw-pulse-h em { white-space: nowrap; }
.hw-pulse-h .hw-dots { margin-left: auto; }
.hw-pulse-h em { padding: 3px 9px; border-radius: 999px; color: var(--violet); background: var(--lav); font-style: normal; font-size: .64rem; font-weight: 600; }
.hw-pi { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--violet); background: var(--lav); }
.hw-sigs li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; }
.hw-sigs li.r { background: #fde9ec; }
.hw-sigs li > div { flex: 1; min-width: 0; }
.hw-sigs b { color: #9aa1bd; font-size: 1.1rem; font-weight: 400; }
.hw-si { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #e5394f; font-weight: 700; font-size: .95rem; }
.hw-si.a { background: #f5a623; }
.hw-si.v { color: var(--violet); background: var(--lav); }

.hw-dec-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.hw-dec-h > div { flex: 1; min-width: 0; }
.hw-dec-h strong { font-size: .88rem; }
.hw-dec-h em { padding: 3px 9px; border-radius: 999px; color: #b9770e; background: #fff1d6; font-style: normal; font-size: .64rem; font-weight: 600; }
.hw-fields { display: grid; gap: 8px; margin: 0 0 14px; }
.hw-fields > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 8px; }
.hw-fields dt { color: #7a84a5; font-size: .66rem; }
.hw-fields dd { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; padding: 5px 9px; border: 1px solid #eee9fb; border-radius: 10px; }
.hw-fields dd > div { flex: 1; min-width: 0; }
.hw-fields dd > strong { flex: 1; font-size: .72rem; }
.hw-fields dd i { color: #7a84a5; font-style: normal; }
.hw-av { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #8a5cff; font-size: .58rem; font-weight: 600; }
.hw-btns { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; }
.hw-btn { display: grid; place-items: center; min-height: 38px; padding: 0 8px; border: 1px solid #e6e1fb; border-radius: 10px; color: var(--ink); background: #fbfaff; font-weight: 600; font-size: .72rem; text-align: center; }
.hw-btn.p { border-color: transparent; color: #fff; background: linear-gradient(135deg, #4d24ff, #7b4dff); box-shadow: 0 8px 18px rgba(77,36,255,.28); }

.hw-th { margin: 0 0 12px !important; font-size: .85rem !important; }
.hw-tl { position: relative; gap: 14px; }
.hw-tl::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 16px; width: 1px; background: #e6e1fb; }
.hw-tl li { position: relative; }
.hw-tl li > div { flex: 1; min-width: 0; }
.hw-tl time { flex: none; color: #8a92b0; font-size: .62rem; text-align: right; }
.hw-demo { margin: 22px 0 0; color: #98a0ba; font: 500 .72rem/1 Inter, "Segoe UI", Arial, sans-serif; text-align: center; }

/* Motion sutil: cabecera y luego 01 → 04 (solo si hay JS) */
.js .hw-flow.reveal .hw-step { opacity: 0; transform: translateY(12px); }
.js .hw-flow.reveal.visible .hw-step { opacity: 1; transform: none; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.2s + var(--i) * .12s); }
.js .hw-flow.reveal .hw-arrow { opacity: 0; }
.js .hw-flow.reveal.visible .hw-arrow { opacity: 1; transition: opacity .3s ease .6s; }

@media (max-width: 1240px) {
  .hw-flow { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); }
  .hw-step { padding: 18px 14px 16px; }
  .hw-num { width: 44px; height: 44px; }
  .hw-sh h3 { font-size: 1.1rem; }
}
@media (max-width: 1100px) {
  .hw { padding: 76px 0 64px; }
  .hw-flow { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .hw-arrow { padding: 0; height: 56px; }
  .hw-arrow::before { top: 0; bottom: 0; left: 50%; right: auto; border-top: 0; border-left: 1px dashed #d4cbf7; }
  .hw-arrow span { align-self: center; transform: rotate(90deg); }
  .hw-txt { min-height: 0; }
}
@media (max-width: 560px) {
  .hw { padding: 60px 0 52px; }
  .hw-head { margin-bottom: 34px; }
  .hw-head h2 { font-size: clamp(2.1rem, 9.4vw, 2.6rem); }
  .hw-head p:last-child { font-size: 1rem; }
  .hw-step { padding: 18px 14px 16px; border-radius: 20px; }
  .hw-fields > div { grid-template-columns: 70px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hw-flow.reveal .hw-step, .js .hw-flow.reveal .hw-arrow { opacity: 1; transform: none; transition: none; }
}