/*
 * Planes y precios (/precios/). Se carga después de landing.css y de secundaria.css: usa los tokens --ld-* del bloque
 * .agdt-landing y sus piezas (el titular, el botón, los pasos, las preguntas y el cierre). Acá sólo va lo propio: la
 * portada sin teléfono, los planes como boletos y la lista de lo que incluyen. Ningún color, radio ni tamaño de letra a mano.
 */

/* Un monto va entero en su renglón (el signo no queda en uno y el número en el otro). */
.pc-junto {
	white-space: nowrap;
}

/* La portada va sola y centrada: en esta página no hay teléfono («el mockup ya lo tenemos por todas partes»). */
.pc-portada {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	padding-block: 28px 56px;
	text-align: center;
}

.pc-portada .ld-portada-texto {
	display: grid;
	justify-items: center;
	text-align: center;
}

.pc-portada .ld-titular {
	max-width: 12em;
	text-wrap: balance;
}

.pc-portada .ld-acciones {
	justify-items: center;
}

/* ---------- Los planes: una lista de boletos ---------- */

.pc-planes {
	padding-bottom: var(--ld-seccion);
}

.pc-boletos {
	display: grid;
	gap: 22px;
	max-width: 1040px;
	margin: 40px auto 0;
	padding: 0;
	list-style: none;
}

.pc-boleto {
	position: relative;
	display: grid;
	/* (Las muescas se recortan al borde del boleto, como en el cierre: sueltas, se veían como dos puntos claros sobre la sombra del boleto de al lado.) */
	overflow: hidden;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	color: var(--ld-gris);
}

.pc-boleto-cuerpo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	padding: 22px 24px;
}

/* La hoja del boleto: cuántos profesionales entran. Es lo que decide el precio, así que es lo más grande del boleto
   (la misma hoja del día que lleva el ticket del formulario). */
.pc-hoja {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 1px;
	width: 108px;
	min-height: 104px;
	padding: 10px 4px 12px;
	border-radius: var(--ld-r-dia);
	background: var(--ld-suelo);
	color: var(--ld-gris);
	font-size: var(--ld-letra-mini);
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
}

.pc-hoja small {
	font-size: inherit;
}

.pc-hoja b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	/* (Un punto más que el precio: es lo primero que se tiene que leer del boleto.) */
	font-size: calc(var(--ld-letra-seccion) * 1.2);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.pc-boleto-nombre h3 {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-cifra);
	font-weight: 600;
	line-height: 1.2;
}

.pc-boleto-nombre p {
	max-width: 30em;
	margin-top: 4px;
	font-size: var(--ld-letra-pieza);
	line-height: 1.45;
}

/* «El de tu prueba»: la marca del boleto destacado. */
.pc-boleto-nombre .pc-boleto-marca {
	display: inline-flex;
	margin: 0 0 12px;
	padding: 4px 12px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-azul);
	color: var(--ld-papel);
	font-size: var(--ld-letra-mini);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

/* El talón: tras la línea de puntos y las dos muescas del ticket, el precio y su botón. */
.pc-talon {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 16px;
	padding: 20px 24px 24px;
	border-top: 2px dashed var(--ld-linea);
}

.pc-talon::before,
.pc-talon::after {
	content: '';
	position: absolute;
	top: -11px;
	width: 20px;
	height: 20px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-suelo);
}

.pc-talon::before {
	left: -10px;
}

.pc-talon::after {
	right: -10px;
}

/* En el teléfono, el precio en un renglón («$ 990 por mes») y debajo el botón, a todo el ancho: igual en todos los boletos. */
.pc-precio {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	font-size: var(--ld-letra-pieza);
	line-height: 1.3;
}

.pc-precio b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-seccion);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.pc-talon .ld-boton {
	flex: 1 1 100%;
	padding-inline: 20px;
}

/* El boleto del plan con el que se prueba: en tinta, como el ticket del formulario. */
.pc-boleto.is-destacado {
	background: var(--ld-tinta);
	box-shadow: var(--ld-sombra-flota);
	color: var(--ld-nube);
}

.pc-boleto.is-destacado h3,
.pc-boleto.is-destacado .pc-precio b {
	color: var(--ld-papel);
}

/* (Como en el ticket: la hoja blanca sobre la tinta.) */
.pc-boleto.is-destacado .pc-hoja {
	background: var(--ld-papel);
}

.pc-boleto.is-destacado .pc-talon {
	border-color: var(--ld-tinta-linea);
}

/* El plan Gratis: no se elige, se llega. Sin relieve y sin botón. */
.pc-boleto-gratis {
	background: none;
	box-shadow: none;
	outline: 1.5px dashed var(--ld-linea);
	outline-offset: -1.5px;
}

.pc-boleto-gratis .pc-talon::before,
.pc-boleto-gratis .pc-talon::after {
	content: none;
}

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

.pc-boleto-gratis .pc-precio b {
	color: var(--ld-gris);
}

/* Lo que queda por decir de los planes: en una línea cada cosa. */
.pc-nota {
	display: grid;
	justify-items: center;
	gap: 4px;
	max-width: 1040px;
	margin: 24px auto 0;
	color: var(--ld-gris);
	font-size: var(--ld-letra-pieza);
	line-height: 1.5;
	text-align: center;
}

.pc-nota a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ld-toque);
	color: var(--ld-azul-tinta);
	font-weight: 500;
	text-decoration: none;
}

.pc-nota a:hover {
	text-decoration: underline;
}

.pc-nota a:focus-visible {
	outline: 2px solid var(--ld-azul);
	outline-offset: 2px;
}

/* ---------- Lo que incluyen todos: una lista con tildes ---------- */

.pc-incluido {
	padding-bottom: var(--ld-seccion);
}

/* (Hasta el escritorio va angosta, como una lista: cada punto entra en su renglón.) */
.pc-incluye {
	display: grid;
	gap: 28px 40px;
	max-width: 640px;
	margin: 40px auto 0;
	padding: 28px 24px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.pc-incluye ul {
	display: grid;
	gap: 12px 28px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.pc-incluye li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--ld-tinta);
	font-size: var(--ld-letra-pieza);
	line-height: 1.5;
}

.pc-incluye li > span {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul-suave);
	color: var(--ld-azul-tinta);
	flex: none;
}

/* ---------- Desde la tableta: el boleto en un renglón, con el talón a la derecha ---------- */

@media (min-width: 768px) {
	.pc-boleto {
		grid-template-columns: minmax(0, 1fr) 392px;
	}

	.pc-boleto-cuerpo {
		align-content: center;
		padding: 26px 28px;
	}

	/* El precio a la izquierda y el botón en su columna: así los botones de todos los boletos caen en la misma línea. */
	.pc-talon {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 176px;
		padding: 22px 28px;
		border-top: 0;
		border-left: 2px dashed var(--ld-linea);
	}

	/* Las muescas pasan arriba y abajo de la línea de puntos. */
	.pc-talon::before,
	.pc-talon::after {
		left: -11px;
		right: auto;
	}

	.pc-talon::before {
		top: -10px;
	}

	.pc-talon::after {
		top: auto;
		bottom: -10px;
	}

	/* Con lugar, «por mes» va debajo del precio. */
	.pc-precio {
		display: grid;
		gap: 2px;
		width: auto;
		font-size: var(--ld-letra-nota);
	}

	.pc-incluye {
		padding: 36px 40px;
	}
}

/* ---------- Escritorio: los tres grupos de la lista, lado a lado y a todo el ancho ---------- */

@media (min-width: 1200px) {
	.pc-incluye {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: none;
	}
}