/* =========================================================
   KONNECT V4 — Pulido compartido
   Cargado en todas las páginas después de ambient.css.
   1. Pictogramas funcionales propios (assets/images/pictos.svg) que
      sustituyen iconos 3D genéricos.
   2. Señales y numeraciones que reemplazan iconos decorativos.
========================================================= */

.k-picto { display: block; flex: none; width: 48px; height: 48px; color: var(--k-aqua); }

/* Señal "en vivo": sustituye el pin de ubicación en "Nacional". El halo es
   un pseudoelemento con transform/opacity (compuesto) y se repite pocas
   veces: nada queda animándose en reposo. */
.home-people__signal, .nos-hero__pulse {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--k-aqua);
}
.home-people__signal::after, .nos-hero__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--k-aqua);
  opacity: 0;
}
.home-people__tile--reach .home-people__signal { position: absolute; top: 24px; right: 24px; }
.nos-tile--reach .home-people__signal { grid-row: span 2; align-self: center; justify-self: center; width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .home-people__signal::after, .nos-hero__pulse::after { animation: k-signal 2.4s cubic-bezier(0.23, 1, 0.32, 1) 1s 4; }
}
@keyframes k-signal { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.2); opacity: 0; } }

/* Inicio · aside de preguntas */
.home-faq__picto { width: 56px; height: 56px; margin-bottom: 16px; }

/* Automotriz y Seguros · "Qué decide la institución" */
.dv-decision { padding-top: clamp(26px, 3vw, 40px); }
.dv-decision__picto { width: 44px; height: 44px; margin-bottom: 16px; color: var(--hue-text, var(--k-aqua)); }

/* Seguros · el escudo por capas protege el isotipo oficial de la línea */
.seg-shield__icon--iso { width: 24%; }
.seg-scope__picto { width: 52px; height: 52px; margin-bottom: 16px; color: var(--hue-text, var(--k-aqua)); }

/* Marketplace · pasos numerados (lenguaje de los cuatro momentos) */
.mkt-step__num {
  position: absolute;
  top: 14px;
  right: 20px;
  font-family: var(--k-font-display);
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245, 247, 255, 0.42);
}

/* Comunidad · valores */
.nos-value__icon { width: 56px; height: 56px; color: var(--k-aqua); }
@media (max-width: 767px) { .nos-value__icon { display: block; width: 44px; height: 44px; } }

/* PyME · isotipo de la línea y escalas de negocio */
.pyme-need__icon--iso { top: 24px; right: 26px; width: clamp(60px, 5.6vw, 84px); }
svg.pyme-dual__icon { width: 64px; height: 64px; padding: 14px; color: var(--k-aqua); background: rgba(94, 237, 242, 0.1); box-shadow: inset 0 0 0 1px rgba(94, 237, 242, 0.3); }

/* Soluciones · soporte */
.sol-support__picto { position: absolute; top: 22px; right: 22px; width: 52px; height: 52px; }

/* Animaciones ambientales en pausa fuera de pantalla (v4.js). */
[data-offscreen], [data-offscreen] *, [data-offscreen]::before, [data-offscreen]::after,
[data-offscreen] *::before, [data-offscreen] *::after { animation-play-state: paused !important; }