/* --- Base/fondo --- */
html, body { height: 100%; }

html, body { height: 100%; }

body{
  margin:0;
  padding:0;
  font-family: Arial, sans-serif;
  background:#cfbd8e;   /* color liso de respaldo, sin imagen */
  min-height:100vh;     /* antes: 200vh */
  overflow:hidden;
}


/* Contenedor del video al fondo */
#bg-wrap{
  position: fixed;
  inset: 0;              /* top/right/bottom/left: 0 */
  overflow: hidden;
  z-index: -1;           /* detrás de todo */
}

/* El video queda centrado y siempre cubre */
#bg-wrap video{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;     /* por si el motor lo respeta */
  pointer-events: none;
  will-change: transform;         /* suaviza en iOS */
  -webkit-transform: translate(-50%, -50%); /* iOS */
}


/* --- Header --- */
header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  padding: 16px;
}
.logo {
  width: clamp(180px, 60vw, 420px);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.25));
}

/* --- Íconos --- */
.icons{
  width:100%;
  height:90vh;
}
.icon{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100px;
  height:100px;
  padding:14px;
  transition: transform .2s ease;
}
.icon:hover{ transform:scale(1.1); }
.icon img{ width:120%; height:120%; }

/* Badge de estado */
#turntable .badge{
  position:absolute; bottom:-14px; right:-14px; font:700 12px/1 system-ui, sans-serif;
  padding:6px 8px; border-radius:999px; background:#111; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.3);
}

/* Hint (si lo usás) */
#turntable .hint{
  position:absolute; bottom:110%; left:50%; transform:translateX(-50%);
  background: rgba(0,0,0,.8); color:#fff; padding:8px 10px; border-radius:10px;
  font: 600 12px/1.2 system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
#turntable .hint.hidden{ display:none; }

/* --- Posiciones y tamaños: MÓVIL (<600px) --- */
.icon1{ top:12%; left:8%;  --icon:72px; }
.icon2{ top:22%; right:8%; --icon:60px; }
.icon3{ top:48%; left:18%; --icon:68px; }
.icon4{ bottom:16%; right:12%; --icon:70px; }
.icon5{ bottom:8%; left:48%; transform:translateX(-50%); --icon:62px; }

/* --- TABLET (>=600px) --- */
@media (min-width: 600px){
  :root{ --icon: 92px; --pad: 12px; }
  .stage{ height: calc(100vh - 96px); }
  .icon1{ top:10%; left:10%; --icon:100px; }
  .icon2{ top:18%; left:40%; --icon:84px; }
  .icon3{ top:46%; left:18%; --icon:96px; }
  .icon4{ top:30%; right:10%; --icon:110px; }
  .icon5{ bottom:10%; left:58%; --icon:88px; }
}

/* --- DESKTOP (>=992px) --- */
@media (min-width: 992px){
  :root{ --icon: 110px; --pad: 14px; }
  .icon1{ top:12%; left:14%; --icon:130px; }
  .icon2{ top:22%; left:35%; --icon:96px; }
  .icon3{ top:52%; left:22%; --icon:120px; }
  .icon4{ top:18%; right:14%; --icon:140px; }
  .icon5{ bottom:12%; left:70%; --icon:105px; }
}

/* Giro cuando suena */
#turntable.spinning img{ animation: spin 2.1s linear infinite; }
@keyframes spin { from{transform: rotate(0deg);} to{transform: rotate(360deg);} }

/* --- Footer --- */
footer {
  position: absolute; bottom: 10px; width: 100%;
  text-align: center; color: #222; font-size: 12px;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}