/* Reto del cepillado */
.reto-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 16px 36px rgba(35, 42, 92, 0.08);
  padding: 32px;
  position: relative;
  z-index: 3;
  margin-top: -60px;
}
.reto-vista[hidden] { display: none; }

/* Inicio */
.reto-inicio { display: flex; align-items: center; gap: 36px; }
.reto-inicio > img { width: 210px; flex: none; }
.reto-inicio ol { padding-left: 20px; color: var(--muted); }
.reto-nombre { max-width: 340px; }

/* Juego: boca con el fondo y el contorno del logo */
.reto-juego { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; }
.reto-tablero { background: var(--brand); border-radius: 22px; padding: 22px 22px 14px; }
.reto-boca { width: 100%; display: block; overflow: visible; }
.reto-lados { display: flex; justify-content: space-between; color: #fff; font-size: 0.85rem; font-weight: 600; padding: 8px 12px 0; }
.diente { fill: #eddc9a; stroke: #57c7e5; stroke-width: 3; transition: fill 0.4s; }
.diente.limpio { fill: #fff; }
.zona-activa .diente { stroke: #fcdf63; stroke-width: 5; }
.brillo { fill: #fcdf63; opacity: 0; transition: opacity 0.4s; }
.completa .brillo { opacity: 1; }
#cepillo { transition: transform 0.5s ease; }
.frota { animation: frotar 0.28s ease-in-out infinite alternate; }
.pausado .frota { animation-play-state: paused; }
@keyframes frotar {
  from { transform: translateX(-11px); }
  to { transform: translateX(11px); }
}

.reto-panel { text-align: center; }
.reto-reloj { position: relative; width: 170px; height: 170px; margin: 0 auto 14px; }
.reto-reloj svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.reloj-fondo { fill: none; stroke: var(--tint); stroke-width: 12; }
.reloj-avance { fill: none; stroke: var(--brand); stroke-width: 12; stroke-linecap: round; }
.reto-tiempo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.reto-zona { font-size: 1.35rem; font-weight: 700; margin-bottom: 2px; }
.reto-animo { color: var(--muted); min-height: 1.6em; }
.reto-pasos { display: flex; justify-content: center; gap: 8px; margin: 12px 0 18px; }
.reto-pasos span { width: 34px; height: 8px; border-radius: 8px; background: var(--line); }
.reto-pasos span.hecho { background: var(--brand); }
.reto-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Diploma */
.reto-fin { text-align: center; }
.reto-fin canvas {
  width: 100%;
  max-width: 620px;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  margin: 14px 0 20px;
}

.reto-consejos { background: var(--tint); border-radius: 18px; padding: 24px; height: 100%; }
.reto-consejos i { color: var(--brand); font-size: 1.6rem; }
.reto-consejos p { color: var(--muted); margin: 0; font-size: 0.95rem; }

@media (max-width: 767.98px) {
  .reto-card { padding: 22px 18px; }
  .reto-inicio { flex-direction: column; gap: 14px; text-align: left; }
  .reto-inicio > img { width: 130px; }
  .reto-juego { grid-template-columns: 1fr; gap: 12px; }
  .reto-tablero { padding: 14px 14px 10px; }
  .reto-reloj { width: 130px; height: 130px; margin-bottom: 8px; }
  .reto-tiempo { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .frota { animation: none; }
  #cepillo, .diente { transition: none; }
}