/**
 * Rio360Ya frente a las apps grandes.
 *
 * Mismo lenguaje que la tabla de planes que va justo encima: tarjeta
 * blanca de esquinas redondas, sombra baja, verde de la marca para lo
 * nuestro y gris para lo demás. Van pegadas en la página, así que si
 * no se parecieran se leerían como dos cosas de sitios distintos.
 */

.rio360-vs {
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.rio360-vs *,
.rio360-vs *::before,
.rio360-vs *::after {
	box-sizing: border-box;
}

.rio360-vs__head {
	margin: 0 0 24px;
	text-align: center;
}

/*
 * Selector doble: el tema le pone tamaño propio a los h2 del contenido
 * y le ganaba al del componente.
 */
.rio360-vs .rio360-vs__title {
	margin: 0 0 8px;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	color: #14141c;
	letter-spacing: -0.01em;
}

.rio360-vs__lead {
	max-width: 640px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.55;
	color: #5b6070;
}

/* Si no cabe, se arrastra de lado; nunca se come el ancho de la página. */
.rio360-vs__scroll {
	overflow-x: auto;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 10px 40px rgba( 20, 20, 28, .08 );
	-webkit-overflow-scrolling: touch;
}

.rio360-vs__table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	background: transparent;
	font-size: 15px;
	color: #14141c;
}

.rio360-vs__table th,
.rio360-vs__table td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid #eceef3;
}

.rio360-vs__table tbody tr:last-child th,
.rio360-vs__table tbody tr:last-child td {
	border-bottom: 0;
}

.rio360-vs__table thead th {
	padding-top: 26px;
	padding-bottom: 20px;
	background: #fbfbfd;
	border-bottom: 1px solid #e4e7ee;
	vertical-align: bottom;
}

.rio360-vs__what {
	width: 34%;
	font-weight: 600;
}

.rio360-vs__rowtitle {
	display: block;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	color: #14141c;
}

.rio360-vs__rowdet {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: #7a8092;
}

.rio360-vs__brand {
	display: block;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	color: #14141c;
}

.rio360-vs__brand span {
	color: #16a34a;
}

.rio360-vs__brand--otra {
	color: #7a8092;
	font-weight: 500;
}

.rio360-vs__from {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
	color: #7a8092;
}

/* La columna nuestra va sobre fondo verde muy claro, de arriba abajo. */
.rio360-vs__mine {
	background: #f2fbf5;
	font-weight: 600;
	color: #14141c;
}

.rio360-vs__table thead .rio360-vs__mine {
	background: #e8f7ee;
}

.rio360-vs__theirs {
	color: #5b6070;
}

.rio360-vs__mine.is-gana {
	display: table-cell;
}

.rio360-vs__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	vertical-align: -5px;
	flex: none;
}

.rio360-vs__cuenta {
	margin: 20px 0 0;
	padding: 22px 26px;
	border-radius: 22px;
	background: #14141c;
	color: #fff;
}

.rio360-vs__cuenta-title {
	margin: 0 0 6px;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: #ffc637;
}

.rio360-vs__cuenta-texto {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #e7e5e0;
}

/* Dentro del bloque oscuro: se lee, pero sin robarle el ojo al número. */
.rio360-vs__nota {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba( 255, 255, 255, .12 );
	font-size: 12.5px;
	line-height: 1.55;
	color: rgba( 255, 255, 255, .68 );
}

/*
 * En celular deja de ser tabla.
 *
 * Tres columnas en una pantalla de teléfono no se leen: o se encogen
 * hasta romper las palabras, o toca arrastrar de lado y se pierde de
 * vista qué fila se está mirando. Cada fila pasa a ser una tarjeta y
 * cada dato lleva escrito de quién es.
 */
@media ( max-width: 780px ) {

	.rio360-vs__scroll {
		overflow: visible;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
	}

	.rio360-vs__table,
	.rio360-vs__table tbody,
	.rio360-vs__table tr,
	.rio360-vs__table th,
	.rio360-vs__table td {
		display: block;
		width: auto;
		min-width: 0;
	}

	.rio360-vs__table thead {
		display: none;
	}

	.rio360-vs__table tr {
		margin: 0 0 14px;
		padding: 18px 20px;
		border-radius: 22px;
		background: #fff;
		box-shadow: 0 8px 28px rgba( 20, 20, 28, .07 );
	}

	.rio360-vs__table th,
	.rio360-vs__table td {
		padding: 0;
		border: 0;
	}

	.rio360-vs__table .rio360-vs__what {
		margin-bottom: 12px;
	}

	.rio360-vs__table td {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 9px 12px;
		margin-top: 6px;
		border-radius: 14px;
		background: #f6f7fa;
		font-size: 14.5px;
	}

	.rio360-vs__table td::before {
		content: attr( data-rio360-vs-label );
		flex: none;
		width: 92px;
		font-size: 12.5px;
		font-weight: 600;
		line-height: 1.5;
		color: #7a8092;
	}

	.rio360-vs__table td.rio360-vs__mine {
		background: #eef9f2;
	}

	.rio360-vs__table td.rio360-vs__mine::before {
		color: #16a34a;
	}

	.rio360-vs__tick {
		width: 20px;
		height: 20px;
		margin-right: 0;
		vertical-align: 0;
	}

	.rio360-vs .rio360-vs__title {
		font-size: 25px;
	}
}

/* El número que se recuerda al salir de la página. */
.rio360-vs__cuenta-saldo {
	margin: 12px 0 0;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: #ffc637;
}