/*
 * Aparicion al entrar en pantalla y presentacion de precios.
 *
 * Personalidad de movimiento: Premium. 400 ms, curva (0.4, 0, 0.2, 1), sin
 * rebote. Corresponde al tono del brand book —Professional, Authoritative,
 * Reliable—; el rebote lo haria ver barato y contradice esa voz.
 */

:root {
	/* Curva firma: una sola para el 80% de las animaciones. */
	--premium: cubic-bezier(0.4, 0, 0.2, 1);
	--entra: 400ms;
}

/* --- Aparicion al entrar en pantalla --- */

/*
 * Entrada: posicion + opacidad. Solo opacidad se lee como un parpadeo y no
 * comunica de donde viene el elemento.
 *
 * El estado inicial lo pone el script, no el CSS: si el script no corre, nada
 * queda invisible.
 */
.aparece {
	transition:
		opacity var(--entra) var(--premium),
		transform var(--entra) var(--premium);
}

@media (prefers-reduced-motion: reduce) {
	.aparece {
		transition: none;
	}
}

/* --- Precios claros --- */

/*
 * El peso final manda y el dolar sin IVA queda como referencia. Es al reves de
 * como estaba: antes el numero grande era el dolar sin IVA, el checkout pedia
 * un 21% mas y el comprador lo leia como que lo estaban cargando.
 */
.tarjeta__final {
	font-size: 1.15rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--negro);
}

.tarjeta__base {
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--gris);
}

.tarjeta__precio {
	display: grid;
	gap: 0.1rem;
	align-items: start;
}

/* --- Precio final en la ficha --- */

/*
 * Bloque lleno, sin barrita de color al costado.
 *
 * Ese borde grueso de un solo lado es la marca de agua de la interfaz generada
 * a maquina, y ademas se peleaba con el mundo de canto vivo del resto. El precio
 * ya destaca por tamano y por el fondo propio: no necesita un subrayado lateral
 * que le avise al lector que mire.
 */
.ficha__final {
	display: grid;
	gap: 0.15rem;
	margin: 0.5rem 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--tiza);
}

.ficha__final-cifra {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(1.8rem, 3.4vw, 2.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--negro);
}

.ficha__final-que {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-texto);
}

.ficha__final-nota {
	margin-top: 0.25rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--wp--preset--color--gris);
}

/*
 * El precio de WooCommerce baja a referencia: ya no es el numero que decide.
 * Sigue estando porque el catalogo se maneja en dolares y hay clientes que
 * comparan por ahi.
 */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--gris);
}