/* Isla Cubo — carga (bloques apilándose), "TOCA PARA EMPEZAR", Omitir y título. */

.intro {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: calc(var(--sat) + 24px) 28px calc(var(--sab) + 28px);
  text-align: center;
  background: linear-gradient(180deg, #FFD6A5 0%, #FFE9CF 55%, #A0D8F1 100%);
  transition: opacity .5s;
}
.intro.is-out { opacity: 0; pointer-events: none; }
.intro > :not(.intro-sun) { position: relative; z-index: 1; }
.intro-name { margin: 0; font-family: var(--f-title); font-size: clamp(28px, 8.5vw, 38px); line-height: 1.05; color: var(--brown); text-shadow: 0 3px 0 #fff; }
.stackbar { position: relative; width: 140px; height: 150px; }
.stackbar i {
  position: absolute;
  width: 44px;
  height: 30px;
  border: 3px solid var(--brown);
  border-radius: 6px;
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, .35), inset 0 -5px 0 rgba(0, 0, 0, .12);
  opacity: 0;
  transform: translateY(-60px);
  transition: opacity .2s, transform .35s var(--spring);
}
.stackbar i.on { opacity: 1; transform: none; }
.tip { min-height: 44px; margin: 0; max-width: 300px; font-weight: 800; font-size: 17px; color: var(--brown); transition: opacity .3s; }
.tip.is-fade { opacity: 0; }
.pct { font-family: var(--f-title); font-size: 15px; color: var(--brown-2); }

/* Toca para empezar */
.intro.is-start { cursor: pointer; background: linear-gradient(180deg, #FFD6A5 0%, #FFE2C0 45%, #A0D8F1 100%); }
.intro-sun { position: absolute; left: 50%; top: 58%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 200, .95) 0 20%, rgba(255, 214, 165, 0) 68%); pointer-events: none; }
.start-btn { font-size: clamp(18px, 5.4vw, 22px); min-height: 64px; padding: 14px 22px 12px; white-space: nowrap; animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
.sound-hint { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 8px; background: rgba(91, 58, 30, .16); font-weight: 800; font-size: 15px; color: var(--brown); }
.waves .w { animation: wave 1.2s ease-in-out infinite; }
.waves .w2 { animation-delay: .2s; }
@keyframes wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Manita de ayuda */
.hand { width: 60px; height: 68px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.hand.is-on { opacity: 1; }
.hand.is-on svg { animation: hand-tap 1.1s ease-in-out infinite; transform-origin: 40% 10%; }
@keyframes hand-tap { 0%, 100% { transform: translateY(0) rotate(-8deg); } 35%, 50% { transform: translateY(12px) rotate(-8deg) scale(.92); } }

/* Omitir */
.skip {
  position: absolute;
  right: calc(var(--sar) + 14px);
  bottom: calc(var(--sab) + 18px);
  z-index: 50;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid rgba(91, 58, 30, .5);
  border-radius: 8px;
  background: rgba(255, 246, 229, .8);
  font-weight: 900;
  font-size: 15px;
  color: var(--brown);
  cursor: pointer;
}

/* Título tras el monumento */
.title-card {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sat) + 72px);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.title-card h1 {
  margin: 0;
  padding: 0 16px;
  font-family: var(--f-title);
  font-weight: 400;
  font-size: clamp(26px, 8vw, 34px);
  line-height: 1.05;
  text-align: center;
  color: #fff;
  text-shadow: -2px -2px 0 var(--brown), 2px -2px 0 var(--brown), -2px 2px 0 var(--brown), 2px 2px 0 var(--brown), 0 5px 0 var(--brown);
  animation: title-in .7s var(--spring) both;
}
.title-card .age-badge { animation: title-in .7s .25s var(--spring) both; }
.title-card.is-out { animation: fade-out .5s both; }
@keyframes title-in { from { opacity: 0; transform: scale(.6) translateY(20px); } }