/**
 * SR Galería de producto.
 *
 * Sin librerías. El carrusel es un contenedor con desplazamiento e imán: no
 * hay animaciones a mano ni cálculos de posición, así que el arrastre en móvil
 * es el nativo del sistema y se siente como tal.
 */

.srg {
	--srg-prop-1-1: 1 / 1;
	--srg-prop-4-3: 4 / 3;
	--srg-prop-3-4: 3 / 4;
	--srg-prop-16-9: 16 / 9;
	--srg-prop-9-16: 9 / 16;
	--srg-prop-libre: auto;

	--srg-prop: var(--srg-prop-1-1);
	--srg-mini-prop: var(--srg-prop-1-1);
	--srg-minis: 5;

	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	max-width: 100%;
}

.srg * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * La escena
 * ------------------------------------------------------------------ */

.srg__escena {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	background: #fff;
}

.srg__carril {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.srg__carril::-webkit-scrollbar {
	display: none;
}

.srg__hueco {
	position: relative;
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: var(--srg-prop);
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* Sin proporción fija manda el propio archivo. */
.srg[style*="--srg-prop-libre"] .srg__hueco,
.srg__hueco[data-libre] {
	aspect-ratio: auto;
}

.srg__medio {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.srg__medio--hueco {
	background: #EEF1F5;
}

.srg__externo {
	position: relative;
	width: 100%;
	height: 100%;
}

.srg__externo iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------------------
 * Marca de reproducción
 * ------------------------------------------------------------------ */

.srg__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(10, 14, 20, .55);
	color: #fff;
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: opacity .15s ease, transform .15s ease;
	z-index: 3;
}

.srg__play svg {
	width: 45%;
	height: 45%;
	margin-left: 6%;
}

.srg__play:hover {
	transform: translate(-50%, -50%) scale(1.06);
}

.srg__hueco.is-reproduciendo .srg__play {
	opacity: 0;
	pointer-events: none;
}

.srg__play--mini {
	top: auto;
	right: 4px;
	bottom: 4px;
	left: auto;
	width: 18px;
	height: 18px;
	transform: none;
	pointer-events: none;
}

.srg__play--mini:hover {
	transform: none;
}

/* ------------------------------------------------------------------
 * Ampliar
 * ------------------------------------------------------------------ */

/* Una capa transparente sobre la imagen: se puede pulsar en cualquier punto,
   y así el vídeo conserva su propio botón por encima. */
/*
 * La capa de ampliar es un botón que ocupa toda la imagen, así que cualquier
 * borde, sombra o contorno que el tema ponga sobre los botones dibuja un marco
 * alrededor de la foto entera. Se anulan todos, también al pasar por encima y
 * al recibir el foco. El aviso de foco lo da la lupa, que se ve mucho mejor.
 */
.srg__ampliar,
.srg__ampliar:hover,
.srg__ampliar:focus,
.srg__ampliar:active {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	text-decoration: none;
}

.srg__ampliar:focus-visible ~ .srg__lupa {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Sobre un vídeo la capa se aparta: ahí tocar tiene que reproducir, que es lo
 * que todo el mundo espera. Para ampliarlo está la lupa, que sigue encima.
 */
.srg--video .srg__ampliar {
	pointer-events: none;
}

.srg__ampliar {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
	z-index: 1;
}

.srg__lupa {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, .92);
	color: #0A0E14;
	cursor: zoom-in;
	z-index: 5;
}

.srg__lupa svg {
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------------------------
 * Flechas y puntos
 * ------------------------------------------------------------------ */

.srg__flecha {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #0A0E14;
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 4;
}

.srg__flecha svg {
	width: 55%;
	height: 55%;
}

.srg__flecha--ant { left: 10px; }
.srg__flecha--sig { right: 10px; }

.srg__escena:hover .srg__flecha,
.srg__flecha:focus-visible {
	opacity: 1;
}

.srg__flecha[disabled] {
	opacity: 0 !important;
	pointer-events: none;
}

/* En táctil no hay «pasar por encima»: o se ven siempre o no existen. */
@media ( hover: none ) {
	.srg__flecha {
		opacity: 1;
	}
}

.srg__puntos {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	z-index: 4;
}

.srg__punto {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #C8CED5;
	cursor: pointer;
	transition: transform .15s ease;
}

.srg__punto.is-activo {
	background: #0A0E14;
	transform: scale(1.3);
}

/* ------------------------------------------------------------------
 * Miniaturas
 * ------------------------------------------------------------------ */

.srg__minis {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
	overflow: auto;
	scrollbar-width: thin;
}

.srg__mini {
	position: relative;
	flex: 0 0 calc((100% - (var(--srg-minis) - 1) * 10px) / var(--srg-minis));
	aspect-ratio: var(--srg-mini-prop);
	padding: 0;
	overflow: hidden;
	border: 1px solid #E2E5EA;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, opacity .15s ease;
}

.srg__mini-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.srg__mini-img--hueco {
	background: #EEF1F5;
}

.srg__mini.is-activa {
	border-color: #0A0E14;
	border-width: 2px;
}

.srg__mini:focus-visible,
.srg__flecha:focus-visible,
.srg__punto:focus-visible,
.srg__play:focus-visible,
.srg__lupa:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Los temas suelen vestir todo <button>. Aquí no hay ningún botón con caja
   salvo los que se dibujan a propósito. */
.srg button {
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

/* Con las miniaturas al lado, la tira se apila y la escena manda. */
.srg[style*="row"] .srg__minis,
.srg--lado .srg__minis {
	flex-direction: column;
}

.srg--sin-minis .srg__minis {
	display: none;
}

.srg__vacio {
	margin: 0;
	padding: 24px;
	border: 1px dashed currentColor;
	opacity: .6;
	font-size: 14px;
	text-align: center;
}

/* ------------------------------------------------------------------
 * El visor
 * ------------------------------------------------------------------ */

.srg-visor {
	--srg-velo: rgba(10, 14, 20, .94);
	--srg-visor-ctrl: #F2F5F9;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--srg-velo);
	opacity: 0;
	transition: opacity .18s ease;
}

.srg-visor[hidden] {
	display: none;
}

.srg-visor.is-abierto {
	opacity: 1;
}

.srg-visor__lienzo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 56px 16px;
}

.srg-visor__lienzo img,
.srg-visor__lienzo video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.srg-visor__lienzo iframe {
	width: min(100%, 1100px);
	aspect-ratio: 16 / 9;
	border: 0;
}

/* Un vídeo vertical no debe estirarse a lo ancho de un monitor. */
.srg-visor__lienzo video {
	width: auto;
	height: 100%;
}

.srg-visor__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--srg-visor-ctrl);
	cursor: pointer;
	transition: background-color .15s ease;
}

.srg-visor__btn:hover {
	background: rgba(255, 255, 255, .2);
}

.srg-visor__btn:focus-visible {
	outline: 2px solid var(--srg-visor-ctrl);
	outline-offset: 2px;
}

.srg-visor__btn svg {
	width: 22px;
	height: 22px;
}

.srg-visor__cerrar { top: 14px; right: 14px; }
.srg-visor__ant    { top: 50%; left: 14px; transform: translateY(-50%); }
.srg-visor__sig    { top: 50%; right: 14px; transform: translateY(-50%); }

.srg-visor__cuenta {
	position: absolute;
	bottom: 16px;
	left: 50%;
	color: var(--srg-visor-ctrl);
	font: 600 13px/1 system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
	opacity: .8;
	transform: translateX(-50%);
}

@media ( max-width: 600px ) {
	.srg-visor__ant,
	.srg-visor__sig {
		top: auto;
		bottom: 14px;
		transform: none;
	}

	.srg-visor__cuenta {
		bottom: 28px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.srg-visor,
	.srg__flecha,
	.srg__punto,
	.srg__play,
	.srg__mini {
		transition: none;
	}

	.srg__carril {
		scroll-behavior: auto;
	}
}