/* Crisol Quiz de Piedras — estética tomada del tema (Woodmart) */
.crisol-quiz{
	--cq-primary:#a68247;
	--cq-primary-dark:#85632d;
	--cq-primary-darker:#543616;
	--cq-title:#242424;
	--cq-text:#2d2d2d;
	--cq-border:#e2d8c5;
	--cq-bg-soft:#faf7f1;
	--cq-title-font:"Merriweather",Georgia,serif;
	--cq-text-font:"Inter",Arial,Helvetica,sans-serif;
	font-family:var(--cq-text-font);
	color:var(--cq-text);
	max-width:1000px;
	margin:0 auto;
	line-height:1.55;
}
.crisol-quiz *{box-sizing:border-box}

/* Encabezado / progreso */
.crisol-quiz .cq-progress{
	display:flex;align-items:center;gap:10px;
	font-size:12px;letter-spacing:.06em;text-transform:uppercase;
	color:var(--cq-primary-dark);margin-bottom:14px;font-weight:600;
}
.crisol-quiz .cq-bar{flex:1;height:3px;background:var(--cq-border);position:relative;overflow:hidden}
.crisol-quiz .cq-bar > i{position:absolute;inset:0 auto 0 0;background:var(--cq-primary);transition:width .35s ease}

.crisol-quiz h2.cq-q{
	font-family:var(--cq-title-font);font-weight:700;color:var(--cq-title);
	font-size:clamp(22px,3vw,30px);line-height:1.25;margin:0 0 22px;text-align:center;
}
.crisol-quiz .cq-lead{text-align:center;max-width:620px;margin:0 auto 26px;color:#555;font-size:16px}

/* Portada */
.crisol-quiz .cq-intro{text-align:center;padding:24px 10px 8px}
.crisol-quiz .cq-intro h2{
	font-family:var(--cq-title-font);font-weight:700;color:var(--cq-title);
	font-size:clamp(26px,4vw,38px);margin:0 0 14px;
}

/* Opciones */
.crisol-quiz .cq-options{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:640px){.crisol-quiz .cq-options{grid-template-columns:1fr}}
.crisol-quiz .cq-opt{
	display:block;text-align:left;background:#fff;border:1px solid var(--cq-border);
	padding:0;overflow:hidden;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s;
	font-family:var(--cq-text-font);color:var(--cq-text);width:100%;
	text-transform:none;font-style:normal;letter-spacing:normal;
}
.crisol-quiz button.cq-opt:hover,
.crisol-quiz button.cq-opt:focus{
	background:var(--cq-bg-soft) !important;color:var(--cq-text) !important;
	border-color:var(--cq-primary);box-shadow:0 6px 22px rgba(166,130,71,.16);transform:translateY(-2px);
}
.crisol-quiz .cq-opt:hover .cq-opt-title,
.crisol-quiz .cq-opt:focus .cq-opt-title{color:var(--cq-title)}
.crisol-quiz .cq-opt:hover .cq-opt-desc,
.crisol-quiz .cq-opt:focus .cq-opt-desc{color:#666}
.crisol-quiz .cq-opt-img{display:block;width:100%;height:auto}
.crisol-quiz .cq-opt-body{display:block;padding:16px 18px}
.crisol-quiz .cq-opt .cq-opt-title{
	display:block;font-weight:700;font-size:16px;color:var(--cq-title);margin-bottom:4px;
	text-transform:none;font-style:normal;
}
.crisol-quiz .cq-opt .cq-opt-desc{
	display:block;font-size:13.5px;color:#666;line-height:1.45;
	text-transform:none;font-style:normal;
}

/* Botones */
.crisol-quiz .cq-btn{
	display:inline-block;background:var(--cq-primary);color:#fff;border:0;
	font-family:var(--cq-text-font);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
	font-size:13px;padding:14px 30px;cursor:pointer;text-decoration:none;transition:background .18s;
}
.crisol-quiz .cq-btn:hover{background:var(--cq-primary-dark);color:#fff}
.crisol-quiz .cq-btn.cq-ghost{background:transparent;color:var(--cq-primary-dark);border:1px solid var(--cq-border)}
.crisol-quiz .cq-btn.cq-ghost:hover{border-color:var(--cq-primary);background:var(--cq-bg-soft)}
.crisol-quiz .cq-nav{display:flex;justify-content:center;gap:12px;margin-top:26px}

/* Resultado */
.crisol-quiz .cq-result-head{text-align:center;margin-bottom:26px}
.crisol-quiz .cq-result-head h2{
	font-family:var(--cq-title-font);font-weight:700;color:var(--cq-title);
	font-size:clamp(24px,3.5vw,34px);margin:0 0 8px;
}
.crisol-quiz .cq-result-head p{color:#555;margin:0}

.crisol-quiz .cq-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.crisol-quiz .cq-card{
	flex:0 1 calc(33.333% - 20px);max-width:calc(33.333% - 20px);min-width:220px;
	background:#fff;border:1px solid var(--cq-border);display:flex;flex-direction:column;
	transition:box-shadow .18s,transform .18s;
}
.crisol-quiz .cq-card:hover{box-shadow:0 10px 30px rgba(166,130,71,.18);transform:translateY(-3px)}
@media(max-width:768px){
	.crisol-quiz .cq-card{flex:0 1 100%;max-width:100%}
}
.crisol-quiz .cq-card-img{display:block;width:100%;height:auto}
.crisol-quiz .cq-card-noimg{aspect-ratio:1/1;background:var(--cq-bg-soft);display:flex;align-items:center;justify-content:center;color:var(--cq-primary);font-family:var(--cq-title-font);font-size:34px}
.crisol-quiz .cq-card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.crisol-quiz .cq-card-body h3{
	font-family:var(--cq-title-font);font-weight:700;color:var(--cq-title);font-size:19px;margin:0 0 8px;
}
.crisol-quiz .cq-card-body p{font-size:14px;color:#555;margin:0 0 16px;flex:1}
.crisol-quiz .cq-card-body .cq-btn{align-self:flex-start;padding:11px 22px;font-size:12px}

.crisol-quiz .cq-empty{
	text-align:center;background:var(--cq-bg-soft);border:1px dashed var(--cq-border);
	padding:34px 20px;color:#555;font-size:16px;max-width:560px;margin:0 auto;
}

.crisol-quiz .cq-fade{animation:cqFade .35s ease}
@keyframes cqFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}