/* ========================================= */
/* --- IMPORTACIÓN DE FUENTES --- */
/* ========================================= */
@font-face { font-family: 'Horizon'; src: url('/fonts/Horizon.woff2') format('woff2'); }
@font-face { font-family: 'Codec Pro Regular'; src: url('/fonts/CodecPro-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Codec Pro Heavy'; src: url('/fonts/CodecPro-Heavy.woff2') format('woff2'); }
@font-face { font-family: 'Biko Black'; src: url('/fonts/Biko_Black.otf') format('opentype'); }
@font-face { font-family: 'Biko Regular'; src: url('/fonts/Biko_Regular.otf') format('opentype'); }
@font-face { font-family: 'Martian Grotek UltraBold'; src: url('/fonts/MartianGrotesk-xWdUlt.woff2') format('woff2'); }
@font-face { font-family: 'Martian Grotesk Bold'; src: url('/fonts/MartianGrotesk-xWdBl.otf') format('opentype'); }

body, html {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  font-family: 'Biko Regular', sans-serif; font-weight: normal; color: #f4edc9;
}

/* ========================================= */
/* --- VÍDEO DE FONDO --- */
/* ========================================= */
.video-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; background-color: #000; }
.bg-video { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; object-fit: cover; transform: translate(-50%, -50%); filter: contrast(1.1) saturate(1.2); }
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1; pointer-events: none; }

/* ========================================= */
/* --- ESCRITORIO (VERSIÓN ORDENADOR) --- */
/* ========================================= */

/* 1. CONTENEDOR DE LOGOS (Arriba a la izquierda) */
.logo-container {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 10;
}

.logo-desktop {
  display: block; /* Muestra el logo de PC */
  width: 180px;   /* Tamaño del logo en PC */
  height: auto;
}

.logo-mobile {
  display: none;  /* Oculta el logo de móvil en PC */
}

/* 2. MENÚ DE ENLACES (Debajo del logo) */
.top-left-menu {
  position: absolute;
  top: 250px; /* Lo bajamos para que quede por debajo del logo */
  left: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 10;
  
}

.menu-link {
  color: #f4edc9; text-decoration: none; font-size: 1.4rem; margin-bottom: 10px; margin-left: 20px;
  cursor: pointer; transition: opacity 0.3s; font-family: 'Martian Grotesk Bold', sans-serif; text-transform: none;
}
.menu-link:hover { opacity: 0.7; }

.instagram-link { margin-top: 13px; display: flex; align-items: center; transition: opacity 0.3s ease; }
.instagram-link:hover { opacity: 0.7; }
.instagram-icon { width: 40px; height: auto; margin-left: 20px; }

/* 3. INFO (Abajo a la izquierda) */
.bottom-left-section {
  position: absolute; bottom: 40px; left: 40px; display: flex; flex-direction: column;
  gap: 20px; font-size: 0.9rem; line-height: 1.4; margin-left: 20px; font-family: 'Martian Grotesk Bold', sans-serif;
}

/* ========================================= */
/* --- PANEL DE FAQ (COMÚN) --- */
/* ========================================= */
.faq-panel {
  position: fixed; bottom: 0; right: 20%; width: 50vw; height: 102vh;
  background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); transform: translateY(100%);
  padding: 40px; box-sizing: border-box; overflow-y: auto; z-index: 100;
  border-top-left-radius: 15px; border-top-right-radius: 15px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.faq-panel.active { transform: translateY(0); }
.faq-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.close-btn { font-size: 2.5rem; cursor: pointer; line-height: 1; font-family: sans-serif; transition: opacity 0.3s; }
.close-btn:hover { opacity: 0.7; }
.lang-switcher { display: flex; gap: 20px; font-size: 1rem; letter-spacing: 1px; }
.lang-btn { cursor: pointer; opacity: 0.4; transition: all 0.3s ease; }
.lang-btn.active { opacity: 1; border-bottom: 2px solid white; }
.lang-btn:hover { opacity: 0.8; }
.faq-main-title { font-size: 1.6rem; margin-top: 0; margin-bottom: 50px; margin-left: 30px; letter-spacing: 1px; color: #f4edc9; }

/* Transiciones de Idiomas */
.lang-section { display: none; }
.lang-section.active { display: block; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Preguntas del FAQ */
.faq-item { margin-bottom: 40px; opacity: 0; transform: translateY(20px); transition: all 0.5s ease-out; padding-bottom: 30px; margin: 10px 40px; }
.faq-panel.active .faq-item { opacity: 1; transform: translateY(0); }
.faq-question { font-family: 'Horizon', sans-serif; font-size: 1.1rem; margin-bottom: 20px; letter-spacing: 1px; }
.faq-answer { font-family: 'Biko Bold', sans-serif; font-size: 1.1rem; line-height: 1.5; color: #f4edc9; }
.faq-answer strong { display: block; margin-top: 25px; color: #f4edc9; }

/* Scrollbar FAQ */
.faq-panel::-webkit-scrollbar { width: 6px; }
.faq-panel::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); margin: 10px 0; }
.faq-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; transition: background 0.3s ease; }
.faq-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

/* ========================================= */
/* --- MÓVIL (PANTALLAS PEQUEÑAS) --- */
/* ========================================= */
@media (max-width: 768px) {
  
  /* 1. LOGOS MÓVIL (Oculta PC, Muestra Móvil) */
  .logo-desktop { display: none; }
  
  .logo-mobile { 
    display: block; 
    /* ¡AQUÍ CONTROLAS EL TAMAÑO EN MÓVIL LIBREMENTE! */
    width: 350px; 
    max-width: none;
    height: auto;
    
  }

  /* Lo fijamos arriba y al centro */
  .logo-container {
    top: 80px; 
    left: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
  }

  /* 2. MENÚ (Lo centramos totalmente en medio de la pantalla) */
  .top-left-menu {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center; 
    width: 100%;
  }

  .menu-link { margin-left: 0; margin-bottom: 25px; font-size: 2.2rem; }
  .instagram-link { margin-top: 15px; margin-left: 0; }
  .instagram-icon { margin-left: 0; }

  /* 3. INFO (Abajo al centro) */
  .bottom-left-section {
    bottom: 30px; left: 50%; transform: translateX(-50%);
    align-items: center; text-align: center; margin-left: 0; width: 90%; font-size: 1rem;
  }

  /* 4. FAQ (A pantalla completa) */
  .faq-panel { width: 100vw; height: 100dvh; right: 0; padding: 30px 20px; border-radius: 0; }
  .faq-main-title { margin-left: 0; font-size: 1.3rem; margin-bottom: 30px; }
  .faq-item { margin: 10px 0; padding-bottom: 20px; }
}