/* Inicio: nombre-juguete (las estrellas viven en estrellas.css) */

.juguete { position: relative; width: 100%; height: min(58vh, 520px); min-height: 280px; margin: -24px 0 48px; opacity: 0; transition: opacity .6s ease; }
.juguete.ready { opacity: 1; }
.juguete canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.juguete canvas.can-grab { cursor: grab; }
.juguete canvas.grabbing { cursor: grabbing; }
.juguete-bar { position: absolute; left: 0; right: 0; bottom: -40px; display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 820px; margin: 0 auto; padding: 0 28px; font-size: 12px; letter-spacing: .08em; color: var(--ink-muted); text-transform: uppercase; }
.juguete-rearmar { background: none; border: 1px solid rgba(212,183,131,.25); color: var(--accent); border-radius: 999px; padding: 6px 14px; font: inherit; letter-spacing: inherit; cursor: pointer; }
.juguete-rearmar:hover { border-color: var(--accent); }
.juguete.zero-g .juguete-bar span::after { content: " · gravedad cero"; color: var(--accent); }

@media (max-width: 640px) { .juguete { height: 300px; margin-top: 0; } .juguete-bar { padding: 0 18px; font-size: 13px; } }

/* Invitación al juego: se va cuando agarrás la primera letra */
.juguete-invita { position: absolute; top: 14%; right: max(28px, calc((100% - 820px) / 2 + 28px)); display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: rgba(212,183,131,.12); border: 1px solid rgba(212,183,131,.55); color: var(--accent-warm); font: 500 15px/1 Inter, sans-serif; pointer-events: none; animation: invita 2.4s ease-in-out infinite; transition: opacity .4s; }
.juguete-invita .mano { font-size: 20px; display: inline-block; animation: mano 2.4s ease-in-out infinite; }
.juguete.jugando .juguete-invita { opacity: 0; animation: none; }
@keyframes invita { 0%,100% { box-shadow: 0 0 0 0 rgba(212,183,131,.35); } 50% { box-shadow: 0 0 0 10px rgba(212,183,131,0); } }
@keyframes mano { 0%,100% { transform: translate(0,0) rotate(0); } 30% { transform: translate(-6px,6px) rotate(-12deg); } 60% { transform: translate(4px,-4px) rotate(6deg); } }
.juguete-bar span { color: var(--accent); }
@media (max-width: 640px) { .juguete-invita { top: 10px; right: 16px; font-size: 13px; padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .juguete-invita, .juguete-invita .mano { animation: none; } }

/* 4 · ayuda según el dispositivo */
.solo-touch { display: none; }
@media (hover: none), (max-width: 640px) { .solo-mouse { display: none; } .solo-touch { display: inline; } }

/* 1-2 · el nombre ya es el título: lo de abajo pasa a ser bajada */
main { padding-top: 40px; }
main h1 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.12; max-width: 24ch; margin-bottom: 10px; }

/* Sobre mí: la frase que une las tres cosas */
main p.frase { font-family: Fraunces, serif; font-size: 20px; line-height: 1.4; color: var(--ink); margin-bottom: 18px; }
@media (max-width: 640px) { main p.frase { font-size: 17px; } }
/* En iPhone el doble toque hacía zoom en vez de sacudir */
.juguete canvas { touch-action: manipulation; }

/* 6 · menú y cierre */
.nav-brand { cursor: pointer; }
footer { margin-top: 24px; }
@media (max-width: 640px) { main { padding-top: 32px; padding-bottom: 40px; } }