/* ==========================================================================
   Casa Sicilia – Widgets Elementor
   Nota: los selectores de imágenes llevan dos clases para ganar a la regla
   genérica de Elementor `.elementor img { height:auto; max-width:100% }`.
   ========================================================================== */

/* ---------- Cabecera con título ---------- */

.cs-cabecera {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 54vw;
	overflow: hidden;
	background-color: #606060;
}

.cs-cabecera {
	--cs-foto-x: 50%;
	--cs-foto-y: 50%;
	--cs-foto-zoom: 1;
}

.cs-cabecera img.cs-cabecera__imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--cs-foto-x) var(--cs-foto-y);
	transform: scale(var(--cs-foto-zoom));
	transform-origin: var(--cs-foto-x) var(--cs-foto-y);
}

.cs-cabecera::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Degradado oscuro desde abajo (por debajo del título). */
.cs-cabecera--degradado-yes .cs-cabecera::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--cs-degradado-alto, 45%);
	background: linear-gradient(to top, var(--cs-degradado-color, rgba(30, 24, 20, 0.55)), transparent);
	pointer-events: none;
}

.cs-cabecera .cs-cabecera__titulo {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0 0 -0.16em;
	padding: 0;
	line-height: 0.7;
	white-space: nowrap;
	color: rgba(243, 239, 235, 0.8);
}

.cs-cabecera__linea {
	display: block;
}
/* Animación al cargar: la foto se acerca suavemente y las líneas entran deslizándose. */
@keyframes cs-cabecera-foto {
	from { transform: scale(calc(var(--cs-foto-zoom) * 1.08)); }
	to   { transform: scale(var(--cs-foto-zoom)); }
}

@keyframes cs-cabecera-linea {
	from { opacity: 0; transform: translateX(var(--cs-desde, 8vw)); }
	to   { opacity: 1; transform: translateX(0); }
}

.cs-cabecera--anim img.cs-cabecera__imagen {
	animation: cs-cabecera-foto 2.6s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

.cs-cabecera--anim .cs-cabecera__linea {
	animation: cs-cabecera-linea 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(0.35s + var(--cs-i, 0) * 0.18s);
}

.cs-cabecera--anim .cs-cabecera__linea:nth-child(even) {
	--cs-desde: -8vw;
}

/* ---------- Collage de imágenes ---------- */
/* Medidas en % del ancho del collage (variables que rellena Elementor). */

.elementor-widget-cs-collage-imagenes {
	width: 100%;
}

.cs-collage {
	--cs-principal-ancho: 84;
	--cs-principal-proporcion: 0.95;
	--cs-principal-bajada: 0;
	--cs-secundaria-ancho: 40;
	--cs-secundaria-proporcion: 0.59;
	--cs-secundaria-bajada: 50;
	--cs-principal-lado: 0;
	--cs-principal-lado-opuesto: auto;
	--cs-secundaria-lado: auto;
	--cs-secundaria-lado-opuesto: 0;
	/* Alto total en "% del ancho" = lo que más baje de las dos fotos. */
	--cs-alto: max(
		calc(var(--cs-principal-bajada) + var(--cs-principal-ancho) / var(--cs-principal-proporcion)),
		calc(var(--cs-secundaria-bajada) + var(--cs-secundaria-ancho) / var(--cs-secundaria-proporcion))
	);

	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: calc(var(--cs-alto) * 1%);
}

.cs-collage .cs-collage__foto {
	position: absolute;
	margin: 0;
	overflow: hidden;
}

.cs-collage .cs-collage__foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.9s ease;
}

/* "top" en % se calcula sobre el alto del collage: bajada / alto total. */
.cs-collage .cs-collage__foto--principal {
	z-index: 1;
	top: calc(var(--cs-principal-bajada) / var(--cs-alto) * 100%);
	left: var(--cs-principal-lado);
	right: var(--cs-principal-lado-opuesto);
	width: calc(var(--cs-principal-ancho) * 1%);
	aspect-ratio: var(--cs-principal-proporcion);
}

.cs-collage .cs-collage__foto--secundaria {
	z-index: 0;
	top: calc(var(--cs-secundaria-bajada) / var(--cs-alto) * 100%);
	left: var(--cs-secundaria-lado);
	right: var(--cs-secundaria-lado-opuesto);
	width: calc(var(--cs-secundaria-ancho) * 1%);
	aspect-ratio: var(--cs-secundaria-proporcion);
}

.cs-collage--secundaria-delante .cs-collage__foto--secundaria {
	z-index: 2;
}

.cs-collage--zoom-yes .cs-collage:hover .cs-collage__foto img {
	transform: scale(1.04);
}

/* Animación al aparecer: las fotos suben una detrás de otra. */
.cs-js .cs-collage.cs-anim .cs-collage__foto {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 1s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cs-js .cs-collage.cs-anim .cs-collage__foto--secundaria {
	transform: translateY(90px);
	transition-delay: 0.3s;
}

.cs-js .cs-collage.cs-anim.is-visible .cs-collage__foto {
	opacity: 1;
	transform: none;
}

/* ---------- Vitrina de vinos ---------- */

.cs-vitrina {
	--cs-columnas: 6;
	--cs-separacion: 24px;

	display: grid;
	grid-template-columns: repeat(var(--cs-columnas), minmax(0, 1fr));
	gap: var(--cs-separacion);
}

.cs-vitrina__vino {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.cs-vitrina .cs-vitrina__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 350px;
}

/* La botella manda por altura; el margen transparente del PNG puede salirse de la columna. */
.cs-vitrina .cs-vitrina__media img.cs-vitrina__imagen {
	position: relative;
	z-index: 1;
	flex: none;
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: contain;
	transition: transform 0.45s ease;
	contain-intrinsic-size: none;
	/* Lo que sobresale de la columna no debe "robar" el ratón a la botella vecina. */
	pointer-events: none;
}

.cs-vitrina__cuadrado {
	--cs-cuadrado-x: -20%;

	position: absolute;
	z-index: 0;
	top: 30%;
	left: 50%;
	height: 52%;
	aspect-ratio: 1;
	background-color: #BEA177;
	opacity: 0;
	transform: translateX(calc(-50% + var(--cs-cuadrado-x)));
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.cs-vitrina--cuadrado-yes .cs-vitrina__vino:hover .cs-vitrina__cuadrado,
.cs-vitrina--cuadrado-yes .cs-vitrina__vino:focus-within .cs-vitrina__cuadrado {
	opacity: 1;
}

.cs-vitrina__vino:hover img.cs-vitrina__imagen,
.cs-vitrina__vino:focus-within img.cs-vitrina__imagen {
	transform: translateY(-6px);
}

.cs-vitrina__textos {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: 18px;
	text-align: center;
}

.cs-vitrina__nombre {
	margin: 0;
	text-transform: uppercase;
}

.cs-vitrina__nombre a {
	color: inherit;
	text-decoration: none;
}

.cs-vitrina__precio {
	margin-top: 4px;
}

.cs-vitrina__precio .amount,
.cs-vitrina__precio ins {
	text-decoration: none;
}

.cs-vitrina__boton {
	position: relative;
	z-index: 2;
	margin-top: 16px;
	transition: opacity 0.3s ease;
}

.cs-vitrina--boton-hover .cs-vitrina__boton {
	opacity: 0;
}

.cs-vitrina--boton-hover .cs-vitrina__vino:hover .cs-vitrina__boton,
.cs-vitrina--boton-hover .cs-vitrina__vino:focus-within .cs-vitrina__boton {
	opacity: 1;
}

@media (hover: none) {
	.cs-vitrina--boton-hover .cs-vitrina__boton {
		opacity: 1;
	}
}

/* Animación al aparecer: las botellas suben de una en una. */
.cs-js .cs-vitrina.cs-anim .cs-vitrina__vino {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--cs-i, 0) * 0.1s);
}

.cs-js .cs-vitrina.cs-anim.is-visible .cs-vitrina__vino {
	opacity: 1;
	transform: none;
}

.cs-vitrina__vacia {
	padding: 24px;
	border: 1px dashed currentColor;
	text-align: center;
}

@media (max-width: 767px) {
	.cs-vitrina--carrusel-yes .cs-vitrina {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
	}

	.cs-vitrina--carrusel-yes .cs-vitrina::-webkit-scrollbar {
		display: none;
	}

	/* Se ve un trozo de la siguiente botella para indicar que se puede deslizar. */
	.cs-vitrina--carrusel-yes .cs-vitrina__vino {
		flex: 0 0 calc((100% - var(--cs-separacion) * var(--cs-columnas)) / (var(--cs-columnas) + 0.4));
		scroll-snap-align: start;
	}
}

/* ---------- Línea de tiempo ---------- */

.cs-tiempo {
	--cs-tiempo-imagen: 160px;
	--cs-tiempo-hueco: 24px;
	--cs-tiempo-espacio: 18px;
	--cs-tiempo-linea: #D8CBB5;
	--cs-tiempo-grosor: 2px;
	--cs-tiempo-punto: #BEA177;
	--cs-tiempo-punto-tamano: 14px;

	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La línea vertical. */
.cs-tiempo::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--cs-tiempo-grosor);
	background: var(--cs-tiempo-linea);
	transform: translateX(-50%);
	transform-origin: top;
}

.cs-tiempo .cs-tiempo__hito {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: calc(var(--cs-tiempo-hueco) * 2);
	align-items: center;
	margin: 0 0 var(--cs-tiempo-espacio);
	padding: 0;
}

.cs-tiempo .cs-tiempo__hito:last-child {
	margin-bottom: 0;
}

.cs-tiempo .cs-tiempo__texto {
	position: relative;
	grid-row: 1;
	margin: 0;
}

.cs-tiempo__anio {
	font-weight: 700;
}

.cs-tiempo__ilustracion {
	grid-row: 1;
	display: block;
	line-height: 0;
}

.cs-tiempo .cs-tiempo__ilustracion img.cs-tiempo__imagen {
	width: var(--cs-tiempo-imagen);
	max-width: 100%;
	height: auto;
}

/* Texto a la izquierda: ilustración a la derecha. */
.cs-tiempo__hito--texto-izquierda .cs-tiempo__texto {
	grid-column: 1;
	text-align: right;
}

.cs-tiempo__hito--texto-izquierda .cs-tiempo__ilustracion {
	grid-column: 2;
	justify-self: start;
}

/* Texto a la derecha: ilustración a la izquierda. */
.cs-tiempo__hito--texto-derecha .cs-tiempo__texto {
	grid-column: 2;
	text-align: left;
}

.cs-tiempo__hito--texto-derecha .cs-tiempo__ilustracion {
	grid-column: 1;
	justify-self: end;
}

/* El punto, sobre la línea y a la altura del año. */
.cs-tiempo .cs-tiempo__texto::before {
	content: "";
	position: absolute;
	top: 0.35em;
	width: var(--cs-tiempo-punto-tamano);
	height: var(--cs-tiempo-punto-tamano);
	border-radius: 50%;
	background: var(--cs-tiempo-punto);
}

.cs-tiempo__hito--texto-izquierda .cs-tiempo__texto::before {
	right: calc(-1 * var(--cs-tiempo-hueco) - var(--cs-tiempo-punto-tamano) / 2);
}

.cs-tiempo__hito--texto-derecha .cs-tiempo__texto::before {
	left: calc(-1 * var(--cs-tiempo-hueco) - var(--cs-tiempo-punto-tamano) / 2);
}

/* Animación: la línea crece y los hitos aparecen de uno en uno. */
.cs-js .cs-tiempo.cs-anim::before {
	transform: translateX(-50%) scaleY(0);
	transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-js .cs-tiempo.cs-anim.is-visible::before {
	transform: translateX(-50%) scaleY(1);
}

.cs-js .cs-tiempo.cs-anim .cs-tiempo__hito {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(0.15s + var(--cs-i, 0) * 0.16s);
}

.cs-js .cs-tiempo.cs-anim.is-visible .cs-tiempo__hito {
	opacity: 1;
	transform: none;
}

/* Móvil: línea a la izquierda, texto e ilustración apilados. */
@media (max-width: 767px) {
	.cs-tiempo::before {
		left: var(--cs-tiempo-hueco);
	}

	.cs-tiempo .cs-tiempo__hito {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
		padding-left: calc(var(--cs-tiempo-hueco) * 2);
	}

	.cs-tiempo .cs-tiempo__hito .cs-tiempo__texto {
		grid-column: 1;
		grid-row: 1;
		text-align: left;
	}

	.cs-tiempo .cs-tiempo__hito .cs-tiempo__ilustracion {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
	}

	.cs-tiempo .cs-tiempo__hito .cs-tiempo__texto::before {
		right: auto;
		left: calc(-1 * var(--cs-tiempo-hueco) - var(--cs-tiempo-punto-tamano) / 2);
	}
}

/* ---------- Catálogo de vinos ---------- */
/* Los <button> llevan "button." en el selector para ganar al estilo global de botones del kit. */

.cs-catalogo {
	--cs-pestana-alto: 40px;
	--cs-botella-alto: 410px;
	--cs-botella-ficha: 306px;
	--cs-catalogo-recuadro: #D8BC88;
}

.cs-catalogo .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.cs-catalogo__pestanas {
	display: flex;
	gap: 13px;
	padding-top: calc(var(--cs-pestana-alto) * 0.5);
}

.cs-catalogo button.cs-catalogo__pestana,
.cs-catalogo button.cs-catalogo__pestana:hover,
.cs-catalogo button.cs-catalogo__pestana:focus {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	height: var(--cs-pestana-alto);
	margin: 0;
	padding: 0 3.4em 0 1.3em;
	border: 0;
	border-radius: 0;
	background: var(--cs-pestana-color);
	color: var(--cs-pestana-texto);
	box-shadow: none;
	cursor: pointer;
	transition: opacity 0.35s ease;
}

.cs-catalogo button.cs-catalogo__pestana:focus-visible {
	outline: 2px solid #4A4B4B;
	outline-offset: 3px;
}

.cs-catalogo__pestana-texto {
	position: relative;
	z-index: 1;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: lowercase;
	white-space: nowrap;
}

.cs-catalogo__pestana.is-activa .cs-catalogo__pestana-texto {
	font-weight: 700;
}

.cs-catalogo .cs-catalogo__pestana img.cs-catalogo__pestana-botella {
	position: absolute;
	right: 0.5em;
	bottom: 0;
	width: auto;
	height: 175%;
	max-width: none;
	transform: rotate(30deg);
	transform-origin: 50% 85%;
	pointer-events: none;
}

/* Con una ficha abierta, las demás pestañas se apagan. */
.cs-catalogo.is-ficha button.cs-catalogo__pestana:not(.is-activa) {
	opacity: 0.22;
}

.cs-catalogo.is-ficha button.cs-catalogo__pestana:not(.is-activa):hover {
	opacity: 0.6;
}

.cs-catalogo__panel {
	margin-top: clamp(40px, 6vw, 80.2px);
}

.cs-catalogo__panel[hidden],
.cs-catalogo__ficha[hidden],
.cs-catalogo__rejilla[hidden],
.cs-catalogo .cs-ficha[hidden],
.cs-catalogo .cs-catalogo__comprar[hidden] {
	display: none !important;
}

.cs-catalogo__vacia {
	text-align: center;
}

/* Rejilla de botellas. */
.cs-catalogo__rejilla {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(30px, 6vw + 10px, 262.5px);
}

.cs-catalogo button.cs-catalogo__botella,
.cs-catalogo button.cs-catalogo__mini {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: var(--cs-botella-alto);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

.cs-catalogo button.cs-catalogo__botella img,
.cs-catalogo button.cs-catalogo__mini img {
	position: relative;
	z-index: 1;
	width: auto;
	height: 100%;
	max-width: none;
	transition: transform 0.45s ease, opacity 0.35s ease, filter 0.35s ease;
}

.cs-catalogo button.cs-catalogo__botella:hover img,
.cs-catalogo button.cs-catalogo__botella:focus-visible img {
	transform: translateY(-8px);
}

/* Ficha. */
.cs-catalogo__ficha {
	display: grid;
	grid-template-columns: minmax(180px, 22%) minmax(0, 1fr);
	gap: clamp(30px, 4vw, 65.6px);
	animation: cs-aparece 0.6s ease both;
}

.cs-catalogo__lista {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 2vw, 29.2px);
}

.cs-catalogo button.cs-catalogo__mini {
	height: var(--cs-botella-ficha);
}

.cs-catalogo button.cs-catalogo__mini img {
	opacity: 0.3;
	filter: grayscale(1);
}

.cs-catalogo button.cs-catalogo__mini:hover img {
	opacity: 0.7;
}

.cs-catalogo button.cs-catalogo__mini.is-elegido img {
	opacity: 1;
	filter: none;
}

.cs-catalogo__recuadro {
	position: absolute;
	z-index: 0;
	top: 42%;
	right: 52%;
	height: 42%;
	aspect-ratio: 0.67;
	background: var(--cs-catalogo-recuadro);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.cs-catalogo__mini.is-elegido .cs-catalogo__recuadro {
	opacity: 1;
}

.cs-catalogo .cs-catalogo__comprar {
	margin-top: clamp(10px, 1.5vw, 21.9px);
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	font-size: clamp(24px, 2.2vw + 17.8px, 43.8px);
	letter-spacing: 3px;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.12em 0.4em;
}

.cs-ficha {
	animation: cs-aparece 0.5s ease both;
}

.cs-ficha__iconos {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: clamp(14px, 2.2vw, 32.1px);
	margin: 0 0 clamp(16px, 1.6vw, 21.9px);
	padding: 0;
	list-style: none;
}

.cs-ficha__icono {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 1vw, 13.1px);
	margin: 0;
	color: #606060;
}

.cs-ficha__icono-dibujo {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: clamp(30px, 2.8vw, 39.4px);
}

.cs-ficha .cs-ficha__icono-dibujo img.cs-ficha__icono-img {
	width: auto;
	height: 100%;
	max-width: none;
}

.cs-ficha__icono-dibujo svg.cs-ficha__icono-svg {
	width: auto;
	height: 112%;
	stroke-width: 1.4;
}

.cs-ficha__icono-texto {
	font-family: Optima, Candara, sans-serif;
	font-size: clamp(13px, 0.5vw + 11.4px, 15.3px);
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.cs-ficha__variedades {
	margin: 0 0 1.4em;
}

.cs-ficha__texto p {
	margin: 0;
	text-align: justify;
}

.cs-ficha__texto h4,
.cs-ficha__texto p > strong:first-child {
	display: block;
	margin: 1.3em 0 0;
	font-family: inherit;
	font-size: inherit;
	font-style: normal;
	font-weight: 700;
	line-height: inherit;
	color: inherit;
	text-transform: uppercase;
}

.cs-ficha__texto h4:first-child {
	margin-top: 0;
}

.cs-ficha__texto h4::after {
	content: ":";
}

.cs-ficha__texto a {
	color: inherit;
	text-decoration: underline;
}

@keyframes cs-aparece {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* Animación de las botellas al aparecer y al cambiar de pestaña. */
.cs-js .cs-catalogo.cs-anim .cs-catalogo__botella {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--cs-i, 0) * 0.12s);
}

.cs-js .cs-catalogo.cs-anim.is-visible .cs-catalogo__botella {
	opacity: 1;
	transform: none;
}

.cs-catalogo__panel.is-entrando .cs-catalogo__botella {
	animation: cs-aparece 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--cs-i, 0) * 0.1s);
}

@media (max-width: 1024px) {
	.cs-catalogo__pestanas {
		flex-wrap: wrap;
	}

	.cs-catalogo button.cs-catalogo__pestana {
		flex: 1 1 calc(50% - 13px);
	}
}

@media (max-width: 767px) {
	.cs-catalogo {
		--cs-pestana-alto: 44px;
		--cs-botella-alto: 300px;
		--cs-botella-ficha: 180px;
	}

	.cs-catalogo__pestanas {
		gap: 10px;
		row-gap: 26px;
	}

	.cs-catalogo button.cs-catalogo__pestana {
		flex: 1 1 100%;
	}

	.cs-catalogo__ficha {
		grid-template-columns: minmax(0, 1fr);
	}

	.cs-catalogo__lista {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.cs-catalogo .cs-catalogo__comprar {
		flex-basis: 100%;
		text-align: center;
	}
}

/* ---------- Ficha de vino (plantilla de producto) ---------- */

.cs-producto .cs-producto__botella {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 452px;
}

.cs-producto .cs-producto__botella img.cs-producto__imagen {
	position: relative;
	z-index: 1;
	width: auto;
	height: 100%;
	max-width: none;
}

.cs-producto__recuadro {
	position: absolute;
	z-index: 0;
	top: 30%;
	right: 52%;
	height: 42%;
	aspect-ratio: 0.67;
	background: #D8BC88;
}

.cs-producto--anim .cs-producto__imagen {
	animation: cs-aparece 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.cs-producto--anim .cs-producto__recuadro {
	animation: cs-recuadro 0.9s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	transform-origin: right center;
}

@keyframes cs-recuadro {
	from { transform: scaleX(0); }
	to   { transform: none; }
}

/* ---------- Contenido incrustado ---------- */

.cs-incrustado__caja {
	background: #FFFFFF;
	padding: 20px;
}

.cs-incrustado .cs-incrustado__marco {
	display: block;
	width: 100%;
	height: 760px;
	border: 0;
}

.cs-incrustado__alternativa {
	margin: 14px 0 0;
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	text-align: center;
}

.cs-incrustado__alternativa a {
	color: #606060;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cs-incrustado__alternativa a:hover {
	color: #9F8552;
}

.cs-incrustado__vacio {
	padding: 24px;
	border: 1px dashed currentColor;
	text-align: center;
}

/* ---------- Accesibilidad: sin movimiento si el usuario lo pide ---------- */

@media (prefers-reduced-motion: reduce) {
	.cs-cabecera--anim img.cs-cabecera__imagen,
	.cs-cabecera--anim .cs-cabecera__linea {
		animation: none;
	}

	.cs-catalogo__ficha,
	.cs-ficha,
	.cs-catalogo__panel.is-entrando .cs-catalogo__botella,
	.cs-producto--anim .cs-producto__imagen,
	.cs-producto--anim .cs-producto__recuadro {
		animation: none;
	}

	.cs-js .cs-collage.cs-anim .cs-collage__foto,
	.cs-js .cs-vitrina.cs-anim .cs-vitrina__vino,
	.cs-js .cs-tiempo.cs-anim .cs-tiempo__hito,
	.cs-js .cs-catalogo.cs-anim .cs-catalogo__botella {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.cs-collage .cs-collage__foto img,
	.cs-vitrina .cs-vitrina__media img.cs-vitrina__imagen,
	.cs-vitrina__cuadrado,
	.cs-vitrina__boton {
		transition: none;
	}
}