/* ============================================================
   pulso — bloque 11 (Rendimiento y notificaciones)
   Anatomy unlike siblings: foto a un lado con "pings" de
   notificación encima; al otro, dos bloques de lectura (fluidez /
   notificaciones) escalonados.
   Animación propia: los pings LATEN (ondas concéntricas) un par de
   veces; la foto entra y los bloques escalonan.
   ============================================================ */

.pulso { padding-block: var(--aire-l); }

.pulso__cab { margin-bottom: var(--aire-m); }
.pulso__cab .folio { margin-bottom: var(--aire-s); }
.pulso__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--marfil);
}

.pulso__reja {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center;
}
.pulso__foto {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-mesa);
}
.pulso__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pulso__ping {
  position: absolute;
  width: .9rem; height: .9rem;
  border-radius: 50%;
  background: var(--esmeralda);
  top: 20%; right: 16%;
  z-index: 2;
}
.pulso__ping--2 { top: 62%; right: 32%; background: var(--oro); }

.pulso__col { display: flex; flex-direction: column; gap: var(--aire-m); }
.pulso__bloque:nth-child(2) { padding-left: clamp(0rem, 3vw, 2.4rem); }  /* escalón */
.pulso__rotulo {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: .6rem;
}
.pulso__bloque p {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .pulso__reja { grid-template-columns: 1fr; gap: var(--aire-m); }
  .pulso__bloque:nth-child(2) { padding-left: 0; }
}

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .pulso__foto { opacity: 0; transform: translateX(-22px); transition: opacity .7s ease, transform .7s ease; }
  .pulso__bloque { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .pulso__bloque:nth-child(2) { transition-delay: .15s; }
  .pulso.en-vista .pulso__foto { opacity: 1; transform: none; }
  .pulso.en-vista .pulso__bloque { opacity: 1; transform: none; }
  .pulso.en-vista .pulso__ping { animation: latido 1.9s ease .6s 3; }
  .pulso.en-vista .pulso__ping--2 { animation-delay: 1.3s; }

  @keyframes latido {
    0%   { box-shadow: 0 0 0 0 rgba(40,224,140,.55); }
    70%  { box-shadow: 0 0 0 16px rgba(40,224,140,0); }
    100% { box-shadow: 0 0 0 0 rgba(40,224,140,0); }
  }
}