/*
 * «Recomendá y ganá» (/recomienda/). Se carga después de landing.css, secundaria.css y precios.css: usa los tokens
 * --ld-* del bloque .agdt-landing, las piezas de las landings y, de precios, la portada centrada, los boletos y la lista
 * con tildes. Acá sólo va lo propio: la ganancia en el talón, el panel del afiliado de ejemplo y los rubros. Ningún
 * color, radio ni tamaño de letra a mano.
 */

.rc-portada .ld-titular {
	max-width: 13em;
}

/* Los dos botones: en el teléfono, uno bajo el otro y del mismo ancho; con lugar, lado a lado y centrados. */
.rc-portada .ld-acciones {
	justify-items: stretch;
	width: 100%;
}

@media (min-width: 600px) {
	.rc-portada .ld-acciones {
		justify-content: center;
		width: auto;
	}
}

/* ---------- Lo que se gana por cada plan: el boleto, con la ganancia en el talón ---------- */

.rc-boleto .pc-boleto-cuerpo {
	grid-template-columns: minmax(0, 1fr);
}

/* (El talón de precios reserva una columna para el botón; acá no hay botón: la ganancia usa todo el talón.) */
.rc-boleto .pc-talon {
	grid-template-columns: minmax(0, 1fr);
}

/* «Ganás», el monto y, si corresponde, lo que sería con el pago del año. La plata que entra va en el verde de «Confirmada». */
.pc-precio.rc-gana {
	display: grid;
	gap: 2px;
	width: auto;
	font-size: var(--ld-letra-nota);
}

.rc-gana b {
	color: var(--ld-ok);
}

.rc-gana small {
	font-size: inherit;
}

/* ---------- El panel del afiliado, de ejemplo (con los valores del panel: su verde azulado y sus grises) ---------- */

.rc-panel {
	position: relative;
	display: grid;
	gap: 18px;
	width: 100%;
	max-width: 480px;
	padding: 24px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra-flota);
	color: var(--ld-pl-sub);
	font-size: var(--ld-letra-nota);
	line-height: 1.4;
}

.rc-panel-titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rc-panel-titulo b {
	color: var(--ld-pl-text);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-subtitulo);
	font-weight: 600;
}

.rc-panel-titulo span {
	padding: 3px 10px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-pl-accent-weak);
	color: var(--ld-pl-accent-ink);
	font-size: var(--ld-letra-mini);
	font-weight: 500;
	white-space: nowrap;
}

.rc-enlace {
	display: grid;
	gap: 6px;
}

.rc-enlace small,
.rc-cifras small {
	font-size: inherit;
}

.rc-enlace > span {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 14px;
	border: 1px solid var(--ld-pl-border);
	border-radius: var(--ld-pl-r-item);
}

.rc-enlace b {
	flex: 1;
	min-width: 0;
	color: var(--ld-pl-ink-2);
	font-weight: 500;
	overflow-wrap: anywhere;
}

.rc-enlace i {
	padding: 7px 14px;
	border-radius: var(--ld-pl-r-item);
	background: var(--ld-pl-accent);
	color: var(--ld-papel);
	font-style: normal;
	font-weight: 500;
	white-space: nowrap;
}

.rc-cifras {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rc-cifras li {
	display: grid;
	align-content: space-between;
	gap: 4px;
	padding: 14px 16px;
	border-radius: var(--ld-pl-r-item);
	background: var(--ld-pl-soft);
}

.rc-cifras b {
	color: var(--ld-pl-text);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-cifra);
	font-weight: 600;
	line-height: 1.15;
}

/* La que importa: lo ganado. */
.rc-cifras li:last-child b {
	color: var(--ld-pl-accent-ink);
}

/* ---------- A quién recomendársela: los rubros ---------- */

/* (En grilla y no sueltos: así no queda un rubro solo en el último renglón. Son doce: entran de a dos, tres o cuatro.) */
.rc-rubros {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	max-width: 760px;
	margin: 36px auto 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.rc-rubros {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.rc-rubros {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.rc-rubros li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: 10px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-suelo);
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Las reglas: la lista con tildes, siempre en una columna ---------- */

.pc-incluye.rc-reglas {
	grid-template-columns: minmax(0, 1fr);
	max-width: 640px;
}

.rc-preguntas {
	padding-top: 0;
}

/* ---------- La calculadora: cuántos negocios y en qué plan → cuánto deja. Un boleto en tinta ---------- */

.rc-calc-seccion {
	padding-bottom: var(--ld-seccion);
}

.rc-calc {
	max-width: 1040px;
	margin-inline: auto;
}

.rc-calc .pc-boleto-cuerpo,
.rc-calc .pc-talon {
	grid-template-columns: minmax(0, 1fr);
}

.rc-calc .pc-boleto-cuerpo {
	align-items: start;
	gap: 14px;
}

/* El resultado y lo que suma en un año, juntos y al medio del talón. */
.rc-calc .pc-talon {
	align-content: center;
	gap: 10px;
}

.rc-calc-titulo {
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-cifra);
	font-weight: 600;
	line-height: 1.2;
}

.rc-calc-supone,
.rc-calc-estatico {
	font-size: var(--ld-letra-pieza);
	line-height: 1.45;
}

/* Una barra por plan: cuántos negocios en cada uno. */
.rc-calc-controles {
	display: grid;
	gap: 14px 32px;
	margin-top: 4px;
}

/* (El rótulo ocupa lo que sobre y la barra queda abajo: así, de a dos, las barras de un renglón caen a la misma altura.) */
.rc-calc-plan {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 2px;
	min-width: 0;
}

.rc-calc-rotulo {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.rc-calc-rotulo label {
	display: grid;
	gap: 1px;
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
	line-height: 1.3;
}

.rc-calc-rotulo label small {
	color: var(--ld-nube);
	font-family: var(--ld-familia);
	font-size: var(--ld-letra-nota);
	font-weight: 400;
}

.rc-calc-rotulo output {
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-cifra);
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
}

/* La barra: del alto de lo que se toca, con el azul de la marca. */
.rc-calc input[type="range"] {
	width: 100%;
	height: var(--ld-toque);
	margin: 0;
	accent-color: var(--ld-azul);
	cursor: pointer;
}

.rc-calc input[type="range"]:focus-visible {
	outline: 2px solid var(--ld-papel);
	outline-offset: 2px;
}

/* El resultado: lo que se gana, lo más grande de la página después del titular. */
.pc-precio.rc-calc-total {
	display: grid;
	gap: 2px;
	width: auto;
	font-size: var(--ld-letra-pieza);
}

.rc-calc-total b {
	font-size: calc(var(--ld-letra-seccion) * 1.2);
}

.rc-calc-total small {
	font-size: inherit;
}

.rc-calc-suma {
	width: 100%;
	font-size: var(--ld-letra-pieza);
	line-height: 1.4;
}

.rc-calc-suma b {
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-weight: 600;
}

.rc-calc-cuantos {
	width: 100%;
	font-size: var(--ld-letra-nota);
}

/* Con lugar, las barras de a dos (en tableta el cuerpo del boleto es angosto: siguen una bajo la otra). */
@media (min-width: 1100px) {
	.rc-calc-controles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}