/* Pinta Form · Cinta de beneficios (propuesta A: íconos y acentos de pintura) */
.pf-cinta { position: relative; z-index: 2; }
.pf-cinta .band { position: relative; overflow: hidden; color: #fff; height: 76px; display: flex; align-items: center;
  background: linear-gradient(100deg, #1A7A96, #2090B0 30%, #23A2C2 55%, #2090B0 80%, #1A7A96); background-size: 220% 100%;
  animation: pfCintaShift 18s ease-in-out infinite alternate; }
@keyframes pfCintaShift { to { background-position: 100% 0; } }
.pf-cinta ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex: none; }
.pf-cinta li { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-weight: 700; font-size: 17px; padding: 0 6px; }
.pf-cinta .ico { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #1A7A96; box-shadow: 0 6px 14px rgba(14, 14, 46, .18); }
.pf-cinta .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.pf-cinta .drop { width: 16px; height: 22px; margin: 0 30px; flex: none; display: block; }
.pf-cinta .marquee { display: flex; width: max-content; }
.pf-cinta .band.js .marquee { animation: pfCintaScroll var(--dur, 40s) linear infinite; }
.pf-cinta .band:hover .marquee, .pf-cinta .band:focus-within .marquee { animation-play-state: paused; }
@keyframes pfCintaScroll { to { transform: translateX(-50%); } }
/* Sin JavaScript: la cinta queda quieta y acomodada en líneas */
.pf-cinta .band:not(.js) { height: auto; padding: 12px 0; }
.pf-cinta .band:not(.js) .marquee { width: auto; margin: 0 auto; }
.pf-cinta .band:not(.js) ul { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
/* Borde orgánico con línea verde animada que une la foto con la cinta */
.pf-cinta .A-edge { position: absolute; left: 0; right: 0; top: -14px; height: 18px; width: 100%; z-index: 2; pointer-events: none; display: block; }
.pf-cinta .A-edge .line { animation: pfCintaDash 6s linear infinite; }
@keyframes pfCintaDash { to { stroke-dashoffset: -144; } }
@media (max-width: 700px) {
  .pf-cinta .band { height: 64px; }
  .pf-cinta li { font-size: 15px; }
  .pf-cinta .ico { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-cinta .band { animation: none; height: auto; padding: 12px 0; }
  .pf-cinta .band.js .marquee { animation: none; width: auto; margin: 0 auto; }
  .pf-cinta .marquee ul[aria-hidden] { display: none; }
  .pf-cinta ul { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .pf-cinta .A-edge .line { animation: none; }
}