.qs-card.js-animate-up.is-visible .qs-card__text,
.qs-card.js-animate-up.is-visible .qs-card__imagewrap,
.qs-person.js-animate-up.is-visible .qs-person__imagewrap,
.qs-person.js-animate-up.is-visible .qs-person__text {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.qs-card.js-animate-up.is-visible .qs-card__text,
.qs-card.js-animate-up.is-visible .qs-card__imagewrap,
.qs-person.js-animate-up.is-visible .qs-person__imagewrap,
.qs-person.js-animate-up.is-visible .qs-person__text {
	transition-delay: var(--animate-delay, 0ms);
}

/* Quienes Somos page styles */
:root{
	--qs-bg: #b3926e;          /* card background */
	--qs-panel: #4d2f10;       /* dark brown for copy block */
	--qs-white: #fff;
	--qs-text: #2b2b2b;
	--qs-beige: #E6D4BC;
}

.container{
	max-width: 1250px;
	margin: 0 auto;
	padding: 0 16px;
}

/* About card */
.qs-card{
	background: var(--qs-bg);
	border-radius: 20px;
	padding: 20px 20px 20px 20px;
	display: grid;
	grid-template-columns: 1.1fr .4fr;
 	gap: 20px;
 	box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Evitamos desplazamientos laterales al aparecer, manteniendo efecto desde abajo */
.qs-card.js-animate-up,
.qs-person.js-animate-up,
.qs-stats.js-animate-up {
	opacity: 0;
	transform: none !important;
	transition: opacity var(--animate-duration, 400ms) cubic-bezier(0.2,0.8,0.2,1) !important;
}

.qs-card.js-animate-up.is-animating,
.qs-person.js-animate-up.is-animating,
.qs-stats.js-animate-up.is-animating {
	will-change: opacity;
}

.qs-card.js-animate-up.is-visible,
.qs-person.js-animate-up.is-visible,
.qs-stats.js-animate-up.is-visible {
	opacity: 1;
}

.qs-card.js-animate-up .qs-card__text,
.qs-card.js-animate-up .qs-card__imagewrap,
.qs-person.js-animate-up .qs-person__imagewrap,
.qs-person.js-animate-up .qs-person__text {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition: transform var(--animate-duration, 600ms) cubic-bezier(0.2,0.8,0.2,1), opacity var(--animate-duration, 600ms);
}

.qs-card.js-animate-up.is-visible .qs-card__text,
.qs-card.js-animate-up.is-visible .qs-card__imagewrap,
.qs-person.js-animate-up.is-visible .qs-person__imagewrap,
.qs-person.js-animate-up.is-visible .qs-person__text {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.qs-stats.js-animate-up .qs-stat {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: transform 520ms cubic-bezier(0.2,0.8,0.2,1), opacity 520ms ease-out;
}

.qs-stats.js-animate-up.is-visible .qs-stat {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.qs-stats.js-animate-up .qs-stat:nth-child(1) { transition-delay: 40ms; }
.qs-stats.js-animate-up .qs-stat:nth-child(2) { transition-delay: 120ms; }
.qs-stats.js-animate-up .qs-stat:nth-child(3) { transition-delay: 200ms; }

.qs-card__imagewrap,
.qs-person__imagewrap {
	min-width: 260px;
}

.qs-card__image,
.qs-person__image {
	display: block;
	transform: translateZ(0);
}
.qs-card__title{
	text-align: center;
	color: var(--qs-white);
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 26px;
	margin: 6px 0 14px;
}
.qs-card__text{
	color: #fff;
}
.qs-card__copy{
	background: var(--qs-panel);
	color: var(--qs-white);
	border-radius: 20px;
	padding: 18px 16px;
	line-height: 1.6;
	font-size: 21px;
}
.qs-card__note{
	margin-top: 16px;
	font-size: 16px;
	color: #2b2b2b;
	opacity: .9;
}
.qs-card__imagewrap{
	display: flex;
	align-items: center;
	justify-content: center;
}
.qs-card__image{
	width: 100%;
	max-width: 350px;
	height: auto;
	border-radius: 16px;
	object-fit: cover;
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Stats */
.qs-stats{
	display: flex;
	gap: clamp(28px, 5vw, 140px);
	justify-content: center;
	align-items: flex-start;
	margin: 3% auto 3%;
	padding: 0 4vw;
	max-width: 1200px;
	width: 100%;
	font-family: 'Playfair Display', serif;
	position: relative;
}
.qs-stat{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	min-width: 160px;
	color: #4D2F10;
	position: relative;
	padding: 0 18px;
}
.qs-stat + .qs-stat::before{
	content: '';
	position: absolute;
	left: -32px;
	top: 18%;
	bottom: 18%;
	width: 1px;
	background: rgba(77,47,16,.18);
}
.qs-stat__num{
	font-size: clamp(40px, 4.2vw, 58px);
	font-weight: 700;
	color: #4D2F10;
	line-height: 1;
	text-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.qs-stat__label{
	font-family: 'Inter', 'Segoe UI', sans-serif;
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(82,77,70,.7);
}
.qs-stats .qs-stat:nth-child(1){ --count-delay: 0ms; }
.qs-stats .qs-stat:nth-child(2){ --count-delay: 120ms; }
.qs-stats .qs-stat:nth-child(3){ --count-delay: 240ms; }

.qs-stats.is-counting .qs-stat__num{
	animation: qs-stat-pop 900ms cubic-bezier(0.16,1,0.3,1) both;
	animation-delay: calc(var(--count-delay, 0ms) + 60ms);
}
.qs-stats.is-counting .qs-stat__label{
	animation: qs-stat-label 640ms ease-out both;
	animation-delay: calc(var(--count-delay, 0ms) + 120ms);
}

@keyframes qs-stat-pop{
	0%{ transform: translateY(14px) scale(.9); opacity: 0; }
	55%{ transform: translateY(-6px) scale(1.05); opacity: 1; }
	100%{ transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes qs-stat-label{
	0%{ opacity: 0; transform: translateY(8px); }
	100%{ opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 992px){
	.qs-card{
		grid-template-columns: 1fr;
	}
	.qs-card__image{
		max-width: 520px;
	}
	.qs-card__imagewrap,
	.qs-person__imagewrap {
		min-width: 0;
	}
	.qs-stats{
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 0 24px;
	}
	.qs-stat{
		width: 100%;
		max-width: 320px;
		padding-bottom: 12px;
	}
	.qs-stat + .qs-stat::before{
		left: 0;
		top: auto;
		bottom: 0;
		width: 60%;
		height: 1px;
		background: rgba(77,47,16,.16);
	}
}
@media (max-width: 640px){
	.qs-pill__left{
		font-size: 22px;
		padding: 14px 28px;
	}
	.qs-pill__right{
		padding: 10px 22px;
	}
	.qs-pill__icon{
		width: 30px;
		height: 30px;
	}
	.qs-stat__num{
		font-size: 36px;
	}
	.qs-stat__label{
		letter-spacing: .2em;
	}
}

/* Ajustes adicionales para pantallas intermedias (ej. 1280x720) */
/* NOTE: moved to bottom of file to ensure these rules override base styles */

@media (prefers-reduced-motion: reduce){
	.qs-stats.js-animate-up,
	.qs-stats.js-animate-up .qs-stat{
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.qs-stats.is-counting .qs-stat__num,
	.qs-stats.is-counting .qs-stat__label{
		animation: none !important;
	}
}
.h1-subtitulo-qs{
  color: #524D46;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  margin: 0;
  font-weight: 700;
  text-align: center;
  padding: 0px 200px 50px 200px;
}

/* Segunda persona (imagen izquierda + texto derecha + frase centrada) */
.qs-person{
	padding: 10px 0 40px;
}
.qs-person__grid{
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 20px;
	align-items: start; /* alinear contenido arriba */
}
.qs-person__imagewrap{
	display: flex;
	justify-content: center;
    height: 55vh
}
.qs-person__image{
	width: 100%;
	max-width: 420px;
	height: auto;
	border-radius: 24px;
	object-fit: cover;
	box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.qs-person__text{
	color: #5b4a3a;
	font-size: 18px;
	line-height: 1.9;
}
.qs-person__text p{ margin: 0 0 18px 0; }
.qs-person__quote-qs{
	margin-top: 26px;
	color: #5b4a3a;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: -5px;
    margin: 0px 150px 0px 150px;
    text-align: center; /*CENTRAMOS EL TEXTO*/
}
.qs-person__quote-qs::before,
.qs-person__quote-qs::after{
	content: "";
	height: 1px;
	background: rgba(0,0,0,.25);
	flex: 1 2 800px; /* AJUSTAMOS LA LINEA*/
	border-radius: 1px;
}

@media (max-width: 992px){
	.qs-person__grid{ grid-template-columns: 1fr; }
}

/* Reapplied media query for <=1280px at the end so it takes precedence over base rules */
@media (max-width: 1280px){
	.container{
		max-width: 1100px;
		padding: 0 12px;
	}
	.qs-card{
		grid-template-columns: 1fr .46fr;
		padding: 18px;
		gap: 16px;
		border-radius: 18px;
	}
	.qs-card__title{ font-size: 24px; margin: 6px 0 12px; }
	.qs-card__copy{ font-size: 18px; padding: 16px; line-height: 1.55; }
	.qs-card__image{ max-width: 320px; }
	.qs-card__imagewrap, .qs-person__imagewrap{ min-width: 0; }
	.h1-subtitulo-qs{ padding: 0 100px; font-size: 1.05rem; }
	.qs-person__quote-qs{ margin: 0 80px; }

	/* Make image wrapper taller (vertical length) */
	.qs-person__imagewrap{ height: 85vh; }

	/* Give the image more vertical space and allow it to scale to fill the wrapper */
	.qs-person__grid{ grid-template-columns: minmax(340px, 560px) 1fr; gap: 24px; align-items: start; }
	.qs-person__image{ width: 100%; height: 85vh; max-width: 560px; object-fit: cover; border-radius: 24px; }

	.qs-stats{ gap: clamp(20px, 4vw, 100px); padding: 0 4vw; }
}