/* ==========================================================================
   Animación de botones e íconos (hover y foco con teclado).

   Lenguaje común:
   - Botones y enlaces de acción: el chevron sale por la derecha y vuelve a
     entrar desde la izquierda (una vez por cada hover).
   - Botones con borde: el fondo se llena de izquierda a derecha.
   - Filas de listas (sectores, soluciones, email/teléfono): el chevron avanza.
   - Íconos sueltos: cada uno con un gesto propio y breve.

   Todo el movimiento va dentro de prefers-reduced-motion: no-preference; los
   cambios de color de hover siguen funcionando para todos.
   ========================================================================== */

@keyframes ppo-chevron-through {
	0%   { transform: translateX(0); opacity: 1; }
	40%  { transform: translateX(12px); opacity: 0; }
	41%  { transform: translateX(-12px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}
/* Mismo recorrido para los chevrons dibujados con bordes (girados 45°) */
@keyframes ppo-chevron-through-rot {
	0%   { transform: translateX(0) rotate(45deg); opacity: 1; }
	40%  { transform: translateX(12px) rotate(45deg); opacity: 0; }
	41%  { transform: translateX(-12px) rotate(45deg); opacity: 0; }
	100% { transform: translateX(0) rotate(45deg); opacity: 1; }
}
@keyframes ppo-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: no-preference) {

	/* ---------- Chevron que sale y vuelve ---------- */

	/* Chevrons con bordes (::after) */
	.ppo-btn:hover::after,
	.ppo-btn:focus-visible::after,
	.ppo-meet__link:hover::after,
	.ppo-meet__link:focus-visible::after,
	.ppo-area-contact__link:hover::after,
	.ppo-area-contact__link:focus-visible::after,
	.ppo-footer__more:hover::after,
	.ppo-footer__more:focus-visible::after,
	.ppo-article-list__meta a:hover::after,
	.ppo-article-list__meta a:focus-visible::after,
	.ppo-article-list li:hover .ppo-article-list__meta a::after {
		animation: ppo-chevron-through-rot .55s cubic-bezier(.4, 0, .2, 1);
	}

	/* Chevrons en SVG */
	.ppo-hero__cta:hover svg,
	.ppo-hero__cta:focus-visible svg,
	.ppo-news-card:hover .ppo-news-card__more svg,
	.ppo-news-card__more:focus-visible svg,
	a.ppo-sit-card__cat:hover svg,
	a.ppo-sit-card__cat:focus-visible svg {
		transform: none;
		animation: ppo-chevron-through .55s cubic-bezier(.4, 0, .2, 1);
	}

	/* ---------- Relleno de izquierda a derecha en botones con borde ---------- */

	.ppo-btn:not(.ppo-btn--plain) {
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 0% 100%;
		transition: background-size .45s cubic-bezier(.4, 0, .2, 1), color .3s ease .1s;
	}
	.ppo-btn--light:not(.ppo-btn--plain) {
		background-image: linear-gradient(#FFF5E9, #FFF5E9);
	}
	.ppo-btn--dark:not(.ppo-btn--plain) {
		background-image: linear-gradient(#003360, #003360);
	}
	.ppo-btn:not(.ppo-btn--plain):hover,
	.ppo-btn:not(.ppo-btn--plain):focus-visible {
		background-color: transparent !important;
		background-size: 100% 100%;
	}

	/* ---------- Chevron que avanza en filas de listas ---------- */

	.ppo-link-list a::after,
	.ppo-profile-contact a::after {
		transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	}
	.ppo-link-list a:hover::after,
	.ppo-link-list a:focus-visible::after,
	.ppo-profile-contact a:hover::after,
	.ppo-profile-contact a:focus-visible::after {
		transform: translateX(8px) rotate(45deg);
	}

	/* ---------- Íconos sueltos ---------- */

	/* "Volver a expertos": la flecha retrocede */
	.ppo-profile-back svg {
		transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	}
	.ppo-profile-back:hover svg,
	.ppo-profile-back:focus-visible svg {
		transform: translateX(-6px);
	}

	/* Flechas del Hero: se asoman hacia su lado */
	.ppo-hero__arrow svg {
		transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	}
	.ppo-hero__arrow--prev:hover svg,
	.ppo-hero__arrow--prev:focus-visible svg {
		transform: translateX(-5px);
	}
	.ppo-hero__arrow--next:hover svg,
	.ppo-hero__arrow--next:focus-visible svg {
		transform: translateX(5px);
	}

	/* "Scroll": la flecha del riel invita a bajar, con un vaivén suave */
	.ppo-hero__scroll-arrow {
		animation: ppo-bob 2.4s ease-in-out infinite;
	}

	/* Buscador de Profesionales: la lupa se inclina */
	.ppo-finder__search button svg {
		transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	}
	.ppo-finder__search button:hover svg,
	.ppo-finder__search button:focus-visible svg {
		transform: scale(1.12) rotate(-10deg);
	}

	/* LinkedIn (Hero y footer): se eleva */
	.ppo-hero__social,
	.ppo-footer__linkedin svg {
		transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease, color .3s ease;
	}
	.ppo-hero__social:hover,
	.ppo-hero__social:focus-visible,
	.ppo-footer__linkedin:hover svg,
	.ppo-footer__linkedin:focus-visible svg {
		transform: translateY(-3px) scale(1.08);
	}

	/* Compartir (tarjetas de Situaciones): el ícono gira un poco */
	.ppo-sit-card__share svg {
		transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	}
	.ppo-sit-card__share:hover svg,
	.ppo-sit-card__share:focus-visible svg {
		transform: rotate(-15deg) scale(1.1);
	}
}

/* Color de hover que no depende del movimiento */
.ppo-hero__social:hover,
.ppo-hero__social:focus-visible {
	background: #00A7E2;
	color: #FFF5E9;
}

/* Sobre fondo cian (Hablemos) el hover cian no se vería: pasa a navy */
.ppo-talk .ppo-meet__link:hover,
.ppo-talk .ppo-meet__link:focus-visible {
	color: #003360 !important;
}

/* ---------- Foto al pasar el mouse (tarjetas de El Equipo) ----------
   Si la persona tiene "Foto al pasar el mouse", esa foto va encima y aparece
   con un fundido mientras la de siempre se desvanece (los retratos son PNG
   sin fondo, así que no pueden verse las dos a la vez). Sin esa foto, la
   tarjeta mantiene solo el acercamiento suave. */
.ppo-team-card__photo,
.ppo-pro-card__photo {
	position: relative;
}
.ppo-team-card__photo .ppo-photo-hover,
.ppo-pro-card__photo .ppo-photo-hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.ppo-team-card__photo img,
.ppo-pro-card__photo img {
	transition: transform .4s ease, opacity .45s ease;
}
.ppo-team-card:hover .ppo-photo-hover,
.ppo-team-card:has(a:focus-visible) .ppo-photo-hover,
.ppo-pro-card a:hover .ppo-photo-hover,
.ppo-pro-card a:focus-visible .ppo-photo-hover {
	opacity: 1;
}
.ppo-team-card:hover .ppo-photo-base:not(:only-child),
.ppo-team-card:has(a:focus-visible) .ppo-photo-base:not(:only-child),
.ppo-pro-card a:hover .ppo-photo-base:not(:only-child),
.ppo-pro-card a:focus-visible .ppo-photo-base:not(:only-child) {
	opacity: 0;
}