/* ==========================================================================
   Matati — pago con Yape (template-parts/checkout/pago-yape.php)
   QR, número que se copia y formulario de la constancia. Se carga en la
   portada (modal) y en la pantalla de gracias.
   ========================================================================== */

.pago-yape {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: left;
}

.pago-yape__datos {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 20px;
	background: var(--crema);
	border: var(--borde);
	border-radius: var(--forma-a);
}

.pago-yape__qr {
	width: 100%;
	height: auto;
	background: var(--blanco);
	border: var(--borde);
	border-radius: 24px;
}

.pago-yape__lista {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.pago-yape__fila dt {
	font-size: 14px;
	font-weight: 600;
}

.pago-yape__fila dd {
	margin: 2px 0 0;
	font-weight: 800;
}

.pago-yape__fila--monto dd {
	font-family: var(--fuente-titulo);
	font-size: 32px;
	line-height: 1;
}

.pago-yape__pasos {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding-left: 24px;
	font-size: 16px;
}

.pago-yape__pasos li::marker {
	font-weight: 800;
	color: var(--rosa);
}

/* Número que se copia al pulsarlo */
.copiar {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px;
	font-family: var(--fuente-titulo);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--tinta);
	background: var(--blanco);
	border: var(--borde);
	border-radius: var(--pastilla);
	cursor: pointer;
	transition: background var(--rapido);
}

.copiar::after {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--copiar) no-repeat center / contain;
}

.copiar:hover { background: var(--rosa); }

.copiar__hecho {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	padding: 4px 12px;
	font-family: var(--fuente-texto);
	font-size: 14px;
	color: var(--blanco);
	white-space: nowrap;
	background: var(--tinta);
	border-radius: var(--pastilla);
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity var(--rapido), transform var(--rapido);
	pointer-events: none;
}

.copiar.is-copiado .copiar__hecho {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Formulario de la constancia */
.constancia {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	padding: 24px;
	background: var(--crema);
	border: var(--borde);
	border-radius: 32px;
}

.constancia__titulo {
	grid-column: 1 / -1;
	font-size: 26px;
	line-height: 1;
}

.constancia__enviar .btn-primario { width: 100%; }

.constancia__nota {
	grid-column: 1 / -1;
	font-size: 14px;
	text-align: center;
}

/* Campos del formulario (en la portada no está compra.css) */
.constancia .form-row {
	grid-column: span 6;
	min-width: 0;
	margin: 0;
}

.constancia .graphica-col-2 { grid-column: span 3; }

.constancia label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.constancia .required {
	color: var(--rosa);
	text-decoration: none;
}

.constancia input[type="text"],
.constancia input[type="email"] {
	width: 100%;
	height: var(--campo-alto);
	padding: 0 16px;
	font: 16px var(--fuente-texto);
	color: var(--tinta);
	background: var(--blanco);
	border: var(--campo-borde);
	border-radius: var(--campo-radio);
	outline: 0;
	appearance: none;
	transition: border-color var(--rapido), box-shadow var(--rapido);
}

.constancia input:focus {
	border-color: var(--turquesa);
	box-shadow: var(--campo-foco);
}

@media (max-width: 767px) {
	.pago-yape__datos {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.pago-yape__qr { max-width: 220px; }

	.constancia { padding: 20px; }

	.constancia .graphica-col-2 { grid-column: span 6; }
}