:root {
	--sc-brown-1: #7A3417;
	--sc-brown-2: #6C625B;
	--sc-brown-3: #211E1B;
	--sc-cream: #D8C8B2;
	--sc-caption: #e8dac8;
	--sc-teal: #245A63;
}

/* ── Reset interacción (evita rosa/rojo del browser o Elementor) ── */
.reveal-carousel button,
.lightbox-overlay button {
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	box-shadow: none;
}

.reveal-carousel button:focus,
.lightbox-overlay button:focus {
	outline: none;
	box-shadow: none;
}

.reveal-carousel .carousel-arrow:focus:not(:focus-visible) {
	background: #fff;
	border-color: var(--sc-brown-1);
	color: var(--sc-brown-1);
}

.lightbox-overlay .lightbox-nav:focus:not(:focus-visible),
.lightbox-overlay .lightbox-close:focus:not(:focus-visible) {
	background: rgba(255, 255, 255, .1);
	border-color: transparent;
	color: #fff;
}

.reveal-carousel button:focus-visible,
.lightbox-overlay button:focus-visible {
	outline: 2px solid var(--sc-cream);
	outline-offset: 3px;
}

.reveal-carousel button svg,
.lightbox-overlay button svg {
	stroke: currentColor;
	flex-shrink: 0;
}

/* ── Carrusel: grilla imaginaria de 5 columnas (3 tablet, 1 mobile) ── */
.reveal-carousel {
	--carousel-gap: clamp(14px, 2.5vw, 22px);
	--carousel-columns: 5;
	--carousel-slot: calc((100% - (var(--carousel-columns) - 1) * var(--carousel-gap)) / var(--carousel-columns));
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.5vw, 14px);
	width: 100%;
	max-width: 100%;
	padding-bottom: clamp(28px, 4vw, 36px);
	box-sizing: border-box;
}

.carousel-track-wrap {
	overflow: hidden;
	width: 100%;
	min-width: 0;
	flex: 1 1 auto;
}

.carousel-track {
	display: grid;
	grid-template-columns: repeat(var(--carousel-columns), minmax(0, 1fr));
	gap: var(--carousel-gap);
	align-items: stretch;
	overflow: visible;
	padding: 4px 2px 8px;
}

.reveal-item {
	min-width: 0;
	width: auto;
	user-select: none;
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.5vw, 14px);
}

/* Única card: misma anchura de slot, centrada en la grilla */
.reveal-carousel[data-count="1"] .reveal-item {
	grid-column: calc((var(--carousel-columns) + 1) / 2);
}

/* Más de 5: scroll horizontal manteniendo ancho de slot */
.reveal-carousel--scroll .carousel-track {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	grid-template-columns: unset;
}

.reveal-carousel--scroll .carousel-track::-webkit-scrollbar { display: none; }

.reveal-carousel--scroll .reveal-item {
	flex: 0 0 var(--carousel-slot);
	width: var(--carousel-slot);
	min-width: var(--carousel-slot);
	scroll-snap-align: start;
	grid-column: auto;
}

.reveal-item__heading {
	margin: 0;
	font-family: "Schibsted Grotesk", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: clamp(13px, 1.4cqw, 15px);
	line-height: 1.35;
	letter-spacing: .01em;
	color: var(--sc-caption);
}

.reveal-card {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
	border-radius: clamp(6px, 1vw, 12px);
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(33, 30, 27, 0.08);
	transition: transform .25s ease, box-shadow .25s ease;
}

.reveal-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(33, 30, 27, 0.14);
}

.reveal-card:focus-visible {
	outline: 2px solid var(--sc-cream);
	outline-offset: 3px;
}

.reveal-img {
	width: 100%;
	aspect-ratio: 235/359;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.reveal-item__text {
	margin: 0;
	font-family: "Schibsted Grotesk", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: clamp(11px, 1.2cqw, 13px);
	line-height: 1.55;
	letter-spacing: .01em;
	color: var(--sc-caption);
}

/* Chevrones del carrusel */
.carousel-arrow {
	flex: 0 0 auto;
	width: clamp(38px, 8vw, 44px);
	height: clamp(38px, 8vw, 44px);
	margin-top: 0;
	border-radius: 50%;
	border: 1px solid var(--sc-brown-1);
	background: #fff;
	color: var(--sc-brown-1);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.carousel-arrow:hover {
	background: var(--sc-brown-1);
	border-color: var(--sc-brown-1);
	color: #fff;
}

.carousel-arrow:active:not(:disabled) {
	background: var(--sc-brown-3);
	border-color: var(--sc-brown-3);
	color: var(--sc-cream);
	transform: scale(.96);
}

.carousel-arrow:focus-visible {
	background: var(--sc-brown-1);
	border-color: var(--sc-brown-1);
	color: #fff;
}

.carousel-arrow:disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.carousel-dots {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 10px;
}

.carousel-dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sc-cream);
	cursor: pointer;
	transition: transform .2s ease, background .2s ease;
}

.carousel-dots span:hover {
	background: var(--sc-brown-2);
}

.carousel-dots span:active {
	background: var(--sc-brown-3);
	transform: scale(1.1);
}

.carousel-dots span.active {
	background: var(--sc-brown-1);
	transform: scale(1.2);
}

.carousel-dots span:focus-visible {
	outline: 2px solid var(--sc-brown-1);
	outline-offset: 3px;
}

/* ── Lightbox ── */
.lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 15, 12, .94);
	display: none;
	align-items: stretch;
	justify-content: center;
	z-index: 999999;
	padding:
		max(12px, env(safe-area-inset-top))
		max(12px, env(safe-area-inset-right))
		max(12px, env(safe-area-inset-bottom))
		max(12px, env(safe-area-inset-left));
	box-sizing: border-box;
}

.lightbox-overlay.is-open {
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
}

.lightbox-panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1100px;
	height: 100%;
	min-height: 0;
	padding: clamp(12px, 3vw, 36px);
	box-sizing: border-box;
}

.lightbox-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	min-width: 0;
	max-height: 100%;
}

.lightbox-viewport {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-height: min(82vh, 820px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: clamp(8px, 1.2vw, 14px);
	background: rgba(255, 255, 255, .03);
	touch-action: none;
	cursor: grab;
}

.lightbox-viewport.is-dragging { cursor: grabbing; }

.lightbox-pan-zoom {
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: center center;
	will-change: transform;
	touch-action: none;
}

.lightbox-img {
	max-width: 100%;
	max-height: min(82vh, 820px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: clamp(6px, 1vw, 10px);
	transform-origin: center center;
	will-change: transform;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.lightbox-close {
	position: absolute;
	top: clamp(8px, 2vh, 18px);
	right: clamp(8px, 2vw, 18px);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 1px solid transparent;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.lightbox-close:hover {
	background: rgba(122, 52, 23, .45);
	border-color: rgba(216, 200, 178, .35);
	color: var(--sc-cream);
}

.lightbox-close:active {
	background: var(--sc-brown-1);
	border-color: var(--sc-brown-1);
	color: #fff;
	transform: scale(.96);
}

.lightbox-close:focus-visible {
	background: rgba(122, 52, 23, .55);
	border-color: var(--sc-cream);
	color: var(--sc-cream);
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 1px solid transparent;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}

.lightbox-nav:hover {
	background: rgba(122, 52, 23, .45);
	border-color: rgba(216, 200, 178, .35);
	color: var(--sc-cream);
}

.lightbox-nav:active {
	background: var(--sc-brown-1);
	border-color: var(--sc-brown-1);
	color: #fff;
	transform: translateY(-50%) scale(.96);
}

.lightbox-nav:focus-visible {
	background: rgba(122, 52, 23, .55);
	border-color: var(--sc-cream);
	color: var(--sc-cream);
}

.lightbox-nav--prev { left: clamp(4px, 1.5vw, 16px); }
.lightbox-nav--next { right: clamp(4px, 1.5vw, 16px); }

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
	.reveal-carousel {
		--carousel-columns: 1;
		gap: 6px;
		padding-bottom: 32px;
	}

	.reveal-carousel:not([data-count="1"]) .carousel-track {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		grid-template-columns: unset;
	}

	.reveal-carousel:not([data-count="1"]) .carousel-track::-webkit-scrollbar { display: none; }

	.reveal-carousel:not([data-count="1"]) .reveal-item {
		flex: 0 0 var(--carousel-slot);
		width: var(--carousel-slot);
		min-width: var(--carousel-slot);
		scroll-snap-align: center;
		grid-column: auto;
	}

	.reveal-carousel[data-count="1"] .reveal-item {
		grid-column: 1;
	}

	.carousel-arrow {
		width: 36px;
		height: 36px;
		margin-top: 0;
	}

	.carousel-arrow svg {
		width: 20px;
		height: 20px;
	}

	.lightbox-panel {
		padding: 44px 10px 16px;
		align-items: stretch;
	}

	.lightbox-viewport {
		max-height: min(72vh, 560px);
		border-radius: 10px;
	}

	.lightbox-img {
		max-height: min(72vh, 560px);
	}

	.lightbox-nav {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		width: 42px;
		height: 42px;
	}

	.lightbox-nav:active {
		transform: translateY(-50%) scale(.96);
	}

	.lightbox-nav:focus-visible {
		transform: translateY(-50%);
	}

	.lightbox-nav--prev { left: 6px; }
	.lightbox-nav--next { right: 6px; }

	.lightbox-close {
		top: max(8px, env(safe-area-inset-top));
		right: 8px;
		width: 42px;
		height: 42px;
	}
}

/* ── Tablet (768px – 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
	.reveal-carousel {
		--carousel-columns: 3;
		gap: 10px;
		padding-bottom: 36px;
	}

	.carousel-arrow {
		width: 42px;
		height: 42px;
	}

	.lightbox-panel {
		padding: 40px 24px 24px;
		max-width: 92vw;
	}

	.lightbox-viewport {
		max-height: min(78vh, 640px);
	}

	.lightbox-img {
		max-height: min(78vh, 640px);
	}

	.lightbox-nav {
		width: 46px;
		height: 46px;
	}

	.lightbox-nav--prev { left: 12px; }
	.lightbox-nav--next { right: 12px; }

	.reveal-carousel--scroll-tablet .carousel-track {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		grid-template-columns: unset;
	}

	.reveal-carousel--scroll-tablet .carousel-track::-webkit-scrollbar { display: none; }

	.reveal-carousel--scroll-tablet .reveal-item {
		flex: 0 0 var(--carousel-slot);
		width: var(--carousel-slot);
		min-width: var(--carousel-slot);
		scroll-snap-align: start;
		grid-column: auto;
	}
}

/* ── Desktop (≥ 1024px) ── */
@media (min-width: 1024px) {
	.carousel-arrow,
	.carousel-dots {
		display: none;
	}

	.reveal-carousel {
		padding-bottom: 0;
	}

	.carousel-track {
		padding: 0;
	}

	.lightbox-viewport {
		max-height: min(86vh, 820px);
	}

	.lightbox-img {
		max-height: min(86vh, 820px);
	}
}