/* ==========================================
   0. MENSAJE DE BIENVENIDA (pantalla al abrir el sitio)
   ========================================== */
#mensaje-bienvenida {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  box-sizing: border-box;
  text-align: center;
  background-color: #0d0d15;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 40% 85%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1.5px 1.5px at 90% 50%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 10% 65%, rgba(255, 255, 255, 0.25), transparent);
  background-repeat: repeat;
  background-size: 220px 220px;
  opacity: 1;
  transition: opacity 0.8s ease;
}

#mensaje-bienvenida.bienvenida-oculta {
  opacity: 0;
  pointer-events: none;
}

/* estrellitas titilantes extra, generadas por JS */
.bienvenida-estrellas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bienvenida-nebulosa {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 183, 110, 0.35), rgba(185, 95, 145, 0.25) 55%, transparent 75%);
  filter: blur(70px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  animation: nebulaDrift1 18s ease-in-out infinite;
}

.estrella-bienvenida {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #EAD7C3 60%, transparent 100%);
  box-shadow: 0 0 6px rgba(234, 215, 195, 0.8);
  animation: titilarEstrella 2.6s ease-in-out infinite;
}

.bienvenida-contenido {
  position: relative;
  z-index: 1;
  max-width: 480px;
  opacity: 0;
  transform: translateY(12px);
  animation: apareceBienvenida 1.4s ease forwards;
  animation-delay: 0.3s;
}

@keyframes apareceBienvenida {
  to { opacity: 1; transform: translateY(0); }
}

.scratch-wrapper {
  position: relative;
  border-radius: 14px;
  margin-bottom: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.bienvenida-texto {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #F8F1E5;
  white-space: pre-line;
  text-align: justify;
  text-align-last: center;
  margin: 0;
  padding: 4px;
}

.canvas-rascar {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 14px;
  cursor: pointer;
  touch-action: none;
  transition: opacity 0.65s ease;
}

.canvas-rascar.canvas-revelado {
  opacity: 0;
  pointer-events: none;
}

.btn-cerrar-bienvenida {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  background: linear-gradient(45deg, #FB8500, #FFB703);
  color: #111111;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(251, 133, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-cerrar-bienvenida::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: brilloBoton 2.8s ease-in-out infinite;
}

@keyframes brilloBoton {
  0% { left: -60%; }
  50% { left: 130%; }
  100% { left: 130%; }
}

.btn-brillo-icono {
  display: inline-block;
  animation: latirIconoBoton 1.6s ease-in-out infinite;
}

@keyframes latirIconoBoton {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.25) rotate(12deg); }
}

.btn-cerrar-bienvenida:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(251, 133, 0, 0.6);
}

/* ==========================================
   1. RESET Y CONFIGURACIÓN GENERAL
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  font-size: 14px;
}

html {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
  touch-action: manipulation;

  /* Bloquea el scroll horizontal */
  overflow-x: hidden;

  /* Permite solo el scroll vertical — html es el ÚNICO contenedor scrolleable */
  overflow-y: auto;

  /* Oculta la barra en Firefox e Internet Explorer/Edge */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
  touch-action: manipulation;

  /* body ya NO tiene overflow-y: auto, para que no compita con html
     por el control del gesto de scroll en iOS */
  overflow-x: hidden;
  overflow-y: visible;

  background-color: #0d0d15;
}

/* Oculta completamente la barra de desplazamiento en Chrome, Safari y navegadores de celulares */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================
   FONDO DE PROFUNDIDAD: el "cielo" deja de ser un color fijo.
   - Tres capas de color se cruzan lentamente según el scroll,
     como si se atravesaran distintas zonas del espacio en el viaje.
   - Unas nebulosas muy tenues flotan solas, con vida propia,
     casi sin notarse pero dando sensación de que hay algo detrás.
   ========================================== */
#fondo-profundidad {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 40% 85%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1.5px 1.5px at 90% 50%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 10% 65%, rgba(255, 255, 255, 0.25), transparent);
  background-repeat: repeat;
  background-size: 220px 220px;
  background-color: #0d0d15;
  transition: background-color 1.2s ease;
}

.nebulosa {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}

.nebulosa-1 {
  width: 380px;
  height: 380px;
  top: 4%;
  left: -12%;
  background: radial-gradient(circle, rgba(95, 105, 190, 0.55), transparent 70%);
  animation: nebulaDrift1 120s ease-in-out infinite;
}

.nebulosa-2 {
  width: 340px;
  height: 340px;
  top: 48%;
  right: -14%;
  background: radial-gradient(circle, rgba(185, 95, 145, 0.5), transparent 70%);
  animation: nebulaDrift2 150s ease-in-out infinite;
}

.nebulosa-3 {
  width: 420px;
  height: 420px;
  bottom: -6%;
  left: 22%;
  background: radial-gradient(circle, rgba(234, 183, 110, 0.45), transparent 70%);
  animation: nebulaDrift3 170s ease-in-out infinite;
}

@keyframes nebulaDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, 45px) scale(1.15); }
}

@keyframes nebulaDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, -35px) scale(1.1); }
}

@keyframes nebulaDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(45px, -55px) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .nebulosa { animation: none; }
}

/* La portada tiene su propio video de fondo, contenido solo a esa sección */
.portada {
  position: relative;
  overflow: hidden;
}

.portada::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
  pointer-events: none;
}

/* Video de fondo, solo dentro de la portada */
#video-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  transition: transform 0.2s linear, filter 0.2s linear;
  will-change: transform, filter;
}

.contenido-portada {
  transition: transform 0.2s linear, opacity 0.2s linear;
  will-change: transform, opacity;
}

/* ==========================================
   2. TIPOGRAFÍA Y ESCALA DE TÍTULOS
   ========================================== */
h1 {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: #F8F1E5 !important;
  text-shadow: 2px 2px 10px rgba(248, 241, 229, 0.2) !important;
  margin-bottom: 8px;
  padding: 0 15px !important;
  word-wrap: break-word;
  letter-spacing: 0.5px; /* Espaciado elegante entre letras */
}

h2 {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-size: 1.5rem !important; /* Más compacto para que entre impecable */
  font-weight: 600 !important;
  font-style: normal !important;
  color: #F8F1E5 !important;
  text-shadow: 2px 2px 10px rgba(248, 241, 229, 0.2) !important;
  margin-bottom: 12px;
  max-width: 420px !important;
  width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  line-height: 1.3 !important;
  letter-spacing: 0.5px;
}

h3 {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: #F8F1E5 !important;
  margin-bottom: 8px;
}

p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e0e0e0;
}

/* Secciones de pantalla completa */
.fase {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 15px;
  text-align: center;
  box-sizing: border-box;
}

/* Estas dos secciones no necesitan forzar pantalla completa:
   el contenido es corto, así que solo ocupan el alto que usan */
#fase-contador,
#fase-musica {
  min-height: auto;
  padding: 150px 15px;
}

/* Revelado progresivo al scrollear (todas las secciones excepto la portada) */
/* Entran desenfocadas, achicadas y desplazadas, como si vinieran de atrás
   hacia adelante, y se "asientan" en foco al llegar a su lugar */
.fase:not(.portada) {
  opacity: 0;
  transform: translateY(45px) scale(0.94);
  filter: blur(7px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 1.1s ease;
  will-change: transform, filter, opacity;
}

.fase:not(.portada).fase-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

/* ==========================================
   3. FASE 1: PORTADA Y BOTÓN
   ========================================== */
.titulo-animado {
  font-size: 2.2rem;
}

.titulo-animado .cursor-escritura {
  display: inline-block;
  width: 2px;
  margin-left: 2px;
  background: #F8F1E5;
  animation: parpadeoCursor 0.8s infinite;
}

@keyframes parpadeoCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.subtitulo {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* ==========================================
   4. FASE 2: CONTADOR DE TIEMPO
   ========================================== */
.tarjeta-contador {
  max-width: 320px;
  width: 85%;
  margin: 10px auto;
  padding: 15px 10px;
  background: rgba(15, 15, 25, 0.75);
  border: 1px solid rgba(255, 183, 3, 0.3);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  text-align: center;
  transition: box-shadow 1.1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(0);
}

.fase-visible .tarjeta-contador {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  animation: brilloTarjeta 3.5s infinite ease-in-out;
}

.subtitulo-contador {
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.reloj-grid {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.caja-tiempo {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 183, 3, 0.2);
  border-radius: 8px;
  padding: 6px 2px;
  flex: 1;
  max-width: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.numero-tiempo {
  font-size: 1.1rem;
  font-weight: bold;
  color: #FFB703;
  line-height: 1;
  display: inline-block;
}

.numero-tiempo.numero-cambio {
  animation: pulsoNumero 0.4s ease;
}

@keyframes pulsoNumero {
  0% { transform: translateY(-8px); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes brilloTarjeta {
  0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 183, 3, 0); }
  50% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 183, 3, 0.35); }
}

.etiqueta-tiempo {
  font-size: 0.6rem;
  color: #aaa;
  margin-top: 4px;
  text-transform: uppercase;
}

.frase-contador {
  margin-top: 12px;
  font-size: 0.8rem;
  color: #FB8500;
  font-style: italic;
}

/* ==========================================
   SOBRE INTERACTIVO Y MODAL DE CARTA
   ========================================== */
.contenedor-sobre {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px auto;
}

.sobre {
  position: relative;
  width: 200px;
  height: 130px;
  background-color: #d90429;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sobre:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(217, 4, 41, 0.4);
}

.solapa {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 75px solid #ef233c;
  transform-origin: top;
  transition: transform 0.4s ease;
  z-index: 3;
}

.cuerpo-sobre {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 100px solid #d90429;
  border-right: 100px solid #d90429;
  border-bottom: 70px solid #b7094c;
  border-radius: 0 0 8px 8px;
  z-index: 2;
}

.corazon-sello {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -20%);
  font-size: 1.8rem;
  z-index: 4;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4));
}

/* --- VENTANA EMERGENTE / MODAL DE LA CARTA --- */
.modal-carta-fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 18, 0.85); /* Fondo oscuro semitransparente con blur */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  
  /* Estado oculto inicial */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.modal-carta-fondo.activo {
  opacity: 1;
  pointer-events: auto;
}

.modal-carta-contenido {
  position: relative;
  width: 100%;
  max-width: 380px; /* Ancho cómodo alineado a la vista del celular */
  max-height: 80vh; /* Ocupa hasta el 80% del alto de pantalla */
  background: #FFFDF9; /* Fondo papel crema muy suave */
  border: 1px solid #EAD7C3;
  border-radius: 18px;
  padding: 25px 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
  
  /* HABILITA EL SCROLL INTERNO SI EL TEXTO ES LARGO */
  overflow-y: auto;
  
  /* Animación de apertura */
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-carta-fondo.activo .modal-carta-contenido {
  transform: translateY(0) scale(1);
}

/* Botón para cerrar (X) */
.btn-cerrar-carta {
  position: absolute;
  top: 12px;
  right: 15px;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  font-size: 1.2rem;
  color: #555;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.btn-cerrar-carta:hover {
  background: rgba(0, 0, 0, 0.15);
  color: #000;
}

/* Estilos de texto dentro del papel */
.cuerpo-papel-carta h3 {
  font-family: 'Playfair Display', serif !important;
  color: #b7094c !important;
  font-size: 1.4rem !important;
  margin-top: 5px;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: none !important;
}

.cuerpo-papel-carta p {
  color: #2b2b2b !important; /* Texto oscuro bien legible sobre hoja clara */
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: justify;
}

.firma-carta {
  font-weight: 600;
  text-align: right !important;
  color: #b7094c !important;
  margin-top: 20px;
}

/* ==========================================
   RAZONES POR LAS QUE TE AMO (constelación)
   ========================================== */
.instruccion-constelacion {
  color: rgba(248, 241, 229, 0.55);
  font-size: 0.8rem;
  margin-top: -6px;
  margin-bottom: 4px;
}

.constelacion-razones {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 400px; /* antes: 260px — más alto para acomodar más estrellas */
  margin: 10px auto 0;
  background: radial-gradient(ellipse at center, rgba(15, 15, 25, 0.55), transparent 75%);
  border-radius: 20px;
}

.svg-constelacion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.linea-constelacion {
  fill: none;
  stroke: rgba(234, 215, 195, 0.25);
  stroke-width: 0.4;
  stroke-dasharray: 1.2 1.6;
  vector-effect: non-scaling-stroke;
}

.estrella-razon {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.3);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.estrella-razon.aparecida {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.punto-estrella {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #ffffff 40%, transparent 100%);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 14px rgba(255, 255, 255, 0.5); 
  animation: titilarEstrella 2.6s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

@keyframes titilarEstrella {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.estrella-razon.estrella-activa .punto-estrella {
  transform: scale(1.8);
  background: radial-gradient(circle, #fff, #FFB703 60%, transparent 100%);
  box-shadow: 0 0 16px rgba(255, 183, 3, 0.9);
  animation: none;
}

.panel-razon {
  max-width: 300px;
  min-height: 60px;
  margin: 6px auto 0;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-razon p {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #F8F1E5;
  text-align: center;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.panel-razon p.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================
   FASE 3: FOTOS EN CONSTELACIÓN (ZIGZAG) + LIGHTBOX
   ========================================== */
.instruccion-galeria {
  text-align: center;
  color: rgba(248, 241, 229, 0.6);
  font-size: 0.8rem;
  margin-top: -8px;
  margin-bottom: 16px;
}

 .constelacion-fotos{
  position: relative;
  max-width: 390px; /* antes: 360px — aprovecha más el ancho del iPhone */
  margin: 0 auto;
}

/* La espina dorsal dorada que conecta todas las fotos, de punta a punta */
.constelacion-fotos::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(234, 215, 195, 0.05), rgba(234, 215, 195, 0.5), rgba(234, 215, 195, 0.05));
}

.constelacion-fotos {
  perspective: 900px;
}

.nodo-constelacion {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 14px; /* antes: 10px */
  margin-bottom: 90px; /* antes: 34px — más aire entre nodos */
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.nodo-izquierda {
  transform: translateY(24px) translateX(-10px) scale(0.96);
}

.nodo-derecha {
  transform: translateY(24px) translateX(10px) scale(0.96);
}

.nodo-constelacion.nodo-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

.nodo-constelacion:last-child {
  margin-bottom: 6px;
}

/* Nodo izquierda: foto a la izquierda, texto a la derecha */
.nodo-izquierda .foto-nodo { grid-column: 1; grid-row: 1; justify-self: end; }
.nodo-izquierda .texto-nodo { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; }

/* Nodo derecha: foto a la derecha, texto a la izquierda */
.nodo-derecha .foto-nodo { grid-column: 3; grid-row: 1; justify-self: start; }
.nodo-derecha .texto-nodo { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }

.punto-nodo {
  grid-column: 2;
  grid-row: 1; /* Forzar que el punto también esté en la fila 1 */
  align-self: start;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #EAD7C3 60%, transparent 100%);
  box-shadow: 0 0 8px rgba(234, 215, 195, 0.7);
  animation: titilarEstrella 2.6s ease-in-out infinite;
  margin-top: 5px;
}

/* La foto conserva su propia proporción real, sin recortar */
.foto-nodo {
  position: relative;
  cursor: pointer;
  max-width: 155px; /* antes: 130px */
  max-height: 200px; /* antes: 170px */
  align-self: start;
}

.foto-nodo img,
.foto-nodo video {
  display: block;
  max-width: 155px; /* antes: 130px */
  max-height: 200px; /* antes: 170px */
  width: auto;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(234, 215, 195, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.85s ease;
}

.nodo-visible .foto-nodo img,
.nodo-visible .foto-nodo video {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.foto-nodo:active img,
.foto-nodo:active video {
  transform: scale(1.05);
}

.foto-nodo-video .icono-play-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.3rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.texto-nodo {
  font-size: 0.8rem;
  line-height: 1.35;
  color: #E6D5C3;
  margin: 0;
  margin-top: 3px; /* Nivelado exacto a la primera línea */
  max-width: 175px; /* antes: 155px — acompaña a la foto más grande */
  align-self: start; /* Evita que el texto caiga abajo si el nodo es alto */
}

/* LIGHTBOX */
.lightbox-fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(8, 8, 14, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-fondo.activo {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-contenido {
  max-width: 92vw;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-contenido img,
.lightbox-contenido video {
  max-width: 92vw;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
}

.lightbox-pie {
  color: #E6D5C3;
  text-align: center;
  font-size: 0.9rem;
  margin-top: 16px;
  padding: 0 10px;
}

.btn-cerrar-lightbox {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(234, 215, 195, 0.3);
  color: #F8F1E5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
}

.btn-nav-lightbox {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(234, 215, 195, 0.3);
  color: #F8F1E5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 2;
}

.btn-nav-ant { left: 12px; }
.btn-nav-sig { right: 12px; }
/* Forzar a que foto, punto y texto estén SIEMPRE en la misma fila 1 */
.nodo-constelacion .foto-nodo,
.nodo-constelacion .punto-nodo,
.nodo-constelacion .texto-nodo {
  grid-row: 1;
}

/* ==========================================
   7. ESTILO DE VIDEOS (MARCO ELEGANTE)
   ========================================== */
.contenedor-videos {
  width: 92% !important;
  max-width: 340px !important;
  margin: 20px auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 0 45px rgba(234, 215, 195, 0.12) !important; /* Halo suave, sin caja sólida */
  box-sizing: border-box !important;
}

.contenedor-videos video {
  width: 100% !important;
  height: auto !important;
  max-height: 65vh !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  border: 1px solid rgba(234, 215, 195, 0.25) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5) !important;
  display: block !important;
}
/* ==========================================
   8. REPRODUCTOR DE MÚSICA — CARRUSEL DE PORTADAS
   ========================================== */
.instruccion-musica {
  font-size: 0.8rem;
  opacity: 0.75;
  margin-bottom: 10px;
}

.reproductor-carrusel {
  max-width: 340px;
  width: 90%;
  margin: 10px auto;
  padding: 26px 15px 20px;
  background: rgba(15, 15, 25, 0.8);
  border: 1px solid rgba(255, 183, 3, 0.3);
  border-radius: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  transition: box-shadow 1.1s ease;
}

.fase-visible .reproductor-carrusel {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

/* Pista/carril del carrusel: contenedor con perspectiva donde flotan las portadas */
.carrusel-pistas {
  position: relative;
  width: 100%;
  height: 150px;
  margin-bottom: 16px;
  perspective: 900px;
  touch-action: pan-y;
  overflow: hidden;
}

/* Cada portada de canción, posicionada de forma absoluta y desplazada por JS
   según la distancia a la canción activa (efecto "coverflow") */
.pista-carrusel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118px;
  height: 118px;
  margin-left: -59px;
  margin-top: -59px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(234, 215, 195, 0.25);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
}

.pista-carrusel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La portada de la canción que suena ahora, destacada */
.pista-carrusel.activa {
  border-color: rgba(255, 183, 3, 0.6);
  box-shadow: 0 0 22px rgba(255, 183, 3, 0.35), 0 12px 30px rgba(0, 0, 0, 0.6);
}

/* Fallback prolijo mientras no subiste la imagen real de portada */
.pista-carrusel.sin-portada {
  background: linear-gradient(135deg, rgba(255, 183, 3, 0.18), rgba(234, 215, 195, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pista-carrusel.sin-portada::after {
  content: '🎵';
  font-size: 2rem;
  opacity: 0.55;
}

.pista-carrusel.activa.animando {
  animation: latidoPortada 2s infinite ease-in-out;
}

@keyframes latidoPortada {
  0% { box-shadow: 0 0 22px rgba(255, 183, 3, 0.35), 0 12px 30px rgba(0, 0, 0, 0.6); }
  50% { box-shadow: 0 0 32px rgba(255, 183, 3, 0.55), 0 12px 30px rgba(0, 0, 0, 0.6); }
  100% { box-shadow: 0 0 22px rgba(255, 183, 3, 0.35), 0 12px 30px rgba(0, 0, 0, 0.6); }
}

.info-cancion-actual {
  text-align: center;
  margin-bottom: 12px;
  min-height: 40px;
}

.titulo-cancion {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #F8F1E5;
  margin: 0 0 2px;
}

.artista-cancion {
  font-size: 0.75rem;
  color: #B8ADA0;
  margin: 0;
}

.contenedor-progreso {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 0.68rem;
  color: #aaa;
  margin-bottom: 14px;
}

.contenedor-progreso input[type="range"] {
  flex: 1;
  height: 3px;
  accent-color: #FFB703;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
}

.controles-musica {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.btn-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 183, 3, 0.2);
  color: #FFB703;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.btn-control:hover {
  transform: scale(1.1);
  background: rgba(255, 183, 3, 0.2);
}

.btn-play {
  background: linear-gradient(45deg, #FB8500, #FFB703);
  border: none;
  color: #111;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(251, 133, 0, 0.5);
  transition: transform 0.2s;
}

.btn-play:hover {
  transform: scale(1.08);
}

/* ==========================================
   EFECTOS & ESTRELLAS FUGACES
   ========================================== */
#contenedor-estrellas-fugaces {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@keyframes caidaEstrellaFugaz {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(-800px) translateY(800px) rotate(-45deg);
    opacity: 0;
  }
}

/* ==========================================
   CAMBIO DE COLORES: PALETA BEIGE PASTEL & CREMA
   ========================================== */

/* Títulos principales (Crema suave con brillo sutil) */
h1, h2, h3 {
  color: #F8F1E5 !important; 
  text-shadow: 2px 2px 10px rgba(248, 241, 229, 0.25) !important;
}

/* Subtítulos y textos destacados */
.subtitulo, .subtitulo-contador {
  color: #E2D4C3 !important;
}

/* Números del contador de tiempo */
.numero-tiempo {
  color: #F3E5D8 !important;
}

/* Frase del contador e instrucción del sobre */
.frase-contador, .instruccion-sobre, .pie-foto {
  color: #E6D5C3 !important;
}

/* Botón principal (Comenzar) */
.btn-empezar {
  background: linear-gradient(45deg, #EAD7C3, #FAF3EB) !important;
  color: #2B231D !important; /* Texto en café oscuro muy elegante */
  box-shadow: 0 4px 15px rgba(234, 215, 195, 0.3) !important;
}

.btn-empezar:hover {
  box-shadow: 0 6px 18px rgba(234, 215, 195, 0.5) !important;
}

/* Botón flotante de música y botón Play */
.btn-play {
  background: linear-gradient(45deg, #EAD7C3, #FAF3EB) !important;
  color: #2B231D !important;
  box-shadow: 0 4px 18px rgba(234, 215, 195, 0.4) !important;
}

/* Bordes finos de tarjetas, sobres y reproductores */
.tarjeta-contador, 
.diapositiva, 
.caja-tiempo, 
.reproductor-carrusel,
.pista-carrusel,
.btn-control {
  border-color: rgba(234, 215, 195, 0.35) !important;
}

.pista-carrusel.activa {
  border-color: rgba(234, 215, 195, 0.7) !important;
}

/* Slider y detalles del reproductor */
.contenedor-progreso input[type="range"] {
  accent-color: #EAD7C3 !important;
}

.btn-control {
  color: #F8F1E5 !important;
}
/* Chispas de corazones al tocar el sobre */
.chispa-sello {
  position: fixed;
  pointer-events: none;
  z-index: 999998;
  animation: estallidoSello 1s forwards ease-out;
}

@keyframes estallidoSello {
  0% { transform: translate(0, 0) scale(0.6); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: 0; }
}

/* Confeti de corazones al llegar al mensaje final */
.confeti-final {
  position: fixed;
  top: -10%;
  pointer-events: none;
  z-index: 5;
  animation: caerConfeti linear forwards;
}

@keyframes caerConfeti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0.2; }
}

.cierre-final {
  max-width: 480px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.separador-final {
  color: rgba(234, 215, 195, 0.55);
  font-size: 1.3rem;
  margin-bottom: 22px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.texto-filosofico {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #D9CBBA;
  text-align: center;
  margin: 0 0 26px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 0.3s;
}

.mensaje-final .texto-final {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
  color: #F8F1E5;
  text-align: center;
  margin: 0 0 22px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 0.7s;
}

.corazon-latido {
  display: inline-block;
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 1.2s;
  animation: latidoCorazonFinal 1.3s infinite ease-in-out;
  animation-play-state: paused;
}

@keyframes latidoCorazonFinal {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.18); }
  40% { transform: scale(0.95); }
  60% { transform: scale(1.1); }
}

.mensaje-final.fase-visible .separador-final {
  opacity: 1;
  transform: scale(1);
}

.mensaje-final.fase-visible .texto-filosofico {
  opacity: 1;
  transform: translateY(0);
}

.mensaje-final.fase-visible .texto-final {
  opacity: 1;
  transform: scale(1);
}

.mensaje-final.fase-visible .corazon-latido {
  opacity: 1;
  animation-play-state: running;
}

/* Secciones de video: no fuerzan pantalla completa, para no dejar aire vacío */
.fase-video {
  min-height: auto !important;
  padding: 150px 15px !important;
  position: relative;
  overflow: hidden;
}

.fase-video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(234, 215, 195, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.fase-video h2,
.fase-video .contenedor-videos {
  position: relative;
  z-index: 1;
}

/* ==========================================
   1. NAVE DE RICK Y MORTY VOLADORA
   ========================================== */
#nave-rick {
  position: fixed;
  width: 100px;
  height: auto;
  z-index: -1;
  pointer-events: none;
  transition: all 4.5s ease-in-out;
  filter: drop-shadow(0 0 10px rgba(234, 215, 195, 0.55));
  opacity: 0.92;
  top: 10%;
  left: 10%;
}

#nave-rick img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================
   2. PALETA BEIGE PASTEL & CREMA
   ========================================== */
h1, h2, h3 {
  color: #F8F1E5 !important; 
  text-shadow: 2px 2px 10px rgba(248, 241, 229, 0.25) !important;
}

.subtitulo, .subtitulo-contador {
  color: #E2D4C3 !important;
}

.numero-tiempo {
  color: #F3E5D8 !important;
}

.frase-contador, .instruccion-sobre, .pie-foto {
  color: #E6D5C3 !important;
}

.btn-empezar {
  background: linear-gradient(45deg, #EAD7C3, #FAF3EB) !important;
  color: #2B231D !important;
  box-shadow: 0 4px 15px rgba(234, 215, 195, 0.3) !important;
}

.btn-play {
  background: linear-gradient(45deg, #EAD7C3, #FAF3EB) !important;
  color: #2B231D !important;
  box-shadow: 0 4px 18px rgba(234, 215, 195, 0.4) !important;
}

.tarjeta-contador, 
.diapositiva, 
.caja-tiempo, 
.reproductor-carrusel,
.pista-carrusel,
.btn-control {
  border-color: rgba(234, 215, 195, 0.35) !important;
}

.pista-carrusel.activa {
  border-color: rgba(234, 215, 195, 0.7) !important;
}

.contenedor-progreso input[type="range"] {
  accent-color: #EAD7C3 !important;
}

.btn-control {
  color: #F8F1E5 !important;
}
/* ==========================================
   BOTÓN DEL PORTAL (ESTILO TRANSLÚCIDO)
   ========================================== */
#btn-portal-rick {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(234, 215, 195, 0.35); /* Dorado, en línea con el resto del sitio */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(234, 215, 195, 0.25);
}

#btn-portal-rick:hover {
  transform: scale(1.15) rotate(20deg);
  background: rgba(234, 215, 195, 0.15);
  box-shadow: 0 0 15px rgba(234, 215, 195, 0.55);
}

/* Partículas del portal */
.particula-portal {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  animation: animacionPortal 1.8s forwards ease-out;
}

@keyframes animacionPortal {
  0% { 
    transform: translateY(0) scale(0.8) rotate(0deg); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(-120px) scale(1.8) rotate(180deg); 
    opacity: 0; 
  }
}
/* ==========================================
   MONITO CUERPO ENTERO (ALINEADO AL MARCO)
   ========================================== */
#monito-acompanante {
  position: fixed;
  bottom: 15px;
  /* Se mantiene alineado estrictamente dentro del margen central de las nubes */
  left: max(15px, calc(50vw - 210px)) !important;
  width: 65px;
  height: 80px;
  z-index: 99999;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: flotarMonito 3.5s infinite ease-in-out;
}

.svg-monito {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Animación de balanceo de cola */
.cola-monito {
  transform-origin: 30px 95px;
  animation: moverCola 2.5s infinite ease-in-out;
}

@keyframes moverCola {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(12deg); }
}

/* Flotación suave constante */
@keyframes flotarMonito {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

/* ANIMACIÓN: RASCARSE LA CABEZA */
.monito-rascar .brazo-derecho .forma-brazo {
  d: path("M 68 68 Q 85 45 70 32") !important; /* Mueve la manito a la cabeza */
}

.monito-rascar #monito-acompanante,
.monito-rascar .svg-monito {
  animation: rascadoCabeza 1.2s ease-in-out !important;
}

@keyframes rascadoCabeza {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  40% { transform: rotate(-5deg); }
  60% { transform: rotate(-12deg); }
  75% { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

/* ANIMACIÓN: SALTO AL TOCARLO */
.monito-salto {
  animation: saltoAlegre 0.6s ease !important;
}

@keyframes saltoAlegre {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-22px) scale(1.15) rotate(-6deg); }
  100% { transform: translateY(0) scale(1); }
}

/* ANIMACIÓN: DESPEDIDA FINAL — baila mientras cruza la pantalla */
.monito-despedida {
  animation: bailarDespedida 4.5s ease-in-out forwards !important;
}

@keyframes bailarDespedida {
  0%   { transform: translateX(0)     translateY(0)    rotate(-5deg) scale(1);    }
  10%  { transform: translateX(8vw)   translateY(-18px) rotate(12deg) scale(1.05); }
  20%  { transform: translateX(16vw)  translateY(0)     rotate(-10deg) scale(1);   }
  30%  { transform: translateX(28vw)  translateY(-18px) rotate(14deg) scale(1.05); }
  40%  { transform: translateX(40vw)  translateY(0)     rotate(-10deg) scale(1);   }
  50%  { transform: translateX(52vw)  translateY(-18px) rotate(12deg) scale(1.05); }
  60%  { transform: translateX(64vw)  translateY(0)     rotate(-10deg) scale(1);   }
  70%  { transform: translateX(76vw)  translateY(-16px) rotate(10deg) scale(1.02); }
  85%  { transform: translateX(88vw)  translateY(0)     rotate(-6deg) scale(0.95); opacity: 1; }
  100% { transform: translateX(100vw) translateY(-6px)  rotate(0deg) scale(0.85); opacity: 0; }
}

/* Globito de despedida de la nave */
#globo-despedida {
  position: fixed;
  top: 14%;
  left: 50%;
  background: rgba(248, 241, 229, 0.95);
  color: #2B231D;
  padding: 6px 16px;
  border-radius: 14px;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1rem;
  z-index: 999999;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  animation: globoDespedida 4.2s ease forwards;
}

@keyframes globoDespedida {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(0.85); }
}

/* Fade-in prolijo para las fotos de la galería mientras cargan */
.foto-cargando {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.foto-cargando.foto-lista {
  opacity: 1;
}

/* ==========================================
   PLANETAS FLOTANTES ENTRE SECCIONES
   ========================================== */
.puente-planeta {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70px;
  overflow: visible;
}

.puente-planeta-inicio {
  margin-top: 200px;
}

.puente-planeta.a-la-izquierda {
  justify-content: flex-start;
  padding-left: 0%;
}

.puente-planeta.a-la-derecha {
  justify-content: flex-end;
  padding-right: 0%;
}

.planeta-flotante {
  width: 275px;
  height: auto;
  opacity: 10;
  transform: translateY(14px) scale(0.9);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
  animation: flotarPlaneta 6s ease-in-out infinite;
}

.planeta-flotante.planeta-grande {
  width: 300px;
}

.planeta-flotante.planeta-chico {
  width: 250px;
}

.planeta-flotante.planeta-visible {
  opacity: 0.85;
  transform: translateY(0) scale(1);
}

@keyframes flotarPlaneta {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

/* Alternamos el punto de partida de la animación para que no floten
   todos sincronizados al mismo tiempo */
.puente-planeta:nth-of-type(2n) .planeta-flotante {
  animation-delay: -3s;
}

.asteroide {
  position: absolute;
  opacity: 0.75;
  background:
    radial-gradient(circle at 30% 65%, rgba(0, 0, 0, 0.45), transparent 30%),
    radial-gradient(circle at 68% 35%, rgba(0, 0, 0, 0.35), transparent 26%),
    radial-gradient(circle at 40% 25%, rgba(255, 255, 255, 0.18), transparent 45%),
    linear-gradient(140deg, #9c8a76 0%, #6e5f4d 55%, #4a3f33 100%);
  box-shadow:
    inset -3px -4px 7px rgba(0, 0, 0, 0.55),
    inset 2px 2px 4px rgba(255, 255, 255, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.35);
}

.asteroide.asteroide-b {
  background:
    radial-gradient(circle at 62% 30%, rgba(0, 0, 0, 0.4), transparent 28%),
    radial-gradient(circle at 32% 70%, rgba(0, 0, 0, 0.3), transparent 24%),
    radial-gradient(circle at 60% 65%, rgba(255, 255, 255, 0.15), transparent 40%),
    linear-gradient(140deg, #8a7c6c 0%, #5c4f40 55%, #3d332a 100%);
}

/* Mini constelación decorativa (puntitos + líneas finas) junto a cada planeta */
.constelacion-decorativa {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: -1;
}

.constelacion-decorativa .punto-decorativo {
  fill: rgba(234, 215, 195, 0.55);
  animation: titilarEstrella 3s ease-in-out infinite;
}

.constelacion-decorativa .linea-decorativa {
  stroke: rgba(234, 215, 195, 0.2);
  stroke-width: 0.5;
  fill: none;
}

/* Mini nebulosas estáticas, para llenar el lado vacío junto al planeta */
.mini-nebulosa {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}