/* ==========================================================================
   how.css — Cómo funciona (3 pasos) + bento de beneficios
   ========================================================================== */
.how { background: var(--white); }
.how__head { max-width: 820px; }
.steps { position: relative; margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step { position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--bg); border: 1px solid var(--line-light); overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.step:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -40px rgba(15, 27, 51, .4); }
.step__vis { position: relative; height: 240px; background: var(--navy); display: grid; place-items: center; overflow: hidden; }
.step__num { position: absolute; top: 18px; left: 20px; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--ice); }
.step__body { padding: 28px 28px 34px; }
.step__body h3 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--navy); }
.step__body p { margin-top: 12px; font-size: 16px; color: var(--slate); }

/* Visual 1: sensor que emite ondas (eco del isotipo) */
.puck { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 10px rgba(50, 113, 234, .25), inset 0 -8px 16px rgba(0, 0, 0, .25); display: grid; place-items: center; }
.puck::after { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--white); }
.wave { position: absolute; inset: 50%; width: 84px; height: 84px; margin: -42px; border-radius: 50%; border: 2px solid var(--ice); opacity: 0; animation: emit 3s var(--ease) infinite; }
.step__vis .wave:nth-of-type(2) { animation-delay: 1s; }
.step__vis .wave:nth-of-type(3) { animation-delay: 2s; }
@keyframes emit { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.1); opacity: 0; } }
/* Visual 2: dato viajando */
.link { position: relative; width: 78%; height: 90px; }
.link svg { width: 100%; height: 100%; overflow: visible; }
.link path { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 2; stroke-dasharray: 5 7; }
.link .node { fill: var(--blue); }
.link .node--end { fill: var(--ice); }
.packet { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--white); box-shadow: 0 0 16px 3px var(--ice); offset-path: path('M22 65 C 90 65, 110 20, 180 20 S 260 65, 300 45'); animation: travel 3.4s var(--ease-io) infinite; }
@keyframes travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* Visual 3: notificación */
.phone { width: 78%; display: grid; gap: 10px; }
.notif { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .95); color: var(--navy); font-size: 13px; font-weight: 700; line-height: 1.25; animation: pop 4s var(--ease) infinite; opacity: 0; }
.notif:nth-child(2) { animation-delay: .6s; }
.notif:nth-child(3) { animation-delay: 1.2s; }
.notif i { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--warn-bg); display: grid; place-items: center; color: var(--warn-ink); font-style: normal; font-weight: 800; }
.notif small { display: block; font-weight: 600; color: var(--slate); font-size: 11.5px; }
.notif--3 i { background: var(--ok-bg); color: var(--ok-ink); }
@keyframes pop { 0%, 8% { opacity: 0; transform: translateY(14px) scale(.96); } 18%, 78% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
/* Con "reducir movimiento" las notificaciones quedan visibles y quietas (si no, terminan en opacity 0) */
@media (prefers-reduced-motion: reduce) { .notif { opacity: 1; animation: none; } }

/* Bento */
.bento-wrap { margin-top: clamp(56px, 7vw, 96px); }
.bento { margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 20px; }
.tile { position: relative; padding: 30px; border-radius: var(--r-l); background: var(--bg); border: 1px solid var(--line-light); overflow: hidden; display: flex; flex-direction: column; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.tile:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(15, 27, 51, .4); }
.tile h3 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--navy); }
.tile p { margin-top: 10px; font-size: 15.5px; color: var(--slate); max-width: 420px; }
.tile--wide { grid-column: span 4; background: var(--navy); border-color: transparent; flex-direction: row; gap: 24px; align-items: stretch; }
.tile--wide h3 { color: var(--white); font-size: clamp(28px, 3.2vw, 40px); }
.tile--wide p { color: var(--on-dark); }
.tile--sm { grid-column: span 2; }
.tile__text { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.tile__vis { margin-top: auto; padding-top: 22px; }

.escalate { flex: 1; display: grid; align-content: center; gap: 12px; min-width: 240px; }
.escalate__row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line-dark); font-size: 14px; font-weight: 700; color: var(--white); }
.escalate__row small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.escalate__row b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ice); color: var(--navy); font-size: 13px; }
.escalate__row--2 { opacity: .8; transform: translateX(14px); }
.escalate__row--3 { opacity: .55; transform: translateX(28px); }

.lights { display: flex; flex-wrap: wrap; gap: 10px; }
.lights span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.lights i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.lights .g { background: var(--ok-bg); color: #047857; }
.lights .a { background: var(--warn-bg); color: var(--warn-ink); }
.lights .r { background: var(--crit-bg); color: #b91c1c; }
.doc { display: grid; gap: 8px; }
.doc div { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); color: var(--navy); font-variant-numeric: tabular-nums; }
.doc span { color: var(--slate); }
/* Filas de estado: punto de color + nombre + nota (sucursales, equipos en riesgo). El 2.º punto va en ámbar. */
.status-rows { display: grid; gap: 8px; }
.status-rows div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--navy); padding: 9px 11px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); }
.status-rows i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.status-rows div:nth-child(2) i { background: var(--warn); }
.status-rows em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--slate); font-size: 12px; }

/* Franja de cierre del bento: liviana a propósito, son 4 etiquetas, no otra card de beneficio */
.metrics-strip { margin-top: 20px; padding: 26px 30px; border-radius: var(--r-l); background: var(--bg); border: 1px solid var(--line-light); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.metrics-strip:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(15, 27, 51, .4); } /* igual que .tile */
.metrics-strip h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.metrics-strip p { margin-top: 6px; font-size: 15px; color: var(--slate); max-width: 560px; }
.metrics { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.metrics div { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-light); transition: transform .3s var(--ease), border-color .3s; }
.metrics div:hover { transform: translateY(-2px); border-color: var(--blue); }
.metrics svg { width: 18px; height: 18px; flex: none; color: var(--blue); }
.metrics span { font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; }

@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr; }
  .step { flex-direction: row; }
  .step__vis { width: 42%; height: auto; min-height: 240px; flex: none; }
  .step__body { align-self: center; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--wide { grid-column: span 2; }
  .tile--sm { grid-column: span 1; }
}
@media (max-width: 640px) {
  .step { flex-direction: column; }
  .step__vis { width: 100%; height: 220px; min-height: 0; }
  .bento { grid-template-columns: 1fr; }
  .tile--wide, .tile--sm { grid-column: span 1; }
  .tile { padding: 26px 22px; } /* más ancho útil para las filas de estado en 360–375 px */
  .tile--wide { flex-direction: column; }
  .metrics-strip { padding: 22px 20px; }
  /* Las cuatro señales en grilla 2×2 pareja (en fila libre quedaban 2 + 1 + 1, desparejas) */
  .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metrics div { min-height: 56px; padding: 10px 14px; border-radius: 18px; }
  .metrics span { white-space: normal; font-size: 13.5px; line-height: 1.25; }
}