/* ==========================================================================
   Mati Todo Envases — portada
   ========================================================================== */

.pc-portada {
	display: block;
}

.pc-seccion {
	padding-block: 64px;
}

/* La primera sección después del encabezado no lleva aire arriba: el hero ya
   trae el suyo. Va por posición y no por nombre porque cuál es la primera
   depende de si hay oferta publicada. */
.pc-hero + .pc-seccion {
	padding-top: 0;
}

.pc-seccion__encabezado {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.pc-seccion__titulo {
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	margin: 0 0 28px;
}

.pc-seccion__encabezado .pc-seccion__titulo {
	margin: 0;
}

.pc-seccion__enlace {
	font-family: var(--titulo);
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--azul);
}

.pc-seccion__enlace:hover {
	color: var(--azul-oscuro);
}

/* --------------------------------------------------------------------------
   Encabezado
   -------------------------------------------------------------------------- */

.pc-hero {
	position: relative;
	padding-block: 64px 72px;
	background:
		radial-gradient(900px 420px at 88% 12%, rgba(0, 174, 200, 0.16), transparent 70%),
		radial-gradient(760px 420px at 6% 96%, rgba(15, 82, 200, 0.12), transparent 70%);
}

.pc-hero__interior {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: center;
}

.pc-hero__etiqueta {
	display: inline-block;
	font-family: var(--titulo);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--azul);
	background: var(--blanco);
	border-radius: 999px;
	padding: 8px 16px;
	margin: 0 0 20px;
	box-shadow: 0 4px 14px rgba(15, 82, 200, 0.1);
}

.pc-hero__titulo {
	font-size: clamp(2.4rem, 5.4vw, 4.1rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	margin: 0 0 20px;
}

/* El subrayado de color es lo único festivo del titular: el resto del bloque
   se mantiene sobrio para que el dato siga mandando. La banda se posiciona en
   porcentaje de la caja de línea, así cae igual en las dos líneas cuando el
   titular se parte. */
.pc-hero__titulo mark {
	background-image: linear-gradient(
		transparent 62%,
		rgba(239, 192, 60, 0.6) 62%,
		rgba(239, 192, 60, 0.6) 94%,
		transparent 94%
	);
	color: inherit;
	padding-inline: 2px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.pc-hero__bajada {
	font-size: 1.08rem;
	color: var(--tinta-70);
	max-width: 52ch;
	margin: 0 0 30px;
}

.pc-hero__acciones {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 38px;
}

.pc-hero__datos {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 28px;
	justify-content: start;
	margin: 0;
	padding-top: 26px;
	border-top: 1px solid var(--linea);
}

.pc-hero__datos dt {
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tinta-50);
	margin-bottom: 5px;
}

.pc-hero__datos dd {
	margin: 0;
	font-family: var(--titulo);
	font-weight: 700;
	font-size: 1.02rem;
}

/* Mosaico: el muestrario en miniatura, una foto por categoría.
   Seis cuadrados iguales; cualquier combinación de celdas altas deja huecos. */
.pc-mosaico {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.pc-mosaico__pieza {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--placa, var(--azul-suave));
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pc-mosaico__pieza:hover {
	transform: translateY(-4px);
	box-shadow: var(--sombra-alta);
}

.pc-mosaico__pieza img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   Oferta

   Piezas anchas, foto a la izquierda y precio grande a la derecha. Van
   apaisadas y no en tarjeta vertical para que no compitan con la grilla de
   productos de más abajo: se leen como un aviso, no como catálogo.

   La franja se arma con las que haya publicadas (front-page.php), así que las
   columnas las cuenta el propio grid: con dos quedan dos anchas, con tres, tres
   más angostas. Bajo los 1080 px una tercera no cabría sin partir el nombre en
   cinco líneas, así que se apilan.
   -------------------------------------------------------------------------- */

.pc-ofertas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 18px;
}

@media (max-width: 1080px) {
	.pc-ofertas {
		grid-template-columns: 1fr;
	}
}

.pc-oferta {
	display: flex;
	align-items: stretch;
	gap: 20px;
	background: var(--blanco);
	border-radius: var(--radio);
	overflow: hidden;
	text-decoration: none;
	color: var(--tinta);
	box-shadow: 0 4px 14px rgba(20, 33, 61, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pc-oferta:hover {
	transform: translateY(-3px);
	box-shadow: var(--sombra);
	color: var(--tinta);
}

.pc-oferta__placa {
	flex: 0 0 168px;
	display: block;
	/* La misma placa que la tarjeta del catálogo: el fondo teñido de la foto y
	   el de la caja son el mismo color, así no se ve el corte. */
	background: var(--placa, var(--azul-suave));
}

/* «contain» y no «cover»: la caja es cuadrada mientras el cuerpo quepa en dos
   líneas, pero con un nombre más largo crece de alto y «cover» empezaría a
   comerle los costados al producto. Como la placa es exactamente el color del
   borde de la foto, la banda que sobra no se ve. */
.pc-oferta__placa img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pc-oferta__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	padding: 22px 22px 22px 0;
}

.pc-oferta__nombre {
	font-family: var(--titulo);
	font-size: 1.16rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.pc-oferta__ficha {
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tinta-50);
}

.pc-oferta__precio {
	margin-top: 6px;
	font-family: var(--titulo);
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--azul);
}

.pc-oferta__precio .woocommerce-Price-amount {
	font-size: inherit;
}

.pc-oferta__accion {
	margin-top: 10px;
	font-family: var(--titulo);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--azul);
}

.pc-oferta:hover .pc-oferta__accion {
	color: var(--azul-oscuro);
}

@media (max-width: 700px) {
	.pc-oferta__placa {
		flex-basis: 124px;
	}

	.pc-oferta__cuerpo {
		padding: 18px 18px 18px 0;
	}

	.pc-oferta__precio {
		font-size: 1.6rem;
	}
}

/* --------------------------------------------------------------------------
   Rubros
   -------------------------------------------------------------------------- */

.pc-rubros {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}

.pc-rubro {
	position: relative;
	display: block;
	padding: 24px 22px 26px;
	background: var(--blanco);
	border-radius: var(--radio);
	text-decoration: none;
	color: var(--tinta);
	box-shadow: 0 4px 14px rgba(20, 33, 61, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	overflow: hidden;
}

/* Cinta de color arriba: identifica el rubro sin necesidad de un icono. */
.pc-rubro::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--chip);
}

.pc-rubro:hover {
	transform: translateY(-3px);
	box-shadow: var(--sombra);
	color: var(--tinta);
}

.pc-rubro__nombre {
	display: block;
	font-family: var(--titulo);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 6px;
}

.pc-rubro__detalle {
	display: block;
	font-size: 0.86rem;
	color: var(--tinta-50);
	line-height: 1.45;
	max-width: 24ch;
}

.pc-rubro__flecha {
	position: absolute;
	top: 22px;
	right: 20px;
	font-size: 1rem;
	color: var(--tinta-50);
	transition: transform 0.15s ease, color 0.15s ease;
}

.pc-rubro:hover .pc-rubro__flecha {
	transform: translateX(3px);
	color: var(--chip);
}

/* --------------------------------------------------------------------------
   Categorías
   -------------------------------------------------------------------------- */

.pc-categorias {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.pc-categoria {
	position: relative;
	display: block;
	background: var(--blanco);
	border-radius: var(--radio);
	overflow: hidden;
	text-decoration: none;
	color: var(--tinta);
	box-shadow: 0 4px 14px rgba(20, 33, 61, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pc-categoria::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 7px;
	background: var(--chip);
}

.pc-categoria:hover {
	transform: translateY(-3px);
	box-shadow: var(--sombra);
	color: var(--tinta);
}

.pc-categoria__cuerpo {
	display: block;
	padding: 26px 24px 24px;
}

.pc-categoria__nombre {
	display: block;
	font-family: var(--titulo);
	font-size: 1.14rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.pc-categoria__resumen {
	display: block;
	font-size: 0.88rem;
	color: var(--tinta-70);
	line-height: 1.5;
	margin-bottom: 14px;
}

.pc-categoria__conteo {
	display: inline-block;
	font-family: var(--titulo);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--chip);
	background: color-mix(in srgb, var(--chip) 13%, white);
	border-radius: 999px;
	padding: 5px 12px;
}

/* --------------------------------------------------------------------------
   Razones
   -------------------------------------------------------------------------- */

.pc-seccion--razones {
	background: linear-gradient(135deg, var(--azul-oscuro), var(--azul) 55%, #0d74c8);
	color: rgba(255, 255, 255, 0.82);
	border-radius: var(--radio);
	margin-block: 24px;
}

.pc-seccion--razones .pc-seccion__titulo {
	color: #fff;
}

.pc-razones {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px;
}

.pc-razon h3 {
	font-size: 1.08rem;
	color: #fff;
	margin: 0 0 8px;
}

.pc-razon p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
}

.pc-razon__numero {
	display: block;
	font-family: var(--mono);
	font-size: 0.74rem;
	color: var(--amarillo);
	letter-spacing: 0.1em;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */

.pc-cierre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding: 40px 44px;
	background: var(--blanco);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
}

.pc-cierre h2 {
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	margin: 0 0 8px;
}

.pc-cierre p {
	margin: 0;
	color: var(--tinta-70);
	max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Adaptación a pantallas chicas
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.pc-hero__interior {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.pc-mosaico {
		grid-template-columns: repeat(6, 1fr);
	}

	.pc-rubros {
		grid-template-columns: repeat(3, 1fr);
	}

	.pc-categorias,
	.pc-razones {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.pc-hero {
		padding-block: 36px 44px;
	}

	.pc-seccion {
		padding-block: 44px;
	}

	.pc-hero__datos {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.pc-mosaico {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.pc-rubros,
	.pc-categorias,
	.pc-razones {
		grid-template-columns: 1fr;
	}

	.pc-cierre {
		padding: 28px 24px;
	}
}

/* --------------------------------------------------------------------------
   Dónde estamos

   El mismo bloque sirve en la portada y en /contacto. En la portada va sobre
   el papel azul del sitio y cierra la página; en /contacto lleva un margen
   arriba porque queda pegado al texto de la página.
   -------------------------------------------------------------------------- */

.pc-contacto {
	padding: 12px 0 72px;
}

.pc-contacto--pagina {
	padding-top: 40px;
}

.pc-contacto__interior {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0;
	background: var(--blanco);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	overflow: hidden;
}

.pc-contacto__lugar {
	padding: 40px 44px;
	display: flex;
	flex-direction: column;
}

/* La columna de canales se separa con el azul suave de marca: son dos cosas
   distintas —dónde queda y cómo escribir— y conviene que se lean aparte. */
.pc-contacto__canales {
	padding: 40px 44px;
	background: var(--azul-papel);
	border-left: 1px solid var(--linea-suave);
	display: flex;
	flex-direction: column;
	/* Centrada contra la columna del plano, que es más alta: pegar el grupo
	   arriba dejaba un hueco de un tercio de la tarjeta bajo el botón. */
	justify-content: center;
	gap: 22px;
}

.pc-contacto__titulo {
	font-family: var(--titulo);
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	margin: 0 0 20px;
}

/* El plano es decorativo y clicable: lleva al mismo Google Maps que el botón,
   para quien intenta pinchar el mapa antes de leer el botón. */
.pc-contacto__plano {
	display: block;
	margin: 0 0 24px;
	border-radius: var(--radio-chico);
	overflow: hidden;
	max-width: 400px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pc-contacto__plano img {
	display: block;
	width: 100%;
	height: auto;
}

.pc-contacto__plano:hover {
	transform: translateY(-2px);
	box-shadow: var(--sombra);
}

.pc-contacto__direccion {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 1.02rem;
	line-height: 1.5;
}

.pc-contacto__direccion strong {
	font-size: 1.12rem;
}

.pc-contacto__icono {
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--azul-suave);
	color: var(--azul);
}

.pc-contacto__icono svg {
	width: 20px;
	height: 20px;
}

.pc-contacto__mapa {
	/* La columna es flex, y sin esto el botón se estira de lado a lado. */
	align-self: flex-start;
	border: 1px solid var(--linea);
}

.pc-contacto__nota {
	/* Pegada al pie de su columna: así las dos mitades cierran a la misma
	   altura en vez de dejar un hueco bajo la dirección. */
	margin: auto 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--linea-suave);
	color: var(--tinta-70);
	font-size: 0.9rem;
	max-width: 46ch;
}

.pc-contacto__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.pc-contacto__etiqueta {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--tinta-50);
	margin-bottom: 2px;
}

.pc-contacto__valor {
	font-family: var(--mono);
	font-size: 1rem;
	color: var(--tinta);
	text-decoration: none;
	border-bottom: 1px solid var(--linea);
}

.pc-contacto__valor:hover {
	color: var(--azul);
	border-bottom-color: var(--azul);
}

.pc-contacto__horario dl {
	margin: 6px 0 0;
	display: grid;
	gap: 4px;
}

.pc-contacto__horario div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 0.92rem;
	padding: 3px 0;
	border-bottom: 1px dashed var(--linea-suave);
}

.pc-contacto__horario div:last-child {
	border-bottom: 0;
}

.pc-contacto__horario dt {
	color: var(--tinta-70);
	margin: 0;
	font-weight: 500;
}

.pc-contacto__horario dd {
	margin: 0;
	font-family: var(--mono);
	font-weight: 500;
}

.pc-contacto__cta {
	margin-top: 4px;
	justify-content: center;
	text-align: center;
}

/* Segundo CTA, en el azul de marca: destaca contra el papel de la columna sin
   pelearle el turno al verde de WhatsApp, que sigue siendo la acción primera. */
.pc-contacto__pagos {
	justify-content: center;
	gap: 10px;
	text-align: center;
}

.pc-contacto__pagos svg {
	width: 20px;
	height: 20px;
	flex: none;
}

@media (max-width: 900px) {
	.pc-contacto__interior {
		grid-template-columns: 1fr;
	}

	.pc-contacto__lugar,
	.pc-contacto__canales {
		padding: 28px 24px;
	}

	.pc-contacto__canales {
		border-left: 0;
		border-top: 1px solid var(--linea-suave);
	}

	/* Con la burbuja flotante encima, el último bloque necesita aire. */
	.pc-contacto {
		padding-bottom: 96px;
	}
}

/* --------------------------------------------------------------------------
   Métodos de pago

   Antes era una lista de viñetas dentro del contenido de la página: las dos
   cuentas se veían iguales y había que leerlas enteras para distinguirlas.
   Acá cada una es una tarjeta con el color de su institución.
   -------------------------------------------------------------------------- */

.pc-pagos {
	padding: 8px 0 72px;
}

/* Índice de los tres métodos, arriba de todo: se ve de una qué opciones hay
   sin tener que recorrer la página. */
.pc-pagos__opciones {
	list-style: none;
	margin: 0 0 44px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.pc-pagos__opciones a {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 18px 20px;
	background: var(--blanco);
	border: 1px solid var(--linea-suave);
	border-radius: var(--radio-chico);
	text-decoration: none;
	color: var(--tinta);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pc-pagos__opciones a:hover {
	transform: translateY(-2px);
	border-color: var(--azul);
	box-shadow: var(--sombra);
}

.pc-pagos__opciones strong {
	display: block;
	font-size: 0.98rem;
	line-height: 1.3;
}

.pc-pagos__opciones small {
	color: var(--tinta-50);
	font-size: 0.82rem;
}

.pc-pagos__icono {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--azul-suave);
	color: var(--azul);
}

.pc-pagos__icono svg {
	width: 22px;
	height: 22px;
}

.pc-pagos__titulo {
	font-family: var(--titulo);
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	margin: 0 0 8px;
	scroll-margin-top: 120px;
}

.pc-pagos__bajada {
	margin: 0 0 26px;
	color: var(--tinta-70);
	max-width: 68ch;
}

.pc-pagos__cuentas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.pc-pagos__cuenta {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px 30px;
	background: var(--blanco);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	/* La franja superior lleva el color de la institución: es lo que hace que
	   se reconozcan de un vistazo sin leer el nombre. */
	border-top: 5px solid var(--marca);
}

.pc-pagos__cuenta-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.pc-pagos__marca {
	font-family: var(--titulo);
	font-size: 1.18rem;
	font-weight: 600;
	color: var(--marca);
}

.pc-pagos__tipo {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--azul-suave);
	color: var(--azul);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* El número es el dato por el que se entra a esta página: va grande, en mono y
   con espacio entre cifras, porque acá es donde la gente se equivoca. */
.pc-pagos__numero {
	margin: 0;
	padding: 16px 18px;
	background: var(--azul-papel);
	border-radius: var(--radio-chico);
}

.pc-pagos__numero b {
	display: block;
	margin-top: 2px;
	font-family: var(--mono);
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	word-break: break-all;
}

.pc-pagos__etiqueta {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--tinta-50);
}

.pc-pagos__detalle {
	margin: 0;
	display: grid;
	gap: 8px;
}

.pc-pagos__detalle div {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--linea-suave);
	font-size: 0.9rem;
}

.pc-pagos__detalle div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.pc-pagos__detalle dt {
	margin: 0;
	color: var(--tinta-50);
	font-weight: 500;
}

.pc-pagos__detalle dd {
	margin: 0;
	text-align: right;
	font-weight: 500;
	word-break: break-word;
}

.pc-pagos__copiar {
	margin-top: auto;
	justify-content: center;
	border: 1px solid var(--linea);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
}

.pc-pagos__copiar--listo {
	background: #e8f7ef;
	border-color: #2fb88a;
	color: #17724f;
}

/* Mercado Pago va en su propia franja azul: es la única forma de pagar con
   tarjeta y antes quedaba perdida entre dos listas de viñetas. */
.pc-pagos__mp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 30px;
	padding: 34px 40px;
	border-radius: var(--radio);
	background: linear-gradient(115deg, var(--azul) 0%, var(--azul) 45%, var(--celeste) 100%);
	color: #fff;
	box-shadow: var(--sombra-alta);
	scroll-margin-top: 120px;
}

.pc-pagos__mp h2 {
	margin: 0 0 6px;
	color: #fff;
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}

.pc-pagos__mp p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	max-width: 56ch;
	font-size: 0.94rem;
}

.pc-pagos__mp-boton {
	flex: none;
	background: #fff;
	color: var(--azul);
	box-shadow: 0 10px 24px rgba(11, 62, 155, 0.3);
}

.pc-pagos__mp-boton:hover {
	background: var(--azul-suave);
	color: var(--azul-oscuro);
	border-color: transparent;
}

.pc-pagos__extra {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin-top: 30px;
	scroll-margin-top: 120px;
}

.pc-pagos__extra article {
	padding: 24px 28px;
	background: var(--blanco);
	border: 1px solid var(--linea-suave);
	border-radius: var(--radio-chico);
}

.pc-pagos__extra h3 {
	margin: 0 0 6px;
	font-size: 1.02rem;
}

.pc-pagos__extra p {
	margin: 0;
	color: var(--tinta-70);
	font-size: 0.92rem;
}

@media (max-width: 900px) {
	.pc-pagos__opciones,
	.pc-pagos__cuentas,
	.pc-pagos__extra {
		grid-template-columns: 1fr;
	}

	.pc-pagos__cuenta {
		padding: 24px;
	}

	.pc-pagos__mp {
		padding: 26px 24px;
	}

	.pc-pagos__mp-boton {
		width: 100%;
		justify-content: center;
	}

	.pc-pagos {
		padding-bottom: 96px;
	}
}