/* ==== La línea de precio de la ficha ========================================
 *
 * «$129,00 (tachado)  $77,00  Ahorras 40%», en el sitio del precio de siempre,
 * y SOLO dentro de la ficha. En las tarjetas, la vista rápida y los
 * relacionados se sigue viendo el precio completo a secas: esa es la regla del
 * cliente —la rebaja no se enseña en los listados— y no la toca esta hoja.
 *
 * Vive aquí y no en `main.css` a propósito: esa hoja es terreno compartido
 * entre sesiones y esto no merece el riesgo de que dos guardados se pisen.
 *
 * ══ DE DÓNDE SALE ESTA FORMA ════════════════════════════════════════════════
 *
 * El 21-sep se probó primero un recuadro aparte con el importe grande en rojo y
 * el texto «Llévatelo hoy por». Al equipo del cliente no le convenció y mandaron
 * una referencia: la ficha de Original Penguin. Se midió la suya en el navegador
 * —no se supuso— y esto es lo que hace:
 *
 *   · los DOS precios, del mismo tamaño y del mismo peso;
 *   · el viejo se distingue SOLO por el tachado;
 *   · el ahorro es la pieza más pequeña y la única en rojo;
 *   · todo en una línea, sin recuadro y sin fondo.
 *
 * Se pintaron tres versiones de esa línea en la ficha real y Sebas eligió la del
 * ahorro en porcentaje: «nos quedamos con la A, el precio no lo quiere en rojo».
 * Por eso **el precio que se paga va en --c-ink**, no en rojo: el rojo es del
 * ahorro, que es lo que se quiere que salte.
 *
 * ⚠️ **EL ROJO NO ES `--c-sale`, Y NO ES UN DESCUIDO.** `--c-sale` (#ff0000)
 * sobre blanco da 4,00:1 y el ahorro es texto pequeño, que pide 4,5:1.
 * `--c-err` (#b3261e) da **6,54:1** y se sigue leyendo como rojo. Penguin
 * resolvió lo mismo igual: el suyo es #c20000, tampoco rojo puro.
 *
 * Contrastes sobre blanco, medidos:
 *   precio tachado  --c-body #6f6f6f → 5,02:1 ✅
 *   precio de hoy   --c-ink  #141414 → 16,4:1 ✅
 *   el ahorro       --c-err  #b3261e → 6,54:1 ✅
 */

/* El contenedor es `p.price`, del tema: aquí solo se peinan las tres piezas.
   `inline-flex` y no `flex` para no romper la fila del rótulo «Precio:». */
.pdp-linea__antes,
.pdp-linea__ahora,
.pdp-linea__ahorro {
	display: inline-block;
}

/* ⚠️ **EL TACHADO VA UN ESCALÓN POR DEBAJO**, no igual que el de hoy. En
   Penguin los dos miden lo mismo, pero Sebas lo pidió distinto al verlo con
   nuestros números: «el 86 está tachado, puede haber una ligera diferencia de
   tamaño». Un escalón de la escala del tema —de --fs-h5 (21,9) a --fs-md
   (19,7)— es suficiente para que se note sin que parezca otra tipografía. */
.pdp-linea__antes {
	margin-right: var(--space-1, 0.5rem);
	font-size: var(--fs-md, 1.125rem);
	color: var(--c-body, #6f6f6f);
	text-decoration: line-through;
}

/* Mismo tamaño y peso que el tachado: lo hereda del `p.price` del tema, así que
   si mañana cambia el precio de la ficha, estos dos cambian con él. */
.pdp-linea__ahora {
	margin-right: var(--space-1, 0.5rem);
	color: var(--c-ink, #141414);
}

/* ⚠️ **EL AHORRO MIDE LO MISMO QUE EL PRECIO DE HOY**, y es una decisión de
   Sebas contra la referencia: en Penguin el ahorro es la pieza pequeña, y él lo
   pidió igual —«$60,00 y Ahorras 30% esos dos deben tener el mismo tamaño»—.
   No lleva `font-size` propio: hereda del `p.price` del tema, así que los dos
   se mueven juntos si mañana cambia el precio de la ficha. El rojo aguanta el
   cambio de tamaño de sobra (6,54:1 sobre blanco). */
.pdp-linea__ahorro {
	/* 500 y no 700 (Sebas, 21-sep). Con el mismo tamaño que el precio, la
	   negrita lo hacía pesar más que el número que se paga; el color ya lo
	   distingue de sobra. */
	font-weight: 500;
	color: var(--c-err, #b3261e);
	white-space: nowrap;
}

/* El precio de WooCommerce llega envuelto en sus propios `<span>`, que en otras
   partes del sitio traen tamaño y color propios. Aquí heredan de su pieza. */
.pdp-linea__antes .woocommerce-Price-amount,
.pdp-linea__antes .woocommerce-Price-currencySymbol,
.pdp-linea__ahora .woocommerce-Price-amount,
.pdp-linea__ahora .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	white-space: nowrap;
}