/* Estilos personalizados de la Web del Mundo Mágico de Harry Potter */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --color-bg-dark: #07090e;
  --color-bg-panel: #0d111b;
  --color-gold: #cfa851;
  --color-gold-hover: #e0be6c;
  --color-text-parchment: #f3ebd6;
  --color-text-muted: #a0aab8;
  
  /* Colores de las casas */
  --color-gryffindor: #7f2225;
  --color-gryffindor-gold: #d3a625;
  --color-slytherin: #1a472a;
  --color-slytherin-silver: #aaaaaa;
  --color-ravenclaw: #0e1a40;
  --color-ravenclaw-bronze: #946b2d;
  --color-hufflepuff: #ecb939;
  --color-hufflepuff-black: #111111;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--color-bg-dark);
  color: var(--color-text-parchment);
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) var(--color-bg-dark);
}

/* Tipografías Mágicas */
h1, h2, h3, h4, .font-cinzel {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
}

/* Scrollbar Personalizado */
body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background: var(--color-bg-dark);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--color-gold);
  border-radius: 4px;
}

/* Efectos de Luz de Fondo y Misterio */
.magic-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  background: radial-gradient(circle at 50% 30%, #151c2e 0%, #07090e 70%);
  pointer-events: none;
}

/* Efecto de Polvo de Partículas Flotantes */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: radial-gradient(circle, rgba(207, 168, 81, 0.8) 0%, rgba(207, 168, 81, 0) 70%);
  border-radius: 50%;
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) translateX(0) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-10vh) translateX(50px) scale(1.2);
    opacity: 0;
  }
}

/* Velas Flotantes (Portada Hero) */
.candles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.candle {
  position: absolute;
  width: 6px;
  height: 50px;
  background: linear-gradient(to bottom, #eaeaea, #b5b5b5);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(255, 220, 150, 0.3);
  animation: floatCandle ease-in-out infinite;
}

.candle::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 10px;
  background: radial-gradient(ellipse at center, #ffdf8c 0%, #ff8c00 70%, rgba(255,140,0,0) 100%);
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 15px #ff8c00, 0 0 5px #ffdf8c;
  animation: flicker 0.15s infinite alternate;
}

@keyframes floatCandle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(1deg);
  }
}

@keyframes flicker {
  0% { transform: translateX(-50%) scale(0.9) skewX(2deg); opacity: 0.9; }
  100% { transform: translateX(-50%) scale(1.1) skewX(-2deg); opacity: 1; }
}

/* Resplandores Dorados (Glow Effect) */
.glow-gold {
  box-shadow: 0 0 15px rgba(207, 168, 81, 0.4);
  border: 1px solid rgba(207, 168, 81, 0.5);
}
.glow-gold:hover {
  box-shadow: 0 0 25px rgba(207, 168, 81, 0.8);
  border-color: var(--color-gold);
}

/* Bordes y Resplandores de Casas */
.border-gryffindor { border-color: var(--color-gryffindor-gold); }
.glow-gryffindor { box-shadow: 0 0 15px rgba(127, 34, 37, 0.5); }
.text-gryffindor { color: var(--color-gryffindor-gold); }

.border-slytherin { border-color: var(--color-slytherin-silver); }
.glow-slytherin { box-shadow: 0 0 15px rgba(26, 71, 42, 0.6); }
.text-slytherin { color: #5d9e71; }

.border-ravenclaw { border-color: var(--color-ravenclaw-bronze); }
.glow-ravenclaw { box-shadow: 0 0 15px rgba(14, 26, 64, 0.8); }
.text-ravenclaw { color: #6ba4e8; }

.border-hufflepuff { border-color: var(--color-hufflepuff); }
.glow-hufflepuff { box-shadow: 0 0 15px rgba(236, 185, 57, 0.5); }
.text-hufflepuff { color: var(--color-hufflepuff); }

/* Efecto Flip Card (Giro de Tarjeta 3D) */
.flip-card {
  background-color: transparent;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 0.75rem;
}

.flip-card-front {
  background-color: var(--color-bg-panel);
  border: 1px solid rgba(207, 168, 81, 0.2);
}

.flip-card-back {
  background: linear-gradient(135deg, #131a26 0%, #0d121c 100%);
  border: 1px solid var(--color-gold);
  transform: rotateY(180deg);
}

/* Diseño del Grimorio (Libro de Hechizos Antiguo) */
.parchment-book {
  background-color: #f6ebd0;
  background-image: radial-gradient(rgba(120, 90, 40, 0.15) 1px, transparent 0),
                    radial-gradient(rgba(120, 90, 40, 0.1) 2px, transparent 0);
  background-size: 24px 24px;
  color: #3d2f1d;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(0,0,0,0.15);
  border: 12px solid #2e1d0c;
  border-radius: 4px;
}

.parchment-title {
  color: #1a1005;
  border-bottom: 2px solid rgba(61, 47, 29, 0.3);
}

.parchment-button {
  background-color: #3d2f1d;
  color: #f6ebd0;
}
.parchment-button:hover {
  background-color: #554129;
}

/* Efectos Mágicos de Hechizos (Clases Inyectadas por JS) */
.lumos-active {
  animation: lumosFlash 1s ease-out;
  box-shadow: 0 0 100px 30px rgba(255, 255, 255, 0.9) !important;
}

@keyframes lumosFlash {
  0% { filter: brightness(1); }
  50% { filter: brightness(2.5) contrast(1.2); }
  100% { filter: brightness(1); }
}

.nox-active {
  filter: brightness(0.08) contrast(1.5) grayscale(0.5);
  transition: filter 1.5s ease-in-out;
}

.patronus-active {
  position: relative;
}
.patronus-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(135, 206, 250, 0.5) 0%, rgba(30, 144, 255, 0.2) 50%, transparent 100%);
  pointer-events: none;
  animation: patronusGlow 2s ease-out forwards;
  z-index: 20;
}

@keyframes patronusGlow {
  0% { opacity: 0; transform: scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Línea de Tiempo (Timeline Vertical) */
.timeline-item {
  position: relative;
  padding-left: 2.5rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-gold);
  border: 3px solid var(--color-bg-dark);
  z-index: 1;
  box-shadow: 0 0 10px var(--color-gold);
}
.timeline-line {
  position: absolute;
  left: 15px;
  top: 10px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-gold) 0%, rgba(207,168,81,0.1) 100%);
}

/* Estilos de Modales Premium */
.modal-overlay {
  background-color: rgba(3, 5, 8, 0.85);
  backdrop-filter: blur(8px);
}

.modal-content {
  background: linear-gradient(145deg, #0d121b 0%, #06090e 100%);
  border: 1px solid rgba(207, 168, 81, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(207,168,81,0.15);
}

/* Botón Flotante "🔮 Descubre un Secreto" */
.floating-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  animation: pulseFloat 3s infinite;
}

@keyframes pulseFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 15px rgba(207, 168, 81, 0.6);
  }
  50% {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 0 25px rgba(207, 168, 81, 0.9);
  }
}

/* Estilos de Botones de Opción de Quiz */
.quiz-option-btn {
  background-color: #121824;
  border: 1px solid rgba(207, 168, 81, 0.2);
  transition: all 0.3s ease;
}
.quiz-option-btn:hover:not(:disabled) {
  background-color: #192235;
  border-color: var(--color-gold);
  transform: translateX(5px);
}
.quiz-option-btn.correct {
  background-color: #14532d !important;
  border-color: #22c55e !important;
  color: #fff;
}
.quiz-option-btn.wrong {
  background-color: #7f1d1d !important;
  border-color: #ef4444 !important;
  color: #fff;
}

/* Estilo para las Tarjetas de Favoritos */
.fav-heart-btn {
  transition: transform 0.2s ease;
}
.fav-heart-btn:hover {
  transform: scale(1.2);
}

/* Efecto de Humo (Transiciones de Sección) */
.smoke-transition {
  animation: smokeFade 0.6s ease-in-out forwards;
}

@keyframes smokeFade {
  0% { opacity: 0; filter: blur(10px); transform: scale(0.95); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* Ocultar elementos */
.hidden-section {
  display: none !important;
}

/* Fallback de Imágenes Mágicas */
.magic-image-fallback {
  background: linear-gradient(135deg, #151e2b 0%, #0a0e14 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(207, 168, 81, 0.3);
  text-align: center;
  color: var(--color-gold);
  font-family: 'Cinzel', serif;
}

.magic-image-fallback::before {
  content: '🔮';
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  animation: pulseFallback 2s infinite alternate;
}

@keyframes pulseFallback {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* Menú Móvil hamburguesa */
.mobile-nav-active {
  transform: translateX(0) !important;
}