/* ==========================================================================
   EL ARQUITECTO - MASTER STYLE SHEET (EDICIÓN DE GALA)
   ========================================================================== */

/* --- 1. VARIABLES DE MARCA Y NATURALEZA --- */
:root {
  --verde-bosque: #2d3e24;
  --verde-musgo: #4a5d23;
  --terracota: #a0522d;
  --crema: #fdfaf5;
  --oro: #c5a059;
  --texto-oscuro: #333333;
  --sombra-musgo: rgba(74, 93, 35, 0.25);
  --cristal: rgba(253, 250, 245, 0.45); /* Traslucidez nivel premium */
}

/* --- 2. RESET Y ESTRUCTURA BASE --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Source Sans Pro", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #000;
  background-image: url("../img/fondo.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  perspective: 1000px;
}

/* Capa de profundidad para legibilidad */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
  z-index: 1;
}

/* --- 3. MOTOR DE MARIPOSAS 3D --- */
.scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  transform-style: preserve-3d;
}

.butterfly {
  position: absolute;
  transform-style: preserve-3d;
  animation: 
    drift calc(30s + var(--random) * 20s) linear infinite, 
    wobble 4s ease-in-out infinite alternate;
}

.butterfly::before,
.butterfly::after {
  content: "";
  position: absolute;
  width: calc(20px + var(--random) * 15px);
  height: calc(30px + var(--random) * 25px);
  background-color: hsl(calc(35 + var(--random) * 30), 85%, 55%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
  clip-path: path("m0 24.949c 2.6262-5.4316 9.7782-15.554 16.428-20.546 4.798-3.6021 12.572-6.3892 12.572 2.4795 0 1.7712-1.0155 14.879-1.6111 17.007-2.0703 7.3984-9.6144 9.2854-16.325 8.1433 11.73 1.9964 14.714 8.6092 8.2697 15.222-12.239 12.559-17.591-3.1511-18.963-7.1766-.2514-.73797-.36904-1.0832-.37077-.78964z");
  transform-origin: left;
}

.butterfly::before { animation: flapB 0.4s infinite alternate ease-in-out; }
.butterfly::after { transform: rotateY(180deg); animation: flapA 0.4s infinite alternate ease-in-out; }

/* --- 4. CABECERA MAJESTUOSA (PLACA DE GALA) --- */
.header-glass-container {
    background: var(--cristal) !important;
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border: 2px solid var(--verde-bosque);
    border-radius: 40px;
    padding: 25px 30px;
    margin: 20px auto 45px auto;
    max-width: 85%;
    text-align: center;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.header-glass-container h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 2.1rem;
    color: var(--verde-bosque) !important;
    text-transform: uppercase;
    letter-spacing: 7px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

.subtitulo-menu {
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--terracota) !important;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 0.75rem;
    display: block;
    border-top: 1px solid rgba(160, 82, 45, 0.2);
    padding-top: 8px;
    margin-top: 8px;
}

/* --- 5. TARJETAS DE MENÚ (ESTILO TICKETS DE LUJO) --- */
.glass-menu-card {
  position: relative;
  z-index: 10;
  background: var(--cristal);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 3px solid rgba(74, 93, 35, 0.4);
  border-radius: 35px;
  padding: 45px 20px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
  text-align: center;
}

.glass-menu-card:hover, .glass-menu-card:active {
  transform: translateY(-12px) scale(1.03);
  background: rgba(253, 250, 245, 0.8);
  box-shadow: 0 20px 45px var(--sombra-musgo);
  border: 3px solid var(--verde-musgo);
}

.icon-large {
  font-size: 5rem !important; /* Iconos imponentes */
  margin-bottom: 20px;
  transition: transform 0.4s ease;
  display: inline-block;
  filter: drop-shadow(0 8px 15px rgba(0,0,0,0.15));
}

.glass-menu-card:hover .icon-large {
  transform: scale(1.15) rotate(5deg);
}

/* --- 6. ESPECÍFICOS DEL LOGIN (INDEX) --- */
.glass-card {
    position: relative;
    z-index: 10;
    background: rgba(253, 250, 245, 0.9) !important; 
    backdrop-filter: blur(15px);
    padding: 40px 30px;
    border-radius: 35px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); 
    border: 1px solid var(--verde-bosque);
}

.dot {
    width: 22px; height: 22px;
    border: 3px solid var(--verde-bosque); 
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.2);
}

.dot.active {
    background-color: var(--terracota) !important;
    border-color: var(--terracota) !important;
    transform: scale(1.3);
    box-shadow: 0 0 15px var(--terracota); 
}

/* --- 7. REPRODUCTOR DE MÚSICA --- */
.player-card-oro {
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid var(--oro);
    border-radius: 30px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.vol-slider-oro {
    -webkit-appearance: none;
    height: 7px;
    background: rgba(197, 160, 89, 0.2);
    border-radius: 5px;
    outline: none;
}
.vol-slider-oro::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    background: var(--oro);
    border-radius: 50%;
    cursor: pointer;
}

/* --- 8. ANIMACIONES TÉCNICAS --- */
@keyframes drift {
  0% { transform: translate3d(calc(var(--random) * 90vw), 110vh, -100px); }
  100% { transform: translate3d(calc(var(--random) * -40vw + 40vw), -20vh, 100px); }
}
@keyframes flapB { from { transform: rotateY(10deg); } to { transform: rotateY(-60deg); } }
@keyframes flapA { from { transform: rotateY(170deg); } to { transform: rotateY(240deg); } }
@keyframes wobble { from { rotate: z -5deg; } to { rotate: z 5deg; } }
@keyframes fadeInPage { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- 9. RESPONSIVIDAD MÓVIL --- */
@media (max-width: 768px) {
  .header-glass-container h1 { font-size: 1.8rem; letter-spacing: 4px; }
  .icon-large { font-size: 4rem !important; }
  .glass-menu-card { padding: 35px 15px; }
}