/* ===========================================================================
   CUENTA ATRÁS
   Figma: 7717:45038 (escritorio) y 7719:45065 (móvil).

   Acompaña a un hero oscuro: el rótulo con su reloj y cuatro cajas con los
   números. Los colores de la caja no salen del archivo como tales —allí son el
   blanco de texto/primario con opacidad— así que se leyeron de la lámina:
   relleno 22,53,55 y borde 64,89,91 sobre el #022426 del fondo, que son el
   blanco al 8 % y al 24 %.

   Se escribe primero la versión móvil y luego se amplía.
   =========================================================================== */

.iacc-cuenta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	width: 100%;
}

/* --- El rótulo con el reloj ---------------------------------------------- */

.iacc-cuenta__etiqueta {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;

	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-cuenta__icono {
	flex: none;
	width: 20px;
	height: 20px;
}

/* --- Las cuatro cajas ----------------------------------------------------- */

/*
 * En móvil se reparten el ancho a partes iguales, que es como está dibujado:
 * cuatro cajas de 96 no caben en 350 y con ancho fijo la última se saldría.
 */
.iacc-cuenta__unidades {
	display: flex;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-cuenta__unidad {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 12px 4px;

	text-align: center;

	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 24%);
	border-radius: 12px;
}

.iacc-cuenta__valor {
	font-size: var(--wp--preset--font-size--24, 24px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.24px;
	color: var(--wp--preset--color--neutral-0, #fff);

	/* Los dígitos no bailan al cambiar cada segundo. */
	font-variant-numeric: tabular-nums;
}

.iacc-cuenta__nombre {
	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--gris-claro, #e1e5e5);
}

/* --- El mensaje de cuando se acaba ---------------------------------------- */

.iacc-cuenta__fin {
	margin: 0;

	font-size: var(--wp--preset--font-size--18, 18px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--neutral-0, #fff);
}

/*
 * Mientras la cuenta corre se ven los números; cuando se acaba, el mensaje.
 * El estado lo marca la clase del contenedor y no un atributo hidden, porque
 * el editor dibuja los bloques por otro camino y por ahí el atributo se pierde:
 * se veían las dos cosas a la vez.
 */
.iacc-cuenta__fin {
	display: none;
}

.iacc-cuenta--cerrada .iacc-cuenta__unidades {
	display: none;
}

.iacc-cuenta--cerrada .iacc-cuenta__fin {
	display: block;
}

/* ===========================================================================
   Escritorio: cajas de ancho fijo
   =========================================================================== */

@media (min-width: 992px) {

	.iacc-cuenta__unidades {
		gap: 12px;
		width: auto;
	}

	.iacc-cuenta__unidad {
		/* Los 96 del diseño; aquí hay sitio de sobra para los cuatro. */
		flex: none;
		width: 96px;
		padding: 12px 8px;
	}

	.iacc-cuenta__valor {
		font-size: var(--wp--preset--font-size--28, 28px);
		letter-spacing: -0.28px;
	}
}