/* =========================================================
   Quirulloc · Mosaico de servicios
   Mobile first. Todo lo que depende de los ajustes de
   Elementor llega como variable CSS o como <style> en linea:
   aqui solo vive la estructura.
   ========================================================= */

.qcs{
	--qcs-field:linear-gradient(135deg,#a9ebc9 0%,#2a9270 52%,#06301f 100%);
	--qcs-field-light:linear-gradient(150deg,#a9ebc9,#2a9270);
	--qcs-field-dark:linear-gradient(150deg,#2a9270,#06301f);
	--qcs-veil:linear-gradient(transparent,transparent);
	--qcs-text-light:#fff;
	--qcs-text-dark:#06301f;
	--qcs-duotone:.42;
	--qcs-ratio:.67;
	--qcs-ease:cubic-bezier(.22,.8,.28,1);

	padding:8px 0 16px;
}

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

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

.qcs__head{
	text-align:center;
	max-width:640px;
	margin:0 auto 32px;
}

.qcs__eyebrow{
	display:inline-block;
	position:relative;
	margin:0;
	padding-bottom:10px;
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:#2a9270;
}
.qcs__eyebrow::after{
	content:"";
	position:absolute;left:50%;bottom:0;
	width:26px;height:2px;
	background:#2a9270;
	transform:translateX(-50%);
}

.qcs__title{
	margin:14px 0 12px;
	font-size:clamp(2.4rem,11vw,5rem);
	font-weight:800;
	line-height:.95;
	letter-spacing:-.03em;
	color:#082b1f;
}

.qcs__lead{
	margin:0;
	font-size:clamp(.95rem,3.4vw,1.05rem);
	font-weight:300;
	color:#3d6455;
}

/* ---------- Mosaico: base MOVIL (apilado con cortes) ---------- */

.qcs__mosaic{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.qcs-tile{
	position:relative;
	overflow:hidden;
	min-height:210px;
	margin:0;
	background-image:var(--qcs-veil),var(--qcs-field-dark);
	background-size:100% 100%;
	color:var(--qcs-text-light);
}

.qcs-tile--texto-oscuro{
	background-image:var(--qcs-veil),var(--qcs-field-light);
	color:var(--qcs-text-dark);
}

/* Los cortes diagonales del apilado viven solo en movil, para que no
   compitan en la cascada con los clip-path generados del mosaico. */
@media (max-width:679.98px){
	.qcs-tile{
		clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%);
		padding-bottom:26px;
	}
	.qcs-tile + .qcs-tile{
		margin-top:-14px;
		clip-path:polygon(0 26px,100% 0,100% calc(100% - 26px),0 100%);
		padding-top:26px;
	}
	.qcs-tile:last-child{
		clip-path:polygon(0 26px,100% 0,100% 100%,0 100%);
		padding-bottom:0;
	}
}

/* ---------- Contenido ---------- */

.qcs-tile__body{
	position:relative;
	z-index:1;
	padding:30px 24px;
	max-width:34rem;
}

.qcs-tile__icon{
	display:flex;align-items:center;justify-content:center;
	width:44px;height:44px;
	margin-bottom:16px;
	border:1px solid currentColor;
	border-radius:50%;
	opacity:.85;
	font-size:19px;
}
.qcs-tile__icon svg{width:22px;height:22px;fill:currentColor;}

.qcs-tile__title{
	margin:0;
	font-size:clamp(1.35rem,5.4vw,1.7rem);
	font-weight:800;
	line-height:1.05;
	letter-spacing:-.02em;
	color:inherit;
}

.qcs-tile__kicker{
	margin:6px 0 16px;
	font-size:.78rem;
	font-weight:400;
	letter-spacing:.06em;
	text-transform:uppercase;
	opacity:.7;
}

.qcs-tile__list{
	margin:0;padding:0;
	list-style:none;
	display:grid;
	gap:9px;
	font-size:.92rem;
	font-weight:300;
}
.qcs-tile__list li{
	position:relative;
	padding-left:18px;
	line-height:1.35;
}
.qcs-tile__list li::before{
	content:"";
	position:absolute;left:0;top:.55em;
	width:7px;height:1.5px;
	background:currentColor;
	opacity:.65;
}

.qcs-tile__cta{
	display:inline-flex;align-items:center;gap:8px;
	margin-top:22px;
	padding-bottom:4px;
	border-bottom:1px solid currentColor;
	font-size:.85rem;font-weight:600;
	color:inherit;text-decoration:none;
	transition:gap .3s var(--qcs-ease);
}
.qcs-tile__cta:hover{gap:14px;color:inherit;}

/* El numero va detras del texto: asi se coloca por equilibrio visual
   sin pelearse con la lista. */
.qcs-tile__number{
	position:absolute;
	z-index:0;
	right:16px;bottom:34px;
	font-size:5rem;font-weight:800;
	line-height:1;
	opacity:.12;
	pointer-events:none;
}

/* ---------- Fotos ---------- */

.qcs-tile--photo{min-height:230px;}

.qcs-tile--photo img{
	position:absolute;inset:0;z-index:0;
	width:100%;height:100%;
	object-fit:cover;
	/* `color` conserva la luminancia de la foto: sin esto el tinte
	   verde la apaga y se pierde el motivo. */
	filter:saturate(.9) contrast(1.12) brightness(1.16);
	transition:transform 1.1s var(--qcs-ease);
}

.qcs-tile--photo::after{
	content:"";
	position:absolute;inset:0;z-index:2;
	background:var(--qcs-field-dark);
	mix-blend-mode:color;
	opacity:var(--qcs-duotone);
}

.qcs-tile--photo::before{
	content:"";
	position:absolute;inset:0;z-index:1;
	background:linear-gradient(180deg,rgba(4,44,31,0) 40%,rgba(4,44,31,.42) 100%);
}

.qcs-tile--photo:hover img{transform:scale(1.06);}

/* =========================================================
   TABLET · dos columnas
   ========================================================= */

@media (min-width:680px) and (max-width:999.98px){
	.qcs__mosaic{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:14px;
	}
	.qcs-tile{
		min-height:280px;
		clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),0 100%);
	}
	.qcs-tile:nth-child(even){
		clip-path:polygon(0 30px,100% 0,100% 100%,0 calc(100% - 30px));
	}
	.qcs-tile:last-child:nth-child(odd){grid-column:1 / -1;}
}

/* =========================================================
   ESCRITORIO · mosaico diagonal
   Cada panel cubre todo el escenario y solo se distingue por su
   clip-path, que llega generado desde PHP. Como todos comparten
   --qcs-field, el degradado se ve continuo entre paneles.
   ========================================================= */

@media (min-width:1000px){
	.qcs__mosaic{
		display:block;
		position:relative;
		aspect-ratio:1 / var(--qcs-ratio);
	}

	.qcs-tile{
		position:absolute;
		inset:0;
		margin:0;
		padding:0;
		min-height:0;
		background-image:var(--qcs-veil),var(--qcs-field);
		transition:filter .45s var(--qcs-ease);
	}

	.qcs-tile__body{
		position:absolute;
		padding:0;
		max-width:none;
	}

	.qcs-tile__number{right:auto;bottom:auto;}

	.qcs-tile__title{font-size:1.9rem;}
	.qcs-tile__list{font-size:.9rem;gap:8px;}
	.qcs-tile__list--two{grid-template-columns:1fr 1fr;column-gap:20px;}

	.qcs-tile:hover{filter:brightness(1.09) saturate(1.06);}
}

/* Sin aspect-ratio (navegadores antiguos) el escenario colapsaria a
   cero de alto y el mosaico desapareceria. */
@supports not (aspect-ratio: 1 / 1){
	@media (min-width:1000px){
		.qcs__mosaic{height:42vw;min-height:520px;}
	}
}

/* =========================================================
   Entrada
   ========================================================= */

/* Es el propio JS quien "arma" la animacion anadiendo .qcs--armed. Asi, si
   el script no carga o falla, los paneles nunca llegan a ocultarse y el
   modulo se ve igual: la animacion es una mejora, no un requisito. */
.qcs--armed .qcs-tile{
	opacity:0;
	transform:translateY(26px);
	transition:opacity .75s var(--qcs-ease) var(--qcs-delay,0ms),
	           transform .75s var(--qcs-ease) var(--qcs-delay,0ms),
	           filter .45s var(--qcs-ease);
}

.qcs--armed.qcs--visible .qcs-tile{
	opacity:1;
	transform:none;
}

@media (prefers-reduced-motion:reduce){
	.qcs--armed .qcs-tile{opacity:1;transform:none;transition:none;}
	.qcs-tile--photo img{transition:none;}
}