@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&family=Cinzel:wght@400;700&family=Crimson+Pro:wght@400;700&family=Lato:wght@300;400;700&family=Montserrat:wght@300;400;700&family=Orbitron:wght@400;700&family=Playfair+Display:wght@400;700&family=Rajdhani:wght@400;700&display=swap');

body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at center, #1c2841 0%, #0a0e1e 100%);
  color: #f0f0f0;
  font-family: 'Crimson Pro', serif;
  transition: background 0.5s ease, color 0.5s ease;
}

main {
  padding: 3rem 2rem;
  max-width: 800px;
  margin: 2rem auto;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid #d4af37;
  border-radius: 12px;
  animation: heartbeat-glow 1.8s ease-in-out infinite;
}

h1 {
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 1.2em;
  background: linear-gradient(to right, #ffdd00, #ff7700);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 8s ease-in-out infinite;
  color: #ffdd00;
  text-shadow: 0 0 10px rgba(255, 120, 0, 0.5);
}

h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid #cdbb8a;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  color: #ffe9b5;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.3);
}

label {
    display: block;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: #cdbb8a;
}

input[type="number"],
textarea,
select,
input[type="file"] {
    width: 100%;
    padding: 0.8rem;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid #5e4a20;
    border-radius: 5px;
    color: #f0f0f0;
    font-family: 'Crimson Pro', serif;
    font-size: 1rem;
    box-sizing: border-box;
}

textarea {
    resize: vertical;
    min-height: 120px;
}

button {
    display: block;
    width: 100%;
    padding: 1rem;
    margin-top: 2rem;
    background: linear-gradient(to right, #6a531f, #a7863b);
    color: #fff9e6;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    font-family: 'Crimson Pro', serif;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.7);
    transform: translateY(-2px);
}


@keyframes shine {
  0% { background-position: 200% center; }
  100% { background-position: 0% center; }
}

@keyframes heartbeat-glow {
  0% {
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
    border-color: #d4af37;
  }
  50% {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
    border-color: #fff7d6;
  }
  100% {
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
    border-color: #d4af37;
  }
}

/* --- Estilos del Visualizador Activo --- */

#visualizador {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: flex-end;   /* Alineado abajo */
    text-align: center;
    padding: 2rem;
    padding-bottom: 10vh; /* Espacio desde el borde inferior */
    box-sizing: border-box;
    z-index: 100;
    overflow: hidden; /* Prevenir artefactos de animación */
}

.background-media {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    object-fit: cover;
    opacity: 1;
    transition: opacity 20s ease-out; /* Sincronizado con el fade-out del visualizador */
}

.background-media.fade-out {
    opacity: 0;
}

#visualizador p {
    font-size: 2.8rem;
    max-width: 85%;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    will-change: opacity, transform;
    position: relative;
    z-index: 1;
}

#visualizador p.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- Temáticas de Color --- */

/* 1. Cosmos Ancestral */
body.cosmos-ancestral {
    font-family: 'Orbitron', sans-serif;
}
.cosmos-ancestral #visualizador {
    background-color: #000;
    color: #ffffff;
}
.cosmos-ancestral #visualizador p {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
}

/* 2. Lluvia de Neón */
body.lluvia-neon {
    font-family: 'Rajdhani', sans-serif;
}
.lluvia-neon #visualizador {
    background-color: #0d020f;
    color: #E0E0E0;
}
.lluvia-neon #visualizador p {
    font-weight: 700;
    color: #FFFF99; /* Light Yellow */
    text-shadow: 0 0 7px #FF8C00, 0 0 10px #FF8C00, 0 0 21px #FF8C00, 0 0 42px #FF8C00, 0 0 82px #FF8C00; /* Dark Orange */
}

/* 3. Bosque Susurrante */
body.bosque-susurrante {
    font-family: 'Crimson Pro', serif;
}
.bosque-susurrante #visualizador {
    background: radial-gradient(ellipse at center, #081408 0%, #010a01 100%);
    color: #C0D8C0;
}
.bosque-susurrante #visualizador p {
    color: #E8F6E8;
    text-shadow: 0 0 5px #9DC08B, 0 0 10px #2c5d2c;
}

/* 4. Raíces Profundas */
body.raices-profundas {
    font-family: 'Crimson Pro', serif; /* Keeping consistent font */
}
.raices-profundas #visualizador {
    background: radial-gradient(ellipse at center, #1A2A2A 0%, #0A1A1A 100%);
    color: #C0C0C0;
}
.raices-profundas #visualizador p {
    color: #3A5A40; /* Dark Green */
    text-shadow: 0 0 5px #6F4E37, 0 0 10px #6F4E37; /* Earthy Brown */
}

/* 5. Noche Eterna */
body.noche-eterna {
    font-family: 'Crimson Pro', serif;
}
.noche-eterna #visualizador {
    background: radial-gradient(ellipse at center, #0F0F1A 0%, #05050F 100%);
    color: #B0B0C0;
}
.noche-eterna #visualizador p {
    color: #A2B2C8; /* Muted Blue */
    text-shadow: 0 0 5px #4B0082, 0 0 10px #4B0082; /* Deep Purple */
}

/* 6. Aura Silvestre */
body.aura-silvestre {
    font-family: 'Crimson Pro', serif;
}
.aura-silvestre #visualizador {
    background: radial-gradient(ellipse at center, #2A3A2A 0%, #1A2A1A 100%);
    color: #D0D0B0;
}
.aura-silvestre #visualizador p {
    color: #556B2F; /* Forest Green */
    text-shadow: 0 0 5px #DAA520, 0 0 10px #DAA520; /* Golden Yellow */
}

/* 7. Ecos Antiguos */
body.ecos-antiguos {
    font-family: 'Crimson Pro', serif;
}
.ecos-antiguos #visualizador {
    background: radial-gradient(ellipse at center, #202020 0%, #101010 100%);
    color: #C0C0C0;
}
.ecos-antiguos #visualizador p {
    color: #B0C4DE; /* Stone Gray */
    text-shadow: 0 0 5px #6B8E23, 0 0 10px #6B8E23; /* Moss Green */
}

/* 8. Velo Brumoso */
body.velo-brumoso {
    font-family: 'Crimson Pro', serif;
}
.velo-brumoso #visualizador {
    background: radial-gradient(ellipse at center, #303030 0%, #202020 100%);
    color: #E0E0E0;
}
.velo-brumoso #visualizador p {
    color: #D3D3D3; /* Light Gray */
    text-shadow: 0 0 5px #6A8D9F, 0 0 10px #6A8D9F; /* Misty Blue */
}

/* 9. Corazón de Piedra */
body.corazon-de-piedra {
    font-family: 'Crimson Pro', serif;
}
.corazon-de-piedra #visualizador {
    background: radial-gradient(ellipse at center, #252525 0%, #151515 100%);
    color: #A0A0A0;
}
.corazon-de-piedra #visualizador p {
    color: #696969; /* Dark Gray */
    text-shadow: 0 0 5px #B22222, 0 0 10px #B22222; /* Rusty Red */
}

/* 10. Susurro del Agua */
body.susurro-del-agua {
    font-family: 'Crimson Pro', serif;
}
.susurro-del-agua #visualizador {
    background: radial-gradient(ellipse at center, #0A1A2A 0%, #050A15 100%);
    color: #B0C0D0;
}
.susurro-del-agua #visualizador p {
    color: #008080; /* Teal */
    text-shadow: 0 0 5px #000080, 0 0 10px #000080; /* Deep Blue */
}

/* 11. Sendero Oculto */
body.sendero-oculto {
    font-family: 'Crimson Pro', serif;
}
.sendero-oculto #visualizador {
    background: radial-gradient(ellipse at center, #2A2A1A 0%, #1A1A0A 100%);
    color: #C0C0A0;
}
.sendero-oculto #visualizador p {
    color: #6B8E23; /* Olive Green */
    text-shadow: 0 0 5px #5C4033, 0 0 10px #5C4033; /* Dark Brown */
}

/* 12. Luz en la Sombra */
body.luz-en-la-sombra {
    font-family: 'Crimson Pro', serif;
}
.luz-en-la-sombra #visualizador {
    background: radial-gradient(ellipse at center, #101010 0%, #000000 100%);
    color: #E0E0E0;
}
.luz-en-la-sombra #visualizador p {
    color: #FFD700; /* Pale Gold */
    text-shadow: 0 0 5px #36454F, 0 0 10px #36454F; /* Charcoal Gray */
}

/* 13. Canto del Bosque */
body.canto-del-bosque {
    font-family: 'Crimson Pro', serif;
}
.canto-del-bosque #visualizador {
    background: radial-gradient(ellipse at center, #1A2A1A 0%, #0A1A0A 100%);
    color: #C0D0C0;
}
.canto-del-bosque #visualizador p {
    color: #50C878; /* Emerald Green */
    text-shadow: 0 0 5px #8A2BE2, 0 0 10px #8A2BE2; /* Violet */
}

#visualizador.fade-out {
    opacity: 0;
    transition: opacity 20s ease-out; /* Fade out extra lento */
}

#visualizador.fade-in {
    opacity: 1;
    transition: opacity 5s ease-in; /* Very slow fade in */
}

#restartButton {
    position: absolute;
    bottom: 50px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    font-size: 1.5rem;
    background-color: #4CAF50; /* Green */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0; /* Start hidden */
    transition: opacity 1s ease-in;
    z-index: 1000; /* Ensure it's above other elements */
}

#restartButton.show {
    opacity: 1;
}

/* --- Nuevas Temáticas --- */

/* 14. Desierto Dorado */
body.desierto-dorado {
    font-family: 'Cinzel', serif;
}
.desierto-dorado #visualizador {
    background: radial-gradient(ellipse at center, #4d3b2a 0%, #1a140e 100%);
    color: #f5e6c8;
}
.desierto-dorado #visualizador p {
    font-weight: 700;
    color: #e6c8a0;
    text-shadow: 0 0 8px #ffd700, 0 0 15px #c8a064;
}

/* 15. Abismo Estelar */
body.abismo-estelar {
    font-family: 'Orbitron', sans-serif;
}
.abismo-estelar #visualizador {
    background-color: #00000a;
    color: #e0f0ff;
}
.abismo-estelar #visualizador p {
    color: #d0e8ff;
    text-shadow: 0 0 7px #6a0dad, 0 0 15px #3f005e, 0 0 25px #ffffff44;
}

/* 16. Corazón de Volcán */
body.corazon-volcan {
    font-family: 'Rajdhani', sans-serif;
}
.corazon-volcan #visualizador {
    background: radial-gradient(ellipse at bottom, #5c0000 0%, #000000 80%);
    color: #ffdddd;
}
.corazon-volcan #visualizador p {
    font-weight: 700;
    color: #ffb833;
    text-shadow: 0 0 10px #ff4500, 0 0 20px #8b0000;
}

/* 17. Santuario de Cristal */
body.santuario-cristal {
    font-family: 'Playfair Display', serif;
}
.santuario-cristal #visualizador {
    background: radial-gradient(ellipse at center, #e0f5ff 0%, #b0d0e0 100%);
    color: #002d4d;
}
.santuario-cristal #visualizador p {
    font-weight: 400;
    color: #003c66;
    text-shadow: 0 0 5px #ffffff, 0 0 10px #add8e6;
}

/* 18. Tinta y Papiro */
body.tinta-papiro {
    font-family: 'Alegreya', serif;
}
.tinta-papiro #visualizador {
    background-color: #f5f2e8;
    color: #3d352a;
}
.tinta-papiro #visualizador p {
    font-weight: 400;
    color: #4a3c2b;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

 
/* Ocultar cursor durante la presentación */
#visualizador.running {
    cursor: none;
}

/* Ajustar tamaño de fuente en pantalla completa */
#visualizador:fullscreen p {
    font-size: 3.5vw;
}

/* --- Estilo para el botón de inicio de la experiencia --- */
.start-experience-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 102;
    padding: 1.5em 3em;
    font-size: 1.5rem;
    background: linear-gradient(to right, #6a531f, #a7863b);
    color: #fff9e6;
    border: 2px solid #d4af37;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.start-experience-button:hover {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

/* --- Estilos para la Cuenta Regresiva --- */
.countdown-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20vw;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 20px #d4af37, 0 0 40px #d4af37, 0 0 60px #d4af37;
    z-index: 103;
    display: none; /* Oculto por defecto */
    animation: countdown-pulse 1s ease-out infinite;
}

@keyframes countdown-pulse {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}