/* =========================================================
   Quirulloc · Carrusel de testimonios
   Mobile first. Colores y tamanos llegan desde Elementor
   como variables o como <style> en linea.
   ========================================================= */

.qct{
	--qct-photo:104px;
	--qct-ease:cubic-bezier(.22,.8,.28,1);

	padding:48px 18px 40px;
	background-image:linear-gradient(115deg,#a9ebc9 0%,#6ec79c 45%,#2a9270 100%);
}

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

/* ---------- Encabezado ---------- */

.qct__head{
	text-align:center;
	margin-bottom:34px;
}

.qct__title{
	margin:0;
	font-size:clamp(1.9rem,7.5vw,3rem);
	font-weight:800;
	letter-spacing:-.02em;
	line-height:1.05;
	color:#0f4a37;
}

.qct__rule{
	display:block;
	width:64px;height:3px;
	margin:14px auto 0;
	border-radius:2px;
	background-color:rgba(255,255,255,.75);
}

/* ---------- Carrusel ---------- */

.qct__slider{
	max-width:900px;
	margin:0 auto;
}

.qct__viewport{overflow:hidden;}

.qct__track{
	display:flex;
	align-items:stretch;
	transition:transform .55s var(--qct-ease);
}

/* Cada testimonio ocupa el ancho completo del visor. */
.qct-card{
	flex:0 0 100%;
	min-width:0;
	margin:0;
	display:flex;
	flex-direction:column;
	align-items:center;
}

/* ---------- Tarjeta ---------- */

.qct-card__photo{
	position:relative;
	z-index:2;
	flex:0 0 auto;
	width:var(--qct-photo);
	height:var(--qct-photo);
	margin:0 0 calc(var(--qct-photo) / -2.3) 0;   /* se monta sobre la tarjeta */
	border-radius:50%;
	overflow:hidden;
	border:4px solid rgba(255,255,255,.9);
	box-shadow:0 8px 22px rgba(6,48,31,.22);
}
.qct-card__photo img{
	display:block;
	width:100%;height:100%;
	object-fit:cover;
}

.qct-card__body{
	position:relative;
	width:100%;
	padding:calc(var(--qct-photo) / 2.3 + 16px) 22px 22px;
	border-radius:22px;
	background-color:#fff;
	box-shadow:0 14px 34px rgba(6,48,31,.16);
	text-align:center;
}

/* Sin retrato no hay nada que esquivar arriba. */
.qct-card--sin-foto .qct-card__body{padding-top:26px;}

.qct-card__name{
	margin:0;
	font-size:1.1rem;
	font-weight:800;
	letter-spacing:-.01em;
	color:#082b1f;
}

.qct-card__role{
	margin:3px 0 0;
	font-size:.76rem;
	font-weight:400;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:#4b6b5c;
}

.qct-card__quote{
	margin:14px 0 0;
	font-size:.95rem;
	font-weight:300;
	line-height:1.55;
	color:#274a3c;
}

.qct-card__pill{
	display:inline-block;
	margin-top:18px;
	padding:8px 20px;
	border-radius:999px;
	background-image:linear-gradient(135deg,#5cc394,#12684d);
	color:#fff;
	font-size:.82rem;
	font-weight:600;
	letter-spacing:.02em;
	white-space:nowrap;
}

/* ---------- Controles ---------- */

.qct__controls{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:16px;
	margin-top:24px;
}

.qct__arrow{
	display:flex;align-items:center;justify-content:center;
	width:40px;height:40px;
	padding:0;
	border:0;
	border-radius:50%;
	background-color:rgba(255,255,255,.85);
	color:#0f4a37;
	cursor:pointer;
	transition:transform .25s var(--qct-ease),filter .25s var(--qct-ease);
}
.qct__arrow svg{width:20px;height:20px;}
.qct__arrow:hover{transform:translateY(-2px);filter:brightness(1.06);}
.qct__arrow:focus-visible{outline:3px solid #0f4a37;outline-offset:2px;}

.qct__dots{
	display:flex;
	align-items:center;
	gap:9px;
}

.qct__dot{
	width:9px;height:9px;
	padding:0;
	border:0;
	border-radius:50%;
	background-color:rgba(255,255,255,.55);
	cursor:pointer;
	transition:width .25s var(--qct-ease);
}
.qct__dot[aria-selected="true"]{
	width:26px;
	border-radius:999px;
	background-color:#fff;
}
.qct__dot:focus-visible{outline:3px solid #0f4a37;outline-offset:3px;}

/* =========================================================
   TABLET / ESCRITORIO — retrato a la izquierda
   ========================================================= */

@media (min-width:720px){
	.qct-card{
		flex-direction:row;
		align-items:center;
		padding:10px 6px;              /* aire para que la sombra no se recorte */
	}

	.qct-card__photo{
		margin:0 calc(var(--qct-photo) / -2.6) 0 0;   /* monta sobre el borde izquierdo */
	}

	.qct-card__body{
		padding:34px 36px 34px calc(var(--qct-photo) / 2.6 + 30px);
		text-align:left;
	}

	.qct-card__name{font-size:1.25rem;}
	.qct-card__quote{font-size:1rem;margin-top:12px;}

	/* La pastilla se ancla abajo a la derecha. El hueco que deja se reserva
	   en TODAS las lineas de la cita, no solo en la ultima: asi un
	   testimonio largo nunca se mete por debajo de ella. */
	.qct-card__pill{
		position:absolute;
		right:26px;bottom:24px;
		margin-top:0;
	}
	.qct-card__quote{padding-right:96px;}

	.qct-card--sin-pastilla .qct-card__quote{padding-right:0;}

	/* Sin retrato, el hueco de la izquierda desaparece. */
	.qct-card--sin-foto .qct-card__body{padding:34px 36px;}
}

/* =========================================================
   Accesibilidad
   ========================================================= */

@media (prefers-reduced-motion:reduce){
	.qct__track,
	.qct__arrow,
	.qct__dot{transition:none;}
}