/* ========================================
   MULTIVERSO NESTLÉ - ESTILOS PRINCIPALES
   ======================================== */

/* Configuración base */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("assets/bg.jpg") center top / cover no-repeat;
  filter: blur(18px) saturate(1.05);
  transform: scale(1.07);      /* un pelín más grande para evitar bordes duros */
  opacity: 0.9;                 /* puedes ajustar 0.8–1 */
}

:root{
  /* ⇣ Ancho máximo del lienzo en desktop (¡así se centra!) */
  --maxw: 1100px;           /* pon 100% para "full-bleed" */
  --float-amp: 12px;        /* amplitud de flotación */
  
  /* ─── Enlace externo configurable ─── */
  --external-link: "https://bit.ly/4q1gYhw";

  /* ─── Logos superiores ─── */
  --mvs-left: 2.6%;  --mvs-top: 2.8%;  --mvs-w: 9.2%;
  --exa-left: 7.0%;  --exa-top: 6.2%;  --exa-w: 14.2%;
  --mejor-left: 79.4%; --mejor-top: 6.8%; --mejor-w: 14.2%;

  /* ─── Logo central ─── */
  --logo-left: 12%;  --logo-top: 12.5%; --logo-w: 70%;

  /* ─── Título banda blanca ─── */
  --titulo-left: 14.5%; --titulo-top: 55%; --titulo-w: 71%;

  /* ─── Banda azul ─── */
  --azul-left: 26.5%; --azul-top: 67%; --azul-w: 47%;

  /* ─── Chips negros + alien ─── */
  --chip-dia-left: 17%; --chips-top: 74%; --chip-dia-w: 29.5%;
  --chip-ufo-left: 50%; --chip-ufo-top-offset: -2%; --chip-ufo-w: 7.8%;
  --chip-estadio-left: 53.5%; --chip-estadio-w: 29.5%;
  
  /* ─── Diamantes en línea con chips ─── */
  --diam-chip-left: 10%; --diam-chip-top: 74%; --diam-chip-w: 4.8%;
  --diam-chip-right-left: 85%; --diam-chip-right-top: 74%; --diam-chip-right-w: 4.8%;

  /* ─── Decorativos ─── */
  --est-verdes-left: 48.8%; --est-verdes-top: 9.8%; --est-verdes-w: 4.8%;
  --est-ojos-left: 56.8%;   --est-ojos-top: 11.2%;  --est-ojos-w: 5.0%;
  --diam-blc-left: 16.4%;   --diam-blc-top: 19.8%;  --diam-blc-w: 4.8%;
  --diam-left: 65.6%;       --diam-top: 17.4%;      --diam-w: 4.6%;
  --planetaL-left: 5.2%;    --planetaL-top: 45%;  --planetaL-w: 8.6%;
  --ovni-left: 85.0%;       --ovni-top: 40.6%;      --ovni-w: 11.2%;

  /* ─── Términos y footer ─── */
  --terminos-left: 32.8%; --terminos-bottom: 18%; --terminos-w: 34.4%;
  --footer-left: 0%; --footer-bottom: 0%; --footer-w: 100%;
  --copyright-left: 0%; --copyright-bottom: 0%; --copyright-w: 100%;
  --copyright-height: 60px;

  --debug-outline: 0; /* 1 para ver contornos mientras acomodas */
}

html, body { 
  height: 100vh; 
  height: 100dvh; /* Altura dinámica del viewport para iOS */
  margin: 0; 
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden; /* Prevenir scroll vertical */
  width: 100%;
}
.stage{
  position: relative;
  width: min(100%, var(--maxw)); /* ⇠ centrado + ancho máximo */
  height: 100vh !important;
  height: 100dvh !important; /* Altura dinámica del viewport para iOS */
  margin: 0 auto;               /* ⇠ centrado horizontal */
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: manipulation;
  background-color: rgba(255, 0, 0, 0.1) !important; /* Fondo rojo muy sutil para debugging */
}

/* Fondo que cubre el alto del lienzo */
.bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}

/* Capas */
.layer{
  position:absolute;
  outline: calc(var(--debug-outline) * 1px) dashed rgba(255,0,0,.6);
}
.layer > img{ display:block; width:100%; height:auto; pointer-events:none; }

.z-back{ z-index:1; } .z-mid{ z-index:2; } .z-top{ z-index:3; }

/* Animaciones espaciales mejoradas */
.float-slow{ animation: float 16s ease-in-out infinite; }
.float-mid { animation: float 12s ease-in-out infinite; }
.float-fast{ animation: float  9s ease-in-out infinite; }
@keyframes float{ 50%{ transform: translateY(calc(var(--float-amp) * -1)); } }

/* Animación de rotación pura para planeta */
.planet-float-spin{ 
  animation: planetRotate 15s linear infinite !important;
  transform-origin: center center;
}

/* Animación de rotación pura */
@keyframes planetRotate{ 
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* Animación sutil para diamantes en línea */
.diamante-sutil{ animation: diamanteSutil 8s ease-in-out infinite; }
@keyframes diamanteSutil{ 
  0%, 100%{ 
    opacity: 0.7; 
    transform: scale(1) rotate(0deg); 
  }
  50%{ 
    opacity: 1; 
    transform: scale(1.05) rotate(5deg); 
  }
}

.twinkle{ animation: twinkle 2.2s ease-in-out infinite alternate; }
@keyframes twinkle{ from{opacity:.65; transform:scale(.97)} to{opacity:1; transform:scale(1)} }

.spin{ animation: spin 18s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg);} }

/* Nuevas animaciones espaciales */
.pulse-glow{ animation: pulseGlow 3s ease-in-out infinite; }
@keyframes pulseGlow{ 
  0%, 100%{ filter: brightness(1) drop-shadow(0 0 5px rgba(0,255,255,0.3)); }
  50%{ filter: brightness(1.2) drop-shadow(0 0 15px rgba(0,255,255,0.6)); }
}

.orbit{ animation: orbit 20s linear infinite; }
@keyframes orbit{ 
  0%{ transform: rotate(0deg) translateX(20px) rotate(0deg); }
  100%{ transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

.wobble{ animation: wobble 4s ease-in-out infinite; }
@keyframes wobble{ 
  0%, 100%{ transform: rotate(0deg) scale(1); }
  25%{ transform: rotate(2deg) scale(1.05); }
  75%{ transform: rotate(-2deg) scale(0.95); }
}

.fade-in{ animation: fadeIn 2s ease-out forwards; }
@keyframes fadeIn{ 
  from{ opacity: 0; transform: translateY(30px) scale(0.8); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.slide-in-left{ animation: slideInLeft 1.5s ease-out forwards; }
@keyframes slideInLeft{ 
  from{ opacity: 0; transform: translateX(-100px); }
  to{ opacity: 1; transform: translateX(0); }
}

.slide-in-right{ animation: slideInRight 1.5s ease-out forwards; }
@keyframes slideInRight{ 
  from{ opacity: 0; transform: translateX(100px); }
  to{ opacity: 1; transform: translateX(0); }
}

.zoom-in{ animation: zoomIn 2s ease-out forwards; }
@keyframes zoomIn{ 
  from{ opacity: 0; transform: scale(0.3); }
  to{ opacity: 1; transform: scale(1); }
}

/* Parpadeo gradual como palpitación para el logo */
.auto-blink{ animation: autoBlink 3s linear infinite; }
@keyframes autoBlink{ 
  0%{ 
    filter: brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0));
  }
  15%{ 
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255,255,255,0.3));
  }
  30%{ 
    filter: brightness(1.3) drop-shadow(0 0 15px rgba(255,255,255,0.4));
  }
  50%{ 
    filter: brightness(1.5) drop-shadow(0 0 25px rgba(255,255,255,0.6));
  }
  70%{ 
    filter: brightness(1.3) drop-shadow(0 0 15px rgba(255,255,255,0.4));
  }
  85%{ 
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255,255,255,0.3));
  }
  100%{ 
    filter: brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0));
  }
}

/* Parpadeo con crecimiento gradual para el OVNI */
.ufo-blink{ animation: ufoBlink 8s ease-in-out infinite; }
@keyframes ufoBlink{ 
  0%, 100%{ 
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0));
  }
  20%{ 
    transform: scale(1.05);
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255,255,255,0.3));
  }
  50%{ 
    transform: scale(1.15);
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(255,255,255,0.5));
  }
  80%{ 
    transform: scale(1.05);
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255,255,255,0.3));
  }
}

/* Efectos hover mejorados */
.clickable{ 
  cursor: pointer; 
  transition: all 0.3s ease;
}
.clickable:hover{ 
  transform: scale(1.1) translateZ(10px);
  filter: brightness(1.2) drop-shadow(0 0 20px rgba(255,255,255,0.5));
}

.clickable:active{ 
  transform: scale(0.95);
}

/* Footer de copyright */
.copyright-footer {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 20px 15px;
  font-size: 12px;
  font-family: "Acumin Pro", "Acumin Variable Concept", Arial, sans-serif;
  border: none;
  border-radius: 0;
  width: 100%;
  position: relative;
}

.footer-text{
  display: block;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}


.copyright-text {
  display: block;
  margin: 0;
}

/* Asegurar que el footer siempre esté visible en móviles */
@media (max-width: 768px) {
  .layer[style*="footer.png"] {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
  }

  .layer[style*="terminos.png"] {
    position: absolute !important;
    z-index: 6 !important;
  }
  
  /* Asegurar que el contenido tenga suficiente altura para mostrar el footer */
  /* .stage {
    padding-bottom: 80px; 
  } */
}

/* Efectos de entrada escalonados */
.entrance-delay-1{ animation-delay: 0.2s; }
.entrance-delay-2{ animation-delay: 0.4s; }
.entrance-delay-3{ animation-delay: 0.6s; }
.entrance-delay-4{ animation-delay: 0.8s; }
.entrance-delay-5{ animation-delay: 1s; }

@media (prefers-reduced-motion: reduce){
  .float-slow,.float-mid,.float-fast,.twinkle,.spin,.pulse-glow,.orbit,.wobble,.fade-in,.slide-in-left,.slide-in-right,.zoom-in,.auto-blink,.ufo-blink,.diamante-sutil{ 
    animation:none !important; 
  }
  /* El planeta siempre debe girar, independientemente de la configuración de movimiento */
  .planet-float-spin {
    animation: planetRotate 6s linear infinite !important;
  }
}

/* ========================================
   SOLUCIÓN PARA PANTALLAS LANDSCAPE
   ======================================== */

/* Para móviles en landscape (iPhone 15 Pro, etc.) */
@media (orientation: landscape) and (max-height: 500px) {
  .stage {
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
  .copyright-footer{
    padding: 10px !important;
    font-size: 4px !important;
  }
  /* Ajustar variables para iPads landscape */
  :root {
    /* Variables específicas para iPads landscape */
    /* ─── Logo central ─── */
  --logo-left: 25% !important;  --logo-top: 5% !important; --logo-w: 50% !important;

  /* ─── Título banda blanca ─── */
  --titulo-left: 22.5% !important; --titulo-top: 35% !important; --titulo-w: 59% !important;

  /* ─── Banda azul ─── */
  --azul-left: 38% !important; --azul-top: 44% !important; --azul-w: 27% !important;

  /* ─── Chips negros + alien ─── */
  --chip-dia-left: 28% !important; --chips-top: 50% !important; --chip-dia-w: 19.5% !important;
  --chip-ufo-left: 51.5% !important; --chip-ufo-top-offset: -1% !important; --chip-ufo-w: 5.8% !important;
  --chip-estadio-left: 53.5% !important; --chip-estadio-w: 19.5% !important;
  
   /* ─── Diamantes en línea con chips ─── */
   --diam-chip-left: 10%; --diam-chip-top: 28% !important; --diam-chip-w: 2.8% !important;
   --diam-chip-right-left: 85% !important; --diam-chip-right-top: 68% !important; --diam-chip-right-w: 4.8% !important;
   --terminos-left: 32.8% !important; --terminos-bottom: 40% !important; --terminos-w: 34.4% !important;
  }
}

/* Para iPads en landscape - ancho limitado a 650px */
@media (orientation: landscape) and (min-width: 768px) and (max-height: 1024px) {
  .stage {
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    
  }
  .copyright-footer{
    padding: 10px !important;
    font-size: 8px !important;
  }
  /* Ajustar variables para iPads landscape */
  :root {
    /* Variables específicas para iPads landscape */
    /* ─── Logo central ─── */
  --logo-left: 12%;  --logo-top: 3.5%; --logo-w: 70%;

  /* ─── Título banda blanca ─── */
  --titulo-left: 14.5%; --titulo-top: 50%; --titulo-w: 71%;

  /* ─── Banda azul ─── */
  --azul-left: 26.5%; --azul-top: 62%; --azul-w: 47%;

  /* ─── Chips negros + alien ─── */
  --chip-dia-left: 17%; --chips-top: 68%; --chip-dia-w: 29.5%;
  --chip-ufo-left: 50%; --chip-ufo-top-offset: -2%; --chip-ufo-w: 7.8%;
  --chip-estadio-left: 53.5%; --chip-estadio-w: 29.5%;
  
   /* ─── Diamantes en línea con chips ─── */
   --diam-chip-left: 10%; --diam-chip-top: 68%; --diam-chip-w: 4.8%;
   --diam-chip-right-left: 85%; --diam-chip-right-top: 68%; --diam-chip-right-w: 4.8%;
   --terminos-left: 32.8%; --terminos-bottom: 23%; --terminos-w: 34.4%;
  }
}

/* Para monitores grandes en landscape - MacBook Pro y pantallas similares */
@media (orientation: landscape) and (min-width: 1200px) {
  .stage {
    width: min(100%, var(--maxw)); /* ⇠ centrado + ancho máximo */
    margin: 0 auto !important;
  
  }
  
  /* Ajustar variables para monitores grandes */
  :root {
     /* ─── Logo central ─── */
  --logo-left: 12%;  --logo-top: 12.5%; --logo-w: 70% !important; /*antes tenia 95%*/
    /* Variables específicas para monitores grandes - Logos más grandes */
    --mvs-left: 2.6%;  --mvs-top: 0.5% !important;  --mvs-w: 12%;
    --exa-left: 6.0%;  --exa-top: 5.5%;  --exa-w: 18%;
    --mejor-left: 76%; --mejor-top: 6.0%; --mejor-w: 18%;
  }
}

/* Media query específica para MacBook Pro */
@media (min-width: 1440px) and (min-height: 900px) {
  .stage {
    /* Border amarillo muy visible */
    width: 1100px !important;
    max-width: 750px !important;
  }
  
  :root {
    /* Logos superiores más grandes para MacBook Pro */
    --mvs-left: 2.6%;  --mvs-top: 2.8%;  --mvs-w: 15%;
    --exa-left: 5.0%;  --exa-top: 5.0%;  --exa-w: 20%;
    --mejor-left: 75%; --mejor-top: 5.5%; --mejor-w: 20%;
    
    /* Logo central más grande */
    --logo-left: 10%;  --logo-top: 10%; --logo-w: 75% !important;
  }
}

/* Media query específica para iPad Portrait */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .stage {
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 auto !important;
  }
  
  :root {
    /* Variables específicas para iPad Portrait */
    --mvs-left: 2%;  --mvs-top: 2%;  --mvs-w: 16%;
    --exa-left: 2%;  --exa-top: 6%;  --exa-w: 26%;
    --mejor-left: 72%; --mejor-top: 6%; --mejor-w: 26%;

    --logo-left: 5%;  --logo-top: 8%; --logo-w: 85% !important;
    --titulo-left: 5%; --titulo-top: 45%; --titulo-w: 85% !important;
    --azul-left: 8%; --azul-top: 58%; --azul-w: 84%;

    --chip-dia-left: 5%; --chips-top: 68%; --chip-dia-w: 40%;
    --chip-ufo-left: 50%; --chip-ufo-top-offset: -4%; --chip-ufo-w: 12%;
    --chip-estadio-left: 55%; --chip-estadio-w: 40%;
    
    --diam-chip-left: 2%; --diam-chip-top: 65% !important; --diam-chip-w: 4% !important;
    --diam-chip-right-left: 90%; --diam-chip-right-top: 65% !important; --diam-chip-right-w: 4% !important;

    --terminos-left: 15%; --terminos-bottom: 20% !important; --terminos-w: 70% !important;
  }
}

/* ========================================
   SOLUCIÓN ESPECÍFICA PARA iOS SAFARI/CHROME
   ======================================== */

/* Solución para el problema de 100vh en iOS */
@supports (-webkit-touch-callout: none) {
  .stage {
    height: -webkit-fill-available !important;
  }
  
  html, body {
    height: -webkit-fill-available;
  }
}

/* ========================================
   ESTILOS MÓVILES - AJUSTAR MANUALMENTE
   ======================================== */

/* Variables específicas para móviles */
@media (max-width: 768px) {
  :root {
    --float-amp: 6px;
    
    /* Ajustes para móviles - elementos más grandes y mejor espaciados */
    --mvs-left: 2%;  --mvs-top: 2%;  --mvs-w: 16%;
    --exa-left: 2%;  --exa-top: 6%;  --exa-w: 24%;
    --mejor-left: 74%; --mejor-top: 6%; --mejor-w: 24%;

    --logo-left: 5%;  --logo-top: 8%; --logo-w: 90%;
    --titulo-left: 5%; --titulo-top: 45%; --titulo-w: 90%;
    --azul-left: 8%; --azul-top: 58%; --azul-w: 84%;

    --chip-dia-left: 5%; --chips-top: 68%; --chip-dia-w: 40%;
    --chip-ufo-left: 50%; --chip-ufo-top-offset: -4%; --chip-ufo-w: 12%;
    --chip-estadio-left: 55%; --chip-estadio-w: 40%;
    
    --diam-chip-left: 2%; --diam-chip-top: 68%; --diam-chip-w: 8%;
    --diam-chip-right-left: 90%; --diam-chip-right-top: 68%; --diam-chip-right-w: 8%;

    --est-verdes-left: 48%; --est-verdes-top: 8%; --est-verdes-w: 8%;
    --est-ojos-left: 60%;   --est-ojos-top: 10%;  --est-ojos-w: 8%;
    --diam-blc-left: 8%;   --diam-blc-top: 18%;  --diam-blc-w: 8%;
    --diam-left: 84%;       --diam-top: 16%;      --diam-w: 8%;
    --planetaL-left: 0%;    --planetaL-top: 35%;  --planetaL-w: 15%;
    --ovni-left: 85%;       --ovni-top: 32%;      --ovni-w: 15%;

    --terminos-left: 15%; --terminos-bottom: 12%; --terminos-w: 70%;
    --copyright-left: 0%; --copyright-bottom: 0%; --copyright-w: 100%;
    --copyright-height: 60px;
  }
  
  .stage {
    height: 100vh !important;
    height: 100dvh !important; /* Altura dinámica del viewport para iOS */
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    position: relative;
  }
  
  .layer {
    position: absolute;
  }
  
  .layer img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* Reducir animaciones en móviles para mejor rendimiento */
  .float-slow { animation-duration: 25s; }
  .float-mid { animation-duration: 20s; }
  .float-fast { animation-duration: 15s; }
  .twinkle { animation-duration: 4s; }
  .spin { animation-duration: 30s; }
  .pulse-glow { animation-duration: 5s; }
  .orbit { animation-duration: 30s; }
  .wobble { animation-duration: 6s; }
  .auto-blink { animation-duration: 10s; }
  .ufo-blink { animation-duration: 12s; }
  .planet-float-spin { animation-duration: 6s; }
  .diamante-sutil { animation-duration: 12s; }
  
  /* Mejorar la legibilidad en móviles */
  .clickable:hover {
    transform: scale(1.02);
  }
  
  /* Asegurar que los elementos no se salgan de la pantalla */
  .layer[style*="left: -"] {
    left: 0% !important;
  }
  
  .layer[style*="left: 1"] {
    left: 1% !important;
  }
  
  /* Footer de copyright en móviles */
  .copyright-footer {
    font-size: 10px;
    padding: 10px;
    margin: 0;
    position: relative;
    width: 100%;
    background: #000;
  }
  
  
  /* Footer.png más grande en móviles */
  .layer[style*="footer.png"] img {
    transform: scale(1.2);
  }
}

@media (max-width: 480px) {
  :root {
    --float-amp: 4px;
    
    /* Ajustes para móviles pequeños */
    --mvs-left: 1%;  --mvs-top: 1%;  --mvs-w: 15%;
    --exa-left: 1%;  --exa-top: 5%;  --exa-w: 23%;
    --mejor-left: 73%; --mejor-top: 5%; --mejor-w: 26%;

    --logo-left: 1%;  --logo-top: 12%; --logo-w: 92%;
    --titulo-left: 3%; --titulo-top: 50%; --titulo-w: 94%;
    --azul-left: 5%; --azul-top: 60%; --azul-w: 90%;

    --chip-dia-left: 3%; --chips-top: 68%; --chip-dia-w: 42%;
    --chip-ufo-left: 50%; --chip-ufo-top-offset: -2%; --chip-ufo-w: 14%;
    --chip-estadio-left: 55%; --chip-estadio-w: 42%;
    
    --diam-chip-left: 1%; --diam-chip-top: 59%; --diam-chip-w: 6%;
    --diam-chip-right-left: 89%; --diam-chip-right-top: 59%; --diam-chip-right-w: 6%;

    --est-verdes-left: 48%; --est-verdes-top: 6%; --est-verdes-w: 10%;
    --est-ojos-left: 62%;   --est-ojos-top: 8%;  --est-ojos-w: 10%;
    --diam-blc-left: 6%;   --diam-blc-top: 16%;  --diam-blc-w: 10%;
    --diam-left: 84%;       --diam-top: 14%;      --diam-w: 10%;
    --planetaL-left: 5%;    --planetaL-top: 38%;  --planetaL-w: 10%;
    --ovni-left: 35%;       --ovni-top: 5%;      --ovni-w: 12%;
    --footer-left: 0%; --footer-bottom: 0%; --footer-w: 100%;
    --terminos-left: 10%; --terminos-bottom: 20%; --terminos-w: 80%;
    --copyright-left: 0%; --copyright-bottom: 0%; --copyright-w: 100%;
    --copyright-height: 70px;
  }
  
  .stage {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    height: 100vh !important;
    height: 100dvh !important; /* Altura dinámica del viewport para iOS */
  }
  
  /* Reducir aún más las animaciones en móviles pequeños */
  .float-slow { animation-duration: 30s; }
  .float-mid { animation-duration: 25s; }
  .float-fast { animation-duration: 20s; }
  .twinkle { animation-duration: 5s; }
  .spin { animation-duration: 35s; }
  .pulse-glow { animation-duration: 6s; }
  .orbit { animation-duration: 35s; }
  .wobble { animation-duration: 7s; }
  .auto-blink { animation-duration: 12s; }
  .ufo-blink { animation-duration: 15s; }
  .planet-float-spin { animation-duration: 6s; }
  .diamante-sutil { animation-duration: 15s; }
  
  /* Ajustar efectos hover para pantallas táctiles */
  .clickable:hover {
    transform: scale(1.01);
  }
  
  /* Footer de copyright en móviles pequeños */
  .copyright-footer {
    font-size: 9px;
    padding: 8px;
    margin: 0;
    position: relative;
    width: 100%;
    background: #000;
  }
  
  
  /* Footer.png aún más grande en móviles pequeños */
  .layer[style*="footer.png"] img {
    transform: scale(1.4);
  }
}

/* Móviles muy pequeños */
@media (max-width: 360px) {
  .stage {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    height: 100vh !important;
    height: 100dvh !important; /* Altura dinámica del viewport para iOS */
    padding-bottom: 0; /* Eliminado para evitar scroll */
  }
  
  /* Desactivar algunas animaciones en móviles muy pequeños */
  .orbit, .wobble {
    animation: none !important;
  }
  
  /* Footer de copyright en móviles muy pequeños */
  .copyright-footer {
    font-size: 8px;
    padding: 6px;
    margin: 0;
    position: relative;
    width: 100%;
    background: #000;
  }
  
  
  /* Footer.png más grande en móviles muy pequeños */
  .layer[style*="footer.png"] img {
    transform: scale(1.6);
  }
  
  /* Asegurar que el footer sea visible */
  .layer[style*="footer.png"] {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
  }
  
  .layer[style*="terminos.png"] {
    position: absolute !important;
    bottom: 20px !important;
    z-index: 6 !important;
  }
}

/* Dispositivos muy pequeños como iPhone 15/16 Pro */
@media (max-width: 393px) and (max-height: 852px) {
  .stage {
    height: 100vh !important;
    height: 100dvh !important; /* Altura dinámica del viewport para iOS */
    padding-bottom: 0; /* Eliminado para evitar scroll */
  }
  
  /* Ajustar posiciones para pantallas muy pequeñas */
  :root {
    --titulo-top: 45%;
    --azul-top: 55%;
    --chips-top: 65%;
    --terminos-bottom: 18%;
  }
  
  /* Footer más prominente */
  .layer[style*="footer.png"] {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
  }
  
  .layer[style*="footer.png"] img {
    transform: scale(1.8);
  }
  
  .copyright-footer {
    font-size: 9px;
    padding: 8px;
    margin: 0;
    position: relative;
    width: 100%;
    background: #000;
  }
  
}