/**
 * MOBILE PERFORMANCE OPTIMIZATIONS - CONSOLIDATED
 * Random Project Site - Frontend Performance Enhancement
 * 
 * Purpose: Optimizar performance en mobile manteniendo buena UX
 * Target: 60 FPS, animaciones suaves, experiencia fluida
 * 
 * Strategy:
 * 1. Eliminar backdrop-filter (muy pesado en mobile GPU)
 * 2. Eliminar partículas flotantes
 * 3. Simplificar pseudo-elementos y animaciones pesadas
 * 4. Convertir 3D transforms a 2D
 * 5. Añadir transiciones suaves para mejor UX
 * 6. Mantener animaciones ligeras (neón del logo)
 */

@media (max-width: 768px) {
  
  /* ============================================
     OPTIMIZACIONES CORE - Performance GPU
     ============================================ */
  
  /* 1. ELIMINAR BACKDROP FILTER (Operación más cara en mobile) */
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* 2. ELIMINAR PARTÍCULAS FLOTANTES (Reducir elementos DOM) */
  .live-music-particle,
  .bio-music-particle,
  .contact-particle,
  .video-particle,
  .gallery-particle,
  .modal-particle,
  [class*="-particle"],
  [class*="-light"],
  [class*="-note"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* 3. SIMPLIFICAR PSEUDO-ELEMENTOS ANIMADOS */
  .live-sets-wrapper::before,
  .bio-section-wrapper::before,
  .modal-content::before,
  .video-gallery-container::before,
  .home-contact-form-section::before {
    animation: none !important;
    opacity: 0.3 !important;
  }
  
  .live-sets-wrapper::after,
  .bio-section-wrapper::after,
  .home-contact-form-section::after,
  .modal-content::after {
    animation: none !important;
    transform: none !important;
    display: none !important;
    opacity: 0 !important;
  }
  
  /* ELIMINAR pseudo-elementos decorativos innecesarios */
  .video-tile::before,
  .video-tile::after,
  .photo-tile::before,
  .photo-tile::after,
  .gallery-item::before,
  .gallery-item::after,
  .btn::before,
  .btn::after,
  .card::before,
  .card::after,
  .nav-link::before,
  .nav-link::after,
  .social-link::before,
  .social-link::after {
    display: none !important;
    content: none !important;
  }
  
  /* 4. CONVERTIR 3D TRANSFORMS A 2D */
  * {
    perspective: none !important;
    transform-style: flat !important;
  }
  
  /* 5. OPTIMIZAR BACKGROUND ATTACHMENT */
  * {
    background-attachment: scroll !important;
  }

  /* ============================================
     ANIMACIONES ESPECÍFICAS A ELIMINAR
     Enfoque quirúrgico: solo las más pesadas
     ============================================ */
  
  /* SHIMMER EFFECTS - Muy costosos en GPU */
  [class*="shimmer"]::before,
  [class*="shimmer"]::after,
  .bio-section-wrapper::before,
  .video-gallery-container::before,
  .home-contact-form-section::before,
  .artist-name::before,
  .artist-list::before,
  .video-item::before,
  .modal-header::before {
    animation: none !important;
    opacity: 0 !important;
    display: none !important;
  }
  
  /* ROTACIONES INFINITAS - CPU/GPU intensive */
  [class*="rotate"],
  .video-item::after,
  .contact-form-section::after,
  .header-content::after {
    animation: none !important;
    transform: none !important;
  }
  
  /* KENBURNS / ZOOM EFFECTS - Muy pesados */
  [class*="kenburns"],
  .photo-item img,
  .bio-image-wrapper img {
    animation: none !important;
  }
  
  /* FLOAT / PULSE INFINITOS - Muchos repaints */
  [class*="float"],
  [class*="pulse"],
  [class*="glow"],
  .video-overlay::before,
  .badge::before,
  .play-icon::before {
    animation: none !important;
  }
  
  /* GRADIENT ANIMADOS - Costosos en mobile */
  [class*="gradient"],
  .profile-title,
  .section-title,
  h1, h2, h3 {
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    animation: none !important;
  }
  
  /* ANIMACIONES ESPECÍFICAS DE SECCIONES */
  
  /* Live Sets - Eliminar animaciones complejas y efectos pesados */
  .live-sets-wrapper *[class*="animate"],
  .live-sets-wrapper *[class*="pulse"],
  .live-event-card::before,
  .live-event-card::after,
  .live-sets-carousel::before,
  .live-set-card::before,
  .live-set-card::after,
  .card-img-top::before,
  .card-img-top::after {
    animation: none !important;
    display: none !important;
    content: none !important;
  }
  
  /* Live Sets - Eliminar backgrounds animados */
  .live-sets-carousel::before {
    opacity: 0 !important;
    display: none !important;
  }
  
  /* Live Sets - Simplificar efectos hover */
  .live-set-card:hover::before,
  .live-set-card:hover {
    transform: none !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
  }
  
  .live-set-card:hover .card-img-top img,
  .live-sets .live-set-card:hover .card-img {
    transform: none !important;
    filter: none !important;
  }
  
  /* Live Sets - Eliminar filtros pesados */
  .card-img-top img,
  .live-sets .card-img {
    filter: none !important;
    transition: none !important;
  }
  
  /* Live Sets - Simplificar backdrop-filter específico */
  .live-sets-carousel,
  .live-set-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.7) !important;
  }
  
  /* Live Sets - Eliminar animaciones de texto */
  .cocktail-title,
  .party-title {
    animation: none !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Bio - Eliminar shimmer y efectos */
  .bio-item::before,
  .bio-item::after,
  .artist-name,
  .artist-role {
    animation: none !important;
  }
  
  /* Video Gallery - Simplificar */
  .video-item,
  .video-title,
  .video-overlay {
    animation: none !important;
  }
  
  /* Contact - Simplificar */
  .contact-form-section::before,
  .contact-form-section::after,
  .form-control:focus {
    animation: none !important;
  }
  
  /* Modal - Sin partículas ni efectos */
  .modal-content::before,
  .modal-content::after,
  .modal-particle {
    animation: none !important;
    display: none !important;
  }
  
  /* ============================================
     ANIMACIONES PERMITIDAS - UX Ligeras
     Estas SÍ se mantienen porque son ligeras
     ============================================ */
  
  /* Fade-in de secciones - Solo opacity, muy ligero */
  .fade-in-section,
  section {
    animation: fade-in 0.5s ease-out !important;
    animation-duration: 0.5s !important;
  }
  
  /* Logo Neón - Identidad visual, solo text-shadow (se mantiene en la siguiente sección) */
  
  /* Transiciones hover simples - Solo opacity/transform 2D */
  .btn,
  .nav-link,
  button,
  a {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }
  
  /* Ripple effect en clicks - Corto y ligero */
  .ripple-effect {
    animation: ripple 0.4s ease-out !important;
  }
  
  /* Modals - Fade simple */
  .modal.fade .modal-dialog {
    transition: transform 0.2s ease-out !important;
  }
  
  /* Forms - Focus suave */
  .form-control:focus {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }
  
  /* ============================================
     UI CLEANUP - Bordes y sombras
     ============================================ */
  
  /* Iconos sociales - Limpios sin efectos */
  .social-icons {
    background: transparent !important;
  }
  
  .social-icons::before {
    display: none !important;
  }
  
  .social-icons a {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  .social-icons a::before,
  .social-icons a::after {
    display: none !important;
  }
  
  .social-icons a:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Botón hamburguesa - Sin bordes */
  .navbar-toggler,
  .burger-btn {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
  }
  
  .navbar-toggler:focus,
  .burger-btn:focus {
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* Logo - Sin efectos adicionales */
  .logo-container {
    box-shadow: none !important;
    border: none !important;
  }
  
  /* Cards y contenedores - Sin bordes ni sombras */
  .bio-item,
  .live-set-card,
  .video-tile,
  .gallery-tile {
    border: none !important;
    box-shadow: none !important;
  }
  
  .bio-item:hover,
  .live-set-card:hover,
  .video-tile:hover,
  .gallery-tile:hover {
    box-shadow: none !important;
    transform: none !important;
  }
  
  /* Live Sets - Eliminar transformaciones en hover */
  .live-set-card img,
  .card-img-top,
  .card-img {
    transform: none !important;
    transition: none !important;
  }
  
  .live-set-card:hover img,
  .live-set-card:hover .card-img-top,
  .live-set-card:hover .card-img {
    transform: none !important;
    scale: 1 !important;
  }
  
  /* ============================================
     TRANSICIONES Y ANIMACIONES - UX Fluido
     ============================================ */
  
  /* Logo - Animación de neón (ligera, solo text-shadow) */
  .header-left .logo-container .neon-main,
  .logo-random .neon-main,
  h1.neon-main,
  html.reduced-motion .header-left .logo-container .neon-main,
  html.reduced-motion .logo-random .neon-main,
  html.reduced-motion h1.neon-main {
    animation: parpadeo-rojo 1.5s infinite alternate !important;
    animation-duration: 1.5s !important;
    animation-iteration-count: infinite !important;
    text-shadow: 0 0 5px #ff005b, 0 0 10px #ff005b, 0 0 20px #ff005b,
      0 0 40px #d4004b, 0 0 80px #d4004b !important;
  }
  
  .header-left .logo-container .neon-sub,
  .logo-random .neon-sub,
  h2.neon-sub,
  html.reduced-motion .header-left .logo-container .neon-sub,
  html.reduced-motion .logo-random .neon-sub,
  html.reduced-motion h2.neon-sub {
    animation: parpadeo-azul 1.8s infinite alternate !important;
    animation-duration: 1.8s !important;
    animation-iteration-count: infinite !important;
    text-shadow: 0 0 5px #40c4ff, 0 0 10px #40c4ff, 0 0 20px #40c4ff,
      0 0 40px #00b0ff, 0 0 80px #00b0ff !important;
  }
  
  /* Keyframes para animaciones de neón */
  @keyframes parpadeo-rojo {
    0% {
      text-shadow: 0 0 2px #ff005b, 0 0 5px #ff005b, 0 0 10px #d4004b;
      opacity: 0.8;
    }
    100% {
      text-shadow: 0 0 5px #ff005b, 0 0 10px #ff005b, 0 0 20px #ff005b,
        0 0 40px #d4004b, 0 0 80px #d4004b;
      opacity: 1;
    }
  }
  
  @keyframes parpadeo-azul {
    0% {
      text-shadow: 0 0 2px #40c4ff, 0 0 5px #40c4ff, 0 0 10px #00b0ff;
      opacity: 0.8;
    }
    100% {
      text-shadow: 0 0 5px #40c4ff, 0 0 10px #40c4ff, 0 0 20px #40c4ff,
        0 0 40px #00b0ff, 0 0 80px #00b0ff;
      opacity: 1;
    }
  }
  
  /* Fade-in sections - Entrada suave */
  .fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out !important;
  }
  
  .fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Links y botones - Transiciones suaves */
  a,
  button,
  .btn {
    transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease !important;
  }
  
  /* Cards - Hover effect eliminado en mobile */
  .bio-item,
  .live-set-card,
  .video-tile,
  .gallery-tile {
    transition: none !important;
  }
  
  .bio-item:active,
  .live-set-card:active,
  .video-tile:active {
    transform: none !important;
  }
  
  /* Live Sets - Eliminar gradientes complejos */
  .live-sets-carousel,
  .live-set-card {
    background-image: none !important;
  }
  
  .live-sets-carousel {
    background: rgba(0, 0, 0, 0.7) !important;
  }
  
  /* ============================================
     SECCIONES ESPECÍFICAS
     ============================================ */
  
  /* Bio Section - Gradiente diagonal personalizado */
  .bio-section-wrapper {
    background: linear-gradient(135deg, #2D0A69 0%, #950C0D 50%, #270A13 100%) !important;
    animation: none !important;
  }
  
  /* Main-bio - Transparente para que se vea el gradiente de fondo */
  .main-bio {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  .main-bio::before {
    display: none !important;
  }
  
  /* Bio text overlay - Siempre visible con estilo hover */
  .bio-item .text-overlay-bio {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(139, 0, 0, 0.7) 50%,
      rgba(216, 104, 48, 0.9) 100%
    ) !important;
    opacity: 1 !important;
  }
  
  .bio-item img {
    transform: none !important;
    filter: brightness(0.8) contrast(1.1) !important;
  }
  
  /* ============================================
     MODAL - Optimizado y elegante
     ============================================ */
  
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
  }
  
  .modal-content {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(139, 0, 0, 0.8) 50%, rgba(216, 104, 48, 0.3) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 1rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    animation: none !important;
    overflow: hidden !important;
  }
  
  .modal-content::before,
  .modal-content::after {
    display: none !important;
  }
  
  .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    padding: 1.25rem !important;
  }
  
  /* Bio modal - FULLSCREEN en mobile */
  .bio-modal .modal-dialog {
    margin: 0 !important;
    max-width: 100vw !important;
    height: 100vh !important;
    width: 100vw !important;
  }
  
  .bio-modal .modal-content {
    height: 100vh !important;
    width: 100vw !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  
  .bio-modal .modal-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%) !important;
    border: none !important;
    padding: 1rem !important;
  }
  
  .bio-modal .modal-header .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
  }
  
  /* Bio modal body - imagen fullscreen */
  .modal-body.bio-modal-body {
    /* NO usar background: none - eliminaría la imagen inline */
    background-size: cover !important;
    background-position: 60% center !important;
    background-repeat: no-repeat !important;
    height: 100vh !important;
    width: 100vw !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    border-radius: 0 !important;
  }
  
  .bio-modal-bg-contain.bio-modal-body {
    background-size: cover !important;
    background-position: 55% center !important;
  }
  
  .bio-text-overlay {
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(139, 0, 0, 0.3) 40%,
      rgba(139, 0, 0, 0.7) 70%,
      rgba(139, 0, 0, 0.95) 100%
    ) !important;
    padding: 1.5rem !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }
  
  /* h5 - Título del artista */
  .bio-text-overlay .profile-card-title {
    width: 100% !important;
    margin: 0 !important;
    font-size: 3rem !important;
    font-weight: 800 !important;
    color: #ff9500 !important;
    background: none !important;
    -webkit-text-fill-color: #ff9b7c !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: 
      0 0 8px rgba(0, 0, 0, 0.9),
      0 0 4px rgba(0, 0, 0, 0.8) !important;
  }
  
  /* h3 - Subtítulo debajo del título */
  .bio-text-overlay .profile-card-subtitle {
    width: 100% !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
  }
  
  /* Párrafo - Debajo del subtítulo, 100% width */
  .bio-text-overlay .profile-card-text {
    width: 100% !important;
    margin: 0.25rem 0 0 0 !important;
    font-size: 1rem !important;
    text-shadow: 
      0 0 8px rgba(0, 0, 0, 0.9),
      0 0 4px rgba(0, 0, 0, 0.8) !important;
  }
  
  /* Modal body general - SOLO para modales que NO sean bio */
  .modal-body:not(.bio-modal-body) {
    background: transparent !important;
    padding: 1.5rem !important;
  }
  
  /* Formulario del modal - Estilos limpios */
  .modal-content .form-control {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 0.5rem !important;
  }
  
  .modal-content .form-control:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(216, 104, 48, 0.5) !important;
    box-shadow: 0 0 0 0.2rem rgba(216, 104, 48, 0.15) !important;
  }
  
  .modal-content .btn-danger {
    background: linear-gradient(135deg, #d86830 0%, #8b0000 100%) !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
  }
  
  .modal-content .btn-danger:hover {
    background: linear-gradient(135deg, #ff7a42 0%, #a00000 100%) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  
  /* Modal - Fade in suave */
  .modal.fade .modal-dialog {
    opacity: 0;
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  
  .modal.show .modal-dialog {
    opacity: 1;
    transform: none !important;
  }
  
  /* Backdrop - Transición suave */
  .modal-backdrop.fade {
    transition: opacity 0.2s ease !important;
    opacity: 0.5 !important;
  }
  
  /* Contact Modal específico */
  #contactModal .modal-content {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(139, 0, 0, 0.8) 50%, rgba(216, 104, 48, 0.3) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
  }
  
  #contactModal .modal-particle {
    display: none !important;
  }
  
  #contactModal .modal-body {
    background-attachment: scroll !important;
  }
  
  /* ============================================
     NAVEGACIÓN - Hamburger menu
     ============================================ */
  
  .navbar-collapse {
    transition: height 0.3s ease, opacity 0.3s ease !important;
  }
  
  .navbar-collapse.collapsing {
    opacity: 0.5;
  }
  
  .navbar-collapse.show {
    opacity: 1;
  }
  
  /* Collapse/Accordion - Sin animación pesada */
  .collapsing {
    transition: none !important;
    height: auto !important;
  }
  
  .collapse {
    transition: none !important;
  }
  
  /* ============================================
     GRADIENTES Y TÍTULOS
     ============================================ */
  
  .section-title,
  .home-contact-form-section h3,
  .about-main-description,
  .bio-section-wrapper h2 {
    animation: none !important;
    background: linear-gradient(90deg, #4ecdc4 0%, #ff6b6b 50%, #ffe66d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  
  /* ============================================
     SIMPLIFICACIONES ESPECÍFICAS
     ============================================ */
  
  /* Live Sets */
  .live-set-card {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* Live Sets - Eliminar elementos decorativos */
  .live-energy-line,
  .live-light-dot,
  .live-music-particle {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
  }
  
  .live-energy-line.center-left,
  .live-energy-line.center-right {
    display: none !important;
  }
  
  /* Live Sets - Simplificar carrusel */
  .live-sets-carousel {
    background: rgba(0, 0, 0, 0.7) !important;
    box-shadow: none !important;
  }
  
  .live-sets-carousel-inner {
    transition: transform 0.3s ease !important;
  }
  
  /* Video Gallery */
  .dynamic-video-background {
    animation-duration: 120s !important;
    grid-gap: 10px !important;
  }
  
  .video-tile {
    animation: videoTileAppear 1.5s ease-out forwards !important;
  }
  
  .video-tile:hover {
    transform: scale(1.05) !important;
  }
  
  /* Video tiles - Background mientras carga */
  .video-tile {
    background: #1a1a2e !important;
    position: relative !important;
  }
  
  .video-tile video {
    filter: none !important;
    background: #000 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    /* Ensure video poster/first frame displays properly */
    display: block !important;
  }
  
  /* Style for video poster attribute */
  .video-tile video[poster] {
    object-fit: cover !important;
  }
  
  /* Video Modal - Permitir transición ligera para cambio de video */
  #modalVideo,
  .video-modal video {
    /* Mantener solo transición de opacity - muy ligera */
    transition: opacity 0.25s ease-out !important;
  }
  
  .video-modal-title {
    transition: opacity 0.25s ease-out !important;
  }
  
  /* Video Modal - Simplificar efectos visuales */
  .video-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.95) !important;
  }
  
  .video-modal video {
    box-shadow: none !important;
  }
  
  /* Video Modal - En mobile ocupar todo el ancho */
  .video-modal .modal-dialog {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
  }
  
  .video-modal .modal-content {
    width: 100% !important;
  }
  
  .video-modal .modal-body {
    width: 100% !important;
  }
  
  .video-player-container {
    width: 100% !important;
  }
  
  .video-modal video,
  #modalVideo {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 85vh !important;
    object-fit: contain !important;
  }
  
  /* Contact Forms */
  .home-contact-form-section::before,
  .home-contact-form-section::after {
    display: none !important;
  }
  
  .form-control {
    transition: border-color 0.3s ease !important;
    box-shadow: none !important;
  }
  
  .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25) !important;
  }
  
  /* Photo Gallery */
  .photo-gallery-wrapper {
    animation: none !important;
  }
  
  .gallery-tile {
    transition: transform 0.3s ease !important;
  }
  
  .gallery-tile:hover {
    transform: scale(1.05) !important;
  }
  
  /* ============================================
     SPINNERS Y LOADERS - Mantener funcionales
     ============================================ */
  
  .spinner,
  .spinner-border,
  .spinner-grow,
  .loading,
  [class*="spinner"],
  [class*="loading"],
  [class*="loader"] {
    animation-duration: revert !important;
    animation-iteration-count: revert !important;
  }
}

/* ==========================================
   REDUCED MOTION CLASS (dispositivos low-power)
   ========================================== */

/* DESACTIVADO: El selector universal bloqueaba las animaciones del logo
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
*/

/* Excepciones para animaciones esenciales del logo - YA NO NECESARIAS */
/*
.reduced-motion .neon-main,
.reduced-motion .neon-sub,
.reduced-motion .logo-container .neon-main,
.reduced-motion .logo-container .neon-sub,
html.reduced-motion .neon-main,
html.reduced-motion .neon-sub,
html.reduced-motion .logo-container .neon-main,
html.reduced-motion .logo-container .neon-sub,
html.reduced-motion .header-left .logo-container .neon-main,
html.reduced-motion .header-left .logo-container .neon-sub,
html.reduced-motion .logo-random .neon-main,
html.reduced-motion .logo-random .neon-sub,
html.reduced-motion h1.neon-main,
html.reduced-motion h2.neon-sub {
  animation-duration: revert !important;
  animation-iteration-count: revert !important;
}
*/

/* ==========================================
   PRESERVE ESSENTIAL ANIMATIONS
   ========================================== */

@media (max-width: 768px) {
  
  /* Logo neon - Excepción a reduced-motion */
  .neon-main,
  .neon-sub {
    animation-duration: revert !important;
    animation-iteration-count: revert !important;
  }
  
  /* Fade-in sections */
  .fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease !important;
  }

  .fade-in-section.visible {
    opacity: 1;
    transform: translateY(0) !important;
  }
  
  /* Video Modal - Sin padding, video centrado */
  .video-modal .modal-dialog {
    margin: 0 !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  
  .video-modal .modal-content {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .video-modal video,
  .video-modal #modalVideo {
    width: 100vw !important;
    height: auto !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    display: block !important;
    margin: 0 auto !important;
  }
  
  .video-modal .modal-body {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  
  /* Photo Gallery Modal - Sin padding, imagen centrada */
  #photoGalleryModal .modal-dialog {
    margin: 0 !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
  }
  
  #photoGalleryModal .modal-content {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.95) !important;
    border: none !important;
  }
  
  #photoGalleryModal .modal-body {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  
  #photoGalleryCarousel,
  .photo-gallery-carousel {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #photoGalleryCarousel .carousel-inner,
  .photo-gallery-carousel .carousel-inner {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #photoGalleryCarousel .carousel-item,
  .photo-gallery-carousel .carousel-item {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .carousel-image-mobile {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}