/* Importar todos los archivos CSS */
@import 'fonts.css';
@import 'animations.css';
@import 'components.css';
@import 'utilities.css';

/* Estilos base */
body {
    @apply font-roboto bg-[#0F0F13] text-white overflow-x-hidden;
}

/* Layout */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Navegación */
.nav-link {
    @apply text-gray-300 hover:text-primary transition-colors;
}

/* Secciones */
.section-title {
    @apply font-montserrat text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
}

.section-subtitle {
    @apply text-xl text-gray-600;
}

/* Estilos para el selector de idioma */
.language-selector button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.language-selector button:hover {
    opacity: 0.8;
}

#languageDropdown {
    transform-origin: top right;
    transition: all 0.2s ease-out;
}

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

#languageDropdown:not(.hidden) {
    opacity: 1;
    transform: scale(1);
}

#languageDropdown a {
    transition: background-color 0.2s;
}

#languageDropdown a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* These classes help with optimizing content loading and animations */

/* Content visibility optimizations */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px; /* Approximate size placeholder */
}

/* Avoid layout shifts with aspect ratio containers */
.aspect-ratio {
  position: relative;
  height: 0;
  overflow: hidden;
}

.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

.aspect-ratio-4-3 {
  padding-bottom: 75%;
}

.aspect-ratio-1-1 {
  padding-bottom: 100%;
}

.aspect-ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Progressive image loading */
.progressive-img {
  position: relative;
  overflow: hidden;
}

.progressive-img-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(10px);
  transform: scale(1.1);
  transition: opacity 0.5s ease;
}

.progressive-img-full {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.progressive-img-full.loaded {
  opacity: 1;
}

.progressive-img-full.loaded + .progressive-img-placeholder {
  opacity: 0;
}

/* Reduce animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Estilo para el contenedor del mapa en sección de contacto */
#map {
    width: 100%;
    height: 500px;
    border-radius: 0.5rem;
    z-index: 1;
    position: relative;
}

/* Estilos para asegurar que los tiles del mapa se vean correctamente */
.leaflet-tile-pane {
    filter: grayscale(1) brightness(0.8) contrast(1.2);
    opacity: 0.9;
}

/* Estilo para los popups del mapa */
.leaflet-popup-content-wrapper {
    background: rgba(26, 26, 36, 0.95);
    color: white;
    border: 1px solid rgba(123, 63, 228, 0.2);
    backdrop-filter: blur(8px);
}

.leaflet-popup-tip {
    background: rgba(26, 26, 36, 0.95);
    border: 1px solid rgba(123, 63, 228, 0.2);
}