/* ===================================================
   HOJA DE ESTILOS: estilos-index.css (PARTE 1 DE 3)
   Regla de Oro: Se conserva la presentación original.
   Corrección: Video completamente visible tras los accesos.
   =================================================== */

:root { 
  --gold: #D4AF37; 
  --white: #ffffff; 
}

html, body { 
  margin: 0; padding: 0; width: 100%; height: 100%; 
  font-family: 'Inter', sans-serif; background: #000; color: #fff; overflow: hidden; 
}

/* 1. FONDOS ATMOSFÉRICOS (SIN TRANSICIÓN A NEGRO) */
.video-background { 
  position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; 
}
.video-background video { 
  width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; 
}
.overlay { 
  position: absolute; inset: 0; 
  background: radial-gradient(circle at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%); 
  z-index: 1; pointer-events: none; 
}

/* 2. BARRA DE NAVEGACIÓN SUPERIOR ORIGINAL */
.top-nav { 
  position: fixed; top: 0; left: 0; width: 100%; padding: 30px 60px; 
  display: flex; justify-content: space-between; align-items: center; z-index: 1000; box-sizing: border-box; 
}
.logo { 
  font-family: Georgia, serif; font-size: 2.2rem; color: var(--gold); letter-spacing: 4px; 
  text-transform: uppercase; font-weight: bold; cursor: pointer; 
}
.nav-buttons { 
  display: flex; gap: 20px; 
}
.nav-btn-outline { 
  border: 1px solid var(--gold); color: var(--gold); padding: 10px 25px; border-radius: 50px; 
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: 0.3s; 
}
.nav-btn-outline:hover { 
  background: rgba(212, 175, 55, 0.1); 
}
/* ===================================================
   HOJA DE ESTILOS: estilos-index.css (PARTE 2 DE 3)
   =================================================== */

/* 3. ESTRUCTURA DE PANTALLAS (BIENVENIDA A LA IZQUIERDA) */
.view { 
  position: absolute; inset: 0; display: flex; 
  justify-content: flex-start; /* Mantiene la bienvenida a la izquierda */
  padding-left: 8%; box-sizing: border-box; align-items: center; z-index: 10; 
  transition: opacity 0.8s ease, transform 0.8s ease; 
}

/* NUEVA CLASE ACTUALIZADA CON DESENFOQUE SUAVE PARA VER EL VIDEO */
.auth-section { 
  justify-content: flex-end !important; /* Mantiene los accesos a la derecha */
  padding-left: 0 !important;
  padding-right: 8% !important; 
  background: rgba(0, 0, 0, 0.4); /* Fondo oscuro muy leve y elegante */
  
  /* REGLA DE ORO: Desenfoque suavizado para contemplar el paisaje y al joven */
  backdrop-filter: blur(3px) !important; 
  -webkit-backdrop-filter: blur(3px) !important;
}

.hidden { opacity: 0; pointer-events: none; transform: scale(0.97); }

/* 4. SECCIÓN PRINCIPAL: SECCIÓN HERO DE BIENVENIDA */
.glass-box { 
  background: rgba(255, 255, 255, 0.03); 
  border: 1px solid rgba(212, 175, 55, 0.15); 
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  padding: 50px 60px; border-radius: 30px; text-align: center; 
  max-width: 600px; width: 90%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); 
}
.glass-box h1 { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 400; margin-top: 0; margin-bottom: 30px; color: #fff; }

.dynamic-info { position: relative; min-height: 100px; margin-bottom: 35px; }
.info-item { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; display: flex; flex-direction: column; justify-content: center; }
.info-item.active { opacity: 1; }
.info-item h3 { color: var(--gold); text-transform: uppercase; letter-spacing: 3px; font-size: 1rem; margin-bottom: 10px; }
.info-item p { font-size: 0.95rem; line-height: 1.6; color: #ccc; margin: 0; }

.cta-button { background: var(--gold); color: #000; padding: 16px 45px; border-radius: 50px; font-weight: 700; border: none; cursor: pointer; transition: 0.3s ease; font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; }
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4); }
/* ===================================================
   HOJA DE ESTILOS: estilos-index.css (PARTE 3 DE 3)
   =================================================== */

/* 5. TARJETAS DE AUTENTICACIÓN */
.auth-card { 
  background: rgba(15, 15, 15, 0.6); border: 1px solid rgba(212, 175, 55, 0.15); 
  padding: 45px; border-radius: 25px; width: 90%; max-width: 420px; text-align: center; 
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7); 
}
.auth-card h2 { font-family: Georgia, serif; color: var(--gold); font-size: 2rem; margin-top: 0; margin-bottom: 30px; letter-spacing: 2px; text-transform: uppercase; }
.auth-card input { width: 100%; padding: 14px; margin-bottom: 15px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: #fff; box-sizing: border-box; outline: none; font-size: 0.95rem; }
.auth-card input:focus { border-color: var(--gold); }

.error-msg { background: rgba(231, 76, 60, 0.15); border: 1px solid #e74c3c; color: #ff6b6b; padding: 12px; border-radius: 10px; margin-bottom: 20px; font-size: 0.85rem; display: none; }
.success-msg { 
  background: rgba(46, 204, 113, 0.15); 
  border: 1px solid #2ecc71; 
  color: #2ecc71; 
  padding: 12px; 
  border-radius: 10px; 
  margin-bottom: 20px; 
  font-size: 0.85rem; 
  display: none; /* Oculta la barra verde por defecto */
}
.forgot-link { display: block; margin-top: 15px; font-size: 0.8rem; color: #aaa; cursor: pointer; transition: 0.3s; }
.forgot-link:hover { color: var(--gold); }
.back-link { margin-top: 25px; font-size: 0.85rem; color: #888; cursor: pointer; transition: 0.3s; }
.back-link:hover { color: #fff; }
.auth-instructions { font-size: 0.85rem; color: #bbb; line-height: 1.5; margin-bottom: 25px; }
.code-input, .code-input-small { text-align: center; font-size: 1.5rem !important; letter-spacing: 5px; color: var(--gold) !important; }

/* 6. PANTALLA DE CARGA Y CANVAS */
.wave-section { background: #000; z-index: 2000; justify-content: center !important; padding-left: 0 !important; }
#canvasTransition { position: absolute; inset: 0; width: 100%; height: 100%; }
.loading-content { position: absolute; top: 25%; width: 100%; text-align: center; z-index: 10; }
.loading-content h2 { font-family: 'Playfair Display', serif; font-size: 2rem; letter-spacing: 6px; color: var(--gold); }

/* =======================================================
   AJUSTE DE SEGURIDAD EXCLUSIVO PARA IPHONE VERTICAL
   ======================================================= */
@media screen and (max-width: 480px) and (orientation: portrait) {
  html, body { overflow-y: auto; }
  .view { justify-content: center !important; padding-left: 0 !important; }
  .auth-section { justify-content: center !important; padding-right: 0 !important; }
  .top-nav { padding: 20px 25px; }
  .logo { font-size: 1.5rem; letter-spacing: 2px; }
  .nav-btn-outline { padding: 8px 16px; font-size: 0.75rem; }
  .glass-box { padding: 30px 20px; margin-top: 80px; }
  .glass-box h1 { font-size: 2rem; margin-bottom: 15px; }
  .dynamic-info { min-height: 120px; margin-bottom: 20px; }
  .info-item p { font-size: 0.85rem; }
  .cta-button { padding: 14px 30px; font-size: 0.85rem; }
  .auth-card { padding: 25px 20px; margin-top: 80px; }
  .auth-card h2 { font-size: 1.5rem; margin-bottom: 20px; }
}