/* Perú Pendiente · la franja de aliados
   Viste a <pp-aliados> (aliados.js): una franja de borde a borde que invita a una empresa a
   sumarse. Va después de tokens.css. Va en blanco (QA, 15 oct; antes amarillo, y antes verde). Con
   tono="oscuro" va en negro. El botón, amarillo como todos. */

pp-aliados { display: block; }
/* overflow-x: la mascota que llega entra desde la derecha, y sin esto, cuando el hueco queda pegado
   al borde (entre 720 y 1300 px), ensanchaba la página y aparecía un desplazamiento de lado */
.pp-aliados { background: #FFFFFF; color: var(--negro); font-family: var(--titulo); overflow-x: clip; }
/* Sobre blanco, las tres que esperan son rosa, naranja y verde, y la que llega es amarilla (una
   blanca no se vería) */
pp-aliados .pp-aliados-hueco pp-mascota rect { fill: var(--amarillo); }
pp-aliados[tono="oscuro"] .pp-aliados-hueco pp-mascota rect { fill: #FFFFFF; }
.pp-aliados-in {
  max-width: 1112px; margin: 0 auto; padding: 56px 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center;
}
.pp-aliados h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.pp-aliados p { max-width: 36em; margin: 0; font-family: var(--lectura); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; }
.pp-aliados a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  border-radius: var(--radio); background: var(--amarillo); color: var(--negro);
  font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.pp-aliados a:hover { filter: brightness(.94); }
.pp-aliados a:focus-visible { outline: 3px solid var(--negro); outline-offset: 3px; }

/* La animación: tres ya están; falta una. El lugar vacío late, la blanca llega saltando desde la
   derecha, cae en su sitio y las otras tres celebran en ola. Luego se va y vuelve a empezar. */
.pp-aliados-accion { display: grid; justify-items: end; gap: 22px; }
.pp-aliados-suma { display: flex; align-items: flex-end; gap: 6px; padding-top: 26px; }
.pp-aliados-suma pp-mascota { width: 46px; transform-origin: 50% 100%; }
.pp-aliados-suma > pp-mascota { animation: pp-aliados-celebra 4.6s cubic-bezier(.3, 0, .3, 1) infinite; }
.pp-aliados-suma > pp-mascota:nth-child(2) { animation-delay: .12s; }
.pp-aliados-suma > pp-mascota:nth-child(3) { animation-delay: .24s; }
.pp-aliados-hueco {
  position: relative; width: 46px; height: 46px; border-radius: 19%;
  outline: 2px dashed currentColor; outline-offset: -2px; animation: pp-aliados-espera 4.6s ease-in-out infinite;
}
.pp-aliados-hueco pp-mascota { position: absolute; inset: 0; animation: pp-aliados-llega 4.6s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes pp-aliados-llega {
  0%, 12% { transform: translate(150%, -20%) rotate(18deg) scale(.7); opacity: 0; }
  20% { transform: translate(110%, -70%) rotate(12deg) scale(.9); opacity: 1; }
  32% { transform: translate(30%, -95%) rotate(4deg) scale(1); opacity: 1; }
  42% { transform: translate(0, 0) scale(1.12, .84); opacity: 1; }
  48%, 86% { transform: translate(0, 0) scale(1, 1); opacity: 1; }
  94%, 100% { transform: translate(0, 0) scale(.6); opacity: 0; }
}
@keyframes pp-aliados-espera {
  0%, 10% { outline-color: currentColor; transform: scale(1); }
  5% { transform: scale(1.08); }
  40%, 88% { outline-color: transparent; transform: scale(1); }
  100% { outline-color: currentColor; }
}
@keyframes pp-aliados-celebra {
  0%, 44%, 66%, 100% { transform: translateY(0) scale(1, 1); }
  48% { transform: translateY(0) scale(1.1, .86); }
  55% { transform: translateY(-34%) scale(.95, 1.06); }
  61% { transform: translateY(0) scale(1.08, .9); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-aliados-suma pp-mascota, .pp-aliados-hueco { animation: none !important; }
  .pp-aliados-hueco { outline-color: transparent; }
}

pp-aliados[tono="oscuro"] .pp-aliados { background: var(--negro); color: #FFFFFF; }
pp-aliados[tono="oscuro"] .pp-aliados p { color: rgba(255,255,255,.8); }
pp-aliados[tono="oscuro"] .pp-aliados a { background: var(--amarillo); color: var(--negro); }
pp-aliados[tono="oscuro"] .pp-aliados a:hover { background: var(--amarillo); filter: brightness(.94); }
pp-aliados[tono="oscuro"] .pp-aliados a:focus-visible { outline-color: var(--amarillo); }

@media (max-width: 720px) {
  /* En celular todo va centrado: el texto, las mascotas y el botón */
  .pp-aliados-in { grid-template-columns: 1fr; padding: 40px 16px; text-align: center; }
  .pp-aliados p { margin-inline: auto; }
  .pp-aliados-accion { justify-items: center; }
  .pp-aliados a { width: 100%; }
}

/* El título y el texto parten donde dice el salto de línea: «...enfrenta» y «...Perú Pendiente:»
   (QA, 14 de octubre: «enfrenta» va en la línea de arriba) */
.pp-aliados h2, .pp-aliados p { white-space: pre-line; }
/* En celular el salto forzado dejaba palabras solas en una línea: ahí el texto corre */
@media (max-width: 720px) { .pp-aliados h2, .pp-aliados p { white-space: normal; } }