/**
 * Vitrina de promociones.
 *
 * Tarjeta partida en dos: bloque de color con el gancho a la izquierda
 * y los datos sobre blanco a la derecha. El color hace el trabajo de
 * llamar la atención; el texto, el de explicar.
 */

/*
 * Hereda la tipografía del tema (Nunito). Antes pedía Outfit, que este
 * sitio no carga: caía a la del sistema y desentonaba con todo.
 */
.rio360-promos {
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
}

/*
 * Tinta explícita, aunque parezca de más: el color del contenedor se
 * hereda, y la herencia pierde contra la regla `h2 { color: ... }` del
 * tema, que en algunas secciones resuelve a blanco. Es lo que dejó
 * invisible el título del panel de cuentas.
 */
.rio360-promos .rio360-promos__title {
	color: #16130f;
	font-family: 'Fredoka', 'Outfit', 'Nunito', sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
}

/*
 * `grid-auto-rows: 1fr` iguala TODAS las tarjetas, no solo las de una
 * misma fila. Una promoción con dos líneas de texto al lado de otra
 * con cinco hacía una rejilla escalonada que se leía como un error de
 * maquetación.
 */
/*
 * `align-content: start` no es decorativo: con filas en 1fr, si el
 * contenedor tiene más alto del que pide el contenido —y en Divi lo
 * tiene, porque la fila se estira—, ese sobrante se reparte entre las
 * filas y las tarjetas crecen sin motivo. Con esto se quedan del alto
 * que pide su contenido.
 */
.rio360-promos__grid {
	align-content: start;
	display: grid;
	gap: 14px;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) );
}

.rio360-promo {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba( 22, 19, 15, 0.05 ), 0 14px 34px rgba( 22, 19, 15, 0.07 );
	display: grid;
	grid-template-columns: 88px 1fr;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rio360-promo:hover {
	box-shadow: 0 4px 12px rgba( 22, 19, 15, 0.07 ), 0 20px 44px rgba( 22, 19, 15, 0.1 );
	transform: translateY( -3px );
}

/* ------------------------------------------------------------------ */
/* Bloque del gancho                                                   */
/* ------------------------------------------------------------------ */

.rio360-promo__hook {
	align-items: center;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	padding: 14px 10px;
	text-align: center;
}

.rio360-promo__value {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

/*
 * Interlineado explícito, y no es un capricho: estas dos líneas son
 * las que decidían el alto de la tarjeta. Sin declararlo heredaban el
 * del contexto, que en la página de promociones es más suelto que en
 * el panel, y la misma tarjeta salía 17 px más alta en una pantalla
 * que en la otra. Medido en las dos.
 */
.rio360-promo__caption {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	opacity: 0.85;
}

/* Precio anterior tachado: el contraste cuenta la historia sin texto. */
.rio360-promo__before {
	font-size: 0.8125rem;
	font-weight: 600;
	opacity: 0.85;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.rio360-promo__after {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

/* ------------------------------------------------------------------ */
/* Colores del bloque                                                  */
/* ------------------------------------------------------------------ */

.rio360-promo--coral .rio360-promo__hook {
	background: #ff4d5a;
}

.rio360-promo--purple .rio360-promo__hook {
	background: #7c26cf;
}

.rio360-promo--green .rio360-promo__hook {
	background: #00a06a;
}

.rio360-promo--blue .rio360-promo__hook {
	background: #3247e0;
}

.rio360-promo--dark .rio360-promo__hook {
	background: #1b1917;
}

/* El amarillo con texto blanco no se lee: aquí la tinta es oscura. */
.rio360-promo--yellow .rio360-promo__hook {
	background: #ffc637;
	color: #16130f;
}

/* ------------------------------------------------------------------ */
/* Cuerpo de la tarjeta                                                */
/* ------------------------------------------------------------------ */

.rio360-promo__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	padding: 11px 14px;
}

/*
 * El selector va doblado a propósito.
 *
 * El nombre del negocio es un enlace, y el tema pinta los enlaces del
 * contenido con `.et_pb_text a { color: var(--color-text) }`. Esa
 * regla tiene más peso que una clase suelta, y en la sección de
 * promociones esa variable resuelve a blanco: el nombre estaba en el
 * HTML, ocupando su sitio, pero blanco sobre blanco. Medido en
 * producción antes de tocar nada.
 *
 * Con la clase repetida ya gana por especificidad; el !important es
 * por si mañana esa variable cambia de sitio.
 */
/*
 * Apretado a una línea justa. Es lo único que la vitrina lleva de más
 * respecto al panel, y de ahí salía la diferencia de alto entre las
 * dos pantallas.
 */
.rio360-promo .rio360-promo__place {
	color: #6b6560 !important;
	display: block;
	font-size: 0.625rem;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.rio360-promo .rio360-promo__place:hover {
	color: #16130f !important;
}

/*
 * Dos líneas y punto: el título es un gancho, no un párrafo.
 *
 * El tamaño va con !important, y no por vicio. El sitio declara
 * `h3, .h3 { font-size: var(--fs-h3) !important }` y
 * `p, li { font-size: var(--fs-body) !important }`, así que sin
 * !important esta regla no compite por mucho que se doble el
 * selector: en producción el título salía a 26 px y la descripción a
 * 16, casi el doble de lo pedido, y la tarjeta crecía con ellos.
 * Doblado sí gana, porque a igualdad de !important manda la
 * especificidad. Medido en el sitio, no supuesto.
 *
 * El relleno también: el tema le pone diez píxeles abajo a los h3.
 */
.rio360-promo .rio360-promo__name {
	color: #16130f;
	padding: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 0.9375rem !important;
	font-weight: 700;
	line-height: 1.25 !important;
	margin: 0;
}

/*
 * La descripción ya no sale en la rejilla: vive dentro de la ventana.
 * Aquí se estila para cuando se abre.
 */
.rio360-promo .rio360-promo__desc {
	color: #6b6560;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
	margin: 0;
}

/* El código va en monoespaciada: se lee para copiarlo, no para leerlo. */
.rio360-promo__code {
	align-self: flex-start;
	background: #fdf8f0;
	border: 1px solid #ece5d9;
	border-radius: 8px;
	font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	margin-top: 4px;
	padding: 4px 10px;
}

/*
 * Va dentro del bloque de color, bajo el gancho, así que hereda su
 * tinta: blanca sobre los colores oscuros y oscura sobre el amarillo,
 * sin una regla por color.
 */
.rio360-promo__ends {
	font-size: 0.625rem;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin-top: 8px;
	opacity: 0.75;
}

@media ( prefers-reduced-motion: reduce ) {

	.rio360-promo:hover {
		transform: none;
	}
}

@media ( max-width: 420px ) {

	.rio360-promo {
		grid-template-columns: 96px 1fr;
	}

	.rio360-promo__value {
		font-size: 1.75rem;
	}

	.rio360-promo__body {
		padding: 12px 14px;
	}
}

/* ------------------------------------------------------------------ */
/* La tarjeta que se abre                                              */
/* ------------------------------------------------------------------ */

/*
 * Que se note que se puede pulsar. Sin esto la tarjeta es idéntica a la
 * del panel, que no hace nada, y nadie descubre que hay más detrás.
 */
.rio360-promo--abrible {
	cursor: pointer;
}

/* El foco del teclado tiene que verse tanto como el ratón. */
.rio360-promo--abrible:focus-visible {
	outline: 3px solid #3247e0;
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Ventana con el detalle                                              */
/* ------------------------------------------------------------------ */

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

	/*
	 * Por encima de la barra fija del sitio y del menú flotante, que
	 * andan por 9000. Si no, la promoción se abre debajo de ellos.
	 */
	z-index: 2147483200;
}

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

.rio360-promo-ventana__fondo {
	background: rgba( 22, 19, 15, 0.55 );
	inset: 0;
	position: absolute;
}

.rio360-promo-ventana__caja {
	max-height: calc( 100vh - 40px );

	/*
	 * `svh` es la altura de la pantalla sin contar la barra del
	 * navegador móvil, y no cambia cuando esa barra se esconde. Con
	 * `vh` a secas la ventana se pasaba de largo justo al abrirla.
	 */
	max-height: calc( 100svh - 40px );
	overflow-y: auto;
	position: relative;
	width: min( 420px, 100% );
}

.rio360-promo-ventana__cerrar {
	background: #fff;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba( 22, 19, 15, 0.2 );
	color: #16130f;
	cursor: pointer;
	font-size: 22px;
	height: 34px;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 34px;
	z-index: 2;
}

/*
 * Dentro de la ventana la tarjeta deja de ser una fila apretada de
 * rejilla: el gancho pasa arriba, a lo ancho, y el texto debajo con
 * sitio para respirar.
 */
.rio360-promo-ventana .rio360-promo--detalle {
	grid-template-columns: 1fr;
	transform: none;
}

.rio360-promo-ventana .rio360-promo--detalle .rio360-promo__hook {
	padding: 26px 18px;
}

.rio360-promo-ventana .rio360-promo--detalle .rio360-promo__value {
	font-size: 2.5rem;
}

.rio360-promo-ventana .rio360-promo--detalle .rio360-promo__after {
	font-size: 2rem;
}

.rio360-promo-ventana .rio360-promo--detalle .rio360-promo__before {
	font-size: 1rem;
}

.rio360-promo-ventana .rio360-promo--detalle .rio360-promo__body {
	gap: 6px;
	padding: 18px;
}

/*
 * Aquí el nombre se lee entero. El recorte a dos líneas es para que la
 * rejilla quede pareja; en la ventana solo escondería lo que la persona
 * vino a leer.
 */
.rio360-promo-ventana .rio360-promo--detalle .rio360-promo__name {
	-webkit-line-clamp: unset;
	display: block;
	font-size: 1.25rem !important;
	overflow: visible;
}

.rio360-promo__detalle {
	border-top: 1px solid #f0eae0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 18px 18px;
}

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

.rio360-promo .rio360-promo__ir {
	background: #16130f;
	border-radius: 999px;
	color: #fff !important;
	font-size: 0.875rem;
	font-weight: 700;
	padding: 10px 18px;
	text-align: center;
	text-decoration: none !important;
}

.rio360-promo .rio360-promo__ir:hover {
	background: #3247e0;
	color: #fff !important;
}

/*
 * Con la ventana abierta el fondo no se mueve. Sin esto, arrastrar
 * dentro de la ventana en un teléfono acaba haciendo scroll de la
 * página de detrás y al cerrar uno aparece en otro sitio.
 */
body.rio360-promo-abierta {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Vitrina sin promociones                                             */
/* ------------------------------------------------------------------ */

/*
 * La vitrina general suele ser una página propia, y una página en
 * blanco parece un error del sitio. Mejor decir que no hay nada.
 */
.rio360-promos__empty {
	align-items: center;
	background: #fff;
	border: 1px dashed #ece5d9;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 48px 28px;
	text-align: center;
}

/*
 * En la página de un negocio el bloque ya va dentro de la caja del
 * maquetador: sin marco propio y más bajito, para que no quede una
 * caja dentro de otra.
 */
.rio360-promos__empty--negocio {
	background: none;
	border: 0;
	padding: 26px 18px;
}

.rio360-promos__empty-icon {
	font-size: 2rem;
	opacity: 0.55;
}

.rio360-promos__empty p {
	color: #6b6560;
	margin: 0;
	max-width: 460px;
}

/* ------------------------------------------------------------------ */
/* La tarjeta de un combo                                               */
/* ------------------------------------------------------------------ */

/* Con combos, cada fila mide lo suyo: si no, las promociones de texto se estiraban al alto del combo. */
.rio360-promos__grid:has( .rio360-combo-card:not( .is-compacta ) ) {
	align-items: start;
	grid-auto-rows: auto;
}

.rio360-combo-card {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 2px 8px rgba( 22, 19, 15, 0.05 ), 0 14px 34px rgba( 22, 19, 15, 0.07 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media ( hover: hover ) {
	.rio360-combo-card:hover {
		box-shadow: 0 4px 12px rgba( 22, 19, 15, 0.07 ), 0 20px 44px rgba( 22, 19, 15, 0.1 );
		transform: translateY( -3px );
	}
}

.rio360-combo-card__foto {
	aspect-ratio: 4 / 3;
	background: #f3efe7;
	display: block;
	position: relative;
}

.rio360-combo-card__foto img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	width: 100%;
}

.rio360-combo-card__ahorro {
	background: #ffc637;
	border-radius: 999px;
	bottom: 12px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.18 );
	color: #16130f;
	font-size: 0.8rem;
	font-weight: 800;
	left: 12px;
	padding: 6px 12px;
	position: absolute;
}

.rio360-combo-card__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
}

.rio360-combo-card__negocio {
	color: #8a847c;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.rio360-combo-card__nombre {
	color: #16130f;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
}

.rio360-combo-card__texto {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: #6b6560;
	display: -webkit-box;
	font-size: 0.9rem;
	line-height: 1.4;
	margin: 0;
	overflow: hidden;
}

.rio360-combo-card__pie {
	align-items: flex-end;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 8px;
}

.rio360-combo-card__precio {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	min-width: 0;
}

.rio360-combo-card__precio strong {
	color: #16130f;
	font-size: 1.3rem;
	font-weight: 800;
	white-space: nowrap;
}

.rio360-combo-card__precio del {
	color: #8a847c;
	font-size: 0.9rem;
	white-space: nowrap;
}

.rio360-combo-card__precio small {
	color: #8a847c;
	flex-basis: 100%;
	font-size: 0.78rem;
}

.rio360-combo-card__pedir {
	background: #ef4444;
	border-radius: 999px;
	color: #fff;
	flex: none;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 11px 18px;
	text-decoration: none;
	transition: transform 0.12s ease;
}

.rio360-combo-card__pedir:hover,
.rio360-combo-card__pedir:focus-visible {
	color: #fff;
}

.rio360-combo-card__pedir:active {
	transform: scale( 0.97 );
}

@media ( prefers-reduced-motion: reduce ) {
	.rio360-combo-card,
	.rio360-combo-card__pedir {
		transition: none;
	}
}

.rio360-combo-card__incluye {
	color: #6b6560;
	font-size: 0.85rem;
	line-height: 1.4;
	margin: 0;
}

/* ---- Compacta: la vitrina del home. Todas del mismo alto; el resto, en la ventana. ---- */

.rio360-promos__grid:has( .rio360-combo-card.is-compacta ) {
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
}

.rio360-combo-card.is-compacta {
	cursor: pointer;
	height: 100%;
}

.rio360-combo-card.is-compacta:focus-visible {
	outline: 3px solid #16130f;
	outline-offset: 3px;
}

.rio360-combo-card.is-compacta .rio360-combo-card__foto {
	aspect-ratio: 16 / 10;
}

.rio360-combo-card.is-compacta .rio360-combo-card__ahorro {
	bottom: 8px;
	font-size: 0.72rem;
	left: 8px;
	padding: 4px 10px;
}

.rio360-combo-card.is-compacta .rio360-combo-card__cuerpo {
	gap: 3px;
	padding: 10px 12px 12px;
}

.rio360-combo-card.is-compacta .rio360-combo-card__nombre {
	display: block;
	font-size: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rio360-combo-card.is-compacta .rio360-combo-card__precio {
	align-items: baseline;
	display: flex;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
}

.rio360-combo-card.is-compacta .rio360-combo-card__precio strong {
	font-size: 1.1rem;
}

.rio360-combo-card.is-compacta .rio360-combo-card__precio del {
	font-size: 0.82rem;
}

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

/* ---- La completa, dentro de la ventana ---- */

.rio360-promo-ventana.is-combo .rio360-promo-ventana__caja {
	width: min( 440px, 100% );
}

.rio360-promo-ventana.is-combo .rio360-combo-card {
	box-shadow: none;
	transform: none;
}

.rio360-promo-ventana.is-combo .rio360-combo-card__texto {
	-webkit-line-clamp: unset;
	display: block;
}

.rio360-promo-ventana.is-combo .rio360-combo-card__pedir {
	flex: 1;
	text-align: center;
}

/* En la ventana, el botón a lo ancho debajo del precio: con el nombre del negocio no cabe al lado. */
.rio360-promo-ventana.is-combo .rio360-combo-card__pie {
	align-items: stretch;
	flex-direction: column;
}

@media ( max-width: 600px ) {

	/* Dos por fila en el celular: es la vitrina, no la carta. */
	.rio360-promos__grid:has( .rio360-combo-card.is-compacta ) {
		gap: 10px;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.rio360-combo-card.is-compacta .rio360-combo-card__foto {
		aspect-ratio: 1;
	}

	.rio360-combo-card.is-compacta .rio360-combo-card__ahorro {
		bottom: 6px;
		font-size: 0.66rem;
		left: 6px;
		padding: 3px 8px;
	}

	.rio360-combo-card.is-compacta .rio360-combo-card__cuerpo {
		padding: 8px 10px 10px;
	}

	.rio360-combo-card.is-compacta .rio360-combo-card__negocio {
		font-size: 0.62rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rio360-combo-card.is-compacta .rio360-combo-card__nombre {
		font-size: 0.9rem;
	}

	.rio360-combo-card.is-compacta .rio360-combo-card__precio {
		flex-wrap: wrap;
		gap: 0 6px;
	}

	.rio360-combo-card.is-compacta .rio360-combo-card__precio strong {
		font-size: 1rem;
	}
}