:root{
  --c1:#2b1a12; --c2:#4a2e20; --c3:#7a4b32; --c4:#c08a5f; --crema:#f3e3cf; --acento:#e0a071;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px;
  font-family:"Segoe UI",Georgia,system-ui,sans-serif; color:var(--crema);
  background:radial-gradient(circle at 20% 10%,#5a3826 0,transparent 45%),
             radial-gradient(circle at 90% 90%,#3a2216 0,transparent 50%),var(--c1);
}
.card{
  width:100%; max-width:820px; padding:28px clamp(16px,4vw,40px); border-radius:28px; text-align:center;
  background:linear-gradient(160deg,rgba(122,75,50,.55),rgba(43,26,18,.85));
  border:1px solid rgba(224,160,113,.3); box-shadow:0 20px 60px rgba(0,0,0,.5);
}
h1{font-family:Georgia,serif;font-size:clamp(1.6rem,5vw,2.6rem);color:#ffe8cc;letter-spacing:.5px}
.sub{margin:6px 0 22px;color:var(--c4);font-style:italic}

.contador{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,2vw,16px);margin-bottom:26px}
.caja{
  background:rgba(243,227,207,.08); border:1px solid rgba(224,160,113,.35);
  border-radius:18px; padding:14px 4px; backdrop-filter:blur(4px);
}
.caja span{display:block;font-size:clamp(1.6rem,7vw,3.2rem);font-weight:700;font-variant-numeric:tabular-nums;color:#ffdcb8}
.caja small{text-transform:uppercase;letter-spacing:2px;font-size:clamp(.6rem,2vw,.8rem);color:var(--c4)}

/* Escena */
.escena{
  --p:0; position:relative; height:230px; border-radius:20px; overflow:hidden;
  background:linear-gradient(#f0c9a0 0,#e3a778 55%,#b57a52 100%);
  border:2px solid rgba(255,232,204,.25);
}
.suelo{position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(#6b4129,#4a2b1a)}
.nube{position:absolute;background:rgba(255,245,230,.6);border-radius:50px;height:22px;animation:mover 40s linear infinite}
.nube::before{content:"";position:absolute;left:14px;top:-12px;width:30px;height:24px;background:inherit;border-radius:50%}
.n1{width:70px;top:22px;left:-80px}
.n2{width:52px;top:52px;left:-80px;animation-duration:60s;animation-delay:-25s;opacity:.7}
@keyframes mover{to{transform:translateX(900px)}}

.persona{position:absolute;bottom:22px;width:78px;transition:left 1.2s ease,right 1.2s ease;z-index:2}
.persona svg{width:100%;height:auto;display:block;animation:paso .7s ease-in-out infinite;transform-origin:bottom}
/* Separación final: quedan pegaditos (p=1) */
.hombre{left:calc(2% + var(--p) * (50% - 2% - 74px))}
.mujer{right:calc(2% + var(--p) * (50% - 2% - 74px))}
.mujer svg{animation-delay:-.35s;transform:scaleX(-1)}
.mujer svg{animation-name:paso2}
.escena.llego .persona svg{animation:none}
.escena.llego .hombre svg{transform:rotate(4deg)}
.escena.llego .mujer svg{transform:scaleX(-1) rotate(4deg)}
.pierna{transform-origin:40px 105px;animation:pierna .7s ease-in-out infinite}
.pierna.der{animation-direction:reverse}
.escena.llego .pierna{animation:none}
@keyframes paso{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes paso2{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-4px)}}
@keyframes pierna{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}

.corazones{position:absolute;left:50%;top:0;bottom:0;width:120px;transform:translateX(-50%);pointer-events:none;z-index:1}
.corazon{position:absolute;bottom:90px;font-size:18px;color:#c2413b;animation:subir 3.2s ease-in forwards;opacity:0}
@keyframes subir{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-120px) scale(1.3);opacity:0}}

.progreso-txt{margin:14px 0 22px;color:var(--c4);font-size:.95rem}

.config{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.config label{width:100%;color:var(--c4);font-size:.85rem;text-transform:uppercase;letter-spacing:2px}
.config input{
  padding:10px 14px;border-radius:12px;border:1px solid rgba(224,160,113,.5);
  background:rgba(243,227,207,.12);color:var(--crema);font:inherit;color-scheme:dark;min-width:0;flex:1 1 180px;max-width:260px
}
.config button{
  padding:10px 26px;border:0;border-radius:12px;cursor:pointer;font:inherit;font-weight:600;
  background:linear-gradient(135deg,#e0a071,#b3703f);color:#2b1a12;transition:transform .15s
}
.config button:hover{transform:translateY(-2px)}

@media (max-width:520px){
  .card{padding:20px 12px;border-radius:20px}
  .escena{height:190px}
  .persona{width:58px;bottom:18px}
  .hombre{left:calc(2% + var(--p) * (50% - 2% - 56px))}
  .mujer{right:calc(2% + var(--p) * (50% - 2% - 56px))}
  .suelo{height:28px}
}

.etiqueta{
  display:block;text-align:center;margin-bottom:4px;font-family:Georgia,serif;font-weight:700;
  font-size:1.3rem;letter-spacing:2px;color:#ffe8cc;text-shadow:0 2px 4px rgba(43,26,18,.6)
}

.musica{
  margin:0 0 24px;padding:16px;border-radius:20px;
  background:linear-gradient(160deg,rgba(122,75,50,.6),rgba(43,26,18,.8));
  border:1px solid rgba(224,160,113,.35);box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.musica[hidden]{display:none}
.musica h2{font-family:Georgia,serif;font-size:1.15rem;color:#ffe8cc;margin-bottom:12px;letter-spacing:1px}
.musica iframe{width:100%;border:0;border-radius:14px;display:block}