/* Contenedor principal de promociones.
 * Reserva desde el primer render el alto real del banner y de su paginación
 * para evitar que la inicialización de Owl Carousel desplace el contenido inferior.
 */
.carrousel-section{
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: calc(((100vw - 32px) / 4) + 24px);
	text-align: center;
	overflow: hidden;
}

#banner-principal {
	position: relative;
	width: 100%;
	height: calc(((100vw - 32px) / 4) + 24px);
	min-height: calc(((100vw - 32px) / 4) + 24px);
	padding-bottom: 24px;
	box-sizing: border-box;
	overflow: hidden;
}

/* Owl oculta el carrusel hasta inicializarlo. El alto anterior mantiene reservado
 * el mismo espacio tanto antes como después de añadir sus wrappers internos. */
#banner-principal.owl-loaded {
	display: block;
}

#banner-principal .owl-stage-outer,
#banner-principal .owl-stage,
#banner-principal .owl-item,
#banner-principal .oc-item {
	height: calc((100vw - 32px) / 4);
}

/* La paginación se coloca dentro del espacio reservado para que su creación no desplace el contenido inferior. */
#banner-principal .owl-dots {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 24px;
	line-height: 24px;
}

/* El estilo global del tema añade padding directamente a las imágenes de
 * .index-carrousel. Con una altura reservada ese padding aumenta el tamaño real
 * de la imagen y provoca que Owl Carousel recorte parte del banner.
 * El espacio exterior y el redondeado se aplican aquí al wrapper para conservar
 * el diseño sin alterar la proporción ni ocultar contenido de la creatividad. */
.index-carrousel {
	width: calc(100% - 32px);
	height: calc((100vw - 32px) / 4);
	margin: 0 16px;
	aspect-ratio: 4 / 1; /* banners escritorio: 2000×500 / 1920×480 */
	border-radius: 60px;
	overflow: hidden;
	box-sizing: border-box;
}

.index-carrousel picture,
.index-carrousel img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Sobrescribe únicamente para el banner principal el padding y el radio globales
 * definidos en css/optimized/style.css. */
#banner-principal .owl-item .index-carrousel img {
	padding: 0;
	border-radius: 0;
	box-sizing: border-box;
	object-fit: cover;
}

@media (max-width: 575px) {
	/* banners móvil: 400×500 → ratio 4:5 */
	.carrousel-section {
		min-height: calc(((100vw - 32px) * 1.25) + 24px);
	}

	#banner-principal {
		height: calc(((100vw - 32px) * 1.25) + 24px);
		min-height: calc(((100vw - 32px) * 1.25) + 24px);
	}

	#banner-principal .owl-stage-outer,
	#banner-principal .owl-stage,
	#banner-principal .owl-item,
	#banner-principal .oc-item,
	.index-carrousel {
		height: calc((100vw - 32px) * 1.25);
	}

	.index-carrousel {
		aspect-ratio: 4 / 5;
		border-radius: 30px;
	}
}

/*altos fijos a los contadores para no perjudicar el cls*/
.countdown-large{height:73px;}
.countdown-small{height:40px;}

/* pantalla de carga en las promos para mejorar cls */
div#loadPromo {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    color: black;
    width: 100%;
    height: calc(100% - 24px);
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    font-size: 36px;
}