/* Tira de logotipos de pasarela de la ficha (functions/payment-logos.php).

   CÓMO SE CUADRAN. Los tres logotipos de palabra —izipay, PayPal y Culqi— van
   TODOS a la misma altura, y eso funciona porque los archivos están recortados
   a su tinta: sin ese recorte, el aire transparente de alrededor se comía parte
   de la altura y cada marca salía de un tamaño distinto (era el caso del
   izipay.png viejo, que además traía el rótulo dentro de la imagen).

   La única excepción es Yape, que no es una palabra sino un icono cuadrado: a
   la misma altura que un logotipo de una línea se ve diminuto, así que va ~1,4x
   —medido, no a ojo: a 30 px de tira, la palabra "izipay" mide 30 px de tinta
   total pero su cuerpo de letra son ~16 px, y el cuadrado tiene que igualar el
   conjunto, no la letra. */

.gp-pagos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, 1.1vw, 16px);
	width: 100%;
}

.gp-pagos__titulo {
	margin: 0;
	font-family: "GP-Book", sans-serif;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.3;
	text-align: center;
	color: #5f5f5f;
}

.gp-pagos__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 2.4vw, 38px);
	width: 100%;
}

.gp-pagos__marcas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 2.4vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-pagos__marca {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Altura base (una línea). width:auto para que la proporción la ponga el
   archivo y ninguna marca salga estirada. */
.gp-pagos__logo {
	display: block;
	width: auto;
	height: clamp(24px, 2.2vw, 32px);
	max-width: 100%;
	object-fit: contain;
}

/* Culqi: el único de DOS líneas (marca + "con el respaldo del BCP"). Se cuadra
   por la palabra, no por la caja: el archivo reparte 59% marca / 32% respaldo,
   así que a 1,41x de la altura base la palabra "Culqi" mide igual que "izipay"
   y "PayPal" (comprobado contra 42/44/46/48/50 px). Más alto empieza a
   dominar la fila; más bajo deja el respaldo del BCP ilegible. */
.gp-pagos__logo--culqi {
	height: clamp(34px, 3.1vw, 45px);
}

/* Yape: icono cuadrado. Va algo más alto que un logotipo de una línea —si no,
   se ve diminuto al lado de las palabras— y con las esquinas redondeadas del
   icono original. */
.gp-pagos__logo--yape {
	height: clamp(34px, 3.1vw, 44px);
	border-radius: 22%;
}

.gp-pagos__separador {
	display: block;
	flex: 0 0 auto;
	width: 1px;
	height: clamp(34px, 3.4vw, 48px);
	background: #d8d8d8;
}

.gp-pagos__seguro {
	display: block;
	width: auto;
	height: clamp(30px, 2.9vw, 42px);
	max-width: 100%;
	object-fit: contain;
}

/* Móvil: la fila se parte sola. El separador sobra en cuanto hay salto —queda
   colgando entre dos líneas— y el sello de pago seguro pasa a renglón propio. */
@media (max-width: 767px) {
	.gp-pagos {
		gap: 12px;
	}

	.gp-pagos__fila {
		flex-direction: column;
		gap: 14px;
	}

	.gp-pagos__marcas {
		gap: 20px;
	}

	.gp-pagos__separador {
		display: none;
	}

	.gp-pagos__logo {
		height: 26px;
	}

	.gp-pagos__logo--culqi {
		height: 37px;
	}

	.gp-pagos__logo--yape {
		height: 36px;
	}

	.gp-pagos__seguro {
		height: 34px;
	}
}

/* Pantallas muy estrechas (400px y menos): en soles son TRES marcas en la misma
   fila y ahí es donde menos aire queda. Se baja un punto el conjunto entero
   —nunca una marca sola, que es lo que descuadra— para que la fila siga
   entrando de una tirada junto al margen lateral de la página. */
@media (max-width: 400px) {
	.gp-pagos__marcas {
		gap: 16px;
	}

	.gp-pagos__logo {
		height: 22px;
	}

	.gp-pagos__logo--culqi {
		height: 31px;
	}

	.gp-pagos__logo--yape {
		height: 31px;
	}
}