/* VL Google Reviews Carousel — basado en el diseño de referencia (Figma) */
.vlgrc {
	--vlgrc-orange: #DC5511;
	--vlgrc-green: #314F43;
	--vlgrc-white: #FFFFFF;
	--vlgrc-avatar-bg: #5F5F5F;
	--vlgrc-per: 3;            /* tarjetas visibles */
	--vlgrc-gap: 38px;
	--vlgrc-card-h: 512px;
	--vlgrc-footer-h: 142px;
	--vlgrc-radius: 8px;
	--vlgrc-duration: 600ms;
	--vlgrc-bleed: 60px;       /* margen lateral para la sombra */
	position: relative;
	font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

.vlgrc *,
.vlgrc *::before,
.vlgrc *::after { box-sizing: border-box; }

/* Espacio extra (bleed) para que la sombra de 84px no se recorte;
   los bordes se desvanecen con una máscara. */
.vlgrc__viewport {
	overflow: hidden;
	margin: -70px calc(var(--vlgrc-bleed) * -1) -80px;
	padding: 70px var(--vlgrc-bleed) 120px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--vlgrc-bleed), #000 calc(100% - var(--vlgrc-bleed)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--vlgrc-bleed), #000 calc(100% - var(--vlgrc-bleed)), transparent 100%);
	touch-action: pan-y;
	cursor: grab;
}
.vlgrc.is-dragging .vlgrc__viewport { cursor: grabbing; }

.vlgrc__track {
	display: flex;
	gap: var(--vlgrc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
	user-select: none;
	isolation: isolate; /* las sombras quedan detrás de todas las tarjetas */
}
.vlgrc__track.is-animating { transition: transform var(--vlgrc-duration) cubic-bezier(.25, .8, .25, 1); }

.vlgrc__slide {
	flex: 0 0 calc((100% - (var(--vlgrc-per) - 1) * var(--vlgrc-gap)) / var(--vlgrc-per));
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Sombra en capa inferior para que no se encime sobre la tarjeta vecina */
.vlgrc .vlgrc__slide::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--vlgrc-card-h);
	border-radius: var(--vlgrc-radius);
	box-shadow: 0 22px 84px rgba(225, 225, 225, .91);
	z-index: -1;
	pointer-events: none;
}
.vlgrc__slide::before,
.vlgrc__slide::marker { content: none; }

/* Tarjeta */
.vlgrc__card {
	display: flex;
	flex-direction: column;
	height: var(--vlgrc-card-h);
	background: var(--vlgrc-white);
	border-radius: var(--vlgrc-radius);
	overflow: hidden;
}

.vlgrc__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 64px 56px 24px;
}

/* Rating */
.vlgrc__stars {
	display: flex;
	gap: 8px;
	height: 16px;
	margin-bottom: 22px;
	color: var(--vlgrc-orange);
}
.vlgrc__star { display: inline-flex; width: 18px; height: 16px; line-height: 0; }
.vlgrc__star svg { width: 100%; height: 100%; display: block; }
.vlgrc__star.is-off { color: #E6D3C9; }

/* Texto (Body) */
.vlgrc__text {
	margin: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	line-height: 26px;
	letter-spacing: .03em;
	color: var(--vlgrc-green);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 9;
	line-clamp: 9;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* Franja naranja */
.vlgrc__footer {
	flex: 0 0 var(--vlgrc-footer-h);
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 0 24px 0 35px;
	background: var(--vlgrc-orange);
	border-radius: 0 0 var(--vlgrc-radius) var(--vlgrc-radius);
}

.vlgrc__avatar {
	position: relative;
	flex: 0 0 103px;
	width: 103px;
	height: 103px;
	border-radius: 50%;
	border: 1px solid var(--vlgrc-white);
	background: var(--vlgrc-avatar-bg);
	overflow: hidden;
	filter: drop-shadow(0 21px 10px rgba(4, 4, 4, .051));
}
.vlgrc__avatar::before {
	content: attr(data-initial);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 40px;
	color: var(--vlgrc-white);
}
.vlgrc__avatar img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.vlgrc__meta { min-width: 0; color: var(--vlgrc-white); }
.vlgrc .vlgrc__name {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 29px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vlgrc-white);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.vlgrc__sub {
	display: block;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: var(--vlgrc-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Flechas */
.vlgrc__arrow {
	position: absolute;
	top: calc(var(--vlgrc-card-h) / 2);
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	padding: 12px;
	border: 0;
	border-radius: 50%;
	background: var(--vlgrc-white);
	color: var(--vlgrc-orange);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
	cursor: pointer;
	transition: background .2s, color .2s;
}
.vlgrc__arrow svg { width: 100%; height: 100%; display: block; }
.vlgrc__arrow:hover,
.vlgrc__arrow:focus-visible { background: var(--vlgrc-orange); color: var(--vlgrc-white); outline: none; }
.vlgrc__arrow--prev { left: -24px; }
.vlgrc__arrow--next { right: -24px; }

/* Responsive */
@media (max-width: 1100px) {
	.vlgrc { --vlgrc-per: 2; --vlgrc-gap: 28px; --vlgrc-bleed: 24px; }
	.vlgrc__arrow--prev { left: 8px; }
	.vlgrc__arrow--next { right: 8px; }
}
@media (max-width: 700px) {
	.vlgrc { --vlgrc-per: 1; --vlgrc-gap: 20px; --vlgrc-card-h: 470px; --vlgrc-footer-h: 120px; --vlgrc-bleed: 0px; padding-bottom: 64px; }
	.vlgrc__body { padding: 44px 32px 20px; }
	.vlgrc__text { font-size: 19px; line-height: 24px; -webkit-line-clamp: 10; line-clamp: 10; }
	.vlgrc__footer { gap: 20px; padding-left: 24px; }
	.vlgrc__avatar { flex-basis: 84px; width: 84px; height: 84px; }
	.vlgrc .vlgrc__name { font-size: 21px; line-height: 26px; }
	.vlgrc__arrow { top: auto; bottom: 0; transform: none; width: 44px; height: 44px; padding: 11px; }
	.vlgrc__arrow--prev { left: calc(50% - 54px); }
	.vlgrc__arrow--next { right: calc(50% - 54px); }
}

@media (prefers-reduced-motion: reduce) {
	.vlgrc { --vlgrc-duration: 1ms; }
}