/**
 * Tabla de planes pública.
 *
 * Tres tarjetas del mismo alto con el botón siempre a la
 * misma altura: la lista de funciones va debajo y crece
 * hacia abajo, así el ojo compara precio y botón sin
 * saltar de una tarjeta a otra.
 */

/*
 * Los títulos y los precios van en Fredoka —la redonda de la marca— y
 * el resto hereda la del tema.
 *
 * Outfit va de segunda por una razón concreta: en el sitio publicado,
 * el @import de Fredoka y Nunito está metido dentro de una etiqueta
 * <script> en la cabecera, así que el navegador nunca lo aplica y esas
 * dos fuentes no llegan a cargarse. Outfit sí. Hasta que se arregle
 * esa etiqueta, esto evita caer en la tipografía del sistema; después,
 * Fredoka gana sin tocar nada.
 */
.rio360-precios {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
	align-items: start;
	width: 100%;
	margin: 0 auto;
}

/* Relativa: la etiqueta del descuento se ancla a su esquina. */
.rio360-precios__card {
	position: relative;
	background: #fff;
	border-radius: 28px;
	padding: 36px 32px 40px;
	box-shadow: 0 10px 40px rgba( 20, 20, 28, .08 );
	height: 100%;
	box-sizing: border-box;
}

.rio360-precios__card.is-dark {
	background: #14141c;
	color: #fff;
}

/*
 * Se escribe con el selector doble a propósito: el tema le pone
 * tamaño a los h3 del contenido y ganaba, dejando el nombre del plan
 * casi tan grande como el precio.
 */
.rio360-precios .rio360-precios__name {
	margin: 0 0 6px;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #16a34a;
	line-height: 1.2;
	letter-spacing: 0;
}

.rio360-precios__card.is-dark .rio360-precios__name {
	color: #ffc637;
}

.rio360-precios__price {
	margin: 0 0 10px;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.rio360-precios__price strong {
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 52px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.05;
	color: #14141c;
}

.rio360-precios__card.is-dark .rio360-precios__price strong {
	color: #fff;
}

.rio360-precios__price span {
	font-size: 17px;
	color: #8a8a95;
}

.rio360-precios__tagline {
	margin: 0 0 24px;
	font-size: 14px;
	color: #8a8a95;
	line-height: 1.45;
	/* Dos líneas fijas: sin esto los botones se desalinean. */
	min-height: 40px;
}

/* ---------- Botón ---------- */

.rio360-precios__btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 20px;
	border: 0;
	border-radius: 12px;
	background: #14141c;
	color: #fff;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, opacity .15s ease;
}

.rio360-precios__btn:hover,
.rio360-precios__btn:focus {
	color: #fff;
	transform: translateY( -1px );
	opacity: .92;
}

.rio360-precios__card.is-dark .rio360-precios__btn {
	background: #ff5a5f;
}

.rio360-precios__btn--active {
	background: #e8f7ee;
	color: #15803d;
	cursor: default;
}

.rio360-precios__card.is-dark .rio360-precios__btn--active {
	background: rgba( 255, 255, 255, .12 );
	color: #ffc637;
}

.rio360-precios__btn--active:hover {
	transform: none;
	opacity: 1;
	color: #15803d;
}

.rio360-precios__card form {
	margin: 0;
}

/* ---------- Lista ---------- */

/*
 * Divi le pone viñeta a toda lista del contenido con más peso que
 * `list-style: none`, así que quedaba un punto al lado del visto:
 * dos marcas para decir lo mismo.
 */
.rio360-precios__list,
.rio360-precios__list li {
	list-style: none !important;
}

.rio360-precios__list li::marker {
	content: none;
}

.rio360-precios__list {
	margin: 28px 0 0;
	padding: 0;
}

.rio360-precios__list li {
	position: relative;
	padding: 0 0 0 28px;
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.4;
	color: #3f3f4a;
}

.rio360-precios__card.is-dark .rio360-precios__list li {
	color: #e6e6ec;
}

.rio360-precios__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 16px;
	font-weight: 700;
	color: #22c55e;
}

.rio360-precios__card.is-dark .rio360-precios__list li::before {
	color: #ffc637;
}

/* ---------- Aviso ---------- */

.rio360-precios__modal[hidden] {
	display: none;
}

.rio360-precios__modal {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.rio360-precios__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 20, 20, 28, .6 );
}

.rio360-precios__dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 20px;
	padding: 36px 32px 32px;
	box-shadow: 0 20px 60px rgba( 20, 20, 28, .3 );
	text-align: center;
}

.rio360-precios__x {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: #8a8a95;
	cursor: pointer;
}

.rio360-precios__modal-title {
	margin: 0 0 10px;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 21px;
	font-weight: 800;
	color: #14141c;
}

.rio360-precios__modal-text {
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.5;
	color: #6b6b76;
}

/* ---------- Móvil ---------- */

@media ( max-width: 980px ) {

	.rio360-precios {
		grid-template-columns: 1fr;
		max-width: 460px;
		gap: 20px;
	}

	.rio360-precios__card {
		padding: 30px 26px 34px;
	}

	.rio360-precios__price strong {
		font-size: 44px;
	}

	.rio360-precios__tagline {
		min-height: 0;
	}

}

/* ---------- Selector de plazo ---------- */

.rio360-precios__plazo {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 0 20px;
}

.rio360-precios__plazo label {
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #14141c;
}

.rio360-precios__plazo select {
	font-family: inherit;
	font-size: 15px;
	color: #14141c;
	background: #fff;
	border: 2px solid #14141c;
	border-radius: 12px;
	padding: 10px 14px;
	cursor: pointer;
	max-width: 100%;
}

.rio360-precios__total {
	margin: -4px 0 16px;
	font-size: 14px;
	color: #6b6b76;
}

.rio360-precios__total[hidden] {
	display: none;
}

.rio360-precios__card.is-dark .rio360-precios__total {
	color: #b9b9c4;
}

@media ( max-width: 980px ) {

	.rio360-precios__plazo {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

}

/* ---------- Etiqueta de descuento ---------- */

.rio360-precios__descuento {
	position: absolute;
	top: 18px;
	right: 20px;
	background: #ffc637;
	color: #14141c;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 7px 11px;
	border-radius: 999px;
}

.rio360-precios__descuento[hidden] {
	display: none;
}

.rio360-precios__card.is-dark .rio360-precios__descuento {
	background: #ff5a5f;
	color: #fff;
}

/* ==================================================================
 * La "i" que explica un beneficio
 * ================================================================== */

/*
 * Discreta a propósito: es una ayuda, no una llamada a la acción. Si
 * pesara como los botones de contratar, la lista se leería como trece
 * cosas para pulsar.
 */
.rio360-precios__ayuda {
	align-items: center;
	background: none;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	color: #9a9aa6;
	cursor: pointer;
	display: inline-flex;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	height: 17px;
	justify-content: center;
	line-height: 1;
	margin-left: 6px;
	padding: 0;
	transition: color 0.15s ease, background 0.15s ease;

	/*
	 * Alineada con el texto, no colgando de él.
	 *
	 * Iba con `vertical-align: -2px` y quedaba visiblemente más abajo
	 * que la línea: el ojo la leía como un pie de nota. `middle` la
	 * centra contra el medio de la minúscula, que es donde el ojo
	 * espera encontrarla al lado de una palabra.
	 */
	vertical-align: middle;
	width: 17px;

	/*
	 * Y dos píxeles arriba: `middle` la deja centrada contra el medio
	 * de la minúscula, y medido contra la línea completa quedaba dos
	 * píxeles por debajo. Con esto centro de icono y centro de línea
	 * coinciden.
	 */
	position: relative;
	top: -2px;
}

/*
 * La última palabra y la "i", juntas y sin partirse.
 *
 * Cuando el beneficio ocupaba justo la línea entera, el icono bajaba
 * solo a la siguiente y quedaba flotando debajo, sin nada al lado.
 * Ahora o bajan los dos o no baja ninguno.
 */
.rio360-precios__fin {
	white-space: nowrap;
}

.rio360-precios__ayuda:hover,
.rio360-precios__ayuda:focus-visible {
	background: #ffc637;
	border-color: #ffc637;
	color: #16130f;
}

.rio360-precios__card.is-dark .rio360-precios__ayuda {
	color: #b9b9c4;
}

/* ==================================================================
 * La ventana con la explicación
 * ================================================================== */

.rio360-ayuda {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 20px;
	position: fixed;

	/* Por encima de la barra fija y del menú flotante, que rondan 9000. */
	z-index: 100001;
}

.rio360-ayuda[hidden] {
	display: none;
}

.rio360-ayuda__fondo {
	background: rgba( 22, 19, 15, 0.6 );
	inset: 0;
	position: absolute;
}

.rio360-ayuda__caja {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba( 22, 19, 15, 0.3 );
	max-height: calc( 100vh - 40px );

	/*
	 * `svh` no cambia cuando el navegador del celular esconde su barra;
	 * con `vh` a secas la ventana se pasaba de largo al abrirla.
	 */
	max-height: calc( 100svh - 40px );
	overflow-y: auto;
	padding: 26px 24px 24px;
	position: relative;
	width: min( 460px, 100% );
}

.rio360-ayuda__cerrar {
	background: #f4f1ea;
	border: 0;
	border-radius: 50%;
	color: #16130f;
	cursor: pointer;
	font-size: 22px;
	height: 32px;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 32px;
}

/*
 * Selector doblado y con !important, como en el resto del sitio: las
 * reglas del tema para h3 y p viven en un <style> dentro de la página,
 * o sea después de esta hoja, y a igualdad de peso gana la última. Sin
 * esto el título salía a 26px y el texto con el interlineado del
 * cuerpo de Divi.
 */
.rio360-ayuda .rio360-ayuda__titulo {
	color: #16130f !important;
	font-size: 1.25rem !important;
	font-weight: 700;
	line-height: 1.25 !important;
	margin: 0 30px 12px 0 !important;
	padding: 0 !important;
}

.rio360-ayuda .rio360-ayuda__texto p {
	color: #4a453f !important;
	font-size: 0.9375rem !important;
	line-height: 1.55 !important;
	margin: 0 0 10px !important;
}

.rio360-ayuda .rio360-ayuda__texto p:last-child {
	margin-bottom: 0 !important;
}

/* Las opciones del "eliges una" se sangran, como una lista. */
.rio360-ayuda .rio360-ayuda__texto .rio360-ayuda__opcion {
	border-left: 3px solid #ffc637;
	padding-left: 12px !important;
}

/* Con la ventana abierta el fondo no se mueve. */
body.rio360-ayuda-abierta {
	overflow: hidden;
}

/* ==================================================================
 * La fila de planes con domicilios
 * ================================================================== */

/*
 * Separada de la de arriba con aire y una línea: no es "más de lo
 * mismo un poco más caro", es otra decisión. Quien solo quiere que lo
 * encuentren no debería tener que leerla.
 */
/*
 * La sección donde vive la tabla tiene fondo coral, y este encabezado
 * salía en tinta oscura sobre él: se leía a duras penas y desentonaba
 * con las tarjetas.
 *
 * Va en blanco, con la misma Fredoka de los títulos del sitio. Si algún
 * día esa sección cambia a fondo claro, es esta regla la que hay que
 * tocar y ninguna otra.
 */
.rio360-precios__ya {
	border-top: 1px solid rgba( 255, 255, 255, 0.28 );
	margin-top: 56px;
	padding-top: 40px;
}

.rio360-precios .rio360-precios__ya-titulo,
.rio360-precios__ya .rio360-precios__ya-titulo {
	color: #fff !important;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif !important;
	font-size: 1.75rem !important;

	/*
	 * Peso 500, igual que el nombre de cada plan: Fredoka en 800 se
	 * empasta y deja de leerse como la misma familia del sitio.
	 */
	font-weight: 500 !important;
	letter-spacing: -0.01em;
	line-height: 1.2 !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	text-align: center;
}

/*
 * "Rio360Ya" en amarillo dentro del título: es el nombre de la marca,
 * y así el ojo lo separa de "Con domicilios", que es la explicación.
 */
.rio360-precios__ya .rio360-precios__ya-marca {
	color: #ffc637 !important;
}

.rio360-precios__ya .rio360-precios__ya-texto {
	color: rgba( 255, 255, 255, 0.92 ) !important;
	font-family: 'Nunito', 'Outfit', sans-serif !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
	margin: 0 auto 32px !important;
	max-width: 640px;
	text-align: center;
}

/*
 * Dos tarjetas, no tres: se centran en vez de estirarse a lo ancho.
 * Estiradas quedan enormes al lado de las de arriba y parecen otra
 * página.
 */
/*
 * Dos columnas, no tres.
 *
 * La rejilla de arriba está fijada en tres, y con dos tarjetas dejaba
 * una columna vacía a la derecha: quedaban angostas y altas, como si
 * faltara un plan por cargar.
 */
.rio360-precios--ya {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	margin: 0 auto;
	max-width: 780px;
}

@media ( max-width: 860px ) {

	.rio360-precios--ya {
		grid-template-columns: 1fr;
		max-width: 460px;
	}
}

/*
 * La fila de domicilios pedida por su cuenta.
 *
 * Su raya y su aire de arriba existen para separarla de los planes de
 * la vitrina; sola, esa raya queda colgando al principio del bloque.
 */
.rio360-precios__ya.is-sola {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}