/*! BaseBlue — Home · 50 La planta en renders. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   CARRUSEL FUERA DE LIENZO

   Un carril con desplazamiento nativo. La primera diapositiva se alinea con
   la columna 1 (el margen de la rejilla, también más allá del tope de
   192 rem) y el resto sale por el borde derecho, sin margen. Todas en el
   mismo marco 4:5, con paralaje horizontal por dentro.
   ========================================================================== */

.rend {
	--rend-h: clamp(32rem, 62svh, 72rem);
	--rend-start: calc(var(--margin) + max(0px, (100vw - var(--max)) / 2));
	overflow-x: clip;
}
.rend figure { margin: 0; }

.rend__rail {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--rend-start);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	/* El gesto vertical sigue siendo de la página. */
	touch-action: pan-x pan-y;
	outline-offset: -0.4rem;
}
.rend__rail::-webkit-scrollbar { display: none; }
.rend__rail:focus-visible { outline: 2px solid var(--accent); }
/* Arrastre con ratón (lo pone el JS): sin imán mientras se arrastra, o el
   carril saltaría a cada diapositiva a mitad de gesto. */
.rend__rail.is-grab { cursor: grab; }
.rend__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

.rend__list {
	display: flex;
	gap: var(--gutter);
	width: max-content;
	margin: 0;
	padding: 0 var(--rend-start);
	list-style: none;
}
.rend__slide { flex: none; scroll-snap-align: start; }
/* Un solo marco para todas: 4:5 a la altura común. La imagen lo cubre
   (sin deformarse) y va a 1,15 para que el paralaje horizontal (el JS la
   mueve por dentro, ±6,5 % del marco) nunca enseñe un canto. */
.rend__frame {
	position: relative;
	height: var(--rend-h);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--r-media);
	background: var(--bb-paper-2);
}
.rend__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fx, 50%) 50%;
	transform: scale(1.15);
	-webkit-user-drag: none;
}
.rend__rail.is-par .rend__frame img { will-change: transform; }

/* El revelado de imagen del sitio (RONDA4 §2.6): recorte de abajo arriba y
   la imagen que se asienta por dentro, escalonado por diapositiva. */
.rend__list[data-reveal] .rend__slide {
	clip-path: inset(100% 0 0 0 round var(--r-m));
	transition: clip-path var(--dur-4) var(--ease-io) calc(var(--i, 0) * var(--stagger));
}
.rend__list[data-reveal] .rend__slide img {
	scale: 1.06;
	transition: scale 1.4s var(--ease-out) calc(var(--i, 0) * var(--stagger));
}
.rend__list[data-reveal].is-in .rend__slide { clip-path: inset(0 round var(--r-m)); }
.rend__list[data-reveal].is-in .rend__slide img { scale: 1; }
.rend__cap {
	max-width: calc(var(--rend-h) * 0.8);
	margin-top: 1.2rem;
	font-size: var(--t-small);
	font-weight: 300;
	line-height: 1.4;
	color: var(--muted);
}

/* ================================================================ Controles */
/* Contador a la izquierda, botones a la derecha y, entre los dos, el filete
   con el indicador que avanza con la posición (el gesto de línea del sitio). */

.rend__bar {
	display: flex;
	align-items: center;
	gap: clamp(1.6rem, 2vw, 3.2rem);
	margin-top: clamp(2.4rem, 4svh, 4rem);
}
.rend__count {
	margin: 0;
	font-size: var(--t-small);
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}
.rend__rule {
	position: relative;
	flex: 1;
	height: 1px;
	background: var(--rule);
	overflow: hidden;
}
.rend__ind {
	position: absolute;
	inset: 0;
	background: currentColor;
	transform-origin: 0 50%;
	transform: scaleX(0.14);
}
.rend__btns { display: flex; gap: 0.8rem; }
.rend__btn {
	display: grid;
	place-items: center;
	width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(10, 27, 43, 0.07);
	color: var(--bb-navy);
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.rend__btn svg { width: 1.6rem; height: 1.6rem; }
.rend__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rend__btn[aria-disabled="true"] { opacity: 0.36; cursor: default; }
@media (hover: hover) {
	.rend__btn:not([aria-disabled="true"]):hover { background: var(--bb-navy); color: var(--bb-paper); }
}

/* ================================================================= Retrato */
/* En retrato el marco 4:5 llega como mucho a 88 vw de ancho. */
@media (orientation: portrait) {
	.rend { --rend-h: min(56svh, 110vw); }
}

@media (prefers-reduced-motion: reduce) {
	.rend__rail { scroll-behavior: auto; }
	.rend__btn { transition: none; }
	.rend__list[data-reveal] .rend__slide { clip-path: none; transition: none; }
	.rend__list[data-reveal] .rend__slide img { scale: 1; transition: none; }
	.rend__frame img { transform: none; }
}