/* ============ Guía interactiva de tratamientos ============ */
.quiz-hero{padding:170px 32px 32px}
.quiz-hero__inner{max-width:720px;margin:0 auto}

.quiz{max-width:720px;margin:0 auto;padding:0 32px 96px;display:flex;flex-direction:column;gap:28px}

.quiz__progress{height:4px;background:var(--border-subtle);border-radius:var(--radius-pill);overflow:hidden}
.quiz__progress-bar{
  height:100%;
  width:33%;
  background:var(--beige);
  border-radius:var(--radius-pill);
  transition:width var(--duration-standard) var(--ease-standard);
}

/* Cada paso entra con un fundido + desplazamiento corto, en línea con el
   resto del movimiento del sitio (conservador, sin rebotes). */
.quiz__step{
  display:none;
  flex-direction:column;
  gap:24px;
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}
.quiz__step.is-active{display:flex}
.quiz__step.is-active.is-shown{opacity:1;transform:none}

@keyframes quiz-fade-up{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.quiz__zones{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quiz__zone{
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  border-radius:var(--radius-md);
  border:1.5px solid var(--border-subtle);
  background:var(--surface-card);
  text-align:left;
  cursor:pointer;
  font-family:var(--font-sans);
  opacity:0;
  animation:quiz-fade-up .6s var(--ease-standard) forwards;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.quiz__zone:nth-child(1){animation-delay:.04s}
.quiz__zone:nth-child(2){animation-delay:.09s}
.quiz__zone:nth-child(3){animation-delay:.14s}
.quiz__zone:nth-child(4){animation-delay:.19s}
.quiz__zone:nth-child(5){animation-delay:.24s}
.quiz__zone:nth-child(6){animation-delay:.29s}
.quiz__zone:hover{border-color:var(--beige);box-shadow:var(--shadow-soft);transform:translateY(-3px)}
.quiz__zone.is-selected{border-color:var(--beige);box-shadow:var(--shadow-card);transform:translateY(-1px) scale(.98)}
.quiz__zone-media{width:100%;aspect-ratio:4/3;background:var(--nude);overflow:hidden}
.quiz__zone-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-standard)}
.quiz__zone:hover .quiz__zone-media img{transform:scale(1.06)}
.quiz__zone-body{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px}
.quiz__zone-label{font:700 16px var(--font-sans);color:var(--black)}
.quiz__zone-desc{font:400 13px/1.4 var(--font-sans);color:var(--ebony)}

.quiz__back{align-self:flex-start;background:none;border:none;padding:0;font:600 14px var(--font-sans);color:var(--beige);cursor:pointer}
.quiz__back:hover{color:var(--black)}

.quiz__options{display:flex;flex-direction:column;gap:12px}
.quiz__option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-radius:var(--radius-md);
  border:1.5px solid var(--border-subtle);
  background:var(--surface-card);
  text-align:left;
  cursor:pointer;
  font:600 15px var(--font-sans);
  color:var(--black);
  opacity:0;
  animation:quiz-fade-up .5s var(--ease-standard) forwards;
  transition:border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.quiz__option:nth-child(1){animation-delay:.03s}
.quiz__option:nth-child(2){animation-delay:.08s}
.quiz__option:nth-child(3){animation-delay:.13s}
.quiz__option:hover{border-color:var(--beige);transform:translateX(4px)}
.quiz__option.is-selected{border-color:var(--beige);background:var(--surface-muted);transform:translateX(4px)}
.quiz__option::after{content:'→';color:var(--beige);flex-shrink:0;margin-left:12px;transition:transform var(--duration-fast) var(--ease-standard)}
.quiz__option:hover::after{transform:translateX(3px)}

.quiz__result-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:0 0 40px;
  background:var(--surface-muted);
  border-radius:var(--radius-md);
  text-align:center;
  overflow:hidden;
}
.quiz__result-media{width:100%;aspect-ratio:16/9;background:var(--nude)}
.quiz__result-media img{width:100%;height:100%;object-fit:cover;display:block}
.quiz__result-eyebrow{font:600 13px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--beige)}
.quiz__result-title{margin:0;font:700 28px var(--font-sans);color:var(--black)}
.quiz__result-text{margin:0;font:400 16px/1.6 var(--font-sans);color:var(--ebony);max-width:44ch;padding:0 32px}
.quiz__result-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.quiz__result-note{margin:8px 32px 0;font:400 13px/1.5 var(--font-sans);color:var(--ebony);max-width:44ch}

.quiz__restart{align-self:center;background:none;border:none;font:600 14px var(--font-sans);color:var(--beige);cursor:pointer}
.quiz__restart:hover{color:var(--black)}

@media (max-width:768px){
  .quiz__zones{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .quiz-hero{padding:150px 20px 24px}
  .quiz{padding:0 20px 64px}
  .quiz__zones{grid-template-columns:1fr}
  .quiz__result-text,
  .quiz__result-note{padding-left:22px;padding-right:22px}
}