:root {
    --color-fondo-fecha : #a9c5b6;
    --color-cuenta : #8c9b9b;
    --font-cuenta: "Ovo", serif;
    --font-color-fecha: white;
    --font-color-contador: white;
}

#cuenta {
	display: flex;
	justify-content: center;
}
.font-contador {
    color: var(--font-color-contador);
}
.simply-amount, .simply-word {
    color: var(--font-color-contador);
	font-family: var(--font-cuenta);
    font-weight: 300;
    font-style: normal;
}
.simply-section {
	background: var(--color-cuenta);
	width: 180px;
	height: 180px;
	margin: 0 15px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cuenta-regresiva-seccion {
    padding-bottom: 0px; 
    background-color: var(--color-cuenta);
}

/* FECHA */
.date-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espacio entre las cajas */
}

.date-box {
    background-color: var(--color-fondo-fecha); /* Color de fondo de las cajas */
    color: var(--font-color-fecha); /* Color del texto */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 80px; /* Ancho de cada caja */
}

.date-number {
    font-family: var(--font-cuenta);
    font-weight: 300;
    font-style: normal;
    font-size: 36px; /* Tamaño del número */
    font-weight: bold;
    margin-bottom: 10px; /* Espacio entre el número y la etiqueta */
}

.date-label {
    font-size: 14px; /* Tamaño de la etiqueta (DÍA, MES, AÑO) */
    letter-spacing: 2px;
    text-transform: uppercase;
    border-top: 1px dotted var(--font-color); /* Línea punteada debajo del número */
    padding-top: 5px; /* Espacio entre la línea y el texto */
}
.date-box-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-fondo-fecha);
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    width: 80px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.date-box-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.date-number-modern {
    font-size: 32px;
    font-weight: bold;
    color: var(--font-color-fecha);
}

.date-label-modern {
    font-size: 16px;
    font-weight: normal;
    color: var(--font-color-fecha);
}