/* =========================================================
   Quirulloc · Productos mas vendidos
   Mobile first. Los colores de marca caen por defecto en las
   variables del tema, asi que el modulo sigue a la linea de
   negocio de la pagina sin tocar nada.
   ========================================================= */

.qcp{
	--qcp-brand: var(--qc-blue, #18b7e8);
	--qcp-brand-deep: var(--qc-blue-deep, #2f6fed);
	--qcp-ink: var(--qc-ink, #142033);
	--qcp-muted: var(--qc-muted, #7c8aa0);
	--qcp-line: rgba(20, 32, 51, .10);
	--qcp-cols: 1;
	--qcp-ease: cubic-bezier(.22,.8,.28,1);

	padding:56px 18px 60px;
	background-color:#f5f8fb;
}

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

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

.qcp__head{
	max-width:720px;
	margin:0 auto 30px;
	text-align:center;
}

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

.qcp__title{
	margin:14px 0 10px;
	font-size:clamp(1.8rem,6.5vw,2.7rem);
	font-weight:800;
	line-height:1.05;
	letter-spacing:-.025em;
	color:var(--qcp-ink);
}

.qcp__lead{
	margin:0;
	font-size:clamp(.95rem,3.2vw,1.05rem);
	font-weight:300;
	line-height:1.55;
	color:var(--qcp-muted);
}

/* ---------- Filtros ---------- */

.qcp__filters{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
	margin:0 auto 28px;
	max-width:900px;
}

.qcp__filter{
	padding:9px 18px;
	border:1px solid var(--qcp-line);
	border-radius:999px;
	background-color:#fff;
	color:var(--qcp-ink);
	font:inherit;
	font-size:.85rem;
	font-weight:500;
	cursor:pointer;
	transition:border-color .25s var(--qcp-ease),color .25s var(--qcp-ease),background-color .25s var(--qcp-ease);
}
.qcp__filter:hover{border-color:var(--qcp-brand);color:var(--qcp-brand);}
.qcp__filter.is-active{
	background-color:var(--qcp-brand);
	border-color:var(--qcp-brand);
	color:#fff;
}
.qcp__filter:focus-visible{outline:3px solid var(--qcp-brand);outline-offset:2px;}

/* ---------- Rejilla ---------- */

.qcp__grid{
	display:grid;
	grid-template-columns:repeat(var(--qcp-cols),minmax(0,1fr));
	gap:22px;
	max-width:1280px;
	margin:0 auto;
	align-items:stretch;
}

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

.qcp-card{
	display:flex;
	flex-direction:column;
	margin:0;
	background-color:#fff;
	border:1px solid var(--qcp-line);
	border-radius:16px;
	overflow:hidden;
	transition:transform .35s var(--qcp-ease),
	           box-shadow .35s var(--qcp-ease),
	           border-color .35s var(--qcp-ease);
}

.qcp-card:hover{
	transform:translateY(-6px);
	border-color:var(--qcp-brand);
	box-shadow:0 18px 38px rgba(20,32,51,.14);
}

.qcp-card[hidden]{display:none;}

.qcp-card__media{
	--qcp-ratio:78;
	position:relative;
	aspect-ratio:1 / calc(var(--qcp-ratio) / 100);
	background-color:#eef2f6;
	overflow:hidden;
}

.qcp-card__media img{
	display:block;
	width:100%;height:100%;
	object-fit:cover;
	transition:transform .6s var(--qcp-ease);
}
.qcp-card:hover .qcp-card__media img{transform:scale(1.06);}

.qcp-card__badge{
	position:absolute;
	top:12px;left:12px;
	z-index:2;
	padding:6px 12px;
	border-radius:999px;
	background-image:linear-gradient(135deg,var(--qcp-brand),var(--qcp-brand-deep));
	color:#fff;
	font-size:.7rem;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	white-space:nowrap;
}

.qcp-card__rank{
	position:absolute;
	right:10px;bottom:4px;
	z-index:2;
	font-size:2.6rem;
	font-weight:800;
	line-height:1;
	color:#fff;
	opacity:.85;
	text-shadow:0 2px 12px rgba(20,32,51,.45);
	pointer-events:none;
}

.qcp-card__body{
	display:flex;
	flex-direction:column;
	flex:1 1 auto;          /* el pie se alinea aunque los textos midan distinto */
	padding:18px 18px 20px;
}

.qcp-card__cat{
	margin:0 0 6px;
	font-size:.7rem;
	font-weight:600;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--qcp-brand);
}

.qcp-card__name{
	margin:0;
	font-size:1.02rem;
	font-weight:700;
	line-height:1.3;
	color:var(--qcp-ink);
}

.qcp-card__desc{
	margin:8px 0 0;
	font-size:.86rem;
	font-weight:300;
	line-height:1.5;
	color:var(--qcp-muted);
}

/* Empujado al fondo: todas las tarjetas cierran a la misma altura. */
.qcp-card__foot{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	flex-wrap:wrap;
	margin-top:auto;
	padding-top:16px;
}

.qcp-card__price{
	margin:0;
	font-size:1.08rem;
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--qcp-ink);
}

/* Encima del precio, no al lado: si va en linea, las tarjetas con
   descuento empujan el boton a una segunda fila y las de al lado no,
   y el pie de la rejilla queda desparejo. */
.qcp-card__price-old{
	display:block;
	margin:0 0 1px;
	font-size:.78rem;
	font-weight:400;
	line-height:1.2;
	color:var(--qcp-muted);
	text-decoration:line-through;
}

.qcp-card__cta{
	display:inline-flex;
	align-items:center;
	padding:9px 16px;
	border:1px solid var(--qcp-brand);
	border-radius:999px;
	color:var(--qcp-brand);
	font-size:.82rem;
	font-weight:600;
	text-decoration:none;
	white-space:nowrap;
	transition:background-color .25s var(--qcp-ease),color .25s var(--qcp-ease);
}
.qcp-card__cta:hover{
	background-color:var(--qcp-brand);
	color:#fff;
}
.qcp-card__cta:focus-visible{outline:3px solid var(--qcp-brand);outline-offset:2px;}

.qcp__editor-note{
	max-width:1280px;
	margin:18px auto 0;
	font-size:.78rem;
	color:var(--qcp-muted);
	text-align:center;
}

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

@media (prefers-reduced-motion:reduce){
	.qcp-card,
	.qcp-card__media img,
	.qcp-card__cta,
	.qcp__filter{transition:none;}
	.qcp-card:hover{transform:none;}
	.qcp-card:hover .qcp-card__media img{transform:none;}
}