/* ==========================================================================
   HOTEL RATING BADGE - Indicador de valoracion y resenas dentro de introductionBox
   Muestra puntuacion, estrellas y numero de opiniones en linea horizontal.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Estilos base (mobile first)
   ---------------------------------------------------------------------------- */

#introductionSec .hotel-rating-badge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 12px 0 20px 0;
}

/* Bloque de puntuacion numerica */
#introductionSec .hotel-rating-badge__score {
	display: flex;
	align-items: baseline;
}

#introductionSec .hotel-rating-badge__value {
	font-family: "ArgestaHeadline", serif;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-base-blue);
	font-weight: 500;
}

#introductionSec .hotel-rating-badge__scale {
	font-family: "Urbanist", sans-serif;
	font-size: 0.75rem;
	color: var(--text-primary-solid-64);
	margin-left: 1px;
}

/* Bloque de estrellas */
#introductionSec .hotel-rating-badge__stars {
	display: flex;
	align-items: center;
	gap: 2px;
}

#introductionSec .hotel-rating-badge__star {
	font-size: 1rem;
	line-height: 1;
	color: #C9A84C;
}

/* Texto de meta (opiniones) */
#introductionSec .hotel-rating-badge__meta {
	font-family: "Urbanist", sans-serif;
	font-size: 0.75rem;
	color: var(--text-primary-solid-64);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1;
}

/* ----------------------------------------------------------------------------
   Desktop (992px - 1920px)
   ---------------------------------------------------------------------------- */

@media (min-width: 992px) {
	#introductionSec .hotel-rating-badge {
		flex-wrap: nowrap;
		gap: 12px;
		margin: 12px 0 20px 0;
	}

	#introductionSec .hotel-rating-badge__value {
		font-size: 1.75rem;
	}

	#introductionSec .hotel-rating-badge__scale {
		font-size: 0.8125rem;
	}

	#introductionSec .hotel-rating-badge__star {
		font-size: 1rem;
	}

	#introductionSec .hotel-rating-badge__meta {
		font-size: 0.75rem;
	}
}

/* ----------------------------------------------------------------------------
   Desktop Grande (>1920px)
   ---------------------------------------------------------------------------- */

@media (min-width: 1921px) {
	#introductionSec .hotel-rating-badge {
		gap: 14px;
	}

	#introductionSec .hotel-rating-badge__value {
		font-size: 2rem;
	}

	#introductionSec .hotel-rating-badge__scale {
		font-size: 0.875rem;
	}

	#introductionSec .hotel-rating-badge__stars {
		gap: 3px;
	}

	#introductionSec .hotel-rating-badge__star {
		font-size: 1.125rem;
	}

	#introductionSec .hotel-rating-badge__meta {
		font-size: 0.75rem;
		letter-spacing: 0.75px;
	}
}