/**
 * TuCine · Suscripciones Mercado Pago — estilos del formulario de pago.
 *
 * MISMA PALETA Y MISMO CRITERIO QUE `tucine-planes`. No es una coincidencia
 * estética: el visitante llega aquí pulsando un botón de aquella sección, y si
 * la pantalla de pago se ve como otra web distinta lo que piensa es que le han
 * redirigido a algún sitio raro. En una pantalla de pago, la continuidad visual
 * no es adorno, es lo que sostiene la confianza.
 *
 * Los valores están copiados de los colores globales que ya usa la web en
 * producción: fondo #141414, tarjetas #1D1D1D, texto #FFFFFF, apagado #B4B4B4,
 * acento #FF5A19. Se declaran como variables DENTRO de `.tmps-pago` y no en
 * :root, para no soltar variables globales que choquen con las del tema.
 *
 * TODA regla cuelga de `.tmps-pago` y las propiedades se escriben aunque
 * parezcan obvias. Lo que no se declara se hereda del tema, y lo heredado es
 * justo lo que se rompe cuando el tema se actualiza.
 */

/*
 * BLINDAJE CONTRA EL TEMA. Va primero y con !important, por el mismo motivo
 * documentado en tucine-planes.css: el tema le pone a TODOS los <button> del
 * sitio un degradado naranja mediante `background-image`, y gana por
 * especificidad a cualquier `background` que se declare aquí. Sin esto, el botón
 * secundario («Crear una cuenta») saldría idéntico al principal y no se
 * distinguiría la acción sugerida de la alternativa.
 *
 * Solo se apaga lo decorativo impuesto. Tamaños, colores y espaciados los ponen
 * las reglas de abajo con normalidad.
 */
.tmps-pago button,
.tmps-pago a.tmps-btn,
.tmps-pago button:hover,
.tmps-pago a.tmps-btn:hover,
.tmps-pago button:focus,
.tmps-pago a.tmps-btn:focus,
.tmps-pago button:active,
.tmps-pago a.tmps-btn:active {
	background-image: none !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	filter: none !important;
	/*
	 * Y LO QUE MUEVE EL BOTÓN AL PASAR EL RATÓN.
	 *
	 * El tema le pone a sus botones un `transform: translateY(...)` en :hover
	 * —ese rebotito de «se levanta»— y a veces también engorda el borde. Sobre
	 * dos botones que ya no medían igual, el resultado era que temblaban y se
	 * empujaban entre ellos.
	 *
	 * Se apaga en los cuatro estados y no solo en el normal: declararlo sin
	 * :hover no sirve de nada, porque la regla del tema para :hover es más
	 * específica y gana igual.
	 */
	transform: none !important;
	translate: none !important;
	scale: none !important;
	rotate: none !important;
}

/*
 * ─────────────────────────────────────────────────────────────────────────
 * EL BORDE SE IGUALA SOLO EN LOS BOTONES DE ACCIÓN, NO EN TODOS.
 *
 * Antes esto estaba arriba, aplicado a CUALQUIER <button> dentro de .tmps-pago,
 * y provocó una línea blanca en el lado derecho del selector de país. Merece la
 * pena entender por qué, porque es una trampa de la cascada fácil de repetir:
 *
 *   1. `.tmps-buscapais-boton` declara `border: 1px solid var(--tmps-borde)`
 *      y justo después `border-right: none`, para que se funda con el campo
 *      del número que va pegado a su derecha.
 *   2. `border-right: none` es una forma abreviada: además de quitar el ancho,
 *      REINICIA el color de ese lado a su valor inicial, que es `currentColor`.
 *   3. El `border-width: 1px !important` de aquí devolvía el ancho… pero el
 *      color ya se había reiniciado. Y `currentColor` en ese botón es el color
 *      del texto: blanco.
 *
 * Resultado: una raya blanca de 1 px donde no debía haber ninguna.
 *
 * La igualación de caja solo hacía falta entre «Realizar pago» y «Cancelar»,
 * así que se limita a `.tmps-btn`, que es lo que ellos llevan y el selector de
 * país no.
 * ─────────────────────────────────────────────────────────────────────────
 */
.tmps-pago .tmps-btn,
.tmps-pago .tmps-btn:hover,
.tmps-pago .tmps-btn:focus,
.tmps-pago .tmps-btn:active {
	border-width: 1px !important;
	border-style: solid !important;
}

.tmps-pago {
	--tmps-fondo: #141414;
	--tmps-tarjeta: #1d1d1d;
	--tmps-borde: #2c2c2c;
	--tmps-texto: #ffffff;
	--tmps-apagado: #b4b4b4;
	--tmps-acento: #ff5a19;
	--tmps-acento-texto: #ffffff;
	--tmps-aviso: #ffb020;
	--tmps-error: #ff5a5a;
	--tmps-radio: 14px;
	--tmps-hueco: 20px;

	/*
	 * TAMAÑO DE LOS LOGOS DE LAS PASARELAS.
	 *
	 * Son ANCHOS, que es como los miden los manuales de marca. Aquí, para
	 * poder subirlos o bajarlos tocando un solo número.
	 *
	 * Los mínimos que exige Mercado Pago son 50 px para el iso y 120 px para el
	 * logo horizontal. SON MÍNIMOS: por encima se puede ir, por debajo no. Los
	 * valores de abajo están holgados a propósito, así que hay margen para
	 * subirlos; si algún día se bajan, 50 y 120 son el suelo.
	 */
	--tmps-logo-iso: 80px;
	--tmps-logo-lockup: 150px;

	box-sizing: border-box;
	display: block;
	width: 100%;
	/*
	 * El checkout se centra y se estrecha a propósito. Una columna larga en una
	 * pantalla ancha obliga a barrer con la vista de izquierda a derecha para
	 * leer tres líneas, y aquí lo que hay que leer —qué se contrata y por
	 * cuánto— es exactamente lo que no puede pasarse por alto.
	 */
	max-width: 560px;
	margin: 0 auto;
	padding: 0;
	color: var(--tmps-texto);
	line-height: 1.6;
}

/*
 * LA FUENTE DEL TEMA, HEREDADA DE VERDAD.
 *
 * Declarar `font-family: inherit` en el contenedor no basta: <input>, <button>,
 * <select> y <textarea> NO heredan la fuente del padre por defecto —los
 * navegadores les ponen la del sistema— y algunos temas fijan la suya en h2/h3
 * con un selector más específico que el nuestro. Resultado: el resumen salía con
 * una letra y el formulario con otra.
 *
 * Se fuerza la herencia en todo lo que hay dentro, con dos excepciones que
 * necesitan su propia fuente para funcionar:
 *   · <i>, que son los iconos de Font Awesome. Heredar la fuente aquí los
 *     convertiría en cuadraditos vacíos.
 *   · las cifras del desglose, que llevan `tabular-nums` para poder alinearse.
 */
.tmps-pago,
.tmps-pago h2,
.tmps-pago h3,
.tmps-pago p,
.tmps-pago ul,
.tmps-pago li,
.tmps-pago a,
.tmps-pago span,
.tmps-pago strong,
.tmps-pago label,
.tmps-pago summary,
.tmps-pago details,
.tmps-pago input,
.tmps-pago button,
.tmps-pago select {
	font-family: inherit;
}

.tmps-pago *,
.tmps-pago *::before,
.tmps-pago *::after {
	box-sizing: border-box;
}

/*
 * ─────────────────────────────────────────────────────────────────────────
 * 16 PX EN TODO CAMPO ENFOCABLE. NO ES ESTÉTICA, ES LO QUE EVITA EL TEMBLOR.
 *
 * Safari en iPhone AMPLÍA LA PÁGINA SOLO al enfocar un <input>, <select> o
 * <textarea> cuya letra mida menos de 16 px. Es una ayuda de accesibilidad de
 * Apple —da por hecho que si la letra es pequeña no se va a poder leer al
 * escribir— y no se puede desactivar campo a campo.
 *
 * Esa ampliación es la que provocaba el desplazamiento horizontal y la
 * sensación de que la pantalla tiembla: el navegador acerca, la página se sale
 * por los lados, y al salir del campo vuelve a alejar.
 *
 * LA SALIDA FÁCIL SERÍA `user-scalable=no` EN EL VIEWPORT, Y NO SE HACE.
 * Primero porque impide ampliar a quien tiene poca vista, en una pantalla donde
 * hay que leer un importe y escribir un teléfono. Y segundo porque no
 * funcionaría: iOS lo ignora desde la versión 10, precisamente por eso.
 *
 * Con 16 px, Safari no tiene motivo para acercar y el problema desaparece de
 * raíz, sin quitarle a nadie la posibilidad de ampliar si la necesita.
 *
 * SI SE AÑADE UN CAMPO NUEVO, NO LE BAJES LA LETRA DE 16 PX.
 * ─────────────────────────────────────────────────────────────────────────
 */
.tmps-pago input,
.tmps-pago select,
.tmps-pago textarea {
	font-size: 16px;
}

/*
 * Y red de seguridad contra el desplazamiento horizontal por cualquier otro
 * motivo: una palabra larguísima, un correo sin espacios, un logo que no
 * encoja. `clip` y no `hidden` porque `hidden` crea un contexto de
 * desplazamiento que rompe los `position: sticky` de la página.
 */
.tmps-pago {
	overflow-x: clip;
	overflow-wrap: anywhere;
}

/* ─────────────────────────────────────────────────────────────────────────
 * El resumen de lo que se contrata
 * ────────────────────────────────────────────────────────────────────── */

.tmps-resumen {
	margin: 0 0 var(--tmps-hueco);
	padding: 24px;
	border: 1px solid var(--tmps-borde);
	border-radius: var(--tmps-radio);
	background: var(--tmps-tarjeta);
}

/*
 * El aviso de modo de prueba. Deliberadamente llamativo y arriba del todo:
 * su único trabajo es evitar que alguien crea que ha cobrado de verdad —o que
 * ha pagado de verdad— durante las pruebas.
 */
.tmps-resumen-prueba {
	margin: 0 0 16px;
	padding: 10px 14px;
	border: 1px solid var(--tmps-aviso);
	border-radius: 8px;
	background: rgba( 255, 176, 32, 0.12 );
	color: var(--tmps-aviso);
	font-size: 14px;
}

.tmps-resumen-titulo {
	margin: 0 0 10px;
	color: var(--tmps-texto);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}

.tmps-resumen-banderas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
}

.tmps-bandera {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--tmps-borde);
	border-radius: 999px;
	color: var(--tmps-apagado);
	font-size: 13px;
	line-height: 1.5;
}

/*
 * El precio. Es lo único de esta pantalla que tiene que poder leerse de un
 * vistazo, sin buscarlo, así que se le da el mayor tamaño y se le alinea la
 * moneda y la periodicidad a la misma base para que se lean como una frase
 * («600.00 MXN cada 3 meses») y no como tres datos sueltos.
 */
.tmps-resumen-precio {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 4px;
}

.tmps-resumen-cifra {
	color: var(--tmps-texto);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
}

.tmps-resumen-moneda {
	color: var(--tmps-apagado);
	font-size: 16px;
	font-weight: 600;
}

.tmps-resumen-periodo {
	color: var(--tmps-apagado);
	font-size: 16px;
}

.tmps-resumen-mensual {
	margin: 0 0 18px;
	color: var(--tmps-apagado);
	font-size: 14px;
}

/*
 * El desglose. Etiqueta a la izquierda, cifra a la derecha, alineadas en
 * columna: así las cifras se pueden sumar con la vista, que es exactamente lo
 * que va a hacer quien dude de por qué el importe no es el de la tarifa.
 */
.tmps-desglose {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--tmps-borde);
	border-radius: 10px;
	background: var(--tmps-fondo);
}

.tmps-desglose p {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 8px;
	color: var(--tmps-apagado);
	font-size: 14px;
}

.tmps-desglose p span:last-child {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.tmps-desglose-total {
	margin-bottom: 0 !important;
	padding-top: 10px;
	border-top: 1px solid var(--tmps-borde);
	color: var(--tmps-texto) !important;
	font-weight: 700;
}

.tmps-resumen-lista {
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--tmps-borde);
	list-style: none;
}

.tmps-resumen-lista li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
	padding: 0;
	color: var(--tmps-apagado);
	font-size: 15px;
}

.tmps-resumen-lista li:last-child {
	margin-bottom: 0;
}

/* Los iconos que pinta TCP_Linea cuando `tucine-planes` está activo. */
.tmps-resumen-lista li i {
	flex: 0 0 auto;
	margin-top: 5px;
	color: var(--tmps-acento);
	font-size: 13px;
}

.tmps-resumen-lista strong {
	color: var(--tmps-texto);
	font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────
 * El formulario
 * ────────────────────────────────────────────────────────────────────── */

/*
 * El <form> ya no es una caja: es solo el contenedor. Las cajas son las
 * tarjetas de dentro. Dejarle el fondo y el borde al formulario además de a las
 * tarjetas daría un marco alrededor de otros dos marcos.
 */
.tmps-pago-form {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

.tmps-card,
.tmps-pago-accion {
	margin: 0 0 var(--tmps-hueco);
	padding: 24px;
	border: 1px solid var(--tmps-borde);
	border-radius: var(--tmps-radio);
	background: var(--tmps-tarjeta);
}

/* El último campo de una tarjeta no necesita separación abajo: ya la pone el
   relleno de la propia tarjeta. */
.tmps-card > *:last-child {
	margin-bottom: 0;
}

.tmps-pago-explica {
	margin: 0 0 18px;
	color: var(--tmps-apagado);
	font-size: 15px;
}

.tmps-pago-campo {
	margin: 0 0 22px;
}

.tmps-pago-campo label {
	display: block;
	margin: 0 0 6px;
	color: var(--tmps-texto);
	font-size: 14px;
	font-weight: 600;
}

/*
 * El correo va en un input de solo lectura y no en un simple <p>. Se ve que es
 * un dato del formulario —porque lo es: Mercado Pago va a comprobarlo— pero se
 * ve también que no se toca aquí. Un párrafo suelto se lee como decoración y
 * nadie repara en él; y este dato importa, porque si no coincide, el pago se
 * rechaza sin más explicación.
 */
.tmps-pago-campo input[type="email"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--tmps-borde);
	border-radius: 8px;
	background: var(--tmps-fondo);
	color: var(--tmps-apagado);
	font-family: inherit;
	cursor: not-allowed;
}

.tmps-pago-nota {
	margin: 8px 0 0;
	color: var(--tmps-apagado);
	font-size: 13px;
	line-height: 1.5;
}

.tmps-pago-nota a {
	color: var(--tmps-acento);
	text-decoration: underline;
}

/*
 * LAS CONDICIONES. Van ANTES del botón y con el mismo tamaño de letra que el
 * resto, no debajo y en gris del 40 %.
 *
 * Es una suscripción con renovación automática: esconderlo es lo que genera
 * contracargos, reclamaciones y reseñas de una estrella, todo ello mucho más
 * caro que las altas que se pierdan por decirlo claro.
 */
.tmps-pago-condiciones {
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid var(--tmps-borde);
	border-radius: 10px;
	background: var(--tmps-fondo);
}

.tmps-pago-condiciones h3 {
	margin: 0 0 10px;
	color: var(--tmps-texto);
	font-size: 15px;
	font-weight: 700;
}

.tmps-pago-condiciones ul {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: disc;
}

.tmps-pago-condiciones li {
	margin: 0 0 6px;
	color: var(--tmps-apagado);
	font-size: 14px;
	line-height: 1.55;
}

.tmps-pago-condiciones li:last-child {
	margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Botones
 * ────────────────────────────────────────────────────────────────────── */

.tmps-pago .tmps-btn {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

/*
 * El único efecto al pasar el ratón es la opacidad. No se toca el tamaño, ni el
 * relleno, ni la posición: cualquiera de esas tres cosas mueve el botón bajo el
 * cursor, y un botón que se escapa justo cuando vas a pulsarlo es de las cosas
 * que más irritan en una pantalla de pago.
 */
.tmps-pago .tmps-btn:hover {
	opacity: 0.88;
}

.tmps-pago .tmps-btn:focus-visible {
	outline: 2px solid var(--tmps-acento);
	outline-offset: 3px;
}

.tmps-pago .tmps-btn--principal {
	background-color: var(--tmps-acento) !important;
	color: var(--tmps-acento-texto) !important;
}

.tmps-pago .tmps-btn--secundario {
	border-color: var(--tmps-borde);
	background-color: transparent !important;
	color: var(--tmps-texto) !important;
}

.tmps-pago .tmps-btn--ancho {
	display: block;
	width: 100%;
	margin-right: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Errores y avisos
 * ────────────────────────────────────────────────────────────────────── */

/*
 * El error va arriba del todo y con role="alert" en el HTML, para que un lector
 * de pantalla lo anuncie al volver de un intento fallido. Sin eso, quien navega
 * sin ver la pantalla vuelve a la misma página, con el mismo aspecto, sin
 * enterarse de que algo salió mal.
 */
.tmps-error {
	margin: 0 0 var(--tmps-hueco);
	padding: 14px 18px;
	border: 1px solid var(--tmps-error);
	border-radius: 10px;
	background: rgba( 255, 90, 90, 0.1 );
}

.tmps-error p {
	margin: 0;
	color: var(--tmps-error);
	font-size: 15px;
}

.tmps-aviso {
	padding: 28px 24px;
	border: 1px solid var(--tmps-borde);
	border-radius: var(--tmps-radio);
	background: var(--tmps-tarjeta);
	text-align: center;
}

.tmps-aviso h2 {
	margin: 0 0 10px;
	color: var(--tmps-texto);
	font-size: 20px;
	font-weight: 700;
}

.tmps-aviso p {
	margin: 0;
	color: var(--tmps-apagado);
	font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Móvil
 * ────────────────────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {

	/*
	 * `.tmps-pago-form` dejó de ser la caja cuando el formulario se partió en
	 * dos tarjetas; las cajas son ahora `.tmps-card`. La regla seguía apuntando
	 * a la clase vieja, así que en móvil las tarjetas conservaban el relleno de
	 * escritorio y el contenido iba más apretado contra los bordes.
	 */
	.tmps-resumen,
	.tmps-card,
	.tmps-pago-accion {
		padding: 20px 16px;
	}

	.tmps-resumen-cifra {
		font-size: 28px;
	}

	/*
	 * En móvil los dos botones de la pantalla sin sesión se apilan a ancho
	 * completo. Uno al lado del otro no caben sin partir el texto, que es
	 * justo el problema que ya se documentó en TCP_Nombres con los rótulos de
	 * modalidad.
	 */
	.tmps-pago-accion .tmps-btn {
		display: block;
		width: 100%;
		margin-right: 0;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * Los desplegables de «quiero cambiar algo»
 *
 * Se usa <details>/<summary> nativo en lugar de montar un acordeón con
 * JavaScript. Es accesible de fábrica —se abre con el teclado, lo anuncian los
 * lectores de pantalla, el navegador sabe buscar texto dentro aunque esté
 * cerrado— y no puede quedarse a medias si un script falla en la página de pago,
 * que es el peor sitio posible para que algo se quede a medias.
 * ────────────────────────────────────────────────────────────────────── */

.tmps-opciones {
	margin: 0 0 var(--tmps-hueco);
}

.tmps-opcion {
	margin: 0 0 10px;
	border: 1px solid var(--tmps-borde);
	border-radius: 10px;
	background: var(--tmps-tarjeta);
	overflow: hidden;
}

.tmps-opcion summary {
	padding: 14px 18px;
	color: var(--tmps-texto);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* El triángulo por defecto se sustituye por uno propio, para que sea igual en
   Safari, Chrome y Firefox, que lo dibujan distinto. */
.tmps-opcion summary::-webkit-details-marker {
	display: none;
}

.tmps-opcion summary::after {
	content: "+";
	float: right;
	color: var(--tmps-acento);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
}

.tmps-opcion[open] summary::after {
	content: "−";
}

.tmps-opcion summary:focus-visible {
	outline: 2px solid var(--tmps-acento);
	outline-offset: -2px;
}

.tmps-opcion-cuerpo {
	padding: 0 18px 16px;
}

.tmps-opcion-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmps-opcion-lista li {
	margin: 0 0 6px;
}

/*
 * Cada opción enseña su etiqueta a la izquierda y SU PRECIO a la derecha. Es la
 * diferencia entre elegir «3 dispositivos extra» a ciegas y elegirlo sabiendo lo
 * que cuesta; y como el precio lo calcula el servidor, es el mismo que se va a
 * cobrar.
 */
.tmps-opcion-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 14px;
	border: 1px solid var(--tmps-borde);
	border-radius: 8px;
	background: var(--tmps-fondo);
	color: var(--tmps-apagado) !important;
	font-size: 14px;
	text-decoration: none !important;
	transition: border-color 0.15s ease;
}

.tmps-opcion-item:hover {
	border-color: var(--tmps-acento);
}

.tmps-opcion-item:focus-visible {
	outline: 2px solid var(--tmps-acento);
	outline-offset: 2px;
}

/* La que ya está elegida no es un enlace muerto: se puede pulsar y no pasa
   nada. Marcarla evita que alguien la elija otra vez creyendo que cambia algo. */
.tmps-opcion-item.is-activa {
	border-color: var(--tmps-acento);
	background: rgba( 255, 90, 25, 0.1 );
	color: var(--tmps-texto) !important;
	font-weight: 600;
}

.tmps-opcion-precio {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.tmps-opcion-nota {
	margin: 12px 0 0;
	color: var(--tmps-apagado);
	font-size: 13px;
}

.tmps-opcion-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.tmps-opcion-form label {
	flex: 1 1 100%;
	color: var(--tmps-texto);
	font-size: 14px;
	font-weight: 600;
}

.tmps-opcion-form input[type="number"] {
	width: 100px;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--tmps-borde);
	border-radius: 8px;
	background: var(--tmps-fondo);
	color: var(--tmps-texto);
}

.tmps-opcion-form .tmps-btn {
	margin: 0;
	padding: 10px 20px;
	font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Campos de contacto y sus errores
 * ────────────────────────────────────────────────────────────────────── */

.tmps-pago-titulo {
	margin: 0 0 18px;
	color: var(--tmps-texto);
	font-size: 18px;
	font-weight: 700;
}

/*
 * Los campos que SÍ se escriben. El de correo de la versión anterior era de solo
 * lectura y por eso iba en gris con el cursor tachado; estos son editables y
 * tienen que parecerlo, o la gente no los rellena.
 */
.tmps-pago-campo input[type="tel"],
.tmps-pago-campo input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--tmps-borde);
	border-radius: 8px;
	background: var(--tmps-fondo);
	color: var(--tmps-texto);
	cursor: auto;
	transition: border-color 0.15s ease;
}

/*
 * EL PLACEHOLDER, EN BLANCO.
 *
 * Se declara con `opacity: 1` además del color, y no es redundante: Firefox le
 * aplica al placeholder una opacidad de 0.54 por su cuenta, así que sin esa
 * línea el mismo blanco se vería gris ahí y blanco en Chrome.
 *
 * Con el placeholder tan claro como el texto real, la única señal de que el
 * campo está vacío pasa a ser el propio contenido —«55 1234 5678» no es un
 * teléfono de nadie—. Es lo que se ha pedido, pero conviene saberlo: quien
 * mire por encima puede creer que ya está relleno, y ese es justo el motivo
 * de que los placeholders suelan ir apagados.
 */
.tmps-pago-campo input::placeholder {
	color: var(--tmps-texto);
	opacity: 1;
}

/*
 * Al escribir, el placeholder desaparece y manda el texto real; pero mientras
 * el campo está enfocado y vacío se atenúa un poco, que es la pista de «aquí
 * hay que escribir tú» en el momento en que hace falta.
 */
.tmps-pago-campo input:focus::placeholder {
	opacity: 0.55;
}

.tmps-pago-campo input:focus {
	border-color: var(--tmps-acento);
	outline: none;
}

.tmps-pago-campo input.is-invalido {
	border-color: var(--tmps-error);
}

.tmps-campo-error {
	margin: 6px 0 0;
	color: var(--tmps-error);
	font-size: 13px;
}

/* Un [hidden] pierde contra `display: block` de otras reglas; se refuerza. */
.tmps-pago [hidden] {
	display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Teléfono con país
 *
 * El desplegable y el campo van pegados, como un solo control: es lo que la
 * gente reconoce de cualquier otro formulario y deja claro que la lada y el
 * número son la misma respuesta partida en dos.
 * ────────────────────────────────────────────────────────────────────── */

.tmps-tel {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.tmps-tel select {
	flex: 0 0 auto;
	/*
	 * Ancho tope y recorte con puntos suspensivos. «República Dominicana +1» es
	 * largo, y sin tope el desplegable empujaría el campo del número hasta
	 * dejarlo inservible en un móvil. La lista desplegada se ve entera igual.
	 */
	max-width: 42%;
	padding: 12px 10px;
	border: 1px solid var(--tmps-borde);
	border-right: none;
	border-radius: 8px 0 0 8px;
	background: var(--tmps-tarjeta);
	color: var(--tmps-texto);
	text-overflow: ellipsis;
	cursor: pointer;
}

.tmps-tel select:focus {
	border-color: var(--tmps-acento);
	outline: none;
	/* Sin borde derecho propio, al enfocar hay que repintar la junta o queda un
	   hueco naranja a medias. */
	box-shadow: 1px 0 0 0 var(--tmps-acento);
}

.tmps-tel input[type="tel"] {
	flex: 1 1 auto;
	min-width: 0; /* Sin esto un flex-item no baja de su ancho de contenido. */
	border-radius: 0 8px 8px 0 !important;
}

/* El rojo del error tiene que abarcar el control entero, no solo la mitad
   derecha: si no, parece que el fallo es de la lada. */
.tmps-tel input.is-invalido,
.tmps-tel:has( input.is-invalido ) select {
	border-color: var(--tmps-error);
}

@media ( max-width: 380px ) {

	/* En pantallas muy estrechas no caben en una línea sin que el número quede
	   en cuatro caracteres visibles. Se apilan. */
	.tmps-tel {
		flex-wrap: wrap;
	}

	.tmps-tel select {
		max-width: 100%;
		flex: 1 1 100%;
		border-right: 1px solid var(--tmps-borde);
		border-radius: 8px 8px 0 0;
	}

	.tmps-tel input[type="tel"] {
		flex: 1 1 100%;
		border-top: none;
		border-radius: 0 0 8px 8px !important;
	}
}

/* La cifra de conexiones, justo bajo el precio. Mismo tono que el resto del
   texto secundario, pero el número en blanco: es lo que se busca al leerla. */
.tmps-resumen-conexiones {
	margin: 0 0 4px;
	color: var(--tmps-apagado);
	font-size: 15px;
}

.tmps-resumen-conexiones strong {
	color: var(--tmps-texto);
	font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Buscador de país
 *
 * El <select> original sigue en el DOM y sigue siendo lo que se envía; solo se
 * saca de la vista. Se esconde con la técnica de accesibilidad de siempre y no
 * con `display:none`, porque un campo con `display:none` que el navegador
 * decide autocompletar deja de comportarse igual en algunos casos.
 * ────────────────────────────────────────────────────────────────────── */

.tmps-pago .tmps-oculto-visual {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.tmps-buscapais {
	position: relative;
	flex: 0 0 auto;
}

/*
 * El lado derecho se funde con el campo del número. Se escribe el color además
 * de quitar el ancho: `border-right: none` reinicia ese color a `currentColor`
 * —blanco aquí—, así que si alguien vuelve a forzar un ancho, reaparecería la
 * raya. Con el color declarado, en el peor caso sería invisible.
 */
.tmps-buscapais-boton {
	border-right-color: transparent;
	height: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--tmps-borde);
	border-right: none;
	border-radius: 8px 0 0 8px;
	background: var(--tmps-tarjeta) !important;
	color: var(--tmps-texto) !important;
	font-size: 15px;
	white-space: nowrap;
	cursor: pointer;
}

.tmps-buscapais-boton::after {
	content: " ▾";
	color: var(--tmps-apagado);
}

.tmps-buscapais-boton:focus-visible {
	outline: 2px solid var(--tmps-acento);
	outline-offset: -2px;
}

/*
 * El panel flota por encima en vez de empujar el formulario. Si empujara, al
 * abrirlo se movería todo lo de abajo —incluido el botón de pagar— y eso
 * provoca clics en el sitio equivocado.
 */
.tmps-buscapais-panel {
	position: absolute;
	z-index: 30;
	top: calc( 100% + 6px );
	left: 0;
	width: 320px;
	/*
	 * El tope se mide contra la ventana, no contra el padre. `80vw` dejaba 20 %
	 * de margen, pero el panel arranca en el borde izquierdo del botón, que ya
	 * está desplazado hacia dentro: sumando, en un iPhone estrecho se salía por
	 * la derecha. Con `calc` se reserva un margen fijo por ambos lados.
	 */
	max-width: calc( 100vw - 48px );
	padding: 10px;
	border: 1px solid var(--tmps-borde);
	border-radius: 10px;
	background: var(--tmps-tarjeta);
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.45 );
}

.tmps-buscapais-input {
	width: 100%;
	margin: 0 0 8px;
	padding: 10px 12px;
	border: 1px solid var(--tmps-borde);
	border-radius: 8px;
	background: var(--tmps-fondo);
	color: var(--tmps-texto);
}

.tmps-buscapais-input:focus {
	border-color: var(--tmps-acento);
	outline: none;
}

.tmps-buscapais-lista {
	max-height: 260px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.tmps-buscapais-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 6px;
	color: var(--tmps-apagado);
	font-size: 14px;
	cursor: pointer;
}

.tmps-buscapais-item:hover {
	background: var(--tmps-fondo);
	color: var(--tmps-texto);
}

.tmps-buscapais-item.is-activa {
	background: rgba( 255, 90, 25, 0.12 );
	color: var(--tmps-texto);
	font-weight: 600;
}

.tmps-buscapais-vacio {
	padding: 12px 10px;
	color: var(--tmps-apagado);
	font-size: 14px;
	text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Métodos de pago
 * ────────────────────────────────────────────────────────────────────── */

.tmps-metodos {
	margin: 0 0 22px;
}

/*
 * Toda la tarjeta es el <label>, así que se puede pulsar en cualquier parte y
 * no solo en el circulito. En un móvil, acertarle a un radio de 16 píxeles es
 * exactamente el tipo de fricción que hace abandonar un pago.
 */
/*
 * La fila ya no reparte radio y cuerpo en horizontal: el radio se metió DENTRO
 * de la línea del nombre, junto al icono, que es lo único que los deja
 * alineados sea cual sea el alto del logo.
 */
.tmps-metodo {
	display: block;
	margin: 0 0 8px;
	padding: 14px 16px;
	border: 1px solid var(--tmps-borde);
	border-radius: 10px;
	background: var(--tmps-fondo);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.tmps-metodo:hover {
	border-color: var(--tmps-acento);
}

/*
 * ─────────────────────────────────────────────────────────────────────────
 * EL RADIO SE ESCONDE, PERO NO SE BORRA. LA DIFERENCIA ES TODO.
 *
 * Quien elige es la tarjeta entera: el <label> ya envuelve todo, así que un
 * clic en cualquier punto marca la opción. El circulito sobraba visualmente.
 *
 * Pero el <input> SIGUE en el HTML, escondido con la técnica de accesibilidad
 * de siempre —fuera de la pantalla, no `display: none`—. Si se borrara:
 *
 *   · el formulario dejaría de enviar qué método se eligió;
 *   · no se podría cambiar de opción con las flechas del teclado;
 *   · un lector de pantalla no anunciaría que esto es un grupo de opciones
 *     ni cuál está marcada.
 *
 * Con `display: none` pasaría casi lo mismo: los navegadores lo sacan del
 * orden de tabulación y algunos ni lo envían. Por eso se esconde así y no de
 * la forma corta.
 * ─────────────────────────────────────────────────────────────────────────
 */
.tmps-metodo input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/*
 * La tarjeta elegida. Con el circulito fuera, esto es lo ÚNICO que dice cuál
 * está marcada, así que se marca por partida doble —borde y fondo— y no solo
 * con un tinte: un fondo apenas más claro no se distingue en una pantalla con
 * brillo bajo o a pleno sol.
 */
.tmps-metodo:has( input:checked ) {
	border-color: var(--tmps-acento);
	background: rgba( 255, 90, 25, 0.1 );
	box-shadow: inset 0 0 0 1px var(--tmps-acento);
}

/*
 * EL FOCO DEL TECLADO TIENE QUE VERSE EN LA TARJETA.
 *
 * El anillo de foco lo dibujaba el navegador alrededor del circulito. Al
 * esconderlo, quien navega con el tabulador se quedaría sin ninguna pista de
 * dónde está: recorrería las cuatro opciones a ciegas. Se traslada el anillo
 * a la tarjeta, que es lo que ahora hace de control.
 */
.tmps-metodo:has( input:focus-visible ) {
	outline: 2px solid var(--tmps-acento);
	outline-offset: 2px;
}

.tmps-metodo-cuerpo {
	display: block;
}

/* El nombre, en texto, a la derecha del icono. */
.tmps-metodo-texto {
	line-height: 1.2;
}

.tmps-metodo-nombre {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	color: var(--tmps-texto);
	font-size: 15px;
	font-weight: 600;
}

/*
 * ─────────────────────────────────────────────────────────────────────────
 * FILA CON LOGO: radio, logo y descripción, todo en la misma línea.
 *
 * El logo lleva el nombre escrito dentro, así que lo que va a su derecha es la
 * descripción. Se alinean por el CENTRO del logo y no por su base, que con una
 * descripción de dos líneas dejaría el texto colgando por debajo de la imagen.
 * ─────────────────────────────────────────────────────────────────────────
 */
.tmps-metodo-nombre.is-con-logo {
	align-items: center;
	font-weight: 400;
}

/*
 * La descripción pegada al logo. `flex: 1 1 180px` es lo que hace que, cuando
 * el sitio se acaba, salte a su propia línea entera en lugar de estrujarse en
 * una columna de tres palabras: por encima de 180 px se queda al lado, por
 * debajo baja. Sin ese mínimo, en un móvil quedaría ilegible.
 */
.tmps-metodo-desc--junto {
	flex: 1 1 180px;
	min-width: 0;
	margin-top: 0 !important;
	padding-left: 0 !important;
}

/*
 * La descripción, cuando va DEBAJO —los métodos sin logo—, se sangra hasta
 * quedar bajo el nombre y no bajo el radio. 16 px del radio + 12 px de hueco.
 */
/* Ya no hay circulito del que apartarse: la descripción arranca a ras. */
.tmps-metodo-desc {
	display: block;
	margin-top: 6px;
	color: var(--tmps-apagado);
	font-size: 13px;
	line-height: 1.45;
}

/*
 * Los que aún no están. Se atenúan y se les quita el cursor de mano: la señal
 * de que no se pueden tocar tiene que llegar antes del clic, no después.
 */
/*
 * El método que aún no está se atenúa POR PARTES, no entero.
 *
 * Un `opacity` sobre toda la fila caería también sobre el logo, y aplicarle
 * efectos al logo está prohibido por las dos marcas. Se atenúan los textos y el
 * radio, que es lo que hace falta para que se lea como no disponible.
 */
.tmps-metodo.is-proximamente {
	cursor: not-allowed;
}

.tmps-metodo.is-proximamente .tmps-metodo-desc,
.tmps-metodo.is-proximamente .tmps-metodo-texto,
.tmps-metodo.is-proximamente .tmps-metodo-pronto {
	opacity: 0.5;
}

.tmps-metodo.is-proximamente:hover {
	border-color: var(--tmps-borde);
}

.tmps-metodo.is-proximamente input[type="radio"] {
	cursor: not-allowed;
}

.tmps-metodo-pronto {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border: 1px solid var(--tmps-borde);
	border-radius: 999px;
	color: var(--tmps-apagado);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Cancelar / Realizar pago
 * ────────────────────────────────────────────────────────────────────── */


/*
 * En columna: pagar arriba, cancelar debajo.
 *
 * Centrados y sin ocupar todo el ancho. Un botón a ancho completo pesa más de
 * lo que merece: la decisión ya está tomada más arriba, aquí solo se confirma.
 */
.tmps-acciones {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

/*
 * LOS DOS BOTONES COMPARTEN CAJA. Mismo relleno, mismo tipo, mismo ancho
 * mínimo, mismo borde. Lo ÚNICO que los distingue es el color: el de pagar va
 * relleno de naranja y el de cancelar transparente con el texto apagado.
 *
 * Antes cada uno traía su propio relleno y su propio borde. Puestos uno debajo
 * del otro se veía que no estaban alineados, y al pasar el ratón cada uno
 * reaccionaba a su manera. Dos botones en la misma columna tienen que ser el
 * mismo objeto pintado de dos colores.
 */
.tmps-acciones .tmps-btn {
	min-width: 220px;
	/* El tope importa más que el mínimo: en una pantalla muy estrecha, 220 px
	   más el relleno se saldrían y aparecería desplazamiento horizontal. */
	max-width: 100%;
	margin: 0 !important;
	padding: 13px 32px !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
}

/* Sin borde: es una salida, no una acción que compita con la de pagar. Solo
   texto, con sitio de sobra alrededor para poder pulsarlo con el pulgar. */
/* Solo cambia el color. La caja la pone .tmps-acciones .tmps-btn, igual para
   los dos. El borde es transparente, no inexistente: así ocupa lo mismo. */
.tmps-btn--cancelar {
	border-color: transparent !important;
	background-color: transparent !important;
	color: var(--tmps-apagado) !important;
	font-weight: 500 !important;
}

.tmps-btn--cancelar:hover {
	color: var(--tmps-texto) !important;
	/* El de pagar ya se atenúa al pasar por encima; este cambia de color, así
	   que la opacidad se deja quieta o se atenuaría dos veces. */
	opacity: 1;
}

/*
 * ─────────────────────────────────────────────────────────────────────────
 * LA MARCA DE LA PASARELA — MEDIDAS SACADAS DEL MANUAL, NO DEL OJO.
 *
 * Mercado Pago publica tres números para su logo horizontal:
 *
 *   · Tamaño mínimo: 120 px de ancho. Por debajo no se puede usar.
 *   · Reducción: 50 px, y SOLO el iso sin las palabras, para cuando no cabe
 *     el logo completo a 120. Aquí sí cabe, así que no se recurre a ella.
 *   · Área de resguardo: el alto de la letra «d» del logotipo, libre de
 *     cualquier otro elemento, por los cuatro lados.
 *
 * De ahí salen los valores de abajo. El archivo puesto mide 1048.82 × 425.2
 * —2.47:1—, así que a 120 px de ancho quedan unos 49 de alto; en ese lockup
 * la «d» es aproximadamente un tercio del alto total, de donde salen los 16 px.
 *
 * SI SE CAMBIA EL ARCHIVO POR OTRO DE DISTINTA PROPORCIÓN, ESOS 16 PX HAY QUE
 * RECALCULARLOS.
 * ─────────────────────────────────────────────────────────────────────────
 */
/*
 * SIN RELLENO A LA IZQUIERDA: el logo va pegado al borde de su columna.
 *
 * El área de resguardo que pide la marca se sigue cumpliendo por ese lado, solo
 * que la pone el relleno de la propia tarjeta (16 px) en lugar de sumarse a él.
 * Antes se acumulaban los dos y el logo quedaba flotando en mitad de la fila.
 */
.tmps-metodo-marca {
	display: inline-flex;
	align-items: center;
	/*
	 * El área de resguardo. Con fondo transparente sigue siendo espacio libre,
	 * que es exactamente lo que pide la norma.
	 *
	 * 16 px para el lockup —donde la «d» es aproximadamente un tercio de sus
	 * 49 px de alto— y 8 px para el iso, que mide menos de la mitad. El manual
	 * define el resguardo por la altura de la «d» del logotipo; el iso no la
	 * lleva, así que se escala en la misma proporción.
	 */
	padding: 16px 16px 16px 0;
	border-radius: 8px;
}

/* Con placa blanca sí hace falta el relleno izquierdo: si no, el logo tocaría
   el borde de la placa. */
.tmps-metodo-marca.is-claro {
	padding-left: 16px;
}

.tmps-metodo-marca.is-iso {
	/* El resguardo va en proporción al logo, no en un valor suelto: si se sube
	   el ancho del iso y esto se quedara fijo, el logo acabaría rozando el
	   borde de la fila. */
	padding: calc( var(--tmps-logo-iso) * 0.15 );
}

/*
 * La placa blanca, SOLO para logos a color.
 *
 * La norma permite el color sobre fondo de marca o sobre blanco, y lo prohíbe
 * sobre colores ajenos. Nuestra tarjeta es #1D1D1D. El logo NEGATIVO —el que
 * está puesto para Mercado Pago— es blanco y su sitio es precisamente el fondo
 * negro: una placa blanca detrás lo haría desaparecer.
 */
.tmps-metodo-marca.is-claro {
	background: #ffffff;
}

/*
 * ANCHO FIJO EN EL MÍNIMO, ALTO LIBRE.
 *
 * 120 px es el mínimo que exige la marca, así que se fija ahí y no se baja
 * nunca —tampoco en móvil, que es donde más tienta encogerlo y donde
 * incumpliríamos igual—. El alto va en `auto` para que el archivo conserve su
 * proporción: condensarlo o estirarlo es la primera prohibición del manual.
 *
 * Sin filtros, sombras ni `opacity` sobre la imagen: alterar los colores o
 * aplicar efectos también están prohibidos.
 */
/*
 * DOS TAMAÑOS, UNO POR CADA VERSIÓN DEL LOGO, Y LOS DOS SON MÍNIMOS DEL MANUAL:
 *
 *   · `is-iso`    50 px. Es la «reducción»: el símbolo solo, para cuando el
 *                 nombre va escrito al lado. Es lo que se usa aquí.
 *   · `is-lockup` 120 px. El logo completo con las palabras dentro, para cuando
 *                 no hay etiqueta de texto que lo acompañe.
 *
 * En los dos casos se fija el ANCHO y el alto va libre: el manual mide por
 * ancho, y dejar el alto en `auto` es lo que impide deformarlo.
 */
.tmps-metodo-marca.is-iso .tmps-metodo-icono {
	display: block;
	width: var(--tmps-logo-iso);
	height: auto;
}

.tmps-metodo-marca.is-lockup .tmps-metodo-icono {
	display: block;
	width: var(--tmps-logo-lockup);
	height: auto;
}


/*
 * Las listas de opciones —plazos y dispositivos—, en dos columnas.
 *
 * Con `grid` y no con `columns`: el multicolumna de CSS reparte por altura y el
 * reparto salta al cambiar el número de opciones. Grid mantiene el orden de
 * lectura de izquierda a derecha y cada celda en su sitio, que en una lista de
 * precios ordenados de menor a mayor no es un detalle.
 *
 * Con un número impar de opciones —nueve, con los dispositivos de 0 a 8— la
 * última queda sola en su fila. Es correcto: rellenar ese hueco estirando la
 * celda haría que esa opción pareciera distinta de las demás.
 */
.tmps-opcion-lista--dos {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 6px;
}

.tmps-opcion-lista--dos li {
	margin: 0;
}

/* Las etiquetas se recortan antes que empujar el precio fuera de la celda: en
   una columna estrecha, «Sin dispositivos extra» y el importe no caben juntos. */
.tmps-opcion-lista--dos .tmps-opcion-item {
	gap: 8px;
	padding: 10px 12px;
}

.tmps-opcion-lista--dos .tmps-opcion-etiqueta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media ( max-width: 420px ) {

	/* En pantallas estrechas, dos columnas dejan cuatro caracteres visibles por
	   celda. Vuelve a una sola: es más largo pero se lee. */
	.tmps-opcion-lista--dos {
		grid-template-columns: minmax( 0, 1fr );
	}

	.tmps-opcion-lista--dos .tmps-opcion-etiqueta {
		white-space: normal;
	}
}

/*
 * Mientras se pide el precio nuevo.
 *
 * Se atenúa y se bloquean los clics, pero NO se vacía ni se sustituye por un
 * girador. Que el contenido siga ahí, apagado, deja claro que se está
 * actualizando eso mismo; un hueco en blanco de medio segundo en una pantalla
 * de pago se lee como que algo se rompió.
 */
.tmps-pago [data-tmps-dinamico] {
	transition: opacity 0.12s ease;
}

.tmps-pago [data-tmps-dinamico].is-cargando {
	opacity: 0.55;
	pointer-events: none;
}

/* Los botones van fuera de las tarjetas, sobre el fondo de la página: son la
   acción sobre todo lo de arriba, no parte de la última caja. */
.tmps-acciones {
	margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * LA PANTALLA DE DESPUÉS DEL PAGO
 *
 * Reutiliza `.tmps-card` y `.tmps-btn` a propósito: quien llega aquí acaba de
 * salir del formulario y de la pasarela, y si esto se viera distinto pensaría
 * que ha ido a parar a otro sitio. El color es lo único que cambia según cómo
 * haya acabado.
 * ────────────────────────────────────────────────────────────────────── */

.tmps-resultado {
	padding: 0;
}

/*
 * EL COLOR DEL ESTADO SE DECLARA UNA VEZ Y LO USA TODO LO DEMÁS.
 *
 * Sin esto habría que repetir el verde en el icono, en el borde y en el título
 * de cada uno de los cuatro estados: doce sitios donde equivocarse. Con una
 * variable por estado, cambiar el verde es cambiar una línea.
 *
 * Ojo con el rojo: NO se usa el mismo que los errores de validación del
 * formulario. Un campo mal escrito y un pago rechazado no son la misma clase de
 * problema, y conviene que no se vean igual.
 */
.tmps-resultado.is-confirmado  { --tmps-estado: #2bb673; }
.tmps-resultado.is-pendiente   { --tmps-estado: var(--tmps-aviso); }
.tmps-resultado.is-declinado   { --tmps-estado: #e5484d; }
.tmps-resultado.is-desconocido { --tmps-estado: var(--tmps-apagado); }

.tmps-resultado-caja {
	text-align: center;
	/*
	 * Una línea de color arriba, y solo arriba. Rodear la tarjeta entera de
	 * verde o de rojo grita demasiado en una pantalla que la gente mira
	 * nerviosa; una banda basta para que se entienda de un vistazo.
	 */
	border-top: 3px solid var(--tmps-estado);
}

.tmps-resultado-marca {
	color: var(--tmps-estado);
	margin: 4px 0 12px;
	line-height: 0;
}

.tmps-resultado-titulo {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	color: var(--tmps-texto);
	line-height: 1.25;
}

.tmps-resultado-texto {
	margin: 0 auto;
	max-width: 42ch;
	font-size: 15px;
	color: var(--tmps-apagado);
}

/*
 * EL DESGLOSE, EN DOS COLUMNAS DE VERDAD.
 *
 * Se usa <dl> y no una tabla porque esto es una lista de pares término/valor,
 * que es exactamente para lo que existe <dl>; un lector de pantalla lo anuncia
 * emparejado en lugar de leer ocho celdas sueltas.
 */
.tmps-resultado-detalle {
	margin: 22px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--tmps-borde);
	text-align: left;
}

.tmps-resultado-detalle > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 7px 0;
}

.tmps-resultado-detalle dt {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--tmps-apagado);
}

.tmps-resultado-detalle dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--tmps-texto);
	text-align: right;
}

.tmps-resultado-contacto {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--tmps-borde);
	border-radius: 10px;
	text-align: left;
}

.tmps-resultado-contacto-titulo {
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--tmps-apagado);
}

.tmps-resultado-dato {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 600;
	color: var(--tmps-texto);
	/* Un correo largo no debe empujar la tarjeta fuera de la pantalla. */
	overflow-wrap: anywhere;
}

.tmps-resultado-aviso {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--tmps-apagado);
}

/*
 * LA REFERENCIA VA PEQUEÑA Y ABAJO, PERO VA.
 *
 * No le dice nada a quien compra, y por eso no ocupa un lugar destacado. Le
 * dice todo a quien atiende: es el único dato que permite encontrar ese pago
 * concreto entre todos, así que cuando alguien escriba «no me llegó nada», lo
 * que hay que pedirle es esto.
 */
.tmps-resultado-referencia {
	margin: 18px 0 0;
	font-size: 13px;
	color: var(--tmps-apagado);
}

.tmps-resultado-referencia code {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--tmps-fondo);
	color: var(--tmps-apagado);
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* El cartel de la vista previa. Rayado para que no se confunda con la web. */
.tmps-resultado-demo {
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 1px dashed var(--tmps-aviso);
	border-radius: 8px;
	color: var(--tmps-aviso);
	font-size: 14px;
	text-align: center;
}


/*
 * ═════════════════════════════════════════════════════════════════════════
 * AJUSTES DE MÓVIL. VAN AL FINAL DEL ARCHIVO, Y ESO IMPORTA.
 *
 * Un `@media` NO añade especificidad. `.tmps-metodo-pronto` dentro de un
 * media query y `.tmps-metodo-pronto` fuera pesan exactamente lo mismo, así
 * que decide el orden: gana la última escrita.
 *
 * El bloque de móvil que ya había está en mitad del archivo, antes de que se
 * declaren la mayoría de los componentes. Cualquier ajuste de tamaño puesto
 * allí lo pisa después la regla normal del componente, y el efecto es que
 * pareces haberlo arreglado y en el teléfono no cambia nada.
 *
 * De ahí que este bloque vaya aquí abajo. Todo ajuste de móvil que toque
 * componentes tiene que ir DESPUÉS de ellos, es decir, en este bloque y no
 * en el de arriba.
 * ═════════════════════════════════════════════════════════════════════════
 */
@media ( max-width: 480px ) {

	/*
	 * ─────────────────────────────────────────────────────────────────────
	 * QUE NADIE NECESITE PELLIZCAR PARA LEER.
	 *
	 * Ampliar con dos dedos tiene un problema que no es el de ampliar: es que
	 * mucha gente NO SABE VOLVER. Se quedan con la página desplazada, el
	 * importe fuera de la pantalla por un lado y el botón de pagar por el
	 * otro, y lo que hacen entonces es irse.
	 *
	 * No se puede impedir el gesto —iOS no deja, y aunque dejara sería peor—.
	 * Lo que sí se puede es quitarle el motivo: si todo se lee del tirón con
	 * el móvil en la mano, nadie va a pellizcar.
	 *
	 * Los tamaños de abajo son los de escritorio subidos. En un monitor a
	 * medio metro, 13 px se leen; en un móvil, a la misma distancia pero con
	 * la letra física mucho más pequeña, no. Esto es lo que en escritorio
	 * eran 11 y 13 px.
	 * ─────────────────────────────────────────────────────────────────────
	 */
	.tmps-pago-nota,
	.tmps-opcion-nota,
	.tmps-campo-error,
	.tmps-metodo-desc,
	.tmps-resumen-lista li i,
	.tmps-bandera {
		font-size: 14px;
	}

	.tmps-metodo-pronto {
		font-size: 12px;
	}

	.tmps-resumen-lista li,
	.tmps-pago-explica,
	.tmps-pago-condiciones li,
	.tmps-opcion-item,
	.tmps-metodo-nombre {
		font-size: 15px;
	}

	/*
	 * Y LO QUE SE TOCA, QUE SE PUEDA TOCAR.
	 *
	 * Apple pide 44 px de alto como mínimo para cualquier cosa pulsable, y no
	 * es un capricho: es aproximadamente la huella de un dedo. Por debajo de
	 * eso se falla el toque, y quien falla dos veces seguidas AMPLÍA PARA
	 * ACERTAR —que es exactamente el gesto que queremos que nadie necesite—.
	 *
	 * Estos tres se quedaban entre 40 y 44. Con `min-height` no se estira lo
	 * que ya era más alto; solo se levanta el suelo.
	 */
	.tmps-opcion-item,
	.tmps-buscapais-item,
	.tmps-opcion-form .tmps-btn {
		min-height: 44px;
	}

	/*
	 * `min-height` sobre una caja de bloque hace más alta la caja pero deja el
	 * texto arriba. Con flex, el texto se queda centrado y los 44 px se ganan
	 * por igual arriba y abajo.
	 */
	.tmps-buscapais-item,
	.tmps-opcion-form .tmps-btn {
		display: flex;
		align-items: center;
	}

	.tmps-opcion-form .tmps-btn {
		justify-content: center;
	}
}