/* Landing Promo Ferretera.

   Los colores y las dos fuentes salen del kit del cliente, el mismo que ya está
   aplicado en el sitio: Rubik para los titulares, Inter para todo lo demás.

   La hoja de claves va sobre blanco y no sobre el degradado de la marca: son
   diez renglones de datos numéricos y lo que necesitan es contraste. El color
   se guarda para la portada y para los estados del descuento, que es donde
   significa algo. */

:root {
	--pf-rojo: #ea0029;
	--pf-ambar: #fcab03;
	--pf-amarillo: #ffc200;
	--pf-negro: #0f0f0f;
	--pf-tinta: #1c1c1c;
	--pf-apagado: #6b6b6b;
	--pf-linea: #e4e4e4;
	--pf-hoja: #f6f6f4;
}

*, *::before, *::after { box-sizing: border-box; }

body.pf {
	margin: 0;
	background: var(--pf-hoja);
	color: var(--pf-tinta);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

.pf img { max-width: 100%; height: auto; }

.pf-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pf :focus-visible {
	outline: 3px solid var(--pf-negro);
	outline-offset: 2px;
}

/* -- Franja de marca ------------------------------------------------------
   Sin menú, sin buscador y sin carrito: es tráfico de campaña pagada y cada
   enlace de navegación es una salida antes de cotizar. Queda el logo, que el
   brief pide, y el WhatsApp, que es el canal por el que se cierra la venta.

   .pf-marca la sigue usando templates/gracias.php -esa pantalla no tiene la
   franja de color, así que ahí el logo se queda en su propia barra negra-;
   .pf-portada__marca es la versión nueva del punto 10 de los ajustes del 21
   de agosto, solo para el hero de la landing. */
.pf-marca {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	background: var(--pf-negro);
}

.pf-marca__logo { display: flex; }
.pf-marca__logo img { display: block; }

.pf-marca__tel {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.pf-marca__tel span { color: var(--pf-amarillo); }
.pf-marca__tel:hover { text-decoration: underline; }

/* position:relative para quedar encima del ::before de .pf-portada (las
   diagonales), igual que .pf-portada__interior más abajo. */
.pf-portada__marca {
	position: relative;
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 20px 0;
}

.pf-portada__logo { display: flex; }
.pf-portada__logo img { display: block; }

.pf-portada__tel {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.pf-portada__tel span { color: var(--pf-amarillo); }
.pf-portada__tel:hover { text-decoration: underline; }

/* -- Portada --------------------------------------------------------------
   El degradado y las diagonales son los del hero del sitio, para que quien
   llegue de un anuncio reconozca la misma marca. */

.pf-portada {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(100deg, #c40023 0%, var(--pf-rojo) 38%, #fc7603 78%, var(--pf-ambar) 100%);
}

.pf-portada::before {
	content: "";
	position: absolute;
	inset: -20%;
	background-image: repeating-linear-gradient(
		115deg,
		rgba(255, 255, 255, .11) 0 2px,
		transparent 2px 46px
	);
}

.pf-portada__interior {
	position: relative;
	max-width: 1140px;
	margin: 0 auto;
	/* 32px arriba, no los 56px de antes: ahora .pf-portada__marca ya deja su
	   propio aire encima (20px de padding + el alto del logo). */
	padding: 32px 20px 60px;
}

.pf-portada__titulo {
	margin: 0;
	color: #fff;
	font-family: 'Rubik', system-ui, sans-serif;
	font-size: clamp(46px, 9vw, 104px);
	font-weight: 900;
	line-height: .92;
	letter-spacing: -.015em;
	text-transform: uppercase;
}

.pf-portada__bajada {
	max-width: 30ch;
	margin: 20px 0 26px;
	color: #fff;
	font-size: clamp(17px, 2.2vw, 22px);
	line-height: 1.35;
}

/* -- Botones --------------------------------------------------------------- */

.pf-boton {
	display: inline-block;
	padding: 13px 30px;
	border: 0;
	border-radius: 999px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, background-color .12s ease;
}

.pf-boton--claro { background: #fff; color: var(--pf-negro); }
.pf-boton--claro:hover { background: #f1f1f1; }

.pf-boton--principal {
	background: var(--pf-rojo);
	color: #fff;
	font-size: 17px;
	padding: 15px 36px;
}

.pf-boton--principal:hover:not(:disabled) { background: #c40023; }

.pf-boton--principal:disabled {
	background: #c9c9c9;
	color: #fff;
	cursor: not-allowed;
}

.pf-boton:active:not(:disabled) { transform: translateY(1px); }

/* -- La hoja --------------------------------------------------------------- */

.pf-hoja {
	max-width: 1140px;
	margin: -28px auto 0;
	padding: 0 20px 32px;
}

.pf-hoja__encabezado {
	position: relative;
	padding: 26px 26px 4px;
	border-radius: 18px 18px 0 0;
	background: #fff;
}

.pf-hoja__encabezado h2 {
	margin: 0;
	font-family: 'Rubik', system-ui, sans-serif;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 900;
	text-transform: uppercase;
}

.pf-vigencia {
	margin: 6px 0 0;
	color: var(--pf-rojo);
	font-size: 15px;
	font-weight: 600;
}

.pf-instruccion {
	margin: 12px 0 0;
	max-width: 62ch;
	color: var(--pf-apagado);
	font-size: 15px;
}

.pf-vacio {
	padding: 40px 26px;
	border-radius: 18px;
	background: #fff;
	font-size: 17px;
}

.pf-form { margin: 0; }

/* -- Tabla ---------------------------------------------------------------- */

.pf-tabla {
	width: 100%;
	/* Los anchos mandan sobre el contenido: es lo que evita que la tabla se
	   reacomode conforme se van llenando los importes. */
	table-layout: fixed;
	border-collapse: collapse;
	background: #fff;
	font-variant-numeric: tabular-nums;
}

.pf-col--clave { width: 5.5rem; }
.pf-col--foto { width: 5.5rem; }
.pf-col--producto { width: auto; }
.pf-col--precio { width: 7rem; }
.pf-col--promo { width: 15.5rem; }
.pf-col--cantidad { width: 9.5rem; }
.pf-col--importe { width: 11rem; }

.pf-tabla thead th {
	padding: 14px 12px;
	border-bottom: 2px solid var(--pf-negro);
	color: var(--pf-negro);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
}

.pf-celda {
	padding: 16px 12px;
	border-bottom: 1px solid var(--pf-linea);
	vertical-align: top;
}

.pf-fila--activa .pf-celda { background: #fffaf0; }

.pf-clave {
	font-family: 'Rubik', system-ui, sans-serif;
	font-size: 22px;
	font-weight: 900;
}

.pf-celda--foto img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--pf-hoja);
}

.pf-nombre { display: block; font-weight: 500; }

/* Columna "Precio" (puntos 1 y 5 de los ajustes del 21 de agosto): el
   precio normal de lista, aparte de la escalera de descuentos -antes vivía
   como texto secundario bajo el nombre del producto, se quitó de ahí para
   no repetirlo ya que ahora tiene su propia columna-. */
.pf-precio-normal {
	display: block;
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pf-precio-normal__unidad {
	display: block;
	margin-top: 2px;
	color: var(--pf-apagado);
	font-size: 12.5px;
}

/* -- La escalera de descuento ---------------------------------------------
   Es lo único que se mueve en la página, y se gana el lugar: la regla central
   del brief son los descuentos por múltiplos, y la decisión real de quien
   compra es cuántas piezas le faltan para el siguiente escalón. */

.pf-escalera { min-width: 190px; }

.pf-escalera__barra {
	display: flex;
	gap: 3px;
	margin-bottom: 8px;
}

/* Cada escalon es un boton: dice el descuento y cuantas piezas hacen falta, y
   de un toque pone esa cantidad. Es la pregunta que trae quien compra al
   mayoreo -"cuanto tengo que llevar para el siguiente precio"- contestada sin
   que tenga que sacar la cuenta. */
.pf-escalera__paso {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px 4px;
	border: 0;
	border-radius: 5px;
	background: #ededed;
	color: #9a9a9a;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.pf-escalera__paso span {
	font-size: 11px;
	font-weight: 500;
	opacity: .85;
}

/* El precio con el descuento ya puesto, que es lo que se compara entre
   tramos: se lee antes que las piezas, pero sin tapar al porcentaje. */
.pf-escalera__precio {
	font-size: 12px !important;
	font-weight: 600 !important;
	opacity: 1 !important;
	font-variant-numeric: tabular-nums;
}

.pf-escalera__paso:hover {
	background: #dcdcdc;
	color: var(--pf-tinta);
}

.pf-escalera__paso--alcanzado {
	background: var(--pf-ambar);
	color: var(--pf-negro);
}

.pf-escalera__paso--actual {
	background: var(--pf-rojo);
	color: #fff;
}

.pf-escalera__paso--alcanzado:hover { background: #e69a00; color: var(--pf-negro); }
.pf-escalera__paso--actual:hover { background: #c40023; color: #fff; }

.pf-escalera__estado {
	margin: 0;
	color: var(--pf-apagado);
	font-size: 13.5px;
	line-height: 1.35;
}

.pf-escalera__estado b { color: var(--pf-tinta); }

/* El renglon del avance esta reservado desde el principio, aunque este vacio:
   si apareciera al teclear, la fila creceria bajo el cursor. */
.pf-escalera__avance {
	margin: 5px 0 0;
	min-height: 2.8em;
	color: var(--pf-tinta);
	font-size: 13.5px;
	line-height: 1.35;
}


/* -- Cantidad -------------------------------------------------------------- */

.pf-cantidad {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pf-piezas-input {
	width: 84px;
	padding: 9px 10px;
	border: 2px solid var(--pf-linea);
	border-radius: 8px;
	font-family: inherit;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.pf-piezas-input:focus { border-color: var(--pf-negro); }

.pf-cantidad__unidad {
	color: var(--pf-apagado);
	font-size: 13.5px;
}

/* Las piezas que se lleva son dato de decision, no una nota al pie: los tramos
   estan en piezas y es contra ese numero que se lee la escalera. */
.pf-piezas {
	display: block;
	margin-top: 6px;
	color: var(--pf-tinta);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* -- Importe --------------------------------------------------------------
   Lo que costaria sin promocion, lo que cuesta con ella y lo que se ahorra. El
   ahorro es el argumento de venta y antes habia que sacarlo a mano. */

/* La altura del bloque se reserva completa -importe, precio de lista tachado y
   ahorro-, aunque los dos ultimos aparezcan solo cuando hay descuento. */
.pf-importe-caja { min-height: 5.1em; }

.pf-importe {
	display: block;
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pf-lista {
	display: block;
	margin-top: 2px;
	color: var(--pf-apagado);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	text-decoration: line-through;
	white-space: nowrap;
}

.pf-ahorro {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 9px;
	border-radius: 999px;
	background: #e8f6ec;
	color: #16733a;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pf-lista[hidden], .pf-ahorro[hidden] { display: none; }

/* -- Contacto -------------------------------------------------------------- */

.pf-contacto {
	margin: 0;
	padding: 24px 26px 28px;
	border: 0;
	background: #fff;
}

/* La barra del resumen esta fija abajo: sin este margen, al llevar a alguien al
   formulario el campo queda debajo de ella. */
.pf-contacto { scroll-margin-bottom: 150px; }

.pf-contacto__aviso {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: #fdecef;
	color: #b0001f;
	font-size: 14.5px;
	font-weight: 600;
}

.pf-contacto__aviso[hidden] { display: none; }


.pf-contacto legend {
	padding: 0;
	font-family: 'Rubik', system-ui, sans-serif;
	font-size: 19px;
	font-weight: 700;
}

/* Nombre y código postal no pesan igual -el código son 5 dígitos, el
   nombre puede ser largo-, así que ya no reparten el ancho parejo: nombre
   crece, código postal se queda angosto y no estira la fila si el
   contenedor sobra espacio (flex-grow:0). */
.pf-contacto__campos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 14px;
}

.pf-contacto__campos label {
	flex: 1 1 210px;
}

/* label.pf-contacto__campo--postal y no solo la clase sola: la regla de
   arriba (.pf-contacto__campos label) ya trae un elemento en el selector,
   así que empataba en clases y ganaba por eso -la clase sola pesa menos
   que clase+elemento-. */
.pf-contacto__campos label.pf-contacto__campo--postal {
	flex: 0 1 110px;
}

.pf-contacto label {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.pf-contacto label input { margin-top: 6px; width: 100%; }

.pf-contacto input {
	padding: 11px 12px;
	border: 2px solid var(--pf-linea);
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
}

.pf-contacto input:focus { border-color: var(--pf-negro); }

.pf-opcional { color: var(--pf-apagado); font-weight: 400; }

/* -- Resumen fijo ---------------------------------------------------------- */

.pf-resumen {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 26px;
	border-radius: 0 0 18px 18px;
	background: var(--pf-negro);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .16);
}

.pf-resumen__cuenta {
	margin: 0;
	color: #fff;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.pf-resumen__cuenta b {
	font-size: 19px;
	font-weight: 700;
}

/* -- Pie ------------------------------------------------------------------- */

.pf-pie {
	padding: 40px 20px 48px;
	background: var(--pf-negro);
	color: #c9c9c9;
	font-size: 14.5px;
	text-align: center;
}

.pf-pie img { margin-bottom: 16px; }
.pf-pie p { margin: 0 auto; max-width: 60ch; }
.pf-pie a { color: #fff; }

.pf-pie__nota {
	margin-top: 18px;
	color: #8e8e8e;
	font-size: 13px;
}

/* -- Teléfono -------------------------------------------------------------
   Seis columnas no caben, así que cada clave pasa a ser una tarjeta con su
   propio encabezado. El campo de cantidad crece para poder tocarlo. */

@media (max-width: 860px) {
	.pf-tabla, .pf-tabla tbody, .pf-fila, .pf-celda { display: block; width: 100%; }
	.pf-tabla thead { display: none; }

	/* Cada clave se arma como tarjeta y no como tabla desarmada. La columna de
	   etiquetas que sustituia a los encabezados se comia 136 de los 348px, y a
	   los escalones les quedaban 61 cada uno: "-10% / 20 pz" no cabia. Aqui
	   no hacen falta, la tarjeta se lee sola -foto, nombre, descuentos, cuantas
	   piezas, cuanto es- y los lectores de pantalla siguen teniendo las
	   etiquetas de cada control. */
	.pf-fila {
		display: grid;
		/* Tres columnas para que el ultimo renglon no herede el ancho de la
		   foto: ahi el campo de cantidad se quedaba en 76px y no cabia ni el
		   numero. */
		grid-template-columns: 76px 1fr auto;
		grid-template-areas:
			"foto clave clave"
			"foto producto producto"
			"foto precio precio"
			"promo promo promo"
			"cantidad cantidad importe";
		align-items: start;
		gap: 0 14px;
		margin-bottom: 14px;
		padding: 16px;
		border: 1px solid var(--pf-linea);
		border-radius: 14px;
		background: #fff;
	}

	.pf-celda { padding: 0; border: 0; }
	.pf-celda::before { display: none; }

	.pf-celda--foto { grid-area: foto; }
	.pf-celda--clave { grid-area: clave; }
	.pf-celda--producto { grid-area: producto; }
	/* En la tabla de escritorio el precio va en su propia columna (punto 1 de
	   los ajustes del 21 de agosto); aquí, sin esa columna, es el único lugar
	   donde se ve -por eso su propio renglón en la tarjeta, no display:none-. */
	.pf-celda--precio { grid-area: precio; margin-top: 2px; }
	.pf-celda--promo { grid-area: promo; margin-top: 16px; }
	.pf-celda--cantidad { grid-area: cantidad; margin-top: 14px; }
	.pf-celda--importe { grid-area: importe; margin-top: 14px; text-align: right; }

	.pf-fila--activa .pf-celda { background: transparent; }
	.pf-fila--activa { border-color: var(--pf-ambar); background: #fffaf0; }

	.pf-celda--foto img { width: 76px; height: 76px; }

	.pf-nombre { font-size: 15px; }

	.pf-piezas-input {
		width: 96px;
		padding: 13px 12px;
		font-size: 18px;
	}

	.pf-celda--cantidad { align-self: end; }

	/* Los escalones son botones y aqui se tocan con el dedo: 44px de alto es el
	   minimo para acertarles sin pelearse con la pantalla. */
	.pf-escalera__paso {
		min-height: 46px;
		justify-content: center;
		padding: 6px 6px;
	}

	.pf-importe-caja,
	.pf-escalera__avance { min-height: 0; }

	.pf-escalera__avance:empty { display: none; }

	.pf-hoja { padding-bottom: 40px; }

	.pf-hoja__encabezado,
	.pf-contacto { border-radius: 14px; }

	.pf-contacto { margin-top: 14px; }

	.pf-resumen {
		border-radius: 14px;
		margin-top: 14px;
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.pf-resumen .pf-boton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pf * { transition: none !important; }
}

/* -- Confirmación ----------------------------------------------------------
   El paso de WhatsApp es la acción, no un adorno: es donde se cierra la venta
   según el brief, así que va antes del recibo y con el mismo peso visual que
   el botón de la landing. */

.pf-gracias {
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 20px 72px;
	text-align: center;
}

.pf-gracias h1 {
	margin: 0;
	font-family: 'Rubik', system-ui, sans-serif;
	font-size: clamp(30px, 5.6vw, 52px);
	font-weight: 900;
	line-height: 1.04;
	text-transform: uppercase;
}

.pf-gracias__folio {
	margin: 18px 0 0;
	color: var(--pf-apagado);
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

.pf-gracias__folio b { color: var(--pf-tinta); }

.pf-recibo {
	margin-top: 44px;
	padding: 24px;
	border-radius: 16px;
	background: #fff;
	text-align: left;
}

.pf-recibo h2 {
	margin: 0 0 14px;
	font-family: 'Rubik', system-ui, sans-serif;
	font-size: 19px;
	font-weight: 700;
}

.pf-recibo__tabla {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.pf-recibo__tabla td {
	padding: 12px 8px;
	border-bottom: 1px solid var(--pf-linea);
	vertical-align: top;
}

.pf-recibo__tabla b { font-family: 'Rubik', system-ui, sans-serif; }

.pf-recibo__tabla td span {
	display: block;
	color: var(--pf-apagado);
	font-size: 13.5px;
}

.pf-recibo__cantidad { white-space: nowrap; }

.pf-recibo__importe {
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
}

.pf-recibo__importe span { color: var(--pf-rojo); font-weight: 700; }

.pf-recibo__tabla tfoot td {
	border-bottom: 0;
	border-top: 2px solid var(--pf-negro);
	font-size: 17px;
}

.pf-recibo__nota {
	margin: 14px 0 0;
	color: var(--pf-apagado);
	font-size: 13px;
}

/* -- Visor de la foto ------------------------------------------------------
   Quien compra abrasivos revisa la etiqueta -medida, grano, revoluciones por
   minuto- y en una miniatura de 64px no se lee nada. */

.pf-foto {
	display: inline-block;
	border-radius: 8px;
	/* El cursor es toda la pista que hace falta: un icono encima ensucia la
	   foto, que es justo lo que se quiere mirar. */
	cursor: zoom-in;
	line-height: 0;
}

.pf-visor {
	max-width: min(92vw, 640px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	overflow: visible;
}

.pf-visor::backdrop { background: rgba(0, 0, 0, .72); }

.pf-visor img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px 16px 0 0;
	background: var(--pf-hoja);
}

.pf-visor__pie {
	margin: 0;
	padding: 14px 18px 16px;
	font-size: 15px;
	font-weight: 500;
}

.pf-visor__cerrar {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--pf-negro);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.pf-visor__cerrar:hover { background: var(--pf-rojo); }

/* El desglose de la cotizacion enseña lo mismo que la landing: cuanto de lista,
   cuanto con promocion y cuanto se ahorra. */

.pf-recibo__lista {
	color: var(--pf-apagado) !important;
	font-weight: 500;
	text-decoration: line-through;
}

.pf-recibo__tabla tfoot .pf-recibo__lista-total td {
	padding-bottom: 4px;
	border-bottom: 0;
	color: var(--pf-apagado);
	font-size: 14.5px;
}

.pf-recibo__tabla tfoot .pf-recibo__lista-total + tr td { border-top: 0; }

.pf-recibo__tabla tfoot .pf-recibo__ahorro td {
	padding-top: 4px;
	border-top: 0;
	color: #16733a;
	font-size: 15px;
}

/* La foto de la clave, igual que en la tabla: sirve para reconocer el producto
   sin leer la descripcion. */

.pf-recibo__foto { width: 64px; padding-right: 0; }

.pf-recibo__foto img {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--pf-hoja);
}

/* El desglose de la cotizacion en telefono: cuatro columnas no caben en una
   tarjeta de 350px -el nombre del producto se parte palabra por palabra y la
   tabla se sale-, asi que cada renglon se apila. */

@media (max-width: 860px) {
	.pf-recibo { padding: 18px; }

	.pf-recibo__tabla,
	.pf-recibo__tabla tbody,
	.pf-recibo__tabla tfoot,
	.pf-recibo__tabla tr,
	.pf-recibo__tabla td {
		display: block;
		width: 100%;
	}

	.pf-recibo__tabla tbody tr {
		display: grid;
		grid-template-columns: 52px 1fr auto;
		grid-template-areas:
			"foto datos datos"
			"cant cant importe";
		gap: 4px 12px;
		align-items: start;
		padding: 14px 0;
		border-bottom: 1px solid var(--pf-linea);
	}

	.pf-recibo__tabla tbody tr:first-child { padding-top: 0; }

	.pf-recibo__tabla tbody td {
		padding: 0;
		border: 0;
	}

	.pf-recibo__foto { grid-area: foto; width: auto; }
	.pf-recibo__tabla tbody td:nth-child(2) { grid-area: datos; }
	.pf-recibo__cantidad { grid-area: cant; padding-top: 8px !important; }

	.pf-recibo__importe {
		grid-area: importe;
		padding-top: 8px !important;
		text-align: right;
	}


	.pf-recibo__tabla tfoot tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
	}

	.pf-recibo__tabla tfoot td { padding: 6px 0; }
	.pf-recibo__tabla tfoot .pf-recibo__importe { padding-top: 6px !important; }
}

/* Descargar la cotizacion, junto al titulo de la tabla: es una accion sobre lo
   que se cotizo, no el siguiente paso, asi que va discreta y no como boton. */
.pf-recibo__encabezado {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.pf-recibo__encabezado h2 { margin: 0; }

.pf-recibo__hoja {
	color: var(--pf-apagado);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.pf-recibo__hoja:hover,
.pf-recibo__hoja:focus {
	color: var(--pf-negro);
	text-decoration: underline;
}